/* ═══════════════════════════════════════════════════════════
   RESPONSIVE FIXES FOR MORE VISION WEBSITE
   Add this file AFTER style.css in your HTML
═══════════════════════════════════════════════════════════ */

/* ─── TABLET (1024px and below) ─── */
@media (max-width: 1024px) {
  /* Hero section - show image slider on tablet */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  
  .hero-grid > div:last-child {
    order: -1; /* Move image to top */
  }
  
  .hero-visual-slider {
    height: 380px;
  }
  
  /* Hide bottom-right float badges on tablet */
  .float-badge:nth-child(3),
  .float-badge:nth-child(4) {
    display: none;
  }
  
  /* Adjust remaining badges */
  .float-badge {
    padding: 0.7rem 1rem;
  }
  
  .float-badge__val {
    font-size: 1.6rem;
  }
  
  /* Center hero content */
  .hero-grid > div:first-child {
    text-align: center;
  }
  
  .hero-grid > div:first-child > div[style*="inline-flex"] {
    justify-content: center;
  }
  
  .hero-grid > div:first-child > div[style*="flex"] {
    justify-content: center;
  }
  
  /* Why Us section */
  .why-us-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  
  .why-us-grid > div:first-child {
    order: 1; /* Keep image on top */
  }
  
  /* Event cards */
  .event-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .event-card {
    grid-column: span 1 !important;
    height: 280px !important;
  }
  
  /* Enquiry form */
  .enquiry-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  
  /* Stats grid - 3 columns on tablet */
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Services - 2 columns */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Footer - 2 columns */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── MOBILE (900px and below) ─── */
@media (max-width: 900px) {
  /* Hide desktop nav, show mobile toggle */
  .navbar__links,
  .navbar__cta {
    display: none !important;
  }
  
  /* Force navbar to always be visible with background */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 9999 !important;
    background: rgba(4, 5, 8, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--c-border) !important;
    overflow: visible !important;
  }
  
  /* Navbar inner */
  .navbar__inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Make sure hamburger is always visible */
  .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10000 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 0 !important;
  }
  
  .nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: var(--c-text) !important;
    border-radius: 2px !important;
    transition: all 0.25s ease !important;
  }
  
  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  
  .nav-toggle.open span:nth-child(2) {
    opacity: 0 !important;
  }
  
  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
  
  /* Mobile menu - hide by default */
  #navMobile,
  .nav-mobile {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Mobile menu - show when open */
  #navMobile.open,
  .nav-mobile.open {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(4, 5, 8, 0.99) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--c-border) !important;
    z-index: 10001 !important;
    padding: 1.5rem !important;
    gap: 1rem !important;
  }
  
  /* Make links more tappable */
  #navMobile a,
  .nav-mobile a {
    display: block !important;
    padding: 0.8rem 0 !important;
    font-size: 1.1rem !important;
    color: var(--c-text) !important;
  }
  
  /* Content offset for fixed navbar */
  main {
    padding-top: var(--nav-h) !important;
  }
  
  /* Hero adjustments */
  .hero {
    padding-top: calc(var(--nav-h) + 2rem) !important;
    min-height: auto !important;
  }
  
  .hero-visual-slider {
    height: 320px;
  }
  
  /* Hide all float badges on mobile */
  .float-badge {
    display: none !important;
  }
  
  /* Testimonials - 2 columns */
  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Clients - 3 columns */
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Gallery - 2 columns */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Service detail pages */
  .service-detail {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 0;
  }
  
  .service-detail__visual {
    height: 280px;
  }
  
  .service-detail--reverse .service-detail__visual {
    order: 0;
  }
  
  /* Contact info */
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
  
  /* Stats - 2 columns on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── SMALL MOBILE (640px and below) ─── */
@media (max-width: 640px) {
  /* Root variables */
  :root {
    --nav-h: 64px;
  }
  
  /* Global overflow fix */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Container adjustments */
  .container {
    padding: 0 1rem !important;
    max-width: 100% !important;
  }
  
  /* Section padding */
  .section {
    padding: 3.5rem 0;
  }
  
  .section--tight {
    padding: 2.5rem 0;
  }
  
  /* Hero section */
  .hero {
    padding: 90px 0 2.5rem !important;
  }
  
  .hero-grid {
    gap: 2rem !important;
  }
  
  .hero-visual-slider {
    height: 260px !important;
  }
  
  /* Hero typography */
  .hero h1 {
    font-size: clamp(2.5rem, 10vw, 4rem) !important;
  }
  
  .hero p {
    font-size: 0.95rem;
  }
  
  /* Hero stats */
  .hero-grid > div:first-child > div[style*="gap:2.5rem"] {
    gap: 1.5rem !important;
    flex-wrap: wrap;
  }
  
  .hero-grid > div:first-child > div[style*="gap:2.5rem"] > div {
    flex: 1 1 45%;
    min-width: 120px;
  }
  
  /* Services - 1 column */
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  /* Stats - 2 columns, smaller */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  
  .stat-card {
    padding: 1.3rem 1rem;
  }
  
  .stat-num {
    font-size: 2.8rem;
  }
  
  .stat-suffix {
    font-size: 1.8rem;
  }
  
  /* Testimonials - 1 column */
  .testi-grid {
    grid-template-columns: 1fr;
  }
  
  /* Clients - 2 columns */
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
  
  .client-card {
    height: 70px;
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  
  /* Gallery - 2 columns */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }
  
  /* Form */
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-field--full {
    grid-column: span 1;
  }
  
  .form-wrap {
    padding: 1.5rem;
  }
  
  /* Footer - 1 column */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Event cards */
  .event-card {
    height: 220px !important;
  }
  
  .event-card__title {
    font-size: 1.15rem;
  }
  
  /* Page hero */
  .page-hero {
    padding: calc(var(--nav-h) + 2.5rem) 0 2.5rem;
  }
  
  .page-hero h1 {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }
  
  .page-hero__sub {
    font-size: 0.9rem;
  }
  
  /* Service detail */
  .service-detail {
    padding: 2.5rem 0;
  }
  
  .service-detail__visual {
    height: 220px;
  }
  
  /* CTA section */
  .cta-section {
    padding: 3.5rem 0;
  }
  
  .cta-headline {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
  }
  
  .cta-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Buttons full width on mobile */
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .section-header .btn {
    width: auto;
  }
  
  /* Navbar mobile */
  .navbar__brand {
    flex-shrink: 1;
    min-width: 0;
  }
  
  .navbar__logo {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  
  .navbar__name {
    font-size: 0.75rem;
  }
  
  .navbar__tagline {
    font-size: 0.58rem;
  }
  
  /* Timeline */
  .timeline {
    padding-left: 1.5rem;
  }
  
  /* Why items */
  .why-item {
    gap: 0.8rem;
  }
  
  /* Contact info */
  .contact-info-card {
    padding: 1.3rem;
  }
  
  /* Gallery filters - horizontal scroll */
  .gallery-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  
  .gallery-filters::-webkit-scrollbar {
    display: none;
  }
  
  .filter-btn {
    flex-shrink: 0;
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
  }
  
  /* Footer bottom */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

/* ─── EXTRA SMALL MOBILE (480px and below) ─── */
@media (max-width: 480px) {
  /* Hero */
  .hero-visual-slider {
    height: 220px !important;
  }
  
  .hero h1 {
    font-size: clamp(2rem, 12vw, 3rem) !important;
  }
  
  /* Stats - adjust for very small screens */
  .stat-num {
    font-size: 2.2rem;
  }
  
  .stat-suffix {
    font-size: 1.5rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }
  
  /* Clients - maintain 2 columns but smaller */
  .client-card {
    height: 65px;
    font-size: 0.65rem;
    padding: 0.4rem;
  }
  
  /* Gallery - single column on very small screens */
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  /* Event cards */
  .event-card {
    height: 200px !important;
  }
  
  /* Service detail */
  .service-detail__visual {
    height: 200px;
  }
  
  /* Navbar - further compress */
  .navbar__logo {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .navbar__name {
    font-size: 0.7rem;
  }
  
  .navbar__tagline {
    display: none;
  }
  
  .navbar__title-wrap {
    max-width: 100px;
  }
}

/* ─── FIX HERO SLIDER WRAPPER ─── */
@media (max-width: 1024px) {
  /* Ensure hero visual container shows on tablet/mobile */
  .hero-grid > div:last-child {
    display: block !important;
    position: relative;
  }
  
  .hero-grid > div:last-child > div:first-child {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 80px rgba(0,0,0,.7);
    border: 1px solid rgba(255,92,0,.2);
  }
}

/* ─── PREVENT HORIZONTAL SCROLL (MOBILE ONLY) ─── */
@media (max-width: 640px) {
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Fix marquee */
  .marquee-strip {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  
  .marquee-track {
    max-width: none;
  }
  
  /* Fix any overflow from grids */
  .services-grid,
  .stats-grid,
  .testi-grid,
  .clients-grid,
  .gallery-grid,
  .event-cards-grid {
    overflow: hidden;
  }
  
  /* Ensure all sections don't overflow */
  .section,
  .section--tight,
  .section--surface,
  .section--surface2 {
    overflow: hidden !important;
  }
  
  /* Fix navbar */
  .navbar {
    max-width: 100vw;
  }
  
  .navbar__inner {
    max-width: 100%;
  }
}

/* ─── HERO BUTTONS FIX ─── */
@media (max-width: 640px) {
  .hero-grid > div:first-child > div[style*="gap:.9rem"] {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-grid > div:first-child > div[style*="gap:.9rem"] > a {
    width: 100%;
    justify-content: center;
  }
}

/* ─── TEXT WRAPPING ─── */
@media (max-width: 640px) {
  h1, h2, h3, h4, h5, h6, p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ─── ENSURE SECTION HEADER RESPONSIVENESS ─── */
@media (max-width: 640px) {
  .section-header--split {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
}

/* ─── HIDE FLOAT BADGES ON MOBILE SLIDER ─── */
@media (max-width: 900px) {
  .float-badge {
    display: none !important;
  }
  
  .hero .float-badge {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .float-badge {
    display: none !important;
  }
  
  .hero .float-badge {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .contact-form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 3rem !important;
  }
  
  .contact-why {
    order: -1 !important;
  }
  
  .contact-form {
    order: 1 !important;
  }
  
  .faq-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 640px) {
  .contact-form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .contact-why {
    order: -1 !important;
  }
  
  .contact-form {
    order: 1 !important;
  }
  
  .faq-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .contact-info-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .contact-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .contact-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .contact-info-card {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .contact-business-details {
    display: none !important;
  }
}

/* ─── FORCE NO HORIZONTAL SCROLL ON ALL PAGES ─── */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }
  
  main, header, footer, section {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .container {
    overflow-x: hidden !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* All grids should not cause overflow */
  .service-detail,
  .why-us-grid,
  .about-intro-grid,
  .about-timeline-grid,
  .event-cards-grid,
  .enquiry-grid,
  .contact-form-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure form elements don't overflow */
  .form-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
  
  .form-field {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .form-field--full {
    grid-column: span 1 !important;
  }
  
  /* Footer grid stack */
  .footer__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* FAQ cards */
  .faq-grid > .card {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Business details card */
  .business-details-card {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Why items grid */
  .why-us-grid > div:last-child > div[style*="display:grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* ─── ENSURE INDEX.HTML SPECIFIC FIXES ─── */
@media (max-width: 640px) {
  /* Hero section */
  .hero {
    padding: calc(var(--nav-h) + 1rem) 0 2rem !important;
    min-height: auto !important;
    overflow-x: hidden !important;
  }
  
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    overflow-x: hidden !important;
  }
  
  .hero-grid > div:last-child {
    display: block !important;
    order: -1 !important;
  }
  
  .hero-visual-slider {
    height: 240px !important;
  }
  
  /* Why us section */
  .why-us-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  /* Event cards */
  .event-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .event-card {
    width: 100% !important;
    height: 220px !important;
  }
  
  /* Enquiry section */
  .enquiry-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
}

/* ─── ABOUT PAGE FIXES ─── */
@media (max-width: 1024px) {
  .about-intro-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .about-intro-image {
    order: -1 !important;
  }
  
  .about-intro-image-wrapper {
    height: 350px !important;
  }
  
  .about-timeline-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .about-timeline-grid > div:last-child {
    order: -1 !important;
  }
  
  .about-timeline-images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .about-timeline-images > div {
    height: 200px !important;
  }
  
  .values-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 640px) {
  .about-intro-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  .about-intro-image {
    order: -1 !important;
  }
  
  .about-intro-image-wrapper {
    height: 220px !important;
  }
  
  .about-timeline-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  .about-timeline-grid > div:last-child {
    order: -1 !important;
  }
  
  .about-timeline-images {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  
  .about-timeline-images > div {
    height: 120px !important;
  }
  
  .about-timeline-images > div:first-child {
    height: 160px !important;
  }
  
  .values-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .values-grid .card {
    padding: 1.2rem !important;
  }
  
  .about-intro-text {
    padding: 1.2rem !important;
  }
  
  .about-stats {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  
  .about-stats > div {
    flex: 1 1 30% !important;
    min-width: 90px !important;
  }
  
  .about-stats > div > span:first-child {
    font-size: 1.8rem !important;
  }
}

/* ─── SERVICES PAGE FIXES ─── */
@media (max-width: 640px) {
  .service-detail {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 2rem 0 !important;
  }
  
  .service-detail__visual {
    height: 200px !important;
    width: 100% !important;
  }
  
  .service-detail__content {
    width: 100% !important;
  }
}

/* ─── GALLERY PAGE FIXES ─── */
@media (max-width: 640px) {
  .gallery-filters {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
  }
  
  .gallery-filters::-webkit-scrollbar {
    display: none;
  }
  
  .filter-btn {
    flex-shrink: 0 !important;
  }
  
  .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
    overflow-x: hidden !important;
  }
}

/* ─── CLIENTS PAGE FIXES ─── */
@media (max-width: 640px) {
  .clients-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
    overflow-x: hidden !important;
  }
  
  .client-card {
    height: 70px !important;
    font-size: 0.65rem !important;
    padding: 0.4rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ─── EVENTS PAGE FIXES ─── */
@media (max-width: 640px) {
  .service-detail {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 2rem 0 !important;
  }
  
  .service-detail__visual {
    height: 200px !important;
    width: 100% !important;
  }
}

/* ─── MARQUEE FIX ─── */
@media (max-width: 640px) {
  .marquee-strip {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  
  .marquee-track {
    animation-duration: 15s !important;
  }
}

/* ─── HERO VISUAL WRAPPER FIX ─── */
@media (max-width: 1024px) {
  .hero-visual-wrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .hero-visual-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .hero-visual-slider {
    height: 350px !important;
    width: 100% !important;
  }
  
  .hero-float-badge {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .hero-visual-wrapper {
    display: block !important;
    width: 100% !important;
  }
  
  .hero-visual-slider {
    height: 300px !important;
    width: 100% !important;
  }
  
  .hero-float-badge {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .hero-visual-wrapper {
    display: block !important;
    width: 100% !important;
    order: -1 !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-visual-container {
    width: 100% !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
  }
  
  .hero-visual-slider {
    height: 240px !important;
    width: 100% !important;
  }
  
  .hero-float-badge {
    display: none !important;
  }
  
  /* Move hero visual above text on mobile */
  .hero-grid {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  
  .hero-grid > div:first-child {
    order: 1 !important;
  }
  
  .hero-grid > div:last-child {
    order: 0 !important;
  }
}

@media (max-width: 480px) {
  .hero-visual-slider {
    height: 200px !important;
  }
}

/* ─── BODY NAV OPEN STATE ─── */
body.nav-open {
  overflow: hidden !important;
}

body.nav-open #navMobile.open,
body.nav-open .nav-mobile.open {
  display: flex !important;
  visibility: visible !important;
}

/* ─── HIDE SCROLLBAR ON DESKTOP (show on mobile) ─── */
@media (min-width: 901px) {
  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: transparent;
  }
  
  html {
    scrollbar-gutter: stable;
  }
}