/* ============================================================
   Motion Arcade — styles.css
   Site-wide stylesheet. Sections marked with // ============
   dividers map to the original homepage build; inner pages
   inherit the nav, footer, section-label, and button systems.

   Palette, typography, and layout tokens live in :root and
   should be the only place colors/fonts are defined.
   ============================================================ */

:root {
  /* Brand palette — derived from the wordmark */
  --teal:        #00B8AA;
  --green-mid:   #2ED19E;
  --green-bright:#65E68D;
  --green-light: #8DF383;

  /* Neutrals — slightly green-shifted to sit in the same family as the brand */
  --black:       #070B0A;
  --ink:         #0D1311;
  --ink-2:       #131A17;
  --ink-3:       #1B2421;
  --line:        #232E2A;
  --mute:        #6B7872;
  --soft:        #A8B3AE;
  --white:       #F2F5F3;

  /* Type */
  --sans: 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  /* Layout */
  --max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--teal); color: var(--black); }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================
   UTILITIES
   ============================================ */
.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;
}

/* ============================================ */
/* NAV                                          */
/* ============================================ */
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  background: linear-gradient(180deg, rgba(7,11,10,0.85) 0%, rgba(7,11,10,0.4) 70%, rgba(7,11,10,0) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
nav.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav.top .mark {
  display: flex;
  align-items: center;
  gap: 12px;
}
nav.top .mark img {
  height: 36px;
  width: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
nav.top .links {
  display: flex;
  gap: 36px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
nav.top .links a {
  color: var(--soft);
  transition: color 0.2s ease;
}
nav.top .links a:hover { color: var(--white); }
nav.top .cta {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  border: 1px solid var(--line);
  color: var(--white);
  transition: all 0.2s ease;
}
nav.top .cta:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--black);
}
/* Wraps the CTA + mobile hamburger so they sit together on the right
   regardless of breakpoint. */
nav.top .nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Hamburger — hidden on desktop, visible at the mobile breakpoint.
   Bars animate into an X when aria-expanded="true". */
nav.top .nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
nav.top .nav-toggle:hover { border-color: var(--white); }
nav.top .nav-toggle .bar {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--white);
  transform: translateX(-50%);
  transition: top 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}
nav.top .nav-toggle .bar:nth-child(1) { top: 13px; }
nav.top .nav-toggle .bar:nth-child(2) { top: 19px; }
nav.top .nav-toggle .bar:nth-child(3) { top: 25px; }
nav.top .nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}
nav.top .nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}
nav.top .nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 800px) {
  /* At the mobile breakpoint, .links becomes a dropdown panel
     anchored to the bottom of the nav. It's hidden by default
     and revealed when nav.top has .menu-open (toggled by JS). */
  nav.top .links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: rgba(7,11,10,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  nav.top .links a {
    padding: 16px 0;
    color: var(--white);
    border-bottom: 1px solid var(--line);
  }
  nav.top .links a:last-child { border-bottom: none; }
  nav.top.menu-open .links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s;
  }
  nav.top .nav-toggle { display: block; }
}
@media (max-width: 400px) {
  /* Tighten the CTA so logo + CTA + hamburger fit comfortably on
     narrow phones. */
  nav.top .cta { padding: 9px 12px; font-size: 11px; }
}

/* ============================================ */
/* HERO                                         */
/* ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 80px;
  overflow: hidden;
}
.hero .reel {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  overflow: hidden;
}
.hero .reel iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  min-height: 100vh;
  min-width: 177.78vh; /* 16:9 */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero .reel .crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Green phosphor cast + vignette + corner glow */
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0,184,170,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(46,209,158,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at center, transparent 50%, rgba(7,11,10,0.45) 100%);
  mix-blend-mode: screen;
}
.hero .reel .crt::after {
  /* Subtle green tint pass */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,184,170,0.04);
  mix-blend-mode: overlay;
}
.hero .reel::after {
  /* Bottom darkening for legibility */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,11,10,0.2) 0%, rgba(7,11,10,0.4) 40%, rgba(7,11,10,0.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero .scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 1px,
    transparent 1px,
    transparent 3px
  );
}
.hero .content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
  margin-bottom: 28px;
}
.hero .eyebrow .pixel {
  width: 8px; height: 8px;
  background: var(--green-bright);
  box-shadow: 0 0 12px var(--green-bright);
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}
.hero h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
  max-width: 14ch;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--teal) 0%, var(--green-bright) 60%, var(--green-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 500;
  /* Italic glyphs lean past the inline box; tight line-height + overflow:hidden
     on the parent clips the gradient mask. Pad the box, then pull the layout
     back with negative margins so spacing stays unchanged. */
  display: inline-block;
  padding: 0.04em 0.08em 0.06em 0;
  margin: -0.04em -0.04em -0.06em 0;
}
.hero .sub {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--soft);
  font-weight: 300;
  max-width: 36ch;
  margin-bottom: 32px;
  line-height: 1.4;
}
.hero .body-copy {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--soft);
  max-width: 62ch;
  margin-bottom: 44px;
  line-height: 1.65;
}
.hero .body-copy em {
  color: var(--white);
  font-style: italic;
}
.hero .ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--teal);
  color: var(--black);
}
.btn-primary:hover {
  background: var(--green-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,184,170,0.3);
}
.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.04);
}
.btn .arrow {
  transition: transform 0.25s ease;
}
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================ */
/* PIXEL DIVIDER                                */
/* ============================================ */
.pixel-divider {
  height: 8px;
  width: 100%;
  background-image:
    linear-gradient(90deg, var(--line) 25%, transparent 25%, transparent 50%, var(--line) 50%, var(--line) 75%, transparent 75%);
  background-size: 16px 8px;
  opacity: 0.6;
}

/* ============================================ */
/* CREDIBILITY MARQUEE                          */
/* ============================================ */
.credibility {
  padding: 100px 0 100px;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.credibility::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
  z-index: 0;
}
.credibility > * { position: relative; z-index: 1; }
.credibility .label {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute);
  margin-bottom: 56px;
}
.credibility .label span {
  color: var(--green-bright);
}
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  animation: scroll 90s linear infinite;
  gap: 0;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track .title {
  flex-shrink: 0;
  padding: 0 36px;
  font-family: var(--sans);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee-track .sep {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--green-bright);
  font-size: 24px;
  opacity: 0.6;
}
.marquee-track .sep::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--green-bright);
}
.credibility .more {
  text-align: center;
  margin-top: 56px;
}
.credibility .more a {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: all 0.2s ease;
}
.credibility .more a:hover {
  color: var(--green-bright);
  border-color: var(--green-bright);
}

/* ============================================ */
/* THE PITCH                                    */
/* ============================================ */
.pitch {
  padding: 140px 0;
  position: relative;
}
.pitch .wrap {
  max-width: 880px;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
  margin-bottom: 32px;
}
.section-label .pixel {
  width: 10px;
  height: 10px;
  background: var(--green-bright);
  box-shadow: 0 0 14px var(--green-bright);
  flex-shrink: 0;
  animation: blink 1.4s steps(2) infinite;
}
.pitch h2 {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 48px;
  max-width: 14ch;
}
.pitch p {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--soft);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 64ch;
}
.pitch p em {
  color: var(--white);
  font-style: italic;
}
.pitch .real-stage {
  margin-top: 96px;
  padding: 72px 0 0;
  border-top: 1px solid var(--line);
}
.pitch .real-stage .section-label {
  margin-bottom: 24px;
}
.pitch .real-stage h3 {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  max-width: 18ch;
}
.pitch .promise {
  margin-top: 88px;
  padding: 56px 48px;
  position: relative;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
/* Pixel corner brackets — four 10px teal squares framing the promise */
.pitch .promise::before,
.pitch .promise::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--teal);
  box-shadow: 0 0 16px rgba(0,184,170,0.5);
}
.pitch .promise::before {
  top: 0;
  left: 0;
}
.pitch .promise::after {
  bottom: 0;
  right: 0;
}
.pitch .promise .tl,
.pitch .promise .br {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--teal);
  box-shadow: 0 0 16px rgba(0,184,170,0.5);
}
.pitch .promise .tl {
  top: 0;
  right: 0;
}
.pitch .promise .br {
  bottom: 0;
  left: 0;
}

/* ============================================ */
/* CAPABILITIES                                 */
/* ============================================ */
.capabilities {
  padding: 140px 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.capabilities::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.capabilities .wrap { position: relative; }
.capabilities h2 {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 80px;
  max-width: 10ch;
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 768px) {
  .cap-grid { grid-template-columns: 1fr; }
}
.cap {
  background: var(--ink);
  padding: 48px 44px;
  transition: background 0.3s ease;
  position: relative;
}
.cap:hover { background: var(--ink-2); }
.cap .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green-bright);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cap .num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}
.cap h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cap p {
  font-size: 16px;
  color: var(--soft);
  line-height: 1.65;
}
.cap p strong { color: var(--white); font-weight: 500; }
.cap p em { color: var(--white); font-style: italic; font-weight: 400; }

/* Pixel icon for capabilities */
.pixel-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
}
.pixel-icon span {
  background: var(--green-bright);
}

/* ============================================ */
/* PROCESS                                      */
/* ============================================ */
.process {
  padding: 140px 0;
}
.process h2 {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 80px;
  max-width: 14ch;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 56px; }
}
.step {
  position: relative;
}
.step .number {
  font-family: var(--mono);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 400;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.step .number::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  margin-bottom: 12px;
}
.step h3 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.step p {
  color: var(--soft);
  font-size: 16px;
  line-height: 1.65;
}

/* ============================================ */
/* SOCIAL PROOF                                 */
/* ============================================ */
.testimonials {
  padding: 140px 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.testimonials .wrap { position: relative; }
.testimonials h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 72px;
  max-width: 16ch;
}
.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 800px) {
  .quotes { grid-template-columns: 1fr; }
}
.quote {
  padding: 48px 40px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  position: relative;
}
.quote::before {
  content: '"';
  position: absolute;
  top: 12px;
  left: 24px;
  font-size: 80px;
  color: var(--teal);
  line-height: 1;
  font-family: serif;
  opacity: 0.3;
}
.quote .body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 32px;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.quote .attr {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-bright);
}
.quote .attr .role {
  color: var(--mute);
  display: block;
  margin-top: 4px;
}
.quote.placeholder {
  opacity: 0.5;
  border-style: dashed;
}

/* Standalone pull-quote (e.g. About → peer endorsement) */
.endorsement {
  padding: 120px 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.endorsement::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.endorsement .wrap { position: relative; }
.endorsement .section-label { margin-bottom: 32px; }
.endorsement .quote {
  max-width: 760px;
  margin: 0 auto;
}

/* ============================================ */
/* CLOSING CTA                                  */
/* ============================================ */
.closing {
  padding: 180px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,184,170,0.08) 0%, transparent 60%);
}
.closing .wrap {
  position: relative;
  max-width: 900px;
}
.closing h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  color: var(--white);
}
.closing h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal) 0%, var(--green-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* See note on .hero h1 .accent — same italic-clip prevention. */
  display: inline-block;
  padding: 0.04em 0.08em 0.06em 0;
  margin: -0.04em -0.04em -0.06em 0;
}
.closing p {
  font-size: 18px;
  color: var(--soft);
  margin-bottom: 48px;
}

/* ============================================ */
/* FOOTER                                       */
/* ============================================ */
footer {
  padding: 80px 0 48px;
  background: var(--ink);
  border-top: 1px solid var(--line);
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
footer .wrap { position: relative; }
footer .wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 700px) {
  footer .wrap { grid-template-columns: 1fr; gap: 48px; }
}
footer .brand img {
  height: 44px;
  width: auto;
  margin-bottom: 24px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
footer .brand p {
  font-size: 14px;
  color: var(--soft);
  line-height: 1.6;
  max-width: 36ch;
}
footer .brand p a {
  color: var(--green-bright);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease;
}
footer .brand p a:hover { border-color: var(--green-bright); }
footer .nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
footer .nav a {
  color: var(--soft);
  transition: color 0.2s ease;
}
footer .nav a:hover { color: var(--white); }
footer .copy {
  grid-column: 1 / -1;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================================ */
/* REEL MODAL                                   */
/* ============================================ */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7,11,10,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.reel-modal.open {
  display: flex;
  opacity: 1;
}
.reel-modal .frame {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16/9;
  background: #000;
  border: 1px solid var(--line);
}
.reel-modal .frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reel-modal .close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: 1px solid var(--line);
  color: var(--white);
  width: 36px;
  height: 36px;
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.reel-modal .close:hover {
  background: var(--teal);
  color: var(--black);
  border-color: var(--teal);
}

/* ============================================ */
/* SCROLL REVEAL                                */
/* ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================ */
/* INNER PAGE HERO (stub pages)                 */
/* ============================================ */
.page-hero {
  position: relative;
  padding: 220px 0 140px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0,184,170,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(46,209,158,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.page-hero .wrap { position: relative; }
.page-hero h1 {
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  max-width: 14ch;
}
.page-hero h1 .accent {
  background: linear-gradient(135deg, var(--teal) 0%, var(--green-bright) 60%, var(--green-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 500;
  /* See note on .hero h1 .accent — same italic-clip prevention. */
  display: inline-block;
  padding: 0.04em 0.08em 0.06em 0;
  margin: -0.04em -0.04em -0.06em 0;
}
.page-hero .lede {
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--soft);
  max-width: 54ch;
  line-height: 1.55;
  font-weight: 300;
}

/* ============================================ */
/* COMING SOON PLACEHOLDER                      */
/* ============================================ */
.coming-soon {
  padding: 160px 0;
  text-align: center;
}
.coming-soon .badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
  padding: 12px 18px;
  border: 1px solid var(--line);
  margin-bottom: 40px;
}
.coming-soon .badge .pixel {
  width: 8px;
  height: 8px;
  background: var(--green-bright);
  box-shadow: 0 0 12px var(--green-bright);
  animation: blink 1.4s steps(2) infinite;
}
.coming-soon h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}
.coming-soon p {
  font-size: 18px;
  color: var(--soft);
  max-width: 52ch;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* ============================================================
   CAPABILITIES PAGE
   Sections: .volume / .delivery / .crew / .packages / .rate-download
   Shared components: .spec-group, .spec-strip, .package-card, .addon-table
   ============================================================ */

/* ---- Shared section heading (smaller than homepage h2) ---- */
.volume h2,
.delivery h2,
.crew h2,
.packages h2 {
  font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 56px;
  max-width: 22ch;
}
.packages h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal) 0%, var(--green-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}

/* ---- Shared: prose-left / spec-strip-right layout ---- */
.spec-group {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .spec-group { grid-template-columns: 1fr; gap: 40px; }
}
.spec-group .prose p {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--soft);
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 56ch;
}
.spec-group .prose p:last-child { margin-bottom: 0; }
.spec-group .prose p em { color: var(--white); font-style: italic; }
.spec-group .prose p strong { color: var(--white); font-weight: 500; }

.spec-strip {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 28px;
}
.spec-strip .spec-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.spec-strip .spec-row:last-child { border-bottom: none; }
.spec-strip dt {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-bright);
  margin-bottom: 8px;
}
.spec-strip dd {
  font-size: 15px;
  color: var(--white);
  line-height: 1.4;
}

/* ============================================ */
/* VOLUME                                       */
/* ============================================ */
.volume {
  padding: 140px 0;
}

/* ============================================ */
/* DATA & DELIVERY                              */
/* ============================================ */
.delivery {
  padding: 140px 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.delivery::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.delivery .wrap { position: relative; }
/* Inside ink panel the spec-strip needs a different shade to separate */
.delivery .spec-strip { background: var(--ink-2); }

/* ============================================ */
/* CREW                                         */
/* ============================================ */
.crew {
  padding: 140px 0;
}
.crew .crew-prose p {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--soft);
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 68ch;
}
.crew .crew-prose p em {
  color: var(--white);
  font-style: italic;
}
.crew-roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 64px;
  list-style: none;
}
@media (max-width: 900px) {
  .crew-roles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .crew-roles { grid-template-columns: 1fr; }
}
.crew-roles li {
  background: var(--black);
  padding: 22px 24px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--soft);
  transition: color 0.2s ease, background 0.2s ease;
}
.crew-roles li:hover {
  color: var(--green-bright);
  background: var(--ink);
}

/* ============================================ */
/* PACKAGES                                     */
/* ============================================ */
.packages {
  padding: 140px 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.packages::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.packages .wrap { position: relative; }
.packages .packages-intro {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--soft);
  max-width: 56ch;
  margin-top: -24px;
  margin-bottom: 48px;
  line-height: 1.6;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .package-grid { grid-template-columns: 1fr; }
}
.package-card {
  background: var(--black);
  border: 1px solid var(--line);
  padding: 40px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.package-card:hover {
  border-color: var(--line);
  transform: translateY(-2px);
}
.package-card.indie {
  border-color: rgba(101,230,141,0.35);
}
.package-card.indie:hover {
  border-color: var(--green-bright);
}
.package-card .card-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
  margin-bottom: 20px;
}
.package-card .card-tag .pixel {
  width: 8px;
  height: 8px;
  background: var(--green-bright);
  box-shadow: 0 0 12px var(--green-bright);
}
.package-card h3 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  line-height: 1.15;
}
.package-card .price {
  margin-bottom: 8px;
}
.package-card .price .amount {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: -0.01em;
}
.package-card .price .unit {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--soft);
}
.package-card .price .half {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.package-card .positioning {
  color: var(--soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 20px 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.package-card .includes-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-bright);
  margin-bottom: 14px;
}
.package-card .includes ul {
  list-style: none;
}
.package-card .includes li {
  padding: 10px 0;
  font-size: 14px;
  color: var(--white);
  line-height: 1.45;
  border-bottom: 1px solid rgba(35,46,42,0.5);
}
.package-card .includes li:last-child { border-bottom: none; }
.package-card .note,
.package-card .ideal {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.package-card .ideal {
  color: var(--soft);
  margin-top: 12px;
  padding-top: 12px;
  border-top: none;
}

.packages .currency-note {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-align: center;
}

/* ---- Add-ons (sub-block inside packages) ---- */
.addons {
  margin-top: 96px;
  padding-top: 72px;
  border-top: 1px solid var(--line);
}
.addons h3 {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
  margin-bottom: 28px;
}
.addon-table {
  width: 100%;
  border-collapse: collapse;
}
.addon-table th {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  text-align: left;
  padding: 12px 20px 12px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.addon-table th:last-child { text-align: right; padding-right: 0; }
.addon-table td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--white);
  line-height: 1.4;
}
.addon-table td:last-child {
  font-family: var(--mono);
  color: var(--green-bright);
  text-align: right;
  padding-right: 0;
}
.addon-table td .sub {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  display: block;
  margin-top: 3px;
}
.addons .addon-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--mute);
  font-style: italic;
  max-width: 60ch;
}
@media (max-width: 600px) {
  .addon-table td:last-child { font-size: 13px; }
  .addon-table td, .addon-table th { padding-right: 8px; }
}

/* ============================================ */
/* RATE SHEET DOWNLOAD                          */
/* ============================================ */
.rate-download {
  padding: 120px 0;
  text-align: center;
}
.rate-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 48px;
  position: relative;
}
.rate-card .tl,
.rate-card .tr,
.rate-card .bl,
.rate-card .br {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--teal);
  box-shadow: 0 0 14px rgba(0,184,170,0.5);
}
.rate-card .tl { top: 0; left: 0; }
.rate-card .tr { top: 0; right: 0; }
.rate-card .bl { bottom: 0; left: 0; }
.rate-card .br { bottom: 0; right: 0; }
.rate-card p {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--soft);
  margin-bottom: 32px;
  line-height: 1.55;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}
.rate-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-bright);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.rate-link:hover { border-color: var(--green-bright); color: var(--white); }
.rate-link .meta { color: var(--mute); }
.rate-link .arrow { transition: transform 0.2s ease; }
.rate-link:hover .arrow { transform: translateX(4px); }

/* ============================================ */
/* INTERNATIONAL                                */
/* ============================================ */
.international {
  padding: 80px 0 160px;
}
.intl-card {
  max-width: 920px;
  margin: 0 auto;
  padding: 104px 72px;
  position: relative;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(0,184,170,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(101,230,141,0.04) 0%, transparent 60%);
}
.intl-card .tl,
.intl-card .tr,
.intl-card .bl,
.intl-card .br {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--teal);
  box-shadow: 0 0 18px rgba(0,184,170,0.6);
}
.intl-card .tl { top: 0; left: 0; }
.intl-card .tr { top: 0; right: 0; }
.intl-card .bl { bottom: 0; left: 0; }
.intl-card .br { bottom: 0; right: 0; }
.intl-card .intl-label {
  justify-content: center;
  margin-bottom: 40px;
}
.intl-card h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 auto 36px;
  max-width: 22ch;
}
.intl-card .intl-body {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--soft);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto 52px;
}
.intl-card .intl-cta {
  margin-bottom: 44px;
}
.intl-card .intl-meta {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin: 0;
}
@media (max-width: 600px) {
  .intl-card { padding: 64px 28px; }
  .intl-card .intl-body { margin-bottom: 40px; }
  .intl-card .intl-cta { margin-bottom: 32px; }
}

/* ============================================================
   ABOUT PAGE
   Sections: .origin / .disciplines / .founders
   Components: .founders-grid, .founder-card, .portrait-frame
   ============================================================ */

/* ---- Shared section heading (matches capabilities) ---- */
.origin h2,
.disciplines h2,
.founders h2 {
  font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 40px;
  max-width: 22ch;
}

/* ---- Shared prose styling ---- */
.origin p,
.disciplines p {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--soft);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 64ch;
}
.origin p:last-child,
.disciplines p:last-child { margin-bottom: 0; }
.origin p em,
.disciplines p em {
  color: var(--white);
  font-style: italic;
}

/* ============================================ */
/* ORIGIN                                       */
/* ============================================ */
.origin {
  padding: 140px 0;
}
.origin .wrap { max-width: 880px; }

/* ============================================ */
/* DISCIPLINES                                  */
/* ============================================ */
.disciplines {
  padding: 140px 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.disciplines::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.disciplines .wrap {
  position: relative;
  max-width: 880px;
}

/* ============================================ */
/* FOUNDERS                                     */
/* ============================================ */
.founders {
  padding: 140px 0;
}
.founders h2 {
  margin-bottom: 64px;
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}
@media (max-width: 900px) {
  .founders-grid { grid-template-columns: 1fr; gap: 80px; }
}

.founder-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.founder-meta h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  line-height: 1.15;
}
.founder-meta .role {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
}

.founder-card .bio {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--soft);
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
}
.founder-card .bio em {
  color: var(--white);
  font-style: italic;
}

/* ---- Portrait frame (with image + CRT/scanline treatment) ---- */
.portrait-frame {
  aspect-ratio: 4 / 5;
  max-width: 50%;
  background: var(--ink);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  filter: grayscale(1) contrast(1.02);
}
.portrait-frame .portrait-crt {
  /* Green phosphor cast — matches .hero .reel .crt */
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0,184,170,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(46,209,158,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at center, transparent 50%, rgba(7,11,10,0.45) 100%);
  mix-blend-mode: screen;
}
.portrait-frame .portrait-crt::after {
  /* Subtle green tint pass — matches hero */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,184,170,0.04);
  mix-blend-mode: overlay;
}
.portrait-frame .portrait-scanlines {
  /* Matches .hero .scanlines */
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 1px,
    transparent 1px,
    transparent 3px
  );
}
.portrait-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(0,184,170,0.45);
  z-index: 3;
}
.portrait-corner.tl { top: 0; left: 0; }
.portrait-corner.tr { top: 0; right: 0; }
.portrait-corner.bl { bottom: 0; left: 0; }
.portrait-corner.br { bottom: 0; right: 0; }

/* On narrow screens (single column), let the portrait sit a touch larger */
@media (max-width: 900px) {
  .portrait-frame { max-width: 60%; }
}
@media (max-width: 520px) {
  .portrait-frame { max-width: 70%; }
}

/* ============================================================
   FAQ PAGE
   Sections: .faq-group (×5)
   Components: .faq-list, .faq-item (<details>), .faq-q (<summary>), .faq-a
   ============================================================ */

/* Match section rhythm used by .volume / .delivery / .crew on Capabilities */
.faq-group { padding: 140px 0; }

/* Alternate ink panels for visual cadence between groups */
.faq-group:nth-of-type(even) {
  background: var(--ink);
  position: relative;
}
.faq-group:nth-of-type(even)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(101,230,141,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.faq-group:nth-of-type(even) .wrap { position: relative; }

/* Headlines match the Capabilities-section H2 scale */
.faq-group h2 {
  font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-top: 28px;
  margin-bottom: 64px;
  max-width: 22ch;
}
.faq-group h2 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--teal) 0%, var(--green-bright) 60%, var(--green-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-list {
  display: flex;
  flex-direction: column;
  max-width: 880px;
}

.faq-item {
  border-top: 1px solid var(--line);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

/* Summary = the question row. Read like a clickable list item. */
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 32px 64px 32px 8px;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  letter-spacing: -0.01em;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }

/* Right-aligned +/- marker — clearer affordance than a small left icon */
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-weight: 400;
  color: var(--green-bright);
  font-size: 28px;
  line-height: 1;
  width: 28px;
  height: 28px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.faq-item[open] > summary::after {
  content: "−";
  border-color: var(--green-bright);
  background: rgba(101,230,141,0.08);
}
.faq-item > summary:hover {
  color: var(--green-bright);
  background: rgba(101,230,141,0.03);
}
.faq-item > summary:hover::after {
  border-color: var(--green-bright);
  color: var(--green-light);
}
.faq-item > summary:focus-visible {
  outline: 1px solid var(--green-bright);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq-a {
  padding: 4px 64px 36px 8px;
  color: var(--soft);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 72ch;
}
.faq-a p { margin: 0 0 1em 0; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a {
  color: var(--green-bright);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.15s ease;
}
.faq-a a:hover {
  color: var(--green-light);
}
.faq-a em {
  font-style: italic;
  color: var(--white);
  font-weight: 400;
}

@media (max-width: 700px) {
  .faq-group { padding: 100px 0; }
  .faq-group h2 { margin-top: 20px; margin-bottom: 44px; }
  .faq-item > summary {
    padding: 26px 56px 26px 4px;
    font-size: 17px;
  }
  .faq-item > summary::after {
    right: 8px;
    font-size: 24px;
    width: 26px;
    height: 26px;
  }
  .faq-a {
    padding: 4px 56px 30px 4px;
    font-size: 15.5px;
  }
}

/* ============================================================
   CONTACT PAGE
   Sections: .contact-form / .thank-you
   Components: .form, .form-section, .form-grid, .field, .form-actions
   ============================================================ */

.contact-form {
  padding: 80px 0 160px;
}
.contact-form .wrap {
  max-width: 880px;
}
.contact-form form.form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---- Section grouping inside the form ---- */
.form-section {
  position: relative;
  padding: 40px 36px 36px;
  background: var(--ink);
  border: 1px solid var(--line);
}
.form-section + .form-section {
  background: var(--ink-2);
}
.form-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
  margin-bottom: 10px;
}
.form-section-label .pixel {
  width: 8px;
  height: 8px;
  background: var(--green-bright);
  box-shadow: 0 0 12px var(--green-bright);
  flex-shrink: 0;
}
.form-section-note {
  font-size: 14px;
  color: var(--mute);
  margin-bottom: 28px;
  line-height: 1.55;
  font-style: italic;
}

/* ---- Field grid ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
}
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-full { grid-column: 1 / -1; }
.field .label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.field .label em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--green-bright);
}

/* ---- Inputs / textareas / selects ---- */
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.form-section + .form-section .field input,
.form-section + .form-section .field textarea,
.form-section + .form-section .field select {
  background: var(--ink);
}
.field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--sans);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--mute);
}
.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--mute);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--green-bright);
  background: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(101,230,141,0.10);
}
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%2365E68D' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.field select option {
  background: var(--ink);
  color: var(--white);
}

/* ---- Honeypot (visually hidden but kept in DOM for Netlify) ---- */
.form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Actions ---- */
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 16px;
}
.form-actions .btn {
  padding: 20px 32px;
}
.form-fallback {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.form-fallback a {
  color: var(--soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.form-fallback a:hover {
  color: var(--green-bright);
  border-color: var(--green-bright);
}

@media (max-width: 700px) {
  .contact-form { padding: 60px 0 120px; }
  .form-section { padding: 32px 24px 28px; }
  .contact-form form.form { gap: 24px; }
}

/* ============================================ */
/* THANK-YOU PAGE                               */
/* ============================================ */
.thank-you {
  padding: 120px 0 180px;
  text-align: center;
}
.thank-you .wrap { max-width: 720px; }
.thank-you .ack {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
  padding: 12px 18px;
  border: 1px solid var(--line);
  margin-bottom: 40px;
}
.thank-you .ack .pixel {
  width: 8px;
  height: 8px;
  background: var(--green-bright);
  box-shadow: 0 0 12px var(--green-bright);
  animation: blink 1.4s steps(2) infinite;
}
.thank-you h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.thank-you h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal) 0%, var(--green-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* See note on .hero h1 .accent — same italic-clip prevention. */
  display: inline-block;
  padding: 0.04em 0.08em 0.06em 0;
  margin: -0.04em -0.04em -0.06em 0;
}
.thank-you p {
  font-size: 17px;
  color: var(--soft);
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto 40px;
}
.thank-you .actions {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   CREDITS PAGE
   Sections: .credits-list
   Components: .credits-grid, .credits-column, .credits-header,
               .credits-group, .credits-rows, .credit
   ============================================================ */
.credits-list {
  padding: 120px 0 140px;
  position: relative;
}

.credits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .credits-grid {
    grid-template-columns: 1fr;
    gap: 96px;
  }
}

/* ---- Column header ---- */
.credits-column .credits-header {
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.credits-column .credits-header h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.credits-column .credits-header .role {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-bright);
}
.credits-column .credits-header .imdb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
  width: fit-content;
}
.credits-column .credits-header .imdb-link:hover {
  color: var(--green-bright);
  border-color: var(--green-bright);
}
.credits-column .credits-header .imdb-link .arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
}
.credits-column .credits-header .imdb-link:hover .arrow {
  transform: translate(2px, -2px);
}

/* ---- Type group ---- */
.credits-group {
  margin-bottom: 56px;
}
.credits-group:last-child {
  margin-bottom: 0;
}
.credits-group .section-label {
  margin-bottom: 24px;
}

/* ---- Credit rows ---- */
.credits-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.credits-rows .credit {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.credits-rows .credit:last-child {
  border-bottom: 1px solid var(--line);
}

.credits-rows .year {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--green-bright);
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.credits-rows .entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.credits-rows .entry .title {
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.credits-rows .entry .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-size: 13px;
  line-height: 1.45;
}
.credits-rows .entry .meta .role-text {
  color: var(--soft);
}
.credits-rows .entry .meta .studio {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- Footnote below the list ---- */
.credits-note {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.credits-note p {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.6;
  max-width: 56ch;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* ---- Tighter rhythm on small screens ---- */
@media (max-width: 600px) {
  .credits-rows .credit {
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 16px 0;
  }
  .credits-list {
    padding: 80px 0 100px;
  }
}