/* ============================================================
   pages/landing.css
   Styles unique to / (index.html).
   Reuses .belt, .spec-strip, .service-card, .step, .fact
   from /styles/components.css.
   ============================================================ */

/* ─── HERO ──────────────────────────────────────────────── */

.hero {
  padding: var(--space-md) var(--pad) 0;
  min-height: calc(100vh - var(--nav-h));
  position: relative;
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__stage {
  padding: 80px 0 40px;
  min-height: 75vh;
}

.hero__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--t-mega);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--c-ink);
  padding-right: 15%;
}
.hero__title-outline {
  -webkit-text-stroke: 2px var(--c-ink);
  color: transparent;
}
.hero__title-ital {
  font-style: italic;
  color: var(--c-accent);
}

.hero__lede {
  display: grid;
  /* 5fr · 1fr · 6fr = 12. Middle column hosts .hero__rail (vertical writing-mode). */
  grid-template-columns: 5fr 1fr 6fr;
  gap: var(--space-gutter);
  align-items: end;
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  z-index: 2;
}
.hero__lede p {
  font-family: var(--f-serif);
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-ink);
}
.hero__lede p em { color: var(--c-accent); font-style: italic; }
.hero__rail {
  align-self: end;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero__cta {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.hero__cta-hint {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

/* ─── PAGE SECTION wrapper ───────────────────────────────── */

.page-section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

/* ─── ABOUT ──────────────────────────────────────────────── */

.about {
  padding-top: var(--space-xl);
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-gutter);
}
.about__kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.about__body {
  font-family: var(--f-serif);
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.about__body em { color: var(--c-accent); font-style: italic; }
.about__dropcap {
  float: left;
  font-family: var(--f-serif);
  font-size: 4.6em;
  line-height: 0.78;
  padding: 10px 14px 0 0;
  color: var(--c-accent);
}

.about__facts {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gutter);
}

.about__more {
  margin-top: var(--space-xl);
  display: flex; justify-content: flex-start;
}

/* ─── SERVICES ───────────────────────────────────────────── */

.services {
  padding-top: var(--space-md);
}

/* ─── PROCESS ────────────────────────────────────────────── */

.process__intro {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-gutter);
  padding: var(--space-xl) 0;
}
.process__intro-k {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.process__intro-b {
  font-family: var(--f-serif);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  color: var(--c-ink);
  max-width: 60ch;
}
.process__intro-b em { color: var(--c-accent); font-style: italic; }

/* ─── Mobile ────────────────────────────────────────────── */

@media (max-width: 960px) {
  .hero__stage { min-height: 65vh; padding: 60px 0 30px; }
  .hero__lede { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-xl) 0; }
  .hero__rail { display: none; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; justify-content: space-between; }

  .about, .process__intro { grid-template-columns: 1fr; gap: var(--space-md); }
  .about__facts { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .page-section { padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
}

@media (max-width: 640px) {
  .hero__stage { min-height: 60vh; padding: 48px 0 24px; }
  .hero__title { padding-right: 10%; }
  .about__facts { grid-template-columns: 1fr; }
  .about__dropcap { font-size: 3.5em; }
}