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

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

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

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: rgba(7,8,12,0.28);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 220ms;
}
.nav.is-light {
  background: rgba(247,248,250,0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(10,15,26,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.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;
}
.nav .brand-logo {
  height: 26px;
  width: auto;
  display: block;
}
/* 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); }
/* Hover preview — real video on fine-pointer devices, animated webp on
   touch. See TileHoverPreview in components-hero.jsx for the gating
   logic. The element is layered over .tile-bg and faded in on hover;
   the video version stays at opacity:0 until it starts playing
   (.is-playing) so the still image doesn't flicker to a black <video>
   while the first frame is being fetched. */
.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;
}
/* Touch fallback (webp) reveals on hover the moment the parent has it. */
.tile:hover img.tile-bg-preview,
.tile:focus-visible img.tile-bg-preview {
  opacity: 1;
  transform: scale(1.04);
}
/* Real-video variant only fades in once the loaded video starts playing,
   so a slow network never lets the black <video> element peek through
   the static thumbnail. */
.tile:hover video.tile-bg-preview.is-playing,
.tile:focus-visible video.tile-bg-preview.is-playing {
  opacity: 1;
  transform: scale(1.04);
}
.tile-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,12,0.55) 0%, rgba(7,8,12,0) 38%);
  pointer-events: none;
}
.tile-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,12,0) 40%, rgba(7,8,12,0.85) 100%);
}
.tile-meta-top {
  position: absolute;
  left: 24px; right: 24px; top: 24px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.tile-meta-top .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
}
.tile-play-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(7,8,12,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  color: white;
  cursor: pointer;
  padding: 0;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.tile-play-btn svg { margin-left: 1px; }
.tile:hover .tile-play-btn { background: var(--vf-blue); border-color: var(--vf-blue); transform: scale(1.06); }
.tile-content {
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  z-index: 1;
}
.tile-content .title {
  font-family: var(--font-display, inherit);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: white;
  text-wrap: balance;
}
.tile.featured .title { font-size: clamp(28px, 3vw, 40px); }
.tile.col-12 .title { font-size: clamp(28px, 3vw, 40px); }
.tile-content .chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tile-content .chip {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10);
}
.tile-content .chip:first-child {
  background: rgba(9,94,223,0.32);
  border-color: rgba(78,163,255,0.38);
  color: rgba(255,255,255,0.98);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Mega footer wordmark ===== */
.mega-footer {
  padding: 96px 0 32px;
  background: var(--vf-night);
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
}
.footer-cols .brand-col img { height: 28px; margin-bottom: 24px; }
.footer-cols .brand-col p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; max-width: 320px; }
.footer-cols h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.footer-cols ul {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
}
.footer-cols ul li, .footer-cols .col p {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 200ms;
}
.footer-cols ul li:hover { color: var(--vf-blue-400); }
.footer-wordmark {
  font-size: clamp(120px, 22vw, 360px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: white;
  margin: 0 -32px;
  padding: 0 32px;
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  white-space: nowrap;
  overflow: hidden;
}
.footer-wordmark em {
  font-style: italic;
  color: var(--vf-blue);
  font-weight: 500;
}
.footer-wordmark .star { color: var(--vf-blue); font-style: normal; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.footer-bottom .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); }
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 0 96px;
}
.journal-card {
  cursor: pointer;
}
.journal-card .cover {
  aspect-ratio: 4/3;
  border-radius: 22px;
  background-size: cover; background-position: center;
  margin-bottom: 18px;
  overflow: hidden;
}
.journal-card .cover-inner {
  width: 100%; height: 100%;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 800ms var(--ease-out);
}
.journal-card:hover .cover-inner { transform: scale(1.05); }
.journal-card .meta {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.journal-card .meta .cat { color: var(--vf-blue-400); }
.journal-card h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  text-wrap: balance;
}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

/* ===================================================================
   Nav: rentals brand + hide rentals link off-page
   =================================================================== */
.nav.is-rentals .brand .brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}


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

  /* Journal */
  .journal-grid { grid-template-columns: 1fr; gap: 20px; }

  /* 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,
.journal-card: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;
}