/* VARS */
:root {
    --fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --navy: #001F3F;
    --blue: #0074D9;
    --purple: #B10DC9;
    --black: #111111;

    --baseFontSize: 18px;

    --fontColor: #ffffff;
    --svgColorFilter: saturate(1352%) brightness(119%) contrast(119%);

    --bodyBackgroundColor: hsl(235deg, 60%, 15%);
    --baseColorA: hsl(245deg, 75%, 6%);
    --baseColorB: var(--bodyBackgroundColor);

    /* default pop colors for use in hsl colors - Techy & Modern palette */
    --popColorAdeg: 195deg;  /* Electric Cyan-Blue */
    --popColorBdeg: 280deg;  /* Electric Purple/Violet */
    --popColorCdeg: 160deg;  /* Bright Turquoise */

    --cardBackgroundColor: rgba(0, 0, 0, .05);
    --cardFontColor: #fff;
    --cardShadowColor: rgba(0, 0, 0, .45);
    --cardShadowProps:  0 2px 4px -3px;
    --cardHoverShadowColor: rgba(0, 0, 0, .85);
    --cardHoverShadowProps:  0 9px 44px -13px;
    --cardBorderRadius: .25rem;

    --buttonBorderRadius: .25rem;
    --buttonPadding: 1rem 2rem;

    --buttonShadowProps: 0 2px 5px -1px;
    --buttonHoverShadowProps: 0 -2px 25px -4px;

    --tagBorderRadius: 5rem;

    --switchControlShadowProps: 0 2px 5px -1px;
    --switchControlBorderRadius: 3rem;

    --asideBackgroundColor: rgba(0, 0, 0, .05);
    --asideFontColor: #fff;
}
html:not([data-prefers-reduced-motion="true"]) *{
     transition: all .25s ease-in-out;
}
/* MØRK THEME VARS */
body[data-darkmode="true"]{
    --fontColor: #ffffff;
    --svgColorFilter: saturate(1352%) brightness(119%) contrast(119%);

    --popColorAdeg: 195deg;  /* Electric Cyan-Blue */
    --popColorBdeg: 280deg;  /* Electric Purple/Violet */
    --popColorCdeg: 160deg;  /* Bright Turquoise */

    --cardFontColor: #fff;

    /* Dark mode control colors - dark background */
    --darkModeControlBackground: hsla(var(--popColorBdeg), 85%, 12%, .98);
    --darkModeControlFontColor: hsl(var(--popColorBdeg), 75%, 90%);
}
/* LYS THEME VARS */
body[data-darkmode="false"]{
    --fontColor: #111111;
    --svgColorFilter: saturate(1352%) brightness(119%) contrast(119%);
    --bodyBackgroundColor: #efefef;
    --baseColorA: #010101;
    --baseColorB: #efefef;

    --popColorAdeg: 195deg;  /* Electric Cyan-Blue */
    --popColorBdeg: 280deg;  /* Electric Purple/Violet */
    --popColorCdeg: 165deg;  /* Bright Turquoise */

    --cardFontColor: #111;
    --asideFontColor: #111;

    /* Light mode control colors - light background */
    --darkModeControlBackground: hsla(var(--popColorBdeg), 85%, 95%, .98);
    --darkModeControlFontColor: hsl(var(--popColorBdeg), 75%, 15%);
}
body > div.wrapper{
    /* feed in pop colours defined by the dark/light definitions */
    --focusHighlightColor: hsl(var(--popColorAdeg), 90%, 60%);
    --showcaseBackgroundColor: hsla(var(--popColorAdeg), 95%, 6%,.9);

    --cardBorder: 1px solid hsla(var(--popColorAdeg), 90%, 60%, .33);
    --cardShadowColor: hsla(var(--popColorAdeg), 95%, 7%,.9);

    --buttonBackground: hsl(var(--popColorBdeg), 85%, 55%);
    --buttonHoverBackground: hsl(var(--popColorBdeg), 85%, 65%);
    --buttonFontColor: hsl(0, 0%, 100%);
    --buttonShadowColor: hsla(var(--popColorAdeg), 95%, 7%,.9);
    --buttonHoverShadowColor: hsla(var(--popColorBdeg), 85%, 75%,.93);

    --tagBackgroundColor: hsla(var(--popColorBdeg), 85%, 55%,.15);
    --tagBorderColor: hsla(var(--popColorBdeg), 85%, 55%,.7);
    --tagFontColor: hsl(var(--popColorBdeg), 75%, 75%);

    --switchControlBackground: hsla(var(--popColorAdeg), 85%, 2%,.98);
    --switchControlBorderColor: hsla(var(--popColorAdeg), 85%, 12%,.98);
    --switchControlBallColor: var(--buttonBackground);
    --switchControlShadowColor: hsla(var(--popColorAdeg), 95%, 7%,.9);
}
body[data-darkmode="false"] > div.wrapper{
    --showcaseBackgroundColor: #fff; /* override */
    --buttonBackground: hsl(var(--popColorBdeg), 85%, 35%);
    --buttonFontColor: hsl(0, 0%, 100%); /* override - pure white for max contrast */
    --tagFontColor: hsl(var(--popColorBdeg), 75%, 25%);
    --switchControlBackground: hsla(var(--popColorAdeg), 15%, 85%,.98);
    --switchControlBorderColor: hsla(var(--popColorAdeg), 85%, 80%, 1);
    --switchControlShadowColor: hsla(var(--popColorAdeg), 95%, 7%,.9);
    --buttonBorderRadius: 10rem;

    --asideBackgroundColor: #fff;
    --asideFontColor: #111;
}


body[data-darkmode="true"] .work-categories .card:nth-child(1){
    background: hsla(225deg, 85%, 10%, .8);
}
body[data-darkmode="true"] .work-categories .card:nth-child(2){
    background: hsla(245deg, 85%, 10%, .8);
}
body[data-darkmode="true"] .work-categories .card:nth-child(3){
    background: hsla(265deg, 85%, 10%, .8);
}

body[data-darkmode="false"] .work-categories .card:nth-child(1){
    background: hsla(var(--popColorAdeg), 85%, 82%, .7);
}
body[data-darkmode="false"] .work-categories .card:nth-child(2){
    background: hsla(var(--popColorAdeg), 80%, 95%, .7);
}
body[data-darkmode="false"] .work-categories .card:nth-child(3){
    background: hsla(var(--popColorBdeg), 85%, 85%, .7);
}

/* SCREEN READER ONLY */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* SKIP TO CONTENT LINK */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 999999;
    padding: 1rem 2rem;
    background: var(--buttonBackground);
    color: var(--buttonFontColor);
    text-decoration: none;
    border-radius: 0 0 var(--buttonBorderRadius) 0;
    box-shadow: var(--buttonShadowProps) var(--buttonShadowColor);
    font-weight: 600;
}

.skip-to-content:focus {
    top: 0;
}

/* LAYOUT */
body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--fontFamily);
    color: var(--fontColor);
    background: var(--bodyBackgroundColor);

    background-color: #04d7b0;

    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
}
body > div.wrapper{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
}

body:before{
    content: '';
    display: block;
    position: fixed;
    top: -100vw;
    bottom:-100vh;
    left: -100vw;
    right: -100vh;
    opacity: .25;
    background-color: #8f09ee;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%230cffc8'/%3E%3Cstop offset='1' stop-color='fuchsia'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%234e84db'/%3E%3Cstop offset='1' stop-color='aqua'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(2000 0)'%3E%3Cg transform='translate(0 795)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-255.6 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    filter: blur(10px);
}
body:after{
    content: '';
    z-index: -1;
    display: block;
    position: fixed;
    top: -100vw;
    bottom:-100vh;
    left: -100vw;
    right: -100vh;
    opacity: .5;
    background-color: #8f09ee;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%230cffc8'/%3E%3Cstop offset='1' stop-color='fuchsia'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%234e84db'/%3E%3Cstop offset='1' stop-color='purple'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(2000 0)'%3E%3Cg transform='translate(0 795)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-255.6 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    filter: blur(20px);
}
@keyframes swirl {
      from {
        transform: rotate(360deg) scale(1);
      }

      to {
        transform: rotate(-360deg) scale(2);
      }
    }
    @keyframes swirlB {
      from {
        transform: rotate(-360deg) scale(2);
      }

      to {
        transform: rotate(360deg) scale(1);
      }
    }
@media screen and (prefers-reduced-motion: no-preference) {
    
    body:before{
        animation-duration: 125s;
        animation-name: swirl;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    body:after{
        animation-duration: 175s;
        animation-name: swirlB;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

body main{
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}

main > section{
    padding: 3rem;
}
main > section:nth-child(odd){
    background: var(--baseColorA);
}
main > section:nth-child(even){
    background: var(--baseColorB);
}

/* TYPOGRAPHY */
h1{
    font-weight: lighter;
    font-size: 8rem;
    margin: 0;
    padding: 0;
    color: var(--fontColor);
}
h2{
    color: var(--fontColor);
}
p {
  max-width: 45rem;
}
p,
p a,
p span,
p strong{
    color: var(--fontColor);
}

/* HERO INTRO */
p.hero-intro {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2rem;
}

/* BUTTONS AND ELEMENTS */
a.button {
  display: inline-block;
  padding: var(--buttonPadding);
  background: var(--buttonBackground);
  color: var(--buttonFontColor);

  border-radius: var(--buttonBorderRadius);
  box-shadow: var(--buttonShadowProps) var(--buttonShadowColor);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
a.button:hover,
a.button:focus{
    background: var(--buttonHoverBackground);
    transform: scale(.99) translate(0%, 2%);
    box-shadow: var(--buttonHoverShadowProps) var(--buttonHoverShadowColor);
}
a.button.lg{
    font-size: 3rem;
    margin: 2rem;
}

/* SETTINGS PANEL */
aside#ui-controls{
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999999;
}

/* Hide the toggle checkbox */
aside#ui-controls .settings-toggle{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Settings icon button */
aside#ui-controls .settings-icon{
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--buttonBackground);
    color: var(--buttonFontColor);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--buttonShadowProps) var(--buttonShadowColor);
    z-index: 999999;
    transition: all .3s ease-in-out;
}

aside#ui-controls .settings-icon:hover{
    background: var(--buttonHoverBackground);
    transform: rotate(45deg) scale(1.1);
    box-shadow: var(--buttonHoverShadowProps) var(--buttonHoverShadowColor);
}

aside#ui-controls .settings-icon svg{
    width: 1.5rem;
    height: 1.5rem;
}

/* Settings panel */
aside#ui-controls .settings-panel{
    position: fixed;
    top: 0;
    right: -25rem;
    width: 22rem;
    height: 100vh;
    background: var(--asideBackgroundColor);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    transition: right .3s ease-in-out;
    overflow-y: auto;
    padding: 2rem;
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
}

aside#ui-controls .settings-panel h3{
    color: var(--asideFontColor);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

aside#ui-controls .settings-panel .info{
    display: block;
    color: var(--asideFontColor);
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--cardBorderRadius);
}

aside#ui-controls .settings-panel .info *{
    color: var(--asideFontColor);
    font-size: 0.9rem;
}

/* Show panel when checkbox is checked */
aside#ui-controls .settings-toggle:checked ~ .settings-panel{
    right: 0;
}

/* Rotate icon when panel is open */
aside#ui-controls .settings-toggle:checked ~ .settings-icon{
    transform: rotate(45deg);
}

/* Switch control inside settings panel */
.switch-control{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.switch-control input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-control label{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}

.switch-control label .label-text{
    color: var(--darkModeControlFontColor);
    font-weight: 500;
    flex: 1;
}

.switch-control .switch{
    position: relative;
    display: block;
    width: 4rem;
    height: 2rem;
    background: var(--switchControlBackground);
    border: 1px solid var(--switchControlBorderColor);
    border-radius: var(--switchControlBorderRadius);
    transition: background .3s ease-in-out;
    flex-shrink: 0;
}

.switch-control .switch::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    background: var(--switchControlBallColor);
    box-shadow: var(--switchControlShadowProps) var(--switchControlShadowColor);
    transition: left .3s ease-in-out;
}

.switch-control input[type="checkbox"]:checked + label .switch::before{
    left: calc(100% - 2rem);
}

.switch-control input[type="checkbox"]:focus + label .switch,
.switch-control:focus-within .switch,
.switch-control:hover .switch{
    box-shadow: 0 0 2px 2px var(--focusHighlightColor);
}

/* Language control with buttons */
.language-control{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.language-control .control-label{
    color: var(--darkModeControlFontColor);
    font-weight: 500;
}

.language-control .language-buttons{
    display: flex;
    gap: 0.5rem;
}

.language-control .lang-btn{
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--switchControlBackground);
    color: var(--darkModeControlFontColor);
    border: 1px solid var(--switchControlBorderColor);
    border-radius: var(--buttonBorderRadius);
    cursor: pointer;
    font-weight: 500;
    transition: all .3s ease-in-out;
}

.language-control .lang-btn:hover{
    background: var(--buttonBackground);
    color: var(--buttonFontColor);
    transform: translateY(-2px);
    box-shadow: var(--buttonShadowProps) var(--buttonShadowColor);
}

.language-control .lang-btn.active{
    background: var(--buttonBackground);
    color: var(--buttonFontColor);
    border-color: var(--buttonBackground);
    box-shadow: var(--buttonShadowProps) var(--buttonShadowColor);
}
/* CARDS */
.card{
    display: flex;
    flex-direction: column;
    background: var(--cardBackgroundColor);
    color: var(--cardFontColor);
    box-shadow: var(--cardShadowProps) var(--cardShadowColor);
    border-radius: var(--cardBorderRadius);
    border: var(--cardBorder);

    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
}
.card:hover,
.card:focus-within{
    box-shadow: var(--cardHoverShadowProps) var(--cardHoverShadowColor);
    transform: scale(1.025) translate(0%, -1%);
    border-top-width: 3px;
    z-index: 9;
}
.card > *,
.card p{
    padding: 1rem;
    color: var(--cardFontColor);
}
.card > .card-hdr,
.card > .card-ftr{
    flex: 0 0 auto;
    color: var(--cardFontColor);
}
.card > .card-bdy{
    flex: 1 1 auto;
    color: var(--cardFontColor);
}

/* TAGS */
ul.tag-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 45rem;
    list-style: none;
    padding: 10px;
    margin: 40px 0;
}
ul.tag-list .tag{
    display: block;
    font-size: .8rem;
    margin: 2px;
    padding: 2px 10px;
    flex: 0 0 auto;
    border-radius: var(--tagBorderRadius);
    background: var(--tagBackgroundColor);
    color: var(--tagFontColor);
    border: 1px solid var(--tagBorderColor);
}


/* CONTAINERS */
.contact{
    text-align: center;
    padding: 4rem 2rem 6rem 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex: 0 0 auto;
    min-height: 100vh;

    clip-path: polygon(0 50px, 90% 130px, 100% 95px, 100% 100%, 25% 85%, 0 85%, 0 50px);
}
.contact > .showcase-bg{
    content: '';
    z-index: -1;
    display: block;
    background: var(--showcaseBackgroundColor);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.contact .content{
    padding: 2rem;

}
.contact .content p{
    margin-left: auto;
    margin-right: auto;
}


.work-categories,
.brands,
.reach-out-list {
  text-align: center;
}


/* WORK CATEGORIES */
.work-categories{
    background: transparent!important;
    margin-top: -25vh;
    z-index: 9;
}



/* BRANDS */
.brands h3{
    margin: 4rem;
    color: #fff;
}
.brand-list{
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 2rem;
    margin-bottom: 8rem;
    margin-left: auto;
    margin-right: auto;
}
.brand-list img{
    max-width: 200px;
    max-height: 100px;
    filter: var(--svgColorFilter);
}
.brand-list > li{
    display: flex;
    align-items: center;
    justify-content: center;
}


/* REACH OUT */
.reach-out-list{
    list-style: none;
    margin: 0;
    padding: 0;
}
.reach-out-list > li{
    padding: 2rem;
}
.reach-out-list a,
.reach-out-list button{
    display: block;
    font-size: 1.5rem;
    padding: 4rem;
}



/*case for IE, which doesn't support `@supports` and doesn't support grid.*/
@media all and (-ms-high-contrast: none) {
    .brand-list{
        display: flex;
        flex-wrap: wrap;
    }
    .reach-out-list{
        display: flex;
    }
    .brand-list > svg,
    .reach-out-list > li{
        flex: 1 1 300px;
        padding: 3rem;
    }
}
@supports (display: grid) {
    .brand-list{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
        grid-template: auto / repeat(4, 1fr);
        grid-auto-flow: row;
        min-height: 40vh;
        margin-top: 8rem;
    }
    .reach-out-list{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
        grid-template: auto / repeat(2, 1fr);
        grid-auto-flow: row;
    }
    .work-categories{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
        grid-template: auto / repeat(3, 1fr);
        grid-auto-flow: row;
    }
    .work-categories .card,
    .reach-out-list li{
        margin: 0 ;
        padding: 8px 20px;
        padding-top: 3rem;
    }
    @media only screen and (max-width: 1080px) {
        .brand-list{
            grid-template: auto / repeat(3, 1fr);
            max-width: 100%;
        }
        .work-categories,
        .reach-out-list{
            grid-template: auto / repeat(2, 1fr);
            max-width: 100%;
        }
    }

    @media only screen and (max-width: 800px) {
        .brand-list,
        .work-categories,
        .reach-out-list{
            display: block;
        }
        .work-categories > .card,
        .reach-out-list > li{
            margin-bottom: 10px;
        }
    }
}

/* MOBILE FIXES - Prevent horizontal scrolling and optimize for mobile */
@media only screen and (max-width: 800px) {
    /* Fix viewport and prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    body > div.wrapper {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Hide background animations on mobile for solid backgrounds */
    body:before,
    body:after {
        display: none;
    }

    /* Reduce h1 size for mobile */
    h1 {
        font-size: 3rem;
        word-break: break-word;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Adjust section padding for mobile */
    main > section {
        padding: 2rem 1rem;
    }

    /* Simplify contact section for mobile */
    .contact {
        clip-path: none;
        min-height: auto;
        padding: 3rem 1rem 3rem 1rem;
        display: block;
    }

    .contact .content {
        padding: 1rem;
        display: block;
        width: 100%;
    }

    /* Remove negative margin on work-categories for mobile */
    .work-categories {
        margin-top: 0 !important;
    }

    /* Adjust button sizes for mobile */
    a.button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        color: #ffffff !important;
    }

    a.button.lg {
        font-size: 1.5rem;
        margin: 1rem 0;
        color: #ffffff !important;
    }

    /* Fix settings panel for mobile */
    aside#ui-controls .settings-panel {
        width: 85vw;
        right: -90vw;
        padding: 1rem;
    }

    aside#ui-controls .settings-icon {
        top: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Adjust cards for mobile */
    .card > *,
    .card p {
        padding: 0.75rem;
    }

    .work-categories .card {
        margin-bottom: 1rem;
    }

    /* Adjust tag list for mobile */
    ul.tag-list {
        padding: 5px;
        margin: 20px 0;
    }

    /* Adjust brands section for mobile */
    .brands h3 {
        margin: 2rem 1rem;
    }

    .brand-list {
        margin-bottom: 4rem;
        padding: 1rem;
    }

    .brand-list > li {
        margin: 0.5rem;
        padding: 1rem;
    }

    .brand-list img {
        max-width: 150px;
        max-height: 75px;
    }

    /* Adjust reach out buttons for mobile */
    .reach-out-list a,
    .reach-out-list button {
        padding: 2rem 1rem;
        font-size: 1.2rem;
    }

    /* Ensure paragraphs don't overflow */
    p {
        max-width: 100%;
        word-wrap: break-word;
    }

    /* Adjust hero intro for mobile */
    p.hero-intro {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
}

/* MOBILE DARK MODE - Solid dark background with light text */
@media only screen and (max-width: 800px) {
    body[data-darkmode="true"] {
        background: #1a1a2e !important;
    }

    body[data-darkmode="true"] main > section:nth-child(odd) {
        background: #16213e !important;
    }

    body[data-darkmode="true"] main > section:nth-child(even) {
        background: #1a1a2e !important;
    }

    body[data-darkmode="true"] h1,
    body[data-darkmode="true"] h2,
    body[data-darkmode="true"] h3 {
        color: #ffffff !important;
    }

    body[data-darkmode="true"] p,
    body[data-darkmode="true"] p a,
    body[data-darkmode="true"] p span,
    body[data-darkmode="true"] p strong,
    body[data-darkmode="true"] p.hero-intro {
        color: #e0e0e0 !important;
    }

    body[data-darkmode="true"] .contact > .showcase-bg {
        background: #0f3460 !important;
    }

    body[data-darkmode="true"] .card {
        background: rgba(255, 255, 255, 0.05) !important;
    }
}

/* MOBILE LIGHT MODE - Solid white background with dark text */
@media only screen and (max-width: 800px) {
    body[data-darkmode="false"] {
        background: #ffffff !important;
    }

    body[data-darkmode="false"] main > section:nth-child(odd) {
        background: #f5f5f5 !important;
    }

    body[data-darkmode="false"] main > section:nth-child(even) {
        background: #ffffff !important;
    }

    body[data-darkmode="false"] h1,
    body[data-darkmode="false"] h2,
    body[data-darkmode="false"] h3 {
        color: #111111 !important;
    }

    body[data-darkmode="false"] p,
    body[data-darkmode="false"] p a,
    body[data-darkmode="false"] p span,
    body[data-darkmode="false"] p strong,
    body[data-darkmode="false"] p.hero-intro {
        color: #333333 !important;
    }

    body[data-darkmode="false"] .contact > .showcase-bg {
        background: #e8f4f8 !important;
    }

    body[data-darkmode="false"] .card {
        background: rgba(0, 0, 0, 0.03) !important;
    }

    body[data-darkmode="false"] .brands {
        background: #e3f2fd !important;
    }

    body[data-darkmode="false"] .brands h3 {
        color: #111111 !important;
    }

    body[data-darkmode="false"] .brand-list img {
        filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(10%) contrast(100%) !important;
    }

    body[data-darkmode="false"] a.button,
    body[data-darkmode="false"] a.button.lg {
        background: hsl(var(--popColorBdeg), 85%, 45%) !important;
        color: #ffffff !important;
    }
}

/* Extra small mobile devices */
@media only screen and (max-width: 480px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    main > section {
        padding: 1.5rem 0.75rem;
    }

    a.button.lg {
        font-size: 1.25rem;
    }

    aside#ui-controls .settings-panel {
        width: 90vw;
        right: -95vw;
    }
}