/* =========================================================
   TEAM NOX
   OUR STORY
========================================================= */


/* =========================================================
   BASE
========================================================= */

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: #050505;

  color: #f5f5f5;

  font-family: "Montserrat", sans-serif;
}


/* =========================================================
   SHARED BACKGROUND GRID
========================================================= */

.story-grid-bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    );

  background-size:
    75px
    75px;

  opacity: 0.5;

  pointer-events: none;
}


/* =========================================================
   HERO
========================================================= */

.story-hero {
  width: 100%;

  height:
    calc(
      100vh - 88px
    );

  min-height: 650px;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding:
    0
    max(7vw, 55px);

  box-sizing: border-box;

  border-bottom:
    1px solid
    #363636;

  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(255,255,255,0.055),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #050505 0%,
      #101010 55%,
      #080808 100%
    );
}


/* technical grid */

.story-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    );

  background-size:
    75px
    75px;

  opacity: 0.5;

  pointer-events: none;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.story-hero-content {
  width:
    min(
      720px,
      60%
    );

  position: relative;

  z-index: 3;
}


.story-hero-eyebrow {
  display: block;

  margin-bottom: 22px;

  color: #737373;

  font-size: 10px;

  font-weight: 400;

  letter-spacing: 5px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.story-hero h1 {
  margin: 0;

  color: #f5f5f5;

  font-size:
    clamp(
      58px,
      6.5vw,
      96px
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: 10px;
}


.story-hero-line {
  width: 145px;

  height: 1px;

  margin:
    32px
    0
    28px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.65),
      transparent
    );
}


/* =========================================================
   HERO TEXT
========================================================= */

.story-hero p {
  max-width: 620px;

  margin: 0;

  color: #bcbcbc;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.85;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.story-button {
  width: 285px;

  height: 62px;

  margin-top: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255,255,255,0.42);

  background:
    rgba(0,0,0,0.16);

  color: #ffffff;

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 3px;

  text-decoration: none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


.story-button:hover {
  transform:
    translateY(-3px);

  background: #f5f5f5;

  border-color: #f5f5f5;

  color: #050505;
}


/* =========================================================
   HERO WATERMARK
========================================================= */

.story-hero-watermark {
  width:
    min(
      750px,
      56vw
    );

  position: absolute;

  right: -130px;

  bottom: -185px;

  opacity: 0.12;

  filter:
    grayscale(1)
    brightness(0.95);

  pointer-events: none;

  z-index: 1;
}


/* =========================================================
   MISSION + VISION
========================================================= */

.story-info-section {
  width: 100%;

  min-height: 500px;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding:
    90px
    max(5vw, 48px);

  box-sizing: border-box;

  border-bottom:
    1px solid
    #363636;
}


/* =========================================================
   MISSION BACKGROUND
========================================================= */

.mission-section {
  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(255,255,255,0.05),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #070707 0%,
      #101010 50%,
      #080808 100%
    );
}


/* =========================================================
   VISION BACKGROUND
========================================================= */

.vision-section {
  background:
    radial-gradient(
      circle at 22% 80%,
      rgba(255,255,255,0.045),
      transparent 34%
    ),
    linear-gradient(
      225deg,
      #070707 0%,
      #101010 50%,
      #080808 100%
    );
}


/* =========================================================
   MISSION / VISION INNER
========================================================= */

.story-info-inner {
  width:
    min(
      1320px,
      100%
    );

  margin:
    0 auto;

  position: relative;

  z-index: 2;
}


/* =========================================================
   EYEBROW
========================================================= */

.story-eyebrow {
  display: block;

  margin-bottom: 16px;

  color: #8d8d8d;

  font-size: 10px;

  font-weight: 400;

  letter-spacing: 3px;

  text-transform: uppercase;
}


/* =========================================================
   MISSION / VISION TITLE
========================================================= */

.story-info-inner h2,
.principles-heading h2,
.timeline-heading h2 {
  margin: 0;

  color: #f5f5f5;

  font-size:
    clamp(
      40px,
      4.5vw,
      62px
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: 9px;
}


/* =========================================================
   MISSION / VISION DIVIDER
========================================================= */

.story-title-divider {
  width: 100%;

  margin:
    32px
    0
    42px;

  display: grid;

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

  align-items: center;

  gap: 16px;
}


.story-title-divider span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.42)
    );
}


.story-title-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.42),
      rgba(255,255,255,0.06)
    );
}


.story-title-divider img {
  width: 22px;

  height: 22px;

  object-fit: contain;

  opacity: 0.78;

  filter: grayscale(1);
}


/* =========================================================
   MISSION / VISION TEXT
========================================================= */

.story-text-columns {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      60px,
      7vw,
      115px
    );
}


.story-text-columns p {
  margin: 0;

  position: relative;

  padding-left: 23px;

  color: #d2d2d2;

  font-size: 15.5px;

  font-weight: 400;

  line-height: 1.95;

  letter-spacing: 0.1px;
}


.story-text-columns p::before {
  content: "";

  width: 1px;

  position: absolute;

  left: 0;

  top: 5px;

  bottom: 5px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.52),
      rgba(255,255,255,0.05)
    );
}


/* =========================================================
   PRINCIPLES
========================================================= */

.principles-section {
  position: relative;

  overflow: hidden;

  padding:
    82px
    max(4vw, 32px)
    105px;

  border-bottom:
    1px solid
    #363636;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255,255,255,0.06),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #070707 0%,
      #101010 50%,
      #080808 100%
    );
}


.principles-section::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    );

  background-size:
    75px
    75px;

  opacity: 0.5;

  pointer-events: none;
}


.principles-inner {
  width:
    min(
      1220px,
      100%
    );

  margin:
    0 auto;

  position: relative;

  z-index: 2;
}


.principles-heading {
  margin-bottom: 55px;
}


/* =========================================================
   PRINCIPLES DIVIDER
========================================================= */

.principles-divider,
.timeline-heading-divider {
  width: 100%;

  display: grid;

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

  align-items: center;

  gap: 16px;

  margin-top: 24px;
}


.principles-divider span,
.timeline-heading-divider span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.42)
    );
}


.principles-divider span:last-child,
.timeline-heading-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.42),
      rgba(255,255,255,0.05)
    );
}


.principles-divider img,
.timeline-heading-divider img {
  width: 22px;

  height: 22px;

  object-fit: contain;

  opacity: 0.75;

  filter: grayscale(1);
}


/* =========================================================
   PRINCIPLES GRID
========================================================= */

.principles-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 24px;
}


/* =========================================================
   PRINCIPLE CARD
========================================================= */

.principle-card {
  min-height: 520px;

  position: relative;

  display: flex;

  flex-direction: column;

  padding:
    48px
    32px
    78px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,0.18);

  background:
    linear-gradient(
      145deg,
      #151515,
      #090909
    );

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}


.principle-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(255,255,255,0.48);

  background:
    linear-gradient(
      145deg,
      #1a1a1a,
      #0b0b0b
    );
}


.principle-card::before {
  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.4),
      transparent
    );
}


/* =========================================================
   PRINCIPLE NUMBER
========================================================= */

.principle-number {
  position: absolute;

  top: 10px;

  right: 20px;

  color:
    rgba(255,255,255,0.035);

  font-size: 100px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: -3px;
}


/* =========================================================
   PRINCIPLE DETAILS
========================================================= */

.principle-star {
  margin-bottom: 30px;

  color: #f5f5f5;

  font-size: 18px;
}


.principle-category {
  display: block;

  margin-bottom: 10px;

  color: #6d6d6d;

  font-size: 8px;

  font-weight: 400;

  letter-spacing: 3px;
}


.principle-card h3 {
  margin: 0;

  color: #f5f5f5;

  font-size:
    clamp(
      27px,
      2.5vw,
      36px
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: 7px;
}


.principle-line {
  width: 42px;

  height: 1px;

  margin:
    23px
    0
    28px;

  background: #f2f2f2;

  transition:
    width 0.3s ease;
}


.principle-card:hover
.principle-line {
  width: 85px;
}


.principle-card p {
  margin:
    0
    0
    18px;

  color: #929292;

  font-size: 12px;

  font-weight: 400;

  line-height: 1.8;
}


/* =========================================================
   PRINCIPLE KEYWORDS
========================================================= */

.principle-keywords {
  position: absolute;

  left: 32px;

  right: 32px;

  bottom: 27px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  padding-top: 14px;

  border-top:
    1px solid
    rgba(255,255,255,0.12);

  color: #616161;

  font-size: 7px;

  letter-spacing: 2px;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline-section {
  position: relative;

  overflow: hidden;

  padding:
    68px
    0
    82px;

  border-bottom:
    1px solid
    #363636;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,0.05),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #070707 0%,
      #101010 50%,
      #080808 100%
    );
}


.timeline-section::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    );

  background-size:
    75px
    75px;

  opacity: 0.5;

  pointer-events: none;
}


.timeline-inner {
  width:
    min(
      1220px,
      94%
    );

  margin:
    0 auto;

  position: relative;

  z-index: 2;
}


.timeline-heading {
  margin-bottom: 38px;
}


/* =========================================================
   TIMELINE TRACK
========================================================= */

.timeline-track {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  gap: 18px;

  padding-top: 12px;
}


.timeline-track::before {
  content: "";

  position: absolute;

  top: 54px;

  left: -7vw;

  right: -7vw;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #f5f5f5 8%,
      #f5f5f5 92%,
      transparent
    );

  z-index: 0;
}


/* =========================================================
   TIMELINE ITEMS
========================================================= */

.timeline-item {
  position: relative;

  z-index: 1;

  text-align: center;
}


.timeline-icon {
  width: 84px;

  height: 84px;

  margin:
    0
    auto
    16px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    2px solid
    #f5f5f5;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #111111,
      #050505
    );

  transition:
    transform 0.25s ease;
}


.timeline-item:hover
.timeline-icon {
  transform:
    translateY(-5px);
}


.timeline-icon svg {
  width: 50px;

  height: 50px;

  fill: none;

  stroke: #ffffff;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.timeline-ftc img {
  width: 50px;

  height: 50px;

  object-fit: contain;
}


.timeline-date {
  display: block;

  margin-bottom: 9px;

  color: #747474;

  font-size: 9px;

  letter-spacing: 1px;
}


.timeline-item h3 {
  margin:
    0
    0
    14px;

  color: #f5f5f5;

  font-size: 16px;

  font-weight: 400;

  letter-spacing: 3px;
}


.timeline-item p {
  max-width: 165px;

  margin:
    0 auto;

  color: #828282;

  font-size: 9.5px;

  line-height: 1.7;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .story-hero {
    padding:
      0
      45px;
  }


  .story-hero-content {
    width: 68%;
  }


  .story-info-section {
    min-height: auto;

    padding:
      75px
      45px;
  }


  .story-text-columns {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .story-text-columns p {
    font-size: 14px;
  }


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


  .principle-card {
    min-height: auto;

    padding-bottom: 80px;
  }


  .timeline-track {
    grid-template-columns: 1fr;

    gap: 42px;
  }


  .timeline-track::before {
    display: none;
  }


  .timeline-item p {
    max-width: 420px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .story-hero {
    height: auto;

    min-height:
      calc(
        100vh - 88px
      );

    padding:
      75px
      24px;
  }


  .story-hero-content {
    width: 100%;
  }


  .story-hero h1 {
    font-size: 46px;

    letter-spacing: 7px;
  }


  .story-hero p {
    font-size: 13px;
  }


  .story-button {
    width: 235px;

    height: 56px;

    margin-top: 42px;
  }


  .story-hero-watermark {
    width: 560px;

    right: -320px;

    bottom: -90px;

    opacity: 0.08;
  }


  .story-info-section {
    padding:
      62px
      22px;
  }


  .story-info-inner h2,
  .principles-heading h2,
  .timeline-heading h2 {
    font-size: 29px;

    letter-spacing: 5px;
  }


  .story-title-divider {
    margin:
      24px
      0
      30px;
  }


  .story-text-columns p {
    padding-left: 16px;

    font-size: 13.5px;

    line-height: 1.82;
  }


  .principles-section {
    padding:
      62px
      21px
      80px;
  }


  .principle-card {
    padding:
      40px
      24px
      76px;
  }


  .principle-number {
    font-size: 80px;
  }


  .principle-card h3 {
    font-size: 25px;

    letter-spacing: 5px;
  }


  .timeline-section {
    padding:
      60px
      0
      70px;
  }


  .timeline-inner {
    width:
      calc(
        100% - 42px
      );
  }


  .timeline-icon {
    width: 76px;

    height: 76px;
  }


  .timeline-icon svg {
    width: 44px;

    height: 44px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .story-hero h1 {
    font-size: 38px;

    letter-spacing: 5px;
  }


  .story-button {
    width: 100%;

    max-width: 240px;
  }


  .story-info-inner h2,
  .principles-heading h2,
  .timeline-heading h2 {
    font-size: 25px;

    letter-spacing: 4px;
  }


  .story-text-columns p {
    font-size: 13px;
  }


  .principle-card h3 {
    font-size: 23px;

    letter-spacing: 4px;
  }

}