:root {

  --black: #030303;
  --dark: #070707;
  --surface: #0b0b0c;
  --surface-light: #111113;

  --white: #f4f4f4;

  --grey: #939398;
  --dark-grey: #5f5f64;

  --red: #ef0b1f;
  --red-bright: #ff1028;
  --red-dark: #7a030d;

  --line: rgba(255,255,255,.10);

  --max-width: 1500px;

}


* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

  background: var(--black);

}


body {

  background: var(--black);

  color: var(--white);

  font-family:
    Inter,
    "Helvetica Neue",
    Arial,
    sans-serif;

  overflow-x: hidden;

  line-height: 1.5;

}


body.menu-open {

  overflow: hidden;

}


a {

  color: inherit;

  text-decoration: none;

}


img {

  display: block;

  max-width: 100%;

}


::selection {

  background: var(--red);

  color: white;

}



/* NOISE */

.noise {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 1000;

  opacity: .035;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.55'/%3E%3C/svg%3E");

}


/* CURSOR GLOW */

.cursor-glow {

  width: 500px;

  height: 500px;

  position: fixed;

  pointer-events: none;

  border-radius: 50%;

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

  background: rgba(239,11,31,.055);

  filter: blur(100px);

  z-index: 0;

}



/* ═══════════════════════════════
   HEADER
═══════════════════════════════ */

.site-header {

  height: 90px;

  padding:
    0
    clamp(22px,5vw,80px);

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 100;

  display: grid;

  grid-template-columns:
    180px
    1fr
    180px;

  align-items: center;

  border-bottom:
    1px solid rgba(255,255,255,.08);

  transition:
    height .3s ease,
    background .3s ease;

}


.site-header.scrolled {

  height: 70px;

  background:
    rgba(3,3,3,.90);

  backdrop-filter:
    blur(18px);

}


.header-logo {

  width: 120px;

  display: block;

}


.header-logo img {

  width: 100%;

  max-height: 70px;

  object-fit: contain;

}


nav {

  display: flex;

  justify-content: center;

  align-items: center;

  gap:
    clamp(18px,3vw,48px);

}


nav a {

  font-size: 11px;

  font-weight: 850;

  letter-spacing: .15em;

  text-transform: uppercase;

  color: #a5a5a8;

  position: relative;

  transition: .2s;

}


nav a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -10px;

  height: 2px;

  background: var(--red);

  transition: .25s;

}


nav a:hover {

  color: white;

}


nav a:hover::after {

  right: 0;

}


.watch-live-header {

  justify-self: end;

  border:
    1px solid rgba(239,11,31,.75);

  min-width: 140px;

  height: 43px;

  padding: 0 17px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  text-transform: uppercase;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .14em;

  transition: .25s;

}


.watch-live-header:hover {

  background: var(--red);

}


.live-dot {

  display: inline-block;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--red);

  box-shadow:
    0 0 16px var(--red);

  animation:
    livePulse 1.5s infinite;

}


@keyframes livePulse {

  50% {

    opacity: .3;

  }

}


.menu-button {

  display: none;

}



/* ═══════════════════════════════
   HERO
═══════════════════════════════ */

.hero {

  min-height: 100svh;

  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;

  padding:
    140px 24px
    70px;

  background:

    radial-gradient(
      circle at 50% 55%,
      rgba(130,0,10,.20),
      transparent 32%
    ),

    radial-gradient(
      circle at 10% 55%,
      rgba(120,0,0,.13),
      transparent 30%
    ),

    radial-gradient(
      circle at 90% 45%,
      rgba(120,0,0,.10),
      transparent 30%
    ),

    #030303;

}


.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,
      rgba(0,0,0,.1),
      rgba(0,0,0,.72) 35%,
      rgba(0,0,0,.72) 65%,
      rgba(0,0,0,.1)
    );

}


.hero::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 170px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      #030303
    );

}


.hero-grid {

  position: absolute;

  inset: 0;

  opacity: .27;

  background-image:

    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:
    90px 90px;

  mask-image:
    radial-gradient(
      circle,
      black,
      transparent 70%
    );

}


.hero-red-glow {

  position: absolute;

  border-radius: 50%;

  background: rgba(235,0,20,.12);

  filter: blur(120px);

}


.glow-one {

  width: 500px;

  height: 500px;

  left: -220px;

  bottom: 5%;

}


.glow-two {

  width: 550px;

  height: 550px;

  right: -240px;

  top: 10%;

}


.hero-inner {

  width: 100%;

  max-width: 950px;

  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}


.eyebrow {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 5px;

  font-size: 9px;

  letter-spacing: .23em;

  font-weight: 900;

  color: #888;

}


.eyebrow span {

  width: 30px;

  height: 2px;

  background: var(--red);

}


.hero-logo {

  width:
    min(680px, 84vw);

  max-height: 570px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 25px 65px
      rgba(0,0,0,.95)
    );

}


.hero-description {

  max-width: 630px;

  font-size:
    clamp(14px,1.4vw,18px);

  color: #adadb2;

  margin-top: -5px;

}


.hero-actions {

  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 31px;

}


.button {

  min-width: 190px;

  height: 54px;

  padding:
    0 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: .12em;

  text-transform: uppercase;

  transition: .25s;

}


.primary-button {

  background:
    linear-gradient(
      135deg,
      #d40717,
      var(--red)
    );

  box-shadow:
    0 12px 35px
    rgba(239,11,31,.18);

}


.primary-button:hover {

  background: var(--red-bright);

  transform: translateY(-3px);

  box-shadow:
    0 18px 45px
    rgba(239,11,31,.28);

}


.secondary-button {

  border: 1px solid
    rgba(255,255,255,.22);

  background:
    rgba(255,255,255,.02);

}


.secondary-button:hover {

  border-color:
    rgba(255,255,255,.5);

  background:
    rgba(255,255,255,.06);

}


.button-icon {

  color: white;

  font-size: 8px;

}


.scroll-down {

  margin-top: 55px;

  display: flex;

  align-items: center;

  gap: 13px;

  color: #555;

  font-size: 8px;

  letter-spacing: .21em;

  font-weight: 900;

}


.scroll-down span {

  width: 37px;

  height: 1px;

  background: #444;

}


.hero-decoration {

  position: absolute;

  z-index: 2;

  color: rgba(255,255,255,.13);

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .26em;

  writing-mode: vertical-rl;

}


.hero-decoration-left {

  left: 35px;

  top: 50%;

}


.hero-decoration-right {

  right: 35px;

  top: 44%;

}



/* ═══════════════════════════════
   TICKER
═══════════════════════════════ */

.ticker {

  position: relative;

  z-index: 5;

  overflow: hidden;

  padding: 11px 0;

  background: var(--red);

  border-top: 1px solid #ff4b57;

  border-bottom: 1px solid #620008;

}


.ticker-track {

  width: max-content;

  display: flex;

  align-items: center;

  gap: 27px;

  animation:
    tickerMove 28s linear infinite;

}


.ticker strong {

  font-size: 11px;

  letter-spacing: .19em;

  font-weight: 950;

}


.ticker span {

  font-size: 8px;

}


@keyframes tickerMove {

  to {

    transform:
      translateX(-50%);

  }

}



/* ═══════════════════════════════
   DASHBOARD
═══════════════════════════════ */

.dashboard-section {

  max-width: var(--max-width);

  margin: auto;

  display: grid;

  grid-template-columns:
    minmax(0,2.1fr)
    minmax(300px,.9fr);

  border-left: 1px solid var(--line);

  border-right: 1px solid var(--line);

}


.dashboard-main {

  padding:
    clamp(65px,7vw,105px)
    clamp(24px,5vw,80px);

}


.dashboard-side {

  border-left:
    1px solid var(--line);

}


.dashboard-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 30px;

  margin-bottom: 35px;

}


.section-label {

  margin-bottom: 18px;

  color: var(--red);

  font-size: 9px;

  letter-spacing: .2em;

  font-weight: 900;

}


.dashboard-heading h2,
.about-preview h2,
.section-heading h2,
.connect-content h2 {

  font-size:
    clamp(42px,5vw,76px);

  line-height: .88;

  letter-spacing: -.065em;

  font-weight: 950;

  text-transform: uppercase;

}


.dashboard-heading h2 span,
.about-preview h2 span,
.section-heading h2 span,
.connect-content h2 span {

  color: var(--red);

}


.text-link {

  margin-bottom: 4px;

  color: var(--red);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .13em;

}


.schedule-card {

  min-height: 115px;

  border:
    1px solid var(--line);

  display: grid;

  grid-template-columns:
    150px
    1fr
    90px
    110px;

  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(239,11,31,.045),
      transparent
    );

  transition: .25s;

}


.schedule-card:hover {

  border-color:
    rgba(239,11,31,.55);

  background:
    rgba(239,11,31,.045);

}


.schedule-date {

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 24px;

  border-right:
    1px solid var(--line);

}


.schedule-date strong {

  color: #a8a8ad;

  font-size: 10px;

  letter-spacing: .15em;

}


.schedule-date span {

  font-size: 20px;

  font-weight: 900;

  margin-top: 3px;

}


.schedule-info {

  padding: 22px;

}


.schedule-info p {

  color: #666;

  font-size: 8px;

  letter-spacing: .18em;

  font-weight: 900;

}


.schedule-info h3 {

  margin: 5px 0;

  font-size:
    clamp(20px,2vw,30px);

  letter-spacing: -.04em;

}


.schedule-info > span {

  color: var(--red);

  font-size: 10px;

  font-weight: 800;

}


.schedule-status {

  display: flex;

  gap: 8px;

  align-items: center;

  font-size: 8px;

  letter-spacing: .12em;

}


.schedule-card > a {

  color: var(--red);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .11em;

}


.about-preview {

  margin-top: 70px;

  padding-top: 55px;

  border-top:
    1px solid var(--line);

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: clamp(45px,7vw,100px);

}


.about-preview-copy {

  padding-top: 29px;

}


.about-preview-copy p {

  margin-bottom: 17px;

  color: var(--grey);

  font-size: 14px;

  line-height: 1.75;

}


.about-preview-copy .about-lead {

  color: white;

  font-size:
    clamp(21px,2vw,30px);

  line-height: 1.15;

  letter-spacing: -.035em;

}


.about-preview-copy strong {

  color: white;

}


.side-panel {

  padding:
    52px
    clamp(25px,3vw,45px);

  border-bottom:
    1px solid var(--line);

}


.side-title {

  margin-bottom: 28px;

  color: #a2a2a6;

  font-size: 12px;

  letter-spacing: .16em;

  font-weight: 900;

}


.side-title::after {

  content: "";

  display: block;

  width: 36px;

  height: 2px;

  margin-top: 11px;

  background: var(--red);

}


.quick-socials {

  display: flex;

  flex-direction: column;

}


.quick-socials a {

  display: flex;

  justify-content: space-between;

  padding: 13px 0;

  border-bottom:
    1px solid rgba(255,255,255,.07);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .13em;

  transition: .2s;

}


.quick-socials a:hover {

  padding-left: 8px;

  color: var(--red);

}


.latest-video {

  min-height: 260px;

  border:
    1px solid var(--line);

  position: relative;

  overflow: hidden;

  display: block;

  background: #050505;

}


.video-brand {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  opacity: .31;

}


.video-brand img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter:
    grayscale(.2)
    brightness(.7);

  transform:
    scale(1.15);

}


.latest-video::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      #050505,
      rgba(5,5,5,.3)
    );

}


.video-overlay {

  position: absolute;

  inset: 0;

  z-index: 2;

  padding: 25px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

}


.video-category {

  color: var(--red);

  font-size: 8px;

  letter-spacing: .16em;

  font-weight: 900;

}


.video-overlay h3 {

  margin-top: 6px;

  font-size: 25px;

  line-height: .95;

  letter-spacing: -.04em;

}


.play-button {

  position: absolute;

  top: 50%;

  left: 50%;

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

  width: 50px;

  height: 50px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  padding-left: 3px;

  background: var(--red);

  box-shadow:
    0 0 35px
    rgba(239,11,31,.35);

}



/* ═══════════════════════════════
   GLOBAL SECTIONS
═══════════════════════════════ */

.section {

  max-width: var(--max-width);

  margin: auto;

  padding:
    clamp(100px,10vw,160px)
    clamp(24px,6vw,95px);

}


.section-heading {

  display: grid;

  grid-template-columns:
    1.5fr .5fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 65px;

}


.section-heading > p {

  max-width: 350px;

  color: var(--grey);

  font-size: 14px;

  line-height: 1.7;

}



/* ═══════════════════════════════
   CONTENT CARDS
═══════════════════════════════ */

.content-section {

  border-top:
    1px solid var(--line);

}


.content-grid {

  display: grid;

  grid-template-columns:
    1.25fr
    1fr
    1fr;

  border:
    1px solid var(--line);

  background:
    var(--line);

  gap: 1px;

}


.content-card {

  min-height: 430px;

  padding: 28px;

  position: relative;

  overflow: hidden;

  background: #080809;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition: .3s;

}


.content-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 100%;

  height: 3px;

  background: var(--red);

  transition: .3s;

}


.content-card:hover::before {

  right: 0;

}


.content-card:hover {

  background: #0d0d0f;

}


.featured-card {

  background:
    radial-gradient(
      circle at 30% 50%,
      rgba(200,0,20,.14),
      transparent 55%
    ),
    #09090a;

}


.card-watermark {

  position: absolute;

  width: 330px;

  max-width: none;

  right: -100px;

  top: 50%;

  transform:
    translateY(-50%);

  opacity: .055;

  pointer-events: none;

}


.card-number {

  color: #555;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .13em;

}


.content-card-body {

  position: relative;

  z-index: 2;

}


.content-card-body > span {

  color: var(--red);

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .17em;

}


.content-card h3 {

  margin: 7px 0 15px;

  font-size:
    clamp(36px,4vw,60px);

  line-height: 1;

  letter-spacing: -.06em;

}


.content-card p {

  max-width: 320px;

  color: var(--grey);

  font-size: 13px;

  line-height: 1.7;

}


.card-footer {

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .13em;

}



/* ═══════════════════════════════
   BRAND STATEMENT
═══════════════════════════════ */

.brand-statement {

  min-height: 600px;

  position: relative;

  overflow: hidden;

  display: grid;

  place-items: center;

  text-align: center;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  background:
    radial-gradient(
      circle,
      rgba(239,11,31,.13),
      transparent 42%
    ),
    #050505;

}


.statement-logo {

  position: absolute;

  width:
    min(900px,85vw);

  opacity: .045;

  filter: grayscale(1);

}


.statement-content {

  position: relative;

  z-index: 2;

}


.statement-content > p:first-child {

  color: #666;

  font-size: 9px;

  letter-spacing: .21em;

  font-weight: 900;

  margin-bottom: 25px;

}


.statement-content h2 {

  font-size:
    clamp(55px,8vw,125px);

  line-height: .86;

  letter-spacing: -.07em;

  font-weight: 950;

}


.statement-content h2 span {

  color: var(--red);

}


.statement-description {

  margin-top: 25px;

  color: #777;

  font-size: 13px;

  letter-spacing: .08em;

}



/* ═══════════════════════════════
   PROJECTS
═══════════════════════════════ */

.projects-section {

  border-bottom:
    1px solid var(--line);

}


.project-list {

  border-top:
    1px solid var(--line);

}


.project-row {

  min-height: 125px;

  display: grid;

  grid-template-columns:
    70px
    2fr
    1fr
    100px;

  align-items: center;

  gap: 25px;

  border-bottom:
    1px solid var(--line);

  transition: .25s;

}


.project-row:hover {

  padding:
    0 18px;

  background:
    rgba(255,255,255,.022);

}


.project-number {

  color: #555;

  font-size: 9px;

  letter-spacing: .15em;

}


.project-name span {

  color: var(--red);

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .16em;

}


.project-name h3 {

  margin-top: 4px;

  font-size:
    clamp(25px,3vw,42px);

  letter-spacing: -.05em;

}


.project-row > p {

  color: #6c6c71;

  font-size: 9px;

  letter-spacing: .12em;

}


.project-row > strong {

  text-align: right;

  color: #777;

  font-size: 8px;

  letter-spacing: .15em;

}


.project-row > strong.project-live {

  color: var(--red);

}



/* ═══════════════════════════════
   CONNECT
═══════════════════════════════ */

.connect-section {

  min-height: 90svh;

  position: relative;

  overflow: hidden;

  display: grid;

  place-items: center;

  padding: 100px 24px;

  text-align: center;

  background:
    radial-gradient(
      circle,
      rgba(239,11,31,.10),
      transparent 50%
    );

}


.connect-logo-background {

  position: absolute;

  width:
    min(1100px,95vw);

  opacity: .035;

  filter:
    grayscale(1);

}


.connect-content {

  position: relative;

  z-index: 2;

}


.connect-content h2 {

  font-size:
    clamp(55px,9vw,130px);

  line-height: .82;

}


.connect-copy {

  max-width: 520px;

  margin:
    35px auto 0;

  color: var(--grey);

}


.social-buttons {

  margin-top: 45px;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;

}


.social-buttons a {

  width: 175px;

  height: 52px;

  padding: 0 18px;

  border:
    1px solid var(--line);

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .13em;

  transition: .25s;

}


.social-buttons a:hover {

  background: var(--red);

  border-color: var(--red);

  transform:
    translateY(-3px);

}


.email-link {

  display: inline-block;

  margin-top: 35px;

  padding-bottom: 4px;

  color: #777;

  border-bottom:
    1px solid #333;

  font-size: 12px;

}



/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */

footer {

  min-height: 130px;

  padding:
    25px
    clamp(24px,6vw,90px);

  border-top:
    1px solid var(--line);

  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  align-items: center;

}


.footer-logo {

  width: 105px;

}


footer > div {

  text-align: center;

}


footer p,
footer span,
footer > a:last-child {

  color: #5b5b5f;

  font-size: 8px;

  letter-spacing: .15em;

  font-weight: 800;

}


footer > div span {

  display: block;

  margin-top: 5px;

  color: var(--red);

}


footer > a:last-child {

  justify-self: end;

}



/* ═══════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════ */

.reveal {

  opacity: 0;

  transform:
    translateY(30px);

  transition:

    opacity .8s ease,

    transform .8s
    cubic-bezier(.2,.75,.2,1);

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}



/* ═══════════════════════════════
   TABLET
═══════════════════════════════ */

@media (max-width: 1000px) {


  .site-header {

    grid-template-columns:
      1fr auto;

    height: 72px;

    padding:
      0 22px;

  }


  .header-logo {

    width: 95px;

    position: relative;

    z-index: 105;

  }


  .watch-live-header {

    display: none;

  }


  .menu-button {

    width: 38px;

    height: 38px;

    display: block;

    border: 0;

    background: transparent;

    position: relative;

    z-index: 105;

  }


  .menu-button span {

    position: absolute;

    left: 7px;

    width: 24px;

    height: 2px;

    background: white;

    transition: .25s;

  }


  .menu-button span:first-child {

    top: 13px;

  }


  .menu-button span:last-child {

    top: 22px;

  }


  .menu-button.active span:first-child {

    top: 18px;

    transform:
      rotate(45deg);

  }


  .menu-button.active span:last-child {

    top: 18px;

    transform:
      rotate(-45deg);

  }


  nav {

    position: fixed;

    inset: 0;

    background:
      rgba(3,3,3,.985);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 40px;

    gap: 18px;

    opacity: 0;

    visibility: hidden;

    transition: .25s;

  }


  nav.open {

    opacity: 1;

    visibility: visible;

  }


  nav a {

    font-size:
      clamp(32px,9vw,60px);

    line-height: .95;

    letter-spacing: -.04em;

    font-weight: 950;

  }


  .dashboard-section {

    grid-template-columns: 1fr;

  }


  .dashboard-side {

    border-left: 0;

    border-top:
      1px solid var(--line);

    display: grid;

    grid-template-columns: 1fr 1fr;

  }


  .content-grid {

    grid-template-columns: 1fr;

  }


  .content-card {

    min-height: 340px;

  }


}



/* ═══════════════════════════════
   MOBILE
═══════════════════════════════ */

@media (max-width: 700px) {


  .cursor-glow {

    display: none;

  }


  .hero {

    min-height: 800px;

    padding:
      120px 20px
      70px;

  }


  .hero-logo {

    width: 100%;

  }


  .hero-description br {

    display: none;

  }


  .hero-actions {

    width: 100%;

    flex-direction: column;

  }


  .button {

    width: 100%;

  }


  .hero-decoration {

    display: none;

  }


  .dashboard-main {

    padding:
      80px 22px;

  }


  .dashboard-heading {

    flex-direction: column;

    align-items: flex-start;

  }


  .schedule-card {

    grid-template-columns:
      100px
      1fr;

  }


  .schedule-status,
  .schedule-card > a {

    display: none;

  }


  .schedule-date {

    padding: 17px;

  }


  .about-preview {

    grid-template-columns: 1fr;

    gap: 20px;

  }


  .dashboard-side {

    grid-template-columns: 1fr;

  }


  .section {

    padding:
      90px 22px;

  }


  .section-heading {

    grid-template-columns: 1fr;

    gap: 25px;

  }


  .project-row {

    grid-template-columns:
      45px
      1fr;

    padding:
      25px 0;

  }


  .project-row > p,
  .project-row > strong {

    display: none;

  }


  .social-buttons {

    flex-direction: column;

  }


  .social-buttons a {

    width: 100%;

  }


  footer {

    grid-template-columns: 1fr;

    justify-items: center;

    gap: 25px;

    padding:
      50px 20px;

  }


  footer > a:last-child {

    justify-self: center;

  }


}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {


  *,
  *::before,
  *::after {

    scroll-behavior: auto !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

  }


}


/* MNCM LABS GITHUB PROJECT */

.project-link {
  cursor: pointer;
}

.project-link .github-action {
  color: var(--red);
  transition:
    color .25s ease,
    transform .25s ease;
}

.project-link:hover .github-action {
  color: var(--red-bright);
  transform: translateX(5px);
}

.project-link:hover .project-name h3 {
  color: var(--red);
}

.project-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}