/* ==========================================================================
   JOYAVERO — global stylesheet
   Boutique alpine hotel · Queenstown NZ · joyavero.com
   -------------------------------------------------------------------------
   Library-first: Bootstrap 5.3.3 carries grid/spacing/components.
   This file adds the brand layer only: tokens, type, decorative primitives
   and the section patterns referenced across all pages (BEM, `jv-` prefix).

   NOTE for future fixes:
   - Do NOT put url(../../images/joyavero_7e92a61880f40.85016023.jpg) backgrounds here — photo.js fills empty url(../../images/joyavero_eca29855df528.06689526.jpg)s with
     random images. All photo backgrounds live inline in the HTML.
   - No SVG anywhere (house rule) — icons are FontAwesome only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette — warm alpine light theme (deliberately not white, not black) */
  --jv-ivory:      #F3EEE3;   /* page background */
  --jv-cream:      #FBF8F1;   /* panels / cards */
  --jv-paper:      #EAE3D3;   /* alt blocks, fills */
  --jv-ink:        #20281F;   /* body text — deep pine ink */
  --jv-ink-soft:   #55604F;   /* secondary text */
  --jv-pine:       #1E3A2F;   /* primary brand green */
  --jv-pine-deep:  #122019;   /* dark sections */
  --jv-brass:      #A9834F;   /* accent */
  --jv-brass-soft: #C9A876;
  --jv-mist:       #D9D0BC;   /* hairlines / borders */
  --jv-cream-on-dark: #F1EBDD;

  /* type */
  --jv-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --jv-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jv-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;

  /* rhythm */
  --jv-radius: 18px;
  --jv-line: 1px solid var(--jv-mist);

  /* bootstrap bridge */
  --bs-body-bg: var(--jv-ivory);
  --bs-body-color: var(--jv-ink);
  --bs-body-font-family: var(--jv-sans);
  --bs-primary: var(--jv-pine);
  --bs-primary-rgb: 30, 58, 47;
  --bs-link-color: var(--jv-pine);
  --bs-link-color-rgb: 30, 58, 47;
  --bs-link-hover-color: var(--jv-brass);
  --bs-link-hover-color-rgb: 169, 131, 79;
  --bs-border-color: var(--jv-mist);
  --bs-secondary-color: var(--jv-ink-soft);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

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

::selection { background: var(--jv-brass); color: #fff; }

h1, h2, h3, h4, .jv-display {
  font-family: var(--jv-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--jv-ink);
}

/* fluid display scale */
.jv-d1 { font-size: clamp(2.6rem, 6vw, 5.25rem); line-height: 1.02; }
.jv-d2 { font-size: clamp(2rem, 4.2vw, 3.5rem);  line-height: 1.08; }
.jv-d3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.15; }
.jv-lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--jv-ink-soft); }

/* thin editorial variant (hero #4 style) */
.jv-thin { font-weight: 300; letter-spacing: 0.01em; }

a { text-underline-offset: 3px; }

img { max-width: 100%; }

/* --------------------------------------------------------------------------
   3. Decorative primitives
   -------------------------------------------------------------------------- */

/* mono eyebrow label with leading rule */
.jv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jv-ink-soft);
}
.jv-eyebrow::before {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--jv-brass);
}
.jv-eyebrow--light { color: rgba(241, 235, 221, 0.75); }

/* [01] index chips */
.jv-index {
  font-family: var(--jv-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--jv-brass);
}

/* giant outline word behind sections */
.jv-outline {
  position: absolute;
  font-family: var(--jv-serif);
  font-weight: 600;
  font-size: clamp(5rem, 16vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(32, 40, 31, 0.12);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.jv-outline--light { -webkit-text-stroke: 1px rgba(241, 235, 221, 0.14); }

/* vertical side label */
.jv-vert {
  writing-mode: vertical-rl;
  font-family: var(--jv-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--jv-ink-soft);
}

/* photo frame — sharp editorial frame + offset print shadow.
   Background image is ALWAYS set inline in HTML (overlay + empty url(../../images/joyavero_05fd040d19bb8.78466133.jpg)). */
.jv-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32, 40, 31, 0.25);
  background-size: cover;
  background-position: center;
  background-color: var(--jv-paper);
  border-radius: 4px;
}
.jv-frame--shadow { box-shadow: 14px 14px 0 rgba(32, 40, 31, 0.08); }
.jv-frame--dark { border-color: rgba(241, 235, 221, 0.25); }

/* aspect ratio helpers */
.jv-ar-45  { aspect-ratio: 4 / 5; }
.jv-ar-34  { aspect-ratio: 3 / 4; }
.jv-ar-11  { aspect-ratio: 1 / 1; }
.jv-ar-43  { aspect-ratio: 4 / 3; }
.jv-ar-169 { aspect-ratio: 16 / 9; }
.jv-ar-219 { aspect-ratio: 21 / 9; }

/* cream panel */
.jv-panel {
  background: var(--jv-cream);
  border: var(--jv-line);
  border-radius: var(--jv-radius);
}
.jv-panel--flat { border-radius: 0; }

/* dark pine panel */
.jv-panel-dark {
  background: var(--jv-pine-deep);
  color: var(--jv-cream-on-dark);
  border: 1px solid rgba(241, 235, 221, 0.14);
  border-radius: var(--jv-radius);
}
.jv-panel-dark h2, .jv-panel-dark h3, .jv-panel-dark .jv-display { color: var(--jv-cream-on-dark); }

/* hairline separated meta rows */
.jv-meta {
  font-family: var(--jv-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jv-ink-soft);
}

/* dotted leader row (spec sheets) */
.jv-spec-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dotted rgba(241, 235, 221, 0.3);
}
.jv-spec-row__dots { flex: 1; border-bottom: 1px dotted rgba(241, 235, 221, 0.25); transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn-jv {
  --bs-btn-font-family: var(--jv-sans);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--jv-pine);
  color: var(--jv-cream-on-dark);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--jv-pine);
  transition: all 0.25s ease;
}
.btn-jv:hover, .btn-jv:focus {
  background: var(--jv-brass);
  border-color: var(--jv-brass);
  color: #fff;
  transform: translateY(-2px);
}

.btn-jv-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: transparent;
  color: var(--jv-ink);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(32, 40, 31, 0.4);
  transition: all 0.25s ease;
}
.btn-jv-line:hover, .btn-jv-line:focus {
  background: var(--jv-ink);
  border-color: var(--jv-ink);
  color: var(--jv-cream-on-dark);
  transform: translateY(-2px);
}

.btn-jv-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: transparent;
  color: var(--jv-cream-on-dark);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(241, 235, 221, 0.45);
  transition: all 0.25s ease;
}
.btn-jv-ghost:hover, .btn-jv-ghost:focus {
  background: var(--jv-cream-on-dark);
  color: var(--jv-pine-deep);
  border-color: var(--jv-cream-on-dark);
}

.btn-jv-sm { padding: 10px 20px; font-size: 0.85rem; }

/* text link with arrow */
.jv-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--jv-pine);
  text-decoration: none;
  border-bottom: 1px solid var(--jv-brass);
  padding-bottom: 2px;
  transition: all 0.2s ease;
}
.jv-link:hover { color: var(--jv-brass); gap: 12px; }
.jv-link--light { color: var(--jv-cream-on-dark); }
.jv-link--light:hover { color: var(--jv-brass-soft); }

/* --------------------------------------------------------------------------
   5. Section scaffolding
   -------------------------------------------------------------------------- */
.jv-section {
  position: relative;
  padding: clamp(72px, 9vw, 128px) 0;
  overflow: hidden;
}
.jv-section--tight { padding: clamp(56px, 7vw, 96px) 0; }
.jv-section--dark {
  background: var(--jv-pine-deep);
  color: var(--jv-cream-on-dark);
}
.jv-section--dark h1, .jv-section--dark h2, .jv-section--dark h3 { color: var(--jv-cream-on-dark); }
.jv-section--paper { background: var(--jv-paper); }
.jv-section--cream { background: var(--jv-cream); }

.jv-section__head { margin-bottom: clamp(40px, 5vw, 72px); }

/* --------------------------------------------------------------------------
   6. Header (injected component)
   -------------------------------------------------------------------------- */
.jv-topbar {
  background: var(--jv-pine-deep);
  color: rgba(241, 235, 221, 0.85);
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.jv-topbar__in {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.jv-topbar__in::-webkit-scrollbar { display: none; }
.jv-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(241, 235, 221, 0.85);
  text-decoration: none;
}
.jv-topbar__item i { color: var(--jv-brass-soft); font-size: 0.78rem; }
a.jv-topbar__item:hover { color: #fff; }
.jv-topbar__item--status i { font-size: 0.5rem; color: #7FB08A; }
.jv-topbar__spacer { flex: 1; }

.jv-nav {
  background: rgba(243, 238, 227, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: var(--jv-line);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.jv-nav.is-scrolled {
  background: rgba(243, 238, 227, 0.98);
  box-shadow: 0 10px 30px rgba(32, 40, 31, 0.08);
}

.jv-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.jv-brand img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(32, 40, 31, 0.2);
}
.jv-brand__text {
  font-family: var(--jv-serif);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--jv-ink);
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jv-brand__text small {
  font-family: var(--jv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  color: var(--jv-brass);
  text-transform: uppercase;
}

.jv-nav__link {
  font-family: var(--jv-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jv-ink);
  text-decoration: none;
  padding: 8px 2px;
  position: relative;
}
.jv-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--jv-brass);
  transition: width 0.25s ease;
}
.jv-nav__link:hover::after, .jv-nav__link.is-active::after { width: 100%; }
.jv-nav__link:hover, .jv-nav__link.is-active { color: var(--jv-pine); }

.jv-burger {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(32, 40, 31, 0.35);
  border-radius: 12px;
  background: transparent;
  color: var(--jv-ink);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.jv-burger:focus { box-shadow: none; }

/* offcanvas mobile menu */
.jv-offcanvas {
  background: var(--jv-cream);
  border-left: var(--jv-line);
  width: min(420px, 92vw);
}
.jv-offcanvas .jv-nav__link {
  font-family: var(--jv-serif);
  font-size: 1.6rem;
  letter-spacing: 0;
  text-transform: none;
  display: block;
  padding: 14px 0;
  border-bottom: var(--jv-line);
}
.jv-offcanvas .jv-nav__link::after { display: none; }
.jv-offcanvas__contacts {
  font-family: var(--jv-mono);
  font-size: 0.8rem;
  color: var(--jv-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jv-offcanvas__contacts i { color: var(--jv-brass); width: 18px; }

/* --------------------------------------------------------------------------
   7. Footer (injected component)
   -------------------------------------------------------------------------- */
.jv-footer {
  background: var(--jv-pine-deep);
  color: rgba(241, 235, 221, 0.8);
  border-top: 1px solid rgba(241, 235, 221, 0.12);
}
.jv-footer h3 {
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jv-brass-soft);
  margin-bottom: 20px;
}
.jv-footer a { color: rgba(241, 235, 221, 0.8); text-decoration: none; }
.jv-footer a:hover { color: #fff; }
.jv-footer__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.jv-footer__menu a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.jv-footer__menu i { font-size: 0.6rem; color: var(--jv-brass); }
.jv-footer__contact { display: flex; flex-direction: column; gap: 14px; font-size: 0.98rem; }
.jv-footer__contact i { color: var(--jv-brass-soft); width: 20px; }
.jv-footer__legal { font-size: 0.82rem; line-height: 1.7; color: rgba(241, 235, 221, 0.6); }
.jv-footer__legalnav {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  font-family: var(--jv-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jv-footer__legalnav a { color: rgba(241, 235, 221, 0.7); text-decoration: none; transition: color 0.2s ease; }
.jv-footer__legalnav a:hover { color: var(--jv-brass-soft); }
.jv-footer__note {
  border: 1px dashed rgba(169, 131, 79, 0.55);
  border-radius: 14px;
  padding: 18px 24px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(241, 235, 221, 0.85);
  background: rgba(169, 131, 79, 0.08);
}
.jv-footer__note i { color: var(--jv-brass-soft); margin-right: 10px; }
.jv-footer__brandline {
  font-family: var(--jv-serif);
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 235, 221, 0.18);
  user-select: none;
}
.jv-footer__bar {
  border-top: 1px solid rgba(241, 235, 221, 0.12);
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 235, 221, 0.55);
}

/* --------------------------------------------------------------------------
   8. Hero — Editorial Typography & Fluid Media Frame (index)
   -------------------------------------------------------------------------- */
.jv-hero { padding-top: clamp(48px, 6vw, 88px); }
.jv-hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--jv-brass);
  background: rgba(169, 131, 79, 0.1);
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jv-pine);
}
.jv-hero__flag i { color: var(--jv-brass); }

.jv-hero__media { z-index: 1; }
.jv-hero__tag {
  position: absolute;
  z-index: 2;
  background: var(--jv-cream);
  border: var(--jv-line);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 18px 40px rgba(32, 40, 31, 0.14);
}
.jv-hero__caption {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: var(--jv-cream-on-dark);
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.jv-hero__panel {
  border-top: var(--jv-line);
  border-bottom: var(--jv-line);
}
.jv-hero__cell {
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-right: var(--jv-line);
  min-height: 84px;
}
.jv-hero__cell:last-child { border-right: 0; }
.jv-hero__cell i { color: var(--jv-brass); font-size: 1.1rem; }
.jv-hero__cell strong { font-family: var(--jv-mono); font-size: 0.95rem; letter-spacing: 0.08em; }
.jv-hero__cell .jv-meta { display: block; margin-top: 3px; }

/* --------------------------------------------------------------------------
   9. Manifesto (about teaser / philosophy)
   -------------------------------------------------------------------------- */
.jv-manifesto__text {
  font-family: var(--jv-serif);
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.jv-manifesto__text em { font-style: italic; color: var(--jv-brass); }
.jv-manifesto__island { z-index: 1; }
.jv-manifesto__sign {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: var(--jv-line);
  padding-top: 24px;
}
.jv-manifesto__sign i { color: var(--jv-brass); font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   10. Masonry (rooms showcase)
   -------------------------------------------------------------------------- */
.jv-masonry { columns: 1; column-gap: 24px; }
.jv-masonry > * {
  break-inside: avoid;
  margin-bottom: 24px;
  display: block;
}
@media (min-width: 768px) { .jv-masonry { columns: 2; } }
@media (min-width: 992px) { .jv-masonry { columns: 3; } }
.jv-mcard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(32, 40, 31, 0.25);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: var(--jv-cream-on-dark);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jv-mcard:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(32, 40, 31, 0.18); color: #fff; }
.jv-mcard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(10, 16, 12, 0.85), rgba(10, 16, 12, 0));
}
.jv-mcard__body h3 { color: #fff; font-size: 1.45rem; margin-bottom: 6px; }
.jv-mcard__chip {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(251, 248, 241, 0.92);
  color: var(--jv-pine);
  font-family: var(--jv-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.jv-mcard--panel { background: var(--jv-cream); border: var(--jv-line); border-radius: var(--jv-radius); color: var(--jv-ink); padding: 28px; }
.jv-mcard--panel:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(32, 40, 31, 0.12); color: var(--jv-ink); }

/* --------------------------------------------------------------------------
   11. Horizontal drift track
   -------------------------------------------------------------------------- */
.jv-drift__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.jv-drift__track::-webkit-scrollbar { display: none; }
.jv-drift__card {
  flex: 0 0 min(560px, 84vw);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(32, 40, 31, 0.25);
  background-size: cover;
  background-position: center;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: var(--jv-cream-on-dark);
  transition: transform 0.3s ease;
}
.jv-drift__card:hover { transform: translateY(-6px); color: #fff; }
.jv-drift__body {
  width: 100%;
  padding: 28px;
  background: linear-gradient(to top, rgba(10, 16, 12, 0.88) 30%, rgba(10, 16, 12, 0));
}
.jv-drift__body h3 { color: #fff; font-size: 1.7rem; }
.jv-drift__progress { height: 2px; background: rgba(32, 40, 31, 0.15); border-radius: 2px; overflow: hidden; }
.jv-drift__bar { height: 100%; width: 20%; background: var(--jv-brass); transition: width 0.2s ease; }
.jv-drift__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(32, 40, 31, 0.35);
  background: transparent;
  color: var(--jv-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.jv-drift__btn:hover { background: var(--jv-pine); border-color: var(--jv-pine); color: var(--jv-cream-on-dark); }

/* --------------------------------------------------------------------------
   12. Bento grid (amenities / features)
   -------------------------------------------------------------------------- */
.jv-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 20px;
}
.jv-bento__cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--jv-radius);
  border: var(--jv-line);
  background: var(--jv-cream);
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.jv-bento__cell--media {
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(32, 40, 31, 0.25);
  color: var(--jv-cream-on-dark);
  justify-content: flex-end;
}
.jv-bento__cell--media h3 { color: #fff; }
.jv-bento__main { grid-column: span 2; grid-row: span 2; }
.jv-bento__tall { grid-row: span 2; }
.jv-bento__wide { grid-column: span 2; }
.jv-bento__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(169, 131, 79, 0.14);
  color: var(--jv-brass);
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.jv-bento__cell--media .jv-bento__icon { background: rgba(251, 248, 241, 0.16); color: var(--jv-cream-on-dark); }

/* --------------------------------------------------------------------------
   13. Metrics monolith
   -------------------------------------------------------------------------- */
.jv-metric__giant {
  font-family: var(--jv-serif);
  font-size: clamp(4.5rem, 12vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--jv-cream-on-dark);
}
.jv-metric__card {
  border: 1px solid rgba(241, 235, 221, 0.16);
  border-radius: var(--jv-radius);
  padding: 26px;
  background: rgba(241, 235, 221, 0.04);
  height: 100%;
}
.jv-metric__card .jv-metric__num {
  font-family: var(--jv-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--jv-cream-on-dark);
}
.jv-metric__ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(127, 176, 138, 0.16);
  color: #9CCBA6;
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. Editorial quote
   -------------------------------------------------------------------------- */
.jv-quote__glyph { font-size: 3rem; color: var(--jv-brass-soft); }
.jv-quote__text {
  font-family: var(--jv-serif);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.3;
  color: var(--jv-cream-on-dark);
}
.jv-quote__author {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(241, 235, 221, 0.07);
  border: 1px solid rgba(241, 235, 221, 0.16);
  border-radius: 16px;
  padding: 16px 22px;
}
.jv-quote__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(241, 235, 221, 0.3);
  flex: 0 0 auto;
}
.jv-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.jv-quote__verified { color: #9CCBA6; font-size: 0.78rem; font-family: var(--jv-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   15. Pipeline / process phases
   -------------------------------------------------------------------------- */
.jv-phase {
  position: relative;
  background: var(--jv-cream);
  border: var(--jv-line);
  border-radius: var(--jv-radius);
  padding: 28px;
  height: 100%;
}
.jv-phase__num {
  font-family: var(--jv-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--jv-brass);
}
.jv-phase__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--jv-pine);
  color: var(--jv-cream-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   16. Marquee (partners)
   -------------------------------------------------------------------------- */
.jv-marquee { overflow: hidden; border-top: var(--jv-line); border-bottom: var(--jv-line); }
.jv-marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  padding: 26px 0;
  animation: jv-marquee 30s linear infinite;
}
.jv-marquee:hover .jv-marquee__track { animation-play-state: paused; }
.jv-marquee__item {
  font-family: var(--jv-serif);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--jv-ink-soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.jv-marquee__item::after {
  content: '\f005'; /* fa-star as separator glyph via FontAwesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.6rem;
  color: var(--jv-brass);
}
@keyframes jv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   17. Full-bleed CTA monolith
   -------------------------------------------------------------------------- */
.jv-cta__title {
  font-family: var(--jv-serif);
  font-size: clamp(2.8rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jv-cream-on-dark);
}
.jv-cta__meta {
  font-family: var(--jv-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 235, 221, 0.7);
}
.jv-cta__meta i { color: #9CCBA6; font-size: 0.55rem; }

/* --------------------------------------------------------------------------
   18. Minimalist canvas hero (about / packages)
   -------------------------------------------------------------------------- */
.jv-canvas__switch {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(32, 40, 31, 0.3);
  background: var(--jv-cream);
  color: var(--jv-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.jv-canvas__switch:hover { background: var(--jv-pine); color: var(--jv-cream-on-dark); border-color: var(--jv-pine); }
.jv-canvas__dots { display: inline-flex; gap: 8px; }
.jv-canvas__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(32, 40, 31, 0.25); }
.jv-canvas__dot.is-active { background: var(--jv-brass); }

/* --------------------------------------------------------------------------
   19. Heritage pillars (about)
   -------------------------------------------------------------------------- */
.jv-pillar {
  border: var(--jv-line);
  border-radius: var(--jv-radius);
  background: var(--jv-cream);
  padding: 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jv-pillar--media {
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(32, 40, 31, 0.25);
  color: var(--jv-cream-on-dark);
}
.jv-pillar--media h3 { color: #fff; }
.jv-pillar__label {
  font-family: var(--jv-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jv-brass);
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   20. Split timeline (about history)
   -------------------------------------------------------------------------- */
.jv-tl__side { position: sticky; top: 110px; }
.jv-tl__rail { position: relative; padding-left: 36px; }
.jv-tl__rail::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--jv-mist);
}
.jv-tl__item { position: relative; padding-bottom: 40px; }
.jv-tl__item:last-child { padding-bottom: 0; }
.jv-tl__item::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--jv-ivory);
  border: 2px solid var(--jv-brass);
}
.jv-tl__year {
  font-family: var(--jv-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--jv-brass);
}

/* --------------------------------------------------------------------------
   21. Sticky stack project deck (about projects)
   -------------------------------------------------------------------------- */
.jv-stack__card {
  position: sticky;
  top: 104px;
  border-radius: var(--jv-radius);
  overflow: hidden;
  border: 1px solid rgba(241, 235, 221, 0.2);
  background-size: cover;
  background-position: center;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  color: var(--jv-cream-on-dark);
  margin-bottom: 28px;
  box-shadow: 0 -14px 40px rgba(32, 40, 31, 0.25);
}
.jv-stack__card:nth-of-type(2) { top: 128px; }
.jv-stack__card:nth-of-type(3) { top: 152px; }
.jv-stack__body {
  width: 100%;
  padding: clamp(24px, 4vw, 44px);
  background: linear-gradient(to top, rgba(10, 16, 12, 0.9) 25%, rgba(10, 16, 12, 0));
}

/* --------------------------------------------------------------------------
   22. Team roster
   -------------------------------------------------------------------------- */
.jv-roster__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  border-top: var(--jv-line);
  text-decoration: none;
  color: var(--jv-ink);
  transition: all 0.25s ease;
  cursor: default;
}
.jv-roster__item:last-child { border-bottom: var(--jv-line); }
.jv-roster__item:hover, .jv-roster__item.is-active { padding-left: 16px; }
.jv-roster__item:hover .jv-roster__name, .jv-roster__item.is-active .jv-roster__name { color: var(--jv-brass); }
.jv-roster__name { font-family: var(--jv-serif); font-size: clamp(1.4rem, 2.4vw, 2rem); transition: color 0.25s ease; }
.jv-roster__portrait { position: sticky; top: 110px; }

/* --------------------------------------------------------------------------
   23. Founder monologue
   -------------------------------------------------------------------------- */
.jv-founder__msg {
  font-family: var(--jv-serif);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   24. Performance archive (progress bars)
   -------------------------------------------------------------------------- */
.jv-bar__track { height: 8px; border-radius: 8px; background: rgba(32, 40, 31, 0.12); overflow: hidden; }
.jv-bar__fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--jv-pine), var(--jv-brass)); width: 0; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }

/* --------------------------------------------------------------------------
   25. Dual-action gateway CTA
   -------------------------------------------------------------------------- */
.jv-gate { min-height: 480px; display: flex; flex-direction: column; }
.jv-gate__half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 72px);
  text-decoration: none;
  transition: filter 0.3s ease;
}
.jv-gate__half:hover { filter: brightness(1.06); }
.jv-gate__half--media {
  background-size: cover;
  background-position: center;
  color: var(--jv-cream-on-dark);
}
.jv-gate__half--media h3 { color: #fff; }

/* --------------------------------------------------------------------------
   26. Brutalist archival index hero (services)
   -------------------------------------------------------------------------- */
.jv-arch { border: 1px solid rgba(32, 40, 31, 0.3); }
.jv-arch__col { padding: clamp(24px, 3vw, 44px); }
.jv-arch__col--bordered { border-left: 1px solid rgba(32, 40, 31, 0.3); border-right: 1px solid rgba(32, 40, 31, 0.3); }
.jv-arch__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(32, 40, 31, 0.18);
  text-decoration: none;
  color: var(--jv-ink);
  transition: all 0.2s ease;
}
.jv-arch__row:hover { padding-left: 10px; color: var(--jv-brass); }

/* --------------------------------------------------------------------------
   27. Accordion service grid with preview (services)
   -------------------------------------------------------------------------- */
.jv-acc .accordion-item {
  background: transparent;
  border: 0;
  border-top: var(--jv-line);
}
.jv-acc .accordion-item:last-child { border-bottom: var(--jv-line); }
.jv-acc .accordion-button {
  background: transparent;
  box-shadow: none;
  font-family: var(--jv-serif);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  color: var(--jv-ink);
  padding: 24px 8px;
  gap: 16px;
}
.jv-acc .accordion-button:not(.collapsed) { color: var(--jv-brass); background: transparent; box-shadow: none; }
.jv-acc .accordion-button:focus { box-shadow: none; }
.jv-acc .accordion-button::after {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(32, 40, 31, 0.3);
  background-image: none;
  content: '\2b'; /* plus glyph */
  font-family: var(--jv-sans);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 36px;
  text-align: center;
  color: var(--jv-ink);
  transition: all 0.25s ease;
}
.jv-acc .accordion-button:not(.collapsed)::after { transform: rotate(45deg); color: var(--jv-brass); border-color: var(--jv-brass); }
.jv-acc .accordion-body { padding: 4px 8px 28px 8px; color: var(--jv-ink-soft); }
.jv-acc__preview { position: sticky; top: 110px; }

/* --------------------------------------------------------------------------
   28. Blueprint matrix (rooms / services grid)
   -------------------------------------------------------------------------- */
.jv-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(32, 40, 31, 0.25);
  border: 1px solid rgba(32, 40, 31, 0.25);
}
.jv-matrix__cell {
  background: var(--jv-cream);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
}
.jv-matrix__cell--media {
  background-size: cover;
  background-position: center;
  color: var(--jv-cream-on-dark);
}
.jv-matrix__cell--media h3 { color: #fff; }
.jv-matrix__price { font-family: var(--jv-serif); font-size: 1.6rem; color: var(--jv-brass); }

/* --------------------------------------------------------------------------
   29. Package slabs (pricing)
   -------------------------------------------------------------------------- */
.jv-slab {
  border: var(--jv-line);
  border-radius: var(--jv-radius);
  background: var(--jv-cream);
  padding: 36px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.jv-slab:hover { transform: translateY(-6px); }
.jv-slab--featured {
  background-size: cover;
  background-position: center;
  border: 2px solid var(--jv-brass);
  color: var(--jv-cream-on-dark);
}
.jv-slab--featured h3, .jv-slab--featured .jv-slab__price { color: #fff; }
.jv-slab__price { font-family: var(--jv-serif); font-size: 2.6rem; color: var(--jv-pine); }
.jv-slab__list { list-style: none; padding: 0; margin: 0 0 26px 0; display: flex; flex-direction: column; gap: 11px; }
.jv-slab__list li { display: flex; gap: 10px; align-items: baseline; font-size: 0.95rem; }
.jv-slab__list i { color: var(--jv-brass); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   30. Rate calculator
   -------------------------------------------------------------------------- */
.jv-calc__board {
  border-radius: var(--jv-radius);
  background: var(--jv-pine-deep);
  color: var(--jv-cream-on-dark);
  padding: 34px;
  border: 1px solid rgba(241, 235, 221, 0.16);
}
.jv-calc__price { font-family: var(--jv-serif); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: #fff; }
.jv-calc .form-range { accent-color: var(--jv-brass); height: 1.6rem; }
.jv-calc .form-range::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jv-cream);
  border: 3px solid var(--jv-brass);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   31. Circular loop (process)
   -------------------------------------------------------------------------- */
.jv-loop__ring {
  position: relative;
  width: min(420px, 88vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px dashed rgba(32, 40, 31, 0.35);
  border-radius: 50%;
}
.jv-loop__core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--jv-pine);
  color: var(--jv-cream-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.jv-loop__node {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--jv-cream);
  border: var(--jv-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--jv-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  gap: 4px;
  box-shadow: 0 12px 30px rgba(32, 40, 31, 0.12);
}
.jv-loop__node i { color: var(--jv-brass); font-size: 1rem; }
.jv-loop__node--1 { top: -34px; left: 50%; transform: translateX(-50%); }
.jv-loop__node--2 { top: 50%; right: -64px; transform: translateY(-50%); }
.jv-loop__node--3 { bottom: -34px; left: 50%; transform: translateX(-50%); }
.jv-loop__node--4 { top: 50%; left: -64px; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   32. FAQ split
   -------------------------------------------------------------------------- */
.jv-faq__side { position: sticky; top: 110px; }

/* --------------------------------------------------------------------------
   33. Concierge terminal (contacts hero)
   -------------------------------------------------------------------------- */
.jv-term__clock {
  border: var(--jv-line);
  border-radius: 14px;
  background: var(--jv-cream);
  padding: 18px 20px;
  text-align: center;
}
.jv-term__time { font-family: var(--jv-mono); font-size: 1.5rem; letter-spacing: 0.06em; color: var(--jv-pine); }
.jv-form .form-control, .jv-form .form-select {
  background: var(--jv-cream);
  border: 1px solid var(--jv-mist);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--jv-ink);
}
.jv-form .form-control:focus, .jv-form .form-select:focus {
  border-color: var(--jv-brass);
  box-shadow: 0 0 0 4px rgba(169, 131, 79, 0.15);
  background: var(--jv-cream);
}
.jv-form .form-label { font-family: var(--jv-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jv-ink-soft); }

/* --------------------------------------------------------------------------
   34. Contact channels / hubs
   -------------------------------------------------------------------------- */
.jv-channel {
  border: var(--jv-line);
  border-radius: var(--jv-radius);
  background: var(--jv-cream);
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jv-channel__value { font-family: var(--jv-serif); font-size: clamp(1.2rem, 2vw, 1.6rem); word-break: break-word; }
.jv-copy-btn {
  border: 1px solid rgba(32, 40, 31, 0.3);
  background: transparent;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  color: var(--jv-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}
.jv-copy-btn:hover { background: var(--jv-pine); color: var(--jv-cream-on-dark); border-color: var(--jv-pine); }
.jv-hub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  border-top: var(--jv-line);
}
.jv-hub__time { font-family: var(--jv-mono); color: var(--jv-brass); white-space: nowrap; }

/* --------------------------------------------------------------------------
   35. Spatial product hero (room / venue pages)
   -------------------------------------------------------------------------- */
.jv-spot__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(169, 131, 79, 0.14);
  border: 1px solid var(--jv-brass);
  color: var(--jv-pine);
  font-family: var(--jv-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.jv-spot__podium {
  border-radius: var(--jv-radius);
  overflow: hidden;
  border: 1px solid rgba(32, 40, 31, 0.25);
  background-size: cover;
  background-position: center;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}
.jv-spot__foot {
  background: var(--jv-cream);
  border: var(--jv-line);
  border-radius: 14px;
  padding: 20px 24px;
  height: 100%;
}

/* --------------------------------------------------------------------------
   36. Lookbook split (editorial)
   -------------------------------------------------------------------------- */
.jv-look__art {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(32, 40, 31, 0.25);
  background-color: var(--jv-paper);
}
.jv-look__art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; }
.jv-look__halo {
  border-radius: var(--jv-radius);
  background-size: cover;
  background-position: center;
  padding: clamp(20px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   37. Cinema reel
   -------------------------------------------------------------------------- */
.jv-reel {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(32, 40, 31, 0.3);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jv-reel__play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 241, 0.7);
  background: rgba(18, 32, 25, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.jv-reel__play:hover { background: var(--jv-brass); border-color: var(--jv-brass); transform: scale(1.06); }
.jv-reel__tc {
  position: absolute;
  top: 18px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  color: rgba(251, 248, 241, 0.85);
  font-family: var(--jv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

/* --------------------------------------------------------------------------
   38. Telemetry specs panel
   -------------------------------------------------------------------------- */
.jv-specs {
  background: var(--jv-pine-deep);
  color: var(--jv-cream-on-dark);
  border: 1px solid rgba(241, 235, 221, 0.16);
  border-radius: var(--jv-radius);
  padding: clamp(24px, 3vw, 40px);
}
.jv-specs h2, .jv-specs h3 { color: var(--jv-cream-on-dark); }
.jv-specs__stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jv-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9CCBA6;
}

/* --------------------------------------------------------------------------
   39. Workflow canvas
   -------------------------------------------------------------------------- */
.jv-flow__step {
  position: relative;
  background: var(--jv-cream);
  border: var(--jv-line);
  border-radius: var(--jv-radius);
  padding: 28px;
  height: 100%;
}
.jv-flow__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -25px;
  width: 26px;
  border-top: 2px dashed var(--jv-brass);
}
.jv-flow__badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--jv-pine);
  color: var(--jv-cream-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   40. Legal / policy pages
   -------------------------------------------------------------------------- */
.jv-legal__num {
  font-family: var(--jv-serif);
  font-size: clamp(3.4rem, 7vw, 6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(169, 131, 79, 0.6);
}
.jv-legal__block { border-top: var(--jv-line); }

/* --------------------------------------------------------------------------
   41. Thank-you page
   -------------------------------------------------------------------------- */
.jv-thanks__mark {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--jv-pine);
  color: var(--jv-cream-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

/* --------------------------------------------------------------------------
   42. Toast + cookie banner (JS-rendered)
   -------------------------------------------------------------------------- */
.jv-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--jv-pine-deep);
  color: var(--jv-cream-on-dark);
  border: 1px solid rgba(169, 131, 79, 0.5);
  border-radius: 14px;
  padding: 16px 22px;
  font-size: 0.92rem;
  box-shadow: 0 20px 50px rgba(18, 38, 31, 0.35);
  animation: jv-toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: min(420px, calc(100vw - 48px));
}
.jv-toast i { color: var(--jv-brass-soft); font-size: 1.1rem; }
.jv-toast.is-leaving { animation: jv-toast-out 0.3s ease forwards; }
@keyframes jv-toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jv-toast-out { to { opacity: 0; transform: translateY(10px); } }

.jv-cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1070;
  width: min(430px, calc(100vw - 48px));
  background: var(--jv-cream);
  border: 1px solid rgba(32, 40, 31, 0.3);
  border-radius: var(--jv-radius);
  padding: 26px;
  box-shadow: 0 24px 60px rgba(32, 40, 31, 0.22);
  animation: jv-toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.jv-cookie__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   43. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .jv-tl__side, .jv-acc__preview, .jv-roster__portrait, .jv-faq__side { position: static; }
  .jv-arch__col--bordered { border-left: 0; border-right: 0; border-top: 1px solid rgba(32, 40, 31, 0.3); border-bottom: 1px solid rgba(32, 40, 31, 0.3); }
}

@media (max-width: 767.98px) {
  .jv-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .jv-bento__cell { min-height: 200px; }
  .jv-bento__main, .jv-bento__tall, .jv-bento__wide { grid-column: auto; grid-row: auto; }
  .jv-masonry { columns: 1; }
  .jv-matrix { grid-template-columns: 1fr; }
  .jv-stack__card { position: static; min-height: 380px; margin-bottom: 30px; }
  .jv-hero__cell { border-right: 0; border-bottom: var(--jv-line); min-height: 0; }
  .jv-hero__cell:last-child { border-bottom: 0; }
  .jv-loop__ring { border: 0; aspect-ratio: auto; width: 100%; }
  .jv-loop__core { display: none; }
  .jv-loop__node {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 14px;
    gap: 14px;
  }
  .jv-flow__step:not(:last-child)::after {
    top: auto;
    bottom: -22px;
    left: 28px;
    right: auto;
    width: 0;
    height: 20px;
    border-top: 0;
    border-left: 2px dashed var(--jv-brass);
  }
  .jv-drift__card { min-height: 360px; }
  .jv-toast { right: 16px; bottom: 16px; }
  .jv-cookie { left: 16px; bottom: 16px; }
}

@media (max-width: 575.98px) {
  .jv-ar-219 { aspect-ratio: 16 / 9; }
  .jv-ar-45, .jv-ar-34 { aspect-ratio: 4 / 3; }
}

/* respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jv-marquee__track { animation: none; }
  .jv-toast, .jv-cookie { animation: none; }
  * { transition-duration: 0.01ms !important; }
}