/* Shared small-screen experience across home, services, and portfolio. */
.mobile-service-name{display:none}
:focus-visible{outline:3px solid #b63bef;outline-offset:4px}
@media(max-width:750px){
 html{scroll-padding-top:90px}
 .wrap{width:calc(100% - 40px)}
 header,header.scrolled{height:74px}
 .nav{gap:16px;position:relative}
 .logo img{width:108px}
 .menu-toggle{display:block;min-height:44px;min-width:80px;color:inherit;background:none;border:1px solid #ffffff80;border-radius:30px;padding:10px 16px;font-size:14px}
 header nav{display:none;position:absolute;top:73px;left:-20px;right:-20px;background:#7321d0;color:white;padding:16px 20px 24px;flex-direction:column;align-items:stretch;gap:4px;border-bottom:1px solid #ffffff40;max-height:calc(100dvh - 74px);overflow-y:auto;box-shadow:0 18px 30px #260a3e24}
 .nav.open nav{display:flex}
 header nav>a,header .drop>button{font-size:16px;min-height:48px;display:flex;align-items:center;padding:12px 8px;width:100%;text-align:left}
 header nav>.btn{justify-content:space-between;padding:14px 20px;margin-top:10px}
 header .drop-menu{position:static;box-shadow:none;border:0;background:#ffffff;color:#342048;margin:4px 0 12px;border-radius:8px;padding:6px}
 header .drop:not(.open) .drop-menu{display:none}
 header .drop.open .drop-menu{display:block}
 header .drop-menu a{font-size:15px;min-height:44px;line-height:1.4}
 .section{padding:54px 0}
 .hero-grid,.split,.contact-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 .hero h1{font-size:clamp(42px,11.8vw,65px);letter-spacing:-2.3px;line-height:1.04;margin:12px 0 24px}
 h2,.clients h2{font-size:clamp(31px,8.6vw,42px);letter-spacing:-1.3px;line-height:1.12}
 h1,.service-hero h1,.portfolio-intro h1,.project-intro h1{font-size:clamp(38px,10.5vw,58px);letter-spacing:-1.8px;overflow-wrap:break-word}
 .home .hero{padding:30px 0 36px}
 .hero-copy>p,.section-intro p,.about p,.service-panel-copy p{font-size:16px;line-height:1.65}
 .eyebrow{font-size:10px;line-height:1.5;letter-spacing:1.5px}
 .actions{flex-direction:column;align-items:stretch;gap:12px}
 .btn{font-size:15px;min-height:48px;padding:14px 20px;gap:16px;line-height:1.4;white-space:normal}
 .actions .textlink{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:14px}
 .textlink{font-size:14px;line-height:1.6}
 .hero-scene{height:330px;margin:8px 0 0}
 .hero-portrait,.home .hero-portrait{inset:0 12px 25px 12px;transform:none;border-radius:12px 65px 12px 12px}
 .mini-photo,.scene-caption{display:none}
 .scene-tag{right:0;bottom:6px;font-size:12px;padding:14px 18px;animation:none;transform:none}
 .scene-sticker.trace-sticker{right:0;top:-10px;width:55px;height:55px}
 .trace-sticker .brand-trace{width:55px;height:55px;animation:none}
 .hero-bottom{margin-top:20px}.chip{font-size:12px;min-height:40px;display:inline-flex;align-items:center;padding:9px 13px}
 .ticker-copy{padding:17px 14px;font-size:12px;gap:25px}
 .intent-map{padding:23px 20px}.intent-node{gap:16px}.intent-node p{font-size:14px}.intent-map-foot{font-size:8px;letter-spacing:.3px}
 .section-intro{display:block;margin-bottom:26px}.section-intro p{max-width:none}
 .service-explorer{display:block}.service-choices{display:none}
 .service-panels{display:grid;gap:16px}
 .service-panel,.service-panel[hidden]{display:block;min-height:0;animation:none;border-radius:12px;border-color:#ddcde9;box-shadow:0 6px 24px #32114e05}
 .service-panel-image{display:none}
 .service-panel-copy{padding:25px 22px}
 .mobile-service-name{display:block;color:#7321d0;font-size:13px;font-weight:700;letter-spacing:.7px;line-height:1.5;margin-bottom:15px}
 .service-panel-copy>small{font-size:13px;line-height:1.5;margin-bottom:12px;color:#75538c}
 .service-panel-copy h3{font-size:28px;line-height:1.15;letter-spacing:-.8px;margin-bottom:16px}
 .service-panel-copy p{margin-bottom:20px}
 .service-panel-copy ul{margin:18px 0 23px;gap:7px}
 .service-panel-copy li{font-size:12px;line-height:1.4;padding:7px 10px}
 .service-panel-copy .btn{font-size:14px;width:100%;padding:13px 17px}
 .service-bottom-cta .btn,.inline-cta .btn{width:100%}
 .photo-rail{display:grid;grid-template-columns:1fr;gap:16px;padding:0 20px;overflow:visible;cursor:auto}
 .photo-rail figure{height:270px;width:100%;scroll-snap-align:none}
 .photo-rail figcaption{padding:30px 22px 20px;inset:25% 0 0}
 .photo-rail h3{font-size:25px}.rail-controls{display:none}
 .rail-end{height:auto;min-height:145px;width:100%;padding:24px;gap:16px;font-size:18px}
 .rail-end>.brand-trace{width:45px;height:45px}.rail-end .textlink{min-height:44px}
 .timeline .step{padding-left:65px;padding-bottom:28px;min-height:0}.timeline .step h3{font-size:23px}.timeline .step p{font-size:15px;line-height:1.65}.step:hover{transform:none}
 .about-photo{width:100%;margin:0}.about-photo img{height:330px;border-radius:65px 10px 10px 10px}.trace-seal{right:-5px;bottom:0}
 .faq summary{font-size:16px;line-height:1.5;min-height:44px;align-items:center}.faq details{padding:16px 0}.faq details p{font-size:15px}
 .contact-grid{gap:24px}.contact-panel{padding:22px 18px;border-radius:12px;min-width:0}
 .contact-panel label{font-size:14px;line-height:1.4;margin-bottom:9px}
 .contact-panel input,.contact-panel select,.contact-panel textarea{font-size:16px;min-height:48px;padding:13px 12px;border-radius:6px;max-width:100%}
 .contact-panel textarea{min-height:130px}.contact-panel button[type=submit]{width:100%}.contact-panel .small{font-size:13px;line-height:1.6}
 .brief-actions{flex-direction:column}.brief-actions .btn{font-size:14px;width:100%}
 footer{padding:40px 0 90px}.foot-top{flex-direction:column;gap:32px}.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:25px;width:100%;font-size:14px}.foot-links a{min-height:40px;line-height:1.5;display:flex;align-items:center;gap:8px}.foot-links div{gap:8px}.foot-bottom{flex-direction:column;gap:12px;font-size:12px;line-height:1.6;margin-top:25px}
 .footer-socials a,.footer-socials .social-pending{width:46px;height:46px}
 .motion-toggle{position:static;display:block;margin:0 20px 20px;min-height:40px;font-size:12px;box-shadow:none}
 .whatsapp-float{right:14px;bottom:max(14px,env(safe-area-inset-bottom));padding:13px;border-radius:50%}.whatsapp-float>span{display:none}.whatsapp-float svg{width:27px;height:27px}
 .service-hero .intro,.service-human p,.delivery,.audience ul{font-size:16px}.service-tabs a{font-size:13px;min-height:44px;display:flex;align-items:center}
 .deliveries{grid-template-columns:1fr}.project-detail{grid-template-columns:1fr;gap:28px}.project-detail aside{position:static}.project-cover{height:340px}.project-detail>figure{padding:18px}.project-grid{grid-template-columns:1fr}
 .service-photo-banner span{padding:24px;font-size:28px}.service-photo-banner img{height:260px}.human-photo-pair img{height:240px}.web-project-copy p,.website-card p,.project-card>p{font-size:15px}.web-project-actions .textlink{font-size:13px;min-height:44px;display:flex;align-items:center}.web-format-links a{min-height:44px;display:flex;align-items:center}
 .motion-ready .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.service-panel-copy{padding:23px 18px}.foot-links{grid-template-columns:1fr}.intent-map{padding:20px 16px}.hero-scene{height:290px}}
@media(max-width:750px){
 /* Keep WhatsApp available throughout mobile navigation. */
 .whatsapp-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;width:54px;height:54px;min-height:54px;margin:0;padding:13px;justify-content:center;border-radius:50%;box-shadow:0 5px 20px #102e2433}
 .whatsapp-float>span{display:none}
 .home .hero .hero-copy h1{font-size:clamp(42px,11.8vw,65px)}
}

/* Reserve room for the persistent contact control when reaching a section. */
@media(max-width:750px){html{scroll-padding-bottom:90px}.links-page{padding-bottom:90px}}

/* Slow, continuous rotation for decorative Maya stars on every screen size. */
@keyframes maya-star-turn{from{rotate:0deg}to{rotate:360deg}}
.brand-trace,.trace-sticker .brand-trace,.trace-seal .brand-trace{animation:maya-star-turn 24s linear infinite;transform-origin:center}
.ticker-copy>.brand-trace{animation-duration:18s}
.rail-end>.brand-trace,.trace-seal .brand-trace{animation-direction:reverse;animation-duration:30s}
.service-bloom:not(:has(img)){animation:maya-star-turn 40s linear infinite}
@media(prefers-reduced-motion:reduce){.brand-trace,.trace-sticker .brand-trace,.trace-seal .brand-trace,.service-bloom:not(:has(img)){animation:none!important}}

/* In-page website filters must stay in content flow on phones. */
@media(max-width:750px){.web-format-links{position:static;inset:auto;display:flex;flex-direction:row;align-items:center;padding:0;background:transparent;border:0;max-height:none;overflow:visible;box-shadow:none}}