:root {
  --menu-surface: rgba(6, 18, 12, .97);
}

.nav-toggle {
  display: none;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(246, 241, 231, .46);
  color: #f6f1e7;
  background: rgba(7, 18, 13, .34);
  font: 800 10px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  width: 18px;
  height: 1px;
  display: block;
  background: currentColor;
  transition: transform .24s ease, opacity .24s ease;
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.site-header.is-menu-open .nav-toggle__bars { background: transparent; }
.site-header.is-menu-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.site-header.is-menu-open .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Home-scoped copy of the shared header CTA rules. The release can therefore
   keep the live shared stylesheet byte-identical on every secondary page. */
.header-action {
  justify-self: end;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border: 1px solid rgba(246, 241, 231, .56);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.header-action:hover,
.header-action:focus-visible {
  color: var(--forest-950);
  background: var(--gold);
  border-color: var(--gold);
}

/* Full-screen atmosphere plus a native 9:16 film: depth without crop. */
.hero-v3 {
  min-height: max(760px, 100svh);
}

.hero-v3__media {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}

.hero-v3__film {
  position: absolute;
  top: 50%;
  right: clamp(28px, 6vw, 92px);
  width: auto;
  height: min(74vh, 720px);
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(246, 218, 158, .58);
  border-radius: 2px;
  background: #07150f url("../media/hero/ddg-hero-garden-sky-spa-night-portrait-poster-v2.webp") center / cover no-repeat;
  box-shadow: 0 38px 100px rgba(0, 0, 0, .58), -24px 28px 0 rgba(214, 174, 96, .1);
  transform: translateY(-50%);
}

.hero-v3__film video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-v3 .hero__poster img {
  object-position: 50% 50%;
  transform: none;
}

.hero-v3 .hero__veil {
  background:
    linear-gradient(90deg, rgba(4, 14, 9, .94) 0%, rgba(4, 14, 9, .72) 42%, rgba(4, 14, 9, .22) 72%, rgba(4, 14, 9, .42) 100%),
    linear-gradient(180deg, rgba(3, 12, 8, .22) 0%, transparent 35%, rgba(3, 12, 8, .92) 100%);
}

.hero-v3 .hero__content {
  width: min(650px, calc(100% - 48px));
}

.hero-v3 h1 {
  max-width: 9ch;
  text-wrap: balance;
}

/* The canonical scene remains a long editorial rail on every viewport. */
.day-reel {
  padding-top: clamp(105px, 9vw, 132px);
  scroll-margin-top: 104px;
}

.day-reel__intro {
  margin-bottom: 44px;
}

.day-reel__rail {
  display: flex;
  align-items: start;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 0 0 28px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 85, 42, .58) rgba(16, 32, 25, .1);
}

.day-reel .reel-panel,
.day-reel .reel-panel:nth-child(n) {
  flex: 0 0 clamp(480px, 52vw, 760px);
  min-height: 0;
  transform: none;
  scroll-snap-align: start;
}

.reel-panel--garden { aspect-ratio: 20 / 9; }
.reel-panel--spa,
.reel-panel--dusk { aspect-ratio: 4 / 3; }
.reel-panel--night { aspect-ratio: 7 / 3; }

.reel-panel__copy {
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 2.4vw, 30px);
  left: clamp(18px, 3vw, 34px);
}

.cottage-card img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.cottage-card[data-availability-status="OFFICIAL_CALENDAR"] .cottage-card__status {
  color: #684d1f;
  background: rgba(168, 117, 36, .1);
  border-color: rgba(168, 117, 36, .22);
}

.cottage-card[data-availability-status="OFFICIAL_CALENDAR"] .cottage-card__status::before {
  background: #a87524;
}

.august-availability__actions {
  max-width: 930px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin: 44px auto 0;
}

.text-link--dark { color: #17271e; }
.text-link--dark::after { background: rgba(23, 39, 30, .4); }

.experience-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 34px;
}

.experience-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #f5dfae;
  text-decoration-color: rgba(245, 223, 174, .42);
  text-underline-offset: 6px;
}

.experience-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .62fr);
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
  margin-top: 42px;
}

.experience-showcase a {
  position: relative;
  display: block;
  overflow: hidden;
  color: #f6f1e7;
  background: #07120d;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
  text-decoration: none;
}

.experience-showcase img {
  display: block;
  width: 100%;
  height: auto;
}

.experience-showcase a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(4, 13, 9, .86) 100%);
}

.experience-showcase a > span {
  position: absolute;
  z-index: 1;
  right: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2vw, 26px);
  left: clamp(16px, 2vw, 26px);
  display: grid;
  gap: 5px;
}

.experience-showcase strong {
  font: 400 clamp(1.5rem, 2.4vw, 2.7rem)/1 var(--serif);
}

.experience-showcase small {
  max-width: 38ch;
  color: rgba(246, 241, 231, .78);
  font-size: .78rem;
  line-height: 1.45;
}

.experience-showcase__feature img { aspect-ratio: 16 / 9; }

.experience-showcase__stack {
  display: grid;
  align-items: start;
  padding-top: 26px;
}

.experience-showcase__stack a:first-child { width: 88%; }

.experience-showcase__stack a:last-child {
  width: 68%;
  justify-self: end;
  margin-top: -34px;
  border: 1px solid rgba(246, 218, 158, .48);
}

.experience-showcase__stack a:first-child img { aspect-ratio: 4 / 3; }
.experience-showcase__stack a:last-child img { aspect-ratio: 1365 / 1706; }

/* Both scene films are vertical 9:16 assets, so both receive portrait frames. */
.spa-story__media {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 2vw, 26px);
}

.spa-story__film,
.spa-story__film--spa-portrait,
.spa-story__film--garden-portrait {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  transform: none;
}

.spa-story__film video {
  object-fit: cover;
  object-position: 50% 50%;
}

.spa-story__film figcaption { z-index: 2; }

.spa-story__night {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 9;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
}

.site-footer--complete {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) repeat(2, minmax(180px, .85fr));
  align-items: start;
  gap: 34px clamp(32px, 6vw, 90px);
  padding-top: 58px;
  padding-bottom: 58px;
  text-transform: none;
  letter-spacing: 0;
}

.site-footer__brand,
.site-footer__links,
.site-footer__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.site-footer__links-all {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(246, 241, 231, .13);
}

.site-footer__links-all a {
  font-size: .76rem;
}

.site-footer__brand strong {
  color: #f6f1e7;
  font: 400 1.55rem/1.1 var(--serif);
}

.site-footer--complete a {
  min-height: 44px;
  color: rgba(246, 241, 231, .76);
  text-underline-offset: 5px;
}

/* Keep consent permanently reachable without masking the visual story. */
.ddg-consent-v22__manage {
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  left: auto;
  width: 92px;
  min-width: 92px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 0;
}

.ddg-consent-v22__manage::after {
  content: "Cookies";
  font-size: .7rem;
  letter-spacing: .02em;
}

@media (max-width: 1060px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    overflow: visible;
  }

  .nav-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 16px;
    left: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 18px 16px;
    border: 1px solid rgba(231, 189, 112, .3);
    background: var(--menu-surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  }

  .site-header.is-menu-open .site-nav { display: flex; }
  .site-nav a { min-height: 50px; }

  .spa-story__media {
    width: min(760px, 100%);
    margin: 58px auto 0;
  }
}

@media (max-width: 720px) {
  .site-header { grid-template-columns: auto auto 1fr; }
  .nav-toggle { justify-self: start; }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .header-action {
    justify-self: end;
    min-height: 46px;
    padding: 0 13px;
    font-size: 10px;
    letter-spacing: .045em;
  }

  .hero-v3 {
    min-height: max(780px, 100svh);
    align-items: end;
  }

  .day-reel {
    padding-top: 92px;
  }

  .hero-v3 .hero__veil {
    background:
      linear-gradient(180deg, rgba(4, 14, 9, .18) 0%, rgba(4, 14, 9, .03) 30%, rgba(4, 14, 9, .76) 60%, rgba(4, 14, 9, .96) 100%);
  }

  .hero-v3__film {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .hero-v3__film video {
    object-fit: contain;
    object-position: 50% 48%;
  }

  .hero-v3 .hero__poster img {
    filter: brightness(.58) saturate(.82);
    transform: scale(1.04);
  }

  .hero-v3 .hero__content {
    width: calc(100% - 36px);
    margin: 0 18px 146px;
  }

  .hero-v3 h1 {
    max-width: 8.6ch;
    font-size: clamp(3.1rem, 14vw, 4.35rem);
    line-height: .9;
  }

  .day-reel__rail {
    display: flex;
    gap: 14px;
    padding: 0 20px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .day-reel .reel-panel,
  .day-reel .reel-panel:nth-child(n) {
    flex: 0 0 min(86vw, 350px);
    min-height: 0;
    scroll-snap-align: center;
  }

  .reel-panel--garden { aspect-ratio: 20 / 9; }
  .reel-panel--night { aspect-ratio: 7 / 3; }
  .reel-panel--spa,
  .reel-panel--dusk { aspect-ratio: 4 / 3; }
  .reel-panel__copy p { display: none; }

  .ddg-consent-v22__manage {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: auto;
    min-height: 44px;
    padding: 0 13px;
    font-size: .72rem;
  }

  .google-proof {
    min-height: 0;
    display: block;
    padding-top: 56.25vw;
    background: #07120d;
  }

  .google-proof > img {
    z-index: 0;
    bottom: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .google-proof__veil {
    z-index: 1;
    bottom: auto;
    height: 56.25vw;
    background: linear-gradient(180deg, transparent 48%, #07120d 100%);
  }

  .google-proof__content {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 52px 20px 82px;
    background: #07120d;
  }

  .stay-paths {
    min-height: 0;
    display: block;
    padding-top: 75vw;
    background: #10291d;
  }

  .stay-paths__scene {
    bottom: auto;
    height: 75vw;
  }

  .stay-paths__scene img {
    object-position: 50% 50%;
  }

  .stay-paths::after {
    bottom: auto;
    height: 75vw;
    background: linear-gradient(180deg, transparent 40%, #10291d 100%);
  }

  .stay-paths__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 60px 18px 82px;
    background: #10291d;
  }

  .experience-links {
    display: grid;
    gap: 4px;
  }

  .experience-showcase {
    display: block;
    margin-top: 34px;
  }

  .experience-showcase__stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    gap: 10px;
    margin-top: 10px;
    padding: 0;
  }

  .experience-showcase__stack a:first-child,
  .experience-showcase__stack a:last-child {
    width: 100%;
    margin: 0;
  }

  .experience-showcase strong { font-size: clamp(1.25rem, 6vw, 1.75rem); }
  .experience-showcase small { display: none; }

  .cottage-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .cottage-card {
    width: 100%;
    min-width: 0;
    flex: none;
    scroll-snap-align: none;
  }

  .cottage-card img {
    height: auto;
    aspect-ratio: auto;
  }

  .spa-story__media {
    min-height: 0;
    display: flex;
    align-items: start;
    gap: 10px;
    margin-right: -20px;
    padding-right: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .spa-story__film {
    flex: 0 0 min(82vw, 330px);
    scroll-snap-align: start;
  }

  .spa-story__night {
    flex: 0 0 min(92vw, 520px);
    aspect-ratio: 20 / 9;
    scroll-snap-align: start;
  }

  .finale {
    min-height: 0;
    display: block;
    padding-top: 56.25vw;
    background: #06120d;
  }

  .finale > img {
    z-index: 0;
    bottom: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: 50% 50%;
  }

  .finale__veil {
    z-index: 1;
    bottom: auto;
    height: 56.25vw;
    background: linear-gradient(180deg, transparent 35%, #06120d 100%);
  }

  .finale__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 48px 20px 78px;
    background: #06120d;
  }

  .site-footer--complete {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 46px 20px;
  }

  .site-footer__links-all {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .ddg-consent-v22__manage {
    width: 82px;
    min-width: 82px;
    font-size: 0;
  }

  .ddg-consent-v22__manage::after {
    content: "Cookies";
    font-size: .68rem;
    letter-spacing: .02em;
  }
}

@media (max-width: 420px) {
  .brand__text { display: none; }
  .hero-v3 .hero__content { margin-bottom: 138px; }
  .hero-v3 h1 { font-size: clamp(2.9rem, 13.4vw, 3.65rem); }
  .hero__trust { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v3__film video { display: none; }
  .hero-v3__film {
    background-image: url("../media/hero/ddg-hero-garden-sky-spa-night-portrait-poster-v2.webp");
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { transition: none; }
}