/* Phone app layer for the engine pages (index, work). Every rule is inside a phone query: desktop is untouched. */
.gt-tabbar{display:none}
@media (max-width:899px){
  :root{--header-h:3.5rem;--tab-h:clamp(3.5rem,7svh,4rem);--safe-b:env(safe-area-inset-bottom,0px);--phone-gap:clamp(.75rem,3vw,1.5rem);--phone-section:clamp(2rem,7vw,4rem)}
  /* Clip decorative overflow without creating a second scroll container.
     Horizontal galleries still scroll locally; the document cannot pan sideways. */
  html{width:100%;overflow-x:clip;overscroll-behavior-x:none;scroll-padding-bottom:calc(var(--tab-h) + var(--safe-b))}
  body{width:100%;min-width:0;overflow-x:clip;overscroll-behavior-x:none;padding-bottom:calc(var(--tab-h) + var(--safe-b));-webkit-tap-highlight-color:transparent}
  main,main>section{min-width:0;max-width:100%}
  .site-header{height:calc(3.5rem + env(safe-area-inset-top,0px));min-height:calc(3.5rem + env(safe-area-inset-top,0px));padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
  a,button,summary{touch-action:manipulation}
  /* Mobile opens directly on the headline, with no scene or statement-sized gap. */
  .hero-seq .seq{height:auto;min-height:0;padding-top:var(--header-h)}
  .hero-seq .seq-media,#what-we-create{display:none}
   .hero-copy{padding:clamp(1.5rem,4svh,3rem) var(--gutter) var(--phone-section);gap:clamp(.5rem,2vw,1rem);flex:none;width:100%;max-width:100%;min-width:0}
   .hero-copy h1{font-size:clamp(3rem,min(30cqw,20svh),10rem);margin-bottom:0;line-height:1}
   .hero-copy .hero-reel{height:2.25em}
   .hero-copy .lede{font-size:1rem;line-height:1.45;max-width:none;margin-top:0}
  .hero-copy .actions{width:100%;display:grid;grid-template-columns:1fr;gap:var(--space-xs)}
   .hero-copy .actions .btn{justify-content:space-between;min-height:clamp(3rem,6.2svh,3.5rem);width:100%;white-space:normal}
  .hero-copy .actions .link-underline{display:inline-flex;align-items:center;min-height:2.75rem}
  /* actions everywhere: full-width thumb keys */
  .ring-copy .actions,.case-copy .actions,.close .actions{display:grid;grid-template-columns:1fr;gap:var(--space-xs);width:100%}
  .ring-copy .actions .btn,.case-copy .actions .btn,.close .actions .btn{justify-content:space-between;min-height:3.5rem;width:100%}
  .ring-copy .actions .link-underline,.case-copy .actions .link-underline{display:inline-flex;align-items:center;min-height:2.75rem}
  /* index list as app rows */
  .work-names a{min-height:4rem;padding:.9rem 1rem;margin-inline:-1rem;border-radius:1.25rem;align-items:center}
  .work-names a:active{background:rgb(242 242 242/.1)}
  .work-names a span{flex-basis:100%}
  .wpi-all{display:inline-flex;align-items:center;min-height:2.75rem}
  /* work page: denser, readable cases */
  .work-intro{padding-block:calc(var(--header-h) + var(--space-l)) var(--space-m)}
  .work-intro h1{font-size:clamp(4rem,24vw,6rem)}
  .work-lede{font-size:1.0625rem;margin-top:var(--space-m)}
  .work-index a{padding:var(--space-s) var(--space-m);min-height:4rem}
   .case{padding-block:var(--phone-section)}
   .case-grid{gap:var(--phone-gap);min-width:0}
   .case-grid>*{min-width:0;max-width:100%}
  .case-grid>.case-film{order:-1}
  .case h2{font-size:clamp(2.6rem,13vw,3.6rem)}
  .case-facts{margin-top:var(--space-m)}
   .case-facts>div{padding:var(--phone-gap)}
  .case-film .clip-frame{border-radius:1.25rem}
  .case-film:hover{transform:none}
  .clip{padding-block:0}
  .is-swipe .h-track{scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch}
  /* embeds: page scroll stays with the page until the visitor opts in; bar clears the notch */
  .ah-embed:not([data-state="active"]) iframe,.heliot-embed:not([data-state="active"]) iframe{pointer-events:none}
  .ah-embed .ah-frame{touch-action:pan-y}
  .ah-embed[data-state="active"] .ah-frame{touch-action:auto}
  .ah-enter,[data-heliot-enter]{min-height:3rem}
  .ah-bar button,.ah-bar a{min-height:2.75rem}
  .site-footer{padding-bottom:var(--space-m)}
  .footer-links a,.footer-legal a{min-height:2.75rem}
  /* menu sheet */
  .nav-menu summary{min-height:2.75rem;min-width:4.5rem;justify-content:center}
  .nav-menu nav{padding-bottom:calc(var(--tab-h) + var(--safe-b) + var(--space-m));overscroll-behavior:contain}
  .nav-menu nav a:not(.btn){display:flex;align-items:center;min-height:3rem}
  .nav-menu nav .nav-sub a{min-height:2.75rem}
  .nav-menu nav .btn{width:100%;justify-content:space-between;min-height:3.5rem}
  /* app tab bar */
   .gt-tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(var(--tab-h) + var(--safe-b));padding:.35rem max(.5rem,env(safe-area-inset-right,0px)) var(--safe-b) max(.5rem,env(safe-area-inset-left,0px));background:rgb(13 14 16/.97);border-top:1px solid rgb(242 242 242/.1);transition:transform .25s ease-out}
   .gt-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-width:0;min-height:2.75rem;border-radius:1rem;color:rgb(242 242 242/.7);text-decoration:none;font-size:clamp(.75rem,2.8vw,.8125rem);font-weight:600;letter-spacing:.01em}
   .gt-tabbar a svg{width:clamp(1.125rem,5vw,1.375rem);height:clamp(1.125rem,5vw,1.375rem);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .gt-tabbar a[aria-current="page"]{color:var(--paper)}
  .gt-tabbar a[aria-current="page"] svg{stroke:var(--signal)}
  .gt-tabbar a.gt-tab-go{color:var(--ink);background:var(--paper);margin-block:.1rem}
  .gt-tabbar a:active{background:rgb(242 242 242/.12)}
  .gt-tabbar a.gt-tab-go:active{background:var(--signal)}
  .gt-tabbar a.gt-tab-go svg{stroke:var(--ink)}
  body.gt-menu-open .gt-tabbar,body.gt-embed-live .gt-tabbar,body.gt-kbd .gt-tabbar{transform:translateY(110%)}
  body.gt-menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.gt-tabbar{transition:none}}