
:root {
  --navy-950: #0A1826; --navy: #003764; --blue: #00529E; --lb: #5EB2E3; --yellow: #FFD621; --gold: #F5A800;
  --ok: #1E8A5B; --bg: #F3F5F8; --card: #FFFFFF; --ink: #0E1E30; --ink-2: #33475B; --ink-3: #6B7C8C; --line: #DEE5EB;
  --display: 'Jost', 'Futura', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --col: 560px; --pad: 20px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.vh { background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; overflow-x: hidden; }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--display); margin: 0; letter-spacing: -.01em; }

.vh-app { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--safe-b) + 28px); }
.vh-preview { position: sticky; top: 0; z-index: 5; margin: 0; padding: 8px var(--pad); background: var(--yellow); color: var(--navy-950);
  font-size: .82rem; font-weight: 600; text-align: center; }


.vh-hero { background: radial-gradient(130% 90% at 50% 0%, #174a78 0%, var(--navy) 45%, var(--navy-950) 100%); color: #fff;
  padding: calc(var(--safe-t) + 16px) var(--pad) 64px; text-align: center; }
.vh-top { display: flex; justify-content: center; margin-bottom: 22px; }
.vh-logo { height: 22px; width: auto; display: block; }
.vh-kicker { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.vh-hero h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.12; max-width: var(--col); margin: 0 auto; }
.vh-when { margin: 10px auto 0; max-width: var(--col); color: #C9D6E2; font-size: 1.06rem; }
.vh-when strong { color: #fff; font-weight: 700; }


.vh-player-wrap { max-width: var(--col); margin: 22px auto 0; padding: 0 var(--pad); }
.vh-player-wrap.vh-overlap { margin-top: -44px; }          
.vh-hero-flat { padding-bottom: 28px; }                    
.vh-player { --ar: 9 / 16; --ph: min(62svh, 600px); position: relative; margin: 0 auto; width: min(100%, calc(var(--ph) * var(--ar)));
  aspect-ratio: var(--ar); background: #000; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(10,24,38,.28), 0 4px 10px rgba(10,24,38,.14); }
.vh-player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vh-video-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center; color: #fff; background: rgba(10,24,38,.92); }
.vh-video-msg p { margin: 0; max-width: 26ch; font-size: 1rem; }
.vh-retry { appearance: none; border: 0; border-radius: 12px; padding: 12px 22px; min-height: 48px; background: var(--yellow); color: var(--navy-950);
  font-family: var(--display); font-weight: 700; font-size: 1rem; cursor: pointer; }

.vh-rep-sec { max-width: var(--col); margin: 16px auto 0; padding: 0 var(--pad); }
.vh-rep { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto; }
.vh-avatar { position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; background: var(--navy);
  display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(10,24,38,.18); }
.vh-initials { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--yellow); letter-spacing: .02em; }
.vh-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vh-rep-text { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.vh-rep-name { font-weight: 700; font-size: 1.08rem; }
.vh-rep-co { color: var(--ink-3); font-size: .86rem; letter-spacing: .04em; }


.vh-expect, .vh-trust { max-width: var(--col); margin: 22px auto 0; padding: 0 var(--pad); }
.vh-expect > *, .vh-trust > * { margin-left: auto; margin-right: auto; }
.vh-expect { text-align: center; }
.vh-expect h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.vh-expect p { margin: 0 auto; max-width: 34ch; color: var(--ink-2); font-size: 1.04rem; }
.vh-expect .vh-see { margin-top: 12px; color: var(--navy); font-family: var(--display); font-weight: 700; font-size: 1.18rem; }

.vh-trust { display: grid; gap: 14px; margin-top: 28px; }
.vh-trust > * { width: 100%; }
.vh-creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vh-creds li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.vh-creds svg { width: 16px; height: 16px; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vh-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.vh-badges img { height: 42px; width: auto; max-width: 110px; object-fit: contain; }
.vh-review { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.vh-stars { margin: 0 0 6px; color: var(--gold); letter-spacing: .12em; font-size: 1rem; }
.vh-stars span { color: var(--line); }
.vh-review blockquote { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.vh-review blockquote::before { content: '“'; } .vh-review blockquote::after { content: '”'; }
.vh-review figcaption { margin-top: 8px; color: var(--ink-3); font-size: .88rem; }
.vh-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.vh-stats div { padding: 12px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.vh-stats dt { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--navy); }
.vh-stats dd { margin: 2px 0 0; color: var(--ink-3); font-size: .8rem; line-height: 1.3; }


.vh-contact { max-width: var(--col); margin: 28px auto 0; padding: 0 var(--pad); text-align: center; }
.vh-contact-lead { margin: 0 0 8px; color: var(--ink-3); font-size: .92rem; }
.vh-call { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 12px;
  border: 2px solid var(--navy); color: var(--navy); font-weight: 700; text-decoration: none; }
.vh-call:focus-visible, .vh-retry:focus-visible { outline: 3px solid var(--lb); outline-offset: 3px; }


.vh-gone .vh-hero { padding-bottom: 28px; }
.vh-msg { max-width: 420px; margin: 40px auto 0; padding: 0 var(--pad); text-align: center; }
.vh-msg h1 { font-size: 1.5rem; color: var(--ink); }
.vh-msg p { color: var(--ink-2); }

@media (min-width: 700px) {
  .vh-hero { padding-top: 28px; }
  .vh-player { --ph: min(66svh, 640px); }
}


@media (orientation: landscape) and (max-height: 500px) {
  .vh-hero { padding-bottom: 48px; }
  .vh-top { margin-bottom: 10px; }
  .vh-player { --ph: 82svh; }
}



.vh-appt:not(.vh-appt-band) { max-width: var(--col); margin: 22px auto 0; padding: 0 var(--pad); text-align: center; }
.vh-appt:not(.vh-appt-band) h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); color: var(--ink); }
.vh-appt:not(.vh-appt-band) .vh-kicker { color: var(--blue); }
.vh-appt:not(.vh-appt-band) .vh-when { color: var(--ink-2); }
.vh-appt:not(.vh-appt-band) .vh-when strong { color: var(--ink); }


.vh-google { max-width: var(--col); margin: 16px auto 0; padding: 0 var(--pad); }

.vh-gcard { display: grid; gap: 4px; padding: 14px 16px 13px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(14, 30, 48, .05), 0 8px 22px rgba(14, 30, 48, .07); color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.vh-gcard:hover { border-color: #C9D5E0; box-shadow: 0 2px 4px rgba(14, 30, 48, .06), 0 12px 28px rgba(14, 30, 48, .11); }
.vh-gcard:active { transform: scale(.992); }
.vh-gcard:focus-visible { outline: 3px solid var(--lb); outline-offset: 3px; }

.vh-gcard:not(.vh-gcard-plain) { padding-bottom: 8px; }
.vh-gc-attr { display: block; margin-top: 6px; line-height: 0; }
.vh-gc-attr img { display: block; width: auto; height: 16px; }
.vh-gc-score { display: flex; align-items: center; gap: 10px; }
.vh-gc-score .vh-gstars { font-size: 1.45rem; }
.vh-gc-num { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.vh-gc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vh-gc-count { color: var(--ink-3); font-size: .92rem; font-weight: 600; }
.vh-gc-cta { color: var(--blue); font-weight: 700; font-size: .93rem; white-space: nowrap; }
.vh-gcard:hover .vh-gc-cta { text-decoration: underline; }
.vh-gc-title { font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.vh-gcard-plain .vh-gc-foot { align-items: center; }

.vh-site { max-width: var(--col); margin: 16px auto 0; padding: 0 var(--pad); }
.vh-sitecard { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(14, 30, 48, .05), 0 8px 22px rgba(14, 30, 48, .07);
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.vh-sitecard:hover { border-color: #C9D5E0; }
.vh-sitecard:focus-visible { outline: 3px solid var(--lb); outline-offset: 3px; }
.vh-site-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.vh-site-cta { color: var(--blue); font-weight: 700; font-size: .93rem; white-space: nowrap; }
.vh-sitecard:hover .vh-site-cta { text-decoration: underline; }
.vh-gstars { display: inline-flex; gap: 2px; line-height: 0; }
.vh-star { width: 1em; height: 1em; display: block; }
.vh-star.on path { fill: var(--gold); }
.vh-star.off path { fill: #D5DCE3; }


.vh-trust { max-width: var(--col); margin: 14px auto 0; padding: 0 var(--pad); }
.vh-trust > * { margin-left: auto; margin-right: auto; }
.vh-expect { margin-top: 22px; }


.vh-video-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #C9D6E2; font-weight: 600; background: radial-gradient(120% 80% at 50% 30%, #2a4a6b 0%, #0e1c2c 70%); }
.vh-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.18); position: relative; }
.vh-play::after { content: ''; position: absolute; left: 26px; top: 20px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.vh-hint { max-width: var(--col); margin: 14px auto 0; padding: 0 var(--pad); }
.vh-hint p { margin: 0; padding: 12px 14px; border: 1.5px dashed #B8C4CF; border-radius: 12px; color: var(--ink-3); font-size: .86rem; text-align: center; }
