/* =============================================================
   WHAMPLY MEDIA — RESPONSIVE STYLES
   responsive.css
   Breakpoints:
     ≤1280px  Wide laptop
     ≤1100px  Tablet landscape / small laptop
     ≤ 900px  Tablet portrait
     ≤ 640px  Mobile
     ≤ 380px  Small phone
   ============================================================= */

/* ── ≤1280px ─────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .footer-inner { padding: 0 24px; }
}

/* ── ≤1100px — Tablet landscape ──────────────────────────────── */
@media (max-width: 1100px) {

  /* Navbar */
  .navbar-nav { display: none; }
  .navbar-cta { display: none; }
  .navbar-hamburger { display: flex; }

  /* Hero — stack vertically */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .hero-left { padding: 52px 5% 36px; }
  .hero-right {
    padding: 32px 5% 52px;
    border-top: 1.5px solid rgba(249,115,22,.15);
  }
  .stats-strip { grid-template-columns: repeat(2,1fr); gap: 10px; }

  /* Services */
  .st-sub-grid { grid-template-columns: repeat(3,1fr); }

  /* Why Choose Us */
  .wcu-inner { padding: 0 40px; }
  .wcu-layout { gap: 48px; }
  .wcu-h2 { font-size: clamp(28px, 3.5vw, 40px); }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ── ≤900px — Tablet portrait ────────────────────────────────── */
@media (max-width: 900px) {

  /* Services */
  .st-sub-grid { grid-template-columns: repeat(2,1fr); }
  .st-panel-head { grid-template-columns: 1fr; gap: 14px; }
  .st-panel-btn { width: fit-content; }

  /* Why Choose Us — single column, remove scroll */
  .wcu { padding: 60px 0; }
  .wcu-inner { padding: 0 24px; }
  .wcu-layout { grid-template-columns: 1fr; gap: 44px; }
  .wcu-h2 { font-size: clamp(26px, 6vw, 36px); }
  .wcu-p { max-width: 100%; }
  .wcu-scroll {
    overflow-y: visible;
    -webkit-mask-image: none; mask-image: none;
    height: auto !important;
  }
  .wcu-scroll-hint { display: none; }
  .wcu-stats { max-height: none; }
  .wcu-stat { padding: 20px 18px; }
  .wcu-stat-num { font-size: 30px; }
  .wcu-stat-num sup { font-size: 18px; }

  /* Process — mobile single column */
  .pr-inner { padding: 0 24px; }
  .pr-timeline { max-width: 100%; }
  .pr-line { left: 32px; }
  .pr-row { flex-direction: row; align-items: flex-start; min-height: auto; }
  .pr-row.l, .pr-row.r { flex-direction: row; }
  .pr-left, .pr-right { flex: 1; padding: 0; justify-content: flex-start; visibility: visible !important; padding-left: 20px; }
  .pr-row.l .pr-left { display: none; }
  .pr-row.r .pr-left { display: none; }
  .pr-row.l .pr-right, .pr-row.r .pr-right { display: flex; padding-left: 20px; }
  .pr-node { width: 64px; }
  .pr-circle { width: 60px; height: 60px; box-shadow: 0 0 0 4px rgba(249,115,22,.12); }
  .pr-circle svg { width: 24px; height: 24px; }
  .pr-card { max-width: 100%; padding: 18px; border-radius: 14px; }
  .pr-card::before { display: none; }
  .pr-left .pr-card::before, .pr-right .pr-card::before { display: none; }
  .pr-title { font-size: 15px; }
  .pr-desc { font-size: 12.5px; }
  .pr-spacer { height: 24px; }
  .pr-head { margin-bottom: 48px; }
}

/* ── ≤640px — Mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Hero */
  .hero { min-height: auto; }
  .hero-left { padding: 40px 20px 28px; align-items: center; text-align: center; }
  .hero-left-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .eyebrow { font-size: 11px; }
  .hero-h1 { font-size: clamp(42px, 11vw, 56px); letter-spacing: .5px; text-align: center; }

  /* Typewriter — stack */
  .type-wrap { flex-direction: column; align-items: center; gap: 0; margin-top: 4px; }
  .type-static { font-size: clamp(36px, 10vw, 50px); letter-spacing: .8px; white-space: nowrap; text-align: center; }
  .type-rotating { font-size: clamp(36px, 10vw, 50px); letter-spacing: .8px; white-space: nowrap; display: block; text-align: center; }

  .hero-sub { font-size: 14.5px; max-width: 100%; text-align: center; margin-top: 16px; }

  /* CTAs — full width */
  .cta-row { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .btn-main, .btn-alt { width: 100%; justify-content: center; }

  .stats-strip { grid-template-columns: repeat(2,1fr); width: 100%; margin-top: 28px; }

  /* Form */
  .hero-right { padding: 24px 16px 44px; }
  .form-card { padding: 22px 16px 18px; }
  .f2col { grid-template-columns: 1fr; }
  #cc-dropdown { width: calc(100vw - 32px) !important; left: 16px !important; }
  .recaptcha-wrap { transform-origin: 0 0; }
  .recaptcha-wrap .g-recaptcha { transform: scale(0.85); transform-origin: 0 0; }

  /* Services */
  .st { padding: 44px 0 40px; }
  .st-inner { padding: 0 16px; }
  .st-h2 { font-size: clamp(20px, 6vw, 28px); }
  .st-sub { font-size: 13px; }
  .st-tab { padding: 10px 12px; font-size: 12px; gap: 6px; }
  .st-tab-ico { width: 20px; height: 20px; }
  .st-tab-ico svg { width: 10px; height: 10px; }
  .st-sub-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .st-sub-card { padding: 11px 10px; gap: 8px; }
  .st-sub-ico { width: 26px; height: 26px; border-radius: 7px; }
  .st-sub-ico svg { width: 12px; height: 12px; }
  .st-sub-name { font-size: 11.5px; }
  .st-panel-head { padding: 16px; border-radius: 12px; }
  .st-panel-title { font-size: 16px; }
  .st-panel-desc { font-size: 12.5px; }

  /* Why Choose Us */
  .wcu { padding: 48px 0; }
  .wcu-inner { padding: 0 18px; }
  .wcu-stats { border-radius: 12px; }
  .wcu-stat { padding: 18px 16px; }
  .wcu-stat-num { font-size: 26px; }
  .wcu-stat-lbl { font-size: 11.5px; }
  .wcu-item { grid-template-columns: 46px 1fr; gap: 14px; padding: 20px 0; }
  .wcu-ico { width: 46px; height: 46px; }
  .wcu-ico svg { width: 20px; height: 20px; }
  .wcu-items::before { left: 22px; }
  .wcu-item-title { font-size: 15px; }
  .wcu-item-desc { font-size: 13px; }

  /* Process */
  .pr { padding: 56px 0 52px; }
  .pr-inner { padding: 0 16px; }
  .pr-line { left: 28px; }
  .pr-node { width: 56px; }
  .pr-circle { width: 52px; height: 52px; }
  .pr-circle svg { width: 20px; height: 20px; }
  .pr-num { font-size: 9px; }
  .pr-card { padding: 14px; border-radius: 12px; }
  .pr-tag { font-size: 9px; padding: 2px 8px; }
  .pr-title { font-size: 14px; margin-bottom: 6px; }
  .pr-desc { font-size: 12px; }
  .pr-cta-title { font-size: 18px; }
  .pr-b1, .pr-b2 { font-size: 13px; padding: 11px 20px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-inner { padding: 0 18px; }
}

/* ── ≤380px — Small phones ──────────────────────────────────── */
@media (max-width: 380px) {
  .hero-h1 { font-size: 38px; }
  .type-static, .type-rotating { font-size: 34px; }
  .stat-val { font-size: 22px; }
  .wcu-inner { padding: 0 14px; }
  .wcu-h2 { font-size: 24px; }
  .wcu-stat-num { font-size: 22px; }
}