/* Shared identity: one font, common navigation, and a restrained text scale. */
:root {
  --vf-font-family: "Inter Tight", sans-serif;
  --vf-text-body: clamp(1rem, .95rem + .2vw, 1.125rem);
  --vf-text-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --vf-title-page: clamp(2.5rem, 1.3rem + 4.8vw, 5.25rem);
  --vf-title-section: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  --vf-title-card: clamp(1.375rem, 1.1rem + .8vw, 1.875rem);
  --vf-header-inset: clamp(20px, 3.5vw, 50px);
}

body, button, input, select, textarea, optgroup { font-family: var(--vf-font-family); }
.header { color: #fff; }
.header.inverted { color: #151713; }
.header .navigation { margin-inline: var(--vf-header-inset); }
.header .navigation .navigation-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; min-height: 40px; }
.header .navigation .navigation-inner .logo-wrapper.vf-brand-wordmark { display: inline-flex; align-items: baseline; justify-self: center; gap: 5px; color: inherit; font-family: var(--vf-font-family); font-size: 34px; font-weight: 750; line-height: 1; letter-spacing: -.065em; text-decoration: none; }
.header .navigation .navigation-inner .vf-brand-wordmark > span { font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.header .navigation .navigation-inner .nav-left, .header .navigation .navigation-inner .nav-right { font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: .035em; }
.header .navigation .navigation-inner .nav-left { justify-self: start; }
.header .vf-header-actions { display: flex; align-items: center; justify-self: end; gap: 18px; }
.header .vf-brand-switch { justify-content: space-between; gap: 8px; padding: 8px 12px; min-width: 106px; min-height: 32px; font-size: 12px; }
.header .navigation .navigation-inner .vf-menu-toggle { min-height: 40px; padding-block: 8px; gap: 10px; }
.header .vf-menu-icon { width: 20px; gap: 5px; }
.vf-films-page .header .navigation, .vf-studio-page .header .navigation { margin-top: 20px; margin-bottom: 12px; }
.vf-films-page .header .navigation .navigation-inner .vf-films-logo { display: block; line-height: 0; }
.vf-films-page .header .navigation .navigation-inner .vf-films-logo .logo { width: 116px; height: auto; }
.vf-studio-page .header, .vf-studio-page .header.inverted { color: #f7f7f2; }
.vf-menu-open .header { color: #151713; }
.vf-studio-page.vf-menu-open .header { color: #f7f7f2; }
.header .logo-wrapper:focus-visible, .header .nav-left:focus-visible { outline: 3px solid #3fff71; outline-offset: 6px; }

/* Films text hierarchy. Studio retains its existing composition and dark palette. */
.vf-films-page :where(h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, blockquote, figcaption, pre, code) { font-family: var(--vf-font-family); }
.vf-films-page :where(p, .entry-content li, .production-single-content li) { font-size: var(--vf-text-body); line-height: 1.65; }
.vf-films-page :where(h1, h2, h3) { text-wrap: balance; }
.vf-films-page #primary .intro-section .intro-text .intro-title,
.vf-films-page #primary .page-header .page-title .title,
.vf-films-page #primary .vf-services-intro h1 { font-size: var(--vf-title-page); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; }
.vf-films-page #primary .services-home-section .services-title,
.vf-films-page #primary .productions-header .title,
.vf-films-page #primary .quote-section .quote-text,
.vf-films-page #primary .vf-services-section-heading h2,
.vf-films-page #primary .vf-team-heading h2,
.vf-films-page #primary .vf-services-outro h2,
.vf-films-page #primary .faq-section .faq-title { font-size: var(--vf-title-section); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.vf-films-page #primary .intro-section .intro-text .intro-description,
.vf-films-page #primary .vf-services-intro-bottom > p { max-width: 64ch; font-size: var(--vf-text-lead); line-height: 1.65; font-weight: 400; }
.vf-films-page #primary .services-home-section .services-description { max-width: 60ch; font-size: var(--vf-text-body); line-height: 1.65; }
.vf-films-page #primary .service-card .card-header .card-title,
.vf-films-page #primary .vf-service-card h3 { font-size: var(--vf-title-card); line-height: 1.2; letter-spacing: -.025em; }
.vf-films-page #primary .service-card .card-description { font-family: var(--vf-font-family); font-size: var(--vf-text-body); line-height: 1.65; }
.vf-films-page #primary .production-prev-info-title .title { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }
.vf-films-page #primary .production-single-hero .wsh-title h1 { font-size: var(--vf-title-page); line-height: 1.08; letter-spacing: -.04em; }
.vf-films-page #primary .production-single-content, .vf-films-page #primary .entry-content { line-height: 1.7; }
.vf-films-page #primary .production-single-content p, .vf-films-page #primary .entry-content p { max-width: 72ch; }
.vf-films-page #primary .production-single-content h2, .vf-films-page #primary .entry-content h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.2; }
.vf-films-page #primary .production-single-content h3, .vf-films-page #primary .entry-content h3 { font-size: var(--vf-title-card); line-height: 1.25; }
.vf-films-page #primary .contacts-section .contact-form h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.vf-films-page .button, .vf-films-page .vf-services-button { font-size: 16px; line-height: 1.4; font-weight: 600; }
.vf-films-page #primary .page-header { margin-top: clamp(116px, 10vw, 150px); }
.vf-films-page .vf-services { padding-top: clamp(122px, 10vw, 150px); }
.vf-films-page .footer .footer-c2a-title { font-size: var(--vf-title-section); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.vf-films-page .footer .footer-c2a-paragraph { max-width: 52ch; margin-inline: auto; font-size: var(--vf-text-lead); line-height: 1.6; }
.vf-films-page .footer .footer-c2a { padding: 30px 12px 70px; }
.vf-films-page .sketch-text,
.vf-films-page #primary .intro-section .intro-text .sketch-text,
.vf-films-page #primary .quote-text .sketch-text { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; letter-spacing: inherit; -webkit-text-stroke: 0; text-shadow: none; }

@media (max-width: 767px) {
  .header .navigation .navigation-inner { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .header .navigation .navigation-inner .nav-left { display: none; }
  .header .navigation .navigation-inner .logo-wrapper.vf-brand-wordmark { justify-self: start; font-size: 30px; }
  .header .navigation .navigation-inner .vf-brand-wordmark > span { font-size: 12px; }
  .vf-films-page .header .navigation, .vf-studio-page .header .navigation { margin-top: 14px; margin-bottom: 10px; }
  .vf-films-page .header .navigation .navigation-inner .vf-films-logo { justify-self: start; }
  .vf-films-page .header .navigation .navigation-inner .vf-films-logo .logo { width: 96px; }
  .header .vf-header-actions { gap: 14px; }
  .header .navigation .navigation-inner .vf-menu-toggle { min-height: 44px; }
  .header .vf-brand-switch { min-width: 96px; min-height: 36px; font-size: 11px; padding: 8px 10px; gap: 6px; }
  .vf-films-page .footer .footer-c2a { padding-bottom: 50px; }
}
@media (max-width: 360px) {
  .header .vf-header-actions { gap: 10px; }
  .header .navigation .navigation-inner .nav-right { font-size: 12px; }
  .header .navigation .navigation-inner .vf-menu-toggle { gap: 7px; }
  .header .vf-brand-switch { min-width: 92px; padding-inline: 8px; }
  .vf-films-page .header .navigation .navigation-inner .vf-films-logo .logo { width: 88px; }
}

/* Keep the site navigation below the visible WordPress toolbar after login. */
body.admin-bar { --vf-admin-bar-fallback:32px; }
@media screen and (max-width:782px) {
  body.admin-bar { --vf-admin-bar-fallback:46px; }
}
body.admin-bar .header,
body.admin-bar .header.wp-top {
  top:var(--vf-admin-bar-offset,var(--wp-admin--admin-bar--height,var(--vf-admin-bar-fallback)));
}
body.admin-bar .header .navigation { top:auto; }


/* An open menu uses the viewport, independently of the header's scroll transform. */
body.vf-menu-open .header { transform:none!important; transition:none; }
.header .menu-overly,
body.admin-bar .header .menu-overly {
 inset:var(--vf-admin-bar-offset,0px) 0 auto; margin:0;
 height:calc(100vh - var(--vf-admin-bar-offset,0px));
 height:calc(100dvh - var(--vf-admin-bar-offset,0px));
 align-items:flex-start; overflow-y:auto; overscroll-behavior:contain;
}
.header .menu-overly .menu-content {
 flex:0 0 100%; height:auto; min-height:100%;
}