/* ==========================================================
   MIC HIZARU STAY
   GLOBAL VARIABLES
========================================================== */

:root {

    --bg:
        #FBF9F5;

    --surface:
        #FFFFFF;

    --surface-soft:
        #F2EFE8;

    --sand:
        #E8E1D6;

    --beige:
        #D9D1C5;

    --olive:
        #8A8D78;

    --charcoal:
        #1A1D20;

    --charcoal-soft:
        #34383B;

    --muted:
        #77746E;

    --terracotta:
        #C86D51;

    --terracotta-dark:
        #A95740;

    --white:
        #FFFFFF;

    --border:
        rgba(26,29,32,.12);

    --border-dark:
        rgba(255,255,255,.14);

    --shadow-soft:
        0 10px 35px rgba(26,29,32,.06);

    --shadow-medium:
        0 18px 50px rgba(26,29,32,.10);

    --font-sans:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-serif:
        "Playfair Display",
        Georgia,
        serif;

    --radius-sm:
        10px;

    --radius-md:
        14px;

    --radius-lg:
        18px;

    --radius-xl:
        24px;

    --ease:
        cubic-bezier(.22,.61,.36,1);

}


/* ==========================================================
   RESET
========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background:
        var(--bg);

    color:
        var(--charcoal);

    font-family:
        var(--font-sans);

    line-height:
        1.6;

    overflow-x:
        hidden;

}

body.no-scroll {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {

    outline:
        2px solid
        var(--terracotta);

    outline-offset:
        3px;

}


/* ==========================================================
   CONTAINER
========================================================== */

.section-container {

    width:
        min(
            1200px,
            calc(100% - 48px)
        );

    margin-inline:
        auto;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

.eyebrow {

    margin-bottom:
        13px;

    color:
        var(--terracotta);

    font-size:
        .63rem;

    font-weight:
        700;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}

h1,
h2 {

    font-family:
        var(--font-serif);

    font-weight:
        500;

    letter-spacing:
        -.04em;

}

h1 em,
h2 em {

    font-style:
        italic;

    font-weight:
        500;

}


/* ==========================================================
   BRAND
========================================================== */

.brand {

    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        1px;

    white-space:
        nowrap;

}

.brand-primary {

    color:
        var(--charcoal);

    font-family:
        var(--font-serif);

    font-size:
        1.15rem;

    letter-spacing:
        -.04em;

}

.brand-secondary {

    color:
        var(--terracotta);

    font-size:
        .88rem;

    font-weight:
        600;

    letter-spacing:
        -.04em;

}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

    position:
        sticky;

    top:
        16px;

    z-index:
        900;

    width:
        calc(100% - 32px);

    max-width:
        1280px;

    margin:
        0 auto;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        rgba(251,249,245,.82);

    backdrop-filter:
        blur(18px);

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

    transition:
        box-shadow .3s ease,
        background .3s ease;

}

.site-header.scrolled {

    box-shadow:
        0 12px 32px rgba(26,29,32,.08);

    background:
        rgba(251,249,245,.94);

}


.header-inner {

    min-height:
        68px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

}


/* ==========================================================
   DESKTOP NAV
========================================================== */

.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

}

.desktop-nav > a,
.language-toggle {

    border:
        0;

    background:
        transparent;

    color:
        var(--charcoal-soft);

    font-size:
        .75rem;

    font-weight:
        500;

    transition:
        color .2s ease;

}

.desktop-nav > a:hover,
.language-toggle:hover {

    color:
        var(--terracotta);

}


/* ==========================================================
   LANGUAGE DROPDOWN
========================================================== */

.language-dropdown {

    position:
        relative;

}

.language-toggle {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        8px 0;

}

.language-toggle span {

    font-size:
        .58rem;

    transition:
        transform .2s ease;

}

.language-toggle.active span {

    transform:
        rotate(180deg);

}

.language-menu {

    position:
        absolute;

    top:
        calc(100% + 9px);

    right:
        0;

    min-width:
        160px;

    padding:
        6px;

    border:
        1px solid
        var(--border);

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

    background:
        rgba(255,255,255,.98);

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

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-6px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

}

.language-menu.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}

.language-menu button {

    width:
        100%;

    padding:
        10px 11px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--charcoal-soft);

    text-align:
        left;

    font-size:
        .7rem;

}

.language-menu button:hover {

    background:
        var(--surface-soft);

}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}

.header-host-link {

    color:
        var(--charcoal-soft);

    font-size:
        .72rem;

    font-weight:
        600;

}

.header-host-link:hover {
    color:
        var(--terracotta);
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn {

    min-height:
        44px;

    padding:
        0 17px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    font-size:
        .72rem;

    font-weight:
        700;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;

}

.btn:hover {

    transform:
        translateY(-2px);

}

.btn-dark {

    color:
        var(--white);

    background:
        var(--charcoal);

}

.btn-dark:hover {

    background:
        var(--terracotta-dark);

}

.btn-light {

    color:
        var(--charcoal);

    background:
        var(--white);

}

.btn-light:hover {

    background:
        var(--surface-soft);

}

.btn-header {

    min-height:
        38px;

    padding-inline:
        14px;

    border-radius:
        999px;

}


/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.mobile-menu-button {

    display:
        none;

    width:
        38px;

    height:
        38px;

    border:
        1px solid
        var(--border);

    border-radius:
        50%;

    background:
        var(--surface);

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

}

.mobile-menu-button span {

    width:
        15px;

    height:
        1.5px;

    background:
        var(--charcoal);

    transition:
        transform .25s ease,
        opacity .25s ease;

}

.mobile-menu-button.active span:first-child {

    transform:
        translateY(3.25px)
        rotate(45deg);

}

.mobile-menu-button.active span:last-child {

    transform:
        translateY(-3.25px)
        rotate(-45deg);

}


/* ==========================================================
   MOBILE DRAWER
========================================================== */

.drawer-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    background:
        rgba(26,29,32,.35);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}

.drawer-overlay.active {

    opacity:
        1;

    visibility:
        visible;

}

.mobile-drawer {

    position:
        fixed;

    top:
        0;

    right:
        0;

    z-index:
        1100;

    width:
        min(
            390px,
            90vw
        );

    height:
        100dvh;

    padding:
        24px;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--bg);

    box-shadow:
        -20px 0 60px rgba(26,29,32,.16);

    transform:
        translateX(100%);

    transition:
        transform .35s
        var(--ease);

}

.mobile-drawer.active {

    transform:
        translateX(0);

}

.drawer-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        25px;

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

}

.drawer-close {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        50%;

    background:
        var(--surface);

    color:
        var(--charcoal);

    font-size:
        1.3rem;

}

.mobile-nav {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        28px 0;

}

.mobile-nav a {

    padding:
        13px 0;

    color:
        var(--charcoal);

    font-family:
        var(--font-serif);

    font-size:
        1.6rem;

}

.mobile-nav a:hover {

    color:
        var(--terracotta);

}

.drawer-footer {

    margin-top:
        auto;

    padding-top:
        20px;

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

}

.drawer-footer p {

    max-width:
        280px;

    color:
        var(--muted);

    font-size:
        .73rem;

    line-height:
        1.8;

}

.drawer-language {

    display:
        flex;

    gap:
        6px;

    margin-top:
        20px;

}

.drawer-language button {

    width:
        42px;

    height:
        34px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        .66rem;

    font-weight:
        700;

}

.drawer-language button.active {

    color:
        var(--white);

    background:
        var(--charcoal);

}


/* ==========================================================
   HERO
========================================================== */

.hero {

    padding:
        105px 0
        55px;

}

.hero-container {

    width:
        min(
            1200px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

}


/* Hero text */

.hero-copy {

    max-width:
        760px;

    margin-bottom:
        58px;

}

.hero-copy h1 {

    max-width:
        720px;

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

    line-height:
        .94;

}

.hero-copy h1 em {

    display:
        block;

    color:
        var(--terracotta);

}

.hero-description {

    max-width:
        550px;

    margin-top:
        28px;

    color:
        var(--muted);

    font-size:
        .95rem;

    line-height:
        1.85;

}

.hero-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        22px;

}

.hero-meta span {

    padding:
        7px 10px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        var(--charcoal-soft);

    font-size:
        .63rem;

}


/* ==========================================================
   HERO VISUAL
========================================================== */

.hero-visual {

    display:
        grid;

    grid-template-columns:
        1.6fr
        .65fr;

    gap:
        14px;

    min-height:
        610px;

}

.image-placeholder {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #BEB8A9,
            #D8D1C3 42%,
            #8C9181
        );

    background-size:
        140% 140%;

}

.image-placeholder::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.12),
            transparent 42%,
            rgba(26,29,32,.08)
        );

    pointer-events:
        none;

}

.hero-main-image {

    min-height:
        610px;

    border-radius:
        2px;

}

.hero-main-image::before {

    content:
        "";

    position:
        absolute;

    width:
        55%;

    height:
        75%;

    right:
        12%;

    top:
        14%;

    background:
        linear-gradient(
            145deg,
            #DAD0BE,
            #8A806E
        );

    clip-path:
        polygon(
            12% 0,
            88% 0,
            100% 100%,
            0 100%
        );

    box-shadow:
        20px 25px 50px rgba(26,29,32,.10);

}

.hero-main-image::after {

    background:
        linear-gradient(
            to top,
            rgba(26,29,32,.52),
            transparent 55%
        );

}

.hero-side-image {

    min-height:
        610px;

    background:
        linear-gradient(
            145deg,
            #D8D0C3,
            #A5A99B 45%,
            #777E72
        );

}

.hero-side-image::before {

    content:
        "";

    position:
        absolute;

    width:
        72%;

    height:
        72%;

    top:
        14%;

    left:
        14%;

    border:
        1px solid
        rgba(255,255,255,.3);

    background:
        rgba(255,255,255,.05);

}

.image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(26,29,32,.25)
        );

}

.hero-image-caption {

    position:
        absolute;

    left:
        30px;

    right:
        30px;

    bottom:
        28px;

    z-index:
        2;

    color:
        var(--white);

}

.hero-image-caption span {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        .62rem;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}

.hero-image-caption strong {

    max-width:
        400px;

    display:
        block;

    font-family:
        var(--font-serif);

    font-size:
        1.5rem;

    font-weight:
        500;

    line-height:
        1.15;

}

.vertical-caption {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    z-index:
        2;

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

    color:
        rgba(255,255,255,.9);

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        .35em;

    line-height:
        2;

    text-align:
        center;

    writing-mode:
        vertical-rl;

}


/* ==========================================================
   SEARCH
========================================================== */

.search-container {

    margin-top:
        22px;

}

.search-widget {

    position:
        relative;

    padding:
        9px;

    border:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.7);

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

}

.search-fields {

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        130px;

}

.search-field {

    position:
        relative;

    min-height:
        72px;

    padding:
        9px 15px;

    border-right:
        1px solid
        var(--border);

}

.search-field label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--muted);

    font-size:
        .59rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}

.field-control {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}

.field-icon {

    color:
        var(--terracotta);

    font-size:
        .78rem;

}

.field-control input,
.field-control select {

    width:
        100%;

    border:
        0;

    outline:
        0;

    padding:
        0;

    background:
        transparent;

    color:
        var(--charcoal);

    font-size:
        .75rem;

}

.field-control input::placeholder {

    color:
        #9A968E;

}

.field-control select {

    cursor:
        pointer;

}

.search-submit {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        0;

    border-radius:
        8px;

    color:
        var(--white);

    background:
        var(--charcoal);

    font-size:
        .72rem;

    font-weight:
        700;

    transition:
        background .25s ease,
        transform .25s ease;

}

.search-submit:hover {

    background:
        var(--terracotta-dark);

    transform:
        translateY(-1px);

}

.field-error {

    display:
        block;

    min-height:
        14px;

    margin-top:
        4px;

    color:
        #B84C38;

    font-size:
        .53rem;

}

.search-status {

    min-height:
        22px;

    margin-top:
        7px;

    color:
        var(--terracotta-dark);

    font-size:
        .65rem;

}


/* Mobile search trigger */

.mobile-search-trigger {

    display:
        none;

}


/* ==========================================================
   QUICK FILTERS
========================================================== */

.quick-filters {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        13px;

}

.quick-label {

    margin-right:
        6px;

    color:
        var(--muted);

    font-size:
        .62rem;

}

.filter-pill {

    padding:
        7px 11px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(--charcoal-soft);

    font-size:
        .61rem;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;

}

.filter-pill:hover,
.filter-pill.active {

    border-color:
        var(--terracotta);

    color:
        var(--terracotta-dark);

    background:
        rgba(200,109,81,.06);

}


/* ==========================================================
   SECTION
========================================================== */

.section {

    padding:
        115px 0;

}

.section-heading-row {

    margin-bottom:
        40px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

}

.section-heading-row h2 {

    max-width:
        670px;

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

    line-height:
        1.03;

}

.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--charcoal);

    font-size:
        .72rem;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        gap .2s ease,
        color .2s ease;

}

.text-link:hover {

    color:
        var(--terracotta-dark);

    gap:
        11px;

}


/* ==========================================================
   PROPERTY GRID
========================================================== */

.property-grid {

    display:
        grid;

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

    gap:
        16px;

}

.property-card {

    min-width:
        0;

}

.property-image {

    position:
        relative;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

}

.property-image::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    transform:
        scale(1);

    transition:
        transform .65s
        var(--ease);

}

.property-card:hover
.property-image::before {

    transform:
        scale(1.055);

}

.property-image-one::before {

    background:
        linear-gradient(
            150deg,
            #B9B39F,
            #D9D0BE 46%,
            #6D7567
        );

}

.property-image-two::before {

    background:
        linear-gradient(
            135deg,
            #D6C8B5,
            #A3A094 45%,
            #5D625B
        );

}

.property-image-three::before {

    background:
        linear-gradient(
            150deg,
            #9C9E8C,
            #C9C0AA 45%,
            #5F665F
        );

}

.property-image-four::before {

    background:
        linear-gradient(
            135deg,
            #C8B6A1,
            #A2ADA0 50%,
            #69776F
        );

}

.property-tag {

    position:
        absolute;

    left:
        12px;

    top:
        12px;

    z-index:
        3;

    padding:
        5px 7px;

    border:
        1px solid
        rgba(255,255,255,.35);

    background:
        rgba(26,29,32,.26);

    color:
        white;

    font-size:
        .5rem;

    font-weight:
        700;

    letter-spacing:
        .09em;

    backdrop-filter:
        blur(8px);

}

.wishlist-button {

    position:
        absolute;

    top:
        9px;

    right:
        9px;

    z-index:
        4;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.4);

    border-radius:
        50%;

    background:
        rgba(26,29,32,.18);

    color:
        white;

    font-size:
        1rem;

    backdrop-filter:
        blur(7px);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;

}

.wishlist-button:hover {

    transform:
        scale(1.06);

}

.wishlist-button.active {

    color:
        #ffd2c8;

    background:
        rgba(200,109,81,.55);

}

.property-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(
            to top,
            rgba(26,29,32,.18),
            transparent 60%
        );

}

.property-content {

    padding:
        14px 1px 0;

}

.property-title-row {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}

.property-title-row h3 {

    margin-bottom:
        4px;

    font-family:
        var(--font-serif);

    font-size:
        1.05rem;

    font-weight:
        500;

    line-height:
        1.2;

}

.property-title-row p {

    color:
        var(--muted);

    font-size:
        .64rem;

}

.property-rating {

    flex-shrink:
        0;

    color:
        var(--charcoal);

    font-size:
        .65rem;

}

.property-rating span {

    color:
        var(--terracotta);

}

.property-bottom {

    margin-top:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

}

.property-type {

    color:
        var(--olive);

    font-size:
        .61rem;

}

.property-bottom > div {

    display:
        flex;

    align-items:
        baseline;

    gap:
        3px;

}

.property-bottom strong {

    font-size:
        .72rem;

}

.property-bottom div span {

    color:
        var(--muted);

    font-size:
        .58rem;

}


/* ==========================================================
   EXPERIENCE
========================================================== */

.experience-section {

    background:
        var(--surface-soft);

}

.experience-layout {

    display:
        grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:
        100px;

    align-items:
        center;

}

.experience-copy h2 {

    max-width:
        540px;

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

    line-height:
        .98;

}

.experience-lead {

    max-width:
        500px;

    margin:
        24px 0
        38px;

    color:
        var(--muted);

    font-size:
        .82rem;

    line-height:
        1.9;

}


/* Values */

.values-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

    margin-bottom:
        28px;

}

.value-item {

    display:
        grid;

    grid-template-columns:
        38px
        1fr;

    gap:
        16px;

}

.value-number {

    color:
        var(--terracotta);

    font-size:
        .59rem;

    font-weight:
        700;

}

.value-item h3 {

    margin-bottom:
        4px;

    font-size:
        .76rem;

}

.value-item p {

    max-width:
        390px;

    color:
        var(--muted);

    font-size:
        .69rem;

}


/* Experience visual */

.experience-visual {

    position:
        relative;

    min-height:
        590px;

}

.experience-image {

    position:
        absolute;

}

.experience-image-main {

    left:
        0;

    top:
        30px;

    width:
        71%;

    height:
        500px;

    background:
        linear-gradient(
            135deg,
            #B8AC96,
            #D2C2AA 44%,
            #687168
        );

}

.experience-image-main span {

    position:
        absolute;

    left:
        22px;

    bottom:
        22px;

    z-index:
        2;

    color:
        white;

    font-family:
        var(--font-serif);

    font-size:
        1rem;

}

.experience-image-small {

    right:
        0;

    bottom:
        0;

    width:
        43%;

    height:
        300px;

    border:
        8px solid
        var(--surface-soft);

    background:
        linear-gradient(
            145deg,
            #D8CCB9,
            #8F9A8D
        );

}

.experience-note {

    position:
        absolute;

    top:
        0;

    right:
        3%;

    width:
        135px;

    height:
        135px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    border:
        1px solid
        var(--border);

    background:
        var(--bg);

}

.experience-note span {

    color:
        var(--terracotta);

    font-family:
        var(--font-serif);

    font-size:
        2rem;

}

.experience-note p {

    width:
        75px;

    color:
        var(--muted);

    text-align:
        center;

    font-size:
        .57rem;

    line-height:
        1.5;

}


/* ==========================================================
   DESTINATIONS
========================================================== */

.destination-grid {

    display:
        grid;

    grid-template-columns:
        1.25fr
        1fr
        1fr;

    grid-template-rows:
        280px 280px;

    gap:
        14px;

}

.destination-card {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--sand);

}

.destination-large {

    grid-row:
        span 2;

}

.destination-image {

    position:
        absolute;

    inset:
        0;

    transition:
        transform .6s
        var(--ease);

}

.destination-card:hover
.destination-image {

    transform:
        scale(1.045);

}

.destination-bali {

    background:
        linear-gradient(
            150deg,
            #B7AC95,
            #7B8A76 55%,
            #D5C5AC
        );

}

.destination-kyoto {

    background:
        linear-gradient(
            135deg,
            #D4C7B9,
            #9C9488 55%,
            #737A71
        );

}

.destination-lombok {

    background:
        linear-gradient(
            145deg,
            #B4A18F,
            #A7AA93 45%,
            #596E68
        );

}

.destination-yogyakarta {

    background:
        linear-gradient(
            135deg,
            #D5C4A9,
            #918D78 60%,
            #6E746D
        );

}

.destination-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(26,29,32,.52),
            transparent 60%
        );

}

.destination-content {

    position:
        absolute;

    left:
        22px;

    bottom:
        21px;

    z-index:
        2;

    color:
        white;

}

.destination-content span {

    display:
        block;

    margin-bottom:
        3px;

    font-size:
        .58rem;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}

.destination-content strong {

    font-family:
        var(--font-serif);

    font-size:
        1.5rem;

    font-weight:
        500;

}


/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonials-section {

    background:
        var(--bg);

}

.slider-controls {

    display:
        flex;

    gap:
        7px;

}

.slider-button {

    width:
        39px;

    height:
        39px;

    border:
        1px solid
        var(--border);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--charcoal);

    transition:
        background .2s ease,
        color .2s ease;

}

.slider-button:hover {

    color:
        white;

    background:
        var(--charcoal);

}

.testimonial-slider {

    display:
        grid;

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

    gap:
        14px;

}

.testimonial-card {

    min-height:
        350px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        1px solid
        var(--border);

    background:
        var(--surface);

}

.testimonial-rating {

    color:
        var(--terracotta);

    font-size:
        .65rem;

    letter-spacing:
        .11em;

}

.testimonial-card blockquote {

    margin:
        35px 0;

    font-family:
        var(--font-serif);

    font-size:
        1.28rem;

    line-height:
        1.5;

    letter-spacing:
        -.015em;

}

.guest-profile {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding-top:
        16px;

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

}

.guest-avatar {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        white;

    background:
        var(--charcoal);

    font-size:
        .55rem;

    font-weight:
        700;

}

.guest-profile strong {

    display:
        block;

    font-size:
        .67rem;

}

.guest-profile span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        .56rem;

}


/* ==========================================================
   HOST
========================================================== */

.host-section {

    padding:
        0 0 115px;

}

.host-card {

    min-height:
        390px;

    padding:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

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

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #30352F,
            #1A1D20
        );

    position:
        relative;

    overflow:
        hidden;

}

.host-card::after {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    right:
        -110px;

    top:
        -120px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,.08);

    box-shadow:
        0 0 0 55px rgba(255,255,255,.02),
        0 0 0 110px rgba(255,255,255,.02);

}

.host-card h2 {

    max-width:
        650px;

    margin-bottom:
        15px;

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

    line-height:
        .96;

}

.host-card > div:first-child {

    position:
        relative;

    z-index:
        2;

}

.host-card p:last-child {

    max-width:
        470px;

    color:
        #A9AAA5;

    font-size:
        .8rem;

    line-height:
        1.8;

}


/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter-section {

    padding:
        85px 0;

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

    background:
        var(--surface-soft);

}

.newsletter-layout {

    display:
        grid;

    grid-template-columns:
        .8fr
        1fr;

    align-items:
        center;

    gap:
        80px;

}

.newsletter-layout h2 {

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

}

.newsletter-form > label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--muted);

    font-size:
        .63rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}

.newsletter-input-row {

    display:
        grid;

    grid-template-columns:
        1fr
        50px;

    border-bottom:
        1px solid
        var(--charcoal);

}

.newsletter-input-row input {

    min-width:
        0;

    height:
        49px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--charcoal);

    font-size:
        .76rem;

}

.newsletter-input-row input::placeholder {
    color:
        #99958F;
}

.newsletter-input-row button {

    border:
        0;

    background:
        transparent;

    color:
        var(--terracotta);

    font-size:
        1.1rem;

}

#newsletterStatus {

    display:
        block;

    min-height:
        17px;

    margin-top:
        8px;

    color:
        var(--terracotta-dark);

    font-size:
        .59rem;

}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {

    background:
        var(--charcoal);

    color:
        #CAC9C3;

}

.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:
        65px;

    padding:
        75px 0;

}

.footer-logo .brand-primary {

    color:
        white;

}

.footer-brand > p {

    max-width:
        320px;

    margin:
        16px 0 23px;

    color:
        #85857F;

    font-size:
        .69rem;

    line-height:
        1.85;

}

.footer-social {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}

.footer-social a {

    color:
        #8B8B84;

    font-size:
        .6rem;

}

.footer-social a:hover {

    color:
        #EFEDE5;

}

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}

.footer-column h3 {

    margin-bottom:
        7px;

    color:
        white;

    font-size:
        .67rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}

.footer-column a {

    color:
        #85857F;

    font-size:
        .68rem;

}

.footer-column a:hover {
    color:
        white;
}


/* Currency */

.currency-selector {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-top:
        5px;

}

.currency-selector span {

    color:
        #686862;

    font-size:
        .58rem;

}

.currency-selector select {

    width:
        fit-content;

    padding:
        5px 7px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        7px;

    outline:
        0;

    background:
        transparent;

    color:
        #A5A59F;

    font-size:
        .6rem;

}


/* Footer bottom */

.footer-bottom {

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

}

.footer-bottom-inner {

    min-height:
        65px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    color:
        #666660;

    font-size:
        .57rem;

}


/* ==========================================================
   SEARCH RESULT MODAL
========================================================== */

.result-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        1500;

    display:
        grid;

    place-items:
        center;

    padding:
        20px;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}

.result-modal.active {

    opacity:
        1;

    visibility:
        visible;

}

.result-modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(26,29,32,.48);

}

.result-modal-content {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            500px,
            100%
        );

    padding:
        35px;

    border:
        1px solid
        var(--border);

    background:
        var(--bg);

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

    transform:
        translateY(10px);

    transition:
        transform .3s
        var(--ease);

}

.result-modal.active
.result-modal-content {

    transform:
        translateY(0);

}

.result-modal-content h2 {

    margin-bottom:
        25px;

    font-size:
        2.4rem;

    line-height:
        1.05;

}

.result-modal-close {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    width:
        34px;

    height:
        34px;

    border:
        1px solid
        var(--border);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--charcoal);

    font-size:
        1.2rem;

}

.result-summary {

    padding:
        16px;

    margin-bottom:
        22px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface);

}

.summary-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        9px 0;

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

}

.summary-row:last-child {
    border-bottom:
        0;
}

.summary-row span:first-child {

    color:
        var(--muted);

    font-size:
        .62rem;

}

.summary-row span:last-child {

    color:
        var(--charcoal);

    font-size:
        .67rem;

    font-weight:
        700;

    text-align:
        right;

}

.result-modal-cta {

    width:
        100%;

}


/* ==========================================================
   TOAST
========================================================== */

.toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        22px;

    z-index:
        2000;

    max-width:
        min(
            90vw,
            400px
        );

    padding:
        11px 15px;

    border-radius:
        8px;

    background:
        var(--charcoal);

    color:
        white;

    font-size:
        .64rem;

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

    transform:
        translate(
            -50%,
            20px
        );

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

}

.toast.show {

    transform:
        translate(
            -50%,
            0
        );

    opacity:
        1;

    visibility:
        visible;

}


/* ==========================================================
   TABLET
   768px - 1024px
========================================================== */

@media (max-width: 1024px) {

    .desktop-nav {
        gap:
            17px;
    }

    .header-host-link {
        display:
            none;
    }

    .hero {
        padding-top:
            85px;
    }

    .hero-visual {
        min-height:
            520px;
    }

    .hero-main-image,
    .hero-side-image {
        min-height:
            520px;
    }

    .property-grid {
        grid-template-columns:
            repeat(2, 1fr);
        row-gap:
            35px;
    }

    .experience-layout {
        gap:
            45px;
    }

    .testimonial-slider {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .testimonial-card {
        padding:
            22px;
    }

    .testimonial-card blockquote {
        font-size:
            1.1rem;
    }

}


/* ==========================================================
   MOBILE
   < 768px
========================================================== */

@media (max-width: 767px) {

    .section-container,
    .hero-container {
        width:
            calc(100% - 28px);
    }


    /* Header */

    .site-header {

        top:
            9px;

        width:
            calc(100% - 18px);

    }

    .header-inner {

        min-height:
            61px;

        padding:
            0 13px;

    }

    .desktop-nav {
        display:
            none;
    }

    .header-actions {
        gap:
            7px;
    }

    .header-host-link,
    .btn-header {
        display:
            none;
    }

    .mobile-menu-button {
        display:
            flex;
    }


    /* Hero */

    .hero {

        padding:
            75px 0
            35px;

    }

    .hero-copy {

        margin-bottom:
            35px;

    }

    .hero-copy h1 {

        font-size:
            clamp(
                3rem,
                15vw,
                4.7rem
            );

    }

    .hero-description {

        margin-top:
            22px;

        font-size:
            .8rem;

    }

    .hero-meta {

        display:
            none;

    }

    .hero-visual {

        grid-template-columns:
            1fr;

        min-height:
            510px;

    }

    .hero-main-image {

        min-height:
            370px;

    }

    .hero-side-image {

        min-height:
            125px;

    }

    .vertical-caption {
        writing-mode:
            horizontal-tb;
    }


    /* Search */

    .search-container {

        margin-top:
            18px;

    }

    .search-widget {

        padding:
            0;

        background:
            var(--surface);

    }

    .mobile-search-trigger {

        width:
            100%;

        min-height:
            58px;

        padding:
            0 15px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        border:
            0;

        background:
            transparent;

        color:
            var(--charcoal);

        text-align:
            left;

        font-size:
            .73rem;

        font-weight:
            600;

    }

    .search-trigger-icon {

        display:
            grid;

        place-items:
            center;

        width:
            27px;

        height:
            27px;

        border:
            1px solid
            var(--border);

        border-radius:
            50%;

        color:
            var(--terracotta);

        transition:
            transform .2s ease;

    }

    .mobile-search-trigger.active
    .search-trigger-icon {

        transform:
            rotate(45deg);

    }

    .search-fields {

        display:
            none;

        grid-template-columns:
            1fr;

        padding:
            0 12px 12px;

    }

    .search-fields.active {

        display:
            grid;

    }

    .search-field {

        min-height:
            63px;

        padding:
            8px 3px;

        border-right:
            0;

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

    }

    .search-submit {

        min-height:
            49px;

        margin-top:
            10px;

    }

    .quick-filters {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            3px;

        scrollbar-width:
            none;

    }

    .quick-filters::-webkit-scrollbar {
        display:
            none;
    }

    .quick-label {
        flex-shrink:
            0;
    }

    .filter-pill {
        flex-shrink:
            0;
    }


    /* Sections */

    .section {

        padding:
            75px 0;

    }

    .section-heading-row {

        margin-bottom:
            28px;

        align-items:
            flex-start;

        flex-direction:
            column;

    }

    .section-heading-row h2 {

        font-size:
            2.25rem;

    }


    /* Properties */

    .property-grid {

        grid-template-columns:
            1fr;

    }

    .property-image {

        aspect-ratio:
            4 / 3;

    }


    /* Experience */

    .experience-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }

    .experience-copy h2 {

        font-size:
            2.7rem;

    }

    .experience-visual {

        min-height:
            470px;

    }

    .experience-image-main {

        top:
            15px;

        width:
            76%;

        height:
            370px;

    }

    .experience-image-small {

        width:
            42%;

        height:
            220px;

    }

    .experience-note {

        width:
            105px;

        height:
            105px;

        right:
            2%;

    }


    /* Destinations */

    .destination-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            220px
            220px
            220px;

    }

    .destination-large {

        grid-column:
            1 / -1;

        grid-row:
            auto;

    }


    /* Testimonials */

    .testimonial-slider {

        display:
            flex;

        overflow-x:
            auto;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

    }

    .testimonial-slider::-webkit-scrollbar {
        display:
            none;
    }

    .testimonial-card {

        min-width:
            86vw;

        scroll-snap-align:
            start;

    }


    /* Host */

    .host-section {

        padding-bottom:
            75px;

    }

    .host-card {

        min-height:
            390px;

        padding:
            30px;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

    }

    .host-card h2 {

        font-size:
            2.8rem;

    }


    /* Newsletter */

    .newsletter-layout {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    /* Footer */

    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px;

    }

    .footer-brand {

        grid-column:
            1 / -1;

    }

    .footer-bottom-inner {

        min-height:
            85px;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

    }


    /* Modal */

    .result-modal-content {

        padding:
            28px 22px;

    }

}


/* ==========================================================
   SMALL MOBILE
   < 430px
========================================================== */

@media (max-width: 430px) {

    .brand-primary {
        font-size:
            1.05rem;
    }

    .brand-secondary {
        font-size:
            .8rem;
    }

    .hero-copy h1 {
        font-size:
            2.9rem;
    }

    .hero-main-image {
        min-height:
            330px;
    }

    .hero-side-image {
        min-height:
            105px;
    }

    .destination-grid {

        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(4, 220px);

    }

    .destination-large {
        grid-column:
            auto;
    }

    .footer-grid {
        grid-template-columns:
            1fr;
    }

    .footer-brand {
        grid-column:
            auto;
    }

}