/* =========================================================
   SKY HIGH FRAMES STUDIO
   WHO WE ARE
   who.css - v6
   ========================================================= */


/* =========================================================
   HERO + IDENTITY JOURNEY
   ========================================================= */

.identity-journey {
  position: relative;

  width: 100%;
}


/* =========================================================
   MISSION / VISION SECTION
   ========================================================= */

.identity-section {
  position: relative;

  z-index: 10;

  width:
    min(
      1240px,
      94%
    );

  min-height: 590px;

  margin:
    -220px
    auto
    0;

  padding:
    100px
    40px
    120px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    96px
    minmax(0, 1fr);

  align-items: stretch;
}


/* =========================================================
   CENTRAL FILM RIBBON
   ========================================================= */

.film-strip-global {
  position: absolute;

  z-index: 4;

  left: 50%;

  top:
    calc(
      var(--page-hero-height)
      - 420px
    );

  bottom: 0;

  width: 48px;

  transform: translateX(-50%);

  background-color:
    rgba(1, 7, 16, 0.48);

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='70' viewBox='0 0 48 70'%3E%3Crect x='13' y='18' width='22' height='34' rx='5' fill='%23010710' fill-opacity='0.74' stroke='%2349c7ff' stroke-width='1.5'/%3E%3C/svg%3E");

  background-repeat: repeat-y;
  background-position: center top;
  background-size: 48px 70px;

  border-left:
    1px solid
    rgba(73, 199, 255, 0.17);

  border-right:
    1px solid
    rgba(73, 199, 255, 0.17);

  box-shadow:
    0 0 8px rgba(73, 199, 255, 0.06),
    inset 0 0 14px rgba(0, 70, 120, 0.10);

  -webkit-mask-image:
    linear-gradient(
      to bottom,

      transparent 0px,
      transparent 35px,

      rgba(0, 0, 0, 0.12) 80px,
      rgba(0, 0, 0, 0.30) 120px,
      rgba(0, 0, 0, 0.55) 160px,
      rgba(0, 0, 0, 0.80) 205px,

      black 245px,
      black calc(100% - 245px),

      rgba(0, 0, 0, 0.80) calc(100% - 205px),
      rgba(0, 0, 0, 0.55) calc(100% - 160px),
      rgba(0, 0, 0, 0.30) calc(100% - 120px),
      rgba(0, 0, 0, 0.12) calc(100% - 80px),

      transparent calc(100% - 35px),
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,

      transparent 0px,
      transparent 35px,

      rgba(0, 0, 0, 0.12) 80px,
      rgba(0, 0, 0, 0.30) 120px,
      rgba(0, 0, 0, 0.55) 160px,
      rgba(0, 0, 0, 0.80) 205px,

      black 245px,
      black calc(100% - 245px),

      rgba(0, 0, 0, 0.80) calc(100% - 205px),
      rgba(0, 0, 0, 0.55) calc(100% - 160px),
      rgba(0, 0, 0, 0.30) calc(100% - 120px),
      rgba(0, 0, 0, 0.12) calc(100% - 80px),

      transparent calc(100% - 35px),
      transparent 100%
    );
}


/* =========================================================
   CONTENT WINDOWS
   ========================================================= */

.identity-card {
  position: relative;

  z-index: 1;

  width:
    min(
      470px,
      100%
    );

  min-height: 285px;

  padding:
    38px
    40px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      rgba(7, 34, 55, 0.96),
      rgba(3, 17, 29, 0.96)
    );

  border:
    1px solid
    rgba(73, 199, 255, 0.38);

  border-radius: 18px;

  box-shadow:
    0 0 7px rgba(73, 199, 255, 0.42),
    0 0 22px rgba(73, 199, 255, 0.18),
    0 0 52px rgba(73, 199, 255, 0.07);
}


.mission-card {
  grid-column: 1;
  grid-row: 1;

  justify-self: end;

  margin-right: 26px;
}


.vision-card {
  grid-column: 3;
  grid-row: 1;

  justify-self: start;

  margin-left: 26px;
}


/* =========================================================
   CONNECTORS
   ========================================================= */

.identity-card::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 74px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      rgba(73, 199, 255, 0.12),
      rgba(73, 199, 255, 0.72)
    );

  box-shadow:
    0 0 7px
    rgba(73, 199, 255, 0.38);
}


.mission-card::after {
  right: -74px;
}


.vision-card::after {
  left: -74px;

  transform: rotate(180deg);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.identity-label {
  display: block;

  margin-bottom: 13px;

  color:
    rgba(192, 204, 213, 0.72);

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
}


.identity-card h2 {
  position: relative;

  width: fit-content;

  margin-bottom: 22px;
  padding-bottom: 10px;

  color: var(--cyan-bright);

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

  font-weight: 300;
  letter-spacing: 0.08em;

  text-shadow:
    0 0 8px rgba(73, 199, 255, 0.50),
    0 0 18px rgba(73, 199, 255, 0.17);
}


.identity-card h2::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 54px;
  height: 1px;

  background: var(--cyan);

  box-shadow:
    0 0 7px
    rgba(73, 199, 255, 0.55);
}


.identity-card p {
  color: #eef3f7;

  font-size: 16px;
  line-height: 1.7;
}


/* =========================================================
   IDENTITY ENDING
   ========================================================= */

.identity-ending {
  width: 100%;

  padding:
    20px
    20px
    60px;

  text-align: center;
}


.identity-ending p {
  color:
    rgba(
      255,
      255,
      255,
      0.55
    );

  font-size: 12px;
  letter-spacing: 0.45em;
}


.identity-ending span {
  color: #d0a75c;
}


.identity-ending span:first-child {
  color:
    rgba(
      255,
      255,
      255,
      0.55
    );
}


/* =========================================================
   DIRECT COLLABORATION
   ========================================================= */

.studio-approach {
  position: relative;
  z-index: 8;

  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 84px;
  padding: clamp(56px, 5vw, 72px);

  border:
    1px solid
    rgba(73, 199, 255, 0.30);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(7, 34, 55, 0.92),
      rgba(3, 17, 29, 0.94)
    );

  box-shadow:
    0 0 8px rgba(73, 199, 255, 0.30),
    0 0 30px rgba(73, 199, 255, 0.09);
}

.studio-approach-intro {
  max-width: 760px;
}

.studio-approach-intro h2 {
  margin-bottom: 18px;

  color: #ffffff;

  font-size:
    clamp(
      28px,
      3.8vw,
      46px
    );

  font-weight: 300;
  line-height: 1.14;
}

.studio-approach-intro > p {
  color: rgba(238, 243, 247, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.studio-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;

  margin-top: 42px;

  overflow: hidden;

  border:
    1px solid
    rgba(73, 199, 255, 0.19);

  border-radius: 14px;
}

.studio-principles article {
  min-height: 220px;
  padding: 28px;
  background: rgba(2, 17, 29, 0.55);
}

.studio-principles article + article {
  border-left:
    1px solid
    rgba(73, 199, 255, 0.17);
}

.studio-principles span {
  color: rgba(121, 221, 255, 0.45);
  font-size: 12px;
}

.studio-principles h3 {
  margin-top: 20px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
}

.studio-principles p {
  margin-top: 12px;
  color: rgba(238, 243, 247, 0.66);
  font-size: 15px;
  line-height: 1.65;
}


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

@media (max-width: 1000px) {

  .identity-section {
    grid-template-columns:
      minmax(0, 1fr)
      76px
      minmax(0, 1fr);

    margin-top: -190px;

    padding:
      80px
      18px
      100px;
  }


  .identity-card {
    min-height: 310px;

    padding:
      30px
      28px;
  }


  .mission-card {
    margin-right: 15px;
  }


  .vision-card {
    margin-left: 15px;
  }


  .identity-card::after {
    width: 53px;
  }


  .mission-card::after {
    right: -53px;
  }


  .vision-card::after {
    left: -53px;
  }
}


/* =========================================================
   MOBILE
   Ribbon follows the HOW page pattern and moves left.
   ========================================================= */

@media (max-width: 760px) {

  .identity-section {
    width: 100%;
    min-height: 0;

    margin-top: -110px;

    padding:
      90px
      16px
      90px
      78px;

    display: flex;
    flex-direction: column;
    gap: 34px;
  }


  .film-strip-global {
    left: 28px;

    top: 250px;

    width: 42px;

    transform: none;

    background-size: 42px 70px;

    -webkit-mask-image:
      linear-gradient(
        to bottom,

        transparent 0px,
        transparent 35px,

        rgba(0, 0, 0, 0.25) 80px,
        rgba(0, 0, 0, 0.60) 130px,

        black 180px,
        black calc(100% - 180px),

        rgba(0, 0, 0, 0.60) calc(100% - 130px),
        rgba(0, 0, 0, 0.25) calc(100% - 80px),

        transparent calc(100% - 35px),
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to bottom,

        transparent 0px,
        transparent 35px,

        rgba(0, 0, 0, 0.25) 80px,
        rgba(0, 0, 0, 0.60) 130px,

        black 180px,
        black calc(100% - 180px),

        rgba(0, 0, 0, 0.60) calc(100% - 130px),
        rgba(0, 0, 0, 0.25) calc(100% - 80px),

        transparent calc(100% - 35px),
        transparent 100%
      );
  }


  .identity-card,
  .mission-card,
  .vision-card {
    width: 100%;
    max-width: none;
    min-height: 0;

    margin: 0;

    padding:
      30px
      26px;
  }


  .identity-card::after {
    top: 50%;
    right: auto;
    left: -50px;

    width: 50px;

    transform: none;
  }


  .identity-card h2 {
    font-size: 30px;
  }


  .identity-card p {
    font-size: 15px;
  }


  .identity-ending p {
    font-size: 9px;

    letter-spacing: 0.25em;
  }


  .studio-approach {
    width: calc(100% - 32px);
    margin-bottom: 62px;
    padding: 32px 24px;
  }


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


  .studio-principles article {
    min-height: 0;
  }


  .studio-principles article + article {
    border-top:
      1px solid
      rgba(73, 199, 255, 0.17);

    border-left: 0;
  }
}


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

@media (max-width: 480px) {

  .identity-section {
    padding-left: 72px;
  }


  .identity-card,
  .mission-card,
  .vision-card {
    padding:
      26px
      22px;
  }
}