/* Mobile-first responsive overrides */
@media (max-width: 768px) {
  :root { --radius-xl: 28px; }
  /* Reduce global font a touch for small screens to avoid initial zoom */
  html, body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  body { font-size: 14px; }
  .container { padding: 0 16px; }
  .nav__links { display: none !important; }
  .nav__hamburger { display: flex !important; }
  .nav__inner { padding: 0 12px; gap: 1rem; }
  .nav { padding: 12px 0; }
  /* Make hero more compact on small screens */
  .hero { min-height: 70vh; align-items: flex-start; padding-top: 68px; }
  .hero__content { padding: 12px 0; width: 100%; max-width: 100%; }
  .hero__title { font-size: 1.6rem; line-height: 1.05; }
  .hero__sub { font-size: 0.95rem; }
  .hero__ctas { display: flex; flex-direction: column; gap: 12px; }
  .btn { padding: 10px 18px; font-size: 0.95rem; }
  .btn--small { padding: 8px 16px; }

  .section { padding: 60px 0; }
  .section__header { margin-bottom: 40px; }

  .bento-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .bento-card { width: 100%; height: auto; }
  .bento-thumb { width: 100%; height: auto; object-fit: cover; }

  .services-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

  .about__inner { display: flex; flex-direction: column; gap: 24px; }
  .about__visual, .about__text { width: 100%; }
  .about__photo-img { width: 100%; height: auto; object-fit: cover; border-radius: 12px; }

  .mobile-menu { width: 100%; padding: 90px 20px; }
  .mobile-link { font-size: 1.25rem; }

  .cursor-glow { display: none; }
  /* Prevent any element from exceeding viewport width */
  img, video, iframe { max-width: 100%; height: auto; }
  /* Ensure page never creates horizontal scroll on any device */
  html, body { width: 100%; overflow-x: hidden !important; }

  /* Make testimonial cards fit narrow screens */
  .testimonial-card { min-width: auto; max-width: 100%; padding: 18px; }

  /* Reduce large paddings that cause horizontal overflow */
  .stat { padding: 16px 12px; }

  /* Make about photo frame fluid instead of fixed pixels */
  .about__photo-bg { width: 100%; height: auto; min-height: 220px; }

  /* Ensure the photo frame preserves aspect ratio on small screens
     so the image has a definite height to fill (prevents 0px height) */
  .about__photo-bg {
    max-width: 340px;
    aspect-ratio: 340 / 420;
    height: auto;
  }

  /* Mobile: stack visual and make image larger, move availability pill below image */
  .about__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* allow the photo to scale up to most of the viewport while keeping aspect ratio */
  .about__photo-bg {
    max-width: min(420px, 92vw);
    width: 92vw;
  }

  .about__photo-img {
    border-radius: 12px;
  }

  /* Place the availability pill below the image and make it compact */
  .about__avail-pill {
    position: static !important;
    margin-top: 6px;
    transform: none !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-glow);
  }

  .about__avail-dot { width: 9px; height: 9px; }
}

/* Slight adjustments for medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { max-width: 920px; }
  .hero__title { font-size: 2.6rem; }
}