/* ==========================================================================
   Dynamic Express Consultants — Responsive Layer (mobile first)
   Breakpoints: 480 / 640 / 860 / 1024 / 1280
   ========================================================================== */

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
  :root { --gutter: 24px; }
  .opts { grid-template-columns: repeat(2, 1fr); }
  .quote-foot .btn { flex: 0 1 auto; }
  .quote-foot { justify-content: space-between; }
  .hero__cta .btn { min-width: 200px; }
}

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .brand__text {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: .05em;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
  }
  .brand__text small {
    display: block;
    font-family: var(--font-body);
    font-size: .54rem;
    letter-spacing: .3em;
    color: var(--orange);
    margin-top: 2px;
  }
  .nav.is-stuck .brand__text, .nav.is-light .brand__text { color: var(--ink-900); }
  .quote { flex-basis: calc(50% - var(--s4) / 2); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding-inline: var(--s7); }
  .phone { width: 250px; }
}

/* ---------- ≥ 860px (tablet landscape) ---------- */
@media (min-width: 860px) {
  :root { --nav-h: 84px; --gutter: 32px; }
  .section { padding-block: 112px; }
  .section--tight { padding-block: 80px; }

  .nav__links { display: flex; }
  .nav__actions { display: flex; }
  .burger { display: none; }
  .drawer { display: none; }

  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); }
  .hero__logo { width: 148px; }
  .scroll-hint { display: flex; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }

  .contact-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .shots { grid-template-columns: repeat(4, 1fr); }

  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .steps::before {
    left: 26px; right: 26px; top: 26px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--orange), rgba(255,90,31,.12));
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
  }
  .step { flex-direction: column; gap: var(--s4); }
  .step__body { padding-top: 0; }

  .opts { grid-template-columns: repeat(3, 1fr); }
  .opts--wide { grid-template-columns: repeat(2, 1fr); }
  .quote-body { padding: var(--s7) var(--s6); }
  .quote-head, .quote-foot { padding-inline: var(--s6); }

  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s6); }
  .fab { right: 24px; bottom: 24px; }
  .cta-band { padding: var(--s9) var(--s8); }
}

/* ---------- ≥ 1024px ---------- */
@media (min-width: 1024px) {
  .ba-grid { grid-template-columns: repeat(3, 1fr); }
  .ba-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .quote { flex-basis: calc(33.333% - var(--s4) * 2 / 3); }
  .hero__logo { width: 164px; }
  .phone { width: 268px; }
  .quote-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--s6); align-items: start; }
  .quote-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* ---------- ≥ 1280px ---------- */
@media (min-width: 1280px) {
  :root { --wrap: 1220px; }
  .hero__grid { gap: var(--s9); }
}

/* ---------- Landscape phones: shorter hero ---------- */
@media (max-height: 620px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 32px) var(--s7); }
  .scroll-hint { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .drawer, .fab, .reels, .scroll-hint, .cta-band { display: none !important; }
  body { color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: .8em; }
}