/* =========================================================
   VILLORA
   Home Page Styles

   File:
   assets/css/home.css

   Purpose:
   - Header / Navigation
   - Hero
   - Quick Highlights
   - Villora Story
   - Villa Showcase
   - Experience Visual
   - Why Villora
   - Weddings
   - Occasions
   - Gallery
   - Testimonials
   - Booking
   - Locations
   - FAQ
   - Final CTA
   - Footer
   - Dialogs
   - Mobile Booking CTA base
========================================================= */


/* =========================================================
   01. SITE HEADER
========================================================= */

.site-header {
    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    z-index: var(--z-header);

    width: 100%;

    color: var(--color-white);

    transition:
        background-color var(--duration-normal) var(--ease-default),
        border-color var(--duration-normal) var(--ease-default),
        box-shadow var(--duration-normal) var(--ease-default),
        backdrop-filter var(--duration-normal) var(--ease-default);
}

.site-header::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background: rgba(255, 255, 255, 0.12);

    transition:
        background-color var(--duration-normal) var(--ease-default);
}

.site-header.is-scrolled {
    background: rgba(11, 13, 15, 0.88);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header.is-scrolled::after {
    background: rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   Header Container
--------------------------------------------------------- */

.site-header__container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: var(--space-8);

    min-height: 88px;
}



/* ---------------------------------------------------------
   Brand
--------------------------------------------------------- */

.site-header__brand {
    position: relative;

    z-index: 2;

    display: inline-flex;
    align-items: center;

    width: fit-content;

    justify-self: start;
}

.site-header__logo {
    width: auto;
    height: 46px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Navigation
--------------------------------------------------------- */

.site-nav {
    display: flex;
    align-items: center;

    gap: clamp(1.5rem, 3vw, 3rem);

    justify-self: center;
}

.site-nav__link {
    position: relative;

    padding-block: 0.6rem;

    color: rgba(255, 255, 255, 0.82);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);

    transition:
        color var(--duration-normal) var(--ease-default);
}

.site-nav__link::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background: var(--color-gold-light);

    transform: scaleX(0);
    transform-origin: right center;

    transition:
        transform var(--duration-normal) var(--ease-luxury);
}

.site-nav__link:hover,
.site-nav__link.is-active {
    color: var(--color-white);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* ---------------------------------------------------------
   Header Actions
--------------------------------------------------------- */

.site-header__actions {
    display: flex;
    align-items: center;

    gap: var(--space-4);

    justify-self: end;
}

.site-header__cta {
    min-height: 48px;

    padding-inline: 1.35rem;
}


/* ---------------------------------------------------------
   Menu Toggle
--------------------------------------------------------- */

.menu-toggle {
    position: relative;

    display: none;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;

    color: var(--color-white);
}

.menu-toggle span {
    position: absolute;

    width: 18px;
    height: 1px;

    background: currentColor;

    transition:
        transform var(--duration-normal) var(--ease-luxury),
        top var(--duration-normal) var(--ease-luxury);
}

.menu-toggle span:first-child {
    top: 20px;
}

.menu-toggle span:last-child {
    top: 26px;
}

.menu-toggle.is-open span:first-child {
    top: 23px;

    transform: rotate(45deg);
}

.menu-toggle.is-open span:last-child {
    top: 23px;

    transform: rotate(-45deg);
}


/* =========================================================
   02. HERO
========================================================= */

.hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100svh;

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);
}


/* ---------------------------------------------------------
   Hero Media
--------------------------------------------------------- */

.hero__media {
    position: absolute;

    inset: -7% 0;

    z-index: 0;

    overflow: hidden;
}

.hero__media picture,
.hero__media img {
    width: 100%;
    height: 100%;
}

.hero__image {
    object-fit: cover;
    object-position: center;

    transform: scale(1.03);
}

.hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 7, 10, 0.78) 0%,
            rgba(4, 7, 10, 0.51) 38%,
            rgba(4, 7, 10, 0.18) 72%,
            rgba(4, 7, 10, 0.08) 100%),
        linear-gradient(180deg,
            rgba(4, 7, 10, 0.32) 0%,
            rgba(4, 7, 10, 0.04) 45%,
            rgba(4, 7, 10, 0.46) 100%);
}


/* ---------------------------------------------------------
   Hero Container
--------------------------------------------------------- */

.hero__container {
    position: relative;

    z-index: var(--z-content);

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100svh;

    padding-top: 9rem;
    padding-bottom: 12rem;
}


/* ---------------------------------------------------------
   Hero Content
--------------------------------------------------------- */

.hero__content {
    width: min(980px, 90%);

    margin-inline: auto;

    text-align: center;
}

.hero__eyebrow {
    display: flex;

    width: fit-content;

    margin-inline: auto;

    color: var(--color-gold-light);
}

.hero__title {
    max-width: 930px;

    margin-top: var(--space-6);
    margin-inline: auto;

    font-size:
        clamp(4rem,
            7.8vw,
            8.6rem);

    font-weight: var(--font-weight-medium);

    letter-spacing: -0.065em;

    line-height: 0.94;

    text-align: center;

    text-wrap: balance;
}

.hero__title-accent {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: var(--font-weight-medium);

    color: var(--color-gold-light);

    letter-spacing: -0.035em;
}

.hero__description {
    max-width: 660px;

    margin-top: var(--space-8);
    margin-inline: auto;

    color: rgba(255, 255, 255, 0.82);

    font-size: var(--text-md);

    line-height: 1.85;

    text-align: center;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: var(--space-4);

    margin-top: var(--space-8);
}

.hero__categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: var(--space-4);

    margin-top: var(--space-10);

    color: rgba(255, 255, 255, 0.64);

    font-size: var(--text-xs);

    font-weight: var(--font-weight-medium);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.hero__categories li {
    display: inline-flex;
    align-items: center;

    gap: var(--space-4);
}

.hero__categories li:not(:last-child)::after {
    content: "";

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--color-gold);
}


/* =========================================================
   03. HERO SEARCH / QUICK AVAILABILITY
========================================================= */

.hero-search {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: calc(var(--z-content) + 1);

    width: min(calc(100% - (var(--container-padding) * 2)),
            1200px);

    margin-inline: auto;

    transform: translateY(50%);
}

.hero-search__form {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) auto;

    align-items: stretch;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);

    background: rgba(250, 249, 246, 0.97);

    box-shadow: var(--shadow-medium);

    color: var(--color-text);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.hero-search__field {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: var(--space-2);

    min-height: 88px;

    padding: 1.1rem 1.4rem;
}

.hero-search__field:not(:first-child)::before {
    content: "";

    position: absolute;

    top: 22%;
    bottom: 22%;
    left: 0;

    width: 1px;

    background: var(--color-border);
}

.hero-search__label {
    color: var(--color-muted);

    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.hero-search__input {
    min-height: auto;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.hero-search__input:focus {
    box-shadow: none;
}

.hero-search__submit {
    min-width: 190px;

    border-radius: 0;
}


/* =========================================================
   04. QUICK HIGHLIGHTS
========================================================= */

.quick-highlights {
    padding-top:
        calc(var(--section-space-small) + 2rem);

    padding-bottom: var(--section-space-small);

    background: var(--color-white);
}

.quick-highlights__list {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.quick-highlights__item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 94px;

    padding: 1.5rem;

    color: var(--color-text-soft);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);

    text-align: center;
}

.quick-highlights__item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 24%;
    right: 0;
    bottom: 24%;

    width: 1px;

    background: var(--color-border);
}


/* =========================================================
   05. VILLORA STORY
========================================================= */

.villora-story {
    overflow: hidden;

    background: var(--color-white);
}

.villora-story__grid {
    display: grid;

    grid-template-columns:
        minmax(220px, 0.58fr) minmax(0, 1.42fr);

    gap: clamp(3rem, 9vw, 10rem);
}

.villora-story__meta {
    display: flex;
    flex-direction: column;

    justify-content: space-between;

    gap: var(--space-16);
}

.villora-story__intro {
    max-width: 300px;

    color: var(--color-muted);

    font-size: var(--text-sm);

    line-height: 1.8;

    text-align: justify;
    text-align-last: left;
}

.villora-story__content {
    max-width: 970px;
}

.villora-story__content .section-title {
    margin-top: 0;
}

.villora-story__content .section-description {
    margin-top: var(--space-8);
    margin-left: auto;

    max-width: 590px;
}

.villora-story__content .text-link {
    margin-top: var(--space-8);
    margin-left: auto;
}


/* =========================================================
   06. VILLAS SECTION
========================================================= */

.villas-section {
    background: var(--color-ivory);
}

.villa-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   Villa Card
--------------------------------------------------------- */

.villa-card {
    position: relative;
}

.villa-card:nth-child(even) {
    margin-top: clamp(4rem, 8vw, 9rem);
}


/* ---------------------------------------------------------
   Villa Media
--------------------------------------------------------- */

.villa-card__media {
    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--color-ivory-dark);
}

.villa-card__media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 65%,
            rgba(0, 0, 0, 0.18) 100%);

    pointer-events: none;
}

.villa-card__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s var(--ease-luxury);
}

.villa-card:hover .villa-card__media img {
    transform: scale(1.035);
}

.villa-card__index {
    position: absolute;

    top: var(--space-5);
    left: var(--space-5);

    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;

    padding-inline: 0.7rem;

    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--radius-pill);

    background: rgba(11, 13, 15, 0.26);

    color: var(--color-white);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ---------------------------------------------------------
   Villa Content
--------------------------------------------------------- */

.villa-card__content {
    padding-top: var(--space-6);
}

.villa-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-3);

    color: var(--color-muted);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.villa-card__meta span:not(:last-child)::after {
    content: "·";

    margin-left: var(--space-3);

    color: var(--color-gold-dark);
}

.villa-card__title {
    margin-top: var(--space-4);

    font-size:
        clamp(2rem,
            3.5vw,
            3.7rem);

    font-weight: var(--font-weight-medium);

    letter-spacing: -0.045em;
}

.villa-card__features {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top: var(--space-4);

    color: var(--color-text-soft);

    font-size: var(--text-sm);
}

.villa-card__features span:not(:last-child)::after {
    content: "·";

    margin-left: var(--space-3);

    color: var(--color-gold-dark);
}


/* ---------------------------------------------------------
   Villa Footer
--------------------------------------------------------- */

.villa-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-6);

    margin-top: var(--space-8);

    padding-top: var(--space-5);

    border-top: 1px solid var(--color-border);
}

.villa-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 0.35rem;
}

.villa-card__price>span {
    width: 100%;

    color: var(--color-muted);

    font-size: var(--text-xs);

    text-transform: uppercase;

    letter-spacing: var(--tracking-wide);
}

.villa-card__price strong {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}

.villa-card__price small {
    color: var(--color-muted);

    font-size: var(--text-xs);
}


/* =========================================================
   07. EXPERIENCE VISUAL
========================================================= */

.experience-visual {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: min(88svh, 920px);

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);
}

.experience-visual__media {
    position: absolute;

    inset: -8% 0;

    overflow: hidden;
}

.experience-visual__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.experience-visual__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(7, 9, 12, 0.08) 0%,
            rgba(7, 9, 12, 0.14) 38%,
            rgba(7, 9, 12, 0.76) 100%);
}

.experience-visual__content {
    position: relative;

    z-index: var(--z-content);

    width: 100%;

    padding-bottom: clamp(4rem, 9vw, 8rem);
}

.experience-visual .section-eyebrow {
    color: var(--color-gold-light);
}

.experience-visual__title {
    max-width: 950px;

    margin-top: var(--space-6);

    font-size: var(--heading-lg);

    font-weight: var(--font-weight-medium);

    letter-spacing: -0.06em;

    line-height: 0.98;
}


/* =========================================================
   08. WHY VILLORA
========================================================= */

.why-villora {
    background: var(--color-navy);

    color: var(--color-white);
}

.why-villora .section-eyebrow {
    color: var(--color-gold-light);
}

.why-villora .section-title {
    color: var(--color-white);
}

.why-villora__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: var(--space-16);

    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.experience-card {
    position: relative;

    min-height: 330px;

    padding:
        var(--space-8) clamp(1.5rem, 2.5vw, 2.5rem);

    border-right: 1px solid var(--color-border-light);
}

.experience-card:last-child {
    border-right: 0;
}

.experience-card__number {
    display: block;

    color: var(--color-gold-light);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);
}

.experience-card__title {
    max-width: 230px;

    margin-top: clamp(5rem, 8vw, 8rem);

    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);

    letter-spacing: -0.03em;

    line-height: 1.25;
}

.experience-card__description {
    margin-top: var(--space-5);

    color: rgba(255, 255, 255, 0.62);

    font-size: var(--text-sm);

    line-height: 1.8;

    text-align: justify;
    text-align-last: left;
}


/* =========================================================
   09. WEDDINGS
========================================================= */

.weddings-section {
    overflow: hidden;

    background: var(--color-ivory);
}

.weddings-section__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr) minmax(380px, 0.92fr);

    gap: clamp(4rem, 8vw, 9rem);

    align-items: center;
}


/* ---------------------------------------------------------
   Wedding Media
--------------------------------------------------------- */

.weddings-section__media {
    position: relative;
}

.weddings-section__image-wrap {
    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--color-ivory-dark);
}

.weddings-section__image-wrap img {
    width: 100%;
    height: 112%;

    object-fit: cover;
}


/* ---------------------------------------------------------
   Wedding Content
--------------------------------------------------------- */

.weddings-section__content {
    max-width: 620px;
}

.weddings-section__content .section-title {
    margin-top: var(--space-6);
}

.weddings-section__content .section-description {
    margin-top: var(--space-8);
}

.weddings-section__partner {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    margin-top: var(--space-8);

    padding-top: var(--space-6);

    border-top: 1px solid var(--color-border);
}

.weddings-section__partner-label {
    color: var(--color-muted);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.weddings-section__partner strong {
    font-family: var(--font-accent);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: var(--font-weight-medium);
}


/* ---------------------------------------------------------
   Wedding Package
--------------------------------------------------------- */

.wedding-package {
    margin-top: var(--space-8);
}

.wedding-package:empty {
    display: none;
}

.wedding-package__card {
    padding: var(--space-6);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.42);
}

.wedding-package__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-6);
}

.wedding-package__name {
    font-size: var(--text-xl);
}

.wedding-package__price {
    flex-shrink: 0;

    color: var(--color-gold-dark);

    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}

.wedding-package__includes {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-3);

    margin-top: var(--space-6);
}

.wedding-package__includes li {
    position: relative;

    padding-left: 1.1rem;

    color: var(--color-text-soft);

    font-size: var(--text-sm);

    line-height: 1.6;
}

.wedding-package__includes li::before {
    content: "";

    position: absolute;

    top: 0.7em;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-gold);
}

.weddings-section__disclaimer {
    margin-top: var(--space-5);

    color: var(--color-muted);

    font-size: var(--text-xs);

    line-height: 1.65;
}

.weddings-section__content>.button {
    margin-top: var(--space-8);
}


/* =========================================================
   10. OCCASIONS
========================================================= */

.occasions {
    overflow: hidden;

    background: var(--color-white);
}

.occasions__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap:
        var(--space-4) var(--space-6);

    max-width: 1100px;

    margin: var(--space-16) auto 0;
}

.occasion-item {
    position: relative;

    padding:
        1.1rem 1.7rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    background: transparent;

    color: var(--color-text);

    font-family: var(--font-accent);
    font-size:
        clamp(1.3rem,
            2vw,
            1.9rem);

    font-style: italic;

    transition:
        background-color var(--duration-normal) var(--ease-default),
        color var(--duration-normal) var(--ease-default),
        border-color var(--duration-normal) var(--ease-default),
        transform var(--duration-normal) var(--ease-default);
}

.occasion-item:hover {
    transform: translateY(-3px);

    border-color: var(--color-gold);

    background: var(--color-gold);

    color: var(--color-black);
}


/* =========================================================
   11. GALLERY
========================================================= */

.gallery-section {
    background: var(--color-black);

    color: var(--color-white);
}

.gallery-section .section-eyebrow {
    color: var(--color-gold-light);
}

.gallery-section .section-title {
    color: var(--color-white);
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-auto-rows: 170px;

    gap: var(--space-4);
}

.gallery-item {
    position: relative;

    grid-column: span 4;
    grid-row: span 3;

    overflow: hidden;

    background: var(--color-black-soft);
}

.gallery-item--large {
    grid-column: span 8;
    grid-row: span 4;
}

.gallery-item--wide {
    grid-column: span 8;
    grid-row: span 3;
}

.gallery-item::after {
    content: "VIEW";

    position: absolute;

    right: var(--space-5);
    bottom: var(--space-5);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;

    padding-inline: 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--radius-pill);

    background: rgba(11, 13, 15, 0.24);

    color: var(--color-white);

    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);

    opacity: 0;

    transform: translateY(10px);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        opacity var(--duration-normal) var(--ease-default),
        transform var(--duration-normal) var(--ease-default);
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.1s var(--ease-luxury),
        filter 1.1s var(--ease-luxury);
}

.gallery-item:hover img {
    transform: scale(1.035);

    filter: brightness(0.82);
}

.gallery-item:hover::after {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   12. TESTIMONIALS
========================================================= */

.testimonials-section {
    background: var(--color-ivory);
}

.testimonials-section__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.7fr) minmax(0, 1.3fr);

    gap: clamp(4rem, 9vw, 10rem);

    align-items: start;
}

.testimonial-slider {
    min-width: 0;
}

.testimonial-card {
    position: relative;

    padding-top: var(--space-6);

    border-top: 1px solid var(--color-border);
}

.testimonial-card__quote-mark {
    display: block;

    margin-bottom: var(--space-8);

    color: var(--color-gold);

    font-family: var(--font-accent);
    font-size: 5rem;

    line-height: 0.5;
}

.testimonial-card__quote {
    max-width: 780px;

    font-family: var(--font-accent);
    font-size:
        clamp(2rem,
            4vw,
            4rem);

    font-style: italic;

    line-height: 1.16;

    letter-spacing: -0.025em;
}

.testimonial-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-4);

    margin-top: var(--space-8);

    color: var(--color-muted);

    font-size: var(--text-sm);
}

.testimonial-card__rating {
    color: var(--color-gold-dark);

    letter-spacing: 0.12em;
}


/* =========================================================
   13. BOOKING
========================================================= */

.booking-section {
    background: var(--color-navy);

    color: var(--color-white);
}

.booking-section__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr) minmax(500px, 1.28fr);

    gap: clamp(4rem, 8vw, 9rem);

    align-items: start;
}

.booking-section .section-eyebrow {
    color: var(--color-gold-light);
}

.booking-section .section-title {
    color: var(--color-white);
}

.booking-section .section-description {
    margin-top: var(--space-8);

    color: rgba(255, 255, 255, 0.64);
}

.booking-section__intro {
    position: sticky;

    top: 140px;
}

.booking-section__note {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    margin-top: var(--space-10);
}

.booking-section__note span {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    color: rgba(255, 255, 255, 0.64);

    font-size: var(--text-sm);
}

.booking-section__note span::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-gold);
}


/* ---------------------------------------------------------
   Booking Panel
--------------------------------------------------------- */

.booking-panel {
    padding:
        clamp(2rem, 4vw, 4rem);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);

    background: var(--color-white);

    color: var(--color-text);

    box-shadow: var(--shadow-dark);
}

.booking-form {
    display: flex;
    flex-direction: column;

    gap: var(--space-6);
}

.booking-form__group {
    display: flex;
    flex-direction: column;

    gap: var(--space-4);
}

.booking-form__legend {
    margin-bottom: var(--space-4);
}


/* ---------------------------------------------------------
   Booking Intent
--------------------------------------------------------- */

.booking-intents {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-3);
}

.booking-intent {
    position: relative;

    cursor: pointer;
}

.booking-intent input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.booking-intent span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0.75rem 1.15rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    background: transparent;

    color: var(--color-text-soft);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    transition:
        background-color var(--duration-normal) var(--ease-default),
        border-color var(--duration-normal) var(--ease-default),
        color var(--duration-normal) var(--ease-default);
}

.booking-intent input:checked+span {
    border-color: var(--color-black);

    background: var(--color-black);

    color: var(--color-white);
}

.booking-intent input:focus-visible+span {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   Booking Dynamic Fields
--------------------------------------------------------- */

.booking-fields {
    display: flex;
    flex-direction: column;

    gap: var(--space-5);
}


/* ---------------------------------------------------------
   Submit
--------------------------------------------------------- */

.booking-form__submit {
    width: 100%;

    min-height: 60px;

    margin-top: var(--space-2);
}

.booking-form__disclaimer {
    color: var(--color-muted);

    font-size: var(--text-xs);

    line-height: 1.7;

    text-align: center;
}


/* =========================================================
   14. LOCATIONS
========================================================= */

.locations-section {
    background: var(--color-white);
}

.location-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--color-border);
}

.location-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-8);

    min-height: 230px;

    padding:
        var(--space-8) clamp(1rem, 3vw, 3rem);

    border-bottom: 1px solid var(--color-border);
}

.location-card:nth-child(odd) {
    border-right: 1px solid var(--color-border);

    padding-left: 0;
}

.location-card__area {
    color: var(--color-gold-dark);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.location-card__title {
    margin-top: var(--space-3);

    font-size:
        clamp(1.6rem,
            2.5vw,
            2.5rem);

    letter-spacing: -0.035em;
}

.location-card__address {
    max-width: 430px;

    margin-top: var(--space-4);

    color: var(--color-muted);

    font-size: var(--text-sm);

    line-height: 1.7;
}


/* ---------------------------------------------------------
   Map
--------------------------------------------------------- */

.villa-map {
    position: relative;

    min-height: 460px;

    margin-top: var(--space-12);

    overflow: hidden;

    border-radius: var(--radius-md);

    background: var(--color-ivory);
}

.villa-map:empty {
    display: none;
}


/* =========================================================
   15. FAQ
========================================================= */

.faq-section {
    background: var(--color-ivory);
}

.faq-section__grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.72fr) minmax(0, 1.28fr);

    gap: clamp(4rem, 9vw, 10rem);

    align-items: start;
}

.faq-section__intro {
    position: sticky;

    top: 140px;
}

.faq-section__intro .section-description {
    margin-top: var(--space-8);
}

.faq-list {
    border-top: 1px solid var(--color-border);
}


/* ---------------------------------------------------------
   FAQ Item
--------------------------------------------------------- */

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-8);

    width: 100%;

    padding:
        var(--space-6) 0;

    text-align: left;
}

.faq-item__question {
    max-width: 780px;

    font-size:
        clamp(1.05rem,
            1.7vw,
            1.35rem);

    font-weight: var(--font-weight-medium);

    line-height: 1.5;
}

.faq-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    font-size: 1.2rem;

    transition:
        transform var(--duration-normal) var(--ease-luxury),
        background-color var(--duration-normal) var(--ease-default),
        border-color var(--duration-normal) var(--ease-default);
}

.faq-item__trigger:hover .faq-item__icon {
    border-color: var(--color-gold);

    background: var(--color-gold);
}

.faq-item.is-open .faq-item__icon {
    transform: rotate(45deg);
}

.faq-item__content {
    overflow: hidden;

    max-height: 0;

    padding:
        0 clamp(3rem, 6vw, 6rem) 0 0;

    opacity: 0;

    transition:
        max-height 650ms var(--ease-luxury),

        opacity 350ms var(--ease-default),

        padding 500ms var(--ease-luxury);
}


.faq-item.is-open .faq-item__content {
    opacity: 1;

    padding-bottom: var(--space-6);
}

.faq-item__content p {
    max-width: 760px;

    color: var(--color-text-soft);

    font-size: var(--text-sm);

    line-height: 1.9;

    text-align: justify;
    text-align-last: left;
}


/* =========================================================
   16. FINAL CTA
========================================================= */

.final-cta {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 92svh;

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);
}

.final-cta__media {
    position: absolute;

    inset: -8% 0;

    overflow: hidden;
}

.final-cta__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.final-cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(5, 7, 9, 0.78) 0%,
            rgba(5, 7, 9, 0.48) 50%,
            rgba(5, 7, 9, 0.28) 100%),
        linear-gradient(180deg,
            rgba(5, 7, 9, 0.12) 0%,
            rgba(5, 7, 9, 0.42) 100%);
}

.final-cta__content {
    position: relative;

    z-index: var(--z-content);

    padding-block:
        clamp(7rem,
            12vw,
            12rem);
}

.final-cta .section-eyebrow {
    color: var(--color-gold-light);
}

.final-cta__title {
    max-width: 1050px;

    margin-top: var(--space-6);

    font-size:
        clamp(3.5rem,
            7.5vw,
            8rem);

    font-weight: var(--font-weight-medium);

    letter-spacing: -0.065em;

    line-height: 0.96;
}

.final-cta__description {
    max-width: 560px;

    margin-top: var(--space-8);

    color: rgba(255, 255, 255, 0.68);

    font-size: var(--text-md);

    line-height: 1.8;

    text-align: justify;
    text-align-last: left;
}

.final-cta__content>.button {
    margin-top: var(--space-8);
}

.final-cta__categories {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-4);

    margin-top: var(--space-10);

    color: rgba(255, 255, 255, 0.5);

    font-size: var(--text-xs);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.final-cta__categories li {
    display: flex;
    align-items: center;

    gap: var(--space-4);
}

.final-cta__categories li:not(:last-child)::after {
    content: "";

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--color-gold);
}


/* =========================================================
   17. FOOTER
========================================================= */

.site-footer {
    padding-top:
        clamp(5rem,
            8vw,
            8rem);

    background: var(--color-black);

    color: var(--color-white);
}

.site-footer__top {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.8fr) minmax(0, 1.2fr);

    gap: clamp(4rem, 9vw, 10rem);

    padding-bottom:
        clamp(4rem,
            7vw,
            7rem);
}

.site-footer__brand {
    max-width: 420px;
}

.site-footer__logo {
    width: auto;
    height: 54px;
}

.site-footer__tagline {
    margin-top: var(--space-6);

    font-family: var(--font-accent);
    font-size: 1.65rem;
    font-style: italic;
}

.site-footer__description {
    margin-top: var(--space-4);

    color: rgba(255, 255, 255, 0.5);

    font-size: var(--text-sm);

    line-height: 1.8;
}


/* ---------------------------------------------------------
   Footer Navigation
--------------------------------------------------------- */

.site-footer__nav {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-8);
}

.site-footer__column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-4);
}

.site-footer__heading {
    margin-bottom: var(--space-2);

    color: var(--color-gold-light);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.site-footer__column a,
.site-footer__column span {
    color: rgba(255, 255, 255, 0.62);

    font-size: var(--text-sm);

    transition:
        color var(--duration-normal) var(--ease-default);
}

.site-footer__column a:hover {
    color: var(--color-white);
}


/* ---------------------------------------------------------
   Footer Bottom
--------------------------------------------------------- */

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-6);

    min-height: 88px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.42);

    font-size: var(--text-xs);
}

.site-footer__bottom a {
    transition:
        color var(--duration-normal) var(--ease-default);
}

.site-footer__bottom a:hover {
    color: var(--color-white);
}


/* =========================================================
   18. MOBILE BOOKING CTA
========================================================= */

.mobile-booking-cta {
    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: var(--z-sticky);

    padding:
        0.75rem
        max(
            1rem,
            env(safe-area-inset-right)
        )
        max(
            0.75rem,
            env(safe-area-inset-bottom)
        )
        max(
            1rem,
            env(safe-area-inset-left)
        );

    background: transparent;

    pointer-events: none;
}

.mobile-booking-cta .button {
    width: 100%;

    box-shadow: none;

    pointer-events: auto;
}

.mobile-booking-cta .button:hover,
.mobile-booking-cta .button:focus,
.mobile-booking-cta .button:active {
    box-shadow: none;
}


/* =========================================================
   19. VILLA DIALOG
========================================================= */

/* =========================================================
   19. VILLA DIALOG
========================================================= */

.villa-dialog {
    width: min(1480px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);

    margin: auto;
    padding: 0;

    overflow-x: hidden;
    overflow-y: auto;

    border: 0;
    border-radius: var(--radius-lg);

    background: #ffffff;
    background-color: #ffffff;

    color: #111111;

    opacity: 1;
    filter: none;

    isolation: isolate;

    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.villa-dialog::backdrop {
    background: rgba(4, 7, 10, 0.78);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.villa-dialog::-webkit-scrollbar {
    width: 6px;
}

.villa-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.villa-dialog::-webkit-scrollbar-thumb {
    background: rgba(18, 18, 18, 0.18);
    border-radius: var(--radius-pill);
}

.villa-dialog__inner {
    position: relative;

    width: 100%;
    min-height: 0;

    background: #ffffff;
    background-color: #ffffff;

    opacity: 1;
}

.villa-dialog .dialog-close {
    position: absolute;

    top: var(--space-5);
    right: var(--space-5);

    z-index: 20;

    background: #111111;

    color: #ffffff;

    opacity: 1;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.villa-detail {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(420px, 0.9fr);

    align-items: stretch;

    width: 100%;
    min-height: 760px;

    background: #ffffff;
    background-color: #ffffff;

    opacity: 1;
}

.villa-detail__media {
    position: relative;

    min-width: 0;
    min-height: 760px;

    overflow: hidden;

    background: #111111;
}

.villa-detail__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 1;
}

.villa-detail__content {
    position: relative;

    z-index: 2;

    min-width: 0;

    padding:
        clamp(3rem, 5vw, 5rem)
        clamp(2.5rem, 4vw, 4rem);

    overflow: visible;

    background: #ffffff;
    background-color: #ffffff;

    color: #111111;

    opacity: 1;

    filter: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.villa-detail__eyebrow {
    color: var(--color-gold-dark);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.villa-detail__title {
    margin-top: var(--space-4);

    color: #111111;

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.5rem
        );

    letter-spacing: -0.05em;
    line-height: 1;
}

.villa-detail__price {
    margin-top: var(--space-5);

    color: #111111;

    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}

.villa-detail__address {
    margin-top: var(--space-5);

    color: #777777;

    font-size: var(--text-sm);

    line-height: 1.7;
}

.villa-detail__stats {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: var(--space-4);

    margin-top: var(--space-8);
}

.villa-detail__stat {
    min-width: 0;

    padding: var(--space-5);

    border: 1px solid #dddddd;
    border-radius: var(--radius-sm);

    background: #ffffff;

    opacity: 1;
}

.villa-detail__stat span {
    display: block;

    color: #777777;

    font-size: var(--text-xs);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.villa-detail__stat strong {
    display: block;

    margin-top: var(--space-2);

    color: #111111;

    font-size: var(--text-lg);

    line-height: 1.35;
}

.villa-detail__facilities {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top: var(--space-8);
}

.villa-detail__facility {
    padding:
        0.65rem
        0.9rem;

    border: 1px solid #dddddd;
    border-radius: var(--radius-pill);

    background: #ffffff;

    color: #555555;

    font-size: var(--text-xs);

    line-height: 1.4;

    opacity: 1;
}

.villa-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-4);

    margin-top: var(--space-8);
    padding-bottom: var(--space-4);
}

/* =========================================================
   20. GALLERY LIGHTBOX
========================================================= */

.gallery-lightbox {
    width:
        min(calc(100% - 2rem),
            1500px);

    height:
        min(calc(100dvh - 2rem),
            1000px);

    max-height: none;

    overflow: hidden;

    background: var(--color-black);
}

.gallery-lightbox .dialog-close {
    position: absolute;

    top: var(--space-5);
    right: var(--space-5);

    z-index: 5;

    background: rgba(255, 255, 255, 0.1);

    color: var(--color-white);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.gallery-lightbox__figure {
    width: 100%;
    height: 100%;
}

.gallery-lightbox__figure img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   21. BOOKING SUCCESS DIALOG
========================================================= */

.booking-success {
    width:
        min(calc(100% - 2rem),
            600px);

    background: var(--color-ivory);
}

.booking-success__inner {
    padding:
        clamp(2.5rem,
            6vw,
            5rem);

    text-align: center;
}

.booking-success .section-eyebrow {
    justify-content: center;
}

.booking-success h2 {
    margin-top: var(--space-5);

    font-size:
        clamp(2rem,
            5vw,
            3.7rem);

    letter-spacing: -0.05em;
}

.booking-success>p,
.booking-success__inner>p {
    max-width: 450px;

    margin:
        var(--space-5) auto 0;

    color: var(--color-text-soft);

    font-size: var(--text-sm);

    line-height: 1.8;
}

.booking-success__order {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    margin-top: var(--space-8);

    padding: var(--space-6);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-white);
}

.booking-success__order span {
    color: var(--color-muted);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-wide);

    text-transform: uppercase;
}

.booking-success__order strong {
    font-size:
        clamp(1.7rem,
            5vw,
            2.5rem);

    letter-spacing: 0.04em;
}

.booking-success .button {
    width: 100%;

    margin-top: var(--space-8);
}


/* =========================================================
   22. EMPTY / DATA STATES
========================================================= */

.villa-list:empty::before,
.location-list:empty::before,
.faq-list:empty::before {
    content: "";

    display: block;

    min-height: 120px;
}


/* =========================================================
   23. DARK SECTION LINKS
========================================================= */

.gallery-section .text-link,
.booking-section .text-link,
.final-cta .text-link {
    color: var(--color-white);
}


/* =========================================================
   24. IMAGE FALLBACK STATE
========================================================= */

img.is-fallback {
    background: var(--color-ivory-dark);
}

.image-fallback {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            var(--color-navy),
            var(--color-black));
}

.image-fallback::after {
    content: "VILLORA";

    position: absolute;

    top: 50%;
    left: 50%;

    color: rgba(255, 255, 255, 0.18);

    font-size:
        clamp(2rem,
            5vw,
            5rem);

    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.25em;

    transform: translate(-50%, -50%);
}


/* =========================================================
   25. DATA LOADING
========================================================= */

[data-villa-list].is-loading,
[data-location-list].is-loading,
[data-faq-list].is-loading {
    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   26. BODY STATES
========================================================= */

body.menu-open,
body.dialog-open {
    overflow: hidden;
}