/* Refinements on top of the original design. */

/* Homepage animation pause buttons are hidden; the markup stays because app.js expects it. */
#motion,#journey-motion,#ai-motion{display:none}

/* Header: keep logo, "Let's talk" and the menu button on one row. */
header>.button{white-space:nowrap;flex:none}
@media(max-width:480px){header{gap:10px}header>.button{margin-right:0}.brand-logo{width:150px}}
@media(max-width:360px){header>.button{padding:8px 12px;gap:0}header>.button>span{display:none}.brand-logo{width:136px}.menu{padding:6px}}

/* Homepage services: swipeable slider on phones, grid elsewhere. Dots are added by services-slider.js. */
.services-dots{display:none}
@media(max-width:600px){
	.services{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6vw;margin-inline:-6vw;padding:4px 6vw 18px;scrollbar-width:none;overscroll-behavior-x:contain}
	.services::-webkit-scrollbar{display:none}
	.services>.service{flex:0 0 84%;scroll-snap-align:start;min-height:0}
	.services>.service:hover{transform:none}
	.services-dots{display:flex;justify-content:center;gap:4px;margin-top:6px}
	.services-dots button{width:28px;height:28px;padding:0;border:0;background:none;display:grid;place-items:center}
	.services-dots button::before{content:'';width:8px;height:8px;border-radius:999px;background:#c6d2de;transition:width .3s var(--ease),background .3s}
	.services-dots button[aria-current=true]::before{width:22px;background:var(--copper)}
}