@media (max-width: 900px) {
  .branch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section__title { max-width: none; }
  .hero {
    align-items: end;
    padding-bottom: calc(2.5rem + var(--mobile-cta-h));
  }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(11, 13, 12, 0.45) 0%, rgba(11, 13, 12, 0.25) 30%, rgba(11, 13, 12, 0.88) 70%, rgba(11, 13, 12, 0.96) 100%),
      linear-gradient(90deg, rgba(11, 13, 12, 0.7), transparent 70%);
  }
  .hero__content { max-width: none; }
  .hero__title { max-width: none; }
  .cta__actions { display: grid; grid-template-columns: 1fr; }
  .cta__actions .btn { width: 100%; }
}

@media (max-width: 820px) {
  :root {
    --header-h: 3.6rem;
    --gutter: 1.1rem;
  }

  body {
    padding-bottom: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom, 0px));
  }
  body.nav-open {
    overflow: hidden;
  }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .site-nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: rgba(11, 13, 12, 0.97);
  }
  body.nav-open .site-nav,
  .site-nav.is-open { display: flex; }
  .site-nav a::after { display: none; }
  .site-nav a {
    padding: 1rem 0.15rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.1rem;
    color: var(--ink);
  }
  .site-nav .nav-cta {
    margin-top: 1rem;
    text-align: center;
    padding: 0.95rem;
  }

  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 13, 12, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .mobile-cta .btn { width: 100%; min-height: 2.8rem; }
  body.nav-open .mobile-cta { display: none; }

  .offer-list li { grid-template-columns: 2.5rem 1fr; }
  .branch-grid a { min-height: 3.2rem; font-size: 0.86rem; }
}

@media (max-width: 520px) {
  .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__brand { font-size: clamp(2.4rem, 12vw, 3.2rem); }
}
