/* ============================================================================
   NOCTURNE — SECTIONS
   Every section is composed individually. No two share a layout.
   ========================================================================== */

/* ————————————————————————————————————————————————————————————————————————
   HERO
   ———————————————————————————————————————————————————————————————————————— */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg .media { position: absolute; inset: 0; block-size: 100%; }
/* Cinematic video sits OVER the poster image and fades in once ready.
   The image's <img> carries z-index:2 (from .media), so the video must sit
   above it. It stays below the scrim, which lives in the parent's context. */
.hero__video {
  position: absolute; inset: 0;
  z-index: 3;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__video.is-playing { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.hero__scrim::after { content: ""; position: absolute; inset: 0; background: var(--vignette); }

.hero__content {
  inline-size: 100%;
  padding-block-end: clamp(3rem, 9vh, 8rem);
  display: grid;
  gap: var(--sp-5);
}
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--sand-100);
}
.hero__title em { color: var(--accent-bright); }
.hero__sub {
  max-inline-size: 34rem;
  color: rgba(244,236,221,0.82);
  font-size: var(--fs-lead);
}
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin-block-start: var(--sp-3); }

.hero__meta {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--gutter);
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  gap: var(--sp-5);
  text-align: end;
}
.hero__meta-item { display: grid; gap: 0.2rem; }
.hero__meta-k { font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.hero__meta-v { font-family: var(--font-display); font-size: 1.1rem; color: var(--sand-100); }
@media (max-width: 760px) { .hero__meta { display: none; } }

.scroll-cue {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--sp-2);
  font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244,236,221,0.7);
  z-index: 1;
}
.scroll-cue__line { inline-size: 1px; block-size: 54px; background: linear-gradient(var(--accent), transparent); position: relative; overflow: hidden; }
.scroll-cue__line::after { content:""; position:absolute; inset-inline:0; block-size: 40%; background: var(--accent); animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-100%);} 60%,100% { transform: translateY(260%);} }

/* Hero rotating image dots */
.hero__dots { position: absolute; inset-block-end: clamp(3rem,9vh,8rem); inset-inline-end: var(--gutter); z-index: 2; display: flex; gap: var(--sp-2); }
.hero__dot { inline-size: 30px; block-size: 2px; background: rgba(244,236,221,0.3); border-radius: var(--r-pill); overflow: hidden; }
.hero__dot::after { content:""; display:block; block-size:100%; inline-size:0; background: var(--accent); }
.hero__dot.is-active::after { inline-size: 100%; transition: inline-size 6s linear; }
@media (max-width: 760px) { .hero__dots { inset-block-end: 1.2rem; } }

/* ————————————————————————————————————————————————————————————————————————
   MARQUEE STRIP between hero & intro
   ———————————————————————————————————————————————————————————————————————— */
.strip { padding-block: clamp(1.4rem, 3vw, 2.4rem); border-block: 1px solid var(--line); }

/* ————————————————————————————————————————————————————————————————————————
   INTRO / STATEMENT
   ———————————————————————————————————————————————————————————————————————— */
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.intro__statement { font-size: var(--fs-h3); font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; }
.intro__statement em { color: var(--accent); }
.intro__aside { display: grid; gap: var(--sp-5); }
.intro__aside p { color: var(--text-soft); }
.intro__sign { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--text); }
@media (max-width: 900px) { .intro__grid { grid-template-columns: 1fr; } }

/* Figures column inside intro */
.intro__figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.intro__figures .media:first-child { margin-block-start: clamp(2rem, 6vw, 5rem); }

/* ————————————————————————————————————————————————————————————————————————
   DUALITY — Dining House (night) / Specialty Café (day)
   ———————————————————————————————————————————————————————————————————————— */
.duality { display: grid; grid-template-columns: 1fr 1fr; min-block-size: 86vh; }
.panel {
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.5rem, 4vw, 4rem);
  min-block-size: 60vh;
  transition: flex var(--t-cinematic) var(--ease-out);
}
.panel .media { position: absolute; inset: 0; z-index: -2; }
.panel .media img { transition: transform var(--t-cinematic) var(--ease-out); }
.panel::before { content:""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); transition: opacity var(--t-base); }
.panel:hover .media img { transform: scale(1.07); }
.panel__tag { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-bright); }
.panel__title { font-size: var(--fs-h3); color: var(--sand-100); font-weight: 300; margin-block: var(--sp-2); }
.panel__desc { color: rgba(244,236,221,0.78); max-inline-size: 28rem; }
.panel__hours { margin-block-start: var(--sp-4); font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--sand-300); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.panel__link { margin-block-start: var(--sp-4); display: inline-flex; }
@media (max-width: 820px) { .duality { grid-template-columns: 1fr; } }

/* ————————————————————————————————————————————————————————————————————————
   PHILOSOPHY / PILLARS
   ———————————————————————————————————————————————————————————————————————— */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pillar { padding: clamp(2rem, 4vw, 3.5rem); border-inline-end: 1px solid var(--line); display: grid; gap: var(--sp-4); align-content: start; transition: background-color var(--t-base); }
.pillar:last-child { border-inline-end: 0; }
.pillar:hover { background: var(--surface); }
.pillar__num { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--accent); }
.pillar__icon { inline-size: 34px; block-size: 34px; color: var(--accent); }
.pillar__title { font-size: var(--fs-h5); }
.pillar__txt { color: var(--text-soft); font-size: var(--fs-body-sm); }
@media (max-width: 820px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .pillar:last-child { border-block-end: 0; }
}

/* ————————————————————————————————————————————————————————————————————————
   SIGNATURE MENU — editorial hover-reveal list + filter
   ———————————————————————————————————————————————————————————————————————— */
.menu-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap; margin-block-end: var(--sp-7); }
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filter {
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.55rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-muted);
  transition: all var(--t-fast);
}
.filter:hover { color: var(--text); border-color: var(--line-gold); }
.filter.is-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

.menu-layout { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.menu-list { display: grid; }
.menu-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
  border-block-end: 1px solid var(--line);
  cursor: pointer;
  transition: opacity var(--t-base), padding var(--t-base), filter var(--t-base);
}
.menu-row:first-child { border-block-start: 1px solid var(--line); }
.menu-list.is-filtering .menu-row.is-hidden { display: none; }
.menu-list[data-focus] .menu-row:not(:hover) { opacity: 0.4; }
.menu-row__idx { font-family: var(--font-label); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.1em; }
.menu-row__main { display: grid; gap: 0.35rem; }
.menu-row__name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 400; line-height: 1.1; transition: color var(--t-fast), transform var(--t-base) var(--ease-out); }
.menu-row:hover .menu-row__name { color: var(--accent); }
.menu-row__desc { color: var(--text-muted); font-size: var(--fs-body-sm); max-inline-size: 40ch; }
.menu-row__tags { display: flex; gap: var(--sp-2); margin-block-start: 0.3rem; }
.menu-tag { font-family: var(--font-label); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.12rem 0.55rem; }
.menu-row__price { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); white-space: nowrap; }
.menu-row__price::before { content: "EGP "; font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--text-muted); vertical-align: middle; margin-inline-end: 0.2rem; }

/* floating preview image that follows cursor */
.menu-preview {
  position: sticky;
  inset-block-start: 12vh;
  aspect-ratio: 4/5;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.menu-preview .media { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-base); }
.menu-preview .media.is-current { opacity: 1; }
.menu-preview__caption {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 5;
  padding: var(--sp-5); background: var(--scrim-soft); color: var(--sand-100);
}
.menu-preview__caption h4 { font-size: var(--fs-h5); }
@media (max-width: 980px) {
  .menu-layout { grid-template-columns: 1fr; }
  .menu-preview { display: none; }
  .menu-row { grid-template-columns: auto 1fr; }
  .menu-row__price { grid-column: 2; justify-self: start; font-size: 1.1rem; }
}

/* ————————————————————————————————————————————————————————————————————————
   DISH MODAL
   ———————————————————————————————————————————————————————————————————————— */
.dish-modal {
  position: fixed; inset: 0; z-index: var(--z-palette);
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in srgb, var(--bg-sunken) 80%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base);
}
.dish-modal.is-open { opacity: 1; visibility: visible; }
.dish-modal__panel {
  position: relative;
  inline-size: min(860px, 100%); max-block-size: 88vh; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transform: translateY(16px) scale(0.98); transition: transform var(--t-base) var(--ease-out);
}
.dish-modal.is-open .dish-modal__panel { transform: none; }
.dish-modal__media { position: relative; min-block-size: 360px; }
.dish-modal__media .media { position: absolute; inset: 0; }
.dish-modal__body {
  padding: clamp(1.8rem, 3.4vw, 3rem);
  display: grid; gap: var(--sp-4); align-content: center; overflow-y: auto;
}
.dish-modal__price { font-family: var(--font-display); font-size: 2rem; color: var(--accent); }
/* Close — a clear circle in the top-start (left) corner, over the imagery. */
.dish-modal__close {
  position: absolute; inset-block-start: clamp(0.9rem, 2vw, 1.4rem); inset-inline-start: clamp(0.9rem, 2vw, 1.4rem); z-index: 6;
  inline-size: 46px; block-size: 46px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--bg-elevated); border: 1px solid var(--line-strong); color: var(--text);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.dish-modal__close:hover { transform: rotate(90deg); background: var(--surface-strong); }
.dish-modal__close svg { inline-size: 20px; block-size: 20px; }
@media (max-width: 720px) {
  .dish-modal__panel { grid-template-columns: 1fr; max-block-size: 90vh; }
  .dish-modal__media { min-block-size: 240px; }
  .dish-modal__body { padding: clamp(1.5rem, 6vw, 2rem); }
}

/* ————————————————————————————————————————————————————————————————————————
   CHEF
   ———————————————————————————————————————————————————————————————————————— */
.chef { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.chef__media { position: relative; }
.chef__media .media { border-radius: var(--r-md); }
.chef__badge {
  position: absolute; inset-block-end: -2rem; inset-inline-end: -1.5rem; z-index: 4;
  inline-size: clamp(110px, 14vw, 150px); aspect-ratio: 1; border-radius: var(--r-pill);
  display: grid; place-items: center; text-align: center;
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font-display); line-height: 1.05; padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.chef__badge b { display: block; font-size: 2rem; font-weight: 500; }
.chef__badge span { font-family: var(--font-label); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; }
.chef__quote { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 300; line-height: 1.22; }
.chef__quote em { color: var(--accent); }
.chef__sign { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; }
.chef__stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; border-block-start: 1px solid var(--line); padding-block-start: var(--sp-5); margin-block-start: var(--sp-3); }
.stat__num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--accent); line-height: 1; }
.stat__lbl { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 900px) { .chef { grid-template-columns: 1fr; } .chef__badge { inset-inline-end: var(--sp-4); } }

/* ————————————————————————————————————————————————————————————————————————
   HORIZONTAL EXPERIENCE RAIL
   ———————————————————————————————————————————————————————————————————————— */
.rail { position: relative; }
.rail__viewport { overflow: hidden; }
.rail__track {
  display: flex; gap: clamp(1rem, 2.4vw, 2rem);
  padding-inline: var(--gutter);
  cursor: grab;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: var(--sp-4);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__card {
  flex: none;
  inline-size: clamp(260px, 34vw, 460px);
  scroll-snap-align: center;
}
.rail__card .media { border-radius: var(--r-md); }
.rail__card-meta { padding-block-start: var(--sp-4); display: grid; gap: var(--sp-2); }
.rail__card-step { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; }
.rail__card-title { font-family: var(--font-display); font-size: var(--fs-h5); }
/* Interactive scrollbar — click or drag it to move the rail horizontally. */
.rail__progress {
  margin-inline: var(--gutter); margin-block-start: var(--sp-5);
  position: relative; block-size: 5px; background: var(--line);
  border-radius: var(--r-pill); cursor: pointer; touch-action: none;
}
.rail__progress::before { content: ""; position: absolute; inset-block: -14px; inset-inline: 0; } /* larger hit target */
.rail__progress span {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; block-size: 100%;
  background: var(--accent); inline-size: 22%; min-inline-size: 44px;
  border-radius: var(--r-pill); pointer-events: none;
  transition: background-color var(--t-fast);
}
.rail__progress:hover span,
.rail__progress.is-grabbing span { background: var(--accent-bright); }
.rail__progress.is-grabbing { cursor: grabbing; }
.rail__hint { font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ————————————————————————————————————————————————————————————————————————
   GALLERY (asymmetric → lightbox)
   ———————————————————————————————————————————————————————————————————————— */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.6rem, 1.4vw, 1.2rem); grid-auto-flow: dense; }
.g-item { position: relative; overflow: hidden; border-radius: var(--r-sm); cursor: pointer; }
.g-item .media { block-size: 100%; }
.g-item img { transition: transform var(--t-cinematic) var(--ease-out); }
.g-item:hover img { transform: scale(1.08); }
.g-item::after { content:""; position: absolute; inset: 0; background: var(--scrim-soft); opacity: 0; transition: opacity var(--t-base); }
.g-item:hover::after { opacity: 0.5; }
.g-item__plus { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 3; inline-size: 40px; block-size: 40px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface-strong); color: var(--sand-100); opacity: 0; transform: scale(0.6); transition: all var(--t-base) var(--ease-out); }
.g-item:hover .g-item__plus { opacity: 1; transform: none; }
.g-a { grid-column: span 6; aspect-ratio: 16/10; }
.g-b { grid-column: span 3; aspect-ratio: 3/4; }
.g-c { grid-column: span 3; aspect-ratio: 3/4; }
.g-d { grid-column: span 4; aspect-ratio: 4/5; }
.g-e { grid-column: span 4; aspect-ratio: 4/5; }
.g-f { grid-column: span 4; aspect-ratio: 4/5; }
.g-g { grid-column: span 5; aspect-ratio: 16/11; }
.g-h { grid-column: span 7; aspect-ratio: 16/9; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .g-a, .g-b, .g-c, .g-d, .g-e, .g-f, .g-g, .g-h { grid-column: span 1; aspect-ratio: 1/1; }
  .g-a { grid-column: span 2; aspect-ratio: 16/10; }
}

/* ————————————————————————————————————————————————————————————————————————
   EVENTS
   ———————————————————————————————————————————————————————————————————————— */
.events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.event-card { position: relative; overflow: hidden; border-radius: var(--r-md); min-block-size: clamp(260px, 38vw, 420px); display: grid; align-items: end; isolation: isolate; }
.event-card .media { position: absolute; inset: 0; z-index: -2; }
.event-card::before { content:""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.event-card__body { padding: clamp(1.5rem, 3vw, 2.6rem); color: var(--sand-100); display: grid; gap: var(--sp-2); }
.event-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 300; }
.event-card__txt { color: rgba(244,236,221,0.8); max-inline-size: 34ch; }
.event-card--wide { grid-column: span 2; }
.event-card img { transition: transform var(--t-cinematic) var(--ease-out); }
.event-card:hover img { transform: scale(1.05); }
@media (max-width: 760px) { .events-grid { grid-template-columns: 1fr; } .event-card--wide { grid-column: span 1; } }

/* ————————————————————————————————————————————————————————————————————————
   JOURNAL
   ———————————————————————————————————————————————————————————————————————— */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
.post { display: grid; gap: var(--sp-4); }
.post__media { overflow: hidden; border-radius: var(--r-sm); }
.post__media img { transition: transform var(--t-cinematic) var(--ease-out); }
.post:hover .post__media img { transform: scale(1.05); }
.post__meta { display: flex; gap: var(--sp-3); align-items: center; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.post__dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--accent); }
.post__title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 400; line-height: 1.15; transition: color var(--t-fast); }
.post:hover .post__title { color: var(--accent); }
.post__excerpt { color: var(--text-soft); font-size: var(--fs-body-sm); }
.post--feature { grid-column: span 2; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem,3vw,2.6rem); }
.post--feature .post__title { font-size: var(--fs-h4); }
@media (max-width: 900px) {
  .journal-grid { grid-template-columns: 1fr; }
  .post--feature { grid-column: span 1; grid-template-columns: 1fr; }
}

/* ————————————————————————————————————————————————————————————————————————
   TESTIMONIALS
   ———————————————————————————————————————————————————————————————————————— */
.quotes { display: grid; place-items: center; text-align: center; gap: var(--sp-6); }
.quote { max-inline-size: 52rem; }
.quote__mark { font-family: var(--font-display); font-size: 5rem; color: var(--accent); line-height: 0.5; opacity: 0.5; }
.quote__text { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 300; line-height: 1.3; font-style: italic; }
.quote__by { margin-block-start: var(--sp-4); font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.quote__stars { color: var(--accent); letter-spacing: 0.3em; margin-block-start: var(--sp-2); }
.quotes__dots { display: flex; gap: var(--sp-2); }
.quotes__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color var(--t-fast), border-color var(--t-fast); }
.quotes__dot.is-active { background: var(--accent); border-color: var(--accent); }
.quote { transition: opacity var(--t-base); }

/* ————————————————————————————————————————————————————————————————————————
   RESERVATION
   ———————————————————————————————————————————————————————————————————————— */
.reserve { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.reserve__media { position: relative; min-block-size: 100%; }
.reserve__media .media { position: absolute; inset: 0; }
.reserve__media-meta { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 3; padding: clamp(1.5rem,3vw,2.6rem); background: var(--scrim); color: var(--sand-100); display: grid; gap: var(--sp-3); }
.reserve__info-row { display: flex; align-items: center; gap: var(--sp-3); }
.reserve__info-row svg { inline-size: 18px; block-size: 18px; color: var(--accent-bright); flex: none; }
.reserve__form { padding: clamp(1.6rem, 4vw, 3.4rem); display: grid; gap: var(--sp-5); }
.reserve__form-inner { display: grid; gap: var(--sp-6); }   /* breathing room above the submit button */
.reserve__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.reserve__fields .field--full { grid-column: 1 / -1; }
.reserve__success {
  display: none; place-items: center; text-align: center; gap: var(--sp-4);
  padding: clamp(2rem, 5vw, 4rem); grid-column: 1 / -1;
}
.reserve.is-confirmed .reserve__form-inner { display: none; }
.reserve.is-confirmed .reserve__success { display: grid; }
.reserve__check { inline-size: 70px; block-size: 70px; border-radius: var(--r-pill); display: grid; place-items: center; border: 1px solid var(--line-gold); color: var(--accent); }
@media (max-width: 900px) {
  .reserve { grid-template-columns: 1fr; }
  .reserve__media { min-block-size: 50vh; }
  .reserve__fields { grid-template-columns: 1fr; }
}

/* ————————————————————————————————————————————————————————————————————————
   FOOTER
   ———————————————————————————————————————————————————————————————————————— */
.footer { position: relative; padding-block: var(--section-y) var(--sp-7); border-block-start: 1px solid var(--line); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); }
.footer__brand img { block-size: 54px; inline-size: auto; margin-block-end: var(--sp-4); }
.footer__col h4 { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-block-end: var(--sp-4); }
.footer__col ul { display: grid; gap: var(--sp-3); list-style: none; padding: 0; }
.footer__col a { color: var(--text-soft); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--accent); }
.footer__news { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.footer__news input { flex: 1; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text); }
.footer__news input:focus { outline: none; border-color: var(--accent); }
.footer__news button { inline-size: 48px; flex: none; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-contrast); display: grid; place-items: center; }
.footer__social { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.footer__social a { inline-size: 42px; block-size: 42px; border: 1px solid var(--line); border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text-soft); transition: all var(--t-fast); }
.footer__social a svg { inline-size: 18px; block-size: 18px; }   /* inline SVGs need an explicit size to render */
.footer__social a:hover { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.footer__giant { font-family: var(--font-display); font-size: var(--fs-mega); line-height: 0.8; text-align: center; color: var(--text); opacity: 0.96; margin-block: clamp(2rem,6vw,5rem) 0; letter-spacing: -0.02em; }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-block-start: var(--sp-6); border-block-start: 1px solid var(--line); font-size: 0.78rem; color: var(--text-muted); }
.footer__bottom a:hover { color: var(--accent); }
.footer__map {
  position: relative;
  margin-block-start: var(--sp-4);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16/10;
  background:
    radial-gradient(circle at 60% 40%, rgba(212,175,99,0.12), transparent 60%),
    repeating-linear-gradient(0deg, var(--surface) 0 22px, transparent 22px 23px),
    repeating-linear-gradient(90deg, var(--surface) 0 22px, transparent 22px 23px),
    var(--bg-sunken);
}
.footer__map-load {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--sp-3);
  color: var(--text-soft);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.footer__map-load:hover { color: var(--text); background: var(--surface); }
.footer__map-pin { inline-size: 30px; block-size: 30px; color: var(--accent); animation: pin-bob 2.6s var(--ease-in-out) infinite; }
@keyframes pin-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .footer__map-pin { animation: none; } }
.footer__map-cta { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; }
.footer__map iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; filter: grayscale(1) sepia(0.3) brightness(0.85) contrast(1.05); transition: filter var(--t-base); }
.footer__map:hover iframe { filter: grayscale(0.4) sepia(0.1); }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

/* ————————————————————————————————————————————————————————————————————————
   SECTION HEADERS (shared rhythm, varied alignment)
   ———————————————————————————————————————————————————————————————————————— */
.s-head { display: grid; gap: var(--sp-4); max-inline-size: 44rem; margin-block-end: var(--sp-8); }
.s-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.s-head__title { font-size: var(--fs-h2); font-weight: 300; line-height: 1.02; }
.s-head__title em { color: var(--accent); }
.s-head__sub { color: var(--text-soft); font-size: var(--fs-lead); }
.count-badge { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--text-muted); }