/* 2026-07-25 CRITICAL MOBILE CTA/FOOTER CENTER LOCK — DO NOT REMOVE
   Stephen's approved/locked mobile design rule:
   - Applies sitewide on phone portrait and phone landscape.
   - CTA heading is centered.
   - CTA supporting words are centered.
   - START A PROJECT button is centered.
   - Footer copyright wording is centered and kept on ONE LINE where possible.
   - Footer social icons are centered beneath the copyright.
   - Footer divider/splitter belongs to the centered footer content column, not a full-width left-aligned shell.
   Desktop/tablet footer behavior is separate.
   Before changing this, discuss with Stephen first and verify with actual mobile CTA/footer screenshots. */
@media (max-width: 720px), (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  section.cta,
  section.cta > .wrap.cta-box,
  footer.footer,
  footer.footer > .wrap {
    text-align: center !important;
  }

  section.cta > .wrap.cta-box {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
  }

  section.cta > .wrap.cta-box h2,
  section.cta > .wrap.cta-box p {
    width: 100% !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  section.cta > .wrap.cta-box .btn {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  footer.footer {
    border-top: 0 !important;
  }

  footer.footer > .wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    border-top: 1px solid var(--line) !important;
    padding-top: 10px !important;
  }

  footer.footer > .wrap > span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    text-align: center !important;
    text-align-last: center !important;
    white-space: nowrap !important;
    font-size: clamp(9px, 2.55vw, 11px) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
  }

  footer.footer .footer-social {
    display: flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    justify-self: center !important;
    place-self: center !important;
    text-align: center !important;
  }
}

/* 2026-07-25 copyright nowrap specificity escalation — must beat older page-specific footer locks. */
@media (max-width: 720px), (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  body footer.footer > .wrap > span,
  body.home-page footer.footer > .wrap > span,
  body.site-subpage footer.footer > .wrap > span,
  body.site-subpage:not(.home-page) footer.footer > .wrap > span,
  body.site-subpage.case-study-page footer.footer > .wrap > span,
  body.site-subpage.editorial-about-page footer.footer > .wrap > span,
  body.site-subpage.editorial-contact-page footer.footer > .wrap > span,
  body.site-subpage.client-notes-page footer.footer > .wrap > span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    text-align: center !important;
    text-align-last: center !important;
    white-space: nowrap !important;
    font-size: clamp(9px, 2.55vw, 11px) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
  }
}