/* Type */

@font-face {
	font-family: 'stem-bold';
	src: 
		url('../projects/somasense/fonts/stem_bold.woff2') format('woff2'),
		url('../projects/somasense/fonts/Stem_Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'stem-light';
	src: 
		url('../projects/somasense/fonts/Stem_Light.woff2') format('woff2'),
		url('../projects/somasense/fonts/Stem_Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* -----------------------------------------------------------------------------------------------------
Default Settings --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */
:root {
    /* colours */
    --black: rgb(52, 47, 47);
    --white: rgb(241, 232, 222);
    --yellow: rgb(249, 223, 75);
    --green: rgb(141, 158, 146);
    --red: rgb(165, 85, 69);

        /* true stories */
        --ts-yellow:#F8D06A;
        --ts-purple:#864572;
        --ts-pink:#F4B39A;
        --ts-white:#FFFFFF;


    /* styles */
    --stroke-mobile: 1px;
    --stroke-tablet: 2px;
    --stroke-desktop: 2px;


    /* type sizes */
    --largest-mobile: 70px;
    --largest-tablet: 90px;
    --largest-desktop: 100px;

    --larger-mobile: 55px;
    --larger-tablet: 80px;
    --larger-desktop: 80px;

    --large-mobile: 40px;
    --large-tablet: 60px;
    --large-desktop: 65px;
    
    --h1-mobile: 33px;
    --h1-tablet: 46.5px;
    --h1-desktop: 53px;
    
    --h2-mobile: 30px;
    --h2-tablet: 41px;
    --h2-desktop: 45px;

    --h3-mobile: 25px;
    --h3-tablet: 36.5px;
    --h3-desktop: 37.5px;

    --h4-mobile: 20px;
    --h4-tablet: 31px;
    --h4-desktop: 25px;

    --h5-mobile: 15px;
    --h5-tablet: 25px;
    --h5-desktop: 20px;
    
    --p-mobile: 16px;
    --p-tablet: 24px;
    --p-desktop: 20px;

    --note-mobile: 14px;
    --note-tablet: 20px;
    --note-desktop: 20px;

    /* variables */
    --section-padding-mobile: 2rem;
    --section-padding-tablet: 3rem;
    --section-padding-desktop: 10rem;

    --nav-height-mobile: 4em;
    --nav-height-tablet: 4em;
    --nav-height-desktop: 4em;

    /* --footer-mobile: 24;
    --footer-tablet: 36;
    --footer-desktop: 54; */
    

}

html{
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    min-height: 100dvh;
}

* {
    /* TYPE */
    -webkit-font-smoothing: antialiased;
    color: var(--black);

    font-family: "forma-djr-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 125%;
    font-display: swap;

    /* STRUCTURE */
    box-sizing: border-box;
    margin: 0;
    padding: 0;


    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
}

body{
    position: flex;
    background-color: var(--white);

    margin: 0;
    padding: 0;

    min-height: 100dvh;
}

main {
    flex: 1;
}

/* -----------------------------------------------------------------------------------------------------
Text Formats (large to small) ----------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */

.largest{
    font-size: var(--largest-mobile);
}

.larger{
    font-size: var(--larger-mobile);
}

.large{
    font-family: hagrid, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: var(--large-mobile);
    color: rgb(from var(--green) r g b / 0.65);
}

.stats{
    color: var(--yellow);
    text-shadow: 
        -1.5px -1.5px 0 var(--black),  
         0px -1.53px 0 var(--black),
         1.5px -1.5px 0 var(--black),
         1.5px  0px 0 var(--black),
         1.5px  1.5px 0 var(--black),
         0px  1.5px 0 var(--black),
        -1.5px  1.5px 0 var(--black),
        -1.5px  0px 0 var(--black),
        
        1.5px 3px 0 var(--black);
}

h1 {
    font-weight: 700;
    font-style: normal;
    font-size: var(--h1-mobile);
    line-height: 1.1;
}

h2 {
    font-weight: 600;
    font-size: var(--h2-mobile);
    text-wrap: pretty;

}

h3{
    font-weight: 700;
    font-size: var(--h3-mobile);
    text-wrap: pretty;

}

h4{
    font-size: var(--h4-mobile);
}

h5{
    font-family: hagrid, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: var(--h5-mobile);
}

p{
    font-family: "forma-djr-text", sans-serif;
    font-weight: 300;
    font-size: var(--p-mobile);
    font-style: normal;
    /* max-width: 50ch; */
    text-wrap: pretty;
}

.note{
    font-family: "forma-djr-text", sans-serif;
    font-weight: 300;
    font-size: var(--note-mobile);
    font-style: italic;
}

.note a{
    font-weight: inherit;
    font-style: inherit;
}

a {
      -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
font-synthesis: style; }


strong{
    font-weight: 400;
}

.footer-section h3{
    font-family: hagrid, sans-serif;
    font-weight: 700;
    font-style: normal;
    /* font-size: var(--footer-mobile); */
    color: var(--white);
}

.card-title{
    font-family: "forma-djr-text", sans-serif;
    font-weight: 400;
    font-size: var(--p-mobile);
    font-style: normal;
}

.card-info{
    font-family: "forma-djr-text", sans-serif;
    font-weight: 300;
    font-size: var(--p-mobile);
    font-style: italic;
    width: 20ch;
}

.links-list a{
    text-decoration: none;
}

.links-list p{
        font-weight: 400;
}


/* -----------------------------------------------------------------------------------------------------
Navigation --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */

nav{
    position: fixed;
    top:0;
    left: 0;
    z-index: 1000;
    width: 100%;
    font-size: var(--p-mobile);
    height: var(--nav-height-mobile);
}

nav a{
    text-decoration: none;
}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-checkbox{
    appearance: none;
    pointer-events: none;
}

nav h3, nav a, nav h1{
    color: var(--white);
}

nav h1{
    font-weight: 400;
}

.submenu-items .current-page{
    color: var(--black);
}

.menu-button{
    position: fixed;
    margin: 1rem auto auto var(--section-padding-mobile);
    z-index: 1000;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    height:2.5rem;
    aspect-ratio: 1/1;

    cursor: pointer;
}
.menu-button .menu-default{
    width: 100%;
    height: auto;
}


.menu-active{
    text-align: center;
    font-family: "forma-djr-text", sans-serif;
    font-weight: 600;
    font-style: normal;
}

/* MOBILE DEFAULT STATE */

/* hide checkboxes */
input[type='checkbox']:not(:checked) ~ .nav-links { 
    display: none;
}

/* hide menues and submenues */
.submenu-toggle {
display: none;
}


/* hide back arrow */
.menu-active{
    display: none;
}


/* MOBILE ACTIVE STATE */

/* hide hat button */
#menu-toggle:checked ~ .menu-button .menu-default {
    display: none;
}

/* show back arrow */
#menu-toggle:checked ~ .menu-button .menu-active {
    display: block;
    margin: 0;
}

/* show menues and submenues */
#menu-toggle:checked ~ .nav-links{
    display: flex;
}

.nav-links{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--green);
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    z-index: 100;
    gap:1rem;
}

.submenu, .submenu-items{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-links .mobile-menu-logo{
    margin: 2.5rem auto;
    width: 3rem;
    height: auto;
    margin-bottom: 1rem;
}

.submenu-header{
    margin-bottom: .5rem;
}

.submenu-items{
    font-size: var(--p-mobile);
    gap: 0.5rem;
}

.nav-links a{
    color: var(--white);
    text-align: center;
}

.nav-links .submenu-icons{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: -0.5rem;

    font-size: var(--p-mobile);

}

.submenu-icons img{
    display: block;
    height: 1.5em;
    width: auto;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

/* -----------------------------------------------------------------------------------------------------
Global Components --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */

/* Grids ---------------- */
/* grid-desktop-mobile ---------------- */

.grid-1-2{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 1.25rem;
    justify-content: start;
}

.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 1.25rem;
    justify-content: start;
    /* background-color: #44C5DF; */
}

.grid-2.data{
    grid-template-columns: max-content 1fr;
}

.mobile-two-thirds{
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0.5rem
}

.grid-2-1{
    display: grid;
    grid-template-columns: 1fr; 
    gap: .5rem;
    justify-content: start;
}

.grid-2-1.data{
    gap: 0rem;
    margin-bottom: 1rem;
}

.grid-3{
    display: grid;
    grid-template-columns: repeat(3,1fr) ; 
    gap: 1.25rem;    
}

.grid-3-1{
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.25rem;
}

.grid-3-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    justify-content: start; 
}

.grid-4-1{
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.25rem;
}

.one-column{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.one-column .no-gap{
    gap:0;
}

.span-3{
    grid-column: span 3;
}

.span-2{
    grid-column: span 2;
}

.mobile-span{
    grid-column: span 2;
}

.colour-palette{
    display: grid;
    gap: 0.6rem;
    font-size: var(--p-mobile);
}

.colour-palette p{
    font-weight: 400;
}

.colour-palette .grid-2{
        gap: 0.6rem;
}

/* icons/avatars grid ---------------- */

.grid-icons{
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;

    margin: 0 auto;

    justify-content: center;

    font-size: 1em;
}

.grid-icons img{
    width: 4.5em;
    height: auto;
    align-self: center;
}

/* Sections -------------------------------------------------------- */

/* Hero ---------------- */
.hero-section{
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: 100dvh;
    /* background-color: #BED5CE; */
}

.hero-section .grid-2-1{
    padding-top: var(--nav-height-mobile);
    grid-template-rows: 40% 1fr; 
    min-height: 0;
    gap: 0;
    height: 100%;
}

.hero-art-box{
    display: flex;
    justify-content: center;
    align-items: flex-start;

    width: 100vw;
    overflow: visible;

    z-index: 0;

    /* background-color: #033C59; */
}

/* ---------------- */

.hero-art-box.true-stories img{
    width: 70%;
}

.hero-art-box.somasense img{
    width:70%;
    height: auto;
    padding-top: 3rem;
}

.hero-art-box.jelly img{
    width:50%;
    height: auto;
}

.hero-art-box.trail img{
    width: 35%;
    height: auto;
}

.hero-art-box.fua{
    display: flex;
    align-items: center;

    margin-top: calc((var(--nav-height-mobile)*-1));

    overflow: hidden;
}
.hero-art-box.fua img{
    width: 120%; 
}
.fua .hero-info-box{
    padding-bottom: 0;
    margin: auto;
}

.hero-art-box.onboarding img{
    width:85%;
    height: auto;
    margin: auto;
}

.hero-art-box.afg img{
    width:80%;
    height: auto;
    margin: auto;
    padding-top: 3rem;
}

/* ---------------- */

.hero-info-box{
    display: flex;
    flex-direction: column;    
    justify-content: end;
    padding: 0 var(--section-padding-mobile);
    padding-bottom: 1rem;

    min-height: 0;
    z-index: 10;
}

.hero-info{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    width: 100%;

    /* background-color: #864572; */
}

.project-title{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
}

.project-title p{
    max-width: 100%;
}

.case-study-title{
    margin-bottom: 0.5rem;
}

.tags{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 0.5rem;
}

.tag{
    font-weight: 400;
}

.tag-box{
    padding: 0.15rem 0.5rem;
    border: var(--stroke-mobile) solid var(--green);
    box-shadow: 1.5px 1px 0 var(--green);
    background-color: var(--white);
    border-radius: 1rem;

    text-align: center;
}

.roles{
    justify-content: center;
    gap:0.5rem;
}

.role{ 
    background-color: var(--yellow);
    border: var(--stroke-mobile) solid var(--black);
    box-shadow: 1.5px 1px 0 var(--black);

}

.client{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    
    /* padding-top: 1rem; */
}

.client-logo{
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    gap: 1rem;
}

.client-logo img{
    height: 1.5rem;
}

.client-logo .small-client-logo {
    height: 2rem;
}

.client .note{
    text-align: center;
}

/* content-section ---------------- */

.content-section{
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    padding: var(--section-padding-mobile) 1.8rem ;
    font-size: var(--p-mobile);
}

.section-title{
    margin-left: 0.9rem;
    margin-top: -2.1rem;
}

/* sub-section ---------------- */

.sub-section{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* branding ---------------- */

.branding-cover{
    height: fit-content;
    padding: 0.6em var(--section-padding-mobile);

    display: flex;
    justify-content: space-between; 
    align-items: center;

    font-size: var(--p-mobile);
}

.colour-box{
    display: flex;
    justify-content: flex-end;
    align-items: center;

    border-radius: 0.9rem;
    height: 2.5rem;
    padding: 1rem 1rem;
}

.branding-typo{
    z-index: 1; 
}

.branding-typo p{
    color: #FFFFFF;
    font-size: 1em;
    max-width: 100%;
}

.colour-description{
    display: flex;
    justify-content: space-between;
}

/* ui ---------------- */

.grid-2-1.ui{
    justify-items: center;
    gap: 0rem;
    margin-top: -1rem;

    grid-template-areas: "desc" "img" "notes";
}

.ui .dark-glow{
    box-shadow: 0 0 0.5rem rgb(from var(--black) r g b / 0.25),
                0 0 0.5rem rgb(from var(--black) r g b / 0.75);
}

.ui img{
    width: 50%;
    
    border-radius: 0.6rem;

    margin: 0.5rem auto;

    
    grid-area: img;
}

.ui.trail img{
    width: 80%;

}

.ui h5{
    margin-bottom: -0.9rem;
}

.ui p{    
    grid-area: desc;
    justify-self: start;

}

.ui .note{    
    grid-area: notes;
    justify-self: center;
    margin-top: -0.5rem;

}

.ui .note{
    margin: 0.25rem auto;
}

.screen-notes{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}  




/* Containers -------------------------------------------------------- */

/* Card ---------------- */

.card-grid{
    gap: 0.6rem;
    margin: 0 20%;
}

.card{
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    
    height: fit-content;
    /* width: 100%; */

    padding: 0.9rem 0.9rem;
    
    background-color: var(--yellow);
    box-shadow: 1.5px 1px 0 var(--green);
    border-radius: 1rem;

    border-style: solid;
    border-width: var(--stroke-mobile);
    border-color: var(--green); 

    font-size: var(--p-mobile);
}

.secondary{
    background-color: var(--white);
}

.tertiary{
    background-color: var(--white);
    border-color: var(--black); 
    box-shadow: 1.5px 1px 0 var(--black);
}

.arrow{
    width: 0.6em;
    height: auto;
    margin-top: auto;
}

.multiple-arrows{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
}

/* General -------------------------------------------------------- */

.hug{
    width: fit-content;
}

.wide-screen-only{
    display: none;
}

.desktop-only{
    display: none;
}
/* Layout */

.align-centre{
    margin: auto;
    text-align: center;
}

.items-align-centre{
    align-items: center;
}

.items-align-bottom{
    align-items: end;
}

.items-align-top{
        align-items: start;
}

.align-right{
    margin-left: auto;
    text-align: right;
}

.align-left{
    margin: auto auto auto 0;    
}

.no-gap{
    gap:0
}

.marginless-bottom{
    margin-bottom: calc(var(--section-padding-mobile)*-1);
} 

hr{
  border: none;
  height: 0.5px;
  width: 75%;
  background-color: rgb(from var(--black) r g b / 0.5);
  margin: 0.5rem auto;
}

.fade-top {
    -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
    mask-image: linear-gradient(to top, black 60%, transparent 100%);

    margin-top: -2rem;

}

.full-width{
    width: calc(100% + (var(--section-padding-mobile)*2));
    margin-left: calc(var(--section-padding-mobile) * -1);
    margin-right: calc(var(--section-padding-mobile) * -1);
}

.full-width-text p{
    max-width: 100%;
}

.cropped{
    overflow: hidden;
}

.text-white-bg{
    background-color: rgb(from var(--white) r g b / 0.9);
}

/* -----------------------------------------------------------------------------------------------------
LOCAL COMPONENTS --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */

/* ---------------- */
/* Homescreen ---------------- */
/* ---------------- */

/* Navigation */
.nav-home{
    background-color: transparent;
}

/* Hero */
.hero-section.home{    
    display: flex;
    flex-direction: column;

    background-color: var(--green);
}

.home h1{
    color: var(--white);
    font-weight: 500;
}

.hero-content{
    position: relative;
    flex-grow: 1;

    display: flex;
    align-items: center;
}

.home-intro{
    position: relative;
    z-index: 10;

    padding: var(--section-padding-mobile);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    
    margin-right: auto;
    
    font-size: var(--p-mobile);
    
    pointer-events: none;
}

.video-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(to right, rgb(from var(--black) r g b / 0.5), transparent);
    
    z-index: 5;
    pointer-events: none;
}

.background-video{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    background: url('images/video-backup.png') no-repeat center center;
    background-size: cover; 

    z-index: 0;
}

.hero-content p{
    color: var(--white);
    /* font-style: italic; */
    margin-top: 2rem;
}

.hero-content svg{
    height: 1.5em;
    width: auto;
}

.hero-menu{
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 2rem 0;

    margin-top: auto;

    background-color: var(--green);
}

.anchore-links{
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1.2rem;
}

.anchore-links a{
    text-decoration: none;
}

.anchore-button{
    width: fit-content;

    background-color: var(--green);
    border-style: solid ;
    border-color: var(--white);
    border-width: var(--stroke-mobile);
    
    border-radius: 1rem;
    filter: drop-shadow(2px 1px 0 var(--white));

    padding: 0 1.2rem 0.4rem ;
}

.hero-menu p{
    color: var(--white);
    font-style: italic;
    font-weight: 400;
    text-align: center;
    max-width: 100%;
}


.coming-soon{
    display: grid;
    place-items: center;
    text-align: center;
}

.coming-soon > * {
  grid-area: 1 / 1;
}

.coming-soon-overlay{
    background-color: rgb(from var(--white) r g b / 0.6);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    z-index: 10;
    border: var(--stroke-mobile) solid var(--black);
}

.coming-soon h4{
    color: var(--yellow);
}

.coming-soon img{
    z-index: 0;
}
/* Content */
.home{
    background-color: var(--green);
}

.home h3{
    color: var(--white);
    margin: auto;
}

.home .grid-3-2{
    margin: auto;
}

.grid-3-2.work{
    gap: 1.5rem;
    font-size: var(--p-mobile);
}

.grid-2.case{
    gap: 1.25rem 0.6rem;
    margin: auto;
    font-size: var(--p-mobile);
}

.home .card{
    flex-direction: column;
    align-items: center;

    padding: 0;
    
    border: var(--stroke-mobile) solid var(--black);
    box-shadow: 1.5px 1px 0 var(--black);
    
    overflow: visible;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    text-decoration: none;

    position: relative;

    /* background-color: #44C5DF; */

}
.card.work{
    background-color: var(--white);
    width: 10em;
}

.card.case{
    width: 10em;
    height: 10em;
    background-color: var(--yellow);

    justify-content: center;
    align-items: start;
}

.home-project-title{
        font-weight: 700;
}

.work .home-project-title{
    padding-top: 0.5rem;
}

.home .card p{
    margin: 0 1rem;
    /* text-align: center; */
}

.work h3{
    color: var(--black);
    padding-top: 0.5rem;
    font-weight: 300;
    /* font-size: var(--p-mobile); */
}

.work p{
    text-align: center;
    padding-bottom: 0.5rem;
}

.narrow {
    padding: 0 5%;
}

.case .narrow{
    padding: 0;
    padding-right: 0.6rem;
}

.home-project-title.narrow{
    padding-right: 3rem;
}

.work img{
    width: 100%;
    height: auto;

    border-radius: 0.9em;
    border: var(--stroke-mobile) solid var(--black);
}

.padc-badge{
    display: flex;
    position: absolute; bottom: 0; left: 50%;
    
    transform: translateX(-50%) translateY(1em);
    
    border: none;
}

.padc-badge img{
    height: 2rem;
    width: auto;
    border: none;

    margin: 0;
}

.card .padc-badge p{
    background-color: #000;
    padding: 0 0.5rem 0.2rem 0.2rem;
    width: fit-content;
    border-radius: 0 1rem 1rem 0;
    margin: auto 0 auto -0.5rem;
    white-space: nowrap;

    
    color: #FFFFFF;
    font-style: normal;
    text-align: left;
}


/* Quote */
.hat-stamp{
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow: visible;
    
    height: fit-content;
    
    font-size: var(--p-mobile);

    margin-bottom: 3rem;

    background-color: var(--green);
}

.hat-stamp img{
    height: 3em;
    width: auto;

    transform: translateY(1.5em);
}

.quote{
    gap: 1rem;
}

.quote h2{
    margin-top: 1rem;
}

.quote h3{
    font-weight: 400;
}

mark {
    background: transparent;
    position: relative;
    display: inline-block;
    padding: 0 0.1em;

    font-weight: 600;
}



mark::before {
    content: "";
    position: absolute;
    z-index: -1;
    
    /* These now control the marker size perfectly */
    width: 105%;  
    height: 1.2em; 
    left: -5%;
    top: 50%;
    transform: translateY(-50%);
    
    background-color: var(--yellow);
    
    /* Apply the relative mask */
    -webkit-mask-image: url(#marker-mask);
    mask-image: url(#marker-mask);
    
    /* Force the mask to fill the 'before' box */
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/* ---------------- */
/* True Stories (+case study) ---------------- */
/* ---------------- */

.padc-text{
    font-weight: 700;
}

/* ---------------- */

.topic-breakdown{
    font-size: var(--p-mobile);
}

.topic-breakdown .grid-2{
    display:flex;
    height: 5em; /* this is the image height */
    gap: 0.5rem;
}

.topic-breakdown .grid-2 img{
    height: 100%; /* height set on previous class */
    width: auto;

    object-fit: contain;
    flex-shrink: 1;
    display: block;
}

.topic-breakdown-info{
    /* padding: 0.9rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.topic-breakdown-info.align-right{
    flex-direction: column;
    align-items: end;
}

/* ---------------- */

.how-it-works img{
    width: 3.75em;
    height: auto;
    margin-bottom: 1rem;
}

.how-it-works .note{
    margin-top: 0.6rem;
}

/* ---------------- */

.branding-cover.true-stories{
    background: linear-gradient(to right, var(--ts-yellow) 0%, var(--ts-pink) 40%, var(--ts-purple) 100%);
}

.branding-cover.true-stories img{
    height: 3.5em;
}

.degular-d-b{
        font-family: "degular-display", sans-serif;
        font-weight: 800;
        font-style: normal;
}

.degular-d-m{
        font-family: "degular-display", sans-serif;
        font-weight: 500;
        font-style: normal;
}

.degular-t-r{
        font-family: "degular-text", sans-serif;
        font-weight: 400;
        font-style: normal;
}

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

.ts-yellow p{
    color: var(--ts-purple);
}

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

.ts-purple p{
    color: var(--ts-pink);
}

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

.ts-pink p{
    color: var(--ts-purple);
}

.ts-white{
    background-color: var(--ts-white);
    border: var(--stroke-mobile) solid var(--ts-purple);

    justify-content: flex-end;
}

.ts-white p{
    color: var(--ts-purple);
}

/* ---------------- */

.screenshots-mobile{
    display: flex;
    flex-wrap: nowrap;   /* Prevent items from jumping to the next line */
    overflow-x: auto;    /* Enable horizontal scrolling */
    overflow-y: hidden;  /* Keep vertical clean */

    padding-left: calc(var(--section-padding-mobile) - 1rem)
}

.screenshots-mobile img{
    width: 17.5rem;
    height: auto;
    align-self: center;

    margin: 1.5rem;

    border-radius: 1rem;
    box-shadow: 0 0 0.5rem rgb(from var(--black) r g b / 0.25),
                0 0 0.5rem rgb(from var(--black) r g b / 0.75);
}


/* ---------------- */
/* Trail (+case study) ---------------- */
/* ---------------- */

.trail-problem{
    display: flex;
    flex-direction: column;
}

.trail-problem img{
    z-index: -1;
    width: calc(100% + (var(--section-padding-tablet)*2));
    margin-left: calc(var(--section-padding-tablet) * -1);
    margin-right: calc(var(--section-padding-tablet) * -1);
}

.trail-problem .fade-top{
    -webkit-mask-image: linear-gradient(to top, black 30%, transparent 100%);
    mask-image: linear-gradient(to top, black 30%, transparent 100%);
    margin-top: -4rem;
}

.trailies img{
    height: 7rem;
    aspect-ratio: 1/1;
    object-fit: cover; 
    border-radius: 1rem;    
}

.persona-info{
    display: flex;
    flex-direction: column;
    margin: auto 0;
    gap: 0.5rem;
}

.persona-quotes{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trailies p{
    max-width: 30ch;
}

.trailies .grid-2-1{
    gap: 2rem;
}

/* ---------------- */

.wf-sketch{
    margin-bottom: -2rem;
}

/* ---------------- */

.mont-sb{        
    font-family: "montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.mont-l{
    font-family: "montserrat", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.trail-orange{
    background-color: #EA9E7D;
}

.trail-dark{
    background-color: #304550;
}

.trail-blue{
    background-color: #4E616B;
}

.trail-white{
    background-color: #F2F1E8;
    border: var(--stroke-mobile) solid #304550;
}

.trail-orange p, .trail-white p{
    color: #304550;
}

.trail-blue p, .trail-dark p{
    color: #F2F1E8;
}

/* ---------------- */

.content-section.trail{
    position: relative;
}

.screenshots-trail{
    display: flex;
    align-items: flex-start;
    justify-items: center;
    /* height: calc(100vw); */

    z-index: -10;
}

.screenshots-trail img{
    width: 175%;
    margin: auto;
    transform: translateX(-20%) translateY(5%) rotate(10deg);
}

.trail .links-list {
    position: absolute;
    bottom:var(--section-padding-mobile);
    left: var(--section-padding-mobile);
}

.trail .links-list p{
    padding: 0.5rem 1rem;
    border-radius: 1rem ;
}



/* ---------------- */
/* Jelly ---------------- */
/* ---------------- */



.jelly-img{
    width:70%;
}

.jelly-grid{
    position: relative;
    display: flex;
    gap: 1rem;

    margin: 0 auto;
    text-align: center;

    font-size: var(--p-mobile);
}

.jelly-item{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jelly-item img, .jelly-grid img{
    height: auto;
    width: 4em;
}

/* ---------------- */

.character .jelly-item img{
    height: 6em;
    width: auto;
}

.jelly-grid .character-bg{
    position: absolute;
    z-index: -1;
    top: -5%;

    width: 100%;
    opacity: 0.05;
}

.jelly-grid.character{
    padding: 2rem 0;
}

/* ---------------- */

.candy-group{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jellos img{
    margin: auto -1rem;
}

.power-ups-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    font-size: var(--p-mobile);

}

.jelly-grid.enemies{
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    width:70%;
}

/* ---------------- */

.jelly-backgrounds img{
    width:5.5em;
}


/* ---------------- */

.jelly-buttons{
    width: 60%;
    gap: 1rem;
    margin: 0 auto;
}

.jelly-buttons img{
    width: 100%;
    height: auto;
}

.jelly-grid.panels img{
    width: 10rem;
    height: auto;
}

/* ---------------- */

.jelly-grid.structure{
    align-items: center;
}

.jelly-grid .structure-layers{
    width: 12.5em;
}

.jelly-grid .structure-flatten{
    width: 4.5em;
}

.structure p{
    font-size: var(--h3-mobile);
    font-weight: 700;
}

/* ---------------- */
.screenshots-jelly{
    display: flex;
    align-items: flex-start;
    justify-items: center;
    height: calc(100vw*1.5);
    margin-top: -20%;

        z-index: -10;

}

.screenshots-jelly img{
    rotate: 45deg;
    width: 150%;
    margin-left: -25%;
}

/* ---------------- */
/* Somasense ---------------- */
/* ---------------- */

.somasense{
    position: relative;
}

/* ---------------- */

.branding-typo .stem-b{
    font-family: stem-bold, sans-serif;
    color: #FBEFDC;
}

.branding-typo .stem-l{
    font-family: stem-light, sans-serif;
    color: #FBEFDC;
}


.somasense-green{
    background-color: #5F7557;
}

.somasense-dark{
    background-color: #033C59;
}

.somasense-orange{
    background-color: #F3A257;
}

.somasense-teal{
    background-color: #BED5CE;
}

.somasense-white{
    background-color: #FBEFDC;
    border: var(--stroke-mobile) solid #033C59;
}

.somasense-dark p{
    color: #BED5CE;
}

.somasense-green p{
    color: #FBEFDC;
}

.somasense-orange p, .somasense-teal p, .somasense-white p{
    color: #033C59;
}

/* ---------------- */

.icons-strip-block img{
    height: 3.5em;
    width: auto;
}

.icons-strip-block{
    display: flex;
    flex-direction: column;
    gap: 0.65rem;

    font-size: var(--p-mobile);
}

.icons-strip {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.65rem 1.5rem;
}

.white-strip{
    background-color: #FBEFDC;
}

.green-strip{
    background-color: #5F7557;
}

.teal-strip{
    background-color: #BED5CE;
}

.dark-strip{
    background-color: #033C59;

    flex-direction: column;
    align-items: center;
}

.dark-strip p{
    color: #FBEFDC;
    text-align: center;
    max-width: 100%;
}

/* ---------------- */

/* .imagery-text{
    max-width: 35ch;
} */

/* ---------------- */


.soma-screens img{
    width: 80%;
}

.soma-offset{
    margin-top: -10%;
}

/* ---------------- */
/* FUA ---------------- */
/* ---------------- */

/* ---------------- */

.fua-inspo-grid{
    display: flex;
    flex-wrap: wrap;

    gap: 0.25rem;
}

.fua-inspo-grid img{
    height: 8rem;
}

.inspo-break-mobile{
    padding-right: 6rem;
}

.inspo-break-desktop{
    margin-right: 0;
}

/* ---------------- */

.fua-des-cyc{
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2rem;

    padding-top: 2rem;

    font-size: var(--p-mobile);
}

.des-first{
    display: flex;
    justify-content: center;
    gap:0.5em;
    height: 3em;

    /* background-color: #F8D06A; */
}

.des-second{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 5em;
}


.des-first img, .des-second img{
    height: 100%;
    width: auto;
}

.final-logo{
    height: 6.5em;
    width: auto;
    /* outline: red solid 1px; */
}

.img-fix{
    padding-right: 1rem ;
}

/* ---------------- */

.variation .grid-2-1{
    justify-content: center;
    gap: 2rem;
}

.var-item{
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: auto;
    font-size: var(--p-mobile);
}

.var-item img{
    height: 7em;
    width: auto;
}

/* ---------------- */

.cover-img{
    position: relative;
}

.cover-img img{
    position: absolute;
    z-index: -1; 

    height: 100%;
    width: 100%;
    left: 0;
    object-fit: cover;
}

.unbounded {
    font-family: "unbounded", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.ivymode{
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.fua-red{
    background-color: #AC444F;
}

.fua-yellow{
    background-color: #EBC66D;
}

.fua-green{
    background-color: #D2D569;
}

.fua-white{
    background-color: #FFFFFF;
    border: var(--stroke-mobile) solid #000;
    justify-content: flex-end;
}

.fua-black{
    background-color: #000;
    justify-content: flex-end;
}

.fua-black p, .fua-red p{
    color: #FFFFFF;
}

/* ---------------- */
/* Onboarding ---------------- */
/* ---------------- */

.card.one-column{
    display: flex;
    flex-direction: column;
    gap: 1rem;

    width: 90%;
}

/* ---------------- */

.how-item{
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    align-items: center;
}

.how-item img{
    height: 1.5rem;
    width: auto;
    margin-right: auto;
}

/* ---------------- */


.ob-data{
    overflow: hidden;
}

.ob-miro{
    width: 200%;
    /* overflow: hidden; */
}

/* ---------------- */

.thumbs img{
    width: 2rem;
}

.minutes{
    font-size: var(--h4-mobile);
    text-align: center;
}

.slots-stats img{
    width:7.5rem;
    margin-bottom: 0.5rem;
}

.gems{
    border-radius: 2rem;
    overflow: hidden;
}

.gem-s img{
    height: 3.5rem;
    display: flex;
    align-items: flex-end;
}

.gem-m img{
    height: 8rem;
}

.gem-l img{
    width: 100%;
}
/* ---------------- */
/* AFG ---------------- */
/* ---------------- */

/* .client .note.afg{
    max-width: 25ch;
} */

.afg-team-1{
    height:auto;
    width: 70%;
}

.afg-team-2{
    height:auto;
    width: 80%;
}

.afg-team-3{
    height:auto;
    width: 100%;
}
.afg-participants{
    display: flex;
    align-items: flex-end;
    margin-top: auto;
    height: 5rem;
    padding-top: 1rem;
}

.afg-participants-type{
    font-family: hagrid, sans-serif;
    font-weight: 800;
    font-style: normal;
    color: var(--white);
    -webkit-text-stroke: 3.5px var(--black);
    paint-order: stroke fill;
    filter: drop-shadow(2px 1px 0 var(--black));
}

/* -----------------------------------------------------------------------------------------------------
Footer --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */

.footer-section{
    /* display: none; */
    justify-content: center;
    align-items: center;

    background-color: var(--black);
    margin: 0;

    padding: 0.6rem var(--section-padding-mobile);
    
    overflow: hidden;
    box-shadow: 0 -0.5rem 0.6rem rgb(from var(--black) r g b / 0.35);

    z-index: 1000;

}

.footer-icons{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;

    gap: 0.6rem;

    font-size: var(--p-mobile);
}

.footer-icons img{
    display: block;
    height: 1.8em;
    width: auto;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------------------------------
Transitions --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */
.footer-icons img:hover, .submenu-icons img:hover, .home-button:hover{
    transform: scale(1.1);
    transition: .5s;
}

.card.work:hover, .card.case:hover, .anchore-button:hover{
    transform: scale(1.05);
    transition: 1s;
}

.hat-stamp img:hover{
    rotate: 10deg;
    transition: 1s;
}

/* -----------------------------------------------------------------------------------------------------
Media Queries --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- */

/* ---------------- */
/* Tablet ---------------- */
/* ---------------- */



@media (min-width: 916px) {

/* Tablet Text Formats ---------------------------------------------------------------- */

.largest{
    font-size: var(--largest-tablet);
}

.larger{
    font-size: var(--larger-tablet);
}

.large{
    font-size: var(--large-tablet);
}

h1 {
    font-size: var(--h1-tablet);
}

h2 {
    font-size: var(--h2-tablet);
}

h3{
    font-size: var(--h3-tablet);
}

h4{
    font-size: var(--h4-tablet);
}

h5{
    font-size: var(--h5-tablet);
}

p{
    font-size: var(--p-tablet);
}

.note{
    font-size: var(--note-tablet);
}

.long-text{
    max-width: 80%;
}

.short-text{
    max-width: 50%;
}


/* Tablet Navigation ---------------------------------------------------------------- */

/* hide mobile items */

.submenu.contact h1{
    display: none;
}

.menu-button{
    display: none;
}

input[type='checkbox']:not(:checked) ~ .submenu-items {
    display: none;
}

/* show menu */

input[type='checkbox']:not(:checked) ~ .nav-links {
    display: flex;
}

.submenu-toggle:checked ~ .submenu-overlay {
    display: block;
}

.submenu-toggle:checked ~ .submenu-items {
    display: flex;
}

/* design */

nav{
    padding: 0 var(--section-padding-tablet);
    display: flex;
    align-items: center;
    height: var(--nav-height-tablet);
    border-radius: 0 0 1rem 1rem;
    background-color: var(--green);
    font-size: var(--p-tablet);
}

.home-button{
    height: 2.5em;
    width: auto;
}

.nav-links{
    position: static;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    height: auto;
    gap: 1.5rem;
    background-color: transparent;
    overflow: visible;
}

.submenu{
    position: relative;
    flex-direction: row;
}

.submenu h1{
    cursor: pointer;
    z-index: 10;

}

.nav-links .contact{
    margin-left: auto;
}

.nav-links a{
    text-align: left;
    font-size: var(--p-tablet);
}

.nav-links .submenu-items{
    position: absolute;
    top: 100%;
    left: 0;

    align-items: flex-start;
    
    background-color: var(--green);
    padding: 1rem 2rem 1rem 1rem ;
    border-radius: 0 0 1rem 1rem;

    width: max-content;

    z-index: 1000;
}

.submenu-items a{
    text-align: left;
}

.submenu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 500;
}

.submenu-icons{
    font-size: var(--p-tablet);
}

/* Homepage Navigation */
.submenu.home{
    display: none;
}

/* Tablet Footer ---------------------------------------------------------------- */

.footer-section{
    display: flex;
    padding: 1.5em var(--section-padding-tablet);
    justify-content: space-between;
}

.footer-icons{
    font-size: var(--p-tablet);
}

/* Tablet Transitions ---------------------------------------------------------------- */

label h1:hover, li a:hover, .anchore-button h1:hover{
    color: var(--yellow);
        transition: .5s;
}

.anchore-button:hover{
    border-color: var(--yellow);
    filter: drop-shadow(2px 1px 0 var(--yellow));

}

/* Tablet Hero Section ----------------------------------------------------------------*/

.hero-section .grid-2-1{
    grid-template-columns: 1fr;
    grid-template-rows: 50% 1fr;
    min-height: 0;
    gap: 0;
    padding-top: var(--nav-height-tablet);
}


/* ----------- */

.hero-art-box{
    margin-top: var(--nav-height-tablet);
    padding-top: 0;
}

/* ----------- */

.hero-art-box.true-stories img{
    width: 55%;
    height: auto;
    padding-top: 2rem;
}

.hero-art-box.somasense img{
    width:60%;
    height: auto;
    padding-top: 3rem;
}

.hero-art-box.jelly img{
    width:40%;
    height: auto;

    padding-top: 2rem;
}

.hero-art-box.trail img{
    width: 30%;
    padding-top: 1rem;
}


.hero-art-box.fua{
    padding-top: 0;
    margin-top: -1rem;
}

.hero-art-box.fua img{
    width: 100%;
}


.hero-art-box.onboarding img{
    width: 80%;
    height: auto;
    padding-top: 1rem;
}

.hero-art-box.afg img{
    padding-top: 4rem;
}



/* ----------- */
.hero-info-box{
    padding: 0 var(--section-padding-tablet);
    padding-bottom: 3rem;
}
.hero-info{
    padding-top: 2rem;
    width: 100%;
    gap:2.5rem
}

.project-title p{
    max-width: 60%;
}

/* ----------- */
.tag-box{
    padding: 0rem 0.9rem 0.2rem 0.9rem;
}
.roles{
    gap: 1rem;
    width: 70%;
    margin: auto auto;
}

.roles.afg, .roles.fua, .roles.jelly{
    width: 50%;
}

/* ----------- */

.client{
    padding-top: 0;

}

.client-logo{
    margin-top: 0.5rem;
    gap: 1rem;
}

.client-logo img{
    height: 2.5rem;
}

.client-logo .small-client-logo {
    height: 3rem;
}



/* Tablet Grids ---------------------------------------------------------------- */

/* .grid-1-2{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 1.25rem;
    justify-content: start;
} */

/* .grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 1.25rem;
    justify-content: start;
} */

.grid-2-1{
    grid-template-columns: 1fr 1fr; 
    gap: 1rem;
}

.grid-2-1.grid-1-tablet{
    grid-template-columns: 1fr; 
}

.grid-2-1.data{
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 1rem;
}

.grid-2-1.data.items-align-top{
    align-items: start;
}


.col--33-67{
    grid-template-columns: 1fr 2fr;
}

.col--67-33{
    grid-template-columns: 2fr 1fr;
}

.col--hug-hug{
    grid-template-columns: max-content max-content;
    gap: 2rem;
}

.grid-2-1.col--25-75{
    grid-template-columns: 1fr 3fr;
    align-items: start;
}

.grid-2-1.col--20-80{
    grid-template-columns: 1fr 4fr;
    align-items: start;
}

.grid-3{
    margin-top: 1rem;
}

.grid-3-1{
    grid-template-columns: repeat(3, 1fr); 
    gap: 1rem;
    margin: auto;
}

.grid-3-1.grid-1-tablet{
    grid-template-columns: 1fr;
}

.grid-3-2{
    gap: 1rem;
}

/* Tablet Sections ---------------------------------------------------------------- */

.content-section{
    padding: var(--section-padding-tablet);
    gap: 2.5rem;
        font-size: var(--p-tablet);
}

.section-title{
    margin-left: 1.3rem;
    margin-top: -3rem;
}

.sub-section{
    gap: 2rem;
}

/* Visual Identity ----------- */

.branding-cover{
    font-size: var(--p-tablet);
    padding: 0.6em var(--section-padding-tablet);
}

.colour-palette{
    gap: 1rem;
    font-size: var(--p-tablet);

}

.colour-palette p{
    font-weight: 300;
}

.colour-box{
    height: 2.5em;
}

/* ui ---------------- */

.grid-2-1.ui{
    justify-items: start;

    grid-template-areas: "img desc" "img notes";

    gap: 2rem;
}

.ui img{
    width: 100%;

    margin: 0;
}

.ui p, .ui .note{
    text-align: left;
    justify-self: start;

    margin: 2rem 0;
}

.ui .note{
    margin: 0;
}

/* Tablet Card ----------------------------------------------------------------*/

.card.one-column{
    width: 100%;
}

.card{
    font-size: var(--p-tablet);
    border-width: var(--stroke-tablet);
    box-shadow: 3px 2px 0 var(--green);
}

.tertiary{
    box-shadow: 3px 2px 0 var(--black);
}

.card-grid{
    margin: 0 25%;
}


.card-title{
    font-size: var(--p-tablet);
}

.card-info{
    font-size: var(--p-tablet);
}

/* Tablet General ----------------------------------------------------------------*/

.wide-screen-only{
    display: flex;
}

.mobile-only{
    display: none;
}

.image-large{
    width: 75%;
}

.full-width{
    width: calc(100% + (var(--section-padding-tablet)*2));
    margin-left: calc(var(--section-padding-tablet) * -1);
    margin-right: calc(var(--section-padding-tablet) * -1);
}

hr{
    width: 100%;
}

.marginless-bottom{
    margin-bottom: calc(var(--section-padding-tablet)*-1);
} 

/* Tablet Home ---------------------------------------------------------------- */

.home-intro{
    padding: var(--section-padding-tablet);
    font-size: var(--p-tablet);
}

.home .card{    
    border: var(--stroke-tablet) solid var(--black);
    box-shadow: 3px 2px 0 var(--black);
}

/* Work Section */

.grid-3-2.work{
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 3rem;
    font-size: var(--p-tablet);
}

.work img{
    border-radius: 0.6em;
    border-width: 1.5px;
}

.coming-soon-overlay{
    border: var(--stroke-tablet) solid var(--black);
}

/* Case Section */

.grid-2.case{
    gap: 3rem 3rem;
    font-size: var(--p-tablet);
}

.card.case{
    width: 15em;
    height: 7.5em;
}

/* PADC */

.padc-badge{
    bottom: 0;
    left: 0;
    
    transform: translateX(-1em) translateY(1em);
}

.padc-badge img{
    height: 2em;
}

.card .padc-badge p{
    padding: 0.1rem 0.75rem 0.3rem 0.1rem;
    margin: auto -0.5rem;
    border-radius: 0 2rem 2rem 0;
}

/* Qoute Section */

.quote{
    max-width: 80%;
    font-size: var(--p-tablet);
}


/* Tablet True Stories (+case study) ---------------------------------------------------------------- */

.topic-breakdown{
    font-size: var(--p-tablet);
}

.content-section.topic-breakdown p{
    margin-top: 0.5rem;
    max-width: 80%;
}

.topic-breakdown-info.align-right p{
    max-width: 55%;
}

.grid-icons{
    width: 70%;
}

.screenshots-mobile{
    padding-left: calc(var(--section-padding-tablet) - 1rem)
}

/* Tablet Somasense ---------------------------------------------------------------- */

.icons-strip-block{
    font-size: var(--p-tablet);
}

.imagery-text{
    margin-bottom: -7rem;
}

/* Tablet Jelly ---------------------------------------------------------------- */

.jelly-grid, .power-ups-grid{
    font-size: var(--p-tablet);
}

/* Tablet Trail (+case study) ---------------------------------------------------------------- */
.content-section.relative-point{
    position: relative;
}
.trail-problem{
    height: 15rem;

    width: calc(100% + (var(--section-padding-mobile)*2));
    /* margin-left: calc(var(--section-padding-mobile) * -1); */
    margin-right: calc(var(--section-padding-mobile) * -1);
}

.trail-problem .image-crop{
    position: absolute;
    top:0;
    right: 0;

    height: 100%;
    overflow: hidden;

    z-index: -1;
}

.trail-problem .image-crop img{
    height:200%;
    width: auto;
    margin-top: -20%;
}

.trail-problem p{
    max-width: 50%;
}

.trail-problem .fade-top {
    -webkit-mask-image: linear-gradient(to left, black 0%, transparent 70%);
    mask-image: linear-gradient(to left, black 0%, transparent 70%);
    margin-top: 0;
}


.persona-info{
    flex-direction: column;
    margin: auto 0;
    gap: 0rem;
}

.trail .links-list {
    bottom:var(--section-padding-tablet);
    left:var(--section-padding-tablet);
}

.screenshots-trail img{
    width: 125%;
    transform: translateX(-10%) translateY(5%) rotate(10deg);
}



/* Tablet FUA ---------------------------------------------------------------- */
.inspo-break-mobile{
    display: none;
}

.fua-des-cyc{
    font-size: var(--p-tablet);
}

.var-item{
    font-size: var(--p-tablet);
}

/* Tablet Onboarding ---------------------------------------------------------------- */

.minutes{
    font-size: var(--h5-tablet)
}

.slots-stats.grid-2-1.data{
    align-items: start;
}

/* Tablet AFG ---------------------------------------------------------------- */
.client .note.afg{
    max-width: 100%;
}

.content-section .afg-team-1{
    height: auto;
    width: 100%;
}

.content-section .afg-team-2{
    height:auto;
    width: 100%;
}

.content-section .afg-team-3{
    height:auto;
    width: 100%;
}

.participants{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.afg-participants{
    margin-bottom: -0.5rem;
}

.participants .grid-2-1 p{
    margin-top: auto;
    line-height: 1;
}

}


/* ---------------- */
/* Desktop ---------------- */
/* ---------------- */



@media (min-width: 1790px) {

/* Desktop Text Formats ---------------------------------------------------------------- */

.largest{
    font-size: var(--largest-desktop);
}

.larger{
    font-size: var(--larger-desktop);
}

.large{
    font-size: var(--large-desktop);
}

h1 {
    font-size: var(--h1-desktop);
}

h2 {
    font-size: var(--h2-desktop);
}

h3{
    font-size: var(--h3-desktop);
}

h4{
    font-size: var(--h4-desktop);
}

h5{
    font-size: var(--h5-desktop);
}

p{
    font-size: var(--p-desktop);
}

.note{
    font-size: var(--note-desktop);
}

.short-text{
    max-width: 80%;
}

.long-text{
    max-width: 60%;
}

/* Desktop Navigation ---------------------------------------------------------------- */

nav{
    padding: 0 var(--section-padding-tablet);
    font-size: var(--p-desktop);
    height: var(--nav-height-desktop);
}

.submenu-icons{
    font-size: var(--p-desktop);
}


/* Desktop Footer ---------------------------------------------------------------- */
.footer-section{
    padding: 1.5em var(--section-padding-desktop);
}

/* Desktop Grids ---------------------------------------------------------------- */
.grid-2-1.grid-1-tablet{
    grid-template-columns: 1fr 1fr;
}

.grid-2-1.items-align-centre{
    gap: 4rem;
}

.grid-2-1.data p{
    max-width: 50%;
}

/* .grid-2.data p{
    max-width: 60%;
} */

/* .grid-3-1{
    grid-template-columns: repeat(3, 1fr); 
    gap: 1rem;
    margin: auto;
} */

.grid-3-2{
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    grid-column: span 2;

}

.mobile-span{
    grid-column: span 1;
}

.grid-3-1.grid-1-tablet{
    grid-template-columns: repeat(3, 1fr); 
    margin: 0;
}
.col-1{
    grid-column-start: 1;
}
.col-2{
    grid-column-start: 2;
}
.col-3{
    grid-column-start: 3;
}
.mobile-two-thirds{
    grid-template-columns: 1fr 1fr;
}

.grid-4-1{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    overflow: hidden;
    /* gap: 1.25rem; */
}

.grid-4-1.days{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 2rem;
}

/* Desktop Sections ---------------------------------------------------------------- */

.content-section{
    padding: 2.5rem var(--section-padding-desktop);
    z-index: 10;
    font-size: var(--p-desktop);
}

.section-title{
    margin-left: 2rem;
    /* margin-top: -3.2rem; */
}
/* Desktop Hero Section ----------------------------------------------------------------*/

.hero-section .grid-2-1{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100vw;    
    min-height: 0;
    gap: 0;
    padding-top: var(--nav-height-desktop);
    /* z-index: -10; */
}

/* ----------- */

.hero-art-box{
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--nav-height-desktop));
    padding-top: 0;
    margin-top: 0;
}

/* desktop hero images */

.hero-art-box img{
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 48%;
}

.hero-art-box.trail img{
    width: 38%;
    margin-top: 3rem;
}

.hero-art-box.jelly img{
    width:50%;
    height: auto;

    padding-top: 6rem;
}

.hero-art-box.true-stories img{
    width: 70%;
    height: auto;
    padding-top: 5rem;
}

.hero-art-box.onboarding img{
    width: 60%;
    height: auto;
    padding-top: 10rem;
}

.hero-art-box.somasense img{
    width:60%;
    height: auto;
    padding-top: 10rem;
}

.hero-art-box.afg img{
    width:75%;
    padding-top:12rem;
}

.grid-2-1.fua{
    gap: 2rem;
}

.hero-art-box.fua{
    padding-top: 0;
    margin-top: 0rem;
    overflow: visible;
}

.hero-art-box.fua img{
    left: 100%;
    top: 100%;

    transform: translate(-100%, -100%);

    height: 110%;
    width: auto;
}

.fua .hero-info-box{
    margin: 0;
    padding: 0;
}


/* ----------- */

.hero-info-box{
    padding-top: 0;
    height: calc(100dvh - var(--nav-height-desktop));

}

.hero-info{
    width: 100%;
    gap:2.5rem;
    margin: auto;
    margin-left: 0;
}

/* ----------- */

.roles{
    gap: .5rem;
    width: 50%;
    margin-left: 0;
    justify-content: start;
}

.roles.afg, .roles.fua, .roles.jelly{
    width: 40%;
}

/* ----------- */

.client{
    align-items: start;
    gap: 0.5rem;
}
.client .note{
    text-align: left;
}

.client-logo img{
    height: 2rem;
}

.client-logo .small-client-logo {
    height: 2.5rem;
}

/* ----------- */

/* ----------- */

/* ----------- */

/* Visual Identity ----------- */

.branding-cover{
    font-size: var(--p-desktop);
    padding: 2em var(--section-padding-desktop);
}

.colour-palette{
    /* gap: 1rem; */
    font-size: var(--p-desktop);
}

/* .colour-box{
    height: 2.5em;
    padding: 0.9em 0.6em;
} */

/* ui ---------------- */

.grid-2-1.ui{
    gap: 2rem;
}

.ui p, .ui .note{
    width: 30%;
}

/* Desktop Card ----------------------------------------------------------------*/

.card{
    font-size: var(--p-desktop);
    border-width: var(--stroke-desktop);
    box-shadow: 6px 4px 0 var(--green);
}

.card-grid .card{
    height: 5rem;
}

.info-side{
    width: 80%;
}

.card-title, .card-info{
    max-width: 100%;
    width: 100%;
}

.card-grid .card.h-fit-content{
    height: fit-content;
}

.card-title{
    font-size: var(--p-desktop);
}

.card-info{
    font-size: var(--p-desktop);
}


/* Desktop General ----------------------------------------------------------------*/

.desktop-hide{
    display: none;
}

.desktop-only{
    display: block;
}

.full-width{
    width: calc(100% + (var(--section-padding-desktop)*2));
    margin-left: calc(var(--section-padding-desktop) * -1);
    margin-right: calc(var(--section-padding-desktop) * -1);
}

.arrow.arrow-right{
    width: 0.7em;
}

.marginless-bottom{
    margin-bottom: -2.5rem;
}

.image-large{
    width:40%;
}

hr{
    margin: 2rem auto;
}

.full-width-text{
    width:80%;
}

/* Desktop Home ---------------------------------------------------------------- */

.home-intro{
    padding: var(--section-padding-desktop);
    font-size: var(--p-desktop);
}

.home .card{    
    border: var(--stroke-desktop) solid var(--black);
    box-shadow: 6px 4px 0 var(--black);
}

.hero-menu{
    padding-right: var(--section-padding-desktop);
}

.anchore-links{
    margin: auto 0 auto auto;
    align-items: end;
}

.coming-soon-overlay{
    border: var(--stroke-desktop) solid var(--black);
}

/* Work Section */

.grid-3-2.work{
    gap: 5rem;
    font-size: var(--p-desktop);
}

.card.work{
    width: 15em;
}

.work img{
    border-radius: 0.5em;
    border-width: 2px;
}

.narrow {
    padding: 0 5%;
}

/* Case Section */




/* Case Section */
.grid-2.case{
    gap: 3rem 3rem;
    font-size: var(--p-desktop);
}

.card.case{
    width: 15em;
    height: 7em;
}

.card.case p{
    max-width: 80%;
}

/* PADC */
.card .padc-badge p{
    padding: 0.1rem 0.75rem 0.3rem 0.1rem;
    margin: auto -0.6rem;
    max-width: 100%;
}

.padc-badge img{
    height: 3em;
}

.padc-badge{
    transform: translateX(-1.5em) translateY(1.5em);
}

/* Qoute Section */
.hat-stamp{
    font-size: var(--p-desktop);
}

/* Desktop True Stories (+case study) ---------------------------------------------------------------- */

.topic-breakdown{
    font-size: var(--p-desktop);
}

.topic-breakdown .grid-2{
    height: 8em;
}

.grid-icons{
    width: 55%;
}

.screenshots-mobile{
    display: none;
}

/* Desktop Somasense ---------------------------------------------------------------- */



/* Desktop Jelly ---------------------------------------------------------------- */

/* Desktop Trail (+case study) ---------------------------------------------------------------- */

.persona-quote.align-right{
    text-align: left;
}

.grid-2-1.persona-quote{
    margin-left: auto;
    align-items: start;
    width: 80%;
}

.trailies .persona-quote p{
    max-width: 90%;
}

.grid-icons.trail{
    width: 60%;
}

.trail .links-list {
    bottom:var(3rem);
    left:50%;
    transform: translate(-50%);
}

.trail .links-list p{
    max-width: 100%;
}

.screenshots-trail img{
    width: 100%;
    transform: translateX(0) translateY(0%) rotate(0);
}

/* Desktop FUA ---------------------------------------------------------------- */

.fua-inspo-grid.full-width{
    width: 80%;
    margin-left: 0;
    margin-right: 0;
}

.fua-des-cyc, .des-second{
    align-items: start;
    justify-content: start;
    font-size: var(--p-desktop);
    width: fit-content;
}

.fua-des-cyc{
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-items: start;

    gap: 2rem;

    padding-top: 0rem;

    font-size: var(--p-desktop);
}

/* Desktop Onboarding ---------------------------------------------------------------- */

.grid-2-1.onboarding-what{
    width: 70%;
    gap: 4rem;
}

.how-item{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2rem 1fr;

    gap: 1rem;
    align-items: start;
        padding-right: 1rem;

}

.how-item img{
    margin-top: auto;
}

.day-item{
    display: grid;
    grid-template-rows: 20rem 1fr;
    gap: 3rem;

    margin-top: 3rem;
}

.day-item img{
    height: 100%;
    width: auto;
    margin: auto auto 0 0;

}

.day-item .day-large-image{
    height: 60%;
}

.play-cloud{
    width: 80%;
    margin: auto;
}

.onboarding-stats .long-text{
    max-width: 30%;
}

.onboarding-stats .grid-1-tablet .long-text{
    max-width: 50%;
}

.red-flag{
    max-width: 90%;
}

.minutes{
    font-size: var(--h4-desktop)

}
/* Desktop AFG ---------------------------------------------------------------- */

.client-logo.afg img{
    height: 1.5rem;
}

.one-column.card p{
    max-width: 100%;
}

.grid-3{
    margin-top: 2rem;
}

.grid-3-1 .grid-2-1.data p{
    max-width: 90%;
}

}

/* -----------------------------------------------------------------------------------------------------
Typography --------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------- 

Forma DJR Display
    Regular
        font-family: "forma-djr-display", sans-serif;
        font-weight: 500;
        font-style: normal;

    Medium
        font-family: "forma-djr-display", sans-serif;
        font-weight: 600;
        font-style: normal;

    Bold
        font-family: "forma-djr-display", sans-serif;
        font-weight: 700;
        font-style: normal;

Forma DJR Text
    Regular
        font-family: "forma-djr-text", sans-serif;
        font-weight: 400;
        font-style: normal;

    Light
        Forma DJR Text Light
        font-family: "forma-djr-text", sans-serif;
        font-weight: 300;
        font-style: normal;

    Light Italic
        font-family: "forma-djr-text", sans-serif;
        font-weight: 300;
        font-style: italic;

    Bold
        font-family: "forma-djr-text", sans-serif;
        font-weight: 700;
        font-style: normal;

Hagrid
    Bold
        font-family: hagrid, sans-serif;
        font-weight: 700;
        font-style: normal;

    Extra Bold
        font-family: hagrid, sans-serif;
        font-weight: 800;
        font-style: normal;

Degular
    Display
        Black
        font-family: "degular-display", sans-serif;
        font-weight: 800;
        font-style: normal;

        Medium
        font-family: "degular-display", sans-serif;
        font-weight: 500;
        font-style: normal;
    
    Text
        font-family: "degular-text", sans-serif;
        font-weight: 400;
        font-style: normal;

Montserrat
    Semi Bold
        font-family: "montserrat", sans-serif;
        font-weight: 600;
        font-style: normal;
    Light
        font-family: "montserrat", sans-serif;
        font-weight: 300;
        font-style: normal;

Stem
    @ Top


Unbounded Semi Bold
    font-family: "unbounded", sans-serif;
    font-weight: 600;
    font-style: normal;

Ivy Mode Italic
    font-family: "ivymode", sans-serif;
    font-weight: 400;
    font-style: italic;

*/