/* ---------- fonts ---------- */
@font-face {
  font-family: 'Saans';
  src: url('assets/webfonts/Saans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saans';
  src: url('assets/webfonts/Saans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tobias';
  src: url('assets/webfonts/Tobias-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a1320;
  --bg-deep: #050a13;
  --orange: #FE7E01;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.55);
  --headline-dim: rgba(255, 255, 255, 0.38);
  --sans: 'Saans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Tobias', Georgia, 'Times New Roman', serif;
  --max: 1440px;
  /* Left inset for the logo + all hero content (caps at 85px on desktop). */
  --inset: clamp(24px, 6vw, 85px);
  /* Drives the logo "ITS" height and the bar height; smaller on mobile. */
  --logo-size: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a { color: inherit; }

.page {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 6vw, 96px) clamp(28px, 4vw, 56px) var(--inset);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- background ---------- */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: var(--bg);
}

/* The hero image already carries a baked-in dark overlay; this is a light
   supplement to keep the headline legible on wide and tall viewports. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(5, 10, 19, 0.94) 0%,
      rgba(5, 10, 19, 0.82) 28%,
      rgba(5, 10, 19, 0.45) 55%,
      rgba(5, 10, 19, 0.12) 80%,
      rgba(5, 10, 19, 0) 100%);
}

/* ---------- logo ---------- */
.logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* Fixed-height row so the logo stays vertically centered against the bar. */
  min-height: var(--logo-size);
}

/* Orange bar bleeds off the left edge of the viewport; the calc cancels the
   page inset so the bar is anchored to x=0 regardless of how wide --inset is.
   The off-screen portion is clipped by .page { overflow: hidden }. */
.logo-bar {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--inset) - 8px);
  /* 65px on desktop (inset 85); scales down on narrower screens so it never
     reaches the logo, which sits at a smaller inset there. */
  width: max(18px, calc(var(--inset) - 20px));
  height: var(--logo-size);
  background: var(--orange);
}

.logo-img {
  /* "ITS" = the full image height, so this matches the bar. Also never exceed
     the available width (logo aspect ratio = 6.512) so it's never clipped. */
  height: min(var(--logo-size), calc((100vw - var(--inset) - 24px) / 6.512));
  width: auto;
  display: block;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  padding: clamp(40px, 8vh, 96px) 0 clamp(24px, 4vh, 48px);
}

.headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(32px, 5vh, 56px);
}

.headline-1,
.headline-2 {
  display: block;
}

.headline-1 {
  color: var(--headline-dim);
  white-space: nowrap;
}

.headline-2 {
  color: var(--text);
}

.eyebrow {
  color: var(--orange);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 clamp(28px, 4vh, 40px);
  max-width: 560px;
}

/* ---------- CTAs ---------- */
.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(28px, 4vh, 44px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--orange);
  color: var(--text);
  background: transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--orange);
  color: #0a1320;
  outline: none;
}

.btn .arrow {
  font-size: 16px;
  line-height: 1;
  color: var(--orange);
}

/* On hover the button fills orange, so flip the arrow to the dark navy
   so it stays visible. */
.btn:hover .arrow,
.btn:focus-visible .arrow {
  color: #0a1320;
}

/* ---------- contact line ---------- */
.contact {
  font-size: 14px;
  color: var(--text);
  margin: 0;
}

.contact a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact a:hover {
  color: var(--orange);
}

/* ---------- logomark ---------- */
.logomark {
  position: absolute;
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(24px, 5vh, 64px);
  opacity: 0.92;
  /* Above the background, but below all text so it reads as a watermark. */
  z-index: 1;
  pointer-events: none;
}

.logomark img {
  height: 260px;
  width: auto;
  display: block;
}

/* Inline globe used only on mobile (sits beside the contact line). */
.logomark-m {
  display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  :root {
    /* Smaller logo on mobile so it doesn't fill the screen width. */
    --logo-size: 40px;
  }

  /* Tighten the top so the whole layout fits a phone without scrolling. */
  .page {
    padding-top: 20px;
  }

  .bg::after {
    background:
      linear-gradient(to bottom,
        rgba(5, 10, 19, 0.78) 0%,
        rgba(5, 10, 19, 0.62) 45%,
        rgba(5, 10, 19, 0.72) 100%);
  }

  /* No orange bar next to the logo on mobile. */
  .logo-bar {
    display: none;
  }

  /* Top-align the hero (less space above the heading) and compress margins
     so everything is visible without scrolling. */
  .hero {
    justify-content: flex-start;
    padding-top: 70px;
    padding-bottom: 24px;
  }

  /* Size so each headline sentence fits on a single line, and keep them
     on one line each. A little more breathing room between sections. */
  .headline {
    font-size: clamp(20px, 7.5vw, 40px);
    margin-bottom: 24px;
  }

  .headline-1,
  .headline-2 {
    white-space: nowrap;
  }

  .eyebrow {
    margin-bottom: 14px;
  }

  .lede {
    margin-bottom: 24px;
  }

  .ctas {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 24px;
  }

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

  /* Bottom row: contact text on the left, globe on the right, bottom-aligned. */
  .contact-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
  }

  .contact {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Use the inline globe (beside the contact) instead of the corner watermark. */
  .logomark {
    display: none;
  }

  .logomark-m {
    display: block;
    flex: 0 0 auto;
    height: 120px;
    width: auto;
    opacity: 0.8;
  }
}