:root {
    --blue: rgb(0, 35, 111);
    --blue-dark: rgb(0, 25, 80);
    --yellow: #ffd700;
    --white: #ffffff;
    --off-white: #f5f7fc;
    --text: #15244a;
    --radius-sm: 10px;
    --radius: 20px;
    --radius-lg: 32px;
    --shadow: 0 18px 50px rgba(0, 18, 62, 0.16);
    --container: 1180px;
}

@font-face {
    font-family: "Roca Two";
    src: url("../fonts/fonnts.com-Roca_Two_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roca Two";
    src: url("../fonts/fonnts.com-Roca_Two_Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../fonts/OpenSauceSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Two";
    src: url("../fonts/OpenSauceTwo-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Decalotype";
    src: url("../fonts/Decalotype-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Cross-document page transition: a short root cross-fade between pages in browsers that support it; others navigate normally */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 250ms;
        animation-timing-function: ease-in-out;
    }
}

body {
    margin: 0;
    background: var(--project-background, var(--blue));
    color: var(--white);
    font-family: "Open Sauce Two", "Open Sauce Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

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

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}

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

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--blue);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.featured-visit-fab {
    display: none;
}

@media (max-width: 41.999rem), (min-width: 41.5rem) and (max-width: 42rem) {
    .featured-visit-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 2rem;
        top: 50%;
        translate: 0 -50%;
        z-index: 500;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--yellow);
        color: var(--blue);
        font-family: "Decalotype", sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: 0 0 0 5px var(--blue-dark), 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
        transition: opacity 250ms ease, transform 250ms ease;
    }

    #featured-visit-fab {
        color: rgb(0, 55, 150);
    }

    #featured-visit-fab,
    #airbnb-visit-fab {
        background-color: #ffd41a;
        background-image:
            radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 45%),
            linear-gradient(150deg, #ffe45c 0%, #ffd41a 45%, #e6b800 100%);
        box-shadow:
            0 0 0 5px var(--blue-dark),
            0 0.75rem 1.5rem rgba(0, 0, 0, 0.25),
            inset 0 2px 3px rgba(255, 246, 190, 0.7),
            inset 0 -3px 5px rgba(160, 110, 0, 0.35);
    }

    .featured-visit-fab.is-visible {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        animation: featured-visit-pulse 2.8s ease-in-out 250ms infinite;
    }
}

@media (min-width: 41.5rem) and (max-width: 42rem) {
    .featured-visit-fab {
        width: 72px;
        height: 72px;
        font-size: 0.95rem;
    }
}

@keyframes featured-visit-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-visit-fab.is-visible {
        animation: none;
    }
}

.container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

/* Homepage section gutter: 4rem total up to 512px, easing down to ~3.7rem by 672px, widening steadily to a 7rem total (3.5rem per side) at 1024px, holding until ~1080px, then widening to a ~148px-per-side peak at 1280px and easing back to ~130px per side by 1440px where the max-width takes over */
body:not(:has(#destination-name)) main .container {
    width: min(100% - max(clamp(3rem, 5rem - 3.125vw, 4rem), min(7rem, 15vw - 2.6rem), min(92vw - 55.1rem, 36.5rem - 22.5vw)), var(--container));
}

/* Daddy's House keeps its existing phone gutter for the final section */
@media (max-width: 31.999rem) {
    body:has(#destination-name) #cta .container {
        width: min(100% - 4rem, var(--container));
    }
}

@media (min-width: 41.5rem) and (max-width: 42rem) {
    #whatsapp .immersive-media-section__grid {
        gap: 0.75rem;
    }

    #whatsapp .immersive-media-section__content {
        position: relative;
        z-index: 1;
    }

    #whatsapp .immersive-media-section__content h2 {
        max-width: none;
    }

    #whatsapp .whatsapp-heading-break {
        display: none;
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-bottom: 0.25rem;
    background: var(--project-background, var(--blue));
    transition: background-color 300ms ease, color 300ms ease;
}

.site-header--experience {
    background-color: #355B45;
}

.site-header--daddys-transition {
    background-color: #226c9d;
}
.site-header--immersive-media {
    background-color: #005f9c;
    color: var(--white);
}

body:has(#destination-name.destination-heading--daddys-house) #cta {
    background: #005f9c;
    padding-bottom: 0;
}

body:has(#destination-name.destination-heading--daddys-house) #whatsapp-band .project-immersive-media__band {
    display: block !important;
    width: 100%;
    padding: 1.5rem 1rem;
    background: #095307;
    color: var(--white);
    font-family: "Roca Two", sans-serif;
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    font-weight: 700;
    text-align: center;
}

@media (min-width: 27.125rem) {
    body:has(#destination-name.destination-heading--daddys-house) #whatsapp-band .project-immersive-media__band {
        white-space: nowrap;
    }
}

body:has(#destination-name.destination-heading--daddys-house) #whatsapp-band .project-immersive-media__band-link {
    position: relative;
    display: inline-block;
    color: var(--yellow);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

body:has(#destination-name.destination-heading--daddys-house) #whatsapp-band .project-immersive-media__band-link::after {
    position: relative;
    right: 0;
    bottom: -0.15em;
    left: 0;
    width: auto;
    height: 2px;
    background: var(--yellow);
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 180ms ease;
    position: absolute;
}

body:has(#destination-name.destination-heading--daddys-house) #whatsapp-band .project-immersive-media__band-link::after {
    transform: scaleX(0);
    transform-origin: right center;
}

body:has(#destination-name.destination-heading--daddys-house) #whatsapp-band .project-immersive-media__band-link:hover::after,
body:has(#destination-name.destination-heading--daddys-house) #whatsapp-band .project-immersive-media__band-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

#cta .immersive-media-section__visual {
    margin-bottom: 0;
}

#cta .immersive-media-section__content {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: none;
}

#cta .immersive-media-section__slideshow img {
    width: 100%;
    height: 100%;
    margin: 0;
}

@media (min-width: 32rem) and (max-width: 63.999rem) {
    #cta .immersive-media-section__grid {
        padding-inline: 1.25rem;
    }

    #cta .immersive-media-section__button {
        align-self: flex-start;
    }
}

@media (max-width: 63.999rem) {
    #cta .immersive-media-section__visual {
        max-width: clamp(280px, 60vw, 480px);
        margin-inline: auto;
    }
}

@media (min-width: 42rem) and (max-width: 63.999rem) {
    #cta .immersive-media-section__visual {
        justify-self: end;
        margin-inline: 0;
        margin-top: -5rem;
    }
}

/* Final section, 1024px+: tighter column gap (20px at 1024px, easing to the existing 56px at 1440px), a subtitle that fits two lines at 1024px (reaches the existing 24px by about 1080px), and a content-width button */
@media (min-width: 64rem) {
    #cta .immersive-media-section__grid {
        column-gap: clamp(1.25rem, 8.654vw - 4.289rem, 3.5rem);
    }

    #cta .immersive-media-section__copy:not(.immersive-media-section__copy--yellow) {
        font-size: clamp(1.25rem, 2.32vw - 0.07rem, 1.5rem);
    }

    #cta .immersive-media-section__button {
        align-self: flex-start;
    }
}

.site-header--map {
    background-color: #96b869;
    color: var(--blue);
}

.site-header--map .nav-toggle {
    border-color: var(--blue);
    color: var(--blue);
}

.site-header--map .site-nav__list a {
    color: var(--blue);
}

.site-header--map #destination-hero-logo {
    display: none !important;
}

.site-header--map #destination-text-logo {
    display: inline-block !important;
    color: var(--white);
}

.site-header--map #destination-text-logo {
    color: #095307;
}

.site-header--experience #destination-hero-logo {
    display: none !important;
}

.site-header--experience #destination-text-logo {
    display: inline-block !important;
    color: var(--white);
}

.site-header--daddys-transition #destination-hero-logo {
    display: none !important;
}

.site-header--daddys-transition #destination-text-logo {
    display: inline-block !important;
    color: var(--white);
}

.site-header--map #destination-text-logo,
.site-header--experience #destination-text-logo,
.site-header--daddys-transition #destination-text-logo {
    font-size: 1.3rem;
}

.destination-header__text-logo {
    white-space: nowrap;
}

.destination-header__logo-container {
    display: flex;
    align-items: center;
}

.site-header__inner {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.destination-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.destination-header__actions .site-nav__list a {
    font-family: "Decalotype", sans-serif;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
}

.logo {
    color: var(--yellow);
    font-family: "Roca Two", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    text-shadow: -2.5px -2.5px 0 #1146bb, 2.5px -2.5px 0 #1146bb, -2.5px 2.5px 0 #1146bb, 2.5px 2.5px 0 #1146bb;
}

#destination-hero-logo {
    display: none;
}

#destination-text-logo {
    display: inline-block;
    font-size: 1.3rem;
    text-shadow: none;
}

.site-header .logo__mobile-mark {
    display: none;
}

.nav-toggle {
    width: 46px;
    height: 46px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--white);
    cursor: pointer;
}

.nav-toggle__line {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: calc(100vh - 74px);
    padding: 1rem;
    background: var(--blue-dark);
}

.site-nav.is-open {
    display: block;
}

.site-nav__list {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1.1rem;
    text-decoration: none;
}

.site-nav__list a:hover {
    color: var(--yellow);
}

.hero {
    padding: 3rem 0 3rem;
    overflow: hidden;
}

.hero__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--yellow);
    font-family: "Decalotype", sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}

h1,
h2,
h3 {
    font-family: "Roca Two", sans-serif;
    font-weight: 700;
    line-height: 1.05;
}

h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--yellow);
    font-size: clamp(3rem, 12vw, 6.4rem);
}

h2 {
    margin: 0;
    font-size: clamp(2.15rem, 7vw, 4rem);
}

h3 {
    font-size: 1.45rem;
}

.hero__copy {
    max-width: 620px;
    margin: 2.05rem 0 0;
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
}

.hero h1 {
    max-width: 16ch;
    font-size: clamp(2.75rem, 8.9vw, 4.7rem);
    line-height: 1.15;
}

.hero__mobile-break {
    display: none;
}

@media (max-width: 41.999rem) {
    .hero__mobile-break {
        display: inline;
    }

    .hero__desktop-break {
        display: none;
    }

    .hero__you {
        text-decoration: underline;
    }
}

@media (min-width: 32rem) and (max-width: 41.999rem) {
    #hero .hero__mobile-break {
        display: none;
    }

    #hero .hero__desktop-break {
        display: inline;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 12vw, 4.59rem);
        line-height: 1.05;
    }

    .hero__copy {
        font-size: 1.5rem;
    }
}

.hero__break-672b {
    display: none;
}

@media (min-width: 41.5rem) and (max-width: 42rem) {
    #hero .hero__break-672a,
    #hero .hero__desktop-break {
        display: none;
    }

    #hero .hero__break-672b {
        display: inline;
    }

    .hero h1 {
        max-width: none;
        margin-top: 2rem;
    }
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-family: "Decalotype", sans-serif;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 180ms ease, background-color 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button--primary {
    background: var(--white);
    color: var(--blue);
}

.button--primary:hover {
    background: var(--off-white);
}

.button--yellow {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--blue);
}

.button--yellow:hover {
    filter: brightness(0.94);
}

.button--yellow:focus-visible {
    outline-color: var(--white);
}

.button--large {
    min-height: 62px;
    padding: 1.1rem 2.1rem;
    font-size: 1.05rem;
}

.hero__media {
    margin: 0;
    overflow: hidden;
    border: 4px solid rgba(255, 215, 0, 0.35);
    border-radius: var(--radius-lg);
    background: var(--blue-dark);
    box-shadow: var(--shadow);
}

.hero__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hero__visual {
    align-self: end;
    margin: 0 0 -3rem;
    display: flex;
    justify-content: center;
    aspect-ratio: 1 / 1;
    transform: scale(1.08);
    transform-origin: center bottom;
}

.hero__visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 31.5rem) and (max-width: 31.999rem) {
    #hero .hero__visual {
        align-items: flex-end;
        aspect-ratio: auto;
        padding-inline: 7.5%;
    }
}

.hero__media figcaption {
    padding: 0.85rem 1rem;
    color: var(--white);
    font-size: 0.85rem;
    text-align: center;
}

.destination-hero__visual {
    border-color: var(--blue) !important;
    border-width: 6px;
}

.destination-hero__visual figcaption {
    background: var(--blue);
    color: var(--yellow) !important;
}

.hero-media-slideshow {
    display: grid;
}

.hero-media-slideshow img {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 600ms ease;
}

.hero-media-slideshow img.is-active {
    opacity: 1;
}

.hero-media-slideshow {
    touch-action: pan-y;
}

.hero-media-stage {
    position: relative;
}

.hero-media-caption-link {
    text-decoration: none;
}

.hero-media-caption-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.hero__media figcaption:has(.hero-media-caption-link) {
    position: relative;
}

.hero-media-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 0 0.15em;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 2.5rem;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 200ms ease;
}

.hero-media-nav:hover {
    color: var(--white);
}

.hero-media-nav:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: -4px;
    color: var(--white);
}

.hero-media-nav--prev {
    left: 0.25rem;
}

.hero-media-nav--next {
    right: 0.25rem;
}

.about__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.about__content h2 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    color: var(--blue);
    margin-bottom: 0;
}

@media (max-width: 63.999rem) {
    .about__content h2 {
        font-size: clamp(2.75rem, 2.5rem + 1.08vw, 3.2rem);
    }
}

/* Section 2 heading: grows from the existing 2.75rem at 672px to the existing 3.25rem desktop size at 1440px */
@media (min-width: 42rem) and (max-width: 89.999rem) {
    #featured .about__content h2 {
        font-size: clamp(2.75rem, 1.0417vw + 2.3125rem, 3.25rem);
    }
}

.about__copy {
    margin: 0;
    margin-top: 0.96em;
    margin-top: 0.6lh;
    color: var(--blue);
    font-family: "Roca Two", sans-serif;
    font-size: clamp(1.5rem, 7.4vw, 2rem);
    font-weight: 700;
}

.about__content > .button {
    margin-top: 1.25rem;
}

.about__content .button--primary {
    background: var(--blue);
    color: var(--yellow);
}

.about__content .button--primary:hover {
    background: rgb(0, 45, 140);
}

.about__media {
    margin: 0;
    border-color: var(--yellow);
}

@media (max-width: 41.999rem) {
    .about__media .hero-media-slideshow img {
        height: auto;
        aspect-ratio: 25 / 17;
    }
}

@media (max-width: 32rem) {
    .destination-hero__visual .hero-media-slideshow img {
        aspect-ratio: 4 / 3;
    }
}

.about__media figcaption {
    background: var(--yellow);
    color: var(--blue);
    font-family: "Decalotype", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.15;
    text-transform: uppercase;
}

#hero-visual figcaption {
    background: var(--blue);
}

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

.steps-section__inner {
    display: grid;
    justify-items: center;
}

.steps-section__heading {
    max-width: var(--container);
    margin-bottom: 2.5rem;
    text-align: center;
}

.steps-section__heading h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
}

.steps-section__cards {
    display: grid;
    width: 100%;
    gap: 1rem;
}

.steps-card {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 0;
    perspective: 800px;
}

.steps-card-with-link {
    display: grid;
    align-content: start;
    gap: 0.5rem;
}

.steps-card__inner,
.steps-card__front,
.steps-card__back {
    width: 100%;
    height: 100%;
}

.steps-card__inner {
    position: relative;
    transform-style: preserve-3d;
}

.steps-card__front,
.steps-card__back {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: var(--blue-dark);
    backface-visibility: hidden;
}

.steps-card__front {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.steps-card__mobile-image {
    display: none;
}

.steps-card__number {
    display: block;
    color: var(--yellow);
    font-family: "Roca Two", sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.steps-card__front h3 {
    margin: 1rem 0 0;
    color: var(--yellow);
    font-family: "Decalotype", sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
}

.steps-card__front p {
    margin: 1rem 0 0;
    max-width: 19ch;
    color: var(--white);
    font-family: "Roca Two", sans-serif;
    font-size: clamp(1.1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    line-height: 1.5;
}

.steps-card__front ul {
    margin: 1.25rem 0 0;
    padding-left: 1rem;
    color: var(--white);
    font-family: "Open Sauce Two", "Open Sauce Sans", sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1rem);
    font-weight: 400;
    line-height: 1.45;
}

.steps-card__text-link {
    position: relative;
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--yellow);
    font-family: "Open Sauce Two", "Open Sauce Sans", sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1rem);
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
    white-space: nowrap;
    justify-self: center;
}

.steps-card__text-link--mobile {
    display: none;
}

.steps-card__text-link::after {
    position: absolute;
    right: 0;
    bottom: -0.15em;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--yellow);
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 180ms ease;
}

.steps-card__text-link:hover::after,
.steps-card__text-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.steps-card__back {
    overflow: hidden;
    transform: rotateY(180deg);
}

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

.steps-section__button {
    margin-top: 2rem;
}

.steps-carousel {
    position: relative;
    width: min(100%, 780px);
}

.steps-carousel__arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 5;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: 3.5rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
}

.steps-carousel__arrow:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    opacity: 1;
}

.steps-carousel__arrow--prev {
    left: 0;
}

.steps-carousel__arrow--next {
    right: 0;
}

@media (max-width: 41.999rem), (min-width: 41.5rem) and (max-width: 42rem) {
    .steps-carousel__arrow {
        display: flex;
    }

    .steps-section__cards {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-inline: max(0px, calc((100% - 20.5rem) / 2));
        scroll-padding-inline: max(0px, calc((100% - 20.5rem) / 2));
    }

    .steps-section__cards::-webkit-scrollbar {
        display: none;
    }

    .steps-section__cards > * {
        flex: 0 0 100%;
        max-width: 20.5rem;
        scroll-snap-align: start;
    }

    .steps-card__front ul,
    .steps-card__text-link {
        font-size: 1rem;
    }
}

@media (max-width: 63.999rem) {
    .steps-card__front {
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: auto auto auto 1fr;
        align-items: center;
        column-gap: 0.5rem;
    }

    .steps-card__mobile-image {
        display: block;
        grid-column: 1 / -1;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 0 0 0.85rem;
        border-radius: var(--radius-sm);
        object-fit: cover;
    }

    .steps-card__number,
    .steps-card__front h3 {
        margin: 0;
        font-family: "Roca Two", sans-serif;
        font-size: clamp(1.0625rem, 6vw + 0.0375rem, 1.5rem);
        line-height: 1.15;
    }

    .steps-card__number {
        grid-column: 2;
    }

    .steps-card__number::after {
        content: " -" / "";
    }

    .steps-card__front h3 {
        grid-column: 3;
    }

    .steps-card__front p {
        grid-column: 1 / -1;
        align-self: start;
        margin-top: 0.75rem;
        font-size: 1.15rem;
        line-height: 1.4;
    }

    .steps-card__front ul {
        grid-column: 1 / -1;
        align-self: start;
        margin-top: 0.6rem;
    }

    .steps-card-with-link .steps-card__text-link {
        display: none;
    }

    .steps-card__text-link--mobile {
        display: inline-block;
        margin-top: 1.25rem;
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 41.999rem), (min-width: 41.5rem) and (max-width: 42rem) {
    .steps-card__text-link--mobile {
        order: 1;
    }

    .steps-card__text-link--mobile::after {
        transform: scaleX(1);
    }
}

@media (max-width: 22.499rem) {
    .steps-card {
        aspect-ratio: auto;
        height: auto;
        min-height: calc(61.53vw + 221.09px);
    }
}

/* Below 336px the number + COMMUNICATE leave under ~8px of slack even at the fluid size: drop all three numbers and the column gaps that framed them */
@media (max-width: 21rem) {
    .steps-card__number {
        display: none;
    }

    .steps-card__front {
        column-gap: 0;
    }
}

@media (min-width: 42.001rem) and (max-width: 63.999rem) {
    .steps-section__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps-card {
        aspect-ratio: 5 / 7;
    }

    .steps-card__front {
        padding: clamp(12px, calc(1.2821vw - -3.3846px), 14px);
        column-gap: 0.35rem;
    }

    .steps-card__mobile-image {
        margin-bottom: 0.5rem;
    }

    .steps-card__number,
    .steps-card__front h3 {
        font-size: clamp(15.5px, calc(1.3462vw - -6.4538px), 17.6px);
    }

    .steps-card__front p {
        max-width: none;
        margin-top: clamp(5px, calc(0.641vw - -0.6923px), 6px);
        font-size: clamp(12.5px, calc(0.7051vw - -7.7615px), 13.6px);
        line-height: 1.35;
    }

    .steps-card__front ul {
        margin-top: clamp(5px, calc(0.641vw - -0.6923px), 6px);
        font-size: clamp(12px, calc(0.641vw - -7.6923px), 13px);
        line-height: 1.4;
    }
}

.section-three__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.section-three {
    position: relative;
    background: var(--blue);
    color: var(--white);
}

.section-three::after {
    position: absolute;
    right: max(1rem, calc((100% - var(--container)) / 2));
    top: 0;
    left: max(1rem, calc((100% - var(--container)) / 2));
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    content: "";
}

.section-three__content .eyebrow {
    color: var(--yellow);
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.section-three__content {
    min-width: 0;
    align-self: end;
}

.section-three__content h2 {
    max-width: 24ch;
    margin: 0;
    color: var(--white);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-style: italic;
    line-height: 1.15;
}

/* 512–1023px: the eyebrow, quote and supporting line are centred as one group; the quote grows from 24px at 512px to the 30.72px (1.92rem) it has at 1024px */
@media (min-width: 32rem) and (max-width: 63.999rem) {
    #airbnb .section-three__content .eyebrow {
        text-align: center;
    }

    #airbnb .section-three__content h2 {
        margin-inline: auto;
        font-size: clamp(1.5rem, 1.3125vw + 1.08rem, 1.92rem);
        text-align: center;
    }

    #airbnb .section-three__copy {
        text-align: center;
    }
}

.section-three__copy {
    margin: 2.05rem 0 0;
    color: var(--white);
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    font-weight: 700;
}

.section-three__button {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 1.25rem auto 0;
}

.section-three__visual {
    align-self: end;
    margin: 0;
    display: flex;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

#airbnb .section-three__content {
    align-self: center;
}

.section-three__slideshow {
    display: grid;
    width: 100%;
    height: 100%;
}

.section-three__slideshow img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 350ms ease;
}

.section-three__slideshow img.is-active {
    opacity: 1;
}

.conversion-cta {
    background: var(--white);
    border-top: 24px solid var(--yellow);
    border-bottom: 24px solid var(--yellow);
    color: var(--blue);
}

.conversion-cta__inner {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    text-align: center;
}

.conversion-cta__inner h2 {
    margin: 0;
    color: var(--blue);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
}

.conversion-cta__copy {
    margin: 0;
}

.conversion-cta__button {
    background: var(--blue);
    color: var(--yellow);
}

.conversion-cta__button:hover {
    background: var(--blue-dark);
}

.immersive-media-section {
    background: var(--blue);
    color: var(--white);
}

.immersive-media-section__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.immersive-media-section__content {
    align-self: end;
    transform: translateY(-1rem);
}

.immersive-media-section__content h2 {
    max-width: 24ch;
    margin: 0;
    color: var(--yellow);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.25;
}

#cta .immersive-media-section__content h2 span {
    color: var(--white);
}

.immersive-media-section__copy {
    margin: 2.05rem 0 0;
    color: var(--white);
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    font-weight: 700;
}

.immersive-media-section__copy span {
    color: var(--yellow);
}

#cta .immersive-media-section__copy--yellow {
    color: var(--yellow);
}

.immersive-media-section__copy-link {
    position: relative;
    display: inline-block;
    color: var(--yellow);
    text-decoration: none;
}

.immersive-media-section__copy-link::after {
    position: absolute;
    right: 0;
    bottom: -0.15em;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--yellow);
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 180ms ease;
}

.immersive-media-section__copy-link:hover::after,
.immersive-media-section__copy-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

@media (max-width: 41.999rem) {
    #whatsapp .immersive-media-section__copy-link::after,
    #cta .immersive-media-section__copy-link::after {
        transform: scaleX(1);
    }
}

.immersive-media-section__button {
    margin-top: 1.25rem;
}

#whatsapp .immersive-media-section__button {
    align-self: flex-start;
}

#whatsapp .immersive-media-section__visual {
    margin-bottom: 0;
}

#whatsapp .immersive-media-section__content {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: none;
}

.immersive-media-section__visual {
    align-self: end;
    margin: 0 0 -7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.immersive-media-section__slideshow {
    display: grid;
    width: 100%;
    flex: 1;
}

.immersive-media-section__slideshow img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 350ms ease;
}

.immersive-media-section__slideshow img.is-active {
    opacity: 1;
}

/* 512–1023px: large homepage visuals stop growing at a 28rem (448px) reference size; extra width becomes whitespace */
@media (min-width: 32rem) and (max-width: 63.999rem) {
    #hero .hero__visual,
    #featured .about__media,
    #airbnb .section-three__visual,
    #whatsapp .immersive-media-section__visual {
        max-width: 28rem;
        margin-inline: auto;
    }

    /* the Hero's existing scale(1.08) renders its 28rem box at ~484px */
    #featured .about__media .hero-media-slideshow img {
        height: auto;
        aspect-ratio: 25 / 17;
    }
}

@media (min-width: 64rem) {
    .about__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .about__media .hero-media-slideshow img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .section-three__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .steps-section__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .immersive-media-section__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .steps-card__inner {
        transition: transform 600ms ease;
    }

    .steps-card:hover .steps-card__inner {
        transform: rotateY(180deg);
    }
}

.section {
    padding: clamp(4rem, 9vw, 7rem) 0;
    scroll-margin-top: 1rem;
}

#airbnb,
#whatsapp {
    padding-bottom: 0;
}

/* 1024–1440px: start the final section higher (top padding eases to 7rem) and keep 3rem below the button until 1280px, easing to the existing 1440px layout (no extra bottom space) */
@media (min-width: 64rem) {
    #whatsapp {
        padding-top: clamp(4rem, 11.538vw - 3.384rem, 7rem);
    }

    #whatsapp .immersive-media-section__content {
        padding-bottom: clamp(0px, 27rem - 30vw, 3rem);
    }
}

.section--light {
    background: var(--off-white);
    color: var(--text);
}

@media (min-width: 64rem) {
    #featured {
        padding-bottom: calc(clamp(4rem, 9vw, 7rem) + 2.25rem);
    }
}

.site-footer {
    padding: 3rem 0;
    background: #00133f;
}

.site-footer__inner {
    display: grid;
    gap: 2rem;
}

.site-footer p {
    max-width: 44ch;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.75);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.site-footer__links a {
    text-underline-offset: 4px;
}

.site-footer__legal {
    font-size: 0.85rem;
}

.destination-page {
    padding: 0 0 4rem;
}

body:has(#destination-name.destination-heading--daddys-house) .destination-page {
    padding-bottom: 0;
}

.destination-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 1.3rem;
    padding: 4.5rem 0 3.25rem;
    align-items: start;
}

@media (max-width: 63.999rem) {
    .destination-hero.container {
        width: min(100% - 2rem, var(--container));
    }

    .destination-hero {
        padding-top: 1.5rem;
    }

    .destination-hero__content {
        width: 100%;
        margin-inline: auto;
    }

    .destination-hero .destination-host-link {
        margin-bottom: 0.75rem;
        color: var(--yellow);
    }

    .destination-hero .destination-host-link::after {
        transform: scaleX(1);
    }

    #destination-location::after {
        transform: scaleX(1);
    }
}

.destination-hero::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    background: var(--project-hero-background, var(--blue));
    content: "";
    transform: translateX(-50%);
}

.destination-hero__content {
    display: grid;
    gap: 1rem;
    max-width: 720px;
}

.destination-hero__intro {
    display: grid;
    gap: 1rem;
    padding-top: 0.75rem;
    margin-bottom: -0.75rem;
}

.destination-header__logo {
    width: min(100%, 125px);
    height: auto;
}

body:has(#destination-name.destination-heading--daddys-house) #destination-hero-logo {
    width: min(100%, 115px);
}

.destination-hero__visual {
    align-self: end;
    max-width: 92%;
}

.destination-hero__media-group {
    display: grid;
    gap: 0.85rem;
}

.destination-hero__links {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.destination-hero__find-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.destination-hero__find-more .destination-tiktok-link,
.destination-hero__find-more .destination-whatsapp-link,
.experience-right-social .destination-tiktok-link,
.experience-right-social .destination-whatsapp-link {
    flex-shrink: 0;
}

.destination-hero__find-more .location-link,
.experience-right-social .location-link {
    color: var(--white);
}

@media (max-width: 63.999rem) {
    .destination-hero__visual {
        max-width: min(92%, 27.6rem);
        margin-inline: auto;
    }

    .destination-hero .destination-hero__visual figcaption {
        color: var(--white) !important;
    }

    .destination-hero__find-more .location-link::after {
        background: currentColor;
        transform: scaleX(1);
    }
}

@media (max-width: 63.999rem) {
    .destination-hero__links {
        flex-direction: column;
        gap: 1rem;
    }
}

.destination-tiktok-link,
.destination-whatsapp-link {
    display: inline-flex;
    align-items: center;
}

.destination-tiktok-link img,
.destination-whatsapp-link img {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    object-fit: contain;
}

.destination-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-height: clamp(9.45rem, 30.555vw, 16.065rem);
}

.destination-heading-row h1 {
    margin: 0;
    max-width: none;
    color: var(--white);
    font-size: clamp(2.7rem, 8.8vw, 4.6rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.destination-heading--daddys-house {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.62);
}

.destination-heading--daddys-house .destination-heading__line {
    display: block;
}

.destination-heading__line--left {
    text-align: left;
}

.destination-heading__line--center {
    white-space: pre;
    text-align: center;
}

.destination-heading__line--right {
    text-align: right;
}

.hero-sub {
    margin: 0;
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

/* the one-line subtitle is 279px wide at 18px but the Hero is only (viewport - 2rem) wide, so below ~311px let it wrap */
@media (max-width: 19.5rem) {
    .hero-sub {
        white-space: normal;
    }
}

.location {
    margin: 0;
}

.location-link {
    display: inline-block;
    color: var(--yellow);
    text-decoration: none;
}

.destination-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.destination-hero .destination-actions {
    display: grid;
    width: calc(100% - 64px);
    justify-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (max-width: 63.999rem) {
    .destination-hero .destination-actions {
        margin-inline: auto;
    }

    .hero-sub {
        text-align: center;
    }

    .destination-heading-row {
        justify-content: center;
    }

    .destination-heading-row h1 {
        font-size: clamp(2.97rem, 9.68vw, 5.06rem);
    }
}

@media (max-width: 41.999rem) {
    .site-header .logo__text {
        display: none;
    }

    .site-header .logo__mobile-mark {
        display: block;
        width: min(100%, 28px);
        height: auto;
    }
}

.destination-hero .button--primary {
    background: var(--yellow);
    color: var(--blue);
}

.destination-host-link {
    position: relative;
    color: var(--white);
    text-decoration: none;
}

.destination-host-link::after {
    position: absolute;
    right: 0;
    bottom: -0.15em;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 180ms ease;
}

.destination-host-link:hover::after,
.destination-host-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.destination-section-card {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow);
}

#experience {
    position: relative;
    isolation: isolate;
    padding: 4.5rem 0 3.5rem;
}

#experience::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    background-color: #355B45;
    content: "";
    transform: translateX(-50%);
}

#activities {
    height: auto;
    padding: 4rem 0;
    display: grid;
    background: #226c9d;
}

#location {
    min-height: 0;
    background: #96b869;
}

.daddys-airbnb-transition__content {
    padding-top: 1rem;
}

@media (max-width: 31.999rem) {
    .daddys-airbnb-transition__content {
        max-width: 20rem;
        margin-inline: auto;
        padding-inline: 0.75rem;
    }

    #cta .immersive-media-section__content {
        width: 100%;
        max-width: 20rem;
        margin-inline: auto;
        padding-inline: 0.75rem;
    }

    .cta-copy-break {
        display: none;
    }
}

.cta-heading-break {
    display: none;
}

@media (max-width: 22.5rem) {
    .cta-heading-break {
        display: inline;
    }

    #cta .immersive-media-section__content h2 {
        font-size: 1.75rem;
    }
}

.experience-left-title.daddys-airbnb-transition__heading {
    /* Constant visual gap to the price note: the heading line box scales with its fluid font-size, so offset it. */
    margin-bottom: calc(12.4px - 0.1575em);
    color: var(--yellow);
    text-align: center;
}

.daddys-airbnb-transition__price-note {
    margin: 0 0 1.5rem;
    color: var(--white);
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

.daddys-airbnb-transition__price-note abbr {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: inherit;
}

.daddys-airbnb-transition__columns {
    display: grid;
    gap: 2.5rem;
}

.daddys-airbnb-transition__package-image {
    width: 100%;
    max-width: 78%;
    margin-inline: auto;
    height: auto;
}

.daddys-airbnb-transition__package-viewport {
    display: contents;
}

@media (max-width: 41.999rem) {
    .daddys-airbnb-transition__package-viewport {
        display: block;
        overflow: hidden;
    }

    .daddys-airbnb-transition__package-viewport--package1 {
        aspect-ratio: 1244 / 1823;
    }

    .daddys-airbnb-transition__package-viewport--package1 .daddys-airbnb-transition__package-image {
        max-width: none;
        width: 160.77%;
        margin-left: -30.39%;
        margin-top: -8.04%;
    }

    .daddys-airbnb-transition__package-viewport--package2 {
        aspect-ratio: 1610 / 1222;
    }

    .daddys-airbnb-transition__package-viewport--package2 .daddys-airbnb-transition__package-image {
        max-width: none;
        width: 124.22%;
        margin-left: -11.8%;
        margin-top: -7.76%;
    }
}

@media (min-width: 22.5rem) and (max-width: 41.999rem) {
    .daddys-airbnb-transition__package-viewport--package1,
    .daddys-airbnb-transition__package-viewport--package2 {
        max-width: 328px;
        margin-inline: auto;
    }
}

.daddys-airbnb-transition__download {
    margin: 0.5rem 0 0.75rem;
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 32rem) {
    .daddys-airbnb-transition__download a::after {
        transform: scaleX(1);
    }
}

@media (max-width: 31.999rem) {
    .daddys-airbnb-transition__download {
        white-space: normal;
    }
}

.daddys-airbnb-transition__download a {
    margin-inline: 0.2em;
}

.download-break {
    display: none;
}

.daddys-airbnb-transition__columns .button--yellow {
    display: block;
    margin: 2.5rem auto 0;
}

@media (max-width: 41.999rem) {
    .daddys-airbnb-transition__columns .button--yellow {
        width: fit-content;
        margin-inline: auto;
    }
}

@media (min-width: 42rem) {
    .daddys-airbnb-transition__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
        /* visible artwork is wider on the right than the left; shift the group so it reads as centered */
        translate: -3.4% 0;
    }

    .daddys-airbnb-transition__column--left {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .daddys-airbnb-transition__column--right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* shared width keeps the download text centered on Package 2's cropped artwork */
        --package2-visible-width: 70.59%;
    }

    /* wrapper widths below crop each PNG's transparent gutter-facing margin without resizing the artwork */
    .daddys-airbnb-transition__package-viewport--package1 {
        display: block;
        width: 63.26%;
        overflow: hidden;
    }

    .daddys-airbnb-transition__package-viewport--package1 .daddys-airbnb-transition__package-image {
        width: 123.3%;
        max-width: none;
        margin-inline: 0;
    }

    .daddys-airbnb-transition__package-viewport--package2 {
        display: block;
        width: var(--package2-visible-width);
        aspect-ratio: 1810 / 1347;
        overflow: hidden;
    }

    .daddys-airbnb-transition__package-viewport--package2 .daddys-airbnb-transition__package-image {
        width: 110.5%;
        max-width: none;
        margin-inline: 0;
        margin-left: -10.5%;
    }

    .daddys-airbnb-transition__download {
        width: var(--package2-visible-width);
    }
}

@media (min-width: 42rem) and (max-width: 63.999rem) {
    #activities .container {
        width: min(100% - clamp(2rem, calc(1.45px + 4.545vw), 3rem), var(--container));
    }
}

/* 672-1029px: row 1 holds only the two packages (centred on each other), row 2 the full-width download note, row 3 LET ME BOOK */
@media (min-width: 42rem) and (max-width: 64.3125rem) {
    .daddys-airbnb-transition__columns {
        /* one shared factor scales both packages within their columns */
        --package-scale: 1.35;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "left pkg2"
            "details details"
            "cta cta";
        row-gap: 1rem;
        /* the full-width rows are centred on the container, so no shift here */
        translate: none;
    }

    /* right-column children join the main grid so the note and LET ME BOOK can span both columns */
    .daddys-airbnb-transition__column--right {
        display: contents;
        --package2-visible-width: calc(70.59% * var(--package-scale));
    }

    .daddys-airbnb-transition__column--left {
        grid-area: left;
        align-self: center;
    }

    .daddys-airbnb-transition__package-viewport--package1 {
        width: calc(63.26% * var(--package-scale));
    }

    .daddys-airbnb-transition__package-viewport--package2 {
        grid-area: pkg2;
        align-self: center;
    }

    .daddys-airbnb-transition__columns .button--yellow {
        grid-area: cta;
        justify-self: center;
        align-self: start;
        margin: 0;
    }

    .daddys-airbnb-transition__download {
        grid-area: details;
        justify-self: center;
        align-self: start;
        width: auto;
        margin: 0;
        text-align: center;
        white-space: nowrap;
    }

    .daddys-airbnb-transition__download a {
        margin-right: 0;
    }
}

/* 1030-1439px: the note scales with the Package 2 width it sits under, from 13px up to the existing 16px at 1440px; line-height stays 1.75rem so the layout height does not change */
@media (min-width: 64.375rem) and (max-width: 89.999rem) {
    .daddys-airbnb-transition__download {
        font-size: clamp(0.8125rem, 0.8333vw + 0.25rem, 1rem);
        line-height: 1.75rem;
    }
}

/* 1030px+: the note's box no longer follows the Package 2 width; it grows from 19.8rem to the existing 1440px width (24.794rem) and stays centred on the Package 2 wrapper */
@media (min-width: 64.375rem) {
    .daddys-airbnb-transition__download {
        --download-width: clamp(19.8rem, 19.48vw + 7.26rem, 24.794rem);
        width: var(--download-width);
        margin-left: calc((var(--package2-visible-width) - var(--download-width)) / 2);
    }
}

.experience-section__container {
    display: grid;
    gap: 2.5rem;
    align-items: stretch;
}

@media (min-width: 64rem) {
    .experience-section__container {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 3.5rem;
    }
}

.experience-left-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.experience-left-title {
    margin: 0 0 1.25rem;
    color: var(--yellow);
    font-family: "Decalotype", sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

.experience-left-col .experience-left-title {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
}

.experience-title__break {
    display: none;
}

@media (max-width: 31.999rem) {
    .experience-left-title {
        font-size: 1.75rem;
    }

    .experience-left-col .experience-left-title {
        margin-bottom: 2rem;
        line-height: 1.35;
    }

    .daddys-airbnb-transition__price-note {
        margin-bottom: 2rem;
    }

    .experience-title__break {
        display: inline;
    }
}

.experience-left-col .destination-media-frame {
    width: 92%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

@media (max-width: 63.999rem) {
    .experience-left-col .destination-media-frame {
        width: min(92%, 27.6rem);
    }
}

/* Desktop: start at the 512px player width (27.6rem) at 1024px and grow to the existing 92%-of-column size (~620px) by 1440px */
@media (min-width: 64rem) {
    .experience-left-col .destination-media-frame {
        width: min(92%, clamp(27.6rem, 42.9vw + 0.15rem, 38.8rem));
    }
}

.experience-left-col .project-experience-block {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.experience-left-col .project-experience-block iframe,
.experience-left-col .project-experience-block video {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Player fullscreen: the same iframe is restyled (never moved or reloaded) to a centered 4:3 (landscape) or 3:4 (portrait) window over a dark backdrop */
.player-fullscreen__backdrop,
.player-fullscreen__close {
    display: none;
}

html.is-player-fullscreen {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.project-experience-block.is-fullscreen {
    --fs-margin: 16px;
    --fs-w: min(100vw - 2 * var(--fs-margin), (100vh - 2 * var(--fs-margin)) * 4 / 3);
    --fs-h: calc(var(--fs-w) * 3 / 4);
}

@media (orientation: portrait) {
    .project-experience-block.is-fullscreen {
        --fs-w: min(100vw - 2 * var(--fs-margin), (100vh - 2 * var(--fs-margin)) * 3 / 4);
        --fs-h: calc(var(--fs-w) * 4 / 3);
    }
}

@supports (height: 100dvh) {
    .project-experience-block.is-fullscreen {
        --fs-w: min(100vw - 2 * var(--fs-margin), (100dvh - 2 * var(--fs-margin)) * 4 / 3);
    }

    @media (orientation: portrait) {
        .project-experience-block.is-fullscreen {
            --fs-w: min(100vw - 2 * var(--fs-margin), (100dvh - 2 * var(--fs-margin)) * 3 / 4);
        }
    }
}

.project-experience-block.is-fullscreen .player-fullscreen__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.68);
}

.experience-left-col .project-experience-block.is-fullscreen iframe {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: 1101;
    width: var(--fs-w);
    height: var(--fs-h);
    border-radius: 12px;
}

.project-experience-block.is-fullscreen .player-fullscreen__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1102;
    top: calc(50% - var(--fs-h) / 2 + 10px);
    right: calc(50% - var(--fs-w) / 2 + 10px);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
}

.project-experience-block.is-fullscreen .player-fullscreen__close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.project-experience-block.is-fullscreen .player-fullscreen__close:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}

.player-fullscreen__close svg {
    width: 22px;
    height: 22px;
}

.experience-right-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
    padding-bottom: 1rem;
    min-width: 0;
}

.experience-right-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    padding-top: 3.5rem;
    padding-inline: 0.75rem;
}

@media (min-width: 32rem) and (max-width: 63.999rem) {
    /* 1rem at 512px easing to 0.5rem at 672px, then held */
    .experience-right-content {
        padding-top: clamp(0.5rem, 2.6rem - 5vw, 1rem);
    }
}

@media (min-width: 64rem) {
    .experience-right-content {
        padding-inline: 0.5rem;
    }
}

@media (max-width: 31.999rem) {
    .experience-right-content {
        width: 100%;
        max-width: 20rem;
        margin-inline: auto;
        padding-top: 1rem;
    }

    .experience-right-social .location-link::after {
        background: currentColor;
        transform: scaleX(1);
    }
}

@media (max-width: 32rem) {
    .experience-right-social .location-link::after {
        background: currentColor;
        transform: scaleX(1);
    }
}

.experience-right-heading {
    margin: 0;
    color: var(--yellow);
    font-family: "Roca Two", sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (min-width: 32rem) and (max-width: 63.999rem) {
    /* the 2.5rem grid gap plus 3.5rem padding-top left 6rem between the player and this text; the fluid padding-top above halves that to 3rem by 672px */
    .experience-right-heading,
    .experience-right-subheading {
        align-self: stretch;
        text-align: center;
    }
}

.experience-right-subheading {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    line-height: 1.35;
}

.experience-right-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    align-self: center;
}

.experience-right-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.destination-media-frame {
    position: relative;
    display: grid;
    gap: 1rem;
    overflow: hidden;
    min-height: 280px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(0, 35, 111, 0.9));
}

.project-experience-block {
    min-height: 280px;
    overflow: hidden;
    background: #000;
}

.project-experience-block video {
    display: block;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

.destination-media-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: 0;
    background: #000;
}

.video-caption {
    margin: 0.8rem 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.destination-section-card {
    padding: 1.25rem;
}

.map-container iframe {
    display: block;
    width: 100%;
    min-height: 280px;
    border: 0;
    border-radius: var(--radius);
}

#location {
    position: relative;
    display: grid;
    isolation: isolate;
    align-content: center;
    gap: 2.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#location::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    background: #96b869;
    content: "";
    transform: translateX(-50%);
}

.map-section__directions,
.map-section__location {
    min-width: 0;
}

@media (max-width: 63.999rem) {
    .map-section__title {
        order: -2;
    }

    .map-section__location {
        order: -1;
    }
}

.map-section__title {
    margin-bottom: 1.25rem;
    padding-top: 2rem;
    color: var(--blue);
}

@media (max-width: 63.999rem) {
    .map-section__title {
        margin-bottom: 0;
    }
}

@media (min-width: 90rem) {
    .map-section__break {
        display: block;
    }
}

.map-section__description {
    margin: 0;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius);
    background: #50754f;
    color: #f8f254;
    font-family: "Open Sauce Two", "Open Sauce Sans", sans-serif;
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
}

.map-section__label {
    display: block;
    margin-bottom: 0.6em;
}

.map-container {
    aspect-ratio: 3 / 2;
}

@media (max-width: 31.999rem) {
    .map-container {
        aspect-ratio: 1 / 1;
    }
}

.map-container iframe {
    height: 100%;
    min-height: 0;
}

.map-section__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 1rem;
}

.map-section__share-button {
    background: var(--white);
    color: var(--blue);
}

#location .map-section__tour-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--blue);
    text-align: left;
}

@media (min-width: 64rem) {
    .map-section__location {
        text-align: right;
    }
}

#location .map-section__tour-link::after {
    background: var(--blue);
}

@media (max-width: 32rem) {
    #location .map-section__tour-link::after {
        transform: scaleX(1);
    }
}

@media (min-width: 64rem) {
    #location {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        grid-template-areas:
            "heading heading"
            "desc map";
        align-items: start;
        padding-bottom: 3.5rem;
        min-height: 0;
    }

    .map-section__title {
        grid-area: heading;
    }

    .map-section__directions {
        grid-area: desc;
        align-self: center;
        padding-bottom: 105px;
    }

    .map-section__location {
        grid-area: map;
    }
}

@media (min-width: 32rem) and (max-width: 63.999rem) {
    #location {
        gap: 1.5rem;
    }

    .map-section__directions {
        padding-bottom: 1.5rem;
    }
}

@media (min-width: 32rem) and (max-width: 63.999rem) {
    /* map block holds the 512px width (27.5rem) through 672px, then grows to the desktop map width (~32.2rem) by 1024px */
    .map-section__location,
    .map-section__directions {
        width: min(100%, clamp(27.5rem, 18.55rem + 21.31vw, 32.2rem));
        justify-self: center;
    }

    /* 1.125rem (the 512px size) through 672px, then linear up to the desktop 1.5rem at 1024px */
    .map-section__description {
        font-size: clamp(1.125rem, 0.409rem + 1.7045vw, 1.5rem);
    }
}

.location-link {
    position: relative;
    display: inline-block;
    color: var(--yellow);
    text-decoration: none;
}

.location-link::after {
    position: absolute;
    right: 0;
    bottom: -0.15em;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--yellow);
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 180ms ease;
}

.location-link:hover::after,
.location-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Daddy's House: text links keep the underline the compact layout already shows, at every width */
body:has(#destination-name.destination-heading--daddys-house) :is(.destination-host-link, .location-link)::after {
    transform: scaleX(1);
}

body:has(#destination-name.destination-heading--daddys-house) :is(.destination-hero__find-more, .experience-right-social) .location-link::after {
    background: currentColor;
}

@media (min-width: 42rem) {
    .container {
        width: min(100% - 3rem, var(--container));
    }

    .section-three::after {
        right: max(1.5rem, calc((100% - var(--container)) / 2));
        left: max(1.5rem, calc((100% - var(--container)) / 2));
    }

    .hero {
        padding-top: 0.75rem;
    }
}

/* Project page desktop gutter: 56px per side, matching the homepage at 1024px */
@media (min-width: 64rem) {
    body:has(#destination-name) main .container {
        width: min(100% - 7rem, var(--container));
    }
}

@media (min-width: 64rem) {
    .destination-hero {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
        gap: 0.75rem;
        padding-top: 4.5rem;
    }

    .destination-hero__content {
        align-self: stretch;
        justify-self: start;
        width: max-content;
        padding-left: clamp(0.75rem, 6.8rem - 6.73vw, 2.5rem);
    }

    .destination-hero__media-group {
        padding-right: clamp(0.375rem, 3.4rem - 3.365vw, 1.25rem);
    }

    .destination-heading-row h1 {
        font-size: 4.37rem;
    }

    .hero-sub {
        font-size: 1.425rem;
    }

    .destination-hero .destination-actions {
        width: auto;
    }

    .destination-hero__visual {
        justify-self: end;
    }

    .destination-hero__links {
        justify-self: end;
        width: 92%;
    }

    .destination-heading-row {
        min-height: 0;
        align-items: flex-start;
    }
}

@media (min-width: 32rem) and (max-width: 63.999rem) {
    .destination-hero .destination-hero__visual .hero-media-slideshow img {
        aspect-ratio: 4 / 3;
    }

    .destination-heading__the {
        text-transform: lowercase;
    }

    .destination-heading-row {
        min-height: 0;
        align-items: flex-start;
    }

    .destination-heading-row h1 {
        max-width: 6em;
        font-size: clamp(3rem, 7.14vw, 4.6rem);
        text-align: center;
    }

    .destination-heading--daddys-house .destination-heading__line {
        display: inline;
        white-space: normal;
        text-align: inherit;
    }
}

@media (min-width: 64rem) {
    body.nav-open {
        overflow: auto;
    }

    .site-header__inner {
        min-height: 64px;
    }

    .nav-toggle {
        display: none;
    }

    .site-nav,
    .site-nav.is-open {
        position: static;
        display: block;
        width: auto;
        min-height: 0;
        padding: 0;
        background: transparent;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .site-nav__list a {
        padding: 0.7rem 0.9rem;
        border: 0;
        font-size: 0.95rem;
    }

    .site-nav__list .site-nav__cta {
        margin-left: 0.5rem;
        border: 2px solid var(--white);
        border-radius: var(--radius-sm);
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
        gap: clamp(3rem, 7vw, 6rem);
    }

    #hero .hero__desktop-break {
        display: none;
    }

    .hero__you-online {
        white-space: nowrap;
    }

    .hero h1 {
        font-size: clamp(4.2rem, 1.5vw + 3.24rem, 4.59rem);
        line-height: 1.05;
    }

    .hero {
        padding-top: 4.5rem;
    }

    .hero__copy {
        margin-top: 3.25rem;
    }

    .hero__content .button-group {
        margin-top: 2.5rem;
    }

    .site-footer__inner {
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
    }

    .site-footer__legal {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

    .steps-card:hover .steps-card__inner {
        transform: none;
    }
}