/* =========================================================
   Creative Corner — Responsive Styles (Mobile-First Additions)
   ========================================================= */

/* Large tablets / small desktops */
@media (max-width: 1180px) {
  .about-grid,
  .services-grid,
  .why-grid,
  .offers-grid,
  .testi-track {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablets */
@media (max-width: 900px) {
  :root { --nav-h: 72px; }

  .section { padding: 80px 0; }

  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    gap: 20px;
    padding: 30px 24px 40px;
    transform: translateY(-120%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0,0,0,.05);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateY(0); }
  .nav-menu ul {
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
  .nav-menu ul li { width: 100%; }
  .nav-link {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 1rem;
  }
  .nav-link:hover, .nav-link.active {
    background: linear-gradient(135deg, rgba(201,169,110,.1), rgba(244,198,211,.1));
  }
  .nav-cta { width: 100%; padding: 14px; }
  .nav-toggle { display: flex; }

  /* Hero */
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 22px;
  }

  /* Welcome */
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .welcome-media { min-height: 460px; }

  /* Contact / Booking */
  .booking-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .booking-info .section-title,
  .booking-info .section-lead { text-align: center; }
  .check-list { justify-content: center; }

  /* Masonry */
  .masonry { columns: 2; }

  /* Before After */
  .ba-grid { grid-template-columns: 1fr; }

  /* Team & Video */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .video-grid { grid-template-columns: 1fr; gap: 24px; }

  /* Featured offer no longer scaled */
  .offer-card.featured { transform: none; }
  .offer-card.featured:hover { transform: translateY(-10px); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* Mobile */
@media (max-width: 640px) {
  .container { padding: 0 18px; }

  .section { padding: 70px 0; }

  .brand-text { display: none; }

  /* Hero */
  .hero { min-height: 92vh; }
  .hero-content { padding: 40px 18px; }
  .hero-eyebrow { font-size: .82rem; letter-spacing: .3em; padding: 6px 16px; }
  .hero-buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 30px auto 0; }
  .hero-stats { grid-template-columns: 1fr 1fr; padding: 20px; gap: 16px; margin-top: 40px; }
  .hero-stats .stat h3 { font-size: 1.7rem; }

  /* Sections */
  .section-head { margin-bottom: 40px; }
  .section-title { font-size: 2rem; }
  .section-lead { font-size: .96rem; }

  /* Cards */
  .about-grid,
  .services-grid,
  .why-grid,
  .offers-grid,
  .testi-track {
    grid-template-columns: 1fr;
  }
  .team-grid { grid-template-columns: 1fr; }

  /* Welcome media */
  .welcome-media { min-height: 400px; }
  .media-card:nth-child(1) { width: 85%; height: 300px; }
  .media-card:nth-child(2) { width: 60%; height: 210px; }

  /* Masonry */
  .masonry { columns: 1; }
  .masonry-item img,
  .masonry-item.tall img,
  .masonry-item.wide img { height: 240px; }
  .masonry-item figcaption { transform: translateY(0); background: linear-gradient(180deg, transparent 40%, rgba(13,11,11,.85)); }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .booking-form, .contact-form, .contact-info { padding: 28px 22px; }

  /* FAQ */
  .faq-item summary { padding: 18px 20px; font-size: 1rem; gap: 14px; }
  .faq-item p { padding: 0 20px 22px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 34px; text-align: left; }
  .footer { padding-top: 60px; }

  /* Floating */
  .float-btn { width: 52px; height: 52px; right: 16px; font-size: 1.15rem; }
  .float-wa   { bottom: 16px; }
  .float-call { bottom: 78px; }
  .float-top  { bottom: 140px; }

  /* Contact actions */
  .contact-actions { flex-direction: column; }
  .contact-actions .btn { width: 100%; }
}

/* Extra small */
@media (max-width: 380px) {
  .hero-title { font-size: 2.2rem; }
  .hero-sub { letter-spacing: .12em; font-size: 1rem; }
  .btn { padding: 12px 22px; font-size: .9rem; }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 640px; }
}