/* iHUB STORES — fluid navigation, scroll motion and responsive QA refinements.
   These styles are loaded last to protect approved branding and artwork. */
:root{--nav-clearance:112px;--nav-ease:cubic-bezier(.2,.75,.25,1)}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-clearance);text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{overflow-x:clip}
#main,main,section,.container{min-width:0}
:where(section[id],#features,#ihub-features-grid,#top,#main,.journey-card[id]){scroll-margin-top:var(--nav-clearance)}
img{max-width:100%}
.site-header{transition:background .35s ease,padding .35s ease,box-shadow .35s ease;z-index:150!important}
.site-header.is-scrolled{padding-top:5px!important;background:rgba(249,253,255,.96)!important;box-shadow:0 8px 26px rgba(21,74,156,.075)}
.nav-shell{gap:clamp(8px,.85vw,16px)!important;transition:min-height .35s var(--nav-ease),padding .35s var(--nav-ease),box-shadow .35s var(--nav-ease),border-radius .35s var(--nav-ease);min-width:0}
.site-header.is-scrolled .nav-shell{min-height:66px;padding-block:8px!important;border-radius:20px;box-shadow:0 12px 33px rgba(21,92,183,.12)}
.desktop-nav{gap:clamp(10px,1.25vw,23px)!important;min-width:0}
.desktop-nav a{position:relative;transition:color .25s ease,transform .28s ease}
.desktop-nav a::after{content:"";position:absolute;right:0;left:0;bottom:3px;height:3px;background:linear-gradient(90deg,#03abf7,#0465f0);border-radius:999px;transform:scaleX(0);transform-origin:center;transition:transform .36s var(--nav-ease)}
.desktop-nav a:hover,.desktop-nav a.nav-current{color:#065bd8!important;transform:translateY(-1px)}
.desktop-nav a:hover::after,.desktop-nav a.nav-current::after{transform:scaleX(1)}
.desktop-nav .nav-home:not(.nav-current)::after{transform:scaleX(0)}
.nav-scroll-progress{position:absolute;bottom:-1px;left:0;right:0;height:3px;z-index:3;pointer-events:none;overflow:hidden}
.nav-scroll-progress>span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#08b5ff,#0265ec);transform:scaleX(var(--page-progress,0));transform-origin:left;will-change:transform}
.event-nav-link{flex:0 0 auto;white-space:nowrap;text-decoration:none;background:#edf7ff;color:#0755bc;border:1px solid #bedfff;border-radius:999px;padding:10px 13px;font-weight:800;font-size:12px;transition:background .3s,transform .3s,box-shadow .3s}
.event-nav-link:hover,.event-nav-link:focus-visible{background:#d9f0ff;transform:translateY(-2px);box-shadow:0 7px 18px #0c6bd521}
.mobile-event-link{background:#e7f4ff;color:#0858c8!important;border:1px solid #b7d9fa;font-weight:800}
.brochure-cta:focus-visible,.mobile-nav a:focus-visible,.desktop-nav a:focus-visible{outline-offset:4px}
/* Entering viewport: opacity/position only; existing scene/carousel animations are untouched. */
.inview-target{transition:opacity .85s var(--nav-ease),transform .9s var(--nav-ease)}
.inview-target:not(.is-visible){opacity:0;transform:translateY(24px)}
.inview-target.is-visible{opacity:1;transform:none}
.motion-item{opacity:1;transform:none}
.motion-enabled .motion-item.motion-pending{opacity:0;transform:translate3d(0,28px,0);transition:opacity .78s ease,transform .8s var(--nav-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-enabled .motion-item.motion-pending.motion-visible{opacity:1;transform:translate3d(0,0,0)}
:where(.journey-card,.v7-showcase-card,.ai-showcase-card,.ihfg__card,.hero-phase-card){transition:transform .35s var(--nav-ease),box-shadow .35s ease,border-color .35s ease}
@media(hover:hover) and (pointer:fine){
 .journey-card:hover,.hero-phase-card:hover{transform:translateY(-5px);box-shadow:0 17px 32px #0a68ce20}
 .nav-shell .brand:hover,.capital-brand:hover{filter:drop-shadow(0 4px 6px rgba(28,104,195,.15))}
}
/* Subtle emphasis on each operational stage as it enters view. */
.journey-flow a{transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.journey-flow a:hover,.journey-flow a:focus-visible{transform:translateY(-3px);box-shadow:0 10px 25px rgba(14,100,212,.13)}
/* Larger desktop: maintain balance with two brand logos and CTA. */
@media(max-width:1380px){
 .nav-shell .brand{width:clamp(170px,16vw,230px)}
 .capital-brand{width:clamp(112px,10vw,150px)!important}
 .nav-shell{padding-inline:15px!important}
 .desktop-nav a{font-size:clamp(11px,1vw,13px)!important}
 .brochure-cta-desktop{padding:9px 12px!important;font-size:11px!important}
}
/* Tablet / compact desktop navigation: move labels into an actual accessible menu. */
@media(max-width:1279px){
 .desktop-nav,.event-nav-link{display:none!important}
 .menu-btn{display:block!important;flex:0 0 40px;width:40px;height:40px;position:relative;transition:background .2s ease,transform .25s ease}
 .menu-btn:hover{background:#e7f3ff;transform:translateY(-1px)}
 .header-actions{margin-inline-start:auto;gap:clamp(5px,.8vw,11px)}
 .nav-shell .brand{width:clamp(162px,21vw,235px)}
 .capital-brand{width:clamp(105px,14vw,154px)!important}
 .mobile-nav:not([hidden]){display:grid;gap:5px;animation:navPanelEnter .36s var(--nav-ease) both;transform-origin:top center;box-shadow:0 18px 38px #1053a423}
 .mobile-nav{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);width:min(650px,calc(100% - 26px));border:1px solid #d9e9f8;border-radius:20px;background:#fff;padding:12px;z-index:151;max-height:min(75dvh,660px);overflow-y:auto}
 .mobile-nav a{font-size:14px;line-height:1.45;padding:13px 17px!important;transition:background .2s,color .2s,padding .2s}
 .mobile-nav a:hover,.mobile-nav a.nav-current{background:#e9f5ff;color:#075ade;padding-inline-start:22px!important}
 .mobile-event-link{display:block}
}
@media(min-width:1280px){.mobile-event-link{display:none}}
@keyframes navPanelEnter{from{opacity:0;translate:0 -10px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
/* Tablet widths: no oversized hero / 2-column squeeze. */
@media(min-width:741px) and (max-width:1020px){
 .hero-layout{gap:24px!important;min-height:525px!important;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr)!important;width:calc(100% - 54px)!important}
 .hero-copy{padding-inline:8px!important;max-width:100%!important}
 .hero-copy #hero-title,[dir=rtl] .hero-copy #hero-title{font-size:clamp(32px,4.2vw,46px)!important;line-height:1.35!important}
 .hero-sub{font-size:clamp(13px,1.6vw,16px)!important}
 .hero-visual{min-height:460px!important}
 .hero-bot-large{width:clamp(220px,30vw,315px)!important}
 .hero-phase-card{min-width:0!important}
 .section-heading h2{font-size:clamp(32px,4.2vw,50px)!important}
}
@media(max-width:900px){
 :root{--nav-clearance:94px}
 .brochure-cta-desktop{display:none!important}
 .nav-shell{width:calc(100% - 26px)!important;padding:8px 13px!important;min-height:65px!important}
 .site-header{padding-top:8px!important}
 .nav-shell .brand{width:clamp(154px,24vw,225px)}
 .capital-brand{width:clamp(100px,15vw,130px)!important;padding-left:8px!important}
 .journey-flow{max-width:100%}
 .section{padding-block:clamp(58px,7vw,84px)!important}
 .section-heading h2{max-width:100%;font-size:clamp(31px,4.5vw,48px)!important;line-height:1.28!important}
 .v7-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px}
 .v7-showcase-card{min-height:0!important}
 .v7-showcase-image{height:205px!important;flex-basis:205px!important}
 .station-v6 .station-shell,.network-v6 .network-original-stage{max-width:100%}
 .ai-visual-stage{max-width:100%}
 .ask-shell{grid-template-columns:1fr!important;min-height:0!important}
 .ask-image{min-height:320px!important;max-height:440px}
 .ask-panel{padding:clamp(20px,4vw,34px)!important}
}
@media(max-width:740px){
 :root{--nav-clearance:84px}
 .container{width:calc(100% - 30px)!important;max-width:100%}
 .site-header{padding-top:6px!important}
 .nav-shell{width:calc(100% - 18px)!important;padding:8px 10px!important;gap:5px!important;border-radius:17px;min-height:62px!important}
 .nav-shell .brand{width:clamp(113px,33vw,185px)!important;min-width:0}
 .nav-shell .brand img{max-height:42px}
 .capital-brand{width:clamp(77px,19vw,116px)!important;max-width:none!important;min-height:30px!important;padding-left:5px!important}
 .capital-brand img{max-height:33px!important}
 .lang-switch{font-size:10px!important;padding:8px 7px!important;min-height:36px}
 .menu-btn{flex:0 0 36px;width:36px!important;height:36px!important;padding:8px 7px!important}
 .header-actions{gap:5px!important}
 .mobile-nav{top:calc(100% + 3px)}
 .section{padding-block:clamp(48px,9vw,72px)!important}
 .section-heading h2{font-size:clamp(27px,7vw,41px)!important;line-height:1.28!important}
 .section-heading p{font-size:clamp(13px,3.45vw,16px)!important;line-height:1.75!important}
 .section-eyebrow{font-size:10px!important;letter-spacing:.055em!important}
 .hero{padding-top:20px!important;min-height:0!important}
 .hero-layout{min-height:0!important;gap:0!important}
 .hero-copy h1{max-width:100%!important;overflow-wrap:break-word}
 .hero-copy #hero-title{font-size:clamp(27px,7vw,41px)!important}
 [dir=rtl] .hero-copy #hero-title{font-size:clamp(27px,7vw,39px)!important}
 .hero-copy .hero-sub{font-size:clamp(13px,3.5vw,15px)!important;line-height:1.76!important}
 .hero-benefits{gap:8px 10px!important;font-size:clamp(10px,2.7vw,12px)!important}
 .hero-visual{height:clamp(270px,81vw,390px)!important;min-height:0!important}
 .hero-bot-large{width:clamp(175px,55vw,285px)!important}
 .hero-stage-footer .hero-phase-strip{gap:7px!important;width:100%;min-width:0}
 .hero-stage-footer .hero-phase-card{min-width:0;flex:1 1 0;padding:10px 5px!important;gap:3px!important;min-height:76px!important}
 .hero-stage-footer .hero-phase-card strong{font-size:clamp(10px,2.65vw,13px)!important;overflow-wrap:anywhere}
 .hero-stage-footer .hero-phase-card small{font-size:9px!important;line-height:1.3}
 .journey-grid{grid-template-columns:minmax(0,1fr)!important}
 .journey-card,.journey-photo,.journey-photo img{max-width:100%}
 .network-original-stage{width:100%!important;padding-block:3px!important;overflow:visible!important}
 .network-original-stage .network-vector{width:100%!important;height:auto!important;object-fit:contain!important}
 .v7-showcase-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 .v7-showcase-image{height:clamp(184px,57vw,250px)!important;flex-basis:clamp(184px,57vw,250px)!important;padding:10px!important}
 .v7-showcase-image img{width:100%;height:100%;object-fit:contain!important}
 .v7-showcase-body{min-height:0!important;padding:15px 17px 18px}
 .v7-showcase-body h4{font-size:18px!important}
 .showcase-heading{flex-wrap:wrap;gap:12px}
 .showcase-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
 .ai-showcase-image{min-height:180px!important;height:180px!important;padding:9px!important}
 .ai-showcase-image img{object-fit:contain!important}
 .ai-carousel{--visible:1}
 .station-v6 .station-stage>svg.station-illustration-v7{height:auto!important;min-height:0!important;aspect-ratio:1400/715!important;overflow:visible}
 .station-v6 .station-insight{max-width:126px!important}
 .station-v6 .station-topline{flex-wrap:wrap;gap:9px}
 .ai-visual-stage{min-height:clamp(270px,80vw,380px)!important}
 .ask-shell{grid-template-columns:1fr!important;min-height:0!important}
 .ask-image{min-height:clamp(230px,63vw,330px)!important}
 .ask-panel{padding:18px!important}
 .ask-voice{gap:8px!important}
 .wave-bars{width:clamp(51px,16vw,100px)!important;gap:3px!important}
 .mic-button{width:clamp(72px,22vw,92px)!important;height:clamp(72px,22vw,92px)!important}
 .prompt-chips button{font-size:11px;line-height:1.5}
 .footer-top,.end-inner{flex-wrap:wrap!important}
 .footer-owner{justify-content:center}
}
@media(max-width:390px){
 .nav-shell .brand{width:clamp(108px,32vw,129px)!important}
 .capital-brand{width:clamp(72px,19vw,84px)!important}
 .lang-switch{font-size:9px!important;padding:8px 5px!important}
 .menu-btn{flex-basis:34px;width:34px!important;height:34px!important}
 .hero-stage-footer .hero-phase-card small{display:none}
 .hero-stage-footer .hero-phase-card{min-height:60px!important}
}
@media(max-width:340px){
 .nav-shell{padding:8px 7px!important}
 .nav-shell .brand{width:103px!important}
 .capital-brand{width:70px!important}
 .lang-switch{font-size:9px!important}
 .header-actions{gap:3px!important}
 .menu-btn{flex-basis:32px;width:32px!important}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .motion-enabled .motion-item.motion-pending{opacity:1!important;transform:none!important;transition:none!important}
 .inview-target,.inview-target:not(.is-visible){opacity:1!important;transform:none!important;transition:none!important}
 .nav-scroll-progress>span{will-change:auto}
 .mobile-nav:not([hidden]){animation:none}
 .site-header,.nav-shell,.desktop-nav a,.desktop-nav a::after{transition:none!important}
}