/* Responsive Styles */

@keyframes heroStoryProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes visualTabsHintRight {

    0%,
    100% {
        transform: translate(-2px, -50%);
        opacity: 0.72;
    }

    50% {
        transform: translate(3px, -50%);
        opacity: 1;
    }
}

@keyframes visualTabsHintLeft {

    0%,
    100% {
        transform: translate(2px, -50%);
        opacity: 0.72;
    }

    50% {
        transform: translate(-3px, -50%);
        opacity: 1;
    }
}

@keyframes aboutImageDriftMobile {

    0%,
    100% {
        transform: scale(1.08) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(1.12) translate3d(-3px, -3px, 0);
    }
}

/* Responsive rules moved from style.css; keep desktop/default styles in style.css. */


/* User-preference media rules moved from style.css. */
@media (prefers-reduced-motion: reduce) {
    .footer-redesign-marquee-track {
        animation: none;
        transform: none;
    }

    .property-snapshot-brand h3 em {
        animation: none;
        background-position: 50% 50%;
        filter: none;
    }
}

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

    .differentiation-section::after,
    .differentiation-section::before,
    .peace-density-bg img,
    .peace-density-content,
    .differentiation-copy h2,
    .differentiation-copy p,
    .differentiation-card,
    .reveal-on-scroll .differentiation-copy h2,
    .reveal-on-scroll .differentiation-copy p,
    .reveal-on-scroll .differentiation-card,
    .reveal-on-scroll.is-visible .differentiation-copy h2,
    .reveal-on-scroll.is-visible .differentiation-copy p,
    .reveal-on-scroll.is-visible .differentiation-card,
    .reveal-on-scroll .about-reveal-img,
    .reveal-on-scroll .about-reveal-content,
    .reveal-on-scroll.is-visible .about-reveal-img,
    .reveal-on-scroll.is-visible .about-reveal-content,
    .ideal-floor-card,
    .ideal-floor-media img,
    .ideal-floor-eyebrow,
    .ideal-floor-heading h2,
    .ideal-floor-heading>p:not(.ideal-floor-eyebrow),
    .ideal-floor-size-tabs,
    .ideal-floor-media,
    .ideal-floor-panel,
    .project-plans-eyebrow,
    .project-plans-copy h2,
    .project-plans-copy>p:not(.project-plans-eyebrow),
    .project-plan-tabs,
    .project-plan-card,
    .transparent-pricing-eyebrow,
    .transparent-pricing-header h2,
    .transparent-pricing-header>p:not(.transparent-pricing-eyebrow),
    .transparent-pricing-tabs,
    .pricing-card,
    .selected-price-box::before,
    .premium-specs-eyebrow,
    .premium-specs-header h2,
    .premium-specs-header>p:not(.premium-specs-eyebrow),
    .premium-specs-slider,
    .premium-specs-brands,
    .premium-specs-notice,
    .visual-showcase-eyebrow,
    .visual-showcase-header h2,
    .visual-showcase-header>p:not(.visual-showcase-eyebrow),
    .visual-showcase-tabs,
    .visual-showcase-copy,
    .visual-showcase-content,
    .visual-showcase-cta,
    .visual-showcase-disclaimer,
    .prime-location-eyebrow,
    .prime-location-header h2,
    .prime-location-header>p:not(.prime-location-eyebrow),
    .prime-location-tabs,
    .prime-location-map,
    .prime-distance-block h3,
    .prime-distance-card,
    .lifestyle-amenities-eyebrow,
    .lifestyle-amenities-title,
    .lifestyle-amenities-tabs,
    .lifestyle-amenities-grid,
    .lifestyle-amenities-cta,
    .construction-progress-eyebrow,
    .construction-progress-title,
    .construction-progress-copy,
    .construction-progress-photo,
    .construction-progress-card,
    .interested-property-copy,
    .interested-property-mosaic,
    .buyer-testimonials-eyebrow,
    .buyer-testimonials-header h2,
    .buyer-testimonials-header p:not(.buyer-testimonials-eyebrow),
    .buyer-testimonials-slider,
    .sticky-availability-eyebrow,
    .sticky-availability-content h2,
    .sticky-availability-content>p,
    .sticky-availability-content>div,
    .sticky-availability-label,
    .buyer-appreciation-title,
    .buyer-appreciation-card,
    .faq-eyebrow,
    .faq-header h2,
    .faq-header>p,
    .faq-tabs,
    .faq-panels,
    .project-essentials-eyebrow,
    .project-essentials-card h2,
    .project-essentials-panel>p:not(.project-essentials-eyebrow),
    .project-essentials-actions,
    .site-visit-map,
    .site-visit-card,
    .property-snapshot-eyebrow,
    .property-snapshot-header h2,
    .property-snapshot-card,
    .property-snapshot-content h3,
    .property-snapshot-content p,
    .property-snapshot-readmore,
    .property-snapshot-strip,
    .prime-growth-grid article,
    .about-gallery img {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .about-photo::before {
        opacity: 0;
        transform: none;
        animation: none;
    }
}

@supports not (height: 100dvh) {
    .hero-section {
        --hero-section-height: 100vh;
    }
}

@media (max-width: 767px) {
    .visual-gallery-info {
        right: 10px;
        bottom: 10px;
        left: 10px;
        min-height: 48px;
        padding: 9px 10px;
    }

    .visual-gallery-info-copy {
        padding-right: 42px;
    }

    .visual-gallery-info-copy strong {
        font-size: 15px;
        line-height: 20px;
    }

    .visual-gallery-info-copy span {
        font-size: 11px;
        line-height: 16px;
    }

    .visual-gallery-view-full {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .visual-gallery-view-full svg {
        width: 16px;
        height: 16px;
    }

    .visual-detail-modal {
        padding: 18px 12px;
    }

    .visual-detail-modal-panel,
    .visual-detail-modal-scroll {
        max-height: calc(100dvh - 36px);
        border-radius: 18px;
    }

    .visual-detail-modal-image {
        height: 290px;
    }

    .visual-detail-modal-content {
        padding: 28px 20px 30px;
    }

    .visual-detail-modal-content h3 {
        font-size: 27px;
        line-height: 34px;
    }

    .visual-detail-modal-copy {
        font-size: 15px;
        line-height: 24px;
    }

    .visual-detail-modal-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .pricing-unlock-modal {
        padding: max(14px, calc(env(safe-area-inset-top) + 14px)) 14px max(14px, calc(env(safe-area-inset-bottom) + 14px));
    }

    .pricing-unlock-form {
        width: min(calc(100vw - 28px), 482px);
        max-height: calc(100dvh - 28px);
        padding: 28px 18px 20px;
        border-radius: 14px;
    }

    .pricing-unlock-form h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .pricing-unlock-copy {
        font-size: 13px;
        line-height: 19px;
    }

    .pricing-unlock-form input,
    .pricing-unlock-submit {
        height: 46px;
    }

    .pricing-unlock-submit {
        font-size: 11px;
        letter-spacing: 0.05em;
    }

    .pricing-celebration strong {
        font-size: 24px;
        line-height: 30px;
    }

    .pricing-celebration .pricing-pop-green {
        width: 14px !important;
        height: 14px !important;
    }

    .pricing-celebration span:nth-of-type(55) { --x: -128px; --y: -106px; }
    .pricing-celebration span:nth-of-type(56) { --x: -96px; --y: -168px; }
    .pricing-celebration span:nth-of-type(57) { --x: -48px; --y: -202px; }
    .pricing-celebration span:nth-of-type(58) { --x: 8px; --y: -180px; }
    .pricing-celebration span:nth-of-type(59) { --x: 62px; --y: -204px; }
    .pricing-celebration span:nth-of-type(60) { --x: 112px; --y: -152px; }
    .pricing-celebration span:nth-of-type(61) { --x: 136px; --y: -86px; }
    .pricing-celebration span:nth-of-type(62) { --x: 128px; --y: -12px; }
    .pricing-celebration span:nth-of-type(63) { --x: 118px; --y: 78px; }
    .pricing-celebration span:nth-of-type(64) { --x: 84px; --y: 146px; }
    .pricing-celebration span:nth-of-type(65) { --x: 32px; --y: 184px; }
    .pricing-celebration span:nth-of-type(66) { --x: -26px; --y: 164px; }
    .pricing-celebration span:nth-of-type(67) { --x: -82px; --y: 178px; }
    .pricing-celebration span:nth-of-type(68) { --x: -122px; --y: 116px; }
    .pricing-celebration span:nth-of-type(69) { --x: -138px; --y: 42px; }
    .pricing-celebration span:nth-of-type(70) { --x: -136px; --y: -34px; }
    .pricing-celebration span:nth-of-type(71) { --x: -74px; --y: -112px; }
    .pricing-celebration span:nth-of-type(72) { --x: 66px; --y: -118px; }
}

@media (max-width: 767px) {
    .premium-specs-modal {
        align-items: flex-start;
        padding: 76px 14px 20px;
    }

    .premium-specs-modal-panel {
        width: calc(100vw - 28px);
        max-height: calc(100vh - 96px);
        border-radius: 22px;
    }

    .premium-specs-modal-scroll {
        max-height: calc(100vh - 96px);
    }

    .premium-specs-modal-close {
        top: 92px;
        right: 22px;
        width: 40px;
        height: 40px;
    }

    .premium-specs-modal-image {
        height: auto;
        max-height: min(40vh, 320px);
        object-fit: initial;
        background: transparent;
    }

    .premium-specs-modal-content {
        padding: 28px 22px 28px;
    }

    .premium-specs-modal-content h3 {
        font-size: 26px;
        line-height: 32px;
    }

    .premium-specs-modal-copy {
        margin-bottom: 24px;
        font-size: 15px;
        line-height: 25px;
    }
}

@media (max-width: 991px) {
    .property-modal-hero {
        grid-template-columns: 1fr;
    }

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

    .footer-redesign-cta,
    .footer-redesign-main {
        grid-template-columns: 1fr;
    }

    .footer-redesign-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .property-snapshot-modal {
        align-items: flex-end !important;
        padding: 12px !important;
    }

    .property-snapshot-modal-panel {
        max-height: 88dvh !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .property-snapshot-modal-header {
        padding: 26px 20px 18px !important;
    }

    .property-snapshot-modal-header h3 {
        font-size: 30px !important;
    }

    .property-snapshot-modal-header span {
        font-size: 14px;
    }

    .property-snapshot-modal-content {
        padding: 20px !important;
    }

    .property-modal-hero>p {
        padding: 18px;
        font-size: 15px;
        line-height: 1.62;
    }

    .property-modal-hero dl,
    .property-modal-grid {
        grid-template-columns: 1fr;
    }

    .property-modal-grid article {
        padding: 17px;
    }

    .property-modal-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
    }

    .property-snapshot-modal-footer {
        flex-direction: column;
        padding: 0 20px 22px !important;
    }

    .property-snapshot-modal-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .footer-redesign {
        width: calc(100% - 28px);
        padding: 48px 0 22px;
    }

    .footer-redesign-cta {
        gap: 20px;
        border-radius: 18px;
        padding: 24px 20px;
    }

    .footer-redesign-cta h2 {
        font-size: 28px;
        line-height: 1.22;
    }

    .footer-redesign-cta span {
        font-size: 15px;
        line-height: 1.65;
    }

    .footer-redesign-actions {
        flex-direction: column;
        width: 100%;
    }

    .footer-redesign-actions a {
        width: 100%;
    }

    .footer-redesign-main {
        gap: 26px;
        padding: 38px 0 28px;
    }

    .footer-redesign-brand div {
        width: fit-content;
        max-width: 100%;
        align-items: center;
        justify-content: center;
    }

    .footer-redesign-contact {
        padding: 20px;
    }

    .footer-redesign-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 1.75;
    }

    h1 {
        font-size: 34px;
        line-height: 1.15;
    }

    h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    h3 {
        font-size: 24px;
        line-height: 1.25;
    }

    h4 {
        font-size: 16px;
    }

    p,
    li,
    dd,
    dt,
    address,
    .visual-showcase-copy p,
    .premium-specs-header>p,
    .project-plans-copy>p,
    .property-snapshot-content p,
    .visual-showcase-cta p {
        font-size: 16px;
        line-height: 1.8;
    }

    .visual-showcase-header h2 {
        font-size: 34px;
    }

    .project-essentials-head h2,
    .site-visit-card h2,
    .property-snapshot-header h2 {
        font-size: 32px;
    }

    .visual-showcase-tabs button,
    .project-essentials-btn,
    .site-visit-submit {
        font-size: 15px;
    }

    .visual-showcase-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .visual-gallery-card {
        height: 380px;
    }

    .visual-walkthrough-card {
        height: 320px;
    }

    .visual-showcase-cta h3 {
        font-size: 26px;
    }

    .visual-showcase-cta a {
        min-width: 100%;
    }

    .visual-showcase-cta small {
        font-size: 14px;
    }
}

@media (max-width: 991px) {

    .property-modal-hero,
    .footer-redesign-cta,
    .footer-redesign-main {
        grid-template-columns: 1fr !important;
    }

    .property-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .property-snapshot-modal .property-snapshot-modal-panel {
        width: 100% !important;
        max-height: 88dvh !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .property-snapshot-modal .property-snapshot-modal-header,
    .property-snapshot-modal .property-snapshot-modal-content {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .property-snapshot-modal .property-snapshot-modal-header h3 {
        font-size: 30px !important;
    }

    .property-modal-hero dl,
    .property-modal-grid {
        grid-template-columns: 1fr !important;
    }

    .property-modal-hero>p {
        padding: 18px !important;
        font-size: 15px !important;
    }

    .property-modal-note {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .property-snapshot-modal .property-snapshot-modal-footer {
        flex-direction: column !important;
        padding: 0 20px 22px !important;
    }

    .property-snapshot-modal .property-snapshot-modal-btn {
        width: 100% !important;
        min-height: 50px !important;
        padding: 0 34px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 767px) {
    .property-snapshot-section {
        padding: 38px 12px 42px !important;
    }

    .property-snapshot-section>div {
        width: 100% !important;
    }

    .property-snapshot-header h2 {
        margin-top: 14px !important;
        font-size: 28px !important;
        line-height: 1.18 !important;
    }

    .property-snapshot-layout {
        gap: 18px !important;
        margin-top: 28px !important;
    }

    .property-snapshot-card {
        min-height: 0 !important;
        padding: 18px 18px 16px !important;
        border-radius: 18px !important;
    }

    .property-snapshot-brand {
        margin-bottom: 16px !important;
        padding-bottom: 18px !important;
        text-align: center !important;
    }

    .property-snapshot-kicker {
        justify-content: center !important;
        gap: 9px !important;
        font-size: 8px !important;
        letter-spacing: 0.12em !important;
    }

    .property-snapshot-kicker span {
        width: 22px !important;
        flex-basis: 22px !important;
    }

    .property-snapshot-brand h3 {
        margin-top: 18px !important;
        font-size: 49px !important;
        line-height: 0.86 !important;
    }

    .property-snapshot-subtitle {
        margin-top: 18px !important;
        font-size: 15px !important;
        letter-spacing: 0.14em !important;
    }

    .property-snapshot-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 0 !important;
        gap: 10px !important;
    }

    .property-snapshot-metrics>div {
        min-height: 92px !important;
        padding: 12px 8px 19px !important;
        border-radius: 12px !important;
    }

    .property-snapshot-metrics svg {
        width: 19px !important;
        height: 19px !important;
    }

    .property-snapshot-metrics strong {
        margin-top: 6px !important;
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    .property-snapshot-metrics span {
        margin-top: 4px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .property-snapshot-content {
        padding-bottom: 0 !important;
    }

    .property-snapshot-content h3 {
        margin-bottom: 14px !important;
        font-size: 24px !important;
        line-height: 1.22 !important;
    }

    .property-snapshot-content p {
        margin-bottom: 14px !important;
        font-size: 14px !important;
        line-height: 1.62 !important;
    }

    .footer-redesign {
        width: calc(100% - 24px) !important;
        padding: 34px 0 18px !important;
    }

    .footer-redesign-cta {
        gap: 14px !important;
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .footer-redesign-cta p {
        margin-bottom: 7px !important;
        font-size: 10px !important;
        letter-spacing: 0.10em !important;
    }

    .footer-redesign-cta h2 {
        font-size: 23px !important;
        line-height: 1.18 !important;
    }

    .footer-redesign-cta span {
        margin-top: 9px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .footer-redesign-actions {
        gap: 9px !important;
    }

    .footer-redesign-actions a {
        min-height: 44px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
    }

    .footer-redesign-main {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 14px !important;
        padding: 24px 0 18px !important;
    }

    .footer-redesign-marquee {
        margin-bottom: 18px !important;
    }

    .footer-redesign-marquee-mask {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .footer-redesign-marquee-set {
        gap: 22px !important;
        padding: 13px 22px 13px 0 !important;
    }

    .footer-redesign-marquee span {
        gap: 8px !important;
        font-size: 9px !important;
        letter-spacing: 0.12em !important;
    }

    .footer-redesign-brand {
        grid-column: 1 / -1;
        text-align: center !important;
    }

    .footer-redesign-brand>img {
        width: 112px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .footer-redesign-brand>p {
        max-width: 250px !important;
        margin: 12px 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .footer-redesign-brand div {
        width: fit-content !important;
        max-width: 100% !important;
        padding: 11px 14px 13px !important;
        border-radius: 14px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-redesign-brand div img {
        width: 112px !important;
    }

    .footer-redesign-column h3 {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    .footer-redesign-column a,
    .footer-redesign-column address,
    .footer-redesign-column p {
        margin-bottom: 8px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .footer-redesign-contact {
        grid-column: 1 / -1;
        text-align: center !important;
        align-items: center !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .footer-redesign-contact h3,
    .footer-redesign-contact a,
    .footer-redesign-contact address {
        text-align: center !important;
    }

    .footer-redesign-whatsapp {
        margin-right: auto !important;
        margin-left: auto !important;
        justify-content: center !important;
    }

    .footer-redesign-whatsapp {
        min-height: 42px !important;
        padding: 0 15px !important;
    }

    .footer-redesign-bottom {
        gap: 7px !important;
        padding-top: 16px !important;
    }

    .footer-redesign-bottom p,
    .footer-redesign-bottom span {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .footer-redesign-bottom-links {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 1199px) {
    body {
        --sticky-availability-height: 100vh;
    }

    main,
    section {
        max-width: 100% !important;
        overflow-x: hidden;
    }
.hero-section {
        height: var(--hero-section-height);
        min-height: min(560px, var(--hero-section-height));
    }

    .hero-slide.is-active .hero-overlay {
        opacity: 1;
        transform: translateY(0);
    }

    .hero-slide.is-active .hero-content {
        animation: heroContentIn 1.4s ease 0.55s forwards;
        pointer-events: auto;
    }

    .about-section {
        height: auto;
        min-height: 0;
        padding: 52px 32px;
    }

    .about-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        width: 100%;
        height: auto;
        justify-items: center;
    }

    .about-gallery {
        grid-template-columns: minmax(0, 1fr) minmax(150px, 0.48fr);
        width: 100%;
        max-width: 680px;
        height: auto;
    }

    .about-photo--main,
    .about-main-img {
        height: 380px;
    }

    .about-side-gallery .about-photo,
    .about-side-gallery img {
        height: 183px;
    }

    .about-content,
    .about-text-block,
    .about-content h2,
    .about-text-block>p,
    .about-feature-grid {
        width: 100%;
        max-width: 680px;
    }

    .about-content {
        min-height: 0;
    }

    .peace-density-section {
        height: 620px;
    }

    .ideal-floor-section {
        min-height: 0;
        padding: 70px 32px;
    }

    .ideal-floor-header {
        align-items: flex-start;
        gap: 28px;
        margin-bottom: 32px;
    }

    .ideal-floor-heading h2 {
        font-size: 36px;
        line-height: 44px;
    }

    .ideal-floor-heading>p:not(.ideal-floor-eyebrow) {
        font-size: 16px;
        line-height: 24px;
    }

    .ideal-floor-size-tabs {
        width: 360px;
        min-width: 360px;
    }

    .ideal-floor-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ideal-floor-media,
    .ideal-floor-media img {
        min-height: 460px;
    }

    .ideal-floor-panel {
        padding: 42px 36px 36px;
    }

    .project-plans-section {
        min-height: 0;
        padding: 70px 32px;
    }

    .project-plans-inner {
        width: 100%;
    }

    .project-plans-header {
        align-items: flex-start;
        gap: 28px;
    }

    .project-plan-tabs {
        width: 380px;
        min-width: 380px;
    }

    .project-plan-visual {
        min-height: 360px;
        height: clamp(360px, 42vh, 540px);
        padding: 50px 30px 28px;
    }

    .project-plan-visual.is-site {
        min-height: 420px;
        height: clamp(420px, 46vh, 600px);
    }

    .transparent-pricing-section {
        min-height: 0;
        padding: 70px 32px;
    }

    .premium-specs-section {
        min-height: 0;
        padding: 44px 32px;
    }

    .visual-showcase-section {
        min-height: 0;
        padding: 44px 32px;
    }

    .prime-location-section {
        min-height: 0;
        padding: 56px 32px 60px;
    }

    .lifestyle-amenities-section {
        min-height: 0;
        padding: 54px 32px 40px;
    }

    .construction-progress-section {
        height: auto !important;
        min-height: 0;
        padding: 70px 32px;
    }

    .interested-property-section {
        height: auto !important;
        min-height: 0;
        padding: 60px 32px;
    }

    .buyer-testimonials-section {
        padding: 60px 32px 34px;
    }

    .sticky-availability-section {
        height: calc(var(--sticky-availability-height) * 2);
        min-height: calc(520px + var(--sticky-availability-height));
    }

    .buyer-appreciation-section {
        padding: 48px 32px 42px !important;
    }

    .buyer-appreciation-section>div {
        width: 100%;
    }

    .buyer-appreciation-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .faq-section {
        padding: 48px 24px;
    }

    .faq-layout {
        grid-template-columns: 270px minmax(0, 1fr) !important;
        gap: 16px !important;
        margin-top: 24px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .project-essentials-section {
        min-height: auto;
        padding: 72px 0;
    }

    .project-essentials-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .project-essentials-visual {
        min-height: 390px;
    }

    .project-essentials-head h2 {
        font-size: 40px;
        line-height: 48px;
    }

    .site-visit-section {
        padding: 64px 32px;
    }

    .site-visit-inner {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 500px !important;
        gap: 28px !important;
    }

    .site-visit-card-inner {
        padding: 30px 30px 20px;
    }

    .site-visit-map {
        min-height: 560px;
    }

    .property-snapshot-section {
        padding: 70px 32px;
    }

    .property-snapshot-section>div {
        width: 100% !important;
    }

    .property-snapshot-layout {
        grid-template-columns: 360px minmax(0, 1fr) !important;
        gap: 32px !important;
    }

    .property-snapshot-card {
        padding: 28px 28px 24px;
    }

    .property-snapshot-content h3 {
        font-size: 25px;
        line-height: 34px;
    }

    .property-snapshot-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .property-snapshot-strip>div:nth-child(2) {
        border-right: 0;
    }

    .property-snapshot-strip>div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .sticky-availability-panel {
        height: var(--sticky-availability-height);
        min-height: 520px;
    }

    .buyer-testimonials-section>div {
        width: 100%;
    }

    .buyer-testimonials-slider {
        width: 100% !important;
    }

    .buyer-testimonial-card {
        width: 320px;
        flex-basis: 320px;
    }

    .interested-property-section>div {
        width: 100%;
        height: auto;
        grid-template-columns: 1fr !important;
        gap: 34px;
        justify-items: center;
        text-align: center;
    }

    .interested-property-copy {
        display: flex;
        max-width: 620px;
        flex-direction: column;
        align-items: center;
    }

    .interested-property-copy p {
        margin-right: auto;
    }

    .interested-property-copy>div {
        justify-content: center;
    }

    .interested-property-mosaic {
        height: 360px !important;
    }

    .interested-property-tile img {
        object-fit: fill;
        background: transparent;
    }

    .interested-property-tile--main img,
    .interested-property-tile--top img,
    .interested-property-tile--bath img,
    .interested-property-tile--lamp img {
        object-position: center;
    }

    .interested-property-tile--tall img {
        object-position: center top;
    }

    .construction-progress-section>div {
        width: 100%;
    }

    .construction-progress-layout {
        grid-template-columns: 1fr !important;
    }

    .construction-progress-photo,
    .construction-progress-card {
        height: auto;
        min-height: 360px;
    }

    .lifestyle-amenities-section>div {
        width: 100%;
    }

    .prime-location-inner {
        width: 100%;
    }

    .prime-location-map,
    .prime-distance-block,
    .prime-growth-grid {
        width: 100%;
    }

    .prime-location-map {
        height: 500px;
    }

    .visual-showcase-inner {
        width: 100%;
    }

    .visual-gallery-card {
        height: 260px;
    }

    .visual-walkthrough-card {
        height: 480px;
    }

    .premium-specs-brand-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .transparent-pricing-inner {
        width: 100%;
    }

    .pricing-card {
        grid-template-columns: 1fr;
    }

    .pricing-left {
        border-right: 0;
        border-bottom: 1px solid rgba(213, 174, 102, 0.16);
    }

    .pricing-left,
    .pricing-right {
        padding: 34px;
    }

    .pricing-image-wrap img {
        height: 360px;
    }

    .peace-density-content {
        width: calc(100% - 64px);
        padding-top: 18px;
    }

    .peace-density-content h2 {
        font-size: 50px;
        line-height: 1.16;
    }

    .peace-density-content p {
        width: min(680px, 100%);
        font-size: 16px;
        line-height: 24px;
    }

    .differentiation-section {
        height: auto;
        background: #000000 center / cover no-repeat;
    }

    .differentiation-section.is-background-loaded {
        background-image: url("../img/optimized/89913c4de3bacd517a6920d106fe6f7082f9f0a4.webp");
    }

    .differentiation-banner {
        width: 100%;
        max-width: 1200px;
        height: auto;
        min-height: 620px;
        padding: 64px 32px;
        align-items: center;
        gap: 40px;
    }

    .differentiation-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(650px, 100%);
        margin-top: 0;
    }

    .differentiation-section.is-visible::before {
        opacity: 1;
    }

    .differentiation-section.is-visible::after {
        transform: scale(1.08);
    }

    .differentiation-section.is-visible .differentiation-copy h2,
    .differentiation-section.is-visible .differentiation-copy p {
        opacity: 1;
        transform: translate(0, 0);
    }

    .differentiation-section.is-visible .differentiation-card {
        animation-name: differentiationCardDrop;
        animation-duration: 0.88s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-fill-mode: both;
    }

    .differentiation-section.is-visible .differentiation-card:hover {
        transform: translateY(-7px) !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .snapshot-section {
        padding: 30px 28px 26px;
    }

    .snapshot-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 18px;
        column-gap: 18px;
        grid-auto-rows: minmax(108px, auto);
        width: min(100%, 720px);
        margin: 18px auto 0;
        align-items: start;
    }

    .snapshot-card {
        width: 100%;
        max-width: none;
        min-height: 108px;
        height: 100%;
        padding: 10px 10px 12px;
        justify-self: stretch;
        gap: 5px;
        border-radius: 14px;
    }

    .snapshot-card::after {
        border-radius: 0 0 14px 14px;
    }

    .snapshot-icon {
        width: 24px;
        height: 24px;
    }

    .snapshot-card span:not(.snapshot-icon) {
        font-size: 11px;
        line-height: 13px;
    }

    .snapshot-card strong {
        font-size: clamp(10px, 1.35vw, 12px);
        line-height: 1.14;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-section {
        --hero-story-width: min(421px, calc(100vw - 24px));
        height: var(--hero-section-height) !important;
        min-height: min(640px, var(--hero-section-height)) !important;
        display: flex;
        justify-content: center;
        padding: 14px 0 12px;
        background: #000000;
        overflow: visible !important;
        isolation: isolate;
    }

    .hero-section::before {
        content: none;
    }

    .hero-story-progress {
        position: absolute;
        top: 22px;
        left: 50%;
        z-index: 7;
        display: flex;
        gap: 6px;
        width: calc(var(--hero-story-width) - 28px);
        height: 3px;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .hero-story-progress-item {
        position: relative;
        flex: 1 1 0;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.38);
    }

    .hero-story-progress-item span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: #ffffff;
    }

    .hero-story-progress-item.is-complete span {
        width: 100%;
    }

    .hero-story-progress-item.is-active span {
        animation: heroStoryProgress var(--hero-story-duration, 8000ms) linear forwards;
    }

    .hero-story-tap {
        position: absolute;
        top: 14px;
        bottom: 12px;
        z-index: 4;
        display: block;
        width: calc(var(--hero-story-width) / 2);
        border: 0;
        padding: 0;
        background: transparent;
    }

    .hero-story-tap--prev {
        left: calc(50% - (var(--hero-story-width) / 2));
    }

    .hero-story-tap--next {
        right: calc(50% - (var(--hero-story-width) / 2));
    }

    @keyframes heroStoryProgress {
        from {
            width: 0;
        }

        to {
            width: 100%;
        }
    }

    #heroSlider {
        width: var(--hero-story-width);
        height: 100%;
        max-height: 616px;
        border-radius: 22px;
        overflow: hidden;
        background: #111111;
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.44),
            0 0 0 1px rgba(255, 255, 255, 0.08);
        flex: 0 0 var(--hero-story-width);
    }

    .hero-slide {
        min-width: var(--hero-story-width) !important;
        width: var(--hero-story-width) !important;
        flex: 0 0 var(--hero-story-width) !important;
        border-radius: inherit;
    }

    .hero-slide-bg {
        width: 100%;
        height: 100%;
        background-position: center top !important;
        background-size: cover !important;
    }

    .hero-content {
        top: 50%;
        z-index: 5;
        width: min(560px, calc(100% - 64px));
        height: auto;
        padding: 24px 24px 26px;
    }

    .hero-copy,
    .hero-copy :is(h1, h2.hero-heading),
    .hero-location,
    .hero-tags {
        width: 100%;
    }

    .hero-copy {
        height: auto;
    }

    .hero-copy :is(h1, h2.hero-heading) {
        font-size: 34px;
        line-height: 43px;
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        width: 100%;
        font-size: 16px;
        line-height: 25px;
    }

    .snapshot-section {
        padding: 26px 24px 26px;
    }

    .snapshot-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 16px;
        column-gap: 14px;
        grid-auto-rows: minmax(102px, auto);
        width: 100%;
        margin-top: 16px;
        align-items: start;
    }

    .snapshot-card {
        width: 100%;
        max-width: none;
        min-height: 102px;
        height: 100%;
        padding: 10px 6px 12px;
        justify-self: stretch;
        gap: 4px;
        border-radius: 13px;
    }

    .snapshot-card::after {
        height: 4px;
        border-radius: 0 0 13px 13px;
    }

    .snapshot-icon {
        width: 22px;
        height: 22px;
    }

    .snapshot-card span:not(.snapshot-icon) {
        font-size: 10px;
        line-height: 13px;
    }

    .snapshot-card strong {
        font-size: clamp(9px, 1.45vw, 11px);
        line-height: 1.14;
    }

    .snapshot-inner h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .differentiation-banner {
        min-height: 660px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 56px 40px;
        gap: 28px;
    }

    .differentiation-copy,
    .differentiation-copy h2,
    .differentiation-copy p,
    .differentiation-cards,
    .differentiation-card {
        width: 100%;
        max-width: 100%;
    }

    .differentiation-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 0;
    }

    .differentiation-card {
        min-height: 112px;
    }

    .peace-density-section {
        height: 680px;
    }

    .ideal-floor-section {
        padding: 58px 40px 64px;
    }

    .ideal-floor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .ideal-floor-size-tabs {
        width: min(100%, 398px);
        min-width: 0;
    }

    .ideal-floor-media,
    .ideal-floor-media img {
        min-height: 430px;
    }

    .ideal-floor-panel h3 {
        font-size: 28px;
        line-height: 34px;
    }

    .project-plans-section {
        padding: 60px 40px;
    }

    .project-plans-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
    }

    .project-plan-tabs {
        width: min(100%, 397px);
        min-width: 0;
    }

    .project-plan-variant-bar,
    .project-plan-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-plan-cta {
        width: min(100%, 280px);
        min-width: 0;
    }

    .transparent-pricing-section {
        padding: 60px 40px;
    }

    .premium-specs-section {
        padding: 40px 40px;
    }

    .visual-showcase-section {
        padding: 40px 40px;
    }

    .prime-location-section {
        padding: 50px 40px 56px;
    }

    .lifestyle-amenities-section {
        padding: 50px 40px 36px;
    }

    .construction-progress-section {
        padding: 60px 40px;
    }

    .interested-property-section {
        padding: 56px 40px;
    }

    .buyer-testimonials-section {
        padding: 56px 40px;
    }

    .sticky-availability-content h2 {
        font-size: 38px !important;
        line-height: 49px !important;
    }

    .buyer-appreciation-section {
        padding: 56px 40px;
    }

    .buyer-appreciation-title {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    .faq-header h2 {
        font-size: 32px !important;
        line-height: 39px !important;
    }

    .faq-item button {
        min-height: 58px;
        padding: 0 18px;
    }

    .faq-answer {
        margin-right: 18px;
        margin-left: 18px;
    }

    .project-essentials-card h2 {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    .site-visit-card h2 {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    .site-visit-phone {
        font-size: 23px;
        line-height: 30px;
    }

    .property-snapshot-header h2 {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    .buyer-testimonials-header h2 {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    .interested-property-copy h2 {
        font-size: 30px !important;
        line-height: 39px !important;
    }

    .construction-progress-title {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    .construction-progress-photo {
        min-height: 420px;
    }

    .lifestyle-amenities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card img {
        min-height: 250px;
    }

    .lifestyle-amenity-card:nth-child(3n) {
        border-right: 1px solid #3c3526;
    }

    .lifestyle-amenity-card:nth-child(2n) {
        border-right: 0;
    }

    .lifestyle-amenity-card:nth-last-child(-n + 3) {
        border-bottom: 1px solid #3c3526;
    }

    .prime-location-header h2 {
        font-size: 34px;
        line-height: 42px;
    }

    .prime-location-map {
        height: 430px;
    }

    .prime-distance-card {
        min-height: 128px;
        padding: 22px 18px;
    }

    .prime-distance-card div {
        gap: 12px;
    }

    .prime-distance-card svg {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .prime-distance-card span {
        font-size: 14px;
        line-height: 19px;
    }

    .prime-distance-card strong {
        margin-left: 40px;
        font-size: 12px;
        line-height: 17px;
    }

    .prime-distance-card strong em {
        font-size: 13px;
        line-height: 18px;
    }

    .prime-distance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .prime-growth-grid {
        grid-template-columns: 1fr !important;
    }

    .prime-growth-grid article {
        min-height: 0;
    }

    .visual-showcase-header h2 {
        font-size: 34px;
        line-height: 42px;
        font-weight: 500;
    }

    .visual-showcase-header>p:not(.visual-showcase-eyebrow) {
        font-size: 16px;
        line-height: 24px;
    }

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

    .visual-gallery-card {
        height: 240px;
    }

    .visual-walkthrough-card {
        height: 420px;
    }

    .premium-specs-header h2 {
        font-size: 34px;
        line-height: 42px;
    }

    .premium-specs-header>p:not(.premium-specs-eyebrow) {
        font-size: 16px;
        line-height: 24px;
    }

    .transparent-pricing-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
        margin-bottom: 36px;
    }

    .transparent-pricing-header {
        margin-left: 0;
        text-align: left;
    }

    .transparent-pricing-tabs {
        margin-left: 0;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        margin-bottom: 36px;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-header {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        text-align: center;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-tabs {
        margin: 0 auto;
    }

    .pricing-title-block h3 {
        font-size: 30px;
        line-height: 38px;
    }

    .peace-density-content {
        width: calc(100% - 80px);
        padding-top: 18px;
    }

    .peace-density-content h2 {
        font-size: 42px;
        line-height: 1.24;
    }

    .peace-density-content p {
        width: min(620px, 100%);
        font-size: 15px;
        line-height: 23px;
    }

}

@media (min-width: 768px) and (max-width: 899px) {
    .prime-distance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .prime-distance-card {
        min-height: 142px;
    }
}

@media (max-width: 767px) {
    body {
        background: #ffffff;
    }

    .hero-section {
        --hero-story-width: min(421px, calc(100vw - 24px));
        height: var(--hero-section-height) !important;
        min-height: min(520px, var(--hero-section-height)) !important;
        display: flex;
        justify-content: center;
        padding: 14px 0 12px;
        background: #000000;
        overflow: visible !important;
        isolation: isolate;
    }

    .hero-section::before {
        content: none;
    }

    .hero-story-progress {
        position: absolute;
        top: 22px;
        left: 50%;
        z-index: 7;
        display: flex;
        gap: 6px;
        width: calc(var(--hero-story-width) - 28px);
        height: 3px;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .hero-story-progress-item {
        position: relative;
        flex: 1 1 0;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.38);
    }

    .hero-story-progress-item span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: #ffffff;
    }

    .hero-story-progress-item.is-complete span {
        width: 100%;
    }

    .hero-story-progress-item.is-active span {
        animation: heroStoryProgress var(--hero-story-duration, 8000ms) linear forwards;
    }

    .hero-story-tap {
        position: absolute;
        top: 14px;
        bottom: 12px;
        z-index: 4;
        display: block;
        width: calc(var(--hero-story-width) / 2);
        border: 0;
        padding: 0;
        background: transparent;
    }

    .hero-story-tap--prev {
        left: calc(50% - (var(--hero-story-width) / 2));
    }

    .hero-story-tap--next {
        right: calc(50% - (var(--hero-story-width) / 2));
    }

    #heroSlider {
        width: var(--hero-story-width);
        height: 100%;
        max-height: 616px;
        border-radius: 22px;
        overflow: hidden;
        background: #111111;
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.44),
            0 0 0 1px rgba(255, 255, 255, 0.08);
        flex: 0 0 var(--hero-story-width);
    }

    .hero-slide {
        min-width: var(--hero-story-width) !important;
        width: var(--hero-story-width) !important;
        flex: 0 0 var(--hero-story-width) !important;
        border-radius: inherit;
    }

    .hero-slide-bg {
        width: 100%;
        height: 100%;
        background-position: center top !important;
        background-size: cover !important;
    }

    .hero-content {
        top: auto;
        bottom: 104px;
        z-index: 5;
        width: calc(100% - 30px);
        max-width: none;
        max-height: calc(100% - 142px);
        height: auto;
        padding: 19px 18px 17px;
        border-color: rgba(255, 255, 255, 0.12);
        border-radius: 22px;
        background:
            linear-gradient(180deg, rgba(88, 68, 42, 0.88), rgba(34, 29, 24, 0.93));
        box-shadow:
            0 16px 36px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        transform: translateX(-50%) translateY(18px);
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        animation: heroContentInMobileBottom 1.2s ease 0.45s forwards;
    }

    .hero-copy {
        height: auto;
        text-align: left;
    }

    .hero-copy,
    .hero-copy :is(h1, h2.hero-heading),
    .hero-location,
    .hero-tags {
        width: 100%;
    }

    .hero-copy p {
        width: 100%;
    }

    .hero-slide--figma .hero-copy p {
        width: 100%;
    }

    .hero-copy :is(h1, h2.hero-heading) {
        max-width: 300px;
        margin-top: 10px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 42px;
        font-weight: 700;
        line-height: 0.96;
        letter-spacing: 0;
        text-align: left;
    }

    .hero-copy :is(h1, h2.hero-heading) span {
        color: #D5AE66;
    }

    .hero-copy p {
        margin: 8px 0 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
    }

    .hero-location,
    .hero-slide--figma .hero-location {
        display: flex;
        justify-content: flex-start;
        height: auto;
        color: rgba(255, 255, 255, 0.66);
        font-size: 10px;
        font-weight: 800;
        line-height: 14px;
        letter-spacing: 0.16em;
        text-align: left;
        text-transform: uppercase;
    }

    .hero-location-divider {
        display: none;
    }

    .hero-slide--figma .hero-tags {
        display: flex;
    }

    .hero-tags {
        display: flex;
        height: auto;
        justify-content: flex-start;
        margin-top: 15px;
        gap: 7px;
    }

    .hero-tags span {
        width: auto;
        height: auto;
        min-height: 31px;
        padding: 7px 12px;
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(26, 24, 24, 0.76);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        line-height: 15px;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
    }

    .hero-actions {
        position: absolute;
        left: 50%;
        bottom: -82px;
        flex-direction: column;
        width: 100%;
        max-width: none;
        height: auto;
        margin-top: 0;
        gap: 8px;
        transform: translateX(-50%);
    }

    .hero-whatsapp-btn {
        width: 100%;
        max-width: none;
        border-radius: 12px;
    }

    .hero-whatsapp-btn {
        height: 50px;
        color: #000000;
        font-size: 15px;
        font-weight: 800;
        background: #D5AE66;
        box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
    }

    .hero-whatsapp-icon,
    .hero-whatsapp-btn span {
        display: none;
    }

    @keyframes heroContentInMobileBottom {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(28px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .ideal-floor-section {
        min-height: 0;
        padding: 34px 16px 38px;
        background: #000000;
    }

    .ideal-floor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .ideal-floor-heading h2 {
        font-size: 27px;
        line-height: 32px;
    }

    .ideal-floor-heading>p:not(.ideal-floor-eyebrow) {
        margin-top: 8px;
        font-size: 13px;
        line-height: 18px;
    }

    .ideal-floor-size-tabs {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 46px;
        padding: 4px;
        border-radius: 18px;
    }

    .ideal-floor-size-tabs button {
        height: 38px;
        border-radius: 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .ideal-floor-card {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 22px;
    }

    .ideal-floor-media,
    .ideal-floor-media img {
        min-height: 210px;
    }

    .ideal-floor-media {
        border-radius: 18px 18px 0 0;
    }

    .ideal-floor-badges {
        top: 12px;
        left: 12px;
        gap: 9px;
        max-width: calc(100% - 24px);
    }

    .ideal-floor-badges span,
    .ideal-floor-badges strong {
        min-height: 32px;
        max-width: 100%;
        padding: 8px 14px;
        font-size: 12px;
        white-space: normal;
    }

    .ideal-floor-panel {
        gap: 12px;
        padding: 18px 16px 16px;
    }

    .ideal-floor-panel h3 {
        font-size: 21px;
        line-height: 26px;
        letter-spacing: 0.01em;
    }

    .ideal-floor-panel>div:first-child p {
        margin-top: 4px;
        font-size: 11px;
        line-height: 15px;
        letter-spacing: 0.04em;
    }

    .ideal-floor-levels {
        height: 50px;
        border-radius: 18px;
    }

    .ideal-floor-levels button {
        border-radius: 14px;
        font-size: 11px;
    }

    .ideal-floor-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ideal-floor-spec {
        min-height: 72px;
        padding: 11px 10px;
        border-radius: 16px;
    }

    .ideal-floor-price-btn {
        align-self: stretch;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        height: 48px;
        border-radius: 16px;
        font-size: 13px;
    }

    .project-plans-section {
        padding: 34px 16px 38px;
    }

    .project-plans-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .project-plans-copy {
        width: 100%;
    }

    .project-plans-copy h2 {
        font-size: 27px;
        line-height: 32px;
        max-width: 100%;
    }

    .project-plans-copy>p:not(.project-plans-eyebrow) {
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        line-height: 18px;
        overflow-wrap: normal;
    }

    .project-plans-eyebrow,
    .project-plans-copy h2,
    .project-plans-copy>p:not(.project-plans-eyebrow),
    .project-plan-tabs,
    .project-plan-card {
        transform: translateY(22px);
    }

    .project-plan-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 46px;
        padding: 4px;
        gap: 4px;
        border-radius: 18px;
        overflow: visible;
        scrollbar-width: none;
    }

    .project-plan-tabs::-webkit-scrollbar {
        display: none;
    }

    .project-plan-tabs button {
        min-width: 0;
        width: 100%;
        height: 38px;
        gap: 3px;
        padding: 0 4px;
        border-radius: 14px;
        font-size: 9.5px;
        white-space: nowrap;
    }

    .project-plan-tabs svg {
        width: 11px;
        height: 11px;
        flex: 0 0 11px;
    }

    .project-plan-tabs .project-plan-cube-icon {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }

    .project-plan-card {
        border-radius: 22px;
    }

    .project-plan-variant-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-height: 0;
        padding: 10px;
    }

    .project-plan-variants {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
        height: auto;
        gap: 5px;
        padding: 4px;
        border-radius: 16px;
    }

    .project-plan-variants span {
        grid-column: 1 / -1;
        font-size: 12px;
    }

    .project-plan-variants button {
        width: 100%;
        min-width: 0;
        height: 34px;
        padding: 0 5px;
        border-radius: 12px;
        font-size: 10px;
        white-space: normal;
        line-height: 1.1;
    }

    .project-plan-meta {
        width: 100%;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
    }

    .project-plan-visual,
    .project-plan-visual.is-site {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 218px;
        height: 248px;
        padding: 38px 10px 46px;
    }

    .project-plan-image,
    .project-plan-visual.is-site .project-plan-image {
        flex: 1 1 auto;
        align-self: center;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .project-plan-badges {
        top: 10px;
        left: 10px;
        gap: 8px;
        max-width: calc(100% - 20px);
    }

    .project-plan-badge-label,
    .project-plan-badge-accent {
        min-height: 28px;
    }

    .project-plan-badge-label {
        margin: 5px 0px 0px 0px;
        padding: 7px 14px;
        font-size: 11px;
    }

    .project-plan-badge-accent {
        gap: 6px;
        padding: 7px 14px;
        font-size: 12px;
    }

    .project-plan-badge-accent svg {
        width: 12px;
        height: 12px;
    }

    .project-plan-tools {
        right: 10px;
        bottom: 10px;
    }

    .project-plan-tools a {
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
    }

    .project-plan-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 12px;
    }

    .project-plan-footer h3 {
        max-width: 100%;
        font-size: 18px;
        line-height: 23px;
        overflow-wrap: anywhere;
    }

    .project-plan-footer p {
        margin-top: 4px;
        font-size: 11px;
        line-height: 16px;
    }

    .project-plan-cta {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 0 10px;
        border-radius: 16px;
        font-size: 11px;
        white-space: normal;
        text-align: center;
    }

    .transparent-pricing-section {
        padding: 34px 16px 38px;
    }

    .premium-specs-section {
        padding: 30px 16px 34px;
    }

    .visual-showcase-section {
        padding: 34px 16px 36px;
    }

    .lifestyle-amenities-section {
        padding: 52px 16px 42px;
    }

    .construction-progress-section {
        padding: 52px 16px;
    }

    .interested-property-section {
        padding: 48px 16px;
    }

    .buyer-testimonials-section {
        padding: 48px 16px 30px;
    }

    .sticky-availability-section {
        min-height: calc(500px + var(--sticky-availability-height));
    }

    .buyer-appreciation-section {
        padding: 48px 16px;
    }

    .buyer-appreciation-title {
        font-size: 30px !important;
        line-height: 37px !important;
    }

    .buyer-appreciation-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .faq-section {
        padding: 34px 0;
    }

    .faq-section>div {
        width: calc(100% - 14px) !important;
        max-width: none !important;
    }

    .faq-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 20px !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .faq-sidebar {
        display: contents !important;
        min-width: 0;
    }

    .faq-tabs-shell {
        order: 1;
        display: grid !important;
        grid-template-columns: 12px minmax(0, 1fr) 12px;
        align-items: center;
        width: 100vw;
        margin: 0 calc(50% - 50vw) !important;
        padding: 0 2px !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .faq-tabs-arrow {
        display: grid !important;
        width: 12px;
        height: 34px;
        place-items: center;
        border: 0;
        background: transparent;
        color: rgba(240, 205, 69, 0.82);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
    }

    .faq-tabs-arrow.is-disabled {
        opacity: 0.24;
        pointer-events: none;
    }

    .faq-tabs {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        grid-template-columns: none !important;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        gap: 0 !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scrollbar-width: none;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-sizing: border-box;
    }

    .faq-tabs::-webkit-scrollbar {
        display: none;
    }

    .faq-tab-progress {
        display: none !important;
    }

    .faq-tab {
        grid-template-columns: 18px minmax(0, 1fr) 16px;
        flex: 0 0 auto;
        width: calc((100vw - 28px) / 1.58);
        min-width: calc((100vw - 28px) / 1.58);
        height: 34px;
        min-height: 34px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        gap: 4px;
        padding: 0 6px;
        font-size: 13px;
        line-height: 11px;
        border-radius: 11px;
        border-color: transparent;
        background: transparent;
    }

    .faq-tab>span:not(.faq-tab-icon) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .faq-tab-icon {
        width: 18px;
        height: 18px;
        border-radius: 6px;
    }

    .faq-tab-icon::before {
        font-size: 9px;
    }

    .faq-tab strong {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }

    .faq-panels {
        order: 2;
        width: 100%;
        max-width: none !important;
        padding: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }

    .faq-panel {
        gap: 7px;
    }

    .faq-item {
        border-radius: 13px;
    }

    .faq-assist-card {
        order: 3;
        width: 100%;
        margin: 14px auto 0 !important;
        padding: 6px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: center;
    }

    .project-essentials-section {
        min-height: auto;
        padding: 58px 0;
    }

    .project-essentials-card {
        width: 100% !important;
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .project-essentials-actions {
        max-width: none;
    }

    .project-essentials-visual {
        min-height: 330px;
    }

    .project-essentials-panel {
        padding: 34px 22px 28px;
    }

    .project-essentials-head h2 {
        font-size: 32px;
        line-height: 39px;
    }

    .project-essentials-head>p:not(.project-essentials-head-eyebrow) {
        font-size: 14px;
        line-height: 22px;
    }

    .site-visit-section {
        padding: 56px 16px;
    }

    .site-visit-inner {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .site-visit-map {
        min-height: 390px;
    }

    .site-visit-map img {
        inset: -16%;
        width: 132%;
        height: 132%;
    }

    .site-visit-card-inner {
        padding: 28px 24px 20px;
    }

    .property-snapshot-section {
        padding: 58px 16px;
    }

    .property-snapshot-layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .property-snapshot-card {
        min-height: 0;
        padding: 26px 24px 24px;
    }

    .property-snapshot-content {
        align-self: auto;
    }

    .buyer-appreciation-card {
        min-height: 0;
        padding: 24px 20px;
    }

    .buyer-appreciation-card p {
        font-size: 15px;
        line-height: 25px;
    }

    .buyer-appreciation-card strong {
        margin-top: 24px;
        font-size: 12px;
    }

    .sticky-availability-panel {
        min-height: 500px;
    }

    .sticky-availability-content h2 {
        font-size: 31px !important;
        line-height: 40px !important;
    }

    .sticky-availability-content>p {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    .sticky-availability-content>div:not(.sticky-availability-label) {
        max-width: 440px !important;
        flex-direction: column;
        gap: 12px !important;
    }

    .sticky-availability-content a {
        width: 100%;
        flex: none !important;
    }

    .sticky-availability-label {
        margin-top: 32px !important;
        font-size: 11px !important;
        letter-spacing: 0.22em !important;
    }

    .sticky-availability-label span {
        width: 48px;
    }

    .buyer-testimonials-header h2 {
        font-size: 30px !important;
        line-height: 37px !important;
    }

    .buyer-testimonials-header p:not(.buyer-testimonials-eyebrow) {
        font-size: 14px !important;
        line-height: 21px !important;
    }

    .buyer-testimonials-track {
        gap: 12px;
    }

    .buyer-appreciation-section .buyer-testimonials-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 22px !important;
        padding-bottom: 6px;
        scroll-snap-type: none !important;
        scrollbar-width: none;
    }

    .buyer-appreciation-section .buyer-testimonials-slider::-webkit-scrollbar {
        display: none;
    }

    .buyer-appreciation-section .buyer-testimonials-track {
        width: auto;
        gap: 14px;
    }

    .buyer-testimonial-card {
        width: 282px;
        min-height: 214px;
        flex-basis: 282px;
        padding: 19px 18px 16px;
    }

    .buyer-appreciation-section .buyer-testimonial-card {
        width: 100% !important;
        min-height: 214px;
        flex: 0 0 100% !important;
        scroll-snap-align: none !important;
    }

    .buyer-testimonials-progress {
        display: block;
        width: 100%;
        max-width: 320px;
    }

    .buyer-testimonial-card p {
        font-size: 12.5px;
        line-height: 21px;
    }

    .interested-property-copy h2 {
        font-size: 27px !important;
        line-height: 36px !important;
    }

    .interested-property-copy p {
        margin-top: 18px !important;
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .interested-property-copy>div {
        margin-top: 24px !important;
        flex-wrap: wrap;
    }

    .interested-property-mosaic {
        height: 520px !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1.2fr 0.85fr 1fr 1fr !important;
        gap: 8px !important;
    }

    .interested-property-tile--main {
        grid-column: 1 / -1 !important;
        grid-row: 1 / 2 !important;
    }

    .interested-property-tile--top {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
    }

    .interested-property-tile--tall {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 4 !important;
    }

    .interested-property-tile--bath {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
    }

    .interested-property-tile--lamp {
        grid-column: 1 / -1 !important;
        grid-row: 4 / 5 !important;
    }

    .construction-progress-title {
        font-size: 30px !important;
        line-height: 37px !important;
    }

    .construction-progress-copy {
        font-size: 15px !important;
        line-height: 23px !important;
    }

    .construction-progress-layout {
        margin-top: 34px !important;
    }

    .construction-progress-photo {
        min-height: 300px;
    }

    .construction-progress-card {
        min-height: 0;
        padding: 20px 16px !important;
    }

    .construction-progress-meter {
        margin-top: 22px !important;
    }

    .construction-phase-trigger {
        min-height: 48px;
        font-size: 15px;
        line-height: 20px;
    }

    .construction-phase-panel div {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 9px;
        font-size: 14px;
        line-height: 20px;
    }

    .construction-phase-panel strong {
        margin-left: 30px;
        min-width: 118px;
        font-size: 12px;
    }

    .construction-progress-meter strong {
        font-size: 19px !important;
        line-height: 25px;
    }

    .construction-progress-meter p {
        margin-top: 14px !important;
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .lifestyle-amenities-title {
        font-size: 30px !important;
        line-height: 37px !important;
    }

    .lifestyle-amenities-grid {
        grid-template-columns: 1fr !important;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card img {
        min-height: 250px;
    }

    .lifestyle-amenities-cta {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 22px;
        padding: 24px 18px !important;
    }

    .lifestyle-amenities-cta a {
        width: 100%;
    }

    .visual-showcase-header {
        max-width: 560px;
    }

    .visual-showcase-header h2 {
        font-size: 30px;
        line-height: 37px;
        font-weight: 500;
    }

    .visual-showcase-header>p:not(.visual-showcase-eyebrow) {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
        line-height: 22px;
    }

    .visual-showcase-copy {
        margin-top: 12px;
        padding-top: 8px;
    }

    .visual-showcase-copy p {
        font-size: 13px;
        line-height: 20px;
    }

    .visual-showcase-update {
        margin: 18px 0 16px;
        font-size: 14px;
        line-height: 19px;
    }

    .visual-showcase-content {
        margin-top: 20px;
    }

    .visual-showcase-grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        margin-right: -16px;
        margin-left: -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .visual-showcase-grid::-webkit-scrollbar {
        display: none;
    }

    .visual-gallery-card {
        flex: 0 0 min(84vw, 340px);
        height: 250px;
        border-radius: 10px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .visual-gallery-dots {
        display: flex;
    }

    .visual-walkthrough-card {
        height: 320px;
        border-radius: 10px;
    }

    .visual-play-icon {
        width: 82px;
        height: 82px;
        border-width: 6px;
    }

    .visual-play-icon svg {
        width: 34px;
        height: 34px;
    }

    .visual-showcase-cta {
        margin-top: 22px;
        padding: 0;
    }

    .visual-showcase-cta h3 {
        font-size: 24px;
        line-height: 31px;
    }

    .visual-showcase-cta p {
        font-size: 14px;
        line-height: 21px;
    }

    .visual-showcase-cta a {
        min-width: 210px;
        min-height: 48px;
    }

    .visual-showcase-cta small {
        font-size: 13px;
        line-height: 20px;
    }

    .visual-showcase-disclaimer {
        margin-top: 22px;
        padding: 16px 14px;
    }

    .visual-showcase-disclaimer p {
        font-size: 12px;
        line-height: 18px;
    }

    .premium-specs-header {
        max-width: 560px;
    }

    .premium-specs-header h2 {
        font-size: 30px;
        line-height: 37px;
    }

    .premium-specs-header>p:not(.premium-specs-eyebrow) {
        max-width: 360px;
        margin-top: 6px;
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
        line-height: 22px;
    }

    .premium-specs-dots {
        margin-top: 12px;
    }

    .premium-specs-brands {
        margin-top: 18px;
        padding: 16px 18px 14px;
        border-radius: 12px;
    }

    .premium-specs-brands p {
        font-size: 10px;
        letter-spacing: 0.22em;
    }

    .premium-specs-brand-list {
        display: flex;
        grid-template-columns: none;
        gap: 4px;
        margin: 0 -4px;
        padding: 0 4px 2px;
        overflow-x: auto;
        scroll-snap-type: none;
        scrollbar-width: none;
    }

    .premium-specs-brand-list.is-marquee {
        cursor: default;
    }

    .premium-specs-brand-list::-webkit-scrollbar {
        display: none;
    }

    .premium-specs-brand {
        flex: 0 0 min(68vw, 210px);
        min-height: 46px;
        padding: 0 10px;
        border: 0 !important;
        border-radius: 0 !important;
        background: #000000 !important;
        color: rgba(255, 255, 255, 0.46) !important;
        box-shadow: none !important;
        transform: none !important;
        font-size: 12px;
        transition: none !important;
    }

    .premium-specs-brand-logo {
        width: 72px;
        height: 28px;
        flex-basis: 72px;
        padding: 5px 7px;
        border-radius: 9px;
    }

    .premium-specs-brand-logo--kajaria,
    .premium-specs-brand-logo--asian-paints {
        width: 78px;
        flex-basis: 78px;
    }

    .premium-specs-brand:hover,
    .premium-specs-brand.is-active {
        border: 0 !important;
        background: #000000 !important;
        color: rgba(255, 255, 255, 0.46) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .premium-specs-brand-dots {
        display: none !important;
    }

    .premium-specs-notice {
        width: min(100%, 520px);
        margin-top: 16px;
        padding: 16px 18px;
        border-radius: 12px;
    }

    .premium-specs-notice p {
        font-size: 12px;
        line-height: 18px;
    }

    .transparent-pricing-top {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .transparent-pricing-header {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        text-align: center;
    }

    .transparent-pricing-header h2 {
        font-size: 25px;
    }

    .transparent-pricing-header>p:not(.transparent-pricing-eyebrow) {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        font-size: 13px;
        line-height: 18px;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-header {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        text-align: center;
    }

    .transparent-pricing-tabs {
        width: 100%;
        min-width: 0;
        max-width: 398px;
        height: auto;
        min-height: 46px;
        margin: 0 auto;
        padding: 4px;
        border-radius: 18px;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-tabs {
        width: 100%;
        min-width: 0;
        max-width: 398px;
        margin: 0 auto;
    }

    .transparent-pricing-tabs button {
        min-width: 0;
        height: 38px;
        border-radius: 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .pricing-card {
        border-radius: 22px;
    }

    .pricing-left,
    .pricing-right {
        padding: 14px;
    }

    .pricing-right {
        gap: 12px;
    }

    .pricing-image-wrap img {
        height: 170px;
    }

    .pricing-image-badge {
        left: 12px;
        bottom: 12px;
        min-height: 26px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 9px;
    }

    .floor-price-panel {
        margin-top: 10px;
        padding: 10px;
        border-radius: 16px;
    }

    .floor-price-panel>p {
        margin-bottom: 8px;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .floor-price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .floor-price-grid button {
        min-height: 54px;
        padding: 0 7px;
        border-radius: 14px;
    }

    .floor-price-grid span {
        font-size: 10px;
        line-height: 13px;
    }

    .floor-price-grid strong {
        margin-top: 3px;
        font-size: 14px;
        line-height: 18px;
    }

    .pricing-title-block h3 {
        font-size: 20px;
        line-height: 25px;
        letter-spacing: 0.01em;
    }

    .pricing-title-block p {
        margin-top: 4px;
        font-size: 16px;
        line-height: 16px;
    }

    .pricing-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .pricing-spec {
        grid-template-columns: 21px minmax(0, 1fr);
        column-gap: 8px;
        min-height: 68px;
        padding: 10px 8px;
        border-radius: 16px;
    }

    .pricing-spec img,
    .pricing-spec svg {
        width: 21px;
        height: 21px;
    }

    .pricing-spec span {
        font-size: 9px;
        line-height: 11px;
    }

    .pricing-spec strong {
        margin-top: 3px;
        font-size: 12px;
        line-height: 15px;
    }

    .selected-price-box {
        min-height: 104px;
        padding: 16px 12px 14px;
        border-radius: 16px;
    }

    .selected-price-box>span {
        font-size: 9px;
        line-height: 12px;
        letter-spacing: 0.14em;
    }

    .selected-price-box strong {
        margin-top: 6px;
        font-size: 30px;
        line-height: 36px;
    }

    .selected-price-box p {
        margin-top: 4px;
        font-size: 10px;
        line-height: 14px;
    }

    .pricing-unlock-area {
        gap: 7px;
    }

    .pricing-unlock-note {
        min-height: 24px;
        padding: 5px 8px;
        font-size: 9px;
        line-height: 1.3;
    }

    .pricing-unlock-btn {
        min-height: 44px;
        height: auto;
        margin-top: 0;
        padding: 9px 10px;
        border-radius: 16px;
        font-size: 12px;
    }

    .transparent-pricing-eyebrow,
    .transparent-pricing-header h2,
    .transparent-pricing-header>p:not(.transparent-pricing-eyebrow),
    .transparent-pricing-tabs,
    .pricing-card {
        transform: translateY(22px);
    }

    .differentiation-banner {
        min-height: 660px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 20px;
    }

    .differentiation-copy,
    .differentiation-copy h2,
    .differentiation-copy p,
    .differentiation-cards,
    .differentiation-card {
        width: 100%;
        max-width: 100%;
    }

    .differentiation-copy h2 {
        font-size: 35px;
        line-height: 42px;
    }

    .differentiation-copy p {
        font-size: 16px;
        line-height: 24px;
    }

    .differentiation-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        height: auto;
        gap: 10px;
        margin-top: 0;
    }

    .differentiation-card {
        min-height: 112px;
    }
}

@media (max-width: 575px) {

    .hero-section {
        --hero-story-width: min(421px, calc(100vw - 16px));
        height: var(--hero-section-height) !important;
        min-height: min(620px, var(--hero-section-height)) !important;
        padding: 8px 0 10px;
    }

    .hero-section::before {
        content: none;
    }

    .hero-story-progress {
        top: 16px;
        width: calc(var(--hero-story-width) - 24px);
    }

    #heroSlider {
        max-height: 604px;
        border-radius: 21px;
    }

    .hero-content {
        top: auto;
        bottom: 94px;
        width: calc(100% - 24px);
        max-height: calc(100% - 126px);
        padding: 17px 16px 15px;
        border-radius: 20px;
        transform: translateX(-50%) translateY(18px);
    }

    .hero-location {
        flex-wrap: wrap;
        height: auto;
        row-gap: 2px;
        font-size: 11px;
        line-height: 15px;
    }

    .hero-copy :is(h1, h2.hero-heading) {
        max-width: 282px;
        margin-top: 9px;
        font-size: 39px;
        line-height: 0.96;
    }

    .hero-copy p {
        margin-top: 8px;
        font-size: 14px;
        line-height: 19px;
    }

    .hero-tags {
        margin-top: 14px;
        gap: 6px;
    }

    .hero-tags span {
        height: auto;
        min-height: 30px;
        padding: 7px 10px;
        font-size: 12px;
        line-height: 14px;
        white-space: nowrap;
    }

    .hero-actions {
        flex-direction: column;
        height: auto;
        margin-top: 0;
        gap: 7px;
        bottom: -75px;
    }

    .hero-whatsapp-btn {
        width: 100%;
        max-width: none;
        padding: 8px 14px;
    }

    .hero-whatsapp-btn {
        height: 49px;
    }

    .project-plans-section {
        padding: 28px 14px 34px;
    }

    .project-plans-header {
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
    }

    .project-plans-copy h2 {
        font-size: 23px;
        line-height: 28px;
    }

    .project-plans-copy>p:not(.project-plans-eyebrow) {
        max-width: 100%;
        margin-top: 6px;
        font-size: 11px;
        line-height: 16px;
    }

    .project-plan-tabs {
        min-height: 42px;
        margin-top: 0;
        border-radius: 16px;
    }

    .project-plan-tabs button {
        height: 34px;
        min-width: 0;
        padding: 0 3px;
        border-radius: 12px;
        font-size: 8px;
    }

    .project-plan-tabs svg {
        width: 9px;
        height: 9px;
        flex-basis: 9px;
    }

    .project-plan-tabs .project-plan-cube-icon {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }

    .project-plan-card {
        border-radius: 22px;
    }

    .project-plan-variant-bar {
        gap: 6px;
        padding: 8px;
    }

    .project-plan-variants {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
    }

    .project-plan-variants button {
        height: 31px;
        padding: 0 4px;
        font-size: 9px;
    }

    .project-plan-meta {
        font-size: 10px;
        line-height: 14px;
    }

    .project-plan-visual,
    .project-plan-visual.is-site {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 178px;
        height: 204px;
        padding: 34px 8px 40px;
    }

    .project-plan-image,
    .project-plan-visual.is-site .project-plan-image {
        flex: 1 1 auto;
        align-self: center;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .project-plan-badges {
        top: 8px;
        left: 8px;
        gap: 6px;
    }

    .project-plan-badge-label,
    .project-plan-badge-accent {
        min-height: 24px;
    }

    .project-plan-badge-label {
        padding: 6px 11px;
        font-size: 9px;
    }

    .project-plan-badge-accent {
        gap: 5px;
        padding: 6px 11px;
        font-size: 10px;
    }

    .project-plan-badge-accent svg {
        width: 11px;
        height: 11px;
    }

    .project-plan-tools {
        right: 8px;
        bottom: 8px;
    }

    .project-plan-tools a {
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
    }

    .project-plan-tools svg {
        width: 18px;
        height: 18px;
    }

    .project-plan-footer {
        padding: 12px 10px;
    }

    .project-plan-footer h3 {
        font-size: 17px;
        line-height: 22px;
    }

    .project-plan-cta {
        min-height: 40px;
        height: auto;
        font-size: 10px;
        line-height: 1.2;
    }

    .transparent-pricing-section {
        padding: 28px 14px 34px;
    }

    .premium-specs-section {
        padding: 26px 14px 30px;
    }

    .visual-showcase-section {
        padding: 30px 14px 32px;
    }

    .prime-location-section {
        padding: 28px 14px 28px;
    }

    .lifestyle-amenities-section {
        padding: 44px 14px 36px;
    }

    .construction-progress-section {
        padding: 44px 14px;
    }

    .interested-property-section {
        padding: 42px 14px;
    }

    .buyer-testimonials-section {
        padding: 42px 14px 28px;
    }

    .sticky-availability-section {
        min-height: calc(480px + var(--sticky-availability-height));
    }

    .buyer-appreciation-section {
        padding: 42px 14px;
    }

    .buyer-appreciation-title {
        font-size: 27px !important;
        line-height: 34px !important;
    }

    .faq-header h2 {
        font-size: 25px !important;
        line-height: 31px !important;
    }

    .faq-tabs {
        grid-template-columns: none !important;
    }

    .faq-item button {
        min-height: 50px;
        padding: 0 9px 0 13px;
        font-size: 14px;
        line-height: 17px;
        gap: 10px;
    }

    .faq-item button span {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .faq-answer {
        margin: -2px 13px 12px;
        padding-left: 0;
        border-left: 0;
    }

    .faq-answer p {
        font-size: 12px;
        line-height: 19px;
    }

    .faq-item button span::before,
    .faq-item button span::after {
        width: 10px !important;
        height: 2px !important;
        background: #f0cd45 !important;
    }

    .faq-item:hover button span,
    .faq-item:focus-within button span {
        border: 0 !important;
        background: transparent !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .project-essentials-card {
        width: 100% !important;
        padding: 0;
        border-radius: 18px;
    }

    .project-essentials-wrap {
        width: calc(100% - 28px) !important;
    }

    .project-essentials-head h2 {
        font-size: 27px;
        line-height: 33px;
    }

    .project-essentials-visual {
        min-height: 255px;
    }

    .project-essentials-card h2 {
        margin-top: 18px !important;
        font-size: 25px !important;
        line-height: 31px !important;
    }

    .project-essentials-panel>p:not(.project-essentials-eyebrow) {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .project-essentials-btn {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        min-height: 62px;
        gap: 12px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .project-essentials-btn::before {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

    .project-essentials-btn svg {
        width: 19px;
        height: 19px;
    }

    .project-essentials-btn b {
        font-size: 13px;
        line-height: 17px;
    }

    .project-essentials-btn em {
        font-size: 11px;
        line-height: 15px;
    }

    .project-essentials-btn strong {
        font-size: 11px;
    }

    .project-essentials-panel {
        padding: 28px 16px 24px;
    }

    .site-visit-section {
        padding: 30px 14px;
    }

    .site-visit-card h2 {
        font-size: 27px !important;
        line-height: 34px !important;
    }

    .site-visit-card-inner {
        padding: 0;
    }

    .site-visit-map {
        min-height: 320px;
    }

    .site-visit-location {
        left: 50%;
        top: 52%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    .site-visit-pin {
        left: 50%;
        top: 42%;
    }

    .site-visit-form input {
        height: 40px;
        font-size: 13px;
    }

    .site-visit-submit,
    .site-visit-whatsapp {
        height: 44px;
        font-size: 14px;
    }

    .site-visit-whatsapp svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }

    .site-visit-phone {
        gap: 10px;
        font-size: 15px;
        line-height: 22px;
        letter-spacing: 0.02em;
    }

    .property-snapshot-section {
        padding: 48px 14px;
    }

    .property-snapshot-header h2 {
        font-size: 27px !important;
        line-height: 34px !important;
    }

    .property-snapshot-card {
        padding: 18px;
    }

    .property-snapshot-brand {
        display: block !important;
        margin-bottom: 16px !important;
        padding-bottom: 18px !important;
        text-align: center !important;
    }

    .property-snapshot-kicker {
        justify-content: center !important;
        gap: 9px !important;
        font-size: 8px !important;
        letter-spacing: 0.12em !important;
    }

    .property-snapshot-kicker span {
        width: 22px !important;
        flex-basis: 22px !important;
    }

    .property-snapshot-brand h3 {
        margin-top: 18px !important;
        font-size: 49px !important;
        line-height: 0.86 !important;
    }

    .property-snapshot-subtitle {
        margin-top: 18px !important;
        font-size: 15px !important;
        letter-spacing: 0.14em !important;
    }

    .property-snapshot-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    .property-snapshot-metrics>div {
        min-height: 92px !important;
        padding: 12px 8px 19px !important;
        border: 1px solid rgba(213, 174, 102, 0.22) !important;
        border-radius: 12px !important;
    }

    .property-snapshot-meta div {
        flex-direction: column;
        gap: 6px;
    }

    .property-snapshot-meta dd {
        text-align: left;
    }

    .property-snapshot-content h3 {
        font-size: 22px;
        line-height: 30px;
    }

    .property-snapshot-content p {
        font-size: 14px;
        line-height: 24px;
    }

    .sticky-availability-content {
        width: calc(100% - 28px) !important;
    }

    .sticky-availability-content h2 {
        font-size: 27px !important;
        line-height: 35px !important;
    }

    .buyer-testimonials-header h2 {
        font-size: 27px !important;
        line-height: 34px !important;
    }

    .buyer-testimonial-card {
        width: 268px;
        flex-basis: 268px;
    }

    .buyer-appreciation-section .buyer-testimonials-slider {
        margin-top: 20px !important;
    }

    .buyer-appreciation-section .buyer-testimonial-card {
        width: 100% !important;
        min-height: 218px;
        flex-basis: 100% !important;
    }

    .buyer-testimonials-progress {
        max-width: 292px;
    }

    .interested-property-mosaic {
        height: 470px !important;
    }

    .interested-property-copy a {
        min-width: 0 !important;
        flex: 1 1 140px;
    }

    .construction-progress-title {
        font-size: 27px !important;
        line-height: 34px !important;
    }

    .construction-progress-photo {
        min-height: 280px;
    }

    .construction-phase-trigger {
        font-size: 14px;
    }

    .construction-phase-trigger svg {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .lifestyle-amenities-title {
        font-size: 27px !important;
        line-height: 34px !important;
    }

    .lifestyle-amenities-tabs {
        margin-top: 24px !important;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card img {
        min-height: 230px;
    }

    .prime-location-inner {
        width: 100%;
    }

    .prime-location-header h2 {
        font-size: 27px;
        line-height: 34px;
    }

    .prime-location-header>p:not(.prime-location-eyebrow) {
        font-size: 14px;
        line-height: 21px;
    }

    .prime-location-map {
        height: 380px;
        margin-top: 34px;
    }

    .prime-map-live-action {
        top: 12px;
        right: 12px;
    }

    .prime-map-live-action a {
        height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }

    .prime-map-tools {
        bottom: 12px;
        right: 12px;
    }

    .prime-distance-block h3 {
        width: min(100%, 250px);
        margin-left: auto;
        margin-right: auto;
        font-size: 25px;
        line-height: 31px;
    }

    .prime-distance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 24px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .prime-distance-grid::-webkit-scrollbar {
        display: none;
    }

    .prime-distance-card {
        width: 100% !important;
        min-height: 146px;
        flex: none !important;
        padding: 12px 10px 19px;
        overflow: visible !important;
        border-radius: 14px;
        scroll-snap-align: unset;
        scroll-snap-stop: normal;
    }

    .prime-distance-card::after {
        left: 12px !important;
        bottom: 12px !important;
        width: 36px !important;
        max-width: calc(100% - 24px) !important;
    }

    .prime-distance-progress {
        display: none !important;
    }

    .prime-distance-card div {
        display: block;
    }

    .prime-distance-card svg {
        width: 19px;
        height: 19px;
        margin-bottom: 9px;
    }

    .prime-distance-card span {
        display: block;
        min-height: 28px;
        font-size: 11px;
        line-height: 14px;
        overflow-wrap: anywhere;
    }

    .prime-distance-card strong {
        margin: 6px 0 0;
        font-size: 9.5px;
        line-height: 13px;
        overflow-wrap: anywhere;
    }

    .prime-distance-card strong em {
        margin-bottom: 5px;
        font-size: 11px;
        line-height: 14px;
    }

    .prime-whatsapp-location-cta {
        height: auto;
        min-height: 0;
        margin-top: 20px;
        border-radius: 0;
        padding: 0;
    }

    .prime-whatsapp-location-btn {
        min-width: 0;
        width: min(100%, 278px);
        height: 44px;
        font-size: 15px;
        line-height: 19px;
    }

    .prime-whatsapp-location-cta small {
        max-width: 278px;
        margin-top: 12px;
        font-size: 15px;
        line-height: 20px;
    }

    .prime-growth-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 38px;
    }

    .prime-growth-grid article {
        min-height: 0;
        padding: 22px 18px;
    }

    .prime-growth-grid h4 {
        margin-top: 16px;
        font-size: 20px;
        line-height: 26px;
    }

    .visual-showcase-header h2 {
        font-size: 27px;
        line-height: 34px;
        font-weight: 500;
    }

    .visual-showcase-header>p:not(.visual-showcase-eyebrow) {
        font-size: 14px;
        line-height: 21px;
    }

    .visual-showcase-tabs button span {
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
    }

    .visual-gallery-card {
        flex-basis: min(82vw, 276px);
        height: 220px;
    }

    .visual-walkthrough-card {
        height: 260px;
    }

    .visual-showcase-cta h3 {
        font-size: 22px;
        line-height: 29px;
    }

    .visual-showcase-cta a {
        width: 100%;
        min-width: 0;
    }

    .premium-specs-header h2 {
        font-size: 27px;
        line-height: 34px;
    }

    .premium-specs-header>p:not(.premium-specs-eyebrow) {
        font-size: 14px;
        line-height: 21px;
    }

    .premium-specs-brand-list {
        margin-right: -10px;
        margin-left: -10px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .premium-specs-brand {
        flex-basis: min(76vw, 232px);
    }

    .premium-specs-notice {
        padding: 16px 14px;
    }

    .transparent-pricing-top {
        gap: 10px;
        margin-bottom: 12px;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-top {
        gap: 10px;
        margin-bottom: 12px;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-header {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .transparent-pricing-section.is-pricing-unlocked .transparent-pricing-tabs {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .transparent-pricing-header h2 {
        font-size: 23px;
        line-height: 28px;
    }

    .transparent-pricing-header>p:not(.transparent-pricing-eyebrow) {
        margin-top: 6px;
        font-size: 11px;
        line-height: 16px;
    }

    .transparent-pricing-tabs {
        min-height: 42px;
        border-radius: 16px;
    }

    .transparent-pricing-tabs button {
        height: 34px;
        border-radius: 12px;
        font-size: 10px;
        padding: 0 4px;
    }

    .pricing-left,
    .pricing-right {
        padding: 10px;
    }

    .pricing-right {
        gap: 9px;
    }

    .pricing-image-wrap img {
        height: 132px;
    }

    .pricing-image-badge {
        left: 8px;
        bottom: 8px;
        min-height: 24px;
        padding: 5px 9px;
        font-size: 8px;
    }

    .floor-price-panel {
        margin-top: 8px;
        padding: 8px;
    }

    .floor-price-panel>p {
        margin-bottom: 7px;
        font-size: 8.5px;
        line-height: 12px;
    }

    .floor-price-grid {
        gap: 5px;
    }

    .floor-price-grid button {
        min-height: 48px;
        padding: 0 5px;
        border-radius: 12px;
    }

    .floor-price-grid span {
        font-size: 9px;
        line-height: 12px;
    }

    .floor-price-grid strong {
        font-size: 12px;
        line-height: 16px;
    }

    .pricing-title-block h3 {
        font-size: 17px;
        line-height: 22px;
    }

    .pricing-title-block p {
        font-size: 16px;
        line-height: 14px;
    }

    .pricing-spec-grid {
        gap: 6px;
    }

    .pricing-spec {
        grid-template-columns: 19px minmax(0, 1fr);
        column-gap: 7px;
        min-height: 62px;
        padding: 9px 7px;
        border-radius: 14px;
    }

    .pricing-spec img,
    .pricing-spec svg {
        width: 19px;
        height: 19px;
    }

    .pricing-spec span {
        font-size: 8px;
        line-height: 10px;
    }

    .pricing-spec strong {
        margin-top: 2px;
        font-size: 10.5px;
        line-height: 13px;
    }

    .selected-price-box {
        min-height: 88px;
        padding: 12px 10px 11px;
    }

    .selected-price-box strong {
        font-size: 25px;
        line-height: 30px;
    }

    .pricing-unlock-area {
        gap: 6px;
    }

    .pricing-unlock-note {
        min-height: 22px;
        padding: 5px 7px;
        font-size: 8.5px;
        line-height: 1.28;
    }

    .pricing-unlock-btn {
        min-height: 40px;
        height: auto;
        margin-top: 0;
        padding: 8px 10px;
        font-size: 10px;
        line-height: 1.2;
    }

    .differentiation-banner {
        min-height: 720px;
        padding: 42px 16px;
    }

    .differentiation-copy h2 {
        font-size: 27px;
        line-height: 33px;
    }

    .differentiation-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .differentiation-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        min-height: 116px;
        padding: 13px 12px 13px 13px;
    }

    .differentiation-card div {
        padding-right: 18px;
    }

    .differentiation-card small,
    .differentiation-card strong {
        width: auto;
    }

    .differentiation-card small {
        font-size: 8.5px;
        line-height: 12px;
        letter-spacing: 0.12em;
    }

    .differentiation-card strong {
        margin-top: 5px;
        font-size: 13px;
        line-height: 17px;
    }

    .differentiation-card div::after {
        font-size: 11px;
    }

}

@media (max-width: 767px) {
    #heroSlider {
        position: relative;
        display: block !important;
        transform: none !important;
    }

    .hero-slide {
        position: absolute !important;
        inset: 0;
        display: block;
        width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.55s ease;
    }

    .hero-slide.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    .hero-slide-bg,
    .hero-slide>img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center top;
        background-position: center top !important;
        background-size: cover !important;
    }

    .hero-content {
        top: auto;
        left: 50%;
        bottom: 20px;
        z-index: 5;
        width: calc(100% - 34px);
        max-width: none;
        max-height: calc(100% - 86px);
        height: auto;
        padding: 14px 12px 12px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 18px;
        background:
            radial-gradient(80% 100% at 50% 0%, rgba(213, 174, 102, 0.10), rgba(213, 174, 102, 0) 62%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.04));
        box-shadow:
            0 26px 70px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(2px);
        overflow: hidden;
        transform: translateX(-50%);
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        animation: heroContentInMobileBottom 1.1s ease 0.35s forwards;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-copy,
    .hero-copy :is(h1, h2.hero-heading),
    .hero-location,
    .hero-tags {
        width: 100%;
    }

    .hero-slide--figma .hero-location,
    .hero-slide--figma .hero-tags {
        display: none;
    }

    .hero-slide:not(.hero-slide--figma) .hero-location,
    .hero-slide:not(.hero-slide--figma) .hero-copy p,
    .hero-slide:not(.hero-slide--figma) .hero-tags {
        display: none;
    }

    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading) {
        margin-top: 0;
    }

    .hero-slide--figma .hero-copy p {
        width: min(520px, 100%);
        margin-top: 16px;
    }

    .hero-location,
    .hero-slide--figma .hero-location {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 18px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        text-align: center;
        text-transform: none;
    }

    .hero-location-divider {
        display: block;
        width: 1px;
        height: 14px;
        background: rgba(255, 255, 255, 0.55);
    }

    .hero-copy :is(h1, h2.hero-heading) {
        max-width: none;
        margin: 0;
        font-family: "Jost", "Inter", Arial, sans-serif;
        color: #ffffff;
        font-size: clamp(22px, 7.2vw, 29px);
        font-weight: 650;
        line-height: 1.05;
        letter-spacing: 0.02em;
        text-align: center;
    }

    .hero-copy :is(h1, h2.hero-heading) span {
        color: inherit;
    }

    .hero-copy p {
        width: min(580px, 100%);
        margin: 12px auto 0;
        color: rgba(255, 255, 255, 0.90);
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
    }

    .hero-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-content: stretch;
        gap: 7px;
        height: auto;
        margin-top: 12px;
    }

    .hero-tags span {
        width: 100%;
        height: 28px;
        min-height: 0;
        padding: 6px 8px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        font-size: 9px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
        backdrop-filter: blur(10px);
    }

    .hero-actions {
        position: static;
        left: auto;
        bottom: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 494px;
        height: auto;
        margin: 12px auto 0;
        transform: none;
    }

    .hero-whatsapp-btn {
        width: min(50%, 241px);
        max-width: 241px;
        height: 38px;
        padding: 7px 9px;
        border-radius: 10px;
        color: #ffffff;
        font-weight: 500;
    }

    .hero-whatsapp-btn {
        background: #D5AE66;
        color: #ffffff;
        box-shadow:
            0 0 15px rgba(213, 174, 102, 0.2),
            0 12px 28px rgba(213, 174, 102, 0.18);
        font-size: 12px;
        line-height: 14px;
    }

    .hero-whatsapp-icon,
    .hero-whatsapp-btn span {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-content {
        top: clamp(34px, 5.2vh, 58px);
        left: clamp(34px, 6vw, 64px);
        bottom: auto;
        width: min(720px, calc(100% - 68px));
        max-width: calc(100% - 68px);
        max-height: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        transform: translate3d(var(--hero-content-x), calc(var(--hero-content-y) + 22px), 0);
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        animation: none;
        opacity: 1;
        transform: translate3d(var(--hero-content-x), var(--hero-content-y), 0);
    }

    .hero-copy,
    .hero-copy :is(h1, h2.hero-heading),
    .hero-copy p {
        text-align: left;
    }

    .hero-copy :is(h1, h2.hero-heading) {
        width: min(720px, 100%);
        margin: 20px 0 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(38px, 6.5vw, 58px);
        font-weight: 700;
        line-height: 0.98;
        letter-spacing: 0;
    }

    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading) {
        margin-top: 0;
        font-size: clamp(46px, 8vw, 72px);
        line-height: 0.94;
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        width: min(560px, 100%);
        margin: clamp(14px, 2.5vh, 28px) 0 0;
        font-size: clamp(15px, 1.9vw, 18px);
        font-weight: 500;
        line-height: 1.45;
        text-align: left;
    }

    .hero-location {
        justify-content: flex-start;
        height: auto;
        font-size: 11px;
        font-weight: 800;
        line-height: 17px;
        letter-spacing: 0.2em;
        text-align: left;
        text-transform: uppercase;
    }

    .hero-slide--figma .hero-location,
    .hero-slide--figma .hero-tags {
        display: flex;
    }

    .hero-tags {
        justify-content: flex-start;
        margin-top: 14px;
    }

    .hero-actions {
        justify-content: flex-start;
        width: min(494px, 100%);
        margin: clamp(18px, 3vh, 34px) 0 0;
    }
}

@media (max-width: 767px) {
    .hero-section {
        --hero-content-x: 0px;
        --hero-content-y: 0px;
        --hero-bg-x: 0px;
        --hero-bg-y: 0px;
    }

    .hero-section.is-visible .hero-slide.is-active .hero-slide-bg {
        animation: none;
        transform: scale(1.08);
    }

    .hero-content {
        top: auto;
        left: 50%;
        bottom: 20px;
        width: calc(100% - 34px);
        max-height: calc(100% - 86px);
        padding: 14px 12px 12px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 18px;
        background:
            radial-gradient(80% 100% at 50% 0%, rgba(213, 174, 102, 0.10), rgba(213, 174, 102, 0) 62%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.04));
        box-shadow:
            0 26px 70px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(2px);
        transform: translateX(-50%);
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        opacity: 0;
        transform: translateX(-50%) translateY(18px);
        animation: heroContentInMobileBottom 1.1s ease 0.35s forwards;
    }

    .hero-copy,
    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading),
    .hero-copy p {
        text-align: center;
    }

    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading) {
        max-width: none;
        margin: 0;
        font-family: "Jost", "Inter", Arial, sans-serif;
        color: #ffffff;
        font-size: clamp(22px, 7.2vw, 29px);
        font-weight: 650;
        line-height: 1.05;
        letter-spacing: 0.02em;
    }

    .hero-copy :is(h1, h2.hero-heading) span {
        color: inherit;
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        width: min(580px, 100%);
        margin: 12px auto 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
    }

    .hero-tags {
        justify-content: stretch;
    }
}

@media (max-width: 575px) {
    .hero-content {
        bottom: 18px;
        width: calc(100% - 32px);
        max-height: calc(100% - 82px);
        padding: 13px 11px 11px;
    }

    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading) {
        font-size: clamp(21px, 7.8vw, 27px);
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        font-size: 12px;
        line-height: 17px;
    }
}

/* Tablet-only price CTA spacing; desktop/default lives in style.css. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-price-details-btn {
        max-width: none;
        min-height: 52px;
        padding-inline: 65px;
    }

    .hero-slide:first-child .hero-price-details-btn {
        padding-inline: 35px;
    }
}

@media (max-width: 991px) {
    .hero-content::before {
        content: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hero-section.is-visible .hero-slide.is-active .hero-content {
        animation: none;
        opacity: 1;
        transform: translate3d(var(--hero-content-x), calc(-50% + var(--hero-content-y)), 0);
    }
}

@media (max-width: 575px) {
    .hero-content {
        width: calc(100% - 32px);
        bottom: 18px;
        max-height: calc(100% - 82px);
        padding: 13px 11px 11px;
    }

    .hero-copy :is(h1, h2.hero-heading) {
        font-size: clamp(21px, 7.8vw, 27px);
    }

    .hero-copy p {
        font-size: 12px;
        line-height: 17px;
    }

    .hero-tags {
        gap: 6px;
    }

    .hero-tags span {
        height: 27px;
        min-height: 0;
        font-size: 8px;
        line-height: 11px;
    }

    .hero-actions {
        flex-direction: row;
        margin-top: 10px;
    }

    .hero-whatsapp-btn {
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-section {
        --hero-story-width: 100%;
        display: block;
        height: var(--hero-section-height) !important;
        min-height: min(560px, var(--hero-section-height)) !important;
        padding: 0;
        background: transparent;
        overflow: hidden !important;
    }

    .hero-story-progress,
    .hero-story-tap {
        display: none;
    }

    #heroSlider {
        position: relative;
        display: block !important;
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        overflow: hidden;
        background: transparent;
        box-shadow: none;
        flex: 0 1 auto;
    }

    .hero-slide {
        position: absolute !important;
        inset: 0;
        display: block;
        min-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        flex: none !important;
        border-radius: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.6s ease;
    }

    .hero-slide.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    .hero-slide-bg {
        width: 100%;
        height: 100%;
        background-position: center !important;
        background-size: cover !important;
    }

    .hero-content {
        top: 50%;
        left: 50%;
        bottom: auto;
        width: min(664px, calc(100% - 48px));
        max-width: none;
        max-height: none;
        padding: 28px 30px 30px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 18px;
        background:
            radial-gradient(80% 100% at 50% 0%, rgba(213, 174, 102, 0.10), rgba(213, 174, 102, 0) 62%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.04));
        box-shadow:
            0 26px 70px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(2px);
        transform: translate(-50%, -50%);
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        animation: heroContentIn 1.4s ease 0.55s forwards;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-copy :is(h1, h2.hero-heading) {
        max-width: none;
        margin: 28px 0 0;
        font-family: "Jost", "Inter", Arial, sans-serif;
        font-size: clamp(36px, 5.4vw, 54px);
        font-weight: 650;
        line-height: 1.08;
        letter-spacing: 0.02em;
        text-align: center;
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        width: min(580px, 100%);
        margin: 20px auto 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 28px;
        text-align: center;
    }

    .hero-location {
        justify-content: center;
        height: 18px;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        text-align: center;
        text-transform: none;
    }

    .hero-location-divider {
        display: block;
    }

    .hero-slide--figma .hero-location,
    .hero-slide--figma .hero-tags {
        display: none;
    }

    .hero-tags {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
    }

    .hero-tags span {
        width: auto;
        height: 30.5px;
        min-height: 0;
        padding: 7px 10px;
        font-size: 11px;
        font-weight: 500;
        line-height: 16.5px;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .hero-actions {
        position: static;
        flex-direction: row;
        width: 494px;
        max-width: 100%;
        height: 52px;
        margin: clamp(22px, 4vh, 48px) auto 0;
        transform: none;
    }

    .hero-whatsapp-btn {
        width: 241px;
        max-width: 241px;
        height: 52px;
        padding: 14px 22px;
        border-radius: 12px;
    }

    .hero-whatsapp-btn {
        font-size: 16px;
        line-height: 24px;
    }

    .hero-whatsapp-icon,
    .hero-whatsapp-btn span {
        display: block;
    }
}

@media (max-width: 767px) {
    .hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        max-width: 100%;
    }

    .hero-whatsapp-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 38px;
        padding: 6px 8px;
        border-radius: 10px;
        gap: 5px;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
    }

    .hero-whatsapp-icon {
        width: 15px;
        height: 15px;
    }

    .hero-whatsapp-btn span {
        font-size: 14px;
        line-height: 14px;
    }
}

@media (max-width: 575px) {
    .hero-whatsapp-btn {
        height: 36px;
        padding: 6px 6px;
        font-size: 10px;
    }
}

@media (max-width: 767px) {
    .hero-section {
        --hero-section-height: 100dvh !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    #heroSlider {
        height: 100% !important;
        max-height: none !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        --hero-story-width: min(421px, calc(100vw - 24px));
        --hero-section-height: 100dvh !important;
        display: flex;
        justify-content: center;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 14px 0 12px;
        background: #000000;
        overflow: visible !important;
    }

    .hero-content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background:
            radial-gradient(86% 120% at 16% 0%, rgba(213, 174, 102, 0.14), rgba(213, 174, 102, 0) 62%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.46));
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(10px);
        pointer-events: none;
    }

    .hero-section::before,
    .hero-section::after {
        content: none;
        display: none;
    }

    .hero-story-progress {
        position: absolute;
        top: 22px;
        left: 50%;
        z-index: 7;
        display: flex;
        gap: 6px;
        width: calc(var(--hero-story-width) - 28px);
        height: 3px;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .hero-story-tap {
        position: absolute;
        top: 14px;
        bottom: 12px;
        z-index: 4;
        display: block;
        width: calc(var(--hero-story-width) / 2);
        border: 0;
        padding: 0;
        background: transparent;
    }

    .hero-story-tap--prev {
        left: calc(50% - (var(--hero-story-width) / 2));
    }

    .hero-story-tap--next {
        right: calc(50% - (var(--hero-story-width) / 2));
    }

    #heroSlider {
        width: var(--hero-story-width);
        height: 100% !important;
        max-height: 616px !important;
        flex: 0 0 var(--hero-story-width);
        border-radius: 22px;
        overflow: hidden;
        background: #111111;
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.44),
            0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .hero-slide {
        min-width: var(--hero-story-width) !important;
        width: var(--hero-story-width) !important;
        flex: 0 0 var(--hero-story-width) !important;
        border-radius: inherit;
    }

    .hero-slide-bg,
    .hero-slide>img {
        background-position: center top !important;
        background-size: cover !important;
        object-position: center top;
    }

    .hero-content {
        top: auto;
        left: 50%;
        bottom: 120px;
        z-index: 5;
        width: calc(100% - 30px);
        max-width: none;
        max-height: calc(100% - 142px);
        height: auto;
        padding: 16px 16px 14px;
        border: 0;
        border-radius: 18px;
        overflow: visible;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        transform: translateX(-50%) translateY(18px);
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        opacity: 0;
        transform: translateX(-50%) translateY(18px);
        animation: heroContentInMobileBottom 1.2s ease 0.45s forwards;
    }

    .hero-copy,
    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading),
    .hero-copy p,
    .hero-slide--figma .hero-copy p,
    .hero-location,
    .hero-tags {
        width: 100%;
        text-align: left;
    }

    .hero-slide--figma .hero-location,
    .hero-slide--figma .hero-tags,
    .hero-slide:not(.hero-slide--figma) .hero-location,
    .hero-slide:not(.hero-slide--figma) .hero-tags {
        display: flex !important;
    }

    .hero-slide:not(.hero-slide--figma) .hero-copy p {
        display: block !important;
    }

    .hero-location,
    .hero-slide--figma .hero-location {
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        height: auto;
        color: rgba(213, 174, 102, 0.86);
        font-family: "Inter", Arial, sans-serif;
        font-size: 9.6px;
        font-weight: 800;
        line-height: 14px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-shadow: 0 6px 16px rgba(0, 0, 0, 0.40);
    }

    .hero-location-divider {
        display: block;
        width: 1px;
        height: 13px;
        background: rgba(255, 255, 255, 0.40);
    }

    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading) {
        max-width: 300px;
        margin: 8px 0 0;
        font-family: "Jost", "Inter", Arial, sans-serif;
        color: rgba(255, 255, 255, 0.98);
        font-size: clamp(30px, 8.5vw, 36px);
        font-weight: 800;
        line-height: 1.03;
        letter-spacing: 0;
        text-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
    }

    .hero-copy :is(h1, h2.hero-heading) span {
        color: #D5AE66;
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        width: 100%;
        margin: 6px 0 0;
        color: rgba(255, 255, 255, 0.90);
        font-size: 13px;
        font-weight: 600;
        line-height: 18px;
        text-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);
    }

    .hero-tags {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        height: auto;
        margin-top: 10px;
    }

    .hero-tags span {
        width: auto;
        height: auto;
        min-height: 25px;
        padding: 5px 8px;
        border-color: rgba(213, 174, 102, 0.24);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        font-family: "Inter", Arial, sans-serif;
        font-size: 10px;
        font-weight: 800;
        line-height: 13px;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        backdrop-filter: blur(10px);
    }

    .hero-actions {
        position: absolute;
        left: 50%;
        bottom: -110px;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        transform: translateX(-50%);
    }

    .hero-slide--figma .hero-tags span:nth-child(3),
    .hero-slide--figma .hero-tags span:nth-child(5),
    .hero-slide:not(.hero-slide--figma) .hero-location .hero-location-divider,
    .hero-slide:not(.hero-slide--figma) .hero-location span:nth-child(3),
    .hero-slide:not(.hero-slide--figma) .hero-tags span:nth-child(n+3),
    .hero-slide:not(.hero-slide--figma) .hero-copy p {
        display: none !important;
    }

    .hero-slide:not(.hero-slide--figma) .hero-copy :is(h1, h2.hero-heading) {
        max-width: 292px;
        font-size: clamp(26px, 7.5vw, 32px);
        line-height: 1.04;
    }

    .hero-slide:not(.hero-slide--figma) .hero-content {
        padding-top: 15px;
        padding-bottom: 13px;
    }
}

@media (max-width: 575px) {
    .hero-section {
        --hero-story-width: min(421px, calc(100vw - 16px));
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero-story-progress {
        top: 18px;
        width: calc(var(--hero-story-width) - 24px);
    }

    .hero-content {
        bottom: 118px;
        width: calc(100% - 28px);
        max-height: calc(100% - 130px);
        padding: 15px 14px 13px;
        border-radius: 18px;
    }

    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading) {
        max-width: 288px;
        font-size: clamp(28px, 8.7vw, 34px);
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        font-size: 12.5px;
        line-height: 17px;
    }

    .hero-tags {
        gap: 6px;
        margin-top: 9px;
    }

    .hero-tags span {
        min-height: 25px;
        padding: 5px 8px;
        font-size: 9.5px;
    }

    .hero-whatsapp-btn {
        height: 46px;
        font-size: 14px;
    }

    .hero-slide:not(.hero-slide--figma) .hero-copy :is(h1, h2.hero-heading) {
        max-width: 282px;
        font-size: clamp(25px, 7.4vw, 31px);
    }
}

@media (max-width: 575px) {
    .ideal-floor-section {
        padding: 30px 14px 34px;
    }

    .ideal-floor-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    .ideal-floor-heading h2 {
        max-width: 280px;
        font-size: 23px;
        line-height: 28px;
    }

    .ideal-floor-heading>p:not(.ideal-floor-eyebrow) {
        max-width: 280px;
        margin-top: 6px;
        font-size: 11px;
        line-height: 16px;
    }

    .ideal-floor-size-tabs {
        min-height: 42px;
        gap: 4px;
        padding: 4px;
        border-radius: 16px;
    }

    .ideal-floor-size-tabs button {
        height: 34px;
        padding: 0 5px;
        border-radius: 12px;
        font-size: 10px;
    }

    .ideal-floor-card {
        border-radius: 22px;
    }

    .ideal-floor-media,
    .ideal-floor-media img {
        min-height: 156px;
    }

    .ideal-floor-media {
        border-radius: 20px 20px 0 0;
    }

    .ideal-floor-badges {
        top: 9px;
        left: 9px;
        gap: 6px;
        max-width: calc(100% - 18px);
    }

    .ideal-floor-badges span,
    .ideal-floor-badges strong {
        min-height: 26px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 9px;
        letter-spacing: 0.04em;
    }

    .ideal-floor-badges svg {
        width: 12px;
        height: 12px;
    }

    .ideal-floor-panel {
        gap: 10px;
        padding: 14px 12px 14px;
    }

    .ideal-floor-panel h3 {
        font-size: 18px;
        line-height: 23px;
    }

    .ideal-floor-panel>div:first-child p {
        margin-top: 3px;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0.03em;
    }

    .ideal-floor-selector {
        gap: 7px;
    }

    .ideal-floor-selector>span {
        font-size: 10px;
        line-height: 13px;
        letter-spacing: 0.09em;
    }

    .ideal-floor-levels {
        height: 46px;
        padding: 4px;
        border-radius: 16px;
    }

    .ideal-floor-levels button {
        gap: 1px;
        border-radius: 12px;
        font-size: 10px;
    }

    .ideal-floor-levels button svg,
    .ideal-floor-levels button img {
        width: 12px;
        height: 12px;
    }

    .ideal-floor-levels button .ideal-floor-home-icon {
        width: 18px;
        height: 18px;
    }

    .ideal-floor-specs {
        gap: 7px;
    }

    .ideal-floor-spec {
        grid-template-columns: 21px minmax(0, 1fr);
        column-gap: 8px;
        min-height: 68px;
        padding: 10px 8px;
        border-radius: 16px;
    }

    .ideal-floor-spec img {
        width: 21px;
        height: 21px;
    }

    .ideal-floor-spec span {
        font-size: 9px;
        line-height: 11px;
    }

    .ideal-floor-spec strong {
        margin-top: 3px;
        font-size: 13px;
        line-height: 16px;
    }

    .ideal-floor-price-btn {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        height: 44px;
        gap: 8px;
        border-radius: 16px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .prime-distance-block h3 {
        width: min(100%, 250px);
        margin-left: auto;
        margin-right: auto;
        font-size: 25px;
        line-height: 31px;
    }

    .prime-distance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 24px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .prime-distance-grid::-webkit-scrollbar {
        display: none;
    }

    .prime-distance-card {
        width: 100% !important;
        min-height: 146px;
        flex: none !important;
        padding: 12px 10px 19px;
        overflow: visible !important;
        border-radius: 14px;
        scroll-snap-align: unset;
        scroll-snap-stop: normal;
    }

    .prime-distance-card.is-active {
        border-color: rgba(240, 205, 69, 0.62);
        background:
            linear-gradient(135deg, rgba(240, 205, 69, 0.16), rgba(255, 255, 255, 0.035)),
            #202020;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 18px 42px rgba(0, 0, 0, 0.32);
    }

    .prime-distance-card div {
        display: block;
    }

    .prime-distance-card svg {
        width: 19px;
        height: 19px;
        margin-bottom: 9px;
    }

    .prime-distance-card span {
        display: block;
        min-height: 28px;
        font-size: 11px;
        line-height: 14px;
        overflow-wrap: anywhere;
    }

    .prime-distance-card strong {
        margin: 6px 0 0;
        font-size: 9.5px;
        line-height: 13px;
        overflow-wrap: anywhere;
    }

    .prime-distance-card strong em {
        margin-bottom: 5px;
        font-size: 11px;
        line-height: 14px;
    }

    .prime-distance-progress {
        display: none !important;
    }

    .prime-whatsapp-location-cta--map {
        display: flex;
        width: calc(100% - 28px);
        height: auto;
        min-height: 0;
        max-height: none;
        margin: 14px auto 0;
        padding: 0;
        border-radius: 0;
        opacity: 1;
        transform: translateY(0);
        transition:
            max-height 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            min-height 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            height 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            margin 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            padding 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            border-width 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.78s ease,
            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .prime-whatsapp-location-cta--after-distance {
        height: 0;
        min-height: 0;
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(22px) scale(0.985);
        transition:
            max-height 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            min-height 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            height 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            margin 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            padding 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            border-width 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.78s ease,
            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .prime-location-section.is-distance-cta-shifted .prime-whatsapp-location-cta--map {
        height: 0;
        min-height: 0;
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-22px) scale(0.985);
    }

    .prime-location-section.is-distance-cta-shifted .prime-whatsapp-location-cta--after-distance {
        height: auto;
        min-height: 0;
        max-height: none;
        margin-top: 20px;
        padding: 0;
        border-width: 0;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .prime-whatsapp-location-cta--map .prime-whatsapp-location-btn {
        display: inline-flex !important;
        width: min(100%, 292px) !important;
        max-width: 292px !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        gap: 8px !important;
        border: 1px solid rgba(37, 211, 102, 0.48) !important;
        border-radius: 999px !important;
        background:
            radial-gradient(90% 150% at 0% 0%, rgba(37, 211, 102, 0.26), transparent 64%),
            rgba(37, 211, 102, 0.14) !important;
        color: #eafff0 !important;
        box-shadow: 0 14px 32px rgba(37, 211, 102, 0.12) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .prime-whatsapp-location-cta--map small {
        display: block !important;
        max-width: 292px;
        margin-top: 15px;
        font-size: 11px;
        line-height: 12px;
        text-align: center;
    }

    .prime-whatsapp-location-cta--after-distance small {
        display: block !important;
        max-width: 292px;
        margin-top: 15px;
        font-size: 11px;
        line-height: 12px;
        text-align: center;
    }

    .prime-whatsapp-location-cta--after-distance .prime-whatsapp-location-btn {
        display: inline-flex !important;
        width: min(100%, 292px) !important;
        max-width: 292px !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        gap: 8px !important;
        border: 1px solid rgba(37, 211, 102, 0.48) !important;
        border-radius: 999px !important;
        background:
            radial-gradient(90% 150% at 0% 0%, rgba(37, 211, 102, 0.26), transparent 64%),
            rgba(37, 211, 102, 0.14) !important;
        color: #eafff0 !important;
        box-shadow: 0 14px 32px rgba(37, 211, 102, 0.12) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .prime-whatsapp-location-btn svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        color: #25d366 !important;
    }

    .prime-area-map-link {
        display: inline !important;
        margin-top: 0 !important;
        color: #f0cd45 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .prime-location-mobile-break {
        display: inline-block !important;
        margin-top: 4px !important;
    }

    .prime-location-mobile-break::before {
        content: "\A";
        white-space: pre;
    }
}

@media (max-width: 767px) {
    .lifestyle-amenities-section {
        padding: 28px 0 30px !important;
    }

    .lifestyle-amenities-section>div {
        width: 100% !important;
        max-width: 100% !important;
    }

    .lifestyle-amenities-section>div>.mx-auto.text-center {
        width: calc(100% - 32px);
    }

    .lifestyle-amenities-title {
        margin-top: 10px !important;
        font-size: 25px !important;
        line-height: 30px !important;
    }

    .lifestyle-amenities-tab-progress {
        display: block;
    }

    .lifestyle-amenities-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        margin: 18px -16px 0 !important;
        padding: 0 16px 4px;
        overflow-x: auto !important;
        overflow-y: hidden;
        border: 0 !important;
        scroll-padding-inline: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .lifestyle-amenities-grid::-webkit-scrollbar {
        display: none;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card:nth-child(2n),
    .lifestyle-amenity-card:nth-child(3n) {
        width: auto;
        min-height: 190px;
        height: 190px;
        flex: 0 0 min(78vw, 246px);
        overflow: hidden;
        border: 1px solid rgba(240, 205, 69, 0.42);
        border-radius: 16px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .lifestyle-amenity-card.is-active {
        border-color: rgba(240, 205, 69, 0.62);
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.34),
            0 0 0 1px rgba(240, 205, 69, 0.08);
    }

    .lifestyle-amenity-card.is-hidden {
        display: none !important;
    }

    .lifestyle-amenity-card img {
        min-height: 190px;
        height: 190px;
    }

    .lifestyle-amenity-caption {
        left: 16px;
        bottom: 16px;
        gap: 4px;
    }

    .lifestyle-amenity-caption svg {
        width: 25px;
        height: 25px;
    }

    .lifestyle-amenity-caption span {
        font-size: 14px;
        line-height: 18px;
    }

    .lifestyle-amenities-progress {
        display: block;
        margin-top: 10px;
    }

    .lifestyle-amenities-cta {
        width: calc(100% - 32px);
        min-height: 0 !important;
        margin: 14px auto 0 !important;
        gap: 12px;
        padding: 16px !important;
        border-radius: 16px;
    }

    .lifestyle-amenities-cta h3 {
        margin-top: 4px !important;
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .lifestyle-amenities-cta h3 span {
        font-size: 23px !important;
        line-height: 28px !important;
    }

    .lifestyle-amenities-cta a {
        width: 100%;
        height: 42px;
    }
}

@media (max-width: 1199px) {
    .construction-progress-layout {
        grid-template-columns: 1fr !important;
    }

    .construction-progress-photo {
        height: auto;
        min-height: 360px;
    }

    .construction-progress-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        height: auto;
        min-height: 0;
    }

    .construction-proof-row {
        grid-template-columns: 1fr;
    }

    .construction-info-card {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .construction-progress-layout {
        gap: 16px !important;
        margin-top: 28px !important;
    }

    .construction-progress-photo {
        height: 300px;
        min-height: 300px;
        border-radius: 18px !important;
    }

    .construction-status-ring {
        width: 220px;
        height: 220px;
    }

    .construction-status-ring-track,
    .construction-status-ring-fill {
        stroke-width: 10;
    }

    .construction-status-center strong {
        font-size: 48px;
    }

    .construction-status-center strong em {
        font-size: 34px;
    }

    .construction-status-center small {
        margin-top: 7px;
        font-size: 10px;
        letter-spacing: 0.18em;
        line-height: 13px;
    }

    .construction-status-center b {
        min-height: 25px;
        margin-top: 11px;
        padding: 0 11px;
        font-size: 10px;
        white-space: nowrap;
    }

    .construction-photo-status {
        right: 14px;
        bottom: 14px;
        left: 14px;
        gap: 8px;
    }

    .construction-photo-status span {
        min-height: 31px;
        padding: 0 11px;
        font-size: 12px;
    }

    .construction-progress-side {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 12px;
        height: auto;
        min-height: 0;
    }

    .construction-proof-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 12px;
    }

    .construction-proof-card {
        min-height: 0;
        border-radius: 18px;
        padding: 20px 16px 18px;
    }

    .construction-proof-card p {
        top: 21px;
        right: 16px;
        font-size: 9px;
        letter-spacing: 0.12em;
    }

    .construction-proof-card strong {
        margin-top: 20px;
        font-size: 27px;
        line-height: 32px;
    }

    .construction-proof-card small {
        font-size: 12px;
        line-height: 17px;
    }

    .construction-stage-track {
        margin-top: 18px;
    }

    .construction-buyer-proof {
        margin-top: 18px;
    }

    .construction-buyer-proof em {
        font-size: 10px;
        line-height: 14px;
    }

    .construction-info-card {
        min-height: 164px;
        border-radius: 18px;
        padding: 20px 16px;
    }

    .construction-info-card p {
        font-size: 9px;
        letter-spacing: 0.12em;
        line-height: 13px;
    }

    .construction-info-card--possession strong {
        gap: 6px;
        margin-top: 12px;
        font-size: 34px;
        line-height: 36px;
    }

    .construction-info-card--possession strong span {
        font-size: 19px;
        line-height: 23px;
    }

    .construction-info-card small {
        max-width: 230px;
        margin-top: 11px;
        font-size: 12px;
        line-height: 17px;
    }

    .construction-info-card--possession em {
        margin-top: 9px;
        font-size: 12px;
        line-height: 13px;
    }

    .construction-info-card--banks {
        min-height: 250px;
        padding: 18px 14px;
    }

    .construction-bank-subtitle {
        margin-top: 6px !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    .construction-bank-grid {
        margin-top: 14px;
        gap: 7px;
    }

    .construction-bank-tile {
        min-height: 48px;
        border-radius: 10px;
    }

    .construction-bank-tile b {
        font-size: 10px;
        line-height: 12px;
    }

    .construction-bank-tile em {
        font-size: 8px;
        line-height: 10px;
    }

}

@media (max-width: 767px) {
    .hero-section {
        --hero-story-width: 100vw;
        --hero-section-height: 100dvh !important;
        display: block !important;
        height: var(--hero-section-height) !important;
        min-height: var(--hero-section-height) !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000000;
    }

    @supports not (height: 100dvh) {
        .hero-section {
            --hero-section-height: 100vh !important;
        }
    }

    #heroSlider {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 100% !important;
        flex: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .hero-slide {
        inset: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        flex: none !important;
        border-radius: 0 !important;
    }

    .hero-slide-bg,
    .hero-slide>img {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        background-position: center center !important;
        background-size: cover !important;
        object-fit: cover;
        object-position: center center;
    }

    .hero-story-progress {
        top: 14px !important;
        width: calc(100% - 28px) !important;
    }

    .hero-story-tap {
        top: 0 !important;
        bottom: 0 !important;
        width: 50% !important;
    }

    .hero-story-tap--prev {
        left: 0 !important;
    }

    .hero-story-tap--next {
        right: 0 !important;
    }
}

@media (max-width: 767px) {
    .lifestyle-amenities-section {
        overflow: hidden !important;
    }

    .lifestyle-amenities-section>div,
    .lifestyle-amenities-section>div>.mx-auto.text-center {
        width: calc(100% - 28px) !important;
        max-width: 420px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .lifestyle-amenities-tabs {
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto 0 !important;
        padding: 0 0 2px !important;
        scroll-padding-inline: 0;
    }

    .lifestyle-amenities-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto 0 !important;
        padding: 0 0 4px !important;
        scroll-padding-inline: 0;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card:nth-child(2n),
    .lifestyle-amenity-card:nth-child(3n) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        min-height: 260px !important;
        scroll-snap-align: center;
    }

    .lifestyle-amenity-card:nth-child(1),
    .lifestyle-amenity-card:nth-child(6) {
        height: 260px !important;
        min-height: 260px !important;
    }

    .lifestyle-amenity-card img {
        height: 100% !important;
        min-height: 100% !important;
    }

    .lifestyle-amenities-tab-progress,
    .lifestyle-amenities-progress,
    .lifestyle-amenities-cta {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (max-width: 1199px) {
    .sticky-availability-content--interested {
        width: calc(100% - 40px) !important;
        max-width: 760px !important;
        align-content: center;
        justify-items: center;
        gap: 28px !important;
        padding: 34px 0;
        text-align: center;
    }

    .sticky-availability-content--interested .interested-property-copy {
        display: flex;
        max-width: 620px !important;
        flex-direction: column;
        align-items: center;
        padding: 28px 0;
    }

    .sticky-availability-content--interested .interested-property-copy::before {
        inset: -22px -26px;
        border-radius: 20px;
    }

    .sticky-availability-content--interested .interested-property-copy h2 {
        font-size: 42px !important;
        line-height: 52px !important;
    }


    .sticky-availability-content--interested .interested-property-copy>div {
        justify-content: center;
    }

}

@media (max-width: 767px) {
    .sticky-availability-content--interested {
        width: calc(100% - 28px) !important;
        min-height: 100% !important;
        gap: 10px !important;
        padding: 40px 0 34px !important;
        justify-content: center !important;
    }

    .sticky-availability-content--interested .interested-property-copy {
        margin-top: 0;
        max-width: 262px !important;
        padding: 0 0 8px !important;
        transform: translateY(-12px) !important;
    }

    .sticky-availability-content--interested .interested-property-copy::before {
        inset: -10px -14px -2px !important;
        border-radius: 18px !important;
    }

    .sticky-availability-content--interested .interested-property-copy h2 {
        font-size: 27px !important;
        line-height: 33px !important;
    }

    .sticky-availability-content--interested .interested-property-copy p {
        margin-top: 10px !important;
        max-width: 290px !important;
        font-size: 12px !important;
        line-height: 15px !important;
    }

    .sticky-availability-content--interested .interested-property-copy>div {
        margin-top: 14px !important;
        width: 100%;
        max-width: 258px !important;
        flex-direction: column;
        gap: 8px !important;
    }

    .sticky-availability-content--interested .interested-property-copy a {
        width: 100%;
        min-width: 0 !important;
        height: 40px !important;
        flex: none !important;
        font-size: 16px !important;
    }

    .sticky-availability-content--interested h2::after {
        margin-top: 16px !important;
    }

}

@media (max-width: 767px) {
    body {
        font-size: 17px;
        line-height: 1.78;
    }
.project-plan-meta,
    .site-visit-submit,
    .site-visit-whatsapp {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    .hero-copy p,
    .about-text-block>p,
    .about-more p,
    .differentiation-copy p,
    .ideal-floor-heading>p:not(.ideal-floor-eyebrow),
    .project-plans-copy>p:not(.project-plans-eyebrow),
    .transparent-pricing-header>p:not(.transparent-pricing-eyebrow),
    .buyer-testimonials-header p:not(.buyer-testimonials-eyebrow),
    .sticky-availability-content>p,
    .buyer-appreciation-card p,
    .project-essentials-head>p:not(.project-essentials-head-eyebrow),
    .project-essentials-panel>p:not(.project-essentials-eyebrow),
    .site-visit-card p,
    .property-snapshot-content p {
        font-size: 16px !important;
        line-height: 1.72 !important;
    }

    .hero-location,
    .hero-slide--figma .hero-location,
    .sticky-availability-label {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .hero-copy :is(h1, h2.hero-heading) {
        font-size: 46px;
        line-height: 0.98;
    }

    .hero-copy p {
        margin-top: 10px;
    }

    .hero-tags span {
        font-size: 13px;
        line-height: 16px;
    }

    .about-content h2,
    .ideal-floor-heading h2,
    .project-plans-copy h2,
    .transparent-pricing-header h2 {
        font-size: 30px !important;
        line-height: 1.24 !important;
    }

    .differentiation-copy h2,
    .project-essentials-head h2,
    .site-visit-card h2,
    .property-snapshot-header h2,
    .buyer-testimonials-header h2,
    .buyer-appreciation-title,
    .sticky-availability-content h2,
    .sticky-availability-content--interested .interested-property-copy h2,
    .interested-property-copy h2 {
        font-size: 32px !important;
        line-height: 1.24 !important;
    }

    .project-plan-tabs button,
    .project-plan-variants button,
    .ideal-floor-levels button,
    .ideal-floor-size-tabs button {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .property-snapshot-content h3 {
        font-size: 28px !important;
        line-height: 1.28 !important;
    }

    .property-snapshot-modal-section p,
    .property-snapshot-modal-section ul,
    .site-visit-phone {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .differentiation-card h3,
    .ideal-floor-panel h3,
    .project-plan-footer h3,
    .visual-showcase-cta h3,
    .property-snapshot-modal-header h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .about-feature p,
    .differentiation-card p,
    .ideal-floor-panel>div:first-child p,
    .project-plan-footer p,
    .property-snapshot-meta dd,
    .property-snapshot-modal-section h4 {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .project-essentials-btn em {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .project-plan-variants span,
    .project-essentials-btn b {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

}

@media (max-width: 767px) {
    .hero-content {
        top: auto !important;
        right: 15px !important;
        left: 15px !important;
        bottom: 118px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(18px) !important;
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        transform: translateY(0) !important;
    }
}

@media (max-width: 767px) {
.hero-copy,
    .hero-location,
    .hero-slide--figma .hero-location,
    .hero-tags,
    .about-content,
    .about-text-block,
    .construction-progress-header,
    .construction-progress-copy,
    .project-essentials-head,
    .project-essentials-panel,
    .site-visit-card,
    .property-snapshot-content {
        text-align: center !important;
    }

    .hero-location,
    .hero-slide--figma .hero-location,
    .hero-tags,
    .hero-actions,
    .about-feature-grid,
    .project-essentials-actions,
    .property-snapshot-brand {
        justify-content: center !important;
    }

    .hero-location,
    .hero-slide--figma .hero-location,
    .hero-tags,
    .hero-actions,
    .project-essentials-actions,
    .property-snapshot-brand {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-location,
    .hero-slide--figma .hero-location {
        flex-wrap: wrap;
    }

    .hero-tags,
    .hero-actions,
    .about-feature-grid {
        flex-wrap: wrap;
    }

    .hero-actions {
        align-items: center !important;
    }

    .about-content {
        align-items: center !important;
    }

    .about-feature-grid {
        justify-items: center !important;
    }

    .lifestyle-amenities-cta {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 18px 20px !important;
        text-align: center !important;
    }

    .construction-progress-layout,
    .site-visit-inner,
    .property-snapshot-layout {
        grid-template-columns: 1fr !important;
    }

    .construction-progress-side,
    .site-visit-card-inner,
    .property-snapshot-content,
    .property-snapshot-card {
        align-items: center !important;
    }

    .construction-progress-side {
        display: grid;
        gap: 16px;
    }

    .construction-info-card,
    .construction-proof-card,
    .site-visit-phone,
    .site-visit-whatsapp,
    .property-snapshot-readmore {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .property-snapshot-metrics {
        text-align: center !important;
    }

    .property-snapshot-meta div {
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .prime-map-lightbox {
        padding: 8px !important;
    }

    .prime-map-lightbox-panel {
        width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .prime-map-lightbox-head {
        min-height: 40px !important;
        gap: 8px !important;
        padding-right: 48px !important;
    }

    .prime-map-lightbox-title {
        min-height: 30px !important;
        padding: 7px 10px !important;
        font-size: 10px !important;
        letter-spacing: 0.06em !important;
    }

    .prime-map-lightbox-actions {
        gap: 6px !important;
    }

    .prime-map-lightbox-actions a {
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
    }

    .prime-map-lightbox-actions svg {
        width: 17px !important;
        height: 17px !important;
    }

    .prime-map-lightbox-close {
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .prime-map-lightbox-close svg {
        width: 18px !important;
        height: 18px !important;
    }

    .prime-map-lightbox-image {
        max-height: calc(100dvh - 82px) !important;
        border-radius: 10px !important;
    }

    .lifestyle-amenities-grid {
        margin-top: 26px !important;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card:nth-child(2n),
    .lifestyle-amenity-card:nth-child(3n) {
        height: 320px !important;
        min-height: 320px !important;
        flex-basis: 100% !important;
    }

    .lifestyle-amenity-card img {
        height: 100% !important;
        min-height: 320px !important;
    }

    .lifestyle-amenity-card:hover,
    .lifestyle-amenity-card:focus-visible {
        transform: none !important;
    }

    .visual-showcase-grid {
        gap: 14px !important;
    }

    .visual-gallery-card {
        flex: 0 0 min(92vw, 360px) !important;
        height: 290px !important;
    }

    .visual-walkthrough-card {
        height: 340px !important;
    }

}

@media (max-width: 360px) {

    .lifestyle-amenities-section>div,
    .lifestyle-amenities-section>div>.mx-auto.text-center {
        width: calc(100% - 20px) !important;
    }

    .lifestyle-amenities-grid {
        margin-top: 20px !important;
        padding-bottom: 2px !important;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card:nth-child(2n),
    .lifestyle-amenity-card:nth-child(3n) {
        height: 264px !important;
        min-height: 264px !important;
    }

    .lifestyle-amenity-card img {
        min-height: 264px !important;
    }

    .lifestyle-amenity-caption {
        left: 14px !important;
        bottom: 14px !important;
    }

    .lifestyle-amenity-caption span {
        font-size: 13px !important;
        line-height: 17px !important;
    }
}

@media (max-width: 767px) {
    .lifestyle-amenities-section>div {
        width: calc(100% - 20px) !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        padding: 14px 12px 12px !important;
    }

    .lifestyle-amenities-section>div>.mx-auto.text-center,
    .lifestyle-amenities-tabs,
    .lifestyle-amenities-tab-progress,
    .lifestyle-amenities-grid,
    .lifestyle-amenities-progress,
    .lifestyle-amenities-cta {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .lifestyle-amenities-tabs {
        margin-top: 12px !important;
        padding: 0 0 2px !important;
    }

    .lifestyle-amenities-tab-progress {
        margin-top: 8px !important;
    }

    .lifestyle-amenities-grid {
        margin-top: 14px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card:nth-child(2n),
    .lifestyle-amenity-card:nth-child(3n) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        min-height: 260px !important;
        border-radius: 18px !important;
    }

    .lifestyle-amenity-card img {
        min-height: 260px !important;
    }

    .lifestyle-amenity-card:hover,
    .lifestyle-amenity-card:focus-visible {
        transform: none !important;
    }

    .lifestyle-amenities-progress {
        margin-top: 8px !important;
    }

    .lifestyle-amenities-cta {
        margin-top: 14px !important;
        padding: 16px 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }
}

@media (max-width: 360px) {
    .lifestyle-amenities-section>div {
        width: calc(100% - 16px) !important;
        padding: 16px 10px 12px !important;
        border-radius: 18px !important;
    }

    .lifestyle-amenity-card,
    .lifestyle-amenity-card:nth-child(2n),
    .lifestyle-amenity-card:nth-child(3n) {
        height: 272px !important;
        min-height: 272px !important;
    }

    .lifestyle-amenity-card img {
        min-height: 272px !important;
    }
}

@media (max-width: 1199px) {
:is(.about-content h2,
        .ideal-floor-heading h2,
        .project-plans-copy h2,
        .transparent-pricing-header h2,
        .premium-specs-header h2,
        .visual-showcase-header h2,
        .prime-location-header h2,
        .lifestyle-amenities-title,
        .construction-progress-title,
        .buyer-testimonials-header h2,
        .buyer-appreciation-title,
        .project-essentials-head h2,
        .site-visit-card h2,
        .site-visit-section h2,
        .property-snapshot-header h2) {
        font-size: clamp(34px, 5vw, 42px) !important;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
        line-height: 1.6;
    }

    .hero-location,
    .hero-slide--figma .hero-location {
        font-size: 11.5px !important;
        line-height: 1.32 !important;
        letter-spacing: 0.12em !important;
    }

    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading),
    .hero-slide:not(.hero-slide--figma) .hero-copy :is(h1, h2.hero-heading) {
        font-size: clamp(31px, 8.7vw, 38px) !important;
        line-height: 1.08 !important;
        text-wrap: balance;
    }

    .hero-copy p,
    .hero-slide--figma .hero-copy p {
        font-size: 14.5px !important;
        line-height: 1.48 !important;
    }

    .hero-tags span {
        min-height: 28px !important;
        padding: 6px 10px !important;
        font-size: 10.5px !important;
        letter-spacing: 0.08em !important;
    }

    .hero-whatsapp-btn {
        min-height: 44px !important;
        height: auto !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
    }

    :is(.about-content h2,
        .ideal-floor-heading h2,
        .project-plans-copy h2,
        .transparent-pricing-header h2,
        .premium-specs-header h2,
        .visual-showcase-header h2,
        .prime-location-header h2,
        .lifestyle-amenities-title,
        .construction-progress-title,
        .buyer-testimonials-header h2,
        .buyer-appreciation-title,
        .project-essentials-head h2,
        .project-essentials-card h2,
        .site-visit-card h2,
        .site-visit-section h2,
        .property-snapshot-header h2,
        .footer-redesign-cta h2) {
        font-size: clamp(29px, 8.1vw, 34px) !important;
        line-height: 1.18 !important;
    }

    :is(.differentiation-copy h2,
        .interested-property-copy h2,
        .sticky-availability-content--interested .interested-property-copy h2,
        .property-snapshot-content h3,
        .prime-distance-block h3,
        .pricing-title-block h3,
        .project-plan-footer h3,
        .premium-specs-slide-overlay h3,
        .visual-showcase-cta h3) {
        font-size: clamp(26px, 7.2vw, 32px) !important;
        line-height: 1.2 !important;
        text-wrap: balance;
    }

    :is(.about-text-block > p,
        .about-more p,
        .ideal-floor-heading > p:not(.ideal-floor-eyebrow),
        .project-plans-copy > p:not(.project-plans-eyebrow),
        .project-plan-footer p,
        .transparent-pricing-header > p:not(.transparent-pricing-eyebrow),
        .premium-specs-header > p:not(.premium-specs-eyebrow),
        .premium-specs-slide-overlay p,
        .premium-specs-notice p,
        .visual-showcase-header > p:not(.visual-showcase-eyebrow),
        .visual-showcase-copy p,
        .visual-showcase-cta p,
        .visual-showcase-cta small,
        .visual-showcase-disclaimer p,
        .prime-location-header > p:not(.prime-location-eyebrow),
        .prime-growth-grid p,
        .construction-progress-copy,
        .construction-progress-meter p,
        .buyer-testimonials-header p:not(.buyer-testimonials-eyebrow),
        .buyer-testimonial-card p,
        .buyer-appreciation-card p,
        .project-essentials-head > p:not(.project-essentials-head-eyebrow),
        .project-essentials-panel > p:not(.project-essentials-eyebrow),
        .site-visit-card > p,
        .property-snapshot-content p,
        .footer-redesign-cta span,
        .footer-redesign-brand > p) {
        font-size: 15px !important;
        line-height: 1.30 !important;
    }

    :is(.pricing-unlock-kicker,
        .footer-redesign-cta p) {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.09em !important;
    }

    :is(.ideal-floor-spec span,
        .project-plan-variants span,
        .project-plan-meta,
        .project-plan-badge-label,
        .project-plan-badge-accent-text,
        .pricing-spec span,
        .selected-price-box > span,
        .selected-price-box p,
        .pricing-unlock-note,
        .premium-specs-brands p,
        .premium-specs-brand,
        .visual-gallery-info-copy span,
        .prime-distance-card strong,
        .prime-whatsapp-location-cta small,
        .construction-status-center small,
        .construction-info-card p,
        .construction-bank-subtitle,
        .construction-bank-tile b,
        .construction-bank-tile em,
        .construction-proof-card p,
        .construction-stage-labels,
        .construction-buyer-proof span,
        .property-snapshot-brand p,
        .property-snapshot-metrics span,
        .property-snapshot-meta dt,
        .footer-redesign-brand span,
        .footer-redesign-column strong) {
        font-size: 11.5px !important;
        line-height: 1.38 !important;
    }

    :is(.ideal-floor-spec strong,
        .pricing-spec strong,
        .visual-gallery-info-copy strong,
        .prime-distance-card span,
        .prime-distance-card strong em,
        .lifestyle-amenity-caption span,
        .construction-phase-panel div,
        .construction-phase-panel strong,
        .construction-info-card small,
        .construction-proof-card small,
        .property-snapshot-meta dd,
        .footer-redesign-column a,
        .footer-redesign-column address,
        .footer-redesign-column p) {
        font-size: 14px !important;
        line-height: 1.42 !important;
    }

    :is(.ideal-floor-size-tabs button,
        .ideal-floor-levels button,
        .ideal-floor-price-btn,
        .project-plan-tabs button,
        .project-plan-variants button,
        .project-plan-cta,
        .transparent-pricing-tabs button,
        .pricing-unlock-btn,
        .pricing-unlock-submit,
        .premium-specs-slide-overlay button,
        .visual-showcase-tabs button,
        .visual-showcase-cta a,
        .prime-map-live-action a,
        .prime-whatsapp-location-btn,
        .lifestyle-amenities-tabs button,
        .construction-phase-trigger,
        .project-essentials-btn,
        .site-visit-submit,
        .site-visit-whatsapp,
        .footer-redesign-actions a,
        .property-snapshot-modal-btn) {
        min-height: 42px !important;
        height: auto !important;
        font-size: 14.5px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .project-plan-variants button {
        min-height: 22px !important;
    }

    .pricing-unlock-form label>span,
    .pricing-unlock-form input,
    .site-visit-form input {
        font-size: 14px !important;
    }

}

@media (max-width: 991px) {
    .prime-location-section.is-distance-revealed .prime-distance-block {
        max-height: 760px;
        margin-top: 24px;
    }
}

@media (max-width: 767px) {
    .amenity-image-lightbox {
        padding: 10px !important;
        place-items: center !important;
    }

    .amenity-image-lightbox-panel {
        width: fit-content !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .amenity-image-lightbox-title {
        max-width: calc(100% - 52px) !important;
        min-height: 30px !important;
        padding: 7px 12px !important;
        color: #f0cd45 !important;
        font-size: 11px !important;
    }

    .amenity-image-lightbox-close {
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .amenity-image-lightbox-image {
        width: auto !important;
        height: auto !important;
        max-width: calc(100vw - 44px) !important;
        max-height: calc(100dvh - 92px) !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 12px !important;
        background: #101010 !important;
    }

    .prime-location-section.is-distance-revealed .prime-distance-block {
        max-height: none !important;
        margin-top: 20px;
        overflow: visible !important;
    }

    .prime-distance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .prime-distance-card {
        min-height: 146px !important;
        padding: 12px 10px 19px !important;
        overflow: visible !important;
    }

    .prime-distance-card span {
        min-height: 28px !important;
        font-size: 11px !important;
        line-height: 14px !important;
    }

    .prime-distance-card strong {
        margin-top: 6px !important;
        font-size: 9.5px !important;
        line-height: 13px !important;
    }

    .prime-distance-card strong em {
        margin-bottom: 5px !important;
        font-size: 11px !important;
        line-height: 14px !important;
    }

    .prime-distance-progress {
        display: none !important;
    }

    .prime-location-section.is-distance-cta-shifted .prime-whatsapp-location-cta--after-distance {
        max-height: none !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }
}

/* Construction mobile fit: keep status cards equal and bank tiles readable. */
@media (max-width: 767px) {

    .construction-progress-side,
    .construction-proof-row {
        width: 100% !important;
        max-width: 100% !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    .construction-progress-side>.construction-info-card,
    .construction-progress-side>.construction-proof-card,
    .construction-proof-row>.construction-info-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .construction-info-card--banks {
        padding: 18px 12px 16px !important;
    }

    .construction-bank-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .construction-bank-tile {
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 7px 4px !important;
        gap: 4px !important;
        border-radius: 9px !important;
        box-sizing: border-box !important;
    }

    .construction-bank-tile b {
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .construction-bank-tile em {
        max-width: 100% !important;
        gap: 2px !important;
        font-size: 6.8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .construction-bank-tile em i {
        width: 8px !important;
        height: 8px !important;
        flex-basis: 8px !important;
    }

    .construction-bank-tile em i::after {
        left: 2.5px !important;
        top: 2.5px !important;
        width: 4px !important;
        height: 2.5px !important;
    }

    .construction-stage-labels {
        justify-items: center !important;
        gap: 4px !important;
        font-size: 9px !important;
        line-height: 12px !important;
        letter-spacing: 0.04em !important;
    }

    .construction-stage-labels span {
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        --hero-story-width: calc(100vw - 8px) !important;
    }

    .hero-story-progress {
        top: 14px !important;
        left: 50% !important;
        width: calc(100vw - 16px) !important;
        height: 5px !important;
        gap: 5px !important;
        transform: translateX(-50%) !important;
    }

    .hero-story-progress-item {
        border-radius: 999px !important;
    }
}

@media (max-width: 575px) {
    .hero-section {
        --hero-story-width: calc(100vw - 4px) !important;
    }

    .hero-story-progress {
        width: calc(100vw - 10px) !important;
        height: 6px !important;
        gap: 4px !important;
    }
}

/* Mobile about section: single source of truth. */
@media (max-width: 767px) {
    .about-section {
        padding: 28px 16px 22px !important;
    }

    .about-inner,
    .about-gallery,
    .about-side-gallery,
    .about-content,
    .about-text-block,
    .about-content h2,
    .about-text-block>p,
    .about-feature-grid {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-inner {
        gap: 18px !important;
    }

    .about-gallery {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 88px !important;
        gap: 6px !important;
        min-height: 0 !important;
        height: 226px !important;
        align-items: stretch !important;
    }

    .about-photo,
    .about-main-img,
    .about-side-gallery,
    .about-side-gallery .about-photo,
    .about-side-gallery img {
        min-height: 0 !important;
    }

    .about-photo,
    .about-main-img {
        border-radius: 14px !important;
    }

    .about-photo--main,
    .about-main-img {
        grid-row: 1 / span 2 !important;
        height: 226px !important;
    }

    .about-side-gallery {
        display: grid !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        height: 226px !important;
    }

    .about-side-gallery .about-photo,
    .about-side-gallery img {
        height: 110px !important;
    }

    .about-gallery img,
    .about-main-img,
    .about-side-gallery img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        animation: aboutImageDriftMobile 11s ease-in-out infinite !important;
    }

    .about-side-gallery .about-photo:first-child img {
        animation-delay: -1.8s !important;
    }

    .about-side-gallery .about-photo:nth-child(2) img {
        animation-delay: -3.4s !important;
    }

    .about-photo::before {
        display: block !important;
        animation: aboutPhotoShine 4.6s cubic-bezier(0.22, 1, 0.36, 1) infinite !important;
    }

    .about-photo::after {
        display: block !important;
    }

    .about-section .about-reveal-img,
    .about-section .about-reveal-content {
        opacity: 0 !important;
        transform: translateY(34px) !important;
        transition:
            opacity 0.8s ease,
            transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: opacity, transform;
    }

    .about-section .about-side-gallery .about-reveal-img:nth-child(1) {
        transition-delay: 0.14s !important;
    }

    .about-section .about-side-gallery .about-reveal-img:nth-child(2) {
        transition-delay: 0.26s !important;
    }

    .about-section .about-reveal-content {
        gap: 18px !important;
        align-items: flex-start !important;
        padding-top: 0 !important;
        text-align: left !important;
        transition-delay: 0.18s !important;
    }

    .about-section.is-visible .about-reveal-img,
    .about-section.is-visible .about-reveal-content {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .about-content h2 {
        color: #ffffff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 28px !important;
        font-weight: 600 !important;
        line-height: 1.08 !important;
        text-align: left !important;
    }

    .about-content h2 span {
        color: #f0cd45 !important;
        -webkit-text-fill-color: #f0cd45 !important;
    }

    .about-text-block>p,
    .about-content .about-text-block>p {
        margin: 8px 0 0 !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
    }

    .about-feature-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        justify-items: stretch !important;
        margin: 0 !important;
    }

    .about-feature {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: start !important;
        gap: 7px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .about-feature:nth-child(even) {
        border-left: 0 !important;
        padding-left: 0 !important;
    }

    .about-feature:nth-child(even)::before {
        display: none !important;
    }

    .about-feature svg {
        width: 28px !important;
        height: 52px !important;
        flex: 0 0 28px !important;
        margin-top: 0 !important;
        align-self: stretch !important;
        justify-self: start !important;
        color: #f0cd45 !important;
        stroke: #f0cd45 !important;
        stroke-width: 1.65 !important;
    }

    .about-feature svg path,
    .about-feature svg circle,
    .about-feature svg line,
    .about-feature svg polyline,
    .about-feature svg polygon {
        stroke-width: 1.65 !important;
    }

    .about-feature div {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        min-width: 0 !important;
        align-items: flex-start !important;
    }

    .about-feature h3,
    .about-feature p {
        margin: 0 !important;
    }

    .about-feature h3 {
        color: #ffffff !important;
        font-size: 16px !important;
        line-height: 1.16 !important;
        letter-spacing: 0.2px !important;
        text-align: left !important;
        text-shadow: none !important;
    }

    .about-feature p {
        color: rgba(255, 255, 255, 0.62) !important;
        font-size: 14.5px !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    .about-btn,
    .property-snapshot-readmore {
        --about-readmore-height: 34px;
        --about-readmore-padding-x: 18px;
        --about-readmore-font-size: 14.5px;
        width: auto !important;
        max-width: none !important;
        align-self: flex-start !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border-radius: 10px !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
    }

    .about-more {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .about-more.is-open {
        max-height: none !important;
        padding: 12px 12px 14px !important;
    }

    #aboutMore.about-more.is-open>p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        color: rgba(255, 255, 255, 0.78) !important;
        font-size: 13px !important;
        line-height: 1.22 !important;
        text-align: center !important;
        letter-spacing: 0 !important;
    }

    .about-more-points {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin-top: 10px !important;
        overflow: visible !important;
    }

    .about-more-points span,
    .about-more-points span:nth-child(1),
    .about-more-points span:nth-child(2),
    .about-more-points span:nth-child(3) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 30px !important;
        padding: 4px 9px !important;
        font-size: 13px !important;
        font-weight: 430 !important;
        line-height: 1.04 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .about-more-points span:nth-child(3) {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        width: min(100%, 180px) !important;
    }
}

@media (max-width: 767px) {
    .hero-story-progress {
        top: 16px !important;
        width: calc(100% - 20px) !important;
        height: 4px !important;
        gap: 4px !important;
    }
}

@media (max-width: 575px) {
    .hero-story-progress {
        width: calc(100% - 12px) !important;
        height: 5px !important;
        gap: 4px !important;
    }
}

@media (max-width: 767px) {
    .transparent-pricing-section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .transparent-pricing-eyebrow {
        margin: 0 auto 20px !important;
    }

    .transparent-pricing-eyebrow+h2 {
        margin-top: 0 !important;
    }

    .transparent-pricing-section .pricing-left,
    .transparent-pricing-section .pricing-right {
        padding: 10px !important;
    }

    .transparent-pricing-section .pricing-image-wrap img {
        height: 138px !important;
    }

    .transparent-pricing-section .pricing-image-badge {
        top: 10px !important;
        left: 9px !important;
        bottom: auto !important;
        min-height: 30px !important;
        padding: 0 14px !important;
        font-size: 12.5px !important;
    }

    .transparent-pricing-section .floor-price-panel {
        margin-top: 8px !important;
        padding: 8px !important;
    }

    .transparent-pricing-section .floor-price-grid {
        gap: 6px !important;
    }

    .transparent-pricing-section .floor-price-grid button {
        min-height: 56px !important;
        padding: 8px !important;
    }

    .transparent-pricing-section .pricing-right {
        gap: 8px !important;
    }

    .transparent-pricing-section .pricing-spec-grid {
        gap: 6px !important;
    }

    .transparent-pricing-section .pricing-spec {
        min-height: 58px !important;
        padding: 8px !important;
    }

    .transparent-pricing-section .selected-price-box {
        min-height: 104px !important;
        padding: 16px 12px 14px !important;
    }

    .transparent-pricing-section .pricing-unlock-btn {
        width: 100% !important;
        min-height: 0 !important;
        padding: 12px 24px !important;
        gap: 10px !important;
        font-size: 16px !important;
        border-radius: 999px !important;
    }

    .transparent-pricing-section .pricing-unlock-btn svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }
}

/* Mobile hero reference pass: compact pills and visible price CTA. */
@media (max-width: 767px) {
    .hero-section .hero-tags {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 2px 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .hero-section .hero-slide--figma .hero-tags {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .hero-section .hero-slide:not(.hero-slide--figma) .hero-tags {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .hero-section .hero-tags::-webkit-scrollbar {
        display: none !important;
    }

    .hero-section .hero-tags span {
        flex: 0 0 auto !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 10px !important;
        border: 1px solid rgba(240, 205, 69, 0.62) !important;
        border-radius: 999px !important;
        background: rgba(10, 10, 8, 0.66) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: nowrap !important;
        transform: none !important;
        backdrop-filter: blur(10px) !important;
    }

    .hero-section .hero-slide--figma .hero-tags span {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 0 6px !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    .hero-section .hero-slide:not(.hero-slide--figma) .hero-tags span {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    .hero-section .hero-tags span::before,
    .hero-section .hero-tags span::after {
        display: none !important;
        content: none !important;
    }

    .hero-section .hero-tags span:hover {
        border-color: rgba(240, 205, 69, 0.62) !important;
        background: rgba(10, 10, 8, 0.74) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        transform: none !important;
    }

    .hero-section .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .hero-price-details-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: min(286px, 100%) !important;
        min-width: 0 !important;
        max-width: 286px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 24px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #f0cd45 !important;
        color: #070907 !important;
        box-shadow: 0 18px 42px rgba(240, 205, 69, 0.28) !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        text-align: center !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    .hero-price-details-btn>span:not(.hero-price-details-shine) {
        display: block !important;
        position: relative !important;
        z-index: 2 !important;
        width: auto !important;
        color: inherit !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    .hero-price-details-btn::before,
    .hero-price-details-btn::after {
        display: none !important;
        content: none !important;
    }

    .hero-price-details-btn .hero-price-details-shine {
        display: none !important;
        content: none !important;
        animation: none !important;
    }

    .hero-price-details-btn:hover {
        background: #fceba6 !important;
        color: #070907 !important;
        box-shadow: 0 18px 42px rgba(240, 205, 69, 0.28) !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        --hero-story-width: calc(100vw - 8px) !important;
    }

    .hero-story-progress {
        top: 14px !important;
        left: 50% !important;
        width: calc(100vw - 16px) !important;
        height: 5px !important;
        gap: 5px !important;
        transform: translateX(-50%) !important;
    }

    .hero-story-progress-item {
        border-radius: 999px !important;
    }
}

@media (max-width: 575px) {
    .hero-section {
        --hero-story-width: calc(100vw - 4px) !important;
    }

    .hero-story-progress {
        width: calc(100vw - 10px) !important;
        height: 6px !important;
        gap: 4px !important;
    }
}

/* Mobile differentiation cards: two clean columns with icon above text. */
@media (max-width: 767px) {
    .differentiation-section {
        min-height: 0 !important;
        padding: 0 !important;
    }

    .differentiation-banner {
        width: 100% !important;
        min-height: 0 !important;
        padding: 34px 14px 38px !important;
        gap: 20px !important;
        align-items: center !important;
    }

    .differentiation-copy {
        width: 100% !important;
        max-width: 292px !important;
        margin: 0 auto !important;
        text-align: left !important;
    }

    .differentiation-copy h2 {
        font-size: 25px !important;
        line-height: 1.12 !important;
    }

    .differentiation-copy p {
        margin-top: 10px !important;
        color: rgba(255, 255, 255, 0.90) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
    }

    .differentiation-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        align-self: center !important;
    }

    .differentiation-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 124px !important;
        padding: 14px 9px 12px !important;
        gap: 9px !important;
        border-radius: 14px !important;
        border-color: rgba(240, 205, 69, 0.38) !important;
        background:
            linear-gradient(145deg, rgba(15, 14, 11, 0.88), rgba(5, 5, 5, 0.82)),
            radial-gradient(120% 100% at 0% 0%, rgba(240, 205, 69, 0.28), transparent 58%) !important;
        box-shadow:
            0 14px 34px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            inset 0 -1px 0 rgba(240, 205, 69, 0.16) !important;
        text-align: center !important;
        overflow: hidden !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .differentiation-card::after {
        top: auto !important;
        right: 18px !important;
        bottom: 0 !important;
        left: 18px !important;
        width: auto !important;
        height: 2px !important;
        opacity: 0.75 !important;
        background: linear-gradient(90deg, rgba(240, 205, 69, 0), rgba(240, 205, 69, 0.8), rgba(240, 205, 69, 0)) !important;
    }

    .differentiation-icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        margin: 0 auto !important;
    }

    .differentiation-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .differentiation-card div {
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .differentiation-card div::after {
        display: none !important;
        content: none !important;
    }

    .differentiation-card small {
        color: #f0cd45 !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1.18 !important;
        letter-spacing: 0.08em !important;
        text-align: center !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.62) !important;
    }

    .differentiation-card strong {
        margin-top: 5px !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 900 !important;
        line-height: 1.16 !important;
        text-align: center !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72) !important;
        text-wrap: balance;
    }
}

/* Mobile floor plan header: center the copy and controls. */
@media (max-width: 767px) {
    .ideal-floor-section {
        padding-top: 58px !important;
    }

    .ideal-floor-inner {
        width: calc(100% - 28px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .ideal-floor-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        margin-bottom: 22px !important;
        text-align: center !important;
    }

    .ideal-floor-heading {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .ideal-floor-heading h2,
    .ideal-floor-heading>p:not(.ideal-floor-eyebrow) {
        text-align: center !important;
    }

    .ideal-floor-heading>p:not(.ideal-floor-eyebrow) {
        max-width: 270px !important;
        margin: 12px auto 0 !important;
    }

    .ideal-floor-size-tabs {
        width: min(100%, 292px) !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }

    .ideal-floor-card {
        width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* Mobile choose ideal floor: tighter card, pills, and spec boxes. */
@media (max-width: 767px) {
    .ideal-floor-section {
        min-height: auto !important;
        padding: 28px 16px 22px !important;
    }

    .ideal-floor-inner {
        width: 100% !important;
    }

    .ideal-floor-header {
        gap: 10px !important;
        margin-bottom: 24px !important;
    }

    .ideal-floor-eyebrow {
        margin: 0 auto 20px !important;
    }

    .ideal-floor-eyebrow+h2 {
        margin-top: 0 !important;
    }

    .ideal-floor-heading>p:not(.ideal-floor-eyebrow) {
        margin-top: 6px !important;
    }

    .ideal-floor-selector>span {
        color: #ffffff !important;
    }

    .ideal-floor-card {
        min-height: 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .ideal-floor-media,
    .ideal-floor-media img {
        min-height: 220px !important;
    }

    .ideal-floor-badges {
        top: 8px !important;
        left: 8px !important;
        gap: 5px !important;
        max-width: calc(100% - 16px) !important;
    }

    .ideal-floor-badges span,
    .ideal-floor-badges strong {
        min-height: 28px !important;
        padding: 7px 13px !important;
        font-size: 10px !important;
        letter-spacing: 0.03em !important;
    }

    .ideal-floor-badges strong {
        gap: 3px !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    .ideal-floor-badges svg {
        width: 10px !important;
        height: 10px !important;
    }

    .ideal-floor-panel {
        gap: 8px !important;
        padding: 12px 10px !important;
    }

    .ideal-floor-panel h3 {
        color: #f0cd45 !important;
        text-align: center !important;
    }

    .ideal-floor-panel>div:first-child p {
        line-height: 12px !important;
        text-align: center !important;
        padding: 5px 0 !important;
    }

    .ideal-floor-selector {
        gap: 5px !important;
    }

    .ideal-floor-levels {
        height: 52px !important;
        min-height: 52px !important;
        gap: 2px !important;
        padding: 2px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .ideal-floor-levels button {
        gap: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        border-radius: 10px !important;
        min-width: 0 !important;
        min-height: 48px !important;
        height: auto !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1 !important;
        overflow: hidden !important;
    }

    .ideal-floor-levels button svg,
    .ideal-floor-levels button img {
        width: 10px !important;
        height: 10px !important;
    }

    .ideal-floor-levels button .ideal-floor-home-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .ideal-floor-specs {
        width: auto !important;
        gap: 5px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .ideal-floor-panel .ideal-floor-spec {
        display: flex !important;
        column-gap: 6px !important;
        min-height: 46px !important;
        height: auto !important;
        gap: 2px !important;
        padding: 5px 4px !important;
        border-radius: 10px !important;
    }

    .ideal-floor-panel .ideal-floor-spec img {
        width: 13px !important;
        height: 13px !important;
    }

    .ideal-floor-panel .ideal-floor-spec span {
        font-size: 6px !important;
        line-height: 7px !important;
    }

    .ideal-floor-panel .ideal-floor-spec strong {
        min-height: 0 !important;
        margin-top: 0 !important;
        font-size: 9px !important;
        line-height: 10px !important;
    }

    .ideal-floor-price-btn {
        align-self: stretch !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        height: 48px !important;
        margin-top: 8px !important;
        margin-bottom: 2px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
    }
}

/* Mobile project plans: match Section 8 badge treatment and center intro copy. */
@media (max-width: 767px) {
    .project-plans-section {
        padding-top: 28px !important;
    }

    .project-plans-header,
    .project-plans-copy,
    .project-plans-copy h2,
    .project-plans-copy>p:not(.project-plans-eyebrow) {
        text-align: center !important;
    }

    .project-plans-copy>p:not(.project-plans-eyebrow) {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .project-plans-eyebrow {
        margin: 0 auto 20px !important;
    }

    .project-plans-eyebrow+h2 {
        margin-top: 0 !important;
    }

    .project-plan-variant-bar {
        min-height: 0 !important;
        padding: 8px 10px !important;
        gap: 0 !important;
    }

    .project-plan-variant-bar[hidden],
    .project-plan-variants[hidden],
    .project-plan-meta,
    .project-plan-meta[hidden] {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .project-plan-variants {
        height: 38px !important;
        padding: 3px !important;
        gap: 4px !important;
        border-radius: 14px !important;
    }

    .project-plan-variants span {
        display: none !important;
    }

    .project-plan-variants button {
        height: 30px !important;
        padding: 0 5px !important;
        border-radius: 10px !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
    }

    .project-plan-badges {
        top: 10px !important;
        left: 10px !important;
        gap: 5px !important;
        max-width: calc(100% - 20px) !important;
    }

    .project-plan-badge-label,
    .project-plan-badge-accent {
        display: inline-flex !important;
        min-height: 22px !important;
        border-radius: 999px !important;
        padding: 5px 9px !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
    }

    .project-plan-badge-label {
        background: rgba(11, 10, 9, 0.93) !important;
        color: #f0cd45 !important;
    }

    .project-plan-badge-accent {
        display: none !important;
    }

    .project-plan-badge-accent-text {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    .project-plan-footer {
        align-items: center !important;
        text-align: center !important;
    }

    .project-plan-footer h3 {
        color: #f0cd45 !important;
        font-size: 16px !important;
        line-height: 20px !important;
        text-align: center !important;
    }

    .project-plan-footer p {
        text-align: center !important;
    }
}

/* Mobile pricing: mirror Section 8 tabs and compact spec boxes. */
@media (max-width: 767px) {
    .transparent-pricing-tabs {
        width: min(100%, 292px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 42px !important;
        margin: 0 auto 10px !important;
        gap: 4px !important;
        padding: 4px !important;
        border: 1px solid rgba(240, 205, 69, 0.58) !important;
        border-radius: 16px !important;
        background: #050505 !important;
        box-shadow: none !important;
    }

    .transparent-pricing-tabs button {
        height: 34px !important;
        padding: 0 5px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    .transparent-pricing-tabs button.is-active {
        background: linear-gradient(180deg, rgba(20, 20, 18, 0.96), rgba(8, 8, 7, 0.98)) !important;
        color: #f0cd45 !important;
        border-color: rgba(240, 205, 69, 0.28) !important;
        box-shadow:
            inset 0 0 0 1px rgba(240, 205, 69, 0.18),
            inset 0 12px 24px rgba(255, 255, 255, 0.035) !important;
    }

    .prime-location-tabs.transparent-pricing-tabs {
        width: min(100%, 430px) !important;
        margin: 32px auto 10px !important;
    }

    .prime-location-tabs.transparent-pricing-tabs {
        width: calc(100% - 4px) !important;
        height: 52px !important;
    }

    .prime-location-tabs.transparent-pricing-tabs button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0 4px !important;
        font-size: 13px !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .prime-location-tabs.transparent-pricing-tabs button {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .prime-location-tabs.transparent-pricing-tabs button:hover,
    .prime-location-tabs.transparent-pricing-tabs button.is-active {
        background: linear-gradient(180deg, rgba(20, 20, 18, 0.96), rgba(8, 8, 7, 0.98)) !important;
        color: #ffffff !important;
        border-color: rgba(240, 205, 69, 0.28) !important;
        box-shadow:
            inset 0 0 0 1px rgba(240, 205, 69, 0.18),
            inset 0 12px 24px rgba(255, 255, 255, 0.035) !important;
    }

    .visual-showcase-tabs-shell {
        display: grid;
        grid-template-columns: 12px minmax(0, 1fr) 12px;
        align-items: center;
        gap: 0;
        width: 100vw;
        max-width: none;
        margin: 30px calc(50% - 50vw) 12px;
        padding: 0 2px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .visual-showcase-tabs-arrow {
        display: grid !important;
        width: 12px;
        height: 38px;
        place-items: center;
        border: 0;
        background: transparent;
        color: rgba(240, 205, 69, 0.82);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
    }

    .visual-showcase-tabs.transparent-pricing-tabs {
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 !important;
    }

    .visual-showcase-tabs.transparent-pricing-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .visual-showcase-tabs.transparent-pricing-tabs button {
        flex: 0 0 auto !important;
        width: calc((100vw - 28px) / 2.35) !important;
        min-width: calc((100vw - 28px) / 2.35) !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 8px !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    .visual-showcase-tabs.transparent-pricing-tabs button span {
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        border: 1px solid rgba(240, 205, 69, 0.20) !important;
        background: rgba(240, 205, 69, 0.10) !important;
        color: rgba(240, 205, 69, 0.92) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    .visual-showcase-tabs.transparent-pricing-tabs button:hover,
    .visual-showcase-tabs.transparent-pricing-tabs button.is-active {
        border-color: rgba(240, 205, 69, 0.28) !important;
        background: linear-gradient(180deg, rgba(20, 20, 18, 0.96), rgba(8, 8, 7, 0.98)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(240, 205, 69, 0.18),
            inset 0 12px 24px rgba(255, 255, 255, 0.035) !important;
    }

    .visual-showcase-tabs.transparent-pricing-tabs button.is-active span {
        border-color: rgba(240, 205, 69, 0.34) !important;
        background: rgba(0, 0, 0, 0.32) !important;
    }

    .lifestyle-amenities-tabs-shell {
        display: grid;
        grid-template-columns: 12px minmax(0, 1fr) 12px;
        align-items: center;
        gap: 0;
        width: 100vw;
        max-width: none;
        margin: 16px calc(50% - 50vw) 0;
        padding: 0 2px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .lifestyle-amenities-tabs-arrow {
        display: grid !important;
        width: 12px;
        height: 38px;
        place-items: center;
        border: 0;
        background: transparent;
        color: rgba(240, 205, 69, 0.82);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
    }

    .lifestyle-amenities-tabs-arrow.is-disabled {
        opacity: 0.22;
        pointer-events: none;
    }

    .lifestyle-amenities-tabs.transparent-pricing-tabs {
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 !important;
    }

    .lifestyle-amenities-tabs.transparent-pricing-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .lifestyle-amenities-tabs.transparent-pricing-tabs button {
        flex: 0 0 auto !important;
        width: calc((100vw - 28px) / 2.35) !important;
        min-width: calc((100vw - 28px) / 2.35) !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 8px !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    .lifestyle-amenities-tabs.transparent-pricing-tabs button:hover,
    .lifestyle-amenities-tabs.transparent-pricing-tabs button.is-active {
        border-color: rgba(240, 205, 69, 0.28) !important;
        background: linear-gradient(180deg, rgba(20, 20, 18, 0.96), rgba(8, 8, 7, 0.98)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(240, 205, 69, 0.18),
            inset 0 12px 24px rgba(255, 255, 255, 0.035) !important;
    }

    .lifestyle-amenities-tab-progress {
        display: none !important;
    }

    .lifestyle-amenities-progress {
        display: block !important;
        width: min(230px, 58vw) !important;
        height: 3px !important;
        margin: 12px auto 0 !important;
        overflow: hidden !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.14) !important;
    }

    .lifestyle-amenities-progress span {
        display: block !important;
        height: 100% !important;
        border-radius: inherit !important;
        background: linear-gradient(90deg, #f0cd45, #f0cd45) !important;
        box-shadow: 0 0 16px rgba(240, 205, 69, 0.48) !important;
    }

    .transparent-pricing-section .pricing-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .transparent-pricing-section .pricing-spec {
        display: flex !important;
        min-height: 58px !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 6px !important;
        border: 1px solid rgba(240, 205, 69, 0.18) !important;
        border-radius: 12px !important;
        background: rgba(4, 4, 4, 0.56) !important;
        text-align: center !important;
    }

    .transparent-pricing-section .pricing-spec img,
    .transparent-pricing-section .pricing-spec svg {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    .transparent-pricing-section .pricing-spec img {
        filter: none !important;
        opacity: 1 !important;
    }

    .transparent-pricing-section .pricing-spec svg,
    .transparent-pricing-section .pricing-spec svg path {
        color: #f0cd45 !important;
        fill: none !important;
        stroke: #f0cd45 !important;
    }

    .transparent-pricing-section .pricing-spec span {
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.40) !important;
        font-size: 7px !important;
        line-height: 9px !important;
        text-align: center !important;
    }

    .transparent-pricing-section .pricing-spec strong {
        min-height: 0 !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        line-height: 12px !important;
        text-align: center !important;
    }

    .transparent-pricing-section .pricing-title-block h3 {
        font-size: 20px !important;
        line-height: 24px !important;
        text-align: center !important;
    }

    .transparent-pricing-section .floor-price-grid button,
    .transparent-pricing-section .floor-price-grid button.is-price-visible:not(.is-active) {
        background: #0b0b0b !important;
        border-color: rgba(240, 205, 69, 0.24) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .transparent-pricing-section .floor-price-grid button span,
    .transparent-pricing-section .floor-price-grid button.is-price-visible:not(.is-active) span {
        color: rgba(255, 255, 255, 0.58) !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-price-visible:not(.is-active) strong,
    .transparent-pricing-section .floor-price-grid button.is-price-visible:not(.is-active) .pricing-currency {
        color: #ffffff !important;
        filter: none !important;
        text-shadow: none !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-active {
        background: linear-gradient(180deg, rgba(20, 20, 18, 0.96), rgba(8, 8, 7, 0.98)) !important;
        border-color: rgba(240, 205, 69, 0.28) !important;
        color: #f0cd45 !important;
        box-shadow:
            inset 0 0 0 1px rgba(240, 205, 69, 0.18),
            inset 0 12px 24px rgba(255, 255, 255, 0.035) !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-active span,
    .transparent-pricing-section .floor-price-grid button.is-active strong,
    .transparent-pricing-section .floor-price-grid button.is-active .pricing-currency {
        color: #f0cd45 !important;
        filter: none !important;
        text-shadow: none !important;
    }

    .transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) strong,
    .transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) p {
        color: rgba(217, 183, 98, 0.28) !important;
        filter: blur(7px) !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    .transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button:not(.is-price-visible) strong,
    .transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button:not(.is-price-visible) .pricing-currency {
        color: rgba(255, 255, 255, 0.36) !important;
        filter: blur(5.5px) !important;
        text-shadow: none !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    .transparent-pricing-section .pricing-image-wrap img {
        height: 220px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .transparent-pricing-section .selected-price-box {
        min-height: 78px !important;
        padding: 9px 10px !important;
        border-radius: 16px !important;
    }

    .transparent-pricing-section .selected-price-box>span {
        font-size: 8px !important;
        line-height: 11px !important;
        letter-spacing: 0.12em !important;
    }

    .transparent-pricing-section .selected-price-box strong {
        margin-top: 5px !important;
        font-size: 34px !important;
        line-height: 38px !important;
    }

    .transparent-pricing-section .selected-price-box p {
        margin-top: 4px !important;
        font-size: 8px !important;
        line-height: 11px !important;
    }

}

@media (max-width: 767px) {

    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading),
    .hero-slide:not(.hero-slide--figma) .hero-copy :is(h1, h2.hero-heading) {
        font-size: clamp(29px, 8.8vw, 36px) !important;
        font-weight: 450 !important;
        line-height: 1.06 !important;
    }

    .hero-copy :is(h1, h2.hero-heading) span,
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading) span,
    .hero-slide:not(.hero-slide--figma) .hero-copy :is(h1, h2.hero-heading) span {
        font-size: 0.88em !important;
        font-weight: 430 !important;
    }

    .hero-slide--figma .hero-copy p,
    .hero-copy p {
        font-size: 12.5px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        margin-top: 8px !important;
    }

    .hero-tags,
    .hero-section .hero-tags {
        margin-top: 7px !important;
    }
}

/* Final mobile hero controls: keep all phone-only hero edits in media.css. */
@media (max-width: 767px) {
    .hero-content {
        top: auto !important;
        right: 14px !important;
        bottom: max(16px, env(safe-area-inset-bottom)) !important;
        left: 14px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(0) !important;
    }

    .hero-section.is-visible .hero-slide.is-active .hero-content {
        transform: translateY(0) !important;
    }

    .hero-copy,
    .hero-copy :is(h1, h2.hero-heading),
    .hero-slide--figma .hero-copy :is(h1, h2.hero-heading),
    .hero-copy p,
    .hero-slide--figma .hero-copy p,
    .hero-location,
    .hero-slide--figma .hero-location,
    .hero-tags,
    .hero-actions {
        text-align: left !important;
    }

    .hero-location,
    .hero-slide--figma .hero-location {
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-wrap: nowrap !important;
    }

    .hero-story-progress {
        top: 14px !important;
        height: 2px !important;
        gap: 3px !important;
    }

    /* Route slide navigation through the hero background so CTAs remain tappable. */
    .hero-story-tap {
        pointer-events: none !important;
    }

    .hero-actions,
    .hero-section .hero-actions {
        --hero-mobile-btn-width: min(252px, calc(100vw - 72px));
        --hero-mobile-btn-height: 38px;
        --hero-mobile-btn-padding-x: 14px;
        --hero-mobile-btn-radius: 999px;
        --hero-mobile-btn-font-size: 15px;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        bottom: auto !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Single mobile source for both hero CTA buttons. */
    .hero-price-details-btn,
    .hero-actions a[href*="wa.me"].hero-whatsapp-btn {
        width: var(--hero-mobile-btn-width) !important;
        max-width: var(--hero-mobile-btn-width) !important;
        min-width: 0 !important;
        align-self: center !important;
        height: var(--hero-mobile-btn-height) !important;
        min-height: var(--hero-mobile-btn-height) !important;
        padding: 0 var(--hero-mobile-btn-padding-x) !important;
        border-radius: var(--hero-mobile-btn-radius) !important;
        font-size: var(--hero-mobile-btn-font-size) !important;
        line-height: 1 !important;
    }

    .hero-price-details-btn>span:not(.hero-price-details-shine),
    .hero-actions a[href*="wa.me"].hero-whatsapp-btn,
    .hero-whatsapp-btn span {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;

    }

    .hero-actions a[href*="wa.me"].hero-whatsapp-btn::before {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
    }

    .footer-redesign-cta h2 span {
        margin-top: 0 !important;
        font-size: inherit !important;
        line-height: inherit !important;
        display: block !important;
    }

    .footer-redesign-cta h2 {
        text-align: center !important;
    }

    .footer-redesign-actions {
        align-items: center !important;
    }

    .footer-redesign-actions a,
    .footer-redesign-actions a[href*="wa.me"] {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        align-self: stretch !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .footer-redesign-main {
        grid-template-columns: repeat(2, 132px) !important;
        justify-content: center !important;
        gap: 18px 0 !important;
    }

    .footer-redesign-brand {
        grid-column: 1 / -1 !important;
        width: min(100%, 320px) !important;
        justify-self: center !important;
    }

    .footer-redesign-contact {
        display: flex !important;
        grid-column: 1 / -1 !important;
        width: min(100%, 300px) !important;
        justify-self: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }
}

@media (max-width: 575px) {
    .hero-story-progress {
        height: 2px !important;
        gap: 3px !important;
    }
}

@media (max-width: 1199px) {
    .property-snapshot-readmore {
        --property-snapshot-readmore-min-height: 28px;
        --property-snapshot-readmore-padding-y: 7px;
        --property-snapshot-readmore-padding-x: 18px;
        --property-snapshot-readmore-radius: 10px;
        --property-snapshot-readmore-font-size: 12px;
        --property-snapshot-readmore-line-height: 1;
        --property-snapshot-readmore-letter-spacing: 0.18em;
    }
}

/* Mobile project plan image: keep the badge above the image and let the image fill the frame. */
@media (max-width: 767px) {
    .project-plan-lightbox {
        padding: 10px !important;
    }

    .project-plan-lightbox-panel {
        width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 14px !important;
        gap: 10px !important;
    }

    .project-plan-lightbox-image {
        max-height: calc(100dvh - 96px) !important;
        border-radius: 10px !important;
    }

    .project-plan-lightbox-title {
        max-width: calc(100% - 54px) !important;
    }

    .project-plan-tabs {
        margin-bottom: 14px !important;
    }

    .project-plan-card {
        position: relative !important;
        margin-top: 50px !important;
        overflow: visible !important;
    }

    .project-plan-variant-bar {
        position: absolute !important;
        top: -50px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 4 !important;
        width: calc(100% - 22px) !important;
        margin: 0 auto 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .project-plan-variants {
        width: 100% !important;
        min-width: 0 !important;
    }

    .project-plan-visual,
    .project-plan-visual.is-site {
        position: relative !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: none !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .project-plan-badges {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 3 !important;
        display: flex !important;
        width: auto !important;
        max-width: calc(100% - 16px) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .project-plan-badges .project-plan-badge-label,
    .project-plan-visual .project-plan-badge-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 5px 9px !important;
        font-family: "Jost", "Inter", Arial, sans-serif !important;
        font-weight: 600 !important;
        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
        border-radius: 999px !important;
        background: rgba(11, 10, 9, 0.93) !important;
        color: #f0cd45 !important;
    }

    .project-plan-image,
    .project-plan-visual.is-site .project-plan-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin-top: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 18px 18px 0 0 !important;
        pointer-events: none !important;
    }

    .project-plan-footer h3 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

@media (max-width: 767px) {
    .transparent-pricing-section .pricing-left {
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    .transparent-pricing-section .pricing-right {
        border-top: 0 !important;
    }

    .transparent-pricing-section .pricing-image-wrap {
        width: 100% !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .transparent-pricing-section .pricing-image-wrap img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .transparent-pricing-section .floor-price-panel {
        margin-right: 10px !important;
        margin-left: 10px !important;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .transparent-pricing-section .floor-price-grid button {
        border-color: rgba(240, 205, 69, 0.18) !important;
        border-width: 1px !important;
        background: rgba(240, 205, 69, 0.04) !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-active {
        background: linear-gradient(180deg, rgba(20, 20, 18, 0.96), rgba(8, 8, 7, 0.98)) !important;
        border-color: rgba(240, 205, 69, 0.28) !important;
        color: #f0cd45 !important;
        box-shadow:
            inset 0 0 0 1px rgba(240, 205, 69, 0.18),
            inset 0 12px 24px rgba(255, 255, 255, 0.035) !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-active span {
        color: rgba(255, 255, 255, 0.68) !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-active strong,
    .transparent-pricing-section .floor-price-grid button.is-active .pricing-currency {
        color: #f0cd45 !important;
        filter: none !important;
        text-shadow: none !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-price-visible:not(.is-active) {
        background: rgba(240, 205, 69, 0.04) !important;
        border-color: rgba(240, 205, 69, 0.18) !important;
        box-shadow: none !important;
    }

    .transparent-pricing-section .floor-price-grid button.is-price-visible:not(.is-active) strong,
    .transparent-pricing-section .floor-price-grid button.is-price-visible:not(.is-active) .pricing-currency {
        color: #ffffff !important;
        filter: none !important;
        text-shadow: none !important;
    }

    .transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button.is-active:not(.is-price-visible) strong,
    .transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button.is-active:not(.is-price-visible) .pricing-currency,
    .transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) strong,
    .transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) .pricing-currency,
    .transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) p {
        color: rgba(255, 255, 255, 0.28) !important;
        filter: blur(7px) !important;
        text-shadow: none !important;
        pointer-events: none !important;
        user-select: none !important;
    }
}

/* Booking enquiry tablet layout. */
@media (min-width: 768px) and (max-width: 1023px) {
    .booking-enquiry-section {
        min-height: 0 !important;
        padding: 42px 32px 46px !important;
    }

    .booking-enquiry-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        width: min(100%, 680px) !important;
    }

    .booking-enquiry-image {
        height: 340px !important;
    }

    .booking-enquiry-panel {
        width: 100% !important;
    }

    .booking-enquiry-form {
        min-height: 0 !important;
    }

    .booking-trust-row {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
}

/* Booking enquiry mobile layout. */
@media (max-width: 767px) {
    .booking-enquiry-section {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
        padding: 30px 14px 16px !important;
        overflow: visible !important;
    }

    .booking-enquiry-inner {
        display: block !important;
        width: 100% !important;
        max-width: 376px !important;
        margin: 0 auto !important;
    }

    .booking-enquiry-image {
        display: none !important;
    }

    .booking-enquiry-panel {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .booking-enquiry-form {
        width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 22px 18px 15px !important;
        border-radius: 22px !important;
    }

    .booking-enquiry-form h2 {
        font-size: 29px !important;
        font-weight: 760 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
    }

    .booking-enquiry-form p {
        margin: 13px 0 20px !important;
        font-size: clamp(14px, 4.25vw, 15px) !important;
        font-weight: 360 !important;
        line-height: 1.55 !important;
        letter-spacing: 0.012em !important;
    }

    .booking-enquiry-form label {
        margin-bottom: 15px !important;
    }

    .booking-enquiry-form label>span:first-child {
        margin-bottom: 5px !important;
        font-size: 15px !important;
        font-weight: 460 !important;
        line-height: 1.05 !important;
        letter-spacing: 0.13em !important;
    }

    .booking-phone-field,
    .booking-enquiry-form input {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 14.5px !important;
    }

    .booking-country {
        gap: 5px !important;
        margin-right: 6px !important;
        font-size: 14.5px !important;
    }

    .booking-flag {
        width: 15px !important;
        height: 9px !important;
    }

    .booking-country-arrow {
        width: 5px !important;
        height: 5px !important;
    }

    .booking-enquiry-form button {
        display: flex !important;
        width: min(100%, 286px) !important;
        min-height: 46px !important;
        margin: 6px auto 0 !important;
        padding-inline: 18px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .booking-trust-row {
        display: flex !important;
        justify-content: space-between !important;
        gap: 0 !important;
        margin-top: 9px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.045em !important;
    }

    .booking-trust-row span {
        flex: 1 1 0 !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 5px 4px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .booking-trust-row span+span::before {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        width: 1px !important;
        height: 25px !important;
        margin-right: 0 !important;
        background: rgba(240, 205, 69, 0.35) !important;
        transform: translateY(-50%) !important;
    }

    .booking-trust-row svg {
        width: 15px !important;
        height: 15px !important;
        stroke-width: 2 !important;
    }
}

/* Final mobile site visit form compact pass. */
@media (max-width: 767px) {
    .site-visit-section {
        padding: 26px 0 28px !important;
    }

    .site-visit-inner {
        width: calc(100% - 14px) !important;
        max-width: none !important;
        gap: 0 !important;
    }

    .site-visit-card {
        width: 100% !important;
        max-width: none !important;
        padding: 16px 13px 12px !important;
        border-radius: 16px !important;
    }

    .site-visit-card-inner {
        width: 100% !important;
    }

    .site-visit-card h2 {
        margin-top: 11px !important;
        font-size: 28px !important;
        line-height: 30px !important;
    }

    .site-visit-card h2+p {
        margin-top: 5px !important;
        font-size: 13px !important;
        line-height: 16px !important;
    }

    .site-visit-form {
        width: 100% !important;
        margin-top: 14px !important;
        gap: 8px !important;
    }

    .site-visit-form input {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        letter-spacing: 0.10em !important;
    }

    .site-visit-submit,
    .site-visit-card .site-visit-whatsapp {
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .site-visit-submit {
        margin-top: 4px !important;
    }

    .site-visit-card .site-visit-whatsapp {
        margin-top: 14px !important;
        gap: 8px !important;
    }

    .site-visit-card .site-visit-whatsapp svg {
        width: 16px !important;
        height: 16px !important;
    }

    .site-visit-phone {
        margin-top: 10px !important;
        gap: 8px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .site-visit-phone svg {
        width: 19px !important;
        height: 19px !important;
    }
}

/* Match Section 8 mobile spec cards with Section 10's compact premium sizing. */
@media (max-width: 767px) {
    .premium-specs-brand-dots {
        display: none !important;
    }

    .ideal-floor-section .ideal-floor-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec {
        min-height: 58px !important;
        height: auto !important;
        gap: 4px !important;
        padding: 8px 6px !important;
        border-radius: 12px !important;
        background: rgba(4, 4, 4, 0.56) !important;
        text-align: center !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec img {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec span {
        margin: 0 !important;
        font-size: 7px !important;
        line-height: 9px !important;
        text-align: center !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec strong {
        min-height: 0 !important;
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 12px !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .premium-specs-section {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .premium-specs-section .premium-specs-inner {
        width: 100% !important;
        max-width: none !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .premium-specs-section .premium-specs-header {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .premium-specs-section .premium-specs-eyebrow {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .premium-specs-section .premium-specs-header>p:not(.premium-specs-eyebrow) {
        width: 100% !important;
        max-width: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    .premium-specs-section .premium-specs-slider {
        margin-top: 28px !important;
    }

    .premium-specs-section .premium-specs-track {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 318px !important;
        min-height: 318px !important;
        overflow: hidden !important;
    }

    .premium-specs-section .premium-specs-slide {
        display: none !important;
    }

    .premium-specs-section .premium-specs-slide.is-active {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 306px !important;
        border-radius: 13px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .premium-specs-section .premium-specs-slide-overlay {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        align-content: end !important;
        align-items: end !important;
        column-gap: 10px !important;
        padding: 18px !important;
        text-align: left !important;
        opacity: 1 !important;
    }

    .premium-specs-section .premium-specs-slide-overlay span {
        grid-column: 1 !important;
        width: max-content !important;
        min-width: 42px !important;
        height: 28px !important;
        margin: 0 0 8px !important;
        padding: 0 10px !important;
        border-color: rgba(240, 205, 69, 0.40) !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.76) !important;
        color: #f0cd45 !important;
        font-size: 12px !important;
    }

    .premium-specs-section .premium-specs-slide-overlay h3 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 5px !important;
        font-size: 24px !important;
        line-height: 22px !important;
        text-align: left !important;
        text-wrap: normal !important;
    }

    .premium-specs-section .premium-specs-slide-overlay p {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 11.5px !important;
        line-height: 15px !important;
        text-align: left !important;
    }

    .premium-specs-section .premium-specs-slide-overlay button {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 3 !important;
        align-self: end !important;
        justify-self: end !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

/* Final mobile guard: hidden prices stay blurred even when selected. */
.transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button:not(.is-price-visible) strong,
.transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button:not(.is-price-visible) .pricing-currency,
.transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button.is-active:not(.is-price-visible) strong,
.transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button.is-active:not(.is-price-visible) .pricing-currency,
.transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) strong,
.transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) .pricing-currency,
.transparent-pricing-section .pricing-card:not(.is-unlocked) .selected-price-box:not(.is-price-visible) p {
    color: rgba(255, 255, 255, 0.28) !important;
    filter: blur(7px) !important;
    transition: none !important;
    text-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
}

.transparent-pricing-section .pricing-card:not(.is-unlocked) .floor-price-grid button.is-active:not(.is-price-visible) {
    background: linear-gradient(180deg, rgba(20, 20, 18, 0.96), rgba(8, 8, 7, 0.98)) !important;
    border-color: rgba(240, 205, 69, 0.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(240, 205, 69, 0.18),
        inset 0 12px 24px rgba(255, 255, 255, 0.035) !important;
}


/* Final mobile footer alignment guard. */
@media (max-width: 767px) {
    .footer-redesign {
        padding-top: 28px !important;
    }

    .footer-redesign-cta {
        text-align: center !important;
        padding-top: 12px !important;
        padding-bottom: 14px !important;
    }

    .footer-redesign-cta p {
        display: inline-flex !important;
        width: fit-content !important;
        margin-right: auto !important;
        margin-left: auto !important;
        border-color: rgba(240, 205, 69, 0.40) !important;
        background: rgba(240, 205, 69, 0.10) !important;
        color: #f0cd45 !important;
    }

    .footer-redesign-cta h2,
    .footer-redesign-cta h2 span {
        font-size: clamp(29px, 8.1vw, 34px) !important;
        line-height: 1.18 !important;
        text-align: center !important;
    }

    .footer-redesign-cta h2 span {
        display: block !important;
        margin-top: 0 !important;
    }

    .footer-redesign-brand>img,
    .footer-redesign-brand div img {
        filter:
            brightness(1.14)
            contrast(1.26)
            saturate(1.12)
            drop-shadow(1px 0 0 rgba(255, 255, 255, 0.42))
            drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.34))
            drop-shadow(0 1px 0 rgba(255, 255, 255, 0.34))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.18))
            drop-shadow(0 8px 18px rgba(0, 0, 0, 0.58)) !important;
    }

    .footer-redesign-main {
        grid-template-columns: repeat(2, minmax(118px, 132px)) !important;
        justify-content: center !important;
        justify-items: center !important;
        column-gap: 0 !important;
    }

    .footer-redesign-brand,
    .footer-redesign-contact {
        grid-column: 1 / -1 !important;
    }

    .footer-redesign-main>.footer-redesign-column:not(.footer-redesign-contact) {
        width: 100% !important;
        text-align: center !important;
    }

    .footer-redesign-column h3,
    .footer-redesign-column p,
    .footer-redesign-column strong {
        text-align: center !important;
    }

    .footer-redesign-main .footer-redesign-column:not(.footer-redesign-contact)>a {
        width: fit-content !important;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    .footer-redesign-main {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    .footer-redesign-brand,
    .footer-redesign-main>.footer-redesign-column,
    .footer-redesign-contact {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .footer-redesign-contact {
        align-items: stretch !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 0 !important;
    }

    .footer-redesign-main>.footer-redesign-column {
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .footer-redesign-column h3 {
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .footer-accordion-toggle {
        display: flex !important;
        width: 100% !important;
        min-height: 52px !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        color: #ffffff !important;
        cursor: pointer !important;
    }

    .footer-accordion-icon {
        display: inline-block !important;
        width: 9px !important;
        height: 9px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        color: rgba(255, 255, 255, 0.70) !important;
        line-height: 1 !important;
        transform: rotate(45deg) !important;
        transition: transform 0.24s ease, color 0.24s ease !important;
    }

    .footer-redesign-column.is-open .footer-accordion-icon {
        color: #f0cd45 !important;
        transform: rotate(-135deg) !important;
    }

    .footer-redesign-column:not(.is-open) .footer-accordion-panel {
        display: none !important;
    }

    .footer-accordion-panel {
        display: flex !important;
        width: calc(100% - 18px) !important;
        align-items: flex-start !important;
        padding: 0 0 16px 18px !important;
    }

    .footer-redesign-contact .footer-accordion-panel {
        width: 100% !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 4px 0 22px !important;
        text-align: center !important;
    }

    .footer-redesign-contact .footer-accordion-panel>a {
        width: min(100%, 232px) !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 999px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .footer-redesign-main .footer-redesign-column:not(.footer-redesign-contact) .footer-accordion-panel>a {
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    .footer-redesign-column p,
    .footer-redesign-column strong {
        text-align: left !important;
    }

    .footer-redesign-contact address {
        margin: 8px auto 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 991px) {
    .project-download-section {
        padding: 40px 18px;
    }

    .project-download-inner {
        grid-template-columns: 1fr;
    }

    .download-preview {
        min-height: auto;
        padding: 24px 24px;
    }
}

@media (max-width: 767px) {
    .project-download-section {
        padding: 28px 7px 28px;
    }

    .project-download-heading {
        margin-bottom: 22px;
    }

    .project-download-heading p {
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: .12em;
        padding: 8px 11px;
    }

    .project-download-heading h2 {
        font-size: clamp(28px, 8.2vw, 36px);
    }

    .project-download-heading>span {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.35;
    }

    .project-download-heading small {
        margin-top: 10px;
        font-size: 11px;
        line-height: 1.35;
        padding: 8px 11px;
    }

    .project-download-inner {
        width: 100%;
        max-width: none;
        margin-right: auto;
        margin-left: auto;
        border-radius: 20px;
    }

    .download-preview {
        padding: 18px 14px;
    }

    .download-preview-card {
        border-radius: 15px;
        aspect-ratio: 1.38;
    }

    .download-options-panel {
        width: 100%;
        box-sizing: border-box;
        padding: 22px 14px 20px;
    }

    .download-options-panel h3 {
        font-size: 26px;
    }

    .download-options-panel>p {
        margin-bottom: 18px;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.36;
    }

    .download-option {
        grid-template-columns: 44px 1fr auto;
        gap: 11px;
        width: 100%;
        box-sizing: border-box;
        min-height: 72px;
        padding: 12px;
    }

    .download-option i {
        align-self: center;
        justify-self: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 21px;
        line-height: 1;
        text-align: center;
    }

    .download-option h4 {
        font-size: 17px;
        font-weight: 600;
    }

    .download-option span {
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.3;
    }

    .download-option a {
        grid-column: auto;
        width: fit-content;
        margin-top: 0;
        min-height: 34px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 650;
    }

    .download-footnote {
        margin-top: 16px;
        padding-top: 15px;
        text-align: center;
    }

    .download-footnote p {
        justify-content: center;
        align-items: center;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.4;
        text-align: center;
    }

    .download-footnote div {
        justify-content: center;
    }

    .download-footnote div span {
        font-size: 12.5px;
        font-weight: 500;
        padding: 8px 13px;
    }
}

@media (max-width: 767px) {
    .sticky-availability-section {
        --sticky-availability-height: 100dvh !important;
        height: calc(var(--sticky-availability-height) * 2) !important;
        min-height: calc(var(--sticky-availability-height) * 2) !important;
    }

    .sticky-availability-panel {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    .sticky-availability-section.is-pinned .sticky-availability-panel {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
    }

    .sticky-availability-section.is-released .sticky-availability-panel {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .buyer-appreciation-section {
        margin-top: calc(-1 * var(--sticky-availability-height)) !important;
    }

    .sticky-availability-content--interested {
        width: calc(100% - 24px) !important;
        padding: 8px 0 18px !important;
        justify-content: center !important;
    }

    .sticky-availability-content--interested .interested-property-copy {
        width: min(100%, 292px) !important;
        max-width: 292px !important;
        padding: 18px 10px 12px !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    .sticky-availability-panel > .interested-property-kicker--mobile {
        position: absolute !important;
        top: 28px !important;
        left: 50% !important;
        z-index: 2 !important;
        max-width: none !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
    }

    .sticky-availability-content--interested .interested-property-copy::before {
        inset: 0 !important;
        border-color: rgba(240, 205, 69, 0.24) !important;
        border-radius: 18px !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(240, 205, 69, 0.18), rgba(240, 205, 69, 0) 46%),
            rgba(12, 12, 10, 0.46) !important;
    }

    .sticky-availability-content--interested .interested-property-copy h2 {
        font-size: 32px !important;
        line-height: 38px !important;
    }

    .sticky-availability-content--interested .interested-property-copy>p:not(.interested-property-kicker) {
        max-width: 238px !important;
        margin-top: 8px !important;
        font-size: 16px !important;
        line-height: 18.5px !important;
    }

    .sticky-availability-content--interested .interested-property-copy>div {
        width: 100% !important;
        max-width: 258px !important;
        margin-top: 10px !important;
        gap: 7px !important;
    }

    .sticky-availability-content--interested .sticky-availability-btn {
        width: 100% !important;
        height: 36px !important;
        min-width: 0 !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .sticky-availability-content--interested .sticky-availability-btn--white {
        border: 1px solid rgba(0, 210, 106, .38) !important;
        background: rgba(0, 210, 106, .035) !important;
        color: #00e676 !important;
        box-shadow: none !important;
    }

    .buyer-appreciation-section {
        position: relative !important;
        z-index: 4 !important;
        margin-top: calc(-1 * var(--sticky-availability-height)) !important;
        padding: 28px 18px 42px !important;
        background:
            radial-gradient(520px 180px at 50% -80px, rgba(240, 205, 69, 0.14), transparent 72%),
            linear-gradient(180deg, #060606 0%, #10100d 52%, #070707 100%) !important;
        box-shadow: 0 -24px 56px rgba(0, 0, 0, 0.34) !important;
    }

    .buyer-appreciation-section>div {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .buyer-appreciation-title {
        margin-top: 14px !important;
        font-size: 28px !important;
        line-height: 36px !important;
        text-align: center !important;
    }

    .buyer-appreciation-section .buyer-testimonials-slider {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        margin-right: calc(50% - 50vw + 7px) !important;
        margin-left: calc(50% - 50vw + 7px) !important;
        margin-top: 24px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 10px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .buyer-appreciation-section .buyer-testimonials-slider::-webkit-scrollbar {
        display: none !important;
    }

    .buyer-appreciation-section .buyer-testimonials-track {
        display: flex !important;
        width: max-content !important;
        gap: 10px !important;
        padding: 0 7px !important;
    }

    .buyer-appreciation-section .buyer-testimonial-card {
        width: calc(100vw - 28px) !important;
        min-height: 212px !important;
        flex: 0 0 calc(100vw - 28px) !important;
        padding: 20px 18px 16px !important;
        border-radius: 8px !important;
    }

    .buyer-testimonials-progress {
        display: block !important;
        margin-top: 14px !important;
    }
}

/* Final mobile property snapshot compact premium pass. */
@media (max-width: 767px) {
    .property-snapshot-section {
        padding: 28px 14px 28px !important;
        background: #080805 !important;
    }

    .property-snapshot-section::before {
        display: none !important;
        content: none !important;
        background: none !important;
        opacity: 0 !important;
    }

    .property-snapshot-layout {
        gap: 14px !important;
        margin-top: 20px !important;
    }

    .property-snapshot-card {
        padding: 8px 14px 13px !important;
    }

    .property-snapshot-brand {
        margin-bottom: 12px !important;
        padding-bottom: 14px !important;
    }

    .property-snapshot-brand h3 {
        margin-top: 0 !important;
    }

    .property-snapshot-subtitle {
        margin-top: 12px !important;
    }

    .property-snapshot-metrics {
        gap: 8px !important;
    }

    .property-snapshot-metrics>div {
        min-height: 78px !important;
        padding: 10px 8px 14px !important;
    }

    .property-snapshot-content h3 {
        margin-bottom: 10px !important;
    }

    .property-snapshot-content p {
        margin-bottom: 10px !important;
        line-height: 1.55 !important;
    }

    .property-snapshot-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: min(100%, 292px) !important;
        margin-top: 24px !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
        margin-left: auto !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
        justify-content: center !important;
        justify-items: center !important;
        text-align: center !important;
    }

    .property-snapshot-strip>div {
        position: relative !important;
        min-height: 64px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        text-align: center !important;
        box-shadow: none !important;
        transform-origin: center center !important;
        transition:
            transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.28s ease !important;
    }

    .property-snapshot-strip>div::before {
        content: "" !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 20px !important;
        height: 2px !important;
        margin-bottom: 1px !important;
        border-radius: 999px !important;
        background: rgba(240, 205, 69, 0.72) !important;
        box-shadow: 0 0 12px rgba(240, 205, 69, 0.26) !important;
    }

    .property-snapshot-strip>div:nth-child(2n),
    .property-snapshot-strip>div:nth-last-child(-n+2),
    .property-snapshot-strip>div:not(:last-child) {
        border: 0 !important;
    }

    .property-snapshot-strip>div:hover {
        filter: brightness(1.08) !important;
        transform: translateY(-3px) scale(1.08) !important;
    }

    .property-snapshot-strip span {
        max-width: 100% !important;
        color: rgba(255, 255, 255, 0.64) !important;
        font-family: "Jost", "Inter", Arial, sans-serif !important;
        font-size: 6.5px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
    }

    .property-snapshot-strip strong {
        margin-top: 0 !important;
        color: #fff2dc !important;
        font-family: "Jost", "Inter", Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 0.98 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        text-shadow: 0 10px 28px rgba(240, 205, 69, 0.18) !important;
        transition: color 0.28s ease, transform 0.28s ease !important;
    }

    .property-snapshot-strip>div:hover strong {
        color: #f0cd45 !important;
    }

    .property-snapshot-modal .property-snapshot-modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }

    .property-snapshot-modal .property-snapshot-modal-close svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* Final mobile modal compact spacing. */
@media (max-width: 767px) {
    .property-snapshot-modal .property-snapshot-modal-header {
        padding: 22px 18px 12px !important;
    }

    .property-snapshot-modal .property-snapshot-modal-header span {
        display: none !important;
    }

    .property-snapshot-modal .property-snapshot-modal-content {
        padding: 14px 16px 16px !important;
    }

    .property-modal-hero {
        gap: 12px !important;
    }

    .property-modal-hero>p {
        padding: 13px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .property-modal-hero dl {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .property-modal-hero dl div,
    .property-modal-grid article {
        align-items: center !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        border-radius: 14px !important;
        text-align: center !important;
    }

    .property-modal-hero dl div {
        overflow: hidden !important;
    }

    .property-modal-hero dt,
    .property-modal-hero dd {
        width: 100% !important;
        text-align: center !important;
    }

    .property-modal-hero dt {
        font-size: 9.5px !important;
        line-height: 1.15 !important;
        letter-spacing: 0.08em !important;
        overflow-wrap: anywhere !important;
    }

    .property-modal-hero dd {
        font-size: 14px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .property-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .property-modal-grid article {
        height: auto !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        padding: 12px 8px 14px !important;
    }

    .property-modal-grid span {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .property-modal-grid h4 {
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 7px 0 5px !important;
        font-size: 13px !important;
        line-height: 1.18 !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        text-wrap: balance !important;
    }

    .property-modal-grid p {
        max-width: 100% !important;
        font-size: 11.5px !important;
        line-height: 1.38 !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
    }

    .property-modal-note {
        gap: 9px !important;
        margin-top: 12px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .property-snapshot-modal .property-snapshot-modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 20px 24px !important;
    }

    .property-snapshot-modal .property-snapshot-modal-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        border-radius: 999px !important;
    }

    .property-snapshot-modal .property-snapshot-modal-btn--ghost {
        border: 1px solid rgba(37, 211, 102, 0.62) !important;
        background:
            linear-gradient(180deg, rgba(37, 211, 102, 0.24), rgba(37, 211, 102, 0.16)),
            rgba(5, 32, 18, 0.94) !important;
        color: #eafff0 !important;
        box-shadow: 0 16px 36px rgba(37, 211, 102, 0.22) !important;
    }

    .property-snapshot-modal .property-snapshot-modal-btn--ghost:hover {
        border-color: rgba(37, 211, 102, 0.82) !important;
        background:
            linear-gradient(180deg, rgba(37, 211, 102, 0.34), rgba(37, 211, 102, 0.22)),
            rgba(5, 42, 22, 0.96) !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
    }
}

@media (max-width: 767px) {

    :is(.about-section-tab,
        .booking-enquiry-tab,
        .ideal-floor-eyebrow,
        .project-plans-eyebrow,
        .transparent-pricing-eyebrow,
        .premium-specs-eyebrow,
        .visual-showcase-eyebrow,
        .prime-location-eyebrow,
        .lifestyle-amenities-eyebrow,
        .construction-progress-eyebrow,
        .buyer-testimonials-eyebrow,
        .sticky-availability-eyebrow,
        .faq-eyebrow,
        .project-essentials-head-eyebrow,
        .project-essentials-eyebrow,
        .site-visit-eyebrow,
        .property-snapshot-eyebrow,
        .project-download-heading > p) {
        display: inline-flex !important;
        min-height: 28px !important;
        height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: fit-content !important;
        max-width: calc(100% - 28px) !important;
        margin: 0 auto 14px !important;
        padding: 6px 16px !important;
        border: 1px solid rgba(240, 205, 69, 0.40) !important;
        border-radius: 999px !important;
        background: rgba(240, 205, 69, 0.10) !important;
        color: #f0cd45 !important;
        font-family: "Inter", Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        box-shadow: none !important;
    }

    :is(.ideal-floor-eyebrow,
        .project-plans-eyebrow,
        .transparent-pricing-eyebrow) {
        margin-bottom: 18px !important;
    }

    .ideal-floor-eyebrow+h2,
    .project-plans-eyebrow+h2,
    .transparent-pricing-eyebrow+h2 {
        margin-top: 14px !important;
    }

    :is(.ideal-floor-eyebrow,
        .project-plans-eyebrow,
        .transparent-pricing-eyebrow,
        .premium-specs-eyebrow,
        .visual-showcase-eyebrow,
        .prime-location-eyebrow,
        .lifestyle-amenities-eyebrow,
        .construction-progress-eyebrow,
        .buyer-testimonials-eyebrow,
        .sticky-availability-eyebrow,
        .faq-eyebrow,
        .project-essentials-head-eyebrow,
        .project-essentials-eyebrow,
        .site-visit-eyebrow,
        .property-snapshot-eyebrow,
        .project-download-heading > p) svg,
    .faq-eyebrow-icon {
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px !important;
        color: #f0cd45 !important;
        stroke: currentColor !important;
    }

}

.interested-property-kicker {
    display: inline-flex !important;
    min-height: 28px !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: calc(100% - 28px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 2px 7px !important;
    border: 1px solid rgba(240, 205, 69, 0.40) !important;
    border-radius: 999px !important;
    background: rgba(240, 205, 69, 0.10) !important;
    color: #f0cd45 !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

/* Restored first mobile CTA design from the initial implementation. */
.mobile-initial-cta {
    display: none;
}

@media (max-width: 760px) {
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-initial-cta {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(74px, auto) 58px;
        gap: 8px;
        align-items: stretch;
        width: 100%;
        min-height: 74px;
        overflow: hidden;
        isolation: isolate;
        border-top: 1px solid rgba(240, 205, 69, 0.28);
        background:
            radial-gradient(circle at 18% 0%, rgba(255, 247, 200, 0.16), transparent 34%),
            linear-gradient(145deg, rgba(17, 13, 8, 0.92), rgba(5, 4, 3, 0.98));
        box-shadow:
            0 -18px 42px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        transition: opacity 240ms ease, transform 300ms ease;
    }

    .mobile-initial-cta::before {
        content: "";
        position: absolute;
        inset: -120% -40%;
        z-index: -1;
        background: conic-gradient(from 110deg,
                transparent,
                rgba(240, 205, 69, 0.18),
                rgba(255, 247, 200, 0.26),
                transparent 42%);
        opacity: 0.7;
        animation: mobileInitialCtaGlow 7s linear infinite;
    }

    .mobile-initial-cta::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 45%),
            rgba(0, 0, 0, 0.18);
        pointer-events: none;
    }

    .mobile-initial-cta a {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 54px;
        border-radius: 16px;
        font-family: "Jost", "Inter", Arial, sans-serif;
        line-height: 1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-initial-cta__main {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 5px;
        overflow: hidden;
        border: 1px solid rgba(240, 205, 69, 0.55);
        background: linear-gradient(110deg, #fff1a6 0%, #f0cd45 42%, #d5ae66 100%);
        color: #090604;
        padding: 0 15px;
        box-shadow:
            0 13px 28px rgba(240, 205, 69, 0.26),
            inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .mobile-initial-cta__main::after {
        content: "";
        position: absolute;
        inset: -45% -80%;
        background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.58) 50%, transparent 62%);
        transform: translateX(-46%) rotate(8deg);
        animation: mobileInitialCtaSheen 3.6s ease-in-out infinite;
    }

    .mobile-initial-cta__main span,
    .mobile-initial-cta__main strong {
        position: relative;
        z-index: 1;
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-initial-cta__main span {
        color: rgba(9, 6, 4, 0.66);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .mobile-initial-cta__main strong {
        color: #080604;
        font-size: 15px;
        font-weight: 600;
    }

    .mobile-initial-cta__action {
        flex-direction: column;
        gap: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
            rgba(0, 0, 0, 0.28);
        color: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    .mobile-initial-cta__action i,
    .mobile-initial-cta__action .material-symbols-rounded {
        color: #f0cd45;
        font-size: 20px;
        line-height: 1;
    }

    .mobile-initial-cta__action i.fa-solid,
    .mobile-initial-cta__action i.fa-brands {
        display: inline-block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        background-color: currentColor;
        font-size: 0;
        line-height: 0;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }

    .mobile-initial-cta__action i.fa-solid::before,
    .mobile-initial-cta__action i.fa-brands::before {
        content: none !important;
    }

    .mobile-initial-cta__action i.fa-phone {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.95 21q-3.13 0-6.18-1.36-3.05-1.36-5.45-3.76-2.4-2.4-3.76-5.45Q3.2 7.38 3.2 4.25q0-.55.38-.93.37-.37.92-.37h3.05q.48 0 .83.31.35.32.42.74l.5 2.7q.08.5-.02.86-.1.36-.38.64l-1.95 1.95q.5.93 1.18 1.78.67.85 1.5 1.67.77.78 1.63 1.44.87.66 1.84 1.21l1.9-1.9q.3-.3.75-.43.45-.12.9-.02l2.6.55q.45.1.73.43.27.32.27.77v3.05q0 .55-.37.93-.38.37-.93.37Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.95 21q-3.13 0-6.18-1.36-3.05-1.36-5.45-3.76-2.4-2.4-3.76-5.45Q3.2 7.38 3.2 4.25q0-.55.38-.93.37-.37.92-.37h3.05q.48 0 .83.31.35.32.42.74l.5 2.7q.08.5-.02.86-.1.36-.38.64l-1.95 1.95q.5.93 1.18 1.78.67.85 1.5 1.67.77.78 1.63 1.44.87.66 1.84 1.21l1.9-1.9q.3-.3.75-.43.45-.12.9-.02l2.6.55q.45.1.73.43.27.32.27.77v3.05q0 .55-.37.93-.38.37-.93.37Z'/%3E%3C/svg%3E");
    }

    .mobile-initial-cta__action i.fa-whatsapp {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.1 4.8A9.9 9.9 0 0 0 12.06 2 9.94 9.94 0 0 0 3.5 16.98L2 22.45l5.6-1.47A9.94 9.94 0 0 0 22 12.07a9.85 9.85 0 0 0-2.9-7.27ZM12.07 20a7.9 7.9 0 0 1-4.03-1.1l-.29-.17-3.32.87.88-3.24-.19-.3A7.93 7.93 0 1 1 12.07 20Zm4.34-5.93c-.24-.12-1.4-.7-1.62-.77-.22-.08-.38-.12-.54.12l-.76.93c-.14.16-.28.18-.52.06a6.47 6.47 0 0 1-3.24-2.83c-.14-.24-.02-.37.1-.49l.36-.42c.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42l-.74-1.78c-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.83.82-.83 2s.86 2.3.98 2.46a9.08 9.08 0 0 0 4.06 3.59c.57.25 1.01.39 1.35.5.57.18 1.09.16 1.5.1.45-.07 1.4-.57 1.6-1.13.2-.56.2-1.03.14-1.13-.06-.11-.22-.17-.46-.28Z'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.1 4.8A9.9 9.9 0 0 0 12.06 2 9.94 9.94 0 0 0 3.5 16.98L2 22.45l5.6-1.47A9.94 9.94 0 0 0 22 12.07a9.85 9.85 0 0 0-2.9-7.27ZM12.07 20a7.9 7.9 0 0 1-4.03-1.1l-.29-.17-3.32.87.88-3.24-.19-.3A7.93 7.93 0 1 1 12.07 20Zm4.34-5.93c-.24-.12-1.4-.7-1.62-.77-.22-.08-.38-.12-.54.12l-.76.93c-.14.16-.28.18-.52.06a6.47 6.47 0 0 1-3.24-2.83c-.14-.24-.02-.37.1-.49l.36-.42c.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42l-.74-1.78c-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.83.82-.83 2s.86 2.3.98 2.46a9.08 9.08 0 0 0 4.06 3.59c.57.25 1.01.39 1.35.5.57.18 1.09.16 1.5.1.45-.07 1.4-.57 1.6-1.13.2-.56.2-1.03.14-1.13-.06-.11-.22-.17-.46-.28Z'/%3E%3C/svg%3E");
    }

    .mobile-initial-cta__whatsapp {
        padding-right: 10px;
        padding-left: 10px;
    }

    .mobile-initial-cta__whatsapp i {
        color: #00e676;
    }

    .mobile-initial-cta__action span:not(.material-symbols-rounded) {
        color: rgba(255, 255, 255, 0.72);
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-initial-cta a:active {
        transform: translateY(1px) scale(0.99);
    }

    body.mega-open .mobile-initial-cta,
    body.is-mobile-hero-active .mobile-initial-cta,
    body.is-mobile-cta-idle .mobile-initial-cta,
    body.is-pricing-modal-open .mobile-initial-cta,
    body.is-premium-specs-modal-open .mobile-initial-cta,
    body.is-visual-detail-modal-open .mobile-initial-cta,
    body.is-footer-legal-modal-open .mobile-initial-cta,
    body.is-project-plan-lightbox-open .mobile-initial-cta,
    body.is-prime-map-lightbox-open .mobile-initial-cta,
    body.is-amenity-lightbox-open .mobile-initial-cta,
    body.is-property-snapshot-modal-open .mobile-initial-cta,
    body.struct-slider-locked .mobile-initial-cta,
    body.is-mobile-struct-slider-active .mobile-initial-cta {
        opacity: 0;
        pointer-events: none;
        transform: translateY(110%);
    }
}

@keyframes mobileInitialCtaGlow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mobileInitialCtaSheen {
    0%,
    34% {
        transform: translateX(-46%) rotate(8deg);
    }

    64%,
    100% {
        transform: translateX(48%) rotate(8deg);
    }
}

.interested-property-kicker--mobile {
    display: none !important;
}

/* Final mobile readability pass: keep small supporting text legible across sections. */
@media (max-width: 767px) {
    .sticky-availability-panel > .interested-property-kicker--mobile {
        display: inline-flex !important;
    }

    body {
        font-size: 16px !important;
        line-height: 1.62 !important;
    }

    .hero-location,
    .hero-slide--figma .hero-location,
    :is(.about-section-tab,
        .booking-enquiry-tab,
        .ideal-floor-eyebrow,
        .project-plans-eyebrow,
        .transparent-pricing-eyebrow,
        .premium-specs-eyebrow,
        .visual-showcase-eyebrow,
        .prime-location-eyebrow,
        .lifestyle-amenities-eyebrow,
        .construction-progress-eyebrow,
        .buyer-testimonials-eyebrow,
        .sticky-availability-eyebrow,
        .faq-eyebrow,
        .project-essentials-head-eyebrow,
        .project-essentials-eyebrow,
        .site-visit-eyebrow,
        .property-snapshot-eyebrow,
        .project-download-heading > p,
        .interested-property-kicker) {
        font-size: 12px !important;
        line-height: 1.12 !important;
    }

    :is(.about-text-block > p,
        .about-more p,
        .ideal-floor-heading > p:not(.ideal-floor-eyebrow),
        .project-plans-copy > p:not(.project-plans-eyebrow),
        .project-plan-footer p,
        .transparent-pricing-header > p:not(.transparent-pricing-eyebrow),
        .premium-specs-header > p:not(.premium-specs-eyebrow),
        .visual-showcase-header > p:not(.visual-showcase-eyebrow),
        .visual-showcase-copy p,
        .visual-showcase-cta p,
        .visual-showcase-cta small,
        .visual-showcase-disclaimer p,
        .prime-location-header > p:not(.prime-location-eyebrow),
        .prime-growth-grid p,
        .construction-progress-copy,
        .construction-progress-meter p,
        .buyer-testimonials-header p:not(.buyer-testimonials-eyebrow),
        .buyer-testimonial-card p,
        .buyer-appreciation-card p,
        .project-essentials-head > p:not(.project-essentials-head-eyebrow),
        .project-essentials-panel > p:not(.project-essentials-eyebrow),
        .site-visit-card > p,
        .property-snapshot-content p,
        .footer-redesign-cta span,
        .footer-redesign-brand > p) {
        font-size: 16px !important;
        line-height: 1.38 !important;
    }

    :is(.ideal-floor-spec span,
        .project-plan-variants span,
        .project-plan-meta,
        .project-plan-badge-label,
        .project-plan-badge-accent-text,
        .pricing-spec span,
        .selected-price-box > span,
        .selected-price-box p,
        .pricing-unlock-note,
        .premium-specs-slide-overlay p,
        .premium-specs-notice p,
        .premium-specs-brands p,
        .premium-specs-brand,
        .visual-gallery-info-copy span,
        .prime-distance-card strong,
        .prime-whatsapp-location-cta small,
        .construction-status-center small,
        .construction-info-card p,
        .construction-bank-subtitle,
        .construction-bank-tile b,
        .construction-bank-tile em,
        .construction-proof-card p,
        .construction-stage-labels,
        .construction-buyer-proof span,
        .property-snapshot-brand p,
        .property-snapshot-metrics span,
        .property-snapshot-meta dt,
        .footer-redesign-brand span,
        .footer-redesign-column strong) {
        font-size: 12.5px !important;
        line-height: 1.42 !important;
    }

    :is(.ideal-floor-spec strong,
        .pricing-spec strong,
        .visual-gallery-info-copy strong,
        .prime-distance-card span,
        .prime-distance-card strong em,
        .lifestyle-amenity-caption span,
        .construction-phase-panel div,
        .construction-phase-panel strong,
        .construction-info-card small,
        .construction-proof-card small,
        .property-snapshot-meta dd,
        .footer-redesign-column a,
        .footer-redesign-column address,
        .footer-redesign-column p) {
        font-size: 15px !important;
        line-height: 1.46 !important;
    }

    :is(.hero-tags span,
        .pricing-unlock-kicker,
        .footer-redesign-cta p,
        .property-snapshot-strip,
        .property-snapshot-readmore,
        .about-btn) {
        font-size: 12.5px !important;
        line-height: 1.28 !important;
    }

    :is(.ideal-floor-size-tabs button,
        .ideal-floor-levels button,
        .ideal-floor-price-btn,
        .project-plan-tabs button,
        .project-plan-variants button,
        .project-plan-cta,
        .transparent-pricing-tabs button,
        .pricing-unlock-btn,
        .pricing-unlock-submit,
        .premium-specs-slide-overlay button,
        .visual-showcase-tabs button,
        .visual-showcase-cta a,
        .prime-map-live-action a,
        .prime-whatsapp-location-btn,
        .lifestyle-amenities-tabs button,
        .faq-tab,
        .construction-phase-trigger,
        .project-essentials-btn,
        .site-visit-submit,
        .site-visit-whatsapp,
        .footer-redesign-actions a,
        .footer-redesign-contact a,
        .property-snapshot-modal-btn) {
        font-size: 15px !important;
        line-height: 1.28 !important;
    }

    .project-plan-cta {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    .project-plan-cta svg {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 1.55 !important;
    }

    .ideal-floor-price-btn {
        font-size: 16px !important;
    }
}

/* Targeted mobile card sizing fixes. */
@media (max-width: 767px) {
    .construction-bank-tile {
        min-height: 48px !important;
        padding: 7px 3px !important;
        gap: 3px !important;
    }

    .construction-info-card--banks .construction-bank-tile b {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.05 !important;
    }

    .construction-info-card--banks .construction-bank-tile em {
        gap: 1px !important;
        font-size: 9px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    .construction-info-card--banks .construction-bank-tile em i {
        width: 7px !important;
        height: 7px !important;
        flex-basis: 7px !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec {
        min-height: 74px !important;
        gap: 6px !important;
        padding: 10px 8px !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec img {
        width: 20px !important;
        height: 20px !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec span {
        font-size: 10.5px !important;
        line-height: 12px !important;
    }

    .ideal-floor-section .ideal-floor-panel .ideal-floor-spec strong {
        font-size: 13.5px !important;
        line-height: 15px !important;
    }

    .transparent-pricing-section .pricing-spec {
        min-height: 78px !important;
        gap: 7px !important;
        padding: 11px 8px !important;
    }

    .transparent-pricing-section .pricing-spec img,
    .transparent-pricing-section .pricing-spec svg {
        width: 21px !important;
        height: 21px !important;
    }

    .transparent-pricing-section .pricing-spec span {
        font-size: 10.5px !important;
        line-height: 12px !important;
    }

    .transparent-pricing-section .pricing-spec strong {
        font-size: 13.5px !important;
        line-height: 15px !important;
    }

    .transparent-pricing-section .floor-price-grid button {
        min-height: 78px !important;
        padding: 12px 8px !important;
    }

    .transparent-pricing-section .floor-price-grid button span {
        font-size: 17px !important;
        line-height: 14px !important;
    }

    .transparent-pricing-section .floor-price-grid button strong {
        font-size: 22px !important;
        line-height: 22px !important;
    }

    .transparent-pricing-section .selected-price-box {
        min-height: 100px !important;
        padding: 12px 12px !important;
    }

    .transparent-pricing-section .selected-price-box>span {
        font-size: 10px !important;
        line-height: 12px !important;
    }

    .transparent-pricing-section .selected-price-box p {
        font-size: 10.5px !important;
        line-height: 13px !important;
    }
}

/* Peace density mobile: single source of truth. */
@media (max-width: 767px) {
    .peace-density-section {
        height: 100dvh !important;
        min-height: 100dvh !important;
        scroll-margin-top: 0 !important;
    }

    .peace-density-bg img {
        object-position: center center !important;
    }

    .peace-density-overlay {
        background:
            linear-gradient(180deg, rgba(3, 8, 12, 0.24) 0%, rgba(3, 8, 12, 0.38) 44%, rgba(3, 8, 12, 0.82) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.32) 76%, rgba(0, 0, 0, 0.16) 100%) !important;
    }

    .peace-density-content {
        width: calc(100% - 32px) !important;
        max-width: 312px !important;
        height: 100% !important;
        margin-left: 16px !important;
        margin-right: auto !important;
        justify-content: center !important;
        padding-top: 72px !important;
        padding-bottom: 92px !important;
        text-align: left !important;
    }

    .peace-density-content h2 {
        width: 100% !important;
        font-size: 33px !important;
        font-weight: 540 !important;
        line-height: 1.1 !important;
        letter-spacing: 0.006em !important;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.76) !important;
    }

    .peace-density-content p {
        width: 100% !important;
        max-width: 290px !important;
        margin-top: 14px !important;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 17px !important;
        font-weight: 380 !important;
        line-height: 1.36 !important;
        letter-spacing: 0.012em !important;
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.82) !important;
    }

    .peace-density-scroll {
        margin-top: 20px !important;
        font-size: 12px !important;
        font-weight: 520 !important;
        line-height: 1 !important;
        letter-spacing: 0.12em !important;
    }
}

@media (max-width: 767px) {
    .ideal-floor-header {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .ideal-floor-heading>p:not(.ideal-floor-eyebrow) {
        margin-top: 8px !important;
        font-size: 15.5px !important;
        font-weight: 300 !important;
        line-height: 1.42 !important;
        letter-spacing: 0.012em !important;
    }

    .ideal-floor-badges {
        top: 10px !important;
        left: 9px !important;
        gap: 5px !important;
        align-items: flex-start !important;
    }

    .ideal-floor-badges span,
    .ideal-floor-badges strong {
        min-height: 28px !important;
        padding: 7px 13px !important;
        border-radius: 999px !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0.07em !important;
        white-space: nowrap !important;
    }

    .ideal-floor-size-tabs button {
        font-weight: 520 !important;
    }

    .ideal-floor-spec span,
    .ideal-floor-spec strong {
        font-weight: 480 !important;
        letter-spacing: 0.04em !important;
        word-spacing: 0.08em !important;
    }

    .project-plan-tabs {
        width: calc(100% + 8px) !important;
        margin-right: -4px !important;
        margin-left: -4px !important;
        min-height: 62px !important;
        padding: 6px !important;
        gap: 5px !important;
    }

    .project-plan-tabs button {
        height: 50px !important;
        gap: 7px !important;
        padding: 0 6px !important;
        font-size: 13.5px !important;
        font-weight: 420 !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .project-plan-tabs .project-plan-tab-icon,
    .project-plan-tabs svg {
        width: 26px !important;
        height: 26px !important;
        flex: 0 0 26px !important;
        stroke-width: 1.55 !important;
    }

    .transparent-pricing-section .pricing-spec-grid {
        gap: 6px !important;
    }

    .transparent-pricing-section .pricing-card {
        gap: 0 !important;
        padding-bottom: 10px !important;
    }

    .transparent-pricing-section .pricing-right {
        gap: 5px !important;
        padding: 8px 10px 10px !important;
    }

    .transparent-pricing-section .pricing-spec {
        min-height: 78px !important;
        gap: 6px !important;
        padding: 9px 7px !important;
        border-radius: 13px !important;
    }

    .transparent-pricing-section .pricing-spec img,
    .transparent-pricing-section .pricing-spec svg {
        width: 23px !important;
        height: 23px !important;
    }

    .transparent-pricing-section .pricing-spec span {
        font-size: 12.5px !important;
        font-weight: 400 !important;
        line-height: 13px !important;
    }

    .transparent-pricing-section .pricing-spec strong {
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 17px !important;
    }

    .transparent-pricing-section .selected-price-box {
        margin-top: 2px !important;
        margin-bottom: 6px !important;
        min-height: 104px !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
    }

    .transparent-pricing-section .selected-price-box>span {
        font-size: 13.5px !important;
        font-weight: 500 !important;
        line-height: 13px !important;
    }

    .transparent-pricing-section .selected-price-box strong {
        margin-top: 5px !important;
        font-size: 38px !important;
        line-height: 40px !important;
    }

    .transparent-pricing-section .selected-price-box p {
        margin-top: 4px !important;
        font-size: 15px !important;
        line-height: 15px !important;
    }

    .transparent-pricing-section .pricing-unlock-area {
        gap: 8px !important;
        margin-top: 0 !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .transparent-pricing-section .pricing-unlock-btn {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .transparent-pricing-section .pricing-unlock-note {
        margin-top: 0 !important;
        line-height: 1.35 !important;
    }

    .premium-specs-section .premium-specs-slide-overlay p {
        font-size: 13.5px !important;
        line-height: 17px !important;
    }
}

.construction-photo-status {
    top: 14px !important;
    right: auto !important;
    bottom: auto !important;
    left: 14px !important;
    justify-content: flex-start !important;
}

@media (max-width: 767px) {
    .property-snapshot-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 12px !important;
        width: min(100%, 252px) !important;
        margin-top: 22px !important;
    }

    .property-snapshot-strip>div {
        min-height: 54px !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    .property-snapshot-strip>div::before {
        width: 18px !important;
        height: 2px !important;
        margin-bottom: 0 !important;
    }

    .property-snapshot-strip strong {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .property-snapshot-strip span {
        font-size: 8px !important;
        line-height: 1.18 !important;
        letter-spacing: 0.09em !important;
        overflow-wrap: anywhere !important; 
    }
}

/* Project snapshot mobile: single source of truth. */
@media (max-width: 767px) {
    .snapshot-section {
        height: auto !important;
        padding: 22px 14px 32px !important;
    }

    .snapshot-inner {
        width: 100% !important;
        max-width: 360px !important;
        height: auto !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .snapshot-inner h2 {
        font-size: 30px !important;
        font-weight: 560 !important;
        line-height: 1.14 !important;
        letter-spacing: 0 !important;
    }

    .snapshot-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 12px !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 18px !important;
        align-items: stretch !important;
    }

    .snapshot-card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 138px !important;
        padding: 15px 10px !important;
        gap: 7px !important;
        border-radius: 18px !important;
        opacity: 0 !important;
        transform: translateY(-72px) scale(0.96) !important;
        transition:
            opacity 0.58s ease,
            transform 0.92s cubic-bezier(0.18, 0.86, 0.28, 1.16) !important;
    }

    .snapshot-section.is-visible .snapshot-card {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }

    .snapshot-icon {
        width: 26px !important;
        height: 26px !important;
    }

    .snapshot-card .snapshot-key-icon {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        flex: 0 0 26px !important;
        line-height: 0 !important;
    }

    .snapshot-card span:not(.snapshot-icon) {
        font-size: 16px !important;
        font-weight: 280 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.035em !important;
        text-align: center !important;
    }

    .snapshot-card strong {
        font-size: 20px !important;
        font-weight: 300 !important;
        line-height: 1.1 !important;
        letter-spacing: 0.018em !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }
}

/* Mobile/tablet tab text override: normal labels stay white, selected labels turn yellow. */
:is(.ideal-floor-size-tabs,
    .ideal-floor-levels,
    .transparent-pricing-tabs,
    .faq-tabs) button,
:is(.ideal-floor-size-tabs,
    .ideal-floor-levels,
    .transparent-pricing-tabs,
    .faq-tabs) button:hover {
    color: #ffffff !important;
}

:is(.ideal-floor-size-tabs,
    .ideal-floor-levels,
    .transparent-pricing-tabs,
    .faq-tabs) button.is-active,
:is(.ideal-floor-size-tabs,
    .ideal-floor-levels,
    .transparent-pricing-tabs,
    .faq-tabs) button.is-active:hover {
    color: #f0cd45 !important;
}

/* Visual showcase selected tab color: keep this as the single source of truth. */
.visual-showcase-tabs.transparent-pricing-tabs button.is-active,
.visual-showcase-tabs.transparent-pricing-tabs button.is-active * {
    color: #f0cd45 !important;
}

/* Prime location selected tab color: keep this as the single source of truth. */
.prime-location-tabs.transparent-pricing-tabs button.is-active,
.prime-location-tabs.transparent-pricing-tabs button.is-active * {
    color: #f0cd45 !important;
}

/* Lifestyle amenities selected tab color: keep this as the single source of truth. */
.lifestyle-amenities-tabs.transparent-pricing-tabs button.is-active,
.lifestyle-amenities-tabs.transparent-pricing-tabs button.is-active * {
    color: #f0cd45 !important;
}

/* Mobile header should stay off the hero slider and return after the hero scrolls away. */
@media (max-width: 767px) {
    .site-header {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -110%, 0) !important;
        transition:
            transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 260ms ease,
            visibility 260ms ease !important;
        will-change: transform, opacity;
    }

    .site-header.is-mobile-scroll-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }

body.is-mobile-struct-slider-active .site-header {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -110%, 0) !important;
    }
}

@media (max-width: 767px) {
    .struct-dust,
    .struct-card-halo,
    .struct-card-sheen {
        display: none !important;
    }

    .struct-backdrop {
        transition: opacity 260ms ease !important;
    }

    .struct-backdrop img {
        filter: brightness(0.42) saturate(1.08) !important;
        transform: scale(1.06) !important;
    }

    .struct-card {
        filter: none !important;
        transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease !important;
        will-change: auto !important;
    }

    .struct-card-inner,
    .struct-vibe-pill,
    .struct-chapter-pill,
    .struct-meta-grid div {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .struct-card-media img,
    .struct-slide {
        animation: none !important;
        transition: opacity 260ms ease !important;
    }
}

/* Structured story slider responsive layout. */
@media (max-width: 1023px) {
    .struct-slider-inner {
        width: min(calc(100% - 36px), 860px) !important;
        padding-top: 84px !important;
        padding-bottom: 28px !important;
    }

    .struct-topline {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
    }

    .struct-story-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: end !important;
    }

    .struct-estate-brief {
        display: none !important;
    }

    .struct-copy {
        min-height: 390px !important;
    }

    .struct-title {
        font-size: 50px !important;
    }

    .struct-slider-rail-items {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .struct-index {
        min-height: 50px !important;
        padding: 8px !important;
    }

    .struct-index small {
        font-size: 8.6px !important;
        letter-spacing: 0.06em !important;
    }
}

@media (max-width: 639px) {
    .struct-slider-section {
        height: var(--amelia-mobile-viewport-height, 100dvh) !important;
        min-height: var(--amelia-mobile-viewport-height, 100dvh) !important;
        overflow: hidden !important;
    }

    .struct-slider-bg::before {
        background:
            linear-gradient(90deg, rgba(255, 248, 231, 0.09) 0 1px, transparent 1px 25%),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 80px) !important;
    }

    .struct-slider-bg::after {
        inset: 10px !important;
    }

    .struct-slide {
        background-position: center center !important;
    }

    .struct-slide-1,
    .struct-slide-6 {
        background-position: 56% center !important;
    }

    .struct-slide-2,
    .struct-slide-3,
    .struct-slide-4,
    .struct-slide-5 {
        background-position: 52% center !important;
    }

    .struct-slider-overlay {
        background:
            linear-gradient(180deg, rgba(5, 4, 3, 0.08) 0%, rgba(5, 4, 3, 0.22) 36%, rgba(5, 4, 3, 0.72) 100%),
            linear-gradient(90deg, rgba(5, 4, 3, 0.72) 0%, rgba(5, 4, 3, 0.36) 56%, rgba(5, 4, 3, 0.18) 100%) !important;
    }

    .struct-light-frame span:nth-child(1) {
        top: 18px !important;
    }

    .struct-light-frame span:nth-child(2) {
        bottom: 86px !important;
    }

    .struct-light-frame span:nth-child(3),
    .struct-light-frame span:nth-child(4) {
        top: 18px !important;
        bottom: 86px !important;
    }

    .struct-slider-inner {
        width: calc(100% - 24px) !important;
        height: var(--amelia-mobile-viewport-height, 100dvh) !important;
        padding-top: 18px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        gap: 10px !important;
    }

    .struct-topline {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 9px !important;
    }

    .struct-topline span,
    .struct-topline strong,
    .struct-topline em {
        font-size: 8.4px !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
    }

    .struct-topline em {
        display: none !important;
    }

    .struct-story-shell {
        display: flex !important;
        align-items: flex-end !important;
        min-height: 0 !important;
    }

    .struct-slider-content {
        width: 100% !important;
        max-width: none !important;
        padding: 16px 14px 15px !important;
        border: 1px solid rgba(255, 248, 231, 0.12) !important;
        border-left-color: rgba(240, 205, 69, 0.52) !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.42)) !important;
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        backdrop-filter: blur(8px) !important;
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
    }

    .struct-slider-content::before {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }

    .struct-copy:not(.is-active) {
        display: none !important;
    }

    .struct-copy.is-active {
        display: block !important;
    }

    .struct-copy {
        min-height: auto !important;
    }

    .struct-copy::before {
        top: -8px !important;
        right: 2px !important;
        font-size: 72px !important;
    }

    .struct-kicker {
        gap: 7px !important;
        margin-bottom: 10px !important;
        font-size: 8.8px !important;
        letter-spacing: 0.08em !important;
    }

    .struct-kicker span {
        width: 27px !important;
        height: 27px !important;
        font-size: 9px !important;
    }

    .struct-title {
        width: 100% !important;
        font-size: 34px !important;
        line-height: 0.98 !important;
    }

    .struct-description {
        width: 100% !important;
        margin-top: 12px !important;
        padding-left: 11px !important;
        font-size: 13px !important;
        line-height: 1.48 !important;
    }

    .struct-signature {
        margin-top: 11px !important;
        padding: 10px 11px !important;
        gap: 4px !important;
    }

    .struct-signature span {
        font-size: 8px !important;
        letter-spacing: 0.10em !important;
    }

    .struct-signature strong {
        font-size: 11.5px !important;
        line-height: 1.34 !important;
    }

    .struct-detail-row {
        gap: 5px !important;
        margin-top: 10px !important;
    }

    .struct-detail-row span {
        min-height: 26px !important;
        padding: 0 7px !important;
        font-size: 7.8px !important;
        letter-spacing: 0.045em !important;
        white-space: nowrap !important;
    }

    .struct-slider-rail {
        padding-top: 8px !important;
    }

    .struct-slider-rail-items {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .struct-index {
        min-height: 31px !important;
        padding: 5px 3px !important;
        text-align: center !important;
    }

    .struct-index b {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .struct-index small {
        display: none !important;
    }

    .struct-slider-section .struct-actions.hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 14px !important;
    }

    .struct-slider-section .struct-actions .hero-price-details-btn,
    .struct-slider-section .struct-actions a[href*="wa.me"].hero-whatsapp-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px), (max-width: 767px) and (max-height: 650px) {
    .struct-slider-section .struct-actions.hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: center !important;
    }

    .struct-slider-section .struct-actions .hero-price-details-btn,
    .struct-slider-section .struct-actions a[href*="wa.me"].hero-whatsapp-btn {
        width: 100% !important;
    }
}

@media (max-width: 360px), (max-width: 639px) and (max-height: 610px) {
    .struct-signature,
    .struct-detail-row {
        display: none !important;
    }

    .struct-title {
        font-size: 30px !important;
    }

    .struct-description {
        font-size: 12.4px !important;
        line-height: 1.42 !important;
    }
}
@media (max-width: 767px) {
    .ideal-floor-section .ideal-floor-price-btn {
        font-size: 16px !important;
    }
}

/* Lovable story showcase responsive port. Kept late to override legacy struct slider rules. */
@media (max-width: 1199px) {
    .struct-slider-section {
        height: var(--amelia-mobile-viewport-height, 100dvh) !important;
        min-height: var(--amelia-mobile-viewport-height, 100dvh) !important;
        overflow: hidden !important;
    }

    .struct-side-rail {
        display: none !important;
    }

    .struct-top-chrome,
    .struct-bottom-chrome {
        padding-inline: 24px !important;
    }

    .struct-card {
        width: min(calc(100vw - 44px), 920px) !important;
        height: min(74vh, 620px) !important;
    }

    .struct-title {
        font-size: clamp(32px, 5vw, 44px) !important;
    }
}

@media (max-width: 767px) {
    .struct-slider-section {
        height: var(--amelia-mobile-viewport-height, 100dvh) !important;
        min-height: var(--amelia-mobile-viewport-height, 100dvh) !important;
        overflow: hidden !important;
    }

    .struct-sticky-viewport {
        height: var(--amelia-mobile-viewport-height, 100dvh) !important;
    }

    .struct-backdrop img {
        filter: blur(28px) brightness(0.34) saturate(1.45) !important;
    }

    .struct-top-chrome {
        align-items: flex-start !important;
        padding: 16px 14px 0 !important;
    }

    .struct-brand-lockup {
        gap: 9px !important;
    }

    .struct-brand-mark {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .struct-brand-lockup span {
        font-size: 8px !important;
        letter-spacing: 0.22em !important;
    }

    .struct-brand-lockup strong {
        max-width: 150px !important;
        font-size: 8px !important;
        letter-spacing: 0.14em !important;
        white-space: nowrap !important;
    }

    .struct-count {
        gap: 8px !important;
        font-size: 9px !important;
        letter-spacing: 0.18em !important;
    }

    .struct-count b {
        display: none !important;
    }

    .struct-stage {
        perspective: 1200px !important;
    }

    .struct-card {
        width: calc(100vw - 22px) !important;
        height: min(76vh, calc(var(--amelia-mobile-viewport-height, 100dvh) - 118px)) !important;
    }

    .struct-card-inner {
        border-radius: 20px !important;
    }

    .struct-corner {
        width: 18px !important;
        height: 18px !important;
    }

    .struct-card-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: 43% minmax(0, 57%) !important;
    }

    .struct-card-media::after {
        background: linear-gradient(180deg, transparent 18%, rgba(5, 4, 3, 0.78)) !important;
    }

    .struct-card-num {
        top: 14px !important;
        left: 16px !important;
        font-size: clamp(54px, 18vw, 74px) !important;
    }

    .struct-vibe-pill {
        left: 16px !important;
        bottom: 14px !important;
        min-height: 24px !important;
        padding: 0 10px !important;
        font-size: 8px !important;
        letter-spacing: 0.18em !important;
    }

    .struct-chapter-pill {
        top: 14px !important;
        right: 16px !important;
        min-height: 23px !important;
        padding: 0 9px !important;
        font-size: 8px !important;
        letter-spacing: 0.18em !important;
    }

    .struct-card-copy {
        min-height: 0 !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    .struct-kicker {
        gap: 8px !important;
        margin-bottom: 10px !important;
        font-size: 8px !important;
        letter-spacing: 0.18em !important;
    }

    .struct-kicker span {
        width: 24px !important;
        height: 1px !important;
    }

    .struct-title {
        max-width: 100% !important;
        font-size: clamp(27px, 8vw, 34px) !important;
        line-height: 1.02 !important;
    }

    .struct-description {
        max-width: 100% !important;
        margin-top: 12px !important;
        font-size: clamp(12px, 3.55vw, 14px) !important;
        line-height: 1.48 !important;
    }

    .struct-meta-grid {
        gap: 8px !important;
    }

    .struct-meta-grid div {
        padding: 9px !important;
        border-radius: 10px !important;
    }

    .struct-meta-grid span {
        font-size: 7px !important;
        letter-spacing: 0.16em !important;
    }

    .struct-meta-grid strong {
        margin-top: 5px !important;
        font-size: 12px !important;
    }

    .struct-cta-row {
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .struct-gold-cta,
    .struct-outline-cta {
        flex: 0 1 auto !important;
        min-height: 38px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
    }

    .struct-bottom-chrome {
        padding: 0 14px max(14px, env(safe-area-inset-bottom)) !important;
    }

    .struct-next-preview,
    .struct-possession {
        display: none !important;
    }

    .struct-progress-wrap {
        max-width: none !important;
        width: 100% !important;
    }

    .struct-progress-bars {
        gap: 6px !important;
    }

    .struct-scroll-note {
        gap: 9px !important;
        margin-top: 10px !important;
        font-size: 8px !important;
        letter-spacing: 0.18em !important;
    }

    .struct-scroll-note strong {
        max-width: 42vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px), (max-width: 767px) and (max-height: 650px) {
    .struct-card {
        height: min(79vh, calc(var(--amelia-mobile-viewport-height, 100dvh) - 96px)) !important;
    }

    .struct-card-grid {
        grid-template-rows: 38% minmax(0, 62%) !important;
    }

    .struct-card-copy {
        gap: 8px !important;
        padding: 13px !important;
    }

    .struct-kicker {
        margin-bottom: 8px !important;
    }

    .struct-title {
        font-size: clamp(23px, 7.2vw, 29px) !important;
        line-height: 1 !important;
    }

    .struct-description {
        margin-top: 8px !important;
        font-size: 12px !important;
        line-height: 1.38 !important;
    }

    .struct-meta-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 8px !important;
    }

    .struct-meta-grid div {
        min-height: 48px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    .struct-meta-grid span {
        font-size: 6.5px !important;
        line-height: 1 !important;
    }

    .struct-meta-grid strong {
        margin-top: 4px !important;
        font-size: 10.5px !important;
        line-height: 1.16 !important;
    }

    .struct-slider-section .struct-actions.hero-actions {
        gap: 7px !important;
        margin-top: 2px !important;
        transform: translateY(-8px) !important;
    }

    .struct-slider-section .struct-actions .hero-price-details-btn,
    .struct-slider-section .struct-actions a[href*="wa.me"].hero-whatsapp-btn {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 767px) {
    .project-plans-section .project-plan-cta {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    .project-plans-section .project-plan-cta svg {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 1.55 !important;
    }
}

@media (max-width: 767px) {
    .prime-location-section .prime-whatsapp-location-cta.prime-whatsapp-location-cta--map small,
    .prime-location-section .prime-whatsapp-location-cta.prime-whatsapp-location-cta--after-distance small {
        font-size: 13.5px !important;
        line-height: 17px !important;
        margin-top: 15px !important;
    }

    .prime-location-section .prime-whatsapp-location-cta--map {
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 8px !important;
    }

    .prime-location-section .prime-whatsapp-location-cta .prime-whatsapp-location-btn svg {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
    }

    .site-visit-card .site-visit-submit,
    .site-visit-card .site-visit-whatsapp,
    .site-visit-card .site-visit-phone {
        font-size: 16px !important;
    }

    .property-snapshot-metrics svg {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 1.7 !important;
    }

    .property-snapshot-metrics strong {
        font-size: 26px !important;
        font-weight: 650 !important;
    }

    .property-snapshot-metrics span {
        font-size: 13.5px !important;
        font-weight: 400 !important;
        line-height: 15px !important;
        letter-spacing: 0 !important;
    }

    .property-snapshot-content h3 {
        font-size: 32px !important;
    }

    .property-snapshot-content p {
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    html,
    body {
        background: #080807 !important;
    }

    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: 0 !important;
        background: #080807 !important;
    }

    .footer-redesign-actions a,
    .footer-redesign-contact a,
    .mobile-premium-cta__action span:not(.material-symbols-rounded),
    .mobile-premium-cta__visit-label,
    .mobile-premium-cta__menu-link strong {
        font-size: 16px !important;
    }

    .footer-redesign-brand .amelia-logo--footer {
        --amelia-name-size: 40px;
    }

    .site-header .amelia-logo .sub {
        font-size: 10px !important;
        letter-spacing: 3px !important;
    }

    .mobile-premium-cta__bar {
        right: 0 !important;
        left: 0 !important;
        grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) !important;
        gap: 2px !important;
        min-height: calc(64px + env(safe-area-inset-bottom)) !important;
        padding: 3px 3px calc(3px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-premium-cta__bar::before {
        inset: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        -webkit-mask: radial-gradient(circle 30px at 50% 18px, transparent 0 29px, #000 30px) !important;
        mask: radial-gradient(circle 30px at 50% 18px, transparent 0 29px, #000 30px) !important;
    }

    .mobile-premium-cta__action {
        flex-direction: column !important;
        gap: 4px !important;
        min-height: 58px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
    }

    .mobile-premium-cta__call {
        justify-self: start !important;
        width: calc(100% - 16px) !important;
    }

    .mobile-premium-cta__whatsapp {
        justify-self: end !important;
        width: calc(100% - 16px) !important;
    }

    .mobile-premium-cta__action i,
    .mobile-premium-cta__action .material-symbols-rounded {
        font-size: 20px !important;
    }

    .mobile-premium-cta__action span:not(.material-symbols-rounded) {
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .mobile-premium-cta__toggle {
        width: 56px !important;
        height: 56px !important;
        top: -10px !important;
    }

    .mobile-premium-cta__visit-label {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 4 !important;
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        align-self: end !important;
        width: max-content !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
        font-size: 11px !important;
        line-height: 1.05 !important;
        text-align: center !important;
        text-overflow: clip !important;
        transform: none !important;
        white-space: nowrap !important;
    }

    .mobile-premium-cta__menu-link strong {
        width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .mobile-premium-cta__menu-link {
        width: 104px !important;
    }

    .mobile-premium-cta__menu-link .material-symbols-rounded {
        width: 49px !important;
        height: 49px !important;
        font-size: 25px !important;
    }

    .mobile-premium-cta__menu-link--price,
    .mobile-premium-cta__menu-link--brochure {
        top: -24px !important;
    }

    .mobile-premium-cta__menu-link--plans,
    .mobile-premium-cta__menu-link--amenities {
        top: 48px !important;
    }

    .mobile-premium-cta__menu-link--price,
    .mobile-premium-cta__menu-link--plans {
        left: 4px !important;
        right: auto !important;
    }

    .mobile-premium-cta__menu-link--brochure,
    .mobile-premium-cta__menu-link--amenities {
        right: 4px !important;
        left: auto !important;
    }

    .mobile-premium-cta__menu-link--brochure {
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .hero-slide.is-active .hero-content,
    .hero-section.is-visible .hero-slide.is-active .hero-content {
        opacity: 1 !important;
        animation: none !important;
        pointer-events: auto !important;
    }
}

@media (min-width: 768px) {
    .sticky-availability-panel > .interested-property-kicker--mobile {
        position: absolute !important;
        top: 28px !important;
        left: 50% !important;
        z-index: 3 !important;
        display: inline-flex !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 7px 18px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
    }
}

/* Fill tall desktop viewports without compacting shorter differentiation layouts. */
@media (min-width: 1200px) {
    .differentiation-section,
    .differentiation-banner {
        min-height: max(620px, 100vh);
        min-height: max(620px, 100dvh);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .differentiation-section,
    .differentiation-banner {
        min-height: max(660px, 100vh);
        min-height: max(660px, 100dvh);
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    .footer-redesign-brand .amelia-logo--footer {
        --amelia-badge-size: 64px;
        --amelia-icon-size: 34px;
        --amelia-name-size: 58px;
        --amelia-sub-size: 10px;
        --amelia-sub-spacing: 5.5px;
        display: inline-flex !important;
        flex-direction: row !important;
        gap: 17px !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .footer-redesign-brand .amelia-logo--footer .name {
        font-size: var(--amelia-name-size) !important;
        line-height: 0.88 !important;
    }

    .footer-redesign-brand .amelia-logo--footer .sub {
        font-size: var(--amelia-sub-size) !important;
        line-height: 1 !important;
    }

    .footer-redesign-brand .amelia-logo--footer .badge {
        width: var(--amelia-badge-size) !important;
        height: var(--amelia-badge-size) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .footer-redesign-brand .amelia-logo--footer .text {
        align-items: flex-start !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
}

/* Final mobile hero/snapshot visibility tuning. */
@media (max-width: 767px) {
    .site-header {
        display: block !important;
    }

    body.is-mobile-hero-active .site-header {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -110%, 0) !important;
    }

    .snapshot-section {
        padding: 28px 14px 16px !important;
    }

    .snapshot-inner {
        height: auto !important;
        padding-top: 0 !important;
    }

    .snapshot-inner h2 {
        margin: 0 !important;
    }

    .snapshot-grid {
        margin-top: 22px !important;
    }
}

/* Restore the May 25 mobile differentiation visual while keeping the lighter optimized image. */
@media (max-width: 767px) {
    .differentiation-section,
    .differentiation-section::after {
        background-image: url("../img/optimized/89913c4de3bacd517a6920d106fe6f7082f9f0a4.webp") !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    .differentiation-section.is-visible::before {
        background:
            radial-gradient(circle at 52% 38%, rgba(240, 205, 69, 0.18) 0%, rgba(240, 205, 69, 0.08) 18%, rgba(0, 0, 0, 0) 35%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.18) 44%, rgba(0, 0, 0, 0.38) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.10) 52%, rgba(0, 0, 0, 0.58) 100%) !important;
    }
}

/* Mobile bottom CTA: use the full screen width, sleep on idle, and wake on scroll. */
@media (max-width: 760px) {
    .mobile-initial-cta {
        grid-template-columns: minmax(0, 1fr) 76px 76px !important;
        gap: 6px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
    }

    body.is-mobile-hero-active .mobile-initial-cta,
    body.is-mobile-cta-idle .mobile-initial-cta,
    body.mega-open .mobile-initial-cta,
    body.is-pricing-modal-open .mobile-initial-cta,
    body.is-premium-specs-modal-open .mobile-initial-cta,
    body.is-visual-detail-modal-open .mobile-initial-cta,
    body.is-footer-legal-modal-open .mobile-initial-cta,
    body.is-project-plan-lightbox-open .mobile-initial-cta,
    body.is-prime-map-lightbox-open .mobile-initial-cta,
    body.is-amenity-lightbox-open .mobile-initial-cta,
    body.is-property-snapshot-modal-open .mobile-initial-cta,
    body.struct-slider-locked .mobile-initial-cta,
    body.is-mobile-struct-slider-active .mobile-initial-cta {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(110%) !important;
    }

    .mobile-initial-cta__action {
        width: 100% !important;
    }
}

/* Final mobile hero guard: keeps the first-screen slider stable after responsive CSS loads. */
@media (max-width: 767px) {
    .hero-section {
        --hero-section-height: 100dvh !important;
        --hero-story-width: 100vw !important;
        position: relative !important;
        width: 100% !important;
        height: var(--hero-section-height) !important;
        min-height: min(560px, var(--hero-section-height)) !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }

    .hero-section #heroSlider {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }

    .hero-section .hero-slide {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 650ms ease !important;
    }

    .hero-section .hero-slide.is-active {
        z-index: 1 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .hero-section .hero-slide-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-section .hero-overlay {
        display: none !important;
    }

    .hero-section .hero-slide:not(.is-active) .hero-content {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .hero-section .hero-slide.is-active .hero-content,
    .hero-section.is-visible .hero-slide.is-active .hero-content {
        position: absolute !important;
        top: auto !important;
        right: 14px !important;
        bottom: max(16px, env(safe-area-inset-bottom)) !important;
        left: 14px !important;
        z-index: 5 !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 15px 14px 13px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 18px !important;
        background:
            radial-gradient(80% 100% at 50% 0%, rgba(213, 174, 102, 0.10), rgba(213, 174, 102, 0) 62%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.10)) !important;
        box-shadow:
            0 26px 70px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        backdrop-filter: blur(2px) !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        animation: none !important;
        pointer-events: auto !important;
    }

    .hero-section .hero-copy,
    .hero-section .hero-copy :is(h1, h2.hero-heading),
    .hero-section .hero-copy p,
    .hero-section .hero-location,
    .hero-section .hero-tags,
    .hero-section .hero-actions {
        width: 100% !important;
        text-align: left !important;
    }

    .hero-section .hero-location,
    .hero-section .hero-slide--figma .hero-location {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        text-shadow: 0 4px 14px rgba(0, 0, 0, 0.55) !important;
    }

    .hero-section .hero-copy :is(h1, h2.hero-heading),
    .hero-section .hero-slide--figma .hero-copy :is(h1, h2.hero-heading),
    .hero-section .hero-slide:not(.hero-slide--figma) .hero-copy :is(h1, h2.hero-heading) {
        max-width: 300px !important;
        margin: 8px 0 0 !important;
        color: rgba(255, 255, 255, 0.98) !important;
        font-size: clamp(29px, 8.8vw, 36px) !important;
        font-weight: 450 !important;
        line-height: 1.06 !important;
        letter-spacing: 0 !important;
        text-shadow: 0 8px 22px rgba(0, 0, 0, 0.48) !important;
    }

    .hero-section .hero-copy :is(h1, h2.hero-heading) span {
        color: #f0cd45 !important;
        font-size: 0.88em !important;
        font-weight: 430 !important;
    }

    .hero-section .hero-copy p,
    .hero-section .hero-slide--figma .hero-copy p {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 12.5px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }

    .hero-section .hero-tags,
    .hero-section .hero-slide--figma .hero-tags {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 7px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .hero-section .hero-tags span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 6px !important;
        border: 1px solid rgba(240, 205, 69, 0.62) !important;
        border-radius: 999px !important;
        background: rgba(10, 10, 8, 0.66) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

    .hero-section .hero-tags span:nth-child(3),
    .hero-section .hero-tags span:nth-child(5) {
        display: none !important;
    }

    .hero-section .hero-actions {
        --hero-mobile-btn-width: min(252px, calc(100vw - 72px));
        --hero-mobile-btn-height: 38px;
        --hero-mobile-btn-padding-x: 14px;
        --hero-mobile-btn-font-size: 15px;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .hero-section .hero-price-details-btn,
    .hero-section .hero-actions a[href*="wa.me"].hero-whatsapp-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: var(--hero-mobile-btn-width) !important;
        min-width: 0 !important;
        max-width: var(--hero-mobile-btn-width) !important;
        height: var(--hero-mobile-btn-height) !important;
        min-height: var(--hero-mobile-btn-height) !important;
        padding: 0 var(--hero-mobile-btn-padding-x) !important;
        border-radius: 999px !important;
        font-size: var(--hero-mobile-btn-font-size) !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .hero-section .hero-price-details-btn {
        border: 0 !important;
        background: #f0cd45 !important;
        color: #070907 !important;
        font-weight: 900 !important;
        letter-spacing: -0.01em !important;
        box-shadow: 0 18px 42px rgba(240, 205, 69, 0.28) !important;
    }

    .hero-section .hero-actions a[href*="wa.me"].hero-whatsapp-btn {
        gap: 8px !important;
        border: 1px solid rgba(0, 210, 106, 0.38) !important;
        background: rgba(0, 0, 0, 0.42) !important;
        color: #00e676 !important;
        font-weight: 800 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .hero-section .hero-story-progress {
        position: absolute !important;
        top: 14px !important;
        right: 4px !important;
        left: 4px !important;
        z-index: 8 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: auto !important;
        max-width: none !important;
        height: 2px !important;
        margin: 0 !important;
        gap: 3px !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .hero-section .hero-story-progress-item {
        display: block !important;
        min-width: 0 !important;
        height: 2px !important;
        overflow: hidden !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.34) !important;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18) !important;
    }

    .hero-section .hero-story-progress-item span {
        display: block !important;
        width: 0;
        height: 100% !important;
        border-radius: inherit !important;
        background: rgba(255, 255, 255, 0.96) !important;
        transform: none !important;
        animation: none !important;
    }

    .hero-section .hero-story-progress-item.is-complete span {
        width: 100% !important;
        animation: none !important;
    }

    .hero-section .hero-story-progress-item.is-active span {
        width: 0;
        animation: heroStoryProgress var(--hero-story-duration, 5000ms) linear forwards !important;
    }

    .hero-section .hero-story-tap {
        pointer-events: none !important;
    }
}

/* Final mobile menu/footer background guard: keep side gutters the same black. */
@media (max-width: 767px) {
    html,
    body,
    body.min-h-screen.bg-white {
        background: #050505 !important;
    }

    .site-footer,
    .site-footer .footer-redesign,
    .site-footer .footer-redesign-main,
    .site-footer .footer-redesign-main > .footer-redesign-column,
    .site-footer .footer-accordion-toggle,
    .site-footer .footer-accordion-panel,
    .mega-menu-overlay,
    .mega-menu-overlay .mega-menu-card,
    .mega-menu-overlay .mobile-menu-panel,
    .mega-menu-overlay .mobile-menu-scroll,
    .mega-menu-overlay .mobile-menu-card,
    .mega-menu-overlay .mobile-menu-card-head {
        background: #050505 !important;
    }

    .site-footer .footer-redesign {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .site-footer .footer-redesign-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .site-footer .footer-redesign-main > .footer-redesign-column,
    .site-footer .footer-accordion-toggle,
    .site-footer .footer-accordion-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .site-footer .footer-accordion-panel {
        padding-left: 0 !important;
    }
}