:root {
  --charcoal: #111827;
  --warm-white: #f7f7f5;
  --silver-gray: #e5e7eb;
  --steel-blue: #475569;
  --blaze-orange: #f24b1a;
  --ember-red: #d61f0f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--charcoal); }
body {
  color: var(--warm-white);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal);
}

.hero-photo,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-photo {
  z-index: -3;
  background-image: image-set(
    url("/assets/hero.webp") type("image/webp"),
    url("/assets/hero.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: 55% center;
  transform: scale(1.015);
}

.hero-shade {
  z-index: -2;
  background:
    linear-gradient(90deg,
      rgba(4, 11, 22, .87) 0%,
      rgba(4, 11, 22, .70) 24%,
      rgba(4, 11, 22, .28) 49%,
      rgba(4, 11, 22, .06) 72%,
      rgba(4, 11, 22, .15) 100%),
    linear-gradient(180deg,
      rgba(2, 7, 16, .22) 0%,
      rgba(2, 7, 16, 0) 42%,
      rgba(2, 7, 16, .26) 100%);
}

.site-header {
  position: absolute;
  top: clamp(18px, 2.8vw, 46px);
  left: clamp(28px, 5vw, 84px);
  right: clamp(28px, 4.2vw, 70px);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: block;
  width: clamp(300px, 30vw, 500px);
  max-width: 64vw;
  line-height: 0;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.18));
}

.contact {
  margin-top: 8px;
  transform: translate(20px, -26px);
  color: rgba(247,247,245,.88);
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: lowercase;
  white-space: nowrap;
  text-underline-offset: .28em;
  text-decoration-thickness: 1px;
  transition: color 160ms ease;
}
.contact:hover,
.contact:focus-visible { color: #fff; }

.hero-copy {
  position: absolute;
  left: clamp(34px, 5.2vw, 88px);
  bottom: clamp(130px, 16vh, 220px);
  z-index: 1;
  max-width: min(760px, 49vw);
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(58px, 6.15vw, 104px);
  line-height: .93;
  letter-spacing: -.048em;
  font-family: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .035em;
  color: var(--warm-white);
  text-shadow: 0 2px 22px rgba(0,0,0,.24);
}

.hero-copy p {
  margin: clamp(20px, 2vw, 30px) 0 0;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.28;
  font-family: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .045em;
  color: rgba(247,247,245,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.28);
}

@media (max-width: 900px) {
  .hero-photo {
    background-position: 60% 24%;
    transform: scale(1.035);
  }
  .hero-shade {
    background:
      linear-gradient(180deg,
        rgba(3,9,20,.48) 0%,
        rgba(3,9,20,.10) 36%,
        rgba(3,9,20,.40) 100%),
      linear-gradient(90deg,
        rgba(3,9,20,.52) 0%,
        rgba(3,9,20,.10) 74%);
  }
  .site-header {
    top: 16px;
    left: 22px;
    right: 18px;
  }
  .brand {
    width: min(72vw, 360px);
    max-width: calc(100vw - 130px);
  }
  .contact {
    margin-top: 6px;
    transform: translate(10px, -14px);
    font-size: 12px;
  }
  .hero-copy {
    left: 24px;
    right: 24px;
    bottom: max(96px, env(safe-area-inset-bottom));
    max-width: 92vw;
  }
  .hero-copy h1 {
    font-size: clamp(44px, 12.5vw, 70px);
    line-height: .96;
    max-width: 8.5em;
  }
  .hero-copy p {
    max-width: 24em;
    font-size: clamp(18px, 4.6vw, 23px);
  }
}

@media (max-width: 540px) {
  .hero-photo {
    background-position: 61% 18%;
    transform: scale(1.055);
  }
  .brand {
    width: 245px;
    max-width: calc(100vw - 118px);
  }
  .hero-copy h1 {
    font-size: clamp(42px, 13vw, 58px);
  }
  .hero-copy p {
    font-size: 17px;
  }
}

/* Very wide viewports (ultra-wide monitors, phones on their side): cover would crop
   the 16:9 photo hard, so fit it to the height, right-aligned, and fade its left edge
   into the page background. */
@media (min-aspect-ratio: 2/1) {
  .hero-photo {
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
    transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
}

/* Short and wide: size everything by height so nothing overlaps */
@media (min-aspect-ratio: 2/1) and (max-height: 800px) {
  .site-header { top: 3vh; left: 24px; right: 24px; }
  .brand { width: clamp(150px, 40vh, 300px); max-width: 40vw; }
  .contact { margin-top: 4px; transform: none; font-size: clamp(12px, 3vh, 15px); }
  .hero-copy { left: 24px; bottom: 6vh; max-width: 60vw; }
  .hero-copy h1 { font-size: clamp(26px, 11vh, 80px); max-width: none; }
  .hero-copy p {
    margin-top: 1.5vh;
    font-size: clamp(13px, 4vh, 22px);
    max-width: none;
  }
}

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