/* =====================================================================
   AIPN v13 — responsive header (desktop / laptop / tablet / mobile)
   and scroll-performance overrides. Loaded last.
   ===================================================================== */

/* ---------- top bar: always one clean line ---------- */
.topbar .wrap{flex-wrap:nowrap!important;flex-direction:row!important;align-items:center!important;min-height:44px;padding-block:0!important;gap:18px}
.tb-l,.tb-r{flex-wrap:nowrap!important;min-width:0}
.tb-l a,.tb-r>span{white-space:nowrap}
.tb-r{margin-left:auto}
.tb-r>span:first-child{padding-left:16px}
.tb-r .tb-addr{padding-left:0}
@media (max-width:1499px){.topbar .tb-addr{display:none!important}.tb-r .tb-ph{padding-left:0}}
@media (max-width:1199px){.topbar .tb-gal{display:none!important}}
@media (max-width:1023px){.topbar .tb-mail{display:none!important}.tb-r .tb-ph{padding-right:0}}
@media (max-width:767px){
  .topbar .tb-l{display:none!important}
  .topbar .wrap{justify-content:center!important;min-height:38px}
  .tb-r{margin:0;font-size:13px!important}
  .tb-r .tb-ph{padding:0!important}
}
@media (max-width:360px){.tb-r{font-size:12px!important}.tb-r svg{display:none}}

/* ---------- main header row ---------- */
.site-header .hrow{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(12px,1.4vw,28px)}
.site-header .brand{flex:none}
.site-header .nav{flex:1 1 auto;min-width:0;justify-content:center;display:flex}
.hact{flex:none;display:flex;align-items:center;gap:10px;margin-left:0}
.hact .hphone{display:none!important}

/* Request Consultation only where there is room for it */
.hact .header-cta{display:none!important}
@media (min-width:1700px){.hact .header-cta{display:inline-flex!important}}

/* laptop widths: tighten the menu so it never collides */
@media (max-width:1439px){
  .site-header .brand img{height:52px}
  .nav>li>a{padding-inline:12px!important;font-size:13.5px!important}
}
@media (max-width:1279px){
  .site-header .brand img{height:46px}
  .nav>li>a{padding-inline:9px!important;font-size:13px!important;gap:6px!important}
  .nav>li>a .ni{width:22px;height:22px}
  .nav>li+li::before{height:30px;margin-top:-15px}
  .btn.hportal{padding:11px 16px!important;font-size:13px!important}
  .hverify{width:42px;height:42px}
}

/* tablet + mobile: burger menu */
@media (max-width:1120px){
  .site-header .nav{display:none!important}
  .burger{display:block!important;flex:none;margin-left:0!important}
  .hact{margin-left:auto}
  .site-header .hrow{min-height:76px!important}
  .site-header .brand img{height:46px!important}
  .hportal{display:inline-flex!important}
}
@media (max-width:599px){
  .hportal{display:none!important}
  .site-header .hrow{min-height:68px!important;gap:10px}
  .site-header .brand img{height:clamp(34px,10vw,42px)!important}
  .hverify,.burger{width:44px!important;height:44px!important}
  .burger span{left:12px!important;right:12px!important}
  .burger span:nth-child(1){top:16px!important}.burger span:nth-child(2){top:21px!important;right:18px!important}.burger span:nth-child(3){top:26px!important}
}

/* mobile menu extras */
.mnav{padding-top:calc(130px + env(safe-area-inset-top,0px))!important}
.mnav a.ml{font-size:clamp(22px,6vw,34px)!important;padding:9px 0!important}
.mnav .mpol{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.mnav .mpol a{color:var(--soft,#45506A);font-size:14px;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;opacity:.9}
.mnav .mpol a:hover{color:var(--lamp)}
.mnav .mcta{margin-top:18px;align-self:flex-start;--bg:var(--lamp)!important}
@media (max-width:599px){.mnav{padding-top:calc(116px + env(safe-area-inset-top,0px))!important}}

/* ---------- general responsiveness guards ---------- */
html,body{overflow-x:clip}
img,video{max-width:100%}
@media (max-width:767px){
  .pf2-tapes{height:70px!important}
}

/* ---------- smoother scrolling ---------- */
/* always-on paint/layout animations removed (they repaint every frame) */
.site-header::after,.htitle em,.cam .screen::after,.phero .pscan,.torch.lit,.srail-line,.bulletin .btag,.pw-fill,.pw-scan,.pf-word{animation:none!important}
.htitle em{background-position:0 0!important}
/* no permanent GPU layers on every card — only while hovered */
.tilt{will-change:auto!important;transform-style:flat!important}
.tilt:hover{will-change:transform}
/* skip rendering of sections that are far off-screen */
:root:not([data-page="services"]) main>section:not(:first-child),
:root:not([data-page="services"]) main>div.tape{content-visibility:auto;contain-intrinsic-size:auto 800px}
.wallsec,.manifesto{content-visibility:visible!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* keep logo + close button visible above the open mobile menu */
.menu-open .site-header{position:fixed!important;top:env(safe-area-inset-top,0px)!important;left:0;right:0;z-index:70!important;transform:none!important}
.menu-open .site-header .hrow{background:#fff}
.mnav{padding-top:calc(104px + env(safe-area-inset-top,0px))!important}
@media (max-width:599px){.mnav{padding-top:calc(92px + env(safe-area-inset-top,0px))!important}}
/* decorative loops that ran forever on screen — now static (hover effects kept) */
.hphoto img,.sfab-r::before,.sfab-t::after,.cta-band::before,.frame-cert .shine,.f-photo .scan,.blip::after,.hreticle .r,.hreticle .r2,.hcall .ic::before,.hcall .ic::after,.sr-wa .si::after{animation:none!important}
.sfab:hover .sfab-t::after{animation:ring 2.2s var(--ease) infinite!important}
/* sections out of view pause their animations */
.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
/* page fade-in without leaving <main> as one giant permanent layer */
.js main{animation:aipnFade .3s ease-out!important}
@keyframes aipnFade{from{opacity:0}}