/* ============================================================================
   DVC — MOBILE-NATIVE LAYER
   Loaded last. Only applies at <=880px. Desktop is untouched.
   Designed for the business-card scan: phone-first, video-first.
   ========================================================================= */

@media(max-width:880px){

/* ---------- 0. self-hosted mobile reel: constrain the box so object-fit works ----
   width/height:auto let the video paint at its intrinsic 2160x3840, so the phone
   composited a 2160px surface (the lag) and showed only a centre slice.        */
#hero-reel-bg video{width:100% !important;height:100% !important;min-width:0 !important;min-height:0 !important;top:0 !important;left:0 !important;transform:none !important;object-fit:cover !important;}

/* ---------- 1. header scrolls away (bottom tabs own navigation) ---------- */
nav{position:static !important;padding:14px 16px !important;border-bottom:1px solid var(--hair2);}
nav .navcoord{display:none;}
.brandmark{gap:9px;}
.brandmark .dvc-logo-slot,.brandmark img{width:30px !important;height:30px !important;}
.brandmark .bt{font-size:8.5px !important;letter-spacing:.2em !important;}
.brandmark .bt small{font-size:7px;letter-spacing:.12em;}

/* ---------- 2. app-style bottom tab bar (primary nav) ---------- */
.mobbar{display:flex !important;background:color-mix(in srgb,var(--ink) 96%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid color-mix(in srgb,var(--paper) 14%,transparent);}
.mobbar a{flex:1;flex-direction:column;gap:5px !important;padding:11px 4px 10px !important;min-height:58px;font-size:8.5px !important;letter-spacing:.1em !important;opacity:.62;position:relative;border:0 !important;}
.mobbar a .ti{width:19px;height:19px;display:block;}
.mobbar a .ti svg{width:100%;height:100%;display:block;}
.mobbar a.on{opacity:1;}
.mobbar a.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:2px;background:var(--blue2,#5C9CFF);}
.mobbar a.cta{background:var(--blue,#0A3DFF);color:#fff;opacity:1;}
body{padding-bottom:62px !important;}

/* full-screen menu sits above the tab bar */
.mobmenu{padding:88px 22px calc(80px + env(safe-area-inset-bottom)) !important;}
.mobmenu a{font-size:clamp(28px,8.5vw,38px) !important;padding:15px 0 !important;}

/* ---------- 3. mobile type scale (set for a 390px screen, not clamped down) ---------- */
.worktitle h1{font-size:13.5vw !important;line-height:.9 !important;}
.studiohead h1{font-size:13vw !important;line-height:.92 !important;}
.pos h2,.sec-head h2,.proc-head h2,.cta h2{font-size:7.6vw !important;line-height:1.08 !important;}
.proc .pc h3{font-size:6vw !important;}

/* ============================ WORK: reel feed ============================ */

/* full-bleed: video is the product, it shouldn't sit in a 18px letterbox */
.workhead{padding:26px 16px 20px !important;}
.workwrap{padding:0 0 80px !important;}
.gridbar{padding:0 16px;margin-bottom:10px !important;font-size:9.5px !important;}
.gridbar .desktop-hint{display:none !important;}
.gridbar .mobile-hint{display:inline !important;}

/* sticky swipeable filter rails — no wrapped stacks of cards */
.filtcap,.indcap{display:none !important;}
.filterdock{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 95%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair2);padding:9px 0 8px;margin-bottom:12px;}
.legend,.indbar{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;gap:7px !important;padding:0 16px !important;border:0 !important;margin:0 !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.legend::-webkit-scrollbar,.indbar::-webkit-scrollbar{display:none;}
.indrow{display:block !important;margin:0 !important;}
.indbar{margin-top:7px !important;}

/* type-of-work pills */
.legend .lg{flex:0 0 auto !important;width:auto !important;padding:9px 16px !important;border:1px solid var(--hair) !important;border-radius:100px;min-height:38px;display:flex !important;align-items:center;scroll-snap-align:start;background:none;}
.legend .lg p{display:none !important;}
.legend .lg .n{display:none !important;}
.legend .lg h4{margin:0 !important;font-size:11.5px !important;font-weight:700;letter-spacing:.04em;white-space:nowrap;}
.legend .lg.is-active{background:var(--ink) !important;color:var(--paper) !important;border-color:var(--ink) !important;}

/* industry chips — smaller, secondary rail */
.indbar .chip{flex:0 0 auto;border-radius:100px;padding:8px 13px !important;min-height:34px !important;font-size:9.5px !important;white-space:nowrap;scroll-snap-align:start;opacity:.8;}
.indbar .chip.is-active{opacity:1;}

/* the feed itself: one film per row, edge to edge, in its TRUE aspect ratio
   (the inline padding-top ratio is left intact — no cropping)               */
#work-grid{display:flex !important;flex-direction:column;gap:0 !important;grid-template-columns:none !important;grid-auto-rows:auto !important;}
.wk{width:100% !important;border:0 !important;border-bottom:1px solid var(--hair2) !important;grid-column:auto !important;grid-row:auto !important;height:auto !important;}

/* always-on affordances (touch has no hover) */
.wk .scrim{opacity:1 !important;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,#000 72%,transparent)) !important;}
.wk .play{opacity:.92 !important;transform:translate(-50%,-50%) scale(1) !important;width:52px !important;height:52px !important;border-width:1.5px !important;}
.wk .hovermeta{opacity:1 !important;transform:none !important;left:16px !important;right:16px !important;bottom:14px !important;font-size:11px !important;letter-spacing:.04em !important;align-items:flex-end;gap:12px;}
.wk .hovermeta span:first-child{font-weight:700;}
.wk .idxtag{top:14px !important;left:16px !important;font-size:9px !important;}

/* ---------- fullscreen player, not a desktop lightbox ---------- */
.lightbox{padding:0 !important;align-items:center !important;background:#000 !important;}
.lightbox .lbinner{width:100vw !important;max-height:none !important;padding:0 !important;}
.lightbox .frame{border:0 !important;}
.lightbox .lbbar{position:absolute;left:0;right:0;bottom:-52px;margin:0 !important;padding:0 18px;font-size:10px !important;opacity:.85;}
.lightbox .x{top:auto !important;bottom:calc(18px + env(safe-area-inset-bottom));right:50% !important;transform:translateX(50%);padding:13px 24px !important;min-height:46px;border:1px solid color-mix(in srgb,var(--paper) 45%,transparent);border-radius:100px;background:color-mix(in srgb,#000 55%,transparent);display:grid;place-items:center;}

/* ============================ STUDIO ============================ */
.studiohead{padding:30px 16px 24px !important;}
.pos{padding:0 16px 44px !important;}
.team{padding:44px 16px 54px !important;}
.process{padding:44px 16px !important;}
.origin{padding:44px 16px !important;}
.cta{padding:50px 16px !important;}

/* portraits: 2-up, tighter, tap-to-reveal is discoverable */
#team-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important;}
.member .pic{padding-top:124% !important;}
.member .info{padding-top:11px !important;}
.member .info h3{font-size:12.5px !important;}
.member .info .role{font-size:9px !important;margin-top:4px !important;}
.member .info .handle{display:none !important;}
.member .pic .biotoggle{opacity:.9 !important;left:9px !important;bottom:9px !important;font-size:8.5px !important;padding:6px 9px !important;}
.member .pic .bioover{padding:14px 13px 40px !important;}
.member .pic .bioover p{font-size:10.5px !important;line-height:1.5 !important;}
#team-grid:hover .member .pic img{filter:grayscale(.7) brightness(.92) contrast(1.02) !important;opacity:1 !important;blur:0 !important;}

/* process: numbers inline, no hover shift */
.proc{grid-template-columns:1fr !important;gap:8px !important;padding:20px 0 !important;}
.proc:hover{padding-left:0 !important;}
.proc .num{padding-top:0 !important;font-size:11px !important;}
.proc .pc p{font-size:12.5px !important;line-height:1.65 !important;max-width:none !important;margin-top:9px !important;}

/* ============================ HOME — the QR landing ============================ */
/* Someone just scanned a card. Order: headline → CTA → proof → price + two paths → reel. */
.hero{padding:26px 16px 30px !important;min-height:auto !important;gap:14px !important;justify-items:start !important;text-align:left !important;grid-template-columns:minmax(0,1fr) !important;}
.hero-left,.hero-right{text-align:left !important;max-width:none !important;width:100%;}
.hero-left{order:1;}
.hero-right{order:2;}
.stage{order:3;width:150px !important;height:150px !important;justify-self:end !important;margin-top:-6px;}
.globewrap{transform:scale(.42) !important;}
.kicker,.hero-right .kicker{justify-content:flex-start !important;margin-bottom:10px !important;}
.hero-right .kicker{display:none !important;}
.hero-left .lede{display:none !important;}
/* Extended face is wide: "CUSTOMERS." must fit one line inside 358px */
.hero h1,.hero-left h1{font-size:9.2vw !important;line-height:.96 !important;letter-spacing:-.01em !important;max-width:100%;}
.hero-right .lede{margin-top:10px !important;font-size:12.5px !important;opacity:.7 !important;}
.hero-cta{display:flex !important;width:100%;justify-content:center;padding:17px 24px !important;font-size:12.5px !important;min-height:54px;margin-top:18px !important;}
.scrollcue{display:none !important;}

/* clients ticker: tighter, still moving */
.ticker{padding:11px 0 !important;}
.ticker .track span{font-size:11px !important;padding:0 16px !important;gap:16px !important;}

/* close bar: single column (a later desktop 2-col rule was winning here) */
.closebar{padding:30px 16px 32px !important;grid-template-columns:minmax(0,1fr) !important;gap:18px !important;}
.cb-price,.cb-mid,.cb-actions{grid-column:1 !important;min-width:0;width:100%;}
.cb-stats{display:flex !important;justify-content:space-between;gap:8px;}
.cb-stats .st{flex:1 1 0;min-width:0;}
.cb-stats .st-k{white-space:normal;line-height:1.35;}
.cb-price .cb-v{font-size:13vw !important;}
.cb-line{font-size:12.5px !important;max-width:none !important;}
/* closing mechanism — mobile only: catch the under-$1,500 lead instead of losing them */
.cb-price .cb-sub{display:block !important;max-width:none !important;font-size:11.5px !important;margin-top:10px !important;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--blue) 55%,transparent);opacity:.95 !important;}
.cta .cta-sub{display:inline-block !important;}

/* reel stays, everything decorative goes */
.reel{padding:40px 0 34px !important;}
.reel .reel-head{padding:0 16px;margin-bottom:14px !important;}
.reel-caption{padding:0 16px;font-size:8.5px !important;}
.reelframe{border-left:0 !important;border-right:0 !important;}
.positioning{padding:40px 16px !important;}
.positioning p{font-size:7vw !important;max-width:none !important;}
.services{padding:44px 16px 30px !important;}
.services .sec-head .tag{display:none !important;}
.sec-lead{font-size:6.2vw !important;margin-bottom:22px !important;}
.triad{gap:0 !important;padding:0 !important;background:transparent !important;border-left:0 !important;border-right:0 !important;}
.triad .cell{padding:24px 16px 28px !important;border-left:0 !important;border-bottom:1px solid var(--hair);min-height:0 !important;}
.triad .cell:last-child{border-bottom:0;}
.cell .fig{margin:22px 0 18px !important;}
.cell .mk{right:16px !important;top:24px !important;}
.finale{display:none !important;}   /* was a 92vh blank screen on phones */

/* contact + form */
.cta{padding:50px 16px 56px !important;}
.cta h2{font-size:7.2vw !important;margin-bottom:20px !important;line-height:1.02 !important;}
.cta .cta-price{margin:0 0 22px !important;font-size:11px !important;line-height:1.6;}
.cta .actions{flex-direction:column;gap:10px !important;}
.cta .actions .btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:15px 20px !important;font-size:12.5px !important;width:100%;}
.inquire{margin-top:30px !important;}

/* ============================ FOOTER ============================ */
footer{padding:40px 16px 26px !important;}
.footgrid{justify-content:flex-start !important;gap:14px !important;flex-direction:column;align-items:flex-start !important;}
.footgrid img{width:48px !important;height:48px !important;}
.footgrid a{min-height:44px;display:flex;align-items:center;font-size:13px !important;}
.footrule{font-size:8.5px !important;gap:6px !important;flex-direction:column;}

}

/* iOS: stop tap-highlight flashes making it feel like a web page */
@media(max-width:880px){
  a,button,.wk,.chip,.lg,.member .pic{-webkit-tap-highlight-color:transparent;}
}