/* ============================================================
   MOBILE.CSS — Seven AI Institute
   Mobile-first overrides for all pages.
   Loaded LAST — overrides layout.css, animations.css, and
   any inline styles. Targets ≤ 1024px (tablets & phones).
   Desktop (> 1024px) is completely untouched.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   DESKTOP BASELINE — Mobile scene images are hidden by default.
   They are only shown via the media query below (≤ 1024px).
   This ensures zero impact on desktop layout.
───────────────────────────────────────────────────────────── */
.mobile-scene-img {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   SHARED UTILITIES
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Prevent all horizontal overflow site-wide */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  /* Make sure main content respects viewport */
  .main-content {
    overflow-x: hidden !important;
  }

  /* ─────────────────────────────────────────────
     NAVBAR
  ───────────────────────────────────────────── */
  .site-header {
    top: 0.75rem;
    width: calc(100% - 2rem);
  }

  .site-nav {
    padding: 0.6rem 1rem;
    border-radius: 12px;
  }

  .nav-brand-text {
    font-size: 0.85rem;
  }

  /* ─────────────────────────────────────────────
     MOBILE / TABLET SCENE IMAGES
     Hide canvas → show static image on mobile/tablet.
     Desktop: canvas visible, img hidden (rule above).
  ───────────────────────────────────────────── */

  /* Show the replacement images */
  .mobile-scene-img {
    display: block !important;
  }

  /* --- HERO MOBILE IMAGE --- */
  /* Hide the animated canvas on mobile */
  #hero-video-canvas {
    display: none !important;
  }

  .hero-mobile-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 20px !important;
    display: block !important;
    transform: scale(1.3) !important; /* Scaled by 1.3 as requested */
    /* Subtle depth shadow to match the premium feel */
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.06) !important; */
    /* Prevent the image from being clipped */
    position: relative !important;
    margin-top: 50px !important;
    z-index: 2 !important;
  }

  /* Make the container hold the image properly */
  #hero-video-col .hero-canvas-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* Changed to visible to support scale(1.3) */
    border-radius: 20px !important;
    margin-top: 55px;
  }

  /* --- SERVICES / SECTION 3 MOBILE IMAGE --- */
  /* Hide the animated canvas on mobile */
  #services-video-canvas {
    display: none !important;
  }

  .services-mobile-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 20px !important;
    display: block !important;
    transform: scale(1.3) !important; /* Scaled by 1.3 as requested */
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), */
                /* 0 0 80px rgba(59, 130, 246, 0.15) !important; */
    position: relative !important;
    z-index: 2 !important;
    margin-top: 25px !important;
  }

  /* Services canvas container — hold the image */
  .services-canvas-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* Changed to visible to support scale(1.3) */
    border-radius: 20px !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — HERO SECTION
  ───────────────────────────────────────────── */
  #hero-pin-wrapper,
  .hero-pin-wrapper {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
    position: relative !important;
  }

  .hero-content-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 7rem 1.25rem 3rem !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 100svh;
  }

  .hero-text-col {
    order: 1;
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center;
  }

  .hero-line-1 {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0.2em;
  }

  .hero-ai {
    font-size: clamp(3rem, 10vw, 4.5rem) !important;
  }

  .hero-solutions {
    font-size: clamp(1.4rem, 4vw, 2rem) !important;
  }

  .hero-future {
    font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
  }

  .hero-presents {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-tagline {
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-badges {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0.75rem !important;
    transform: none !important;
    margin-bottom: 0 !important;
  }

  .hero-badge {
    font-size: 0.78rem !important;
    padding: 0.45rem 1rem !important;
  }

  .hero-video-col {
    order: 2;
    width: 100% !important;
    flex: none !important;
    height: 38svh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    margin-top: -2rem;
    margin-bottom: 25px !important; /* Added 25px bottom spacing */
  }

  .hero-canvas-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    animation: none !important;
  }

  /* Canvas is replaced by static image on mobile — hide it */
  #hero-video-canvas {
    display: none !important;
  }

  .hero-canvas-glow {
    display: none !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — ABOUT SECTION
  ───────────────────────────────────────────── */
  #about-pin-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important; /* Set to hidden to prevent bubble bleed conflicts */
    position: relative !important;
    padding-top: 4rem !important;
    padding-bottom: 6rem !important;
    margin-bottom: 2rem !important;
    background: #fdfdfd !important; /* Solid background to prevent Section 3 dark theme overlap */
    z-index: 10 !important;
  }


  .wa-query-prompt {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.85rem;
    width: auto;
    transform: translateY(24px) scale(0.98);
  }

  .wa-query-prompt.is-visible {
    transform: translateY(0) scale(1);
  }

  .wa-query-shell {
    border-radius: 22px;
    padding: 1.1rem 1rem 1rem;
  }

  .wa-query-orb {
    width: 64px;
    height: 64px;
    top: -16px;
    right: -16px;
  }

  .wa-query-copy {
    padding-right: 2.5rem;
  }

  .wa-query-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wa-query-cta,
  .wa-query-secondary {
    width: 100%;
    padding: 0.9rem 1rem;
  }
  /* Make the background parallax fill the parent properly as absolute backdrop */
  #about-bg-parallax {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  /* The white card: break out of absolute positioning */
  #about-card-layer,
  .white-card-layer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 92% !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 2.5rem 1.25rem !important;
    border-radius: 24px !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    overflow: visible !important;
    z-index: 3 !important; /* Ensure card stays on top of bubbles */
  }

  /* About section split layout: column */
  .section-content-wrapper.split-layout {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    height: auto !important;
    gap: 2rem !important;
  }

  /* About canvas column */
  #about-canvas-col,
  .canvas-col {
    width: 100% !important;
    flex: none !important;
    height: 40svh !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .canvas-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .about-visual-img {
    width: auto !important;
    height: 100% !important;
    max-height: 40svh !important;
    object-fit: contain !important;
    scale: 1.3 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* About text column */
  #about-text-col,
  .text-col {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #about-text-col .section-title,
  .text-col .section-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  #about-text-col .fade-text {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — SERVICES SECTION
  ───────────────────────────────────────────── */
  #services-pin-wrapper {
    height: auto !important;
    min-height: 100svh !important;
    overflow: hidden !important; /* Set to hidden to prevent background earth bleed conflicts */
    position: relative !important;
  }

  .services-content-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .services-headline-box {
    position: relative !important;
    top: auto !important;
    padding: 5.5rem 1.25rem 1.5rem !important;
    text-align: center !important;
    width: 100% !important;
    z-index: 20 !important;
  }

  .services-title .line-1 {
    font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
  }

  .services-title .line-2 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
  }

  /* Convert floating capsules to a 2-column grid */
  .capsules-wrapper {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    width: 100% !important;
  }

  .floating-capsule {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0.9rem 1rem !important;
    text-align: center !important;
    width: 100% !important;
    border-radius: 60px !important;
    transform: none !important;
  }

  .cap-text {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }

  /* Services canvas */
  .services-canvas-col {
    width: 100% !important;
    height: 45svh !important;
    margin-top: 1rem !important;
    margin-bottom: 25px !important; /* Added 25px bottom spacing */
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .services-canvas-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  /* Canvas is replaced by static image on mobile — hide it */
  #services-video-canvas {
    display: none !important;
  }

  /* Earth background — no zoom/rotation animation on mobile */
  .earth-container {
    position: absolute !important;
    top: -10% !important;
    left: -10% !important;
    width: 120% !important;
    height: 120% !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — WHY CHOOSE US (Portfolio Section)
  ───────────────────────────────────────────── */
  #portfolio-pin-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
    margin-top: 0 !important;
  }

  /* Nebula hidden on mobile to reduce clutter */
  #nebula-container {
    display: none !important;
  }

  /* The white card: natural flow */
  #portfolio-card-layer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 92% !important;
    height: auto !important;
    min-height: auto !important;
    margin: 2rem auto !important;
    border-radius: 28px !important;
    padding: 2.5rem 1.25rem !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
    overflow: visible !important;
  }

  /* Portfolio split layout */
  #portfolio-text-col {
    width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    text-align: center !important;
    order: 1;
  }

  .choose-title {
    font-size: clamp(1.6rem, 5.5vw, 2rem) !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    margin-bottom: 1.25rem !important;
  }

  .benefits-list {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .benefit-item {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 0.85rem 0.9rem 0.85rem 2.8rem !important;
    background: rgba(37, 99, 235, 0.05) !important;
    border: 1px solid rgba(37, 99, 235, 0.1) !important;
    border-radius: 14px !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
  }

  .benefit-item::before {
    content: '→' !important;
    position: absolute !important;
    left: 0.9rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.9rem !important;
    color: var(--primary-base) !important;
    font-weight: 900 !important;
  }

  /* Portfolio visual column */
  .portfolio-visual-col {
    width: 100% !important;
    flex: none !important;
    height: 260px !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: visible !important;
    order: 2;
  }

  .portfolio-canvas-container {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  #portfolio-static-img {
    height: 240px !important;
    width: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    scale: none !important;
    display: block !important;
  }

  #planet-orb {
    position: absolute !important;
    top: 8px !important;
    left: 16px !important;
    width: 50px !important;
    height: 50px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #planet-orb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  #rocket-ship {
    position: absolute !important;
    top: 8px !important;
    right: 16px !important;
    left: auto !important;
    width: 50px !important;
    height: 50px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #rocket-ship img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — TESTIMONIALS SECTION
  ───────────────────────────────────────────── */
  #testimonials-pin-wrapper {
    /* Keep pinned — only override potential CSS conflicts */
    overflow: hidden !important;
  }

  .testimonials-container {
    overflow: hidden !important;
  }

  .testimonials-header {
    padding: 0 1rem !important;
    margin-bottom: 2rem !important;
  }

  .testimonials-header .section-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }

  .section-subtitle {
    font-size: 0.9rem !important;
  }

  /* Cards: full-width readable size */
  .testimonial-card {
    flex: 0 0 88vw !important;
    padding: 1.75rem 1.25rem !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .horizontal-scroll-wrapper {
    padding: 0 1.25rem !important;
    gap: 1rem !important;
  }

  .quote-icon {
    font-size: 2.5rem !important;
    margin-bottom: -0.5rem !important;
  }

  .testimonial-text {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.25rem !important;
  }

  .author-avatar {
    width: 44px !important;
    height: 44px !important;
  }

  .author-name {
    font-size: 0.95rem !important;
  }

  .author-role {
    font-size: 0.78rem !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — COURSES SECTION
  ───────────────────────────────────────────── */
  #courses {
    padding: 4rem 0 !important;
  }

  .courses-header {
    margin-bottom: 3rem !important;
    padding: 0 1rem !important;
  }

  .courses-header .section-title {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
  }

  /* Override both course grid variants (homepage + courses page) */
  .premium-courses-grid,
  #main-courses-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    perspective: none !important;
  }

  .premium-card {
    padding: 2rem 1.5rem !important;
    border-radius: 24px !important;
    transform-style: flat !important;
  }

  .premium-card .course-name,
  .course-name {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }

  .course-overview {
    font-size: 0.9rem !important;
    max-width: 100% !important;
  }

  .card-icon-wrapper {
    margin-bottom: 1.5rem !important;
  }

  .card-footer {
    margin-top: 2rem !important;
  }

  .card-tags span {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — GALLERY / MARQUEE
  ───────────────────────────────────────────── */
  .marquee-container {
    transform: translateX(-50%) rotate(-2deg) scale(1.02) !important;
    padding: 2rem 0 !important;
    gap: 1.25rem !important;
  }

  .marquee-item {
    width: 240px !important;
    height: 170px !important;
    border-radius: 14px !important;
  }

  .marquee-overlay h3 {
    font-size: 0.95rem !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE — CONTACT CTA SECTION
  ───────────────────────────────────────────── */
  #contact-pin-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  .contact-cta-wrapper {
    padding: 4rem 1rem 5rem !important;
  }

  .contact-card {
    padding: 3rem 1.25rem !important;
    border-radius: 24px !important;
  }

  .contact-icon {
    font-size: 2.5rem !important;
    margin-bottom: 1.25rem !important;
  }

  .contact-card .section-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    margin-bottom: 1rem !important;
  }

  .contact-card .section-subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }

  .contact-card .btn-3d {
    min-width: 200px !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
  }

  /* ─────────────────────────────────────────────
     ABOUT PAGE — ALL SECTIONS
  ───────────────────────────────────────────── */

  /* Strip ALL section-pin-wrapper height locks on about page */
  #about-hero-wrapper,
  #who-we-are-wrapper,
  #vision-wrapper,
  #what-we-do-wrapper,
  #founders-wrapper,
  #contact-cta-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* About Hero */
  #about-hero-wrapper {
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #about-hero-wrapper .standard-section {
    height: auto !important;
    min-height: 100svh !important;
    padding: 6rem 1.25rem 4rem !important;
  }

  #about-hero-wrapper h1 {
    font-size: clamp(2.2rem, 7vw, 3.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  #about-hero-wrapper p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* About parallax circles — no overflow on mobile */
  #about-hero-wrapper .parallax-circle {
    opacity: 0.15 !important;
    filter: blur(60px) !important;
    transform: none !important;
  }

  /* Who We Are */
  #who-we-are-wrapper {
    min-height: auto !important;
    padding: 0 !important;
  }

  #who-we-are-wrapper .standard-section {
    min-height: auto !important;
    padding: 5rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
  }

  #who-we-are-wrapper h2 {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }

  #who-we-are-wrapper p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* Our Vision */
  #vision-wrapper {
    min-height: auto !important;
    padding: 0 !important;
  }

  #vision-wrapper .standard-section {
    padding: 5rem 1.25rem !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Vision inner flex: stack on mobile */
  #vision-wrapper > div > .standard-section > div[style*="flex-wrap"] {
    flex-direction: column !important;
    gap: 2.5rem !important;
  }

  #vision-wrapper h2 {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    text-align: center !important;
  }

  #vision-wrapper p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* Vision glowing circle: smaller */
  #vision-wrapper div[style*="border-radius: 50%"] {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
  }

  /* What We Do — horizontal track to vertical stack */
  #what-we-do-wrapper {
    overflow: visible !important;
    padding: 0 !important;
  }

  #what-we-do-wrapper .standard-section {
    padding: 5rem 1.25rem !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #what-we-do-wrapper .what-we-do-layout {
    flex-direction: column !important;
    gap: 2.5rem !important;
  }

  #what-we-do-wrapper h2 {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }

  /* Horizontal mask: remove masking on mobile */
  .horizontal-track-mask {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overflow: visible !important;
    flex-grow: 1 !important;
    width: 100% !important;
  }

  /* Horizontal track: switch to vertical column */
  .what-we-do-horizontal-track {
    flex-direction: column !important;
    padding-right: 0 !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  /* Individual what-we-do cards */
  .what-we-do-card {
    width: 100% !important;
    padding: 2.5rem 1.75rem !important;
    border-radius: 24px !important;
  }

  .what-we-do-card .card-num {
    font-size: 8rem !important;
  }

  .what-we-do-card .card-title {
    font-size: 1.6rem !important;
  }

  .what-we-do-card .card-desc {
    font-size: 1rem !important;
  }

  .what-we-do-card .card-icon-box {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    margin-bottom: 2rem !important;
  }

  /* Founders Grid — single column */
  #founders-wrapper {
    padding: 5rem 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  .founders-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1.25rem !important;
  }

  .founder-card {
    padding: 2rem 1.5rem !important;
    border-radius: 20px !important;
  }

  .founder-card h3 {
    font-size: 1.4rem !important;
  }

  /* About page contact CTA */
  #contact-cta-wrapper {
    min-height: auto !important;
  }

  #contact-cta-wrapper .standard-section {
    padding: 4rem 1.25rem 5rem !important;
    border-radius: 28px 28px 0 0 !important;
  }

  #contact-cta-wrapper h2 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }

  /* ─────────────────────────────────────────────
     COURSES PAGE
  ───────────────────────────────────────────── */

  /* Courses hero: remove sticky position-lock */
  #courses-hero-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #courses-hero-wrapper .hero-title,
  #courses-hero-content h1 {
    font-size: clamp(2.8rem, 9vw, 4.5rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1.25rem !important;
  }

  #courses-hero-content {
    padding: 6rem 1.25rem 3rem !important;
  }

  #courses-hero-content .badge {
    margin-bottom: 1.5rem !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 1.25rem !important;
  }

  #courses-hero-content .hero-desc {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* 3D grid floor: hide on mobile — prevents overflow */
  #courses-hero-wrapper > div[style*="rotateX"] {
    display: none !important;
  }

  /* How We Teach section */
  #courses-hero-wrapper + .section-overlap {
    padding: 4rem 0 !important;
    border-radius: 28px 28px 0 0 !important;
  }

  /* The flex wrap inside How We Teach */
  .section-overlap[style*="border-radius: 40px"] > div > div[style*="flex-wrap"] {
    flex-direction: column !important;
    gap: 2.5rem !important;
  }

  /* Courses grid wrapper padding */
  #premium-courses-wrapper {
    padding: 4rem 0 6rem !important;
  }

  .courses-container {
    padding: 0 1.25rem !important;
  }

  .section-header {
    margin-bottom: 3rem !important;
  }

  .section-header .section-title {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
  }

  /* Courses grid: override inline style, force 1 column */
  .premium-courses-grid[style],
  #courses-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
  }

  /* Course modal */
  .premium-dark-modal {
    padding: 3rem 1.5rem !important;
    border-radius: 24px !important;
    max-height: 92svh !important;
  }

  .modal-header h2 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
  }

  .modal-close {
    top: 1.25rem !important;
    right: 1.25rem !important;
    width: 40px !important;
    height: 40px !important;
  }

  .premium-perks-list {
    grid-template-columns: 1fr !important;
  }

  .enroll-btn {
    padding: 1.1rem 2.5rem !important;
    font-size: 1rem !important;
  }

  /* ─────────────────────────────────────────────
     CONTACT PAGE
  ───────────────────────────────────────────── */

  /* Contact hero: remove sticky position-lock */
  #contact-hero-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #contact-hero-content {
    padding: 6rem 1.25rem 3rem !important;
  }

  #contact-hero-content h1,
  .contact-hero-content .hero-title {
    font-size: clamp(2.8rem, 9vw, 4.5rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
  }

  #contact-hero-content .badge {
    font-size: 0.8rem !important;
    padding: 0.5rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Orbs — scale down to prevent overflow */
  #contact-hero-wrapper .contact-orb:first-of-type {
    width: 250px !important;
    height: 250px !important;
    top: -5% !important;
    right: -5% !important;
    filter: blur(60px) !important;
  }

  #contact-hero-wrapper .contact-orb:last-of-type {
    width: 200px !important;
    height: 200px !important;
    bottom: -5% !important;
    left: -5% !important;
    filter: blur(50px) !important;
  }

  /* Contact form wrapper */
  #contact-form-wrapper {
    padding: 3rem 0 5rem !important;
    border-radius: 28px 28px 0 0 !important;
  }

  .contact-container[style] {
    padding: 0 1rem !important;
  }

  /* Contact split card */
  .contact-split {
    flex-direction: column !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .contact-sidebar {
    max-width: 100% !important;
    padding: 2rem 1.25rem !important;
    border-bottom: 1px solid #e2e8f0;
  }

  .contact-sidebar > div > div[style*="margin-bottom: 4rem"] {
    margin-bottom: 2rem !important;
  }

  /* Reduce gap between contact info items */
  .contact-sidebar div[style*="gap: 3rem"] {
    gap: 1.75rem !important;
  }

  .contact-form-outer {
    padding: 0 !important;
  }

  #form-content-area,
  .contact-form-inner {
    padding: 2rem 1.25rem !important;
    border-radius: 0 !important;
  }

  .contact-success-state {
    padding: 2.5rem 1.25rem !important;
    border-radius: 0 !important;
  }

  /* Checkbox grid — single column on mobile */
  .checkbox-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Social icons row */
  .contact-sidebar div[style*="margin-top: 4rem"] {
    margin-top: 2rem !important;
  }

  /* ─────────────────────────────────────────────
     FOOTER
  ───────────────────────────────────────────── */
  .site-footer {
    padding: 4rem 1.25rem 2rem !important;
  }

  /* Top grid: single column */
  .site-footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    margin-bottom: 3rem !important;
  }

  /* Links sub-grid: keep 2 cols but tighter */
  .site-footer > div > div:first-child > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }

  .site-footer h3 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    margin-bottom: 1.25rem !important;
  }

  /* Bottom bar: stack */
  .site-footer > div > div[style*="border-top"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  .site-footer > div > div[style*="border-top"] > div {
    gap: 1.25rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* ─────────────────────────────────────────────
     GLOBAL TYPOGRAPHY SCALE-DOWN
  ───────────────────────────────────────────── */
  .section-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  /* Force all GSAP-hidden elements visible after mobile JS runs */
  /* (GSAP sets opacity:0 initially — we must force them visible
     in case ScrollTrigger doesn't fire on mobile) */
  @supports not (overflow: clip) {
    /* Fallback for very old mobile browsers */
    .fade-up, .reveal-text, .fade-text {
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   PHONE-SPECIFIC OVERRIDES  ≤ 480px
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Hero: tighter phone layout */
  .hero-content-wrapper {
    padding: 6rem 1rem 2rem !important;
  }

  .hero-ai {
    font-size: clamp(2.5rem, 11vw, 3.5rem) !important;
  }

  .hero-solutions {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  }

  .hero-future {
    font-size: clamp(1.8rem, 8.5vw, 2.8rem) !important;
  }

  .hero-video-col {
    height: 33svh !important;
  }

  /* About section: tighter */
  #about-card-layer,
  .white-card-layer {
    width: 95% !important;
    padding: 2rem 1rem !important;
  }

  #portfolio-card-layer {
    width: 95% !important;
    padding: 2rem 1rem !important;
  }

  /* Services capsules: single column on small phones */
  .capsules-wrapper {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
    padding: 0.75rem 1rem !important;
  }

  .floating-capsule {
    padding: 0.75rem 0.5rem !important;
    border-radius: 50px !important;
  }

  .cap-text {
    font-size: 0.68rem !important;
  }

  /* Testimonial cards */
  .testimonial-card {
    flex: 0 0 92vw !important;
    padding: 1.5rem 1rem !important;
  }

  /* Courses card */
  .premium-card {
    padding: 1.75rem 1.25rem !important;
  }

  /* Footer links sub-grid: single column on very small phones */
  .site-footer > div > div:first-child > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Course modal */
  .premium-dark-modal {
    padding: 2.5rem 1.25rem !important;
    border-radius: 20px !important;
  }

  /* Contact sidebar info gaps */
  .contact-sidebar div[style*="gap: 3rem"] {
    gap: 1.5rem !important;
  }

  #contact-form-wrapper .contact-container {
    padding: 0 0.75rem !important;
  }
}