/* ============================================================
   KRYSH — Responsive Breakpoints
   ============================================================ */

/* ---------- Large desktop refinement ---------- */
@media (max-width: 1180px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .service-card:nth-child(3n+1){ border-left:1px solid var(--line); }
  .service-card:nth-child(2n+1){ border-left:none; }
  .process-grid{ grid-template-columns:repeat(3,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .stat:nth-child(2n+1){ border-left:none; }
  .stat:nth-child(2n){ border-left:1px solid var(--line); }
}

/* ---------- Tablet ---------- */
@media (max-width: 940px){
  .nav-links{ display:none; }
  .nav-container > .cta-btn{ display:none; }
  .menu-toggle{ display:flex; }

  .hero-content h2{ -webkit-text-stroke:0.6px var(--off-white); }

  .section-content{ grid-template-columns:1fr; gap:36px; }
  .section-typography{ flex-direction:row; align-items:baseline; gap:24px; }

  .about-content{ grid-template-columns:1fr; gap:50px; }
  .about-image{ order:-1; aspect-ratio:16/10; }
  .about-highlights{ grid-template-columns:repeat(4,1fr); gap:16px; }

  .projects-grid{ grid-template-columns:1fr; }

  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .process .section-header{ flex-direction:column; align-items:flex-start; }

  .contact-container{ grid-template-columns:1fr; gap:56px; }
  .contact-form{ grid-template-columns:1fr; }
  .form-group:has(#message){ grid-column:auto; }

  .footer-container{ grid-template-columns:1fr; text-align:center; gap:22px; }
  .footer-nav ul{ justify-content:center; }
  .footer-social{ display:flex; justify-content:center; }
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; }
}

/* ---------- Small Tablet / Large Mobile ---------- */
@media (max-width: 768px){
  :root{ --gutter:20px; }

  /* Navbar */
  .nav-logo img{ height:50px; }
  .main-nav.is-scrolled .nav-logo img{ height:40px; }
  .main-nav{ padding:16px var(--gutter); }
  .main-nav.is-scrolled{ padding:12px var(--gutter); }
  .menu-toggle{ width:38px; height:38px; top:18px; }

  /* Hero */
  .hero-content{ padding-bottom:14vh; }
  .hero-content h1{ font-size:clamp(56px, 18vw, 140px); }
  .hero-content h2{ font-size:clamp(20px, 5vw, 36px); max-width:14ch; }
  .hero-content p{ font-size:14px; max-width:30ch; }
  .hero-eyebrow{ font-size:10px; letter-spacing:0.18em; }
  .hero-cta{ gap:12px; margin-top:28px; }
  .hero-cta .btn{ padding:14px 24px; font-size:12px; }
  .hero-divider{ margin-top:40px; }
  .hero-dots{ gap:8px; }
  .hero-dot{ width:6px; height:6px; }

  /* Brand Statement */
  .brand-statement{ padding:100px 0 70px; }
  .brand-statement h2{ font-size:clamp(28px, 6vw, 44px); }
  .brand-logo{ max-width:200px; }
  .brand-text p{ font-size:15px; }
  .section-typography span{ font-size:clamp(18px, 4vw, 28px); }

  /* Services */
  .services{ padding:80px 0; }
  .services .section-header h2{ font-size:clamp(32px, 8vw, 56px); }
  .service-card{ padding:28px 20px; }
  .service-card h3{ font-size:22px; margin:16px 0 10px; }
  .service-card p{ font-size:13px; }

  /* Selected Work */
  .selected-work{ padding:80px 0; }
  .selected-work .section-header h2{ font-size:clamp(32px, 8vw, 56px); }
  .projects-filter{ gap:6px; }
  .filter-btn{ padding:8px 16px; font-size:10px; }
  .project-info{ padding:20px; }
  .project-info h3{ font-size:22px; }
  .project-arrow{ width:36px; height:36px; font-size:14px; }

  /* Cinematic */
  .cinematic-section{ min-height:50vh; }
  .cinematic-text span{ font-size:10px; }
  .cinematic-text h2{ font-size:clamp(26px, 7vw, 48px); }

  /* About */
  .about{ padding:80px 0; }
  .about .section-header h2{ font-size:clamp(28px, 6vw, 44px); }
  .about-text p{ font-size:15px; }
  .about-highlights{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .highlight-number{ font-size:26px; }

  /* Stats */
  .stats{ padding:60px 0; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:24px 0; }
  .stat{ padding:0 0 0 16px; }
  .stat-number{ font-size:clamp(36px, 8vw, 52px); }
  .stat-label{ font-size:11px; }

  /* Process */
  .process{ padding:80px 0; }
  .process .section-header h2{ font-size:clamp(32px, 8vw, 56px); }
  .process .section-subtitle{ font-size:13px; }
  .process-grid{ grid-template-columns:1fr; gap:1px; }
  .process-step{ padding:28px 20px; }
  .process-num{ font-size:36px; }
  .process-step h3{ font-size:16px; }
  .process-step p{ font-size:12.5px; }

  /* Why KRYSH */
  .why-krysh{ padding:80px 0; }
  .why-krysh .section-header h2{ font-size:clamp(32px, 8vw, 56px); }
  .why-grid{ gap:0; }
  .why-item{ padding:20px 0; gap:16px; flex-direction:column; }
  .why-mark{ font-size:13px; }
  .why-item h3{ font-size:16px; }
  .why-item p{ font-size:13px; max-width:100%; }

  /* Before & After */
  .before-after{ padding:100px 0 70px; }
  .before-after .section-header h2{ font-size:clamp(24px, 5vw, 36px); }
  .compare-box{ aspect-ratio:1/1; }
  .compare-tag{ font-size:9px; padding:6px 10px; top:14px; }
  .compare-tag-before{ left:14px; }
  .compare-tag-after{ right:14px; }
  .compare-handle::after{ width:36px; height:36px; font-size:14px; }

  /* Testimonials */
  .testimonials{ padding:80px 0; }
  .testimonials .section-header h2{ font-size:clamp(32px, 8vw, 56px); }
  .testimonial-card{ min-width:88vw; padding:0 20px; }
  .testimonial-card:first-child{ padding-left:20px; }
  .testimonial-quote{ font-size:18px; }
  .testimonial-image{ width:44px; height:44px; }
  .testimonial-author{ font-size:12px; gap:10px; }

  /* CTA */
  .cta{ padding:100px 0; }
  .cta-text h2{ font-size:clamp(28px, 7vw, 48px); }
  .cta-text p{ font-size:15px; }
  .cta-buttons{ gap:12px; margin-top:32px; }

  /* Contact */
  .contact{ padding:80px 0; }
  .contact .section-header h2{ font-size:clamp(26px, 6vw, 40px); }
  .contact-container{ gap:40px; }
  .contact-address{ font-size:24px; }
  .contact-details{ margin-top:32px; gap:14px; }
  .detail-item{ gap:10px; }
  .detail-link{ font-size:13px; }
  .contact-form{ gap:20px; }
  .form-group label{ font-size:10px; }
  .form-group input, .form-group select, .form-group textarea{ font-size:14px; padding:8px 2px; }
  .btn-submit{ padding:16px; font-size:12px; }

  /* Footer */
  .main-footer{ padding:50px 0 28px; }
  .footer-logo img{ height:44px; }
  .footer-logo:hover img{ height:50px; }
  .footer-tagline{ font-size:10px; }
  .footer-nav ul{ gap:20px; }
  .footer-nav a{ font-size:11px; }
  .footer-social-instagram{ width:32px; height:32px; font-size:13px; }
  .footer-bottom{ margin-top:24px; padding-top:20px; }
  .footer-copyright{ font-size:10px; }
  .footer-links{ gap:16px; }
  .footer-links a{ font-size:10px; }

  /* Custom Cursor */
  .custom-cursor{ display:none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px){
  :root{ --gutter:16px; }

  /* Navbar */
  .nav-logo img{ height:42px; }
  .main-nav.is-scrolled .nav-logo img{ height:34px; }
  .menu-toggle{ width:34px; height:34px; top:14px; right:14px; }
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after{ width:16px; }

  /* Mobile Menu */
  .mobile-menu{ padding:20px var(--gutter); }
  .mobile-logo img{ height:50px; }
  .mobile-close{ font-size:28px; }
  .mobile-link{ font-size:32px; padding:10px 0; }
  .mobile-cta-btn{ padding:16px; font-size:12px; }

  /* Hero */
  .hero-content{ padding-bottom:16vh; }
  .hero-content h1{ font-size:clamp(48px, 20vw, 100px); }
  .hero-content h2{ font-size:clamp(18px, 5.5vw, 28px); -webkit-text-stroke:0.5px var(--off-white); }
  .hero-content p{ font-size:13px; margin-top:16px; }
  .hero-eyebrow{ font-size:9px; }
  .hero-cta{ flex-direction:column; gap:10px; }
  .hero-cta .btn{ width:100%; justify-content:center; padding:14px 20px; }
  .hero-divider{ margin-top:30px; }

  /* Brand Statement */
  .brand-statement{ padding:70px 0 50px; }
  .brand-statement h2{ font-size:clamp(24px, 7vw, 36px); }
  .section-content{ margin-top:40px; gap:30px; }
  .brand-logo{ max-width:160px; }
  .brand-text p{ font-size:14px; line-height:1.6; }
  .section-typography{ flex-direction:row; gap:16px; align-items:center; }
  .section-typography span{ font-size:clamp(16px, 5vw, 24px); }

  /* Services */
  .services{ padding:60px 0; }
  .services .section-header h2{ font-size:clamp(28px, 9vw, 44px); }
  .services-grid{ gap:0; }
  .service-card{ padding:24px 16px; }
  .service-card h3{ font-size:20px; }
  .service-card p{ font-size:12px; line-height:1.6; }

  /* Selected Work */
  .selected-work{ padding:60px 0; }
  .selected-work .section-header h2{ font-size:clamp(28px, 9vw, 44px); }
  .projects-filter{ margin-top:36px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:8px; }
  .projects-filter::-webkit-scrollbar{ display:none; }
  .filter-btn{ white-space:nowrap; padding:8px 14px; font-size:9px; }
  .project-card{ aspect-ratio:3/2; }
  .project-info{ padding:16px; }
  .project-info h3{ font-size:18px; }
  .project-category{ font-size:9px; }
  .project-arrow{ width:32px; height:32px; font-size:12px; }

  /* Cinematic */
  .cinematic-section{ min-height:40vh; }
  .cinematic-text span{ font-size:9px; letter-spacing:0.15em; }
  .cinematic-text h2{ font-size:clamp(22px, 7vw, 36px); margin-top:14px; }

  /* About */
  .about{ padding:60px 0; }
  .about .section-header h2{ font-size:clamp(24px, 7vw, 36px); }
  .about-content{ margin-top:40px; gap:30px; }
  .about-text p{ font-size:14px; line-height:1.65; }
  .about-highlights{ grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px; }
  .highlight{ padding-top:10px; }
  .highlight-number{ font-size:22px; }
  .highlight-label{ font-size:10px; }
  .about-image{ aspect-ratio:16/10; }

  /* Stats */
  .stats{ padding:40px 0; }
  .stats-grid{ gap:20px 0; }
  .stat{ padding-left:0; }
  .stat:first-child{ padding-left:0; }
  .stat-number{ font-size:clamp(30px, 9vw, 44px); }
  .stat-suffix{ font-size:0.35em; }
  .stat-label{ font-size:10px; letter-spacing:0.06em; line-height:1.4; }

  /* Process */
  .process{ padding:60px 0; }
  .process .section-header h2{ font-size:clamp(28px, 9vw, 44px); }
  .process-step{ padding:20px 16px; }
  .process-content{ padding:8px; margin:-8px; }
  .process-num{ font-size:30px; }
  .process-step h3{ font-size:15px; margin:12px 0 8px; }
  .process-step p{ font-size:12px; line-height:1.55; }

  /* Why KRYSH */
  .why-krysh{ padding:60px 0; }
  .why-krysh .section-header h2{ font-size:clamp(28px, 9vw, 44px); }
  .why-item{ padding:16px 0; gap:12px; }
  .why-mark{ font-size:11px; letter-spacing:0.06em; }
  .why-item h3{ font-size:14px; margin-bottom:6px; }
  .why-item p{ font-size:12px; line-height:1.6; }

  /* Before & After */
  .before-after{ padding:70px 0 50px; }
  .before-after .section-header h2{ font-size:clamp(20px, 6vw, 28px); }
  .compare-wrap{ margin-top:36px; }
  .compare-box{ aspect-ratio:4/5; border-radius:2px; }
  .compare-tag{ font-size:8px; padding:5px 8px; top:10px; letter-spacing:0.1em; }
  .compare-tag-before{ left:10px; }
  .compare-tag-after{ right:10px; }
  .compare-handle::after{ width:30px; height:30px; font-size:12px; }

  /* Testimonials */
  .testimonials{ padding:60px 0; }
  .testimonials .section-header h2{ font-size:clamp(28px, 9vw, 44px); }
  .testimonial-card{ min-width:90vw; padding:0 16px; }
  .testimonial-card:first-child{ padding-left:16px; }
  .testimonial-quote{ font-size:16px; line-height:1.35; }
  .testimonial-author{ margin-top:20px; }
  .testimonial-image{ width:38px; height:38px; }
  .testimonial-author strong{ font-size:12px; }
  .testimonial-author div{ font-size:11px; }

  /* CTA */
  .cta{ padding:70px 0; }
  .cta-text h2{ font-size:clamp(24px, 7vw, 36px); }
  .cta-text p{ font-size:14px; margin-top:14px; }
  .cta-buttons{ flex-direction:column; width:100%; gap:10px; }
  .cta-buttons .btn{ width:100%; justify-content:center; padding:14px 20px; }

  /* Contact */
  .contact{ padding:60px 0; }
  .contact .section-header h2{ font-size:clamp(22px, 7vw, 32px); }
  .contact-container{ gap:30px; margin-top:40px; }
  .contact-address{ font-size:20px; line-height:1.3; }
  .contact-details{ margin-top:24px; gap:12px; }
  .detail-item{ gap:8px; }
  .detail-icon{ font-size:13px; }
  .detail-link{ font-size:12px; }
  .contact-form{ gap:16px; }
  .form-group{ gap:6px; }
  .form-group input, .form-group select, .form-group textarea{ font-size:13px; padding:8px 0; }
  .form-group textarea{ min-height:50px; }
  .btn-submit{ padding:14px; font-size:11px; letter-spacing:0.1em; }

  /* Footer */
  .main-footer{ padding:40px 0 20px; }
  .footer-container{ gap:16px; }
  .footer-logo img{ height:36px; }
  .footer-logo:hover img{ height:40px; }
  .footer-tagline{ font-size:9px; letter-spacing:0.1em; }
  .footer-nav ul{ gap:16px; }
  .footer-nav a{ font-size:10px; }
  .footer-social-instagram{ width:28px; height:28px; font-size:11px; }
  .footer-bottom{ margin-top:18px; padding-top:16px; gap:10px; }
  .footer-copyright{ font-size:9px; }
  .footer-links{ gap:12px; }
  .footer-links a{ font-size:9px; }
}

/* ---------- Extra Small Mobile ---------- */
@media (max-width: 380px){
  .hero-content h1{ font-size:42px; }
  .hero-content h2{ font-size:16px; }
  .mobile-link{ font-size:26px; }
  .service-card h3{ font-size:18px; }
  .project-info h3{ font-size:16px; }
  .stat-number{ font-size:28px; }
  .process-step h3{ font-size:14px; }
  .why-item h3{ font-size:13px; }
  .testimonial-quote{ font-size:15px; }
  .cta-text h2{ font-size:22px; }
  .contact-address{ font-size:18px; }
}