/* Tokens — mirror the Figma variables (Color / Spacing) and text styles */
:root {
  --bg-hero: #0b5f86;
  --bg-hero-rgb: 11 95 134;
  --text-on-dark: #fff;
  --text-on-dark-muted: rgb(255 255 255 / 0.92);

  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-72: 72px;
  --space-120: 120px;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-hero);
  color: var(--text-on-dark);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

h1, p { margin: 0; }

/* ---------- Hero: mobile + portrait tablet first (< 1024px) ---------- */
.hero {
  --px: max(var(--space-24), env(safe-area-inset-left), env(safe-area-inset-right));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(var(--space-24), env(safe-area-inset-top))
    var(--px)
    max(var(--space-48), env(safe-area-inset-bottom));
  background: var(--bg-hero);
  text-align: center;
}

/* Globe band: sits in the flow between logo and copy so text never lands on the
   bright part of the image. Starts 40px from the top (behind the logo fade) and
   tucks 48px under the headline (behind the bottom fade). */
.hero__media {
  position: relative;
  z-index: -1;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 200px;
  margin: -48px calc(-1 * var(--px)) -48px;
}

.hero__media picture { position: absolute; inset: 0; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--bg-hero) 0,
    rgb(var(--bg-hero-rgb) / 0) 40%,
    rgb(var(--bg-hero-rgb) / 0) 60%,
    var(--bg-hero) 100%
  );
}

.hero__header { order: -1; position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; }

.logo { width: clamp(95px, 15vw, 120px); height: auto; }

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 600px;
}

/* Mobile/Display: Geist SemiBold 40 / 1.08 / -3% → scales up on tablet */
.display {
  font-weight: 600;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Mobile/Lead: Geist Light 19 / 1.45 */
.lead {
  font-weight: 300;
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.45;
  max-width: 30em;
  text-wrap: pretty;
}

.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  font-style: normal;
}

/* Mobile/Contact: Geist Regular 16 / 1.4 */
.contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  color: var(--text-on-dark-muted);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1rem);
  line-height: 1.4;
  text-decoration: none;
  text-underline-offset: 4px;
  border-radius: 4px;
  min-height: 24px;
}

.contact img { width: 18px; height: 18px; flex: none; }
.contact span { overflow-wrap: normal; }

.contact:hover { color: var(--text-on-dark); text-decoration: underline; }
.contact:focus-visible { outline: 2px solid #7db9e0; outline-offset: 4px; }

@media (max-width: 359px) {
  .hero { --px: 20px; }
  .contact { font-size: 0.875rem; gap: 8px; }
  .contact img { width: 16px; height: 16px; }
}

/* ---------- Desktop + landscape tablet (≥ 1024px) ---------- */
@media (min-width: 1024px) {
  .hero {
    min-height: max(640px, 100svh);
    align-items: flex-start;
    gap: var(--space-48);
    padding: var(--space-24) clamp(48px, 8.333vw, var(--space-120)) var(--space-72);
    text-align: left;
  }

  /* Bottom fade across the full hero (Figma "Bottom fade") */
  .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 180px;
    background: linear-gradient(to bottom, rgb(var(--bg-hero-rgb) / 0), rgb(var(--bg-hero-rgb) / 0.55));
    pointer-events: none;
  }

  /* Image pinned right, 920/1440 of the width, full height */
  .hero__media {
    position: absolute;
    z-index: -2;
    inset: 0 0 0 auto;
    width: 63.9%;
    min-height: 0;
    margin: 0;
  }

  .hero { justify-content: space-between; }

  /* "Image fade": 620/920 of the image, blue → transparent */
  .hero__media::after {
    background: linear-gradient(to right, var(--bg-hero) 0, rgb(var(--bg-hero-rgb) / 0) 67.4%);
  }

  .hero__header { justify-content: flex-start; }
  .logo { width: 142px; }

  /* Header / Copy / Contacts distribute like the Figma auto layout */
  .hero__body { display: contents; }

  .hero__copy { align-items: flex-start; gap: var(--space-32); max-width: none; }

  /* Desktop/Display: Geist SemiBold 72 / 1.04 / -3% */
  .display {
    font-size: clamp(3.5rem, 5vw, 4.5rem);
    line-height: 1.04;
    max-width: 10em;
  }

  /* Desktop/Lead: Geist Light 26 / 1.4 / -1% */
  .lead {
    font-size: clamp(1.375rem, 1.8vw, 1.625rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    max-width: 21.6em;
  }

  .contacts { align-items: flex-start; }

  /* Desktop/Contact: Geist Regular 18 / 1.4 */
  .contact { font-size: 1.125rem; }
  .contact img { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}