/* ============================================================
   Page styles (light, simplified)
   ============================================================ */

/* ---------- HOME / HERO ---------- */
.hero {
  padding: clamp(var(--s-7), 10vw, var(--s-10)) 0 clamp(var(--s-7), 8vw, var(--s-9));
  text-align: center;
}

.hero-logo {
  max-width: 720px;
  margin: 0 auto var(--s-6);
  padding: 0 var(--gutter);
}

.hero-logo img {
  width: 100%;
  height: auto;
}

.hero h1 {
  font-size: clamp(var(--fs-28), 4vw, var(--fs-48));
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  margin: 0 auto var(--s-5);
  max-width: 22ch;
  line-height: var(--lh-snug);
}

.hero h1 .accent { color: var(--red); }

.hero-sub {
  font-size: clamp(var(--fs-16), 1.4vw, var(--fs-18));
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto var(--s-6);
  padding: 0 var(--gutter);
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) {
  .hero-cta { flex-direction: row; gap: var(--s-4); }
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: center;
  margin-top: var(--s-6);
  font-size: var(--fs-13);
  color: var(--ink-3);
  font-weight: 500;
}
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof .dot { width: 4px; height: 4px; background: var(--red); border-radius: 50%; }

/* ---------- Section header (simple, centered) ---------- */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-7);
}
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head h2 {
  font-size: clamp(var(--fs-28), 3.5vw, var(--fs-40));
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-3);
}
.section-head p {
  font-size: var(--fs-16);
  color: var(--ink-2);
  margin: 0 auto;
  max-width: 56ch;
}

/* ---------- About preview split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

.split-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

.split h2 {
  font-size: clamp(var(--fs-28), 3.5vw, var(--fs-40));
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-4);
}

/* ---------- Page hero (sub pages) ---------- */
.page-hero {
  padding: clamp(var(--s-7), 8vw, var(--s-9)) 0 var(--s-6);
  text-align: center;
}
.page-hero .eyebrow { margin-bottom: var(--s-3); }
.page-hero h1 {
  font-size: clamp(var(--fs-32), 5vw, var(--fs-56));
  margin-bottom: var(--s-4);
  letter-spacing: var(--tracking-tighter);
}
.page-hero h1 .accent { color: var(--red); }
.page-hero p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: var(--fs-16);
  color: var(--ink-2);
}

/* ---------- Watch page ---------- */
.channel-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-7);
}
@media (min-width: 768px) {
  .channel-header { grid-template-columns: 1fr auto; }
}
.channel-header h2 {
  font-size: var(--fs-28);
  font-weight: 700;
  margin: 0;
}

/* ---------- About page ---------- */
.about-portrait {
  aspect-ratio: 16 / 9;
  margin: var(--s-6) auto var(--s-7);
  max-width: 960px;
  overflow: hidden;
  border-radius: var(--radius);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

.prose { max-width: var(--max-prose); margin: 0 auto; }
.prose p {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  margin-bottom: var(--s-5);
  max-width: none;
}
.prose p strong { color: var(--ink); font-weight: 600; }
.prose h2 {
  font-size: var(--fs-28);
  font-weight: 700;
  margin: var(--s-7) 0 var(--s-4);
  color: var(--ink);
}

.company-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  margin-top: var(--s-5);
}
.company-card dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3) var(--s-5);
  margin: 0;
}
@media (min-width: 640px) {
  .company-card dl { grid-template-columns: 160px 1fr; }
}
.company-card dt {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-3);
  padding-top: 2px;
}
.company-card dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-15);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.4fr; gap: var(--s-8); }
}

.contact-side h2 {
  font-size: clamp(var(--fs-28), 3.5vw, var(--fs-40));
  font-weight: 700;
  margin-bottom: var(--s-4);
  letter-spacing: var(--tracking-tighter);
}
.contact-side h2 .accent { color: var(--red); }
.contact-side .lead { margin-bottom: var(--s-6); }

.contact-info {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.contact-info div { display: flex; flex-direction: column; gap: var(--s-1); }
.contact-info dt {
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-3);
}
.contact-info dd {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--ink);
}
.contact-info dd a { color: var(--red); font-weight: 500; }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
@media (min-width: 640px) {
  .form-card { padding: var(--s-7); }
}
.form-note {
  font-size: var(--fs-13);
  color: var(--ink-3);
  line-height: var(--lh-body);
  margin-top: var(--s-3);
}
.success-msg {
  display: none;
  padding: var(--s-4);
  background: var(--red-soft);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-15);
  margin-bottom: var(--s-5);
}
.success-msg.show { display: block; }

.context-banner {
  padding: var(--s-3) var(--s-4);
  background: var(--red-soft);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  color: var(--ink);
  margin-bottom: var(--s-5);
}
.context-banner strong { color: var(--red); font-weight: 600; margin-right: 4px; }