/* ==============================
   Dua Two Sudirman — Main Styles
   ============================== */

/* ----- Fonts ----- */
/* Licensed webfonts — Commercial Type, license 2608-GTUKNW */
@font-face {
    font-family: 'Orleans';
    src: url('../fonts/Orleans/Orleans-Light-Web.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Orleans';
    src: url('../fonts/Orleans/Orleans-Roman-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ----- Reset ----- */
*,
*::before,
*::after { box-sizing: border-box }

html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

a { color: inherit; text-decoration: none }
img { display: block }

/* ----- Layout ----- */
.page {
    width: 100%;
    position: relative;
    background: #fff;
    overflow-x: hidden;
}

.fw {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.fw-inner {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

/* ----- Utility ----- */
.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parallax-wrap {
    position: absolute;
    inset: -20% 0;
    z-index: 1;
}

.parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecosystem__img-wrap .parallax-wrap { inset: 0 }
/* nudge the photo so the left window mullion isn't right at the edge (reads as a seam) */
.ecosystem__img-wrap .parallax-img { transform: scale(1.12); transform-origin: right center }

.mobile-br { display: none }
.desktop-br { display: inline }

/* ----- Animations ----- */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
}

[data-animate="fade-right"] { transform: translateX(-24px) }
[data-animate="fade-left"] { transform: translateX(24px) }
[data-animate].is-visible { opacity: 1; transform: translate(0, 0) }
[data-parallax] { will-change: transform }

/* ===== CTA BUTTON ===== */
.cta-btn {
    background: #F6F4EE;
    color: #564E2E;
    padding: 8px 24px;
    border-radius: 8px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans';
    font-weight: 500;
    letter-spacing: .28px;
    line-height: 10px;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease;
}

.cta-btn:hover { background: #DBC3E5 !important; color: #564E2E !important }

/* ===== NAVBAR ===== */
.navbar {
    width: 100%;
    height: 90px;
    left: 0;
    top: 0;
    position: fixed;
    background: transparent;
    z-index: 50;
    transition: transform .3s ease, background .3s ease, backdrop-filter .3s ease;
    border-bottom: none;
    box-shadow: none;
    will-change: transform;
}

.navbar--solid {
    background: rgba(0,0,0,.08);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.navbar--hidden {
    transform: translateY(-100%);
}

.navbar .fw-inner { height: 90px }

.navbar__logo-link {
    position: absolute;
    left: 80px;
    top: 24px;
    display: block;
}

.navbar__logo-img {
    width: 109px;
    height: 43px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}

.navbar__center {
    left: 50%;
    top: 39px;
    transform: translateX(-50%);
    position: absolute;
    display: inline-flex;
    gap: 80px;
    align-items: center;
}

.navbar__link {
    color: #EAE7DE;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans';
    font-weight: 400;
    text-transform: uppercase;
    line-height: 17.6px;
    letter-spacing: .32px;
}

.navbar__center a:hover { color: #DBC3E5 !important }

.cta-btn--nav {
    position: absolute;
    left: 1212px;
    top: 32.73px;
}

/* ===== HERO ===== */
#hero {
    background: #000;
    position: relative;
    overflow: hidden;
}

/* Desktop: the full video (in flow) defines the hero height — no crop, no top black.
   The only black is the small padding-bottom band under the video. */
.hero__video {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    /* reserve the hero height before the video loads (match the file: hero3 is 16:9) */
    aspect-ratio: 16 / 9;
}

/* The in-flow video pushes this wrapper past the hero, so pin it back over the video.
   Direct child only — the navbar has its own .fw-inner. */
#hero > .fw-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

.hero__title {
    width: 708.43px;
    height: 420.97px;
    left: 50%;
    top: 189.51px;
    transform: translate(-50%, 24px);
    position: absolute;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #E5E6DE;
    font-size: 80px;
    font-family: 'Orleans';
    font-weight: 400;
    line-height: 76px;
}


/* keep centered while data-animate transitions in */
.hero__title.is-visible { transform: translate(-50%, 0) }

.hero__video-link {
    display: none;           /* hidden per request (temporary) */
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.35);
    padding-bottom: 3px;
    text-decoration: none;
    transition: opacity .3s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.hero__video-link:hover { opacity: .6 }

/* ----- Divider ----- */
.divider-band {
    width: 100%;
    height: 80px;
    background: #EBE8DF;
}

/* ===== OFFICES (About) ===== */
#offices {
    height: 1236px;
    background: #EBE8DF;
}

.offices__heading {
    margin: 0;
    width: 955px;
    left: 79px;
    top: 60px;
    position: absolute;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: #564E2E;
    font-size: 50px;
    font-family: 'Orleans';
    font-weight: 400;
    line-height: 60px;
}

.offices__subheading {
    margin: 0;
    width: 657px;
    left: 623px;
    top: 317px;
    position: absolute;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: #564E2E;
    font-size: 50px;
    font-family: 'Orleans';
    font-weight: 400;
    line-height: 60px;
}

.offices__img-left {
    height: 588px;
    left: min(0px, calc(720px - 50vw));
    right: calc(100% - 491px);
    top: 317.39px;
    position: absolute;
    overflow: hidden;
}

.offices__img-right {
    height: 499px;
    left: 732px;
    right: min(0px, calc(720px - 50vw));
    top: 590.39px;
    position: absolute;
    background: #fff;
    overflow: hidden;
}

/* ===== GARDEN TOWER ===== */
#garden { height: 745px }

.garden__bg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    object-fit: cover;
}

.garden__title {
    position: absolute;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: #fff;
    font-size: 80px;
    font-family: 'Orleans';
    font-weight: 400;
    line-height: 96px;
}

.garden__title--1 { width: 519px; left: 80px; top: 80px }
.garden__title--2 { left: 262px; top: 152.37px }
.garden__title--3 { left: 130px; top: 231.49px }

.garden__content {
    width: 519px;
    left: 623px;
    top: 331.49px;
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    gap: 24px;
}

.garden__desc {
    margin: 0;
    width: 502.54px;
    color: #fff;
    font-size: 24px;
    font-family: 'Plus Jakarta Sans';
    font-weight: 400;
    line-height: 28.8px;
    letter-spacing: .48px;
}

.garden__cta { margin-top: 16px; width: max-content }

/* ===== LOCATION / PARALLAX ===== */
#location {
    /* match aerial image ratio (4000x2346) so tower tops never crop as viewport widens */
    height: auto;
    aspect-ratio: 4000 / 2346;
    background: transparent;
}

/* Aerial image fills #location (no letterbox), no movement */
#location .parallax-wrap { inset: 0 }
#location .parallax-img {
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transform: none !important;
}

/* ===== ECOSYSTEM ===== */
#ecosystem {
    height: 821px;
    background: #EBE8DF;
}

.ecosystem__img-wrap {
    height: 821px;
    left: 515px;
    right: min(0px, calc(720px - 50vw));
    top: 0;
    position: absolute;
    overflow: hidden;
}

.eco-toggle {
    width: 65px;
    height: 27px;
    left: 80px;
    top: 83.48px;
    position: absolute;
    background: rgba(86,78,46,.4);
    border-radius: 50px;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    transition: background .3s ease;
}
.eco-toggle:focus,
.eco-toggle:focus-visible { outline: none }

.eco-knob {
    width: 19px;
    height: 19px;
    left: 4px;
    top: 4px;
    position: absolute;
    background: #EBE8DF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease;
    transform: translateX(0);
}

.eco-toggle.is-night .eco-knob { transform: translateX(38px) }

.eco-toggle .icon-sun,
.eco-toggle .icon-moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
}
.eco-toggle .icon-moon { transform: translate(-50%, -50%) rotate(40deg) !important }

.eco-toggle .icon-moon { opacity: 0 }
.eco-toggle .icon-sun { opacity: 1 }
.eco-toggle.is-night .icon-sun { opacity: 0 }
.eco-toggle.is-night .icon-moon { opacity: 1 }
.eco-toggle.is-night { background: #EBE8DF !important }
.eco-toggle.is-night .eco-knob { background: #1a1a2a !important }

.ecosystem.is-night {
    background: #0a0a14 !important;
    margin-top: -1px;
}
.ecosystem.is-night h2,
.ecosystem.is-night p { color: #EBE8DF !important }

.ecosystem__title {
    margin: 0;
    width: 302px;
    left: 80px;
    top: 162.48px;
    position: absolute;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: #564E2E;
    font-size: 50px;
    font-family: 'Orleans';
    font-weight: 400;
    line-height: 52.5px;
}

.ecosystem__desc {
    margin: 0;
    width: 302px;
    left: 189px;
    top: 302.98px;
    position: absolute;
    color: #564E2E;
    font-size: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;    /* Filestage (Th): match 400 like everywhere else (was 300) */
    line-height: 28.8px;
    letter-spacing: .48px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== DISTRICT ===== */
.district {
    display: flex;
    min-height: 801px;
    position: relative;
    z-index: 10;
    overflow: hidden;
    background: #EBE8DF;
}

.district__text-col {
    flex: 0 0 45%;
    background: #f0ede6;
    display: flex;
    align-items: center;
    padding: 80px 60px 80px clamp(24px, 6vw, 100px);
    order: 1;
}

.district__map-col {
    flex: 0 0 55%;
    background: #f0ede6;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    position: relative;
    order: 2;
}

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

.district__content {
    width: 100%;
    max-width: 560px;
}

.district__title {
    font-family: 'Orleans', Georgia, 'Times New Roman', serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0.02em;
    color: #69603E;
    margin-bottom: 32px;
    text-transform: none;
}

.district__subtitle {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #69603E;
    margin: 0 0 40px;
    font-weight: 400;
    font-family: 'Plus Jakarta Sans', sans-serif;  /* Filestage (Th): larger Jakarta Sans (matches garden intro), not Orleans */
    max-width: 520px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.district__desc {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.01em;  /* PSD tracking 10 */
    color: #69603E;
    max-width: 480px;
}

.transit-stack {
    margin-top: 48px;
    color: #69603e;
    width: fit-content;
    max-width: 480px;
}

.transit-row {
    position: relative;
    padding: 8px 0 14px;
}

.transit-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100vw;
    right: auto;
    width: calc(100% + 100vw);
    height: 1px;  /* Filestage (Th): make the line thinner (was 2px) */
    background: rgba(105, 96, 62, .6);
}

.transit-row__num {
    font-family: 'Orleans', Georgia, 'Times New Roman', serif;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0.01em;  /* PSD tracking 10 */
    font-weight: 400;
    color: #69603e;
    margin: 0 0 2px;
}

.transit-row__sub {
    font-size: 14px;
    line-height: 1.4;
    color: #69603e;
    margin: 0;
}

.transit-stack__sources {
    font-size: 9px;
    line-height: 1.4;
    color: #69603e;
    opacity: .7;
    margin: 10px 0 0;
}

.transit-card {
    background: #d1cec2;
    color: #69603e;
    padding: 36px 32px 24px;
    margin-top: 40px;
    border-radius: 4px;
}

.transit-card__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.transit-col__title {
    font-size: 19px;
    font-weight: 600;
    color: #594c36;
    margin: 0 0 28px;
}

.transit-col__lead {
    font-size: 16px;
    /* line-height: 1.6; */
    margin: 0 0 16px;
    color: #69603e;
}

.transit-col__lead--gap {
    margin-top: 18px;
    margin-bottom: 6px;
}

.transit-col__lead strong {
    font-weight: 600;
}

.transit-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    font-size: 16px;
    /* line-height: 1.6; */
    color: #69603e;
}

.transit-list li {
    margin: 0 0 6px;
}

.transit-list strong {
    font-weight: 600;
}

.transit-card__sources {
    font-size: 10px;
    line-height: 1.4;
    color: #69603e;
    opacity: .7;
    margin: 24px 0 0;
}

@media (max-width:1200px) {
    .district { flex-direction: column }
    .district__map-col,
    .district__text-col {
        flex: 0 0 auto;
        width: 100%;
    }
    /* text before map on mobile + left-aligned type (client revision) */
    .district__text-col { order: 1; padding: 40px 24px; text-align: left }
    .district__map-col { order: 2; min-height: auto }
    .district__map-img { height: auto; object-fit: contain }
    .district__content { margin: 0 }
    .district__subtitle,
    .district__desc { margin-left: 0; margin-right: auto; line-height: 1.4 }

    .transit-card { text-align: left }

    .transit-stack { margin-left: 0; margin-right: auto }
    .transit-row::after {
        left: -100vw;
        right: auto;
        transform: none;
    }
}

/* ===== CONTACT ===== */
.contact {
    position: relative;
    height: 443px;
    overflow: hidden;
}

.contact__video {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.contact__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(74,85,39,.60);
}

.contact .container {
    position: relative;
    z-index: 3;
    max-width: 1440px;
    margin: 0 auto;
    padding: 76px 80px 0;
}

.contact__inner {
    display: flex;
    align-items: flex-start;
}

.contact__left { flex: 0 0 326px }
.contact__right { flex: 1; min-width: 0 }

.contact__title {
    font-family: 'Orleans', serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 52.5px;
    color: #fff;
    margin: 0;
}

.contact__desc {
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: .48px;
    max-width: 726px;
    margin: 0 0 97px;
    color: #fff;
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact__form { max-width: 784px }
.contact__form > input { max-width: 632px }

.contact__form input {
    width: 70%;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    /* ^ kill native mobile input chrome (rounded corners that made the
       underline curve up at the end) */
    border-bottom: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    padding: 14px 0;
    outline: none;
    transition: border-color .3s;
}

.contact__form input::placeholder { color: rgba(255,255,255,.5) }
.contact__form input:focus { border-color: #98E7F2 }

/* Kill browser autofill (Chrome/Android) white/purple box on dark form bg */
.contact__form input:-webkit-autofill,
.contact__form input:-webkit-autofill:hover,
.contact__form input:-webkit-autofill:focus,
.contact__form input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    caret-color: #fff !important;
    transition: background-color 9999s ease-in-out 0s;
}

.contact__form-row {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: 0;
}

.contact__form-row input {
    /* flex: 0 1 632px; */
    /* max-width: 632px; */
}

.contact__submit {
    flex-shrink: 0;
    height: 26px;
    font-size: 14px;
    line-height: 10px;
    font-weight: 500;
    color: #564E2E;
    background: #F6F4EE;
    padding: 8px 24px;
    border-radius: 8px;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact__submit:hover { background: #DBC3E5; color: #564E2E }

/* ===== GOOGLE MAP ===== */
.map-wrapper {
    width: 100%;
    height: 750px;
    position: relative;
    overflow: hidden;
}

#google-map { width: 100%; height: 100% }

#mapStyleToggle.map-style-toggle {
    position: absolute !important;
    left: auto !important;
    right: 24px !important;
    top: 24px !important;
    margin: 0 !important;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.halte-toggle {
    position: absolute;
    right: 24px;
    top: 62px;
    z-index: 10;
    width: 65px;
    height: 27px;
    padding: 0;
    border: none;
    border-radius: 50px;
    background: rgba(86,78,46,.4);
    color: #EBE8DF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .4px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    transition: background .3s ease, color .3s ease;
}
.halte-toggle.is-on {
    background: #EBE8DF;
    color: #564E2E;
}

/* Keep map toggles at desktop size on mobile (generic .eco-toggle mobile rule shrinks to 48px) */
@media (max-width: 1200px) {
    #mapStyleToggle.map-style-toggle {
        width: 65px !important;
        height: 27px !important;
        margin: 0 !important;
    }
    #mapStyleToggle.map-style-toggle .eco-knob {
        width: 19px !important;
        height: 19px !important;
        left: 4px !important;
        top: 4px !important;
    }
    #mapStyleToggle.map-style-toggle.is-night .eco-knob {
        transform: translateX(38px) !important;
    }
    #mapStyleToggle.map-style-toggle .icon-sun,
    #mapStyleToggle.map-style-toggle .icon-moon {
        width: 11px !important;
        height: 11px !important;
    }
}

.custom-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    background-color: #F4F1EB;
    padding: 6px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    z-index: 10;
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-pin img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.custom-pin::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #F4F1EB transparent transparent transparent;
}

/* ===== FOOTER ===== */
.footer {
    background: #98E7F2;
    color: #564E2E;
    padding: 83px 0 0;
}

.footer .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

.footer__row {
    display: grid;
    grid-template-columns: 34% 1fr;
    align-items: flex-start;
    gap: 40px;
}

.footer__divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,.12);
    margin: 50px 0;
}

.footer__divider--blank { border-top: none; margin: 70px 0 }

.footer__logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.footer__logo img {
    height: 91px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) saturate(100%) invert(30%) sepia(16%) saturate(638%) hue-rotate(24deg) brightness(97%) contrast(87%);
}

.footer__logo-sublabel {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #564E2E;
    font-weight: 500;
    margin-left: 32px;
}

.footer__press {
    font-size: 18px;
    line-height: 15px;
    letter-spacing: 0.4px;
    text-align: left;
    margin: 0;
    font-family: 'Orleans', serif;
}

.footer__press a { text-decoration: underline; display: inline-block; margin-top: 6px }

.footer__row--agent,
.footer__row--partners {
    grid-template-columns: 1.3fr 1.2fr 1fr;
}

.footer__intro {
    font-size: 16px;
    line-height: 1.5;
    color: #564E2E;
    margin: 0;
}

.footer__company {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: #564E2E;
    margin: 8px 0 0;
    /* tight under the intro so the enquiries line reads as a lead-in, not a separate line */
}

.footer__agent {
    font-size: 16px;
    line-height: 1.5;
    color: #564E2E;
}

.footer__agent p { margin: 0 }
.footer__agent-name { font-weight: 400 }
.footer__agent-line a { color: inherit; text-decoration: underline }
.footer__agent-line a:hover { text-decoration: underline }

.footer__company-phone {
    font-size: 16px;
    line-height: 1.5;
    color: #564E2E;
    margin: 0;
}
.footer__company-phone a { color: inherit; text-decoration: underline }

.footer__agent--extra { margin-top: 20px }


.footer__row--addr { margin-top: 0 }

.footer__addr-block {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer__address {
    font-size: 12px;
    line-height: 1.5;
    color: #564E2E;
    font-style: normal;
    margin: 0;
}

.footer__qr {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.footer__social-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.footer__handle {
    font-size: 13px;
    color: #564E2E;
}

.footer__social {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.footer__social--mobile { display: none !important }

.footer__row--partners { margin-top: 0 }
.footer__dev-col { margin-top: -106px }
.footer__row--partners .footer__social { grid-column: 3; margin-top: -29px }
.footer__social a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: opacity .2s;
}
.footer__social a:hover { opacity: .6 }
.footer__social svg { width: 22px; height: 22px }

.footer__col-title {
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.32px;
    line-height: 17.6px;
    margin: 0 0 14px;
}

.footer__partners {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer__partners-top {
    display: flex;
    align-items: center;
}

.footer__partners-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.footer__partners img {
    width: auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(30%) sepia(16%) saturate(638%) hue-rotate(24deg) brightness(97%) contrast(87%);
}

.footer__partners .logo-mitsubishi { width: 200px; height: 20px; object-fit: contain }
.footer__partners .logo-taspen { margin-top: 8px; width: 52px; height: 34px }
.footer__partners .logo-benhil { width: 70px; height: 34px; object-fit: contain }

.footer__partners-sep {
    width: 1px;
    height: 34px; /* matches the taller of the two logos (taspen/benhil = 34px) */
    background: rgba(86,78,46,.3); /* brand olive */
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.footer__links a {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.32px;
    line-height: 17.6px;
    text-transform: uppercase;
    transition: opacity .3s;
    color: #564E2E;
}

.footer__links a:hover { opacity: .5 }

.footer__disclaimer {
    font-size: 10px;
    line-height: 1.6;
    opacity: .6;
    padding: 0;
    margin: 0;
    color: #1A1A1A;
}

.footer__divider:has(+ .footer__disclaimer) {
    margin: 50px 0 10px;
}

.footer__disclaimer + .footer__divider {
    margin: 10px 0;
}

.footer__disclaimer strong { font-weight: 700 }

.footer__bottom {
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: .5;
}

/* ===== FLOATING UI ===== */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 34px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1A1A1A;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all .3s;
    z-index: 300;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.back-to-top.is-visible { opacity: 1; pointer-events: auto }
.back-to-top:hover { background: #6B7B3A }
.back-to-top svg { width: 18px; height: 18px }

.wa-float {
    position: fixed;
    width: auto;
    height: auto;
    bottom: 28px;
    right: 34px;
    background: transparent;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    mix-blend-mode: difference;
    transition: transform .3s, bottom .3s ease, right .3s ease;
}

/* Shift WA up when back-to-top becomes visible */
body:has(.back-to-top.is-visible) .wa-float {
    bottom: 82px;
    right: 37.5px;
}

/* On narrow screens the cookie banner covers the floating buttons,
   so lift them clear of it while it is up. Its height is published
   as --cookie-banner-h by the banner script. */
@media (max-width: 1100px) {
    body:has(.cookie-banner.is-shown) .back-to-top,
    body:has(.cookie-banner.is-shown) .wa-float {
        bottom: calc(var(--cookie-banner-h, 76px) + 40px);
    }

    /* both showing: keep the WhatsApp button stacked above back-to-top */
    body:has(.cookie-banner.is-shown):has(.back-to-top.is-visible) .wa-float {
        bottom: calc(var(--cookie-banner-h, 76px) + 94px);
    }
}

.wa-float:hover { transform: scale(1.1) }
.wa-float svg { width: 35px; height: 35px; fill: currentColor }

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.modal-overlay.is-open { opacity: 1; pointer-events: auto }

.modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    max-width: 480px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.modal-icon {
    width: 64px;
    height: 64px;
    color: #4A5628;
    margin: 0 auto 20px;
}

.modal-title {
    color: #564E2E;
    font-family: 'Orleans', serif;
    font-size: 28px;
    margin: 0 0 12px;
}

.modal-text {
    color: #564E2E;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.modal-close {
    background: #564E2E;
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 1440px) {
    .cta-btn--nav { left: auto !important; right: 40px !important }
}

@media (max-width: 1200px) {

    /* ----- NAVBAR ----- */
    .navbar__logo-link { left: 24px !important }
    .navbar__center { display: none !important }
    .cta-btn--nav { left: auto !important; right: 24px !important }

    /* ----- HERO ----- */
    /* Fill the screen on mobile so only the movie shows (no next slide peeking below) */
    #hero { height: 100vh !important; height: 100dvh !important; padding-bottom: 0 !important }
    /* mobile: object-fit cover scales the video to fill the 100dvh hero exactly
       (fills height, no vertical overflow) so the video's bottom caption isn't cut */
    .hero__video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        transform: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .hero__title {
        width: calc(100% - 48px) !important;
        height: auto !important;
        left: 24px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: clamp(28px, 8vw, 72px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* ----- OFFICES ----- */
    #offices {
        height: auto !important;
        padding: 60px 24px !important;
    }

    #offices .fw-inner {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .offices__heading    { order: 1 !important }
    .offices__img-left   { order: 2 !important }
    .offices__subheading { order: 3 !important }
    .offices__img-right  { order: 4 !important }

    .offices__heading,
    .offices__subheading {
        position: static !important;
        width: 100% !important;
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin: 0 0 32px 0 !important;
        text-align: center !important;
    }

    .offices__img-left,
    .offices__img-right {
        position: static !important;
        width: 100% !important;
        height: 440px !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin-bottom: 32px !important;
    }

    /* ----- GARDEN ----- */
    #garden {
        height: auto !important;
        padding: 60px 24px !important;
        background-color: #EBE8DF !important;
    }

    .garden__bg {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    #garden .fw-inner {
        height: auto !important;
        text-align: center !important;
    }

    .garden__title {
        position: static !important;
        display: inline-block !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        font-size: 48px !important;
        line-height: 1.15 !important;
        margin: 0 0.2em 0 0 !important;
        /* single, even space between the three words (whitespace collapses to 0 here) */
    }

    /* --3 starts with a literal   (desktop kerning) — cancel it on mobile so
       'garden' and 'tower' have a single space, not a double space */
    .garden__title--3 { text-indent: -0.25em !important }

    .garden__content {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin-top: 24px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .garden__desc {
        width: 100% !important;
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .garden__cta {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ----- PARALLAX LOCATION ----- */
    /* Shorter height matches image aspect ratio (1.79:1) — less sky = less "gap".
       Parallax stays ENABLED (default inset: -20% 0 from base rule). */
    #location {
        margin-top: -30px;
        height: 300px !important;
    }

    /* ----- ECOSYSTEM ----- */
    #ecosystem {
        height: auto !important;
        padding: 60px 24px !important;
    }

    #ecosystem .fw-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        height: auto !important;
    }

    .eco-toggle {
        position: relative !important;
        order: 1 !important;
        margin-bottom: 24px !important;
        width: 48px !important;
        height: 22px !important;
        left: auto !important;
        top: auto !important;
    }
    .eco-toggle .eco-knob {
        width: 15px !important;
        height: 15px !important;
        left: 3px !important;
        top: 3px !important;
    }
    .eco-toggle.is-night .eco-knob {
        transform: translateX(27px) !important;
    }
    .eco-toggle .icon-sun,
    .eco-toggle .icon-moon {
        width: 9px !important;
        height: 9px !important;
    }

    .ecosystem__title {
        position: static !important;
        order: 2 !important;
        width: 100% !important;
        font-size: 36px !important;
        line-height: 1.15 !important;
        margin: 0 0 16px 0 !important;
        text-align: center !important;
    }

    .ecosystem__desc {
        position: static !important;
        order: 3 !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 40px 0 !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    .ecosystem__img-wrap {
        position: relative !important;
        order: 4 !important;
        width: 100% !important;
        height: 360px !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* ----- CONTACT ----- */
    .contact { height: auto !important }
    .contact .container { padding: 40px 24px !important }

    .contact__inner {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .contact__left { flex: 0 0 auto !important }
    .contact__right { width: 100% !important }

    .contact__title { font-size: 40px !important; line-height: 1.15 !important }
    .contact__title br { display: none !important }

    .mobile-br { display: inline !important }
    .desktop-br { display: none !important }

    .contact__desc {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contact__form {
        margin: 0 auto !important;
        align-items: center !important;
    }

    .contact__form input {
        text-align: center !important;
    }

    .contact__form-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .contact__submit {
        align-self: center !important;
        margin: 8px auto 0 !important;
    }

    /* Parallax stays ENABLED on mobile (except #location — handled above) */

    /* ----- FOOTER ----- */
    .footer .container { padding: 0 24px !important }

    .footer__row,
    .footer__row--agent,
    .footer__row--partners {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 24px 0 !important;
        justify-items: center !important;
        text-align: center !important;
    }

    /* Reset negative margin that pulls dev-col up on desktop */
    .footer__dev-col { margin-top: 0 !important }

    /* Reset grid-column overrides that break single-col layout */
    /* social icons before "Development by" */
    .footer__row--partners .footer__social { grid-column: auto !important; order: -1 !important; justify-content: flex-start !important }

    .footer__logo { justify-content: center !important }
    .footer__logo img { object-position: center !important }
    .footer__press { text-align: center !important }
    .footer__social { justify-content: center !important; margin-top: 8px !important }

    .footer__partners {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .footer__row--partners {
        margin-top: 0 !important;
    }
    .footer__divider--blank { margin: 24px 0 !important }

    /* more breathing room between the logo and the "For enquiries…" lead-in */
    .footer__press-block { margin-top: 32px !important }

    .footer__press-block .footer__social { display: none !important }
    .footer__social--mobile {
        display: flex !important;
        justify-content: center !important;
        margin: 24px 0 !important;
    }

    .footer__links { align-items: center !important }
    .footer__disclaimer { text-align: center !important }

    .footer__bottom {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ----- CLIENT REVISION: left-align all type on mobile (centred not working) ----- */
@media (max-width: 1200px) {
    #offices .fw-inner,
    .offices__heading,
    .offices__subheading,
    #garden .fw-inner,
    .garden__content,
    .garden__desc,
    #ecosystem .fw-inner,
    .ecosystem__title,
    .ecosystem__desc,
    .contact__inner,
    .contact__desc,
    .contact__form input {
        text-align: left !important;
    }

    #garden .fw-inner,
    .garden__content,
    #ecosystem .fw-inner,
    .contact__inner,
    .contact__form,
    .contact__form-row {
        align-items: flex-start !important;
    }

    /* ===== FOOTER fully left-aligned on mobile (becca: "left align all type … whole page too").
       To revert the footer to CENTRED, just delete/comment this one block. ===== */
    .footer__row,
    .footer__row--agent,
    .footer__row--partners,
    .footer__press,
    .footer__disclaimer,
    .footer__bottom,
    .footer__col-title {
        text-align: left !important;
    }
    .footer__row,
    .footer__row--agent,
    .footer__row--partners {
        justify-items: start !important;
    }
    .footer__logo,
    .footer__social,
    .footer__partners,
    .footer__partners-top,
    .footer__partners-bottom,
    .footer__links,
    .footer__bottom {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    /* ===== end footer-left block ===== */

    /* reset block-centering margins so type/controls sit left */
    .garden__cta,
    .contact__desc,
    .contact__form,
    .contact__submit {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .contact__submit { align-self: flex-start !important }
}

/* ----- SMALL MOBILE ----- */
@media (max-width: 480px) {
    .offices__heading,
    .offices__subheading { font-size: 26px !important }

    .garden__title { font-size: 38px !important }
    .ecosystem__title { font-size: 28px !important }
    .contact__title { font-size: 32px !important }
    .district__title { font-size: 28px !important; line-height: 1.2 !important }
    .district__subtitle { font-size: 18px !important }
    .ecosystem__desc { font-size: 18px !important }

    .transit-card { padding: 28px 20px 20px !important; text-align: left !important }
    .transit-card__cols {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .transit-col__title { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 20px !important }
}

/* ===== MAP ZOOM (mobile tap-to-enlarge) ===== */
.map-zoom-hint {
    display: none;
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(86, 78, 46, .92);
    color: #EBE8DF;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    z-index: 5;
    animation: map-hint-pulse 2s ease-in-out infinite;
}

@keyframes map-hint-pulse {
    0%, 100% { transform: scale(1) }
    50%      { transform: scale(1.08) }
}

.map-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-modal[hidden] { display: none }

.map-modal__scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    box-sizing: border-box;
}

.map-modal__scroll img {
    display: block;
    background: #f0ede6;
    max-width: none;
    width: 1215px;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.map-modal__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Show zoom hint only on mobile */
@media (max-width: 1200px) {
    .map-zoom-hint { display: flex }
    .district__map-col { position: relative !important }
}

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 16px);
    z-index: 200;
    width: min(680px, calc(100% - 32px));
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 24px;
    background: #EBE8DF;
    color: #564E2E;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.cookie-banner[hidden] { display: none }
.cookie-banner.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto }

.cookie-banner__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    flex: 1;
}
.cookie-banner__link { text-decoration: underline }

.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-banner__btn {
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    background: #564E2E;
    color: #EBE8DF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.cookie-banner__btn:hover { background: #DBC3E5; color: #564E2E }

.cookie-banner__btn--ghost {
    background: transparent;
    color: #564E2E;
    border: 1px solid rgba(86, 78, 46, .4);
}
.cookie-banner__btn--ghost:hover { background: rgba(86, 78, 46, .08); color: #564E2E }

@media (max-width: 640px) {
    .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; text-align: center }
    .cookie-banner__actions { justify-content: center }
}