/* Phone and tablet layouts: copy first, artwork in its own measured space. */
@media (max-width: 900px) {
  .hero-shell .hero-composition {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-block: 45px 0;
    gap: 28px;
  }
  .hero-copy { max-width: none; min-width: 0; }
  .hero-copy .display { font-size: clamp(62px, 14.9vw, 124px); }
  .hero-copy > p { max-width: 34em; }
  .hero-logo-space {
    display: block;
    width: min(100%, 540px);
    aspect-ratio: 1;
    min-height: 0;
    justify-self: center;
  }
  .hero-shell .hero-glass { opacity: 1; }
  .hero-footnote { margin-top: 18px; }
  .hero-shell .glass-fallback {
    left: 50%; top: auto; bottom: 80px;
    width: min(82%, 500px); height: auto; aspect-ratio: 1;
    transform: translateX(-50%); opacity: 1;
  }
}

@media (max-width: 700px) {
  .wrap, .header { width: calc(100% - 40px); }
  .section { padding-block: 56px; }
  .header .menu-toggle { min-height: 44px; min-width: 64px; }
  .header nav a { min-height: 44px; display: flex; align-items: center; }
  .header nav a:last-child { color: #111; background: var(--red); border-color: var(--red); justify-content: center; }
  .hero-v5 { padding-top: 18px; }
  .hero-shell .section-top { margin-bottom: 0; }
  .hero-shell .section-top .eyebrow { font-size: 9px; line-height: 1.6; }
  .hero-shell .hero-composition { padding-top: 34px; gap: 18px; }
  .hero-copy .display { font-size: clamp(56px, 15.9vw, 110px); line-height: .94; }
  .hero-copy > p { max-width: none; font-size: 17px; line-height: 1.55; margin-top: 22px; }
  .hero-copy .hero-actions { margin-top: 24px; gap: 12px 18px; align-items: center; }
  .hero-actions .button { min-width: 177px; min-height: 54px; padding-left: 18px; gap: 14px; }
  .hero-actions .text-link { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
  .hero-logo-space { width: 100%; }
  .hero-footnote { padding-block: 18px 22px; margin-top: 6px; gap: 16px; font-size: 9px; line-height: 1.6; }
  .hero-footnote > span:first-child { max-width: 155px; }
  .hero-footnote a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
  .eyebrow { line-height: 1.6; }
  .section-heading .display, .thinking-heading .display, .challenge-layout .display,
  .case-overview-v5 .display, .studio-fit-section .display {
    font-size: clamp(42px, 12vw, 64px);
  }
  .brand-list .brand-tile { min-height: 164px; padding: 30px 16px; }
  .brand-tile strong { font-size: 24px; line-height: 1.12; }
  .brand-tile-type { font-size: 10px; max-width: 130px; }
  .discipline-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .discipline-tabs > button { min-height: 112px; padding: 18px 16px; }
  .discipline-tabs > button sup { font-size: 11px; }
  .discipline-label { font-size: 32px; }
  .scope-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope-tabs > button { min-height: 152px; padding: 18px 14px 20px; gap: 12px; }
  .scope-tabs > button strong { font-size: 27px; max-width: 145px; line-height: 1.05; }
  .scope-tabs > button small { font-size: 11px; color: #b8b4ae; }
  .scope-tabs > button > i[aria-hidden] { right: 13px; top: 18px; }
  .scope-copy h3 { font-size: 34px; line-height: 1.15; }
  .scope-deliverables li { font-size: 16px; line-height: 1.5; }
  .scope-price > span, .scope-summary small { font-size: 14px; }
  .scope-actions { flex-wrap: wrap; }
  .scope-actions .text-button { min-height: 44px; }
  .case-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-inline: 10px; overflow: visible; white-space: normal; }
  .case-nav a { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px 4px; font-size: 12px; line-height: 1.3; text-align: center; }
  .case-overview-v5 .lead { font-size: 18px; line-height: 1.55; }
  .craft-choices button { min-height: 60px; }
  .work-v5 .project-tags span { font-size: 12px; }
  .work-v5 .project-note { font-size: 10px; line-height: 1.6; }
  .studio-shell .studio-intro { padding-block: 40px 55px; gap: 26px; }
  .studio-shell .studio-intro .display { font-size: clamp(52px, 13.8vw, 90px); }
  .studio-shell .studio-logo-space { height: auto; aspect-ratio: 1.3; margin-bottom: 24px; }
  .engagement-path { padding: 22px; }
  .engagement-path h2 { font-size: 38px; line-height: 1.12; }
  .engagement-path .path-action { font-size: 15px; padding: 16px; min-height: 64px; }
  .faq { margin-inline: 0; padding-inline: 12px; }
  .faq summary { font-size: 20px; gap: 20px; }
  .faq > div > p { font-size: 16px; }
  .guided-form { padding: 24px 18px; }
  .guided-form .service-options { grid-template-columns: 1fr; }
  .guided-form .service-options label > span { min-height: 62px; padding: 16px !important; }
  .guided-form .service-options b { font-size: 17px; }
  .guided-form .brief-top .eyebrow, .guided-form #brief-progress-label { font-size: 11px; }
  .guided-form .brief-navigation > .text-button { min-height: 44px; }
  .guided-form .rhythm-options small { font-size: 14px; }
  .guided-form .brief-review { padding: 18px; }
  .footer-bottom nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .thinking-track button { font-size: 13px; }
  .thinking-track button b { font-size: 10px; }
}

@media (max-width: 360px) {
  .wrap, .header { width: calc(100% - 32px); }
  .hero-copy .display { font-size: 15.9vw; }
  .hero-copy .hero-actions { gap: 5px 16px; }
  .hero-actions .text-link { font-size: 14px; }
  .scope-tabs > button strong { font-size: 24px; }
  .brand-tile strong { font-size: 21px; }
  .guided-form { padding: 22px 14px; }
  .guided-form .brief-navigation { flex-wrap: wrap; }
  .case-nav a { font-size: 11px; }
}

/* Short landscape screens need normal reading flow, not a clipped pinned stage. */
@media (max-height: 500px) and (max-width: 1000px) {
  .thinking-journey.is-animated { height: auto; }
  .thinking-journey .thinking-stage { display: none; }
  .thinking-journey .thought-static { display: block; }
  .static-thought .thought-art { height: 320px; }
}