/* Neutral black surfaces and vector icons shared by desktop and mobile. */
:root{--ink:#000;--gray:#999}
.header,.mobile-nav,.hero,.delivery-section,.contact-section,.footer,.portfolio-hero,.portfolio-cta,.path-result{background:#000}
.ribbon{background:#080808}
.delivery-visual,.contact-form,.video-dialog,.privacy-dialog,.film-dialog,.film-dialog-top{background:#111}
.floating-label,.timeline{background:#111111ed}
.hero h1{color:var(--paper)}
.hero-emphasis{color:var(--orange);white-space:nowrap}
.hero-art .film-frame img,.hero-art .film-frame video{filter:none}
.hero-art .art-controls{bottom:-18px}
.work-image>img,.work-carousel .work-image>img,.film-poster>img{filter:none}
.frame-main .hero-video{position:absolute;inset:0}
.frame-back video{position:absolute;inset:0}
.film-card[data-orientation=landscape] .film-poster>img{object-fit:cover}
.art-coordinate:before,.art-coordinate:after{content:none}
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;overflow:visible}
.icon-arrow{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.icon-play{fill:currentColor;stroke:none}
.play-circle .ui-icon,.film-play .ui-icon,.path-reference-play .ui-icon{width:17px;height:17px}
.play-small .ui-icon,.work-watch .ui-icon{width:13px;height:13px}
.button .ui-icon{width:20px;height:20px}
.work-carousel-controls .ui-icon{width:20px;height:20px}
.work-card:hover .play-circle{transform:scale(1.05)}
.play-small,.path-reference-play,.film-play{padding-left:0}
.delivery-copy .delivery-footnote{margin-top:22px}
.header-contact{justify-content:center}
.work-section .section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:end;gap:48px;margin-bottom:28px}
.work-heading-copy p{font-size:16px;line-height:1.65;color:#5e5e5e;margin:0;max-width:380px}
.work-heading-copy .work-carousel-controls{justify-content:flex-end;margin-top:24px}
@media(max-width:600px){
  .hero h1{max-width:100%}
  .hero h1>br{display:none}
  .hero-art .art-controls{bottom:0}
  .delivery-copy .delivery-footnote{margin-top:16px}
  .work-section .section-heading{grid-template-columns:minmax(0,1fr) auto;gap:20px;margin-bottom:20px}
  .work-heading-copy p{display:none}
  .work-heading-copy .work-carousel-controls{margin-top:0}
}


/* Real footage and compact visual examples of the delivered materials. */
.rec-label{display:inline-flex;align-items:center;gap:7px}
.rec-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff3939;flex-shrink:0}
.frame-main .rec-label{text-shadow:0 1px 5px #0009}
.demo-video>video{width:100%;height:100%;object-fit:cover;display:block;filter:none}
.demo-rec{gap:7px;text-shadow:0 1px 5px #0009}
.demo-rec>.rec-dot{margin-left:0}
.timeline{padding:12px}
.timeline-clips{height:34px;margin:0 0 5px;gap:4px}
.timeline-clips>img{min-width:0;flex:1;width:calc((100% - 20px)/6);height:34px;object-fit:cover;border-radius:2px}
.timeline-clips b{animation:none;left:0}
.cover-front{padding-top:62px}
.post-preview{width:calc(100% - 64px);max-width:300px;margin:35px auto 48px;background:var(--paper);color:#000;border-radius:16px;overflow:hidden;transform:rotate(-3deg);box-shadow:0 20px 40px #0004}
.post-preview-header{display:flex;align-items:center;gap:10px;padding:17px 20px;font-size:14px}
.post-preview-header .mini-brand{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#000}
.post-preview-header .brand-symbol{width:20px;height:15px}
.post-preview-image{display:block;width:100%;height:165px;object-fit:cover;object-position:center 45%}
.post-preview-caption{padding:20px}
.post-preview-caption p{font-size:23px;font-weight:500;line-height:1.15;letter-spacing:-.03em;margin:0 0 18px;max-width:210px}
.caption-ready{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:#5b5b5b}
.caption-ready svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){
 .frame-main .frame-top{display:flex;top:10px;left:10px;right:10px;font-size:12px;letter-spacing:0}
 .frame-main .rec-label{gap:5px}
 .frame-main .rec-dot{width:5px;height:5px}
 .cover-front{padding-top:16px}
 .post-preview{width:220px;max-width:calc(100% - 40px);margin:0 auto;border-radius:12px;transform:rotate(-2deg)}
 .post-preview-header{padding:9px 13px;gap:7px;font-size:12px}
 .post-preview-header .mini-brand{width:20px;height:20px}
 .post-preview-header .brand-symbol{width:15px;height:11px}
 .post-preview-image{height:78px}
 .post-preview-caption{padding:12px 14px}
 .post-preview-caption p{font-size:18px;line-height:1.15;margin-bottom:9px;max-width:180px}
}

/* Keep a real poster visible until the mobile decoder has painted a frame. */
.film-frame>.media-fallback,.demo-video>.media-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;opacity:1}
.film-frame>.guarded-video,.demo-video>.guarded-video{position:absolute;inset:0;opacity:0;transition:opacity .2s}
.film-frame>.guarded-video.has-frame,.demo-video>.guarded-video.has-frame{opacity:1}
@media(prefers-reduced-motion:reduce){.guarded-video{transition:none!important}}

/* Covers and recovery states for the interactive film players. */
.media-player{position:relative;isolation:isolate;background:#090909}
.media-player>.player-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0}
.media-player>video{position:relative;z-index:1;opacity:0}
.media-player.has-frame>video{opacity:1}
.media-player.has-frame>.player-cover{visibility:hidden}
.player-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;text-align:center;padding:24px}
.player-message{margin:0;padding:9px 14px;border-radius:8px;background:#000c;color:#fff;font-size:14px;line-height:1.5}
.player-retry{pointer-events:auto;border:0;border-radius:999px;min-height:48px;padding:13px 22px;color:#000;background:var(--paper);font:500 15px var(--sans)}
.video-dialog .media-player>video{display:block;width:100%;height:70dvh;max-height:700px;background:#000;object-fit:contain}
@media(max-width:600px){.video-dialog .media-player>video{height:68dvh}.player-message{font-size:14px}}