@charset "UTF-8";
/* ==========================================================================
   IRIS by Raghava — main stylesheet
   --------------------------------------------------------------------------
   ORGANISATION
     01  Fonts
     02  Design tokens
     03  Reset & base
     04  Shared utilities  (.container, .section_title, .cta_button, .sr-only)
     05  Sections, each scoped to its own parent class:
           .site-header  .hero  .overview  .showcase  .amenities  .pricing
           .highlights   .floor-plans  .location  .gallery  .about_builder
           .contact-form
     06  Global motion & print preferences

   RULES OF THE ROAD
     • Every selector below section 04 begins with its section's parent class.
       Nothing in a section can reach into another section.
     • Each section owns its own media queries, written directly beneath it.
     • Breakpoints are fixed at 1200 / 992 / 768 / 560 px. Do not invent more.
     • Colours, fonts, spacing and easing come from tokens in section 02.
   ========================================================================== */


/* ==========================================================================
   01  FONTS
   ========================================================================== */
@font-face {
    font-family: "Branley";
    src: url("../fonts/Branley.ttf") format("ttf"),
        url("../fonts/Branley.otf") format("otf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Optima";
    src: url("../fonts/optima/OPTIMA.TTF") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   02  DESIGN TOKENS
   ========================================================================== */
:root {
    /* ---- brand colour ---- */
    --c-green: #1f3a2c;
    /* buttons, dark panels                */
    --c-green-deep: #043327;
    /* headings, icon strokes              */
    --c-green-hover: #2a4d3a;
    /* button hover                        */
    --c-green-soft: #2f5442;
    /* decorative line-work on dark        */
    --c-gold: #c69a5a;
    --c-tan: #c9a879;
    --c-sand: rgba(181, 134, 85, 0.15);
    /* tinted panels (was #B5865526) */
    --c-sand-line: rgba(181, 134, 85, 0.28);

    /* ---- neutrals ---- */
    --c-ink: #101312;
    /* body text on light                  */
    --c-ink-soft: #2b2b2b;
    --c-muted: #5a5f5c;
    --c-invert: #f4f3ee;
    /* text on dark                        */
    --c-invert-soft: #cdd6e2;
    --c-mist: #ececea;
    /* overview background                 */
    --c-cream: #f5f4f0;
    /* highlights background               */
    --c-line: rgba(16, 19, 18, 0.15);
    --c-white: #fff;

    /* ---- type ---- */
    --font-display: "Optima", "Palatino Linotype", Palatino, Georgia, serif;
    --font-script: "Branley", "Optima", Georgia, serif;
    --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-hero: clamp(2.75rem, 7vw, 4.375rem);
    /* 44 → 70px */
    --fs-h2: clamp(1.875rem, 3.6vw, 2.25rem);
    /* 30 → 44px */
    --fs-h3: clamp(1.5rem, 3.4vw, 3.125rem);
    /* 24 → 50px */
    --fs-lead: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    /* ---- layout ---- */
    --maxw: 1200px;
    --gutter: clamp(20px, 4vw, 48px);
    --section-y: clamp(56px, 7vw, 100px);

    /* ---- motion ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 200ms;
    --dur: 320ms;
    --dur-slow: 620ms;

    /* ---- legacy aliases -------------------------------------------------
       Kept so any inline style or third-party snippet written against the
       old names still resolves. New code should use the tokens above. */
    --green: var(--c-green);
    --gold: var(--c-gold);
    --tan: var(--c-tan);
    --ink: var(--c-invert);
    --ink2: var(--c-ink);
    --ink-soft: var(--c-invert-soft);
    --optima: var(--font-display);
    --branley: var(--font-script);
    --sans: var(--font-body);
}


/* ==========================================================================
   03  RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.1;
    text-wrap: balance;
}

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


/* ==========================================================================
   04  SHARED UTILITIES
   The only intentionally global classes in this file. Everything else is
   scoped. Keep this list short.
   ========================================================================== */

/* Layout container. Declared here (after bootstrap in the <head>) so the page
   lays out correctly whether or not bootstrap is present. */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Section heading, used by every section. Colour is overridden per section
   where the background is dark. */
.section_title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--c-green-deep);
}

/* Primary call to action. Two liquid pseudo-elements wipe upward on hover. */
.cta_button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    border: 1px solid var(--c-green);
    border-radius: 4px;
    background-color: var(--c-green);
    color: var(--c-white);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: color var(--dur-fast) ease-in,
        border-color var(--dur-fast) ease-in;
}

.cta_button::before,
.cta_button::after {
    content: "";
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    transition: all 500ms 100ms cubic-bezier(0.55, 0, 0.1, 1);
}

.cta_button::before {
    left: 50%;
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
}

.cta_button::after {
    left: 55%;
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: var(--c-gold);
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
}

.cta_button:hover,
.cta_button:focus-visible {
    color: var(--c-white);
    border-color: var(--c-gold);
}

.cta_button:hover::before,
.cta_button:focus-visible::before {
    top: -35%;
    background-color: var(--c-gold);
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.cta_button:hover::after,
.cta_button:focus-visible::after {
    top: -45%;
    background-color: var(--c-gold);
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/* Outline variant — same geometry, transparent until hover. */
.cta_button--outline {
    background-color: transparent;
    color: var(--c-green);
}

.cta_button--outline:hover,
.cta_button--outline:focus-visible {
    color: var(--c-white);
}

/* Reveal-on-load utility. Delay is set per element with --d. */
.u-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: u-rise 850ms var(--ease-out) forwards;
    animation-delay: var(--d, 0ms);
}

@keyframes u-rise {
    to {
        opacity: 1;
        transform: none;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--c-green);
    color: var(--c-white);
    text-decoration: none;
    transition: top var(--dur) var(--ease);
}

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


/* ==========================================================================
   05.01  SITE HEADER  —  .site-header
   Transparent bar overlaying the hero.
   ========================================================================== */
.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 20;
    padding: clamp(16px, 2.5vw, 30px) 0;
    display: none;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.site-header__logo img {
    width: clamp(58px, 7vw, 82px);
    object-fit: contain;
}

.site-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 2vw, 28px);
}

.site-header__visit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-invert);
    font-weight: 300;
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color var(--dur-fast) ease;
    cursor: pointer;
}

.site-header__visit:hover {
    color: var(--c-gold);
}

.site-header__icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    flex: none;
}

.site-header__menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 38px;
    padding: 4px 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.site-header__menu span {
    height: 2px;
    background: var(--c-invert);
    transition: transform var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
}

.site-header__menu[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.site-header__menu[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.site-header__menu[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
    .site-header__visit span {
        display: none;
    }
}



/* ==========================================================================
   05.02  HERO  —  .hero
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #0b1626;
    /* holds the section if the photo 404s */
    color: var(--c-invert);
}

/* The hero photo is a real <img> inside <picture>, not a CSS background.
   That buys three things a background can't: the browser picks the desktop or
   mobile crop from a media condition and downloads only that one, the LCP
   image can carry fetchpriority="high", and intrinsic width/height reserve
   the space so nothing shifts as it loads. */
.hero__media {
    position: relative;
    z-index: 0;
    inset: 0;
    display: block;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* height: 100vh; */
}

/* The gradient that used to sit above the background-image, now its own
   layer between the photo and the copy. */
.hero__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
            rgba(11, 22, 38, 0.65) 0%,
            rgba(11, 22, 38, 0.15) 40%,
            rgba(11, 22, 38, 0.15) 60%,
            rgba(11, 22, 38, 0.65) 100%);
}

/* The offer column is given an explicit track width. With `auto` it shrank to
   the width of the CTA button, and the letter-spaced "LUXURY APARTMENTS" then
   spilled out past the viewport edge. minmax(0,1fr) on the headline stops it
   forcing the grid wider than its container. */
.hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 340px);
    align-items: center;
    gap: clamp(32px, 5vw, 48px);
    min-height: min(calc(100svh - 200px), 720px);
}

.hero__headline {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 1.22;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-invert);
    padding-left: 0;
}

.hero__offer {
    justify-self: flex-start;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.hero__offer-lead {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.4vw, 2.375rem);
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: var(--c-invert);
}

.hero__offer-lead sup {
    font-size: 0.45em;
    top: -0.9em;
}

/* letter-spacing adds a trailing space after the final character, which
   throws centred text off by half that amount. The negative margin cancels
   it. Sized to fit "LUXURY APARTMENTS" inside the column at every width. */
.hero__offer-sub {
    margin-top: 4px;
    margin-right: -0.18em;
    font-weight: 300;
    font-size: clamp(0.8125rem, 1.25vw, 1.0625rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    color: var(--c-invert-soft);
}

.hero__rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: clamp(24px, 4vw, 29px) 0;
    background: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.hero .cta_button {
    margin-top: clamp(28px, 5vw, 40px);
}

@media (max-width: 992px) {
    .hero__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 36px;
        min-height: min(calc(100svh - 140px), 640px);
    }

    .hero__headline br {
        display: none;
    }

    .hero__offer {
        justify-self: center;
    }

    .hero__rule {
        width: 60%;
        margin-inline: auto;
    }


}

@media (max-width: 768px) {

    /* The mobile crop is portrait and the copy is centred rather than split
       left/right, so the horizontal vignette does nothing useful. Darken from
       the bottom instead, where the text sits. */
    .hero__overlay {
        background: linear-gradient(180deg,
                rgba(11, 22, 38, 0.55) 0%,
                rgba(11, 22, 38, 0.25) 35%,
                rgba(11, 22, 38, 0.70) 100%);
    }

    /* Keep the towers in frame when the viewport is tall and narrow. */
    .hero__media img {
        /* object-position: 50% 35%; */
        /* height: 66vh; */
    }
}


/* ==========================================================================
   05.03  OVERVIEW  —  .overview
   ========================================================================== */
.overview {
    --blob: rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    padding: var(--section-y) 0;
    text-align: center;
    color: var(--c-green);
    /* background-color: var(--c-mist); */
    background-image:
        radial-gradient(closest-side at 5% 30%, var(--blob), transparent),
        radial-gradient(closest-side at 95% 15%, var(--blob), transparent),
        radial-gradient(closest-side at 8% 75%, var(--blob), transparent);
}

.overview__text {
    max-width: 62rem;
    margin: clamp(24px, 4vw, 25px) auto 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--c-ink-soft);
}

/* ---- stats ---- */
.overview .stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(40px, 9vw, 112px);
    margin: clamp(30px, 7vw, 50px) 0;
    list-style: none;
}

.overview .stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.overview .stats__num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 3.3rem);
    line-height: 1;
}

.overview .stats__label {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
}

/* ---- media ---- */
.overview .media {
    position: relative;
    max-width: 1100px;
    margin: 0 auto clamp(32px, 5vw, 50px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.overview .media__img {
    width: 100%;
    /* aspect-ratio: 16 / 9; */
    /* object-fit: cover; */
}

.overview .cta_button {
    padding: 8px 20px;
    margin: 0;
}

@media (max-width: 560px) {
    .overview .stats {
        gap: 32px;
    }
}


/* ==========================================================================
   05.04  SHOWCASE  —  .showcase
   Fixed-attachment photo band with a single centred statement.
   ========================================================================== */
.showcase {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 80vh;
    padding: var(--section-y) var(--gutter);
    background-color: #1b1b1b;
    background-image:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.35) 100%),
        url("../img/modern_img.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
}

.showcase__title {
    position: relative;
    z-index: 2;
    /* max-width: 22ch; */
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h3);
    line-height: 1.48;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: capitalize;
    text-wrap: balance;
    color: var(--c-white);
}

/* iOS ignores background-attachment: fixed and renders it badly zoomed. */
@media (max-width: 992px) {
    .showcase {
        min-height: 60vh;
        background-attachment: scroll;
    }
}


/* ==========================================================================
   05.05  AMENITIES  —  .amenities
   Circular hero image with orbiting thumbnails; copy panels are stacked in a
   single grid cell so the column height never shifts between slides.
   Class names here are read by script.js — do not rename them.
   ========================================================================== */
.amenities {
    --hero-size: clamp(250px, 40vw, 520px);
    --thumb-size: calc(var(--hero-size) * 0.17);
    --orbit-clear: calc(var(--hero-size) * 0.22);

    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(33px, 7vh, 92px);
    min-height: 100svh;
    padding: var(--section-y) var(--gutter);
}

.amenities .section_title {
    margin-bottom: clamp(28px, 5vw, 50px);
}

.amenities .astage {
    display: grid;
    grid-template-columns: auto minmax(200px, 1fr) auto auto;
    align-items: center;
    gap: clamp(8px, 1.5vw, 28px);
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
}

/* ---- arrows ---- */
.amenities .anav {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--c-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.amenities .anav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-gold);
    opacity: 0;
    transform: scale(0.65);
    transition: opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease-out);
}

.amenities .anav svg {
    position: relative;
    width: 27px;
    height: 27px;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.amenities .anav:hover::before,
.amenities .anav:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.amenities .anav:hover svg,
.amenities .anav:focus-visible svg {
    opacity: 1;
    color: var(--c-white);
}

.amenities .anav--prev {
    order: 1;
}

.amenities .anav--next {
    order: 4;
    justify-self: end;
}

/* ---- copy panels ---- */
.amenities .acopy {
    order: 2;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: 530px;
    margin-inline: auto;
}

/* All panels occupy the same grid cell, so the column height is the tallest
   panel and never shifts between slides. Only the active one is visible.

   `visibility` is the belt to opacity's braces: if the opacity transition is
   ever disabled or overridden, the inactive panels still cannot paint on top
   of each other, and screen readers only ever reach the active one. The 620ms
   delay lets the outgoing panel finish fading before it is pulled. */
.amenities .apanel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 4.5vh, 54px);
    width: 100%;
    text-align: center;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear var(--dur-slow);
}

.amenities .apanel.is-active {
    visibility: visible;
    transition-delay: 0s;
}

.amenities .apanel>* {
    width: 100%;
    max-width: 80%;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease), transform var(--dur-slow) var(--ease-out);
}

.amenities .apanel.is-active>* {
    opacity: 1;
    transform: none;
}

/* Staggered entrance. (These selectors were previously typo'd as
   .panel__title / .panel__icon / .panel__text and never matched.) */
.amenities .apanel.is-active .apanel__icon {
    transition-delay: 120ms;
}

.amenities .apanel.is-active .apanel__title {
    transition-delay: 180ms;
}

.amenities .apanel.is-active .apanel__text {
    transition-delay: 240ms;
}

.amenities .apanel__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 4vw, 2.125rem);
    line-height: 1.05;
    text-transform: capitalize;
}

.amenities .apanel__icon {
    order: -2;
    width: clamp(44px, 4.4vw, 62px);
    height: clamp(44px, 4.4vw, 62px);
    color: var(--c-green-deep);
}

.amenities .apanel__icon svg {
    width: 100%;
    height: 100%;
}

.amenities .apanel__text {
    max-width: 80%;
    font-size: clamp(0.9375rem, 1.15vw, 1rem);
    line-height: 1.7;
    color: var(--c-muted);
}

/* ---- orbit ---- */
.amenities .aorbit {
    order: 3;
    position: relative;
    width: var(--hero-size);
    height: var(--hero-size);
    margin-inline: var(--orbit-clear);
    touch-action: pan-y;
}

.amenities .ahero {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #eceeed;
    box-shadow: 0 34px 74px -44px rgba(18, 32, 26, 0.45);
    transform: translateZ(0);
}

.amenities .ahero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity 1150ms var(--ease), transform 2000ms var(--ease-out);
    will-change: opacity, transform;
}

.amenities .ahero__slide.is-active {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
}

.amenities .athumb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border: 0;
    border-radius: 50%;
    background-color: #e6e9e7;
    background-size: cover;
    background-position: center;
    opacity: 0;
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--c-white), 0 14px 26px -16px rgba(18, 32, 26, 0.55);
    transition: transform 1050ms var(--ease-out),
        opacity var(--dur-slow) var(--ease),
        box-shadow 420ms var(--ease);
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
}

.amenities .athumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-white);
    opacity: 0.4;
    transition: opacity var(--dur-slow) var(--ease);
}

.amenities .athumb:hover::after {
    opacity: 0.1;
}

.amenities .athumb.is-active::after {
    opacity: 0;
}

.amenities .athumb.is-active {
    box-shadow: 0 0 0 4px var(--c-white), 0 20px 36px -18px rgba(18, 32, 26, 0.6);
}

.amenities .athumb:focus-visible {
    outline: 2px solid var(--c-green);
    outline-offset: 5px;
}

.amenities .athumb[aria-hidden="true"] {
    pointer-events: none;
}

/* ---- dots (mobile only) ---- */
.amenities .adots {
    display: none;
    justify-content: center;
    gap: 10px;
}

.amenities .adots button {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #cfd4d1;
    cursor: pointer;
    transition: background var(--dur) var(--ease), width var(--dur) var(--ease-out);
}

.amenities .adots button[aria-current="true"] {
    width: 22px;
    border-radius: 999px;
    background: var(--c-green);
}

.amenities .acta-row {
    display: flex;
    justify-content: center;
}

/* ---- slide imagery ----
   One rule per amenity, shared by the circular hero and its thumbnail.
   Previously these were ~240 KB of inlined base64 in this file; they are now
   real files under img/amenities/ so the stylesheet is no longer the thing
   blocking first paint. */
.amenities .img-yoga {
    background-image: url("../img/amenities/yoga.webp");
}

.amenities .img-gym {
    background-image: url("../img/amenities/gym.webp");
}

.amenities .img-theatre {
    background-image: url("../img/amenities/theater.webp");
}

.amenities .img-billiards {
    background-image: url("../img/amenities/billiards-pool.webp");
}

.amenities .img-games {
    background-image: url("../img/amenities/indoor-games.webp");
}

.amenities .img-work {
    background-image: url("../img/amenities/working-space.webp");
}

.amenities .img-salon {
    background-image: url("../img/amenities/saloon.webp");
}

.amenities .img-guest {
    background-image: url("../img/amenities/guest-room.webp");
}

@media (max-width: 992px) {
    .amenities {
        --hero-size: clamp(230px, 56vw, 400px);
        gap: 4vh;
    }

    .amenities .astage {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }

    .amenities .acopy {
        margin-top: 50px;
    }

    .amenities .apanel {
        gap: clamp(18px, 3vh, 28px);
    }

    .amenities .anav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .amenities .anav--prev {
        left: 0;
    }

    .amenities .anav--next {
        right: 0;
        left: auto;
    }

    .amenities .adots {
        display: flex;
    }
}

@media (max-width: 560px) {
    .amenities .anav {
        width: 46px;
        height: 46px;
    }

    .amenities .anav svg {
        width: 22px;
        height: 22px;
    }

    .amenities .aorbit {
        margin-inline: auto;
    }
}


/* ==========================================================================
   05.06  PRICING  —  .pricing
   ≥992px  cards sit on the photo, side by side
   <992px  cards drop below the photo
   <560px  single column
   ========================================================================== */
.pricing {
    --blob: rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
    padding: var(--section-y) 0;
    text-align: center;
    color: var(--c-invert);
    background-color: var(--c-green);
    background-image:
        radial-gradient(closest-side at 5% 30%, var(--blob), transparent),
        radial-gradient(closest-side at 95% 70%, var(--blob), transparent);
}

.pricing .section_title {
    margin-bottom: clamp(32px, 5vw, 60px);
    color: var(--c-white);
}

.pricing__stage {
    position: relative;
    max-width: 1180px;
    margin-inline: auto;
    background-color: #3a3128;
    /* holds the layout if the photo 404s */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pricing__plans {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: clamp(20px, 3vw, 50px);
    padding: clamp(32px, 6vw, 80px);
}

.pricing .plan {
    --blob: rgba(0, 0, 0, 0.03);
    flex: 0 0 clamp(220px, 33%, 320px);
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3.2vw, 48px) clamp(18px, 2.6vw, 36px);
    text-align: center;
    color: #1c1c1c;
    background-color: #f2f1ef;
    background-image:
        radial-gradient(closest-side at 20% 30%, var(--blob), transparent),
        radial-gradient(closest-side at 80% 75%, var(--blob), transparent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.pricing .plan__type {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.3em;
    margin-bottom: clamp(20px, 3vw, 20px);
    font-family: var(--font-display);
    line-height: 1;
}

.pricing .plan__num {
    font-size: clamp(3.25rem, 7vw, 6rem);
    font-weight: 500;
    line-height: 0.78;
}

/* Unit label rides at the cap height of the numeral, not the baseline. */
.pricing .plan__unit {
    font-size: clamp(0.9375rem, 1.9vw, 1.625rem);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--c-gold);
}

.pricing .plan__area,
.pricing .plan__price {
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 2vw, 1.75rem);
}

.pricing .plan__area {
    margin-bottom: 10px;
}

.pricing .plan__price {
    margin-bottom: clamp(18px, 2.6vw, 16px);
}

/* margin-top:auto keeps both CTAs aligned even if copy lengths differ */
.pricing .plan__cta {
    margin-top: auto;
    padding: 10px 30px;
    font-size: clamp(0.9375rem, 1.5vw, 1.25rem);
}

@media (max-width: 992px) {
    .pricing__plans {
        justify-content: center;
    }

    .pricing .plan {
        flex: 0 0 calc(50% - 25px);
    }
}

@media (max-width: 560px) {
    .pricing .plan {
        flex: 0 0 100%;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .pricing .plan__num {
        font-size: 3.25rem;
    }
}


/* ==========================================================================
   05.07  HIGHLIGHTS  —  .highlights
   Tabbed: a dependency-free carousel and a specification table.
   Class names here are read by script.js — do not rename them.
   ========================================================================== */
.highlights {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: var(--section-y) 0;
    background-color: var(--c-cream);
}

.highlights__container {
    width: 100%;
}

.highlights__header {
    margin-bottom: clamp(32px, 5vw, 60px);
    text-align: center;
}

.highlights__outer {
    padding: clamp(28px, 6vw, 80px);
    background: var(--c-sand);
}

/* ---- tabs ---- */
.highlights__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);
    margin-bottom: clamp(28px, 5vw, 50px);
}

.highlights__tab {
    padding: 12px 28px;
    border: 2px solid var(--c-gold);
    background: none;
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background var(--dur) ease, color var(--dur) ease;
}

.highlights__tab:hover {
    background: rgba(198, 154, 90, 0.1);
}

.highlights__tab.is-active {
    background: var(--c-gold);
    color: var(--c-white);
}

.highlights__panel[hidden] {
    display: none;
}

/* ---- carousel ---- */
.highlights__carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    width: 100%;
    margin-bottom: 30px;
    padding: clamp(24px, 4vw, 44px) clamp(12px, 2.5vw, 32px);
    border-radius: 6px;
}

.highlights__nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-ink);
    cursor: pointer;
    transition: border-color var(--dur) ease, color var(--dur) ease,
        background var(--dur) ease;
}

.highlights__nav:hover {
    border-color: var(--c-gold);
    color: var(--c-gold);
    background: rgba(198, 154, 90, 0.08);
}

.highlights__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.highlights__nav svg {
    width: 18px;
    height: 18px;
}

/* viewport clips the sliding track to one page of cards */
.highlights__slides {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* track is translateX'd by script.js */
.highlights__track {
    display: flex;
    gap: 24px;
    transition: transform 350ms var(--ease);
}

.highlights__slide {
    flex: 0 0 calc((100% - 48px) / 3);
}

.highlights__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: clamp(28px, 4vw, 30px) 8px;
    border-radius: 6px;
    background: var(--c-white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.highlights__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 30px;
    color: var(--c-green-deep);
}

.highlights__icon svg {
    width: 100%;
    height: 100%;
}

.highlights__card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.125rem, 2vw, 0.375rem);
    line-height: 1.4;
    color: var(--c-ink);
}

/* ---- dots ---- */
.highlights__dots {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.highlights__dots button {
    width: 12px;
    height: 12px;
    border: 2px solid var(--c-gold);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--dur) ease, transform var(--dur) ease;
}

.highlights__dots button:hover {
    transform: scale(1.2);
}

.highlights__dots button[aria-current="true"] {
    background: var(--c-gold);
}

/* ---- specification table ---- */
.highlights .specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 5vw, 70px);
    padding: clamp(28px, 4vw, 48px) 0 8px;
}

.highlights .specs__group {
    padding: 26px 0;
    border-top: 1px solid var(--c-sand-line);
}

.highlights .specs__group--last {
    border-bottom: 1px solid var(--c-sand-line);
}

.highlights .specs__row {
    display: grid;
    grid-template-columns: 170px 1fr;
    column-gap: 24px;
}

.highlights .specs__row--head {
    margin-bottom: 14px;
}

.highlights .specs__row+.specs__row {
    margin-top: 10px;
}

.highlights .specs__category {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-gold);
}

.highlights .specs__colhead {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a99a86;
}

.highlights .specs__label {
    padding-top: 1px;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--c-gold);
}

.highlights .specs__desc {
    font-size: var(--fs-small);
    line-height: 1.65;
}

.highlights .specs__more {
    padding: 36px 0 4px;
    text-align: center;
}

@media (max-width: 992px) {
    .highlights__slide {
        flex: 0 0 calc((100% - 24px) / 2);
    }

    .highlights .specs {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .highlights .specs__row {
        grid-template-columns: 130px 1fr;
        column-gap: 16px;
    }
}

@media (max-width: 768px) {
    .highlights__slide {
        flex: 0 0 100%;
    }
}

@media (max-width: 560px) {
    .highlights .specs__row {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .highlights .specs__label {
        font-weight: 700;
    }
}


/* ==========================================================================
   05.08  FLOOR PLANS  —  .floor-plans
   ========================================================================== */
.floor-plans {
    position: relative;
    overflow: hidden;
    padding: var(--section-y) 0;
    background: var(--c-green);
    color: var(--c-white);
}

.floor-plans .section_title {
    position: relative;
    z-index: 2;
    color: var(--c-white);
}

/* ---- decorative line-work ---- */
.floor-plans__pattern {
    position: absolute;
    z-index: 0;
    width: 210px;
    height: 210px;
    opacity: 0.42;
    pointer-events: none;
}

.floor-plans__pattern::before,
.floor-plans__pattern::after {
    content: "";
    position: absolute;
    border: 28px solid var(--c-green-soft);
    border-radius: 50%;
    transform: rotate(42deg);
}

.floor-plans__pattern::before {
    left: -35px;
    top: -45px;
    width: 100px;
    height: 180px;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.floor-plans__pattern::after {
    left: 55px;
    top: 25px;
    width: 115px;
    height: 175px;
    border-right-color: transparent;
    border-top-color: transparent;
}

.floor-plans__pattern--top {
    left: -20px;
    top: 0;
}

.floor-plans__pattern--mid {
    right: -70px;
    top: 495px;
    opacity: 0.28;
    transform: rotate(90deg);
}

.floor-plans__pattern--bottom {
    right: -20px;
    bottom: -25px;
    transform: rotate(180deg);
}

/* ---- plan picker ----
   A real listbox rather than a decorative box. It sits in its own row above
   the carousel, on the same grid tracks as the content below, so it stays
   optically aligned over the left column. Kept outside the carousel so it
   doesn't repeat once per slide. */
.floor-plans__bar {
    position: relative;
    z-index: 5;
    /* menu must escape the carousel below */
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 7vw, 90px);
    max-width: 1080px;
    margin: clamp(40px, 6vw, 64px) auto 0;
}

.floor-plans__picker {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 275px;
}

.floor-plans__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: 64px;
    padding: 0 24px 0 clamp(20px, 3vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 11px;
    background: transparent;
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.floor-plans__select:hover,
.floor-plans__select[aria-expanded="true"] {
    border-color: var(--c-gold);
    background: rgba(198, 154, 90, 0.12);
}

.floor-plans__select-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.floor-plans__chevron {
    flex: none;
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--dur) var(--ease);
}

.floor-plans__select[aria-expanded="true"] .floor-plans__chevron {
    transform: translateY(3px) rotate(225deg);
}

.floor-plans__list {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 300px;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 11px;
    background: var(--c-green-deep);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}

.floor-plans__list[hidden] {
    display: none;
}

.floor-plans__option {
    padding: 12px 16px;
    border-radius: 7px;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.35;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

.floor-plans__option:hover,
.floor-plans__option.is-highlighted {
    background: rgba(255, 255, 255, 0.12);
}

.floor-plans__option[aria-selected="true"] {
    background: var(--c-gold);
    color: var(--c-white);
}

/* ---- carousel ---- */
.floor-plans__carousel {
    position: relative;
    z-index: 2;
    margin-top: clamp(28px, 4vw, 48px);
}

/* Owl's own height animation, scoped so it can't reach the gallery. */
.floor-plans .owl-height {
    transition: height 400ms var(--ease);
}

/* Gutters so a slide never runs underneath an arrow. At mobile widths this
   collapses to zero and the arrows overlay the plan image instead. */
.floor-plans__track {
    padding-inline: clamp(0px, 6vw, 68px);
}

.floor-plans__nav {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: transparent;
    color: var(--c-white);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
}

.floor-plans__nav svg {
    width: 18px;
    height: 18px;
}

.floor-plans__nav:hover {
    border-color: var(--c-gold);
    background: var(--c-gold);
}

.floor-plans__nav--prev {
    left: 0;
}

.floor-plans__nav--next {
    right: 0;
}

.floor-plans__dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(28px, 4vw, 44px);
}

.floor-plans__dots button {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: width var(--dur) var(--ease-out),
        background var(--dur) var(--ease),
        border-radius var(--dur) var(--ease);
}

.floor-plans__dots button:hover {
    background: rgba(255, 255, 255, 0.4);
}

.floor-plans__dots button[aria-current="true"] {
    width: 26px;
    border-radius: 999px;
    border-color: var(--c-gold);
    background: var(--c-gold);
}

/* ---- one slide ---- */
.floor-plans__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: clamp(40px, 7vw, 90px);
    max-width: 1080px;
    margin-inline: auto;
}

.floor-plans__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.floor-plans__unit {
    margin-bottom: clamp(24px, 4vw, 36px);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
}

.floor-plans__table {
    width: 100%;
    max-width: 405px;
    border-collapse: collapse;
    font-size: var(--fs-body);
    letter-spacing: 0.02em;
}

.floor-plans__table th,
.floor-plans__table td {
    height: 50px;
    padding: 0 clamp(14px, 2.5vw, 25px);
    border: 1px solid var(--c-white);
}

.floor-plans__table th {
    font-weight: 600;
    text-align: left;
}

.floor-plans__table th:last-child,
.floor-plans__table td:last-child {
    text-align: center;
}

.floor-plans__figure {
    position: relative;
    width: 100%;
    max-width: 595px;
    overflow: hidden;
    background: var(--c-white);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.floor-plans__figure img {
    width: 100%;
}

@media (max-width: 992px) {
    .floor-plans__bar {
        grid-template-columns: 1fr;
        max-width: 650px;
    }

    .floor-plans__content {
        grid-template-columns: 1fr;
        gap: clamp(40px, 8vw, 65px);
        max-width: 650px;
    }

    .floor-plans__aside {
        width: 100%;
    }

    .floor-plans__figure {
        max-width: 100%;
    }

    .floor-plans__pattern--mid {
        display: none;
    }

    /* Arrows sit over the plan image, so they need their own contrast. */
    .floor-plans__nav {
        width: 40px;
        height: 40px;
        background: rgba(4, 51, 39, 0.55);
        backdrop-filter: blur(2px);
    }

    .floor-plans__nav--prev {
        left: -4px;
    }

    .floor-plans__nav--next {
        right: -4px;
    }
}

@media (max-width: 560px) {
    .floor-plans__table {
        font-size: var(--fs-small);
    }
}


/* ==========================================================================
   05.09  LOCATION  —  .location
   A tinted card that sinks into a full-bleed tinted band.
   ========================================================================== */
.location {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--section-y) 0;
}

/* full-bleed band the card sits half inside */
.location__band {
    position: absolute;
    z-index: -1;
    inset: auto 0 0 0;
    height: 56%;
    /* background: var(--c-sand); */
}

/* faint corner silhouettes */
.location__leaf {
    position: absolute;
    z-index: -2;
    color: rgba(16, 19, 18, 0.05);
    pointer-events: none;
}

.location__leaf--left {
    top: 40px;
    left: -90px;
    width: 230px;
}

.location__leaf--right {
    top: -70px;
    right: -70px;
    width: 260px;
    transform: scaleX(-1);
}

.location__head {
    margin-bottom: clamp(32px, 5vw, 56px);
    text-align: center;
}

.location__mark {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto clamp(20px, 4vw, 34px);
    color: var(--c-green-deep);
}

.location__place {
    margin-top: clamp(16px, 3vw, 26px);
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    color: var(--c-ink);
}

/* ---- card ---- */
.location__panel {
    padding: clamp(32px, 5vw, 56px) clamp(22px, 5vw, 68px) clamp(40px, 6vw, 64px);
    background: var(--c-sand);
}

.location__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.location__panel-icon {
    flex: none;
    width: clamp(34px, 5vw, 42px);
    height: auto;
}

.location__panel-label {
    padding-right: clamp(0px, 6vw, 90px);
    font-size: clamp(1rem, 1.6vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: 0.015em;
    color: var(--c-green-deep);
}

/* ---- list ---- */
.location__list {
    margin-bottom: clamp(36px, 5vw, 56px);
    list-style: none;
}

.location__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 120px;
    align-items: center;
    column-gap: 16px;
    padding: 7px 0;
    letter-spacing: 0.012em;
}

.location__name {
    min-width: 0;
}

.location__time,
.location__dist {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: center;
}

/* ---- actions ---- */
.location__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.location__actions .cta_button {
    min-width: 222px;
    font-size: clamp(0.9375rem, 1.4vw, 1rem);
}

@media (max-width: 768px) {
    .location__band {
        height: 64%;
    }

    .location__leaf {
        display: none;
    }

    .location__row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(16, 64, 47, 0.09);
    }

    .location__name {
        grid-column: 1 / -1;
    }

    .location__time {
        text-align: left;
        color: var(--c-green-deep);
    }

    .location__dist {
        text-align: right;
    }

    .location__panel-label {
        padding-right: 0;
    }

    .location__actions .cta_button {
        min-width: 0;
        width: 100%;
    }
}


/* ==========================================================================
   05.10  GALLERY  —  .gallery
   Owl Carousel: a full-bleed stage with a synced thumbnail rail floating
   over its lower edge.
   ========================================================================== */
.gallery {
    position: relative;
    background: var(--c-white);
}

.gallery__head {
    max-width: 1020px;
    margin-inline: auto;
    padding: var(--section-y) var(--gutter) clamp(28px, 4vw, 44px);
    text-align: center;
}

.gallery__eyebrow {
    margin-bottom: 18px;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-green-deep);
}

.gallery__stage {
    position: relative;
    overflow: hidden;
    background: #14100e;
}

.gallery__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8.1;
    max-height: 86vh;
    overflow: hidden;
}

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

/* Ken Burns drift on whichever slide is showing */
.gallery .owl-item.active .gallery__frame img {
    animation: gallery-kenburns 9s var(--ease-out) forwards;
}

@keyframes gallery-kenburns {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.11);
    }
}

/* Owl's fade transition, scoped so it can't touch other carousels */
.gallery .owl-carousel .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.gallery .owl-carousel .owl-animated-out {
    z-index: 0;
}

.gallery .owl-carousel .owl-animated-in {
    z-index: 1;
}

.gallery__scrim {
    position: absolute;
    z-index: 3;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(12, 10, 9, 0.62), rgba(12, 10, 9, 0));
    pointer-events: none;
}

/* ---- caption ---- */
.gallery__caption {
    position: absolute;
    z-index: 4;
    left: clamp(20px, 4vw, 52px);
    bottom: clamp(96px, 12vw, 132px);
    color: var(--c-white);
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.gallery__caption-index {
    display: block;
    margin-bottom: 8px;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    opacity: 0.82;
    animation: gallery-caption-in 800ms var(--ease-out) both;
}

.gallery__caption-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.375rem, 3.4vw, 2.25rem);
    line-height: 1.1;
    animation: gallery-caption-in 800ms var(--ease-out) both;
    animation-delay: 60ms;
}

@keyframes gallery-caption-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- thumbnail rail ---- */
.gallery__rail {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: clamp(14px, 2.6vw, 26px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 18px);
    padding: 0 12px;
}

.gallery__rail-viewport {
    width: min(640px, 68vw);
}

.gallery .gallery-thumbs .owl-stage-outer {
    padding: 6px 0;
}

.gallery__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: 3px;
    overflow: hidden;
    background: #241a14;
    opacity: 0.62;
    cursor: pointer;
    transform: translateY(0) scale(0.96);
    transition: opacity 450ms var(--ease-out),
        transform 450ms var(--ease-out),
        box-shadow 450ms var(--ease-out);
}

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

.gallery__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 450ms var(--ease-out);
}

.gallery__thumb:hover {
    opacity: 0.9;
    transform: translateY(-3px) scale(1);
}

.gallery__thumb.is-active {
    opacity: 1;
    transform: translateY(-6px) scale(1);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

.gallery__thumb.is-active::after {
    opacity: 1;
}

.gallery__thumb:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 3px;
}

/* ---- arrows ---- */
.gallery__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-white);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.gallery__arrow svg {
    width: 20px;
    height: 20px;
}

.gallery__arrow:hover {
    background: rgba(255, 255, 255, 0.16);
}

.gallery__arrow:active {
    transform: scale(0.92);
}

.gallery__arrow:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .gallery__frame {
        aspect-ratio: 4 / 4.4;
    }

    .gallery__caption {
        bottom: clamp(84px, 22vw, 110px);
    }

    .gallery__rail-viewport {
        width: 62vw;
    }
}


/* ==========================================================================
   05.11  ABOUT THE BUILDER  —  .about_builder
   ========================================================================== */
.about_builder {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 9vw, 70px) 0;
    background: var(--c-green-deep);
}

/* the brand mark, blown up, is the watermark */
.about_builder__watermark {
    position: absolute;
    z-index: 0;
    color: var(--c-green-soft);
    opacity: 0.55;
    pointer-events: none;
}

.about_builder__watermark--tl {
    top: 40px;
    left: clamp(-160px, -9vw, -60px);
    width: clamp(220px, 22vw, 330px);
}

.about_builder__watermark--br {
    right: clamp(-120px, -7vw, -40px);
    bottom: clamp(-140px, -8vw, -60px);
    width: clamp(240px, 26vw, 400px);
    transform: rotate(-18deg);
}

.about_builder__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.about_builder__crest {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto clamp(32px, 6vw, 74px);
    color: var(--c-gold);
}

.about_builder .section_title {
    margin-bottom: clamp(40px, 7vw, 9px);
    color: var(--c-white);
}

.about_builder__lockup {
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 2vw, 5px);
    margin-bottom: clamp(32px, 5vw, 20px);
}

.about_builder__lockup img {
    width: clamp(120px, 18vw, 140px);
}

.about_builder__copy {
    margin-bottom: 1em;
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: 0.01em;
    color: rgba(243, 241, 236, 0.9);
    text-wrap: pretty;
}

.about_builder__copy:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .about_builder__copy {
        line-height: 1.7;
        text-align: left;
    }
}


/* ==========================================================================
   05.12  CONTACT FORM  —  .contact-form
   ========================================================================== */
.contact-form {
    padding: var(--section-y) 0;
}

.contact-form__box {
    margin-top: clamp(36px, 6vw, 80px);
    padding: clamp(24px, 5vw, 60px);
    background: var(--c-sand);
}

.contact-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 40px);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: clamp(20px, 3vw, 40px);
}

.contact-form__row>* {
    flex: 1 1 240px;
}

.contact-form__field {
    margin-bottom: clamp(20px, 3vw, 40px);
}

.contact-form input,
.contact-form select {
    display: block;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--c-green);
    border-radius: 4px;
    background: transparent;
    line-height: 1.3;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.contact-form input::placeholder,
.contact-form select::placeholder {
    color: var(--c-muted);
    opacity: 1;
}

.contact-form input:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(198, 154, 90, 0.2);
}

.contact-form textarea {
    min-height: 200px;
    resize: vertical;
}

.contact-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
}

/* ---- custom checkbox ---- */
.contact-form .checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.85rem;
    cursor: pointer;
    user-select: none;
    font-size: var(--fs-small);
    line-height: 1.6;
}

.contact-form .checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.contact-form .checkbox__box {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 1px solid var(--c-green);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: background var(--dur) ease, border-color var(--dur) ease,
        box-shadow var(--dur) ease,
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-form .checkbox__check {
    width: 13px;
    height: 13px;
    color: var(--c-white);
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset var(--dur) cubic-bezier(0.34, 1.56, 0.64, 1) 50ms;
}

/* These three were previously written with single underscores
   (.checkbox_input / .checkbox_box) and never matched anything, so the
   checkbox had no visible checked state at all. */
.contact-form .checkbox__input:checked~.checkbox__box {
    background: var(--c-green);
    border-color: var(--c-green);
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(31, 58, 44, 0.15);
}

.contact-form .checkbox__input:checked~.checkbox__box .checkbox__check {
    stroke-dashoffset: 0;
}

.contact-form .checkbox__input:focus-visible~.checkbox__box {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.contact-form__submit .cta_button {
    margin: 0;
}

@media (max-width: 992px) {
    .contact-form__row>* {
        flex: 1 1 100%;
    }

    .contact-form__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-form__submit .cta_button {
        width: 100%;
    }
}


/* ==========================================================================
   06  GLOBAL PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* .u-reveal is animation-driven, so a near-zero duration still lands it
       at its final state via animation-fill-mode. Only the transform needs
       neutralising.

       Do NOT add `.amenities .apanel > *` here. Those panels are stacked in
       one grid cell and are hidden by opacity, so forcing them visible shows
       all eight at once, on top of each other. Their transition already
       snaps to the end state at this duration. */
    .u-reveal {
        opacity: 1;
        transform: none;
    }
}

@media print {

    .site-header,
    .gallery__rail,
    .amenities .anav,
    .amenities .adots,
    .cta_button {
        display: none !important;
    }

    .hero,
    .pricing,
    .floor-plans,
    .about_builder {
        background: none !important;
        color: #000 !important;
    }
}



/* --- footer ---  */

.footer {
    background: var(--green);
    color: #fff;
    padding: 60px;
}

.footer * {
    color: currentColor;
}

.footer .container {
    max-width: 1200px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer .footer_disclaimer {
    opacity: 0.8;
    font-size: 12px;
    text-align: center;
}

.footer .footer_rera_section {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
}

.footer .frera {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer .frera p {
    margin: 0;
}

.footer .disclaimer_text p {
    margin: 0;
}

.footer a {
    text-decoration: none;
}

.footer .footer_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer .footer_logo a,
.footer .footer_logo a img {
    display: block;
}

.footer .footer_logo img {
    max-width: 80px;
}

.footer .footer_inquire a {
    display: flex;
    font-size: 31px;
    line-height: 0;
    align-items: flex-end;
    cursor: pointer;
}

.footer .footer_inquire a span {
    display: block;
    position: relative;
    top: 26px;
    margin-left: 0px;
}

.footer .footer_middle {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 40px;
}

.footer .copyright p {
    margin: 0;
    font-size: 16px;
}

.footer .copyright h6 {
    font-size: 27px;
    color: var(--gold);
    margin-bottom: 20px;
    max-width: 70%;
}

.footer .footer_contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer .footer_contact p {
    margin: 0;
}

.footer .social_icons ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.footer .footermenu ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer .footermenu ul li {
    flex: 0 0 calc(50% - 10px);
    width: 100%;
}



/* ==========================================================================
   05.13  SITE MENU  —  .site-menu
   Full-screen overlay opened from the header burger.
 
   Closed state is `visibility: hidden` rather than `display: none` or the
   hidden attribute: it can be transitioned, and — importantly — it takes the
   links out of the tab order for free, so no focus trap is needed to stop
   Tab wandering into a menu nobody can see.
   ========================================================================== */
.site-menu {
    position: fixed;
    z-index: 200;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    /* overflow-y: auto; */
    overscroll-behavior: contain;
    background: var(--c-green-deep);
    color: var(--c-invert);
    transition: opacity 420ms var(--ease),
        visibility 0s linear 420ms;
    width: 100%;
    max-width: 100%;
}

.site-menu.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s, 0s;
}

/* the brand mark, oversized, bleeding off the corner */
.site-menu::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -8vw;
    bottom: -10vw;
    width: min(46vw, 520px);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(198, 154, 90, 0.10), transparent 70%);
    pointer-events: none;
}

.site-menu__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
    width: 100%;
    max-width: var(--maxw);
    min-height: 100%;
    margin-inline: auto;
    padding: clamp(88px, 12vh, 140px) var(--gutter) clamp(48px, 8vh, 80px);
    overflow: hidden;
}

.site-menu__close {
    position: absolute;
    top: clamp(24px, 4vw, 40px);
    right: var(--gutter);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: transparent;
    color: var(--c-invert);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
        background var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.site-menu__close svg {
    width: 20px;
    height: 20px;
}

.site-menu__close:hover {
    border-color: var(--c-gold);
    background: var(--c-gold);
    transform: rotate(90deg);
}

/* ---- links ---- */
.site-menu__list {
    list-style: none;
    counter-reset: none;
}

.site-menu__item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

/* staggered in, one after another, once the panel is up */
.site-menu.is-open .site-menu__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(120ms + var(--i, 0) * 45ms);
}

.site-menu__link {
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 2vw, 22px);
    padding: clamp(6px, 1vh, 11px) 0;
    color: var(--c-invert);
    text-decoration: none;
}

.site-menu__num {
    flex: none;
    width: 2.2em;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--c-gold);
    transition: transform var(--dur) var(--ease-out);
}

.site-menu__text {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 4.4vw, 3rem);
    line-height: 1.12;
    letter-spacing: 0.01em;
}

/* rule wipes in from the left on hover */
.site-menu__text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 100%;
    height: 1px;
    background: var(--c-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms var(--ease-out);
}

.site-menu__link:hover .site-menu__text::after,
.site-menu__link:focus-visible .site-menu__text::after {
    transform: scaleX(1);
}

.site-menu__link:hover .site-menu__num,
.site-menu__link:focus-visible .site-menu__num {
    transform: translateX(4px);
}

/* ---- contact column ---- */
.site-menu__aside {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 34px);
    align-self: center;
    padding-left: clamp(24px, 4vw, 56px);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms var(--ease-out) 380ms,
        transform 500ms var(--ease-out) 380ms;
}

.site-menu.is-open .site-menu__aside {
    opacity: 1;
    transform: none;
}

.site-menu__label {
    margin-bottom: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-gold);
}

.site-menu__detail {
    font-size: var(--fs-body);
    line-height: 1.7;
    color: rgba(243, 241, 236, 0.85);
}

.site-menu__detail a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-menu__detail a:hover {
    color: var(--c-white);
    border-bottom-color: var(--c-gold);
}

.site-menu__cta {
    align-self: flex-start;
    margin: 0;
}

.site-menu__fine {
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(243, 241, 236, 0.45);
}

/* the burger sits over the hero, so it scrolls away; keep it pinned while
   the menu is up so it can also close it */
body.is-menu-open {
    overflow: hidden;
}

@media (max-width: 992px) {
    .site-menu__inner {
        grid-template-columns: 1fr;
        align-content: center;
        gap: clamp(32px, 6vh, 56px);
    }

    .site-menu__aside {
        padding-left: 0;
        padding-top: clamp(24px, 4vh, 36px);
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
}

@media (max-width: 560px) {
    .site-menu__inner {
        padding-top: 92px;
    }

    .site-menu__link {
        padding: 5px 0;
    }
}



@media (min-width:768px) {
    .mobile_view {
        display: none;
    }

}


@media (max-width: 991px) {
    .footer .footer_middle {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 10px;
        justify-content: center;
        text-align: center;
    }

    .footer .footermenu ul {
        flex-direction: column;
        gap: 10px;
    }

    .footer .social_icons ul {
        justify-content: center;
    }

    .footer .copyright h6 {
        max-width: 100%;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .footer .footer_rera_section {
        flex-direction: column;
    }

    .footer .footer_top {
        flex-direction: column;
    }

    .footer .footer_inquire a span {
        top: 0;
        display: inline-block;
    }

    .footer .footer_inquire a {
        display: block;
    }

    .footer {
        padding: 60px 30px;
    }

    .footer .footer_disclaimer {
        text-align: center;
    }
}


@media (max-width:767px) {
    .mobile_view {
        display: block;
    }

    .hero__grid.dsk_view {
        display: none;
    }


    .hero__grid.mobile_view {
        position: relative;
        background: var(--c-sand);
        color: #000;
        padding: 30px 12px;
        min-height: auto;
    }

    .mobile_view h1.hero__headline {
        color: #c69a5a;
        font-size: 30px;
        display: initial;
        letter-spacing: 4px;
        line-height: 41px;
    }

    .mobile_view .hero__offer-lead {
        color: #000;
        margin-top: 14px;
    }

    .mobile_view .hero__offer-sub {
        color: #1f3a2c;
        margin-bottom: 20px;
    }

    .mobile_view .hero__rule {
        background: rgb(8 8 8 / 30%);
    }

    .mobile_view a.cta_button {
        padding: 7px 30px;
    }

    picture.hero__media {
        position: relative;
    }

    section.hero {
        padding: 0;
    }

}



@media (max-width: 600px) {
    .footer .frera {
        flex-direction: column;
        text-align: center;
    }

    h1.hero__headline {
        font-size: 24px;
        letter-spacing: 2px;
        line-height: normal;
    }

    h2.section_title {
        letter-spacing: 0;
    }

    .highlights__tab {
        padding: 6px 15px;
    }

    .highlights__carousel {
        padding: 10px 0;
    }
}


/* ==========================================================================
   05.20  QUICK RAIL  —  .quick-rail
   Fixed contact rail on the right edge: WhatsApp, brochure, enquire.
 
   Sits at z-index 150 — above the page and the .site-header (20), below the
   full-screen .site-menu (200) so the overlay covers it when the menu opens.
   No JS: these are three ordinary links.
   ========================================================================== */
.quick-rail {
    position: fixed;
    z-index: 150;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    width: 75px;
    padding: 4px 0;
    background: #B58655;
    border-radius: 26px 0 0 26px;
    box-shadow: 0 12px 34px rgba(16, 19, 18, 0.20);
}

.quick-rail__item {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding: 16px 4px;
    color: var(--c-white);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-align: center;
    transition: background var(--dur-fast) var(--ease);
    cursor: pointer;
}

/* rounded ends need to clip the hover wash to match the rail's shape */
.quick-rail__item:first-child {
    border-radius: 20px 0 0 0;
}

.quick-rail__item:last-child {
    border-radius: 0 0 0 20px;
}

.quick-rail__item:hover,
.quick-rail__item:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

.quick-rail__item:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: -3px;
}

/* fixed-size box keeps the three labels on a shared baseline whether or not
   the icon is ringed */
.quick-rail__ring {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
}

.quick-rail__ring--bare {
    border-color: transparent;
}

.quick-rail__icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* ---- becomes a bottom bar on small screens ---- */
@media (max-width: 768px) {
    .quick-rail {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: none;
        flex-direction: row;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 0;
        box-shadow: 0 -6px 22px rgba(16, 19, 18, 0.18);
        background: #fff;
    }

    .quick-rail__item {
        flex: 1;
        gap: 5px;
        padding: 5px 4px;
        font-size: 15px;
        border-radius: 0;
    }

    .quick-rail__ring {
        width: 30px;
        height: 30px;
        margin-bottom: 0px;
    }

    .quick-rail__icon {
        width: 17px;
        height: 17px;
    }

    /* stop the bar sitting on top of the footer's last line */
    .footer {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}

@media print {
    .quick-rail {
        display: none;
    }
}



/* ==========================================================================
   05.19  FAQ  —  .faq
   Accordion built on native <details>/<summary>. Fully usable with JS off;
   script.js only adds the "close the others" behaviour for browsers that
   don't yet support the name="" attribute on <details>.
   ========================================================================== */
.faq {
    background: var(--c-cream);
    padding: 70px 0;
}

.faq__list {
    max-width: 900px;
    margin: clamp(32px, 5vw, 56px) auto 0;
    border-top: 1px solid var(--c-sand-line);
}

.faq__item {
    border-bottom: 1px solid var(--c-sand-line);
}

/* the row itself: question left, indicator right */
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 32px);
    padding: clamp(20px, 3vw, 28px) 0;
    cursor: pointer;
    list-style: none;
    /* kill the default triangle */
    color: var(--c-green-deep);
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.45;
    letter-spacing: 0.01em;
    transition: color var(--dur-fast) var(--ease);
}

/* Safari/older WebKit uses its own pseudo-element for the marker */
.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover {
    color: var(--c-gold);
}

.faq__q:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 4px;
}

.faq__q-text {
    flex: 1;
}

/* plus that becomes a minus — two bars, one rotated */
.faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--c-sand-line);
    border-radius: 50%;
    transition: background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__q {
    color: var(--c-gold);
}

.faq__item[open] .faq__icon {
    background: var(--c-sand);
    border-color: transparent;
}

/* collapse the vertical bar to leave a minus */
.faq__item[open] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

.faq__a {
    padding: 0 clamp(48px, 8vw, 66px) clamp(22px, 3vw, 30px) 0;
    color: var(--c-muted);
    font-size: var(--fs-body);
    line-height: 1.75;
}

p.crafted {
    color: #c69a5a;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 700;
}

/* Animates the open/close in browsers that support it; elsewhere the panel
   simply appears, which is the correct fallback. */
@supports (interpolate-size: allow-keywords) {
    .faq__item {
        interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: height var(--dur) var(--ease),
            opacity var(--dur) var(--ease),
            content-visibility var(--dur) allow-discrete;
    }

    .faq__item[open]::details-content {
        height: auto;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .faq__q {
        gap: 14px;
        font-size: 1rem;
    }

    .faq__icon {
        width: 28px;
        height: 28px;
    }

    .faq__icon::before,
    .faq__icon::after {
        width: 11px;
    }

    .faq__a {
        padding-right: 0;
        font-size: var(--fs-small);
    }
}


@media (min-width:768px) {

    a.quick-rail__item.mobile_icon {
        display: none;
    }
}

@media (max-width:767px) {

    a.quick-rail__item.mobile_icon {
        display: block;
        background: #B58655;
        margin: 6px 5px;
        border-radius: 0;
        letter-spacing: 0.7px;
    }

    .quick-rail__item:first-child,
    .quick-rail__item:nth-child(2),
    .quick-rail__item:nth-child(3) {
        display: none;
    }
}





/* ==========================================================================
   05.18b  ENQUIRE BAR  —  .enquire-bar
   Horizontal lead form pinned under the hero. One grid row on desktop:
   residence choice, name, phone, email, submit. The choice cell is two
   lines tall (label + pills) so the row aligns on `end`, which puts every
   control on a shared baseline.
   ========================================================================== */
.enquire-bar {
    /* padding: clamp(28px, 4vw, 44px) 0; */
    background: var(--c-cream);
    position: RELATIVE;
}

.enquire-bar__box {
    padding: clamp(14px, 3vw, 14px) clamp(20px, 3vw, 36px);
    background: var(--c-white);
    border: 1px solid var(--c-sand-line);
    box-shadow: 0 -14px 40px rgba(16, 19, 18, 0.1);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;

    /* Parked below the fold until JS adds `.is-stuck` on the section.
       visibility:hidden also pulls the inputs out of the tab order, so
       nobody can Tab into a bar they cannot see. */
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform .35s ease, opacity .25s ease, visibility .35s;
}

.enquire-bar.is-stuck .enquire-bar__box {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .enquire-bar__box {
        transition: none;
    }
}

.enquire-bar__mobile-heading {
    display: none;
}

.enquire-bar__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(16px, 2vw, 26px);
}

.enquire-bar__field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.enquire-bar__label {
    color: var(--c-green-deep);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* the question is the longest label in the row and must be free to wrap */
.enquire-bar__field--choice .enquire-bar__label {
    white-space: normal;
}

.enquire-bar__form input[type="text"],
.enquire-bar__form input[type="tel"],
.enquire-bar__form input[type="email"] {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--c-sand-line);
    background: var(--c-white);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    transition: border-color var(--dur-fast) var(--ease);
}

.enquire-bar__form input::placeholder {
    color: var(--c-muted);
}

.enquire-bar__form input:focus-visible {
    outline: none;
    border-color: var(--c-gold);
}

/* ---- residence select ----
   Native <select> with appearance:none, so the control is a real dropdown
   (OS picker on mobile, keyboard-accessible everywhere) while the caret and
   border match the text inputs beside it. */
.enquire-bar__select {
    position: relative;
    display: block;
}

.enquire-bar__select select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 40px;
    padding: 0 44px 0 16px;
    border: 1px solid var(--c-sand-line);
    border-radius: 0;
    background: var(--c-white);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease);
}

.enquire-bar__select select:hover {
    border-color: var(--c-gold);
}

.enquire-bar__select select:focus-visible {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(198, 154, 90, 0.18);
}

/* chevron drawn with borders; pointer-events off so clicks reach the select */
.enquire-bar__caret {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--c-green-deep);
    border-bottom: 1.5px solid var(--c-green-deep);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    transition: border-color var(--dur-fast) var(--ease);
}

.enquire-bar__select:hover .enquire-bar__caret {
    border-color: var(--c-gold);
}

/* the dropdown list itself is OS-rendered; this only affects Firefox/Windows */
.enquire-bar__select option {
    color: var(--c-ink);
    background: var(--c-white);
}

.enquire-bar__field--action .cta_button {
    height: 44px;
    white-space: nowrap;
    FONT-SIZE: 16PX;
}

.enquire-bar__consent {
    margin-top: clamp(14px, 2vw, 18px);
}

.enquire-bar__consent .checkbox__label {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--c-muted);
}


.is-scrolled header.site-header {
    display: block;
    position: relative;
    inset: auto;
    z-index: 9999;
    position: fixed;
    width: 100%;
    background: #ebe4d9;
    padding: 7px 0;
}

.is-scrolled .site-header__menu span {
    background: #000;
}

.is-scrolled .site-header__icon {
    stroke: #000;
}

.is-scrolled .site-header__visit {
    color: #000;
}

/* ---- reflow: 3 columns, then 2, then stacked ---- */
@media (max-width: 1100px) {
    .enquire-bar__form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* the question is long, so its cell takes a full row of its own; the
       select is capped so it doesn't stretch the width of the container */
    .enquire-bar__field--choice {
        grid-column: 1 / -1;
    }

    .enquire-bar__select {
        max-width: 320px;
    }
}

@media (max-width: 760px) {


    .enquire-bar__mobile-heading {
        display: block;
        margin-bottom: 20px;
        text-align: center;
        font-family: var(--font-body);
        color: var(--c-green-deep);
        font-size: 24px;
        font-weight: 600;
    }

    .enquire-bar__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enquire-bar__field--action {
        grid-column: 1 / -1;
    }

    .enquire-bar__field--action .cta_button {
        width: 100%;
    }

    .enquire-bar__select {
        max-width: 100%;
    }

    .enquire-bar__box {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }
}

@media (max-width: 520px) {
    .enquire-bar__form {
        grid-template-columns: 1fr;
    }
}

/* Custom Popup Form */
.custom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-popup-content {
    background: #ebe4d9;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
    max-height: 95vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.custom-popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    z-index: 10;
}

.custom-popup-body {
    padding: 40px;
}

.popup_title {
    font-family: var(--font-heading, serif);
    color: var(--c-green-deep, #143e33);
    text-align: center;
    margin-bottom: 25px;
    font-size: 32px;
    font-weight: 700;
}

.popup-form-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popup-input-group input,
.popup-input-group select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--c-sand-line, #ccc);
    background: #fff;
    color: var(--c-ink, #333);
    font-family: var(--font-body, inherit);
    font-size: 16px;
    border-radius: 4px;
    transition: border-color 0.3s;
}

.popup-input-group input:focus,
.popup-input-group select:focus {
    outline: none;
    border-color: var(--c-gold, #c69a5a);
}

.popup-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    cursor: pointer;
}

.popup-checkbox .checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.popup-checkbox .checkbox__box {
    width: 18px;
    height: 18px;
    border: 1px solid var(--c-sand-line, #ccc);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    flex-shrink: 0;
    margin-top: 0px;
    transition: background 0.2s, border-color 0.2s;
}

.popup-checkbox .checkbox__check {
    width: 14px;
    height: 14px;
    stroke: #fff;
    opacity: 0;
    transition: opacity 0.2s;
}

.popup-checkbox .checkbox__input:checked+.checkbox__box {
    background: var(--c-gold, #c69a5a);
    border-color: var(--c-gold, #c69a5a);
}

.popup-checkbox .checkbox__input:checked+.checkbox__box .checkbox__check {
    opacity: 1;
}

.popup-checkbox .checkbox__label {
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-muted, #666);
    user-select: none;
}

.popup-submit-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    border-radius: 4px;
    margin-top: 10px;
}

@media (max-width: 760px) {
    .custom-popup-body {
        padding: 15px;
    }
}