/* =========================================================================
   Valley Films — Marketing Site Styles
   Layered on top of colors_and_type.css
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--vf-night);
  color: white;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; cursor: pointer; }

/* ===== Custom cursor (toggleable via tweak) ===== */
body.has-custom-cursor, body.has-custom-cursor * { cursor: none !important; }
.vf-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--vf-blue-500);
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 220ms var(--ease-out), height 220ms var(--ease-out), background 220ms;
  display: none;
}
.vf-cursor::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 220ms;
}
.vf-cursor.is-hover { width: 88px; height: 88px; background: var(--vf-blue); }
.vf-cursor.is-hover::after { opacity: 1; }
body.has-custom-cursor .vf-cursor { display: block; }

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: rgba(7,8,12,0.28);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 220ms;
}
/* Liquid-glass treatment used across all films + rentals light pages. The
   translucent gradient lets the 20px backdrop-blur read as a frosted band
   over whatever sits underneath (light page bg or rentals hero photo). An
   inner highlight + soft shadow keep the nav floating off the surface. */
.nav.is-light {
  background:
    linear-gradient(180deg, rgba(247,248,250,0.74) 0%, rgba(247,248,250,0.58) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(10,15,26,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 6px 20px rgba(10,15,26,0.06);
}
.nav .brand {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 6px 12px;
  margin: -6px -12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
}
/* Logo height is shared between Films and Rentals navs — keep them
   matched so the two sub-brands feel balanced when seen back-to-back.
   Previously had an .is-rentals override at 28px which made the
   Rentals wordmark visibly larger than Films; standardised to 27px
   so both sides occupy the same vertical space. */
.nav .brand-logo {
  height: 27px;
  width: auto;
  display: block;
}

/* Generic sub-hero — shared treatment used at the top of any non-home
   page across all three sub-brands (Films, Rentals, Games). Mirrors
   the .rentals-subhero rules so /rentals/about and /contact and /emails
   etc. share visual rhythm. Eyebrow chip + italic-blue emphasis word
   + 60ch lead paragraph. Use the .subhero class on Films pages; the
   older .rentals-subhero class (with identical styles in rentals.css)
   stays in place for the Rentals pages that already use it. */
.subhero {
  padding: 140px 0 48px;
  position: relative;
}
.subhero h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--vf-ink);
  text-wrap: balance;
  max-width: 18ch;
  margin: 12px 0 0;
}
.subhero h1 em {
  color: var(--vf-blue);
  font-style: italic;
  font-weight: 500;
}
.subhero .lead {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--vf-ink-2);
  max-width: 60ch;
}
.subhero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}
.subhero .eyebrow .idx {
  color: var(--vf-blue);
  background: rgba(74, 124, 255, 0.16);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .subhero { padding: 110px 0 32px; }
  .subhero h1 { font-size: clamp(36px, 9vw, 56px); }
  .subhero .lead { font-size: 15.5px; }
}

/* When the contact section follows immediately after a subhero, drop
   its 140px top padding so the two flow naturally. Mirrors the
   .contact.rentals-contact override in rentals.css. */
.subhero + .contact { padding-top: 32px; }
.subhero + .contact .meta-block { margin-top: 0; }
/* Brand-mark fallback removed — hamburger nav frees enough horizontal
   space that the full wordmark fits on phones. See "MOBILE NAV" below. */

.nav .menu {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px;
}
.nav.is-light .menu {
  background: rgba(10,15,26,0.06);
  border-color: rgba(10,15,26,0.10);
}
.nav .menu a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.005em;
  transition: all 200ms;
}
.nav .menu a:hover { color: white; }
.nav .menu a.active {
  background: rgba(255,255,255,0.12);
  color: white;
}
.nav.is-light .menu a { color: rgba(10,15,26,0.92); }
.nav.is-light .menu a:hover { color: var(--vf-ink); }
.nav.is-light .menu a.active {
  background: white;
  color: var(--vf-ink);
  box-shadow: 0 1px 3px rgba(10,15,26,0.08);
}

/* The Contact CTA sits inside the pill — a softer tinted-blue chip that reads
   as a peer to the nav links but with enough warmth to draw the eye. */
.nav .menu .menu-cta {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  margin-left: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(74,124,255,0.18);
  color: var(--vf-blue-300, #9CB7FF);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.nav .menu .menu-cta:hover {
  background: var(--vf-blue);
  color: white;
}
.nav .menu .menu-cta.active {
  background: var(--vf-blue);
  color: white;
}
.nav.is-light .menu .menu-cta {
  background: rgba(74,124,255,0.12);
  color: var(--vf-blue);
}
.nav.is-light .menu .menu-cta:hover,
.nav.is-light .menu .menu-cta.active {
  background: var(--vf-blue);
  color: white;
}

.nav .cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--vf-blue);
  color: white;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: all 220ms var(--ease-out);
}
.nav .cta:hover { background: var(--vf-blue-500); transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.nav .cta .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #6FFFB0;
  box-shadow: 0 0 10px rgba(111,255,176,0.6);
}

/* ===================================================================
   MOBILE NAV — hamburger button + slide-down drawer (≤ 760px)
   =================================================================== */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 81; /* sits above the .menu drawer (z:79) so the X is tappable */
}
.nav.is-light .nav-burger {
  background: rgba(10,15,26,0.04);
  border-color: rgba(10,15,26,0.06);
}
.nav-burger span {
  position: absolute;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 1.5px;
  background: rgba(255,255,255,0.85);
  border-radius: 1px;
  transition: transform 240ms var(--ease-out), opacity 180ms var(--ease-out), top 240ms var(--ease-out);
}
.nav.is-light .nav-burger span { background: rgba(10,15,26,0.8); }
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 24px; }
/* Open: collapse 3 lines into an X */
.nav.is-open .nav-burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .nav-burger { display: inline-flex; }

  /* Cap brand image width so wide wordmarks can't crowd narrow screens */
  .nav .brand-logo { max-width: 56vw; }

  /* Turn the menu pill into a slide-down full-viewport drawer */
  .nav .menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 96px 24px 40px;
    gap: 6px;
    /* Solid wash so iframe/video content can never bleed through on iOS */
    background: var(--vf-night);
    border-radius: 0;
    border: 0;
    isolation: isolate;
    transform: translateY(-12px) translateZ(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    transition: transform 320ms var(--ease-out), opacity 220ms var(--ease-out), visibility 0s 320ms;
    z-index: 79; /* sits below the .nav bar (z:80) so brand + burger stay visible */
  }
  .nav.is-light .menu { background: #F7F8FA; }

  .nav.is-open .menu {
    transform: translateY(0) translateZ(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 320ms var(--ease-out), opacity 220ms var(--ease-out);
  }

  /* Bigger, vertical menu items inside the drawer */
  .nav .menu a {
    font-size: 22px;
    padding: 14px 28px;
    border-radius: 999px;
    color: rgba(255,255,255,0.85);
  }
  .nav.is-light .menu a { color: rgba(10,15,26,0.85); }
  .nav .menu a.active { background: rgba(255,255,255,0.12); color: white; }
  .nav.is-light .menu a.active { background: var(--vf-ink); color: white; box-shadow: none; }

  .nav .menu .menu-cta {
    margin: 18px 0 0;
    padding: 14px 36px;
    font-size: 17px;
  }
}

/* ===== Pages ===== */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ===== Common ===== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.eyebrow .idx {
  color: var(--vf-blue-400);
  font-weight: 700;
}
.eyebrow.dark-on { color: rgba(10,15,26,0.55); }
.eyebrow.dark-on .idx { color: var(--vf-blue); }

/* Clickable eyebrow used by the Reel hero — looks identical to the static
   eyebrow, with no hover animation. The hit area matches the visible text.
   Only reset user-agent button chrome; let .eyebrow's font properties win. */
.eyebrow-reel-link {
  border: 0;
  background: none;
  margin: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  transition: none;
}
.eyebrow-reel-link:hover,
.eyebrow-reel-link:focus { color: rgba(255,255,255,0.55); }
.eyebrow-reel-link:focus { outline: none; }
.eyebrow-reel-link:focus-visible {
  outline: 2px solid var(--vf-blue-400);
  outline-offset: 6px;
  border-radius: 2px;
}

.divider-thin { height: 1px; background: rgba(255,255,255,0.06); }

/* ===== Hero — Marquee variant (default) ===== */
.hero-marquee {
  position: relative;
  padding: 140px 0 0;
  overflow: hidden;
}
.hero-marquee .blob {
  position: absolute;
  width: 1100px; height: 1100px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, var(--vf-blue) 0%, var(--vf-blue-800) 40%, transparent 70%);
  opacity: 0.55;
  left: -300px; top: -200px;
}
.hero-marquee .blob-2 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--vf-blue-500) 0%, var(--vf-blue-900) 60%, transparent 80%);
  opacity: 0.4;
  left: auto; right: -100px; top: 100px;
}

.marquee-row {
  position: relative;
  display: flex;
  white-space: nowrap;
  font-size: clamp(80px, 13vw, 200px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 700;
  z-index: 1;
}
.marquee-row.italic { font-style: italic; font-weight: 500; color: var(--vf-blue-400); }
.marquee-track {
  display: flex;
  gap: 64px;
  animation: marquee 36s linear infinite;
  padding-right: 64px;
}
.marquee-row.r2 .marquee-track { animation-direction: reverse; animation-duration: 44s; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track .star {
  display: inline-block;
  color: var(--vf-blue-400);
  transform: translateY(-0.05em);
  font-style: normal;
}

.hero-meta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: end;
  padding: 56px 0 80px;
  z-index: 1;
}
.hero-meta .lead {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  max-width: 420px;
}
.hero-meta .lead em {
  font-style: italic;
  color: var(--vf-blue-400);
  font-weight: 500;
}
.hero-meta .stats {
  display: flex; gap: 32px;
}
.hero-meta .stat .num {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
}
.hero-meta .stat .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 6px;
}
.hero-meta .actions {
  display: flex; gap: 12px;
  justify-content: flex-end;
}

/* ===== Hero — Stacked variant ===== */
.hero-stacked {
  position: relative;
  padding: 140px 0 96px;
  overflow: hidden;
}
.hero-stacked .blob { /* shared */ }
.hero-stacked-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 72px;
  align-items: center;
  z-index: 1;
}
.hero-stacked h1 {
  font-size: clamp(64px, 9vw, 144px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero-stacked h1 em {
  font-style: italic;
  color: var(--vf-blue-400);
  font-weight: 500;
}
.hero-stacked p {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  max-width: 480px;
  margin-top: 28px;
}

.hero-stack-cards {
  position: relative;
  height: 540px;
}
.float-card {
  position: absolute;
  background: rgba(14,17,24,0.7);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px;
  padding: 16px;
  box-shadow: 0 36px 80px rgba(0,0,0,0.6);
  width: 280px;
}
.float-card .thumb {
  aspect-ratio: 4/3;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.float-card .thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4));
}
.float-card .play {
  position: absolute;
  left: 14px; bottom: 14px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.float-card .play::after {
  content: '';
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--vf-blue);
  margin-left: 2px;
}
.float-card .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 4px;
}
.float-card h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 4px 4px 8px;
}
.fc-1 { left: 0; top: 20px; transform: rotate(-3deg); }
.fc-2 { right: 0; top: 110px; width: 240px; transform: rotate(2deg); z-index: 2; }
.fc-3 { left: 60px; bottom: 0; transform: rotate(-1deg); }

/* ===== Hero — Full reel variant ===== */
.hero-reel {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
}
.hero-reel .reel-bg {
  position: absolute; inset: 0;
  /* Solid colour during normal video load — no flicker. The photo only
     surfaces if the iframe never paints (see ::before below). */
  background: var(--vf-night);
  filter: brightness(0.45);
}
.hero-reel .reel-bg::before {
  /* True-failsafe poster: invisible by default, fades in after 8s if the
     iframe is still transparent. When the video iframe paints (typical
     case) it sits in front of this layer, so the user never sees it. */
  content: '';
  position: absolute; inset: 0;
  background: url('assets/bts-camera-op.jpg') center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: hero-reel-fallback 800ms ease 8s forwards;
}
@keyframes hero-reel-fallback {
  to { opacity: 1; }
}
/* Hero reel video — iframe sized to "cover" the section regardless of
   viewport aspect ratio (mimics background-size: cover for a 16:9 source).
   pointer-events:none so clicks pass through to the content layer. */
.hero-reel .reel-bg-video {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, calc(100vh * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  display: block;
}
.hero-reel .reel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,12,0.4) 0%, transparent 30%, transparent 50%, var(--vf-night) 100%);
}
.hero-reel-content {
  position: absolute;
  left: 0; right: 0; bottom: 80px;
  padding: 0 32px;
}
.hero-reel-content .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}
.hero-reel-content h1 {
  font-size: clamp(64px, 9vw, 144px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  max-width: 1000px;
  text-wrap: balance;
}
.hero-reel-content h1 em {
  font-style: italic;
  color: var(--vf-blue-400);
  font-weight: 500;
}
.hero-reel-content .actions { display: flex; gap: 10px; padding-bottom: 12px; }
.reel-corner-meta {
  position: absolute;
  top: 100px; left: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reel-corner-meta .lbl-row { display: flex; gap: 12px; align-items: center; }
.reel-corner-meta .rec {
  width: 8px; height: 8px; border-radius: 999px;
  background: #FF3B58;
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.reel-frame-corners {
  position: absolute; inset: 32px;
  pointer-events: none;
}
.reel-frame-corners::before, .reel-frame-corners::after,
.reel-frame-corners > span:first-child, .reel-frame-corners > span:last-child {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid rgba(255,255,255,0.7);
}
.reel-frame-corners::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.reel-frame-corners::after { top: 0; right: 0; border-left: none; border-bottom: none; }
.reel-frame-corners > span:first-child { bottom: 0; left: 0; border-right: none; border-top: none; }
.reel-frame-corners > span:last-child { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ===== Buttons ===== */
.btn-pri {
  background: var(--vf-blue);
  color: white;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 220ms var(--ease-out);
}
.btn-pri:hover { background: var(--vf-blue-500); transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.btn-pri svg { width: 14px; height: 14px; }

.btn-sec {
  background: rgba(255,255,255,0.06);
  color: white;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 220ms var(--ease-out);
}
.btn-sec:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.btn-sec svg { width: 12px; height: 12px; }

.btn-ghost {
  color: white;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 220ms var(--ease-out);
}
.btn-ghost:hover { border-color: white; background: rgba(255,255,255,0.04); }

/* ===== Section heads ===== */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 96px 0 40px;
  gap: 32px;
}
.section-head .left h2 {
  font-size: clamp(40px, 5.2vw, 80px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-wrap: balance;
  margin-top: 16px;
  max-width: 800px;
}
.section-head .left h2 em {
  font-style: italic;
  color: var(--vf-blue-400);
  font-weight: 500;
}
.section-head .right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===== Work Index (FilmLaab-style numbered list) ===== */
.work-index { padding-bottom: 96px; }
.work-row {
  display: grid;
  grid-template-columns: 80px 2fr 1fr 1fr 60px;
  gap: 32px;
  padding: 28px 0;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  position: relative;
  transition: padding 320ms var(--ease-out);
}
.work-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.work-row:hover { padding-left: 24px; }
.work-row .idx {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.work-row .title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  transition: color 320ms;
}
.work-row .title em {
  font-style: italic;
  color: var(--vf-blue-400);
  font-weight: 500;
}
.work-row:hover .title { color: var(--vf-blue-400); }
.work-row .client {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.work-row .tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.work-row .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 4px 10px;
}
.work-row .arrow {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: all 320ms var(--ease-out);
  justify-self: end;
}
.work-row:hover .arrow {
  background: var(--vf-blue);
  transform: rotate(-45deg);
}
.work-row .arrow svg { width: 14px; height: 14px; transition: transform 320ms; }

/* Floating preview thumb on hover */
.work-preview {
  position: fixed;
  pointer-events: none;
  width: 360px;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 220ms, transform 220ms var(--ease-out);
  z-index: 70;
  box-shadow: 0 36px 80px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
}
.work-preview.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Work grid view (alt) — 12-col mosaic, mono num + play, client/year/duration */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 24px 0 96px;
}
.tile {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 320ms var(--ease-out);
  border: 1px solid rgba(255,255,255,0.06);
}
.tile:hover { transform: translateY(-4px); }
.tile.featured { grid-column: span 8; aspect-ratio: 16/10; }
.tile.col-8     { grid-column: span 8; aspect-ratio: 16/10; }
.tile.col-6     { grid-column: span 6; aspect-ratio: 4/3; }
.tile.col-4     { grid-column: span 4; aspect-ratio: 4/5; }
.tile.col-12    { grid-column: span 12; aspect-ratio: 21/9; }
.tile-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1200ms var(--ease-out);
}
.tile:hover .tile-bg { transform: scale(1.04); }
/* Bunny auto-generated animated preview, layered over the still image and
   faded in on hover. The img itself is loading="lazy" so previews don't all
   download up-front; once loaded, the .webp animates continuously underneath
   opacity:0 and only becomes visible when the user hovers the tile. */
.tile-bg-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms var(--ease-out), transform 1200ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.tile:hover .tile-bg-preview { opacity: 1; transform: scale(1.04); }
.tile-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,12,0.55) 0%, rgba(7,8,12,0) 38%);
  pointer-events: none;
}
.tile-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,12,0) 40%, rgba(7,8,12,0.85) 100%);
}
.tile-meta-top {
  position: absolute;
  left: 24px; right: 24px; top: 24px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.tile-meta-top .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
}
.tile-play-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(7,8,12,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  color: white;
  cursor: pointer;
  padding: 0;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.tile-play-btn svg { margin-left: 1px; }
.tile:hover .tile-play-btn { background: var(--vf-blue); border-color: var(--vf-blue); transform: scale(1.06); }
.tile-content {
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  z-index: 1;
}
.tile-content .title {
  font-family: var(--font-display, inherit);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: white;
  text-wrap: balance;
}
.tile.featured .title { font-size: clamp(28px, 3vw, 40px); }
.tile.col-12 .title { font-size: clamp(28px, 3vw, 40px); }
.tile-content .chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tile-content .chip {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10);
}
.tile-content .chip:first-child {
  background: rgba(9,94,223,0.32);
  border-color: rgba(78,163,255,0.38);
  color: rgba(255,255,255,0.98);
}

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(6, 1fr); }
  .tile.featured, .tile.col-4, .tile.col-6, .tile.col-8, .tile.col-12 {
    grid-column: span 6; aspect-ratio: 4/3;
  }
}

/* View toggle */
.view-toggle {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.view-toggle button {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.65);
  display: inline-flex; align-items: center; gap: 6px;
}
.view-toggle button svg { width: 12px; height: 12px; }
.view-toggle button.active {
  background: rgba(255,255,255,0.12);
  color: white;
}

/* Filter chips */
.filters {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}
.filter-chip {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 200ms;
}
.filter-chip.active { background: white; color: var(--vf-night); border-color: white; }
.filter-chip:hover:not(.active) { color: white; border-color: rgba(255,255,255,0.3); }

/* Ad-hoc client chip — appears when a logo in the ticker is clicked. Same
   pill geometry as the canonical four, but with a soft grey fill so it
   reads as a session-only "pinned client" rather than a permanent
   category. Shows the client name as plain text. */
.filter-chip-client {
  background: rgba(255, 255, 255, 0.10);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.filter-chip-client.active {
  background: rgba(255, 255, 255, 0.16);
  color: white;
  border-color: rgba(255, 255, 255, 0.28);
}
.filter-chip-client:hover { border-color: rgba(255, 255, 255, 0.4); }

/* ===== Marquee strip — clients ===== */
.client-strip {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.client-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  /* Motion is driven by a rAF loop in ClientStrip — see components-hero.jsx.
     A CSS animation here would fight the inline transform we set per-frame
     and produce flicker. The hover slowdown also lives in the JS so it can
     interpolate smoothly instead of snapping the duration. */
}
.client-strip-set {
  display: flex;
  gap: 80px;
  align-items: center;
  padding-right: 80px;
  flex-shrink: 0;
}
.client-strip-track .item {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.client-strip-track .item.italic {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.client-strip-track .item.logo-item {
  display: inline-flex;
  align-items: center;
  height: 64px;
}
.client-strip-track .item.logo-item img {
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  transition: opacity 220ms var(--ease-out);
}
.client-strip-track .item.logo-item.is-interactive {
  cursor: pointer;
}
.client-strip-track .item.logo-item:hover img {
  opacity: 1;
}
.client-strip-track .item.logo-item.is-interactive:focus-visible {
  outline: 2px solid var(--vf-blue-400);
  outline-offset: 4px;
  border-radius: 2px;
}
.client-strip-track .sep {
  color: var(--vf-blue-400);
  font-style: italic;
  font-weight: 500;
  flex-shrink: 0;
}

/* ===== Services accordion ===== */
.services-section {
  position: relative;
  padding-bottom: 96px;
}
.service-row {
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 320ms;
}
.service-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.service-row.is-open { background: rgba(9,94,223,0.06); }
.service-head {
  display: grid;
  grid-template-columns: 80px 2fr 1fr 60px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
}
.service-row .idx {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.service-row .name {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.service-row.is-open .name { color: var(--vf-blue-400); }
.service-row .price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-align: right;
}
.service-row .toggle {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  justify-self: end;
  position: relative;
  /* Sync the +/× rotation with the accordion's reveal curve. */
  transition: background 640ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.service-row.is-open .toggle { background: var(--vf-blue); transform: rotate(45deg); }
.service-row .toggle::before, .service-row .toggle::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 1px;
}
.service-row .toggle::before { width: 14px; height: 2px; }
.service-row .toggle::after { width: 2px; height: 14px; }
/* Grid-rows accordion: animate from `0fr` to `1fr` so the panel grows
   to the actual height of its content — no max-height guesswork, no
   clipping, and the easing curve plays out across the real reveal
   distance, which makes it feel materially smoother than max-height.
   The inner needs `min-height: 0` so the grid track can collapse. */
.service-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.service-body > .service-body-inner {
  min-height: 0;
  overflow: hidden;
  /* Fade content in slightly behind the height reveal so a fast click
     doesn't catch the inner mid-layout. */
  opacity: 0;
  transition: opacity 280ms ease 120ms;
}
.service-row.is-open .service-body { grid-template-rows: 1fr; }
.service-row.is-open .service-body > .service-body-inner { opacity: 1; }
.service-body-inner {
  padding: 0 0 36px;
  display: grid;
  grid-template-columns: 80px 2fr 1fr 60px;
  gap: 32px;
}
.service-body-inner > div:nth-child(2) {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  max-width: 600px;
}
.service-body-inner ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-body-inner ul li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-body-inner ul li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--vf-blue-400);
  flex-shrink: 0;
}

/* ===== Process band ===== */
.process-band {
  background: var(--vf-night-2);
  padding: 96px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
.process-band .blob-3 {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  filter: blur(120px);
  background: radial-gradient(circle, var(--vf-blue) 0%, transparent 70%);
  opacity: 0.15;
  right: -200px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  position: relative;
}
.process-step {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 28px;
  position: relative;
  cursor: default;
  transition: border-color 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.process-step::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--vf-blue-400);
  transition: width 420ms var(--ease-out);
}
.process-step:hover { transform: translateY(-3px); }
.process-step:hover::before { width: 38px; }
.process-step .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vf-blue-400);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  transition: color 240ms var(--ease-out), transform 320ms var(--ease-out);
}
.process-step:hover .num { transform: translateX(2px); }
.process-step h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  transition: color 240ms var(--ease-out);
}
.process-step:hover h3 { color: var(--vf-blue-400); }
.process-step p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  transition: color 240ms var(--ease-out);
}
.process-step:hover p { color: rgba(255,255,255,0.82); }
.process-step .duration {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}

/* ===== Studio split ===== */
.studio-split {
  padding: 120px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}
/* min-width: 0 stops the implicit min-content size from blowing the grid
   columns out past 1fr when the h2 has long words (documentaries etc.). */
.studio-split > * { min-width: 0; }

/* Scroll-anchor offset so #equipment / #faqs / #open-account land below the
   fixed nav bar */
#equipment, #faqs, #open-account { scroll-margin-top: 100px; }
.studio-split .imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
}
.studio-split .imgs .img {
  border-radius: 28px;
  background-size: cover;
  background-position: center;
}
.studio-split .imgs .img-tall { aspect-ratio: 3/4; }
.studio-split .imgs .img-stack { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; }
.studio-split .imgs .img-stack .img { aspect-ratio: 1; }
.studio-split h2 {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-wrap: balance;
  margin-top: 20px;
}
.studio-split h2 em {
  font-style: italic;
  color: var(--vf-blue-400);
  font-weight: 500;
}
.studio-split p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin-top: 20px;
  max-width: 480px;
}
.studio-split .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.studio-split .stat .num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-blue-400);
  line-height: 1;
}
.studio-split .stat .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Collapse studio-split to single column earlier than the rest of the
   site's mobile breakpoint — at 900–1100px the two-column layout cramps
   the heading next to the image stack on some devices. */
@media (max-width: 1100px) {
  .studio-split { grid-template-columns: 1fr; gap: 48px; padding: 80px 0; }
  .studio-split .imgs { grid-template-columns: 1fr 1fr; }
  .studio-split .stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ===== Testimonial ===== */
.testimonial {
  padding: 120px 0;
  text-align: center;
}
.testimonial .quote {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  font-style: italic;
  max-width: 1100px;
  margin: 28px auto 0;
}
.testimonial .quote em {
  font-style: italic;
  color: var(--vf-blue-400);
}
.testimonial .attribution {
  margin-top: 36px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.testimonial .attribution .name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.testimonial .attribution .role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== Principles grid ===== */
.principles { padding: 120px 0; }
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 32px;
  overflow: hidden;
  margin-top: 48px;
}
.principle {
  background: var(--vf-night);
  padding: 48px 36px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 220ms;
}
.principle:hover { background: var(--vf-night-2); }
.principle .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vf-blue-400);
  letter-spacing: 0.08em;
}
.principle h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 32px;
  text-wrap: balance;
}
.principle p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  margin-top: 16px;
}

/* ===== CTA Banner ===== */
.cta-banner {
  position: relative;
  padding: 140px 0;
  background: var(--vf-night-2);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cta-banner .blob-cta {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  filter: blur(140px);
  background: radial-gradient(circle, var(--vf-blue-700) 0%, transparent 70%);
  opacity: 0.35;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta-banner h2 {
  font-size: clamp(56px, 7vw, 120px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-wrap: balance;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  color: white;
}
.cta-banner h2 em {
  font-style: italic;
  color: var(--vf-blue-400);
  opacity: 1;
  font-weight: 500;
}
.cta-banner p {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  margin-top: 28px;
  position: relative;
}
.cta-banner .btn-white {
  background: var(--vf-blue);
  color: white;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 220ms var(--ease-out);
  position: relative;
  letter-spacing: -0.005em;
}
.cta-banner .btn-white:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(9,94,223,0.4); background: var(--vf-blue-400); }
.cta-banner .ix {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 28px;
  position: relative; z-index: 1;
}
.cta-banner .actions {
  margin-top: 40px;
  display: inline-flex;
  gap: 12px;
  position: relative; z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.cta-banner .actions > button { line-height: 1; }
.cta-banner .actions > button > svg { width: 14px; height: 14px; flex: none; }
.cta-banner .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.cta-banner .btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.32); }
.cta-banner--light .ix { color: var(--vf-ink-3, rgba(0,0,0,0.55)); }
.cta-banner--light .btn-ghost { color: var(--vf-ink); border-color: var(--vf-line); }
.cta-banner--light .btn-ghost:hover { background: rgba(0,0,0,0.04); }

/* Light variant — used on rentals page */
.cta-banner--light {
  background: var(--vf-bg);
  border-top: 1px solid var(--vf-line);
  border-bottom: 1px solid var(--vf-line);
}
.cta-banner--light .blob-cta {
  background: radial-gradient(circle, rgba(9,94,223,0.22) 0%, transparent 65%);
  opacity: 0.7;
}
.cta-banner--light h2 { color: var(--vf-ink); }
.cta-banner--light h2 em { color: var(--vf-blue); }
.cta-banner--light p { color: var(--vf-ink-2); }
.cta-banner--light .btn-white { background: var(--vf-blue); color: white; }
.cta-banner--light .btn-white:hover { background: var(--vf-blue-600); box-shadow: 0 24px 50px rgba(9,94,223,0.25); }

/* ===== Mega footer wordmark ===== */
.mega-footer {
  padding: 96px 0 32px;
  background: var(--vf-night);
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
}
.footer-cols .brand-col img { height: 28px; margin-bottom: 24px; }
.footer-cols .brand-col p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; max-width: 320px; }
.footer-cols h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.footer-cols ul {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
}
.footer-cols ul li, .footer-cols .col p {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 200ms;
}
.footer-cols ul li:hover { color: var(--vf-blue-400); }
.footer-wordmark {
  font-size: clamp(120px, 22vw, 360px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: white;
  margin: 0 -32px;
  padding: 0 32px;
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  white-space: nowrap;
  overflow: hidden;
}
.footer-wordmark em {
  font-style: italic;
  color: var(--vf-blue);
  font-weight: 500;
}
.footer-wordmark .star { color: var(--vf-blue); font-style: normal; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.footer-bottom-link {
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  transition: color 180ms;
}
.footer-bottom-link:hover { color: rgba(255,255,255,0.7); }
.footer-bottom .socials { display: flex; gap: 6px; }
.footer-bottom .socials a {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: all 220ms;
}
.footer-bottom .socials a:hover { background: var(--vf-blue); }
.footer-bottom .socials svg { width: 13px; height: 13px; }

/* ===== About page ===== */
.about-hero {
  padding: 160px 0 80px;
  position: relative;
  overflow: hidden;
}
.about-hero .blob {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  filter: blur(120px);
  background: radial-gradient(circle, var(--vf-blue-800) 0%, transparent 70%);
  opacity: 0.5;
  left: -200px; top: -300px;
  pointer-events: none;
}
.about-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.about-hero h1 {
  font-size: clamp(56px, 7vw, 120px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
  margin-top: 24px;
}
.about-hero h1 em {
  font-style: italic;
  color: var(--vf-blue-400);
  font-weight: 500;
}
.about-hero .right p {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.about-hero .right p + p { margin-top: 16px; }

.about-img-strip {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 14px;
  padding: 0 0 96px;
}
.about-img-strip .img {
  border-radius: 24px;
  background-size: cover; background-position: center;
}
.about-img-strip .img-1 { aspect-ratio: 4/5; }
.about-img-strip .img-2 { aspect-ratio: 3/2; }
.about-img-strip .img-3 { aspect-ratio: 4/5; }

.team-section { padding: 96px 0 140px; }

/* Layout: left rail + 3 portrait cards */
.team-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.team-rail { position: sticky; top: 120px; }
.rail-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
  display: inline-flex; align-items: center; gap: 10px;
}
.rail-eyebrow .idx {
  color: var(--vf-blue);
  background: var(--vf-blue-100);
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.rail-title {
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--vf-ink);
  margin-top: 22px;
  text-wrap: balance;
}
.rail-title em { font-style: italic; color: var(--vf-blue); font-weight: 500; }
.rail-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--vf-ink-2, rgba(10,15,26,0.7));
  margin-top: 22px;
  text-wrap: pretty;
}
.rail-stats {
  margin: 32px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(10,15,26,0.10);
  display: flex; flex-direction: column; gap: 12px;
}
.rail-stats > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.rail-stats dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
}
.rail-stats dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-ink);
  font-feature-settings: 'tnum' 1;
}
.rail-hint {
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
}
.rail-hint .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--vf-blue);
}

/* Stack of 3 portrait cards */
.team-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.tm-card {
  position: relative;
  background: white;
  border: 1px solid rgba(10,15,26,0.08);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform 380ms var(--ease-out),
              box-shadow 380ms var(--ease-out),
              border-color 280ms var(--ease-out);
}
.tm-card:hover,
.tm-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(9,94,223,0.22);
  box-shadow: 0 36px 70px rgba(10,15,26,0.10), 0 4px 12px rgba(10,15,26,0.04);
  outline: none;
}
.tm-card:focus-visible { box-shadow: 0 0 0 3px rgba(9,94,223,0.18), 0 36px 70px rgba(10,15,26,0.10); }

/* Photo */
.tm-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background-color: var(--vf-blue-900);
}
.tm-photo-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 700ms var(--ease-out), filter 500ms var(--ease-out);
  filter: saturate(0.92);
  z-index: 1;
}
.tm-photo-srfb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tm-card:hover .tm-photo-img { transform: scale(1.06); filter: saturate(1); }
.tm-photo-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,22,0.0) 50%, rgba(8,12,22,0.55) 100%);
  opacity: 0.85;
  transition: opacity 380ms var(--ease-out);
}
.tm-card:hover .tm-photo-shade { opacity: 1; }
.tm-idx {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  background: rgba(8,12,22,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 9px;
  border-radius: 999px;
}
.tm-open {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vf-ink);
  background: rgba(255,255,255,0.95);
  padding: 6px 10px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.tm-card:hover .tm-open,
.tm-card:focus-visible .tm-open { opacity: 1; transform: translateY(0); }

/* Body */
.tm-body {
  padding: 22px 22px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.tm-head {
  display: flex; flex-direction: column; gap: 4px;
}
.tm-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--vf-ink);
  margin: 0;
}
.tm-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-blue);
  font-weight: 700;
}

/* Reveal block — collapses smoothly when not hovered */
.tm-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ease-out), margin-top 360ms var(--ease-out), opacity 360ms var(--ease-out);
  margin-top: 0;
  opacity: 0;
}
.tm-card.is-hovered .tm-reveal,
.tm-card:focus-visible .tm-reveal {
  grid-template-rows: 1fr;
  margin-top: 18px;
  opacity: 1;
}
.tm-reveal > * { min-height: 0; }
.tm-reveal-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid rgba(10,15,26,0.08);
  transform: translateY(6px);
  opacity: 0;
  transition: transform 380ms var(--ease-out), opacity 380ms var(--ease-out);
}
.tm-card.is-hovered .tm-reveal-row { transform: translateY(0); opacity: 1; }
.tm-card.is-hovered .tm-spec { transition-delay: 80ms; }
.tm-card.is-hovered .tm-sig  { transition-delay: 140ms; }
.tm-reveal-row .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.45));
  font-weight: 700;
}
.tm-reveal-row .val {
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-ink);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.tm-spec .val { color: var(--vf-blue); }
.tm-facts {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(10,15,26,0.08);
}
.tm-facts > div {
  transform: translateY(6px);
  opacity: 0;
  transition: transform 380ms var(--ease-out), opacity 380ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.tm-card.is-hovered .tm-facts > div {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(var(--d, 0ms) + 200ms);
}
.tm-facts dt {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.45));
  font-weight: 700;
}
.tm-facts dd {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--vf-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Foot */
.tm-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(10,15,26,0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tm-loc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
}
.tm-arrow {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--vf-bg, #f4f5f7);
  color: var(--vf-ink-2, rgba(10,15,26,0.6));
  display: flex; align-items: center; justify-content: center;
  transition: background 280ms var(--ease-out), color 280ms var(--ease-out), transform 320ms var(--ease-out);
}
.tm-card:hover .tm-arrow {
  background: var(--vf-blue);
  color: white;
  transform: translateX(4px) rotate(-12deg);
}

/* Responsive */
@media (max-width: 1180px) {
  .team-layout { grid-template-columns: 1fr; gap: 48px; }
  .team-rail { position: static; }
  .rail-title { font-size: clamp(28px, 5vw, 40px); max-width: 720px; }
}
@media (max-width: 760px) {
  .team-stack { grid-template-columns: 1fr; }
  .tm-card { max-width: 480px; }
  .tm-reveal { grid-template-rows: 1fr; opacity: 1; margin-top: 18px; }
  .tm-reveal-row { transform: none; opacity: 1; }
  .tm-facts > div { transform: none; opacity: 1; }
  .tm-open { opacity: 1; transform: none; }
}

/* ===== Team modal — unchanged below ===== */

/* ===================================================================
   ABOUT PAGE — LIGHT THEME
   =================================================================== */
.about-light {
  background: var(--vf-bg);
  color: var(--vf-ink);
}
.about-light h1, .about-light h2, .about-light h3, .about-light h4, .about-light h5 {
  color: var(--vf-ink);
}
.about-light em { color: var(--vf-blue); }

/* Eyebrow override on light */
.about-light .eyebrow { color: var(--vf-ink-2); }
.about-light .eyebrow .idx {
  color: var(--vf-blue);
  background: var(--vf-blue-100);
  border-color: rgba(9,94,223,0.15);
}

/* Hero */
.about-light .about-hero {
  background: linear-gradient(180deg, var(--vf-bg) 0%, white 100%);
}
.about-light .about-hero .blob {
  background: radial-gradient(circle, rgba(9,94,223,0.18) 0%, transparent 65%);
  opacity: 0.7;
}
.about-light .about-hero h1 em { color: var(--vf-blue); font-style: italic; font-weight: 500; }
.about-light .about-hero .right p { color: var(--vf-ink-2); }

/* Principles — invert card colors */
.about-light .principles { background: white; }
.about-light .principles .section-head h2 { color: var(--vf-ink); }
.about-light .principles .section-head h2 em { color: var(--vf-blue); }
.about-light .principle {
  background: var(--vf-bg);
  border: 1px solid var(--vf-line);
}
.about-light .principle:hover { background: white; border-color: var(--vf-line-strong); }
.about-light .principle .num { color: var(--vf-blue); }
.about-light .principle h3 { color: var(--vf-ink); }
.about-light .principle p { color: var(--vf-ink-2); }

/* Team section on light */
.about-light .team-section { background: var(--vf-bg); }
.about-light .team-section .section-head h2 { color: var(--vf-ink); }
.about-light .team-section .section-head h2 em { color: var(--vf-blue); }
.about-light .team-member {
  background: white;
  border: 1px solid var(--vf-line);
  transition: border-color 220ms, transform 220ms var(--ease-out), box-shadow 220ms;
}
.about-light .team-member:hover {
  border-color: rgba(9,94,223,0.3);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(10,15,26,0.06);
}
.about-light .team-member .info .name { color: var(--vf-ink); }
.about-light .team-member .info .role { color: var(--vf-ink-3); }

/* ===== Team — hover bio peek + expand chip ===== */
.team-hint {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
}
.team-hint .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--vf-blue);
}
.about-light .team-grid { margin-top: 28px; }
.team-member {
  position: relative;
  cursor: pointer;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.about-light .team-member { will-change: transform; }
.about-light .team-member:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 60px rgba(10,15,26,0.10);
  border-color: rgba(9,94,223,0.18);
}
.team-member .photo { position: relative; }
.team-member .open-chip {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--vf-ink, #0a0f1a);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.team-member:hover .open-chip,
.team-member:focus-visible .open-chip { opacity: 1; transform: translateY(0); }

/* Bio peek — popout card */
.bio-peek {
  position: absolute;
  top: 0;
  width: 320px;
  padding: 22px 22px 20px;
  background: white;
  color: var(--vf-ink);
  border-radius: 20px;
  border: 1px solid rgba(10,15,26,0.06);
  box-shadow: 0 32px 80px rgba(10,15,26,0.16), 0 4px 12px rgba(10,15,26,0.04);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.985);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  z-index: 8;
}
.bio-peek--right { left: calc(100% + 16px); }
.bio-peek--left { right: calc(100% + 16px); }
.team-member.is-hovered .bio-peek {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.bio-peek::before {
  content: '';
  position: absolute;
  top: 36px;
  width: 12px; height: 12px;
  background: white;
  border-left: 1px solid rgba(10,15,26,0.06);
  border-bottom: 1px solid rgba(10,15,26,0.06);
}
.bio-peek--right::before { left: -7px; transform: rotate(45deg); }
.bio-peek--left::before { right: -7px; transform: rotate(-135deg); }
.bio-peek .peek-meta {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
  margin-bottom: 14px;
}
.bio-peek .peek-meta .idx {
  color: var(--vf-blue);
  background: var(--vf-blue-100);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.bio-peek .peek-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vf-ink);
}
.bio-peek .peek-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-blue);
  margin-top: 4px;
}
.bio-peek .peek-short {
  font-size: 14px;
  line-height: 1.55;
  color: var(--vf-ink-2, rgba(10,15,26,0.7));
  margin-top: 14px;
  text-wrap: pretty;
}
.bio-peek .peek-cta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(10,15,26,0.06);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-blue);
  font-weight: 700;
}

/* Hide bio peek on smaller viewports — use modal instead */
@media (max-width: 1100px) {
  .bio-peek { display: none; }
}

/* ===== Team modal ===== */
.team-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(8,12,22,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  animation: tmFade 220ms var(--ease-out);
}
@keyframes tmFade { from { opacity: 0; } to { opacity: 1; } }
.team-modal {
  position: relative;
  width: min(960px, 100%);
  height: min(740px, calc(100vh - 80px));
  background: white;
  color: var(--vf-ink);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  box-shadow: 0 60px 120px rgba(8,12,22,0.4);
  animation: tmRise 320ms var(--ease-out);
}
@keyframes tmRise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.team-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--vf-ink);
  border: 1px solid rgba(10,15,26,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 200ms var(--ease-out);
}
.team-modal-close:hover { background: var(--vf-ink); color: white; border-color: var(--vf-ink); }
.team-modal-photo {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--vf-blue-900);
  min-height: 480px;
}
.team-modal-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8,12,22,0.55) 100%);
}
.team-modal-photo-meta {
  position: absolute;
  left: 24px; bottom: 22px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  z-index: 2;
}
.team-modal-photo-meta .idx {
  color: white;
  background: var(--vf-blue);
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.team-modal-body {
  padding: 44px 44px 28px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
}
.team-modal-body .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
  display: inline-flex; align-items: center; gap: 10px;
}
.team-modal-body .eyebrow .idx {
  color: var(--vf-blue);
  background: var(--vf-blue-100);
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.team-modal-body h2 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 14px;
  color: var(--vf-ink);
}
.modal-bio { margin-top: 22px; }
.modal-bio p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--vf-ink-2, rgba(10,15,26,0.72));
  text-wrap: pretty;
}
.modal-bio p + p { margin-top: 14px; }
.modal-credits {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(10,15,26,0.08);
}
.modal-credits .credits-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
  margin-bottom: 12px;
}
.modal-credits ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.modal-credits li {
  font-size: 14px;
  color: var(--vf-ink);
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.modal-credits li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--vf-blue);
}
.modal-foot {
  margin-top: auto;
  padding-top: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.modal-mail {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vf-blue);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px dashed rgba(9,94,223,0.4);
  padding-bottom: 2px;
}
.modal-mail:hover { color: var(--vf-blue-600, var(--vf-blue)); border-bottom-style: solid; }
.modal-nav {
  display: flex; align-items: center; gap: 10px;
}
.modal-nav button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--vf-bg, #f4f5f7);
  color: var(--vf-ink);
  border: 1px solid rgba(10,15,26,0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.modal-nav button:hover { background: var(--vf-ink); color: white; border-color: var(--vf-ink); }
.modal-nav .counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vf-ink-3, rgba(10,15,26,0.5));
  min-width: 50px; text-align: center;
}

@media (max-width: 760px) {
  .team-modal {
    grid-template-columns: 1fr;
    height: auto;
    max-height: calc(100vh - 32px);
  }
  .team-modal-photo { min-height: 280px; }
  .team-modal-body { padding: 28px 24px; max-height: none; }
  .team-modal-body h2 { font-size: 32px; }
  .team-modal-scrim { padding: 16px; }
}

/* Testimonial — light variant so it blends with the About flow */
.about-light .testimonial { background: white; }
.about-light .testimonial .quote { color: var(--vf-ink); }
.about-light .testimonial .quote em { color: var(--vf-blue); }
.about-light .testimonial .attribution .name { color: var(--vf-ink); }
.about-light .testimonial .attribution .role { color: var(--vf-ink-3); }

/* ===== Contact (light) ===== */
.contact {
  background: var(--vf-bg);
  color: var(--vf-ink);
  padding: 140px 0 96px;
  min-height: 100vh;
  position: relative;
}
.contact .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: start;
}
.contact .lt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-blue);
  background: var(--vf-blue-100);
  border-radius: 999px;
  padding: 6px 14px;
}
.contact h1 {
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-top: 24px;
  color: var(--vf-ink);
  text-wrap: balance;
}
.contact h1 em {
  font-style: italic;
  color: var(--vf-blue);
  font-weight: 500;
}
.contact .lead {
  font-size: 18px;
  color: var(--vf-ink-2);
  margin-top: 24px;
  line-height: 1.55;
  max-width: 460px;
}
.contact .meta-block {
  margin-top: 48px;
  display: flex; flex-direction: column;
  gap: 20px;
}
.contact .meta-row {
  display: flex; gap: 16px;
  align-items: flex-start;
}
.contact .meta-row .ico {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--vf-blue-100);
  color: var(--vf-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact .meta-row .ico svg { width: 18px; height: 18px; stroke-width: 1.75; }
.contact .meta-row .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vf-ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.contact .meta-row .val {
  font-size: 16px;
  color: var(--vf-ink);
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.4;
}
.contact .meta-row .val-link {
  display: inline-block;
  text-decoration: none;
  transition: color 200ms var(--ease-out);
  cursor: pointer;
}
.contact .meta-row .val-link:hover {
  color: var(--vf-blue);
}

.form-card {
  background: white;
  border-radius: 32px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--vf-line);
}
.form-card h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-ink);
}
.form-card .desc {
  font-size: 14px;
  color: var(--vf-ink-3);
  margin-top: 6px;
  margin-bottom: 12px;
}
.form-card .desc-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vf-ink-3);
  margin-bottom: 28px;
}
.form-card .desc-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 0 4px rgba(46,204,113,0.18);
  flex-shrink: 0;
}
.form-card .contact-status.is-closed .desc-dot {
  background: #e74c3c;
  box-shadow: 0 0 0 4px rgba(231,76,60,0.18);
}
.form-card .step-indicator {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}
.form-card .step-indicator .dot {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--vf-line);
  position: relative;
  overflow: hidden;
}
.form-card .step-indicator .dot .fill {
  position: absolute;
  inset: 0;
  background: var(--vf-blue);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--vf-ink);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--vf-line-strong);
  background: white;
  outline: none;
  transition: all 200ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 4px rgba(9,94,223,0.12);
}
.full { grid-column: 1 / -1; }

.budget-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.budget-chip {
  background: white;
  border: 1px solid var(--vf-line-strong);
  color: var(--vf-ink-2);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 200ms;
}
.budget-chip.active {
  background: var(--vf-blue);
  color: white;
  border-color: var(--vf-blue);
}
.budget-chip:hover:not(.active) {
  border-color: var(--vf-blue);
  color: var(--vf-blue);
}

.submit {
  background: var(--vf-blue);
  color: white;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 16px;
  transition: all 220ms;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: -0.005em;
}
.submit:hover { background: var(--vf-blue-600); box-shadow: var(--shadow-brand); transform: translateY(-2px); }
.submit:disabled { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }

/* ===== Privacy page (light theme) ===== */
.privacy-light { background: var(--vf-bg); color: var(--vf-ink); }
.privacy-page { padding: 140px 0 96px; min-height: 100vh; }
.privacy-page .container { max-width: 760px; }
.privacy-page .lt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--vf-blue);
  background: var(--vf-blue-100); border-radius: 999px; padding: 6px 14px;
  margin-bottom: 24px;
}
.privacy-page h1 {
  font-size: clamp(40px, 6vw, 64px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1; margin: 0 0 18px;
}
.privacy-page .lead { font-size: 18px; color: var(--vf-ink-2); line-height: 1.55; margin: 0 0 32px; max-width: 600px; }
.privacy-page .last-updated { font-size: 13px; color: var(--vf-ink-3); margin: 0 0 48px; padding: 12px 16px; background: var(--vf-bg-tint); border-radius: 8px; display: inline-block; }
.privacy-page h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  margin: 40px 0 14px; color: var(--vf-ink);
}
.privacy-page p, .privacy-page li {
  font-size: 16px; color: var(--vf-ink-2); line-height: 1.65;
}
.privacy-page ul { padding-left: 20px; margin: 0 0 14px; }
.privacy-page li { margin-bottom: 8px; }
.privacy-page p { margin: 0 0 14px; }
.privacy-page a { color: var(--vf-blue); }
.privacy-page a:hover { opacity: 0.7; }
.form-error {
  background: #fff1f1;
  border: 1px solid #f5b6b6;
  color: #8a1a1a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0 16px;
}

.contact-sent {
  text-align: center;
  padding: 40px 20px;
}
.contact-sent .check {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--vf-blue-100);
  color: var(--vf-blue);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.contact-sent .check svg { width: 28px; height: 28px; stroke-width: 2.5; }
.contact-sent h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.contact-sent p { color: var(--vf-ink-3); margin-top: 12px; line-height: 1.55; }

/* ===== Feedback page ===== */
.feedback-page .container { display: flex; flex-direction: column; align-items: stretch; gap: 20px; max-width: 640px; }
.feedback-referral { background: #EDF0F6; border-radius: 24px; padding: 36px 40px; }
.referral-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--vf-ink-3);
  margin: 0 0 20px;
}
.referral-pretext { font-size: 15px; font-style: italic; color: var(--vf-ink-3); margin: 0 0 4px; }
.referral-stat { margin-bottom: 20px; }
.referral-stat-num {
  font-size: 80px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--vf-ink); margin-bottom: 8px;
}
.referral-stat-label { font-size: 15px; color: var(--vf-ink-2); line-height: 1.45; }
.referral-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.referral-line {
  font-size: 15px; color: var(--vf-ink-2); line-height: 1.65; margin: 0;
  opacity: 0; animation: referral-line-in 0.5s ease forwards;
}
.referral-line:nth-child(1) { animation-delay: 0.9s; }
.referral-line:nth-child(2) { animation-delay: 1.35s; }
.referral-line:nth-child(3) { animation-delay: 1.8s; font-size: 14px; color: var(--vf-ink-3); margin-top: 6px; }
.referral-line em { font-style: italic; color: var(--vf-ink); }
@keyframes referral-line-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.feedback-referral-actions {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(10,15,26,0.1);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.feedback-intro-btn {
  background: var(--vf-ink); color: white; border: none; border-radius: 100px;
  padding: 12px 26px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; transition: opacity 150ms;
}
.feedback-intro-btn:hover { opacity: 0.82; }
.feedback-skip-btn {
  background: transparent; color: var(--vf-ink-4); border: none;
  padding: 6px 0; font-size: 14px; letter-spacing: -0.01em;
  cursor: pointer; transition: color 150ms;
}
.feedback-skip-btn:hover { color: var(--vf-ink-2); }
.referral-email-capture { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.referral-mail-btn { display: inline-flex; align-items: center; text-decoration: none; }
.referral-or-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 12px; color: var(--vf-ink-4); letter-spacing: 0.04em;
}
.referral-or-row::before, .referral-or-row::after {
  content: ''; flex: 1; height: 1px; background: rgba(10,15,26,0.12);
}
.referral-email-done { flex-shrink: 0; }
.referral-email-hint { font-size: 14px; color: var(--vf-ink-3); margin: 0; }
.referral-email-row { display: flex; gap: 10px; width: 100%; align-items: center; }
.referral-email-row input[type="email"] {
  flex: 1; min-width: 0; background: white;
  border: 1.5px solid rgba(10,15,26,0.15); border-radius: 12px;
  padding: 11px 16px; font-size: 15px; color: var(--vf-ink); outline: none; transition: border-color 150ms;
}
.referral-email-row input[type="email"]::placeholder { color: var(--vf-ink-4); }
.referral-email-row input[type="email"]:focus { border-color: var(--vf-blue); }
@media (max-width: 760px) { .feedback-referral { padding: 28px 24px; } }
@media (max-width: 480px) {
  .referral-stat-num { font-size: 60px; }
  .referral-email-row { flex-direction: column; align-items: stretch; }
  .referral-email-row .feedback-intro-btn { align-self: flex-start; }
}
.field-optional {
  font-family: inherit; font-size: 11px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--vf-ink-3); margin-left: 4px;
}
.anon-checkbox-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; cursor: pointer; user-select: none;
}
.anon-checkbox-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; min-width: 18px;
  border: 1.5px solid var(--vf-ink-4); border-radius: 5px;
  background: transparent; cursor: pointer;
  transition: border-color 140ms, background 140ms;
  position: relative; flex-shrink: 0;
}
.anon-checkbox-row input[type="checkbox"]:checked {
  background: var(--vf-blue); border-color: var(--vf-blue);
}
.anon-checkbox-row input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  left: 4px; top: 1px; width: 6px; height: 10px;
  border: 2px solid white; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.anon-checkbox-row span { font-size: 14px; color: var(--vf-ink-2); letter-spacing: -0.01em; }
@media (max-width: 760px) { .feedback-referral { padding: 28px 24px; } }

.feedback-questions { display: flex; flex-direction: column; gap: 0; }
.rating-question {
  padding: 18px 0;
  border-bottom: 1px solid var(--vf-ink-6);
}
.rating-question:last-child { border-bottom: none; padding-bottom: 0; }
.rq-label { font-size: 15px; font-weight: 600; color: var(--vf-ink); margin: 0 0 3px; }
.rq-desc { font-size: 13px; color: var(--vf-ink-3); margin: 0 0 12px; line-height: 1.45; }
.rating-btns { display: flex; gap: 6px; }
.rating-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: 1.5px solid var(--vf-ink-6);
  background: transparent; font-size: 14px; font-weight: 600; color: var(--vf-ink-2);
  cursor: pointer; transition: border-color 140ms, background 140ms, color 140ms;
  display: flex; align-items: center; justify-content: center;
}
.rating-btn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
.rating-btn.active { background: var(--vf-blue); border-color: var(--vf-blue); color: #fff; }
.rating-scale {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--vf-ink-3);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
@media (max-width: 480px) {
  .rating-btn { width: 36px; height: 36px; font-size: 13px; border-radius: 8px; }
}

/* ===== Wave divider variant ===== */
.wave-section {
  height: 80px;
  background: var(--vf-night-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 40 C 240 0, 480 80, 720 40 S 1200 0, 1440 40 L 1440 80 L 0 80 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 40 C 240 0, 480 80, 720 40 S 1200 0, 1440 40 L 1440 80 L 0 80 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}

/* ===== Reels selector pill (services band) ===== */
.scrolling-list {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.scrolling-list::-webkit-scrollbar { display: none; }


/* ===================================================================
   Hero reel — integrated bar (logo + start a project + watch reel)
   =================================================================== */
.hero-reel-content .reel-bar {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(7, 8, 12, 0.42);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  margin-bottom: 12px;
  animation: reel-bar-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.hero-reel-content .reel-bar:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(7, 8, 12, 0.55);
}
.reel-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.reel-bar-mark {
  width: 22px; height: 22px;
  object-fit: contain;
  flex: none;
}
.reel-bar-wordmark {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: white;
}
.reel-bar-dot {
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--vf-blue-400);
  flex: none;
}
.reel-bar-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}
.reel-bar-actions {
  display: inline-flex;
  align-items: stretch;
}
.reel-bar-watch,
.reel-bar-start {
  border: 0;
  background: transparent;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out);
}
.reel-bar-watch {
  color: rgba(255, 255, 255, 0.78);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.reel-bar-watch:hover { background: rgba(255, 255, 255, 0.06); color: white; }
.reel-bar-start {
  background: var(--vf-blue);
  padding: 0 26px;
}
.reel-bar-start:hover { background: var(--vf-blue-400); }

@keyframes reel-bar-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .reel-bar-tag { display: none; }
  .reel-bar-brand { padding: 12px 14px; }
  .reel-bar-watch, .reel-bar-start { padding: 0 16px; font-size: 12.5px; }
}

/* ===================================================================
   Work mini-player (modal)
   =================================================================== */
.vf-player {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4, 5, 8, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  animation: vf-player-fade 220ms var(--ease-out) both;
}
.vf-player-shell {
  width: min(1280px, 100%);
  background: #0c0d12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 50px 120px rgba(0,0,0,0.55);
  animation: vf-player-pop 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Reset text-align so the modal's foot stays left-aligned even when
     mounted inside a centered container like .cta-banner. */
  text-align: left;
}
.vf-player-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vf-player-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
}
.vf-player-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--vf-blue-400); }
.vf-player-rec .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #FF3B58;
  animation: pulse 1.4s infinite;
}
.vf-player-sep { color: rgba(255,255,255,0.3); }
.vf-player-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.vf-player-close:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
.vf-player-stage {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #000;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.vf-player-stage::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 80%);
}
.vf-player-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 999px;
  background: rgba(7,8,12,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.22);
  color: white;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.vf-player-play svg { margin-left: 3px; }
.vf-player-play:hover { background: var(--vf-blue); border-color: var(--vf-blue); transform: translate(-50%, -50%) scale(1.06); }
.vf-player-scrubber {
  position: absolute;
  left: 24px; right: 24px; bottom: 18px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
}
.vf-scrubber-bar {
  height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.vf-scrubber-fill {
  width: 14%;
  height: 100%;
  background: var(--vf-blue);
}
.vf-player-foot {
  display: flex; justify-content: space-between; align-items: end;
  padding: 22px 24px 24px;
  gap: 24px;
  flex-wrap: wrap;
}
.vf-player-titles { min-width: 0; }
.vf-player-client {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-blue-400);
  margin-bottom: 6px;
}
/* Selector specificity is intentional — the modal is rendered inside the
   component that opens it (CtaBanner, hero, etc.), and rules like
   `.cta-banner h2` would otherwise leak in and inflate the title. */
.vf-player-shell .vf-player-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: white;
  margin: 0;
  max-width: none;
  text-wrap: initial;
}
.vf-player-desc {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.vf-player-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.vf-player-action {
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.vf-player-action:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
.vf-player-action--primary {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
}
.vf-player-action--primary:hover { background: var(--vf-blue-400); border-color: var(--vf-blue-400); }

@keyframes vf-player-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vf-player-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Iframe takeover when WorkPlayer is in playing state */
.vf-player-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #000;
}

/* Standalone video modal — used by Watch reel buttons */
.vf-video-shell {
  position: relative;
  width: min(1280px, 100%);
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 50px 120px rgba(0,0,0,0.55);
  animation: vf-player-pop 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vf-video-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #000;
}
.vf-video-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(7,8,12,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.vf-video-close:hover { background: rgba(7,8,12,0.85); border-color: rgba(255,255,255,0.32); }

/* ===================================================================
   CTA banner — refined eyebrow + "an impact" italic kerning fix
   =================================================================== */
.cta-banner .cta-eyebrow {
  margin-bottom: 28px;
  animation: vf-eyebrow-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cta-banner .cta-eyebrow .idx {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--vf-blue-400);
  font-weight: 700;
}
.cta-banner--light .cta-eyebrow .idx {
  background: var(--vf-blue-100, rgba(9,94,223,0.08));
  border-color: rgba(9,94,223,0.18);
  color: var(--vf-blue);
}
@keyframes vf-eyebrow-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The italic 'i' in "impact" was sitting too tight against the upright 'n'.
   Add a touch of letter-space and a hair of word-space at the seam. */
.cta-banner h2 em {
  margin-left: 0.05em;
  margin-right: 0.02em;
}

/* ===================================================================
   Nav: rentals brand + hide rentals link off-page
   ===================================================================
   Rentals logo height is set by the base .nav .brand-logo rule (27px)
   alongside Films — they're standardised so both sub-brands occupy the
   same vertical footprint in the nav. */

/* Footer links column */
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.footer-links li { color: rgba(255,255,255,0.85); font-size: 15px; }
.footer-links a { color: rgba(255,255,255,0.85); cursor: pointer; transition: color 200ms; text-decoration: none; }
.footer-links a:hover { color: var(--vf-blue-400); }
.footer-link-inline {
  color: inherit;
  text-decoration: none;
  transition: color 200ms;
}
.footer-link-inline:hover { color: var(--vf-blue-400); }

/* Hide Booqable cart launcher on non-rentals pages */
body:not(.is-rentals-page) #booqable-launcher,
body:not(.is-rentals-page) #booqable-cart {
  display: none !important;
}
@media (max-width: 760px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  /* Stack the copyright and "Made in London UK" lines so each gets its
     own row instead of being squeezed onto a single line. */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ===================================================================
   MOBILE RESPONSIVE OVERRIDES
   =================================================================== */
@media (max-width: 900px) {
  /* About page hero — collapse to single column */
  .about-hero { padding: 120px 0 56px; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-hero h1 { font-size: clamp(40px, 9vw, 72px); }
  .about-hero .right p { font-size: 16px; }
  .about-img-strip { grid-template-columns: 1fr; gap: 14px; padding: 0 0 64px; }

  /* Contact page — single column */
  .contact { padding: 110px 0 72px; }
  .contact .container { grid-template-columns: 1fr; gap: 48px; }
  .contact h1 { font-size: clamp(40px, 10vw, 64px); }

  /* Principles */
  .principles { padding: 72px 0; }
  .principles-grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 760px) {
  /* Hero meta */
  .hero-meta { grid-template-columns: 1fr; gap: 18px; }

  /* Process band */
  .process-grid { grid-template-columns: 1fr; gap: 18px; }

  /* Studio stats — wrap to 1col on smallest */
  .studio-split .stats { grid-template-columns: 1fr; gap: 12px; }
  .studio-split .imgs { grid-template-columns: 1fr; gap: 12px; }

  /* Contact form fields */
  .field-row { grid-template-columns: 1fr; gap: 14px; }

  /* Generic page padding tightening */
  .container { padding-left: 20px; padding-right: 20px; }

  /* Section heads */
  .section-head h2 { font-size: clamp(34px, 8vw, 56px); }
}

/* ===================================================================
   ACCESSIBILITY — global focus-visible rings for keyboard navigation
   =================================================================== */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.menu a:focus-visible,
.filter-chip:focus-visible,
.acc-trigger:focus-visible,
.faq-item summary:focus-visible,
.tile:focus-visible,
.modal-nav-btn:focus-visible,
.team-modal-close:focus-visible,
.modal-close:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.submit:focus-visible {
  outline: 2px solid var(--vf-blue-400);
  outline-offset: 2px;
  border-radius: inherit;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
}

/* ===================================================================
   Keyboard shortcuts overlay (components-shortcuts.jsx)
   ===================================================================
   Hidden help dialog. `?` from anywhere opens it; `Esc` closes. We
   don't expose this anywhere in the visible UI on purpose — it's a
   power-user affordance only. Style is intentionally restrained,
   matching the rest of the site (clean serif headings, mono kbd).
*/
.vf-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;        /* above nav (80) + floating bar (85) + drawers */
  background: rgba(10, 15, 26, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.vf-shortcuts-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.vf-shortcuts-panel {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: white;
  color: var(--vf-ink);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(10, 15, 26, 0.40), 0 8px 24px rgba(10, 15, 26, 0.18);
  padding: 28px 32px 24px;
  transform: translateY(10px) scale(0.98);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vf-shortcuts-overlay.is-open .vf-shortcuts-panel {
  transform: translateY(0) scale(1);
}
.vf-shortcuts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.vf-shortcuts-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vf-ink-3, rgba(10, 15, 26, 0.55));
}
.vf-shortcuts-close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--vf-ink-2, rgba(10, 15, 26, 0.65));
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 160ms ease, color 160ms ease;
}
.vf-shortcuts-close:hover {
  background: rgba(10, 15, 26, 0.06);
  color: var(--vf-ink);
}
.vf-shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 36px;
}
.vf-shortcuts-group h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--vf-ink);
}
.vf-shortcuts-group dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 7px;
  margin: 0;
}
.vf-shortcuts-group dt {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vf-shortcuts-group dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--vf-ink-2, rgba(10, 15, 26, 0.72));
  align-self: center;
}
.vf-shortcuts-or {
  font-size: 10.5px;
  color: var(--vf-ink-3, rgba(10, 15, 26, 0.45));
  padding: 0 3px;
}
/* Clickable shortcut rows — used by the Internal section so the
   review-mode toggle can be triggered with a click as well as the
   chord. Cursor + a soft blue tint signal interactivity; the
   companion `↗` glyph after the label makes "this runs an action"
   explicit. */
.vf-shortcuts-group dt.is-clickable,
.vf-shortcuts-group dd.is-clickable {
  cursor: pointer;
  transition: color 140ms ease;
}
.vf-shortcuts-group dt.is-clickable:hover,
.vf-shortcuts-group dd.is-clickable:hover {
  color: var(--vf-blue);
}
.vf-shortcuts-group dt.is-clickable:hover kbd {
  border-color: var(--vf-blue);
  color: var(--vf-blue);
  background: rgba(46, 91, 255, 0.06);
}
.vf-shortcuts-group dt.is-clickable:focus-visible {
  outline: 2px solid rgba(46, 91, 255, 0.45);
  outline-offset: 4px;
  border-radius: 4px;
}
.vf-shortcuts-run {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vf-ink-3, rgba(10, 15, 26, 0.45));
}
/* Button-only rows (no chord) get a brand-blue pill in the keys
   column so the affordance still occupies the visual slot. */
.vf-shortcuts-run-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--vf-blue);
  color: white;
  transition: background-color 140ms ease;
}
.vf-shortcuts-group dt.is-clickable:hover .vf-shortcuts-run-pill {
  background: var(--vf-blue-700, #063F96);
}

/* ON / OFF state badge next to a toggle-style action label. */
.vf-shortcuts-state {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.vf-shortcuts-state-on {
  background: rgba(27, 156, 95, 0.14);
  color: #157a4a;
}
.vf-shortcuts-state-off {
  background: rgba(10, 15, 26, 0.08);
  color: var(--vf-ink-3);
}

/* Sliding-pill switch — same shape as .twk-toggle in tweaks-panel.
   Sits in the dt slot for items with `switch: true`. Click the pill
   OR the label to flip. Apple-green when on, neutral when off. */
.vf-shortcuts-switch-cell {
  display: flex;
  align-items: center;
}
.vf-shortcuts-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 15, 26, 0.18);
  transition: background-color 180ms ease;
  cursor: pointer;
  padding: 0;
}
.vf-shortcuts-switch[data-on="1"] { background: #34c759; }
.vf-shortcuts-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 15, 26, 0.24);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vf-shortcuts-switch[data-on="1"] i { transform: translateX(16px); }
.vf-shortcuts-switch:focus-visible {
  outline: 2px solid rgba(46, 91, 255, 0.45);
  outline-offset: 3px;
}
/* The label cell is also clickable so the whole row toggles. */
.vf-shortcuts-switch-label {
  cursor: pointer;
  user-select: none;
}
.vf-shortcuts-group dd.is-clickable:hover .vf-shortcuts-run {
  color: var(--vf-blue);
}
.vf-shortcuts-overlay kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(10, 15, 26, 0.06);
  border: 1px solid rgba(10, 15, 26, 0.12);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 7px;
  min-width: 22px;
  text-align: center;
  color: var(--vf-ink);
  line-height: 1.4;
}
.vf-shortcuts-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(10, 15, 26, 0.10);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--vf-ink-3, rgba(10, 15, 26, 0.50));
  text-align: center;
}
.vf-shortcuts-foot kbd {
  font-size: 10px;
  padding: 1px 5px;
  min-width: 18px;
}
@media (max-width: 540px) {
  .vf-shortcuts-grid { grid-template-columns: 1fr; gap: 18px; }
  .vf-shortcuts-panel { padding: 22px 22px 18px; }
}

/* ===================================================================
   Crew Onboarding — /crew/onboard
   Hidden roster form linked only from the Films footer. Visual
   identity sits in the same family as the Rentals Kit Prep page but
   uses a single scroll-form instead of a wizard.
   =================================================================== */

/* The page wraps in .rentals-light so it sits on the same light canvas
   as /rentals/careers. The form is a multi-step wizard mounted inside
   .rentals-open-account .oa-grid .form-card — same chrome as the
   Open Account wizard. Field layout, step indicator, oa-actions, and
   honeypot styling all come from the rentals-open-account ruleset; the
   crew-specific bits below scope just the combobox, headshot, dietary
   grid, postcode lookup, consent line, and review recap. */

/* Sub-heading inside a step that groups a secondary section (e.g.
   "Emergency contact" inside step 3). Sits below the main step h3 +
   .desc and reads as a quieter section break. */
.crew-onboard .crew-step-subhead {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 28px 0 4px;
  color: var(--vf-ink, #0A0F1A);
}

/* Role combobox — typeahead picker. The dropdown sits absolutely
   below the input. Wraps in .field full so it picks up the standard
   .field label + input styling. */
.crew-onboard .crew-combo {
  position: relative;
  margin-bottom: 4px;
}
.crew-onboard .crew-combo-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.crew-onboard .crew-combo-label-row label {
  margin: 0;
}
.crew-onboard .crew-combo-remove {
  background: none;
  border: 0;
  color: var(--vf-ink-3, #8892A6);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
}
.crew-onboard .crew-combo-remove:hover {
  color: var(--vf-ink, #0A0F1A);
}
.crew-onboard .crew-combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  box-shadow: 0 8px 24px -6px rgba(10, 15, 26, 0.18);
  max-height: 280px;
  overflow-y: auto;
}
.crew-onboard .crew-combo-opt {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--vf-ink, #0A0F1A);
}
.crew-onboard .crew-combo-opt.is-highlighted {
  background: rgba(9, 94, 223, 0.10);
  color: var(--vf-blue, #095EDF);
}
.crew-onboard .crew-combo-opt.is-selected {
  font-weight: 600;
}
.crew-onboard .crew-combo-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--vf-ink-3, #8892A6);
  font-style: italic;
}

/* "+ Add a secondary role" link — subtle, monospace-ish so it reads
   as an action, not a button. */
.crew-onboard .crew-add-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 6px 10px;
  background: none;
  border: 1px dashed var(--vf-line, #E6E8EE);
  border-radius: 6px;
  color: var(--vf-blue, #095EDF);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.crew-onboard .crew-add-role:hover {
  background: rgba(9, 94, 223, 0.06);
  border-color: var(--vf-blue, #095EDF);
  border-style: solid;
}

/* Headshot — drop zone or preview. */
.crew-onboard .crew-headshot-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  border: 1.5px dashed var(--vf-line, #E6E8EE);
  border-radius: 10px;
  cursor: pointer;
  background: #FAFBFC;
  color: var(--vf-ink-2, #4B5468);
  font-size: 14px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.crew-onboard .crew-headshot-drop:hover,
.crew-onboard .crew-headshot-drop.is-drag-over {
  border-color: var(--vf-blue, #095EDF);
  background: rgba(9, 94, 223, 0.04);
}
.crew-onboard .crew-headshot-drop.is-processing {
  pointer-events: none;
  opacity: 0.65;
}
.crew-onboard .crew-headshot-drop.is-error {
  border-color: #c63030;
  background: rgba(198, 48, 48, 0.05);
}
.crew-onboard .crew-headshot-hint {
  font-size: 11.5px;
  color: var(--vf-ink-3, #8892A6);
}
.crew-onboard .crew-headshot-error {
  font-size: 12.5px;
  color: #8a1f1f;
  margin-top: 4px;
}
.crew-onboard .crew-headshot-preview {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 10px;
}
.crew-onboard .crew-headshot-preview img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.crew-onboard .crew-headshot-filename {
  font-size: 14px;
  font-weight: 600;
  word-break: break-all;
}
.crew-onboard .crew-headshot-info {
  font-size: 11.5px;
  color: var(--vf-ink-3, #8892A6);
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
  margin: 4px 0 8px;
}
.crew-onboard .crew-headshot-replace {
  background: none;
  border: 1px solid var(--vf-line, #E6E8EE);
  color: var(--vf-ink-2, #4B5468);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.crew-onboard .crew-headshot-replace:hover {
  color: var(--vf-blue, #095EDF);
  border-color: var(--vf-blue, #095EDF);
}

/* Consent checkbox — sits inline. */
.crew-onboard .crew-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vf-ink-2, #4B5468);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.crew-onboard .crew-consent input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.crew-onboard .crew-consent a {
  color: var(--vf-blue, #095EDF);
  text-decoration: underline;
}

/* Submit error surface — shown above the oa-actions when the server
   rejects the submission. The Submit/Continue buttons themselves use
   the shared .submit / .oa-back styles from rentals.css. */
.crew-onboard .crew-error {
  margin: 16px 0 0;
  padding: 10px 14px;
  background: #fdecec;
  border: 1px solid #f5cdcd;
  border-radius: 8px;
  color: #8a1f1f;
  font-size: 13px;
  line-height: 1.5;
}

/* Review recap — shown on the final step. One group per wizard step
   with an "Edit" link that jumps back. dl rows render as key/value
   pairs in a two-column grid. */
.crew-onboard .crew-review {
  margin: 8px 0 18px;
}
.crew-onboard .crew-review-group {
  padding: 14px 0;
  border-bottom: 1px solid var(--vf-line, #E6E8EE);
}
.crew-onboard .crew-review-group:first-child {
  padding-top: 4px;
}
.crew-onboard .crew-review-group:last-child {
  border-bottom: 0;
}
.crew-onboard .crew-review-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.crew-onboard .crew-review-group-head h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vf-ink, #0A0F1A);
  margin: 0;
}
.crew-onboard .crew-review-edit {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--vf-blue, #095EDF);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crew-onboard .crew-review-edit:hover {
  color: #074bb0;
}
.crew-onboard .crew-review-rows {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 4px 14px;
  margin: 0;
}
.crew-onboard .crew-review-rows dt {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-ink-3, #8892A6);
  padding-top: 2px;
}
.crew-onboard .crew-review-rows dd {
  font-size: 14px;
  color: var(--vf-ink-1, #0A0F1A);
  margin: 0;
  word-break: break-word;
}
.crew-onboard .crew-review-headshot {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
.crew-onboard .crew-review-headshot img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.crew-onboard .crew-review-headshot-filename {
  font-size: 13.5px; font-weight: 600;
  word-break: break-all;
}
.crew-onboard .crew-review-headshot-info {
  font-size: 11.5px;
  color: var(--vf-ink-3, #8892A6);
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
  margin-top: 2px;
}

/* Submitted state — sits inside .form-card, which already provides
   padding + border, so we just centre the content. */
.crew-onboard .crew-submitted {
  text-align: center;
  padding: 16px 0 8px;
}
.crew-onboard .crew-submitted-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(28, 157, 84, 0.12);
  color: #1c9d54;
  margin-bottom: 18px;
}
.crew-onboard .crew-submitted h3 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 12px;
}
.crew-onboard .crew-submitted p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vf-ink-2, #4B5468);
  max-width: 44ch;
  margin: 0 auto 12px;
}

/* Postcode lookup feedback — small line under the postcode input. */
.crew-onboard .crew-postcode-status {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--vf-ink-3, #8892A6);
}
.crew-onboard .crew-postcode-status.is-valid         { color: #1c9d54; }
.crew-onboard .crew-postcode-status.is-invalid       { color: #b54040; }
.crew-onboard .crew-postcode-status.is-network_error { color: #b58940; }

/* Dietary tickbox grid. Auto-fit columns so the 10 options sit in 2-3
   neat rows on desktop and stack tighter on mobile. */
.crew-onboard .crew-dietary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 14px;
  margin: 4px 0 0;
}
.crew-onboard .crew-dietary-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--vf-ink-1, #0A0F1A);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.crew-onboard .crew-dietary-opt:hover {
  border-color: var(--vf-ink-3, #8892A6);
}
.crew-onboard .crew-dietary-opt:has(input:checked) {
  border-color: var(--vf-blue, #095EDF);
  background: rgba(9, 94, 223, 0.06);
}
.crew-onboard .crew-dietary-opt input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
@media (max-width: 760px) {
  .crew-onboard .crew-headshot-preview {
    grid-template-columns: 72px 1fr;
    gap: 12px;
  }
  .crew-onboard .crew-headshot-preview img { width: 72px; height: 72px; }
  .crew-onboard .crew-dietary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────
   QUOTES ADMIN PICKER  (/quotes)
   Internal operator UI. Password-gated. Lists open Notion productions;
   click a row to generate or open its quote.
   ───────────────────────────────────────────────────────────────── */
/* The outer <main> spans the full viewport so the page's light background
   covers edge-to-edge. Inner wrappers (.quotes-login-wrap, .quotes-dash-wrap)
   handle the readable-width constraint via their own max-width. */
.quotes-admin {
  /* No top padding here — the standard .subhero pattern handles nav
     clearance (padding-top: 140px). Login + boot states still use this
     wrapper directly so they get a minimal fallback padding. */
  padding: 0 0 80px;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--vf-paper, #FAFBFD);
}
/* Login + boot screens don't have a subhero — bring back enough top
   padding to clear the nav. */
.quotes-admin:not(:has(.subhero)) { padding-top: 120px; padding-inline: 28px; }
@media (max-width: 760px) {
  .quotes-admin:not(:has(.subhero)) { padding-top: 96px; padding-inline: 18px; padding-bottom: 60px; }
}

.quotes-dash-wrap {
  padding-bottom: 16px;
}
.quotes-dash-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.quotes-dash-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .quotes-dash-toolbar { flex-direction: column; align-items: stretch; }
  .quotes-dash-toolbar-actions { margin-left: 0; }
}

/* Discrete bottom-of-page sign-out — no toolbar buttons anymore, so we
   leave the operator a quiet way out without it dominating the page. */
.quotes-dash-footer {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
  border-top: 1px solid rgba(10,15,26,0.06);
}
.quotes-dash-footer-signout {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(10,15,26,0.40);
  background: none;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 120ms ease, background 120ms ease;
}
.quotes-dash-footer-signout:hover {
  color: var(--vf-ink, #0A0F1A);
  background: rgba(10,15,26,0.05);
}

.quotes-boot {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quotes-boot-spin {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 2px solid rgba(10,15,26,0.10);
  border-top-color: var(--vf-blue, #095EDF);
  animation: quotesSpin 720ms linear infinite;
}
@keyframes quotesSpin { to { transform: rotate(360deg); } }

/* ── Login card ───────────────────────────────────────────── */
.quotes-login-wrap {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}
.quotes-login-card {
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 14px;
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(10,15,26,0.04), 0 8px 24px rgba(10,15,26,0.04);
}
.quotes-login-eyebrow {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--vf-ink-3, #8892A6);
  margin-bottom: 10px;
}
.quotes-login-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--vf-ink, #0A0F1A);
  margin: 0 0 6px;
}
.quotes-login-sub {
  color: var(--vf-ink-2, #4A5168);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.quotes-login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quotes-login-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.quotes-login-input:focus {
  border-color: var(--vf-blue, #095EDF);
  box-shadow: 0 0 0 3px rgba(9,94,223,0.15);
}
.quotes-login-err {
  font-size: 13px;
  color: #B00020;
}
.quotes-login-btn {
  padding: 12px 16px;
  background: var(--vf-blue, #095EDF);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.quotes-login-btn:hover { background: #0750C2; }
.quotes-login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.quotes-login-alt {
  margin-top: 14px;
  text-align: center;
}
.quotes-login-link {
  background: transparent;
  border: none;
  color: var(--vf-blue, #095EDF);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.quotes-login-link:hover { background: rgba(9,94,223,0.06); text-decoration: underline; }

/* ── Dashboard ────────────────────────────────────────────── */
.quotes-dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.quotes-dash-eyebrow {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--vf-ink-3, #8892A6);
  margin-bottom: 8px;
}
.quotes-dash-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vf-ink, #0A0F1A);
  margin: 0 0 6px;
}
.quotes-dash-sub {
  color: var(--vf-ink-2, #4A5168);
  font-size: 14px;
  margin: 0;
}
.quotes-dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quotes-dash-filter {
  padding: 8px 12px;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  outline: none;
  min-width: 180px;
}
.quotes-dash-filter:focus {
  border-color: var(--vf-blue, #095EDF);
  box-shadow: 0 0 0 3px rgba(9,94,223,0.10);
}
.quotes-dash-refresh,
.quotes-dash-signout {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--vf-ink, #0A0F1A);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.quotes-dash-refresh:hover,
.quotes-dash-signout:hover {
  border-color: var(--vf-ink-3, #8892A6);
}
.quotes-dash-err,
.quotes-dash-loading,
.quotes-dash-empty {
  padding: 24px;
  text-align: center;
  color: var(--vf-ink-2, #4A5168);
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 12px;
}
.quotes-dash-err { color: #B00020; }

/* Monitor health banner — shows when the Mac-side heartbeat is stale.
   Two levels: warn (yellow, 5+ min) and alarm (red, 15+ min). */
.quotes-monitor-banner {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid;
}
.quotes-monitor-banner strong { font-weight: 600; }
.quotes-monitor-banner--warn {
  background: rgba(255,170,0,0.10);
  border-color: rgba(255,170,0,0.45);
  color: #8a5a00;
}
.quotes-monitor-banner--alarm {
  background: rgba(176,0,32,0.07);
  border-color: rgba(176,0,32,0.35);
  color: #B00020;
}

/* Editor-state History dropdown */
.quotes-history-wrap { position: relative; }
.quotes-history-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 420px;
  max-height: 340px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(10,15,26,0.10), 0 1px 2px rgba(10,15,26,0.04);
  z-index: 20;
  padding: 6px 0;
}
.quotes-history-empty {
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--vf-ink-3, #8892A6);
  font-style: italic;
}
.quotes-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--vf-ink, #0A0F1A);
  transition: background 0.12s;
}
.quotes-history-row:hover { background: rgba(9,94,223,0.06); }
.quotes-history-row:disabled { opacity: 0.5; cursor: progress; }
.quotes-history-when {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11.5px;
  color: var(--vf-ink-2, #4A5168);
}
.quotes-history-action {
  font-size: 12px;
  color: var(--vf-blue, #095EDF);
  font-weight: 600;
  align-self: start;
}
.quotes-history-summary {
  grid-column: 1 / span 2;
  font-size: 11.5px;
  color: var(--vf-ink-3, #8892A6);
}

.quotes-dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Picker status groups ─────────────────────────────────────────────
   To Quote / Generated / Sent / Signed buckets. Underlying Notion
   option names are unchanged (Quotation Sent etc.) — these labels
   are display-only, mapped in components-quotes.jsx. */
.quotes-dash-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.quotes-dash-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quotes-dash-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(10,15,26,0.08);
}

.quotes-dash-group-label {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10,15,26,0.55);
}

.quotes-dash-group-count {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  font-weight: 600;
  color: rgba(10,15,26,0.35);
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(10,15,26,0.06);
}

.quotes-dash-group-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: rgba(10,15,26,0.40);
  border: 1px dashed rgba(10,15,26,0.10);
  border-radius: 10px;
  background: rgba(10,15,26,0.02);
}

/* Status-specific accents — pick up colour from the existing palette. */
.quotes-dash-group-sent .quotes-dash-group-label   { color: var(--vf-blue, #1a56ff); }
.quotes-dash-group-sent .quotes-dash-group-count   { background: rgba(26,86,255,0.10); color: var(--vf-blue, #1a56ff); }
.quotes-dash-group-viewed .quotes-dash-group-label { color: #7c3aed; }
.quotes-dash-group-viewed .quotes-dash-group-count { background: rgba(124,58,237,0.12); color: #7c3aed; }
.quotes-dash-group-signed .quotes-dash-group-label { color: #138a4d; }
.quotes-dash-group-signed .quotes-dash-group-count { background: rgba(19,138,77,0.12); color: #138a4d; }
.quotes-dash-group-other .quotes-dash-group-label  { color: rgba(10,15,26,0.40); }

/* ── "View more" expander inside the To Quote bucket ──────────────────
   Pencilled productions (shoot > 1 month out) hide behind a quiet
   "View more" button. A muted grey list of their titles sits below the
   button so the operator can see what's hidden at a glance without
   expanding. Hover gently lifts the button + nudges the chevron. */
.quotes-dash-bucket-more {
  margin-top: 6px;
}
.quotes-dash-bucket-more-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.quotes-dash-bucket-more-toggle:hover,
.quotes-dash-bucket-more-toggle:focus-visible {
  background: rgba(10,15,26,0.03);
  outline: none;
}

.quotes-dash-bucket-more-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vf-ink-2, #4A5168);
  letter-spacing: 0.01em;
  transition: color 160ms ease, transform 160ms ease;
}
.quotes-dash-bucket-more-toggle:hover .quotes-dash-bucket-more-label,
.quotes-dash-bucket-more-toggle:focus-visible .quotes-dash-bucket-more-label {
  color: var(--vf-blue, #1a56ff);
  transform: translateX(2px);
}
.quotes-dash-bucket-more-chevron {
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.quotes-dash-bucket-more.is-open .quotes-dash-bucket-more-chevron {
  transform: rotate(180deg);
}
.quotes-dash-bucket-more-toggle:hover .quotes-dash-bucket-more-chevron {
  transform: translateY(2px);
}
.quotes-dash-bucket-more.is-open .quotes-dash-bucket-more-toggle:hover .quotes-dash-bucket-more-chevron {
  transform: rotate(180deg) translateY(2px);
}

/* Subtle grey one-liner of project names — only shown in collapsed
   state. Truncates on a single line so the bucket doesn't get pushed
   around by long lists. */
.quotes-dash-bucket-more-hint {
  font-size: 12px;
  color: rgba(10,15,26,0.40);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.45;
  transition: color 160ms ease;
}
.quotes-dash-bucket-more-toggle:hover .quotes-dash-bucket-more-hint,
.quotes-dash-bucket-more-toggle:focus-visible .quotes-dash-bucket-more-hint {
  color: rgba(10,15,26,0.62);
}

.quotes-dash-list-far {
  margin-top: 10px;
}

/* ── Production card (replaces flat .quotes-row layout) ────────────────
   Small cover image on the left, title + status pill + meta row + action
   buttons stacked on the right. */
.quotes-card {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 12px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
  min-width: 0;
}
.quotes-card:hover {
  border-color: var(--vf-ink-3, #8892A6);
  box-shadow: 0 2px 10px rgba(10,15,26,0.05);
}

.quotes-card-cover {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10,15,26,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10,15,26,0.30);
}
.quotes-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.quotes-card-cover-placeholder {
  width: 100%;
  height: 100%;
  /* Valley Films blue gradient — picks up the same hue family as the
     nav accent + status pills so coverless productions still feel
     on-brand. The diagonal sweep keeps cards distinguishable without
     a glyph or pattern. */
  background:
    linear-gradient(135deg,
      var(--vf-blue, #1a56ff) 0%,
      #5A98F0              48%,
      var(--vf-blue, #1a56ff) 100%);
}

.quotes-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quotes-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.quotes-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--vf-ink, #0A0F1A);
  letter-spacing: -0.005em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.quotes-card-status {
  flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(10,15,26,0.07);
  color: rgba(10,15,26,0.55);
}
/* Reuse the existing financial-status colour tokens. */
.quotes-card-status.quotes-fs-generated,
.quotes-card-status.quotes-fs-revision-generated { background: rgba(9,94,223,0.10);  color: var(--vf-blue, #095EDF); }
.quotes-card-status.quotes-fs-to-quote,
.quotes-card-status.quotes-fs-requested,
.quotes-card-status.quotes-fs-processing         { background: rgba(255,170,0,0.13); color: #B27000; }
.quotes-card-status.quotes-fs-quotation-sent     { background: rgba(26,86,255,0.12); color: var(--vf-blue, #1a56ff); }
/* Viewed: same underlying Notion status as Sent (Quotation Sent) but the
   pill text + colour switch when Last Viewed At is set. Reuses the same
   selector via an override class added by ProductionRow. */
.quotes-card-status.quotes-fs-quotation-sent.quotes-fs-viewed,
.quotes-card-viewedago {
  background: rgba(124,58,237,0.12);
  color: #7c3aed;
}
/* The 'Viewed Xm ago' meta chip — small pill that sits alongside ref/
   jobType/date in the card's meta row. */
.quotes-card-viewedago {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
}
.quotes-card-status.quotes-fs-signed             { background: rgba(19,138,77,0.13); color: #138a4d; }
.quotes-card-status.quotes-fs-generation-failed  { background: rgba(220,38,38,0.12); color: #B91C1C; }

/* ── Interactive status pill — only on Generated / Revision Generated ──
   Acts like a button: hover swaps the label to 'Mark Sent →' and brightens
   the background. Click goes through the existing two-step confirm flow
   in ProductionRow.onMarkSent. */
button.quotes-card-status,
button.quotes-card-status-actionable {
  font: inherit;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}

/* Default → hover label swap. Both spans are stacked; hover hides the
   default and reveals the action label. */
.quotes-card-status-actionable .quotes-card-status-text-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease;
}
.quotes-card-status-actionable:hover .quotes-card-status-text-default,
.quotes-card-status-actionable:focus-visible .quotes-card-status-text-default {
  visibility: hidden;
}
.quotes-card-status-actionable:hover .quotes-card-status-text-hover,
.quotes-card-status-actionable:focus-visible .quotes-card-status-text-hover {
  opacity: 1;
}
.quotes-card-status-actionable:hover,
.quotes-card-status-actionable:focus-visible {
  background: rgba(9,94,223,0.18);
  color: var(--vf-blue, #095EDF);
}

/* Confirm state — amber, same warning palette as the inline buttons. */
button.quotes-card-status-confirm {
  background: rgba(245,158,11,0.18) !important;
  color: #b45309 !important;
  cursor: pointer;
}
button.quotes-card-status-confirm:hover {
  background: rgba(245,158,11,0.28) !important;
}

/* Working / done / error transient states. */
.quotes-card-status-working {
  background: rgba(10,15,26,0.07) !important;
  color: rgba(10,15,26,0.65) !important;
  gap: 4px;
}
.quotes-card-status-done {
  background: rgba(19,138,77,0.16) !important;
  color: #138a4d !important;
  gap: 4px;
}
.quotes-card-status-error {
  background: rgba(220,38,38,0.16) !important;
  color: #B91C1C !important;
  gap: 4px;
}
/* The inline icons on the state pills get the same height as the text. */
.quotes-card-status-working .quotes-btn-icon,
.quotes-card-status-done    .quotes-btn-icon,
.quotes-card-status-error   .quotes-btn-icon {
  width: 12px;
  height: 12px;
}

.quotes-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--vf-ink-3, #8892A6);
}
.quotes-card-ref {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-weight: 500;
  color: var(--vf-ink-2, #4A5168);
  letter-spacing: 0.04em;
}

.quotes-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Icons inside action buttons */
.quotes-btn-icon {
  flex-shrink: 0;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
}
/* Spinner animation for the in-flight states */
@keyframes quotes-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
.quotes-btn-icon-spinning {
  animation: quotes-spin 800ms linear infinite;
}

/* Narrow screens: stack cover above the body so the title still reads
   without truncating to nothing. */
@media (max-width: 640px) {
  .quotes-card { flex-direction: column; }
  .quotes-card-cover { width: 100%; height: 140px; }
  .quotes-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.quotes-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 10px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.quotes-row:hover {
  border-color: var(--vf-ink-3, #8892A6);
  box-shadow: 0 2px 8px rgba(10,15,26,0.04);
}
.quotes-row-main {
  min-width: 0;
  flex: 1 1 auto;
}
.quotes-row-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--vf-ink, #0A0F1A);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quotes-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--vf-ink-3, #8892A6);
}
.quotes-row-ref {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-weight: 500;
  color: var(--vf-ink-2, #4A5168);
  letter-spacing: 0.04em;
}
.quotes-row-tag,
.quotes-row-date {
  color: var(--vf-ink-3, #8892A6);
}
.quotes-row-fs {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10,15,26,0.07);
  color: rgba(10,15,26,0.55);
}
.quotes-row-fs.quotes-fs-generated         { background: rgba(9,94,223,0.10);  color: var(--vf-blue, #095EDF); }
.quotes-row-fs.quotes-fs-requested,
.quotes-row-fs.quotes-fs-processing        { background: rgba(255,170,0,0.13);  color: #B27000; }
.quotes-row-fs.quotes-fs-signed,
.quotes-row-fs.quotes-fs-accepted          { background: rgba(0,140,80,0.13);   color: #007A45; }

.quotes-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.quotes-row-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.quotes-row-btn-primary {
  background: var(--vf-blue, #095EDF);
  color: #fff;
  border-color: var(--vf-blue, #095EDF);
}
.quotes-row-btn-primary:hover { background: #0750C2; border-color: #0750C2; transform: translateY(-1px); }
.quotes-row-btn-ghost {
  background: transparent;
  color: var(--vf-ink, #0A0F1A);
  border-color: var(--vf-line, #E6E8EE);
}
.quotes-row-btn-ghost:hover { border-color: var(--vf-ink-3, #8892A6); }

/* Disabled state — visually present but inert. Used when the underlying
   action no longer makes sense (Edit after Signed, Refresh after Viewed).
   The button keeps its layout slot so the row's button cluster doesn't
   shuffle; pointer-events: none + opacity make it read as 'not now'. */
.quotes-row-btn.is-disabled,
span.quotes-row-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: auto;            /* still allow the title tooltip */
  background: rgba(10,15,26,0.04);
  color: var(--vf-ink-3, #8892A6);
  border-color: var(--vf-line, #E6E8EE);
}
.quotes-row-btn-primary.is-disabled {
  background: rgba(10,15,26,0.04);
  color: var(--vf-ink-3, #8892A6);
  border-color: var(--vf-line, #E6E8EE);
}
.quotes-row-btn.is-disabled:hover {
  background: rgba(10,15,26,0.04);
  border-color: var(--vf-line, #E6E8EE);
  transform: none;
}
/* Confirm state for the two-step Mark Sent button — amber outline so it
   reads as 'committing' without being a destructive red. */
.quotes-row-btn-confirm {
  background: rgba(245,158,11,0.10);
  color: #b45309;
  border-color: rgba(245,158,11,0.55);
}
.quotes-row-btn-confirm:hover {
  background: rgba(245,158,11,0.20);
  border-color: #b45309;
}
.quotes-row-status {
  font-size: 12px;
  color: var(--vf-ink-3, #8892A6);
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.quotes-row-status-ok {
  color: #138a4d;
  font-style: normal;
}
.quotes-row-err {
  font-size: 12px;
  color: #B00020;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 760px) {
  .quotes-dash-head { flex-direction: column; align-items: stretch; }
  .quotes-dash-actions { justify-content: stretch; }
  .quotes-dash-filter { flex: 1 1 auto; min-width: 0; }
  .quotes-row { flex-direction: column; align-items: stretch; }
  .quotes-row-actions { justify-content: flex-end; }
  .quotes-dash-title { font-size: 26px; }
}