/* SU6 V5.37 — targeted mobile-only correction layer. Desktop CSS and CMS untouched. */
.su6-mobile-intro-logo{display:none}
@media (max-width:700px){
 :root{--su6-mobtop:60px;--su6-sponsor-band:48px}
 /* 1. Header blends into the underwater film: no opaque band or hard horizontal edge. */
 #experience .site-nav{
  position:sticky!important;top:0!important;z-index:95!important;
  margin-bottom:calc(-1 * var(--su6-mobtop))!important;
  height:var(--su6-mobtop)!important;min-height:var(--su6-mobtop)!important;
  padding:4px 14px!important;
  background:linear-gradient(180deg,rgba(0,35,56,.56),rgba(0,43,63,.13) 63%,transparent 100%)!important;
  border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }
 #experience .site-brand img{width:51px!important;max-width:51px!important;height:52px!important}
 #experience .nav-actions{gap:11px!important}
 #experience .su6-mob-blog{
  min-height:44px!important;min-width:44px!important;padding:0 4px!important;
  border:0!important;border-radius:6px!important;
  font-size:13px!important;color:#fff!important;text-shadow:0 2px 8px rgba(0,26,44,.65)!important;
 }
 #experience .nav-lang,#experience .return-top{
  min-height:44px!important;height:44px!important;
  background:rgba(0,42,64,.28)!important;border:1px solid rgba(214,249,255,.33)!important;
  backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;
 }
 #experience .nav-lang{border-radius:99px!important;min-width:54px!important}
 #experience .return-top{width:44px!important;min-width:44px!important;border-radius:99px!important}
 #experience .sea-section,
 #section3.portfolio-section,
 #section5.contact-scene{
  height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
  padding-top:calc(var(--su6-mobtop) + 20px)!important;
  padding-bottom:calc(var(--su6-mobnav) + var(--su6-sponsor-band) + 15px)!important;
  scroll-margin-top:0!important;
 }
 #experience{scroll-padding-top:0!important;scroll-snap-type:y mandatory!important}
 /* 2. Mobile intro: show the actual red 3D SU6 mark in the center, while the film remains active. */
 #hero .video{object-position:0% center!important}
 #hero .su6-mobile-intro-logo{
  display:block;position:absolute;z-index:2;pointer-events:none;
  left:50%;top:39%;width:min(72vw,330px);height:auto;
  filter:drop-shadow(0 15px 28px rgba(0,28,53,.27));
  animation:su6MobileLogoShow 2.1s cubic-bezier(.18,.78,.24,1) .75s both;
  transform-origin:center;
 }
 @keyframes su6MobileLogoShow{
  0%{opacity:0;transform:translate(-50%,-46%) scale(.75) rotate(-4deg);filter:blur(8px) drop-shadow(0 15px 28px rgba(0,28,53,.27))}
  65%{opacity:1;filter:blur(0) drop-shadow(0 15px 28px rgba(0,28,53,.27))}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 15px 28px rgba(0,28,53,.27))}
 }
 #hero .bottom{z-index:5}
 #hero .discover{position:relative;z-index:6;touch-action:manipulation}
 /* 3. No sponsor hit target can intercept the Discover CTA before the deep scene is open. */
 body:not(:has(#diveStage.done)) #su6SponsorRotation{display:none!important;pointer-events:none!important}
 .su6-sponsor-rotation.su6-mobile-sponsor-hidden{display:none!important;pointer-events:none!important}
 /* 4. The alpha artwork is masked in every direction — no visible frame edge. */
 #section1 .su6-alpha-video,
 #section1.alpha-edge-full .su6-alpha-video{
  position:absolute!important;inset:auto!important;top:49%!important;left:50%!important;
  width:154vw!important;height:98vw!important;max-width:none!important;max-height:none!important;
  transform:translate(-50%,-50%)!important;object-fit:contain!important;
  mix-blend-mode:normal!important;opacity:.83!important;
  -webkit-mask-image:radial-gradient(ellipse 39% 39% at 50% 50%,#000 3%,#000 22%,rgba(0,0,0,.83) 44%,rgba(0,0,0,.36) 68%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 39% 39% at 50% 50%,#000 3%,#000 22%,rgba(0,0,0,.83) 44%,rgba(0,0,0,.36) 68%,transparent 100%)!important;
  pointer-events:none!important;
 }
 /* 5. Services: show ONE full glass card, never cut off the neighbor. Swipe and arrows still work. */
 #section2 .su6-mobile-slider{width:100%!important;max-width:100%!important}
 #section2 .su6-mobile-service-rail{
  width:min(240px,calc(100vw - 92px))!important;max-width:100%!important;
  padding:2px 0 4px!important;gap:0!important;
  margin:0 auto!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;
  scroll-padding-left:0!important;scroll-padding-right:0!important;
 }
 #section2 .su6-mobile-service-card{
  flex:0 0 100%!important;min-width:100%!important;width:100%!important;
  height:clamp(165px,24dvh,208px)!important;
  scroll-snap-align:start!important;
 }
 #section2 .su6-mobile-service-card .service-icon-png{width:clamp(70px,12dvh,90px)!important;height:clamp(70px,12dvh,90px)!important}
 /* 6. Projects: one complete cover per viewport, no teaser slivers on either side. */
 #section3 .su6-mobile-slider{width:100%!important;max-width:100%!important}
 #section3 .su6-mobile-project-rail{
  width:min(310px,calc(100vw - 70px))!important;max-width:100%!important;
  margin:4px auto 0!important;padding:0!important;gap:0!important;
  overflow-x:auto!important;scroll-snap-type:x mandatory!important;
  scroll-padding-left:0!important;scroll-padding-right:0!important;
 }
 #section3 .su6-mobile-project-card{
  flex:0 0 100%!important;min-width:100%!important;width:100%!important;
  height:clamp(208px,33dvh,285px)!important;scroll-snap-align:start!important;
  box-sizing:border-box!important;
 }
 /* 7. Restore interactive contact particles and the four-second ambient ripple on mobile. */
 #section5 #contactParticleField{
  position:relative!important;width:100%!important;height:clamp(114px,16dvh,153px)!important;
  min-height:114px!important;max-height:153px!important;
  overflow:visible!important;margin:4px auto 5px!important;
  touch-action:pan-y!important;
 }
 #section5 #contactParticleCanvas{
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
 }
 #section5 .contact-head-fallback{
  position:absolute!important;inset:0!important;
  display:grid!important;place-content:center!important;
  width:100%!important;height:100%!important;margin:0!important;
  opacity:1!important;visibility:visible!important;
  line-height:1.1!important;font-size:clamp(31px,7.9vw,38px)!important;
 }
 #section5 #contactParticleField.particle-ready .contact-head-fallback{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
 #section5 .contact-micro-note{display:flex!important;justify-content:center!important;margin:0 auto!important;font-size:9px!important;line-height:1.2!important;gap:5px!important}
 #section5 .contact-intro{margin:0 auto!important}
}
@media (max-width:700px) and (max-height:740px){
 :root{--su6-mobtop:56px;--su6-sponsor-band:42px}
 #experience .sea-section,#section3.portfolio-section,#section5.contact-scene{
  padding-top:calc(var(--su6-mobtop) + 14px)!important;
  padding-bottom:calc(var(--su6-mobnav) + var(--su6-sponsor-band) + 8px)!important;
 }
 #hero .su6-mobile-intro-logo{top:38%;width:min(62vw,250px)}
 #section2 .su6-mobile-service-card{height:155px!important}
 #section3 .su6-mobile-project-card{height:clamp(160px,28dvh,207px)!important}
 #section5 #contactParticleField{height:112px!important;min-height:112px!important;max-height:112px!important}
 #section5 .contact-micro-note{display:none!important}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 #hero .su6-mobile-intro-logo{animation:none!important;opacity:1!important;transform:translate(-50%,-50%)!important}
 #section5 #contactParticleCanvas{display:none!important}
 #section5 #contactParticleField .contact-head-fallback{opacity:1!important;visibility:visible!important}
}