/* =========================================================
   Riyadh Car Services — RESPONSIVE
   Breakpoints: Large Desktop (>1440px), Tablet (<=1024px),
   Mobile (<=768px), Small Mobile (<=480px)
   ========================================================= */

@media (min-width: 1440px) {
  :root {
    --container: 1340px;
  }
  .hero__stage {
    width: min(1160px, 100%);
  }
}

@media (max-width: 1120px) {
  .nav {
    display: none;
  }
  .burger {
    display: inline-block;
  }
  .fleet__grid,
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .extras__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust__card {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 0;
  }
  .trust__item:nth-child(3) {
    border-inline-start: 0;
  }
  .about__grid,
  .faq__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .faq__intro {
    position: static;
  }
  .about__visual {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }
  .car-modal__layout {
    grid-template-columns: 1fr;
  }
  .car-modal__visual {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(27, 25, 22, 0.08);
    padding: 1.8rem 1.5rem 1.4rem;
  }
  .footer__cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem 1.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 72px;
  }
  .header {
    top: 10px;
  }
  .header__inner {
    padding: 8px 10px 8px 18px;
    padding-inline-start: 18px;
    padding-inline-end: 10px;
  }
  .header__cta .btn__label {
    display: none;
  }
  .header__cta {
    width: 42px;
    height: 42px;
    padding: 0;
  }
  .hero {
    padding-top: calc(var(--header-h) + 2.2rem);
    padding-bottom: 6.5rem;
  }
  .hero__stage {
    aspect-ratio: 16 / 10;
    margin-top: 1.4rem;
  }
  .hero__panels {
    inset: 0 3% 22% 3%;
  }
  .hero__car-wrap {
    left: 4%;
    right: 4%;
  }
  .hero__marks {
    display: none;
  }
  .hero__cta-line {
    display: none;
  }
  .scroll-cue {
    display: none;
  }
  .trust {
    margin-top: -48px;
  }
  .trust__card {
    grid-template-columns: 1fr;
    padding: 1.2rem;
    gap: 1rem;
  }
  .trust__item {
    border-inline-start: 0;
    border-top: 1px solid rgba(231, 205, 150, 0.12);
    padding: 0.9rem 0.4rem 0;
  }
  .trust__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .fleet__grid,
  .services__grid,
  .extras__grid {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.25rem;
  }
  .footer__col--contact {
    grid-column: 1 / -1;
  }
  .footer__pills {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .footer__giant-word {
    font-size: clamp(2.2rem, 11vw, 4.8rem);
  }
  .footer__giant-mark {
    width: clamp(90px, 24vw, 180px);
  }
  .footer__bottom-row {
    flex-direction: column;
    text-align: center;
  }
  .car-modal {
    padding: 0;
    align-items: flex-end;
  }
  .car-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 26px 26px 0 0;
    transform: translateY(100%);
  }
  .car-modal.is-open .car-modal__dialog {
    transform: translateY(0);
  }
  .car-modal__info {
    padding: 1.5rem 1.25rem 1.8rem;
  }
  .car-modal__specs {
    grid-template-columns: 1fr;
  }
  .fab-wa {
    width: 52px;
    height: 52px;
    bottom: 16px;
    left: 16px;
  }
  .to-top {
    width: 46px;
    height: 46px;
    bottom: 18px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .hero__wordmark {
    font-size: clamp(3.3rem, 16vw, 4.6rem);
  }
  .hero__sub {
    letter-spacing: 0.38em;
    padding-left: 0.38em;
    font-size: 0.78rem;
  }
  .hero__cta {
    flex-direction: column;
    width: 100%;
  }
  .hero__cta .btn {
    width: 100%;
  }
  .service-card__actions,
  .car-modal__actions {
    grid-template-columns: 1fr;
  }
  .car-modal__pricing {
    grid-template-columns: 1fr;
  }
  .footer__cols {
    grid-template-columns: 1fr;
  }
  .footer__pills {
    flex-direction: column;
    width: 100%;
  }
  .footer-pill {
    width: 100%;
  }
  .footer__giant-word {
    font-size: clamp(2rem, 13vw, 3.6rem);
  }
  .about__badge {
    padding: 0.85rem 1.1rem;
  }
  .about__badge strong {
    font-size: 2rem;
  }
}