/* SU6 V5.38 — MOBILE ONLY: actual original footage, two complete carousel cards.
   All desktop, CMS, blog, BrandWeek/Felis and contact behavior remain untouched. */
@media(max-width:700px){
 /* Video is the original SU6 film, professionally reframed for portrait devices.
    No separate red SU6 logo, no fixed image pasted over its motion. */
 #hero .video,#hero .video.intro,#hero .video.loop{
   width:100%!important;height:100%!important;
   transform:none!important;object-fit:cover!important;
   object-position:50% 50%!important;
 }
 #diveStage #dive{object-fit:cover!important;object-position:center!important;}
 #hero .su6-mobile-intro-logo{display:none!important;}
 /* Keep the carousel as a swipeable gallery, TWO whole cards per stop.
    Prevent half-cards at the sides on narrow viewports. */
 #section2 .su6-mobile-slider,#section3 .su6-mobile-slider{
   box-sizing:border-box!important;width:100%!important;max-width:100%!important;
   min-width:0!important;margin-inline:auto!important;
 }
 #section2 .su6-mobile-service-rail,#section3 .su6-mobile-project-rail{
   box-sizing:border-box!important;
   display:flex!important;gap:12px!important;
   padding:4px 7px 6px!important;
   width:100%!important;max-width:100%!important;
   margin:5px auto 0!important;
   overflow-x:auto!important;overflow-y:hidden!important;
   scroll-snap-type:x mandatory!important;
   scroll-padding-inline:7px!important;
   touch-action:pan-x pan-y!important;
   scrollbar-width:none!important;
 }
 #section2 .su6-mobile-service-card,#section3 .su6-mobile-project-card{
   box-sizing:border-box!important;flex:0 0 calc((100% - 12px) / 2)!important;
   width:calc((100% - 12px)/2)!important;
   min-width:0!important;max-width:none!important;
   scroll-snap-align:start!important;
   scroll-snap-stop:normal!important;
 }
 #section2 .su6-mobile-service-card{height:clamp(155px,22dvh,194px)!important;}
 #section2 .su6-mobile-service-card .service-icon-png{width:clamp(62px,10dvh,82px)!important;height:clamp(62px,10dvh,82px)!important;}
 #section2 .su6-mobile-service-card .su6-mobile-service-content b{font-size:clamp(10px,2.9vw,13px)!important;line-height:1.16!important;}
 #section3 .su6-mobile-project-rail{padding-top:5px!important;padding-bottom:6px!important;}
 #section3 .su6-mobile-project-card{height:clamp(205px,32dvh,274px)!important;}
 #section3 .su6-mobile-project-card .su6-mobile-project-info{left:11px!important;bottom:12px!important;right:8px!important;gap:3px!important;}
 #section3 .su6-mobile-project-card .su6-mobile-project-info small{font-size:9px!important;letter-spacing:.04em!important;}
 #section3 .su6-mobile-project-card .su6-mobile-project-info b{font-size:clamp(12px,3.3vw,16px)!important;line-height:1.16!important;overflow-wrap:anywhere!important;}
 #section3 .su6-mobile-project-card .su6-mobile-project-index{font-size:10px!important;padding:5px 7px!important;}
 #section2 .su6-mobile-rail-controls,#section3 .su6-mobile-rail-controls{margin-top:5px!important;}
}
@media(max-width:700px) and (max-height:740px){
 #section2 .su6-mobile-service-card{height:clamp(126px,20dvh,151px)!important;}
 #section3 .su6-mobile-project-card{height:clamp(150px,27dvh,193px)!important;}
}
@media(max-width:700px){
 /* Project covers are landscape screenshots; never crop their own right/left artwork either. */
 #section3 .su6-mobile-project-card{background:linear-gradient(155deg,rgba(0,100,145,.92),rgba(0,34,60,.96))!important;}
 #section3 .su6-mobile-project-card img{
   top:17%!important;bottom:auto!important;left:0!important;right:0!important;
   width:100%!important;height:62%!important;object-fit:contain!important;object-position:center!important;
 }
 #section3 .su6-mobile-project-card::after{inset:48% 0 0!important;background:linear-gradient(180deg,transparent,rgba(0,23,40,.95))!important;}
}