@charset "UTF-8";
/* ==========================================================================
   COLOR TOKENS
   ========================================================================== */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --redish: #F14855;
  --pinkish: #FF59DE;
}

/* Solid Colors */
/* RGB Colors with Opacity */
/* Color Utility Classes */
.black {
  fill: #000000;
}

.blackish {
  fill: #474747;
}

.greyish {
  fill: #a0a0a0;
}

.whiteish {
  fill: #ebebeb;
}

.white {
  fill: #FFFFFF;
}

.pinkish {
  fill: #ff59de;
  color: #ff59de;
}

.blueish {
  fill: #0095C5;
}

.darkblueish {
  fill: #386A8E;
}

.yellowish {
  fill: #fffb00;
}

.redish {
  fill: #F14855;
  color: #F14855;
}

.none {
  fill: none;
}

/* ==========================================================================
   BORDER TOKENS
   ========================================================================== */
/* ==========================================================================
   TYPOGRAPHY TOKENS
   ========================================================================== */
/* Font Families */
/* Font Weights */
/* Line Heights */
/* ==========================================================================
   TYPOGRAPHY MIXINS
   ========================================================================== */
/* ==========================================================================
   TYPOGRAPHY TOKENS - Fluid Scale System
   ========================================================================== */
/* ==========================================================================
   Font Face Declarations
   ========================================================================== */
@font-face {
  font-display: swap;
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/Archivo-Black-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inkface";
  font-style: normal;
  font-weight: 300;
  src: url("../assets/fonts/Inkface-Light-300.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inkface";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/Inkface-Regular-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inkface";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/Inkface-Bold-700.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "UnionStave";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/UnionStave-500.woff2") format("woff2");
}
/* ==========================================================================
   Base HTML Elements - Semantic Hierarchy
   ========================================================================== */
html, body {
  overscroll-behavior: contain;
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  line-height: 1.4;
}

/* Headings - Now properly hierarchical */
h1 {
  font-family: "Inkface", sans-serif;
  line-height: 1.2;
  color: #000000;
  margin: 0;
  padding: 0;
  font-size: clamp(25px, 22.8873239437px + 0.5633802817vw, 31px);
  font-weight: 700;
  width: 100%;
  color: #000000;
}
h1 .welcome {
  font-size: inherit;
  line-height: 1;
}

h2 {
  font-family: "Inkface", sans-serif;
  line-height: 1.2;
  color: #000000;
  margin: 0;
  padding: 0;
  font-size: clamp(20px, 18.2394366197px + 0.4694835681vw, 25px);
  font-weight: 500;
  width: 100%;
}

h3 {
  font-family: "Archivo", sans-serif;
  line-height: 1.2;
  color: #000000;
  margin: 0;
  padding: 0;
  font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  font-weight: 700;
  padding-left: 10px;
  margin: auto auto 1% 0%;
  width: 100%;
  text-transform: uppercase;
}
@media only screen and (min-width: 1024px) {
  h3 {
    margin: 0;
  }
}

h4 {
  font-family: "Archivo", sans-serif;
  line-height: 1.2;
  color: #000000;
  margin: 0;
  padding: 0;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

h5 {
  font-family: "Inkface", sans-serif;
  line-height: 1.2;
  color: #000000;
  margin: 0;
  padding: 0;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: 500;
}

h6 {
  font-family: "Courier New", monospace;
  font-size: 8px;
  font-weight: 700;
  display: inline-block;
}

/* Paragraphs */
p {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  line-height: 1.4;
  color: #000000;
  text-align: left;
}

/* Links */
a {
  font-weight: 700;
}

/* Lists */
ul {
  margin: 0;
  padding-left: 20px;
}

/* ==========================================================================
   Interface Elements - Fixed Sizing
   ========================================================================== */
/* Tab Text (Folder Labels) - stays crisp at fixed size */
.tab1, .tab2 {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* System Status Typography */
.system-status-bar {
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #ebebeb;
}
.system-status-bar .status-text {
  font-weight: 700;
}
.system-status-bar .timestamp, .system-status-bar .classification {
  padding: 0 10px;
}
.system-status-bar .classification {
  color: #ff59de;
}

/* ==========================================================================
   Folder Headers
   ========================================================================== */
.folder-header.restricted {
  color: #FFFFFF;
}
.folder-header.restricted .header-text h4 {
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  color: #FFFFFF;
  margin: 5px 0 0 0;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}
@media only screen and (min-width: 1024px) {
  .folder-header.restricted .header-text h4 {
    line-height: 0.8;
    margin-bottom: -3px;
  }
}
.folder-header.restricted .header-text h4.internal {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.7);
}
.folder-header.restricted .header-text p {
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

/* ==========================================================================
   Front-Specific Typography
   ========================================================================== */
.social__youtube__screen__text h4 {
  text-align: center;
  line-height: 0;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   Core Archive Typography
   ========================================================================== */
/* Section Headings */
.section-heading {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
  line-height: 1.2;
  color: #a0a0a0;
  border-bottom: 1px solid #a0a0a0;
  padding: 8px 0 4px 0;
  text-transform: uppercase;
}

/* Detail Labels */
.detail-label-small {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
  color: #a0a0a0;
  text-transform: uppercase;
}

/* Intro Text */
.intro-text {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: normal;
  line-height: 1.4;
  color: #a0a0a0;
  text-transform: uppercase;
}

/* Project Details Grid */
.project-details-grid .detail-info {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 4px 0;
}
.project-details-grid .detail-info h2 {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: 700;
  line-height: 1.4;
}

/* Skill List Items */
.skill-list li {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: normal;
  line-height: 1.4;
  margin: 8px 0;
}

/* Production Tags */
.tag {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: normal;
  line-height: 1.4;
}

/* ==========================================================================
   Recovered (Propaganda) Typography
   ========================================================================== */
.propaganda-wrapper {
  color: black;
}

.propaganda-title-block {
  text-align: left;
}
.propaganda-title-block .headline-text {
  font-family: "Archivo", sans-serif;
  font-size: clamp(20px, 18.2394366197px + 0.4694835681vw, 25px);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
}
.propaganda-title-block .subhead {
  font-family: "Archivo", sans-serif;
  font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  margin: 10px 0 0 0;
  color: black;
  padding-left: 10px;
  text-transform: uppercase;
}
.propaganda-title-block .date-tag {
  font-family: "Archivo", sans-serif;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: normal;
  line-height: 1.4;
  margin: 2px 0 0 0;
  color: black;
  padding-left: 10px;
  text-transform: uppercase;
}
.propaganda-title-block p {
  display: inline-block;
  margin: 0;
}

.propaganda-content p {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: normal;
  line-height: 1.4;
  line-height: 1.2;
  margin-bottom: 15px;
}
.propaganda-content p .lead {
  font-weight: 700;
  letter-spacing: 0;
  margin-right: 0;
  display: inline-block;
  text-transform: uppercase;
}

.footer-disclaimer {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: normal;
  line-height: 1.4;
  line-height: 1.4;
  max-width: 88%;
  text-transform: uppercase;
}

/* ==========================================================================
   Gallery Typography
   ========================================================================== */
.gallery-header h4 {
  margin: 0;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  color: #FFFFFF;
  text-transform: uppercase;
}
.gallery-header .gallery-count {
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  opacity: 0.8;
  color: #FFFFFF;
  text-transform: uppercase;
}

.gallery__caption h5 {
  font-family: "Inkface", sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 2px 0;
  text-shadow: 0 1px 2px black;
}
.gallery__caption p {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: normal;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 1px 2px black;
}

.materials-caption h5 {
  font-family: "Inkface", sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0;
  text-shadow: -1px -1px 4px rgba(0, 0, 0, 0.55);
}
.materials-caption p {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: normal;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
  text-shadow: -2px -1px 3px rgba(0, 0, 0, 0.55);
}

.video-thumb .play-button .text-container .access-text, .video-thumb .play-button .text-container .footage-text {
  font-family: "Courier New", monospace;
  color: #FFFFFF;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   Modal Typography
   ========================================================================== */
.modal-header h2 {
  font-family: "Archivo", sans-serif;
  font-size: clamp(20px, 18.2394366197px + 0.4694835681vw, 25px);
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  text-transform: uppercase;
}

.close-modal {
  font-family: "Courier New", monospace;
  font-size: clamp(18px, 14.4788732394px + 0.9389671362vw, 28px);
  font-weight: 300;
  line-height: 1.4;
  color: #FFFFFF;
  line-height: 1;
}

.project-section h3 {
  font-family: "Archivo", sans-serif;
  font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  padding: 0;
  margin: 0 0 -10px 0;
  text-transform: uppercase;
}

.project-content p {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: normal;
  line-height: 1.4;
  color: #FFFFFF;
  line-height: 1.6;
  max-width: 900px;
}

.archive-notice-text {
  font-family: "Courier New", monospace;
  font-size: 8px;
  font-weight: normal;
  line-height: 1.4;
  color: #FFFFFF;
}

.modal-body .gallery__caption h5 {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: 500;
  line-height: 1.4;
  color: #ebebeb;
  margin: 0;
}
.modal-body .gallery__caption p {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: normal;
  line-height: 1.4;
  color: #ebebeb;
  margin: 0;
}

/* ==========================================================================
   Modal Loading Screen
   ========================================================================== */
.loading-text {
  font-family: "Courier New", monospace;
  font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  text-align: center;
  margin-left: 10px;
}

.system-log {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: 500;
  line-height: 1.4;
  color: #FFFFFF;
  opacity: 0.7;
  text-transform: uppercase;
  text-align: center;
}

.terminal-commands .command-line {
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  color: #ff59de;
  text-transform: uppercase;
}

.terminal-footer .footer-text {
  font-family: "Courier New", monospace;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.4;
  color: #FFFFFF;
  line-height: 1.4;
}

.loading-logo .ash-logo {
  font-family: "Inkface", sans-serif;
  font-weight: 700;
  font-size: clamp(25px, 22.8873239437px + 0.5633802817vw, 31px);
  line-height: 1.2;
  color: #FFFFFF;
  text-transform: uppercase;
}

html {
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  margin: auto;
  background-color: rgba(0, 0, 0, 0.9);
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  max-height: 100vh;
  scroll-behavior: smooth;
}
body::-webkit-scrollbar {
  display: none;
}

.pointer {
  cursor: pointer;
}

/* Grid */
body {
  width: 100vw;
  min-height: -webkit-fill-available;
}

.layout {
  position: fixed;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  gap: 0px 0px;
  grid-template-areas: "screen__big--outer";
  height: 100%;
  height: calc(var(--vh, 1vh) * 100);
  height: -webkit-fill-available;
  width: 100vw;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .layout {
    grid-template-rows: calc(100% - 130px) 130px;
    grid-template-areas: "screen__big--outer" "nav";
  }
}
@media only screen and (min-width: 611px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(100px, 14%) minmax(60px, 76%) minmax(90px, 10%);
    grid-template-rows: 21% 40% 30%;
    grid-template-areas: "nav__plate--empone screen__big--outer social" "nav screen__big--outer social" "nav__plate--emptwo screen__big--outer social";
    height: 100vh;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .layout {
    grid-template-columns: minmax(150px, 15%) minmax(60px, 71%) minmax(99px, 14%);
    grid-template-rows: 30% 40% 30%;
  }
}
@media only screen and (max-height: 300px) {
  .layout {
    grid-template-columns: 100vw;
    grid-template-rows: 100%;
    grid-template-areas: "screen__big--outer";
  }
}
@media only screen and (max-width: 267px) {
  .layout {
    grid-template-columns: 100vw;
    grid-template-rows: 100%;
    grid-template-areas: "screen__big--outer";
  }
}
@media (max-height: 300px), (max-width: 267px) {
  .layout {
    grid-template-columns: 100%;
    grid-template-rows: calc(100% - 130px) 130px;
    grid-template-areas: "screen__big--outer" "nav";
  }
}

.layout-toosmall {
  position: fixed;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  gap: 0px 0px;
  grid-template-areas: "screen__big--outer";
  height: 100%;
  overflow: hidden;
}
@media only screen and (max-height: 300px) {
  .layout-toosmall {
    grid-template-columns: 100vw;
    grid-template-rows: 100%;
    grid-template-areas: "screen__big--outer";
  }
}
@media only screen and (max-width: 267px) {
  .layout-toosmall {
    grid-template-columns: 100vw;
    grid-template-rows: 100%;
    grid-template-areas: "screen__big--outer";
  }
}

@media only screen and (max-width: 267px) {
  .too-small {
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
    height: 100%;
    font-weight: 500;
    line-height: 1.2;
    color: #000000;
    font-size: clamp(0.5rem, 4vw + 0.5rem, 1rem);
    padding: 0;
    margin: 0;
    width: 100%;
  }
}
@media only screen and (max-height: 300px) {
  .too-small {
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
    height: 100%;
    font-weight: 500;
    line-height: 1.2;
    color: #000000;
    font-size: clamp(0.5rem, 4vw + 0.5rem, 1rem);
    padding: 0;
    margin: 0;
    width: 100%;
  }
}
.too-small {
  display: none;
}
@media (max-height: 300px), (max-width: 267px) {
  .too-small {
    display: none;
  }
}

.just-right {
  display: none;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .just-right {
    display: block;
  }
}

.nav__plate--empone {
  display: none;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .nav__plate--empone {
    display: block;
    grid-area: nav__plate--empone;
    box-shadow: -104px 4px 0 0px rgba(0, 0, 0, 0.2);
    height: 3px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__plate--empone {
    box-shadow: -124px 4px 0 0px rgba(0, 0, 0, 0.2);
  }
}

.nav {
  grid-area: nav;
  position: relative;
}

.nav__plate--emptwo {
  display: none;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .nav__plate--emptwo {
    display: block;
    grid-area: nav__plate--emptwo;
    box-shadow: -104px 4px 0 0px rgba(0, 0, 0, 0.2);
    height: 3px;
    margin-top: -7px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__plate--emptwo {
    box-shadow: -124px 3px 0 0px rgba(0, 0, 0, 0.2);
    margin-top: -7px;
  }
}

.screen__big--outer {
  grid-area: screen__big--outer;
  overflow: visible;
}
@media only screen and (min-width: 1024px) {
  .screen__big--outer {
    grid-area: screen__big--outer;
  }
}

.social {
  grid-area: social;
  overflow: hidden;
}

.screen__big--inner {
  position: relative;
  border: 1px solid #000000;
  border-radius: 6px;
  background: #ebebeb;
  margin: auto;
  position: relative;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 1;
  background-color: #ebebeb;
}
.screen__big--inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ebebeb;
  z-index: -1;
  pointer-events: none;
}
@media only screen and (min-width: 1024px) {
  .screen__big--inner {
    height: 100%;
    padding-bottom: 0;
    position: relative;
    contain: content;
  }
}
.screen__big__shine {
  height: calc(100% - 22px);
  width: calc(100% - 22px);
  border-radius: 5px;
  box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  position: absolute;
  margin-top: 1px;
  margin-left: 1px;
  z-index: 2;
}
@media only screen and (min-width: 1024px) {
  .screen__big__shine {
    border-radius: 5px;
    height: calc(100% - 22px);
    width: calc(100% - 21px);
  }
}
@media only screen and (max-width: 267px) {
  .screen__big__shine {
    border-radius: 6px;
    height: calc(100% - 21px);
    width: calc(100% - 21px);
  }
}
.screen__big__shine--topleft {
  border-top: 3px solid rgba(255, 255, 255, 0.4);
  border-left: 3px solid rgba(255, 255, 255, 0.4);
  border-top-left-radius: 8px;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 10px;
  left: 10px;
}
.screen__big__shine--topleft--one {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}
.screen__big__shine--topleft--two {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
}
.screen__big__shine--topright {
  border-top: 3px solid rgba(255, 255, 255, 0.4);
  border-right: 3px solid rgba(255, 255, 255, 0.4);
  border-top-right-radius: 8px;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 10px;
  right: 10px;
}
.screen__big__shine--topright--one {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}
.screen__big__shine--topright--two {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
}
.screen__big__shine--topright {
  border-top: 3px solid rgba(255, 255, 255, 0.4);
  border-right: 3px solid rgba(255, 255, 255, 0.4);
  border-top-right-radius: 8px;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 10px;
  right: 10px;
}
.screen__big__shine--topright--one {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}
.screen__big__shine--topright--two {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
}
.screen__big__shine--bottomleft {
  border-bottom: 3px solid rgba(255, 255, 255, 0.4);
  border-left: 3px solid rgba(255, 255, 255, 0.4);
  border-bottom-left-radius: 8px;
  position: absolute;
  width: 12px;
  height: 12px;
  bottom: 10px;
  left: 10px;
}
.screen__big__shine--bottomleft--one {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}
.screen__big__shine--bottomleft--two {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
}
.screen__big__shine--bottomright {
  border-bottom: 3px solid rgba(255, 255, 255, 0.4);
  border-right: 3px solid rgba(255, 255, 255, 0.4);
  border-bottom-right-radius: 8px;
  position: absolute;
  width: 12px;
  height: 12px;
  bottom: 10px;
  right: 10px;
}
.screen__big__shine--bottomright--one {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}
.screen__big__shine--bottomright--two {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
}
.screen__big--outer {
  border: 1px solid #000000;
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
  background: #ff59de;
  padding: 10px 10px 12px 10px;
  position: relative;
  top: 0;
  transition: top 0.6s ease-in-out;
  will-change: top;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .screen__big--outer {
    margin: 20px 10px 20px 10px;
    height: calc(100% - 15px);
  }
}
@media only screen and (min-width: 611px) {
  .screen__big--outer {
    margin: 26px 4px 12px 10px;
    height: calc(100% - 8px);
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__big--outer {
    margin: 50px 4px 50px 0;
    height: calc(100% - 122px);
  }
}
@media only screen and (min-height: 300px) and (max-height: 470px) {
  .screen__big--outer {
    margin: 21px 10px 20px 10px;
    height: calc(100% - 16px);
  }
}
@media only screen and (max-height: 300px) {
  .screen__big--outer {
    margin: 20px 5% 50px 5%;
    height: calc(100% - 70px);
  }
}
@media only screen and (max-width: 267px) {
  .screen__big--outer {
    margin: 20px 5% 50px 5%;
    height: calc(100% - 70px);
  }
}
@media (max-height: 300px), (max-width: 267px) {
  .screen__big--outer {
    margin: 21px 10px 20px 10px;
    height: calc(100% - 16px);
    top: calc(-100% - 140px);
    pointer-events: none;
  }
}

.screen__holder {
  background: #0095C5;
  border: 1px solid #000000;
  height: 26px;
  width: 24px;
  position: absolute;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 9px 6px 0px -8px rgba(0, 0, 0, 0.2), -9px 6px 0px -8px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__holder {
    height: 26px;
    width: 24px;
  }
}
.screen__holder__shadow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
}
.screen__holder__shadow--one {
  width: 32px;
  height: 14px;
  top: -18px;
  left: 13px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__holder__shadow--one {
    top: -18px;
    left: 23px;
  }
}
.screen__holder__shadow--two {
  width: 28px;
  height: 2px;
  top: 12px;
  left: 15px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__holder__shadow--two {
    top: 12px;
    left: 25px;
  }
}
.screen__holder__shadow--three {
  width: 28px;
  height: 2px;
  top: 12px;
  right: 15px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__holder__shadow--three {
    top: 12px;
    right: 25px;
  }
}
.screen__holder__shadow--four {
  width: 32px;
  height: 14px;
  top: -18px;
  right: 13px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__holder__shadow--four {
    top: -18px;
    right: 23px;
  }
}
.screen__holder--left {
  top: -15px;
  left: 16px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__holder--left {
    top: -15px;
    left: 26px;
  }
}
.screen__holder--right {
  top: -15px;
  right: 16px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__holder--right {
    top: -15px;
    right: 26px;
  }
}
.screen__holder__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
}
.screen__holder__screw--one {
  margin: 0px 0px -4px 9px;
  display: inline-block;
}
.screen__holder__screw--two {
  margin: 0px 0px 6px 9px;
  display: inline-block;
}

.screen__steel {
  border: 1px solid #000000;
  background: #a0a0a0;
  height: 50%;
  width: 12px;
  position: absolute;
  z-index: -10;
}
.screen__steel--left {
  top: -42px;
  left: 22px;
}
.screen__steel--left--shadow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  width: 18px;
  height: 100px;
  z-index: -11;
  top: -118px;
  left: 20px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel--left--shadow {
    top: -118px;
    left: 30px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel--left {
    top: -60px;
    left: 32px;
  }
}
.screen__steel__grey {
  background-color: #a0a0a0;
  width: 12px;
  height: 1px;
  position: absolute;
  z-index: -9;
}
.screen__steel__grey--one {
  top: -4px;
  left: 43px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel__grey--one {
    top: -4px;
    left: 53px;
  }
}
.screen__steel__grey--two {
  top: -4px;
  right: 43px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel__grey--two {
    top: -4px;
    right: 53px;
  }
}
.screen__steel--right {
  top: -42px;
  right: 22px;
}
.screen__steel--right--shadow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  width: 18px;
  height: 100px;
  z-index: -3;
  top: -118px;
  right: 20px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel--right--shadow {
    top: -118px;
    right: 30px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel--right {
    top: -60px;
    right: 32px;
  }
}
.screen__steel__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
  display: inline-block;
  position: absolute;
}
.screen__steel__screw--one {
  left: 3px;
  top: 15px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel__screw--one {
    left: 3px;
    top: 32px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel__screw--three {
    top: 5px;
    left: 35px;
    right: auto;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel__screw--four {
    top: 5px;
    left: 44px;
    right: auto;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel__screw--six {
    top: 5px;
    left: 35px;
    right: auto;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .screen__steel__screw--seven {
    top: 5px;
    left: 44px;
    right: auto;
  }
}

.front__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "front__header" "front__image" "front__image" "front__text" "front__cta";
  height: 100%;
  width: 100%;
  background-color: #ebebeb;
}
@media only screen and (min-width: 1024px) {
  .front__container {
    display: grid;
    grid-template-columns: 31% 31% 38%;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "front__header front__header front__image" "front__text front__text front__image" "front__cta front__cta front__image";
  }
}

.front__header {
  grid-area: front__header;
  padding: clamp(1vh, 2vh + 1.5rem, 5rem) 5% 0 5%;
}
@media only screen and (min-width: 1024px) {
  .front__header {
    padding: clamp(0.1vh, 8vh + 1rem, 13vh) 5% 0 5%;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .front__header {
    padding: clamp(0.1vh, 6vh + 1rem, 9vh) 5% 0 5%;
  }
}

.front__image {
  grid-area: front__image;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.front__image img {
  width: clamp(10rem, 90%, 90%);
  height: 120%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 30% 22%;
     object-position: 30% 22%;
}
@media only screen and (min-width: 1024px) {
  .front__image img {
    width: clamp(10rem, 100%, 100%);
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 35% 20%;
       object-position: 35% 20%;
  }
}

figure {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.front__text {
  grid-area: front__text;
  padding: 0 5% 0 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front__cta {
  grid-area: front__cta;
  padding: 0 4%;
}
@media only screen and (min-width: 1024px) {
  .front__cta {
    padding-left: 4%;
    padding-right: 6%;
  }
}
.front__cta svg text {
  font-size: clamp(2.06rem, 2vw + 0.75rem, 2.08rem);
  font-family: "Inkface", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
  text-align: center;
}

::-webkit-scrollbar {
  display: none;
}

/* Navigation */
.nav {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  display: none;
  position: relative;
  bottom: 0;
  transition: bottom 0.6s ease-in-out;
  will-change: bottom;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .nav {
    display: block;
  }
}
@media only screen and (min-width: 611px) {
  .nav {
    margin-right: -21px;
    margin-bottom: -24px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .nav {
    margin-top: -42px;
    margin-right: -11px;
    margin-bottom: 26px;
  }
}
@media (max-height: 300px), (max-width: 267px) {
  .nav {
    display: block;
    bottom: calc(-100% - 140px);
    pointer-events: none;
  }
}

.nav__plate {
  background: #0095C5;
  border: 1px solid #000000;
  height: 107px;
  width: auto;
  margin: 12px 21px 0px 21px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 611px) {
  .nav__plate {
    height: calc(100% + 59px);
    width: 100px;
    margin: auto -1px auto auto;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__plate {
    width: 120px;
  }
}

.nav__row {
  width: 100%;
  height: calc(100% - 14px);
  font-size: 0;
  box-shadow: -3px 0 0 rgba(0, 0, 0, 0.2), 3px 0 0 rgba(0, 0, 0, 0.2), 0 4px 0 rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__row {
    height: 100%;
    box-shadow: -4px 0 0 rgba(0, 0, 0, 0.2), 0 3px 0 rgba(0, 0, 0, 0.2), 0 -3px 0 rgba(0, 0, 0, 0.2);
  }
}

.nav__holder {
  background: #0095C5;
  border: 1px solid #000000;
  height: 30px;
  width: 14px;
  position: absolute;
  z-index: 1;
}
@media only screen and (min-width: 611px) {
  .nav__holder {
    height: 18px;
    width: 30px;
  }
}
.nav__holder--shadow--one {
  height: 31px;
  width: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -4px;
  left: -19px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--one {
    height: 14px;
    width: 2px;
    top: -15px;
    left: -3px;
    z-index: 1;
  }
}
.nav__holder--shadow--two {
  height: 2px;
  width: 11px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -3px;
  left: -11px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--two {
    height: 5px;
    width: 38px;
    top: -23px;
    left: -4px;
  }
}
.nav__holder--shadow--three {
  height: 2px;
  width: 13px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 31px;
  left: -16px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--three {
    height: 12px;
    width: 2px;
    top: -15px;
    left: 31px;
  }
}
.nav__holder--shadow--four {
  height: 31px;
  width: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 80px;
  left: -19px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--four {
    height: 12px;
    width: 2px;
    top: -15px;
    left: 67px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__holder--shadow--four {
    left: 87px;
  }
}
.nav__holder--shadow--five {
  height: 3px;
  width: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 108px;
  left: -15px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--five {
    height: 5px;
    width: 20px;
    top: -23px;
    left: 66px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__holder--shadow--five {
    left: 86px;
  }
}
.nav__holder--shadow--six {
  height: 2px;
  width: 13px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 74px;
  left: -16px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--six {
    height: 2px;
    width: 10px;
    top: -22px;
    left: 90px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__holder--shadow--six {
    left: 110px;
  }
}
.nav__holder--shadow--seven {
  height: 31px;
  width: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 80px;
  right: -19px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--seven {
    height: 13px;
    width: 2px;
    top: auto;
    bottom: -14px;
    left: -3px;
  }
}
.nav__holder--shadow--eight {
  height: 2px;
  width: 13px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 74px;
  right: -16px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--eight {
    height: 5px;
    width: 38px;
    top: auto;
    bottom: -23px;
    left: -4px;
  }
}
.nav__holder--shadow--nine {
  height: 3px;
  width: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 108px;
  right: -15px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--nine {
    height: 12px;
    width: 2px;
    top: auto;
    bottom: -15px;
    left: 31px;
  }
}
.nav__holder--shadow--ten {
  height: 31px;
  width: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -4px;
  right: -19px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--ten {
    height: 12px;
    width: 2px;
    top: auto;
    bottom: -15px;
    right: 31px;
  }
}
.nav__holder--shadow--eleven {
  height: 2px;
  width: 11px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -3px;
  right: -11px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--eleven {
    height: 5px;
    width: 20px;
    top: auto;
    bottom: -23px;
    right: 14px;
  }
}
.nav__holder--shadow--twelve {
  height: 2px;
  width: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 31px;
  right: -15px;
  z-index: 0;
}
@media only screen and (min-width: 611px) {
  .nav__holder--shadow--twelve {
    height: 2px;
    width: 10px;
    top: auto;
    bottom: -22px;
    right: 0px;
  }
}
.nav__holder--top {
  top: -1px;
}
@media only screen and (min-width: 611px) {
  .nav__holder--top {
    top: -20px;
  }
}
.nav__holder--bottom {
  bottom: -1px;
}
@media only screen and (min-width: 611px) {
  .nav__holder--bottom {
    bottom: -20px;
  }
}
.nav__holder--left {
  left: -16px;
}
@media only screen and (min-width: 611px) {
  .nav__holder--left {
    left: -1px;
  }
}
.nav__holder--right {
  right: -16px;
}
@media only screen and (min-width: 611px) {
  .nav__holder--right {
    right: -1px;
  }
}
.nav__holder__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
  margin: 6px auto 6px auto;
}
@media only screen and (min-width: 611px) {
  .nav__holder__screw--top--left {
    display: flex;
    margin: 9px auto 4px 3px;
  }
}
@media only screen and (min-width: 611px) {
  .nav__holder__screw--top--right {
    display: flex;
    margin: -9px 3px 4px auto;
  }
}
@media only screen and (min-width: 611px) {
  .nav__holder__screw--bottom--left {
    display: flex;
    margin: 4px auto -9px 3px;
  }
}
@media only screen and (min-width: 611px) {
  .nav__holder__screw--bottom--right {
    display: flex;
    margin: 4px 3px -9px auto;
  }
}
.nav__holder__bar {
  top: 44px;
  height: 17px;
  width: 9px;
  background: #a0a0a0;
  border: 1px solid #000000;
  position: absolute;
  z-index: -2;
}
@media only screen and (min-width: 611px) {
  .nav__holder__bar {
    height: 7px;
    width: 100%;
    display: none;
  }
}
.nav__holder__bar--left {
  left: -11px;
  box-shadow: -7px 0px 0px -4px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__holder__bar--left {
    top: -9px;
    left: -1px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
}
.nav__holder__bar--right {
  right: -11px;
  box-shadow: 7px 0px 0px -4px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__holder__bar--right {
    top: auto;
    right: -1px;
    bottom: -9px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
}

.nav__bar {
  background: #0095C5;
  border: 1px solid #000000;
  height: 14px;
  margin: -1px -1px -1px -1px;
}
@media only screen and (min-width: 611px) {
  .nav__bar {
    height: 100%;
    width: 14px;
    position: absolute;
    right: 0;
  }
}

.nav__steel {
  background: #a0a0a0;
  height: 13px;
  width: 50%;
  position: absolute;
  z-index: -1;
}
.nav__steel--top {
  margin-top: 43px;
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__steel--top {
    width: 100%;
    margin-top: -14px;
    left: 0;
    box-shadow: 0px -3px 0 0px rgba(0, 0, 0, 0.2);
  }
}
.nav__steel--bottom {
  margin-top: 75px;
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__steel--bottom {
    width: 100%;
    margin-top: auto;
    margin-bottom: -75px;
    bottom: 0;
    box-shadow: 0px 3px 0 0px rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .nav__steel--bottom {
    margin-bottom: -78px;
  }
}
.nav__steel--left {
  margin-left: 0;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
}
.nav__steel--right {
  right: -1px;
  margin-left: auto;
  margin-right: 0;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
}
@media only screen and (min-width: 611px) {
  .nav__steel--right {
    display: none;
  }
}
.nav__steel__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
  display: inline-block;
  position: absolute;
}
.nav__steel__screw--one {
  top: 35px;
  left: -10px;
}
@media only screen and (min-width: 611px) {
  .nav__steel__screw--one {
    top: -10px;
    left: auto;
    right: 56px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__steel__screw--one {
    right: 75px;
  }
}
.nav__steel__screw--two {
  top: 35px;
  left: -21px;
  display: none;
}
@media only screen and (min-width: 611px) {
  .nav__steel__screw--two {
    display: inline-block;
    top: -10px;
    left: auto;
    right: 40px;
  }
}
.nav__steel__screw--three {
  top: 35px;
  right: -11px;
}
@media only screen and (min-width: 611px) {
  .nav__steel__screw--three {
    top: auto;
    bottom: -10px;
    left: auto;
    right: 40px;
  }
}
.nav__steel__screw--four {
  top: 35px;
  right: -21px;
  display: none;
}
@media only screen and (min-width: 611px) {
  .nav__steel__screw--four {
    display: inline-block;
    top: auto;
    bottom: -10px;
    left: auto;
    right: 56px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__steel__screw--four {
    right: 75px;
  }
}
.nav__steel__screw--five {
  top: 67px;
  left: -10px;
}
@media only screen and (min-width: 611px) {
  .nav__steel__screw--five {
    display: none;
  }
}
.nav__steel__screw--seven {
  top: 67px;
  right: -11px;
}
@media only screen and (min-width: 611px) {
  .nav__steel__screw--seven {
    display: none;
  }
}

.nav__section {
  display: inline-block;
  width: calc(33.33% + 2px);
  height: 100%;
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
}
@media only screen and (min-width: 611px) {
  .nav__section {
    display: flex;
    height: 33.33%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.nav__blok {
  background: #ff59de;
  border: 1px solid #000000;
  height: 8px;
  box-shadow: 0px 2px 0px -1px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__blok {
    height: 100%;
    width: 8px;
    position: absolute;
    right: 14px;
    margin-top: -1px;
    box-shadow: -2px 0px 0px -1px rgba(0, 0, 0, 0.2), inset -2px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
}

.nav__clamp {
  background: #a0a0a0;
  border: 1px solid #000000;
  height: 18px;
  width: 14px;
  margin: -10px auto 0 auto;
  display: flex;
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__clamp {
    height: 16px;
    width: 18px;
    margin: auto;
    position: absolute;
    right: 14px;
    top: calc(50% - 7px);
    bottom: calc(50% - 7px);
    display: block;
    box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
}
.nav__clamp__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
  margin: 2px auto auto auto;
}
@media only screen and (min-width: 611px) {
  .nav__clamp__screw {
    margin: 2px 3px 2px auto;
  }
}
.nav__clamp__shadow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  width: 20px;
  height: 11px;
  top: auto;
  left: calc(50% - 10px);
  bottom: 71px;
  z-index: -1;
}
@media only screen and (min-width: 611px) {
  .nav__clamp__shadow {
    width: 11px;
    height: 22px;
    top: -3px;
    left: -3px;
    bottom: auto;
  }
}

.nav__wire {
  border: 1px solid #000000;
  width: 6px;
}
@media only screen and (min-width: 611px) {
  .nav__wire {
    width: 20px;
    margin: auto;
    position: absolute;
    right: 33px;
    top: calc(50% - 3px);
    bottom: calc(50% - 3px);
    z-index: -1;
  }
}
.nav__wire--top {
  height: 8px;
  margin: -1px auto -1px auto;
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__wire--top {
    height: 6px;
    box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
}
.nav__wire--bottom {
  height: 118px;
  position: absolute;
  left: calc(50% - 4px);
  right: calc(50% - 4px);
  bottom: -125px;
  overflow: hidden;
  box-shadow: 0px 4px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__wire--bottom {
    right: auto;
    left: -445px;
    top: calc(50% - 3px);
    bottom: calc(50% - 3px);
    width: 436px;
    height: 6px;
    margin: auto;
    overflow: hidden;
    box-shadow: -5px 0px 0px 2px rgba(0, 0, 0, 0.2), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
}
.nav__wire--blog {
  background: #fffb00;
}
.nav__wire--design {
  background: #386A8E;
}
.nav__wire--me {
  background: #ff59de;
}
.nav__wire--photo {
  background: #474747;
}
.nav__wire--video {
  background: #F14855;
}

.nav__button {
  background: #0095C5;
  border: 1px solid #000000;
  margin: auto auto auto auto;
  padding: 2px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: block;
}
@media only screen and (min-height: 470px) {
  .nav__button {
    padding: 3px;
    width: 46px;
    height: 46px;
  }
}
@media only screen and (min-width: 611px) {
  .nav__button {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__button {
    margin-right: 52px;
  }
}
.nav__button--inner {
  border: 1px solid #000000;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  background-color: #FFFFFF;
}
@media only screen and (min-height: 470px) {
  .nav__button--inner {
    width: 44px;
    height: 44px;
  }
}
.nav__button--small {
  height: 18px;
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
}
@media only screen and (min-height: 470px) {
  .nav__button--small {
    height: 30px;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
}
.nav__button--big {
  height: 20px;
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
}
@media only screen and (min-height: 470px) {
  .nav__button--big {
    height: 32px;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
  }
}
.nav__button {
  /* Button animations - hover states */
}
.nav__button:hover {
  width: 28px;
  height: 28px;
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.2);
  transition: 100ms;
}
@media only screen and (min-height: 470px) {
  .nav__button:hover {
    width: 44px;
    height: 44px;
  }
}
.nav__button:hover .nav__button--inner {
  width: 26px;
  height: 26px;
  transition: 100ms;
}
@media only screen and (min-height: 470px) {
  .nav__button:hover .nav__button--inner {
    width: 42px;
    height: 42px;
  }
}
.nav__button:hover .nav__button--small {
  height: 16px;
  width: 16px;
  transition: 100ms;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
}
@media only screen and (min-height: 470px) {
  .nav__button:hover .nav__button--small {
    height: 28px;
    width: 28px;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
}
.nav__button:hover .nav__button--big {
  width: 18px;
  height: 18px;
  transition: 100ms;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
}
@media only screen and (min-height: 470px) {
  .nav__button:hover .nav__button--big {
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
  }
}
.nav__button:active, .nav__button:focus, .nav__button:target {
  width: 26px;
  height: 26px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
  transition: 50ms;
}
@media only screen and (min-height: 470px) {
  .nav__button:active, .nav__button:focus, .nav__button:target {
    width: 42px;
    height: 42px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__button:active, .nav__button:focus, .nav__button:target {
    transition: 200ms;
  }
}
.nav__button:active .nav__button--inner, .nav__button:focus .nav__button--inner, .nav__button:target .nav__button--inner {
  width: 24px;
  height: 24px;
  transition: 50ms;
}
@media only screen and (min-height: 470px) {
  .nav__button:active .nav__button--inner, .nav__button:focus .nav__button--inner, .nav__button:target .nav__button--inner {
    width: 40px;
    height: 40px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav__button:active .nav__button--inner, .nav__button:focus .nav__button--inner, .nav__button:target .nav__button--inner {
    transition: 200ms;
  }
}
.nav__button:active .nav__button--small, .nav__button:focus .nav__button--small, .nav__button:target .nav__button--small {
  width: 14px;
  height: 14px;
  transition: 50ms;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
}
@media only screen and (min-width: 1024px) {
  .nav__button:active .nav__button--small, .nav__button:focus .nav__button--small, .nav__button:target .nav__button--small {
    transition: 200ms;
  }
}
@media only screen and (min-height: 470px) {
  .nav__button:active .nav__button--small, .nav__button:focus .nav__button--small, .nav__button:target .nav__button--small {
    width: 26px;
    height: 26px;
    top: calc(50% - 13px);
    left: calc(50% - 13px);
  }
}
.nav__button:active .nav__button--big, .nav__button:focus .nav__button--big, .nav__button:target .nav__button--big {
  width: 16px;
  height: 16px;
  transition: 50ms;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
}
@media only screen and (min-width: 1024px) {
  .nav__button:active .nav__button--big, .nav__button:focus .nav__button--big, .nav__button:target .nav__button--big {
    transition: 200ms;
  }
}
@media only screen and (min-height: 470px) {
  .nav__button:active .nav__button--big, .nav__button:focus .nav__button--big, .nav__button:target .nav__button--big {
    width: 28px;
    height: 28px;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
}
.nav__button {
  /* Button color variants */
}
.nav__button--blog {
  background-color: #fffb00;
}
.nav__button--design {
  background-color: #386A8E;
}
.nav__button--me {
  background-color: #ff59de;
}
.nav__button--photo {
  background-color: #474747;
}
.nav__button--video {
  background-color: #F14855;
}

.nav__plug {
  border: 1px solid #000000;
  height: 4px;
  width: 8px;
  position: absolute;
  left: calc(50% - 5px);
  right: calc(50% - 5px);
  bottom: -6px;
  background-color: #0095C5;
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 611px) {
  .nav__plug {
    height: 8px;
    width: 6px;
    right: auto;
    left: -8px;
    top: calc(50% - 5px);
    bottom: calc(50% - 5px);
  }
}
.nav__plug__shadow {
  background-color: rgba(0, 0, 0, 0.2);
  height: 4px;
  width: 14px;
  position: absolute;
  top: 3px;
  left: -3px;
  z-index: -1;
}
@media only screen and (min-width: 611px) {
  .nav__plug__shadow {
    height: 14px;
    width: 6px;
    top: -3px;
    left: -3px;
  }
}

/* Social */
@media only screen and (min-width: 611px) {
  .social__youtube__holder {
    background: #0095C5;
    border: 1px solid #000000;
    position: absolute;
    z-index: 99;
    height: 18px;
    width: 12px;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__holder--top {
    right: -14px;
    top: 12px;
    box-shadow: 1px 3px 0 -1px rgba(0, 0, 0, 0.2);
    border-bottom: 0px;
  }
  .social__youtube__holder--top__shadow {
    position: absolute;
    z-index: -2;
  }
  .social__youtube__holder--top__shadow--one {
    width: 13px;
    height: 21px;
    top: 10px;
    right: -16px;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .social__youtube__holder--top__shadow--two {
    width: 13px;
    height: 21px;
    bottom: 10px;
    right: -16px;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .social__youtube__holder--top__shadow--three {
    width: 1px;
    height: 27px;
    bottom: 18px;
    right: -15px;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
}
@media only screen and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__youtube__holder--top__shadow--three {
    height: 26px;
    bottom: 30px;
    right: -3px;
    background-color: #a0a0a0;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__holder--top__shadow--four {
    width: 25px;
    height: 32px;
    bottom: 16px;
    right: -41px;
    z-index: -2;
    background-color: rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__youtube__holder--top__shadow--four {
    width: 38px;
    height: 28px;
    bottom: 30px;
    right: -54px;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__holder--bottom {
    right: -14px;
    bottom: 12px;
    box-shadow: 0px -1px 0 -1px rgba(0, 0, 0, 0.2);
    border-top: 0px;
    height: 19px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .social__youtube__holder--bottom {
    box-shadow: 1px -2px 0 -1px rgba(0, 0, 0, 0.2);
    border-top: 1px solid #000000;
    height: 18px;
  }
}
.social__youtube__holder__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
}
@media only screen and (min-width: 611px) {
  .social__youtube__holder__screw--top {
    display: flex;
    margin: 3px auto 3px 3px;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__holder__screw--bottom {
    display: flex;
    margin: 3px auto 3px 3px;
  }
}

@media only screen and (min-width: 611px) {
  .social__youtube__steel {
    background: #a0a0a0;
    height: 13px;
    position: absolute;
    z-index: -1;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel--top {
    border-top: 1px solid #000000;
    width: 100%;
    top: 18px;
    right: -66px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .social__youtube__steel--top {
    top: 31px;
    right: -89px;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel--bottom {
    border-bottom: 1px solid #000000;
    width: 100%;
    bottom: 18px;
    right: -66px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .social__youtube__steel--bottom {
    right: -89px;
    bottom: 31px;
  }
}
.social__youtube__steel__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
  display: inline-block;
  position: absolute;
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel__screw--one {
    top: 4px;
    left: 3px;
    right: auto;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel__screw--two {
    top: 5px;
    left: 52px;
    right: auto;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel__screw--three {
    top: 4px;
    left: 3px;
    right: auto;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel__screw--four {
    top: 5px;
    left: 44px;
    right: auto;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel__screw--six {
    top: 5px;
    left: 35px;
    right: auto;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__steel__screw--seven {
    top: 5px;
    left: 44px;
    right: auto;
  }
}

.social {
  display: none;
}
@media only screen and (min-width: 611px) {
  .social {
    display: block;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5px;
  }
  .social__youtube {
    border: 1px solid #000000;
    border-radius: 8px;
    background: #0095C5;
    height: 55px;
    width: 55px;
    margin: 5px 40px clamp(10px, 4vh, 100px) auto;
    position: relative;
    padding: 4px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    display: block;
    text-decoration: none;
  }
}
@media only screen and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__youtube {
    height: 80px;
    width: 80px;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__screen {
    border: 1px solid #000000;
    border-radius: 4px;
    background-color: #F14855;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: relative;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__youtube__screen__shine {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.2), inset 0 0 0px 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
}
@media only screen and (min-width: 611px) {
  .social__youtube__screen__shine--topleft {
    border-top: 2px solid rgba(255, 255, 255, 0.4);
    border-left: 2px solid rgba(255, 255, 255, 0.4);
    border-top-left-radius: 4px;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 5px;
    left: 5px;
  }
  .social__youtube__screen__shine--topleft--one {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 1px;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
  }
  .social__youtube__screen__shine--topleft--two {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 0;
    height: 1px;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  .social__youtube__screen__shine--topright {
    border-top: 2px solid rgba(255, 255, 255, 0.4);
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    border-top-right-radius: 4px;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 5px;
    right: 5px;
  }
  .social__youtube__screen__shine--topright--one {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 1px;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  .social__youtube__screen__shine--topright--two {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0;
    height: 1px;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  .social__youtube__screen__shine--topright {
    border-top: 2px solid rgba(255, 255, 255, 0.4);
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    border-top-right-radius: 4px;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 5px;
    right: 5px;
  }
  .social__youtube__screen__shine--topright--one {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 1px;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  .social__youtube__screen__shine--topright--two {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0;
    height: 1px;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  .social__youtube__screen__shine--bottomleft {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    border-left: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom-left-radius: 4px;
    position: absolute;
    width: 6px;
    height: 6px;
    bottom: 5px;
    left: 5px;
  }
  .social__youtube__screen__shine--bottomleft--one {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0px;
    height: 1px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
  }
  .social__youtube__screen__shine--bottomleft--two {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 1px;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top-right-radius: 100%;
    border-top-left-radius: 100%;
  }
  .social__youtube__screen__shine--bottomright {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom-right-radius: 4px;
    position: absolute;
    width: 6px;
    height: 6px;
    bottom: 5px;
    right: 5px;
  }
  .social__youtube__screen__shine--bottomright--one {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 1px;
    height: 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  .social__youtube__screen__shine--bottomright--two {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0;
    height: 1px;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top-right-radius: 100%;
    border-top-left-radius: 100%;
  }
  .social__youtube__screen__text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .social__instagram {
    border: 1px solid #000000;
    border-radius: 4px;
    background: #0095C5;
    margin: 5px 25px clamp(10px, 4vh, 100px) auto;
    height: 30px;
    width: 30px;
    position: relative;
    padding: 12px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    display: block;
  }
}
@media only screen and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__instagram {
    height: 56px;
    width: 56px;
    margin: 10px 40px clamp(10px, 4vh, 100px) auto;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__holder--top {
    right: -14px;
    top: 8px;
    box-shadow: 1px 3px 0 -1px rgba(0, 0, 0, 0.2);
    border-bottom: 0px;
  }
  .social__instagram__holder--top__shadow {
    position: absolute;
  }
  .social__instagram__holder--top__shadow--one {
    width: 13px;
    height: 21px;
    top: 6px;
    right: -16px;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: -1;
  }
  .social__instagram__holder--top__shadow--two {
    width: 13px;
    height: 21px;
    bottom: 6px;
    right: -16px;
    background-color: rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__holder--top__shadow--two {
    z-index: -1;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__holder--top__shadow--three {
    width: 1px;
    height: 26px;
    bottom: 14px;
    right: -15px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__instagram__holder--top__shadow--three {
    height: 28px;
    bottom: 24px;
    right: -3px;
    background-color: #a0a0a0;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__holder--top__shadow--four {
    width: 25px;
    height: 31px;
    bottom: 12px;
    right: -41px;
    z-index: -2;
    background-color: rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__instagram__holder--top__shadow--four {
    height: 28px;
    bottom: 26px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) and (min-width: 1024px) {
  .social__instagram__holder--top {
    box-shadow: 1px -1px 0 -1px rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__holder--bottom {
    right: -14px;
    bottom: 8px;
    box-shadow: 0px -1px 0 -1px rgba(0, 0, 0, 0.2);
    border-top: 0px;
    height: 19px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__instagram__holder--bottom {
    box-shadow: 1px -2px 0 -1px rgba(0, 0, 0, 0.2);
    border-top: 1px solid #000000;
    height: 18px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__steel--top {
    border-top: 1px solid #000000;
    width: 100%;
    top: 14px;
    right: -54px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__instagram__steel--top {
    top: 27px;
    right: -81px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__steel--bottom {
    border-bottom: 1px solid #000000;
    width: 100%;
    bottom: 14px;
    right: -54px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 845px) and (min-height: 471px) {
  .social__instagram__steel--bottom {
    right: -81px;
    bottom: 27px;
  }
}
@media only screen and (min-width: 611px) {
  .social__instagram__screw {
    border: 1px solid #000000;
    border-radius: 100px;
    background-color: #ff59de;
    width: 3px;
    height: 3px;
    position: absolute;
  }
  .social__instagram__screw--one {
    top: 3px;
    left: 3px;
  }
  .social__instagram__screw--two {
    top: 3px;
    right: 3px;
  }
  .social__instagram__screw--three {
    bottom: 3px;
    left: 3px;
  }
  .social__instagram__screw--four {
    bottom: 3px;
    right: 3px;
  }
  .social__instagram__outer {
    border: 1px solid #000000;
    border-radius: 4px;
    width: 106%;
    height: 106%;
    top: -2px;
    left: -2px;
    position: relative;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__outer {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: auto;
    left: auto;
  }
}
@media only screen and (min-width: 611px) {
  .social__instagram__outer__infrared {
    border: 1px solid #000000;
    border-radius: 100px;
    background-color: #FFFFFF;
    width: 3px;
    height: 3px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__outer__infrared {
    width: 4px;
    height: 4px;
  }
}
@media only screen and (min-width: 611px) {
  .social__instagram__outer__infrared--white {
    background-color: #FFFFFF;
    position: absolute;
    top: 2px;
    left: 2px;
  }
  .social__instagram__outer__lens {
    border: 1px solid #000000;
    border-radius: 100px;
    position: absolute;
  }
  .social__instagram__outer__lens--outer {
    background-color: #474747;
    padding: 2px;
    height: 15px;
    width: 15px;
    top: calc(50% - 11px);
    left: calc(50% - 10px);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__outer__lens--outer {
    height: 36px;
    width: 36px;
    top: calc(50% - 21px);
    left: calc(50% - 21px);
  }
}
@media only screen and (min-width: 611px) {
  .social__instagram__outer__lens--inner {
    background-color: #474747;
    padding: 5px;
    height: 3px;
    width: 3px;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__outer__lens--inner {
    padding: 6px;
    height: 22px;
    width: 22px;
    top: calc(50% - 18px);
    left: calc(50% - 18px);
  }
}
@media only screen and (min-width: 611px) {
  .social__instagram__outer__lens--glass {
    background-color: #ff59de;
    height: 7px;
    width: 7px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__outer__lens--glass {
    height: 18px;
    width: 18px;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
  }
}
@media only screen and (min-width: 611px) {
  .social__instagram__outer__lens--glass__glare {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-top-left-radius: 10px;
    height: 30%;
    width: 30%;
    margin-top: 1px;
    margin-left: 1px;
  }
}
@media only screen and (min-width: 611px) and (min-width: 611px) {
  .social__instagram__outer__lens--glass__glare {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    margin-top: 2px;
    margin-left: 2px;
  }
}
@media only screen and (min-width: 611px) {
  .social__facebook {
    border: 1px solid #000000;
    border-radius: 6px;
    background: #0095C5;
    height: 120px;
    width: 80px;
    margin: 5px 40px 5px auto;
    position: relative;
    display: block;
  }
  .social__facebook__speaker--outer {
    border: 1px solid #000000;
    border-radius: 100px;
    background-color: #0095C5;
    padding: 3px;
  }
  .social__facebook__speaker--outer--small {
    margin: 6px auto 4px auto;
    width: 38px;
    height: 38px;
  }
  .social__facebook__speaker--outer--big {
    margin: 4px auto 6px auto;
    width: 50px;
    height: 50px;
  }
  .social__facebook__speaker--inner {
    border: 1px solid #000000;
    border-radius: 100px;
    background-color: #fffb00;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: relative;
  }
  .social__facebook__speaker--dot {
    border: 1px solid #000000;
    border-radius: 100px;
    background-color: #0095C5;
    position: absolute;
    width: 8px;
    height: 8px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
  }
}

/* Glitch test */
/* Our mixin positions a copy of our text
directly on our existing text, while
also setting content to the appropriate
text set in the data-text attribute. */
.glitch {
  position: relative;
  /* Animation provies a slight random skew. Check bottom of doc
  for more information on how to random skew. */
  animation: glitch--skew 1s infinite linear alternate-reverse;
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #ff59de;
  /* Creates an initial clip for our glitch. This works in
  a typical top,right,bottom,left fashion and creates a mask
  to only show a certain part of the glitch at a time. */
  clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch--anim defined below to run in a 5s loop, infinitely,
  with an alternating animation to keep things fresh. */
  animation: glitch--anim 5s infinite linear alternate-reverse;
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #0095C5, 2px 2px #ff59de;
  animation: glitch--anim2 1s infinite linear alternate-reverse;
}

/* Creates an animation with 20 steaps. For each step, it calculates 
a percentage for the specific step. It then generates a random clip
box to be used for the random glitch effect. Also adds a very subtle
skew to change the 'thickness' of the glitch.*/
@keyframes glitch--anim2 {
  0% {
    clip: rect(47px, 9999px, 53px, 0);
    transform: skew(0.85deg);
  }
  5% {
    clip: rect(62px, 9999px, 2px, 0);
    transform: skew(0.27deg);
  }
  10% {
    clip: rect(74px, 9999px, 18px, 0);
    transform: skew(0.99deg);
  }
  15% {
    clip: rect(60px, 9999px, 70px, 0);
    transform: skew(0.38deg);
  }
  20% {
    clip: rect(83px, 9999px, 15px, 0);
    transform: skew(0.98deg);
  }
  25% {
    clip: rect(85px, 9999px, 62px, 0);
    transform: skew(0.01deg);
  }
  30% {
    clip: rect(45px, 9999px, 51px, 0);
    transform: skew(0.63deg);
  }
  35% {
    clip: rect(91px, 9999px, 35px, 0);
    transform: skew(0.73deg);
  }
  40% {
    clip: rect(61px, 9999px, 91px, 0);
    transform: skew(0.13deg);
  }
  45% {
    clip: rect(44px, 9999px, 2px, 0);
    transform: skew(0.1deg);
  }
  50% {
    clip: rect(59px, 9999px, 20px, 0);
    transform: skew(0.93deg);
  }
  55% {
    clip: rect(90px, 9999px, 30px, 0);
    transform: skew(0.73deg);
  }
  60% {
    clip: rect(31px, 9999px, 2px, 0);
    transform: skew(0.19deg);
  }
  65% {
    clip: rect(73px, 9999px, 89px, 0);
    transform: skew(0.93deg);
  }
  70% {
    clip: rect(9px, 9999px, 13px, 0);
    transform: skew(0.75deg);
  }
  75% {
    clip: rect(25px, 9999px, 69px, 0);
    transform: skew(0.14deg);
  }
  80% {
    clip: rect(76px, 9999px, 68px, 0);
    transform: skew(0.54deg);
  }
  85% {
    clip: rect(90px, 9999px, 46px, 0);
    transform: skew(0.24deg);
  }
  90% {
    clip: rect(23px, 9999px, 27px, 0);
    transform: skew(0.93deg);
  }
  95% {
    clip: rect(62px, 9999px, 26px, 0);
    transform: skew(0.78deg);
  }
  100% {
    clip: rect(80px, 9999px, 38px, 0);
    transform: skew(0.36deg);
  }
}
@keyframes glitch--anim {
  0% {
    clip: rect(94px, 9999px, 78px, 0);
    transform: skew(0.85deg);
  }
  5% {
    clip: rect(98px, 9999px, 36px, 0);
    transform: skew(0.28deg);
  }
  10% {
    clip: rect(44px, 9999px, 79px, 0);
    transform: skew(0.72deg);
  }
  15% {
    clip: rect(87px, 9999px, 62px, 0);
    transform: skew(0.53deg);
  }
  20% {
    clip: rect(86px, 9999px, 93px, 0);
    transform: skew(0.85deg);
  }
  25% {
    clip: rect(3px, 9999px, 11px, 0);
    transform: skew(0.55deg);
  }
  30% {
    clip: rect(45px, 9999px, 6px, 0);
    transform: skew(0.16deg);
  }
  35% {
    clip: rect(50px, 9999px, 7px, 0);
    transform: skew(0.59deg);
  }
  40% {
    clip: rect(9px, 9999px, 43px, 0);
    transform: skew(0.87deg);
  }
  45% {
    clip: rect(12px, 9999px, 18px, 0);
    transform: skew(0.62deg);
  }
  50% {
    clip: rect(52px, 9999px, 70px, 0);
    transform: skew(0.69deg);
  }
  55% {
    clip: rect(58px, 9999px, 21px, 0);
    transform: skew(0.2deg);
  }
  60% {
    clip: rect(87px, 9999px, 61px, 0);
    transform: skew(0.95deg);
  }
  65% {
    clip: rect(92px, 9999px, 19px, 0);
    transform: skew(0.84deg);
  }
  70% {
    clip: rect(49px, 9999px, 66px, 0);
    transform: skew(0.93deg);
  }
  75% {
    clip: rect(18px, 9999px, 38px, 0);
    transform: skew(0.57deg);
  }
  80% {
    clip: rect(77px, 9999px, 1px, 0);
    transform: skew(0.35deg);
  }
  85% {
    clip: rect(65px, 9999px, 30px, 0);
    transform: skew(0.13deg);
  }
  90% {
    clip: rect(24px, 9999px, 88px, 0);
    transform: skew(0.11deg);
  }
  95% {
    clip: rect(99px, 9999px, 65px, 0);
    transform: skew(0.41deg);
  }
  100% {
    clip: rect(32px, 9999px, 41px, 0);
    transform: skew(0.2deg);
  }
}
@keyframes glitch--skew {
  0% {
    transform: skew(4deg);
  }
  10% {
    transform: skew(-2deg);
  }
  20% {
    transform: skew(0deg);
  }
  30% {
    transform: skew(-2deg);
  }
  40% {
    transform: skew(-4deg);
  }
  50% {
    transform: skew(-4deg);
  }
  60% {
    transform: skew(0deg);
  }
  70% {
    transform: skew(-4deg);
  }
  80% {
    transform: skew(4deg);
  }
  90% {
    transform: skew(1deg);
  }
  100% {
    transform: skew(1deg);
  }
}
.glitch--more {
  animation: glitch--more 20s infinite;
}
@keyframes glitch--more {
  1% {
    opacity: 0;
  }
  9.9% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  22.9% {
    opacity: 1;
    height: auto;
  }
  23% {
    opacity: 0;
    height: 40px;
  }
  23.1% {
    opacity: 1;
    height: auto;
    transform: scale(1, 1);
  }
  23.3% {
    opacity: 0;
    height: 30px;
    transform: scale(1, 2);
  }
  23.5% {
    opacity: 1;
    height: auto;
    transform: scale(1, 1);
  }
  40.9% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.glitch--on {
  animation: glitch--on 20s infinite;
}
@keyframes glitch--on {
  1% {
    opacity: 0;
  }
  41% {
    opacity: 0;
  }
  41.1% {
    opacity: 1;
    transform: scale(1, 1);
  }
  42.9% {
    opacity: 1;
    height: auto;
    transform: scale(1, 3);
  }
  43.4% {
    opacity: 0.3;
  }
  44.9% {
    opacity: 1;
    height: 20px;
    transform: scale(1, 1);
  }
  45% {
    opacity: 0;
    height: auto;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
  }
}
.glitch--you {
  animation: glitch--you 20s infinite;
}
@keyframes glitch--you {
  1% {
    opacity: 0;
  }
  44.9% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  45.9% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.glitch--tube {
  animation: glitch--tube 20s infinite;
}
@keyframes glitch--tube {
  1% {
    opacity: 0;
  }
  45.9% {
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  56.9% {
    opacity: 1;
  }
  57% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.union-sign {
  border: 1px solid #000000;
  background: #a0a0a0;
  width: 88px;
  height: 12px;
  position: absolute;
  left: calc(50% - 47px);
  top: -4px;
  padding: 2px;
  z-index: 98;
  box-shadow: 16px -1px 0px -15px rgba(0, 0, 0, 0.2);
  display: block;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .union-sign {
    top: -4px;
    left: calc(50% - 47px);
    bottom: auto;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .union-sign {
    width: 112px;
    height: 12px;
    top: -4px;
    left: calc(50% - 56px);
    bottom: auto;
  }
}
.union-sign__text {
  position: absolute;
  top: -16px;
  left: 12px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .union-sign__text {
    position: absolute;
    top: -16px;
    left: 25px;
  }
}
.union-sign__text--front {
  z-index: 98;
}
.union-sign__text--back {
  z-index: 97;
  -webkit-text-stroke: 1px #000000;
}
.union-sign__screw {
  position: absolute;
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 2px;
  height: 2px;
  margin: 6px auto 6px auto;
}
.union-sign__screw--one {
  top: 0px;
  left: 3px;
}
.union-sign__screw--two {
  top: 0px;
  right: 3px;
}

.sign {
  border: 1px solid #000000;
  background: #ebebeb;
  width: 92px;
  height: 36px;
  position: absolute;
  padding: 2px;
  z-index: 99;
  box-shadow: 16px -1px 0px -15px rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(50% - 49px);
  bottom: -15px;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign {
    top: -15px;
    left: calc(50% - 49px);
    bottom: auto;
    display: block;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign {
    width: 140px;
    height: 56px;
    top: -26px;
    left: calc(50% - 71px);
    box-shadow: 27px 0px 0px -26px rgba(0, 0, 0, 0.2), -36px 4px 0px -30px rgba(0, 0, 0, 0.2);
  }
}
.sign__shadow {
  position: absolute;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign__shadow--top {
    width: 98px;
    height: 11px;
    top: -4px;
    left: calc(50% - 52px);
    border-top: 3px solid rgba(0, 0, 0, 0.2);
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    border-right: 3px solid rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__shadow--top {
    width: 146px;
    height: 22px;
    top: -4px;
    left: calc(50% - 76px);
    border-top: 3px solid rgba(0, 0, 0, 0.2);
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    border-right: 3px solid rgba(0, 0, 0, 0.2);
  }
}
.sign__shadow--bottom {
  width: 98px;
  height: 13px;
  top: 28px;
  left: calc(50% - 52px);
  z-index: 1;
  border-left: 3px solid rgba(0, 0, 0, 0.2);
  border-right: 3px solid rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign__shadow--bottom {
    display: none;
  }
}
.sign__inner {
  display: inline-block;
  background-color: #FFFFFF;
  width: 92px;
  position: relative;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__inner {
    width: 140px;
  }
}

.sign__screw {
  background: #000000;
  border-radius: 100px;
  width: 2px;
  height: 2px;
  position: absolute;
}
.sign__screw--one {
  top: 1px;
  left: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__screw--one {
    top: 2px;
    left: 2px;
  }
}
.sign__screw--two {
  top: 1px;
  right: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__screw--two {
    top: 2px;
    right: 2px;
  }
}
.sign__screw--three {
  bottom: 1px;
  left: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__screw--three {
    bottom: 2px;
    left: 2px;
  }
}
.sign__screw--four {
  bottom: 1px;
  right: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__screw--four {
    bottom: 2px;
    right: 2px;
  }
}

.sign__bars {
  background-color: #000000;
  height: 3px;
  position: absolute;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bars {
    height: 4px;
  }
}
.sign__bars--top {
  width: 10px;
  left: -8px;
  top: 9px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bars--top {
    width: 12px;
    left: -9px;
    top: 20px;
  }
}
.sign__bars--top__shadow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  top: 3px;
  left: -1px;
  width: 6px;
  height: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bars--top__shadow {
    top: 3px;
    left: -1px;
    width: 8px;
    height: 2px;
  }
}
.sign__bars--middle {
  width: 6px;
  left: -6px;
  top: 14px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bars--middle {
    width: 8px;
    left: -7px;
    top: 26px;
  }
}
.sign__bars--middle__shadow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  top: -1px;
  left: -1px;
  width: 5px;
  height: 5px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bars--middle__shadow {
    top: -1px;
    left: -1px;
    width: 6px;
    height: 6px;
  }
}
.sign__bars--bottom {
  width: 8px;
  left: -7px;
  top: 19px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bars--bottom {
    width: 10px;
    left: -8px;
    top: 32px;
  }
}
.sign__bars--bottom__shadow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  top: -1px;
  left: -1px;
  width: 5px;
  height: 5px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bars--bottom__shadow {
    top: 3px;
    left: -1px;
    width: 5px;
    height: 2px;
  }
}

.sign__box {
  border: 1px solid #000000;
  background-color: #525252;
  position: absolute;
  width: 12px;
  height: 4px;
  top: -8px;
  left: 0px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__box {
    width: 16px;
    height: 6px;
    top: -10px;
    left: 0px;
  }
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign__box__shadow {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    top: -2px;
    left: -2px;
    width: 16px;
    height: 3px;
    z-index: -1;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__box__shadow {
    top: -3px;
    left: -3px;
    width: 22px;
    height: 6px;
  }
}
.sign__box--dot {
  border-radius: 100px;
  background-color: #000000;
  position: absolute;
  width: 2px;
  height: 2px;
  top: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__box--dot {
    top: 2px;
  }
}
.sign__box--one {
  left: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__box--one {
    left: 2px;
  }
}
.sign__box--two {
  left: 5px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__box--two {
    left: 7px;
  }
}
.sign__box--three {
  left: 9px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__box--three {
    left: 12px;
  }
}

.sign__wire {
  position: absolute;
  border-radius: 100px;
  box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0 0 0 1px #000000, 0 0 0 2px #ff59de, 0 0 0 3px #000000, 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
  width: 5px;
  height: 5px;
  top: 30px;
  left: calc(50% + 46px);
  z-index: 2;
  clip-path: inset(-82% -84% -84% 70%);
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign__wire {
    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0 0 0 1px #000000, 0 0 0 2px #ff59de, 0 0 0 3px #000000;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__wire {
    width: 10px;
    height: 10px;
    top: 43px;
    left: calc(50% + 68px);
    box-shadow: none;
    clip-path: inset(-50% -50% -50% 48%);
  }
}

.sign__light {
  border: 1px solid #ff59de;
  border-radius: 100px;
  width: 4px;
  height: 4px;
  position: absolute;
  box-shadow: 0px 0px 2px #ff59de, 0px 0px 5px #ff59de, 0px 0px 15px #ff59de;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__light {
    width: 5px;
    height: 5px;
  }
}
.sign__light--one {
  bottom: -9px;
  right: 2px;
  transform: translate(0.5px, 0);
  background-color: #ffddf8;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__light--one {
    bottom: -10px;
    right: 3px;
  }
}
.sign__light--two {
  bottom: -9px;
  right: 12px;
  transform: translate(0.5px, 0);
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__light--two {
    bottom: -10px;
    right: 17px;
  }
}
.sign__light--three {
  bottom: -9px;
  right: 22px;
  transform: translate(0.5px, 0);
  background-color: #ffddf8;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__light--three {
    bottom: -10px;
    right: 31px;
  }
}

.sign__base {
  background-color: #000000;
  width: 7px;
  height: 4px;
  position: absolute;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__base {
    width: 10px;
  }
}
.sign__base--one {
  bottom: -6px;
  right: 1px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__base--one {
    bottom: -6px;
  }
}
.sign__base--two {
  bottom: -6px;
  right: 11px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__base--two {
    right: 15px;
  }
}
.sign__base--three {
  bottom: -6px;
  right: 21px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__base--three {
    right: 29px;
  }
}

.sign__logo {
  height: 32px;
  padding: 2px 2px 2px 5px;
  display: inline-block;
  vertical-align: middle;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__logo {
    height: 48px;
    padding: 4px 2px 4px 10px;
  }
}
.sign__logo--cross {
  stroke: #ff59de;
  stroke-width: 3.8537;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.sign__text {
  display: inline-block;
  position: absolute;
  right: -27px;
  top: 12px;
  left: auto;
  width: 80px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__text {
    right: -4px;
    top: 6px;
  }
}

.sign__regular {
  display: block;
  font-family: "Inkface", sans-serif;
  font-weight: 300;
  line-height: 0.2;
  font-size: 18.2px;
  text-align: left;
  position: absolute;
  top: 1px;
  left: 0.5px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__regular {
    line-height: 0.7;
    font-size: 26px;
    margin-top: 7px;
    margin-left: -1.2px;
    top: 0px;
    left: 0px;
  }
}
.sign__regular--front {
  color: #ffddf8;
  z-index: 2;
}
.sign__regular--back {
  -webkit-text-stroke: 1.7px #ff59de;
  z-index: 1;
  text-shadow: 0px 0px 2px #ff59de, 0px 0px 5px #ff59de, 0px 0px 15px #ff59de;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__regular--back {
    -webkit-text-stroke: 2px #ff59de;
  }
}

.sign__bold {
  font-family: "Inkface", sans-serif;
  font-weight: 700;
  font-size: 9.9px;
  text-align: right;
  position: absolute;
  top: 10px;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bold {
    font-size: 14px;
    top: 27px;
  }
}
.sign__bold--front {
  color: #ffddf8;
  z-index: 2;
}
.sign__bold--back {
  -webkit-text-stroke: 1.7px #ff59de;
  z-index: 1;
  text-shadow: 0px 0px 2px #ff59de, 0px 0px 5px #ff59de, 0px 0px 15px #ff59de;
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign__bold--back {
    -webkit-text-stroke: 2px #ff59de;
  }
}

.sign {
  position: absolute;
  top: -15px;
  z-index: 99;
  animation: none;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign {
    top: -15px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign {
    top: -26px;
  }
}

.sign-crane {
  position: absolute;
  width: 13px;
  height: 250px;
  background: #a0a0a0;
  border: 1px solid #000000;
  left: calc(50% - 6.5px);
  z-index: 1;
  animation: none;
  display: none;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign-crane {
    display: block;
    top: -432px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign-crane {
    top: -422px;
  }
}

html.sign-intro-animate .sign {
  animation: dropSignDefault 2s ease-in-out 7.5s both;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  html.sign-intro-animate .sign {
    animation-name: dropSignMobile;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  html.sign-intro-animate .sign {
    animation-name: dropSignDesktop;
  }
}

html.sign-intro-animate .sign-crane {
  animation: moveCraneDefault 3s ease-in-out 8s forwards;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  html.sign-intro-animate .sign-crane {
    animation-name: moveCraneMobile;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  html.sign-intro-animate .sign-crane {
    animation-name: moveCraneDesktop;
  }
}

@keyframes dropSignDefault {
  from {
    top: -200px;
  }
  to {
    top: -15px;
  }
}
@keyframes moveCraneDefault {
  0% {
    top: -432px;
  }
  50% {
    top: -247px;
  }
  100% {
    top: -432px;
  }
}
@keyframes dropSignMobile {
  from {
    top: -200px;
  }
  to {
    top: -15px;
  }
}
@keyframes moveCraneMobile {
  0% {
    top: -432px;
  }
  50% {
    top: -247px;
  }
  100% {
    top: -432px;
  }
}
@keyframes dropSignDesktop {
  from {
    top: -200px;
  }
  to {
    top: -26px;
  }
}
@keyframes moveCraneDesktop {
  0% {
    top: -422px;
  }
  50% {
    top: -248px;
  }
  100% {
    top: -422px;
  }
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .sign.sign-frozen {
    top: -15px;
  }
}
@media only screen and (min-width: 845px) and (min-height: 471px) {
  .sign.sign-frozen {
    top: -26px;
  }
}

.card {
  position: relative;
  padding-bottom: 4px;
  max-width: 100%;
  margin-left: 1px;
  -o-object-fit: contain;
     object-fit: contain;
}
.card--img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 4/5;
}
.card--1-1 {
  max-width: 100%;
  margin-left: 1px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 1/1;
}
.card--4-5 {
  max-width: 100%;
  margin-left: 1px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 4/5;
}
.card--9-16 {
  max-width: 100%;
  margin-left: 1px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 9/16;
}
.card--10-16 {
  max-width: 100%;
  margin-left: 1px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 10.7/16;
}
.card--5-4 {
  max-width: 100%;
  margin-left: 1px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 5/4;
}

.video__wrapper {
  position: relative;
}
.video__wrapper--1-1 {
  position: relative;
  padding-bottom: 100%; /* 1:1 */
}
.video__wrapper--4-5 {
  position: relative;
  padding-bottom: 125%; /* 4:5 */
}
.video__wrapper--9-16 {
  position: relative;
  padding-bottom: 56.4%; /* 9:16 */
}
.video__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  z-index: -1;
  margin-left: -2px;
  margin-right: 0px;
}
@media only screen and (min-width: 1024px) {
  .content {
    margin-left: -2px;
    margin-right: 0px;
  }
}

.panels-container {
  position: fixed;
  top: 2px;
  right: 2px;
  bottom: 3px;
  left: 2px;
  pointer-events: none;
}
.panels-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  z-index: 100;
}

.panel__outer {
  border: 1px solid #000000;
  background-color: #FFFFFF;
  padding: 3px;
  box-shadow: 0 0 0 1px #a0a0a0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
}
.panel__outer:nth-child(1) {
  left: 0;
  top: 0;
  width: calc(40% - 1px);
  height: 37%;
}
.panel__outer:nth-child(2) {
  left: 40%;
  top: 0;
  width: calc(20% - 1px);
  height: 25%;
}
.panel__outer:nth-child(3) {
  left: 60%;
  top: 0;
  width: 40%;
  height: calc(32% - 1px);
}
.panel__outer:nth-child(4) {
  left: 25%;
  top: calc(37% + 1px);
  width: calc(35% - 1px);
  height: calc(42% - 1px);
}
.panel__outer:nth-child(5) {
  left: 0;
  top: calc(37% + 1px);
  width: calc(25% - 1px);
  height: calc(35% - 1px);
}
.panel__outer:nth-child(6) {
  z-index: 3;
  left: 40%;
  top: 32%;
  width: calc(30% - 1px);
  height: 38%;
}
.panel__outer:nth-child(7) {
  left: 70%;
  top: 32%;
  width: 30%;
  height: 38%;
}
.panel__outer:nth-child(8) {
  left: 0;
  top: calc(70% + 1px);
  width: calc(22% - 1px);
  height: 30%;
}
.panel__outer:nth-child(9) {
  left: 60%;
  top: calc(70% + 1px);
  width: 40%;
  height: 30%;
}
.panel__outer:nth-child(10) {
  left: calc(22% + 0px);
  top: calc(79% + 1px);
  width: calc(25% - 1px);
  height: 21%;
}
.panel__outer:nth-child(11) {
  left: calc(47% + 0px);
  top: calc(85% + 1px);
  width: calc(13% - 1px);
  height: 15%;
}
.panel__inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 80% 20%; /* 70% space for overlay, 30% for text */
  align-items: center;
  justify-items: center;
  background-color: #F2E9E9;
}
.panel__inner::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  right: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0.9;
  background-image: radial-gradient(circle at center, #9a9494 0%, #9a9494 5%, transparent 8%), radial-gradient(circle at center, #8c8686 0%, #8c8686 4%, transparent 7%), radial-gradient(circle at center, #a19b9b 0%, #a19b9b 6%, transparent 9%), radial-gradient(circle at center, #928c8c 0%, #928c8c 4.5%, transparent 7.5%), radial-gradient(circle at center, #b4aeae 0%, #b4aeae 5.5%, transparent 8.5%), radial-gradient(circle at center, #ada7a7 0%, #ada7a7 4%, transparent 7%), radial-gradient(circle at center, #bbb5b5 0%, #bbb5b5 6%, transparent 9%), radial-gradient(circle at center, #b7b1b1 0%, #b7b1b1 5%, transparent 8%), radial-gradient(circle at center, #c8c2c2 0%, #c8c2c2 4.5%, transparent 7.5%), radial-gradient(circle at center, #ccc6c6 0%, #ccc6c6 5.5%, transparent 8.5%), radial-gradient(circle at center, #d1cbcb 0%, #d1cbcb 4%, transparent 7%), radial-gradient(circle at center, #d5cfcf 0%, #d5cfcf 5%, transparent 8%);
  background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px;
  background-position: 0px 0px, 12px 0px, 24px 0px, 36px 0px, 0px 12px, 12px 12px, 24px 12px, 36px 12px, 0px 24px, 12px 24px, 24px 24px, 36px 24px;
}
.panel__screw {
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #ff59de;
  width: 3px;
  height: 3px;
  position: absolute;
  z-index: 2;
}
.panel__screw--one {
  top: 5px;
  left: 5px;
}
.panel__screw--two {
  top: 5px;
  right: 5px;
}
.panel__screw--three {
  bottom: 5px;
  left: 5px;
}
.panel__screw--four {
  bottom: 5px;
  right: 5px;
}
.panel__text {
  display: inline;
  transform: scale(1.3);
  opacity: 90%;
  text-align: center;
  grid-row: 2; /* Second row in grid */
  padding-bottom: 5%;
}

.svg-overlay {
  width: 90%;
  height: 75%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 90%;
  z-index: 1;
  grid-row: 1; /* First row in grid */
}

@keyframes dot-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
a {
  text-decoration: none;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 9px;
  font-family: "Archivo", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.btn > * {
  pointer-events: none;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: min(24px, 35%);
  transform: scale(0);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 1;
}
.btn:hover::before {
  border-radius: 11px;
  transform: scale(0.86, 0.6);
}
.btn:active::before {
  transform: scale(1.1);
  transition: transform 0.08s ease;
}
.btn:focus-visible {
  outline: 3px solid #ff59de;
  outline-offset: 4px;
}

.btn__frame {
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  z-index: 2;
}

.btn__content {
  position: relative;
  z-index: 3;
  text-align: center;
  line-height: 1.2;
}
.btn__content--flex {
  display: flex;
  align-items: center;
}

.btn__dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff59de;
  z-index: 4;
  animation: dot-pulse 1.6s ease-in-out infinite;
}

.btn--primary {
  background: #ee61ce;
  border-color: #000;
  color: #fff;
}
.btn--primary::before {
  background: rgba(0, 0, 0, 0.2);
}
.btn--primary .btn__frame {
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--neutral {
  background: #fff;
  border-color: #000;
  color: #000;
}
.btn--neutral::before {
  background: rgba(255, 89, 222, 0.25);
}
.btn--neutral .btn__frame {
  border-color: rgba(0, 0, 0, 0.28);
}

.btn--dark {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn--dark::before {
  background: rgba(255, 255, 255, 0.18);
}
.btn--dark .btn__frame {
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--lg {
  padding: 10px 10px;
  font-size: 16px;
}

.btn--md {
  padding: 6px 14px;
  font-size: 10px;
}
.btn--md--folder2 {
  left: 30px;
}

.btn--sm {
  padding: 10px 20px;
  font-size: 24px;
}

.btn--icon {
  width: 35px;
  height: 34px;
  font-size: 13px;
}

.btn--play {
  padding: 8px 8px;
  font-size: 14px;
}

.btn--full {
  width: 100%;
}

.play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-right: 0;
  border-left: 20px solid currentColor;
  margin-right: 16px;
  flex-shrink: 0;
}

.btn-status {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
}
.btn-status--light {
  color: #fff;
}
.btn-status .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff59de;
  flex-shrink: 0;
  animation: dot-pulse 1.6s ease-in-out infinite;
}

/* Responsive Adjustments */
@media only screen and (min-width: 360px) {
  .system-status-bar {
    padding: 3px 8px;
  }
  .folder-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .folder-header .folder-status {
    margin-top: 5px;
  }
}
/* Base Layout */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #000000;
  color: #FFFFFF;
}

/* Main Container */
.projects-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ebebeb;
  color: #FFFFFF;
  padding-top: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media only screen and (min-width: 1024px) {
  .projects-container {
    width: 100%;
    padding-top: 20px;
  }
}

/* System Status Bar */
.system-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #525252;
  display: flex;
  justify-content: space-between;
  padding: 5px 15px;
  border-bottom: 1px solid #ff59de;
  z-index: 10;
  box-sizing: border-box;
}
.system-status-bar .status-indicator {
  display: flex;
  align-items: center;
}
.system-status-bar .status-indicator.online .status-dot {
  background-color: #ff59de;
}
.system-status-bar .status-indicator .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse 2s infinite;
}
.system-status-bar .timestamp, .system-status-bar .classification {
  padding: 0 10px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 89, 222, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 89, 222, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 89, 222, 0);
  }
}
/* Folder Container */
.folder-container {
  position: relative;
  width: calc(100% - 4px);
  height: auto;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: 50px 2px auto 2px;
  overflow: visible; /* Ensure the container doesn't create its own scroll context */
  padding-bottom: 14px;
}
@media only screen and (min-width: 1024px) {
  .folder-container {
    width: 96%;
  }
}

/* Folder */
.folder {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #c6c6c6;
  z-index: 2;
  display: none; /* Hide by default */
  flex-direction: column;
  border: 1px solid #000000;
  box-sizing: border-box;
  padding: 2%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}
.folder .folder-content {
  margin-bottom: 1px;
  padding: clamp(12px, 1vw + 12px, 16px);
  overflow-y: auto;
  flex-grow: 1;
  background-color: #ebebeb;
  border: 1px solid #000000;
  color: #000000;
  position: relative;
}
@media only screen and (min-width: 1024px) {
  .folder .folder-content {
    padding: clamp(16px, 1vw + 16px, 20px);
  }
}

/* Folder Header */
.folder-header {
  padding: 4px 6px;
  display: flex;
  align-items: left;
  border-bottom: 1px solid #000000;
  margin-top: 1px;
  margin-bottom: -1px;
  max-height: 100px;
  border-radius: 3px 3px 0 0;
}
@media only screen and (min-width: 1024px) {
  .folder-header {
    padding: 8px 12px;
  }
}
.folder-header.restricted {
  background-color: #474747;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}
.folder-header.restricted .archive-logo {
  width: auto;
  height: 50px;
}
@media only screen and (min-width: 1024px) {
  .folder-header.restricted .archive-logo {
    height: 60px;
  }
}
.folder-header.restricted .vibe-logo {
  width: auto;
  height: 36px;
  padding: 4px 2px 2px 0;
}
@media only screen and (min-width: 1024px) {
  .folder-header.restricted .vibe-logo {
    height: 40px;
  }
}

/* Folder Variations */
.folder.folder-2 {
  background-color: #a0a0a0;
  z-index: 1;
}

/* Folder Tabs */
.folder-tab {
  position: absolute;
  width: 210px;
  height: 36px;
  background-color: inherit;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 3px 0 0 0;
  padding-left: 10px;
  padding-top: 4px;
}
@media only screen and (min-width: 360px) {
  .folder-tab {
    width: 220px;
  }
}

/* Core Archive Tab */
.folder-tab.folder-tab1 {
  clip-path: polygon(0% 0%, 68.7% 0%, 87.6% 100%, 0% 100%);
  background-color: #c6c6c6;
  left: 0px;
  z-index: 3;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  top: -34px;
}
@media only screen and (min-width: 360px) {
  .folder-tab.folder-tab1 {
    clip-path: polygon(0% 0%, 68.8% 0%, 86.8% 100%, 0% 100%);
  }
}

/* Recovered History Tab */
.folder-tab.folder-tab2 {
  left: 15px;
  clip-path: polygon(18.2% 0%, 83.2% 0%, 102.1% 100%, 0% 96%);
  background-color: #a0a0a0;
  border-top: 1px solid #000000;
  top: -30px;
}
@media only screen and (min-width: 268px) and (min-height: 301px) {
  .folder-tab.folder-tab2 {
    left: 37px;
  }
}
@media only screen and (min-width: 360px) {
  .folder-tab.folder-tab2 {
    left: 97px;
    clip-path: polygon(18.1% 0%, 83.3% 0%, 101.4% 100%, 0% 99.7%);
  }
}
@media only screen and (min-width: 425px) {
  .folder-tab.folder-tab2 {
    right: auto;
    left: 156px;
  }
}

.folder-tab2 .btn {
  margin-left: auto;
  margin-right: auto;
}

/* Both folder-tab buttons share the same minimum width so they appear consistent */
.folder-tab .btn {
  min-width: 120px;
}

/* Folder Tab Borders */
.folder-tab.folder-tab2::before,
.folder-tab.folder-tab2::after,
.folder-tab.folder-tab1::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 1px;
  height: 128%;
  background: #000000;
  transform-origin: top;
}

/* Left border */
.folder-tab.folder-tab2::before {
  left: calc(15% + 7px);
  transform: rotate(45deg);
}

/* Right border */
.folder-tab.folder-tab2::after {
  right: calc(15% + 4px);
  transform: rotate(-45deg);
}

/* Right border */
.folder-tab.folder-tab1::after {
  right: calc(30% + 3px);
  transform: rotate(-45deg);
}

/* Folder Toggle */
/* Hide Radio Inputs */
input[type=radio] {
  display: none;
}

/* Show the active folder - Updated for multiple projects */
[id^=folder-tab1]:checked ~ .folder-1 {
  display: flex;
}

[id^=folder-tab2]:checked ~ .folder-2 {
  display: flex;
  z-index: 4;
}

/* Active Folder Toggle - Tab positions - Updated for multiple projects */
[id^=folder-tab2]:checked ~ .folder-tab.folder-tab2 {
  z-index: 5;
  top: -34px;
}

.folder-container:has(> input[id^=folder-tab2]:checked) .folder-tab.folder-tab1 {
  z-index: 3;
  top: -30px;
}

/* Gallery Container */
.folder .gallery-container {
  margin-top: -1px;
  border-top: none;
  width: 100%;
}
.folder .gallery-container.propaganda {
  background-color: #a0a0a0;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #525252;
  color: #FFFFFF;
}

.folder-1 .gallery-container {
  background-color: #c6c6c6;
}

/* Content Styling */
.content-section {
  margin-bottom: 20px;
}

.skill-list {
  padding: 0 0 0 16px;
  margin: 0;
}

.production-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.production-tags .tag {
  background-color: #FFFFFF;
  color: #000000;
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #a0a0a0;
}

.project-details-grid {
  display: grid;
  grid-template-columns: min-content auto;
  gap: 0px 4px;
  margin: 0 0 10px 0;
  align-items: baseline;
}
.project-details-grid dt, .project-details-grid dd {
  margin: 0;
}

/* Propaganda Section Styles */
.propaganda-wrapper {
  background-color: #0095C5;
  padding: 10px 10px;
  max-width: 900px;
  margin: 2px auto;
}
@media only screen and (min-width: 1024px) {
  .propaganda-wrapper {
    padding: 20px 30px;
  }
}
.propaganda-wrapper .propaganda-divider {
  border-top: 2px solid #000000;
  width: 100%;
  margin: 10px 0;
}
.propaganda-wrapper .propaganda-title-block .headline-box {
  background-color: #386A8E;
  padding: 10px;
  display: inline-block;
}
.propaganda-wrapper .propaganda-content {
  margin-top: 20px;
}
.propaganda-wrapper .propaganda-content p {
  margin-bottom: 15px;
}
.propaganda-wrapper .propaganda-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;
}
@media only screen and (min-width: 1024px) {
  .propaganda-wrapper .propaganda-footer {
    margin-top: 30px;
  }
}
.propaganda-wrapper .propaganda-footer .propaganda-logo {
  height: clamp(50px, 1vw + 55px, 64px);
  margin: 10px 8px 0 0;
}
@media only screen and (min-width: 1024px) {
  .propaganda-wrapper .propaganda-footer .propaganda-logo {
    width: 84px;
    height: clamp(64px, 1vw + 72px, 84px);
    margin: -12px 8px 0 0;
  }
}
.propaganda-wrapper .propaganda-footer .propaganda-logo svg {
  height: 100%;
  width: auto;
  display: block;
}

/* Gallery styles - Base styles shared between projects and modal */
.gallery {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.gallery__grid {
  display: grid;
  gap: 3px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 611px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1024px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 267px) {
  .gallery__grid {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-height: 300px) {
  .gallery__grid {
    grid-template-columns: 1fr;
  }
}
.gallery__item {
  width: 100%;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  position: relative;
}
.gallery__item.union-item {
  overflow: hidden;
}
.gallery__media {
  width: 100%;
  position: relative;
  background: transparent;
  overflow: hidden;
  background-color: #000000;
}
.gallery__media img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery__media {
  /* Remove the media-overlay and hover effect */
}
.gallery__media .media-overlay {
  display: none;
}
.gallery__media .union-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.gallery__video-container {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
}
.gallery__video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.gallery__caption {
  position: absolute;
  bottom: 0px;
  left: 0px;
  max-width: 95%;
  border-radius: 3px;
  z-index: 3;
  padding: 0 0 4px 8px;
}

/* Effect classes for modal gallery items */
/* Add glitch effects to Campaign Videos and Shorts sections */
section.project-section:nth-of-type(2),
section.project-section:nth-of-type(3) { /* Shorts section */ }
section.project-section:nth-of-type(2) .gallery__item:hover .gallery__video-container::after,
section.project-section:nth-of-type(2) .gallery__item:hover .gallery__video-container::before,
section.project-section:nth-of-type(2) .gallery__item:hover .gallery__caption h5::after,
section.project-section:nth-of-type(2) .gallery__item:hover .gallery__caption h5::before,
section.project-section:nth-of-type(3) .gallery__item:hover .gallery__video-container::after,
section.project-section:nth-of-type(3) .gallery__item:hover .gallery__video-container::before,
section.project-section:nth-of-type(3) .gallery__item:hover .gallery__caption h5::after,
section.project-section:nth-of-type(3) .gallery__item:hover .gallery__caption h5::before {
  z-index: 20; /* Ensure visibility */
}

/* For projects.php - Target continuous grid */
/* Video Thumb Styles */
.video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.video-thumb .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
}
.video-thumb .play-button .btn--play {
  white-space: nowrap;
  font-size: 13px;
  padding: 9px 14px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.video-thumb .play-button .btn--play .play-icon {
  border-left-width: 13px;
  border-top-width: 7px;
  border-bottom-width: 7px;
  margin-right: 10px;
}

/* Four Glitch Effect Variations with effect classes */
@media (hover: hover) and (pointer: fine) {
  /* VARIATION 1: Pink Flicker with ACCESSING label */
  .effect-1:hover .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    animation: flicker 0.6s ease-in-out;
    z-index: 10;
  }
  .effect-1:hover .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__video-container::before {
    content: "ACCESSING";
    position: absolute;
    top: 15px;
    right: 15px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: #ff59de; /* Pinkish color for Digital Calamari reference */
    z-index: 20;
    animation: flicker 0.8s ease-in-out;
    opacity: 0.9;
  }
  .effect-1:hover .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption h5 {
    position: relative;
    display: inline-block;
    color: #ff59de;
  }
  .effect-1:hover .gallery__caption h5::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption h5::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption h5::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption h5::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption h5::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption h5::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption h5::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption h5::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption h5::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption h5::after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 #ff59de;
    top: 0;
    color: #ebebeb;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
  }
  .effect-1:hover .gallery__caption h5::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption h5::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption h5::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption h5::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption h5::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption h5::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption h5::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption h5::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption h5::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption h5::before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 #0095C5;
    top: 0;
    color: #ebebeb;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
  }
  .effect-1:hover .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption p {
    color: #ff59de; /* Pinkish color pulse */
    animation: colorPulse 1.2s ease-in-out;
  }
  .effect-1:hover, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) {
    /* Add play button coloring for effect-1 */
  }
  .effect-1:hover .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(1) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(5) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(9) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(2) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(6) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(10) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(1) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(5) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(9) .play-button .btn--play {
    color: #ff59de;
    border-color: rgba(255, 89, 222, 0.8);
  }
  /* VARIATION 2: Red Scanlines Effect */
  .effect-2:hover .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 51%, rgba(255, 255, 255, 0.05) 100%);
    background-size: 100% 4px;
    pointer-events: none;
    animation: scanlines 0.3s linear infinite;
    z-index: 10;
    opacity: 0.7;
  }
  .effect-2:hover .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__video-container::before {
    content: "ALERT";
    position: absolute;
    top: 15px;
    right: 15px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: #F14855; /* Brighter red */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 3px 8px;
    z-index: 20;
    animation: errorBlink 0.3s step-end infinite;
    opacity: 0.9;
  }
  .effect-2:hover .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption h5 {
    color: #F14855;
  }
  .effect-2:hover .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(2) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(6) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(10) .gallery__caption p {
    animation: colorPulse-red 1.2s ease-in-out;
  }
  .effect-2:hover, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(2), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(6), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(10), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(3), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(7), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(11), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(2), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(6), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(10) {
    /* Add play button coloring for effect-2 */
  }
  .effect-2:hover .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(2) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(6) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(10) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(3) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(7) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(11) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(2) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(6) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(10) .play-button .btn--play {
    color: #F14855;
    border-color: rgba(241, 72, 85, 0.8);
  }
  /* VARIATION 3: Blue Digital distortion with loading progress */
  .effect-3:hover .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 10;
    animation: pixelate 1s ease-in-out;
  }
  .effect-3:hover .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__video-container::before {
    content: "LOADING...0%";
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: #0095C5; /* Cyan for tech feel - keep as is since it's not in the variables */
    z-index: 20;
    animation: loadingProgress 5s linear forwards;
    opacity: 0.9;
    border-bottom: 1px solid #0095C5;
    padding: 2px 5px;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .effect-3:hover .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__caption h5 {
    position: relative;
    color: #0095C5;
  }
  .effect-3:hover .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(3) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(7) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(11) .gallery__caption p {
    animation: colorPulse-blue 1.2s ease-in-out;
  }
  .effect-3:hover, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(3), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(7), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(11), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(4), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(8), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(12), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(3), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(7), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(11) {
    /* Add play button coloring for effect-3 */
  }
  .effect-3:hover .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(3) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(7) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(11) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(4) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(8) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(12) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(3) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(7) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(11) .play-button .btn--play {
    color: #0095C5;
    border-color: rgba(0, 149, 197, 0.8);
  }
  /* VARIATION 4: Yellow Interference Pattern */
  .effect-4:hover .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__video-container::after, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__video-container::after, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__video-container::after, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 251, 0, 0.1), rgba(255, 251, 0, 0.1) 1px, transparent 1px, transparent 6px);
    pointer-events: none;
    z-index: 10;
    animation: interference 3s linear infinite;
  }
  .effect-4:hover .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__video-container::before, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__video-container::before, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__video-container::before, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__video-container::before {
    content: "SCANNING";
    position: absolute;
    top: 15px;
    right: 15px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: #fffb00;
    z-index: 20;
    opacity: 0.9;
    letter-spacing: 1px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 2px 5px;
  }
  .effect-4:hover .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__caption h5, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption h5, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__caption h5, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__caption h5 {
    position: relative;
    color: #fffb00;
  }
  .effect-4:hover .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__caption p, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(1) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(5) .gallery__caption p, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(9) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(4) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(8) .gallery__caption p, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(12) .gallery__caption p {
    animation: colorPulse-yellow 1.2s ease-in-out;
  }
  .effect-4:hover, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(4), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(8), section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(12), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(1), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(5), section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(9), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(4), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(8), .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(12) {
    /* Add play button coloring for effect-4 */
  }
  .effect-4:hover .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(4) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(8) .play-button .btn--play, section.project-section:nth-of-type(2) .gallery__grid > .gallery__item:hover:nth-child(12) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(1) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(5) .play-button .btn--play, section.project-section:nth-of-type(3) .gallery__grid > .gallery__item:hover:nth-child(9) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(4) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(8) .play-button .btn--play, .folder .gallery-container .gallery__grid > .gallery__item:hover:nth-child(12) .play-button .btn--play {
    color: #fffb00;
    border-color: rgba(255, 251, 0, 0.8);
  }
}
/* Effect animations */
@keyframes flicker {
  0% {
    opacity: 0.3;
  }
  5% {
    opacity: 0.9;
  }
  10% {
    opacity: 0.3;
  }
  15% {
    opacity: 0.8;
  }
  20% {
    opacity: 0.3;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0.3;
  }
  35% {
    opacity: 0.7;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes colorPulse {
  0% {
    color: #ebebeb;
  }
  30% {
    color: #ff59de;
  }
  100% {
    color: #ebebeb;
  }
}
@keyframes colorPulse-red {
  0% {
    color: #ebebeb;
  }
  30% {
    color: #F14855;
  }
  100% {
    color: #ebebeb;
  }
}
@keyframes colorPulse-blue {
  0% {
    color: #ebebeb;
  }
  30% {
    color: #0095C5;
  }
  100% {
    color: #ebebeb;
  }
}
@keyframes colorPulse-yellow {
  0% {
    color: #ebebeb;
  }
  30% {
    color: #fffb00;
  }
  100% {
    color: #ebebeb;
  }
}
@keyframes noise-anim {
  0% {
    clip: rect(51px, 9999px, 29px, 0);
  }
  5% {
    clip: rect(70px, 9999px, 87px, 0);
  }
  10% {
    clip: rect(26px, 9999px, 14px, 0);
  }
  15% {
    clip: rect(24px, 9999px, 53px, 0);
  }
  20% {
    clip: rect(72px, 9999px, 49px, 0);
  }
  25% {
    clip: rect(30px, 9999px, 16px, 0);
  }
  30% {
    clip: rect(43px, 9999px, 18px, 0);
  }
  35% {
    clip: rect(41px, 9999px, 83px, 0);
  }
  40% {
    clip: rect(4px, 9999px, 7px, 0);
  }
  45% {
    clip: rect(89px, 9999px, 77px, 0);
  }
  50% {
    clip: rect(13px, 9999px, 1px, 0);
  }
  55% {
    clip: rect(85px, 9999px, 12px, 0);
  }
  60% {
    clip: rect(61px, 9999px, 24px, 0);
  }
  65% {
    clip: rect(15px, 9999px, 62px, 0);
  }
  70% {
    clip: rect(40px, 9999px, 4px, 0);
  }
  75% {
    clip: rect(91px, 9999px, 37px, 0);
  }
  80% {
    clip: rect(31px, 9999px, 90px, 0);
  }
  85% {
    clip: rect(82px, 9999px, 15px, 0);
  }
  90% {
    clip: rect(83px, 9999px, 65px, 0);
  }
  95% {
    clip: rect(5px, 9999px, 52px, 0);
  }
  100% {
    clip: rect(53px, 9999px, 81px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(18px, 9999px, 4px, 0);
  }
  5% {
    clip: rect(76px, 9999px, 27px, 0);
  }
  10% {
    clip: rect(79px, 9999px, 38px, 0);
  }
  15% {
    clip: rect(95px, 9999px, 45px, 0);
  }
  20% {
    clip: rect(4px, 9999px, 34px, 0);
  }
  25% {
    clip: rect(1px, 9999px, 78px, 0);
  }
  30% {
    clip: rect(44px, 9999px, 62px, 0);
  }
  35% {
    clip: rect(89px, 9999px, 44px, 0);
  }
  40% {
    clip: rect(3px, 9999px, 56px, 0);
  }
  45% {
    clip: rect(11px, 9999px, 52px, 0);
  }
  50% {
    clip: rect(8px, 9999px, 9px, 0);
  }
  55% {
    clip: rect(88px, 9999px, 36px, 0);
  }
  60% {
    clip: rect(73px, 9999px, 50px, 0);
  }
  65% {
    clip: rect(59px, 9999px, 29px, 0);
  }
  70% {
    clip: rect(85px, 9999px, 95px, 0);
  }
  75% {
    clip: rect(95px, 9999px, 66px, 0);
  }
  80% {
    clip: rect(32px, 9999px, 24px, 0);
  }
  85% {
    clip: rect(8px, 9999px, 50px, 0);
  }
  90% {
    clip: rect(62px, 9999px, 38px, 0);
  }
  95% {
    clip: rect(67px, 9999px, 44px, 0);
  }
  100% {
    clip: rect(32px, 9999px, 17px, 0);
  }
}
@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 4px;
  }
}
@keyframes errorBlink {
  0%, 70% {
    opacity: 0.9;
  }
  40%, 60% {
    opacity: 0;
  }
}
@keyframes pixelate {
  0% {
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23000' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-size: 2px 2px;
  }
  25% {
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' fill='%23000' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-size: 4px 4px;
  }
  50% {
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' fill='%23000' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-size: 8px 8px;
  }
  75% {
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' fill='%23000' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-size: 4px 4px;
  }
  100% {
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23000' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-size: 2px 2px;
  }
}
@keyframes loadingProgress {
  0% {
    content: "LOADING...0%";
  }
  20% {
    content: "LOADING...23%";
  }
  40% {
    content: "LOADING...45%";
  }
  60% {
    content: "LOADING...67%";
  }
  80% {
    content: "LOADING...89%";
  }
  95% {
    content: "LOADING...100%";
    opacity: 0.9;
  }
  100% {
    content: "COMPLETE";
    opacity: 0;
  }
}
@keyframes interference {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}
@keyframes scanRight {
  0% {
    width: 0%;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
/* Disable hover effects when video is playing */
.gallery__item:hover .gallery__video-container:not(:has(.video-thumb))::before, .gallery__item:hover .gallery__video-container:not(:has(.video-thumb))::after {
  display: none !important;
}

/* Prevent caption effects when video is playing */
.gallery__item:hover .gallery__video-container:not(:has(.video-thumb)) ~ .gallery__caption h5, .gallery__item:hover .gallery__video-container:not(:has(.video-thumb)) ~ .gallery__caption p {
  color: #FFFFFF !important;
  animation: none !important;
}
.gallery__item:hover .gallery__video-container:not(:has(.video-thumb)) ~ .gallery__caption h5::before, .gallery__item:hover .gallery__video-container:not(:has(.video-thumb)) ~ .gallery__caption h5::after, .gallery__item:hover .gallery__video-container:not(:has(.video-thumb)) ~ .gallery__caption p::before, .gallery__item:hover .gallery__video-container:not(:has(.video-thumb)) ~ .gallery__caption p::after {
  display: none !important;
}

/* Hide caption completely when video is playing - correctly targeting the structure */
.gallery__item:has(.gallery__video-container:not(:has(.video-thumb))) .gallery__caption {
  opacity: 0 !important;
  visibility: hidden !important;
}

.projects-wrapper {
  position: relative;
  width: 100%;
}

/* Update folder tab z-indices */
[id^=folder-tab2]:checked ~ .folder-2 {
  display: flex;
  z-index: 3; /* Changed from 4 to 1 */
}

/* Lasses Mor Modal - With Header and Footer */
/* Timing Variables */
/* Total time the loading screen is visible */
/* Time before pinkish text appears */
/* Modal/Overlay Styles */
.modal-overlay {
  position: absolute; /* Changed from absolute to fixed */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 91vh; /* Use viewport height */
  background-color: rgba(82, 82, 82, 0.95);
  z-index: 9999;
  overflow: hidden; /* No scrolling outside the modal */
  backdrop-filter: blur(10px);
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-overlay.active .loading-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* Above modal content */
  animation: fadeOutDelay 0.5s forwards 2.1s;
}
.modal-overlay.active .modal-content {
  opacity: 0; /* Start hidden */
  pointer-events: none; /* No interaction while loading */
  overflow: hidden; /* No scrolling while loading */
  animation: enableScrollAfterLoading 2.1s forwards;
}
.modal-overlay.active {
  /* Command line fade in */
}
.modal-overlay.active .command-line {
  animation: fadeInPink 0.01s forwards 1.4s;
}
.modal-overlay.active {
  /* Log value change animation */
}
.modal-overlay.active .log-value {
  animation: hideLog 0.01s forwards 1.4s;
}
.modal-overlay.active .log-glitch {
  animation: showLog 0.01s forwards 1.4s;
}
.modal-overlay.active {
  /* Terminal route text change animation */
}
.modal-overlay.active .route-alt {
  animation: showRouteAlt 0.01s forwards 1.4s;
}
.modal-overlay {
  /* Extra media query to contain the modal properly on mobile */
}
@media (max-width: 768px) {
  .modal-overlay {
    /* Force the modal to stay within the viewport boundaries */
    max-width: 100%;
    width: 100vw;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }
}

/* Enhanced loading animation */
.loading-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  background-color: #525252;
}

.loading-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
}

.loading-bar {
  width: calc(100% - 40px);
  height: 2px;
  background-color: #FFFFFF;
}
.loading-bar.loading-bar-top {
  position: absolute;
  top: 40px; /* More margin from top */
  left: 20px;
}
.loading-bar.loading-bar-bottom {
  position: absolute;
  bottom: 40px; /* More margin from bottom */
  left: 20px;
}

/* Top terminal commands */
.terminal-commands {
  position: absolute;
  top: 48px; /* Position below the top bar */
  left: 20px;
  line-height: 1.4;
}
@media only screen and (min-width: 1024px) {
  .terminal-commands {
    top: 50px; /* Position below the top bar */
    left: 30px;
  }
}
.terminal-commands .command-line {
  margin: 0;
  padding: 0;
  opacity: 0; /* Start invisible */
}

.loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

.loading-text {
  margin: 0 0 10px 0;
  text-align: center;
  margin-left: 10px;
}
.loading-text::after {
  content: "";
  display: inline-block;
  width: 40px;
  text-align: left;
  animation: dots 1.5s infinite steps(1);
}

.system-log {
  margin: 5px 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.system-log .log-prefix {
  margin-right: 5px;
}
.system-log .log-value-container {
  position: relative;
  display: inline-block;
}
.system-log .log-value {
  display: inline-block;
  transition: opacity 0.01s;
}
.system-log .log-glitch {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  transition: opacity 0.01s;
  color: #ff59de;
}

/* Terminal footer */
.terminal-footer {
  position: absolute;
  bottom: 54px; /* Position above the bottom bar */
  left: 20px;
  right: 30px;
  margin-right: clamp(44px, 1vw + 60px, 65px);
}
@media only screen and (min-width: 1024px) {
  .terminal-footer {
    margin-right: clamp(44px, 1vw + 84px, 104px);
    bottom: 80px; /* Position above the bottom bar */
    left: 30px;
  }
}
.terminal-footer .footer-text {
  margin: 0;
  line-height: 1.4;
}
.terminal-footer .footer-text .route-text-container {
  display: inline-block;
  position: relative;
}
.terminal-footer .footer-text .route-text {
  transition: opacity 0.01s;
}
.terminal-footer .footer-text .route-alt {
  display: inline-block;
  color: #ff59de;
  opacity: 0;
  transition: opacity 0.01s;
}

/* Position logo in bottom right corner */
.loading-logo {
  position: absolute;
  bottom: 80px; /* Further up from bottom bar */
  right: 0px;
}
@media only screen and (min-width: 1024px) {
  .loading-logo {
    bottom: 120px; /* Further up from bottom bar */
    right: 40px;
  }
}
.loading-logo .ash-logo {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 80px;
  height: 40px;
}
.loading-logo svg {
  height: clamp(40px, 1vw + 55px, 60px);
  width: clamp(40px, 1vw + 55px, 60px);
}
@media only screen and (min-width: 1024px) {
  .loading-logo svg {
    height: clamp(40px, 1vw + 80px, 100px);
    width: clamp(40px, 1vw + 80px, 100px);
  }
}

/* Animation for hiding original log text */
@keyframes hideLog {
  0% {
    opacity: 0.7;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* Animation for showing glitched log text */
@keyframes showLog {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* Animation for showing alternative route text */
@keyframes showRouteAlt {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* Animation for fading in pink text */
@keyframes fadeInPink {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* Content fade animations */
@keyframes fadeOutDelay {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* New animation to enable scrolling after loading */
@keyframes enableScrollAfterLoading {
  0% {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  99% {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  100% {
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
  }
}
@keyframes dots {
  0% {
    content: ".";
  }
  33% {
    content: "..";
  }
  66% {
    content: "...";
  }
}
/* Modal Content Styles */
.modal-content {
  position: absolute;
  background-color: #525252;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #000000;
  width: 100%;
  height: 100%; /* Set height to viewport height */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  opacity: 0;
  box-sizing: border-box;
  max-height: 91vh; /* Set max-height to viewport height */
  overflow-y: auto; /* Allow content to scroll */
}
@media (max-width: 768px) {
  .modal-content {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}

/* Modal Header Styles */
.modal-header {
  display: inline;
  align-items: center;
  background-color: #525252;
  padding: 30px 20px 10px 20px;
  text-transform: uppercase;
}
.modal-header .modal-divider {
  border-top: 2px solid white;
  width: 100%;
  margin: 10px 0;
}
.modal-header .header-left {
  display: flex;
  flex-direction: column;
}
.modal-header .header-left .header-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Modal Body */
.modal-body {
  padding: 0 20px 0px 20px;
  flex: 1;
  box-sizing: border-box;
}

/* Modal Footer */
.modal-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #525252;
  padding: 0 20px 15px 20px;
  border-top: none;
  min-height: 57px;
}
.modal-footer .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 0 20px 0;
}
.modal-footer .footer-divider {
  border-top: 2px solid white;
  width: 100%;
  margin: 10px 0;
}
.modal-footer .footer-divider-bottom {
  padding-bottom: 30px;
}
.modal-footer .footer-logo {
  display: flex;
  align-items: center;
}
.modal-footer .footer-logo .svg-ash-logo {
  height: clamp(50px, 1vw + 55px, 64px);
  margin: 0px 0px 0 0;
}
@media only screen and (min-width: 1024px) {
  .modal-footer .footer-logo .svg-ash-logo {
    width: 84px;
    height: clamp(64px, 1vw + 72px, 84px);
  }
}
.modal-footer .footer-logo .svg-ash-logo svg {
  height: 100%;
  width: auto;
}

/* Project Section Styles */
.project-section {
  margin-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.project-section .modal-divider {
  border-top: 1px dashed white;
  width: 100%;
  margin: 10px 0;
}
.project-section .section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.project-section .project-content p {
  max-width: 900px;
}

/* Materials Grid Styles */
.materials-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 360px) {
  .materials-grid {
    flex-direction: column;
  }
}

.materials-item {
  flex: 1;
  padding: 0 5px;
  box-sizing: border-box;
}

.materials-media {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.materials-media img {
  width: 100%;
  height: auto;
  display: block;
}

.materials-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 10px 10px;
  box-sizing: border-box;
}

/* Modal-specific gallery overrides */
.modal-body .gallery__grid {
  gap: 3px;
}
.modal-body .gallery__video-container.shorts-container {
  padding-bottom: 125%;
}
.modal-body .gallery__video-container.shorts-container.square-ratio {
  padding-bottom: 100%;
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */
/*
  height: 100% fills the parent screen container rather than the viewport.
  min-height: 100vh would push content outside the screen design boundary.
*/
.page-404 {
  position: relative; /* so position:absolute children anchor to the screen, not the viewport */
  height: 100%;
  width: 100%;
  background-color: #0095C5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  overflow: auto;
  box-sizing: border-box;
}
@media only screen and (min-width: 611px) {
  .page-404 {
    padding: 48px 32px;
  }
}

/*
  Mobile:  single-column flex. DOM order = logo → message → codes → cta.
  Desktop: CSS grid with named areas repositions items regardless of DOM order.
*/
.page-404__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  gap: 20px;
}

/*
  Logo — first in DOM = naturally at top on mobile.
  width: fit-content collapses the container to the SVG width so that
  align-self: center actually works (a full-width container can't center itself).
*/
.page-404__logo-col {
  display: flex;
  flex-shrink: 0;
  width: -moz-fit-content;
  width: fit-content;
  align-self: center;
  padding-top: 30px;
}
@media only screen and (min-width: 611px) {
  .page-404__logo-col {
    padding-top: 0;
  }
}

.page-404__logo {
  width: 110px;
  display: block;
}

/* Message — $fs-h3: fluid(16px, 20px) */
.page-404__message {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: bold;
  line-height: 1.4;
  color: #FFFFFF;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
  Error codes — $fs-body: fluid(13px, 16px)
  padding: 0 + margin: 0 override the global ul { padding-left: 20px }
  which would otherwise indent the list away from the left edge.
*/
.page-404__codes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.page-404__code-line {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: bold;
  line-height: 1.2;
  color: #FFFFFF;
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
  CTA button centering.
  display: block + width: fit-content + margin: 0 auto is bulletproof —
  it works regardless of what parent or grandparent layout is doing,
  unlike align-items/justify-content which can be overridden by outer context.
*/
.page-404__cta {
  width: 100%;
}
.page-404__cta .btn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

/* Status label — sized down to match the compact button */
.btn-status {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btn-status--light {
  color: #FFFFFF;
}
.btn-status .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff59de;
  flex-shrink: 0;
  animation: dot-pulse 1.6s ease-in-out infinite;
}

/* ── Desktop (≥ 611px): switch to grid ── */
@media only screen and (min-width: 611px) {
  .page-404__content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "msg   msg" "logo  codes" "cta   cta";
    -moz-column-gap: 48px;
         column-gap: 48px;
    row-gap: 32px;
  }
  .page-404__logo-col {
    grid-area: logo;
    width: auto; /* let the grid column size it */
    align-self: stretch;
    align-items: stretch;
  }
  .page-404__message {
    grid-area: msg;
    font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  }
  .page-404__codes {
    grid-area: codes;
  }
  .page-404__cta {
    grid-area: cta;
  }
  /* Logo fills the full height of the codes row; aspect ratio via width: auto */
  .page-404__logo {
    width: auto;
    height: 100%;
    max-width: 180px;
  }
}
/* ==========================================================================
   ERROR-LOCKDOWN PAGE additions
   ========================================================================== */
/*
  Cursor colour override — white on the $blueish error screen.
  The base .blinking-cursor definition (black) and @keyframes cursor-blink
  live in _terminal.scss and apply globally to the React terminal.
*/
.lockdown-terminal .blinking-cursor {
  background-color: #FFFFFF;
}

/*
  CTA — hidden until terminal animation completes.
*/
.lockdown-cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lockdown-cta .button-container {
  display: flex;
  justify-content: center;
}

.lockdown-cta--visible {
  opacity: 1;
  pointer-events: auto;
}

/*
  Continue button colour — white base on $blueish background.
  Hover uses $pinkish (not $blueish which would be invisible here).
  Two-class specificity beats .continue-button { color: $pinkish } regardless of load order.
*/
.lockdown-cta .continue-button {
  color: #FFFFFF;
}
.lockdown-cta .continue-button:hover {
  color: #ff59de;
}

/*
  Terminal snippet — absolute so it stays inside the graphical screen.
*/
.lockdown-terminal {
  position: absolute;
  bottom: clamp(12px, 2.5vh, 28px);
  left: clamp(12px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 1.2vw, 13px);
  line-height: 1.4;
  pointer-events: none;
}

/*
  display: block — spans are inline, so space characters between words
  render naturally. display: flex would make each character-span a flex
  item and collapse space characters to zero width.
*/
.lockdown-terminal__line {
  display: block;
  min-height: 1.4em;
}

/* ==========================================================================
   REMITTANCE PAGE
   Reuses: .projects-container, .folder-container, .folder, .folder-header,
           .folder-content, .archive-logo, btn classes from _buttons.scss
   New styles live below.
   ========================================================================== */
/* ── Page-level overrides ──────────────────────────────────────────────── */
/*
  No folder tabs on this page — folder is always visible.
*/
.remittance-folder {
  display: flex !important;
}

/*
  Remove tab-height margin; this page has no tabs.
*/
.remittance-folder-container {
  margin-top: 10px;
}
@media only screen and (min-width: 1024px) {
  .remittance-folder-container {
    margin-top: 20px;
  }
}

/* ── Header: breadcrumb & active-step indicator ───────────────────────── */
/*
  Breadcrumb line uses Courier, inheriting the .internal sizing from
  _typography.scss but explicitly setting the font family.
*/
.remittance-breadcrumb {
  font-family: "Courier New", monospace;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  font-weight: bold;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.2;
}

/*
  Active step underline matches the form field style (dashed, same weight)
  but in $pinkish instead of $greyish.
*/
.remittance-step--active {
  -webkit-text-decoration: underline dashed #ff59de;
          text-decoration: underline dashed #ff59de;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── Document content area ────────────────────────────────────────────── */
.remittance-document {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(14px, 3vw, 24px);
  background-color: #ebebeb;
  color: #000000;
}

/* ── Meta block: officer + status ─────────────────────────────────────── */
.remittance-meta {
  padding: 10px 0 0 10px;
}

/*
  "ASSIGNED OFFICER:" label → Archivo, $fs-meta, $greyish
  "dp 1138" value → UnionStave, $fs-small, $black
*/
.remittance-officer {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
  color: #a0a0a0;
  letter-spacing: 0.08em;
  margin: 0;
}
.remittance-officer .remittance-officer__id {
  font-family: "UnionStave", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  color: #000000;
  letter-spacing: 0.12em;
}

/* "ADMISSION CONFIRMED" → Archivo */
.remittance-title {
  font-family: "Archivo", sans-serif;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: bold;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  padding: 0;
  line-height: 0.8;
  letter-spacing: 0.04em;
}

/* ── Divider ──────────────────────────────────────────────────────────── */
.remittance-divider {
  border: none;
  border-top: 1px solid #000000;
  margin: 8px 0;
}

/* ── Body copy — Courier ──────────────────────────────────────────────── */
.remittance-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.remittance-body p {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

/* ── Violations list — Courier ────────────────────────────────────────── */
.remittance-violations {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.remittance-violations li {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  line-height: 1.4;
  color: #000000;
  padding-left: 4px;
}

/* ── Form ─────────────────────────────────────────────────────────────── */
.remittance-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.remittance-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* First + last name sit side-by-side */
.remittance-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media only screen and (min-width: 1024px) {
  .remittance-field-row {
    gap: 40px;
  }
}

/*
  Minimal input: transparent background, no box border.
  Dashed bottom border only — mimics a printed form field.
  Placeholder acts as the visible label.
*/
.remittance-field {
  display: flex;
  flex-direction: column;
}
.remittance-field input[type=text],
.remittance-field input[type=email] {
  background: transparent;
  border: none;
  border-bottom: 1px dashed #a0a0a0;
  border-radius: 0;
  outline: none;
  width: 100%;
  padding: 6px 0;
  font-family: "Courier New", monospace;
  font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  font-weight: bold;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  caret-color: #ff59de;
  box-sizing: border-box;
}
.remittance-field input[type=text]::-moz-placeholder, .remittance-field input[type=email]::-moz-placeholder {
  color: #a0a0a0;
  font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1;
}
.remittance-field input[type=text]::placeholder,
.remittance-field input[type=email]::placeholder {
  color: #a0a0a0;
  font-size: clamp(16px, 14.5915492958px + 0.3755868545vw, 20px);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1;
}
.remittance-field input[type=text]:focus,
.remittance-field input[type=email]:focus {
  border-bottom-color: #000000;
}
.remittance-field input[type=text]:focus::-moz-placeholder, .remittance-field input[type=email]:focus::-moz-placeholder {
  opacity: 0.4;
}
.remittance-field input[type=text]:focus::placeholder,
.remittance-field input[type=email]:focus::placeholder {
  opacity: 0.4;
}

/* ── CTA button — centered, natural width ─────────────────────────────── */
.remittance-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*
    display: block + width: fit-content + margin: 0 auto is the most
    reliable centering approach, immune to any parent layout context.
  */
}
.remittance-cta .btn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.remittance-cta .btn-status {
  margin-top: 10px;
}

/* ── Footer disclaimer — Archivo, $fs-meta, uppercase ────────────────── */
.remittance-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remittance-footer p {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  line-height: 1.4;
  color: #a0a0a0;
  text-transform: uppercase;
  margin: 0;
}

/* ==========================================================================
   SUCCESS PAGE
   ========================================================================== */
/* ── Two-column layout ────────────────────────────────────────────────── */
/*
  Each column is a flex column. The hr at the bottom gets margin-top:auto
  so it's pushed down to the bottom. On desktop, align-items:stretch gives
  both columns equal height, so both hrs sit at the same vertical position.
*/
.success-columns {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 0 0;
}
@media only screen and (min-width: 611px) {
  .success-columns {
    flex-direction: row;
    align-items: stretch;
    gap: 18px;
  }
  .success-columns .success-survey,
  .success-columns .success-officer-note {
    flex: 1 1 0;
    min-width: 0;
  }
}

.success-survey,
.success-officer-note {
  display: flex;
  flex-direction: column;
}

/* Per-column bottom divider — auto top margin pushes it to the column bottom */
.success-col-divider {
  border: none;
  border-top: 1px solid #000000;
  margin: auto 0 16px;
}

/* ── CSS-only survey ──────────────────────────────────────────────────── */
/* Visually hidden but still wired to labels */
.survey-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.success-survey__question {
  font-family: "Archivo", sans-serif;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  line-height: 1.4;
  color: #000000;
  margin: 0 0 16px;
  text-transform: uppercase;
}

/* Buttons centered */
.success-survey__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Response box — white box matching officer note style, hidden by default */
.success-survey__response-box {
  display: none;
  background: #FFFFFF;
  border: 1px solid #000000;
  padding: clamp(12px, 2vw, 20px);
  margin-bottom: 12px;
}

/* All individual response paragraphs hidden by default */
.survey-resp {
  display: none;
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-style: italic;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

.success-survey__disclaimer {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
  color: #a0a0a0;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  line-height: 1.2;
}

/*
  CSS-only interactivity via :checked + general sibling combinator (~).
  The radios are direct siblings of .success-survey__buttons and
  .success-survey__response-box, so ~ reaches them directly.
*/
#survey-r1:checked ~ .success-survey__buttons,
#survey-r2:checked ~ .success-survey__buttons,
#survey-r3:checked ~ .success-survey__buttons,
#survey-r4:checked ~ .success-survey__buttons,
#survey-r5:checked ~ .success-survey__buttons {
  display: none;
}

#survey-r1:checked ~ .success-survey__response-box,
#survey-r2:checked ~ .success-survey__response-box,
#survey-r3:checked ~ .success-survey__response-box,
#survey-r4:checked ~ .success-survey__response-box,
#survey-r5:checked ~ .success-survey__response-box {
  display: block;
}

#survey-r1:checked ~ .success-survey__response-box .survey-resp-1 {
  display: block;
}

#survey-r2:checked ~ .success-survey__response-box .survey-resp-2 {
  display: block;
}

#survey-r3:checked ~ .success-survey__response-box .survey-resp-3 {
  display: block;
}

#survey-r4:checked ~ .success-survey__response-box .survey-resp-4 {
  display: block;
}

#survey-r5:checked ~ .success-survey__response-box .survey-resp-5 {
  display: block;
}

/* ── Officer note box ─────────────────────────────────────────────────── */
.success-officer-note__body {
  background: #FFFFFF;
  border: 1px solid #000000;
  padding: clamp(12px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 12px;
}
.success-officer-note__body p {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-style: italic;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

.success-officer-note__sig {
  font-family: "Archivo", sans-serif !important;
  font-style: normal !important;
  font-size: 8px !important;
  font-weight: bold !important;
  text-transform: uppercase;
  color: #a0a0a0 !important;
  letter-spacing: 0.08em;
  margin-top: 4px !important;
  /* dp 1138 — UnionStave, same treatment as remittance-officer__id */
}
.success-officer-note__sig .remittance-officer__id {
  font-family: "UnionStave", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(10px, 8.9436619718px + 0.2816901408vw, 13px);
  color: #000000;
  letter-spacing: 0.12em;
}

/* ── Confirmation body ────────────────────────────────────────────────── */
.success-body {
  padding: 16px 0 8px;
}

/* ── Line items ───────────────────────────────────────────────────────── */
.success-line-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
}

.success-line-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.success-line-item dt {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
  color: #a0a0a0;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}
.success-line-item dd {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-weight: bold;
  color: #000000;
  margin: 0;
}

/* ==========================================================================
   PAYMENT PAGE
   ========================================================================== */
/* ── Amount Selector (CSS-only, like survey) ──────────────────────────── */
.payment-amount-selector {
  margin-bottom: 24px;
}

/* Hidden radios */
.amount-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Amount buttons row */
.payment-amount-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* Amount button sizing - uses existing btn--icon from _buttons.scss */
.payment-amount-buttons .btn--icon {
  min-width: 50px;
  min-height: 44px;
}

/* Response box - hidden by default */
.payment-amount-response {
  display: none;
  background: #FFFFFF;
  border: 1px solid #000000;
  padding: clamp(12px, 2vw, 20px);
  margin-bottom: 16px;
}

/* Individual responses hidden by default */
.amount-resp {
  display: none;
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  font-style: italic;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

/* CSS-only interactivity: hide buttons, show response when selected */
#amount-1:checked ~ .payment-amount-buttons,
#amount-2:checked ~ .payment-amount-buttons,
#amount-3:checked ~ .payment-amount-buttons,
#amount-4:checked ~ .payment-amount-buttons {
  display: none;
}

#amount-1:checked ~ .payment-amount-response,
#amount-2:checked ~ .payment-amount-response,
#amount-3:checked ~ .payment-amount-response,
#amount-4:checked ~ .payment-amount-response {
  display: block;
}

#amount-1:checked ~ .payment-amount-response .amount-resp-1 {
  display: block;
}

#amount-2:checked ~ .payment-amount-response .amount-resp-2 {
  display: block;
}

#amount-3:checked ~ .payment-amount-response .amount-resp-3 {
  display: block;
}

#amount-4:checked ~ .payment-amount-response .amount-resp-4 {
  display: block;
}

/* ── Card field container ─────────────────────────────────────────────── */
.remittance-field--card {
  margin-bottom: 8px;
}
.remittance-field--card .detail-label-small {
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
  color: #a0a0a0;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}

/* Stripe Card Element container */
#card-element {
  background: transparent;
  border: none;
  border-bottom: 1px dashed #a0a0a0;
  padding: 10px 0;
  min-height: 24px;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
#card-element:focus-within {
  border-bottom-color: #000000;
}
#card-element {
  /* Mask card details during processing */
}
#card-element.card-processing {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
}

/* ── Error message styling ────────────────────────────────────────────── */
.remittance-error {
  font-family: "Courier New", monospace;
  font-size: clamp(13px, 11.9436619718px + 0.2816901408vw, 16px);
  color: #ff59de;
  margin: 12px 0;
  display: none;
}
.remittance-error:not(:empty) {
  display: block;
}

/* ── Citation download link ───────────────────────────────────────────── */
.citation-download-link {
  color: #000000;
  -webkit-text-decoration: underline dashed #ff59de;
          text-decoration: underline dashed #ff59de;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.citation-download-link:hover {
  text-decoration-color: #000000;
}

.nav__button {
  will-change: transform;
  backface-visibility: hidden;
}

.first-load .screen__big--outer {
  transform: translateY(-100vh) scale(1.03);
  animation: screenSlide 0.8s cubic-bezier(0.4, 0, 0.05, 1.1) 0.1s forwards;
}
@media only screen and (min-width: 1024px) {
  .first-load .screen__big--outer {
    transform: translateY(-100vh) scale(1.12);
    animation: screenSlideDesktop 0.8s cubic-bezier(0.4, 0, 0.05, 1.1) 0.1s forwards;
  }
}
.first-load .nav {
  transform: translateY(100vh) scale(1.22);
  animation: navSlideUp 1s cubic-bezier(0.2, 0, 0.01, 1.02) 0.7s forwards;
  will-change: transform;
  backface-visibility: hidden;
}
@media only screen and (min-width: 611px) {
  .first-load .nav {
    transform: translateX(-100vw) scale(1.22);
    animation: navSlideIn 1s cubic-bezier(0.2, 0, 0.01, 1.02) 0.7s forwards;
  }
}
@media only screen and (min-width: 611px) {
  .first-load .social__youtube {
    transform: translateX(150%) scale(1.12);
    animation: socialElementSlide 1.2s cubic-bezier(0, 0, 0.01, 1.2) 1.4s forwards;
  }
  .first-load .social__instagram {
    transform: translateX(150%) scale(1.12);
    animation: socialElementSlide 1.2s cubic-bezier(0, 0, 0.01, 1.2) 1.8s forwards;
  }
}

@keyframes screenSlide {
  from {
    transform: translateY(-100vh) scale(1.03);
  }
  to {
    transform: translateY(0) scale(1);
  }
}
@keyframes screenSlideDesktop {
  from {
    transform: translateY(-103vh) scale(1.12);
  }
  to {
    transform: translateY(0) scale(1);
  }
}
@keyframes navSlideUp {
  0% {
    transform: translateY(100vh) scale(1.22);
  }
  95% {
    transform: translateY(1px) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes navSlideIn {
  from {
    transform: translateX(-100vw) scale(1.22);
  }
  to {
    transform: translateX(0) scale(1);
  }
}
@keyframes socialElementSlide {
  from {
    transform: translateX(150%) scale(1.12);
  }
  to {
    transform: translateX(0) scale(1);
  }
}
.reverse-animate .screen__big--outer {
  animation: screenSlideReverse 0.8s cubic-bezier(0.4, 0, 0.05, 1.1) forwards !important;
}
@media only screen and (min-width: 1024px) {
  .reverse-animate .screen__big--outer {
    animation: screenSlideDesktopReverse 0.8s cubic-bezier(0.4, 0, 0.05, 1.1) forwards !important;
  }
}
.reverse-animate .nav {
  animation: navSlideUpReverse 1s cubic-bezier(0.2, 0, 0.01, 1.02) forwards !important;
}
@media only screen and (min-width: 1024px) {
  .reverse-animate .nav {
    animation: navSlideInReverse 1s cubic-bezier(0.2, 0, 0.01, 1.02) forwards !important;
  }
}
@media only screen and (min-width: 1024px) {
  .reverse-animate .social__youtube {
    animation: socialElementSlideReverse 0.7s cubic-bezier(0, 0, 0.01, 1.2) forwards !important;
  }
  .reverse-animate .social__instagram {
    animation: socialElementSlideReverse 0.7s cubic-bezier(0, 0, 0.01, 1.2) 0.2s forwards !important;
  }
}

@keyframes screenSlideReverse {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-100vh) scale(1.03);
  }
}
@keyframes screenSlideDesktopReverse {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-103vh) scale(1.12);
  }
}
@keyframes navSlideUpReverse {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(100vh) scale(1.22);
  }
}
@keyframes navSlideInReverse {
  from {
    transform: translateX(0) scale(1);
  }
  to {
    transform: translateX(-100vw) scale(1.22);
  }
}
@keyframes socialElementSlideReverse {
  from {
    transform: translateX(0) scale(1);
  }
  to {
    transform: translateX(150%) scale(1.12);
  }
}
.social__instagram__outer__infrared--red {
  animation: stayOn 45s infinite ease;
  background-color: #F14855;
  margin-top: 2px;
  margin-left: 2px;
  box-shadow: 0 0 4px 2px rgba(241, 72, 85, 0.7); /* Radial glow */
}
@keyframes stayOn {
  0%, 44% { /* First 20 seconds */
    opacity: 1;
  }
  45%, 100% { /* Remaining 25 seconds */
    opacity: 0;
  }
}
.sign__bold--front--flicker {
  animation: flickerNeonFront 70s infinite ease-in-out;
}

@keyframes flickerNeonFront {
  0%, 34.2%, 41.02%, 63.2%, 34.36%, 34.4%, 34.46%, 34.5%, 40.56%, 40.6% {
    color: #ffddf8;
  }
  34.3%, 34.35%, 34.41%, 34.45%, 34.51%, 34.55%, 40.51%, 40.55%, 63.3%, 63.35% {
    color: rgb(130, 46, 114);
  }
}
.sign__bold--back--flicker {
  animation: flickerNeonBack 70s infinite ease-in-out;
}

@keyframes flickerNeonBack {
  0%, 34.2%, 41.02%, 63.2%, 34.36%, 34.4%, 34.46%, 34.5%, 40.56%, 40.6% {
    -webkit-text-stroke: 1.7px #ff59de;
    text-shadow: 0 0 2px #ff59de, 0 0 5px #ff59de, 0 0 15px #ff59de;
  }
  34.3%, 34.35%, 34.41%, 34.45%, 34.51%, 34.55%, 40.51%, 40.55%, 63.3%, 63.35% {
    -webkit-text-stroke: 0px #fff;
    text-shadow: none;
  }
}
.sign__light--two {
  animation: flickerNeonLight 70s infinite ease-in-out;
}

@keyframes flickerNeonLight {
  0%, 34.2%, 41.02%, 63.2%, 34.36%, 34.4%, 34.46%, 34.5%, 40.56%, 40.6% {
    background-color: #ffddf8;
    box-shadow: 0px 0px 2px #ff59de, 0px 0px 5px #ff59de, 0px 0px 15px #ff59de;
    border: 1px solid #ff59de;
  }
  34.3%, 34.35%, 34.41%, 34.45%, 34.51%, 34.55%, 40.51%, 40.55%, 63.3%, 63.35% {
    background-color: rgb(130, 46, 114);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0);
  }
  40.61%, 41.01% {
    background-color: #ffddf8;
    box-shadow: 0px 0px 2px #ff59de, 0px 0px 5px #ff59de, 0px 0px 15px #ff59de;
    border: 1px solid #ff59de;
  }
}
/* ===============================
   LAYOUT & CONTAINERS
   =============================== */
.union-terminal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #FFFFFF;
  font-family: "Courier New", monospace;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: auto;
}

.response-display {
  flex-grow: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 20px 20px 40px;
  scroll-behavior: smooth;
  box-sizing: border-box;
  scrollbar-width: thin;
  -ms-overflow-style: minimal;
  font-family: "Courier New", monospace;
  line-height: 1;
}

.response-display::after {
  content: "";
  display: block;
}

/* Scrollbar Styles */
.response-display::-webkit-scrollbar {
  width: 6px;
}

.response-display::-webkit-scrollbar-thumb {
  background: rgba(56, 106, 142, 0.6);
  border-radius: 3px;
}

/* ===============================
   TYPOGRAPHY
   =============================== */
.stream-text {
  display: inline;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: black;
  line-height: 1.4;
}
@media only screen and (min-width: 1024px) {
  .stream-text {
    font-size: 14px;
  }
}

.brackets {
  font-size: 10px;
  font-family: "Courier New", monospace;
  display: inline-block;
  line-height: 1;
  color: black;
}
@media only screen and (min-width: 1024px) {
  .brackets {
    font-size: 14px;
  }
}

/* Text Highlights */
.highlight-bold {
  color: black;
  font-weight: bold;
}

.highlight-fail {
  color: #F14855;
  font-weight: bold;
}

.highlight-hack {
  color: #ff59de;
  font-weight: bold;
}

.highlight-system {
  color: #386A8E;
  font-weight: bold;
}

/* Text Colors for Overlays */
.red-text {
  color: #F14855;
  font-weight: bold;
}

.neutral-text {
  color: black;
  display: inline-block;
  font-size: 14px;
}

.pink-text {
  color: #ff59de;
  font-weight: bold;
}
.pink-text-upper {
  text-transform: uppercase;
  font-size: 14px;
  display: inline-block;
}

.white-text {
  color: white;
  font-weight: bold;
}

/* ===============================
   UI ELEMENTS
   =============================== */
.override {
  padding: 10px 0 10px 0;
  display: inline-block;
}

.dots {
  display: inline-block;
  margin-left: 5px;
}

/* Button Styles */
.button-container {
  display: flex;
  justify-content: center;
  margin: 20px 0 0 0;
}

.continue-button-container {
  display: block;
  text-align: center;
}

.continue-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  color: #ff59de;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap;
  vertical-align: middle;
}
@media only screen and (min-width: 1024px) {
  .continue-button {
    font-size: 20px;
  }
}

.continue-button__main {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  line-height: 1;
}

.continue-button__text {
  display: inline-block;
  line-height: 1;
}

.continue-button__bracket-left,
.continue-button__bracket-right {
  display: inline-block;
  line-height: 1;
  transition: transform 0.6s ease;
}

.continue-button__bracket-left {
  margin-right: 4px;
  animation: continueExpandLeft 3s ease-in-out infinite;
}

.continue-button__bracket-right {
  margin-left: 4px;
  animation: continueExpandRight 3s ease-in-out infinite;
}

@keyframes continueExpandLeft {
  0%, 100% {
    transform: translateX(0);
  }
  40%, 60% {
    transform: translateX(-8px);
  }
}
@keyframes continueExpandRight {
  0%, 100% {
    transform: translateX(0);
  }
  40%, 60% {
    transform: translateX(8px);
  }
}
.continue-button__glitch {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.continue-button__glitch--1 {
  color: #00ffff;
  animation: continueGlitch1 12s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.continue-button__glitch--2 {
  color: #ff00ff;
  animation: continueGlitch2 12s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes continueGlitch1 {
  0%, 19%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  19.5%, 20.5% {
    opacity: 0.8;
    transform: translateX(-3px);
  }
  29%, 31% {
    opacity: 0;
    transform: translateX(0) translateY(0);
  }
  30%, 30.5% {
    opacity: 0.7;
    transform: translateX(2px) translateY(-2px) skew(-2deg);
  }
  59%, 61% {
    opacity: 0;
    transform: translateX(0);
  }
  60%, 60.3% {
    opacity: 0.9;
    transform: translateX(-4px) scale(1.02, 0.98);
  }
  79%, 81% {
    opacity: 0;
    transform: translateX(0);
  }
  79.8%, 80% {
    opacity: 0.6;
    transform: translateX(3px);
  }
  80.2%, 80.4% {
    opacity: 0.7;
    transform: translateX(-2px);
  }
}
@keyframes continueGlitch2 {
  0%, 19%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  19.6%, 20.6% {
    opacity: 0.7;
    transform: translateX(3px);
  }
  29.2%, 31% {
    opacity: 0;
    transform: translateX(0) translateY(0);
  }
  30.2%, 30.6% {
    opacity: 0.8;
    transform: translateX(-2px) translateY(2px) skew(2deg);
  }
  59.2%, 61% {
    opacity: 0;
    transform: translateX(0);
  }
  60.2%, 60.5% {
    opacity: 0.85;
    transform: translateX(5px) scale(0.98, 1.02);
  }
  79.2%, 81% {
    opacity: 0;
    transform: translateX(0);
  }
  79.9%, 80.1% {
    opacity: 0.7;
    transform: translateX(-3px);
  }
  80.3%, 80.5% {
    opacity: 0.6;
    transform: translateX(2px);
  }
}
.continue-button:hover {
  color: #0095C5;
}

.continue-button:hover .continue-button__bracket-left {
  animation: none;
  transform: translateX(6px);
}

.continue-button:hover .continue-button__bracket-right {
  animation: none;
  transform: translateX(-6px);
}

.continue-button:hover .continue-button__glitch--1 {
  animation: continueHoverGlitch1 0.2s infinite;
}

.continue-button:hover .continue-button__glitch--2 {
  animation: continueHoverGlitch2 0.2s infinite;
}

@keyframes continueHoverGlitch1 {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  10% {
    opacity: 0.7;
    transform: translateX(-2px);
  }
  20% {
    opacity: 0;
    transform: translateX(0);
  }
  30% {
    opacity: 0.6;
    transform: translateX(1px) translateY(-1px);
  }
  40% {
    opacity: 0;
    transform: translateX(0);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-1px);
  }
  60% {
    opacity: 0;
    transform: translateX(0);
  }
  70% {
    opacity: 0.5;
    transform: translateX(2px);
  }
  80%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
}
@keyframes continueHoverGlitch2 {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  15% {
    opacity: 0.6;
    transform: translateX(2px);
  }
  25% {
    opacity: 0;
    transform: translateX(0);
  }
  35% {
    opacity: 0.7;
    transform: translateX(-1px) translateY(1px);
  }
  45% {
    opacity: 0;
    transform: translateX(0);
  }
  55% {
    opacity: 0.5;
    transform: translateX(1px);
  }
  65% {
    opacity: 0;
    transform: translateX(0);
  }
  75% {
    opacity: 0.8;
    transform: translateX(-2px);
  }
  85%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
}
/* ===============================
   MEDIA CONTENT
   =============================== */
/* Logo Styles */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
  width: 100%;
}

.ash-logo-horizontal {
  width: 80%;
  max-width: 500px;
  padding: 10px 0 10px 0;
}

/* Security Feed Styles */
.security-feed-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
}

.ash-feed {
  width: 100%;
  max-width: 600px;
  display: block;
}

.security-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  font-family: "Courier New", monospace;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Ensure clicks go through to the image */
}
@media only screen and (min-width: 1024px) {
  .security-overlay {
    font-size: 14px;
  }
}

.security-header {
  padding: 10px;
  text-align: left;
}

.header-line {
  font-weight: bold;
  margin-bottom: 2px;
}

.bottom-section {
  margin-top: auto; /* Push to the bottom of the container */
  padding-bottom: 10px;
}

.security-footer {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 5px 10px;
  font-weight: bold;
}

.footer-left, .footer-right {
  font-size: 10px;
}
@media only screen and (min-width: 1024px) {
  .footer-left, .footer-right {
    font-size: 14px;
  }
}

.threat-info {
  padding: 0 10px 0px 10px;
  font-weight: bold;
}

.threat-divider {
  height: 2px;
  background-color: white;
  margin-bottom: 5px;
  width: 100%;
}

.threat-line {
  margin-bottom: 2px;
}

/* Visual Effects - Currently Disabled */
.movement-overlay, .grain-overlay {
  display: none;
}

/* ===============================
   MENU COMPONENTS
   =============================== */
.menu {
  margin: 20px 0;
  font-family: "Courier New", monospace;
}

.menu-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.menu-item {
  margin-bottom: 15px;
}

.menu-option {
  font-weight: bold;
}

.menu-comment {
  margin-left: 20px;
  font-style: italic;
  opacity: 0.8;
}

/* ===============================
   UTILITIES
   =============================== */
.content-item:last-child {
  margin-bottom: 20px;
}

.terminal-home-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.terminal-home-message {
  font-size: 14px;
  margin-bottom: 2rem;
}

/* ===============================
   BLINKING CURSOR
   =============================== */
/*
  Base definition — black background for the React terminal.
  @keyframes defined once here; colour is overridden per-context elsewhere.
*/
.blinking-cursor {
  display: inline-block;
  width: 7px;
  height: 1.1em;
  background-color: #000000;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
}

.solid-cursor {
  display: inline-block;
  width: 7px;
  height: 1.1em;
  background-color: #000000;
  margin-left: 1px;
  vertical-align: text-bottom;
}

@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}/*# sourceMappingURL=style.css.map */