/**
 * Homepage V2 — page sections.
 *
 * Every rule is scoped to .sn-home-v2-page (the body class added by
 * inc/home-v2.php), and the file is enqueued only on the V2 homepage
 * template. The header, footer, buttons and shared primitives it builds on
 * live in v2-chrome.css (site-wide); the property chapters and capacity
 * bands live in v2-collection.css, shared with the Our Stays page.
 *
 * Values come from tokens.css. No raw hex belongs in this file.
 */

/* ------------------------------------------------------------------ *
 * Page shell
 * ------------------------------------------------------------------ */

/*
 * The V2 rail: a 1480px editorial container with a wide, fluid gutter,
 * following the reference's rhythm. Declared on the page scope only, so the
 * site-wide token keeps its value everywhere else.
 */
.sn-home-v2-page {
  --sn-container: var(--sn-v2-container);
}

/* ------------------------------------------------------------------ *
 * Hero — the showcase
 * ------------------------------------------------------------------ */

.sn-home-v2-page .sn-v2-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 92svh;
  max-height: 1080px;
  overflow: hidden;
  background-color: var(--sn-green-dark);
  color: var(--sn-text-inverse);
}

.sn-home-v2-page .sn-v2-hero__frames,
.sn-home-v2-page .sn-v2-hero__frame,
.sn-home-v2-page .sn-v2-hero__frame picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* Frames stack; only the active one is visible. The cross-fade is a plain
   opacity transition on the frame, the breathe is a transform on its image. */
.sn-home-v2-page .sn-v2-hero__frame {
  opacity: 0;
  transition: opacity 1400ms var(--sn-ease);
}

.sn-home-v2-page .sn-v2-hero__frame.is-active {
  opacity: 1;
}

.sn-home-v2-page .sn-v2-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .sn-home-v2-page .sn-v2-hero.is-enhanced .sn-v2-hero__frame.is-active img {
    animation: sn-v2-breathe 7500ms var(--sn-ease) both;
  }
}

@keyframes sn-v2-breathe {
  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1);
  }
}

/*
 * Exposure control in one layer: a feathered scrim so the header stays
 * legible, an asymmetric wash in the lower left behind the type, and a short
 * anchor along the bottom edge. Most of the photograph stays open.
 */
.sn-home-v2-page .sn-v2-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 28, 23, 0.55), rgba(0, 28, 23, 0.18) 18%, transparent 34%),
    linear-gradient(to top right, rgba(0, 28, 23, 0.92), rgba(0, 28, 23, 0.55) 44%, transparent 80%),
    linear-gradient(to top, rgba(0, 28, 23, 0.55), transparent 22%);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes sn-v2-ping {
  from {
    transform: scale(1);
    opacity: 0.6;
  }

  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

.sn-home-v2-page .sn-v2-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vh, 56px);
  padding-block: calc(var(--sn-v2-header-h) + var(--sn-space-6)) clamp(28px, 4vh, 44px);
}

.sn-home-v2-page .sn-v2-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sn-space-5);
  max-width: 48rem;
}

.sn-home-v2-page .sn-v2-hero__title {
  margin: 0;
  color: var(--sn-white);
  font-family: var(--sn-font-display);
  font-size: var(--sn-h1);
  font-weight: var(--sn-weight-display);
  letter-spacing: var(--sn-tracking-display);
  line-height: 1.04;
}

.sn-home-v2-page .sn-v2-hero__title em {
  display: block;
  font-style: italic;
}

.sn-home-v2-page .sn-v2-hero__lede {
  max-width: 36rem;
  margin: 0;
  color: var(--sn-text-inverse);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body-l);
  line-height: var(--sn-leading-body);
}

.sn-home-v2-page .sn-v2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-4);
  margin-top: var(--sn-space-2);
}

/* --- Showcase bar ------------------------------------------------------ */

.sn-home-v2-page .sn-v2-hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-6);
  padding-top: var(--sn-space-3);
}

.sn-home-v2-page .sn-v2-hero__bar[hidden] {
  display: none;
}

.sn-home-v2-page .sn-v2-hero__timeline {
  display: flex;
  align-items: center;
  gap: var(--sn-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-home-v2-page .sn-v2-hero__step-btn {
  display: flex;
  align-items: center;
  gap: var(--sn-space-3);
  min-height: var(--sn-tap-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sn-text-inverse-muted);
  font-family: var(--sn-font-body);
  font-size: 11px;
  font-weight: var(--sn-weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--sn-duration) var(--sn-ease);
}

.sn-home-v2-page .sn-v2-hero__step-btn:hover,
.sn-home-v2-page .sn-v2-hero__step-btn.is-active {
  color: var(--sn-white);
}

.sn-home-v2-page .sn-v2-hero__step-line {
  position: relative;
  display: block;
  width: 32px;
  height: 2px;
  overflow: hidden;
  background-color: rgba(249, 248, 244, 0.25);
  transition: width var(--sn-duration) var(--sn-ease);
}

.sn-home-v2-page .sn-v2-hero__step-btn.is-active .sn-v2-hero__step-line {
  width: 48px;
}

.sn-home-v2-page .sn-v2-hero__step-fill {
  position: absolute;
  inset: 0;
  background-color: var(--sn-orange);
  transform: scaleX(0);
  transform-origin: left;
}

/* The fill runs for one interval on the active step; the script restarts it
   by resetting the animation. Paused state simply freezes it. */
.sn-home-v2-page .sn-v2-hero__step-btn.is-active .sn-v2-hero__step-fill {
  animation: sn-v2-progress var(--sn-v2-hero-interval, 7500ms) linear forwards;
}

.sn-home-v2-page .sn-v2-hero.is-paused .sn-v2-hero__step-fill {
  animation-play-state: paused;
}

@keyframes sn-v2-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.sn-home-v2-page .sn-v2-hero__step-title {
  display: none;
}

.sn-home-v2-page .sn-v2-hero__step-btn:focus-visible {
  outline: var(--sn-focus-ring);
  outline-offset: var(--sn-focus-offset);
}

.sn-home-v2-page .sn-v2-hero__controls {
  display: flex;
  align-items: center;
  gap: var(--sn-space-3);
}

.sn-home-v2-page .sn-v2-hero__counter {
  display: flex;
  gap: var(--sn-space-2);
  margin: 0 var(--sn-space-3) 0 0;
  color: var(--sn-text-inverse);
  font-family: var(--sn-font-display);
  font-size: var(--sn-body-l);
  font-variant-numeric: tabular-nums;
}

.sn-home-v2-page .sn-v2-hero__counter-sep {
  color: var(--sn-text-inverse-muted);
}

.sn-home-v2-page .sn-v2-hero__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--sn-border-inverse);
  border-radius: var(--sn-radius-pill);
  background: none;
  color: var(--sn-text-inverse);
  cursor: pointer;
  transition:
    border-color var(--sn-duration) var(--sn-ease),
    background-color var(--sn-duration) var(--sn-ease),
    color var(--sn-duration) var(--sn-ease);
}

.sn-home-v2-page .sn-v2-hero__ctrl:hover,
.sn-home-v2-page .sn-v2-hero__ctrl:focus-visible {
  border-color: var(--sn-white);
  background-color: rgba(249, 248, 244, 0.12);
  color: var(--sn-white);
}

.sn-home-v2-page .sn-v2-hero__ctrl:focus-visible {
  outline: var(--sn-focus-ring);
  outline-offset: var(--sn-focus-offset);
}

.sn-home-v2-page .sn-v2-hero__ctrl-pause,
.sn-home-v2-page .sn-v2-hero__ctrl-play {
  display: inline-flex;
}

.sn-home-v2-page .sn-v2-hero__ctrl-play,
.sn-home-v2-page .sn-v2-hero.is-paused .sn-v2-hero__ctrl-pause {
  display: none;
}

.sn-home-v2-page .sn-v2-hero.is-paused .sn-v2-hero__ctrl-play {
  display: inline-flex;
}

/* --- Entrance ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .sn-home-v2-page .sn-v2-hero__copy > * {
    animation: sn-v2-rise 700ms var(--sn-ease) both;
  }

  .sn-home-v2-page .sn-v2-hero__title {
    animation-delay: 120ms;
  }

  .sn-home-v2-page .sn-v2-hero__lede {
    animation-delay: 220ms;
  }

  .sn-home-v2-page .sn-v2-hero__actions {
    animation-delay: 320ms;
  }
}

@keyframes sn-v2-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Hero responsive -------------------------------------------------- */

@media (max-width: 767px) {
  .sn-home-v2-page .sn-v2-hero {
    min-height: min(135vw, 92svh);
    max-height: none;
  }

  .sn-home-v2-page .sn-v2-hero__title {
    font-size: clamp(38px, 10vw, 52px);
  }

  .sn-home-v2-page .sn-v2-hero__lede {
    font-size: var(--sn-body);
  }

  .sn-home-v2-page .sn-v2-hero__frame img {
    object-position: center 38%;
  }

  .sn-home-v2-page .sn-v2-hero__inner {
    padding-block: calc(var(--sn-v2-header-h) + var(--sn-space-6)) var(--sn-space-5);
  }

  .sn-home-v2-page .sn-v2-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .sn-home-v2-page .sn-v2-hero__actions .sn-v2-btn {
    width: 100%;
  }

  /* On a phone the bar keeps only the timeline lines and the counter. */
  .sn-home-v2-page .sn-v2-hero__step-num,
  .sn-home-v2-page .sn-v2-hero__ctrl {
    display: none;
  }

  .sn-home-v2-page .sn-v2-hero__timeline {
    gap: var(--sn-space-3);
  }

  .sn-home-v2-page .sn-v2-hero__step-line {
    width: 24px;
  }

  .sn-home-v2-page .sn-v2-hero__step-btn.is-active .sn-v2-hero__step-line {
    width: 36px;
  }
}

@media (min-width: 768px) {
  .sn-home-v2-page .sn-v2-hero {
    min-height: min(92svh, 860px);
  }

}

@media (min-width: 1024px) {
  .sn-home-v2-page .sn-v2-hero {
    min-height: min(94svh, 1000px);
  }
}

@media (min-width: 1280px) {
  .sn-home-v2-page .sn-v2-hero__step-btn.is-active .sn-v2-hero__step-title {
    display: inline;
    color: var(--sn-text-inverse-muted);
    letter-spacing: 0.14em;
  }
}

/* ------------------------------------------------------------------ *
 * Brand story
 *
 * Essay on the left, one large villa photograph on the right, then the
 * four pillars as icon-led cards.
 * ------------------------------------------------------------------ */

.sn-home-v2-page .sn-v2-story {
  background-color: var(--sn-ivory);
}

.sn-home-v2-page .sn-v2-story__lead {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sn-space-8) var(--sn-v2-gap);
  align-items: start;
}

.sn-home-v2-page .sn-v2-story__copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-6);
}

/* Client correction (18 Sep, pin 1): the "Your Stay, Your Story" line is big and bold, not a muted eyebrow. */
.sn-home-v2-page .sn-v2-story__kicker {
  /* Bold eyebrow (client: "make this big and bold"): heavier and larger
     than the other section labels, but clearly subordinate to the serif
     headline rather than competing with it. */
  margin: 0 0 calc(-1 * var(--sn-space-3));
  font-family: var(--sn-font-body);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sn-orange-ink);
}

.sn-home-v2-page .sn-v2-story__prose {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-4);
  /* Fill the copy column so line length matches the photo beside it
     (client feedback: text was wrapping early and running tall). */
  max-width: none;
}

.sn-home-v2-page .sn-v2-story__quote {
  margin: 0;
  padding-top: var(--sn-space-2);
  max-width: none;
}

.sn-home-v2-page .sn-v2-story__quote p {
  margin: 0;
  color: var(--sn-text);
  font-family: var(--sn-font-display);
  font-size: var(--sn-h3);
  font-style: italic;
  font-weight: 700;
  line-height: var(--sn-leading-heading);
}

.sn-home-v2-page .sn-v2-story__actions {
  padding-top: var(--sn-space-3);
}

/* --- Photography ------------------------------------------------------ */

.sn-home-v2-page .sn-v2-story__media {
  grid-column: 1 / -1;
  position: relative;
}

.sn-home-v2-page .sn-v2-story__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--sn-radius-sm);
  background-color: var(--sn-sand);
}

.sn-home-v2-page .sn-v2-story__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sn-home-v2-page .sn-v2-story__figure--lead {
  aspect-ratio: 4 / 3;
  box-shadow: var(--sn-shadow-lift);
}

/* --- Four-pillar cards ------------------------------------------------- */

.sn-home-v2-page .sn-v2-ledger {
  margin-top: var(--sn-v2-section-y);
}

.sn-home-v2-page .sn-v2-ledger__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sn-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-home-v2-page .sn-v2-ledger__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sn-space-4);
  padding: var(--sn-space-7) var(--sn-space-5);
  border-radius: var(--sn-radius-md);
  background-color: var(--sn-white);
  text-align: center;
  transition:
    transform var(--sn-duration) var(--sn-ease),
    box-shadow var(--sn-duration) var(--sn-ease);
}

.sn-home-v2-page .sn-v2-ledger__item-title {
  margin: 0;
  font-family: var(--sn-font-display);
  font-size: var(--sn-h4);
  font-weight: var(--sn-weight-display);
  line-height: var(--sn-leading-heading);
}

.sn-home-v2-page .sn-v2-ledger__text {
  margin: 0;
  max-width: 30ch;
  color: var(--sn-text-muted);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
  line-height: var(--sn-leading-body);
}

.sn-home-v2-page .sn-v2-ledger__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sn-shadow-lift);
}

.sn-home-v2-page .sn-v2-ledger__item:hover .sn-v2-icon-ring {
  background-color: var(--sn-orange);
  color: var(--sn-white);
}

/* --- Brand story responsive -------------------------------------------- */

@media (min-width: 640px) {
  .sn-home-v2-page .sn-v2-ledger__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sn-home-v2-page .sn-v2-story__copy {
    grid-column: 1 / span 6;
    padding-right: var(--sn-space-3);
  }

  .sn-home-v2-page .sn-v2-story__media {
    grid-column: 7 / -1;
  }

  .sn-home-v2-page .sn-v2-ledger__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ *
 * Escapes — the index
 *
 * The six escapes as an index down columns 1–5 and the selected one opened
 * as a feature in 6–12. Without the script every panel stays visible.
 * ------------------------------------------------------------------ */

.sn-home-v2-page .sn-v2-escapes {
  background-color: var(--sn-sand);
}

.sn-home-v2-page .sn-v2-escapes__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sn-space-8) var(--sn-v2-gap);
  margin-top: var(--sn-space-8);
}

.sn-home-v2-page .sn-v2-escapes__index {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-home-v2-page .sn-v2-escape + .sn-v2-escape {
  margin-top: var(--sn-space-1);
}

.sn-home-v2-page .sn-v2-escape__btn {
  display: flex;
  align-items: center;
  gap: var(--sn-space-4);
  width: 100%;
  margin: 0;
  padding: var(--sn-space-4) var(--sn-space-4) var(--sn-space-4) var(--sn-space-3);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--sn-text);
  font-family: var(--sn-font-body);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--sn-duration) var(--sn-ease),
    background-color var(--sn-duration) var(--sn-ease);
}

.sn-home-v2-page .sn-v2-escape__btn:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.sn-home-v2-page .sn-v2-escape__btn:focus-visible {
  outline: var(--sn-focus-ring);
  outline-offset: -3px;
}


.sn-home-v2-page .sn-v2-escape__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sn-home-v2-page .sn-v2-escape__title {
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-m);
  font-weight: var(--sn-weight-display);
  line-height: 1.15;
}

.sn-home-v2-page .sn-v2-escape__sub {
  color: var(--sn-text-muted);
  font-size: var(--sn-small);
}

.sn-home-v2-page .sn-v2-escape.is-active .sn-v2-escape__btn,
.sn-home-v2-page .sn-v2-escape__btn[aria-selected="true"] {
  border-left-color: var(--sn-orange-ink);
  background-color: var(--sn-white);
}

.sn-home-v2-page .sn-v2-escape.is-active .sn-v2-icon-ring {
  background-color: var(--sn-orange);
  color: var(--sn-white);
}

/* --- The feature panel ------------------------------------------------------- */

.sn-home-v2-page .sn-v2-escapes__feature {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-6);
}

.sn-home-v2-page .sn-v2-escape-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sn-v2-hairline);
  border-radius: var(--sn-radius-md);
  background-color: var(--sn-white);
}

/* The photograph changes with the selection; the panel's body carries the
   copy. On the two-column layout the panel stretches to the index's height
   and the photo takes up whatever the copy leaves. */
.sn-home-v2-page .sn-v2-escape-panel__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  background-color: var(--sn-sand);
}

.sn-home-v2-page .sn-v2-escape-panel__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sn-home-v2-page .sn-v2-escape-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-5);
  padding: clamp(24px, 3vw, 40px);
}

.sn-home-v2-page .sn-v2-escape-panel[hidden] {
  display: none;
}

/* A switched-in panel rises a touch and fades: display flips from none, so
   the animation restarts on every selection. Nothing moves under a reduced-
   motion preference, and the stacked layout never animates. */
@media (prefers-reduced-motion: no-preference) {
  .sn-home-v2-page .sn-v2-escapes__body:not(.is-stacked) .sn-v2-escape-panel:not([hidden]) {
    animation: sn-v2-panel-in 520ms var(--sn-ease) both;
  }
}

@keyframes sn-v2-panel-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stacked (below the two-column breakpoint): the index is gone and the six
   features read straight down as cards. */
.sn-home-v2-page .sn-v2-escapes__index[hidden] {
  display: none;
}

.sn-home-v2-page .sn-v2-escape-panel__title {
  margin: 0;
  font-family: var(--sn-font-display);
  font-size: var(--sn-display-m);
  font-weight: var(--sn-weight-display);
  letter-spacing: var(--sn-tracking-display);
  line-height: 1.05;
}

.sn-home-v2-page .sn-v2-escape-panel__quote {
  margin: 0;
  padding-left: var(--sn-space-5);
  border-left: 2px solid var(--sn-orange);
}

.sn-home-v2-page .sn-v2-escape-panel__quote p {
  margin: 0;
  color: var(--sn-text);
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-l);
  font-style: italic;
  font-weight: var(--sn-weight-display);
  line-height: var(--sn-leading-heading);
  text-wrap: balance;
}

.sn-home-v2-page .sn-v2-escape-panel .sn-v2-prose {
  max-width: 54ch;
}

.sn-home-v2-page .sn-v2-escape-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-3);
  margin-top: var(--sn-space-2);
}

@media (min-width: 1024px) {
  .sn-home-v2-page .sn-v2-escapes__index {
    grid-column: 1 / span 5;
    align-self: start;
  }

  .sn-home-v2-page .sn-v2-escapes__feature {
    grid-column: 6 / -1;
    align-self: stretch;
  }

  .sn-home-v2-page .sn-v2-escapes__body:not(.is-stacked) .sn-v2-escape-panel {
    height: 100%;
  }

  .sn-home-v2-page .sn-v2-escapes__body:not(.is-stacked) .sn-v2-escape-panel__figure {
    flex: 1 1 auto;
    min-height: 220px;
    aspect-ratio: auto;
  }

  .sn-home-v2-page .sn-v2-escape__btn {
    padding-block: var(--sn-space-4);
  }
}

@media (max-width: 767px) {
  .sn-home-v2-page .sn-v2-escape-panel__actions .sn-v2-btn {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------ *
 * Experiences — the day
 *
 * Six approved add-on groups as a sequence on the dark ground: the phase in
 * columns 1–3, the story in 4–8, the options and CTA in 9–12.
 * ------------------------------------------------------------------ */

.sn-home-v2-page .sn-v2-experiences {
  position: relative;
  overflow: hidden;
}

.sn-home-v2-page .sn-v2-experiences__glow {
  position: absolute;
  border-radius: var(--sn-radius-pill);
  pointer-events: none;
  filter: blur(80px);
}

.sn-home-v2-page .sn-v2-experiences__glow--a {
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: rgba(204, 85, 0, 0.16);
}

.sn-home-v2-page .sn-v2-experiences__glow--b {
  bottom: -200px;
  left: -160px;
  width: 460px;
  height: 460px;
  background: rgba(0, 40, 32, 0.9);
}

.sn-home-v2-page .sn-v2-experiences .sn-v2-container {
  position: relative;
}

.sn-home-v2-page .sn-v2-icon-ring--inverse {
  border-color: rgba(204, 85, 0, 0.4);
  background-color: rgba(204, 85, 0, 0.14);
}

.sn-home-v2-page .sn-v2-day {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sn-space-5);
  margin: var(--sn-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.sn-home-v2-page .sn-v2-day__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sn-space-4);
  padding: var(--sn-space-7) var(--sn-space-6);
  border: 1px solid var(--sn-v2-hairline-inverse);
  border-radius: var(--sn-radius-md);
  background-color: rgba(255, 255, 255, 0.04);
  text-align: center;
  transition:
    transform var(--sn-duration) var(--sn-ease),
    background-color var(--sn-duration) var(--sn-ease);
}

.sn-home-v2-page .sn-v2-day__card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.07);
}

.sn-home-v2-page .sn-v2-day__card:hover .sn-v2-icon-ring {
  background-color: var(--sn-orange);
  color: var(--sn-white);
}

.sn-home-v2-page .sn-v2-day__title {
  margin: 0;
  color: var(--sn-white);
  font-family: var(--sn-font-display);
  font-size: var(--sn-h3);
  font-weight: var(--sn-weight-display);
  line-height: 1.1;
}

.sn-home-v2-page .sn-v2-day__card .sn-v2-prose {
  max-width: 36ch;
}

.sn-home-v2-page .sn-v2-day__mark {
  margin-left: 2px;
  color: var(--sn-orange-ink);
  font-size: 0.55em;
  line-height: 0;
}

/* One-line legal footnote under the three cards (asterisk on the card title). */
.sn-home-v2-page .sn-v2-day__legal {
  margin: var(--sn-space-4) 0 0;
  color: var(--sn-text-inverse-muted);
  font-family: var(--sn-font-body);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.85;
}

.sn-home-v2-page .sn-v2-day__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-home-v2-page .sn-v2-day__list li {
  padding: 4px var(--sn-space-3);
  border: 1px solid var(--sn-v2-hairline-inverse);
  border-radius: var(--sn-radius-sm);
  color: var(--sn-white);
  font-family: var(--sn-font-body);
  font-size: var(--sn-small);
  line-height: var(--sn-leading-body);
}

.sn-home-v2-page .sn-v2-day__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sn-space-2);
  margin-top: auto;
  padding-top: var(--sn-space-3);
  color: var(--sn-white);
  font-family: var(--sn-font-body);
  font-size: var(--sn-small);
  font-weight: var(--sn-weight-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--sn-orange);
  padding-bottom: 2px;
}

.sn-home-v2-page .sn-v2-day__cta svg {
  color: var(--sn-orange-ink);
  transition: transform var(--sn-duration) var(--sn-ease);
}

.sn-home-v2-page .sn-v2-day__cta:hover {
  color: var(--sn-orange-ink);
}

.sn-home-v2-page .sn-v2-day__cta:hover svg {
  transform: translateX(3px);
}

.sn-home-v2-page .sn-v2-day__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-6);
  padding-top: var(--sn-space-8);
}

.sn-home-v2-page .sn-v2-day__close-line {
  margin: 0;
  max-width: 30ch;
  color: var(--sn-white);
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-l);
  font-style: italic;
  font-weight: var(--sn-weight-display);
  line-height: var(--sn-leading-heading);
  text-wrap: balance;
}

.sn-home-v2-page .sn-v2-day__close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-3);
}

@media (min-width: 640px) {
  .sn-home-v2-page .sn-v2-day {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sn-home-v2-page .sn-v2-day {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sn-home-v2-page .sn-v2-day__close-actions .sn-v2-btn {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------ *
 * Difference — six flip cards in one row
 *
 * Front: big icon ring and serif title. Back (orange): the description.
 * The card turns on hover, :focus-within and .is-flipped (tap, home-v2.js).
 * Under reduced motion the back simply replaces the front with a fade.
 * Below 1024px the row scrolls sideways with snap points, app-like.
 * ------------------------------------------------------------------ */

.sn-home-v2-page .sn-v2-difference {
  background-color: var(--sn-ivory);
}

.sn-home-v2-page .sn-v2-difference__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 300px);
  gap: var(--sn-space-4);
  margin: 0 calc(-1 * var(--sn-v2-rail));
  padding: var(--sn-space-2) var(--sn-v2-rail) var(--sn-space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sn-v2-rail);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sn-home-v2-page .sn-v2-difference__list::-webkit-scrollbar {
  display: none;
}

.sn-home-v2-page .sn-v2-principle {
  position: relative;
  min-height: 320px;
  scroll-snap-align: start;
  perspective: 1200px;
  cursor: pointer;
  outline: none;
}

.sn-home-v2-page .sn-v2-principle:focus-visible .sn-v2-principle__inner {
  outline: var(--sn-focus-ring);
  outline-offset: var(--sn-focus-offset);
}

.sn-home-v2-page .sn-v2-principle__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: var(--sn-radius-md);
  transform-style: preserve-3d;
  transition: transform 700ms var(--sn-ease);
}

.sn-home-v2-page .sn-v2-principle:hover .sn-v2-principle__inner,
.sn-home-v2-page .sn-v2-principle:focus-within .sn-v2-principle__inner,
.sn-home-v2-page .sn-v2-principle.is-flipped .sn-v2-principle__inner {
  transform: rotateY(180deg);
}

.sn-home-v2-page .sn-v2-principle__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sn-space-4);
  padding: var(--sn-space-6) var(--sn-space-5);
  border-radius: var(--sn-radius-md);
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sn-home-v2-page .sn-v2-principle__face--front {
  border: 1px solid var(--sn-v2-hairline);
  background-color: var(--sn-white);
}

.sn-home-v2-page .sn-v2-principle__face--back {
  background-color: var(--sn-orange);
  color: var(--sn-white);
  transform: rotateY(180deg);
}

.sn-home-v2-page .sn-v2-principle__title {
  margin: 0;
  font-family: var(--sn-font-display);
  font-size: var(--sn-h4);
  font-weight: var(--sn-weight-display);
  line-height: var(--sn-leading-heading);
}

.sn-home-v2-page .sn-v2-principle__hint {
  color: var(--sn-text-muted);
  font-family: var(--sn-font-body);
  font-size: var(--sn-label);
  letter-spacing: var(--sn-tracking-label);
  text-transform: uppercase;
}

.sn-home-v2-page .sn-v2-principle__text {
  margin: 0;
  color: var(--sn-white);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
  line-height: var(--sn-leading-body);
}

@media (prefers-reduced-motion: reduce) {
  .sn-home-v2-page .sn-v2-principle__inner {
    transition: none;
    transform-style: flat;
  }

  .sn-home-v2-page .sn-v2-principle:hover .sn-v2-principle__inner,
  .sn-home-v2-page .sn-v2-principle:focus-within .sn-v2-principle__inner,
  .sn-home-v2-page .sn-v2-principle.is-flipped .sn-v2-principle__inner {
    transform: none;
  }

  .sn-home-v2-page .sn-v2-principle__face--back {
    transform: none;
    opacity: 0;
    transition: opacity var(--sn-duration) var(--sn-ease);
  }

  .sn-home-v2-page .sn-v2-principle:hover .sn-v2-principle__face--back,
  .sn-home-v2-page .sn-v2-principle:focus-within .sn-v2-principle__face--back,
  .sn-home-v2-page .sn-v2-principle.is-flipped .sn-v2-principle__face--back {
    opacity: 1;
  }
}

@media (hover: hover) {
  .sn-home-v2-page .sn-v2-principle__hint {
    display: none;
  }
}

@media (min-width: 1024px) {
  .sn-home-v2-page .sn-v2-difference__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .sn-home-v2-page .sn-v2-principle {
    min-height: 340px;
  }
}

/* ================================================================== *
 * Planning — the closing invitation
 * ================================================================== */

.sn-home-v2-page .sn-v2-plan {
  position: relative;
  isolation: isolate;
  padding-block: var(--sn-section-y-spacious);
  background-color: var(--sn-green-dark);
  color: var(--sn-text-inverse);
}

.sn-home-v2-page .sn-v2-plan__media,
.sn-home-v2-page .sn-v2-plan__media picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.sn-home-v2-page .sn-v2-plan__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.sn-home-v2-page .sn-v2-plan__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(0, 28, 23, 0.92) 0%, rgba(0, 28, 23, 0.72) 55%, rgba(0, 28, 23, 0.58) 100%);
}

.sn-home-v2-page .sn-v2-plan__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.sn-home-v2-page .sn-v2-plan__title {
  margin: var(--sn-space-3) 0 0;
  color: var(--sn-white);
  font-family: var(--sn-font-display);
  font-size: var(--sn-display-l);
  font-weight: var(--sn-weight-display);
  line-height: var(--sn-leading-display);
  letter-spacing: var(--sn-tracking-display);
}

.sn-home-v2-page .sn-v2-plan__title em {
  display: block;
  color: var(--sn-text-inverse-muted);
  font-style: italic;
}

.sn-home-v2-page .sn-v2-plan__text {
  margin: var(--sn-space-4) 0 var(--sn-space-6);
  max-width: 48ch;
  color: var(--sn-text-inverse-muted);
  font-size: var(--sn-body-l);
  line-height: var(--sn-leading-body);
}

.sn-home-v2-page .sn-v2-plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-3);
}

.sn-home-v2-page .sn-v2-plan__form {
  padding: clamp(24px, 3.5vw, 44px);
  border: 1px solid var(--sn-v2-hairline-inverse);
  border-radius: var(--sn-radius-md);
  background-color: rgba(0, 28, 23, 0.68);
  backdrop-filter: blur(6px);
}

.sn-home-v2-page .sn-v2-plan__form-title {
  margin: 0 0 var(--sn-space-5);
  color: var(--sn-white);
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-m);
}

.sn-home-v2-page .sn-v2-field + .sn-v2-field {
  margin-top: var(--sn-space-4);
}

.sn-home-v2-page .sn-v2-field__label {
  display: block;
  margin-bottom: var(--sn-space-2);
  color: var(--sn-text-inverse-muted);
  font-size: var(--sn-label);
  font-weight: var(--sn-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sn-home-v2-page .sn-v2-field__control {
  width: 100%;
  min-height: var(--sn-tap-target);
  padding: 12px 16px;
  border: 1px solid var(--sn-border-inverse);
  border-radius: var(--sn-radius-sm);
  background-color: rgba(249, 248, 244, 0.06);
  color: var(--sn-white);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
}

.sn-home-v2-page .sn-v2-field__control:focus-visible {
  outline: var(--sn-focus-ring);
  outline-offset: 2px;
}

.sn-home-v2-page .sn-v2-field__control option {
  color: var(--sn-text);
}

.sn-home-v2-page .sn-v2-plan__submit {
  width: 100%;
  margin-top: var(--sn-space-5);
}

.sn-home-v2-page .sn-v2-plan__hint {
  margin: var(--sn-space-4) 0 0;
  color: var(--sn-text-inverse-muted);
  font-size: var(--sn-small);
  line-height: var(--sn-leading-body);
}

@media (min-width: 1024px) {
  .sn-home-v2-page .sn-v2-plan__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

/* ------------------------------------------------------------------ *
 * Mobile refinements shared across the new sections
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .sn-home-v2-page .sn-v2-plan__actions .sn-v2-btn {
    flex: 1 1 100%;
  }
}

/* ================================================================== *
 * The photographic interlude
 * ================================================================== */

.sn-home-v2-page .sn-v2-interlude {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 46vh, 560px);
  padding-block: clamp(40px, 6vw, 88px);
  background-color: var(--sn-green-dark);
  color: var(--sn-text-inverse);
}

.sn-home-v2-page .sn-v2-interlude__media,
.sn-home-v2-page .sn-v2-interlude__media picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.sn-home-v2-page .sn-v2-interlude__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.sn-home-v2-page .sn-v2-interlude__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 28, 23, 0.86) 0%, rgba(0, 28, 23, 0.32) 55%, rgba(0, 28, 23, 0.18) 100%);
}

.sn-home-v2-page .sn-v2-interlude__line {
  margin: 0;
  color: var(--sn-white);
  font-family: var(--sn-font-display);
  font-size: clamp(32px, 5vw, 68px);
  font-weight: var(--sn-weight-display);
  line-height: 1.1;
  letter-spacing: var(--sn-tracking-display);
}

.sn-home-v2-page .sn-v2-interlude__line em {
  color: var(--sn-text-inverse-muted);
  font-style: italic;
}

/* ================================================================== *
 * Corrections found in the full-page review
 * ================================================================== */

/*
 * The closing image was cropping onto the villa's air-conditioning units and
 * the scrim was too light to hold white type over the bright wall behind it.
 */
.sn-home-v2-page .sn-v2-plan__media img {
  object-position: center 78%;
}

.sn-home-v2-page .sn-v2-plan__scrim {
  background: linear-gradient(to right, rgba(0, 28, 23, 0.95) 0%, rgba(0, 28, 23, 0.86) 45%, rgba(0, 28, 23, 0.72) 100%);
}

.sn-home-v2-page .sn-v2-plan__form {
  background-color: rgba(0, 28, 23, 0.82);
}

}

/* Photography answers the pointer with a slow push-in, on hover-capable
   devices only. The spread frames get the same in v2-collection.css. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sn-home-v2-page .sn-v2-story__figure img {
    transition: transform 900ms var(--sn-ease);
  }

  .sn-home-v2-page .sn-v2-story__figure:hover img {
    transform: scale(1.03);
  }
}

/* ================================================================== *
 * Phone: app-like horizontal rails (client correction, Sep 2026)
 *
 * Below 640px the story cards, the experience cards and the escapes
 * index become sideways scroll-snap rails instead of long stacks, so
 * the page reads like an app feed and the scroll depth drops sharply.
 * ================================================================== */

@media (max-width: 639.98px) {
  .sn-home-v2-page .sn-v2-ledger__list,
  .sn-home-v2-page .sn-v2-day,
  .sn-home-v2-page .sn-v2-escapes__index {
    display: grid;
    /* Reset the stacked template so the first card is not left as a
       narrow 1fr column while the rest take the rail width. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 300px);
    gap: var(--sn-space-3);
    margin-inline: calc(-1 * var(--sn-v2-rail));
    padding-inline: var(--sn-v2-rail);
    padding-bottom: var(--sn-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sn-v2-rail);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sn-home-v2-page .sn-v2-ledger__list::-webkit-scrollbar,
  .sn-home-v2-page .sn-v2-day::-webkit-scrollbar,
  .sn-home-v2-page .sn-v2-escapes__index::-webkit-scrollbar {
    display: none;
  }

  .sn-home-v2-page .sn-v2-ledger__item,
  .sn-home-v2-page .sn-v2-day__card,
  .sn-home-v2-page .sn-v2-escape {
    scroll-snap-align: start;
  }

  .sn-home-v2-page .sn-v2-escapes__index {
    grid-auto-columns: max-content;
  }

  .sn-home-v2-page .sn-v2-escape + .sn-v2-escape {
    margin-top: 0;
  }

  .sn-home-v2-page .sn-v2-escape__btn {
    padding: var(--sn-space-2) var(--sn-space-4) var(--sn-space-2) var(--sn-space-2);
    border-left: 0;
    border-radius: 999px;
    background-color: var(--sn-white);
  }

  .sn-home-v2-page .sn-v2-escape.is-active .sn-v2-escape__btn {
    background-color: var(--sn-orange);
    color: var(--sn-white);
  }
}

/* ------------------------------------------------------------------ *
 * Client corrections (18 Sep audit)
 * ------------------------------------------------------------------ */

/* Escapes: "check the padding and symmetry, match it with the left-hand
   column". The feature panel used to be nearly twice the index's height.
   The photo is now a fixed-height plate (its image absolutely filled) so the
   panel's own height comes from its copy, and the index stretches to that
   same height with the six tabs spread evenly down it. */
@media (min-width: 1024px) {
  .sn-home-v2-page .sn-v2-escapes__index {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .sn-home-v2-page .sn-v2-escape + .sn-v2-escape {
    margin-top: 0;
  }

  .sn-home-v2-page .sn-v2-escapes__body:not(.is-stacked) .sn-v2-escape-panel__figure {
    position: relative;
    flex: 0 0 auto;
    height: 300px;
    min-height: 0;
  }

  .sn-home-v2-page .sn-v2-escapes__body:not(.is-stacked) .sn-v2-escape-panel__figure img {
    position: absolute;
    inset: 0;
  }

  .sn-home-v2-page .sn-v2-escape-panel__body {
    gap: var(--sn-space-4);
    padding: var(--sn-space-6) clamp(24px, 3vw, 40px);
  }
}

/* Experiences: "use attractive big icons". */
.sn-home-v2-page .sn-v2-day__card .sn-v2-icon-ring--xl {
  width: 104px;
  height: 104px;
  border-width: 2px;
}

.sn-home-v2-page .sn-v2-day__card .sn-v2-icon-ring--xl svg {
  width: 46px;
  height: 46px;
}

/* 19 Sep: section rhythm. Reviews and the closing plan band used the larger
   generic tokens (115px / 144px), so those two joins were visibly looser than
   the rest of the page. Everything now shares --sn-v2-section-y. */
.sn-home-v2-page .sn-v2-reviews,
.sn-home-v2-page .sn-v2-plan {
  padding-block: var(--sn-v2-section-y);
}

.sn-home-v2-page .sn-v2-interlude {
  min-height: clamp(280px, 38vh, 460px);
  padding-block: clamp(32px, 4.5vw, 64px);
}