/* ── Visby CF font-face (served from media library) ─────────────────────── */
@font-face {
    font-family: "Visby CF";
    src: url("../fonts/VisbyCF-Light.woff2") format("woff2"),
         url("../fonts/VisbyCF-Light.woff") format("woff");
    font-weight: 300; font-style: normal;
}
@font-face {
    font-family: "Visby CF";
    src: url("../fonts/VisbyCF-Regular.woff2") format("woff2"),
         url("../fonts/VisbyCF-Regular.woff") format("woff");
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: "Visby CF";
    src: url("../fonts/VisbyCF-Medium.woff2") format("woff2"),
         url("../fonts/VisbyCF-Medium.woff") format("woff");
    font-weight: 500; font-style: normal;
}
@font-face {
    font-family: "Visby CF";
    src: url("../fonts/VisbyCF-Bold.woff2") format("woff2"),
         url("../fonts/VisbyCF-Bold.woff") format("woff");
    font-weight: 700; font-style: normal;
}
@font-face {
    font-family: "Visby CF Demi";
    src: url("../fonts/VisbyCF-DemiBold.woff2") format("woff2"),
         url("../fonts/VisbyCF-DemiBold.woff") format("woff");
    font-weight: 600; font-style: normal;
}

/* ── Override all fonts to Visby CF (blocks Rubik and any WP defaults) ───── */
body, p, a, li, td, th, span, div, input, textarea, select, button {
    font-family: "Visby CF", sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.title-h1, .title-h2, .title-h3,
[class*="title-"] {
    font-family: "Visby CF Demi", sans-serif !important;
}

/* WordPress core resets */
html { margin-top: 0 !important; overflow-y: scroll !important; }
#wpadminbar { display: none !important; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; border: none; }

/* ── Gold bar full width ───────────────────────────────────────────────────── */
.Footer-top { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; color: #fff !important; }
.Footer-top a, .Footer-top span, .Footer-top p { color: #fff !important; }
.Footer-top .container { max-width: 1190px !important; }

/* ── SVG icon fixes ────────────────────────────────────────────────────────── */
.icon-accordeon { background-image: url("../images/accordeon-plus.svg") !important; }
.accordeon-item.opened .icon-accordeon { background-image: url("../images/accordeon-minus.svg") !important; }
.Slider-list .slick-arrow::before { background: url("../images/icon_arrow-thin.svg") no-repeat center / contain !important; }
.video-box_play { background-image: url("../images/play-btn.svg") !important; }

/* ── Footer link icons ─────────────────────────────────────────────────────── */
.link-icon i { display: inline-block !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
.icon-world     { background-image: url("../images/icon_world.svg") !important; margin-left: 0 !important; }
.icon-telegram  { background-image: url("../images/icon_telegram.svg") !important; }
.icon-megaphone { background-image: url("../images/icon_megaphone.svg") !important; }
.footer-socials a { display: inline-block !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; margin: 10px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
.social-ig { background-image: url("../images/icon_instagram.svg") !important; }
.social-fb { background-image: url("../images/icon_facebook.svg") !important; }
.social-in { background-image: url("../images/icon_linkedin.svg") !important; }

/* Apartments floor plan — NO !important so JS inline can override */
.plan-box-unit-even { background: url("../images/even-a9.png")  100% center / contain no-repeat; }
.plan-box-unit-odd  { background: url("../images/odd-a2.png")   100% center / contain no-repeat; }
.plan-box-unit-17   { background: url("../images/17-a2.png")    100% center / contain no-repeat; }

/* ── Services: AWOL logo overlay on image ─────────────────────────────────── */
.awol-logo-img::before { background: var(--awol-overlay, url("../images/awol_logo.svg")) 50% center / contain no-repeat !important; }

/* Accordion open/close */
.accordeon-item_body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.accordeon-item.opened .accordeon-item_body { max-height: 2000px !important; }
.accordeon-item.opened iframe { opacity: 1 !important; }

.text p { margin: 0 0 1em; }

/* ── Scroll-to arrow — always visible, fixed to viewport bottom-right ──── */
.Home-fixed-arrow {
    background: url("../images/arrow-down-circle.svg") 100% center / contain no-repeat !important;
}
body .Home-fixed-arrow, body.animated .Home-fixed-arrow { opacity: 1 !important; display: block !important; }
body.animated .Hero-home, body.animated .Home-main, body.animated .Home-fixed { opacity: 1 !important; }
.Home-fixed .Home-fixed-arrow { opacity: 1 !important; }

/* ── Hero-nav right:0 (neighbourhood) ─────────────────────────────────────── */
.Hero-nav { right: 0 !important; }

/* ── Map legend: icons rendered as <img> from media library ────────────── */
/* ::before no longer used — icon comes from ACF leg_icon image field        */
.Map .Map-legend-item { display: flex; align-items: center; gap: 10px; }
.Map .Map-legend-item .legend-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.Map .Map-legend-item span::before { display: none !important; background: none !important; }
.Map .Map-legend-item span { padding-left: 0 !important; }

/* ── About page: carousel arrow SVGs and directions ───────────────────────── */
.slider-control-next,
.slider-control-prev {
    background-image: url("../images/black-arrow-down.svg") !important;
}
/* prev (top arrow) points UP — rotate the down-pointing SVG 180° */
.slider-control-prev { transform: rotate(180deg) !important; }
/* next (bottom arrow) points DOWN — no rotation needed */
.slider-control-next { transform: none !important; }

/* ── About page: Prime-location section text colour ──────────────────────── */
.Prime-location .text p {
    color: #3d3d3d !important;
}

/* ── About page: Image-section-bg grey left-bleed fix ────────────────────── */
.Image-section-bg .container::before { left: auto !important; right: -120px !important; width: 170% !important; height: 100% !important; z-index: 0 !important; }
.Image-section-bg .container { position: relative; }
.Image-section-bg .container img { position: relative; z-index: 1; }

/* ── About page: partial-width grey on all Prime-location sections ────────── */
.Prime-location { overflow: hidden; }
.Prime-location .container::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: -120px !important;
    width: 170% !important;
    height: 100% !important;
    background: #ebebeb !important;
    z-index: -1;
}
/* About page: prime_location grey extends to bottom of about-img (3374px) */
#prime_location .container::before { height: 1636px !important; }
/* Elegant residences & below: no grey box */
#elegant .container::before,
#building .container::before { display: none !important; }
/* Elegant residences & Building design: 30px top padding */
#elegant .container { padding-top: 30px !important; }
#building .container { padding-top: 30px !important; }

/* ── About page: cap has-gray-bg ::before to prevent footer bleed ─────────── */

/* ── About page: captcha SVG currentColor fix ─────────────────────────────── */
.Contact span.captcha-image { color: #ffffff !important; }
.Contact span.captcha-image svg { color: #ffffff !important; fill: #ffffff !important; }
.Contact span.captcha-image svg path { fill: currentColor !important; }

/* ── About page: "For sales enquiries?" heading inside panel ──────────────── */
.Contact .wpcf7::before {
    content: "For sales enquiries?";
    display: block;
    font-size: 50px;
    line-height: 60px;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 400;
    letter-spacing: 0.5px;
}
.Contact .wpcf7::before {
    font-size: 50px !important;
    line-height: 60px !important;
    margin-bottom: 25px !important;
}
body.page-template-template-rental .Contact .wpcf7::before {
    content: "For rental enquiries?" !important;
}

/* ── Legal Notices: reduce hero to ~30% of original height ───────────────── */
.Hero-legal { height: 30vh !important; min-height: 200px; }
.Hero-legal .Hero-inner_img {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── Legal Notices: content styles ───────────────────────────────────────── */
.Legal-text { padding: 50px 0; }
.Legal-text .container { max-width: 1090px !important; }
.Legal-text h2 { font-size: 24px; padding: 20px 0 10px; margin: 0; }
.Legal-text h3 { font-size: 18px; padding: 10px 0 5px; margin: 0; }
.Legal-text p { margin: 0 0 1em; line-height: 1.6; }
.Legal-text table { width: 100%; border-collapse: collapse; padding: 10px; margin: 20px 0; }
.Legal-text tr { border: 1px solid #212324; }
.Legal-text td { border: 1px solid #212324; padding: 10px; vertical-align: top; }

/* ── Fix: Close X button ─────────────────────────────────────────────────── */
.Contact .close-contact {
    background-image: url("../images/icon_close.svg") !important;
    background-color: rgba(150,150,150,0.3) !important;
    border-radius: 50% !important;
    width: 28px !important; height: 28px !important;
    cursor: pointer !important;
}

/* ── Fix: intl-tel-input flag sprite ─────────────────────────────────────── */
.iti__flag {
    background-image: url("../images/flags.png") !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../images/flags@2x.png") !important;
    }
}

/* ── Fix: "Book a viewing now" vertical tab — white text ─────────────────── */
.Home-fixed-btn, .Inner-fixed .show_contact, .Home-fixed .show_contact {
    color: #fff !important;
}

/* ── CF7 Contact Form — match existing OWP panel styling ──────────────────── */
.Contact .wpcf7 { width: 100%; }
.Contact .wpcf7-form { display: flex; flex-direction: column; gap: 0; }

/* Text / email / tel inputs */
.Contact .wpcf7-form input[type="text"],
.Contact .wpcf7-form input[type="email"],
.Contact .wpcf7-form input[type="tel"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    padding: 15px 0 10px;
    outline: none;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    margin-bottom: 5px;
}
.Contact .wpcf7-form input::placeholder { color: rgba(255,255,255,0.5); }
.Contact .wpcf7-form input[type="text"]:focus,
.Contact .wpcf7-form input[type="email"]:focus,
.Contact .wpcf7-form input[type="tel"]:focus {
    border-bottom-color: #c9a96e;
}

/* Radio buttons — vertical list, correct colour */
.Contact .wpcf7-radio:not(.captcha-image) { display: flex; flex-direction: column; gap: 7px; margin: 20px 0 0; }
.Contact .wpcf7-radio:not(.captcha-image) .wpcf7-list-item { display: block !important; margin: 0 !important; }
.Contact .wpcf7-radio:not(.captcha-image) .wpcf7-list-item label { color: rgba(255,255,255,0.7) !important; }
.Contact .wpcf7-radio:not(.captcha-image) .wpcf7-list-item-label { color: rgba(255,255,255,0.7) !important; }
.Contact .wpcf7-radio .wpcf7-list-item { margin: 0; }
.Contact .wpcf7-radio .wpcf7-list-item label {
    display: flex !important; align-items: center !important; gap: 8px !important;
    color: rgba(255,255,255,0.7) !important; font-size: 13px !important; cursor: pointer !important;
    letter-spacing: 0.5px !important; text-transform: uppercase !important;
}
.Contact .wpcf7-radio input[type="radio"] {
    width: 16px; height: 16px; accent-color: #c9a96e; flex-shrink: 0;
}

/* Acceptance checkbox */
.Contact .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.Contact .wpcf7-acceptance .wpcf7-list-item label {
    display: flex; align-items: flex-start; gap: 10px;
    color: rgba(255,255,255,0.6); font-size: 12px; line-height: 1.4;
}
.Contact .wpcf7-acceptance input[type="checkbox"] {
    width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0;
    accent-color: #c9a96e;
}

/* Image captcha */
.Contact .cf7ic_wrap > div,
.Contact [class*="cf7ic"] > div { background: transparent !important; border: 1px solid rgba(255,255,255,0.2) !important; }
.Contact .wpcf7-radio.captcha-image { display: flex; gap: 20px; flex-wrap: wrap; }
.Contact .wpcf7-radio.captcha-image .wpcf7-list-item { margin: 0; }
.Contact .wpcf7-radio.captcha-image .wpcf7-list-item label {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.25); border-radius: 4px;
    cursor: pointer; transition: border-color 0.2s; color: rgba(255,255,255,0.7);
    font-size: 11px; text-transform: none; letter-spacing: 0;
}
.Contact .wpcf7-radio.captcha-image .wpcf7-list-item:has(input:checked) label { border-color: #c9a96e !important; background: rgba(201,169,110,0.1); }
.Contact .wpcf7-radio.captcha-image input[type="radio"] { display: none; }
.Contact .wpcf7-radio.captcha-image svg { width: 36px; height: 36px; fill: #fff; color: #fff; }
.Contact .cf7ic_instructions { color: rgba(255,255,255,0.8) !important; font-size: 13px !important; margin-bottom: 10px !important; display: block; }
.Contact .cf7ic_instructions b, .Contact .cf7ic_instructions strong { color: #c9a96e !important; }

/* Submit button */
.Contact .wpcf7-submit {
    background: #c9a96e; color: #fff; border: none;
    padding: 14px 40px; font-family: inherit;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; margin-top: 20px !important; align-self: flex-start;
    transition: background 0.2s;
}
.Contact .wpcf7-submit:hover { background: #b8952e; }

/* Validation */
.Contact .wpcf7-not-valid-tip { color: #e06c6c; font-size: 11px; margin-top: 3px; display: block; }
.Contact .wpcf7-response-output { color: #fff; font-size: 13px; margin-top: 10px; padding: 10px; border: 1px solid rgba(255,255,255,0.3); }
.Contact .wpcf7-mail-sent-ok { border-color: #c9a96e !important; color: #c9a96e !important; }
.Contact .wpcf7-mail-sent-ng, .Contact .wpcf7-validation-errors { border-color: #e06c6c !important; color: #e06c6c !important; }
.Contact .wpcf7-spinner { display: none; }
.Contact .screen-reader-response { display: none; }
.Contact .wpcf7-form p { margin: 0; }
.Contact .wpcf7-form br { display: none; }

/* CF7 field spacing — match original .input-field (20px above) */
.Contact .wpcf7-form .wpcf7-form-control-wrap {
    display: block; margin: 20px 0 0; padding-top: 7px; position: relative;
}
.Contact .wpcf7-form .wpcf7-form-control-wrap:has(.iti) { margin-top: 20px; }
.Contact .wpcf7-form .wpcf7-form-control-wrap:first-of-type { margin-top: 7px; }
.Contact .wpcf7-acceptance { margin: 20px 0 0; }
.Contact .cf7ic_wrap, .Contact [class*="cf7ic_wrap"] { margin-top: 20px; }

/* ── About page: counter fields ───────────────────────────────────────────── */
.Counter-section .row { position: relative; z-index: 10; }
.Counter-section .container { padding: 140px 0; position: relative; }
/* ── Option 3: Metric-matched fallback fonts ─────────────────────────────── */
/* Creates local Arial aliases tuned to match Visby CF metrics exactly.       */
/* During font-display:swap period, fallback looks almost identical to Visby  */

/* Regular (400) — Arial is 5.24% narrower than Visby CF, so scale up 105.24% */


/* Medium (500) */


/* Light (300) */


/* Bold (700) */


/* Demi Bold (600) — Arial Bold is already a perfect width match */


/* ── Fix: reduce Home-fixed/Inner-fixed fade-in delay and cover Inner-fixed ─ */
/* dist.css uses transition: 0.7s ease-out 0.5s (0.5s delay = too slow)       */
/* Override to 0.4s with no delay, and ensure Inner-fixed is included          */
.Home-fixed, .Inner-fixed {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
}
body.animated .Home-fixed,
body.animated .Inner-fixed {
    opacity: 1 !important;
    transform: translate(0px) !important;
}
/* ── Prevent bold synthesis on headings using Visby CF Demi ─────────────── */
/* Browsers apply fw:700 to h1-h3 by default; Visby CF Demi is only at 600  */
/* so the browser adds synthetic bold on top. Force fw:400 to stop this.     */
h1, h2, h3, h4,
.title-h1, .title-h2 {
    font-weight: 500 !important;
}
/* ── Services: reduce gap above AWOL bottom image to ~1/3 original ─────── */
body .Awol-about.text-box-section { padding-bottom: 33px !important; }
.Awol-rental.text-box-section { margin-top: 0 !important; }
.Awol-rental .img-box { margin-top: 0 !important; }
/* ── Neighbourhood: single map image replaces slider ────────────────────── */
.map-single-image { width: 100%; }
.map-single-image img { width: 100%; height: auto; display: block; }



/* ── Neighbourhood: video section ────────────────────────────────────────── */
.video-section .video-box { position: relative; cursor: pointer; display: inline-block; width: 100%; }
.video-section .video-box img { width: 100%; height: auto; display: block; }
.video-section .video-box_play {
    background: url("../images/play-btn.svg") center / contain no-repeat;
    width: 80px; height: 80px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ── Neighbourhood: Education section — right-column grey only ──────────── */
/* Left edge aligns with the standard container left (connectivity black box) */
.Education { padding-top: 60px; }
.Education.text-box-section { padding-bottom: 0 !important; }
/* ::before on col-40p disabled; use container with correct left offset */
.Education .col-40p::before { display: none !important; }
.Education .container { position: relative; }
.Education .container::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: -60px !important;
    left: -504px !important;    /* aligns grey left edge with connectivity black box left (129px from viewport) */
    width: 1871px !important;   /* right edge at 2000px from left (2000 - 129 left offset) */
    height: 801px !important;
    background: #ebebeb !important;
    z-index: 0;
    border-left: 8px solid #fff !important;
}
.Education .row,
.Education .col-50p,
.Education .col-40p { position: relative; z-index: 1; }
/* Slider overhangs into the grey area */
.Info-slider { margin-top: 50px; }
.Info-slider .container { position: relative; }

/* ── Homepage: soaring elevations text — move up 60px ───────────────────── */
.video-section .wrapper.bg-gray { margin-top: -60px; }

/* ── Neighbourhood: video section — spacing ──────────────────────────────── */
/* Zero out text-box-section padding so section is image height + small gap */
.video-section.text-box-section { padding: 80px 0 80px !important; }
.video-section .video-box {
    display: block !important;
    position: relative !important;
    line-height: 0;
}
.video-section .video-box img {
    display: block;
    width: 100%;
    height: auto;
}
/* Eye/play button — centred over image, relative to video-box */
.video-section .video-box a {
    display: block;
    position: relative;
    line-height: 0;
}
.video-section .video-box_play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80px !important;
    height: 80px !important;
    pointer-events: none;
    margin: 0 !important;
}
/* ── Homepage: home-about section — push soaring text clear of image above ─ */
.home-about {
    padding-top: 340px !important;  /* was 200px + 140px gap */
    margin-top: -200px !important;  /* keep overlap with hero unchanged */
}
/* ── Topbar text white (high specificity to beat body rule) ─────────────── */
html body .topbar,
html body .topbar a,
html body .topbar span,
html body .topbar p,
html body .topbar div { color: #fff !important; }

/* ── Rental page accordion — width matches iframe section, 30% gap ──────── */
.pb-50px { padding-bottom: 50px !important; }
/* Reduce Block-d-revo bottom padding to 30% of 100px = 30px */
.Block-d-revo.text-box-section { padding-bottom: 30px !important; }
/* Accordion section: minimal top padding */
.text-box-section.pb-50px { padding-top: 0 !important; }
/* Widen container to match Block-d-revo's 1280px container */
.text-box-section.pb-50px .container { max-width: 1280px !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ── Video play icon — height auto so top:50% centres correctly ─────────── */
.video-section .video-box,
.video-section .video-box a { height: auto !important; }

html body .video-section .video-box,
html body .video-section .video-box a { height: auto !important; }

/* ── Force sidebar visible ────────────────────────────────────────────────── */
html body .Home-fixed,
html body .Inner-fixed { opacity: 1 !important; transform: translateX(0) !important; }

/* ── Mobile: inner page hero images — fixed 360px height matching homepage ── */
@media (max-width: 768px) {
    /* Match the 360px the homepage slider already uses at mobile */
    .Image-section img {
        height: 360px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    /* Neighbourhood uses CSS background-image (no img) — give section same height */
    .page-template-template-neighbourhood .Image-section {
        min-height: 360px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ── Mobile: neighbourhood nav — 2 items per row with dividing line ─────── */
@media (max-width: 768px) {
    .Hero-nav ul { flex-wrap: wrap !important; }
    .Hero-nav ul li {
        width: 50% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    /* Dividing line + spacing between the two rows */
    .Hero-nav ul li:nth-child(1),
    .Hero-nav ul li:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,0.4) !important;
        padding-bottom: 18px !important;
    }
    .Hero-nav ul li:nth-child(3),
    .Hero-nav ul li:nth-child(4) {
        padding-top: 18px !important;
    }
}

/* ── Mobile: hide about page slider vertical arrows ──────────────────────── */
@media (max-width: 768px) {
    .slider-control-prev,
    .slider-control-next,
    .Slider-carousel_control { display: none !important; }
}

/* ── Mobile: apartments floor plan — stack vertically, selector above image ─ */
@media (max-width: 768px) {
    /* Stack vertically */
    .plan-box { flex-direction: column !important; }

    /* Selector always on top */
    .plan-box-plan {
        order: 1 !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Flat layout always below — override dist.css position:absolute at 992px */
    .plan-box-img {
        order: 2 !important;
        width: 100% !important;
        position: relative !important; /* relative not static — keeps it in flow AND stops overlap */
        opacity: 1 !important;
        height: auto !important;
        min-height: 280px !important;
        margin-top: 20px !important;   /* gap between selector and layout graphic */
        z-index: 1 !important;
    }
    /* Keep showed state working on mobile too */
    .plan-box-img.showed {
        position: relative !important;
        opacity: 1 !important;
    }
    /* Flat layout image fills width */
    .plan-box-img img {
        width: 100% !important;
        height: auto !important;
    }
    /* Units list full width */
    .plan-box-units {
        width: 100% !important;
        min-height: 200px !important;
    }
    /* Wrapper expands to contain the now-visible layout graphic */
    .plan-box_wrapper { overflow: visible !important; position: relative !important; }
}

/* ── Mobile burger menu — push below header (dist.css sets top:60px, header is 123px) */
@media (max-width: 992px) {
    .Menu { top: 123px !important; }
}

/* ── Rental accordion section — clear separation from revo overview image ─────── */
.text-box-section.pb-50px { padding-top: 30px !important; }