/* Skeleton-page shared styles for Media, Production, About, Contact */
.sub-hero {
  position: relative;
  padding: 180px var(--gutter) 80px;
  min-height: 80vh;
  display: grid; align-content: space-between;
  overflow: hidden;
  isolation: isolate;
}
.sub-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 85% 30%, color-mix(in oklch, var(--accent) 22%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(237,234,228,0.03) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #0a0a0a, #0d0c0a);
}
.sub-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(0,0,0,0.75) 100%);
}
.sub-hero-top {
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3); gap: 24px;
}
.sub-hero-title { max-width: var(--maxw); width: 100%; margin: auto auto 0; }
.sub-hero-title .ch {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.sub-hero-title .ch::before { content: ''; width: 40px; height: 1px; background: var(--accent); }
.sub-hero-title h1 {
  margin: 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(80px, 14vw, 240px);
  letter-spacing: -0.045em;
  line-height: 0.86;
  font-stretch: 125%;
}
.sub-hero-title h1 .sub {
  display: block; font-size: 0.3em; color: var(--fg-3);
  font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 0.6em; font-stretch: 100%;
}
.sub-hero-deck {
  max-width: var(--maxw); width: 100%; margin: 48px auto 0;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px; align-items: end;
  padding-top: 28px; border-top: 1px solid var(--hair);
}
.sub-hero-deck .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.sub-hero-deck .v { font-size: 14px; color: var(--fg); }

.services-list { border-top: 1px solid var(--hair); }
.service-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 1.6fr 1fr 80px;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--hair);
  align-items: center;
  position: relative;
  transition: all 0.35s;
}
.service-row::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: color-mix(in oklch, var(--accent) 6%, transparent);
  transition: width 0.4s; z-index: -1;
}
.service-row:hover::after { width: 100%; }
.service-row:hover .srv-name { color: var(--accent-ink); }
.srv-idx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-3); }
.srv-name { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3vw, 48px); letter-spacing: -0.03em; line-height: 1; transition: color 0.3s; }
.srv-desc { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); max-width: 48ch; }
.srv-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.srv-arr { width: 40px; height: 40px; border: 1px solid var(--hair-strong); display: grid; place-items: center; color: var(--fg-2); justify-self: end; transition: all 0.3s; }

.cta-band {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: end;
  border-top: 1px solid var(--hair);
  max-width: var(--maxw); margin: 0 auto;
}
.cta-band h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 7.5vw, 128px); letter-spacing: -0.035em; line-height: 0.9; }
.cta-band h2 span { display: block; color: var(--accent-ink); }
.cta-band .actions { display: grid; gap: 14px; justify-items: start; }

@media (max-width: 980px) {
  .service-row { grid-template-columns: 60px 1fr 40px; row-gap: 8px; }
  .srv-desc, .srv-meta { grid-column: 1 / -1; padding-left: 76px; }
  .srv-name { min-width: 0; overflow-wrap: anywhere; }
  .sub-hero-deck, .cta-band { grid-template-columns: 1fr; }
}