/* Mobile refinement layer: preserves the desktop design while fixing the drawer and small-screen rhythm. */
@media (max-width: 900px) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
  body.nav-open { overflow: hidden; touch-action: none; }

  .nav, .nav.is-scrolled {
    height: 76px;
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
    will-change: auto;
    isolation: auto;
  }
  .nav .brand { z-index: 52; margin-left: -5px; padding: 4px 5px; }
  .nav .brand img, .nav.is-scrolled .brand img { width: 132px; height: 62px; }
  .nav .menu {
    z-index: 52;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin: 0;
    background: rgba(8, 11, 9, .34);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .nav .nav-links {
    position: fixed;
    z-index: 50;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    padding: max(112px, calc(env(safe-area-inset-top) + 92px)) 7vw max(34px, env(safe-area-inset-bottom));
    background: radial-gradient(circle at 85% 8%, rgba(199,163,107,.18), transparent 32%), rgba(9,12,10,.97);
  }
  .nav-links > a:not(.nav-cta) { flex: 0 0 auto; padding: 13px 0 !important; font-size: clamp(34px, 10.5vw, 54px); line-height: 1.02; }
  .nav-links .nav-cta { width: 100%; min-height: 52px; margin-top: 24px; justify-content: space-between; }
  .mobile-nav-meta { width: 100%; margin-top: 20px; }
  .mobile-nav-meta a { min-height: 42px; display: inline-flex; align-items: center; }

  .hero { height: 100svh; min-height: 680px; max-height: 940px; }
  .hero-content { top: 44%; left: 5vw; right: 5vw; width: auto; padding: clamp(24px, 7vw, 30px) clamp(20px, 6vw, 26px); }
  .hero-content h1 { margin: 18px 0; font-size: clamp(40px, 11.4vw, 58px); line-height: .98; }
  .hero-content .hero-copy { font-size: 14px; line-height: 1.65; }
  .hero-content .round-link { left: 7vw; bottom: -132px; width: 104px; height: 104px; }
  .premium-scroll { display: none; }
  .hero-playback { right: 7vw; bottom: 72px; }
  .hero-story-meta { right: 7vw; bottom: 31px; }

  .section { padding: clamp(72px, 18vw, 96px) 6vw; }
  .intro-body { margin-top: 24px; }
  .intro h2, .section-head h2, .services h2, .contact h2 { margin: 18px 0 30px; font-size: clamp(42px, 12vw, 60px); line-height: 1; }
  .intro-columns { font-size: 14px; line-height: 1.75; }
  .stats { gap: 0; margin-top: 42px; padding-top: 0; border-top: 0; }
  .stats > div { min-height: 118px; padding: 20px 12px 18px 0; border-top: 1px solid #d5d0c4; }
  .stats strong { font-size: 38px; }
  .stats span { display: block; max-width: 120px; font-size: 9px; line-height: 1.5; }

  .section-head { gap: 24px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 34px -6vw 22px; padding: 0 6vw 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: 0 0 auto; min-height: 40px; scroll-snap-align: start; }
  .project-grid { gap: 12px; }
  .project-card, .project-card.wide { height: min(116vw, 440px); border-radius: 2px; }
  .project-info { left: 20px; bottom: 21px; right: 18px; }
  .project-info strong { font-size: 24px; }
  .project-arrow { opacity: 1; top: 18px; right: 18px; transform: none; }

  .services-heading { margin-top: 28px; }
  .service { grid-template-columns: 34px 1fr 34px; padding: 24px 0; }
  .service h3 { font-size: clamp(24px, 7vw, 32px); }
  .service p { margin-top: 12px; padding-right: 8px; }
  .quote { height: min(140vw, 620px); padding-inline: 7vw; }
  .quote blockquote { font-size: clamp(36px, 10vw, 50px); }

  .contact.section { padding: 78px 6vw 84px; }
  .contact .contact-grid { gap: 42px; margin-top: 46px; }
  .contact-hub { margin-top: 34px; }
  .contact-card { min-height: 104px; }
  .contact #enquire { width: 100%; padding: 25px 18px; }
  .contact #enquire input, .contact #enquire select, .contact #enquire textarea { min-height: 48px; font-size: 16px; }
  .contact #enquire .submit { min-height: 54px; }
  .toast-region { top: 88px; right: 16px; left: 16px; width: auto; }

  footer { padding: 58px 6vw max(28px, env(safe-area-inset-bottom)); }
  .footer-top { gap: 40px; padding-bottom: 42px; }
  .footer-brand img { width: 170px; }
  .footer-bottom { gap: 15px; line-height: 1.6; }
  .whatsapp { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 52px; height: 52px; }
}

@media (max-width: 380px) {
  .nav-links > a:not(.nav-cta) { font-size: 32px; }
  .hero-content { top: 43%; padding: 22px 18px; }
  .hero-content h1 { font-size: 39px; }
  .hero-content .hero-copy { font-size: 13px; }
  .section { padding-inline: 20px; }
  .filters { margin-inline: -20px; padding-inline: 20px; }
  .contact.section { padding-inline: 20px; }
}