/* ── Reset & Variables ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    a { text-decoration: none; color: inherit; }

    :root {
      --ink:      #0a0a0a;
      --paper:    #f8f8f6;
      --muted:    rgba(10,10,10,0.6);
      --border:   rgba(10,10,10,0.1);
      --serif:    'Cormorant Garamond', Georgia, serif;
      --sans:     'Inter', system-ui, sans-serif;
      --ease:     cubic-bezier(0.22, 1, 0.36, 1);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      background: var(--paper);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

/* Keep v2 typography pixel-stable inside index.html shell */
.v2-home,
.v2-footer {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: normal !important;
  font-weight: 400 !important;
}

/* Hero typography lock: force exact home-v2 sizing inside index shell */
body.mm-home .v2-home .v2-hero__eyebrow {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  color: rgba(255, 255, 255, 0.86) !important;
}
body.mm-home .v2-home .v2-hero__title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(64px, 10.5vw, 138px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.012em !important;
}
body.mm-home .v2-home .v2-hero__btn {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
}

    /* ── Shared Utilities ────────────────────────────────────────── */
    .v2-label {
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 400;
    }

    .v2-label--light { color: rgba(255,255,255,0.55); }

    .v2-rule {
      width: 40px;
      height: 1px;
      background: currentColor;
      opacity: 0.25;
      margin: 20px 0;
    }

    .v2-link {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border-bottom: 1px solid currentColor;
      padding-bottom: 2px;
      opacity: 0.6;
      transition: opacity 0.3s var(--ease);
    }
    .v2-link:hover { opacity: 1; }

    /* ── Word-blur split helper ─────────────────────────────────── */
    .mm-word {
      display: inline-block;
      will-change: filter, opacity, transform;
    }

    /* ── Scroll Reveal ───────────────────────────────────────────── */
    [data-reveal] {
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity  0.95s var(--ease),
        transform 0.95s var(--ease);
    }
    [data-reveal][data-delay="1"] { transition-delay: 0.12s; }
    [data-reveal][data-delay="2"] { transition-delay: 0.24s; }
    [data-reveal][data-delay="3"] { transition-delay: 0.36s; }
    [data-reveal][data-delay="4"] { transition-delay: 0.48s; }
    [data-reveal].is-revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Navigation ──────────────────────────────────────────────── */
    .v2-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 0 clamp(24px, 4vw, 64px);
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease);
    }

    .v2-nav.is-scrolled {
      background: rgba(248,248,246,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 var(--border);
    }

    /* Logo mark — override global img reset */
    .v2-nav__brand { display: flex; align-items: center; }
    .v2-nav__brand img {
      width: auto !important;
      height: 44px !important;
      object-fit: contain !important;
      display: block;
      /*
        JS will swap src to a canvas-generated transparent/white version
        on the dark hero. CSS filter is the immediate fallback while JS loads.
      */
      filter: brightness(0) invert(1);
      transition: filter 0.5s var(--ease);
    }
    .v2-nav.is-scrolled .v2-nav__brand img {
      filter: none;
    }

    .v2-menu__logo img {
      width: auto !important;
      height: 44px !important;
      object-fit: contain !important;
      /* Menu bg is dark — white silhouette is correct; JS will swap for transparent version */
      filter: brightness(0) invert(1);
      opacity: 0.85;
    }

    /* Center links */
    .v2-nav__links {
      list-style: none;
      display: flex;
      gap: clamp(24px, 3vw, 48px);
    }
    .v2-nav__links a {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      transition: color 0.4s var(--ease);
    }
    .v2-nav__links a:hover { color: #fff; }
    .v2-nav.is-scrolled .v2-nav__links a { color: var(--muted); }
    .v2-nav.is-scrolled .v2-nav__links a:hover { color: var(--ink); }

    /* Right side: Reserve + Hamburger */
    .v2-nav__right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .v2-nav__cta {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 10px 24px;
      border: 1px solid rgba(255,255,255,0.6);
      color: #fff;
      transition: all 0.4s var(--ease);
    }
    .v2-nav__cta:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.9);
    }
    .v2-nav.is-scrolled .v2-nav__cta {
      border-color: var(--ink);
      color: var(--ink);
    }
    .v2-nav.is-scrolled .v2-nav__cta:hover {
      background: var(--ink);
      color: var(--paper);
    }

    /* Hamburger button */
    .v2-nav__burger {
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      transition: opacity 0.3s var(--ease);
    }
    .v2-nav__burger:hover { opacity: 0.7; }
    .v2-nav__burger span {
      display: block;
      width: 22px;
      height: 1px;
      background: #fff;
      transition: background 0.5s var(--ease), transform 0.4s var(--ease), opacity 0.3s var(--ease);
      transform-origin: center;
    }
    .v2-nav.is-scrolled .v2-nav__burger span { background: var(--ink); }

    @media (max-width: 760px) {
      .v2-nav__links { display: none; }
      .v2-nav__cta  { display: none; }
    }

    /* ── Full-screen Menu Overlay ─────────────────────────────────── */
    .v2-menu {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.55s var(--ease);
    }
    .v2-menu.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .v2-menu__close {
      position: absolute;
      top: 24px;
      right: clamp(24px, 4vw, 64px);
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255,255,255,0.6);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      transition: color 0.3s var(--ease);
    }
    .v2-menu__close:hover { color: #fff; }
    .v2-menu__close svg { width: 18px; height: 18px; }

    .v2-menu__logo {
      position: absolute;
      top: 20px;
      left: clamp(24px, 4vw, 64px);
    }
    .v2-menu__nav {
      list-style: none;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .v2-menu__nav li {
      overflow: hidden;
    }

    .v2-menu__nav a {
      display: block;
      font-family: var(--serif);
      font-size: clamp(36px, 6vw, 72px);
      font-weight: 300;
      color: rgba(255,255,255,0.85);
      letter-spacing: -0.01em;
      line-height: 1.15;
      padding: 4px 0;
      transition: color 0.35s var(--ease), letter-spacing 0.5s var(--ease);
      transform: translateY(100%);
      transition: transform 0.7s var(--ease), color 0.35s var(--ease);
    }
    .v2-menu__nav a:hover {
      color: #fff;
      font-style: italic;
    }
    .v2-menu.is-open .v2-menu__nav a {
      transform: translateY(0);
    }
    .v2-menu.is-open .v2-menu__nav li:nth-child(1) a { transition-delay: 0.08s; }
    .v2-menu.is-open .v2-menu__nav li:nth-child(2) a { transition-delay: 0.14s; }
    .v2-menu.is-open .v2-menu__nav li:nth-child(3) a { transition-delay: 0.20s; }
    .v2-menu.is-open .v2-menu__nav li:nth-child(4) a { transition-delay: 0.26s; }
    .v2-menu.is-open .v2-menu__nav li:nth-child(5) a { transition-delay: 0.32s; }
    .v2-menu.is-open .v2-menu__nav li:nth-child(6) a { transition-delay: 0.38s; }

    .v2-menu__footer {
      position: absolute;
      bottom: 40px;
      left: 0; right: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 clamp(24px, 4vw, 64px);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }

    .v2-menu__book {
      display: inline-block;
      margin-top: 40px;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 14px 40px;
      border: 1px solid rgba(255,255,255,0.3);
      color: rgba(255,255,255,0.8);
      transition: all 0.4s var(--ease);
    }
    .v2-menu__book:hover {
      border-color: rgba(255,255,255,0.8);
      color: #fff;
    }

    /* ── Hero ────────────────────────────────────────────────────── */
    .v2-hero {
      position: relative;
      height: 100svh;
      min-height: 600px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Image layers — dark base so the top bar reads before the first photo loads */
    .v2-hero__bg {
      position: absolute;
      inset: 0;
      background-color: #0a0a0a;
    }

    /* Static first hero image — renders immediately (LCP element).
       The JS slideshow layers stack on top with opacity transitions. */
    .v2-hero__layer-static {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      pointer-events: none;
    }

    .v2-hero__layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.6s ease;
      will-change: opacity;
      z-index: 1;
    }

    .v2-hero__layer.is-active { opacity: 1; }

    /* First image zooms in on load */
    .v2-hero__layer:first-child.is-active {
      animation: heroReveal 2.4s var(--ease) forwards;
    }
    @keyframes heroReveal {
      from { opacity: 0; transform: scale(1.06); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Gradient overlay — sits above all rotating image layers so the tint
       applies to every hero photo, not just the static hero-1. */
    .v2-hero__overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.38) 0%,
        rgba(0,0,0,0.34) 40%,
        rgba(0,0,0,0.56) 100%
      );
    }

    /* Content — must stay above the overlay so text remains readable. */
    .v2-hero__content {
      position: relative;
      z-index: 3;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .v2-hero__eyebrow {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.86);
      margin-bottom: 20px;
      animation: fadeUp 1s var(--ease) 0.4s both;
    }

    .v2-hero__title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(64px, 10.5vw, 138px);
      line-height: 0.95;
      color: #fff;
      letter-spacing: -0.012em;
    }

    .v2-hero__title-line {
      display: block;
    }
    .v2-hero__title-line:nth-child(1) { animation: fadeUp 1.1s var(--ease) 0.65s both; }
    .v2-hero__title-line:nth-child(2) {
      font-style: italic;
      animation: fadeUp 1.1s var(--ease) 0.85s both;
    }

    .v2-hero__divider {
      width: 1px;
      height: 40px;
      background: rgba(255,255,255,0.35);
      margin: 32px auto;
      animation: fadeUp 0.8s var(--ease) 1.1s both;
    }

    .v2-hero__btn {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #fff;
      padding: 14px 36px;
      border: 1px solid rgba(255,255,255,0.55);
      transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
      animation: fadeUp 0.9s var(--ease) 1.3s both;
    }
    .v2-hero__btn:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.9);
    }

    /* Scroll indicator */
    .v2-hero__scroll {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      animation: fadeUp 0.8s var(--ease) 1.8s both;
    }

    .v2-hero__scroll span {
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }

    .v2-hero__scroll-line {
      width: 1px;
      height: 40px;
      background: rgba(255,255,255,0.3);
      position: relative;
      overflow: hidden;
    }
    .v2-hero__scroll-line::after {
      content: '';
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.7);
      animation: scrollDrop 1.8s var(--ease) infinite 2s;
    }
    @keyframes scrollDrop {
      0%   { top: -100%; }
      100% { top: 100%; }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Availability Bar ───────────────────────────────────────── */
    /*
      Full-width dark strip — bridges hero (dark) → page (cream).
      Cream CTA button on black = high contrast, unmissable.
    */
    .v2-avail {
      background: var(--ink);
    }

    .v2-avail__inner {
      display: flex;
      align-items: stretch;
      min-height: 92px;
    }

    .v2-avail__field {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 clamp(24px, 3.5vw, 52px);
      cursor: pointer;
      border-right: 1px solid rgba(255,255,255,0.08);
      transition: background 0.28s var(--ease);
    }
    .v2-avail__field:hover { background: rgba(255,255,255,0.05); }

    .v2-avail__hit {
      position: absolute;
      inset: 0;
      z-index: 2;
      border: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
    }
    .v2-avail__field .v2-avail__label,
    .v2-avail__field .v2-avail__value {
      pointer-events: none;
    }

    .v2-avail__label {
      font-size: 9px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.58);
      margin-bottom: 8px;
    }

    .v2-avail__value {
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 300;
      color: rgba(255,255,255,0.92);
      white-space: nowrap;
    }
    .v2-avail__value.is-placeholder {
      color: rgba(255,255,255,0.45);
      font-style: italic;
    }

    .v2-avail__guests {
      flex: 0 0 auto;
      min-width: 160px;
      border-right: none;
    }

    .v2-avail__btn {
      flex: 0 0 auto;
      min-width: 220px;
      padding: 0 clamp(36px, 5vw, 72px);
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background 0.35s var(--ease);
      white-space: nowrap;
    }
    a.v2-avail__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-sizing: border-box;
    }
    .v2-avail__btn:hover { background: #e2ddd5; }

    @media (max-width: 760px) {
      .v2-avail__inner { flex-direction: column; min-height: unset; }
      .v2-avail__field {
        padding: 18px 24px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      .v2-avail__guests { min-width: unset; }
      .v2-avail__btn {
        min-width: 0;
        width: 100%;
        padding: 20px 24px;
        min-height: 60px;
        /* Mobile: use the hover beige as the default so the CTA reads as
           a clearly-filled button on the dark strip (the page-bg cream
           --paper at #f8f8f6 is too close to the page background below
           and visually disappears on phones). */
        background: #e2ddd5;
      }
      .v2-avail__btn:hover { background: #d8d2c8; }
    }

    /* ── Intro ───────────────────────────────────────────────────── */
    .v2-intro {
      padding: clamp(80px, 12vw, 160px) clamp(24px, 8vw, 140px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 100px);
      align-items: start;
      border-bottom: 1px solid var(--border);
    }

    .v2-intro__quote {
      font-family: var(--serif);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .v2-intro__quote p + p { margin-top: 0.15em; }
    .v2-intro__quote p:last-child { font-style: italic; }

    .v2-intro__body {
      padding-top: clamp(4px, 1vw, 12px);
    }

    .v2-intro__body p {
      font-size: 14px;
      line-height: 1.8;
      color: var(--muted);
      max-width: 38ch;
    }

    .v2-intro__body .v2-rule { margin-top: 28px; }

    .v2-intro__body .v2-link { display: inline-block; margin-top: 6px; }

    @media (max-width: 760px) {
      .v2-intro { grid-template-columns: 1fr; }
      .v2-intro__body p { max-width: 100%; }
    }

    /* ── Rooms ───────────────────────────────────────────────────── */
    .v2-rooms {
      padding: clamp(72px, 10vw, 130px) clamp(24px, 6vw, 100px);
    }

    .v2-rooms__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: clamp(40px, 5vw, 64px);
      border-bottom: 1px solid var(--border);
      padding-bottom: 20px;
    }

    .v2-rooms__header h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 300;
    }

    .v2-rooms__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }

    @media (max-width: 860px) {
      .v2-rooms__grid { grid-template-columns: 1fr; gap: 24px; }
    }

    .v2-room-card {
      display: flex;
      flex-direction: column;
      cursor: pointer;
    }

    .v2-room-card__img {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: #e8e5e0;
    }

    .v2-room-card__img img {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease, transform 0.9s var(--ease);
    }

    .v2-room-card__img img.is-active { opacity: 1; }

    .v2-room-card:hover .v2-room-card__img img.is-active {
      transform: scale(1.04);
    }

    .v2-room-card__body {
      padding: 20px 0 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .v2-room-card__name {
      font-family: var(--serif);
      font-size: clamp(18px, 1.8vw, 24px);
      font-weight: 300;
    }

    .v2-room-card__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
    }

    .v2-room-card__price {
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--muted);
    }

    .v2-room-card__link {
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--ink);
      padding-bottom: 1px;
      opacity: 0;
      transition: opacity 0.4s var(--ease);
    }

    .v2-room-card:hover .v2-room-card__link { opacity: 0.7; }

    /* ── Pool & Amenities ────────────────────────────────────────── */
    .v2-pool {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 600px;
    }

    @media (max-width: 760px) {
      .v2-pool { grid-template-columns: 1fr; }
    }

    .v2-pool__img {
      position: relative;
      overflow: hidden;
      background: #e0ddd8;
    }

    .v2-pool__img img {
      height: 100%;
      min-height: 400px;
      transition: transform 1.2s var(--ease);
    }

    .v2-pool__img:hover img { transform: scale(1.03); }

    .v2-pool__text {
      background: var(--ink);
      color: var(--paper);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(48px, 6vw, 96px);
    }

    .v2-pool__text h2 {
      font-family: var(--serif);
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 300;
      line-height: 1.1;
      margin: 16px 0 20px;
    }

    .v2-pool__text p {
      font-size: 14px;
      line-height: 1.8;
      color: rgba(248,248,246,0.6);
      max-width: 36ch;
      margin-bottom: 32px;
    }

    .v2-pool__text .v2-link {
      color: var(--paper);
    }

    /* Amenities strip below pool */
    .v2-amenities {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--border);
    }

    @media (max-width: 760px) {
      .v2-amenities { grid-template-columns: repeat(2, 1fr); }
    }

    .v2-amenity {
      padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .v2-amenity:last-child { border-right: none; }

    .v2-amenity__icon {
      width: 32px;
      height: 32px;
  opacity: 0.35;
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
    }

    .v2-amenity__name {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 300;
    }

    .v2-amenity__desc {
      font-size: 12px;
      line-height: 1.6;
      color: var(--muted);
    }

    /* ── Gallery ─────────────────────────────────────────────────── */
    .v2-gallery {
      padding: clamp(72px, 10vw, 130px) clamp(24px, 6vw, 100px);
    }

    .v2-gallery__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: clamp(32px, 4vw, 52px);
    }

    .v2-gallery__header h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 300;
    }

    .v2-gallery__grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 280px 280px;
      gap: 3px;
    }

    @media (max-width: 760px) {
      .v2-gallery__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 200px);
      }
    }

    .v2-gallery__item {
      overflow: hidden;
      background: #e0ddd8;
    }

    .v2-gallery__item img {
      transition: transform 1s var(--ease);
    }

    .v2-gallery__item:hover img { transform: scale(1.05); }

    /* Editorial layout: vary column spans */
    .v2-gallery__item:nth-child(1) { grid-column: span 5; }
    .v2-gallery__item:nth-child(2) { grid-column: span 4; }
    .v2-gallery__item:nth-child(3) { grid-column: span 3; }
    .v2-gallery__item:nth-child(4) { grid-column: span 3; }
    .v2-gallery__item:nth-child(5) { grid-column: span 5; }
    .v2-gallery__item:nth-child(6) { grid-column: span 4; }

    @media (max-width: 760px) {
      .v2-gallery__item:nth-child(n) { grid-column: span 1; }
      .v2-gallery__item:nth-child(1) { grid-column: span 2; }
      .v2-gallery__item:nth-child(5) { grid-column: span 2; }
    }

    /* ── Nearby ──────────────────────────────────────────────────── */
    .v2-nearby {
      padding: clamp(72px, 10vw, 130px) clamp(24px, 6vw, 100px);
      background: #f2f0ec;
    }

    .v2-nearby__header {
      margin-bottom: clamp(40px, 5vw, 64px);
    }

    .v2-nearby__header h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 300;
      margin-top: 12px;
    }

    .v2-nearby__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }

    @media (max-width: 760px) {
      .v2-nearby__grid { grid-template-columns: 1fr; gap: 24px; }
    }

    .v2-nearby-card {
      background: rgba(248, 248, 246, 0.85);
    }

    .v2-nearby-card__img {
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #e0ddd8;
    }

    .v2-nearby-card__img img {
      transition: transform 1s var(--ease);
    }

    .v2-nearby-card:hover .v2-nearby-card__img img { transform: scale(1.04); }

    .v2-nearby-card__body {
      padding: 24px;
    }

    .v2-nearby-card__name {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 300;
      margin-bottom: 8px;
    }

    .v2-nearby-card__dist {
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--muted);
    }

    /* ── Place: nearby + CTA share one continuous map landscape ─── */
    /* The map is a transparent PNG (white→alpha) sitting on top of
       both sections. Beige shows through in the upper section, body
       off-white in the lower. Cards/text sit ABOVE the map.

       Stacking (in .v2-place's painting order):
         z=0  Section backgrounds (.v2-nearby beige; .v2-cta transparent)
         z=1  The map image + freeway labels
         z=2  Section content (cards, heading, pin, title, coords) */
    .v2-place {
      position: relative;
      overflow: hidden;
    }
    /* Sections themselves should NOT create their own stacking
       context, so their content can be hoisted above the map sibling. */
    .v2-place > .v2-nearby,
    .v2-place > .v2-cta {
      position: relative;
      z-index: auto;
    }

    /* Lift the nearby section's content above the map (z=1).
       Each card and the heading get position+z-index. */
    .v2-place .v2-nearby__header,
    .v2-place .v2-nearby__grid,
    .v2-place .v2-nearby-card {
      position: relative;
      z-index: 2;
    }

    /* The map wrapper is positioned by JS so the motel pixel lands
       exactly at the center of .v2-cta, on every viewport. */
    .v2-place__map-wrap {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
      pointer-events: none;
      /* top is set in JS based on actual section dimensions */
    }
    .v2-place__map {
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
    }

    /* All map overlays (labels, shields) are positioned relative to
       the map-wrap so they scale with the map on viewport resize. */

    /* City labels — subtle, regular, low opacity. Reads as cartographic
       context, not decoration. */
    .v2-place__city {
      position: absolute;
      transform: translate(-50%, -50%);
      font-family: var(--sans);
      font-size: clamp(11px, 0.85vw, 16px);
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: #14161a;
      opacity: 0.38;
      white-space: nowrap;
      pointer-events: none;
    }

    /* Lake label — italic serif, water-feature convention */
    .v2-place__lake {
      position: absolute;
      transform: translate(-50%, -50%);
      font-family: var(--serif);
      font-size: clamp(12px, 0.95vw, 18px);
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: #1a4d99;
      opacity: 0.65;
      white-space: nowrap;
      pointer-events: none;
    }

    /* City + place labels — thin, soft cartographic context.
       Z-index: 2 so they sit above the map (the map is at z=1). */
    .v2-place__city {
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-family: var(--sans);
      font-size: clamp(11px, 0.85vw, 15px);
      font-weight: 400;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: #14161a;
      opacity: 0.62;
      white-space: nowrap;
      pointer-events: none;
    }
    .v2-place__lake {
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-family: var(--serif);
      font-size: clamp(14px, 1.1vw, 20px);
      font-style: italic;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: #0d3a7a;
      opacity: 0.85;
      white-space: nowrap;
      pointer-events: none;
    }

    /* Coordinate stamp — bottom-right corner, sits on top of map */
    .v2-place__coords {
      position: absolute;
      bottom: clamp(28px, 4vh, 48px);
      right: clamp(28px, 4vw, 56px);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1a1612;
      pointer-events: none;
      opacity: 0.55;
    }
    .v2-place__coords-tick {
      width: 6px; height: 6px;
      border: 1px solid #1a1612;
      transform: rotate(45deg);
    }
    .v2-place__coords-sep {
      /* Visible "·" separator on desktop. Hidden on mobile (stacked layout). */
      margin: 0 2px;
    }

    /* ── CTA section (lower) — transparent so map shows through ─── */
    .v2-cta {
      position: relative;
      min-height: 78vh;
      background: transparent;
    }
    /* All CTA content sits above the map */
    .v2-cta > * { z-index: 2; }

    /* Heading anchored to the BOTTOM of the CTA section. Fraunces
       italic — modern editorial serif with character. Dark grey, not
       pure black, for a softer luxury read. */
    .v2-cta__title {
      position: absolute;
      left: 50%;
      bottom: clamp(56px, 8vh, 110px);
      transform: translateX(-50%);
      margin: 0;
      z-index: 2;
      width: max-content;
      max-width: min(720px, calc(100vw - 80px));
      font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(34px, 4.4vw, 64px);
      font-weight: 400;
      font-style: italic;
      line-height: 1.05;
      color: #3a3a3a;
      letter-spacing: -0.012em;
      text-align: center;
      font-variation-settings: "opsz" 144, "SOFT" 50;
      pointer-events: none;
    }
    .v2-cta__title .mm-word {
      display: inline-block;
      will-change: transform, opacity, filter;
    }

    @media (max-width: 540px) {
      .v2-cta__title {
        white-space: normal;
        max-width: 90vw;
        font-size: clamp(26px, 6vw, 38px);
      }
    }

    /* Pin pinned to the exact center (where the motel sits on the map) */
    .v2-cta__pin {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      z-index: 3;
      pointer-events: none;
    }
    /* SVG marker — refined: white outer disc with dark ring, dark inner dot.
       More intentional than a flat fill; reads as a real cartographic mark. */
    .v2-cta__pin-mark {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
    }

    /* Cartographic label — sits 14px to the right of the pin, vertically
       aligned with the pin's center. Reads like a real city label on a map. */
    .v2-cta__pin-label {
      position: absolute;
      left: calc(50% + 18px);
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1a1612;
      white-space: nowrap;
      pointer-events: none;
    }

    /* Soft radial halo — no hard borders, just light emanating outward.
       Inherently edgeless because of the gradient falloff. */
    .v2-cta__pin-pulse {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.18) 38%,
        rgba(0,0,0,0) 70%);
      animation: v2-cta-pin-pulse 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
      transform-origin: center;
      will-change: transform, opacity;
    }
    @keyframes v2-cta-pin-pulse {
      0%   { transform: scale(1);   opacity: 0; }
      14%  { opacity: 0.85; }
      100% { transform: scale(8.5); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .v2-cta__pin-pulse { animation: none; }
    }

    /* ── Footer ──────────────────────────────────────────────────── */
    .v2-footer {
      padding: clamp(48px, 6vw, 80px) clamp(24px, 6vw, 100px);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: start;
      gap: 40px;
      border-top: 1px solid var(--border);
      background: #ffffff;
    }

    @media (max-width: 760px) {
      .v2-footer { grid-template-columns: 1fr; text-align: center; }
      .v2-footer__left { align-items: center; }
    }

    .v2-footer__left {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .v2-footer__logo-wrap {
      display: inline-block;
      margin-bottom: 18px;
    }

    .v2-footer__logo-mark {
      width: 44px;
      height: 44px;
      object-fit: contain;
      display: block;
      opacity: 0.88;
    }

    .v2-footer__brand {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 300;
    }

    .v2-footer__brand p {
      font-size: 11px;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.7;
    }

    .v2-footer__nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      list-style: none;
    }

    .v2-footer__nav a {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.3s var(--ease);
    }
    .v2-footer__nav a:hover { color: var(--ink); }

    .v2-footer__end {
      text-align: right;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.8;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 20px;
    }

    .v2-footer__book-btn {
      display: inline-block;
      padding: 14px 36px;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink);
      border: 1px solid rgba(10, 10, 10, 0.5);
      transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
    }

    .v2-footer__book-btn:hover {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .v2-footer__insta {
      display: inline-block;
    }

    @media (max-width: 760px) {
      .v2-footer__end { text-align: center; align-items: center; }
    }

    .v2-footer__copy {
      font-size: 10px;
      color: rgba(10,10,10,0.25);
    }

    /* ─── Mobile (≤480px) polish — homepage ─────────────────────────
       Lock down typography, spacing, and the map landscape on phones.
       Desktop layout is untouched. */
    @media (max-width: 480px) {
      /* Hero — title smaller, eyebrow tighter, scroll cue + button compact */
      body.mm-home .v2-home .v2-hero__title {
        font-size: clamp(52px, 14vw, 72px) !important;
        line-height: 0.94 !important;
      }
      .v2-hero__eyebrow {
        font-size: 9px;
        letter-spacing: 0.24em;
        margin-bottom: 14px;
      }
      .v2-hero__divider { height: 28px; margin: 20px auto; }
      .v2-hero__btn { padding: 12px 26px; font-size: 9.5px; }
      .v2-hero__scroll { bottom: 22px; }

      /* Availability bar — already stacks at 760px; tighten labels */
      .v2-avail__field { padding: 14px 20px; }
      .v2-avail__label { font-size: 8.5px; letter-spacing: 0.22em; margin-bottom: 4px; }
      .v2-avail__value { font-size: 16px; }
      .v2-avail__btn { padding: 16px 20px; min-height: 54px; font-size: 9.5px; }

      /* Intro */
      .v2-intro {
        padding: clamp(56px, 14vw, 88px) 20px;
        gap: clamp(20px, 6vw, 32px);
      }
      .v2-intro__quote { font-size: clamp(26px, 7.6vw, 34px); line-height: 1.18; }
      .v2-intro__body p { font-size: 13.5px; line-height: 1.7; }

      /* Rooms list */
      .v2-rooms { padding: 56px 20px 64px; }
      .v2-rooms__header { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 14px; }
      .v2-rooms__header h2 { font-size: clamp(26px, 7.2vw, 34px); }
      .v2-rooms__grid { gap: 32px; }
      .v2-room-card__img { aspect-ratio: 4 / 3; }
      .v2-room-card__name { font-size: 17px; }
      /* Always show the per-card View Room link on touch (no :hover) */
      .v2-room-card .v2-room-card__link { opacity: 0.7; }

      /* Pool block — image first, then text, comfortable spacing */
      .v2-pool__img img { min-height: 280px; }
      .v2-pool__text { padding: 40px 20px; }
      .v2-pool__text h2 { font-size: clamp(28px, 7.6vw, 36px); margin: 12px 0 14px; }
      .v2-pool__text p { font-size: 13.5px; max-width: 100%; margin-bottom: 22px; }

      /* Amenities — 2 cols inherited; tighten padding */
      .v2-amenity { padding: 24px 18px; gap: 8px; }
      .v2-amenity__icon { width: 26px; height: 26px; }
      .v2-amenity__name { font-size: 16px; }
      .v2-amenity__desc { font-size: 11.5px; line-height: 1.55; }

      /* Gallery */
      .v2-gallery { padding: 56px 20px 64px; }
      .v2-gallery__header { flex-direction: column; align-items: flex-start; gap: 10px; }
      .v2-gallery__header h2 { font-size: clamp(26px, 7.2vw, 34px); }
      .v2-gallery__grid { grid-template-rows: repeat(3, 160px); gap: 2px; }

    }

    /* Mobile phones (≤520px) — map zoom + coords stacked
       Map: scale around motel pin (50% / 75%) so the pin itself
       does not move a single pixel; surrounding area zooms in,
       San Marcos crops off the left.
       Coords: stacked vertically, centered. */
    @media (max-width: 520px) {
      .v2-place__map-wrap {
        /* 2.5× scale: tighter zoom on Escondido + motel pin area. */
        transform: scale(2.5);
        transform-origin: 50% 75%;
      }

      /* Lake Hodges label is a child of the wrap, so it scaled up 2.5×
         with the rest. Counter-scale it back to a readable size and
         nudge it inward so it lands in the visible curve of the lake.
         Owner-picked position (drag-helper, 2026-05-14). */
      .v2-place__lake {
        left: 38% !important;
        top: 90.4% !important;
        transform: translate(-50%, -50%) scale(0.4);
      }
      .v2-place {
        overflow: hidden;
      }

      .v2-place__coords {
        /* Single-line, anchored to the bottom-right corner of the map area. */
        bottom: 1px;
        right: 8px;
        left: auto;
        transform: none;
        flex-direction: row;
        gap: 6px;
      }
    }

    /* iPhone SE (≤375px) — extra trim on the biggest items */
    @media (max-width: 375px) {
      body.mm-home .v2-home .v2-hero__title {
        font-size: 48px !important;
      }
      .v2-cta__title { font-size: 22px; }
      .v2-place__map-wrap { height: 320px; }
      .v2-place__map { transform: translate(-30vw, calc(-145.8vw + 160px)); }
      .v2-pool__text h2 { font-size: 26px; }
    }