/* ============================================
   Responsive — tablet + mobile breakpoints
   ============================================ */

@media (max-width: 1024px) {
  .estimator-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .estimator-copy { position: static; }
  .trust-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .desk-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .postinstall-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-main { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* Footer brand centers once the columns stack */
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;   /* center the shrink-wrapped group in the stacked layout */
  }
  .footer-logo-img { display: block; margin: 0 auto; }
  .footer-tagline { text-align: center; margin-left: 0; margin-right: 0; }
  .footer-socials { justify-content: center; }
}

@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: inline-block; }

  /* Hero */
  .hero { min-height: 100vh; }
  .hero-content { padding-top: 148px; }
  .hero-headline { font-size: clamp(34px, 8vw, 48px); max-width: 100%; }
  .hero-sub { font-size: 16px; max-width: 100%; }

  /* Hero CTA — allow text wrap on long labels */
  .hero-ctas .btn { white-space: normal; text-align: center; }

  /* Hero slider chrome on mobile */
  .hero-dots { bottom: 28px; }
  .scroll-indicator { bottom: 26px; }
  .scroll-indicator span { display: none; }
  /* Trust line duplicates the logo marquee below — drop it on mobile to lighten the hero */
  .hero-trust { display: none; }

  /* Estimator */
  .wall-widget {
    padding: var(--sp-4);
    overflow: hidden; /* contain scroll-rod knob pseudoelements */
  }
  .slider-group { grid-template-columns: 90px 1fr 60px; }
  .receipts-container { grid-template-columns: 1fr; }
  .receipt-generic { transform: none; opacity: 1; filter: none; }
  .receipt-stack { transform: none; }

  /* Custom size modal — stack inputs vertically */
  .modal-inputs { grid-template-columns: 1fr; }

  /* CTA section — reduce excessive vertical padding */
  .cta-section { padding: var(--sp-10) 0; }

  /* Rented / Triptych section — reduce padding when stacked */
  .rented-content { padding: 48px var(--gutter); }

  /* Work / stack */
  .work-header { padding: var(--sp-8) var(--gutter) var(--sp-4); }
  .work-statement { font-size: 24px; }

  /* Marquee — smaller logos so they read as a tasteful strip, not giant marks */
  .marquee-logo { height: 30px; }

  /* Brochure viewer — mobile */
  .catalogue-close { top: 12px; right: 16px; }
  .brochure-slide img { max-height: 65vh; }
  .brochure-nav { width: 44px; height: 44px; font-size: 16px; }

  /* Testimonials */
  .testimonial-card { flex: 0 0 88%; }

  /* Triptych — horizontal scroll on mobile;
     overflow-x: hidden on parent prevents page-level horizontal scroll */
  .rented-section { overflow-x: hidden; }
  .triptych-container {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .triptych-container::-webkit-scrollbar { display: none; }
  .triptych-img {
    width: 280vw;
    clip-path: none;
    scroll-snap-align: start;
  }
  .triptych-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    background: var(--cream-dark);
  }
  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.3s;
    display: inline-block;
  }
  .dot.active { background: var(--burgundy); }

  /* WhatsApp phone */
  .phone-mockup { width: 280px; }
  .phone-screen { height: 540px; }

  /* CTA */
  .cta-cards { grid-template-columns: 1fr; max-width: 400px; }
  .cta-contact { flex-direction: column; gap: var(--sp-1); }

  /* Footer copyright bar — stack on mobile */
  .footer-copyright-inner { flex-direction: column; align-items: center; gap: var(--sp-1); }

  /* Footer — single column, centered to match the brand block */
  .footer-nav { grid-template-columns: 1fr; text-align: center; gap: var(--sp-6); }
  .footer-col { align-items: center; }
  .footer-contact-col .footer-contact-link { justify-content: center; }
  .footer-contact { flex-direction: column; gap: var(--sp-1); align-items: center; }
}

@media (min-width: 769px) {
  .triptych-dots { display: none; }
}

@media (max-width: 480px) {
  /* Hero */
  .hero-headline { font-size: clamp(28px, 9vw, 40px); }
  .hero-sub { font-size: 15px; }

  /* Stack section */
  .stack-caption h3 { font-size: 22px; }
  .work-statement { font-size: 20px; }

  /* Chosen section — smaller numeral */
  .chosen-num { font-size: 28px; }

  /* Stakeholder tabs */
  .stakeholder-tabs { flex-wrap: wrap; gap: 0; }
  .tab-btn { padding: 10px 16px; font-size: 14px; }

  /* Receipt */
  .receipt { padding: 20px 16px 32px; font-size: 12px; }

  /* Sarika / founder section */
  .sarika-statement p { font-size: 17px; }

  /* Testimonials — decorative quote mark */
  .testimonial-quote { font-size: 40px; }

  /* Catalogue download button */
  .catalogue-dl-hero {
    padding: 14px 20px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }

  /* Rented section italic headline */
  .rented-statement { font-size: 20px; }

  /* Lighting section — tighter padding */
  .lighting { padding: 48px 0; }
  .lighting__inner { gap: 24px; }

  /* Phone mockup — fit small screens */
  .phone-mockup { width: 260px; }
  .phone-screen { height: 460px; }
}

/* Tiny phones (< 360px) — mobile nav font */
@media (max-width: 360px) {
  .mobile-menu a { font-size: 28px; }
}

/* Reduced motion — disable scroll receipt unfurl animation */
@media (prefers-reduced-motion: reduce) {
  .scroll-paper.is-active {
    animation: none;
    clip-path: inset(0 0 0% 0);
  }
  .scroll-receipt-wrap.is-shown {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* Hero slider: no crossfade or copy motion */
  .hero-slide { transition: none; }
  .hero-label, .hero-headline, .hero-sub { transition: none; }
  .hero-content.is-swapping .hero-label,
  .hero-content.is-swapping .hero-headline,
  .hero-content.is-swapping .hero-sub { opacity: 1; transform: none; }
}