/* ============================================================
   Aurevia — mobile-only responsive layer (v121)
   Everything here is scoped to <= 768px (or coarse phones).
   Desktop styling and behaviour are untouched.
   ============================================================ */

@media (max-width: 768px){

  html,body{max-width:100%}

  /* ---------- INTRO ---------- */
  #intro{padding:0}
  .intro-shell{
    height:100svh;
    min-height:0;
    padding:calc(18px + env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom));
  }
  .logo-stage{width:min(560px,86vw);margin-top:-6vh}
  .intro-quote{
    top:auto;
    bottom:calc(104px + env(safe-area-inset-bottom));
    width:calc(100vw - 36px);
    font-size:clamp(19px,5.6vw,27px);
    line-height:1.16;
  }
  .enter-btn{
    bottom:calc(26px + env(safe-area-inset-bottom));
    padding:14px 24px;
    font-size:12px;
    min-height:46px;
  }
  @media (max-height: 700px){
    .logo-stage{width:min(460px,72vw);margin-top:-4vh}
    .intro-quote{font-size:clamp(17px,5vw,22px);bottom:calc(92px + env(safe-area-inset-bottom))}
  }

  /* ---------- HEADER / MOBILE NAV ---------- */
  .header{
    top:calc(10px + env(safe-area-inset-top));
    width:calc(100% - 20px);
    border-radius:16px;
    z-index:62;
  }
  .nav{padding:4px 8px 4px 14px;gap:10px}
  /* Structural lockup: every offset is derived from the A box size, so the
     wordmark keeps the exact desktop relationship at any mobile scale. */
  .brand-lockup{--a-size:44px;align-items:flex-start;top:calc(var(--a-size) * .05)}
  .nav-logo{width:var(--a-size);height:var(--a-size)}
  .brand-word{
    height:calc(var(--a-size) * .245);
    left:calc(var(--a-size) * -.431);
    top:calc(var(--a-size) * .535);
  }
  .nav-links{display:none !important}


  .nav-burger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:5px;
    width:46px;
    height:46px;
    padding:0 10px 0 0;
    margin:0;
    border:0;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-burger i{
    display:block;
    height:1px;
    width:20px;
    background:#1c1a17;
    transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .2s ease,width .3s ease;
  }
  .nav-burger i:last-child{width:13px}
  body.mobile-menu-open .nav-burger i:first-child{transform:translateY(3px) rotate(45deg)}
  body.mobile-menu-open .nav-burger i:last-child{width:20px;transform:translateY(-3px) rotate(-45deg)}

  .mobile-drawer{
    position:fixed;
    inset:0;
    z-index:60;
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .38s cubic-bezier(.22,.61,.36,1),visibility .38s linear;
  }
  .mobile-drawer-scrim{
    position:absolute;
    inset:0;
    background:rgba(18,16,13,.34);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
  .mobile-drawer-panel{
    position:absolute;
    left:10px;
    right:10px;
    top:calc(10px + env(safe-area-inset-top));
    padding:calc(74px + 6px) 22px calc(24px + env(safe-area-inset-bottom));
    border-radius:20px;
    background:rgba(248,244,237,.97);
    -webkit-backdrop-filter:blur(22px) saturate(130%);
    backdrop-filter:blur(22px) saturate(130%);
    border:1px solid rgba(17,17,17,.075);
    box-shadow:0 26px 70px rgba(17,17,17,.14);
    transform:translate3d(0,-14px,0);
    opacity:0;
    transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
  }
  body.mobile-menu-open .mobile-drawer{opacity:1;visibility:visible;pointer-events:auto}
  body.mobile-menu-open .mobile-drawer-panel{transform:translate3d(0,0,0);opacity:1}

  .mobile-drawer-panel a{
    display:flex;
    align-items:center;
    min-height:52px;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#24211d;
    border-top:1px solid rgba(17,17,17,.08);
  }
  .mobile-drawer-panel a:first-of-type{border-top:0}
  .mobile-drawer-panel a.cta{
    justify-content:center;
    margin-top:18px;
    border-top:0;
    background:#141414;
    color:#fff;
    border-radius:999px;
    letter-spacing:.14em;
    box-shadow:0 12px 26px rgba(0,0,0,.14);
  }

  /* ---------- HERO ---------- */
  .hero{padding:130px 20px 78px;gap:36px}
  .hero h1{font-size:clamp(42px,12.6vw,58px);line-height:.94}
  .hero .lead{font-size:15.5px;line-height:1.68}
  .hero .actions{gap:10px;margin-top:26px}
  .hero .actions .btn{padding:14px 18px;font-size:12.5px;min-height:48px;flex:1 1 auto}
  .kicker{font-size:10px;letter-spacing:.24em;margin-bottom:14px}

  /* ---------- SECTIONS ---------- */
  .section{padding:74px 20px}
  .section h2{font-size:clamp(36px,10.5vw,52px)}
  .services-orbit{display:none}

  /* ---------- SERVICES ---------- */
  .services-heading-row{gap:16px}
  .services-heading-meta{display:none}
  .services-grid-luxury{grid-template-columns:1fr}
  .service-luxury-item{padding:26px 22px}
  .services-route{overflow:hidden}

  /* ---------- OPERATORS ---------- */
  .operator-geometry{display:none}
  .operator-luxury-grid{gap:38px}
  .operator-commitment p{font-size:13.5px}

  /* ---------- HOW IT WORKS (sticky) ---------- */
  .process-sticky{min-height:0;height:100svh;padding:92px 0 24px;align-items:flex-start}
  .process-shell{width:calc(100% - 32px);grid-template-columns:1fr;gap:16px;align-content:start}
  .process-copy h2{font-size:clamp(30px,8.4vw,40px);margin-top:6px}
  .process-progress{margin-top:14px}
  .process-stage{height:clamp(300px,52svh,404px) !important;min-height:0 !important}
  .process-panel{padding:22px 20px;border-radius:22px}
  .process-panel.panel-request,
  .process-panel.panel-source,
  .process-panel.panel-fly{
    gap:12px !important;
    height:auto !important;
    inset:0 !important;
    overflow:hidden;
  }
  /* v46 made these relative; the legacy percentage offsets then pushed them
     over the copy on small screens. Neutralise the offsets on mobile only. */
  .process-panel .request-visual,
  .process-panel .source-visual,
  .process-panel .departure-visual{
    top:auto !important;
    left:auto !important;
    right:auto !important;
    margin-top:0 !important;
  }
  .process-panel h3{font-size:clamp(26px,7.4vw,34px);margin-bottom:8px}
  .process-panel.panel-source .process-panel-copy h3,
  .process-panel.panel-fly .process-panel-copy h3{font-size:clamp(26px,7.4vw,34px);margin-top:0 !important;margin-bottom:8px}
  .process-panel p{font-size:13.5px;line-height:1.55}
  .panel-topline{font-size:9px;letter-spacing:.18em}
  .route-place strong,.departure-route strong{font-size:30px}
  .route-place span{display:none}
  .source-visual{gap:6px}
  .aircraft-row{padding:8px 10px}
  .aircraft-row small{display:none}
  .panel-fly .process-panel-copy{margin-top:6px !important}
  .panel-fly .departure-visual{margin-top:0 !important}
  .panel-fly .aurevia-confirm-summary{padding:0 12px}

  /* Confirm/Fly takeover — mobile geometry safeguards only. */
  #confirmTakeoverShell{
    border-radius:22px;
    max-width:100vw;
    box-shadow:0 26px 70px rgba(48,38,26,.24), inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* ---------- MANIFESTO ---------- */
  .manifesto-exact-shell{min-height:0;padding:20px 0;width:min(100%,92vw)}
  .manifesto-exact-logo{width:min(430px,86vw);margin-top:-5vh}
  .manifesto-exact-copy{margin-top:-64px;width:88vw}
  .manifesto-exact-copy p{font-size:clamp(23px,6.6vw,34px);line-height:1.2}
  .manifesto-intro-wordmark{max-width:88vw}

  /* ---------- REQUEST ---------- */
  .request{gap:30px}
  .form{padding:22px 18px;border-radius:22px}
  .form .row{grid-template-columns:1fr}
  input,textarea,select{font-size:16px;border-radius:12px;padding:13px 14px}
  .submit{min-height:52px;font-size:12.5px}

  /* ---------- FOOTER ---------- */
  .footer{padding:34px 20px calc(42px + env(safe-area-inset-bottom))}
  .footer .inner{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left}
  .footer span{max-width:100%}
}

/* Narrow phones (390–414px) */
@media (max-width: 420px){
  .route-place strong,.departure-route strong{font-size:27px}
  .hero h1{font-size:clamp(40px,12vw,52px)}
}

@media (prefers-reduced-motion: reduce){
  .mobile-drawer,.mobile-drawer-panel,.nav-burger i{transition-duration:.01ms !important}
}

/* Floating home bubble — keep the JS docking math (top-based, 45vh) intact */
@media (max-width: 768px){
  .floating-home{
    --bubble-size:54px;
    --bubble-left:10px;
    top:45vh;
    bottom:auto;
    /* mobile header sits at z-index 62; the docked A must render above it */
    z-index:63;
  }
  .floating-logo-stack{width:42px;height:42px}
  /* keep the bubble out of the way while the drawer is open */
  body.mobile-menu-open .floating-home:not(.at-home){opacity:0;pointer-events:none}
}


/* ---------- Structural mobile refinements (v122) ---------- */
@media (max-width: 768px){
  /* Desktop line breaks fight narrow columns — let headings wrap naturally. */
  #operators .operator-editorial h2 br,
  #services .services-heading-copy h2 br,
  #request .request h2 br{display:inline-block;width:.3em;height:0;content:""}
  #operators .operator-editorial h2{text-wrap:balance}

  /* Service cards: true auto-height vertical flow, footer in normal flow. */
  #services .service-luxury-item{
    min-height:0;
    height:auto;
    padding:26px 22px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  #services .service-luxury-top{margin-bottom:2px}
  #services .service-luxury-item h3{margin:0}
  #services .service-luxury-item p{margin:0}
  #services .service-luxury-foot{
    position:static;
    left:auto;right:auto;bottom:auto;
    margin-top:auto;
    padding-top:6px;
  }

  /* Operator dossier: labels wrap safely, indices stay aligned. */
  .operator-dossier-top,
  .operator-dossier-footer{flex-wrap:wrap;gap:6px 12px}
  .operator-commitment{align-items:start}
  .operator-commitment h3{overflow-wrap:anywhere}

  /* Confirm summary legibility floor. */
  .panel-fly .aurevia-confirm-item small{font-size:8px;letter-spacing:.14em}
  .panel-fly .aurevia-confirm-item strong{font-size:10.5px;letter-spacing:.05em}

  /* Full-width, comfortable form controls. */
  .form label{display:block;width:100%}
  .form input,.form textarea,.form select{width:100%;min-height:48px}
  .form textarea{min-height:120px}
  .submit{width:100%}
}

@media (max-width: 360px){
  .brand-lockup{--a-size:40px}
  .nav-burger{width:44px;height:44px}
}

/* Keyboard focus visibility (all viewports; pointer users unaffected). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.submit:focus-visible,
.nav-burger:focus-visible{
  outline:2px solid var(--gold,#b8954f);
  outline-offset:3px;
}

/* ---------- How It Works: deterministic panel zones on mobile ---------- */
@media (max-width: 768px){
  .process-panel.panel-request,
  .process-panel.panel-source,
  .process-panel.panel-fly{
    grid-template-rows:auto auto auto !important;
    align-content:space-between;
    gap:12px !important;
  }
  .process-panel.panel-request .request-visual,
  .process-panel.panel-source .source-visual,
  .process-panel.panel-fly .departure-visual{align-self:start !important}
  .process-panel.panel-request .process-panel-copy,
  .process-panel.panel-source .process-panel-copy,
  .process-panel.panel-fly .process-panel-copy{align-self:end !important}
  .panel-fly .departure-visual{margin-top:8px !important}
  .panel-fly .process-panel-copy{margin-top:0 !important}
  .panel-fly .process-eyebrow{margin-top:0 !important}
  .panel-fly h3{margin-top:0 !important}
  .panel-fly .aurevia-confirm-summary{margin-top:12px}
  .panel-fly .aurevia-confirm-item{padding-top:8px;padding-bottom:8px}
}

/* Short phones: tighten the sticky sequence so nothing collides. */
@media (max-width: 768px) and (max-height: 760px){
  .process-sticky{padding-top:84px}
  .process-copy h2{font-size:clamp(27px,7.6vw,34px)}
  .process-panel{padding:18px 16px}
  .process-panel h3,
  .process-panel.panel-source .process-panel-copy h3,
  .process-panel.panel-fly .process-panel-copy h3{font-size:clamp(22px,6.4vw,27px)}
  .process-panel p{font-size:12.5px;line-height:1.5}
  .route-place strong,.departure-route strong{font-size:24px}
}