/* V22 — mobile-only fit corrections. Desktop design and original copy remain unchanged. */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }

  /* Keep the original hero wording on three clean lines. */
  .hero {
    min-height: auto;
    padding-top: 142px;
    padding-bottom: 76px;
  }
  .hero-title {
    font-size: 14.3vw;
    line-height: .88;
    letter-spacing: -.058em;
  }
  .hero-title .line {
    width: 100%;
    padding-right: .04em;
  }
  .hero-title .line:nth-child(3) > span {
    font-size: .69em;
    letter-spacing: -.045em;
    white-space: nowrap;
  }
  .accent-line { padding-left: 0; }
  .hero-bottom { margin-top: 38px; }
  .hero-bottom p { font-size: 16px; line-height: 1.6; }

  /* Preserve the desktop contact design, but stack and finish it cleanly on phones. */
  .contact {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 28px;
    overflow: hidden;
  }
  .contact h2 {
    font-size: clamp(48px, 14vw, 66px);
    line-height: .91;
    max-width: 100%;
  }
  .contact-bottom {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 38px;
  }
  .contact-copy > p {
    font-size: 15px;
    line-height: 1.65;
  }
  .quick-contact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }
  .quick-contact-card {
    min-height: 0;
    padding: 16px;
    border-radius: 18px;
  }
  .quick-contact-card .contact-icon {
    flex-basis: 46px;
    height: 46px;
  }
  .quick-contact-card strong {
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .contact-assurance {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
  .contact-assurance span,
  .contact-assurance span + span {
    padding: 13px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .contact-assurance span:last-child { border-bottom: 0; }

  .contact-trigger {
    min-height: 190px;
    padding: 22px;
    border-radius: 22px;
  }
  .contact-trigger-copy strong {
    max-width: 210px;
    font-size: 34px;
  }
  .contact-trigger-icon {
    width: 56px;
    height: 56px;
  }

  .contact-meta {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 34px;
    padding-top: 18px;
    padding-bottom: 0;
    font-size: 9px;
  }
  .contact-meta span:nth-child(2) { display: block; }

  /* Keep floating contact controls clear of the footer content. */
  .contact-dock {
    right: 10px;
    bottom: 10px;
  }
}

@media (max-width: 390px) {
  .hero-title { font-size: 14vw; }
  .hero-title .line:nth-child(3) > span { font-size: .665em; }
  .contact h2 { font-size: 13.4vw; }
}


/* V33 mobile polish */
@media (max-width: 900px) {
  .faq-heading{grid-template-columns:1fr;gap:22px;margin-bottom:38px}
  .faq-heading>p{max-width:650px}
  .campaign-card-visual{min-height:540px}
  .campaign-card-visual img{object-fit:cover}
  .case-hero-art img{object-fit:cover}
}
@media (max-width: 600px) {
  html,body{overflow-x:hidden}
  .section-pad{padding-left:5.5vw;padding-right:5.5vw}
  .site-header{padding-left:5vw;padding-right:5vw}
  .hero{padding-top:122px;min-height:auto}
  .hero-title{font-size:13.2vw;line-height:.88;letter-spacing:-.07em}
  .hero-bottom{margin-top:36px;gap:24px}
  .hero-bottom p{font-size:15px;line-height:1.65;max-width:none}
  .round-link{width:104px;height:104px;flex:0 0 104px}
  .work-heading,.faq-heading{margin-bottom:34px}
  .work-heading h2,.intro h2,.process h2,.pricing h2,.faq-heading h2{font-size:13vw;line-height:.94}
  .agency-pillar,.process-step,.price-card{padding:26px 22px}
  .campaign-card{border-radius:18px;overflow:hidden}
  .campaign-card-copy{padding:28px 22px}
  .campaign-card h3{font-size:14vw;line-height:.88}
  .campaign-card-visual{min-height:410px;padding:14px;gap:8px}
  .campaign-card-visual img{border-radius:8px;min-width:0}
  .project-card{padding:14px}
  .project-bottom{align-items:flex-start;gap:14px;flex-direction:column}
  .project-bottom button,.campaign-link,.nav-cta,.nav-quote{min-height:46px}
  .faq-item summary{font-size:18px;padding:23px 0;align-items:flex-start}
  .faq-item>div{padding:0 0 24px}
  .faq-item p{font-size:14px}
  .contact h2{font-size:12.5vw;overflow-wrap:anywhere}
  .case-hero{padding-left:5vw;padding-right:5vw}
  .case-hero h1{font-size:21vw;overflow-wrap:anywhere}
  .case-hero p{font-size:15px;line-height:1.7}
  .case-hero-art{height:470px;gap:8px}
  .case-hero-art img{border-radius:8px}
  .case-section{padding:68px 5vw}
  .case-section h2{font-size:13vw;line-height:.95}
  .campaign-grid,.forme-grid,.noir-seven-grid,.blackline-grid{grid-template-columns:1fr 1fr;gap:8px}
  .campaign-grid figcaption{font-size:8px;padding:9px 7px}
  .identity-board{min-height:330px;padding:24px}
  .identity-logo{font-size:18vw}
  .palette{grid-template-columns:1fr 1fr}
  .swatch{min-height:130px;padding:16px}
  .services-list article{padding:24px 0}
  .case-cta{padding:64px 5vw}
  .case-cta h2{font-size:14vw;line-height:.9}
  .case-cta a{width:100%;text-align:center;min-height:50px;display:flex;align-items:center;justify-content:center}
}
@media (max-width: 390px) {
  .hero-title{font-size:12.7vw}
  .campaign-card-visual{min-height:360px}
  .case-hero-art{height:420px}
}

/* V34 targeted mobile fixes from live-device review */
@media (max-width: 600px) {
  /* Portfolio previews: compact collage with no empty lower area. */
  .campaign-card-visual {
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / .98;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }
  .campaign-card-visual img,
  .campaign-card-visual img:nth-child(1),
  .campaign-card-visual img:nth-child(2),
  .campaign-card-visual img:nth-child(3) {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 0;
    transform: none;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(0,0,0,.24);
  }
  .campaign-card-visual img:nth-child(1) { grid-row: 1 / 3; }
  .campaign-card-visual::after { display: none; }

  /* Keep automotive headings intact instead of breaking inside words. */
  .blackline-case .case-hero h1 {
    font-size: clamp(62px, 18vw, 88px);
    line-height: .82;
    letter-spacing: -.055em;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .blackline-case .case-hero h1,
  .blackline-case .case-hero h1 span { white-space: nowrap; }
  .blackline-case .identity-logo {
    font-size: clamp(54px, 15vw, 76px);
    line-height: .86;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .blackline-case .identity-logo,
  .blackline-case .identity-logo span { white-space: nowrap; }
  .blackline-case .identity-board {
    min-height: 285px;
    background: linear-gradient(145deg,#111722,#080a0e);
  }
  .blackline-case .identity-board::after {
    color: rgba(46,125,255,.12);
    z-index: 0;
  }
  .blackline-case .identity-logo,
  .blackline-case .identity-tagline { position: relative; z-index: 2; }

  /* Case-study art should display the complete post artwork on phones. */
  .case-hero-art img { object-fit: contain; background: rgba(0,0,0,.08); }
}