/* ============================================================
   mobile.css — phone-only redesign (<=760px). Desktop never matches.
   Loaded after home.css site-wide. Pairs with the JS-injected mobile
   nav + sticky CTA (main.js, also phone-gated). Nothing here touches
   the >=761px layout.
   ============================================================ */
@media (max-width: 760px) {

  /* --- 1. Section rhythm: drop the desktop orb-travel min-heights + centering --- */
  .scene, .scene--short, .scene--dense { min-height: auto; justify-content: flex-start; }
  .section { padding-block: clamp(2.5rem, 8vw, 3.75rem); }
  .section--tight { padding-block: clamp(2rem, 6vw, 3rem); }
  .hero { padding-top: clamp(1.5rem, 6vh, 3rem); }

  /* --- 2. De-dup phone imagery: the "See it in action" gallery is the single
        swipeable screenshot moment; hide the redundant inline device frames --- */
  .visual-split .device { display: none; }
  .visual-split { grid-template-columns: 1fr; }
  .room--light .device-solo { display: none; }
  .room--light { padding: 2rem 1.25rem; }

  /* Feature grid: 2-up so 8 tiles don't become 8 tall rows */
  .features--quad { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .features--quad .feature { padding: var(--sp-3) var(--sp-2) 0 0; }

  /* Bigger tap targets */
  .footer-col a, .lang-switch a { display: inline-block; padding-block: 0.3rem; }

  /* --- 3. Header: hide the desktop CTA on mobile (menu + sticky bar cover it) --- */
  .nav__cta { display: none; }

  /* --- 4. Hamburger toggle (injected by main.js) --- */
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; margin-left: auto;
    background: transparent; border: 1px solid var(--hairline); border-radius: var(--r-sm);
    cursor: pointer;
  }
  .nav-toggle__bar { display: block; width: 18px; height: 1.5px; background: var(--ink);
    margin: 0 auto; transition: transform var(--dur-quick) var(--ease), opacity var(--dur-quick); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

  /* --- Full-screen overlay menu --- */
  .mobile-menu {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-8) var(--gutter) var(--sp-7);
    background: linear-gradient(180deg, rgba(26,21,16,0.97), rgba(21,17,12,0.99));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .mobile-menu__links { display: flex; flex-direction: column; gap: 0.15rem; }
  .mobile-menu a:not(.btn) {
    font-family: var(--font-display); font-size: clamp(1.55rem, 7vw, 2.1rem);
    color: var(--ink); padding: 0.45rem 0; letter-spacing: -0.01em; line-height: 1.15;
  }
  .mobile-menu a:not(.btn):active { color: var(--amber); }
  .mobile-menu__cta { margin-top: var(--sp-6); align-self: flex-start; }
  .mobile-menu__close {
    position: absolute; top: 0.7rem; right: var(--gutter);
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--ink-2); cursor: pointer; font-size: 1.6rem; line-height: 1;
  }

  /* --- Slim sticky bottom CTA --- */
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 0.55rem var(--gutter);
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(26,21,16,0), rgba(26,21,16,0.92) 42%);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(125%); transition: transform var(--dur) var(--ease);
    pointer-events: none;
  }
  .sticky-cta.is-visible { transform: none; pointer-events: auto; }
  .sticky-cta .btn { display: flex; width: 100%; }
}