/* ── FOUNDATIONS ─────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* V126: Jordan — Just Be You uses the existing featured-project and grid geometry. */
#work-just-be-you{
  background:#070707;
  height:calc(100vh + 18px) !important;
  min-height:calc(100vh + 18px) !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
}
#work-just-be-you .proj-still{
  position:absolute !important;
  inset:-2px -2px -20px -2px !important;
}
#work-just-be-you .proj-video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  border:0 !important;
  pointer-events:none !important;
}
#work-just-be-you .proj-content{padding-bottom:72px !important;}
.our-project-vimeo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  pointer-events:none;
  transform:scale(1.005);
}
@supports (height:100dvh){
  #work-just-be-you{
    height:calc(100dvh + 18px) !important;
    min-height:calc(100dvh + 18px) !important;
  }
}
@media (max-width:768px){
  #work-just-be-you{
    height:calc(100svh + 14px) !important;
    min-height:calc(100svh + 14px) !important;
  }
  #work-just-be-you .proj-content{padding-bottom:58px !important;}
  #work-just-be-you .proj-meta{
    flex-wrap:wrap !important;
    column-gap:10px !important;
    row-gap:7px !important;
    max-width:100% !important;
    padding-right:4px !important;
    line-height:1.45 !important;
  }
}
html::-webkit-scrollbar { display: none }

body {
  background: #020714;
  color: #F5F3ED;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* TYPE SYSTEM
   Display: Archivo Black — wide, heavy, fills space
   Italic accent: Playfair Display Italic — warmth, culture
   Body: Archivo 300/400 — clean, functional
*/
.f-black  { font-family: 'Anton', sans-serif; font-weight: 900 }
.f-serif  { font-family: 'Cormorant Garamond', serif; font-style: italic }
.f-body   { font-family: 'Montserrat', sans-serif; font-weight: 300 }

/* ── CURSOR ──────────────────────────────────────── */
.cur {
  position: fixed; width: 8px; height: 8px;
  background: #F5F3ED; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform .15s, width .3s, height .3s, background .3s, border-radius .3s;
  mix-blend-mode: difference;
}
.cur.link { width: 36px; height: 36px; background: rgba(245,243,237,.08); border-radius: 50% }
.cur.pressed { transform: translate(-50%,-50%) scale(.7) }

/* ── FLOATING NAV — minimal, Moshun-inspired ─────── */
#nav {
  position: fixed; inset: 0; z-index: 400;
  pointer-events: none;
}
.n-tl, .n-tr, .n-bl, .n-br {
  position: absolute; pointer-events: all;
}
.n-tl { top: 24px; left: 32px }
.n-tr { top: 24px; right: 32px; text-align: right }
.n-bl { bottom: 24px; left: 32px }
.n-br { bottom: 24px; right: 32px; text-align: right }

.logo-mark {
  font-family: 'Anton', sans-serif;
  font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: #F5F3ED;
  text-decoration: none; display: block; line-height: 1;
}
.logo-sub {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245,243,237,.3); margin-top: 3px;
}
.nav-panel-count {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .18em;
  color: rgba(245,243,237,.25); display: block;
}
.nav-menu {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.nav-menu a {
  font-family: 'Montserrat', sans-serif; font-weight: 400;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,243,237,.4); text-decoration: none; transition: color .2s;
}
.nav-menu a:hover { color: #F5F3ED }
.nav-city {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .16em;
  color: rgba(245,243,237,.2); display: block;
}

/* ── SHARED PANEL STYLES ─────────────────────────── */
.panel {
  position: relative; height: 100svh; min-height: 600px;
  scroll-snap-align: start; overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   PANEL 1 — OPENING
   Moshun layout: massive headline fills frame,
   two CTAs mid-screen, info scattered at corners
   ═══════════════════════════════════════════════════ */
#p1 { background: #020714; display:flex; flex-direction:column; justify-content:center }

/* Teal atmospheric — very deep, behind everything */
#p1::before {
  content:''; position:absolute; inset:-18% -12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 42% 18% at 82% 20%, rgba(255,76,16,.72) 0 30%, rgba(255,76,16,.28) 45%, transparent 66%),
    radial-gradient(ellipse 48% 16% at 66% 77%, rgba(15,132,139,.62) 0 28%, rgba(15,132,139,.22) 46%, transparent 68%),
    radial-gradient(ellipse 34% 13% at 3% 80%, rgba(255,76,16,.48) 0 28%, rgba(255,76,16,.16) 46%, transparent 68%);
  transform:rotate(-5deg) scale(1.08);
  transform-origin:center;
  animation:heroWavesA 10s ease-in-out infinite alternate;
}
#p1::after {
  content:''; position:absolute; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 38% 11% at 90% 44%, rgba(255,76,16,.32) 0 34%, transparent 70%),
    radial-gradient(ellipse 36% 10% at 56% 92%, rgba(14,112,126,.30) 0 32%, transparent 70%);
  transform:rotate(8deg);
  animation:heroWavesB 13s ease-in-out infinite alternate;
}
@keyframes heroWavesA {0%{transform:translate3d(-3%,2%,0) rotate(-6deg) scale(1.05)}50%{transform:translate3d(3%,-2%,0) rotate(-2deg) scale(1.12)}100%{transform:translate3d(-1%,-4%,0) rotate(-8deg) scale(1.08)}}
@keyframes heroWavesB {0%{transform:translate3d(4%,-1%,0) rotate(8deg) scale(1.04)}100%{transform:translate3d(-5%,4%,0) rotate(2deg) scale(1.12)}}

/* The big headline — image 2 "Film" energy, fills the width */
.p1-hl {
  position: relative; z-index: 2;
  padding: 8vh 12vw 4vh; width:100%;
  line-height: 1;
}

.p1-hl-top {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(245,243,237,.35);
  display: block; margin-bottom: 12px;
}

/* IMAGES — massive, page-width */
.p1-word-images {
  font-family: 'Anton', sans-serif;
  font-size: clamp(92px, 17vw, 250px);
  line-height: .88; letter-spacing: -.02em;
  color: #F5F3ED;
  display: block;
}

/* THAT MOVE in italic serif — tonal contrast */
.p1-word-that {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(54px, 9vw, 138px);
  line-height: .88; letter-spacing: -.01em;
  color: #F5F3ED;
  display:inline-block; margin-left:8px; margin-right:18px; vertical-align:bottom;
}

/* YOU — same Archivo Black but teal */
.p1-word-you {
  font-family: 'Anton', sans-serif;
  font-size: clamp(92px, 17vw, 250px);
  line-height: .88; letter-spacing: -.02em;
  color: #FF5A0A;
  display:inline-block; vertical-align:bottom;
}

/* YOU font-flip: ten typefaces flash in place, then lock to Anton */
.roll-outer{display:inline-block;position:relative;width:3.05em;height:.88em;vertical-align:bottom;overflow:visible;line-height:.88}
.roll-inner{position:absolute;inset:0;display:block;animation:none}
.roll-f{position:absolute;left:0;bottom:0;display:block;white-space:nowrap;line-height:.88;color:#F5F3ED;opacity:0;transform:scale(.96);animation:fontFlash 1.55s steps(1,end) forwards}
.roll-f:nth-child(1){font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.86em;animation-delay:.30s}
.roll-f:nth-child(2){font-family:Georgia,serif;font-style:italic;font-size:.78em;animation-delay:.42s}
.roll-f:nth-child(3){font-family:'Courier New',monospace;font-size:.66em;letter-spacing:.02em;animation-delay:.54s}
.roll-f:nth-child(4){font-family:Arial,sans-serif;font-weight:700;font-size:.84em;animation-delay:.66s}
.roll-f:nth-child(5){font-family:'Times New Roman',serif;font-weight:700;font-size:.82em;animation-delay:.78s}
.roll-f:nth-child(6){font-family:'Montserrat',sans-serif;font-weight:300;font-size:.68em;letter-spacing:.10em;animation-delay:.90s}
.roll-f:nth-child(7){font-family:Impact,sans-serif;font-size:.92em;animation-delay:1.02s}
.roll-f:nth-child(8){font-family:Verdana,sans-serif;font-weight:700;font-size:.68em;animation-delay:1.14s}
.roll-f:nth-child(9){font-family:'Cormorant Garamond',serif;font-weight:600;font-size:.88em;animation-delay:1.26s}
.roll-f:nth-child(10){font-family:'Anton',sans-serif;font-size:1em;letter-spacing:-.035em;color:#FF5A0A;animation:finalYou .01s linear 1.38s forwards}
@keyframes fontFlash{0%{opacity:1;transform:scale(1)}99%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes finalYou{to{opacity:1;transform:scale(1)}}

/* Two CTAs — Moshun style, mid-screen */
.p1-ctas {
  position: absolute; z-index: 2;
  bottom: 52px; left: 28px;
  display: flex; gap: 48px;
}
.p1-cta {
  text-decoration: none;
}
.p1-cta-label {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(245,243,237,.3); display: block; margin-bottom: 3px;
}
.p1-cta-word {
  font-family: 'Anton', sans-serif;
  font-size: clamp(13px, 1.6vw, 20px);
  color: #F5F3ED; letter-spacing: .02em;
  text-transform: uppercase; display: block;
  border-bottom: 1.5px solid rgba(245,243,237,.2);
  padding-bottom: 4px;
  transition: border-color .2s, color .2s;
}
.p1-cta:hover .p1-cta-word { color: #FF5A0A; border-color: #FF5A0A }

/* Moshun bottom-right info */
.p1-info-br {
  position: absolute; z-index: 2; bottom: 24px; right: 28px;
  text-align: right;
}
.p1-info-br span {
  display: block;
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,243,237,.22); line-height: 1.8;
}
.p1-info-br span.em { color: rgba(255,90,10,.5) }

/* ═══════════════════════════════════════════════════
   PANEL 2 — FIRST PROJECT
   Full-bleed still, TYPE huge at bottom
   like image 2 "Film" poster but on dark
   ═══════════════════════════════════════════════════ */
#p2, #p3, #p5, #p6 { background: #070707 }

.proj-still {
  position: absolute; inset: 0;
  filter: brightness(.42) saturate(.7);
  transition: filter 1s ease;
}
.panel:hover .proj-still { filter: brightness(.55) saturate(.9) }

/* Simulated cinematic stills */
.s1 { background: linear-gradient(145deg, #0c0a06 0%, #201407 30%, #100c04 60%, #080706 100%) }
.s2 { background: linear-gradient(200deg, #040608 0%, #08101c 40%, #04080e 100%) }
.s3 { background: linear-gradient(55deg,  #0c0606 0%, #1c0a08 50%, #0c0606 100%) }
.s4 { background: linear-gradient(130deg, #040a04 0%, #0a180a 55%, #040a04 100%) }
.s5 { background: linear-gradient(175deg, #06060c 0%, #0c0a1a 50%, #060810 100%) }

/* Bottom gradient — type sits on top of this */
.proj-fade {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    #070707 0%,
    rgba(7,7,7,.6) 35%,
    transparent 65%
  );
  z-index: 1;
}
/* Top fade — subtle */
.proj-fade-top {
  position: absolute; top: 0; left: 0; right: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(7,7,7,.5) 0%, transparent 100%);
  z-index: 1;
}

/* Project content */
.proj-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 32px 44px;
}

/* Category — tiny, top right */
.proj-cat {
  position: absolute; top: 28px; right: 32px;
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(245,243,237,.3);
}

/* Index */
.proj-idx {
  position: absolute; top: 28px; left: 32px;
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .18em;
  color: rgba(245,243,237,.22);
}

/* THE TITLE — huge Archivo Black, image 2 energy
   Word fills the full width — type IS the design  */
.proj-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(48px, 9.5vw, 128px);
  line-height: .88; letter-spacing: -.025em;
  color: #F5F3ED;
  margin-bottom: 16px;
}
/* Secondary italic line — cultural warmth */
.proj-title-sub {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(28px, 5vw, 64px);
  line-height: .92; letter-spacing: -.01em;
  color: rgba(245,243,237,.6);
  display: block; margin-bottom: 18px;
}

/* Meta — single line, light */
.proj-meta {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,243,237,.35);
  display: flex; align-items: center; gap: 18px;
}
.proj-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #FF5A0A; flex-shrink: 0 }

/* ═══════════════════════════════════════════════════
   PANEL 4 — NAVY BRAND PANEL
   Brother Films reference: bold colour canvas
   Type in serif, large, expressive
   Image 4: words broken across lines as visual objects
   ═══════════════════════════════════════════════════ */
#p4 {
  background: #07134B;  /* Vero's navy — used as full canvas, Brother Films style */
  display: flex; align-items: center; justify-content: center;
}

/* Grid texture on navy */
#p4::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.p4-inner {
  position: relative; z-index: 1;
  width: 100%; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;
}

/* Left: the broken type — image 4 "TYPE DESIGN" energy */
.p4-left {}
.p4-eyebrow {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(245,243,237,.25); margin-bottom: 20px; display: block;
}

/* Words broken arbitrarily like image 4 */
.p4-type-block {
  line-height: .88;
}
.p4-line {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(52px, 9vw, 120px);
  letter-spacing: -.02em;
  color: #F5F3ED;
}
.p4-line.italic-serif {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(40px, 7vw, 95px);
  color: rgba(245,243,237,.65); letter-spacing: -.01em;
}
.p4-line.teal { color: #FF5A0A }
.p4-line.dim  { color: rgba(245,243,237,.2) }

/* Right: the manifesto body */
.p4-right {
  padding-bottom: 8px;
}
.p4-body {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 14px; line-height: 1.82;
  color: rgba(245,243,237,.45); max-width: 380px;
  margin-bottom: 32px;
}
.p4-services {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 36px;
}
.p4-service {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,90,10,.6);
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; gap: 10px;
}
.p4-service::before { content: '—'; color: rgba(255,90,10,.3); font-size: 10px }

.p4-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Anton', sans-serif;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #F5F3ED; text-decoration: none;
  border-bottom: 2px solid rgba(255,90,10,.5); padding-bottom: 4px;
  transition: border-color .2s, color .2s;
}
.p4-link:hover { color: #FF5A0A; border-color: #FF5A0A }
.p4-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2 }

/* ═══════════════════════════════════════════════════
   PANEL 7 — CONTACT
   Moshun layout: large headline + scattered info
   ═══════════════════════════════════════════════════ */
#p7 {
  background: #080808;
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* Teal atmospheric glow */
#p7::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 50% at 50% 45%, rgba(15,55,42,.2) 0%, transparent 70%);
  pointer-events: none;
}

.p7-hl {
  position: relative; z-index: 2;
  padding: 0 28px 44px;
  line-height: .88;
}
.p7-line1 {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(36px, 6.5vw, 86px);
  color: rgba(245,243,237,.4); display: block;
  letter-spacing: -.01em;
}
.p7-line2 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(72px, 13.5vw, 180px);
  color: #F5F3ED; display: block;
  letter-spacing: -.025em;
}
.p7-line3 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(72px, 13.5vw, 180px);
  color: #FF5A0A; display: block;
  letter-spacing: -.025em;
}

/* Scattered contact — Moshun corner style */
.p7-contacts {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: all;
}
.ct {
  position: absolute;
  text-decoration: none;
}
.ct-lbl {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,243,237,.22); display: block; margin-bottom: 4px;
}
.ct-val {
  font-family: 'Montserrat', sans-serif; font-weight: 400;
  font-size: 11px; letter-spacing: .04em;
  color: rgba(245,243,237,.5); display: block;
  transition: color .2s;
}
.ct:hover .ct-val { color: #FF5A0A }

.ct-1 { top: 30%; left: 32px }
.ct-2 { top: calc(30% + 56px); left: 32px }
.ct-3 { top: 30%; right: 32px; text-align: right }
.ct-4 { top: calc(30% + 56px); right: 32px; text-align: right }

/* ── KEYFRAMES ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes fadeIn {
  from { opacity: 0 } to { opacity: 1 }
}

/* ── PREVIEW LABEL ───────────────────────────────── */
.pvw {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(8,8,8,.96); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,90,10,.2);
  padding: 8px 32px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.pvw p {
  font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .1em; color: rgba(245,243,237,.25);
}
.pvw span { color: #FF5A0A }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 768px) {
  .n-tl { top: 16px; left: 20px }
  .n-tr { top: 16px; right: 20px }
  .n-bl { bottom: 52px; left: 20px }
  .n-br { bottom: 52px; right: 20px }
  .p1-hl { padding: 0 20px 32px }
  .p1-ctas { left: 20px; bottom: 44px; flex-direction: column; gap: 20px }
  .p1-info-br { right: 20px; bottom: 16px }
  .proj-content { padding: 0 20px 40px }
  .proj-title { font-size: clamp(36px, 9vw, 80px) }
  .p4-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 20px }
  .p4-right { display: none }
  .p7-hl { padding: 0 20px 40px }
  .ct-1, .ct-2 { left: 20px }
  .ct-3, .ct-4 { right: 20px }
  .pvw { padding: 6px 16px; flex-direction: column; gap: 2px }
}



.vm-logo{font-family:'Anton',sans-serif;font-size:42px;line-height:.82;letter-spacing:-.045em;display:block;color:#F5F3ED}.logo-mark .logo-sub{font-family:'Montserrat',sans-serif;font-size:7px;letter-spacing:.42em;margin-top:8px;color:#F5F3ED;display:block}.p1-word-images{letter-spacing:-.035em}.p1-word-you{letter-spacing:-.035em}.p1-hl-top{font-family:'Montserrat',sans-serif;font-weight:400;letter-spacing:.46em;text-align:center;color:rgba(245,243,237,.8);margin-bottom:3vh}.p1-ctas{bottom:7vh;left:5vw}.p1-info-br{bottom:5vh;right:5vw}.nav-menu a{font-family:'Montserrat',sans-serif;font-weight:500;color:rgba(245,243,237,.8)}
/* cinematic texture rather than blueprint grid */
#p4::before{background:radial-gradient(ellipse 42% 48% at 75% 28%,rgba(255,90,10,.22),transparent 70%),radial-gradient(ellipse 40% 45% at 20% 75%,rgba(10,105,120,.26),transparent 70%),linear-gradient(120deg,#050a20,#07134B 45%,#03060e);filter:blur(0px);}
#p4::after{content:'';position:absolute;inset:-5%;background:radial-gradient(ellipse at 65% 65%,rgba(255,255,255,.06),transparent 30%);filter:blur(35px);opacity:.8;pointer-events:none}
.proj-still video,.proj-video{width:100%;height:100%;object-fit:cover;display:block}.proj-still{filter:brightness(.52) saturate(.85)}.panel:hover .proj-still{filter:brightness(.68) saturate(1)}
@media(max-width:768px){.vm-logo{font-size:32px}.p1-hl{padding:10vh 20px 14vh}.p1-hl-top{text-align:left;font-size:7px;letter-spacing:.25em}.p1-word-images,.p1-word-you{font-size:clamp(64px,20vw,120px)}.p1-word-that{font-size:clamp(42px,13vw,80px)}.roll-outer,.roll-f{height:clamp(64px,20vw,120px)}}



.logo-image-link{display:block;width:118px}.vm-logo-image{display:block;width:100%;height:auto}
#p1{background:#020714}
@media(max-width:768px){.logo-image-link{width:88px}.roll-outer{width:3.05em;height:.88em}}
@media(prefers-reduced-motion:reduce){#p1::before,#p1::after{animation:none}.roll-f{animation:none;opacity:0}.roll-f:nth-child(10){opacity:1}}



:root{--vero-cream:#efe8da;--vero-orange:#ff4f08;--vero-black:#030303}
body{color:var(--vero-cream)}

/* HERO: the background is ONLY abstract color/texture. All logo/menu/type/buttons are live HTML UI. */
#p1{
  background:
    radial-gradient(ellipse 42% 16% at 83% 5%, rgba(255,79,8,.92) 0 18%, rgba(255,79,8,.48) 34%, rgba(255,79,8,.08) 53%, transparent 68%),
    radial-gradient(ellipse 38% 10% at 97% 28%, rgba(255,79,8,.70) 0 20%, rgba(255,79,8,.26) 42%, transparent 68%),
    radial-gradient(ellipse 50% 15% at 72% 87%, rgba(20,130,124,.78) 0 19%, rgba(20,130,124,.30) 43%, transparent 68%),
    radial-gradient(ellipse 38% 11% at 5% 86%, rgba(255,79,8,.55) 0 20%, rgba(255,79,8,.16) 43%, transparent 68%),
    #030303;
  display:block;
  min-height:720px;
}
#p1::before,#p1::after{content:none!important;display:none!important}

/* Live navigation */
#nav{z-index:500;pointer-events:none}
.n-tl,.n-tr,.n-bl,.n-br{pointer-events:auto}
.n-tl{top:42px;left:47px}.n-tr{top:49px;right:49px;text-align:right}.n-bl{bottom:29px;left:76px}.n-br{bottom:29px;right:61px;text-align:right}
.logo-image-link{width:112px!important;display:block}.vm-logo-image{width:100%;height:auto;display:block}
.nav-menu{gap:14px}.nav-menu a{font-family:"Montserrat",sans-serif;font-size:10px;font-weight:500;letter-spacing:.19em;color:rgba(239,232,218,.94);line-height:1;text-transform:uppercase;cursor:pointer}
.nav-menu a:hover{color:var(--vero-orange)}
.nav-city,.nav-disciplines{font-family:"Montserrat",sans-serif;font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:rgba(239,232,218,.9);white-space:nowrap}
.nav-disciplines{display:block}

/* Live hero typography */
.p1-hl{position:absolute;inset:0;z-index:2;padding:0!important;line-height:1;pointer-events:none}
.p1-hl-top{position:absolute;top:210px;left:50%;transform:translateX(-50%);width:100%;margin:0!important;text-align:center;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:500;letter-spacing:.43em;text-transform:uppercase;color:rgba(239,232,218,.92)}
.p1-word-images{position:absolute;left:17.2%;top:280px;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(175px,17.5vw,285px);line-height:.88;letter-spacing:-.045em;color:var(--vero-cream);white-space:nowrap}
.p1-word-that{position:absolute;left:16.8%;top:532px;margin:0!important;font-family:"Bodoni Moda",serif;font-style:italic;font-weight:400;font-variation-settings:"opsz" 96,"wght" 400;font-size:clamp(102px,9.4vw,150px);line-height:.80;letter-spacing:-.065em;color:var(--vero-cream);white-space:nowrap}
.p1-word-you{position:absolute;left:59.3%;top:531px;margin:0!important;font-family:"Anton",sans-serif;font-size:clamp(155px,14.4vw,228px);line-height:.84;letter-spacing:-.048em;color:var(--vero-orange);white-space:nowrap}
.roll-outer{position:relative;display:block;width:2.02em;height:.9em;overflow:visible;line-height:.84}
.hero-you-cycle{display:block;position:absolute;left:0;top:0;white-space:nowrap;color:var(--vero-cream);transform-origin:left bottom;line-height:.84}
.hero-you-cycle.final{font-family:"Anton",sans-serif!important;font-style:normal!important;font-weight:400!important;letter-spacing:-.048em!important;color:var(--vero-orange)!important;transform:none!important}

/* Live hero buttons */
.p1-ctas{position:absolute;z-index:3;left:76px;bottom:82px;display:flex;align-items:center;gap:43px}
.p1-cta{font-family:"Montserrat",sans-serif;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.17em;color:var(--vero-cream);text-transform:uppercase;cursor:pointer}
.p1-cta-primary{display:flex;align-items:center;justify-content:center;width:205px;height:64px;border:2px solid rgba(239,232,218,.92);border-radius:7px;transition:.25s ease;background:transparent}
.p1-cta-primary:hover{background:rgba(239,232,218,.10)}
.p1-cta-secondary{display:flex;align-items:center;gap:28px;padding:14px 0}
.cta-arrow{font-size:28px;font-weight:300;line-height:0;letter-spacing:0;transform:translateY(-1px)}

/* Demo reel section */
#reel{position:relative;background:#000;overflow:hidden}
#reel .reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
#reel .reel-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.16));pointer-events:none}
#reel .reel-label{position:absolute;left:32px;bottom:28px;z-index:3;font-family:"Montserrat",sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,232,218,.72)}
#p2 .proj-video{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:1000px){
  #p1{min-height:650px}
  .n-tl{top:22px;left:22px}.n-tr{top:24px;right:22px}.n-bl{left:22px;bottom:22px}.n-br{right:22px;bottom:22px}
  .logo-image-link{width:82px!important}.nav-disciplines{display:none}
  .p1-hl-top{top:145px;font-size:7px;letter-spacing:.24em;padding:0 20px}
  .p1-word-images{left:8%;top:190px;font-size:clamp(86px,20vw,160px)}
  .p1-word-that{left:8%;top:calc(190px + clamp(86px,20vw,160px)*.76);font-size:clamp(50px,12vw,92px)}
  .p1-word-you{left:52%;top:calc(190px + clamp(86px,20vw,160px)*.76);font-size:clamp(80px,18vw,142px)}
  .p1-ctas{left:22px;bottom:72px;gap:20px}.p1-cta-primary{width:138px;height:45px}.p1-cta{font-size:8px}.p1-cta-secondary{gap:10px}
}



/* Final title calibration against the supplied reference image. Only the hero title lockup changes. */
.p1-word-images{
  left:17.2% !important;
  top:280px !important;
  font-family:"Anton",sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(175px,17.5vw,285px) !important;
  line-height:.835 !important;
  letter-spacing:-.045em !important;
  color:#efe8da !important;
}
.p1-word-that{
  left:16.8% !important;
  top:500px !important;
  font-family:"Bodoni Moda",serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-variation-settings:"opsz" 96,"wght" 400 !important;
  font-size:clamp(102px,9.4vw,150px) !important;
  line-height:.78 !important;
  letter-spacing:-.072em !important;
  color:#efe8da !important;
}
.p1-word-you{
  left:58.8% !important;
  top:499px !important;
  font-family:"Anton",sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(155px,14.4vw,228px) !important;
  line-height:.82 !important;
  letter-spacing:-.048em !important;
  color:#ff4f08 !important;
}
.hero-you-cycle.final{
  font-family:"Anton",sans-serif !important;
  font-style:normal !important;
  font-weight:400 !important;
  letter-spacing:-.048em !important;
  color:#ff4f08 !important;
}
@media (max-width:1100px){
  .p1-word-images{left:8% !important;top:190px !important;font-size:clamp(86px,20vw,160px) !important;line-height:.835 !important}
  .p1-word-that{left:8% !important;top:calc(190px + clamp(86px,20vw,160px)*.69) !important;font-size:clamp(50px,12vw,92px) !important;line-height:.78 !important}
  .p1-word-you{left:51.5% !important;top:calc(190px + clamp(86px,20vw,160px)*.69) !important;font-size:clamp(80px,18vw,142px) !important;line-height:.82 !important}
}



/* V14 adjustments: fix title overlap, enlarge logo, and refine the hero background waves. */
#p1{
  background:
    radial-gradient(ellipse 30% 22% at 80% 6%, rgba(210,74,31,.96) 0%, rgba(201,63,23,.92) 16%, rgba(145,39,15,.54) 32%, rgba(60,16,8,.12) 48%, transparent 68%),
    radial-gradient(ellipse 42% 11% at 95% 28%, rgba(200,69,28,.78) 0%, rgba(182,55,20,.56) 22%, rgba(103,28,12,.22) 44%, transparent 68%),
    radial-gradient(ellipse 30% 10% at 4% 88%, rgba(173,48,20,.46) 0%, rgba(132,33,14,.28) 28%, rgba(70,18,10,.10) 48%, transparent 68%),
    radial-gradient(ellipse 34% 18% at 75% 87%, rgba(17,123,115,.84) 0%, rgba(13,92,90,.58) 22%, rgba(8,54,59,.22) 44%, transparent 67%),
    radial-gradient(ellipse 18% 9% at 59% 94%, rgba(220,235,228,.70) 0%, rgba(176,210,202,.38) 24%, rgba(77,121,119,.12) 43%, transparent 62%),
    linear-gradient(180deg, #040404 0%, #030303 100%) !important;
  position:relative;
}
#p1::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.17;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.16) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,.12) 0 0.6px, transparent 0.85px),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,.10) 0 0.6px, transparent 0.8px);
  background-size: 7px 7px, 9px 9px, 11px 11px;
  mix-blend-mode:soft-light;
}
#p1::after{content:none !important;display:none !important}

.logo-image-link{width:138px !important;}

.p1-word-images{
  left:17.2% !important;
  top:282px !important;
  font-size:clamp(175px,17.5vw,285px) !important;
  line-height:.845 !important;
  letter-spacing:-.045em !important;
}
.p1-word-that{
  left:16.85% !important;
  top:520px !important;
  font-size:clamp(100px,9.15vw,146px) !important;
  line-height:.80 !important;
  letter-spacing:-.067em !important;
}
.p1-word-you{
  left:58.55% !important;
  top:520px !important;
  font-size:clamp(154px,14.25vw,224px) !important;
  line-height:.83 !important;
}
.roll-outer{height:.88em !important; line-height:.83 !important;}
.hero-you-cycle{line-height:.83 !important;}

@media (max-width:1100px){
  .logo-image-link{width:94px !important;}
  .p1-word-images{left:8% !important;top:190px !important;font-size:clamp(86px,20vw,160px) !important;line-height:.84 !important;}
  .p1-word-that{left:8% !important;top:calc(190px + clamp(86px,20vw,160px)*.73) !important;font-size:clamp(49px,11.7vw,90px) !important;line-height:.79 !important;}
  .p1-word-you{left:51.6% !important;top:calc(190px + clamp(86px,20vw,160px)*.73) !important;font-size:clamp(80px,18vw,142px) !important;line-height:.82 !important;}
}



/* V20: demo reel is the homepage background. Existing hero UI stays above it. */
#p1{background:#030303 !important;isolation:isolate;}
#p1 .hero-bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:0;background:#030303;pointer-events:none;
}
#p1 .hero-video-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,.16) 42%,rgba(0,0,0,.28) 100%);
}
#p1::before{z-index:1 !important;opacity:.10 !important;}
#p1 .p1-hl,#p1 .p1-ctas{z-index:2 !important;}



/* V23: preserve the current design; only resolve hero title overlap and add the contact CTA. */
.p1-word-that{top:535px !important;}
.p1-word-you{top:535px !important;}
.p1-cta-contact{white-space:nowrap;}

@media (max-width:1100px){
  .p1-word-that{top:calc(190px + clamp(86px,20vw,160px)*.86) !important;}
  .p1-word-you{top:calc(190px + clamp(86px,20vw,160px)*.86) !important;}
  .p1-ctas{gap:16px !important;}
  .p1-cta-contact{width:138px !important;height:45px !important;}
}

@media (max-width:700px){
  .p1-ctas{display:grid !important;grid-template-columns:auto auto !important;align-items:center !important;column-gap:14px !important;row-gap:10px !important;}
  .p1-cta-secondary{grid-column:1 / -1 !important;grid-row:2 !important;justify-self:start !important;}
}



/* V24: only move YOU closer to 'that move'. */
.p1-word-you{left:56.9% !important;}
@media (max-width:1100px){.p1-word-you{left:49.8% !important;}}



/* Match the tight reference lockup: YOU. sits immediately after “that move”. */
.p1-word-you{left:54.25% !important;}
@media (max-width:1100px){.p1-word-you{left:47.7% !important;}}



/* Subtle cinematic shadow to match the project video text treatment. */
.p1-word-images,
.p1-word-that,
.p1-word-you,
.hero-you-cycle{
  text-shadow: 0 3px 10px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.20);
}



/* V28: one soft shadow behind the full slogan lockup, not a shadow on each glyph. */
.p1-word-images,
.p1-word-that,
.p1-word-you,
.hero-you-cycle{
  text-shadow:none !important;
}
.p1-hl::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:14.8%;
  top:266px;
  width:70%;
  height:390px;
  border-radius:28px;
  background:rgba(0,0,0,.18);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
  filter:blur(18px);
  pointer-events:none;
}
@media (max-width:1100px){
  .p1-hl::after{
    left:5.5%;
    top:178px;
    width:88%;
    height:245px;
    border-radius:22px;
    background:rgba(0,0,0,.18);
    box-shadow:0 14px 34px rgba(0,0,0,.22);
    filter:blur(14px);
  }
}



/* Match IMAGES tracking to the featured video/project title tracking. */
.p1-word-images{letter-spacing:-.025em !important;}



/* V30: basic contact form — all other site styling remains unchanged. */
#p7 .p7-hl{
  width:52%;
  padding-right:24px;
}
#p7 .p7-contacts{
  pointer-events:none;
}
#p7 .p7-contacts .ct{
  pointer-events:auto;
}
.vero-contact-form-wrap{
  position:absolute;
  z-index:4;
  top:50%;
  right:6vw;
  width:min(430px,38vw);
  transform:translateY(-50%);
}
.vero-contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.vero-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.vero-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.vero-field label{
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(239,232,218,.52);
}
.vero-field label .optional{
  color:rgba(239,232,218,.25);
  margin-left:5px;
}
.vero-field input,
.vero-field textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(239,232,218,.22);
  border-radius:0;
  outline:none;
  padding:8px 0 12px;
  background:transparent;
  color:#efe8da;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:300;
  line-height:1.5;
  transition:border-color .2s ease;
}
.vero-field textarea{
  min-height:96px;
  resize:vertical;
}
.vero-field input::placeholder,
.vero-field textarea::placeholder{
  color:rgba(239,232,218,.26);
}
.vero-field input:focus,
.vero-field textarea:focus{
  border-color:#ff4f08;
}
.vero-contact-submit{
  align-self:flex-start;
  min-width:154px;
  height:48px;
  margin-top:4px;
  border:1.5px solid rgba(239,232,218,.78);
  border-radius:5px;
  background:transparent;
  color:#efe8da;
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.vero-contact-submit:hover{
  background:#efe8da;
  color:#050505;
  border-color:#efe8da;
}
.vero-form-note{
  min-height:15px;
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  letter-spacing:.08em;
  color:rgba(239,232,218,.38);
}
@media(max-width:900px){
  #p7{
    min-height:850px;
    height:auto;
    padding-bottom:180px;
  }
  #p7 .p7-hl{
    position:relative;
    width:100%;
    padding:120px 20px 20px;
  }
  .vero-contact-form-wrap{
    position:relative;
    top:auto;
    right:auto;
    width:auto;
    margin:20px 20px 0;
    transform:none;
  }
  .vero-form-row{
    grid-template-columns:1fr;
  }
  #p7 .p7-contacts{
    position:relative;
    height:130px;
    margin-top:34px;
  }
  #p7 .ct-1,#p7 .ct-2{left:20px;top:0}
  #p7 .ct-2{top:58px}
  #p7 .ct-3,#p7 .ct-4{right:20px;top:0}
  #p7 .ct-4{top:58px}
}



/* V31: center the existing contact form on the contact page. */
#p7 .contact-form-wrap,
#p7 .contact-form,
#p7 form{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
}
@media (max-width:900px){
  #p7 .contact-form-wrap,
  #p7 .contact-form,
  #p7 form{
    width:min(88vw,560px) !important;
  }
}



/* V32: place the contact form in the central content area marked in the reference screenshot. */
#p7 .vero-contact-form-wrap{
  position:absolute !important;
  z-index:4 !important;
  left:50% !important;
  right:auto !important;
  top:50% !important;
  width:min(44vw,900px) !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
}
#p7 .vero-contact-form{
  position:static !important;
  width:100% !important;
  transform:none !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:26px !important;
}
#p7 .vero-form-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:28px !important;
}
#p7 .vero-field{
  width:100% !important;
}
#p7 .vero-field input,
#p7 .vero-field textarea{
  width:100% !important;
}
#p7 .vero-contact-submit{
  margin-top:8px !important;
}
@media (max-width:1100px){
  #p7 .vero-contact-form-wrap{
    width:min(54vw,720px) !important;
  }
}
@media (max-width:900px){
  #p7 .vero-contact-form-wrap{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    margin:22px 20px 0 !important;
    transform:none !important;
  }
  #p7 .vero-form-row{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
}



/* V33: shift only the desktop contact form approximately 6 cm to the right. */
@media (min-width:901px){
  #p7 .vero-contact-form-wrap{
    left:calc(50% + 227px) !important;
  }
}



@media (min-width: 901px){
  #p7 .contact-form,
  #p7 form.contact-form,
  #p7 .contact-form-wrap,
  #p7 .p7-form {
    transform: translateX(-113px) !important;
  }
}



#follow-us{
  position:relative;
  background:#050505;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.follow-head{
  position:absolute;
  top:54px;
  left:48px;
  right:48px;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.follow-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(54px,7vw,108px);
  line-height:.9;
  letter-spacing:-.025em;
  color:#efe8da;
  text-transform:uppercase;
}
.follow-link{
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#efe8da;
  text-decoration:none;
  border-bottom:1px solid rgba(239,232,218,.42);
  padding-bottom:6px;
  margin-bottom:8px;
}
.follow-link:hover{color:#ff4f08;border-color:#ff4f08}
.follow-window{
  width:100%;
  overflow:hidden;
  margin-top:70px;
}
.follow-track{
  display:flex;
  width:max-content;
  gap:18px;
  padding:0 18px;
  animation:veroFollowRoll 38s linear infinite;
  will-change:transform;
}
.follow-window:hover .follow-track{animation-play-state:paused}
.follow-card{
  position:relative;
  flex:0 0 clamp(220px,20vw,360px);
  aspect-ratio:4/5;
  overflow:hidden;
  background:#111;
  text-decoration:none;
}
.follow-card video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.88) saturate(.92);
  transform:scale(1.01);
}
.follow-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.34),transparent 44%);
  pointer-events:none;
}
.follow-card-label{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:2;
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#efe8da;
}
.follow-footer{
  position:absolute;
  left:48px;
  bottom:42px;
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(239,232,218,.54);
}
@keyframes veroFollowRoll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(max-width:900px){
  .follow-head{top:34px;left:22px;right:22px;align-items:flex-start;flex-direction:column;gap:12px}
  .follow-title{font-size:clamp(48px,15vw,82px)}
  .follow-window{margin-top:90px}
  .follow-track{gap:12px;padding:0 12px;animation-duration:28s}
  .follow-card{flex-basis:72vw;max-width:300px}
  .follow-footer{left:22px;bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  .follow-track{animation:none;overflow-x:auto}
}



#our-projects{
  background:#050505;
  min-height:100svh;
  height:auto;
  overflow:visible;
  scroll-snap-align:start;
}
.our-projects-inner{
  width:min(1440px,100%);
  min-height:100svh;
  margin:0 auto;
  padding:72px 54px 58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.our-projects-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.our-projects-eyebrow{
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(239,232,218,.48);
  padding-bottom:9px;
}
.our-projects-head h2{
  margin:0;
  font-family:'Anton',sans-serif;
  font-size:clamp(58px,7vw,108px);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.015em;
  color:#efe8da;
}
.our-projects-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.our-project-card{
  position:relative;
  min-width:0;
  height:clamp(285px,35vh,410px);
  overflow:hidden;
  border-radius:10px;
  background:#111;
  isolation:isolate;
}
.our-project-media,
.our-project-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.our-project-video{
  object-fit:cover;
  display:block;
  transform:scale(1.005);
}
.our-project-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(3,3,3,.88) 0%,rgba(3,3,3,.34) 40%,rgba(3,3,3,.06) 72%);
  z-index:1;
  pointer-events:none;
}
.our-project-copy{
  position:absolute;
  z-index:2;
  left:25px;
  right:25px;
  bottom:22px;
  color:#efe8da;
  text-shadow:0 3px 14px rgba(0,0,0,.38);
}
.our-project-client{
  font-family:'Anton',sans-serif;
  font-size:clamp(31px,3vw,50px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.015em;
  text-transform:none;
}
.our-project-name{
  margin-top:4px;
  font-family:'Bodoni Moda',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(21px,2vw,31px);
  line-height:1;
  color:rgba(239,232,218,.82);
}
.our-project-details{
  margin-top:14px;
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  line-height:1.55;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(239,232,218,.68);
}
@media (hover:hover) and (pointer:fine){
  .our-project-video{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
  .our-project-card:hover .our-project-video{transform:scale(1.035);filter:brightness(1.08)}
}
@media(max-width:900px){
  .our-projects-inner{padding:72px 20px 46px;min-height:auto}
  .our-projects-head{align-items:flex-start;flex-direction:column-reverse;gap:12px;margin-bottom:22px}
  .our-projects-grid{grid-template-columns:1fr;gap:14px}
  .our-project-card{height:58vw;min-height:260px;max-height:390px;border-radius:8px}
  .our-project-copy{left:18px;right:18px;bottom:18px}
  .our-project-details{font-size:7px;letter-spacing:.09em}
}



#our-projects{height:auto!important;min-height:100svh;overflow:visible!important;scroll-snap-align:start;}
.our-projects-inner{min-height:100svh;height:auto!important;padding-bottom:76px;}
.our-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:760px){.our-projects-grid{grid-template-columns:1fr;}}



/* V41: Work nav jumps to Our Projects; desktop grid is three-across. */
.our-projects-grid,.projects-grid,.project-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
@media(max-width:1000px){.our-projects-grid,.projects-grid,.project-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:650px){.our-projects-grid,.projects-grid,.project-grid{grid-template-columns:1fr !important;}}



/* V42: expand Our Projects grid across the available screen width. */
#our-projects .our-projects-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:28px !important;
  padding-right:28px !important;
}
#our-projects .our-projects-grid{
  width:100% !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}
@media(max-width:1000px){
  #our-projects .our-projects-inner{padding-left:20px !important;padding-right:20px !important;}
  #our-projects .our-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:650px){
  #our-projects .our-projects-inner{padding-left:14px !important;padding-right:14px !important;}
  #our-projects .our-projects-grid{grid-template-columns:1fr !important;}
}



/* Slow rise + fade for featured work and Our Projects text. */
.proj-content,
#our-projects .our-project-copy{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1.15s ease, transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.proj-content.is-visible,
#our-projects .our-project-copy.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .proj-content,
  #our-projects .our-project-copy{
    opacity:1;
    transform:none;
    transition:none;
  }
}



/* V44: All large title text except the home slogan rises and fades in on scroll. */
#our-projects .our-projects-head h2,
#p4 .p4-type-block,
#p7 .p7-hl{
  opacity:0;
  transform:translateY(42px);
  transition:opacity 1.15s ease, transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
#our-projects .our-projects-head h2.is-visible,
#p4 .p4-type-block.is-visible,
#p7 .p7-hl.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  #our-projects .our-projects-head h2,
  #p4 .p4-type-block,
  #p7 .p7-hl{
    opacity:1;
    transform:none;
    transition:none;
  }
}



/* Hide only the top-right navigation while the Our Projects title physically overlaps it. */
.n-tr{transition:opacity .28s ease, transform .28s ease;will-change:opacity,transform}
.n-tr.nav-overlap-hidden{opacity:0;transform:translateY(-6px);pointer-events:none}



/* V50: move YOU. left to reduce the dead space beside “that move” on desktop. */
@media (min-width:1101px){
  .p1-word-you{left:46.0% !important;}
}



/* V51: Featured work panels occupy exactly one viewport with no gap between them. */
#p2,
#work-right-on-time{
  height:100vh !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:always;
}
@supports (height: 100dvh){
  #p2,
  #work-right-on-time{
    height:100dvh !important;
    min-height:100dvh !important;
  }
}
#p2 .proj-still,
#work-right-on-time .proj-still,
#p2 .proj-video,
#work-right-on-time .proj-video{
  width:100% !important;
  height:100% !important;
}



/* V52: eliminate the thin exposed strip between featured-work pages.
   Lock each featured page to the actual layout viewport and slightly
   overscan the video layer so sub-pixel rounding can never reveal the
   following section at the bottom edge. */
#p2,
#work-right-on-time{
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
}
#p2 .proj-still,
#work-right-on-time .proj-still{
  position:absolute !important;
  inset:-2px !important;
}
#p2 .proj-video,
#work-right-on-time .proj-video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
@media (max-width:768px){
  #p2,
  #work-right-on-time{
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
  }
}



/* V53: lower the persistent footer labels and give the featured-work
   panels a small amount of extra stage below the viewport so the next
   page cannot peek through at the lower edge. */
.n-bl,
.n-br{
  bottom:10px !important;
}

#p2,
#work-right-on-time{
  height:calc(100vh + 18px) !important;
  min-height:calc(100vh + 18px) !important;
  max-height:none !important;
  overflow:hidden !important;
}

/* Extend the featured image/video bed through the added lower stage. */
#p2 .proj-still,
#work-right-on-time .proj-still{
  inset:-2px -2px -20px -2px !important;
}

@supports (height: 100dvh){
  #p2,
  #work-right-on-time{
    height:calc(100dvh + 18px) !important;
    min-height:calc(100dvh + 18px) !important;
  }
}

@media (max-width:768px){
  .n-bl,
  .n-br{bottom:10px !important;}
  #p2,
  #work-right-on-time{
    height:calc(100svh + 14px) !important;
    min-height:calc(100svh + 14px) !important;
  }
}



/* V55: raise featured project text slightly to give the persistent
   Toronto, Canada footer more vertical breathing room. */
#p2 .proj-content,
#work-right-on-time .proj-content{
  padding-bottom:72px !important;
}
@media (max-width:768px){
  #p2 .proj-content,
  #work-right-on-time .proj-content{
    padding-bottom:68px !important;
  }
}



/* V56: move the homepage IMAGES / that move / YOU. lockup closer to the left edge. */
#p1 .p1-hl{
  padding-left:3.25vw !important;
  padding-right:12vw !important;
}
@media (max-width: 900px){
  #p1 .p1-hl{
    padding-left:5vw !important;
    padding-right:5vw !important;
  }
}



/* V57: align the homepage title lockup with the left-side Vero logo / Contact Us axis. */
@media (min-width:1101px){
  #p1 .p1-word-images,
  #p1 .p1-word-that{
    left:60px !important;
  }
  #p1 .p1-word-you{
    left:calc(60px + 29.2vw) !important;
  }
}



/* Match hero “that move” to the project-title typeface */
.hero-script,
.hero-that-move,
.that-move,
#hero .script,
.hero-title .script {
  font-family: 'Bodoni Moda', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}



/* V64: project detail views + On Set page. Existing site styling remains untouched. */
.project-link-ready{cursor:pointer}
.site-page{
  position:fixed; inset:0; z-index:900; background:#050505; color:#efe8da;
  overflow-y:auto; overflow-x:hidden; visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .38s ease, visibility 0s linear .38s;
}
.site-page.is-open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .38s ease}
.site-page::-webkit-scrollbar{width:7px}.site-page::-webkit-scrollbar-thumb{background:rgba(239,232,218,.22)}
.page-topbar{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;justify-content:space-between;align-items:center;padding:28px 32px;pointer-events:none}
.page-topbar>*{pointer-events:auto}
.page-wordmark{font-family:'Anton',sans-serif;font-size:24px;letter-spacing:-.03em;color:#efe8da;text-decoration:none}
.page-close{appearance:none;border:0;background:transparent;color:#efe8da;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:12px 0}
.project-page-hero{position:relative;height:100svh;min-height:620px;background:#090909;overflow:hidden}
.project-page-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#080808}
.project-page-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.28) 100%);pointer-events:none}
.project-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;border:1px solid rgba(239,232,218,.78);background:rgba(0,0,0,.16);backdrop-filter:blur(6px);color:#efe8da;display:grid;place-items:center;cursor:pointer;z-index:4;transition:transform .25s ease,background .25s ease,opacity .25s ease}
.project-play:hover{transform:translate(-50%,-50%) scale(1.05);background:rgba(0,0,0,.35)}
.project-play span{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid currentColor;margin-left:5px}
.project-page-hero.is-playing .project-play{opacity:0;pointer-events:none}
.project-page-intro{position:absolute;left:5vw;right:5vw;bottom:5.5vh;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.project-page-title{margin:0;font-family:'Anton',sans-serif;font-size:clamp(50px,7vw,112px);font-weight:400;line-height:.84;letter-spacing:-.015em}
.project-page-title em{display:block;font-family:'Bodoni Moda',serif;font-size:.48em;font-weight:400;line-height:1.05;color:rgba(239,232,218,.84)}
.project-page-meta{max-width:520px;font-family:'Montserrat',sans-serif;font-size:9px;line-height:1.7;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,232,218,.7);text-align:right}
.project-gallery{padding:90px 28px 110px;background:#050505}
.project-gallery-head{display:flex;justify-content:space-between;align-items:flex-end;margin:0 auto 34px;max-width:1600px;gap:30px}
.project-gallery-head h3,.onset-head h1{margin:0;font-family:'Anton',sans-serif;font-weight:400;letter-spacing:-.02em;line-height:.85}
.project-gallery-head h3{font-size:clamp(48px,6vw,90px)}
.project-gallery-head span{font-family:'Montserrat',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,232,218,.5)}
.project-gallery-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.project-still{position:relative;overflow:hidden;background:#111;min-height:320px}
.project-still canvas{display:block;width:100%;height:100%;object-fit:cover}
.project-still:nth-child(1){grid-column:span 7;height:52vw;max-height:700px}.project-still:nth-child(2){grid-column:span 5;height:52vw;max-height:700px}
.project-still:nth-child(3),.project-still:nth-child(4),.project-still:nth-child(5){grid-column:span 4;height:32vw;max-height:470px}
.project-still:nth-child(6){grid-column:span 12;height:48vw;max-height:720px}
.still-loading{position:absolute;inset:0;display:grid;place-items:center;font-family:'Montserrat',sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(239,232,218,.38)}
.onset-page{background:#07134B}
.onset-shell{min-height:100%;padding:150px 30px 90px;position:relative}
.onset-head{max-width:1500px;margin:0 auto 54px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.onset-head h1{font-size:clamp(78px,12vw,190px)}
.onset-head p{max-width:420px;margin:0 0 12px;font-family:'Montserrat',sans-serif;font-size:12px;line-height:1.7;color:rgba(239,232,218,.68)}
.onset-grid{max-width:1500px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.onset-card{position:relative;height:clamp(340px,43vw,650px);overflow:hidden;background:#0c194e;cursor:pointer}
.onset-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88);transform:scale(1.01)}
.onset-card:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(3,3,3,.78),rgba(3,3,3,.04) 65%)}
.onset-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}.onset-copy b{display:block;font-family:'Anton',sans-serif;font-size:clamp(32px,4vw,58px);font-weight:400;line-height:.9}.onset-copy span{display:block;margin-top:8px;font-family:'Montserrat',sans-serif;font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:rgba(239,232,218,.65)}
.onset-note{max-width:1500px;margin:22px auto 0;font-family:'Montserrat',sans-serif;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,232,218,.45)}
body.page-view-open{overflow:hidden}
@media(max-width:760px){
 .page-topbar{padding:22px 18px}.project-page-intro{left:18px;right:18px;bottom:28px;display:block}.project-page-meta{text-align:left;margin-top:18px;max-width:100%}.project-play{width:74px;height:74px}
 .project-gallery{padding:65px 14px 80px}.project-gallery-grid{gap:10px}.project-still,.project-still:nth-child(n){grid-column:span 12;height:68vw;min-height:240px}.project-gallery-head{display:block}.project-gallery-head span{display:block;margin-top:12px}
 .onset-shell{padding:120px 14px 70px}.onset-head{display:block}.onset-head p{margin-top:26px}.onset-grid{grid-template-columns:1fr;gap:12px}.onset-card{height:68vw;min-height:300px}
}
@media(prefers-reduced-motion:reduce){.site-page{transition:none}.project-play{transition:none}}



/* V65 — unify opened pages with the main Vero visual language while preserving the BTS grid composition. */
.site-page{background:var(--vero-black,#030303);color:var(--vero-cream,#efe8da)}
.page-topbar{padding:24px 32px}
.page-wordmark.page-logo-link{display:block;width:116px;height:auto;line-height:0}
.page-wordmark.page-logo-link .vm-logo-image{display:block;width:100%;height:auto;object-fit:contain}
.page-close{color:var(--vero-cream,#efe8da)}
.page-close:hover{color:var(--vero-orange,#ff4f08)}
.project-page-hero{background:var(--vero-black,#030303)}
.project-page-title{color:var(--vero-cream,#efe8da)}
.project-page-title em{color:rgba(239,232,218,.84)}
.project-page-intro{display:block;left:5vw;right:auto;bottom:6vh;max-width:min(760px,82vw)}
.project-page-meta{position:relative;margin-top:18px;max-width:620px;text-align:left;color:rgba(239,232,218,.72);padding-left:18px}
.project-page-meta::before{content:'';position:absolute;left:0;top:.63em;width:6px;height:6px;border-radius:50%;background:var(--vero-orange,#ff4f08)}
.project-gallery{background:var(--vero-black,#030303)}
.project-gallery-head h3{color:var(--vero-cream,#efe8da)}
.project-gallery-head span{color:rgba(239,232,218,.5)}
.project-play{border-color:rgba(239,232,218,.78);color:var(--vero-cream,#efe8da)}
.project-play:hover{border-color:var(--vero-orange,#ff4f08)}
/* On Set adopts the same black / cream / orange language; the BTS grid layout itself stays as-is. */
.onset-page{background:var(--vero-black,#030303)}
.onset-head h1{color:var(--vero-cream,#efe8da)}
.onset-head p{color:rgba(239,232,218,.68)}
.onset-card{background:#0d0d0d}
.onset-copy span{color:rgba(239,232,218,.65)}
.onset-note{color:rgba(239,232,218,.45)}
.onset-head::after{content:'';display:block;width:8px;height:8px;border-radius:50%;background:var(--vero-orange,#ff4f08);margin-bottom:17px;flex:0 0 auto}
@media(max-width:760px){
  .page-topbar{padding:20px 18px}
  .page-wordmark.page-logo-link{width:96px}
  .project-page-intro{left:18px;right:18px;bottom:30px;max-width:none}
  .project-page-meta{max-width:100%}
  .onset-head::after{margin-top:18px;margin-bottom:0}
}



/* V66: preserve V65 design; fix project title spacing and extend home-style motion to connected pages. */
.project-page-title{line-height:.94 !important;}
.project-page-title em{
  line-height:1 !important;
  margin-top:.10em !important;
}
.project-gallery-head{justify-content:flex-end !important;}
.project-gallery-head span{margin-left:auto;}
.site-page{scroll-behavior:smooth;scroll-snap-type:y proximity;}
.project-page-hero,.project-gallery,.onset-shell{scroll-snap-align:start;}

/* Rise + fade treatment matching the homepage motion language. */
.project-page-intro,
.project-gallery-head,
.onset-head,
.onset-copy{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.project-page-intro.v66-in,
.project-gallery-head.v66-in,
.onset-head.v66-in,
.onset-copy.v66-in{
  opacity:1;
  transform:translateY(0);
}
.onset-card:nth-child(2n) .onset-copy{transition-delay:.08s;}
@media(prefers-reduced-motion:reduce){
  .site-page{scroll-behavior:auto;scroll-snap-type:none;}
  .project-page-intro,.project-gallery-head,.onset-head,.onset-copy{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}



/* V67: project gallery begins directly after hero and spans full viewport width */
.project-gallery{
  position:relative !important;
  padding:0 0 110px !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
}
.project-gallery-grid{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.project-gallery-head{
  position:absolute !important;
  top:24px !important;
  right:28px !important;
  left:auto !important;
  z-index:5 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  pointer-events:none;
}
@media(max-width:650px){
  .project-gallery{padding:0 0 80px !important;}
  .project-gallery-grid{gap:10px !important;}
  .project-gallery-head{top:16px !important;right:14px !important;}
  .project-gallery-head span{margin-top:0 !important;}
}



/* V68: subtle gallery hover motion + homepage-style snap from project hero into gallery. */
.project-page.site-page{
  scroll-behavior:smooth !important;
  scroll-snap-type:y mandatory !important;
  overscroll-behavior-y:contain;
}
.project-page .project-page-hero{
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
}
.project-page .project-gallery{
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
}

/* Gallery still hover: quiet, image-led movement without changing the grid. */
.project-page .project-still{
  transition:transform .55s cubic-bezier(.22,.61,.36,1), filter .55s cubic-bezier(.22,.61,.36,1);
  transform:translateZ(0);
}
.project-page .project-still canvas{
  transform:scale(1.001);
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1), filter .8s ease;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .project-page .project-still:hover{
    transform:translateY(-3px);
  }
  .project-page .project-still:hover canvas{
    transform:scale(1.045);
    filter:brightness(1.04);
  }
}

@media(prefers-reduced-motion:reduce){
  .project-page.site-page{
    scroll-behavior:auto !important;
    scroll-snap-type:none !important;
  }
  .project-page .project-still,
  .project-page .project-still canvas{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}



/* Project pages: match homepage block-by-block scroll behavior */
.project-view, .project-page, .project-detail-page {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100vh;
}
.project-view > section, .project-page > section, .project-detail-page > section,
.project-hero, .project-gallery-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.project-hero {
  min-height: 100vh !important;
  height: 100vh !important;
}
.project-gallery-section {
  min-height: 100vh;
}



/* V70: one deliberate block transition from the project film to the gallery,
   then normal continuous scrolling through the full gallery. */
#project-detail-page.site-page{
  scroll-behavior:smooth !important;
  scroll-snap-type:y mandatory !important;
  overscroll-behavior-y:auto !important;
}
#project-detail-page > .project-page-hero,
#project-detail-page > .project-gallery{
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
}
#project-detail-page > .project-page-hero{
  height:100svh !important;
  min-height:100svh !important;
}
/* The gallery is one long snap region: after its top locks into place,
   there are no additional snap points, so the rest scrolls continuously. */
#project-detail-page > .project-gallery{
  min-height:100svh !important;
}

/* Each gallery tile gets a quiet physical lift on hover. */
#project-detail-page .project-still{
  position:relative;
  z-index:0;
  transition:transform .48s cubic-bezier(.22,.61,.36,1), box-shadow .48s ease !important;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  #project-detail-page .project-still:hover{
    transform:translateY(-6px) !important;
    z-index:2;
    box-shadow:0 16px 34px rgba(0,0,0,.24);
  }
}
@media(prefers-reduced-motion:reduce){
  #project-detail-page.site-page{
    scroll-behavior:auto !important;
    scroll-snap-type:none !important;
  }
  #project-detail-page .project-still{
    transition:none !important;
    transform:none !important;
    box-shadow:none !important;
  }
}



/* Project-page metadata dots: all orange */
.project-page .meta-dot,
.project-page .project-dot,
.project-page .detail-dot,
.project-page .project-meta-dot,
.project-page [class*="dot"]{
  background:#ff4f08 !important;
  border-color:#ff4f08 !important;
  color:#ff4f08 !important;
  opacity:1 !important;
}
/* Preserve single snap into gallery, then remove any snap/stutter inside gallery */
.project-page .project-gallery,
.project-page .project-gallery-section,
.project-page .gallery-section{
  scroll-snap-align:none !important;
  scroll-snap-stop:normal !important;
}
.project-page.gallery-free-scroll,
html.gallery-free-scroll,
body.gallery-free-scroll{
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
}



/* Project detail metadata mirrors the homepage: every separator dot is Vero orange. */
#project-detail-page .project-page-meta{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px 12px !important;
  padding-left:0 !important;
}
#project-detail-page .project-page-meta::before{display:none !important;}
#project-detail-page .project-page-meta-dot{
  display:inline-block !important;
  width:5px !important;
  height:5px !important;
  min-width:5px !important;
  border-radius:50% !important;
  background:#ff4f08 !important;
  border:0 !important;
  opacity:1 !important;
  flex:0 0 5px !important;
}



/* Keep Vero's custom dot cursor on interactive content — never show the browser hand. */
@media (pointer:fine){
  html,body,a,button,[role="link"],.project-link-ready,.our-project-card,.onset-card,.project-play{cursor:none !important;}
}
.cur.link{width:10px !important;height:10px !important;background:#ff4f08 !important;border-radius:50% !important;}

/* Project hero copy/UI clears away during playback and returns on pause/scroll-off. */
#project-detail-page .page-topbar,
#project-detail-page .project-page-intro,
#project-detail-page .project-page-shade{
  transition:opacity .42s ease, visibility .42s ease;
}
#project-detail-page .project-page-hero.is-playing .project-page-intro,
#project-detail-page .project-page-hero.is-playing ~ .page-topbar{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
/* topbar is a sibling outside the hero, so target it from the open project page as well */
#project-detail-page.project-playback-active > .page-topbar{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#project-detail-page .project-page-hero.is-playing .project-page-shade{opacity:.16;}

/* Quiet end credit on the main site's final panel. */
.vero-site-footer{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:4;
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(239,232,218,.42);
  white-space:nowrap;
}
@media(max-width:700px){.vero-site-footer{bottom:16px;font-size:7px;}}



/*
  CLIENT LOGO CAROUSEL — DEVELOPER HANDOFF
  -----------------------------------------
  Current test assets were separated from the supplied transparent logo sheet
  and normalized to white. Every logo uses the SAME rendered height and its
  natural aspect ratio, matching the aligned FilmLaab-style treatment.

  PRODUCTION:
  Replace items in VERO_CLIENT_LOGOS near the bottom with final SVG/PNG files.
  The carousel does not need to be rebuilt.
*/
#p4{padding-bottom:118px !important;}
#p4 .p4-inner{transform:translateY(-22px);}
.vero-client-marquee{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:22px;
  overflow:hidden;
}
.vero-client-label{
  padding:0 32px 12px;
  font-family:'Montserrat',sans-serif;
  font-size:7px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(239,232,218,.38);
}
.vero-client-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  border-top:1px solid rgba(239,232,218,.055);
  border-bottom:1px solid rgba(239,232,218,.055);
  padding:17px 0;
}
.vero-client-viewport::before,.vero-client-viewport::after{
  content:'';
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  width:7vw;
  min-width:42px;
  pointer-events:none;
}
.vero-client-viewport::before{left:0;background:linear-gradient(90deg,#07134B 0%,rgba(7,19,75,0) 100%);}
.vero-client-viewport::after{right:0;background:linear-gradient(270deg,#07134B 0%,rgba(7,19,75,0) 100%);}
.vero-client-track{
  display:flex;
  align-items:center;
  width:max-content;
  will-change:transform;
  animation:veroClientRoll 42s linear infinite;
}
.vero-client-group{
  display:flex;
  align-items:center;
  gap:clamp(42px,4.2vw,76px);
  padding-right:clamp(42px,4.2vw,76px);
}
.vero-client-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  height:36px;
  overflow:visible;
  opacity:.92;
}
.vero-client-logo img{
  display:block;
  height:36px;
  width:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
}
@keyframes veroClientRoll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
.vero-window-footer{
  position:relative;
  width:100%;
  padding:34px 28px 26px;
  background:#030303;
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(239,232,218,.42);
}
#on-set-page .vero-window-footer{background:#030303;}
#project-detail-page .project-gallery{padding-bottom:0 !important;}

/* Cursor is locked directly to pointer input — no trailing interpolation. */
.cur{
  transition:width .3s,height .3s,background .3s,border-radius .3s !important;
  will-change:left,top;
}

@media(max-width:700px){
  #p4{padding-bottom:100px !important;}
  #p4 .p4-inner{transform:translateY(-28px);}
  .vero-client-marquee{bottom:12px;}
  .vero-client-label{padding:0 18px 9px;font-size:6px;}
  .vero-client-viewport{padding:14px 0;}
  .vero-client-group{gap:34px;padding-right:34px;}
  .vero-client-logo,.vero-client-logo img{height:30px;}
  .vero-window-footer{padding:28px 18px 22px;font-size:7px;}
}
@media(prefers-reduced-motion:reduce){
  .vero-client-track{animation:none;transform:none;}
  .vero-client-viewport{overflow-x:auto;}
}



/* V80 — On Set heading mirrors the Our Projects header treatment. */
#on-set-page .onset-shell{
  padding:72px 28px 90px;
}
#on-set-page .onset-head{
  width:100%;
  max-width:none;
  margin:0 0 28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
#on-set-page .onset-head h1{
  margin:0;
  font-family:'Anton',sans-serif;
  font-size:clamp(58px,7vw,108px);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.015em;
  color:#efe8da;
}
#on-set-page .onset-head p{
  max-width:420px;
  margin:0 0 9px;
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  line-height:1.65;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(239,232,218,.48);
}
#on-set-page .onset-head::after{
  display:none;
}
#on-set-page .onset-grid{
  max-width:none;
  width:100%;
}

@media(max-width:760px){
  #on-set-page .onset-shell{
    padding:120px 14px 70px;
  }
  #on-set-page .onset-head{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    margin-bottom:22px;
  }
  #on-set-page .onset-head p{
    margin:0;
    max-width:520px;
    font-size:8px;
  }
}



/* V81 — hide the On Set Vero logo only while the ON SET. title overlaps it. */
#on-set-page .onset-page-home{
  opacity:1;
  visibility:visible;
  transition:opacity .22s ease, visibility 0s linear 0s;
}
#on-set-page .onset-page-home.v81-overlap-hidden{
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility 0s linear .22s;
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  #on-set-page .onset-page-home{
    transition:none !important;
  }
}



/* V82 — keep the Vero logo visible and move the On Set header to the right. */
#on-set-page .onset-page-home{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#on-set-page .onset-page-home.v81-overlap-hidden{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#on-set-page .onset-head{
  justify-content:flex-end !important;
  text-align:right !important;
}
#on-set-page .onset-head h1{
  margin-left:auto !important;
  text-align:right !important;
}
#on-set-page .onset-head p{
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
}
@media(max-width:760px){
  #on-set-page .onset-head{
    align-items:flex-end !important;
  }
  #on-set-page .onset-head h1,
  #on-set-page .onset-head p{
    text-align:right !important;
    margin-left:auto !important;
  }
}



/* V83 — On Set title on the right; supporting copy aligned left with the Vero logo. */
#on-set-page .onset-head{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:end !important;
  gap:28px !important;
  text-align:left !important;
}
#on-set-page .onset-head h1{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:end !important;
  margin:0 !important;
  text-align:right !important;
}
#on-set-page .onset-head p{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  align-self:end !important;
  margin:0 0 9px !important;
  max-width:520px !important;
  text-align:left !important;
}
@media(max-width:760px){
  #on-set-page .onset-head{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  #on-set-page .onset-head h1{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:end !important;
    text-align:right !important;
  }
  #on-set-page .onset-head p{
    grid-column:1 !important;
    grid-row:2 !important;
    justify-self:start !important;
    text-align:left !important;
    margin:0 !important;
  }
}



/* V84 — give the On Set close button its own clear zone. */
#on-set-page .onset-head{
  padding-right:150px !important;
}
#on-set-page .onset-head h1{
  max-width:calc(100% - 8px) !important;
}
#on-set-page .onset-close,
#on-set-page [data-onset-close],
#on-set-page .page-close{
  z-index:20 !important;
}

@media(max-width:980px){
  #on-set-page .onset-head{
    padding-right:120px !important;
  }
}
@media(max-width:760px){
  #on-set-page .onset-head{
    padding-right:72px !important;
  }
}



/* =========================================================================
   V87 — MOBILE ONLY
   Desktop/tablet desktop styling remains untouched.
   Fixes mobile navigation + top-of-page overscroll/snap instability.
   ========================================================================= */
@media (max-width:767px){
  /* Keep the approved mobile hero spacing. */
  #p1 .p1-word-you{
    left:58% !important;
  }

  /* No custom mouse dot on touch/mobile. */
  #cur,.cur{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  html,body,a,button,[role="button"],[role="link"],.project-link-ready{
    cursor:auto !important;
  }

  /*
    Mobile browsers can combine CSS smooth scrolling, snap and rubber-band
    overscroll in a way that makes a section feel sticky or can kick the
    homepage into the next snap point. Native touch movement stays immediate;
    section snapping remains enabled.
  */
  html{
    scroll-behavior:auto !important;
    scroll-snap-type:y mandatory !important;
    overscroll-behavior-y:none;
  }
  body{
    overscroll-behavior-y:none;
  }

  /* Make the homepage an unambiguous first snap point. */
  #p1{
    height:100dvh !important;
    min-height:100dvh !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }

  /* Avoid multiple "always" stops fighting a normal finger scroll on mobile. */
  .panel:not(#p1),
  #our-projects{
    scroll-snap-stop:normal !important;
  }
}
@media (hover:none) and (pointer:coarse) and (max-width:767px){
  #cur,.cur{display:none !important;}
}



/* V88 — mobile-only micro-adjustment: lower YOU. very slightly. */
@media (max-width:767px){
  #p1 .p1-word-you{
    transform:translateY(4px) !important;
  }
}



/* =========================================================================
   V89 — MOBILE ONLY (<= 767px)
   No desktop styling is changed by this block.
   ========================================================================= */
@media (max-width:767px){

  /* 2) Ensure the Selected Clients carousel is clearly visible on mobile. */
  #p4 .vero-client-marquee{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:6 !important;
    bottom:34px !important;
  }
  #p4 .vero-client-viewport{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #p4 .vero-client-track{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #p4{
    padding-bottom:126px !important;
  }
  #p4 .p4-inner{
    transform:translateY(-42px) !important;
  }

  /* 3) Lower OUR PROJECTS enough to clear the fixed Vero logo. */
  #our-projects .our-projects-inner{
    padding-top:126px !important;
  }

  /* 4) Keep the full featured-project metadata visible on narrow screens. */
  #p2 .proj-content,
  #work-right-on-time .proj-content{
    padding-bottom:58px !important;
  }
  #p2 .proj-meta,
  #work-right-on-time .proj-meta{
    flex-wrap:wrap !important;
    column-gap:10px !important;
    row-gap:7px !important;
    max-width:100% !important;
    padding-right:4px !important;
    line-height:1.45 !important;
  }

  /* Mobile project hero should visibly show its poster before Play. */
  #project-detail-page .project-page-video{
    background-color:#080808 !important;
  }
}



/* =========================================================================
   V90 — MOBILE ONLY (<=767px)
   Desktop/tablet-desktop behavior is untouched.
   ========================================================================= */
@media (max-width:767px){

  /* 1) Smoother bidirectional section rolling on mobile.
     Proximity snapping keeps the page guided without "fighting" a finger scroll.
     Our Projects can naturally scroll through its long grid, while its heading
     still remains a valid snap point when the user scrolls back toward it. */
  html{
    scroll-snap-type:y proximity !important;
    scroll-behavior:auto !important;
  }
  #p1{
    scroll-snap-stop:normal !important;
  }
  .panel,
  #our-projects{
    scroll-snap-align:start !important;
    scroll-snap-stop:normal !important;
  }
  #our-projects{
    scroll-margin-top:0 !important;
  }
  #our-projects .our-projects-inner{
    justify-content:flex-start !important;
    padding-top:132px !important;
  }
  #our-projects .our-projects-head{
    flex:0 0 auto !important;
  }

  /* 2) Client carousel: make it part of the visible About layout on mobile
     instead of relying on absolute positioning inside a viewport-height panel. */
  #p4{
    height:auto !important;
    min-height:100dvh !important;
    padding-bottom:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  #p4 .p4-inner{
    position:relative !important;
    transform:none !important;
    flex:1 0 auto !important;
    min-height:calc(100dvh - 106px) !important;
    padding-bottom:34px !important;
  }
  #p4 .vero-client-marquee{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    flex:0 0 auto !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:hidden !important;
  }
  #p4 .vero-client-viewport{
    width:100% !important;
    overflow:hidden !important;
  }
  #p4 .vero-client-track{
    display:flex !important;
    width:max-content !important;
    animation:veroClientRollMobile 28s linear infinite !important;
    animation-play-state:running !important;
    transform:translate3d(0,0,0);
    will-change:transform !important;
  }
  #p4 .vero-client-group{
    display:flex !important;
    flex:0 0 auto !important;
  }
  @keyframes veroClientRollMobile{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-50%,0,0);}
  }

  /* 3) ON SET title: right edge aligns optically with the Close control. */
  #on-set-page .onset-head{
    padding-right:0 !important;
  }
  #on-set-page .onset-head h1{
    justify-self:end !important;
    text-align:right !important;
    margin-right:14px !important;
    max-width:none !important;
  }
}

/* Keep the carousel moving on mobile even if a browser reports reduced motion.
   This exception is limited to the client-logo strip requested for mobile. */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  #p4 .vero-client-track{
    animation:veroClientRollMobile 28s linear infinite !important;
    transform:translate3d(0,0,0) !important;
  }
}



/* =========================================================================
   V91 — MOBILE ONLY
   Restores the approved About copy beneath FILMS WE'D ACTUALLY WATCH.
   No desktop styling or other mobile sections are changed.
   ========================================================================= */
@media (max-width:767px){
  #p4 .p4-inner{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-content:center !important;
    gap:28px !important;
    padding:76px 20px 34px !important;
    min-height:auto !important;
  }

  #p4 .p4-left{
    width:100% !important;
  }

  #p4 .p4-right{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
  }

  #p4 .p4-body{
    display:block !important;
    max-width:520px !important;
    margin:0 0 26px !important;
    font-size:13px !important;
    line-height:1.72 !important;
    color:rgba(245,243,237,.56) !important;
    text-align:left !important;
  }

  #p4 .p4-services{
    margin:0 0 24px !important;
  }

  #p4 .p4-service{
    font-size:9px !important;
    line-height:1.7 !important;
  }

  #p4 .p4-link{
    margin-bottom:0 !important;
  }

  /* Keep the already-approved client carousel beneath the About content. */
  #p4 .vero-client-marquee{
    margin-top:10px !important;
  }
}



#p4 .p4-service{font-weight:600 !important;}



/* V97 — category filters beside OUR PROJECTS. */
.our-projects-title-row{
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:34px;
}
.our-project-filters{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px 18px;
  margin:0 0 8px auto;
  max-width:630px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .72s ease,transform .72s cubic-bezier(.2,.72,.2,1);
}
.our-project-filters.is-visible{
  opacity:1;
  transform:translateY(0);
}
.our-project-filter{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(239,232,218,.42);
  opacity:1;
  cursor:pointer;
  transition:color .25s ease,opacity .25s ease,transform .25s ease;
}
.our-project-filter:hover{
  color:rgba(239,232,218,.7);
}
.our-project-filter.is-active{
  color:#efe8da;
}
.our-project-card.v97-filter-hidden{
  display:none !important;
}
.our-project-card.v97-filter-enter{
  animation:v97FilterCardIn .46s cubic-bezier(.2,.74,.2,1) both;
}
@keyframes v97FilterCardIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* Prevent collisions with the fixed Vero logo/nav at narrower widths. */
@media(max-width:1100px){
  .our-projects-title-row{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .our-project-filters{
    justify-content:flex-start;
    margin:0;
    max-width:100%;
  }
}
@media(max-width:767px){
  #our-projects .our-projects-inner{
    padding-top:146px !important;
  }
  .our-projects-title-row{
    gap:16px;
  }
  .our-project-filters{
    gap:9px 15px;
    padding-right:6px;
  }
  .our-project-filter{
    font-size:8px;
    letter-spacing:.12em;
  }
}



.our-projects-title-row{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:34px!important}.our-project-filters{grid-column:1!important;grid-row:1!important;justify-self:start!important;justify-content:flex-start!important;margin:0 0 8px 0!important;max-width:680px!important}.our-projects-title-row h2{grid-column:2!important;grid-row:1!important;justify-self:end!important;text-align:right!important;margin-left:auto!important}.v98-category-dot{display:inline-block;width:5px;height:5px;min-width:5px;border-radius:50%;background:#ff4f08;vertical-align:middle;margin:0 7px;transform:translateY(-1px)}.our-project-card.v98-filter-hidden{display:none!important}.our-project-card.v98-filter-enter{animation:v98FilterCardIn .46s cubic-bezier(.2,.74,.2,1) both}@keyframes v98FilterCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.our-projects-title-row{grid-template-columns:1fr!important;gap:16px!important}.our-project-filters{grid-column:1!important;grid-row:1!important;justify-self:start!important;margin:0!important}.our-projects-title-row h2{grid-column:1!important;grid-row:2!important;justify-self:end!important;text-align:right!important;width:100%!important;margin:0!important}}@media(max-width:767px){#our-projects .our-projects-inner{padding-top:146px!important}.our-projects-title-row{gap:14px!important}.our-project-filters{padding-right:0!important}.our-projects-title-row h2{text-align:right!important}.v98-category-dot{width:4px;height:4px;min-width:4px;margin:0 5px}}



#our-projects .our-projects-eyebrow{transform:translateY(18px);}
#our-projects .our-project-filters{transform:translateY(36px);position:relative;isolation:isolate;z-index:2;}
#our-projects .our-project-filters.is-visible{transform:translateY(18px);}
#our-projects .our-project-filter{display:inline-flex;align-items:center;gap:7px;}
#our-projects .our-project-filter::before{content:'';display:block;width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:rgba(239,232,218,.22);transition:background .25s ease,opacity .25s ease,transform .25s ease;}
#our-projects .our-project-filter.is-active::before{background:#ff4f08;opacity:1;transform:scale(1.06);}
@media(max-width:1100px){#our-projects .our-projects-eyebrow{transform:translateY(14px);}#our-projects .our-project-filters{transform:translateY(30px);}#our-projects .our-project-filters.is-visible{transform:translateY(14px);}}
@media(max-width:767px){#our-projects .our-projects-eyebrow{transform:translateY(10px);}#our-projects .our-project-filters{transform:translateY(26px);}#our-projects .our-project-filters.is-visible{transform:translateY(10px);}#our-projects .our-project-filter::before{width:4px;height:4px;flex-basis:4px;}}



/* Remove orange category separator dots only from the Our Projects card descriptions. */
#our-projects .our-project-details .v98-category-dot{
  display:none !important;
}

/* Preserve readable spacing where the slash was removed in grid copy. */
#our-projects .our-project-details{
  word-spacing:.04em;
}

/* Local filter visibility helpers. */
#our-projects .our-project-card.v100-filter-hidden{
  display:none !important;
}
#our-projects .our-project-card.v100-filter-enter{
  animation:v100FilterCardIn .46s cubic-bezier(.2,.74,.2,1) both;
}
@keyframes v100FilterCardIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* Keep active heading dot behavior unchanged. */
#our-projects .our-project-filter.is-active::before{
  background:#ff4f08 !important;
}



/* V102 — fix overlap between the fixed Vero home-link hit area and the All filter.
   No visual/layout changes beyond click layering. */
#our-projects .our-project-filters{
  position:relative !important;
  z-index:50 !important;
  pointer-events:auto !important;
}
#our-projects .our-project-filter{
  position:relative !important;
  z-index:51 !important;
  pointer-events:auto !important;
}

/* Keep the visible logo exactly where it is, but prevent its anchor hitbox
   from extending beyond the actual logo image. */
#nav .n-tl{
  pointer-events:none !important;
}
#nav .logo-image-link{
  display:inline-flex !important;
  width:auto !important;
  height:auto !important;
  pointer-events:auto !important;
}
#nav .logo-image-link .vm-logo-image{
  display:block !important;
  pointer-events:none !important;
}



/* V103 — restore the Vero home logo to its original compact top-left position.
   Keep the click-region fix from V102, but do not allow the anchor/image to expand. */
#nav .n-tl{
  position:fixed !important;
  top:28px !important;
  left:32px !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  pointer-events:none !important;
  z-index:1000 !important;
}

#nav .logo-image-link{
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  pointer-events:auto !important;
}

#nav .logo-image-link .vm-logo-image{
  display:block !important;
  width:92px !important;
  height:auto !important;
  max-width:92px !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:none !important;
  pointer-events:none !important;
}

@media(max-width:767px){
  #nav .n-tl{
    top:22px !important;
    left:20px !important;
  }
  #nav .logo-image-link .vm-logo-image{
    width:78px !important;
    max-width:78px !important;
  }
}



/* V106 — only fixes the pre-JS first frame of YOU.
   Match the first roll face immediately so there is no bold-white flash. */
#heroYou:not(.final){
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:500;
  font-size:.78em;
  letter-spacing:-.03em;
  color:var(--vero-cream);
}



/* Keep Vero's own Close control available while the full film is playing. */
#project-detail-page.project-playback-active > .page-topbar{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:30 !important;
}
#project-detail-page.project-playback-active > .page-topbar > *{
  pointer-events:auto !important;
}
#project-detail-page.project-playback-active .page-close{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  cursor:none !important;
}

/* Vimeo is intentionally non-interactive: playback is controlled by our DOM
   controls so the site's custom cursor remains active everywhere. */
#project-detail-page iframe[data-vero-vimeo="true"]{
  pointer-events:none !important;
}
#project-page-hero:fullscreen,
#project-page-hero:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  background:#000 !important;
}
#project-page-hero:fullscreen .vero-vimeo-controls,
#project-page-hero:-webkit-full-screen .vero-vimeo-controls{
  z-index:2147483646 !important;
}
#project-page-hero:fullscreen .vero-vimeo-clicksurface,
#project-page-hero:-webkit-full-screen .vero-vimeo-clicksurface{
  z-index:2147483645 !important;
}
#project-page-hero:fullscreen iframe[data-vero-vimeo="true"],
#project-page-hero:-webkit-full-screen iframe[data-vero-vimeo="true"]{
  z-index:2147483644 !important;
}
.vero-fullscreen-cursor{
  position:fixed;
  left:0;
  top:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#F5F3ED;
  pointer-events:none;
  z-index:2147483647;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  display:none;
}
#project-page-hero:fullscreen .vero-fullscreen-cursor,
#project-page-hero:-webkit-full-screen .vero-fullscreen-cursor{
  display:block;
}
@media(max-width:767px),(pointer:coarse){
  .vero-fullscreen-cursor{display:none !important;}
}

#project-page-hero:fullscreen ~ *,
#project-page-hero:-webkit-full-screen ~ *{
  /* no layout changes outside fullscreen */
}


/* Minimal Vero controls; only visible during Vimeo playback. */
.vero-vimeo-controls{
  position:absolute;
  left:32px;
  right:32px;
  bottom:24px;
  z-index:24;
  display:flex;
  align-items:center;
  gap:14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
#project-detail-page.project-playback-active .vero-vimeo-controls{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#project-detail-page.project-playback-active.vimeo-controls-hidden .vero-vimeo-controls{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.vero-vimeo-controls button{
  appearance:none;
  border:0;
  background:transparent;
  color:#efe8da;
  font:600 9px/1 'Montserrat',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:8px 0;
  cursor:none !important;
}
.vero-vimeo-progress{
  flex:1;
  min-width:80px;
  height:2px;
  appearance:none;
  -webkit-appearance:none;
  background:rgba(239,232,218,.34);
  border:0;
  outline:0;
  cursor:none !important;
}
.vero-vimeo-progress::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#efe8da;
  border:0;
}
.vero-vimeo-progress::-moz-range-thumb{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#efe8da;
  border:0;
}
.vero-vimeo-time{
  flex:0 0 auto;
  color:rgba(239,232,218,.75);
  font:500 8px/1 'Montserrat',sans-serif;
  letter-spacing:.08em;
  white-space:nowrap;
}
.vero-vimeo-clicksurface{
  position:absolute;
  inset:0;
  z-index:20;
  background:transparent;
  cursor:none !important;
}
#project-detail-page:not(.project-playback-active) .vero-vimeo-clicksurface{
  display:none;
}

@media(max-width:767px){
  .vero-vimeo-controls{left:20px;right:20px;bottom:18px;gap:10px}
  .vero-vimeo-time{font-size:7px}
}



/* V114 — standalone The Room + Vero Media Learning pages */
.vero-program-page{
  background:#050505;
  color:#efe8da;
  overflow-y:auto;
}
.vero-program-shell{
  min-height:100svh;
  padding:150px 5vw 90px;
  display:flex;
  flex-direction:column;
}
.vero-program-heading{
  margin:0;
  font-family:'Anton',sans-serif;
  font-size:clamp(76px,12vw,190px);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.vero-program-heading em{
  font-family:'Bodoni Moda',serif;
  font-style:italic;
  font-weight:400;
  text-transform:none;
}
.vero-program-intro{
  width:min(620px,90vw);
  margin:48px 0 64px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(15px,1.35vw,20px);
  font-weight:300;
  line-height:1.65;
  color:rgba(239,232,218,.76);
}
.vero-program-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:320px;
  background:#0a0a0a;
  overflow:hidden;
}
.vero-program-media iframe,
.vero-program-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}
.vero-program-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  border:1px solid rgba(239,232,218,.12);
  color:rgba(239,232,218,.38);
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.vero-program-page .vero-window-footer{
  margin-top:auto;
  padding-top:72px;
}
@media(max-width:767px){
  .vero-program-shell{padding:120px 20px 70px;}
  .vero-program-heading{font-size:clamp(58px,18vw,108px);}
  .vero-program-intro{margin:34px 0 44px;font-size:15px;}
  .vero-program-media{min-height:220px;}
}



.vero-program-instagram{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:38px;
  color:#efe8da;
  opacity:.72;
  transition:opacity .2s ease, transform .2s ease;
  cursor:none;
}
.vero-program-instagram:hover{
  opacity:1;
  transform:translateY(-2px);
}
.vero-program-instagram svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
}

.vero-learning-cta{
  margin-top:88px;
  width:min(760px,100%);
}
.vero-learning-cta h2{
  margin:0;
  font-family:'Anton',sans-serif;
  font-size:clamp(42px,5.2vw,78px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.vero-learning-cta > p{
  margin:16px 0 38px;
  font-family:'Bodoni Moda',serif;
  font-size:clamp(28px,3vw,44px);
  font-style:italic;
  color:rgba(239,232,218,.84);
}
.vero-learning-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 28px;
}
.vero-learning-form label{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.vero-learning-form label:last-of-type{
  grid-column:1 / -1;
}
.vero-learning-form span{
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(239,232,218,.55);
}
.vero-learning-form input,
.vero-learning-form textarea{
  width:100%;
  padding:12px 0;
  border:0;
  border-bottom:1px solid rgba(239,232,218,.28);
  border-radius:0;
  outline:none;
  background:transparent;
  color:#efe8da;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:300;
  resize:vertical;
  cursor:none;
}
.vero-learning-form input:focus,
.vero-learning-form textarea:focus{
  border-bottom-color:#ff4f08;
}
.vero-learning-form button{
  grid-column:1 / -1;
  justify-self:start;
  margin-top:8px;
  appearance:none;
  border:1px solid rgba(239,232,218,.7);
  background:transparent;
  color:#efe8da;
  padding:14px 20px;
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:none;
}
@media(max-width:767px){
  .vero-learning-cta{margin-top:64px;}
  .vero-learning-form{grid-template-columns:1fr;}
  .vero-learning-form label:last-of-type,
  .vero-learning-form button{grid-column:1;}
}



#vero-learning-media{
  position:relative;
}
#vero-learning-media iframe{
  pointer-events:none !important;
  z-index:2;
}
#vero-learning-media .vero-learning-play{
  z-index:6;
}
#vero-learning-media .vero-learning-clicksurface{
  position:absolute;
  inset:0;
  z-index:4;
  display:none;
  background:transparent;
  cursor:none !important;
}
#vero-learning-media.is-playing .vero-learning-clicksurface{
  display:block;
}
#vero-learning-media .vero-learning-controls{
  z-index:8;
}
#vero-learning-media:not(.is-playing) .vero-learning-controls{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#vero-learning-media.is-playing .vero-learning-controls{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#vero-learning-media.is-playing.controls-hidden .vero-learning-controls{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#vero-learning-media.is-playing .vero-learning-play{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.vero-learning-fullscreen-close{
  position:absolute;
  top:28px;
  right:32px;
  z-index:2147483647;
  display:none;
  appearance:none;
  border:0;
  background:transparent;
  color:#efe8da;
  font:600 10px/1 'Montserrat',sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:12px 0;
  cursor:none !important;
}
#vero-learning-media:fullscreen,
#vero-learning-media:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  aspect-ratio:auto !important;
  background:#000 !important;
}
#vero-learning-media:fullscreen .vero-learning-fullscreen-close,
#vero-learning-media:-webkit-full-screen .vero-learning-fullscreen-close{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:2147483647 !important;
}
#vero-learning-media:fullscreen .vero-learning-controls,
#vero-learning-media:-webkit-full-screen .vero-learning-controls{
  z-index:2147483646 !important;
}
#vero-learning-media:fullscreen .vero-learning-clicksurface,
#vero-learning-media:-webkit-full-screen .vero-learning-clicksurface{
  z-index:2147483645 !important;
}
#vero-learning-media:fullscreen iframe,
#vero-learning-media:-webkit-full-screen iframe{
  z-index:2147483644 !important;
}
#vero-learning-media:fullscreen .vero-learning-fullscreen-cursor,
#vero-learning-media:-webkit-full-screen .vero-learning-fullscreen-cursor{
  display:block !important;
}



/* Only Good Times: render its real screengrabs in the existing gallery tile sizes. */
#project-detail-page .good-times-still img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.05s cubic-bezier(.22,.61,.36,1),filter .8s ease;will-change:transform;}
@media(hover:hover) and (pointer:fine){#project-detail-page .good-times-still:hover img{transform:scale(1.045);filter:brightness(1.04);}}
@media(prefers-reduced-motion:reduce){#project-detail-page .good-times-still img{transition:none;transform:none;filter:none;}}



#project-detail-page .post-game-still img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.05s cubic-bezier(.22,.61,.36,1),filter .8s ease;}
@media(hover:hover) and (pointer:fine){#project-detail-page .post-game-still:hover img{transform:scale(1.045);filter:brightness(1.04);}}
@media(min-width:651px){
#project-detail-page .post-game-still:nth-child(6),
#project-detail-page .post-game-still:nth-child(7),
#project-detail-page .post-game-still:nth-child(8){grid-column:span 4;height:32vw;max-height:470px;}
#project-detail-page .post-game-still:nth-child(9){grid-column:span 12;height:48vw;max-height:720px;}
}
@media(max-width:650px){#project-detail-page .post-game-still:nth-child(n){grid-column:span 12;height:68vw;max-height:none;min-height:240px;}}
@media(prefers-reduced-motion:reduce){#project-detail-page .post-game-still img{transition:none;transform:none;filter:none;}}



/* Gallery-only: keep existing tiles, hover and responsive behavior; size tiles 7+ for longer imported galleries. */
#project-detail-page .archive-still img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.05s cubic-bezier(.22,.61,.36,1),filter .8s ease;}
@media(hover:hover) and (pointer:fine){#project-detail-page .archive-still:hover img{transform:scale(1.045);filter:brightness(1.04);}}
@media(min-width:651px){
#project-detail-page .archive-still:not(.post-game-still):nth-child(7),
#project-detail-page .archive-still:not(.post-game-still):nth-child(8){grid-column:span 6;height:39vw;max-height:590px;}
#project-detail-page .archive-still:not(.post-game-still):nth-child(9){grid-column:span 12;height:48vw;max-height:720px;}
#project-detail-page .archive-still:nth-child(10),
#project-detail-page .archive-still:nth-child(11),
#project-detail-page .archive-still:nth-child(12){grid-column:span 4;height:32vw;max-height:470px;}
}
@media(max-width:650px){#project-detail-page .archive-still:nth-child(n){grid-column:span 12;height:68vw;max-height:none;min-height:240px;}}
@media(prefers-reduced-motion:reduce){#project-detail-page .archive-still img{transition:none;transform:none;filter:none;}}



/* One deliberate hero-to-gallery snap; once the gallery lands, scrolling is fully native. */
#project-detail-page.gallery-free-scroll{
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
}
#project-detail-page.gallery-free-scroll > .project-gallery{
  scroll-snap-align:none !important;
  scroll-snap-stop:normal !important;
}


/* V126 — Vimeo full-bleed hero. No other layout selectors are changed. */
#p1 iframe.hero-bg-video{
  top:50%;left:50%;right:auto;bottom:auto;
  width:100vw;height:56.25vw;
  min-width:177.7778vh;min-height:100vh;
  max-width:none;max-height:none;
  transform:translate(-50%,-50%);
  border:0;
}

/* V126 sandbox — keep primary faces visible through responsive cover crops. */
#on-set-page .onset-card:nth-child(7) img,
#on-set-page .onset-card:nth-child(15) img,
#on-set-page .onset-card:nth-child(23) img,
#on-set-page .onset-card:nth-child(30) img,
#on-set-page .onset-card:nth-child(35) img,
#on-set-page .onset-card:nth-child(41) img,
#on-set-page .onset-card:nth-child(43) img,
#on-set-page .onset-card:nth-child(45) img,
#on-set-page .onset-card:nth-child(46) img,
#on-set-page .onset-card:nth-child(49) img,
#on-set-page .onset-card:nth-child(51) img,
#on-set-page .onset-card:nth-child(54) img,
#on-set-page .onset-card:nth-child(55) img,
#on-set-page .onset-card:nth-child(60) img,
#on-set-page .onset-card:nth-child(66) img,
#on-set-page .onset-card:nth-child(78) img,
#on-set-page .onset-card:nth-child(79) img{
  object-position:50% 25% !important;
}
#on-set-page .onset-card:nth-child(21) img,
#on-set-page .onset-card:nth-child(31) img,
#on-set-page .onset-card:nth-child(32) img,
#on-set-page .onset-card:nth-child(38) img,
#on-set-page .onset-card:nth-child(56) img,
#on-set-page .onset-card:nth-child(61) img,
#on-set-page .onset-card:nth-child(82) img{
  object-position:50% 10% !important;
}

/* V134 — targeted mobile playback, snap, fullscreen and navigation fixes. */
.mobile-menu-toggle{display:none;}

@media (max-width:767px){
  /* A full swipe lands cleanly on the next featured panel. */
  html{
    scroll-snap-type:y mandatory !important;
    scroll-behavior:auto !important;
  }
  #p1,
  #work-just-be-you,
  #p2{
    height:100svh !important;
    min-height:100svh !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }

  /* Keep all header links behind one compact mobile control. */
  #nav .n-tr{
    position:fixed !important;
    top:16px !important;
    right:16px !important;
    z-index:1200 !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    will-change:auto !important;
  }
  #nav .mobile-menu-toggle{
    position:relative;
    z-index:1202;
    display:flex;
    width:46px;
    height:46px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    border:0;
    padding:0;
    background:rgba(3,3,3,.28);
    color:#efe8da;
    border-radius:50%;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    cursor:auto !important;
    touch-action:manipulation;
  }
  #nav .mobile-menu-toggle span{
    display:block;
    width:19px;
    height:1px;
    background:currentColor;
    transition:transform .25s ease;
  }
  #nav .nav-menu{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    z-index:1201;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px !important;
    background:rgba(3,3,3,.68);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
  }
  #nav .nav-menu a{
    font-size:14px !important;
    line-height:1.3 !important;
    letter-spacing:.18em !important;
    color:#efe8da !important;
    text-align:center;
    cursor:auto !important;
  }
  #nav.mobile-menu-open .nav-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  #nav.mobile-menu-open .mobile-menu-toggle span:first-child{transform:translateY(4px) rotate(45deg);}
  #nav.mobile-menu-open .mobile-menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg);}
  body.mobile-menu-active{overflow:hidden !important;}

  /* Vimeo controls remain above the click surface and use reliable touch targets. */
  .vero-vimeo-controls{
    z-index:40 !important;
    pointer-events:auto !important;
  }
  .vero-vimeo-controls button{
    min-width:44px;
    min-height:44px;
    padding:10px 4px !important;
    cursor:auto !important;
    touch-action:manipulation;
    pointer-events:auto !important;
  }
  .vero-vimeo-clicksurface{z-index:20 !important;}
  .vero-vimeo-progress{cursor:auto !important;touch-action:pan-x;}

  /* Keep the hero iframe on its own compositor layer during mobile playback. */
  #p1 iframe.hero-bg-video{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
  }
}

/* V135 — mobile uses the static red/blue wave treatment; desktop Vimeo is unchanged. */
@media (max-width:767px){
  #p1{
    background-color:#020303 !important;
    background-image:url('../media/mobile-red-blue-waves-v140.svg') !important;
    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }
  #p1 iframe.hero-bg-video{
    display:none !important;
  }
  #p1 .hero-video-overlay{
    background:rgba(0,0,0,.12) !important;
  }
}

/* V130 — retain a usable native cursor until the custom cursor is confirmed active. */
@media (pointer:fine){
  html:not(.custom-cursor-ready),
  html:not(.custom-cursor-ready) body,
  html:not(.custom-cursor-ready) body *{
    cursor:auto !important;
  }
  html:not(.custom-cursor-ready) .cur{
    opacity:0 !important;
  }
  html.custom-cursor-ready .cur{
    opacity:1;
  }
}