/* ═══════════════════════════════════════════════════════════
   WAY CONSULTING GROUP — MOBILE STYLESHEET
   Loaded after per-page styles. All overrides are scoped to
   media queries so desktop is unaffected.
   ═══════════════════════════════════════════════════════════ */

/* Prevent grain overlay and absolutely-positioned decorative
   elements from causing horizontal scroll on iOS */
html, body { overflow-x: hidden; }

/* Hamburger: needs 44 × 44px tap target at all sizes where it is shown */
.nav-hamburger { min-width: 44px; min-height: 44px; }

/* Nav logo: stretch to fill the 68px nav bar height */
.nav-logo { align-self: stretch; display: flex; align-items: center; }

/* ── ≤ 960px  (tablet / large phone) ───────────────────────── */
@media (max-width: 960px) {

  /* Footer links — currently 17px line-height only, untappable */
  .footer-links a {
    padding: 8px 6px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ig-btn { min-height: 44px; }

  /* Inline body-text links — expand touch area without breaking prose */
  .pricing-footer-note a,
  .faq-a a,
  .faq-a p a { padding: 6px 2px; display: inline-block; }

  /* "See full pricing and terms" — promise link (index) */
  .promise-link {
    padding: 10px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* "See the process" — hero secondary (venues) */
  .hero-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/* ── ≤ 480px  (phone-specific) ──────────────────────────────── */
@media (max-width: 480px) {

  /* ── Layout: tighten container on narrow phones */
  .container { padding: 0 20px; }
  #nav       { padding: 0 20px; }

  /* ── Section vertical rhythm — reduce from 80-120px to 64px */
  #problem, #promise, #services, #founder, #fit, #faq,
  #apply, #cta-final, #specialism, #cta,
  #context, #guarantee, #journey, #results { padding: 64px 0; }
  #pricing   { padding: 64px 0; }
  #process   { padding: 64px 0; }
  #stats-band { padding: 22px 0; }
  footer     { padding: 40px 0; }

  /* ── Page header (process / results) */
  .page-header { padding: 88px 0 40px; }
  .page-h1     { font-size: clamp(1.75rem, 8vw, 3rem); }
  .page-lead   { font-size: 0.9rem; }

  /* ── Index hero */
  .hero-left  { padding: 40px 20px 36px; }
  .hero-h1    { font-size: clamp(1.75rem, 9vw, 2.4rem); }
  .hero-sub   { font-size: 0.92rem; line-height: 1.7; margin-bottom: 32px; }
  .hero-right { height: 52vw; min-height: 180px; }

  /* Primary CTA: full-width pill on phone */
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .btn-cta {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 18px 28px;
  }

  /* ── Stats band */
  .stat-band-item { padding: 14px 10px; }
  .stat-band-num  { font-size: 1.5rem; }
  .stat-band-label { font-size: 0.57rem; letter-spacing: 0.07em; }

  /* ── Problem section */
  .problem-h2   { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .problem-card { padding: 24px 20px; }

  /* ── Promise */
  .promise-h2  { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .promise-item { padding: 22px 0; gap: 14px; }
  .promise-icon { width: 32px; height: 32px; flex-shrink: 0; }

  /* ── Services */
  .services-h2 { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .service-row {
    padding: 24px 0;
    gap: 12px;
    grid-template-columns: 40px 1fr;
  }

  /* ── Founder */
  .founder-h2       { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .founder-card     { padding: 28px 22px; }
  .founder-stat-val { font-size: 1.5rem; }

  /* ── Fit section */
  .fit-h2  { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .fit-card { padding: 32px 24px; }

  /* ── FAQ */
  .faq-h2 { font-size: clamp(1.4rem, 7vw, 2rem); }
  .faq-q  { font-size: 0.88rem; padding: 20px 0; }
  /* Ensure expanded answers have enough room */
  .faq-item.open .faq-a { max-height: 500px; }

  /* ── Final CTA */
  .cta-final-h2 { font-size: clamp(1.6rem, 8vw, 2.8rem); }
  .cta-final-desc { font-size: 0.9rem; }

  /* ── Apply section */
  .apply-h2  { font-size: clamp(1.4rem, 7vw, 2rem); }
  .apply-sub { font-size: 0.9rem; }
  .apply-points li { font-size: 0.88rem; padding: 12px 0; }

  /* ── Form
     iOS Safari zooms when input font-size < 16px.
     Override the per-page 0.95rem with an explicit 16px. */
  .form-input,
  .form-select,
  .form-textarea  { font-size: 16px; padding: 14px 14px; }
  .form-label     { font-size: 0.68rem; }
  .form-textarea  { min-height: 90px; }
  .form-header    { padding: 20px; }
  .form-body      { padding: 24px 20px; gap: 16px; }
  .form-footer    { padding: 18px 20px; }

  /* ── Sticky bar */
  .sticky-bar { padding: 10px 16px; gap: 10px; }

  /* ── Pricing page */
  .hero-grid  { gap: 28px; }
  .anchor-card  { padding: 28px 20px; }
  .anchor-price { font-size: 1.6rem; }
  .pricing-card { padding: 36px 24px; }
  .pricing-price { font-size: 3rem; }
  .journey-step  { padding: 32px 20px; }
  .guarantee-card { padding: 32px 24px; }
  .faq-layout { gap: 32px; }

  /* ── Process timeline */
  .step-card     { padding: 24px 20px; }
  .step-num-bg   { font-size: 4rem; }
  .process-header { gap: 16px; }

  /* ── Wedding venues hero */
  .hero-inner { padding: 100px 20px 60px; }

  /* ── Specialism section */
  .specialism-card      { padding: 28px 24px; }
  .specialism-card-stat { font-size: 2.2rem; }

  /* ── Results page */
  .in-progress-block { padding: 40px 20px; }
  .proof-block       { padding: 40px 20px; }
  .proof-metrics     { flex-direction: column; gap: 0; }
  .proof-metric {
    padding: 0 0 14px 0;
    margin-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .proof-metric:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .methodology-card { padding: 32px 20px; }

  /* ── Context section (pricing page) */
  .context-h2 { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .guarantee-h2 { font-size: clamp(1.6rem, 7.5vw, 2.6rem); }
  .pricing-h2 { font-size: clamp(1.6rem, 7.5vw, 2.6rem); }
  .promise-h2 { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .cta-h2 { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .faq-h2 { font-size: clamp(1.4rem, 6.5vw, 2.2rem); }
}