/* ============================================================
   Part 2: services, contact, footer + the three visual
   directions (editorial / credits / grotesk)
   ============================================================ */

/* ---- services ---- */
.services { padding-left: var(--pad); padding-right: var(--pad); }
.service-list { border-top: 1px solid var(--line); margin-top: clamp(28px, 5svh, 56px); }
.service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px clamp(20px, 5vw, 80px);
  padding: clamp(26px, 4svh, 44px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.service-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.service-body { display: flex; flex-direction: column; gap: 10px; }
.service-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  font-size: clamp(26px, 4.6vw, 52px);
  line-height: 1.05;
}
.service-desc {
  max-width: 56ch;
  color: var(--ink-dim);
  font-size: clamp(14px, 1.7vw, 16px);
}
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}
@media (min-width: 760px) {
  .service { grid-template-columns: 60px 1fr 1.1fr; }
  .service-extra { display: flex; flex-direction: column; gap: 10px; justify-self: stretch; }
}
@media (max-width: 759px) {
  .service-extra { grid-column: 2; }
}

/* ---- contact ---- */
.contact {
  padding: clamp(90px, 18svh, 200px) var(--pad);
  text-align: left;
}
.contact-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 24px;
}
.contact-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  font-size: clamp(40px, 9vw, 120px);
  line-height: 1.02;
  max-width: 12ch;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(34px, 6svh, 64px);
}
.contact-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s;
}
.contact-links a:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.contact-links a::after { content: "↗"; font-size: 12px; }

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 28px var(--pad) 34px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   DIRECTION A — "editorial."  (default)
   High-contrast serif, lowercase, trailing periods, airy.
   ============================================================ */
html[data-dir="editorial"] {
  --font-display: "Poppins", sans-serif;
  --display-weight: 500;
  --display-tracking: -0.035em;
  --display-transform: lowercase;
}
html[data-dir="editorial"] .hero-name em { font-style: italic; }
html[data-dir="editorial"] .section-title .t::after,
html[data-dir="editorial"] .contact-title::after { content: "."; color: var(--accent); }

/* ============================================================
   DIRECTION B — "credits."
   Condensed uppercase poster type, letterboxed hero, centered.
   ============================================================ */
html[data-dir="credits"] {
  --font-display: "Poppins", sans-serif;
  --display-weight: 700;
  --display-tracking: 0.01em;
  --display-transform: uppercase;
}
html[data-dir="credits"] .hero { align-items: center; text-align: center; }
html[data-dir="credits"] .hero-eyebrow { justify-content: center; }
html[data-dir="credits"] .hero-eyebrow::before { display: none; }
html[data-dir="credits"] .hero-roles { justify-content: center; }
html[data-dir="credits"] .hero::before,
html[data-dir="credits"] .hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(20px, 5svh, 56px);
  background: #000;
}
html[data-dir="credits"] .hero::before { top: 0; }
html[data-dir="credits"] .hero::after { bottom: 0; }
html[data-dir="credits"] .hero-name { font-size: clamp(44px, 14.5vw, 210px); line-height: 0.92; max-width: 100%; }
html[data-dir="credits"] .section-head { justify-content: center; text-align: center; }
html[data-dir="credits"] .section-hint { display: none; }
html[data-dir="credits"] .contact { text-align: center; }
html[data-dir="credits"] .contact-title { margin-inline: auto; }
html[data-dir="credits"] .contact-links { justify-content: center; }
html[data-dir="credits"] .grain { opacity: 0.75; }

/* ============================================================
   DIRECTION C — "grotesk."
   Swiss: heavy tight grotesque, mono indexes, hard left.
   ============================================================ */
html[data-dir="grotesk"] {
  --font-display: "Poppins", sans-serif;
  --display-weight: 700;
  --display-tracking: -0.04em;
  --display-transform: lowercase;
}
html[data-dir="grotesk"] .section-title .index { display: inline; }
html[data-dir="grotesk"] .hero-name { font-size: clamp(54px, 13.5vw, 184px); line-height: 0.98; }
html[data-dir="grotesk"] .section-title .t::after,
html[data-dir="grotesk"] .contact-title::after { content: "."; color: var(--accent); }
html[data-dir="grotesk"] .card-title { font-weight: 700; letter-spacing: -0.02em; }
html[data-dir="grotesk"] .hero-eyebrow::before { background: var(--accent); height: 8px; width: 8px; }