/* Phone and tablet presentation. Desktop styles remain in styles.css. */
@media (max-width: 991px) {
  .header-inner {height:70px;position:relative;justify-content:space-between;gap:16px}
  .brand {width:205px;height:52px}
  .header-cta,.header-categories {display:none}
  .menu-toggle {display:grid;place-items:center;order:3;width:44px;height:44px;border:1px solid #b89a50;border-radius:9px;background:#ffffff06;color:#ffe08a;font-size:25px;flex-shrink:0}
  .site-header nav {display:none;position:absolute;left:0;right:0;top:70px;width:auto;margin:0;padding:12px;background:#0b100e;border:1px solid #86703c;border-radius:0 0 14px 14px;z-index:20;box-shadow:0 15px 35px #0005;max-height:calc(100dvh - 90px);overflow-y:auto}
  .site-header nav.is-open {display:flex;flex-direction:column;align-items:stretch;gap:0}
  .site-header nav a {padding:13px 15px;font:500 16px/1.4 'Barlow',Arial,sans-serif;border-radius:6px}
  .site-header nav a.active {background:#ffd7660d}
  .site-header nav a.active:after {display:none}
  .site-header nav .mobile-enquiry {display:block;margin:10px 0 0;padding:13px;text-align:center;color:#080a09;font-weight:700}
}
@media (min-width:768px) and (max-width:991px) {
  .hero-inner {gap:20px;padding-block:32px}
  .hero-copy {width:calc(100% - 310px)}
  .hero h1 {font-size:clamp(39px,5.3vw,52px)}
  .city-name {font-size:31px}
  .hero .eyebrow {letter-spacing:2px;font-size:10px}
  .project-ribbon {font-size:17px;padding-inline:14px}
  .hero-benefits {flex-direction:column;align-items:flex-start;gap:12px}
  .hero-benefits>div {border:0}
  .hero-benefits span {font-size:14px}
  .hero-actions {margin-left:0;gap:8px}
  .hero-actions .btn {padding:10px 14px;font-size:16px}
  .enquiry-card {width:290px}
  .highlight-card {flex-direction:column;align-items:flex-start;gap:20px;padding:20px;min-height:270px}
  .highlight-card h3 {font-size:24px}
  .highlight-card p {font-size:17px}
  .amenities-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .amenities-grid>div:nth-child(2) {border:0}
  .location-grid {grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;padding-block:28px}
  .location-quote {grid-column:1/-1;transform:none;border-left:0;border-top:1px solid #e4a033;padding-top:20px}
  .location-quote br {display:none}
  .location-quote hr {margin:12px auto;max-width:180px}
  .reserve-inner {grid-template-columns:1fr;gap:22px;padding-block:12px}
}
@media (max-width:767px) {
  html {scroll-padding-top:90px}
  .page-container {width:calc(100% - 40px);max-width:540px}
  .site-header {position:sticky;top:0;z-index:100;box-shadow:0 3px 18px #0002}
  .brand {width:196px}
  .btn {font-family:'Barlow',Arial,sans-serif;font-size:14px;line-height:1.4;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:8px}
  .btn:hover {transform:none}
  .hero {background:#080f0c}
  .hero-video {height:560px;object-position:center top;object-fit:cover}
  .hero:before {background:linear-gradient(180deg,#03090780 0,#0309076b 240px,#080f0ce6 510px,#080f0c 570px)}
  .hero-inner {padding:42px 0 34px}
  .hero-copy {text-align:center}
  .hero .eyebrow {font-size:9px;letter-spacing:2.1px;line-height:1.7;margin:0 auto 14px;max-width:310px}
  .hero h1 {width:100%;font-size:clamp(38px,10.3vw,60px);line-height:1;letter-spacing:-1.7px}
  .city-name {font-size:clamp(25px,6.7vw,38px);letter-spacing:7px;margin-top:6px;padding-left:7px}
  .project-ribbon {max-width:100%;width:100%;margin:18px auto 0;font-size:clamp(14px,3.8vw,19px);line-height:1.4;padding:7px 8px}
  .booking-line {font-size:clamp(18px,5vw,24px);padding:8px 0;width:100%;background:transparent}
  .categories {font-size:9px;letter-spacing:.45px;margin:11px 0 24px;line-height:1.7}
  .categories i {margin:0 5px}
  .hero-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
  .hero-actions .btn {font-size:13px;padding:12px 8px;white-space:nowrap}
  .hero-actions .btn span {padding-left:6px}
  .hero-benefits {gap:0;margin:26px 0;text-align:left;max-width:none;padding:5px 16px;border:1px solid #d7b85b40;border-radius:12px;background:#07100be0}
  .hero-benefits>div {padding:12px 0;gap:14px;border:0;border-bottom:1px solid #ffffff12}
  .hero-benefits>div:last-child {border:0}
  .hero-benefits svg {width:36px;height:36px;padding:6px;border-width:1px}
  .hero-benefits span {font-family:'Barlow',Arial,sans-serif;font-size:13px;line-height:1.45;color:#f0ede2}
  .hero-video-toggle {top:10px;bottom:auto;right:12px;width:28px;height:28px}
  .enquiry-card {padding:25px 20px;background:linear-gradient(145deg,#1e2721,#0b120e);border-color:#a58b4a;border-radius:16px;box-shadow:0 12px 28px #0003;scroll-margin-top:10px;max-width:none}
  .status-pill {font:700 11px/1.5 'Barlow',Arial,sans-serif;letter-spacing:1.4px;border-radius:20px;padding:6px 18px}
  .enquiry-card h2 {font-size:29px;letter-spacing:-.7px;margin:14px 0 8px}
  .booking-amount {font:500 14px/1.5 'Barlow',Arial,sans-serif;background:none;color:#ffdf83;margin:0 0 20px}
  .input-wrap {margin-bottom:12px}
  .form-control,.form-select {min-height:49px;font:400 16px/1.4 'Barlow',Arial,sans-serif;border-radius:8px;background-color:#f9faf8}
  .input-wrap input,.input-wrap select {padding-left:40px}
  .input-wrap>span {top:13px;left:14px}
  .enquiry-card .btn {font-size:14px;min-height:49px}
  .enquiry-card small {font-size:10px;line-height:1.5;color:#bdc6bf;margin-top:14px}
  .intro {padding:42px 0;background-size:auto 310px;background-repeat:no-repeat;background-position:center bottom;background-color:#fbf9f3}
  .intro:before {background:linear-gradient(#fbf9f3 10%,#fbf9f3f2 42%,#fbf9f3a8)}
  .section-kicker,.buyer-benefits .section-kicker,.master-plan .section-kicker {font:600 9px/1.6 'Barlow',Arial,sans-serif;letter-spacing:2px;gap:12px;margin-bottom:14px}
  .section-kicker:before,.section-kicker:after {width:28px;flex-shrink:1}
  .intro h2 {font-size:31px;line-height:1.2;letter-spacing:-1px;text-wrap:balance;margin:0 0 18px}
  .intro-description {font:400 14px/1.7 'Barlow',Arial,sans-serif;color:#4c564f}
  .intro-benefits {max-width:none;gap:10px;margin-top:24px}
  .intro-benefits:before {display:none}
  .intro-benefits>div {padding:16px 18px;background:#fffffff0;border:1px solid #eadfc4;border-radius:10px;gap:16px;box-shadow:0 4px 12px #5e492905}
  .intro-benefits>div:last-child {border:1px solid #eadfc4}
  .intro-benefits .fa-solid {font-size:25px;width:32px}
  .intro-benefits p {font:400 13px/1.6 'Barlow',Arial,sans-serif}
  .intro-benefits strong {font-size:14px;color:#1b2820}
  .highlights {padding:36px 0;background:#fffdfa}
  .section-title {font-size:29px;line-height:1.15;gap:10px;white-space:normal;margin-bottom:23px}
  .section-title:before,.section-title:after {width:22px;flex-shrink:1}
  .highlights .row {--bs-gutter-y:12px;--bs-gutter-x:0}
  .highlight-card {padding:20px 17px;gap:18px;min-height:136px;border:1px solid #e6d9bb;background:#fff;border-radius:12px;box-shadow:0 5px 20px #57401d06}
  .medallion {width:66px;height:66px;border-width:3px}
  .medallion svg {width:36px;height:36px}
  .highlight-card>div:last-child {min-width:0}
  .highlight-card h3 {font:600 17px/1.3 'Barlow',Arial,sans-serif;letter-spacing:-.4px;margin-bottom:8px}
  .plot-size {font:700 31px/1.15 'Barlow Condensed',Arial,sans-serif;letter-spacing:0;margin-top:3px}
  .highlight-card p {font:400 13px/1.6 'Barlow',Arial,sans-serif;color:#536054}
  .highlight-card p br {display:none}
  .buyer-benefits {padding:40px 0;background:radial-gradient(ellipse at top,#26372b,#0a100d 80%)}
  .offer-badge {font-size:10px;letter-spacing:1px;padding:7px 13px;margin:0 0 18px}
  .buyer-benefits h2 {font-size:31px;line-height:1.2;margin-bottom:24px;letter-spacing:-.7px}
  .benefit-stages {gap:12px}
  .benefit-stage {position:relative;text-align:left;padding:20px;border-radius:12px;background:#ffffff05;border-color:#aa8d454f}
  .stage-label {font-size:10px;letter-spacing:1.2px}
  .benefit-rate {justify-content:flex-start;margin:12px 0 8px}
  .benefit-rate strong {font-size:58px}
  .benefit-rate span {font-size:17px;color:#e0dfd2}
  .benefit-stage h3 {font-size:14px;line-height:1.5;color:#e0dfd2;max-width:260px}
  .benefit-examples {margin:24px 0}
  .benefit-examples h3 {font-size:13px;line-height:1.5}
  .example-grid {gap:0;border:1px solid #ffffff20;border-radius:12px;overflow:hidden}
  .example-grid>div {padding:17px 18px;gap:12px;border:0;border-bottom:1px solid #ffffff16;border-radius:0}
  .example-grid>div:last-child {border:0}
  .example-grid>div>span {font-size:15px}
  .example-grid strong {font-size:21px;min-width:98px}
  .example-grid small {font-size:11px}
  .buyer-benefits>.page-container>.btn {width:100%}
  .master-plan {padding:40px 0 28px;background:linear-gradient(#06100dea,#06100df2),url('assets/hero.png') center/cover}
  .master-plan h2 {font-size:32px;line-height:1.12;margin:0 auto 16px;text-wrap:balance}
  .master-plan>div>p:not(.section-kicker) {font:400 14px/1.6 'Barlow',Arial,sans-serif;color:#d7ded7;margin:0 0 24px}
  .plan-frame {border-radius:8px;padding:5px;border-color:#c7a653;overflow:hidden}
  .zoom-hint {position:static;display:block;font-size:12px;padding:10px;background:#111c14;border:0;border-radius:0;opacity:1;color:#ffdc82}
  .amenities {padding:22px 0 30px;background:#f8f5ed;border:0}
  .amenities-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .amenities-grid>div,.amenities-grid>div:last-child,.amenities-grid>div:nth-child(2) {flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:18px 14px;border:1px solid #e8dec8;border-radius:10px;background:#fffdfa;min-width:0}
  .amenities svg {width:32px;height:32px;stroke-width:1.6}
  .amenities p {font:400 12px/1.5 'Barlow',Arial,sans-serif}
  .amenities strong {font-size:14px;line-height:1.3;margin-bottom:6px}
  .location {background:#fffdfa}
  .location-grid {grid-template-columns:minmax(0,1fr);gap:24px;padding:38px 0}
  .location-copy {grid-column:1;grid-row:1;text-align:center;padding:0}
  .location .eyebrow {font-size:10px;letter-spacing:3px;color:#7d682f}
  .location h2 {font-size:42px;line-height:1.1;margin:7px 0 12px;letter-spacing:-1.2px}
  .location-copy>p:not(.eyebrow) {font-size:14px;line-height:1.6;color:#556052;margin-bottom:20px}
  .location .landmarks {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;max-width:none}
  .location .landmarks>div {width:auto;padding:10px 0}
  .landmarks svg {width:27px;height:27px}
  .location .landmarks span {font-family:'Barlow',Arial,sans-serif;font-size:10px;line-height:1.5;margin-top:8px}
  .map-art {grid-column:1;grid-row:2;border:1px solid #e5d9be;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px #6451200a}
  .map-art>.map-caption {font-size:12px;text-align:center;padding:12px;background:#f5efdf;font-weight:600}
  .location-quote {grid-column:1;grid-row:3;border:1px solid #e9ddc3;border-radius:12px;padding:23px 18px;transform:none;background:linear-gradient(130deg,#faf3e3,#fffefa);font-size:26px;line-height:1.15}
  .location-quote hr {max-width:130px;margin:16px auto;opacity:.5}
  .reserve {padding:34px 0;background:linear-gradient(#07100ded,#07100df5),url('assets/hero.png') center/cover;border-top:1px solid #d1b26e66;border-bottom:1px solid #d1b26e66}
  .reserve-inner {display:block}
  .reserve h2 {font:600 29px/1.2 'Playfair Display',Georgia,serif;text-align:center;letter-spacing:-.6px;text-wrap:balance}
  .reserve p {font-size:14px;text-align:center;margin:12px 0 22px;color:#e7d6aa}
  .compact-fields {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
  .compact-fields>* {font:400 16px/1.4 'Barlow',Arial,sans-serif;min-height:49px;padding:12px 14px;border-color:#a58b4a77;border-radius:8px}
  .compact-form .btn {font-size:14px;padding:12px;min-height:49px}
  .compact-form .form-feedback {font-size:13px;margin:12px 0 0}
  footer {padding:30px 0;background:#080e0b}
  .footer-inner {display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px;text-align:center}
  .developer-brand {gap:12px}
  .developer-brand svg {width:50px;height:42px}
  .developer-brand span {font-size:17px;text-align:left}
  .developer-brand small {font-size:11px;color:#b9c1b9}
  .footer-inner nav {order:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;width:100%;margin:0;border-block:1px solid #ffffff12;padding:12px 0}
  .footer-inner nav a {font-size:12px;border:0;padding:9px 0}
  .footer-address {padding:0;border:0;font-size:14px;margin:0}
  .footer-address span {font-size:11px;color:#b9c1b9;margin-top:6px}
  .signature {font-size:24px;transform:none;line-height:1.1}
  .film-button {margin:0;border:1px solid #a58b4a66;border-radius:7px;min-height:44px;padding:10px 18px;font-size:12px;color:#f0da9d}
  .modal-dialog {margin:12px}
  .modal-header {padding:14px}
  .modal-title {font:600 16px/1.4 'Barlow',Arial,sans-serif}
  #planModal .modal-body {overflow-x:auto;padding:8px;overscroll-behavior-x:contain}
  #planModal .plan-art {min-width:850px}
  .modal .btn-close {min-width:32px;min-height:32px;padding:4px}
}
@media (max-width:359px) {
  .page-container {width:calc(100% - 32px)}
  .brand {width:180px}
  .hero .eyebrow {letter-spacing:1.5px;font-size:8px}
  .hero-actions .btn {font-size:12px;padding-inline:5px}
  .hero h1 {font-size:37px}
  .enquiry-card {padding:22px 16px}
  .intro h2,.buyer-benefits h2 {font-size:28px}
  .section-title {font-size:26px}
  .highlight-card {gap:13px;padding:18px 14px}
  .medallion {width:56px;height:56px}
  .medallion svg {width:31px;height:31px}
  .highlight-card h3 {font-size:16px}
  .amenities-grid>div {padding:15px 12px}
}

@media (max-width:991px) {
  .site-header .header-cta {display:none}
}
@media (max-width:767px) {
  .compact-fields .form-control,.compact-fields .form-select {background-color:#101c15;color:#f5f3e9}
  .compact-fields .form-control::placeholder {color:#c5cdc5;opacity:1}
  .compact-fields .form-select {--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dfca91' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
  .highlight-card h3 br {display:initial}
}

.mobile-plan-help{display:none}
@media(max-width:767px){.mobile-plan-help{display:block;font-size:12px;color:#65562f;background:#faf5e9;margin:0;padding:10px 14px}}