/* Completion Brochure V4 palette.
   Defined once here so the section-by-section repalette has a single source of
   truth. The legacy .bg_light / .bg_green values are left alone for now - they
   are shared across four pages and get converted section by section. */
:root {
    --tb-mint: #CFEDCE;         /* primary   - cover, main panels */
    --tb-mint-pale: #E7F2E4;    /* secondary - schedule, floor plan pages */
    --tb-charcoal: #1E2724;     /* dark sections, ESG, contact, body type */
    --tb-mint-bright: #C0EDBE;  /* icon circles on charcoal */
    --tb-near-black: #232226;   /* icon circles on mint */
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--tb-charcoal);
    font-family: 'Celias';
    font-weight: normal;
    font-style: normal;
    line-height: 1.4;
}


html {
    min-height: 100%;
}

.no_scroll {
    overflow: hidden;
}

.load-hidden {
    visibility: hidden;
}

.site-content {
    flex: 1 0 auto;
}

.content-padding {
    padding: 0 1.5rem;
}

@media (min-width: 768px) {
    .content-padding {
        padding: 0 6rem;
    }
}

.footerholder {
    flex-shrink: 0;
    z-index: 1;
    background-color: var(--tb-charcoal);
    color: #fff;
    font-weight: 300;
    font-style: normal;
}

.footerholder a {
    color: #fff;
    text-decoration: none;
}

.footerholder a:hover {
    text-decoration: underline;
}

.fade-content {
    opacity: 0;
}

img {
    min-height: 0.01px;
}

a:hover,
a:focus,
a:visited {
    text-decoration: none;
}

a[href^="mailto:"]:hover {
    text-decoration: underline;
}

.image-fill {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: 100%;
}

.vh-fix {
    height: 100vh;
    height: calc(100vh - var(--vh-offset, 0px));
}

h1 {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 2.8rem;
    padding-bottom: 0;
    font-weight: 500;
    font-style: normal;
    letter-spacing: .01rem;
    border-bottom: .2rem solid #232226;
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
        line-height: 3.4rem;
        letter-spacing: .15rem;
    }
}

h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: normal;
    font-style: normal
}

@media (min-width: 768px) {
    h2 {
        font-size: 2rem;
        line-height: 3rem;
    }
}

h3 {
    font-size: 3rem;
    line-height: 3rem;
}

h4 {
    font-size: 2.375rem;
    line-height: 2.625rem;
}

h5 {
    font-size: 1.75rem;
    line-height: 2rem;
}

p {
    margin-bottom: 2rem;
}

.fullslide:before {
    content: "";
    display: block;
    padding-top: 80%;
}

@media (min-width: 768px) {
    .fullslide:before {
        padding-top: 60%;
    }
}

/* arrows black */
.next_wrapper_loc {
    right: 0;
    top: 0;
    width: 3.5rem;
    height: 2.5rem;
    margin-top: -3.5rem;
    z-index: 10;
}

@media (min-width: 768px) {
    .next_wrapper_loc {
        margin-top: -5rem;
    }
}

.next_wrapper_plan {
    right: 0;
    top: 0;
    width: 3.5rem;
    height: 2.5rem;
    margin-top: -3rem;
    z-index: 10;
}

.next_wrapper {
    right: 2rem;
    width: 3.5rem;
    height: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -3rem;
    z-index: 10;
}

@media (min-width: 768px) {
    .next_wrapper {
        right: 8rem;
    }
}

.next {
    padding-right: 2.5rem;
    height: 2rem;
    background-image: url('../img/right_black.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    transition: padding .5s ease-in-out;
    cursor: pointer;
}

.next:hover {
    padding-right: 3.5rem;
}

.prev_wrapper_loc {
    left: 0;
    width: 3.5rem;
    height: 2rem;
    top: 0;
    margin-top: -3.5rem;
    z-index: 10;
}

@media (min-width: 768px) {
    .prev_wrapper_loc {
        margin-top: -5rem;
    }
}

.prev_wrapper_plan {
    left: 0;
    width: 3.5rem;
    height: 2rem;
    top: 0;
    margin-top: -3rem;
    z-index: 10;
}

.prev_wrapper {
    left: 1rem;
    width: 3.5rem;
    height: 2rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -3rem;
    z-index: 10;
}

@media (min-width: 768px) {
    .prev_wrapper {
        left: 7rem;
    }
}

.prev {
    right: 0;
    padding-left: 2.5rem;
    height: 2rem;
    background-image: url('../img/left_black.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    transition: padding .5s ease-in-out;
    cursor: pointer;
}

.prev:hover {
    padding-left: 3.5rem;
}

/* arrows black */

/* arrows white */

.next_wrapper_wt {
    right: 1rem;
    width: 3.5rem;
    height: 2.5rem;
    bottom: 1rem;
    z-index: 10;
}

@media (min-width: 768px) {
    .next_wrapper_wt {
        right: 3rem;
        bottom: 4rem;
    }
}

.next_wt {
    padding-right: 2.5rem;
    height: 2rem;
    background-image: url('../img/right_white.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    transition: padding .5s ease-in-out;
    cursor: pointer;
}

.next_wt:hover {
    padding-right: 3.5rem;
}

.prev_wrapper_wt {
    left: 1rem;
    width: 3.5rem;
    height: 2rem;
    bottom: 1rem;
    z-index: 10;
}

@media (min-width: 768px) {
    .prev_wrapper_wt {
        left: 3rem;
        bottom: 4rem;
    }
}

.prev_wt {
    right: 0;
    padding-left: 2.5rem;
    height: 2rem;
    background-image: url('../img/left_white.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    transition: padding .5s ease-in-out;
    cursor: pointer;
}

.prev_wt:hover {
    padding-left: 3.5rem;
}

/* arrows white */


.sct_title {
    letter-spacing: .1rem;
}

.lg_body {
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .lg_body {
        font-size: 1.2rem;
    }
}

.xl_body {
    font-size: 1.2rem;
}

.xxl_body {
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .xl_body {
        font-size: 1.5rem;
    }

    .xxl_body {
        font-size: 1.7rem;
    }
}

.icons {
    width: 8rem;
}

@media (min-width: 768px) {
    .icons {
        width: 10rem;
    }
}

.div_text {
    margin-top: -4rem;
}

.bg_green {
    background-color: #E0F6DF;
}

.bg_light {
    background-color: #F8F8F3;
}

.bg_mint {
    background-color: var(--tb-mint);
}

.bg_mint_pale {
    background-color: var(--tb-mint-pale);
}

.bg_charcoal {
    background-color: var(--tb-charcoal);
    color: #fff;
}

/* On charcoal the heading rule and the download button both need inverting -
   h1 carries a near-black border-bottom, and .download is a white chip whose
   mint hover would otherwise vanish against the section. */
.bg_charcoal h1 {
    border-bottom-color: #fff;
}

.bg_charcoal .download {
    background-color: var(--tb-mint-bright);
}

.bg_charcoal .download:hover {
    background-color: #fff;
}

/* The black arrow glyphs disappear on charcoal - swap in the white variants
   the site already ships for its dark carousels. */
.bg_charcoal .prev {
    background-image: url('../img/left_white.svg');
}

.bg_charcoal .next {
    background-image: url('../img/right_white.svg');
}

.base_image_wrapper:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.base_wrapper .base_image_wrapper {
    transition: transform 0.5s;
    z-index: 2;
}

@media (min-width: 768px) {
    .base_wrapper:hover .base_image_wrapper {
        transform: translateY(-3rem);
    }
}


.base_wrapper .base_image_wrapper img {
    transition: transform 0.5s;
}

.base_wrapper:hover .base_image_wrapper img {
    transform: scale(1.2);
}

.base_links a {
    color: #232226;
    text-decoration: none !important;
}

.base_wrapper .right_arrow {
    width: 1.8rem;
}

.gallery_divider {
    width: 4rem;
}

.gallery_image {
    height: 90vw;
    cursor: pointer;
}

@media (min-width: 768px) {
    .gallery_image {
        height: 32rem;
    }
}

.gallery_left,
.gallery_right {
    width: 50%;
    transition: width 0.5s;
}

.gallery_right.shrink,
.gallery_left.shrink {
    width: 35%;
}

.gallery_right.expand,
.gallery_left.expand {
    width: 65%;
}

.gallery_overlay {
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
}

.gallery_overlay img {
    width: 4rem;
}

.gallery_image .gallery_overlay {
    transition: opacity 0.5s;
}

.gallery_image:hover .gallery_overlay {
    opacity: 1;
    transition: opacity 0.5s;
}

.main_gallery {
    visibility: hidden;
    opacity: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    transition: opacity 500ms linear, visibility 0s linear 500ms;
}

.main_gallery.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 500ms linear, visibility 0s linear;
}

.close_gallery {
    top: 2rem;
    right: 2rem;
    width: 2.5rem;
    cursor: pointer;
    z-index: 100;
}

svg .trans {
    fill-opacity: 0;
    cursor: pointer;
    transition: all 0.3s;
}

svg .hover {
    fill-opacity: 1;
    transition: all 0.5s;
}

.plan_title {
    font-size: 1.2rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .plan_title {
        font-size: 1.5rem;
    }
}

.plan_table .d-table-cell {
    padding: .2rem 0;
}

.key_wrapper {
    font-size: .95rem;
    text-wrap: nowrap;
}

.key {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    /* 1px stroke on every swatch. box-sizing is border-box globally, so the
       circle stays 1rem and the fill insets. Needed most by the palest swatches
       (.key15 #d4e2d2) which would otherwise vanish against .bg_mint_pale. */
    border: 1px solid var(--tb-near-black);
}

.key1 {
    background-color: #E3C073;
}

.key2 {
    background-color: #A2C5B0;
}

/* .key3 (private terrace for office A) retired - the new 6th floor
   artwork has a single terrace colour and no such area. */

.key4 {
    background-color: #EEECDF;
}

.key5 {
    background-color: #D3E6D1;
}

.key6 {
    background-color: #B2A8CC;
}

.key7 {
    background-color: #A6B99A;
}

.key8 {
    background-color: #EED9AB;
}

.key9 {
    background-color: #BDC4CE;
}

.key10 {
    background-color: #D89385;
}

.key11 {
    background-color: #B4BCAC;
}

.key12 {
    background-color: #BAB48B;
}

.key13 {
    background-color: #EED9AB;
}

.key14 {
    background-color: #BDD3E0;
}

/* Accessible WC. Supplied by the client 28 Sept; note the ground floor plan
   artwork does not yet contain this colour - the WC room is still transparent,
   so this swatch currently has nothing to point at. See G2. */
.key15 {
    background-color: #d4e2d2;
}

/* North point, bottom-right of each floor plan. Every live plan PNG has a fully
   transparent bottom-right quadrant (measured), so the arrow never covers drawing.
   Fixed 40px - deliberately not rem, which would scale with the 1vw root on desktop. */
/* Selector must out-specify Owl's own ".owl-carousel .owl-item img{width:100%}"
   (0,2,1), which otherwise stretches this to the full column width. */
.owl-carousel .owl-item img.plan_north,
.plan_north {
    width: 40px;
    right: 16px;
    bottom: 16px;
}

/* Accommodation schedule.
   Rebuilt from img/space/stacker_revised.svg, whose figures were outlined vector
   paths and therefore uneditable. The elevation half of that SVG survives as
   img/space/elevation.svg; this table replaces the left half. Row fills and the
   .3 -> .8 hover are carried over from the SVG's own inline styles so the
   appearance is unchanged. */
.accom_table {
    border-collapse: collapse;
    font-size: .95rem;
}

.accom_table th {
    font-weight: normal;
    text-align: left;
    padding: 0 .6rem .6rem 0;
    letter-spacing: .02rem;
}

.accom_table td {
    padding: .55rem .6rem;
    border-bottom: 1px dotted #9a9a94;
}

.accom_table tbody td:first-child {
    padding-left: 0;
}

/* Leader lines. In the original artwork each row's dotted rule carried on across
   the gap to meet the elevation, tying the row to its floor band. The gap is the
   offset-md-1 column plus both gutters, which works out at exactly 5vw at this
   breakpoint (measured: 80px at a 1600px viewport), so it tracks the layout
   instead of being a fixed guess. */
@media (min-width: 768px) {
    .accom_table thead tr,
    .accom_table tbody tr {
        position: relative;
    }

    .accom_table thead tr::after,
    .accom_table tbody tr::after {
        content: "";
        position: absolute;
        left: 100%;
        bottom: 0;
        width: 5vw;
        border-bottom: 1px dotted #9a9a94;
    }
}

/* Ground and Lower Ground read as a single block, so the rule between them and
   its leader across to the elevation both come off. */
.accom_table tbody tr.ground1 td {
    border-bottom: 0;
}

/* Office A and Terrace are two rows of ONE floor, so their divide belongs inside
   the table only - the elevation has no matching division to lead across to.
   Same for Ground/Lower Ground, which read as a single block. */
@media (min-width: 768px) {
    .accom_table tbody tr.sixth2::after,
    .accom_table tbody tr.ground1::after {
        display: none;
    }
}

/* The header needs its own rule - the original has a dotted line directly under
   the column titles, above the first row. */
.accom_table thead th {
    border-bottom: 1px dotted #9a9a94;
}

/* The tinted band starts at the Use column, leaving the floor label outside it,
   exactly as the original artwork did. */
.accom_table .fill {
    position: relative;
}

.accom_table .fill:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .3;
    transition: opacity .3s;
    z-index: -1;
}

.accom_table tr.active .fill:before {
    opacity: .8;
}

.accom_table .fill_catap:before { background-color: #F2E5C9; }
.accom_table .fill_cata:before  { background-color: #D5EAD2; }
.accom_table .fill_terr:before  { background-color: #A3C6B1; }
.accom_table .fill_recep:before { background-color: #B3A8CC; }
.accom_table .fill_eoj:before   { background-color: #D99386; }

.accom_table tbody tr {
    cursor: pointer;
}

.accom_total td {
    border-bottom: 0;
    border-top: 1px solid #232226;
    padding-top: .6rem;
}

@media (max-width: 767px) {
    .accom_table {
        font-size: .8rem;
    }
    .accom_table td,
    .accom_table th {
        padding: .4rem .3rem;
    }
}

/* Line the schedule rows up with the elevation's floor bands.
   Percentages are the band heights measured out of elevation.svg's 537-unit
   viewBox. The 6th floor is one band but two rows (office + terrace), so that
   band is split in half. Desktop only - on mobile the elevation is hidden and
   the table sizes itself. */
@media (min-width: 768px) {
    #tb_elevation {
        display: block;
        width: 100%;
        height: auto;
    }

    .stacker_row {
        align-items: stretch;
    }

    .accom_table {
        height: 100%;
    }

    .accom_table thead tr { height: 12.96%; }
    .accom_table tfoot tr { height: 6.55%; }
    .accom_table tbody tr.sixth2 { height: 5.92%; }
    .accom_table tbody tr.sixth1 { height: 6.07%; }
    .accom_table tbody tr.fifth1 { height: 8%; }
    .accom_table tbody tr.fourth1 { height: 8%; }
    .accom_table tbody tr.third1 { height: 8%; }
    .accom_table tbody tr.second1 { height: 8%; }
    .accom_table tbody tr.first1 { height: 8%; }
    .accom_table tbody tr.ground1 { height: 7.5%; }
    .accom_table tbody tr.lground1 { height: 2.5%; }
}

/* The schedule is now shown on phones too. Five columns will not fit 390px, and
   without this the table widens the whole document and pushes the page heading
   off screen. Scroll the table, not the page. */
.accom_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    /* Below 768px none of the col-md-* classes apply, so every column in this
       section is a bare flex item that sizes to its content - which lets the
       table widen the whole page and push the heading off screen. min-width:0
       is what stops a flex item refusing to shrink below its content. Both
       nesting levels need it. */
    #accommodation .row > div {
        width: 100%;
        min-width: 0;
    }

    .accom_scroll .accom_table {
        min-width: 30rem;
    }
}

@media (min-width: 768px) {
    .accom_scroll {
        overflow-x: visible;
        height: 100%;
    }
}

/* Shown only when Google Maps fails to authenticate (see gm_authFailure in
   location.php). Better than leaving a watermarked, undraggable grey map. */
.map_failed {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--tb-mint);
}

.map_fallback {
    color: #232226;
    text-decoration: underline;
    text-align: center;
    padding: 2rem;
}

.top_bg {
    /* Brochure paper texture, retinted to the brand mint and with its shadow
       tail lifted out - the original scan dipped to luminance 203, which read
       as dirty patches on screen. Mean sits exactly on #CFEDCE and the grain
       keeps the brochure's own standard deviation (~2/255), so it reads as
       paper rather than a flat fill. Low-frequency, so a 1280px file scales
       up under `cover` with no visible loss. */
    background-image: url('../img/bg_mint_texture.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #CFEDCE;
}

#location_carousel .owl-stage-outer {
    overflow: visible !important;
}

#location_carousel .loc_slide img {
    height: 66vw;
    width: auto;
}

.iframe_holder {
    height: 0;
    padding-bottom: 70%;
}

@media (min-width: 768px) {
    .iframe_holder {
        height: 0;
        padding-bottom: 50%;
    }
}

@media (min-width: 768px) {
    /* Capped. All six local-area shots are thumbnail-grade brochure extracts
       (680-1191px wide, 763-858px tall). Uncapped, 36vw keeps growing with the
       viewport and every one of them is upscaled above roughly a 2120px window. */
    #location_carousel .loc_slide img {
        height: min(36vw, 700px);
    }
}

.m_key {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.m_key1 {
    background-color: #FBB197;
}

.m_key2 {
    background-color: #95D4EB;
}

.m_key3 {
    background-color: #A5D395;
}

.m_key4 {
    background-color: #9983C4;
}

.agent01 {
    width: 11rem;

}

.agent02 {
    width: 12rem;

}

.developer {
    width: 15rem;
}

/* DalesCo sits below Consortia in the "A development by" credit. Its artwork is
   much squarer than the Consortia wordmark (3.7:1 vs 8.9:1), so it is not matched
   to Consortia's 15rem width - that would make it tower over it. */
.dalesco {
    display: block;
    width: 10.5rem;
    height: auto;
    margin-top: 2.25rem;
}

/* Only right-align it where .text-md-end actually takes effect. The class sits
   on the element at every width - only its text-align is media-scoped - so an
   unconditional margin-left:auto pushed DalesCo right on mobile while Consortia
   stayed left. */
@media (min-width: 768px) {
    .text-md-end .dalesco {
        margin-left: auto;
    }
}

.footer_logo {
    width: 4rem;
}

.background_underlay {
    min-height: 100% !important;
    /* Charcoal counterpart to the mint texture - same brochure paper grain,
       retinted. Softlight bites harder on a dark base, so the amplitude is
       lower (+/-15% vs +/-25%) to land on a comparable standard deviation. */
    background-image: url('../img/bg_charcoal_texture.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.letter-spacing-1 {
    letter-spacing: .1rem;
}

.white_divider {
    background-color: #fff;
    height: 1px;
    width: 100%;
}

body.contact a {
    color: #fff;
    text-decoration: none;
}

body.contact a:hover {
    text-decoration: underline;
}

.disclaimer {
    font-size: .8rem;
}

.justify {
    text-align: justify;
}

.download {
    padding: 1rem .8rem;
    background-color: #fff;
    color: #000 !important;
    transition: all .5s ease-in-out;
}

.download:hover {
    background-color: #fff;
    text-decoration: none !important;
    background-color: #E0F6DF;
}

.download .arrow {
    width: 1rem !important;
    height: 1rem;
    background-image: url('../img/right_black.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    transition: width .5s ease-in-out;
}

.download:hover .arrow {
    width: 2rem !important;
    height: 1rem;
}

.download div:first-child {
    width: 60%;
}

.download div:nth-child(2) {
    width: 28%;
}

.download div:nth-child(3) {
    width: 12%;
}

@media (min-width: 768px) {
    html {
        font-size: 1vw;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

@media (min-width: 1400px) {}


@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Light.woff2') format('woff2'),
        url('../fonts/Celias-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

.celias_lt {
    font-family: 'Celias';
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Regular.woff2') format('woff2'),
        url('../fonts/Celias-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Medium.woff2') format('woff2'),
        url('../fonts/Celias-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

.celias_md {
    font-family: 'Celias';
    font-weight: 500;
    font-style: normal;
}