/* Supporting type for phones and tablets. Loaded after each page's composition.
   Keep display headings, supplied artwork and full desktop typography intact. */
@media screen and (max-width:1100px), screen and (max-width:1366px) and (hover:none) and (pointer:coarse){
  .ap-family{
    --ap-reading-size:16px;
    --ap-label-size:14px;
    --ap-link-size:15px;
  }

  .ap-family :is(
    .ap-intro>p,.ap-work-heading p,.ap-services-head>p,
    .ap-service-description>p,.ap-belief-copy>p,.ap-tools-heading p,
    .ap-close-bottom>p:not(.ap-close-note),.ap-inner-copy>p,
    .section-heading>p,.sticky-copy p,.service-content p,
    .process-grid p,.credential p,.studio-links a>p,.close p,
    .project-story>div>p:not(.project-kind),.ap-care p,
    .story p,.team-grid p:not(.role),.principle-grid p,
    .contact-intro>p,.contact-expect p,.hours p,
    .page-hero .lede,.legal-body p,.legal-body li,.band p,
    .not-found>p:not(.error-number),.footer-top>p
  ){
    font-size:var(--ap-reading-size);
    line-height:1.75;
  }

  .ap-family :is(.ap-service-description ul,.service-content ul,.ap-proof ul){
    font-size:var(--ap-reading-size);
    line-height:1.65;
  }

  .ap-family :is(
    .ap-project-caption>span,.project-kind,.project-tags,.ap-care-status,
    .team-grid .role,.about-hero figcaption,
    .ap-partners figcaption,.ap-partners figcaption>span,
    .ap-proof figcaption>div,.ap-proof figcaption span,
    .quote-section figcaption,.quote-section figcaption span,
    .other-quotes figcaption,.other-quotes figcaption span,
    .ap-tools-label,.ap-tools-foot,.ap-client-line>span,
    .ap-art-campaign small,.ap-art-brand>span,.ap-close-note,
    .ap-hero-foot p,.ap-hero-foot p span,.ap-hero-foot nav,
    .page-hero .updated,.footer-bottom,.footer-top>div>span
  ){
    font-size:var(--ap-label-size);
    line-height:1.6;
  }

  .ap-family :is(
    .text-link,.ap-actions .text-link,.ap-service-description .text-link,
    .services-hero .ap-secondary,.ap-project-visit,.project-jump a,
    .ap-client-line a,.ap-tools-toggle,.ap-tools-foot a,
    .footer-links nav,.footer-top>div,.toc a,.cta-ghost
  ){
    font-size:var(--ap-link-size);
    line-height:1.5;
  }

  .ap-family main :is(.button,.ap-actions .button,.services-hero .button,.cta){
    font-size:var(--ap-label-size);
    line-height:1.5;
  }
  .ap-family :is(.text-link,.project-jump a,.ap-tools-foot a,.toc a){min-height:44px}
  .ap-family .contact-direct a{font-size:16px;min-height:44px;overflow-wrap:anywhere}
  .ap-family :is(.footer-links nav,.footer-bottom nav){flex-wrap:wrap;gap:12px 22px}
  .ap-family .footer-bottom{flex-wrap:wrap}
  .ap-family .footer-top>div{min-width:0;overflow-wrap:anywhere}

  /* Form labels and help remain subordinate, but no longer miniature. */
  .ap-family :is(.field>label,.field>legend,.check,.form-intro,.field .hint,.form-note,.err,.form-preview-notice){
    font-size:var(--ap-label-size);
    line-height:1.65;
  }
  .ap-family .form-status{font-size:16px;line-height:1.65}
  .ap-family :is(.field input:not([type=checkbox]),.field select,.field textarea){font-size:16px}
  .ap-family .check{min-height:44px}
  .ap-family .cookie p,.ap-family .cookie button{font-size:14px}
  .ap-family .ap-motion-toggle{font-size:13px}

  /* Let the larger labels wrap rather than squeeze beside project titles. */
  .ap-family .ap-project-caption{align-items:flex-start;flex-direction:column;gap:6px}
  .ap-family .ap-client-line{flex-wrap:wrap;justify-content:flex-start;gap:12px 28px}
  .ap-family .ap-client-line>span{max-width:none;flex-basis:100%}
  .ap-family .ap-tools-foot{flex-wrap:wrap;align-items:center;gap:12px 24px}
  .ap-family .ap-actions{flex-wrap:wrap;gap:16px}
  .ap-family .services-hero .ap-secondary{display:flex;margin-left:0;width:fit-content}
  .ap-family .service-content ul{grid-template-columns:1fr}
  .ap-family .service-content{padding-right:0}
}

@media screen and (max-width:700px){
  .ap-family .ap-stage{min-height:800px}
  html.ap-enhanced .ap-family:not(.ap-static) .ap-intro{bottom:max(125px,var(--ap-control-reserve,0px))}
  .ap-family .ap-intro>p{max-width:100%}
  .ap-family main .ap-actions .button{padding-inline:14px;gap:12px}
  .ap-family .ap-actions .text-link{gap:8px}
  .ap-family .ap-actions .icon{width:18px;height:18px}
  .ap-family .ap-hero-foot>p{max-width:calc(100% - 170px)}
  .ap-family .principle-grid{grid-template-columns:1fr}
  .ap-family .ap-partners figcaption{flex-direction:column;gap:5px}
  .ap-family .footer-bottom nav{gap:10px 18px}
  .ap-family .toc ol{grid-template-columns:1fr}
}

@media screen and (max-width:370px){
  .ap-family .ap-actions{gap:6px}
}
/* A short phone viewport must scroll, not push the heading behind navigation
   to make room for the cookie notice and global motion control. */
@media screen and (max-width:700px) and (max-height:650px){
  html.ap-enhanced .ap-family:not(.ap-static) .ap-intro{top:104px;bottom:auto}
}