/* Global technical + responsive hardening */
/* Social links: Instagram https://www.instagram.com/na_engineering.co/ */
html,body,#root{width:100%;max-width:100%;min-height:100%;overflow-x:hidden}html{-webkit-text-size-adjust:100%}body{margin:0}*,*::before,*::after{box-sizing:border-box}img,svg,video,canvas{max-width:100%}img{height:auto}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid #f4a261;outline-offset:3px}
.site-header{width:100%}.site-container{max-width:1180px;width:min(1180px,calc(100% - 48px))}.hero,.page-intro,.section,.dark-section,.cta,.footer{max-width:100%;overflow:hidden}
@media(max-width:1000px){.site-container{width:min(100% - 40px,900px)}.nav-links{gap:16px;font-size:11px}.split,.detail-grid,.industry-feature,.contact-grid{grid-template-columns:1fr;gap:45px}.cap-grid,.supply-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.process-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}.detail-image{height:460px}}
@media(max-width:800px){.site-container{width:calc(100% - 32px);max-width:none}.site-header{height:70px}.nav-wrap{min-width:0}.logo{min-width:0}.logo-img{height:42px}.logo-text{min-width:0}.logo b{font-size:10px}.logo small{font-size:8px}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0}.nav-links{display:none;position:absolute;left:16px;right:16px;top:70px;z-index:50;flex-direction:column;align-items:stretch;gap:0;padding:8px;background:#0a1128;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 35px rgba(0,0,0,.25)}.nav-links.open{display:flex}.nav-links a{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.08)}.nav-links a:last-child{border-bottom:0}.hero{min-height:620px}.hero-content{min-height:620px;padding:70px 0 90px}.hero h1,.page-intro h1{font-size:clamp(38px,11vw,56px);word-break:normal;overflow-wrap:anywhere}.hero p,.page-intro p{font-size:15px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{justify-content:center}.hero-note{display:none}.hero-scroll{bottom:18px}.section{padding:70px 0}.page-intro{padding:65px 0 60px}.split,.detail-grid,.mission-grid,.industry-feature,.contact-grid{grid-template-columns:1fr;gap:35px}.value-grid,.cap-grid,.supply-grid,.industry-grid{grid-template-columns:1fr}.value-card{min-height:125px}.service-list{gap:48px}.service-row{grid-template-columns:1fr;gap:28px}.service-row:nth-child(even) .service-image{order:initial}.service-image{height:300px}.detail-image{height:330px}.process{margin-top:55px}.process-grid{grid-template-columns:1fr 1fr}.process-grid>div{border-right:0;border-bottom:1px solid var(--line)}.industry-feature img{height:300px}.section-heading{display:block}.section-heading p{margin-top:15px}.contact-grid{gap:30px}.form-grid{grid-template-columns:1fr}.quote-form{padding:24px}.map-card{height:190px}.footer{min-height:0!important;height:auto!important;margin-bottom:0!important;padding-bottom:0}.footer-grid{grid-template-columns:1fr!important;gap:35px}.footer-bottom{margin-bottom:0!important;padding-bottom:max(18px,env(safe-area-inset-bottom))}.footer-bottom .site-container{display:flex;flex-direction:column;gap:8px}}
@media(max-width:420px){.site-container{width:calc(100% - 24px)}.site-header{height:64px}.nav-links{top:64px;left:12px;right:12px}.logo-img{height:38px}.hero{min-height:590px}.hero-content{min-height:590px}.section{padding:58px 0}.page-intro{padding:55px 0 48px}.page-intro h1,.hero h1{font-size:clamp(34px,12vw,48px)}.process-grid{grid-template-columns:1fr}.service-image,.industry-feature img,.detail-image{height:270px}.supply-card{padding-left:20px;padding-right:20px}.supply-card-image{margin-left:-20px;margin-right:-20px}}
@supports(padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}

/* Mobile stability/performance hardening */
html,body,#root{max-width:100%;overflow-x:clip}body{overscroll-behavior-x:none;-webkit-overflow-scrolling:touch}.App{width:100%;max-width:100%;overflow-x:clip}.site-container>*{max-width:100%}
@media (max-width:800px){
  .site-header,.nav-wrap,.hero,.hero-content,.page-intro,.section,.cta,.footer{width:100%;max-width:100%;}
  .hero-bg{background-image:linear-gradient(90deg,rgba(10,17,40,.97) 8%,rgba(10,17,40,.82) 55%,rgba(10,17,40,.3)),url('https://images.unsplash.com/photo-1508450859948-4e04fabaa4ea?auto=format&fit=crop&w=900&q=55')}
  .hero:after{display:none}
  .marquee-track{animation:none!important;transform:none!important;width:auto;gap:28px;overflow:hidden}
  .marquee-track span{font-size:25px}
  .mask-line{max-width:100%;overflow:hidden}
  .hero h1,.page-intro h1,.section-heading h2,.split h2,.cta h2,.service-copy h2,.detail-grid h2,.industry-feature h2{overflow-wrap:anywhere;word-break:normal}
  .service-row,.split,.detail-grid,.mission-grid,.industry-feature,.contact-grid,.about-feature,.people-grid{min-width:0}
  .service-copy,.about-feature-copy,.people-copy,.contact-info,.quote-form{min-width:0;max-width:100%}
  .feature-list li,.contact-line,.footer-grid a,.footer-grid span{min-width:0;overflow-wrap:anywhere}
  .button{max-width:100%;white-space:normal;text-align:center}
  .cap-card,.supply-card,.client-card,.project-card,.testi-card,.gallery-item,.value-card{min-width:0;max-width:100%}
  .chat-widget{max-width:calc(100vw - 20px)}
  .chat-panel{max-width:calc(100vw - 28px)}
  .chat-msg{overflow-wrap:anywhere}
  .footer-grid{min-width:0}
  .footer-email-lead{overflow-wrap:anywhere}
  .people-grid,.promise-grid,.clients-grid,.projects-grid,.stats-grid,.why-grid,.gallery-grid,.testi-grid,.logos-row{min-width:0;max-width:100%}
  [style*="width:"]{max-width:100%!important}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media (max-width:480px){
  .logo-text{max-width:150px;overflow:hidden}.logo b,.logo small{white-space:nowrap}
  .hero-content{padding-top:56px!important;padding-bottom:72px!important}
  .page-intro h1{line-height:1.05}
  .section-heading h2,.split h2,.cta h2{font-size:32px!important}
  .service-copy h2,.detail-grid h2,.industry-feature h2{font-size:30px!important}
  .about-feature-image{height:300px!important}
  .chat-widget{right:10px!important;bottom:10px!important}
}

/* Final mobile paint/layout optimization */
@media (max-width:800px){
  .section,.dark-section,.page-intro,.cta,.footer{contain:layout paint;}
  .service-row,.supply-card,.client-card,.project-card,.value-card,.testi-card,.gallery-item,.cap-card{contain:layout paint;}
  .service-image,.detail-image,.industry-feature img,.supply-card-image,.about-feature-image{content-visibility:auto;contain-intrinsic-size:300px 270px;}
  .hero-bg{background-attachment:scroll!important;}
  *{scroll-margin-top:76px;}
}
@media (max-width:480px){
  .section,.dark-section,.page-intro,.cta{contain:layout paint style;}
  .chat-panel{max-height:calc(100dvh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
}

/* Mobile footer bottom-gap fix */
@media (max-width:800px){
  html,body,#root{min-height:0!important;height:auto!important;}
  body{height:auto!important;margin:0!important;}
  #root,.App{min-height:0!important;height:auto!important;}
  .footer{contain:layout paint!important;min-height:0!important;height:auto!important;margin-bottom:0!important;}
  .footer-bottom{margin-bottom:0!important;}
}

/* Premium navigation hover */
.nav-links a{position:relative;display:inline-flex;align-items:center;padding:8px 0;color:#c6ceda;transition:color .25s ease;text-decoration:none}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.nav-links a:hover,.nav-links a:focus-visible{color:#fff}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a.active,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a.active::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
@media(max-width:800px){.nav-links a{display:flex;padding:13px 12px}.nav-links a::after{display:none}.nav-links a:hover,.nav-links a:focus-visible{color:#fff}.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--amber)}}
@media(prefers-reduced-motion:reduce){.nav-links a,.nav-links a::after{transition:none!important}}

/* Restore normal page-intro sizing across all pages */
@media(min-width:801px){
  .page-intro{padding:72px 0 68px!important;}
  .page-intro h1{font-size:clamp(38px,4.2vw,58px)!important;line-height:1.04!important;max-width:820px!important;letter-spacing:-.045em!important;margin:14px 0 16px!important;}
  .page-intro p{max-width:700px!important;font-size:16px!important;line-height:1.65!important;}
}
@media(max-width:800px){
  .page-intro h1{font-size:clamp(34px,9vw,48px)!important;line-height:1.05!important;}
}



/* ===== FINAL VERIFIED RESPONSIVE SYSTEM ===== */
/* The site uses .site-container so Tailwind's .container utility cannot override it. */
.site-container{
  width:min(1180px,calc(100% - 48px));
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

/* Keep the shared navigation in normal document flow; sticky keeps it visible without covering content. */
.site-header{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  height:78px!important;
}

/* Service/supply listing pages: remove the excessive empty band above the first row. */
.service-list-page{
  padding-top:58px!important;
}
.service-list-page .service-list{
  padding-top:0!important;
}

/* Desktop / large PC */
@media (min-width:1201px){
  .site-container{width:min(1180px,calc(100% - 64px))}
  .service-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .service-image{height:390px}
}

/* Standard laptops */
@media (max-width:1200px){
  .site-container{width:calc(100% - 48px)}
  .nav-links{gap:18px}
}

/* Tablet landscape / small laptops */
@media (max-width:1050px){
  .site-header{height:72px!important}
  .nav-wrap{height:72px}
  .menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px}
  .nav-links{
    display:none;
    position:absolute;
    top:72px;
    left:16px;
    right:16px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px;
    background:#0a1128;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 35px rgba(0,0,0,.25);
    z-index:1002;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-links a:last-child{border-bottom:0}
  .split,.detail-grid,.industry-feature,.mission-grid,.contact-grid{grid-template-columns:1fr;gap:42px}
  .cap-grid,.supply-grid,.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
  .service-image{height:330px}
  .detail-image{height:420px}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr;gap:32px}
}

/* Tablet portrait */
@media (max-width:800px){
  .site-container{width:calc(100% - 32px);max-width:none}
  .site-header{height:70px!important}
  .nav-wrap{height:70px}
  .nav-links{top:70px;left:12px;right:12px}
  .logo-img{height:42px}
  .logo-text{min-width:0}
  .hero,.hero-content{min-height:620px}
  .hero-content{padding:78px 0 82px}
  .hero h1{font-size:clamp(38px,8vw,56px);line-height:1.05}
  .hero p{font-size:15px;line-height:1.7}
  .hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;transform:none!important}
  .hero-actions .button{width:100%;justify-content:center}
  .hero-note,.hero-scroll{display:none}
  .section{padding:72px 0}
  .page-intro{padding:62px 0 56px}
  .page-intro h1{font-size:clamp(36px,9vw,52px)}
  .section-heading{display:block}
  .section-heading p{margin-top:12px;max-width:680px}
  .section-heading .button{margin-top:16px}
  .cap-grid,.supply-grid,.industry-grid{grid-template-columns:1fr 1fr}
  .value-grid{grid-template-columns:1fr 1fr}
  .service-list-page{padding-top:52px!important}
  .service-row{grid-template-columns:1fr;gap:28px}
  .service-row:nth-child(even) .service-image{order:0}
  .service-image{height:300px}
  .detail-image{height:330px}
  .process-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:6px}
}

/* Phone */
@media (max-width:600px){
  .site-container{width:calc(100% - 28px)}
  .site-header{height:66px!important}
  .nav-wrap{height:66px}
  .nav-links{top:66px}
  .logo-img{height:39px}
  .logo b{font-size:10px}
  .logo small{font-size:7px;letter-spacing:.21em}
  .hero,.hero-content{min-height:600px}
  .hero-content{padding:70px 0 68px}
  .hero h1{font-size:clamp(34px,10vw,48px)}
  .hero p{font-size:14px;line-height:1.72}
  .section{padding:58px 0}
  .page-intro{padding:54px 0 50px}
  .page-intro h1{font-size:clamp(34px,10vw,46px);overflow-wrap:anywhere}
  .page-intro p{font-size:14px}
  .split h2,.section-heading h2,.cta h2{font-size:32px}
  .lead{font-size:15px}
  .value-grid,.cap-grid,.supply-grid,.industry-grid{grid-template-columns:1fr}
  .value-card{min-height:118px}
  .cap-card{min-height:260px}
  .service-list-page{padding-top:44px!important}
  .service-list{gap:48px}
  .service-image{height:250px}
  .service-copy h2,.detail-grid h2,.contact-info h2,.form-head h2{font-size:clamp(28px,8vw,38px)}
  .service-features{display:grid;gap:10px}
  .detail-grid{gap:30px}
  .detail-image{height:250px}
  .process-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .quote-form{padding:20px}
  .map-card{height:185px}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
  .footer-bottom{display:flex;flex-direction:column;gap:6px;margin-top:40px}
  .chat-widget{right:10px;bottom:10px}
  .chat-toggle{width:50px;height:50px}
  .chat-panel{width:calc(100vw - 20px);height:min(480px,calc(100dvh - 92px));max-height:none}
  .button{width:100%;justify-content:center}
}

/* Small phones */
@media (max-width:420px){
  .site-container{width:calc(100% - 20px)}
  .site-header{height:64px!important}
  .nav-wrap{height:64px}
  .nav-links{top:64px}
  .logo-img{height:37px}
  .hero,.hero-content{min-height:570px}
  .hero-content{padding:66px 0 62px}
  .hero h1{font-size:32px}
  .hero p{font-size:13px}
  .page-intro h1{font-size:34px}
  .service-image{height:235px}
  .detail-image{height:235px}
  .section{padding:52px 0}
  .service-list-page{padding-top:40px!important}
}

/* Never let long content create horizontal scroll. */
.site-container > *, .site-container img, .site-container svg, .site-container video, .site-container canvas{
  max-width:100%;
}
.service-row,.split,.detail-grid,.industry-feature,.mission-grid,.contact-grid,.footer-grid{
  min-width:0;
}
.service-copy,.detail-grid>div,.industry-feature>div,.split>div{
  min-width:0;
}