/* Visual Media Factory: complete stylesheet for the static build.
   Self contained. There is no theme underneath this any more, so it carries its
   own reset and base type as well as the component system carried over from the
   WordPress build. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Near black rather than navy. Pure #000 is harsh on large surfaces, so the
     dark ramp carries a trace of blue to keep it from looking flat. */
  --ink: #0a0a0c;
  --ink-2: #141419;
  --ink-3: #1d1d24;
  --line-dk: #2a2a33;

  /* Accent blue is tuned for white backgrounds: #3d6dff measured 4.31:1 and
     just misses AA, this one measures 5.56:1. The lighter variant is for use
     on the black surfaces, where the darker one would be muddy. */
  --brand: #2b5ce6;
  --brand-dk: #1e46b8;
  --brand-lt: #8aa9ff;

  /* The CTA now runs BLACK text on vivid orange, which measures 6.73:1. The old
     white-on-orange pairing forced the orange to be muted to reach 4.5:1; this
     inverts it, so the button is both brighter and higher contrast. */
  --cta: #ff5a1f;
  --cta-dk: #ff7a49;
  --cta-txt: #0a0a0c;

  /* Raised surface on the dark sections, and the hover step above it. Cards on
     black cannot use a drop shadow to separate themselves, so they separate by
     getting lighter instead. */
  --ink-4: #24242e;

  --txt: #0a0a0c;
  --mut: #5f5f6b;
  --line: #e6e6ea;
  --line-2: #d6d6dd;
  --soft: #f7f7f8;

  /* The section tint used to be --soft at #f7f7f8, three percent off white. On a
     page that alternates white and soft, that difference is invisible, so five
     consecutive sections all read as one uninterrupted white slab. This tint is
     far enough from white to actually band the page. */
  --tint: #eceef4;
  --tint-line: #d9dce6;
  --white: #fff;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(10,10,12,.06), 0 8px 24px rgba(10,10,12,.07);
  --shadow-lg: 0 2px 4px rgba(10,10,12,.07), 0 18px 44px rgba(10,10,12,.14);
  --max: 1180px;
  --prose: 46rem;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hdr-h: 72px;
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0; font-family: var(--font); color: var(--txt); background: var(--white);
  line-height: 1.62; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dk); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; letter-spacing: -.02em; font-weight: 800; color: var(--txt); }
h1 { font-size: clamp(2rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.25em; }
button { font: inherit; }
:focus-visible { outline: 3px solid #ffb27a; outline-offset: 2px; border-radius: 4px; }
.vmf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vmf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 700;
}
.vmf-skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- layout */
.vmf-in { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.vmf-sec { position: relative; padding: 88px 0; }

/* Three section surfaces: white, tint, ink. The full dark surface system lives
   further down under "dark sections", because it has to restyle every component
   that can appear inside one. --soft is kept as an alias of --tint so the
   generated article and blog templates band correctly without being edited. */
.vmf-sec--tint, .vmf-sec--soft { background: var(--tint); }
.vmf-sec--tint .vmf-card, .vmf-sec--soft .vmf-card,
.vmf-sec--tint .vmf-feat, .vmf-sec--soft .vmf-feat,
.vmf-sec--tint .vmf-tile, .vmf-sec--soft .vmf-tile,
.vmf-sec--tint .vmf-post, .vmf-sec--soft .vmf-post,
.vmf-sec--tint .vmf-person, .vmf-sec--tint .vmf-platbar,
.vmf-sec--tint .vmf-factcard,
.vmf-sec--tint .vmf-faq details, .vmf-sec--soft .vmf-faq details {
  background: #fff; border-color: var(--tint-line);
}
.vmf-sec--tint .vmf-step { border-top-color: var(--tint-line); }
.vmf-sec--tint .vmf-step:first-child { border-top-color: var(--cta); }

.vmf-eyebrow {
  display: inline-block; font-size: max(12px, .8rem); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 14px;
}
.vmf-sec--ink .vmf-eyebrow, .vmf-hero .vmf-eyebrow { color: var(--brand-lt); }
.vmf-lead { font-size: 1.09rem; color: var(--mut); max-width: 62ch; }
.vmf-hero .vmf-lead, .vmf-sec--ink .vmf-lead { color: #b4b4be; }
.vmf-head { max-width: 720px; margin-bottom: 46px; }
.vmf-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.vmf-head--center .vmf-lead { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- header */
.vmf-hdr {
  position: sticky; top: 0; z-index: 100; background: rgba(10,10,12,.96);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line-dk);
}
.vmf-hdr-in {
  max-width: var(--max); margin: 0 auto; padding: 0 24px; min-height: var(--hdr-h);
  display: flex; align-items: center; gap: 20px;
}
.vmf-logo { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; padding: 10px 0; }
.vmf-logo:hover { color: #fff; text-decoration: none; }
/* The owl, the actual brand mark, on the cream plate baked into the PNG. It is
   NOT placed directly on the dark bar: the owl's body is #300000 and against
   #0a0a0c it reads as two floating eyes. The plate is part of the image rather
   than a CSS background so the rounded corners cannot drift out of alignment
   with the art. */
.vmf-logo-mark { display: block; width: 40px; height: 40px; flex: 0 0 40px; }
.vmf-logo-text { font-size: .95rem; line-height: 1.2; font-weight: 500; color: #d8d8de; white-space: nowrap; }
.vmf-logo-text b { color: #fff; font-weight: 800; display: block; letter-spacing: -.01em; }

.vmf-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.vmf-nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.vmf-nav-list > li { position: relative; }
.vmf-nav-list a, .vmf-sub-toggle {
  display: block; padding: 10px 13px; color: #c2c2cb; font-size: .95rem; font-weight: 600;
  border-radius: 7px; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.vmf-nav-list a:hover, .vmf-sub-toggle:hover { color: #fff; background: rgba(255,255,255,.09); text-decoration: none; }
.vmf-nav-list a.is-active, .vmf-sub-toggle.is-active { color: #fff; background: rgba(255,255,255,.13); }
.vmf-sub-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; vertical-align: 2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vmf-sub {
  position: absolute; top: 100%; left: 0; min-width: 268px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; list-style: none; margin: 6px 0 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s;
}
.vmf-has-sub:hover .vmf-sub, .vmf-has-sub:focus-within .vmf-sub { opacity: 1; visibility: visible; transform: none; }
.vmf-sub a { color: var(--txt); font-weight: 600; padding: 9px 12px; }
.vmf-sub a:hover { background: var(--soft); color: var(--brand); }
.vmf-nav-cta { margin-left: 8px; padding: 11px 18px; font-size: .93rem; }

.vmf-navtoggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; }
.vmf-navtoggle-bars, .vmf-navtoggle-bars::before, .vmf-navtoggle-bars::after {
  display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .18s, opacity .18s;
}
.vmf-navtoggle-bars { position: relative; }
.vmf-navtoggle-bars::before, .vmf-navtoggle-bars::after { content: ""; position: absolute; left: 0; }
.vmf-navtoggle-bars::before { top: -7px; }
.vmf-navtoggle-bars::after { top: 7px; }
.vmf-navtoggle[aria-expanded="true"] .vmf-navtoggle-bars { background: transparent; }
.vmf-navtoggle[aria-expanded="true"] .vmf-navtoggle-bars::before { transform: translateY(7px) rotate(45deg); }
.vmf-navtoggle[aria-expanded="true"] .vmf-navtoggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- buttons */
.vmf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 15px 28px; border-radius: 9px; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-align: center; cursor: pointer; border: 2px solid transparent; text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease;
}
.vmf-btn:hover { text-decoration: none; transform: translateY(-2px); }
a.vmf-btn--cta, .vmf-btn--cta { background: var(--cta); color: var(--cta-txt); box-shadow: 0 6px 20px rgba(255,90,31,.28); }
a.vmf-btn--cta:hover, .vmf-btn--cta:hover { background: var(--cta-dk); color: var(--cta-txt); }
a.vmf-btn--ghost, .vmf-btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
a.vmf-btn--ghost:hover, .vmf-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
a.vmf-btn--line, .vmf-btn--line { border-color: var(--line-2); color: var(--txt); background: #fff; }
a.vmf-btn--line:hover, .vmf-btn--line:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.vmf-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.vmf-btns--center { justify-content: center; }

/* ------------------------------------------------------------------ hero */
.vmf-hero { background: var(--ink); color: #d8d8de; padding: 96px 0 78px; overflow: hidden; }
.vmf-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(820px 460px at 82% 6%, rgba(43,92,230,.20), transparent 64%); }
.vmf-hero .vmf-in { position: relative; z-index: 1; }
.vmf-hero h1 { color: #fff; max-width: 17ch; }
.vmf-hero .vmf-lead { font-size: 1.18rem; max-width: 60ch; margin-bottom: 30px; }
.vmf-hero--sm { padding: 74px 0 62px; }
.vmf-hero--sm h1 { max-width: 20ch; }
.vmf-micro { margin-top: 18px; font-size: .9rem; color: #85858f; }

/* Eight stats wrap to two rows of four. The row gap is larger than the column
   gap because each stat is two lines tall, and at an even 24px the rows read as
   one block of eight rather than two rows. */
.vmf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 24px; margin-top: 58px; padding-top: 34px; border-top: 1px solid var(--line-dk); }
.vmf-stat b { display: block; font-size: 1.85rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.vmf-stat span { display: block; font-size: max(12px, .88rem); color: #8f8f9b; margin-top: 4px; }

.vmf-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vmf-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 100px;
  background: var(--ink-2); border: 1px solid var(--line-dk);
  font-size: max(12px, .86rem); font-weight: 600; color: #d8d8de; }

/* ----------------------------------------------------------- components */
.vmf-plat, .vmf-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vmf-plat { margin-top: 44px; }
.vmf-feat, .vmf-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.vmf-card { display: flex; flex-direction: column; padding: 28px 26px; color: var(--txt); text-decoration: none; }
a.vmf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #c9dcf3; text-decoration: none; color: var(--txt); }
.vmf-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cddcef; }
.vmf-card--static { cursor: default; }
.vmf-card--static:hover { transform: none; box-shadow: none; border-color: var(--line); }
.vmf-feat h3, .vmf-card h3 { margin-bottom: .45em; }
.vmf-feat p, .vmf-card p { color: var(--mut); font-size: .96rem; margin: 0 0 1.1em; }
.vmf-feat p { margin-bottom: 0; }
.vmf-card p { flex: 1; }
.vmf-ico { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #eef1fb; color: var(--brand); margin-bottom: 16px; }
.vmf-ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vmf-more { font-weight: 700; color: var(--brand); font-size: .94rem; display: inline-flex; align-items: center; gap: .4em; }
.vmf-arw { transition: transform .16s ease; display: inline-block; }
a.vmf-card:hover .vmf-arw, .vmf-post:hover .vmf-arw { transform: translateX(4px); }

.vmf-platbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; padding: 22px 26px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--cta); border-radius: var(--radius); }
.vmf-platbar p { margin: 0; flex: 1 1 280px; color: var(--mut); font-size: .97rem; }
.vmf-platbar b { color: var(--txt); }

.vmf-work { margin-top: 34px; }
.vmf-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 40px; }
.vmf-tile { display: block; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  color: var(--txt); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.vmf-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #c9dcf3; text-decoration: none; color: var(--txt); }
.vmf-tile b { display: block; font-size: .97rem; font-weight: 700; word-break: break-word; }
.vmf-tile:hover b { color: var(--brand); }
.vmf-tile span { display: block; font-size: max(12px, .855rem); color: var(--mut); margin-top: 3px; }

.vmf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: vmfstep; }
.vmf-step { position: relative; padding-top: 20px; border-top: 3px solid var(--line); }
.vmf-step::before { counter-increment: vmfstep; content: counter(vmfstep, decimal-leading-zero);
  display: block; font-size: max(12px, .8rem); font-weight: 800; color: var(--cta); letter-spacing: .08em; margin-bottom: 10px; }
.vmf-step p { color: var(--mut); font-size: .95rem; margin: 0; }

.vmf-split { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 46px; align-items: start; }
.vmf-split-main > p { color: var(--mut); }
.vmf-split-main em { color: var(--txt); font-style: italic; }
.vmf-factcard { background: var(--tint); border: 1px solid var(--tint-line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 26px 26px 22px; position: sticky; top: calc(var(--hdr-h) + 22px); }
.vmf-factcard h3 { margin-bottom: 16px; }
.vmf-facts { margin: 0; }
.vmf-facts dt { font-size: max(12px, .74rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-top: 14px; }
.vmf-facts dt:first-child { margin-top: 0; }
.vmf-facts dd { margin: 3px 0 0; font-size: .95rem; color: var(--txt); }

.vmf-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 26px; }
.vmf-checks li { position: relative; padding-left: 30px; color: var(--mut); font-size: .98rem; }
.vmf-checks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 4px; background: #fdeee6; border: 1px solid #f3c3a6; }
.vmf-checks li::after { content: ""; position: absolute; left: 5px; top: .62em; width: 5px; height: 9px; border: solid var(--cta); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.vmf-deliv { list-style: none; margin: 0; padding: 0; }
.vmf-deliv li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: .95rem; color: var(--mut); }
.vmf-deliv li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.vmf-deliv strong { color: var(--txt); font-weight: 700; }

.vmf-person { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 28px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 34px; }
.vmf-person-mark { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.1rem; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--brand) 0%, #0a0a0c 100%); }
.vmf-person-body h3 { font-size: 1.32rem; margin-bottom: .15em; }
.vmf-person-role { font-size: max(12px, .8rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cta); margin: 0 0 14px; }
.vmf-person-body p { color: var(--mut); }

.vmf-faq { max-width: 860px; margin: 0 auto; }
.vmf-faq details { border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.vmf-faq details[open] { border-color: #c9dcf3; box-shadow: var(--shadow); }
.vmf-faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; position: relative; font-weight: 700; font-size: 1.02rem; }
.vmf-faq summary::-webkit-details-marker { display: none; }
.vmf-faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px;
  border: solid var(--mut); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .16s ease; }
.vmf-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vmf-faq summary:hover { color: var(--brand); }
.vmf-faq-a { padding: 0 22px 20px; color: var(--mut); font-size: .97rem; }
.vmf-faq-a p:last-child { margin-bottom: 0; }

/* The closing CTA used to be the only dark block on a white page, so plain black
   was enough to make it land. Now that whole sections are dark it needs its own
   signature, and the orange halo is the one thing no other section uses. */
.vmf-cta-band { background: var(--ink); text-align: center; overflow: hidden; border-top: 1px solid var(--line-dk); }
.vmf-cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 340px at 50% -8%, rgba(255,90,31,.17), transparent 66%),
    radial-gradient(600px 320px at 10% 108%, rgba(43,92,230,.16), transparent 70%);
}
.vmf-cta-band .vmf-in { position: relative; z-index: 1; }
.vmf-cta-band h2 { color: #fff; max-width: 20ch; margin-left: auto; margin-right: auto; }
.vmf-cta-band .vmf-lead { color: #b4b4be; margin: 0 auto 30px; }
.vmf-cta-band .vmf-micro { color: #9a9aa6; }

/* A lone card on its own row reads as a mistake: let it span instead. */
@media (min-width: 1025px) { .vmf-grid3 > :last-child:nth-child(3n+1), .vmf-plat > :last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
@media (min-width: 761px) and (max-width: 1024px) { .vmf-grid3 > :last-child:nth-child(2n+1), .vmf-plat > :last-child:nth-child(2n+1) { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ blog + article */
.vmf-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vmf-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.vmf-post:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vmf-post-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
.vmf-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.vmf-post:hover .vmf-post-img img { transform: scale(1.045); }
.vmf-post-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.vmf-post-meta { font-size: max(12px, .8rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin-bottom: 9px; }
.vmf-post h3 { font-size: 1.04rem; margin-bottom: .5em; }
.vmf-post h3 a { color: var(--txt); }
.vmf-post h3 a:hover { color: var(--brand); text-decoration: none; }
.vmf-post p { font-size: .93rem; color: var(--mut); flex: 1; margin-bottom: 1em; }
.vmf-pager { margin-top: 40px; }

.vmf-article-head { padding-top: 46px; }
/* Articles are the bulk of the site, so leaving them white from header to footer
   put most of the pages back where the homepage started. The prose stays light,
   which is what it is for; only the masthead goes dark. */
.vmf-artbar { background: var(--ink); position: relative; overflow: hidden; border-top: 1px solid var(--line-dk); }
.vmf-artbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 320px at 84% 0%, rgba(43,92,230,.16), transparent 66%);
}
.vmf-artbar .vmf-article-head { position: relative; z-index: 1; padding: 44px 24px 42px; }
.vmf-artbar h1 { color: #fff; }
.vmf-artbar .vmf-crumbs, .vmf-artbar .vmf-crumbs a, .vmf-artbar .vmf-post-meta { color: #9a9aa6; }
.vmf-artbar .vmf-crumbs a:hover, .vmf-artbar .vmf-post-meta a { color: var(--brand-lt); }
.vmf-article-hero { margin-top: 28px; }
.vmf-sec--band { padding: 60px 0 56px; }
.vmf-crumbs { font-size: max(12px, .85rem); color: var(--mut); margin-bottom: 18px; }
.vmf-crumbs a { color: var(--mut); }
.vmf-crumbs a:hover { color: var(--brand); }
.vmf-article-head h1 { max-width: 22ch; font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
.vmf-article-hero { margin: 0 auto 8px; max-width: var(--max); padding: 0 24px; }
.vmf-article-hero img { width: 100%; border-radius: var(--radius); aspect-ratio: 16/9; object-fit: cover; }

.vmf-prose { max-width: var(--prose); font-size: 1.06rem; padding-top: 32px; padding-bottom: 8px; }
.vmf-prose--narrow { max-width: 42rem; }
.vmf-prose h2 { font-size: 1.6rem; margin: 1.9em 0 .55em; }
.vmf-prose h3 { font-size: 1.22rem; margin: 1.6em 0 .5em; }
.vmf-prose p, .vmf-prose li { color: #2b2b33; }
.vmf-prose li { margin-bottom: .45em; }
.vmf-prose img { border-radius: 10px; margin: 1.6em 0; }
.vmf-prose figure { margin: 1.8em 0; }
.vmf-prose blockquote { margin: 1.8em 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--brand); color: var(--mut); font-style: italic; }
.vmf-prose code { background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: .12em .38em; font-size: .92em; }
.vmf-prose pre { background: var(--ink-2); color: #e4e4ea; padding: 20px 22px; border-radius: 10px; overflow-x: auto; font-size: .92rem; line-height: 1.6; }
.vmf-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.vmf-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; display: block; overflow-x: auto; }
.vmf-prose th, .vmf-prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.vmf-prose th { background: var(--soft); font-weight: 700; }
.vmf-article-cta { margin: 40px 0 8px; padding: 30px 32px; background: var(--tint); border: 1px solid var(--tint-line);
  border-left: 3px solid var(--cta); border-radius: var(--radius); max-width: var(--prose); }
.vmf-article-cta h2 { font-size: 1.3rem; margin-bottom: .45em; }
.vmf-article-cta p { color: var(--mut); margin-bottom: 20px; }
.vmf-related-h { font-size: 1.35rem; margin-bottom: 24px; }

/* ---------------------------------------------------------------- footer */
.vmf-ftr { background: var(--ink); color: #a5a5b0; padding: 62px 0 0; margin-top: 0; }
.vmf-ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.vmf-ftr h3 { color: #fff; font-size: max(12px, .82rem); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.vmf-ftr ul { list-style: none; margin: 0; padding: 0; }
.vmf-ftr li { margin-bottom: 9px; }
.vmf-ftr a { color: #a5a5b0; font-size: .95rem; }
.vmf-ftr a:hover { color: #fff; }
.vmf-ftr-brand p { font-size: .95rem; margin: 14px 0 16px; max-width: 34ch; }
.vmf-ftr-li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line-dk); border-radius: 8px; font-weight: 600; }
.vmf-ftr-li:hover { border-color: #fff; text-decoration: none; }
.vmf-ftr-base { border-top: 1px solid var(--line-dk); padding: 20px 0; }
.vmf-ftr-base .vmf-in { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.vmf-ftr-base p { margin: 0; font-size: max(12px, .875rem); }

/* --------------------------------------------------------------- consent */
.vmf-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 640px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px 22px;
}
.vmf-consent p { margin: 0 0 14px; font-size: .95rem; color: var(--txt); }
.vmf-consent-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vmf-consent-btns .vmf-btn { padding: 11px 18px; font-size: .93rem; }
.vmf-consent-btns a { font-size: .88rem; color: var(--mut); }
.vmf-privacy-reopen { position: fixed; left: 16px; bottom: 16px; z-index: 90; background: #fff; color: var(--mut);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 9px 16px; font-size: .82rem; cursor: pointer; box-shadow: var(--shadow); }
.vmf-privacy-reopen:hover { color: var(--brand); border-color: var(--brand); }

/* ------------------------------------------------------------- contact form */
.vmf-form { display: grid; gap: 18px; max-width: 640px; }
.vmf-field { display: grid; gap: 7px; }
.vmf-field label { font-weight: 700; font-size: .93rem; }
.vmf-field input, .vmf-field textarea, .vmf-field select {
  font: inherit; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--txt); width: 100%;
}
.vmf-field input:focus, .vmf-field textarea:focus { border-color: var(--brand); outline: 3px solid rgba(43,92,230,.18); outline-offset: 0; }
.vmf-field textarea { min-height: 150px; resize: vertical; }
.vmf-hp { position: absolute; left: -9999px; }
.vmf-formnote { font-size: .87rem; color: var(--mut); }
.vmf-formmsg { padding: 14px 16px; border-radius: 9px; font-size: .95rem; }
.vmf-formmsg.ok { background: #e8f7ee; border: 1px solid #a9dcbd; color: #15603a; }
.vmf-formmsg.err { background: #fdecec; border: 1px solid #f2b8b8; color: #8f1d1d; }

/* ----------------------------------------------------------- breakpoints */
@media (max-width: 1024px) {
  .vmf-plat, .vmf-grid3, .vmf-posts { grid-template-columns: repeat(2, 1fr); }
  .vmf-tiles { grid-template-columns: repeat(3, 1fr); }
  .vmf-steps { grid-template-columns: repeat(2, 1fr); }
  .vmf-sec { padding: 70px 0; }
  .vmf-ftr-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 980px) {
  .vmf-split { grid-template-columns: 1fr; gap: 32px; }
  .vmf-factcard { position: static; }
}
@media (max-width: 900px) {
  .vmf-navtoggle { display: flex; }
  .vmf-nav {
    position: fixed; inset: var(--hdr-h) 0 0; background: var(--ink); flex-direction: column;
    align-items: stretch; gap: 0; padding: 18px 24px 40px; overflow-y: auto; display: none;
  }
  .vmf-nav.is-open { display: flex; }
  .vmf-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .vmf-nav-list a, .vmf-sub-toggle { padding: 15px 8px; font-size: 1.02rem; width: 100%; text-align: left; border-radius: 0; border-bottom: 1px solid var(--line-dk); }
  .vmf-sub-toggle::after { float: right; margin-top: 8px; }
  .vmf-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent;
    border: 0; border-bottom: 1px solid var(--line-dk); border-radius: 0; margin: 0; padding: 0 0 8px 14px; display: none; }
  .vmf-has-sub.is-open .vmf-sub { display: block; }
  .vmf-sub a { color: #c2c2cb; border: 0; padding: 12px 8px; }
  .vmf-sub a:hover { background: var(--ink-2); color: #fff; }
  .vmf-nav-cta { margin: 20px 0 0; width: 100%; }
  body.vmf-navopen { overflow: hidden; }
}
@media (max-width: 760px) {
  .vmf-sec { padding: 56px 0; }
  .vmf-hero { padding: 68px 0 56px; }
  .vmf-hero--sm { padding: 56px 0 46px; }
  .vmf-plat, .vmf-grid3, .vmf-posts, .vmf-steps, .vmf-checks { grid-template-columns: 1fr; }
  .vmf-tiles { grid-template-columns: repeat(2, 1fr); }
  .vmf-stats { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 42px; }
  .vmf-hero h1 { max-width: none; }
  .vmf-btns .vmf-btn { flex: 1 1 100%; }
  .vmf-head { margin-bottom: 34px; }
  .vmf-person { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  .vmf-person-mark { width: 76px; height: 76px; font-size: 1.6rem; }
  .vmf-faq summary { font-size: .97rem; padding: 16px 46px 16px 18px; }
  .vmf-faq-a { padding: 0 18px 18px; }
  .vmf-ftr-grid { grid-template-columns: 1fr; gap: 26px; }
  .vmf-article-cta { padding: 24px 22px; }
  .vmf-prose { font-size: 1.02rem; }
}
@media (max-width: 420px) {
  .vmf-tiles { grid-template-columns: 1fr; }
  .vmf-in, .vmf-hdr-in, .vmf-article-hero { padding-left: 18px; padding-right: 18px; }
  .vmf-logo-text { display: none; }
}
/* ------------------------------------------------- modern accent details */
/* Small, deliberate uses of the accent against the black. Each earns its place:
   a rule under section labels, an accent edge that appears on card hover, and a
   thin accent bar at the very top of the page. */
.vmf-eyebrow { position: relative; padding-bottom: 10px; }
.vmf-eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
  background: var(--cta); border-radius: 2px;
}
.vmf-head--center .vmf-eyebrow::after { left: 50%; transform: translateX(-50%); }

/* Accent edge revealed on hover, rather than a colour wash */
.vmf-card, .vmf-feat, .vmf-tile, .vmf-post { position: relative; overflow: hidden; }
.vmf-card::after, .vmf-feat::after, .vmf-tile::after, .vmf-post::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--cta); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
a.vmf-card:hover::after, .vmf-feat:hover::after, .vmf-tile:hover::after, .vmf-post:hover::after { transform: scaleX(1); }
.vmf-card--static::after { display: none; }

/* Hairline accent across the very top of every page */
body::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--cta) 0%, var(--brand) 52%, var(--ink) 100%);
}

/* Numerals in the stat bar get the accent, which is where the eye lands first */
.vmf-stat b { color: #fff; }
.vmf-stat b::first-letter { color: var(--cta); }

/* ---------------------------------------------------------- dark sections */
/* A dark section has to restyle every component that can land inside it, not
   just the background. Anything missed here inherits a light-surface rule and
   shows up as a white card or near-black text on black. Each colour below was
   measured against the surface it actually composites onto, not against #000. */

.vmf-sec--ink { background: var(--ink); color: #b6b6c2; border-top: 1px solid var(--line-dk); }
.vmf-sec--ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 380px at 88% 0%, rgba(43,92,230,.13), transparent 66%);
}
.vmf-sec--ink > .vmf-in { position: relative; z-index: 1; }
.vmf-sec--ink h1, .vmf-sec--ink h2, .vmf-sec--ink h3, .vmf-sec--ink h4 { color: #fff; }
/* A band whose only content is the section head should not carry the 46px gap
   that exists to separate a head from the grid beneath it. */
.vmf-sec--ink .vmf-head:only-child { margin-bottom: 0; }
.vmf-sec--ink p, .vmf-sec--ink .vmf-lead { color: #b6b6c2; }
.vmf-sec--ink .vmf-eyebrow { color: var(--brand-lt); }
/* :not(.vmf-btn) is load bearing. `.vmf-sec--ink a` and `a.vmf-btn--cta` have
   IDENTICAL specificity (0,1,1), so the one declared later wins, and this block
   is declared later. Without the exclusion the primary CTA rendered #8aa9ff text
   on its own orange background, about 1.9:1. The same collision hit this site
   once before via `.vmf a`. Excluding buttons from the generic link colour fixes
   every button variant at once rather than patching them one at a time. */
.vmf-sec--ink a:not(.vmf-btn) { color: var(--brand-lt); }
.vmf-sec--ink a:not(.vmf-btn):hover { color: #b7c9ff; }
.vmf-sec--ink .vmf-micro { color: #9a9aa6; }

/* Raised surfaces. On black a drop shadow does nothing, so cards separate by
   getting lighter, and lighter again on hover. */
.vmf-sec--ink .vmf-card, .vmf-sec--ink .vmf-feat, .vmf-sec--ink .vmf-tile,
.vmf-sec--ink .vmf-post, .vmf-sec--ink .vmf-person, .vmf-sec--ink .vmf-platbar,
.vmf-sec--ink .vmf-factcard, .vmf-sec--ink .vmf-faq details {
  background: var(--ink-2); border-color: var(--line-dk);
}
.vmf-sec--ink a.vmf-card:hover, .vmf-sec--ink .vmf-feat:hover,
.vmf-sec--ink .vmf-tile:hover, .vmf-sec--ink .vmf-post:hover {
  background: var(--ink-3); border-color: #3f3f4d;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.vmf-sec--ink .vmf-card h3, .vmf-sec--ink .vmf-feat h3,
.vmf-sec--ink .vmf-post h3 a, .vmf-sec--ink .vmf-tile b { color: #fff; }
.vmf-sec--ink .vmf-tile:hover b { color: var(--brand-lt); }
.vmf-sec--ink .vmf-card p, .vmf-sec--ink .vmf-feat p,
.vmf-sec--ink .vmf-post p, .vmf-sec--ink .vmf-tile span,
.vmf-sec--ink .vmf-platbar p { color: #a8a8b6; }
.vmf-sec--ink .vmf-platbar b { color: #fff; }
.vmf-sec--ink .vmf-more { color: var(--brand-lt); }
.vmf-sec--ink .vmf-post-meta { color: #9a9aa6; }
.vmf-sec--ink .vmf-post-img { background: var(--ink-3); }

/* The icon chip is a flat blue wash on white. On black that wash disappears, so
   it becomes a translucent brand tint with the light accent glyph on top. */
.vmf-sec--ink .vmf-ico { background: rgba(43,92,230,.20); color: var(--brand-lt); }

.vmf-sec--ink .vmf-step { border-top-color: var(--line-dk); }
.vmf-sec--ink .vmf-step:first-child { border-top-color: var(--cta); }
.vmf-sec--ink .vmf-step p { color: #a8a8b6; }

.vmf-sec--ink .vmf-checks li { color: #b6b6c2; }
.vmf-sec--ink .vmf-checks li::before { background: rgba(255,90,31,.16); border-color: rgba(255,122,73,.5); }

.vmf-sec--ink .vmf-deliv li { color: #b6b6c2; }
.vmf-sec--ink .vmf-deliv strong { color: #fff; }
.vmf-sec--ink .vmf-deliv li::before { background: var(--brand-lt); }

.vmf-sec--ink .vmf-factcard { border-left-color: var(--brand-lt); }
.vmf-sec--ink .vmf-facts dt { color: #9a9aa6; }
.vmf-sec--ink .vmf-facts dd { color: #d8d8de; }

.vmf-sec--ink .vmf-faq summary { color: #fff; }
.vmf-sec--ink .vmf-faq summary:hover { color: var(--brand-lt); }
.vmf-sec--ink .vmf-faq summary::after { border-color: #9a9aa6; }
.vmf-sec--ink .vmf-faq details[open] { border-color: #3f3f4d; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.vmf-sec--ink .vmf-faq-a { color: #b6b6c2; }

.vmf-sec--ink .vmf-person-role { color: var(--cta-dk); }
.vmf-sec--ink .vmf-person-mark { background: linear-gradient(145deg, var(--brand) 0%, var(--ink-4) 100%); }

/* The outline button is white-on-white by default, which is invisible here. */
.vmf-sec--ink a.vmf-btn--line, .vmf-sec--ink .vmf-btn--line {
  background: transparent; border-color: #3f3f4d; color: #fff;
}
.vmf-sec--ink a.vmf-btn--line:hover, .vmf-sec--ink .vmf-btn--line:hover {
  border-color: #fff; background: rgba(255,255,255,.09); color: #fff;
}
.vmf-sec--ink .vmf-split-main > p { color: #b6b6c2; }
.vmf-sec--ink .vmf-split-main em { color: #fff; }

/* ------------------------------------------------- sample audit result panel */
/* Deliberately not built from .vmf-card: the point of this block is that it
   looks like the product rather than like the rest of the page, so it carries
   its own surface and does not inherit the dark-section card treatment. */
.vmf-scan { margin-top: 40px; background: var(--ink-2); border: 1px solid var(--line-dk);
  border-radius: 12px; overflow: hidden; }
.vmf-scan-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 15px 20px; background: var(--ink-3); border-bottom: 1px solid var(--line-dk); }
.vmf-scan-dot { width: 9px; height: 9px; border-radius: 50%; background: #35c07a; flex: 0 0 9px; }
.vmf-scan-site { font-weight: 700; color: #fff; font-size: .97rem; }
.vmf-scan-meta { color: #9a9aa6; font-size: max(12px, .85rem); margin-left: auto; }

.vmf-scan-list { list-style: none; margin: 0; padding: 0; }
.vmf-scan-list li { display: grid; grid-template-columns: 82px 52px minmax(0, 1fr);
  align-items: center; gap: 14px; padding: 13px 20px; border-top: 1px solid rgba(255,255,255,.055); }
.vmf-scan-list li:first-child { border-top: 0; }
.vmf-scan-list b { font-variant-numeric: tabular-nums; text-align: right;
  font-size: 1.05rem; font-weight: 800; color: #fff; }
.vmf-scan-list li > span:last-child { color: #b6b6c2; font-size: .95rem; }

.vmf-sev { display: block; text-align: center; padding: 4px 0; border-radius: 100px;
  font-size: max(11px, .72rem); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.vmf-sev--crit { background: rgba(255,77,77,.16);  color: #ff8f8f; border: 1px solid rgba(255,77,77,.34); }
.vmf-sev--high { background: rgba(255,90,31,.15);  color: #ffa06b; border: 1px solid rgba(255,122,73,.34); }
.vmf-sev--med  { background: rgba(43,92,230,.20);  color: #a3baff; border: 1px solid rgba(138,169,255,.30); }
.vmf-sev--low  { background: rgba(255,255,255,.06); color: #adadbb; border: 1px solid rgba(255,255,255,.14); }

.vmf-scan-note { margin: 0; padding: 14px 20px; background: rgba(255,255,255,.022);
  border-top: 1px solid var(--line-dk); color: #9a9aa6; font-size: max(12px, .86rem); }

/* Below this the three columns leave the description about 200px, which wraps
   every row to three lines. Stack instead: severity and count on one line, the
   description under them. */
@media (max-width: 560px) {
  /* The second column must be flexible, not 52px. With two fixed columns the
     "desc desc" row spans only their combined 148px and every description wraps
     to three lines inside a mostly empty row. */
  .vmf-scan-list li { grid-template-columns: 82px minmax(0, 1fr);
    grid-template-areas: "sev count" "desc desc"; row-gap: 8px; padding: 14px 16px; }
  .vmf-scan-list li > .vmf-sev { grid-area: sev; }
  .vmf-scan-list li > b { grid-area: count; text-align: left; }
  .vmf-scan-list li > span:last-child { grid-area: desc; }
  .vmf-scan-bar { padding: 13px 16px; }
  .vmf-scan-meta { margin-left: 0; width: 100%; }
  .vmf-scan-note { padding: 13px 16px; }
}

/* Step rules pick up the accent on the first step */
.vmf-step:first-child { border-top-color: var(--cta); }

/* Touch target floors. Breadcrumbs, the post meta category link and the consent
   policy link are navigation rather than prose, so they get a real hit area on a
   coarse pointer even though they render as inline text. */
@media (pointer: coarse), (max-width: 760px) {
  .vmf-crumbs a, .vmf-post-meta a, .vmf-consent-btns a, .vmf-ftr-base a {
    display: inline-block; min-height: 40px; line-height: 40px;
  }
  .vmf-ftr li a { display: inline-block; min-height: 38px; line-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .vmf-btn:hover, .vmf-card:hover, .vmf-tile:hover, .vmf-feat:hover, .vmf-post:hover { transform: none; }
}
@media print {
  .vmf-hdr, .vmf-ftr, .vmf-consent, .vmf-privacy-reopen, .vmf-article-cta, .vmf-btns { display: none !important; }
  body { font-size: 12pt; }
  .vmf-prose { max-width: none; }
}