/* =====================================================================
   SP (mobile) layout — shared components, max-width: 767px
   ===================================================================== */
@media (max-width: 767px) {

  :root {
    --gutter: 20px;
    --section-py-top: 56px;
    --section-py-bottom: 96px;
    --wave-h: 64px;
  }

  .wave-divider--back { top: -68px; }
  .wave-divider--front { top: -60px; }

  /* ===== Header / nav → hamburger ===== */
  .site-header__inner { height: 64px; }
  .site-nav { display: none; }
  .brand-mark__sub { display: none; }
  .brand-mark__badge { width: 38px; height: 38px; }
  .brand-mark__glyph { width: 17px; }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; padding: 0; margin-left: 12px;
  }
  .hamburger__box { position: relative; width: 22px; height: 16px; }
  .hamburger__line {
    position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .25s var(--ease-out), opacity .25s var(--ease-out), top .25s var(--ease-out);
  }
  .hamburger__line:nth-child(1) { top: 0; }
  .hamburger__line:nth-child(2) { top: 7px; }
  .hamburger__line:nth-child(3) { top: 14px; }
  .hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  .mobile-nav {
    position: fixed; inset: 64px 0 0 0; z-index: 79;
    background: var(--surface-night); color: #fff;
    padding: 8px 20px 40px; overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
  }
  .mobile-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
  .mobile-nav__list { display: flex; flex-direction: column; }
  .mobile-nav__link {
    display: block; padding: 16px 4px; font-size: 17px; font-weight: 500; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12); text-decoration: none;
  }
  .mobile-nav__group { border-bottom: 1px solid rgba(255,255,255,.12); }
  .mobile-nav__toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 4px; font-size: 17px; font-weight: 500; color: #fff;
    background: none; border: none; text-align: left; cursor: pointer;
  }
  .mobile-nav__toggle-caret { font-size: 20px; transition: transform .2s var(--ease-out); }
  .mobile-nav__toggle[aria-expanded="true"] .mobile-nav__toggle-caret { transform: rotate(180deg); }
  .mobile-nav__submenu { display: none; flex-direction: column; padding: 0 4px 14px 14px; }
  .mobile-nav__toggle[aria-expanded="true"] + .mobile-nav__submenu { display: flex; }
  .mobile-nav__submenu a { padding: 10px 0; font-size: 15.5px; color: var(--on-dark-2); text-decoration: none; }
  .mobile-nav__cta { display: block; text-align: center; width: 100%; margin-top: 24px; }

  body.nav-open { overflow: hidden; }

  /* ===== Hero ===== */
  .hero { height: 100vh; min-height: 560px; }
  .hero__inner { padding: 0 var(--gutter) 96px; }
  .hero__title { font-size: clamp(28px, 8.6vw, 36px); }
  .hero__lead { font-size: 15px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn { justify-content: center; }
  .hero__dots { top: 78px; right: 20px; bottom: auto; }
  .hero__glow { width: 320px; height: 320px; top: -100px; right: -100px; }

  /* ===== Pill banner ===== */
  .pill-banner__outer { margin-top: -28px; }
  .pill-banner__pill { flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
  .pill-banner__left { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pill-banner__action { text-align: center; }

  /* ===== Section headings ===== */
  .section-heading { flex-direction: column; align-items: flex-start; gap: 16px; }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* ===== CTA banner ===== */
.cta-banner {
    border-radius: 32px; 
    }
  .cta-banner__body {
    padding: 40px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-banner__body .btn { width: 100%; justify-content: center; }
.cta-banner--qr .cta-banner__body {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-banner--qr .media-placeholder {
    align-self: center;
  }
  
  /* ===== Tenant feature ===== */
  .tenant-feature { grid-template-columns: 1fr; }
  .tenant-feature__media { min-height: 220px; }
  .tenant-feature__body { padding: 28px 24px; }

  /* ===== Article detail (interview/project/news) ===== */
  .article-header__inner { padding: 44px var(--gutter) 90px; }
  .article-nav__grid { grid-template-columns: 1fr; }
  .article-nav__link--next, .article-nav__empty { text-align: left; }

  /* ===== Lightbox ===== */
  .lightbox { padding: 24px; }
  .lightbox__close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 15px; }
  .lightbox__prev, .lightbox__next { width: 42px; height: 42px; font-size: 15px; }
  .lightbox__prev { left: 10px; }
  .lightbox__next { right: 10px; }

  /* ===== Photo grid ===== */
  .photo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px 160px; }
  .photo-grid__tile--cols { grid-column: 1 / 3; }

  /* ===== Support grid ===== */
  .support-grid { grid-template-columns: 1fr; }

  /* ===== City ===== */
  .city-grid { grid-template-columns: 1fr; }
  .city-data-panel { padding: 32px 24px; }

  /* ===== Projects ===== */
  .projects-grid { grid-template-columns: 1fr; }

  /* ===== News ===== */
  .news-row { flex-wrap: wrap; gap: 10px 16px; padding: 16px 20px; border-radius: var(--radius-image)}
  .news-row__title { flex: 1 1 100%; }

  /* ===== Footer ===== */
  .site-footer { padding: 80px 0 32px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* ===== Page hero (subpage, static photo) ===== */
  .page-hero__inner { padding: 110px var(--gutter) 64px; }
  .page-hero__title { font-size: clamp(26px, 8vw, 34px); }
  .page-hero__lead { font-size: 16px; }
  .page-hero__body { font-size: 15px; }
  .page-hero__actions { flex-direction: column; align-items: stretch; }
  .page-hero__actions .btn { justify-content: center; }

  /* ===== Concept grid / Tenant grid ===== */
  .concept-grid { grid-template-columns: 1fr; }
  .tenant-grid { grid-template-columns: 1fr; }
  .placeholder-card { min-height: 140px; }

  /* ===== Amenity grid / Info cards ===== */
  .amenity-grid { grid-template-columns: repeat(2, 1fr); }
  .info-card-grid { grid-template-columns: 1fr; }

  /* ===== Info table → stacked rows ===== */
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td {
    display: block; width: auto;
  }
  .info-table tr { margin-bottom: 10px; border: 1px solid var(--border-sand); overflow: hidden; }
  .info-table tr:last-child { margin-bottom: 0; }
  .info-table th, .info-table td { border: none; padding: 10px 16px; }

  /* ===== Step flow ===== */
  .step-flow { grid-template-columns: 1fr; }

  /* ===== Form ===== */
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-panel { padding: 26px 20px; }

  /* ===== Schedule ===== */
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
  .schedule-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .schedule-banner .btn { justify-content: center; }

  /* ===== Pricing / access two-up rows ===== */
  .pricing-grid, .pricing-grid--split { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
  .hamburger, .mobile-nav { display: none; }
    .sp-only{display: none;}
}


/* =====================================================================
   Narrow desktop / tablet header (768px–1450px)
   Stack brand mark + nav so nav gets the full row width and stops wrapping.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1450px) {
  .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 10px;
  }
  .site-nav {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}