/* SU6 V5.35 — Mobile-first mini site. Desktop is intentionally untouched. */
.su6-mobile-only{display:none}
@media (max-width:700px){
  :root{--su6-safe-bottom:env(safe-area-inset-bottom,0px);--su6-mobnav:calc(68px + var(--su6-safe-bottom));}
  html,body{overflow-x:hidden}
  #hero{height:100dvh;min-height:0;}
  #hero .header{left:14px;right:14px;top:calc(14px + env(safe-area-inset-top));gap:9px}
  #hero .brand-descriptor,#hero .brand-rule{display:none}
  #hero .brand-logo{width:72px;max-height:64px}
  #hero .languages .lang{height:44px;min-width:39px;padding:0 8px;font-size:12px;border-radius:18px}
  #hero .languages{gap:4px}
  #hero .bottom{bottom:calc(6% + var(--su6-safe-bottom));width:calc(100% - 30px)}
  #hero .slogan{font-size:clamp(13px,3.8vw,18px);letter-spacing:.18em}
  #hero .discover{height:58px;min-width:min(77vw,290px);margin-top:18px;font-size:20px}
  #hero .dots{margin-top:22px}
  .dive-stage,.experience{height:100dvh;max-height:100dvh}
  #experience{scroll-snap-type:y mandatory;scroll-padding-top:0;overscroll-behavior-y:contain;}
  #experience .site-nav{position:sticky;top:0;z-index:65;min-height:66px;height:66px;padding:calc(9px + env(safe-area-inset-top)/4) 14px 7px;gap:4px;background:linear-gradient(180deg,rgba(0,38,62,.87),rgba(0,44,68,.60));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  #experience .site-brand{min-width:0;flex:0 0 auto}
  #experience .site-brand img{height:52px;width:60px;object-fit:contain}
  #experience .site-brand small{display:none}
  #experience .nav-actions{margin-left:auto;gap:5px;display:flex;align-items:center}
  #experience .nav-lang,#experience .return-top,.su6-mob-blog,.su6-sponsor-toggle{height:44px!important;min-width:44px!important;padding:0 10px!important;border-radius:16px!important;display:grid!important;place-items:center!important;font-size:12px!important;line-height:1.1!important;border:1px solid rgba(201,244,255,.28)!important;color:white!important;background:rgba(0,53,81,.68)!important;text-decoration:none!important;white-space:nowrap}
  #experience .return-top{width:44px!important;overflow:hidden;font-size:0!important;padding:0!important}
  #experience .return-top::after{content:'↑';font-size:21px}
  .su6-sponsor-toggle{font-weight:850!important;color:#ffad7b!important;font-size:16px!important}
  .su6-sponsor-toggle::after{content:'';width:5px;height:5px;background:#ff6b53;border-radius:50%;position:absolute;transform:translate(17px,-16px)}
  .su6-mob-blog{font-weight:700;font-size:11px!important}
  #experience .nav-links{position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;z-index:88!important;width:100%!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:center!important;gap:2px!important;min-height:var(--su6-mobnav)!important;margin:0!important;padding:7px 7px calc(7px + var(--su6-safe-bottom))!important;border-radius:19px 19px 0 0!important;border:1px solid rgba(189,247,255,.36)!important;border-bottom:0!important;background:rgba(0,38,61,.94)!important;box-shadow:0 -5px 32px rgba(0,19,39,.45)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;transform:none!important}
  #experience .nav-links button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;height:50px!important;padding:4px 0!important;border-radius:12px!important;font-size:clamp(10px,2.65vw,12px)!important;font-weight:650!important;white-space:nowrap!important;line-height:1.15!important;color:rgba(246,253,255,.86)!important}
  #experience .nav-links button::before{content:'';width:18px;height:3px;border-radius:4px;background:#ffffff55;transition:width .25s,background .25s}
  #experience .nav-links button.active{background:#04648f9c!important;color:white!important}
  #experience .nav-links button.active::before{width:25px;background:#ff647e;box-shadow:0 0 9px #ff3b6b}
  #experience .nav-links .nav-blog-link{display:none!important}
  #experience button:focus-visible,#experience a:focus-visible,.su6-mobile-only button:focus-visible{outline:3px solid #c8faff!important;outline-offset:2px!important}
  #experience .sea-section{width:100%!important;min-height:calc(100dvh - 66px)!important;height:calc(100dvh - 66px)!important;max-height:none!important;scroll-snap-align:start!important;padding:17px 18px calc(var(--su6-mobnav) + 16px)!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;opacity:1!important}
  #experience .sea-section .section-count{display:none!important}
  #experience .sea-section .eyebrow{letter-spacing:.19em!important;font-size:10px!important;line-height:1.35!important}
  #experience .sea-section h2{letter-spacing:-.04em!important}
  #experience .sea-section .lead{font-size:13px!important;line-height:1.42!important}
  /* Opening quote: fade all four sides of the alpha movie to eliminate its rectangular seam. */
  #section1 .su6-alpha-video,#section1.alpha-edge-full .su6-alpha-video{inset:auto!important;position:absolute!important;top:50%!important;left:50%!important;width:120vw!important;height:75vw!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-55%)!important;object-fit:contain!important;object-position:center!important;opacity:.8!important;-webkit-mask-image:radial-gradient(ellipse 48% 47% at 50% 50%,#000 18%,rgba(0,0,0,.83) 45%,transparent 100%)!important;mask-image:radial-gradient(ellipse 48% 47% at 50% 50%,#000 18%,rgba(0,0,0,.83) 45%,transparent 100%)!important;mix-blend-mode:screen!important;pointer-events:none!important}
  #section1 .intro-statement{max-width:100%!important;width:100%!important;align-self:center!important;padding:0 8px!important;text-align:center!important;transform:none!important;opacity:1!important;z-index:3!important}
  #section1 .intro-statement h1{font-size:clamp(39px,10.6vw,52px)!important;line-height:1.04!important;margin:15px 0!important;letter-spacing:-.062em!important}
  #section1 .intro-statement p{font-size:clamp(13px,3.55vw,16px)!important;line-height:1.48!important;margin-top:15px!important;max-width:345px!important}
  #section1 .scroll-hint{bottom:calc(var(--su6-mobnav) + 21px)!important;left:50%!important;width:85%!important;white-space:nowrap!important;font-size:10px!important;letter-spacing:.15em!important;transform:translateX(-50%)!important}
  #section1 .scroll-hint span{height:18px;margin:6px auto 0}
  /* Services: no desktop free-floating cards in a 390px column. */
  #section2 .services-ambient{opacity:.34!important}
  #section2 .service-orbit-frame{opacity:.16!important;display:none!important}
  #section2 .services-layout{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;position:relative!important;pointer-events:auto!important}
  #section2 .services-copy{width:100%!important;order:0!important;text-align:center!important;padding:0!important;opacity:1!important;transform:none!important;filter:none!important;translate:none!important}
  #section2 .services-copy h2{font-size:clamp(26px,7vw,34px)!important;line-height:1.12!important;margin:7px 0!important}
  #section2 .services-copy h2 .story-line{white-space:normal!important;opacity:1!important;translate:none!important;filter:none!important;transition:none!important}
  #section2 .services-copy .lead{max-width:350px!important;margin:4px auto!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:1!important;translate:none!important;filter:none!important}
  #section2 .services-copy .red-line{display:none!important}
  #section2 .mascot-wrap{order:1!important;width:clamp(82px,23vw,116px)!important;height:clamp(94px,27vw,126px)!important;max-width:none!important;align-self:center!important;opacity:1!important;transform:none!important}
  #section2 .mascot-wrap>img:first-child{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
  #section2 #servicesFloat{display:none!important}
  #section2 .service-feedback{display:none!important}
  .su6-mobile-only{display:block!important}
  .su6-mobile-slider{width:100%;max-width:440px;min-width:0;position:relative;order:2}
  .su6-mobile-service-rail,.su6-mobile-project-rail{display:flex;gap:12px;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scroll-behavior:smooth;padding:3px max(0px,calc((100% - 198px)/2)) 10px;}
  .su6-mobile-service-rail::-webkit-scrollbar,.su6-mobile-project-rail::-webkit-scrollbar{display:none}
  .su6-mobile-service-card{flex:0 0 198px;height:198px;position:relative;display:block;scroll-snap-align:center;background:transparent;border:0;border-radius:22px;padding:0;color:#fff;overflow:visible;user-select:none}
  .su6-mobile-service-card .service-glass{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 16px rgba(0,19,46,.32))}
  .su6-mobile-service-card .su6-mobile-service-content{position:absolute;inset:15% 10% 18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;transform:rotate(-3deg);text-align:center}
  .su6-mobile-service-card .service-icon-png{height:83px;width:83px;object-fit:contain}
  .su6-mobile-service-card .su6-mobile-service-content b{font-size:14px;line-height:1.17;text-shadow:0 2px 9px rgba(0,19,33,.9);max-width:150px;overflow-wrap:anywhere}
  .su6-mobile-rail-controls{display:flex;align-items:center;justify-content:center;gap:15px;min-height:43px;width:100%;margin-top:0}
  .su6-mobile-rail-controls button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(199,244,255,.55);background:#003f5dbb;color:#e8fbff;font-size:24px;display:grid;place-items:center;line-height:1}
  .su6-mobile-rail-counter{color:#d6f7ff;font-size:12px;font-weight:750;min-width:50px;text-align:center;letter-spacing:.13em;font-variant-numeric:tabular-nums}
  /* Projects: single big visual card and horizontal swipe instead of 12 overlapping cards. */
  #section3.portfolio-section{height:calc(100dvh - 66px)!important;min-height:calc(100dvh - 66px)!important;padding:12px 0 calc(var(--su6-mobnav) + 8px)!important;overflow:hidden!important}
  #section3 .portfolio-world{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important;overflow:hidden!important}
  #section3 .portfolio-world::after{opacity:.5!important}
  #section3 .portfolio-intro{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;width:100%!important;max-width:100%!important;transform:none!important;translate:none!important;opacity:1!important;text-align:center!important;flex:0 0 auto!important;padding:0 22px!important;pointer-events:auto!important;z-index:5!important}
  #section3 .portfolio-intro h2{font-size:clamp(35px,9vw,44px)!important;line-height:1.05!important;margin:5px 0 8px!important}
  #section3 .portfolio-intro .lead{max-width:335px!important;font-size:13px!important;margin:0 auto 5px!important;line-height:1.3!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #section3 .portfolio-count,#section3 .portfolio-hint,#section3 .portfolio-toolbar,#section3 .portfolio-notice{display:none!important}
  #section3 .portfolio-stage{display:none!important}
  #section3 .su6-mobile-project-card{flex:0 0 min(72vw,290px);height:clamp(210px,39vh,330px);border:1px solid rgba(205,249,255,.62);border-radius:24px;overflow:hidden;scroll-snap-align:center;position:relative;box-shadow:0 16px 32px rgba(0,17,37,.35);background:#00456b;padding:0;color:white;text-align:left;user-select:none}
  #section3 .su6-mobile-project-rail{padding-left:max(12px,calc((100% - min(72vw,290px))/2));padding-right:max(12px,calc((100% - min(72vw,290px))/2));gap:12px;margin-top:12px;padding-bottom:6px;flex:0 1 auto;min-height:0;align-items:center}
  #section3 .su6-mobile-project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  #section3 .su6-mobile-project-card::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,#001d31ed)}
  #section3 .su6-mobile-project-card .su6-mobile-project-info{position:absolute;z-index:2;left:14px;bottom:16px;right:14px;display:flex;flex-direction:column;gap:5px}
  #section3 .su6-mobile-project-card small{letter-spacing:.12em;color:#c8eff9;font-size:10px}
  #section3 .su6-mobile-project-card b{font-size:19px;line-height:1.2}
  #section3 .su6-mobile-project-card .su6-mobile-project-index{position:absolute;z-index:2;top:13px;left:13px;border-radius:10px;padding:6px 9px;background:#004b69aa;border:1px solid #c4faff77;font-weight:750;font-size:11px}
  /* Client logos: two-by-two per page, no blank '+' filler slots. */
  #section4{padding-left:15px!important;padding-right:15px!important}
  #section4 .brands-layout{width:100%!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;text-align:center!important;opacity:1!important;transform:none!important}
  #section4 .brands-layout h2{font-size:clamp(29px,7.6vw,37px)!important;line-height:1.08!important;margin:3px 0!important}
  #section4 .brands-layout .lead{font-size:12px!important;line-height:1.35!important;margin:2px auto 4px!important;max-width:320px!important}
  #section4 #brandBubbles,#section4 .brands-note{display:none!important}
  #section4 .su6-mobile-brand-panel{width:100%;max-width:430px}
  #section4 .su6-mobile-brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:8px;justify-items:center;align-items:center;margin:auto;width:min(100%,320px);min-height:clamp(236px,39vh,315px)}
  #section4 .su6-mobile-brand-cell{width:min(100%,145px);aspect-ratio:1;display:grid;place-items:center;position:relative}
  #section4 .su6-mobile-brand-cell .brand-bob{position:relative;display:block;width:100%;height:100%;animation:su6BrandBob 5s ease-in-out infinite alternate}
  #section4 .su6-mobile-brand-cell .brand-bubble-image{width:100%;height:100%;object-fit:contain}
  #section4 .su6-mobile-brand-cell .brand-name{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;font-size:clamp(13px,3.7vw,17px)!important;font-weight:800;color:white;text-shadow:0 1px 7px #003451;text-align:center;line-height:1.14}
  #section4 .su6-mobile-brand-cell .brand-logo-uploaded{max-width:75%;max-height:75%}
  /* Contact: complete intro fits one scene; real form opens as accessible full-screen drawer. */
  #section5.contact-scene{height:calc(100dvh - 66px)!important;min-height:calc(100dvh - 66px)!important;padding:12px 18px calc(var(--su6-mobnav) + 10px)!important}
  #section5 .contact-shell{width:100%!important;max-width:430px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:7px!important;margin:0 auto!important;opacity:1!important;transform:none!important}
  #section5 .contact-copy{width:100%!important;text-align:center!important}
  #section5 .contact-eyebrow{font-size:10px!important;margin:0!important}
  #section5 #contactParticleField{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;margin:8px auto!important;touch-action:auto!important}
  #section5 #contactParticleCanvas{display:none!important}
  #section5 .contact-head-fallback{position:relative!important;display:block!important;opacity:1!important;visibility:visible!important;clip:auto!important;width:auto!important;height:auto!important;inset:auto!important;margin:0!important;padding:0!important;color:#fff!important;transform:none!important;font-size:clamp(35px,9.3vw,46px)!important;line-height:1.03!important;font-weight:850!important;letter-spacing:-.055em!important;text-shadow:0 3px 15px #003451!important}
  #section5 .contact-intro{font-size:13px!important;line-height:1.5!important;max-width:360px!important;margin:7px auto 13px!important}
  #section5 .contact-micro-note{display:none!important}
  #section5 .contact-information{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important;gap:9px!important;border-top:1px solid rgba(194,243,255,.25)!important;border-bottom:1px solid rgba(194,243,255,.25)!important;margin:8px 0!important;padding:11px 0!important}
  #section5 .contact-info-item{gap:11px!important;justify-content:flex-start!important;text-align:left!important;min-width:0!important}
  #section5 .contact-info-item:not(:first-child){display:none!important}
  #section5 .contact-info-item .contact-info-icon{width:45px!important;height:45px!important;flex:0 0 45px!important}
  #section5 .contact-info-item a{font-size:clamp(15px,4vw,18px)!important;overflow-wrap:anywhere!important}
  #section5 .contact-social{margin:10px auto 0!important}
  #section5 .contact-social-links{justify-content:center!important;gap:11px!important;margin-top:9px!important}
  #section5 .contact-social-link{height:45px!important;width:45px!important;min-height:45px!important;flex:0 0 45px!important;padding:9px!important;display:grid!important;place-items:center!important;border-radius:50%!important}
  #section5 .contact-social-link svg{height:22px!important;width:22px!important}
  #section5 .contact-social-link span{display:none!important}
  #section5 .contact-footer{display:none!important}
  .su6-mobile-contact-open{width:100%;max-width:360px;min-height:49px;margin:10px auto 0;padding:12px 18px;border:1px solid #ffc6d2;border-radius:999px;color:white;background:linear-gradient(105deg,#ff7381,#ec235b);box-shadow:0 0 22px #ff436a5c;font-size:16px;font-weight:780}
  #section5 .contact-panel:not(.su6-mobile-form-open){display:none!important}
  #section5 .contact-panel.su6-mobile-form-open{position:fixed!important;z-index:130!important;top:0!important;bottom:0!important;left:0!important;right:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;padding:calc(65px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain!important;background:linear-gradient(145deg,#045779 0%,#00334f 48%,#002337 100%)!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:block!important;scrollbar-width:thin}
  #section5 .contact-panel .su6-mobile-form-close{position:absolute;z-index:4;right:16px;top:calc(15px + env(safe-area-inset-top));height:44px;width:44px;display:grid;place-items:center;border:1px solid #c1f6ff78;background:#003b59;color:white;border-radius:50%;font-size:23px}
  #section5 .contact-panel .contact-form-two{display:flex!important;flex-direction:column!important;gap:12px!important}
  #section5 .contact-panel .contact-form label{font-size:13px!important}
  #section5 .contact-panel .contact-form input,#section5 .contact-panel .contact-form textarea{min-height:48px!important;font-size:16px!important}
  #section5 .contact-panel .contact-send{min-height:50px!important}
  #section5 .contact-panel .contact-submit-row{flex-wrap:wrap!important}
  /* Sponsor badge: compact header trigger; full lockup only on explicit tap. */
  .su6-sponsor-rotation{display:none!important}
  .su6-sponsor-rotation.is-open{display:block!important;position:fixed!important;z-index:110!important;left:auto!important;right:12px!important;top:calc(70px + env(safe-area-inset-top))!important;bottom:auto!important;width:min(300px,calc(100vw - 24px))!important;height:86px!important;padding:9px 13px!important;border-radius:18px!important;background:rgba(0,42,67,.97)!important;border:1px solid rgba(198,246,255,.5)!important;box-shadow:0 15px 45px #00192dc5!important;backdrop-filter:blur(20px)!important}
  .su6-sponsor-rotation.is-open .su6-sponsor-slide{gap:9px!important}
  .su6-sponsor-rotation.is-open .su6-sponsor-logo{flex:0 0 53px!important;width:53px!important;height:53px!important}
  .su6-sponsor-rotation.is-open .su6-sponsor-copy{gap:3px!important;padding-left:9px!important}
  .su6-sponsor-rotation.is-open .su6-sponsor-copy strong{font-size:11px!important}
  .su6-sponsor-rotation.is-open .su6-sponsor-copy span{font-size:10px!important;line-height:1.25!important}
  .su6-sponsor-rotation.is-open .felis-slide .su6-sponsor-copy strong{font-size:14px!important}
}
/* Short phones: reduce decorative scale, not tap targets. */
@media(max-width:700px) and (max-height:720px){
  #section2 .mascot-wrap{height:78px!important;width:75px!important}
  #section2 .services-copy .lead{display:none!important}
  #section2 .su6-mobile-service-card{height:166px!important;flex-basis:166px!important}
  #section2 .su6-mobile-service-rail{padding-left:calc((100% - 166px)/2);padding-right:calc((100% - 166px)/2)}
  #section2 .su6-mobile-service-card .service-icon-png{height:67px!important;width:67px!important}
  #section3 .su6-mobile-project-card{height:clamp(180px,37vh,275px)!important}
  #section4 .su6-mobile-brand-grid{min-height:225px!important}
  #section4 .su6-mobile-brand-cell{width:min(100%,110px)!important}
  #section5 .contact-intro{margin:5px auto!important}
  #section5 .contact-social{margin-top:2px!important}
}
@media(max-width:700px) and (max-width:350px){
  #experience .site-nav{padding-left:9px;padding-right:9px}
  #experience .site-brand img{width:49px}
  #experience .nav-actions{gap:3px}
  #experience .nav-lang,#experience .return-top,.su6-mob-blog,.su6-sponsor-toggle{min-width:41px!important;height:43px!important;padding:0 6px!important}
  #experience .nav-links button{font-size:10px!important}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  #experience,.su6-mobile-service-rail,.su6-mobile-project-rail{scroll-behavior:auto!important}
  #section4 .su6-mobile-brand-cell .brand-bob{animation:none!important}
}
/* Final mobile correctness fixes: the opening copy is readable before animation starts. */
@media(max-width:700px){
 #section1 .intro-statement>.eyebrow,#section1 .intro-statement>h1,#section1 .intro-statement>p{opacity:1!important;filter:none!important;transform:none!important;animation:none!important;will-change:auto!important}
 #section1 .scroll-hint{opacity:1!important;transition:none!important}
 #section5.su6-mobile-contact-active{z-index:200!important;overflow:visible!important}
 #section5.su6-mobile-contact-active .contact-panel.su6-mobile-form-open{z-index:220!important}
}
@media(max-width:700px){.su6-sponsor-toggle{font-size:12px!important;font-weight:800!important;letter-spacing:-.04em!important}}
/* Anchor navigation and native snap stop below the persistent top header. */
@media(max-width:700px){
 #experience{scroll-padding-top:66px!important}
 #experience .sea-section{scroll-margin-top:66px!important}
}
@media(max-width:700px){
 #section4 .su6-mobile-brand-cell [hidden]{display:none!important}
 #section4 .su6-mobile-brand-cell .brand-mark{position:absolute;top:50%;left:50%;width:68%;max-width:68%;height:60%;max-height:60%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 7px #002b44a0)}
}