/* ==========================================================================
   RESPONSIVE
   Breakpoints covered: 1920 · 1600 · 1440 · 1366 · 1280 · 1024 · 900 · 820 · 768 · 430 · 414 · 390 · 375 · 360
   Strategy: fluid clamp() type/space everywhere; hard layout changes at 1180 (nav), 900 (stack), 820 (touch plan viewer, dock), 600 and 430.
   ========================================================================== */

/* ---------- Large screens ---------- */
@media (min-width: 1700px) {
  :root { --header-h: 92px; }
  body { font-size: 1.15rem; }
  .label { font-size: .78rem; }
  .btn { font-size: .84rem; }
}
@media (min-width: 2200px) { body { font-size: 1.25rem; } .wrap { max-width: 2400px; } }

/* ---------- Laptop ---------- */
@media (max-width: 1440px) {
  .nav, .nav__list { gap: clamp(12px, 1.4vw, 22px); }
  .nav__link { letter-spacing: .16em; }
}
@media (max-width: 1366px) {
  .nav__link { font-size: .66rem; letter-spacing: .14em; }
  .brand__name { font-size: .95rem; letter-spacing: .12em; }
}
@media (max-width: 1300px) {
  .nav__cta { display: none; }
}

/* ---------- Navigation collapses ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- Small laptop / large tablet landscape (1024) ---------- */
@media (max-width: 1100px) {
  .hero__photo { width: clamp(150px, 22vw, 260px); }
  .hero__cta { margin-right: 0; }
  .resb__info { grid-column: 8 / 13; }
  .legend { grid-template-columns: 1fr; }
  .fp__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .footer__brand { grid-column: span 4; } .footer__addr { grid-column: span 4; } .footer__col { grid-column: span 4; }
  .footer__tel, .footer__links, .footer__team { grid-column: span 4; }
  .pj, .sp { grid-template-columns: minmax(170px, 200px) minmax(0, 1fr); }
  .sp__row--img { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .sp__row--img .sp__fig { display: none; }
}

/* ---------- Tablet (900) : stack ---------- */
@media (max-width: 900px) {
  /* hero */
  .hero__photo { top: calc(var(--header-h) + 5vh); width: clamp(120px, 24vw, 210px); }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__title { font-size: min(13.2vw, 17vh); }
  .hero__l2 { padding-left: .3em; }
  .hero__scroll, .hero__coords { display: none; }

  /* intro / legacy / project */
  .intro__media { grid-column: 1 / -1; padding-bottom: 18%; }
  .intro__copy { grid-column: 1 / -1; padding-top: 30px; }
  .bp-elev { width: 60vw; opacity: .2; }
  .psplit { grid-template-columns: 1fr; }
  .psplit__sticky { position: relative; height: auto; padding: 0 var(--pad); }
  .psplit__frame { flex: none; aspect-ratio: 4 / 4; }
  .psplit__body { padding: 40px var(--pad) 90px; }

  /* residences */
  .resb { row-gap: 26px; }
  .resb__stage, .resb--mirror .resb__stage { grid-column: 1 / -1; grid-row: 1; }
  .resb__info, .resb--mirror .resb__info { grid-column: 1 / -1; grid-row: 2; }
  .resb__num, .resb--mirror .resb__num { font-size: 60vw; right: 0; left: auto; top: 0; }
  .legend { grid-template-columns: 1fr 1fr; }

  /* amenities: swipe track */
  .amen__pin { min-height: 0; padding-bottom: 10px; }
  .amen__hint .hint-d { display: none; } .amen__hint .hint-m { display: inline; }
  .amen__viewport { scroll-snap-type: x mandatory; }
  .amen__track { min-height: 0; height: auto; align-items: flex-start; padding-block: 22px 36px; }
  .apanel, .apanel--b { flex-direction: column; align-items: flex-start; height: auto; width: min(82vw, 560px); margin-right: 22px; }
  .apanel__media, .apanel--c .apanel__media { width: 100%; height: auto; aspect-ratio: 4 / 3.2; }
  .apanel__txt, .apanel--b .apanel__txt { width: 100%; margin: 26px 0 0; padding: 0; text-align: left; align-items: flex-start; align-self: auto; }
  .apanel__txt h3 { font-size: clamp(2rem, 8vw, 3.2rem); }
  .apanel__small, .apanel--b .apanel__small { left: auto; right: -6px; bottom: -22px; width: 36%; }
  .apanel__cap { display: none; }
  .apanel--end { width: min(82vw, 520px); }

  /* specs tabs → chip bar */
  .spec { grid-template-columns: 1fr; }
  .spec__nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .spec__nav::-webkit-scrollbar { display: none; }
  .spec__tab { flex: none; white-space: nowrap; padding: 16px 18px; border-bottom: 0; }
  .spec__tab::after { right: 0; left: 0; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .spec__tab[aria-selected="true"]::after { transform: scaleX(1); }
  .spec__tab:hover, .spec__tab[aria-selected="true"] { padding-left: 18px; }
  .spec__stage { padding: 30px 0 10px; min-height: 0; }
  .spec__panel { grid-template-columns: 1fr; }
  .spec__fig { aspect-ratio: 16 / 10; max-height: none; }

  /* plans, location, mosaic, trust, contact, footer */
  .fp__grid { grid-template-columns: 1fr; }
  .fp__notes { grid-template-columns: 1fr; }
  .loc__grid { grid-template-columns: 1fr; }
  .mosaic__grid { grid-auto-rows: 8vw; }
  .mz--a { grid-column: 1 / 13; grid-row: 1 / 6; }
  .mz--b { grid-column: 1 / 7; grid-row: 6 / 13; }
  .mz--c { grid-column: 7 / 13; grid-row: 6 / 10; }
  .mz--e { grid-column: 7 / 13; grid-row: 10 / 13; }
  .mz--d { grid-column: 1 / 13; grid-row: 13 / 18; }
  .mz--f { display: none; }
  .contact__grid, .ct__grid, .gmap__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__addr, .footer__tel, .footer__links, .footer__team { grid-column: span 6; }

  /* sub-pages */
  .ph__float { width: 92vw; right: -6vw; bottom: 8vh; }
  .ph__photo { display: none; }
  .ph--res .ph__inner { padding-top: 40px; }
  .ph__inner--split { grid-template-columns: 1fr; }
  .tl__line { left: 14px; }
  .tl__item, .tl__item:nth-of-type(even) { grid-template-columns: 1fr; padding-left: 46px; row-gap: 10px; }
  .tl__item::before { left: 14px; }
  .tl__item .tl__num, .tl__item:nth-of-type(even) .tl__num { order: 0; text-align: left; font-size: clamp(4rem, 22vw, 9rem); }
  .tl__item .tl__txt, .tl__item:nth-of-type(even) .tl__txt { order: 1; align-items: flex-start; text-align: left; }
  .pj, .sp { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pj__index, .sp__nav { min-width: 0; }
  .pj__index, .sp__nav { position: sticky; top: var(--header-h); z-index: 30; padding: 0; margin-inline: calc(var(--pad) * -1); background: var(--paper); border-bottom: 1px solid var(--rule); }
  .pj__index .label, .sp__nav .label { display: none; }
  .pj__index ol, .sp__nav ul { display: flex; overflow-x: auto; padding-inline: var(--pad); scrollbar-width: none; }
  .pj__index ol::-webkit-scrollbar, .sp__nav ul::-webkit-scrollbar { display: none; }
  .pj__index a, .sp__nav a { flex: none; white-space: nowrap; padding: 15px 14px; border-left: 0; border-bottom: 2px solid transparent; }
  .pj__index a.is-current, .sp__nav a.is-current { padding-left: 14px; border-bottom-color: var(--gold-deep); }
  .pj__two, .pj__annot, .pj__homes { grid-template-columns: 1fr; }
  .pj__fig .frame { aspect-ratio: 16 / 10; }
  .cat__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .cat--comm .cat__txt, .cat__imgs, .cat__grid--rev .cat__tall, .cat__grid--rev .cat__txt { grid-column: 1 / -1; }
  .cat__grid--rev .cat__txt { order: 2; }
  .cat__row { grid-template-columns: 1fr; row-gap: 26px; }
  .cat__wide, .cat__side { grid-column: 1 / -1; }
  .cat__thumb { width: 60%; align-self: flex-start; }
  .cat__inner--right { margin-left: 0; }
  .sun { width: 90vw; right: -20vw; opacity: .3; }
  .lmapsec__head, .lmapsec__lists, .ppl__meta { grid-template-columns: 1fr; }
  .dist--big { grid-template-columns: 1fr; }
  .sp__row, .sp__row--img { grid-template-columns: 1fr; gap: 20px; }
  .gg { grid-auto-rows: 9vw; }
  .g-hero, .g-wide { grid-column: span 12; grid-row: span 6; }
  .g-tall { grid-column: span 6; grid-row: span 7; }
  .g-sq { grid-column: span 6; grid-row: span 5; }
  .g-sm { grid-column: span 6; grid-row: span 4; }
  .ints__i:nth-child(even) { margin-top: 0; }
}

/* ---------- Touch plan viewer + dock (820) ---------- */
@media (max-width: 820px) {
  .fp__viewer { height: auto; min-height: 0 !important; overflow: hidden; cursor: default; touch-action: auto; }
  .fp__canvas { position: relative; inset: auto; overflow: auto; max-height: 68vh; transform: none !important; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  .fp__slide { position: absolute; top: 0; left: 0; width: 100%; display: block; padding: 10px; }
  .fp__slide.is-active { position: relative; width: calc(100% * var(--ms, 1)); min-width: 100%; }
  .fp__slide img { max-width: none; max-height: none; width: 100%; height: auto; }
  .fp__tools button[data-fp-zoom] { display: none; }
  .fp__hint .hint-d { display: none; } .fp__hint .hint-m { display: inline; }
  .fp__viewer { padding-bottom: 60px; }
  .fp__tools { bottom: 8px; right: 8px; }
  .fp__hint { left: 12px; bottom: 12px; max-width: 52%; line-height: 1.5; }

  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: grid; grid-template-columns: 1fr 1fr 1.15fr; background: rgba(13,12,10,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); transition: transform .5s var(--ease); }
  .dock__btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #efe8d8; }
  .dock__btn .ico { width: 20px; height: 20px; stroke: var(--gold-light); }
  .dock__btn + .dock__btn { border-left: 1px solid var(--line-soft); }
  .dock__btn--gold { background: var(--gold-metal); color: var(--black); font-weight: 600; }
  .menu-open .dock { transform: translateY(100%); }
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .brand__by { display: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  :root { --header-h: 68px; --pad: 20px; --gap: 14px; }
  body { font-size: 1rem; }
  .site-header.is-scrolled { --header-h: 64px; height: 64px; }
  .brand__mark { height: 40px; }
  .brand__name { font-size: .88rem; letter-spacing: .1em; }
  .btn { padding-inline: 1.4em; letter-spacing: .16em; }

  .hero { height: auto; min-height: 100svh; }
  .hero__inner { padding-top: calc(var(--header-h) + 110px); padding-bottom: 60px; min-height: 100svh; }
  .hero__by { margin-bottom: 26px; font-size: .62rem; gap: 10px; }
  .hero__by .rule { width: 24px; }
  .hero__title { font-size: 12.6vw; }
  .hero__l2 { padding-left: 0; }
  .hero__photo { top: calc(var(--header-h) + 16px); right: var(--pad); width: 34vw; }
  .hero__photo .cap { display: none; }
  .hero__cta { flex-direction: column; width: 100%; }
  .hero__cta .btn { width: 100%; }
  .hero__bg { object-position: 66% 50%; }

  .intro__statement { font-size: clamp(2.4rem, 11vw, 4rem); }
  .facts { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .legacy__stats { grid-template-columns: 1fr; }
  .stat--2, .stat--4 { margin-top: 0; }
  .stat__num { font-size: 28vw; }
  .stat__lbl::before { width: 22px; }
  .legacy__dim { display: none; }

  .resb__stage { aspect-ratio: 1.3 / 1; }
  .resb__note { display: none; }
  .hot__pt button { width: 24px; height: 24px; font-size: .62rem; }
  .hot__tip { font-size: .58rem; padding: 6px 10px; }

  .amen__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .plans__head { flex-direction: column; align-items: flex-start; }
  .fp__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .fp__tabs::-webkit-scrollbar { display: none; }
  .fp__tab { flex: none; white-space: nowrap; padding-inline: 16px; }
  .fp__info { padding: 22px 18px; }
  .fp__facts > div { grid-template-columns: 1fr; gap: 4px; }

  .dist__row { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 8px; }
  .dist__bar { grid-column: 2 / -1; grid-row: 2; }
  .dist__val { min-width: 0; }

  .mosaic__grid { grid-auto-rows: 11vw; }
  .mosaic__cta { flex-direction: column; align-items: flex-start; }
  .trust { min-height: 0; }
  .trust__logo { width: 60vw; right: -8vw; }
  .form { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr 34px; row-gap: 2px; }
  .person__num { grid-column: 1; grid-row: 2; }
  .person__ico { grid-column: 2; grid-row: 1 / 3; }
  .footer__addr, .footer__tel, .footer__links, .footer__team { grid-column: 1 / -1; }
  .footer__mark { font-size: 14.4vw; }
  .footer__legal { padding-bottom: 28px; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .ph { min-height: 70svh; }
  .ph--res, .ph--loc { min-height: 0; }
  .ph--project, .ph--amen { min-height: 86svh; }
  .ph__title { font-size: clamp(2.6rem, 13.5vw, 5rem); }
  .ph--res .ph__title { font-size: 12.4vw; }
  .ph--loc .ph__title { font-size: 9.4vw; }
  .ph__float { position: relative; right: auto; bottom: auto; width: 116%; margin: -6px 0 0 -8%; }
  .ph--res { flex-direction: column; align-items: stretch; }
  .ph--res .hero__scroll { display: none; }
  .ph__logo { width: 52vw; right: -8vw; opacity: .12; }
  .credits__list li { grid-template-columns: 1fr; gap: 6px; }
  .cmp__table thead th { font-size: 1.5rem; }
  .pin-a i { display: none; }
  .pin-a b { width: 26px; height: 26px; font-size: .68rem; }
  .cat--well { min-height: 88svh; }
  .cat__i2, .cat__i1 { border-width: 6px; }
  .lb__nav { width: 44px; height: 44px; margin-top: -22px; }
  .lb__btn { width: 42px; height: 42px; }
  .gg { grid-auto-rows: 13vw; }
  .g-tall { grid-column: span 12; grid-row: span 7; }
  .g-sq, .g-sm { grid-column: span 12; grid-row: span 5; }
  .g-sm { grid-row: span 4; }
  .gi__cap { opacity: 1; transform: none; padding-top: 30px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); width: calc(100% + var(--pad) * 2); }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
  .gal__bar { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .gal__count { display: none; }
}

@media (max-width: 430px) {
  .legend { grid-template-columns: 1fr; }
  .d-xxl { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .facts b { font-size: 1.4rem; }
  .ph--project .ph__title, .ph--amen .ph__title { font-size: 13vw; }
}
@media (max-width: 390px) {
  .hero__title { font-size: 12.2vw; }
  .btn { font-size: .72rem; }
  .menu__link { font-size: clamp(1.5rem, 5.8vh, 2.6rem); }
}
@media (max-width: 360px) {
  :root { --pad: 16px; }
  .brand__name { font-size: .8rem; }
  .hero__title { font-size: 12vw; }
  .footer__mark { font-size: 13.6vw; }
  .btn { padding-inline: 1.1em; }
}

/* ---------- Short landscape screens ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 560px; }
  .hero__title { font-size: 12vh; }
  .menu__link { font-size: 1.5rem; padding-block: 4px; }
}

/* ---------- Hover-less devices ---------- */
@media (hover: none) {
  .gi__cap { opacity: 1; transform: none; }
  .hot__tip { display: none; }
  .hot__pt.is-on .hot__tip { display: block; }
}
@media print {
  .site-header, .cursor, .dock, .menu, .preloader { display: none !important; }
}