@font-face {
  font-family: "DM Serif Display";
  src: url("assets/fonts/DMSerifDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mx: 0; --my: 0;
  --back-opacity: 1; --back-x: 0px; --back-y: 0px; --back-scale: 0.76;
  --four-y: 10vh; --four-scale: 0.78;
  --bazaar-y: 20vh;
  --blur-px: 0px; --back-brightness: 1;
  --bazaar-blur-px: 0px; --bazaar-brightness: 1; --bazaar-saturation: 1;
  --shade-opacity: 1; --shade-z: 2;
  --shade-top-alpha: 0; --shade-mid-alpha: 0; --shade-bottom-alpha: 0;
  --tint-top: 112, 172, 220;    /* clear sky blue */
  --tint-mid: 205, 224, 240;    /* pale blue / white haze */
  --tint-bottom: 255, 214, 150; /* golden glow */
  --title-y: 0px; --title-scale: 1; --title-opacity: 1;
  --bridge-x: -50%; --bridge-y: 0px; --bridge-bottom: 5vh;
  --bridge-width: 67.2vw; --bridge-scale: 1.02;
  /* Layout anchors: the gates sit just below the headline (the headline is cut off slightly behind them),
     and the arch peeks out above the gates. Everything follows the headline, so it works on wide and tall screens. */
  --title-top: max(96px, 19vh);
  --title-size: 11vw;
  --gate-line: calc(var(--title-top) + var(--title-size) * 0.78 * 0.8);
  --gate-top: max(var(--gate-line), calc(100% - 118vw * 0.3013));
  --arch-w: var(--bridge-width);
  --split-left-x: -50%;  --split-left-y: 0px;  --split-left-scale: 1;
  --split-right-x: -50%; --split-right-y: 0px; --split-right-scale: 1;
  --frame2-opacity: 0; --frame2-x: -50%; --frame2-y: -50%; --frame2-scale: 1.06;
  --intro-copy-y: 0px; --intro-copy-opacity: 1;
  --panel2-opacity: 0; --panel2-y: calc(-50% + 58px);
  --panel3-opacity: 0; --panel3-y: calc(-50% + 58px);
  --sights-opacity: 0; --sights-controls-opacity: 0; --sights-y: 0px;
  --sights-enter-x: 420vw; --sights-visibility: hidden;
  --sights-shift: 0px; --sights-scale: 1;
  --sights-top: clamp(112px, 19vh, 220px);
  --sights-screen-top: clamp(112px, 19vh, 220px);
  --ink: #111411; --paper: #fdf1e1; --shadow: rgba(0, 0, 0, 0.32);
  font-family: Inter, Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--paper);
  background: #0b1110;
  letter-spacing: 0;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #0b1110;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: #0b1110;
}

button {
  border: 0;
  font: inherit;
}

.site-shell { min-height: 100vh; }

/* Scroll rig */
.cinema-scroll {
  position: relative;
  height: calc(100vh + 3700px);
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #7fb4d4;
}

.world,
.back-stack,
.sky-img,
.shade,
.scene-img,
.site-header,
.sights-slider,
.sights-controls,
.hero-title,
.intro-copy,
.story-panel {
  position: absolute;
}

.world {
  inset: 0;
  overflow: hidden;
  background: #79b7dd;
}

/* Header */
.site-header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 32px;
  padding: 32px;
  color: rgba(253, 241, 225, 0.86);
  pointer-events: auto;
}

.site-logo {
  justify-self: start;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: rgba(253, 241, 225, 0.92);
  text-decoration: none;
  white-space: nowrap;
}

.site-logo img {
  display: block;
  height: 34px;
  width: auto;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.28));
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 2.2vw, 44px);
}

.site-nav a,
.language-switcher {
  color: rgba(253, 241, 225, 0.86);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.site-nav a {
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
}

.language-switcher {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.language-switcher span {
  display: inline-flex;
  line-height: 1;
}

/* Scene images */
.scene-img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
  pointer-events: none;
}

.sky-img {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.back-stack {
  top: 0;
  bottom: 0;
  left: -3vw;
  right: -3vw;
  z-index: 1;
  opacity: var(--back-opacity);
  transform: translate3d(var(--back-x), var(--back-y), 0) scale(var(--back-scale));
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.back-img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-bazaar,
.back-bazaar-blur,
.back-four {
  top: auto;
  bottom: 0;
  left: 48%;
  right: auto;
  width: 112%;
  height: auto;
  object-fit: contain;
}

/* Interior scene: the house layer dissolves to reveal it. The cards live in .window-view,
   which is aligned to the glass of the sliding door in the photo (2000 x 1342). */
.interior-scene {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(max(100vh, 620px) * 1.4903));
  aspect-ratio: 2000 / 1342;
  transform: translate(-50%, -50%);
  opacity: var(--interior-opacity, 0);
  pointer-events: none;
}

.interior-img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-bazaar {
  z-index: 3;
  opacity: var(--bazaar-sharp-opacity, 1);
  transform: translate3d(-50%, var(--bazaar-y), 0) scale(0.86);
}

/* small pre-blurred copy of the house, faded in during the arch scene */
.back-bazaar-blur {
  z-index: 3;
  opacity: var(--bazaar-blur-opacity, 0);
  transform: translate3d(-50%, var(--bazaar-y), 0) scale(0.86);
}

.back-four {
  z-index: 1;
  opacity: 0.9;
  transform: translate3d(-50%, calc(var(--four-y) - 110px), 0) scale(var(--four-scale));
}

/* Sights slider: one card at a time, seen through the glass of the sliding door */
.window-view {
  position: absolute;
  left: 26.75%;
  top: 40.09%;
  width: 30.5%;
  height: 31.45%;
  container-type: size;
  clip-path: url(#window-glass);
  pointer-events: auto;
}

.sights-slider {
  inset: 0;
  padding: 0;
  opacity: 1;
  visibility: var(--sights-visibility);
  transform: translate3d(var(--sights-enter-x), 0, 0);
  pointer-events: auto;
  will-change: transform;
}

.sights-track {
  display: flex;
  gap: 6cqw;
  align-items: flex-start;
  height: 100%;
  padding-top: 3cqh;
  --card-step: 98cqw;
  --card-lead: 4cqw;
  transform: translate3d(calc(var(--sights-index, 5) * var(--card-step) * -1 + var(--card-lead)), 0, 0);
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sights-track.is-jumping { transition: none; }

/* The door's centre mullion hides ~49-51% of the card, so text stays in the left half
   and the pin icon sits in the right half. */
.sight-card {
  --p: clamp(10.5px, 3.1cqw, 14.5px);
  position: relative;
  flex: 0 0 92cqw;
  height: 64cqh;
  padding: 5cqw;
  overflow: hidden;
  border: 1px solid rgba(253, 241, 225, 0.42);
  border-radius: 5.5cqw;
  color: #000;
  background: #fdf1e1;
  box-shadow: 0 18px 52px rgba(2, 47, 64, 0.12);
  backdrop-filter: none;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.sight-card:not(.is-active) { opacity: var(--neighbor-opacity, 1); }

.sight-card::before,
.sight-card::after { content: none; }

.sight-card:focus-visible,
.sight-card.is-active { outline: none; }

/* Package card: name + price in the left glass pane, feature list in the right pane. */
.sight-card {
  display: grid;
  grid-template-columns: 38cqw 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 5.2cqw;
  align-content: stretch;
}

.sight-kicker,
.sight-card h3,
.sight-price,
.sight-features {
  position: static;
  text-shadow: none;
  margin: 0;
  color: #000;
}

.sight-kicker {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(9px, 2.4cqw, 11.5px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sight-card h3 {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: 4cqh;
  font-size: clamp(12px, 4.8cqw, 25px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.sight-price {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  font-size: clamp(26px, 9.2cqw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.sight-features {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: center;
  display: grid;
  gap: 1.6cqh;
  padding: 0;
  list-style: none;
  font-size: clamp(10px, 2.9cqw, 13.5px);
  font-weight: 400;
  line-height: 1.22;
}

.sight-features li {
  position: relative;
  padding-left: 1.1em;
}

.sight-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #c9822f;
}

.sights-controls {
  z-index: 5;
  left: 41.9%;
  top: 74.5%;
  display: flex;
  justify-content: center;
  gap: 14px;
  opacity: var(--sights-controls-opacity);
  transform: translateX(-50%);
  pointer-events: none;
  will-change: opacity;
}

.sights-controls.is-ready { pointer-events: auto; }

.sight-nav {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #111411;
  background: rgba(253, 241, 225, 0.94);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Hero */
.hero-title {
  z-index: 5; /* in front of the arch (4), behind the gates (6) */
  left: 50%;
  top: var(--title-top);
  width: 94vw;
  margin: 0;
  color: #fdf1e1;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 0.78;
  text-align: center;
  white-space: nowrap;
  text-shadow: none;
  transform: translate3d(-50%, var(--title-y), 0) scale(var(--title-scale));
  opacity: var(--title-opacity);
  pointer-events: none;
  will-change: transform, opacity;
}

.bridge-img {
  z-index: 4;
  opacity: var(--arch-opacity, 1);
  left: 50%;
  bottom: var(--bridge-bottom);
  width: var(--arch-w);
  height: auto;
  transform: translate3d(var(--bridge-x), var(--bridge-y), 0) scale(var(--bridge-scale));
  transform-origin: 50% 48%;
}

.splitframe-img {
  z-index: 6;
  left: 50%;
  top: calc(var(--gate-top) - 118vw * 0.2567);
  width: 118vw;
  height: auto;
  pointer-events: none;
  visibility: var(--split-visibility, visible);
  opacity: var(--split-opacity, 1);
}

.splitframe-left {
  transform: translate3d(var(--split-left-x), var(--split-left-y), 0) scale(var(--split-left-scale));
  transform-origin: 48.5% 52%;
}

.splitframe-right {
  transform: translate3d(var(--split-right-x), var(--split-right-y), 0) scale(var(--split-right-scale));
  transform-origin: 51.5% 52%;
}

.frame-two-img {
  z-index: 5;
  filter: none !important;
  backdrop-filter: none;
  left: 50%;
  top: 50%;
  width: min(122vw, 2160px);
  height: auto;
  opacity: var(--frame2-opacity);
  transform: translate3d(var(--frame2-x), var(--frame2-y), 0) scale(var(--frame2-scale));
  transform-origin: 50% 48%;
}

.shade {
  inset: 0;
  z-index: var(--shade-z);
  pointer-events: none;
  opacity: var(--shade-opacity);
  background: linear-gradient(180deg,
    rgba(var(--tint-top), 0.465) 0%,
    rgba(var(--tint-mid), 0.42) 48%,
    rgba(var(--tint-bottom), 0.51) 100%);
}

/* Intro copy */
.intro-copy {
  z-index: 9;
  left: 50%;
  bottom: clamp(56px, 28vh, 400px);
  width: min(560px, calc(100vw - 40px));
  text-align: center;
  transform: translate3d(-50%, var(--intro-copy-y), 0);
  opacity: var(--intro-copy-opacity);
  pointer-events: none;
  will-change: transform, opacity;
}

.intro-copy p {
  margin: 0 auto;
  max-width: 560px;
  color: #fdf1e1;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.18;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.intro-copy { visibility: var(--intro-visibility, visible); }

/* Hero call-to-action buttons */
.cta {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.cta-primary {
  color: var(--ink);
  background: #fdf1e1;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.cta-secondary {
  color: #fdf1e1;
  background: rgba(17, 20, 17, 0.42);
  border: 1px solid rgba(253, 241, 225, 0.75);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.cta:hover { transform: translateY(-2px); }
.cta-primary:hover { background: #fff8ee; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); }
.cta-secondary:hover { background: rgba(17, 20, 17, 0.42); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 2px solid #fdf1e1; outline-offset: 3px; }

/* Story panels */
.story-panel {
  z-index: 10;
  left: 50%;
  top: 45%;
  width: min(760px, calc(100vw - 42px));
  text-align: center;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}

.story-panel h2 {
  margin: 0;
  color: #fdf1e1;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 4.75rem;
  font-weight: 500;
  line-height: 0.95;
  text-shadow: 0 16px 38px var(--shadow);
}

.story-panel p {
  width: min(520px, 100%);
  margin: 26px auto 0;
  color: #fdf1e1;
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.18;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.story-panel-bridge {
  top: 60%;
  visibility: var(--panel2-visibility, visible);
  opacity: var(--panel2-opacity);
  transform: translate3d(-50%, var(--panel2-y), 0);
}

.story-panel-bazaar {
  top: 31%;
  visibility: var(--panel3-visibility, visible);
  opacity: var(--panel3-opacity);
  transform: translate3d(-50%, var(--panel3-y), 0);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  width: min(660px, 100%);
  margin: 34px auto 0;
}

.facts dt {
  color: #fdf1e1;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 0.9;
  text-shadow: 0 14px 34px var(--shadow);
}

.facts dd {
  margin: 18px 0 0;
  color: #fdf1e1;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.14;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.facts dd strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.15rem;
  font-weight: 700;
}

.facts dd {
  font-size: 0.95rem;
  font-weight: 400;
}

/* animated counters: fixed width (set by JS) so the number does not wiggle while counting */
.count {
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Headline panels: balanced line breaks, size tied to the screen width */
.story-panel h2 { text-wrap: balance; }
.story-panel p { text-wrap: pretty; }

.story-panel.story-panel-bazaar h2 {
  font-size: clamp(2.3rem, 4.2vw, 3.8rem);
}

/* Experience panel (the arch scene) */
.story-panel.story-panel-bridge h2 {
  max-width: 14ch;
  margin-inline: auto;
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
}

.story-panel.story-panel-bridge p {
  width: min(580px, 100%);
  margin-top: 20px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.note-button {
  min-height: 50px;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--ink);
  background: #fdf1e1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  cursor: pointer;
}

.note-button span:first-child {
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 1500px) {
  .story-panel h2 { font-size: 4.1rem; }
}

@media (max-width: 1100px) {
  :root { --title-top: 15vh; --arch-w: 138vw; }
  .frame-two-img { width: 132vw; }
  .story-panel h2 { font-size: 3.2rem; }
  .facts { gap: 34px; margin-top: 44px; }
  .facts dt { font-size: 3.2rem; }
}

@media (max-width: 640px) {
  .stage { min-height: 640px; }
  .site-header { grid-template-columns: 1fr auto; gap: 18px; padding: 24px; }
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  :root { --title-top: 16vh; --title-size: 12vw; --arch-w: 190vw; }
  .frame-two-img { width: 176vw; }
  .intro-copy { bottom: 42px; }
  .intro-copy p, .story-panel p { font-size: 1rem; }
  .hero-tags { gap: 8px; }
  .cta { min-height: 46px; padding: 0 22px; font-size: 0.95rem; }
  .story-panel { top: 42%; }
  .story-panel-bazaar { top: 26%; }
  .story-panel h2 { font-size: 2.45rem; }
  .facts { gap: 18px; margin-top: 34px; }
  .facts dt { font-size: 2.5rem; }
}

@media (max-width: 640px) {
  .interior-scene { transform: translate(-41.9%, -50%); }
  /* the door is slightly wider than the phone screen, so keep the card inside the visible part */
  /* package cards on phones: a bit smaller, centred in the glass, neighbours stay outside the window */
  .sight-card {
    flex-basis: 76cqw;
    height: 56cqh;
    padding: 4cqw;
    grid-template-columns: 33cqw 1fr;
    column-gap: 4.5cqw;
  }
  .sight-card h3 { margin-top: 2.5cqh; font-size: clamp(12px, 4.1cqw, 22px); }
  .sight-price { font-size: clamp(22px, 7.8cqw, 34px); }
  .sight-more { min-height: 26px; padding: 0 12px; }
  .sight-features { font-size: clamp(9.5px, 2.75cqw, 13px); gap: 1.2cqh; }
  .site-logo img { height: 26px; }
  .sights-track { gap: 14cqw; --card-step: 90cqw; --card-lead: 12cqw; }
  .sight-nav { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-img, .back-stack, .hero-title, .intro-copy,
  .story-panel, .sights-track, .sights-slider { transition: none; }
}

/* Story text sits on a light sky: a soft blue shadow keeps the cream text readable */
.story-panel h2,
.facts dt {
  text-shadow: 0 2px 5px rgba(24, 52, 92, 0.28), 0 10px 38px rgba(24, 52, 92, 0.5);
}

.story-panel p,
.facts dd {
  text-shadow: 0 1px 3px rgba(24, 52, 92, 0.4), 0 2px 20px rgba(24, 52, 92, 0.6);
}

/* Menu: soft shade behind the header, current entry marked */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 36, 64, 0.34), rgba(18, 36, 64, 0));
}

.site-nav a { position: relative; padding-bottom: 6px; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #fdf1e1;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms ease;
}
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: #fff; }
.site-nav a:focus-visible { outline: 2px solid #fdf1e1; outline-offset: 6px; border-radius: 4px; }

/* Permanent legal links, bottom right */
.legal-nav {
  position: fixed;
  right: 20px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(17, 20, 17, 0.62);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.legal-nav a {
  color: rgba(253, 241, 225, 0.92);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.legal-nav a + a::before {
  content: "|";
  margin: 0 10px;
  color: rgba(253, 241, 225, 0.5);
}

.legal-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal-nav a:focus-visible { outline: 2px solid #fdf1e1; outline-offset: 3px; border-radius: 4px; }

@media (max-width: 640px) {
  .legal-nav { right: 12px; bottom: 12px; padding: 7px 12px; }
  .legal-nav a { font-size: 0.72rem; }
  .legal-nav a + a::before { margin: 0 7px; }
  .site-nav a { font-size: 17px; }
}

/* mobile menu tweak */
@media (max-width: 640px) {
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 15px; }
}

/* "Mehr Infos" button on each package card */
.sight-more {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  margin-top: 1.2cqh;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fdf1e1;
  background: #111411;
  font-size: clamp(10px, 2.8cqw, 12.5px);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms ease;
}
.sight-more:hover { background: #2a332a; transform: translateY(-1px); }
.sight-more:focus-visible { outline: 2px solid #c9822f; outline-offset: 2px; }

/* portrait phones and tablets: scenes are sized by screen HEIGHT (the art is 9:16), not by width */
@media (max-aspect-ratio: 9/10) {
  :root {
    --gate-h: 112vh;   /* gate art height; leaf top sits at ~42vh, leaf bottom at ~70vh */
    --arch-h: 120vh;   /* arch art height */
  }
  .splitframe-img { top: auto; bottom: 0; width: auto; height: var(--gate-h); }
  .splitframe-left  { transform-origin: 46% 70%; }
  .splitframe-right { transform-origin: 54% 70%; }

  /* the arch stays in place; any growth happens around its crest, so it never travels up or down */
  .bridge-img { width: auto; height: var(--arch-h); transform-origin: 50% 5%; }

  /* house art is sized by height too: ridge at ~51vh, base at ~76vh, garden down to the bottom;
     on narrow phones (tall, thin screens) it is never narrower than the screen (art is 1500x2688, so 181vw tall = 101vw wide) */
  .back-bazaar,
  .back-bazaar-blur {
    left: 50%;
    width: auto;
    height: max(86vh, 181vw);
    /* when the art had to grow to fill the width, shift it down by the same amount so the roof stays where it was */
    transform: translate3d(-50%, calc(8vh + max(0px, 181vw - 86vh)), 0);
  }

  /* subtext + buttons sit at the height of the gate leaves */
  .intro-copy { top: 43vh; bottom: auto; }
  .intro-copy p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 18px rgba(0, 0, 0, 0.65); }

  /* "Erfahrung": headline + paragraph sit above the arch (slightly overlapping its top),
     the two counters are stacked inside the arch opening */
  .story-panel.story-panel-bridge {
    top: 0;
    height: 100vh;
    width: min(300px, 78vw);
    transform: translate3d(-50%, var(--panel2-dy, 0px), 0);
  }
  .story-panel-bridge .story-copy {
    position: absolute;
    left: -14px;
    right: -14px;
    top: 20vh;
    padding: 12px 14px 14px;
    background: rgba(18, 36, 64, 0.3);
    border-radius: 28px;
    box-shadow: 0 0 26px 22px rgba(18, 36, 64, 0.3); /* soft, feathered edge */
  }
  .story-panel.story-panel-bridge h2 { max-width: none; font-size: 1.55rem; line-height: 1; }
  .story-panel.story-panel-bridge p { width: 100%; margin-top: 10px; font-size: 0.76rem; line-height: 1.28; }
  .story-panel-bridge .facts {
    position: absolute;
    left: 0;
    right: 0;
    top: 60vh;
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* the counters live on their own compositing layer with a light shadow, so counting never repaints the big text block */
  .story-panel-bridge .facts { will-change: transform; transform: translateZ(0); }
  .story-panel-bridge .facts dt { font-size: 2rem; text-shadow: 0 2px 8px rgba(24, 52, 92, 0.6); }
  .story-panel-bridge .facts dd { text-shadow: 0 1px 6px rgba(24, 52, 92, 0.7); }
  .story-panel-bridge .facts dd { margin-top: 4px; font-size: 0.7rem; line-height: 1.2; }
  .story-panel-bridge .facts dd strong { font-size: 0.85rem; margin-bottom: 2px; }

  /* "Leistungen" text: anchored at the top (below the menu), two buttons underneath */
  .story-panel.story-panel-bazaar {
    top: 23vh;
    transform: translate3d(-50%, var(--panel3-dy, 0px), 0);
  }
  .story-panel.story-panel-bazaar h2 { font-size: 1.6rem; line-height: 1; }
  .story-panel.story-panel-bazaar p { font-size: 0.88rem; line-height: 1.2; margin-top: 12px; }
  .panel-actions { gap: 10px; margin-top: 18px; }
  .panel-actions .note-button { min-height: 44px; padding: 0 22px; }
}

/* two buttons under the "Leistungen" text */
.panel-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.panel-actions .note-button { margin-top: 0; text-decoration: none; }
.note-button-secondary {
  color: #fdf1e1;
  background: rgba(18, 36, 64, 0.5);
  border: 1px solid rgba(253, 241, 225, 0.8);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.note-button-secondary:hover { background: rgba(18, 36, 64, 0.68); }
.note-button:focus-visible { outline: 2px solid #fdf1e1; outline-offset: 3px; }

/* landscape: the "Leistungen" panel is a bit more compact so both buttons fit above the roof */
@media (min-aspect-ratio: 9/10) {
  .story-panel.story-panel-bazaar h2 { font-size: clamp(2.3rem, 3.7vw, 3.4rem); }
  .story-panel.story-panel-bazaar p { margin-top: 16px; }
  .story-panel-bazaar .panel-actions { margin-top: 20px; gap: 10px; }
}

/* phone menu: a button with the menu symbol opens a drop-down with the links one below the other */
.nav-toggle { display: none; }

@media (max-width: 640px) {
  .site-header { align-items: center; }
  .nav-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px 0 14px;
    border: 1px solid rgba(253, 241, 225, 0.7);
    border-radius: 999px;
    color: #fdf1e1;
    background: rgba(18, 36, 64, 0.45);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:focus-visible { outline: 2px solid #fdf1e1; outline-offset: 3px; }
  .nav-toggle-bars { position: relative; display: inline-block; width: 20px; height: 14px; }
  .nav-toggle-bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 200ms ease, opacity 150ms ease, top 200ms ease;
  }
  .nav-toggle-bars i:nth-child(1) { top: 0; }
  .nav-toggle-bars i:nth-child(2) { top: 6px; }
  .nav-toggle-bars i:nth-child(3) { top: 12px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  /* the drop-down */
  .site-nav {
    position: absolute;
    top: calc(100% - 8px);
    left: 24px;
    right: 24px;
    grid-column: auto;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px;
    overflow: visible;
    border: 1px solid rgba(253, 241, 225, 0.35);
    border-radius: 20px;
    background: rgba(18, 36, 64, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }
  .site-nav a {
    display: block;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 18px;
    text-shadow: none;
  }
  .site-nav a::after { display: none; }
  .site-nav a.is-active { background: rgba(253, 241, 225, 0.16); color: #fff; font-weight: 600; }
  .site-nav a:hover { background: rgba(253, 241, 225, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .nav-toggle-bars i { transition: none; }
}

/* menu entries never wrap (the menu now has six entries) */
.site-nav a { white-space: nowrap; }