/* ==========================================================================
   LIGHT SUITE — Bishal Nneupane, video editor
   ==========================================================================
   The post-production room, daylit.

   Warm paper ground, vermilion accent, and the NLE vernacular (timecode,
   REC, LOG -> Rec.709, track codes) kept as real interface chrome instead
   of dark-room decoration.

   Faces:  Bricolage Grotesque  display
           Instrument Sans      body
           Instrument Serif     one italic word, for contrast
           JetBrains Mono       timecode and data

   Every grid track in this file has a zero floor (minmax(0, 1fr)). A bare
   1fr takes its minimum from content, which is how a single unbreakable
   word or a fixed-width panel pushes a phone layout sideways.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Ground and surfaces */
  --paper: #FAF7F2;
  --paper-2: #F3EEE6;
  --surface: #FFFFFF;
  --surface-2: #FBF8F4;

  /* Ink */
  --ink: #17130F;
  --ink-2: #5F564E;
  --ink-3: #8E857B;

  /* Lines */
  --line: #E8E1D7;
  --line-2: #D9D0C3;

  /* Accent: the render/export orange out of every NLE */
  --flare: #FF4D17;
  --flare-2: #FF8A3D;
  --flare-deep: #D4360C;
  --flare-wash: #FFEFE8;

  /* Dark anchor, used sparingly: reel chrome, final CTA, footer */
  --tape: #16130F;
  --tape-2: #221D18;
  --tape-line: rgba(255, 255, 255, 0.12);
  --tape-ink: #F5F0E8;
  --tape-ink-2: #A9A099;

  /* Type */
  --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  /* Depth. Warm-tinted, because a grey shadow on warm paper reads dirty. */
  --shadow-xs: 0 1px 2px rgba(23, 19, 15, 0.05);
  --shadow-sm: 0 2px 4px rgba(23, 19, 15, 0.04), 0 6px 16px -6px rgba(23, 19, 15, 0.08);
  --shadow-md: 0 4px 10px rgba(23, 19, 15, 0.05), 0 18px 40px -16px rgba(23, 19, 15, 0.14);
  --shadow-lg: 0 8px 20px rgba(23, 19, 15, 0.06), 0 36px 80px -24px rgba(23, 19, 15, 0.20);
  --shadow-flare: 0 12px 32px -10px rgba(255, 77, 23, 0.45);

  /* Rhythm */
  --container-max: 1240px;
  --gutter: 24px;
  --section-y: clamp(60px, 7.2vw, 108px);

  --transition-fast: 160ms cubic-bezier(0.3, 0.8, 0.4, 1);
  --transition: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Compatibility aliases. Older rules and player.css reach for these. */
  --accent: var(--flare);
  --border: var(--line);
  --edge: var(--line);
  --edge-2: var(--line-2);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --panel-3: var(--paper-2);
  --muted: var(--ink-2);
  --dim: var(--ink-3);
  --text-white: var(--ink);
  --text-muted: var(--ink-2);
  --gain: var(--flare);
  --gain-hi: var(--flare-deep);
  --gain-dim: rgba(255, 77, 23, 0.22);
  --gain-glow: rgba(255, 77, 23, 0.16);
  --log: #9AA3AE;
  --code-bg: var(--paper-2);
  --header-bg: rgba(250, 247, 242, 0.82);
  --hairline-top: rgba(255, 255, 255, 0.7);
  --lift: var(--shadow-md);
  --logo-filter: none;
  --display-width: 100;
}

/* The toggle still works. Light is simply the default now. */
:root[data-theme="dark"] {
  --paper: #100E0C;
  --paper-2: #171310;
  --surface: #1A1613;
  --surface-2: #211C18;

  --ink: #F7F2EA;
  --ink-2: #B3A99F;
  --ink-3: #8A8076;

  --line: #2C2521;
  --line-2: #3A322C;

  --flare: #FF6A33;
  --flare-2: #FFA05C;
  --flare-deep: #FF8A4F;
  --flare-wash: #2A1A12;

  --tape: #0B0908;
  --tape-2: #171310;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 36px 80px -24px rgba(0, 0, 0, 0.7);

  --header-bg: rgba(16, 14, 12, 0.82);
  --hairline-top: rgba(255, 255, 255, 0.06);
  --log: #6E7680;
  --logo-filter: invert(1) brightness(1.6);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1;
}

img,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img,
video { height: auto; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

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

ul, ol { list-style: none; }

table { border-collapse: collapse; }

::selection {
  background: var(--flare);
  color: #FFF;
}

:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The old build ran a film-grain overlay. Daylight does not need one. */
.film-grain { display: none; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus { top: 16px; }

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

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "wdth" 100;
}

p { text-wrap: pretty; }

strong { font-weight: 600; color: var(--ink); }

/* The eyebrow. Mono because on this site the small type is instrument
   chrome, and instruments have always been monospaced. */
.mono-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flare-deep);
  margin-bottom: 14px;
}

.mono-tag::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.section-head .mono-tag::before { display: none; }

.section-title {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: center;
}

.section-head .section-subtitle {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              color var(--transition-fast);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--flare);
  color: #FFFFFF;
  box-shadow: var(--shadow-flare);
}

.btn-primary:hover {
  background: var(--flare-deep);
  box-shadow: 0 16px 40px -10px rgba(255, 77, 23, 0.55);
}

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
}

.btn-outline:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn-sm {
  padding: 11px 18px;
  font-size: 0.84rem;
}

/* The old dark build glowed. Here the primary button already carries a
   flare shadow, so this is a no-op kept for markup compatibility. */
.btn-glow { box-shadow: var(--shadow-flare); }

.btn-play-triangle {
  font-size: 0.62rem;
  transform: translateX(1px);
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The name yields before the rail does. Truncating a wordmark beats
   pushing the page sideways. */
.brand > div { min-width: 0; }

.brand-symbol {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.brand-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-role {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.header-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-width: 0;
}

.live-beacon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
}

.beacon-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #17B26A;
  box-shadow: 0 0 0 3px rgba(23, 178, 106, 0.18);
  animation: beacon 2.4s ease-in-out infinite;
}

@keyframes beacon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.theme-toggle {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover { color: var(--ink); border-color: var(--line-2); }
.theme-toggle svg { width: 17px; height: 17px; }

.icon-sun { display: none; }
.icon-moon { display: block; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------------
   Centred, because the reference sites are, and because a single column
   cannot be pushed sideways by a fixed-width neighbour. */

.hero-section {
  position: relative;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(40px, 5vw, 64px);
  overflow: hidden;
}

/* Ambient warmth behind the headline. Two soft washes, no hard edges. */
.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.55;
  z-index: 0;
}

.hero-section::before {
  width: 620px;
  height: 620px;
  top: -280px;
  left: 50%;
  transform: translateX(-58%);
  background: radial-gradient(circle, rgba(255, 138, 61, 0.34), transparent 68%);
}

.hero-section::after {
  width: 520px;
  height: 520px;
  top: 40px;
  right: -180px;
  background: radial-gradient(circle, rgba(255, 77, 23, 0.16), transparent 70%);
}

.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

.hero-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.hero-eyebrow-row .mono-tag { margin-bottom: 0; }

.hero-chip-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.chip-star { color: var(--flare); font-size: 0.7rem; }

.hero-title {
  font-size: clamp(2.5rem, 7.4vw, 5.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
  margin-bottom: 24px;
  /* A single long word at display size is the classic phone-overflow
     culprit. Let it break rather than push the page. */
  overflow-wrap: break-word;
}

/* The one serif in the build, italic, on the word the whole page is
   about. Borrowed from the reference shots, spent exactly once. */
.hero-title .accent-text {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--flare);
  /* Serif italics sit optically small next to a heavy grotesque. */
  font-size: 1.08em;
}

.hero-lead {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

/* --- The showreel panel ---------------------------------------------------
   One wide 16:9 slab under the headline, dark so the frame reads as a
   monitor on a bright page. */

.hero-reel-wrapper {
  position: relative;
  max-width: 1080px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  min-width: 0;
}

.hero-ambient-glow {
  position: absolute;
  inset: 8% 6% -6%;
  background: radial-gradient(ellipse at center, rgba(255, 77, 23, 0.30), transparent 68%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.hero-reel-card {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tape);
  border: 1px solid var(--tape-line);
  box-shadow: var(--shadow-lg);
}

/* The monitor's top rail: REC state, timecode, grade readout, audio. */
.reel-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--tape-2);
  border-bottom: 1px solid var(--tape-line);
  min-width: 0;
}

.reel-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.rec-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #FF3B30;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.8);
  animation: beacon 1.6s ease-in-out infinite;
}

.rec-label,
.reel-spec-tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rec-label { color: #FF7A6E; font-weight: 500; }
.reel-spec-tag { color: var(--tape-ink-2); }

.reel-timecode-hud {
  flex: none;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255, 77, 23, 0.12);
  border: 1px solid rgba(255, 138, 61, 0.32);
}

.hud-timecode {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #FFB080;
  white-space: nowrap;
}

.reel-controls-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.reel-grade-readout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.grade-from { color: var(--log); }
.grade-arrow { color: var(--tape-ink-2); }
.grade-to { color: var(--flare-2); }

/* Audio button sits on dark chrome, so it opts out of the light outline. */
.reel-audio-btn.btn-outline {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--tape-ink);
  box-shadow: none;
  padding: 8px 14px;
  font-size: 0.74rem;
}

.reel-audio-btn.btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.eq-visualizer {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.eq-bar {
  width: 2px;
  background: var(--flare-2);
  border-radius: 1px;
  animation: eq 900ms ease-in-out infinite;
}

.eq-bar:nth-child(1) { height: 40%; animation-delay: 0ms; }
.eq-bar:nth-child(2) { height: 90%; animation-delay: 120ms; }
.eq-bar:nth-child(3) { height: 60%; animation-delay: 240ms; }
.eq-bar:nth-child(4) { height: 100%; animation-delay: 360ms; }

@keyframes eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.reel-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}

.reel-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The signature: the frame lands flat and ungraded, then resolves to
     Rec.709 while the readout above it names the change. */
  filter: saturate(0.32) contrast(0.86) brightness(1.06);
  transition: filter 1900ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.graded .reel-video-wrap video { filter: none; }

/* Capability chips, overlaid on the frame rather than floating outside
   it, so they can never widen the page. */
.reel-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  /* Dark, not light. These sit over whatever the frame happens to be,
     and a white scrim disappears against a bright sky. */
  background: rgba(18, 14, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

.reel-chip b {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-2);
}

.reel-chip-1 { top: 16%; left: 20px; }
.reel-chip-2 { bottom: 18%; left: 20px; }
.reel-chip-3 { top: 16%; right: 20px; }
.reel-chip-4 { bottom: 18%; right: 20px; }

.reel-play-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%);
  opacity: 0;
  transition: opacity var(--transition);
}

.reel-video-wrap:hover .reel-play-overlay,
.reel-video-wrap:focus-visible .reel-play-overlay { opacity: 1; }

.play-circle-glow {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.play-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--flare);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  padding-left: 4px;
  box-shadow: var(--shadow-flare);
}

.reel-overlay-text {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   8. FILMSTRIP — the signature
   --------------------------------------------------------------------------
   An endless horizontal run of 9:16 cuts, framed by sprocket perforations
   and pinned by a playhead with a running timecode. It is the one place
   the page spends its boldness, and it shows the actual product. */

.filmstrip {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  padding-block: 26px;
  background: var(--tape);
  overflow: hidden;
}

/* Perforations. Repeating gradient, not 40 elements. */
.filmstrip::before,
.filmstrip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 12px,
    rgba(250, 247, 242, 0.82) 12px 26px,
    transparent 26px 38px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  z-index: 3;
  pointer-events: none;
}

.filmstrip::before { top: 6px; }
.filmstrip::after { bottom: 6px; }

.filmstrip-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: filmroll 46s linear infinite;
}

.filmstrip:hover .filmstrip-track { animation-play-state: paused; }

@keyframes filmroll {
  from { transform: translateX(0); }
  /* Two identical runs, so half a cycle lands seamlessly. */
  to { transform: translateX(-50%); }
}

.filmstrip-cell {
  position: relative;
  flex: none;
  width: 168px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
}

.filmstrip-cell:hover {
  transform: translateY(-6px);
  border-color: var(--flare);
}

.filmstrip-cell img,
.filmstrip-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filmstrip-cell-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filmstrip-cell-play {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-size: 0.52rem;
  padding-left: 2px;
}

/* Playhead: a vermilion line across the strip with the timecode riding it. */
.filmstrip-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  width: 2px;
  background: var(--flare);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 77, 23, 0.9);
}

.filmstrip-playhead span {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--flare);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. CREDIBILITY STRIP
   -------------------------------------------------------------------------- */

.cred-strip {
  overflow: hidden;
  padding-block: 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.cred-marquee {
  display: flex;
  width: max-content;
  animation: filmroll 40s linear infinite;
}

.cred-strip:hover .cred-marquee { animation-play-state: paused; }

.cred-run {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
}

.cred-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.cred-item::before {
  content: "✦";
  color: var(--flare);
  margin-right: 8px;
  font-size: 0.62rem;
}

/* --------------------------------------------------------------------------
   10. CLIENT LOGOS
   -------------------------------------------------------------------------- */

.client-logos { padding-block: 44px; }

.client-logos-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}

.client-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 44px;
}

.client-logo {
  height: 26px;
  width: auto;
  opacity: 0.55;
  filter: var(--logo-filter);
  transition: opacity var(--transition-fast);
}

.client-logo:hover { opacity: 1; }

.client-logo-text {
  height: auto;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   11. STATS BAND
   -------------------------------------------------------------------------- */

.stats-band {
  padding-block: clamp(44px, 5vw, 68px);
  background: var(--paper);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat-cell {
  background: var(--surface);
  padding: 30px 26px;
  min-width: 0;
}

.stat-cell-figure {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--flare);
  margin-bottom: 8px;
}

.stat-cell-label {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.stat-cell-note {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   12. CASE STUDY
   -------------------------------------------------------------------------- */

.case-study-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px);
  padding: clamp(28px, 3.4vw, 48px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.case-study-content { min-width: 0; }

.case-study-header { margin-bottom: 22px; }

.case-study-client {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--flare-wash);
  color: var(--flare-deep);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.case-study-title {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.case-study-bullets {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.case-study-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.case-study-bullets li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--flare);
}

.case-study-quote {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--flare-wash);
  border-left: 3px solid var(--flare);
}

.case-study-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 10px;
}

.case-study-quote footer {
  font-size: 0.82rem;
  color: var(--ink-2);
}

.case-study-visuals {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.case-study-media-wrap {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.case-study-media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 10px;
}

.stat-box {
  padding: 16px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: center;
  min-width: 0;
}

.stat-figure {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--flare);
  line-height: 1.1;
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 3px;
}

.stat-note {
  font-size: 0.7rem;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   13. TESTIMONIALS
   -------------------------------------------------------------------------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.testimonial-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.testimonial-quote {
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.52;
  color: var(--ink);
  margin-bottom: 18px;
}

.testimonial-quote::before { content: "“"; color: var(--flare); }
.testimonial-quote::after { content: "”"; color: var(--flare); }

.testimonial-meta { display: grid; gap: 2px; }
.testimonial-name { font-weight: 600; font-size: 0.92rem; }
.testimonial-role { font-size: 0.8rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   14. WORK GRID
   -------------------------------------------------------------------------- */

.filter-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
}

.filter-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: all var(--transition-fast);
}

.filter-btn:hover { border-color: var(--line-2); color: var(--ink); }

.filter-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}

.grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-3);
  padding: 48px 0;
}

.project-card {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-2);
}

.card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.project-card.is-vertical .card-media { aspect-ratio: 4 / 5; }

.card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-badge,
.card-duration {
  position: absolute;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.card-badge { top: 12px; left: 12px; }
.card-duration { top: 12px; right: 12px; }

.card-content {
  display: block;
  padding: 22px;
}

.card-client {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-deep);
  margin-bottom: 8px;
}

.card-title {
  display: block;
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.2;
  margin-bottom: 7px;
}

.card-role {
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 16px;
}

.card-metric-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.metric-val {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
}

.metric-cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--flare);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. BEFORE / AFTER MONITOR
   -------------------------------------------------------------------------- */

.davinci-monitor-suite {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.monitor-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 13px 20px;
  background: var(--tape);
  border-bottom: 1px solid var(--tape-line);
}

.monitor-status-left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.monitor-rec-dot {
  color: #FF3B30;
  font-size: 0.6rem;
  flex: none;
}

.monitor-scope-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--tape-ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-meta-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scope-tag {
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--tape-line);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--tape-ink-2);
  white-space: nowrap;
}

.monitor-toggles-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.monitor-buttons-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
}

.btn-scope-pill {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.btn-scope-pill:hover { border-color: var(--line-2); color: var(--ink); }

.btn-scope-pill.active {
  background: var(--flare);
  border-color: var(--flare);
  color: #FFFFFF;
}

.monitor-tip {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.before-after-container {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(22px, 2.6vw, 36px);
  align-items: center;
}

.slider-viewbox {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  min-width: 0;
}

.slider-img,
.slider-img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-img-after { clip-path: inset(0 0 0 50%); }

.slider-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #FFFFFF;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  box-shadow: var(--shadow-md);
}

.slider-labels {
  position: absolute;
  inset: auto 14px 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  z-index: 5;
  pointer-events: none;
}

.slider-badge {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.slider-badge.accent { background: var(--flare); }

.before-after-info { min-width: 0; }

.before-after-info h3 {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.before-after-lead {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 18px;
}

.feature-list {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.feature-item {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--ink-2);
}

.feature-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--flare);
}

/* The 5-layer timeline is a second beat inside the same section, so it
   gets section-sized air above it without being its own <section>. */
/* --------------------------------------------------------------------------
   17. NLE TIMELINE
   -------------------------------------------------------------------------- */

.nle-timeline-interface {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tape);
  border: 1px solid var(--tape-line);
  box-shadow: var(--shadow-md);
}

.nle-timeline-ruler {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 11px 18px;
  background: var(--tape-2);
  border-bottom: 1px solid var(--tape-line);
  overflow: hidden;
}

.ruler-tc {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--tape-ink-2);
  white-space: nowrap;
}

.nle-tracks-stack { display: grid; }

.nle-track-lane {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  border-bottom: 1px solid var(--tape-line);
}

.nle-track-lane:last-child { border-bottom: none; }

.nle-track-control-block {
  padding: 14px 14px;
  background: var(--tape-2);
  border-right: 1px solid var(--tape-line);
  min-width: 0;
}

.nle-track-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  min-width: 0;
}

.nle-track-code {
  flex: none;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--tape-ink);
}

.nle-track-type {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--tape-ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nle-track-switches { display: flex; gap: 5px; }

.sw-btn {
  width: 21px;
  height: 21px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--tape-ink-2);
}

.sw-active { background: rgba(255, 77, 23, 0.3); color: #FFC4A8; }
.sw-lock { font-size: 0.5rem; }

.nle-track-lane-body {
  padding: 12px;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Each lane gets its clip in its own hue, the way a real timeline
   colour-codes tracks. */
.nle-clip-block {
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 3px solid var(--clip-hue, var(--flare));
  background: color-mix(in srgb, var(--clip-hue, var(--flare)) 16%, transparent);
}

.track-purple { --clip-hue: #A78BFA; }
.track-blue   { --clip-hue: #60A5FA; }
.track-amber  { --clip-hue: #FF8A3D; }
.track-emerald{ --clip-hue: #34D399; }
.track-cyan   { --clip-hue: #22D3EE; }

.nle-clip-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clip-hue, var(--flare));
  margin-bottom: 5px;
}

.nle-clip-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--tape-ink-2);
}

/* --------------------------------------------------------------------------
   18. COMPARISON TABLE
   -------------------------------------------------------------------------- */

.compare-wrap {
  /* A table cannot shrink past its content, so it scrolls in its own box
     rather than pushing the whole page sideways on a phone. */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.compare {
  width: 100%;
  min-width: 580px;
  text-align: left;
}

.compare th,
.compare td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.9rem;
  line-height: 1.5;
}

.compare thead th {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
}

.compare thead th.compare-mine { color: var(--flare-deep); }

.compare tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: none; }

.compare-mine { color: var(--ink); font-weight: 500; }
.compare-theirs { color: var(--ink-3); }

td.compare-mine { background: var(--flare-wash); }

/* --------------------------------------------------------------------------
   19. WORKFLOW AND SLA
   -------------------------------------------------------------------------- */

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px;
}

.workflow-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  min-width: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}

.workflow-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.workflow-num {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--flare);
  opacity: 0.28;
  margin-bottom: 14px;
}

.workflow-card h4 {
  font-size: 1.05rem;
  letter-spacing: -0.028em;
  margin-bottom: 8px;
}

.workflow-card p {
  font-size: 0.87rem;
  line-height: 1.58;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   20. PRICING
   -------------------------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 20px;
  align-items: start;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.pricing-card.highlight {
  background: var(--tape);
  border-color: var(--tape);
  box-shadow: var(--shadow-lg);
}

.pricing-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--flare-wash);
  color: var(--flare-deep);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-card.highlight .pricing-tag {
  background: var(--flare);
  color: #FFFFFF;
}

.pricing-name {
  font-size: 1.24rem;
  letter-spacing: -0.03em;
  margin-bottom: 5px;
  padding-right: 90px;
}

.pricing-subtitle {
  font-size: 0.84rem;
  color: var(--ink-3);
  margin-bottom: 20px;
}

.pricing-rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.rate-figure {
  font-family: var(--display);
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--flare);
}

.rate-unit {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pricing-desc {
  font-size: 0.88rem;
  line-height: 1.58;
  color: var(--ink-2);
  margin-bottom: 20px;
}

.pricing-features {
  display: grid;
  gap: 11px;
  margin-bottom: 26px;
  flex: 1;
}

.pricing-features li {
  position: relative;
  padding-left: 26px;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--flare);
  font-weight: 700;
  font-size: 0.82rem;
}

/* The highlighted tier sits on the dark anchor, so its type inverts. */
.pricing-card.highlight .pricing-name,
.pricing-card.highlight .pricing-features li { color: var(--tape-ink); }
.pricing-card.highlight .pricing-subtitle,
.pricing-card.highlight .pricing-desc { color: var(--tape-ink-2); }
.pricing-card.highlight .rate-figure { color: var(--flare-2); }
.pricing-card.highlight .rate-unit { color: var(--tape-ink-2); }
.pricing-card.highlight .pricing-rate { border-bottom-color: var(--tape-line); }
.pricing-card.highlight .pricing-features li::before { color: var(--flare-2); }

/* --------------------------------------------------------------------------
   21. FAQ
   -------------------------------------------------------------------------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.faq-intro { min-width: 0; }
.faq-intro .section-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.faq-cta { margin-top: 6px; }

.faq-list { display: grid; gap: 10px; min-width: 0; }

.faq-item {
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item[open] {
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.42;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-2);
  transition: background var(--transition-fast);
}

.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.faq-mark::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq-mark::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-mark { background: var(--flare); }
.faq-item[open] .faq-mark::before,
.faq-item[open] .faq-mark::after { background: #FFFFFF; }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a {
  padding: 0 22px 21px;
  font-size: 0.91rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   22. FINAL CTA
   -------------------------------------------------------------------------- */

.final-cta {
  padding-inline: var(--gutter);
  padding-block: clamp(20px, 3vw, 40px);
}

.final-cta-inner {
  position: relative;
  overflow: hidden;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 92px) clamp(24px, 4vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--tape);
  text-align: center;
}

.final-cta-inner::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 23, 0.4), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}

.final-cta-inner > * { position: relative; z-index: 1; }

.final-cta-inner .mono-tag { color: var(--flare-2); }

.final-cta-title {
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--tape-ink);
  text-wrap: balance;
  margin-bottom: 16px;
}

.final-cta-body {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--tape-ink-2);
  max-width: 56ch;
  margin: 0 auto 30px;
}

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.final-cta-actions .btn-outline {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--tape-ink);
  box-shadow: none;
}

.final-cta-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   23. CONTACT
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.contact-info { min-width: 0; }

.contact-lead {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin-bottom: 26px;
  max-width: 46ch;
}

.contact-quick-links { display: grid; gap: 10px; }

.quick-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: all var(--transition-fast);
  min-width: 0;
  overflow-wrap: anywhere;
}

.quick-link-item::before {
  content: "→";
  color: var(--flare);
  flex: none;
  font-weight: 600;
}

.quick-link-item:hover {
  color: var(--ink);
  border-color: var(--line-2);
  transform: translateX(3px);
}

.form-box {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  min-width: 0;
}

.form-group { margin-bottom: 17px; }

.form-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-size: 0.94rem;
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder { color: var(--ink-3); }

.form-control:focus {
  outline: none;
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(255, 77, 23, 0.14);
}

textarea.form-control { min-height: 118px; resize: vertical; }

select.form-control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.form-submit { width: 100%; margin-top: 6px; }

.form-status {
  margin-top: 14px;
  font-size: 0.87rem;
  line-height: 1.5;
  min-height: 1.2em;
}

.form-status.success { color: #17803D; }
.form-status.error { color: #C0341A; }

/* --------------------------------------------------------------------------
   24. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(48px, 6vw, 76px) 32px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.footer-brand-col { min-width: 0; }
.footer-brand-col .brand-symbol { margin-bottom: 16px; }

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34ch;
  margin-bottom: 16px;
}

.footer-col { min-width: 0; }

.footer-col-title {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.footer-col ul { display: grid; gap: 9px; }

.footer-col a {
  font-size: 0.89rem;
  color: var(--ink-2);
  transition: color var(--transition-fast);
  overflow-wrap: anywhere;
}

.footer-col a:hover { color: var(--flare); }

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.footer-hours { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   25. DEMO BANNER
   -------------------------------------------------------------------------- */

.demo-banner {
  padding: 11px 20px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
}

.demo-banner strong { color: var(--flare-2); }

/* --------------------------------------------------------------------------
   26. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .case-study-card,
  .before-after-container,
  .contact-grid,
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-study-media-wrap { max-height: 520px; }

  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .footer-brand-col { grid-column: 1 / -1; }

  /* The header rail runs out of room here, not at phone width: brand
     plus five links plus the beacon plus the button need about 1030px.
     Below that the links move into a drawer.

     The drawer hangs off the header itself rather than off the viewport.
     A fixed `top` was wrong whenever the header was not at y=0, which is
     every visit that still has the demo banner above it. */
  #primaryNav {
    position: static;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px var(--gutter) 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);

    /* A phone in landscape has very little height. The drawer scrolls
       rather than running off the bottom with FAQ unreachable. */
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Closed: off-screen AND out of the tab order. Transform alone left
       five invisible links that keyboard focus still walked through. */
    transform: translateY(-140%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition), visibility 0s linear 320ms;
  }

  #primaryNav.is-open .nav-links {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--transition), visibility 0s;
  }

  .nav-links a { padding: 13px 14px; font-size: 1rem; }

  .nav-toggle { display: flex; }

  /* Scoped to the header. The footer's beacon has room and should stay. */
  .header-status .live-beacon { display: none; }
}

@media (max-width: 900px) {
  /* The chips are lovely at desk width and clutter at phone width. */
  .reel-chip { display: none; }
}

@media (max-width: 860px) {
  .nle-track-lane { grid-template-columns: minmax(0, 1fr); }

  .nle-track-control-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid var(--tape-line);
    padding: 10px 14px;
  }

  .nle-track-head-row { margin-bottom: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .brand-role { display: none; }

  /* The toggle stays in the rail at every width. Hiding it here left
     phone visitors with no way to reach dark at all, and it costs 38px
     that the rail still has once the role line and beacon are gone. */
  .theme-toggle { width: 36px; height: 36px; }

  .hero-title {
    font-size: clamp(2.05rem, 8.8vw, 2.9rem);
    letter-spacing: -0.035em;
  }

  .hero-actions .btn,
  .final-cta-actions .btn { width: 100%; }

  .reel-header-bar { justify-content: center; }

  .reel-grade-readout { display: none; }

  .filmstrip-cell { width: 132px; }

  .stats-row { grid-template-columns: minmax(0, 1fr); }

  .monitor-tip { display: none; }

  .pricing-name { padding-right: 0; }

  /* The card is a column flexbox, so an inline-block badge still gets
     stretched. It has to opt out of the cross-axis stretch. */
  .pricing-tag {
    position: static;
    align-self: flex-start;
    margin-bottom: 14px;
  }

  .footer-top { grid-template-columns: minmax(0, 1fr); }

  .footer-content { justify-content: center; text-align: center; }
}

@media (max-width: 430px) {
  /* At this width the symbol IS the wordmark. The name block goes, the
     mark stays: .brand > div would have taken both. */
  .brand > div:not(.brand-symbol) { display: none; }

  .nav-wrap { gap: 10px; }
  .header-status { gap: 6px; }
  .header-status .btn-sm { padding: 10px 13px; font-size: 0.78rem; }
  .theme-toggle { width: 34px; height: 34px; }
  .nav-toggle { width: 36px; height: 36px; padding: 10px 8px; }

  .filmstrip-cell { width: 118px; }
}

/* --------------------------------------------------------------------------
   27. MOTION PREFERENCES
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .filmstrip-track,
  .cred-marquee { animation: none; }

  /* The grade still resolves, it just does not perform. */
  .reel-video-wrap video { filter: none; }

  .btn:hover,
  .project-card:hover,
  .workflow-card:hover,
  .pricing-card:hover,
  .filmstrip-cell:hover { transform: none; }
}

@media print {
  .site-header,
  .filmstrip,
  .cred-strip,
  .video-modal { display: none; }
}