/* ============================================================
   MAKAI — RESPONSIVE CSS
   Breakpoints:
     1280px — large tablet / small laptop
     1024px — tablet landscape
     768px  — tablet portrait / large mobile
     480px  — mobile
     375px  — small mobile
   ============================================================ */

/* ── BASE: all images fluid ─────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ════════════════════════════════════════════════════════════
   1280px — Slightly tighter, still 2-col everywhere
════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Hero */
  .hero__photo { max-width: 360px; height: 520px; }
  .hero__title { font-size: 3rem; }

  /* What We Do */
  .what-we-do__inner { grid-template-columns: 280px 1fr; }
  .what-we-do__title { font-size: 2.5rem; }

  /* Why Choose */
  .why-choose__img { max-width: 400px; height: 420px; }

  /* Advocacy */
  .advocacy__grid { gap: 3rem; }
  .advocacy__title { font-size: 1.875rem; }

  /* Fees */
  .fees__grid { gap: 3rem; }
  .fees__title { font-size: 1.875rem; }

  /* Testimonials — 3 cols become fluid */
  .testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   1024px — Tablet landscape: stack 2-col sections
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── HEADER ── */
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .site-nav {
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: all 0.3s ease;
  }
  .site-nav.nav-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__menu { flex-direction: column; gap: 0.5rem; text-align: center; }
  .nav__link { font-size: 1.125rem; padding: 0.625rem 2rem; }

  /* ── HERO ── */
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .hero__photo { max-width: 100%; height: 420px; }
  .hero__pills { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .hero__pill { min-height: auto; }

  /* ── WHAT WE DO ── */
  .what-we-do__inner { grid-template-columns: 260px 1fr; }
  .what-we-do__title { font-size: 2.25rem; }

  /* ── WHY CHOOSE ── */
  .why-choose__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-choose__image { justify-content: center; order: -1; margin-right: 0; }
  .why-choose__img { max-width: 100%; height: 320px; object-position: center 20%; border-radius: 12px; }

  /* ── HOW IT WORKS ── */
  .how-it-works__steps { flex-wrap: wrap; justify-content: center; gap: 2rem; }
  .hiw-connector { display: none; }
  .hiw-step { width: 210px; }

  /* ── FEES ── */
  .fees__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fees__image { justify-content: center; }
  .fees__img { width: 65%; max-width: 380px; height: auto; }

  /* ── STATS ── */
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .stat-item__num { font-size: 3rem; }

  /* ── ADVOCACY ── */
  .advocacy__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .advocacy__img { width: 80%; height: 380px; }
  .advocacy__image { justify-content: center; }

  /* ── TESTIMONIALS ── */
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .tcard { min-height: auto; padding: 1.5rem; }
  .tcard__text { font-size: 0.9375rem; }

  /* ── FOOTER ── */
  .footer-main__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta__inner { flex-direction: column; text-align: center; gap: 1.5rem; padding: 2rem 0; }
  .footer-cta__btn { width: auto; align-self: center; }
}

/* ════════════════════════════════════════════════════════════
   768px — Tablet portrait / large mobile: single column
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── HERO ── */
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__main { padding: 32px 0 28px; }
  .hero__content { padding-bottom: 0; }
  .hero__photo-wrap {
    order: -1;
    justify-content: center;
    padding-right: 0;
    margin-bottom: 0;
  }
  .hero__photo {
    max-width: 100%;
    width: 100%;
    height: 300px;
    border-radius: 0;
    object-fit: cover;
    object-position: center 55%; /* show full faces + shoulders */
  }
  .hero__title { font-size: 2rem; }
  .hero__subtitle { font-size: 0.9375rem; max-width: 100%; margin-bottom: 1.5rem; }
  .hero__actions { gap: 0.75rem; flex-direction: column; width: 100%; }
  /* Both buttons full width, solid styles on mobile */
  .btn-hero--solid,
  .btn-hero--outline {
    width: 100%;
    justify-content: center;
    height: 52px;
  }
  .btn-hero--solid {
    background: #1A2A3A !important;
    color: #FFFFFF !important;
    border-color: #1A2A3A !important;
  }
  .hero__pills { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .hero__pills-zone { padding: 24px 0; }
  /* Fix pill card internal spacing — remove tall line-heights */
  .hero__pill { padding: 1rem 0.875rem; min-height: auto; gap: 0.75rem; align-items: flex-start; }
  .hero__pill-body { display: flex; flex-direction: column; gap: 0.25rem; }
  .hero__pill-body strong { font-size: 0.875rem; line-height: 1.3; margin-bottom: 0; }
  .hero__pill-body span { font-size: 0.75rem; line-height: 1.4; }
  .hero__pill-icon { width: 38px; height: 38px; flex-shrink: 0; }

  /* ── INTRO TEXT ── */
  .intro-text { padding: 48px 0; }
  .intro-text__inner p { font-size: 0.9375rem; }

  /* ── ADVOCACY ── */
  .advocacy { padding: 48px 0; }
  .advocacy__grid { grid-template-columns: 1fr; gap: 2rem; }
  .advocacy__image { justify-content: center; }
  .advocacy__img { width: 100%; height: auto; max-height: 260px; object-fit: cover; object-position: center center; }
  .advocacy__title { font-size: 1.625rem; }
  .advocacy__body { font-size: 0.9375rem; }
  .advocacy__btn { width: 100%; justify-content: center; }

  /* ── WHAT WE DO ── */
  .what-we-do__inner { grid-template-columns: 1fr; }
  .what-we-do__left { flex-direction: column; }
  .what-we-do__left-header { padding: 32px 24px; min-height: auto; flex: none; }
  .what-we-do__title { font-size: 2.25rem; }
  .what-we-do__left-img { min-height: 240px; max-height: 300px; }
  .service-row { padding: 1.25rem; gap: 1rem; }
  .service-row__title { font-size: 1rem; }
  .what-we-do__footer { padding: 1.25rem; }
  .what-we-do__btn { width: 100%; justify-content: center; font-size: 0.6875rem; }

  /* ── WHY CHOOSE ── */
  .why-choose { padding: 48px 0; }
  .why-choose__title { font-size: 1.75rem; }
  .why-choose__img { height: 260px; border-radius: 12px; }
  .why-choose__item { font-size: 0.9375rem; }

  /* ── HOW IT WORKS ── */
  .how-it-works { padding: 48px 0 40px; }
  .how-it-works__title { font-size: 1.75rem; }
  .how-it-works__steps { gap: 1.5rem; }
  .hiw-step { width: 180px; }
  .hiw-step__title { font-size: 1rem; }
  .hiw-step__text { font-size: 0.8125rem; }

  /* ── FEES ── */
  .fees { padding: 48px 0; }
  .fees__grid { grid-template-columns: 1fr; gap: 2rem; }
  .fees__image { justify-content: center; }
  .fees__img { width: 65%; max-width: 280px; height: auto; }
  .fees__title { font-size: 1.75rem; }
  .fees__body { font-size: 0.9375rem; }
  .fees__btn { width: 100%; justify-content: center; }

  /* ── STATS ── */
  .stats-band { padding: 48px 0; }
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .stat-item__num { font-size: 2.5rem; }
  .stat-item__lbl { font-size: 0.75rem; }

  /* ── TESTIMONIALS ── */
  .testimonials { padding: 48px 0; }
  .testimonials__title { font-size: 1.75rem; }
  .testimonials__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 1rem; }
  .tcard { min-height: auto; }
  .tcard__text { font-size: 0.9375rem; }

  /* ── FOOTER CTA ── */
  .footer-cta__inner { flex-direction: column; text-align: center; padding: 2rem 0; gap: 1.25rem; }
  .footer-cta__heading { font-size: 1.375rem; }
  .footer-cta__btn { width: 100%; justify-content: center; }

  /* ── FOOTER ── */
  .footer-main { padding: 48px 0; }
  .footer-main__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand { grid-column: auto; }
  .footer-brand__desc { max-width: 100%; }
  /* Fix footer logo on mobile — ensure white */
  .footer-brand__logo-img {
    filter: brightness(0) invert(1) !important;
    max-width: 140px;
  }
  .footer-bottom__inner { flex-direction: column; text-align: center; gap: 0.5rem; }
}

/* ════════════════════════════════════════════════════════════
   480px — Mobile
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Base spacing */
  .container { padding: 0 1rem; }

  /* ── HERO ── */
  .hero__title { font-size: 1.75rem; line-height: 1.15; }
  .hero__eyebrow { font-size: 0.625rem; padding: 5px 14px; }
  .hero__subtitle { font-size: 0.875rem; }
  .hero__photo { height: 280px; object-position: center 55%; }
  .hero__actions { flex-direction: column; width: 100%; }
  .btn-hero--solid,
  .btn-hero--outline { width: 100%; justify-content: center; height: 52px; }
  .hero__pills { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
  .hero__pill { padding: 0.875rem 0.75rem; }

  /* ── ADVOCACY ── */
  .advocacy__title { font-size: 1.5rem; }
  .advocacy__list-item { font-size: 0.9375rem; }

  /* ── WHAT WE DO ── */
  .what-we-do__title { font-size: 2.25rem; }
  .service-row__icon { width: 44px; height: 44px; }
  .service-row__icon img { width: 24px; height: 24px; }

  /* ── WHY CHOOSE ── */
  .why-choose__title { font-size: 1.5rem; }
  .why-choose__item { font-size: 0.875rem; gap: 0.75rem; }
  .why-choose__icon { width: 32px; height: 32px; }
  .why-choose__icon img { width: 16px; height: 16px; }

  /* ── HOW IT WORKS ── */
  .how-it-works__title { font-size: 1.625rem; }
  .how-it-works__steps { gap: 1.5rem; }
  .hiw-step { width: 160px; }
  .hiw-step__circle { width: 68px; height: 68px; }
  .hiw-step__circle img { width: 28px; height: 28px; }

  /* ── FEES ── */
  .fees__title { font-size: 1.625rem; }
  .fees__img { width: 80%; }
  .fees__phone { font-size: 1.0625rem; }

  /* ── STATS ── */
  .stats-band__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .stat-item__num { font-size: 2.25rem; }

  /* ── TESTIMONIALS ── */
  .testimonials__title { font-size: 1.625rem; }
  .testimonials__grid { max-width: 100%; }
  .tcard__quote { font-size: 3rem; }
  .tcard__text { font-size: 0.9375rem; }

  /* ── FOOTER CTA ── */
  .footer-cta__heading { font-size: 1.25rem; }

  /* ── FOOTER ── */
  .footer-bottom__copy,
  .footer-bottom__credit { font-size: 0.6875rem; }
}

/* ════════════════════════════════════════════════════════════
   375px — Small mobile (iPhone SE etc.)
════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  .container { padding: 0 0.875rem; }

  /* Hero */
  .hero__title { font-size: 1.5rem; }
  .hero__pills { grid-template-columns: 1fr; }
  .hero__pill-body strong { font-size: 0.8125rem; }

  /* Advocacy */
  .advocacy__title { font-size: 1.375rem; }

  /* What We Do */
  .what-we-do__title { font-size: 2rem; }
  .service-row { padding: 1rem; }

  /* How It Works */
  .hiw-step { width: 140px; }
  .hiw-step__circle { width: 60px; height: 60px; }

  /* Stats */
  .stat-item__num { font-size: 2rem; }

  /* Testimonials */
  .tcard { padding: 1.25rem; }

  /* Footer CTA */
  .footer-cta__heading { font-size: 1.125rem; }
}

/* ════════════════════════════════════════════════════════════
   HEADER — Mobile nav
════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Ensure nav is always visible on desktop */
  .site-nav {
    position: static;
    background: transparent;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    flex-direction: row;
  }
  .nav-toggle { display: none !important; }
  .header-cta { display: block; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE SPECIFIC FIXES — additional patches
════════════════════════════════════════════════════════════ */

/* ── Hero buttons — prevent overflow on very narrow screens ── */
@media (max-width: 400px) {
  .hero__actions { padding: 0 0.5rem; }
  .btn-hero--solid,
  .btn-hero--outline {
    font-size: 0.875rem;
    padding: 0 1rem;
    height: 48px;
  }
}

/* ── Contact form — single col below 560px ── */
@media (max-width: 560px) {
  .zf-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-form-card {
    padding: 24px 20px;
  }
}

/* ── Testimonials — prevent overflow on mobile ── */
@media (max-width: 480px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* ── What We Do button — prevent text overflow ── */
@media (max-width: 480px) {
  .what-we-do__btn {
    font-size: 0.625rem;
    padding: 0 1rem;
    letter-spacing: 0.02em;
  }
}

/* ── Stats band — always 2 col on mobile ── */
@media (max-width: 480px) {
  .stats-band__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 0.5rem;
    text-align: center;
  }
}

/* ── Footer: ensure columns visible on all mobile ── */
@media (max-width: 480px) {
  .footer-links-col__heading { font-size: 0.75rem; }
  .footer-links-col__list li a { font-size: 0.8125rem; }
  .footer-contact-item { font-size: 0.8125rem; }
  .footer-brand__desc { font-size: 0.8125rem; }
}

/* ── Inner pages: about/contact/faq responsive ── */
@media (max-width: 768px) {
  /* About hero */
  .about-hero { padding: 40px 0; }
  .about-hero__title { font-size: 1.625rem; }

  /* FAQ layout */
  .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
  .faq-sidebar__card { position: static; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* WWH section */
  .wwh-section__grid { grid-template-columns: 1fr; }
  .wwh-section__left { padding: 40px 24px; }
  .wwh-section__img { height: 300px; }
  .who-grid-2col { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   CENTERING FIX — All sections max-width 1240px centered
   Fixes left-drift visible on zoomed-out / wide screens
════════════════════════════════════════════════════════════ */

/* Hero — content centered */
.hero__main .container,
.hero__pills-zone .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* What We Do — inner grid centered */
.what-we-do__inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  width: 100%;
}

/* Why Choose — content centered within full-width dark bg */
.why-choose .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* How It Works — header + steps centered */
.how-it-works__header,
.how-it-works__steps,
.how-it-works__divider {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* Fees — grid centered */
.fees .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Stats band — centered */
.stats-band .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Testimonials — fix fixed-width columns causing overflow */
.testimonials__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Intro text — centered */
.intro-text__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Advocacy — centered */
.advocacy .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Footer CTA — centered */
.footer-cta .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Footer main — centered */
.footer-main .container,
.footer-bottom .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Testimonials section header — centered */
.testimonials .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}