/* ==========================================================================
   Vernsten Law — design system (2026 redesign)
   Tokens, type, and the parts every template is built from.
   Source: "Vernsten Law Redesign" design board, section 01-08.
   Self-hosted fonts only: the site makes ZERO external font requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Archivo is the headline face, used at 86% width (wdth axis 62-125) so it
   sits close to the solid capitals of the wordmark. Public Sans is for
   reading and forms. Source Serif 4 italic is ONLY for client reviews and
   Eric's own words.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans/public-sans-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif/source-serif-italic-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   01 · Color
   Navy carries structure, headings and the dark sections. Red is the action
   color: buttons, eyebrows, one accent word per headline. Beige is the page,
   white is for anything you read closely.
   -------------------------------------------------------------------------- */
:root {
  /* navy — the V and the wordmark */
  --navy-950: #0B0926;  /* footer, utility bar */
  --navy-900: #131040;  /* dark sections, hero */
  --navy-800: #1F1A5E;  /* logo navy: headings, secondary buttons */
  --navy-700: #2B2580;  /* links */
  --navy-100: #E4E2F1;  /* icon tiles, tags */

  /* red — the stripes */
  --red-700: #8E1822;   /* button hover */
  --red-600: #B11E29;   /* logo red: primary action, accents */
  --red-300: #F0A2A7;   /* accent on dark */
  --red-100: #F7E0E1;   /* alerts, soft highlight */

  /* beige — the page */
  --paper: #F6F0E4;     /* page background */
  --cream: #EEE5D3;     /* alternate sections */
  --sand:  #DCCDB1;     /* field borders */
  --bone:  #FBF8F2;     /* fields, table rows */
  --white: #FFFFFF;     /* cards, reading surfaces */

  /* text */
  --text:  #19172F;     /* body copy */
  --muted: #5C5A70;     /* secondary copy */
  --star:  #F5B83D;     /* review stars only */

  /* type */
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-quote: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* layout */
  /* Measured off the boards: content runs x100..x1340 on a 1440 artboard, so
     the container is 1240 wide with 100px margins -- not 1200/120. Every page
     was coming out 40px narrow and 20px further inset than the design. */
  --page-max: 1240px;
  --read-max: 820px;
  --gutter: 24px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html { overflow-x: clip; }

body.vl {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.76;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* `clip`, never `hidden`: `overflow-x: hidden` makes the body a scroll
     container, which silently kills `position: sticky` on every descendant
     (header, article TOC, consultation card, calculator rail). `html` above
     already clips, so the horizontal guard is kept either way. */
  overflow-x: clip;
}

.vl :where(img) { max-width: 100%; height: auto; display: block; }
.vl :where(svg) { display: block; }

.vl :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  color: var(--navy-800);
  margin: 0;
  text-wrap: balance;
}

.vl :where(p) { margin: 0 0 1.1em; }
.vl :where(p:last-child) { margin-bottom: 0; }

.vl :where(a) { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.vl :where(a):hover { color: var(--red-600); }

.vl :focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 2px;
}

/* Skip link — keyboard users land here first */
.vx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 12px 20px;
  font-weight: 700;
}
.vx-skip:focus { left: 8px; top: 8px; color: #fff; }

/* --------------------------------------------------------------------------
   02 · Typography scale
   Display sizes are fluid: the design's desktop value is the ceiling and the
   mobile board's value is the floor.
   -------------------------------------------------------------------------- */
.vx-display-xl { font-size: clamp(40px, 6.6vw, 96px); line-height: 0.94; letter-spacing: -0.015em; }
/* The 32px floor left every mobile h1 about 30% under the boards, which
   measure ~42px at 390. The desktop end is unchanged. */
.vx-display-lg { font-size: clamp(42px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.012em; }
.vx-display-md { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -0.01em; }
.vx-title-lg   { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; }
.vx-title-md   { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; }

.vx-lede {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--muted);
}

/* One accent word per headline — red, never more than one */
.vx-accent { color: var(--red-600); }

/* An underline that reads as a brand stripe, used on the footer headline */
.vx-underline {
  box-shadow: inset 0 -0.12em 0 0 var(--red-600);
}

.vx-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.5;
  color: var(--text);
}

/* Eyebrow — Archivo 700, 12.5px, +20% tracking, caps, with a red star */
.vx-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-600);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.vx-eyebrow::before {
  content: '';
  width: 11px; height: 11px;
  flex: none;
  background: currentColor;
  /* five-pointed star */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.vx-eyebrow.is-on-dark { color: var(--red-300); }
.vx-eyebrow.is-bare::before { display: none; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.vx-wrap {
  width: 100%;
  max-width: calc(var(--page-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vx-section { padding-block: clamp(56px, 7vw, 104px); }
.vx-section--tight { padding-block: clamp(40px, 4.5vw, 64px); }
.vx-section--paper { background: var(--paper); }
.vx-section--cream { background: var(--cream); }
.vx-section--white { background: var(--white); }
.vx-section--dark  { background: var(--navy-900); color: rgba(255,255,255,.82); position: relative; overflow: hidden; }
.vx-section--dark :where(h1,h2,h3,h4,h5,h6) { color: #fff; }
.vx-section--dark :where(a) { color: #fff; }

/* Section head: number + title on the left, supporting copy on the right */
.vx-sec-head {
  display: grid;
  /* Measured off the boards at 1440: heading column 640, copy column 535,
     65px between them. 46% left the heading too narrow and wrapped
     "Legal help for Rockford residents." onto a second line. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 4.5vw, 65px);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.vx-sec-head__copy { color: var(--muted); margin: 0; }
.vx-section--dark .vx-sec-head__copy { color: rgba(255,255,255,.72); }
@media (max-width: 860px) {
  .vx-sec-head { grid-template-columns: minmax(0, 1fr); }
}

.vx-grid { display: grid; gap: clamp(16px, 1.6vw, 24px); }
.vx-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vx-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.vx-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1024px) {
  .vx-grid--3, .vx-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .vx-grid--2, .vx-grid--3, .vx-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   07 · Motifs — the star field, the stripes, the V.
   They stay in the background and never compete with text.
   -------------------------------------------------------------------------- */
.vx-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  /* Five-pointed star on an 82px canvas, plus a second pass offset by half a
     tile: the boards measure ~41px between star columns. Drawing the glyph on
     the full tile keeps it ~9px when the tile scales. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='82' viewBox='0 0 82 82'%3E%3Cpath fill='%23fff' d='M41 37.6l1.0 2.15 2.35.34-1.7 1.6.4 2.3L41 42.9 38.95 44l.4-2.3-1.7-1.6 2.35-.34z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='82' viewBox='0 0 82 82'%3E%3Cpath fill='%23fff' d='M41 37.6l1.0 2.15 2.35.34-1.7 1.6.4 2.3L41 42.9 38.95 44l.4-2.3-1.7-1.6 2.35-.34z'/%3E%3C/svg%3E");
  background-size: 82px 82px, 82px 82px;
  background-position: 0 0, 41px 41px;
  background-repeat: repeat, repeat;
  opacity: .085;
}
.vx-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--red-600) 0 10px,
    transparent 10px 20px
  );
}
.vx-stripes--soft {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(177,30,41,.55) 0 10px,
    transparent 10px 20px
  );
}
/* The faint V watermark sitting behind dark sections */
.vx-v-mark {
  position: absolute;
  right: -2%;
  top: 50%;
  translate: 0 -50%;
  width: min(42vw, 520px);
  aspect-ratio: 1 / 1.1;
  pointer-events: none;
  opacity: .06;
  background: #fff;
  clip-path: polygon(0% 0%, 22% 0%, 50% 72%, 78% 0%, 100% 0%, 60% 100%, 40% 100%);
}

/* The tricolour rule that opens the footer and closes long pages */
.vx-rule {
  height: 4px;
  display: grid;
  grid-template-columns: 30% 35% 35%;
}
.vx-rule span:nth-child(1) { background: var(--navy-800); }
.vx-rule span:nth-child(2) { background: var(--red-600); }
.vx-rule span:nth-child(3) { background: var(--sand); }

/* --------------------------------------------------------------------------
   03 · Buttons & links
   Square-cornered, 54px tall (44px small). Red for the ONE primary action
   per view, navy or outline for the rest.
   -------------------------------------------------------------------------- */
.vx-btn {
  --btn-bg: var(--red-600);
  --btn-fg: #fff;
  --btn-bd: var(--red-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.vx-btn:hover { --btn-bg: var(--red-700); --btn-bd: var(--red-700); color: #fff; }
.vx-btn .vx-ico { width: 18px; height: 18px; flex: none; }

.vx-btn--navy   { --btn-bg: var(--navy-800); --btn-bd: var(--navy-800); }
.vx-btn--navy:hover { --btn-bg: var(--navy-900); --btn-bd: var(--navy-900); }

.vx-btn--outline { --btn-bg: transparent; --btn-fg: var(--navy-800); --btn-bd: rgba(25,23,47,.22); }
.vx-btn--outline:hover { --btn-bg: var(--navy-800); --btn-fg: #fff; --btn-bd: var(--navy-800); }

.vx-btn--ghost-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.vx-btn--ghost-dark:hover { --btn-bg: rgba(255,255,255,.1); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.6); }

.vx-btn--white { --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: #fff; }
.vx-btn--white:hover { --btn-bg: var(--cream); --btn-fg: var(--navy-900); --btn-bd: var(--cream); }

.vx-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.vx-btn--block { width: 100%; }

/* Text link with a travelling arrow */
.vx-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 15.5px;
  color: var(--navy-800);
  text-decoration: none;
}
.vx-link .vx-ico { width: 16px; height: 16px; transition: translate .18s var(--ease); color: var(--red-600); }
.vx-link:hover { color: var(--red-600); }
.vx-link:hover .vx-ico { translate: 4px 0; }
.vx-link--on-dark { color: #fff; }
.vx-link--on-dark .vx-ico { color: var(--red-300); }

/* Tags / pills */
.vx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--navy-100);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.vx-tag--red { background: var(--red-100); color: var(--red-700); }
.vx-tag--on-dark { background: rgba(255,255,255,.12); color: #fff; }

/* Filter chips with a count */
.vx-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid rgba(25,23,47,.18);
  background: var(--white);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 15px;
  text-decoration: none;
}
.vx-chip__n { color: var(--muted); font-weight: 400; font-family: var(--font-body); font-size: 13.5px; }
.vx-chip[aria-current="page"],
.vx-chip.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.vx-chip.is-active .vx-chip__n,
.vx-chip[aria-current="page"] .vx-chip__n { color: rgba(255,255,255,.7); }

/* Breadcrumbs */
.vx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.vx-crumbs a { color: var(--muted); text-decoration: none; }
.vx-crumbs a:hover { color: var(--red-600); text-decoration: underline; }
.vx-crumbs li { display: flex; align-items: center; gap: 8px; }
.vx-crumbs ol { display: contents; list-style: none; margin: 0; padding: 0; }
.vx-crumbs [aria-current="page"] { color: var(--navy-800); font-weight: 600; }
.vx-crumbs__sep { color: var(--sand); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.vx-utility {
  background: var(--navy-950);
  color: rgba(255,255,255,.76);
  font-size: 13.5px;
}
.vx-utility .vx-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px;
}
.vx-utility__group { display: flex; align-items: center; gap: 22px; }
.vx-utility__item { display: flex; align-items: center; gap: 8px; }
.vx-utility :where(a) { color: inherit; text-decoration: none; }
.vx-utility a:hover { color: #fff; text-decoration: underline; }
.vx-utility .vx-ico { width: 14px; height: 14px; color: var(--red-300); flex: none; }
@media (max-width: 1024px) { .vx-utility { display: none; } }

.vx-header {
  background: var(--white);
  position: sticky; top: 0; z-index: 90;
  border-bottom: 1px solid rgba(25,23,47,.08);
}
.vx-header .vx-wrap {
  display: flex; align-items: center; gap: 28px;
  min-height: 84px;
}
.vx-logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.vx-logo img { height: 40px; width: auto; }

.vx-nav { margin-left: auto; }
.vx-nav > ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.vx-nav > ul a, .vx-nav > ul button {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 86%;
  font-size: 16px;
  color: var(--navy-800);
  background: none; border: 0; cursor: pointer;
  text-decoration: none;
  font-family: var(--font-display);
}
.vx-nav > ul a:hover, .vx-nav > ul button:hover { color: var(--red-600); }
.vx-nav__caret { width: 12px; height: 12px; transition: rotate .18s var(--ease); }
.vx-nav li.is-open > button .vx-nav__caret { rotate: 180deg; }

.vx-nav__sub {
  position: absolute;
  /* Anchored explicitly. It used to rely on its static position, so any change
     to the parent's layout moved it -- making the item a flex row put it at
     top:-225px, over the parent link. */
  top: 100%; left: 0;
  min-width: 260px;
  background: var(--white);
  border: 1px solid rgba(25,23,47,.1);
  box-shadow: 0 18px 44px -18px rgba(11,9,38,.4);
  padding: 8px;
  list-style: none;
  margin: 0;
  display: none;
  z-index: 95;
}
.vx-nav li { position: relative; }
.vx-nav li.is-open > .vx-nav__sub { display: block; }
.vx-nav__sub a { padding: 10px 12px; font-size: 15.5px; }
.vx-nav__sub a:hover { background: var(--paper); }

.vx-header__call { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.vx-header__call-ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--red-100); color: var(--red-600);
  border-radius: 50%;
}
.vx-header__call-ico .vx-ico { width: 17px; height: 17px; }
.vx-header__call-label {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: block; line-height: 1.4;
}
.vx-header__call-num {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 17px; color: var(--navy-800); line-height: 1.1;
}

.vx-burger {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: none; border: 1.5px solid rgba(25,23,47,.18); cursor: pointer;
}
.vx-burger .vx-ico { width: 22px; height: 22px; color: var(--navy-800); }

/* GeneratePress ships `button:hover, button:focus { background:#3f4047; color:#fff }`
   at (0,1,1), which out-ranks a bare component class -- the drawer's close
   button and the submenu carets painted dark grey the moment they took focus.
   Matching that specificity is enough, since this sheet loads last. */
.vx-burger:hover,
.vx-burger:focus,
.vx-burger:focus-visible { background: var(--paper); color: var(--navy-800); }
.vx-burger:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }

.vx-nav__caretbtn:hover,
.vx-nav__caretbtn:focus,
.vx-nav__caretbtn:focus-visible { background: none; color: inherit; }
.vx-nav__caretbtn:focus-visible { outline: 2px solid var(--red-600); outline-offset: -2px; }

/* The close button and the mobile CTAs belong to the off-canvas menu only, so
   they are hidden by default and revealed in the mobile block below. This must
   stay ABOVE that block: @media adds no specificity, so source order decides. */
.vx-nav__close, .vx-nav__mobile-cta { display: none; }

@media (max-width: 1100px) {
  .vx-header .vx-wrap { min-height: 72px; }
  .vx-header__call, .vx-header .vx-btn { display: none; }
  .vx-burger { display: inline-flex; }
  .vx-nav {
    position: fixed; inset: 0 0 0 auto;
    visibility: hidden;
    width: min(380px, 88vw);
    background: var(--white);
    padding: 24px 20px 48px;
    overflow-y: auto;
    translate: 100% 0;
    transition: translate .24s var(--ease), visibility .24s step-end;
    box-shadow: -20px 0 60px -30px rgba(11,9,38,.6);
    margin-left: 0;
  }
  .vx-nav.is-open { translate: 0 0; visibility: visible; transition: translate .24s var(--ease), visibility 0s; }
  .vx-nav > ul { flex-direction: column; align-items: stretch; gap: 0; margin-top: 56px; }
  .vx-nav > ul a, .vx-nav > ul button { width: 100%; justify-content: space-between; padding: 14px 8px; font-size: 18px; border-bottom: 1px solid rgba(25,23,47,.08); }
  .vx-nav__sub { position: static; display: none; box-shadow: none; border: 0; padding: 0 0 8px 14px; min-width: 0; }
  .vx-nav__close { display: inline-flex; position: absolute; top: 18px; right: 18px; }
  .vx-nav__mobile-cta { margin-top: 20px; display: grid; gap: 10px; }
}

.vx-scrim {
  position: fixed; inset: 0; background: rgba(11,9,38,.5);
  opacity: 0; pointer-events: none; transition: opacity .24s var(--ease); z-index: 89;
}
.vx-scrim.is-open { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   04 · Form
   Beige fields, navy focus ring, red top rule on the card. The field NAMES
   are unchanged from the live form so the lead pipeline keeps working.
   -------------------------------------------------------------------------- */
.vx-formcard {
  background: var(--white);
  border-top: 5px solid var(--red-600);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 28px 60px -40px rgba(11,9,38,.5);
}
/* Plain text, not a heading: on /contact/ and the three DUI landing pages this
   was the first heading after the h1, so as an h3 it skipped a level, and the
   form already has its own labelled fields. Restates what the heading reset
   used to supply so the card looks the same. */
.vx-formcard__title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  color: var(--navy-800); text-wrap: balance;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; margin: 0 0 10px;
}
.vx-formcard__intro { color: var(--muted); margin-bottom: 26px; }

.vx-field { display: block; margin-bottom: 18px; }
.vx-field__label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 7px;
}
.vx-field__req { color: var(--red-600); }

.vx-input, .vx-select, .vx-textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: var(--bone);
  border: 1.5px solid var(--sand);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.vx-textarea { min-height: 128px; resize: vertical; }
.vx-input::placeholder, .vx-textarea::placeholder { color: #A9A4B5; }
.vx-input:focus, .vx-select:focus, .vx-textarea:focus {
  outline: none;
  border-color: var(--navy-800);
  box-shadow: 0 0 0 3px rgba(31,26,94,.16);
}
.vx-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1A5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 46px;
}

.vx-form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; }
@media (max-width: 560px) { .vx-form-row { grid-template-columns: minmax(0, 1fr); } }

.vx-form-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.vx-form-note .vx-ico { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--muted); }

/* The honeypot must stay reachable to bots and invisible to people */
.vx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

.vx-form-status { margin-top: 16px; font-size: 15px; }
.vx-form-status:empty { margin-top: 0; }

/* --------------------------------------------------------------------------
   05 · Cards
   -------------------------------------------------------------------------- */
.vx-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  padding: clamp(20px, 2vw, 28px);
  text-decoration: none;
  color: inherit;
  /* A white card on a white section was invisible, so the grid read as loose
     text. The hairline gives it an edge; border-top stays the hover accent. */
  border: 1px solid rgba(25,23,47,.12);
  border-top: 3px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), translate .2s var(--ease);
}
.vx-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vx-card__tile {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  background: var(--navy-100); color: var(--navy-800);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.vx-card__tile .vx-ico { width: 22px; height: 22px; }
.vx-card__arrow {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid rgba(25,23,47,.16);
  border-radius: 50%;
  color: var(--navy-800);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.vx-card__arrow .vx-ico { width: 15px; height: 15px; }
.vx-card__title { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.18; margin-bottom: 10px; }
.vx-card__body { color: var(--muted); font-size: 16px; margin: 0; }

/* Practice cards turn navy on hover with a red rule on top */
a.vx-card:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  border-top-color: var(--red-600);
  translate: 0 -3px;
}
a.vx-card:hover .vx-card__title { color: #fff; }
a.vx-card:hover .vx-card__body { color: rgba(255,255,255,.76); }
a.vx-card:hover .vx-card__tile { background: rgba(255,255,255,.12); color: #fff; }
a.vx-card:hover .vx-card__arrow { background: var(--red-600); border-color: var(--red-600); color: #fff; }
a.vx-card:hover .vx-eyebrow { color: var(--red-300); }

/* Review cards */
.vx-review {
  background: var(--white);
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 18px;
}
.vx-stars-row { display: flex; gap: 3px; color: var(--star); }
.vx-stars-row .vx-ico { width: 16px; height: 16px; }
.vx-review__quote { margin: 0; }
.vx-review__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(25,23,47,.1); }
.vx-review__avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--navy-100); color: var(--navy-800);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 13.5px;
}
.vx-review__name { font-weight: 600; font-size: 15.5px; color: var(--navy-800); line-height: 1.3; }
.vx-review__src { font-size: 13.5px; color: var(--muted); }

/* The 50+ reviews badge */
.vx-badge50 {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: #fff;
  padding: clamp(22px, 2.2vw, 30px);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 100%;
}
.vx-badge50__n { font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; }
.vx-badge50__label { color: rgba(255,255,255,.78); font-size: 15.5px; position: relative; z-index: 2; }
.vx-badge50 > * { position: relative; z-index: 2; }
.vx-badge50__stripes { position: absolute; right: -10px; bottom: -10px; width: 150px; height: 110px; opacity: .5; z-index: 1; }
.vl-avatars { display: flex; }
.vl-avatars span {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 11px;
  color: #fff; border: 2px solid var(--navy-900);
  margin-left: -8px;
}
.vl-avatars span:first-child { margin-left: 0; }

/* Blog / listing card */
.vx-post {
  display: flex; flex-direction: column;
  background: var(--white);
  text-decoration: none; color: inherit;
  transition: translate .2s var(--ease), box-shadow .2s var(--ease);
}
.vx-post:hover { translate: 0 -3px; box-shadow: 0 24px 50px -32px rgba(11,9,38,.5); }
.vx-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream); }
.vx-post__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .3s var(--ease); }
.vx-post:hover .vx-post__media img { scale: 1.04; }
.vx-post__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.vx-post__title { font-size: 21px; line-height: 1.22; }
.vx-post:hover .vx-post__title { color: var(--red-600); }
.vx-post__meta { font-size: 13.5px; color: var(--muted); margin-top: auto; }

/* Stat / trust strip */
.vx-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: rgba(255,255,255,.14);
}
.vx-trust__item { background: var(--navy-900); padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; }
.vx-trust__item .vx-ico { width: 20px; height: 20px; color: var(--red-300); flex: none; margin-top: 2px; }
/* Both are inline elements (<b> and <span>); without an explicit block they
   run together on one line and the description is clipped by the cell -- which
   is what produced "Former ProsecutorKnows their playbook". */
.vx-trust__t { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 86%; color: #fff; font-size: 16px; line-height: 1.25; }
.vx-trust__d { display: block; margin-top: 4px; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .vx-trust { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .vx-trust { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   06 · Long-form blocks
   The article renderer turns existing page copy into these.
   -------------------------------------------------------------------------- */
.vx-prose { max-width: var(--read-max); }
.vx-prose > * + * { margin-top: 1.1em; }
.vx-prose h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.14; margin-top: 1.8em; }
.vx-prose h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; margin-top: 1.5em; margin-bottom: 12px; }
.vx-prose h2:first-child, .vx-prose h3:first-child { margin-top: 0; }
.vx-prose ul, .vx-prose ol { padding-left: 1.3em; }
.vx-prose li + li { margin-top: .5em; }
/* Body images fill the prose column and sit flush with the text. The old rule
   centred them at max-width:720px, which is wider than the 696px column, so
   they overhung it and lost alignment with the copy. */
.vx-prose img { margin-inline: 0; max-width: 100%; width: 100%; }
.vx-prose :where(a:not(.vx-btn):not(.vx-link)) { color: var(--navy-700); }

/* Quick answer — sits under the H1 on every page that has one */
.vx-answer {
  background: var(--white);
  border-left: 5px solid var(--red-600);
  padding: 22px 26px;
  box-shadow: 0 18px 40px -32px rgba(11,9,38,.5);
}
.vx-answer .vx-eyebrow { margin-bottom: 10px; }
.vx-answer p { margin: 0; }

/* Accordion */
.vx-acc { border-top: 2px solid var(--navy-800); }
.vx-acc__item { border-bottom: 1px solid rgba(25,23,47,.14); }
.vx-acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; color: var(--navy-800);
}
.vx-acc__sign {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--navy-100); color: var(--navy-800);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.vx-acc__btn[aria-expanded="true"] .vx-acc__sign { background: var(--red-600); color: #fff; }
.vx-acc__sign .vx-ico { width: 16px; height: 16px; }
.vx-acc__panel { display: none; padding: 0 0 16px; margin-top: -4px; color: var(--muted); max-width: var(--read-max); }
.vx-acc__item.is-open .vx-acc__panel { display: block; }

/* Numbered steps */
.vx-steps { list-style: none; margin: 0; padding: 0; }
.vx-steps__item { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(25,23,47,.12); }
.vx-steps__n {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 14px;
}
.vx-steps__t { font-weight: 700; color: var(--navy-800); }

/* Star bullet list */
.vx-starlist { list-style: none; margin: 0; padding: 0; background: var(--white); }
.vx-starlist li { display: flex; gap: 14px; padding: 18px 22px; }
.vx-starlist li + li { border-top: 1px solid rgba(25,23,47,.1); }
.vx-starlist .vx-ico { width: 16px; height: 16px; flex: none; margin-top: 5px; color: var(--red-600); }
.vx-starlist b { color: var(--navy-800); }

/* Tables — navy header, bone alternating rows, scrollable on small screens */
.vx-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vx-table { width: 100%; border-collapse: collapse; font-size: 15.5px; background: var(--white); }
.vx-table thead th {
  background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  text-align: left; padding: 14px 18px;
}
.vx-table td, .vx-table tbody th { padding: 14px 18px; border-bottom: 1px solid rgba(25,23,47,.1); text-align: left; }
.vx-table tbody th { font-weight: 600; color: var(--navy-800); }
.vx-table tbody tr:nth-child(even) { background: var(--bone); }

/* Dark call-out */
.vx-callout {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: rgba(255,255,255,.8);
  padding: clamp(26px, 3vw, 40px);
}
.vx-callout__stripes { position: absolute; right: 0; top: 0; width: 130px; height: 100px; opacity: .55; }
.vx-callout > *:not(.vx-callout__stripes) { position: relative; z-index: 2; }
.vx-callout h2, .vx-callout h3 { color: #fff; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1; margin-bottom: 12px; }
.vx-callout p { margin-bottom: 22px; }

/* Disclaimer note */
.vx-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--cream); padding: 18px 22px;
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.vx-note .vx-ico { width: 17px; height: 17px; flex: none; margin-top: 3px; }

/* Alert */
.vx-alert {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--red-100); color: var(--red-700);
  padding: 16px 20px; font-size: 15px; line-height: 1.55;
}
.vx-alert .vx-ico { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.vx-alert b { color: var(--red-700); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.vx-hero {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: rgba(255,255,255,.82);
  padding-block: clamp(48px, 6vw, 92px);
}
.vx-hero__grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.vx-hero h1 { color: #fff; margin-bottom: 22px; }
.vx-hero__lede { color: rgba(255,255,255,.78); margin-bottom: 30px; max-width: 54ch; }
.vx-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
/* The board shows both hero buttons full width on a phone. */
@media (max-width: 560px) {
  .vx-hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .vx-hero__cta .vx-btn { width: 100%; }
}
.vx-hero__portrait { position: relative; }
.vx-hero__portrait img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.vx-hero__portrait-stripes { position: absolute; left: -18px; bottom: -18px; width: 120px; height: 120px; z-index: -1; opacity: .8; }
.vx-hero__namecard {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(11,9,38,.92); padding: 16px 20px;
}
.vx-hero__namecard b { color: #fff; font-family: var(--font-display); font-stretch: 86%; font-size: 17px; display: block; }
.vx-hero__namecard span { color: rgba(255,255,255,.7); font-size: 13.5px; }
@media (max-width: 980px) {
  .vx-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .vx-hero__portrait { max-width: 420px; }
}

/* Page hero for interior templates */
.vx-pagehead {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: rgba(255,255,255,.8);
  padding-block: clamp(40px, 4.6vw, 76px);
}
.vx-pagehead__inner { position: relative; z-index: 3; max-width: 900px; }
.vx-pagehead h1 { color: #fff; margin-bottom: 18px; }

/* Hero label/headline swap.
   On the homepage and /about/ the small label is the phrase the page ranks for,
   so it is the h1 and the large headline is a paragraph. The tag selectors above
   (`.vl :where(h1..h6)` and `.vx-pagehead h1`) supplied the display font, weight
   and white colour; these two rules restate them for the swapped tags so the
   rendering is byte-for-byte what it was. `.vx-hero-title` is (0,1,0) and sits
   after `.vl :where(p)`, so it wins the margin; the h1 rule is (0,2,1) so it
   beats `.vx-pagehead h1` on colour. */
.vx-hero-title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  color: #fff; margin: 0 0 18px; text-wrap: balance;
}
.vx-pagehead h1.vx-abouthero__eyebrow { color: var(--red-300); margin: 20px 0 10px; }
.vx-hero .vx-hero-title { margin-bottom: 22px; }
/* `.vx-hero h1` (0,1,1) would otherwise override the pill's own 26px */
.vx-hero h1.vx-pill { margin: 0 0 26px; }
.vx-pagehead .vx-crumbs, .vx-hero .vx-crumbs { margin-bottom: 22px; }
.vx-pagehead .vx-crumbs :where(a), .vx-pagehead .vx-crumbs,
.vx-hero .vx-crumbs :where(a), .vx-hero .vx-crumbs { color: rgba(255,255,255,.66); }
.vx-pagehead .vx-crumbs [aria-current="page"],
.vx-hero .vx-crumbs [aria-current="page"] { color: #fff; }
.vx-pagehead .vx-crumbs__sep, .vx-hero .vx-crumbs__sep { color: rgba(255,255,255,.35); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.vx-footer { position: relative; overflow: hidden; background: var(--navy-950); color: rgba(255,255,255,.7); }
.vx-footer__cta {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 28px; align-items: center;
  padding-block: clamp(44px, 5vw, 76px);
}
.vx-footer__cta h2 { color: #fff; font-size: clamp(34px, 4vw, 58px); line-height: 1.02; }
/* Same line, now a paragraph. Restates what `.vl :where(h1..h6)` and the rule
   above gave the old h2, so the footer is unchanged visually. */
.vx-footer__cta-title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  color: #fff; font-size: clamp(34px, 4vw, 58px); line-height: 1.02;
  margin: 0; text-wrap: balance;
}
.vx-footer__cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .vx-footer__cta { grid-template-columns: minmax(0, 1fr); } }

.vx-footer__main {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  padding-block: clamp(36px, 4vw, 56px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.vx-footer__logo img { height: 36px; width: auto; margin-bottom: 18px; }
.vx-footer__about { font-size: 15px; line-height: 1.62; margin-bottom: 22px; }
.vx-footer__contact { display: grid; gap: 12px; font-size: 15px; }
.vx-footer__contact a, .vx-footer__contact div { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.82); text-decoration: none; }
.vx-footer__contact .vx-ico { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--red-300); }
.vx-footer__contact a:hover { color: #fff; text-decoration: underline; }

.vx-footer__coltitle {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-300); margin-bottom: 16px;
}
.vx-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.vx-footer__list :where(a) { color: rgba(255,255,255,.76); text-decoration: none; font-size: 15px; }
.vx-footer__list a:hover { color: #fff; text-decoration: underline; }

.vx-footer__bottom {
  position: relative; z-index: 3;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 24px 32px;
  font-size: 13.5px;
  display: grid; gap: 14px;
}
.vx-footer__disclaimer { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.6); }
.vx-footer__disclaimer .vx-ico { width: 13px; height: 13px; flex: none; margin-top: 4px; color: var(--red-600); }
.vx-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; color: rgba(255,255,255,.6); }
.vx-footer__legal a { color: rgba(255,255,255,.72); }

@media (max-width: 1024px) {
  .vx-footer__main { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .vx-footer__main { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.vx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vx-center { text-align: center; }
.vx-mt-0 { margin-top: 0; }
.vx-stack { display: grid; gap: 14px; }
.vx-flex { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vx-ico { width: 1em; height: 1em; stroke-width: 2; }

/* --------------------------------------------------------------------------
   DUI landing trust row — sits under the hero CTAs on the four DUI pages.
   -------------------------------------------------------------------------- */
.vx-dui-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.vx-dui-trust__item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.vx-dui-trust__item .vx-ico { width: 18px; height: 18px; flex: none; color: var(--red-300); margin-top: 2px; }
.vx-dui-trust__item b { color: #fff; font-family: var(--font-display); font-stretch: 86%; font-size: 14.5px; }
.vx-dui-trust__item span span { color: rgba(255,255,255,.66); }
@media (max-width: 680px) { .vx-dui-trust { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* On the DUI landing the form shares the hero, so the hero column ratio flips. */
.vx-t-dui-landing .vx-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; }
@media (max-width: 980px) { .vx-t-dui-landing .vx-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.vx-404 { position: relative; overflow: hidden; background: var(--paper); padding-block: clamp(56px, 8vw, 120px); }
.vx-404__v { opacity: .5; background: var(--navy-100); right: auto; left: 50%; translate: -50% -50%; width: min(60vw, 560px); }
.vx-404__code {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: clamp(110px, 20vw, 210px); line-height: .9; letter-spacing: -0.02em;
  color: var(--navy-800); margin: 0 0 18px;
}

/* ==========================================================================
   Homepage components — built to the board's Home · Desktop 1440 artboard
   ========================================================================== */

/* Boxed eyebrow pill used in the hero */
.vx-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; margin: 0 0 26px;
  border: 1px solid rgba(255,255,255,.28);
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.vx-pill .vx-ico { width: 12px; height: 12px; color: var(--red-600); }

/* A red rule UNDER a phrase, rather than recolouring it */
.vx-rule-under { box-shadow: inset 0 -0.1em 0 0 var(--red-600); }

/* Reviewer avatar cluster */
.vx-avatars { display: inline-flex; }
.vx-avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-left: -9px;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 11px; color: #fff; border: 2px solid var(--navy-900);
}
.vx-avatars span:first-child { margin-left: 0; }

.vx-hero__social {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.vx-hero__social-stack { display: grid; gap: 2px; }
.vx-hero__social-text { font-size: 14.5px; color: rgba(255,255,255,.72); }
.vx-hero__social-text b { color: #fff; }

/* White name card overlapping the portrait */
.vx-namecard {
  position: absolute; left: -28px; bottom: 44px; right: 18px;
  display: flex; align-items: center; gap: 14px;
  background: #fff; padding: 14px 18px;
  border-left: 4px solid var(--red-600);
  box-shadow: 0 22px 50px -26px rgba(11,9,38,.65);
}
.vx-namecard img { width: 40px; height: auto; flex: none; }
.vx-namecard__text { display: grid; gap: 2px; }
.vx-namecard__text b { font-family: var(--font-display); font-stretch: 86%; font-size: 17px; color: var(--navy-800); }
.vx-namecard__text span { font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 560px) { .vx-namecard { position: static; left: auto; right: auto; margin-top: -1px; } }

/* Hero stripes sit to the RIGHT of the portrait on the board */
.vx-hero__portrait-stripes {
  left: auto; right: -22px; top: 36px; bottom: 36px;
  width: 54px; height: auto; opacity: .9;
}

/* Credential strip under the hero.
   Measured off the board: a full-bleed band 105px tall, a shade darker than
   the hero, with a hairline above it and compact two-line items. It was built
   inside the content container, which left it floating with a gap above. */
.vx-creds {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  position: relative; z-index: 3;
  margin-top: clamp(30px, 4vw, 54px);
  background: var(--navy-950);
  border-top: 1px solid rgba(255,255,255,.16);
  /* break out of the hero's container to run edge to edge */
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-inline: max(24px, calc(50vw - 620px));
}
.vx-creds__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 22px 24px 22px 0; min-height: 104px;
}
.vx-creds__item + .vx-creds__item { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); }
.vx-creds__item .vx-ico { width: 19px; height: 19px; color: var(--red-300); flex: none; margin-top: 3px; }
.vx-creds__text { display: grid; gap: 2px; }
.vx-creds__text b { font-family: var(--font-display); font-stretch: 86%; font-size: 15px; line-height: 1.25; color: #fff; }
.vx-creds__text span { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.66); }
@media (max-width: 900px) {
  .vx-creds { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vx-creds__item { min-height: 0; padding: 16px 16px 16px 0; }
  .vx-creds__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .vx-creds__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 520px) {
  .vx-creds { grid-template-columns: minmax(0, 1fr); }
  .vx-creds__item { padding-left: 0; border-left: 0; }
  .vx-creds__item + .vx-creds__item { border-top: 1px solid rgba(255,255,255,.14); }
}

/* The Google link sits at the foot of the 50+ badge. */
.vx-badge50 { justify-content: flex-start; }
.vx-badge50__cta { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------- practice cards */
.vx-pcard { display: flex; flex-direction: column; background: var(--white); }
.vx-pcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.vx-pcard__media img { width: 100%; height: 100%; object-fit: cover; }
/* The badge and its number sit directly on the photo, so on a light image (the
   Family & Divorce card) the white "01" vanished. This scrim guarantees
   contrast whatever the photograph is, without altering the layout.

   A single 48% fade from .70 was not enough and was measured, not assumed: the
   number spans 26-49px above the media's bottom edge, where that fade had only
   reached alpha .41. Over the near-white laptop lid behind card 01 that left
   white text at 3.44:1 against a 4.5:1 requirement. The photo there measures
   about rgb(234,234,236), which needs alpha .52 to pass, so the gradient now
   holds a near-solid floor through the badge row and only then fades. At the
   glyph's weakest point that is alpha .65, i.e. 7.0:1 over the worst photo on
   the site. */
.vx-pcard__media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%; z-index: 1;
  background: linear-gradient(to top,
    rgba(11,9,38,.90) 0,
    rgba(11,9,38,.60) 40%,
    rgba(11,9,38,0) 100%);
  pointer-events: none;
}
.vx-pcard__badge, .vx-pcard__n { z-index: 2; }
.vx-pcard__badge {
  position: absolute; left: 24px; bottom: 18px;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--red-600); color: #fff;
}
.vx-pcard__badge .vx-ico { width: 20px; height: 20px; }
.vx-pcard__n {
  position: absolute; left: 78px; bottom: 26px;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 13px; letter-spacing: .18em; color: #fff;
}
.vx-pcard__body { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; flex: 1; }
.vx-pcard__title { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; margin-bottom: 12px; }
.vx-pcard__copy { color: var(--muted); font-size: 15.5px; margin: 0 0 20px; }

/* Link list with red arrows and hairline rules */
.vx-linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(25,23,47,.12); }
.vx-linklist li + li { border-top: 1px solid rgba(25,23,47,.12); }
.vx-linklist a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 16px; color: var(--navy-800);
}
.vx-linklist a .vx-ico { width: 17px; height: 17px; color: var(--red-600); flex: none; transition: translate .18s var(--ease); }
.vx-linklist a:hover { color: var(--red-600); }
.vx-linklist a:hover .vx-ico { translate: 4px 0; }

/* ------------------------------------------------------- calculators strip */
.vx-calcstrip {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr));
  background: var(--navy-900); color: rgba(255,255,255,.72);
  margin-top: clamp(22px, 2.4vw, 32px);
}
.vx-calcstrip__lead,
.vx-calcstrip__item { position: relative; z-index: 2; padding: 24px 26px; }
.vx-calcstrip__item { border-left: 1px solid rgba(255,255,255,.14); }
.vx-calcstrip__lead b {
  display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 19px; color: #fff; margin-bottom: 8px;
}
.vx-calcstrip__lead span { font-size: 14px; line-height: 1.5; }
.vx-calcstrip__item {
  /* This is a DARK panel sitting inside a LIGHT section, so its <a> would
     otherwise inherit the generic navy link colour and the descriptions would
     render dark-on-dark. Set the panel's own text colour explicitly. */
  color: rgba(255,255,255,.72);
  text-decoration: none; display: block; transition: background .18s var(--ease);
}
.vx-calcstrip__item:hover { background: rgba(255,255,255,.06); }
.vx-calcstrip__item b {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 15px; color: #fff;
}
.vx-calcstrip__item b .vx-ico { width: 16px; height: 16px; color: var(--red-300); flex: none; }
.vx-calcstrip__item span { font-size: 13.5px; line-height: 1.5; }
@media (max-width: 900px) {
  .vx-calcstrip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vx-calcstrip__item:nth-child(odd) { border-left: 0; }
}
@media (max-width: 560px) {
  .vx-calcstrip { grid-template-columns: minmax(0, 1fr); }
  .vx-calcstrip__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
}

/* ------------------------------------------------------------- attorney */
.vx-attorney__media { position: relative; }
.vx-attorney__main { width: 100%; max-width: 520px; aspect-ratio: 4/5; object-fit: cover; }
.vx-attorney__inset {
  position: absolute; right: 0; bottom: -18px;
  width: 42%; max-width: 230px; aspect-ratio: 1/1; object-fit: cover;
  border: 6px solid var(--cream);
}
.vx-attorney__stripes { left: -18px; top: -18px; width: 96px; height: 180px; opacity: .85; }

.vx-pullquote {
  margin: 22px 0 28px; padding-left: 20px;
  border-left: 3px solid var(--red-600);
  font-family: var(--font-quote); font-style: italic;
  font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; color: var(--navy-800);
}

.vx-timeline { list-style: none; margin: 0 0 28px; padding: 0 0 0 26px; border-left: 1px solid rgba(25,23,47,.18); }
.vx-timeline li { position: relative; padding: 0 0 20px; display: grid; gap: 2px; }
.vx-timeline li::before {
  content: ""; position: absolute; left: -31px; top: 5px;
  width: 10px; height: 10px; background: var(--red-600); rotate: 45deg;
}
.vx-timeline__when {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-600);
}
.vx-timeline__t { font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 17px; color: var(--navy-800); }
.vx-timeline__d { font-size: 14.5px; color: var(--muted); }

/* --------------------------------------------------------------- why ---- */
.vx-why { border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; }
.vx-why__n { margin-bottom: 12px; letter-spacing: .22em; }
.vx-why__t { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; color: #fff; margin-bottom: 10px; }
.vx-why__d { color: rgba(255,255,255,.72); font-size: 15px; margin: 0; }

/* --------------------------------------------- how it works (homepage) ----
   NOTE: named vx-plan, not vx-steps. `.vx-steps` already belongs to the
   long-form article renderer (a flex row with a number badge) and the two
   collided -- the article rule won on source order and laid the number, title
   and copy out side by side instead of stacked. */
.vx-plan {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  background: var(--white);
  box-shadow: 0 26px 60px -44px rgba(11,9,38,.45);
  /* it is an <ol>, so the UA renders "1. 2. 3." beside the 01/02/03 badges */
  list-style: none; margin: 0; padding-left: 0;
}
.vx-plan__item { position: relative; padding: clamp(26px, 3vw, 40px); }
.vx-plan__item + .vx-plan__item { border-left: 1px solid rgba(25,23,47,.12); }
/* the small chevron that links one step to the next */
.vx-plan__item + .vx-plan__item::before {
  content: ''; position: absolute; left: -7px; top: clamp(44px, 4.4vw, 62px);
  width: 13px; height: 13px; background: var(--white);
  border-top: 1px solid rgba(25,23,47,.18); border-right: 1px solid rgba(25,23,47,.18);
  rotate: 45deg;
}
.vx-plan__n {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: clamp(42px, 4vw, 58px); line-height: 1; color: var(--red-600);
  margin: 0 0 18px; letter-spacing: -0.02em;
}
.vx-plan__n span { color: var(--navy-100); }
.vx-plan__t { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.2; margin-bottom: 10px; }
.vx-plan__d { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 860px) {
  .vx-plan { grid-template-columns: minmax(0, 1fr); }
  .vx-plan__item + .vx-plan__item { border-left: 0; border-top: 1px solid rgba(25,23,47,.12); }
  .vx-plan__item + .vx-plan__item::before { display: none; }
}

.vx-badge50__avatars { margin-top: 2px; }
.vx-badge50__stripes { right: -8px; bottom: -8px; width: 150px; height: 120px; }

/* ---------------------------------------------------------- counties ---- */
.vx-counties { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid rgba(25,23,47,.14); }
.vx-counties li + li { border-top: 1px solid rgba(25,23,47,.14); }
.vx-counties a {
  display: flex; align-items: center; gap: 16px; padding: 16px 0; text-decoration: none;
}
.vx-counties__badge {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 13px; letter-spacing: .08em;
}
.vx-counties__text { display: grid; gap: 2px; flex: 1; }
.vx-counties__text b { font-family: var(--font-display); font-stretch: 86%; font-size: 19px; color: var(--navy-800); }
.vx-counties__text span { font-size: 14px; color: var(--muted); }
.vx-counties a .vx-ico { width: 18px; height: 18px; color: var(--red-600); flex: none; transition: translate .18s var(--ease); }
.vx-counties a:hover .vx-counties__text b { color: var(--red-600); }
.vx-counties a:hover .vx-ico { translate: 4px 0; }

/* ----------------------------------------------------------- map card --- */
.vx-mapcard { background: var(--white); box-shadow: 0 24px 60px -40px rgba(11,9,38,.5); }
.vx-mapcard iframe { width: 100%; height: clamp(280px, 34vw, 420px); border: 0; display: block; border-bottom: 3px solid var(--red-600); }
.vx-mapcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 14.5px; color: var(--muted); }
.vx-mapcard__foot b { color: var(--navy-800); font-family: var(--font-display); font-stretch: 86%; font-size: 16px; }

/* ------------------------------------------------------ homepage blog --- */
.vx-bloglead { display: block; text-decoration: none; color: inherit; }
.vx-bloglead__media { aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.vx-bloglead__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .3s var(--ease); }
.vx-bloglead:hover .vx-bloglead__media img { scale: 1.04; }
.vx-bloglead__title { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.18; margin-top: 18px; }
.vx-bloglead:hover .vx-bloglead__title { color: var(--red-600); }

.vx-bloglist { display: grid; gap: 14px; }
.vx-bloglist a {
  display: flex; align-items: center; gap: 16px; padding: 14px;
  background: var(--white); text-decoration: none; color: inherit;
  transition: translate .18s var(--ease);
}
.vx-bloglist a:hover { translate: 0 -2px; }
.vx-bloglist img { width: 118px; height: 78px; object-fit: cover; flex: none; }
.vx-bloglist__text { display: grid; gap: 8px; flex: 1; }
.vx-bloglist__title { font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 17px; line-height: 1.25; color: var(--navy-800); }
.vx-bloglist a:hover .vx-bloglist__title { color: var(--red-600); }
.vx-bloglist__go {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1.5px solid rgba(25,23,47,.16); border-radius: 50%; color: var(--navy-800);
}
.vx-bloglist a:hover .vx-bloglist__go { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.vx-bloglist__go .vx-ico { width: 15px; height: 15px; }
@media (max-width: 560px) { .vx-bloglist img { display: none; } }

/* ------------------------------------------------------------ divorce --- */
.vx-divorce__media { position: relative; margin-top: clamp(26px, 3vw, 38px); max-width: 520px; }
.vx-divorce__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.vx-divorce__stripes { left: -18px; bottom: -18px; width: 86px; height: 170px; opacity: .9; z-index: -1; }
.vx-divorce__intro { max-width: none; margin-bottom: 26px; font-size: 17.5px; }

.vx-dcard {
  background: var(--white);
  border: 1px solid rgba(25,23,47,.12);
  border-top: 3px solid var(--navy-800);
  padding: clamp(20px, 2.2vw, 28px);
}
.vx-dcard + .vx-dcard { margin-top: 18px; }
.vx-dcard--red { border-top-color: var(--red-600); }
.vx-dcard__t { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; margin-bottom: 12px; }
.vx-dcard__body { max-width: none; font-size: 15.5px; color: var(--muted); }
.vx-dcard__body :where(a:not(.vx-btn):not(.vx-link)) { color: var(--navy-700); text-decoration: underline; }

/* ==========================================================================
   Mobile corrections
   ========================================================================== */

/* The stripe accents are decorative overlays. Without position:absolute they
   fall back to static and render as a large solid block ABOVE the photo they
   are meant to sit behind. */
.vx-divorce__stripes,
.vx-attorney__stripes { position: absolute; }

/* Photos in the divorce and attorney blocks are framed on the board. */
.vx-divorce__media img,
.vx-attorney__main,
.vx-attorney__inset {
  border: 6px solid var(--white);
  box-shadow: 0 20px 44px -30px rgba(11,9,38,.55);
}
.vx-attorney__inset { border-color: var(--white); }
.vx-divorce__stripes { z-index: 0; }
.vx-divorce__media img { position: relative; z-index: 1; }

/* Credential strip: the mobile reset was (0,1,0) and lost to the adjacent
   sibling rule at (0,2,0), which is why rows 2-4 stayed indented behind a
   vertical rule. On a phone these become plain full-width rows. */
@media (max-width: 900px) {
  .vx-creds__item + .vx-creds__item { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .vx-creds { grid-template-columns: minmax(0, 1fr); border-top: 0; margin-top: 30px; }
  .vx-creds__item {
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,.14);
    align-items: center;
  }
  .vx-creds__item + .vx-creds__item { border-top: 1px solid rgba(255,255,255,.14); }
}

/* The name card is a V mark plus two lines; keep it legible on a phone. */
@media (max-width: 680px) {
  .vx-namecard { left: 0; right: 0; bottom: 0; padding: 12px 14px; }
  .vx-namecard__text span { font-size: 12.5px; }
}

/* Stacked attorney block: the inset should not crowd the portrait. */
@media (max-width: 980px) {
  .vx-attorney__media { max-width: 520px; }
  .vx-attorney__inset { width: 38%; max-width: 190px; bottom: -10px; right: -6px; }
  .vx-attorney__stripes { width: 72px; height: 130px; left: -10px; top: -10px; }
  .vx-divorce__stripes { width: 64px; height: 120px; left: -10px; bottom: -10px; }
}

/* The stripe motif is a BACKGROUND accent: it peeks out from behind the photo
   at one corner. Without an explicit stacking order it painted on top of the
   photo and its white frame instead. The divorce block already had this; the
   attorney block did not. */
.vx-attorney__stripes { z-index: 0; }
.vx-attorney__main { position: relative; z-index: 1; }
.vx-attorney__inset { z-index: 2; }

/* ==========================================================================
   V watermark + mobile blog cards
   ========================================================================== */

/* The V is a visible part of the hero on the board, not a whisper. It was
   sized at min(42vw,520px) with 6% opacity, which on a 390px phone came out
   ~164px and effectively invisible. It should read as a large shape behind
   the headline, proportionally bigger on a phone than on a desktop. */
.vx-v-mark {
  width: min(62vw, 620px);
  opacity: .10;
}
@media (max-width: 980px) {
  /* On the board the V sits roughly centre-right with its apex behind the
     lede, not pushed off the edge. */
  /* On the board the V's arms begin at the very top edge of the hero and the
     point lands just past the headline. Anchor it to the top rather than
     centring it on a percentage, and drive the size by height so it always
     spans the headline regardless of how the copy wraps. */
  /* Keep the V's natural proportions -- driving it by height stretched it.
     Width-sized, anchored to the top edge, sitting right of centre, so it
     runs from the top of the hero to roughly midway like the board shows. */
  .vx-v-mark {
    width: min(80vw, 380px);
    height: auto;
    aspect-ratio: 1 / 1.1;
    opacity: .15;
    right: 2%;
    top: 0;
    translate: 0 0;
  }
}

/* Blog list cards: the board keeps the square thumbnail on a phone and drops
   the arrow. Hiding the thumbnail is what made the cards look inconsistent
   against the featured card above them. */
.vx-bloglist a { border: 1px solid rgba(25,23,47,.1); align-items: center; }
.vx-bloglead { background: var(--white); border: 1px solid rgba(25,23,47,.1); }
.vx-bloglead__body { padding: 20px; }
.vx-bloglead__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vx-bloglead__read { font-size: 13.5px; color: var(--muted); }
.vx-bloglead__excerpt { color: var(--muted); font-size: 15.5px; margin: 12px 0 0; }
.vx-bloglead__title { margin-top: 0; }

@media (max-width: 560px) {
  .vx-bloglist img { display: block; width: 86px; height: 86px; }
  .vx-bloglist__go { display: none; }
  .vx-bloglist a { gap: 14px; padding: 12px; }
  .vx-bloglist__title { font-size: 16px; }
}

/* ==========================================================================
   Shared contact block — the board renders it as ONE navy card
   ========================================================================== */
.vx-contact {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--navy-900);
  gap: 0;
  /* Rounded on the boards; the corner rounds over about 10px. */
  border-radius: 12px;
}
.vx-contact__stripes { position: absolute; left: 0; bottom: 0; width: 180px; height: 170px; opacity: .5; z-index: 1; }
.vx-contact__info { position: relative; z-index: 3; padding: clamp(28px, 3.4vw, 54px); color: rgba(255,255,255,.76); }
.vx-contact__info h2 { color: #fff; }
.vx-contact__lede { margin: 20px 0 28px; font-size: 16.5px; line-height: 1.6; max-width: 46ch; }
.vx-contact__rows { list-style: none; margin: 0 0 24px; padding: 0; }
.vx-contact__rows li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.vx-contact__rows li:first-child { border-top: 1px solid rgba(255,255,255,.16); }
.vx-contact__tile {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: var(--red-300);
}
.vx-contact__tile .vx-ico { width: 17px; height: 17px; }
.vx-contact__text { display: grid; gap: 2px; }
.vx-contact__label {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.vx-contact__text a, .vx-contact__text span:not(.vx-contact__label) {
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 17px;
}
.vx-contact__text a:hover { color: var(--red-300); text-decoration: underline; }
.vx-contact__note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 0; }
.vx-contact__note .vx-ico { width: 15px; height: 15px; flex: none; margin-top: 3px; }
.vx-contact__form { position: relative; z-index: 3; padding: clamp(14px, 1.6vw, 22px); }
.vx-contact__form .vx-formcard { box-shadow: none; height: 100%; }
@media (max-width: 900px) {
  .vx-contact { grid-template-columns: minmax(0, 1fr); }
  .vx-contact__form { padding-top: 0; }
}

/* ==========================================================================
   Article template
   ========================================================================== */
.vx-arthead { padding-bottom: clamp(24px, 3vw, 40px); }
.vx-arthead__title { margin: 0 0 26px; max-width: 26ch; }
.vx-arthead__answer { max-width: 640px; margin-bottom: 30px; }
.vx-arthead__media { margin-top: clamp(20px, 2.4vw, 32px); }
.vx-arthead__media img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }

.vx-byline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px;
  padding-top: 20px; border-top: 1px solid rgba(25,23,47,.14);
}
.vx-byline__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.vx-byline__who { display: grid; gap: 2px; margin-right: auto; }
.vx-byline__who a {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 16px; color: var(--navy-800); text-decoration: none;
}
.vx-byline__who a:hover { color: var(--red-600); }
.vx-byline__who span { font-size: 14px; color: var(--muted); }
.vx-byline__meta { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.vx-byline__meta .vx-ico { width: 15px; height: 15px; color: var(--red-600); }
@media (max-width: 680px) { .vx-byline__who { margin-right: 0; } }

/* three-column body */
/* Measured off the board at 1440: the columns are 215 / 696 / 299 with 54px
   gaps, spanning x61..x1379. That is a WIDER container than the site default
   (1200px content), which is why the prose column was coming out 584px instead
   of 696px and the copy read too narrow. */
.vx-artgrid {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr) 299px;
  gap: 54px;
  align-items: start;
  max-width: calc(1318px + var(--gutter) * 2);
}
@media (max-width: 1180px) { .vx-artgrid { grid-template-columns: minmax(0,1fr) minmax(0,290px); } .vx-toc { display: none; } }
/* `1fr` is minmax(auto, 1fr), and `auto` floors the track at its content's
   min-content width -- the comparison table on the DUI-arrest article forced
   the column to 412px inside a 396px viewport. Because the page sets
   overflow-x: clip, that overflow was SILENTLY CUT rather than scrollable, so
   a strip of every paragraph was unreachable on a phone. minmax(0,1fr) lets
   the track shrink; the table then scrolls in its own box below. */
@media (max-width: 900px) { .vx-artgrid { grid-template-columns: minmax(0, 1fr); } }
/* Wide content inside prose scrolls rather than pushing the column open. */
.vx-prose table { display: block; max-width: 100%; overflow-x: auto; }
.vx-prose pre { max-width: 100%; overflow-x: auto; }

.vx-toc { position: sticky; top: 104px; }
.vx-toc__title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.vx-toc ul { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid rgba(25,23,47,.16); display: grid; gap: 12px; }
.vx-toc a { font-size: 14.5px; line-height: 1.4; color: var(--muted); text-decoration: none; display: block; }
.vx-toc a:hover { color: var(--red-600); }

.vx-artbody { max-width: none; }
/* A short red rule above every H2, as the board shows */
/* Rhythm measured off the board at 1440: 16px between lines, 34px between
   paragraphs, 56px from the red rule down to the heading text. */
.vx-artbody h2 { position: relative; padding-top: 65px; margin-top: 40px; margin-bottom: 20px; }
/* Adjacent margins collapse, so the sibling rule's 1.1em top margin is what
   actually sets paragraph spacing here -- setting only margin-bottom had no
   effect. 10px lands the ink-to-ink gap on the board's 34px. */
.vx-artbody > p { margin-block: 0 18px; }
.vx-artbody > p + p { margin-top: 18px; }
.vx-artbody h2::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 54px; height: 3px; background: var(--red-600);
}
/* The boards render the opening body paragraph at body size, not as a lede. */
.vx-artbody > p:first-of-type { font-size: inherit; line-height: inherit; }

.vx-artside { display: grid; gap: 18px; position: sticky; top: 104px; }
@media (max-width: 900px) { .vx-artside, .vx-toc { position: static; } }

.vx-sidecard {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: rgba(255,255,255,.74);
  padding: clamp(20px, 2vw, 26px);
  /* The boards round this card; it was square. */
  border-radius: 12px;
}
.vx-sidecard > *:not(.vx-stars):not(.vx-sidecard__stripes) { position: relative; z-index: 3; }
.vx-sidecard__stripes { position: absolute; right: -6px; top: -6px; width: 110px; height: 90px; opacity: .55; z-index: 1; }
.vx-sidecard__t { color: #fff; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; margin-bottom: 10px; }
.vx-sidecard__d { font-size: 15px; margin-bottom: 20px; }
.vx-sidecard__facts { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; gap: 12px; }
.vx-sidecard__facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.vx-sidecard__facts .vx-ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--red-300); }

.vx-authorcard { display: flex; align-items: center; gap: 14px; background: var(--white); padding: 16px 18px; }
.vx-authorcard img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.vx-authorcard span { display: grid; gap: 2px; }
.vx-authorcard b { font-family: var(--font-display); font-stretch: 86%; font-size: 16px; color: var(--navy-800); }
.vx-authorcard span span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

.vx-relcard { background: var(--white); padding: 18px; }
.vx-relcard__t {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.vx-relcard ul { list-style: none; margin: 0; padding: 0; }
.vx-relcard li + li { border-top: 1px solid rgba(25,23,47,.1); }
.vx-relcard a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 15.5px; color: var(--navy-800);
}
.vx-relcard a .vx-ico { width: 16px; height: 16px; color: var(--red-600); flex: none; transition: translate .18s var(--ease); }
.vx-relcard a:hover { color: var(--red-600); }
.vx-relcard a:hover .vx-ico { translate: 4px 0; }

/* ==========================================================================
   Practice area hero
   ========================================================================== */
.vx-prachero { position: relative; overflow: hidden; background: var(--paper); padding-block: clamp(32px, 4vw, 64px) clamp(40px, 4.2vw, 60px); }
.vx-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(25,23,47,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25,23,47,.05) 1px, transparent 1px);
  background-size: 88px 88px;
}
.vx-prachero__grid {
  position: relative; z-index: 3;
  /* Board: copy column x100..~700, photo column x811..1344 (533 wide). */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 533px);
  gap: clamp(28px, 5vw, 78px); align-items: center;
}
.vx-prachero h1 { margin-top: 6px; }
.vx-prachero__trust { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 26px; font-size: 14.5px; color: var(--muted); }
.vx-prachero__trust span { display: inline-flex; align-items: center; gap: 9px; }
.vx-prachero__trust .vx-ico { width: 16px; height: 16px; color: var(--red-600); flex: none; }

.vx-prachero__media { position: relative; }
.vx-prachero__media img {
  /* Board photo measures 533x611 -- portrait, not landscape. */
  width: 100%; aspect-ratio: 533 / 611; object-fit: cover;
  position: relative; z-index: 1;
}
.vx-prachero__stripes { position: absolute; right: -16px; top: -16px; width: 96px; height: 170px; opacity: .9; z-index: 0; }
.vx-prachero__card { left: -23px; right: auto; max-width: 315px; bottom: 45px; z-index: 3; }
.vx-prachero__card img { border-radius: 50%; object-fit: cover; width: 40px; height: 40px; }

@media (max-width: 980px) {
  .vx-prachero__grid { grid-template-columns: minmax(0, 1fr); }
  .vx-prachero__media { max-width: 520px; }
}
@media (max-width: 680px) {
  .vx-prachero__card { left: 0; right: 0; bottom: 0; position: static; margin-top: -1px; }
  .vx-prachero__stripes { width: 64px; height: 120px; right: -8px; top: -8px; }
}

/* ==========================================================================
   Blog listing
   ========================================================================== */
.vx-listhead { position: relative; overflow: hidden; background: var(--paper); }
.vx-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Featured post: image left, body right, with a red seam between them */
.vx-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--white); text-decoration: none; color: inherit;
  border-left: 4px solid transparent;
  transition: translate .2s var(--ease), box-shadow .2s var(--ease);
}
.vx-feature:hover { translate: 0 -3px; box-shadow: 0 28px 60px -40px rgba(11,9,38,.5); }
.vx-feature__media { overflow: hidden; border-right: 4px solid var(--red-600); }
.vx-feature__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: scale .3s var(--ease); }
.vx-feature:hover .vx-feature__media img { scale: 1.03; }
.vx-feature__body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.vx-feature__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--muted); }
.vx-feature__title { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; }
.vx-feature:hover .vx-feature__title { color: var(--red-600); }
.vx-feature__excerpt { color: var(--muted); font-size: 16px; margin: 0; }
@media (max-width: 860px) {
  .vx-feature { grid-template-columns: minmax(0, 1fr); }
  .vx-feature__media { border-right: 0; border-bottom: 4px solid var(--red-600); }
}

/* Post cards reuse the practice card shell, with their own body */
.vx-postcard { text-decoration: none; color: inherit; transition: translate .2s var(--ease), box-shadow .2s var(--ease); }
.vx-postcard:hover { translate: 0 -3px; box-shadow: 0 24px 50px -34px rgba(11,9,38,.5); }
.vx-postcard .vx-pcard__media { aspect-ratio: 16/9; }
.vx-postcard__body { padding: clamp(18px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.vx-postcard__title { font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 20px; line-height: 1.2; color: var(--navy-800); margin: 0; }
.vx-postcard:hover .vx-postcard__title { color: var(--red-600); }
.vx-postcard__excerpt { color: var(--muted); font-size: 15px; margin: 0; }
.vx-postcard__meta {
  display: flex; gap: 16px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(25,23,47,.1);
  font-size: 13.5px; color: var(--muted);
}
.vx-tag--red { background: var(--red-100); color: var(--red-700); }

/* Location hero: copy on the left, map card on the right */
.vx-lochero {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
@media (max-width: 980px) { .vx-lochero { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Services hub
   ========================================================================== */
.vx-svcgroup {
  /* Measured at 1440: intro column 460, 51px gap, cards 611..1338 (727).
     The .78fr/1fr split left the card column 64px narrow, which wrapped the
     descriptions and made every row taller than the board's. */
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 51px); align-items: start;
}
.vx-svcgroup__n {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: clamp(46px, 5vw, 72px); line-height: 1; color: var(--red-600); margin: 0 0 10px;
}
.vx-svcgroup__d { color: var(--muted); margin: 16px 0 24px; }
.vx-svcgroup__intro img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.vx-svclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vx-svclist a {
  display: flex; align-items: center; gap: 18px; padding: 18px 20px;
  background: var(--white); text-decoration: none; color: inherit;
  transition: translate .18s var(--ease), box-shadow .18s var(--ease);
}
.vx-svclist a:hover { translate: 0 -2px; box-shadow: 0 20px 44px -32px rgba(11,9,38,.45); }
.vx-svclist__tile {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--navy-100); color: var(--navy-800);
}
.vx-svclist__tile .vx-ico { width: 21px; height: 21px; }
.vx-svclist__text { display: grid; gap: 4px; flex: 1; }
/* Measured against the board at 1:1: its card title runs ~30% wider than a
   19px setting, and the description a shade larger. */
.vx-svclist__text b { font-family: var(--font-display); font-stretch: 86%; font-size: 24px; line-height: 1.18; color: var(--navy-800); }
.vx-svclist a:hover .vx-svclist__text b { color: var(--red-600); }
.vx-svclist__text span { font-size: 15px; color: var(--muted); line-height: 1.5; }
.vx-svclist a:hover .vx-card__arrow { background: var(--red-600); border-color: var(--red-600); color: #fff; }
@media (max-width: 900px) { .vx-svcgroup { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vx-svclist a { flex-wrap: wrap; gap: 12px; } }

/* ==========================================================================
   About
   ========================================================================== */
.vx-abouthero__grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.vx-abouthero__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-300); margin: 20px 0 10px;
}
.vx-abouthero__media { position: relative; }
.vx-abouthero__media img { width: 100%; aspect-ratio: 4/4.6; object-fit: cover; position: relative; z-index: 1; }
.vx-abouthero__stripes { position: absolute; right: -18px; top: 42px; bottom: 42px; width: 56px; z-index: 0; }
@media (max-width: 980px) {
  .vx-abouthero__grid { grid-template-columns: minmax(0, 1fr); }
  .vx-abouthero__media { max-width: 430px; }
}

/* Legal pages */
.vx-leghead { background: var(--paper); border-bottom: 1px solid rgba(25,23,47,.12); }
.vx-leghead__updated { color: var(--muted); font-size: 16px; margin: 18px 0 0; }
/* Measured off the privacy artboard at 1440: contents column 240, 72px gap,
   prose 777, the whole block starting at the normal 100px gutter. The extra
   max-width here was pulling it out to x61 and widening the prose to 820. */
.vx-leggrid {
  display: grid; grid-template-columns: 240px minmax(0, 777px);
  gap: 72px; align-items: start;
}
.vx-leggrid .vx-artbody { max-width: none; }
/* The board sets this page's body a size up from an article's. */
.vx-leggrid .vx-artbody, .vx-leggrid .vx-artbody p, .vx-leggrid .vx-artbody li { font-size: 20px; line-height: 1.79; }
@media (max-width: 900px) { .vx-leggrid { grid-template-columns: minmax(0, 1fr); } .vx-leggrid .vx-toc { display: none; } }

/* Calculator intro copy sits in the header's right column */
.vx-calcintro p:last-child { margin-bottom: 0; }
.vx-calc-copy { max-width: var(--read-max); }

/* Author card at the foot of an article */
.vx-authorbio {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--white); border-left: 4px solid var(--navy-800);
  padding: 24px 26px; margin-top: 36px;
}
.vx-authorbio img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.vx-authorbio .vx-eyebrow { margin-bottom: 6px; }
.vx-authorbio__name { font-size: 21px; line-height: 1.2; margin-bottom: 8px; }
.vx-authorbio__text { color: var(--muted); font-size: 15.5px; margin: 0; }
.vx-authorbio__text a { color: var(--navy-700); text-decoration: underline; }
@media (max-width: 560px) { .vx-authorbio { flex-direction: column; gap: 14px; } }


/* Star-bullet list card, applied to prose lists. */
.vx-prose .vx-starlist { padding: 4px 0; margin-block: 22px; }
.vx-prose .vx-starlist li { display: flex; gap: 14px; padding: 13px 24px; }
.vx-prose .vx-starlist li + li { border-top: 1px solid rgba(25,23,47,.1); margin-top: 0; }
.vx-prose .vx-starlist .vx-ico { width: 15px; height: 15px; flex: none; margin-top: 6px; color: var(--red-600); }
.vx-prose .vx-starlist li > *:not(svg) { margin: 0; }


/* The user-agent stylesheet gives <figure> a 40px side margin, which is exactly
   how far the body images were sitting off the text column. */
.vx-prose figure { margin: 22px 0; }
.vx-prose figure img { width: 100%; }
.vx-prose figcaption { font-size: 14.5px; color: var(--muted); margin-top: 10px; }

/* ==========================================================================
   About: the career story
   Board geometry at 1440: photo column ~480px, copy ~690px, rows alternate.
   ========================================================================== */
.vx-abouthero__lede { color: rgba(255,255,255,.8); margin-top: 22px; max-width: 52ch; }

.vx-story__row {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(28px, 6.2vw, 89px);
  align-items: center;
}
.vx-story__row + .vx-story__row { margin-top: clamp(44px, 6vw, 96px); }
/* On a flipped row the copy takes the WIDE column on the left and the photo
   the narrow one on the right. Re-ordering alone swapped their positions but
   left the photo in the wide track, which the board does not do. */
.vx-story__row.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
.vx-story__row.is-flipped .vx-story__media { order: 2; }

.vx-story__media { position: relative; }
/* Measured off the board: 439x461, so very close to square -- not 4:3. */
.vx-story__media img {
  width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover;
  border: 8px solid var(--white); border-radius: 4px;
  box-shadow: 0 22px 50px -34px rgba(11,9,38,.55);
  position: relative; z-index: 1;
}
/* The stripe accent peeks out from behind the photo's lower-right corner. */
.vx-story__stripes {
  position: absolute; z-index: 0;
  right: -14px; bottom: -14px; width: 150px; height: 90px; opacity: .9;
}
.vx-story__row.is-flipped .vx-story__stripes { right: auto; left: -14px; }

.vx-story__copy { position: relative; }
/* The year sits behind the heading as a large, faint watermark. */
.vx-story__when {
  position: absolute; top: -0.78em; left: -4px; margin: 0;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: clamp(44px, 6.2vw, 88px); line-height: 1;
  color: var(--navy-800); opacity: .14; pointer-events: none; white-space: nowrap;
}
.vx-story__title { position: relative; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; margin: 0 0 16px; padding-top: 18px; }
.vx-story__copy p { color: var(--muted); margin-bottom: 1em; }
.vx-story__copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* `.vx-story__row.is-flipped` is (0,2,0) and out-ranks a bare
     `.vx-story__row` here, so the flipped rows kept their two-column template
     on a phone and stacked the copy above the photo. Reset both. */
  .vx-story__row,
  .vx-story__row.is-flipped { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vx-story__row.is-flipped .vx-story__media { order: 0; }
  .vx-story__when { position: static; opacity: .18; margin-bottom: 2px; font-size: clamp(38px, 12vw, 54px); }
}

/* Career at a glance */
.vx-glance {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.vx-glance__copy { color: var(--muted); margin: 18px 0 26px; }
.vx-glance .vx-timeline { margin-bottom: 0; }
@media (max-width: 900px) { .vx-glance { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   About story on a phone.
   The board runs the photo nearly full width with the stripe tucked at its
   bottom-right. Stacked, the stripe's overhang was landing on top of the body
   copy, and on flipped rows it sat on the left where the text begins.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .vx-story__media { margin-bottom: 26px; }
  .vx-story__media img { border-width: 6px; aspect-ratio: 1 / 0.95; }
  .vx-story__stripes,
  .vx-story__row.is-flipped .vx-story__stripes {
    left: auto; right: -10px; bottom: -12px;
    width: 104px; height: 66px;
  }
  .vx-story__title { padding-top: 10px; }
}

/* The credential strip is the last thing in the hero and the board butts the
   next section straight up against it. The hero's own bottom padding was
   leaving a band of navy underneath. */
/* Whatever section carries the credential strip: the strip is its last element
   and the board butts the next section straight up against it. Scoped only to
   .vx-pagehead before, which left the homepage hero with 86px of navy below
   the strip -- the About hero was the only one fixed. */
.vx-pagehead:has(.vx-creds),
.vx-hero:has(.vx-creds),
.vx-section:has(.vx-creds) { padding-bottom: 0; }

/* --------------------------------------------------------- practice body ---
   Three components the board draws out of the page's prose: the numbered step
   list (`.vx-steps`, which existed in this stylesheet but had never been wired
   to anything), the icon card grid, and the closing navy call to action. */
.vx-icards { display: grid; gap: 12px; margin: 20px 0 8px; }
.vx-icard {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--white); border: 1px solid rgba(25,23,47,.12);
  border-radius: 14px; padding: 15px 20px;
}
.vx-icard__tile {
  flex: none; width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--navy-100); color: var(--navy-800);
}
.vx-icard__tile .vx-ico { width: 20px; height: 20px; }
.vx-icard__title { font-size: 19px; line-height: 1.25; margin: 1px 0 6px; color: var(--navy-800); }

/* Numbered variant: two columns, number badge above the title rather than an
   icon beside it. The location pages list their sub-topics this way. */
.vx-icards--num { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vx-icard--num { display: block; padding: 20px 22px 22px; }
.vx-icard__n {
  display: inline-block; margin-bottom: 14px; padding: 3px 9px;
  background: var(--paper); color: var(--navy-800);
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 12px; letter-spacing: .12em; line-height: 1.6;
}
.vx-icard--num .vx-icard__title { margin: 0 0 8px; }
@media (max-width: 720px) { .vx-icards--num { grid-template-columns: minmax(0, 1fr); } }
.vx-icard p { margin: 0 0 8px; }
.vx-icard p:last-child { margin-bottom: 0; }

.vx-ctacard {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: #fff;
  border-radius: 16px; padding: 32px 38px; margin-top: 38px;
}
.vx-ctacard__stripes { position: absolute; top: 0; right: 0; width: 170px; height: 130px; z-index: 0; }
.vx-ctacard > *:not(.vx-ctacard__stripes) { position: relative; z-index: 1; }
.vx-ctacard__title { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.15; margin: 0 0 14px; color: #fff; }
.vx-ctacard__copy p { color: rgba(255,255,255,.80); margin: 0 0 10px; }
.vx-ctacard__copy :where(a) { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
.vx-ctacard .vx-flex { margin-top: 20px; }

/* The lead-in is already <strong> in the source, so the line itself is not bold. */
.vx-steps__t { font-weight: 400; color: var(--text); }
.vx-steps__t strong, .vx-steps__t b { color: var(--navy-800); }
.vx-steps__item:last-child { border-bottom: 0; }

@media (max-width: 700px) {
  .vx-icard { padding: 20px; gap: 14px; }
  .vx-ctacard { padding: 28px 22px; }
}


/* The board sets the accordion tight under its heading (58px, not 126) and
   closes the body 50px below the last block. */
.vx-artbody .vx-acc { margin-top: 10px; }
.vx-artbody > *:last-child { margin-bottom: 0; }
.vx-artbody .vx-ctacard:last-child { margin-bottom: -46px; }

/* Sidebar "Related" card: the page's siblings within its practice group. */
.vx-related {
  background: var(--white); border: 1px solid rgba(25,23,47,.12);
  border-radius: 14px; padding: 18px 20px 6px;
}
.vx-related__title {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.vx-related ul { list-style: none; margin: 0; padding: 0; }
.vx-related li + li { border-top: 1px solid rgba(25,23,47,.10); }
.vx-related a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; font-size: 14.5px; font-weight: 700;
  font-family: var(--font-display); font-stretch: 86%;
  color: var(--navy-800); text-decoration: none;
}
.vx-related a:hover { color: var(--red-600); }
.vx-related a .vx-ico { width: 15px; height: 15px; color: var(--red-600); flex: none; }

/* The safety notice sits between the lede and the buttons in the hero. */
.vx-prachero .vx-alert { margin: 24px 0 0; border-radius: 10px; max-width: 56ch; }

/* Blog pagination: numbered, centred under the grid. */
.vx-pager { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.vx-pager__n {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px;
  border: 1px solid rgba(25,23,47,.14); border-radius: 10px;
  background: var(--white); color: var(--navy-800);
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 16px;
  text-decoration: none;
}
.vx-pager__n:hover { border-color: var(--navy-800); }
.vx-pager__n.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* Card excerpts clamp to three lines with a real ellipsis, so rows stay level
   whatever length the post's own summary happens to be. */
.vx-postcard__excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* The boards clamp card excerpts to three lines on desktop and four on a
   phone, where the column is narrower. */
@media (max-width: 900px) {
  .vx-postcard__excerpt { -webkit-line-clamp: 4; }
}

/* "One office, five communities" -- the area chips on the location pages. */
.vx-areas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.vx-area {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 10px;
  background: var(--white); border: 1px solid rgba(25,23,47,.12); border-radius: 10px;
  font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: 15.5px;
  color: var(--navy-800); text-decoration: none;
}
.vx-area:hover { border-color: var(--navy-800); }
.vx-area__badge {
  display: grid; place-items: center; width: 30px; height: 26px; border-radius: 6px;
  background: var(--navy-100); color: var(--navy-800);
  font-size: 11px; letter-spacing: .04em;
}
.vx-area.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.vx-area.is-active .vx-area__badge { background: var(--red-600); color: #fff; }

/* Section eyebrows carry the star; the labels inside cards do not, on every
   board. `.vx-eyebrow.is-bare` existed for this but was never applied. */
.vx-card .vx-eyebrow::before,
.vx-icard .vx-eyebrow::before,
.vx-postcard .vx-eyebrow::before { display: none; }

/* Measured on the location, practice and About mobile boards: the hero CTAs
   run the full column width (x20..369 at 390), stacked, and the page gutter
   is 20px rather than 24. */
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .vx-pagehead .vx-flex,
  .vx-prachero .vx-flex,
  .vx-abouthero .vx-flex,
  .vx-hero .vx-flex { flex-direction: column; align-items: stretch; }
  .vx-pagehead .vx-flex > .vx-btn,
  .vx-prachero .vx-flex > .vx-btn,
  .vx-abouthero .vx-flex > .vx-btn,
  .vx-hero .vx-flex > .vx-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------ DUI landing ---
   Sections the board lays out for these four pages. */
.vx-duihero__grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 556px);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
/* No padding-top here: `.vx-trust` paints its 1px grid gaps with a translucent
   white, so padding on the grid itself renders as an empty light band above the
   cards. The breathing room goes in the margin instead. */
.vx-duihero .vx-trust { margin-top: 44px; border-top: 1px solid rgba(255,255,255,.16); }

/* The review wall: every review, in three masonry columns. */
.vx-wall { columns: 3; column-gap: 20px; }
.vx-wall__item { break-inside: avoid; margin: 0 0 20px; display: block; }

/* Two-column section with a heading on one side and content on the other. */
.vx-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px); align-items: start;
}
.vx-split__copy { margin: 18px 0 0; color: var(--muted); }
.vx-split--faq { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }

/* The numbered step card on the DUI landing pages.
   NOT `.vx-plan` -- that name already belongs to the homepage's horizontal
   three-up, and defining it twice made this render sideways. */
.vx-steplist {
  list-style: none; margin: 0; padding: 0;
  background: var(--white); border: 1px solid rgba(25,23,47,.12); border-radius: 16px;
}
.vx-steplist__item { padding: 42px 38px; }
.vx-steplist__item + .vx-steplist__item { border-top: 1px solid rgba(25,23,47,.10); }
.vx-steplist__n {
  display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 86%;
  font-size: 54px; line-height: 1; color: var(--red-700);
}
.vx-steplist__n::first-letter { color: var(--navy-100); }
.vx-steplist__t { font-size: 22px; line-height: 1.2; margin: 10px 0 8px; color: var(--navy-800); }
.vx-steplist__d { margin: 0; color: var(--muted); font-size: 16px; }

/* "Rockford courts, from both sides." on navy. */
.vx-sides { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; }
.vx-sides .vx-wrap { position: relative; z-index: 3; }
.vx-sides h2 { color: #fff; }
.vx-sides__copy { color: rgba(255,255,255,.80); margin: 0 0 18px; }

/* The personal-commitment card. */
.vx-commit {
  display: grid; grid-template-columns: minmax(0, 496px) minmax(0, 1fr);
  background: var(--white); border-radius: 16px; overflow: hidden;
}
.vx-commit__media img { width: 100%; height: 100%; min-height: 100%; aspect-ratio: 496 / 610; object-fit: cover; display: block; }
.vx-commit__body { padding: clamp(28px, 3.4vw, 54px); }
.vx-commit__quote {
  margin: 14px 0 20px; font-family: var(--font-quote); font-style: italic;
  font-size: clamp(21px, 2vw, 27px); line-height: 1.38; color: var(--navy-800);
}
.vx-commit__copy { margin: 0 0 14px; color: var(--muted); }
.vx-commit__sign { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.vx-commit__sign img { border-radius: 4px; }
.vx-commit__sign b { display: block; color: var(--navy-800); font-family: var(--font-display); font-stretch: 86%; }
.vx-commit__sign span span { font-size: 14px; color: var(--muted); }

@media (max-width: 1024px) { .vx-wall { columns: 2; } }
@media (max-width: 980px) {
  .vx-duihero__grid, .vx-split, .vx-split--faq, .vx-commit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) { .vx-wall { columns: 1; } }

/* The board's DUI hero stands 934 tall against 1074 here. */
.vx-duihero { padding-block: clamp(26px, 3vw, 44px) clamp(26px, 3vw, 48px); }

/* ------------------------------------------------------------- calculator ---
   The board runs the tool beside a sidebar: what the estimate covers, the
   other two calculators, and a consultation card. */
.vx-calcgrid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 338px);
  gap: clamp(22px, 2.6vw, 38px); align-items: start;
}
.vx-calcside { display: grid; gap: 18px; position: sticky; top: 104px; }
.vx-calcside__card {
  background: var(--white); border: 1px solid rgba(25,23,47,.12);
  border-radius: 14px; padding: 20px 22px;
}
.vx-calcside__title {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.vx-covers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vx-covers__item { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--text); }
.vx-covers__item .vx-ico { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--navy-800); }
.vx-covers__item.is-caveat { color: var(--muted); }
.vx-covers__item.is-caveat .vx-ico { color: var(--red-600); }
.vx-related__list { list-style: none; margin: 0; padding: 0; }
.vx-related__list li + li { border-top: 1px solid rgba(25,23,47,.10); }
.vx-related__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; font-size: 14.5px; font-weight: 700;
  font-family: var(--font-display); font-stretch: 86%;
  color: var(--navy-800); text-decoration: none;
}
.vx-related__list a:hover { color: var(--red-600); }
.vx-related__list a .vx-ico { width: 15px; height: 15px; color: var(--red-600); flex: none; }
.vx-btn--block { width: 100%; justify-content: center; }
.vx-calcside .vx-btn--block + .vx-btn--block { margin-top: 10px; }
/* The tool fills its column rather than sitting centred in the page. */
.vx-calcgrid .vx-calc-host { margin-inline: 0; max-width: none; }

@media (max-width: 1024px) {
  .vx-calcgrid { grid-template-columns: minmax(0, 1fr); }
  .vx-calcside { position: static; }
}

/* The legacy calculator shell carries its own 48/72px padding, which inset the
   tool inside its column. The board runs the card to the column edges. */
/* The legacy calculator shell brings its own padding AND its own pale gradient
   background, which painted a near-white panel (rgb 250,248,245) behind the
   card where the board shows the card sitting directly on the paper. */
.vx-calcgrid .vl-csc-page { padding: 0; background: none; }
/* Same shell styling on the intro block: its own pale panel and 40px of top
   padding, where the board sets the copy plain on the paper. */
.vx-calcintro .vl-csc-intro { background: none; padding: 0; }

/* ---------------------------------------------------------------- services ---
   The board runs all three practice groups on one paper background, then a
   navy calculators strip, then the plan on white. */
.vx-calcstrip {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--navy-900); color: #fff; border-radius: 4px;
  margin-top: clamp(26px, 3vw, 44px);
}
.vx-calcstrip > *:not(.vx-stars) { position: relative; z-index: 2; padding: 26px 28px; }
.vx-calcstrip > *:not(.vx-stars) + * { border-left: 1px solid rgba(255,255,255,.14); }
.vx-calcstrip__lead b { display: block; font-family: var(--font-display); font-stretch: 86%; font-size: 19px; margin-bottom: 6px; }
.vx-calcstrip__lead span { font-size: 14.5px; color: rgba(255,255,255,.72); line-height: 1.5; }
.vx-calcstrip__item { text-decoration: none; color: #fff; }
.vx-calcstrip__item b { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-stretch: 86%; font-size: 15px; margin-bottom: 6px; }
.vx-calcstrip__item b .vx-ico { width: 16px; height: 16px; color: var(--red-300); flex: none; }
.vx-calcstrip__item span { display: block; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.5; }
.vx-calcstrip__item:hover b { color: var(--red-300); }
.vx-sec-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

/* The board's service rows are taller, with a clear gap between them. */
.vx-svclist { display: grid; gap: 16px; }
.vx-svclist > li > a { padding: 21px 26px; }

@media (max-width: 900px) { .vx-calcstrip { grid-template-columns: minmax(0, 1fr); }
  .vx-calcstrip > *:not(.vx-stars) + * { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); } }

/* Locations hub: the five areas as a list beside the map card. */
.vx-lochero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 672px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.vx-arealist { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(25,23,47,.12); }
.vx-arealist li { border-bottom: 1px solid rgba(25,23,47,.12); }
.vx-arealist a {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  text-decoration: none; color: var(--navy-800);
}
.vx-arealist__text { flex: 1; display: grid; gap: 2px; }
.vx-arealist__text b { font-family: var(--font-display); font-stretch: 86%; font-size: 19px; line-height: 1.2; }
.vx-arealist__text span { font-size: 14.5px; color: var(--muted); }
.vx-arealist a .vx-ico { width: 17px; height: 17px; color: var(--red-600); flex: none; }
.vx-arealist a:hover .vx-arealist__text b { color: var(--red-600); }
@media (max-width: 980px) { .vx-lochero { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------- contact ---
   The board puts the page's heading, lede and the three contact methods
   beside the lead form, then the map with an office card. */
.vx-conhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 612px); gap: clamp(28px, 4vw, 70px); align-items: start; }
.vx-conmethods { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; max-width: 556px; }
.vx-conmethod {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid rgba(25,23,47,.10);
  border-radius: 12px; padding: 16px 18px; text-decoration: none;
}
.vx-conmethod:hover { border-color: var(--navy-800); }
.vx-conmethod__tile {
  flex: none; width: 48px; height: 48px; border-radius: 10px;
  display: grid; place-items: center; background: var(--navy-900); color: #fff;
}
.vx-conmethod__tile .vx-ico { width: 20px; height: 20px; }
.vx-conmethod__text { flex: 1; display: grid; gap: 2px; }
.vx-conmethod__label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vx-conmethod__text b { font-family: var(--font-display); font-stretch: 86%; font-size: 19px; color: var(--navy-800); }

.vx-officegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: var(--white); border-radius: 14px; overflow: hidden; }
.vx-officegrid .vx-mapcard { border-radius: 0; border: 0; }
.vx-officecard { padding: clamp(26px, 3vw, 44px); border-left: 3px solid var(--red-600); }
.vx-officecard__addr { margin: 12px 0 14px; font-family: var(--font-display); font-stretch: 86%; font-size: 19px; color: var(--navy-800); line-height: 1.45; }
.vx-officecard__copy { margin: 0 0 22px; color: var(--muted); }
.vx-btn--navy { background: var(--navy-900); color: #fff; }
.vx-btn--navy:hover { background: var(--navy-800); }

@media (max-width: 980px) { .vx-conhero, .vx-officegrid { grid-template-columns: minmax(0, 1fr); } .vx-officecard { border-left: 0; border-top: 3px solid var(--red-600); } }

/* The 404 watermark was being flattened to opacity .06 because `.vx-v-mark` is
   declared a second time further down this stylesheet and won on source order.
   The board shows it clearly, running from the top of the section. */
.vx-404 .vx-404__v {
  top: 0; translate: -50% 0;
  width: min(60vw, 566px);
  opacity: 1; background: var(--navy-100);
}

/* Dropdown parents are links to their own hub page, with the caret as a
   separate toggle so the menu still opens without navigating. */
/* Parent link and caret on one row. Safe now that the dropdown is anchored to
   top:100% rather than its static position.

   Desktop only. Unscoped, this made the drawer's list items flex rows on
   mobile too, so the submenu became a third flex item BESIDE the caret --
   14px wide and pushed off-canvas instead of dropping below the link. */
@media (min-width: 1101px) {
  .vx-nav [data-vx-sub] { display: flex; align-items: center; gap: 0; }
  .vx-nav [data-vx-sub] > a { flex: 0 0 auto; padding-right: 2px; }
}

/* In the drawer the link and its caret share one row and the submenu spans
   the full width beneath them. */
@media (max-width: 1100px) {
  .vx-nav [data-vx-sub] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .vx-nav [data-vx-sub] > .vx-nav__sub { grid-column: 1 / -1; }
  .vx-nav > ul .vx-nav__caretbtn { width: auto; padding: 14px 4px 14px 10px; }
  /* One separator per row, on the row itself. Bordering the link and the caret
     separately drew two segments of different widths with a gap between. */
  .vx-nav > ul > li { border-bottom: 1px solid rgba(25,23,47,.08); }
  .vx-nav > ul > li > a,
  .vx-nav > ul > li > .vx-nav__caretbtn { border-bottom: 0; }
  .vx-nav__sub > li:last-child > a { border-bottom: 0; }
}
/* `.vx-nav > ul button` is (0,1,2) and out-ranks a bare component class, so
   the caret kept the full nav-item padding and sat 16px from the label. */
.vx-nav > ul .vx-nav__caretbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 10px 10px 10px 2px; margin: 0;
  gap: 0; cursor: pointer; color: inherit;
}

/* The board marks the parent of the section you are in, not just the hub page. */
.vx-nav > ul > li.is-section > a,
.vx-nav > ul > li > a[aria-current="page"] { position: relative; }
.vx-nav > ul > li.is-section > a::after,
.vx-nav > ul > li > a[aria-current="page"]::after {
  content: ''; position: absolute; left: 14px; right: 2px; bottom: 4px;
  height: 2px; background: var(--red-600);
}
/* That bar is sized for a desktop nav item. In the drawer the link fills the
   row, so it stretched the full width and sat on the row's own border, reading
   as a stray line. Mark the current item by colour there instead. */
@media (max-width: 1100px) {
  .vx-nav > ul > li.is-section > a::after,
  .vx-nav > ul > li > a[aria-current="page"]::after { content: none; }
  .vx-nav > ul > li.is-section > a,
  .vx-nav > ul > li > a[aria-current="page"] { color: var(--red-600); }
}

/* The board separates the practice groups with a hairline and a generous gap,
   so each reads as its own block instead of one continuous card stack. */
.vx-svcgroup + .vx-svcgroup {
  margin-top: clamp(40px, 5vw, 76px);
  padding-top: clamp(40px, 5vw, 76px);
  border-top: 1px solid rgba(25,23,47,.14);
}

/* `1fr` is minmax(auto, 1fr) and `auto` floors a track at its content's
   min-content width, so a stubborn child pushes the track wider than the
   viewport. With overflow-x: clip on the root that overflow is cut, not
   scrollable, so it is invisible to a scrollWidth check. Every collapsing grid
   above uses minmax(0, 1fr) for that reason. */

/* ---------------------------------------------------------- mobile bar
   Phone-only action bar pinned to the bottom of the viewport. On a phone this
   is the firm's primary contact path, so it ships on every page.

   It is hidden above 767px entirely (tablet and desktop keep the sticky header
   with its own call + consultation buttons), and off-screen until vl-ui.js adds
   `is-up` once the visitor has scrolled past roughly the first viewport.
   "Appear on scroll" needs JS by definition, so with JS off the bar simply never
   appears; the header and footer call/consultation links still work. */
.vx-mobilebar { display: none; }

@media (max-width: 767px) {
  .vx-mobilebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(25,23,47,.12);
    box-shadow: 0 -10px 30px -22px rgba(11,9,38,.6);
    transform: translateY(110%);
    transition: transform 260ms ease;
  }
  .vx-mobilebar.is-up { transform: translateY(0); }

  .vx-mobilebar .vx-btn { width: 100%; padding: 13px 10px; font-size: 13px; }
  .vx-mobilebar__call {
    --btn-bg: var(--white); --btn-fg: var(--navy-800); --btn-bd: rgba(25,23,47,.22);
  }
  .vx-mobilebar__call .vx-ico { color: var(--red-600); }

  /* Keep the bar from covering the last of the footer. */
  body.vl { padding-bottom: 76px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .vx-mobilebar { transition: none; }
}

/* ------------------------------------------------------- HTML sitemap
   The sitemap page is one long list in source order; the board groups each
   section into a card and runs the cards in three columns. */
.vx-sitemapgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: 8px;
}
.vx-sitemapcard {
  background: var(--white); border: 1px solid rgba(25,23,47,.12);
  border-radius: 14px; padding: 22px 24px;
}
.vx-sitemapcard__t { font-size: 18px; line-height: 1.25; margin: 0 0 12px; }
.vx-sitemapcard .vx-starlist { margin: 0; }
@media (max-width: 980px) { .vx-sitemapgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vx-sitemapgrid { grid-template-columns: minmax(0, 1fr); } }