/* ═══════════════════════════════════════════════════════════════
   Myhna Vistara | responsive.css
   Single source for ALL @media rules — load LAST after all other
   CSS files so source-order wins over equal-specificity base rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── MIN-WIDTH: 1200px (Desktop max-width container) ── */
@media (min-width: 1200px){

  /* LAYOUT — constrain all content sections to 1280px max */
  .nav-inner,
  .stats,
  .trust-bar,
  .overview-grid,
  .am-grid,
  .am-head,
  .am-foot,
  .plans-head,
  .plans-tabs,
  .plans-content,
  .plan-price-banner,
  .loc-top,
  .loc-map-banner,
  .loc-card,
  .loc-cta-inner,
  .faq-head,
  .faq-list,
  .footer-top,
  .footer-bottom{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ── MAX-WIDTH: 1280px (Large viewport compression) ── */
@media (max-width: 1280px){

  /* LAYOUT */
  .nav, .stats, .location,
  .overview, .amenities, .plans, .faq, .footer{ padding-left: 48px; padding-right: 48px; }
  .nav-links{ gap: 28px; }
  .hero-left{ padding: 0 48px; }
  .hero-form-card{ right: 48px; width: 340px; padding: 32px 28px 26px; }
  .hero-bottom-bar{ padding: 0 48px; height: 76px; }
  .hero-bottom-col{ padding: 0 32px; }
  .hero-addr, .hero-watch{ left: 48px; right: 48px; }
  .hero-watch{ left: auto; right: 48px; }
  .hero-addr{ right: auto; left: 48px; }
  .section-h, .overview-h, .am-head .section-h, .plans-h, .faq-h{ font-size: 52px; }
  .am-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-top{ grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col.contact{ display: none; }

}

/* ── MAX-WIDTH: 1024px (Tablet landscape) ── */
@media (max-width: 1024px){

  /* LAYOUT */
  .hero{ height: auto; min-height: 100vh; padding-bottom: 0; }
  .hero-left{ width: 100%; padding: 110px 32px 40px; }
  .hero-form-card{
    position: relative;
    right: auto; top: auto; transform: none;
    width: calc(100% - 48px);
    max-width: 480px;
    margin: 0 auto 120px;
    animation: heroFadeUpSm 1s ease 0.3s both;
  }
  .hero-bottom-bar{ padding: 0 24px; height: auto; flex-wrap: wrap; }
  .hero-bottom-col{ padding: 14px 16px; flex: 1 1 50%; border-left: 0; }
  .hero-bottom-col:nth-child(3){ display: none; }
  .hero-addr, .hero-watch, .scroll-cue{ display: none; }
  .lead-panel{ width: 100%; padding: 68px 28px 32px; }
  .stats{ grid-template-columns: repeat(5, 1fr); }
  .dist-grid{ grid-template-columns: repeat(2, 1fr); }
  .nav-links{ display:none; }
  .overview-grid, .plans-content, .faq-head{ grid-template-columns: 1fr; gap: 40px; }
  .overview-facts{ grid-template-columns: 1fr 1fr; }
  .am-grid{ grid-template-columns: repeat(3, 1fr); }
  .am-head{ flex-direction: column; align-items: flex-start; gap: 24px; }
  .plans-head{ flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-col.contact{ display: block; }

  /* HOME PAGE (overrides layout above for home-section classes) */
  .hero{ height: auto; min-height: 100vh; padding-bottom: 0; flex-direction: column; align-items: stretch; }
  .hero-left{ width: 100% !important; max-width: none !important; padding: 110px 32px 40px; }
  .hero-form-card{
    position: relative;
    right: auto; top: auto; transform: none;
    width: calc(100% - 48px);
    max-width: 480px;
    margin: 0 auto 120px;
    animation: heroFadeUpSm 1s ease 0.3s both;
  }
  .hero-bottom-bar{ padding: 0 24px; height: auto; flex-wrap: wrap; }
  .hero-bottom-col{ padding: 14px 16px; flex: 1 1 50%; border-left: 0; }
  .hero-bottom-col:nth-child(3){ display: none; }
  .hero-addr, .hero-watch, .scroll-cue{ display: none; }
  .stats{ grid-template-columns: repeat(5, 1fr); }
  .dist-grid{ grid-template-columns: repeat(2, 1fr); }
  .overview-grid, .plans-content, .faq-head{ grid-template-columns: 1fr; gap: 40px; }
  .overview-facts{ grid-template-columns: 1fr 1fr; }
  .am-grid{ grid-template-columns: repeat(3, 1fr); }
  .am-head{ flex-direction: column; align-items: flex-start; gap: 24px; }
  .plans-head{ flex-direction: column; align-items: flex-start; gap: 24px; }

}

/* ── MAX-WIDTH: 900px (Location map banner stack) ── */
@media (max-width: 900px){

  /* HOME PAGE — location map */
  .loc-map-banner{ grid-template-columns: 1fr; }
  .loc-map-banner .loc-map-half + .loc-map-half{ border-left: 0; border-top: 1px solid rgba(175,129,46,0.18); }

}

/* ── MAX-WIDTH: 768px (Tablet & large phone) ── */
@media (max-width: 768px){

  /* MISSING MOBILE SAFETY (Step 5) */
  html, body{ overflow-x: hidden; max-width: 100%; }

  /* LAYOUT — nav */
  .nav{ padding: 0 16px; height: 60px; }
  .nav-phone{ display: none; }
  .nav-right .cta-gold{ display: none; }
  .nav-burger{ display: block; }
  .nav-phone-mobile{ display: flex; }
  .nav-right{ gap: 10px; }
  .logo img{ height: 44px; }
  .logo-text .top{ font-size: 8px; }
  .logo-text .bottom{ font-size: 16px; }

  /* LAYOUT — hero */
  .hero{ padding-top: 60px; min-height: 0; }
  .hero-left{ padding: 60px 24px 32px; }
  .hero-h1{ font-size: 44px !important; line-height: 1.08; }
  .hero-rule{ margin: 20px 0; }
  .hero-sub{ font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; margin-bottom: 24px; }
  .trust-row{ gap: 8px; }
  .trust-pill{ padding: 8px 14px; font-size: 10px; letter-spacing: 0.08em; }
  .hero-cta{ flex-direction: column; gap: 10px; margin-top: 24px; align-items: stretch; }
  .hero-cta a,
  .hero-cta button,
  .hero-cta-primary,
  .hero-cta-secondary { width: 100%; max-width: 360px; min-width: 0; padding: 13px 22px; font-size: 12px; letter-spacing: 0.12em; }
  .hero-cta-note{ font-size: 13px; margin-top: 16px; }
  .hero-form-card{ padding: 28px 22px 24px; margin-bottom: 24px; max-width: none; width: calc(100% - 32px); }
  .hero-form-card .form-fields{ gap: 8px; }
  .hero-row-2{ grid-template-columns: 1fr; gap: 8px; }
  .hero-row-2 .field-ic input{ padding-left: 38px; }
  .hero-row-2 .field-ic > svg{ display: block; left: 14px; }
  .hero-bottom-bar{ padding: 0; flex-direction: column; border-top: 0; position: relative; }
  .hero-bottom-col{
    padding: 14px 24px !important;
    flex: 1 1 100% !important;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    text-align: left;
  }
  .hero-bottom-col:first-child{ border-top: 0; }
  .hero-bottom-col:nth-child(3){ display: flex !important; }
  .hero-bottom-col .lab{ font-size: 10px; margin-bottom: 4px; }
  .hero-bottom-col .val{ font-size: 16px !important; }

  /* LAYOUT — stats */
  .stats{
    grid-template-columns: 1fr 1fr;
    padding: 28px 20px;
    row-gap: 28px;
    column-gap: 18px;
  }
  .stat + .stat::before{ display: none; }
  .stat:last-child{ grid-column: 1 / -1; }
  .stat-value{ font-size: 36px !important; }
  .stat-label{ font-size: 10px; letter-spacing: 0.16em; margin-top: 6px; }

  /* LAYOUT — trust bar */
  .trust-bar{
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .tb-item{
    padding: 16px 18px;
    border-bottom: 1px solid rgba(10, 31, 68, 0.08);
  }
  .tb-item:nth-child(2){ border-left: 1px solid rgba(10, 31, 68, 0.08); }
  .tb-item:nth-child(3){ border-bottom: 0; border-left: 0; }
  .tb-item:nth-child(4){ border-bottom: 0; border-left: 1px solid rgba(10, 31, 68, 0.08); }
  .tb-stat{ font-size: 12px; white-space: normal; }
  .tb-sub{ font-size: 10.5px; white-space: normal; }
  .tb-ic{ width: 20px; height: 20px; flex: 0 0 20px; }
  .tb-live{
    width: 100%;
    align-self: stretch;
    justify-content: center;
    font-size: 10.5px;
    padding: 4px 10px;
    margin-top: 8px;
  }

  /* LAYOUT — shared section padding */
  .overview, .amenities, .plans, .location, .faq{ padding: 64px 24px !important; }
  .section-h{ font-size: 36px !important; line-height: 1.1; }
  .section-eyebrow{ font-size: 11px; gap: 12px; margin-bottom: 20px; }
  .section-eyebrow .rule{ width: 22px; }

  /* LAYOUT — overview */
  .overview-grid{ gap: 36px; }
  .overview-body{ font-size: 15px !important; line-height: 1.7; }
  .overview-quote{ font-size: 18px !important; padding-left: 16px; }
  .overview-facts{ grid-template-columns: 1fr; gap: 22px 20px; padding: 24px 0; }
  .fact-num{ font-size: 32px !important; }
  .fact-num .small{ font-size: 16px; }
  .fact-label{ font-size: 10px; margin-top: 8px; }
  .fact-desc{ font-size: 13px; margin-top: 6px; }

  /* LAYOUT — amenities */
  .am-grid{ grid-template-columns: 1fr 1fr; }
  .am-card{ min-height: 0; padding: 22px 18px; gap: 10px; }
  .am-card i{ font-size: 26px; }
  .am-card .name{ font-size: 17px !important; }
  .am-card .desc{ font-size: 13px; line-height: 1.55; }
  .am-card .num{ font-size: 10px; padding-top: 10px; }
  .am-sub{ font-size: 14px; }
  .am-foot{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .am-foot-left{ font-size: 18px !important; line-height: 1.4; }
  .am-foot-cta{ padding: 14px 22px; font-size: 10px; }

  /* LAYOUT — floor plans */
  .plans-tabs{ overflow-x: auto; flex-wrap: nowrap; }
  .plan-price-banner{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 22px 22px;
  }
  .plan-price-banner .pb-title{ font-size: 20px; }
  .plan-price-banner .pb-sub{ font-size: 13px; }
  .plan-price-banner .pb-cta{ width: 100%; }
  .plans-tab{ flex: 0 0 auto; padding: 16px 18px; min-width: 130px; }
  .plans-tab .name{ font-size: 18px !important; }
  .plans-tab .typ{ font-size: 9px; margin-top: 6px; }
  .plans-info .typology{ font-size: 32px !important; }
  .typo-blurb{ font-size: 14px; }
  .unit-row{ padding: 14px 0 12px; }
  .unit-row .typ-name, .unit-row .price{ font-size: 18px !important; }
  .unit-row .size{ font-size: 12px; }
  .plans-cta-row{ flex-direction: column; }
  .plans-image{ padding: 18px; }
  .plans-image .tag, .plans-image .compass{ font-size: 9px; padding: 7px 12px; }
  .plans-sub{ font-size: 14px; }

  /* LAYOUT — footer social */
  .footer-social .social-icons{ justify-content: center; }

  /* LAYOUT — location */
  .loc-top{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .loc-addr{ font-size: 14px; }
  .loc-maps{ padding: 12px 22px; font-size: 10px; }
  .loc-card{ padding: 24px 20px 22px; }
  .tabs{ overflow-x: auto; gap: 8px; }
  .tab{ flex: 0 0 auto; min-width: 100px; font-size: 12px; padding: 12px 14px; gap: 8px; }
  .tab svg{ width: 22px; height: 22px; }
  .dist-grid{ grid-template-columns: 1fr 1fr; row-gap: 28px; column-gap: 18px; }
  .dist-time{ font-size: 32px !important; }
  .dist-time .unit{ font-size: 11px; margin-left: 6px; }
  .dist-place{ font-size: 13px; }

  /* LAYOUT — faq */
  .faq-head{ gap: 24px; margin-bottom: 32px; }
  .faq-sub{ font-size: 14px; }
  .faq-item summary{ padding: 22px 0; font-size: 18px !important; gap: 16px; }
  .faq-item .plus{ width: 20px; height: 20px; flex: 0 0 20px; }
  .faq-answer{ font-size: 14px; padding: 0 0 24px; }

  /* LAYOUT — location CTA band */
  .loc-cta{ padding: 56px 20px; }
  .loc-cta-h{ font-size: 28px !important; }
  .loc-cta-sub{ font-size: 19px !important; }
  .loc-cta-body{ font-size: 14px; }
  .loc-cta-btn{ width: 100%; max-width: 360px; min-width: 0; padding: 13px 22px; font-size: 12px; }
  .loc-cta-meta{ font-size: 11px; gap: 6px 10px; }
  .loc-cta-eyebrow::before, .loc-cta-eyebrow::after{ width: 16px; }

  /* LAYOUT — footer */
  .footer{ padding: 60px 24px 24px; text-align: center; }
  .footer-top{ grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
  .footer-brand .logo{ justify-content: center; }
  .footer-tagline{ font-size: 15px; margin-left: auto; margin-right: auto; }
  .footer-rera{ padding: 12px 14px; gap: 10px; justify-content: center; }
  .footer-rera .val{ font-size: 12px; }
  .footer-col h4{ margin: 0 0 16px; }
  .footer-col ul{ gap: 10px; align-items: center; }
  .footer-col a, .footer-col p{ font-size: 13px; }
  .footer-bottom{ flex-direction: column; gap: 20px; text-align: center; align-items: center; }
  .footer-disclaim{ font-size: 11px; }
  .footer-copy{ align-self: center; font-size: 10px; }

  /* LAYOUT — lead panel */
  .lead-panel{ padding: 56px 22px 24px; }
  .form-title{ font-size: 26px; }
  .field input, .field .country-code{ font-size: 13px; }

  /* LAYOUT — sticky bottom bar */
  .sticky-bar{ height: 60px; }
  .sticky-bar a,
  .sticky-bar button{
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
  }
  .sticky-bar .ic{ width: 18px; height: 18px; flex: 0 0 18px; }
  .sticky-bar .lbl{ align-items: center; text-align: center; }
  .sticky-bar .lbl .title{ font-size: 10px; letter-spacing: 0.08em; }
  .sticky-bar .lbl .sub{ display: none; }
  .sticky-bar .sb-book{
    height: 68px;
    margin-top: -8px;
    min-width: 0;
    flex: 1.1 0 0;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: 0.12em;
    border-radius: 8px 8px 0 0;
    gap: 6px;
  }
  .sticky-bar .sb-book .arrow{ display: none; }
  body.sticky-active .footer{ padding-bottom: 80px; }

  /* HOME PAGE — hero (overrides layout above) */
  .hero{ padding-top: 60px; min-height: 0; }
  .hero-left{ padding: 60px 24px 32px; }
  .hero-h1{ font-size: 44px !important; line-height: 1.08; }
  .hero-rule{ margin: 20px 0; }
  .hero-sub{ font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; margin-bottom: 24px; }
  .trust-row{ gap: 8px; }
  .trust-pill{ padding: 8px 14px; font-size: 10px; letter-spacing: 0.08em; }
  .hero-cta{ flex-direction: column; gap: 10px; margin-top: 24px; align-items: stretch; }
  .hero-cta a,
  .hero-cta button,
  .hero-cta-primary,
  .hero-cta-secondary { width: 100%; max-width: 360px; min-width: 0; padding: 13px 22px; font-size: 12px; letter-spacing: 0.12em; }
  .hero-cta-note{ font-size: 13px; margin-top: 16px; }
  .hero-form-card{ padding: 28px 22px 24px; margin-bottom: 24px; max-width: none; width: calc(100% - 32px); }
  .hero-form-card .form-fields{ gap: 8px; }
  .hero-row-2{ grid-template-columns: 1fr; gap: 8px; }
  .hero-row-2 .field-ic input{ padding-left: 38px; }
  .hero-row-2 .field-ic > svg{ display: block; left: 14px; }
  .hero-bottom-bar{ padding: 0; flex-direction: column; border-top: 0; position: relative; }
  .hero-bottom-col{
    padding: 14px 24px !important;
    flex: 1 1 100% !important;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    text-align: left;
  }
  .hero-bottom-col:first-child{ border-top: 0; }
  .hero-bottom-col:nth-child(3){ display: flex !important; }
  .hero-bottom-col .lab{ font-size: 10px; margin-bottom: 4px; }
  .hero-bottom-col .val{ font-size: 16px !important; }

  /* HOME PAGE — stats */
  .stats{
    grid-template-columns: 1fr 1fr;
    padding: 28px 20px;
    row-gap: 28px;
    column-gap: 18px;
  }
  .stat + .stat::before{ display: none; }
  .stat:last-child{ grid-column: 1 / -1; }
  .stat-value{ font-size: 36px !important; }
  .stat-label{ font-size: 10px; letter-spacing: 0.16em; margin-top: 6px; }

  /* HOME PAGE — trust bar */
  .trust-bar{
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .tb-item{
    padding: 16px 18px;
    border-bottom: 1px solid rgba(10,31,68,0.08);
  }
  .tb-item:nth-child(2){ border-left: 1px solid rgba(10,31,68,0.08); }
  .tb-item:nth-child(3){ border-bottom: 0; border-left: 0; }
  .tb-item:nth-child(4){ border-bottom: 0; border-left: 1px solid rgba(10,31,68,0.08); }
  .tb-stat{ font-size: 12px; white-space: normal; }
  .tb-sub{ font-size: 10.5px; white-space: normal; }
  .tb-ic{ width: 20px; height: 20px; flex: 0 0 20px; }
  .tb-live{
    width: 100%;
    align-self: stretch;
    justify-content: center;
    font-size: 10.5px;
    padding: 4px 10px;
    margin-top: 8px;
  }

  /* HOME PAGE — shared section padding */
  .overview, .amenities, .plans, .location, .faq{ padding: 64px 24px !important; }
  .section-h{ font-size: 36px !important; line-height: 1.1; }
  .section-eyebrow{ font-size: 11px; gap: 12px; margin-bottom: 20px; }
  .section-eyebrow .rule{ width: 22px; }

  /* HOME PAGE — overview */
  .overview-grid{ gap: 36px; }
  .overview-body{ font-size: 15px !important; line-height: 1.7; }
  .overview-quote{ font-size: 18px !important; padding-left: 16px; }
  .overview-facts{ grid-template-columns: 1fr; gap: 22px 20px; padding: 24px 0; }
  .fact-num{ font-size: 32px !important; }
  .fact-num .small{ font-size: 16px; }
  .fact-label{ font-size: 10px; margin-top: 8px; }
  .fact-desc{ font-size: 13px; margin-top: 6px; }

  /* HOME PAGE — amenities */
  .am-grid{ grid-template-columns: 1fr 1fr; }
  .am-card{ min-height: 0; padding: 22px 18px; gap: 10px; }
  .am-card i{ font-size: 26px; }
  .am-card .name{ font-size: 17px !important; }
  .am-card .desc{ font-size: 13px; line-height: 1.55; }
  .am-card .num{ font-size: 10px; padding-top: 10px; }
  .am-sub{ font-size: 14px; }
  .am-foot{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .am-foot-left{ font-size: 18px !important; line-height: 1.4; }
  .am-foot-cta{ padding: 14px 22px; font-size: 10px; }

  /* HOME PAGE — floor plans */
  .plans-tabs{ overflow-x: auto; flex-wrap: nowrap; }
  .plan-price-banner{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 22px 22px;
  }
  .plan-price-banner .pb-title{ font-size: 20px; }
  .plan-price-banner .pb-sub{ font-size: 13px; }
  .plan-price-banner .pb-cta{ width: 100%; }
  .plans-tab{ flex: 0 0 auto; padding: 16px 18px; min-width: 130px; }
  .plans-tab .name{ font-size: 18px !important; }
  .plans-tab .typ{ font-size: 9px; margin-top: 6px; }
  .plans-info .typology{ font-size: 32px !important; }
  .typo-blurb{ font-size: 14px; }
  .unit-row{ padding: 14px 0 12px; }
  .unit-row .typ-name, .unit-row .price{ font-size: 18px !important; }
  .unit-row .size{ font-size: 12px; }
  .plans-cta-row{ flex-direction: column; }
  .plans-image{ padding: 18px; }
  .plans-image .tag, .plans-image .compass{ font-size: 9px; padding: 7px 12px; }
  .plans-sub{ font-size: 14px; }

  /* HOME PAGE — footer social */
  .footer-social .social-icons{ justify-content: center; }

  /* HOME PAGE — location */
  .loc-top{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .loc-addr{ font-size: 14px; }
  .loc-maps{ padding: 12px 22px; font-size: 10px; }
  .loc-card{ padding: 24px 20px 22px; }
  .tabs{ overflow-x: auto; gap: 8px; }
  .tab{ flex: 0 0 auto; min-width: 100px; font-size: 12px; padding: 12px 14px; gap: 8px; }
  .tab svg{ width: 22px; height: 22px; }
  .dist-grid{ grid-template-columns: 1fr 1fr; row-gap: 28px; column-gap: 18px; }
  .dist-time{ font-size: 32px !important; }
  .dist-time .unit{ font-size: 11px; margin-left: 6px; }
  .dist-place{ font-size: 13px; }

  /* HOME PAGE — faq */
  .faq-head{ gap: 24px; margin-bottom: 32px; }
  .faq-sub{ font-size: 14px; }
  .faq-item summary{ padding: 22px 0; font-size: 18px !important; gap: 16px; }
  .faq-item .plus{ width: 20px; height: 20px; flex: 0 0 20px; }
  .faq-answer{ font-size: 14px; padding: 0 0 24px; }

  /* HOME PAGE — location CTA band */
  .loc-cta{ padding: 56px 20px; }
  .loc-cta-h{ font-size: 28px !important; }
  .loc-cta-sub{ font-size: 19px !important; }
  .loc-cta-body{ font-size: 14px; }
  .loc-cta-btn{ width: 100%; max-width: 360px; min-width: 0; padding: 13px 22px; font-size: 12px; }
  .loc-cta-meta{ font-size: 11px; gap: 6px 10px; }
  .loc-cta-eyebrow::before, .loc-cta-eyebrow::after{ width: 16px; }

}

/* ── MAX-WIDTH: 767px (Popup slide-up + floor plan overlay) ── */
@media(max-width:767px){

  /* COMPONENTS — timed popup */
  .popup-overlay{ align-items:flex-end; padding:0; }
  .popup-modal{
    width:100%; max-width:100%; border-radius:16px 16px 0 0;
    padding:28px 20px 24px;
    animation:popupSlideUp 300ms ease-out forwards;
  }
  .popup-overlay.popup-closing .popup-modal{ animation:popupSlideDown 200ms ease-in forwards; }

  /* FLOOR PLAN — overlay mobile adjustments */
  .floor-plan-img{ filter: blur(10px); }
  .floor-plan-lock-overlay .lock-title{ font-size: 18px; }
  .floor-plan-lock-overlay .lock-sub{ font-size: 11px; max-width: 160px; }
  .floor-plan-lock-overlay .btn-unlock{ font-size: 12px; padding: 10px 20px; min-height: 44px; }

}

/* ── MAX-WIDTH: 480px (Small phone) ── */
@media (max-width: 480px){

  /* LAYOUT */
  .nav{ padding: 0 16px; }
  .nav-right{ gap: 12px; }
  .nav-right .cta-gold{ padding: 9px 14px; font-size: 9.5px; }

  .hero-left{ padding: 44px 20px 28px; }
  .hero-h1{ font-size: 38px !important; }
  .hero-sub{ font-size: 11px; }
  .trust-pill{ padding: 7px 12px; font-size: 9.5px; }

  .overview, .amenities, .plans, .location, .faq{ padding: 56px 20px !important; }
  .section-h{ font-size: 30px !important; }

  .overview-facts{ grid-template-columns: 1fr; gap: 20px; }
  .fact-num{ font-size: 30px !important; }

  .am-grid{ grid-template-columns: 1fr; }
  .am-card{ padding: 22px 20px; }

  .stats{ grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 24px 18px; }
  .stat-value{ font-size: 30px !important; }

  .plans-info .typology{ font-size: 26px !important; }
  .plans-image{ padding: 14px; }

  .dist-grid{ grid-template-columns: 1fr; row-gap: 22px; }
  .dist-time{ font-size: 28px !important; }

  .faq-item summary{ font-size: 16px !important; padding: 18px 0; }
  .faq-answer{ font-size: 13px; }

  .footer{ padding: 48px 20px 20px; }

  /* HOME PAGE (overrides layout above) */
  .hero-left{ padding: 44px 20px 28px; }
  .hero-h1{ font-size: 38px !important; }
  .hero-sub{ font-size: 11px; }
  .trust-pill{ padding: 7px 12px; font-size: 9.5px; }

  .overview, .amenities, .plans, .location, .faq{ padding: 56px 20px !important; }
  .section-h{ font-size: 30px !important; }

  .overview-facts{ grid-template-columns: 1fr; gap: 20px; }
  .fact-num{ font-size: 30px !important; }

  .am-grid{ grid-template-columns: 1fr; }
  .am-card{ padding: 22px 20px; }

  .stats{ grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 24px 18px; }
  .stat-value{ font-size: 30px !important; }

  .plans-info .typology{ font-size: 26px !important; }
  .plans-image{ padding: 14px; }

  .dist-grid{ grid-template-columns: 1fr; row-gap: 22px; }
  .dist-time{ font-size: 28px !important; }

  .faq-item summary{ font-size: 16px !important; padding: 18px 0; }
  .faq-answer{ font-size: 13px; }

  /* MISSING MOBILE SAFETY (Step 5) */
  .row-2{ grid-template-columns: 1fr; }

}

/* ── Locality Pages ─────────────────────────────────── */

/* ─ 1280px: lateral padding on locality-specific elements ─ */
@media (max-width: 1280px) {
  .hero-locality-content                  { padding: 60px 48px 24px 48px; }
  .hero-locality-ctas                     { padding: 0 48px 48px 48px; }
  .hero-locality-form                     { padding: 60px 48px; }
  .location-cta-band                      { padding-left: 48px; padding-right: 48px; }
}

/* ─ 1024px: single-column hero, stack form below content ─ */
@media (max-width: 1024px) {
  .hero-locality                          { grid-template-columns: 1fr; grid-template-rows: auto; }
  .hero-locality-content                  { grid-column: 1; grid-row: auto; order: 1; padding: 100px 32px 24px; }
  .hero-locality-form                     { grid-column: 1; grid-row: auto; order: 2;
                                            padding: 32px; justify-content: flex-start;
                                            background: rgba(10,20,50,0.80); }
  .hero-locality-form-card                { max-width: none; }
  .hero-locality-ctas                     { grid-column: 1; grid-row: auto; order: 3; padding: 24px 32px 56px; }
  .location-cta-band                      { padding: 72px 32px; }
  .distance-grid                          { grid-template-columns: repeat(2, 1fr); }
}

/* ─ 768px: mobile ─ */
@media (max-width: 768px) {
  .hero-locality-content                  { padding: 80px 24px 20px; }
  .hero-locality-form                     { padding: 24px; }
  .hero-locality-form-card                { padding: 28px 22px 24px; }
  .hero-locality-ctas                     { padding: 20px 24px 48px; }
  .locality-distance-badge                { padding: 8px 16px; }
  .distance-number                        { font-size: 26px; }
  .location-cta-band                      { padding: 64px 24px; }
  .faq-question--static                   { padding: 22px 0; gap: 16px; }

  /* Full-width CTA button at mobile */
  .location-cta-band .hero-cta-primary    {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ─ 480px: small phone ─ */
@media (max-width: 480px) {
  .hero-locality-content                  { padding: 76px 20px 20px; }
  .location-cta-band                      { padding: 56px 20px; }
  .distance-grid                          { grid-template-columns: 1fr; }
  .faq-question--static                   { font-size: 17px; padding: 18px 0; }
}

/* ── Price List Page ──────────────────────────────── */

@media (max-width: 1280px) {
  .pl-hero                { padding: 110px 48px 72px; gap: 48px; grid-template-columns: 1fr 400px; }
  .pl-price-bar           { padding: 0 48px; }
  .pl-config-section      { padding: 80px 48px; }
  .pl-included-section    { padding: 80px 48px; }
  .pl-payment-section     { padding: 80px 48px; }
  .pl-faq-section         { padding: 80px 48px; }
}

@media (max-width: 1024px) {
  .pl-hero                { grid-template-columns: 1fr; padding: 100px 32px 64px; gap: 40px; }
  .pl-form-card           { max-width: 560px; }
  .pl-price-bar           { padding: 0 32px; }
  .pl-config-section      { padding: 72px 32px; }
  .pl-included-section    { padding: 72px 32px; }
  .pl-inc-grid            { grid-template-columns: repeat(2, 1fr); }
  .pl-payment-section     { padding: 72px 32px; }
  .pl-payment-grid        { grid-template-columns: 1fr; }
  .pl-faq-section         { padding: 72px 32px; }
}

@media (max-width: 768px) {
  .pl-hero                { padding: 88px 24px 56px; gap: 32px; }
  .pl-hero .hero-h1       { font-size: clamp(28px, 7vw, 40px); }
  .pl-form-card           { max-width: none; padding: 28px 22px 24px; }
  .pl-price-bar           { grid-template-columns: 1fr; padding: 0 24px; }
  .pl-price-col + .pl-price-col::before { display: none; }
  .pl-price-col           { padding: 28px 20px; border-top: 1px solid rgba(210,171,103,0.15); }
  .pl-config-section      { padding: 64px 24px; }
  .pl-included-section    { padding: 64px 24px; }
  .pl-inc-grid            { grid-template-columns: 1fr; }
  .pl-payment-section     { padding: 64px 24px; }
  .pl-faq-section         { padding: 64px 24px; }
}

@media (max-width: 480px) {
  .pl-hero                { padding: 80px 20px 48px; }
  .pl-config-section      { padding: 56px 20px; }
  .pl-included-section    { padding: 56px 20px; }
  .pl-payment-section     { padding: 56px 20px; }
  .pl-faq-section         { padding: 56px 20px; }
  table.pl-table th,
  table.pl-table td       { padding: 14px 12px; font-size: 13px; }
}

/* ── PRINT ── */
@media print{
  .sticky-bar,
  .lead-panel,
  .lead-tab,
  .lead-backdrop,
  .popup-overlay,
  nav{ display: none !important; }
}