/* Victoria Street opening film. Flow layout: visual on top, text below, caption last. No overlaps. */
.vf{position:absolute;inset:0;display:flex;flex-direction:column;background:#000;color:#fff;font-family:"Hanken Grotesk",system-ui,sans-serif;overflow:hidden}
.vf-pg{display:flex;gap:4px;padding:10px 16px 0;position:relative;z-index:3}
.vf-pg i{flex:1;height:2px;background:#ffffff33;overflow:hidden;display:block}
.vf-pg i.done{background:#ffffff80}
.vf-pg i.on::after{content:"";display:block;height:100%;background:#e4ff1a;transform-origin:0 50%;animation:vf-fill var(--d,5s) linear forwards}
.vf.paused .vf-pg i.on::after{animation-play-state:paused}
@keyframes vf-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vf-skip{position:absolute;top:22px;right:12px;z-index:4;min-height:44px;min-width:44px;padding:0 14px;background:transparent;border:0;color:#fff;font:500 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;mix-blend-mode:difference}
.vf-skip:focus-visible,.vf-next:focus-visible,.vf-hs:focus-visible{outline:2px solid #e4ff1a;outline-offset:2px}
.vf-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.vf-sc{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 16px 8px;animation:vf-in .9s cubic-bezier(.4,0,.2,1) both}
@keyframes vf-in{from{opacity:0}}
.vf h2{font:400 clamp(26px,4.4vw,56px)/1.06 "Instrument Serif",Georgia,serif;margin:0;color:#fff}
.vf h2 i{color:#e4ff1a;font-style:italic}
.vf-body{font-size:clamp(14px,1.4vw,17px);line-height:1.5;color:#cfd3d4;max-width:38ch;margin:10px 0 0}
.vf-mono{font:500 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#e4ff1a;margin:0 0 8px}
.vf-text{flex:none;max-width:760px;animation:vf-rise .8s .25s cubic-bezier(.2,.7,.2,1) both;padding-top:12px}
.vf-center{margin:auto 0;max-width:820px;animation:vf-rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes vf-rise{from{opacity:0;transform:translateY(12px)}}
.vf-cap{flex:none;margin:12px 0 4px;font:500 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#8a9194}
.vf-cap::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;background:#e4ff1a;vertical-align:1px}
.vf-cap em{font-style:normal;color:#e4ff1a}
.vf-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 14px;position:relative;z-index:3}
.vf-count{font:500 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:#8a9194}
.vf-next{min-height:44px;padding:0 22px;border-radius:22px;border:0;background:#e4ff1a;color:#111;font:600 13px "JetBrains Mono",monospace;letter-spacing:.04em;cursor:pointer}
/* map: deep navy, blue-violet roads, yellow street, white leader lines (poster style) */
.vf-map-s,.vf-map .x{}
.vf-map{background:#040918}
.vf-mapwrap{position:relative;flex:1;min-height:0;margin:0 -16px;overflow:hidden;background:#040918;display:flex}
.vf-map{display:block;width:100%;height:100%;flex:none;animation:vf-push 7s cubic-bezier(.3,.1,.3,1) both;transform-origin:50% 50%}
.vf-s-zoom .vf-map{animation-name:vf-push2}
@keyframes vf-push{from{transform:scale(1)}to{transform:scale(1.18)}}
@keyframes vf-push2{from{transform:scale(.62);opacity:.4}to{transform:scale(1)}}
.vf-r0{fill:none;stroke:#4a4a4a;stroke-width:.45}.vf-r1{fill:none;stroke:#9a9a9a;stroke-width:.7}.vf-r2{fill:none;stroke:#f2f2f2;stroke-width:1.1}
.vf-bld{fill:#1b1b1b;stroke:#7a7a7a;stroke-width:.35}.vf-park{fill:#16301f;stroke:none}
.vf-band{stroke:#e4ff1a;stroke-opacity:.16;stroke-linecap:round}
.vf-vic{fill:none;stroke:#e4ff1a;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:vf-draw 2.2s .5s ease-out forwards}
@keyframes vf-draw{to{stroke-dashoffset:0}}
.vf-stud{stroke:#fff;stroke-dasharray:2 2.5;opacity:0;animation:vf-in 1s 2.6s forwards}
.vf-dot{fill:#e4ff1a}.vf-ping{fill:none;stroke:#e4ff1a;stroke-width:.6;transform-box:fill-box;transform-origin:center;animation:vf-ping 2.4s 2.6s ease-out infinite;opacity:0}
@keyframes vf-ping{from{transform:scale(1);opacity:.9}to{transform:scale(3);opacity:0}}
.vf-lead{stroke:#fff;stroke-width:.6;opacity:0;animation:vf-in .8s 1.6s forwards}.vf-lead-d{fill:#fff}
.vf-lab,.vf-ref text,.vf-scale text{font-family:"JetBrains Mono",monospace;letter-spacing:.1em;fill:#fff;font-size:5px;opacity:0;animation:vf-in .8s 1.8s forwards}
.vf-ref text{opacity:1;animation:none;fill:#c9d0ff}.vf-ref circle{fill:#fff}
.vf-lab-y{fill:#e4ff1a}.vf-scale line{stroke:#c9d0ff}.vf-scale text{opacity:1;animation:none;fill:#c9d0ff}
.vf-poster{position:absolute;left:0;right:0;bottom:7%;text-align:center;pointer-events:none;animation:vf-rise 1.2s .6s both}
.vf-poster b{display:block;font:500 clamp(24px,7vw,56px)/1 "Hanken Grotesk",sans-serif;letter-spacing:.24em;margin-right:-.24em;white-space:nowrap;color:#2de2ff}
.vf-poster span{display:block;margin-top:8px;font:300 12px "Hanken Grotesk";letter-spacing:.3em;color:#9fe8ff}
.vf-poster small{display:block;margin-top:6px;font:400 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:#7fa0c0}
/* facts: bold yellow poster */
.vf-s-facts .vf-sc{padding:0;background:#e4ff1a;color:#151515}
.vf-big{flex:1;display:flex;flex-direction:column;padding:18px 18px 0;gap:14px;min-height:0}
.vf-note{margin:0;font:600 11px/1.5 "Hanken Grotesk",sans-serif;color:#151515;border-top:3px solid #151515;padding-top:8px;max-width:30ch}
.vf-nums{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;min-height:0;padding-bottom:12px}
.vf-nums h3{font:700 clamp(18px,4.6vw,30px)/1.1 "Hanken Grotesk",sans-serif;margin:0 0 6px;border-bottom:3px solid #151515;padding-bottom:8px}
.vf-nums div{display:flex;align-items:baseline;gap:10px;animation:vf-rise .8s both}
.vf-nums div:nth-of-type(2){animation-delay:.15s}.vf-nums div:nth-of-type(3){animation-delay:.3s}.vf-nums div:nth-of-type(4){animation-delay:.45s}
.vf-nums b{font:700 clamp(44px,12.5vw,130px)/.95 "Hanken Grotesk",sans-serif;letter-spacing:-.03em}
.vf-nums span{font:300 clamp(18px,4.4vw,34px) "Hanken Grotesk",sans-serif}
/* photograph: full width, native proportions */
.vf-ph{flex:none;position:relative;margin:42px -16px 0;overflow:hidden;background:#000;height:clamp(150px,30vh,300px)}
.vf-track{position:absolute;left:0;top:0;height:100%;aspect-ratio:1178/268;min-width:100%;transform:translateX(var(--pan,0));transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.vf-track img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.9)}
.vf-ph::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0000 60%,#0009);pointer-events:none}
.vf-hots{position:absolute;inset:0}
.vf-dim .vf-track img{filter:grayscale(1) brightness(.4)}.vf-faint .vf-track img{filter:grayscale(1) brightness(.22)}
.vf-small{height:clamp(120px,20vh,200px)}
.vf-s-end .vf-ph{position:absolute;inset:0;margin:0;max-height:none;aspect-ratio:auto}.vf-s-end .vf-track{min-width:0;width:100%;aspect-ratio:auto}
.vf-hs{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px;background:none;border:0;cursor:pointer;opacity:.35;transition:opacity .6s}
.vf-hs i{position:absolute;left:11px;top:11px;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid #e4ff1a;border-radius:50%;background:#000a;font:600 11px "JetBrains Mono",monospace;color:#e4ff1a;font-style:normal}
.vf-hs::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid #e4ff1a99;opacity:0}
.vf-hs.live{opacity:1}.vf-hs.live::after{animation:vf-hping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes vf-hping{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
.vf-legend{display:grid;gap:6px;margin-top:14px}
.vf-legend p{margin:0;font:400 14px/1.4 "Hanken Grotesk",sans-serif;color:#7d8588;transition:color .5s;display:flex;align-items:center}
.vf-legend p.live{color:#fff}
.vf-legend i{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;margin-right:10px;border:1px solid #e4ff1a;border-radius:50%;font:600 10px "JetBrains Mono",monospace;color:#e4ff1a;font-style:normal}
/* reading the street: ring panels (bold, like the dark stat-panel example) */
.vf-pans{flex:none;display:grid;gap:8px;margin-top:10px;min-height:0;align-content:start}
.vf-pan{display:flex;align-items:center;gap:14px;border:1px solid #ffffff2e;padding:10px 12px;animation:vf-rise .8s both}
.vf-pan:nth-child(2){animation-delay:.2s}.vf-pan:nth-child(3){animation-delay:.4s}
.vf-ring{flex:none;position:relative;width:86px;height:86px;border-radius:50%;background:conic-gradient(#e4ff1a calc(var(--v)*360deg),#ffffff22 0);display:grid;place-items:center}
.vf-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#000}
.vf-ring b{position:relative;font:400 32px/1 "Instrument Serif",serif;color:#fff}.vf-ring small{font-size:15px;margin-left:1px}
.vf-pan .vf-mono{margin:0 0 3px;font-size:10px}.vf-pt{margin:0;font:500 15px/1.3 "Hanken Grotesk"}.vf-pd{margin:3px 0 0;font:400 12px/1.4 "Hanken Grotesk";color:#8a9194}
.vf-scope{flex:none;margin:10px 0 0;font:400 12px/1.5 "Hanken Grotesk";color:#aab0b2}.vf-scope b{color:#e4ff1a;font-weight:600;margin-right:4px}.vf-scope .vf-off{color:#ff8a65;margin-left:4px}
/* ideas */
.vf-trio{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px;margin-top:10px}
.vf-trio figure{margin:0;display:flex;flex-direction:column;border:1px solid #ffffff22;min-height:0;overflow:hidden}
.vf-trio img{flex:1;min-height:0;width:100%;object-fit:contain;display:block}
.vf-trio figcaption{flex:none;font:600 11px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;color:var(--c);border-top:2px solid var(--c)}
.vf-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding-top:8px}
.vf-art img{max-width:100%;max-height:100%;object-fit:contain}
.vf-res{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;max-width:560px}
.vf-res div{border-top:3px solid #ffffff55;padding-top:6px}
.vf-res span{display:block;font:500 10px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#9aa2a5}
.vf-res b{display:block;font:400 clamp(22px,4vw,34px)/1.1 "Instrument Serif",serif;margin-top:2px}
.vf-res small{font-size:11px;color:#9aa2a5}
.vf-res .vf-good{border-color:var(--c)}.vf-res .vf-good b,.vf-res .vf-good small{color:var(--c)}
.vf-res .vf-bad b{color:#fff}
.vf-open{display:inline-block;margin-top:12px;min-height:44px;padding:0 4px;background:none;border:0;border-bottom:1px solid #e4ff1a;color:#fff;font:500 13px "Hanken Grotesk",sans-serif;cursor:pointer;pointer-events:auto}
.vf-open:hover{color:#e4ff1a}
/* comparison: bold bar panels */
.vf-mets{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;align-content:start}
.vf-met{border:1px solid #ffffff2e;padding:10px 10px 6px}
.vf-met .vf-mono{font-size:10px;margin-bottom:8px;color:#fff}
.vf-mrow{display:grid;grid-template-columns:22px 1fr auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;margin-bottom:7px}
.vf-mrow span{font:600 11px "JetBrains Mono",monospace;color:var(--c)}
.vf-mrow i{height:8px;background:var(--c);width:var(--w);transform-origin:0 50%;animation:vf-bar 1.2s .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes vf-bar{from{transform:scaleX(0)}}
.vf-mrow b{font:400 20px/1 "Instrument Serif",serif;color:#fff}
.vf-mrow em{grid-column:2/4;font:500 9px "JetBrains Mono",monospace;font-style:normal;letter-spacing:.06em;color:#8a9194;text-transform:uppercase;min-height:11px}
.vf-met small{display:block;font-size:10px;color:#8a9194;margin-top:2px}
@media(min-width:900px){
 .vf-sc{padding:0 48px 8px}.vf-pg{padding:14px 48px 0}.vf-nav{padding:8px 48px 20px}.vf-skip{right:40px;top:26px}
 .vf-mapwrap,.vf-ph{margin:0 -48px}
 .vf-nums{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:20px 5vw}.vf-big{padding:32px 48px 0}
 .vf-nums h3{width:100%}
 .vf-pans{grid-template-columns:repeat(3,1fr)}.vf-pan{flex-direction:column;align-items:flex-start}
 .vf-trio{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
 .vf-s-idea .vf-sc{flex-direction:row}
 .vf-mets{grid-template-columns:repeat(4,1fr)}
 .vf-ph{height:clamp(220px,40vh,420px)}
}
@media(prefers-reduced-motion:reduce){.vf-sc,.vf-text,.vf-center,.vf-map,.vf-pan,.vf-nums div,.vf-poster,.vf-mrow i{animation:none!important}.vf-vic{animation:none!important;stroke-dashoffset:0}.vf-lead,.vf-lab,.vf-stud{animation:none!important;opacity:1}.vf-track{transition:none}.vf-hs::after,.vf-ping{animation:none!important}.vf-pg i.on::after{animation:none;transform:scaleX(1)}}

/* hero: full-bleed poster map behind the title */
.vf-s-title .vf-sc{padding:0}
.vf-hero{position:absolute;inset:0;margin:0;flex:none}
.vf-hero .vf-map{animation:vf-hero 6s cubic-bezier(.3,.1,.3,1) both}
@keyframes vf-hero{from{transform:scale(1)}to{transform:scale(1.12)}}
.vf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(#040918e0,#0409182a 38%,#040918 88%);pointer-events:none}
.vf-s-title .vf-center{position:absolute;left:16px;right:16px;top:12%;margin:0;max-width:760px;z-index:2}
.vf-s-title .vf-poster{bottom:4%;z-index:2}
.vf-s-title h2{font-size:clamp(34px,7vw,76px)}
@media(min-width:900px){.vf-s-title .vf-center{left:48px}}
@media(prefers-reduced-motion:reduce){.vf-hero .vf-map{animation:none!important}}
.vf-hero .vf-map{-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 70%,transparent)}

/* facts: dark editorial numbers (lime lead, grey follow) */
.vf-s-facts .vf-sc{background:#151512;color:#fff;padding:0}
.vf-bighead{display:flex;justify-content:space-between;gap:10px;font:400 11px "Hanken Grotesk",sans-serif;color:#fff;padding-bottom:10px}
.vf-bighead span:nth-child(3){color:#8a9194}
.vf-big h3{margin:0;font:500 clamp(18px,4.6vw,28px)/1.25 "Hanken Grotesk",sans-serif;color:#fff;max-width:20ch}
.vf-big h3 i{font-style:normal;color:#8a9194}
.vf-s-facts .vf-note{border:0;padding:0;color:#8a9194;font-weight:400;max-width:44ch}
.vf-s-facts .vf-nums{justify-content:center;gap:0;padding:0}
.vf-s-facts .vf-nums div{align-items:baseline;gap:12px}
.vf-s-facts .vf-nums b{font:600 clamp(70px,24vw,190px)/.92 "Hanken Grotesk",sans-serif;letter-spacing:-.045em}
.vf-s-facts .n1 b{color:#d6ff6a}
.vf-s-facts .n2 b,.vf-s-facts .n3 b{color:#6e6e66}
.vf-s-facts .n3 b{color:#5c5c55}
.vf-s-facts .vf-nums span{font:500 clamp(16px,4.2vw,30px) "Hanken Grotesk",sans-serif;color:#d6ff6a}
.vf-s-facts .n2 span,.vf-s-facts .n3 span{color:#8a9194}
.vf-s-facts .vf-big{padding:16px 18px 6px}
/* merged photo + rings */
.vf-s-photo.vf-s-read .vf-ph,.vf-s-read .vf-ph{height:clamp(130px,22vh,260px);margin-top:42px}
.vf-s-read .vf-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.vf-s-read .vf-legend p{font-size:12px}
.vf-s-read .vf-legend i{width:16px;height:16px;margin-right:6px;font-size:9px}
.vf-tight{padding-top:8px}.vf-tight .vf-mono{margin:0}
.vf-s-read .vf-pans{gap:6px;margin-top:6px}
.vf-s-read .vf-pan{padding:6px 10px;gap:12px}
.vf-s-read .vf-ring{width:62px;height:62px}.vf-s-read .vf-ring::before{inset:7px}.vf-s-read .vf-ring b{font-size:23px}.vf-s-read .vf-ring small{font-size:11px}
.vf-s-read .vf-pt{font-size:13.5px}.vf-s-read .vf-pd{font-size:11px;margin-top:1px}
.vf-s-read .vf-scope{margin-top:6px;font-size:11.5px}
/* comparison: calmer numbers */
.vf-mrow b{font-size:15px}.vf-mrow i{height:6px}.vf-mrow span{font-size:10px}.vf-mrow em{font-size:8.5px}
.vf-met .vf-mono{font-size:9.5px}
.vf-s-facts .vf-big{padding-top:46px}
.vf-mets{margin-top:44px}.vf-s-trio .vf-trio{margin-top:44px}

/* merged opening: wide poster map -> zoom to the street, title swaps to the study line */
.vf-lb{opacity:0;animation:vf-lbin 2s 4.6s ease both}
.vf-lb .vf-map{animation:vf-push2 7s 4.6s cubic-bezier(.3,.1,.3,1) both}
.vf-lb .vf-vic{animation-delay:5.4s}.vf-lb .vf-lead,.vf-lb .vf-lab{animation-delay:6.6s}.vf-lb .vf-stud{animation-delay:7s}.vf-lb .vf-ping{animation-delay:7.4s}
.vf-la{animation:vf-laout 2s 4.6s ease forwards}
@keyframes vf-lbin{from{opacity:0}to{opacity:1}}
@keyframes vf-laout{to{opacity:0}}
.vf-t1{animation:vf-t1out 1.2s 4.2s ease forwards}
.vf-s-title .vf-center.vf-t1{animation:vf-t1out 1.2s 4.2s ease forwards}
@keyframes vf-t1out{to{opacity:0;transform:translateY(-10px)}}
.vf-s-title .vf-poster{animation:none}
.vf-t2{position:absolute;left:16px;right:16px;bottom:56px;opacity:0;animation:vf-t2in 1.2s 5.4s ease forwards;z-index:2;max-width:760px}
@keyframes vf-t2in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.vf-t2 .vf-cap0{margin:12px 0 0}
.vf-t2::before{content:"";position:absolute;inset:-60px -16px -56px;background:linear-gradient(#0000,#040918e8 45%);z-index:-1}
@media(min-width:900px){.vf-t2{left:48px}}
@media(prefers-reduced-motion:reduce){.vf-la,.vf-t1{animation:none!important;opacity:0}.vf-lb,.vf-t2{animation:none!important;opacity:1}}

.vf-res .vf-flag{border-color:#ffffff55}.vf-res .vf-flag b{color:#fff}