/* ================================================================
   OVAL INFOTECH — Responsive v2.5 (PRODUCTION REWRITE)
   ─────────────────────────────────────────────────────
   Targets: Mobile (≤768px) · Tablet (769–1024px)
   Desktop (>1024px): COMPLETELY UNTOUCHED
   ─────────────────────────────────────────────────────
   FIX #1  Header↔Hero gap: 0
   FIX #2  Hero↔Marquee gap: 0
   FIX #3  Horizontal scroll: killed
   FIX #4  Vertical extra scroll: eliminated
   FIX #5  Overall mobile polish
   FIX #6  Multi-col → single-col
   FIX #7  Hero auto-height
   FIX #8  Images max-width:100%
   ================================================================ */


/* ═══════════════════════════════════════════════════════════════
   GLOBAL: ≤1024px — overflow kill, image safety
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  html,body                  { overflow-x:hidden!important; width:100%!important;
                               max-width:100vw; -webkit-text-size-adjust:100% }
  *,*::before,*::after       { box-sizing:border-box }
  .container                 { max-width:100%!important; overflow-x:hidden }
  img,video,iframe,svg,canvas{ max-width:100%; height:auto }

  /* Orbs = invisible overflow source */
  .hero-slide-bg             { overflow:hidden }
  .orb,.orb-1,.orb-2         { max-width:100vw }

  /* Marquee / logo tracks */
  .marquee-section           { overflow:hidden!important; max-width:100vw }
  .client-logos-track,
  .gc-logos-track,
  .gc-logos-inner             { max-width:none }
}


/* ═══════════════════════════════════════════════════════════════
   TABLET: 769px – 1024px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  :root { --section-pad:70px 0 }

  /* FIX #1: Header → Hero gap = 0 */
  .header                    { margin-bottom:0!important; padding-bottom:0; border-bottom:none }

  /* FIX #7: Hero auto-height */
  .hero                      { margin:0!important; padding:0!important }
  .hero-swiper               { height:auto!important; min-height:auto!important; border-radius:0!important }
  .hero-slide                { min-height:auto!important }
  .hero-slide-content        { grid-template-columns:1fr!important; text-align:center;
                               gap:32px; padding:36px 24px 24px!important }
  .hero p                    { margin-left:auto; margin-right:auto }
  .hero-buttons              { justify-content:center }
  .hero-float,
  .hero-float-1,
  .hero-float-2              { display:none!important }
  .hero-card                 { max-width:400px; margin:0 auto }

  /* FIX #2: Hero → Marquee gap = 0 */
  .marquee-section           { margin-top:0!important; margin-bottom:0 }

  /* Grids → 2 cols on tablet */
  .services-grid             { grid-template-columns:repeat(2,1fr) }
  .why-grid,.wyg-grid        { grid-template-columns:repeat(2,1fr) }
  .process-grid              { grid-template-columns:repeat(2,1fr) }
  .process-grid::before,
  .process-connector         { display:none }
  .process-grid-6            { grid-template-columns:repeat(2,1fr) }
  .pricing-grid              { grid-template-columns:repeat(2,1fr) }
  .footer-grid               { grid-template-columns:repeat(2,1fr) }
  .about-grid                { grid-template-columns:1fr; gap:32px }
  .contact-grid              { grid-template-columns:1fr }
  .feature-cards             { grid-template-columns:repeat(2,1fr) }
  .related-grid              { grid-template-columns:repeat(2,1fr) }
  .one-stop-grid             { grid-template-columns:1fr; gap:36px }
  .one-stop-features         { grid-template-columns:1fr 1fr }
  .one-stop-stats            { grid-template-columns:1fr 1fr }
  .imgbox-grid               { grid-template-columns:repeat(2,1fr) }
  .home-ba-grid              { grid-template-columns:1fr; gap:24px }
  .tab-inner                 { grid-template-columns:1fr; gap:28px; padding:32px 24px }
  .who-grid                  { grid-template-columns:repeat(2,1fr) }
  .testimonials-grid         { grid-template-columns:repeat(2,1fr) }
  .ft-excellence-grid        { grid-template-columns:1fr }
  .ft-steps-grid             { grid-template-columns:repeat(2,1fr) }
  .ft-stats-row              { grid-template-columns:repeat(3,1fr); gap:16px }
  .svc-features-grid         { grid-template-columns:repeat(2,1fr) }

  /* SPE/SP Heroes */
  .spe-hero-inner            { grid-template-columns:1fr; text-align:center; gap:32px; padding:80px 0 40px }
  .spe-hero-tagline          { margin-left:auto; margin-right:auto }
  .spe-hero-actions          { justify-content:center }
  .spe-hero-trust            { justify-content:center }
  .spe-hero-visual           { order:-1 }
  .spe-ba-card               { max-width:400px; margin:0 auto 24px }
  .sp-hero-split             { grid-template-columns:1fr; gap:28px }
  .sp-hero-ba                { max-width:520px; margin:0 auto }
  .sp-layout                 { grid-template-columns:1fr 260px; gap:28px }
  .service-layout            { grid-template-columns:240px 1fr; gap:24px }

  .imgbox-zz-row             { gap:28px }
  .zigzag-row                { gap:32px }
  .mega-dropdown             { min-width:580px; padding:18px }
  .mega-grid                 { grid-template-columns:repeat(2,1fr) }
  .sub-hero .container       { flex-direction:column; text-align:center }
  .sub-hero-text .section-tag{ justify-content:center }
  .sub-hero-cta              { justify-content:center }

  .gal-ba-grid-3             { grid-template-columns:repeat(2,1fr) }
  .gal-cat-ba-grid           { grid-template-columns:repeat(2,1fr) }
  .gal-cat-ba-grid-4         { grid-template-columns:repeat(2,1fr) }
  .gal-pano-grid-2x2         { grid-template-columns:repeat(2,1fr) }
  .gallery-grid              { grid-template-columns:repeat(2,1fr) }
  .home-ba-slider            { min-height:260px }
  .gc-metrics                { grid-template-columns:repeat(2,1fr) }

  /* Footer */
  .footer-contact-strip      { grid-template-columns:repeat(2,1fr); gap:12px }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE: ≤768px — full single-column conversion
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --section-pad:44px 0; --sidebar-w:100% }

  /* Base */
  html                       { font-size:15px }
  body                       { overflow-x:hidden!important }
  .container                 { padding:0 16px!important; max-width:100vw!important }
  .section                   { padding:44px 0 }
  .section-header            { margin-bottom:28px }
  .section-header h2         { font-size:1.4rem; line-height:1.3 }
  .section-header p          { font-size:.86rem; padding:0 }

  /* Top bar: hide */
  .top-bar                   { display:none!important }

  /* ═══ FIX #1: HEADER → HERO = ZERO GAP ═══ */
  .header                    { margin:0!important; padding:0!important; border-bottom:none!important;
                               box-shadow:0 1px 8px rgba(0,0,0,.06)!important }
  .header .container         { padding-top:8px!important; padding-bottom:8px!important }
  .logo                      { font-size:1.2rem }
  .logo-icon                 { width:34px; height:34px; font-size:.82rem }

  /* Mobile Nav */
  .nav-toggle                { display:flex }
  .nav-menu                  { position:fixed; top:0; right:-100%; width:85%; max-width:340px;
                               height:100vh; height:100dvh; background:var(--white);
                               flex-direction:column; padding:72px 24px 28px;
                               box-shadow:-10px 0 40px rgba(0,0,0,.15);
                               transition:right .4s cubic-bezier(.25,.8,.25,1);
                               align-items:flex-start; overflow-y:auto; z-index:999 }
  .nav-menu.active           { right:0 }
  .nav-menu > li             { width:100%; border-bottom:1px solid rgba(0,0,0,.04) }
  .nav-menu > li > a         { display:flex; justify-content:space-between; padding:13px 0; font-size:.9rem }
  .mega-dropdown,
  .gallery-dropdown,
  .nav-dropdown              { position:static!important; opacity:1!important; visibility:visible!important;
                               transform:none!important; box-shadow:none!important; border:none!important;
                               padding:0 0 8px 16px!important; display:none;
                               min-width:100%!important; max-height:none; overflow:visible }
  .dropdown.active .mega-dropdown,
  .dropdown.active .gallery-dropdown,
  .dropdown.active .nav-dropdown { display:block }
  .mega-grid                 { grid-template-columns:1fr!important; gap:6px }
  .mega-sub-list             { display:none }
  .mega-category-title       { font-size:.84rem; padding:10px 0; border-bottom:1px solid var(--cream) }
  .nav-cta                   { width:100%; text-align:center; justify-content:center;
                               margin-top:12px; background:var(--gold)!important; color:#fff!important;
                               border-radius:8px!important; padding:11px 20px!important }
  .nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
  .nav-toggle.active span:nth-child(2) { opacity:0 }
  .nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
  body.menu-open             { overflow:hidden }

  /* ═══ FIX #1+#2+#7: HERO — zero gaps, auto height ═══
     style.css @768px sets: min-height:500px, padding:40px
     We MUST override with !important                      */
  .hero                      { margin:0!important; padding:0!important }
  .hero-swiper               { height:auto!important; min-height:auto!important; border-radius:0!important }
  .hero-slide                { min-height:auto!important; height:auto!important }
  .hero-slide-content        { grid-template-columns:1fr!important; text-align:center;
                               gap:20px; padding:24px 16px 16px!important }
  .hero h1                   { font-size:1.6rem!important; line-height:1.28 }
  .hero p                    { font-size:.88rem; margin:0 auto 20px!important; max-width:100% }
  .hero-buttons,
  .hero-actions              { flex-direction:column; gap:10px }
  .hero-buttons .btn,
  .hero-actions .btn         { width:100%; text-align:center; justify-content:center }
  .hero-visual               { order:2 }
  .hero-card                 { max-width:100%; margin:0 auto; padding:18px!important; border-radius:16px }
  .hero-card::before         { height:2px }
  .hero-stat                 { padding:12px }
  .hero-stat-num             { font-size:1.5rem }
  .hero-stat-label           { font-size:.68rem }
  .hero-float,
  .hero-float-1,
  .hero-float-2              { display:none!important }
  .hero .swiper-pagination   { bottom:8px!important }
  .hero-badge                { margin-bottom:12px; padding:5px 12px; font-size:.68rem }
  .hero-stats                { gap:10px; margin-top:14px }
  .hero .swiper-pagination-bullet { width:8px; height:8px }

  /* ═══ FIX #2: MARQUEE — zero gap from hero ═══ */
  .marquee-section           { margin:0!important; padding:10px 0!important }
  .marquee-item              { padding:0 20px; font-size:.72rem; letter-spacing:1.5px }

  /* ═══ FIX #6: ALL MULTI-COL → SINGLE COLUMN ═══ */
  .why-grid,.wyg-grid                       { grid-template-columns:1fr!important }
  .footer-grid                              { grid-template-columns:1fr!important; text-align:center; gap:28px }
  .process-grid                             { grid-template-columns:1fr!important; gap:16px }
  .process-grid::before,.process-connector  { display:none!important }
  .services-grid                            { grid-template-columns:1fr!important; gap:16px }
  .process-grid-6                           { grid-template-columns:1fr!important; gap:16px }
  .pricing-grid                             { grid-template-columns:1fr!important }
  .imgbox-grid                              { grid-template-columns:1fr!important }
  .ft-steps-grid                            { grid-template-columns:1fr!important }
  .ft-stats-row                             { grid-template-columns:repeat(3,1fr); gap:12px }
  .svc-features-grid                        { grid-template-columns:1fr!important }
  .who-grid                                 { grid-template-columns:1fr!important; gap:16px }
  .testimonials-grid                        { grid-template-columns:1fr!important }
  .about-grid                               { grid-template-columns:1fr!important; gap:28px }
  .about-features                           { grid-template-columns:1fr!important; gap:12px }
  .contact-grid                             { grid-template-columns:1fr!important; gap:28px }
  .form-row                                 { grid-template-columns:1fr!important }
  .feature-cards                            { grid-template-columns:1fr!important }
  .related-grid                             { grid-template-columns:1fr!important }
  .home-ba-grid                             { grid-template-columns:1fr!important; gap:20px }
  .one-stop-grid                            { grid-template-columns:1fr!important; gap:28px }
  .one-stop-features                        { grid-template-columns:1fr!important }
  .one-stop-stats                           { grid-template-columns:1fr 1fr }
  .tab-inner                                { grid-template-columns:1fr!important; gap:24px; padding:24px 18px }
  .gallery-grid                             { grid-template-columns:1fr!important }
  .gal-ba-grid-3                            { grid-template-columns:1fr!important }
  .gal-cat-ba-grid                          { grid-template-columns:1fr!important }
  .gal-cat-ba-grid-4                        { grid-template-columns:1fr!important }
  .gal-pano-grid-2x2                        { grid-template-columns:1fr!important }
  .sp-layout                                { grid-template-columns:1fr!important; gap:24px }
  .service-layout                           { grid-template-columns:1fr!important; gap:0 }
  .sidebar                                  { position:static; order:2; margin-top:24px; width:100% }
  .sidebar-inner                            { position:static; max-height:none }
  .imgbox-zz-row,.imgbox-zz-row.zz-reverse { grid-template-columns:1fr!important; gap:20px }
  .imgbox-zz-img                            { width:100%; min-height:200px }
  .imgbox-zz-text                           { width:100% }
  .zigzag-row,.zigzag-row.zigzag-reverse    { grid-template-columns:1fr!important; gap:24px }
  .zigzag-reverse                           { direction:ltr }
  .zz-checks                                { grid-template-columns:1fr }

  /* SPE Hero */
  .spe-hero                  { min-height:auto!important }
  .spe-hero-inner            { grid-template-columns:1fr!important; text-align:center;
                               gap:20px; padding:70px 0 32px!important }
  .spe-hero-text h1          { font-size:1.7rem }
  .spe-hero-tagline          { font-size:.9rem; margin-left:auto; margin-right:auto }
  .spe-hero-actions          { justify-content:center; flex-direction:column; gap:10px }
  .spe-hero-actions .btn     { width:100%; text-align:center; justify-content:center }
  .spe-hero-trust            { justify-content:center; gap:8px }
  .spe-hero-trust span       { font-size:.74rem; padding:6px 12px }
  .spe-hero-visual           { order:-1 }
  .spe-ba-card               { max-width:100%; margin:0 auto 16px }
  .spe-stats-row             { flex-wrap:wrap; gap:14px; justify-content:center }
  .spe-stat-divider          { display:none }
  .spe-stat-num              { font-size:1.4rem }
  .spe-stat-label            { font-size:.68rem }

  /* SP Hero */
  .sp-hero                   { padding:56px 0 0 }
  .sp-hero-inner             { padding-bottom:32px }
  .sp-hero h1                { font-size:1.55rem; line-height:1.28 }
  .sp-hero-accent            { font-size:1.05rem }
  .sp-hero-desc              { font-size:.86rem; line-height:1.7 }
  .sp-hero-split             { grid-template-columns:1fr!important; gap:20px }
  .sp-hero-ba                { max-width:100%; margin-top:12px }
  .hero-ba-slider            { min-height:200px; border-radius:12px; aspect-ratio:16/10 }
  .sp-hero-ba-cap            { font-size:.74rem }
  .sp-hero-trust             { gap:10px }
  .sp-hero-trust span        { font-size:.74rem }
  .sp-hero-btns,
  .sp-hero-actions           { flex-direction:column; gap:10px }
  .sp-hero-btns .btn,
  .sp-hero-actions .btn      { width:100%; text-align:center; justify-content:center }
  .sp-hero-badges            { flex-wrap:wrap; gap:6px }
  .sp-hero-badges span       { font-size:.72rem; padding:4px 10px }
  .sp-hero-stats             { padding:14px 0 }
  .sp-stats-row              { gap:12px; justify-content:center }
  .sp-stat-num               { font-size:1.35rem }
  .sp-stat-label             { font-size:.66rem }

  /* About */
  .about-image-wrap          { max-width:260px; margin:0 auto }
  .about-content             { text-align:center }
  .process-step-6            { padding:20px 18px }
  .one-stop-section          { padding:44px 0 }
  .one-stop-content          { text-align:center }
  .one-stop-stat-num         { font-size:1.8rem }

  /* Tabs */
  .tabs-nav                  { gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px }
  .tab-btn                   { padding:10px 14px; font-size:.8rem; white-space:nowrap; flex-shrink:0 }
  .tab-visual                { order:-1 }

  .who-card                  { padding:20px }
  .client-logos-section      { padding:36px 0 }
  .client-logo-item span     { font-size:.82rem }
  .why-card                  { padding:20px }
  .testimonial-card          { padding:24px 18px }
  .testimonial-text          { font-size:.88rem }

  /* Global Clients */
  .global-clients-section    { padding:48px 0 }
  .gc-header h2              { font-size:1.4rem }
  .gc-metrics                { grid-template-columns:1fr 1fr!important; gap:14px }
  .gc-metric                 { min-width:0; flex:auto; padding:20px 14px }
  .gc-metric-num             { font-size:2rem }
  .gc-metric-label           { font-size:.68rem }
  .gc-countries-grid         { gap:8px }
  .gc-country-pill           { padding:6px 12px; font-size:.75rem }
  .gc-trust-row              { flex-wrap:wrap; gap:10px; justify-content:center }
  .gc-trust-badge            { padding:12px; flex-direction:column; text-align:center; gap:8px }

  /* CTA */
  .cta-section               { padding:48px 0 }
  .cta-content h2            { font-size:1.35rem }
  .cta-content p             { font-size:.88rem; margin-bottom:24px }
  .cta-buttons               { flex-direction:column; gap:10px; align-items:center }
  .cta-buttons .btn          { width:100%; justify-content:center }

  /* Contact */
  .contact-info-card         { padding:24px; order:2 }
  .contact-form-card         { padding:24px }

  /* FIX #8: Images */
  img                        { max-width:100%!important; height:auto }
  .ba-before img,.ba-after img { max-width:100% }
  .home-ba-slider            { min-height:220px }
  .ba-before,.ba-after       { min-height:180px }
  .ba-label                  { font-size:.6rem; padding:3px 8px }
  .ba-handle i               { width:34px; height:34px }

  /* Sticky CTA */
  .sticky-cta .container     { flex-direction:column; gap:8px; text-align:center }
  .sticky-cta-text           { font-size:.82rem }

  /* Footer */
  .footer                    { padding-top:0!important; padding-bottom:40px }
  .footer-brand              { text-align:center }
  .footer-social             { justify-content:center }
  .footer h4::after          { left:50%; transform:translateX(-50%) }
  .footer-bottom             { flex-direction:column; gap:10px; text-align:center }
  .footer-contact-strip      { grid-template-columns:1fr 1fr; gap:8px; padding:24px 0; margin-bottom:28px }
  .fcs-item                  { padding:10px 12px; gap:8px }
  .fcs-icon                  { width:36px; height:36px; font-size:.9rem; border-radius:10px }
  .fcs-value                 { font-size:.78rem }
  .fcs-label                 { font-size:.62rem }
  .footer-trust-row          { gap:8px; padding:20px 0 }
  .ftr-item                  { padding:7px 12px; font-size:.7rem }

  /* Floating buttons */
  .wa-float                  { bottom:76px; right:14px; width:50px; height:50px }
  .wa-float i                { font-size:1.35rem; width:50px }
  .wa-float:hover            { width:50px }
  .wa-float:hover .wa-float-label { max-width:0; opacity:0; padding:0 }
  .wa-float::before          { display:none }
  .back-to-top               { bottom:18px; right:14px; width:40px; height:40px;
                               border-radius:10px; font-size:.9rem }
}


/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE: ≤480px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  html                       { font-size:14px }
  .container                 { padding:0 14px!important }
  .section                   { padding:36px 0 }
  .section-header            { margin-bottom:22px }
  .section-header h2         { font-size:1.2rem }
  .section-header p          { font-size:.82rem }

  /* Hero tighter */
  .hero-slide-content        { padding:18px 14px 12px!important; gap:16px }
  .hero h1                   { font-size:1.35rem!important }
  .hero p                    { font-size:.84rem!important; margin-bottom:16px!important }
  .hero-badge                { margin-bottom:10px; font-size:.62rem; padding:4px 10px }
  .hero-card                 { padding:14px!important }
  .hero-stats                { gap:8px; margin-top:10px }
  .hero-stat                 { padding:10px 8px }
  .hero-stat-num             { font-size:1.3rem }
  .hero-stat-label           { font-size:.62rem }

  /* SPE/SP */
  .spe-hero-text h1          { font-size:1.4rem }
  .spe-hero-inner            { padding:60px 0 28px!important }
  .sp-hero h1                { font-size:1.25rem }
  .sp-hero-desc              { font-size:.82rem }
  .sp-hero                   { padding:48px 0 0 }
  .zigzag-title              { font-size:1.2rem }
  .zigzag-num                { font-size:2.2rem }
  .cta-content h2            { font-size:1.15rem }
  .page-hero h1              { font-size:1.2rem }
  .about-image-wrap          { max-width:200px }

  /* BA sliders */
  .hero-ba-slider,.home-ba-slider { min-height:180px }
  .ba-slider                 { min-height:160px }
  .sp-ba-card .ba-slider     { min-height:160px }
  .imgbox-zz-img             { min-height:170px }
  .zz-ba,.zz-ba-pano         { min-height:170px }
  .gal-ba .ba-before,
  .gal-ba .ba-after          { min-height:160px }
  .ba-label                  { font-size:.52rem; padding:2px 6px; top:6px; letter-spacing:1px }
  .ba-handle i               { width:30px; height:30px; font-size:.6rem }

  .one-stop-stats            { grid-template-columns:1fr 1fr; gap:12px }
  .one-stop-stat-num         { font-size:1.5rem }
  .pricing-tier-price .price-amount { font-size:1.4rem }
  .pricing-tier-price .price-label,
  .pricing-tier-price .price-unit   { font-size:.68rem }
  .gc-metric-num             { font-size:1.7rem }
  .gc-countries-grid         { gap:6px }
  .gc-country-pill           { padding:5px 10px; font-size:.7rem }
  .footer-contact-strip      { grid-template-columns:1fr!important; gap:6px }
  .footer-trust-row          { gap:6px }
  .ftr-item                  { padding:6px 10px; font-size:.68rem }
  .ftr-item i                { font-size:.72rem }
  .nav-menu                  { width:90%; max-width:300px; padding:64px 16px 16px }
  .article-section           { padding:16px; border-radius:12px }
  .article-section h2        { font-size:1.15rem }
  .sp-article h2             { font-size:1.15rem }
  .client-logos-grid         { grid-template-columns:repeat(2,1fr) }
  .volume-grid               { grid-template-columns:1fr }
  .vid-price-grid            { grid-template-columns:1fr; max-width:320px; margin:0 auto }
  .vid-samples-grid          { grid-template-columns:1fr }
  .incl-grid                 { grid-template-columns:1fr }
  .process-row-v12           { grid-template-columns:1fr }
  .sub-services-grid         { grid-template-columns:1fr }
}


/* ═══════════════════════════════════════════════════════════════
   EXTRA SMALL: ≤375px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:375px) {
  .container                 { padding:0 12px!important }
  .hero-slide-content        { padding:14px 12px 10px!important; gap:14px }
  .hero h1                   { font-size:1.2rem!important }
  .hero p                    { font-size:.82rem!important; margin-bottom:14px!important }
  .hero-badge                { font-size:.6rem; margin-bottom:8px }
  .spe-hero-text h1          { font-size:1.3rem }
  .sp-hero h1                { font-size:1.15rem }
  .section-header h2         { font-size:1.1rem }
  .sp-section h2             { font-size:1.1rem }
  .btn                       { padding:10px 14px; font-size:.8rem }
  .btn-lg                    { padding:11px 18px; font-size:.82rem }
  .gp-trust-badge            { padding:8px 10px }
  .gp-country-pill           { font-size:.66rem; padding:4px 8px }
  .sp-ba-card .ba-slider     { min-height:140px }
}


/* ═══════════════════════════════════════════════════════════════
   MINIMUM: ≤320px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:320px) {
  .container                 { padding:0 10px!important }
  .hero h1                   { font-size:1.1rem!important }
  .hero-slide-content        { padding:10px 10px 8px!important; gap:12px }
  .sp-hero h1                { font-size:1.05rem }
  .section-header h2         { font-size:1rem }
  .btn                       { padding:9px 12px; font-size:.78rem }
  .sp-hero-badges span       { font-size:.62rem; padding:3px 8px }
  .nav-menu                  { width:92%; max-width:280px; padding:60px 12px 12px }
}


/* ═══════════════════════════════════════════════════════════════
   TOUCH DEVICES
   ═══════════════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse) {
  .btn                       { min-height:44px }
  .nav-menu > li > a         { min-height:44px; display:flex; align-items:center }
  .sidebar-cat-btn           { min-height:48px }
  .faq-question              { min-height:48px }
  .gal-filter-btn            { min-height:38px }
  .ba-handle                 { width:44px; background:transparent }
  .ba-handle::before         { content:''; position:absolute; left:50%; top:0; bottom:0;
                               width:3px; background:#fff; transform:translateX(-50%) }
  .ba-handle i               { width:40px; height:40px; box-shadow:0 2px 16px rgba(0,0,0,.4) }
  .service-card:hover,.feature-card:hover,.why-card:hover,
  .imgbox-card:hover,.process-step-6:hover,.pricing-tier-card:hover,
  .related-card:hover        { transform:none }
}


/* ═══════════════════════════════════════════════════════════════
   iOS FORM ZOOM FIX
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="number"],input[type="url"],select,textarea {
    font-size:16px!important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ═══════════════════════════════════════════════════════════════ */
@media (max-height:500px) and (orientation:landscape) {
  .hero-swiper               { height:auto!important; min-height:auto!important; border-radius:0!important }
  .hero-slide                { min-height:auto!important }
  .spe-hero                  { min-height:auto!important }
  .sp-hero                   { padding:36px 0 0 }
  .hero-slide-content        { padding:16px!important }
  .spe-hero-inner            { padding:56px 0 24px!important }
}


/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .header,.top-bar,.footer,.sticky-cta,
  .nav-toggle,.preloader,.wa-float,
  .back-to-top               { display:none!important }
  .section                   { padding:20px 0 }
  body                       { font-size:12pt; color:#000 }
}