@font-face {
  font-family: Nextexitfot Webfont;
  src: url('../fonts/nextexitfot-light-webfont.woff.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "7 C 9 F 4 E 538 Cc 03703206 D 1 D 74 C 35 Daa 38";
  src: url('../fonts/7c9f4e538cc03703206d1d74c35daa38.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oedoopro Book;
  src: url('../fonts/OEDooPro-Book.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: NeueHaasDisplayThin;
  src: url('../fonts/NeueHaasDisplayThin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: NeueHaasDisplayXThin;
  src: url('../fonts/NeueHaasDisplayXThin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: NeueHaasDisplayXXThinItalic;
  src: url('../fonts/NeueHaasDisplayXXThinItalic.ttf') format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: NeueHaasDisplayXXThin;
  src: url('../fonts/NeueHaasDisplayXXThin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Trial Metamorbitvf;
  src: url('../fonts/Trial_MetamorBitVF.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gt Super Text Book;
  src: url('../fonts/GT-Super-Text-Book-Italic.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-BoldItalic.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Italic.otf') format("opentype"), url('../fonts/MDIOTrial-UltraItalic.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-BlackItalic.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Semibold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Thin.otf') format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-LightItalic.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial Ultra;
  src: url('../fonts/MDIOTrial-Ultra.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-MediumItalic.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-ThinItalic.otf') format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mdiotrial;
  src: url('../fonts/MDIOTrial-SemiboldItalic.otf') format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gt Super Display Trial;
  src: url('../fonts/GT-Super-Display-Medium-Trial.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gt Super Display Trial;
  src: url('../fonts/GT-Super-Display-Medium-Italic-Trial.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gt Super Text Trial;
  src: url('../fonts/GT-Super-Text-Regular-Trial.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gt Super Display Trial;
  src: url('../fonts/GT-Super-Display-Light-Trial.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gt Super Display Trial;
  src: url('../fonts/GT-Super-Display-Light-Italic-Trial.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Didot Title;
  src: url('../fonts/Didot-Title.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Didot;
  src: url('../fonts/Didot-Italic.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Didot;
  src: url('../fonts/Didot-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Didot;
  src: url('../fonts/Didot.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --main-black: #000;
  --second-black: #101010;
  --wright-airplane: #25395a;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 400;
  line-height: 36px;
}

a {
  color: var(--main-black);
  text-decoration: none;
}

.body {
  color: #000;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
}

.body.flower {
  font-family: Montserrat, sans-serif;
}

.body.black {
  background-color: var(--second-black);
}

.body.black._1 {
  background-color: var(--main-black);
}

.body.about {
  overflow: visible;
}

.container {
  width: 100%;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.container._2 {
  max-width: 1060px;
}

.navbar {
  z-index: 99;
  background-color: #fff;
  border-bottom: .8px solid #000;
  position: sticky;
  top: 0;
}

.navbar.white {
  border-bottom-color: #fff;
}

.navbar.blue {
  background-color: #25395a;
  border-bottom-color: #fff;
}

.navbar.black {
  background-color: var(--main-black);
  border-bottom-color: #fff;
}

.navbar.black.m {
  background-color: var(--second-black);
}

.navbar.black.tp {
  background-color: #0000;
}

.navbar.black._2 {
  background-color: #101010;
}

.div-block {
  color: #fff;
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.navlink {
  text-transform: uppercase;
  padding-top: 25px;
  padding-bottom: 25px;
  text-decoration: none;
}

.navlink:hover {
  text-decoration: underline;
}

.navlink.w--current {
  color: var(--main-black);
  text-decoration: none;
  transition: all .125s;
}

.navlink.w--current:hover {
  text-decoration: underline;
}

.navlink.white {
  color: #fff;
  text-transform: uppercase;
  padding-right: 20px;
}

.navlink.t {
  font-family: Mdiotrial, Arial, sans-serif;
}

.brand {
  width: auto;
  max-width: none;
}

.heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  line-height: 24px;
}

.topheading {
  border-bottom: .8px solid #000;
  padding-top: 17px;
  padding-bottom: 17px;
}

.section-projects {
  padding-top: 60px;
}

.project-wrapp {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  margin-top: 26px;
  display: flex;
}

.project-wrapp.last {
  margin-top: 23px;
}

.project-wrapp._1 {
  margin-top: 0;
}

.grid-project-items {
  color: #fff;
  width: 100%;
  text-decoration: none;
  display: block;
  position: relative;
}

.grid-project-items.big {
  margin-top: 23px;
}

.project--image.mob {
  display: none;
}

.project--text {
  opacity: 1;
  background-color: #000000d9;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.text-block {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 29px;
}

.text-block._2 {
  margin-top: 5px;
  font-weight: 400;
}

.project-wrapp-middle {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  display: flex;
}

.footer {
  border: .8px #000;
  border-top-style: solid;
  margin-top: 40px;
  padding-top: 21px;
  padding-bottom: 21px;
}

.footer.white {
  border-top-color: #fff;
}

.footer.margin100 {
  margin-top: 100px;
}

.footer-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: .9375rem;
  font-weight: 400;
}

.footer-heading.white {
  color: #fff;
}

.contact-me {
  color: #000;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: underline;
}

.contact-me.white {
  color: #fff;
  text-decoration: underline;
}

.div-block-2 {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.about-wrapper {
  min-height: 92vh;
  padding-top: 60px;
  padding-bottom: 110px;
}

.about-details {
  color: #f20707;
  text-transform: uppercase;
  max-width: none;
  font-family: Gt Super Text Book, Arial, sans-serif;
  font-size: 2.1875rem;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
}

.about-details._2 {
  margin-top: -30px;
  font-size: 1.25rem;
}

.about-details._2.mb {
  display: none;
}

.div-block-3 {
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  display: flex;
}

.heading-2 {
  flex: 0 auto;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: block;
}

.paragraph {
  width: 100%;
  max-width: 369px;
  margin-bottom: 0;
  font-weight: 300;
  line-height: 24px;
}

.skills-and-academic {
  grid-column-gap: 24px;
  grid-row-gap: 35px;
  grid-template-columns: 124px minmax(0, 369px);
  align-items: start;
  display: grid;
}

.skills-and-academic-wrapper {
  grid-column-gap: 35px;
  grid-row-gap: 35px;
  flex-flow: column;
  max-width: 517px;
  display: flex;
}

.text-span {
  font-weight: 600;
}

.link {
  text-decoration: underline;
}

.wright-airplane {
  background-image: none;
  background-position: 0 0;
  background-size: auto;
  height: auto;
  padding-bottom: 0;
}

.wright-body-wrappr {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 118px;
  display: flex;
}

.wright--img {
  margin-top: 60px;
}

.div-block-4 {
  max-width: 717px;
  margin-top: 130px;
  padding: 0;
}

.heading-3 {
  color: #fff;
  margin-top: 10px;
  font-family: Damion, sans-serif;
  font-size: 2.07688rem;
  line-height: 46px;
}

.barlow-white {
  color: #fff;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
}

.barlow-white._2 {
  margin-top: 30px;
  font-size: 1.0625rem;
  line-height: 20px;
}

.barlow-white._2.b {
  font-size: .75rem;
}

.barlow-white.b {
  color: #000;
}

.med {
  font-weight: 500;
}

.wright-images {
  margin-top: 130px;
}

.lightbox-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: stretch;
  place-items: start center;
  display: grid;
}

.lightbox-grid._2 {
  grid-template-columns: .75fr 1fr;
  width: 100%;
  margin-top: 20px;
}

.lightbox-grid._3 {
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 20px;
}

.image {
  width: 100%;
}

.image._1 {
  max-width: 732px;
}

.image._2 {
  max-width: 568px;
}

.image._33 {
  object-fit: cover;
  max-width: 569px;
  height: 100%;
}

.image._4 {
  object-fit: cover;
  max-width: 735px;
  height: 100%;
}

.image._5 {
  max-width: 656px;
}

.image._6 {
  object-fit: cover;
  max-width: 641px;
  height: 100%;
}

.lightbox-link-2 {
  width: 100%;
  height: 100%;
}

.other-project-wrapper {
  z-index: 97;
  margin-top: 180px;
  margin-bottom: 120px;
  position: relative;
}

.heading-white {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.image-2 {
  object-fit: cover;
  width: 100%;
  max-width: 311px;
  height: 245.203px;
  margin-bottom: 25px;
  transition: all .2s;
  display: block;
  position: static;
}

.image-2:hover {
  filter: brightness(65%);
}

.image-2.shadow {
  box-shadow: 0 1.42px 4.73px #0000000d;
}

.paragraph-2 {
  color: #fff;
  margin-bottom: 0;
  font-size: .9375rem;
  font-weight: 600;
}

.paragraph-2._2 {
  font-weight: 400;
}

.paragraph-2.b {
  color: #000;
  font-family: Mdiotrial, Arial, sans-serif;
}

.div-block-6 {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.div-block-7 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.flowerboy-wrapper {
  padding-top: 100px;
  padding-bottom: 0;
}

.flowerboy-heading {
  color: #000;
  text-align: center;
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 6.875rem;
  line-height: 134px;
}

.flowerboy-top-img {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block-9 {
  margin-top: 135px;
}

.heading-5 {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.heading-5._2 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 20px;
}

.div-block-10 {
  width: 100%;
  max-width: 670px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-11 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.div-block-11.mbottom {
  margin-bottom: 70px;
}

.image-3 {
  margin-bottom: 14px;
}

.monts--p {
  margin-bottom: 12px;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
}

.text-block-2 {
  margin-top: 3px;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 500;
}

.text-span-2 {
  font-weight: 300;
}

.flowerboy-images {
  margin-top: 120px;
}

.flowerboy-images-grid {
  grid-column-gap: 45px;
  grid-row-gap: 45px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 0;
  display: grid;
}

.flowerboy-lightbox {
  width: 100%;
  display: block;
}

.heading-black {
  color: #000;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.heading-black.white {
  color: #fff;
}

.barleier-logo {
  width: 715px;
  margin-top: 140px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.image-4 {
  margin-top: -90px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.paragraph-3 {
  margin-top: 145px;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
}

.div-block-12 {
  width: 100%;
  max-width: 720px;
  margin-bottom: 115px;
  margin-left: auto;
  margin-right: auto;
}

.text-span-3 {
  margin-top: 5px;
  font-size: 12px;
  display: block;
}

.image-5 {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
}

.image-5._1 {
  max-width: 645px;
}

.image-5._2 {
  max-width: 960px;
}

.image-5._3 {
  max-width: 100%;
}

.image-5._4 {
  max-width: 721px;
  height: 100%;
}

.lightbox-link-3 {
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.lightbox-flex {
  grid-column-gap: 46px;
  grid-row-gap: 46px;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: flex-start center;
  display: flex;
}

.lightbox-flex.margin {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 46px;
}

.lightbox-flex.margin-2 {
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 46px;
}

.lightbox-flex.margin-2.grid {
  grid-column-gap: 46px;
  grid-row-gap: 46px;
  grid-template-rows: auto;
  grid-template-columns: 1.75fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.final-grid {
  grid-column-gap: 46px;
  grid-row-gap: 46px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 960px;
  margin-top: 46px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.final-grid._2 {
  grid-column-gap: 34px;
  grid-row-gap: 34px;
  grid-template-columns: 1fr 2.25fr;
}

.shemanbgimg {
  width: 100%;
  height: auto;
  display: block;
}

.div-block-13 {
  width: 100%;
  max-width: 805px;
  margin: 140px auto;
}

.paragraph-4 {
  text-align: left;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
}

.heading-6 {
  text-align: right;
}

.div-block-14 {
  background-color: #ff6e1f;
  width: 100%;
}

.image-6 {
  width: 411px;
  display: block;
}

.div-block-15 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  padding-top: 65px;
  padding-bottom: 65px;
  display: flex;
}

.product-img {
  width: 100%;
  max-width: 1200px;
  margin-top: 120px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.product-img._2 {
  max-width: none;
  margin-top: 20px;
}

.product-img._2.mob {
  display: none;
}

.product-img._3 {
  max-width: 85%;
  margin-top: -54px;
  margin-bottom: -40px;
}

.product-img.no-margin {
  max-width: 100%;
  margin-top: 0;
}

.product-img.some-margin {
  max-width: 100%;
  margin-top: 100px;
}

.product-img.some-margin.mobile {
  display: none;
}

.div-block-16 {
  background-color: #f2ceff;
  padding-top: 20px;
  padding-bottom: 20px;
}

.image-7 {
  width: 90%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.background-viideo {
  height: 850px;
  display: block;
}

.code-embed {
  width: 100%;
  display: block;
}

.bg-video-hide {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.bg-video-hide.hide {
  display: none;
}

.background-video {
  height: 940px;
}

.section--lostdot {
  display: block;
  overflow: hidden;
}

.div-block-17 {
  background-color: #d92029;
  justify-content: center;
  align-items: center;
  padding-top: 170px;
  padding-bottom: 140px;
  display: flex;
}

.div-block-18 {
  color: #fff;
  width: 625px;
  margin-left: auto;
  margin-right: auto;
}

.paragraph-5 {
  text-align: left;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
}

.div-block-19 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 130px;
  padding-left: 100px;
  padding-right: 100px;
  display: grid;
}

.gif {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.video--wrapper {
  margin-top: 75px;
}

.video--item {
  z-index: -1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  margin-top: 40px;
  display: flex;
}

.video--item.hide {
  display: none;
}

.code-embed-2 {
  z-index: -1;
  border: 1px solid #000;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 820px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.code-embed-2.hide {
  display: none;
}

.header-begastby {
  padding-top: 350px;
  padding-bottom: 300px;
}

.big-heading {
  color: #fff;
  text-align: center;
  font-family: Gt Super Display Trial, Arial, sans-serif;
  font-size: 5.9375rem;
  font-weight: 500;
  line-height: 100px;
}

.text-span-4 {
  font-style: italic;
}

.div-block-20 {
  padding-left: 100px;
  padding-right: 100px;
}

.div-block-20._2 {
  margin-top: 130px;
}

.div-block-20._3 {
  background-color: #fff;
  margin-top: 130px;
  padding-top: 80px;
  padding-bottom: 100px;
}

.begatsby-heading {
  color: #fff;
  font-family: Gt Super Display Trial, Arial, sans-serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
}

.begatsby-heading.b {
  color: #000;
}

.p-text {
  color: #fff;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 26px;
}

.p-text.center {
  color: #fff;
  text-align: center;
  margin-top: 70px;
}

.p-text.b {
  color: #000;
}

.p-text._2 {
  color: #4789a7;
  text-transform: none;
  max-width: 670px;
  font-weight: 300;
}

.p-text.u {
  text-transform: none;
}

.middle-wrapper {
  padding-top: 100px;
}

.bagetsby-video {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.bagetsby-video-bg {
  mix-blend-mode: lighten;
  width: 100%;
}

.image-8 {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.video-title {
  color: #000;
  font-size: 1.5rem;
  font-weight: 600;
}

.video-title.white {
  color: #fff;
}

.eutonal-wrapper {
  margin-top: 0;
}

.top {
  padding-top: 180px;
  padding-bottom: 160px;
  position: relative;
  overflow: hidden;
}

.banner-e {
  width: 100%;
  max-width: 956px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.banner-txt-wrappr {
  width: 920px;
  margin-top: 220px;
  margin-left: auto;
  margin-right: auto;
}

.banner-txt-wrappr._2 {
  width: 682px;
  margin-top: 0;
}

.banner-txt-wrappr._3 {
  width: 815px;
  margin-top: 240px;
}

.eutnal-heading {
  color: #fff;
  font-variation-settings: "wdth" 600;
  margin-bottom: 40px;
  font-family: Trial Metamorbitvf, Arial, sans-serif;
  font-size: 1.4375rem;
}

.eutnal-heading.center {
  text-align: center;
}

.eutnal-heading.big {
  font-variation-settings: "wdth" 200;
  font-size: 4.4375rem;
  line-height: 100px;
}

.eutnal-heading.lm {
  margin-bottom: 20px;
}

.paragraph-7 {
  color: #fff;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
}

.paragraph-7._2 {
  width: 316px;
  font-size: .875rem;
  font-weight: 500;
}

.image-9 {
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.overlay {
  opacity: .8;
  pointer-events: none;
  -webkit-text-fill-color: inherit;
  mix-blend-mode: hard-light;
  background-clip: border-box;
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  inset: 0%;
}

.overlay._2 {
  height: 1165px;
}

.overlay.laptop {
  opacity: 1;
  mix-blend-mode: hard-light;
}

.overlay._3 {
  height: 1300px;
}

.overlay.vid {
  height: 995px;
  display: none;
  inset: auto 0% 0%;
}

.bg-video-1 {
  width: 100%;
  height: 1165px;
  margin-top: 144px;
}

.background-video-2 {
  width: 100%;
  height: 100%;
}

.bg-video-3 {
  width: 1060px;
  height: 590px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}

.mid {
  position: relative;
}

.div-block-21 {
  padding-top: 140px;
  padding-bottom: 140px;
  position: relative;
}

.nft-shop {
  grid-column-gap: 70px;
  grid-row-gap: 70px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  display: grid;
}

.image-10 {
  display: block;
}

.image-11 {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.star {
  display: block;
  position: absolute;
  inset: -13% 0% auto auto;
}

.star._2 {
  top: 11%;
}

.star._3 {
  inset: auto auto -7% 0%;
}

.laptopimage {
  background-color: #101010;
  margin-top: 71px;
  position: relative;
  overflow: hidden;
}

.color-wrap {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 995px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.vertical--video-wrap {
  padding-top: 100px;
  padding-bottom: 60px;
  position: relative;
}

.video-grid {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 1153px;
  margin-top: 270px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.video-wrap {
  width: 324px;
  height: 580px;
}

.background-video-3 {
  width: 100%;
  height: 100%;
}

.icon-wrap {
  margin-top: 64px;
  padding-top: 140px;
  position: relative;
}

.icon {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block-22 {
  grid-column-gap: 55px;
  grid-row-gap: 55px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.div-block-23 {
  justify-content: space-between;
  margin-top: 70px;
  display: flex;
}

.player {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block-24 {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.div-block-25 {
  position: relative;
}

.image-12 {
  z-index: 0;
  position: absolute;
  inset: -16% -25% auto auto;
}

.eitermal-video {
  position: relative;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.burger-1 {
  cursor: pointer;
  background-color: #fff;
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  display: flex;
  position: relative;
  box-shadow: 6px 6px 25px #28078026;
}

.b1-bar1 {
  background-color: #858eca;
  width: 30px;
  height: 4px;
}

.b1-bar2 {
  background-color: #858eca;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: flex;
}

.b1-middle {
  background-color: #858eca;
  width: 4px;
  height: 0;
}

.b1-bar3 {
  background-color: #858eca;
  width: 30px;
  height: 4px;
}

.div-block-26 {
  width: 100%;
  max-width: 728px;
}

.div-block-28 {
  width: 100%;
  max-width: 1030px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.text-span-5 {
  font-size: 1.1rem;
  display: inline;
}

.image-13 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.lost-dot-video {
  border: 1px solid #000;
  margin-top: 50px;
  overflow: hidden;
}

.video {
  left: -1px;
}

.gif-wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.shemanbg {
  height: 900px;
}

.shemanbgvideo {
  object-fit: cover;
  height: 100%;
}

.subscript {
  font-weight: 500;
}

.image-15 {
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
}

._670width {
  grid-column-gap: 220px;
  grid-row-gap: 220px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 670px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  display: flex;
}

.section-top {
  padding-top: 260px;
  padding-bottom: 150px;
}

.section-mid {
  padding-top: 70px;
}

.white-24 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 600;
}

.white-24.b {
  color: #000;
  font-weight: 600;
}

.imagegrid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 80px;
  margin-left: -15px;
  display: grid;
}

.image-16 {
  width: 350px;
  max-width: 100%;
  display: block;
}

.image-16._1 {
  width: 360px;
  max-width: 105%;
}

.portal-img {
  width: 100%;
  max-width: 970px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.margin {
  margin-top: 110px;
}

.fashion-img {
  width: 297px;
  max-width: 24%;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.fashion-img._2 {
  width: 28%;
  max-width: 28%;
}

.div-block-29 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center stretch;
  padding-top: 80px;
  display: grid;
}

.laptop {
  width: 100%;
  max-width: 890px;
  margin-top: 0;
  margin-left: 0;
  margin-right: auto;
  display: block;
  position: absolute;
  inset: -2% auto auto -12%;
}

.laptop._2 {
  width: 28%;
  max-width: 28%;
}

.laptop._22 {
  margin-left: auto;
  margin-right: 0;
  inset: 24% -12% auto auto;
}

.laptop._3 {
  margin-left: auto;
  margin-right: auto;
  inset: auto 0% -10%;
}

.div-block-29-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  height: 167vh;
  margin-top: 60px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.video-wrapper {
  margin-top: 100px;
}

.video-wrapper._100 {
  margin-top: 140px;
}

.div-block-30 {
  margin-top: 70px;
}

.section-f-top {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.flurry-img {
  width: 100%;
  max-width: 886px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-31 {
  padding-top: 190px;
  padding-bottom: 230px;
}

.div-block-32 {
  background-image: url('../images/Rectangle-2485.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  padding-top: 125px;
  padding-bottom: 145px;
}

.g1 {
  grid-column-gap: 81px;
  grid-row-gap: 81px;
  justify-content: center;
  align-items: flex-end;
  margin-top: 80px;
  display: flex;
}

.g1.grid {
  grid-column-gap: 75px;
  grid-row-gap: 75px;
  grid-template-rows: auto;
  grid-template-columns: 2fr 2fr .75fr .75fr;
  grid-auto-columns: 1fr;
  place-items: center;
  margin-top: 20px;
  margin-left: -15px;
  margin-right: -15px;
  display: grid;
}

.image-17 {
  aspect-ratio: auto;
  width: 100%;
  max-width: 100%;
  display: block;
  position: static;
}

.image-17._2 {
  text-align: center;
  width: 100%;
  max-width: 22%;
}

.image-17._1 {
  max-width: none;
}

.image-17._22 {
  aspect-ratio: auto;
  object-fit: cover;
  max-width: 21%;
}

.image-17._22.mid {
  max-width: 24.5%;
}

.image-17._22._1 {
  max-width: 250px;
}

.image-17._22._33 {
  max-width: 20%;
}

.insta {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.bg-vid {
  aspect-ratio: auto;
  width: 120%;
  height: 118%;
  margin-left: 0;
  padding-left: 0;
  position: absolute;
  inset: 0% 0% 0% 2%;
  overflow: visible;
}

.bg-vid._1 {
  width: 130%;
  height: 107%;
}

.video-wrapp {
  justify-content: center;
  align-items: center;
  width: 360px;
  height: 360px;
  padding-left: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.video-wrapp._2 {
  width: 360px;
  height: 345px;
  margin-left: -50px;
}

.video-wrapp._2._3 {
  margin-left: 0;
}

.video-wrapp._1 {
  height: 360px;
}

.video-wrapp._11 {
  height: 360px;
  margin-left: 0;
  left: 29px;
}

.video-wrapp._8 {
  width: 360px;
  height: 345px;
  margin-left: -50px;
}

.video-wrapp._8._3 {
  margin-left: 0;
}

.video-wrapp._7 {
  width: 360px;
  height: 345px;
  margin-left: -31px;
}

.video-wrapp._7._3 {
  margin-left: 0;
}

.portal-vide {
  max-width: 970px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.video-wra2 {
  width: 323px;
  height: 550px;
  position: relative;
  overflow: hidden;
}

.background-video-4 {
  width: 150%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.background-video-4._2 {
  width: 200%;
  margin-left: -240px;
}

.background-video-4._3 {
  width: 168%;
  margin-left: -160px;
}

.lapto-1 {
  width: 105%;
  left: 0;
}

.lapto-1._1 {
  left: -66px;
}

.lapto-1._2 {
  left: 53px;
}

.laptopvi {
  z-index: 2;
  width: 100%;
  max-width: 700px;
  position: relative;
}

.laptopvi._2 {
  z-index: 1;
  align-self: flex-end;
  margin-top: -225px;
}

.laptopvi._3 {
  align-self: center;
}

.fig-video {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 650px;
  display: flex;
  position: relative;
}

.fig-vides {
  width: 140%;
  height: 100%;
  margin-left: 0;
  display: block;
  position: relative;
  left: 100px;
}

.fig-vides._2 {
  width: 149%;
  height: 98%;
}

.text-block-3 {
  color: #fff;
  text-transform: uppercase;
  margin-left: 100px;
  font-size: 1.1625rem;
}

.bird-img {
  width: 100%;
  max-width: 220px;
  height: 300px;
  overflow: visible;
}

.bold-text {
  font-weight: 600;
}

.bold-text-2 {
  font-weight: 500;
}

.div-block-33 {
  display: none;
}

@media screen and (min-width: 1280px) {
  .body.about {
    overflow: visible;
  }

  .div-block-3 {
    margin-top: -130px;
  }

  .skills-and-academic-wrapper {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }
}

@media screen and (min-width: 1440px) {
  .body.about {
    overflow: visible;
  }

  .about-wrapper {
    padding-top: 100px;
  }
}

@media screen and (max-width: 991px) {
  .container {
    max-width: 95%;
  }

  .container.navbar-container {
    max-width: 100%;
    padding-left: 20px;
  }

  .container._2 {
    max-width: 86%;
  }

  .navbar {
    display: flex;
  }

  .navlink {
    font-size: 1.1rem;
  }

  .heading {
    font-size: 1.2rem;
  }

  .text-block {
    font-size: 1.1rem;
    line-height: 23px;
  }

  .about-wrapper {
    height: auto;
    padding-top: 60px;
    padding-bottom: 20px;
  }

  .about-details {
    font-size: 1.7rem;
  }

  .about-details._2 {
    margin-top: 0;
    font-size: 1rem;
  }

  .div-block-3 {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .heading-2.width {
    width: 132px;
    font-size: 1.1rem;
  }

  .paragraph {
    font-size: 1rem;
  }

  .skills-and-academic {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .skills-and-academic-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .wright--img {
    width: 80%;
  }

  .div-block-4 {
    max-width: none;
  }

  .heading-3 {
    font-size: 2rem;
  }

  .barlow-white {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 32px;
  }

  .barlow-white._2 {
    margin-top: 20px;
  }

  .image._1 {
    object-fit: cover;
    height: 100%;
    position: static;
  }

  .other-project-wrapper {
    margin-top: 140px;
    margin-bottom: 100px;
  }

  .image-2 {
    height: 135px;
  }

  .paragraph-2 {
    font-size: .8rem;
    line-height: 19px;
  }

  .div-block-7 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .flowerboy-heading {
    font-size: 5rem;
  }

  .monts--p {
    font-size: 1.1rem;
  }

  .flowerboy-images-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .paragraph-3 {
    margin-top: 100px;
  }

  .div-block-12 {
    margin-bottom: 60px;
  }

  .lightbox-flex {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .lightbox-flex.margin, .lightbox-flex.margin-2 {
    margin-top: 30px;
  }

  .lightbox-flex.margin-2.grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 30px;
  }

  .final-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    max-width: 95%;
    margin-top: 30px;
  }

  .final-grid._2 {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 30px;
  }

  .div-block-13 {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .image-6 {
    width: 224px;
  }

  .div-block-15 {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .product-img {
    max-width: 85%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .product-img.some-margin {
    margin-bottom: 0;
  }

  .image-7 {
    width: 96%;
    max-width: 96%;
  }

  .background-viideo {
    height: 600px;
  }

  .background-video {
    height: 100%;
  }

  .div-block-17 {
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .div-block-19 {
    padding-top: 90px;
    padding-left: 60px;
    padding-right: 60px;
  }

  .gif {
    text-align: center;
    width: 107%;
    max-width: 107%;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .header-begastby {
    padding-top: 220px;
    padding-bottom: 220px;
  }

  .big-heading {
    font-size: 4rem;
    line-height: 92px;
  }

  .div-block-20 {
    padding-left: 60px;
    padding-right: 60px;
  }

  .div-block-20._3 {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .p-text {
    max-width: 500px;
    font-size: 1.4rem;
    line-height: 33px;
  }

  .p-text._2 {
    font-size: 1.2rem;
    line-height: 29px;
  }

  .bagetsby-video {
    width: 500px;
    height: 440px;
  }

  .bagetsby-video-bg {
    height: 100%;
  }

  .top {
    padding-top: 120px;
    padding-bottom: 40px;
  }

  .banner-e {
    max-width: 600px;
  }

  .banner-txt-wrappr {
    width: 89%;
    margin-top: 100px;
  }

  .banner-txt-wrappr._3 {
    width: 90%;
  }

  .eutnal-heading {
    margin-bottom: 20px;
    font-size: 1.1rem;
  }

  .eutnal-heading.big {
    font-size: 2.6rem;
    line-height: 59px;
  }

  .paragraph-7 {
    font-size: 1rem;
    line-height: 23px;
  }

  .paragraph-7._2 {
    width: 315px;
    font-size: .7rem;
    line-height: 22px;
  }

  .overlay {
    height: 2595px;
  }

  .bg-video-1 {
    height: 600px;
    margin-top: 100px;
  }

  .bg-video-3 {
    width: 550px;
    height: 285px;
  }

  .nft-shop {
    grid-column-gap: 41px;
    grid-row-gap: 41px;
  }

  .image-11 {
    margin-top: 60px;
  }

  .star {
    width: 12%;
    top: -12%;
  }

  .star._2 {
    top: 3%;
  }

  .color-wrap {
    max-width: 700px;
  }

  .video-grid {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    max-width: 700px;
    margin-top: 100px;
  }

  .video-wrap {
    width: 206px;
    height: 330px;
  }

  .icon-wrap {
    margin-top: 60px;
    padding-top: 60px;
  }

  .icon {
    width: 90%;
    margin-top: 60px;
  }

  .div-block-24 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .image-12 {
    width: 45%;
    max-width: 45%;
    top: -15%;
    right: -14%;
  }

  .div-block-26 {
    max-width: none;
  }

  .div-block-27 {
    margin-top: 20px;
  }

  .div-block-28 {
    max-width: 730px;
  }

  .wright-line-logo {
    width: 79%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .gif-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .image-14 {
    width: 65%;
    max-width: 65%;
  }

  .shemanbg {
    height: 400px;
  }

  .white-24 {
    font-size: 18px;
    line-height: 31px;
  }

  .imagegrid {
    grid-template-columns: 1fr 1fr;
  }

  .div-block-29 {
    overflow: hidden;
  }

  .div-block-29-2 {
    margin-top: 20px;
  }

  .g1 {
    grid-column-gap: 21px;
    grid-row-gap: 21px;
  }

  .g1.grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .bg-vid._1 {
    width: 125%;
    height: 100%;
    left: 0%;
  }

  .video-wrapp._2, .video-wrapp._7 {
    margin-left: 0;
  }

  .portal-vide {
    max-width: 600px;
  }

  .video-wra2 {
    width: 206px;
    height: 330px;
  }

  .background-video-4._2 {
    margin-left: -136px;
  }

  .background-video-4._3 {
    margin-left: -53px;
  }

  .lapto-1 {
    width: 100%;
  }

  .lapto-1._1 {
    width: 100%;
    left: 0;
  }

  .lapto-1._2 {
    left: 0;
  }

  .laptopvi {
    max-width: 100%;
    height: 70%;
  }

  .laptopvi._2 {
    margin-top: -45px;
  }

  .laptopvi._3 {
    margin-top: -39px;
  }

  .fig-video {
    width: 240px;
    height: 460px;
  }

  .fig-vides {
    width: 100%;
    left: 43px;
  }

  .text-block-3 {
    margin-left: 40px;
  }
}

@media screen and (max-width: 767px) {
  .container.navbar-container {
    padding-left: 10px;
    padding-right: 0;
  }

  .brand {
    padding-left: 0;
  }

  .section-projects {
    padding-top: 30px;
  }

  .project-wrapp {
    flex-flow: column;
  }

  .grid-project-items {
    height: 425px;
  }

  .grid-project-items.big {
    order: 1;
  }

  .grid-project-items._1 {
    order: 0;
  }

  .project--image {
    aspect-ratio: auto;
    object-fit: cover;
    height: 100%;
  }

  .project--image.mob {
    display: block;
  }

  .project--image.desk, .project--text {
    display: none;
  }

  .text-block {
    font-size: 1rem;
  }

  .about-wrapper {
    padding-bottom: 10px;
  }

  .about-details {
    font-size: 1.3rem;
    line-height: 34px;
  }

  .div-block-3 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .heading-2.width, .paragraph {
    font-size: 1rem;
  }

  .skills-and-academic {
    grid-column-gap: 19px;
    grid-row-gap: 19px;
  }

  .wright-body-wrappr {
    padding-top: 60px;
  }

  .wright--img, .div-block-4 {
    margin-top: 40px;
  }

  .heading-3 {
    font-size: 1.5rem;
    line-height: 40px;
  }

  .barlow-white {
    font-size: 1.2rem;
    line-height: 29px;
  }

  .barlow-white._2 {
    font-size: 1rem;
    line-height: 20px;
  }

  .other-project-wrapper {
    margin-top: 100px;
    margin-bottom: 60px;
  }

  .flowerboy-wrapper {
    padding-top: 40px;
  }

  .flowerboy-heading {
    font-size: 4.1rem;
    line-height: 85px;
  }

  .flowerboy-top-img {
    width: 70%;
    margin-top: 20px;
  }

  .div-block-9 {
    margin-top: 60px;
  }

  .div-block-10 {
    max-width: 75%;
  }

  .div-block-11.mbottom {
    margin-bottom: 40px;
  }

  .monts--p {
    font-size: 1rem;
    line-height: 22px;
  }

  .flowerboy-images {
    margin-top: 80px;
  }

  .flowerboy-images-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .heading-black {
    font-size: 1.1rem;
  }

  .barleier-logo {
    width: 80%;
    max-width: 80%;
    margin-top: 100px;
  }

  .image-4 {
    width: 90%;
    margin-top: -41px;
  }

  .paragraph-3 {
    margin-top: 60px;
    font-size: 1.2rem;
  }

  .div-block-12 {
    max-width: 85%;
  }

  .div-block-13 {
    margin-top: 60px;
    margin-bottom: 60px;
    font-size: .8rem;
  }

  .paragraph-4 {
    font-size: 1.4rem;
  }

  .div-block-15 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .product-img._3 {
    object-fit: cover;
    margin-top: -20px;
    margin-bottom: -65px;
  }

  .background-viideo {
    height: 500px;
  }

  .div-block-17 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .div-block-18 {
    width: 80%;
  }

  .div-block-19 {
    padding-top: 60px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-begastby {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .big-heading {
    font-size: 2.9rem;
    line-height: 76px;
  }

  .div-block-20 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-block-20._2 {
    flex-flow: column;
    align-items: stretch;
    margin-top: 40px;
    display: block;
  }

  .div-block-20._3 {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .begatsby-heading {
    font-size: 1.1rem;
    line-height: 27px;
  }

  .p-text {
    text-align: left;
    max-width: none;
    font-size: 1rem;
    line-height: 29px;
  }

  .p-text.center {
    text-align: left;
    margin-top: 20px;
  }

  .p-text.b {
    font-weight: 100;
  }

  .p-text._2 {
    max-width: 80%;
  }

  .middle-wrapper {
    padding-top: 40px;
  }

  .video-title {
    font-size: 1.1rem;
    line-height: 28px;
  }

  .banner-e {
    max-width: 450px;
  }

  .banner-txt-wrappr._2 {
    width: auto;
  }

  .eutnal-heading {
    font-size: .9rem;
    line-height: 33px;
  }

  .overlay._22 {
    height: 100%;
    inset: 0%;
  }

  .bg-video-3 {
    width: 400px;
    height: 180px;
  }

  .nft-shop {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .color-wrap {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 500px;
  }

  .video-grid {
    flex-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .icon-wrap {
    padding-left: 30px;
    padding-right: 30px;
  }

  .icon {
    width: 100%;
  }

  .div-block-23 {
    grid-column-gap: 33px;
    grid-row-gap: 33px;
  }

  .burger-1 {
    width: 40px;
    height: 40px;
    box-shadow: none;
    background-color: #fff0;
  }

  .b1-bar1 {
    background-color: #000;
  }

  .b1-bar1.white {
    background-color: #fff;
  }

  .b1-bar2 {
    background-color: #000;
  }

  .b1-bar2.white {
    background-color: #fff;
  }

  .b1-bar3 {
    background-color: #000;
  }

  .b1-bar3.white {
    background-color: #fff;
  }

  .menu-button {
    padding: 10px;
  }

  .menu-button.w--open {
    background-color: #c8c8c800;
  }

  .nav-menu {
    background-color: #fff;
  }

  .div-block-28 {
    max-width: 95%;
  }

  .menu-button-2, .menu-button-2.w--open {
    background-color: #c8c8c800;
  }

  .nav-menu-2 {
    background-color: var(--wright-airplane);
  }

  .lost-dot-video {
    margin-top: 20px;
  }

  .shemanbg {
    height: 300px;
  }

  .margin {
    margin-top: 60px;
  }

  .div-block-29 {
    flex-flow: column;
    display: flex;
  }

  .div-block-29-2 {
    justify-content: space-between;
    height: 125vh;
    padding-top: 50px;
  }

  .video-wrapper {
    margin-top: 40px;
  }

  .div-block-31 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .div-block-32 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .g1 {
    margin-top: 40px;
  }

  .insta {
    max-width: 80%;
    margin-top: 40px;
  }

  .lapto-1 {
    height: 75%;
  }

  .lapto-1._1 {
    height: 70%;
  }

  .lapto-1._2 {
    height: 74%;
  }

  .laptopvi {
    width: 100%;
    max-width: 100%;
    height: 78%;
  }

  .laptopvi._2 {
    margin-top: -100px;
  }

  .laptopvi._3 {
    width: 95%;
    max-width: 95%;
    margin-top: -106px;
  }
}

@media screen and (max-width: 479px) {
  .container {
    max-width: 90%;
    padding-left: 0;
    padding-right: 0;
  }

  .container.about {
    max-width: 95%;
  }

  .grid-project-items {
    height: auto;
  }

  .footer {
    margin-top: 20px;
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .div-block-2 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .about-wrapper {
    padding-top: 30px;
  }

  .about-details {
    font-size: 1.2rem;
    line-height: 29px;
  }

  .about-details._2 {
    font-size: .9rem;
    line-height: 23px;
  }

  .about-details._2.mb {
    margin-top: 60px;
    display: block;
  }

  .about-details._2.ds {
    display: none;
  }

  .div-block-3 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .heading-2.width {
    width: 132px;
    font-size: .9rem;
    line-height: 19px;
  }

  .paragraph {
    width: auto;
    font-size: .8rem;
    line-height: 23px;
  }

  .paragraph.ab {
    width: 100%;
    max-width: 100%;
  }

  .skills-and-academic {
    grid-column-gap: 16px;
    grid-row-gap: 20px;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .div-block-4 {
    margin-top: 60px;
  }

  .barlow-white.b {
    line-height: 28px;
  }

  .wright-images {
    margin-top: 60px;
  }

  .lightbox-grid {
    flex-flow: column;
    display: flex;
  }

  .other-project-wrapper {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .heading-white {
    font-size: .8rem;
    line-height: 29px;
  }

  .image-2 {
    margin-bottom: 10px;
  }

  .paragraph-2 {
    font-size: .7rem;
  }

  .paragraph-2._2 {
    font-size: .5rem;
    line-height: 11px;
  }

  .paragraph-2._2.b {
    font-size: .53rem;
    line-height: 11px;
  }

  .paragraph-2.b {
    line-height: 15px;
  }

  .div-block-6 {
    line-height: 24px;
  }

  .div-block-7 {
    grid-column-gap: 11px;
    grid-row-gap: 25px;
    grid-template-columns: 1fr 1fr;
  }

  .flowerboy-heading {
    font-size: 2.5rem;
    line-height: 50px;
  }

  .div-block-11.mbottom {
    margin-bottom: 34px;
  }

  .image-3 {
    width: 25%;
    max-width: 65px;
    margin-bottom: 10px;
  }

  .monts--p {
    font-size: .9rem;
  }

  .text-block-2 {
    font-size: .6rem;
  }

  .flowerboy-images-grid {
    grid-template-columns: 1fr;
  }

  .heading-black {
    font-size: .8rem;
    line-height: 30px;
  }

  .barleier-logo {
    width: 90%;
    max-width: 90%;
    margin-top: 60px;
  }

  .image-4 {
    margin-top: -29px;
  }

  .paragraph-3 {
    letter-spacing: 0;
    margin-top: 50px;
    font-size: 1.1rem;
    line-height: 25px;
  }

  .div-block-12 {
    max-width: 85%;
  }

  .lightbox-flex, .lightbox-flex.margin-2 {
    flex-flow: column;
  }

  .lightbox-flex.margin-2.grid, .final-grid {
    flex-flow: column;
    display: flex;
  }

  .shemanbgimg {
    object-fit: cover;
    height: 35vh;
  }

  .paragraph-4 {
    font-size: 1.1rem;
    line-height: 26px;
  }

  .image-6 {
    width: 180px;
  }

  .div-block-15 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }

  .product-img {
    max-width: 100%;
  }

  .product-img._2.desk {
    display: none;
  }

  .product-img._2.mob {
    display: block;
  }

  .product-img.some-margin.mobile {
    display: none;
  }

  .product-img.some-margin.desk {
    display: block;
  }

  .image-7 {
    width: 100%;
    max-width: 100%;
  }

  .background-viideo {
    height: 300px;
  }

  .paragraph-5 {
    font-size: .9rem;
  }

  .div-block-19 {
    grid-column-gap: 9px;
    grid-row-gap: 9px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-left: -11px;
    margin-right: -11px;
    padding: 60px 0 20px;
    display: grid;
  }

  .gif {
    width: 109%;
    max-width: 109%;
  }

  .video--wrapper {
    margin-top: 40px;
  }

  .video--item {
    margin-top: 20px;
  }

  .big-heading {
    font-size: 2.2rem;
  }

  .div-block-20 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .div-block-20._3 {
    margin-top: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .begatsby-heading.b {
    margin-bottom: 5px;
  }

  .p-text {
    font-size: 1rem;
    line-height: 28px;
  }

  .p-text._2 {
    font-size: 1rem;
    line-height: 26px;
  }

  .bagetsby-video {
    width: 340px;
    height: 255px;
    margin-left: auto;
    margin-right: auto;
  }

  .image-8.m {
    display: none;
  }

  .video-title, .video-title.white {
    font-size: .9rem;
  }

  .top {
    padding-top: 60px;
  }

  .banner-e {
    max-width: 90%;
  }

  .banner-txt-wrappr {
    margin-top: 60px;
  }

  .banner-txt-wrappr._3.l {
    margin-top: 100px;
  }

  .eutnal-heading.big {
    font-size: 1.7rem;
    line-height: 43px;
  }

  .paragraph-7 {
    font-size: .8rem;
    line-height: 22px;
  }

  .paragraph-7._2 {
    width: auto;
    padding-right: 50px;
  }

  .image-9 {
    margin-top: 60px;
  }

  .overlay, .overlay._22 {
    display: none;
  }

  .bg-video-1 {
    height: 300px;
    margin-top: 70px;
  }

  .bg-video-3 {
    width: 320px;
  }

  .div-block-21 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .nft-shop {
    grid-template-columns: 1fr 1fr;
  }

  .star {
    top: -1%;
  }

  .star._2 {
    top: 9%;
  }

  .star._3 {
    bottom: 3%;
  }

  .laptopimage {
    margin-top: 0;
  }

  .color-wrap {
    flex-flow: column;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  .video-wrap {
    width: 300px;
    height: 500px;
  }

  .icon-wrap {
    margin-top: 0;
    padding-top: 10px;
  }

  .div-block-22 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .div-block-23 {
    grid-column-gap: 73px;
    grid-row-gap: 73px;
    flex-flow: column;
    margin-top: 40px;
  }

  .player {
    width: 100%;
    max-width: 100%;
    margin-top: 40px;
  }

  .div-block-24 {
    width: 80%;
  }

  .image-12 {
    width: 46%;
    max-width: 46%;
    display: block;
    top: -10%;
    right: -15%;
  }

  .menu-button {
    padding-left: 5px;
    padding-right: 5px;
  }

  .div-block-27 {
    margin-top: 10px;
  }

  .div-block-28 {
    max-width: 90%;
  }

  .text-span-5 {
    font-size: .7rem;
    line-height: 13px;
  }

  .nav-menu-3 {
    background-color: var(--second-black);
  }

  .nav-menu-3.mbl {
    background-color: var(--main-black);
  }

  .image-14 {
    width: 100%;
    max-width: 100%;
  }

  .shemanbg {
    height: 280px;
  }

  .superscript {
    line-height: 12px;
  }

  ._670width {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .section-top {
    padding-top: 140px;
    padding-bottom: 100px;
  }

  .white-24 {
    font-size: 16px;
  }

  .white-24.b {
    text-align: left;
    font-size: 1rem;
  }

  .imagegrid {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    margin-top: 40px;
    margin-left: 10px;
  }

  .margin {
    margin-bottom: 60px;
  }

  .div-block-29 {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    padding-top: 20px;
  }

  .div-block-29-2 {
    grid-column-gap: 13px;
    grid-row-gap: 13px;
    justify-content: space-between;
    align-items: flex-start;
    height: auto;
    margin-top: 0;
    overflow: visible;
  }

  .video-wrapper {
    margin-top: 20px;
  }

  .video-wrapper._100 {
    margin-top: 100px;
  }

  .div-block-30 {
    margin-top: 20px;
  }

  .g1 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .g1.grid {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-top: 90px;
    display: flex;
  }

  .g1.m {
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .image-17 {
    width: 80%;
    max-width: 100%;
  }

  .image-17._2 {
    width: 83%;
    max-width: 100%;
  }

  .image-17._1 {
    object-fit: cover;
    width: 95%;
    height: 148px;
  }

  .image-17._1.ice {
    width: 40%;
    height: auto;
  }

  .image-17._22 {
    width: 100%;
    max-width: 85%;
    margin-right: 24px;
  }

  .image-17._22.mid {
    width: 100%;
    max-width: 100%;
    margin-right: -15px;
  }

  .image-17._22._33 {
    max-width: 85%;
    margin-right: 15px;
  }

  .insta {
    max-width: 100%;
    margin-top: 20px;
  }

  .bg-vid {
    width: 135%;
    height: 100%;
    left: 0%;
  }

  .bg-vid._1 {
    width: 154%;
  }

  .bg-vid._2m {
    width: 155%;
  }

  .video-wrapp {
    justify-content: center;
    align-items: center;
    width: 151px;
    height: 170px;
  }

  .video-wrapp._2 {
    width: 150px;
    height: 200px;
  }

  .video-wrapp._2._3 {
    width: 140px;
    height: 200px;
    left: -15px;
  }

  .video-wrapp._11 {
    height: 200px;
    left: 0;
  }

  .video-wrapp._7 {
    width: 160px;
    height: 170px;
  }

  .video-wrapp._1m {
    left: -13px;
  }

  .portal-vide {
    margin-top: 40px;
  }

  .video-wra2 {
    width: 300px;
    height: 200px;
  }

  .background-video-4._2 {
    margin-left: -64px;
  }

  .background-video-4._3 {
    margin-left: -56px;
  }

  .lapto-1 {
    width: 110%;
    height: 65%;
    margin-top: 0;
    left: -21px;
  }

  .lapto-1._1 {
    width: 105%;
    height: 100%;
    left: 0;
    overflow: hidden;
  }

  .lapto-1._2 {
    width: 105%;
    height: 100%;
  }

  .lapto-1._3 {
    width: 108%;
    height: 100%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    left: -15px;
    overflow: visible;
  }

  .laptopvi {
    width: 300px;
    max-width: 300px;
    height: 260px;
    overflow: visible;
  }

  .laptopvi._2 {
    width: 300px;
    max-width: 300px;
    height: 270px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
  }

  .laptopvi._3 {
    width: 300px;
    max-width: 300px;
    height: 265px;
    margin-top: 0;
    margin-bottom: 0;
    top: 0;
  }

  .fig-video {
    overflow: hidden;
  }

  .fig-vides {
    left: 35px;
  }

  .text-block-3 {
    margin-left: 10px;
  }

  .image-18 {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-33 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .image-19 {
    display: block;
  }
}

#w-node-afc748df-e46c-0fbe-0aa1-dbc38bea7598-0f66f9b0, #w-node-abfecdab-6da1-cc51-1e7a-afd059d67731-0f66f9b0, #w-node-fd9cdce7-ddc9-053c-2307-ddda65fa8a6d-0f66f9b0, #w-node-_77de3cda-4c99-0cff-a60f-53f8d8d6e9ef-8afd56cc, #w-node-_77de3cda-4c99-0cff-a60f-53f8d8d6e9f1-8afd56cc, #w-node-cde2f421-b532-6eca-de94-1b71e83a2395-8afd56cc, #w-node-ec7c38f6-c5eb-2b3a-0bde-57fe21d3bdca-8afd56cc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ec7c38f6-c5eb-2b3a-0bde-57fe21d3bdcb-8afd56cc {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-ec7c38f6-c5eb-2b3a-0bde-57fe21d3bdcc-8afd56cc, #w-node-e43456aa-befd-86f7-1c3c-c8a805e36799-8afd56cc, #w-node-e43456aa-befd-86f7-1c3c-c8a805e3679b-8afd56cc, #w-node-d90e60dc-4838-eeaf-8ea6-a122dd92e40b-8afd56cc, #w-node-d90e60dc-4838-eeaf-8ea6-a122dd92e40c-8afd56cc, #w-node-_08600307-7a2a-a240-c7cf-fb492dd0f214-8afd56cc, #w-node-_08600307-7a2a-a240-c7cf-fb492dd0f215-8afd56cc, #w-node-_485f1158-a317-1e85-35e7-404c92edb0cb-8afd56cc, #w-node-_485f1158-a317-1e85-35e7-404c92edb0cc-8afd56cc, #w-node-_485f1158-a317-1e85-35e7-404c92edb0cd-8afd56cc, #w-node-_485f1158-a317-1e85-35e7-404c92edb0ce-8afd56cc, #w-node-fd7b4fad-7815-f5a5-7d8c-479be2a022e0-21ff270e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Nextexitfot Webfont';
  src: url('../fonts/nextexitfot-light-webfont.woff.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: '7 C 9 F 4 E 538 Cc 03703206 D 1 D 74 C 35 Daa 38';
  src: url('../fonts/7c9f4e538cc03703206d1d74c35daa38.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oedoopro Book';
  src: url('../fonts/OEDooPro-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NeueHaasDisplayThin';
  src: url('../fonts/NeueHaasDisplayThin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NeueHaasDisplayXThin';
  src: url('../fonts/NeueHaasDisplayXThin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NeueHaasDisplayXXThinItalic';
  src: url('../fonts/NeueHaasDisplayXXThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NeueHaasDisplayXXThin';
  src: url('../fonts/NeueHaasDisplayXXThin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trial Metamorbitvf';
  src: url('../fonts/Trial_MetamorBitVF.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gt Super Text Book';
  src: url('../fonts/GT-Super-Text-Book-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Italic.otf') format('opentype'), url('../fonts/MDIOTrial-UltraItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial Ultra';
  src: url('../fonts/MDIOTrial-Ultra.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mdiotrial';
  src: url('../fonts/MDIOTrial-SemiboldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gt Super Display Trial';
  src: url('../fonts/GT-Super-Display-Medium-Trial.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gt Super Display Trial';
  src: url('../fonts/GT-Super-Display-Medium-Italic-Trial.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gt Super Text Trial';
  src: url('../fonts/GT-Super-Text-Regular-Trial.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gt Super Display Trial';
  src: url('../fonts/GT-Super-Display-Light-Trial.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gt Super Display Trial';
  src: url('../fonts/GT-Super-Display-Light-Italic-Trial.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Didot Title';
  src: url('../fonts/Didot-Title.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Didot';
  src: url('../fonts/Didot-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Didot';
  src: url('../fonts/Didot-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Didot';
  src: url('../fonts/Didot.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   About page — built to the Figma frame "Desktop - 17" (1440x1024)
   left margin 48px | bio col 762px | labels x=891 | values x=1045
   bio 35px/40px GT Super Text Book Italic #f20707
   all small text 20px/24px MD IO | block gap 30px | thanks baseline y=882
   ============================================================ */
@media screen and (min-width: 768px) {
  .about-wrapper {
    min-height: 0;
    height: calc(100svh - 71px);
    padding-top: min(8.06vw, 11.33vh, 150px);         /* 116px at 1440x1024 */
    padding-bottom: min(8.194vw, 11.523vh, 153px);    /* 118px -> thanks at y=882 */
    display: flex;
    flex-direction: column;
  }
  .about-wrapper > .container.about {
    width: 100%;
    height: 100%;
    max-width: 93.333%;                               /* 48px margins at 1440 */
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: 56.70% 37.28%;             /* bio | sidebar */
    column-gap: 6.02%;                                /* 762 -> 891 */
    grid-template-rows: auto 1fr;
  }
  .div-block-26 { grid-column: 1; grid-row: 1; max-width: none; }
  .div-block-3  { grid-column: 2; grid-row: 1 / span 2; align-self: end;
                  display: block; margin-top: 0; }
  .div-block-27 { grid-column: 1; grid-row: 2; align-self: end; margin-top: 0; }

  .about-details      { font-size: max(26px, min(2.431vw, 3.418vh, 46px)); line-height: 1.1428; max-width: none; }
  .about-details._2.ds{ font-size: max(15px, min(1.389vw, 1.953vh, 26px)); line-height: 1.2;
                        margin-top: 0; margin-bottom: 0; }
  .heading-2          { font-size: max(15px, min(1.389vw, 1.953vh, 26px)); line-height: 1.2; }
  .paragraph          { font-size: max(15px, min(1.389vw, 1.953vh, 26px)); line-height: 1.2;
                        width: 100%; max-width: none; }

  .skills-and-academic-wrapper {
    width: 100%; max-width: none;
    grid-row-gap: min(2.083vw, 2.93vh, 40px);         /* 30px at 1440x1024 */
  }
  .skills-and-academic {
    grid-template-columns: 30.74% 69.26%;             /* label col | value col */
    grid-column-gap: 0;
    align-items: start;
  }
}

/* ============================================================
   Case-study pages (the game projects).
   Built from the site's own scale: 24px/600 block titles,
   20px/300 body text, 15px captions, 110px between blocks.
   ============================================================ */
.fig { margin-top: 40px; }
.fig img, .fig video { width: 100%; display: block; }
.fig.narrow { max-width: 300px; margin-left: auto; margin-right: auto; }
.fig.tall { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---- equal-height row --------------------------------------
   Every item in a .row ends up exactly the same height, whatever
   its shape: each cell grows in proportion to its own aspect
   ratio (--ar = width / height), so a landscape screen and a
   portrait screen sit on one baseline with no gap below either.
   ------------------------------------------------------------ */
.row {
  grid-column-gap: 20px;
  align-items: flex-start;
  margin-top: 40px;
  display: flex;
}
.row > .cell {
  flex: var(--ar, 1) 1 0%;
  min-width: 0;
}
.row > .cell > img,
.row > .cell > video { width: 100%; display: block; }
.row.g40 { grid-column-gap: 40px; }

.cap {
  color: #fff;
  max-width: 46em;
  margin-top: 14px;
  margin-bottom: 0;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 20px;
  opacity: .66;
}

.why-list { grid-row-gap: 46px; margin-top: 44px; display: grid; }
.why-row {
  grid-column-gap: 60px;
  grid-row-gap: 12px;
  grid-template-columns: minmax(0, 260px) minmax(0, 700px);
  align-items: start;
  display: grid;
}
.why-label {
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 24px;
}
.why-text {
  color: #fff;
  margin: 0;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 26px;
}
.why-label.b, .why-text.b, .cap.b { color: #000; }

@media screen and (max-width: 991px) {
  .why-row { grid-template-columns: 1fr; }
  .why-label br { display: none; }
}
@media screen and (max-width: 767px) {
  .row { flex-flow: column; grid-row-gap: 28px; }
  .row > .cell { flex: 0 0 auto; width: 100%; }
  .row > .cell.port { max-width: 320px; margin-left: auto; margin-right: auto; }
  .fig, .row { margin-top: 28px; }
  .why-list { grid-row-gap: 34px; margin-top: 30px; }
  .why-label, .why-text { font-size: 1.0625rem; line-height: 23px; }
  .cap { font-size: .875rem; line-height: 19px; }
}

/* ---- banner hero (used where a game has key art wide enough to open on) ---- */
.section-top.banner { padding-top: 90px; padding-bottom: 130px; }
.hero-banner { margin-bottom: 120px; }
.hero-banner img { width: 100%; display: block; }

/* ---- video ---- */
.fig video, .row > .cell > video { background: #000; }

/* ---- live Spine showcase ---- */
.spine-stage {
  aspect-ratio: 16 / 9;
  background-image: radial-gradient(60% 70% at 50% 45%, #0e3a58 0%, #061722 68%, #03090f 100%);
  width: 100%;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
.spine-stage > div { position: absolute; inset: 0; }
.spine-controls {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  display: flex;
}
.spine-btn {
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #0000;
  border: 1px solid #ffffff3d;
  padding: 10px 17px;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  transition: all .15s;
}
.spine-btn:hover { border-color: #fff; }
.spine-btn.on { color: #000; background-color: #fff; border-color: #fff; }
.spine-note { opacity: .66; margin-top: 16px; }

@media screen and (max-width: 767px) {
  .spine-stage { aspect-ratio: 4 / 5; }
  .spine-btn { padding: 8px 12px; font-size: .8125rem; }
  .hero-banner { margin-bottom: 70px; }
  .section-top.banner { padding-top: 46px; padding-bottom: 70px; }
}

/* ---- labelled cells (before / after, screen names) ---- */
.cell .tag {
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .45;
  margin: 0 0 12px;
  font-family: Mdiotrial, Arial, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
}
.cell .tag.now { opacity: 1; }
.cell.framed > img, .cell.framed > video, .fig.framed img {
  outline: 1px solid #ffffff1f;
  outline-offset: -1px;
}
@media screen and (max-width: 767px) {
  .cell .tag { font-size: .75rem; margin-bottom: 8px; }
}

/* ---- Wild Wet rig: plain black stage ---- */
.ww-rig { margin-top: 28px; position: relative; }
.spine-stage.ww { background: #000; aspect-ratio: 2.2 / 1; margin-top: 0; }
.ww-rig .spine-controls { margin-top: 12px; }
.ww-rig + .spine-note { margin-top: 12px; }
@media screen and (min-width: 768px) {
  /* the buttons sit inside the frame, so the rig reads as one interactive object */
  .ww-rig .spine-controls { position: absolute; left: 20px; bottom: 20px; right: 20px; margin-top: 0; z-index: 2; }
  /* soft dark edges, so anything entering or leaving the frame dissolves rather than being cut */
  .spine-stage.ww canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  }
}
.spine-stage .spine-wait {
  color: #fff; opacity: .55; letter-spacing: .14em; text-transform: uppercase;
  font-size: .8125rem; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.spine-stage.ready .spine-wait { display: none; }
.spine-controls .spine-gap { flex: 0 0 14px; }
.spine-btn.act { border-color: #ffffff8c; }
.spine-btn:disabled, .spine-btn:disabled:hover { opacity: .3; cursor: default; border-color: #ffffff3d; }
@media screen and (max-width: 767px) {
  .spine-controls .spine-gap { flex-basis: 100%; height: 0; }
  .spine-stage.ww { aspect-ratio: 1 / 1; }
}

/* ---- Wild Wet: base-game world, layered and animated live ---- */
.ww-world { aspect-ratio: 1 / 1; width: 100%; position: relative; overflow: hidden; background: #2a5a63; }
.ww-world img { position: absolute; display: block; pointer-events: none; }
.ww-world .ww-bg { inset: 0; width: 100%; height: 100%; }
.ww-world .ww-rays { left: 14%; top: 0; width: 73%; animation: ww-glow 6s ease-in-out infinite alternate; }
.ww-world .ww-fish { left: -16%; animation: ww-swim-r 40s linear infinite; }
.ww-world .ww-fish.l { left: 104%; animation-name: ww-swim-l; }
.ww-world .ww-bubble { top: 104%; animation: ww-rise 10s linear infinite; }
@keyframes ww-glow { 0% { opacity: .45; } 100% { opacity: 1; } }
@keyframes ww-swim-r { 0% { left: -16%; } 100% { left: 104%; } }
@keyframes ww-swim-l { 0% { left: 104%; } 100% { left: -16%; } }
@keyframes ww-rise {
  0% { top: 104%; opacity: 0; transform: translateX(0); }
  10% { opacity: .9; }
  50% { transform: translateX(8px); }
  85% { opacity: .8; }
  100% { top: 8%; opacity: 0; transform: translateX(-6px); }
}
@media (prefers-reduced-motion: reduce) { .ww-world img { animation: none !important; } }

/* ---- UI case study: before / after system ---- */
:root { --bfr: #a8b1be; --aft: #7cc4ff; }
.cmp { grid-column-gap: 24px; align-items: flex-start; margin-top: 44px; display: flex; }
.cmp-col { flex: var(--ar, 1) 1 0%; min-width: 0; }
.cmp-head { align-items: center; grid-column-gap: 12px; margin-bottom: 14px; display: flex; }
.chip { letter-spacing: .12em; border-radius: 40px; padding: 5px 12px 4px; font-size: .75rem; font-weight: 700; line-height: 1; }
.chip.b { color: var(--bfr); border: 1.5px solid var(--bfr); }
.chip.a { color: #06192b; background-color: var(--aft); border: 1.5px solid var(--aft); }
.cmp-name { color: #fff; opacity: .6; letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; font-weight: 600; }
.cmp-shot { position: relative; border-radius: 14px; overflow: hidden; }
.cmp-col.b .cmp-shot { box-shadow: 0 0 0 1.5px #a8b1be4d; }
.cmp-col.a .cmp-shot { box-shadow: 0 0 0 1.5px #7cc4ff73; }
.cmp-shot > img { width: 100%; display: block; }
.mk { color: #111; border-radius: 50%; justify-content: center; align-items: center; width: 26px; height: 26px;
      font-size: .8125rem; font-weight: 700; line-height: 1; display: inline-flex; box-shadow: 0 2px 8px #0009; }
.cmp-shot .mk { position: absolute; transform: translate(-50%, -50%); }
.mk.b { background-color: var(--bfr); }
.mk.a { background-color: var(--aft); }
/* legend */
.lg { grid-row-gap: 14px; margin-top: 36px; display: grid; }
.lg-row { grid-column-gap: 14px; grid-template-columns: 26px minmax(0, 1fr) 24px 26px minmax(0, 1fr); align-items: center; display: grid; }
.lg-p, .lg-a { color: #fff; margin: 0; font-size: 1.0625rem; font-weight: 300; line-height: 22px; }
.lg-p { opacity: .62; }
.lg-arrow { color: #fff; opacity: .4; text-align: center; }
/* problem / solution / why */
.ps { margin-top: 40px; }
.ps-head, .ps-row { grid-column-gap: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
.ps-head span { color: #fff; opacity: .5; letter-spacing: .12em; padding-bottom: 12px; font-size: .8125rem; font-weight: 700; }
.ps-head span.b { color: var(--bfr); opacity: 1; }
.ps-head span.a { color: var(--aft); opacity: 1; }
.ps-row { border-top: 1px solid #ffffff1f; padding: 20px 0 22px; }
.ps-c { color: #fff; font-size: 1.0625rem; font-weight: 300; line-height: 24px; }
.ps-c.b { opacity: .7; }
.ps-c.w { opacity: .85; }
.ps-l { display: none; }
/* measured numbers */
.st { grid-column-gap: 20px; grid-row-gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 44px; display: grid; }
.st-i { border: 1px solid #ffffff1f; border-radius: 14px; padding: 20px 20px 18px; }
.st-l { color: #fff; opacity: .55; letter-spacing: .1em; text-transform: uppercase; min-height: 32px; margin: 0 0 12px; font-size: .75rem; font-weight: 700; line-height: 16px; }
.st-v { align-items: baseline; grid-column-gap: 10px; margin: 0; display: flex; }
.st-b { color: var(--bfr); font-size: 1.5rem; font-weight: 600; }
.st-arrow { color: #fff; opacity: .4; }
.st-a { color: var(--aft); font-size: 2.5rem; font-weight: 700; line-height: 1; }
.st-n { color: #fff; opacity: .5; margin: 10px 0 0; font-size: .8125rem; line-height: 17px; }
.fig.plate img { border-radius: 14px; }
@media screen and (max-width: 991px) {
  .st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-head { display: none; }
  .ps-row { grid-row-gap: 14px; grid-template-columns: 1fr; }
  .ps-l { letter-spacing: .12em; margin-bottom: 4px; font-size: .75rem; font-weight: 700; display: block; }
  .ps-c.b .ps-l { color: var(--bfr); }
  .ps-c.a .ps-l { color: var(--aft); }
  .ps-c.w .ps-l { opacity: .6; }
}
@media screen and (max-width: 767px) {
  .cmp { grid-row-gap: 30px; flex-flow: column; }
  .cmp-col { flex: 0 0 auto; width: 100%; }
  .cmp-col.port { max-width: 320px; margin: 0 auto; }
  .mk { width: 20px; height: 20px; font-size: .6875rem; }
  .lg-row { grid-template-columns: 20px minmax(0, 1fr); grid-row-gap: 6px; }
  .lg-arrow { display: none; }
  .lg-row .mk.a { grid-column: 1; }
  .st { grid-template-columns: 1fr; }
  .st-a { font-size: 2rem; }
}
.cmp.narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
.cmp.stack { grid-row-gap: 34px; flex-flow: column; }
.cmp.stack > .cmp-col { flex: 0 0 auto; width: 100%; }
.cmp + .cmp { margin-top: 64px; }
.cmp-head { min-height: 40px; }
.cmp.narrow { max-width: 760px; }

/* ---- UX/UI case study v3: tighter rhythm, compact comparisons (scoped to this page) ---- */
.ui-wrapper .margin { margin-top: 96px; }
.ui-wrapper .why-list { grid-row-gap: 24px; margin-top: 56px; }
.ui-wrapper h2.white-24 + .why-list, .ui-wrapper h2.white-24 + .ui-meta { margin-top: 28px; }
.ui-wrapper .why-text { opacity: .86; }
.ui-wrapper .cmp, .ui-wrapper .row, .ui-wrapper .fig { margin-top: 28px; }
.ui-wrapper .cmp-head { min-height: 0; margin-bottom: 10px; }
.ui-wrapper .cap { margin-top: 10px; }
.ui-wrapper .row > .cell > img, .fig.plate img { border-radius: 10px; }
.ui-wrapper .cell .tag { margin-bottom: 10px; }
.ui-wrapper .lg { grid-row-gap: 10px; margin-top: 24px; }
.ui-wrapper .lg-p, .ui-wrapper .lg-a { font-size: 1rem; line-height: 20px; }
/* overview */
.ui-meta { grid-column-gap: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
.ui-meta-i { border-top: 1px solid #ffffff2e; padding-top: 14px; }
.ui-meta-l { color: var(--aft); letter-spacing: .14em; margin: 0 0 8px; font-size: .8125rem; font-weight: 700; }
.ui-meta-t { color: #fff; margin: 0; font-size: 1.0625rem; font-weight: 300; line-height: 24px; }
.ui-note { color: #fff; opacity: .7; max-width: 820px; margin: 28px 0 0; font-size: .9375rem; line-height: 26px; }
.ui-note .chip, .sw-cap .chip { vertical-align: 1px; margin-right: 4px; }
.ui-note .chip.a { margin-left: 8px; }
/* portrait: full screen + enlarged detail, per side */
.ptc { grid-column-gap: 40px; grid-template-columns: 1fr 1fr; margin-top: 28px; display: grid; }
.ptc-pair { grid-column-gap: 12px; align-items: flex-end; display: flex; }
.ptc-f, .ptc-d { flex: var(--ar) 1 0%; min-width: 0; position: relative; }
.ptc-pair img { width: 100%; border-radius: 10px; display: block; }
.ptc-col.b .ptc-pair img { box-shadow: 0 0 0 1.5px #a8b1be4d; }
.ptc-col.a .ptc-pair img { box-shadow: 0 0 0 1.5px #7cc4ff73; }
.ptc-zoom { color: #fff; letter-spacing: .14em; opacity: .55; position: absolute; top: -22px; left: 0; font-size: .6875rem; font-weight: 700; }
/* before / after switcher */
.sw { margin-top: 28px; }
.sw-bar { grid-column-gap: 16px; grid-row-gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 14px; display: flex; }
.sw-tabs { grid-column-gap: 8px; grid-row-gap: 8px; flex-wrap: wrap; display: flex; }
.sw-ba { border: 1px solid #ffffff3d; border-radius: 40px; padding: 3px; display: flex; }
.sw-t { color: #fff; opacity: .6; letter-spacing: .12em; cursor: pointer; background: transparent; border: 0; border-radius: 40px; padding: 7px 16px 6px; font-family: Mdiotrial, Arial, sans-serif; font-size: .75rem; font-weight: 700; }
.sw-t.on { opacity: 1; }
.sw-t.b.on { color: #111; background-color: var(--bfr); }
.sw-t.a.on { color: #06192b; background-color: var(--aft); }
.sw-frame { aspect-ratio: var(--ar); border-radius: 14px; position: relative; overflow: hidden; }
.sw-img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: opacity .25s; }
.sw[data-state="a"] .sw-img.sb, .sw[data-state="b"] .sw-img.sa { opacity: 0; }
.sw[data-state="a"] .sw-frame { box-shadow: 0 0 0 1.5px #7cc4ff73; }
.sw[data-state="b"] .sw-frame { box-shadow: 0 0 0 1.5px #a8b1be4d; }
.sw[data-state="a"] .sw-cap.sb, .sw[data-state="b"] .sw-cap.sa { display: none; }
html.w-mod-js .sw-panel:not(.on) { display: none; }
/* result */
.ui-statement { color: #fff; text-transform: uppercase; letter-spacing: -.01em; margin: 28px 0 0; font-size: clamp(40px, 6.4vw, 92px); font-weight: 700; line-height: .98; }
.ui-pts { grid-column-gap: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; display: grid; }
.ui-pt { border-top: 1px solid #ffffff2e; padding-top: 14px; }
.ui-pt-l { color: var(--aft); letter-spacing: .14em; margin: 0 0 8px; font-size: .8125rem; font-weight: 700; }
.ui-pt-t { color: #fff; margin: 0; font-size: 1.0625rem; font-weight: 300; line-height: 24px; }
@media screen and (max-width: 767px) {
  .ui-wrapper .margin { margin-top: 72px; }
  .ui-meta, .ui-pts { grid-row-gap: 20px; grid-template-columns: 1fr; }
  .ptc { grid-row-gap: 32px; grid-template-columns: 1fr; }
  .sw-bar { flex-direction: column; align-items: flex-start; }
}
.ui-wrapper .section-top.banner { padding-bottom: 72px; }
.ui-wrapper .cmp.narrow { max-width: 540px; }
.ui-wrapper .row.small, .ui-wrapper .fig.mid { max-width: 940px; margin-left: auto; margin-right: auto; }

/* ---- UX/UI v3.1: consistent BEFORE / AFTER chips and a compact gallery nav ---- */
.chip { display: inline-block; letter-spacing: .12em; border: 0; border-radius: 40px; padding: 5px 11px 4px; font-size: .6875rem; font-weight: 700; line-height: 1.1; }
.chip.b { color: #14171c; background-color: var(--bfr); }
.chip.a { color: #06192b; background-color: var(--aft); }
.cmp-col.b .cmp-shot, .ptc-col.b .ptc-pair img, .sw[data-state="b"] .sw-frame { box-shadow: 0 0 0 1.5px #a8b1be66; }
.cmp-col.a .cmp-shot, .ptc-col.a .ptc-pair img, .sw[data-state="a"] .sw-frame { box-shadow: 0 0 0 1.5px #7cc4ff66; }
.sw-tabs { grid-column-gap: 26px; border-bottom: 1px solid #ffffff24; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sw-tabs::-webkit-scrollbar { display: none; }
.sw-tab { color: #fff; opacity: .5; letter-spacing: .12em; cursor: pointer; white-space: nowrap; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 0 10px; font-family: Mdiotrial, Arial, sans-serif; font-size: .8125rem; font-weight: 700; }
.sw-tab:hover { opacity: .85; }
.sw-tab.on { opacity: 1; border-bottom-color: #fff; }
.sw-bar { align-items: flex-end; }
.sw-t.sb.on { color: #14171c; background-color: var(--bfr); }
.sw-t.sa.on { color: #06192b; background-color: var(--aft); }
.sw-t:disabled { opacity: .25; cursor: not-allowed; }
.sw-none { background: #0d0f12; justify-content: center; align-items: center; display: flex; }
.sw-none p { color: #fff; opacity: .55; margin: 0; font-size: .9375rem; }
@media screen and (max-width: 767px) {
  .sw-bar { flex-direction: column; align-items: stretch; }
  .sw-ba { align-self: flex-start; }
  .chip { font-size: .625rem; padding: 4px 9px 3px; }
}
.sw-bar { min-width: 0; }
.sw-tabs { min-width: 0; max-width: 100%; }
@media screen and (max-width: 767px) { .sw-tabs { width: 100%; grid-column-gap: 20px; } }
.ui-wrapper .sw-cap { opacity: 1; color: #ffffffa8; }
.ui-wrapper .cmp-col .cap { opacity: 1; color: #ffffffa8; }
@media screen and (max-width: 767px) {
  .sw-scroll { border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
  .sw-scroll::-webkit-scrollbar { display: none; }
  .sw-scroll .sw-frame { min-width: 760px; }
  .sw-tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }
}

/* ---- Freeze Anubis: long-wild reels row and 4-up big-win row ---- */
.row.reels { grid-column-gap: 14px; max-width: 520px; margin-left: auto; margin-right: auto; }
.row.quad { grid-column-gap: 14px; }
.cap.center { text-align: center; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 767px) {
  .row.reels { flex-flow: row; grid-column-gap: 10px; max-width: 300px; }
  .row.reels > .cell, .row.reels > .cell.port { flex: var(--ar, 1) 1 0%; width: auto; max-width: none; margin: 0; }
  .row.quad { flex-flow: row wrap; grid-column-gap: 12px; grid-row-gap: 20px; }
  .row.quad > .cell { flex: 0 0 calc(50% - 6px); width: calc(50% - 6px); }
}

/* ---- UI case study: desktop gallery (03). AFTER = desktop screens; the original had no desktop
   layout, so its phone-landscape screen is fitted whole inside the same frame, with a note above it ---- */
.sw-img.fit { object-fit: contain; background: #0d0f12; }
.sw-note { color: #ffffffa8; letter-spacing: .04em; white-space: nowrap; pointer-events: none; font-family: Mdiotrial, Arial, sans-serif; font-size: .75rem; line-height: 16px; position: absolute; top: 8.75%; left: 50%; transform: translate(-50%, -50%); transition: opacity .25s; }
.sw[data-state="a"] .sw-note { opacity: 0; }
@media screen and (max-width: 767px) {
  .sw-scroll .sw-frame.desk { min-width: 900px; }
  .sw-note { white-space: normal; text-align: center; width: 280px; font-size: .6875rem; }
}
.sw-cap { min-height: 44px; }
@media screen and (max-width: 767px) { .sw-cap { min-height: 78px; } }

/* ---- Freeze Anubis: tighter opening rhythm (scoped to this page) ---- */
.freeze-anubis-wrapper .hero-banner { margin-bottom: 64px; }
.freeze-anubis-wrapper .section-top.banner { padding-bottom: 48px; }
.freeze-anubis-wrapper .section-mid { padding-top: 0; }
.freeze-anubis-wrapper .margin { margin-top: 96px; }
.freeze-anubis-wrapper .section-mid .container > div:nth-child(2) { margin-top: 72px; }
.freeze-anubis-wrapper .fig.tall.logo { max-width: 500px; margin-top: 28px; }
.freeze-anubis-wrapper .fig.tall.logo .cap { text-align: center; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 767px) {
  .freeze-anubis-wrapper .hero-banner { margin-bottom: 40px; }
  .freeze-anubis-wrapper .section-top.banner { padding-bottom: 24px; }
  .freeze-anubis-wrapper .margin { margin-top: 60px; }
  .freeze-anubis-wrapper .section-mid .container > div:nth-child(2) { margin-top: 48px; }
  .freeze-anubis-wrapper .fig.tall.logo { margin-top: 20px; }
}

/* ---- Goat of Thunder: tighter opening rhythm, smaller backdrop plate (scoped to this page) ---- */
.goat-of-thunder-wrapper .hero-banner { margin-bottom: 80px; }
.goat-of-thunder-wrapper .section-top.banner { padding-bottom: 66px; }
.goat-of-thunder-wrapper .section-mid { padding-top: 0; }
.goat-of-thunder-wrapper .margin { margin-top: 96px; }
.goat-of-thunder-wrapper .fig.tall.bg { max-width: 480px; }
@media screen and (max-width: 767px) {
  .goat-of-thunder-wrapper .hero-banner { margin-bottom: 48px; }
  .goat-of-thunder-wrapper .section-top.banner { padding-bottom: 30px; }
  .goat-of-thunder-wrapper .margin { margin-top: 60px; }
}

/* ---- Rainbow Mantis: tighter opening rhythm, taller rig stage (scoped to this page) ---- */
.rainbow-mantis-wrapper .hero-banner { margin-bottom: 80px; }
.rainbow-mantis-wrapper .section-top.banner { padding-bottom: 66px; }
.rainbow-mantis-wrapper .section-mid { padding-top: 0; }
.rainbow-mantis-wrapper .margin { margin-top: 96px; }
.rainbow-mantis-wrapper .spine-stage { aspect-ratio: 3 / 2; background: #000; background-image: none; }
@media screen and (max-width: 767px) {
  .rainbow-mantis-wrapper .hero-banner { margin-bottom: 48px; }
  .rainbow-mantis-wrapper .section-top.banner { padding-bottom: 30px; }
  .rainbow-mantis-wrapper .margin { margin-top: 60px; }
  .rainbow-mantis-wrapper .spine-stage { aspect-ratio: 1 / 1; }
}

/* ---- Wild Wet: tighter opening rhythm (scoped to this page) ---- */
.wild-wet-wrapper .hero-banner { margin-bottom: 80px; }
.wild-wet-wrapper .section-top.banner { padding-bottom: 66px; }
.wild-wet-wrapper .section-mid { padding-top: 0; }
.wild-wet-wrapper .margin { margin-top: 96px; }
@media screen and (max-width: 767px) {
  .wild-wet-wrapper .hero-banner { margin-bottom: 48px; }
  .wild-wet-wrapper .section-top.banner { padding-bottom: 30px; }
  .wild-wet-wrapper .margin { margin-top: 60px; }
}

/* ---- Spray Away: opening rhythm, logo and a taller rig stage for a standing character (scoped to this page) ---- */
.spray-away-wrapper .hero-banner { margin-bottom: 64px; }
.spray-away-wrapper .section-top.banner { padding-bottom: 48px; }
.spray-away-wrapper .section-mid { padding-top: 0; }
.spray-away-wrapper .margin { margin-top: 96px; }
.spray-away-wrapper .section-mid .container > div:nth-child(2) { margin-top: 72px; }
.spray-away-wrapper .fig.tall.logo { max-width: 560px; margin-top: 28px; }
.spray-away-wrapper .fig.tall.logo .cap { text-align: center; margin-left: auto; margin-right: auto; }
.spray-away-wrapper .spine-stage.ww.sa { aspect-ratio: 16 / 9; }
@media screen and (max-width: 767px) {
  .spray-away-wrapper .hero-banner { margin-bottom: 40px; }
  .spray-away-wrapper .section-top.banner { padding-bottom: 24px; }
  .spray-away-wrapper .margin { margin-top: 60px; }
  .spray-away-wrapper .section-mid .container > div:nth-child(2) { margin-top: 48px; }
  .spray-away-wrapper .fig.tall.logo { margin-top: 20px; }
  .spray-away-wrapper .spine-stage.ww.sa { aspect-ratio: 4 / 5; }
}

/* ---- Work page: full-width featured card keeps its banner proportions on phones ---- */
@media screen and (max-width: 767px) {
  .grid-project-items.wide { height: auto; }
  .grid-project-items.wide .project--image { height: auto; object-fit: contain; }
}

/* ---- Work page: on phones Spray Away leads the list as a standard card; the wide banner row is desktop-only ---- */
.grid-project-items.mob-first { display: none; }
@media screen and (max-width: 767px) {
  .grid-project-items.mob-first { display: block; }
  .project-wrapp.feat-wide { display: none; }
}

/* ---- Mobile menu on dark project pages: open the panel on the page's own dark colour, with white links ---- */
@media screen and (max-width: 767px) {
  .navbar.black .nav-menu { background-color: var(--main-black); }
  .navbar.black.m .nav-menu { background-color: var(--second-black); }
  .navbar.black._2 .nav-menu { background-color: #101010; }
  .navbar.black .nav-menu .w-nav-link { color: #fff; }
}