/* ============================================================
   BlueRock Digital — Growth Marketing page · mobile/responsive layer
   Scoped to brand-marketing.html only. Desktop is the default in the
   component inline styles; these rules tighten things for tablet/phone.
   ============================================================ */

/* ---------- Tablet (≤ 900px) ---------- */
@media (max-width: 900px) {
  .ds-container { padding-left: 22px !important; padding-right: 22px !important; }
  main > section { padding-top: 80px !important; padding-bottom: 80px !important; }

  /* Parent strip + nav breathe a little less */
  header > div:first-child { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ---------- Phone (≤ 600px) ---------- */
@media (max-width: 600px) {
  .ds-container { padding-left: 18px !important; padding-right: 18px !important; }
  main > section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Top parent strip — shrink so the two labels don't collide */
  header > div:first-child {
    padding-top: 8px !important; padding-bottom: 8px !important;
    font-size: 11px !important; gap: 12px !important;
  }

  /* ----- Hero ----- */
  main > section:first-of-type {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }
  main > section:first-of-type h1 {
    font-size: 46px !important;
    line-height: 0.98 !important;
  }
  main > section:first-of-type p {
    font-size: 18px !important;
    margin: 26px 0 30px 0 !important;
  }
  /* Hero CTA row: full-width, stacked, comfortable tap targets */
  main > section:first-of-type > .ds-container > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  main > section:first-of-type > .ds-container > div:last-child > button {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
  }
  main > section:first-of-type > .ds-container > div:last-child > a {
    justify-content: center !important;
    padding: 6px 4px !important;
  }

  /* ----- Section headings scale down ----- */
  main h2 { font-size: 36px !important; line-height: 1.05 !important; }
  main h3 { font-size: 24px !important; }

  /* ----- Cards: tighter padding on phone ----- */
  .phase-grid > div,
  .sol-grid > div,
  .case-grid > article { padding: 24px !important; }
  .hws-grid > div { padding: 22px !important; }
  .eng-grid > div { min-height: 0 !important; padding: 22px !important; }
  .sol-grid > div h3 { font-size: 30px !important; }

  /* Pull-quote */
  .phase-wrap + div { padding: 36px 8px !important; margin-top: 56px !important; }
  .phase-wrap + div p { font-size: 26px !important; }

  /* "Not sure…" / solutions footer card */
  .sol-grid + div { padding: 32px 22px !important; margin-top: 40px !important; }

  /* ----- Closing CTA block ----- */
  .bm-cta-card { padding: 52px 22px !important; border-radius: 22px !important; }
  .bm-cta-card h2 { font-size: 40px !important; }
  .bm-cta-card p { font-size: 17px !important; margin-bottom: 32px !important; }
  .bm-cta-card > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .bm-cta-card > div:last-child button,
  .bm-cta-card > div:last-child a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ----- Get in touch ----- */
  #get-in-touch h2 { font-size: 40px !important; }
  #hubspot-form { min-height: 340px !important; padding: 40px 22px !important; }

  /* ----- Dark Results section: full-width "read more" pill ----- */
  .case-grid + div { margin-top: 36px !important; }
}

/* ---------- Small phone (≤ 400px) ---------- */
@media (max-width: 400px) {
  main > section:first-of-type h1 { font-size: 40px !important; }
  main h2 { font-size: 32px !important; }
  .bm-cta-card h2,
  #get-in-touch h2 { font-size: 34px !important; }
}