/* Large screen overrides (desktops, ultra‑wide, TVs) */
/* These rules reduce excessive side gutters and widen key content blocks. */

/* Desktop */
/* Laptops / mid‑large screens */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* Make car smaller and position closer to text */
  .final-cta__art { right: 4%; width: min(820px, 46vw); opacity: 0.9; }
}

@media (min-width: 1440px) {
  .container,
  .nav-container { max-width: min(1600px, 90vw); }

  .about-inner { max-width: min(1600px, 90vw); column-gap: 64px; }
  .about-card { max-width: 900px; }
  .a-stack { max-width: min(1280px, 86vw); }
  /* Taller media in stacked About cards for big screens */
  .a-media { height: clamp(220px, 32vh, 360px); }
  .a-photo img { height: clamp(280px, 36vh, 420px); }

  /* Widen CTA copy for comfortable reading on big displays */
  .final-cta__content { max-width: 980px; }
  .final-cta__title { font-size: clamp(28px, 4.8vw, 52px); }
  .final-cta__subtitle { font-size: clamp(16px, 2.2vw, 20px); }
  .final-cta__actions { gap: clamp(10px, 1.2vw, 14px); }
  .final-cta .btn-primary, .final-cta .btn-outline { padding: clamp(10px, 1.0vw, 14px) clamp(16px, 1.4vw, 22px); }
  /* Make the car art smaller and closer to text on desktops */
  .final-cta__art { right: 6%; width: min(900px, 44vw); }

  /* Testimonials: allow 3 columns on wide screens */
  .love-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.2vw, 32px); }
  .love-card { padding: clamp(20px, 1.6vw, 28px); }
  .love-avatar { width: 44px; height: 44px; }
  .love-name { font-size: clamp(15px, 1.2vw, 18px); }
  .love-meta { font-size: clamp(12px, 1vw, 14px); }
  .love-quote { font-size: clamp(15px, 1.15vw, 18px); }
  .love-hero .section-title { font-size: clamp(28px, 4vw, 52px); }

  /* Services: reduce side gutters and scale content */
  .services-section .container { max-width: min(1700px, 94vw); }
  .services-grid { gap: clamp(22px, 2.2vw, 32px); }
  .service-card { padding: clamp(26px, 2vw, 36px); min-height: 400px; }
  .service-card h3 { font-size: clamp(20px, 1.7vw, 28px); }
  .service-card p { font-size: clamp(15px, 1.15vw, 18px); }
  .service-list li { font-size: clamp(13px, 1vw, 16px); padding: 12px 16px; }

  /* Process section scaling */
  .process-section .container { max-width: min(1700px, 94vw); }
  .process-section .section-title { font-size: clamp(32px, 3.6vw, 44px); }
  .process-steps { gap: clamp(16px, 2vw, 28px); }
  .step { padding: clamp(22px, 1.8vw, 30px); min-height: 240px; }
  .step-number { width: 48px; height: 48px; top: -14px; left: 18px; }
  .step h3 { font-size: clamp(16px, 1.4vw, 22px); }
  .step p { font-size: clamp(14px, 1.15vw, 18px); }

  /* Contact lead banner — bigger headline */
  .contact-lead-banner { padding: 36px 0 12px; }
  .contact-lead-banner .lead-text { font-size: clamp(28px, 3.2vw, 40px); }
  .contact-lead-banner .lead-text::after { width: 44%; }

  /* Contact card and map */
  /* Keep 'Get in Touch' equal to 'Our Services' on XL screens */
  .contact-section .section-title { font-size: clamp(24px, 3.2vw, 36px); }
  /* Keep supportive text at normal paragraph size */
  .contact-section .section-subtitle { font-size: 16px; }
  .contact-card { padding: clamp(28px, 2.2vw, 40px); border-radius: 24px; }
  .contact-list { gap: clamp(10px, 1.2vw, 14px); }
  .contact-row { padding: clamp(12px, 1.2vw, 18px); border-radius: 14px; }
  .contact-badge { font-size: 12px; }
  .contact-action { font-size: 16px; }
  .map-frame { min-height: 420px; }
}

/* 1080p+ / Big desktops */
@media (min-width: 1920px) {
  .container,
  .nav-container { max-width: min(1800px, 88vw); }

  .about-inner { max-width: min(1800px, 88vw); column-gap: 72px; }
  .about-card { max-width: 1040px; }
  .a-stack { max-width: min(1380px, 84vw); }
  /* Increase media height again for 1080p+ */
  .a-media { height: clamp(260px, 34vh, 420px); }
  .a-photo img { height: clamp(320px, 38vh, 520px); }
  .final-cta__content { max-width: 1120px; }
  .final-cta__title { font-size: clamp(32px, 4.6vw, 58px); }
  .final-cta__subtitle { font-size: clamp(18px, 2vw, 22px); }
  /* Keep car art small and closer to text area */
  .final-cta__art { right: 8%; width: min(980px, 40vw); }

  /* Services at 1080p+ */
  .services-section .container { max-width: min(2000px, 92vw); }
  .service-card { min-height: 420px; }
  .service-card::before { width: 260px; height: 260px; }

  /* Contact lead + contact scaling */
  .contact-lead-banner { padding: 44px 0 14px; }
  .contact-lead-banner .lead-text { font-size: clamp(32px, 3.1vw, 48px); }
  .contact-lead-banner .lead-text::after { width: 40%; }
  /* Match Services title size on big desktops as well */
  .contact-section .section-title { font-size: clamp(24px, 3.2vw, 36px); }
  /* Keep paragraph scale consistent */
  .contact-section .section-subtitle { font-size: 16px; }
  .contact-card { padding: clamp(32px, 2.0vw, 48px); }
  .contact-row { padding: clamp(14px, 1.1vw, 20px); }
  .map-frame { min-height: 480px; }

  /* Process at 1080p+ */
  .process-section .container { max-width: min(1900px, 92vw); }
  .process-section .section-title { font-size: clamp(36px, 3.4vw, 48px); }
  .step { min-height: 260px; }
  .step-number { width: 54px; height: 54px; top: -16px; }

  /* Testimonials at 1080p+ */
  .love-grid { gap: clamp(24px, 2.4vw, 34px); }
  .love-card { padding: clamp(22px, 1.8vw, 32px); }
  .love-avatar { width: 50px; height: 50px; }
  .love-quote { font-size: clamp(16px, 1.2vw, 20px); }
  .love-hero .section-title { font-size: clamp(32px, 3.8vw, 56px); }
}

/* 4K / TVs */
@media (min-width: 2560px) {
  .container,
  .nav-container { max-width: min(2000px, 82vw); }

  .about-inner { max-width: min(2000px, 82vw); column-gap: 80px; }
  .about-card { max-width: 1200px; }
  .a-stack { max-width: min(1500px, 78vw); }
  /* 4K/TV: give media generous height */
  .a-media { height: clamp(300px, 36vh, 480px); }
  .a-photo img { height: clamp(360px, 40vh, 600px); }
  .final-cta__content { max-width: 1240px; }
  .final-cta__title { font-size: clamp(36px, 4vw, 64px); }
  .final-cta__subtitle { font-size: clamp(20px, 1.8vw, 24px); }
  /* 4K+: positioned within viewport */
  .final-cta__art { right: 0%; width: min(1040px, 36vw); }

  /* Services on 4K/TVs */
  .services-section .container { max-width: min(2300px, 92vw); }
  .services-grid { gap: clamp(24px, 2.6vw, 36px); }
  .service-card { padding: clamp(28px, 2.2vw, 40px); min-height: 460px; }
  .service-card::before { width: 320px; height: 320px; }

  /* Contact lead + contact on 4K */
  .contact-lead-banner { padding: 56px 0 18px; }
  .contact-lead-banner .lead-text { font-size: clamp(36px, 2.8vw, 56px); }
  .contact-lead-banner .lead-text::after { width: 36%; }
  /* 4K/TVs: still keep Contact title equal to Services */
  .contact-section .section-title { font-size: clamp(24px, 3.2vw, 36px); }
  .contact-section .section-subtitle { font-size: 16px; }
  .contact-card { padding: clamp(36px, 1.8vw, 56px); border-radius: 26px; }
  .contact-row { padding: clamp(16px, 1.0vw, 22px); border-radius: 16px; }
  .map-frame { min-height: 560px; }

  /* Process on 4K/TVs */
  .process-section .container { max-width: min(2100px, 90vw); }
  .process-section .section-title { font-size: clamp(42px, 3.2vw, 60px); }
  .step { min-height: 280px; }
  .step-number { width: 60px; height: 60px; top: -18px; }

  /* Testimonials on 4K/TVs */
  .love-grid { gap: clamp(26px, 2.8vw, 40px); }
  .love-card { padding: clamp(24px, 2vw, 36px); }
  .love-avatar { width: 56px; height: 56px; }
  .love-quote { font-size: clamp(18px, 1.1vw, 22px); }
  .love-hero .section-title { font-size: clamp(36px, 3vw, 64px); }
}