/* Voltage ("bold") — high-energy young-adult church. Loud condensed all-caps
   Anton display, near-black canvas, electric-cobalt + acid-lime accents, punchy
   flat CTAs. Flat fills ONLY: no shadows, gradients, or glows — high contrast is
   the whole point. All scoped to .tpl-voltage; must never leak into the admin,
   legacy .church-site, or other templates.
   Brand skin (DARK-canvas): --vt-accent (+hover) AND the canvas (--vt-bg /
   --vt-raised / --vt-deepest) are church-mappable (build spec §7). The fixed
   light bands stay light so a church's colors can never break legibility. */

.tpl-voltage {
  /* accent (church-mappable) — the ONE place the cobalt hex is written */
  --vt-accent: #2f43ff;
  --vt-accent-hover: #4658ff;
  /* canvas (church-mappable via secondary → bg / raised / deepest) */
  --vt-bg: #0f1016;
  --vt-raised: #191b24;
  --vt-deepest: #08080c;
  /* fixed palette */
  --vt-lime: #d6ff3d;
  --vt-lime-hover: #e4ff6b;
  --vt-light: #eeece4;
  --vt-light-card: #faf9f4;
  --vt-txt: #f4f4f2;
  --vt-dim: rgba(244, 244, 242, 0.85);
  --vt-dim-2: rgba(244, 244, 242, 0.72);
  --vt-dim-3: rgba(244, 244, 242, 0.6);
  --vt-ink: #0f1016;
  --vt-ink-2: #2c2d33;
  --vt-peri: #8b98ff;
  --vt-peri-hover: #aab4ff;
  --vt-border: rgba(244, 244, 242, 0.14);
  --vt-hair: rgba(244, 244, 242, 0.08);
  --vt-input-border: rgba(244, 244, 242, 0.2);
  --vt-slot: #191b24;
  /* REQUIRED font indirection (a picked pairing overrides these three) */
  --font-disp: var(--vt-font-disp), 'Anton', 'Arial Narrow', sans-serif;
  --font-body: var(--vt-font-body), 'Archivo', system-ui, sans-serif;
  --font-label: var(--font-body);

  background: var(--vt-bg);
  color: var(--vt-txt);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.tpl-voltage * { box-sizing: border-box; }
.tpl-voltage img { max-width: 100%; display: block; }
.tpl-voltage a { color: inherit; text-decoration: none; }
/* Keyboard focus — visible ring on every interactive element (a11y). */
.tpl-voltage a:focus-visible, .tpl-voltage button:focus-visible { outline: 3px solid var(--vt-lime); outline-offset: 2px; border-radius: 3px; }

.vt-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; width: 100%; }
.vt-section { padding: 104px 0; }
.vt-section--tight { padding: 0 0 100px; }
.vt-band { background: var(--vt-light); color: var(--vt-ink); }
.vt-deepest { background: var(--vt-deepest); }
.vt-center { text-align: center; margin-top: 34px; }

/* ── Type ─────────────────────────────────────────────────────── */
.vt-disp { font-family: var(--font-disp); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; color: var(--vt-txt); margin: 0; }
.vt-band .vt-disp { color: var(--vt-ink); }
h2.vt-disp { font-size: clamp(40px, 6vw, 56px); }
.vt-accentword { color: var(--vt-accent); }
.vt-accentword--lime { color: var(--vt-lime); }
.vt-lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--vt-dim); font-weight: 400; max-width: 60ch; margin: 0; }
.vt-band .vt-lead { color: var(--vt-ink-2); }
.vt-body { font-size: 20px; line-height: 1.7; color: var(--vt-dim-2); margin: 0; }
.vt-band .vt-body { color: var(--vt-ink-2); }
.vt-meta { color: var(--vt-dim-3); font-size: 14px; margin-top: 4px; }
.vt-eyebrow { display: inline-block; font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vt-lime); margin-bottom: 16px; }
.vt-band .vt-eyebrow { color: var(--vt-accent); }
.vt-eyebrow--peri { color: var(--vt-peri); font-size: 11px; letter-spacing: 0.1em; }

.vt-link { display: inline-flex; align-items: center; gap: 7px; color: var(--vt-peri); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.vt-link:hover { color: var(--vt-peri-hover); }
.vt-link svg { width: 15px; height: 15px; }
.vt-link--lime { color: var(--vt-lime); }
.vt-link--lime:hover { color: var(--vt-lime-hover); }

/* ── Buttons (flat, square-ish) ───────────────────────────────── */
.vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-label); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; padding: 16px 30px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.vt-btn svg { width: 16px; height: 16px; }
.vt-btn--sm { padding: 12px 22px; font-size: 13px; letter-spacing: 0.05em; }
/* Colors prefixed with .tpl-voltage (0,2,0) so they BEAT the generic
   `.tpl-voltage a { color: inherit }` (0,1,1) — otherwise <a> buttons inherit
   body text on a colored fill. --vt-on-accent is set per-tenant in the Shell to
   #fff or ink by accent luminance, so button text stays legible for ANY brand. */
.tpl-voltage .vt-btn--cobalt { background: var(--vt-accent); color: var(--vt-on-accent, #fff); border-color: var(--vt-accent); }
.tpl-voltage .vt-btn--cobalt:hover { background: var(--vt-accent-hover); border-color: var(--vt-accent-hover); color: var(--vt-on-accent, #fff); }
.tpl-voltage .vt-btn--ghost { background: transparent; color: var(--vt-txt); border-color: rgba(244, 244, 242, 0.3); }
.tpl-voltage .vt-btn--ghost:hover { border-color: var(--vt-txt); color: var(--vt-txt); }
/* Dark chip on a bright (cobalt/lime) band — near-black fill, lime label. */
.tpl-voltage .vt-btn--dark { background: var(--vt-bg); color: var(--vt-lime); border-color: var(--vt-bg); border-radius: 6px; }
.tpl-voltage .vt-btn--dark:hover { background: var(--vt-raised); border-color: var(--vt-raised); color: var(--vt-lime); }
/* Lime button on dark — near-black label. */
.tpl-voltage .vt-btn--lime { background: var(--vt-lime); color: var(--vt-ink); border-color: var(--vt-lime); border-radius: 6px; }
.tpl-voltage .vt-btn--lime:hover { background: var(--vt-lime-hover); border-color: var(--vt-lime-hover); color: var(--vt-ink); }

.vt-pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--vt-lime); color: var(--vt-ink); padding: 8px 16px; border-radius: 4px; width: fit-content; }
.vt-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vt-ink); }

.vt-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--vt-slot); color: rgba(244, 244, 242, 0.28); }
.vt-slot svg { width: 42px; height: 42px; }

/* ── Nav ──────────────────────────────────────────────────────── */
.vt-nav { position: sticky; top: 0; z-index: 40; height: 74px; display: flex; align-items: center; gap: 24px; padding: 0 40px; background: rgba(15, 16, 22, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--vt-hair); }
.vt-brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.vt-brand__name { font-family: var(--font-disp); font-weight: 400; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--vt-txt); }
.vt-brand__tag { font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vt-accent); }
/* Church logo: normalize on HEIGHT to fill the 74px bar with breathing room.
   Selector is (0,2,0) so it out-specifies `.tpl-voltage img` (0,1,1) — never
   cap width tightly so wide wordmark logos aren't shrunk. */
.vt-brand .vt-brand__logo { height: 52px; width: auto; max-width: min(360px, 42vw); object-fit: contain; display: block; }
.vt-navlinks { display: flex; align-items: center; gap: 2px; }
.vt-navlinks > a { font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vt-dim-2); padding: 8px 11px; }
.vt-navlinks > a:hover { color: var(--vt-txt); }
.vt-navlinks > a.active { color: var(--vt-lime); }
.vt-live { display: inline-flex; align-items: center; gap: 7px; }
.vt-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4747; }
.vt-navcta { margin-left: 12px; }
.vt-navtoggle { display: none; background: none; border: 0; color: var(--vt-txt); cursor: pointer; margin-left: auto; }

/* ── Marquee (cobalt strip under home hero — renders announcements) ── */
.vt-marquee { background: var(--vt-accent); color: var(--vt-txt); padding: 20px 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; }
.vt-marquee__item { font-family: var(--font-disp); font-weight: 400; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.vt-marquee__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vt-marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-lime); flex: none; }

/* ── Hero ─────────────────────────────────────────────────────── */
.vt-hero { position: relative; min-height: 680px; display: flex; align-items: center; background: var(--vt-deepest); overflow: hidden; }
.vt-hero__img { position: absolute; inset: 0; }
.vt-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.vt-hero__overlay { position: absolute; inset: 0; background: rgba(8, 8, 12, 0.6); pointer-events: none; }
.vt-hero__copy { position: relative; padding: 64px 48px; max-width: 900px; }
.vt-hero .vt-pill { margin-bottom: 26px; }
.vt-hero__h { font-size: clamp(56px, 9vw, 112px); line-height: 0.92; letter-spacing: 0.005em; margin: 0 0 20px; }
.vt-hero__sub { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--vt-dim); margin: 0 0 32px; max-width: 560px; }
.vt-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.vt-hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; color: var(--vt-dim); font-size: 14px; }
.vt-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.vt-hero__meta svg { width: 16px; height: 16px; color: var(--vt-lime); }

/* ── Section heads ────────────────────────────────────────────── */
.vt-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.vt-sechead--stack { display: block; margin-bottom: 40px; }
.vt-sechead--wide { max-width: 640px; margin-bottom: 52px; }

/* ── Welcome (light band, 2-col) ──────────────────────────────── */
.vt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vt-two--start { align-items: start; }
.vt-welcome__h { font-size: clamp(40px, 5vw, 62px); }

/* ── Feature / spotlight (latest message) ─────────────────────── */
.vt-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
.vt-feature__media { position: relative; border-radius: 8px; overflow: hidden; background: var(--vt-deepest); min-height: 420px; }
.vt-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-feature__scrim { position: absolute; inset: 0; background: rgba(8, 8, 12, 0.35); display: flex; align-items: center; justify-content: center; }
.vt-feature__badge { position: absolute; top: 20px; left: 20px; background: var(--vt-lime); color: var(--vt-ink); font-family: var(--font-disp); font-weight: 400; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: 4px; }
.vt-feature__card { display: flex; flex-direction: column; justify-content: center; background: var(--vt-raised); border-radius: 8px; padding: 40px; }
.vt-feature__card h3 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 0.98; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 16px; }
.vt-feature__card p { font-size: 16px; line-height: 1.6; color: var(--vt-dim-2); margin: 0 0 24px; }
.vt-feature__who { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.vt-feature__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--vt-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-weight: 400; font-size: 17px; overflow: hidden; flex: none; }
.vt-feature__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vt-feature__who-name { font-weight: 700; font-size: 15px; color: var(--vt-txt); }
.vt-feature__cta { align-self: flex-start; }

.vt-playbtn { width: 88px; height: 88px; border-radius: 50%; background: var(--vt-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.vt-playbtn svg { width: 30px; height: 30px; margin-left: 5px; }
.vt-playbtn--lg { width: 96px; height: 96px; }
.vt-playbtn--lg svg { width: 34px; height: 34px; }

/* ── Grids ────────────────────────────────────────────────────── */
.vt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* steps (dark cards, lime numbers) */
.vt-stepcard { background: var(--vt-bg); color: var(--vt-txt); border-radius: 8px; padding: 38px 32px; }
.vt-band .vt-stepcard { background: var(--vt-bg); }
.vt-stepcard .n { font-family: var(--font-disp); font-weight: 400; font-size: 64px; line-height: 0.8; color: var(--vt-lime); margin-bottom: 18px; }
.vt-stepcard h4 { font-family: var(--font-disp); font-weight: 400; font-size: 26px; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 10px; }
.vt-stepcard p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--vt-dim-2); }

/* image-first event / group cards */
.vt-card { display: flex; flex-direction: column; background: var(--vt-raised); border-radius: 8px; overflow: hidden; }
.vt-card__photo { position: relative; height: 210px; background: var(--vt-bg); }
.vt-card__photo--sm { height: 190px; }
.vt-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-datebadge { position: absolute; top: 0; left: 0; background: var(--vt-accent); color: #fff; padding: 10px 16px; display: flex; align-items: baseline; gap: 8px; line-height: 0.9; }
.vt-datebadge--lime { background: var(--vt-lime); color: var(--vt-ink); }
.vt-datebadge .d { font-family: var(--font-disp); font-weight: 400; font-size: 32px; }
.vt-datebadge .m { font-family: var(--font-disp); font-weight: 400; font-size: 16px; text-transform: uppercase; }
.vt-card__body { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.vt-card__head { flex: 1; }
.vt-card__body h3 { font-family: var(--font-disp); font-weight: 400; font-size: 24px; text-transform: uppercase; color: var(--vt-txt); margin: 0; }
.vt-detailbox { border: 1px solid var(--vt-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--vt-bg); }
.vt-detailbox .row { display: flex; align-items: center; gap: 9px; }
.vt-detailbox .row svg { width: 15px; height: 15px; color: var(--vt-lime); flex: none; }
.vt-detailbox .row--time { font-weight: 600; font-size: 13px; color: var(--vt-txt); }
.vt-detailbox .row--loc { font-weight: 400; font-size: 13px; color: var(--vt-dim); }
.vt-detailbox .row--note { font-weight: 400; font-size: 12.5px; color: var(--vt-dim-3); }
.vt-card__cta { align-self: stretch; text-align: center; margin-top: auto; }

/* ministries — light band cards (invert to near-black on hover) */
.vt-mingrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vt-mincard--light { background: var(--vt-light-card); border: 2px solid var(--vt-ink); border-radius: 8px; padding: 30px; transition: background 0.15s, color 0.15s; }
.vt-mincard--light .vt-mincard__name { font-family: var(--font-disp); font-weight: 400; font-size: 26px; text-transform: uppercase; color: var(--vt-accent); margin-bottom: 8px; }
.vt-mincard--light p { font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--vt-ink); margin: 0; }
.vt-mincard--light:hover { background: var(--vt-ink); color: var(--vt-txt); }
.vt-mincard--light:hover p { color: var(--vt-txt); }
/* ministries page — raised dark cards */
.vt-mincard--dark { display: flex; flex-direction: column; background: var(--vt-raised); border-radius: 8px; padding: 36px; }
.vt-mincard--dark .vt-mincard__name { font-family: var(--font-disp); font-weight: 400; font-size: 30px; text-transform: uppercase; color: var(--vt-accent); margin-bottom: 10px; }
.vt-mincard--dark p { font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--vt-dim-2); margin: 0 0 14px; }
.vt-mincard--dark .vt-link { margin-top: auto; }

/* give band (cobalt, centered) */
.vt-giveband { background: var(--vt-accent); color: #fff; padding: 110px 0; text-align: center; }
.vt-giveband .vt-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 780px; }
.vt-giveband .vt-pill { align-self: center; }
.vt-giveband__h, h2.vt-disp.vt-giveband__h { color: #fff; font-size: clamp(48px, 7vw, 80px); line-height: 0.9; }
.vt-giveband p { font-weight: 500; font-size: 20px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin: 0; max-width: 540px; }
.vt-giveband .vt-btn { margin-top: 8px; }

/* location + map */
.vt-location { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.vt-location__rows { display: flex; flex-direction: column; gap: 18px; margin: 28px 0 0; font-size: 17px; color: var(--vt-dim); }
.vt-location__rows .label { font-family: var(--font-disp); font-weight: 400; font-size: 18px; text-transform: uppercase; color: var(--vt-peri); display: block; margin-bottom: 2px; }
.vt-location .vt-btn { margin-top: 30px; }
.vt-map { position: relative; height: 420px; border-radius: 12px; overflow: hidden; background: var(--vt-raised); border: 2px solid rgba(244, 244, 242, 0.1); }
.vt-map__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(244, 244, 242, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 244, 242, 0.06) 1px, transparent 1px); background-size: 44px 44px; }
.vt-map__pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); color: var(--vt-accent); }
.vt-map__pin svg { width: 46px; height: 46px; }

/* newsletter */
.vt-news { background: var(--vt-raised); border-radius: 12px; padding: 56px 48px; text-align: center; }
.vt-news h3 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(34px, 4vw, 44px); line-height: 0.98; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 12px; }
.vt-news p { font-size: 17px; line-height: 1.6; color: var(--vt-dim-2); margin: 0 0 28px; }
.vt-news__form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.vt-field { display: inline-flex; align-items: center; flex: 1; background: var(--vt-bg); border: 2px solid var(--vt-input-border); border-radius: 4px; padding: 14px 16px; color: var(--vt-dim-3); font-size: 15px; text-align: left; }
.vt-news__form .vt-btn { white-space: nowrap; }

/* ── Page head ────────────────────────────────────────────────── */
.vt-pagehead { padding: 100px 0 80px; }
.vt-pagehead__inner { max-width: 900px; }
.vt-pagehead h1 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(56px, 9vw, 96px); line-height: 0.9; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 24px; }
.vt-pagehead .vt-lead { max-width: 600px; }

/* dark cards (values / expect — lime headings) */
.vt-darkcard { background: var(--vt-raised); border-radius: 8px; padding: 38px; }
.vt-darkcard h4 { font-family: var(--font-disp); font-weight: 400; font-size: 28px; text-transform: uppercase; color: var(--vt-lime); margin: 0 0 10px; }
.vt-darkcard p { font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--vt-dim-2); margin: 0; }

/* way cards (cobalt headings) */
.vt-waycard { background: var(--vt-raised); border-radius: 8px; padding: 36px; }
.vt-waycard h4 { font-family: var(--font-disp); font-weight: 400; font-size: 26px; text-transform: uppercase; color: var(--vt-accent); margin: 0 0 8px; }
.vt-waycard p { font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--vt-dim-2); margin: 0; }

/* team grid */
.vt-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vt-teamcard { display: block; }
.vt-portrait { position: relative; height: 250px; border-radius: 8px; overflow: hidden; background: var(--vt-raised); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.vt-portrait--sm { height: 230px; }
.vt-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-portrait span { font-family: var(--font-disp); font-weight: 400; font-size: 44px; color: var(--vt-accent); }
.vt-teamcard__name { font-family: var(--font-disp); font-weight: 400; font-size: 20px; text-transform: uppercase; color: var(--vt-txt); }
.vt-teamcard__role { font-weight: 400; font-size: 14px; color: var(--vt-dim-3); }

/* series cards */
.vt-seriescard { border-radius: 8px; overflow: hidden; background: var(--vt-raised); display: block; }
.vt-seriescard__art { position: relative; height: 180px; background: var(--vt-bg); }
.vt-seriescard__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-seriescard__body { padding: 22px; }
.vt-seriescard__body h4 { font-family: var(--font-disp); font-weight: 400; font-size: 24px; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 4px; }
.vt-seriescard__body .vt-meta { margin-top: 0; }

/* sermon list rows */
.vt-sermonlist { display: flex; flex-direction: column; }
.vt-sermonrow { display: flex; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(244, 244, 242, 0.12); }
.vt-sermonrow:last-child { border-bottom: 1px solid rgba(244, 244, 242, 0.12); }
.vt-sermonrow__date { min-width: 64px; font-weight: 400; font-size: 14px; color: var(--vt-dim-3); }
.vt-sermonrow__main { flex: 1; }
.vt-sermonrow__title { font-family: var(--font-disp); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--vt-txt); }
.vt-sermonrow__by { font-weight: 400; font-size: 14px; color: var(--vt-dim-3); }
.vt-sermonrow__play { color: var(--vt-lime); display: flex; }
.vt-sermonrow__play svg { width: 18px; height: 18px; }

/* serve band (lime full-bleed) */
.vt-serveband { background: var(--vt-lime); color: var(--vt-ink); padding: 100px 0; text-align: center; }
.vt-serveband .vt-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.vt-serveband h2 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(44px, 6vw, 64px); line-height: 0.92; text-transform: uppercase; color: var(--vt-ink); margin: 0 0 16px; }
.vt-serveband p { font-weight: 500; font-size: 19px; line-height: 1.55; color: var(--vt-ink); margin: 0 auto 30px; max-width: 520px; }

/* CTA band (about — cobalt) */
.vt-ctaband { background: var(--vt-accent); color: #fff; padding: 100px 0; text-align: center; }
.vt-ctaband .vt-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.vt-ctaband__h, h2.vt-disp.vt-ctaband__h { color: #fff; font-size: clamp(40px, 6vw, 64px); line-height: 0.92; }
.vt-ctaband__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* hiring panel */
.vt-hiring { background: var(--vt-raised); border-radius: 12px; padding: 52px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.vt-hiring h2 { font-family: var(--font-disp); font-weight: 400; font-size: 40px; line-height: 0.95; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 10px; }
.vt-hiring p { font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--vt-dim-2); margin: 0; max-width: 520px; }
.vt-hiring .vt-btn { white-space: nowrap; }

/* give hero (cobalt full-bleed) */
.vt-givehero { background: var(--vt-accent); color: #fff; padding: 110px 0; text-align: center; }
.vt-givehero .vt-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 760px; }
.vt-givehero .vt-pill { align-self: center; }
.vt-givehero__h { font-family: var(--font-disp); font-weight: 400; font-size: clamp(56px, 8vw, 96px); line-height: 0.88; text-transform: uppercase; color: #fff; margin: 0; }
.vt-givehero p { font-weight: 500; font-size: 20px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin: 0; max-width: 560px; }
.vt-givehero .vt-btn { margin-top: 8px; }

/* impact (lime panel, cobalt %) */
.vt-impact { background: var(--vt-lime); color: var(--vt-ink); border-radius: 12px; padding: 52px; }
.vt-impact__label { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vt-ink); margin-bottom: 36px; opacity: 0.7; }
.vt-impact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.vt-impactcol { border-top: 3px solid var(--vt-ink); padding-top: 20px; }
.vt-impactcol .pct { font-family: var(--font-disp); font-weight: 400; font-size: 56px; line-height: 0.8; color: var(--vt-accent); margin-bottom: 12px; }
.vt-impactcol h4 { font-family: var(--font-disp); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--vt-ink); margin: 0 0 6px; }
.vt-impactcol p { font-weight: 500; font-size: 15px; line-height: 1.55; color: var(--vt-ink); margin: 0; }

/* forms */
.vt-formwrap { width: 100%; }
.vt-form { display: flex; flex-direction: column; gap: 14px; }
.vt-form h3 { font-family: var(--font-disp); font-weight: 400; font-size: 32px; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 6px; }
.vt-input { font-family: inherit; font-size: 15px; padding: 14px 16px; border-radius: 6px; outline: none; }
.vt-input--dark { color: var(--vt-txt); background: var(--vt-raised); border: 2px solid var(--vt-input-border); }
.vt-input--light { color: var(--vt-ink); background: #fff; border: 2px solid var(--vt-ink); }
.vt-input--area { resize: none; min-height: 130px; }
.vt-form button.vt-btn { border: none; cursor: pointer; }
.vt-formnote { color: var(--vt-dim-3); font-size: 13px; margin-top: 12px; }

/* contact details */
.vt-contact__rows { display: flex; flex-direction: column; gap: 22px; margin-bottom: 28px; }
.vt-contact__rows .label { font-family: var(--font-disp); font-weight: 400; font-size: 18px; text-transform: uppercase; color: var(--vt-peri); margin-bottom: 2px; }
.vt-contact__rows .val { font-size: 17px; color: var(--vt-txt); }
.vt-contact__map { height: 280px; }

/* faq */
.vt-faq { display: flex; flex-direction: column; }
.vt-faq__item { padding: 24px 0; border-top: 1px solid rgba(244, 244, 242, 0.12); }
.vt-faq__item:last-child { border-bottom: 1px solid rgba(244, 244, 242, 0.12); }
.vt-faq__item h4 { font-family: var(--font-disp); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 8px; }
.vt-faq__item p { margin: 0; color: var(--vt-dim-2); }

.vt-empty { text-align: center; color: var(--vt-dim-3); padding: 60px 0; }

/* ── Detail pages ─────────────────────────────────────────────── */
.vt-det { padding: 28px 0 100px; }
.vt-det__backwrap { padding: 32px 0 0; }
.vt-det__back { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vt-peri); }
.vt-det__back:hover { color: var(--vt-peri-hover); }
.vt-det__back svg { width: 15px; height: 15px; }
.vt-det__video { position: relative; height: 560px; border-radius: 12px; overflow: hidden; background: var(--vt-deepest); margin-bottom: 40px; }
.vt-det__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vt-det__video--link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-det__scrim { position: absolute; inset: 0; background: rgba(8, 8, 12, 0.4); display: flex; align-items: center; justify-content: center; }
.vt-det__cover { position: relative; height: 440px; border-radius: 12px; overflow: hidden; background: var(--vt-raised); margin-bottom: 40px; }
.vt-det__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-det__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.vt-det__main { min-width: 0; }
.vt-det__title { font-family: var(--font-disp); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 0.92; text-transform: uppercase; color: var(--vt-txt); margin: 22px 0 14px; }
.vt-det__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; color: var(--vt-dim-3); margin-bottom: 30px; }
.vt-det__lead { font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--vt-dim); margin: 0 0 30px; }
.vt-det__h3 { font-family: var(--font-disp); font-weight: 400; font-size: 26px; text-transform: uppercase; color: var(--vt-lime); margin: 0 0 14px; }
.vt-det__questions ul { margin: 0; padding-left: 20px; font-weight: 400; font-size: 16px; line-height: 1.9; color: var(--vt-dim); }
.vt-det__side { background: var(--vt-raised); border-radius: 8px; padding: 28px; }
.vt-det__side--facts { border-radius: 12px; padding: 30px; }
.vt-det__listen-label { font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vt-lime); margin-bottom: 14px; }
.vt-det__listen { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--vt-txt); padding: 10px 0; }
.vt-det__listen svg { width: 18px; height: 18px; color: var(--vt-accent); }
.vt-det__facts { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.vt-det__facts > div .label { font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vt-peri); margin-bottom: 3px; }
.vt-det__facts > div .val { font-weight: 600; font-size: 16px; color: var(--vt-txt); }
.vt-det__side .vt-btn { display: block; width: 100%; }
.vt-det__related { margin-top: 64px; }
.vt-det__related-label { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vt-lime); margin-bottom: 22px; }
.vt-det__minicard { border-radius: 8px; overflow: hidden; background: var(--vt-raised); display: block; }
.vt-det__minicard-art { position: relative; height: 150px; background: var(--vt-bg); }
.vt-det__minicard-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-det__minicard-body { padding: 20px; }
.vt-det__minicard-body .t { font-family: var(--font-disp); font-weight: 400; font-size: 19px; text-transform: uppercase; color: var(--vt-txt); }
.vt-det__minicard-body .s { font-weight: 400; font-size: 13px; color: var(--vt-dim-3); margin-top: 2px; }
.vt-det__person { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.vt-det__portrait { position: relative; height: 440px; border-radius: 12px; overflow: hidden; background: var(--vt-raised); display: flex; align-items: center; justify-content: center; }
.vt-det__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-det__portrait span { font-family: var(--font-disp); font-weight: 400; font-size: 72px; color: var(--vt-accent); }
.vt-det__mail { display: inline-block; margin-bottom: 40px; }
.vt-det__recent { margin-top: 40px; }
.vt-det__recentrow { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(244, 244, 242, 0.12); }
.vt-det__recentrow:last-child { border-bottom: 1px solid rgba(244, 244, 242, 0.12); }
.vt-det__recentrow .main { flex: 1; }
.vt-det__recentrow .t { font-family: var(--font-disp); font-weight: 400; font-size: 19px; text-transform: uppercase; color: var(--vt-txt); }
.vt-det__recentrow .s { font-weight: 400; font-size: 13px; color: var(--vt-dim-3); }
.vt-det__recentrow .play { color: var(--vt-lime); display: flex; }
.vt-det__recentrow .play svg { width: 16px; height: 16px; }
.vt-det--narrow { max-width: 820px; }
.vt-det__hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.vt-det__hero-art { position: relative; height: 360px; border-radius: 12px; overflow: hidden; background: var(--vt-raised); }
.vt-det__hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-det__hero h1 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(48px, 7vw, 88px); line-height: 0.88; text-transform: uppercase; color: var(--vt-txt); margin: 0 0 18px; }
.vt-msgrow { display: flex; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(244, 244, 242, 0.12); }
.vt-msgrow:last-child { border-bottom: 1px solid rgba(244, 244, 242, 0.12); }
.vt-msgrow .num { min-width: 40px; font-family: var(--font-disp); font-weight: 400; font-size: 24px; color: var(--vt-accent); }
.vt-msgrow .main { flex: 1; }
.vt-msgrow .t { font-family: var(--font-disp); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--vt-txt); }
.vt-msgrow .s { font-weight: 400; font-size: 14px; color: var(--vt-dim-3); }
.vt-agegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.vt-agecard { background: var(--vt-raised); border-radius: 8px; padding: 28px; }
.vt-agecard .t { font-family: var(--font-disp); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--vt-txt); margin-bottom: 4px; }
.vt-agecard .s { font-weight: 400; font-size: 15px; color: var(--vt-dim); }

.vt-prose { color: var(--vt-dim); line-height: 1.7; font-size: 18px; }
.vt-prose p { margin: 0 0 16px; }
.vt-prose h3 { font-family: var(--font-disp); font-weight: 400; text-transform: uppercase; color: var(--vt-lime); }
.vt-prose a { color: var(--vt-peri); }

/* ── Footer ───────────────────────────────────────────────────── */
.vt-footer { background: var(--vt-deepest); color: rgba(244, 244, 242, 0.55); padding: 56px 0 108px; }
.vt-footer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--vt-hair); }
.vt-footer__brand { display: flex; align-items: baseline; gap: 10px; }
.vt-footer__name { font-family: var(--font-disp); font-weight: 400; font-size: 26px; text-transform: uppercase; color: var(--vt-txt); }
.vt-footer__tag { font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vt-accent); }
.vt-footer__nav { display: flex; flex-wrap: wrap; gap: 24px; font-weight: 600; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.vt-footer__nav a { color: var(--vt-dim-2); }
.vt-footer__nav a:hover { color: var(--vt-txt); }
.vt-footer__bottom { padding-top: 24px; font-weight: 400; font-size: 13px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vt-nav { padding-left: 32px; padding-right: 32px; }
  .vt-grid-3, .vt-mingrid, .vt-team, .vt-impact__grid, .vt-agegrid { grid-template-columns: repeat(2, 1fr); }
  .vt-hero__h { font-size: clamp(52px, 11vw, 92px); }
}
@media (max-width: 900px) {
  .vt-navtoggle { display: inline-flex; }
  .vt-navlinks { position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--vt-bg); border-bottom: 1px solid var(--vt-hair); padding: 12px 24px 18px; display: none; }
  .vt-navlinks.open { display: flex; }
  .vt-navlinks > a { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--vt-hair); }
  .vt-navcta { margin: 12px 0 0; }
  .vt-two, .vt-location, .vt-feature, .vt-det__grid, .vt-det__person, .vt-det__hero, .vt-hiring { grid-template-columns: 1fr; }
  .vt-feature__media { min-height: 300px; }
  .vt-sechead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vt-hiring { text-align: left; }
  .vt-det__video { height: 380px; }
  .vt-det__person { gap: 32px; }
  .vt-det__portrait { height: 380px; }
}
@media (max-width: 640px) {
  .vt-wrap { padding-left: 24px; padding-right: 24px; }
  .vt-nav { padding-left: 20px; padding-right: 20px; }
  .vt-brand .vt-brand__logo { height: 40px; }
  .vt-section { padding: 56px 0; }
  .vt-section--tight { padding: 0 0 56px; }
  .vt-giveband, .vt-givehero, .vt-ctaband, .vt-serveband { padding: 64px 0; }
  .vt-pagehead { padding: 56px 0 44px; }
  .vt-grid-3, .vt-grid-2, .vt-mingrid, .vt-team, .vt-impact__grid, .vt-agegrid { grid-template-columns: 1fr; gap: 16px; }
  .vt-hero { min-height: 560px; }
  .vt-hero__copy { padding: 48px 24px; }
  .vt-hero__actions { flex-direction: column; align-items: stretch; }
  .vt-hero__actions .vt-btn { justify-content: center; }
  .vt-news { padding: 40px 24px; }
  .vt-news__form { flex-direction: column; }
  .vt-impact, .vt-hiring, .vt-giveband, .vt-marquee { padding-left: 24px; padding-right: 24px; }
  .vt-impact { padding-top: 40px; padding-bottom: 40px; }
  .vt-hiring { padding: 36px 24px; }
  .vt-footer__top { flex-direction: column; align-items: flex-start; }
  .vt-det__video { height: 240px; }
  .vt-det__cover, .vt-det__portrait, .vt-det__hero-art { height: 300px; }
  .vt-det__title { font-size: clamp(38px, 12vw, 56px); }
}