/* NumiNova Advisory : mobile */

/* The hamburger only exists below the nav breakpoint; see the 1020px block. */
.nav-toggle{display:none}

@media (max-width:1020px){
 /* The bar wraps: logo and hamburger on the first row, the panel on the second. */
 .nav-in{flex-wrap:wrap;row-gap:0;padding:18px 24px}
 .nav-toggle{display:flex;order:3;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;padding:0 10px;background:none;border:0;cursor:pointer}
 .nav-toggle span{display:block;width:24px;height:1.5px;background:var(--ad-gold-soft);transition:transform 260ms,opacity 200ms}
 .nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
 .nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
 .nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
 .nav-links{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:18px;border-top:1px solid var(--ad-line-dk)}
 .nav.nav-open .nav-links{display:flex}
 .nav-links a{padding:16px 2px;font-size:15px;border-bottom:1px solid var(--ad-line-dk)}
 .nav-cta{order:2}
}

/* Below 620px the bar is logo and hamburger only; the call to action moves into
   the panel, where it gets a full-width tap target. */
@media (max-width:620px){
 .nav-cta{display:none;order:5;flex-basis:100%;width:100%;margin:18px 0 4px}
 .nav.nav-open .nav-cta{display:block}
}

@media (max-width:960px){
 .approach-grid,.founder-grid,.people,.model{grid-template-columns:1fr !important}
}

@media (max-width:820px){
 [style*="grid-template-columns"]{grid-template-columns:1fr !important}
 /* The statement keeps its scroll-driven reveals on mobile but loses the pin:
    stacked, the cards are taller than the viewport, so a sticky section would
    crop the heading. Each part instead animates against its own view timeline
    as it enters the screen, which is the same effect without the clipping. */
 .pin-wrap{height:auto !important;view-timeline:none}
 .pin-wrap>.pinned{position:static;min-height:0}
 #reality [style*="margin-top:150px"],#reality [style*="margin-top:130px"]{margin-top:0 !important}
 /* The gold service strip repeats the footer and the services page; it costs a
    full screen of scroll on a phone for nothing. */
 .strip{display:none}
 h1.ad-display{font-size:clamp(34px,9.5vw,46px) !important}
 .ad-display{text-wrap:balance}
 .sec{padding:64px 0 !important}
 .statement{padding:48px 24px !important;gap:28px !important}
 .wrap{padding-left:24px !important;padding-right:24px !important}
 /* The interstitial is a wide vista with the bather at 73% across and 65% down.
    At 58vh a phone covers to the middle half of the frame and cuts her off at
    the right edge, so the band is shortened and the crop biased toward her. */
 .interstitial img{height:40vh;object-position:68% 50%}
 .capture{flex-direction:column;align-items:stretch}
 .calendly-inline-widget{height:900px !important}
 img[style*="height:62%"]{position:absolute}
 /* .foot-in is a flex row, so it needs wrapping rather than column overrides:
    four unwrapped columns at 48px padding are what pushed the page wider than
    the viewport. */
 .foot-in{flex-wrap:wrap;gap:32px 24px;padding:0 24px}
 .foot-in>*:first-child{flex-basis:100%}
 .foot-col{flex:1 1 150px}
 .foot-base{padding:26px 24px 0}
}

@supports (animation-timeline: view()){
 @media (max-width:820px){
  .pin-wrap .st-a,.pin-wrap .st-b,.pin-wrap .st-c,.pin-wrap .st-d{
   animation:stmt-in both;
   animation-timeline:view();
   animation-range:entry 5% entry 65%;
  }
 }
}

@media (max-width:520px){
 .foot-in{flex-direction:column;gap:28px}
 .foot-base{flex-direction:column;gap:10px}
 [style*="font-size:clamp(120px,15vw,230px)"]{font-size:96px !important}
}