/* Interior pages — capabilities and case studies */
/* Inherits from style.css, adds page-specific layout */

/* ── CAPABILITIES ──────────────────────────────────────────────────── */
.cap-hero {
  padding: calc(var(--nav-h) + 80px) 60px 80px;
  max-width: 960px;
  border-bottom: 1px solid var(--gray-2);
}
.cap-label {
  font-size: 9px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gray-3); margin-bottom: 20px;
}
.cap-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.05;
  margin-bottom: 20px;
}
.cap-sub {
  font-size: 16px; font-weight: 300;
  color: rgba(244,243,239,.6); line-height: 1.7;
  max-width: 600px;
}

.cap-body {
  max-width: 960px;
  padding: 0 60px 120px;
}
@media (max-width: 700px) {
  .cap-hero, .cap-body { padding-left: 32px; padding-right: 32px; }
}

.cap-section { padding: 64px 0; border-bottom: 1px solid var(--gray-2); }
.cap-section:last-of-type { border-bottom: none; }

.cap-section-label {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray-3); margin-bottom: 28px;
}
.cap-section-body p {
  font-size: 15px; line-height: 1.85;
  color: rgba(244,243,239,.72); font-weight: 300;
  margin-bottom: 20px; max-width: 680px;
}
.cap-section-body p:last-child { margin-bottom: 0; }
.cap-section-body a {
  color: var(--white); border-bottom: 1px solid var(--gray-3);
  transition: border-color var(--trans);
}
.cap-section-body a:hover { border-color: var(--white); }

/* Pillars */
.cap-pillars {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--gray-2);
}
@media (max-width: 700px) { .cap-pillars { grid-template-columns: 1fr; } }
.cap-pillar {
  padding: 48px 40px 48px 0;
  border-right: 1px solid var(--gray-2);
}
.cap-pillar:nth-child(even) { padding-left: 40px; padding-right: 0; border-right: none; }
.cap-pillar:nth-child(3), .cap-pillar:nth-child(4) { border-top: 1px solid var(--gray-2); }
@media (max-width: 700px) {
  .cap-pillar, .cap-pillar:nth-child(even) {
    padding: 32px 0; border-right: none; border-top: 1px solid var(--gray-2);
  }
  .cap-pillar:first-child { border-top: none; }
}
.cap-pillar-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 12px;
}
.cap-pillar p {
  font-size: 13px; line-height: 1.8;
  color: rgba(244,243,239,.55); font-weight: 300;
}

/* Tags */
.cap-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cap-tags span {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-3); border: 1px solid var(--gray-2);
  padding: 7px 14px;
}

/* Film list */
.cap-film-list { display: flex; flex-direction: column; gap: 0; }
.cap-film-item {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700; letter-spacing: -.01em;
  color: rgba(244,243,239,.5);
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-2);
  transition: color var(--trans), padding-left var(--trans);
}
.cap-film-item:first-child { border-top: 1px solid var(--gray-2); }
.cap-film-item:hover { color: var(--white); padding-left: 8px; }

/* CTA block */
.cap-cta {
  padding: 80px 0 0;
  border-top: 1px solid var(--gray-2);
  margin-top: 64px;
}
.cap-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 16px;
}
.cap-cta p {
  font-size: 15px; color: rgba(244,243,239,.55);
  font-weight: 300; margin-bottom: 28px; max-width: 480px;
}

/* ── CASE STUDIES ──────────────────────────────────────────────────── */
.cs-hero {
  padding: calc(var(--nav-h) + 60px) 60px 0;
  max-width: 1100px;
}
.cs-label {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray-3); margin-bottom: 20px;
}
.cs-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  margin-bottom: 14px;
}
.cs-sub {
  font-size: 16px; font-weight: 300;
  color: rgba(244,243,239,.55); margin-bottom: 40px;
}
.cs-video-wrap {
  position: relative; aspect-ratio: 16/9;
  background: #000; margin-bottom: 0;
  max-width: 900px;
}
.cs-video-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}

.cs-body {
  max-width: 900px;
  padding: 0 60px 120px;
}
@media (max-width: 700px) {
  .cs-hero, .cs-body { padding-left: 32px; padding-right: 32px; }
}

.cs-section { padding: 56px 0; border-bottom: 1px solid var(--gray-2); }
.cs-section-label {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray-3); margin-bottom: 24px;
}
.cs-section-body p {
  font-size: 15px; line-height: 1.85;
  color: rgba(244,243,239,.72); font-weight: 300;
  margin-bottom: 18px; max-width: 680px;
}
.cs-section-body p:last-child { margin-bottom: 0; }

.cs-credits {
  padding: 48px 0;
  border-bottom: 1px solid var(--gray-2);
  display: flex; flex-direction: column; gap: 0;
}
.cs-credit-row {
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-2);
  font-size: 12px;
}
.cs-credit-row:last-child { border-bottom: none; }
.cs-credit-row span:first-child {
  color: var(--gray-3); letter-spacing: .06em; text-transform: uppercase; font-size: 10px;
}
.cs-credit-row span:last-child { color: rgba(244,243,239,.8); }

.cs-nav { padding: 48px 0 0; }
.cs-next {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: rgba(244,243,239,.4);
  transition: color var(--trans);
}
.cs-next:hover { color: var(--white); }