/* ==========================================================================
   Vibhinna Ventures — Design System
   Visual language reference: Fome Agency (pill buttons, flat offset shadows,
   floating sticker labels, thin bordered cards, pastel sections)
   Brand: teal + gold, never purple.
   ========================================================================== */

:root {
  /* Brand */
  --vv-teal: #00a27a;
  --vv-teal-deep: #006c57;
  --vv-teal-dark: #00543f;
  --vv-gold: #c89b32;
  --vv-gold-deep: #a87816;
  --vv-charcoal: #171a19;
  --vv-ivory: #fbf8f0;
  --vv-mint-soft: #dcede6;
  --vv-mint-pale: #eaf7f3;
  --vv-white: #ffffff;
  --vv-muted: #66706c;
  --vv-line: rgba(23, 26, 25, 0.14);
  --vv-line-strong: rgba(23, 26, 25, 0.85);

  /* Layout */
  --vv-max: 1240px;
  --vv-pad: 32px;
  --vv-section: 92px;

  /* Radii */
  --vv-r-sm: 12px;
  --vv-r-md: 20px;
  --vv-r-lg: 28px;
  --vv-r-pill: 999px;

  /* Type */
  --vv-font-head: "Manrope", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vv-font-body: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion */
  --vv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1024px) {
  :root { --vv-pad: 40px; --vv-section: 68px; }
}
@media (max-width: 767px) {
  :root { --vv-pad: 16px; --vv-section: 52px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--vv-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--vv-charcoal);
  background: var(--vv-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--vv-font-head);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  color: var(--vv-charcoal);
}

p { margin: 0; }
/* display on .vv-btn etc. must never win over the hidden attribute */
[hidden] { display: none !important; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--vv-teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.vv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--vv-charcoal);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}
.vv-skip:focus { left: 0; }

.vv-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Shared layout primitives
   -------------------------------------------------------------------------- */
.vv-shell {
  width: 100%;
  max-width: var(--vv-max);
  margin: 0 auto;
  padding-inline: var(--vv-pad);
}

.vv-section { padding-block: var(--vv-section); position: relative; }

/* Two same-coloured sections in a row should read as one band, not two */
.vv-section--flush-bottom { padding-bottom: 0; }
.vv-section--flush-top { padding-top: calc(var(--vv-section) * 0.6); }

.vv-bg-ivory { background: var(--vv-ivory); }
.vv-bg-mint  { background: var(--vv-mint-soft); }
.vv-bg-pale  { background: var(--vv-mint-pale); }
.vv-bg-white { background: var(--vv-white); }
.vv-bg-teal  { background: var(--vv-teal-deep); color: #fff; }

.vv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vv-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  margin-bottom: 14px;
}
.vv-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--vv-gold);
  border-radius: 2px;
}
.vv-bg-teal .vv-eyebrow { color: var(--vv-gold); }
.vv-bg-teal .vv-eyebrow::before { background: var(--vv-gold); }

.vv-h2 { font-size: clamp(28px, 4vw, 44px); }
.vv-lede {
  color: var(--vv-muted);
  max-width: 62ch;
  margin-top: 16px;
  font-size: clamp(15px, 1.6vw, 17px);
}
.vv-bg-teal .vv-h2 { color: #fff; }
.vv-bg-teal .vv-lede { color: rgba(255, 255, 255, 0.78); }

.vv-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.vv-head-row > div { flex: 1 1 420px; }
.vv-head-row > .vv-icon-box { flex: none; width: 56px; height: 56px; }
.vv-head-row > .vv-icon-box .vvi { font-size: 26px; }
/* Without this, the generic ">div" rule above gives the nav flex:1 1 420px,
   so it fills the whole row and its buttons sit at the left instead of
   sitting compact and pushed to the right. */
.vv-head-row > .vv-cases-nav { flex: none; margin-left: auto; }

/* Hand-drawn underline accent */
.vv-mark { position: relative; display: inline-block; white-space: nowrap; }
.vv-mark::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  bottom: 0.02em;
  height: 0.30em;
  background: var(--vv-teal);
  opacity: 0.28;
  border-radius: 999px;
  transform: rotate(-0.7deg);
  z-index: -1;
}
.vv-mark--gold::after { background: var(--vv-gold); opacity: 0.35; }

/* --------------------------------------------------------------------------
   Buttons — flat offset shadow pills
   -------------------------------------------------------------------------- */
.vv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: var(--vv-r-pill);
  border: 1.6px solid var(--vv-charcoal);
  background: var(--vv-white);
  color: var(--vv-charcoal);
  font-family: var(--vv-font-head);
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--vv-gold);
  transition: transform 0.18s var(--vv-ease), box-shadow 0.18s var(--vv-ease),
              background 0.18s var(--vv-ease), color 0.18s var(--vv-ease);
}
.vv-btn:hover { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--vv-gold); }
.vv-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--vv-gold); }

.vv-btn--primary {
  background: var(--vv-teal);
  color: #fff;
  border-color: var(--vv-charcoal);
  box-shadow: 4px 4px 0 var(--vv-charcoal);
}
.vv-btn--primary:hover { background: var(--vv-teal-deep); box-shadow: 1px 1px 0 var(--vv-charcoal); }

.vv-btn--ghost { background: transparent; box-shadow: 4px 4px 0 var(--vv-teal); }
.vv-btn--ghost:hover { box-shadow: 1px 1px 0 var(--vv-teal); }

.vv-btn--onteal {
  background: #fff;
  border-color: var(--vv-charcoal);
  box-shadow: 4px 4px 0 var(--vv-gold);
}
.vv-btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 4px 4px 0 rgba(200, 155, 50, 0.85);
}
.vv-btn--outline-light:hover { background: rgba(255, 255, 255, 0.08); }

.vv-btn--sm { min-height: 42px; padding: 10px 20px; font-size: 14px; box-shadow: 3px 3px 0 var(--vv-gold); }
.vv-btn--sm:hover { box-shadow: 1px 1px 0 var(--vv-gold); }

.vv-btn .vvi { font-size: 16px; }
.vv-btn--sm .vvi { font-size: 14.5px; }

/* Sticker label */
.vv-sticker {
  display: inline-block;
  font-family: var(--vv-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 6px;
  border: 1.5px solid var(--vv-charcoal);
  background: var(--vv-mint-soft);
  color: var(--vv-charcoal);
  box-shadow: 3px 3px 0 rgba(23, 26, 25, 0.9);
  white-space: nowrap;
}
.vv-sticker--gold { background: #f3e2b8; }
.vv-sticker--teal { background: #bfe9dc; }
.vv-sticker--white { background: #fff; }

/* Generic card */
.vv-card {
  background: var(--vv-white);
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  padding: 28px;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }

/* --------------------------------------------------------------------------
   Icon system — glyphs are loaded from four CDNs (Font Awesome, Bootstrap
   Icons, Remix Icon, Iconify) rather than inline SVG. Every icon element,
   whatever library it comes from, carries the shared ".vvi" class so sizing
   and colour are controlled from one place per context.
   -------------------------------------------------------------------------- */
.vvi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
}

.vv-icon-box {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--vv-mint-pale);
  border: 1.4px solid var(--vv-line);
  color: var(--vv-teal-deep);
  margin-bottom: 18px;
}
.vv-icon-box .vvi { font-size: 21px; }

.vv-num {
  font-family: var(--vv-font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--vv-gold-deep);
}

/* ==========================================================================
   1 · HEADER  (vv-header-)
   ========================================================================== */
.vv-header-root {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--vv-mint-pale);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.25s var(--vv-ease), background 0.25s var(--vv-ease),
              box-shadow 0.25s var(--vv-ease);
}
.vv-header-root.is-stuck {
  border-bottom-color: var(--vv-line);
  background: rgba(234, 247, 243, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px -18px rgba(23, 26, 25, 0.6);
}

.vv-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
  position: relative;
}

.vv-header-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.vv-header-logo svg { width: 42px; height: 42px; }
.vv-header-logo-text { display: flex; flex-direction: column; line-height: 1; }
.vv-header-logo-name {
  font-family: var(--vv-font-head);
  font-weight: 850;
  font-size: 19px;
  letter-spacing: 0.01em;
}
.vv-header-logo-sub {
  font-size: 9.5px;
  letter-spacing: 0.42em;
  font-weight: 600;
  color: var(--vv-muted);
  margin-top: 4px;
}

/* Centred independently of the logo/CTA widths either side, desktop only —
   on mobile .vv-header-nav is display:none so this has no effect there. */
.vv-header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.vv-header-item { position: relative; }
.vv-header-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 7px;
  border-radius: var(--vv-r-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--vv-charcoal);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.18s var(--vv-ease), color 0.18s var(--vv-ease);
}
.vv-header-link:hover { background: rgba(0, 162, 122, 0.11); color: var(--vv-teal-deep); }
/* Active/current page — an underline accent, no background or border layer. */
.vv-header-link:is(a, button)[data-current], .vv-header-link.is-current {
  color: var(--vv-teal-deep);
  background: none;
}
.vv-header-link:is(a, button)[data-current]::after,
.vv-header-link.is-current::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--vv-gold);
}
/* Desktop top-level links are text-only; the dropdown chevron is the one
   exception (it's a UI affordance, not a decorative icon). */
.vv-header-link > .vvi:not(.vv-header-chev) { display: none; }
.vv-header-chev { font-size: 11px !important; transition: transform 0.2s var(--vv-ease); }
.vv-header-item.is-open .vv-header-chev { transform: rotate(180deg); }

.vv-header-drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 286px;
  background: #fff;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  box-shadow: 6px 7px 0 var(--vv-gold);
  padding: 8px;
  display: none;
  opacity: 0;
  transition: opacity 0.18s var(--vv-ease), transform 0.18s var(--vv-ease);
}
.vv-header-item.is-open .vv-header-drop {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.vv-header-drop a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 13px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  transition: background 0.15s var(--vv-ease);
}
.vv-header-drop a:hover { background: var(--vv-mint-pale); }
.vv-header-drop span.vv-header-dropicon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--vv-mint-pale);
  border: 1.3px solid var(--vv-line);
  color: var(--vv-teal-deep);
  flex: none;
}
.vv-header-drop span.vv-header-dropicon .vvi { font-size: 16px; }
.vv-header-drop small { display: block; font-weight: 500; font-size: 12px; color: var(--vv-muted); }

.vv-header-cta { flex: none; }
.vv-header-burger {
  display: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  border: 1.6px solid var(--vv-charcoal);
  background: #fff;
  box-shadow: 3px 3px 0 var(--vv-gold);
  cursor: pointer;
  place-items: center;
}
.vv-header-burger .vvi { font-size: 20px; }
.vv-header-burger .vv-header-close { display: none; }
.vv-header-burger[aria-expanded="true"] .vv-header-open { display: none; }
.vv-header-burger[aria-expanded="true"] .vv-header-close { display: block; }

/* Mobile drawer — a plain link list with thin dividers, not boxed/card rows. */
.vv-header-panel {
  display: none;
  border-top: 1.5px solid var(--vv-line);
  background: var(--vv-mint-pale);
  max-height: calc(100dvh - 78px);
  overflow-y: auto;
  padding: 4px 0 28px;
}
.vv-header-panel.is-open { display: block; }
.vv-header-panel > .vv-shell { padding-top: 6px; }
.vv-header-panel ul { list-style: none; margin: 0; padding: 0; }
.vv-header-panel li { border-bottom: 1px solid rgba(23, 26, 25, 0.1); }
.vv-header-panel li:first-child { border-top: 1px solid rgba(23, 26, 25, 0.1); }

.vv-header-mlink {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 14px 4px;
  background: none;
  border: 0;
  text-decoration: none;
  font-family: var(--vv-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--vv-charcoal);
  text-align: left;
  cursor: pointer;
}
.vv-header-mlink:hover { color: var(--vv-teal-deep); }
.vv-header-mlink.is-current { color: var(--vv-teal-deep); }
.vv-header-mlink .vvi { font-size: 18px; width: 22px; color: var(--vv-teal-deep); }
.vv-header-mlink .vv-header-chev { margin-left: auto; font-size: 13px !important; color: var(--vv-muted); transition: transform 0.2s var(--vv-ease); }
.vv-header-mlink[aria-expanded="true"] .vv-header-chev { transform: rotate(180deg); }

.vv-header-msub {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 6px 36px;
}
.vv-header-msub.is-open { display: block; }
.vv-header-msub li { border-bottom: 0; }
.vv-header-msub a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vv-muted);
  text-decoration: none;
}
.vv-header-msub a:hover { color: var(--vv-teal-deep); }
.vv-header-msub a .vvi { font-size: 15px; width: 18px; color: var(--vv-teal); }

.vv-header-panel .vv-btn { width: 100%; margin-top: 22px; }

/* The nav is icon-rich, so the bar tightens in stages before it becomes a drawer */
@media (max-width: 1240px) {
  .vv-header-bar { gap: 12px; }
  .vv-header-link { padding: 10px 6px; }
  .vv-header-logo-sub { letter-spacing: 0.3em; }
}
@media (max-width: 1140px) {
  .vv-header-link svg:not(.vv-header-chev) { display: none; }
}

@media (max-width: 1024px) {
  .vv-header-nav, .vv-header-cta { display: none; }
  .vv-header-burger { display: grid; }
  .vv-header-bar { height: 78px; }
  html { scroll-padding-top: 92px; }
}

/* ==========================================================================
   2 · HERO  (vv-hero-)
   ========================================================================== */
.vv-hero-root {
  background: var(--vv-mint-pale);
  padding: 72px 0 88px;
  position: relative;
  overflow: hidden;
  /* vh scales with the viewport at every breakpoint on its own, so no
     separate mobile/tablet/desktop rule is needed for the 80% target;
     min-height (not height) means content that needs more room still
     grows the section rather than getting clipped. */
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  align-items: center;
}
/* Subtle background motif — see image-prompts.md for the generation brief. */
.vv-hero-bgimg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.vv-hero-inner { position: relative; text-align: center; max-width: 880px; margin: 0 auto; z-index: 2; }
.vv-hero-title {
  font-size: clamp(36px, 6.4vw, 74px);
  letter-spacing: -0.035em;
  margin: 6px 0 0;
}
.vv-hero-title .vv-mark::after { height: 0.24em; }
.vv-hero-copy {
  margin: 22px auto 0;
  max-width: 620px;
  color: var(--vv-muted);
  font-size: clamp(15px, 1.7vw, 18px);
}
.vv-hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.vv-hero-trust {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  font-size: 13.5px;
  color: var(--vv-muted);
  font-weight: 600;
}
.vv-hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.vv-hero-trust span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vv-gold);
}

.vv-hero-stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vv-hero-stickers .vv-sticker { position: absolute; }
.vv-hero-s1 { top: 16%; left: 3%;  transform: rotate(-8deg); }
.vv-hero-s2 { top: 11%; right: 4%; transform: rotate(7deg); }
.vv-hero-s3 { top: 45%; left: 0%;  transform: rotate(6deg); }
.vv-hero-s4 { top: 52%; right: 1%; transform: rotate(-6deg); }
.vv-hero-s5 { bottom: 12%; left: 9%;  transform: rotate(4deg); }
.vv-hero-s6 { bottom: 9%;  right: 8%; transform: rotate(-5deg); }

@media (max-width: 1024px) {
  .vv-hero-root { padding: 52px 0 96px; }
  .vv-hero-s3, .vv-hero-s4 { display: none; }
  .vv-hero-s1 { top: 8%; left: 1%; }
  .vv-hero-s2 { top: 5%; right: 1%; }
  .vv-hero-s5 { bottom: 16px; left: 2%; }
  /* right:2%/bottom:16px landed almost exactly on top of the fixed
     WhatsApp button's corner (right:20px/bottom:22px) — pushed up well
     clear of it instead. */
  .vv-hero-s6 { bottom: 84px; right: 2%; }
}
@media (max-width: 767px) {
  /* top:0/bottom:12px on the stickers below measures from the section's
     padding box, i.e. right against the border — that read as "no space"
     against the sticky header above and the next section below, so both
     the section padding and the sticker offsets are more generous here. */
  .vv-hero-root { padding: 56px 0 104px; }
  .vv-hero-stickers .vv-sticker { font-size: 10px; padding: 6px 11px; box-shadow: 2px 2px 0 rgba(23,26,25,.9); }
  /* Two stickers above the heading, two below the trust row — never over the copy. */
  .vv-hero-s1 { top: 18px; left: 2%; }
  .vv-hero-s2 { top: 18px; right: 2%; }
  .vv-hero-s5 { bottom: 22px; left: 3%; }
  .vv-hero-s6 { bottom: 22px; right: 3%; }
  /* Stacked vertically, full width. */
  .vv-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .vv-hero-actions .vv-btn { width: 100%; }
  .vv-hero-inner { padding-block: 46px 0; }
  .vv-hero-trust { margin-top: 30px; gap: 8px 16px; font-size: 12.5px; }
}

/* ==========================================================================
   PAGE BANNER — shared small hero for Services / Case Studies / Partners /
   Contact, so those pages don't repeat the full home hero treatment.
   (vv-pagehero-)
   ========================================================================== */
.vv-pagehero-root {
  background: var(--vv-mint-pale);
  padding: 56px 0 64px;
  text-align: center;
}
.vv-pagehero-root .vv-eyebrow { justify-content: center; }
.vv-pagehero-title { font-size: clamp(32px, 5vw, 52px); }
.vv-pagehero-copy { max-width: 640px; margin: 18px auto 0; color: var(--vv-muted); font-size: clamp(15px, 1.6vw, 17px); }
.vv-pagehero-crumb {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--vv-muted); margin-bottom: 18px;
}
.vv-pagehero-crumb a { color: var(--vv-teal-deep); text-decoration: none; }
.vv-pagehero-crumb a:hover { text-decoration: underline; }
.vv-pagehero-crumb .vvi { font-size: 10px; }

@media (max-width: 767px) { .vv-pagehero-root { padding: 40px 0 48px; } }

/* ==========================================================================
   3 · TRUST METRICS  (vv-metrics-)
   ========================================================================== */
.vv-metrics-head { text-align: center; margin-bottom: 42px; }
.vv-metrics-head .vv-lede { margin-inline: auto; }
.vv-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
/* Room for the hover shadow below (see .vv-metrics-card:hover) to render
   inside this section's own box — this section has zero bottom padding
   (vv-section--flush-bottom), so without this the shadow's bottom edge
   would land past this section's box and get painted over by the next
   section's opaque background, leaving only the right-hand sliver visible.
   Padding on the section itself (not margin on the grid) so it can't
   collapse through and escape as a gap between the two sections. */
#vv-metrics { padding-bottom: 14px; }
.vv-metrics-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 16px;
  row-gap: 12px;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  background: #fff;
  padding: 24px 22px;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-metrics-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }
.vv-metrics-icon {
  grid-column: 1;
  grid-row: 1;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--vv-mint-pale);
  color: var(--vv-teal-deep);
  border: 1.3px solid var(--vv-line);
  margin-bottom: 0;
}
.vv-metrics-icon .vvi { font-size: 19px; }
.vv-metrics-value {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--vv-font-head);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 850;
  color: var(--vv-teal);
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Spans the full card width on its own row below the icon, rather than
   staying indented in the value's column next to the icon. */
.vv-metrics-label { grid-column: 1 / 3; grid-row: 2; margin-top: 0; font-size: 14px; color: var(--vv-muted); font-weight: 550; }

@media (max-width: 1024px) { .vv-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  /* Stays a 2x2 grid, and the value stays to the right of the icon (same
     layout as desktop) — just tightened up for the narrower ~170px card. */
  .vv-metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .vv-metrics-card { padding: 16px 14px; column-gap: 10px; }
  .vv-metrics-icon { width: 34px; height: 34px; }
  .vv-metrics-icon .vvi { font-size: 16px; }
  .vv-metrics-value { font-size: 22px; }
}

/* ==========================================================================
   4 · FOUNDATION  (vv-foundation-)
   ========================================================================== */
.vv-foundation-head { max-width: 720px; margin-bottom: 46px; }
.vv-foundation-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.vv-foundation-card {
  grid-column: span 2;
  background: #fff;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-foundation-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }
.vv-foundation-card--lg { grid-column: span 3; background: var(--vv-mint-pale); }
.vv-foundation-title { font-size: 21px; margin: 4px 0 10px; }
.vv-foundation-card--lg .vv-foundation-title { font-size: 25px; }
.vv-foundation-text { color: var(--vv-muted); font-size: 15px; }
.vv-foundation-tag {
  align-self: flex-start;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
}

@media (max-width: 1024px) {
  .vv-foundation-grid { grid-template-columns: repeat(2, 1fr); }
  .vv-foundation-card, .vv-foundation-card--lg { grid-column: span 1; }
  .vv-foundation-card:last-child { grid-column: span 2; }
}
@media (max-width: 767px) {
  .vv-foundation-grid { grid-template-columns: 1fr; }
  .vv-foundation-card, .vv-foundation-card--lg, .vv-foundation-card:last-child { grid-column: span 1; padding: 26px 24px; }
}

/* ==========================================================================
   5 · WHO WE SERVE  (vv-audience-)
   ========================================================================== */
.vv-audience-wrap {
  display: grid;
  /* fr units so the 56px gap comes out of the tracks, not out of the container */
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  gap: 56px;
}
.vv-audience-visual { position: relative; }
.vv-audience-frame {
  border: 1.6px solid var(--vv-charcoal);
  border-radius: var(--vv-r-lg);
  background: #fff;
  box-shadow: 8px 9px 0 var(--vv-gold);
  overflow: hidden;
  padding: 26px;
}
.vv-audience-frame img { width: 100%; height: auto; display: block; border-radius: 14px; }
.vv-audience-float {
  position: absolute;
  background: #fff;
  border: 1.5px solid var(--vv-charcoal);
  border-radius: 15px;
  box-shadow: 4px 4px 0 var(--vv-teal);
  padding: 11px 15px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--vv-font-head);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 200px;
}
.vv-audience-float .vvi { font-size: 16px; color: var(--vv-teal-deep); }
.vv-audience-float--a { top: 8%; right: -18px; }
.vv-audience-float--b { bottom: 10%; left: -20px; box-shadow: 4px 4px 0 var(--vv-gold); }

.vv-audience-title { font-size: clamp(26px, 3.6vw, 40px); }
.vv-audience-ages {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vv-audience-age {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 62px;
  padding: 12px 18px;
  border-radius: var(--vv-r-pill);
  border: 1.5px solid var(--vv-line-strong);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--vv-font-head);
  transition: all 0.18s var(--vv-ease);
}
.vv-audience-age strong { font-size: 15px; font-weight: 800; }
.vv-audience-age span { font-size: 12.5px; color: var(--vv-muted); font-weight: 600; }
.vv-audience-age:hover { transform: translate(1px, 2px); box-shadow: 2px 2px 0 var(--vv-gold); }
.vv-audience-age[aria-selected="true"] {
  background: var(--vv-charcoal);
  border-color: var(--vv-charcoal);
  box-shadow: 4px 4px 0 var(--vv-gold);
  color: #fff;
}
.vv-audience-age[aria-selected="true"] span { color: rgba(255, 255, 255, 0.75); }

.vv-audience-panel {
  margin-top: 20px;
  border: 1.5px dashed rgba(23, 26, 25, 0.35);
  border-radius: var(--vv-r-md);
  background: rgba(255, 255, 255, 0.62);
  padding: 20px 22px;
  min-height: 96px;
}
.vv-audience-panel h4 { font-size: 15px; margin-bottom: 8px; }
.vv-audience-panel p { font-size: 14.5px; color: var(--vv-muted); }
.vv-audience-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .vv-audience-wrap { grid-template-columns: 1fr; gap: 40px; }
  .vv-audience-visual { max-width: 560px; margin-inline: auto; width: 100%; }
  /* Kept as a small outward peek (not flush 0) — flush made the badge's own
     shadow collide with the frame's border/shadow at the corner. */
  .vv-audience-float--a { right: -10px; }
  .vv-audience-float--b { left: -10px; }
}
@media (max-width: 480px) {
  /* Smaller frame, smaller accent — otherwise the badge reads as oversized
     relative to the card and sits awkwardly close to the top edge. */
  .vv-audience-float { font-size: 11.5px; padding: 8px 12px; max-width: 160px; gap: 7px; }
  .vv-audience-float .vvi { font-size: 14px; }
  .vv-audience-float--a { top: 14px; right: 6px; }
  .vv-audience-float--b { bottom: 14px; left: 6px; }
}
@media (max-width: 389px) {
  .vv-audience-ages { grid-template-columns: 1fr; }
  .vv-audience-actions { flex-direction: column; }
  .vv-audience-actions .vv-btn { width: 100%; }
}

/* ==========================================================================
   6 · FOUR PILLARS  (vv-services-)
   ========================================================================== */
.vv-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.vv-services-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  padding: 26px 24px;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-services-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }
.vv-services-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vv-services-title { font-size: 19px; margin: 14px 0 8px; }
.vv-services-note { font-size: 14px; color: var(--vv-muted); }
.vv-services-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 13.5px;
}
.vv-services-list li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.vv-services-list li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--vv-teal);
  flex: none;
}
.vv-services-more { margin-top: 12px; border-top: 1px solid var(--vv-line); padding-top: 12px; }
.vv-services-more > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--vv-font-head);
  font-size: 13px;
  font-weight: 750;
  color: var(--vv-teal-deep);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
}
.vv-services-more > summary::-webkit-details-marker { display: none; }
.vv-services-more > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 17px;
  line-height: 1;
}
.vv-services-more[open] > summary::after { content: "–"; }
.vv-services-more .vv-services-list { margin-top: 12px; }
.vv-services-foot { margin-top: auto; padding-top: 20px; }
.vv-services-foot .vv-btn { width: 100%; }
.vv-services-cta { margin-top: 40px; text-align: center; }

.vv-services-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* 2x2 pillar grid, used on the Services hub page for the four pillar cards. */
.vv-services-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }

@media (max-width: 1024px) {
  .vv-services-grid, .vv-services-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .vv-services-grid, .vv-services-grid--3, .vv-services-grid--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7 · HOW WE WORK  (vv-process-)
   ========================================================================== */
.vv-process-root { position: relative; overflow: hidden; }
.vv-process-head { max-width: 700px; margin-bottom: 52px; }
.vv-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.vv-process-grid::before {
  content: "";
  position: absolute;
  /* 26px card padding-top + 23px (half the 46px badge) = the badge's true
     vertical centre — was 34px, which cut across the circles off-centre. */
  top: 49px;
  /* Badges sit left-aligned in each card (22px padding + half the 46px
     badge = 45px from the card's left edge), not centred — so the line's
     endpoints are derived from that same offset, not an arbitrary %, to
     land exactly on the first and last badge centres in the 4-column grid. */
  left: 45px;
  right: calc(25% - 60px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--vv-gold) 0 12px, transparent 12px 22px);
  opacity: 0.7;
}
.vv-process-step {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1.4px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--vv-r-md);
  padding: 26px 22px;
  z-index: 1;
  transition: background 0.2s var(--vv-ease), transform 0.2s var(--vv-ease);
}
.vv-process-step:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-3px); }
.vv-process-badge {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vv-gold);
  color: var(--vv-charcoal);
  font-family: var(--vv-font-head);
  font-weight: 850;
  font-size: 16px;
  border: 1.5px solid var(--vv-charcoal);
  margin-bottom: 18px;
}
.vv-process-step h3 { color: #fff; font-size: 19px; display: flex; align-items: center; gap: 9px; }
.vv-process-step h3 .vvi { font-size: 18px; color: var(--vv-gold); }
.vv-process-step p { margin-top: 9px; color: rgba(255, 255, 255, 0.76); font-size: 14px; }
.vv-process-cta { margin-top: 44px; }

@media (max-width: 1024px) {
  .vv-process-grid { grid-template-columns: repeat(2, 1fr); }
  .vv-process-grid::before { display: none; }
}
@media (max-width: 767px) {
  .vv-process-grid { grid-template-columns: 1fr; gap: 0; padding-left: 54px; }
  .vv-process-grid::before {
    display: block;
    top: 12px; bottom: 12px;
    left: 20px; right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--vv-gold) 0 10px, transparent 10px 20px);
  }
  .vv-process-step { margin-bottom: 16px; }
  .vv-process-badge { position: absolute; left: -54px; top: 22px; width: 40px; height: 40px; margin: 0; }
  .vv-process-cta .vv-btn { width: 100%; }
}

/* ==========================================================================
   8 · CASE STUDIES  (vv-cases-)
   ========================================================================== */
.vv-cases-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.vv-cases-track::-webkit-scrollbar { display: none; }
.vv-cases-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-cases-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }
.vv-cases-visual {
  position: relative;
  background: var(--vv-teal-dark);
  padding: 22px;
  min-height: 156px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}
.vv-cases-deco {
  position: absolute;
  top: -10px; right: -10px;
  font-size: 128px;
  color: rgba(200, 155, 50, 0.32);
}
.vv-cases-index {
  font-family: var(--vv-font-head);
  font-size: 40px;
  font-weight: 850;
  color: var(--vv-gold);
  line-height: 1;
  position: relative;
}
.vv-cases-pill {
  position: relative;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--vv-r-pill);
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 750;
  font-family: var(--vv-font-head);
}
.vv-cases-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.vv-cases-title { font-size: 19px; }
.vv-cases-block { font-size: 14px; }
.vv-cases-block dt {
  font-family: var(--vv-font-head);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--vv-gold-deep);
  margin-bottom: 3px;
}
.vv-cases-block dd { margin: 0; color: var(--vv-muted); line-height: 1.5; }
.vv-cases-badge {
  margin-top: auto;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: var(--vv-r-pill);
  background: var(--vv-mint-soft);
  border: 1.2px solid var(--vv-line);
  color: var(--vv-teal-deep);
}
.vv-cases-nav { display: flex; gap: 10px; }
.vv-cases-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--vv-charcoal);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 3px 3px 0 var(--vv-gold);
  transition: transform 0.15s var(--vv-ease), box-shadow 0.15s var(--vv-ease);
}
.vv-cases-arrow:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--vv-gold); }
/* Icons moved from inline SVG to webfont <i> during the icon-CDN migration —
   this was still targeting "svg" and had no effect, leaving the arrow glyph
   sized only by whatever the browser's default font-size happened to be. */
.vv-cases-arrow .vvi { font-size: 18px; }
.vv-cases-dots { display: none; gap: 8px; justify-content: center; margin-top: 20px; }
.vv-cases-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.3px solid var(--vv-charcoal);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.vv-cases-dot[aria-current="true"] { background: var(--vv-teal); border-color: var(--vv-teal); width: 26px; border-radius: 999px; }
.vv-cases-disclaimer { margin-top: 26px; font-size: 12.5px; color: var(--vv-muted); max-width: 70ch; }

@media (max-width: 1024px) { .vv-cases-track { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 767px) {
  .vv-cases-track { grid-auto-columns: 88%; }
  /* Kept visible (just scaled down) rather than hidden — dots alone don't
     give a clear "go forward/back" affordance for non-swipe interaction. */
  .vv-cases-arrow { width: 40px; height: 40px; }
  .vv-cases-arrow .vvi { font-size: 16px; }
  .vv-cases-dots { display: flex; }
  .vv-cases-visual { min-height: 132px; }
}

/* ==========================================================================
   9 · PARTNERS  (vv-partners-)
   ========================================================================== */
.vv-partners-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.vv-partners-head .vv-eyebrow { justify-content: center; }
.vv-partners-head .vv-lede { margin-inline: auto; }

/* Continuous auto-scrolling logo marquee. Markup duplicates the card set
   once so translating the track by exactly -50% loops seamlessly; the
   duplicate copy is aria-hidden so screen readers only hear it once. */
.vv-partners-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.vv-partners-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: vv-partners-scroll linear infinite;
  animation-duration: var(--vv-partners-duration, 34s);
}
.vv-partners-marquee:hover .vv-partners-track,
.vv-partners-marquee:focus-within .vv-partners-track { animation-play-state: paused; }

@keyframes vv-partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.vv-partners-card {
  flex: none;
  width: 210px;
  height: 108px;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  background: #fff;
  filter: grayscale(1);
  opacity: 0.82;
  transition: filter 0.22s var(--vv-ease), opacity 0.22s var(--vv-ease), transform 0.22s var(--vv-ease), box-shadow 0.22s var(--vv-ease);
}
.vv-partners-card:hover {
  filter: none;
  opacity: 1;
  transform: translate(-2px, -3px);
  box-shadow: 6px 7px 0 var(--vv-teal);
}

/* Logo-only card: a real logo image fills this box once supplied. Until
   then, a faint placeholder glyph shows through — the <img> hides itself
   via onerror rather than leaving a broken-image icon. */
.vv-partners-logo {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--vv-line-strong);
}
.vv-partners-logo .vvi { font-size: 28px; }
.vv-partners-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px 24px;
}
.vv-partners-note {
  margin-top: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--vv-muted);
  font-style: italic;
}

@media (max-width: 1024px) { .vv-partners-card { width: 190px; height: 96px; } }
@media (max-width: 767px) { .vv-partners-card { width: 168px; height: 88px; } .vv-partners-track { gap: 14px; } }
@media (max-width: 389px) { .vv-partners-card { width: 150px; height: 80px; } }

/* Static logo grid — used on the dedicated Partners page so every partner
   is visible at once, rather than the homepage's auto-scrolling teaser. */
.vv-partners-logogrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.vv-partners-logogrid .vv-partners-card { width: 100%; height: 116px; }

@media (max-width: 1024px) { .vv-partners-logogrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .vv-partners-logogrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .vv-partners-logogrid .vv-partners-card { height: 100px; }
}

/* ==========================================================================
   10 · CERTIFICATIONS  (vv-credentials-)
   ========================================================================== */
.vv-credentials-head { max-width: 700px; margin-bottom: 44px; }
.vv-credentials-head--center { text-align: center; margin-inline: auto; }
.vv-credentials-head--center .vv-eyebrow { justify-content: center; }
.vv-credentials-head--center .vv-lede { margin-inline: auto; }

/* Homepage condensed version — a simple icon row, not the full card grid
   (that stays on the dedicated Partners page). */
.vv-credentials-iconrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 40px;
  margin-bottom: 40px;
}
.vv-credentials-iconitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 130px;
}
.vv-credentials-iconitem .vv-icon-box { margin-bottom: 0; }
.vv-credentials-iconitem span { font-size: 12.5px; font-weight: 650; color: var(--vv-charcoal); line-height: 1.35; }

.vv-credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vv-credentials-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  background: #fff;
  padding: 22px;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-credentials-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }
.vv-credentials-card .vv-icon-box { margin-bottom: 0; flex: none; }
.vv-credentials-card h3 { font-size: 16px; }
.vv-credentials-card p { margin-top: 6px; font-size: 13.5px; color: var(--vv-muted); }
.vv-credentials-note {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1.4px dashed rgba(23, 26, 25, 0.35);
  border-radius: var(--vv-r-md);
  font-size: 13px;
  color: var(--vv-muted);
  background: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) { .vv-credentials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vv-credentials-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   11 · INSIGHTS  (vv-insights-)
   ========================================================================== */
.vv-insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vv-insights-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-insights-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }
.vv-insights-visual {
  height: 168px;
  position: relative;
  overflow: hidden;
  border-bottom: 1.5px solid var(--vv-line-strong);
  background: var(--vv-mint-pale);
}
.vv-insights-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-insights-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vv-insights-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--vv-r-pill);
  background: var(--vv-mint-soft);
  color: var(--vv-teal-deep);
}
.vv-insights-title { font-size: 18px; line-height: 1.25; }
.vv-insights-excerpt { font-size: 14px; color: var(--vv-muted); }
.vv-insights-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--vv-muted);
  font-weight: 600;
}
.vv-insights-foot .vvi { font-size: 17px; color: var(--vv-teal-deep); transition: transform 0.18s var(--vv-ease); }
.vv-insights-card:hover .vv-insights-foot .vvi { transform: translateX(4px); }

@media (max-width: 1024px) { .vv-insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .vv-insights-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   12 · FAQ  (vv-faq-)
   ========================================================================== */
.vv-faq-wrap { display: grid; grid-template-columns: 38% 1fr; gap: 52px; align-items: start; }
.vv-faq-list {
  border-top: 1.4px solid rgba(23, 26, 25, 0.2);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--vv-r-md);
}
.vv-faq-item { border-bottom: 1.4px solid rgba(23, 26, 25, 0.14); }
.vv-faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  min-height: 60px;
  font-family: var(--vv-font-head);
  font-weight: 750;
  font-size: 16px;
}
.vv-faq-item > summary::-webkit-details-marker { display: none; }
.vv-faq-sign {
  margin-left: auto;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1.4px solid var(--vv-charcoal);
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
  transition: background 0.2s var(--vv-ease);
}
.vv-faq-sign::before, .vv-faq-sign::after {
  content: "";
  position: absolute;
  background: var(--vv-charcoal);
  border-radius: 2px;
  transition: transform 0.2s var(--vv-ease);
}
.vv-faq-sign::before { width: 12px; height: 2px; }
.vv-faq-sign::after { width: 2px; height: 12px; }
.vv-faq-item[open] .vv-faq-sign { background: var(--vv-gold); }
.vv-faq-item[open] .vv-faq-sign::after { transform: scaleY(0); }
.vv-faq-answer { padding: 0 22px 22px 22px; color: var(--vv-muted); font-size: 14.5px; max-width: 72ch; }
.vv-faq-aside .vv-card { margin-top: 24px; background: var(--vv-white); }
.vv-faq-aside .vv-card p { font-size: 14px; color: var(--vv-muted); margin-bottom: 16px; }

@media (max-width: 900px) { .vv-faq-wrap { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 767px) {
  .vv-faq-item > summary { padding: 18px 16px; font-size: 15px; gap: 12px; }
  .vv-faq-answer { padding: 0 16px 20px; }
}

/* ==========================================================================
   CONTACT DETAILS  (vv-contact-)  — used on contact.html above the FAQ
   ========================================================================== */
.vv-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 8px;
}
.vv-contact-card {
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  background: #fff;
  padding: 24px;
  transition: transform 0.2s var(--vv-ease), box-shadow 0.2s var(--vv-ease);
}
.vv-contact-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--vv-gold); }
.vv-contact-card h3 { font-size: 15px; margin-bottom: 6px; }
.vv-contact-card p { font-size: 14.5px; color: var(--vv-muted); }
.vv-contact-card a { color: var(--vv-teal-deep); text-decoration: none; font-weight: 650; }
.vv-contact-card a:hover { text-decoration: underline; }

@media (max-width: 767px) { .vv-contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   13 · FINAL CTA  (vv-cta-)
   ========================================================================== */
.vv-cta-root { background: var(--vv-ivory); padding-block: var(--vv-section); }
.vv-cta-box {
  position: relative;
  overflow: hidden;
  background: var(--vv-teal-deep);
  border: 1.6px solid var(--vv-charcoal);
  border-radius: 36px;
  box-shadow: 10px 11px 0 var(--vv-gold);
  padding: 72px 40px;
  text-align: center;
}
.vv-cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.vv-cta-title { color: #fff; font-size: clamp(28px, 4.2vw, 46px); }
.vv-cta-copy { margin-top: 18px; color: rgba(255, 255, 255, 0.8); font-size: 16px; }
.vv-cta-form {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.vv-cta-field {
  flex: 1 1 340px;
  min-width: 0;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: var(--vv-r-pill);
  border: 1.6px solid var(--vv-charcoal);
  background: #fff;
  font-family: var(--vv-font-body);
  font-size: 15px;
  color: var(--vv-charcoal);
}
.vv-cta-field::placeholder { color: #94a09b; }
.vv-cta-actions { margin-top: 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vv-cta-status { margin-top: 16px; font-size: 13.5px; color: var(--vv-mint-soft); min-height: 20px; }
.vv-cta-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vv-cta-deco .vv-sticker { position: absolute; }
.vv-cta-d1 { top: 13%; left: 6%; transform: rotate(-9deg); }
.vv-cta-d2 { bottom: 16%; left: 11%; transform: rotate(6deg); }
.vv-cta-d3 { top: 20%; right: 7%; transform: rotate(8deg); }
.vv-cta-semi {
  position: absolute;
  width: 220px; height: 110px;
  border-radius: 220px 220px 0 0;
  background: rgba(220, 237, 230, 0.14);
  bottom: 0; right: 8%;
}
.vv-cta-curve { position: absolute; bottom: 8%; right: 4%; width: 160px; color: var(--vv-gold); opacity: 0.7; }

@media (max-width: 900px) { .vv-cta-d1, .vv-cta-d2, .vv-cta-d3 { display: none; } }
@media (max-width: 767px) {
  .vv-cta-box { padding: 48px 22px; border-radius: 28px; box-shadow: 6px 7px 0 var(--vv-gold); }
  .vv-cta-form, .vv-cta-actions { flex-direction: column; }
  .vv-cta-actions .vv-btn { width: 100%; }
  .vv-cta-semi { display: none; }
}

/* ==========================================================================
   14 · FOOTER  (vv-footer-)
   ========================================================================== */
.vv-footer-root {
  background: var(--vv-charcoal);
  color: var(--vv-mint-soft);
  padding-top: 68px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1);
}
.vv-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 34px;
  padding-bottom: 48px;
}
.vv-footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vv-footer-logo svg { width: 40px; height: 40px; }
.vv-footer-logo-name { font-family: var(--vv-font-head); font-weight: 850; font-size: 18px; color: #fff; }
.vv-footer-logo-sub { font-size: 9px; letter-spacing: 0.4em; color: rgba(220, 237, 230, 0.6); margin-top: 3px; }
.vv-footer-about { font-size: 14px; color: rgba(220, 237, 230, 0.72); max-width: 34ch; }
.vv-footer-social { display: flex; gap: 10px; margin-top: 20px; }
.vv-footer-social a {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1.3px solid rgba(255, 255, 255, 0.2);
  display: grid; place-items: center;
  color: var(--vv-mint-soft);
  transition: all 0.18s var(--vv-ease);
}
.vv-footer-social a:hover { border-color: var(--vv-gold); color: var(--vv-gold); transform: translateY(-2px); }
.vv-footer-social .vvi { font-size: 17px; }
.vv-footer-col h4 {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.vv-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vv-footer-col a, .vv-footer-col li {
  font-size: 14px;
  color: rgba(220, 237, 230, 0.72);
  text-decoration: none;
  transition: color 0.15s var(--vv-ease);
}
.vv-footer-col a:hover { color: var(--vv-gold); }
.vv-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(220, 237, 230, 0.6);
}
.vv-footer-disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(220, 237, 230, 0.55);
  max-width: 92ch;
}

@media (max-width: 1024px) { .vv-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .vv-footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .vv-footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   15 · WHATSAPP  (vv-whatsapp-)
   ========================================================================== */
.vv-whatsapp-root {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 190;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.vv-whatsapp-label {
  background: #fff;
  border: 1.3px solid var(--vv-line);
  border-radius: var(--vv-r-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--vv-font-head);
  color: var(--vv-charcoal);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.vv-whatsapp-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.9);
  transition: transform 0.18s var(--vv-ease);
}
.vv-whatsapp-root:hover .vv-whatsapp-btn { transform: scale(1.06); }
.vv-whatsapp-btn .vvi { font-size: 28px; color: #fff; }

@media (max-width: 767px) { .vv-whatsapp-root { right: 14px; bottom: 16px; } }
@media (max-width: 389px) { .vv-whatsapp-label { display: none; } }

/* ==========================================================================
   Consultation page  (vv-quiz-)
   ========================================================================== */
.vv-quiz-root { background: var(--vv-mint-pale); padding-block: 64px 88px; min-height: 70vh; }
.vv-quiz-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; }
.vv-quiz-card {
  background: #fff;
  border: 1.6px solid var(--vv-charcoal);
  border-radius: var(--vv-r-lg);
  box-shadow: 8px 9px 0 var(--vv-gold);
  padding: 36px;
}
.vv-quiz-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
}
.vv-quiz-progress span {
  height: 6px;
  flex: 1;
  border-radius: 999px;
  background: var(--vv-mint-soft);
}
.vv-quiz-progress span.is-done { background: var(--vv-teal); }
.vv-quiz-step { display: none; }
.vv-quiz-step.is-active { display: block; }
.vv-quiz-legend {
  font-family: var(--vv-font-head);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 0;
  margin-bottom: 6px;
}
.vv-quiz-hint { color: var(--vv-muted); font-size: 14px; margin-bottom: 22px; }
.vv-quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vv-quiz-option {
  position: relative;
  display: block;
  border: 1.5px solid var(--vv-line-strong);
  border-radius: var(--vv-r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.18s var(--vv-ease);
}
.vv-quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.vv-quiz-option strong { display: block; font-family: var(--vv-font-head); font-size: 15px; }
.vv-quiz-option span { font-size: 13px; color: var(--vv-muted); }
.vv-quiz-option:hover { box-shadow: 3px 3px 0 var(--vv-gold); }
.vv-quiz-option:has(input:checked) {
  background: var(--vv-charcoal);
  border-color: var(--vv-charcoal);
  box-shadow: 4px 4px 0 var(--vv-gold);
  color: #fff;
}
.vv-quiz-option:has(input:checked) span { color: rgba(255, 255, 255, 0.75); }
.vv-quiz-option:has(input:focus-visible) { outline: 3px solid var(--vv-teal); outline-offset: 3px; }

.vv-quiz-field { display: grid; gap: 7px; margin-bottom: 18px; }
.vv-quiz-field label { font-family: var(--vv-font-head); font-weight: 700; font-size: 14px; }
.vv-quiz-field input,
.vv-quiz-field select,
.vv-quiz-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--vv-line-strong);
  background: #fff;
  font-family: var(--vv-font-body);
  font-size: 15px;
  color: var(--vv-charcoal);
}
.vv-quiz-field textarea { min-height: 110px; resize: vertical; }
.vv-quiz-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 28px; flex-wrap: wrap; }
.vv-quiz-error { color: #b3261e; font-size: 13px; margin-top: 12px; min-height: 18px; font-weight: 600; }
.vv-quiz-done { text-align: center; padding: 20px 0; }
.vv-quiz-done h2 { font-size: 26px; margin-bottom: 12px; }
.vv-quiz-done p { color: var(--vv-muted); }
.vv-quiz-summary {
  margin: 22px auto 0;
  text-align: left;
  max-width: 420px;
  border: 1.4px dashed rgba(23, 26, 25, 0.3);
  border-radius: var(--vv-r-md);
  padding: 18px;
  font-size: 14px;
}
.vv-quiz-summary div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.vv-quiz-summary dt { color: var(--vv-muted); }
.vv-quiz-aside .vv-card { background: #fff; }
.vv-quiz-aside h3 { font-size: 18px; margin-bottom: 12px; }
.vv-quiz-aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; color: var(--vv-muted); }
.vv-quiz-aside li { display: flex; gap: 10px; }
.vv-quiz-aside li .vvi { font-size: 17px; color: var(--vv-teal); margin-top: 2px; }

@media (max-width: 900px) { .vv-quiz-wrap { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .vv-quiz-card { padding: 26px 20px; box-shadow: 5px 6px 0 var(--vv-gold); }
  .vv-quiz-options { grid-template-columns: 1fr; }
  .vv-quiz-nav .vv-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Generic image frame — used wherever a real photo/illustration belongs.
   Prompts for every image using this class are in image-prompts.md.
   -------------------------------------------------------------------------- */
.vv-img-frame {
  border: 1.6px solid var(--vv-charcoal);
  border-radius: var(--vv-r-lg);
  box-shadow: 8px 9px 0 var(--vv-gold);
  overflow: hidden;
  background: var(--vv-mint-pale);
}
.vv-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Reveal on scroll + reduced motion
   -------------------------------------------------------------------------- */
/* Only hide when JS is running, so content is never lost if the script fails. */
.vv-js .vv-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--vv-ease), transform 0.6s var(--vv-ease);
}
.vv-js .vv-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .vv-js .vv-reveal { opacity: 1; transform: none; }
}

@media print {
  .vv-header-root, .vv-whatsapp-root, .vv-cases-nav { display: none !important; }
}