:root {
  --bg: #0f3a26;
  --ink: #f3f6ef;
  --ink-dim: rgba(243, 246, 239, 0.72);
  --accent: #8cc152;
  --panel: rgba(10, 34, 22, 0.92);
  --line: rgba(243, 246, 239, 0.22);
  --display: "Montserrat", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #0b3423; /* matches the video's backdrop */
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop: the video starts centered; when the wordmark appears, the end logo
   slides up to make room for it. The mask fades the bottom edge the lift exposes. */
@media (min-aspect-ratio: 1/1) and (min-height: 501px) {
  .hero__video {
    -webkit-mask-image: linear-gradient(#000 78%, transparent 96%);
    mask-image: linear-gradient(#000 78%, transparent 96%);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero.is-revealed .hero__video {
    transform: translateY(-12vh);
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(6, 24, 15, 0.75) 100%);
  pointer-events: none;
}

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: 0 16px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.hero__content.is-visible {
  opacity: 1;
  transform: none;
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 5vw, 4.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  /* offset the trailing letter-spacing so it centers optically */
  padding-left: 0.18em;
}

/* On phones a cover-cropped 16:9 video cuts off the end logo and puts the
   wordmark on top of it. Instead, size the video so the logo sits above the
   text, and feather its edges into the matching background. */
@media (max-aspect-ratio: 1/1) {
  .hero__video {
    width: 225vw; /* logo spans ~1/3 of the frame, so ~75vw on screen */
    height: auto;
    inset: auto;
    left: 50%;
    top: calc(40% - 63.3vw); /* center the logo at 40% of the screen height */
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  }
}

@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  .hero__video {
    width: 75vw;
    height: auto;
    inset: auto;
    left: 50%;
    top: calc(33% - 21.1vw); /* center the logo at a third of the screen height */
    transform: translateX(-50%);
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
    mask-image: radial-gradient(closest-side, #000 70%, transparent);
  }
  .hero__content { bottom: 6vh; gap: 1rem; }
  .wordmark { font-size: 7vh; }
}

@media (max-width: 600px) {
  .wordmark {
    font-size: 7.4vw;
    letter-spacing: 0.1em;
    padding-left: 0.1em;
  }
}

.contact-link {
  display: inline-block;
  text-decoration: none;
  font: 400 0.8rem/1 var(--sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.95rem 1.8rem 0.95rem calc(1.8rem + 0.28em);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  backdrop-filter: blur(4px);
}

.contact-link:hover,
.contact-link:focus-visible {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  outline: none;
}

/* ---------- Overlay ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: fade 0.3s ease;
}

.overlay[hidden] { display: none; }

.overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 16, 10, 0.6);
  backdrop-filter: blur(6px);
}

.dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: rise 0.35s ease;
}

.dialog__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-dim);
  background: none;
  border: 0;
  cursor: pointer;
}
.dialog__close:hover { color: var(--ink); }

.dialog h2 {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.form__intro {
  margin: -0.75rem 0 1.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.form label {
  display: block;
  margin-bottom: 1.1rem;
}

.form label span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.form label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.7; }

.form input,
.form textarea {
  width: 100%;
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s, background 0.2s;
}

.form textarea { resize: vertical; }
.form textarea::placeholder { color: rgba(243, 246, 239, 0.35); }

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}

.form__error {
  min-height: 1.2em;
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: #f2b8a2;
}

.form__submit {
  width: 100%;
  font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.form__submit:hover { background: var(--accent); }
.form__submit:disabled { opacity: 0.6; cursor: default; }

/* ---------- Thank-you page ---------- */

.thanks {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 32px 16px;
  text-align: center;
  background: #0b3423;
}

.thanks__logo {
  width: min(280px, 55vw, 36svh);
  aspect-ratio: 1;
  object-fit: cover;
  /* feather the edges so the crop blends into the background */
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  margin-bottom: 0.5rem;
}

.thanks__note {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* Keep the whole form on screen on short phones */
@media (max-height: 700px) {
  .dialog { padding: 1.75rem 1.5rem 1.5rem; }
  .dialog h2 { margin-bottom: 1.1rem; font-size: 1.4rem; }
  .form__intro { margin: -0.5rem 0 1.1rem; font-size: 0.88rem; }
  .form label { margin-bottom: 0.75rem; }
  .form input, .form textarea { padding: 0.55rem 0.75rem; }
  .form textarea { height: 4.5rem; }
  .form__error { margin-bottom: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content, .hero__video, .overlay, .dialog { transition: none; animation: none; }
}