/* Veron Living single public stylesheet. Base component CSS (de-duplicated
   from the old per-page inline) + the light-theme layer (was site-theme.css).
   Per-page hero image arrives via --hero-img on .hero-bg. */

/* base (listing + collection + shared core) */
  /* ------------------------------------------------------------------
     Design tokens
     ------------------------------------------------------------------ */
  :root {
    --ink-abyss:  #000917;   /* deep-ocean night */
    --ink-deep:   #001730;   /* deep water */
    --ink-mid:    #002f5c;   /* mid ocean */
    --ink-klein:  #002fa7;   /* the Klein blue accent */
    --tide:       #0b6ea3;   /* daytime shallow */
    --foam:       #d9ecf5;   /* pale foam */
    --sand:       #fffdf5;   /* warm cream */
    --paper:      #f4efe4;   /* dune */
    --shadow:     0 30px 80px -30px rgba(0, 9, 23, .55);
    --line:       color-mix(in srgb, var(--sand) 12%, transparent);
    --container:  1440px;
  }

  /* ----- base ----- */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    color: var(--sand);
    background: var(--ink-abyss);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    text-wrap: pretty;
    overflow-x: hidden;
  }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; }
  ::selection { background: var(--ink-klein); color: var(--sand); }
  :focus-visible { outline: 2px solid var(--foam); outline-offset: 3px; }

  /* ------------------------------------------------------------------
     Type
     ------------------------------------------------------------------ */
  .display {
    font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(60px, 12vw, 200px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-wrap: balance;
    margin: 0;
  }
  .display em {
    font-style: italic;
    font-weight: 500;
  }
  .h2 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin: 0;
  }
  .h3 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--foam) 70%, transparent);
    margin: 0;
  }
  .lead {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--sand) 88%, transparent);
    text-wrap: pretty;
    margin: 0;
  }
  .body {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: color-mix(in srgb, var(--sand) 78%, transparent);
    max-width: 62ch;
    text-wrap: pretty;
  }

  /* ------------------------------------------------------------------
     Layout helpers
     ------------------------------------------------------------------ */
  .wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: clamp(24px, 5vw, 72px);
    padding-right: clamp(24px, 5vw, 72px);
  }
  section { position: relative; }

  /* Grain overlay on dark surfaces. Subtle film feel. */
  .grain::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.10;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
  }

  /* ------------------------------------------------------------------
     Navigation
     ------------------------------------------------------------------ */
  .nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    padding: clamp(18px, 2vw, 28px) 0;
    transition: background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease;
    border-bottom: 1px solid transparent;
  }
  .nav.scrolled {
    background: color-mix(in srgb, var(--ink-abyss) 78%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: color-mix(in srgb, var(--sand) 10%, transparent);
  }
  .nav-inner {
    display: flex; align-items: center;
    gap: 24px;
  }
  /* Push everything after the brand (auth / Sign in / gear) to the right,
     grouped together — pages with or without a .nav-right wrapper. */
  .nav-inner > .brand { margin-right: auto; }
  .brand {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 2vw, 24px);
    letter-spacing: -0.01em;
    color: var(--sand);
  }
  .brand .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ink-klein);
    display: inline-block;
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-klein) 25%, transparent);
  }
  /* Veron Living mark: the square "V" tile, used on every brand lockup
     (top nav, member top bar + sidebar, auth, onboarding, profile, legal). */
  .brand-mark {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--ink-klein); color: var(--sand);
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600; font-size: 13px; line-height: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-klein) 20%, transparent);
  }
  .brand-tag { opacity: 0.62; font-weight: 400; }
  .nav-links { display: flex; gap: clamp(20px, 3vw, 36px); font-size: 13px; letter-spacing: 0.06em; }
  .nav-links a {
    color: color-mix(in srgb, var(--sand) 75%, transparent);
    transition: color .2s ease;
    text-transform: uppercase;
    font-weight: 500;
  }
  .nav-links a:hover { color: var(--sand); }

  /* Small "List your property" link, sits at the right of the header left of
     the account/gear. Kept subtle and hidden on small screens where space is
     tight (the footer carries the same link there). */
  .nav-list {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--sand) 72%, transparent);
    white-space: nowrap;
    transition: color .18s ease;
  }
  .nav-list:hover { color: var(--sand); }
  @media (max-width: 640px) { .nav-list { display: none; } }

  /* auth nav on the right side of the header */
  .auth-nav {
    display: none;   /* revealed by JS once the auth state is known */
    align-items: center;
    gap: clamp(14px, 2.4vw, 24px);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .auth-nav.ready { display: inline-flex; }
  .auth-nav a {
    color: color-mix(in srgb, var(--sand) 75%, transparent);
    transition: color .18s ease;
    padding: 8px 2px;
  }
  .auth-nav a:hover { color: var(--sand); }
  .auth-nav .auth-signup {
    color: var(--sand);
    padding: 8px 16px;
    border: 1px solid color-mix(in srgb, var(--sand) 30%, transparent);
    border-radius: 999px;
    transition: border-color .18s ease, background-color .18s ease;
  }
  .auth-nav .auth-signup:hover {
    border-color: var(--sand);
    background: color-mix(in srgb, var(--sand) 6%, transparent);
    color: var(--sand);
  }
  .auth-account {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--sand) 30%, transparent);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sand);
    transition: border-color .18s ease, background-color .18s ease;
  }
  .auth-account:hover {
    border-color: var(--sand);
    background: color-mix(in srgb, var(--sand) 8%, transparent);
  }
  .auth-account svg { width: 16px; height: 16px; }
  .auth-out { display: inline-flex; gap: clamp(14px, 2.4vw, 24px); align-items: center; }
  .auth-nav.signed-in .auth-out { display: none; }
  .auth-nav:not(.signed-in) .auth-in { display: none; }

  /* Shores dropdown menu */
  .menu {
    position: relative;
    display: inline-block;
  }
  .menu-trigger {
    /* Kill Safari's native button chrome */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    background-color: transparent;
    border: 0;
    outline: 0;
    font-family: inherit;

    display: inline-flex; align-items: center; gap: 8px;
    color: color-mix(in srgb, var(--sand) 75%, transparent);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 4px 0;
    transition: color .2s ease;
  }
  .menu-trigger:hover,
  .menu:focus-within .menu-trigger { color: var(--sand); }
  .menu-trigger svg { transition: transform .25s ease; }
  .menu:hover .menu-trigger svg,
  .menu:focus-within .menu-trigger svg { transform: rotate(180deg); }
  .menu-dropdown {
    position: absolute;
    top: calc(100% + 20px);
    right: 0;
    /* No panel. Just typography, floating. */
    background: transparent;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
    pointer-events: none;
    z-index: 110;
  }
  .menu:hover .menu-dropdown,
  .menu:focus-within .menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .menu-dropdown a {
    display: block;
    padding: 8px 0;
    text-align: right;
    background: transparent;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: color-mix(in srgb, var(--sand) 80%, transparent);
    transition: color .18s ease;
    white-space: nowrap;
  }
  .menu-dropdown a:hover { color: var(--sand); }

  @media (max-width: 720px) { .nav-links { display: none; } }

  /* ------------------------------------------------------------------
     Hero
     ------------------------------------------------------------------ */
  .hero {
    position: relative;
    /* Use svh, not dvh: svh is a fixed height (the viewport with the mobile
       browser chrome shown), so it does NOT change as the address bar hides on
       scroll. That stops the hero from resizing and the cover video from
       rescaling — which is what looked like a stuttering zoom while scrolling. */
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-items: end;
    overflow: hidden;
  }
  /* Layers, bottom to top:
     hero-image (solid deep-ocean fallback, shown while the video loads
                 and if the video is unavailable or reduced-motion is set)
     hero-video (autoplaying background)
     hero-overlay (gradient for readability)
     grain::after (film grain, from .grain)
     hero-content (headline, on top). */
  .hero-image {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 50% 65%,
        var(--ink-mid) 0%,
        var(--ink-deep) 55%,
        var(--ink-abyss) 100%);
    z-index: 0;
  }
  .hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: saturate(1.05) contrast(1.03);
    pointer-events: none;
  }
  /* Homepage hero background photo. Sits above the gradient fallback and below
     the darkening overlay, in the .hero (svh) box so it never rescales on
     scroll. If the image is missing, the gradient behind it shows through. */
  .hero-photo {
    position: absolute; inset: 0;
    z-index: 1;
    background: url('https://cdn.veronid.com/assets/media/image/veronliving-hero.jpg') center center / cover no-repeat;
    pointer-events: none;
  }
  .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ink-abyss) 55%, transparent) 0%,
      color-mix(in srgb, var(--ink-abyss) 20%, transparent) 40%,
      color-mix(in srgb, var(--ink-abyss) 88%, transparent) 100%);
    z-index: 2;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
  }
  .hero-content {
    position: relative;
    z-index: 5;
    padding-top: clamp(120px, 20vh, 220px);
    padding-bottom: clamp(60px, 10vh, 120px);
    text-align: center;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    color: color-mix(in srgb, var(--foam) 90%, transparent);
    margin-bottom: clamp(20px, 4vh, 40px);
    justify-content: center;
  }
  .hero-eyebrow .rule { width: 40px; height: 1px; background: currentColor; opacity: 0.7; }
  /* Gap between the brand tag and the search box. This rule
     (.hero h1) is more specific than .hero-tag, so it is the one that governs
     the spacing — set it here, not on .hero-tag. */
  .hero h1 { margin-bottom: clamp(61px, 10.2vh, 119px); }
  .hero .lead { max-width: 42ch; margin-bottom: clamp(28px, 5vh, 40px); }
  .hero-tag {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(30px, 5.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--sand);
    margin: 0 auto;   /* the bottom gap is set on `.hero h1` above, which wins */
    white-space: nowrap;
  }

  /* ------------------------------------------------------------------
     Search widget (in hero)
     ------------------------------------------------------------------ */
  .search {
    position: relative;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    background: var(--sand);
    color: var(--ink-deep);
    border-radius: 999px;
    box-shadow: 0 24px 60px -24px rgba(0, 9, 23, .5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: stretch;
    padding: 6px;
    gap: 0;
  }
  .search-cell {
    position: relative;
    display: flex; align-items: center;
    min-width: 0;
    padding: 10px 20px;
  }
  .search-cell + .search-cell::before {
    content: "";
    position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 1px;
    background: color-mix(in srgb, var(--ink-deep) 15%, transparent);
  }
  .search-cell label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink-deep) 55%, transparent);
    margin-bottom: 2px;
  }
  .search-cell select,
  .search-cell input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    width: 100%;
    color: var(--ink-deep);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
  }
  .search-cell input { cursor: text; }
  .search-cell.field { flex-direction: column; align-items: stretch; justify-content: center; }
  .search-cell.field .row {
    display: flex; align-items: center; gap: 10px;
  }
  .search-cell.field .row svg { color: color-mix(in srgb, var(--ink-deep) 40%, transparent); flex-shrink: 0; }
  .search-cell.select { flex-direction: column; align-items: stretch; justify-content: center; }
  .search-cell.select .row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .search-cell.select .row svg { color: color-mix(in srgb, var(--ink-deep) 40%, transparent); flex-shrink: 0; }
  .search-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 32px;
    min-height: 56px;
    margin: 0;
    background: var(--ink-klein);
    color: var(--sand);
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .search-submit:hover {
    background: color-mix(in srgb, var(--ink-klein) 85%, var(--sand));
  }
  .search-submit:active { transform: translateY(1px); }
  .search-submit svg { transition: transform .2s ease; }
  .search-submit:hover svg { transform: translateX(3px); }
  .search-actions { display: flex; gap: 6px; }

  /* Autocomplete dropdown */
  .search-suggest {
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0;
    background: var(--sand);
    color: var(--ink-deep);
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(0, 9, 23, .45);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    z-index: 20;
    max-height: 420px;
    overflow-y: auto;
  }
  .search-suggest.open {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .search-suggest .item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .12s ease;
  }
  .search-suggest .item:hover,
  .search-suggest .item.active {
    background: color-mix(in srgb, var(--ink-klein) 8%, transparent);
  }
  .search-suggest .item .icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink-klein) 12%, transparent);
    color: var(--ink-klein);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .search-suggest .item .text { min-width: 0; }
  .search-suggest .item .primary {
    font-weight: 500;
    color: var(--ink-deep);
    font-size: 15px;
    letter-spacing: -0.005em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-suggest .item .primary mark {
    background: transparent;
    color: var(--ink-klein);
    font-weight: 600;
  }
  .search-suggest .item .secondary {
    font-size: 12px;
    color: color-mix(in srgb, var(--ink-deep) 55%, transparent);
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-suggest .empty {
    padding: 16px;
    font-size: 13px;
    color: color-mix(in srgb, var(--ink-deep) 55%, transparent);
    text-align: center;
  }

  @media (max-width: 820px) {
    .search {
      grid-template-columns: 1fr 1fr;
      border-radius: 24px;
      padding: 12px;
    }
    .search-cell {
      padding: 10px 16px;
    }
    .search-cell.select { grid-column: 1 / -1; }
    .search-cell.field { grid-column: 1 / -1; }
    .search-cell + .search-cell::before { display: none; }
    .search-cell.field { border-top: 1px solid color-mix(in srgb, var(--ink-deep) 12%, transparent); }
    .search-actions { grid-column: 1 / -1; margin-top: 8px; }
    .search-actions .search-submit { flex: 1; }
  }
  .hero-meta {
    display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
    align-items: flex-end;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--sand) 70%, transparent);
    padding-top: clamp(28px, 4vh, 44px);
    border-top: 1px solid color-mix(in srgb, var(--sand) 20%, transparent);
    max-width: 720px;
  }
  .hero-meta span { display: block; text-transform: uppercase; font-weight: 500; }
  .hero-meta strong {
    display: block;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--sand);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    text-transform: none;
  }

  /* Scroll cue */
  .scroll-cue {
    position: absolute;
    right: clamp(24px, 5vw, 72px);
    bottom: 40px;
    z-index: 5;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: color-mix(in srgb, var(--sand) 60%, transparent);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding-top: 60px;
  }
  .scroll-cue::before {
    content: "";
    position: absolute; top: 0; left: 50%;
    width: 1px; height: 44px;
    background: color-mix(in srgb, var(--sand) 60%, transparent);
    transform: translateX(-50%);
    animation: cueSlide 2.2s ease-in-out infinite;
  }
  @keyframes cueSlide {
    0%, 100% { transform: translateX(-50%) scaleY(0.3); transform-origin: top; }
    50%      { transform: translateX(-50%) scaleY(1); }
  }
  @media (max-width: 720px) { .scroll-cue { display: none; } }

  /* ------------------------------------------------------------------
     Collection shelf (horizontal scroller: drag / arrows / dots)
     ------------------------------------------------------------------ */
  .shelf {
    padding: clamp(20px, 3vw, 36px) 0 clamp(40px, 6vw, 72px);
    background: var(--ink-abyss);
  }
  .shelf-track {
    display: flex;
    gap: clamp(16px, 2vw, 28px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;          /* room so a focus ring isn't clipped */
    cursor: grab;
    /* horizontal drag is ours; let the browser keep vertical panning */
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }
  .shelf-track::-webkit-scrollbar { display: none; }
  .shelf-track.dragging { scroll-behavior: auto; cursor: grabbing; }
  .shelf-card {
    flex: 0 0 auto;
    width: clamp(180px, 15vw, 224px);
    -webkit-user-select: none; user-select: none;
  }
  .shelf-card .shelf-img {
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: var(--ink-mid);
    border-radius: 4px;
    filter: saturate(1.05);
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
    -webkit-user-drag: none;
  }
  .shelf-card:hover .shelf-img { transform: translateY(-4px); filter: saturate(1.15); }
  .shelf-card .shelf-label {
    margin-top: 12px;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 18px);
    letter-spacing: -0.01em;
    color: var(--sand);
    transition: color .2s ease;
  }
  .shelf-card:hover .shelf-label { color: var(--foam); }

  .shelf-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    margin-top: clamp(28px, 4vw, 48px);
  }
  .shelf-dots { display: flex; gap: 10px; align-items: center; min-height: 12px; }
  .shelf-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: color-mix(in srgb, var(--sand) 22%, transparent);
    padding: 0; border: 0; cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease;
  }
  .shelf-dot.active {
    background: var(--ink-klein);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-klein) 25%, transparent);
  }
  .shelf-arrows { display: flex; gap: 12px; }
  .shelf-arrow {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--sand) 25%, transparent);
    color: var(--sand);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .18s ease, background-color .18s ease, opacity .18s ease;
  }
  .shelf-arrow:hover:not(:disabled) {
    border-color: var(--ink-klein);
    background: color-mix(in srgb, var(--ink-klein) 22%, transparent);
  }
  .shelf-arrow:disabled { opacity: 0.28; cursor: default; }
  .shelf-arrow svg { width: 18px; height: 18px; }
  @media (max-width: 720px) {
    .shelf-card { width: 46vw; }
    .shelf-arrow { width: 42px; height: 42px; }
  }

  /* ------------------------------------------------------------------
     Offer (six ways to use the collection)
     ------------------------------------------------------------------ */
  .offer {
    padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 8vw, 96px);
    background: var(--ink-abyss);
  }
  .offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 3vw, 44px);
  }
  .offer-card { display: block; }
  .offer-img {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--ink-mid);
    border-radius: 8px;
    filter: saturate(1.05);
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  }
  .offer-card:hover .offer-img { transform: translateY(-4px); filter: saturate(1.15); }
  .offer-label {
    margin-top: 16px;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(19px, 2vw, 26px);
    letter-spacing: -0.01em;
    color: var(--sand);
    text-align: center;
    transition: color .2s ease;
  }
  .offer-card:hover .offer-label { color: var(--foam); }
  @media (max-width: 820px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .offer-grid { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------------
     Places grid (square country tiles)
     ------------------------------------------------------------------ */
  .places {
    padding: 0 0 clamp(72px, 11vw, 150px);
    background: var(--ink-abyss);
  }
  .places-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 24px);
  }
  .place-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    background: var(--ink-mid);
  }
  .place-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: saturate(1.05);
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .place-card:hover .place-img { transform: scale(1.05); }
  .place-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ink-abyss) 18%, transparent) 0%,
      color-mix(in srgb, var(--ink-abyss) 20%, transparent) 45%,
      color-mix(in srgb, var(--ink-abyss) 52%, transparent) 100%);
  }
  .place-cap {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 16px;
  }
  .place-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(21px, 2.5vw, 34px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--sand);
    text-shadow: 0 2px 20px rgba(0, 9, 23, .55);
    text-wrap: balance;
  }
  .place-sub {
    margin-top: 6px;
    font-size: clamp(12px, 1vw, 14.5px);
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--sand) 88%, transparent);
    text-shadow: 0 2px 14px rgba(0, 9, 23, .55);
  }
  @media (max-width: 900px) { .places-grid { grid-template-columns: repeat(2, 1fr); } }



  /* ------------------------------------------------------------------
     Why the water (three concept cards)
     ------------------------------------------------------------------ */
  .why {
    padding: clamp(72px, 11vw, 140px) 0;
    background: var(--ink-abyss);
  }
  /* Centred, roomy intro — it closes the page, so it stays compact vertically
     while using the width rather than a narrow left column. */
  .why-head {
    max-width: 1040px;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
  }
  .why-head .h2 { margin: 18px 0; }
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 56px);
  }
  @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
  .why-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(20px, 3vw, 32px);
    padding-top: 32px;
    border-top: 1px solid color-mix(in srgb, var(--sand) 20%, transparent);
  }
  .why-num {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.03em;
    color: var(--ink-klein);
    line-height: 1;
  }
  .why-card .h3 { color: var(--sand); margin-bottom: 12px; }
  .why-card p { color: color-mix(in srgb, var(--sand) 75%, transparent); font-size: 15px; line-height: 1.55; }

  /* ------------------------------------------------------------------
     Newsletter
     ------------------------------------------------------------------ */
  .news {
    position: relative;
    /* A distinct blue band, full-bleed across the viewport.
       Deep calm navy, not the neon klein — easy on the eye at this size. */
    background: var(--ink-mid);
    padding: clamp(72px, 12vw, 168px) 0;
    overflow: hidden;
    text-align: center;
  }
  /* Give the content real room — centred, using the width we have. */
  .news-inner { position: relative; z-index: 5; max-width: 980px; margin: 0 auto; }
  .news .eyebrow { color: color-mix(in srgb, var(--foam) 92%, transparent); }
  .news .h2 { margin-left: auto; margin-right: auto; }
  .news .body {
    margin: clamp(20px, 3vw, 28px) auto 0;
    color: color-mix(in srgb, var(--sand) 90%, transparent);
  }
  .news-form {
    display: flex;
    gap: 10px;
    margin: clamp(30px, 4vw, 44px) auto 0;
    max-width: 560px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .news-input {
    flex: 1 1 260px;
    min-width: 0;
    background: var(--sand);
    color: var(--ink-deep);
    border: 0;
    border-radius: 999px;
    padding: 15px 24px;
    font-family: inherit;
    font-size: 16px;
    outline: none;
  }
  .news-input::placeholder { color: color-mix(in srgb, var(--ink-deep) 45%, transparent); }
  /* On the blue band the button is cream so it stands out. */
  .news-btn {
    flex: 0 0 auto;
    background: var(--sand);
    color: var(--ink-klein);
    border: 0;
    border-radius: 999px;
    padding: 15px 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
  }
  .news-btn:hover { background: color-mix(in srgb, var(--sand) 88%, var(--foam)); }
  .news-btn:active { transform: translateY(1px); }
  .news-btn:disabled { opacity: 0.6; cursor: default; }
  .news-msg {
    margin: 16px auto 0;
    font-size: 14px;
    min-height: 20px;
    color: color-mix(in srgb, var(--foam) 92%, transparent);
  }
  .news-msg.ok { color: var(--sand); }
  .news-msg.error { color: #ffd7a8; }
  @media (max-width: 520px) {
    .news-form { flex-direction: column; }
    /* In a column, flex-basis sets height — reset so the pills stay normal. */
    .news-input, .news-btn { flex: 0 0 auto; width: 100%; }
  }

  /* ------------------------------------------------------------------
     Thailand info block
     ------------------------------------------------------------------ */
  .info-block { padding: clamp(48px, 8vw, 96px) 0; background: var(--ink-abyss); }
  .info-card {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid color-mix(in srgb, var(--sand) 14%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ink-deep) 55%, var(--ink-abyss));
    box-shadow: 0 30px 80px -50px rgba(0, 9, 23, 0.9);
  }
  @media (max-width: 820px) {
    .info-card { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); align-items: start; }
  }
  .info-card .eyebrow { margin-bottom: 14px; }
  .info-card-h {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--sand);
    margin: 0;
  }
  .info-card-lead {
    margin: 16px 0 0;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    color: color-mix(in srgb, var(--sand) 78%, transparent);
    max-width: 46ch;
  }
  .info-facts { margin: 0; display: grid; }
  .info-fact {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 18px;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid color-mix(in srgb, var(--sand) 10%, transparent);
  }
  .info-fact:first-child { padding-top: 0; border-top: 0; }
  .info-fact:last-child { padding-bottom: 0; }
  .info-fact dt {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: color-mix(in srgb, var(--foam) 62%, transparent);
  }
  .info-fact dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--sand); }
  .offer-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
  .offer-head .h2 { margin-top: 18px; }

  /* ---- image hero (shorter than the video heroes) ---- */
  .hero--image { min-height: clamp(340px, 50vh, 540px); align-items: center; overflow: hidden; }
  .hero--image .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
      linear-gradient(180deg, rgba(0,9,23,.42), rgba(0,9,23,.66)),
      var(--hero-img) center 42% / cover no-repeat,
      radial-gradient(ellipse at 50% 60%, var(--ink-mid), var(--ink-deep) 60%, var(--ink-abyss));
  }
  .hero--image .hero-content { text-align: center; padding-top: clamp(96px, 15vh, 150px); padding-bottom: clamp(40px, 8vh, 72px); z-index: 5; }
  /* Higher specificity than the inherited `.hero-tag` / `.hero h1` rules. */
  .hero--image .hero--image-h {
    font-family: 'EB Garamond', Georgia, serif; font-weight: 500;
    font-size: clamp(32px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -0.025em;
    color: var(--sand); margin: 0 auto; max-width: 20ch;
  }
  /* ---- search strip ---- */
  .search-strip { background: var(--ink-deep); padding: clamp(22px, 3vw, 36px) 0; position: relative; z-index: 6; }

  .properties {
    padding: clamp(96px, 12vw, 160px) 0;
    background: linear-gradient(180deg, var(--ink-abyss), var(--ink-deep));
  }
  .properties__head {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 72px);
  }
  .properties__head .eyebrow {
    color: color-mix(in srgb, var(--foam) 90%, transparent);
    margin-bottom: 14px;
  }
  .properties__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(32px, 4.5vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--sand);
    margin: 0;
  }
  .properties__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
  }
  @media (max-width: 1000px) {
    .properties__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .properties__grid { grid-template-columns: 1fr; }
  }
  /* Off-market CTA, above the grid on listing pages. Pull the listings section
     up close to the search box (its default top padding is large). */
  .properties:has(.offmarket-cta) { padding-top: clamp(24px, 3.5vw, 44px); }
  .offmarket-cta {
    margin: 0 0 clamp(26px, 3.5vw, 40px);
    padding: 15px 24px;
    border: 1.5px solid #2e9e6b;
    border-radius: 14px;
    background: color-mix(in srgb, #2e9e6b 8%, transparent);
    text-align: center;
  }
  .offmarket-cta p {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.5;
    color: var(--ink);
  }
  .offmarket-cta a {
    color: #1a7a4f;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid color-mix(in srgb, #1a7a4f 45%, transparent);
    transition: color .18s ease, border-color .18s ease;
  }
  .offmarket-cta a:hover { color: #14603f; border-bottom-color: #14603f; }
  .properties__state {
    grid-column: 1 / -1;
    padding: clamp(48px, 6vw, 80px) 20px;
    text-align: center;
    color: color-mix(in srgb, var(--sand) 60%, transparent);
    font-size: 14px;
    letter-spacing: 0.06em;
  }
  .property-card {
    display: block;
    background: var(--sand);
    color: var(--ink-deep);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 40px -24px rgba(0, 9, 23, .5);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  }
  .property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -24px rgba(0, 9, 23, .7);
  }
  .property-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: color-mix(in srgb, var(--ink-mid) 30%, var(--ink-deep));
    position: relative;
  }
  .property-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .property-card:hover .property-card__image img { transform: scale(1.04); }
  .property-card__image--empty::after {
    content: 'Photos on request';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: color-mix(in srgb, var(--foam) 55%, transparent);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .property-card__body {
    padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 28px);
  }
  .property-card__price {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: -0.015em;
    color: var(--ink-deep);
    margin: 0 0 6px;
  }
  .property-card__meta {
    font-size: 14px;
    color: color-mix(in srgb, var(--ink-deep) 60%, transparent);
    margin: 0 0 4px;
  }
  .property-card__meta .dot { margin: 0 6px; opacity: 0.5; }
  .property-card__location {
    font-size: 14px;
    color: color-mix(in srgb, var(--ink-deep) 85%, transparent);
    margin: 0;
  }
  .property-card__name {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 15px;
    color: color-mix(in srgb, var(--ink-deep) 60%, transparent);
    font-style: italic;
    margin: 8px 0 0;
    letter-spacing: -0.005em;
  }

  /* ------------------------------------------------------------------
     Footer
     ------------------------------------------------------------------ */
  footer {
    background: var(--ink-abyss);
    padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 64px);
    border-top: 1px solid color-mix(in srgb, var(--sand) 8%, transparent);
    color: color-mix(in srgb, var(--sand) 55%, transparent);
    font-size: 13px;
  }
  .foot-top {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px 48px; flex-wrap: wrap;
  }
  .foot-mark {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(44px, 12vw, 168px);
    letter-spacing: -0.04em;
    line-height: 0.85;
    color: var(--sand);
    max-width: 100%;
  }
  .foot-mark em { font-style: italic; color: var(--ink-klein); }
  .foot-cols {
    display: flex; flex-wrap: wrap; gap: 22px clamp(34px, 5vw, 84px);
    padding-bottom: 8px;
  }
  .foot-col { display: flex; flex-direction: column; gap: 9px; min-width: 120px; }
  .foot-col-h {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600; margin: 0 0 5px;
    color: color-mix(in srgb, var(--sand) 40%, transparent);
  }
  .foot-col a {
    font-size: 14px; letter-spacing: 0.01em;
    color: inherit; transition: color .18s ease;
    padding: 1px 0;
  }
  .foot-col a:hover { color: var(--sand); }
  .foot-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px 28px; flex-wrap: wrap;
    margin-top: clamp(40px, 6vw, 72px);
    padding-top: 22px;
    border-top: 1px solid color-mix(in srgb, var(--sand) 12%, transparent);
  }
  .foot-tag, .foot-legal { letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
  @media (max-width: 720px) {
    .foot-cols { gap: 22px 40px; }
    .foot-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  }

  /* ------------------------------------------------------------------
     Reveal animations (progressive enhancement)
     ------------------------------------------------------------------ */
  .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),
                transform .9s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }


/* homepage-only sections */
.nav-right { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
.nav-aud {
    display: inline-flex;
    gap: clamp(14px, 2vw, 22px);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
  }
.nav-aud a {
    color: color-mix(in srgb, var(--sand) 72%, transparent);
    transition: color .18s ease;
  }
.nav-aud a:hover { color: var(--sand); }
/* Hidden earlier (900px, not 720) so the header never stuffs in the tablet
   band; the pref switch stays. */
@media (max-width: 900px) {
  .nav-aud { display: none; }
}

/* ---- Header gear + the currency/unit panel it opens ------------------ */
.pref-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: color-mix(in srgb, var(--sand) 70%, transparent);
  transition: color .18s ease, transform .35s cubic-bezier(.16,.84,.44,1);
}
.pref-gear svg { width: 22px; height: 22px; }
.pref-gear:hover { color: var(--sand); }
.pref-gear[aria-expanded="true"] { color: var(--sand); transform: rotate(60deg); }

.pref-panel { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.pref-panel.open { visibility: visible; }
.pref-panel-scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink-abyss) 55%, transparent);
  opacity: 0; transition: opacity .3s ease;
}
.pref-panel.open .pref-panel-scrim { opacity: 1; }
.pref-panel-card {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(400px, 90vw);
  /* Same deep ocean navy as the login pages' left panel. */
  background:
    radial-gradient(95% 85% at 15% 8%, color-mix(in srgb, var(--tide) 26%, var(--ink-mid)) 0%, transparent 62%),
    linear-gradient(158deg, var(--ink-mid) 0%, var(--ink-deep) 100%);
  border-left: 1px solid color-mix(in srgb, var(--sand) 10%, transparent);
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, .6);
  padding: clamp(24px, 3.5vw, 40px) clamp(22px, 3vw, 34px)
           max(clamp(24px, 3.5vw, 40px), env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.16, .84, .44, 1);
  display: flex; flex-direction: column;
}
.pref-panel.open .pref-panel-card { transform: translateX(0); }
.pref-panel-close {
  align-self: flex-end;
  width: 40px; height: 40px; padding: 0; margin: -6px -8px 10px 0;
  background: none; border: 0; cursor: pointer;
  color: color-mix(in srgb, var(--sand) 62%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .18s ease;
}
.pref-panel-close:hover { color: var(--sand); }
.pref-panel-close svg { width: 22px; height: 22px; }
.pref-panel-rows { display: flex; flex-direction: column; }
.pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sand) 12%, transparent);
}
.pref-row:first-child { border-top: 1px solid color-mix(in srgb, var(--sand) 12%, transparent); }
.pref-row-label {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--sand);
}
.pref-dd { position: relative; }
.pref-dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--sand) 72%, transparent);
  transition: color .18s ease;
}
.pref-dd-btn:hover, .pref-dd.open .pref-dd-btn { color: var(--sand); }
.pref-dd-caret { width: 10px; height: 6px; opacity: .7; transition: transform .22s ease; }
.pref-dd.open .pref-dd-caret { transform: rotate(180deg); }
.pref-dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto;
  margin: 0; padding: 6px; list-style: none;
  min-width: 170px;
  background: color-mix(in srgb, var(--ink-abyss) 92%, #000);
  border: 1px solid color-mix(in srgb, var(--sand) 14%, transparent);
  border-radius: 12px;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 5; white-space: nowrap;
  max-height: min(46vh, 360px); overflow-y: auto; scrollbar-width: none;
}
.pref-dd-menu::-webkit-scrollbar { display: none; }
.pref-dd.open .pref-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pref-dd-menu li {
  padding: 9px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--sand) 68%, transparent);
  cursor: pointer; transition: color .16s ease, background-color .16s ease;
}
.pref-dd-menu li:hover { color: var(--sand); background: color-mix(in srgb, var(--sand) 8%, transparent); }
.pref-dd-menu li[aria-selected="true"] { color: var(--sand); background: color-mix(in srgb, var(--sand) 6%, transparent); }

.places {
    /* Top padding lives here now that the carousel above is hidden;
       without it the tiles butt straight against the hero. */
    padding: clamp(72px, 10vw, 130px) 0 clamp(72px, 11vw, 150px);
    background: var(--ink-abyss);
  }
.place-cap {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 16px;
    transition: opacity .35s ease;
  }
.place-card--soon { cursor: default; }
.place-soon {
    position: absolute; inset: 0;
    z-index: 4;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; text-align: center;
    background: color-mix(in srgb, var(--ink-klein) 55%, var(--ink-abyss));
    color: var(--sand);
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 28px);
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }
.place-card--soon.soon-on .place-soon { opacity: 1; }
.place-card--soon.soon-on .place-cap { opacity: 0; }

/* light theme layer (was site-theme.css) */
/* ============================================================
   Veron Living — light theme (single source of truth)

   This file is loaded AFTER each page's inline <style>, so its
   rules win. To experiment with the palette, change the tokens
   in :root below; every surface keys off them. You never have to
   touch the individual pages again.
   ============================================================ */
:root{
  /* Light system — the single source of truth for the whole static site.
     Change a colour here and it updates the marketing pages AND the
     member area (member.css keys off these same tokens). */
  --page-bg:  #f1f3f4;   /* ivory with a blue whisper — the field           */
  --surface:  #ffffff;   /* crisp white — cards, inputs, dropdowns           */
  --haze:     #e4ecf6;   /* soft sea haze — the one small blue moment        */
  --ink:      #12243b;   /* deep navy — headings                            */
  --ink-soft: #45566a;   /* body text                                       */
  --ink-mute: #6e7c8d;   /* labels, eyebrows, meta                          */
  --hairline: color-mix(in srgb, #12243b 12%, transparent);
  --hairline-soft: color-mix(in srgb, #12243b 7%, transparent);
  --accent:   var(--ink-klein);   /* Klein blue — sings on ivory            */
  --amber:    #9a5b00;   /* warm caution tone (we never use red)            */
  --sky:      #4a93cf;   /* calm sky blue for picked date ranges            */

  /* Ocean base tokens — kept here too so this file defines every colour
     the site uses (the marketing heroes and imagery still draw on them). */
  --ink-abyss: #000917;
  --ink-deep:  #001730;
  --ink-mid:   #002f5c;
  --ink-klein: #002fa7;
  --tide:      #0b6ea3;
  --foam:      #d9ecf5;
  --sand:      #fffdf5;
  --paper:     #f4efe4;
}

/* ---- the field + default text ---------------------------------- */
body{ background: var(--page-bg); color: var(--ink-soft); }

/* Sections that were deep ocean become the ivory field.
   (.properties carried a gradient — this flat fill overrides it.)
   .why and footer get their own blue treatments further down. */
.shelf, .offer, .places,
.info-block, .properties, .search-strip{ background: var(--page-bg); }

/* ---- type: dark ink on the light field ------------------------- */
.h2, .h3, .display, .display em{ color: var(--ink); }
.body, .lead{ color: var(--ink-soft); }
.eyebrow{ color: var(--ink-mute); }

/* ---- keep every hero a dark, cinematic moment ------------------ */
/* The hero sits over dark imagery, so its text stays light. These
   rules come after the darkening block above, so the hero wins. */
.hero-content{ color: var(--sand); }
.hero .display, .hero .display em,
.hero-tag, .hero--image-h{ color: var(--sand); }
.hero .lead{ color: color-mix(in srgb, var(--sand) 90%, transparent); }
.hero .eyebrow, .hero-eyebrow{ color: color-mix(in srgb, var(--foam) 90%, transparent); }

/* ---- homepage: offer / shelf / why ----------------------------- */
.offer-label{ color: var(--ink); }
.offer-card:hover .offer-label{ color: var(--accent); }
.shelf-label{ color: var(--ink-soft); }
.shelf-card:hover .shelf-label{ color: var(--accent); }
.why{ background: var(--haze); }   /* the sea-haze band now lives here */
.why-card{ border-top-color: var(--hairline); }
.why-card .h3{ color: var(--ink); }
.why-card p{ color: var(--ink-soft); }
/* .why-num stays Klein; the place tiles are photos and keep their
   light captions over the scrim, so they are left untouched. */

/* ---- footer: the blue party — blue text on a rich blue field,
        kept deep so it never glares --------------------------- */
footer{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-klein) 48%, var(--ink-deep)) 0%,
    color-mix(in srgb, var(--ink-klein) 28%, var(--ink-deep)) 100%);
  color: color-mix(in srgb, var(--foam) 72%, transparent);
  border-top-color: color-mix(in srgb, var(--foam) 16%, transparent);
}
.foot-mark{ color: color-mix(in srgb, var(--foam) 92%, transparent); }
.foot-mark em{ color: color-mix(in srgb, var(--foam) 42%, var(--ink-klein)); }
.foot-col a{ color: color-mix(in srgb, var(--foam) 70%, transparent); }
.foot-col a:hover{ color: color-mix(in srgb, var(--foam) 96%, transparent); }
.foot-col-h{ color: color-mix(in srgb, var(--foam) 42%, transparent); }
.foot-tag, .foot-legal{ color: color-mix(in srgb, var(--foam) 60%, transparent); }
.foot-legal a{ color: inherit; text-decoration: none; transition: color .18s ease; }
.foot-legal a:hover{ color: color-mix(in srgb, var(--foam) 92%, transparent); }
.foot-bottom{ border-top-color: color-mix(in srgb, var(--foam) 16%, transparent); }

/* ---- surfaces: crisp white cards on ivory ---------------------- */
.search, .search-suggest{ background: var(--surface); border: 1px solid var(--hairline); }
.property-card{
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 40px -28px rgba(18,36,59,.22);
}

/* ---- Shores dropdown: a tidy light panel so it reads over both
        the dark hero and the light body ------------------------- */
.menu-dropdown{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 6px 16px;
  box-shadow: 0 24px 60px -30px rgba(18,36,59,.32);
}
.menu-dropdown a{ color: var(--ink-soft); }
.menu-dropdown a:hover{ color: var(--accent); }

/* ---- listing pages --------------------------------------------- */
.properties__title{ color: var(--ink); }
.properties__head .eyebrow{ color: var(--ink-mute); }
.properties__state{ color: var(--ink-soft); }

/* ---- country info card ----------------------------------------- */
.info-card{
  background: var(--surface);
  border-color: var(--hairline);
  box-shadow: 0 30px 80px -50px rgba(18,36,59,.18);
}
.info-card-h{ color: var(--ink); }
.info-card-lead{ color: var(--ink-soft); }
.info-fact{ border-top-color: var(--hairline); }
.info-fact dt{ color: var(--ink-mute); }
.info-fact dd{ color: var(--ink); }

/* ---- newsletter: a deep, calm ocean moment — stunning, not harsh
        (dark is easy on the eye), and clearly different from the
        haze block above ---------------------------------------- */
.news{
  background:
    radial-gradient(135% 120% at 50% 0%,
      color-mix(in srgb, var(--ink-mid) 78%, var(--ink-klein)) 0%,
      var(--ink-deep) 55%,
      var(--ink-abyss) 100%);
  color: color-mix(in srgb, var(--sand) 80%, transparent);
}
.news .h2{ color: var(--sand); }
.news .eyebrow{ color: color-mix(in srgb, var(--foam) 78%, transparent); }
.news .body{ color: color-mix(in srgb, var(--sand) 82%, transparent); }
.news-input{ background: var(--sand); color: var(--ink); border: 0; }
.news-input::placeholder{ color: color-mix(in srgb, var(--ink-deep) 45%, transparent); }
.news-btn{ background: var(--sand); color: var(--ink-klein); }
.news-btn:hover{ background: color-mix(in srgb, var(--sand) 88%, var(--foam)); }
.news-msg{ color: color-mix(in srgb, var(--foam) 85%, transparent); }
.news-msg.ok{ color: var(--sand); }
.news-msg.error{ color: #ffd7a8; }

/* ---- focus ring reads on light --------------------------------- */
:focus-visible{ outline-color: var(--accent); }

/* ============================================================
   In-page calendar (calendar.js) — never the native picker.
   ============================================================ */
.vbc-field-row { display: flex; gap: 8px; align-items: stretch; }
.vbc-input { flex: 1; }
.vbc-cal-btn { flex: 0 0 auto; width: 46px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); color: var(--ink-mute); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease; }
.vbc-cal-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.vbc-field { position: relative; }
.vbc-pop { position: absolute; z-index: 40; margin-top: 8px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(18,36,59,.3); padding: 14px; max-height: min(70vh, 560px); overflow-y: auto; max-width: calc(100vw - 24px); }

.vbc-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
.vbc-navbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.vbc-navbtn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); }
.vbc-navbtn:disabled { opacity: .35; cursor: default; }
.vbc-months { display: flex; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }
.vbc-month { min-width: 240px; flex: 1 1 240px; }
.vbc-month-h { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: 17px; color: var(--ink); margin: 0 0 8px; }
.vbc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.vbc-dow span { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.vbc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.vbc-pad { aspect-ratio: 1; }
.vbc-day { aspect-ratio: 1; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .12s ease, color .12s ease; }
.vbc-day:hover:not(:disabled):not(.vbc-sel):not(.vbc-inrange) { background: color-mix(in srgb, var(--sky) 18%, transparent); }
.vbc-day.vbc-past { color: var(--ink-mute); opacity: .4; text-decoration: line-through; cursor: default; }
.vbc-day:disabled { cursor: default; }
.vbc-day.vbc-sel { background: var(--sky); color: #fff; }
.vbc-day.vbc-pending { background: var(--sky); color: #fff; }
.vbc-day.vbc-blocked { background: color-mix(in srgb, #b8860b 22%, transparent); color: #7a5600; text-decoration: line-through; }
.vbc-day.vbc-free { background: color-mix(in srgb, #10b981 15%, transparent); color: #047857; }

.vbc-hint { font-size: 13px; color: var(--ink-mute); margin: 12px 0 0; }
.vbc-list { display: grid; gap: 8px; margin-top: 12px; }
.vbc-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, #b8860b 10%, transparent); border: 1px solid color-mix(in srgb, #b8860b 30%, transparent); border-radius: 8px; padding: 8px 12px; }
.vbc-list-t { font-size: 13.5px; color: #7a5600; }
.vbc-list-x { border: 0; background: none; color: #7a5600; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
/* Booking-held ranges: shown but not casually removable (a tap explains why). */
.vbc-list-locked { background: color-mix(in srgb, var(--ink) 5%, transparent); border-color: var(--hairline); }
.vbc-list-locked .vbc-list-t { color: var(--ink-soft); }
.vbc-list-locked .vbc-list-x { color: var(--ink-mute); opacity: .6; }
.vbc-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-mute); }
.vbc-lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.vbc-lg-free { background: color-mix(in srgb, #10b981 22%, transparent); }
.vbc-lg-block { background: color-mix(in srgb, #b8860b 30%, transparent); margin-left: 10px; }

/* range picker (When) */
.vbc-range { position: relative; }
.vbc-range-trigger { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink-mute); cursor: pointer; }
.vbc-range-trigger.vbc-range-set { color: var(--ink); font-weight: 500; }
.vbc-range-pop { min-width: min(300px, 100%); }
.vbc-day.vbc-inrange { background: var(--sky); color: #fff; }
/* A picked day is also .vbc-free (green); make the selection win on click one. */
.vbc-day.vbc-free.vbc-sel, .vbc-day.vbc-free.vbc-pending { background: var(--sky); color: #fff; }
.vbc-range-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline-soft); }
.vbc-range-clear { border: 0; background: none; color: var(--ink-mute); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.vbc-range-done { border: 0; background: var(--accent); color: #fff; border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 13px; cursor: pointer; }

/* rent/monthly pages: availability search row under the search pill */
.avail-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 880px; margin: 14px auto 0; padding: 0 6px; }
.avail-label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.avail-when { min-width: 220px; }
.avail-flex { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.avail-flex input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.avail-clear { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.property-card__per { font-size: 0.6em; color: var(--ink-mute); font-weight: 400; }

/* ------------------------------------------------------------------
   Redesigned hero search box. Loaded after each page's inline styles,
   so these win. Four cells — mode, country, place, one Find button —
   plus a "When" row that appears only for the two rent modes.
   ------------------------------------------------------------------ */
.search { grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.8fr) auto; }

/* One Find button instead of the old Buy/Rent pair. */
.search .search-actions { display: flex; }
.search .search-actions .search-submit { width: 100%; }

/* The "When" fields are a second row INSIDE the same pill — never a
   separate box. It spans the full width under the top row, divided by a
   hairline, sharing the pill's background. Softer corners while it shows
   so the taller box still reads as one rounded card. */
.search.has-when { border-radius: 26px; }
#search-when {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 4px 14px 6px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink-deep) 12%, transparent);
}
#search-when[hidden] { display: none; }
#search-when .avail-label { color: color-mix(in srgb, var(--ink-deep) 55%, transparent); }
#search-when .avail-when { min-width: 200px; }
#search-when .avail-flex { color: color-mix(in srgb, var(--ink-deep) 72%, transparent); }

@media (max-width: 820px) {
  .search { grid-template-columns: 1fr 1fr; }
  /* Mode + country share the top row; place and Find each span full width. */
  .search .search-cell.select { grid-column: auto; }
  .search .search-cell.field { grid-column: 1 / -1; }
  .search .search-actions { grid-column: 1 / -1; margin-top: 8px; }
  #search-when { margin: 4px 6px 4px; }
}

/* Trademark superscript: readable on the header wordmark, proportionate in
   the small footer copyright line. */
/* Trademark: the ™ symbol at the SAME size as the wordmark/text it follows —
   just the glyph, in the same font, no shrinking. The ™ character is already
   drawn as a raised mark inside its own box, so at full text size it reads as a
   proper, integrated trademark. */
sup {
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  vertical-align: baseline;
}
/* ™ on the header/logo wordmark: a small raised mark, half the text size. */
.brand sup,
.brand-mobile sup,
.su-brand sup,
.ex-brand sup {
  font-size: 0.5em;
  vertical-align: super;
}