/* Phone-only page shell + overlay geometry (Framer's phone breakpoint is
   <= 809.98px). Tablet (810px+) and desktop are untouched; the 810px overlay
   containment boundary stays in overlay-mobile.css. All sizes are % of the
   phone viewport — never vw/vh — so the numbers read as "% of the screen". */
@media (max-width: 809.98px) {
  :root {
    /* Viewport bottom -> top of the visible dock pill (72px pill + 24px dock
       padding). mobile-shell.js refines this from the rendered pill; the value
       here is the no-JS fallback. */
    --dock-clearance: 96px;
    --dock-gap: 20px;
  }

  /* Page shell: an unbroken 100% chain so the wallpaper fills exactly the
     visible viewport. Framer ships 100vh, which on iOS Safari is taller than
     the area shown while the toolbar is up — that was the bottom clipping. */
  html {
    height: 100% !important;
    /* Average of the wallpaper's bottom strip: overscroll and toolbar
       transitions show wallpaper-blue, never white. */
    background-color: #3e6ba9;
  }
  body,
  #main {
    height: 100% !important;
  }
  .framer-YvAmU.framer-72rtr7 {
    height: 100% !important;
    min-height: 100% !important;
  }
  .framer-YvAmU .framer-bpy7lj, /* Content-Wrapper: the page scroller */
  .framer-YvAmU .framer-1r5azef /* #hero */ {
    height: 100% !important;
  }
  .framer-YvAmU .framer-1ikkr7l /* Pre-Loader (fixed) */ {
    height: 100% !important;
    top: 0 !important;
  }

  /* Top bar: the native status bar takes its place. */
  .framer-YvAmU .framer-1425bdo {
    display: none !important;
  }
  .framer-YvAmU .framer-1fptlhi {
    padding-top: max(18px, env(safe-area-inset-top, 0px)) !important;
  }

  /* Contact: the iPhone mockup (728px tall, placed 180px above the video/CTA
     card) ran on past the card's bottom. Clip it at the card's vertical
     midpoint. mobile-shell.js measures the real boxes into
     --contact-phone-clip. The inset is in the layer's own coordinates (it is
     800x1618, rendered through transform: scale(0.45)); the fallback is the
     390px-wide value, 345 rendered px. */
  .framer-YvAmU .framer-1ghfsx6 {
    clip-path: inset(0 0 var(--contact-phone-clip, 767px) 0) !important;
  }

  /* Dock: same place. This only lifts it above the home indicator where the
     browser reports a bottom inset (PWA / gesture nav); in Safari it is 24px. */
  .framer-YvAmU .framer-ty2q3 {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Overlay shells (every window: About/Tools/Web/Motion/Resume, case
     studies, contact): 90% wide, 70% tall, bottom pinned 20px above the dock
     pill. No transform here — the runtime animates the shell's inline
     transform on open/close; the bottom-centre origin makes that scale-in
     grow out of the dock. The Music iPod is not a "-container" and keeps its
     centred layout. */
  #overlay > .framer-YvAmU[class*="-container"] {
    position: fixed !important;
    top: auto !important;
    left: 5% !important;
    right: 5% !important;
    bottom: calc(var(--dock-clearance) + var(--dock-gap)) !important;
    width: 90% !important;
    max-width: 90% !important;
    height: 70% !important;
    /* Short / toolbar-expanded viewports: never let the title bar reach the
       status bar. */
    max-height: calc(
      100% - var(--dock-clearance) - var(--dock-gap) -
        env(safe-area-inset-top, 0px) - 12px
    ) !important;
    margin: 0 !important;
    /* The shell must not clip: the window draws its box-shadow outside its
       own box (8px icon windows, ~33px case study / contact). overlay-mobile.css
       sets overflow:auto here for the 810px boundary; the window itself clips
       and scrolls its content. */
    overflow: visible !important;
    transform-origin: 50% 100%;
    /* Framer's desktop drag handle sets inline touch-action:none, which
       blocks native scrolling inside the window on touch devices. */
    touch-action: auto !important;
    overscroll-behavior: none;
  }

  /* Overlays: no overscroll (no rubber-band, no scroll chaining into the page
     behind) and no visible scrollbars. rich-native-scroll.css turns 8px
     scrollbars back on below 810px for the contained windows; phones get the
     indicator-free look instead. html/body are restated so the phone layer is
     self-contained. */
  /* Only real scroll containers get overscroll-behavior:none. Putting it on
     every descendant would also hit overflow:hidden boxes (the contact form,
     icon masks, thumbnails) and stop a touch that starts on them from chaining
     up to the window's scroller. mobile-shell.js covers any overflow:auto
     descendant not listed here. */
  #overlay > .framer-YvAmU,
  #overlay .framer-Y5Cz0.framer-ac3q9q,
  #overlay .framer-rQ8qG.framer-1f7658n,
  #overlay .framer-2dM5n.framer-f9gwfg,
  #overlay .framer-Y5Cz0 .framer-nADdj, /* About body */
  #overlay .framer-Y5Cz0 .framer-35jnj8, /* Tools body */
  #overlay .framer-Y5Cz0 .framer-1t69tty, /* Web (Gallery) body */
  #overlay .framer-Y5Cz0 .framer-twappx, /* Motion (Reel) body */
  #overlay .framer-Y5Cz0 .framer-MvgBd, /* Resume body */
  #overlay .framer-CYdbJ.framer-3q5nmm, /* case study body */
  #overlay .framer-2dM5n .framer-13uq30 /* contact body */ {
    overscroll-behavior: none !important;
  }
  html,
  body,
  #overlay,
  #overlay * {
    scrollbar-width: none !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  #overlay::-webkit-scrollbar,
  #overlay *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* The icon windows (About/Tools/Web/Motion/Resume) ship a transparent
     backdrop with z-index:auto, i.e. below the page (z 2) — taps outside the
     window reached the page. Lift it above the page so a tap outside closes
     the window (mobile-shell.js) while the dock (z 4) stays usable. The
     case-study, contact and iPod backdrops already sit above the page. */
  #overlay > .framer-YvAmU:not([class*="-container"]):has(+ [class*="-container"] > .framer-Y5Cz0) {
    z-index: 3 !important;
  }

  /* iOS / Android paint a grey UA tap highlight over the element that handles
     a tap; on the traffic-light close controls it reads as a stray "selected"
     state. Drop it (and the long-press callout) on those controls. */
  #overlay .framer-9fdj6s, /* icon windows: "closing" dots group */
  #overlay .framer-9fdj6s *,
  #overlay .framer-ynsc5j, /* case study: nav container around the dots */
  #overlay .framer-ynsc5j *,
  #overlay .framer-1m823yd, /* contact: nav container around the dots */
  #overlay .framer-1m823yd *,
  #overlay [data-framer-name="Close Button"] /* iPod */ {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Windows fill the shell exactly; their body wrappers do the scrolling. */
  #overlay .framer-Y5Cz0.framer-ac3q9q, /* About / Tools / Web / Motion / Resume */
  #overlay .framer-rQ8qG.framer-1f7658n, /* case studies */
  #overlay .framer-2dM5n.framer-f9gwfg /* contact */ {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  #overlay .framer-Y5Cz0 .framer-16esqeq,
  #overlay .framer-rQ8qG .framer-1syuspx-container,
  #overlay .framer-2dM5n .framer-13uq30 {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  #overlay .framer-CYdbJ.framer-3q5nmm {
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
  }
}