/* Original client logos, displayed through individual viewports of their source image. */
.trust.container{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center;gap:40px;padding-block:30px}
.trust-top{min-width:0;text-align:left}
.trust-top p{font-size:14px;font-weight:500;line-height:1.5}
.trust-top p>span{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.logo-marquee{--logo-gap:55px;min-width:0;width:100%;overflow:hidden;padding-block:5px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.logo-marquee:focus-visible{outline:2px solid var(--accent-dark);outline-offset:4px;border-radius:3px}
.logo-track{display:flex;width:max-content;animation:client-logo-scroll 54s linear infinite;will-change:transform}
.logo-group{list-style:none;display:flex;align-items:center;gap:var(--logo-gap);flex-shrink:0;margin:0;padding:0 var(--logo-gap) 0 0}
.client-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;filter:grayscale(1);opacity:.68;transition:filter .25s,opacity .25s}
.client-logo svg{width:var(--logo-width);height:76px;display:block;overflow:hidden}
.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused}
.logo-marquee:hover .client-logo,.logo-marquee:focus-within .client-logo{filter:grayscale(0);opacity:1}
@keyframes client-logo-scroll{to{transform:translateX(-50%)}}

/* Four service-specific animated SVG symbols. */
.service-icon-frame{display:grid;place-items:center;width:78px;height:78px;border-radius:17px;background:linear-gradient(135deg,#27468508,#3db3c518);border:1px solid #2746850d}
.service-top .service-icon{width:64px;height:64px;overflow:visible;stroke:var(--accent-dark);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service-icon .icon-tint{fill:#3db3c512}
.service-icon .icon-accent{stroke:var(--accent)}
.service-icon .icon-fill{fill:var(--accent)}
.megaphone-body{transform-box:view-box;transform-origin:24px 33px;animation:megaphone-rock 4.6s ease-in-out infinite}
.sound-wave{stroke:var(--accent);animation:sound-ripple 2.3s ease-in-out infinite}
.sound-wave-two{animation-delay:.23s}
@keyframes megaphone-rock{0%,35%,100%{transform:rotate(0)}12%{transform:rotate(-5deg)}22%{transform:rotate(2deg)}}
@keyframes sound-ripple{0%,100%{opacity:.25}40%,62%{opacity:1}}
.clapper-lid{transform-box:view-box;transform-origin:11px 29px;animation:clapper-action 4.6s ease-in-out infinite}
@keyframes clapper-action{0%,12%,62%,100%{transform:rotate(0)}25%,45%{transform:rotate(-17deg)}54%{transform:rotate(3deg)}}
.curve-handles{stroke:var(--accent);opacity:.6;stroke-dasharray:2 3}
.animation-curve{stroke-width:2}
.curve-dot{fill:var(--accent);stroke:white;stroke-width:1.4;offset-path:path('M12 45C12 9 51 57 51 20');offset-rotate:0deg;animation:trace-curve 4.6s ease-in-out infinite}
@keyframes trace-curve{0%,8%{offset-distance:0%;opacity:0}15%{opacity:1}78%{opacity:1}88%,100%{offset-distance:100%;opacity:0}}
.phone-body{fill:white}
.broadcast-wave{stroke:var(--accent);animation:broadcast-signal 2.5s ease-in-out infinite}
.broadcast-wave-two{animation-delay:.18s}
.broadcast-wave-three{animation-delay:.36s}
.screen-play{animation:screen-glow 2.5s ease-in-out infinite}
@keyframes broadcast-signal{0%,100%{opacity:.22}35%,65%{opacity:1}}
@keyframes screen-glow{0%,100%{fill-opacity:.5}50%{fill-opacity:1}}

@media(max-width:800px){
  .trust.container{grid-template-columns:minmax(0,1fr);gap:20px;padding-block:25px}
  .trust-top{width:100%;text-align:center}
  .logo-marquee{--logo-gap:38px}
  .client-logo svg{width:calc(var(--logo-width)*.88);height:66px}
  .logo-track{animation-duration:48s}
  .header .header-cta{position:relative;gap:5px;font-size:12px;line-height:1.35;min-height:34px;padding:7px 10px;white-space:nowrap}
  .header .header-cta>span{display:inline;font-size:16px;line-height:1}
  .header .header-cta::before{content:'';position:absolute;inset:-5px 0}
}
@media(max-width:370px){
  .header .container{width:calc(100% - 24px)}
  .header-inner{gap:5px}
  .header .brand-word{font-size:18px}
  .header .header-cta{padding-inline:8px}
  .header .menu-toggle{width:32px;padding:5px}
}
@media(prefers-reduced-motion:reduce){
  .logo-track{animation:none;transform:none;will-change:auto}
  .logo-group[aria-hidden=true]{display:none}
  .logo-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none;scrollbar-width:thin}
  .service-icon *{animation:none!important}
  .curve-dot{offset-distance:50%;opacity:1}
}