/* =========================================================================
   JV PROPERTIES — Brand Design System
   Navy + Gold. Built on Bootstrap grid + Font Awesome.
   All classes namespaced `jv-` to avoid collisions.
   ========================================================================= */

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

:root {
  /* Brand core */
  --jv-navy:        #0E2A47;   /* primary */
  --jv-navy-900:    #0A2038;
  --jv-navy-700:    #163A5E;
  --jv-navy-600:    #1E4A76;
  --jv-gold:        #C9A24B;   /* accent */
  --jv-gold-600:    #B48F3C;
  --jv-gold-200:    #E8DBB7;

  /* Neutrals */
  --jv-canvas:      #F7F5F0;   /* warm off-white page bg */
  --jv-surface:     #FFFFFF;
  --jv-ink:         #1A1A1A;
  --jv-body:        #4C5763;
  --jv-muted:       #7C8794;
  --jv-line:        #E7E2D7;
  --jv-line-2:      #EDEAE2;

  /* Type */
  --jv-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --jv-sans:    'Inter', system-ui, -apple-system, sans-serif;

  --jv-radius: 14px;
  --jv-radius-sm: 10px;
  --jv-shadow: 0 18px 50px -24px rgba(14, 42, 71, 0.35);
  --jv-shadow-sm: 0 10px 30px -18px rgba(14, 42, 71, 0.30);
  --jv-container: 1200px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--jv-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--jv-body);
  background: var(--jv-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--jv-navy); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--jv-gold-600); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jv-display);
  color: var(--jv-navy);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1.1rem; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.15rem; }

.jv-container { max-width: var(--jv-container); margin: 0 auto; padding: 0 24px; }
/* Caps line length for readability WITHOUT indenting the block: prose sections
   keep the same left edge as every full-width section on the page. */
.jv-narrow { max-width: 820px; margin-left: 0; margin-right: auto; }
/* Centred blocks (FAQ) opt back in explicitly. */
.jv-narrow.is-centered { margin-left: auto; }

/* ---------- Helpers ---------- */
.jv-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--jv-sans);
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--jv-gold-600);
  margin-bottom: 18px;
}
.jv-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--jv-gold); display: inline-block; }
.jv-eyebrow.is-light { color: var(--jv-gold-200); }

.jv-section { padding: 96px 0; }
.jv-section.is-tight { padding: 72px 0; }
.jv-section-head { max-width: 720px; margin-bottom: 52px; }
.jv-section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.jv-section-head h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; }
.jv-section-head p { font-size: 18px; margin-bottom: 0; }

.jv-lede { font-size: 20px; line-height: 1.7; color: var(--jv-ink); }
.text-gold { color: var(--jv-gold-600); }
.bg-navy { background: var(--jv-navy); }
.bg-canvas { background: var(--jv-canvas); }
.bg-surface { background: var(--jv-surface); }

/* ---------- Icons (lucide SVG) ---------- */
.jv-ico { display: inline-block; vertical-align: -0.145em; flex: none; }
.jv-card .ic .jv-ico, .jv-info-item .ic .jv-ico { vertical-align: 0; }

/* ---------- Buttons ---------- */
.jv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--jv-sans); font-weight: 600; font-size: 15px;
  padding: 15px 30px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; transition: all .22s ease; line-height: 1; white-space: nowrap;
}
.jv-btn i, .jv-btn .jv-ico { font-size: 16px; }
.jv-btn--gold { background: var(--jv-gold); color: var(--jv-navy-900); border-color: var(--jv-gold); }
.jv-btn--gold:hover { background: var(--jv-gold-600); border-color: var(--jv-gold-600); color: #fff; transform: translateY(-2px); }
.jv-btn--navy { background: var(--jv-navy); color: #fff; border-color: var(--jv-navy); }
.jv-btn--navy:hover { background: var(--jv-navy-900); color: #fff; transform: translateY(-2px); }
.jv-btn--ghost { background: transparent; color: var(--jv-navy); border-color: var(--jv-line); }
.jv-btn--ghost:hover { border-color: var(--jv-navy); color: var(--jv-navy); }
.jv-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.jv-btn--ghost-light:hover { border-color: var(--jv-gold); color: var(--jv-gold); }

.jv-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.jv-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--jv-navy); }
.jv-textlink i, .jv-textlink .jv-ico { color: var(--jv-gold-600); transition: transform .2s ease; }
.jv-textlink:hover i, .jv-textlink:hover .jv-ico { transform: translateX(4px); }

/* ---------- Header ---------- */
/* Sticky as a pair: the contact bar pins at 0 and the main header pins
   directly under it (topbar height is 44px). Below 991px the topbar is
   hidden, so the header must fall back to top:0 there. */
.jv-topbar { position: sticky; top: 0; z-index: 201; background: var(--jv-navy-900); color: rgba(255,255,255,.72); font-size: 13.5px; }
.jv-topbar a { color: rgba(255,255,255,.72); }
.jv-topbar a:hover { color: var(--jv-gold); }
.jv-topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.jv-topbar-left { display: flex; gap: 26px; }
.jv-topbar-left span i, .jv-topbar-left span .jv-ico { color: var(--jv-gold); margin-right: 8px; }
.jv-topbar-social { display: flex; gap: 18px; align-items: center; }
@media (max-width: 991px){ .jv-topbar { display: none; } }
@media (max-width: 1150px){ .jv-topbar-social a:nth-child(2){ display: none; } }

.jv-header { position: sticky; top: 44px; z-index: 200; background: var(--jv-surface); border-bottom: 1px solid var(--jv-line); }
@media (max-width: 991px){ .jv-header { top: 0; } }
.jv-header.is-stuck { box-shadow: 0 8px 30px -18px rgba(14,42,71,.4); }
.jv-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 82px; }
.jv-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 auto; padding: 0; }
.jv-nav-links > li { position: relative; }
.jv-nav-links > li > a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--jv-sans); font-weight: 500; font-size: 14.5px; color: var(--jv-ink);
  padding: 11px 13px; border-radius: 8px;
}
.jv-nav-links > li > a:hover, .jv-nav-links > li.is-active > a { color: var(--jv-navy); }
.jv-nav-links > li.is-active > a { font-weight: 600; }
.jv-nav-links > li > a .fa-chevron-down,
.jv-nav-links > li > a .jv-ico { font-size: 13px; opacity: .55; }

.jv-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--jv-line); border-radius: 12px;
  box-shadow: var(--jv-shadow); padding: 10px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s ease; z-index: 10;
}
.jv-nav-links > li:hover .jv-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.jv-dropdown li a { display: block; padding: 11px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--jv-body); }
.jv-dropdown li a:hover { background: var(--jv-canvas); color: var(--jv-navy); }
.jv-dropdown li a small { display: block; font-size: 12px; color: var(--jv-muted); font-weight: 400; }

.jv-nav-cta { display: flex; align-items: center; gap: 16px; flex: none; }
.jv-burger { display: none; background: none; border: none; font-size: 22px; color: var(--jv-navy); cursor: pointer; }
@media (max-width: 1180px){
  .jv-nav-links, .jv-nav-cta .jv-btn { display: none; }
  .jv-burger { display: inline-block; }
}

/* ---------- Logo ---------- */
.jv-logo { display: inline-flex; align-items: center; gap: 13px; }
.jv-logo-mark {
  height: 48px; width: auto; flex: none; display: block;
}
.jv-logo { flex: none; }
.jv-logo-text { line-height: 1.05; white-space: nowrap; }
.jv-logo-text b { font-family: var(--jv-display); font-weight: 600; font-size: 20px; color: var(--jv-navy); letter-spacing: .01em; display: block; }
.jv-logo-text span { font-family: var(--jv-sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--jv-muted); }
.jv-logo.is-light .jv-logo-text b { color: #fff; }
.jv-logo.is-light .jv-logo-text span { color: rgba(255,255,255,.55); }

/* ---------- Mobile menu ---------- */
.jv-mobile { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.jv-mobile.is-open { visibility: visible; }
.jv-mobile-backdrop { position: absolute; inset: 0; background: rgba(10,32,56,.5); opacity: 0; transition: opacity .25s ease; }
.jv-mobile.is-open .jv-mobile-backdrop { opacity: 1; }
.jv-mobile-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw);
  background: #fff; box-shadow: -20px 0 60px -30px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .3s ease; padding: 24px; overflow-y: auto;
}
.jv-mobile.is-open .jv-mobile-panel { transform: translateX(0); }
.jv-mobile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.jv-mobile-close { background: none; border: none; font-size: 22px; color: var(--jv-navy); cursor: pointer; }
.jv-mobile-links { list-style: none; margin: 0 0 24px; padding: 0; }
.jv-mobile-links li a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--jv-line); font-weight: 500; color: var(--jv-ink); font-size: 16px; }
.jv-mobile-links li.is-sub a { padding-left: 18px; font-size: 14.5px; color: var(--jv-body); font-weight: 400; }
.jv-mobile-contact { font-size: 14px; color: var(--jv-body); }
.jv-mobile-contact a { color: var(--jv-navy); font-weight: 600; }

/* ---------- Page hero (inner pages) ---------- */
.jv-pagehero { position: relative; background: var(--jv-navy); color: #fff; padding: 84px 0 78px; overflow: hidden; }
.jv-pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 120% at 85% 0%, rgba(201,162,75,.16), transparent 60%);
  pointer-events: none;
}
.jv-pagehero-media { position: absolute; inset: 0; z-index: 0; }
.jv-pagehero-media img { width: 100%; height: 100%; object-fit: cover; }
.jv-pagehero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--jv-navy-900) 12%, rgba(14,42,71,.92) 45%, rgba(14,42,71,.72) 100%);
}
.jv-pagehero .jv-container { position: relative; z-index: 2; }
.jv-pagehero h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); max-width: 900px; margin-bottom: 14px; }
.jv-pagehero p { color: rgba(255,255,255,.78); font-size: 19px; max-width: 720px; margin: 0; }

/* ---------- Home hero ---------- */
.jv-hero { position: relative; background: linear-gradient(120deg, var(--jv-navy-900) 0%, var(--jv-navy) 55%, var(--jv-navy-700) 100%); color: #fff; overflow: hidden; }
.jv-hero-media { position: absolute; inset: 0; z-index: 0; }
.jv-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.jv-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, var(--jv-navy-900) 8%, rgba(14,42,71,.86) 50%, rgba(22,58,94,.7) 100%); }
.jv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(50% 90% at 88% 15%, rgba(201,162,75,.18), transparent 55%);
}
.jv-hero-inner { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 104px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.jv-hero h1 { color: #fff; font-size: clamp(38px, 5.2vw, 62px); line-height: 1.06; margin-bottom: 22px; }
.jv-hero h1 em { font-style: normal; color: var(--jv-gold); }
.jv-hero-sub { font-size: 19px; color: rgba(255,255,255,.82); max-width: 620px; margin-bottom: 32px; }
.jv-hero-stats { display: flex; gap: 40px; margin-top: 46px; flex-wrap: wrap; }
.jv-hero-stats .n { font-family: var(--jv-display); font-size: 38px; font-weight: 600; color: var(--jv-gold); line-height: 1; }
.jv-hero-stats .l { font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 8px; }
.jv-hero-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 30px; backdrop-filter: blur(6px); }
.jv-hero-card h3 { color: #fff; font-size: 21px; margin-bottom: 8px; }
.jv-hero-card p { color: rgba(255,255,255,.72); font-size: 15px; }
.jv-audience { display: grid; gap: 14px; margin-top: 4px; }
.jv-audience a {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff;
}
.jv-audience a:hover { border-color: var(--jv-gold); background: rgba(201,162,75,.1); color: #fff; }
.jv-audience a .ic { width: 42px; height: 42px; flex: none; border-radius: 10px; background: rgba(201,162,75,.18); color: var(--jv-gold); display: grid; place-items: center; font-size: 16px; }
.jv-audience a b { display: block; font-family: var(--jv-sans); font-weight: 600; font-size: 15.5px; }
.jv-audience a small { color: rgba(255,255,255,.62); font-size: 13px; }
.jv-audience a .go { margin-left: auto; color: var(--jv-gold); }
@media (max-width: 991px){ .jv-hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 72px; } }

/* ---------- Cards & grids ---------- */
.jv-grid { display: grid; gap: 26px; }
.jv-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.jv-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.jv-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px){ .jv-grid.cols-3, .jv-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .jv-grid.cols-2, .jv-grid.cols-3, .jv-grid.cols-4 { grid-template-columns: 1fr; } }

.jv-card {
  background: var(--jv-surface); border: 1px solid var(--jv-line); border-radius: var(--jv-radius);
  padding: 32px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; height: 100%;
}
.jv-card:hover { transform: translateY(-4px); box-shadow: var(--jv-shadow); border-color: var(--jv-gold-200); }
.jv-card .ic {
  width: 56px; height: 56px; border-radius: 12px; background: var(--jv-navy);
  color: var(--jv-gold); display: grid; place-items: center; font-size: 20px; margin-bottom: 22px;
}
.jv-card h3 { font-size: 21px; margin-bottom: 10px; }
.jv-card p { font-size: 15.5px; margin-bottom: 16px; }
.jv-card .jv-textlink { margin-top: auto; }

.jv-card--num { position: relative; }
.jv-card--num .step { font-family: var(--jv-display); font-size: 15px; font-weight: 700; color: var(--jv-gold-600); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; display: block; }

/* Feature list with check icons */
.jv-checklist { list-style: none; padding: 0; margin: 0; }
.jv-checklist li { position: relative; padding-left: 34px; margin-bottom: 14px; font-size: 15.5px; color: var(--jv-body); }
.jv-checklist li::before {
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px;
  position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(201,162,75,.15); color: var(--jv-gold-600); display: grid; place-items: center;
}
.jv-checklist li b { color: var(--jv-ink); }
.jv-checklist.is-light li { color: rgba(255,255,255,.82); }
.jv-checklist.is-light li b { color: #fff; }

/* ---------- Stats band ---------- */
.jv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 991px){ .jv-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.jv-stat { text-align: center; }
.jv-stat .n { font-family: var(--jv-display); font-size: clamp(34px, 4vw, 48px); font-weight: 600; color: var(--jv-gold); line-height: 1; }
.jv-stat .l { font-size: 14.5px; color: rgba(255,255,255,.72); margin-top: 12px; }
.jv-stats.on-light .jv-stat .n { color: var(--jv-navy); }
.jv-stats.on-light .jv-stat .l { color: var(--jv-body); }

/* ---------- Split / media rows ---------- */
.jv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.jv-split.is-narrow-media { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 991px){
  /* .is-narrow-media repeated here: its 2-class base rule would otherwise
     out-rank this collapse and leave two squeezed columns on phones. */
  .jv-split, .jv-split.is-narrow-media { grid-template-columns: 1fr; gap: 34px; }
}
.jv-split h2 { font-size: clamp(28px, 3.6vw, 40px); }

/* ---------- Process steps (vertical) ---------- */
.jv-steps { counter-reset: step; display: grid; gap: 0; }
.jv-step { display: grid; grid-template-columns: 78px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--jv-line); }
.jv-step:last-child { border-bottom: none; }
.jv-step .num {
  counter-increment: step; width: 60px; height: 60px; border-radius: 14px; flex: none;
  background: var(--jv-canvas); border: 1px solid var(--jv-line); color: var(--jv-navy);
  font-family: var(--jv-display); font-weight: 700; font-size: 22px; display: grid; place-items: center;
}
.jv-step .num::before { content: counter(step, decimal-leading-zero); }
.jv-step h3 { font-size: 20px; margin-bottom: 6px; }
.jv-step p { margin-bottom: 0; font-size: 15.5px; }

/* ---------- Comparison table ---------- */
.jv-table-wrap { overflow-x: auto; border: 1px solid var(--jv-line); border-radius: var(--jv-radius); background: #fff; }
.jv-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.jv-table th, .jv-table td { padding: 18px 22px; text-align: left; vertical-align: top; font-size: 15px; border-bottom: 1px solid var(--jv-line); }
.jv-table thead th { font-family: var(--jv-sans); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--jv-muted); background: var(--jv-canvas); }
.jv-table thead th:last-child { color: var(--jv-navy); }
.jv-table td:first-child { font-weight: 600; color: var(--jv-ink); font-family: var(--jv-sans); }
.jv-table .col-jv { background: rgba(201,162,75,.06); color: var(--jv-ink); }
.jv-table tbody tr:last-child td { border-bottom: none; }

/* ---------- Leadership ---------- */
.jv-leader { background: #fff; border: 1px solid var(--jv-line); border-radius: var(--jv-radius); overflow: hidden; height: 100%; }
.jv-leader-top { display: flex; gap: 18px; align-items: center; padding: 28px 28px 20px; }
.jv-leader-avatar { width: 68px; height: 68px; border-radius: 50%; flex: none; background: var(--jv-navy); color: var(--jv-gold); display: grid; place-items: center; font-family: var(--jv-display); font-size: 24px; font-weight: 600; overflow: hidden; }
.jv-leader-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.jv-leader-top h3 { font-size: 20px; margin: 0; }
.jv-leader-top .role { font-size: 13.5px; color: var(--jv-gold-600); font-weight: 600; }
.jv-leader-body { padding: 0 28px 28px; }
.jv-leader-body p { font-size: 15px; }
.jv-leader-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--jv-muted); border-top: 1px solid var(--jv-line); padding-top: 14px; margin-top: 4px; }

/* ---------- CTA band ---------- */
.jv-cta { position: relative; background: var(--jv-navy); color: #fff; border-radius: 22px; padding: 64px; overflow: hidden; }
.jv-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 130% at 90% 20%, rgba(201,162,75,.2), transparent 55%); }
.jv-cta > * { position: relative; z-index: 2; }
.jv-cta h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.jv-cta p { color: rgba(255,255,255,.8); font-size: 18px; margin-bottom: 28px; }
@media (max-width: 640px){ .jv-cta { padding: 40px 28px; } }

/* ---------- Accordion (FAQ) ---------- */
.jv-acc-group + .jv-acc-group { margin-top: 44px; }
.jv-acc-group > h3 { font-size: 22px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--jv-gold-200); }
.jv-acc { background: #fff; border: 1px solid var(--jv-line); border-radius: 12px; overflow: hidden; align-self: start; }
.jv-acc summary {
  list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; gap: 20px;
  align-items: center; font-family: var(--jv-display); font-weight: 600; font-size: 17.5px; color: var(--jv-navy);
}
.jv-acc summary::-webkit-details-marker { display: none; }
.jv-acc summary .chev { flex: none; color: var(--jv-gold-600); transition: transform .2s ease; }
.jv-acc[open] summary .chev { transform: rotate(45deg); }
.jv-acc-body { padding: 0 24px 22px; font-size: 15.5px; color: var(--jv-body); }
.jv-acc-body p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.jv-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 991px){ .jv-contact-grid { grid-template-columns: 1fr; gap: 36px; } }
.jv-info-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--jv-line); }
.jv-info-item:last-child { border-bottom: none; }
.jv-info-item .ic { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--jv-navy); color: var(--jv-gold); display: grid; place-items: center; font-size: 17px; }
.jv-info-item h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--jv-muted); font-family: var(--jv-sans); font-weight: 600; margin-bottom: 4px; }
.jv-info-item a, .jv-info-item p { font-size: 16px; color: var(--jv-ink); margin: 0; font-weight: 500; }

.jv-form { background: #fff; border: 1px solid var(--jv-line); border-radius: var(--jv-radius); padding: 34px; box-shadow: var(--jv-shadow-sm); }
.jv-field { margin-bottom: 18px; }
.jv-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--jv-ink); margin-bottom: 7px; }
.jv-field label .jv-req { color: var(--jv-gold-600); font-weight: 700; margin-left: 1px; }
.jv-field input, .jv-field select, .jv-field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--jv-line); border-radius: 10px;
  font-family: var(--jv-sans); font-size: 15px; color: var(--jv-ink); background: var(--jv-canvas); transition: border-color .2s ease;
}
.jv-field input:focus, .jv-field select:focus, .jv-field textarea:focus { outline: none; border-color: var(--jv-gold); background: #fff; }
.jv-field textarea { min-height: 130px; resize: vertical; }
.jv-form-note { font-size: 13px; color: var(--jv-muted); margin-top: 6px; }

/* ---------- Footer ---------- */
.jv-footer { background: var(--jv-navy-900); color: rgba(255,255,255,.66); padding: 76px 0 0; }
.jv-footer h4 { color: #fff; font-family: var(--jv-sans); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; font-weight: 600; }
.jv-footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 44px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 991px){ .jv-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 640px){ .jv-footer-grid { grid-template-columns: 1fr; } }
.jv-footer p { font-size: 15px; line-height: 1.7; }
.jv-footer-links { list-style: none; margin: 0; padding: 0; }
.jv-footer-links li { margin-bottom: 12px; }
.jv-footer-links a { color: rgba(255,255,255,.66); font-size: 15px; }
.jv-footer-links a:hover { color: var(--jv-gold); }
.jv-footer-contact li { display: flex; gap: 12px; margin-bottom: 16px; font-size: 15px; }
.jv-footer-contact li i, .jv-footer-contact li .jv-ico { color: var(--jv-gold); margin-top: 5px; flex: none; }
.jv-footer-contact a { color: #fff; }
.jv-footer-social { display: flex; gap: 12px; margin-top: 22px; }
.jv-footer-social a { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: rgba(255,255,255,.7); }
.jv-footer-social a:hover { background: var(--jv-gold); border-color: var(--jv-gold); color: var(--jv-navy-900); }
.jv-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; font-size: 13.5px; flex-wrap: wrap; }
.jv-footer-bottom a { color: rgba(255,255,255,.66); }
.jv-footer-bottom a:hover { color: var(--jv-gold); }
.jv-footer-legal { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Back to top ---------- */

/* ---------- Pill / badge ---------- */
.jv-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--jv-gold-600); background: rgba(201,162,75,.12); padding: 7px 14px; border-radius: 100px; }

/* ---------- Prose (long content) ---------- */
.jv-prose h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 8px; margin-bottom: 18px; }
.jv-prose h3 { font-size: 23px; margin-top: 36px; margin-bottom: 12px; }
.jv-prose p { font-size: 17px; }
.jv-prose ul { list-style: none; padding: 0; }
.jv-prose ul li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 16.5px; }
.jv-prose ul li::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--jv-gold-600); position: absolute; left: 8px; top: 1px; }
.jv-prose ul li b, .jv-prose p b { color: var(--jv-ink); }

/* Callout */
.jv-callout { background: #fff; border: 1px solid var(--jv-line); border-left: 4px solid var(--jv-gold); border-radius: 12px; padding: 26px 28px; margin: 26px 0; }
.jv-callout p:last-child { margin-bottom: 0; }
.jv-callout strong { color: var(--jv-navy); }

/* ---------- Parent company (OREL) ---------- */
.jv-orel { display: grid; grid-template-columns: 300px 1fr; gap: 54px; align-items: center; }
.jv-orel-brand { display: flex; justify-content: center; }
.jv-orel-brand img { width: 100%; max-width: 280px; height: auto; display: block; }
.jv-orel-body h2 { font-size: clamp(26px, 3.2vw, 34px); margin-bottom: 16px; }
.jv-orel-body p { font-size: 16.5px; }
.jv-orel-body a { color: var(--jv-gold-600); font-weight: 600; }
.jv-orel-body a:hover { color: var(--jv-navy); }
@media (max-width: 991px){
  .jv-orel { grid-template-columns: 1fr; gap: 28px; }
  .jv-orel-brand { justify-content: flex-start; }
  .jv-orel-brand img { max-width: 220px; }
}

/* ---------- Framed image ---------- */
.jv-figure { position: relative; border-radius: var(--jv-radius); overflow: hidden; border: 1px solid var(--jv-line); box-shadow: var(--jv-shadow); line-height: 0; }
.jv-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jv-figure.is-tall { aspect-ratio: 4 / 5; }
.jv-figure.is-wide { aspect-ratio: 16 / 10; }
.jv-figure .jv-figure-tag {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  background: rgba(10,32,56,.82); color: #fff; backdrop-filter: blur(4px);
  font-family: var(--jv-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: 9px 15px; border-radius: 100px; display: inline-flex; align-items: center; gap: 8px; line-height: 1;
}
.jv-figure .jv-figure-tag i, .jv-figure .jv-figure-tag .jv-ico { color: var(--jv-gold); }

/* ---------- Card stack (leadership) ---------- */
.jv-stack { display: flex; flex-direction: column; gap: 26px; }
.jv-stack-card {
  position: sticky;
  top: calc(148px + var(--i, 0) * 26px);   /* clears the sticky topbar + header */
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 -6px 40px -20px rgba(10,32,56,.5), 0 24px 60px -34px rgba(10,32,56,.6);
}
@media (max-width: 991px){
  .jv-stack-card { position: static; top: auto; }
}
@media (prefers-reduced-motion: reduce){
  .jv-stack-card { position: static; top: auto; }
}

/* ---------- Responsive rhythm (unified: 991px stack point, 640px mobile) ---------- */
@media (max-width: 991px) {
  .jv-section { padding: 72px 0; }
  .jv-section.is-tight { padding: 56px 0; }
  .jv-section-head { margin-bottom: 40px; }
  .jv-pagehero { padding: 64px 0 58px; }
}
@media (max-width: 640px) {
  .jv-section { padding: 56px 0; }
  .jv-section.is-tight { padding: 44px 0; }
  .jv-section-head { margin-bottom: 30px; }
  .jv-pagehero { padding: 50px 0 46px; }
  .jv-pagehero p { font-size: 16.5px; }
  .jv-hero-sub { font-size: 16.5px; }
  .jv-hero-stats { gap: 20px 30px; margin-top: 34px; }
  .jv-hero-stats .n { font-size: 30px; }
  .jv-grid { gap: 18px; }
  .jv-card { padding: 24px; }
  .jv-step { grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 0; }
  .jv-step .num { width: 44px; height: 44px; font-size: 17px; border-radius: 10px; }
  /* Long CTA labels ("Request a Free Valuation & Feasibility Study") cannot
     fit on one phone line. The base .jv-btn sets white-space:nowrap, so the
     pill's intrinsic width overran its card and .jv-cta{overflow:hidden}
     clipped it - the button visibly ran off the card edge. Let the label
     wrap here and cap the pill at the row width. */
  .jv-btn { padding: 14px 22px; white-space: normal; text-align: center; max-width: 100%; line-height: 1.3; }
  .jv-btn-row { width: 100%; }
  .jv-btn-row .jv-btn { flex: 1 1 100%; min-width: 0; justify-content: center; }
  .jv-form { padding: 24px 18px; }
  .jv-footer { padding-top: 56px; }
  .jv-leader-top { padding: 22px 22px 16px; }
  .jv-leader-body { padding: 0 22px 22px; }
  .jv-orel-body h2 { font-size: 24px; }
  .jv-acc summary { padding: 16px 18px; font-size: 16px; }
  .jv-acc-body { padding: 0 18px 18px; }
}

/* utility spacing */
.jv-mt-0 { margin-top: 0; }
.jv-mb-0 { margin-bottom: 0; }

/* ---------- Sticky intro column ----------
   MUST be a class, never an inline style. An inline `position:sticky`
   outranks every media query, so when .jv-split collapses to one column
   at 991px the intro stays pinned and the list scrolls underneath it,
   overlapping the text. Class form lets the breakpoints unpin it. */
.jv-sticky-col { position: sticky; top: 150px; }   /* clears topbar (44) + header (82) */
@media (max-width: 991px){
  .jv-sticky-col { position: static; top: auto; }
}
@media (prefers-reduced-motion: reduce){
  .jv-sticky-col { position: static; top: auto; }
}

/* ---------- Comparison table, small screens ----------
   The table keeps its 640px min-width and scrolls inside its wrapper,
   but the row label must stay put or the scrolled columns lose their
   meaning (you see values with no idea which metric they belong to). */
.jv-table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
.jv-table th:first-child,
.jv-table td:first-child {
  position: sticky; left: 0; z-index: 1;
  box-shadow: 1px 0 0 var(--jv-line);
}
.jv-table td:first-child { background: #fff; }
.jv-table thead th:first-child { background: var(--jv-canvas); z-index: 2; }

/* Scroll affordance: without it the table reads as clipped, not scrollable. */
.jv-table-hint {
  display: none;
  font-family: var(--jv-sans); font-size: 13.5px; color: var(--jv-muted);
  margin: 10px 2px 0; align-items: center; gap: 7px;
}
@media (max-width: 780px){
  .jv-table-hint { display: flex; }
  .jv-table th, .jv-table td { padding: 15px 16px; font-size: 14.5px; }
  .jv-table { min-width: 560px; }
}

/* ---------- Horizontal overflow guard ----------
   `clip` rather than `hidden`: hidden on the root creates a scroll
   container and silently kills every position:sticky descendant. */
html, body { overflow-x: clip; max-width: 100%; }

/* ══════════ Lead popup modal ══════════
   Sits above the mobile menu (z 300) so it is never trapped behind it. */
.jv-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.jv-modal-backdrop { position: absolute; inset: 0; background: rgba(10,32,56,.62); backdrop-filter: blur(3px); animation: jv-fade .22s ease both; }
.jv-modal-panel {
  position: relative; z-index: 2; width: min(560px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--jv-surface); border-radius: 20px; padding: 38px 38px 30px;
  box-shadow: 0 40px 90px -30px rgba(10,32,56,.6);
  animation: jv-pop .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes jv-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes jv-pop  { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce){
  .jv-modal-backdrop, .jv-modal-panel { animation: none; }
}
.jv-modal-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--jv-line); background: #fff; color: var(--jv-navy);
  display: grid; place-items: center; cursor: pointer; font-size: 15px; transition: all .18s ease; z-index: 3;
}
.jv-modal-close:hover { background: var(--jv-navy); color: #fff; border-color: var(--jv-navy); }
.jv-modal-head { margin-bottom: 22px; padding-right: 30px; }
.jv-modal-head h3 { font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 8px; line-height: 1.16; }
.jv-modal-head p { font-size: 15px; color: var(--jv-body); margin: 0; }
.jv-modal-form .jv-field { margin-bottom: 14px; }
.jv-modal-done { text-align: center; padding: 14px 0 6px; }
.jv-modal-tick {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%; background: rgba(201,162,75,.14); color: var(--jv-gold-600); font-size: 26px;
}
.jv-modal-done h3 { font-size: 24px; margin-bottom: 8px; }
.jv-modal-done p { color: var(--jv-body); margin-bottom: 22px; }
@media (max-width: 640px){
  .jv-modal { padding: 12px; }
  .jv-modal-panel { padding: 30px 22px 24px; border-radius: 16px; }
  .jv-modal-head { padding-right: 26px; }
}

/* ══════════ Contact stack (bottom-right) ══════════
   Column of quick actions: WhatsApp, call, then the chat launcher. Anchored
   right so it clears the page content and reads as a standard support dock. */
.jv-chat {
  position: fixed; right: 24px; bottom: 24px; z-index: 350;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.jv-chat-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

/* Round quick-contact buttons */
.jv-fab {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 22px;
  box-shadow: 0 12px 28px -10px rgba(10,32,56,.55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.jv-fab:hover { transform: translateY(-2px); color: #fff; }
.jv-fab--wa   { background: #25D366; }                       /* WhatsApp brand green - recognisability beats palette here */
.jv-fab--call { background: var(--jv-navy); color: var(--jv-gold); }
.jv-fab--call:hover { color: var(--jv-gold); }

/* Label appears on hover/focus on pointer devices; never on touch, where it
   would just sit there covering content. */
.jv-fab-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; background: var(--jv-navy-900); color: #fff;
  font-family: var(--jv-sans); font-size: 13px; font-weight: 600;
  padding: 8px 13px; border-radius: 100px; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
@media (hover: hover){
  .jv-fab:hover .jv-fab-tip, .jv-fab:focus-visible .jv-fab-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* Chat launcher */
.jv-chat-launcher {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 18px;
  border: none; border-radius: 100px; cursor: pointer;
  background: var(--jv-navy); color: var(--jv-gold); font-family: var(--jv-sans);
  font-size: 15px; font-weight: 600; line-height: 1;
  box-shadow: 0 16px 36px -14px rgba(10,32,56,.65); transition: transform .18s ease, background .18s ease;
}
.jv-chat-launcher:hover { transform: translateY(-2px); background: var(--jv-navy-900); }
.jv-chat-launcher .jv-ico, .jv-chat-launcher i { font-size: 20px; }
.jv-chat-launcher.is-open { width: 54px; height: 54px; padding: 0; justify-content: center; }
.jv-chat-label { color: #fff; }

/* Panel. Capped against the viewport so it can never run under the header
   or off the bottom of a short screen; the body scrolls, the chrome does not. */
.jv-chat-panel {
  width: min(348px, calc(100vw - 40px));
  display: flex; flex-direction: column;
  max-height: min(calc(100vh - 150px), 580px);
  background: var(--jv-surface); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(10,32,56,.6); border: 1px solid var(--jv-line);
  animation: jv-pop .24s cubic-bezier(.2,.9,.3,1) both;
}
@media (prefers-reduced-motion: reduce){ .jv-chat-panel { animation: none; } }
.jv-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--jv-navy); color: #fff; flex: none; }
.jv-chat-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: rgba(255,255,255,.1); overflow: hidden;
}
.jv-chat-avatar img { width: 27px; height: auto; display: block; }
.jv-chat-who { min-width: 0; }
.jv-chat-head strong { display: block; font-family: var(--jv-sans); font-size: 15px; font-weight: 600; line-height: 1.25; }
.jv-chat-head span { display: block; font-size: 12.5px; color: rgba(255,255,255,.66); line-height: 1.3; }
.jv-chat-x { margin-left: auto; flex: none; background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; }
.jv-chat-x:hover { color: #fff; }
.jv-chat-body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; }
.jv-chat-bubble { background: var(--jv-canvas); border: 1px solid var(--jv-line); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--jv-body); margin-bottom: 16px; }
.jv-chat-body .jv-field { margin-bottom: 12px; }
.jv-chat-body .jv-field label { font-size: 12.5px; margin-bottom: 5px; }
.jv-chat-body .jv-field input, .jv-chat-body .jv-field textarea { padding: 10px 13px; font-size: 14.5px; }
.jv-chat-body .jv-field textarea { min-height: 60px; }
.jv-chat-body .jv-btn { font-size: 14.5px; padding: 12px 20px; }
.jv-chat-quick { display: flex; gap: 10px; margin-top: 14px; }
.jv-chat-quick-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border-radius: 100px; border: 1px solid var(--jv-line);
  font-family: var(--jv-sans); font-size: 13.5px; font-weight: 600; color: var(--jv-navy); background: #fff;
  transition: all .18s ease;
}
.jv-chat-quick-btn:hover { border-color: var(--jv-gold); color: var(--jv-gold-600); }

@media (max-width: 640px){
  .jv-chat { right: 14px; bottom: 14px; gap: 10px; }
  .jv-chat-actions { gap: 10px; }
  .jv-fab { width: 48px; height: 48px; font-size: 20px; }
  .jv-chat-launcher { height: 48px; padding: 0 18px 0 15px; font-size: 14px; }
  .jv-chat-launcher.is-open { width: 48px; height: 48px; padding: 0; }
  .jv-chat-panel { width: calc(100vw - 28px); max-height: min(calc(100vh - 150px), 640px); }
  .jv-chat-body { padding: 14px; }
  .jv-chat-bubble { margin-bottom: 13px; padding: 11px 13px; }
  .jv-chat-body .jv-field { margin-bottom: 10px; }
}