/*--------------------
00 IMPORTS
--------------------*/

@import url(css/reset.css);

/*--------------------
00 PROPERTIES
--------------------*/

:root {
    /* JS PROPERTIES */
    --display-none: none;
    --display-block: block;

    /* COLORS */
    --clr-black: #020426;
    --clr-black: #00001A;
    --clr-yellow: #FDCC39;
    --clr-cream: #FAF3E3;
    --clr-pink: #FB3E6D;
    --clr-purple: #9C1490;
    --clr-blue: #140D77;

    /* FONT FAMILY */
    --ff-primary: 'futura-pt', sans-serif;
    --ff-secondary: 'miller-headline', serif;

    /* FONT WEIGHT */
    --light: 300;
    --book: 400;
    --medium: 500;
    --demi: 600;

    /* FONT PROPERTIES // style, variant, weight, size/line-height, family */
    --fp-about-tagline: normal 600 var(--fs-800) var(--ff-primary);
    --fp-form-tagline: normal 600 var(--fs-700) var(--ff-primary);

    --fp-header-primary: normal 600 var(--fs-700) var(--ff-primary);
    --fp-header-secondary: italic 300 var(--fs-700) var(--ff-secondary);

    --fp-subheader-primary: normal 600 var(--fs-700) var(--ff-primary);
    --fp-subheader-secondary: italic 300 var(--fs-700) var(--ff-secondary);
    --fp-subheader-accent: normal 600 var(--fs-600) var(--ff-primary);

    --fp-body-primary: normal 500 var(--fs-400) var(--ff-primary);
    --fp-body-secondary: normal 400 var(--fs-300) var(--ff-primary);

    --fp-list-primary: italic 300 var(--fs-600) var(--ff-secondary);
    --fp-footer-primary: normal 400 var(--fs-300) var(--ff-primary);
    --fp-btn-primary: normal 400 var(--fs-500) var(--ff-primary);

    --fp-subheader-team: normal 600 var(--fs-600) var(--ff-primary);
    --fp-accent-team: italic 300 var(--fs-600) var(--ff-secondary);
    --fp-team-card-header: normal 600 var(--fs-500) var(--ff-primary);
    --fp-team-card-subheader: normal 500 var(--fs-400) var(--ff-primary);
    --fp-team-card-body: normal 400 var(--fs-400) var(--ff-primary);

    --fp-post-body: normal 400 var(--fs-400) var(--ff-primary);
    --fp-post-accent: italic 300 var(--fs-400) var(--ff-secondary);


    /* FONT SIZE */
    --fs-300: max(1.2rem, 12px);
    --fs-400: max(1.4rem, 14px);
    --fs-500: max(1.6rem, 16px);
    --fs-600: max(2.4rem, 24px);
    --fs-700: max(3.2rem, 32px);
    --fs-800: max(4.8rem, 48px);
    --fs-900: max(4.8rem, 48px);
    --fs-1000: max(6.4rem, 64px);

    /* PADDING */
    --pd-100: max(0.4rem, 4px);
    --pd-200: max(0.8rem, 8px);
    --pd-300: max(1.6rem, 16px);
    --pd-400: max(3.2rem, 32px);
    --pd-500: max(4.8rem, 48px);
    --pd-600: max(6.4rem, 64px);
    --pd-700: max(9.6rem, 96px);
    --pd-800: max(12.8rem, 128px);
    --pd-900: max(16rem, 160px);
    --pd-1000: max(32rem, 320px);

    /* CUSTOM HEIGHT */
    --header-main-height: max(96px, 9.6rem);
    --logo-main: min(6.4rem, 64px);
    --logo-nav: min(2.4rem, 16px);
    --border-radius: max(0.6rem, 6px);
}

@media only screen and (min-width: 48.2rem) {
    :root {
        /* FONT SIZE */
        --fs-300: min(1.4rem, 14px);
        --fs-400: min(1.6rem, 16px);
        --fs-500: min(2rem, 20px);
        --fs-600: min(2.8rem, 28px);
        --fs-700: min(4rem, 40px);
        --fs-800: min(5.6rem, 56px);
        --fs-900: min(6.4rem, 64px);
        --fs-1000: min(8rem, 80px);

        /* PADDING */
        --pd-100: min(0.8rem, 8px);
        --pd-200: min(1.2rem, 12px);
        --pd-300: min(2.4rem, 24px);
        --pd-400: min(4.8rem, 48px);
        --pd-500: min(7.2rem, 72px);
        --pd-600: min(9.6rem, 96px);
        --pd-700: min(14.4rem, 144px);
        --pd-800: min(19.2rem, 192px);
        --pd-900: min(24rem, 240px);
        --pd-1000: min(48rem, 480px);

        /* CUSTOM HEIGHT */
        --header-main-height: max(96px, 9.6rem);
        --logo-main: max(6.4rem, 64px);
        --logo-nav: max(2.4rem, 16px);
        --border-radius: max(1.2rem, 12px);
    }
}

@media only screen and (min-width: 76.8rem) {
    :root {
        /* FONT SIZE */
        --fs-300: min(1.6rem, 16px);
        --fs-400: min(1.8rem, 18px);
        --fs-500: min(2.4rem, 24px);
        --fs-600: min(3.2rem, 32px);
        --fs-700: min(4.8rem, 48px);
        --fs-800: min(6.4rem, 64px);
        --fs-900: min(8rem, 80px);
        --fs-1000: min(9.6rem, 96px);

        /* PADDING */
        --pd-100: min(0.8rem, 8px);
        --pd-200: min(1.6rem, 16px);
        --pd-300: min(3.2rem, 32px);
        --pd-400: min(6.4rem, 64px);
        --pd-500: min(9.6rem, 96px);
        --pd-600: min(12.8rem, 128px);
        --pd-700: min(19.2rem, 192px);
        --pd-800: min(25.6rem, 256px);
        --pd-900: min(32rem, 320px);
        --pd-1000: min(64rem, 640px);

        /* CUSTOM HEIGHT */
        --header-main-height: min(9.6rem, 96px);
        --logo-main: min(6.4rem, 64px);
        --logo-nav: min(2rem, 20px);
        --border-radius: min(1.8rem, 18px);
    }
}

/*--------------------
00 CUSTOM CLASSES
--------------------*/
.fb-r {
    display: flex;
    flex-direction: row !important;
    width: 100%;
}

.fb-c {
    display: flex;
    flex-direction: column !important;
}

.jc-sb {
    justify-content: space-between;
}

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

.jc-fs {
    justify-content: flex-start;
}

.jc-fe {
    justify-content: flex-end;
}

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

.ai-fs {
    align-items: flex-start;
}

.ai-fe {
    align-items: flex-end;
}

/* COLUMNS */

.col-0 {
    width: 100%;
    max-width: none;
}

.col-1,
.col-2 {
    width: 86%;
    margin: 0 auto;
}

.col-3,
.col-4 {
    width: 100%;
    margin: 0 auto;
}

.col-5,
.col-6 {
    width: 100%;
    margin: 0 auto;
}

@media only screen and (min-width: 48.2rem) {

    .col-1,
    .col-2 {
        width: 84%;
    }

    .col-3,
    .col-4 {
        width: 80%;
        margin: 0 auto;
    }

    .col-5,
    .col-6 {
        width: 76%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 76.8rem) {
    .col-1 {
        width: 88%;
        max-width: min(1920px, 192rem);
    }

    .col-2 {
        width: 76%;
        max-width: min(1600px, 160rem);
    }

    .col-3 {
        width: 64%;
        max-width: min(1280px, 128rem);
    }

    .col-4 {
        width: 52%;
        max-width: min(960px, 96rem);
    }

    .col-5 {
        width: 40%;
        max-width: min(640px, 64rem);
    }

    .col-6 {
        width: 28%;
        max-width: min(320px, 32rem);
    }
}

/* PADDING */

.pd-v-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pd-v-400 {
    padding-top: var(--pd-400);
    padding-bottom: var(--pd-400);
}

.pd-v-500 {
    padding-top: var(--pd-500);
    padding-bottom: var(--pd-500);
}

.pd-v-600 {
    padding-top: var(--pd-600);
    padding-bottom: var(--pd-600);
}

/* GAP */

.gap-400 {
    gap: var(--pd-400);
}

.gap-500 {
    gap: var(--pd-500);
}

.gap-600 {
    gap: var(--pd-600);
}

.max-h-400 {
    max-height: 1440px;
}

.max-w-1920 {
    max-width: min(1920px, 192rem);
    margin: 0 auto;
}

/* TYPOGRAPHY */

.tc {
    text-align: center !important;
}

.tl {
    text-align: left !important;
}

/* COLOR */

.clr-bg-purple {
    background-color: var(--clr-purple);
}

.clr-bg-pink {
    background-color: var(--clr-pink);
}

.clr-bg-black {
    background-color: var(--clr-black);
}

.clr-bg-yellow {
    background-color: var(--clr-yellow);
}

.clr-bg-blue {
    background-color: var(--clr-blue);
}

.clr-cream {
    color: var(--clr-cream);
}

.clr-black {
    color: var(--clr-black);
}

/* SECTION */

section {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: var(--pd-400) 0;
    background-color: var(--clr-cream);
    z-index: 5;
}

.container {
    position: relative;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 76.8rem) {
    .container {
        height: 100%;
    }
}

.text-container {
    display: flex;
    flex-direction: column;
    gap: var(--pd-400);
}

/* SCREEN */
.ar-16-9 {
    margin: 0 auto;
    max-width: 100%;
    max-height: 1080px;
    width: 100vw;
    height: 56.25vw;
}

.ar-5-4 {
    margin: 0 auto;
    max-width: 100%;
    max-height: 1536px;
    width: 100vw;
    height: 80vw;
}

.ar-5-4-rv {
    margin: 0 auto;
    max-width: 100%;
    max-height: 1536px;
    width: 100vw;
    height: 80vw;
}

.ar-5-2 {
    margin: 0 auto;
    max-width: 100%;
    max-height: 768px;
    width: 100vw;
    height: 40vw;
}

.ar-5-2-rv {
    margin: 0 auto;
    max-width: 100%;
    max-height: 768px;
    width: 100vw;
    height: 40vw;
}

@media only screen and (max-width: 76.8rem) {
    .ar-5-2 {
        margin: 0 auto;
        max-width: 100%;
        max-height: 768px;
        width: 100vw;
        height: 80vw;
    }

    .ar-5-2-rv {
        margin: 0 auto;
        max-width: 100%;
        max-height: 768px;
        width: 100vw;
        height: 250vw;
    }
}

@media only screen and (max-width: 46.2rem) {
    .ar-5-4-rv {
        margin: 0 auto;
        max-width: 100%;
        max-height: 1536px;
        width: 100vw;
        height: 200vw;
    }
}

/*--------------------
00 SETTINGS
--------------------*/
html {
    color: var(--clr-black);
    font-size: calc(28% + 0.390625vw);
    /* font-size: calc(28% + min(0.390625vw, 0.390625vh)); */
    overflow-x: hidden;
}

body {
    position: relative;
    font-size: 1.6rem;
    font-family: var(--ff-primary);
    overflow-x: hidden;
    counter-reset: list;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    background-color: var(--clr-cream);
}

::-webkit-scrollbar-thumb {
    background-color: var(--clr-purple);
    border-radius: var(--border-radius);
    background-clip: content-box;
}

/*--------------------
00 ANIMATION
--------------------*/
@keyframes bg-color {
    0% {
        background-color: var(--clr-black);
    }

    10% {
        background-color: var(--clr-yellow);
    }

    20% {
        background-color: var(--clr-pink);
    }

    30% {
        background-color: var(--clr-purple);
    }

    40% {
        background-color: var(--clr-blue);
    }

    50% {
        background-color: var(--clr-black);
    }
}

@keyframes rotate-cw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes rotate-acw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/*--------------------
00 MODULE
--------------------*/
.blog-btn {
    position: relative;
    cursor: pointer;
    /* border-bottom: 1px solid var(--clr-black); */
    font: var(--fp-body-primary);
}

.blog-btn::before {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 100%;
    border: 1px solid black;
    transform: scaleX(1);
    transition: all .2s ease-in-out;
    transform-origin: 0% 0%;
}

.submit-btn {
    height: fit-content;
    position: relative;
    cursor: pointer;
    font: var(--fp-btn-primary);
    transition: all 0.2s ease-in-out;
}

.submit-btn::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -12px;
    width: 40px;
    height: 2px;
    background-color: var(--clr-cream);
    transition: all 0.2s ease-in-out;
}

@media only screen and (min-width: 76.8rem) {
    .blog-btn::before {
        bottom: -2px;
    }

    .blog-btn::before {
        transform: scaleX(0);
    }

    .blog-btn:hover:before {
        transform: scaleX(1);
        transition: all .2s ease-in-out;
    }

    .submit-btn:hover {
        color: var(--clr-yellow);
        transform: translateX(4%);
    }

    .submit-btn:hover::after {
        background-color: var(--clr-yellow);
        transform: translateX(-8%);
    }
}


/* BLOB MODULE */
@media only screen and (min-width: min(200rem, 2000px)) {
    .section-blob .container {
        width: 92%;
        max-width: min(160rem, 1600px);
        margin: 0 auto;
    }
}

.section-blob .container {
    position: relative;
    /* width: 100%; */
    /* height: 100%; */
}

.blob {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* border: 2px solid tomato; */
}

/* BLOB POSITION */
.blob:nth-of-type(1) {
    background-image: url(assets/blob/bb-1.svg);
    height: min(2.4rem, 48px);
    width: min(2.4rem, 48px);
    /* POSITION */
    top: 45%;
    left: 1%;
}

.blob:nth-of-type(2) {
    background-image: url(assets/blob/bb-2.svg);
    height: min(2.2rem, 44px);
    width: min(2.2rem, 44px);
    /* POSITION */
    top: 47.4%;
    left: 7.6%;
}

.blob:nth-of-type(3) {
    background-image: url(assets/blob/bb-3.svg);
    height: min(2.4rem, 48px);
    width: min(2.4rem, 48px);
    /* POSITION */
    top: 52.1%;
    left: 15.2%;
}

.blob:nth-of-type(4) {
    background-image: url(assets/blob/bb-4.svg);
    height: min(2.4rem, 48px);
    width: min(2.4rem, 48px);
    /* POSITION */
    top: 49.2%;
    left: 22.2%;
}

.blob:nth-of-type(5) {
    background-image: url(assets/blob/bb-5.svg);
    height: min(2.2rem, 44px);
    width: min(2.2rem, 44px);
    /* POSITION */
    top: 50%;
    left: 27%;
}

.blob:nth-of-type(6) {
    background-image: url(assets/blob/bb-6.svg);
    height: min(4.8rem, 96px);
    width: min(4.8rem, 96px);
    /* POSITION */
    top: 40%;
    left: 33%;
}

.blob:nth-of-type(7) {
    background-image: url(assets/blob/bb-7.svg);
    height: min(3.9rem, 78px);
    width: 3.9rem;
    /* POSITION */
    top: 46%;
    left: 42%;
}

.blob:nth-of-type(8) {
    background-image: url(assets/blob/bb-8.svg);
    height: min(3.2rem, 64px);
    width: min(3.2rem, 64px);
    /* POSITION */
    top: 49%;
    left: 51%;
}

.blob:nth-of-type(9) {
    background-image: url(assets/blob/bb-9.svg);
    height: min(4.6rem, 92px);
    width: min(4.6rem, 92px);
    /* POSITION */
    top: 43%;
    left: 57%;
}

.blob:nth-of-type(10) {
    background-image: url(assets/blob/bb-10.svg);
    height: min(3.2rem, 64px);
    width: min(3.2rem, 64px);
    /* POSITION */
    top: 48%;
    left: 64%;
}

/*--------------------
00 NAVIGATION
--------------------*/

header,
footer {
    position: absolute;
    display: flex;
    background-color: var(--clr-cream);
    height: var(--header-main-height);
    z-index: 100;
}

header.darkTheme {
    background-color: var(--clr-black);
}

.team-page header {
    background-color: var(--clr-black);
}

footer {
    position: static;
    background-color: var(--clr-black);
    color: var(--clr-cream);
}

.navbar {
    position: relative;
    z-index: 100;
}

.navbar .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    height: 100%;
}

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

.nav-logo {
    justify-self: flex-start;
    cursor: pointer;
    height: 100%;
    /* width: var(--logo-main); */
    width: calc(var(--logo-main) * 1.25);
    background-color: var(--clr-black);
    mask: url(assets/logo.svg) no-repeat left center / contain;
    -webkit-mask: url(assets/logo.svg) no-repeat center / contain;

    /* transition: all .4s ease-in-out; */
    transform-origin: 50% 50%;
}

header.darkTheme .nav-logo {
    background-color: var(--clr-cream);
}

footer .nav-logo {
    background-color: var(--clr-cream);
}

.contact .nav-logo {
    background-color: var(--clr-cream);
}

@media only screen and (min-width: 76.8rem) {
    .nav-logo:not(footer .nav-logo):hover {
        animation: bg-color 2.5s infinite ease-in-out;
    }

    .nav-menu:hover .nav-m {
        scale: 1.05;
        transition: all .4s ease-in-out;
    }

    .nav-menu:hover .nav-ring-a {
        scale: 1.05;
        transition: all .4s ease-in-out;
    }

    .nav-menu:hover .nav-ring-b {
        scale: 1.05;
        transition: all .4s ease-in-out;
    }
}

.nav-menu {
    justify-self: flex-end;
    cursor: pointer;
    position: relative;

    height: var(--logo-main);
    width: var(--logo-main);
}

.nav-m {
    position: absolute;
    inset: 0;
    margin: auto;
    height: var(--logo-nav);
    background-color: var(--clr-black);
    mask: url(assets/menu-m.svg) no-repeat left center / contain;
    -webkit-mask: url(assets/menu-m.svg) no-repeat center / contain;
    height: 25%;
}

header.darkTheme .nav-m {
    background-color: var(--clr-cream);
}

.contact .nav-m {
    background-color: var(--clr-cream);
}

.nav-ring-a {
    position: absolute;
    inset: 0;
    margin: auto;
    background-color: var(--clr-purple);
    mask: url(assets/menu-ring-a.svg) no-repeat left center / contain;
    -webkit-mask: url(assets/menu-ring-a.svg) no-repeat center / contain;

    /* transition: all .4s ease-in-out; */
    animation: rotate-cw 4s linear infinite;
}

header.darkTheme .nav-ring-a {
    background-color: var(--clr-pink);
}

.nav-ring-b {
    position: absolute;
    inset: 0;
    margin: auto;
    background-color: var(--clr-blue);
    mask: url(assets/menu-ring-b.svg) no-repeat left center / contain;
    -webkit-mask: url(assets/menu-ring-b.svg) no-repeat center / contain;

    animation: rotate-acw 4s linear infinite;
}

header.darkTheme .nav-ring-b {
    background-color: var(--clr-cream);
}

.nav-menu.is-active .nav-ring-a {
    transition: all .4s ease-in-out;
}

.nav-menu.is-active .nav-ring-b {
    transition: all .4s ease-in-out;
}

.nav-menu.is-active .nav-m {
    background-color: var(--clr-blue);
    transform: rotate(-90deg);
    transition: all .4s ease-in-out;
}

footer .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    font: var(--fp-footer-primary);
    text-transform: uppercase;
    gap: var(--pd-300);
}

.nav-social {
    height: 100%;
    justify-self: flex-end;
    display: flex;
    align-items: center;
    gap: var(--pd-200);
}

.social-link {
    height: var(--pd-300);
    width: var(--pd-300);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.social-link.twitter {
    background-image: url(assets/twitter.svg);
}

.social-link.instagram {
    background-image: url(assets/instagram.svg);
}

.social-link.facebook {
    background-image: url(assets/facebook.svg);
}

/*--------------------
00 MB MENU
--------------------*/
.menu {
    /* border: 2px solid tomato; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    width: 100%;
    /* max-width: 0; */
    color: var(--clr-black);
    text-align: left;
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%);
    left: 100%;
    transition: all 0.4s ease-in-out;
}

.menu.is-active {
    /* max-width: none; */
    /* width: 100%; */
    left: 0;
    opacity: 1;
    transform: translateX(0%);
    transition: all 0.4s ease-in-out;
}

.menu .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 33%;
    /* opacity: 0; */
    background-color: var(--clr-yellow);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    transition: all 0.4s ease-in-out;
}

.menu.menu.is-active .container {
    /* opacity: 1; */
    transition: all 0.4s ease-in-out;
}

.menu-links {
    display: flex;
    flex-direction: column;
    gap: var(--pd-300);
}

.menu li {
    padding: var(--pd-200) 0;
    cursor: pointer;
    position: relative;
    text-align: left;
    position: relative;
    font: var(--fp-subheader-accent);
    transition: all 0.2s ease-in-out;
}

.menu li::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -12px;
    width: 42px;
    height: 2px;
    background-color: var(--clr-black);
    transition: all 0.2s ease-in-out;
}

@media only screen and (min-width: 76.8rem) {
    .menu li:hover {
        transform: translateX(5%);
    }

    .menu li:hover::after {
        transform: translateX(-20%);
    }
}

@media only screen and (max-width: 76.8rem) {
    .menu .container {
        width: 45%;
    }
}

@media only screen and (max-width: 48.2rem) {
    .menu .container {
        width: 65%;
    }
}

/*--------------------
00 MAIN
--------------------*/
main {
    position: relative;
    background-color: var(--clr-cream);
    z-index: 5;
    margin-bottom: calc(100vh + var(--header-main-height));
    margin-bottom: calc(100svh + var(--header-main-height));
    overflow: visible;
}

main>.container {
    /* background-color: var(--clr-cream); */

}

/* FOOTER BORDER */
main>.container {
    border-left: solid var(--clr-black);
    border-bottom: solid var(--clr-black);
    border-right: solid var(--clr-black);
    border-width: 0;
    z-index: 5;

    /* border: 2px solid tomato; */

    /* margin-bottom: calc(100vh + var(--header-main-height)); */
    /* margin-bottom: calc(100svh + var(--header-main-height)); */
}

main>.container::after {
    border-bottom-left-radius: calc(var(--border-radius) * 2);
    border-bottom-right-radius: calc(var(--border-radius) * 2);
    /* content: ""; */
    position: absolute;
    left: 0;
    right: 0;
    /* bottom: 0; */
    bottom: calc((0 - var(--header-main-height)));
    width: 100%;
    height: 8vh;
    height: 8svh;
    max-height: 64px;
    background-color: var(--clr-cream);
}

@media only screen and (max-width: 48.2rem) {
    main>.container {
        width: 100%;
    }
}

.footer-border {
    border-bottom-left-radius: calc(var(--border-radius) * 2);
    border-bottom-right-radius: calc(var(--border-radius) * 2);
    background-color: var(--clr-cream);
    width: 100%;
    height: var(--pd-800);
}

/*--------------------
00 HERO
--------------------*/
.home .hero {
    justify-content: center;
    margin-top: calc(var(--header-main-height));
    min-height: calc(100vh - var(--header-main-height));
    min-height: calc(100svh - var(--header-main-height));
}

@media only screen and (min-height: 90rem) {
    .home .hero {
        min-height: 0;
        max-height: 1080px;
    }
}

.home .hero .container {
    justify-content: center;
    align-items: center;
    gap: var(--pd-600);
}

.hero-cards {
    display: flex;
    width: calc(100% + 128px);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--pd-300);
    width: 100%;
}

.card[data-card="media"] {
    z-index: 5;
    transform: translateX(64px);
    top: -64px;
}

.card[data-card="apps"] {
    z-index: 10;
    transform: translateX(32px);
    top: 0;
}

.card[data-card="marketing"] {
    z-index: 5;
    transform: translateX(-32px);
    top: -64px;
}

.card[data-card="xr"] {
    z-index: 10;
    transform: translateX(-64px);
    top: 0;
}

.card-img {
    position: relative;
    border-radius: var(--border-radius);
    background: no-repeat center/cover;
    filter: drop-shadow(0px 4px 18px rgba(5, 3, 28, 0.3));
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

.card[data-card="media"] .card-img {
    background-image: url(assets/card-media.jpg);
}

.card[data-card="apps"] .card-img {
    background-image: url(assets/card-apps.jpg);
}

.card[data-card="marketing"] .card-img {
    background-image: url(assets/card-marketing.jpg);
}

.card[data-card="xr"] .card-img {
    background-image: url(assets/card-xr.jpg);
}

/* TYPOGRAPHY */

.hero .container h1 {
    font: var(--fp-subheader-primary);
    text-align: center;
}

.hero .container h1 span {
    font: var(--fp-subheader-secondary);
}

.hero .container p {
    font: var(--fp-body-secondary);
    line-height: 1.6;
}

.card-link {
    position: relative;
    font: var(--fp-subheader-accent);
}

.card-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -21px;
    width: 42px;
    height: 3px;
    background-color: var(--clr-black);
}

@media only screen and (max-width: 76.8rem) {
    .home .hero {
        /* min-height: calc(100vh - var(--header-main-height)); */
        /* min-height: calc(100svh - var(--header-main-height)); */
    }

    .home .hero .hero-cards {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: var(--pd-400);
    }

    .card[data-card="media"] {
        z-index: 5;
        transform: translateX(0);
        top: 0px;
    }

    .card[data-card="apps"] {
        z-index: 10;
        transform: translateX(0);
        top: 32px;
    }

    .card[data-card="marketing"] {
        z-index: 5;
        transform: translateX(0);
        top: 0px;
    }

    .card[data-card="xr"] {
        z-index: 10;
        transform: translateX(0);
        top: 32px;
    }

    /* TYPOGRAPHY */

    .card-link::after {
        bottom: -2px;
        width: 24px;
        left: -9px;
        height: 2px;
    }
}

/*--------------------
00 SUB-HERO
--------------------*/

.sub-hero {
    padding: 0;
}

.sub-hero .container {
    flex-direction: column;
    justify-content: center;
}

.sub-hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home .sub-hero-img {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    z-index: 5;
    /* overflow: hidden; */
    transform: scale(0.8);

    /* Background */
    background-image: url(assets/sub-hero.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 160%;
}

.sub-hero .text-container {
    position: relative;
    color: var(--clr-cream);
    transform: scale(1.1);
    gap: 2px;
    z-index: 10;
}

/* TYPOGRAPHY */

.sub-hero .text-container p:nth-child(1) {
    font: var(--fp-header-secondary);
    text-align: start;
}

.sub-hero .text-container p:nth-child(2) {
    font: var(--fp-header-primary);
    text-align: start;
}

.sub-hero .text-container p:nth-child(3) {
    text-align: end;
    font: var(--fp-header-primary);
}

@media only screen and (max-width: 76.8rem) {
    .sub-hero .container {
        width: 100%;
    }
}

/*--------------------
00 SHOWCASE
--------------------*/
.case {
    padding: var(--pd-600) 0;
}

.case .container {
    flex-direction: row;
}

.case-border {
    position: absolute;
    overflow: hidden;
    margin: auto 0;
    top: 0;
    bottom: 0;
    right: calc(clamp(128px, 16rem, 192px) / 2);
    height: calc(100% + var(--pd-600));
    width: 100vw;

    /* BORDER */
    border-radius: var(--border-radius);
}

.case-border::after {
    border-radius: var(--border-radius);
    content: "";
    position: absolute;
    /* inset: 0; */
    top: 0;
    bottom: 0;
    right: 0;
    margin: 12px;
    background-color: var(--clr-cream);
    z-index: 0;
}

.case-border span {
    position: absolute;
    display: block;
    background: var(--clr-purple);
}

.case-border .top {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--pd-200);
    transform: scaleX(0);
    transform-origin: top left;
}

.case-border .right {
    top: 0;
    right: 0;
    width: var(--pd-200);
    height: 100%;
    transform: scaleY(0);
    transform-origin: top left;
}

.case-border .bottom {
    bottom: 0;
    right: 0;
    width: 100%;
    height: var(--pd-200);
    transform: scaleX(0);
    transform-origin: top right;
}

.case-label {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    writing-mode: vertical-lr;
    /* gap: 16px; */
}

/* CASE CARD */

.case-container {
    flex: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pd-400);
}

.case-card {
    cursor: pointer;
    position: relative;
    z-index: 10;
    display: flex;
    gap: var(--pd-300);
}

.case-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--pd-200);

}

.case-img {
    height: var(--pd-700);
    width: var(--pd-700);
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all 0.2s ease-in-out;
}

@media only screen and (min-width: 76.8rem) {
    .case-card:hover .case-img {
        scale: 1.05;
        transform: translateX(-10%);
        transition: all 0.2s ease-in-out;
    }

    .case-card:hover .case-title {
        /* scale: 1.05; */
        transform: translateX(2%);
        transition: all 0.2s ease-in-out;
    }

    .case-card:hover .case-title::after {
        transform: translateX(-26%);
        transition: all 0.2s ease-in-out;
    }
}

.case-card[data-case="1"] .case-img {
    background-image: url(assets/case-1.png);
}

.case-card[data-case="2"] .case-img {
    background-image: url(assets/case-2.png);
}

.case-card[data-case="3"] .case-img {
    background-image: url(assets/case-3.png);
}

.case-card[data-case="4"] .case-img {
    background-image: url(assets/case-4.png);
}

@media only screen and (max-width: 76.8rem) {
    .case .container {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .case-border {
        right: calc(clamp(128px, 16rem, 192px) / 3);
    }

    .case-label {
        writing-mode: horizontal-tb;
        padding-bottom: var(--pd-600);
    }
}

/* TYPOGRAPHY */
.case-title {
    position: relative;
    font: var(--fp-subheader-accent);
    transition: all 0.2s ease-in-out;

}

.case-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -12px;
    width: 42px;
    height: 2px;
    background-color: var(--clr-black);
    transition: all 0.2s ease-in-out;
}

.case-body {
    font: var(--fp-body-secondary);
}

.case-label {
    font: var(--fp-subheader-primary);
}

.case-label span {
    font: var(--fp-subheader-secondary);
}

/*--------------------
00 ABOUT
--------------------*/
.about {
    padding-top: calc(var(--pd-400) + var(--pd-400));
    background: url(assets/about.jpg) no-repeat center/cover;
    background-position-y: var(--pd-400);

    height: calc(100% + var(--pd-1000));
}

.about::before {
    content: "";
    position: absolute;
    inset: 0;
    height: var(--pd-400);
    background-color: var(--clr-yellow);
}

.about .container {
    justify-content: center;
    align-items: center;
}

.about .about-bg {
    position: absolute;
    inset: 0;
    opacity: 0.7;
    background: #00001A;
    border-radius: var(--border-radius);
    transform: scale(0.8);
    /* transition: all 0.2s ease-in-out; */
}

.about-card {
    display: flex;
    flex-direction: column;
    gap: var(--pd-300);
    color: var(--clr-cream);
    transform: scale(1.1);
}

.about-card h2 span {
    position: relative;
}

.about-card h2 span::before {
    content: "";
    top: -20%;
    right: -10%;
    width: var(--pd-400);
    height: var(--pd-400);

    position: absolute;
    background-color: var(--clr-pink);
    mask: url(assets/quote.svg) no-repeat left center / contain;
    -webkit-mask: url(assets/quote.svg) no-repeat center / contain;
    transform: rotate(-7deg);
    z-index: -1;
}

@media only screen and (max-width: 76.8rem) {
    .about-card {
        text-align: center;
        width: 70%;
    }

    .about-card h2 span::before {
        top: -10%;
        right: 40%;
    }

}

/* TYPOGRAPHY */
.about-card h2 {
    font: var(--fp-about-tagline);
    text-align: center;
    z-index: 10;
    letter-spacing: 4px;
    line-height: 1.4;
}

.about-card p {
    font: var(--fp-body-primary);
}

/*--------------------
00 SERVICES
--------------------*/
.services {
    /* position: relative; */
}

.services .container {
    gap: var(--pd-600);

}

.service-card {
    display: flex;
    align-items: center;
    gap: var(--pd-400);
}

#apps,
#xr {
    flex-direction: row-reverse;
}

.service-img {
    flex-shrink: 0;
    height: calc(var(--pd-900) * 1.25);
    width: var(--pd-900);
    background: no-repeat center/cover;
    filter: drop-shadow(0px 4px 18px rgba(5, 3, 28, 0.3));
    border-radius: var(--border-radius);
}

.service-txt {
    display: flex;
    flex-direction: column;
    gap: var(--pd-200);
    /* justify-content: space-between; */
}

#media .service-txt {
    align-items: start;
    text-align: start;
}

#apps .service-txt {
    align-items: end;
    text-align: end;
}

#marketing .service-txt {
    align-items: start;
    text-align: start;
}

#xr .service-txt {
    align-items: end;
    text-align: end;
}

/* IMAGES */
#media .service-img {
    background-image: url(assets/media.jpg);
}

#apps .service-img {
    background-image: url(assets/apps.jpg);
}

#marketing .service-img {
    background-image: url(assets/marketing.jpg);
}

#xr .service-img {
    background-image: url(assets/xr.jpg);
}

@media only screen and (max-width: 76.8rem) {

    .service-img {
        flex-shrink: 0;
        height: var(--pd-1000);
        width: 100%;
    }

    .service-card,
    #apps,
    #xr {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    #media .service-txt,
    #apps .service-txt,
    #marketing .service-txt,
    #xr .service-txt {
        align-items: start;
        text-align: start;
    }
}


/* TYPOGRAPHY */
.service-txt h3 {
    font: var(--fp-header-primary);
    letter-spacing: -2px;
}

.service-txt h4 {
    position: relative;
    font: var(--fp-subheader-accent);
}

.service-txt h4:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -12px;
    width: 42px;
    height: 2px;
    background-color: var(--clr-black);
    transition: all 0.2s ease-in-out;
}

.service-txt p {
    font: var(--fp-body-secondary);
}

/*--------------------
00 BLOG
--------------------*/
.home .blog {
    /* padding-bottom: calc(var(--pd-400) + var(--pd-800)); */
}

.home .blog .container {
    gap: var(--pd-400);
}

.home .blog-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pd-400);
}

.home .blog-card {
    padding: var(--pd-400) 0;
    gap: var(--pd-300);
    position: relative;
    width: 80%;
    display: flex;
    flex-direction: column;
    border-bottom: 4px solid var(--clr-black);
    z-index: 10;
}

.home .blog-card:nth-of-type(1) {
    align-self: flex-start;
}

.home .blog-card:nth-of-type(2) {
    align-self: center;
}

.home .blog-card:nth-of-type(3) {
    align-self: flex-end;
}

.home .blog-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--pd-200);
}

.home .blog-btn {
    align-self: flex-end;
}


.home .blog h3::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
    background-color: var(--clr-yellow);
    z-index: -1;

    position: absolute;
    overflow: hidden;
    right: 70%;
    width: 100vw;
    /* max-width: min(96rem, 960px); */
}

@media only screen and (max-width: 76.8rem) {
    .home .blog-card {
        width: 100%;
        align-self: flex-start !important;
        border-bottom: 2px solid var(--clr-black);
    }
}

/* TYPOGRAPHY */
.home .blog h3 {
    position: relative;
    font: var(--fp-header-primary);
    z-index: 10;
}

.home .blog h3 span {
    font: var(--fp-header-secondary);
}

.home .blog-card h4 {
    font: var(--fp-subheader-accent);
}

.home .blog-card h5 {
    font: var(--fp-body-secondary);
    text-transform: uppercase;
}

.home .blog-card p {
    font: var(--fp-body-secondary);
}

.home .blog-date {
    font: var(--fp-body-secondary);
}

.home .blog-time {
    font: var(--fp-body-secondary);
}

/*--------------------
00 FORM
--------------------*/
.form {
    background-color: var(--clr-black);
    color: var(--clr-cream);

    padding-bottom: calc(var(--header-main-height));
    min-height: calc(100vh - var(--header-main-height));
    min-height: calc(100svh - var(--header-main-height));
    /* REVEAL */
    position: fixed;
    bottom: 0;
    z-index: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.form::-webkit-scrollbar {
    width: 0;
}

.form .container {
    justify-content: center;
    gap: var(--pd-300);
}

.form-container {
    display: flex;
    justify-content: center;
    gap: var(--pd-300);
}

form {
    display: grid;
    grid-template-rows: repeat(5, auto);
    gap: var(--pd-300);

}

.contact-info {
    flex: 4;
    display: flex;
    flex-direction: column;
    gap: var(--pd-300);
}

form {
    flex: 5;
}

.wp-input input {
    width: 100%;
    border-bottom: 1px solid var(--clr-cream);
    margin-bottom: var(--pd-100);
    padding-bottom: var(--pd-100);
    font: var(--fp-body-primary);
    outline: none;
}

.wp-input input[type=text]:focus {
    border-bottom: 1px solid var(--clr-yellow);
}

.wp-submit {
    display: flex;
    justify-content: flex-end;
}

.submit-btn {
    transition: all 0.2s ease-in-out;
}

.contact-info .text-container {
    justify-content: center;
    gap: var(--pd-200);
}

@media only screen and (max-width: 76.8rem) {
    .form .container {
        height: 100%;
        gap: var(--pd-400);
    }

    .form-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--pd-400);
    }

    .form .container h1 {
        order: 0;
    }

    .wp-submit {
        /* height: fit-content; */
    }


    .contact-info {
        order: 2;
    }

    form {
        display: grid;
        grid-template-rows: repeat(5, auto);
    }
}

/* TYPOGRAPHY */
.form h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    position: relative;
    color: var(--clr-yellow);
    font: var(--fp-form-tagline);
    gap: var(--pd-300);
}

.form h1::after {
    content: '';
    position: relative;
    height: var(--pd-400);
    width: var(--pd-400);
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: url(assets/contact.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.contact-info h4 {
    font: var(--fp-body-primary) !important;
}

.contact-info h4::after {
    display: none;
}

.contact-form p,
.contact-info p {
    font: var(--fp-body-secondary) !important;
}

form h6 {
    /* align-self: center; */
    font: var(--fp-body-secondary) !important;
}

/*--------------------
00 CASE PAGES
--------------------*/


/* SECTION HERO */
.case-page section.case-hero {
    justify-content: center;
    margin-top: calc(var(--header-main-height));
    text-align: center;
}

/* TEXT CONTAINER */
.case-page .text-container>.text-container {
    gap: var(--pd-300);
}

/* GEOFENCING */

.case-page.geofencing section.case-art .container {
    background: url(assets/geofencing_1.jpg) no-repeat center/cover;
}

.case-page.geofencing section.solution .container {
    flex-direction: row;
}

.case-page.geofencing .solution .case-label {
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--pd-400);
}

.case-page.geofencing .results .container {
    width: 100%;
}

.case-page.geofencing .results .label {
    /* border: 2px solid tomato; */
    display: none;
}

.case-page.geofencing .note {
    padding-top: 0;
}

.case-page.geofencing .note .container {
    justify-content: flex-end;
    align-items: center;
}

.case-page.geofencing .note .container::after {
    content: "";
    position: absolute;
    inset: 0;
    height: var(--pd-400);
    background-color: var(--clr-yellow);
    z-index: 5;
}

.case-page.geofencing .note .container::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 80%;
    background-image: url(assets/geofencing_2.jpg);
    background-repeat: no-repeat;
    background-position: center var(--pd-400);
    background-size: cover;
}

.case-page.geofencing .note-container {
    position: relative;
    padding: var(--pd-600) 0;
}

.case-page.geofencing .note-bg {
    position: absolute;
    height: 100%;
    inset: 0;
    background: var(--clr-yellow);
    border-radius: var(--border-radius);
    /* margin: auto; */
    width: 100%;
}

.case-page.geofencing .note-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--clr-black);
    gap: var(--pd-300);
}

@media only screen and (max-width: 76.8rem) {
    .case-page.geofencing section.solution .container {
        flex-direction: column;
        text-align: left;
        gap: var(--pd-400);
    }

    .case-page.geofencing .solution .case-label {
        position: static;
        width: 100%;
        padding: 0;
    }

    .case-page.geofencing .note-container {
        width: 86%;
        bottom: var(--pd-600);
    }
}

/* DKC */
.case-page.dkc .video-container {
    margin: 0 auto;
    max-width: 100%;
    max-height: 1080px;
    max-height: min(1080px, 90vh);
    max-height: min(1080px, 90svh);

    width: 100vw;
    height: 56.25vw;
}

.case-page.dkc .objectives .container {
    width: 100%;
}

.case-page.dkc .results-container {
    padding-left: 6%;
    padding-right: 6%;
}

.case-page.dkc .case-custom {
    position: relative;
    background: url(assets/dkc_1.jpg) no-repeat center/cover;
    max-height: 720px;
    height: 56.25vw;
    width: 100vw;
    max-width: 100%;
}

@media only screen and (max-width: 76.8rem) {
    .case-page.dkc .video .container {
        width: 100%;
    }

    .case-page.dkc .results-container {
        width: 100%;
    }

}

/* HEALTHFUL */

.case-page.healthful section.case-art.type-a .container {
    background: url(assets/healthful_1.jpg) no-repeat center/cover;
}

.case-page.healthful .device-container {
    position: relative;
    height: 100%;
}

.case-page.healthful .case-art.type-a .case-device {
    position: absolute;
    margin: auto 0;
    inset: 0;
    top: 15%;
    left: -2%;
    height: 56rem;
    max-height: 640px;
    width: 32rem;
    background-image: url(assets/healthful_device_1.png);
}

.case-page.healthful .case-list .container {
    width: 100%;
}

.case-page.healthful .case-list .text-container p {
    position: relative;
    padding-left: var(--pd-400);
}

.case-page.healthful .case-list .text-container p::before {
    content: counter(list);
    counter-increment: list;
    font: var(--fp-list-primary);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 2.5%;
    height: 100%;
    width: var(--border-radius);
}

.case-page.healthful .case-art.type-b {
    z-index: 10;
    padding-top: 0;
    padding-bottom: var(--pd-700);
}

.case-page.healthful .case-art.type-b .container {
    padding: var(--pd-700) 0;
}


.case-page.healthful .case-art.type-b>.container>.case-device:nth-of-type(2) {
    position: absolute;
    margin: auto 0;
    inset: 0;
    top: 15%;
    left: 3.5%;
    height: min(48rem, 480px);
    width: 28rem;
    background-image: url(assets/healthful_device_2.png);
}

.case-page.healthful .case-device-container {
    position: absolute;
    right: 0;
    bottom: -16rem;
    display: flex;
    justify-content: space-between;
}

.case-page.healthful .case-art .case-device-container .case-device {
    height: min(380px, 32rem);
    width: min(260px, 18rem);
}

.case-page.healthful .case-art .case-device-container .case-device:nth-of-type(1) {
    background-image: url(assets/healthful_device_3.png);
}

.case-page.healthful .case-art .case-device-container .case-device:nth-of-type(2) {
    background-image: url(assets/healthful_device_4.png);
}

.case-page.healthful .case-art .case-device-container .case-device:nth-of-type(3) {
    background-image: url(assets/healthful_device_5.png);
}

.case-page.healthful .case-art .case-device-container .case-device:nth-of-type(4) {
    background-image: url(assets/healthful_device_6.png);
}

.case-page.healthful .case-art .case-device-container .case-device:nth-of-type(5) {
    background-image: url(assets/healthful_device_7.png);
}

@media only screen and (max-width: 76.8rem) {
    .case-page.healthful .case-art.type-a {
        z-index: 10;
    }

    .case-page.healthful .case-art.type-a .case-device {
        top: 50%;
        left: -2%;
        height: 240rem;
        max-height: 320px;
        width: 22rem;
        z-index: 10;
    }

    .case-page.healthful .case-list .container {
        padding: var(--pd-600) 0;
    }

    .case-page.healthful .case-art.type-b {
        padding-top: 0;
        padding-bottom: var(--pd-400);
    }

    .case-page.healthful .case-art.type-b .container {
        background-color: transparent;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 1fr 1fr;
        flex-direction: row-reverse;
        padding-left: 7%;
        padding-right: 7%;
    }

    .case-page.healthful .case-art.type-b .container::before {
        content: '';
        position: absolute;
        inset: 0;
        height: 50%;
        background: var(--clr-purple);
    }

    .case-page.healthful .case-art.type-b .text-container {
        position: relative;
        padding: var(--pd-700) 0;
        grid-column: 2/3;
        grid-row: 1/1;
    }

    .case-page.healthful .case-art.type-b>.container>.case-device:nth-of-type(2) {
        position: relative;
        inset: 0;
        height: min(42rem, 320px);
        width: 24rem;
        grid-column: 1/1;
        grid-row: 1/1;
    }

    .case-page.healthful .case-device-container {
        grid-column: 1/3;
        grid-row: 2/2;
        position: relative;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
    }

    .case-page.healthful .case-device-container::before {
        content: "";
        position: absolute;
        /* inset: 0; */
        top: var(--pd-600);
        left: -8%;
        background: var(--clr-yellow);
        width: 110vw;
        height: 60%;
        margin: auto;
    }

    .case-page.healthful .case-art .case-device-container .case-device {
        position: relative;
        width: 200%;
        height: 100%;
    }

    .case-page.healthful .case-art .case-device-container .case-device:nth-of-type(1) {
        top: -20%;
        left: 50%;
        grid-column: 1/2;
        grid-row: 1/1;

    }

    .case-page.healthful .case-art .case-device-container .case-device:nth-of-type(2) {
        top: -10%;
        left: -30%;
        grid-column: 3/4;
        grid-row: 1/1;
    }

    .case-page.healthful .case-art .case-device-container .case-device:nth-of-type(3) {
        top: -20%;
        left: 20%;
        grid-column: 1/1;
        grid-row: 2/3;
    }

    .case-page.healthful .case-art .case-device-container .case-device:nth-of-type(4) {
        top: -10%;
        left: 10%;
        grid-column: 2/3;
        grid-row: 2/3;
    }

    .case-page.healthful .case-art .case-device-container .case-device:nth-of-type(5) {
        top: 0%;
        left: 10%;
        grid-column: 3/3;
        grid-row: 2/3;
    }
}

/* KNOW THE VOTE */
.case-page.know-the-vote section.case-art.type-a {
    z-index: 10;
}

.case-page.know-the-vote section.case-art.type-a .container {
    background: url(assets/vote_1.jpg) no-repeat center/cover;
}

.case-page.know-the-vote .device-container {
    position: relative;
    height: 100%;
}

.case-page.know-the-vote .case-art.type-a .case-device {
    position: absolute;
    margin: auto 0;
    inset: 0;
    top: 60%;
    left: -4%;
    height: 52rem;
    max-height: 520px;
    width: 28rem;
    background-image: url(assets/vote_device_1.png);
}

.case-page.know-the-vote .case-art.type-b .results-container {
    margin: 0 auto;
    max-width: 100%;
    max-height: 1080px;
    max-height: min(1080px, 90vh);
    max-height: min(1080px, 90svh);
    width: 100vw;
    height: 56.25vw;
    background: url(assets/vote_2.jpg) no-repeat center/cover;
}

.case-page.know-the-vote .results .container {
    width: 100%;
}

.case-page.know-the-vote .case-art.type-c {
    z-index: 10;
}

.case-page.know-the-vote .case-art.type-c::before {
    content: '';
    position: absolute;
    inset: 0;
    max-width: min(1920px, 192rem);
    margin: 0 auto;
    height: var(--pd-600);
    background-color: var(--clr-yellow);
}

.case-page.know-the-vote .case-art.type-c .container {
    padding-top: var(--pd-400);
    flex-direction: row;
    justify-content: space-evenly;
}


.case-page.know-the-vote .case-art.type-c .case-device {
    position: relative;
    left: 2%;
    height: 52rem;
    max-height: 520px;
    width: 28rem;
}

.case-page.know-the-vote .case-art.type-c .case-device:nth-child(1) {
    background-image: url(assets/vote_device_2.png);
}

.case-page.know-the-vote .case-art.type-c .case-device:nth-child(2) {
    background-image: url(assets/vote_device_3.png);
}

.case-page.know-the-vote .case-art.type-c .case-device:nth-child(3) {
    background-image: url(assets/vote_device_4.png);
}

.case-page.know-the-vote .case-art.type-c .case-device:nth-child(4) {
    background-image: url(assets/vote_device_5.png);
}

@media only screen and (max-width: 76.8rem) {
    .case-page.know-the-vote .case-art.type-a .case-device {
        height: min(42rem, 320px);
        width: 24rem;
    }

    .case-page.know-the-vote .results .container {
        padding: var(--pd-700) 0;
    }

    .case-page.know-the-vote .case-art.type-c .container {
        padding-top: 0;
    }

    .case-page.know-the-vote .case-art.type-c .case-device {
        left: 2%;
        height: min(42rem, 320px);
        width: 24rem;
    }
}


/* CASE DEVICE */
.case-device {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* TYPOGRAPHY */
.case-page .case-hero h1 {
    width: 100%;
}

.case-page .case-hero p {
    width: 100%;
    margin: 0 auto;
}

@media only screen and (min-width: 48.2rem) {
    .case-page .case-hero p {
        width: 80%;
    }
}

@media only screen and (min-width: 76.8rem) {
    .case-page .case-hero p {
        width: 64%;
    }
}

.case-page h1 {
    font: var(--fp-subheader-primary);
}

.case-page h1 span {
    font: var(--fp-subheader-secondary);
}

.case-page h4 {
    position: relative;
    font: var(--fp-subheader-accent);
    /* text-align: left; */
}

.case-page h4::after {
    content: "";
    position: absolute;
    bottom: -0px;
    left: -12px;
    width: 40px;
    height: 2px;
    transition: all 0.2s ease-in-out;
}

.case-page.geofencing .results h4::after {
    background-color: var(--clr-cream);
}

.case-page.geofencing .note h4::after {
    display: none;
}

.case-page.dkc .objectives h4::after {
    background-color: var(--clr-cream);
}

.case-page.dkc .results h4::after {
    background-color: var(--clr-cream);
}

.case-page.healthful h4::after {
    background-color: var(--clr-black);
}

.case-page p {
    font: var(--fp-body-secondary);
    line-height: 1.6;
}

.case-page section .label {
    font: var(--fp-subheader-primary);
}

.case-page section .label span {
    font: var(--fp-subheader-secondary);
}

@media only screen and (max-width: min(48.2rem, 720px)) {
    br {
        display: none;
    }

    .blob {
        height: 12px !important;
        width: 12px !important;
    }

    .case-page section .label:not(section.case .label) {
        position: relative;
        writing-mode: horizontal-tb;
        justify-self: flex-start;
    }
}

/*--------------------
00 TEAM
--------------------*/
.team-page .team {
    justify-content: center;
    margin-top: calc(var(--header-main-height));
    min-height: calc(100vh - var(--header-main-height));
    min-height: calc(100svh - var(--header-main-height));
    background-color: var(--clr-black);
}

.team-page .team .container {
    /* border: 2px solid tomato; */
    gap: var(--pd-400);
}

.team-grid {
    /* border: 2px solid tomato; */
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* justify-content: space-between; */
    gap: var(--pd-400);
}

.team-card {
    border-radius: var(--border-radius);
    background-color: var(--clr-cream);
    width: 100%;
    height: 100%;
    padding-bottom: 100%;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--pd-400);
    gap: var(--pd-200);
}

/* TYPOGRAPHY */
.team.hero h1 {
    font: var(--fp-subheader-team);
    color: var(--clr-yellow);
}

.team.hero h1 span {
    font: var(--fp-accent-team);
}

.team-card h4 {
    font: var(--fp-team-card-header);
}

.team-card h5 {
    font: var(--fp-team-card-subheader);
}

.team-card p {
    font: var(--fp-team-card-body);
}

@media only screen and (min-width: 46.2rem) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 76.8rem) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*--------------------
00 BLOG INDEX
--------------------*/


/*--------------------
00 BLOG POST
--------------------*/
main.blog-post>.container {
    background-color: var(--clr-cream);
    padding-bottom: var(--pd-800);
    /* TEMP */
}

.blog-hero {
    margin-top: calc(var(--header-main-height) * 2);
}

.blog-post .blog-container {
    display: flex;
    gap: var(--pd-300);
}

.blog-post .blog-info {
    display: flex;
    gap: var(--pd-200);
}

.blog-post .blog-index .blog-index-card .text-container {
    gap: var(--pd-100);
}

.blog-post .text-container {
    gap: var(--pd-200);
}

/* BLOG CONTENT */

.blog-content {
    display: flex;
    flex-direction: column;
    gap: var(--pd-300);
    /* border: 2px solid green; */
    height: 100%;
    flex: 7;
}

.blog-post-img {
    overflow: hidden;
    width: 100%;
    padding-top: 50%;

    height: 100%;
    background-color: #D9D9D9;
}

.blog-post-body {
    font: var(--fp-post-body);
    line-height: 1.4;
}

.blog-post-accent {
    font: var(--fp-post-accent);
}

.blog-post-list {
    display: flex;
    flex-direction: column;
    gap: var(--pd-100);
    font: var(--fp-post-body);
}

.blog-post-list li {
    position: relative;
    padding-left: var(--pd-200);
}

.blog-post-list li:first-of-type::before {
    counter-set: list 1;
}

.blog-post-list li::before {
    content: counter(list)".";
    counter-increment: list;
    font: var(--fp-post-body);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0%;
    /* height: 100%; */
    /* width: var(--border-radius); */
}

.blog-post-link {
    text-decoration: underline;
}

/* BLOG INDEX */

.blog-post .blog-index {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: var(--pd-300);
}

.blog-post .blog-index-card {
    display: flex;
    gap: var(--pd-200);
}

.blog-post .blog-index-card .text-container {
    flex: 2;
}

.blog-post .blog-index-card .img-container {
    background-color: #D9D9D9;
    flex: 1;
}

/* TYPOGRAPHY */
.blog-hero .blog-title {
    font: var(--fp-subheader-accent);
    width: 50%;
}

.blog-index .blog-index-card .blog-title {
    font: var(--fp-body-primary);
}

.blog-index .blog-author {
    text-transform: uppercase;
    font: var(--fp-body-secondary);
}

.blog-index .blog-disc {
    font: var(--fp-body-secondary);
    display: none;
}

.blog-index .blog-info {
    font: var(--fp-body-secondary);
}

@media only screen and (max-width: 46.2rem) {
    .blog-hero {
        margin-top: calc(var(--header-main-height));
    }
    
    .blog-hero .blog-title {
        width: 100%;
    }

    .blog-post .blog-container {
        flex-direction: column;
    }

    .blog-post .blog-index-card {
        display: flex;
        flex-direction: column;
        gap: var(--pd-200);
    }

    .blog-post .blog-index-card .text-container {
        width: 100%;
        order: 2;
        flex: 1;
    }
    
    .blog-post .blog-index-card .img-container {
        overflow: hidden;
        flex: 1;
        order: 1;
        width: 100%;
        padding-top: 50%;
        height: 100%;
        background-color: #D9D9D9;
    }

    .blog-index .blog-disc {
        font: var(--fp-body-secondary);
        display: block;
    }
}

/*--------------------
00 DEV TOOLS
--------------------*/

.splash {
    display: none;
}