/* Phones (html.m-flow, driven by mobile-flow.js): the 3D walk runs on scroll and each stop's card
   rises from the bottom as a sheet that moves with the finger. */

/* chrome */
html.m-flow .journey-ui,html.m-flow .rail,html.m-flow .door-tag,html.m-flow .wing-hud,html.m-flow .custom-cursor,html.m-flow #reading-view{display:none!important}
html.m-flow .site-header{background:linear-gradient(180deg,#080809e6 0,#08080900)!important;height:76px!important}
html.m-flow .film-vignette{box-shadow:none!important;background:linear-gradient(180deg,#08080999 0,transparent 20%,transparent 70%,#08080966)!important}
html.m-flow body.at-entry #content{opacity:0;visibility:hidden}
html.m-flow #content{transition:opacity .9s ease}

/* only the journey cards take part; wing exhibits live in the 3D galleries */
html.m-flow #services,html.m-flow #work-bold,html.m-flow #work-sable,html.m-flow #work-scott,html.m-flow #numbers-a,html.m-flow #about,html.m-flow body .world-panel.wing-panel{display:none!important}

/* the card sheet */
html.m-flow body .world-panel,html.m-flow body .world-panel.card{position:fixed!important;left:0!important;right:0!important;top:0!important;width:100%!important;translate:0 var(--y,120vh)!important;transform:none!important;max-height:none!important;min-height:0!important;height:auto!important;overflow:visible!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;margin:0!important;padding:34px 20px calc(40px + env(safe-area-inset-bottom))!important;border-radius:28px 28px 0 0!important;background:linear-gradient(180deg,#101013f7 0,#09090bfc 240px)!important;border:1px solid #ffffff1c!important;border-bottom:0!important;box-shadow:0 -30px 80px -20px #000d!important;-webkit-mask-image:none!important;mask-image:none!important;display:block!important;will-change:translate;transition:none!important}
html.m-flow body .world-panel:not(.m-on){visibility:hidden!important}
html.m-flow body .world-panel.card:before,html.m-flow body .world-panel.contact-panel:before{content:''!important;display:block!important;position:absolute!important;inset:auto!important;left:50%!important;top:11px!important;width:42px!important;height:4px!important;margin-left:-21px;border-radius:4px;background:#ffffff33!important}
html.m-flow body .world-panel h2{font-size:clamp(34px,10vw,44px)!important;line-height:.98!important;letter-spacing:-.04em!important}
html.m-flow body .world-panel .cd-lede{font-size:16px!important;line-height:1.55!important;color:#d9d3cb!important}
html.m-flow body .world-panel .panel-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
html.m-flow body .world-panel .panel-actions button{width:100%;justify-content:center;height:56px!important}
html.m-flow .cd-top{flex-wrap:wrap;gap:8px}
html.m-flow .cd-top .eyebrow{white-space:nowrap}

/* "scroll to walk" hint above the first card */
.m-scroll-hint{position:fixed;left:50%;top:calc(55% - 54px);z-index:6;margin:0;padding:9px 15px;border-radius:999px;background:#0a0a0ccc;border:1px solid #ff2a5566;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap;transform:translateX(-50%);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;pointer-events:none}
.m-scroll-hint i{display:inline-block;font-style:normal;color:#ff2a55;animation:hdrop 1.4s ease-in-out infinite}
@keyframes hdrop{50%{transform:translateY(4px)}}
html.m-flow.m-start body:not(.at-entry) .m-scroll-hint{opacity:1;visibility:visible}
html.m-gallery .m-scroll-hint{display:none}

/* hero */
html.m-flow #hero{padding-bottom:0!important}
html.m-flow #hero h2.h-rev{font-size:clamp(34px,10.2vw,44px)!important}
html.m-flow #hero .hero2{gap:40px!important}
html.m-flow .hero-stats{margin-top:28px}
html.m-flow .hero-stats span{flex-direction:column;align-items:flex-start;gap:6px;padding-right:8px}
html.m-flow .hero-stats span+span{padding-left:12px}
html.m-flow .hero-stats small br{display:none}
html.m-flow .hero-stats b{font-size:34px}
html.m-flow .dk-stack{height:auto;aspect-ratio:1.25}
html.m-flow .dk-num b{font-size:32px}
html.m-flow .dk-name b{font-size:19px}
html.m-flow .dk-nav button{width:42px;height:42px}
html.m-flow .hero-marquee{margin:36px -20px 0!important}
html.m-flow .mq-track span{font-size:12px}
html.m-flow #hero:after{display:none}

/* other cards: tidy stacking */
html.m-flow .founders-mini{flex-direction:column}
html.m-flow .vm-box{padding:20px}
html.m-flow .vm-box h3{font-size:18px!important}
html.m-flow .stories{grid-template-columns:1fr!important}
html.m-flow .qa summary{font-size:17px}

/* gallery: left / right wing choice sits at the top while the gallery cards are up */
html.m-gallery .wing-doors{display:none!important}

/* gallery mode: inside a wing the cards step aside and the 3D walk takes the screen */
html.m-gallery #content{opacity:0!important;visibility:hidden!important}
html.m-gallery .film-vignette{background:linear-gradient(180deg,#080809b3 0,transparent 22%,transparent 48%,#080809f2 78%)!important}
html.m-gallery .site-header{opacity:0;pointer-events:none!important}
.m-gal{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.m-gal.on{opacity:1;visibility:visible}
.m-gal-top{position:absolute;left:14px;right:14px;top:max(14px,env(safe-area-inset-top));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;pointer-events:auto}
.m-gal-back{height:42px;padding:0 16px;border-radius:999px;border:1px solid #ffffff2e;background:#0a0a0ccc;color:#fff;font:600 14px var(--text);display:flex;align-items:center;gap:8px}
.m-gal-back i{font-style:normal;color:#ff2a55}
.m-gal-title{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f3eee6;text-align:center}
.m-gal-count{min-width:62px;height:42px;display:grid;place-items:center;border-radius:999px;background:#0a0a0ccc;border:1px solid #ffffff2e;font:600 12px var(--mono);letter-spacing:.08em;color:#fff}
.m-gal-count:empty{visibility:hidden}
.m-gal-hint{position:absolute;left:50%;top:46%;margin:0;padding:10px 16px;border-radius:999px;background:#0a0a0ce6;border:1px solid #ff2a5566;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;transform:translate(-50%,10px);opacity:0;transition:opacity .5s,transform .5s}
.m-gal-hint i{font-style:normal;color:#ff2a55;display:inline-block;animation:nudge 1.4s ease-in-out infinite}
.m-gal-hint i:first-child{animation-direction:reverse}
.m-gal.hint .m-gal-hint{opacity:1;transform:translate(-50%,0)}
@keyframes nudge{50%{transform:translateX(4px)}}
.m-gal-sheet{position:absolute;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:20px 18px 14px;border-radius:24px;background:linear-gradient(160deg,#141418f7,#0b0b0ef7);border:1px solid #ffffff1f;box-shadow:0 -20px 60px -20px #000;pointer-events:auto;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.m-gal-sheet.moving{opacity:.35;transform:translateY(8px)}
.m-gal-sheet:not(.in){opacity:0;transform:translateY(24px);pointer-events:none}
.m-gal-sheet.in .m-gal-body>*{animation:gin .6s cubic-bezier(.16,1,.3,1) both}
.m-gal-sheet.in .m-gal-body>*:nth-child(2){animation-delay:.05s}.m-gal-sheet.in .m-gal-body>*:nth-child(3){animation-delay:.1s}.m-gal-sheet.in .m-gal-body>*:nth-child(n+4){animation-delay:.15s}
@keyframes gin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.m-gal-kind{margin:0;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#ff2a55}
.m-gal-body h3{margin:8px 0 0;font:900 28px/1 var(--display);letter-spacing:-.035em;text-transform:uppercase;color:#f3eee6}
.m-gal-pitch{margin:10px 0 0;font:400 14.5px/1.5 var(--text);color:#d6d0c8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.m-gal-chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.m-gal-chips li{padding:6px 11px;border-radius:999px;border:1px solid #ff2a5555;background:#ff2a5512;font:600 12px var(--text);color:#f3eee6}
.m-gal-actions{display:flex;gap:8px;margin-top:14px}
.m-gal-actions button{flex:1;height:46px!important;padding:0 12px!important;font-size:14px!important;justify-content:center;white-space:nowrap}
.m-gal-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff14}
.m-gal-nav button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff0a;color:#fff;font-size:18px}
.m-gal-nav button:active{background:#ff2a55;border-color:#ff2a55}
.m-gal-dots{display:flex;gap:5px}
.m-gal-dots i{width:6px;height:6px;border-radius:6px;background:#ffffff33;transition:width .35s,background .35s}
.m-gal-dots i.on{width:20px;background:#ff2a55}

/* entrance: speaker button beside "Enter the Westside" */
html.m-flow .entry-actions{gap:14px!important;flex-wrap:nowrap!important}
html.m-flow #speaker.at-door{width:60px;height:60px;flex:0 0 60px;pointer-events:auto}
html.m-flow #speaker.at-door svg{width:24px;height:24px}
html.m-flow #speaker.at-door .spk-bars{display:none}
html.m-flow body.at-entry #speaker.needs-gesture::after{display:none}
@media (max-width:700px){
  #speaker.needs-gesture::after{right:auto;left:50%;top:calc(100% + 12px);transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){.m-gal-hint i,.m-scroll-hint i{animation:none}}