/* ==========================================================================
   Customera mobile alignment overlay
   Loaded after each page's inline <style> so rules win without !important
   where specificity is equal. Targets 768px and 560px per design system.
   ========================================================================== */

/* Language switch lives inside the Menu dropdown — mark current language --- */
.nav-dropdown a[aria-current="true"] {
  color: oklch(0.55 0.045 250);
  font-weight: 500;
}

/* --- 1024px: tighten internal section padding before mobile takes over --- */
@media (max-width: 1024px) {
  .container { padding-left: 28px; padding-right: 28px; }
  section { padding-top: 80px; padding-bottom: 80px; }
}

/* --- 768px: primary mobile breakpoint --- */
@media (max-width: 768px) {

  /* Page chrome ----------------------------------------------------------- */
  .container { padding: 0 20px; }

  /* Generic section padding is 96px on several pages; bring it in line */
  section { padding: 56px 0; }
  .problem-section,
  .ladder-section,
  .services-section,
  .how-section,
  .ttg-section,
  .credibility-section { padding: 56px 0; }
  .hub-strip { padding: 48px 0; }
  /* .framework-section and .cta-section keep padding:0 — children handle spacing */

  /* Topbar / nav ---------------------------------------------------------- */
  /* Make the hamburger always visible: stop nav-right from overflowing */
  nav { z-index: 200; }
  .nav-inner { padding: 0 16px; gap: 8px; flex-wrap: nowrap; min-width: 0; }
  .logo-mark { min-width: 0; flex-shrink: 1; }
  .logo-img { height: 44px !important; }
  .logo-wordmark { gap: 2px; min-width: 0; }
  .logo-text { font-size: 19px !important; line-height: 1.05; }
  /* Hide the subtitle on phones — it's the main width hog forcing overflow */
  .logo-sub { display: none !important; }
  .nav-right { gap: 8px; flex-shrink: 0; align-items: center; }
  /* Sprint CTA stays, but trims */
  .nav-cta-sprint { padding: 8px 12px; font-size: 12px; gap: 4px; white-space: nowrap; }
  .nav-cta-sprint svg { width: 11px; height: 11px; }
  /* Hamburger always visible on mobile and never pushed off */
  .nav-toggle { display: flex !important; flex-shrink: 0; }
  /* Desktop hover menu hidden on mobile */
  .nav-menu-btn { display: none !important; }
  .nav-cta-hub { display: none !important; }

  /* Hero ------------------------------------------------------------------ */
  .hero { padding-left: 0; padding-right: 0; }
  .hero h1 { font-size: clamp(28px, 6.4vw, 38px); line-height: 1.2; }
  .hero-sub { font-size: 15px; line-height: 1.65; }
  .hero-eyebrow { font-size: 10px; }
  .hero-stats { gap: 18px; row-gap: 16px; }
  .hero-stat { padding-left: 12px; }
  .hero-stat-num { font-size: 20px; }
  .hero-stat-label { font-size: 11px; }
  .hero-actions { gap: 10px; flex-direction: column; align-items: stretch; }
  .hero-actions > a,
  .hero-actions > button { justify-content: center; width: 100%; }
  .hero-card { padding: 24px; }
  .hero-card-title { font-size: 16px; }

  /* Section header alignment ---------------------------------------------- */
  .section-title { font-size: clamp(24px, 5.6vw, 32px); line-height: 1.25; }
  .section-sub { font-size: 15px; line-height: 1.65; }

  /* Home: problem stat cards --------------------------------------------- */
  .stat-cards { gap: 10px; }
  .stat-card { padding: 18px 14px; }
  .stat-card-num { font-size: 26px; }
  .stat-card-text { font-size: 12px; }

  /* Home: revenue ladder -------------------------------------------------- */
  .ladder-item {
    grid-template-columns: 28px 1fr;
    gap: 12px 14px;
    padding: 14px 16px;
    row-gap: 4px;
  }
  .ladder-price {
    grid-column: 2 / 3;
    text-align: left;
    font-size: 13px;
  }
  .ladder-arrow { padding: 0; }

  /* Home: services interactive cards ------------------------------------- */
  .sc-front { padding: 32px 24px 24px; }
  .sc-detail-inner { padding: 0 24px 28px; }
  .sc-title { font-size: 20px; }
  .sc-summary { font-size: 13.5px; }

  /* Home: how-it-works steps --------------------------------------------- */
  .how-step { padding: 0 8px; }
  .how-step-num { width: 48px; height: 48px; font-size: 17px; }
  .how-step-title { font-size: 15px; }

  /* Home: framework 3-column grid --------------------------------------- */
  .fw-left,
  .fw-pillars,
  .fw-right { padding: 40px 24px; }
  .fw-title { font-size: clamp(20px, 5.4vw, 26px); margin-bottom: 22px; }
  .fw-pillar { padding: 14px 0; gap: 12px; }
  .fw-pillar-icon { width: 38px; height: 38px; }
  .fw-pillar-letter { font-size: 17px; }

  /* Home: TTG card ------------------------------------------------------- */
  .ttg-card { padding: 30px 24px; }
  .ttg-card-title { font-size: 19px; }
  .ttg-prices { gap: 18px; flex-wrap: wrap; }
  .ttg-price-amount { font-size: 19px; }

  /* Home: hub strip ------------------------------------------------------ */
  .hub-tier { padding: 18px 16px; }
  .hub-tier-price { font-size: 19px; }

  /* Home: closing CTA ---------------------------------------------------- */
  .cta-grid { min-height: auto; }
  .cta-left,
  .cta-right { padding: 40px 24px; }
  .cta-card { padding: 22px 20px; }
  .cta-title { font-size: clamp(24px, 6.4vw, 34px); }

  /* Hub page ------------------------------------------------------------- */
  .login-inner { padding: 36px 24px; gap: 28px; }
  .stat-strip-inner { padding: 24px; gap: 14px; }
  .entry-grid > *,
  .tools-grid > *,
  .content-grid > *,
  .cluster-grid > *,
  .premium-grid > * { padding: 28px 22px; }

  /* About page ----------------------------------------------------------- */
  .stat-band-inner { padding: 16px 20px; gap: 14px; }
  .stat-item { padding: 14px 12px; }
  .stat-val { font-size: 22px; }
  .stat-label { font-size: 11px; }
  .why-inner,
  .who-inner,
  .quote-section { padding: 52px 24px; }

  /* Contact page --------------------------------------------------------- */
  .main-grid { padding: 36px 20px; gap: 36px; }
  .next-steps { padding: 36px 20px; }
  .ns-step { padding: 22px 18px; }
  .ns-num { font-size: 22px; }
  .ns-title { font-size: 14px; }

  /* CX Diagnostic Sprint / Accelerator / Fractional ---------------------- */
  .deliverables-grid > *,
  .pricing-grid > *,
  .tiers-grid > *,
  .operate-grid > *,
  .ba-grid > *,
  .compare-cols > *,
  .entry-grid > * { padding: 26px 22px; }
  .phase-card { padding: 26px 22px; gap: 20px; }
  .price-card { padding: 28px 24px; }
  .price-val,
  .price-amount { font-size: clamp(26px, 6vw, 34px); }
  .tl-phase { gap: 14px; padding-bottom: 24px; }
  .tl-marker,
  .tl-item-dot { transform: scale(.9); }
  .what-inner,
  .roi-inner,
  .compare-inner { padding: 52px 24px; gap: 36px; }

  /* H.E.A.R.T. Framework page ------------------------------------------- */
  .pillar-banner > * { padding: 18px 12px; }
  .pillar-detail { padding: 40px 24px; gap: 32px; }
  .connect-grid { padding: 0 24px 32px; }
  .pulse-inner { padding: 36px 24px; gap: 28px; }
  .pulse-stats { gap: 12px; }

  /* Heart Pulse Check / Friction Finder tools --------------------------- */
  .gate-left,
  .gate-right { padding: 36px 24px; }
  .quiz-topbar { padding: 14px 20px; }
  .results-hero { padding: 36px 20px; }
  .cta-block { padding: 28px 20px; }
  .results-body { padding: 28px 20px; }

  /* Privacy / Terms ------------------------------------------------------ */
  .legal-body { padding: 40px 24px; font-size: 15px; line-height: 1.7; }
  .legal-section { margin-bottom: 24px; }
  .legal-section h2 { font-size: 19px; margin-top: 0; margin-bottom: 12px; }
  .legal-contact-box { padding: 20px; font-size: 14px; }

  /* Footer (consistent everywhere) -------------------------------------- */
  footer { padding: 40px 20px 28px; }
  .footer-inner { max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px; margin-bottom: 24px; }
  .footer-col { padding-top: 0 !important; }
  .footer-brand { gap: 14px; }
  .footer-brand .logo-mark { gap: 12px; align-items: center; }
  .footer-brand .logo-img { height: 48px; }
  .footer-brand .logo-text { font-size: 22px; }
  /* Footer logo subtitle stays — there's room in the footer */
  .footer-brand .logo-sub { display: block !important; font-size: 8px; }
  .footer-tagline { font-size: 13px; max-width: 100%; }
  .footer-contact { font-size: 13px; }
  .footer-col-title { margin-bottom: 12px; }
  .footer-links li { margin-bottom: 8px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 20px; }
  .footer-copy { white-space: normal; font-size: 11px; line-height: 1.55; }
  .footer-legal { flex-wrap: wrap; gap: 16px; }

  /* Long words / overflow safety ---------------------------------------- */
  body { overflow-x: hidden; }
  h1, h2, h3, p { overflow-wrap: anywhere; word-break: normal; }
  img, svg, video { max-width: 100%; height: auto; }

  /* Tap-target sizes (WCAG 2.5.5) ---------------------------------------- */
  /* min-height has no effect on default-display inline anchors, so body
     text links are unaffected; only block / flex / inline-block buttons
     and CTAs are forced up to 44px. */
  a, button { min-height: 44px; }
  .nav-toggle { width: 44px; height: 44px; padding: 10px; }
  footer a { display: inline-block; padding: 10px 4px; min-height: 44px; }
}

/* --- 560px: small phones --- */
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  section { padding: 48px 0; }

  .hero h1 { font-size: 26px; }
  .hero-stats { gap: 12px; }
  .hero-stat { padding-left: 10px; }
  .hero-stat-num { font-size: 18px; }

  /* Drop 2-up stat grids to single column */
  .stat-cards,
  .hero-stats[data-cols="2"],
  .pulse-stats { grid-template-columns: 1fr; }

  /* 5-col pillar banner: 2 cols on small phones (was 3) */
  .pillar-banner { grid-template-columns: repeat(2, 1fr); }
  .pillar-banner > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Other tight grids */
  .pillar-summary-grid { grid-template-columns: 1fr; }
  .stages-row { grid-template-columns: 1fr; }
  .related-grid,
  .deliverables-grid,
  .ns-grid,
  .stat-band-inner,
  .stat-strip-inner,
  .hub-tiers,
  .hero-stats { grid-template-columns: 1fr; }

  /* Tighter section header */
  .section-title { font-size: 22px; }

  /* Logo trims further on small phones (subtitle already hidden in nav) */
  .logo-img { height: 40px !important; }
  .logo-text { font-size: 17px !important; }

  /* On very small screens, drop the Sprint CTA text to icon-only or trim */
  .nav-cta-sprint { padding: 7px 10px; font-size: 11px; gap: 4px; }
  .nav-cta-sprint svg { width: 10px; height: 10px; }
}

/* --- 380px: very small phones (e.g. iPhone SE 1st gen) --- */
@media (max-width: 380px) {
  .hero h1 { font-size: 24px; }
  .section-title { font-size: 20px; }
  .hero-card { padding: 20px; }
  .pillar-letter { width: 26px; height: 26px; font-size: 13px; }
}