/* SU6 V5.36 — Mobile rhythm and navigation refinement.
   A new mobile skin layered over the V5.35 CSS; desktop stays unchanged.
   Keep the sponsor artwork/text/CMS data from the existing components. */
@media (max-width:700px){
 :root{
   --su6-safe-bottom:env(safe-area-inset-bottom,0px);
   --su6-mobnav:calc(64px + var(--su6-safe-bottom));
   --su6-mobtop:62px;
   --su6-sponsor-band:54px;
 }
 html,body{overscroll-behavior-x:none}
 #experience{scroll-padding-top:var(--su6-mobtop)!important}
 #experience .sea-section{scroll-margin-top:var(--su6-mobtop)!important;
   height:calc(100dvh - var(--su6-mobtop))!important;
   min-height:calc(100dvh - var(--su6-mobtop))!important;
   max-height:calc(100dvh - var(--su6-mobtop))!important;
   scroll-margin-top:0!important;
   padding:clamp(10px,2.3dvh,20px) 18px calc(var(--su6-mobnav) + var(--su6-sponsor-band) + 4px)!important;
   display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;
 }
 /* Quiet, precise three-action top bar. No extra sponsor button. */
 #experience .site-nav{
   box-sizing:border-box!important;
   height:var(--su6-mobtop)!important;
   min-height:var(--su6-mobtop)!important;
   top:0!important;padding:5px max(12px,env(safe-area-inset-right,12px)) 5px max(12px,env(safe-area-inset-left,12px))!important;
   border-bottom:1px solid rgba(206,245,255,.18)!important;
   background:linear-gradient(180deg,rgba(1,38,58,.95),rgba(3,55,79,.83))!important;
   backdrop-filter:blur(19px)!important;
   -webkit-backdrop-filter:blur(19px)!important;
   box-shadow:0 4px 18px #001e3426!important;
 }
 #experience .site-brand img{height:48px!important;width:57px!important;max-width:57px!important;object-fit:contain!important}
 #experience .nav-actions{gap:7px!important;margin-left:auto!important;justify-content:flex-end!important}
 #experience .nav-actions .su6-sponsor-toggle{display:none!important}
 #experience .nav-lang,#experience .return-top,#experience .su6-mob-blog{
   flex:0 0 auto!important;
   height:44px!important;min-height:44px!important;max-height:44px!important;
   border-radius:24px!important;padding:0 11px!important;
   background:rgba(3,44,67,.38)!important;
   border:1px solid rgba(214,249,255,.28)!important;
   box-shadow:none!important;font-weight:650!important;
   display:flex!important;align-items:center!important;justify-content:center!important;
 }
 #experience .su6-mob-blog{
   background:transparent!important;border:0!important;border-bottom:1px solid transparent!important;
   border-radius:0!important;padding:0 6px!important;min-width:43px!important;
   font-size:13px!important;letter-spacing:.01em!important;
 }
 #experience .nav-lang{min-width:56px!important;font-size:13px!important;letter-spacing:.025em}
 #experience .return-top{border-radius:50%!important;min-width:44px!important;width:44px!important;padding:0!important;font-size:0!important}
 #experience .return-top::after{font-size:20px!important;content:'↑'!important}
 /* Five equal touch destinations with restrained visual state. */
 #experience .nav-links{
   box-sizing:border-box!important;
   height:var(--su6-mobnav)!important;min-height:var(--su6-mobnav)!important;
   background:rgba(0,34,55,.93)!important;
   border:0!important;border-top:1px solid rgba(199,244,255,.30)!important;
   border-radius:0!important;
   box-shadow:0 -9px 25px rgba(0,24,40,.16)!important;
   padding:6px 8px calc(6px + var(--su6-safe-bottom))!important;
   gap:3px!important;
 }
 #experience .nav-links button{
   position:relative!important;height:51px!important;min-height:50px!important;
   border:1px solid transparent!important;border-radius:14px!important;
   color:rgba(234,250,255,.86)!important;font-size:clamp(10px,2.85vw,12px)!important;
   background:transparent!important;padding:7px 0 5px!important;font-weight:650!important;
 }
 #experience .nav-links button::before{
   content:''!important;display:block!important;position:absolute!important;
   top:7px!important;left:50%!important;transform:translateX(-50%)!important;
   width:5px!important;height:5px!important;border-radius:50%!important;
   background:transparent!important;box-shadow:none!important;
 }
 #experience .nav-links button.active{
   color:#fff!important;background:rgba(37,164,195,.17)!important;
   border-color:rgba(198,246,255,.24)!important;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
 }
 #experience .nav-links button.active::before{background:#ff6c83!important;width:5px!important;box-shadow:0 0 8px rgba(255,97,128,.4)!important}
 #experience .nav-links button:focus:not(:focus-visible){outline:none!important}
 /* The partnership stays where it belongs — bottom-left, always readable,
    in a slim reserved shelf ABOVE navigation, not on top of any nav button. */
 .su6-sponsor-rotation,.su6-sponsor-rotation.is-open{
   display:block!important;
   z-index:83!important;position:fixed!important;
   left:16px!important;right:auto!important;
   bottom:calc(var(--su6-mobnav) + 8px)!important;top:auto!important;
   height:42px!important;width:min(314px,calc(100vw - 32px))!important;
   max-width:calc(100vw - 32px)!important;
   background:linear-gradient(90deg,rgba(0,34,58,.70),rgba(0,37,56,.12) 96%)!important;
   border:0!important;border-radius:10px!important;
   padding:1px 6px 1px 1px!important;
   box-shadow:none!important;
   filter:drop-shadow(0 2px 4px rgba(0,20,35,.32))!important;
   backdrop-filter:blur(5px)!important;
   -webkit-backdrop-filter:blur(5px)!important;
 }
 .su6-sponsor-rotation .su6-sponsor-slide{gap:8px!important;align-items:center!important}
 .su6-sponsor-rotation .su6-sponsor-logo,.su6-sponsor-rotation.is-open .su6-sponsor-logo{
   flex:0 0 39px!important;width:39px!important;height:39px!important;padding:0!important;
 }
 .su6-sponsor-rotation .felis-slide .su6-sponsor-logo{padding:3px!important}
 .su6-sponsor-rotation .su6-sponsor-copy,.su6-sponsor-rotation.is-open .su6-sponsor-copy{
   padding-left:10px!important;gap:1px!important;line-height:1.07!important;
 }
 .su6-sponsor-rotation .su6-sponsor-copy strong{font-size:10px!important;letter-spacing:.03em!important}
 .su6-sponsor-rotation .su6-sponsor-copy span{font-size:9px!important;letter-spacing:0!important}
 .su6-sponsor-rotation .felis-slide .su6-sponsor-copy strong{font-size:12px!important;letter-spacing:.04em!important}
 .su6-sponsor-rotation .felis-slide .su6-sponsor-copy span{font-size:9px!important;letter-spacing:.035em!important}
 /* Consistent vertical center for all content groups; no touching the bottom bar. */
 #section1 .intro-statement{align-self:center!important;margin:0 auto!important;transform:none!important;max-width:365px!important}
 #section1 .scroll-hint{display:none!important}
 #section2 .services-layout{gap:clamp(4px,1.1dvh,10px)!important;margin:0 auto!important;padding:0!important;flex:0 0 auto!important}
 #section2 .services-copy{flex:0 0 auto!important}
 #section2 .mascot-wrap{flex:0 0 auto!important;height:clamp(68px,13dvh,104px)!important;width:clamp(74px,20vw,104px)!important}
 #section2 .su6-mobile-slider{flex:0 0 auto!important;max-width:100%!important}
 #section2 .su6-mobile-service-card{height:clamp(132px,23dvh,185px)!important;flex-basis:clamp(132px,23dvh,185px)!important}
 #section2 .su6-mobile-service-rail{padding-left:calc((100% - clamp(132px,23dvh,185px))/2)!important;padding-right:calc((100% - clamp(132px,23dvh,185px))/2)!important}
 #section2 .su6-mobile-service-card .service-icon-png{width:clamp(58px,10.5dvh,77px)!important;height:clamp(58px,10.5dvh,77px)!important}
 #section2 .su6-mobile-service-card .su6-mobile-service-content b{font-size:clamp(11px,3.5vw,13px)!important}
 #section3.portfolio-section{height:calc(100dvh - var(--su6-mobtop))!important;min-height:calc(100dvh - var(--su6-mobtop))!important;padding:clamp(10px,2.3dvh,20px) 0 calc(var(--su6-mobnav) + var(--su6-sponsor-band) + 4px)!important}
 #section3 .portfolio-world{height:auto!important;min-height:0!important;max-height:100%!important;justify-content:center!important;align-items:stretch!important;gap:clamp(5px,1.2dvh,12px)!important}
 #section3 .portfolio-intro{max-width:100%!important;flex:0 0 auto!important;position:relative!important}
 #section3 .portfolio-intro h2{font-size:clamp(32px,8vw,39px)!important;margin:4px 0 6px!important}
 #section3 .su6-mobile-slider{flex:0 0 auto!important;width:100%;max-height:none!important}
 #section3 .su6-mobile-project-rail{margin-top:4px!important;flex:0 0 auto!important;align-items:center!important;max-height:none!important}
 #section3 .su6-mobile-project-card{height:clamp(170px,35dvh,293px)!important}
 .su6-mobile-rail-controls{min-height:42px!important;height:42px!important;margin-top:4px!important;gap:16px!important}
 .su6-mobile-rail-controls button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;background:rgba(1,54,78,.50)!important;border-color:rgba(190,245,255,.40)!important}
 .su6-mobile-rail-counter{font-size:12px!important}
 /* 3 columns, up to 9 logos on taller phones; 6 on shorter ones. */
 #section4 .brands-layout{height:auto!important;width:100%!important;max-height:100%!important;justify-content:center!important;gap:clamp(4px,.9dvh,9px)!important;margin:0 auto!important}
 #section4 .brands-layout h2{font-size:clamp(28px,7.2vw,36px)!important;margin:2px 0 5px!important}
 #section4 .brands-layout .lead{font-size:12px!important;line-height:1.3!important;margin:3px auto 9px!important}
 #section4 .su6-mobile-brand-panel{max-width:380px!important}
 #section4 .su6-mobile-brand-grid{
   display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
   grid-template-rows:repeat(3,minmax(0,1fr))!important;
   width:min(100%,345px)!important;
   gap:clamp(3px,1vw,8px)!important;
   min-height:0!important;height:auto!important;
   margin:0 auto!important;align-items:center!important;justify-items:center!important;
 }
 #section4 .su6-mobile-brand-cell{width:min(100%,clamp(76px,13.5dvh,111px))!important;aspect-ratio:1!important;max-width:111px!important}
 #section4 .su6-mobile-brand-cell .brand-name{font-size:clamp(10px,2.8vw,13px)!important;line-height:1.08!important;text-shadow:0 2px 5px #003451}
 #section4 .su6-mobile-brand-cell .brand-mark{max-width:72%!important;max-height:58%!important}
 /* Contact is a calm vertically grouped invitation, with true spacing. */
 #section5.contact-scene{height:calc(100dvh - var(--su6-mobtop))!important;min-height:calc(100dvh - var(--su6-mobtop))!important;padding:clamp(8px,2dvh,17px) 18px calc(var(--su6-mobnav) + var(--su6-sponsor-band) + 4px)!important}
 #section5 .contact-shell{height:auto!important;max-height:100%!important;flex:0 0 auto!important;gap:0!important;justify-content:center!important;align-self:center!important;margin:0 auto!important}
 #section5 .contact-copy{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important}
 #section5 #contactParticleField{margin:3px auto 4px!important}
 #section5 .contact-head-fallback{font-size:clamp(34px,9vw,42px)!important;line-height:1.07!important}
 #section5 .contact-intro{font-size:clamp(12px,3.1vw,13px)!important;line-height:1.4!important;max-width:325px!important;margin:6px auto 0!important}
 #section5 .contact-information{
   width:100%!important;margin:clamp(13px,2.4dvh,22px) 0 0!important;
   padding:clamp(10px,1.8dvh,15px) 0!important;
   gap:0!important;
 }
 #section5 .contact-info-item{justify-content:center!important;text-align:left!important;gap:10px!important}
 #section5 .contact-info-item .contact-info-icon{width:40px!important;height:40px!important;flex-basis:40px!important}
 #section5 .contact-info-item .contact-info-caption{font-size:10px!important;letter-spacing:.13em!important}
 #section5 .contact-info-item a{font-size:clamp(14px,4vw,17px)!important;line-height:1.25!important}
 #section5 .contact-social{margin:clamp(13px,2.4dvh,22px) auto 0!important}
 #section5 .contact-social .contact-info-caption{font-size:10px!important;letter-spacing:.18em!important}
 #section5 .contact-social-links{margin-top:10px!important;gap:clamp(14px,5vw,22px)!important}
 #section5 .contact-social-link{width:43px!important;height:43px!important;min-height:43px!important;flex-basis:43px!important}
 #section5 .su6-mobile-contact-open{
   margin:clamp(16px,3dvh,25px) auto 0!important;
   min-height:50px!important;
   max-width:310px!important;
   font-size:15px!important;
   box-shadow:0 6px 22px rgba(245,41,85,.24)!important;
 }
}
@media(max-width:700px) and (max-height:740px){
 :root{--su6-mobtop:57px;--su6-sponsor-band:47px;--su6-mobnav:calc(60px + var(--su6-safe-bottom))}
 #experience .site-brand img{height:44px!important;width:52px!important}
 #experience .site-nav{padding:4px 10px!important}
 #experience .nav-actions{gap:5px!important}
 #experience .nav-lang,#experience .return-top,#experience .su6-mob-blog{height:43px!important;min-height:43px!important;max-height:43px!important}
 #experience .nav-links{padding:4px 6px calc(4px + var(--su6-safe-bottom))!important}
 #experience .nav-links button{height:50px!important}
 .su6-sponsor-rotation,.su6-sponsor-rotation.is-open{height:37px!important;bottom:calc(var(--su6-mobnav) + 5px)!important}
 .su6-sponsor-rotation .su6-sponsor-logo{width:34px!important;height:34px!important;flex-basis:34px!important}
 #section1 .intro-statement h1{font-size:clamp(34px,9vw,44px)!important}
 #section2 .mascot-wrap{height:64px!important;width:66px!important}
 #section2 .services-copy .lead{display:none!important}
 #section2 .su6-mobile-service-card{height:135px!important;flex-basis:135px!important}
 #section2 .su6-mobile-service-rail{padding-left:calc((100% - 135px)/2)!important;padding-right:calc((100% - 135px)/2)!important}
 #section3 .portfolio-intro h2{font-size:clamp(30px,7.8vw,35px)!important}
 #section3 .su6-mobile-project-card{height:clamp(162px,29dvh,208px)!important}
 #section4 .brands-layout h2{font-size:clamp(26px,6.9vw,31px)!important}
 #section4 .brands-layout .lead{margin:1px auto 4px!important}
 #section4 .su6-mobile-brand-grid{grid-template-rows:repeat(2,minmax(0,1fr))!important}
 #section4 .su6-mobile-brand-cell{width:min(100%,clamp(72px,15dvh,97px))!important}
 #section5 .contact-head-fallback{font-size:clamp(31px,8.3vw,37px)!important}
 #section5 .contact-information{margin-top:8px!important;padding:7px 0!important}
 #section5 .contact-social{margin-top:8px!important}
 #section5 .contact-social-links{margin-top:6px!important}
 #section5 .su6-mobile-contact-open{margin-top:10px!important;min-height:48px!important}
}
@media(max-width:700px) and (max-width:350px){
 #experience .site-brand img{width:47px!important}
 #experience .nav-actions{gap:3px!important}
 #experience .nav-lang{min-width:51px!important;padding:0 6px!important}
 #experience .su6-mob-blog{min-width:37px!important;padding:0 3px!important;font-size:12px!important}
 #experience .return-top{width:42px!important;min-width:42px!important}
 #experience .nav-links button{font-size:10px!important}
 #section4 .su6-mobile-brand-cell{width:min(100%,92px)!important}
 #section5 .contact-info-item a{font-size:13px!important}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 .su6-sponsor-rotation .su6-sponsor-slide{transition:none!important}
}

@media(max-width:700px){
 .su6-sponsor-rotation.su6-mobile-sponsor-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}