/* ==========================================================================
   Dollars Cafe — responsive.css
   Breakpoints: 1440 (laptop) · 1024 · 768 (tablet) · 480 · 375 (mobile)
   Loaded last so these rules win over base styles.
   ========================================================================== */

/* ---------- Laptop ≤ 1440 ---------- */
@media (max-width: 1440px) {
  :root { --container: 1140px; }
}

/* ---------- ≤ 1200 ---------- */
@media (max-width: 1200px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 44px; }
  .footer__newsletter { grid-column: 1 / -1; }
}

/* ---------- ≤ 1024 (small laptop / large tablet) ---------- */
@media (max-width: 1024px) {
  .services__grid,
  .why__grid,
  .insights__grid { grid-template-columns: repeat(2, 1fr); }

  .timeline { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  .timeline::before { display: none; }

  .hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .hero__visual { order: -1; min-height: 360px; }
  .hero { min-height: auto;
  .orbital { width: min(380px, 80%); }
}

/* ---------- Header → off-canvas at ≤ 980 ---------- */
@media (max-width: 980px) {
  .header__cta { display: none; }
  .nav__toggle { display: flex; }

  .nav {
    position: fixed; top: 0; right: 0; z-index: 90;
    height: 100dvh; width: min(380px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    padding: 88px 32px 40px;
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-dark));
    border-left: 1px solid var(--line-strong);
    box-shadow: -30px 0 60px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list { flex-direction: column; gap: 4px; }
  .nav__link {
    display: block; padding: 14px 4px; font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }

  .nav__cta { display: inline-flex; margin-top: 26px; width: 100%; }
  .nav__close {
    display: grid; place-items: center;
    position: absolute; top: 22px; right: 22px;
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--line-strong);
  }
  .nav__close svg { width: 22px; height: 22px; stroke: var(--white); stroke-width: 2; stroke-linecap: round; }

  /* Hamburger → X when open */
  body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero slider — mobile responsiveness ---------- */
@media (max-width: 768px) {
  .hero-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;        /* clip the decorative ring/chart + any scaled slide */
    box-sizing: border-box;
    top: 80px;
  }
  .header {
    background : #111;
  }
.hero {
  margin-top: 80px;
 }
  .hero-slider__viewport,
  .hero-slider__track,
  .hslide,
  .hslide__zoom {
    max-width: 100%;
  }
}
@media (max-width: 1024px) {
  .hero-slider { min-height: 72svh; }
}

@media (max-width: 768px) {
  .hero-slider { min-height: 60svh; }
}

@media (max-width: 480px) {
  .hero-slider { min-height: 46svh; }
  .hero-slider__dots { bottom: 18px; }
}

@media (max-width: 375px) {
  .hero-slider { min-height: 40svh; }
}


/* ---------- Tablet ≤ 768 ---------- */
@media (max-width: 768px) {
  body { font-size: 16px; }

  .utility-bar__hours { display: none !important; }
  .utility-bar__inner { justify-content: center; }
  .utility-bar__social { display: none; }

  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .trust__item:nth-child(odd)::after { display: none; }
  .trust__item:nth-child(even)::after { display: none; }

  .about__inner { grid-template-columns: 1fr; gap: 44px; }
  .about__media { max-width: 460px; }

  .section-head--row { flex-direction: column; align-items: flex-start; gap: 20px; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- ≤ 600 ---------- */
@media (max-width: 600px) {
  .services__grid,
  .why__grid,
  .insights__grid,
  .timeline { grid-template-columns: 1fr; }

  .timeline__step { padding-top: 0; padding-left: 72px; min-height: 54px; }
  .timeline__num { top: 50%; transform: translateY(-50%); }
  .timeline__step:hover .timeline__num { transform: translateY(-50%) scale(1.06); }

  .float-card { min-width: 130px; padding: 12px 14px; }
  .float-card__value { font-size: 1.25rem; }
  .float-card--2 { left: -2%; }

  .hero__actions .btn { flex: 1 1 100%; }
}

/* ---------- Mobile ≤ 480 ---------- */
@media (max-width: 480px) {
  :root { --gutter: 20px; }

  .hero-slider__arrow { width: 42px; height: 42px; }
  .hero-slider__arrow svg { width: 20px; height: 20px; }
  .hero-slider__dots { bottom: 26px; }

  .utility-bar { font-size: 0.76rem; }
  .utility-bar__contact { gap: 16px; justify-content: center; }

  .trust__grid { grid-template-columns: 1fr; gap: 30px; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .quote blockquote { font-size: 1.25rem; }
  .newsletter__field { flex-direction: column; padding: 12px; border-radius: var(--radius-sm); }
  .newsletter__field input { padding: 6px 8px; }
  .newsletter__field .btn { width: 100%; }
}

/* ---------- Small mobile ≤ 375 ---------- */
@media (max-width: 375px) {
  .header__logo img { height: 40px; }
  .float-card--1 { right: 0; }
  .orbital { width: 90%; }
}