/* ============================================================
   LEMON TV — Responsive Breakpoints
   ============================================================ */

/* Large desktops already covered by fluid clamp() */

/* ---------- 1440px and below ---------- */
@media (max-width: 1440px) {
  .hero-floating-labels {
    right: 2%;
  }
}

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
  .service-explorer {
    grid-template-columns: 280px 1fr;
  }

  .service-panels {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-grid .why-item:nth-child(n+7) {
    /* keep layout clean */
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .portfolio-item.wide {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  .portfolio-item.tall {
    grid-row: span 1;
    aspect-ratio: 4/3;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Tablet 1024px ---------- */
@media (max-width: 1024px) {
  :root {
    --nav-height: 70px;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .navbar {
    top: 0.75rem;
    width: calc(100% - 1.5rem);
  }

  .hero-floating-labels,
  .hero-circular-text {
    display: none;
  }

  .hero-camera {
    width: 80vw;
    height: 80vw;
    right: -20%;
    opacity: 0.1;
  }

  .concept-grid {
    grid-template-columns: 1fr;
  }

  .concept-card {
    min-height: 220px;
  }

  .service-explorer {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .service-cats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    order: 1;
  }

  .service-detail {
    min-height: auto;
    order: 2;
    scroll-margin-top: 96px;
  }

  .service-detail.is-focus {
    box-shadow: 0 0 0 1px rgba(249, 206, 3, 0.45), 0 16px 40px rgba(0, 0, 0, 0.35);
  }

  .hero {
    padding-top: calc(var(--nav-height) + 1.25rem);
  }

  .page-hero {
    padding-top: calc(var(--nav-height) + 1rem);
  }

  #services,
  .services-showcase {
    scroll-margin-top: 96px;
  }

  .section-header h2,
  .display-md,
  .hero-headline {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impact-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-info-card {
    position: static;
  }

  .about-story {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .vision-mission {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .portfolio-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Tablet 768px ---------- */
@media (max-height: 800px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + 1.5rem);
    padding-bottom: 4rem;
  }

  .hero-headline.display-xl {
    font-size: clamp(2.5rem, 10vw, 4.5rem);
  }

  .hero-scroll {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 15px;
  }

  .hero {
    min-height: auto;
    padding-bottom: 3.5rem;
  }

  .hero-actions .btn {
    justify-content: center;
  }

  .service-cats {
    grid-template-columns: 1fr;
  }

  .service-list-grid {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .service-panels {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .service-checkboxes {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
  }

  .page-hero {
    min-height: auto;
    padding-bottom: 1.25rem;
  }

  .ph-grid {
    gap: 1.25rem;
  }

  .mobile-menu nav a {
    font-size: 1rem;
  }

  .navbar-inner {
    min-height: 56px;
  }

  .modal {
    padding: 1.75rem;
  }

  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 46px;
    height: 46px;
  }

  .cookie-notice {
    left: 1rem;
    right: 1rem;
    max-width: none;
    bottom: 1rem;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card {
    padding: 1.75rem;
  }
}

/* ---------- Mobile 430px ---------- */
@media (max-width: 430px) {
  .navbar-inner {
    padding: 0.5rem 0.75rem 0.5rem 1rem;
  }

  .nav-logo img {
    height: 36px;
  }

  .footer-statement {
    margin-bottom: 2.5rem;
  }

  .footer-statement .btn {
    width: 100%;
    max-width: 280px;
  }

  .footer-social {
    flex-wrap: wrap;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-masonry {
    grid-template-columns: 1fr;
  }

  .industries-grid {
    grid-template-columns: 1fr;
  }

  .display-xl {
    font-size: clamp(2.75rem, 14vw, 3.5rem);
  }

  .preloader-logo {
    width: min(220px, 70vw);
  }

  .contact-form,
  .contact-info-card,
  .build-project {
    padding: 1.5rem;
  }

  .section-header {
    margin-bottom: 15px;
  }

  .portfolio-filters {
    gap: 0.4rem;
  }

  .filter-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.7rem;
  }

  .hg-card {
    height: 220px;
  }
}

/* ---------- Small mobile 375 / 360 ---------- */
@media (max-width: 768px) {
  :root {
    --page-gutter: 5vw;
  }

  .container,
  .page-shell,
  .footer .container,
  .page-hero .container,
  .hero .container,
  .navbar {
    width: 90vw !important;
    max-width: 90vw !important;
  }
}

@media (max-width: 375px) {
  :root {
    --page-gutter: 4vw;
  }

  .container,
  .navbar {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  .btn {
    padding: 0.9rem 1.4rem;
    font-size: 0.8rem;
  }

  .faq-question {
    font-size: 0.95rem;
  }
}

/* Prevent horizontal overflow on all viewports */
html,
body,
.page-wrapper {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.hero,
.section,
.footer,
.marquee-section,
.brand-intro,
.services-showcase,
.process-section,
#work {
  max-width: 100%;
}

.container {
  overflow-x: clip;
  /* side space enforced in fixes.css as 80vw / 90vw mobile */
}

/* Process / gallery: keep internal side-scroll only */
.process-track-wrap,
.horizontal-gallery {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .service-explorer {
    grid-template-columns: 1fr;
  }

  .display-md,
  .display-lg,
  .display-xl {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}