/*
 * 52 Uxbridge Road - site stylesheet
 * Replaces the Elementor / Elementor Pro / Royal Addons / Premium Addons / Hello Elementor styles.
 * Sizes are the live site's; breakpoints as live: laptop <= 1366px, tablet <= 1024px, phone <= 767px.
 * Fonts: Uncut Sans (self-hosted, declared in inc/site/site.php) and p22-mackinac-pro (Adobe Fonts kit spg3pdo).
 * Text that sets no font of its own uses the system stack, as on live (it also sizes the gap under inline
 * artwork, which the layout relies on).
 *
 *  1. Tokens               9. Sustainability
 *  2. Base                10. Gallery
 *  3. Layout              11. Location
 *  4. Shared components   12. Amenities
 *  5. Header and menu     13. Developer, "We don't just invest"
 *  6. Hero                14. Footer, back to top
 *  7. About               15. Lightbox
 *  8. Accommodation,      16. Entrance animations, plain pages
 *     Specification
 */

/* 1. Tokens -------------------------------------------------------------- */

:root {
    --system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --sans: "Uncut Sans", sans-serif;
    --serif: "p22-mackinac-pro", sans-serif;

    --navy: #262c65;
    --navy-deep: #2a2a64;
    --ink: #152441;
    --midnight: #011640;
    --lilac: #d7d3f7;
    --peach: #e7a494;
    --coral: #db7960;
    --terracotta: #df8670;
    --maroon: #3b1312;
    --charcoal: #3a3938;
    --blush: #faf5f5;
    --rose: #f4e6e1;
    --mint: 196, 236, 227;
}

/* 2. Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

html.is-locked {
    overflow: hidden;
}

body {
    margin: 0;
    background-color: #fff;
    color: #333;
    font-family: var(--system);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

h1, h2, h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

p {
    margin-block: 0 0.9rem;
}

b,
strong {
    font-weight: bolder;
}

img {
    border-style: none;
    height: auto;
    max-width: 100%;
}

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

button {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    z-index: 10000;
    padding: 10px 16px;
    background: #fff;
    color: var(--navy);
    font-family: var(--sans);
}

.skip-link:focus {
    top: 10px;
}

/* 3. Layout --------------------------------------------------------------
 * The live page is Elementor sections and columns; the same box model is kept so every height matches:
 * .row = section container (flex), .col = column, .col__in = the column's widget area (flex-wrap,
 * holds padding/background), .w = a widget (20px under every widget but the last; .w--fit widgets have
 * their own width in --w and no gap). */

.row {
    display: flex;
    position: relative;
    margin-inline: auto;
}

.row--boxed {
    max-width: 1140px;
}

.col {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 1px;
}

.col__in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
}

.col--middle > .col__in {
    align-content: center;
    align-items: center;
}

.col__in > * {
    position: relative;
    width: 100%;
}

.col__in > .w:not(:last-child) {
    margin-bottom: 20px;
}

.col__in > .w--fit {
    width: var(--w, 100%);
    max-width: var(--w, 100%);
}

.col__in > .w--fit:not(:last-child) {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .col--25 { width: 25%; }
    .col--30 { width: 30%; }
    .col--35 { width: 35%; }
    .col--40 { width: 40%; }
    .col--49 { width: 49.333%; }
    .col--50 { width: 50%; }
    .col--60 { width: 60%; }
    .col--65 { width: 65%; }
    .col--70 { width: 70%; }
}

@media (max-width: 1024px) {
    .row {
        flex-wrap: wrap;
    }

    .row--boxed {
        max-width: 1024px;
    }
}

@media (max-width: 767px) {
    .row--boxed {
        max-width: 767px;
    }

    .col--half-phone {
        width: 50%;
    }
}

/* 4. Shared components --------------------------------------------------- */

/* Serif section headings with the Uncut Sans accent words */
.heading {
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.1em;
    color: var(--navy);
}

.uncut {
    font-family: var(--sans);
}

.text {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--navy);
}

@media (max-width: 767px) {
    .heading {
        font-size: 30px;
    }
}

/* Photos: rounded on the side away from the page edge */
.entrance__media img,
.specification__photo:first-child img,
.developer__media img {
    border-radius: 0 15px 15px 0;
}

.about__media img,
.specification__photo:last-child img {
    border-radius: 15px 0 0 15px;
}

.entrance__media,
.about__media,
.specification__photo,
.sustainability__media {
    text-align: center;
}

.entrance__media img,
.about__media img,
.specification__photo img,
.sustainability__media img,
.developer__media img,
.developer__logo img,
.rating__stars img,
.site-footer__logo img,
.site-footer__agent-logo img,
.gallery__logo img {
    display: inline-block;
    vertical-align: middle;
}

/* Brochure button */
.button {
    display: inline-flex;
    gap: 22px;
    padding: 15px 20px 15px 30px;
    border: 2px solid var(--navy-deep);
    border-radius: 50px;
    background-color: var(--peach);
    color: var(--navy-deep);
    fill: var(--navy-deep);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s;
}

.button:hover,
.button:focus {
    background-color: var(--coral);
    color: #fff;
    fill: #fff;
}

.button__icon {
    display: flex;
    align-items: center;
}

.button__icon svg {
    width: 1em;
    height: 1em;
}

/* Icon tiles (specification, sustainability): grow on hover */
.feature {
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.feature:hover {
    transform: scale(1.1);
}

.feature__icon {
    flex: 0 0 auto;
    line-height: 0;
}

/* 150px artwork sitting on the text baseline, as Elementor drew uploaded SVG icons */
.feature__glyph {
    display: inline-block;
    font-family: var(--system);
    font-size: 150px;
    line-height: 1;
}

.feature__glyph img {
    width: 1em;
    height: 1em;
    max-width: none;
}

.feature__text {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    color: var(--navy);
}

/* Lists of places and times (location, amenities) */
.times-block__head {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: start;
}

.times-block__icon {
    flex: 0 0 auto;
    line-height: 0;
}

.times-block__glyph {
    display: inline-block;
    font-family: var(--system);
    line-height: 1;
    text-align: center;
    color: var(--icon-color);
    fill: var(--icon-color);
}

.times-block__glyph svg {
    width: 1em;
    height: 1em;
}

.times-block__title {
    flex-grow: 1;
    margin: 8px 0 16px;
    font-family: var(--sans);
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}

/* min-width as live: on tablets the lists are wider than their columns and run into the margin beside them */
.times {
    width: 100%;
    min-width: 200px;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    font-size: 0.9em;
}

.times td {
    padding: 5px;
    border: 0;
    vertical-align: middle;
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    text-align: left;
}

.times td:last-child {
    text-align: right;
}

.times__text {
    position: relative;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .times-block--icon .times-block__head {
        flex-direction: column;
        text-align: center;
    }
}

/* Lottie animations: the box keeps the animation's shape before it loads; the 6px under it is the
 * baseline gap the live page had below the inline SVG */
.lottie-wrap {
    padding-bottom: 6px;
}

.lottie svg {
    display: block;
}

/* 5. Header and menu ----------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    margin-bottom: -110px;
    padding: 0 50px;
    background-color: rgba(var(--mint), 0);
    text-align: center;
    transition: background-color 0.5s ease-in-out;
}

.site-header.is-scrolled {
    background-color: rgba(var(--mint), 0.7);
}

.site-header__row {
    display: flex;
    align-items: center;
    min-height: 80px;
}

.site-header__brand {
    display: flex;
    align-items: center;
    width: 30%;
    text-align: start;
}

.site-header__logo {
    display: inline-block;
    width: min(300px, 100%);
}

.site-header__logo img {
    display: inline-block;
    width: 74%;
    vertical-align: middle;
}

.site-header__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
}

.site-nav {
    display: flex;
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    line-height: normal;
}

.site-nav__list li {
    display: flex;
}

.site-nav__link {
    display: flex;
    flex-grow: 1;
    align-items: center;
    padding: 13px 20px;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--navy);
    text-transform: capitalize;
    white-space: nowrap;
    transition: 0.4s;
}

.site-nav__link:hover,
.site-nav__link:focus {
    color: var(--midnight);
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.25em;
    border: 0 solid;
    border-radius: 0;
    background-color: #ffbdbd;
    color: var(--midnight);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s;
}

.menu-toggle:hover {
    background-color: var(--midnight);
    color: #ffbdbd;
}

.menu-toggle svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open,
.menu-toggle:not([aria-expanded="true"]) .menu-toggle__close {
    display: none;
}

/* Drop-down menu (tablet and phone), full width under the button */
.site-menu {
    display: none;
}

.site-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

.site-menu__list li:not(:last-child) {
    border-bottom: 1px solid rgba(132, 132, 132, 0.15);
}

.site-menu__link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
    border-left: 8px solid transparent;
    background-color: #fff7f1;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #848484;
    text-transform: capitalize;
}

.site-menu__link:hover,
.site-menu__link:focus {
    color: var(--midnight);
}

@media (max-width: 1366px) {
    .site-header__brand {
        width: 21%;
    }
}

@media (max-width: 1024px) {
    .site-header {
        padding: 0 5%;
    }

    .site-header__brand {
        width: 15%;
    }

    .site-header__menu {
        width: 50%;
    }

    .site-nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .site-menu {
        display: block;
        position: absolute;
        top: calc(100% - 5px);
        left: 0;
        right: 0;
        z-index: 9997;
        max-height: 0;
        overflow: hidden;
        background-color: #fff7f1;
        box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1);
        text-align: center;
        transform: scaleY(0);
        transform-origin: top;
        visibility: hidden;
        transition: max-height 0.3s, transform 0.3s, visibility 0s 0.3s;
    }

    .menu-open .site-menu {
        max-height: 100vh;
        transform: scaleY(1);
        visibility: visible;
        transition: max-height 0.3s, transform 0.3s, visibility 0s;
    }
}

@media (max-width: 767px) {
    .site-header {
        margin-bottom: -86px;
        padding: 4% 5% 0;
    }

    .site-header__row {
        min-height: 60px;
    }

    .site-header__brand,
    .site-header__menu {
        width: 50%;
    }

    .site-header__logo img {
        width: 100%;
    }

    .menu-toggle {
        border-width: 2px;
        border-radius: 5px;
    }

    .site-menu {
        top: calc(100% - 1px);
    }
}

/* 6. Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
}

.hero__media,
.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__image {
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.hero__shade {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(178deg, #b9f7f7 13%, rgba(193, 216, 216, 0) 42%);
    opacity: 0.39;
}

.hero__row {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    padding-top: 200px;
}

.hero__inner > * {
    width: 100%;
}

.hero__title {
    margin-bottom: 20px;
    padding: 0 50px;
    font-family: var(--serif);
    font-size: 66px;
    font-weight: 400;
    line-height: 1.1em;
    color: var(--navy);
}

.hero__text {
    margin-bottom: 20px;
    padding: 50px 50px 20px;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1em;
    color: var(--navy);
}

.hero__cta {
    padding: 0 50px 50px;
    text-align: left;
}

@media (max-width: 767px) {
    .hero__inner {
        padding-top: 50px;
    }

    .hero__title {
        padding: 40px 20px 0;
        font-size: 30px;
    }

    .hero__text {
        padding: 20px;
        font-size: 16px;
    }

    .hero__cta {
        padding: 20px;
    }
}

/* 7. Entrance photo, About ----------------------------------------------- */

.entrance {
    background-image: url("../img/site/background-2-2200.webp");
}

.entrance__media {
    padding: 100px 50px 100px 0;
}

.about__title {
    padding: 50px;
}

.about__text {
    --w: 91.29%;
    padding: 0 50px 50px;
}

.about__media {
    margin-top: -50px;
    padding: 0 0 50px 50px;
}

@media (max-width: 767px) {
    .entrance__media {
        padding: 20px 20px 20px 0;
    }

    .about__title {
        padding: 50px 20px 20px;
    }

    .about__text {
        padding: 0 20px 20px;
    }

    .about__media {
        margin-top: 0;
        padding: 0 0 20px 20px;
    }
}

/* 8. Accommodation, Specification ---------------------------------------- */

.accommodation {
    background-color: var(--blush);
}

.accommodation__stack-col,
.accommodation__copy {
    padding: 50px;
}

.accommodation__panel {
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 15px;
    background-color: var(--lilac);
}

.accommodation__panel > .lottie-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lottie--floors {
    width: 98%;
    aspect-ratio: 700 / 1080;
}

.accommodation__title {
    --w: 69.458%;
    padding-bottom: 50px;
}

.accommodation__text {
    padding-bottom: 50px;
}

/* Schedule of areas */
.schedule__table {
    width: 100%;
    min-width: 100px;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.9em;
}

.schedule__table th,
.schedule__table td {
    padding: 10px;
    border: 0;
    border-bottom: 1px solid #e4e4e4;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    vertical-align: middle;
    text-align: center;
    color: var(--ink);
}

.schedule__table th {
    background-color: var(--rose);
    font-weight: 600;
}

.schedule__table td {
    font-weight: 400;
}

.schedule__table tr:last-child td {
    border-bottom: 0;
}

.schedule__table .is-shaded td {
    background-color: var(--rose);
}

.schedule {
    border-bottom: 1px solid #e4e4e4;
}

.schedule__text {
    position: relative;
    vertical-align: middle;
}

/* equal columns on wide screens only (the table widget's own 768px breakpoint) */
@media (max-width: 768px) {
    .schedule__table {
        table-layout: auto;
    }
}

.specification {
    position: relative;
    background-color: var(--lilac);
}

.specification::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/site/background-8-2200.webp") center left / cover;
    opacity: 0.82;
}

.specification__title {
    --w: 94.15%;
    padding: 100px 50px;
}

.specification__text {
    --w: 94.924%;
    padding: 0 50px 50px;
}

.features {
    padding: 0 50px 20px;
}

.specification__text + .features {
    padding-top: 50px;
}

.features:last-child {
    padding-bottom: 100px;
}

.specification__photos {
    align-content: center;
    align-items: center;
    justify-content: center;
    background-color: var(--peach);
}

.specification__photo:first-child {
    padding: 50px 50px 50px 0;
}

.specification__photo:last-child {
    padding: 0 0 50px 50px;
}

@media (max-width: 767px) {
    .accommodation__stack-col,
    .accommodation__copy {
        padding: 20px;
    }

    .accommodation__title {
        --w: min(314.25px, 100%);
        padding-bottom: 20px;
    }

    .specification__title {
        padding: 50px 20px 20px;
    }

    .specification__text {
        padding: 0 20px 20px;
    }

    .features {
        padding: 0 20px 20px;
    }

    .specification__text + .features {
        padding-top: 20px;
    }

    .features:last-child {
        padding-bottom: 50px;
    }

    .specification__photo:first-child {
        padding: 20px 20px 0 0;
    }

    .specification__photo:last-child {
        padding: 0 0 20px 20px;
    }
}

/* 9. Sustainability ------------------------------------------------------ */

.sustainability {
    padding: 100px 50px;
    background: url("../img/site/background-6-2200.webp") center / cover no-repeat;
}

.sustainability__title {
    --w: 62%;
    padding-bottom: 50px;
}

.sustainability__text {
    --w: 94.924%;
}

.sustainability__net-zero {
    padding-top: 20px;
}

.sustainability__media-col > .col__in {
    padding: 0 0 50px 50px;
}

.esg__features,
.esg__ratings {
    padding: 50px;
}

.esg__rule {
    padding: 0 50px;
}

.esg__rule hr {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #000;
}

.rating:not(:last-child) > .col__in {
    border-right: 1px solid var(--navy);
}

/* Live gives the NABERS column a border with no colour of its own (the text colour) */
.rating:nth-child(3) > .col__in {
    border-right-color: #333;
}

.rating__label,
.rating__value {
    --w: 94.924%;
    text-align: center;
    color: var(--navy);
}

.rating__label {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5em;
}

.rating__value {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.5em;
}

.rating__stars {
    text-align: center;
}

.rating__stars img {
    width: 46%;
}

@media (max-width: 767px) {
    .sustainability {
        padding: 20px;
    }

    .sustainability__title {
        --w: min(293.391px, 100%);
        padding: 50px 0 20px;
    }

    .sustainability__media-col > .col__in {
        padding: 0 0 50px;
    }

    .esg__features,
    .esg__ratings,
    .esg__rule {
        padding: 20px;
    }

    .esg__rule hr {
        margin: 15px 0;
    }

    .esg__features .feature {
        text-align: center;
    }

    .rating > .col__in {
        padding: 20px;
    }

    .rating:not(:last-child) > .col__in {
        border-right: 0;
        border-bottom: 1px solid var(--navy);
    }

    .rating:nth-child(3) > .col__in {
        border-bottom-color: #333;
    }
}

/* 10. Gallery ------------------------------------------------------------ */

.gallery {
    padding: 50px 50px 100px;
    background: url("../img/site/background-3-2200.webp") center / cover no-repeat;
}

.gallery__intro {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    padding: 50px 0;
    text-align: center;
}

.gallery__logo {
    width: 100%;
    margin-bottom: 20px;
}

.gallery__logo img {
    width: 300px;
}

.gallery__text {
    width: 55.318%;
    max-width: 55.318%;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: #fff;
}

/* Masonry: plain grid until uxbridge.js places the photos (each into the shortest column) */
.masonry {
    --gap: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    position: relative;
}

.masonry.is-laid-out {
    display: block;
}

.masonry.is-laid-out .masonry__item {
    position: absolute;
}

.masonry__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.masonry__item::before {
    content: "";
    display: block;
    padding-bottom: var(--ratio);
}

.masonry__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center top;
    transition: filter 0.8s, transform 0.8s;
}

html.js .masonry__image:not(.is-shown) {
    filter: opacity(0);
    transform: scale(0.5);
}

.masonry__overlay {
    position: absolute;
    inset: 0;
    transition: background-color 0.8s;
}

.masonry__item:hover .masonry__overlay,
.masonry__item:focus .masonry__overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 1365px) {
    .masonry {
        --gap: 10px;
    }
}

@media (max-width: 1023px) {
    .masonry {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .gallery {
        padding: 20px;
    }

    .gallery__text {
        width: min(299.016px, 100%);
        max-width: min(299.016px, 100%);
        padding-top: 20px;
    }
}

@media (max-width: 766px) {
    .masonry {
        grid-template-columns: 1fr;
    }
}

/* 11. Location ----------------------------------------------------------- */

.location {
    background-color: var(--maroon);
}

.location__intro {
    padding: 100px 50px 0;
}

.location__title {
    --w: 95.877%;
    color: var(--lilac);
}

.location__text {
    --w: 94.924%;
    color: #fff;
}

.location__map {
    padding-bottom: 100px;
    background: url("../img/site/location-grid-1920.webp") center / 76% auto no-repeat;
}

.location__map > .col > .col__in {
    align-content: center;
    align-items: center;
}

.location__side > .col__in {
    padding: 50px;
}

.location__list--spaced {
    padding-top: 20px;
}

.location .times-block__head {
    margin-bottom: 20px;
}

.location .times-block__glyph {
    font-size: 40px;
}

.location .times-block__title {
    font-weight: 600;
}

.lottie-wrap--underground {
    text-align: center;
}

.lottie--underground {
    width: 73%;
    max-width: 91%;
    margin-inline: auto;
    aspect-ratio: 700 / 900;
}

@media (max-width: 767px) {
    .location__intro {
        padding: 50px 20px 20px;
    }

    .location__title {
        padding-bottom: 20px;
    }

    .location__side > .col__in {
        padding: 20px;
    }

    .location__side:first-child > .col__in {
        padding: 21px;
    }

    .lottie-wrap--underground {
        margin: -50px 0;
    }

    .lottie--underground {
        width: 100%;
        max-width: 100%;
    }
}

/* 12. Amenities ---------------------------------------------------------- */

.amenities {
    background-color: var(--terracotta);
}

.amenities__box > .col__in,
.amenities__map > .col__in,
.amenities__photo > .col__in {
    margin: 50px;
    border-radius: 15px;
}

.amenities__box > .col__in {
    background-color: var(--coral);
}

.amenities .times-block__head,
.amenities .times-block__body {
    padding: 10px;
}

.amenities .times-block__head {
    margin-bottom: 20px;
}

/* the live tables are custom-width widgets: no gap before the next list */
.col__in > .amenities__list:not(:last-child) {
    margin-bottom: 0;
}

.amenities .times-block__glyph {
    font-size: 21px;
}

.amenities .times-block--plain .times-block__head {
    text-align: left;
}

.lottie--local {
    aspect-ratio: 1200 / 800;
}

.amenities__photo > .col__in {
    overflow: hidden;
    background-color: #bdb5f2;
}

.amenities__photo-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.amenities__spacer {
    height: 50px;
}

@media (max-width: 767px) {
    .amenities__box > .col__in,
    .amenities__map > .col__in,
    .amenities__photo > .col__in {
        margin: 20px;
    }

    .amenities__spacer {
        height: 250px;
    }
}

/* 13. Developer, "We don't just invest" ---------------------------------- */

.developer {
    background-color: var(--lilac);
}

.developer__media {
    padding: 50px 25px 50px 0;
    text-align: start;
}

.developer__copy-col > .col__in {
    justify-content: flex-end;
    padding: 50px;
}

.developer__title {
    --w: 95.877%;
    text-align: end;
}

.developer__text {
    --w: 71.567%;
    padding-top: 30px;
    text-align: end;
}

.developer__contact > .col > .col__in {
    align-content: center;
    align-items: center;
}

.developer__contact > .col--70 > .col__in {
    padding: 50px;
}

.developer__details {
    --w: 94.924%;
    text-align: end;
}

.developer__logo {
    text-align: end;
}

.developer__logo img {
    width: 50%;
}

.invested {
    padding: 50px;
    background-color: var(--charcoal);
}

.invested > .row > .col > .col__in {
    align-content: center;
    align-items: center;
}

.invested__title {
    --w: 95.877%;
    color: #fff;
}

.invested__text {
    --w: 94.924%;
    padding-top: 30px;
    color: #fff;
}

.invested__figures {
    padding: 30px;
}

.invested__figures .row--boxed > .col > .col__in {
    padding: 10px;
}

.invested__intro {
    --w: 94.924%;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #fff;
}

.stat:not(:last-child) > .col__in {
    border-right: 1px solid #fff;
}

.stat__value,
.stat__label {
    --w: 94.924%;
    text-align: center;
    color: #fff;
}

.stat__value {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.5em;
}

.stat__label {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5em;
}

.closing-bar {
    height: 20px;
    background-color: var(--charcoal);
}

@media (max-width: 767px) {
    .developer__media {
        padding: 20px 20px 20px 0;
    }

    .developer__copy-col > .col__in {
        padding: 20px;
    }

    .developer__title {
        --w: min(427.797px, 100%);
        text-align: start;
    }

    .developer__text {
        --w: min(442px, 100%);
        text-align: start;
    }

    .developer__contact {
        padding-top: 20px;
    }

    .developer__contact > .col--70 > .col__in {
        padding: 0;
    }

    .developer__details {
        text-align: start;
    }

    .invested {
        padding: 50px 20px 20px;
    }

    .invested__figures {
        padding: 20px;
    }

    .invested__intro {
        --w: min(289.797px, 100%);
        text-align: center;
    }

    .invested__figures .row--boxed > .stat > .col__in {
        padding: 20px;
    }

    .stat:not(:last-child) > .col__in {
        border-right: 0;
        border-bottom: 1px solid #fff;
    }
}

/* 14. Footer, back to top ------------------------------------------------ */

.site-footer__main {
    padding: 50px;
    background: url("../img/site/background-7-2200.webp") top right / cover;
}

.site-footer__logo,
.site-footer__agent-logo {
    text-align: start;
}

.site-footer__logo img {
    max-width: 300px;
}

.site-footer__agent-logo img {
    max-width: 200px;
}

.site-footer__rule hr {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #242c64;
}

.site-footer__person {
    --w: 48.422%;
    padding: 50px 0;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
    color: var(--navy);
}

.site-footer__bar {
    padding: 20px 50px;
    background-color: var(--charcoal);
}

.site-footer__disclaimer {
    margin: 0;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 400;
    line-height: 1em;
    color: #fff;
}

.to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--coral);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    color: #fff;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.to-top__icon {
    font-family: var(--system);
    font-size: 23px;
}

.to-top svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
}

@media (max-width: 767px) {
    .site-footer__main {
        padding: 50px 20px 20px;
        background-position: center left;
    }

    .site-footer__bar {
        padding: 20px;
    }
}

/* 15. Lightbox ----------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: rgba(237, 237, 237, 0.9);
    font-family: var(--system);
}

.lightbox[open] {
    animation: ux-fadeIn 0.3s;
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 70px;
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), 0 0 8px -5px rgba(0, 0, 0, 0.3);
    user-select: none;
}

.lightbox__counter {
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0;
    font-size: 15px;
    color: #fff;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    z-index: 2;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(237, 237, 237, 0.9);
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    color: #fff;
}

.lightbox__close {
    top: 13px;
    right: 15px;
    padding: 5px;
    font-size: 20px;
}

.lightbox__nav {
    top: 0;
    align-items: center;
    justify-content: center;
    width: 15%;
    height: 100%;
    font-size: 25px;
}

.lightbox__nav--prev {
    left: 0;
}

.lightbox__nav--next {
    right: 0;
}

.lightbox svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

@media (max-width: 767px) {
    .lightbox__stage {
        padding: 70px 0;
    }

    .lightbox__nav {
        width: 20%;
    }

    .lightbox__nav--prev {
        justify-content: flex-start;
    }

    .lightbox__nav--next {
        justify-content: flex-end;
    }
}

/* 16. Entrance animations, plain pages ------------------------------------
 * Elementor's animations: hidden until on screen, then 1.25s (delays as live). Off for reduced motion. */

html.js [data-reveal] {
    visibility: hidden;
}

html.js [data-reveal].is-visible {
    visibility: visible;
    animation-duration: 1.25s;
    animation-delay: var(--reveal-delay, 0ms);
    animation-fill-mode: backwards;
}

html.js [data-reveal="fade"].is-visible { animation-name: ux-fadeIn; }
html.js [data-reveal="fade-up"].is-visible { animation-name: ux-fadeInUp; }
html.js [data-reveal="fade-down"].is-visible { animation-name: ux-fadeInDown; }
html.js [data-reveal="fade-left"].is-visible { animation-name: ux-fadeInLeft; }
html.js [data-reveal="fade-right"].is-visible { animation-name: ux-fadeInRight; }
html.js [data-reveal="bounce"].is-visible { animation-name: ux-bounceIn; }

@keyframes ux-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ux-fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes ux-fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes ux-fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes ux-fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes ux-bounceIn {
    from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal],
    html.js [data-reveal].is-visible {
        visibility: visible;
        animation: none !important;
    }

    html.js .masonry__image:not(.is-shown) {
        filter: none;
        transform: none;
    }

    .feature,
    .masonry__image,
    .masonry__overlay,
    .site-header,
    .site-menu {
        transition: none;
    }
}

/* Plain pages and the 404 page */
.page-main {
    padding: 150px 50px 100px;
    background-color: var(--blush);
}

.article {
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.5;
    color: var(--navy);
}

.article__title {
    margin-bottom: 30px;
    font-family: var(--serif);
    font-size: 44px;
    line-height: 1.1;
}

.article__content a {
    text-decoration: underline;
}

.article--404 .button {
    margin-top: 10px;
}

@media (max-width: 767px) {
    .page-main {
        padding: 120px 20px 60px;
    }

    .article__title {
        font-size: 30px;
    }
}