/* Icons remain monochrome on platforms with colour emoji fonts. */
.im-ui-icon{display:inline-block!important;width:1em!important;height:1em!important;max-width:none!important;flex:none;vertical-align:-.13em;overflow:visible;pointer-events:none}
.motion-toggle::before,[data-work-pause]::before{content:"";display:inline-block;width:.72em;height:.9em;border-left:.22em solid currentColor;border-right:.22em solid currentColor;box-sizing:border-box;vertical-align:-.06em}
.motion-toggle::before{margin-right:.5em}
.motion-toggle[aria-pressed="true"]::before,[data-work-pause][data-paused="true"]::before{width:0;height:0;border:0;border-left:.75em solid currentColor;border-top:.45em solid transparent;border-bottom:.45em solid transparent}
.im-filter-toggle,.im-works-mobile-link,.im-news-mobile-link{display:none}
@media(max-width:900px){
  /* Render the completed client site, without depending on a nested animation. */
  .wf-web-hero .wf-web-hero__preview{display:none}
  .wf-page .wf-web-hero__viewport{aspect-ratio:1440/930}
  .wf-page .wf-web-hero__viewport>img{width:100%;height:100%;aspect-ratio:1440/930;object-fit:contain}
}
@media(max-width:600px){
  .im-works-intro>.im-button{display:none}
  .im-works-mobile-link{display:flex;justify-content:center;margin-top:24px}
  .im-works-mobile-link .im-button{margin:0;min-width:0}
  .im-home-news .im-news-list>a{grid-template-columns:88px 1fr;column-gap:14px}
  .im-home-news .im-news-list h3{grid-column:1/-1;grid-row:2;width:100%;min-width:0;font-size:15px;line-height:1.8}
  .im-home-news .im-news-list>a>span:not(.im-arrow){justify-self:start}
  .im-home-news .im-news-list .im-arrow{display:none}
  .wf-page .wf-ceo-portrait{aspect-ratio:3/4!important;min-width:0!important;flex-basis:auto!important;width:100%}
  .wf-page .wf-ceo-portrait img{object-position:center top!important}
  .im-filter-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;margin:0 0 24px;padding:12px 18px;border:1px solid #b8aec6;background:white;color:#2c1e46;font:700 15px/1.5 var(--jp,sans-serif);cursor:pointer}
  .im-filter-chevron{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
  .im-filter-toggle[aria-expanded="true"] .im-filter-chevron{transform:rotate(225deg)}
  [data-wf-works]:not(.im-filters-open)>.wf-filters,[data-wf-works]:not(.im-filters-open) .im-portfolio-tools{display:none}
  [data-wf-works]>.wf-filters{margin-top:0}
  [data-wf-works] .im-portfolio-search{grid-template-columns:1fr}
  [data-wf-works] .im-portfolio-search input{grid-column:1/-1;min-width:0}
  .wf-page .wf-web-reason-title{font-size:clamp(15px,4.35vw,24px)!important;line-height:1.65!important;letter-spacing:0!important;white-space:nowrap}
  [data-wf-news]>.wf-filters{gap:8px;padding:16px 0}
  [data-wf-news]>.wf-filters>button{font-size:11px;line-height:1.6;min-height:30px;min-width:0;padding:5px 10px;letter-spacing:0}
  .wf-news-list a{min-width:0;width:100%;flex-basis:100%}
  .wf-news-list a>span[aria-hidden]{display:none}
}

@media(max-width:600px){
  .im-why-grid .im-why-portrait{align-self:center}
  .im-home-news .im-heading .im-button{display:none}
  .im-news-mobile-link{display:flex;justify-content:center;margin-top:32px}
  .wf-page .wf-web-features-title{font-size:clamp(17px,4.7vw,26px)!important;letter-spacing:0;line-height:1.65!important}
  .wf-web-features-title__intro{white-space:nowrap}
  .site-inner.im-fade-ready [data-reveal]{transition-duration:.3s}
}

/* Main actions fill the available phone width; icon controls and filter chips
   keep their compact shapes. Containers retain the site's usual side gutters. */
@media(max-width:600px){
  body#top .im-button,body#top .wf-button,
  .wf-page a[style*="min-height"],.wf-page button[type="submit"],
  .wf-web-hero__primary,.wf-web-hero__secondary{box-sizing:border-box;width:100%;max-width:100%;min-width:0;flex-shrink:0;flex-basis:auto;justify-content:center}
  .im-contact-bottom>div,.im-form-actions,.im-works-mobile-link,.im-news-mobile-link{width:100%}
  .im-mid-cta,.im-article-nav,.im-form-actions,.wf-prev-next,
  .wf-page div:has(>a[style*="min-height"]){flex-direction:column;align-items:stretch}
  .wf-page div:has(>a[style*="min-height"]){box-sizing:border-box;width:100%}
  body#top .im-mobile-cta{flex-direction:column;gap:6px}
  body#top .im-mobile-cta .im-button{flex:0 0 auto;min-height:42px;font-size:14px}
}

/* Video page, phones only. The hero's main action fills the row with the
   showreel link beneath it. */
@media(max-width:600px){
  .im-oval-hero .im-oval-hero__actions{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .wf-page .im-oval-hero .im-oval-hero__contact{box-sizing:border-box;width:100%;justify-content:center}
  .im-oval-hero .im-oval-hero__reel{align-self:flex-start}
  /* Fits on one line at every phone width; shrinks only below about 332px. */
  #video-reason-04 .wf-video-reason-break{display:none}
  #video-reason-04 .wf-video-reason-title{white-space:nowrap;font-size:min(20px,calc((100vw - 32px)/15.2))!important}
}

/* Video page: on phones the featured-work caption sits beside the headline. The
   wrapper has no box at wider sizes, so those layouts are untouched. */
.im-oval-hero__lead{display:contents}
@media(max-width:600px){
  .im-oval-hero__lead{display:flex;flex-direction:column;order:1}
  .im-oval-hero .im-oval-hero__copy{min-height:0}
  /* Zero height: the caption takes no space of its own, whichever clip title it
     shows. Its bottom edge meets the bottom of the headline's last line of text
     (line-height 1.5 leaves .25em below the characters). */
  .im-oval-hero__lead{--hero-title:clamp(27px,7vw,40px)}
  .im-oval-hero .im-oval-hero__foot{box-sizing:border-box;height:0;margin:calc(var(--hero-title)*-.25) 0 calc(var(--hero-title)*.25);padding:0 12px 0 calc(32px + var(--hero-title)*7.175);justify-content:flex-start;align-items:flex-end}
  .im-oval-hero .im-oval-hero__credit{min-width:0}
  .im-oval-hero .im-oval-hero__work-name{word-break:keep-all;overflow-wrap:anywhere}
  .im-oval-hero .im-oval-hero__credit b,.im-oval-hero .im-oval-hero__pause{display:none}
}

/* Concern cards, phones only. Break only where the copy has a line break:
   Safari's text-wrap:pretty evens out line lengths and splits Japanese words. */
@media(max-width:600px){
  .wf-video-concerns .wf-video-concerns__cards p{width:100%;text-wrap:wrap;word-break:keep-all;overflow-wrap:break-word}
}