:root{--navy:#16233A;--navy-950:#0C1320;--navy-900:#0F1929;--navy-800:#131F33;--blue:#404B5D;--yellow:#C1A166;--on-accent:#0E0B2A;--lb:#D7C29C;--initials:#C1A166;--hero-bg:#16233A;--hero-hi:#323D52;--hero-lo:#0C1320;--on-hero:#FFFFFF;--hero-soft:#CCCFD4;--kicker:#C1A166;--logo-h:32px;--logo-maxw:180px;--logo-h-rec:28px;--logo-maxw-rec:160px}
/* Video Intros — the rules every ORGANIZATION client page adds on top of home.css / vi.css. The colors are the
   organization's brand tokens (brand-core.js), written before these rules in /{slug}/brand.css. EXTERIORMAX pages
   never load this file. No organization ever supplies CSS. */

/* the header band: the primary color, its readable foreground, and the accent only where it stands out */
.vh-hero { background: radial-gradient(130% 90% at 50% 0%, var(--hero-hi) 0%, var(--hero-bg) 45%, var(--hero-lo) 100%); color: var(--on-hero); }
.vh-hero h1, .vh-hero .vh-msg h1 { color: var(--on-hero); }
.vh-hero .vh-kicker { color: var(--kicker); }
.vh-when { color: var(--hero-soft); }
.vh-when strong { color: var(--on-hero); }
.vh-gone .vh-msg h1 { color: var(--navy); }

/* the logo: centered, aspect locked (contain), inside safe bounds set by the organization's logo size */
.vh-top { justify-content: center; }
.vh-logo-img { height: var(--logo-h); width: auto; max-width: min(var(--logo-maxw), 80vw); object-fit: contain; display: block; margin: 0 auto; }
.vh-logo-text { display: block; font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; color: var(--on-hero);
  max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
/* the recorder is always dark: its logo sits on the organization's own header color, the ground the logo was chosen for */
.vi-logo-img { height: var(--logo-h-rec); width: auto; max-width: min(var(--logo-maxw-rec), 60vw); object-fit: contain; display: block;
  background: var(--hero-bg); padding: 6px 10px; border-radius: 10px; box-sizing: content-box; }
.vi-logo-text { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: #fff; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* accent surfaces: their text color is chosen for the accent */
.vh-retry, .vh-preview, .vi-primary { color: var(--on-accent); }
.vh-initials { color: var(--initials); }

/* the user (agent / specialist / advisor) identity card */
.vh-rep-role { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 2px; }
.vh-rep-title { display: block; font-size: .9rem; color: var(--ink-2); }
.vh-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.vh-social a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--navy); font-size: .85rem; font-weight: 600; text-decoration: none; }
.vh-social a:focus-visible { outline: 3px solid var(--lb); outline-offset: 2px; }

/* P4A: the user's achievement and review highlight (their own words) */
.vh-rep-ach { margin: 12px 0 0; text-align: center; font-size: .9rem; font-weight: 600; color: var(--navy); }
/* Several credentials, centered like the rest of the card: one item each, a thin rule with real space on both sides
   between them. The rule is drawn on a collapsible space AFTER each item, so where the list wraps the space (and the
   rule with it) disappears: a new line never starts or ends with a separator, and nothing is ever run together. */
.vh-rep-achs { list-style: none; margin: 14px 0 0; padding: 0; text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.6; color: var(--navy); }
.vh-rep-achs li { display: inline; }
.vh-rep-achs li span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.vh-rep-achs li:not(:last-child)::after { content: " "; word-spacing: 22px; background: linear-gradient(var(--ink-3), var(--ink-3)) center / 1px 1.05em no-repeat; }
/* Long credentials: stacked, each its own clearly spaced item (no separators to lose at a wrap). */
.vh-rep-achs-stack { line-height: 1.35; }
.vh-rep-achs-stack li { display: block; }
.vh-rep-achs-stack li + li { margin-top: 7px; }
.vh-rep-achs-stack li span { display: inline; }
.vh-rep-achs-stack li:not(:last-child)::after { content: none; }
/* The member's featured testimonial, with five stars above it (their client's words; not a Google rating). */
.vh-rep-review { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.vh-rep-stars { margin: 0 0 6px; color: var(--gold); font-size: .95rem; letter-spacing: .16em; line-height: 1; font-style: normal; }
.vh-rep-review blockquote { margin: 0; }
.vh-rep-review blockquote p { margin: 0; font-style: italic; overflow-wrap: anywhere; }
.vh-rep-review figcaption { margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--navy); font-style: normal; }
.vh-rep-review figcaption::before { content: "\2014\00a0"; }

/* contact: a second line for email when one is configured */
.vh-mail { display: inline-block; margin-top: 12px; color: var(--blue); font-weight: 600; text-decoration: none; }
.vh-review-link { display: inline-block; margin-top: 8px; font-size: .86rem; font-weight: 600; color: var(--blue); }

/* Powered by Video Intros — the outlined lockup from the brand handoff (single-color mark), ≥ 10px wordmark */
.vh-powered { display: flex; justify-content: center; margin: 32px auto 8px; padding: 0 var(--pad); }
.vh-powered img { height: 14px; width: auto; display: block; opacity: .9; }

/* the rep recorder keeps its dark theme in the organization's ink */
body.vi { background: radial-gradient(120% 60% at 50% 0%, var(--navy-800) 0%, var(--navy-950) 60%) fixed, var(--navy-950); }

@font-face{font-family:'VI DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/video-intros/fonts/dm-sans-latin-400-700.woff2') format('woff2')}
.vh-v2{color-scheme:light;--bg:#F3F4F5;--card:#FFFFFF;--ink:#15171B;--ink-2:#454A53;--ink-3:#646973;--line:rgba(16,24,40,.09);--brand:#16233A;--on-brand:#FFFFFF;--band-edge:none;--brand-fill:#16233A;--on-brand-fill:#FFFFFF;--brand-ink:#16233A;--brand-num:#16233A;--brand-soft:#ECEDEF;--accent:#C1A166;--accent-edge:1px solid transparent;--on-accent:#142034;--accent-ink:#837456;--accent-on-brand:#C1A166;--accent-on-fill:#C1A166;--accent-soft:#F3ECE0;--eyebrow:#837456;--label-ink:#646973;--star:#F5A800;--plate:#FFFFFF;--badge-plate-when-light-art:#15171B;--badge-plate-when-dark-art:transparent;--badge-soft:#F3ECE0;--badge-paper:#FFFFFF;--badge-fill:#16233A;--badge-stroke:#C1A166;--badge-ink:#FFFFFF;--r-card:6px;--r-ctl:6px;--r-ctl-sq:4px;--r-media:8px;--shadow-1:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -16px rgba(16,24,40,.28);--shadow-2:0 30px 60px -30px rgba(16,24,40,.55);--act-shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 20px -12px rgba(16,24,40,.35);--card-border:1px solid rgba(16,24,40,.05);--gap:14px;--gap-desk:22px;--card-pad:18px;--card-pad-y:16px;--font-display:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--display-w:700;--font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--body-w:400;--display-track:-0.015em;--display-scale:1;--font-quote:inherit;--stats-deep:#16233A;--stats-deep-accent:#C1A166;--font-figures:inherit;--font-label:'VI DM Sans', system-ui, sans-serif;--label-w:600}