.portfolio{max-width:1180px;margin:auto;padding:155px 30px 70px}.portfolio-intro{padding:25px 0 65px}.back-link{display:block;color:#8997b3;font-size:14px;margin-bottom:42px}.portfolio-intro h1{font-family:'SF Pro Display Local','Helvetica Neue',Arial,sans-serif;font-size:clamp(48px,6vw,80px);font-weight:700;letter-spacing:-.06em;line-height:1.04;margin:20px 0}.portfolio-intro p{color:#9ba7be;font-size:17px;margin-top:25px}.category-nav{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}.category-nav a{display:flex;gap:38px;align-items:center;border:1px solid #597bd13d;border-radius:30px;padding:13px 22px;background:#14213b66;font-size:14px}.category-nav a:hover{background:#25459380;border-color:#688df4}.category-nav span{color:#8ba8ff}.portfolio-section{padding:35px 0 65px;scroll-margin-top:110px}.portfolio-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;gap:20px}.portfolio-heading h2{font-size:32px;letter-spacing:-1px;margin:12px 0}.portfolio-heading>a{font-size:12px;color:#8593ae;white-space:nowrap}.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.video-frame{aspect-ratio:16/9;background:#090d16;border:1px solid #ffffff1c;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px #0003}.video-frame video{width:100%;height:100%;display:block;object-fit:contain;background:#07090d}.short-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.short-grid .video-frame{aspect-ratio:9/16}.video-caption{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 3px}.video-caption h3{font-size:16px;line-height:1.4}.video-caption>span{font-size:11px;color:#8593ae;white-space:nowrap}.video-error{font-size:14px;line-height:1.5;color:#b7c6e2}.video-error a{text-decoration:underline}.portfolio-end{text-align:center;border-top:1px solid #ffffff15;padding:60px 0 20px}.portfolio-end h2{font-size:36px;margin-bottom:30px}@media(max-width:760px){.portfolio{padding:125px 22px 45px}.portfolio-intro{padding-top:0}.portfolio-heading{align-items:start}.portfolio-heading h2{font-size:26px}.portfolio-heading>a{display:none}.video-grid{grid-template-columns:1fr}.short-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.video-caption{display:block}.video-caption h3{font-size:14px;margin-bottom:5px}.category-nav a{padding:11px 17px;gap:20px}.portfolio-intro h1{font-size:54px}}@media(max-width:420px){.short-grid{grid-template-columns:1fr}.short-grid .video-frame{max-height:70vh}}

/* Center the final VSL while preserving the same card width. */
@media (min-width: 761px) {
  #vsl .video-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 24px) / 2);
    justify-self: center;
  }
}

/* Full-width featured film, with readable copy over a cinematic vignette. */
.portfolio { padding-top:0; }
.video-hero { position:relative; isolation:isolate; width:100vw; margin-left:calc(50% - 50vw); min-height: min(920px,100svh); padding:180px max(30px,calc((100vw - 1120px)/2)) 65px; display:flex; align-items:flex-end; overflow:hidden; background:#05080f; }
#work-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; pointer-events:none; }
.work-hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#03060df0 0%,#03060da3 40%,#03060d25 80%),linear-gradient(0deg,#050609 0%,transparent 48%,#05060966 100%); }
.work-hero-content { position:relative; max-width:740px; }
.video-hero .back-link { margin-bottom:30px; }
.video-hero h1 { font-size:clamp(48px,5vw,72px); }
.video-hero p { color:#b3bed1; }
.video-hero .category-nav a { background:#101a2b9c; backdrop-filter:blur(14px); }
.background-motion { position:absolute; right:30px; bottom:25px; padding:9px 15px; border:1px solid #ffffff35; border-radius:24px; background:#080e1c80; color:#c7d3e8; font-size:12px; backdrop-filter:blur(12px); }
.portfolio-section { padding-top:60px; }
@media(max-width:760px){.video-hero{min-height:740px;min-height:100svh;padding:140px 22px 80px}.work-hero-shade{background:linear-gradient(0deg,#050609 0%,#050609a8 55%,#05060944 100%)}.video-hero h1{font-size:52px}.background-motion{right:22px;bottom:22px}}

/* Mobile portfolio uses one comfortably sized player per row. */
@media(max-width:760px){
 .portfolio { padding:0 20px 40px; }
 .video-hero { width:auto;margin-inline:-20px;min-height:720px;min-height:92svh;padding:125px 22px 88px;align-items:flex-end; }
 .work-hero-content { width:100%;max-width:480px; }
 .video-hero h1 { font-size:clamp(44px,12vw,64px);line-height:1.02;letter-spacing:-.05em; }
 .video-hero .back-link { font-size:14px;min-height:44px;margin-bottom:22px; }
 .video-hero p { font-size:16px;line-height:1.6; }
 .category-nav { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:26px; }
 .category-nav a { justify-content:center;padding:13px 8px;min-height:46px;font-size:13px;gap:8px;white-space:nowrap; }
 .background-motion { min-height:44px;font-size:12px; }
 #work-background { object-position:60% center; }
 .portfolio-section { padding:50px 0 20px;scroll-margin-top:96px; }
 .portfolio-heading { margin-bottom:23px; }
 .portfolio-heading h2 { font-size:30px;line-height:1.15; }
 .portfolio-heading .eyebrow { font-size:12px;letter-spacing:1.2px; }
 .video-grid,.short-grid { grid-template-columns:minmax(0,1fr);gap:28px; }
 .video-card { min-width:0;width:100%; }
 .video-frame { border-radius:14px; }
 .short-grid .video-card { max-width:380px;justify-self:center; }
 .short-grid .video-frame { width:100%;height:auto;max-height:none;aspect-ratio:9/16; }
 .video-caption { display:flex;padding:13px 2px; }
 .video-caption h3 { font-size:16px;margin:0; }
 .video-caption>span { font-size:12px; }
 .portfolio-end { margin-top:35px;padding-top:38px; }
 .portfolio-end h2 { font-size:32px;line-height:1.15; }
}
@media(max-width:360px){.category-nav a{font-size:12px;gap:5px}.video-hero{padding-inline:18px}.nav>.button{padding-inline:10px}.brand{font-size:23px}.nav{gap:5px}}
@media(max-width:760px) and (orientation:landscape){.video-hero{min-height:620px}.short-grid .video-card{max-width:300px}}