:root {
     --cream: #f7f3e9;
     --paper: #fcfaf5;
     --ink: #1d3040;
     --gold: #a77b32;
     --gold2: #c49a50;
     --muted: #64717a;
     --line: rgba(40, 54, 62, .2);
     --serif: "Playfair Display", Georgia, serif;
     --sans: "DM Sans", Arial, sans-serif
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth;
     scroll-padding-top: 90px
 }

 body {
     margin: 0;
     background: var(--paper);
     color: var(--ink);
     font-family: var(--sans);
     font-size: 15px;
     line-height: 1.65;
     overflow-x: hidden
 }

 a {
     color: inherit;
     text-decoration: none
 }

 img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .scroll-progress {
     position: fixed;
     z-index: 1000;
     top: 0;
     left: 0;
     height: 3px;
     width: 0;
     background: var(--gold);
     transform-origin: left
 }

 .site-header {
     height: 94px;
     padding: 0 5%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 28px;
     background: rgba(250, 247, 239, .94);
     position: sticky;
     top: 0;
     z-index: 100;
     backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(160, 130, 80, .12)
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
     white-space: nowrap
 }

 .brand-mark {
     font-family: var(--serif);
     font-size: 44px;
     color: var(--gold);
     line-height: 1;
     text-shadow: 1px 2px 0 #e6d2a4
 }

 .brand strong {
     display: block;
     font-family: var(--serif);
     font-size: 16px;
     letter-spacing: .02em
 }

 .brand small {
     display: block;
     font-size: 9px;
     letter-spacing: .28em;
     text-align: center
 }

 .main-nav {
     display: flex;
     align-items: center;
     gap: clamp(12px, 2.2vw, 34px)
 }

 .main-nav a {
     font-size: 13px;
     position: relative;
     white-space: nowrap
 }

 .main-nav a:after {
     content: "";
     position: absolute;
     bottom: -12px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--gold);
     transition: width .3s
 }

 .main-nav a:hover:after,
 .main-nav a.active:after {
     width: 100%
 }

 .main-nav a.active {
     color: var(--gold)
 }

 .call-button,
 .gold-button,
 .whatsapp-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     border-radius: 40px;
     background: linear-gradient(120deg, #a77a2d, #bd9145);
     color: white;
     padding: 13px 23px;
     font-weight: 600;
     box-shadow: 0 8px 20px rgba(150, 106, 37, .14);
     transition: transform .3s, box-shadow .3s
 }

 .call-button {
     white-space: nowrap;
     padding: 10px 20px
 }

 .call-button:hover,
 .gold-button:hover,
 .whatsapp-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 25px #9b762d35
 }

 .menu-toggle {
     display: none;
     background: none;
     border: 0;
     padding: 8px
 }

 .menu-toggle span {
     display: block;
     width: 25px;
     height: 2px;
     background: var(--ink);
     margin: 5px
 }

 .section {
     position: relative
 }

 .hero {
     min-height: 690px;
     padding: 80px 5% 0;
     display: grid;
     grid-template-columns: minmax(370px, .85fr) 1.15fr;
     align-items: center;
     overflow: hidden;
     background: radial-gradient(ellipse at 70% 20%, #fff 0, transparent 42%), var(--cream)
 }

 .hero-copy {
     position: relative;
     z-index: 2;
     padding-bottom: 70px;
     max-width: 570px
 }

 .eyebrow {
     font-size: 13px;
     letter-spacing: .22em;
     color: var(--gold);
     font-weight: 600;
     margin: 0 0 8px
 }

 .hero .eyebrow:first-child {
     font-family: var(--serif);
     font-size: 22px;
     letter-spacing: .18em
 }

 .sub-eyebrow {
     color: var(--ink);
     letter-spacing: .42em;
     padding-left: 16px
 }

 .hero h1 {
     font: 600 clamp(42px, 5vw, 70px)/1.06 var(--serif);
     letter-spacing: -.035em;
     margin: 20px 0 14px
 }

 .hero h1 em {
     font-style: normal;
     color: #92703b
 }

 .hero-intro {
     font-size: 18px;
     max-width: 430px;
     margin: 0 0 32px
 }

 .hero-highlights {
     display: flex;
     gap: 22px;
     margin: 28px 0 34px
 }

 .hero-highlights div {
     display: grid;
     grid-template-columns: 1fr;
     min-width: 105px;
     padding-right: 18px;
     border-right: 1px solid var(--line)
 }

 .hero-highlights div:last-child {
     border: 0
 }

 .line-icon {
     font-size: 30px;
     color: var(--gold);
     line-height: 1.2
 }

 .hero-highlights strong {
     font-size: 13px
 }

 .hero-highlights small {
     font-size: 12px;
     color: var(--muted)
 }

 .hero-actions {
     display: flex;
     align-items: center;
     gap: 24px;
     flex-wrap: wrap
 }

 .gold-button {
     font-size: 14px;
     padding: 14px 25px
 }

 .video-link {
     display: flex;
     align-items: center;
     gap: 12px;
     font-weight: 600;
     font-size: 13px
 }

 .play {
     width: 42px;
     height: 42px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: var(--gold);
     font-size: 13px;
     transition: .3s
 }

 .video-link:hover .play {
     background: var(--gold);
     color: white;
     transform: rotate(90deg)
 }

 .hero-image {
     position: absolute;
     right: 0;
     top: 0;
     width: 64%;
     height: 88%;
     z-index: 1;
     mask-image: linear-gradient(90deg, transparent 0%, #000 15%);
 }

 .hero-image img {
     object-position: center 48%;
 }

 .metro-note {
     position: absolute;
     right: 7%;
     top: 18%;
     z-index: 3;
     display: grid;
     grid-template-columns: 28px auto;
     align-items: center;
     line-height: 1.35
 }

 .metro-note span {
     grid-row: span 2;
     color: var(--ink);
     font-size: 25px
 }

 .metro-note strong {
     font-size: 14px
 }

 .metro-note small {
     font-size: 12px
 }

 .hero-bottom {
     grid-column: 1/-1;
     z-index: 3;
     display: grid;
     grid-template-columns: 1fr 1.4fr 2fr;
     align-items: center;
     gap: 30px;
     margin: 0 -5.6%;
     padding: 24px 5.6%;
     background: rgba(255, 253, 248, .94);
     border-top: 1px solid #fff
 }

 .location-stamp {
     display: flex;
     align-items: center;
     gap: 18px
 }

 .pin {
     font-size: 42px;
     color: var(--gold)
 }

 .location-stamp p {
     margin: 0
 }

 .location-stamp strong {
     font-family: var(--serif);
     font-size: 17px
 }

 .hero-bottom blockquote {
     margin: 0;
     padding: 0 35px;
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
     font: italic 17px/1.6 var(--serif)
 }

 .hero-bottom blockquote em {
     color: var(--gold)
 }

 .benefit-strip {
     display: flex;
     justify-content: space-around;
     gap: 12px
 }

 .benefit-strip span {
     font-size: 27px;
     color: var(--gold);
     text-align: center
 }

 .benefit-strip small {
     display: block;
     color: var(--ink);
     font-size: 11px;
     line-height: 1.35
 }

 .section-pad {
     padding: 68px 5%
 }

 .section-kicker {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 14px;
     letter-spacing: .2em;
     color: var(--gold);
     font-weight: 600;
     margin-bottom: 18px
 }

 .section-kicker span {
     font-size: 20px
 }

 .section-kicker i {
     display: inline-block;
     width: 58px;
     height: 1px;
     background: var(--gold)
 }

 h2,
 h3 {
     font-family: var(--serif);
     font-weight: 600;
     line-height: 1.15
 }

 h2 {
     font-size: clamp(32px, 3.5vw, 48px);
     margin: 12px 0 16px;
     letter-spacing: -.025em
 }

 .overview {
     background: #fbf8f0
 }

 .overview-grid {
     display: grid;
     grid-template-columns: 1.15fr .85fr;
     gap: 4%;
     align-items: center
 }

 .image-panel {
     overflow: hidden
 }

 .overview-photo {
     height: 440px
 }

 .overview-photo img,
 .entrance-photo img,
 .living-room img {
     transition: transform 1.1s cubic-bezier(.2, .7, .2, 1)
 }

 .image-panel:hover img {
     transform: scale(1.045)
 }

 .overview-copy {
     padding: 20px 3%
 }

 .small {
     font-size: 10px;
     letter-spacing: .25em
 }

 .overview-copy h2 {
     font-size: clamp(32px, 3.3vw, 47px)
 }

 .gold-text {
     color: var(--gold);
     font-family: var(--serif);
     font-size: 17px
 }

 .overview-copy>p:not(.eyebrow):not(.gold-text) {
     max-width: 550px
 }

 .stat-row {
     display: flex;
     gap: 22px;
     margin-top: 32px
 }

 .stat-row div {
     flex: 1;
     border-right: 1px solid var(--line);
     padding-right: 12px
 }

 .stat-row div:last-child {
     border: 0
 }

 .stat-row b {
     display: block;
     color: var(--gold);
     font-size: 29px
 }

 .stat-row strong {
     font-size: 13px
 }

 .design-band {
     display: grid;
     grid-template-columns: .85fr 1.15fr;
     gap: 5%;
     align-items: center;
     margin: 64px 0 35px
 }

 .design-copy {
     padding: 0 4% 0 0
 }

 .design-copy h2 {
     font-size: 36px
 }

 .design-copy>p:not(.eyebrow) {
     max-width: 510px
 }

 .entrance-photo {
     height: 300px
 }

 .mini-features {
     display: flex;
     justify-content: space-between;
     margin-top: 26px
 }

 .mini-features span {
     color: var(--gold);
     font-size: 25px;
     text-align: center
 }

 .mini-features small {
     display: block;
     color: var(--ink);
     font-size: 11px;
     line-height: 1.35
 }

 .facts-row {
     display: grid;
     grid-template-columns: 1.35fr repeat(4, 1fr);
     gap: 18px;
     padding-top: 28px;
     border-top: 1px solid var(--line)
 }

 .facts-row h3 {
     font-size: 28px;
     margin: 8px 0
 }

 .facts-row>div:not(:first-child) {
     border-left: 1px solid var(--line);
     padding-left: 20px
 }

 .facts-row b {
     display: block;
     font-size: 26px;
     color: var(--gold)
 }

 .facts-row strong,
 .facts-row small {
     display: block;
     font-size: 12px
 }

 .facts-row small {
     color: var(--muted)
 }

 .floor {
     background: #f5f0e5
 }

 .floor-grid {
     display: grid;
     grid-template-columns: .82fr 1.18fr;
     gap: 5%;
     align-items: center
 }

 .floor-copy h2 {
     font-size: clamp(34px, 3.5vw, 47px)
 }

 .floor-copy>p:not(.eyebrow) {
     max-width: 470px
 }

 .plan-cards {
     display: flex;
     gap: 12px;
     margin: 26px 0 18px
 }

 .plan-card {
     flex: 1;
     text-align: left;
     border: 1px solid #e4d9c5;
     border-radius: 5px;
     background: #fbf8f0;
     padding: 14px 16px;
     color: var(--ink);
     cursor: pointer;
     transition: .3s
 }

 .plan-card:hover,
 .plan-card.selected {
     border-color: var(--gold);
     background: #fffaf0;
     transform: translateY(-4px);
     box-shadow: 0 10px 22px #6e512015
 }

 .plan-card span {
     color: var(--gold);
     font-size: 24px;
     display: inline-block;
     margin-right: 8px
 }

 .plan-card strong {
     font: 600 20px var(--serif)
 }

 .plan-card small,
 .plan-card em {
     display: block;
     font-size: 11px;
     margin: 5px 0 0 32px
 }

 .plan-card em {
     font-style: normal;
     color: var(--gold);
     font-weight: 600
 }

 .fine-print {
     font-size: 10px;
     color: var(--muted);
     margin-top: 20px
 }

 .floor-label {
     display: grid;
     gap: 2px;
     color: var(--gold);
     font-size: 11px;
     letter-spacing: .12em
 }

 .floor-label small {
     color: var(--ink);
     letter-spacing: 0
 }

 .plan-placeholder {
     height: 390px;
     position: relative;
     margin-top: 12px;
     border: 10px solid #e6dfd1;
     background-color: #eee8dc;
     background-image: linear-gradient(90deg, #d7cbb7 1px, transparent 1px), linear-gradient(#d7cbb7 1px, transparent 1px);
     background-size: 25% 25%;
     box-shadow: 0 15px 35px #3b34201c;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 5px;
     padding: 10px;
     transform: perspective(900px) rotateY(-4deg);
     transition: transform .6s
 }

 .plan-placeholder:hover {
     transform: perspective(900px) rotateY(0)
 }

 .room {
     display: grid;
     place-items: center;
     text-align: center;
     background: #f9f4e9;
     border: 5px solid #8d8170;
     color: #5c5348;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .06em
 }

 .room-living {
     grid-column: 1/3;
     grid-row: 1/3
 }

 .room-bed {
     grid-column: 3;
     grid-row: 1
 }

 .room-kitchen {
     grid-column: 3;
     grid-row: 2
 }

 .room-bath {
     position: absolute;
     right: 5%;
     top: 44%;
     height: 55px;
     width: 90px;
     background: #d9e0df
 }

 .room-balcony {
     position: absolute;
     left: 10px;
     bottom: 10px;
     height: 42px;
     width: 32%;
     background: #d8dfd0
 }

 .north {
     position: absolute;
     right: 12px;
     bottom: 8px;
     font-size: 12px
 }

 .plan-caption {
     font-size: 11px;
     color: var(--muted)
 }

 .features {
     background: #fcfaf5
 }

 .features-layout {
     display: grid;
     grid-template-columns: .72fr 1.28fr;
     gap: 5%
 }

 .features-intro h2 {
     font-size: 43px
 }

 .features-intro>p:not(.eyebrow) {
     max-width: 350px
 }

 .foundation-card {
     margin-top: 28px;
     padding: 20px;
     background: var(--ink);
     color: white;
     border-radius: 10px;
     display: flex;
     gap: 16px;
     align-items: center
 }

 .foundation-card>span {
     font-size: 34px;
     color: #d9b56e
 }

 .foundation-card strong,
 .foundation-card small {
     display: block
 }

 .foundation-card strong {
     color: #e5c17d;
     font-size: 12px
 }

 .foundation-card small {
     font-size: 11px;
     line-height: 1.5;
     margin-top: 5px
 }

 .feature-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 25px 18px
 }

 .feature-item {
     padding: 6px 12px 14px;
     border-left: 1px solid var(--line);
     display: flex;
     flex-direction: column;
     gap: 5px
 }

 .feature-item b {
     font-size: 27px;
     color: var(--gold)
 }

 .feature-item strong {
     font-size: 12px
 }

 .feature-item small {
     font-size: 11px;
     color: var(--muted);
     line-height: 1.5
 }

 .feature-banner {
     margin: 58px -5.6% -68px;
     padding: 32px 8%;
     display: flex;
     align-items: center;
     gap: 22px;
     background: linear-gradient(90deg, #f3e8d1, #fffaf0);
     position: relative;
     overflow: hidden
 }

 .feature-banner:after {
     content: "";
     position: absolute;
     right: 0;
     top: 0;
     width: 40%;
     height: 100%;
     background: url("../images/bannerview.png") center 52%/cover;
     mask-image: linear-gradient(90deg, transparent, #000)
 }

 .feature-banner p {
     font: italic 23px/1.4 var(--serif);
     margin: 0 auto 0 0;
     z-index: 1
 }

 .feature-banner p strong {
     color: var(--gold)
 }

 .feature-banner>span,
 .feature-banner>b {
     z-index: 1
 }

 .feature-banner>span {
     color: var(--gold);
     font-size: 28px
 }

 .feature-banner>b {
     font-size: 12px
 }

 .location {
     background: #f5f1e8
 }

 .location-heading {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 30px
 }

 .location-heading>div:first-child {
     max-width: 540px
 }

 .location-heading h2 {
     font-size: clamp(38px, 4.2vw, 56px)
 }

 .location-heading p {
     max-width: 490px
 }

 .metro-callout {
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: 15px
 }

 .metro-callout b {
     font-size: 35px
 }

 .location-content {
     display: grid;
     grid-template-columns: 1.25fr .95fr;
     gap: 18px;
     margin-top: 28px
 }

 .map-card {
     height: 390px;
     position: relative;
     overflow: hidden;
     border: 1px solid #ded4c1;
     border-radius: 12px;
     background: #e9e5d8;
     background-image: linear-gradient(30deg, transparent 48%, #fff9e9 49%, #fff9e9 52%, transparent 53%), linear-gradient(120deg, transparent 47%, #d2d8ca 48%, #d2d8ca 52%, transparent 53%), linear-gradient(0deg, #d7e0d4 1px, transparent 1px), linear-gradient(90deg, #d7e0d4 1px, transparent 1px);
     background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px
 }

 .map-road {
     position: absolute;
     background: #fff8e8;
     border: 1px solid #e0d2b7
 }

 .road-one {
     width: 130%;
     height: 24px;
     top: 52%;
     left: -10%;
     transform: rotate(-13deg)
 }

 .road-two {
     height: 150%;
     width: 18px;
     top: -20%;
     left: 62%;
     transform: rotate(28deg)
 }

 .map-water {
     position: absolute;
     width: 170px;
     height: 95px;
     background: #b9d7e7;
     border-radius: 48% 52% 32% 45%;
     left: 18%;
     bottom: 10%;
     transform: rotate(-18deg)
 }

 .map-pin {
     position: absolute;
     display: grid;
     place-items: center;
     color: white;
     background: var(--ink);
     padding: 7px 11px;
     border-radius: 6px;
     font-size: 20px;
     box-shadow: 0 5px 14px #0002
 }

 .map-pin small {
     font-size: 8px;
     letter-spacing: .08em
 }

 .project-pin {
     left: 25%;
     top: 42%;
     background: var(--gold)
 }

 .metro-pin {
     right: 27%;
     top: 23%;
     background: #2779a6
 }

 .map-label {
     position: absolute;
     background: #fffdf6d9;
     padding: 5px 8px;
     border-radius: 4px;
     font-size: 10px
 }

 .school-one {
     left: 8%;
     top: 12%
 }

 .school-two {
     right: 6%;
     top: 14%
 }

 .hospital-one {
     left: 8%;
     bottom: 22%
 }

 .hospital-two {
     right: 7%;
     bottom: 25%
 }

 .park-label {
     right: 8%;
     top: 54%
 }

 .map-compass {
     position: absolute;
     right: 20px;
     bottom: 18px;
     font-size: 13px
 }

 .nearby-card {
     background: #fbf8f0;
     border-radius: 12px;
     padding: 24px
 }

 .nearby-card h3 {
     font-size: 30px;
     margin: 0 0 18px
 }

 .nearby-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px 10px
 }

 .nearby-grid p {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 0
 }

 .nearby-grid p>b {
     font-size: 25px;
     color: var(--ink)
 }

 .nearby-grid strong,
 .nearby-grid small {
     display: block
 }

 .nearby-grid strong {
     font-size: 12px
 }

 .nearby-grid small {
     font-size: 10px;
     color: var(--muted)
 }

 .why-porur {
     display: grid;
     grid-template-columns: 1.25fr repeat(5, 1fr);
     gap: 12px;
     margin-top: 34px;
     align-items: stretch
 }

 .why-porur>div:first-child {
     padding-right: 18px;
     border-left: 2px solid var(--gold);
     padding-left: 18px
 }

 .why-porur h3 {
     font-size: 27px;
     margin: 0 0 6px
 }

 .why-porur p {
     font-size: 12px;
     margin: 0
 }

 .why-card {
     background: #fffdf8;
     border: 1px solid #eee7da;
     border-radius: 7px;
     padding: 14px 10px;
     display: flex;
     flex-direction: column;
     gap: 5px
 }

 .why-card b {
     color: var(--gold);
     font-size: 24px
 }

 .why-card strong {
     font-size: 11px
 }

 .why-card small {
     font-size: 10px;
     color: var(--muted)
 }

 .pricing {
     background: #fbf8f0
 }

 .pricing-hero {
     display: grid;
     grid-template-columns: .8fr 1.2fr;
     min-height: 430px;
     align-items: center;
     padding: 45px 5% 30px;
     gap: 4%;
     background: linear-gradient(90deg, #f7f2e8 0%, #f7f2e8 43%, transparent 65%)
 }

 .pricing-copy {
     z-index: 1
 }

 .pricing-copy h2 {
     font-size: clamp(38px, 4vw, 54px)
 }

 .pricing-copy>p {
     max-width: 480px
 }

 .pricing-copy>em {
     font: italic 27px var(--serif);
     color: var(--gold)
 }

 .living-room {
     height: 360px;
     margin-right: -5.3%;
     border-radius: 5px 0 0 5px
 }

 .pricing-bottom {
     display: grid;
     grid-template-columns: 2fr .9fr;
     gap: 24px;
     padding-top: 35px;
     padding-bottom: 35px
 }

 .pricing-cards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px
 }

 .pricing-cards article {
     padding: 20px 16px;
     border: 1px solid #e7dece;
     border-radius: 8px;
     background: #fcfaf5
 }

 .pricing-cards b {
     font-size: 35px;
     color: var(--gold)
 }

 .pricing-cards h3 {
     font-size: 19px;
     margin: 8px 0
 }

 .pricing-cards p {
     font-size: 12px;
     color: var(--muted);
     margin: 0
 }

 .enquire-card {
     padding: 20px;
     background: #f3ecdd;
     border-radius: 9px
 }

 .enquire-card h3 {
     font-size: 27px;
     margin: 4px 0 8px
 }

 .enquire-card>p:not(.eyebrow) {
     font-size: 12px
 }

 .contact-actions {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin: 16px 0
 }

 .contact-actions .gold-button,
 .whatsapp-button {
     padding: 11px 16px;
     font-size: 12px
 }

 .whatsapp-button {
     background: #1b9b5c
 }

 .enquire-card>small {
     font-size: 10px;
     color: var(--muted)
 }

 .closing-band {
     display: flex;
     align-items: center;
     justify-content: space-around;
     gap: 20px;
     padding: 26px 6%;
     background: linear-gradient(90deg, #f1e5ce, #fdf9f0)
 }

 .closing-band>div {
     margin-right: auto
 }

 .closing-band h3 {
     font-size: 26px;
     margin: 0
 }

 .closing-band p {
     font-size: 12px;
     margin: 5px 0 0
 }

 .closing-band>span {
     font-size: 27px;
     color: var(--gold);
     text-align: center
 }

 .closing-band small {
     display: block;
     color: var(--ink);
     font-size: 10px;
     line-height: 1.3
 }

 .site-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding: 25px 5%;
     background: #1b3040;
     color: #fff
 }

 .site-footer .brand-mark {
     color: #d2ad67
 }

 .site-footer .brand strong {
     font-size: 14px
 }

 .site-footer p {
     font-size: 12px
 }

 .site-footer>small {
     font-size: 10px;
     color: #c2cbd0
 }

 .back-top {
     position: fixed;
     right: 22px;
     bottom: 22px;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: var(--gold);
     color: #fff;
     font-size: 20px;
     z-index: 50;
     opacity: 0;
     pointer-events: none;
     transform: translateY(12px);
     transition: .3s
 }

 .back-top.show {
     opacity: 1;
     pointer-events: auto;
     transform: none
 }

 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
 }

 .reveal.visible {
     opacity: 1;
     transform: none
 }

 .feature-item:nth-child(3n+2) {
     transition-delay: .08s
 }

 .feature-item:nth-child(3n) {
     transition-delay: .16s
 }

 @media(max-width:1100px) {
     .site-header {
         padding: 0 3%;
         gap: 15px
     }

     .brand strong {
         font-size: 13px
     }

     .main-nav {
         gap: 13px
     }

     .main-nav a {
         font-size: 11px
     }

     .hero {
         padding-left: 4%;
         padding-right: 4%;
         grid-template-columns: .9fr 1.1fr
     }

     .hero-image {
         width: 62%
     }

     .hero h1 {
         font-size: 56px
     }

     .hero-bottom {
         margin-left: -4.3%;
         margin-right: -4.3%;
         padding-left: 4.3%;
         padding-right: 4.3%
     }

     .why-porur {
         grid-template-columns: repeat(3, 1fr)
     }

     .why-porur>div:first-child {
         grid-row: span 2
     }

     .pricing-bottom {
         grid-template-columns: 1fr
     }

     .enquire-card {
         display: grid;
         grid-template-columns: 1fr 1fr;
         align-items: center;
         column-gap: 20px
     }

     .enquire-card .eyebrow,
     .enquire-card h3,
     .enquire-card>p {
         grid-column: 1
     }

     .contact-actions,
     .enquire-card>small {
         grid-column: 2;
         grid-row: 2/4
     }
 }

 @media(max-width:780px) {
     html {
         scroll-padding-top: 72px
     }

     .site-header {
         height: 72px;
         padding: 0 5%
     }

     .brand-mark {
         font-size: 36px
     }

     .brand strong {
         font-size: 12px
     }

     .brand small {
         font-size: 8px
     }

     .menu-toggle {
         display: block;
         margin-left: auto;
         order: 2
     }

     .call-button {
         order: 3;
         padding: 9px 13px;
         font-size: 12px
     }

     .main-nav {
         position: absolute;
         top: 72px;
         left: 0;
         right: 0;
         display: flex;
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         padding: 8px 5% 18px;
         background: #fbf8f0;
         box-shadow: 0 14px 20px #1b304015;
         transform: translateY(-10px);
         opacity: 0;
         pointer-events: none;
         transition: .25s
     }

     .main-nav.open {
         opacity: 1;
         pointer-events: auto;
         transform: none
     }

     .main-nav a {
         padding: 11px 0;
         border-bottom: 1px solid var(--line);
         font-size: 14px
     }

     .main-nav a:after {
         display: none
     }

     .hero {
         display: block;
         padding: 58px 6% 0;
         min-height: 0
     }

     .hero-copy {
         max-width: 100%;
         padding-bottom: 330px
     }

     .hero h1 {
         font-size: clamp(43px, 9vw, 64px)
     }

     .hero .eyebrow:first-child {
         font-size: 18px
     }

     .hero-intro {
         font-size: 16px
     }

     .hero-image {
         top: auto;
         bottom: 95px;
         width: 100%;
         height: 350px;
         mask-image: linear-gradient(180deg, transparent 0%, #000 18%)
     }

     .metro-note {
         top: auto;
         bottom: 385px;
         right: 8%;
         font-size: 12px
     }

     .hero-bottom {
         display: flex;
         flex-direction: column;
         align-items: stretch;
         gap: 16px;
         margin: 0 -6.8%;
         padding: 22px 6.8%
     }

     .hero-bottom blockquote {
         border: 0;
         border-top: 1px solid var(--line);
         border-bottom: 1px solid var(--line);
         padding: 14px 0;
         font-size: 15px
     }

     .benefit-strip {
         justify-content: space-between
     }

     .section-pad {
         padding: 52px 6%
     }

     .overview-grid,
     .design-band,
     .floor-grid,
     .features-layout,
     .location-content,
     .pricing-hero {
         grid-template-columns: 1fr
     }

     .overview-photo {
         height: 320px
     }

     .overview-copy {
         padding: 15px 0
     }

     .design-band {
         gap: 20px;
         margin: 40px 0
     }

     .entrance-photo {
         height: 250px
     }

     .facts-row {
         grid-template-columns: repeat(2, 1fr)
     }

     .facts-row>div:not(:first-child) {
         padding-left: 12px
     }

     .facts-row>div:first-child {
         grid-column: 1/-1
     }

     .floor-copy {
         margin-bottom: 15px
     }

     .plan-placeholder {
         height: 340px
     }

     .features-layout {
         gap: 35px
     }

     .feature-list {
         grid-template-columns: repeat(2, 1fr);
         gap: 18px 10px
     }

     .feature-banner {
         margin: 45px -6.8% -52px;
         padding: 25px 7%;
         flex-wrap: wrap
     }

     .feature-banner:after {
         opacity: .25;
         width: 55%
     }

     .feature-banner p {
         font-size: 19px
     }

     .location-heading {
         align-items: flex-start;
         flex-direction: column
     }

     .location-content {
         gap: 15px
     }

     .map-card {
         height: 320px
     }

     .why-porur {
         grid-template-columns: repeat(2, 1fr)
     }

     .why-porur>div:first-child {
         grid-column: 1/-1;
         grid-row: auto
     }

     .pricing-hero {
         padding: 45px 6% 0;
         gap: 15px;
         background: #f7f2e8
     }

     .living-room {
         height: 270px;
         margin: 0 -6.8%
     }

     .pricing-bottom {
         padding: 28px 6%
     }

     .pricing-cards {
         grid-template-columns: repeat(2, 1fr)
     }

     .enquire-card {
         display: block
     }

     .closing-band {
         flex-wrap: wrap;
         justify-content: flex-start;
         padding: 25px 6%
     }

     .closing-band>div {
         width: 100%
     }

     .site-footer {
         flex-wrap: wrap;
         padding: 25px 6%
     }

     .site-footer>small {
         width: 100%
     }
 }

 @media(max-width:440px) {
     .brand {
         gap: 7px
     }

     .brand-mark {
         font-size: 30px
     }

     .brand strong {
         font-size: 10px
     }

     .brand small {
         font-size: 7px;
         letter-spacing: .2em
     }

     .call-button {
         font-size: 0;
         gap: 0;
         border-radius: 50%;
         width: 38px;
         height: 38px;
         padding: 0
     }

     .call-button span {
         display: none
     }

     .hero {
         padding-top: 42px
     }

     .hero-copy {
         padding-bottom: 285px
     }

     .hero h1 {
         font-size: 42px
     }

     .hero-highlights {
         gap: 10px
     }

     .hero-highlights div {
         min-width: 0;
         padding-right: 9px
     }

     .hero-highlights strong {
         font-size: 11px
     }

     .hero-highlights small {
         font-size: 10px
     }

     .hero-image {
         height: 300px;
         bottom: 85px
     }

     .metro-note {
         bottom: 330px
     }

     .hero-actions {
         gap: 15px
     }

     .gold-button {
         padding: 12px 17px;
         font-size: 12px
     }

     .video-link {
         font-size: 11px
     }

     .play {
         width: 36px;
         height: 36px
     }

     .benefit-strip span {
         font-size: 22px
     }

     .benefit-strip small {
         font-size: 9px
     }

     .stat-row {
         gap: 10px
     }

     .stat-row strong {
         font-size: 11px
     }

     .design-copy h2 {
         font-size: 32px
     }

     .facts-row {
         gap: 12px
     }

     .plan-cards {
         flex-direction: column
     }

     .plan-placeholder {
         height: 290px
     }

     .feature-list {
         grid-template-columns: 1fr 1fr
     }

     .feature-item {
         padding-left: 8px
     }

     .feature-item strong {
         font-size: 11px
     }

     .feature-banner p {
         width: 100%
     }

     .feature-banner:after {
         width: 100%;
         opacity: .12
     }

     .nearby-card {
         padding: 18px
     }

     .nearby-grid {
         grid-template-columns: 1fr;
         gap: 13px
     }

     .map-card {
         height: 280px
     }

     .map-label {
         font-size: 8px
     }

     .why-porur {
         grid-template-columns: 1fr 1fr
     }

     .pricing-cards {
         grid-template-columns: 1fr 1fr
     }

     .pricing-cards article {
         padding: 14px 11px
     }

     .pricing-cards h3 {
         font-size: 16px
     }

     .pricing-cards p {
         font-size: 11px
     }

     .contact-actions {
         flex-direction: column;
         align-items: stretch
     }

     .closing-band>span {
         flex: 1
     }

     .site-footer p {
         margin: 0
     }
 }

 @media(prefers-reduced-motion:reduce) {

     *,
     *:before,
     *:after {
         scroll-behavior: auto !important;
         animation-duration: .01ms !important;
         transition-duration: .01ms !important
     }

     .reveal {
         opacity: 1;
         transform: none
     }
 }



 /* LOCATION: responsive live map, nearby list and photo cards */
 .location-content {
     display: grid;
     grid-template-columns: 1.2fr .9fr;
     gap: 18px;
     align-items: stretch;
 }

 .map-card {
     position: relative;
     min-height: 390px;
     height: 100%;
     overflow: hidden;
     padding: 0;
     border: 1px solid #ded4c1;
     border-radius: 12px;
     background: #e8e3d8;
 }

 .map-card iframe {
     display: block;
     width: 100%;
     height: 100%;
     min-height: 390px;
     border: 0;
 }

 .map-open-link {
     position: absolute;
     left: 14px;
     bottom: 14px;
     z-index: 2;
     display: inline-flex;
     padding: 8px 12px;
     border-radius: 24px;
     background: rgba(255, 253, 248, .96);
     color: var(--ink);
     font-size: 11px;
     font-weight: 700;
     box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
 }

 .map-card .map-road,
 .map-card .map-water,
 .map-card .map-pin,
 .map-card .map-label,
 .map-card .map-compass {
     display: none !important;
 }

 .nearby-card {
     min-width: 0;
     padding: 24px;
     border-radius: 12px;
     background: #fbf8f0;
 }

 .nearby-card h3 {
     margin: 0 0 18px;
     font-size: 30px;
 }

 .nearby-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px 14px;
 }

 .nearby-grid p {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 0;
     min-width: 0;
 }

 .nearby-grid p>b {
     flex: 0 0 auto;
     font-size: 25px;
     color: var(--ink);
 }

 .nearby-grid strong,
 .nearby-grid small {
     display: block;
 }

 .nearby-grid strong {
     font-size: 12px;
 }

 .nearby-grid small {
     font-size: 10px;
     color: var(--muted);
 }

 /* "Why Porur?" intro + five photographic cards in one row */
 .why-porur {
     display: grid;
     grid-template-columns: minmax(170px, .85fr) minmax(0, 4fr);
     gap: 18px;
     margin-top: 30px;
     align-items: stretch;
 }

 .why-porur-intro {
     padding: 8px 18px;
     border-left: 2px solid var(--gold);
 }

 .why-porur-intro h3 {
     margin: 0 0 8px;
     font-size: 27px;
 }

 .why-porur-intro p {
     margin: 0;
     font-size: 12px;
     line-height: 1.65;
 }

 .why-porur-cards {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: 12px;
     min-width: 0;
 }

 .why-card {
     min-width: 0;
     overflow: hidden;
     border: 1px solid #eee7da;
     border-radius: 8px;
     background: #fffdf8;
     box-shadow: 0 4px 14px rgba(35, 45, 50, .04);
     transition: transform .3s ease, box-shadow .3s ease;
 }

 .why-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 24px rgba(35, 45, 50, .12);
 }

 .why-card>img {
     display: block;
     width: 100%;
     height: 105px;
     object-fit: cover;
     object-position: center;
 }

 .why-card-caption {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 9px 9px 10px;
 }

 .why-card-caption>b {
     flex: 0 0 26px;
     width: 26px;
     height: 26px;
     display: grid;
     place-items: center;
     border: 1px solid var(--gold);
     border-radius: 50%;
     color: var(--gold);
     font-size: 14px;
 }

 .why-card-caption span {
     min-width: 0;
 }

 .why-card-caption strong,
 .why-card-caption small {
     display: block;
     line-height: 1.35;
 }

 .why-card-caption strong {
     font-size: 10px;
 }

 .why-card-caption small {
     margin-top: 3px;
     color: var(--muted);
     font-size: 9px;
 }

 @media (max-width: 1000px) {
     .location-content {
         grid-template-columns: 1fr 1fr;
     }

     .why-porur {
         grid-template-columns: 1fr;
     }

     .why-porur-intro {
         max-width: 480px;
     }

     .why-porur-cards {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }

 @media (max-width: 780px) {
     .location-content {
         grid-template-columns: 1fr;
     }

     .map-card,
     .map-card iframe {
         min-height: 340px;
         height: 340px;
     }

     .nearby-card {
         padding: 20px;
     }

     .why-porur-cards {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
     }

     .why-card>img {
         height: 125px;
     }
 }

 @media (max-width: 440px) {

     .map-card,
     .map-card iframe {
         min-height: 290px;
         height: 290px;
     }

     .nearby-grid {
         grid-template-columns: 1fr;
         gap: 13px;
     }

     .why-porur-cards {
         grid-template-columns: 1fr 1fr;
         gap: 9px;
     }

     .why-card>img {
         height: 100px;
     }

     .why-card-caption {
         gap: 6px;
         padding: 8px 7px;
     }

     .why-card-caption>b {
         flex-basis: 23px;
         width: 23px;
         height: 23px;
         font-size: 12px;
     }

     .why-card-caption strong {
         font-size: 9px;
     }

     .why-card-caption small {
         font-size: 8px;
     }
 }



 /* LOCATION HEADING: metro image placed in the open right-hand area */
 .location-heading {
     display: grid !important;
     grid-template-columns: minmax(300px, .88fr) minmax(0, 1.42fr);
     align-items: center;
     gap: clamp(24px, 4vw, 58px);
     margin-bottom: 28px;
 }

 .location-heading>div:first-child {
     max-width: 540px;
 }

 .location-heading h2 {
     margin-top: 0;
 }

 .location-hero-image {
     position: relative;
     width: 100%;
     height: clamp(190px, 22vw, 285px);
     min-width: 0;
     overflow: hidden;
     border-radius: 145px 12px 12px 145px;
     background: #e6e1d6;
     box-shadow: 0 12px 32px rgba(34, 43, 48, .10);
 }

 .location-hero-image img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 /* Nearby destination pictograms — consistent navy line icons */
 .nearby-grid p {
     align-items: center;
     gap: 12px;
 }

 .nearby-grid p>b.nearby-icon {
     display: grid;
     flex: 0 0 30px;
     width: 30px;
     height: 30px;
     place-items: center;
     color: #263440;
     font-size: initial;
 }

 .nearby-icon svg {
     display: block;
     width: 25px;
     height: 25px;
 }

 .nearby-icon.hospital-icon {
     width: 34px !important;
     height: 34px !important;
     flex-basis: 34px !important;
     border-radius: 50%;
     background: rgba(255, 252, 245, .72) !important;
     color: #263440 !important;
 }

 .nearby-icon.hospital-icon svg {
     width: 19px !important;
     height: 19px !important;
     stroke: #263440 !important;
 }

 .nearby-grid strong {
     color: #263440;
 }

 @media (max-width: 900px) {
     .location-heading {
         grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
         gap: 22px;
     }

     .location-hero-image {
         height: 210px;
         border-radius: 100px 10px 10px 100px;
     }
 }

 @media (max-width: 680px) {
     .location-heading {
         grid-template-columns: 1fr;
         gap: 18px;
         margin-bottom: 22px;
     }

     .location-hero-image {
         height: 220px;
         border-radius: 18px;
     }
 }

 @media (max-width: 440px) {
     .location-hero-image {
         height: 185px;
         border-radius: 15px;
     }
 }



 /* =========================================================
   CONSISTENT GOLD CIRCULAR ICON SYSTEM
   Applied to project facts, features, destination cards,
   location highlights, pricing cards and footer highlights.
   ========================================================= */
 .round-icon {
     width: 44px;
     height: 44px;
     min-width: 44px;
     display: inline-grid !important;
     place-items: center;
     flex: 0 0 44px;
     border: 1.5px solid var(--gold2);
     border-radius: 50%;
     color: var(--gold);
     background: rgba(255, 252, 245, .72);
     line-height: 1;
     font-size: 0 !important;
     padding: 0;
     margin: 0;
     box-shadow: inset 0 0 0 3px rgba(196, 154, 80, .07);
 }

 .round-icon svg {
     display: block;
     width: 23px;
     height: 23px;
     stroke: currentColor;
     fill: none;
 }

 .hero-highlights .round-icon,
 .stat-row .round-icon,
 .facts-row .round-icon,
 .feature-item .round-icon,
 .foundation-card .round-icon,
 .why-card-caption .round-icon,
 .pricing-cards .round-icon,
 .nearby-grid .round-icon {
     margin-bottom: 7px;
 }

 .hero-highlights .round-icon {
     width: 40px;
     height: 40px;
     min-width: 40px;
     flex-basis: 40px;
 }

 .stat-row .round-icon,
 .facts-row .round-icon {
     width: 42px;
     height: 42px;
     min-width: 42px;
     flex-basis: 42px;
 }

 .feature-item .round-icon {
     width: 43px;
     height: 43px;
     min-width: 43px;
     flex-basis: 43px;
     margin-bottom: 5px;
 }

 .foundation-card .round-icon {
     width: 48px;
     height: 48px;
     min-width: 48px;
     flex-basis: 48px;
     color: #e2bd78;
     border-color: #d9b56e;
     background: rgba(255, 255, 255, .06);
 }

 .nearby-grid .round-icon {
     width: 34px;
     height: 34px;
     min-width: 34px;
     flex-basis: 34px;
     margin: 0;
 }

 .nearby-grid .round-icon svg {
     width: 19px;
     height: 19px;
 }

 .nearby-grid .round-icon.hospital-icon {
     color: #263440 !important;
     background: rgba(255, 252, 245, .72);
     border: 1.5px solid var(--gold2);
 }

 .why-card-caption .round-icon {
     width: 30px;
     height: 30px;
     min-width: 30px;
     flex-basis: 30px;
     margin: 0;
 }

 .why-card-caption .round-icon svg {
     width: 17px;
     height: 17px;
 }

 .pricing-cards .round-icon {
     width: 46px;
     height: 46px;
     min-width: 46px;
     flex-basis: 46px;
 }

 .mini-features>span {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
     color: var(--ink);
     font-size: inherit;
 }

 .mini-features .round-icon {
     width: 40px;
     height: 40px;
     min-width: 40px;
     flex-basis: 40px;
 }

 .mini-features .round-icon svg {
     width: 21px;
     height: 21px;
 }

 .mini-features small {
     margin-top: 0;
 }

 .closing-band>span {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
     color: var(--ink);
     font-size: inherit;
     text-align: center;
 }

 .closing-band .round-icon {
     width: 42px;
     height: 42px;
     min-width: 42px;
     flex-basis: 42px;
 }

 .closing-band .round-icon svg {
     width: 22px;
     height: 22px;
 }

 .closing-band>span small {
     display: block;
     color: var(--ink);
     font-size: 11px;
     line-height: 1.35;
 }

 @media (max-width: 900px) {
     .feature-list {
         gap: 20px 12px;
     }

     .facts-row {
         gap: 12px;
     }
 }

 @media (max-width: 680px) {
     .round-icon {
         width: 40px;
         height: 40px;
         min-width: 40px;
         flex-basis: 40px;
     }

     .feature-list {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .mini-features {
         gap: 10px;
         flex-wrap: wrap;
     }

     .closing-band {
         flex-wrap: wrap;
     }

     .closing-band>div {
         flex: 1 0 100%;
     }
 }

 /* =========================================================
   METRO PROMO BANNER — centred message + premium CTA
   ========================================================= */
 .metro-promo-banner {
     display: grid;
     grid-template-columns: minmax(250px, 1.05fr) minmax(280px, 1fr) minmax(285px, .95fr);
     align-items: center;
     gap: clamp(16px, 2.2vw, 34px);
     min-height: 165px;
     margin: 58px -5.6% -68px;
     padding: 24px 5.6%;
     position: relative;
     isolation: isolate;
     overflow: hidden;
     background-color: #f7f3e9;
     background-image:
         linear-gradient(90deg,
             rgba(247, 243, 233, 0.00) 0%,
             rgba(247, 243, 233, 0.04) 28%,
             rgba(247, 243, 233, 0.82) 43%,
             rgba(247, 243, 233, 0.97) 57%,
             rgba(247, 243, 233, 0.90) 100%),
         url("../images/metro-building-banner.png");
     background-size: cover;
     background-position: center 52%;
 }

 .metro-promo-banner::after {
     content: none;
 }

 .metro-banner-spacer {
     min-height: 1px;
 }

 .metro-banner-copy {
     position: relative;
     z-index: 1;
     text-align: center;
     justify-self: center;
     width: 100%;
     max-width: 410px;
     padding: 8px 0;
 }

 .metro-banner-copy h3 {
     margin: 0 0 8px;
     color: #1d3040;
     font-family: var(--serif);
     font-size: clamp(19px, 1.65vw, 26px);
     font-weight: 600;
     line-height: 1.2;
 }

 .metro-banner-copy p {
     margin: 0;
     color: #394650;
     font-family: var(--sans);
     font-size: clamp(11px, .9vw, 13px);
     line-height: 1.65;
 }

 .metro-banner-cta {
     position: relative;
     z-index: 2;
     justify-self: end;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     width: min(100%, 330px);
     min-height: 76px;
     padding: 13px 21px;
     border: 1.5px solid #c49a50;
     border-radius: 50px;
     background: linear-gradient(110deg, #1d3040 0%, #263d50 100%);
     color: #f2d18c;
     text-decoration: none;
     box-shadow: 0 8px 22px rgba(24, 43, 57, .20), inset 0 0 0 3px rgba(255, 255, 255, .04);
     transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
 }

 .metro-banner-cta:hover {
     transform: translateY(-3px);
     background: linear-gradient(110deg, #263d50 0%, #314d62 100%);
     box-shadow: 0 13px 26px rgba(24, 43, 57, .27), inset 0 0 0 3px rgba(255, 255, 255, .06);
 }

 .metro-cta-pin {
     display: grid;
     place-items: center;
     flex: 0 0 32px;
     width: 32px;
     height: 32px;
     color: #e5bd70;
 }

 .metro-cta-pin svg {
     display: block;
     width: 29px;
     height: 29px;
     fill: none;
 }

 .metro-cta-label {
     display: flex;
     flex: 1;
     flex-direction: column;
     gap: 3px;
     text-align: left;
     line-height: 1.25;
 }

 .metro-cta-label strong {
     color: #f1cf88;
     font-family: var(--sans);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .045em;
     white-space: nowrap;
 }

 .metro-cta-label small {
     color: #f8f3e9;
     font-family: var(--sans);
     font-size: 9px;
     font-weight: 500;
     letter-spacing: .08em;
     white-space: nowrap;
 }

 .metro-cta-arrow {
     flex: 0 0 auto;
     color: #f8f3e9;
     font-size: 25px;
     line-height: 1;
     transition: transform .25s ease;
 }

 .metro-banner-cta:hover .metro-cta-arrow {
     transform: translateX(5px);
 }

 @media (max-width: 900px) {
     .metro-promo-banner {
         grid-template-columns: minmax(150px, .75fr) minmax(230px, 1fr) minmax(235px, .95fr);
         gap: 14px;
         min-height: 145px;
         padding: 20px 5.5%;
         background-position: 42% center;
     }

     .metro-banner-cta {
         min-height: 66px;
         gap: 10px;
         padding: 11px 15px;
     }
 }

 @media (max-width: 680px) {
     .metro-promo-banner {
         grid-template-columns: 1fr;
         justify-items: center;
         gap: 14px;
         min-height: 250px;
         margin: 42px -6.8% -52px;
         padding: 28px 7%;
         background-image:
             linear-gradient(180deg, rgba(247, 243, 233, .18) 0%, rgba(247, 243, 233, .78) 38%, rgba(247, 243, 233, .98) 100%),
             url("../images/metro-building-banner.png");
         background-position: center top;
         background-size: cover;
     }

     .metro-banner-spacer {
         display: none;
     }

     .metro-banner-copy {
         max-width: 100%;
         padding-top: 70px;
     }

     .metro-banner-copy h3 {
         font-size: 22px;
     }

     .metro-banner-copy p {
         font-size: 12px;
     }

     .desktop-break {
         display: none;
     }

     .metro-banner-cta {
         justify-self: center;
         width: min(100%, 320px);
         min-height: 62px;
     }
 }

 @media (max-width: 380px) {
     .metro-promo-banner {
         padding-left: 6%;
         padding-right: 6%;
     }

     .metro-banner-cta {
         gap: 8px;
         padding: 10px 13px;
     }

     .metro-cta-label strong {
         font-size: 11px;
     }

     .metro-cta-label small {
         font-size: 8px;
     }
 }


 /* =========================================================
   FULL-WIDTH RESPONSIVE HERO BANNER
   Uses the supplied complete banner artwork without cropping.
   ========================================================= */
 .hero.hero-full-banner {
     display: block;
     position: relative;
     width: 100%;
     min-height: 0;
     height: auto;
     padding: 0;
     margin: 0;
     overflow: hidden;
     background: #f7f3e9;
     line-height: 0;
     isolation: isolate;
 }

 .hero-full-banner .hero-banner-image {
     display: block;
     width: 100%;
     height: auto;
     max-width: 100%;
     aspect-ratio: 1231 / 575;
     object-fit: contain;
     object-position: center;
     margin: 0;
 }

 /* Transparent, accessible click targets positioned over the artwork's
   site-visit and project-video controls. */
 .hero-full-banner .hero-banner-cta {
     position: absolute;
     z-index: 2;
     left: 8.1%;
     top: 80.2%;
     width: 15.8%;
     height: 7.6%;
     display: block;
     border-radius: 999px;
     background: transparent;
     cursor: pointer;
     line-height: normal;
     outline-offset: 4px;
 }

 .hero-full-banner .hero-banner-cta:focus-visible {
     outline: 3px solid #1d3040;
 }

 @media (max-width: 780px) {
     .hero.hero-full-banner {
         min-height: 0;
         padding: 0;
     }

     .hero-full-banner .hero-banner-image {
         width: 100%;
         height: auto;
         aspect-ratio: 1231 / 575;
         object-fit: contain;
     }

     .hero-full-banner .hero-banner-cta {
         left: 8.1%;
         top: 80.2%;
         width: 15.8%;
         height: 7.6%;
     }
 }

 @media (max-width: 440px) {
     .hero.hero-full-banner {
         width: 100%;
         overflow: hidden;
     }

     .hero-full-banner .hero-banner-image {
         width: 100%;
         height: auto;
         min-height: 0;
     }
 }

 /* =========================================================
   NEW FULL-BLEED HERO
   Background artwork: images/hero.jpg
   Copy remains live HTML for responsive sizing and SEO.
   ========================================================= */
 .hero.hero-background {
     position: relative;
     isolation: isolate;
     display: flex;
     align-items: center;
     width: 100%;
     min-height: clamp(560px, 48vw, 760px);
     height: auto;
     padding: clamp(44px, 6vw, 86px) 6.2%;
     margin: 0;
     overflow: hidden;
     background-color: #f8f4eb;
     background-image:
         linear-gradient(90deg,
             rgba(250, 247, 239, .98) 0%,
             rgba(250, 247, 239, .94) 25%,
             rgba(250, 247, 239, .76) 39%,
             rgba(250, 247, 239, .22) 53%,
             rgba(250, 247, 239, 0) 66%),
         url("../images/hero.jpg");
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
 }

 .hero-background .hero-copy {
     position: relative;
     z-index: 2;
     width: min(47%, 610px);
     max-width: 610px;
     padding: 0;
     margin: 0;
     line-height: 1.55;
 }

 .hero-background .hero-brand {
     margin: 0 0 1px;
     color: #a77b32;
     font-family: var(--serif);
     font-size: clamp(16px, 1.45vw, 22px);
     font-weight: 700;
     letter-spacing: .17em;
     line-height: 1.35;
 }

 .hero-background .sub-eyebrow {
     margin: 0 0 clamp(18px, 2vw, 28px);
     padding-left: 12px;
     color: #1d3040;
     font-size: clamp(9px, .8vw, 12px);
     letter-spacing: .42em;
     line-height: 1.5;
 }

 .hero-background h1 {
     margin: 0 0 15px;
     color: #1d3040;
     font-family: var(--serif);
     font-size: clamp(38px, 4.25vw, 68px);
     font-weight: 600;
     letter-spacing: -.045em;
     line-height: 1.04;
 }

 .hero-background h1 em {
     color: #92703b;
     font-style: normal;
 }

 .hero-background .hero-intro {
     max-width: 450px;
     margin: 0;
     color: #263847;
     font-size: clamp(14px, 1.12vw, 18px);
     line-height: 1.55;
 }

 .hero-background .hero-highlights {
     display: flex;
     align-items: stretch;
     gap: clamp(12px, 1.5vw, 24px);
     margin: clamp(22px, 2.5vw, 34px) 0 clamp(24px, 2.6vw, 36px);
 }

 .hero-background .hero-highlights>div {
     display: flex;
     flex: 0 1 auto;
     flex-direction: column;
     min-width: 0;
     padding: 0 clamp(10px, 1.4vw, 20px) 0 0;
     border-right: 1px solid rgba(40, 54, 62, .27);
     line-height: 1.35;
 }

 .hero-background .hero-highlights>div:last-child {
     padding-right: 0;
     border-right: 0;
 }

 .hero-background .line-icon {
     display: block;
     margin-bottom: 7px;
     color: #a77b32;
     font-family: Arial, sans-serif;
     font-size: clamp(24px, 2.2vw, 32px);
     line-height: 1;
 }

 .hero-background .hero-highlights strong {
     color: #243746;
     font-size: clamp(10px, .88vw, 13px);
     white-space: nowrap;
 }

 .hero-background .hero-highlights small {
     margin-top: 2px;
     color: #53616a;
     font-size: clamp(9px, .78vw, 12px);
     white-space: nowrap;
 }

 .hero-background .hero-actions {
     display: flex;
     align-items: center;
     gap: clamp(14px, 2vw, 26px);
     flex-wrap: wrap;
 }

 .hero-background .gold-button {
     min-height: 44px;
     padding: 12px 24px;
     border-radius: 40px;
     font-size: 13px;
     white-space: nowrap;
 }

 .hero-background .video-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: #263847;
     font-size: 12px;
     font-weight: 600;
     white-space: nowrap;
 }

 .hero-background .play {
     display: grid;
     flex: 0 0 38px;
     width: 38px;
     height: 38px;
     place-items: center;
     border: 1px solid #a77b32;
     border-radius: 50%;
     color: #a77b32;
     font-size: 12px;
 }

 .hero-background .metro-note {
     position: absolute;
     z-index: 2;
     top: 16%;
     right: 5.5%;
     display: grid;
     grid-template-columns: 24px auto;
     align-items: center;
     color: #1d3040;
     line-height: 1.3;
 }

 .hero-background .metro-note span {
     grid-row: 1 / span 2;
     color: #1d3040;
     font-size: 22px;
 }

 .hero-background .metro-note strong {
     font-size: 12px;
 }

 .hero-background .metro-note small {
     font-size: 10px;
 }

 .hero-background .hero-bottom,
 .hero-background>.hero-image {
     display: none;
 }

 @media (min-width: 1500px) {
     .hero.hero-background {
         min-height: min(54vw, 850px);
     }
 }

 @media (max-width: 1024px) {
     .hero.hero-background {
         min-height: 590px;
         padding-left: 5%;
         background-position: 57% center;
         background-image:
             linear-gradient(90deg,
                 rgba(250, 247, 239, .98) 0%,
                 rgba(250, 247, 239, .93) 31%,
                 rgba(250, 247, 239, .68) 49%,
                 rgba(250, 247, 239, .08) 75%),
             url("../images/hero.jpg");
     }

     .hero-background .hero-copy {
         width: 53%;
     }

     .hero-background h1 {
         font-size: clamp(40px, 5.1vw, 54px);
     }

     .hero-background .hero-highlights {
         gap: 12px;
     }
 }

 @media (max-width: 700px) {
     .hero.hero-background {
         display: flex;
         align-items: flex-start;
         min-height: 0;
         padding: 36px 6% 34px;
         background-position: 62% bottom;
         background-size: auto 58%;
         background-color: #f8f4eb;
         background-image:
             linear-gradient(180deg,
                 rgba(250, 247, 239, 1) 0%,
                 rgba(250, 247, 239, .98) 42%,
                 rgba(250, 247, 239, .82) 61%,
                 rgba(250, 247, 239, .08) 100%),
             url("../images/hero.jpg");
     }

     .hero-background .hero-copy {
         width: 100%;
         max-width: 560px;
     }

     .hero-background .hero-brand {
         font-size: 17px;
         letter-spacing: .13em;
     }

     .hero-background .sub-eyebrow {
         margin-bottom: 16px;
         font-size: 9px;
         letter-spacing: .34em;
     }

     .hero-background h1 {
         max-width: 480px;
         margin-bottom: 12px;
         font-size: clamp(36px, 8.5vw, 52px);
         line-height: 1.04;
     }

     .hero-background .hero-intro {
         max-width: 390px;
         font-size: 14px;
     }

     .hero-background .desktop-only {
         display: none;
     }

     .hero-background .hero-highlights {
         max-width: 470px;
         gap: 12px;
         margin: 19px 0 20px;
     }

     .hero-background .hero-highlights>div {
         flex: 1 1 0;
         padding-right: 9px;
     }

     .hero-background .line-icon {
         margin-bottom: 5px;
         font-size: 25px;
     }

     .hero-background .hero-highlights strong {
         font-size: 10px;
     }

     .hero-background .hero-highlights small {
         font-size: 9px;
         white-space: normal;
     }

     .hero-background .hero-actions {
         gap: 12px;
     }

     .hero-background .gold-button {
         min-height: 42px;
         padding: 11px 17px;
         font-size: 12px;
     }

     .hero-background .video-link {
         gap: 7px;
         font-size: 11px;
     }

     .hero-background .play {
         flex-basis: 34px;
         width: 34px;
         height: 34px;
     }

     .hero-background .metro-note {
         display: none;
     }
 }

 @media (max-width: 420px) {
     .hero.hero-background {
         padding: 30px 5.5% 28px;
         background-size: auto 50%;
         background-position: 64% bottom;
     }

     .hero-background .hero-brand {
         font-size: 15px;
     }

     .hero-background h1 {
         font-size: clamp(33px, 9vw, 39px);
     }

     .hero-background .hero-highlights {
         gap: 8px;
     }

     .hero-background .hero-highlights>div {
         padding-right: 7px;
     }

     .hero-background .hero-highlights strong {
         font-size: 9px;
     }

     .hero-background .hero-highlights small {
         font-size: 8px;
     }

     .hero-background .hero-actions {
         align-items: flex-start;
         flex-direction: column;
     }
 }

 /* =========================================================
   ENHANCED VECTOR SVG ICON SYSTEM
   Consistent, crisp, scalable icons perfectly matched to content
   ========================================================= */
 .brand-mark {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: initial;
     line-height: 1;
 }

 .brand-mark svg {
     display: block;
     width: 36px;
     height: 36px;
     color: var(--gold);
     filter: drop-shadow(1px 2px 0 rgba(230, 210, 164, 0.45));
 }

 .site-footer .brand-mark svg {
     color: #d2ad67;
     filter: none;
 }

 .call-button svg,
 .whatsapp-button svg {
     display: inline-block;
     flex-shrink: 0;
     vertical-align: middle;
 }

 .line-icon {
     display: flex;
     align-items: center;
 }

 .line-icon svg,
 .hero-background .line-icon svg {
     display: block;
     width: clamp(24px, 2.2vw, 30px);
     height: clamp(24px, 2.2vw, 30px);
     stroke: currentColor;
     fill: none;
 }

 .metro-note span svg,
 .hero-background .metro-note span svg {
     display: block;
     width: 24px;
     height: 24px;
     stroke: var(--ink);
     fill: none;
 }

 .plan-card span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
 }

 .plan-card span svg {
     display: block;
     width: 22px;
     height: 22px;
     stroke: currentColor;
     fill: none;
 }

 .btn-arrow {
     display: inline-block;
     vertical-align: middle;
     transition: transform .25s ease;
 }

 .gold-button:hover .btn-arrow,
 .metro-banner-cta:hover .metro-cta-arrow svg {
     transform: translateX(4px);
 }

 .back-top svg {
     display: block;
     width: 20px;
     height: 20px;
     stroke: #fff;
     margin: auto;
 }

 @media (max-width: 900px) {
     .brand-mark svg {
         width: 30px;
         height: 30px;
     }
 }

 @media (max-width: 680px) {

     .line-icon svg,
     .hero-background .line-icon svg {
         width: 22px;
         height: 22px;
     }
 }

 /* =========================================================
   ENHANCED VECTOR SVG ICON SYSTEM
   Consistent, crisp, scalable icons perfectly matched to content
   ========================================================= */
 .brand-mark {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: initial;
     line-height: 1;
 }

 .brand-mark svg {
     display: block;
     width: 36px;
     height: 36px;
     color: var(--gold);
     filter: drop-shadow(1px 2px 0 rgba(230, 210, 164, 0.45));
 }

 .site-footer .brand-mark svg {
     color: #d2ad67;
     filter: none;
 }

 .call-button svg,
 .whatsapp-button svg {
     display: inline-block;
     flex-shrink: 0;
     vertical-align: middle;
 }

 .line-icon {
     display: flex;
     align-items: center;
 }

 .line-icon svg,
 .hero-background .line-icon svg {
     display: block;
     width: clamp(24px, 2.2vw, 30px);
     height: clamp(24px, 2.2vw, 30px);
     stroke: currentColor;
     fill: none;
 }

 .metro-note span svg,
 .hero-background .metro-note span svg {
     display: block;
     width: 24px;
     height: 24px;
     stroke: var(--ink);
     fill: none;
 }

 .plan-card span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
 }

 .plan-card span svg {
     display: block;
     width: 22px;
     height: 22px;
     stroke: currentColor;
     fill: none;
 }

 .btn-arrow {
     display: inline-block;
     vertical-align: middle;
     transition: transform .25s ease;
 }

 .gold-button:hover .btn-arrow,
 .metro-banner-cta:hover .metro-cta-arrow svg {
     transform: translateX(4px);
 }

 .back-top svg {
     display: block;
     width: 20px;
     height: 20px;
     stroke: #fff;
     margin: auto;
 }

 @media (max-width: 900px) {
     .brand-mark svg {
         width: 30px;
         height: 30px;
     }
 }

 @media (max-width: 680px) {

     .line-icon svg,
     .hero-background .line-icon svg {
         width: 22px;
         height: 22px;
     }
 }



 /* =========================================================
   LOCATION CLOSING BAND — METRO BACKGROUND + CENTRED ICONS
   ========================================================= */
 .closing-band {
     isolation: isolate;
     position: relative;
     display: grid;
     grid-template-columns: minmax(245px, .82fr) minmax(0, 1.55fr);
     align-items: center;
     gap: clamp(24px, 4vw, 64px);
     min-height: 190px;
     padding: 30px clamp(28px, 6.5vw, 100px);
     overflow: hidden;
     background:
         linear-gradient(105deg,
             rgba(250, 246, 235, .98) 0%,
             rgba(250, 246, 235, .94) 34%,
             rgba(250, 246, 235, .72) 58%,
             rgba(250, 246, 235, .18) 100%),
         linear-gradient(180deg, #f7ead4 0%, #e8d8bc 100%);
 }

 .closing-band::before {
     content: "";
     position: absolute;
     z-index: -1;
     right: -1%;
     bottom: -2px;
     width: min(78%, 1120px);
     height: 100%;
     background-image: url("../images/metro-footer-scene.png");
     background-repeat: no-repeat;
     background-position: right bottom;
     background-size: auto 112%;
     transform: scaleX(-1);
     transform-origin: center;
     pointer-events: none;
 }

 .closing-copy {
     position: relative;
     z-index: 1;
     width: 100%;
     max-width: 330px;
 }

 .closing-copy .closing-eyebrow {
     margin: 0 0 7px;
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .24em;
 }

 .closing-copy h3 {
     margin: 0 0 9px;
     color: #1d3040;
     font-family: var(--serif);
     font-size: clamp(22px, 2.15vw, 31px);
     font-weight: 600;
     line-height: 1.12;
     letter-spacing: -.025em;
 }

 .closing-copy>p:last-child {
     max-width: 330px;
     margin: 0;
     color: #43515a;
     font-size: clamp(10px, .85vw, 12px);
     line-height: 1.55;
 }

 .closing-benefits {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     align-items: center;
     width: 100%;
     max-width: 690px;
     justify-self: center;
 }

 .closing-benefit {
     min-width: 0;
     min-height: 76px;
     padding: 0 12px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     text-align: center;
     border-left: 1px solid rgba(113, 91, 56, .28);
 }

 .closing-benefit:first-child {
     border-left: 0;
 }

 .closing-icon {
     width: 34px;
     height: 34px;
     display: grid;
     place-items: center;
     color: #a77b32;
     border: 1.5px solid rgba(167, 123, 50, .78);
     border-radius: 50%;
     background: rgba(255, 251, 242, .48);
 }

 .closing-icon svg {
     display: block;
     width: 19px;
     height: 19px;
 }

 .closing-benefit strong {
     display: block;
     color: #263744;
     font-size: clamp(9px, .78vw, 11px);
     font-weight: 700;
     line-height: 1.25;
     white-space: normal;
 }

 .closing-benefit small {
     display: block;
     color: #52616a;
     font-size: clamp(8px, .7vw, 10px);
     line-height: 1.3;
 }

 .site-footer {
     position: relative;
     z-index: 2;
     min-height: 68px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     padding: 13px clamp(24px, 5.5vw, 84px);
     background: #1b3040;
     color: #f8f4e9;
 }

 .site-footer .brand {
     flex-shrink: 0;
 }

 .site-footer p {
     margin: 0;
 }

 .site-footer>small {
     text-align: right;
 }

 /* Tablet */
 @media (max-width: 900px) {
     .closing-band {
         grid-template-columns: minmax(210px, .8fr) minmax(0, 1.4fr);
         gap: 16px;
         min-height: 175px;
         padding: 25px 4%;
     }

     .closing-band::before {
         width: 82%;
         opacity: .72;
         background-size: auto 100%;
     }

     .closing-benefit {
         padding: 0 7px;
     }

     .closing-copy h3 {
         font-size: clamp(21px, 3vw, 27px);
     }

     .site-footer {
         flex-wrap: wrap;
     }
 }

 /* Mobile */
 @media (max-width: 620px) {
     .closing-band {
         grid-template-columns: 1fr;
         gap: 18px;
         min-height: 0;
         padding: 28px 6% 24px;
         background:
             linear-gradient(180deg,
                 rgba(250, 246, 235, .97) 0%,
                 rgba(250, 246, 235, .92) 58%,
                 rgba(250, 246, 235, .68) 100%),
             linear-gradient(180deg, #f7ead4 0%, #e8d8bc 100%);
     }

     .closing-band::before {
         right: -22%;
         bottom: 0;
         width: 115%;
         height: 54%;
         opacity: .48;
         background-position: right bottom;
         background-size: auto 100%;
     }

     .closing-copy {
         max-width: 100%;
         text-align: center;
     }

     .closing-copy h3 {
         font-size: clamp(24px, 7vw, 31px);
     }

     .closing-copy>p:last-child {
         max-width: 390px;
         margin: 0 auto;
         font-size: 12px;
     }

     .closing-benefits {
         grid-template-columns: repeat(4, minmax(0, 1fr));
         max-width: 100%;
     }

     .closing-benefit {
         min-height: 82px;
         padding: 0 5px;
     }

     .closing-icon {
         width: 31px;
         height: 31px;
     }

     .closing-icon svg {
         width: 17px;
         height: 17px;
     }

     .closing-benefit strong {
         font-size: 9px;
     }

     .closing-benefit small {
         font-size: 8px;
     }

     .site-footer {
         justify-content: center;
         text-align: center;
         gap: 8px 18px;
         padding: 18px 5%;
     }

     .site-footer .brand {
         justify-content: center;
         width: 100%;
     }

     .site-footer p {
         font-size: 10px;
     }

     .site-footer>small {
         width: 100%;
         text-align: center;
         font-size: 9px;
     }
 }

 @media (max-width: 380px) {
     .closing-benefits {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         row-gap: 12px;
     }

     .closing-benefit:nth-child(3) {
         border-left: 0;
     }

     .closing-benefit {
         min-height: 76px;
     }

     .closing-band::before {
         height: 48%;
     }
 }

 /* =========================================================
   FULL-BLEED METRO CLOSING BANNER — DESKTOP / TABLET / MOBILE
   This override intentionally replaces the earlier narrow
   banner treatment and makes the scene span the viewport.
   ========================================================= */

 .pricing {
     overflow: hidden;
 }

 .closing-band {
     position: relative;
     isolation: isolate;
     width: 100vw;
     max-width: none;
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
     min-height: clamp(205px, 18vw, 270px);
     padding: clamp(24px, 3vw, 42px) clamp(24px, 8.2vw, 140px);
     display: grid;
     grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr);
     align-items: center;
     gap: clamp(20px, 4vw, 72px);
     overflow: hidden;
     background:
         linear-gradient(90deg,
             rgba(250, 247, 238, .98) 0%,
             rgba(250, 247, 238, .94) 25%,
             rgba(250, 247, 238, .78) 43%,
             rgba(250, 247, 238, .30) 67%,
             rgba(250, 247, 238, .12) 100%),
         url("../images/metro-footer-scene.png") center 58% / cover no-repeat,
         #f2e7d3;
 }

 .closing-band::before {
     content: none !important;
 }

 .closing-copy {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 390px;
 }

 .closing-copy .closing-eyebrow {
     margin: 0 0 9px;
     color: #a77b32;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .24em;
 }

 .closing-copy h3 {
     margin: 0 0 10px;
     color: #1d3040;
     font-family: var(--serif);
     font-size: clamp(27px, 2.55vw, 39px);
     font-weight: 600;
     line-height: 1.08;
     letter-spacing: -.025em;
 }

 .closing-copy>p:last-child {
     max-width: 370px;
     margin: 0;
     color: #354653;
     font-size: clamp(11px, .9vw, 13px);
     line-height: 1.55;
 }

 .closing-benefits {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 790px;
     justify-self: end;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     align-items: center;
     border-radius: 3px;
     background: rgba(250, 247, 238, 0.87);
     backdrop-filter: blur(2px);
 }

 .closing-benefit {
     min-width: 0;
     min-height: 105px;
     padding: 8px clamp(7px, 1vw, 16px);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 6px;
     text-align: center;
     border-left: 1px solid rgba(116, 91, 52, .30);
 }

 .closing-benefit:first-child {
     border-left: 0;
 }

 .closing-icon {
     width: 39px;
     height: 39px;
     flex: 0 0 39px;
     display: grid;
     place-items: center;
     color: #a77b32;
     border: 1.5px solid rgba(167, 123, 50, .9);
     border-radius: 50%;
     background: rgba(255, 251, 242, .82);
 }

 .closing-icon svg {
     display: block;
     width: 20px;
     height: 20px;
 }

 .closing-benefit strong {
     display: block;
     color: #1d3040;
     font-size: clamp(10px, .82vw, 12px);
     font-weight: 700;
     line-height: 1.25;
     white-space: normal;
 }

 .closing-benefit small {
     display: block;
     color: #40515d;
     font-size: clamp(9px, .72vw, 11px);
     line-height: 1.3;
 }

 /* Keep the dark company footer full width as well. */
 .site-footer {
     width: 100%;
     max-width: none;
 }

 /* Tablet: give the text and icon row enough breathing room. */
 @media (max-width: 900px) {
     .closing-band {
         min-height: 220px;
         grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
         gap: 18px;
         padding: 28px 5%;
         background-position: center 58%;
     }

     .closing-copy h3 {
         font-size: clamp(25px, 3.2vw, 32px);
     }

     .closing-benefit {
         min-height: 98px;
         padding-inline: 6px;
     }
 }

 /* Mobile: stack the copy above a clean 2 x 2 benefit grid. */
 @media (max-width: 620px) {
     .closing-band {
         width: 100vw;
         margin-left: calc(50% - 50vw);
         min-height: 0;
         grid-template-columns: 1fr;
         gap: 20px;
         padding: 30px 6% 25px;
         background:
             linear-gradient(180deg,
                 rgba(250, 247, 238, .97) 0%,
                 rgba(250, 247, 238, .93) 42%,
                 rgba(250, 247, 238, .76) 100%),
             url("../images/metro-footer-scene.png") center bottom / auto 100% no-repeat,
             #f2e7d3;
     }

     .closing-copy {
         max-width: 100%;
         text-align: center;
     }

     .closing-copy h3 {
         font-size: clamp(27px, 7vw, 34px);
     }

     .closing-copy>p:last-child {
         max-width: 420px;
         margin-inline: auto;
         font-size: 12px;
     }

     .closing-benefits {
         max-width: 470px;
         justify-self: center;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         background: rgba(250, 247, 238, .55);
     }

     .closing-benefit {
         min-height: 92px;
         padding: 10px 8px;
         border-left: 1px solid rgba(116, 91, 52, .24);
         border-top: 1px solid rgba(116, 91, 52, .24);
     }

     .closing-benefit:nth-child(odd) {
         border-left: 0;
     }

     .closing-benefit:nth-child(-n+2) {
         border-top: 0;
     }

     .closing-icon {
         width: 36px;
         height: 36px;
         flex-basis: 36px;
     }

     .closing-icon svg {
         width: 19px;
         height: 19px;
     }

     .closing-benefit strong {
         font-size: 10px;
     }

     .closing-benefit small {
         font-size: 9px;
     }
 }

 @media (max-width: 380px) {
     .closing-band {
         padding-inline: 16px;
     }

     .closing-copy h3 {
         font-size: 26px;
     }

     .closing-benefit {
         min-height: 86px;
     }
 }

 /* =========================================================
   FEATURES SECTION — MATCHED TO THE PROVIDED REFERENCE
   Left: intro | Centre: 6 feature icons + 6 amenity icons
   Right: one large construction image + two smaller images
   ========================================================= */
 .features .features-layout {
     display: grid;
     grid-template-columns: minmax(220px, .78fr) minmax(0, 2.22fr);
     gap: clamp(18px, 2.2vw, 34px);
     align-items: stretch;
 }

 .features .features-intro {
     min-width: 0;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 .features .features-intro h2 {
     font-size: clamp(27px, 2.4vw, 39px);
     margin: 8px 0 12px;
 }

 .features .features-intro>p:not(.eyebrow) {
     font-size: 12px;
     line-height: 1.65;
     max-width: 330px;
 }

 .features .foundation-card {
     width: 100%;
     margin-top: auto;
     min-height: 94px;
     padding: 13px 14px;
     gap: 11px;
     border-radius: 8px;
 }

 .features .foundation-card strong {
     font-size: 10px;
     line-height: 1.4;
 }

 .features .foundation-card small {
     font-size: 9px;
     line-height: 1.45;
 }

 .features .features-content {
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 .features .feature-content-top {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(180px, .62fr);
     gap: 16px;
     align-items: stretch;
 }

 .features .feature-list {
     min-width: 0;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     grid-template-rows: repeat(2, minmax(112px, auto));
     gap: 10px 8px;
     align-content: stretch;
 }

 .features .feature-item {
     min-width: 0;
     padding: 5px 8px 8px;
     gap: 3px;
     border-left: 1px solid rgba(40, 54, 62, .15);
 }

 .features .feature-item .round-icon {
     width: 34px;
     height: 34px;
     min-width: 34px;
     flex-basis: 34px;
     margin: 0 0 3px;
 }

 .features .feature-item .round-icon svg {
     width: 18px;
     height: 18px;
 }

 .features .feature-item strong {
     font-size: 12px;
     line-height: 1.35;
 }

 .features .feature-item small {
     font-size: 12px;
     line-height: 1.4;
 }

 .features .feature-gallery {
     min-width: 0;
     display: grid;
     grid-template-rows: minmax(0, 1.55fr) minmax(0, .85fr);
     gap: 7px;
 }

 .features .feature-gallery figure {
     position: relative;
     min-width: 0;
     min-height: 0;
     margin: 0;
     overflow: hidden;
     background: #e8e0d2;
     border-radius: 3px;
 }

 .features .feature-gallery img {
     display: block;
     width: 100%;
     height: 100%;
     min-height: 0;
     object-fit: cover;
     transition: transform .5s ease;
 }

 .features .feature-gallery figure:hover img {
     transform: scale(1.045);
 }

 .features .feature-gallery figcaption {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 5px 8px;
     color: #fff;
     background: linear-gradient(90deg, rgba(20, 39, 52, .88), rgba(20, 39, 52, .55));
     font-size: 9px;
     line-height: 1.3;
     font-weight: 600;
 }

 .features .feature-gallery-bottom {
     min-height: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 7px;
 }

 .features .feature-bottom-list {
     display: grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: 8px;
     padding-top: 10px;
     border-top: 1px solid rgba(40, 54, 62, .16);
 }

 .features .feature-bottom-list .feature-item {
     padding: 2px 7px 4px;
     border-left: 1px solid rgba(40, 54, 62, .15);
 }

 .features .feature-bottom-list .feature-item .round-icon {
     width: 32px;
     height: 32px;
     min-width: 32px;
     flex-basis: 32px;
 }

 .features .feature-bottom-list .feature-item .round-icon svg {
     width: 17px;
     height: 17px;
 }

 .features .feature-bottom-list .feature-item strong {
     font-size: 13px;
 }

 .features .feature-bottom-list .feature-item small {
     font-size: 13px;
     line-height: 1.35;
 }

 @media (max-width: 1100px) {
     .features .features-layout {
         grid-template-columns: minmax(205px, .72fr) minmax(0, 2fr);
         gap: 18px;
     }

     .features .feature-content-top {
         grid-template-columns: minmax(0, 1fr) minmax(155px, .58fr);
         gap: 10px;
     }

     .features .feature-item {
         padding-left: 5px;
         padding-right: 5px;
     }

     .features .feature-bottom-list {
         gap: 4px;
     }
 }

 @media (max-width: 900px) {
     .features .features-layout {
         grid-template-columns: 1fr;
         gap: 24px;
     }

     .features .features-intro {
         display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
         column-gap: 22px;
         align-items: center;
     }

     .features .features-intro .eyebrow,
     .features .features-intro h2,
     .features .features-intro>p:not(.eyebrow) {
         grid-column: 1;
     }

     .features .foundation-card {
         grid-column: 2;
         grid-row: 1 / span 3;
         margin: 0;
     }

     .features .feature-content-top {
         grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr);
     }

     .features .feature-list {
         grid-template-rows: repeat(2, minmax(105px, auto));
     }

     .features .feature-bottom-list {
         grid-template-columns: repeat(6, minmax(0, 1fr));
     }
 }

 @media (max-width: 620px) {
     .features .features-intro {
         display: flex;
         align-items: flex-start;
     }

     .features .foundation-card {
         margin-top: 12px;
     }

     .features .feature-content-top {
         grid-template-columns: 1fr;
     }

     .features .feature-list {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         grid-template-rows: auto;
         gap: 14px 8px;
     }

     .features .feature-item {
         min-height: 105px;
     }

     .features .feature-gallery {
         grid-template-rows: 180px 105px;
     }

     .features .feature-bottom-list {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 12px 6px;
     }

     .features .feature-bottom-list .feature-item {
         min-height: 95px;
     }
 }

 @media (max-width: 380px) {
     .features .feature-list {
         grid-template-columns: 1fr 1fr;
     }

     .features .feature-gallery {
         grid-template-rows: 155px 90px;
     }

     .features .feature-bottom-list {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 /* =========================================================
   INTERACTIVE NEARBY DESTINATIONS + PHOTO GALLERY
   ========================================================= */
 .nearby-card .nearby-grid {
     gap: 12px 10px;
 }

 .nearby-destination {
     appearance: none;
     -webkit-appearance: none;
     width: 100%;
     min-width: 0;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 9px 10px;
     border: 1px solid transparent;
     border-radius: 13px;
     background: transparent;
     color: inherit;
     text-align: left;
     font: inherit;
     cursor: pointer;
     transition: background .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
 }

 .nearby-destination>span {
     min-width: 0;
 }

 .nearby-destination:hover {
     background: #fffdf8;
     border-color: rgba(167, 123, 50, .28);
     transform: translateY(-2px);
 }

 .nearby-destination:focus-visible {
     outline: 3px solid rgba(196, 154, 80, .45);
     outline-offset: 3px;
 }

 .nearby-destination.is-active {
     background: linear-gradient(110deg, rgba(196, 154, 80, .15), rgba(255, 255, 255, .78));
     border-color: rgba(167, 123, 50, .62);
     box-shadow: 0 7px 18px rgba(57, 48, 31, .07);
 }

 .nearby-destination.is-active .nearby-icon {
     background: #a77b32;
     color: #fff;
     border-color: #a77b32;
 }

 .nearby-destination.is-active .nearby-icon svg {
     stroke: currentColor;
 }

 .destination-gallery {
     margin-top: 24px;
     padding-top: 22px;
     border-top: 1px solid rgba(40, 54, 62, .14);
 }

 .destination-gallery[hidden] {
     display: none !important;
 }

 .destination-gallery-heading {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 16px;
     margin-bottom: 16px;
 }

 .gallery-eyebrow {
     margin: 0 0 5px;
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .2em;
 }

 .destination-gallery-heading h4 {
     margin: 0;
     color: var(--ink);
     font: 600 clamp(21px, 2vw, 27px)/1.2 var(--serif);
 }

 .destination-gallery-heading p:not(.gallery-eyebrow) {
     margin: 5px 0 0;
     color: var(--muted);
     font-size: 11px;
 }

 .destination-photo-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 13px;
 }

 .destination-photo-card {
     position: relative;
     min-width: 0;
     margin: 0;
     overflow: hidden;
     isolation: isolate;
     border-radius: 12px;
     background: linear-gradient(135deg, #e8e0d0, #f7f2e8);
     box-shadow: 0 7px 20px rgba(34, 43, 48, .08);
     opacity: 0;
     transform: translateY(16px) scale(.985);
 }

 .gallery-enter .destination-photo-card {
     animation: destinationReveal .62s cubic-bezier(.2, .75, .25, 1) forwards;
     animation-delay: calc(var(--photo-index)*90ms);
 }

 .destination-photo-card img {
     display: block;
     width: 100%;
     height: clamp(112px, 13vw, 168px);
     object-fit: cover;
     transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s;
 }

 .destination-photo-card:hover img {
     transform: scale(1.075);
     filter: saturate(1.08);
 }

 .destination-photo-card figcaption {
     padding: 9px 10px 10px;
     color: var(--ink);
     background: rgba(255, 253, 248, .96);
     font-size: 10px;
     font-weight: 700;
     line-height: 1.35;
 }

 .destination-photo-card.image-unavailable {
     min-height: 145px;
     background: linear-gradient(135deg, #eee5d4, #e0d2b8);
 }

 .destination-photo-card.image-unavailable::before {
     content: 'Photo preview';
     position: absolute;
     inset: 0 0 34px;
     display: grid;
     place-items: center;
     color: #80663c;
     font: italic 15px var(--serif);
 }

 .destination-photo-card.image-unavailable figcaption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
 }

 @keyframes destinationReveal {
     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 @media (prefers-reduced-motion:reduce) {

     .nearby-destination,
     .destination-photo-card img {
         transition: none !important;
     }

     .gallery-enter .destination-photo-card {
         animation: none;
         opacity: 1;
         transform: none;
     }
 }

 @media (max-width:900px) {
     .nearby-card .nearby-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .destination-photo-card img {
         height: clamp(115px, 22vw, 180px);
     }
 }

 @media (max-width:560px) {
     .nearby-card {
         padding: 18px 14px;
     }

     .nearby-card h3 {
         font-size: 26px;
     }

     .nearby-card .nearby-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 8px 5px;
     }

     .nearby-destination {
         gap: 8px;
         padding: 8px 5px;
         border-radius: 10px;
     }

     .nearby-destination .nearby-icon {
         width: 30px;
         height: 30px;
         min-width: 30px;
         flex-basis: 30px;
     }

     .nearby-destination .nearby-icon svg {
         width: 17px;
         height: 17px;
     }

     .nearby-destination strong {
         font-size: 10px;
         line-height: 1.25;
     }

     .nearby-destination small {
         font-size: 9px;
         line-height: 1.35;
     }

     .destination-gallery {
         margin-top: 19px;
         padding-top: 18px;
     }

     .destination-photo-grid {
         gap: 9px;
     }

     .destination-photo-card {
         border-radius: 9px;
     }

     .destination-photo-card img {
         height: 112px;
     }

     .destination-photo-card figcaption {
         padding: 8px;
         font-size: 9px;
     }
 }

 @media (max-width:360px) {
     .nearby-card .nearby-grid {
         grid-template-columns: 1fr;
     }

     .destination-photo-card img {
         height: 125px;
     }
 }

 /* =========================================================
   CHERA / CHOLA / PANDIYA — interactive residence selector
   ========================================================= */
 .residence-heading {
     max-width: 760px;
     margin: 0 auto 30px;
     text-align: center;
 }

 .residence-heading h2 {
     margin: 10px 0 12px;
     font-size: clamp(34px, 4vw, 54px);
 }

 .residence-heading h2 em {
     color: var(--gold);
     font-style: normal;
 }

 .residence-intro {
     max-width: 610px;
     margin: 0 auto;
     color: var(--muted);
 }

 .residence-tabs {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px;
     max-width: 1020px;
     margin: 38px auto 28px;
 }

 .residence-tab {
     position: relative;
     min-height: 116px;
     padding: 18px 22px;
     overflow: hidden;
     text-align: left;
     border: 1px solid #e1d5c1;
     border-radius: 12px;
     color: var(--ink);
     background: rgba(255, 253, 248, .72);
     cursor: pointer;
     display: grid;
     grid-template-columns: 1fr auto;
     align-content: center;
     transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
 }

 .residence-tab::before {
     content: "";
     position: absolute;
     inset: auto auto -55px -35px;
     width: 125px;
     height: 125px;
     border-radius: 50%;
     background: var(--gold);
     opacity: 0;
     transform: scale(.4);
     transition: transform .45s ease, opacity .45s ease;
 }

 .residence-tab:hover,
 .residence-tab:focus-visible {
     outline: none;
     transform: translateY(-4px);
     border-color: var(--gold2);
     box-shadow: 0 14px 28px rgba(75, 57, 27, .09);
 }

 .residence-tab.is-active {
     border-color: var(--gold);
     background: #fffaf0;
     box-shadow: 0 12px 28px rgba(120, 86, 35, .12);
 }

 .residence-tab.is-active::before {
     opacity: .08;
     transform: scale(1);
 }

 .tab-index {
     position: relative;
     z-index: 1;
     grid-column: 1;
     color: var(--gold);
     font-size: 10px;
     letter-spacing: .2em;
     font-weight: 700;
 }

 .tab-name {
     position: relative;
     z-index: 1;
     grid-column: 1;
     font: 600 25px/1.25 var(--serif);
 }

 .tab-subtitle {
     position: relative;
     z-index: 1;
     grid-column: 1;
     color: var(--muted);
     font-size: 11px;
     margin-top: 3px;
 }

 .tab-indicator {
     position: absolute;
     z-index: 1;
     right: 20px;
     top: 50%;
     color: var(--gold);
     font-size: 22px;
     transform: translateY(-50%) rotate(0);
     transition: transform .35s ease;
 }

 .residence-tab.is-active .tab-indicator {
     transform: translateY(-50%) rotate(45deg);
 }

 .residence-panel {
     display: grid;
     grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
     gap: clamp(28px, 5vw, 72px);
     align-items: center;
     padding: clamp(24px, 4vw, 48px);
     border: 1px solid rgba(167, 123, 50, .16);
     border-radius: 18px;
     background: linear-gradient(135deg, rgba(255, 255, 255, .64), rgba(247, 243, 233, .72));
     box-shadow: 0 22px 55px rgba(58, 47, 29, .06);
 }

 .residence-panel.is-changing .residence-copy,
 .residence-panel.is-changing .residence-visual {
     animation: residenceReveal .55s cubic-bezier(.2, .75, .25, 1) both;
 }

 @keyframes residenceReveal {
     from {
         opacity: 0;
         transform: translateY(14px);
         filter: blur(3px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
         filter: blur(0);
     }
 }

 .residence-overline {
     display: flex;
     align-items: center;
     gap: 9px;
     color: var(--gold);
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .2em;
 }

 .live-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--gold2);
     box-shadow: 0 0 0 5px rgba(196, 154, 80, .14);
 }

 .residence-copy h3 {
     margin: 17px 0 14px;
     font: 600 clamp(34px, 3.4vw, 48px)/1.1 var(--serif);
     color: var(--ink);
 }

 .residence-copy h3 em {
     color: var(--gold);
     font-style: italic;
 }

 .residence-description {
     max-width: 490px;
     color: #53616a;
     line-height: 1.8;
     font-size: 14px;
 }

 .residence-specs {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px 14px;
     margin: 28px 0;
     padding: 20px 0;
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
 }

 .residence-spec {
     display: grid;
     gap: 4px;
 }

 .spec-label {
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .16em;
 }

 .residence-spec strong {
     font: 600 15px/1.35 var(--serif);
 }

 .residence-enquire {
     gap: 18px;
     min-height: 48px;
 }

 .residence-enquire span {
     font-size: 20px;
     transition: transform .25s ease;
 }

 .residence-enquire:hover span {
     transform: translateX(5px);
 }

 .residence-note {
     max-width: 470px;
     margin: 14px 0 0;
     color: var(--muted);
     font-size: 10px;
     line-height: 1.6;
 }

 .residence-visual {
     min-width: 0;
 }

 .visual-topline {
     display: flex;
     justify-content: space-between;
     align-items: end;
     gap: 16px;
     margin-bottom: 13px;
 }

 .visual-topline>div {
     display: grid;
     gap: 4px;
 }

 .visual-label {
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .2em;
 }

 .visual-topline strong {
     font-size: 12px;
     letter-spacing: .1em;
 }

 .visual-count {
     color: var(--gold);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .1em;
     white-space: nowrap;
 }

 .residence-image-frame {
     position: relative;
     overflow: hidden;
     padding: 10px;
     border: 1px solid #e3dacb;
     border-radius: 10px;
     background: #e9e2d4;
     box-shadow: 0 20px 38px rgba(59, 52, 32, .12);
 }

 .residence-image-frame::after {
     content: "";
     position: absolute;
     inset: 10px;
     border: 1px solid rgba(167, 123, 50, .22);
     border-radius: 4px;
     pointer-events: none;
 }

 .residence-image-frame img {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 1000 / 600;
     object-fit: contain;
     border-radius: 4px;
     transition: transform .7s cubic-bezier(.2, .7, .2, 1);
 }

 .residence-image-frame:hover img {
     transform: scale(1.025);
 }

 .image-corner-tag {
     position: absolute;
     right: 22px;
     bottom: 20px;
     z-index: 2;
     display: flex;
     align-items: center;
     gap: 7px;
     padding: 7px 10px;
     border: 1px solid rgba(167, 123, 50, .25);
     border-radius: 30px;
     background: rgba(252, 250, 245, .92);
     color: var(--ink);
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .14em;
     backdrop-filter: blur(8px);
 }

 .image-corner-tag span {
     color: var(--gold);
     font-size: 15px;
 }

 .visual-caption {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin-top: 14px;
 }

 .caption-mark {
     color: var(--gold);
     font-size: 18px;
     line-height: 1.2;
 }

 .visual-caption p {
     margin: 0;
     color: var(--muted);
     font-size: 10px;
     line-height: 1.6;
 }

 @media (max-width: 900px) {
     .residence-panel {
         grid-template-columns: 1fr;
     }

     .residence-copy {
         max-width: 720px;
     }

     .residence-visual {
         width: 100%;
     }
 }

 @media (max-width: 600px) {
     .residence-heading {
         text-align: left;
         margin-bottom: 22px;
     }

     .residence-intro {
         margin: 0;
     }

     .residence-tabs {
         gap: 7px;
         margin: 25px 0 18px;
     }

     .residence-tab {
         min-height: 96px;
         padding: 12px 10px;
         border-radius: 9px;
     }

     .tab-name {
         font-size: clamp(17px, 5vw, 22px);
     }

     .tab-subtitle {
         font-size: 9px;
         line-height: 1.3;
     }

     .tab-index {
         font-size: 8px;
     }

     .tab-indicator {
         right: 8px;
         top: 14px;
         font-size: 15px;
         transform: none;
     }

     .residence-tab.is-active .tab-indicator {
         transform: rotate(45deg);
     }

     .residence-panel {
         padding: 20px 15px;
         gap: 28px;
         border-radius: 13px;
     }

     .residence-copy h3 {
         font-size: 36px;
     }

     .residence-specs {
         gap: 14px 10px;
     }

     .residence-spec strong {
         font-size: 13px;
     }

     .residence-enquire {
         width: 100%;
     }

     .visual-topline strong {
         font-size: 10px;
     }

     .visual-count {
         font-size: 9px;
     }

     .residence-image-frame {
         padding: 6px;
     }

     .image-corner-tag {
         right: 13px;
         bottom: 13px;
         font-size: 7px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .residence-tab,
     .residence-tab::before,
     .tab-indicator,
     .residence-image-frame img,
     .residence-enquire span {
         transition: none !important;
     }

     .residence-panel.is-changing .residence-copy,
     .residence-panel.is-changing .residence-visual {
         animation: none !important;
     }
 }

 /* ===== Floor plan: editorial two-column composition ===== */
 .floor {
     background: #f5f0e5;
     padding: clamp(42px, 5vw, 72px) 5%;
 }

 .floor-layout-grid {
     width: 100%;
     max-width: 1500px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
     align-items: center;
     gap: clamp(34px, 5vw, 76px);
 }

 .floor-layout-grid .residence-copy {
     min-width: 0;
     padding: 0;
 }

 .floor-layout-grid .section-kicker {
     margin: 0 0 20px;
     font-size: 11px;
     letter-spacing: .19em;
 }

 .floor-layout-grid .section-kicker span {
     font-size: 14px;
 }

 .floor-layout-grid .eyebrow.small {
     margin: 0 0 12px;
     font-size: 10px;
     letter-spacing: .2em;
 }

 .floor-main-title {
     margin: 0 0 18px;
     font: 600 clamp(34px, 3.6vw, 52px)/1.12 var(--serif);
     letter-spacing: -.035em;
     color: var(--ink);
 }

 .floor-layout-grid .residence-description {
     max-width: 510px;
     margin: 0;
     color: var(--ink);
     font-size: 15px;
     line-height: 1.8;
 }

 .floor-layout-grid .residence-tabs {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 10px;
     margin: 24px 0 20px;
 }

 .floor-layout-grid .residence-tab {
     position: relative;
     min-width: 0;
     min-height: 88px;
     padding: 12px 34px 12px 15px;
     display: grid;
     grid-template-columns: 1fr;
     align-content: center;
     text-align: left;
     overflow: hidden;
     border: 1px solid #e2d6c1;
     border-radius: 6px;
     background: #fbf8f0;
     color: var(--ink);
     cursor: pointer;
     transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
 }

 .floor-layout-grid .residence-tab:last-child {
     grid-column: 1 / -1;
 }

 .floor-layout-grid .residence-tab::before {
     content: "";
     position: absolute;
     width: 90px;
     height: 90px;
     right: -45px;
     bottom: -58px;
     border-radius: 50%;
     background: var(--gold);
     opacity: 0;
     transition: transform .45s ease, opacity .45s ease;
 }

 .floor-layout-grid .residence-tab:hover,
 .floor-layout-grid .residence-tab:focus-visible {
     outline: none;
     border-color: var(--gold);
     transform: translateY(-3px);
     box-shadow: 0 10px 22px rgba(72, 54, 24, .09);
 }

 .floor-layout-grid .residence-tab.is-active {
     border-color: var(--gold);
     background: #fffaf0;
     box-shadow: 0 7px 18px rgba(72, 54, 24, .07);
 }

 .floor-layout-grid .residence-tab.is-active::before {
     opacity: .09;
     transform: scale(1.3);
 }

 .floor-layout-grid .tab-index {
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .16em;
 }

 .floor-layout-grid .tab-name {
     margin-top: 1px;
     font: 600 21px/1.2 var(--serif);
     color: var(--ink);
 }

 .floor-layout-grid .tab-subtitle {
     margin-top: 3px;
     color: var(--muted);
     font-size: 10px;
     line-height: 1.35;
 }

 .floor-layout-grid .tab-indicator {
     right: 13px;
     top: 50%;
     color: var(--gold);
     font-size: 17px;
     transform: translateY(-50%);
 }

 .floor-layout-grid .residence-tab.is-active .tab-indicator {
     transform: translateY(-50%) translateX(3px);
 }

 .floor-layout-grid .residence-specs {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 13px 16px;
     margin: 18px 0 20px;
     padding: 15px 0;
     border-top: 1px solid rgba(40, 54, 62, .16);
     border-bottom: 1px solid rgba(40, 54, 62, .16);
 }

 .floor-layout-grid .residence-spec {
     display: grid;
     gap: 3px;
     min-width: 0;
 }

 .floor-layout-grid .spec-label {
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .15em;
 }

 .floor-layout-grid .residence-spec strong {
     overflow-wrap: anywhere;
     font: 600 14px/1.35 var(--serif);
 }

 .floor-layout-grid .residence-enquire {
     min-height: 48px;
     padding: 13px 22px;
     gap: 14px;
     border: 0;
     font-size: 13px;
 }

 .floor-layout-grid .residence-enquire span {
     font-size: 19px;
     transition: transform .25s ease;
 }

 .floor-layout-grid .residence-enquire:hover span {
     transform: translateX(5px);
 }

 .floor-layout-grid .residence-note {
     max-width: 480px;
     margin: 14px 0 0;
     color: var(--muted);
     font-size: 10px;
     line-height: 1.55;
 }

 .floor-layout-grid .residence-visual {
     min-width: 0;
     width: 100%;
 }

 .floor-layout-grid .visual-topline {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 15px;
     margin: 0 0 12px;
 }

 .floor-layout-grid .visual-topline>div {
     display: grid;
     gap: 3px;
 }

 .floor-layout-grid .visual-topline strong {
     color: var(--gold);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .14em;
 }

 .floor-layout-grid .visual-subtitle {
     color: var(--ink);
     font-size: 10px;
 }

 .floor-layout-grid .visual-count {
     color: var(--gold);
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .12em;
     white-space: nowrap;
 }

 .floor-layout-grid .residence-image-frame {
     position: relative;
     width: 100%;
     padding: 9px;
     overflow: hidden;
     border: 1px solid #e2d9c9;
     border-radius: 0;
     background: #e9e2d4;
     box-shadow: 0 18px 38px rgba(59, 52, 32, .11);
 }

 .floor-layout-grid .residence-image-frame img {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 1000 / 600;
     object-fit: contain;
     background: #f7f2e8;
     transition: opacity .35s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
 }

 .floor-layout-grid .residence-image-frame:hover img {
     transform: scale(1.015);
 }

 .floor-layout-grid .visual-caption {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     margin-top: 12px;
 }

 .floor-layout-grid .caption-mark {
     color: var(--gold);
     font-size: 15px;
     line-height: 1.4;
 }

 .floor-layout-grid .visual-caption p {
     margin: 0;
     color: var(--muted);
     font-size: 10px;
     line-height: 1.55;
 }

 #residence-panel.is-changing .residence-copy,
 #residence-panel.is-changing .residence-visual {
     animation: floorContentIn .48s cubic-bezier(.2, .75, .25, 1) both;
 }

 #residence-panel.is-changing .residence-visual {
     animation-delay: .06s;
 }

 @keyframes floorContentIn {
     from {
         opacity: 0;
         transform: translateY(12px);
         filter: blur(2px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
         filter: blur(0);
     }
 }

 @media (min-width: 1500px) {
     .floor-layout-grid {
         gap: 82px;
     }
 }

 @media (max-width: 1000px) {
     .floor-layout-grid {
         grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
         gap: 28px;
     }

     .floor-main-title {
         font-size: clamp(32px, 4vw, 42px);
     }

     .floor-layout-grid .residence-tab {
         min-height: 82px;
         padding-left: 12px;
     }
 }

 @media (max-width: 760px) {
     .floor {
         padding: 48px 5%;
     }

     .floor-layout-grid {
         grid-template-columns: minmax(0, 1fr);
         gap: 34px;
     }

     .floor-layout-grid .residence-copy {
         max-width: none;
     }

     .floor-main-title {
         font-size: clamp(34px, 8vw, 46px);
     }

     .floor-layout-grid .residence-description {
         max-width: 650px;
     }

     .floor-layout-grid .residence-visual {
         width: 100%;
     }
 }

 @media (max-width: 480px) {
     .floor-layout-grid .section-kicker {
         font-size: 9px;
         gap: 8px;
     }

     .floor-layout-grid .eyebrow.small {
         font-size: 8px;
         letter-spacing: .14em;
     }

     .floor-layout-grid .residence-tabs {
         gap: 8px;
         margin: 20px 0 16px;
     }

     .floor-layout-grid .residence-tab {
         min-height: 78px;
         padding: 9px 26px 9px 10px;
     }

     .floor-layout-grid .tab-name {
         font-size: 18px;
     }

     .floor-layout-grid .tab-subtitle {
         font-size: 9px;
     }

     .floor-layout-grid .residence-specs {
         gap: 11px 8px;
     }

     .floor-layout-grid .residence-spec strong {
         font-size: 12px;
     }

     .floor-layout-grid .residence-enquire {
         width: 100%;
         justify-content: space-between;
     }

     .floor-layout-grid .residence-image-frame {
         padding: 5px;
     }

     .floor-layout-grid .visual-topline strong {
         font-size: 9px;
     }

     .floor-layout-grid .visual-subtitle {
         font-size: 9px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     #residence-panel.is-changing .residence-copy,
     #residence-panel.is-changing .residence-visual {
         animation: none !important;
     }

     .floor-layout-grid .residence-tab,
     .floor-layout-grid .residence-image-frame img,
     .floor-layout-grid .residence-enquire span {
         transition: none !important;
     }
 }


 /* =========================================================
   PSTL PROPERTIES LOGO — responsive header replacement
   ========================================================= */
 .site-header {
     min-height: 94px;
     height: auto;
     padding-top: 10px;
     padding-bottom: 10px;
 }

 .site-header .brand {
     display: inline-flex;
     flex: 0 1 230px;
     width: min(230px, 19vw);
     min-width: 150px;
     align-items: center;
     justify-content: flex-start;
     gap: 0;
     line-height: 0;
     white-space: normal;
 }

 .site-header .brand-logo {
     display: block;
     width: 100%;
     height: auto;
     max-height: 76px;
     object-fit: contain;
     object-position: left center;
     transition: transform .3s ease, opacity .3s ease;
 }

 .site-header .brand:hover .brand-logo {
     transform: translateY(-1px);
     opacity: .92;
 }

 /* Keep the complete logo clear of the navigation on smaller laptops. */
 @media (max-width: 1100px) and (min-width: 781px) {
     .site-header .brand {
         flex-basis: 185px;
         width: 185px;
         min-width: 155px;
     }

     .site-header .brand-logo {
         max-height: 66px;
     }
 }

 @media (max-width: 780px) {
     .site-header {
         min-height: 72px;
         height: 72px;
         padding: 6px 5%;
         gap: 10px;
     }

     .site-header .brand {
         flex: 0 1 175px;
         width: 175px;
         min-width: 0;
         max-width: 42vw;
     }

     .site-header .brand-logo {
         max-height: 58px;
     }
 }

 @media (max-width: 440px) {
     .site-header {
         padding-left: 4%;
         padding-right: 4%;
         gap: 7px;
     }

     .site-header .brand {
         flex-basis: 148px;
         width: 148px;
         max-width: 43vw;
     }

     .site-header .brand-logo {
         max-height: 52px;
     }

     .site-header .menu-toggle {
         padding: 6px;
     }
 }

 @media (max-width: 350px) {
     .site-header .brand {
         flex-basis: 128px;
         width: 128px;
     }

     .site-header .brand-logo {
         max-height: 46px;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .site-header .brand-logo {
         transition: none;
     }
 }

 /* =========================================================
   PSTL PROPERTIES — final responsive header refinements
   ========================================================= */
 .site-header {
     width: 100%;
     min-width: 0;
 }

 .site-header .brand {
     flex-shrink: 1;
     min-width: 0;
 }

 .site-header .brand-logo {
     width: 100%;
     max-width: 100%;
     object-fit: contain;
 }

 @media (max-width: 780px) {
     .site-header {
         display: flex;
         align-items: center;
     }

     .site-header .brand {
         flex: 0 1 175px;
     }

     .site-header .menu-toggle {
         flex: 0 0 auto;
     }

     .site-header .call-button {
         flex: 0 0 auto;
     }

     .site-header .main-nav {
         max-height: calc(100vh - 72px);
         overflow-y: auto;
         overscroll-behavior: contain;
     }
 }

 @media (max-width: 440px) {
     .site-header .brand {
         flex-basis: 142px;
         max-width: 40vw;
     }

     .site-header .brand-logo {
         max-height: 48px;
     }

     .site-header .call-button {
         gap: 6px;
         padding: 8px 10px;
         font-size: 11px;
     }

     .site-header .call-button svg {
         width: 13px;
         height: 13px;
     }
 }

 @media (max-width: 360px) {
     .site-header {
         gap: 5px;
     }

     .site-header .brand {
         flex-basis: 120px;
         max-width: 37vw;
     }

     .site-header .brand-logo {
         max-height: 42px;
     }

     .site-header .call-button {
         padding: 7px 8px;
         font-size: 10px;
     }
 }



 /* =========================================================
   PSTL ENQUIRY NOW — responsive contact + WhatsApp form
   Uses the existing site palette: navy, cream and antique gold.
   ========================================================= */
 .enquiry-section {
     padding: clamp(34px, 5vw, 76px) 5%;
     background: var(--paper, #fcfaf5);
     scroll-margin-top: 100px;
 }

 .enquiry-shell {
     width: min(100%, 1240px);
     margin: 0 auto;
     padding: clamp(22px, 3.2vw, 42px);
     display: grid;
     grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
     gap: clamp(28px, 4vw, 58px);
     align-items: stretch;
     background: #203447;
     border: 1px solid rgba(167, 123, 50, .35);
     border-radius: 10px;
     box-shadow: 0 18px 48px rgba(29, 48, 64, .13);
 }

 .enquiry-copy {
     color: #f8f5ed;
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-width: 0;
     padding: 8px 0;
 }

 .enquiry-kicker {
     color: #d5ae68;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .2em;
     margin: 0 0 13px;
 }

 .enquiry-copy h2 {
     color: #fffdf8;
     font-family: var(--serif, Georgia, serif);
     font-size: clamp(32px, 3.35vw, 48px);
     line-height: 1.08;
     letter-spacing: -.025em;
     margin: 0 0 16px;
 }

 .enquiry-intro {
     color: #d8e0e6;
     font-size: 14px;
     line-height: 1.75;
     max-width: 470px;
     margin: 0 0 26px;
 }

 .enquiry-contact-details {
     border-top: 1px solid rgba(255, 255, 255, .16);
     padding-top: 19px;
 }

 .enquiry-contact-details h3 {
     color: #f2d49c;
     font-family: var(--sans, Arial, sans-serif);
     font-size: 14px;
     font-weight: 700;
     margin: 0 0 7px;
 }

 .enquiry-contact-details p {
     color: #e0e6eb;
     font-size: 12px;
     line-height: 1.75;
     margin: 7px 0;
     overflow-wrap: anywhere;
 }

 .enquiry-contact-details strong {
     color: #fff;
     font-weight: 700;
 }

 .enquiry-contact-details a {
     color: #fff;
     text-decoration: none;
     text-underline-offset: 3px;
 }

 .enquiry-contact-details a:hover {
     color: #e8c47f;
     text-decoration: underline;
 }

 .enquiry-direct {
     margin-top: 16px;
 }

 .enquiry-direct>p {
     color: #e0e6eb;
     font-size: 12px;
     margin: 0 0 10px;
 }

 .enquiry-direct-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .enquiry-call-link,
 .enquiry-whatsapp-link {
     min-height: 42px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 10px 17px;
     border-radius: 999px;
     color: #fff;
     font-family: var(--sans, Arial, sans-serif);
     font-size: 11px;
     font-weight: 700;
     text-decoration: none;
     transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
 }

 .enquiry-call-link {
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .48);
 }

 .enquiry-whatsapp-link {
     background: #159b60;
     border: 1px solid #159b60;
 }

 .enquiry-call-link:hover,
 .enquiry-whatsapp-link:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
 }

 .enquiry-call-link svg,
 .enquiry-whatsapp-link svg {
     width: 14px;
     height: 14px;
     fill: currentColor;
     flex: 0 0 auto;
 }

 .enquiry-form-card {
     min-width: 0;
     align-self: center;
     background: #fff;
     border-radius: 14px;
     padding: clamp(22px, 3vw, 32px);
     box-shadow: 0 12px 35px rgba(5, 17, 27, .12);
 }

 .enquiry-form-card>h3 {
     color: #24384a;
     font-family: var(--serif, Georgia, serif);
     font-size: clamp(21px, 2vw, 27px);
     line-height: 1.2;
     margin: 0 0 5px;
 }

 .enquiry-form-subtitle {
     color: #697783;
     font-size: 11px;
     margin: 0 0 20px;
 }

 .pstl-enquiry-form {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 13px 12px;
 }

 .enquiry-field {
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .enquiry-field-full {
     grid-column: 1 / -1;
 }

 .enquiry-field label {
     color: #344657;
     font-size: 10px;
     font-weight: 700;
     line-height: 1.35;
 }

 .enquiry-field label span {
     color: #a77b32;
 }

 .enquiry-field input,
 .enquiry-field select {
     width: 100%;
     min-width: 0;
     height: 43px;
     padding: 0 12px;
     border: 1px solid #dfe4e8;
     border-radius: 8px;
     outline: none;
     background: #fff;
     color: #24384a;
     font: 400 11px/1.4 var(--sans, Arial, sans-serif);
     transition: border-color .2s ease, box-shadow .2s ease;
 }

 .enquiry-field input::placeholder {
     color: #9aa3aa;
     opacity: 1;
 }

 .enquiry-field input:focus,
 .enquiry-field select:focus {
     border-color: #b4873e;
     box-shadow: 0 0 0 3px rgba(180, 135, 62, .13);
 }

 .enquiry-submit {
     grid-column: 1 / -1;
     width: 100%;
     min-height: 45px;
     margin-top: 3px;
     padding: 11px 18px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     border: 0;
     border-radius: 999px;
     background: linear-gradient(110deg, #a8792d, #bd9145);
     color: #fff;
     cursor: pointer;
     font: 700 11px/1.3 var(--sans, Arial, sans-serif);
     box-shadow: 0 7px 18px rgba(167, 123, 50, .2);
     transition: transform .2s ease, box-shadow .2s ease;
 }

 .enquiry-submit:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 22px rgba(167, 123, 50, .28);
 }

 .enquiry-submit:focus-visible,
 .enquiry-call-link:focus-visible,
 .enquiry-whatsapp-link:focus-visible {
     outline: 3px solid #e5c17d;
     outline-offset: 3px;
 }

 .enquiry-privacy {
     grid-column: 1 / -1;
     color: #a1aab1;
     font-size: 9px;
     line-height: 1.5;
     text-align: center;
     margin: -2px 0 0;
 }

 .enquiry-form-status {
     grid-column: 1 / -1;
     color: #18794e;
     font-size: 10px;
     line-height: 1.5;
     text-align: center;
     margin: 0;
 }

 @media (max-width: 900px) {
     .enquiry-shell {
         grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
         gap: 24px;
         padding: 26px;
     }

     .enquiry-copy h2 {
         font-size: clamp(30px, 4.2vw, 40px);
     }

     .enquiry-form-card {
         padding: 22px;
     }
 }

 @media (max-width: 700px) {
     .enquiry-section {
         padding: 34px 4.5%;
     }

     .enquiry-shell {
         grid-template-columns: 1fr;
         gap: 24px;
         padding: 23px 18px;
         border-radius: 9px;
     }

     .enquiry-copy {
         padding: 2px 0 0;
     }

     .enquiry-copy h2 {
         font-size: clamp(32px, 9vw, 42px);
     }

     .enquiry-intro {
         font-size: 13px;
         margin-bottom: 20px;
     }

     .enquiry-contact-details {
         padding-top: 15px;
     }

     .enquiry-form-card {
         padding: 21px 17px;
         border-radius: 11px;
     }

     .enquiry-form-card>h3 {
         font-size: 22px;
     }
 }

 @media (max-width: 420px) {
     .pstl-enquiry-form {
         grid-template-columns: 1fr;
         gap: 12px;
     }

     .enquiry-field,
     .enquiry-field-full,
     .enquiry-submit,
     .enquiry-privacy,
     .enquiry-form-status {
         grid-column: 1;
     }

     .enquiry-direct-actions {
         display: grid;
         grid-template-columns: 1fr 1fr;
     }

     .enquiry-call-link,
     .enquiry-whatsapp-link {
         padding: 10px 9px;
         font-size: 10px;
     }

     .enquiry-desktop-break {
         display: none;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .enquiry-call-link,
     .enquiry-whatsapp-link,
     .enquiry-submit {
         transition: none;
     }
 }



 /* =========================================================
   FAQ / QUICK ANSWERS
   PSTL palette: cream, navy, antique gold.
   ========================================================= */
 .faq-section {
     background: #fcfaf5;
     padding-top: clamp(54px, 6vw, 82px);
     padding-bottom: clamp(54px, 6vw, 82px);
     scroll-margin-top: 90px;
 }

 .faq-inner {
     width: min(100%, 860px);
     margin: 0 auto;
 }

 .faq-heading {
     text-align: center;
     margin: 0 auto clamp(28px, 4vw, 42px);
     max-width: 720px;
 }

 .faq-kicker {
     margin: 0 0 8px;
     color: var(--gold, #a77b32);
     font-size: 10px;
     line-height: 1.4;
     font-weight: 700;
     letter-spacing: .2em;
 }

 .faq-heading h2 {
     margin: 0 0 9px;
     color: var(--ink, #1d3040);
     font: 600 clamp(28px, 3.4vw, 40px)/1.2 var(--serif, Georgia, serif);
     letter-spacing: -.025em;
 }

 .faq-heading>p:last-child {
     margin: 0;
     color: var(--muted, #64717a);
     font-size: 13px;
     line-height: 1.7;
 }

 .faq-list {
     border-top: 1px solid rgba(167, 123, 50, .18);
 }

 .faq-item {
     border-bottom: 1px solid rgba(167, 123, 50, .18);
     background: transparent;
 }

 .faq-item summary {
     list-style: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     min-height: 59px;
     padding: 17px 2px;
     color: var(--ink, #1d3040);
     font: 600 14px/1.5 var(--serif, Georgia, serif);
     transition: color .2s ease;
 }

 .faq-item summary::-webkit-details-marker {
     display: none;
 }

 .faq-item summary::marker {
     content: "";
 }

 .faq-item summary:hover,
 .faq-item[open] summary {
     color: var(--gold, #a77b32);
 }

 .faq-toggle {
     position: relative;
     flex: 0 0 20px;
     width: 20px;
     height: 20px;
     display: inline-grid;
     place-items: center;
     color: var(--gold, #a77b32);
 }

 .faq-toggle::before,
 .faq-toggle::after {
     content: "";
     position: absolute;
     width: 9px;
     height: 1.5px;
     border-radius: 2px;
     background: currentColor;
     transition: transform .22s ease;
 }

 .faq-toggle::after {
     transform: rotate(90deg);
 }

 .faq-item[open] .faq-toggle::after {
     transform: rotate(0deg);
 }

 .faq-answer {
     padding: 0 42px 18px 2px;
     animation: faqReveal .22s ease both;
 }

 .faq-answer p {
     max-width: 740px;
     margin: 0;
     color: var(--muted, #64717a);
     font: 400 12px/1.85 var(--sans, Arial, sans-serif);
 }

 .faq-footer-note {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 27px;
     color: var(--muted, #64717a);
     font-size: 12px;
 }

 .faq-footer-note a {
     color: var(--gold, #a77b32);
     font-weight: 700;
     text-underline-offset: 4px;
 }

 .faq-footer-note a:hover {
     text-decoration: underline;
 }

 .faq-item summary:focus-visible,
 .faq-footer-note a:focus-visible {
     outline: 2px solid var(--gold2, #c49a50);
     outline-offset: 4px;
     border-radius: 3px;
 }

 @keyframes faqReveal {
     from {
         opacity: 0;
         transform: translateY(-4px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (max-width: 600px) {
     .faq-section {
         padding: 46px 5%;
     }

     .faq-heading {
         margin-bottom: 24px;
     }

     .faq-heading h2 {
         font-size: clamp(27px, 7.5vw, 34px);
     }

     .faq-heading>p:last-child {
         max-width: 340px;
         margin: 0 auto;
         font-size: 12px;
     }

     .faq-item summary {
         min-height: 57px;
         gap: 12px;
         padding: 15px 0;
         font-size: 13px;
     }

     .faq-answer {
         padding: 0 28px 16px 0;
     }

     .faq-answer p {
         font-size: 11.5px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .faq-item summary,
     .faq-toggle::before,
     .faq-toggle::after {
         transition: none;
     }

     .faq-answer {
         animation: none;
     }
 }



 /* =========================================================
   PSTL PREMIUM FOOTER — desktop / tablet / mobile
   Matches the supplied two-column navy-and-gold reference.
   ========================================================= */
 .site-footer {
     width: 100%;
     margin: 0;
     padding: clamp(34px, 4.2vw, 58px) clamp(24px, 5.3vw, 84px);
     background: #172936;
     color: #f7f3e9;
 }

 .site-footer .footer-inner {
     width: min(100%, 1420px);
     margin: 0 auto;
     display: grid;
     grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
     align-items: center;
     column-gap: clamp(40px, 7vw, 112px);
     row-gap: 30px;
 }

 .site-footer .footer-brand-column {
     min-width: 0;
     max-width: 590px;
 }

 .site-footer .footer-logo-link {
     display: inline-flex;
     align-items: center;
     max-width: min(100%, 450px);
     margin: 0 0 22px;
     text-decoration: none;
 }

 .site-footer .footer-logo {
     display: block;
     width: 100%;
     height: auto;
     max-height: 82px;
     object-fit: contain;
     object-position: left center;
 }

 .site-footer .footer-description {
     max-width: 500px;
     margin: 0;
     color: #bdc9d0;
     font: 400 13px/1.7 var(--sans, Arial, sans-serif);
     letter-spacing: .005em;
 }

 .site-footer .footer-description strong {
     color: #e8edf0;
     font-weight: 700;
 }

 .site-footer .footer-information {
     min-width: 0;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     gap: 24px;
 }

 .site-footer .footer-highlights {
     width: 100%;
 }

 .site-footer .footer-highlight-title {
     margin: 0 0 8px;
     color: #f2d49b;
     font: 600 12px/1.5 var(--sans, Arial, sans-serif);
     letter-spacing: .015em;
 }

 .site-footer .footer-highlight-detail {
     margin: 0;
     color: #c5d0d6;
     font: 400 12px/1.8 var(--sans, Arial, sans-serif);
 }

 .site-footer .footer-highlight-detail span {
     display: inline-block;
     padding: 0 5px;
     color: #c49a50;
 }

 .site-footer .footer-approval {
     margin-top: 18px;
     margin-bottom: 0;
 }

 .site-footer .footer-copyright {
     margin: 0;
     color: #8799a5;
     font: 400 11px/1.7 var(--sans, Arial, sans-serif);
 }

 /* Tablet */
 @media (max-width: 900px) {
     .site-footer {
         padding: 36px 5%;
     }

     .site-footer .footer-inner {
         grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
         column-gap: 34px;
     }

     .site-footer .footer-logo-link {
         max-width: 370px;
         margin-bottom: 17px;
     }

     .site-footer .footer-description {
         font-size: 12px;
     }

     .site-footer .footer-information {
         gap: 19px;
     }
 }

 /* Mobile: stack the brand and information without clipping or overlap. */
 @media (max-width: 620px) {
     .site-footer {
         padding: 34px 6% 28px;
     }

     .site-footer .footer-inner {
         grid-template-columns: 1fr;
         gap: 27px;
         text-align: left;
     }

     .site-footer .footer-brand-column {
         max-width: 100%;
     }

     .site-footer .footer-logo-link {
         width: min(100%, 360px);
         max-width: 100%;
         margin-bottom: 16px;
     }

     .site-footer .footer-logo {
         max-height: 72px;
     }

     .site-footer .footer-description {
         max-width: 470px;
         font-size: 12px;
         line-height: 1.75;
     }

     .site-footer .footer-information {
         width: 100%;
         gap: 17px;
         padding-top: 20px;
         border-top: 1px solid rgba(230, 215, 187, .2);
     }

     .site-footer .footer-highlight-title {
         font-size: 11px;
     }

     .site-footer .footer-highlight-detail {
         font-size: 11px;
         line-height: 1.9;
     }

     .site-footer .footer-approval {
         margin-top: 14px;
     }

     .site-footer .footer-copyright {
         font-size: 10px;
         line-height: 1.7;
     }
 }

 @media (max-width: 360px) {
     .site-footer {
         padding-right: 5%;
         padding-left: 5%;
     }

     .site-footer .footer-highlight-detail {
         font-size: 10px;
     }
 }

 /* Respect reduced-motion preferences; footer remains static by design. */
 @media (prefers-reduced-motion: reduce) {

     .site-footer *,
     .site-footer *::before,
     .site-footer *::after {
         scroll-behavior: auto !important;
         animation-duration: .01ms !important;
         transition-duration: .01ms !important;
     }
 }



 /* =========================================================
   LOCATION / NEARBY DESTINATIONS — refreshed category selector
   ========================================================= */
 .nearby-card {
     min-width: 0;
     padding: clamp(18px, 2.2vw, 28px);
     background: #fbf8f0;
     border: 1px solid rgba(167, 123, 50, .12);
     border-radius: 14px;
 }

 .nearby-card-heading {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 14px;
     margin-bottom: 18px;
 }

 .nearby-card-heading .eyebrow {
     margin-bottom: 5px;
 }

 .nearby-card-heading h3 {
     margin: 0;
     color: var(--ink);
     font: 600 clamp(25px, 2.5vw, 31px)/1.15 var(--serif);
 }

 .nearby-intro {
     max-width: 480px;
     margin: 7px 0 0;
     color: var(--muted);
     font-size: 11px;
     line-height: 1.6;
 }

 .nearby-total {
     flex: 0 0 auto;
     color: var(--gold);
     font: 600 20px/1 var(--serif);
     text-align: right;
 }

 .nearby-total small {
     display: block;
     margin-top: 5px;
     color: var(--muted);
     font: 700 8px/1 var(--sans);
     letter-spacing: .15em;
 }

 .nearby-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 9px;
 }

 .nearby-destination {
     position: relative;
     min-width: 0;
     min-height: 68px;
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 11px 12px;
     border: 1px solid rgba(167, 123, 50, .18);
     border-radius: 10px;
     background: rgba(255, 253, 248, .72);
     color: var(--ink);
     text-align: left;
     font: inherit;
     cursor: pointer;
     transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
 }

 .nearby-destination:hover {
     transform: translateY(-2px);
     background: #fffaf0;
     border-color: var(--gold);
     box-shadow: 0 8px 18px rgba(57, 48, 31, .09);
 }

 .nearby-destination:focus-visible {
     outline: 3px solid rgba(196, 154, 80, .42);
     outline-offset: 2px;
 }

 .nearby-destination.is-active {
     background: #fffaf0;
     border-color: var(--gold);
     box-shadow: 0 7px 18px rgba(57, 48, 31, .07);
 }

 .nearby-destination .nearby-icon {
     flex: 0 0 36px;
     width: 36px;
     height: 36px;
     display: grid;
     place-items: center;
     margin: 0;
     border: 1px solid var(--gold);
     border-radius: 50%;
     color: var(--gold);
     background: #fffdf8;
     transition: background .25s ease, color .25s ease, border-color .25s ease;
 }

 .nearby-destination .nearby-icon svg {
     width: 18px;
     height: 18px;
 }

 .nearby-destination:hover .nearby-icon,
 .nearby-destination.is-active .nearby-icon {
     color: #fff;
     background: var(--gold);
 }

 .nearby-destination>span:nth-child(2) {
     min-width: 0;
     display: block;
 }

 .nearby-destination strong,
 .nearby-destination small {
     display: block;
 }

 .nearby-destination strong {
     font-size: 12px;
     line-height: 1.35;
 }

 .nearby-destination small {
     margin-top: 3px;
     color: var(--muted);
     font-size: 9px;
     line-height: 1.4;
 }

 .category-arrow {
     margin-left: auto;
     color: var(--gold);
     font-size: 17px;
     transition: transform .25s ease;
 }

 .nearby-destination:hover .category-arrow,
 .nearby-destination.is-active .category-arrow {
     transform: translateX(3px);
 }

 .destination-gallery {
     margin-top: 20px;
     padding-top: 19px;
     border-top: 1px solid rgba(40, 54, 62, .14);
 }

 .destination-gallery-heading {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 14px;
     margin-bottom: 13px;
 }

 .gallery-eyebrow {
     margin: 0 0 5px;
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .2em;
 }

 .destination-gallery-heading h4 {
     margin: 0;
     color: var(--ink);
     font: 600 clamp(22px, 2vw, 28px)/1.2 var(--serif);
 }

 .destination-gallery-heading p:not(.gallery-eyebrow) {
     margin: 5px 0 0;
     color: var(--muted);
     font-size: 11px;
     line-height: 1.5;
 }

 .destination-place-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 7px 10px;
     margin: 0 0 16px;
     padding: 0;
     list-style: none;
 }

 .destination-place {
     min-width: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     padding: 9px 10px;
     border: 1px solid rgba(167, 123, 50, .13);
     border-radius: 8px;
     background: rgba(255, 253, 248, .7);
 }

 .destination-place strong {
     min-width: 0;
     color: var(--ink);
     font-size: 10px;
     font-weight: 700;
     line-height: 1.4;
 }

 .destination-travel-time {
     flex: 0 0 auto;
     color: var(--gold);
     font-size: 9px;
     font-weight: 700;
     white-space: nowrap;
 }

 .destination-photo-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 11px;
 }

 .destination-photo-card {
     min-width: 0;
     margin: 0;
     overflow: hidden;
     border-radius: 10px;
     background: #fffdf8;
     box-shadow: 0 6px 18px rgba(34, 43, 48, .07);
     opacity: 0;
     transform: translateY(12px);
 }

 .gallery-enter .destination-photo-card {
     animation: destinationReveal .55s cubic-bezier(.2, .75, .25, 1) forwards;
     animation-delay: calc(var(--photo-index) * 75ms);
 }

 .destination-photo-card img {
     display: block;
     width: 100%;
     height: clamp(110px, 12vw, 150px);
     object-fit: cover;
     transition: transform .65s cubic-bezier(.2, .7, .2, 1);
 }

 .destination-photo-card:hover img {
     transform: scale(1.06);
 }

 .destination-photo-card figcaption {
     padding: 8px 10px 9px;
     color: var(--ink);
     background: #fffdf8;
     font-size: 10px;
     font-weight: 700;
     line-height: 1.4;
 }

 .destination-photo-card.image-unavailable {
     min-height: 145px;
     background: linear-gradient(135deg, #eee5d4, #e0d2b8);
 }

 .destination-photo-card.image-unavailable::before {
     content: 'Illustrative photo';
     min-height: 110px;
     display: grid;
     place-items: center;
     color: #80663c;
     font: italic 14px var(--serif);
 }

 .gallery-disclaimer {
     margin: 10px 0 0;
     color: var(--muted);
     font-size: 9px;
     line-height: 1.5;
 }

 @keyframes destinationReveal {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (max-width: 1050px) {
     .nearby-card {
         padding: 20px;
     }

     .destination-place {
         align-items: flex-start;
         flex-direction: column;
         gap: 3px;
     }
 }

 @media (max-width: 760px) {
     .location-content {
         grid-template-columns: 1fr;
     }

     .map-card {
         height: 320px;
     }

     .nearby-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .destination-photo-card img {
         height: clamp(135px, 30vw, 210px);
     }
 }

 @media (max-width: 480px) {
     .nearby-card {
         padding: 16px 13px;
     }

     .nearby-card-heading {
         align-items: flex-start;
     }

     .nearby-grid {
         grid-template-columns: 1fr;
         gap: 7px;
     }

     .nearby-destination {
         min-height: 62px;
     }

     .destination-place-list {
         grid-template-columns: 1fr;
     }

     .destination-place {
         flex-direction: row;
         align-items: center;
     }

     .destination-photo-grid {
         gap: 8px;
     }

     .destination-photo-card img {
         height: 118px;
     }

     .destination-photo-card figcaption {
         padding: 7px 8px;
         font-size: 9px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .nearby-destination,
     .destination-photo-card,
     .destination-photo-card img {
         animation: none !important;
         transition: none !important;
         opacity: 1;
         transform: none;
     }
 }

 /* Nearby destination gallery: count badge removed */
 .destination-gallery-heading {
     justify-content: flex-start;
 }

 .destination-gallery-heading>div {
     width: 100%;
     min-width: 0;
 }



 /* =========================================================
   PREMIUM RESIDENCE COLLECTION TABS
   Scoped to the three Chera / Chola / Pandiya selector cards
   ========================================================= */
 .floor-layout-grid .residence-tabs {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 13px;
     width: 100%;
     max-width: 100%;
     margin: 28px 0 24px;
     align-items: stretch;
 }

 .floor-layout-grid .residence-tab {
     position: relative;
     isolation: isolate;
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-rows: auto auto auto;
     align-content: center;
     justify-items: start;
     min-width: 0;
     min-height: 112px;
     padding: 18px 54px 18px 20px;
     overflow: hidden;
     text-align: left;
     color: #1d3040;
     background:
         linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(250, 246, 236, .96));
     border: 1px solid rgba(167, 123, 50, .28);
     border-radius: 13px;
     box-shadow:
         0 3px 10px rgba(45, 36, 22, .025),
         inset 0 1px 0 rgba(255, 255, 255, .9);
     cursor: pointer;
     transform: translateY(0);
     transition:
         color .3s ease,
         background .35s ease,
         border-color .3s ease,
         box-shadow .35s ease,
         transform .35s cubic-bezier(.2, .75, .25, 1);
     -webkit-tap-highlight-color: transparent;
 }

 .floor-layout-grid .residence-tab::before {
     content: "";
     position: absolute;
     z-index: -1;
     inset: 0;
     width: auto;
     height: auto;
     border-radius: inherit;
     opacity: 0;
     transform: none;
     background:
         radial-gradient(circle at 100% 0%, rgba(196, 154, 80, .22), transparent 42%),
         linear-gradient(135deg, #263b4b 0%, #172b3a 100%);
     transition: opacity .35s ease;
 }

 .floor-layout-grid .residence-tab::after {
     content: "";
     position: absolute;
     left: 0;
     top: 17px;
     bottom: 17px;
     width: 3px;
     border-radius: 0 3px 3px 0;
     background: linear-gradient(180deg, #e0bd78, #a77b32);
     opacity: .35;
     transition: opacity .3s ease, top .3s ease, bottom .3s ease;
 }

 .floor-layout-grid .residence-tab:hover {
     transform: translateY(-4px);
     border-color: rgba(167, 123, 50, .7);
     box-shadow:
         0 13px 28px rgba(52, 43, 27, .10),
         0 3px 8px rgba(52, 43, 27, .04);
 }

 .floor-layout-grid .residence-tab:focus-visible {
     outline: 3px solid rgba(196, 154, 80, .45);
     outline-offset: 4px;
 }

 .floor-layout-grid .residence-tab.is-active {
     color: #fffaf0;
     border-color: #a77b32;
     background: linear-gradient(135deg, #263b4b 0%, #172b3a 100%);
     box-shadow:
         0 14px 30px rgba(29, 48, 64, .18),
         inset 0 1px 0 rgba(255, 255, 255, .12);
 }

 .floor-layout-grid .residence-tab.is-active::before {
     opacity: 1;
     transform: none;
 }

 .floor-layout-grid .residence-tab.is-active::after {
     top: 12px;
     bottom: 12px;
     opacity: 1;
 }

 .floor-layout-grid .tab-index {
     grid-column: 1;
     grid-row: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 29px;
     min-height: 20px;
     padding: 2px 7px;
     margin-bottom: 7px;
     color: #986d2b;
     background: rgba(196, 154, 80, .13);
     border: 1px solid rgba(167, 123, 50, .22);
     border-radius: 30px;
     font-family: var(--sans);
     font-size: 9px;
     line-height: 1;
     font-weight: 700;
     letter-spacing: .13em;
     transition: color .3s ease, background .3s ease, border-color .3s ease;
 }

 .floor-layout-grid .residence-tab.is-active .tab-index {
     color: #f3d69f;
     background: rgba(224, 189, 120, .13);
     border-color: rgba(224, 189, 120, .35);
 }

 .floor-layout-grid .tab-name {
     grid-column: 1;
     grid-row: 2;
     margin: 0;
     color: inherit;
     font: 600 clamp(21px, 2vw, 25px)/1.15 var(--serif);
     letter-spacing: -.025em;
     transition: color .3s ease;
 }

 .floor-layout-grid .tab-subtitle {
     grid-column: 1;
     grid-row: 3;
     margin: 5px 0 0;
     color: #68737a;
     font-family: var(--sans);
     font-size: 10px;
     line-height: 1.4;
     letter-spacing: .015em;
     transition: color .3s ease;
 }

 .floor-layout-grid .residence-tab.is-active .tab-subtitle {
     color: rgba(255, 250, 240, .72);
 }

 .floor-layout-grid .tab-indicator {
     position: absolute;
     top: 50%;
     right: 18px;
     display: grid;
     place-items: center;
     width: 31px;
     height: 31px;
     color: #a77b32;
     background: rgba(196, 154, 80, .12);
     border: 1px solid rgba(167, 123, 50, .24);
     border-radius: 50%;
     font-family: var(--sans);
     font-size: 16px;
     line-height: 1;
     transform: translateY(-50%);
     transition:
         color .3s ease,
         background .3s ease,
         border-color .3s ease,
         transform .3s ease;
 }

 .floor-layout-grid .residence-tab:hover .tab-indicator {
     transform: translate(3px, -50%);
 }

 .floor-layout-grid .residence-tab.is-active .tab-indicator {
     color: #1d3040;
     background: linear-gradient(135deg, #e4c78f, #bd9145);
     border-color: rgba(255, 239, 205, .65);
     transform: translate(3px, -50%);
 }

 /* Third collection spans the complete row on wider screens */
 .floor-layout-grid .residence-tab:last-child {
     grid-column: 1 / -1;
 }

 /* Tablet */
 @media (max-width: 900px) {
     .floor-layout-grid .residence-tabs {
         gap: 10px;
         margin: 24px 0 20px;
     }

     .floor-layout-grid .residence-tab {
         min-height: 104px;
         padding: 15px 48px 15px 16px;
     }

     .floor-layout-grid .tab-name {
         font-size: 22px;
     }
 }

 /* Mobile: full-width stacked selector cards */
 @media (max-width: 520px) {
     .floor-layout-grid .residence-tabs {
         grid-template-columns: minmax(0, 1fr);
         gap: 10px;
         margin: 21px 0 19px;
     }

     .floor-layout-grid .residence-tab,
     .floor-layout-grid .residence-tab:last-child {
         grid-column: 1;
         min-height: 88px;
         padding: 12px 52px 12px 16px;
         border-radius: 11px;
     }

     .floor-layout-grid .tab-index {
         min-height: 18px;
         min-width: 27px;
         margin-bottom: 4px;
         font-size: 8px;
     }

     .floor-layout-grid .tab-name {
         font-size: 20px;
     }

     .floor-layout-grid .tab-subtitle {
         margin-top: 3px;
         font-size: 9px;
     }

     .floor-layout-grid .tab-indicator {
         right: 14px;
         width: 29px;
         height: 29px;
         font-size: 15px;
     }

     .floor-layout-grid .residence-tab::after {
         top: 13px;
         bottom: 13px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .floor-layout-grid .residence-tab,
     .floor-layout-grid .residence-tab::before,
     .floor-layout-grid .residence-tab::after,
     .floor-layout-grid .tab-index,
     .floor-layout-grid .tab-subtitle,
     .floor-layout-grid .tab-indicator {
         transition: none !important;
     }
 }



 /* ==========================================================
   LUXURY COLLECTION SELECTOR — CHERA / CHOLA / PANDIYA
   Inspired by the supplied reference: jewel-tone cards,
   antique-gold detailing and compact Explore controls.
   ========================================================== */

 .floor-layout-grid .residence-tabs {
     display: grid !important;
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     gap: 12px !important;
     width: 100%;
     max-width: none !important;
     margin: 27px 0 22px !important;
     align-items: stretch;
 }

 .floor-layout-grid .residence-tab,
 .floor-layout-grid .residence-tab:last-child {
     --tab-bg: #173c32;
     --tab-bg-deep: #08291f;
     --tab-gold: #d9bd7c;
     --tab-copy: #fff6df;
     --tab-muted: rgba(255, 246, 223, .76);

     position: relative !important;
     isolation: isolate;
     display: grid !important;
     grid-template-columns: minmax(0, 1fr) auto !important;
     grid-template-rows: auto auto auto !important;
     align-content: center !important;
     justify-items: start !important;
     min-width: 0;
     min-height: 126px !important;
     padding: 17px 15px 17px 20px !important;
     overflow: hidden;
     text-align: left;
     color: var(--tab-copy) !important;
     background:
         radial-gradient(ellipse at 92% 8%, rgba(211, 184, 119, .20), transparent 39%),
         linear-gradient(135deg, var(--tab-bg) 0%, var(--tab-bg-deep) 100%) !important;
     border: 1px solid rgba(214, 185, 120, .72) !important;
     border-radius: 25px !important;
     box-shadow:
         0 9px 18px rgba(24, 34, 29, .12),
         inset 0 1px 0 rgba(255, 248, 222, .20),
         inset 0 0 0 4px rgba(226, 204, 151, .10) !important;
     cursor: pointer;
     transform: translateY(0);
     transition:
         transform .35s cubic-bezier(.2, .75, .25, 1),
         box-shadow .35s ease,
         border-color .35s ease,
         filter .35s ease;
     -webkit-tap-highlight-color: transparent;
 }

 /* Distinct signature colors for each collection */
 .floor-layout-grid .residence-tab[data-residence="chera"] {
     --tab-bg: #164536;
     --tab-bg-deep: #06291f;
     --tab-gold: #dfc783;
     --tab-copy: #fff3d3;
     --tab-muted: rgba(255, 243, 211, .78);
 }

 .floor-layout-grid .residence-tab[data-residence="chola"] {
     --tab-bg: #d18a50;
     --tab-bg-deep: #a95f32;
     --tab-gold: #fff0c6;
     --tab-copy: #fffaf0;
     --tab-muted: rgba(255, 250, 240, .82);
 }

 .floor-layout-grid .residence-tab[data-residence="pandiya"] {
     --tab-bg: #24364a;
     --tab-bg-deep: #111f30;
     --tab-gold: #e0c58c;
     --tab-copy: #fff7e7;
     --tab-muted: rgba(255, 247, 231, .78);
 }

 /* Fine decorative botanical-inspired linework */
 .floor-layout-grid .residence-tab::before {
     content: "";
     position: absolute;
     z-index: -1;
     inset: 0;
     width: auto;
     height: auto;
     border-radius: inherit;
     opacity: .55;
     transform: none;
     background:
         radial-gradient(ellipse 42px 12px at 80% 22%, transparent 57%, rgba(226, 204, 151, .48) 59%, transparent 62%),
         radial-gradient(ellipse 42px 12px at 88% 34%, transparent 57%, rgba(226, 204, 151, .38) 59%, transparent 62%),
         radial-gradient(ellipse 42px 12px at 77% 46%, transparent 57%, rgba(226, 204, 151, .34) 59%, transparent 62%),
         radial-gradient(ellipse 42px 12px at 93% 54%, transparent 57%, rgba(226, 204, 151, .30) 59%, transparent 62%),
         linear-gradient(135deg, transparent 68%, rgba(226, 204, 151, .08));
     pointer-events: none;
     transition: opacity .35s ease;
 }

 .floor-layout-grid .residence-tab::after {
     content: "";
     position: absolute;
     z-index: -1;
     inset: 5px;
     border: 1px solid rgba(231, 210, 160, .24);
     border-radius: 20px;
     pointer-events: none;
     transition: inset .35s ease, border-color .35s ease;
 }

 .floor-layout-grid .residence-tab:hover {
     transform: translateY(-4px) !important;
     border-color: rgba(238, 213, 158, .98) !important;
     box-shadow:
         0 15px 27px rgba(24, 34, 29, .19),
         inset 0 1px 0 rgba(255, 248, 222, .25),
         inset 0 0 0 4px rgba(226, 204, 151, .15) !important;
 }

 .floor-layout-grid .residence-tab:focus-visible {
     outline: 3px solid rgba(167, 123, 50, .55) !important;
     outline-offset: 4px;
 }

 .floor-layout-grid .residence-tab.is-active {
     border: 2px solid var(--tab-gold) !important;
     box-shadow:
         0 15px 30px rgba(20, 34, 29, .23),
         0 0 0 3px rgba(210, 181, 117, .16),
         inset 0 0 0 4px rgba(236, 215, 165, .20),
         inset 0 1px 0 rgba(255, 248, 222, .28) !important;
     transform: translateY(-2px);
     filter: saturate(1.06);
 }

 .floor-layout-grid .residence-tab.is-active::before {
     opacity: .82 !important;
     transform: none !important;
 }

 .floor-layout-grid .residence-tab.is-active::after {
     inset: 5px;
     border-color: rgba(239, 219, 171, .42);
 }

 .floor-layout-grid .tab-index {
     position: relative;
     z-index: 1;
     grid-column: 1;
     grid-row: 1;
     display: inline-flex !important;
     align-items: center;
     justify-content: center;
     min-width: 30px;
     min-height: 21px;
     padding: 2px 8px;
     margin: 0 0 7px !important;
     color: var(--tab-gold) !important;
     background: rgba(8, 20, 16, .23) !important;
     border: 1px solid rgba(235, 211, 155, .48);
     border-radius: 30px;
     font-family: var(--sans);
     font-size: 9px !important;
     line-height: 1;
     font-weight: 700;
     letter-spacing: .12em;
 }

 .floor-layout-grid .residence-tab[data-residence="chola"] .tab-index {
     background: rgba(255, 247, 225, .18) !important;
     border-color: rgba(255, 247, 225, .36);
     color: #fff5d8 !important;
 }

 .floor-layout-grid .tab-name {
     position: relative;
     z-index: 1;
     grid-column: 1;
     grid-row: 2;
     margin: 0 !important;
     color: var(--tab-copy) !important;
     font: 600 clamp(21px, 2vw, 26px)/1.12 var(--serif) !important;
     letter-spacing: -.025em;
 }

 .floor-layout-grid .tab-subtitle {
     position: relative;
     z-index: 1;
     grid-column: 1;
     grid-row: 3;
     margin: 5px 0 0 !important;
     color: var(--tab-muted) !important;
     font-family: var(--sans);
     font-size: 10px !important;
     line-height: 1.4;
     letter-spacing: .01em;
 }

 /* Explore capsule sits on the right, like the reference */
 .floor-layout-grid .tab-indicator {
     position: relative !important;
     z-index: 2;
     grid-column: 2;
     grid-row: 1 / 4;
     top: auto !important;
     right: auto !important;
     align-self: center;
     display: inline-flex !important;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: auto !important;
     min-width: 88px;
     height: 34px !important;
     margin-left: 8px;
     padding: 0 9px 0 13px;
     color: var(--tab-copy) !important;
     background: rgba(9, 24, 19, .16) !important;
     border: 1px solid rgba(239, 218, 169, .78) !important;
     border-radius: 30px !important;
     font-family: var(--sans);
     font-size: 10px !important;
     line-height: 1;
     font-weight: 600;
     letter-spacing: .025em;
     transform: none !important;
     box-shadow: 0 2px 7px rgba(0, 0, 0, .10);
     transition:
         color .3s ease,
         background .3s ease,
         border-color .3s ease,
         box-shadow .3s ease,
         transform .3s ease;
 }

 .floor-layout-grid .tab-arrow {
     display: grid;
     place-items: center;
     width: 20px;
     height: 20px;
     flex: 0 0 20px;
     color: #173329;
     background: linear-gradient(145deg, #f1dfae, #c9a45c);
     border-radius: 50%;
     font-family: var(--sans);
     font-size: 13px;
     line-height: 1;
     transition: transform .3s ease;
 }

 .floor-layout-grid .residence-tab[data-residence="chola"] .tab-indicator {
     color: #fff8e9 !important;
     background: rgba(255, 246, 223, .12) !important;
     border-color: rgba(255, 246, 223, .62) !important;
 }

 .floor-layout-grid .residence-tab[data-residence="chola"] .tab-arrow {
     color: #8c4d2b;
     background: #f4dfb0;
 }

 .floor-layout-grid .residence-tab[data-residence="pandiya"] .tab-indicator {
     color: #fff8e9 !important;
     background: rgba(255, 246, 223, .08) !important;
     border-color: rgba(230, 211, 171, .75) !important;
 }

 .floor-layout-grid .residence-tab:hover .tab-indicator,
 .floor-layout-grid .residence-tab.is-active .tab-indicator {
     box-shadow: 0 0 13px rgba(229, 202, 143, .22);
 }

 .floor-layout-grid .residence-tab:hover .tab-arrow,
 .floor-layout-grid .residence-tab.is-active .tab-arrow {
     transform: translateX(2px);
 }

 /* Pandiya is the full-width feature card on desktop */
 .floor-layout-grid .residence-tab:last-child {
     grid-column: 1 / -1 !important;
 }

 /* Medium screens */
 @media (max-width: 900px) {
     .floor-layout-grid .residence-tabs {
         gap: 10px !important;
         margin: 23px 0 19px !important;
     }

     .floor-layout-grid .residence-tab,
     .floor-layout-grid .residence-tab:last-child {
         min-height: 116px !important;
         padding: 15px 13px 15px 17px !important;
         border-radius: 21px !important;
     }

     .floor-layout-grid .tab-name {
         font-size: clamp(19px, 2.6vw, 23px) !important;
     }

     .floor-layout-grid .tab-indicator {
         min-width: 76px;
         height: 31px !important;
         gap: 6px;
         padding: 0 7px 0 10px;
         font-size: 9px !important;
     }

     .floor-layout-grid .tab-arrow {
         width: 18px;
         height: 18px;
         flex-basis: 18px;
     }
 }

 /* Mobile: full-width, stacked cards with comfortable tap targets */
 @media (max-width: 560px) {
     .floor-layout-grid .residence-tabs {
         grid-template-columns: minmax(0, 1fr) !important;
         gap: 11px !important;
         margin: 22px 0 20px !important;
     }

     .floor-layout-grid .residence-tab,
     .floor-layout-grid .residence-tab:last-child {
         grid-column: 1 / -1 !important;
         min-height: 108px !important;
         padding: 13px 14px 13px 17px !important;
         border-radius: 20px !important;
     }

     .floor-layout-grid .tab-index {
         min-width: 28px;
         min-height: 19px;
         margin-bottom: 5px !important;
         font-size: 8px !important;
     }

     .floor-layout-grid .tab-name {
         font-size: 22px !important;
     }

     .floor-layout-grid .tab-subtitle {
         max-width: calc(100vw - 170px);
         font-size: 9px !important;
     }

     .floor-layout-grid .tab-indicator {
         min-width: 82px;
         height: 32px !important;
         margin-left: 5px;
         font-size: 9px !important;
     }
 }

 @media (max-width: 360px) {

     .floor-layout-grid .residence-tab,
     .floor-layout-grid .residence-tab:last-child {
         min-height: 102px !important;
         padding-left: 14px !important;
         padding-right: 10px !important;
     }

     .floor-layout-grid .tab-name {
         font-size: 20px !important;
     }

     .floor-layout-grid .tab-indicator {
         min-width: 73px;
         gap: 5px;
         padding-left: 8px;
         padding-right: 6px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .floor-layout-grid .residence-tab,
     .floor-layout-grid .residence-tab::before,
     .floor-layout-grid .residence-tab::after,
     .floor-layout-grid .tab-indicator,
     .floor-layout-grid .tab-arrow {
         transition: none !important;
     }
 }

 /* =========================================================
   FLOOR PLAN COLLECTION — accurate image display + responsive
   ========================================================= */
 #floor-plans .floor-layout-grid {
     grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
     align-items: center;
     gap: clamp(28px, 4.2vw, 64px);
 }

 #floor-plans .residence-copy,
 #floor-plans .residence-visual {
     min-width: 0;
     width: 100%;
 }

 #floor-plans .residence-visual {
     align-self: center;
 }

 #floor-plans .visual-topline {
     margin-bottom: 12px;
 }

 #floor-plans .residence-image-frame {
     width: 100%;
     padding: clamp(6px, 1vw, 12px);
     overflow: hidden;
     border: 1px solid #e3dacb;
     border-radius: 8px;
     background: #e9e2d8;
     box-shadow: 0 18px 36px rgba(59, 52, 32, .12);
 }

 #floor-plans .residence-image-frame img,
 #floor-plans #residence-image {
     display: block;
     width: 100%;
     max-width: 100%;
     height: auto !important;
     aspect-ratio: auto !important;
     object-fit: contain !important;
     object-position: center;
     border-radius: 3px;
     transform: none;
     transition: opacity .22s ease;
 }

 #floor-plans .residence-image-frame:hover img {
     transform: none;
 }

 #floor-plans .residence-tab {
     min-width: 0;
 }

 #floor-plans .residence-tab:focus-visible {
     outline: 3px solid rgba(167, 123, 50, .35);
     outline-offset: 3px;
 }

 @media (max-width: 1100px) {
     #floor-plans .floor-layout-grid {
         grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
         gap: 28px;
     }

     #floor-plans .floor-main-title {
         font-size: clamp(32px, 4vw, 44px);
     }
 }

 @media (max-width: 820px) {
     #floor-plans .floor-layout-grid {
         grid-template-columns: minmax(0, 1fr);
         gap: 34px;
         align-items: start;
     }

     #floor-plans .residence-copy {
         max-width: 720px;
     }

     #floor-plans .residence-description {
         max-width: 680px;
     }

     #floor-plans .residence-visual {
         width: 100%;
     }

     #floor-plans .residence-image-frame {
         padding: 8px;
     }
 }

 @media (max-width: 560px) {
     #floor-plans.section-pad {
         padding: 42px 16px;
     }

     #floor-plans .floor-layout-grid {
         gap: 26px;
     }

     #floor-plans .floor-main-title {
         font-size: clamp(30px, 9vw, 40px);
         line-height: 1.12;
     }

     #floor-plans .residence-tabs {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 9px;
         margin: 20px 0 18px;
     }

     #floor-plans .residence-tab {
         min-height: 96px;
         padding: 11px 12px;
     }

     #floor-plans .residence-tab:last-child {
         grid-column: 1 / -1;
     }

     #floor-plans .tab-name {
         font-size: 20px;
     }

     #floor-plans .tab-subtitle {
         max-width: 145px;
         font-size: 9px;
     }

     #floor-plans .tab-indicator {
         right: 10px;
     }

     #floor-plans .residence-specs {
         gap: 12px;
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     #floor-plans .residence-image-frame {
         padding: 5px;
         border-radius: 6px;
     }

     #floor-plans .visual-topline strong {
         font-size: 10px;
     }

     #floor-plans .visual-subtitle {
         font-size: 11px;
     }

     #floor-plans .visual-caption p {
         font-size: 10px;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     #floor-plans .residence-image-frame img {
         transition: none;
     }
 }


 /* =========================================================
   FLOOR PLAN IMAGE DISPLAY FIX
   Uses the complete original PNG artwork without cropping.
   ========================================================= */
 #floor-plans .residence-image-frame {
     width: 100%;
     min-width: 0;
     padding: 8px;
     overflow: hidden;
     background: #e9e2d8;
 }

 #floor-plans .residence-image-frame img,
 #floor-plans #residence-image {
     display: block;
     width: 100%;
     max-width: 100%;
     height: auto !important;
     min-height: 0;
     aspect-ratio: auto !important;
     object-fit: contain !important;
     object-position: center center;
     background: #e9e2d8;
     opacity: 1;
     visibility: visible;
     transform: none !important;
 }

 #floor-plans .residence-image-frame img.is-loading {
     opacity: .55;
 }

 #floor-plans .residence-image-frame img.is-loaded {
     opacity: 1;
 }

 #floor-plans .residence-image-frame img.is-error {
     display: none;
 }

 #floor-plans .residence-image-frame .image-error-message {
     padding: 24px;
     color: #8b2e24;
     text-align: center;
     font-size: 14px;
 }

 @media (max-width: 760px) {
     #floor-plans .residence-image-frame {
         padding: 5px;
     }

     #floor-plans .residence-image-frame img,
     #floor-plans #residence-image {
         width: 100%;
         height: auto !important;
     }
 }



 /* =========================================================
   HERO METRO CALLOUT — HAND-DRAWN SPEECH BUBBLE
   Responsive SVG outline + gentle float / line-draw animation
   ========================================================= */
 .hero-background .metro-note {
     position: absolute;
     z-index: 5;
     top: clamp(105px, 12.5%, 150px);
     right: clamp(22px, 4.2vw, 68px);
     width: clamp(190px, 18vw, 258px);
     min-height: clamp(126px, 11.5vw, 158px);
     display: grid;
     grid-template-columns: 27px auto;
     align-content: center;
     justify-content: center;
     column-gap: 8px;
     row-gap: 1px;
     padding: 25px 24px 32px 29px;
     color: #1d3040;
     line-height: 1.25;
     isolation: isolate;
     animation: metroBubbleFloat 5.2s ease-in-out infinite;
     transform-origin: 50% 55%;
 }

 .hero-background .metro-note-outline {
     position: absolute;
     z-index: -1;
     inset: 0;
     width: 100%;
     height: 100%;
     overflow: visible;
     pointer-events: none;
     filter: drop-shadow(0 5px 10px rgba(68, 49, 20, .08));
 }

 .hero-background .metro-note-outline-path {
     fill: rgba(250, 247, 239, .86);
     stroke: #a77b32;
     stroke-width: 1.7;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-dasharray: 780;
     stroke-dashoffset: 780;
     animation: metroBubbleDraw 1.65s cubic-bezier(.55, .05, .25, 1) .25s forwards;
 }

 .hero-background .metro-note>span {
     grid-row: 1 / span 2;
     align-self: center;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 27px;
     height: 27px;
     color: #1d3040;
     font-size: 22px;
 }

 .hero-background .metro-note>span svg {
     display: block;
     width: 24px;
     height: 24px;
     stroke: currentColor;
     fill: none;
 }

 .hero-background .metro-note strong {
     align-self: end;
     font-size: clamp(11px, .9vw, 13px);
     font-weight: 700;
     letter-spacing: -.01em;
     white-space: nowrap;
 }

 .hero-background .metro-note small {
     align-self: start;
     font-size: clamp(9px, .72vw, 10px);
     color: #53616a;
     white-space: nowrap;
 }

 @keyframes metroBubbleDraw {
     to {
         stroke-dashoffset: 0;
     }
 }

 @keyframes metroBubbleFloat {

     0%,
     100% {
         transform: translateY(0) rotate(0deg);
     }

     50% {
         transform: translateY(-6px) rotate(.6deg);
     }
 }

 @media (max-width: 1024px) and (min-width: 701px) {
     .hero-background .metro-note {
         top: 9%;
         right: 2.5%;
         width: 205px;
         min-height: 132px;
         padding: 22px 18px 29px 24px;
     }
 }

 @media (max-width: 700px) {
     .hero.hero-background {
         flex-direction: column;
     }

     .hero-background .metro-note {
         position: relative;
         inset: auto;
         align-self: flex-end;
         order: 2;
         width: min(205px, 58vw);
         min-height: 122px;
         margin: 12px 0 0;
         padding: 20px 16px 27px 21px;
         grid-template-columns: 24px auto;
         column-gap: 6px;
         animation-duration: 6s;
     }

     .hero-background .metro-note>span {
         width: 24px;
         height: 24px;
     }

     .hero-background .metro-note>span svg {
         width: 21px;
         height: 21px;
     }

     .hero-background .metro-note strong {
         font-size: 11px;
     }

     .hero-background .metro-note small {
         font-size: 9px;
     }

     .hero-background .metro-note-outline-path {
         stroke-width: 1.9;
     }
 }

 @media (max-width: 380px) {
     .hero-background .metro-note {
         width: min(190px, 64vw);
         min-height: 112px;
         margin-top: 8px;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .hero-background .metro-note,
     .hero-background .metro-note-outline-path {
         animation: none !important;
     }

     .hero-background .metro-note-outline-path {
         stroke-dashoffset: 0;
     }
 }


 /* =========================================================
   METRO SPEECH BUBBLE — CENTERED CONTENT + RESPONSIVE
   Keeps the icon and both text lines optically centered
   inside the bubble (not over the speech tail).
   ========================================================= */
 .hero-background .metro-note {
     display: block;
     width: clamp(190px, 18vw, 258px);
     height: clamp(126px, 11.5vw, 158px);
     min-height: 0;
     padding: 0;
     animation: metroBubbleFloat 5.2s ease-in-out infinite;
 }

 .hero-background .metro-note-content {
     position: absolute;
     left: 40%;
     top: 45%;
     transform: translate(-50%, -50%);
     display: grid;
     grid-template-columns: 27px auto;
     align-items: center;
     justify-content: center;
     column-gap: 8px;
     width: max-content;
     max-width: calc(100% - 54px);
     line-height: 1.25;
     white-space: nowrap;
 }

 .hero-background .metro-note-content>span {
     grid-column: 1;
     grid-row: 1 / span 2;
     align-self: center;
     justify-self: center;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 27px;
     height: 27px;
     margin: 0;
 }

 .hero-background .metro-note-content>span svg {
     display: block;
     width: 24px;
     height: 24px;
 }

 .hero-background .metro-note-copy {
     grid-column: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2px;
     text-align: center;
 }

 .hero-background .metro-note-copy strong {
     align-self: center;
     margin: 0;
     font-size: clamp(11px, .9vw, 13px);
     line-height: 1.25;
     white-space: nowrap;
 }

 .hero-background .metro-note-copy small {
     align-self: center;
     margin: 0;
     font-size: clamp(9px, .72vw, 10px);
     line-height: 1.25;
     white-space: nowrap;
 }

 /* Tablet: retain the bubble as an overlay and keep the text centered. */
 @media (max-width: 1024px) and (min-width: 701px) {
     .hero-background .metro-note {
         top: 8%;
         right: 2.5%;
         width: 205px;
         height: 132px;
     }

     .hero-background .metro-note-content {
         top: 44%;
         column-gap: 6px;
         grid-template-columns: 24px auto;
     }

     .hero-background .metro-note-content>span {
         width: 24px;
         height: 24px;
     }

     .hero-background .metro-note-content>span svg {
         width: 22px;
         height: 22px;
     }
 }

 /* Mobile: show the callout below the hero copy instead of hiding it. */
 @media (max-width: 700px) {
     .hero-background .metro-note {
         display: block;
         position: relative;
         inset: auto;
         align-self: flex-end;
         order: 2;
         flex: 0 0 auto;
         width: min(205px, 58vw);
         height: 122px;
         margin: 16px 0 0;
         animation-duration: 6s;
     }

     .hero-background .metro-note-content {
         top: 44%;
         grid-template-columns: 23px auto;
         column-gap: 6px;
         max-width: calc(100% - 42px);
     }

     .hero-background .metro-note-content>span {
         width: 23px;
         height: 23px;
     }

     .hero-background .metro-note-content>span svg {
         width: 21px;
         height: 21px;
     }

     .hero-background .metro-note-copy strong {
         font-size: 11px;
     }

     .hero-background .metro-note-copy small {
         font-size: 9px;
     }

     .hero-background .metro-note-outline-path {
         stroke-width: 1.9;
     }
 }

 @media (max-width: 380px) {
     .hero-background .metro-note {
         width: min(190px, 64vw);
         height: 112px;
         margin-top: 12px;
     }

     .hero-background .metro-note-content {
         column-gap: 5px;
         grid-template-columns: 21px auto;
     }

     .hero-background .metro-note-content>span {
         width: 21px;
         height: 21px;
     }

     .hero-background .metro-note-content>span svg {
         width: 19px;
         height: 19px;
     }

     .hero-background .metro-note-copy strong {
         font-size: 10px;
     }

     .hero-background .metro-note-copy small {
         font-size: 8px;
     }
 }


/* =========================================================
   CONTACT INFORMATION — warm editorial / gold detail system
   ========================================================= */
#contact-information {
  --contact-ink: #1d3040;
  --contact-gold: #a77b32;
  --contact-gold-light: #d2ad67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 8vw, 108px) 5%;
  background:
    radial-gradient(ellipse at 12% 12%, rgba(210, 173, 103, .13), transparent 34%),
    radial-gradient(ellipse at 90% 90%, rgba(29, 48, 64, .07), transparent 36%),
    #f7f3e9;
}
#contact-information::before,
#contact-information::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(167, 123, 50, .16);
  border-radius: 50%;
}
#contact-information::before {
  width: 440px; height: 440px; right: -205px; top: -235px;
}
#contact-information::after {
  width: 300px; height: 300px; left: -190px; bottom: -190px;
}
#contact-information .contact-shell {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
}
#contact-information .contact-heading {
  max-width: 680px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
#contact-information .contact-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--contact-gold);
  font: 700 10px/1.4 var(--sans);
  letter-spacing: .28em;
}
#contact-information .contact-kicker i {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--contact-gold);
}
#contact-information .contact-heading h2 {
  margin: 14px 0 12px;
  color: var(--contact-ink);
  font: 600 clamp(32px, 4.2vw, 51px)/1.12 var(--serif);
  letter-spacing: -.035em;
}
#contact-information .contact-heading h2 em {
  color: var(--contact-gold);
  font-style: italic;
}
#contact-information .contact-heading p {
  max-width: 520px;
  margin: 0 auto;
  color: #64717a;
  font: 400 14px/1.8 var(--sans);
}
#contact-information .contact-details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
#contact-information .contact-detail-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 226px;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px 21px 22px;
  overflow: hidden;
  border: 1px solid rgba(167, 123, 50, .2);
  border-radius: 9px;
  background: rgba(252, 250, 245, .88);
  color: var(--contact-ink);
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(29, 48, 64, .045);
  transition: transform .45s cubic-bezier(.2,.75,.25,1), box-shadow .45s ease, border-color .35s ease, background .35s ease;
}
#contact-information .contact-detail-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -88px;
  top: -90px;
  border: 1px solid rgba(167, 123, 50, .2);
  border-radius: 50%;
  transition: transform .65s cubic-bezier(.2,.75,.25,1), background .4s ease;
}
#contact-information .contact-detail-card:hover {
  transform: translateY(-8px);
  border-color: rgba(167, 123, 50, .58);
  background: #fffdf8;
  box-shadow: 0 22px 48px rgba(29, 48, 64, .11);
}
#contact-information .contact-detail-card:hover::before {
  transform: scale(1.55);
  background: rgba(210, 173, 103, .07);
}
#contact-information .contact-icon {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(167, 123, 50, .34);
  border-radius: 50%;
  background: #f4eddf;
  color: var(--contact-gold);
  transition: transform .45s ease, color .35s ease, background .35s ease;
}
#contact-information .contact-icon svg { width: 21px; height: 21px; }
#contact-information .contact-detail-card:hover .contact-icon {
  transform: rotate(-9deg) scale(1.08);
  background: var(--contact-ink);
  color: #f4dfb0;
}
#contact-information .contact-label {
  margin-bottom: 7px;
  color: var(--contact-gold);
  font: 700 9px/1.4 var(--sans);
  letter-spacing: .19em;
}
#contact-information .contact-detail-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--contact-ink);
  font: 600 16px/1.5 var(--sans);
  overflow-wrap: anywhere;
}
#contact-information .contact-detail-card .contact-email { font-size: 13px; }
#contact-information .contact-address-card h3 { font-size: 14px; line-height: 1.65; }
#contact-information .contact-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 17px;
  color: #7b6848;
  font: 600 10px/1.4 var(--sans);
  letter-spacing: .04em;
  transition: color .3s ease, gap .3s ease;
}
#contact-information .contact-action b { font-size: 13px; font-weight: 500; }
#contact-information a:hover .contact-action { gap: 13px; color: var(--contact-gold); }
#contact-information .contact-card-line {
  position: absolute;
  right: 21px;
  bottom: 0;
  left: 21px;
  height: 2px;
  background: linear-gradient(90deg, var(--contact-gold), rgba(210,173,103,0));
  transform: scaleX(.15);
  transform-origin: left;
  transition: transform .45s ease;
}
#contact-information .contact-detail-card:hover .contact-card-line { transform: scaleX(1); }
#contact-information .contact-bottom-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 30px;
  color: #6d7476;
  font: 500 11px/1.5 var(--sans);
  letter-spacing: .035em;
}
#contact-information .contact-pulse {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--contact-gold);
  box-shadow: 0 0 0 0 rgba(167, 123, 50, .38);
  animation: contactPulse 2.2s ease-out infinite;
}
#contact-information .contact-bottom-rule {
  width: 38px;
  height: 1px;
  background: rgba(167, 123, 50, .45);
}
#contact-information .contact-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(167, 123, 50, .12);
  border-radius: 50%;
  pointer-events: none;
}
#contact-information .contact-orbit-one {
  width: 180px; height: 180px; left: -115px; top: 22%;
  animation: contactOrbit 24s linear infinite;
}
#contact-information .contact-orbit-two {
  width: 110px; height: 110px; right: -68px; bottom: 10%;
  border-style: dashed;
  animation: contactOrbit 32s linear infinite reverse;
}
#contact-information .contact-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.25,1);
  transition-delay: var(--contact-delay, 0s);
}
#contact-information .contact-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes contactPulse {
  0% { box-shadow: 0 0 0 0 rgba(167,123,50,.35); }
  70% { box-shadow: 0 0 0 9px rgba(167,123,50,0); }
  100% { box-shadow: 0 0 0 0 rgba(167,123,50,0); }
}
@keyframes contactOrbit { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  #contact-information .contact-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #contact-information .contact-detail-card { min-height: 205px; }
}
@media (max-width: 560px) {
  #contact-information { padding: 54px 17px 48px; }
  #contact-information .contact-heading { margin-bottom: 27px; }
  #contact-information .contact-heading h2 { font-size: clamp(30px, 9vw, 39px); }
  #contact-information .contact-heading p { font-size: 13px; }
  #contact-information .contact-details-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  #contact-information .contact-detail-card {
    min-height: 0;
    padding: 19px 18px 18px 76px;
    border-radius: 8px;
  }
  #contact-information .contact-icon {
    position: absolute;
    top: 20px;
    left: 17px;
    width: 42px;
    height: 42px;
    margin: 0;
  }
  #contact-information .contact-label { margin-bottom: 5px; }
  #contact-information .contact-detail-card h3 { font-size: 14px; }
  #contact-information .contact-detail-card .contact-email { font-size: 12px; }
  #contact-information .contact-address-card h3 { font-size: 13px; }
  #contact-information .contact-action { padding-top: 9px; }
  #contact-information .contact-bottom-note { gap: 8px; margin-top: 23px; font-size: 10px; }
  #contact-information .contact-orbit-one { width: 120px; height: 120px; left: -82px; }
  #contact-information .contact-orbit-two { width: 80px; height: 80px; right: -48px; }
}
@media (prefers-reduced-motion: reduce) {
  #contact-information *,
  #contact-information *::before,
  #contact-information *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  #contact-information .contact-animate { opacity: 1; transform: none; }
}


/* CONTACT INFORMATION — single wide panel layout */
#contact-information {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 6vw, 72px) 5%;
  background: #fff;
}
#contact-information .contact-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1100px, 100%);
  min-height: 349px;
  margin: 0 auto;
  padding: 47px 54px 43px;
  border-radius: 18px;
  background: #1f3245;
  color: #fff;
  box-shadow: 0 22px 44px rgba(20, 48, 82, .13);
}
#contact-information .contact-panel-glow {
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 330px;
  top: -190px;
  right: -80px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.018);
  animation: contactPanelFloat 12s ease-in-out infinite alternate;
}
#contact-information h2 {
  margin: 0 0 28px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}
#contact-information .contact-lines {
  display: grid;
  gap: 27px;
}
#contact-information .contact-lines p {
  margin: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#contact-information .contact-lines strong {
  font-weight: 700;
}
#contact-information .contact-lines a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease;
}
#contact-information .contact-lines a:hover {
  color: #e9d5ad;
  opacity: .95;
}
#contact-information .contact-animate {
  opacity: 0;
  transform: translateY(22px) scale(.99);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.25,1);
}
#contact-information .contact-animate.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@keyframes contactPanelFloat {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-24px, 18px, 0) rotate(12deg); }
}
@media (max-width: 700px) {
  #contact-information { padding: 42px 18px; }
  #contact-information .contact-panel {
    min-height: 0;
    padding: 34px 27px 35px;
    border-radius: 15px;
  }
  #contact-information h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }
  #contact-information .contact-lines { gap: 21px; }
  #contact-information .contact-lines p { font-size: 14px; line-height: 1.65; }
}
@media (max-width: 380px) {
  #contact-information .contact-panel { padding: 29px 21px 31px; }
  #contact-information .contact-lines p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #contact-information *,
  #contact-information *::before,
  #contact-information *::after {
    animation: none !important;
    transition: none !important;
  }
  #contact-information .contact-animate { opacity: 1; transform: none; }
}