/* ==========================================================================
   Star Studded Nights — Homepage prototype styles
   --------------------------------------------------------------------------
   theme.css is the live site's compiled stylesheet (Tailwind utilities +
   theme components + Elementor/flatpickr). This file only adds the small
   amount of scaffolding that Elementor's page wrappers used to provide, plus
   prototype-specific sections added during the redesign.
   ========================================================================== */

/* ---- Section wrappers (replace Elementor section/column wrappers) -------- */
.ssn-section { position: relative; }
.ssn-section--padded { padding: 10px; }            /* Elementor default column gap */
.ssn-section--faq { padding: 0 0 150px; }
@media (max-width: 1024px) { .ssn-section--faq { padding: 0 0 100px; } }
@media (max-width: 767px)  { .ssn-section--faq { padding: 0 0 80px; } }

/* ---- Hero: full-height section with YouTube background video ------------ */
.ssn-hero-section {
  position: relative;
  background: #000 url(../img/hero-poster.jpg) center / cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}
.ssn-hero-section > .hero-banner-cmn { position: relative; z-index: 1; width: 100%; }
.ssn-bg-video {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 1s ease;
}
.ssn-bg-video.is-ready { opacity: 1; }
.ssn-bg-video iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* cover the section while keeping 16:9 (matches the live Elementor sizing) */
  width:  max(100%, calc(100vh * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  max-width: none; border: 0;
}

/* ---- Footer: starfield canvas + content overlay --------------------------
   On the live site the footer has no height of its own; the canvases simply
   overflow it. Here the footer gets an explicit height (set from JS to match
   the canvas) so layout is deterministic. */
footer.footer { overflow: hidden; min-height: 500px; background: #141414; }
footer.footer canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- Welcome popup close button (unstyled button reset) ----------------- */
#close-popup { background: transparent; border: 0; cursor: pointer; line-height: 1; }

/* ==========================================================================
   REDESIGN — Section 1: Hero refinements
   ========================================================================== */
/* Readability: two light, localised scrims (left + bottom) instead of darkening
   the whole video. The upper-right of the frame stays bright. */
.home-banner:before {
  background: linear-gradient(to right, rgba(8,10,20,.42) 0%, rgba(8,10,20,.18) 46%, rgba(8,10,20,0) 76%);
}
.home-banner:after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(8,10,20,.60) 0%, rgba(8,10,20,.26) 32%, rgba(8,10,20,0) 62%);
}

/* Typography: one-line display title, light editorial subhead, eyebrow with rule */
.home-banner-wrapper { max-width: 60rem; }
.hero-eyebrow {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.75rem; letter-spacing: .22em; opacity: .95;
}
.hero-eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: rgba(255,255,255,.8); flex: 0 0 auto; }
.banner-title {
  font-size: clamp(2.75rem, 6.4vw, 6.5rem);
  line-height: .98; letter-spacing: -.005em;
  margin-bottom: 1.5rem; text-wrap: balance;
}
.banner-sub-title {
  font-size: clamp(1.1875rem, 1.7vw, 1.75rem);
  line-height: 1.45; font-weight: 600; letter-spacing: .01em;
  color: #fff; margin-bottom: 0; max-width: 36rem; text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* Desktop layout: text block centred in the free space, booking bar anchored low */
@media (min-width: 1025px) {
  .hero-banner-cmn .inner-area {
    height: auto; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: 3.75rem;
  }
  .hero-banner-cmn article.home-banner-wrapper {
    flex: 1 1 auto; height: auto; width: 100%;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 8.5rem !important; padding-bottom: 3rem !important;
  }
  .search-form.search-bar { position: relative; bottom: auto; left: auto; margin-bottom: 0; }
}
/* Mobile: keep the theme's stacked layout; lift the text slightly on short screens */
@media (max-width: 1024px) {
  .home-banner-wrapper { top: min(230px, 26vh) !important; }
  .hero-eyebrow { margin-bottom: 1.25rem; }
  .banner-title { margin-bottom: 1rem; }
}
@media (max-width: 768px) {
  .banner-title { font-size: clamp(2.5rem, 11.5vw, 3.25rem); }
  .banner-sub-title { font-size: 1.125rem; max-width: 22rem; }
}

/* Cinematic entrance: eyebrow → title → subhead → booking bar.
   Gated on html.js so content is visible without JS; .is-settled is a timed
   fallback that forces the final state even if transitions never run. */
.js .hero-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0s);
}
.js .hero-in .hero-reveal { opacity: 1; transform: none; }
.js .hero-reveal.is-settled { transition: none; opacity: 1; transform: none; }
.home-banner .hero-reveal { opacity: 1 !important; transform: none !important; }
.ssn-bg-video { transition-duration: 1.6s; }
.ssn-bg-video.is-settled { transition: none; opacity: 1; }

/* ---- Home Banner Staggered Entrance (City Hero Style) -------------------- */
@keyframes cx-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.home-banner .hero-eyebrow {
  animation: cx-rise 1.1s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: 0.15s;
}

.home-banner .banner-title {
  animation: cx-rise 1.1s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: 0.28s;
}

.home-banner .banner-sub-title {
  animation: cx-rise 1.1s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: 0.46s;
}

.home-banner .search-form {
  animation: cx-rise 1.1s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: 0.62s;
}

.elementor-editor-active .home-banner .hero-eyebrow,
.elementor-editor-active .home-banner .banner-title,
.elementor-editor-active .home-banner .banner-sub-title,
.elementor-editor-active .home-banner .search-form {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-banner .hero-eyebrow,
  .home-banner .banner-title,
  .home-banner .banner-sub-title,
  .home-banner .search-form {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   REDESIGN — Section 2: Introduction (About Star Studded Nights)
   ========================================================================== */
.ssn-intro { background: #fff; padding-top: clamp(4.5rem, 7.5vw, 7.5rem); }   /* side padding comes from .px-spacex */
/* breathing room before the Accommodations carousel (~50px desktop, ~32px phones) */
.ssn-intro { padding-bottom: clamp(2rem, 3.5vw, 3.125rem); }
.ssn-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 7.5rem);
  align-items: start;
}
.ssn-eyebrow {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.75rem;
  font-family: var(--primary-font); font-weight: 700; font-size: .75rem; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; color: #222640;
}
.ssn-eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: #222640; opacity: .55; flex: 0 0 auto; }
.ssn-intro__title {
  font-size: clamp(2.25rem, 4.1vw, 4rem);
  line-height: 1.08; letter-spacing: -.005em;
  margin: 0; max-width: 15ch; text-wrap: balance;
}
.ssn-intro__body { padding-top: 3.35rem; }     /* aligns the paragraph with the title's cap line */
.ssn-intro__text { font-size: 1.0625rem; line-height: 1.9; margin: 0; max-width: 36rem; }
.ssn-intro__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2rem; justify-content: space-between; max-width: 36rem;
  margin-top: 2.25rem; padding-top: 1.625rem;
  border-top: 1px solid #e6e6e6;
}

/* Google rating badge (subtle; figures are a placeholder until verified) */
.ssn-rating {
  display: inline-flex; align-items: center; gap: .625rem;
  color: #000; text-decoration: none;
  font-family: var(--primary-font);
  transition: opacity .3s ease;
}
.ssn-rating:hover { opacity: .7; }
.ssn-rating__stars { display: inline-flex; gap: 2px; }
.ssn-rating__stars svg { width: .875rem; height: .875rem; fill: #e0ab2e; }
.ssn-rating__score { font-weight: 600; font-size: 1rem; line-height: 1; margin-top: .125rem; }
.ssn-rating__label { font-weight: 400; font-size: .75rem; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: #5a5a5a; margin-top: .125rem; }

/* Quiet text link, mirrors the main-menu underline hover */
.ssn-textlink {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--primary-font); font-weight: 700; font-size: .75rem; line-height: 1;
  letter-spacing: .125rem; text-transform: uppercase; color: #000; text-decoration: none;
  padding-bottom: .375rem;
}
.ssn-textlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: #000; opacity: .25; transition: opacity .3s ease;
}
.ssn-textlink:hover::after { opacity: 1; }
.ssn-textlink__arrow { transition: transform .3s ease; }
.ssn-textlink:hover .ssn-textlink__arrow { transform: translateY(3px); }

@media (max-width: 1024px) {
  .ssn-intro__grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .ssn-intro__body { padding-top: 0; }
  .ssn-intro__title { max-width: 18ch; }
  .ssn-intro__text { max-width: 40rem; }
}
@media (max-width: 768px) {
  .ssn-intro { padding-top: 4rem; }
  .ssn-intro__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; max-width: none; }
  .ssn-intro__text { font-size: 1rem; line-height: 1.85; }
  .ssn-intro__meta { gap: 1rem 1.5rem; }
}

/* ==========================================================================
   Scroll-triggered reveals (shared by the redesigned sections)
   ========================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-inview { opacity: 1; transform: none; }
/* word-by-word mask reveal for headings (JS wraps each word in .ssn-word) */
[data-reveal].ssn-words { opacity: 1; transform: none; transition: none; }
.ssn-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .12em .02em .14em; margin: -.12em -.02em -.14em; }
.ssn-word > span {
  display: inline-block; transform: translateY(112%);
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 70ms + var(--reveal-delay, 0s));
}
.is-inview .ssn-word > span { transform: none; }

[data-reveal].is-settled, .is-settled .ssn-word > span { transition: none; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-reveal { transition: none; opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ssn-word > span { transform: none; transition: none; }
}

/* Disable all reveal animations on Book Now / Booking pages and WPBS search results */
body.booking [data-reveal],
body.page-id-17 [data-reveal],
body[class*="book-now"] [data-reveal],
body:is(.booking, .page-id-17, [class*="book-now"]) [data-reveal],
.wpbs_s-search-widget-results [data-reveal],
.wpbs-search-container [data-reveal],
.ssn-tent__media,
.ssn-tent__info {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  visibility: visible !important;
}

body:is(.booking, .page-id-17, [class*="book-now"]) .ssn-word > span {
  transform: none !important;
  transition: none !important;
}

/* Ensure all widgets and animations are fully visible inside Elementor Editor preview */
body.elementor-editor-active [data-reveal],
body.elementor-editor-active .hero-reveal,
body.elementor-editor-active .cx-r,
body.elementor-editor-active .ssn-word > span,
body.elementor-editor-active .v2-cta__rule,
body.elementor-editor-active .v2-map,
body.elementor-editor-active .v2-map__route path,
body.elementor-editor-active .v2-map__city,
body.elementor-editor-active .v2-map__pulse,
body.elementor-editor-active .ssn-cta__bg,
.elementor-editor-active [data-reveal],
.elementor-editor-active .hero-reveal,
.elementor-editor-active .cx-r,
.elementor-editor-active .ssn-word > span,
.elementor-editor-active .v2-cta__rule,
.elementor-editor-active .v2-map,
.elementor-editor-active .v2-map__route path,
.elementor-editor-active .v2-map__city,
.elementor-editor-active .v2-map__pulse,
.elementor-editor-active .ssn-cta__bg,
.elementor-editor-active .ssn-intro [data-reveal],
.elementor-editor-active .ssn-loc [data-reveal],
.elementor-editor-active .ssn-cta [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

/* ==========================================================================
   REDESIGN — Section 3: Explore Our Accommodations (snap carousel)
   --------------------------------------------------------------------------
   Native scroll-snap track: desktop shows 3 cards + a peek of the 4th,
   tablet 2 + peek, mobile 1 + peek. Card width is derived from the viewport,
   the content edge (--acc-edge) and the gap, so the first card lines up with
   the section heading and the overflow bleeds to the right edge.
   ========================================================================== */
.ssn-acc {
  --acc-n: 3; --acc-peek: .42; --acc-gap: 1.75rem;
  --acc-edge: calc(var(--space-x) + .75rem);     /* refined to the exact px by JS */
  --acc-card-w: calc((var(--acc-vw, 100vw) - var(--acc-edge) - var(--acc-n) * var(--acc-gap)) / (var(--acc-n) + var(--acc-peek)));
  padding-top: clamp(4.5rem, 7vw, 7rem);
  background: #fff;
}
@media (min-width: 1680px) { .ssn-acc { --acc-n: 4; --acc-peek: .3; } }
@media (max-width: 1024px) { .ssn-acc { --acc-n: 2; --acc-peek: .35; --acc-gap: 1.5rem; } }
@media (max-width: 768px)  { .ssn-acc { --acc-n: 1; --acc-peek: .22; --acc-gap: 1rem; } }

/* header row: copy left, arrows right (arrows drop below the copy on phones) */
.ssn-acc__headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.75rem; }
.ssn-acc__intro { max-width: 46rem; }
.ssn-acc__title { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.005em; margin: 0 0 1.25rem; text-wrap: balance; }
.ssn-acc__text { font-size: 1.0625rem; line-height: 1.8; margin: 0; max-width: 38rem; }
.ssn-acc__nav { display: flex; gap: .75rem; flex: 0 0 auto; padding-bottom: .375rem; }
.ssn-acc__arrow {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.35); background: #fff; color: #000;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.ssn-acc__arrow svg { width: 1.125rem; height: 1.125rem; }
.ssn-acc__arrow:hover:not([disabled]) { background: #000; color: #fff; border-color: #000; }
.ssn-acc__arrow:focus-visible { outline: 2px solid #222640; outline-offset: 3px; }
.ssn-acc__arrow[disabled] { opacity: .28; cursor: default; }

/* track */
.ssn-acc__viewport { position: relative; }
.ssn-acc__track {
  position: relative;
  display: flex; gap: var(--acc-gap);
  padding: .25rem var(--acc-edge) .5rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--acc-edge);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ssn-acc__track::-webkit-scrollbar { display: none; }
.ssn-acc__track:focus-visible { outline: 2px solid #222640; outline-offset: -2px; }
.ssn-acc__card {
  flex: 0 0 var(--acc-card-w); min-width: 0;
  scroll-snap-align: start;
}
.ssn-acc__card:last-child { scroll-snap-align: end; }
@media (max-width: 768px) { .ssn-acc__card { scroll-snap-stop: always; } }

/* card */
.ssn-acc__media { display: block; aspect-ratio: 5 / 4; overflow: hidden; background: #efede8; }
.ssn-acc__media img {
  width: 100%; height: 100% !important; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.ssn-acc__card:hover .ssn-acc__media img,
.ssn-acc__card:focus-within .ssn-acc__media img { transform: scale(1.04); }
.ssn-acc__body { padding: 1.375rem 0 0; }
.ssn-acc__name { font-size: 1.5rem; line-height: 1.2; margin: 0 0 .5rem; }
.ssn-acc__beds {
  margin: 0 0 .75rem;
  font-family: var(--primary-font); font-weight: 600; font-size: .6875rem; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase; color: #5a5a5a;
}
.ssn-acc__detail { font-size: .9375rem; line-height: 1.65; margin: 0 0 1.125rem; max-width: 24rem; }

.ssn-acc__link { font-size: .6875rem; }
.ssn-textlink__arrow--right { transition: transform .3s ease; }
.ssn-textlink:hover .ssn-textlink__arrow--right { transform: translateX(4px) !important; }

/* progress line (thumb = visible fraction, moves with the scroll position) */
.ssn-acc__progress {
  position: relative; height: 1px; background: #e6e6e6; overflow: hidden;
  margin: 2rem var(--acc-edge) 0;
}
.ssn-acc__progress-bar {
  position: absolute; left: 0; top: 0; height: 100%; width: 40%;
  background: #000; transition: transform .35s ease, width .35s ease;
}

/* bottom CTA */
.ssn-acc__foot { margin-top: 2.75rem; text-align: center; }
.ssn-acc__cta {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 1.1875rem 2.375rem; border: 1px solid rgba(0,0,0,.4); border-radius: 999px;
  font-family: var(--primary-font); font-weight: 700; font-size: .75rem; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: #000; text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.ssn-acc__cta:hover { background: #000; color: #fff; border-color: #000; }
.ssn-acc__cta-arrow { transition: transform .3s ease; }
.ssn-acc__cta:hover .ssn-acc__cta-arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
  .ssn-acc__headrow { margin-bottom: 2.25rem; }
}
@media (max-width: 768px) {
  .ssn-acc { padding-top: 4rem; }
  .ssn-acc__headrow { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.75rem; }
  .ssn-acc__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; margin-bottom: 1rem; }
  .ssn-acc__text { font-size: 1rem; line-height: 1.75; }
  .ssn-acc__arrow { width: 2.75rem; height: 2.75rem; }
  .ssn-acc__name { font-size: 1.375rem; }
  .ssn-acc__progress { margin-top: 1.5rem; }
  .ssn-acc__foot { margin-top: 2.25rem; }
  .ssn-acc__cta { padding: 1.0625rem 1.75rem; font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-acc__track { scroll-behavior: auto; }
  .ssn-acc__media img, .ssn-acc__progress-bar { transition: none; }
}

/* ==========================================================================
   REDESIGN — Section 4: Amenities (What Makes Your Stay Special)
   ========================================================================== */
.ssn-amen { background: #fff; padding-top: clamp(4.5rem, 7vw, 7rem); }
.ssn-amen__head { max-width: 46rem; margin-bottom: 2.75rem; }
.ssn-amen__title { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.005em; margin: 0; text-wrap: balance; }

/* 3 × 2 grid of hairline-topped rows: icon left, label right */
.ssn-amen__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem); row-gap: 2rem;
}
.ssn-amen__item {
  display: flex; align-items: center; gap: 1.125rem;
  padding-top: 1.625rem; border-top: 1px solid #e6e6e6;
}
.ssn-amen__icon { flex: 0 0 auto; width: 1.875rem; height: 1.875rem; color: #222640; }
.ssn-amen__icon svg { width: 100%; height: 100%; display: block; }
.ssn-amen__label { font-size: 1.125rem; line-height: 1.3; margin: 0; }

/* complimentary extras band */
.ssn-extras {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem;
  margin-top: 3.25rem; padding: 1.875rem 0;
  border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
}
.ssn-extras__lead { display: flex; align-items: center; gap: 1.125rem; flex: 0 0 auto; }
.ssn-extras__icon { width: 1.75rem; height: 1.75rem; color: #e0ab2e; flex: 0 0 auto; }
.ssn-extras__icon svg { width: 100%; height: 100%; display: block; }
.ssn-extras__eyebrow {
  margin: 0 0 .375rem;
  font-family: var(--primary-font); font-weight: 700; font-size: .6875rem; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: #5a5a5a;
}
.ssn-extras__title { font-size: 1.5rem; line-height: 1.2; margin: 0; }
.ssn-extras__text { font-size: 1.0625rem; line-height: 1.8; margin: 0; max-width: 36rem; }

@media (max-width: 1024px) {
  .ssn-amen__grid { column-gap: 2rem; }
  .ssn-amen__label { font-size: 1.0625rem; }
  .ssn-extras { flex-wrap: wrap; }
  .ssn-extras__text { flex: 1 1 100%; }
}
@media (max-width: 768px) {
  .ssn-amen { padding-top: 4rem; }
  .ssn-amen__head { margin-bottom: 2rem; }
  .ssn-amen__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; }
  /* 2 × 3 on phones: icon above label */
  .ssn-amen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 1.75rem; }
  .ssn-amen__item { flex-direction: column; align-items: flex-start; gap: .875rem; padding-top: 1.25rem; }
  .ssn-amen__icon { width: 1.625rem; height: 1.625rem; }
  .ssn-amen__label { font-size: 1rem; line-height: 1.3; }
  .ssn-extras { flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 2.5rem; padding: 1.5rem 0; }
  .ssn-extras__title { font-size: 1.375rem; }
  .ssn-extras__text { font-size: 1rem; line-height: 1.75; }
}

/* ==========================================================================
   REDESIGN — Section 5: Experiences (four image-led cards)
   Desktop 4-up, tablet 2-up, phones become a swipeable snap row.
   ========================================================================== */
.ssn-exp { background: #fff; padding-top: clamp(4.5rem, 7vw, 7rem); }
.ssn-exp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.75rem; }
.ssn-exp__title { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.005em; margin: 0; max-width: 40rem; text-wrap: balance; }
.ssn-exp__hint { font-family: var(--primary-font); font-weight: 400; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #5a5a5a; margin: 0; padding-bottom: .5rem; }

.ssn-exp__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.ssn-exp__card { display: block; color: #000; text-decoration: none; outline: none; }
.ssn-exp__card:focus-visible .ssn-exp__media { outline: 2px solid #222640; outline-offset: 3px; }

.ssn-exp__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #efede8; }
.ssn-exp__media img {
  width: 100%; height: 100% !important; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.ssn-exp__media::after {                       /* soft foot gradient so the numeral and edge read on any photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,10,20,.30) 0%, rgba(8,10,20,0) 42%);
  opacity: .85; transition: opacity .6s ease;
}
.ssn-exp__card:hover .ssn-exp__media img,
.ssn-exp__card:focus-visible .ssn-exp__media img { transform: scale(1.05); }
.ssn-exp__card:hover .ssn-exp__media::after { opacity: 1; }
.ssn-exp__index {
  position: absolute; left: 1.125rem; bottom: 1rem; z-index: 1;
  font-family: var(--primary-font); font-weight: 700; font-size: .6875rem; line-height: 1;
  letter-spacing: .22em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

.ssn-exp__body { padding-top: 1.25rem; }
.ssn-exp__name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: 1.375rem; line-height: 1.2; margin: 0 0 .5rem;
}
.ssn-exp__arrow { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; align-self: center; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.ssn-exp__card:hover .ssn-exp__arrow { transform: translateX(6px); }
.ssn-exp__text { font-size: .9375rem; line-height: 1.65; margin: 0; max-width: 22rem; }
.ssn-exp__rule { position: relative; height: 1px; background: #e6e6e6; margin-top: 1.125rem; overflow: hidden; }
.ssn-exp__rule::after {
  content: ""; position: absolute; inset: 0; background: #000;
  transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.ssn-exp__card:hover .ssn-exp__rule::after,
.ssn-exp__card:focus-visible .ssn-exp__rule::after { transform: scaleX(1); }

.ssn-exp__progress { display: none; }

@media (max-width: 1024px) {
  .ssn-exp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .ssn-exp__name { font-size: 1.25rem; }
}
@media (max-width: 768px) {
  .ssn-exp { padding-top: 4rem; }
  .ssn-exp__head { margin-bottom: 1.75rem; align-items: flex-end; }
  .ssn-exp__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; }
  /* swipeable row that bleeds to the screen edges, first card aligned to the text */
  .ssn-exp__grid {
    --exp-edge: var(--space-x);
    display: flex; gap: 1rem;
    margin: 0 calc(-1 * var(--exp-edge)); padding: .25rem var(--exp-edge) .5rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--exp-edge);
    scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ssn-exp__grid::-webkit-scrollbar { display: none; }
  .ssn-exp__item { flex: 0 0 min(80vw, 20rem); scroll-snap-align: start; scroll-snap-stop: always; }
  .ssn-exp__item:last-child { scroll-snap-align: end; }
  .ssn-exp__name { font-size: 1.25rem; }
  .ssn-exp__progress { display: block; position: relative; height: 1px; background: #e6e6e6; overflow: hidden; margin-top: 1.5rem; }
  .ssn-exp__progress-bar { position: absolute; left: 0; top: 0; height: 100%; width: 25%; background: #000; transition: transform .35s ease, width .35s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-exp__grid { scroll-behavior: auto; }
  .ssn-exp__media img, .ssn-exp__arrow, .ssn-exp__rule::after, .ssn-exp__progress-bar { transition: none; }
}

/* ==========================================================================
   REDESIGN — Section 6: Guest Reviews (Google)
   Same snap-rail mechanics as the accommodations carousel; quotes are
   hairline-topped text blocks, not boxed widgets.
   ========================================================================== */
.ssn-rev {
  --rev-n: 3; --rev-peek: .35; --rev-gap: clamp(2rem, 3.5vw, 3.5rem);
  --rev-edge: var(--space-x);                     /* refined to exact px by JS */
  --rev-card-w: calc((var(--rev-vw, 100vw) - var(--rev-edge) - var(--rev-n) * var(--rev-gap)) / (var(--rev-n) + var(--rev-peek)));
  background: #fff; padding-top: clamp(4.5rem, 7vw, 7rem);
}
@media (min-width: 1680px) { .ssn-rev { --rev-n: 4; --rev-peek: .3; } }
@media (max-width: 1024px) { .ssn-rev { --rev-n: 2; --rev-peek: .3; --rev-gap: 2rem; } }
@media (max-width: 768px)  { .ssn-rev { --rev-n: 1; --rev-peek: .18; --rev-gap: 1.25rem; } }

.ssn-rev__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; margin-bottom: 3rem; }
.ssn-rev__title { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.005em; margin: 0; max-width: 40rem; text-wrap: balance; }

/* verified rating summary */
.ssn-rev__summary { flex: 0 0 auto; text-align: right; padding-bottom: .25rem; }
.ssn-rev__score { display: flex; align-items: center; justify-content: flex-end; gap: .875rem; margin-bottom: .5rem; }
.ssn-rev__num { font-size: 3rem; line-height: 1; letter-spacing: -.01em; }
.ssn-rev__stars, .ssn-rev__card-stars { display: inline-flex; gap: 3px; }
.ssn-rev__stars svg { width: 1.0625rem; height: 1.0625rem; fill: #e0ab2e; }
.ssn-rev__count {
  margin: 0 0 1rem;
  font-family: var(--primary-font); font-weight: 400; font-size: .75rem; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; color: #5a5a5a;
}

/* rail */
.ssn-rev__viewport { position: relative; }
.ssn-rev__track {
  position: relative; display: flex; gap: var(--rev-gap);
  padding: .25rem var(--rev-edge) .5rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rev-edge);
  scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ssn-rev__track::-webkit-scrollbar { display: none; }
.ssn-rev__track:focus-visible { outline: 2px solid #222640; outline-offset: -2px; }
.ssn-rev__card { flex: 0 0 var(--rev-card-w); min-width: 0; scroll-snap-align: start; border-top: 1px solid #e6e6e6; padding-top: 1.5rem; }
.ssn-rev__card:last-child { scroll-snap-align: end; }
@media (max-width: 768px) { .ssn-rev__card { scroll-snap-stop: always; } }

.ssn-rev__card-stars svg { width: .75rem; height: .75rem; fill: #e0ab2e; }
.ssn-rev__lead { font-size: 1.3125rem; line-height: 1.3; margin: 1rem 0 .875rem; text-wrap: balance; }
.ssn-rev__text { font-size: .9375rem; line-height: 1.75; margin: 0 0 1.375rem; color: #1a1a1a; }
.ssn-rev__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .75rem; font-family: var(--primary-font); }
.ssn-rev__name { font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #000; }
.ssn-rev__date { font-weight: 400; font-size: .75rem; letter-spacing: .06em; color: #5a5a5a; }

/* controls under the rail: arrows left, progress line filling the rest */
.ssn-rev__foot { margin-top: 2rem; }
.ssn-rev__controls { display: flex; align-items: center; gap: 1.75rem; }
.ssn-rev__nav { display: flex; gap: .75rem; flex: 0 0 auto; }
.ssn-rev__progress { position: relative; flex: 1 1 auto; height: 1px; background: #e6e6e6; overflow: hidden; }
.ssn-rev__progress-bar { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: #000; transition: transform .35s ease, width .35s ease; }

@media (max-width: 1024px) {
  .ssn-rev__head { margin-bottom: 2.5rem; }
}
@media (max-width: 768px) {
  .ssn-rev { padding-top: 4rem; }
  .ssn-rev__head { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.75rem; }
  .ssn-rev__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; }
  .ssn-rev__summary { text-align: left; }
  .ssn-rev__score { justify-content: flex-start; }
  .ssn-rev__num { font-size: 2.5rem; }
  .ssn-rev__lead { font-size: 1.1875rem; }
  .ssn-rev__foot { margin-top: 1.5rem; }
  .ssn-rev__arrow { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-rev__track { scroll-behavior: auto; }
  .ssn-rev__progress-bar { transition: none; }
}

/* ==========================================================================
   REDESIGN — Section 7: Location & Driving Times
   Split: copy left, map right (muted, colours in on hover) with the address
   beneath it; then a full-width strip of large driving-time figures.
   ========================================================================== */
.ssn-loc { background: #fff; padding-top: clamp(4.5rem, 7vw, 7rem); padding-bottom: clamp(4.5rem, 7vw, 7rem); }
.ssn-loc__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  column-gap: clamp(2.5rem, 6vw, 7rem); align-items: center;
}
.ssn-loc__title { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.005em; margin: 0 0 1.5rem; max-width: 17ch; text-wrap: balance; }
.ssn-loc__text { font-size: 1.0625rem; line-height: 1.9; margin: 0; max-width: 32rem; }

/* map */
.ssn-loc__map {
  position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: #efede8;
  outline: none;
}
.ssn-loc__map img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) sepia(.14) contrast(1.02) brightness(1.03);
  transform: scale(1.02);
  transition: filter 1s ease, transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.ssn-loc__map:hover img, .ssn-loc__map:focus-visible img { filter: none; transform: scale(1.05); }
.ssn-loc__map:focus-visible { outline: 2px solid #222640; outline-offset: 3px; }
.ssn-loc__marker { position: absolute; left: 56.3%; top: 31.2%; width: 0; height: 0; }
.ssn-loc__marker-dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: #222640; box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0,0,0,.25);
}
.ssn-loc__marker-ring {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(34,38,64,.55); animation: ssnPing 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes ssnPing { 0% { transform: scale(.35); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(1.15); opacity: 0; } }
.ssn-loc__maptag {
  position: absolute; left: 1.125rem; bottom: 1rem;
  font-family: var(--primary-font); font-weight: 700; font-size: .625rem; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; color: #222640;
  background: rgba(255,255,255,.88); padding: .5rem .75rem;
}
/* address row beneath the map */
.ssn-loc__address {
  display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap;
  padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid #e6e6e6;
}
.ssn-loc__pin { width: 1.375rem; height: 1.375rem; color: #222640; flex: 0 0 auto; }
.ssn-loc__pin svg { width: 100%; height: 100%; display: block; }
.ssn-loc__addr { font-style: normal; font-size: .9375rem; line-height: 1.5; margin: 0; flex: 1 1 12rem; }
.ssn-loc__directions { flex: 0 0 auto; }

/* driving-time strip */
.ssn-loc__times { margin-top: 3rem; }
.ssn-loc__times-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.75rem; }
.ssn-loc__times-label {
  margin: 0; flex: 0 0 auto;
  font-family: var(--primary-font); font-weight: 700; font-size: .6875rem; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; color: #222640;
}
.ssn-loc__times-rule { flex: 1 1 auto; height: 1px; background: #e6e6e6; }
.ssn-loc__times-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ssn-loc__time { padding: .25rem 1.25rem .25rem 1.5rem; border-left: 1px solid #e6e6e6; display: flex; flex-direction: column; gap: .625rem; }
.ssn-loc__time:first-child { border-left: 0; padding-left: 0; }
.ssn-loc__value { font-size: 1.875rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.ssn-loc__unit { font-size: 1rem; font-weight: 300; letter-spacing: 0; }
.ssn-loc__pre { font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; vertical-align: .35em; margin-right: .125rem; }
.ssn-loc__city { font-family: var(--primary-font); font-weight: 600; font-size: .6875rem; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #5a5a5a; }

@media (max-width: 1024px) {
  .ssn-loc__grid { grid-template-columns: 1fr; row-gap: 2.5rem; align-items: start; }
  .ssn-loc__title { max-width: 18ch; }
  .ssn-loc__text { max-width: 38rem; }
  .ssn-loc__map { aspect-ratio: 16 / 10; }
  .ssn-loc__marker { top: 26%; }      /* pin position for the 16:10 crop */
  .ssn-loc__times { margin-top: 3rem; }
  .ssn-loc__times-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .ssn-loc__time:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 768px) {
  .ssn-loc { padding-top: 4rem; padding-bottom: 4rem; }
  .ssn-loc__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; max-width: none; margin-bottom: 1.125rem; }
  .ssn-loc__text { font-size: 1rem; line-height: 1.8; }
  .ssn-loc__map { aspect-ratio: 4 / 3; }
  .ssn-loc__marker { top: 30%; }      /* pin position for the 4:3 crop */
  .ssn-loc__times { margin-top: 2.5rem; }
  .ssn-loc__times-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .ssn-loc__time { border-left: 0; padding: 1.125rem 0; border-top: 1px solid #e6e6e6; gap: .5rem; }
  .ssn-loc__time:nth-child(3n + 1) { padding-left: 0; }
  .ssn-loc__time:nth-child(2n) { padding-left: 1.25rem; border-left: 1px solid #e6e6e6; }
  .ssn-loc__value { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-loc__marker-ring { animation: none; opacity: .5; transform: none; }
  .ssn-loc__map img { transition: none; }
}

/* ==========================================================================
   REDESIGN — Section 8: Photo Gallery (filmstrip rail + full-screen viewer)
   ========================================================================== */
.ssn-gal {
  --gal-h: clamp(15rem, 31vw, 29rem);          /* uniform strip height; widths follow each photo's ratio */
  --gal-gap: clamp(.75rem, 1.2vw, 1.25rem);
  --gal-edge: var(--space-x);                  /* refined to exact px by JS */
  background: #fff; padding-top: clamp(4.5rem, 7vw, 7rem); padding-bottom: clamp(4.5rem, 7vw, 7rem);
}
.ssn-gal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.ssn-gal__title { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.005em; margin: 0; max-width: 40rem; text-wrap: balance; }
.ssn-gal__hint { margin: .875rem 0 0; font-family: var(--primary-font); font-weight: 400; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #5a5a5a; }
.ssn-gal__nav { display: flex; gap: .75rem; flex: 0 0 auto; padding-bottom: .375rem; }

.ssn-gal__viewport { position: relative; }
.ssn-gal__track {
  position: relative; display: flex; align-items: flex-start; gap: var(--gal-gap);
  padding: .25rem var(--gal-edge) .5rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gal-edge);
  scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ssn-gal__track::-webkit-scrollbar { display: none; }
.ssn-gal__track:focus-visible { outline: 2px solid #222640; outline-offset: -2px; }
.ssn-gal__item { flex: 0 0 auto; margin: 0; scroll-snap-align: start; width: calc(var(--gal-h) * var(--ar, 1.5)); max-width: calc(100vw - 2 * var(--gal-edge)); }
.ssn-gal__item:last-child { scroll-snap-align: end; }
.ssn-gal__open {
  display: block; width: 100%; height: var(--gal-h); overflow: hidden;
  padding: 0; border: 0; background: #efede8; cursor: zoom-in; position: relative;
}
.ssn-gal__open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.ssn-gal__open:hover img, .ssn-gal__open:focus-visible img { transform: scale(1.04); }
.ssn-gal__open:focus-visible { outline: 2px solid #222640; outline-offset: 3px; }
.ssn-gal__expand {
  position: absolute; right: .875rem; bottom: .875rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #000; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.ssn-gal__expand svg { width: 1rem; height: 1rem; }
.ssn-gal__open:hover .ssn-gal__expand, .ssn-gal__open:focus-visible .ssn-gal__expand { opacity: 1; transform: none; }
.ssn-gal__cap { margin: .75rem 0 0; font-family: var(--primary-font); font-weight: 400; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #5a5a5a; }
.ssn-gal__progress { position: relative; height: 1px; background: #e6e6e6; overflow: hidden; margin: 1.75rem var(--gal-edge) 0; }
.ssn-gal__progress-bar { position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: #000; transition: transform .35s ease, width .35s ease; }

@media (max-width: 768px) {
  .ssn-gal { padding-top: 4rem; padding-bottom: 4rem; --gal-h: 17rem; }
  .ssn-gal__head { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.75rem; }
  .ssn-gal__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; }
  .ssn-gal__item { scroll-snap-stop: always; }
  .ssn-gal__expand { opacity: 1; transform: none; width: 2rem; height: 2rem; }
  .ssn-gal__progress { margin-top: 1.5rem; }
}

/* ---- full-screen viewer ------------------------------------------------- */
.ssn-lightbox {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(8,10,20,.975); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease;
}
.ssn-lightbox[hidden] { display: none; }
.ssn-lightbox.is-open { opacity: 1; }
.ssn-lightbox__figure { margin: 0; width: min(92vw, 1400px); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.ssn-lightbox__img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto; display: block; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.ssn-lightbox__img.is-ready { opacity: 1; transform: none; }
.ssn-lightbox__cap {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  font-family: var(--primary-font); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.ssn-lightbox__count { font-weight: 600; letter-spacing: .18em; color: rgba(255,255,255,.6); }
.ssn-lightbox__btn {
  position: absolute; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.06); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.ssn-lightbox__btn svg { width: 1.125rem; height: 1.125rem; }
.ssn-lightbox__btn:hover { background: #fff; color: #000; border-color: #fff; }
.ssn-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ssn-lightbox__close { top: 1.25rem; right: 1.25rem; }
.ssn-lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.ssn-lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.ssn-lightbox__prev:hover { transform: translateY(-50%) translateX(-2px); }
.ssn-lightbox__next:hover { transform: translateY(-50%) translateX(2px); }
body.ssn-lightbox-open { overflow: hidden; }
@media (max-width: 768px) {
  .ssn-lightbox__figure { width: 100vw; padding: 0 1rem; }
  .ssn-lightbox__img { max-height: 70vh; }
  .ssn-lightbox__btn { width: 2.625rem; height: 2.625rem; }
  .ssn-lightbox__prev { left: .75rem; top: auto; bottom: 1.25rem; transform: none; }
  .ssn-lightbox__next { right: .75rem; top: auto; bottom: 1.25rem; transform: none; }
  .ssn-lightbox__prev:hover, .ssn-lightbox__next:hover { transform: none; }
  .ssn-lightbox__cap { flex-direction: column; gap: .375rem; padding-bottom: 3.5rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-gal__track { scroll-behavior: auto; }
  .ssn-gal__open img, .ssn-gal__expand, .ssn-lightbox, .ssn-lightbox__img, .ssn-gal__progress-bar { transition: none; }
}

/* ==========================================================================
   REDESIGN — Section 9: FAQ accordion (homepage essentials + faq.html)
   ========================================================================== */
.ssn-faqs { background: #fff; padding-top: clamp(4.5rem, 7vw, 7rem); padding-bottom: clamp(5rem, 8vw, 8.5rem); }
.ssn-faqs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.ssn-faqs__intro { position: sticky; top: 5rem; }
.ssn-faqs__title { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.005em; margin: 0 0 1.25rem; max-width: 12ch; text-wrap: balance; }
.ssn-faqs__text { font-size: 1.0625rem; line-height: 1.85; margin: 0; max-width: 24rem; }
.ssn-inline-link { color: #000; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,.35); }
.ssn-inline-link:hover { text-decoration-color: #000; }
.ssn-faqs__back { margin-top: 1.5rem; }
.ssn-faqs__all { margin-top: 2rem; }

/* list */
.ssn-acc-list { border-bottom: 1px solid #e6e6e6; }
.ssn-q { border-top: 1px solid #e6e6e6; }
.ssn-q__heading { margin: 0; font: inherit; }
.ssn-q__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem 0; background: none; border: 0; cursor: pointer; text-align: left; color: #000;
}
.ssn-q__btn:focus-visible { outline: 2px solid #222640; outline-offset: 2px; }
.ssn-q__label { font-family: var(--primary-font); font-weight: 400; font-size: 1.1875rem; line-height: 1.35; transition: color .3s ease; }
.ssn-q__btn:hover .ssn-q__label { color: #222640; }
.ssn-q__icon {
  position: relative; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.3); transition: background-color .35s ease, border-color .35s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.ssn-q__icon i { position: absolute; left: 50%; top: 50%; width: .75rem; height: 1px; background: #000; transform: translate(-50%, -50%); transition: transform .5s cubic-bezier(.22,.61,.36,1), background-color .35s ease; }
.ssn-q__icon i + i { transform: translate(-50%, -50%) rotate(90deg); }
.ssn-q__btn:hover .ssn-q__icon { border-color: #000; }
.ssn-q.is-open .ssn-q__icon { background: #000; border-color: #000; transform: rotate(180deg); }
.ssn-q.is-open .ssn-q__icon i { background: #fff; }
.ssn-q.is-open .ssn-q__icon i + i { transform: translate(-50%, -50%) rotate(0deg); }
/* smooth expand/collapse without measuring heights */
.ssn-q__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22,.61,.36,1); }
.ssn-q.is-open .ssn-q__panel { grid-template-rows: 1fr; }
.ssn-q__inner { overflow: hidden; min-height: 0; }
.ssn-q__inner > :first-child { margin-top: .125rem; }
.ssn-q__inner > :last-child { margin-bottom: 1.625rem; }
.ssn-q__inner p, .ssn-q__inner li { font-family: var(--primary-font); font-weight: 300; font-size: 1rem; line-height: 1.8; color: #1a1a1a; margin: 0 0 .75rem; max-width: 40rem; }
.ssn-q__inner ul { padding-left: 1.25rem; margin: 0 0 .75rem; list-style: disc; }
.ssn-q__inner em { font-style: italic; }
.ssn-q__inner a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.ssn-q__kv { display: flex; gap: 2.5rem; margin: 0 0 1rem; }
.ssn-q__kv div { display: flex; flex-direction: column; gap: .25rem; }
.ssn-q__kv dt { font-family: var(--primary-font); font-weight: 700; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: #5a5a5a; }
.ssn-q__kv dd { margin: 0; font-family: var(--primary-font); font-weight: 400; font-size: 1.375rem; line-height: 1; color: #000; }
.ssn-q__inner .ssn-q__inner-ul li { margin: 0; }

/* dedicated FAQ page */
.ssn-faqpage { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(5rem, 8vw, 8.5rem); }
body.ssn-faq-page .contact-fixed-btns { display: flex; }   /* theme hides it on .booking pages; keep the CTA */
.ssn-faq-page .header { border-bottom: 1px solid #ececec; }

@media (max-width: 1024px) {
  .ssn-faqs__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .ssn-faqs__intro { position: static; }
  .ssn-faqs__title { max-width: 16ch; }
  .ssn-faqs__text { max-width: 36rem; }
}
@media (max-width: 768px) {
  .ssn-faqs { padding-top: 4rem; padding-bottom: 5rem; }
  .ssn-faqs__title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; max-width: none; }
  .ssn-q__btn { padding: 1.125rem 0; gap: 1rem; }
  .ssn-q__label { font-size: 1.0625rem; }
  .ssn-q__icon { width: 2rem; height: 2rem; }
  .ssn-q__kv { gap: 1.75rem; }
  .ssn-q__kv dd { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-q__panel, .ssn-q__icon, .ssn-q__icon i { transition: none; }
}

/* ==========================================================================
   REDESIGN — Section 10: Final booking CTA (full-bleed photograph)
   ========================================================================== */
.ssn-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: #0b0d18; color: #fff;
  padding-top: clamp(6rem, 12vw, 10.5rem); padding-bottom: clamp(6rem, 12vw, 10.5rem);
  text-align: center;
}
.ssn-cta__bg { position: absolute; inset: 0; z-index: -2; }
.ssn-cta__bg img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
/* image settles in from a slight zoom when the section scrolls into view */
.ssn-cta__bg[data-reveal] { opacity: 1; transform: scale(1.08); transition: transform 2.2s cubic-bezier(.22,.61,.36,1); }
.ssn-cta__bg[data-reveal].is-inview, .ssn-cta__bg[data-reveal].is-settled { opacity: 1; transform: none; }
.ssn-cta__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(8,10,20,.46) 0%, rgba(8,10,20,0) 66%),
    linear-gradient(to top, rgba(8,10,20,.78) 0%, rgba(8,10,20,.46) 45%, rgba(8,10,20,.36) 100%);
}
.ssn-cta__inner { position: relative; max-width: 46rem; margin: 0 auto; }
.ssn-cta__title {
  font-size: clamp(2.375rem, 4.6vw, 4.5rem); line-height: 1.06; letter-spacing: -.005em;
  color: #fff; margin: 0 0 1.5rem; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.ssn-cta__text {
  font-size: 1.0625rem; line-height: 1.85; margin: 0 auto 2.5rem; max-width: 36rem;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.ssn-cta__btn {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: 1.25rem 2.75rem; background: #fff; color: #000; text-decoration: none;
  font-family: var(--primary-font); font-weight: 700; font-size: .75rem; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .35s ease, color .35s ease, transform .35s ease;
}
.ssn-cta__btn:hover { background: #222640; color: #fff; }
.ssn-cta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ssn-cta__btn-arrow { transition: transform .35s ease; }
.ssn-cta__btn:hover .ssn-cta__btn-arrow { transform: translateX(5px); }

@media (max-width: 768px) {
  .ssn-cta { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .ssn-cta__title { font-size: clamp(2.125rem, 9vw, 2.75rem); line-height: 1.1; margin-bottom: 1.125rem; }
  .ssn-cta__text { font-size: 1rem; line-height: 1.75; margin-bottom: 2rem; }
  .ssn-cta__btn { padding: 1.125rem 2.125rem; font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ssn-cta__bg[data-reveal] { transform: none; transition: none; }
}

/* ==========================================================================
   Phones: video owns the first screen; the booking card sits in a white band
   directly beneath it (overlapping the video's bottom edge by 2.5rem).
   Homepage only (body.home); the card's markup, design and behaviour are unchanged.
   ========================================================================== */
@media (max-width: 768px) {
  .home .ssn-hero-section { min-height: 0; display: block; background-color: #fff; background-position: center top; background-size: auto 100vh; background-size: auto 100svh; }
  .home .ssn-bg-video { bottom: auto; height: 100vh; height: 100svh; }
  .home .ssn-bg-video iframe { width: max(100%, calc(100svh * 16 / 9)); height: 100%; }
  .home .home-banner { height: auto; min-height: 0; padding-bottom: 2.5rem; }
  /* .home .home-banner::before, .home .home-banner::after { height: 100vh; height: 100svh; } */
  .home .home-banner::before, .home .home-banner::after { height: auto; }
  .home .hero-banner-cmn .inner-area { height: auto !important; min-height: 0; padding-bottom: 0; }
  .home .home-banner-wrapper {
    position: static !important; top: auto !important;
    box-sizing: border-box; height: 100vh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 6rem 0 5.5rem !important; margin: 0;
  }
  .home .search-form.search-bar { position: relative; bottom: auto; left: auto; margin-top: -2.5rem; z-index: 3; }
}