/* =====================================================================
   Orion — mobile hero + mobile nav/tagline adjustments
   Load AFTER css/site.css. Everything mobile-specific switches on at a
   page width of 720px or less (same container breakpoint the site uses).
   ===================================================================== */

/* ---- defaults (desktop): mobile hero hidden, desktop markup untouched ---- */
.mhero{display:none}
.cta-xs{display:none}
.hamburger .hb{display:grid;place-content:center;gap:5px}
.hamburger .hb i{display:block;width:24px;height:2px;background:var(--ink);border-radius:1.5px}

@container page (max-width:720px){
  /* swap heroes */
  #orion-hero{display:none}
  .mhero{display:block}
  .tag-gap{display:none}

  /* nav: larger logo left, orange "Let's Talk", larger hamburger far right */
  .nav-inner{height:60px;padding:0 16px 0 18px}
  .logo svg{height:31px}
  .nav-mid{gap:14px}
  .nav .nav-mid .btn{background:#f96806;border-color:#f96806;color:#fff;padding:8px 14px;font-size:13px;font-weight:500;line-height:1}
  .nav .cta-lg,.nav .cta-sm{display:none}
  .nav .cta-xs{display:inline}
  .hamburger{padding:4px;margin-right:-6px}
  .hamburger .hb{gap:6px}
  .hamburger .hb i{width:28px;height:2.5px}

  /* Keep the bar and the open menu on screen while the page scrolls. */
  .page .nav{
    position:fixed;
    top:0;
    left:50%;
    width:100cqi;
    transform:translateX(-50%);
    z-index:80;
    padding-top:env(safe-area-inset-top);
  }
  .page .nav.nav-hidden{transform:translateX(-50%)}
  main{padding-top:calc(60px + env(safe-area-inset-top))}
  .mobile-menu{max-height:calc(100svh - 60px - env(safe-area-inset-top));overflow-y:auto}
  .mh-hero{height:calc(100svh - 60px - env(safe-area-inset-top))}

  /* tagline: three stacked lines, left-justified block centred on screen,
     locked at centre until the next section rolls up over it */
  .resolve{height:200svh;padding:0;text-align:left}
  .resolve h2{position:sticky;top:calc(30px + 50svh - 1.47em);width:max-content;margin:0 auto;text-align:left;white-space:normal;
    font-size:clamp(56px,17cqi,76px);line-height:.98;letter-spacing:-.04em}
  .resolve h2 span{display:block}
  #welcome{position:relative;z-index:1;background:var(--paper);margin-top:-50svh}
}

/* ---- mobile hero component ---- */
.mh-hero{position:relative;height:calc(100svh - 60px);min-height:460px;overflow:hidden;background:var(--paper)}
.mh-head{position:absolute;left:20px;right:20px;top:18px;text-align:left;transition:opacity .65s ease}
.mh-head.off,.mh-head.pre{opacity:0}
.mh-head h1{font:400 clamp(28px,8.6vw,38px)/1.05 'Newsreader',Georgia,serif;letter-spacing:-.035em;margin:0;color:var(--ink);max-width:none}
.mh-head p{font:400 15.5px/1.35 'Newsreader',Georgia,serif;color:var(--muted);letter-spacing:-.01em;max-width:38ch;margin:10px 0 0}
.mh-stack{position:absolute;inset:0;pointer-events:none}
.mh-chip{position:absolute;left:0;top:0;pointer-events:auto;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:pointer;will-change:transform;transform-origin:50% 60%}
.mh-chip>svg,.mh-orion>svg{display:block;width:100%;height:100%;overflow:visible}
.mh-orion{position:absolute;left:0;top:0;pointer-events:auto;touch-action:none;cursor:grab;will-change:transform}
.mh-rail{position:absolute;top:0;right:0;touch-action:none;z-index:45}
.mh-ptr{position:absolute;left:0;top:0;z-index:46;pointer-events:none;opacity:0;transition:opacity .5s ease;will-change:transform;overflow:visible}
.mh-ptr.on{opacity:1}
.mh-copy{position:absolute;left:20px;right:20px;top:16px;text-align:left;opacity:0;transition:opacity .35s ease;pointer-events:none}
.mh-copy.on{opacity:1}
.mh-copy h2{font:400 27px/1.08 'Newsreader',Georgia,serif;letter-spacing:-.03em;margin:0;color:var(--ink)}
.mh-copy p{font:400 15.5px/1.4 'Newsreader',Georgia,serif;color:#4a4d53;letter-spacing:-.01em;margin:8px 0 0;max-width:38ch}
.mh-hero.short .mh-copy h2{font-size:23px}
.mh-hero.short .mh-copy p{font-size:14.5px;line-height:1.36;margin-top:6px}
.mh-tog{position:absolute;left:50%;transform:translateX(-50%);transition:opacity .6s ease}
.mh-tog.pre{opacity:0}
.mh-tog svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .28s ease}
.mh-tog svg.off{opacity:0}
.mh-tog button{position:absolute;top:0;height:100%;z-index:2;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mh-chip:focus-visible,.mh-tog button:focus-visible{outline:2px solid #009fda;outline-offset:2px}

/* "Let's Talk" pulse when the Orion chip lands */
.nav .btn.mh-pulse{animation:mhPulse .9s ease}
@keyframes mhPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(249,104,6,.55)}30%{transform:scale(1.12)}55%{transform:scale(.97)}100%{transform:scale(1);box-shadow:0 0 0 14px rgba(249,104,6,0)}}

/* ---- portrait only on phones: landscape shows a turn-upright screen ---- */
.mh-rotate{display:none;position:fixed;inset:0;z-index:200;background:var(--paper);place-items:center;text-align:center;padding:24px}
.mh-rotate svg{width:46px;height:46px;margin:0 auto 14px;display:block}
.mh-rotate p{font:400 20px/1.25 'Newsreader',Georgia,serif;letter-spacing:-.02em;margin:0;color:var(--ink)}
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){.mh-rotate{display:grid}html,body{overflow:hidden}}