/* ---- container queries ----
   Declared HERE, after everything they override. @container adds no
   specificity of its own, so an equal-specificity rule later in the file
   beats it on source order - which is exactly why these silently did
   nothing when they sat up beside the container-type declarations.
   (Same trap as .menu-regions earlier in this file.) */
/* narrow stage (iPad landscape, split layouts): shrink the angle row to fit */
@container (max-width: 760px) {
  .stage-foot { width: min(94%, 960px); }
  .thumb-row { gap: 18px; }
  .thumb-set { gap: 10px; }
  .athumb { width: clamp(48px, 9cqw, 100px); height: clamp(30px, 5.4cqw, 58px); }
  .vc-360, .vc-fs { width: 44px; height: 44px; }
  .vc-360 svg, .vc-fs svg { width: 16px; height: 16px; }
}
@media (max-width: 900px) {
  /* Mobile re-think: car image pinned static at the top, selections scroll below.
     No angle-preview thumbnails — just the Change View + Full Screen buttons. */
  body { overflow: hidden; }
  /* ---- one continuous page scroll ----
     Was: .stage locked to 46vh, .panel-scroll scrolling internally, .panel-foot
     pinned below it. Two nested scrollers on a phone, and the spec line + CTA
     sat permanently on screen eating a third of the viewport. Now .body is the
     ONLY scroller, the stage sticks to the top, and the accordions, spec line
     and CTA are one flow you scroll to the end of. */
  .body { display: block; height: 100%;
          overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

  /* static car area at the top (does not scroll) */
  /* sticky, not fixed: it starts below the 52px bar and rides up to the top as
     the bar tucks away, then stays. margin-top is what leaves room for the bar,
     which is out of flow. */
  .stage { flex: none; height: 46vh; border-bottom: 1px solid #ececec;
           position: sticky; top: 0; z-index: 2; background: #fff; margin-top: 52px; }
  .stage-imgs { flex: 1; height: auto; min-height: 0; }

  /* hide the angle thumbnails; keep only the rotate (Change View) + fullscreen buttons */
  .thumb-set { display: none; }
  .stage-foot { width: 100%; padding-bottom: 0; }
  .stage-rule { display: none; }
  .thumb-row { flex: none; gap: 18px; justify-content: center; padding: 10px 0 14px; }

  /* car stays put up top; only .panel-scroll moves, footer stays pinned */
  .panel { display: block; overflow: visible; border-left: none; padding: 22px 20px 20px; }
  .car-layer { transform: scale(1.1); }

  /* The scroll indicator's pull-out has to stay inside the panel's padding, and
     mobile padding is 20px where desktop is 46px. At the desktop -34px it lands
     14px outside the panel and .panel's overflow:hidden clips it away entirely. */
  /* the panel no longer scrolls itself, so neither the pull-out nor the custom
     indicator has anything to do - the page scrollbar is the scrollbar now */
  .scroll-wrap { display: block; margin-right: 0; }
  .panel-scroll { overflow: visible; padding-right: 0; }
  .scroll-ind { display: none; }

  /* ---- brand bar: the left rail becomes a top bar ----
     twisted.co does the same at this breakpoint. The wordmark un-rotates and
     centres, the burger goes hard right, and the region links move into the
     menu (see .menu-regions) since a 52px bar has nowhere to put them. */
  .layout { display: block; height: 100vh; height: 100dvh; }
  .sidebar { flex-direction: row; align-items: center; justify-content: center; height: 52px;
             position: fixed; top: 0; left: 0; right: 0; width: auto;
             transition: transform .3s ease, opacity .3s ease; }
  /* tucks away on scroll so the car gets the full top of the screen */
  .sidebar.tucked { transform: translateY(-100%); opacity: 0; pointer-events: none; }
  /* never tuck while the menu is open - that is the only way back out of it */
  body.menu-open .sidebar.tucked { transform: none; opacity: 1; pointer-events: auto; }
  .logo-wrap { width: auto; height: 52px; display: flex; align-items: center; }
  .logo-wrap .logo { position: static; transform: none; width: 112px; }
  .side-menu { top: 50%; left: auto; right: 16px; transform: translateY(-50%); }
  .sidebar .regions { display: none; }

  /* ---- menu drops from the top, not in from the left ---- */
  /* Anchored left AND right rather than width:100vw. On the device the panel
     came up ~12% short of the screen with the page showing down the right edge.
     100vw is the wrong tool here: it resolves against the layout viewport, which
     on iOS drifts from what is actually on screen as the URL bar collapses, and
     it ignores the containing block entirely. left:0 + right:0 on an absolutely
     positioned child of a fixed inset:0 overlay is exactly the box we want and
     cannot disagree with it. */
  .menu-panel { left: 0; right: 0; width: auto; max-width: none;
                transform: translateY(-100%); }
  /* Spacing only - no type sizes touched. The menu ran 61px past an 844px
     phone even after TBug came out, which put Cookie Policy and Privacy Policy
     below the fold with nothing to signal the menu scrolls, so they read as
     missing. These four reductions recover 68px and bring the legal block fully
     on screen at 844. Shorter phones still scroll, which is normal. */
  .menu-scroll { padding: 68px 28px 28px; }
  .menu-docs { padding-top: 24px; }
  .menu-overlay.show .menu-panel { transform: translateY(0); }
  .menu-panel::before { right: 0; }          /* black fills the full width */

  /* the strip becomes the top bar so the X lands exactly where the burger was */
  /* The strip rides with the panel, so on mobile its burger would drop in from
     off-screen rather than morph in place - which is the entire effect. Hidden
     here; the top bar's own burger does the morph instead, sitting still while
     the black drops down behind it. On desktop the reverse holds: the strip
     starts exactly over the rail, so its burger appears to detach and slide. */
  .menu-strip { display: none; }
  .sidebar { z-index: 9999; }               /* burger stays above the panel */
  /* ...which also puts it above .fs-overlay (9998), so the top bar covered 32px
     of the 50px close button - 64% of it, including the top of the tap target.
     Moved clear of the 52px bar rather than restacked: the burger is deliberately
     the topmost thing on mobile, and raising the overlay above it would hide the
     menu instead. 14px below the bar matches the gap it has from the top on
     desktop. */
  .fs-close { top: 66px; }
  /* No transition on this colour change. Both `background` and `background-color`
     left the bar pinned at the from-colour, while disabling the transition
     resolved it to black instantly - so the fade was costing correctness for a
     250ms flourish that happens behind a dropping panel and nobody sees. */

  /* With the menu open the bar is part of the menu, not the page: it takes the
     panel's black so the two read as one surface, and the wordmark goes -
     the live site shows no wordmark over an open menu, and it would otherwise
     sit next to the X competing with it. */
  body.menu-open .sidebar { background: #000; }
  body.menu-open .logo-wrap { visibility: hidden; }

  .menu-head { font-size: 32px; margin-bottom: 14px; }
  .menu-head + .menu-list { margin-bottom: 32px; }
  .menu-link { font-size: 20px; padding: 9px 0; }

  /* regions inline, pipe-separated, as on the live site's mobile menu */
  .menu-regions { display: flex; align-items: center; gap: 14px; margin: 16px 0 20px; }
  .menu-regions a { font-family: 'Bebas Neue', sans-serif; font-size: 17px;
                    letter-spacing: .5px; color: #555; text-decoration: none; }
  .menu-regions a.active { color: #fff; }
  .menu-regions a + a { border-left: 1px solid #555; padding-left: 14px; }

  /* .menu-docs needs no mobile override now - it flows at every width. This
     rule used to un-pin it below 900px, which is why phones looked right and
     the overlap only showed on wide-but-short viewports. */
}