/* L&H Villa — built from Figma (file xPceF8TRmuXGDV351bMoqE, page "PC" 60:14). */

@font-face {
    font-family: "Lusitana";
    src: url("../fonts/Lusitana-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #161716;
    --color-page: #fcfcfc;
    --color-navy: #002951;
    --color-brown: #3e2b24;
    --color-cream: #f7f7f3;
    --color-powder: #dceeff;
    --color-powder-50: rgba(220, 238, 255, 0.5);
    --color-sand: #bfa082;
    --color-mid-grey: #9a9a9a;
    --color-light-grey: #d4d1cf;
    --color-border: #cacaca;
    --color-cookie-navy: #002561;

    --font-body: "Lusitana", "Times New Roman", serif;

    --size-h1: clamp(1.75rem, 3.2vw, 2.5rem);     /* 40px */
    --size-h2: clamp(1.5rem, 2.5vw, 2rem);        /* 32px */
    --size-h3: clamp(1.25rem, 1.9vw, 1.5rem);     /* 24px */
    --size-lead: 1.25rem;                         /* 20px */
    --size-body: 0.875rem;                        /* 14px */
    --size-button: 0.75rem;                       /* 12px */
    --size-small: 0.6875rem;                      /* 11px */

    --container-max: 1440px;
    --gutter: clamp(20px, 5.2vw, 75px);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--size-body);
    line-height: 1.5;
}

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

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

p {
    margin: 0;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 400;
}

/* ---------- Buttons ---------- */

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 179px;
    max-width: 100%;
    padding: 10px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-family: var(--font-body);
    font-size: var(--size-button);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline--light {
    color: var(--color-white);
}

.btn-outline--light:hover {
    background: var(--color-white);
    color: var(--color-brown);
}

.btn-outline--dark {
    color: var(--color-brown);
}

.btn-outline--dark:hover {
    background: var(--color-brown);
    color: var(--color-white);
}

/* ---------- Header (menu 60:330) ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px;
    z-index: 20;
}

.site-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-white);
}

.site-header--solid {
    position: relative;
    background: var(--color-white);
    color: var(--color-black);
}

.site-header__logo {
    display: block;
    flex-shrink: 0;
}

.site-header__logo-img {
    width: 143px;
    height: auto;
}

.site-header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    margin: -8px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    z-index: 21;
}

.site-header__toggle span {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
}

.site-header__nav {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.site-header__nav-links {
    display: flex;
    align-items: center;
    gap: 48px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--size-button);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-header__nav-links a:hover {
    opacity: 0.7;
}

.site-header__cta {
    margin-left: auto;
}

/* ---------- Book a Home Tour (shared by every page) ---------- */

.book-tour {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    padding: 122px var(--gutter) 120px;
    background: var(--color-cream);
    color: var(--color-brown);
}

.book-tour__body {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 397px;
}

.book-tour__title {
    font-size: var(--size-h2);
    line-height: 1.3;
}

.book-tour__contact {
    font-size: var(--size-button);
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-black);
}

.book-tour__contact a {
    text-decoration: underline;
}

.book-tour__media {
    flex-shrink: 0;
    width: 189px;
    margin-right: 3px;
}

.book-tour__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 189 / 283;
    object-fit: cover;
}

.book-tour .contact-form__notice {
    margin: -16px 0 0;
}

.tour-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: -16px;
}

.tour-form__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-light-grey);
}

.tour-form__field label {
    flex-shrink: 0;
    width: 83px;
}

.tour-form__field input,
.tour-form__field select {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-brown);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}

.tour-form__field input:focus,
.tour-form__field select:focus {
    outline: none;
}

.tour-form__field:focus-within {
    border-bottom-color: var(--color-brown);
}

.tour-form__field input::placeholder {
    color: var(--color-brown);
    opacity: 0.3;
}

.tour-form__field select:invalid,
.tour-form__field select.is-empty,
.tour-form__field input.is-empty {
    color: rgba(62, 43, 36, 0.3);
}

/* Chevron for select/date/time rows (Figma "Vector 3"). */
.tour-form__field--select::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 9px;
    height: 5px;
    margin-top: -2px;
    background: url("../img/icon-chevron-down.svg") no-repeat center / contain;
    pointer-events: none;
}

.tour-form__field--select select,
.tour-form__field--select input {
    padding-right: 24px;
    cursor: pointer;
}

/* Let the native date/time picker cover the chevron area so clicking it still opens the picker. */
.tour-form__field--select input::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    width: 24px;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.tour-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--size-button);
    line-height: 1.5;
}

.tour-form__consent input {
    margin-top: 3px;
    accent-color: var(--color-brown);
}

.tour-form__submit {
    align-self: flex-start;
    margin-top: 0;
    color: var(--color-brown);
}

.tour-form__submit:hover {
    background: var(--color-brown);
    color: var(--color-white);
}

/* Form result notice (submited 88:1465) */

.contact-form__notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--size-body);
    line-height: 1.4;
}

.contact-form__notice-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.contact-form__notice--error {
    color: #a1332c;
    border-color: #a1332c;
}

/* ---------- Image cards that link to another page (Gallery / Services / Facilities) ---------- */

.link-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 0 24px;
}

.link-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    min-height: 600px;
    padding: 36px 40px;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-navy);
}

.link-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.link-card__title {
    position: relative;
    font-size: var(--size-h2);
    line-height: 1.3;
}

.link-card .btn-outline {
    position: relative;
}

/*
 * Photo stack on a link card (Facilities, Services): the first photo in the markup sits on top and
 * the rest fan out on hover, pivoting from the bottom edge like paper being unfolded.
 */
.photo-stack__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #d9d9d9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transform-origin: 50% 100%;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Earlier in the markup = higher in the stack. */
.photo-stack__image:nth-child(1) { z-index: 4; }
.photo-stack__image:nth-child(2) { z-index: 3; }
.photo-stack__image:nth-child(3) { z-index: 2; }
.photo-stack__image:nth-child(4) { z-index: 1; }

.link-card:hover .photo-stack__image:nth-child(1),
.link-card:focus-within .photo-stack__image:nth-child(1) {
    transform: translateY(-3%);
}

.link-card:hover .photo-stack__image:nth-child(2),
.link-card:focus-within .photo-stack__image:nth-child(2) {
    transform: translateX(-30%) rotate(-9deg);
    transition-delay: 0.05s;
}

.link-card:hover .photo-stack__image:nth-child(3),
.link-card:focus-within .photo-stack__image:nth-child(3) {
    transform: translateX(30%) rotate(9deg);
    transition-delay: 0.1s;
}

.link-card:hover .photo-stack__image:nth-child(4),
.link-card:focus-within .photo-stack__image:nth-child(4) {
    transform: translateX(-50%) rotate(-16deg);
    transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .photo-stack__image {
        transition: none;
    }
}


/* ---------- Footer (footer 60:396) ---------- */

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 27px;
    min-height: 194px;
    padding: 48px var(--gutter);
    background: var(--color-page);
    color: var(--color-mid-grey);
    text-align: center;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 48px;
    font-size: var(--size-button);
    line-height: 1.2;
    text-transform: uppercase;
}

.site-footer__links a:hover {
    color: var(--color-brown);
}

.site-footer__social {
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-footer__social a:hover {
    opacity: 0.6;
}

.site-footer__fine {
    font-size: var(--size-small);
    line-height: 1.3;
    text-transform: uppercase;
}

/* ---------- Cookie consent banner (cookie 88:1458) ---------- */

.cookie-banner {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 32px);
    max-width: 568px;
    padding: 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__text {
    flex: 1;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--size-body);
    line-height: 1.4;
}

.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-banner__btn {
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: var(--size-button);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.cookie-banner__btn--reject {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: #232730;
}

.cookie-banner__btn--reject:hover {
    background: var(--color-cream);
}

.cookie-banner__btn--allow {
    border: 1px solid var(--color-cookie-navy);
    background: var(--color-cookie-navy);
    color: var(--color-white);
}

.cookie-banner__btn--allow:hover {
    background: #001845;
}

/* ================= Home (01main 60:15) ================= */

/* Hero */

.home-hero {
    position: relative;
    height: 980px;
    max-height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: var(--color-navy);
}

.home-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: home-hero-bg 1.27s cubic-bezier(0, 0.746, 0.752, 0.966) both;
}

.home-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 57, 107, 0.2), rgba(102, 102, 102, 0));
}

.home-hero__card {
    position: absolute;
    left: 50%;
    top: 18%;
    width: 290px;
    max-width: 50vw;
    height: auto;
    aspect-ratio: 290 / 436;
    object-fit: cover;
    transform: translateX(-50%);
    animation: home-hero-card 1.27s cubic-bezier(0.024, 0.475, 0, 1.023) both;
}

.home-hero__scroll {
    position: absolute;
    left: 50%;
    top: calc(18% + min(436px, 75.2vw) + 126px); /* card height (50vw max, 290:436) + Figma gap */
    transform: translateX(-50%);
    color: var(--color-white);
    font-size: var(--size-button);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

@keyframes home-hero-bg {
    0%      { opacity: 0; scale: 0.5; }
    78.672% { opacity: 1; scale: 1; }
    100%    { opacity: 1; scale: 1; }
}

@keyframes home-hero-card {
    0%      { opacity: 0; scale: 0.5; }
    43.564% { opacity: 0; scale: 0.5; }
    100%    { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__bg,
    .home-hero__card {
        animation: none;
    }
}

/* Intro + floor plan */

.home-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-intro__media {
    position: relative;
    min-height: 810px;
}

.home-intro__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-intro__title {
    position: absolute;
    left: var(--gutter);
    bottom: 112px;
    right: 24px;
    color: var(--color-white);
    font-size: var(--size-h1);
    line-height: 1;
}

.floor-plan {
    position: relative;
    min-height: 810px;
    overflow: hidden;
    background: var(--color-cream);
}

.floor-plan__track {
    position: absolute;
    left: 50%;
    top: 215px;
    width: 502px;
    max-width: 80%;
    transform: translateX(-50%);
}

.floor-plan__image {
    position: absolute;
    left: 0;
    width: 100%;
    height: 438px;
    object-fit: contain;
    mix-blend-mode: darken;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Inactive floors sit off-canvas above, faded by the top gradient (as in Figma). */
.floor-plan__image {
    transform: translateY(-481px);
    opacity: 1;
}

.floor-plan__image.is-active {
    transform: translateY(0);
}

.floor-plan__image.is-below {
    transform: translateY(481px);
}

.floor-plan__fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 144px;
    pointer-events: none;
    z-index: 1;
}

.floor-plan__fade--top {
    top: 0;
    background: linear-gradient(to bottom, var(--color-cream), rgba(247, 247, 243, 0));
}

.floor-plan__fade--bottom {
    bottom: 0;
    background: linear-gradient(to bottom, rgba(247, 247, 243, 0), var(--color-cream));
}

.floor-plan__switch {
    position: absolute;
    right: 27px;
    top: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(-50%);
}

.floor-plan__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.5);
    font-family: var(--font-body);
    font-size: 7px;
    line-height: normal;
    text-transform: uppercase;
    cursor: pointer;
}

.floor-plan__option::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: url("../img/plan-dot.svg") no-repeat center / 4px 4px;
}

.floor-plan__option.is-active {
    color: var(--color-black);
    font-size: 10px;
}

.floor-plan__option.is-active::after {
    background:
        url("../img/plan-dot-active.svg") no-repeat center / 4px 4px,
        url("../img/plan-dot-active-ring.svg") no-repeat center / 12px 12px;
}

/* Home details + factsheet */

.home-details {
    padding: 126px var(--gutter) 145px;
    background: var(--color-brown);
    color: var(--color-powder);
}

.home-details__head {
    display: grid;
    grid-template-columns: minmax(0, 539px) minmax(0, 354px) minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px 0;
}

.home-details__title {
    font-size: var(--size-h2);
    line-height: 1.3;
}

.home-details__facts {
    margin-top: 12px;
    font-size: var(--size-body);
    line-height: 1.5;
}

.home-details__facts p {
    margin: 0;
}

.home-details__head .btn-outline {
    margin-top: 12px;
}

.home-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 17px;
    max-width: 684px;
    margin: 75px auto 0;
}

.home-gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 158 / 237;
    overflow: hidden;
    background: #d9d9d9;
}

.home-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-gallery__item:hover img {
    transform: scale(1.04);
}

.home-gallery__item--crop img {
    object-position: 10% center;
}

.home-gallery__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-white);
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home-gallery__item:hover .home-gallery__label,
.home-gallery__item:focus-visible .home-gallery__label {
    opacity: 1;
}

/* Facilities teaser */

.home-facilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 810px;
}

.home-facilities__panel {
    padding: 72px var(--gutter);
    background: var(--color-navy);
}

.home-facilities__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--size-h3);
    line-height: normal;
}

.home-facilities__list a {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    color: var(--color-powder-50);
    transition: color 0.2s ease;
}

.home-facilities__list a:hover,
.home-facilities__list a.is-active {
    color: var(--color-powder);
}

.home-facilities__list a img {
    visibility: hidden;
}

.home-facilities__list a.is-active img {
    visibility: visible;
}

.home-facilities__media {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 0 45px 72px;
    overflow: hidden;
    color: var(--color-white);
}

.home-facilities__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-facilities__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(102, 102, 102, 0) 49.5%, rgba(0, 0, 0, 0.4));
}

.home-facilities__caption {
    position: relative;
    z-index: 1;
    max-width: 630px;
}

.home-facilities__caption h3 {
    margin-bottom: 21px;
    font-size: var(--size-lead);
    line-height: 1.5;
}

/* Location */

.home-location {
    position: relative;
    min-height: 810px;
    padding: 112px var(--gutter) 72px;
    overflow: hidden;
    color: var(--color-powder);
}

.home-location__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-location::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to left, rgba(102, 102, 102, 0), rgba(0, 0, 0, 0.8));
}

.home-location__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 146px;
}

.home-location__title {
    color: var(--color-white);
    font-size: var(--size-h2);
    line-height: 1.3;
}

.home-location__body {
    display: flex;
    flex-direction: column;
    gap: 82px;
    max-width: 250px;
}

.nearby {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nearby__group summary {
    font-size: var(--size-h3);
    line-height: normal;
    color: var(--color-powder-50);
    list-style: none;
    cursor: pointer;
}

.nearby__group summary::-webkit-details-marker {
    display: none;
}

.nearby__group[open] summary,
.nearby__group summary:hover {
    color: var(--color-powder);
}

.nearby__list {
    display: grid;
    grid-template-columns: 160px auto;
    gap: 16px 51px;
    margin: 24px 0 0;
    font-size: var(--size-body);
    line-height: 1.5;
}

.nearby__list dt,
.nearby__list dd {
    margin: 0;
}

/* ================= Responsive ================= */

@media (max-width: 1200px) {
    .site-header__nav-links {
        gap: 28px;
    }

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

@media (max-width: 1024px) {
    .site-header__toggle {
        display: flex;
    }

    .site-header__nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 40px;
        padding: 80px 32px;
        background: var(--color-brown);
        color: var(--color-white);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 19;
    }

    .site-header__nav.is-open {
        transform: translateX(0);
    }

    .site-header__nav-links {
        position: static;
        transform: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        font-size: var(--size-body);
    }

    .site-header__cta {
        margin-left: 0;
    }

    .home-intro,
    .home-facilities {
        grid-template-columns: 1fr;
    }

    .home-intro__media,
    .floor-plan {
        min-height: 640px;
    }

    .home-facilities__media {
        min-height: 560px;
    }

    .link-card {
        min-height: 440px;
    }
}

@media (max-width: 640px) {
    .home-intro__media,
    .floor-plan {
        min-height: 480px;
    }

    .home-intro__title {
        bottom: 56px;
    }

    .floor-plan__track {
        top: 120px;
    }

    .floor-plan__image {
        height: 280px;
    }

    .floor-plan__switch {
        right: 12px;
    }

    .home-details {
        padding: 72px 20px;
    }

    .home-details__head {
        grid-template-columns: 1fr;
    }

    .home-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 48px;
    }

    .home-facilities__panel {
        padding: 48px 20px;
    }

    .home-facilities__media {
        padding: 0 20px 48px;
    }

    .home-location {
        padding: 72px 20px 56px;
    }

    .home-location__inner {
        gap: 64px;
    }

    .book-tour {
        flex-direction: column;
        padding: 72px 20px;
    }

    .book-tour__media {
        display: none;
    }

    .link-cards {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 16px;
    }

    .link-card {
        min-height: 380px;
        padding: 24px;
    }

    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ================= Accommodation (02accomodation 63:397) ================= */

/* Hero */

.acc-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 741px;
    max-height: 100vh;
    min-height: 480px;
    padding: 0 var(--gutter) 60px;
    overflow: hidden;
    background: var(--color-navy);
}

.acc-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header shade (Figma rectangle 72:697). */
.acc-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 128px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.acc-hero__title {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    font-size: var(--size-h1);
    line-height: 1;
    text-align: center;
}

/* Intro */

.acc-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acc-intro__media {
    position: relative;
    min-height: 810px;
}

.acc-intro__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-intro__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35));
}

.acc-intro__lead {
    position: absolute;
    left: var(--gutter);
    right: 24px;
    bottom: 40px;
    z-index: 1;
    max-width: 595px;
    color: var(--color-white);
    font-size: var(--size-h2);
    line-height: 1.3;
}

.acc-intro__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--color-brown);
}

.acc-intro__card {
    width: 290px;
    max-width: 60%;
    height: auto;
    aspect-ratio: 290 / 436;
    object-fit: cover;
}

/* Plan and furniture */

.acc-plan {
    --acc-text-grey: #888888;
    padding: 118px 0 40px;
    background: var(--color-page);
}

.acc-plan__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px 330px;
    column-gap: 143px;
    align-items: start;
    padding: 0 24px 0 var(--gutter);
}

.acc-plan__title {
    color: var(--color-black);
    font-size: var(--size-h1);
    line-height: 1;
}

.acc-plan__text {
    color: var(--acc-text-grey);
    font-size: var(--size-body);
    line-height: 1.5;
}

.acc-plan__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.acc-plan__download {
    border-color: var(--color-black);
}

.acc-plan__body {
    display: grid;
    grid-template-columns: 212px minmax(0, 760px) minmax(0, 1fr) 72px;
    column-gap: 53px;
    padding: 0 var(--gutter);
}

/* Legend */

.acc-legend {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 138px 0 0;
    list-style: none;
}

.acc-legend[hidden] {
    display: none;
}

.acc-legend__item {
    cursor: default;
}

.acc-legend__head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.acc-legend__name {
    color: var(--color-black);
    font-size: var(--size-body);
    line-height: 1.5;
    transition: color 0.2s ease;
}

.acc-legend__item.is-active .acc-legend__name {
    color: var(--color-brown);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.acc-legend__desc {
    padding-left: 33px;
    color: var(--acc-text-grey);
    font-size: var(--size-body);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Numbered badge (legend + plan markers) */

.acc-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--color-sand);
    border-radius: 35px;
    background: transparent;
    transition: transform 0.2s ease;
}

.acc-badge__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-brown);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1;
}

.acc-legend__item.is-active .acc-badge {
    transform: scale(1.15);
}

/* Plan stage (sticky while the legend scrolls) */

.acc-plan__stage {
    grid-column: 2;
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    align-items: center;
    height: min(810px, 100vh);
    padding: 10px;
}

.acc-plan__figure {
    position: relative;
    width: 100%;
    aspect-ratio: 2202 / 1920;
}

.acc-plan__figure[hidden] {
    display: none;
}

.acc-plan__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
}

.acc-plan__marker {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 1;
    margin: 0;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.acc-plan__marker:hover,
.acc-plan__marker:focus-visible,
.acc-plan__marker.is-active {
    z-index: 2;
}

.acc-plan__marker:focus-visible {
    outline: 1px solid var(--color-brown);
    outline-offset: 2px;
}

.acc-plan__label {
    position: absolute;
    left: calc(100% + 3px);
    top: 0;
    padding: 4px;
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: 10px;
    line-height: normal;
    white-space: nowrap;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.acc-plan__marker:hover .acc-plan__label,
.acc-plan__marker:focus-visible .acc-plan__label,
.acc-plan__marker.is-active .acc-plan__label {
    opacity: 1;
    visibility: visible;
}

/* Floor switch (button styles from .floor-plan__option) */

.acc-plan__switch {
    grid-column: 4;
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    height: min(810px, 100vh);
}

.acc-plan__option--soon {
    cursor: default;
}

/* Photo mosaic */

.acc-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acc-photos__item {
    width: 100%;
    height: 810px;
    object-fit: cover;
}

.acc-photos__item--wide {
    grid-column: 1 / -1;
}

/* Gallery / Facilities cards */

.acc-links {
    margin: 28px 0;
}

.acc-links .link-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.acc-links a.link-card:hover .btn-outline--light {
    background: var(--color-white);
    color: var(--color-brown);
}

.acc-gallery-card__stack {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 37.1%;
    aspect-ratio: 254 / 381;
    padding: 0;
    border: none;
    background: var(--color-white);
    cursor: zoom-in;
    transform: translate(-50%, -50%);
}

.acc-gallery-card__stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #d9d9d9;
    transition: transform 0.4s ease;
}

.acc-gallery-card__stack:hover img:nth-child(1),
.acc-gallery-card__stack:focus-visible img:nth-child(1) {
    transform: rotate(-6deg) translateX(-12%);
}

.acc-gallery-card__stack:hover img:nth-child(2),
.acc-gallery-card__stack:focus-visible img:nth-child(2) {
    transform: rotate(5deg) translateX(10%);
}

.acc-gallery-card__stack:focus-visible {
    outline: 1px solid var(--color-white);
    outline-offset: 6px;
}

/* Lightbox (Frame 418 72:117) */

.acc-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--color-brown);
    color: var(--color-white);
    overflow: hidden;
}

.acc-lightbox[open] {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) 105px;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 43px;
    padding: 80px 0 54px;
}

.acc-lightbox::backdrop {
    background: var(--color-brown);
}

.acc-lightbox button {
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.acc-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
}

.acc-lightbox__close img {
    width: 100%;
    height: 100%;
}

.acc-lightbox__nav {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.acc-lightbox__nav img {
    width: 21px;
    height: 28px;
}

.acc-lightbox__nav--prev img {
    transform: rotate(-90deg);
}

.acc-lightbox__nav--next img {
    transform: rotate(90deg);
}

.acc-lightbox__nav:hover,
.acc-lightbox__close:hover {
    opacity: 0.7;
}

.acc-lightbox__stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    margin: 0;
}

.acc-lightbox__image {
    width: 681px;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: 502px;
    object-fit: contain;
}

.acc-lightbox__image.is-from-right {
    animation: acc-lightbox-from-right 0.35s ease;
}

.acc-lightbox__image.is-from-left {
    animation: acc-lightbox-from-left 0.35s ease;
}

@keyframes acc-lightbox-from-right {
    from { opacity: 0; transform: translateX(48px); }
}

@keyframes acc-lightbox-from-left {
    from { opacity: 0; transform: translateX(-48px); }
}

.acc-lightbox__caption {
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-white);
    text-align: center;
}

.acc-lightbox__thumbs {
    grid-column: 1 / -1;
    display: flex;
    gap: 24px;
    padding: 2px var(--gutter);
    overflow-x: auto;
}

/* Auto margins centre a short row but, unlike justify-content: center, keep a long row scrollable from its first thumb. */
.acc-lightbox__thumb:first-child {
    margin-left: auto;
}

.acc-lightbox__thumb:last-child {
    margin-right: auto;
}

.acc-lightbox .acc-lightbox__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 57px;
    border: 2px solid transparent;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

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

.acc-lightbox__thumb:hover,
.acc-lightbox .acc-lightbox__thumb.is-active {
    opacity: 1;
}

.acc-lightbox .acc-lightbox__thumb.is-active {
    border-color: var(--color-white);
}

/* Responsive */

@media (max-width: 1200px) {
    .acc-plan__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 330px) minmax(0, 330px);
        column-gap: 40px;
    }

    .acc-plan__body {
        grid-template-columns: 200px minmax(0, 1fr) 72px;
        column-gap: 32px;
    }

    .acc-plan__switch {
        grid-column: 3;
    }
}

@media (max-width: 1024px) {
    .acc-intro {
        grid-template-columns: 1fr;
    }

    .acc-intro__media {
        min-height: 640px;
    }

    .acc-intro__panel {
        padding: 72px 24px;
    }

    .acc-plan {
        padding-top: 88px;
    }

    .acc-plan__head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 40px;
    }

    .acc-plan__title {
        grid-column: 1 / -1;
    }

    .acc-plan__body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        margin-top: 48px;
    }

    .acc-plan__stage,
    .acc-plan__switch {
        position: static;
        grid-column: 1;
        height: auto;
    }

    .acc-plan__stage {
        grid-row: 1;
        max-width: 760px;
        width: 100%;
        justify-self: center;
    }

    .acc-plan__switch {
        grid-row: 2;
        flex-direction: row;
        justify-content: center;
        gap: 24px;
    }

    .acc-legend {
        grid-row: 3;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        padding-top: 24px;
    }

    .acc-photos__item {
        height: 560px;
    }

    .acc-lightbox[open] {
        grid-template-columns: 72px minmax(0, 1fr) 72px;
    }
}

@media (max-width: 640px) {
    .acc-hero {
        padding-bottom: 40px;
    }

    /* Keep labels of right-hand markers on screen. */
    .acc-plan__marker--end .acc-plan__label {
        left: auto;
        right: calc(100% + 3px);
    }

    .acc-intro__media {
        min-height: 520px;
    }

    .acc-intro__lead {
        left: 20px;
        right: 20px;
        bottom: 32px;
    }

    .acc-plan {
        padding: 72px 0 32px;
    }

    .acc-plan__head {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 20px;
    }

    .acc-plan__body {
        padding: 0 16px;
        margin-top: 32px;
    }

    .acc-plan__stage {
        padding: 0;
    }

    .acc-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }

    .acc-legend__desc {
        padding-left: 0;
        margin-top: 4px;
    }

    .acc-photos {
        grid-template-columns: 1fr;
    }

    .acc-photos__item {
        height: 420px;
    }

    .acc-links {
        margin: 16px 0;
    }

    .acc-links .link-card {
        min-height: 0;
    }

    .acc-lightbox[open] {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        row-gap: 24px;
        padding: 72px 0 32px;
    }

    .acc-lightbox__close {
        top: 12px;
        right: 12px;
    }

    .acc-lightbox__thumbs {
        justify-content: flex-start;
        gap: 12px;
        padding: 2px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc-gallery-card__stack img,
    .acc-badge,
    .acc-plan__label {
        transition: none;
    }

    .acc-lightbox__image.is-from-right,
    .acc-lightbox__image.is-from-left {
        animation: none;
    }
}

/* ================= Facilities (03facilities 72:379) ================= */

/* Hero */

.facilities-hero {
    position: relative;
    height: 741px;
    max-height: 100vh;
    min-height: 480px;
    overflow: hidden;
    background: var(--color-navy);
}

.facilities-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 71%;
}

/* Grey-to-white strip behind the menu; multiplied so it only darkens the photo. */
.facilities-hero__shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    object-fit: cover;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.facilities-hero__title {
    position: absolute;
    left: 50%;
    bottom: 89px;
    transform: translateX(-50%);
    color: var(--color-white);
    font-size: var(--size-h1);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Facility grid */

.facilities-list {
    --facilities-text-grey: #888888;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 330px));
    justify-content: center;
    gap: 64px 83px;
    padding: 113px var(--gutter) 92px;
}

.facilities-item--wide {
    grid-column: span 2;
}

.facilities-item__media {
    aspect-ratio: 330 / 495;
    overflow: hidden;
    background: #d9d9d9;
}

.facilities-item--wide .facilities-item__media {
    aspect-ratio: 743 / 495;
}

.facilities-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.facilities-item:hover .facilities-item__media img {
    transform: scale(1.04);
}

.facilities-item__title {
    margin-top: 22px;
    color: var(--color-black);
    font-size: 1.125rem;
    line-height: normal;
}

.facilities-item__text {
    max-width: 566px;
    margin-top: 8px;
    color: var(--facilities-text-grey);
    font-size: var(--size-body);
    line-height: 1.5;
}

/* Gallery / Services cards */

.facilities-links__card {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.facilities-links__stack {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 37%;
    height: auto;
    aspect-ratio: 254 / 381;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .facilities-hero {
        height: 560px;
    }

    .facilities-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 56px 32px;
        padding-top: 80px;
        padding-bottom: 72px;
    }

    .facilities-links__card {
        aspect-ratio: auto;
        min-height: 520px;
    }

    .facilities-links__stack {
        top: 15%;
        width: auto;
        height: 60%;
    }
}

@media (max-width: 640px) {
    .facilities-hero {
        height: 420px;
        min-height: 0;
    }

    .facilities-hero__title {
        bottom: 48px;
    }

    .facilities-list {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 56px 16px;
    }

    .facilities-item--wide {
        grid-column: auto;
    }

    .facilities-item__media {
        aspect-ratio: 4 / 5;
    }

    .facilities-item--wide .facilities-item__media {
        aspect-ratio: 3 / 2;
    }

    .facilities-item__title {
        margin-top: 16px;
    }

    .facilities-links__card {
        min-height: 420px;
    }

    .facilities-links__stack {
        top: 12%;
        height: 58%;
    }
}

/* ================= Services (04services 72:646) ================= */

/* Hero */

.services-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 741px;
    max-height: 100vh;
    min-height: 480px;
    padding: 0 var(--gutter) 70px;
    overflow: hidden;
    background: var(--color-navy);
}

.services-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkens the strip behind the overlay header (Figma 72:703). */
.services-hero__scrim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 128px;
    object-fit: cover;
    pointer-events: none;
}

.services-hero__title {
    position: relative;
    color: var(--color-white);
    font-size: var(--size-h1);
    line-height: 1;
    text-align: center;
}

/* Service cards */

.services-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 330px));
    justify-content: center;
    gap: 48px 83px;
    padding: 113px var(--gutter) 86px;
}

.services-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.services-item__image {
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 495;
    object-fit: cover;
    background: #d9d9d9;
}

.services-item__title {
    margin-top: 22px;
    color: var(--color-black);
    font-size: 1.125rem;
    line-height: normal;
}

.services-item__text {
    margin-top: 10px;
    color: #888888;
    font-size: var(--size-body);
    line-height: 1.5;
}

/* Gallery / Contact Us cards */

.services-links__card {
    min-height: 0;
    aspect-ratio: 1;
    padding: 36px;
}

.services-stack {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 37.2%;
    aspect-ratio: 254 / 381;
    transform: translateX(-50%);
}

.services-links {
    padding-bottom: 22px;
}

@media (max-width: 1024px) {
    .services-hero {
        height: 600px;
    }

    .services-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 24px;
        padding-top: 80px;
        padding-bottom: 72px;
    }

    .services-links__card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .services-hero {
        height: 480px;
        padding-bottom: 48px;
    }

    .services-hero__scrim {
        height: 96px;
    }

    .services-list {
        grid-template-columns: minmax(0, 330px);
        gap: 48px;
        padding: 56px 20px;
    }

    .services-links__card {
        min-height: 0;
        aspect-ratio: auto;
        height: 380px;
        padding: 24px;
    }

    .services-stack {
        top: 24px;
        width: auto;
        height: calc(100% - 120px);
    }
}

/* ================= Gallery (05gallery 72:705) ================= */

/*
 * Each section is a sticky "stage" (cover image + coloured panel, 812px) that the
 * photo grid scrolls across, with sticky gradient fades at the panel's top and bottom.
 */

.gallerypage {
    --gallerypage-stage-h: min(812px, 100vh);
    --gallerypage-cover-w: clamp(240px, 24.6vw, 354px);
    --gallerypage-grid-top: 188px;
    position: relative;
}

/* Darkens the strip behind the overlay header (Figma 72:708). */
.gallerypage__shade {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 128px;
    object-fit: cover;
    pointer-events: none;
}

/*
 * The section is made taller than the stage by JS (gallery script in main.js), so the stage
 * stays pinned while the clipped grid slides up inside the panel. Without JS the panel scrolls.
 */
.gallerypage-section {
    --gallerypage-bg: var(--color-cream);
    position: relative;
    margin-bottom: 150px;
}

.gallerypage-section--facilities {
    --gallerypage-bg: var(--color-brown);
}

.gallerypage-stage {
    position: sticky;
    top: 0;
    z-index: 0;
    display: flex;
    height: var(--gallerypage-stage-h);
}

.gallerypage-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--gallerypage-cover-w);
    padding: 0 69px 0 48px;
    overflow: hidden;
    background: var(--color-brown);
}

.gallerypage-cover__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallerypage-section--home .gallerypage-cover__bg {
    object-position: right center;
}

.gallerypage-cover__title {
    position: relative;
    color: var(--color-white);
    font-size: var(--size-h1);
    line-height: 1;
    white-space: nowrap;
}

.gallerypage-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--gallerypage-bg);
}

.gallerypage-panel::-webkit-scrollbar {
    display: none;
}

.gallerypage-section.is-scroll-linked .gallerypage-panel {
    overflow: hidden;
}

.gallerypage-fades__top,
.gallerypage-fades__bottom {
    position: sticky;
    z-index: 2;
    display: block;
    height: 144px;
    margin-bottom: -144px;
    pointer-events: none;
}

.gallerypage-fades__top {
    top: 0;
    background: linear-gradient(to bottom, var(--gallerypage-bg), transparent);
}

.gallerypage-fades__bottom {
    bottom: 0;
    margin: -144px 0 0;
    background: linear-gradient(to bottom, transparent, var(--gallerypage-bg));
}

.gallerypage-section.is-scroll-linked .gallerypage-fades__top,
.gallerypage-section.is-scroll-linked .gallerypage-fades__bottom {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
}

.gallerypage-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 158px));
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: var(--gallerypage-grid-top) 24px 144px;
    list-style: none;
    will-change: transform;
}

.gallerypage-grid li {
    min-width: 0;
}

.gallerypage-grid__item {
    display: block;
    width: 100%;
    aspect-ratio: 158 / 237;
    padding: 0;
    border: none;
    overflow: hidden;
    background: var(--color-light-grey);
    cursor: zoom-in;
}

.gallerypage-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallerypage-grid__item--crop img {
    object-position: 10% center;
}

.gallerypage-grid__item:hover img,
.gallerypage-grid__item:focus-visible img {
    transform: scale(1.04);
}

.gallerypage-grid__item:focus-visible {
    outline: 2px solid var(--color-sand);
    outline-offset: 3px;
}

/* Link cards (Frame 418 / Frame 428) */

.gallerypage-links {
    padding-top: 22px;
}

.gallerypage-links__card {
    min-height: 0;
    aspect-ratio: 1;
    padding: 36px;
}

@media (prefers-reduced-motion: reduce) {
    .gallerypage-grid__item img {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .gallerypage-cover {
        padding: 0 24px;
        text-align: center;
    }

    .gallerypage-cover__title {
        white-space: normal;
    }

    .gallerypage-grid {
        gap: 14px;
    }

    .gallerypage-links__card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .gallerypage-section {
        margin-bottom: 0;
        padding-bottom: 48px;
        background: var(--gallerypage-bg);
    }

    .gallerypage-stage {
        position: static;
        display: block;
        height: auto;
    }

    .gallerypage-cover {
        height: 360px;
        padding: 72px 20px 0;
    }

    .gallerypage-panel {
        overflow: visible;
    }

    .gallerypage-fades__top,
    .gallerypage-fades__bottom {
        display: none;
    }

    .gallerypage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
        padding: 24px 16px 0;
        transform: none !important;
    }

    .gallerypage-links {
        padding-top: 16px;
    }

    .gallerypage-links__card {
        aspect-ratio: auto;
        height: 380px;
        padding: 24px;
    }
}

/* ================= Location (06location 88:874) ================= */

.location-page {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Dark band behind the overlay header, spanning both halves. */
.location-page__shade {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 128px;
    object-fit: cover;
    pointer-events: none;
}

.location-page__panel {
    position: relative;
    overflow: hidden;
    color: var(--color-powder);
}

.location-page__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.location-page__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.location-page__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 111px;
    padding: 120px clamp(20px, 6.1vw, 88px) 72px;
}

.location-page__title {
    font-size: var(--size-h1);
    line-height: 1;
    color: var(--color-powder);
}

.location-page__nearby {
    max-width: 250px;
}

.location-page__map {
    position: relative;
    aspect-ratio: 720 / 810;
    overflow: hidden;
}

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

.location-page__pin {
    position: absolute;
    width: clamp(20px, 4.1667%, 30px);
    height: auto;
}

.location-page__pin--mall-north       { left: 21.94%; top: 11.23%; }
.location-page__pin--health           { left: 40.28%; top: 23.95%; }
.location-page__pin--school           { left: 88.61%; top: 26.67%; }
.location-page__pin--rail-west        { left: 28.61%; top: 33.33%; }
.location-page__pin--rail-thanon-chan { left: 46.94%; top: 40.37%; }
.location-page__pin--mall-south       { left: 35.83%; top: 85.06%; }
.location-page__pin--mall-east        { left: 57.22%; top: 92.96%; }

.location-page__pin-label {
    position: absolute;
    left: 51.67%;
    top: 40.86%;
    padding: 4px;
    background: var(--color-white);
    color: var(--color-brown);
    font-size: 10px;
    line-height: 1.5;
    white-space: nowrap;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
}

@media (max-width: 1024px) {
    .location-page__content {
        gap: 72px;
        padding-top: 112px;
    }
}

@media (max-width: 640px) {
    .location-page {
        grid-template-columns: 1fr;
    }

    .location-page__shade {
        height: 96px;
    }

    .location-page__content {
        gap: 56px;
        padding: 104px 20px 56px;
    }

    .location-page__nearby {
        max-width: none;
    }

    .location-page__pin-label {
        font-size: 9px;
        padding: 2px 4px;
    }
}

/* ================= Contact (07contact us 88:1075) ================= */

.contact-hero {
    position: relative;
    height: 740px;
    overflow: hidden;
    background: var(--color-navy);
    color: var(--color-white);
}

.contact-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.contact-hero__scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    object-fit: cover;
    pointer-events: none;
}

.contact-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    width: 465px;
    max-width: 100%;
    padding: 128px 0 0 87px;
    box-sizing: content-box;
}

.contact-hero__title {
    font-size: var(--size-h1);
    line-height: 1;
}

.contact-hero__lines,
.contact-hero__address {
    font-size: var(--size-body);
    font-style: normal;
    line-height: 1.5;
}

.contact-hero__lines a:hover,
.contact-hero__lines a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .contact-hero {
        height: 600px;
    }

    .contact-hero__inner {
        padding: 120px var(--gutter) 0;
        box-sizing: border-box;
        width: 100%;
        max-width: 545px;
        gap: 28px;
    }
}

@media (max-width: 640px) {
    .contact-hero {
        height: auto;
        min-height: 520px;
    }

    .contact-hero__scrim {
        height: 100%;
        opacity: 0.9;
    }

    .contact-hero__inner {
        padding: 104px 20px 56px;
        gap: 24px;
    }
}

/* ================= Terms (08terms 88:1196) ================= */

.terms-page {
    --terms-answer-bg: #f5f5f5; /* Figma fill, no matching token */

    display: grid;
    grid-template-columns: minmax(200px, 282px) minmax(0, 895px);
    justify-content: space-between;
    column-gap: 40px;
    align-items: start;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px 40px 96px 88px;
}

/* ---------- Section tabs (FAQ / Terms / Privacy / Cookie) ---------- */

.terms-tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 6px;
}

.terms-tab {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-brown);
    font-family: var(--font-body);
    font-size: var(--size-h2);
    line-height: 1.3;
    text-align: left;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.terms-tab:hover,
.terms-tab.is-active {
    opacity: 1;
}

.terms-tab:focus-visible {
    outline: 1px solid var(--color-brown);
    outline-offset: 4px;
}

/* ---------- Panels ---------- */

.terms-panels {
    min-width: 0;
}

.terms-panel[hidden] {
    display: none;
}

.terms-text {
    padding: 24px;
    background: var(--terms-answer-bg);
    color: var(--color-black);
    font-size: var(--size-body);
    line-height: 1.5;
}

/* ---------- FAQ accordion ---------- */

.terms-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--size-body);
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
}

.terms-faq__question::-webkit-details-marker {
    display: none;
}

.terms-faq__question:focus-visible {
    outline: 1px solid var(--color-brown);
    outline-offset: 2px;
}

.terms-faq__icon {
    flex-shrink: 0;
    width: 15px;
    height: auto;
    transition: transform 0.2s ease;
}

.terms-faq[open] .terms-faq__icon {
    transform: rotate(180deg);
}

.terms-faq__answer {
    margin: 8px 0;
    padding: 24px;
    background: var(--terms-answer-bg);
    color: var(--color-black);
    font-size: var(--size-body);
    line-height: 1.5;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .terms-page {
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
        column-gap: 32px;
        padding: 40px var(--gutter) 80px;
    }
}

@media (max-width: 640px) {
    .terms-page {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        padding: 24px var(--gutter) 64px;
    }

    .terms-tabs {
        flex-direction: row;
        gap: 20px;
        padding: 0 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .terms-tabs::-webkit-scrollbar {
        display: none;
    }

    .terms-tab {
        flex-shrink: 0;
        font-size: var(--size-lead);
        white-space: nowrap;
    }

    .terms-faq__question {
        gap: 16px;
        line-height: 1.4;
    }

    .terms-faq__answer,
    .terms-text {
        padding: 16px;
    }
}