/* Phone layer. Desktop stays exactly as designed, apart from the gentle reveal below. */
@keyframes xf-rise{from{opacity:0;transform:translateY(1.125rem)}to{opacity:1;transform:none}}
@keyframes xf-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes xf-fade{from{opacity:0}to{opacity:1}}

/* Lists come in softly while scrolling, where the browser supports it. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .alist li,.wlist li,.person,.sample,.proc li,.why li{animation:xf-rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}

/* Past the 1440px design width every size grows with the screen, so large
   screens and zoomed-out windows keep the same proportions as the design. */
@media (min-width:1441px){html{font-size:calc(100vw / 90)}}
:where(svg[width="9"]){width:.5625rem;height:.5625rem}
:where(svg[width="16"]){width:1rem;height:1rem}
:where(svg[width="22"]){width:1.375rem;height:1.375rem}

.tabbar,.sheet-handle{display:none}

/* One calm solid colour per studio, on the service panels only. */
[data-p5]:nth-child(2){background:#C8553D;color:#fff}
[data-p5]:nth-child(4){background:#3D2C5C;color:#fff}
[data-p5]:nth-child(5){background:#E9DFC9;color:var(--ink);box-shadow:none}
[data-p5]:nth-child(2) .p5-bar i svg{color:#C8553D}
[data-p5]:nth-child(4) .p5-bar i svg{color:#3D2C5C}
[data-p5]:nth-child(5) .p5-bar i svg{color:#E9DFC9}
.vis-media img{mix-blend-mode:screen}

/* The desktop menu hides at 73.75rem, so the app bar and sheet take over there. */
@media (max-width:1180px){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
  .nav{view-transition-name:xf-nav}
  .tabbar{view-transition-name:xf-tabs}

  :root{--navh:3.75rem;--tabh:3.875rem}
  html{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
  body{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
  a,button,summary,label,select,figure[role=button]{touch-action:manipulation}
  input,select,textarea{font-size:1rem}
  .b,.ln,.rb,.sample,.pj,.st,.alist a,.wlist a,.lt,.person,figure[role=button]{transition:transform .15s ease,opacity .15s ease}
  .b:active,.rb:active,.sample:active,.pj:active,.st:active,.alist a:active,.wlist a:active,figure[role=button]:active{transform:scale(.975);opacity:.85}

  /* Top bar */
  .burger{display:none}
  .nav-r .b-sm{display:none}
  .nav-r .lang{display:inline-flex;align-items:center;height:2.375rem;padding:0 0.875rem;border-radius:62.4375rem;box-shadow:inset 0 0 0 1px currentColor;font-size:0.875rem}
  .logo img{max-height:2rem;width:auto}

  /* Bottom tabs */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;z-index:70;height:calc(var(--tabh) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(1.125rem) saturate(1.5);backdrop-filter:blur(1.125rem) saturate(1.5);box-shadow:inset 0 1px 0 var(--line)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;min-width:0;color:var(--mute);font-size:0.6875rem;font-weight:500;line-height:1;white-space:nowrap;transition:color .15s}
  .tabbar svg{width:1.4375rem;height:1.4375rem;transition:transform .2s var(--ease)}
  .tabbar [aria-current],.tabbar [aria-expanded=true]{color:var(--blue)}
  .tabbar [aria-current] svg{transform:translateY(-1px) scale(1.08)}
  .tabbar a:active svg,.tabbar button:active svg{transform:scale(.88)}

  /* Menu sheet */
  .mnav{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(10,10,10,.5);color:var(--ink);padding:0;overflow:hidden;animation:xf-fade .18s ease both}
  .sheet-back{flex:1;min-height:2.5rem}
  .sheet{max-height:88svh;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border-radius:1.375rem 1.375rem 0 0;padding:0 1.125rem calc(1.375rem + env(safe-area-inset-bottom,0px));animation:xf-up .28s var(--ease) both}
  .sheet-handle{display:block;width:2.5rem;height:0.25rem;margin:0.625rem auto 0.5rem;border-radius:0.5625rem;background:var(--line)}
  .sheet-top{display:flex;justify-content:space-between;align-items:center;padding:0.375rem 0 0.875rem}
  .sheet-top img{height:1.625rem;width:auto}
  .sheet-x{width:2.375rem;height:2.375rem;border-radius:50%;background:var(--off);display:grid;place-items:center}
  .sheet-cta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;margin-bottom:1.125rem}
  .sheet-cta a{display:flex;flex-direction:column;gap:0.4375rem;align-items:center;justify-content:center;min-height:4.75rem;border-radius:0.875rem;background:var(--off);font-size:0.8125rem;font-weight:500;text-align:center}
  .sheet-cta a:first-child{background:var(--blue);color:#fff}
  .sheet-cta svg{width:1.375rem;height:1.375rem}
  .sheet h4{font-size:0.7812rem;font-weight:500;color:var(--mute);margin:0.875rem 2px 0.375rem}
  .sheet-list{border-radius:0.875rem;background:var(--off);overflow:hidden}
  .mnav nav.sheet-list{display:block;padding:0}
  .mnav .sheet-list a{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:3.125rem;padding:0.625rem 0.875rem;font-family:var(--t);font-size:0.9688rem;font-weight:500;letter-spacing:0;line-height:1.3;box-shadow:inset 0 -1px 0 var(--line)}
  .mnav .sheet-list a:last-child{box-shadow:none}
  .sheet-list a:active{background:var(--off2)}
  .sheet-list svg{flex:none;width:1rem;height:1rem;color:var(--mute)}
  [dir=rtl] .sheet-list svg{transform:scaleX(-1)}
  .sheet-lang{display:flex;align-items:center;justify-content:center;min-height:3rem;margin-top:0.875rem;border-radius:0.875rem;box-shadow:inset 0 0 0 1px var(--line);font-weight:500}
  body.menu-open{overflow:hidden}
}

@media (max-width:999px){
  /* Sections */
  .hero{height:64svh;min-height:26.25rem}
  .filters,.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);max-width:none}
  .filters::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
  .filters button,.chips li{flex:none;white-space:nowrap}

  /* Client logos become a swipeable strip on the home page */
  .cl-s .lgrid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:31vw;gap:0.375rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .cl-s .lgrid::-webkit-scrollbar{display:none}
  .cl-s .lt{scroll-snap-align:start}
  .lt img{filter:none;opacity:1}

  /* Studios */
  .p5-o{padding:1.25rem 1.125rem 1.5rem}
  .p5-o .vis{height:13.125rem}
  .p5-v{font-size:1.375rem}
  .p5-bar{padding:1rem 1.125rem}

  /* Case study slider: one clean card, swipe to change */
  .cshow{min-height:0;gap:1.375rem;padding-block:1.5rem}
  .cs-names{display:none}
  .cs-circle{width:min(72vw,18.75rem);box-shadow:0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.6)}

  /* Numbers become a swipeable strip */
  .ledger{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:42vw;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .ledger::-webkit-scrollbar{display:none}
  .ledger>*{scroll-snap-align:start}

  /* The tabs and menu already hold these links */
  .foot-top>div:nth-child(2),.foot-top>div:nth-child(3){display:none}
  .fm-track{font-size:4rem}
  .totop{display:none}
  .foot-bottom{justify-content:center;text-align:center}
}

@media (max-width:1180px){
  .mnav .sheet-lang{display:flex;width:100%;height:auto;margin-top:0.875rem;padding:0;font-size:0.9375rem;line-height:1;color:var(--ink)}
}

@media (max-width:999px){
  /* Media always fits the space it is given */
  main video,main iframe{max-width:100%}
  .ph-m{height:auto;aspect-ratio:4/3}
  .st img{object-fit:cover}
  .pj-i img,.sm-i img,.ah-i img,.af-i img{max-width:100%}

  /* Swipe strips must never widen the page */
  .ph-row>*,.ph-row .acts,.sh>*,.sh-a{min-width:0;max-width:100%}
  .ph-row .acts{width:100%;justify-content:flex-start}
  .sh-a:has(.filters){width:100%}

  /* A short footer */
  .fmarq{padding-block:0}
  .fm-track{font-size:2.125rem}
  .foot-top{grid-template-columns:1fr;gap:1.125rem;padding-block:1.5rem 1.125rem}
  .foot-top h4,.f-p{display:none}
  .f-lg{height:1.625rem;width:auto;margin-bottom:0.875rem}
  .foot .soc{margin-top:0;gap:0.5rem}
  .foot .soc a{width:2.5rem;height:2.5rem}
  .foot .addr{font-size:0.875rem;line-height:1.55;margin:0}
  .foot .addr+.addr{margin-top:0.375rem}
  .foot-bottom{padding-block:0.75rem 0.875rem;font-size:0.75rem;gap:0.25rem}
  .foot-bottom span:nth-child(2){display:none}
}

/* Calmer section sizes on large screens. */
@media (min-width:1000px){
  .sec{padding-block:clamp(3.5rem,6vw,6rem)}
  .cl-s{padding-top:clamp(3.5rem,6vw,6rem)}
  .nums{padding-block:clamp(3.5rem,6.5vw,6.875rem)}
  .ph-m{height:min(56vh,35rem)}
  .acc5{height:min(78vh,45rem);min-height:35rem}
  .cshow{min-height:min(40rem,82svh)}
  .cs-circle{width:min(42vh,22.5rem,80vw)}
  .cs-track b{font-size:clamp(2.5rem,5vw,5.5rem)}
  /* Team: the photo arc stays above the text and fades out before it */
  .crew{min-height:60rem;padding-block:6rem 5.625rem}
  .crew .arc-wrap{height:26.25rem;-webkit-mask-image:linear-gradient(#000 52%,transparent);mask-image:linear-gradient(#000 52%,transparent)}
  .crew .arc{top:48.125rem}
  .fmarq{padding-block:clamp(0.875rem,1.6vw,1.5rem)}
  .fm-track{font-size:clamp(2.75rem,4.6vw,5.25rem)}
  .foot-top{padding-block:clamp(2rem,3.4vw,3rem) 1.75rem}
  .foot-top ul:not(.soc){gap:0.375rem}
  .foot li a{font-size:0.9375rem}
  .f-lg{height:2.125rem}
  .addr+.addr{margin-top:0.75rem}
  .foot-bottom{padding-block:1rem 1.25rem}
}