/* =========================================================
   SKY HIGH FRAMES STUDIO
   Shared page shell
   page-shell.css - v1
   ========================================================= */

:root {
  --page-hero-height: clamp(520px, 55vw, 720px);
  --site-blue: #0a2b45;
  --cyan: #49c7ff;
  --cyan-bright: #79ddff;
  --gold: #e7a640;
  --white: #ffffff;
  --text-soft: #c0ccd5;
}


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

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

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;

  background: var(--site-blue);
  color: var(--white);

  overflow-x: hidden;
}


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

.page-shell {
  position: relative;

  width: 100%;
  min-height: 100vh;

  background: var(--site-blue);

  overflow: hidden;
}


/* =========================================================
   HERO
   Same visual geometry as index / how
   ========================================================= */

.page-hero {
  position: relative;

  width: 100%;

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

  overflow: hidden;

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


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

.page-hero-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

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

  display: block;

  z-index: 1;
}


/* =========================================================
   FADE
   Same language as homepage
   ========================================================= */

.page-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
   ========================================================= */

.page-hero-content {
  position: relative;

  z-index: 5;

  width:
    min(
      1450px,
      88%
    );

  height: 100%;

  margin: 0 auto;

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


.page-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);
}


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

  color: var(--text-soft);

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

  letter-spacing: 0.025em;

  line-height: 1.5;
}


/* =========================================================
   EMPTY CONTENT AREA
   ========================================================= */

.page-content {
  min-height: 220px;

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


/* =========================================================
   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);
}


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

@media (max-width: 760px) {

  .page-hero {
    height: 500px;
  }


  .page-hero-content {
    width: 88%;

    padding-top: 75px;
  }


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


  .bottom-nav {
    gap: 14px;

    padding: 12px 17px;
  }


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

}


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

@media (max-width: 480px) {

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


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


  .bottom-nav {
    gap: 9px;

    padding: 11px 13px;
  }


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

    letter-spacing: 0.06em;
  }
}
.home-link {
  opacity: 0.55 !important;
  font-size: 10px !important;
}

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

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

/* =========================================================
   TOP PAGE NAVIGATION
   STATIC - NOT FIXED / NOT STICKY
   ========================================================= */

.page-top-nav {

  position: absolute;

  z-index: 20;

  top: 28px;
  left: 50%;

  transform: translateX(-50%);

  width: fit-content;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 34px;

  padding:
    14px
    30px;

  border-radius: 999px;

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

  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.45),

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

    0 0 38px
    rgba(84, 198, 255, 0.10);

}


/* =========================================================
   TOP NAV LINKS
   ========================================================= */

.page-top-nav a {

  color: white;

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 0.13em;

  white-space: nowrap;

  opacity: 0.76;

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

}


.page-top-nav a:hover,
.page-top-nav a.active {

  opacity: 1;

  color: var(--cyan-bright);

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

}


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

.page-top-nav .home-link {

  opacity: 0.55;

  font-size: 10px;

}


.page-top-nav .home-link:hover {

  opacity: 1;

}


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

.page-top-nav .nav-divider {

  display: block;

  flex: 0 0 1px;

  width: 1px;
  height: 22px;

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

}


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

@media (max-width: 760px) {

  .page-top-nav {

    top: 16px;

    gap: 13px;

    padding:
      11px
      17px;

    max-width:
      calc(100vw - 20px);

  }


  .page-top-nav a {

    font-size: 9px;

    letter-spacing: 0.08em;

  }


  .page-top-nav .home-link {

    font-size: 8px;

  }


  .page-top-nav .nav-divider {

    height: 17px;

  }

}


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

@media (max-width: 480px) {

  .page-top-nav {

    gap: 9px;

    padding:
      10px
      13px;

  }


  .page-top-nav a {

    font-size: 8px;

    letter-spacing: 0.05em;

  }

}