/* SP composition: all refinements are confined to the mobile breakpoint. */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .concept-heading h2,
  #why .section-heading h2,
  .service-intro h2,
  .faq-heading h2,
  #contact .contact-title {
    font-size: clamp(24px, 7vw, 28px);
    line-height: 1.75;
    letter-spacing: -.035em;
  }
  .concept-heading h2 { letter-spacing: -.05em; }
  .sp-word { white-space: nowrap; }
  body:has(.hero-video) .header,
  body:has(.hero-video) .header:not(.is-scrolled),
  .subpage .header { width: calc(100% - 24px); }
  .header, .header.is-scrolled { padding-left: 20px; padding-right: 12px; }
  .header .header-contact { min-height: 38px; height: 38px; padding: 0 15px; }
  .hero-video h1 { width: min(100%, 280px); }
  .hero-video h1 > .hero-catch-art { display: none; }
  .hero-video h1 > .hero-mobile-catch { display: block; }
  #works #works-title { text-wrap: initial; }
  #works .works-phrase { display: inline-block; white-space: nowrap; }
  .hero-description .sp-phrase,
  .contact-copy .sp-phrase,
  .service-intro .sp-phrase { display: inline-block; max-width: 100%; }
  .hero-video .hero-description > p,
  #contact .contact-copy > p,
  #service .service-intro > p { text-wrap: pretty; }

  /* Smaller card furniture leaves more room for the actual story. */
  #why .reason { padding: 24px; border-radius: 20px; }
  #why .reason-card-head { min-height: 52px; gap: 14px; margin-bottom: 20px; }
  #why .reason-number { flex-basis: 52px; width: 52px; height: 52px; font-size: 22px; }
  #why .reason .tiny-label { font-size: 13px; letter-spacing: .035em; }
  #why .reason h3 { font-size: 20px; line-height: 1.75; }
  #why .reason > p { margin-block: 18px 24px; text-wrap: balance; }
  #service .service-card-content > p { text-wrap: balance; }
  #why .reason-art { height: auto; aspect-ratio: 2 / 1; border-radius: 10px; }
  #service .service-layout { gap: 40px; }
  #service .section-kicker { margin-bottom: 28px; }
  #service .service-card { min-height: 0; padding: 26px 24px; gap: 36px; border-radius: 20px; }
  #service .service-card-number { margin-bottom: 14px; }
  #service .service-english { font-size: clamp(24px, 6.7vw, 28px); text-wrap: balance; }
  #service .tags { margin-top: 18px; }
  #service .service-cta { min-height: 48px; margin-top: 24px; gap: 16px; font-size: 14px; }

  /* Reserve a consistent caption height so the figures share a baseline. */
  #works .works-results .metric { padding-left: 14px; }
  #works .works-results .metric:nth-child(odd) { padding-left: 0; padding-right: 14px; }
  #works .works-results .metric-label { min-height: 3.5em; font-size: 10px; line-height: 1.75; letter-spacing: .04em; }
  #works .works-results .metric strong { font-size: clamp(32px, 9.2vw, 38px); }
  #works .works-results .metric p { text-wrap: balance; }

  .faq-heading h2 { margin-top: 28px; }
  .faq-list summary { gap: 12px; }
  .faq-list .faq-index { align-self: center; padding-top: 0; }
  .faq-list summary > span:nth-child(2) { text-wrap: balance; }
  .faq-list .faq-answer { padding-left: 32px; padding-right: 0; }
  #contact .contact-layout { margin-top: 28px; }
  #footer .footer-nav { justify-content: space-between; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .content-motion-ready [data-motion="heading"] .motion-line-ink { transition-duration: .65s, .4s; }
  .content-motion-ready :is([data-motion="label"], [data-motion="hero"]) { transition-duration: .7s, .4s; }
  .content-motion-ready :is([data-motion="copy"], [data-motion="row"], [data-motion="form"], [data-motion="card"]) { transition-duration: .45s, .6s; }
  .content-motion-ready :is([data-motion="copy"], [data-motion="row"], [data-motion="form"]):not(.is-motion-visible) { transform: translateY(14px); }
  .content-motion-ready [data-motion="card"]:not(.is-motion-visible) { transform: translateY(22px); }
  .content-motion-ready [data-motion="panel"] { transition-duration: .6s; }
  .content-motion-ready [data-motion="panel"] > :is(.service-card-heading, .service-card-content) { transition-duration: .65s; }
}

/* Keep the supplied catch inside the first view on shorter phones, too. */
@media (max-width: 760px) and (max-height: 700px) {
  .hero-video { min-height: 100svh; padding-top: 96px; padding-bottom: 28px; }
  .hero-video .hero-topline { min-height: 18px; }
  .hero-video .hero-main { margin-top: 18px; gap: 24px; }
  .hero-video h1 { width: min(100%, 220px); }
  .hero-video .hero-description { margin-bottom: 18px; }
  .hero-video .hero-signature { margin-top: 14px; }
}

/* Expand the header surface while retaining the content alignment on narrow phones. */
@media (max-width: 370px) {
  body:has(.hero-video) .header,
  body:has(.hero-video) .header:not(.is-scrolled),
  .subpage .header { width: calc(100% - 16px); }
}

/* A tighter reading rhythm for phones; desktop composition stays intact. */
@media (max-width: 760px) {
  .hero-video .hero-description > p,
  #concept .concept-body > p,
  #why .reason > p,
  #service .service-intro > p,
  #service .service-card-content > p,
  #service .service-note,
  #works .producer > p,
  #works .metric p,
  .faq-list .faq-answer,
  #contact .contact-copy > p,
  .page-intro,
  .policy-section :is(p, li, dd) { line-height: 1.8; }
  #concept .concept-body > .concept-closing,
  #works #works-title,
  .faq-list summary { line-height: 1.75; }

  .concept-why .concept-inner { padding-top: 80px; }
  #concept .concept-layout { margin-top: 28px; gap: 24px; }
  #concept .concept-body > p + p { margin-top: 18px; }
  #concept .concept-body > .concept-closing { margin-top: 24px; }
  .concept-why #why { padding-top: 96px; padding-bottom: 56px; }
  #why .section-heading,
  #works .section-heading { margin-top: 24px; margin-bottom: 28px; }
  #why .reasons { gap: 20px; }
  #why .reason { padding: 20px; }
  #why .reason-card-head { margin-bottom: 16px; }
  #why .reason h3 { min-height: 0; }
  #why .reason > p { margin-block: 14px 18px; }

  #service { padding-block: 56px; }
  #service .section-kicker { margin-bottom: 24px; }
  #service .service-layout { gap: 28px; }
  #service .service-intro > p { margin-top: 18px; }
  #service .service-intro-caption { margin-top: 24px; }
  #service .service-cards { gap: 16px; }
  #service .service-card { padding: 24px 20px; gap: 24px; }
  #service .service-card-content { padding-top: 18px; }
  #service .tags { margin-top: 14px; }
  #service .service-cta { margin-top: 18px; }

  #works .works-inner { padding-block: 56px; }
  #works .works-results { gap: 20px; }
  #works .works-results .metric { padding-block: 16px; }
  #works .producer { margin-top: 24px; padding-top: 24px; gap: 16px; }
  #faq { padding-block: 56px; }
  #faq .faq-layout { gap: 24px; }
  #faq .faq-heading h2 { margin-top: 24px; }
  .faq-list summary { padding-block: 20px; }
  .faq-list .faq-answer { padding-bottom: 20px; }

  #contact .contact-inner { padding-block: 56px; }
  #contact .contact-layout { margin-top: 24px; gap: 28px; }
  #contact .contact-title { margin-bottom: 24px; }
  #contact .contact-copy > p + p { margin-top: 16px; }
  #contact .contact-form { gap: 22px; padding-block: 24px; }
  #contact .form-row { gap: 22px; }
  #footer { padding-top: 48px; }
  #footer .footer-top { gap: 20px; }
  #footer .footer-bottom { margin-top: 40px; }

  .subpage-main { padding-top: 112px; padding-bottom: 56px; }
  .status-page { min-height: 0; padding-top: 112px; padding-bottom: 56px; gap: 24px; }
  .status-page .page-title { margin-top: 16px; }
  .status-page .page-intro { margin-top: 18px; }
  .status-actions { margin-top: 24px; }
  .breadcrumbs { margin-bottom: 28px; }
  .policy-layout { margin-top: 28px; gap: 28px; }
  .policy-section { padding-block: 24px; }
}

/* Compact results and a legible moving service scene on phones. */
@media (max-width: 760px) {
  #works .works-results .metric { padding-block: 12px; }
  #works .works-results .metric-label { min-height: 1.75em; font-size: 9px; line-height: 1.75; letter-spacing: .025em; }
  #works .works-results .metric strong { font-size: clamp(30px, 8.7vw, 34px); line-height: 1.25; margin-top: 6px; margin-bottom: 2px; }
  #works .works-results .metric p { font-size: 13px; line-height: 1.75; }
  #service-canvas { opacity: .68; mask-image: linear-gradient(transparent, #000 12%, #000 90%, transparent); }
}