/* ==========================================================
   RITUAL — MOBILE STYLESHEET (drop-in, all pages)
   Load AFTER site.css and any page-level <style> blocks.
   Triggers at ≤ 900px (iPad portrait + all phones).

   Why !important: Manus injects host-level mobile rules that
   center text and partially override our grids. These rules
   are defensive; the desktop design is untouched.
   ========================================================== */

/* ---------- 0. GLOBAL OVERFLOW GUARD (all viewports) ---------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }


@media (max-width: 900px) {

  /* ---------- 1. KILL HOST CENTER-ALIGNMENT ---------- */
  body, main, section, article, header, footer, aside,
  .hero, .hero__meta,
  .cs-hero, .cs-hero__meta, .cs-section, .cs-section__body,
  .cs-pillars, .cs-pillar, .cs-results, .cs-stat,
  .cs-results__callout, .cs-pillars__note,
  .who, .who__list, .what, .what__grid, .what__more,
  .diff, .faq, .faq__list, .faq__item,
  .svc-hero, .tier-detail, .td__body,
  .numbers, .numbers__grid, .num,
  .section-head, .section-title, .section-sub,
  .foot, .foot__top, .foot__nav {
    text-align: left !important;
  }
  /* These remain centered by design */
  .cs-quote, .cs-quote__inner, .cs-quote__body,
  .cs-quote__attr, .cs-quote__eyebrow,
  .band, .band__title, .band__sub, .break, .break__title {
    text-align: center !important;
  }

  /* Disable hover transforms on touch */
  @media (hover: none) {
    .cs-pillar:hover, .tier:hover, .num:hover,
    .work-card:hover, .case-card:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }

  /* ---------- 2. NAV (consistent everywhere) ---------- */
  .nav {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "brand cta" "links links" !important;
    padding: 14px 20px !important;
    gap: 10px 16px !important;
    align-items: center !important;
  }
  .nav__brand   { grid-area: brand; }
  .nav__cta     { grid-area: cta; padding: 9px 16px !important; font-size: 12px !important; }
  .nav__links {
    grid-area: links;
    justify-content: flex-start !important;
    gap: 22px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--line);
    font-size: 13px !important;
    flex-wrap: wrap;
  }
  .nav__mark { font-size: 22px !important; }

  /* ---------- 3. UNIVERSAL SECTION-HEAD COLLAPSE ----------
     Many pages use a 3-col grid: [eyebrow rail | title | sub].
     On mobile this MUST collapse to one column or content
     overflows (visible on /work, /services, /about). */
  .section-head,
  .svc-hero,
  .hero,
  .cs-hero {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .section-head .eyebrow,
  .svc-hero .eyebrow,
  .hero .eyebrow,
  .cs-hero .eyebrow,
  .hero__rail, .cs-hero .hero__rail {
    display: block !important;
    margin-bottom: 14px !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  .hero__rail, .cs-hero .hero__rail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: baseline !important;
  }
  .hero__num { font-size: 22px !important; line-height: 1 !important; }

  .section-title {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.022em !important;
    margin: 0 0 16px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .section-sub {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* ---------- 4. HOMEPAGE HERO ---------- */
  .hero { padding: 48px 20px 56px !important; }
  .hero .display {
    font-size: clamp(40px, 10.5vw, 60px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
  }
  .hero__meta {
    grid-column: 1 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding: 24px 0 0 !important;
    margin-top: 28px !important;
  }
  .hero__meta dl { grid-template-columns: 1fr !important; gap: 18px !important; }
  /* CTAs: stack to full-width buttons */
  .hero__ctas, .cta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .hero__ctas a, .cta-row a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ---------- 5. CASE STUDY HERO ---------- */
  .cs-hero { padding: 40px 20px 48px !important; }
  .cs-hero .display {
    font-size: clamp(44px, 11vw, 64px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 16px !important;
  }
  .cs-hero__sub  { font-size: 19px !important; line-height: 1.4 !important; margin: 14px 0 10px !important; }
  .cs-hero__tag  { font-size: 10.5px !important; letter-spacing: 0.15em !important; line-height: 1.6 !important; }
  .cs-hero__meta {
    display: block !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 28px !important;
    padding: 24px 0 0 !important;
  }
  .cs-hero__meta dl { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; margin: 0 !important; }
  .cs-hero__meta div {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 16px !important;
    align-items: baseline !important;
  }
  .cs-hero__meta dt { font-size: 9.5px !important; letter-spacing: 0.22em !important; }
  .cs-hero__meta dd { font-size: 16px !important; line-height: 1.35 !important; }

  /* ---------- 6. NUMBERED CASE-STUDY SECTIONS ---------- */
  .cs-section, .cs-pillars, .cs-results { display: block !important; padding: 56px 20px !important; }
  .cs-section .section-num,
  .cs-pillars .section-num,
  .cs-results .section-num {
    display: block !important;
    font-size: 28px !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
  }
  .cs-section__body { max-width: none !important; gap: 16px !important; }
  .cs-section__lede { font-size: 22px !important; line-height: 1.3 !important; }
  .cs-section__body p { font-size: 17px !important; line-height: 1.6 !important; }

  /* Pillar cards stack */
  .cs-pillars__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 32px 0 0 !important;
  }
  .cs-pillar {
    padding: 22px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    gap: 12px !important;
  }
  .cs-pillar__name { font-size: 22px !important; line-height: 1.15 !important; }
  .cs-pillar__desc { font-size: 15.5px !important; line-height: 1.55 !important; }
  .cs-pillars__note { margin: 32px 0 0 !important; max-width: none !important; font-size: 17px !important; }

  /* Results stats — left-aligned stacked */
  .cs-results__grid {
    display: flex !important;
    flex-direction: column !important;
    margin: 28px 0 0 !important;
    border-top: 1px solid rgba(245,240,232,0.18) !important;
  }
  .cs-stat {
    padding: 26px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(245,240,232,0.18) !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .cs-stat__big   { font-size: 56px !important; line-height: 0.95 !important; }
  .cs-stat__label { font-size: 10.5px !important; letter-spacing: 0.2em !important; margin-top: 8px !important; }
  .cs-results__callout {
    margin: 28px 0 0 !important;
    max-width: none !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    font-style: normal !important;
  }

  /* ---------- 7. PULL QUOTE — drop dramatically ---------- */
  .cs-quote { padding: 64px 24px !important; }
  .cs-quote__inner { max-width: none !important; }
  .cs-quote__eyebrow { font-size: 10.5px !important; letter-spacing: 0.2em !important; margin-bottom: 22px !important; }
  .cs-quote__body {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.012em !important;
  }
  .cs-quote__attr { margin-top: 26px !important; font-size: 10.5px !important; letter-spacing: 0.22em !important; }

  /* ---------- 8. SERVICES PAGE — TIER DETAIL ----------
     The 3-col [num | body | price/list] grid is the worst
     mobile offender ($2,500 cut off). Stack it cleanly. */
  .tier-detail {
    display: block !important;
    padding: 48px 20px !important;
  }
  .tier-detail .tier-num,
  .tier-detail .section-num {
    display: block !important;
    font-size: 28px !important;
    margin-bottom: 14px !important;
  }
  .td__head, .tier-detail h3, .tier-detail .tier__name {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin: 0 0 12px !important;
  }
  .td__lede, .tier__lede {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 0 20px !important;
    font-style: italic;
  }
  .td__price, .tier__price {
    display: block !important;
    font-size: 44px !important;
    line-height: 1 !important;
    margin: 16px 0 4px !important;
  }
  .td__per, .tier__per {
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 24px !important;
  }
  .td__body { display: block !important; gap: 0 !important; }
  .td__list, .tier__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .td__list li, .tier__list li {
    font-size: 16px !important;
    line-height: 1.45 !important;
    padding-left: 0 !important;
  }
  /* Optional add-on / inset cards */
  .td__addon, .tier__addon, .tier__includes {
    margin: 24px 0 0 !important;
    padding: 22px !important;
    border-radius: 10px !important;
  }
  .td__addon *, .tier__addon *, .tier__includes * {
    text-align: left !important;
  }

  /* ---------- 9. SERVICES "TWO RETAINERS · ONE PROJECT" HEAD ----- */
  .svc-hero { padding: 48px 20px !important; }
  .svc-hero__lede {
    grid-column: 1 !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  /* ---------- 10. WORK PAGE / OVERVIEW HEADS ----------
     The vertical "/ Work" eyebrow rail is overflowing. */
  .work-hero, .about-hero {
    display: block !important;
    padding: 48px 20px !important;
  }

  /* ---------- 11. WHO / WHAT / DIFF / NUMBERS ---------- */
  .who, .what, .diff, .faq, .numbers, .break {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .who__list, .what__grid, .numbers__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-left: 0 !important;
  }
  .num { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 24px 0 !important; }
  .diff { display: block !important; }
  .faq__item { display: block !important; }
  .faq__item dt { font-size: 18px !important; margin-bottom: 8px !important; }
  .faq__item dd { font-size: 16px !important; line-height: 1.55 !important; }

  /* ---------- 12. CTA BAND ---------- */
  .band { padding: 64px 20px !important; }
  .band__title { font-size: clamp(38px, 11vw, 56px) !important; line-height: 0.98 !important; }
  .band__sub { font-size: 17px !important; line-height: 1.55 !important; max-width: none !important; }

  /* ---------- 13. CONTACT FORM ---------- */
  .contact, .contact__inner, .form, .form__card {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .form input, .form select, .form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }
  .form button, .form .btn { width: 100% !important; }

  /* ---------- 14. FOOTER ---------- */
  .foot { padding: 56px 20px 32px !important; }
  .foot__top { display: block !important; }
  .foot__nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
    margin-top: 28px !important;
  }
  .foot__bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ---------- 15. BACK LINK ---------- */
  .cs-back { padding: 18px 20px 0 !important; font-size: 12.5px !important; }
}

/* ---------- 16. EXTRA-NARROW PHONES (≤ 380px) ---------- */
@media (max-width: 380px) {
  .display, .cs-hero .display { font-size: 38px !important; }
  .section-title, .band__title { font-size: 32px !important; }
  .cs-stat__big { font-size: 48px !important; }
  .cs-quote__body { font-size: 22px !important; }
  .nav__links { gap: 14px !important; font-size: 12px !important; }
  .foot__nav { grid-template-columns: 1fr !important; }
  .td__price, .tier__price { font-size: 38px !important; }
}