/* ============================================================
   SMB STEEL STRUCTURE — Responsive Stylesheet
   ============================================================ */

/* Large desktop down to laptop */
@media (max-width:1399px){
  .nav-cta{display:none}
}
@media (max-width:1200px){
  :root{--container:1040px}
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .counters{grid-template-columns:repeat(5,1fr)}
}

/* Laptop / small desktop — switch to hamburger before the menu can crowd */
/* 11-item menu needs more room — hamburger below 1300px */
@media (max-width:1300px){
  :root{--header-h:70px}
  .menu,.nav-cta{display:none}
  .menu-toggle{display:grid}
}
@media (max-width:1199px){
  :root{--header-h:70px}
  .pad{padding:84px 0}
  .pad-sm{padding:58px 0}
  .journey-grid{grid-template-columns:1fr;gap:48px}
  .journey-images{height:440px;max-width:560px;margin:0 auto}
  .peb-intro{grid-template-columns:1fr;gap:40px}
  .peb-cards{grid-template-columns:1fr 1fr}
  .message-block,.message-block.reverse{grid-template-columns:1fr;gap:36px}
  /* mobile: image always before message */
  .message-block .msg-photo,.message-block.reverse .msg-photo{order:-1}
  .message-block .msg-body,.message-block.reverse .msg-body{order:0}
  .msg-photo{max-width:440px;margin:0 auto}
  .units-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .counters{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .peb-hero{grid-template-columns:1fr;gap:34px}
  .kb-grid{grid-template-columns:repeat(4,1fr)}
}

/* Tablet */
@media (max-width:820px){
  .topbar .t-left span:nth-child(3){display:none}
  .trust-strip .container{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(2){border-right:0}
  .trust-item{border-top:1px solid rgba(255,255,255,.1)}
  .trust-item:nth-child(-n+2){border-top:0}
  .compare-row,.compare-row.head{grid-template-columns:1fr}
  .compare-row>div{border-left:0!important;border-top:1px solid var(--line)}
  .compare-row.head .c-prop{display:none}
  .compare-row .c-prop{background:var(--navy);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-top:0}
  .compare-row .c-peb::before{content:"PEB";font-family:var(--f-data);font-weight:700;color:var(--navy);margin-right:6px}
  .compare-row .c-conv::before{content:"Conventional";font-family:var(--f-data);font-weight:700;color:var(--grey);margin-right:6px}
  [data-theme="dark"] .compare-row .c-peb::before{color:var(--navy-2)}
  .contact-split{grid-template-columns:1fr}
  .contact-map iframe{min-height:340px}
  .peb-callouts{display:none}
  .peb-components{display:flex}
  .kb-bar{grid-template-columns:1fr;gap:18px}
  .kb-title{border-right:0;padding-right:0;border-bottom:2px solid rgba(255,255,255,.25);padding-bottom:14px;display:flex;align-items:baseline;gap:10px}
  .kb-title::after{display:none}
}

/* Mobile */
@media (max-width:640px){
  :root{--header-h:64px}
  .topbar{display:none}
  .hero{height:74vh;min-height:460px;max-height:660px}
  .scroll-cue{display:none}
  .msg-photo::before{inset:14px -10px -14px 10px}
  .message-block.reverse .msg-photo::before{inset:14px 10px -14px -10px}
  .hero-title{font-size:clamp(2rem,9vw,3rem)}
  .pad{padding:64px 0}
  .pad-sm{padding:48px 0}
  .section-head{margin-bottom:40px}
  .peb-cards{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .counters{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;text-align:center}
  .form-row{grid-template-columns:1fr}
  .reach,.contact-form{padding:26px}
  .journey-images{height:380px}
  .journey-images .badge b{font-size:1.9rem}
  .peb-ring{width:260px;height:260px}
  .peb-ring .core b{font-size:2.6rem}
  .hero .swiper-button-next,.hero .swiper-button-prev{display:none}
  .btn{padding:13px 24px;font-size:.85rem}
  .cta-banner .container{padding:64px 22px}
  .float-btn{width:48px;height:48px;font-size:1.15rem}
  .wa-menu{width:220px}
  .kb-grid{grid-template-columns:repeat(2,1fr)}
  .peb-figure{aspect-ratio:4/3}
}

@media (max-width:380px){
  .counters{grid-template-columns:1fr}
  .trust-strip .container{grid-template-columns:1fr}
  .trust-item{border-right:0}
}

/* ---- New pages: gallery / video / about ---- */
@media (max-width:1199px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .explore-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .profile-table th{width:40%}
}
@media (max-width:640px){
  .video-grid{grid-template-columns:1fr}
  .explore-grid{grid-template-columns:1fr 1fr}
  .lb-nav{width:44px;height:44px}
  .lb-prev{left:8px}.lb-next{right:8px}
  .lb-close{top:12px;right:14px}
  .gallery-filter{gap:8px}
  .filter-btn{padding:8px 16px;font-size:.82rem}
  .profile-table th,.profile-table td{padding:11px 13px;font-size:.9rem}
  .profile-table th{width:38%}
}
@media (max-width:380px){
  .gallery-grid{grid-template-columns:1fr}
  .explore-grid{grid-template-columns:1fr}
}

/* ---- New components responsive ---- */
@media (max-width:1199px){
  .industries-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:991px){
  .industries-grid{grid-template-columns:repeat(4,1fr)}
  .perks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .industries-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .topbar .t-left a:not(:first-child),.topbar .t-left span{display:none}
  .industries-grid{grid-template-columns:repeat(2,1fr)}
  .apply-card .form-row{grid-template-columns:1fr}
  .apply-card{padding:24px}
  .job-head{padding:18px}
  .job-inner{padding:0 18px 22px}
  .prod-jump a{padding:9px 16px;font-size:.82rem}
}

/* ---- Engineering process / product modal / policy responsive ---- */
@media (max-width:991px){
  .ep-track{display:flex;overflow-x:auto;gap:8px;padding-bottom:14px;scroll-snap-type:x mandatory}
  .ep-track::before{display:none}
  .ep-step{flex:0 0 132px;scroll-snap-align:center}
  .pm-grid{grid-template-columns:1fr}
  .pm-media img{min-height:200px;max-height:240px}
  .pm-body{padding:26px}
}
@media (max-width:640px){
  .ep-track{flex-direction:column;overflow:visible;gap:4px}
  .ep-track::before{display:block;top:6px;bottom:6px;left:35px;right:auto;width:3px;height:auto}
  .ep-step{flex:none;width:100%;display:flex;align-items:center;gap:18px;text-align:left;padding:8px 0}
  .ep-node{margin:0;flex-shrink:0}
  .ep-title{margin-top:0}
  .cta-inner{flex-direction:column;text-align:center;align-items:center;padding:38px 0}
  .policy-item{flex-direction:column;gap:14px}
}

/* ---- Achievements / trust / login responsive ---- */
@media (max-width:991px){
  .policy-trust{grid-template-columns:repeat(2,1fr)}
  .login-shell{grid-template-columns:1fr}
  .login-aside{display:none}
  .login-mobilelogo{display:inline-block}
}
@media (max-width:640px){
  .policy-trust{grid-template-columns:repeat(2,1fr)}
  .pdp-actions .btn{width:100%;justify-content:center}
  .rel-row .rel-card span{font-size:.82rem}
}

/* === SMB HERO-MOBILE v1 === */
/* Phones: shorter hero, no text, lighter veil for a clean image slider. */
@media (max-width:640px){
  .hero{height:46vh;min-height:320px;max-height:430px}
  .hero-content{display:none}
  .hero-slide .hero-veil{background:linear-gradient(0deg,rgba(8,16,30,.35),transparent 60%)}
}

/* === SMB MOBILE FIX v2 === */
@media (max-width:640px){
  /* hero a touch shorter */
  .hero{height:38vh;min-height:280px;max-height:360px}

  /* AOS scroll-animations must NEVER leave content invisible on phones */
  [data-aos]{opacity:1 !important;transform:none !important}

  /* journey: one clean image instead of the overlapping desktop collage */
  .journey-images{position:relative;height:auto;aspect-ratio:4/3;max-width:460px;margin:0 auto}
  .journey-images img{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--r-lg)}
  .journey-images .j2,.journey-images .j3{display:none}
  .journey-images .j1{border:0;box-shadow:var(--shadow-lg)}
  .journey-images .badge{right:6%;top:6%;padding:14px 18px}
  .journey-images .badge b{font-size:2rem}
}

/* === SMB MOBILE FIX v3 === */
@media (max-width:640px){
  /* journey: show ONE image at natural full width (no crop, no overlap) */
  .journey-images{position:relative;height:auto;aspect-ratio:auto;max-width:360px;margin:0 auto}
  .journey-images .j2,.journey-images .j3{display:none}
  .journey-images img.j1{position:relative;display:block;width:100%;height:auto;inset:auto;
    z-index:2;border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
  .journey-images .badge{z-index:4;right:6%;top:6%;padding:14px 18px}
  .journey-images .badge b{font-size:2rem}
}