/* ==========================================================================
   Dark Mode Override
   Loaded last so it wins the cascade. Forces dark backgrounds + white text
   site-wide while preserving the gold accent (#a08900).
   ========================================================================== */

/* ---- Gambarino (English headings) ------------------------------------ */
@font-face {
    font-family: 'Gambarino';
    src: url('../fonts/gam/Gambarino-Regular.woff2') format('woff2'),
         url('../fonts/gam/Gambarino-Regular.woff') format('woff'),
         url('../fonts/gam/Gambarino-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Use Gambarino for all English headings */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] .arko-about-title,
html[lang="en"] .full-nav-word,
html[lang="en"] .arko-watermark,
html[lang="en"] .blog-title h4,
html[lang="en"] .title-one h3 {
    font-family: 'Gambarino', serif !important;
    font-weight: 400 !important;
    color: #c9c5be !important;
}

:root {
    --dark-bg: #0b0f10;
    --dark-surface: #14191b;
    --dark-surface-2: #1c2224;
    --dark-border: rgba(255, 255, 255, 0.12);
    --dark-text: #c9c5be;
    --dark-text-muted: rgba(201, 197, 190, 0.65);
    --accent: #a08900;
}

/* ---- Base ------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}
/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
html,
body {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* ---- Scrollbar (themed) ----------------------------------------------- */
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #c9c5be var(--dark-bg);
}
/* WebKit / Chromium (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--dark-bg);
}
::-webkit-scrollbar-thumb {
    background: #c9c5be;
    border-radius: 0;
    /* Inset the thumb so the track shows as a gutter around it. */
    border: 3px solid var(--dark-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: #b8b4ac;
}
::-webkit-scrollbar-corner {
    background: var(--dark-bg);
}

/* Global text colour. Keep accent + button/whatsapp/brand colours intact. */
body,
p, span, li, a, label, small, strong, em, blockquote, figcaption,
h1, h2, h3, h4, h5, h6,
.title, .subtitle,
th, td, dt, dd,
.nav-link, .dropdown-item,
.footer-title, .footer-nav-link a,
.modal-title, .modal-body, .modal-header {
    color: var(--dark-text);
}

/* Preloader flash */
#preloader {
    background: var(--dark-bg) !important;
}
#preloader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 2px solid rgba(201, 197, 190, 0.2);
    border-top-color: var(--dark-text);
    border-radius: 50%;
    animation: preloader-spin 0.8s linear infinite;
}
@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}

/* ---- Light backgrounds -> dark surfaces -------------------------------- */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:#FFFFFF"],
[style*="background: #FFFFFF"] {
    background: var(--dark-surface) !important;
}

/* Common Bootstrap / theme utility backgrounds */
.bg-white,
.bg-light,
.white-bg,
section,
.section,
.block-feature-two,
.main-page-wrapper {
    background-color: transparent;
    /* Use `clip` (not `hidden`) so full-bleed sections are still clipped
       horizontally WITHOUT turning the wrapper into a scroll container —
       which would break `position: sticky` on the hero reveal effect. */
    overflow-x: clip;
}

/* ---- Cards & surfaces -------------------------------------------------- */
.card,
.modal-content,
.dropdown-menu,
.accordion-item,
.accordion-button,
.list-group-item,
.offcanvas,
.toast,
.popover,
.tooltip-inner {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--dark-surface-2) !important;
    color: var(--accent) !important;
}

/* ---- Header / nav ----------------------------------------------------- */
.theme-main-menu,
.theme-main-menu.fixed,
.theme-main-menu .navbar-collapse {
    background-color: var(--dark-bg) !important;
}

.theme-main-menu .nav-item .nav-link,
.theme-main-menu.white-vr .nav-item .nav-link {
    color: var(--dark-text) !important;
}

.theme-main-menu .nav-item:hover .nav-link,
.theme-main-menu .nav-item .nav-link:hover,
.theme-main-menu.white-vr .nav-item:hover .nav-link {
    color: var(--accent) !important;
}

.navbar-toggler span,
.navbar-toggler span::before,
.navbar-toggler span::after {
    background-color: var(--dark-text) !important;
}

/* ---- Footer ----------------------------------------------------------- */
.footer-three,
.footer-three .bg-wrapper {
    background-color: var(--dark-bg) !important;
}
/* Sit above the sticky project hero (z-index:0) so it never shows through
   the footer at the bottom of the page. */
.footer-three {
    position: relative;
    z-index: 1;
}

.footer-three,
.footer-three a,
.footer-title,
.footer-nav-link a,
.bottom-footer,
.bottom-footer a,
.bottom-nav a,
.footer-three .bottom-footer .bottom-nav a:hover {
    color: var(--dark-text) !important;
    text-decoration: none !important;
}

.footer-three a {
    transition: opacity 0.25s ease;
}

.footer-nav-link a:hover,
.bottom-nav a:hover,
.footer-three a:hover {
    color: var(--dark-text) !important;
    opacity: 0.5;
    transition: opacity 0.25s ease;
}

/* ---- Forms & inputs --------------------------------------------------- */
input,
textarea,
select,
.type-input,
.form-control,
.form-select,
.nice-select {
    background-color: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

input::placeholder,
textarea::placeholder,
.type-input::placeholder {
    color: var(--dark-text-muted) !important;
}

.input-box-two .label,
.input-box .label,
label {
    color: var(--dark-text) !important;
}

/* nice-select dropdown list */
.nice-select .list,
.nice-select .option {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
}
.nice-select .option.selected {
    background-color: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
    font-weight: 600;
}

/* intl-tel-input dropdown */
.iti__dropdown-content,
.iti__country-list,
.iti__country {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: var(--dark-surface-2) !important;
}

/* ---- Contact form: underline-only inputs (match the search overlay) --- */
/* Kill the imported white card wrappers so the form sits on the dark page. */
.lead-form .bg-wrapper,
.lead-form .bg-dot,
.lead-form form.bg-white {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Uppercase muted label, like .full-search-eyebrow */
.lead-form .input-box-two .label {
    display: block;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dark-text-muted) !important;
    margin-bottom: 12px;
}

/* Text/tel inputs -> transparent with a single bottom rule */
.lead-form .type-input,
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"] {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dark-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
    padding: 10px 0 !important;
    height: auto !important;
    font-size: 18px;
    transition: border-color 0.25s ease;
}
.lead-form .type-input::placeholder,
.lead-form input::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.7;
}
.lead-form .type-input:focus,
.lead-form input:focus {
    border-bottom-color: var(--dark-text) !important;
    outline: none;
}

/* nice-select dropdowns -> same underline treatment */
.lead-form .nice-select {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dark-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
    height: auto !important;
    line-height: 1.6 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 18px;
    color: var(--dark-text) !important;
}
.lead-form .nice-select:after {
    right: 4px;
}
.lead-form .nice-select .list {
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 0 !important;
}

/* Email Us / Call Us — full-width solid buttons above the contact form,
   same look as .view-button. */
.contact-action-btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    background: #c9c5be;
    font-size: 15px;
    font-weight: 600;
    color: #111111 !important;
    text-decoration: none;
    transition: background 0.25s ease;
}
.contact-action-btn span { color: #111111 !important; }
.contact-action-btn:hover { background: #b8b4ac; }

/* Contact form uses .color-dark for the email/phone links, their icons, and
   the Terms link — dark-on-dark. Force them to the light text colour. */
.lead-form .color-dark,
.lead-form .color-dark i,
.lead-form a.color-dark {
    color: var(--dark-text) !important;
}
.lead-form a.color-dark:hover {
    opacity: 0.7;
}

/* ---- Projects listing filter dropdowns (.pf-dropdown) ------------------ */
/* Match the contact-page underline aesthetic: transparent trigger with a
   single bottom rule, and a dark-surface popover list. */
.listing-header-filter .short-filter {
    align-items: flex-end;
}
.listing-header-filter .pf-dropdown-btn {
    border: 0 !important;
    border-bottom: 1px solid var(--dark-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--dark-text) !important;
    padding: 8px 24px 10px 0 !important;
    min-width: 130px;
    font-size: 17px;
    justify-content: space-between;
    transition: border-color 0.25s ease;
}
.listing-header-filter .pf-dropdown-btn:hover {
    border-bottom-color: var(--dark-text) !important;
}
.listing-header-filter .pf-caret {
    opacity: 0.7;
    color: var(--dark-text);
}

/* Popover list -> dark surface, square, matching the nice-select list */
.listing-header-filter .pf-dropdown-list {
    background: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    padding: 6px 0 !important;
}
.listing-header-filter .pf-dropdown-list li {
    color: var(--dark-text) !important;
    padding: 10px 18px !important;
}
.listing-header-filter .pf-dropdown-list li:hover {
    background: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
}
.listing-header-filter .pf-dropdown-list li.pf-active {
    background: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
    font-weight: 600;
}
.listing-header-filter .filter-divider {
    display: none;
}

/* No-results fallback: reuse the home CTA card, with a little breathing room */
.latest-projects .no-results-cta {
    margin-top: 20px;
}

/* Search field in the filter bar — same underline look as the dropdowns */
.listing-header-filter .pf-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--dark-border);
    padding: 8px 0 10px;
    min-width: 200px;
    transition: border-color 0.25s ease;
}
.listing-header-filter .pf-search:focus-within {
    border-bottom-color: var(--dark-text);
}
.listing-header-filter .pf-search-icon {
    flex-shrink: 0;
    color: var(--dark-text-muted);
}
.listing-header-filter .pf-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    color: var(--dark-text) !important;
    font-size: 17px;
    padding: 0 !important;
    height: auto !important;
}
.listing-header-filter .pf-search-input::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.7;
}

/* Contact form success message — dark panel with a light accent bar + tick,
   matching the theme instead of the imported bright-green pill. */
.lead-success {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dark-surface-2);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--dark-text);
    border-radius: 0;
    padding: 16px 20px;
}
.lead-success-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dark-text);
    color: #111;
}
.lead-success-text {
    color: var(--dark-text) !important;
    font-size: 16px;
    line-height: 1.5;
}

/* ---- Tables ----------------------------------------------------------- */
table,
.table {
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--dark-text) !important;
    border-bottom-color: var(--dark-border) !important;
}

/* ---- Borders / dividers ----------------------------------------------- */
hr {
    border-color: var(--dark-border) !important;
    background-color: var(--dark-border) !important;
}

/* ---- Close button (make visible on dark) ------------------------------ */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Buttons ---------------------------------------------------------- */
/* Square corners on all button families site-wide (no border radius). */
.view-button,
.btn-one, .btn-two, .btn-three, .btn-four, .btn-five,
.btn-six, .btn-seven, .btn-eight, .btn-nine, .btn-ten,
.view-button.sm, .view-button.md,
button.btn, .btn,
input[type="submit"], input[type="button"], button[type="submit"] {
    border-radius: 0 !important;
}

/* Global button — matches the CTA button geometry, but LIGHT (beige fill,
   dark text). Same padding / font / square corners as .home-cta-btn. */
.view-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #c9c5be !important;
    color: #111111 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 15px 30px !important;
    min-width: 190px !important;
    text-align: center;
    transition: background 0.25s ease, color 0.25s ease !important;
}

.view-button span,
.view-button i {
    color: #111111 !important;
    line-height: 1 !important;
}

.view-button:hover,
.view-button:focus {
    background: #b8b4ac !important;
    color: #000000 !important;
    opacity: 1;
}

.view-button:hover span,
.view-button:focus span,
.view-button:hover i,
.view-button:focus i {
    color: #000000 !important;
}

/* Size variants collapse to the same size — every .view-button matches the
   CTA button geometry (15px/30px, 15px font) exactly. */
.view-button.sm,
.view-button.md {
    padding: 15px 30px !important;
    font-size: 15px !important;
}

/* Ghost variant: transparent with a beige hairline + text, fills on hover.
   Used as the secondary "Get Directions" action beside the solid CTA. */
.view-button--ghost {
    background: transparent !important;
    color: #c9c5be !important;
    border: 1px solid var(--dark-border) !important;
}
.view-button--ghost span { color: #c9c5be !important; }
.view-button--ghost:hover,
.view-button--ghost:focus {
    background: #c9c5be !important;
    color: #111111 !important;
}
.view-button--ghost:hover span,
.view-button--ghost:focus span { color: #111111 !important; }
.view-button--ghost:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ---- White-filled buttons/tags need dark text ------------------------- */
/* The primary gold (#a08900) was globally swapped to white; any element
   that was a gold FILL with white text is now white-on-white. Restore
   contrast by forcing dark text on those button/tag families. */
.btn-one,
.btn-two,
.btn-four.inverse,
.btn-six,
.btn-nine,
.listing-card-one .img-gallery .tag,
.listing-card-seven .img-gallery .tag,
.pagination-pill:hover,
.listing-type-filter ul li a:hover,
.listing-type-filter ul li a.active {
    background: #c9c5be !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

.btn-one span,
.btn-two span,
.btn-six span,
.btn-nine span {
    color: #111111 !important;
}

/* Stat counters: the "+" is bare text inside .main-count.color-dark, which
   keeps its dark color on the dark bg and becomes invisible. Force the whole
   count (number + "+") to the light text colour. */
.main-count,
.main-count .counter,
.counter-block-one .main-count.color-dark {
    color: var(--dark-text) !important;
}

/* ---- "About View Projects" stats block dividers ----------------------- */
/* The counter/stats rows use black borders (invisible on dark). Make the
   divider lines a subtle gray so they read on the dark background. */
.block-feature-two .block-two .counter-wrapper,
.block-feature-eight .counter-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.block-feature-two .block-two .bg-wrapper .top-line {
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ---- Preserve intentional accent / brand text ------------------------- */
.text-accent,
.color-primary {
    color: #ffffff;
}

/* ==========================================================================
   Arko Hero (homepage)
   Imported design: rounded gradient card, giant watermark, centered image,
   and a bottom bar (About column + large copy). Adapted for the View site.
   ========================================================================== */
.arko-hero {
    position: relative;
    width: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #191713 0%, #2e2a24 30%, #322d27 45%, #211e1b 62%, #14120f 80%, #0e0d0c 100%);
}
/* Subtle dither to kill gradient banding (the faint mid-line). */
.arko-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* Arabic watermark ("رؤية") uses the Arabic heading font (PointSans),
   matching the Arabic h1–h6 treatment. English uses Gambarino (above). */
html[lang="ar"] .arko-watermark {
    font-family: 'PointSans', sans-serif;
    top: 100px;
}

.arko-watermark {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 230px;
    font-weight: 700;
    letter-spacing: 40px;
    color: #c9c5be;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.arko-hero .arko-house-img {
    max-width: 900px;
    width: 50%;
    /* Fade the bottom of the building into the dark background */
    -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}

.arko-bottom-bar {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, #0b0f10 40%);
    padding-top: 60px;
}

/* Divider between the About title column and the copy — match the
   subtle section lines instead of the whitish Bootstrap default. */
.arko-bottom-bar .border-start,
.arko-about-section .border-start,
.about-hero-v .border-start,
.about-split .border-start {
    border-color: var(--dark-border) !important;
}

/* Standalone About section (below the feature hero). */
.arko-about-section {
    padding-top: 120px;
}
@media (max-width: 991px) {
    .arko-about-section { padding-top: 80px; }
}

.arko-eyebrow {
    color: #9a968f;
    font-size: 14px;
    letter-spacing: 1px;
}

.arko-about-title {
    color: #fff !important;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.15;
}

/* Arabic uses the base heading font (Gambarino is English-only) — same as
   the section headings below (.lp-heading). Match its size/color too. */
html[lang="ar"] .arko-about-title {
    font-size: 34px;
    font-weight: 500;
    color: #c9c5be !important;
}

.arko-desc {
    color: #8b8781 !important;
    font-size: 15px;
    line-height: 1.6;
    max-width: 340px;
}

.arko-copy {
    color: #c9c5be !important;
    font-size: 22px;
    line-height: 1.55;
    font-weight: 400;
    text-align: left;
    /* max-width: 640px; */
}

/* Arabic: the About copy reads right-to-left. */
[dir="rtl"] .arko-copy {
    text-align: right;
}

.arko-copy .accent {
    color: #fff !important;
    font-weight: 600;
}

/* Responsive: shrink the watermark and copy on smaller screens */
@media (max-width: 991px) {
    .arko-watermark { font-size: 120px; top: 70px; }
    .arko-bottom-bar { padding-top: 70px; }
    .arko-about-title { font-size: 30px; }
    .arko-copy { font-size: 20px; }
    .arko-hero .arko-house-img { width: 82%; }
}

@media (max-width: 575px) {
    .arko-watermark { font-size: 70px; top: 60px; letter-spacing: 5px; }
    .arko-copy { font-size: 18px; }
}

/* ==========================================================================
   Circular Nav Toggle + Full-Page Overlay Navigation
   Circle button top-right; opens a full-screen menu whose links fade/rise in
   with the same staggered word-animate feel used on the homepage.
   ========================================================================== */

/* Fixed brand logo (top-left) */
/* Fixed top scrim behind the logo/toggles — fades in on scroll. */
.header-scrim {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 170px;
    z-index: 10000;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(11, 15, 16, 0.55) 0%,
        rgba(11, 15, 16, 0.35) 45%,
        rgba(11, 15, 16, 0) 100%);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    /* Fade the blur out toward the bottom so there's no hard cut-off edge. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
body.is-scrolled .header-scrim {
    opacity: 1;
}
/* Hide the scrim while the full-page overlay is open (it has its own bg). */
body.nav-open .header-scrim {
    opacity: 0;
}

.site-logo-fixed {
    position: fixed;
    top: 26px;
    inset-inline-start: 34px;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.site-logo-fixed img {
    height: 56px;
    width: auto;
}

/* Hide the fixed logo while the full-page nav overlay is open. */
body.nav-open .site-logo-fixed {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Circle toggle button (top-right) — light by default */
.nav-circle-toggle {
    position: fixed;
    top: 24px;
    inset-inline-end: 34px;
    z-index: 10002;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #c9c5be;
    background: #c9c5be;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.nav-circle-toggle:hover {
    background: #b8b4ac;
    border-color: #b8b4ac;
    transform: scale(1.05);
}

/* Hamburger -> X lines (dark on the light circle) */
.nav-circle-lines {
    position: relative;
    width: 22px;
    height: 14px;
    display: block;
}
.nav-circle-lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #111;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease, top 0.3s ease;
}
.nav-circle-lines span:nth-child(1) { top: 0; }
.nav-circle-lines span:nth-child(2) { top: 12px; }
.nav-circle-toggle:hover .nav-circle-lines span { background: #111; }

.nav-circle-toggle.is-open {
    background: #c9c5be;
    border-color: #c9c5be;
}
.nav-circle-toggle.is-open .nav-circle-lines span { background: #111; }
.nav-circle-toggle.is-open .nav-circle-lines span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}
.nav-circle-toggle.is-open .nav-circle-lines span:nth-child(2) {
    top: 6px;
    transform: rotate(-45deg);
}

/* Search circle toggle — sits to the left of the menu toggle */
.search-circle-toggle {
    inset-inline-end: 106px;
}
.search-circle-toggle .search-circle-icon {
    color: #111;
    transition: color 0.3s ease;
}
.search-circle-toggle:hover .search-circle-icon,
.search-circle-toggle.is-open .search-circle-icon {
    color: #111;
}

/* Full-page search overlay (mirrors the nav overlay) */
.full-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: linear-gradient(180deg, #0e1113 0%, #0b0f10 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.full-search-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s ease, visibility 0s;
}
.full-search-inner {
    width: 100%;
    max-width: 1000px;
    padding: 0 40px;
}
.full-search-eyebrow {
    display: block;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    margin-bottom: 22px;
}
.full-search-field {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Underline only (no surrounding box) */
    border: 0;
    border-bottom: 1px solid var(--dark-border);
    background: transparent;
    padding: 6px 6px 14px 0;
    /* Slide/fade the field in when the overlay opens */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.full-search-overlay.open .full-search-field {
    opacity: 1;
    transform: translateY(0);
}
.full-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    color: var(--dark-text);
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 400;
    height: auto;
    line-height: 1.3;
    padding: 12px 0;
}
html[lang="en"] .full-search-input {
    font-family: 'Gambarino', serif;
}
.full-search-input::placeholder {
    color: var(--dark-text-muted);
    font-size: inherit;
    opacity: 0.7;
}
.full-search-field .full-search-submit {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid #c9c5be !important;
    background: #c9c5be !important;
    color: #111 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.full-search-field .full-search-submit:hover {
    background: #b8b4ac !important;
    border-color: #b8b4ac !important;
    color: #000 !important;
}
.full-search-field .full-search-submit svg {
    width: 22px;
    height: 22px;
}

/* Suggestions under the search field */
.full-search-suggestions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    /* Fade/rise in slightly after the field */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.28s, transform 0.5s ease 0.28s;
}
.full-search-overlay.open .full-search-suggestions {
    opacity: 1;
    transform: translateY(0);
}
.full-search-suggest-label {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    margin-inline-end: 4px;
}
.full-search-suggest-item {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: 1px solid var(--dark-border);
    border-radius: 0;
    color: var(--dark-text);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.full-search-suggest-item:hover {
    background: #c9c5be;
    border-color: #c9c5be;
    color: #111;
}

/* Full-page overlay */
.full-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: linear-gradient(180deg, #0e1113 0%, #0b0f10 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.full-nav-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s ease, visibility 0s;
}

.full-nav-inner {
    width: 100%;
    max-width: 1100px;
    padding: 120px 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Nav links */
.full-nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.full-nav-links li {
    overflow: hidden;
}
.full-nav-word {
    display: inline-flex;
    align-items: center;
    font-size: clamp(38px, 7vw, 84px);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff !important;
    text-decoration: none;
    letter-spacing: -0.5px;
    /* staggered reveal (matches .word-animate feel) */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.55s ease, transform 0.55s ease, color 0.25s ease;
}
/* Line that reveals beside the link on hover */
.full-nav-word::before {
    content: "";
    width: 0;
    height: 2px;
    margin-inline-end: 0;
    background: currentColor;
    opacity: 0;
    transition: width 0.4s ease, margin-inline-end 0.4s ease, opacity 0.4s ease;
}
.full-nav-word:hover::before {
    width: clamp(30px, 4vw, 56px);
    margin-inline-end: 22px;
    opacity: 1;
}
/* Arabic: overlay nav words use the Arabic heading font (PointSans),
   matching the site's Arabic h1–h6. English uses Gambarino (above). */
[dir="rtl"] .full-nav-word {
    font-family: 'PointSans', sans-serif;
    color: #c9c5be !important;
}
.full-nav-word:hover {
    color: #c9c5be !important;
}
.full-nav-overlay.open .full-nav-word {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger each link on open */
.full-nav-overlay.open .full-nav-links li:nth-child(1) .full-nav-word { transition-delay: 0.10s; }
.full-nav-overlay.open .full-nav-links li:nth-child(2) .full-nav-word { transition-delay: 0.16s; }
.full-nav-overlay.open .full-nav-links li:nth-child(3) .full-nav-word { transition-delay: 0.22s; }
.full-nav-overlay.open .full-nav-links li:nth-child(4) .full-nav-word { transition-delay: 0.28s; }
.full-nav-overlay.open .full-nav-links li:nth-child(5) .full-nav-word { transition-delay: 0.34s; }

/* Footer row: CTA + locale */
.full-nav-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.42s, transform 0.5s ease 0.42s;
}
.full-nav-overlay.open .full-nav-footer {
    opacity: 1;
    transform: translateY(0);
}
.full-nav-cta {
    text-transform: uppercase;
}
.full-nav-locale {
    display: flex;
    align-items: center;
    gap: 10px;
}
.full-nav-locale form { margin: 0; }
.full-nav-locale button {
    background: transparent !important;
    border: 0 !important;
    padding: 0;
    color: rgba(201, 197, 190, 0.55) !important;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.25s ease;
}
.full-nav-locale button:hover,
.full-nav-locale button.active {
    color: #c9c5be !important;
}
.full-nav-locale button:disabled {
    cursor: default;
    pointer-events: none;
}
.full-nav-locale .sep { color: rgba(201, 197, 190, 0.3); }

@media (max-width: 575px) {
    .site-logo-fixed { top: 20px; inset-inline-start: 20px; }
    .site-logo-fixed img { height: 44px; }
    .nav-circle-toggle { top: 18px; inset-inline-end: 20px; width: 52px; height: 52px; }
    .search-circle-toggle { inset-inline-end: 84px; }
    .full-nav-inner { padding: 100px 26px 40px; gap: 28px; }
    .full-search-inner { padding: 0 26px; }
}

/* ==========================================================================
   Latest Projects section
   Imported "Latest Project" layout, adapted to dark + real project data:
   header row (intro + hero image) then a grid of project cards
   (image + name left / city right).
   ========================================================================== */

/* Top row: intro text (1fr) + hero project image (1.7fr) */
.latest-projects .lp-top-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 64px;
    align-items: stretch;
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 32px;
}

.latest-projects .lp-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* Section index label, e.g. [02]. Used across index sections. */
.lp-eyebrow {
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--dark-text-muted);
    margin-bottom: 16px;
}
.latest-projects .lp-heading {
    font-size: 34px;
    margin: 0;
    color: #c9c5be !important;
}
.latest-projects .lp-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark-text-muted);
    max-width: 320px;
    margin: 32px 0 0;
}

/* Shared media (image) wrapper */
.latest-projects .lp-media {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: var(--dark-surface-2);
}
.latest-projects .lp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.latest-projects .lp-media-hero { height: 460px; }
.latest-projects .lp-bottom-grid .lp-media { height: 420px; }

/* Zoom on hover */
.latest-projects a:hover .lp-media img { transform: scale(1.04); }

/* Bottom row: two-up grid of project cards */
.latest-projects .lp-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}
.latest-projects .lp-item { text-decoration: none; display: block; }
.latest-projects .lp-item .lp-caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 20px;
}

/* Caption text */
.latest-projects .lp-name {
    font-size: 19px;
    font-weight: 600;
    color: #c9c5be;
}
.latest-projects .lp-city {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    white-space: nowrap;
}

/* About page: section header row (title + right-aligned sub), then the same
   lp grid widened to 3-up. */
.about-projects .lp-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 32px;
}
.about-projects .lp-section-head .lp-desc { margin: 0; }
/* Other-projects (single project page): heading left, "show more" top-right. */
.other-projects .lp-section-head { align-items: center; }
.other-projects .lp-section-head .view-button { flex-shrink: 0; }
.about-projects .lp-bottom-grid {
    grid-template-columns: repeat(3, 1fr);
}
.about-projects .lp-bottom-grid .lp-media { height: 320px; }
@media (max-width: 991px) {
    .about-projects .lp-section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .about-projects .lp-bottom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .about-projects .lp-bottom-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Careers page
   Same language as the homepage: [02] eyebrow + heading with right-aligned
   sub copy, then a filterable list of job rows separated by the thin dark
   border (title + meta on the left, "view position" + arrow on the right).
   ========================================================================== */
.careers-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 32px;
    margin-bottom: 32px;
}
.careers-heading {
    font-size: 34px;
    margin: 0;
    color: #c9c5be !important;
}
.careers-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark-text-muted);
    max-width: 320px;
    margin: 0;
}
.careers-list .isotop-item { width: 100%; }
.career-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--dark-border);
    text-decoration: none;
}
.career-row-title {
    margin: 0 0 8px;
    font-size: 26px;
    color: #c9c5be;
}
.career-row-meta {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--dark-text-muted);
}
.career-row-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    transition: color 0.25s ease;
}
.career-row-cta svg { flex-shrink: 0; transition: transform 0.25s ease; }
.career-row:hover .career-row-cta { color: #c9c5be; }
.career-row:hover .career-row-cta svg { transform: translateX(6px); }
[dir="rtl"] .career-row-cta svg { transform: scaleX(-1); }
[dir="rtl"] .career-row:hover .career-row-cta svg { transform: scaleX(-1) translateX(6px); }

.careers-empty {
    text-align: center;
    padding: 80px 20px;
    border: 1px dashed var(--dark-border);
}
.careers-empty p {
    margin: 0;
    font-size: 16px;
    color: var(--dark-text-muted);
}

@media (max-width: 991px) {
    .careers-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 767px) {
    .career-row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 0; }
    .career-row-title { font-size: 22px; }
}
[dir="rtl"] .career-row { text-align: right; }
[dir="rtl"] .careers-empty { text-align: center; }

/* Career detail page — single centered column: back link, Gambarino title,
   facts row (label/value pairs between hairlines), description, then the
   application form in the contact-page style. */
.career-post-inner {
    max-width: 760px;
    margin: 0 auto;
}
.career-back {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.25s ease;
}
.career-back:hover { color: #c9c5be; }
.career-post-title {
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 36px;
    color: #c9c5be !important;
}
.career-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 56px;
    margin: 0 0 48px;
    padding: 24px 0;
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
}
.career-facts li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.career-facts .cf-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
}
.career-facts .cf-value {
    font-size: 16px;
    color: #c9c5be;
}
.career-post .post-data { font-size: 17px; line-height: 1.8; }
.career-post .post-data h1,
.career-post .post-data h2,
.career-post .post-data h3,
.career-post .post-data h4 { margin-top: 1.6em; margin-bottom: 0.6em; }
.career-post .post-data ul,
.career-post .post-data ol { padding-inline-start: 1.4em; }
.career-post .post-data p { margin-bottom: 1.1em; }

/* Application form under the description — no card chrome, just a hairline. */
.career-apply {
    border-top: 1px solid var(--dark-border);
    margin-top: 64px;
    padding-top: 48px;
}
@media (max-width: 767px) {
    .career-post-title { font-size: 32px; }
    .career-facts { gap: 16px 32px; }
    .career-apply { margin-top: 48px; padding-top: 36px; }
}
/* Match the underline inputs: transparent, bottom hairline only. The picker
   "button" is plain text — no background, no border — like a link. */
.career-cv-file {
    display: block;
    width: 100%;
    font-size: 18px;
    color: var(--dark-text-muted);
    padding: 10px 0;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dark-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 58px;
    cursor: pointer;
    transition: border-color 0.25s ease;
}
.career-cv-file:hover { border-bottom-color: var(--dark-text) !important; }
.career-cv-file::file-selector-button {
    font-size: 18px;
    line-height: inherit;
    color: var(--dark-text);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    margin-inline-end: 14px;
    cursor: pointer;
}
.career-cv-hint {
    font-size: 11px;
    color: var(--dark-text-muted);
    line-height: 1.4;
    margin-top: 12px !important;
}

/* ==========================================================================
   About page hero
   Same language as the homepage: [01] eyebrow + Gambarino title on the left,
   copy on the right, then a full-bleed image whose bottom fades into the
   page background (same treatment as the hero slides).
   ========================================================================== */
.about-hero-v .about-hero-media {
    margin-top: 56px;
    height: 540px;
    overflow: hidden;
}
.about-hero-v .about-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
@media (max-width: 991px) {
    .about-hero-v .about-hero-media { height: 400px; margin-top: 40px; }
}
@media (max-width: 575px) {
    .about-hero-v .about-hero-media { height: 280px; margin-top: 28px; }
}

/* Projects index page: standalone full-width hero (no intro column) + the
   rest of the current page laid out beneath it, reusing the same lp-* look. */
.latest-projects .lp-hero-full {
    display: block;
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 32px;
}
.latest-projects .lp-hero-full .lp-media-hero { height: 560px; }
/* On the listing page the grid can breathe wider (3-up). */
.property-listing-one .latest-projects .lp-bottom-grid {
    grid-template-columns: repeat(3, 1fr);
}
.property-listing-one .latest-projects .lp-bottom-grid .lp-media { height: 320px; }

/* Responsive */
@media (max-width: 991px) {
    .latest-projects .lp-top-grid { grid-template-columns: 1fr; gap: 32px; }
    .latest-projects .lp-desc { max-width: none; }
    .latest-projects .lp-media-hero { height: 380px; }
    .latest-projects .lp-hero-full .lp-media-hero { height: 420px; }
    .property-listing-one .latest-projects .lp-bottom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .latest-projects .lp-bottom-grid { grid-template-columns: 1fr; gap: 28px; }
    .latest-projects .lp-bottom-grid .lp-media { height: 300px; }
    .latest-projects .lp-media-hero { height: 300px; }
    .latest-projects .lp-heading { font-size: 28px; }
}

/* ==========================================================================
   Blog / "Latest Insights" cards (.blog-meta-one)
   Base style.css gives these a white card background + light borders; make
   them dark to match the theme.
   ========================================================================== */
.blog-meta-one {
    background: transparent !important;
}
.blog-meta-one .post-data {
    border-bottom-color: var(--dark-border) !important;
    padding-top: 22px !important;
}
/* Grouped meta row: CATEGORY · Date, sitting above the title */
.blog-meta-one .post-data .post-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1;
}
.blog-meta-one .post-data .post-category {
    color: var(--dark-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.blog-meta-one .post-data .post-meta-sep {
    color: var(--dark-text-muted) !important;
    opacity: 0.6;
}
.blog-meta-one .post-data .post-date {
    color: var(--dark-text-muted) !important;
    letter-spacing: 0.02em;
}
.blog-meta-one .post-data .blog-title {
    display: block;
}
.blog-meta-one .post-data .blog-title h4 {
    color: var(--dark-text) !important;
    margin: 0;
}
/* Date pill over the image */
.blog-meta-one .post-img .date {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}
/* Square corners (no border radius) on the post image + date pill */
.blog-meta-one .post-img.border-25,
.blog-meta-one .post-img.border-25 .date {
    border-radius: 0 !important;
}

/* ==========================================================================
   Homepage CTA bar (below Latest Projects)
   Boxed (inside .container), background = site font colour, square corners.
   ========================================================================== */
.home-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    background: #c9c5be;
    border-radius: 0;
    padding: 40px 48px;
}
.home-cta-text { flex: 1 1 320px; }
.home-cta-bar .home-cta-title {
    color: #111111 !important;
    font-size: 28px;
    margin: 0 0 8px;
}
.home-cta-desc {
    color: #333333 !important;
    font-size: 16px;
    line-height: 1.5;
    max-width: 520px;
}
.home-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    background: #111111;
    color: #c9c5be;
    font-size: 15px;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 0;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}
.home-cta-btn:hover {
    background: #000000;
    color: #ffffff;
}

@media (max-width: 575px) {
    .home-cta-bar { padding: 28px 24px; }
    .home-cta-title { font-size: 22px; }
}

/* ==========================================================================
   Testimonials strip (under the Chairman quote)
   Horizontal row of square cards in the site font colour; the strip fades
   out at both ends via a gradient mask so cards look like they slide off.
   ========================================================================== */
.testimonials-strip {
    position: relative;
    /* Fade both horizontal ends into the page background */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    /* Force LTR so the translateX marquee flows/loops the same in Arabic. */
    direction: ltr;
}
/* Card text still reads right-to-left in Arabic. */
[dir="rtl"] .testimonial-card { direction: rtl; }
.mt-24 { margin-top: 24px; }

/* Each row is an overflow-clipped viewport; the inner track slides. */
.testi-marquee { overflow: hidden; }
.testi-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}
/* Track holds TWO copies of the row, so a -50% shift loops seamlessly. */
.testi-left  { animation: testiScrollLeft  120s linear infinite; }
.testi-right { animation: testiScrollRight 120s linear infinite; }

@keyframes testiScrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes testiScrollRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Cards: rectangular (as before), fixed width so the row reads evenly. */
.testimonial-card {
    flex: 0 0 auto;
    width: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #c9c5be;
    color: #111111;
    padding: 30px 32px;
    border-radius: 0;
}
.testimonial-card .testimonial-text {
    color: #1a1a1a;
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
}
html[lang="en"] .testimonial-card .testimonial-name {
    font-family: 'Gambarino', serif !important;
    font-weight: 400 !important;
}
.testimonial-card .testimonial-name {
    color: #111111 !important;
    font-size: 22px;
    margin-top: 22px;
}
@media (max-width: 575px) {
    .testimonial-card { width: 300px; padding: 26px; }
    .testimonial-card .testimonial-text { font-size: 15px; }
}

/* ==========================================================================
   Floating WhatsApp button (moved off inline styles/JS in the layout)
   ========================================================================== */
.whatsapp-fab-stack {
    position: fixed;
    bottom: 28px;
    inset-inline-end: 28px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.whatsapp-fab-stack.is-waiting {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
}
.whatsapp-fab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 0;
    background: #c9c5be;
    color: #111111;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-fab span { color: #111111; }
.whatsapp-fab svg { flex-shrink: 0; display: block; }
.whatsapp-fab svg path { fill: #111111 !important; }
.whatsapp-fab:hover {
    background: #b8b4ac;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}
.whatsapp-fab--icon {
    padding: 14px;
}
.whatsapp-fab--text {
    padding: 14px 20px;
    line-height: 22px;
}
.whatsapp-fab--text span {
    line-height: 22px;
}

/* ==========================================================================
   Feature Hero (homepage)
   Full-viewport slider over featured projects; each slide is a full-bleed
   image whose bottom fades into the theme background via a gradient, with the
   project's name + up to 3 info items + CTA bottom-left. Vertical numbered
   nav is centered on the right edge.
   ========================================================================== */
.feature-hero {
    position: relative;
    padding: 0;
    /* Fill the full viewport, edge to edge. */
    min-height: 100vh;
    overflow: hidden;
}
.feature-hero-track {
    position: relative;
    width: 100%;
    min-height: 100vh;
}
/* Slides stack on top of each other and crossfade. */
.feature-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 100vh;
    padding: 56px;
    border-radius: 0;
    overflow: hidden;
    background-color: var(--dark-surface-2);
    /* Inline background-image (set per slide) is inherited by ::before, which
       renders + zooms it; keep the host from painting/scaling it here. */
    background-size: 0 0;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0s linear 0.9s;
    z-index: 0;
}
/* Zooming image layer — inherits the slide's inline background-image. */
.feature-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transform-origin: center;
    transition: transform 1.2s ease;
}
.feature-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease;
    z-index: 1;
}
/* Slow Ken Burns zoom while the slide is active. */
.feature-hero-slide.is-active::before {
    /* Ken Burns zoom, restarted each time the slide becomes active. */
    animation: featureHeroZoom 8s ease-out forwards;
    will-change: transform;
}
@keyframes featureHeroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}
/* Honour reduced-motion: no zoom. */
@media (prefers-reduced-motion: reduce) {
    .feature-hero-slide::before,
    .feature-hero-slide.is-active::before {
        transform: none;
        transition: none;
        animation: none;
    }
}
/* Keep the track tall even though slides are absolute. */
.feature-hero-track::after {
    content: "";
    display: block;
    min-height: 100vh;
}
/* Gradients in theme colours: bottom fades the image into the page, top
   darkens behind the fixed logo + nav toggle so they stay legible over
   light images. */
.feature-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* top scrim — behind logo / nav */
        linear-gradient(to bottom,
            rgba(11, 15, 16, 0.75) 0%,
            rgba(11, 15, 16, 0.35) 12%,
            rgba(11, 15, 16, 0) 26%),
        /* bottom fade into the page */
        linear-gradient(to top,
            var(--dark-bg) 0%,
            rgba(11, 15, 16, 0.85) 22%,
            rgba(11, 15, 16, 0.35) 50%,
            rgba(11, 15, 16, 0.10) 75%,
            rgba(11, 15, 16, 0) 100%);
}
.feature-hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
}
/* Single-project hero: content is a persistent overlay (not per-slide), so it
   stays fixed bottom-left while only the images crossfade behind it. */
.feature-hero--single .feature-hero-content--fixed {
    position: absolute;
    z-index: 3;
    inset-inline-start: 56px;
    inset-inline-end: 56px;
    bottom: 56px;
    /* opacity handled here (not the per-slide reveal rule). */
    opacity: 1;
    transform: none;
}
.feature-hero-title {
    color: #c9c5be !important;
    font-size: clamp(38px, 5.5vw, 76px);
    line-height: 1.02;
    margin: 0 0 28px;
}
.feature-hero-info {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 0 0 34px;
    padding: 0;
}
.feature-hero-info li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.feature-hero-info .fhi-label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
}
.feature-hero-info .fhi-value {
    font-size: 17px;
    font-weight: 600;
    color: #c9c5be;
}
.feature-hero-btn {
    /* Ride on the existing .view-button look; just ensure inline-flex sizing. */
    display: inline-flex;
    align-items: center;
}
/* Content rises/fades in when its slide becomes active. */
.feature-hero-slide .feature-hero-content {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}
.feature-hero-slide.is-active .feature-hero-content {
    opacity: 1;
    transform: translateY(0);
}

/* Vertical numbered nav, centered on the right edge. */
.feature-hero-nav {
    position: absolute;
    top: 50%;
    inset-inline-end: 34px;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-end;
}
.feature-hero-nav .fhn-dot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--dark-text-muted);
    transition: color 0.25s ease;
}
.feature-hero-nav .fhn-num {
    font-size: 12px;
    letter-spacing: 0.14em;
    line-height: 1;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Tick mark that grows for the active dot. */
.feature-hero-nav .fhn-dot::after {
    content: "";
    width: 18px;
    height: 2px;
    background: currentColor;
    opacity: 0.5;
    transition: width 0.3s ease, opacity 0.3s ease;
}
.feature-hero-nav .fhn-dot:hover {
    color: #c9c5be;
}
.feature-hero-nav .fhn-dot:hover .fhn-num {
    opacity: 1;
    transform: translateX(0);
}
.feature-hero-nav .fhn-dot.is-active {
    color: #c9c5be;
}
.feature-hero-nav .fhn-dot.is-active .fhn-num {
    opacity: 1;
    transform: translateX(0);
}
.feature-hero-nav .fhn-dot.is-active::after {
    width: 42px;
    opacity: 1;
}

@media (max-width: 991px) {
    .feature-hero-slide { padding: 40px; }
    .feature-hero--single .feature-hero-content--fixed {
        inset-inline-start: 40px;
        inset-inline-end: 40px;
        bottom: 40px;
    }
    .feature-hero-info { gap: 28px; }
    .feature-hero-nav { inset-inline-end: 22px; gap: 14px; }
}
@media (max-width: 575px) {
    .feature-hero-slide {
        padding: 28px 24px 90px;
        min-height: 100vh;
    }
    .feature-hero--single .feature-hero-content--fixed {
        inset-inline-start: 24px;
        inset-inline-end: 24px;
        bottom: 90px;
    }
    .feature-hero-info { gap: 22px; }
    .feature-hero-info .fhi-value { font-size: 15px; }
    /* Move nav to the bottom-center on small screens so it clears the copy. */
    .feature-hero-nav {
        top: auto;
        bottom: 26px;
        inset-inline-end: 50%;
        transform: translateX(50%);
        flex-direction: row;
        gap: 16px;
    }
    .feature-hero-nav .fhn-num { display: none; }
    .feature-hero-nav .fhn-dot::after { width: 22px; }
    .feature-hero-nav .fhn-dot.is-active::after { width: 32px; }
}

/* ==========================================================================
   Amenities grid (project page)
   Simple beige check icon + name — no card box, no icon background.
   ========================================================================== */
.amenities-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
}
/* Tags sit inside the Features & Amenities block, below the stats row */
.property-features .amenities-tags { margin-top: 48px; }

/* ==========================================================================
   Floor plans (project page)
   Careers-style hairline rows: plan name + description on the left, a
   "view floor plan" cue with arrow on the right. The whole row opens the
   plan image in the fancybox lightbox.
   ========================================================================== */
.fp-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark-text-muted);
    margin-bottom: 8px;
}
.fp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--dark-border);
    text-decoration: none;
}
.fp-row:last-child { border-bottom: 0; }
.fp-row-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #c9c5be;
    color: #111111;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
.fp-row-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.fp-row-title {
    font-size: 18px;
    font-weight: 600;
    color: #c9c5be;
}
.fp-row-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--dark-text-muted);
}
.fp-row-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    white-space: nowrap;
    transition: color 0.25s ease;
}
.fp-row-cta svg { flex-shrink: 0; transition: transform 0.25s ease; }
.fp-row:hover .fp-row-cta { color: #c9c5be; }
.fp-row:hover .fp-row-cta svg { transform: translateX(6px); }
[dir="rtl"] .fp-row-cta svg { transform: scaleX(-1); }
[dir="rtl"] .fp-row:hover .fp-row-cta svg { transform: scaleX(-1) translateX(6px); }

@media (max-width: 575px) {
    .fp-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0; }
}

/* ==========================================================================
   What's nearby (project page)
   Each place gets its travel time in a beige circle (site font colour) with
   the place name + "minutes" label beside it.
   ========================================================================== */
.nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px 32px;
    margin: 0;
    padding: 0;
}
.nearby-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.nearby-time {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #c9c5be;
    color: #111111;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
.nearby-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.nearby-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--dark-text) !important;
    line-height: 1.3;
}
.nearby-min {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
}

@media (max-width: 575px) {
    .nearby-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .nearby-time { width: 46px; height: 46px; font-size: 16px; }
}
.amenities-tags .amenity-tag {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
    border-radius: 0;
    padding: 10px 18px;
    line-height: 1;
    transition: border-color 0.25s ease;
}
.amenities-tags .amenity-tag:hover { border-color: var(--dark-text-muted); }

@media (max-width: 575px) {
    .amenities-tags { gap: 10px; }
    .amenities-tags .amenity-tag { font-size: 12px; padding: 9px 14px; }
}

/* ==========================================================================
   Project "About" band (project page, right under the hero)
   Full-bleed two-column band: text on a dark surface (~60%) + image (~40%).
   Margined off the hero, with a gradient at the top that fades the hero
   into this section.
   ========================================================================== */
/* Sticky-reveal: the project hero pins to the top while the content below
   (starting with the About band) scrolls up and over it. */
.feature-hero--single {
    position: sticky;
    top: 0;
    z-index: 0;
}

.project-about {
    position: relative;
    /* Sit above the pinned hero so it slides over it while scrolling. */
    z-index: 1;
    /* Break out of any container to full viewport width. */
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: calc(50% - 50vw);
    background: var(--dark-bg);
}
/* Everything from the About band onward rides above the pinned hero on a
   solid page background so the hero never shows through the content. The
   details block uses top PADDING (inside its bg box) instead of a margin so
   no transparent gap between it and the About band reveals the hero. */
.feature-hero--single ~ .project-about,
.feature-hero--single ~ .listing-details-one,
.feature-hero--single ~ .other-projects,
.feature-hero--single ~ .project-bottom-cta {
    position: relative;
    z-index: 1;
    background: var(--dark-bg);
}
.feature-hero--single ~ .listing-details-one {
    padding-top: 40px;
}
/* Gradient at the very top edge — soft transition as it rises over the hero. */
.project-about::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -90px;
    height: 90px;
    z-index: 2;
    pointer-events: none;
    /* Eased (non-linear) scrim so the alpha ramp has no perceptible edge
       at either end — the classic fix for the visible "line" a plain
       linear gradient leaves. */
    background: linear-gradient(to bottom,
        rgba(11, 15, 16, 0) 0%,
        rgba(11, 15, 16, 0.013) 8.1%,
        rgba(11, 15, 16, 0.049) 15.5%,
        rgba(11, 15, 16, 0.104) 22.5%,
        rgba(11, 15, 16, 0.175) 29%,
        rgba(11, 15, 16, 0.259) 35.3%,
        rgba(11, 15, 16, 0.352) 41.2%,
        rgba(11, 15, 16, 0.450) 47.1%,
        rgba(11, 15, 16, 0.550) 52.9%,
        rgba(11, 15, 16, 0.648) 58.8%,
        rgba(11, 15, 16, 0.741) 64.7%,
        rgba(11, 15, 16, 0.825) 71%,
        rgba(11, 15, 16, 0.896) 77.5%,
        rgba(11, 15, 16, 0.951) 84.5%,
        rgba(11, 15, 16, 0.987) 91.9%,
        var(--dark-bg) 100%);
    /* Blur the hero image where it meets the dark section; masked with the
       same eased ramp so the blur fades in with no hard boundary. */
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.013) 8.1%,
        rgba(0, 0, 0, 0.049) 15.5%,
        rgba(0, 0, 0, 0.104) 22.5%,
        rgba(0, 0, 0, 0.175) 29%,
        rgba(0, 0, 0, 0.259) 35.3%,
        rgba(0, 0, 0, 0.352) 41.2%,
        rgba(0, 0, 0, 0.450) 47.1%,
        rgba(0, 0, 0, 0.550) 52.9%,
        rgba(0, 0, 0, 0.648) 58.8%,
        rgba(0, 0, 0, 0.741) 64.7%,
        rgba(0, 0, 0, 0.825) 71%,
        rgba(0, 0, 0, 0.896) 77.5%,
        rgba(0, 0, 0, 0.951) 84.5%,
        rgba(0, 0, 0, 0.987) 91.9%,
        #000 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.013) 8.1%,
        rgba(0, 0, 0, 0.049) 15.5%,
        rgba(0, 0, 0, 0.104) 22.5%,
        rgba(0, 0, 0, 0.175) 29%,
        rgba(0, 0, 0, 0.259) 35.3%,
        rgba(0, 0, 0, 0.352) 41.2%,
        rgba(0, 0, 0, 0.450) 47.1%,
        rgba(0, 0, 0, 0.550) 52.9%,
        rgba(0, 0, 0, 0.648) 58.8%,
        rgba(0, 0, 0, 0.741) 64.7%,
        rgba(0, 0, 0, 0.825) 71%,
        rgba(0, 0, 0, 0.896) 77.5%,
        rgba(0, 0, 0, 0.951) 84.5%,
        rgba(0, 0, 0, 0.987) 91.9%,
        #000 100%);
}
.project-about-text {
    background: var(--dark-bg);
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding: 120px 24px;
}
.project-about-eyebrow {
    display: block;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    margin-bottom: 18px;
}
.project-about-title {
    font-size: clamp(30px, 3.5vw, 48px);
    line-height: 1.1;
    color: #c9c5be !important;
    margin: 0 0 24px;
}
.project-about-body {
    font-size: 18px;
    line-height: 1.7;
    color: var(--dark-text) !important;
    margin: 0;
}
/* Description + overview side by side */
.project-about-text.has-cols { max-width: 1160px; }
.project-about-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    text-align: left;
    margin-top: 8px;
}
[dir="rtl"] .project-about-cols { text-align: right; }
@media (max-width: 767px) {
    .project-about-cols { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 991px) {
    .project-about-text { padding: 80px 24px; }
}

/* Download-brochure button under the About description (centered band). */
.project-brochure-btn {
    display: inline-flex;
    margin-top: 40px;
}
.project-brochure-btn span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.project-brochure-btn svg { flex-shrink: 0; }

/* Gallery under the About text: square tiles, click opens the fancybox
   gallery with all project images. */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: -40px;
    padding-bottom: 120px;
}
.project-gallery .pg-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--dark-surface-2);
}
.project-gallery .pg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.project-gallery .pg-item:hover img { transform: scale(1.05); }
/* Fullscreen cue, bottom corner of each tile */
.project-gallery .pg-item { position: relative; }
.pg-expand {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(20, 25, 27, 0.72);
    backdrop-filter: blur(4px);
    color: #c9c5be;
    transition: background 0.25s ease, color 0.25s ease;
}
.pg-item:hover .pg-expand {
    background: #c9c5be;
    color: #111111;
}
/* The lightbox must cover the fixed logo/nav toggle (z-index 10000-10002). */
.fancybox__container,
.fancybox-container {
    z-index: 10010 !important;
}
/* Lock page scroll while the lightbox is open — the base sheet leaves
   html scrollable (overflow: visible) and only hides the body scrollbar. */
html.with-fancybox,
html.with-fancybox body {
    overflow: hidden !important;
}

/* Hairline frame around the map */
.property-location .map-banner {
    border: 1px solid var(--dark-border);
}
/* Info strip attached under the map: address left, coordinates right.
   Shares the map's hairline so the two read as one framed panel. */
.map-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 48px;
    border: 1px solid var(--dark-border);
    border-top: 0;
    background: #c9c5be;
    padding: 18px 24px;
}
.map-info-bar .mib-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.map-info-bar .mib-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.6);
}
.map-info-bar .mib-value {
    font-size: 15px;
    color: #111111 !important;
    line-height: 1.4;
}
.map-info-bar .mib-coords .mib-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.map-info-bar .mib-temp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.map-info-bar .mib-temp svg { flex-shrink: 0; }
.map-info-bar .mib-sep { opacity: 0.5; margin: 0 2px; }

/* Weather metric with a dark tooltip explaining what the value is. */
.map-info-bar .mib-metric {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    outline: none;
    color: #111111 !important;
}
.map-info-bar .mib-metric::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    background: #0b0f10;
    color: #c9c5be;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--dark-border);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
/* Little arrow under the bubble */
.map-info-bar .mib-metric::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #0b0f10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.map-info-bar .mib-metric:hover::after,
.map-info-bar .mib-metric:focus-visible::after,
.map-info-bar .mib-metric:hover::before,
.map-info-bar .mib-metric:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 575px) {
    .map-info-bar { padding: 16px 18px; }
}

/* Mapbox chrome (popup + zoom controls) in the site duotone. */
.mapboxgl-popup-content {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: var(--dark-surface) !important; }
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: var(--dark-surface) !important; }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--dark-surface) !important; }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--dark-surface) !important; }
.mapboxgl-popup-close-button { color: var(--dark-text) !important; }
.mapboxgl-ctrl-group {
    background: #c9c5be !important;
    border-radius: 0 !important;
}
.mapboxgl-ctrl-group button + button { border-top: 1px solid rgba(17, 17, 17, 0.18) !important; }
.mapboxgl-ctrl-group button:hover { background: #b8b4ac !important; }
/* Dark icons on the light control (base icons are dark already; keep them). */
.mapboxgl-ctrl button .mapboxgl-ctrl-icon { filter: none; }

/* Mapbox attribution + logo: kept for ToS compliance but toned down to sit
   quietly against the dark duotone (dimmed, dark-tinted, smaller). */
.mapboxgl-ctrl-attrib {
    background: rgba(11, 15, 16, 0.55) !important;
    padding: 0 6px !important;
}
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-attrib a {
    color: rgba(201, 197, 190, 0.55) !important;
    font-size: 10px !important;
}
.mapboxgl-ctrl-attrib-button {
    filter: invert(0.85) sepia(0.08);
    opacity: 0.5;
}
/* The Mapbox wordmark: dimmed and monochrome so it blends in. */
.mapboxgl-ctrl-logo {
    opacity: 0.35;
    filter: grayscale(1) brightness(1.4);
    transition: opacity 0.25s ease;
}
.mapboxgl-ctrl-logo:hover { opacity: 0.7; }

@media (max-width: 991px) {
    .project-gallery { grid-template-columns: repeat(3, 1fr); padding-bottom: 80px; margin-top: -20px; }
}
@media (max-width: 575px) {
    .project-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Section dividers on the project page — same subtle hairline as the rest
   of the site. */
.theme-details-one .bottom-line-dark {
    border-bottom-color: var(--dark-border) !important;
}

/* ==========================================================================
   Property features (project page)
   Big-numbers, minimal: oversized values with small labels, in a clean grid.
   No icons, no boxes, no image — lets the numbers be the design.
   ========================================================================== */
.features-stats {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 40px;
    column-gap: 16px;
}
.features-stats .stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.features-stats .stat-value {
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    color: #c9c5be !important;
    letter-spacing: -0.02em;
    word-break: break-word;
}
html[lang="en"] .features-stats .stat-value {
    font-family: 'Gambarino', serif !important;
    font-weight: 400 !important;
}
.features-stats .stat-value small {
    font-size: 0.45em;
    font-weight: 400;
    margin-inline-start: 4px;
    color: var(--dark-text-muted);
    letter-spacing: 0;
}
.features-stats .stat-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dark-text-muted) !important;
}

@media (max-width: 991px) {
    .features-stats .stat { flex: 0 0 30%; }
}
@media (max-width: 575px) {
    .features-stats { row-gap: 32px; }
    .features-stats .stat { flex: 0 0 45%; }
}

/* ==========================================================================
   Insights (blog) pages
   Index: careers-style header + minimal text filters + lp-style image
   cards. Article: same centered column as the career detail page, with a
   full-width cover image between the facts row and the body.
   ========================================================================== */
.insights-section .careers-head { margin-bottom: 40px; }

/* Category filters: plain uppercase text, underlined when active */
.insights-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0 0 48px;
    padding: 0;
}
.insights-filter li {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.insights-filter li:hover { color: #c9c5be; }
.insights-filter li.is-checked {
    color: #c9c5be;
    border-bottom-color: #c9c5be;
}

/* Article cards: lp media + caption, sized for a 2-up grid */
.insights-section .insight-media { height: 340px; }
.insights-section .insight-card { margin-bottom: 60px; }
.insights-section .insight-card .lp-name { font-size: 21px; }

/* Article detail cover image */
.article-hero { margin: 0 0 48px; }
.article-hero img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .insights-section .insight-media { height: 260px; }
    .insights-section .insight-card { margin-bottom: 44px; }
    .article-hero { margin-bottom: 36px; }
    .article-hero img { height: 260px; }
}

/* ==========================================================================
   Legal page
   Same centered column as the article/career detail pages: eyebrow + big
   title, muted intro, hairline "last updated" band, then the two policy
   sections and a hairline-topped contact row.
   ========================================================================== */
.legal-intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--dark-text-muted);
    max-width: 560px;
    margin: -12px 0 36px;
}
.legal-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 32px;
    border-top: 1px solid var(--dark-border);
    margin-top: 64px;
    padding-top: 40px;
}
.legal-cta-text {
    font-size: 19px;
    color: #c9c5be;
}
@media (max-width: 767px) {
    .legal-cta { margin-top: 48px; padding-top: 32px; }
}

/* ==========================================================================
   Text selection highlight
   Branded selection: beige background with dark text, matching the primary
   button colours instead of the browser's default blue.
   ========================================================================== */
::selection {
    background: #c9c5be;
    color: #111111;
}
::-moz-selection {
    background: #c9c5be;
    color: #111111;
}

/* ==========================================================================
   Project cards: Featured badge + Sold progress bar
   ========================================================================== */
.lp-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111111;
    background: #c9c5be;
    border-radius: 0;
}
[dir="rtl"] .lp-badge { left: auto; right: 16px; }

/* ==========================================================================
   Project detail: sticky inquiry CTA
   ========================================================================== */
.project-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 14px 24px;
    background: rgba(20, 25, 27, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--dark-border);
    transform: translateY(120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}
.project-sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.project-sticky-cta .psc-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.project-sticky-cta .psc-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--dark-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-sticky-cta .psc-btn {
    flex-shrink: 0;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    background: #c9c5be;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.25s ease;
}
.project-sticky-cta .psc-btn:hover { background: #b8b4ac; }

@media (max-width: 575px) {
    .project-sticky-cta { padding: 12px 16px; }
    .project-sticky-cta .psc-name { font-size: 15px; }
    .project-sticky-cta .psc-btn { padding: 10px 18px; font-size: 13px; }
}

/* ── Project contact page: status bar under the image ───────────────── */
.project-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 18px 24px;
    background: #c9c5be;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.project-status-items {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.project-status-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.project-status-item .psi-label {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.6);
}
.project-status-item .psi-value {
    font-size: 18px;
    color: #111;
}
.project-status-bar .project-status-cta {
    flex-shrink: 0;
    white-space: nowrap;
    background: #111 !important;
    color: #c9c5be !important;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s !important;
}
.project-status-bar .project-status-cta span,
.project-status-bar .project-status-cta i {
    color: #c9c5be !important;
    transition: color 0.3s ease-in-out 0s !important;
}
.project-status-bar .project-status-cta:hover,
.project-status-bar .project-status-cta:focus {
    background: #111 !important;
    color: #c9c5be !important;
    opacity: 0.8;
}
.project-status-bar .project-status-cta:hover span,
.project-status-bar .project-status-cta:focus span {
    color: #c9c5be !important;
}

@media (max-width: 575px) {
    .project-status-bar { padding: 16px; gap: 16px; }
    .project-status-items { gap: 24px; }
    .project-status-bar .project-status-cta { width: 100%; text-align: center; }
}