/* KSBC public website responsive layer.
   This file intentionally excludes the Admin, Client, Partner and NDA portals. */
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
img,video{height:auto}
button,a,input,select,textarea{touch-action:manipulation}

@media (max-width:1024px){
  .about-grid,.careers-intro{grid-template-columns:1fr!important;gap:40px!important}
  .about-img img{height:380px!important}
  .careers-intro{margin-bottom:52px!important}
  .job-card{padding:24px!important}
  .section{padding-top:64px!important;padding-bottom:64px!important}
}

@media (max-width:820px){
  .nav-inner{padding-left:24px!important;padding-right:24px!important}
  .page-hero,.pg-hero{padding-top:104px!important;padding-bottom:56px!important}
  .page-hero-inner,.pg-hero-inner,.pg-inner,.clients-inner,.featured-inner,
  .article-wrap,.feed-inner,.gallery-inner,.article-inner,.sec-inner,
  .exp-inner,.why-inner,.insights-inner,.cta-band-inner,.contact-inner,
  .cta-inner,.footer-inner{
    padding-left:32px!important;
    padding-right:32px!important
  }
  .f-row{grid-template-columns:1fr!important}
  .jobs-header{align-items:flex-start!important;gap:16px!important;flex-direction:column!important}
  .job-card{grid-template-columns:1fr!important}
  .job-card .btn-s,.job-card .btn-p{justify-self:start}
}

@media (max-width:640px){
  :root{--nav-h:60px}
  .nav-inner{padding-left:16px!important;padding-right:16px!important}
  .nav-logo img{width:32px!important;height:32px!important}
  .nav-logo-text{font-size:12px!important}
  #mob-menu{padding:18px 22px 28px!important}
  .mob-link{font-size:18px!important;padding:15px 0!important}
  .page-hero,.pg-hero{padding-top:92px!important;padding-bottom:44px!important}
  .page-hero-inner,.pg-hero-inner,.pg-inner,.clients-inner,.featured-inner,
  .article-wrap,.feed-inner,.gallery-inner,.article-inner,.sec-inner,
  .exp-inner,.why-inner,.insights-inner,.cta-band-inner,.contact-inner,
  .cta-inner,.footer-inner,.inner{
    padding-left:20px!important;
    padding-right:20px!important
  }
  .section{padding-top:52px!important;padding-bottom:52px!important}
  .page-title{font-size:clamp(36px,12vw,52px)!important;overflow-wrap:anywhere}
  .about-grid,.careers-intro{gap:28px!important}
  .about-img img{height:300px!important}
  .values-grid{grid-template-columns:1fr!important;margin-top:36px!important}
  .job-card{padding:20px!important;gap:18px!important}
  .job-meta{gap:7px!important}
  .open-box{padding-left:18px!important;padding-right:18px!important}
  #modal{padding:12px!important}
  #modal>div{padding:38px 20px 24px!important;margin:18px auto!important}
  #modal form>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .contact-grid,.founders-row,.svc-block-inner,.team-grid,.team-sub-grid,
  .feat-card,.article-wrap{grid-template-columns:1fr!important}
  .svc-block{padding:50px 0!important}
  .svc-img img{height:240px!important}
  .t-img,.t-img-sub{height:auto!important;min-height:0!important}
  .t-img img,.t-img-sub img{width:100%!important;height:auto!important;object-fit:contain!important}
  .agg-strip{grid-template-columns:1fr!important}
  .agg-cell,.ts-card,.sector-tile{padding:24px 20px!important}
  .step{grid-template-columns:34px 1fr!important;gap:14px!important;padding:34px 0!important}
  .model-grid,.feed-grid,.problem-list,.also-grid{grid-template-columns:1fr!important}
  .client-block{gap:28px!important;padding:42px 0!important}
  .feat-body{padding:30px 22px!important}
  .feat-meta{align-items:flex-start!important;gap:12px!important;flex-direction:column!important}
  .gallery-grid{grid-template-columns:1fr!important;grid-template-rows:none!important}
  .gallery-main,.gallery-side{grid-column:auto!important;grid-row:auto!important;height:240px!important}
  .hero-main,.serve-top,.svc-header,.contact-grid,.xb-grid,.mou-grid{grid-template-columns:1fr!important}
  .hero-text{padding-left:20px!important;padding-right:20px!important}
  .hero-visual{height:280px!important}
  .hero-strip,.hero-quals,.cta-options{grid-template-columns:1fr!important}
  .hero-bottom,.insights-top,.cta-inner,.footer-bot{align-items:flex-start!important;flex-direction:column!important}
  .hero-ctas,.hero-ctas a,.cta-btns,.cta-btns a{width:100%!important}
  .hero-ctas a,.cta-btns a{text-align:center}
  .serve-grid,.why-grid,.ind-grid,.exp-grid{grid-template-columns:1fr!important}
  .svc-row{grid-template-columns:36px 1fr!important}
  .svc-row-desc,.svc-row-arrow{grid-column:2!important}
  .footer-top{grid-template-columns:1fr!important}
}

@media (max-width:380px){
  .nav-logo-text{display:none!important}
  .page-hero-inner,.pg-hero-inner,.pg-inner,.clients-inner,.featured-inner,
  .article-wrap,.feed-inner,.gallery-inner,.article-inner,.sec-inner,
  .exp-inner,.why-inner,.insights-inner,.cta-band-inner,.contact-inner,
  .cta-inner,.footer-inner,.inner{
    padding-left:16px!important;
    padding-right:16px!important
  }
}

/* ─── TABLET REPAIR (641–1024px) ────────────────────────────────────────
   Reported on a 12.4" tablet: the right-hand hero cards, the "Schedule a
   Discovery Call" button and part of the image mosaic were cut off with no
   way to scroll to them.

   Cause: grid and flex children default to min-width:auto, so a track can
   never shrink below its content's min-content width. The four-column
   .hero-strip only collapses at 640px, so between 641px and 1024px its
   min-content width (4 padded cells) exceeded the screen and stretched the
   whole .hero grid past the viewport. The html{overflow-x:hidden} rule at the
   top of this file then clipped the excess instead of letting it scroll —
   which is why the content was unreachable rather than merely awkward.

   Fixed at the cause (let the tracks shrink, collapse the strip earlier),
   not by widening the clip. */
.hero,.hero-main,.hero-text,.hero-visual,.hero-bottom,.hero-ctas,
.hero-quals,.hq,.hero-strip,.hs-cell,.svc-row,.serve-grid,.why-grid,
.ind-grid,.exp-grid,.mou-grid,.footer-top{min-width:0}
.hs-lbl,.hq-txt,.hero-sub{overflow-wrap:anywhere}

@media (max-width:1024px){
  /* two rows of two instead of one row of four */
  .hero-strip{grid-template-columns:1fr 1fr!important}
  .hs-cell{padding:16px 22px!important}
  .hs-cell:nth-child(2n){border-right:none!important}
  .hs-cell:nth-child(-n+2){border-bottom:1px solid var(--border)!important}

  /* the CTA column refused to shrink (flex-shrink:0 + nowrap buttons), so it
     pushed itself off-screen rather than wrapping under the caption */
  .hero-bottom{flex-direction:column!important;align-items:stretch!important;gap:18px!important}
  .hero-sub{max-width:none!important}
  .hero-ctas{flex-direction:row!important;flex-wrap:wrap!important;gap:10px!important}
  .hero-ctas .btn-p,.hero-ctas .btn-s{flex:1 1 auto;min-width:200px}

  .hero-text{padding:44px 32px 36px!important}
  .hero-headline{font-size:clamp(34px,5.4vw,50px)!important}
}

/* Five nav groups plus the language switcher and Contact button no longer fit
   comfortably once Portal was added; hand over to the burger earlier. The
   mobile menu already carries every entry including Portal. */
@media (max-width:900px){
  .nav-links{display:none!important}
  .nav-burger{display:flex!important}
}

@media (max-width:820px){
  .svc-row{grid-template-columns:56px 1fr!important;gap:14px!important}
  .svc-row-desc,.svc-row-arrow{display:none!important}
  .hero-visual{height:300px!important}
}