/* Breakpoints — mobile-first tweaks applied top-down from desktop */
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .carousel__slide { flex-basis: 50%; }
  .about__badge { width: 108px; height: 108px; left: -3%; }
}

@media (max-width: 900px) {
  :root {
    --header-h: 72px;
    /* Desktop section padding is far too generous once everything stacks. */
    --space-section: clamp(3.5rem, 7vw, 5.5rem);
  }
  .nav { display: none; }
  .burger { display: grid; }
  .header__actions .btn { display: none; }
  .topbar__list .topbar__item:nth-child(n+3) { display: none; }

  .hero__grid, .about__grid, .hours__grid, .pricing__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; min-height: 470px; margin-block: 1rem 1.5rem; margin-inline: auto; width: min(100%, 460px); }
  .hero__text { max-width: none; }
  .services { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  /* Same specificity as the desktop placement rules, declared later, so no !important. */
  .gallery__item:nth-child(n) { grid-area: auto; aspect-ratio: 1; }
  /* relative, not static: the card must stay the containing block for its
     decorative leaf, or overflow:hidden stops clipping it and the page scrolls sideways */
  .price-card { position: relative; }
  .hours__media { max-width: 420px; margin-inline: auto; }
  .about__media { max-width: 440px; margin-inline: auto; }
  .mobile-cta { display: flex; }
  .to-top { bottom: 5.5rem; }
  .footer { padding-bottom: 6rem; }
}

@media (max-width: 640px) {
  :root {
    /* The hero headline hit its clamp floor and ate half the first screen. */
    --fs-hero: clamp(2.05rem, 8.6vw, 2.75rem);
    --space-section: 3.25rem;
  }

  .topbar__list .topbar__item:nth-child(n+2) { display: none; }

  /* ---- Hero ---- */
  .hero { padding-block: 1.25rem 2.75rem; }
  .hero__media { min-height: 360px; margin-block: .25rem 1.25rem; width: min(100%, 340px); }
  .hero__shape { inset: auto 0 0 12%; width: 74%; }
  .hero__card { width: 40%; padding: .45rem; }
  .hero__card--one { left: -2%; top: 2%; }
  .hero__card--two { right: -2%; bottom: 8%; }
  .hero__pill { right: 0; top: -2%; padding: .5rem .85rem; font-size: .74rem; gap: .5rem; }
  .hero__pill strong { font-size: 1.05rem; }
  .hero__pill svg { width: 20px; height: 20px; }
  .hero__text { font-size: 1rem; }
  /* Full-width call to action: easier to hit with a thumb. */
  .hero__actions { gap: .65rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__facts { margin-top: 1.75rem; gap: .5rem 1rem; }
  .hero__facts li { font-size: .87rem; }

  /* ---- Features: four stacked cards was 976px of scrolling for four short facts ---- */
  .features { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .feature { padding: 1.35rem .85rem; border-radius: var(--radius-sm); }
  .feature__icon { width: 46px; height: 46px; margin-bottom: .7rem; }
  .feature__icon svg { width: 21px; height: 21px; }
  .feature h3 { font-size: .98rem; margin-bottom: .3rem; }
  .feature p { font-size: .79rem; line-height: 1.5; }

  /* ---- About: the overlapping photo covered most of the main one ---- */
  .about__media { max-width: 330px; }
  .about__media .frame--small { width: 42%; right: -3%; bottom: 4%; border-width: 6px; }
  .about__badge { width: 84px; height: 84px; padding: .5rem; left: -2%; top: 4%; }
  .about__badge strong { font-size: 1.5rem; }
  .about__badge span { font-size: .55rem; letter-spacing: .08em; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-block: 1.75rem; }
  .stat__num { font-size: 1.75rem; }
  .stat__label { font-size: .72rem; line-height: 1.35; }
  .checklist li { font-size: .9rem; }

  /* ---- Services ---- */
  .services { gap: 1.1rem; margin-top: 2.25rem; }
  .service__media { aspect-ratio: 16/11; }
  .service__body { padding: 1.35rem 1.25rem 1.5rem; }

  /* ---- Price tables: headings were wrapping into three cramped lines ---- */
  .price-block + .price-block { margin-top: 1.75rem; }
  .price-block__title { font-size: .68rem; padding: .35rem .85rem; }
  .price-table thead th { font-size: .62rem; letter-spacing: .04em; }
  .price-table th, .price-table td { padding: .55rem .2rem; font-size: .82rem; }
  .price-table td:first-child { font-size: .88rem; line-height: 1.35; }
  .price-card { padding: 1.75rem 1.4rem; }
  .price-card .btn { width: 100%; }

  /* ---- Contact: thumb-sized buttons ---- */
  .hours__grid .btn { width: 100%; }
  .hours__grid .btn + .btn { margin-top: .65rem; }
  .hours__list { margin-block: 1.5rem; }

  /* ---- Gallery: five tiles in two columns left a hole, so the first one spans ---- */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: .55rem; margin-top: 2.25rem; }
  .gallery__item:nth-child(1) { grid-column: span 2; aspect-ratio: 4/3; }

  /* ---- Reviews: one full-width card, not two squeezed halves ---- */
  .carousel__slide { flex-basis: 100%; }
  .carousel__nav { margin-top: 1.75rem; }

  /* ---- FAQ ---- */
  .faq__q { padding: 1.05rem 1.15rem; font-size: 1rem; }
  .faq__a p { padding: 0 1.15rem 1.2rem; font-size: .9rem; }

  /* ---- Footer: two link columns instead of four stacked blocks ---- */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer__grid > *:first-child,
  .footer__grid > *:last-child { grid-column: 1 / -1; }
  .footer h3 { margin-bottom: .9rem; }
  .footer__bottom { margin-top: 2.5rem; }
  .footer { padding-bottom: 7rem; }

  .hero__card--one { left: -2%; }
  .about__media .frame--small { right: -3%; }
  .hours__note { position: static; margin-top: 1.25rem; max-width: none; }
  .leaf--1, .leaf--3 { display: none; }
  .leaf--2 { width: 110px; opacity: .22; }
  .btn { padding: .9rem 1.6rem; }
}