@font-face {
    font-family:'PPRadioGrotesk-Light';
    src: url('/radio/PPRadioGrotesk-Light.woff2') format('woff2'),
         url('/radio/PPRadioGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family:'PPRadioGrotesk-Bold';
    src: url('radio/PPRadioGrotesk-Bold.woff2') format('woff2'),
         url('radio/PPRadioGrotesk-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
  box-sizing: border-box;

}
html{
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */

font-weight: normal;

}
body{
  cursor:none;
 	background-color:#F7F6F2;
	font-family: 'PPRadioGrotesk-Light';
	color:#171924;
	margin:0px;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
    transition: background-color 1s ease;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.px-global {
    padding-left: var(--grid-gutter-space);
    padding-right: var(--grid-gutter-space);
}
.gap-global {
    gap: var(--grid-gutter-space);
}
.grid-cols-12 {
    grid-template-columns: repeat(12,minmax(0,1fr));
    @media (width <= 768px) {
      grid-template-columns: repeat(6,minmax(0,1fr));
    }
}
.grid {
    display: grid;
    pointer-events: none;
}
.inset-0 {
    inset: 0;
}
.absolute {
    position: fixed;
}
.line {
                position: absolute;
                z-index: 0;
                --tw-bg-opacity: .5;
                background-color: #123836;
                background-color: rgb(18 56 54/var(--tw-bg-opacity))
            }

            .line.horizontal {
                height: 1px;
                width: 100vw
            }

            .line.vertical {
                height: 200vh;
                width: 1px
            }

            .line.left {
                left: 0
            }

            .line.right {
                right: 0
            }

            .line.top {
                top: 0
            }

            .line.top.global-line {
                top: 16px;
                top: var(--grid-gutter-space)
            }

            .line.bottom {
                bottom: 0
            }

            .line.pull-top {
                top: -16px;
                top: calc(var(--grid-gutter-space)*-1)
            }

            .line.pull-bottom {
                bottom: -16px;
                bottom: calc(var(--grid-gutter-space)*-1)
            }

            .line.pull-left {
                left: -16px;
                left: calc(var(--grid-gutter-space)*-1)
            }

            .line.pull-right {
                right: -16px;
                right: calc(var(--grid-gutter-space)*-1)
            }

            .line.force-left {
                left: -100vw;
                width: 200vw
            }

            .has-inner-grid-lines {
                position: relative
            }

            .has-inner-grid-lines .content {
                position: relative;
                z-index: 1
            }

            .grid-lines>.grid-lines {
                pointer-events: none
            }

            .grid-lines {
                position: relative
            }

            .grid-lines.horizontal:after,.grid-lines.horizontal:before {
                content: " ";
                height: 1px;
                left: -16px;
                left: calc(var(--grid-gutter-space)*-1);
                position: absolute;
                transition-duration: 1s;
                width: calc(100% + 32px);
                width: calc(100% + var(--grid-gutter-space)*2);
                z-index: 0
            }

            .grid-lines.horizontal.global {
                height: 30vw
            }
            .grid-lines {
    position: relative;
}

.col-span-3 {
    grid-column: span 1/span 1
}
.body-grid .grid-lines.vertical:after, .body-grid .grid-lines.vertical:before {
    height: calc(100% + 16px);
    height: calc(100% + var(--grid-gutter-space)*1);
}
.grid-lines.vertical.left:before {
    left: 0;
}
.body-grid .grid-lines:after, .body-grid .grid-lines:before {
    --tw-bg-opacity: 1;
    -webkit-backface-visibility: visible;
    background-color: #d9d9d9;
    background-color: rgb(217 217 217/var(--tw-bg-opacity));
    mix-blend-mode: difference;
    opacity: .2;
    transform: translateZ(0);
}
.color-no3{
 /* .body-grid .grid-lines:after, .body-grid .grid-lines:before{
    background-color: #a6a6a6;;
    opacity: .6;
  }*/
}
.grid-lines.vertical:after, .grid-lines.vertical:before {
    content: "";
    height: calc(100% + 32px);
    height: calc(100% + var(--grid-gutter-space)*2);
    position: absolute;
    top: -16px;
    top: calc(var(--grid-gutter-space)*-1);
    transition-duration: 1s;
    width: 1px;
    z-index: 0;
}
#cursor{
  border-radius: 50%;
    background-color: white;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 99999; 
    transition: width 0.25s cubic-bezier(0.5, 0, 0.55, 0.9), height 0.25s cubic-bezier(0.5, 0, 0.55, 0.9);
    z-index: 99999;
    width: 18px;
    height: 18px;
    mix-blend-mode: difference;
    position: fixed;
    @media (width <= 768px) {
      display:none !important;
    }
}
#cursor.link{
  width: 50px;
  height: 50px;
  transform-origin: center;
  background-image: url("gfx/link_ext.svg");
  background-repeat: no-repeat;
  background-color: transparent;

}
#cursor.link-dark{
  width: 50px;
  height: 50px;
  transform-origin: center;
  background-image: url("gfx/link_ext_dark.svg");
  background-repeat: no-repeat;
  background-color: transparent;
  mix-blend-mode: color-burn;
}
#cursor.call{
  width: 50px;
  height: 50px;
  transform-origin: center;
  background-image: url("gfx/call.svg");
  background-repeat: no-repeat;
  background-color: transparent;
}
#cursor.email{
  width: 50px;
  height: 50px;
  transform-origin: center;
  background-image: url("gfx/email.svg");
  background-repeat: no-repeat;
  background-color: transparent;
}
h1{
  font-size:120px;
  margin:0px;
  font-family: 'PPRadioGrotesk-Light';
  font-weight:300;

}
h2{
  font-size:60px;
  margin:0px;
  font-family: 'PPRadioGrotesk-Light';
  font-weight:300;
  margin-bottom: 100px;
  margin-top: 30px;
  @media (width <= 768px) {
    font-size:34px;
    margin-bottom:20px;
  }
}

h3{
  font-size:34px;
  font-weight:normal;
  font-variant-ligatures: common-ligatures;
}
h4{
  font-size:30px;
  @media (width <= 768px) {
    font-size:30px !important;
  }
}
a{
  color:#4D80E6;
  text-decoration: none;
  position:relative;
  cursor: none;
}
.data-row a.link-dark:after{
  content: '';
  display: inline-block;
  margin-left:6px;
  transform-origin: center;
  background-image: url("gfx/link-icon.svg");
  background-repeat: no-repeat;
  background-color: transparent;
  height: 10px;
  width: 10px;
}
.logo:after{
  display:none;
}
@keyframes logoRotate {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}
.logo svg{
 width: auto;
     height: 70px;
}
.logo:hover{
  svg{
    animation: logoRotate 4s linear;
    fill: hotpink !important;
  }
}
p{
  font-size:15px;
}
.color-no1 {
  background-color: #D9D9D9;
}
.color-no2 {
  background-color: #171924;
  color:#F7F6F2;
  border-bottom: 0.5px #F7F6F2 solid;
  .grid{
    opacity: 0;
  }
}
.color-no2{
  .data-row{
    border-bottom: 0.5px #F7F6F2 solid;
  }
}
.color-no3 {
   background-color: #797979;
  color:#FFE56B;
  .grid{
    opacity: 0.2;
  }
}
:root {
  --safe-vh: calc(var(--vh, 1vh) * 100);
  --grid-gutter-space: 16px;
    --half-grid-gutter-space: 8px;
    --dark-green: #123836;
    --orange: #ff6359;
  @media (width <= 768px) {
    --safe-vh: calc(var(--vh, 1vh) * 80);
  }
}
#content{
  max-width:100vw;
  margin:0px auto;
  .panel{
    padding: 16px;

  }
  #highlights{
    padding:0px 0px 20px 0px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 100%;
      height: auto;
    }
    video{
      width: 100%;
      max-width: 1400px;
      @media (width <= 768px) {
        width:90vw;
      }
    } 
    @media (width <= 768px) {
      picture{
        width:75vw;
      }
    }
  }
  #experience{
    min-height: 100vh;
  }
	#hero{
    display: flex;
    flex-direction: column;
    padding-bottom: 0px;
            height: calc(100 * var(--safe-vh) / 100); /* Adjust this value as needed */

    .intro{
      display: grid;
        grid-template-columns: repeat(12,minmax(0,1fr));
        grid-column-gap:16px;
      height:100%;
      @media (width <= 768px) {
        grid-template-columns: repeat(6,minmax(0,1fr));
      }
      .text{
            grid-column: span 6;
          @media (width <= 768px) {
            grid-column: span 4;
          }
          p.indent{
            text-indent: 40px;
            margin-top:0px;
        }
      }
    }
    .logo {
      grid-column: -2 / -1;
      @media (width <= 768px) {
          display:block;
          text-align:right;
          width:65px;
          height:65px;
          grid-column: -3 / -1;
          svg{
            /*width:100%;
            height: 100%;*/
          }
        }
      img{
        height:20vh;
        @media (width <= 768px) {
/*            width:20vw;*/
        }
      }
    }
    .title{
      display: grid;
      grid-template-columns: repeat(1,minmax(0,1fr));
      grid-column-gap:16px;
      width:100%;
      .wrap{
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        grid-column-gap:16px;
        margin-bottom:30px;
        @media (width <= 768px) {
          grid-template-columns: repeat(6,minmax(0,1fr));
          p{
            grid-column: span 2;
          }
          .role{
                grid-column: span 3;
          }
          .year{
                grid-column: span 1;
          }
        }
        p{
          display: block;
          text-transform:uppercase;
          font-size:14px;
          font-family: 'PPRadioGrotesk-Light';
          font-weight:300;
        }
      }
      h1{
          @media (width <= 768px) {
              font-size:85px;
            line-height:80px;
          }
      }
    }
  }
}
@keyframes fadeintext {
    0% {
        opacity: 0;
        transform: translateY(.25em)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes fadeouttext {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-.25em)
    }
}
h1,h2,h3,h4,p,ul li, .logo img, .data-row{
  opacity: 0;
}
.active, .color-no1{
  h1,h2,h3,p,h4,ul li, .logo img, .data-row{
    animation: fadeintext .75s ease-out forwards;
    animation-delay: .5s;
  }
}

.experience-row{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-column-gap:16px;
  margin-bottom:150px;
  @media (width <= 768px) {
    display:block;
    margin-bottom:75px;
  }
  .wrap{
      grid-column: 2 / span 2
  }
  .year-title{
    width:100%;
    min-width:40%;
    h4{
      font-size:50px;
      margin-top: 0px;
      margin-bottom:16px;
    }
    h3{
      font-size:20px;
      margin-top:0px;
      width:60%;
      @media (width <= 768px) {
        width:100%;
      }
    }
  }
  .desc{
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap:16px;
    @media (width <= 768px) {
      display:block;
    }
    p{
      margin-top:0px;
      font-size:15px;
    }
    p:first-of-type{
      text-indent: 60px;
    }
  }
}
.projects h4{
  text-transform: uppercase;
  font-weight: normal;
}
.data-row{
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  grid-column-gap:16px;
  border-bottom: 0.5px #FFE56B solid;
  padding: 24px 0px;
  @media (width <= 768px) {
    padding:12px 0px;
    grid-template-columns: repeat(6,minmax(0,1fr));
  }
  p{
    font-size:14px;
    grid-column: 2 span;
    margin:0px;
  }
  p.client{
    grid-column: 3 span;
    @media (width <= 768px) {
      grid-column: 2 span;
    }
  }
  p.role{
    grid-column: 3 span;
    @media (width <= 768px) {
      grid-column: 2 span;
    }
  }
  a{
    color:#FFE56B;
  }
}
.edu-wrap{

}
.education-row{
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-column-gap:16px;
  border-bottom: 0.5px #FFE56B solid;
  .desc{
    grid-column: 9 span;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .year-title{
    grid-column: 3 span;
    padding-top:15px;
    .period{
      margin-top: 10px;
      margin-block-start:0px;
      font-size:30px;
    }
  }
  @media (width <= 768px) {
    grid-template-columns: repeat(1,minmax(0,1fr));
    padding:16px 0px;
    grid-column-gap:0px;
    align-items:flex-start;
    .year-title{
      h4{
        margin-bottom:14px;
      }
    }
    .desc{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      p{
        margin-top:0px;
      }
    }
  }
} 
#contacts{
  min-height: 100vh;
  align-content: end;
  @media (width <= 768px) {
    min-height: 75vh;
  }
    width:100vw;
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-column-gap:16px;
    @media (width <= 768px) {
      width:100%;
      grid-template-columns: repeat(6,minmax(0,1fr));
      grid-row-gap:16px;
    }
    .contact-title{
      grid-column: 8 / -6;
      display: flex;
      align-items: flex-end;
      @media (width <= 768px) {
        grid-column: 4 span;
      }
      h3{
        margin: 0px;
      }
    }
    .contact-info{
      grid-column: -4 / -1;
      @media (width <= 768px) {
        grid-column:4 span;
      }
    }
    .img{
      grid-column: -5;
      @media (width <= 768px) {
        grid-column: 1 / 3;
        width: 100%;
            height: 100%;
      }
      img{
        width:100px;
        height:auto;
        @media (width <= 768px) {
        width: 100%;
            height: 100%;
      }
      }  
    }
    a{
      font-size:14px;
      display: inline-block;
      margin-bottom: 0px;
      grid-column: 4 span;
    }
    p{
      margin-bottom:0px;
      margin-top:0px;
    }
  }
}