/* ═══════════════════════════════════════════════════════════════
   PAGE KIT — shared primitives for template pages
   ═══════════════════════════════════════════════════════════════
   Loads after css/style.css, before a page's own stylesheet.

   Everything here is shared by studio-hire.html, launch-videos.html and
   video-gallery.html. A new service page should load style.css, this, and
   then its own file — it should not need to redefine any of the below.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  /* Brand blue is #0000FF, which is near-black against a black page. This
     carries the same hue at a contrast you can actually read. */
  --primary-lift: hsl(240 100% 71%);
  --hairline: rgba(255, 255, 255, 0.1);
  --flag: #ffb020;
}

/* Brand blue is unreadable as a small uppercase label on black. */
.eyebrow { color: var(--primary-lift); }

.section-intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-intro .heading-section { margin-bottom: 1.25rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pk-sub {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  max-width: 40rem;
}
.pk-sub a,
.pk-link {
  color: var(--primary-lift);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ═══ PLACEHOLDER / TBC TREATMENT ═════════════════════════════ */
/*  Anything not yet confirmed is marked one loud, consistent way, so no
    invented figure can reach production by being quietly forgotten. Delete
    the class the moment the content becomes real.                        */

.tbc,
.tbc-inline {
  color: var(--flag);
  font-family: var(--mono);
  font-size: 0.8125em;
  letter-spacing: 0.02em;
}
.tbc-inline { display: inline; }
.tbc-block { position: relative; }

/* Block, not flex: as a flex container any inline <code> or <span> inside the
   banner becomes its own flex item and breaks onto its own line. */
.tbc-banner {
  display: block;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px dashed rgba(255, 176, 32, 0.5);
  border-radius: var(--radius);
  background: rgba(255, 176, 32, 0.06);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--flag);
}
.tbc-banner::before { content: '▲\00a0'; }

blockquote.tbc, p.tbc, dd.tbc, li.tbc { font-style: normal; }


/* ═══ SPEC BAR ════════════════════════════════════════════════ */
/*  Four hard facts directly under the headline. Used on every template page,
    because publishing the numbers the category hides is the whole strategy. */

.pk-specbar {
  position: relative;
  border-block: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.pk-specbar-inner { display: grid; grid-template-columns: 1fr; }
.pk-spec { padding: 1.25rem 0; border-bottom: 1px solid var(--hairline); }
.pk-spec:last-child { border-bottom: 0; }
.pk-spec b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.1875rem;
}
.pk-spec span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 640px) {
  .pk-specbar-inner { grid-template-columns: repeat(2, 1fr); }
  .pk-spec { padding-inline: 0 1.5rem; }
}
@media (min-width: 900px) {
  .pk-specbar-inner { grid-template-columns: repeat(4, 1fr); }
  .pk-spec { border-bottom: 0; border-right: 1px solid var(--hairline); }
  .pk-spec:last-child { border-right: 0; }
}


/* ═══ CLOSING CTA ═════════════════════════════════════════════ */

.pk-close {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 255, 0.28), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.pk-close-inner { max-width: 44rem; margin-inline: auto; text-align: center; }
.pk-close h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 1.25rem;
}
.pk-close p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 2rem;
}


/* ═══ FOOTER ══════════════════════════════════════════════════ */

.pk-footer { padding-block: 2.5rem; background: var(--bg); }
.pk-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
}
.pk-footer-logo img { height: 2rem; width: auto; }
.pk-footer-copy { margin-left: auto; }