* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #0d3155;
  color: #fff;
}
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.hero-picture,
.hero-picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-picture img {
  object-fit: cover;
  object-position: center center;
}
.shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(4,23,41,.55) 0%,
    rgba(4,23,41,.30) 33%,
    rgba(4,23,41,.05) 62%,
    rgba(4,23,41,0) 100%);
}
.content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 10vh 10vw 2.5vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.logo {
  display: block;
  /* approx. 70% of previous desktop logo size */
  width: clamp(170px, 20.3vw, 357px);
  max-height: 54vh;
  height: auto;
}
.copy {
  margin-top: clamp(10px, 2.2vh, 22px);
  max-width: 980px;
  text-shadow: 0 2px 18px rgba(0,0,0,.38);
}
h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 2.65vw, 51px);
  line-height: 1.06;
  letter-spacing: -.025em;
  white-space: nowrap;
}
p {
  margin: 0 0 20px;
  font-size: clamp(18px, 1.15vw, 22px);
  line-height: 1.35;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 13px 23px;
  border-radius: 999px;
  background: #d93a28;
  color: #fff;
  text-decoration: none;
  font-size: clamp(17px, 1.05vw, 20px);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .15s ease, filter .15s ease;
}
.cta:hover, .cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hint {
  margin: 9px 0 0 12px;
  font-size: 13px;
  opacity: .9;
}

/* Typical Full-HD desktop browser viewport with Chrome + Windows taskbar. */
@media (min-width: 1400px) and (max-height: 950px) {
  .content {
    width: 100%;
    padding: 10vh 10vw 16px;
  }
  .logo {
    width: clamp(230px, 18.5vw, 330px);
    max-height: 52vh;
  }
  .copy { margin-top: 8px; }
  h1 {
    font-size: clamp(36px, 2.45vw, 47px);
    margin-bottom: 10px;
  }
  p { margin-bottom: 16px; }
  .cta { padding: 12px 22px; }
}

/* Smaller/lower desktop windows: keep everything inside the viewport. */
@media (min-width: 900px) and (max-height: 760px) {
  .content { padding: 7vh 10vw 12px; }
  .logo {
    width: min(27vh, 260px);
    max-height: 44vh;
  }
  .copy { margin-top: 6px; }
  h1 { font-size: clamp(29px, 2.2vw, 42px); }
  p { font-size: 17px; margin-bottom: 12px; }
  .cta { padding: 10px 19px; font-size: 17px; }
  .hint { margin-top: 6px; font-size: 12px; }
}

/* Narrow screens: mobile/tablet composition. */
@media (max-aspect-ratio: 4/3) {
  html, body { overflow: auto; }
  .hero {
    min-height: 100svh;
    height: auto;
  }
  .hero-picture img { object-position: 64% center; }
  .shade {
    background: linear-gradient(180deg,
      rgba(4,23,41,.42) 0%,
      rgba(4,23,41,.18) 48%,
      rgba(4,23,41,.52) 100%);
  }
  .content {
    width: min(88vw, 760px);
    min-height: 100svh;
    height: auto;
  }
  .logo { width: min(50vw, 300px); max-height: none; }
  .copy { margin-top: auto; padding-bottom: 4vh; }
  h1 { white-space: normal; max-width: 680px; }
}

@media (max-width: 620px) {
  .content { padding-top: 18px; }
  .logo { width: min(58vw, 270px); }
  h1 { font-size: clamp(29px, 8vw, 42px); }
  p { font-size: 18px; }
  .cta { padding: 13px 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}


/* =========================================================
   v4 Mobile overrides
   Desktop rules above remain unchanged.
   ========================================================= */

/* Phones / small tablets in portrait:
   allow vertical scrolling and keep all content reachable. */
@media (max-width: 820px) and (orientation: portrait) {
  html, body {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .hero {
    width: 100%;
    min-height: 100svh;
    height: auto;
    overflow: visible;
  }

  .hero-picture {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
  }

  .hero-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias right so the real paraglider remains in the mobile crop. */
    object-position: 67% center;
  }

  .shade {
    position: fixed;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(4,23,41,.34) 0%,
        rgba(4,23,41,.12) 38%,
        rgba(4,23,41,.62) 100%);
  }

  .content {
    width: 100%;
    min-height: 100svh;
    height: auto;
    margin: 0;
    padding: 5vh 7vw 6vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    width: min(58vw, 270px);
    max-height: none;
    height: auto;
  }

  .copy {
    width: 100%;
    max-width: 620px;
    margin-top: auto;
    padding-top: 12vh;
    padding-bottom: 2vh;
  }

  h1 {
    white-space: normal;
    margin-bottom: 12px;
    font-size: clamp(30px, 8.2vw, 43px);
    line-height: 1.06;
  }

  p {
    margin-bottom: 18px;
    font-size: clamp(17px, 4.6vw, 20px);
  }

  .cta {
    padding: 13px 21px;
    font-size: 17px;
  }

  .hint {
    margin-top: 8px;
    font-size: 12px;
  }
}

/* Phones in landscape:
   compact composition, but scrolling is deliberately allowed
   for very short browser viewports. */
@media (max-height: 600px) and (orientation: landscape) {
  html, body {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .hero {
    width: 100%;
    min-height: 100svh;
    height: auto;
    overflow: visible;
  }

  .hero-picture {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
  }

  .hero-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #0d3155;
  }

  .shade {
    position: fixed;
    inset: 0;
    background:
      linear-gradient(90deg,
        rgba(4,23,41,.58) 0%,
        rgba(4,23,41,.28) 40%,
        rgba(4,23,41,.02) 72%);
  }

  .content {
    width: 100%;
    min-height: 100svh;
    height: auto;
    margin: 0;
    padding: 5vh 5vw 7vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    width: min(28vh, 180px);
    max-height: none;
    height: auto;
  }

  .copy {
    width: min(70vw, 720px);
    margin-top: 3vh;
    padding: 0;
  }

  h1 {
    white-space: normal;
    margin-bottom: 7px;
    font-size: clamp(24px, 4.5vh, 34px);
    line-height: 1.04;
  }

  p {
    margin-bottom: 10px;
    font-size: clamp(14px, 2.7vh, 17px);
    line-height: 1.25;
  }

  .cta {
    padding: 9px 17px;
    font-size: 15px;
  }

  .hint {
    margin: 5px 0 0 8px;
    font-size: 11px;
  }
}