/* ===== VITALITY — RESPONSIVE STYLES =====
 * Tablet (1024px), Mobile (768px), Small Mobile (480px)
 */

/* ===== RESPONSIVE ===== */
/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 1024px) {
  .service-grid { grid-template-columns: 1fr 1fr; }
  .tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-block { grid-template-columns: 1fr; }
  .feature-block.reversed { direction: ltr; }
  .feature-content { padding: 60px 40px; }
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .why-card { flex: 0 0 calc(33.33% - 12px); min-width: 260px; }

  /* Contact row — 2x2 grid on tablet */
  .contact-row-columns {
    grid-template-columns: 1fr 1fr;
    border-left: none;
    gap: 28px 0;
  }
  .contact-col {
    border-right: none;
    border-bottom: 1px solid #dce4ea;
    padding: 0 20px 20px;
  }
  .contact-col:nth-child(odd) { border-right: 1px solid #dce4ea; }
  .contact-col:nth-last-child(-n+2) { border-bottom: none; }
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 768px) {
  /* Nav — hide desktop links, show hamburger */
  .nav-links { display: none !important; }
  .mobile-menu { display: block; }

  /* Contact form — stack sidebar + form */
  .contact-form-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .contact-form-card { padding: 28px 24px; }
  .contact-form { grid-template-columns: 1fr; }

  /* Contact map shorter on mobile */
  .contact-map-embed { height: 300px; }

  /* Mega menu - hide on mobile */
  .mega-menu { display: none !important; }
  .mega-overlay { display: none !important; }

  /* Hero */
  .hero { min-height: 400px; background-position: center; }
  .hero-gradient {
    background: linear-gradient(to bottom,
      var(--gradient-start) 0%,
      rgba(237, 242, 248, 0.9) 40%,
      rgba(237, 242, 248, 0.7) 70%,
      transparent 100%
    );
  }
  .hero-text { width: 100%; padding: 60px 20px 40px; max-width: none; }
  .hero h1 { font-size: 2.2rem; }
  .hero-sub { font-size: 1rem; }
  .hero-buttons { flex-direction: column; align-items: flex-start; }
  .hero-visual { height: 280px; border-radius: 16px; }
  .floating-badge { display: none; }

  /* Product family nav */
  .product-family { padding: 40px 0 24px; overflow: visible; }
  .product-family-inner { padding: 0; max-width: none; }
  .product-family h1 { font-size: 2rem; margin-bottom: 16px; padding: 0 16px; }
  .family-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 16px 8px;
  }
  .family-nav::-webkit-scrollbar { display: none; }
  .family-nav-item {
    min-width: 82px;
    padding: 8px 10px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .family-nav-icon { width: 44px; height: 44px; }
  .family-nav-icon .icon-lg svg { width: 32px; height: 32px; }
  .family-nav-label { font-size: 0.65rem; }

  /* Closer look carousel — stack image on top, text below (mobile) */
  .closer-look { padding: 60px 0 60px; }
  .closer-look-header { padding: 0 16px; margin-bottom: 24px; }
  .closer-look-header h2 { font-size: 2rem; }
  .carousel-wrapper { padding: 0 16px; }
  .carousel-slide { flex: 0 0 calc(90vw - 32px) !important; min-height: auto !important; }

  /* Flip bg split from side-by-side to top/bottom */
  .carousel-slide .slide-bg { flex-direction: column !important; }
  .carousel-slide .slide-bg-left { flex: 1 !important; order: 2 !important; }
  .carousel-slide .slide-bg-right { flex: 0 0 200px !important; order: 1 !important; }

  /* Image sits as a banner at the top */
  .slide-visual {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 200px !important;
    font-size: 0;
  }
  .slide-visual .icon-hero svg { width: 64px; height: 64px; }

  /* Text content stacks below image — full width, pushed below image */
  .slide-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 220px 24px 28px !important;
  }
  .slide-content h3 { font-size: 1.25rem !important; margin-bottom: 12px !important; }
  .slide-subtitle { margin-top: -8px !important; margin-bottom: 14px !important; }
  .slide-content .slide-btn { padding: 10px 20px; font-size: 0.8rem; align-self: flex-start; }

  /* Why choose carousel */
  .why-section { padding: 60px 0 40px; }
  .why-header { padding: 0 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .why-header h2 { font-size: 1.8rem; }
  .why-carousel-wrapper { padding: 0 16px; }
  .why-card { flex: 0 0 calc(80vw - 32px); min-width: 240px; min-height: 340px; padding: 28px 24px 24px; }
  .why-card-title { font-size: 1.3rem; }
  .why-nav { padding: 0 16px; }

  /* Marquee */
  .marquee-bar { padding: 10px 0; }
  .marquee-content span { font-size: 0.75rem; }

  /* Service grid */
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 320px; padding: 36px 28px; }
  .service-card.featured { min-height: 360px; }
  .card-title { font-size: 1.6rem; }

  /* Feature explorer */
  .feature-explorer { padding: 60px 16px 60px; }
  .fe-headline { font-size: 2rem; }
  .fe-showcase {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .fe-pills-col { padding: 24px 20px; }
  .fe-pill { font-size: 0.85rem; padding: 10px 14px; }
  .fe-pill-detail.open { padding: 4px 14px 14px 44px; }
  .fe-visual-col { min-height: 260px; }
  .fe-visual-item .icon-hero svg { width: 72px; height: 72px; }

  /* Tabbed showcase */
  .tab-showcase { padding: 60px 16px; }
  .ts-headline { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .ts-intro { font-size: 1rem; }
  .ts-image-area { aspect-ratio: 16 / 10; }
  .ts-pills { gap: 2px; padding: 16px 16px 0; }
  .ts-pill { padding: 8px 16px; font-size: 0.78rem; }
  .ts-content-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 24px 32px;
  }
  .ts-content-aside {
    border-left: none;
    padding-left: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  /* Hero banner */
  .hero-banner { padding: 60px 16px 60px; }
  .hb-headline { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 32px; }
  .hb-image { margin-bottom: 48px; border-radius: 16px; }
  .hb-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-banner.single-col .hb-columns {
    gap: 0;
  }

  /* Card grid */
  .card-grid-section { padding: 60px 16px; }
  .cg-title { font-size: clamp(1.8rem, 5vw, 2.4rem); }
  .cg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cg-filters { gap: 6px; }
  .cg-filter { padding: 7px 14px; font-size: 0.75rem; }
  .cg-search-wrap { max-width: 100%; }
  .cg-card-body { padding: 16px 16px 20px; }
  .cg-card-title { font-size: 0.95rem; }
  .cg-card-desc { font-size: 0.8rem; }

  /* Cinematic section */
  .cinematic-section { padding: 0 0 60px; }
  .cinematic-hero-img { aspect-ratio: 4/3; }
  .cinematic-hero-bg .ch-emoji .icon svg { width: 80px !important; height: 80px !important; }
  .cinematic-content { padding: 0 16px; }
  .cinematic-block {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
  .cinematic-block:first-child { margin-top: 40px; }
  .cinematic-block h3 { font-size: 1.25rem; }
  .cinematic-block p { font-size: 0.88rem; }
  .cinematic-hero-overlay { padding: 20px 24px; }
  .cinematic-hero-overlay span { font-size: 0.75rem; }

  /* Feature blocks */
  .feature-block { grid-template-columns: 1fr; min-height: auto; }
  .feature-block.reversed { direction: ltr; }
  .feature-content { padding: 40px 24px; }
  .feature-content .section-title { font-size: 1.8rem; }
  .feature-visual { min-height: 280px; }
  .feature-img-placeholder .icon-hero svg { width: 72px; height: 72px; }

  /* Stats */
  .stat-strip { padding: 60px 16px; }
  .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat-number { font-size: 2.2rem; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-card { aspect-ratio: 1/1; }

  /* Dark showcase */
  .dark-showcase { padding: 60px 0; }
  .dark-showcase-title { font-size: 2rem; }
  .dark-showcase-header { margin-bottom: 32px; }
  .dark-showcase-wrapper { padding: 0 16px; }
  .dark-showcase-card { flex: 0 0 calc(85vw - 32px); min-width: 260px; }
  .dark-showcase-visual { aspect-ratio: 4/3; }
  .dark-showcase-visual .icon-hero svg { width: 64px; height: 64px; }
  .dark-showcase-caption { padding: 18px 20px 22px; }
  .dark-showcase-caption p { font-size: 0.82rem; }

  /* Testimonials */
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card { padding: 28px; }

  /* Google rating bar — stack badge on top, "View more reviews" link below */
  .testimonials-google-bar {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
  }
  .google-rating-badge {
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 22px;
    font-size: 0.92rem;
    max-width: 100%;
  }
  .google-rating-badge .g-stars { font-size: 1.05rem; }
  .google-rating-badge .g-score { font-size: 1rem; }
  .testimonials-view-more { font-size: 0.92rem; }

  /* Tiles */
  .tiles-grid { grid-template-columns: 1fr 1fr; }
  .tile { padding: 28px 20px; min-height: auto; }
  .tile-title { font-size: 1rem; }

  /* Accordion */
  .accordion-section { padding: 60px 16px 60px; }
  .accordion-section-header h2 { font-size: 2rem; }
  .accordion-showcase {
    grid-template-columns: 1fr;
  }
  .accordion-items { padding: 28px 20px; }
  .accordion-trigger { font-size: 1rem; padding: 16px 0; }
  .accordion-body p { font-size: 0.82rem; }
  .accordion-visual { min-height: 280px; }
  .accordion-visual-item { inset: 20px; }
  .accordion-visual-item .icon svg { width: 100px !important; height: 100px !important; }

  /* Info cards */
  .info-strip { padding: 60px 16px; }
  .info-cards { grid-template-columns: 1fr; }
  .info-card { min-height: auto; padding: 28px 24px 60px; }
  .info-strip-header h2 { font-size: 1.5rem; }

  /* Comparison table */
  .compare-section { padding: 60px 16px; }
  .compare-table thead th { padding: 0 8px 20px; }
  .compare-col-icon { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 12px; }
  .compare-col-name { font-size: 0.72rem; }
  .compare-table tbody td { padding: 14px 8px; font-size: 0.8rem; }
  .cmp-check { width: 24px; height: 24px; font-size: 0.7rem; }
  .cmp-value { font-size: 0.78rem; }
  .cmp-cta { font-size: 0.8rem; padding: 8px 18px; }

  /* Comparison table - horizontal scroll on small screens */
  .compare-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 480px; }

  /* CTA banner */
  .cta-banner { padding: 60px 20px; }
  .cta-banner h2 { font-size: 2rem; }
  .cta-banner p { font-size: 1rem; }
  .cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .btn-white { padding: 14px 28px; font-size: 0.9rem; }
  .btn-outline-white { padding: 14px 28px; font-size: 0.9rem; margin-left: 0; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

  /* Phone bar — hide only the intro text on mobile, keep "|" divider between Call + Book */
  .phone-bar { font-size: 0.85rem; gap: 14px; padding: 12px 14px; flex-wrap: nowrap; }
  .phone-bar > span:first-child { display: none; }
  .phone-bar a { white-space: nowrap; }

  /* Modal */
  .modal-box { padding: 32px 24px; }
  .modal-box h3 { font-size: 1.5rem; }

  /* Section titles */
  .section-title { font-size: 2rem; }
  .section-subtitle { font-size: 1rem; }
  section { padding: 60px 16px; }
}

/* ===== RESPONSIVE: SMALL MOBILE ===== */
@media (max-width: 480px) {
  /* Grids to single column */
  .tiles-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
  .cg-grid { grid-template-columns: 1fr; }

  /* Typography */
  .hero h1 { font-size: 1.8rem; }
  .hero-sub { font-size: 0.9rem; }
  .product-family h1 { font-size: 1.6rem; }
  .closer-look-header h2 { font-size: 1.6rem; }
  .why-header h2 { font-size: 1.5rem; }
  .section-title { font-size: 1.6rem; }
  .fe-headline { font-size: 1.6rem; }
  .accordion-section-header h2 { font-size: 1.6rem; }
  .cta-banner h2 { font-size: 1.6rem; }
  .cinematic-block h3 { font-size: 1.1rem; }

  /* Carousel slides - wider on tiny screens */
  .carousel-slide { flex: 0 0 calc(95vw - 32px); min-height: 280px; }
  .slide-content { min-height: 280px; padding: 24px 20px; max-width: 65%; }
  .slide-content h3 { font-size: 1.05rem; }

  /* Why cards wider */
  .why-card { flex: 0 0 calc(85vw - 32px); }

  /* Dark showcase wider */
  .dark-showcase-card { flex: 0 0 calc(90vw - 32px); }

  /* Carousel arrows smaller */
  .carousel-nav button, .why-nav button, .dark-showcase-nav button {
    width: 36px; height: 36px; font-size: 1rem;
  }

  /* Buttons */
  .btn-primary { padding: 12px 24px; font-size: 0.9rem; }
  .btn-secondary { font-size: 0.9rem; }

  /* Accordion visual smaller */
  .accordion-visual { min-height: 220px; }

  /* Feature content tighter */
  .feature-content { padding: 32px 16px; }
  .feature-content .section-title { font-size: 1.5rem; }

  /* Info cards tighter */
  .info-card { padding: 24px 20px 50px; }

  /* Contact row — single column on mobile */
  .contact-row-header { flex-direction: column; gap: 8px; }
  .contact-row-columns {
    grid-template-columns: 1fr;
    border-left: none;
    gap: 24px;
  }
  .contact-col {
    border-right: none;
    border-bottom: 1px solid #dce4ea;
    padding: 0 0 20px;
  }
  .contact-col:last-child { border-bottom: none; }
}