/* =========================================================
   FINAL MOBILE UI/UX OVERRIDES
   Home mobile hero is the visual reference for all inner pages.
   Desktop/tablet remain unchanged.
   ========================================================= */
@media (max-width: 767px){
  /* ---------- shared header / logo ---------- */
  .sd-header,.sd-header.is-scrolled{height:68px!important;min-height:68px!important}
  .sd-nav-shell{height:68px!important;min-height:68px!important;width:calc(100% - 28px)!important}
  .sd-brand{display:flex!important;align-items:center!important;min-width:0!important}
  .sd-brand img{
    width:142px!important;
    height:auto!important;
    max-width:142px!important;
    max-height:48px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .sd-menu-toggle{width:48px!important;height:48px!important;border-radius:15px!important}
  .sd-nav-links{top:76px!important}

  /* ---------- inner-page hero system: match Home ---------- */
  .ab-hero-grid,
  .ps-hero-grid,
  .cs-hero-grid,
  .ct-hero-inner,
  .hero-in{
    padding-top:28px!important;
  }

  .ab-hero-copy h1,
  .ps-hero-copy h1,
  .cs-title,
  .ct-hero h1,
  .career-hero-copy h1{
    font-size:clamp(28px,8.9vw,36px)!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
    max-width:100%!important;
    text-wrap:balance!important;
  }

  .ab-hero-copy p,
  .ps-hero-copy p,
  .cs-hero-copy p,
  .ct-hero p,
  .hero-desc{
    font-size:13.5px!important;
    line-height:1.6!important;
  }

  /* Keep primary + secondary hero actions together like Home. */
  .ab-actions,
  .ps-hero-actions,
  .ct-actions,
  .career-hero-copy .hero-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    margin-top:18px!important;
  }
  .ab-actions .ab-btn,
  .ps-hero-actions .ps-btn,
  .ct-actions .ct-btn,
  .career-hero-copy .hero-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    padding:8px 7px!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:10.5px!important;
    line-height:1.2!important;
    white-space:normal!important;
    border-radius:11px!important;
  }
  .ab-actions svg,.ps-hero-actions svg,.ct-actions svg,.career-hero-copy .hero-actions svg{flex:0 0 auto!important}

  /* Careers hero is copy-first and compact on phone. */
  .final-career-hero{gap:20px!important}
  .career-hero-copy{padding:0!important}
  .career-hero-media{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    margin-top:4px!important;
    padding:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .career-hero-media:before{display:none!important}
  .career-hero-media img{
    width:100%!important;
    height:100%!important;
    border-radius:18px!important;
    object-fit:cover!important;
    object-position:center 28%!important;
  }
  .career-script{display:none!important}

  /* About hero visual: shorter, cleaner, image still present. */
  .ab-hero-grid{gap:22px!important}
  .ab-hero-visual{min-height:250px!important;height:250px!important}
  .ab-hero-photo{inset:0!important;border-radius:18px!important;transform:none!important}
  .ab-hero-photo img{width:100%!important;height:100%!important;transform:none!important;object-fit:cover!important}

  /* Services visual should not dominate the first screen. */
  .ps-hero-grid{gap:18px!important;padding-bottom:22px!important}
  .ps-product-art,.hero-device-stage{height:190px!important}

  /* Contact hero: keep compact and remove unnecessary large blank areas. */
  .ct-hero-inner{padding-bottom:28px!important}
  .ct-hero-grid{gap:18px!important}
  .ct-brand-card{display:none!important}

  /* ---------- Case Studies hero swipe cards ---------- */
  .cs-hero-grid{gap:20px!important;padding-bottom:24px!important}
  .cs-value-pills{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    max-width:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:0!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 18px 10px 0!important;
    margin-right:-14px!important;
    scrollbar-width:thin!important;
    scrollbar-color:#9db8d3 #eaf1f8!important;
  }
  .cs-value-pill{
    flex:0 0 78vw!important;
    width:78vw!important;
    max-width:330px!important;
    min-height:82px!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  .cs-value-pills::-webkit-scrollbar,
  .cs-grid::-webkit-scrollbar,
  .jobs-table tbody::-webkit-scrollbar{height:5px!important}
  .cs-value-pills::-webkit-scrollbar-track,
  .cs-grid::-webkit-scrollbar-track,
  .jobs-table tbody::-webkit-scrollbar-track{background:#eaf1f8!important;border-radius:999px!important}
  .cs-value-pills::-webkit-scrollbar-thumb,
  .cs-grid::-webkit-scrollbar-thumb,
  .jobs-table tbody::-webkit-scrollbar-thumb{background:#9db8d3!important;border-radius:999px!important}

  /* Main Case Study cards: real horizontal touch carousel. */
  .cs-grid-section{padding:28px 0 38px!important;overflow:hidden!important}
  .cs-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 18px 12px 0!important;
    margin-right:-14px!important;
    scrollbar-width:thin!important;
    scrollbar-color:#9db8d3 #eaf1f8!important;
  }
  .cs-grid>.cs-card{
    display:flex!important;
    flex:0 0 84vw!important;
    width:84vw!important;
    max-width:360px!important;
    min-width:0!important;
    min-height:405px!important;
    margin:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  /* ---------- Careers: filters ---------- */
  .jobs{padding-top:34px!important;overflow:hidden!important}
  .jobs h2{font-size:30px!important;line-height:1.08!important}
  .final-job-filters{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:14px!important;
    background:#fff!important;
  }
  .final-job-filters .control,
  .final-job-filters .search-btn{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    height:46px!important;
    border-radius:10px!important;
    font-size:12px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .final-job-filters .search-btn{font-size:12px!important}

  /* ---------- Careers: Open Positions horizontal swipe cards ---------- */
  .table-wrap{
    overflow:visible!important;
    margin-top:14px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .jobs-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .jobs-table colgroup,.jobs-table thead{display:none!important}
  .jobs-table tbody{
    display:flex!important;
    width:100%!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 18px 12px 0!important;
    scrollbar-width:thin!important;
    scrollbar-color:#9db8d3 #eaf1f8!important;
  }
  .jobs-table tr{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px 12px!important;
    flex:0 0 84vw!important;
    width:84vw!important;
    max-width:360px!important;
    min-width:0!important;
    margin:0!important;
    padding:18px!important;
    border:1px solid #dce7f2!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 10px 26px rgba(7,31,63,.06)!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  .jobs-table td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    color:#34516d!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  .jobs-table td:before{
    display:block!important;
    margin-bottom:3px!important;
    font-size:8px!important;
    line-height:1.2!important;
    font-weight:850!important;
    letter-spacing:.07em!important;
    text-transform:uppercase!important;
    color:#8295a8!important;
  }
  .jobs-table td:nth-child(1):before{content:"Job Title"!important}
  .jobs-table td:nth-child(2):before{content:"Department"!important}
  .jobs-table td:nth-child(3):before{content:"Location"!important}
  .jobs-table td:nth-child(4):before{content:"Experience"!important}
  .jobs-table td:nth-child(5):before{content:"Description"!important}
  .jobs-table td:nth-child(6):before{content:"Job Type"!important}
  .jobs-table td:nth-child(7):before{content:""!important;display:none!important}
  .jobs-table td.title{
    grid-column:1/-1!important;
    font-size:17px!important;
    font-weight:850!important;
  }
  .jobs-table td.title:before{font-size:8px!important}
  .jobs-table td.title a{font-size:17px!important;line-height:1.25!important}
  .jobs-table td.desc{grid-column:1/-1!important;font-size:12px!important;color:#60758a!important}
  .jobs-table td:last-child{grid-column:1/-1!important;margin-top:4px!important}
  .jobs-table .type span{font-size:10px!important;padding:5px 8px!important}
  .jobs-table .apply{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    font-size:12px!important;
    border-radius:10px!important;
  }

  /* ---------- Footer: compact, remove duplicate mail/location block ---------- */
  .sd-mobile-footer{padding:24px 18px calc(16px + env(safe-area-inset-bottom))!important}
  .sd-mobile-footer-brand{padding-bottom:17px!important}
  .sd-mobile-footer-brand img{
    width:154px!important;
    height:auto!important;
    max-height:52px!important;
    object-fit:contain!important;
    filter:brightness(0) invert(1)!important;
  }
  .sd-mobile-footer-brand p{margin-top:8px!important;font-size:11.5px!important;line-height:1.55!important}
  .sd-mobile-motto{margin-top:10px!important;font-size:16px!important}
  .sd-mobile-footer-accordions{margin-top:6px!important}
  .sd-mobile-footer-toggle{min-height:48px!important}
  .sd-mobile-footer-contact{display:none!important}
  .sd-mobile-footer-legal{padding-top:14px!important}
  .sd-mobile-footer-legal p{margin-top:7px!important}
}

@media (max-width:390px){
  .sd-brand img{width:132px!important;max-width:132px!important}
  .ab-hero-copy h1,.ps-hero-copy h1,.cs-title,.ct-hero h1,.career-hero-copy h1{font-size:30px!important}
  .ab-actions .ab-btn,.ps-hero-actions .ps-btn,.ct-actions .ct-btn,.career-hero-copy .hero-actions .btn{font-size:9.8px!important;padding-left:5px!important;padding-right:5px!important}
  .cs-value-pill{flex-basis:82vw!important;width:82vw!important}
  .cs-grid>.cs-card,.jobs-table tr{flex-basis:88vw!important;width:88vw!important}
  .final-job-filters{grid-template-columns:1fr!important}
}

/* Preserve JS filtering even though mobile cards need display overrides. */
@media (max-width:767px){
  .jobs-table tr[style*="display: none"]{display:none!important}
  .cs-grid>.cs-card[style*="display: none"]{display:none!important}
}


/* =========================================================
   MOBILE HERO LINE-COUNT + 3-UP SUMMARY REFINEMENT
   Requested phone-only adjustments. No desktop changes.
   ========================================================= */
.mob-only-br{display:none}

@media (max-width:767px){
  .mob-only-br{display:block}

  /* About: exactly 2 hero lines. */
  .ab-hero-copy h1{
    font-size:clamp(27px,7.2vw,34px)!important;
    line-height:1.04!important;
  }
  .ab-hero-copy h1,
  .ab-hero-copy h1 span{white-space:nowrap!important}

  /* About hero stats: all 3 cards in one row. */
  .ab-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .ab-stat,
  .ab-stat:last-child{
    grid-column:auto!important;
    min-width:0!important;
    padding:10px 8px!important;
    border:1px solid #dfe8f2!important;
    border-radius:12px!important;
  }
  .ab-stat strong{font-size:20px!important}
  .ab-stat small{font-size:8.5px!important;line-height:1.25!important}

  /* Products & Services: keep the existing three intended lines only. */
  .ps-hero-copy h1{
    font-size:clamp(27px,7.2vw,34px)!important;
    line-height:1.04!important;
    white-space:nowrap!important;
  }

  /* One platform. More possibilities.: three capability items in one row. */
  .ps-summary{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    width:100%!important;
    padding:12px 10px!important;
    border-radius:14px!important;
  }
  .ps-summary .sum-title{
    grid-column:1/-1!important;
    margin:0 0 7px!important;
  }
  .ps-summary .sum-row{
    display:grid!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    gap:6px!important;
    min-width:0!important;
    padding:7px 6px!important;
    border-bottom:0!important;
    border-right:1px solid #e8eef5!important;
  }
  .ps-summary .sum-row:nth-of-type(4){border-right:0!important}
  .ps-summary .sum-ico{width:26px!important;height:26px!important;border-radius:7px!important}
  .ps-summary .sum-row b{font-size:13px!important;line-height:1!important}
  .ps-summary .sum-row small{font-size:7.5px!important;line-height:1.15!important;white-space:normal!important}
  .ps-summary .ps-script{display:none!important}

  /* Careers: exactly 3 hero lines. */
  .career-hero-copy h1{
    font-size:clamp(29px,7.8vw,36px)!important;
    line-height:1.03!important;
  }
  .career-hero-copy h1,
  .career-hero-copy h1 .blue{white-space:nowrap!important}

  /* Contact: exactly 2 hero lines. */
  .ct-hero h1{
    font-size:clamp(27px,7.2vw,34px)!important;
    line-height:1.04!important;
  }
  .ct-hero h1,
  .ct-hero h1 span{white-space:nowrap!important}
}

@media (max-width:390px){
  .ab-hero-copy h1,.ct-hero h1{font-size:27px!important}
  .ps-hero-copy h1{font-size:26px!important}
  .career-hero-copy h1{font-size:28px!important}
  .ab-stat{padding:9px 6px!important}
  .ab-stat strong{font-size:18px!important}
  .ab-stat small{font-size:7.7px!important}
  .ps-summary .sum-row{grid-template-columns:23px minmax(0,1fr)!important;padding-left:4px!important;padding-right:4px!important}
  .ps-summary .sum-ico{width:23px!important;height:23px!important}
  .ps-summary .sum-row small{font-size:7px!important}
}