/* =========================================================
   SKY HIGH FRAMES STUDIO
   HOW WE WORK
   how.css - v14
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --site-blue: #0a2b45;

  --site-blue-dark: #071e31;

  --site-blue-deep: #041421;

  --cyan: #49c7ff;

  --cyan-bright: #79ddff;

  --gold: #e7a640;

  --white: #ffffff;

  --text-soft: #c0ccd5;


  /* Film geometry */

  --film-cycle: 70px;

  --step-height: 350px;


  /*
     Pulls the actual process upward
     over the lower part of the hero.
  */

  --process-overlap: 220px;

  --page-hero-height: clamp(520px, 55vw, 720px);

}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
}


body {
  width: 100%;
  min-height: 100%;

  overflow-x: hidden;

  background: var(--site-blue);

  color: var(--white);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   PAGE
   ========================================================= */

.work-page {
  position: relative;

  width: 100%;

  min-height: 100vh;

  background: var(--site-blue);

  overflow: hidden;
}


/* =========================================================
   JOURNEY
   Hero + process + single continuous film strip
   ========================================================= */

.journey {
  position: relative;

  width: 100%;
}


/* =========================================================
   HERO
   Same geometry as index.html
   ========================================================= */

.work-hero {
  position: relative;

  width: 100%;

  height: var(--page-hero-height);

  overflow: hidden;

  background: var(--site-blue);
}


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

.work-hero-image {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;
}


/* =========================================================
   HERO FADE
   Same transition as index.html
   ========================================================= */

.work-hero-fade {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,

      rgba(10, 43, 69, 0) 45%,

      rgba(10, 43, 69, 0.03) 53%,

      rgba(10, 43, 69, 0.10) 61%,

      rgba(10, 43, 69, 0.22) 68%,

      rgba(10, 43, 69, 0.42) 74%,

      rgba(10, 43, 69, 0.66) 80%,

      rgba(10, 43, 69, 0.88) 86%,

      var(--site-blue) 91%,

      var(--site-blue) 100%
    );
}


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

.hero-content {
  position: relative;

  z-index: 6;

  width:
    min(
      1450px,
      88%
    );

  height: 100%;

  margin: 0 auto;

  padding-top:
    clamp(
      95px,
      9vw,
      150px
    );
}


.hero-content h1 {
  font-size:
    clamp(
      46px,
      5vw,
      76px
    );

  font-weight: 300;

  letter-spacing: 0.03em;
}


.gold-line {
  width: 62px;
  height: 3px;

  margin-top: 22px;

  background: var(--gold);

  box-shadow:
    0 0 10px
    rgba(231, 166, 64, 0.25);
}


.hero-content p {
  margin-top: 22px;

  color: var(--text-soft);

  font-size:
    clamp(
      17px,
      1.4vw,
      22px
    );

  letter-spacing: 0.025em;
}


/* =========================================================
   ONE CONTINUOUS FILM STRIP
   ========================================================= */

.film-strip-global {

  position: absolute;

  z-index: 4;

  left: 50%;


  /*
     Begins inside the hero.

     420px = exactly six 70px perforation cycles,
     preserving alignment.
  */

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


  bottom: 0;

  width: 48px;

  transform:
    translateX(-50%);


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


  /*
     ONE perforation per 70px cycle.
  */

  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);


  /* =====================================================
     IMPORTANT:
     Film strip fades IN while crossing the landscape.

     Invisible at the beginning.
     Gradually visible over the lake.
     Fully visible when Step 01 begins.
     ===================================================== */

-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%
  );

}


/* =========================================================
   PROCESS
   ========================================================= */

.process {
  position: relative;

  z-index: 5;

  width:
    min(
      1450px,
      94%
    );


  /*
     NEW:

     Process begins 180px earlier.

     This removes the large empty blue area and
     places Step 01 partly inside the hero transition.
  */

  margin:
    calc(-1 * var(--process-overlap))
    auto
    0;


  padding:
    0 0 80px;
}


/* =========================================================
   PROCESS STEP
   ========================================================= */

.process-step {
  position: relative;

  display: grid;

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

  align-items: center;

  height:
    var(--step-height);

  min-height:
    var(--step-height);

  padding:
    25px
    70px;
}


/* =========================================================
   KEEP BOTH CARDS ON SAME GRID ROW
   ========================================================= */

.process-step > .step-title,
.process-step > .step-description {
  grid-row: 1;
}


/* =========================================================
   HORIZONTAL SEPARATOR
   ========================================================= */

.process-step:not(.last-step)::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  z-index: 10;


  /*
     Small central break so the line never cuts
     visually through the film ribbon.
  */

  background:
    linear-gradient(
      to right,

      transparent 0%,

      rgba(73, 199, 255, 0.10) 8%,

      rgba(73, 199, 255, 0.36) 28%,

      rgba(73, 199, 255, 0.72) 46%,

      rgba(73, 199, 255, 0.72) 48.3%,

      transparent 48.4%,

      transparent 51.6%,

      rgba(73, 199, 255, 0.72) 51.7%,

      rgba(73, 199, 255, 0.72) 54%,

      rgba(73, 199, 255, 0.36) 72%,

      rgba(73, 199, 255, 0.10) 92%,

      transparent 100%
    );

}


/* =========================================================
   TITLE CARD
   ========================================================= */

.step-title {

  width: 190px;

  padding:
    25px
    20px;

  text-align: center;

  background:
    linear-gradient(
      145deg,

      rgba(10, 43, 69, 0.94),

      rgba(4, 20, 33, 0.97)
    );

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

  border-radius: 15px;

  box-shadow:

    0 0 7px
    rgba(73, 199, 255, 0.36),

    0 0 20px
    rgba(73, 199, 255, 0.10);

}


/* =========================================================
   STEP NUMBER
   ========================================================= */

.step-number {
  display: block;

  color: var(--cyan-bright);

  font-size: 46px;

  font-weight: 300;

  line-height: 1;

  text-shadow:

    0 0 8px
    rgba(73, 199, 255, 0.60),

    0 0 18px
    rgba(73, 199, 255, 0.20);
}


/* =========================================================
   STEP TITLE
   ========================================================= */

.step-title h2 {
  position: relative;

  display: inline-block;

  margin-top: 9px;

  padding-bottom: 6px;

  font-size: 18px;

  font-weight: 400;

  letter-spacing: 0.035em;
}


.step-title h2::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 45px;
  height: 1px;

  transform:
    translateX(-50%);

  background: var(--cyan);

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

}


/* =========================================================
   DESCRIPTION WINDOW
   ========================================================= */

.step-description {

  width:
    min(
      560px,
      96%
    );

  padding:
    28px
    34px;

  background:
    linear-gradient(
      120deg,

      rgba(7, 34, 55, 0.96),

      rgba(4, 20, 33, 0.91)
    );

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

  border-radius: 16px;

  box-shadow:
    0 0 22px
    rgba(0, 75, 130, 0.09);

}


/* =========================================================
   DESCRIPTION HEADING
   ========================================================= */

.step-description h3 {

  position: relative;

  display: inline-block;

  margin-bottom: 13px;

  padding-bottom: 7px;

  color: var(--cyan-bright);

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.13em;

  text-transform: uppercase;

}


.step-description h3::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 48px;
  height: 1px;

  background: var(--cyan);

  box-shadow:
    0 0 6px
    rgba(73, 199, 255, 0.50);

}


/* =========================================================
   DESCRIPTION TEXT
   ========================================================= */

.step-description p {

  color: #eef3f7;

  font-size: 16px;

  line-height: 1.62;

}


/* =========================================================
   ALTERNATING LAYOUT
   ========================================================= */


/* 01 / 03 / 05 / 07 */

.step-left .step-title {
  grid-column: 1;

  justify-self: center;
}


.step-left .step-description {
  grid-column: 3;

  justify-self: start;
}


/* 02 / 04 / 06 / 08 */

.step-right .step-description {
  grid-column: 1;

  justify-self: end;
}


.step-right .step-title {
  grid-column: 3;

  justify-self: center;
}


/* =========================================================
   PROCESS ENDING
   ========================================================= */

.process-ending {
  width: 100%;

  padding:
    20px
    20px
    60px;

  text-align: center;
}


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

  font-size: 12px;

  letter-spacing: 0.45em;
}


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


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


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-nav {

  width: fit-content;

  margin:
    0 auto 65px;

  display: flex;

  align-items: center;

  gap: 34px;

  padding:
    14px
    30px;

  border-radius: 999px;

  background:
    rgba(
      5,
      20,
      32,
      0.88
    );

  border:
    1px solid
    rgba(
      113,
      215,
      255,
      0.30
    );

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

  box-shadow:

    0 0 6px
    rgba(84, 198, 255, 0.55),

    0 0 18px
    rgba(84, 198, 255, 0.35),

    0 0 38px
    rgba(84, 198, 255, 0.18),

    0 0 65px
    rgba(84, 198, 255, 0.08);

}


.bottom-nav a {

  color: white;

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 0.13em;

  opacity: 0.76;

  white-space: nowrap;

  transition:
    opacity 0.25s ease,
    color 0.25s ease,
    text-shadow 0.25s ease;

}


.bottom-nav a:hover,
.bottom-nav a.active {

  opacity: 1;

  color: var(--cyan-bright);

  text-shadow:
    0 0 8px
    rgba(73, 199, 255, 0.70);

}


/* =========================================================
   HOME LINK
   ========================================================= */

.home-link {
  opacity: 0.55 !important;

  font-size: 10px !important;
}


.home-link:hover {
  opacity: 1 !important;
}


/* =========================================================
   NAV DIVIDER
   ========================================================= */

.nav-divider {

  display: block;

  flex: 0 0 1px;

  width: 1px;
  height: 22px;

  align-self: center;

  background:
    rgba(
      113,
      215,
      255,
      0.75
    );

  box-shadow:

    0 0 4px
    rgba(84, 198, 255, 0.70),

    0 0 10px
    rgba(84, 198, 255, 0.35);

  border-radius: 1px;

}


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

@media (min-width: 761px) and (max-width: 1100px) {

  :root {
    --step-height: 420px;
  }

}

@media (max-width: 1000px) {

  :root {
    --process-overlap: 190px;
  }


  .process-step {

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

    padding:
      25px
      25px;

  }


  .step-description {
    width: 94%;
  }

}


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

@media (max-width: 760px) {

  :root {
    --process-overlap: 110px;
  }


  .work-hero {
    height: 500px;
  }


  .hero-content {
    width: 88%;

    padding-top: 75px;
  }


  .hero-content h1 {
    font-size: 42px;
  }


  /*
     Continuous ribbon moves to left side.
  */

  .film-strip-global {

    left: 28px;

    top: 250px;

    width: 42px;

    transform: none;

    background-size:
      42px 70px;


    /*
       Slightly quicker fade on mobile.
    */

    -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%
      );

  }


  .process {

    width: 100%;

    padding:
      20px
      16px
      60px
      78px;

  }


  .process-step {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 18px;

    height: auto;

    min-height: 280px;

    padding:
      42px
      8px
      52px;

  }


  .step-title {
    width: 150px;
  }


  .step-description {
    width: 100%;
  }


  .step-number {
    font-size: 38px;
  }


  .step-description p {
    font-size: 15px;
  }


  .bottom-nav {
    gap: 14px;

    padding:
      12px
      17px;

  }


  .bottom-nav a {
    font-size: 9px;
  }


  .home-link {
    font-size: 8px !important;
  }


  .nav-divider {
    height: 17px;
  }


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

    letter-spacing: 0.25em;
  }

}


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

@media (max-width: 480px) {

  .hero-content h1 {
    font-size: 36px;
  }


  .hero-content p {
    font-size: 15px;
  }


  .process {
    padding-left: 72px;
  }


  .step-description {
    padding:
      22px
      22px;
  }


  .bottom-nav {
    gap: 9px;

    padding:
      11px
      13px;
  }


  .bottom-nav a {
    font-size: 8px;

    letter-spacing: 0.06em;
  }

}