/* ESKA Connect — shared styles
   Palette + type language pulled from the ESKA Equine brochure:
   deep forest green, warm stone, muted gold, editorial serif + script,
   quiet-luxury restraint (thin lines, generous space, small caps labels). */

:root {
  --green: #1C3B2E;
  --green-deep: #142A20;
  --gold: #A98F63;
  --gold-light: #C9A66B;
  --stone: #E4DCC8;       /* warm taupe background, matches brochure */
  --stone-light: #F1ECE0;
  --cream: #F5F1EA;
  --charcoal: #3A3A3A;
  --white: #FFFFFF;
  --danger: #A3403A;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-script: 'Petit Formal Script', 'Brush Script MT', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--stone-light);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Eyebrow label — small caps line used throughout the brochure
   e.g. "EST. 2025 · SPORT HORSES SPECIALISTS" */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
}
.eyebrow.on-light { color: var(--gold); }

/* Header */
header.site {
  background: var(--green);
  color: var(--cream);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background 0.35s cubic-bezier(0.4,0,0.2,1), backdrop-filter 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s cubic-bezier(0.4,0,0.2,1);
}
header.site.transparent-capable {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
}
/* Logo hides at the very top of hero pages (the flanking marks + title
   already carry the brand moment there) and fades in once you scroll past
   it. The bell and menu icons in .header-actions are untouched by this and
   stay visible the whole time. */
header.site.transparent-capable .logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
}
header.site.transparent-capable.scrolled .logo {
  opacity: 1;
  visibility: visible;
}
header.site.transparent-capable.scrolled {
  position: fixed;
  background: rgba(20,42,32,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
header.site .header-bar {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.site .logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-light);
}
header.site .logo-mark { height: 60px; width: auto; display: block; }
footer.site .footer-mark { height: 40px; width: auto; display: block; margin: 0 auto 14px; opacity: 0.85; }
.logo-wordmark { display: inline-flex; align-items: baseline; gap: 4px; }
.logo-eska {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--gold-light);
}
.logo-connect {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0;
  font-size: 19px;
  color: var(--gold-light);
}

/* Header action icons — notification bell + menu trigger, top right */
.header-actions { display: flex; align-items: center; gap: 10px; position: relative; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,241,234,0.08);
  border: 1px solid rgba(245,241,234,0.16);
  color: var(--cream);
  cursor: pointer;
  position: relative;
  transition: background 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.icon-btn:hover { background: rgba(245,241,234,0.16); border-color: rgba(201,166,107,0.5); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; display: block; }

.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--gold-light);
  color: var(--green-deep);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  border: 2px solid var(--green);
}

/* Hamburger icon that morphs into an X when the nav panel is open */
.menu-lines { width: 18px; height: 13px; position: relative; display: block; }
.menu-lines span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s cubic-bezier(0.4,0,0.2,1), top 0.3s cubic-bezier(0.4,0,0.2,1);
}
.menu-lines span:nth-child(1) { top: 0; }
.menu-lines span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.menu-lines span:nth-child(3) { top: 100%; margin-top: -1.5px; }
.menu-trigger.open .menu-lines span:nth-child(1) { top: 50%; margin-top: -0.75px; transform: rotate(45deg); }
.menu-trigger.open .menu-lines span:nth-child(2) { opacity: 0; }
.menu-trigger.open .menu-lines span:nth-child(3) { top: 50%; margin-top: -0.75px; transform: rotate(-45deg); }

/* Notifications dropdown */
.notif-panel {
  position: absolute; top: 54px; right: 52px;
  width: 320px; max-height: 420px; overflow-y: auto;
  background: rgba(20,42,32,0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(201,166,107,0.22);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1), visibility 0.2s;
  z-index: 220;
}
.notif-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold-light); border-bottom: 1px solid rgba(245,241,234,0.1);
}
.notif-mark-all { background: none; border: none; color: rgba(245,241,234,0.6); font-size: 11px; letter-spacing: 0.5px; cursor: pointer; text-transform: none; }
.notif-mark-all:hover { color: var(--gold-light); }
.notif-empty { padding: 24px 18px; color: rgba(245,241,234,0.5); font-size: 13px; }
.notif-item { padding: 14px 18px; border-bottom: 1px solid rgba(245,241,234,0.06); cursor: pointer; position: relative; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(201,166,107,0.08); }
.notif-item.unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-light); }
.notif-message { color: var(--cream); font-size: 13px; line-height: 1.5; }
.notif-time { color: rgba(245,241,234,0.45); font-size: 11px; margin-top: 4px; }

/* Right-side slide-out nav panel */
.nav-overlay {
  position: fixed; inset: 0; background: rgba(10,20,15,0.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1), visibility 0.45s;
  z-index: 150;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

.nav-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 88vw;
  background: linear-gradient(165deg, rgba(20,42,32,0.98), rgba(28,59,46,0.98));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(201,166,107,0.2);
  box-shadow: -30px 0 60px rgba(0,0,0,0.3);
  padding: 100px 44px 44px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
}
.nav-panel.open { transform: translateX(0); }

/* Nav links glide in with a soft stagger once the panel is open, rather
   than appearing all at once — each item's --i (set in nav.js) staggers
   its delay. Falls back gracefully to instantly visible if JS hasn't set
   --i yet. */
.nav-panel .nav-section-title,
.nav-panel a {
  opacity: 0;
  transform: translateX(14px);
}
.nav-panel.open .nav-section-title,
.nav-panel.open a {
  animation: nav-item-glide 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.025s + 0.08s);
}
@keyframes nav-item-glide {
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel .nav-section-title, .nav-panel a { opacity: 1; transform: none; animation: none; }
}

.nav-panel-close {
  position: absolute; top: 32px; right: 32px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(245,241,234,0.08); border: 1px solid rgba(245,241,234,0.16);
  color: var(--cream); font-size: 16px; cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.2s cubic-bezier(0.4,0,0.2,1);
}
.nav-panel-close:hover { transform: rotate(90deg); background: rgba(245,241,234,0.16); }

.nav-group { margin-bottom: 40px; }

.nav-panel a {
  display: block; padding: 13px 0 13px 16px; margin-left: -16px;
  color: var(--cream); font-size: 16px; font-family: var(--font-display); font-weight: 500;
  border-bottom: 1px solid rgba(245,241,234,0.07);
  position: relative; transition: color 0.3s cubic-bezier(0.4,0,0.2,1), padding-left 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-panel a:last-child { border-bottom: none; }
.nav-panel a::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 1.5px; background: var(--gold-light); transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-panel a:hover { color: var(--gold-light); padding-left: 24px; }
.nav-panel a:hover::before { width: 14px; }

/* Big top-level section headers — PURCHASE / LEASING (as dropdown summaries),
   FINANCIAL & LEGAL and MY PROFILE (plain, same look) — all gold and bold
   for consistent, clear distinction between the site's top-level areas. */
.nav-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  user-select: none;
}
summary.nav-section-title { cursor: pointer; list-style: none; }
summary.nav-section-title::-webkit-details-marker { display: none; }
summary.nav-section-title::after {
  content: ''; width: 8px; height: 8px; flex-shrink: 0; margin-left: 12px;
  border-right: 1.5px solid var(--gold-light); border-bottom: 1.5px solid var(--gold-light);
  transform: rotate(-45deg); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-accordion[open] summary.nav-section-title::after { transform: rotate(45deg); }
summary.nav-section-title:hover { color: var(--cream); }

.nav-accordion { margin-bottom: 28px; }
.nav-accordion-body { padding-bottom: 4px; }
/* The closing batch of links (The Process / After-Sale Care / Costs /
   Sold Horses) within an open section — a visible rule plus extra
   breathing room above it, so it reads as clearly separate from the
   Buy/Sell subgroups just above rather than a continuation of Sell. */
.nav-subgroup-spaced {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(201,166,107,0.28);
}

/* Smaller labels inside an open Purchase/Leasing section — Buy/Sell,
   Riders/Owners — one step down from .nav-section-title so the hierarchy
   (PURCHASE > Buy > Current Collection) reads clearly without a second
   collapsible level. */
.nav-subgroup-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245,241,234,0.45);
  margin: 20px 0 2px;
}
.nav-subgroup-label:first-child { margin-top: 0; }

a.nav-top-link { display: block; margin-bottom: 32px; }
a.nav-top-link:hover { color: var(--cream); }

/* Buttons — quiet, pill-shaped, restrained */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--font-body);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary { background: var(--gold); color: var(--white); }
.btn-primary:hover { background: var(--green); }
.btn-outline { background: transparent; border-color: var(--green); color: var(--green); }
.btn-outline:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Sections / cards */
main { padding: 48px 0 96px; min-height: 60vh; }
h1, h2, h3 { color: var(--green); margin-top: 0; font-family: var(--font-display); font-weight: 600; }
h1 { font-size: 38px; letter-spacing: 0.2px; }
h2 { font-size: 25px; }
.subtitle { color: var(--gold); font-family: var(--font-script); font-size: 20px; margin-top: -6px; }

.card {
  background: var(--white);
  border: 1px solid #e4ded0;
  border-radius: 14px;
  padding: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 26px;
  margin-top: 28px;
}

.listing-card { padding: 0; overflow: hidden; border-radius: 14px; border: none; box-shadow: 0 2px 14px rgba(28,59,46,0.08); transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1); }
.listing-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28,59,46,0.14); }
.listing-card .media {
  aspect-ratio: 4 / 5;
  background: var(--stone-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a89f8c;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  overflow: hidden;
}
/* object-fit:cover so every photo fills its frame edge to edge, no
   letterboxing bars — cards sit flush against each other with no visible
   seam between one photo and the next. object-position is set inline per
   photo (from horse_media.focal_x/focal_y) so cropping can be aimed at
   the right part of the image instead of always defaulting to center. */
.listing-card .media img,
#main-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Click-to-zoom lightbox on the listing detail page's main photo. Full
   image, no border/frame — just the photo centered on a dark backdrop. */
#main-photo-img { cursor: zoom-in; }
.photo-lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,20,15,0.94);
  align-items: center; justify-content: center;
  padding: 48px;
  z-index: 300;
  cursor: zoom-out;
}
.photo-lightbox.open { display: flex; }
.photo-lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border: none;
  box-shadow: none;
  cursor: default;
}
.photo-lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,241,234,0.08);
  border: 1px solid rgba(245,241,234,0.2);
  color: var(--cream);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.4,0,0.2,1);
}
.photo-lightbox-close:hover { background: rgba(245,241,234,0.18); }
.listing-card .body { padding: 18px; }

/* Generic modal shell — used by the "Ask a Question" popup, reusable for
   any future on-page popup that shouldn't navigate away from the listing. */
.site-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,20,15,0.6);
  align-items: center; justify-content: center;
  padding: 24px;
  z-index: 300;
  overflow-y: auto;
}
.site-modal.open { display: flex; }
.site-modal-card {
  background: var(--cream, #F5F1EA);
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px;
  position: relative;
  box-shadow: 0 20px 60px rgba(10,20,15,0.3);
}
.site-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--stone-light, #EDE7DB);
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--green, #1C3B2E);
}
.site-modal-checkbox-list label {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: normal; font-size: 13.5px;
  margin-bottom: 10px; cursor: pointer;
}
.site-modal-checkbox-list input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

/* Sold page — smaller cards than the live browse grid, since there's no
   name/price/detail to show, just a quiet record of what's found a home. */
#sold-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
#sold-grid .listing-card .body { padding: 12px; }
#sold-grid .listing-card .meta { font-size: 12px; margin-bottom: 0; }
.listing-card .ref { color: var(--gold); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.listing-card h3 { margin: 6px 0; font-size: 20px; font-weight: 600; }
.listing-card .meta { font-size: 13px; color: #7a7266; margin-bottom: 10px; }
.listing-card .price { color: var(--green); font-weight: 600; font-size: 17px; font-family: var(--font-body); }
.listing-card .vault-tag {
  display: inline-block;
  background: var(--green);
  color: var(--gold-light);
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Forms */
form .field { margin-bottom: 18px; }
form label { display: block; font-size: 13px; margin-bottom: 7px; color: var(--green); font-weight: 600; letter-spacing: 0.3px; }
form input[type=text], form input[type=email], form input[type=password],
form input[type=number], form select, form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8cfb8;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--white);
  color: var(--charcoal);
}
form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
form textarea { min-height: 100px; resize: vertical; }
form .hint { font-size: 12px; color: #8a8272; margin-top: 5px; }
.checkbox-group label { display: flex; align-items: flex-start; font-weight: normal; margin-right: 16px; margin-bottom: 8px; color: var(--charcoal); }
.checkbox-group input { width: auto; margin-right: 8px; margin-top: 4px; flex-shrink: 0; }
.checkbox-group label span { display: inline; }

/* Field help tooltips — a small "?" next to a label that explains why a
   piece of info is being asked for. Hover on desktop, tap on touch. */
.field-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.field-label-row label { margin-bottom: 0; }
.field-help { position: relative; display: inline-flex; }
.field-help-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--stone-light);
  color: var(--green);
  border: 1px solid var(--green);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  user-select: none;
}
.field-help-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  max-width: 70vw;
  background: var(--charcoal);
  color: var(--white);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}
.field-help-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--charcoal);
}
.field-help:hover .field-help-tooltip,
.field-help:focus-within .field-help-tooltip,
.field-help.is-active .field-help-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.radio-group label { display: flex; align-items: center; margin-bottom: 8px; font-weight: normal; color: var(--charcoal); }
.radio-group input { width: auto; margin-right: 8px; }

/* Clean multi-select "tag" checkboxes — used for Characteristics, Level,
   Gender, and similar multi-select groups, instead of a plain wrapped list
   of native checkboxes. Each option is a pill that fills solid when
   checked; the native checkbox is visually hidden but still fully
   keyboard-accessible (focus-visible outline below). */
.tag-group { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.tag-group label.tag-checkbox { display: block; margin: 0; }
.tag-checkbox input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tag-checkbox span {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #d8cfb8; background: var(--white);
  font-size: 13px; color: var(--charcoal); line-height: 1.3;
  cursor: pointer; user-select: none; transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.tag-checkbox span:hover { border-color: var(--gold); }
.tag-checkbox input:checked + span { background: var(--green); border-color: var(--green); color: var(--cream); }
.tag-checkbox input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
/* On dark green bands (e.g. the Vault form sits on a light card so this
   mainly matters if a tag-group ever appears on an on-green section). */
section.band.on-green .tag-checkbox span { background: rgba(245,241,234,0.06); border-color: rgba(245,241,234,0.25); color: var(--cream); }
section.band.on-green .tag-checkbox input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--green-deep); }

/* Categorized characteristics picker — each category is a collapsible
   "dropdown" (native <details>/<summary>) holding a tag-group of
   checkboxes, so a long vocabulary list stays organized. A "selected"
   chip summary sits below it, listing everything currently checked
   across every category with a one-click remove, so it's easy to see
   the full picture and pull something back out of a search or listing.
   Styled as a single quiet, hairline-divided list (not six separate
   boxed cards) to keep the whole thing compact and unfussy. */
.char-picker { margin-top: 6px; border-top: 1px solid #e4ded0; }
.char-category {
  border: none; border-bottom: 1px solid #e4ded0; border-radius: 0; background: transparent;
}
.char-category summary {
  list-style: none; cursor: pointer; padding: 13px 2px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  letter-spacing: 0.1px; color: var(--charcoal); display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.char-category summary::-webkit-details-marker { display: none; }
.char-category summary::after {
  content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-right: 2px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg); transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.char-category[open] summary::after { transform: rotate(45deg); }
.char-category summary:hover { color: var(--gold); }
.char-category .tag-group { padding: 2px 2px 16px; }
.char-category summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.selected-chips { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.selected-chips-label { font-size: 12px; color: var(--charcoal); opacity: 0.6; width: 100%; margin-bottom: -2px; }
.selected-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 14px; border-radius: 999px;
  background: var(--green); color: var(--cream); font-size: 12.5px;
}
.selected-chip-remove {
  background: none; border: none; color: var(--cream); cursor: pointer;
  font-size: 11px; line-height: 1; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; opacity: 0.8;
}
.selected-chip-remove:hover { opacity: 1; background: rgba(245,241,234,0.18); }

/* Filters — collapsed by default, quiet hairline-framed accordion rather
   than an always-open boxed card, so it doesn't take up space before
   there's a reason to. */
.filters-accordion {
  border-top: 1px solid #e4ded0;
  border-bottom: 1px solid #e4ded0;
  margin: 22px 0 32px;
}
.filters-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--green);
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary::after {
  content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-left: 14px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.filters-accordion[open] .filters-summary::after { transform: rotate(45deg); }
.filters-summary:hover { color: var(--gold); }
#filters-count {
  font-size: 12px; letter-spacing: 0.2px; text-transform: none;
  color: #8a8272; font-weight: 500; margin-right: 14px;
}

.filters-body { padding: 2px 2px 28px; }
.filter-row { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.filter-section { border-top: 1px solid #e4ded0; margin-top: 22px; padding-top: 22px; }
.filters-clear-link {
  display: block; background: none; border: none; padding: 0; margin-top: 22px;
  font-size: 12.5px; color: #8a8272; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; transition: color 0.3s cubic-bezier(0.4,0,0.2,1);
}
.filters-clear-link:hover { color: var(--gold); }

/* Contact accordion in the nav panel — icon-only, no labels, matching the
   circular header icon-buttons for a quiet, consistent minimal treatment.
   Resets the standard .nav-panel a link styling (block row, underline
   sweep, bottom hairline) since these behave as compact icon buttons
   instead of a text link list. */
.nav-contact-body { padding-top: 4px; padding-bottom: 16px; }
.nav-contact-icons { display: flex; gap: 18px; }
.nav-panel a.nav-contact-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  padding: 0; margin-left: 0;
  border: 1px solid rgba(245,241,234,0.16);
  color: var(--gold-light);
  transition: background 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-panel a.nav-contact-icon::before { content: none; }
.nav-panel a.nav-contact-icon:hover {
  background: rgba(201,166,107,0.12); border-color: var(--gold-light);
  transform: translateY(-2px); padding: 0;
}
.nav-contact-icon svg { width: 18px; height: 18px; display: block; }
@media (max-width: 640px) {
  .filter-row { grid-template-columns: 1fr; gap: 20px; }
}

/* Terms & Legal — two labelled parts (Purchase Terms / General Terms),
   each a stack of native <details> accordion rows. Reuses the quiet
   hairline-and-chevron language of .filters-accordion so it reads as
   the same site pattern, but stacked (many independent rows) rather
   than a single collapsed filter panel. */
.terms-part { margin-bottom: 48px; }
.terms-part:last-child { margin-bottom: 0; }
.terms-part-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.terms-part-num {
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--gold); flex-shrink: 0;
}
.terms-part-head h2 { margin: 0; }
.terms-part-intro { color: #6b6455; font-size: 14px; margin: 8px 0 22px; max-width: 640px; }

.terms-accordion {
  border-top: 1px solid #e4ded0;
}
.terms-accordion:last-child { border-bottom: 1px solid #e4ded0; }
.terms-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px;
  font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--green);
  transition: color 0.25s cubic-bezier(0.4,0,0.2,1);
}
.terms-summary::-webkit-details-marker { display: none; }
.terms-summary::after {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.terms-accordion[open] .terms-summary::after { transform: rotate(45deg); }
.terms-summary:hover { color: var(--gold); }
.terms-body { padding: 0 2px 26px; color: #4a4438; font-size: 14.5px; line-height: 1.7; max-width: 700px; }
.terms-body p { margin: 0 0 12px; }
.terms-body p:last-child { margin-bottom: 0; }
.terms-body ul.panel-list { margin-top: 10px; }
.terms-body ul.panel-list li::before { background: var(--gold); }

.form-narrow { max-width: 460px; margin: 0 auto; }

/* Alerts / states */
.alert { padding: 13px 18px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; }
.alert-error { background: #fbeaea; color: var(--danger); border: 1px solid #f0c9c6; }
.alert-success { background: #eaf2ec; color: var(--green); border: 1px solid #c9dccf; }
.alert-info { background: #f1ece2; color: var(--gold); border: 1px solid #e4d8bc; }
.empty-state { text-align: center; padding: 70px 20px; color: #8a8272; font-family: var(--font-body); }

/* Status badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.badge-pending { background: #f1ece2; color: var(--gold); }
.badge-approved { background: #eaf2ec; color: var(--green); }
.badge-rejected, .badge-declined { background: #fbeaea; color: var(--danger); }

.vault-section-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
  border-bottom: 1px solid #e6e1d3;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.badge-sold { background: #e6e6e6; color: #555; }
.badge-draft { background: #ece9e2; color: #6b6455; }

/* My Listings on the dashboard — same collapsible pattern as the browse
   filters (.filters-accordion/.filters-summary), grouped by status so a
   seller with many listings isn't scrolling through everything at once. */
.listing-section-count {
  font-size: 12px; letter-spacing: 0.2px; text-transform: none;
  color: #8a8272; font-weight: 500; margin-right: 14px;
}
.listing-section-body { padding-bottom: 24px; }

/* Small buttons + card action rows (e.g. View / Edit on My Listings) */
.btn-sm { padding: 8px 18px; font-size: 11px; }
.card-actions { display: flex; gap: 8px; padding: 0 18px 18px; }
.card-actions .btn { flex: 1; text-align: center; }

/* Current media thumbnails on the Edit Listing page */
.media-thumb-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.media-thumb { position: relative; width: 110px; }
.media-thumb img, .media-thumb .video-placeholder {
  width: 110px; height: 82px; object-fit: contain; border-radius: 8px;
  border: none; box-shadow: 0 1px 6px rgba(28,59,46,0.14); display: block; background: var(--green);
}
.media-thumb .video-placeholder { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #8a8272; text-align: center; padding: 6px; }
.media-thumb .remove-media-btn {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--danger); color: var(--white);
  border: 2px solid var(--white); cursor: pointer; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.media-thumb.marked-for-removal { opacity: 0.35; }

/* Drag-to-reposition photo preview — shown right after a photo file input
   once a file is chosen (or under an already-uploaded photo on Edit
   Listing). Dragging moves object-position, which is saved as the photo's
   focal_x/focal_y and used everywhere that photo is shown cropped. Purely
   a crop aim, the original file is never touched. */
.focal-picker-wrap { display: inline-block; margin: 10px 10px 0 0; text-align: center; }
.focal-picker {
  position: relative; width: 140px; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 8px; cursor: grab; touch-action: none;
  background: var(--stone-light); box-shadow: 0 1px 6px rgba(28,59,46,0.14);
}
.focal-picker img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.focal-picker.dragging { cursor: grabbing; }
.focal-picker-hint {
  margin-top: 4px; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: #8a8272;
}
/* Same remove button as .media-thumb's, just re-scoped — the Edit Listing
   page's already-uploaded photos use .focal-picker-wrap instead of
   .media-thumb so they can be dragged to reposition. */
.focal-picker-wrap .remove-media-btn {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--danger); color: var(--white);
  border: 2px solid var(--white); cursor: pointer; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* Upload progress bar (create/edit listing forms) */
.progress-bar { height: 8px; background: var(--stone); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-bar-fill { height: 100%; background: var(--gold); width: 0%; transition: width 0.25s cubic-bezier(0.4,0,0.2,1); }

/* Photo/video gallery on the listing detail page */
.photo-thumb-strip { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0 20px; padding-bottom: 2px; }
.photo-thumb {
  width: 74px; height: 56px; object-fit: cover; background: var(--green);
  border-radius: 6px; flex-shrink: 0;
  cursor: pointer; opacity: 0.55; border: 2px solid transparent; transition: opacity 0.15s cubic-bezier(0.4,0,0.2,1), border-color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.photo-thumb:hover { opacity: 0.85; }
.photo-thumb.active { opacity: 1; border-color: var(--gold); }
.video-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.video-list video { width: 100%; border-radius: 10px; background: #000; display: block; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #ddd4bf; margin-bottom: 28px; }
.tabs a { padding: 10px 18px; font-size: 13px; letter-spacing: 0.5px; color: #8a8272; border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--green); border-bottom-color: var(--gold); font-weight: 600; }

/* Wishlist heart button */
.wish-btn {
  background: var(--white);
  border: 1px solid #d8cfb8;
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--danger);
}
.wish-btn.active { background: var(--danger); color: var(--white); border-color: var(--danger); }

/* Footer */
footer.site {
  background: var(--green);
  color: #a9a08a;
  text-align: center;
  padding: 32px;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.footer-contact-icons { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
footer.site a.footer-contact-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(245,241,234,0.18);
  color: #a9a08a;
  transition: background 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), color 0.25s cubic-bezier(0.4,0,0.2,1);
}
footer.site a.footer-contact-icon svg { width: 15px; height: 15px; display: block; }
footer.site a.footer-contact-icon:hover { color: var(--gold-light); border-color: var(--gold-light); background: rgba(201,166,107,0.12); }

/* ============================================================
   Landing page components
   ============================================================ */

/* Full-bleed, photo-led hero. --hero-image can be set per-page (inline style
   or a utility class) once real photography is available — swap one line
   and the whole thing upgrades from gradient to real photo. */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(0deg, rgba(15,30,23,0.75) 0%, rgba(15,30,23,0.25) 45%, rgba(15,30,23,0.15) 100%),
    var(--hero-image, radial-gradient(ellipse at 30% 20%, #2A4E3B 0%, var(--green) 45%, var(--green-deep) 100%));
  background-size: cover, 140% 140%;
  background-position: center, 0% 0%;
  color: var(--cream);
  overflow: hidden;
  animation: hero-drift 22s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  0%   { background-position: center, 0% 0%; }
  100% { background-position: center, 100% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}
.hero-content {
  position: relative;
  max-width: 560px;
  margin-bottom: 8vh;
  padding: 40px 44px;
  background: rgba(20,42,32,0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(245,241,234,0.16);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.hero .eyebrow { margin-bottom: 18px; display: block; }
.hero h1 {
  color: var(--cream);
  font-size: 46px;
  line-height: 1.14;
  margin-bottom: 6px;
}
.hero .script-line {
  font-family: var(--font-script);
  color: var(--gold-light);
  font-size: 28px;
  display: block;
  margin: 6px 0 20px;
}
.hero p.lead {
  font-size: 16px;
  color: #DCD6C7;
  margin-bottom: 30px;
}
.hero .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-outline { border-color: rgba(245,241,234,0.6); color: var(--cream); }
.hero .btn-outline:hover { background: rgba(245,241,234,0.12); border-color: var(--cream); }

/* Reusable glass panel — for any content sitting over a photo/gradient */
.glass-panel {
  background: rgba(20,42,32,0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(245,241,234,0.16);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}

section.band {
  padding: 90px 0;
}
section.band.on-green {
  background: var(--green);
  color: var(--cream);
}
section.band.on-green h2 { color: var(--cream); }
section.band.on-stone { background: var(--stone); }

.section-head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { font-size: 32px; }

/* 2x2 by default — a reliable, always-aligned grid. Four columns only
   once there's genuinely enough width for short lines of text not to
   force any column wider than its share (the previous forced-nowrap
   4-column layout could overflow/misalign depending on content width). */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
@media (min-width: 1000px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-grid.feature-grid-3col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature {
  text-align: left;
}
.feature .rule { width: 34px; height: 1px; background: var(--gold); margin-bottom: 16px; }
.feature-icon { width: 40px; height: 40px; object-fit: contain; margin-bottom: 16px; }
.feature h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 8px; }
.feature p { font-size: 13px; color: #6b6455; margin: 0; line-height: 1.6; }
section.band.on-green .feature p { color: #C7C0AC; }
section.band.on-green .feature h3 { color: var(--gold-light); }

/* How it works — numbered steps, simplified (thin solid line, more air) */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 32px;
}
.steps::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(201,166,107,0.35);
}
.step { position: relative; text-align: center; padding: 0 18px; }
.step-badge {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--stone-light);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  position: relative;
  z-index: 1;
}
.step h3 { font-size: 16px; margin-bottom: 6px; }
.step p { font-size: 13px; color: #6b6455; margin: 0; }

/* How it works — two parallel journeys (Seller / Buyer) */
.journey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 8px;
}
.journey-title {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 20px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,166,107,0.25);
}
.journey-steps { position: relative; }
.journey-steps::before {
  content: "";
  position: absolute;
  top: 6px; bottom: 6px; left: 17px;
  width: 1px;
  background: rgba(201,166,107,0.28);
}
.journey-step {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 26px;
}
.journey-step:last-child { padding-bottom: 0; }
.journey-num {
  position: relative; z-index: 1;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green-deep);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.journey-step h4 { color: var(--gold-light); font-size: 15px; margin: 4px 0 5px; font-family: var(--font-display); font-weight: 600; }
.journey-step p { color: #C7C0AC; font-size: 13px; margin: 0; line-height: 1.6; }

.journey-note {
  max-width: 640px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(201,166,107,0.2);
  text-align: center;
}
.journey-note h3 {
  color: var(--gold-light);
  font-size: 19px;
  margin: 0 0 10px;
}
.journey-note p {
  color: #DCD6C7;
  font-size: 17px;
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
}

@media (max-width: 720px) {
  .journey-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* Listing detail page (photo + "Interested?" sidebar) — the 2fr/1fr split
   is set as an inline style (computed per-listing in JS), so !important is
   needed here to actually override it on small screens and stack the
   sidebar below the photo instead of squeezing both into one row. */
@media (max-width: 860px) {
  .listing-detail-grid { grid-template-columns: 1fr !important; }
}

/* Riders & Owners Journey — facing-stage layout (financial-leasing.html).
   Rather than two independent full-length columns, each of the 8 stages
   is its own row with the rider's copy and the owner's copy facing each
   other across a thin center line (with the ESKA mark as the connecting
   point) so a reader can compare what's happening on each side at the
   same moment in the season, rather than reading two separate lists. */
.lease-journey { margin-top: 8px; }
.lease-journey-header {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  margin-bottom: 8px;
}
.lease-journey-header span {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0 28px;
}
.lease-journey-header span:last-child { text-align: right; }

.lease-stage {
  padding: 32px 0;
  border-bottom: 1px solid rgba(201,166,107,0.18);
}
.lease-stage:first-child { padding-top: 0; }
.lease-stage:last-child { border-bottom: none; padding-bottom: 0; }
.lease-stage-heading { text-align: center; margin-bottom: 22px; }
.lease-stage-heading .lease-stage-num {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lease-stage-heading h3 { color: var(--gold-light); font-size: 21px; margin: 4px 0 0; }

.lease-stage-row { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: start; }
.lease-stage-col { padding: 0 28px; }
.lease-stage-col .lease-stage-label {
  display: block;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  opacity: 0.75;
}
.lease-stage-col.owner .lease-stage-label { text-align: right; }
.lease-stage-col h4 { color: var(--gold-light); font-size: 16px; margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; }
.lease-stage-col.owner h4, .lease-stage-col.owner p { text-align: right; }
.lease-stage-col p { color: #C7C0AC; font-size: 13.5px; line-height: 1.65; margin: 0 0 8px; }
.lease-stage-col p:last-child { margin-bottom: 0; }
.lease-stage-col ul { margin: 8px 0 0; padding: 0 0 0 16px; color: #C7C0AC; font-size: 13.5px; line-height: 1.75; }
.lease-stage-col.owner ul { padding: 0 16px 0 0; text-align: right; list-style-position: inside; }

.lease-stage-connector { position: relative; display: flex; justify-content: center; align-self: stretch; }
.lease-stage-connector::before {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px;
  width: 1px;
  background: rgba(201,166,107,0.3);
}
.lease-stage-connector img {
  position: relative; z-index: 1;
  width: 16px; height: 16px;
  object-fit: contain;
  margin-top: 6px;
  background: var(--green-deep);
  padding: 3px 0;
}

.lease-journey-close {
  max-width: 760px;
  margin: 8px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(201,166,107,0.2);
  text-align: center;
}
.lease-journey-close .eyebrow { display: block; margin-bottom: 8px; }
.lease-journey-close h3 { color: var(--gold-light); font-size: 22px; margin: 0 0 22px; }
.lease-journey-close-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
  margin-bottom: 26px;
}
.lease-journey-close-grid h4 { color: var(--gold-light); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; }
.lease-journey-close-grid p { color: #C7C0AC; font-size: 13.5px; line-height: 1.65; margin: 0; }
.lease-journey-close-statement {
  color: #DCD6C7;
  font-size: 17px;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 720px) {
  .lease-journey-header { display: none; }
  .lease-stage-row { grid-template-columns: 1fr; gap: 18px; }
  .lease-stage-connector { display: none; }
  .lease-stage-col { padding: 0; }
  .lease-stage-col.owner .lease-stage-label,
  .lease-stage-col.owner h4,
  .lease-stage-col.owner p { text-align: left; }
  .lease-stage-col.owner ul { padding: 0 0 0 16px; text-align: left; list-style-position: outside; }
  .lease-journey-close-grid { grid-template-columns: 1fr; }
}

/* Journey ribbon — the simple horizontal Explore -> Complete strip at the
   bottom of the process pages, with gliding arrows between each icon. */
.journey-ribbon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.journey-ribbon-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 100px;
  text-align: center;
}
.journey-ribbon-step img {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
}
.journey-ribbon-step span {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
}
.journey-ribbon-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 48px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-ribbon-arrow svg { width: 100%; height: 14px; overflow: visible; }
.journey-ribbon-arrow .arrow-glide-line {
  stroke: var(--gold-light);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: arrow-glide 2.2s ease-in-out infinite;
}
.journey-ribbon-arrow .arrow-glide-head {
  fill: var(--gold-light);
  opacity: 0;
  animation: arrow-glide-head 2.2s ease-in-out infinite;
}
@keyframes arrow-glide {
  0% { stroke-dashoffset: 34; opacity: 0; }
  12% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes arrow-glide-head {
  0% { opacity: 0; transform: translateX(-6px); }
  12% { opacity: 1; }
  55% { opacity: 1; transform: translateX(0); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
.journey-ribbon-tagline {
  text-align: center;
  margin-top: 30px;
  font-family: var(--font-script);
  color: var(--gold);
  font-size: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .journey-ribbon-arrow .arrow-glide-line,
  .journey-ribbon-arrow .arrow-glide-head { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
}
@media (max-width: 720px) {
  /* align-items: flex-start on the desktop row layout means "top-align" —
     switching to a column direction here flips its cross axis to
     horizontal, so without overriding it every step left-aligns into a
     narrow strip instead of staying centered, leaving a large dead patch
     of empty space down the right side of the phone screen. */
  .journey-ribbon { flex-direction: column; align-items: center; }
  .journey-ribbon-step { width: auto; max-width: 220px; }
  .journey-ribbon-arrow { width: 30px; height: 40px; margin: 0; transform: rotate(90deg); }
}

/* Europe page — animated "viewing trip" map. Abstract/schematic rather
   than a literal map (no mapping assets in this static site), styled to
   match the site's line-and-dot editorial language. Pins fade in with a
   stagger only once the section scrolls into view (reusing .reveal's
   IntersectionObserver via the .reveal.is-visible ancestor selector below),
   and pulse continuously via SMIL <animate> on the ring (more reliable
   across browsers than animating SVG geometry through CSS transforms). */
.trip-map-wrap { max-width: 620px; margin: 40px auto 0; }
.trip-map { width: 100%; height: auto; overflow: visible; display: block; }
.trip-map-lines line { stroke: rgba(201,166,107,0.28); stroke-width: 1; stroke-dasharray: 3 5; }
.trip-pin { opacity: 0; }
.reveal.is-visible .trip-pin { animation: trip-pin-fade 0.8s ease forwards; }
.trip-pin-ring { fill: none; stroke: var(--gold-light); stroke-width: 1.5; }
.trip-pin-dot { fill: var(--gold-light); }
.trip-pin-label {
  fill: #DCD6C7; font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.5px; text-anchor: middle;
}
@keyframes trip-pin-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Purchase / Leasing pillar choice — the two top-level paths through the
   site, each with a buyer-side and seller-side link. Deliberately plain
   (no glass/blur) so it reads as navigation, not decoration. */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.pillar-card {
  background: var(--white);
  border: 1px solid #e4ded0;
  border-radius: 16px;
  padding: 44px 40px;
  text-align: center;
}
.pillar-icon {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.pillar-icon svg { width: 26px; height: 26px; display: block; }
.pillar-card h3 {
  font-size: 24px;
  margin: 10px 0 10px;
}
.pillar-card p {
  color: #6b6455;
  font-size: 14px;
  margin: 0 0 26px;
  line-height: 1.7;
}
.pillar-card .btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* Purchase / Leasing hero slider, above everything else on the landing
   page. Two full-bleed photo slides swipe back and forth (only two
   slides, so it alternates direction rather than looping one-way), each
   carrying its own overlaid heading, copy and buttons — no icons, and a
   strong gradient behind the text for legibility over the photo. */
.hero-slider-section { padding: 64px 0 40px; background: var(--green); }
.hero-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
  margin-bottom: 36px;
}
.hero-title-icon {
  height: 60px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.75;
}
.hero-title-icon-left { transform: scaleX(-1); }
@media (max-width: 960px) {
  .hero-title-icon { display: none; }
}
.hero-slider-title {
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
  max-width: 760px;
  margin: 0;
  color: var(--gold-light);
}
.hero-slider {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  max-height: 760px;
  overflow: hidden;
}
.hero-slider-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0%);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero-slider-track.slide-2 { transform: translateX(-50%); }
.hero-slide {
  width: 50%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,20,15,0.8) 0%, rgba(10,20,15,0.4) 45%, rgba(10,20,15,0.12) 100%);
  display: flex;
  align-items: flex-end;
  padding-bottom: 64px;
}
.hero-slide-content { max-width: 560px; }
.hero-slide-content .eyebrow { color: var(--gold-light); display: block; margin-bottom: 14px; }
.hero-slide-content h2 { color: var(--cream); font-size: 40px; line-height: 1.15; margin-bottom: 12px; }
.hero-slide-content p { color: rgba(245,241,234,0.92); font-size: 15px; line-height: 1.7; margin-bottom: 26px; max-width: 460px; }
.hero-slide-content .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-slide-content .btn-outline { border-color: rgba(245,241,234,0.6); color: var(--cream); }
.hero-slide-content .btn-outline:hover { background: rgba(245,241,234,0.12); border-color: var(--cream); }
@media (max-width: 720px) {
  .hero-slider-title { font-size: 25px; }
  .hero-slider { height: 64vh; min-height: 460px; }
  .hero-slide-content h2 { font-size: 28px; }
}

/* Slide indicator dots — plain small circles, no pill/rectangle stretch,
   the active slide's dot is simply filled solid. */
.hero-slider-dots {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.hero-slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(245,241,234,0.35);
  transition: background 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}
.hero-slider-dot.is-active { background: var(--gold-light); }

/* "Chosen with Purpose" band, now second on the page, paired with a
   second photo for the same editorial, two-image feel as the brochure. */
.chosen-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.chosen-photo-frame {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(28,59,46,0.12);
}
.chosen-photo-frame img { display: block; width: 100%; height: auto; }
.chosen-text h2 { font-size: 38px; margin-bottom: 6px; }
.chosen-text .script-line {
  font-family: var(--font-script);
  color: var(--gold);
  font-size: 24px;
  display: block;
  margin: 6px 0 18px;
}
.chosen-text p.lead { font-size: 15px; color: #6b6455; margin-bottom: 26px; line-height: 1.75; }
@media (max-width: 860px) {
  .chosen-grid { grid-template-columns: 1fr; gap: 36px; }
  .chosen-photo-frame { order: -1; max-width: 480px; margin: 0 auto; }
}

/* Vault teaser — frosted glass card over a photo-style backdrop */
/* The Vault entry banner — shown once a buyer's request is approved and
   they land on the actual gated listings, a VIP-style welcome plus the
   confidentiality reminder they already agreed to when requesting access. */
.vault-welcome {
  background: linear-gradient(160deg, var(--green-deep), var(--green) 85%);
  border: 1px solid rgba(245,241,234,0.18);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 28px;
}
.vault-welcome h3 { color: var(--cream); font-family: var(--font-display); font-size: 21px; margin: 10px 0 12px; }
.vault-welcome p { color: #D7D1BF; font-size: 14px; line-height: 1.7; margin: 0; max-width: 720px; }
.vault-welcome p + p { margin-top: 10px; }

.vault-teaser {
  position: relative;
  z-index: 2;
  border-radius: 22px;
  padding: 4px;
  background-image:
    radial-gradient(ellipse at 70% 20%, #3A5F49 0%, var(--green) 45%, var(--green-deep) 100%);
  overflow: hidden;
}
.vault-teaser-inner {
  background: rgba(20,42,32,0.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(245,241,234,0.16);
  border-radius: 18px;
  padding: 64px 56px;
  text-align: center;
  color: var(--cream);
}
.vault-teaser .eyebrow { justify-content: center; }
.vault-teaser h2 { color: var(--cream); font-size: 30px; margin: 14px 0 8px; }
.vault-teaser .script-line { font-family: var(--font-script); color: var(--gold-light); font-size: 24px; display: block; margin-bottom: 18px; }
.vault-teaser p { max-width: 460px; margin: 0 auto 28px; color: #D7D1BF; font-size: 14px; }


.cta-band {
  text-align: center;
  padding: 100px 0;
}
.cta-band h2 { font-size: 30px; margin-bottom: 10px; }
.cta-band p { color: #6b6455; margin-bottom: 30px; }

@media (max-width: 780px) {
  .hero h1 { font-size: 32px; }
  .hero-content { margin: 0 16px 8vh; padding: 30px 26px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .steps::before { display: none; }
  .vault-teaser-inner { padding: 40px 26px; }
}

/* ============================================================
   Room — status ring (Oura-style) + stage checklist
   ============================================================ */
.status-ring-card {
  position: relative;
  background: linear-gradient(160deg, var(--green-deep), var(--green) 80%);
  border-radius: 20px;
  padding: 36px;
  text-align: center;
  color: var(--cream);
  margin-bottom: 20px;
}
.status-ring { width: 160px; height: 160px; transform: rotate(-90deg); display: block; margin: 0 auto; }
.ring-track { fill: none; stroke: rgba(245,241,234,0.15); stroke-width: 8; }
.ring-progress {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.ring-label {
  position: absolute;
  top: 36px; left: 0; right: 0;
  height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-percent { font-family: var(--font-display); font-size: 32px; color: var(--cream); line-height: 1; }
.ring-stage-name { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-light); margin-top: 6px; max-width: 110px; }

.stage-checklist { background: var(--white); border: 1px solid #e4ded0; border-radius: 14px; padding: 20px 22px; }
.stage-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; color: #b0a894; }
.stage-row.done { color: var(--charcoal); }
.stage-row.current { color: var(--green); font-weight: 600; }
.stage-dot { width: 9px; height: 9px; border-radius: 50%; background: #e4ded0; flex-shrink: 0; }
.stage-row.done .stage-dot { background: var(--gold); }
.stage-row.current .stage-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(28,59,46,0.14); }

/* Scroll reveal — sections fade + rise into place as they enter view.
   Distance bumped up (OURA-style pronounced glide, not a subtle nudge). */
.reveal {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Text-specific glide-in — a horizontal variant of .reveal for headline/copy
   blocks (paired with .reveal so the same scroll observer drives it), so
   text arrives with its own gentle sideways glide rather than just rising
   with the rest of the section. */
.glide-text {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.glide-text.is-visible {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .glide-text { opacity: 1; transform: none; transition: none; }
}

/* Stagger helpers — small, reusable transition delays for grids of cards
   (feature cards, journey columns) so items glide in one after another
   instead of all at once, matching the cascading feel of OURA's site. */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* Micro-interactions */
.btn { transform: translateZ(0); }
.btn:active { transform: scale(0.97); }
html { scroll-behavior: smooth; }

/* Utility */
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }
.text-muted { color: #8a8272; font-size: 14px; }

/* Drag Tabs — an OURA-style interactive title strip, used on the Financial
   and Terms & Legal pages instead of a long stack of plain text-box cards.
   Drag, swipe, or click across the row of titles; the matching explanation
   panel below cross-fades in. Dragging is a progressive enhancement (see
   initDragTabs in nav.js) — every tab is a real button, so click/keyboard
   works even with JS partially failing. */
.drag-tabs-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 6px;
  margin-bottom: 28px;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
}
.drag-tabs-strip::-webkit-scrollbar { display: none; }
.drag-tabs-strip.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.drag-tab {
  flex: 0 0 auto;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid #d8cfb8;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.drag-tab:hover { border-color: var(--gold); }
.drag-tab.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}
.drag-tabs-hint {
  font-size: 12px;
  color: #8a8272;
  margin: -18px 0 22px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drag-tabs-hint svg { width: 14px; height: 14px; flex-shrink: 0; }

.drag-tab-panel { display: none; animation: dragTabIn 0.35s ease; padding: 34px 32px; }
.drag-tab-panel.is-active { display: block; }
.drag-tab-panel p { line-height: 1.7; }
@keyframes dragTabIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* A .card that sits on the green band, reusing .feature-grid/.feature/
   .feature-icon for the icon + title + text layout (same visual language
   as the "Why Choose ESKA" band on the homepage). */
.card-on-green {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}
.card-on-green h2 { color: var(--cream); }
.card-on-green p { color: #C7C0AC; }
.card-on-green .feature-grid { margin-top: 18px; }
.card-on-green .feature p { color: #C7C0AC; }
.card-on-green .feature h3 { color: var(--gold-light); }
.feature-icon-lg { width: 64px; height: 64px; margin-bottom: 18px; }

/* Named groupings on the Terms & Legal page (Purchase / Leasing / General) —
   each wraps its own independent .drag-tabs, so the tab logic in
   initDragTabs() just works per-group with no extra code. */
.terms-group-title { margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 1px solid #d8cfb8; }
.terms-group:first-of-type .terms-group-title { margin-top: 4px; }

/* Small gold-dot bullet list used inside drag-tab panels and cards to break
   up otherwise-dense paragraphs into scannable points. */
.panel-list { list-style: none; margin: 14px 0 0; padding: 0; }
.panel-list li { position: relative; padding-left: 20px; margin-bottom: 10px; line-height: 1.6; }
.panel-list li:last-child { margin-bottom: 0; }
.panel-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.card-on-green .panel-list li::before { background: var(--gold-light); }

@media (max-width: 520px) {
  .site-modal { padding: 12px; align-items: flex-start; }
  .site-modal-card { padding: 22px 18px; max-height: calc(100vh - 24px); margin-top: 12px; }
}

/* Room page on tablets/phones: one centered column instead of squeezing
   the status ring and the cards side by side (the inline 2-column grid is
   set in JS, hence !important). The ring and checklist sit on top, then
   each section as a full-width card; everything is allowed to shrink so
   nothing runs off the right edge of the screen. */
.room-layout > div { min-width: 0; }
@media (max-width: 860px) {
  .room-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
  .room-layout .status-ring-card { max-width: 340px; margin: 0 auto 16px; padding: 28px; }
  .room-layout .stage-checklist { max-width: 340px; margin: 0 auto 8px; }
  .room-layout .card { padding: 22px 20px; }
  .room-layout .card h2 { font-size: 22px; }
  .room-layout .btn { width: 100%; box-sizing: border-box; }
}