/* ==========================================================================
   Anurra By Casa De Bello — stylesheet
   Hand-written, mobile-first, no framework.

   Palette is drawn from the materials of the place: village limewash, deodar
   shadow, Kumaoni roof slate, the red ochre of aipan floor painting, and the
   brass of temple bells. Display face is Fraunces, whose soft and wonk axes
   give headings a carved, hand-cut quality rather than a polished one.

   Sections, in order:
     1. Tokens          8. Rooms
     2. Base            9. Amenities
     3. Typography     10. Distance rule
     4. Layout         11. Gallery + lightbox
     5. Buttons        12. Location
     6. Masthead       13. Forms
     7. Hero           14. Footer + action bar
                       15. Motion
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */

:root {
    /* Colour — taken from the property itself: the gold-on-maroon signboard,
       the marigold rosette on the gable, the green of the rooms and the pines,
       and the cream marble and limewash inside. */
    --limewash:   #f7f4ec; /* cream walls and marble floors */
    --limewash-2: #ede7da;
    --paper:      #fffdf8;
    --ink:        #241d17;
    --pine:       #3f5c42; /* the ridge behind the hotel */
    --pine-deep:  #24352a;
    --slate:      #6f6a61;
    --slate-soft: #989285;
    --madder:     #7c2118; /* the signboard band */
    --madder-dim: #5a1710;
    --brass:      #db9a26; /* the lettering and the rosette */
    --terracotta: #C27847; /* warm terracotta CTA and badges */
    --terracotta-hover: #AA6336;
    --line:       #ddd6c6;

    /* Type */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
    --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
    --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
    --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
    --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
    --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.6rem);

    /* Space */
    --gap:      clamp(1rem, 0.8rem + 1vw, 1.6rem);
    --gutter:   clamp(1.25rem, 0.9rem + 2.5vw, 3rem);
    --band:     clamp(3.5rem, 2.5rem + 5vw, 7rem);
    --measure:  68ch;
    --shell:    1240px;

    --radius: 2px;
    --shadow: 0 1px 2px rgb(35 41 31 / 6%), 0 12px 28px -18px rgb(35 41 31 / 22%);
}

/* 2. Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--limewash);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    /* Nothing may cause sideways scroll on a phone. */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

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

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--gutter);
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background: var(--pine);
    color: var(--limewash);
    text-decoration: none;
}

.skip-link:focus {
    top: 0.6rem;
}

/* 3. Typography --------------------------------------------------------- */

h1, h2, h3, h4, .display {
    margin: 0;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
    max-width: var(--measure);
    font-size: var(--step-1);
    line-height: 1.55;
    color: color-mix(in srgb, var(--ink) 85%, transparent);
    text-wrap: pretty;
}

/* Small caps utility label. Used for section eyebrows and data labels. */
.eyebrow {
    display: block;
    margin: 0 0 0.9rem;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--madder);
}

.eyebrow--quiet { color: var(--slate); }
.eyebrow--light { color: var(--brass); }

/* Divider drawn from the gold rosette on the hotel's own gable: a marigold dot
   held between two hairlines. */
.rule {
    position: relative;
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--line);
}

.rule::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--brass);
    box-shadow: 0 0 0 4px var(--limewash);
}

/* 4. Layout ------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--band);
}

.section--tight { padding-block: calc(var(--band) * 0.6); }
.section--flush-top { padding-block-start: 0; }

.section--pine {
    background: var(--pine);
    color: var(--limewash);
}

.section--pine .lede { color: color-mix(in srgb, var(--limewash) 82%, transparent); }

.section--band { background: var(--limewash-2); }

.section__head {
    max-width: var(--measure);
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.4rem);
}

/* Interior page header: no hero image, just the claim and the trail. */
.pagehead {
    padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
    border-bottom: 1px solid var(--line);
}

.pagehead h1 { max-width: 26ch; }
.pagehead .lede { margin-top: 1.2rem; }

.crumbs {
    margin-bottom: 1.6rem;
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
}

.crumbs a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.crumbs a:hover { color: var(--madder); }
.crumbs span { padding-inline: 0.4rem; }

/* Two-column editorial split: text hangs left, image sits right. */
.split {
    display: grid;
    gap: clamp(1.8rem, 1rem + 4vw, 4rem);
}

@media (min-width: 62rem) {
    .split {
        grid-template-columns: 1fr 1.05fr;
        align-items: center;
    }

    .split--reverse > :first-child { order: 2; }
}

.figure {
    margin: 0;
    position: relative;
}

.figure img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.figure__note {
    margin-top: 0.75rem;
    font-size: var(--step--1);
    color: var(--slate);
}

/* 5. Buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.btn--solid {
    background: var(--madder);
    border-color: var(--madder);
    color: var(--paper);
}

.btn--solid:hover {
    background: var(--madder-dim);
    border-color: var(--madder-dim);
}

.btn--outline {
    background: transparent;
    border-color: color-mix(in srgb, var(--ink) 35%, transparent);
    color: var(--ink);
}

.btn--outline:hover {
    border-color: var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.btn--ghost-light {
    background: color-mix(in srgb, #ffffff 12%, transparent);
    border-color: color-mix(in srgb, #ffffff 55%, transparent);
    color: #fff;
    backdrop-filter: blur(3px);
}

.btn--ghost-light:hover {
    background: color-mix(in srgb, #ffffff 22%, transparent);
    border-color: #fff;
}

.btn--sm {
    min-height: 42px;
    padding: 0.5rem 1.1rem;
    font-size: var(--step--1);
}

.btn:active { transform: translateY(1px); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}

/* Quiet inline link with an underline that thickens on hover. */
.link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    padding-bottom: 1px;
    transition: border-color 160ms ease;
}

.link:hover { border-bottom-color: currentColor; }

.link .icon { width: 1em; height: 1em; }

/* 6. Masthead ----------------------------------------------------------- */

.icon {
    width: 22px;
    height: 22px;
    flex: none;
}

.icon--sm { width: 17px; height: 17px; }

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--limewash) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.masthead.is-stuck {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--limewash) 96%, transparent);
}

.masthead__inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 0.65rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.wordmark {
    text-decoration: none;
    line-height: 1.1;
}

.wordmark__name {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
}

.wordmark__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate);
}

.nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    min-width: 48px;
    padding: 0.4rem 0.6rem;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
}

.nav__toggle-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 180ms ease;
}

.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top: 6px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav__list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__list.is-open {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    padding: 0.8rem var(--gutter) 1.4rem;
    background: var(--limewash);
    border-bottom: 1px solid var(--line);
}

.nav__list a {
    display: block;
    padding: 0.7rem 0;
    font-size: var(--step-1);
    text-decoration: none;
}

.nav__list a[aria-current="page"] { color: var(--madder); }

.nav__list-cta { margin-top: 0.6rem; }
.nav__list-cta a { display: inline-flex; font-size: var(--step--1); }

.masthead__actions { display: none; }

.masthead__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.masthead__phone:hover { color: var(--madder); }

@media (min-width: 60rem) {
    .nav__toggle { display: none; }

    .nav__list {
        display: flex;
        align-items: center;
        gap: clamp(1rem, 0.4rem + 1.6vw, 2.2rem);
    }

    .nav__list a {
        padding: 0.3rem 0;
        font-family: var(--font-body);
        font-size: var(--step--1);
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .nav__list-cta { display: none; }

    .masthead__actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
}

/* 7. Hero --------------------------------------------------------------- */

/* Bottom-anchored: the name and the one fact that matters sit low over the
   photograph, so the image reads first and the claim reads second. */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(30rem, 24rem + 34vh, 46rem);
    padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

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

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgb(27 38 32 / 88%) 0%, rgb(27 38 32 / 52%) 42%, rgb(27 38 32 / 18%) 78%, rgb(27 38 32 / 30%) 100%);
}

.hero__inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 88%, transparent);
}

.hero__eyebrow::before {
    content: '';
    width: clamp(1.5rem, 3vw, 3rem);
    height: 1px;
    background: var(--brass);
}

.hero h1 {
    max-width: 22ch;
    color: #fff;
}

.hero__sub {
    max-width: 46ch;
    margin-top: 1.2rem;
    font-size: var(--step-1);
    line-height: 1.5;
    color: color-mix(in srgb, #fff 88%, transparent);
}

/* The single most useful fact about this property, stated plainly. */
.hero__fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, #fff 28%, transparent);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 80%, transparent);
}

.hero__fact strong {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}

/* 8. Rooms -------------------------------------------------------------- */

.rooms {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

@media (min-width: 44rem) { .rooms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .rooms { grid-template-columns: repeat(4, 1fr); } }

.room {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.room__media {
    margin: 0;
    aspect-ratio: 3 / 2;
    background: var(--limewash-2);
}

.room__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.room:hover .room__media img { transform: scale(1.03); }

.room__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
}

.room__name { margin-bottom: 0.5rem; }

.room__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-bottom: 0.9rem;
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
}

.room__summary {
    font-size: var(--step-0);
    color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.room__note {
    margin-top: 0.7rem;
    font-size: var(--step--1);
    color: var(--slate);
}

.room__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1.3rem;
}

.room__actions .btn { flex: 1 1 auto; }

/* Detail rows on the rooms page. */
.roomdetail {
    display: grid;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    padding-block: clamp(2.2rem, 1.6rem + 3vw, 4rem);
    border-top: 1px solid var(--line);
    scroll-margin-top: 6rem;
}

.roomdetail:first-of-type { border-top: 0; }

@media (min-width: 58rem) {
    .roomdetail {
        grid-template-columns: 1.1fr 1fr;
        align-items: center;
    }

    .roomdetail:nth-child(even) > .figure { order: 2; }
}

.spec {
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
    font-size: var(--step-0);
}

.spec > div {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    gap: 0.8rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
}

.spec dt {
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
}

.spec dd { margin: 0; }

/* 9. Amenities ---------------------------------------------------------- */

.amenities {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: color-mix(in srgb, var(--limewash) 40%, transparent);
    border: 1px solid color-mix(in srgb, var(--limewash) 25%, transparent);
}

@media (min-width: 40rem) { .amenities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .amenities { grid-template-columns: repeat(5, 1fr); } }

.amenity {
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    background: var(--pine);
    outline: 1px solid color-mix(in srgb, var(--limewash) 14%, transparent);
}

.amenity__icon {
    color: var(--brass);
    margin-bottom: 0.7rem;
}

.amenity__label {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.3;
}

.amenity__note {
    margin-top: 0.25rem;
    font-size: var(--step--1);
    line-height: 1.45;
    color: color-mix(in srgb, var(--limewash) 68%, transparent);
}

/* Plain chip list, used for in-room provision and meal plans. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.chips li {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: var(--step--1);
    background: var(--paper);
}

.section--pine .chips li {
    background: color-mix(in srgb, #ffffff 8%, transparent);
    border-color: color-mix(in srgb, var(--limewash) 22%, transparent);
}

/* 10. Distance rule ----------------------------------------------------- */

/* The signature element. Every bar is drawn to the same scale, so the reason
   to stay here — Kainchi Dham at 3.3 km against a 70 km spread — is visible
   before a single word is read. */
.measure {
    margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.measure__scale {
    position: relative;
    height: 1.6rem;
    margin-left: 0;
    border-bottom: 1px solid var(--line);
}

.measure__tick {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    padding-bottom: 0.35rem;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    white-space: nowrap;
}

.measure__tick::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 1px;
    height: 6px;
    background: var(--line);
}

.measure__tick:first-child { transform: none; }
.measure__tick:first-child::after { left: 0; }
.measure__tick:last-child { transform: translateX(-100%); }
.measure__tick:last-child::after { left: 100%; }

.measure__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}

.measure__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1rem;
}

.measure__name {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-size: var(--step-1);
}

.measure__km {
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
}

.measure__bar {
    position: relative;
    height: 4px;
    background: color-mix(in srgb, var(--slate) 22%, transparent);
    border-radius: 100px;
    overflow: hidden;
}

.measure__fill {
    display: block;
    height: 100%;
    width: var(--pct, 0%);
    background: var(--brass);
    border-radius: 100px;
    transform-origin: left center;
}

.measure__row--primary .measure__name { color: var(--madder); }
.measure__row--primary .measure__fill { background: var(--madder); }

.measure__note {
    margin-top: 0.3rem;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--slate);
    max-width: 62ch;
}

.measure__foot {
    margin-top: 1.2rem;
    font-size: var(--step--1);
    color: var(--slate);
}

@media (min-width: 48rem) {
    .measure__row {
        grid-template-columns: minmax(12rem, 17rem) 1fr;
        gap: 0.4rem 2rem;
        align-items: center;
    }

    .measure__label { display: block; }
    .measure__km { display: block; margin-top: 0.2rem; }
    .measure__note { grid-column: 1 / -1; margin-top: 0.1rem; }
    .measure__scale { margin-left: calc(min(17rem, 40%) + 2rem); }
}

/* 11. Gallery + lightbox ------------------------------------------------ */

.mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.5rem, 0.3rem + 1vw, 1rem);
}

@media (min-width: 52rem) { .mosaic { grid-template-columns: repeat(3, 1fr); } }

/* 3:2 matches the property's photographs exactly, so nothing is cropped away. */
.tile {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--limewash-2);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    cursor: zoom-in;
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease, filter 400ms ease;
}

.tile:hover img { transform: scale(1.04); }

.tile__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2.2rem 0.9rem 0.7rem;
    background: linear-gradient(to top, rgb(27 38 32 / 82%), transparent);
    color: #fff;
    font-size: var(--step--1);
    text-align: left;
    opacity: 0;
    transition: opacity 240ms ease;
}

.tile:hover .tile__caption,
.tile:focus-visible .tile__caption { opacity: 1; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 3rem);
    background: rgb(20 27 22 / 94%);
}

.lightbox[hidden] { display: none; }

.lightbox__img {
    max-width: min(100%, 1400px);
    max-height: 78vh;
    width: auto;
    object-fit: contain;
    box-shadow: 0 30px 80px -30px rgb(0 0 0 / 70%);
}

.lightbox__caption {
    margin-top: 1rem;
    color: color-mix(in srgb, #fff 82%, transparent);
    font-size: var(--step--1);
    text-align: center;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    background: color-mix(in srgb, #ffffff 10%, transparent);
    border: 1px solid color-mix(in srgb, #ffffff 30%, transparent);
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }

.lightbox__close:hover,
.lightbox__nav:hover { background: color-mix(in srgb, #ffffff 22%, transparent); }

/* 12. Location ---------------------------------------------------------- */

.location {
    display: grid;
    gap: clamp(1.5rem, 1rem + 3vw, 3rem);
}

@media (min-width: 58rem) { .location { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.map {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--limewash-2);
}

.map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.factlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.factlist > li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.factlist .icon { color: var(--brass); margin-top: 0.15rem; }

.factlist__label {
    display: block;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
}

.factlist a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.factlist a:hover { border-bottom-color: currentColor; }

/* Directions: a short numbered sequence, because arrival order genuinely
   matters here. */
.steps {
    counter-reset: step;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.steps > li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.1rem 3rem;
}

.steps > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1rem;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--madder);
}

.steps > li:last-child { padding-bottom: 0; }

/* Nearby cards, used on the About page. */
.cards {
    display: grid;
    gap: clamp(1.2rem, 0.9rem + 1.5vw, 2rem);
}

@media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.card__media { margin: 0; aspect-ratio: 4 / 3; background: var(--limewash-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__body { padding: clamp(1rem, 0.85rem + 0.6vw, 1.4rem); }

.card__km {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--madder);
}

.card__name { margin-bottom: 0.45rem; }

.card__text { font-size: var(--step-0); color: color-mix(in srgb, var(--ink) 85%, transparent); }

/* Sister Concern Resorts & Hotels, used on the About page. */
.sister-resorts {
    display: grid;
    gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

@media (min-width: 44rem) { .sister-resorts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .sister-resorts { grid-template-columns: repeat(3, 1fr); } }

.sister-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    box-shadow: 0 2px 12px rgba(30, 58, 47, 0.04), 0 12px 28px -18px rgba(30, 58, 47, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sister-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(30, 58, 47, 0.12), 0 20px 36px -20px rgba(30, 58, 47, 0.18);
    border-color: color-mix(in srgb, var(--brass) 50%, var(--line));
}

.sister-card__top {
    margin-bottom: 0.85rem;
}

.sister-card__badge {
    display: inline-block;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pine) 12%, transparent);
    color: var(--pine-deep);
    border: 1px solid color-mix(in srgb, var(--pine) 24%, transparent);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sister-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.sister-card__title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
    line-height: 1.25;
    color: var(--pine-deep);
    margin: 0 0 0.4rem;
}

.sister-card__loc {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--madder);
    margin: 0 0 0.85rem;
}

.sister-card__loc svg {
    flex-shrink: 0;
    color: var(--madder);
}

.sister-card__desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--ink) 85%, transparent);
    margin: 0 0 1.25rem;
}

.sister-card__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    margin: 0 0 1.4rem;
}

.sister-card__chips li {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--slate);
    background: var(--limewash);
    border: 1px solid var(--line);
    padding: 0.22rem 0.55rem;
    border-radius: 6px;
}

.sister-card__footer {
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.sister-card__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--terracotta);
    color: #fff;
    text-decoration: none;
    padding: 0.75rem 1.15rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.sister-card__btn:hover {
    background: var(--terracotta-hover);
    color: #fff;
}

.sister-card__arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.sister-card__btn:hover .sister-card__arrow {
    transform: translate(2px, -2px);
}

/* --- AEO / Direct Answer Blocks (Voice & Generative Engine Snippets) ---- */
.aeo-answer-block {
    background: color-mix(in srgb, var(--pine) 8%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--pine) 22%, transparent);
    border-left: 4px solid var(--pine);
    border-radius: 8px;
    padding: 0.95rem 1.25rem;
    margin: 1.25rem 0;
    box-shadow: 0 1px 4px rgba(30, 58, 47, 0.04);
}

.aeo-answer-block p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
}

.aeo-answer-block strong {
    color: var(--pine-deep);
    font-weight: 700;
}

/* 13. Forms ------------------------------------------------------------- */

.form {
    display: grid;
    gap: 1.1rem;
    max-width: 40rem;
    scroll-margin-top: 6rem;
}

@media (min-width: 44rem) {
    .form { grid-template-columns: repeat(2, 1fr); }
    .form__field--full { grid-column: 1 / -1; }
}

.form__field { display: grid; gap: 0.35rem; }

.form__label {
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
}

.form__label span { color: var(--madder); }

.form input,
.form textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink);
}

.form textarea { min-height: 9rem; resize: vertical; }

.form input:focus,
.form textarea:focus {
    outline: 2px solid var(--madder);
    outline-offset: 1px;
    border-color: var(--madder);
}

.form__error {
    font-size: var(--step--1);
    color: var(--madder);
}

.form__hint { font-size: var(--step--1); color: var(--slate); }

/* Honeypot: present for bots, gone for people and screen readers. */
.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Native disclosure widgets: keyboard-accessible, no JavaScript, and the
   answers stay in the DOM for crawlers whether open or shut. */
.faq {
    max-width: 60rem;
    border-top: 1px solid var(--line);
}

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

.faq__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 0;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-size: var(--step-1);
    line-height: 1.25;
    cursor: pointer;
    list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
    content: '+';
    flex: none;
    font-family: var(--font-body);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--madder);
    transition: transform 200ms ease;
}

.faq__item[open] .faq__q::after {
    transform: rotate(45deg);
}

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

.faq__a {
    padding: 0 0 1.2rem;
    max-width: var(--measure);
    color: color-mix(in srgb, var(--ink) 85%, transparent);
}

.notice {
    padding: 1rem 1.2rem;
    margin-bottom: 1.6rem;
    border-left: 3px solid var(--brass);
    background: var(--paper);
    font-size: var(--step-0);
}

.notice--good { border-left-color: var(--pine); }
.notice--bad { border-left-color: var(--madder); }

.notice h2 { font-size: var(--step-1); margin-bottom: 0.3rem; }

/* 14. Footer + action bar ---------------------------------------------- */

.footer {
    background: var(--pine-deep);
    color: color-mix(in srgb, var(--limewash) 82%, transparent);
    padding-block: var(--band) 0;
    /* Room for the fixed mobile action bar. */
    padding-bottom: 5.5rem;
}

.footer__inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}

@media (min-width: 44rem) { 
    .footer__inner { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 2.5rem 2rem;
    } 
}
@media (min-width: 66rem) { 
    .footer__inner { 
        grid-template-columns: 1.25fr 0.95fr 1.18fr 1.02fr; 
        gap: clamp(1.8rem, 1.2rem + 1.6vw, 3rem);
    } 
}

.footer__name {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-size: var(--step-2);
    color: var(--limewash);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.footer__tagline { 
    max-width: 32ch; 
    margin-bottom: 1rem; 
    font-size: 0.95rem;
    line-height: 1.5;
}

.footer__trust {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--brass);
    font-weight: 500;
    margin-bottom: 0.85rem;
    background: color-mix(in srgb, var(--brass) 12%, transparent);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brass) 30%, transparent);
}

.footer__trust-stars {
    letter-spacing: 0.08em;
    color: var(--brass);
}

.footer__heading {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 1.1rem;
}

.footer__address { font-style: normal; margin-bottom: 0.8rem; line-height: 1.65; }

.footer__list, .footer__social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.footer__tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--terracotta) 26%, transparent);
    color: #f7d5be;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
}

.footer a { text-decoration: none; }

.footer__list a:hover,
.footer__social a:hover,
.footer__link:hover { 
    color: #fff; 
    border-bottom-color: currentColor; 
}

.footer__link, .footer__list a, .footer__social a {
    border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    padding-bottom: 1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.footer__muted { 
    color: color-mix(in srgb, var(--limewash) 65%, transparent); 
    border: 0; 
}

/* 14.1 Feeder Transit Corridors & Traveler Personas */
.footer__corridors {
    width: 100%;
    max-width: var(--shell);
    margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) auto 0;
    padding: clamp(1.5rem, 1rem + 1.2vw, 2.2rem) var(--gutter) 0;
    border-top: 1px solid color-mix(in srgb, var(--limewash) 14%, transparent);
}

.footer__corridors-header {
    margin-bottom: 1.25rem;
}

.footer__corridors-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 0.25rem;
}

.footer__corridors-title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    color: var(--limewash);
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.footer__corridors-lead {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--limewash) 70%, transparent);
    max-width: 60ch;
    margin: 0;
    line-height: 1.5;
}

.footer__corridors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.footer__corridor-item {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--limewash) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--limewash) 9%, transparent);
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.footer__corridor-item:hover {
    background: color-mix(in srgb, var(--limewash) 8%, transparent);
    border-color: color-mix(in srgb, var(--brass) 35%, transparent);
    transform: translateY(-2px);
}

.footer__corridor-city {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--limewash);
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__corridor-item:hover .footer__corridor-city {
    color: #fff;
}

.footer__corridor-dist {
    font-size: 0.74rem;
    color: var(--brass);
    font-weight: 500;
}

.footer__corridor-desc {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--limewash) 65%, transparent);
    line-height: 1.4;
    margin: 0;
}

.footer__personas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.footer__persona-card {
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--limewash) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--limewash) 9%, transparent);
}

.footer__persona-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--brass);
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.footer__persona-desc {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--limewash) 72%, transparent);
    line-height: 1.45;
    margin: 0 0 0.6rem;
}

.footer__persona-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--limewash);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s ease;
}

.footer__persona-link:hover {
    color: var(--brass);
}

/* 14.2 Sister Hotels & Resorts Showcase */
.footer__resorts {
    width: 100%;
    max-width: var(--shell);
    margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) auto 0;
    padding: clamp(1.5rem, 1rem + 1.2vw, 2.2rem) var(--gutter) 0;
    border-top: 1px solid color-mix(in srgb, var(--limewash) 14%, transparent);
}

.footer__resorts-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin-bottom: 1.25rem;
}

.footer__resorts-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 0.25rem;
}

.footer__resorts-title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    color: var(--limewash);
    margin: 0;
    line-height: 1.2;
}

.footer__resorts-lead {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--limewash) 70%, transparent);
    max-width: 48ch;
    margin: 0;
    line-height: 1.5;
}

.footer__resorts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.footer__resort-card {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--limewash) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--limewash) 10%, transparent);
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.footer__resort-card:hover {
    background: color-mix(in srgb, var(--limewash) 9%, transparent);
    border-color: color-mix(in srgb, var(--brass) 40%, transparent);
    transform: translateY(-2px);
}

.footer__resort-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.footer__resort-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--limewash);
}

.footer__resort-card:hover .footer__resort-name {
    color: #fff;
}

.footer__resort-arrow {
    font-size: 0.95rem;
    color: var(--brass);
    transition: transform 0.2s ease;
}

.footer__resort-card:hover .footer__resort-arrow {
    transform: translate(2px, -2px);
}

.footer__resort-loc {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--brass);
    margin-bottom: 0.35rem;
}

.footer__resort-desc {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--limewash) 68%, transparent);
    line-height: 1.45;
    margin: 0;
}

.footer__base {
    width: 100%;
    max-width: var(--shell);
    margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
    padding: 1.4rem var(--gutter) 0;
    border-top: 1px solid color-mix(in srgb, var(--limewash) 14%, transparent);
    font-size: var(--step--1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem 1.5rem;
}

.footer__base p { margin: 0; }

/* Fixed bottom bar on phones: 50/50 split Call (Terracotta) + WhatsApp (Forest Pine) */
.actionbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 99;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--limewash);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -6px rgba(30, 58, 47, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.actionbar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 54px;
    padding: 0.65rem 0.5rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    transition: filter 150ms ease, transform 150ms ease;
}

.actionbar__item:active {
    filter: brightness(0.92);
}

.actionbar__item--call {
    background: #C27847; /* Warm Terracotta */
    color: #FFFFFF;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.actionbar__item--wa {
    background: #1E3A2F; /* Deep Mountain Pine */
    color: #FFFFFF;
}

@media (min-width: 48.0625rem) {
    .actionbar { display: none; }
    .footer { padding-bottom: var(--band); }
}

/* 15. Motion ------------------------------------------------------------ */

/* Everything here moves only opacity and transform, so nothing triggers layout
   and the whole layer costs no cumulative layout shift. One easing curve is
   used throughout to keep the page feeling like a single piece of work. */

:root {
    --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
    --ease-out: cubic-bezier(0.16, 0.9, 0.3, 1);
}

/* --- Scroll reveals ----------------------------------------------------- */

/* Nothing is hidden until JavaScript confirms it can reveal it again. The
   `anim` class is set on <html> only once the observer is wired up, so no-JS,
   a JS error, and browsers without IntersectionObserver all leave the page in
   its finished state rather than blank. */

.reveal { transition: opacity 800ms var(--ease), transform 800ms var(--ease); }

html.anim .reveal {
    opacity: 0;
    transform: translateY(20px);
}

html.anim .reveal.is-in { opacity: 1; transform: none; }

/* Directional variants for the two-column splits: the text comes in from the
   text side, the photograph from the photograph side. */
html.anim .reveal--left  { transform: translate3d(-26px, 0, 0); }
html.anim .reveal--right { transform: translate3d(26px, 0, 0); }
html.anim .reveal--left.is-in,
html.anim .reveal--right.is-in { transform: none; }

@media (max-width: 62rem) {
    /* Sideways movement on a narrow screen risks overflow — go back to a lift. */
    html.anim .reveal--left,
    html.anim .reveal--right { transform: translateY(20px); }
}

/* --- Staggering --------------------------------------------------------- */

/* Children cascade rather than arriving together. nth-child keeps this in CSS,
   so no JavaScript has to walk the DOM to assign indices. */

/* Resting state, held until the container scrolls in — without this the
   children paint at full opacity and then flash back to hidden. */
html.anim .stagger > * { opacity: 0; }

html.anim .stagger.is-in > * {
    opacity: 1;
    animation: rise 700ms var(--ease) backwards;
}

.stagger.is-in > *:nth-child(1)  { animation-delay:  40ms; }
.stagger.is-in > *:nth-child(2)  { animation-delay: 100ms; }
.stagger.is-in > *:nth-child(3)  { animation-delay: 160ms; }
.stagger.is-in > *:nth-child(4)  { animation-delay: 220ms; }
.stagger.is-in > *:nth-child(5)  { animation-delay: 280ms; }
.stagger.is-in > *:nth-child(6)  { animation-delay: 340ms; }
.stagger.is-in > *:nth-child(7)  { animation-delay: 400ms; }
.stagger.is-in > *:nth-child(8)  { animation-delay: 440ms; }
.stagger.is-in > *:nth-child(9)  { animation-delay: 480ms; }
.stagger.is-in > *:nth-child(n+10) { animation-delay: 520ms; }

@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
}

/* --- Hero entrance ------------------------------------------------------ */

/* An orchestrated opening: the photograph settles while the words arrive in
   sequence behind it. Runs once, on load. */
.hero__inner > * {
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

html.anim .hero__inner > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

html.anim .hero.is-ready .hero__inner > * { opacity: 1; transform: none; }

.hero.is-ready .hero__eyebrow { transition-delay: 120ms; }
.hero.is-ready h1             { transition-delay: 240ms; }
.hero.is-ready .hero__sub     { transition-delay: 380ms; }
.hero.is-ready .hero__fact    { transition-delay: 500ms; }
.hero.is-ready .btn-row       { transition-delay: 620ms; }

/* The rule above the hero fact draws itself out. */
.hero__fact {
    background-image: linear-gradient(var(--brass), var(--brass));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 1px;
    transition: background-size 900ms var(--ease) 700ms;
}

html.anim .hero__fact { background-size: 0 1px; }
html.anim .hero.is-ready .hero__fact { background-size: 100% 1px; }

/* A very slow drift on the hero photograph, so the page is never quite still.
   6% over half a minute reads as air, not as movement. */
.hero__media img {
    animation: drift 34s var(--ease-out) forwards;
    transform-origin: 58% 42%;
}

@keyframes drift {
    from { transform: scale(1.005); }
    to   { transform: scale(1.06); }
}

/* Scroll cue, retired as soon as the visitor scrolls. */
.hero__cue {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    width: 1px;
    height: 34px;
    overflow: hidden;
    background: color-mix(in srgb, #fff 26%, transparent);
    opacity: 0;
    transition: opacity 500ms var(--ease);
}

.hero.is-ready .hero__cue { opacity: 1; transition-delay: 1.2s; }
.hero.is-scrolled .hero__cue { opacity: 0; transition-delay: 0s; }

.hero__cue::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -100%;
    height: 100%;
    background: var(--brass);
    animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue {
    0%   { transform: translateY(0); }
    60%  { transform: translateY(200%); }
    100% { transform: translateY(200%); }
}

/* --- The distance rule -------------------------------------------------- */

/* Bars grow to their true width, one after the next, so the eye reads them in
   order of distance rather than all at once. */
.measure__fill {
    transition: width 1100ms var(--ease);
}

html.anim .measure:not(.is-in) .measure__fill { width: 0; }

.measure.is-in .measure__row:nth-child(2) .measure__fill { transition-delay:  80ms; }
.measure.is-in .measure__row:nth-child(3) .measure__fill { transition-delay: 200ms; }
.measure.is-in .measure__row:nth-child(4) .measure__fill { transition-delay: 320ms; }
.measure.is-in .measure__row:nth-child(5) .measure__fill { transition-delay: 440ms; }
.measure.is-in .measure__row:nth-child(6) .measure__fill { transition-delay: 560ms; }
.measure.is-in .measure__row:nth-child(7) .measure__fill { transition-delay: 680ms; }

/* --- Small interactions ------------------------------------------------- */

/* Arrows lead the eye forward on hover. */
.btn:hover .icon,
.link:hover .icon { transform: translateX(3px); }

.btn .icon, .link .icon { transition: transform 260ms var(--ease); }

.btn--solid:hover, .btn--outline:hover, .btn--ghost-light:hover {
    transform: translateY(-1px);
}

/* Desktop nav: an underline that sweeps out from the left. */
@media (min-width: 60rem) {
    .nav__list a {
        position: relative;
    }

    .nav__list a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: var(--madder);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 300ms var(--ease);
    }

    .nav__list a:hover::after,
    .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Mobile menu items cascade in behind the panel. */
.nav__list.is-open li {
    animation: rise 420ms var(--ease) backwards;
}

.nav__list.is-open li:nth-child(1) { animation-delay:  30ms; }
.nav__list.is-open li:nth-child(2) { animation-delay:  70ms; }
.nav__list.is-open li:nth-child(3) { animation-delay: 110ms; }
.nav__list.is-open li:nth-child(4) { animation-delay: 150ms; }
.nav__list.is-open li:nth-child(5) { animation-delay: 190ms; }
.nav__list.is-open li:nth-child(6) { animation-delay: 230ms; }

/* The masthead tightens up once you are past the hero. */
.masthead__inner { transition: padding 300ms var(--ease); }
.masthead.is-stuck .masthead__inner { padding-block: 0.4rem; }
.wordmark__name { transition: font-size 300ms var(--ease); }
.masthead.is-stuck .wordmark__name { font-size: 1.3rem; }

/* Gallery captions slide up as they fade in. */
.tile__caption {
    transform: translateY(6px);
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.tile:hover .tile__caption,
.tile:focus-visible .tile__caption { transform: none; }

/* The rosette divider turns as it comes into view. */
.rule::after {
    transition: transform 900ms var(--ease);
}

.rule.is-in::after { transform: translate(-50%, -50%) rotate(225deg); }

/* Form fields lift very slightly on focus. */
.form input, .form textarea { transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.form input:focus, .form textarea:focus { box-shadow: 0 6px 18px -12px rgb(35 41 31 / 45%); }

/* FAQ answers open rather than snap. */
.faq__item[open] .faq__a { animation: rise 400ms var(--ease); }

/* The mobile action bar arrives after the hero has been read. */
@media (max-width: 60rem) {
    .actionbar { transition: transform 500ms var(--ease); }

    html.anim .actionbar { transform: translateY(105%); }
    html.anim .actionbar.is-in { transform: none; }
}

/* --- Google Review Cards (Authentic Google Maps UI) ---------------------- */

.reviews-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 52rem) {
    .reviews-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.google-badge-summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 14px;
    padding: 1rem 1.4rem;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08), 0 4px 12px rgba(60, 64, 67, 0.05);
}

.google-badge-summary__left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.google-g-icon {
    flex-shrink: 0;
}

.google-badge-summary__title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5f6368;
}

.google-badge-summary__score {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.1;
    margin-top: 0.15rem;
}

.google-badge-summary__score strong {
    font-size: 1.4rem;
    font-weight: 700;
    color: #202124;
}

.stars-gold {
    color: #fbbc04;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
}

.google-badge-summary__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    border-left: 1px solid #e8eaed;
    padding-left: 1.25rem;
}

.google-badge-summary__count {
    font-size: 0.82rem;
    color: #5f6368;
    font-weight: 500;
}

.google-badge-summary__link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a73e8;
    text-decoration: none;
}

.google-badge-summary__link:hover {
    text-decoration: underline;
}

.google-reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 44rem) {
    .google-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 72rem) {
    .google-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.g-review-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08), 0 4px 12px rgba(60, 64, 67, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.g-review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 58, 47, 0.12);
    border-color: #dadce0;
}

.g-review-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.g-review-card__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.g-review-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

.g-review-card__author-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.g-review-card__name {
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 600;
    color: #202124;
    line-height: 1.25;
}

.g-review-card__guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #70757a;
    line-height: 1.2;
}

.g-review-card__google-logo {
    flex-shrink: 0;
    padding-top: 2px;
}

.g-review-card__rating-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.g-review-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #fbbc04;
    font-size: 1.1rem;
    line-height: 1;
}

.g-review-card__date {
    font-size: 0.78rem;
    color: #70757a;
}

.g-review-card__subscores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.g-subscore-pill {
    display: inline-block;
    background: #f1f3f4;
    color: #3c4043;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 0.22rem 0.55rem;
    border-radius: 6px;
    line-height: 1.2;
}

.g-subscore-pill strong {
    color: #202124;
}

.g-review-card__text {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.62;
    color: #3c4043;
    margin-bottom: 1rem;
    flex-grow: 1;
    word-break: break-word;
}

.g-review-card__positive {
    background: #f8f9fa;
    border-left: 3px solid #1a73e8;
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #3c4043;
    margin-bottom: 1rem;
}

.g-review-card__positive strong {
    color: #1a73e8;
}

.g-review-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f3f4;
    font-size: 0.78rem;
    color: #70757a;
}

.g-review-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #137333;
    font-weight: 600;
}

.g-review-card__map-link {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.g-review-card__map-link:hover {
    text-decoration: underline;
    color: #155724;
}

.reviews-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

/* --- Lightbox ----------------------------------------------------------- */

.lightbox { animation: fade 240ms var(--ease); }
.lightbox__img { animation: pop 340ms var(--ease-out); }

/* Re-triggered by JS on each navigation, so stepping through feels continuous. */
.lightbox__img.is-swapping { animation: pop 260ms var(--ease-out); }

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pop {
    from { opacity: 0; transform: scale(0.965); }
    to   { opacity: 1; transform: none; }
}

/* --- Reduced motion ----------------------------------------------------- */

/* One switch turns the whole layer off. Everything above animates from a
   hidden or offset state, so each rule here restores the resting state rather
   than leaving content invisible. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation: none !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }

    /* These carry !important because the resting states they undo are scoped to
       html.anim, which would otherwise win on specificity and leave the page
       blank for exactly the people who asked for less movement. */
    html.anim .reveal,
    html.anim .reveal--left,
    html.anim .reveal--right,
    html.anim .hero__inner > *,
    html.anim .stagger > *,
    html.anim .stagger.is-in > * {
        opacity: 1 !important;
        transform: none !important;
    }

    html.anim .measure:not(.is-in) .measure__fill { width: var(--pct, 0%) !important; }
    html.anim .hero__fact { background-size: 100% 1px !important; }
    html.anim .actionbar { transform: none !important; }

    .hero__cue { display: none; }
    .hero__media img { transform: none; }

    .tile:hover img,
    .room:hover .room__media img,
    .btn:hover .icon,
    .btn--solid:hover,
    .btn--outline:hover,
    .btn--ghost-light:hover,
    .sister-card:hover,
    .sister-card__btn:hover,
    .sister-card__btn:hover .sister-card__arrow { transform: none; }

    .tile__caption { transform: none; }
    .rule.is-in::after { transform: translate(-50%, -50%) rotate(45deg); }
}