/* ---------- Base ---------- */
:root {
  --bg: #000;
  --text: #f2f4f7;
  --muted: #8b93a3;
  --accent: #aca46a;   /* brownish olive green, matches the waves */
  --line: rgba(255, 255, 255, 0.08);
  --max: 1100px;
}

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Wave background ---------- */
#waves {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;              /* above the header image… */
  mix-blend-mode: screen;  /* …but only adds light, never covers anything */
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Navigation ---------- */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}

.nav a:hover,
.nav a[aria-current="page"] { color: var(--text); }

.nav a[aria-current="page"] {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}

/* ---------- Header image ---------- */
.hero {
  position: relative;
  height: 72vh;
  min-height: 420px;
  max-height: 820px;
  overflow: hidden;
}

.hero.small { height: 46vh; min-height: 300px; }

/* The image is always sized like the tall home header and pinned to the top,
   so it sits in exactly the same place on every page. Shorter headers
   simply crop off the bottom. */
.hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 72vh;
  min-height: 420px;
  max-height: 820px;
  object-fit: cover;
  object-position: center top;
  opacity: 0.85;
}

/* fades the image into the black page */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(to top, #000 0%, rgba(0,0,0,0) 55%);
}

.hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 8%;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

h1 {
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}

/* ---------- Content ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  color: #d6dae2;
  max-width: 620px;
}

.prose { max-width: 680px; }
.prose p { color: #c9ceD8; margin: 0 0 1.4em; }

.button {
  display: inline-block;
  margin-top: 28px;
  margin-right: 12px;
  padding: 14px 30px;
  border: 1px solid rgba(172, 164, 106, 0.5);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.button:hover {
  background: rgba(172, 164, 106, 0.08);
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(172, 164, 106, 0.25);
}

.button.ghost { border-color: var(--line); }

/* ---------- Streaming services list ---------- */
.services {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  max-width: 620px;
  border-top: 1px solid var(--line);
}

.services a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  transition: color 0.3s, padding 0.3s, border-color 0.3s;
}

.services .arrow {
  color: var(--muted);
  transition: color 0.3s, transform 0.3s;
}

.services a:hover {
  padding-left: 14px;
  border-bottom-color: rgba(172, 164, 106, 0.4);
}

.services a:hover .arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 32px 24px;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

footer .links { display: flex; justify-content: center; gap: 24px; margin-bottom: 12px; }
footer a:hover { color: var(--text); }

/* ---------- Gentle fade-in ---------- */
.fade { animation: fade 1.4s ease both; }
.fade.d2 { animation-delay: 0.25s; }
.fade.d3 { animation-delay: 0.5s; }

@keyframes fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { padding: 20px 16px; }
  .nav ul { gap: 20px; }
  main { padding: 48px 16px 72px; }
  .hero-text { padding: 0 16px; }
  .hero { height: 62vh; }
  .hero.small { height: 46vh; }
  .hero img { height: 62vh; }
}