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

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  /* Don't let iOS inflate text on orientation change; keep our own scale. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  background: var(--vf-night);
  color: white;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* No grey tap-flash on touch; controls feel native + lose the 300ms tap delay. */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], summary, label, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
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; }
/* iOS zooms a field on focus when its text is <16px. Keep form controls at 16px
   on phones + tablets so focusing never triggers a jarring zoom. */
@media (max-width: 1024px) {
  input, textarea, select { font-size: 16px; }
}

/* ===== 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;
  /* viewport-fit=cover: keep the bar clear of the notch + side insets. */
  padding: max(20px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 20px max(32px, env(safe-area-inset-left));
  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;
}
/* Mobile: the desktop 4-column grid (80px 2fr 1fr 60px) collapses the blurb
   to ~100px and the deliverables list to ~50px, so text wraps one word per
   line. Stack to a single column, drop the gutter spacers, and give the
   blurb room to breathe. */
@media (max-width: 760px) {
  .service-body-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 28px;
  }
  .service-body-inner > div:first-child,
  .service-body-inner > div:last-child { display: none; }
  .service-body-inner > div:nth-child(2) {
    font-size: 16px;
    line-height: 1.6;
    max-width: none;
  }
  .service-body-inner ul { gap: 10px; }
}

/* ===== 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: 1.05;
  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;
}

@keyframes check-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.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; }
.contact-sent.done-warm .check {
  width: 80px; height: 80px; margin-bottom: 24px;
  animation: check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.contact-sent.done-warm .check svg { width: 34px; height: 34px; }
.contact-sent.done-warm h3 { font-size: 32px; }

/* ===== 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-score-note {
  font-size: 13px; color: var(--vf-ink-3); margin: -4px 0 18px;
  font-family: var(--font-mono); letter-spacing: 0.03em;
}
.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-stars { display: flex; gap: 2px; }
.rating-star-btn {
  background: none; border: none; padding: 4px 3px; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--vf-ink-6);
  transition: color 80ms, transform 80ms;
}
.rating-star-btn:hover, .rating-star-btn.active { color: #f59e0b; }
.rating-star-btn:active { transform: scale(0.88); }
.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-star-btn { font-size: 24px; }
}

/* ===== 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; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  /* Scroll the whole overlay when the player is taller than the viewport
     (e.g. landscape tablets / short windows). Centering is done with the
     shell's auto margins below — NOT align-items:center — because a centered
     flex item taller than its container has its top clipped and unreachable
     even with overflow:auto. Auto margins collapse to 0 when space is tight,
     so the shell top-aligns and every part stays scroll-reachable. */
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: vf-player-fade 220ms var(--ease-out) both;
}
.vf-player-shell {
  width: min(1280px, 100%);
  margin: auto;
  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%);
  margin: auto;
  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;
}

/* ── Menu passcode gate ────────────────────────────────────────────
   The whole Cmd+/ menu is gated: when locked, the passcode prompt
   (.vf-shortcuts-gate) replaces the shortcut grid. Once unlocked, a
   Lock control sits in the header next to the close button. Matches the
   menu's white panel + blue accent. */
.vf-shortcuts-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vf-shortcuts-gate {
  max-width: 320px;
  margin: 0 auto;
  padding: 18px 0 10px;
}
.vf-shortcuts-gate-title {
  font-size: 14px;
  line-height: 1.45;
  color: var(--vf-ink-2, rgba(10, 15, 26, 0.72));
  margin: 0 0 14px;
  text-align: center;
}
.vf-staff-lock {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10, 15, 26, 0.55));
  background: rgba(10, 15, 26, 0.06);
  border: 0;
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.vf-staff-lock:hover {
  background: rgba(46, 91, 255, 0.10);
  color: var(--vf-blue);
}
.vf-staff-gate {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}
.vf-staff-gate-row {
  display: flex;
  gap: 8px;
}
.vf-staff-gate-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  padding: 9px 12px;
  color: var(--vf-ink);
  background: rgba(10, 15, 26, 0.04);
  border: 1px solid rgba(10, 15, 26, 0.14);
  border-radius: 10px;
  transition: border-color 160ms ease, background 160ms ease;
}
.vf-staff-gate-input::placeholder {
  letter-spacing: normal;
  color: var(--vf-ink-3, rgba(10, 15, 26, 0.40));
}
.vf-staff-gate-input:focus {
  outline: none;
  border-color: var(--vf-blue);
  background: #fff;
}
.vf-staff-gate-input.is-error {
  border-color: #d8453b;
  background: rgba(216, 69, 59, 0.05);
}
.vf-staff-gate-go {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--vf-blue);
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  cursor: pointer;
  transition: filter 160ms ease;
}
.vf-staff-gate-go:hover { filter: brightness(1.08); }
.vf-staff-gate-go:focus-visible {
  outline: 2px solid rgba(46, 91, 255, 0.45);
  outline-offset: 2px;
}
.vf-staff-gate-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--vf-ink-2, rgba(10, 15, 26, 0.72));
  cursor: pointer;
  user-select: none;
}
.vf-staff-gate-remember input {
  accent-color: var(--vf-blue);
  cursor: pointer;
}
.vf-staff-gate-error {
  font-size: 12px;
  color: #d8453b;
  font-weight: 500;
}
.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;
}
/* Driving & transport — required Yes/No pills (two questions side by side). */
.crew-onboard .crew-yesno-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 24px;
  margin: 4px 0 0;
}
.crew-onboard .crew-yesno-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.crew-onboard .crew-yesno-group legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vf-ink-2, #3A4254);
}
.crew-onboard .crew-yesno-opts { display: flex; gap: 8px; }
.crew-onboard .crew-yesno {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  color: var(--vf-ink-1, #0A0F1A);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.crew-onboard .crew-yesno:hover { border-color: var(--vf-ink-3, #8892A6); }
.crew-onboard .crew-yesno.is-selected {
  border-color: var(--vf-blue, #095EDF);
  background: rgba(9, 94, 223, 0.06);
  font-weight: 500;
}
.crew-onboard .crew-yesno input[type="radio"] { 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. */
/* Template examples — the three document templates, surfaced at the bottom
   of the productions portal (merged in from the old /productions/template). */
.quotes-templates {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(10,15,26,0.06);
}
.quotes-templates-head { margin-bottom: 18px; }
.quotes-templates-eyebrow {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vf-blue);
  margin-bottom: 8px;
}
.quotes-templates-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-ink, #0A0F1A);
  margin: 0 0 4px;
}
.quotes-templates-lead {
  margin: 0;
  font-size: 14px;
  color: var(--vf-ink-3, #8892A6);
}
.quotes-templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.quotes-template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.quotes-template-card:hover {
  border-color: var(--vf-blue);
  box-shadow: 0 2px 12px rgba(26,86,255,0.10);
  transform: translateY(-1px);
}
.quotes-template-k {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3, #8892A6);
}
.quotes-template-t {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vf-ink, #0A0F1A);
}
.quotes-template-s {
  font-size: 13px;
  line-height: 1.45;
  color: var(--vf-ink-3, #8892A6);
  flex: 1 1 auto;
}
.quotes-template-go {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-blue);
}
@media (max-width: 760px) {
  .quotes-templates-grid { grid-template-columns: 1fr; }
}

.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: 13px 22px;
  background: var(--vf-blue, #095EDF);
  color: #fff;
  border: none;
  border-radius: 999px;
  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. */
/* Compact "Invoiced (payment due)" row — no cover, no document grid; just the
   signed total, the project status, and a link back to the signed quotation. */
.quotes-invrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
  min-width: 0;
}
.quotes-invrow:hover {
  border-color: var(--vf-ink-3, #8892A6);
  box-shadow: 0 2px 10px rgba(10,15,26,0.05);
}
.quotes-invrow-main {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}
.quotes-invrow-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--vf-ink, #0A0F1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.quotes-invrow-total {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--vf-blue);
  white-space: nowrap;
  flex: 0 0 auto;
}
.quotes-invrow-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
@media (max-width: 760px) {
  .quotes-invrow { flex-direction: column; align-items: stretch; gap: 10px; }
  .quotes-invrow-main { justify-content: space-between; }
  .quotes-invrow-right { justify-content: space-between; }
}

.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: 148px;
  height: 92px;          /* landscape thumbnail, top-aligned */
  align-self: flex-start;
  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;
  flex-wrap: wrap;
  gap: 6px 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;
}

/* Labeled action rows on a production card — Quote / Call sheet / RAMS each
   get a left label so the three doc types read as a tidy grid rather than a
   stack of loose buttons. */
.quotes-card-docs { margin-top: 6px; }
.quotes-doc-row { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; }
.quotes-doc-row + .quotes-doc-row { border-top: 1px solid var(--vf-line, #E6E8EE); }
.quotes-doc-label {
  flex: 0 0 116px; padding-top: 7px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vf-ink-3, #8892A6);
}
.quotes-doc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* Right-hand controls on each doc row: inline quote status (quote row only)
   + the remove (X) affordance. Pushed to the row's right edge. */
.quotes-doc-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 2px; }
/* Keep the status pill flush right (aligned with the project-status badge) —
   the remove (X) sits to its left so its reserved space doesn't push it in. */
.quotes-doc-right .quotes-doc-remove,
.quotes-doc-right .quotes-doc-remove-confirm { order: -1; }
@media (max-width: 640px) {
  .quotes-doc-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 0; }
  .quotes-doc-label { flex-basis: auto; padding-top: 0; }
  .quotes-doc-right { margin-left: 0; justify-content: flex-end; padding-top: 0; }
}

/* Kit-list hover summary — a quick "general gist" popover (cameras / lenses /
   lighting…) parsed from the PDF. Floats above the View kit list button. */
.quotes-kit-hoverwrap { position: relative; display: inline-flex; }
.quotes-kit-pop {
  position: absolute;
  bottom: calc(100% + 9px);
  right: 0;
  z-index: 50;
  width: 330px;
  max-width: min(330px, 78vw);
  background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(10,15,26,0.18);
  padding: 12px 14px;
  text-align: left;
  cursor: default;
  transform-origin: bottom right;
  animation: quotesKitPop 0.16s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes quotesKitPop {
  from { opacity: 0; transform: translateY(7px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Little downward pointer toward the button. */
.quotes-kit-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 24px;
  border: 7px solid transparent;
  border-top-color: #fff;
}
.quotes-kit-pop::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  right: 23px;
  border: 8px solid transparent;
  border-top-color: var(--vf-line, #E6E8EE);
}
.quotes-kit-pop-head {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--vf-ink-3, #8892A6);
  margin-bottom: 9px;
}
.quotes-kit-pop-state {
  font-size: 13px; color: var(--vf-ink-3, #8892A6);
  display: flex; align-items: center; gap: 7px; line-height: 1.4;
}
.quotes-kit-pop-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.quotes-kit-pop-group { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.quotes-kit-pop-cat {
  flex: 0 0 74px; font-weight: 700; color: var(--vf-blue);
}
.quotes-kit-pop-items { flex: 1 1 auto; min-width: 0; color: var(--vf-ink, #0A0F1A); }
.quotes-kit-pop-engine {
  margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--vf-line, #E6E8EE);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: 0.02em; color: var(--vf-ink-3, #8892A6); opacity: 0.8;
}
@media (max-width: 640px) {
  .quotes-kit-pop { right: auto; left: 0; }
  .quotes-kit-pop::after, .quotes-kit-pop::before { right: auto; left: 24px; }
}

/* ── Icon-only "+" generate buttons (solid blue, square) ─────────────── */
.quotes-row-btn-icon { padding: 8px; }
.quotes-row-btn-icon .quotes-btn-icon { margin-right: 0; }

/* ── Struck-off rows (un-produced docs on a fully-closed production) ──── */
.quotes-doc-row.is-struck .quotes-doc-label { text-decoration: line-through; opacity: 0.5; }
.quotes-doc-struck-note {
  font-size: 12.5px; font-style: italic; color: var(--vf-ink-4, #A0A8B8);
  text-decoration: line-through; text-decoration-color: rgba(160,168,184,0.6);
}

/* ── Remove (X) per-row, with two-step confirm ──────────────────────── */
.quotes-doc-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--vf-ink-4, #A0A8B8);
  opacity: 0; pointer-events: none;            /* revealed on row hover/focus */
  transition: opacity .12s, background .12s, color .12s, border-color .12s;
}
/* Reveal the remove (X) only when the row is hovered or keyboard-focused. */
.quotes-doc-row:hover .quotes-doc-remove,
.quotes-doc-row:focus-within .quotes-doc-remove { opacity: 1; pointer-events: auto; }
.quotes-doc-remove .quotes-btn-icon { margin-right: 0; }
.quotes-doc-remove:hover { background: rgba(220,38,38,0.10); color: #DC2626; border-color: rgba(220,38,38,0.30); }
.quotes-doc-remove-confirm { display: inline-flex; align-items: center; gap: 4px; }
.quotes-doc-remove-yes {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(220,38,38,0.55);
  background: rgba(220,38,38,0.10); color: #B91C1C;
}
.quotes-doc-remove-yes:hover { background: rgba(220,38,38,0.18); }
.quotes-doc-remove-no {
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  padding: 5px 9px; border-radius: 7px; border: 1px solid var(--vf-line, #E6E8EE);
  background: #fff; color: var(--vf-ink-3, #8892A6);
}
.quotes-doc-remove-no:hover { border-color: var(--vf-ink-3, #8892A6); }

/* ── "Removed" restore footer ───────────────────────────────────────── */
.quotes-docs-hidden {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--vf-line, #E6E8EE);
}
.quotes-docs-hidden-label {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vf-ink-4, #A0A8B8);
}
.quotes-docs-restore {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--vf-ink-3, #8892A6);
  padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--vf-line, #CFD3DC); background: transparent;
}
.quotes-docs-restore .quotes-btn-icon { margin-right: 0; width: 12px; height: 12px; }
.quotes-docs-restore:hover { color: var(--vf-blue, #095EDF); border-color: var(--vf-blue, #095EDF); background: rgba(9,94,223,0.05); }

/* ── Prominent, colour-coded Project Status badge (card head) ────────── */
.quotes-card-prodstatus {
  flex-shrink: 0; max-width: 100%; min-width: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(10,15,26,0.07); color: rgba(10,15,26,0.55);
  transition: filter .12s;
}
.quotes-card-prodstatus:hover { filter: brightness(0.96); }
.quotes-prodstatus-label { white-space: nowrap; }
.quotes-card-prodstatus .quotes-btn-icon { margin-right: 0; width: 12px; height: 12px; }
/* Project-status menu reuses the financial menu chrome; cap height (long list). */
.quotes-psmenu { left: auto; right: 0; min-width: 210px; max-height: 320px; overflow-y: auto; }
.quotes-ps-yellow { background: rgba(234,179,8,0.18);  color: #946A00; }
.quotes-ps-blue   { background: rgba(9,94,223,0.12);   color: var(--vf-blue, #095EDF); }
.quotes-ps-green  { background: rgba(19,138,77,0.14);  color: #138A4D; }
.quotes-ps-orange { background: rgba(234,88,12,0.15);  color: #C2410C; }
.quotes-ps-red    { background: rgba(220,38,38,0.13);  color: #B91C1C; }
.quotes-ps-gray   { background: rgba(10,15,26,0.07);   color: rgba(10,15,26,0.55); }

/* ── Inline quote-status control (Quote row) + hover menu ───────────── */
.quotes-fsctl { position: relative; flex-shrink: 0; }
.quotes-fspill {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px 3px 10px; border-radius: 999px; border: 1px solid transparent;
  background: rgba(10,15,26,0.07); color: rgba(10,15,26,0.55); transition: filter .12s;
}
.quotes-fspill:hover { filter: brightness(0.96); }
.quotes-fspill .quotes-btn-icon { margin-right: 0; width: 12px; height: 12px; }
.quotes-fspill-caret { font-size: 9px; opacity: 0.65; }
.quotes-fspill.quotes-fs-generated, .quotes-fspill.quotes-fs-revision-generated { background: rgba(9,94,223,0.10); color: var(--vf-blue, #095EDF); }
.quotes-fspill.quotes-fs-to-quote, .quotes-fspill.quotes-fs-requested, .quotes-fspill.quotes-fs-processing { background: rgba(255,170,0,0.13); color: #B27000; }
.quotes-fspill.quotes-fs-quotation-sent { background: rgba(26,86,255,0.12); color: var(--vf-blue, #1a56ff); }
.quotes-fspill.quotes-fs-signed { background: rgba(19,138,77,0.13); color: #138a4d; }
.quotes-fspill.quotes-fs-invoiced { background: rgba(9,94,223,0.12); color: var(--vf-blue, #095EDF); }
.quotes-fspill.quotes-fs-paid { background: rgba(19,138,77,0.16); color: #138a4d; }
.quotes-fspill.quotes-fs-cancelled { background: rgba(10,15,26,0.08); color: rgba(10,15,26,0.5); }
.quotes-fspill.quotes-fs-generation-failed { background: rgba(220,38,38,0.12); color: #B91C1C; }
.quotes-fsmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 172px; padding: 5px;
  background: #fff; border: 1px solid var(--vf-line, #E6E8EE); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(10,15,26,0.14), 0 3px 8px rgba(10,15,26,0.08);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s, transform .12s, visibility .12s;
}
.quotes-fsctl:hover .quotes-fsmenu,
.quotes-fsctl:focus-within .quotes-fsmenu { opacity: 1; visibility: visible; transform: translateY(0); }
.quotes-fsmenu-head {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vf-ink-4, #A0A8B8); padding: 4px 8px 6px;
}
.quotes-fsmenu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--vf-ink, #0A0F1A);
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
}
.quotes-fsmenu-item:hover { background: rgba(9,94,223,0.08); color: var(--vf-blue, #095EDF); }

/* ── Kit-list pre-quote prompt modal ────────────────────────────────── */
.quotes-kl-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.quotes-kl-backdrop { position: absolute; inset: 0; background: rgba(10,15,26,0.45); }
.quotes-kl-card { position: relative; z-index: 1; width: 100%; max-width: 440px; background: #fff;
  border: 1px solid var(--vf-line, #E6E8EE); border-radius: 14px; padding: 24px 24px 20px;
  box-shadow: 0 24px 60px rgba(10,15,26,0.25); }
.quotes-kl-title { font-size: 18px; font-weight: 700; color: var(--vf-ink, #0A0F1A); margin: 0 0 8px; letter-spacing: -0.01em; }
.quotes-kl-sub { font-size: 14px; line-height: 1.55; color: var(--vf-ink-3, #5A6273); margin: 0 0 18px; }
.quotes-kl-err { margin: 0 0 14px; }
.quotes-kl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quotes-kl-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 7px;
  border: 0; background: transparent; color: var(--vf-ink-4, #A0A8B8); font-size: 14px; line-height: 1; cursor: pointer; }
.quotes-kl-close:hover { background: rgba(10,15,26,0.06); color: var(--vf-ink-2, #4A5168); }

/* Signed & invoiced archive — a collapsed group the operator expands to see
   the record of past signed quotes. */
.quotes-dash-archive-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1px dashed var(--vf-line, #E6E8EE); border-radius: 10px;
  background: var(--vf-bg-tint, #EFF1F5); cursor: pointer; font-family: inherit;
}
.quotes-dash-archive-toggle:hover { border-color: var(--vf-ink-3, #8892A6); }
.quotes-dash-archive-hint { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--vf-blue, #095EDF); }

/* 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;
}
/* Row actions — pill-shaped to match the shared admin button family
   (.kp-btn-small in kit-tech-portal.css): same 999px radius and tokens as the
   Equipment-page buttons, just sized down for table rows. */
.quotes-row-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  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: var(--vf-surface, #fff);
  color: var(--vf-ink, #0A0F1A);
  border-color: var(--vf-line, #E6E8EE);
}
.quotes-row-btn-ghost:hover { border-color: var(--vf-blue, #095EDF); color: var(--vf-blue, #095EDF); }

/* 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;
}
/* "Mark as paid" — the money-in action on an Invoiced row. Green so it reads
   as a positive close-out, distinct from the neutral ghost "View quotation". */
.quotes-row-btn-paid {
  background: rgba(19,138,77,0.10);
  color: #0f7a43;
  border-color: rgba(19,138,77,0.45);
}
.quotes-row-btn-paid:hover {
  background: rgba(19,138,77,0.18);
  border-color: #0f7a43;
  transform: translateY(-1px);
}
.quotes-row-btn-paid:disabled {
  cursor: default;
  opacity: 0.7;
  transform: none;
}
.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;
}
/* Generation progress bar — fills left→right over the typical generation
   time so the operator sees forward motion (vs. an indefinite spinner).
   It eases toward ~95% and holds there until the quote is actually ready
   (the row swaps to the Edit/View buttons), so it never claims "done" early. */
.quotes-gen { display: inline-flex; align-items: center; gap: 9px; }
.quotes-gen-bar {
  position: relative;
  width: 130px;
  height: 5px;
  border-radius: 999px;
  background: rgba(9, 94, 223, 0.14);
  overflow: hidden;
}
.quotes-gen-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6%;
  border-radius: 999px;
  background: var(--vf-blue, #095EDF);
  animation: quotes-gen-fill 55s linear forwards;
}
@keyframes quotes-gen-fill {
  0%   { width: 6%; }
  20%  { width: 40%; }
  45%  { width: 65%; }
  75%  { width: 85%; }
  100% { width: 95%; }
}
.quotes-gen-label { font-size: 12px; color: var(--vf-ink-3, #8892A6); font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .quotes-gen-bar-fill { animation-duration: 0.01s; width: 60%; }
  /* Respect the OS "reduce motion" preference site-wide — marquee, fades,
     parallax and transitions are minimised while the site stays usable. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

@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; }
}

/* ─────────────────────────────────────────────────────────────────────
   Call sheets — the second doc type on each production card, plus the
   in-portal editor modal. Shares the quote palette (--vf-blue etc.).
   ───────────────────────────────────────────────────────────────────── */

/* Action cluster on the card — separated from the quote actions above by a
   dashed rule so the two doc types read as distinct groups. */
.quotes-card-cs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--vf-line, #E6E8EE);
}
/* Call-sheet primary button — a blue-tinted outline so it's clearly its own
   action, distinct from the solid-blue quote primary. */
.quotes-row-btn-cs {
  background: rgba(9,94,223,0.07);
  color: var(--vf-blue, #095EDF);
  border-color: rgba(9,94,223,0.25);
}
.quotes-row-btn-cs:hover {
  background: rgba(9,94,223,0.13);
  border-color: var(--vf-blue, #095EDF);
  transform: translateY(-1px);
}

/* Editor modal */
.cs-ed-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,15,26,0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cs-ed-panel {
  background: #fff; border-radius: 16px; overflow: hidden;
  width: min(1180px, 100%); height: min(92vh, 940px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(10,15,26,0.40);
}
.cs-ed-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--vf-line, #E6E8EE);
  background: #fff; flex-shrink: 0;
}
.cs-ed-bar-title { display: flex; flex-direction: column; min-width: 0; }
.cs-ed-bar-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vf-blue, #095EDF);
}
.cs-ed-bar-name {
  font-size: 16px; font-weight: 650; color: var(--vf-ink, #0A0F1A);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-ed-bar-save { margin-left: auto; font-size: 12px; color: var(--vf-ink-3, #8892A6); white-space: nowrap; }
.cs-ed-bar-save-saved { color: #138a4d; }
.cs-ed-bar-save-error { color: #B00020; }
.cs-ed-bar-actions { display: flex; align-items: center; gap: 10px; }
.cs-ed-bar-view { font-size: 13px; font-weight: 600; color: var(--vf-blue, #095EDF); text-decoration: none; }
.cs-ed-bar-view:hover { text-decoration: underline; }
.cs-ed-bar-done {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--vf-blue, #095EDF);
  background: var(--vf-blue, #095EDF); color: #fff; font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.cs-ed-bar-done:hover { background: #0750C2; }
.cs-ed-hist-wrap { position: relative; }
.cs-ed-bar-hist {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--vf-line, #E6E8EE);
  background: #fff; color: var(--vf-ink-2, #4A5168); font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.cs-ed-bar-hist:hover { border-color: var(--vf-ink-3, #8892A6); }
.cs-ed-hist-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
  width: 320px; max-height: 360px; overflow-y: auto;
  background: #fff; border: 1px solid var(--vf-line, #E6E8EE); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10,15,26,0.16); padding: 6px;
}
.cs-ed-hist-empty { padding: 12px; font-size: 12.5px; color: var(--vf-ink-3, #8892A6); }
.cs-ed-hist-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  text-align: left; cursor: pointer; font-family: inherit;
}
.cs-ed-hist-row:hover { background: var(--vf-bg-tint, #EFF1F5); }
.cs-ed-hist-row:disabled { opacity: 0.5; cursor: default; }
.cs-ed-hist-when { font-size: 11px; color: var(--vf-ink-3, #8892A6); white-space: nowrap; flex-shrink: 0; }
.cs-ed-hist-sum { flex: 1; font-size: 12.5px; color: var(--vf-ink, #0A0F1A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-ed-hist-act { font-size: 11px; font-weight: 600; color: var(--vf-blue, #095EDF); white-space: nowrap; flex-shrink: 0; }
.cs-ed-loading { flex: 1; display: flex; align-items: center; justify-content: center; }
.cs-ed-body { flex: 1; display: flex; min-height: 0; }
.cs-ed-form { flex: 1 1 52%; min-width: 0; overflow-y: auto; padding: 22px 24px 60px; background: #FAFBFC; }
.cs-ed-preview {
  flex: 1 1 48%; min-width: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--vf-line, #E6E8EE); background: #EEF0F3;
}
.cs-ed-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; font-size: 12px; color: var(--vf-ink-3, #8892A6);
  border-bottom: 1px solid var(--vf-line, #E6E8EE); background: #fff; flex-shrink: 0;
}
.cs-ed-preview-head a { color: var(--vf-blue, #095EDF); text-decoration: none; font-weight: 600; }
.cs-ed-preview-frame { flex: 1; width: 100%; border: 0; background: #EEF0F3; }
.cs-ed-preview-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--vf-ink-3, #8892A6); font-size: 13px; }

.cs-ed-sec { margin-bottom: 22px; }
.cs-ed-sec-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vf-ink-3, #8892A6); margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--vf-line, #E6E8EE);
}
.cs-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-ed-field { display: flex; flex-direction: column; gap: 5px; }
.cs-ed-field-full { grid-column: 1 / -1; }
.cs-ed-label { font-size: 11px; font-weight: 600; color: var(--vf-ink-2, #4A5168); }
.cs-ed-input {
  font-family: inherit; font-size: 13px; color: var(--vf-ink, #0A0F1A);
  padding: 8px 10px; border: 1px solid var(--vf-line, #E6E8EE); border-radius: 8px;
  background: #fff; width: 100%; transition: border-color 0.12s, box-shadow 0.12s;
}
.cs-ed-input:focus { outline: none; border-color: var(--vf-blue, #095EDF); box-shadow: 0 0 0 3px rgba(9,94,223,0.12); }
textarea.cs-ed-input { resize: vertical; line-height: 1.45; }

.cs-ed-table { display: flex; flex-direction: column; gap: 6px; }
.cs-ed-table-head, .cs-ed-trow { display: flex; gap: 6px; align-items: center; }
.cs-ed-table-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--vf-ink-3, #8892A6); padding: 0 2px 2px;
}
.cs-ed-table-head > span { padding: 0 2px; }
.cs-ed-rowdel-sp { width: 26px; flex-shrink: 0; }
.cs-ed-cell {
  font-family: inherit; font-size: 12.5px; color: var(--vf-ink, #0A0F1A);
  padding: 7px 8px; border: 1px solid var(--vf-line, #E6E8EE); border-radius: 7px;
  background: #fff; min-width: 0;
}
.cs-ed-cell:focus { outline: none; border-color: var(--vf-blue, #095EDF); box-shadow: 0 0 0 3px rgba(9,94,223,0.10); }
.cs-ed-rowdel {
  flex-shrink: 0; width: 26px; height: 30px; border-radius: 7px;
  border: 1px solid var(--vf-line, #E6E8EE); background: #fff;
  color: var(--vf-ink-3, #8892A6); font-size: 16px; line-height: 1; cursor: pointer;
}
.cs-ed-rowdel:hover { border-color: #B00020; color: #B00020; }
.cs-ed-add {
  align-self: flex-start; margin-top: 2px; padding: 6px 12px;
  border: 1px dashed #C7CCD6; border-radius: 7px; background: transparent;
  color: var(--vf-ink-2, #4A5168); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cs-ed-add:hover { border-color: var(--vf-blue, #095EDF); color: var(--vf-blue, #095EDF); }

@media (max-width: 900px) {
  .cs-ed-preview { display: none; }   /* form-first on small screens — use Open ↗ */
  .cs-ed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cs-ed-overlay { padding: 0; }
  .cs-ed-panel { width: 100%; height: 100%; border-radius: 0; }
}

/* Public site — department heading inside the team stack (Production / Post). */
.team-dept-head {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vf-blue-400, #6F93FF);
}
.team-dept-head:first-child { margin-top: 0; }

/* Productions portal — per-card crew heads-up. A quiet one/two-line summary of
   who's on the production (VF Production + Additional crew, then Post), pulled
   live from the production's Notion crew fields. Sits between the meta row and
   the document grid. */
.quotes-card-crew {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 2px 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vf-ink-2, #4A5468);
}
.quotes-card-crew-seg { min-width: 0; }
.quotes-card-crew-k {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3, #8892A6);
  margin-right: 5px;
}

/* =====================================================================
 * Productions — view toolbar (List/Board toggle + search + job filter) and
 * the project-phase kanban board. Token-based, so it follows the admin theme.
 * ===================================================================== */
.prod-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 20px; }
.prod-views, .prod-jobs { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.prod-jobs { margin-left: auto; }
.prod-search {
  flex: 1 1 200px; min-width: 0; max-width: 300px;
  font: inherit; font-size: 14px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--vf-line); background: var(--vf-surface); color: var(--vf-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.prod-search:focus { outline: none; border-color: var(--vf-blue); box-shadow: 0 0 0 3px rgba(9,94,223,0.12); }
.prod-search::placeholder { color: var(--vf-ink-4); }

.prod-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; }
.prod-col {
  flex: 0 0 264px; width: 264px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--vf-bg-tint); border: 1px solid var(--vf-line);
  border-radius: 14px; padding: 12px; min-height: 110px;
  transition: border-color 140ms ease, background 140ms ease;
}
.prod-col.is-over { border-color: var(--vf-blue); background: var(--vf-blue-50); }
.prod-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px 4px 10px; border-left: 3px solid var(--vf-ink-4); border-radius: 3px;
}
.prod-col-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--vf-ink-2); }
.prod-col-count {
  font-size: 11px; font-weight: 700; color: var(--vf-ink-4);
  background: var(--vf-surface); border: 1px solid var(--vf-line);
  border-radius: 999px; padding: 1px 8px;
}
.prod-ph-yellow { border-left-color: #E0A400; }
.prod-ph-blue   { border-left-color: var(--vf-blue); }
.prod-ph-green  { border-left-color: #1F9D55; }
.prod-ph-orange { border-left-color: #C97A0A; }
.prod-ph-red    { border-left-color: #D7263D; }
.prod-ph-gray   { border-left-color: var(--vf-ink-4); }
.prod-col-body { display: flex; flex-direction: column; gap: 8px; }
.prod-card {
  background: var(--vf-surface); border: 1px solid var(--vf-line);
  border-radius: 11px; overflow: hidden; cursor: grab;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.prod-card:hover { border-color: var(--vf-ink-4); box-shadow: 0 4px 12px rgba(10,15,26,0.06); }
.prod-card.is-dragging { opacity: 0.5; }
.prod-card-thumb { aspect-ratio: 16 / 9; background: var(--vf-blue-50); }
.prod-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-card-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; }
.prod-card-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--vf-ink); }
.prod-card-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--vf-ink-3); }
.prod-card-job { font-weight: 600; }
.prod-card-fs { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-ink-4); }
.prod-card-link { font-size: 11.5px; font-weight: 600; color: var(--vf-blue); text-decoration: none; width: fit-content; }
.prod-card-link:hover { text-decoration: underline; }
.prod-col-empty {
  font-size: 11.5px; color: var(--vf-ink-4); text-align: center;
  padding: 12px 0; border: 1px dashed var(--vf-line); border-radius: 9px;
}

/* ===================================================================
   Public feature-request popup (Shift+E staff tool). Self-contained,
   scoped under .vf-fr so it never touches the Studio's own feat-* modal
   (which is gated to body.vf-studio). Tokens resolve from :root. The
   markup mirrors the Studio modal's class names; these rules restyle them
   for the light public site.
   =================================================================== */
.vf-fr.feat-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,15,26,0.44); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vf-fr .feat-modal { position: relative; width: min(460px, 100%); background: var(--bg-elev, #fff); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 32px 80px rgba(10,15,26,0.34); padding: 22px 24px 20px; color: var(--fg1); }
/* Sent flash — a Studio-style check pop shown for under a second before the
   modal closes itself, so submitting never blocks what you do next. */
.vf-fr .feat-sentflash { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 10px; }
.vf-fr .feat-sentcheck { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #1F8A47; color: #fff; animation: vfFrSentPop 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.vf-fr .feat-sentcheck::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31,138,71,0.45); animation: vfFrSentRing 640ms ease-out both; }
.vf-fr .feat-senttext { font-size: 14px; font-weight: 600; color: var(--fg1, #0A0F1A); }
@keyframes vfFrSentPop { from { opacity: 0; transform: scale(0.5); } 60% { transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes vfFrSentRing { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .vf-fr .feat-sentcheck, .vf-fr .feat-sentcheck::after { animation: none; } }
.vf-fr .feat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.vf-fr .feat-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--fg1); }
.vf-fr .feat-head-acts { display: inline-flex; align-items: center; gap: 4px; }
.vf-fr .feat-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--fg4); cursor: pointer; padding: 0 2px; }
.vf-fr .feat-close:hover { color: var(--fg1); }
.vf-fr .feat-gate-note { margin: 0 0 16px; font-size: 13px; color: var(--fg3); line-height: 1.5; }
.vf-fr .feat-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.vf-fr .feat-field > span { font-size: 12px; font-weight: 600; color: var(--fg2); }
.vf-fr .feat-opt { font-weight: 500; color: var(--fg4); }
.vf-fr .feat-field input, .vf-fr .feat-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; background: var(--bg-tint); font: inherit; font-size: 14px; color: var(--fg1); outline: none; resize: vertical; }
.vf-fr .feat-field input:focus, .vf-fr .feat-field textarea:focus { border-color: var(--vf-blue); }
.vf-fr .feat-combo { position: relative; }
.vf-fr .feat-comboinput { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; background: var(--bg-tint); font: inherit; font-size: 14px; color: var(--fg1); outline: none; }
.vf-fr .feat-comboinput:focus { border-color: var(--vf-blue); }
.vf-fr .feat-combopop { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 6; background: var(--bg-elev, #fff); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 14px 40px rgba(10,15,26,0.18); padding: 5px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.vf-fr .feat-comboopt { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13px; color: var(--fg1); cursor: pointer; }
.vf-fr .feat-comboopt:hover { background: var(--bg-tint); }
.vf-fr .feat-comboadd { color: var(--vf-blue); font-weight: 600; }
.vf-fr .feat-combonone { padding: 8px 10px; font-size: 12px; color: var(--fg4); }
.vf-fr .feat-segrow { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.vf-fr .feat-segfield { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.vf-fr .feat-seglabel { font-size: 12px; font-weight: 600; color: var(--fg2); }
.vf-fr .feat-seg { display: flex; gap: 4px; }
.vf-fr .seg-toggle { display: inline-flex; background: var(--bg-tint); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; }
.vf-fr .feat-seg.seg-toggle { width: 100%; }
.vf-fr .seg-btn { flex: 1; justify-content: center; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; background: none; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg2); cursor: pointer; transition: background 130ms ease, color 130ms ease; }
.vf-fr .seg-btn.is-on { background: var(--vf-blue); color: #fff; }
.vf-fr .feat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 2px; }
.vf-fr .feat-err { margin-right: auto; font-size: 12px; color: var(--danger-text); font-weight: 600; }
.vf-fr .feat-viewbtn { margin-right: auto; display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-tint); font: inherit; font-size: 13px; font-weight: 600; color: var(--fg1); text-decoration: none; cursor: pointer; transition: background 130ms ease, border-color 130ms ease, color 130ms ease; }
.vf-fr .feat-viewbtn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
.vf-fr .tk-addtask { height: 38px; padding: 0 17px; border-radius: 999px; border: 0; background: var(--vf-blue); color: #fff; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: filter 140ms ease, transform 120ms ease; }
.vf-fr .tk-addtask:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vf-fr .tk-addtask:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Bottom-docked variant: small, no dim/blur — the page above stays visible and
   usable as reference for the element picker + screenshot tools. */
.vf-fr.feat-backdrop.feat-backdrop-dock { align-items: flex-end; justify-content: center; padding: 0 16px 18px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vf-fr.feat-backdrop-dock .feat-modal { width: min(430px, 100%); box-shadow: 0 18px 60px rgba(10,15,26,0.35); border-color: var(--line-strong); }

/* Annotate toolbar (shared markup with the Studio modal — restyled here for
   the light public site). */
.vf-fr .feat-annotate { margin-bottom: 14px; }
.vf-fr .feat-annotate-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vf-fr .feat-annotate-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line-strong); background: var(--bg-tint); color: var(--fg2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color 130ms ease, color 130ms ease; }
.vf-fr .feat-annotate-btn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
.vf-fr .feat-annotate-err { font-size: 11.5px; color: var(--danger-text, #C43C3C); font-weight: 600; }
.vf-fr .feat-annotate-chips { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.vf-fr .feat-annotate-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--line-strong); background: var(--bg-elev, #fff); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--fg2); }
.vf-fr .feat-annotate-chiptext { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-fr .feat-annotate-imgchip { padding: 3px; border-radius: 8px; }
.vf-fr .feat-annotate-imgchip img { display: block; height: 42px; border-radius: 6px; }
.vf-fr .feat-annotate-x { border: 0; background: none; color: var(--fg4); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.vf-fr .feat-annotate-x:hover { color: var(--danger-text, #C43C3C); }