/* =========================================================
   DIVISIONS PAGE
   TEAM NOX
========================================================= */


.divisions-page {
  width: 100%;

  background: #050505;
}


/* =========================================================
   SPLIT LANDING
========================================================= */

.division-split {
  width: 100%;

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

  display: flex;

  position: relative;

  overflow: hidden;

  border-bottom:
    1px solid
    #363636;
}


/* =========================================================
   BOTH PANELS
========================================================= */

.division-panel {
  flex: 1;

  min-width: 0;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition:
    flex 0.8s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
    background 0.6s ease;

  isolation: isolate;
}


.division-panel:first-child {
  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );
}


/* =========================================================
   TECHNICAL BACKGROUND
========================================================= */

.technical-panel {
  color: #f5f5f5;

  background:
    radial-gradient(
      circle at 85% 45%,
      rgba(
        255,
        255,
        255,
        0.045
      ),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #050505,
      #101010 55%,
      #090909
    );
}


.technical-panel::before {
  content: "";

  position: absolute;

  inset: 0;

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

  background-size:
    80px
    80px;

  opacity: 0.65;

  pointer-events: none;

  z-index: -1;
}


/* =========================================================
   OPERATIONS BACKGROUND
========================================================= */

.operations-panel {
  color: #efefef;

  background:
    radial-gradient(
      circle at 25% 45%,
      rgba(
        255,
        255,
        255,
        0.055
      ),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #151515,
      #0e0e0e 58%,
      #080808
    );
}


.operations-panel::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      35deg,
      transparent 48%,
      rgba(
        255,
        255,
        255,
        0.018
      )
      49%,
      rgba(
        255,
        255,
        255,
        0.018
      )
      50%,
      transparent 51%
    );

  background-size:
    160px
    160px;

  pointer-events: none;

  z-index: -1;
}


/* =========================================================
   HOVER WIDTH
========================================================= */

.division-split:has(.technical-panel:hover)
.technical-panel {
  flex: 5;
}


.division-split:has(.technical-panel:hover)
.operations-panel {
  flex: 1;
}


.division-split:has(.operations-panel:hover)
.operations-panel {
  flex: 5;
}


.division-split:has(.operations-panel:hover)
.technical-panel {
  flex: 1;
}


.division-split:has(.technical-panel:focus)
.technical-panel {
  flex: 5;
}


.division-split:has(.technical-panel:focus)
.operations-panel {
  flex: 1;
}


.division-split:has(.operations-panel:focus)
.operations-panel {
  flex: 5;
}


.division-split:has(.operations-panel:focus)
.technical-panel {
  flex: 1;
}


/* =========================================================
   IDLE
========================================================= */

.division-idle {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 50px;

  text-align: center;

  transition:
    opacity 0.4s ease,
    transform 0.6s ease;
}


.division-small-label {
  margin-bottom: 18px;

  color: #666666;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 5px;
}


.division-idle h1 {
  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      38px,
      4.2vw,
      68px
    );

  font-weight: 500;

  line-height: 1;

  letter-spacing: 10px;

  white-space: nowrap;
}


.division-divider {
  width: 300px;

  max-width: 75%;

  margin:
    35px
    auto
    25px;

  display: grid;

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

  align-items: center;

  gap: 18px;
}


.division-divider span {
  height: 1px;

  background:
    rgba(
      255,
      255,
      255,
      0.32
    );
}


.division-divider img {
  width: 22px;

  opacity: 0.7;
}


.division-idle p {
  color: #999999;

  font-size: 12px;

  font-weight: 400;

  letter-spacing: 4px;
}


.operations-panel
.division-divider span {
  background:
    rgba(
      255,
      255,
      255,
      0.24
    );
}


/* =========================================================
   EXPANDED
   IMAGE-FREE VERSION
========================================================= */

.division-expanded {
  width:
    min(
      900px,
      84%
    );

  display: block;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(20px);

  transition:
    opacity 0.45s ease 0.15s,
    transform 0.55s ease 0.15s,
    visibility 0.45s ease;
}


.technical-expanded
.division-copy {
  max-width: 760px;

  margin-right: auto;
}


.operations-expanded
.division-copy {
  max-width: 760px;

  margin-left: auto;
}


/* =========================================================
   IDLE -> EXPANDED
========================================================= */

.division-panel:hover
.division-idle,
.division-panel:focus
.division-idle {
  opacity: 0;

  transform:
    translateY(-16px);

  pointer-events: none;
}


.division-panel:hover
.division-expanded,
.division-panel:focus
.division-expanded {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);
}


.division-split:has(.technical-panel:hover)
.operations-panel
.division-idle h1,
.division-split:has(.operations-panel:hover)
.technical-panel
.division-idle h1 {
  opacity: 0;
}


.division-split:has(.technical-panel:hover)
.operations-panel
.division-idle p,
.division-split:has(.operations-panel:hover)
.technical-panel
.division-idle p,
.division-split:has(.technical-panel:hover)
.operations-panel
.division-divider,
.division-split:has(.operations-panel:hover)
.technical-panel
.division-divider {
  opacity: 0;
}


/* =========================================================
   EXPANDED TEXT
========================================================= */

.division-copy {
  position: relative;
}


.expanded-number {
  display: block;

  margin-bottom: 22px;

  color: #666666;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 3px;
}


.division-copy h2 {
  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      38px,
      4.5vw,
      68px
    );

  font-weight: 500;

  line-height: 1;

  letter-spacing: 9px;
}


.expanded-divider {
  width: 330px;

  max-width: 100%;

  margin:
    28px
    0;

  display: grid;

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

  align-items: center;

  gap: 16px;
}


.expanded-divider span {
  height: 1px;

  background:
    #4c4c4c;
}


.expanded-divider img {
  width: 20px;

  opacity: 0.7;
}


.expanded-description {
  max-width: 760px;

  color: #c2c2c2;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.9;

  letter-spacing: 1.1px;
}


/* =========================================================
   LEARN MORE
========================================================= */

.division-learn-button {
  width: 260px;

  height: 62px;

  margin-top: 34px;

  padding:
    0
    25px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border:
    1px solid
    #777777;

  background:
    rgba(
      255,
      255,
      255,
      0.015
    );

  color: #f5f5f5;

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

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 3px;

  cursor: pointer;

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


.division-learn-button:hover {
  color: #050505;

  background: #f5f5f5;

  border-color:
    #f5f5f5;
}


.learn-arrow {
  font-size: 22px;

  transition:
    transform 0.3s ease;
}


.division-learn-button:hover
.learn-arrow {
  transform:
    translateX(6px);
}


/* =========================================================
   TECHNICAL SECTION
========================================================= */

.technical-divisions-section {
  width: 100%;

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

  position: relative;

  overflow: hidden;

  padding:
    38px
    5%
    70px;

  border-top:
    1px solid
    #303030;

  border-bottom:
    1px solid
    #303030;

  scroll-margin-top: 88px;

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


.technical-divisions-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;
}


.technical-divisions-inner {
  width:
    min(
      1500px,
      100%
    );

  margin: auto;

  position: relative;

  z-index: 2;
}


/* =========================================================
   TECHNICAL HEADING
========================================================= */

.technical-divisions-heading {
  margin-bottom: 72px;
}


.technical-divisions-heading h2 {
  margin: 0;

  color: #f5f5f5;

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

  font-size:
    clamp(
      32px,
      3.5vw,
      50px
    );

  font-weight: 600;

  letter-spacing: 7px;
}


.technical-heading-divider {
  width: 100%;

  margin-top: 24px;

  display: grid;

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

  align-items: center;

  gap: 16px;
}


.technical-heading-divider span {
  height: 1px;

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


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


.technical-heading-divider img {
  width: 22px;

  height: 22px;

  object-fit: contain;

  opacity: 0.75;
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.technical-divisions-grid {
  display: grid;

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

  gap: 24px;

  align-items: stretch;
}


/* =========================================================
   TECHNICAL CARDS
========================================================= */

.technical-division-card {
  min-height: 495px;

  position: relative;

  display: flex;

  flex-direction: column;

  padding:
    78px
    24px
    34px;

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

  border-radius: 16px;

  background:
    linear-gradient(
      150deg,
      rgba(
        28,
        28,
        28,
        0.98
      ),
      rgba(
        10,
        10,
        10,
        0.98
      )
    );

  box-shadow:
    0
    18px
    50px
    rgba(
      0,
      0,
      0,
      0.25
    );

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


.technical-division-card:hover {
  transform:
    translateY(-7px);

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

  background:
    linear-gradient(
      150deg,
      #202020,
      #0c0c0c
    );

  box-shadow:
    0
    25px
    60px
    rgba(
      0,
      0,
      0,
      0.38
    );
}


/* =========================================================
   TECHNICAL ICON
========================================================= */

.technical-icon {
  width: 90px;

  height: 90px;

  position: absolute;

  top: -45px;

  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 45% 35%,
      #272727,
      #101010 72%
    );

  box-shadow:
    0
    12px
    30px
    rgba(
      0,
      0,
      0,
      0.4
    );

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


.technical-division-card:hover
.technical-icon {
  transform:
    translateX(-50%)
    translateY(-4px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.95
    );
}


.technical-icon svg {
  width: 48px;

  height: 48px;

  fill: none;

  stroke: #f4f4f4;

  stroke-width: 2.1;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.software-icon span {
  color: #f4f4f4;

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

  font-size: 24px;

  font-weight: 600;
}


/* =========================================================
   TECHNICAL CARD TEXT
========================================================= */

.technical-card-divider {
  width: 34px;

  height: 1px;

  margin:
    0
    auto
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.48
    );

  transition:
    width 0.35s ease;
}


.technical-division-card:hover
.technical-card-divider {
  width: 58px;
}


.technical-division-card h3 {
  margin:
    0
    0
    18px;

  text-align: center;

  color: #f5f5f5;

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

  font-size: 19px;

  font-weight: 600;

  letter-spacing: 3px;
}


.technical-division-card p {
  margin: 0;

  color: #dedede;

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

  font-size: 14.5px;

  font-weight: 400;

  line-height: 1.72;

  letter-spacing: 0.05px;
}


/* =========================================================
   OPERATIONS SECTION
========================================================= */

.operations-divisions-section {
  width: 100%;

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

  position: relative;

  overflow: hidden;

  padding:
    70px
    5%
    85px;

  border-bottom:
    1px solid
    #303030;

  scroll-margin-top: 88px;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(
        255,
        255,
        255,
        0.055
      ),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #090909 0%,
      #111111 50%,
      #070707 100%
    );
}


.operations-divisions-section::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      35deg,
      transparent 48%,
      rgba(
        255,
        255,
        255,
        0.011
      )
      49%,
      rgba(
        255,
        255,
        255,
        0.011
      )
      50%,
      transparent 51%
    );

  background-size:
    175px
    175px;

  pointer-events: none;
}


.operations-divisions-inner {
  width:
    min(
      1500px,
      100%
    );

  margin: auto;

  position: relative;

  z-index: 2;
}


/* =========================================================
   OPERATIONS HEADING
========================================================= */

.operations-divisions-heading {
  margin-bottom: 72px;
}


.operations-divisions-heading h2 {
  margin: 0;

  color: #f5f5f5;

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

  font-size:
    clamp(
      32px,
      3.5vw,
      50px
    );

  font-weight: 600;

  letter-spacing: 7px;
}


.operations-heading-divider {
  width: 100%;

  margin-top: 24px;

  display: grid;

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

  align-items: center;

  gap: 16px;
}


.operations-heading-divider span {
  height: 1px;

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


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


.operations-heading-divider img {
  width: 22px;

  height: 22px;

  object-fit: contain;

  opacity: 0.75;
}


/* =========================================================
   OPERATIONS GRID
========================================================= */

.operations-divisions-grid {
  display: grid;

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

  gap: 24px;

  align-items: stretch;
}


/* =========================================================
   OPERATIONS CARDS
========================================================= */

.operations-division-card {
  min-height: 495px;

  position: relative;

  display: flex;

  flex-direction: column;

  padding:
    78px
    24px
    34px;

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

  border-radius: 16px;

  background:
    linear-gradient(
      150deg,
      rgba(
        28,
        28,
        28,
        0.98
      ),
      rgba(
        10,
        10,
        10,
        0.98
      )
    );

  box-shadow:
    0
    18px
    50px
    rgba(
      0,
      0,
      0,
      0.25
    );

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


.operations-division-card:hover {
  transform:
    translateY(-7px);

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

  background:
    linear-gradient(
      150deg,
      #202020,
      #0c0c0c
    );

  box-shadow:
    0
    25px
    60px
    rgba(
      0,
      0,
      0,
      0.38
    );
}


/* =========================================================
   OPERATIONS ICON
========================================================= */

.operations-icon {
  width: 90px;

  height: 90px;

  position: absolute;

  top: -45px;

  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 45% 35%,
      #272727,
      #101010 72%
    );

  box-shadow:
    0
    12px
    30px
    rgba(
      0,
      0,
      0,
      0.4
    );

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


.operations-division-card:hover
.operations-icon {
  transform:
    translateX(-50%)
    translateY(-4px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.95
    );
}


.operations-icon svg {
  width: 48px;

  height: 48px;

  fill: none;

  stroke: #f4f4f4;

  stroke-width: 2.1;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.operations-finance-icon svg {
  width: 58px;

  height: 58px;
}


.operations-strategy-icon svg {
  width: 65px;

  height: 65px;
}


/* =========================================================
   OPERATIONS CARD TEXT
========================================================= */

.operations-card-divider {
  width: 34px;

  height: 1px;

  margin:
    0
    auto
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.48
    );

  transition:
    width 0.35s ease;
}


.operations-division-card:hover
.operations-card-divider {
  width: 58px;
}


.operations-division-card h3 {
  margin:
    0
    0
    18px;

  text-align: center;

  color: #f5f5f5;

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

  font-size: 19px;

  font-weight: 600;

  letter-spacing: 3px;
}


.operations-division-card p {
  margin: 0;

  color: #dedede;

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

  font-size: 14.5px;

  font-weight: 400;

  line-height: 1.72;

  letter-spacing: 0.05px;
}


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

@media (max-width: 1200px) {

  .technical-divisions-grid,
  .operations-divisions-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      85px
      24px;
  }


  .technical-division-card,
  .operations-division-card {
    min-height: 450px;
  }

}


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

@media (max-width: 1000px) {

  .division-split {
    min-height: auto;

    flex-direction: column;
  }


  .division-panel {
    min-height: 650px;

    flex: none !important;
  }


  .division-panel:first-child {
    border-right: none;

    border-bottom:
      1px solid
      #333333;
  }


  .division-expanded,
  .operations-expanded {
    width: 86%;

    padding:
      60px
      0;
  }


  .technical-expanded
  .division-copy,
  .operations-expanded
  .division-copy {
    max-width: 700px;

    margin:
      0 auto;
  }

}


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

@media (max-width: 700px) {

  .division-panel {
    min-height: 580px;
  }


  .division-idle h1 {
    font-size: 30px;

    letter-spacing: 5px;
  }


  .division-copy h2 {
    font-size: 32px;

    letter-spacing: 5px;
  }


  .division-expanded {
    width: 88%;
  }


  .expanded-description {
    font-size: 12px;

    line-height: 1.8;
  }


  .technical-divisions-section,
  .operations-divisions-section {
    padding:
      55px
      6%
      70px;
  }


  .technical-divisions-heading,
  .operations-divisions-heading {
    margin-bottom: 80px;
  }


  .technical-divisions-heading h2,
  .operations-divisions-heading h2 {
    font-size: 28px;

    letter-spacing: 4px;
  }


  .technical-heading-divider,
  .operations-heading-divider {
    grid-template-columns:
      1fr
      18px
      1fr;

    gap: 12px;
  }


  .technical-heading-divider img,
  .operations-heading-divider img {
    width: 18px;

    height: 18px;
  }


  .technical-divisions-grid,
  .operations-divisions-grid {
    grid-template-columns: 1fr;

    gap: 85px;
  }


  .technical-division-card,
  .operations-division-card {
    min-height: auto;

    padding:
      72px
      22px
      35px;
  }


  .technical-icon,
  .operations-icon {
    width: 86px;

    height: 86px;

    top: -43px;
  }


  .technical-icon svg,
  .operations-icon svg {
    width: 45px;

    height: 45px;
  }


  .technical-division-card p,
  .operations-division-card p {
    font-size: 13.5px;

    line-height: 1.75;
  }

}