/* ==========================================================================
   Triumph Training Center — Mobile Responsive Overrides
   IMPORTANT: This file contains ONLY mobile-only @media queries.
   No bare/desktop CSS rules. Desktop remains 100% untouched.
   ========================================================================== */

/* ==============================
   TABLET & BELOW (max-width: 991px)
   ============================== */
@media (max-width: 991px) {

  /* --- HEADER --- */
  header.header-3d,
  header {
    padding: 10px 0 0 !important;
    position: relative !important;
    z-index: 99999 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    gap: 8px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  .header-brand,
  .brand {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .header-brand img,
  .brand img {
    width: 155px !important;
    max-width: 155px !important;
    height: auto !important;
    max-height: 85px !important;
    object-fit: contain !important;
  }

  .nav-capsule-wrapper {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-grow: 0 !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  .nav,
  header .nav,
  header.header-3d .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 99999 !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
  }

  /* Show navright with phone pill only */
  .navright,
  header .navright,
  header.header-3d .navright,
  div.navright,
  .nav .navright,
  body .navright {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }

  /* Compact phone pill in header - Blue on Mobile matching desktop */
  .navright .phone-pill,
  .navright a.phone-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    padding: 7px 12px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
  }

  .navright .phone-pill img,
  .navright .phone-pill svg,
  .navright a.phone-pill img,
  .navright a.phone-pill svg {
    stroke: #2563eb !important;
    color: #2563eb !important;
  }

  .navright .phone-pill:hover,
  .navright a.phone-pill:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
  }

  /* Top static header on mobile: hide desktop consult button */
  header:not(.scrolled-floating) .navright .btn,
  header:not(.scrolled-floating) .navright .btn-3d,
  header:not(.scrolled-floating) .navright .btn-3d-primary,
  header:not(.scrolled-floating) .navright a[href*="contact"].btn {
    display: none !important;
  }

  /* Full-screen semi-transparent backdrop (behind header & drawer) */
  .mobile-nav-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    z-index: 9990 !important;
    cursor: pointer;
  }

  .mobile-nav-backdrop.active {
    display: block !important;
  }

  /* Mobile hamburger - Clean 3 lines only, no border/box */
  .mobile-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4.5px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    order: 3 !important;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:active,
  .mobile-nav-toggle:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .mobile-nav-toggle span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #0f172a !important;
    border-radius: 2px !important;
    margin: 0 !important;
    pointer-events: none !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    transform-origin: center !important;
  }

  .mobile-nav-toggle.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg) !important;
  }
  .mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .mobile-nav-toggle.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg) !important;
  }

  .mobile-nav-drawer-header {
    display: none !important;
  }

  /* Nav links drawer - Crisp, crystal clear bright white, strictly hidden until toggled */
  .navlinks,
  .nav .navlinks,
  header .navlinks,
  header .nav .navlinks,
  header.header-3d .nav .navlinks,
  header.scrolled-floating .nav .navlinks {
    position: fixed !important;
    top: 68px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.25) !important;
    padding: 12px 14px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    max-height: calc(85vh - 70px) !important;
    overflow-y: auto !important;
    z-index: 1000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  .navlinks.active,
  .nav .navlinks.active,
  header .navlinks.active,
  header .nav .navlinks.active,
  header.header-3d .nav .navlinks.active,
  header.scrolled-floating .nav .navlinks.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .navlinks>a,
  .navlinks .dropdown-toggle {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 11px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease !important;
  }

  .navlinks>a:hover,
  .navlinks .dropdown-toggle:hover {
    background: #f1f5f9 !important;
    color: #2563eb !important;
  }

  /* Mobile Accordion Submenus (Programs, Locations) - Vertical inline expand */
  .navlinks .dropdown {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
  }

  .navlinks .dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 6px 8px !important;
    margin: 4px 0 6px !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .navlinks .dropdown.open > .dropdown-menu {
    display: flex !important;
  }

  .navlinks .dropdown-menu a {
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #e8ecf2 !important;
    margin-bottom: 2px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    white-space: normal !important;
  }

  .navlinks .dropdown-menu a:hover {
    background: #eef2ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
  }

  /* Locations State Accordion */
  .navlinks .state-dropdown-menu {
    padding: 6px !important;
    gap: 4px !important;
  }

  .navlinks .state-item {
    position: static !important;
    border-radius: 10px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .navlinks .state-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    transition: background 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }

  .navlinks .state-item.active > .state-trigger,
  .navlinks .state-trigger:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
  }

  .navlinks .state-arrow {
    font-size: 12px !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease !important;
  }

  .navlinks .state-item.active > .state-trigger .state-arrow {
    transform: rotate(90deg) !important;
    color: #2563eb !important;
  }

  .navlinks .city-submenu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 0 0 10px 10px !important;
    padding: 4px 6px 6px !important;
    flex-direction: column !important;
    gap: 2px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .navlinks .state-item.active > .city-submenu {
    display: flex !important;
  }

  .navlinks .city-submenu a {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    border-radius: 7px !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .navlinks .city-submenu a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
  }

  /* Show CTA buttons inside mobile drawer */
  .mobile-nav-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  /* ==========================================================================
     MOBILE SCROLLED FLOATING HEADER
     Logo stays attached to page & scrolls away; ONLY .nav floats as glass capsule
     ========================================================================== */
  header.scrolled-floating,
  header.header-3d.scrolled-floating {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 0 !important;
  }

  header.scrolled-floating .header-inner,
  header.header-3d.scrolled-floating .header-inner {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Logo sits naturally on page/hero background, scrolling away with page */
  .header-brand,
  .brand,
  header.scrolled-floating .header-brand,
  header.scrolled-floating .brand,
  header.header-3d.scrolled-floating .header-brand,
  header.header-3d.scrolled-floating .brand {
    display: inline-flex !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Scrolled floating navigation pill on mobile: ONLY .nav floats at top */
  header.scrolled-floating .nav,
  header.header-3d.scrolled-floating .nav,
  body.scrolled-page header .nav {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: calc(100% - 24px) !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 6px 10px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    animation: floatCapsuleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  /* Scrolled floating header: arrange Phone (left) + Book Consult (mid) + Hamburger (right) */
  header.scrolled-floating .navright {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    order: 1 !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    justify-content: flex-start !important;
  }

  /* Equalized Phone button & Green Consult button: identical height, padding, and baseline alignment */
  header.scrolled-floating .navright .phone-pill,
  header.scrolled-floating .navright a.phone-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    padding: 5px 9px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    width: auto !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  header.scrolled-floating .navright a[href*="contact"].btn,
  header.scrolled-floating .navright .btn,
  header.scrolled-floating .navright .btn-3d,
  header.scrolled-floating .navright .btn-3d-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    background: #50A359 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(80, 163, 89, 0.25) !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.1px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    order: 2 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Scrolled floating header hamburger: clean 3 lines without box/border */
  header.scrolled-floating .mobile-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    border-radius: 0 !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  header.scrolled-floating .mobile-nav-toggle:hover,
  header.scrolled-floating .mobile-nav-toggle:active,
  header.scrolled-floating .mobile-nav-toggle:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  header.scrolled-floating .mobile-nav-toggle span {
    width: 18px !important;
    height: 2px !important;
    background: #0f172a !important;
  }

  /* --- HERO SECTION --- */
  .hero {
    padding: 40px 0 44px !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Content first, image second - Clean Left Aligned */
  .hero-text-col {
    order: 1 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 10px !important;
    width: 100% !important;
  }

  .hero-image-wrap {
    order: 2 !important;
    margin-top: 8px !important;
    padding: 6px !important;
    width: 100% !important;
  }

  .hero-top-badge {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    margin-top: 8px !important;
    margin-bottom: 18px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 2.5px 8px 2.5px 3.5px !important;
    font-size: 9px !important;
    letter-spacing: -0.1px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    gap: 4.5px !important;
    box-sizing: border-box !important;
  }

  .hero-top-badge .floating-badge-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  .hero-top-badge .floating-badge-icon img {
    width: 8px !important;
    height: 8px !important;
  }

  h1.hero-title {
    font-size: clamp(40px, 9.8vw, 48px) !important;
    line-height: 1.15 !important;
    margin-bottom: 22px !important;
    text-align: left !important;
    letter-spacing: -0.5px !important;
    font-weight: 600 !important;
  }

  h1.hero-title em {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    color: var(--blue, #2563eb) !important;
    font-weight: 600 !important;
  }

  .hero p.lead {
    font-size: 17px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    margin-bottom: 30px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  /* Primary Button: wider padding on right side */
  .hero-ctas .btn-3d-primary,
  .hero-ctas a.btn-3d-primary,
  .hero-ctas a[href*="contact"] {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 44px 14px 26px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
  }

  /* Branch Button: slightly smaller / compact */
  .hero-ctas .btn-3d-glass,
  .hero-ctas a.btn-3d-glass,
  .hero-ctas a[href*="branches"] {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
  }

  .hero-ctas .btn-3d-glass img,
  .hero-ctas a.btn-3d-glass img,
  .hero-ctas a[href*="branches"] img {
    width: 13px !important;
    height: 13px !important;
  }

  /* Hero bottom row (3 feature cards) */
  .hero-bottom-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 32px !important;
    width: 100% !important;
  }

  /* Remove gradient border on mobile only */
  .stat-card-3d::before,
  .hero-bottom-row .stat-card-3d::before,
  .tilt-card-3d::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .stat-card-3d,
  .hero-bottom-row .stat-card-3d {
    text-align: left !important;
    align-items: flex-start !important;
    padding: 24px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  }

  .hero-bottom-row .stat-card-3d>div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  .feat-card-media,
  .hero-bottom-row .feat-card-media {
    width: 100% !important;
    height: 135px !important;
    margin: 0 0 16px 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  .feat-card-media img,
  .hero-bottom-row .feat-card-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: 135px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
  }

  .hero-bottom-row .stat-card-3d div[style*="margin: 0 auto"],
  .hero-bottom-row .stat-card-3d div[style*="margin:0 auto"],
  .hero-bottom-row .stat-card-3d div[style*="margin: 0 auto 14px auto"],
  .hero-bottom-row .stat-card-3d div[style*="margin: 0 auto 16px auto"] {
    margin: 0 0 14px 0 !important;
    align-self: flex-start !important;
  }

  .hero-bottom-row .stat-card-3d b.stat-number-3d,
  .hero-bottom-row .stat-card-3d span {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
  }

  .hero-bottom-row .stat-card-3d p {
    text-align: left !important;
    width: 100% !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  /* --- SECTIONS 1-COLUMN --- */
  .advantage-header {
    text-align: left !important;
    align-items: flex-start !important;
    margin-bottom: 32px !important;
    width: 100% !important;
  }

  .advantage-header h2 {
    font-size: clamp(30px, 7.8vw, 38px) !important;
    text-align: left !important;
    line-height: 1.22 !important;
  }

  .advantage-header p {
    text-align: left !important;
    font-size: 15px !important;
  }

  .section-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: left !important;
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 28px !important;
    width: 100% !important;
  }

  .section-head .eyebrow {
    align-self: flex-start !important;
    text-align: left !important;
  }

  .section-head h2 {
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(30px, 7.8vw, 38px) !important;
    line-height: 1.22 !important;
    word-break: break-word !important;
  }

  .section-head p {
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .advantage-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .advantage h2,
  .advantage-grid h2 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  .advantage p.desc,
  .advantage-grid .desc {
    max-width: 100% !important;
    text-align: left !important;
  }

  .adv-items {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .adv-item,
  div.adv-item {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 24px 20px !important;
    gap: 14px !important;
  }

  .adv-card-top-row,
  div.adv-card-top-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
  }

  .adv-graphic-wrap,
  div.adv-graphic-wrap {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    margin: 0 !important;
  }

  .adv-graphic-wrap svg {
    width: 36px !important;
    height: 36px !important;
  }

  .adv-badge-mobile {
    position: static !important;
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin: 0 0 8px 0 !important;
    align-self: flex-start !important;
  }

  .adv-badge-desktop {
    display: inline-block !important;
  }

  .adv-card-divider {
    display: none !important;
  }

  .adv-card-body,
  div.adv-card-body {
    width: 100% !important;
    text-align: left !important;
  }

  .adv-card-body h4 {
    text-align: left !important;
    margin: 0 0 8px 0 !important;
    font-size: 18.5px !important;
    width: 100% !important;
  }

  .adv-card-body p {
    text-align: left !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .programs-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: 100% !important;
  }

  .contact-info p.desc {
    max-width: 100% !important;
    text-align: left !important;
  }

  /* --- FOOTER LEFT ALIGNMENT --- */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    text-align: left !important;
    width: 100% !important;
  }

  .footer-grid>div {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .footer-brand {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .footer-brand p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .footer-brand img {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  footer h5 {
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  footer ul {
    text-align: left !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  footer li {
    text-align: left !important;
    width: 100% !important;
  }

  .footer-brand .footer-social,
  .footer-social,
  div.footer-social {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* --- INNER PAGE HERO --- */
  .hero-inner {
    padding: 50px 0 36px !important;
  }

  .hero-inner h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }

  .hero-inner p {
    font-size: 15px !important;
  }

  /* --- GRID-2 (about, programs, branches, franchise) --- */
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* --- BLOG GRID --- */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* --- TESTIMONIALS GRID --- */
  .test-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- FRANCHISE BENEFIT GRID --- */
  .benefit-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- CONTACT GRID --- */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* --- FORM GRID --- */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* --- TEST PREP TIMELINE --- */
  .explainer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .timeline-table-card {
    padding: 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* --- BLOG ARTICLE PAGES --- */
  .hero-article {
    padding: 40px 0 28px !important;
  }

  .article-container {
    padding: 32px 0 !important;
  }

  .featured-img {
    height: 220px !important;
    border-radius: 14px !important;
    margin-bottom: 28px !important;
  }

  .cta-banner {
    padding: 28px 20px !important;
    border-radius: 18px !important;
    margin-top: 40px !important;
  }

  .cta-banner h3 {
    font-size: 22px !important;
  }

  /* --- SAT COMPARE BANNER --- */
  .sat-compare-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .banner-badge {
    white-space: normal !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    line-height: 1.35 !important;
  }

  .banner-text {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid #bfdbfe !important;
    padding-top: 12px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- CTA BOX (test-prep-timeline) --- */
  .cta-box {
    padding: 32px 20px !important;
    border-radius: 18px !important;
  }

  .cta-box h2 {
    font-size: 26px !important;
  }

  /* --- TESTIMONIALS REVIEW HEADER (inline flex) --- */
  div[style*="justify-content:space-between"][style*="border-radius:20px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  /* --- FRANCHISE CONTACT BLOCK (inline grid) --- */
  div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- QUICK STAT PILLS & FEATURE MATRICES (Stacked 1 Col on Mobile) --- */
  .quick-stat-pills,
  div.quick-stat-pills,
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .quick-stat-pills>div,
  div.quick-stat-pills>div,
  div[style*="grid-template-columns:1fr 1fr"]>div,
  div[style*="grid-template-columns: 1fr 1fr"]>div {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .roadmap-matrix,
  .promise-grid-4,
  .steps-flow-grid,
  .explainer-grid,
  .curriculum-grid,
  .metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* --- GLOBAL MOBILE BUTTONS LEFT ALIGNMENT --- */
  .actions,
  .hero-cta,
  .hero-actions,
  .cta-actions,
  .cta-btns,
  .btn-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .btn:not(.navright .btn):not(.mobile-nav-toggle):not(.footer-state-btn),
  a.btn:not(.navright .btn):not(.mobile-nav-toggle):not(.footer-state-btn),
  button.btn:not(.mobile-nav-toggle):not(.footer-state-btn),
  .btn-primary:not(.navright .btn-primary),
  a.btn-primary:not(.navright .btn-primary),
  .btn-secondary,
  a.btn-secondary,
  .btn-3d:not(.navright .btn-3d) {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* --- PRIVACY POLICY --- */
  .policy-content {
    padding: 32px 0 !important;
  }

  /* --- FOOTER --- */
  .footer-bottom {
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}


/* ==============================
   MOBILE PHONES (max-width: 767px)
   ============================== */
@media (max-width: 767px) {

  /* --- GLOBAL --- */
  .wrap {
    padding: 0 16px !important;
  }

  section {
    padding: 48px 0 !important;
  }

  /* Typography scaling */
  h1 {
    font-size: 30px !important;
    line-height: 1.22 !important;
  }

  h1.hero-title {
    font-size: clamp(38px, 9.5vw, 46px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    font-weight: 600 !important;
  }

  h2 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    line-height: 1.22 !important;
  }

  /* Touch targets */
  .btn,
  .btn-3d,
  a.btn {
    min-height: 44px !important;
  }

  /* --- HEADER COMPACT --- */
  .nav {
    padding: 8px 12px !important;
  }

  .brand img {
    width: 145px !important;
    max-width: 145px !important;
    height: auto !important;
    max-height: 80px !important;
  }

  .navright .phone-pill,
  .navright a.phone-pill {
    padding: 8px 14px !important;
    font-size: 14.5px !important;
    border-radius: 16px !important;
    gap: 6px !important;
  }

  .mobile-nav-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .mobile-nav-toggle span {
    width: 18px !important;
  }

  /* --- HERO --- */
  .hero {
    padding: 20px 0 36px !important;
  }

  .hero-grid {
    gap: 28px !important;
  }

  .hero-text-col {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .hero-top-badge {
    margin-bottom: 22px !important;
    font-size: 13px !important;
    padding: 7px 15px !important;
    border-radius: 9999px !important;
  }

  h1.hero-title {
    font-size: clamp(38px, 9.5vw, 46px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 22px !important;
    text-align: left !important;
    font-weight: 600 !important;
  }

  .hero p.lead {
    font-size: 16.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
    text-align: left !important;
  }

  .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .hero-ctas .btn-3d-primary,
  .hero-ctas a.btn-3d-primary,
  .hero-ctas a[href*="contact"] {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 14px 44px 14px 26px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
  }

  .hero-ctas .btn-3d-glass,
  .hero-ctas a.btn-3d-glass,
  .hero-ctas a[href*="branches"] {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
  }

  /* Floating badges — prevent overflow */
  .hero-floating-badge-1 {
    top: -12px !important;
    left: 0 !important;
    max-width: calc(50% - 4px) !important;
  }

  .hero-floating-badge-2 {
    top: -12px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    max-width: calc(50% - 4px) !important;
  }

  .hero-floating-badge-3 {
    display: none !important;
  }

  .floating-badge-3d {
    padding: 5px 8px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .floating-badge-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  /* Attached card — reposition to prevent overflow */
  .attached-card {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 10px auto 0 !important;
    max-width: 90% !important;
    animation: none !important;
  }

  /* Hero bottom row stats */
  .stats-group {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .stat-card-3d,
  .hero-bottom-row .stat-card-3d {
    padding: 22px 18px !important;
    border: 1px solid #e2e8f0 !important;
  }

  .stat-number-3d {
    font-size: 34px !important;
  }

  /* Hero image */
  .hero-3d-frame {
    border-radius: 20px !important;
    padding: 8px !important;
  }

  .hero-3d-image-wrap {
    border-radius: 14px !important;
  }

  /* --- ADVANTAGE SECTION --- */
  .advantage h2,
  .advantage-grid h2 {
    font-size: 24px !important;
  }

  .adv-item,
  div.adv-item {
    padding: 24px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  .adv-item h4 {
    font-size: 18px !important;
    text-align: left !important;
    margin: 0 0 8px 0 !important;
  }

  .adv-item p {
    font-size: 14.5px !important;
    text-align: left !important;
    line-height: 1.6 !important;
  }

  /* --- PROGRAMS SECTION --- */
  .programs-grid {
    gap: 20px !important;
  }

  .program-card .img-wrap {
    height: 180px !important;
  }

  .program-body {
    padding: 20px !important;
  }

  .program-body h3 {
    font-size: 20px !important;
  }

  /* --- BRANCHES SECTION --- */
  .branches-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .branch-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .search-box-wrap {
    min-width: 100% !important;
    width: 100% !important;
  }

  .branch-card {
    padding: 20px !important;
  }

  .branch-card h4 {
    font-size: 18px !important;
  }

  /* --- TESTIMONIALS SECTION --- */
  .testimonials {
    padding: 48px 0 !important;
  }

  .testimonials h2 {
    font-size: 24px !important;
  }

  .test-scroll-container {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: auto !important;
  }

  .test-card-slide {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    padding: 24px 20px !important;
  }

  .test-card-slide p.quote {
    font-size: 14px !important;
  }

  /* Testimonials header stacking */
  .testimonials .wrap>div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* --- INNER PAGE HERO --- */
  .hero-inner {
    padding: 36px 0 28px !important;
  }

  .hero-inner h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .hero-inner p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* --- GRID-2 --- */
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* --- ABOUT / PROGRAM CARDS --- */
  .about-card,
  .card-box,
  .info-box,
  .franchise-card {
    padding: 24px !important;
  }

  /* --- BLOG GRID --- */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .blog-img {
    height: 160px !important;
  }

  .blog-body {
    padding: 18px !important;
  }

  .blog-title {
    font-size: 18px !important;
  }

  /* --- TESTIMONIALS GRID --- */
  .test-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .test-card {
    padding: 22px !important;
  }

  /* --- FRANCHISE BENEFIT GRID --- */
  .benefit-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .benefit-card {
    padding: 20px !important;
  }

  /* --- CONTACT --- */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-info h2 {
    font-size: 26px !important;
  }

  .form-card {
    padding: 24px !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* --- TEST PREP TIMELINE --- */
  .explainer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .explainer-card {
    padding: 22px !important;
  }

  .explainer-card h3 {
    font-size: 17px !important;
  }

  .timeline-table-card {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .cta-box {
    padding: 28px 18px !important;
    border-radius: 16px !important;
  }

  .cta-box h2 {
    font-size: 24px !important;
  }

  .cta-box p {
    font-size: 14px !important;
  }

  /* --- BLOG ARTICLE PAGES --- */
  .hero-article {
    padding: 32px 0 24px !important;
  }

  .hero-article h1,
  .article-container h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .article-container {
    padding: 28px 0 !important;
  }

  .featured-img {
    height: 200px !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
  }

  .content p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .content h2 {
    font-size: 22px !important;
    margin-top: 28px !important;
  }

  .content li {
    font-size: 14.5px !important;
  }

  .callout-box {
    padding: 18px !important;
    font-size: 14.5px !important;
    border-radius: 0 12px 12px 0 !important;
  }

  .cta-banner {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    margin-top: 36px !important;
  }

  .cta-banner h3 {
    font-size: 20px !important;
  }

  .cta-banner p {
    font-size: 14px !important;
  }

  .category-pill {
    font-size: 11px !important;
    padding: 5px 12px !important;
  }

  .meta {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  /* --- TESTIMONIALS REVIEW HEADER --- */
  div[style*="justify-content:space-between"][style*="border-radius:20px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px !important;
    gap: 14px !important;
  }

  /* --- INFO ROWS (contact page) --- */
  .info-row {
    gap: 12px !important;
  }

  .info-row .ic {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  /* --- TOAST MODAL --- */
  .toast-modal {
    right: 16px !important;
    left: 16px !important;
    bottom: 16px !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
  }

  /* --- FOOTER --- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: left !important;
  }

  .footer-brand p {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .footer-brand img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .footer-bottom {
    padding-top: 20px !important;
    font-size: 12px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* --- FOOTER LEFT ALIGNMENT --- */
  .footer-grid>div {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .footer-brand {
    text-align: left !important;
    align-items: flex-start !important;
  }

  footer h5 {
    text-align: left !important;
  }

  footer ul {
    text-align: left !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  footer li {
    text-align: left !important;
    width: 100% !important;
  }

  /* Footer State Accordion & Dropdown Buttons (Left Aligned) */
  .footer-state-accordion {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin: 8px 0 0 0 !important;
    width: 100% !important;
  }

  .footer-state-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .footer-state-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 260px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
  }

  .footer-state-btn span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .footer-state-arrow {
    margin-left: auto !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  .footer-city-list {
    text-align: left !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  .footer-city-list li {
    text-align: left !important;
  }

  /* Social icons left aligned */
  .footer-brand .footer-social,
  .footer-social,
  div.footer-social {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* --- ASK AVA CHAT --- */
  .ava-chat-box {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
    bottom: 76px !important;
    height: 460px !important;
  }

  .ava-chat-toggle {
    bottom: 14px !important;
    right: 14px !important;
    width: 52px !important;
    height: 52px !important;
  }

  /* --- BRANCH FINDER SECTION (MOBILE SINGLE COLUMN) --- */
  #mi-cards-grid,
  div#mi-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #oh-cards-grid,
  div#oh-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #oh-section,
  div#oh-section {
    padding: 22px 16px !important;
    border-radius: 20px !important;
  }

  .branch-card-box,
  div.branch-card-box {
    width: 100% !important;
    padding: 22px 20px !important;
    box-sizing: border-box !important;
  }

  #oh-cards-grid>div:last-child {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 18px !important;
  }

  #oh-cards-grid>div:last-child>div:first-child {
    margin: 0 auto 12px auto !important;
  }

  #branch-bottom-pillars,
  div#branch-bottom-pillars,
  .branch-bottom-pillars,
  #advantage-trust-pillars,
  div#advantage-trust-pillars,
  .advantage-trust-pillars {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 22px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- GLOW ORBS (prevent overflow) --- */
  .glow-orb-blue {
    width: 250px !important;
    height: 250px !important;
  }

  .glow-orb-orange {
    width: 200px !important;
    height: 200px !important;
  }

  .glow-orb-cyan {
    width: 180px !important;
    height: 180px !important;
  }
}


/* ==============================
   VERY SMALL PHONES (max-width: 375px)
   ============================== */
@media (max-width: 375px) {

  h1 {
    font-size: clamp(34px, 8.8vw, 40px) !important;
    line-height: 1.18 !important;
  }

  h1.hero-title {
    font-size: clamp(36px, 9.2vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.4px !important;
    font-weight: 600 !important;
  }

  .hero p.lead {
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    margin-bottom: 24px !important;
  }

  h2 {
    font-size: clamp(26px, 7vw, 32px) !important;
  }

  .hero-inner h1 {
    font-size: clamp(28px, 7.5vw, 34px) !important;
  }

  .navright .phone-pill,
  .navright a.phone-pill {
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .hero-ctas .btn-3d-primary,
  .hero-ctas a.btn-3d-primary,
  .hero-ctas a[href*="contact"] {
    padding: 13px 38px 13px 22px !important;
    font-size: 14.5px !important;
    border-radius: 9999px !important;
  }

  .hero-ctas .btn-3d-glass,
  .hero-ctas a.btn-3d-glass,
  .hero-ctas a[href*="branches"] {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    border-radius: 9999px !important;
  }

  .test-card-slide {
    flex: 0 0 260px !important;
    min-width: 260px !important;
  }

  .hero-article h1,
  .article-container h1 {
    font-size: 22px !important;
  }

  .cta-banner h3 {
    font-size: 18px !important;
  }

  .cta-box h2 {
    font-size: 20px !important;
  }

  div#oh-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

#oh-section,
div#oh-section {
  padding: 22px 16px !important;
  border-radius: 20px !important;
}

.branch-card-box,
div.branch-card-box {
  width: 100% !important;
  padding: 22px 20px !important;
  box-sizing: border-box !important;
}

#oh-cards-grid>div:last-child {
  flex-direction: column !important;
  text-align: center !important;
  padding: 24px 18px !important;
}

#oh-cards-grid>div:last-child>div:first-child {
  margin: 0 auto 12px auto !important;
}

#branch-bottom-pillars,
div#branch-bottom-pillars,
.branch-bottom-pillars,
#advantage-trust-pillars,
div#advantage-trust-pillars,
.advantage-trust-pillars {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding-top: 22px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* --- GLOW ORBS (prevent overflow) --- */
.glow-orb-blue {
  width: 250px !important;
  height: 250px !important;
}

.glow-orb-orange {
  width: 200px !important;
  height: 200px !important;
}

.glow-orb-cyan {
  width: 180px !important;
  height: 180px !important;
}
}


/* ==============================
   VERY SMALL PHONES (max-width: 375px)
   ============================== */
@media (max-width: 375px) {

  h1 {
    font-size: clamp(34px, 8.8vw, 40px) !important;
    line-height: 1.18 !important;
  }

  h1.hero-title {
    font-size: clamp(36px, 9.2vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.4px !important;
    font-weight: 600 !important;
  }

  .hero p.lead {
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    margin-bottom: 24px !important;
  }

  h2 {
    font-size: clamp(26px, 7vw, 32px) !important;
  }

  .hero-inner h1 {
    font-size: clamp(28px, 7.5vw, 34px) !important;
  }

  .navright .phone-pill,
  .navright a.phone-pill {
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .hero-ctas .btn-3d-primary,
  .hero-ctas a.btn-3d-primary,
  .hero-ctas a[href*="contact"] {
    padding: 13px 38px 13px 22px !important;
    font-size: 14.5px !important;
    border-radius: 9999px !important;
  }

  .hero-ctas .btn-3d-glass,
  .hero-ctas a.btn-3d-glass,
  .hero-ctas a[href*="branches"] {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    border-radius: 9999px !important;
  }

  .test-card-slide {
    flex: 0 0 260px !important;
    min-width: 260px !important;
  }

  .hero-article h1,
  .article-container h1 {
    font-size: 22px !important;
  }

  .cta-banner h3 {
    font-size: 18px !important;
  }

  .cta-box h2 {
    font-size: 20px !important;
  }
}