/* One readable type family and a deliberate scale for the entire homepage. */
body.home,
body.home * {
    font-family: var(--font-ui) !important;
}

/* Keep the footer full-bleed; constrain only the homepage main content. */
body.home > main.home-main {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

/* Blend both edges of the wide hero image into the page canvas. */
@media (min-width: 769px) {
    body.home .hero {
        background-image:
            linear-gradient(
                90deg,
                #faf9f6 0,
                rgb(250 249 246 / 0%) min(17.4vw, 250px),
                rgb(250 249 246 / 0%) calc(100% - min(17.4vw, 250px)),
                #faf9f6 100%
            ),
            url("../assets/hero-travel-clean.7ba58bb67466.webp");
        background-size: 100% 100%, cover;
        background-position: center, center;
        background-repeat: no-repeat;
    }
}

/* Ease the hero photograph into the page background without washing out content. */
body.home .hero::after {
    position: absolute;
    z-index: 0;
    inset: auto 0 0;
    height: clamp(90px, 12vw, 150px);
    content: "";
    background: linear-gradient(
        to bottom,
        rgb(250 249 246 / 0%) 0%,
        rgb(250 249 246 / 34%) 42%,
        rgb(250 249 246 / 82%) 78%,
        #faf9f6 100%
    );
    pointer-events: none;
}

body.home .hero > :is(.hero-top, .hero-title, .hero-note, .hero-copy, .hero-benefits, .home-search-shell, .hero-links) {
    position: relative;
    z-index: 1;
}

body.home {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.home :is(h1, h2, h3, h4, h5, h6) {
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: -.035em !important;
    line-height: 1.12 !important;
}

body.home :is(button, input, select, textarea, .btn, summary) {
    font-size: 16px;
    letter-spacing: 0 !important;
}

body.home p {
    line-height: 1.6;
}

body.home small {
    font-size: 12px !important;
    line-height: 1.45;
}

body.home .hero-title {
    max-width: 660px;
    font-size: clamp(42px, 4.2vw, 62px) !important;
    font-weight: 600 !important;
    letter-spacing: -.045em !important;
    line-height: 1.04 !important;
}

body.home .hero-title em {
    font: inherit !important;
}

body.home .hero-copy {
    max-width: 500px;
    font-size: 18px !important;
    line-height: 1.55 !important;
}

body.home .hero-benefits {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

body.home .hero-nav {
    font-size: 14px !important;
}

body.home .search-services > span {
    font-size: 14px !important;
    font-weight: 500 !important;
}

body.home .search-services small {
    font-size: 12px !important;
}

body.home .home-search-shell .search-field > span {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* Put every field label/value on the same text axis beneath a fixed icon rail. */
body.home .home-search-shell .search-city,
body.home .home-search-shell .search-guests {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    grid-template-rows: 18px 22px !important;
    align-content: center !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 6px 12px !important;
}

body.home .home-search-shell .date-range-picker.search-field {
    display: block !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
}

body.home .home-search-shell .search-field-icon {
    display: grid !important;
    grid-column: 1;
    grid-row: 1 / 3;
    place-items: center;
    width: 20px;
    height: 22px;
}

body.home .home-search-shell .search-field-icon .icon {
    width: 19px !important;
    height: 19px !important;
}

body.home .home-search-shell .search-field-copy {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    margin: 0 !important;
    line-height: 18px !important;
    white-space: nowrap;
}

body.home .home-search-shell .search-city input,
body.home .home-search-shell .search-guests select {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    width: 100% !important;
    max-width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 22px !important;
}

body.home .home-search-shell .search-guests select {
    text-align: left !important;
    text-indent: -4px !important;
}

body.home .home-search-shell .date-range-trigger {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    grid-template-rows: 18px 22px !important;
    align-content: center !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 6px 12px !important;
}

body.home .home-search-shell .date-range-trigger-icon {
    display: grid !important;
    grid-column: 1;
    grid-row: 1 / 3;
    place-items: center;
    width: 20px;
    height: 22px;
}

body.home .home-search-shell .date-range-trigger-icon .icon {
    width: 19px !important;
    height: 19px !important;
}

body.home .home-search-shell .date-range-trigger-copy {
    display: grid !important;
    grid-column: 2;
    grid-row: 1 / 3;
    align-content: center;
    gap: 0 !important;
    min-width: 0;
}

body.home .home-search-shell .search-field input,
body.home .home-search-shell .search-field select {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

body.home .date-range-trigger-copy strong {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

body.home .date-range-trigger-copy small {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

body.home .home-search-shell .search-form > .btn {
    min-height: 50px;
    font-size: 16px !important;
    font-weight: 600 !important;
}

body.home .home-extra-filters summary {
    font-size: 14px !important;
    font-weight: 500 !important;
}

body.home .home-search-shell .form-field,
body.home .home-search-shell .filter-check,
body.home .home-search-shell .filter-unavailable small {
    font-size: 13px !important;
    line-height: 1.45;
}

body.home .service-strip > a {
    font-size: 14px !important;
    line-height: 1.4;
}

body.home .service-strip strong {
    font-weight: 600 !important;
}

body.home .service-strip small {
    font-size: 12px !important;
}

body.home .places-heading h2 {
    font-size: clamp(34px, 3.8vw, 52px) !important;
    line-height: 1.06 !important;
}

body.home .places-heading p,
body.home .stay-lead {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

body.home .places-heading a {
    font-size: 14px !important;
    font-weight: 500 !important;
}

body.home .place-label h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

body.home .place > p {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.home .place-photo > span,
body.home .stay-category {
    font-size: 12px !important;
    line-height: 1.35;
}

body.home .coast-banner h2 {
    font-size: clamp(30px, 3vw, 40px) !important;
    line-height: 1.08 !important;
}

body.home .coast-banner p {
    font-size: 15px !important;
}

body.home .coast-banner .btn.primary {
    color: #171717 !important;
}

body.home .coast-note {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

body.home .stay-copy h2 {
    font-size: clamp(38px, 4vw, 56px) !important;
    line-height: 1.06 !important;
}

body.home .stay-search {
    font-size: 15px !important;
    font-weight: 600 !important;
}

body.home .stay-features b {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35;
}

body.home .stay-features small,
body.home .stay-photo figcaption {
    font-size: 12px !important;
    line-height: 1.45;
}

body.home #hotel-map h2,
body.home .section-head h2,
body.home .newsletter h2 {
    font-size: clamp(24px, 2.2vw, 30px) !important;
    line-height: 1.15 !important;
}

body.home #hotel-map p {
    font-size: 14px !important;
}

body.home .idea > span {
    font-size: 13px !important;
    line-height: 1.4;
}

body.home .newsletter .checkline {
    font-size: 12px !important;
    line-height: 1.4;
}

body.home .footer {
    font-size: 12px !important;
}

body.home .travel-intro-count,
body.home .travel-eyebrow,
body.home .travel-route-kicker,
body.home .destination-meta,
body.home .destination-caption div > span {
    font-size: 11px !important;
    line-height: 1.4;
}

body.home .travel-intro-heading h2 {
    font-size: clamp(38px, 4.2vw, 58px) !important;
}

body.home .travel-intro-heading p {
    font-size: 16px !important;
}

body.home .travel-intro-link {
    font-size: 14px !important;
}

body.home .travel-route-copy h3 {
    font-size: 19px !important;
}

body.home .travel-route-copy p,
body.home .destination-caption p {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

body.home .destination-caption h3 {
    font-size: clamp(20px, 1.9vw, 28px) !important;
}

body.home .destination-utility .collection-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

@media (max-width: 768px) {
    body.home .hero-title {
        max-width: 100%;
        font-size: clamp(34px, 9vw, 42px) !important;
        line-height: 1.04 !important;
    }

    body.home .hero-copy {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    body.home .hero-benefits {
        font-size: 12px !important;
    }

    body.home .service-strip > a {
        font-size: 13px !important;
    }

    body.home .places-heading h2 {
        font-size: clamp(30px, 8vw, 36px) !important;
    }

    body.home .places-heading p,
    body.home .stay-lead {
        font-size: 15px !important;
    }

    body.home .place-label h3 {
        font-size: 18px !important;
    }

    body.home .place > p {
        font-size: 13px !important;
    }

    body.home .place-photo > span {
        font-size: 12px !important;
    }

    body.home .coast-banner h2 {
        font-size: 30px !important;
    }

    body.home .coast-banner p {
        font-size: 14px !important;
    }

    body.home .stay-copy h2 {
        font-size: clamp(34px, 9vw, 42px) !important;
    }

    body.home .stay-features b {
        font-size: 12px !important;
    }

    body.home .stay-features small {
        font-size: 12px !important;
    }

    body.home #hotel-map h2,
    body.home .section-head h2,
    body.home .newsletter h2 {
        font-size: 24px !important;
    }

    body.home .travel-intro {
        gap: 20px;
        padding-top: 32px;
    }

    body.home .travel-intro-heading h2 {
        font-size: clamp(34px, 9vw, 42px) !important;
    }

    body.home .travel-intro-heading p {
        font-size: 15px !important;
    }

    body.home .travel-route-copy h3 {
        font-size: 16px !important;
    }

    body.home .travel-route-copy p,
    body.home .destination-caption p {
        font-size: 12px !important;
    }

    body.home .destination-caption div > span {
        font-size: 11px !important;
    }

    body.home .destination-caption h3 {
        font-size: 21px !important;
    }

    body.home .destination-utility .collection-subtitle {
        font-size: 13px !important;
    }

    body.home .footer {
        line-height: 1.5;
    }
}

@media (max-width: 380px) {
    body.home .hero-benefits {
        margin: 14px 0 7px !important;
    }

    body.home .places-heading h2 {
        font-size: 30px !important;
    }

    body.home .place-label h3 {
        font-size: 17px !important;
    }

    body.home .service-strip > a {
        font-size: 12px !important;
    }

    body.home .travel-route-step {
        gap: 8px;
    }

    body.home .travel-route-kicker,
    body.home .destination-meta,
    body.home .destination-caption div > span {
        font-size: 11px !important;
    }
}
