/* Full-screen stealth hero + static top-left Able Gecko branding.
   Loaded after custom.css so these rules win where the two overlap.
   The base reset below is duplicated from custom.css because the 404
   page loads this stylesheet alone. */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
}

.stealth-page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.stealth-picture,
.stealth-image {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
}

.stealth-image {
  object-fit: cover;
  object-position: center center;
}

.stealth-hero {
  position: absolute;
  top: 40%;
  left: 3vw;
  transform: translateY(-50%);
  margin: 0;
  max-width: none;
  text-align: left;
  color: #000000;
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-size: clamp(21px, 4.8vw, 69px);
  letter-spacing: normal;
  line-height: 1.18;
  white-space: nowrap;
  text-shadow: none;
}

@media (max-width: 700px) {
  .stealth-hero {
    top: 24%;
    left: 0;
    right: 0;
    transform: none;
    padding: 0 clamp(18px, 5vw, 28px);
    text-align: left;
    font-size: clamp(21px, 7.5vw, 44px);
  }
}

/* Static branding anchored to the top-left of the hero. It lives inside the
   relatively-positioned .stealth-page, so it scrolls off with the section
   rather than following the viewport. Non-interactive: purely decorative. */
.gecko-symbol-brand {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.2vw, 32px));
  left: calc(env(safe-area-inset-left, 0px) + clamp(14px, 2.2vw, 32px));
  z-index: 2;
  display: block;
  line-height: 0;
  padding: 0;
  margin: 0;
}

.gecko-symbol-icon {
  display: block;
  width: clamp(57px, 5.4vw, 84px);
  height: auto;
  background: transparent;
  border: none;
  pointer-events: none;
}

/* Positioned absolutely (rather than via flex) so it never contributes to the
   link's box size — the icon's own footprint, and therefore the link's fixed
   top-left anchor, stays exactly as it was before the label existed. */
.gecko-symbol-label {
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(8px, 1.4vw, 14px));
  transform: translateY(-50%);
  display: block;
  margin: 0;
  color: #000000;
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-size: 34.5px;
  line-height: 1.05;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 700px) {
  .gecko-symbol-label {
    font-size: 24px;
  }
}