@font-face {
  font-family:Sora;
  src:url('/assets/fonts/sora-300.woff2') format('woff2');
  font-weight:300;
  font-display:block
}
@font-face {
  font-family:Sora;
  src:url('/assets/fonts/sora-400.woff2') format('woff2');
  font-weight:400;
  font-display:block
}
@font-face {
  font-family:Sora;
  src:url('/assets/fonts/sora-500.woff2') format('woff2');
  font-weight:500;
  font-display:block
}
@font-face {
  font-family:Sora;
  src:url('/assets/fonts/sora-600.woff2') format('woff2');
  font-weight:600;
  font-display:block
}
@font-face {
  font-family:Sora;
  src:url('/assets/fonts/sora-700.woff2') format('woff2');
  font-weight:700;
  font-display:block
}
:root {
  -webkit-font-smoothing:antialiased;
  --ink:#030221;
  --lime:color(display-p3 .900416 .95122 .387997);
  --paper:#dfe0d3;
  --ux-paper:#e7e8e2;
  --coral:#ff6644;
  --lavender:#9694f3;
  --page-gutter:80px;
  --section-size:72px;
  --section-line:1.1
}
* {
  box-sizing:border-box;
  -webkit-font-smoothing:inherit
}
html {
  scroll-behavior:smooth
}
html.main-page {background:var(--ink)}
body {
  margin:0;
  background:var(--ink);
  font-family:Sora,sans-serif;
  color:var(--paper);
  overflow-x:hidden
}
main {overflow-x:clip}
body:has(dialog[open]) {
  overflow:hidden
}
h1,h2,h3,p {
  margin:0
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block
}
a:focus,button:focus,[tabindex]:focus {outline:none}
a:focus-visible {text-decoration:underline;text-underline-offset:.18em}
button:focus-visible {filter:brightness(.8)}
.mobile-copy {
  display:none
}
.hero {
  position:relative;
  background:var(--lime);
  color:var(--ink);
  padding:40px;
  isolation:isolate
}
.hero-content {
  width:65%;
  position:relative;
  z-index:3;
  padding-bottom:70px;
  display:flex;
  flex-direction:column;
  gap:56px
}
.hero header {
  display:flex;
  flex-direction:column;
  gap:40px
}
.header-line {
  display:flex;
  align-items:center;
  gap:48px;
  white-space:nowrap
}
.studio-font-pending .studio-label {visibility:hidden}
.studio-label {
  background:var(--ink);
  color:var(--lime);
  padding:10px 16px;
  font-size:18px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.04em
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:20px;
  font-weight:700;
  line-height:1.2
}
.desktop-nav-item {
  display:flex;
  align-items:center;
  gap:inherit
}
.desktop-nav-item > a {
  display:block
}
.desktop-nav-item:not(:last-child)::after {
  content:'';
  flex:none;
  width:8px;
  height:8px;
  background:var(--ink)
}
.desktop-nav a:hover {
  transform:scale(1.1)
}
.mafa-logo {
  width:100%;
  height:auto;
  aspect-ratio:3.72199
}
.hero-tagline {
  font-size:48px;
  font-weight:700;
  line-height:1.2
}
.hero-line {
  display:block
}
.char {
  display:inline;
  transform-origin:center;
  backface-visibility:hidden
}
html.hero-text-pending .hero-tagline .word .char {display:inline-block;opacity:.001;transform:rotateY(90deg)}
html.client-entrance-pending .client-entrance {opacity:.001}
html.home-sequence-pending .hero {clip-path:inset(0 0 100px 0)}
html.home-sequence-pending .work {opacity:0}
.hero-visual {
  position:absolute;
  right:42px;
  top:0;
  width:600px;
  height:570px;
  z-index:1
}
.hero-background {
  position:absolute;
  inset:-40px 0 0;
  background:#00ccff
}
.hero-stage {
  position:absolute;
  bottom:-119px;
  right:-112px;
  width:647px;
  height:668px;
  cursor:grab;
  touch-action:pan-y;
  overflow:hidden
}
.hero-stage.dragging {
  cursor:grabbing
}
.hero-slide {
  position:absolute;
  inset:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(657px) scale(.3)
}
.hero-slide:last-child img {
  width:901px;
  height:90.12%;
  top:4.94%
}
.hero-slide.active {
  visibility:visible;
  transform:none
}
.hero-slide img {
  position:absolute;
  width:1000px;
  height:100%;
  left:50%;
  transform:translateX(-50%);
  object-fit:contain;
  user-select:none
}
.round-link {position:relative;display:block;width:120px;height:120px;flex:none}
.ring-text {position:absolute;width:112px;height:112px;left:4px;top:4px;fill:currentColor;font-size:14px;font-weight:500;letter-spacing:.22em;animation:none}
.round-center {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:var(--lime);overflow:hidden}
.round-arrow {position:absolute;width:62px;height:34px;left:-14px;top:17px}
.round-arrow img {width:61px;height:34px}
.hero-scroll {position:absolute;bottom:-52px;left:-76px;width:110px;height:110px;z-index:4;overflow:hidden}
.hero-scroll .ring-text {width:100px;height:100px;top:5px;left:5px;font-weight:700;letter-spacing:.125em;fill:#000;z-index:1}
.hero-scroll .round-center {left:auto;right:5px;top:9px;transform:none;width:62px;height:62px;background:var(--coral);z-index:0}
.hero-scroll .round-arrow {width:47px;height:26px;left:30.5px;top:32px;transform:rotate(90deg);z-index:1}
.hero-scroll .round-arrow img {position:absolute;left:-.5px;top:-1.5px;width:47px;height:27px}
@keyframes ring-turn {
  to {
    transform:rotate(-360deg)
  }
}
.clients {
  padding:32px 0;
  height:146px;
  overflow:hidden;
  border-bottom:1px solid #dfe0d333
}
.client-track {
  height:81px;
  display:flex;
  width:max-content;
  will-change:transform
}
.client-set {
  display:flex;
  align-items:center;
  gap:var(--client-gap,80px);
  padding-right:var(--client-gap,80px);
  flex:none;
  height:81px
}
.client-set img {
  object-fit:contain;
  height:90px;
  width:125px;
  flex:none
}
.client-set img:nth-child(2) {
  width:141px
}
.client-set img:nth-child(5) {
  width:113px
}
.section-heading {
  padding:48px;
  display:flex;
  justify-content:center;
  align-items:center
}
.section-heading h2,footer h2 {
  font-size:var(--section-size);
  line-height:var(--section-line);
  font-weight:700;
  color:var(--lime)
}
.project-grid {
  padding:0 var(--page-gutter);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px 32px
}
.project-card {
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0
}
.project-media {
  position:relative;
  aspect-ratio:1.517;
  border-radius:16px;
  overflow:hidden
}
.project-media picture {
  display:block;
  width:100%;
  height:100%
}
.project-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s
}
.project-card.is-opening .project-media {
  transform:scale(.95);
  transition:transform .18s cubic-bezier(.22,1,.36,1)
}
.project-video {
  display:none
}
.soon {
  position:absolute;
  right:8px;
  top:8px;
  padding:6px 8px 5px;
  background:#000;
  color:var(--paper);
  font-size:10px;
  line-height:12px;
  font-weight:500
}
.project-caption {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px
}
.project-icon {
  width:56px;
  height:56px;
  border-radius:8px;
  overflow:hidden;
  flex:none;
  background:white
}
.project-icon img {
  width:100%;
  height:100%;
  object-fit:cover
}
.project-caption h3 {
  font-size:20px;
  line-height:24px;
  font-weight:600
}
.project-caption p {
  font-size:16px;
  line-height:19.2px;
  font-weight:300
}
.experience {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:48px;
  padding:40px var(--page-gutter);
  border-bottom:1px solid #dfe0d333
}
.stats {
  display:flex;
  align-items:center;
  gap:32px
}
.stat {
  display:flex;
  align-items:center;
  gap:16px
}
.stat-number {
  font-size:64px;
  line-height:1.2;
  font-weight:500
}
.stat-label {
  font-size:16px;
  line-height:24px;
  font-weight:500
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  padding:0 var(--page-gutter) 24px
}
.service-card {
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:27px;
  padding:40px 40px 45px;
  background:var(--paper);
  color:var(--ink);
  border-radius:32px;
  min-height:306px
}
.service-ux {
  background:var(--ux-paper);
  padding-bottom:37px
}
.service-ux .service-copy {
  height:138px
}
.service-copy {
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px
}
.service-label {
  font-size:16px;
  line-height:19.2px;
  letter-spacing:0;
  font-weight:600;
  background:var(--ink);
  color:var(--lime);
  padding:6px 10px 5px;
  width:max-content
}
.service-ux .service-label {
  letter-spacing:.04em
}
.service-title {
  font-size:40px;
  line-height:48px;
  font-weight:700;
  min-height:95.8px
}
.service-link {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:56px;
  flex:none;
  border-radius:100px;
  background:var(--lime);
  padding:8px 14px 8px 32px;
  font-size:16px;
  line-height:19.2px;
  font-weight:600;
  letter-spacing:.04em
}
.service-link img {
  width:40px;
  height:40px;
  transform:translateX(-24px);
  transition:transform .5s
}
.service-link:hover img {
  transform:translateX(0)
}
#motion-shader {
  position:absolute;
  z-index:1;
  height:536px;
  top:-136px;
  left:0;
  right:0;
  pointer-events:none
}
.testimonials .section-heading {
  padding:48px
}
.testimonial-window {
  overflow:hidden;
  padding:0 80px 10px;
  touch-action:auto
}
.testimonial-track {
  display:flex;
  gap:40px;
  padding:0;
  margin:10px 10px 0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}
.testimonial-track::-webkit-scrollbar {display:none}
.testimonial {
  scroll-snap-align:start;
  border:0;
  position:relative;
  border-radius:24px 0 24px 24px;
  flex:0 0 calc((100% - 80px)/3);
  padding:24px 0 24px 24px;
  display:flex;
  flex-direction:column;
  gap:24px
}
.testimonial::before {content:"";position:absolute;inset:0;border:0 solid #dfe0d333;border-left-width:1px;border-top-width:1px;border-radius:inherit;pointer-events:none}
.testimonial-person {
  display:flex;
  align-items:center;
  gap:16px
}
.avatar {
  display:block;
  flex:none;
  width:72px;
  height:87px;
  border-radius:16px;
  background:#9999ff
}
.testimonial-person > div {flex:1;min-width:0}
.testimonial-person h3 {
  font-weight:500;
  font-size:24px;
  line-height:1.3;
  color:var(--coral);
  margin-bottom:2px
}
.testimonial-person p {
  font-size:16px;
  line-height:1.4;
  font-weight:400
}
.testimonial-person .website {
  font-size:14px;
  line-height:1.2;
  margin-top:2px;
  opacity:.5
}
.quote {
  font-size:16px;
  line-height:1.4;
  font-weight:400
}
footer {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  padding:64px 80px 160px
}
.contact-links {
  display:flex;
  align-items:center;
  gap:24px
}
.contact-links a {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:24px;
  line-height:1.3;
  font-weight:500;
  color:#fff
}
.contact-links a:visited {color:#fff}
.contact-footer-icon {display:block;width:48px;height:48px;flex:none;background:var(--lime);mask:center / contain no-repeat;-webkit-mask:center / contain no-repeat}
.contact-footer-icon-email {mask-image:url('/assets/email.svg');-webkit-mask-image:url('/assets/email.svg')}
.contact-footer-icon-phone {mask-image:url('/assets/phone.svg');-webkit-mask-image:url('/assets/phone.svg')}
.contact-links img {
  width:48px;
  height:48px;
  object-fit:contain
}
.contact-links a:hover {
  color:var(--lime)
}
.menu-toggle {
  position:fixed;
  right:0;
  top:40px;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--ink);
  border:0;
  width:100.8px;
  height:88px;
  cursor:pointer;
  transform:none
}
.menu-background {position:absolute;inset:0;border-radius:inherit;background:var(--lime);opacity:0;z-index:-1;transition:background-color .75s cubic-bezier(.22,1,.36,1),backdrop-filter .75s cubic-bezier(.22,1,.36,1),-webkit-backdrop-filter .75s cubic-bezier(.22,1,.36,1)}
.menu-toggle:not(.visible) .burger {visibility:hidden}
.menu-toggle.visible {transform:none}
.burger {
  display:flex;
  flex-direction:column;
  gap:8px;
  width:50px
}
.burger i {
  display:block;
  background:var(--ink);
  height:8px;
  width:100%
}
.menu-close {
  display:none;
  font-size:64px;
  font-weight:700;
  line-height:1
}
.menu-toggle[aria-expanded=true] .burger {
  display:none
}
.menu-toggle[aria-expanded=true] .menu-close {
  display:block
}
dialog {
  position:fixed;
  inset:0;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  border:0;
  padding:0;
  background:#000b;
  color:var(--paper);
  z-index:30;
  overflow:auto
}
dialog::backdrop {
  background:transparent
}
.menu-content {min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}
.menu-symbol {display:block;width:62px;height:62px;flex:none}
.services-menu-symbol {display:block;width:100%;height:100%}
.overlay-nav {
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:40px;
  font-size:56px;
  line-height:1.2;
  font-weight:700
}
.overlay-nav a:hover {
  color:var(--lime)
}
.overlay-nav a[aria-current=location] {text-decoration:underline;text-underline-offset:.18em}
.overlay-nav a:focus-visible,.menu-symbol:focus-visible {text-decoration:none;opacity:.7}
.overlay-nav a[aria-current=location]:focus-visible {text-decoration:underline}
@media(min-width:960px) and (max-width:1399.98px) {
  :root {
    --page-gutter:40px;
    --section-size:64px
  }
  .hero {
    padding:48px 40px 64px
  }
  .hero-content {
    width:70%;
    gap:48px;
    padding-bottom:72px
  }
  .hero header {
    gap:32px
  }
  .studio-label {
    font-size:16px
  }
  .desktop-nav {
    display:none
  }
  .hero-tagline {
    font-size:40px;
    width:70%
  }
  .hero-visual {
    width:397px;
    height:308px;
    top:230px;
    right:0
  }
  .hero-background {
    inset:0 -42px 0 0
  }
  .hero-stage {
    inset:-99px -42px -83px 0;
    width:auto;
    height:auto
  }
  .hero-scroll {
    bottom:-60px;
    left:-68px
  }
  .project-media {
    aspect-ratio:1.79725
  }
  .project-grid {
    row-gap:32px
  }
  .experience {
    gap:40px
  }
  .stats {
    gap:40px
  }
  .service-card {
    padding:24px;
    border-radius:20px;
    min-height:255px;
    gap:27px
  }
  .service-title {
    font-size:32px;
    line-height:38.4px;
    min-height:76.8px
  }
  .service-grid {
    padding-bottom:24px
  }
  .testimonial-window {
    padding:0 40px
  }
  .testimonial-person h3 {
    font-size:20px
  }
  .contact-links a {
    font-size:20px
  }
  .menu-toggle {
    transform:none;
    opacity:1;
    top:32px
  }
  .testimonial-track {
    gap:40px
  }
}
@media(max-width:959.98px) {
  :root {
    --page-gutter:20px;
    --section-size:40px;
    --section-line:1.3
  }
  .desktop-copy {
    display:none
  }
  .mobile-copy {
    display:inline
  }
  .hero {
    padding:24px 20px 208px;
    overflow:hidden
  }
  .hero-content {
    width:100%;
    gap:40px;
    padding-bottom:8px
  }
  .hero header {
    gap:24px
  }
  .header-line {
    gap:16px
  }
  .studio-label {
    font-size:16px;
    padding:5px 10px;
    letter-spacing:.04em
  }
  .desktop-nav {
    display:none
  }
  .mafa-logo {
    aspect-ratio:3.7619
  }
  .hero-tagline {
    font-size:24px;
    width:70%
  }
  .hero-visual {
    width:217px;
    height:174px;
    top:auto;
    bottom:103px;
    right:0
  }
  .hero-background {
    inset:0 -25px 0 0
  }
  .hero-stage {
    inset:-69px -35px -67px -2px;
    width:auto;
    height:auto
  }
  .hero-scroll {
    width:110px;
    height:110px;
    bottom:-59px;
    left:-75px
  }
  .clients {
    height:114px;
    padding:16px 0
  }
  .section-heading {
    justify-content:flex-start;
    padding:40px 20px
  }
  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 20px
  }
  .project-card {
    height:200px;
    gap:8px
  }
  .project-media {
    aspect-ratio:auto;
    height:152px;
    flex:none
  }
  .project-caption {
    height:40px;
    min-height:40px;
    gap:8px;
    align-items:flex-start
  }
  .project-icon {
    width:40px;
    height:40px;
    flex:none
  }
  .project-caption h3 {
    font-size:12px;
    line-height:14.4px;
    font-weight:600;
    margin-top:4px
  }
  .project-caption p {
    font-size:10px;
    line-height:12px;
    font-weight:300
  }
  .project-card.desktop-only {
    display:none
  }
  .project-card.has-video {
    grid-column:1/-1;
    padding-bottom:8px
  }
  .has-video .project-photo {
    display:none
  }
  .has-video .project-video {
    display:block;
    object-fit:cover;
    width:100%;
    height:100%;
    border-radius:16px
  }
  .has-video .project-media {
    height:144px
  }
  .experience {
    justify-content:space-between;
    padding:24px 20px 60px;
    gap:10px
  }
  .stats {
    gap:32px
  }
  .stat {
    flex-direction:column;
    align-items:flex-start;
    gap:2px
  }
  .stat-number {
    font-size:40px;
    line-height:48px
  }
  .stat-label {
    font-size:14px;
    line-height:21px
  }
  .service-grid {
    grid-template-columns:1fr;
    padding-bottom:48px;
    gap:16px
  }
  .services .section-heading {
    padding:40px 20px 54px
  }
  .service-card {
    min-height:0;
    padding:32px 24px;
    border-radius:20px;
    gap:19px
  }
  .service-copy {
    gap:16px
  }
  .service-title {
    font-size:30px;
    line-height:36px;
    min-height:72px
  }
  .service-link {
    margin-top:0
  }
  .testimonials .section-heading {
    padding:40px 20px
  }
  .testimonial-window {
    padding:0 0 0 20px
  }
  .testimonial-track {
    gap:24px;
    margin:0;
    padding:0
  }
  .testimonial {
    flex:0 0 calc(100% - 104px)
  }
  .testimonial-person h3 {
    font-size:18px
  }
  .testimonial-person {
    gap:16px
  }
  .avatar {
    height:88px;
    width:72px
  }
  footer {
    align-items:flex-start;
    padding:40px 20px 80px;
    gap:16px
  }
  .contact-links {
    flex-direction:column;
    align-items:flex-start;
    gap:8px
  }
  .contact-links a {
    font-size:18px;
    gap:16px
  }
  .contact-links img {
    width:40px;
    height:40px
  }
  .contact-footer-icon {width:40px;height:40px}
  .menu-toggle {
    transform:none;
    opacity:1;
    top:10px;
    right:8px;
    width:56px;
    height:56px;
    border-radius:12px
  }
  .menu-toggle.dark {color:var(--lime)}
  .menu-toggle.dark .menu-background {background:#6669}
  .menu-toggle.dark .burger i {background:var(--lime)}
  .burger {
    width:32px;
    gap:7px
  }
  .burger i {
    height:3px
  }
  .menu-close {
    font-size:0;
    width:40px;
    height:40px;
    position:relative
  }
  .menu-close::before,.menu-close::after {
    content:'';
    position:absolute;
    left:2px;
    top:19px;
    width:36px;
    height:3px;
    background:var(--ink);
    transform:rotate(45deg)
  }
  .menu-close::after {
    transform:rotate(-45deg)
  }
  .overlay-nav {
    font-size:30px;
    gap:32px
  }
}
@media(min-width:2000px) {
  :root {
    --page-gutter:160px;
    --section-size:96px
  }
  .hero {
    padding:64px 120px 140px
  }
  .hero-content {
    width:70%;
    padding-bottom:152px
  }
  .hero header {
    gap:56px
  }
  .hero-tagline {
    width:85%
  }
  .header-line {
    gap:80px
  }
  .desktop-nav {
    gap:40px
  }
  .desktop-nav a {
    gap:40px
  }
  .hero-visual {
    width:860px;
    height:860px;
    right:72px
  }
  .hero-stage {
    width:860px;
    height:904px;
    bottom:-159px;
    right:-100px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .char {
    opacity:1!important;
    transform:none!important
  }
}
.word {
  display:inline-block;
  white-space:nowrap
}
.service-card:not(.service-ux) {
  gap:32px;
  padding-bottom:40px
}
.service-link img {
  width:20px;
  height:14px;
  transform:none
}
.service-link:hover img {
  transform:translateX(6px)
}
@media(min-width:960px) and (max-width:1399.98px) {
  .experience {
    padding-top:32px;
    padding-bottom:32px
  }
  .service-ux .service-copy {
    height:auto
  }
  .service-card:not(.service-ux) {
    padding-bottom:24px;
    gap:32px
  }
}
@media(max-width:959.98px) {
  .experience {
    padding:32px 32px 32px 20px;
    align-items:flex-start
  }
  .services .section-heading {
    padding-bottom:40px
  }
  .service-ux .service-copy {
    height:auto
  }
  .service-card:not(.service-ux) {
    gap:16px;
    padding-bottom:32px
  }
  .testimonial-person {
    gap:16px
  }
  .avatar {
    height:88px
  }
}
@media(max-width:959.98px) {
  .service-grid {
    padding-bottom:16px
  }
  .testimonial-track {
    padding-top:0;
    position:relative;
    top:0
  }
  .avatar {
    height:87px
  }
  footer {
    gap:24px
  }
}
@media(min-width:960px) and (max-width:1399.98px) {
  .client-set {
    --client-gap:64px
  }
}
@media(max-width:959.98px) {
  .client-set {
    --client-gap:56px
  }
}
@media(max-width:959.98px) {
  .has-video .project-media picture {
    display:none
  }
}
@media(min-width:960px) and (max-width:1399.98px) {
  .testimonial-window {
    padding-bottom:10px
  }
}
.client-set a {
  display:block;
  flex:none;
  width:113px;
  height:90px
}
.client-set a img {
  width:113px
}
.hero-content {
  pointer-events:none
}
.desktop-nav {
  pointer-events:auto
}
.testimonial-track:focus-visible {
  filter:brightness(.85)
}

.client-entrance {height:81px}
.service-link {padding-right:24px}

/* The original Framer icon is 24px in a 40px transparent circular slot. */
.service-card .service-link {padding-right:14px}
.service-arrow {display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none}
.service-link .service-arrow img {display:block;width:24px;height:24px;transform:none}
.service-link:hover .service-arrow img {transform:translateX(6px)}
@media(max-width:959.98px) {
  dialog.pointer-open .overlay-nav a:focus {outline:none}
  dialog.pointer-open .overlay-nav a:not([aria-current=location]):focus {text-decoration:none}
  .testimonial-window {padding:0}
  .testimonial-track {padding-inline:20px;scroll-padding-inline:20px}
  .testimonial {flex-basis:calc(100% - 84px)}
  #motion-shader {background:#dfe0d3 url('/assets/motion-shader-mobile.png') center / 100% 100% no-repeat}
  #motion-shader > div {opacity:0}
  #motion-shader.shader-ready > div {opacity:1}
}
/* Keep keyboard focus from scrolling the clipped, oversize shader inside the card. */
@supports (overflow:clip) {
  @media(max-width:959.98px) {.service-motion {overflow:clip}}
}
@media(max-width:959.98px) and (prefers-reduced-motion:no-preference) {
  html.hero-motion .service-arrow {opacity:0;transform:translateX(-24px)}
}

/* Match the JS entrance keyframes before the module arrives, including its delay.
   Inline animation transforms take over without flashing the settled composition. */
@media(prefers-reduced-motion:no-preference) {
 html.hero-motion .hero-background {transform:translateY(-600px)}
 html.hero-motion .hero-stage {transform:translateX(600px)}
 html.hero-motion .hero-scroll {opacity:.001;transform:scale(.5)}
}
@media(prefers-reduced-motion:no-preference) and (max-width:1399.98px) {
 html.hero-motion .hero-background {transform:translateX(400px)}
}
@media(prefers-reduced-motion:no-preference) and (max-width:959.98px) {
 html.hero-motion .hero-background {transform:translateX(220px)}
 html.hero-motion .hero-stage {transform:translateX(300px)}
}

/* Pointer intent preserves native vertical touch scrolling over the logo strip. */
.clients {touch-action:pan-y;cursor:grab;user-select:none}
.clients.dragging {cursor:grabbing}
.clients a {cursor:inherit}
.clients:focus-visible {filter:brightness(.8)}

/* Shared hamburger: the mobile surface follows the reference scroll states. */
@media(max-width:959.98px) {
 .menu-toggle {transition:border-radius .75s cubic-bezier(.22,1,.36,1)}
 .menu-toggle.dark {border-radius:16px}
 .menu-toggle[aria-expanded=true] {border-radius:12px}
 .menu-background {background:rgba(236,252,83,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background-color .75s cubic-bezier(.22,1,.36,1),backdrop-filter .75s cubic-bezier(.22,1,.36,1),-webkit-backdrop-filter .75s cubic-bezier(.22,1,.36,1)}
 .menu-toggle.dark .menu-background {background:rgba(3,2,33,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .menu-toggle[aria-expanded=true] .menu-background {background:var(--lime);backdrop-filter:none;-webkit-backdrop-filter:none}
 .burger i {transition:background-color .75s cubic-bezier(.22,1,.36,1)}
}
@media(prefers-reduced-motion:reduce) {
 .menu-toggle,.menu-background,.burger i {transition:none}
}
.menu-toggle.at-top[aria-expanded=false] .menu-background {background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}