:root {
  color-scheme: light;
  --sky-ink: #252922;
  --sky-muted: #72766e;
  --sky-paper: #f6f2eb;
  --sky-orange: #d5812a;
  --sky-dark: #292b27;
  --sky-line: #ddd8cf;
  --sky-sans: "DM Sans", sans-serif;
  --sky-display: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body { margin: 0; color: var(--sky-ink); background: var(--sky-paper); font-family: var(--sky-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.sky-header { position: relative; z-index: 5; min-height: 82px; padding: 0 6.2vw; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--sky-paper); }
.sky-brand { display: inline-flex; align-items: center; gap: 15px; flex-shrink: 0; }
.sky-brand img { display: block; width: 137px; }
.sky-brand > span { padding-left: 14px; border-left: 1px solid var(--sky-line); font: 800 10px/1.3 var(--sky-display); letter-spacing: .12em; }
.sky-brand small { display: block; color: var(--sky-muted); font: 600 8px/1.5 var(--sky-sans); letter-spacing: .15em; }
.sky-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 45px); font-size: 11px; font-weight: 600; }
.sky-nav a:not(.sky-nav-cta):hover, .sky-text-link:hover, .sky-rera-copy a:hover { color: var(--sky-orange); }
.sky-nav-cta { padding: 12px 15px; color: white; background: var(--sky-dark); }
.sky-nav-cta span { padding-left: 14px; color: #f4c38f; }
.sky-menu-toggle { display: none; }

.sky-hero { position: relative; min-height: max(590px, min(720px, calc(100svh - 82px))); overflow: hidden; color: white; background: #45413a; }
.sky-hero-image, .sky-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-hero-image { object-fit: cover; object-position: center 45%; }
.sky-hero-shade { background: linear-gradient(90deg, rgba(28,27,24,.76), rgba(38,33,27,.45) 46%, rgba(35,32,28,.04)), linear-gradient(0deg, rgba(28,27,24,.36), transparent 35%); }
.sky-hero-copy { position: relative; z-index: 1; width: min(620px, 78vw); padding: clamp(115px, 14vw, 176px) 0 125px 12vw; }
.sky-kicker { margin: 0 0 20px; display: flex; align-items: center; gap: 10px; color: #f6d6b3; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.sky-kicker > span { width: 23px; border-top: 1px solid currentColor; }
.sky-hero h1, .sky-section-heading h2, .sky-price-band h2, .sky-location h2, .sky-enquire h2, .sky-rera h2 { margin: 0; font: 500 clamp(54px, 7.2vw, 90px)/.99 var(--sky-display); letter-spacing: -.055em; }
.sky-hero h1 em, .sky-section-heading h2 em, .sky-price-band h2 em, .sky-location h2 em, .sky-enquire h2 em, .sky-rera h2 em, .sky-retail-card h3 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.04em; }
.sky-hero-copy > p:not(.sky-kicker) { max-width: 390px; margin: 25px 0 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.8; }
.sky-hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 25px; }
.sky-button { min-height: 47px; display: inline-flex; justify-content: center; align-items: center; gap: 25px; padding: 0 17px; border: 0; font-size: 10px; font-weight: 700; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.sky-button:hover { transform: translateY(-2px); }
.sky-button-light { color: var(--sky-ink); background: #f6d6b3; }
.sky-button-light:hover { background: #fbe4cd; }
.sky-button-dark { color: white; background: var(--sky-dark); }
.sky-button-dark:hover { background: #43453e; }
.sky-hero-location { color: rgba(255,255,255,.86); font-size: 10px; }
.sky-hero-foot { position: absolute; right: 6.2vw; bottom: 24px; left: 6.2vw; display: flex; justify-content: space-between; color: rgba(255,255,255,.75); font-size: 8px; font-weight: 600; letter-spacing: .12em; }

.sky-highlights { min-height: 130px; padding: 22px 12vw; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: #eee8df; }
.sky-highlights > div { min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding-left: 25px; border-left: 1px solid #d5cec2; }
.sky-highlights > div:first-child { padding-left: 0; border-left: 0; }
.sky-highlights strong { font: 600 23px/1 var(--sky-display); }
.sky-highlights span { color: var(--sky-muted); font-size: 9px; }

.sky-section { padding: 105px 12vw; }
.sky-overview { display: grid; grid-template-columns: 1fr .86fr; gap: 0 8vw; }
.sky-kicker-dark { color: var(--sky-orange); }
.sky-section-heading h2, .sky-location h2, .sky-enquire h2 { font-size: clamp(42px, 5vw, 62px); line-height: 1.04; }
.sky-overview-copy { align-self: end; padding-bottom: 5px; }
.sky-overview-copy > p { margin: 0 0 23px; color: #62675f; font-size: 12px; line-height: 1.95; }
.sky-text-link { display: inline-flex; align-items: center; gap: 22px; font-size: 10px; font-weight: 700; transition: color .2s ease; }
.sky-home-cards { grid-column: 1 / -1; margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--sky-line); border-left: 1px solid var(--sky-line); }
.sky-home-card, .sky-retail-card { min-height: 300px; padding: 20px 21px 17px; display: flex; flex-direction: column; align-items: flex-start; border-right: 1px solid var(--sky-line); border-bottom: 1px solid var(--sky-line); }
.sky-card-number { color: #83867e; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.sky-home-mark { margin: 27px 0 5px; color: var(--sky-orange); font: 500 81px/.85 var(--sky-display); letter-spacing: -.08em; }
.sky-home-card h3 { margin: 0; font: 600 18px var(--sky-display); }
.sky-home-card p { margin: 7px 0 0; color: var(--sky-muted); font-size: 10px; }
.sky-home-card > a { width: 100%; margin-top: auto; padding-top: 13px; display: flex; justify-content: space-between; border-top: 1px solid var(--sky-line); font-size: 9px; font-weight: 700; }
.sky-home-card-featured { background: #eee8df; }
.sky-home-card-featured .sky-home-mark { color: #8d5b39; }
.sky-retail-card { justify-content: flex-end; color: white; background: #33352f; }
.sky-retail-card .sky-kicker { margin-bottom: auto; font-size: 8px; }
.sky-retail-card h3 { margin: 30px 0 12px; font: 500 28px/1.1 var(--sky-display); letter-spacing: -.04em; }
.sky-retail-card > p:not(.sky-kicker) { max-width: 275px; margin: 0 0 21px; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.7; }
.sky-retail-card > a { width: 100%; padding-top: 12px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.25); color: #f6d6b3; font-size: 9px; font-weight: 700; }

.sky-amenities { background: #eee8df; }
.sky-amenities-inner { padding-top: 99px; padding-bottom: 90px; }
.sky-section-lede { max-width: 300px; margin: 20px 0 0; color: var(--sky-muted); font-size: 11px; line-height: 1.8; }
.sky-amenity-grid { margin-top: 45px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 10px; }
.sky-amenity { position: relative; min-width: 0; overflow: hidden; color: white; background: #858176; }
.sky-amenity-featured { grid-column: span 2; grid-row: span 2; }
.sky-amenity-parking { grid-column: span 2; }
.sky-amenity > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.sky-amenity:hover > img { transform: scale(1.035); }
.sky-amenity::after { position: absolute; inset: 35% 0 0; content: ""; background: linear-gradient(transparent, rgba(20,21,18,.75)); pointer-events: none; }
.sky-amenity > div { position: absolute; z-index: 1; right: 16px; bottom: 15px; left: 16px; }
.sky-amenity > div > span { color: #f6d6b3; font-size: 8px; font-weight: 700; }
.sky-amenity h3 { margin: 5px 0 0; font: 600 14px var(--sky-display); }
.sky-amenity p { margin: 6px 0 0; color: rgba(255,255,255,.75); font-size: 9px; line-height: 1.6; }
.sky-amenity-featured h3 { font-size: 20px; }
.sky-amenity-text { padding: 19px; display: flex; flex-direction: column; justify-content: space-between; background: #41443d; }
.sky-amenity-text::after { display: none; }
.sky-amenity-symbol { color: #f6d6b3; font: 300 37px/1 var(--sky-sans); }
.sky-amenity-text > div { position: static; }
.sky-amenity-text > div > span { color: #f6d6b3; }
.sky-note { margin: 16px 0 0; color: #777a72; font-size: 8px; line-height: 1.7; }

.sky-price-band { padding: 73px 12vw; display: grid; grid-template-columns: .8fr 1fr; gap: 8vw; align-items: center; color: white; background: var(--sky-dark); }
.sky-price-band .sky-kicker, .sky-rera .sky-kicker { color: #f6d6b3; }
.sky-price-band h2, .sky-rera h2 { font-size: clamp(42px, 5vw, 60px); line-height: 1.04; }
.sky-price-info > p { margin: 0 0 15px; color: rgba(255,255,255,.7); font-size: 10px; }
.sky-price-info > div { padding: 12px 0; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(255,255,255,.22); }
.sky-price-info > div span { color: rgba(255,255,255,.74); font-size: 10px; }
.sky-price-info > div strong { font: 600 17px var(--sky-display); }
.sky-price-info > small { display: block; margin: 8px 0 17px; color: rgba(255,255,255,.55); font-size: 8px; line-height: 1.7; }

.sky-location { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 535px; }
.sky-location-copy { align-self: center; padding: 70px 7vw 70px 12vw; }
.sky-location-address { max-width: 360px; margin: 19px 0 17px; color: var(--sky-muted); font-size: 10px; line-height: 1.8; }
.sky-connectivity { max-width: 390px; margin: 0 0 12px; padding: 0; list-style: none; }
.sky-connectivity li { padding: 11px 0; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--sky-line); font-size: 9px; }
.sky-connectivity strong { color: #9c5e2e; white-space: nowrap; }
.sky-location-copy .sky-note { max-width: 390px; margin-bottom: 19px; }
.sky-map { width: 100%; min-height: 535px; border: 0; background: #e6e1d8; }

.sky-enquire { padding: 93px 12vw; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; background: #eee8df; }
.sky-enquire-copy > p:not(.sky-kicker) { max-width: 300px; margin: 18px 0; color: var(--sky-muted); font-size: 11px; line-height: 1.8; }
.sky-whatsapp { font-size: 9px; color: var(--sky-muted); }
.sky-whatsapp strong { margin-left: 5px; color: #8e592d; }
.sky-enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.sky-enquiry-form label { min-width: 0; padding: 15px 0 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #d6d0c6; }
.sky-enquiry-form label > span { color: var(--sky-muted); font-size: 8px; font-weight: 600; }
.sky-enquiry-form input, .sky-enquiry-form select { width: 100%; min-height: 25px; border: 0; outline: 0; color: var(--sky-ink); background: transparent; font-size: 10px; }
.sky-enquiry-form input:focus, .sky-enquiry-form select:focus { box-shadow: 0 1px 0 var(--sky-orange); }
.sky-enquiry-form input::placeholder, .sky-enquiry-form select:invalid { color: #92958d; }
.sky-enquiry-form select option { color: var(--sky-ink); }
.sky-form-footer { grid-column: 1 / -1; padding-top: 19px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.sky-form-message { margin: 0; color: var(--sky-muted); font-size: 8px; line-height: 1.6; }
.sky-enquiry-form button:disabled { opacity: .65; cursor: wait; transform: none; }

.sky-rera { padding: 66px 12vw; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; color: white; background: #3a3b35; }
.sky-rera-copy { align-self: center; }
.sky-rera-copy > p:not(.sky-note) { margin: 0; padding: 11px 0; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.76); font-size: 10px; }
.sky-rera-copy strong { color: white; }
.sky-rera-copy a { margin-top: 15px; display: inline-flex; gap: 20px; color: #f6d6b3; font-size: 9px; font-weight: 700; }
.sky-rera .sky-note { color: rgba(255,255,255,.58); }
.sky-footer { min-height: 100px; padding: 22px 6.2vw; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--sky-paper); }
.sky-footer p, .sky-footer > a:last-child { color: var(--sky-muted); font-size: 8px; }
.sky-footer > a:last-child { font-weight: 700; }
.sky-float-cta { position: fixed; right: 18px; bottom: 18px; z-index: 4; min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; gap: 17px; color: white; background: #34362f; box-shadow: 0 5px 18px rgba(0,0,0,.2); font-size: 9px; font-weight: 700; }
.sky-float-cta span { color: #f6d6b3; }

@media (max-width: 850px) {
  .sky-header { padding-right: 5vw; padding-left: 5vw; }
  .sky-nav { gap: 18px; font-size: 9px; }
  .sky-section, .sky-price-band, .sky-enquire, .sky-rera { padding-right: 8vw; padding-left: 8vw; }
  .sky-highlights { padding-right: 8vw; padding-left: 8vw; }
  .sky-home-cards { grid-template-columns: 1fr 1fr; }
  .sky-retail-card { grid-column: 1 / -1; min-height: 240px; }
  .sky-amenity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 185px; }
  .sky-amenity-featured { grid-row: span 2; }
  .sky-amenity-parking { grid-column: span 1; }
  .sky-location-copy { padding-left: 8vw; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 70px; }
  .sky-header { min-height: 70px; padding: 0 20px; }
  .sky-brand { gap: 9px; }
  .sky-brand img { width: 119px; }
  .sky-brand > span { padding-left: 9px; font-size: 8px; }
  .sky-menu-toggle { width: 38px; height: 38px; padding: 8px; display: block; border: 0; background: transparent; }
  .sky-menu-toggle span { display: block; margin: 5px 0; border-top: 1.5px solid var(--sky-ink); }
  .sky-nav { position: absolute; top: 69px; right: 0; left: 0; padding: 10px 21px 18px; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--sky-paper); box-shadow: 0 10px 16px rgba(22,25,20,.1); }
  .sky-nav.is-open { display: flex; }
  .sky-nav a:not(.sky-nav-cta) { padding: 12px 0; border-bottom: 1px solid var(--sky-line); font-size: 11px; }
  .sky-nav-cta { margin-top: 12px; text-align: center; }
  .sky-hero { min-height: max(610px, calc(91svh - 70px)); }
  .sky-hero-image { object-position: 58% center; }
  .sky-hero-shade { background: linear-gradient(90deg, rgba(28,27,24,.76), rgba(38,33,27,.23)), linear-gradient(0deg, rgba(28,27,24,.4), transparent 43%); }
  .sky-hero-copy { width: 100%; padding: 125px 24px 100px; }
  .sky-hero h1 { font-size: clamp(54px, 13vw, 72px); }
  .sky-hero-copy > p:not(.sky-kicker) { max-width: 330px; font-size: 12px; }
  .sky-hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .sky-hero-foot { right: 20px; left: 20px; font-size: 7px; }
  .sky-highlights { padding: 22px; grid-template-columns: 1fr 1fr; gap: 15px 10px; }
  .sky-highlights > div { min-height: 52px; padding-left: 14px; }
  .sky-highlights > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sky-highlights strong { font-size: 20px; }
  .sky-highlights span { font-size: 8px; }
  .sky-section { padding: 72px 23px; }
  .sky-overview { grid-template-columns: 1fr; gap: 23px; }
  .sky-section-heading h2, .sky-location h2, .sky-enquire h2 { font-size: 47px; }
  .sky-overview-copy > p { font-size: 11px; }
  .sky-home-cards { grid-column: 1; margin-top: 35px; grid-template-columns: 1fr 1fr; }
  .sky-home-card, .sky-retail-card { min-height: 265px; padding: 15px 13px; }
  .sky-home-mark { margin-top: 25px; font-size: 66px; }
  .sky-home-card h3 { font-size: 14px; }
  .sky-home-card p { font-size: 8px; line-height: 1.6; }
  .sky-retail-card { grid-column: 1 / -1; min-height: 230px; }
  .sky-retail-card h3 { font-size: 26px; }
  .sky-amenities-inner { padding-top: 70px; padding-bottom: 65px; }
  .sky-amenity-grid { margin-top: 30px; grid-template-columns: 1fr 1fr; grid-auto-rows: 155px; gap: 7px; }
  .sky-amenity-featured { grid-column: span 2; grid-row: span 2; }
  .sky-amenity-parking { grid-column: span 2; }
  .sky-amenity > div { right: 10px; bottom: 10px; left: 10px; }
  .sky-amenity h3 { font-size: 11px; }
  .sky-amenity-featured h3 { font-size: 17px; }
  .sky-amenity p { font-size: 8px; }
  .sky-amenity-text { padding: 13px; }
  .sky-amenity-text h3 { font-size: 12px; }
  .sky-price-band { padding: 62px 24px; grid-template-columns: 1fr; gap: 31px; }
  .sky-price-band h2, .sky-rera h2 { font-size: 47px; }
  .sky-price-info > div strong { font-size: 15px; }
  .sky-location { grid-template-columns: 1fr; }
  .sky-location-copy { padding: 70px 24px 45px; }
  .sky-map { min-height: 310px; }
  .sky-enquire { padding: 72px 24px; grid-template-columns: 1fr; gap: 34px; }
  .sky-enquiry-form { grid-template-columns: 1fr; }
  .sky-form-footer { align-items: flex-start; flex-direction: column; }
  .sky-rera { padding: 58px 24px; grid-template-columns: 1fr; gap: 27px; }
  .sky-rera-copy > p:not(.sky-note) { flex-direction: column; gap: 5px; }
  .sky-footer { padding: 20px 22px 73px; flex-wrap: wrap; gap: 14px; }
  .sky-footer p { width: 100%; margin: 0; line-height: 1.6; }
  .sky-footer > a:last-child { margin-left: auto; }
  .sky-float-cta { right: 12px; bottom: 12px; left: 12px; min-height: 43px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
