/* ============================================================
   layout.css — header, scroll shell, the pinned 3D stage and
   the dark transition band that follows it
   ============================================================ */

/* ---- Header ------------------------------------------------------- */
.pagehead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  padding-block: 1.5rem;
  transition: padding 0.3s var(--ease-smooth);
}
@media (max-width: 1279.98px) {
  .pagehead {
    padding-block: 0.75rem;
  }
}

.topnav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-inline: 1rem;
}
@media (min-width: 1024px) {
  .topnav {
    padding-inline: 2rem;
  }
}

.emblem-mark {
  height: 2rem;
  width: auto;
  color: var(--c-white);
}

/* Text wordmark used as the brand logo */
.emblem-wordmark {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

/* On mobile the fixed, transparent header collides with the flat content
   sections below the 3D stage. Once scrolled into that content, paint a
   teal backdrop (matching --c-brown section fields) that fades downward so
   section text disappears cleanly behind the header instead of overlapping. */
@media (max-width: 1023.98px) {
  .pagehead.over-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220%;
    background: linear-gradient(
      to bottom,
      var(--c-brown) 55%,
      rgba(0, 77, 99, 0) 100%
    );
    z-index: -1;
    pointer-events: none;
  }
}

.topnav__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.menu-list {
  display: none;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
}
@media (min-width: 1024px) {
  .menu-list {
    display: flex;
  }
}

.menu-sep {
  font-family: var(--font-display);
}

/* Terminal CTA button (replaces the angled pill) */
.menu-cta {
  display: flex;
  height: 44px;
  margin-left: 1.25rem;
  color: var(--c-white);
  font-family: var(--font-display);
}
/* drop the chamfered pill caps */
.menu-cta__cap {
  display: none;
}
.menu-cta__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.1rem;
  /* border + text follow the inherited .menu-cta colour, which the scene
     timeline flips white<->brown as the header passes light/dark sections.
     Do NOT hard-set a colour here or the white-bg state turns invisible. */
  border: 1px solid currentColor;
  background-color: var(--c-brown);
  transition: background-color 0.25s ease, color 0.25s ease,
    box-shadow 0.3s ease, border-color 0.3s ease;
}
.menu-cta__label::before {
  content: "> ";
  opacity: 0.6;
}
/* cosmic glow on hover — matches the .button treatment */
.menu-cta:hover .menu-cta__label {
  border-color: var(--c-rose);
  box-shadow: 0 0 18px -4px rgba(0, 168, 204, 0.85);
}

/* ---- Smooth-scroll shell ------------------------------------------ */
#scroll-shell,
#scroll-body {
  width: 100%;
}

#content {
  position: relative;
}

/* ---- Pinned 3D stage ---------------------------------------------- */
.stage-gap {
  height: 1090lvh;
}

#stage {
  position: relative;
}

#scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
}

#scene canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* ---- Dark band beneath the hero ----------------------------------- */
.ribbon {
  position: relative;
  width: 100%;
}

.ribbon__fade {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
.ribbon__fade--top {
  bottom: calc(100% - 2px);
  height: 40lvh;
  background-image: linear-gradient(to top, var(--c-brown), var(--c-brown-fade));
}
.ribbon__fade--bottom {
  top: calc(100% - 2px);
  height: 100lvh;
  background-image: linear-gradient(to bottom, var(--c-brown), var(--c-brown-fade));
}

/* a full-brown veil the scene fades in to darken the transition */
.scene-dim {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 100lvh;
  z-index: 10;
  background-color: var(--c-brown);
  opacity: 0;
  pointer-events: none;
}

.ribbon__inner {
  position: relative;
  width: 100%;
  background-color: var(--c-brown);
}

/* shared helpers ----------------------------------------------------- */
.layer {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.self-start {
  align-self: flex-start;
}
.banner__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
@media (min-width: 576px) {
  .banner__title-row {
    gap: 1rem;
  }
}
.hairline--light {
  --rule-color: var(--c-white);
}
@media (max-width: 575.98px) {
  .phone-off {
    display: none !important;
  }
}