/* Layout follows the Jumeirah property page: a fixed beige top bar, a sticky property menu, a full-bleed hero,
   then centred sections with a serif title, a short rule and outlined uppercase buttons, on alternating warm grounds. */
:root {
  color-scheme: light;
  /* Warm sand and ink, as luxury-resort photography is graded: soft, warm, a little muted. */
  --bar: #EAE2D6;      /* top bar */
  --on-bar: #23211E;
  --paper: #FAF8F4;    /* main ground */
  --alt: #F3EEE6;      /* alternate sections, footer */
  --ink: #23211E;      /* text, buttons */
  --grey: #6E6A64;     /* labels */
  --rule: #CFC6BA;     /* hairlines */
  --gold: #A8844F;     /* the logo's own gold, used sparingly */
  /* One photo grade for every photo: warmer white balance, softer contrast with lifted shadows, a little less saturation. */
  --grade: sepia(.16) saturate(.8) contrast(.9) brightness(1.05);
  --serif: "Gilda Display", "Bressay Display", "Old Standard TT", Georgia, serif;
  --sans: "Nunito Sans", "Avenir Next", Avenir, Roboto, Helvetica, Arial, sans-serif;
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 21px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }

/* type */
.title { font-family: var(--serif); font-size: 32px; line-height: 1.25; text-align: center; }
.title::after { content: ""; display: block; width: 64px; height: 1px; background: var(--gold); opacity: .9; margin: 16px auto 0; }
.title.left { text-align: left; }
.title.left::after { margin-left: 0; }
.intro { max-width: 680px; margin: 24px auto 0; text-align: center; }
.label { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--grey); }
.card-title { font-family: var(--serif); font-size: 24px; line-height: 1.3; margin: 6px 0 10px; }
.offer-title { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 32px; padding: 0 32px; min-width: 232px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 12px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: #fff; }
.btn.solid:hover { background: var(--gold); border-color: var(--gold); }
.btn.white { background: #fff; border-color: #fff; color: var(--ink); }
.btn.white:hover { background: transparent; color: #fff; }
.center { display: flex; justify-content: center; margin-top: 40px; }

/* top bar */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; height: calc(56px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: var(--bar); transition: background .25s; }
.topbar .in { height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.tb-left, .tb-right { display: flex; align-items: center; gap: 20px; }
.tb-right { justify-content: flex-end; gap: 28px; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--on-bar); cursor: pointer; }
.icon-btn svg { width: 24px; height: 24px; }
.logo img { height: 54px; width: auto; transition: filter .25s; }
.tb-link { font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tb-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.reserve { height: 32px; min-width: 0; padding: 0 22px; background: var(--ink); color: #fff; border-color: var(--ink); font-size: 13px; }
.reserve:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.topbar .reserve { min-width: 0; }
.topbar.over { background: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0)); }
.topbar.over .icon-btn, .topbar.over .tb-link { color: #fff; }
.topbar.over .logo img { filter: brightness(0) invert(1); }
.topbar.over .reserve { background: #fff; color: var(--ink); border-color: #fff; }
.topbar.over .reserve:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

.photo-graded, .ph img, .strip img, .collage img, .story img, .lightbox img { filter: var(--grade); }

/* hero */
.hero { position: relative; height: max(460px, calc(100svh - 63px)); background: #6b6a64 url("/img/hero-pool-dusk.webp") center 60% / cover; }
.hero { filter: var(--grade); }
.hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* property menu */
.subnav { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 40; background: var(--paper); border-bottom: 1px solid rgba(33,35,34,.08); }
.subnav .in { height: 63px; display: flex; align-items: center; justify-content: center; gap: 32px; padding-left: var(--gl); padding-right: var(--gr); }
.prop { font-family: var(--serif); font-size: 18px; white-space: nowrap; text-decoration: none; padding-right: 32px; border-right: 1px solid var(--ink); line-height: 28px; }
.tabs { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: block; white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.tabs a:hover { border-bottom-color: var(--rule); }
.tabs a[aria-current="true"] { border-bottom-color: var(--ink); }

.share { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin-left: 8px; font: 400 13px var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.share svg { width: 18px; height: 18px; }

/* sections */
.sec { padding-block: 72px; }
.sec.alt { background: var(--alt); }

/* gallery strip */
.strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; margin-top: 40px; }
.strip button { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.strip button:hover img { transform: scale(1.04); }

/* card rows: grid on desktop, swipe row on phones */
.cards { display: grid; gap: 32px; margin-top: 48px; }
.cards.two { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 48px; }
.cards.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.card { min-width: 0; }
.card .ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bar); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.card:hover .ph img { transform: scale(1.03); }
.card .body { padding-top: 18px; }
.card .meta { font-size: 13px; color: var(--grey); margin-top: 10px; }
.card.link { display: block; text-decoration: none; color: inherit; }
.card .more { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.tile .ph { aspect-ratio: 4 / 5; }
.tile .cap { text-align: center; margin-top: 16px; font-family: var(--sans); font-size: 14px; font-weight: 400; }
.tile .cap small { display: block; color: var(--grey); font-size: 12px; margin-top: 2px; }
.dots { display: none; justify-content: center; gap: 8px; margin-top: 20px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.dots i.on { background: var(--ink); }

/* dining split */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.split .txt { display: grid; gap: 20px; justify-items: start; }
.split .txt p { max-width: 440px; }
.collage { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); grid-template-rows: repeat(2, minmax(0,1fr)); gap: 16px; height: 520px; }
.collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.collage img:first-child { grid-row: span 2; }
.hours { font-size: 13px; color: var(--grey); }

/* full-bleed band */
.band { position: relative; min-height: 560px; display: grid; place-items: center; text-align: center; color: #fff; padding: 72px var(--gr) 72px var(--gl); background: #3b3a36; isolation: isolate; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/img/pool-04.webp") center / cover; filter: var(--grade); }
.band::before { content: ""; position: absolute; inset: 0; background: rgba(46,36,26,.45); }
.band > div { position: relative; max-width: 560px; display: grid; gap: 22px; justify-items: center; }
.band .title { color: #fff; }
.band .title::after { background: #fff; opacity: .7; }
.band .steps { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.band .price { font-size: 13px; opacity: .9; }

/* story row (image beside text) */
.story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.story img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story .txt { display: grid; gap: 20px; justify-items: start; max-width: 460px; }

/* contact */
.contact-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; margin-top: 48px; text-align: center; }
.contact-cols h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 12px; }
.contact-cols a { text-decoration: underline; text-underline-offset: 4px; }

/* policies and faq */
.fold { text-align: center; }
.fold + .fold { margin-top: 64px; }
.fold details { margin-top: 28px; }
.fold summary { list-style: none; display: inline-flex; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .btn { pointer-events: none; }
.fold summary svg { width: 14px; height: 14px; transition: transform .2s; }
.fold details[open] summary svg { transform: rotate(180deg); }
.fold dl { max-width: 760px; margin: 32px auto 0; text-align: left; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.fold dt, .fold dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.fold dt { font-weight: 600; padding-right: 24px; }

/* footer */
footer { background: var(--alt); color: var(--ink); padding-block: 64px 32px; }
.contact-cols + .foot { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--rule); }
.foot { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)) 1fr; gap: 32px; align-items: start; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.foot ul a { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; }
.foot ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.touch { justify-self: end; display: grid; gap: 16px; justify-items: center; text-align: center; }
.touch h3 { font-family: var(--serif); font-size: 22px; }
.touch p { max-width: 300px; color: var(--grey); font-size: 13px; }
.social { display: flex; gap: 20px; font-size: 13px; }
.social a { text-decoration: none; }
.social a:hover { text-decoration: underline; }
.copy { text-align: center; color: var(--grey); margin-top: 56px; font-size: 13px; }

/* menu drawer */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer .shade { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; }
.drawer.open .shade { opacity: 1; }
.drawer nav { position: absolute; inset: 0 auto 0 0; width: min(420px, 100%); background: var(--paper); transform: translateX(-100%); transition: transform .35s; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top, 0px)) 32px 32px max(32px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.drawer.open nav { transform: none; }
.drawer ul { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 4px; }
.drawer ul a { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.6; text-decoration: none; }
.drawer .small { margin-top: auto; padding-top: 32px; display: grid; gap: 6px; font-size: 13px; color: var(--grey); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: #141414; display: grid; grid-template-columns: 64px minmax(0,1fr) 64px; align-items: center; padding: 56px 8px; }
.lightbox img { max-height: calc(100vh - 140px); width: 100%; object-fit: contain; transition: opacity .45s ease; }
.lightbox img.fade { opacity: 0; }
.lightbox[hidden] { display: none; }
.arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.arrow svg { width: 26px; height: 26px; }
.lightbox .arrow, .lightbox .close { color: #fff; }
.lightbox .arrow:hover { opacity: .7; }
.lightbox .close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.lightbox .count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 13px; }

/* tablet */
@media (max-width: 1080px) {
  .tb-link.hide-md { display: none; }
  .subnav .in { justify-content: flex-start; }
  .split, .story { gap: 40px; }
  .cards.four { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 40px; }
}

/* phone: matches the Jumeirah mobile page */
@media (max-width: 760px) {
  .topbar .in { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .tb-left { gap: 12px; }
  .tb-right .tb-link { display: none; }
  .logo img { height: 44px; }
  .reserve { padding: 0 14px; font-size: 12px; }
  .hero { height: max(420px, calc(100svh - 120px)); }
  .subnav .in { height: auto; display: block; padding-top: 14px; }
  .prop { display: block; border: 0; padding: 0; font-size: 18px; line-height: 24px; }
  .share { position: absolute; top: 16px; right: var(--gr); }
  .subnav .in { position: relative; }
  .tabs { gap: 24px; margin-top: 10px; padding-bottom: 10px; margin-right: calc(-1 * var(--gr)); padding-right: var(--gr); }
  .title { font-size: 24px; }
  .sec { padding-block: 48px; }
  .strip { gap: 8px; margin-top: 28px; }
  .cards { margin-top: 32px; }
  .cards.two, .cards.three, .cards.four { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gr)); margin-left: calc(-1 * var(--gl)); padding-left: var(--gl); padding-right: var(--gr); scroll-padding-left: var(--gl); }
  .cards::-webkit-scrollbar { display: none; }
  .cards > .card { flex: 0 0 86%; scroll-snap-align: start; }
  .cards.four > .card { flex-basis: 72%; }
  .dots { display: flex; }
  .center { margin-top: 32px; }
  .split, .story { grid-template-columns: minmax(0,1fr); }
  .split .txt { justify-items: center; text-align: center; }
  .split .title.left { text-align: center; }
  .split .title.left::after { margin-left: auto; }
  .split .txt p { max-width: none; }
  .collage { height: 360px; gap: 8px; }
  .split .btn-row { order: 3; }
  .band { min-height: 520px; }
  .story .txt { max-width: none; }
  .contact-cols { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .fold dl { grid-template-columns: minmax(0,1fr); }
  .fold dt { border-bottom: 0; padding-bottom: 0; }
  .foot { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 48px; }
  .touch { grid-column: 1 / -1; justify-self: center; order: -1; }
  .btn { min-width: 232px; }
  .lightbox { grid-template-columns: 40px minmax(0,1fr) 40px; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- inner pages (Jumeirah sub-page patterns) ---------- */
.bar-space { height: calc(56px + env(safe-area-inset-top, 0px)); background: var(--bar); }
.topbar.solid { background: var(--bar); }
.page-head { padding-block: 72px 48px; text-align: center; }
.page-head h1 { font-family: var(--serif); font-size: 32px; line-height: 1.25; }
.page-head p { max-width: 640px; margin: 16px auto 0; }

/* listing with a filter column (Accommodation) */
.listing { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 48px; align-items: start; padding-bottom: 80px; }
.filters { position: sticky; top: 150px; }
.filters .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.textbtn { background: none; border: 0; padding: 0; font: 500 12px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.filters details { border-bottom: 1px solid var(--rule); }
.filters summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; font-size: 13px; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary svg { width: 14px; height: 14px; transition: transform .2s; }
.filters details[open] summary svg { transform: rotate(180deg); }
.filters label { display: flex; gap: 10px; align-items: center; padding: 0 0 12px; font-size: 13px; cursor: pointer; }
.filters input { accent-color: var(--ink); width: 15px; height: 15px; }
.results { font-size: 13px; color: var(--grey); margin-bottom: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 32px; }
.grid2 .card[hidden] { display: none; }
.empty { color: var(--grey); padding: 32px 0; }

/* detail page */
.detail-head { text-align: center; padding-block: 56px 24px; display: grid; gap: 16px; justify-items: center; }
.detail-head h1 { font-family: var(--serif); font-size: 32px; line-height: 1.25; }
.detail-head p { max-width: 560px; }
.features { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; padding-block: 40px; text-align: center; }
.features img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.features h3 { font-family: var(--sans); font-size: 14px; font-weight: 500; margin: 16px 0 6px; }
.features p { font-size: 13px; color: var(--grey); }
.photo-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-top: 48px; }
.photo-row button { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.photo-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.photo-row button:hover img { transform: scale(1.04); }
.room { max-width: 920px; margin: 0 auto; }
.room h3 { font-family: var(--serif); font-size: 22px; margin: 40px 0 20px; }
.glance { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 48px; }
.glance div { display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; align-items: start; }
.glance svg { width: 32px; height: 32px; grid-row: span 2; color: var(--ink); }
.glance b { font-weight: 600; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 48px; }
.ticks li { position: relative; padding-left: 18px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.ticks.one { grid-template-columns: minmax(0,1fr); }
.price-note { margin-top: 24px; font-size: 13px; color: var(--grey); }

/* gallery page */
.gtabs { display: flex; gap: 28px; margin-bottom: 28px; }
.gtabs button { background: none; border: 0; padding: 4px 0; font: 500 12px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--grey); border-bottom: 1.5px solid transparent; cursor: pointer; }
.gtabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.masonry { columns: 3; column-gap: 16px; padding-bottom: 80px; }
.masonry button { display: block; width: 100%; padding: 0; border: 0; background: none; margin: 0 0 16px; break-inside: avoid; cursor: zoom-in; overflow: hidden; }
.masonry button[hidden] { display: none; }
.masonry img { width: 100%; height: auto; transition: transform .6s; }
.masonry button:hover img { transform: scale(1.03); }

/* alternating rows (Wellbeing pattern) */
.rows { display: grid; gap: 96px; padding-bottom: 96px; }
.altrow { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 64px; align-items: center; }
.altrow.flip { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.altrow.flip > img { order: 2; }
.altrow > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.altrow .txt { display: grid; gap: 18px; justify-items: start; max-width: 420px; }
.altrow .txt .title { font-size: 28px; }

@media (max-width: 900px) {
  .listing { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .filters { position: static; }
  .features { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .photo-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .altrow, .altrow.flip { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .altrow.flip > img { order: 0; }
  .masonry { columns: 2; }
}
@media (max-width: 760px) {
  .page-head { padding-block: 40px 28px; }
  .page-head h1, .detail-head h1 { font-size: 24px; }
  .grid2 { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .glance, .ticks { grid-template-columns: minmax(0,1fr); }
  .photo-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .photo-row button:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .masonry { column-gap: 8px; }
  .masonry button { margin-bottom: 8px; }
  .rows { gap: 56px; padding-bottom: 56px; }
}

/* compact footer: contact, two link columns and the newsletter in one row */
footer { padding-block: 48px 24px; }
footer .foot { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap: 32px; align-items: start; }
footer .foot ul { gap: 12px; }
.fcontact { display: grid; gap: 8px; font-size: 13px; line-height: 1.5; }
.fcontact h3, footer .touch h3, .fmap h3 { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 4px; }
.fcontact a { text-decoration: none; }
.fcontact a:hover { text-decoration: underline; text-underline-offset: 4px; }
footer .touch { justify-self: end; justify-items: start; text-align: left; gap: 10px; }
footer .touch p { font-size: 13px; }
footer .copy { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (max-width: 900px) {
  footer .foot { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 32px; }
  footer .touch { justify-self: start; }
}
@media (max-width: 760px) {
  footer .touch { grid-column: auto; order: 0; justify-self: start; justify-items: start; text-align: left; }
  .fcontact { grid-column: 1 / -1; }
  footer .touch { grid-column: 1 / -1; }
}

/* gallery live tiles (Windows 10 style): a photo slides up and the next one slides in from below */
.masonry button { position: relative; transform-origin: center; transition: transform .15s ease; }
.masonry button:active { transform: perspective(600px) scale(.97) rotateX(2deg); }
.masonry button img { display: block; will-change: transform; }
.masonry button img.tile-next { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(100%); }
.masonry button img.tile-go { transition: transform .9s cubic-bezier(.1,.9,.2,1); }
.masonry button > img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.masonry button:hover > img:not(.tile-go):not(.tile-next) { transform: scale(1.06); }

/* gallery: mixed tile sizes like a Windows 10 start screen */
.masonry { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 12px; }
.masonry button { margin: 0; height: 100%; }
.masonry button > img { width: 100%; height: 100%; object-fit: cover; }
.masonry .t-big { grid-column: span 2; grid-row: span 2; }
.masonry .t-wide { grid-column: span 2; }
.masonry .t-tall { grid-row: span 2; }
@media (max-width: 900px) { .masonry { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 180px; } }
@media (max-width: 760px) {
  .masonry { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 130px; gap: 8px; }
  .masonry button { margin: 0; }
}

/* full-screen gallery: zoom-in opening, thumbnail strip with arrows */
.lightbox { grid-template-rows: minmax(0,1fr) auto; row-gap: 18px; padding-bottom: 20px; }
.lightbox:not([hidden]) { animation: lb-fade .35s ease both; }
.lightbox:not([hidden]) #lbImg { animation: lb-zoom .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-zoom { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox img#lbImg { max-height: calc(100vh - 210px); }
.lightbox .count { position: static; grid-column: 1 / -1; order: 3; margin: 0; }
.thumbs { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 8px; justify-content: safe center; scroll-behavior: smooth; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: 0 0 auto; width: 88px; height: 60px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s; }
.thumbs button:hover { opacity: .85; }
.thumbs button[aria-current="true"] { opacity: 1; border-color: #fff; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
@media (max-width: 760px) { .thumbs button { width: 64px; height: 44px; } .lightbox img#lbImg { max-height: calc(100vh - 190px); } }
@media (prefers-reduced-motion: reduce) { .lightbox:not([hidden]), .lightbox:not([hidden]) #lbImg { animation: none; } }

/* policies and FAQs page */
.info { max-width: 820px; }
.info .title { margin-top: 24px; }
.info dl { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); margin: 32px 0 56px; border-top: 1px solid var(--rule); }
.info dt, .info dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.info dt { font-weight: 600; padding-right: 24px; }
@media (max-width: 760px) { .info dl { grid-template-columns: minmax(0,1fr); } .info dt { border-bottom: 0; padding-bottom: 0; } }

/* hero: slow animated zoom (Ken Burns) on the photo, behind the top bar */
.hero { overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; background-size: cover; transform-origin: 50% 60%; animation: hero-zoom 16s cubic-bezier(.2,.6,.3,1) infinite alternate; will-change: transform; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* live tiles: 3D room for the door, flip and fold motions */
.masonry button { perspective: 1100px; transform-style: preserve-3d; background: #2a2724; }

/* navigation: desktop uses the horizontal property menu only; phones use the burger menu instead of it */
#menuBtn { display: none; }
.drawer ul a[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 760px) {
  #menuBtn { display: grid; }
  .subnav .tabs { display: none; }
  .subnav .in { display: flex; align-items: center; justify-content: space-between; padding-top: 0; height: 52px; }
  .subnav .share { position: static; }
  html { scroll-padding-top: 110px; }
}

/* homepage hero: the banner video, silent and looping, over its poster photo; the photo stays if video cannot play */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero.has-video::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* weddings */
.wed-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.wed-pics button { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 4 / 5; overflow: hidden; }
.wed-pics img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.pkg { background: var(--paper); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pkg-price { font-family: var(--serif); font-size: 20px; }
.pkg-intro { color: var(--grey); margin: 8px 0 12px; }
.pkg .ticks { margin: 8px 0 24px; flex: 1; }
.pkg .btn { align-self: flex-start; min-width: 0; }
.wed-form { max-width: 820px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.wed-form label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--grey); }
.wed-form input, .wed-form select, .wed-form textarea { font: 15px/1.4 var(--sans); letter-spacing: normal; text-transform: none; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 0; padding: 12px 14px; width: 100%; }
.wed-form input:focus, .wed-form select:focus, .wed-form textarea:focus { outline: none; border-color: var(--ink); }
.wed-form .full { grid-column: 1 / -1; }
.wed-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.wed-foot p { color: var(--grey); font-size: 13px; }
.wed-strip { grid-template-columns: repeat(3, 1fr); }
.wed-credit { text-align: center; color: var(--grey); font-size: 12px; margin-top: 16px; }
@media (max-width: 720px) { .wed-pics, .pkgs, .wed-form { grid-template-columns: 1fr; } }

/* home hero slideshow */
.hero.has-slides::before { animation: none; opacity: 0; }
.hero-slide { position: absolute; inset: 0; background-position: center 60%; background-size: cover; opacity: 0; z-index: 0; }
/* The outgoing photo stays fully visible underneath while the next one fades in on top, so the two never show
   through each other. Each photo drifts slowly while it is up: one zooms in, the next zooms out. The outgoing
   one keeps its animation (same name on .on and .prev), so it does not jump back while it is covered. */
.hero-slide.prev { opacity: 1; z-index: 1; }
.hero-slide.on { opacity: 1; z-index: 2; transition: opacity 1s ease; }
.hero-slide { transform-origin: 50% 60%; will-change: transform; }
.hero-slide.zin.on, .hero-slide.zin.prev { animation: hero-in 8s linear forwards; }
.hero-slide.zout.on, .hero-slide.zout.prev { animation: hero-out 8s linear forwards; }
@keyframes hero-in { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes hero-out { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-arrow { position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.2); color: #fff; cursor: pointer; transition: background .2s ease; }
.hero-arrow:hover { background: rgba(0,0,0,.45); }
.hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-prev { left: 24px; }
.hero-next { right: 24px; }
@media (max-width: 720px) { .hero-arrow { width: 40px; height: 40px; margin-top: -20px; } .hero-arrow svg { width: 18px; height: 18px; } .hero-prev { left: 10px; } .hero-next { right: 10px; } }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; display: flex; justify-content: center; gap: 10px; }
.hero-dots button { width: 28px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.hero-dots button[aria-current="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-slide.on { transition: none; } .hero-slide.on, .hero-slide.prev { animation: none !important; } }
.story img.portrait { aspect-ratio: 4 / 5; object-position: center 35%; max-height: 720px; }

/* room cards: open the room page, or book this room straight away */
.room-card { display: flex; flex-direction: column; }
.room-card .card-link { display: block; text-decoration: none; color: inherit; flex: 1; }
.card-actions { display: flex; align-items: center; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.card-actions .btn { min-width: 0; padding: 0 28px; height: 38px; }
.textlink { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; color: var(--ink); }
.textlink:hover { color: var(--gold); }

/* footer location map: OpenStreetMap tiles toned to a warm sand monochrome, the Hoshi emblem as the marker */
.map { height: 220px; background: #ece5d8; border: 1px solid var(--rule); }
.map .leaflet-tile-pane { filter: grayscale(1) sepia(.38) brightness(1.06) contrast(.88); }
.map .leaflet-control-attribution { background: rgba(250,248,244,.85); color: var(--grey); font: 9px var(--sans); }
.map .leaflet-control-attribution a { color: var(--grey); }
.hoshi-pin { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--gold); box-shadow: 0 4px 12px rgba(35,33,30,.22); display: grid; place-items: center; }
.hoshi-pin img { width: 32px; height: 32px; }
.map-link { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }

/* footer: contact, the map in the middle, book direct */
footer .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
footer .fcontact, footer .touch, .fmap { align-self: start; }
footer .touch { justify-self: start; justify-items: start; text-align: left; }
.fmap { display: grid; gap: 16px; justify-items: start; }
.fmap .map { width: 100%; }
@media (max-width: 860px) { footer .foot { grid-template-columns: minmax(0, 1fr); row-gap: 36px; } }