/* ============================================================
VINING LAW FIRM — CONVERSION LAYER (vlfirm-mock3)
Persuasion blocks layered onto the editorial design system in
styles.css. Same tokens, same docket motif. Loaded after
styles.css on index.html, the practice-area pages and contact.
Blocks: utility strip · conversion hero · accolade ticker ·
promise band · proof strip · evaluator card · deadline band ·
testimonial grid.
============================================================ */
/* ------------------------------------------------------------
UTILITY STRIP — fixed above the site header
------------------------------------------------------------ */
.vl-util{
position:fixed; top:0; left:0; right:0; z-index:1001;
height:34px; display:flex; align-items:center;
background:var(--navy-950); border-bottom:1px solid var(--line-on-navy);
font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
color:var(--on-navy-soft);
}
.vl-util .container{ display:flex; justify-content:space-between; align-items:center; gap:24px; width:100%; }
.vl-util-items{ display:flex; gap:28px; }
.vl-util-items span::before{ content:"\2726"; color:var(--gold); margin-right:10px; font-size:9px; position:relative; top:-1px; }
.vl-util a{ color:var(--on-navy); }
.vl-util a:hover{ color:var(--gold); }
/* Sibling selectors, not a body class: the class was added by evaluator.js,
which 11 of the 31 pages do not load, so they would overlap the strip. */
.vl-util + .site-header{ top:34px; }
.vl-util ~ .mobile-drawer{ top:0; }
@media (max-width:760px){
.vl-util{ display:none; }
.vl-util + .site-header{ top:0; }
}
@media (max-width:1040px){
.vl-util-items span:nth-child(3){ display:none; }
}
/* ------------------------------------------------------------
CONVERSION HERO — loss-framed headline + evaluator card
Photo is full-bleed behind; the founder's face lands in the
gap between the copy and the card at desktop widths.
------------------------------------------------------------ */
/* ============================================================
HERO - original full-bleed treatment, restored 2026-10-12.
The firm asked to come back to this after the editorial
version, with one change: the evaluation form stays in its
own band below (.hero-eval-band) rather than floating over
the photo. That is what made this layout unusable before -
the card sat on top of Rodney's face at narrow widths.
With the right-hand column gone the photo is unobstructed at
every width, so none of the per-breakpoint escapes this
section used to need are here.
============================================================ */
.hero-conv{
position:relative; min-height:100svh;
background:var(--navy-950); color:var(--on-navy);
display:flex; flex-direction:column; overflow:hidden;
}
.hero-conv-media{ position:absolute; inset:0 -4% 0 0; z-index:0; }
.hero-conv-media img{
width:100%; height:100%; object-fit:cover; object-position:44% 44%; display:block;
}
.hero-conv-media::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(90deg, var(--navy-950) 0%, rgba(10,24,38,.94) 24%, rgba(10,24,38,.55) 40%, rgba(10,24,38,.08) 56%, rgba(10,24,38,.30) 100%),
linear-gradient(0deg, var(--navy-950) 0%, rgba(10,24,38,0) 26%),
linear-gradient(180deg, rgba(10,24,38,.55) 0%, rgba(10,24,38,0) 30%);
}
.hero-conv-inner{
position:relative; z-index:2; flex:1 1 auto;
display:grid; grid-template-columns:minmax(0,1fr); align-items:end;
max-width:var(--container); width:100%; margin:0 auto;
padding:156px var(--gutter) 56px;
}
.hero-conv-copy{ max-width:560px; padding-bottom:8px; }
.hero-conv-rating{
display:flex; align-items:center; gap:12px; margin-bottom:28px;
font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--on-navy-soft);
}
.vl-stars{ color:var(--gold); letter-spacing:2px; font-size:14px; }
.hero-conv h1{ font-size:clamp(42px, 5.2vw, 78px); line-height:.98; }
.hero-conv h1 em{ font-style:italic; font-weight:440; color:var(--gold); }
.hero-conv-copy p.lede-navy{ color:var(--on-navy-soft); font-size:17px; line-height:1.65; margin-top:26px; max-width:500px; }
.hero-conv-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }
.hero-conv-stats{
display:flex; gap:36px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line-on-navy);
}
.hero-conv-stat b{ display:block; font-family:var(--display); font-style:italic; font-weight:480; font-size:26px; color:var(--gold); }
.hero-conv-stat span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-navy-soft); }
/* Round 7: the side-by-side hero needs roughly 1200px before the form card
starts cutting into Rodney's head, so the stack breakpoint moved up from
980px. Between 1200 and 1400 the card narrows and the photo is shifted
left, which clears his face without shrinking the image. */
@media (max-width:1400px) and (min-width:1281px){
.hero-conv-inner{ grid-template-columns:minmax(0,1fr) 344px; gap:28px; }
}
@media (max-width:1200px){
.hero-conv{ min-height:0; }
.hero-conv-media{ position:relative; inset:auto; height:58vh; min-height:360px; order:-1; }
.hero-conv-media img{ object-position:58% 42%; }
.hero-conv-media::after{
background:linear-gradient(0deg, var(--navy-950) 0%, rgba(10,24,38,0) 30%, rgba(10,24,38,.2) 100%);
}
.hero-conv-inner{ gap:36px; padding:8px var(--gutter) 56px; }
.hero-conv-copy{ max-width:100%; }
.hero-conv-stats{ gap:28px; flex-wrap:wrap; }
}
@media (max-width:520px){
.hero-conv-actions .btn{ width:100%; justify-content:center; }
.hero-conv-stats{ gap:20px; }
.hero-conv-stat b{ font-size:22px; }
}
/* ============================================================
FREE EVALUATION BAND - the form, given its own room
============================================================ */
.hero-eval-band{
background:var(--paper-dim);
padding-block:clamp(56px,7vw,92px);
border-bottom:1px solid var(--paper-line);
scroll-margin-top:110px;
}
.hero-eval-grid{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(32px,5vw,72px); align-items:start;
}
.hero-eval-copy h2{ margin:0; }
.hero-eval-copy p{
margin:22px 0 0; max-width:44ch; font-size:16.5px; line-height:1.75; color:var(--ink-soft);
}
@media (max-width:900px){
.hero-eval-grid{ grid-template-columns:1fr; gap:30px; }
}
/* ------------------------------------------------------------
ACCOLADE TICKER — recognition, in motion
------------------------------------------------------------ */
.vl-ticker{
overflow:hidden; border-top:1px solid var(--line-on-navy); border-bottom:1px solid var(--line-on-navy);
background:var(--navy-950); color:var(--on-navy-soft); padding:16px 0;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vl-ticker-track{ display:flex; width:max-content; animation:vl-marquee 46s linear infinite; }
.vl-ticker:hover .vl-ticker-track{ animation-play-state:paused; }
.vl-ticker-group{ display:flex; gap:0; flex-shrink:0; }
.vl-ticker-item{
display:inline-flex; align-items:baseline; gap:12px; padding:0 34px;
font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.vl-ticker-item b{ font-family:var(--display); font-style:italic; font-weight:480; text-transform:none; letter-spacing:0; font-size:17px; color:var(--on-navy); }
.vl-ticker-item::before{ content:"\2726"; color:var(--gold); font-size:10px; align-self:center; }
@keyframes vl-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
.vl-ticker{ -webkit-mask-image:none; mask-image:none; }
.vl-ticker-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:10px; }
.vl-ticker-group:nth-child(2){ display:none; }
}
/* ------------------------------------------------------------
PROMISE BAND — "You pay nothing unless we recover."
------------------------------------------------------------ */
.vl-promise{ background:var(--paper-dim); padding:var(--section-y) 0; position:relative; }
.vl-promise-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start; }
.vl-promise h2{ font-size:clamp(40px, 5.6vw, 84px); line-height:.98; }
.vl-promise h2 em{ font-style:italic; font-weight:440; color:var(--gold); }
.vl-promise-copy p{ color:var(--ink-soft); font-size:16.5px; line-height:1.7; max-width:440px; }
.vl-promise-copy .btn{ margin-top:28px; }
.vl-promise-terms{
margin:34px 0 0; padding:0; list-style:none;
display:flex; flex-wrap:wrap; align-items:center;
column-gap:0; row-gap:12px;
font-family:var(--mono); font-size:11.5px; letter-spacing:.07em;
text-transform:uppercase; color:var(--ink-soft);
}
.vl-promise-terms li{ display:inline-flex; align-items:center; white-space:nowrap; }
.vl-promise-terms li + li::before{
content:"·"; color:var(--gold); font-size:16px; line-height:1;
margin:0 16px; position:relative; top:-1px;
}
.vl-promise-disclosure{
margin-top:28px; padding-top:20px; border-top:1px solid var(--paper-line);
font-size:12.5px; line-height:1.65; color:var(--ink-soft); max-width:460px;
}
@media (max-width:860px){ .vl-promise-grid{ grid-template-columns:1fr; gap:32px; } }
/* ------------------------------------------------------------
PROOF STRIP — shared block (practice pages, homepage)
------------------------------------------------------------ */
.vl-proof{
background:var(--paper-dim); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
padding:26px 0;
}
.vl-proof .container{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; }
.vl-proof-rating{ display:flex; flex-direction:column; gap:4px; }
.vl-proof-rating .vl-stars{ font-size:16px; }
.vl-proof-rating span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.vl-proof-quote{ font-family:var(--display); font-style:italic; font-weight:440; font-size:clamp(17px,1.5vw,20px); line-height:1.4; color:var(--ink); margin:0; }
.vl-proof-quote cite{ display:block; font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-top:8px; }
.vl-proof .text-link{ color:var(--ink); white-space:nowrap; }
@media (max-width:860px){
.vl-proof .container{ grid-template-columns:1fr; gap:16px; }
}
/* ------------------------------------------------------------
EVALUATOR CARD — 3-step intake, foot-in-the-door
Paper card that reads like a docket form. Used in the hero,
the homepage final CTA, practice pages and contact.
------------------------------------------------------------ */
.vl-eval{
position:relative; background:var(--paper); color:var(--ink);
padding:26px 26px 22px; box-shadow:0 50px 90px -46px rgba(0,0,0,.75);
}
.vl-eval::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gold); }
.vl-eval-title{ font-family:var(--display); font-weight:480; font-size:26px; line-height:1.1; letter-spacing:-.01em; }
.vl-eval-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.vl-progress{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:20px 0 22px; }
.vl-progress i{ display:block; height:2px; background:var(--paper-line); transition:background .35s ease; }
.vl-progress i.is-done{ background:var(--gold); }
.vl-step{ display:none; }
.vl-step.is-active{ display:block; animation:vl-fade .35s ease both; }
.vl-eval:not(.is-ready) .vl-step{ display:block; margin-bottom:22px; }
.vl-eval:not(.is-ready) .vl-step-nav .vl-next,
.vl-eval:not(.is-ready) .vl-step-nav .vl-back{ display:none; }
@keyframes vl-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.vl-q{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-800); display:block; margin-bottom:12px; }
.vl-q + .vl-q, .vl-field + .vl-q, .vl-chips + .vl-q{ margin-top:20px; }
.vl-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.vl-chip{
appearance:none; border:1px solid rgba(16,24,32,.28); background:transparent; color:var(--ink);
font-family:var(--body); font-size:12.5px; font-weight:500; letter-spacing:.01em;
padding:8px 11px; cursor:pointer; line-height:1;
transition:background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.vl-chip:hover{ border-color:var(--navy-800); transform:translateY(-1px); }
.vl-chip.is-selected{ background:var(--navy-950); color:var(--paper); border-color:var(--navy-950); }
.vl-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.vl-field{ display:flex; flex-direction:column; }
.vl-field + .vl-field{ margin-top:14px; }
.vl-field label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-800); margin-bottom:6px; }
.vl-field input, .vl-field select, .vl-field textarea{
appearance:none; -webkit-appearance:none; background:transparent; border:0; border-bottom:1px solid rgba(16,24,32,.28);
color:var(--ink); font-family:var(--body); font-size:15px; padding:10px 2px; border-radius:0;
transition:border-color .3s ease;
}
.vl-field select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 4px center; padding-right:24px; cursor:pointer;
}
.vl-field input::placeholder, .vl-field textarea::placeholder{ color:rgba(72,80,100,.7); }
.vl-field input:focus, .vl-field select:focus, .vl-field textarea:focus{ border-color:var(--gold); outline:none; }
.vl-field textarea{ resize:vertical; min-height:72px; }
.vl-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vl-field-row .vl-field + .vl-field{ margin-top:0; }
@media (max-width:420px){ .vl-field-row{ grid-template-columns:1fr; } .vl-field-row .vl-field + .vl-field{ margin-top:14px; } }
.vl-error{ display:none; margin-top:12px; font-size:13px; color:#8F2D2D; }
.vl-error.is-visible{ display:block; }
.vl-step-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; }
.vl-step-nav .btn{ padding:14px 22px; font-size:14px; }
.vl-step-nav .btn-primary{ margin-left:auto; }
.vl-back{ background:none; border:0; color:var(--ink-soft); font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; padding:8px 0; }
.vl-back:hover{ color:var(--ink); }
.vl-privacy{ margin-top:16px; font-size:11.5px; line-height:1.5; color:var(--ink-soft); }
.vl-privacy::before{ content:"\1F512"; margin-right:6px; font-size:11px; }
.vl-success{ display:none; text-align:center; padding:12px 0 6px; }
.vl-success.is-active{ display:block; animation:vl-fade .4s ease both; }
.vl-success-mark{
width:52px; height:52px; margin:0 auto 18px; border:1px solid var(--gold); border-radius:50%;
display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:22px;
}
.vl-success h3{ font-family:var(--display); font-weight:480; font-size:24px; }
.vl-success p{ margin-top:12px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
.vl-success a{ color:var(--navy-800); font-weight:600; border-bottom:1px solid var(--gold); }
.vl-hp{ position:absolute; left:-9999px; }
/* evaluator inside a navy section (final CTA / contact) */
.vl-eval-wrap{ max-width:520px; }
.vl-eval.vl-eval--wide{ padding:40px 44px 30px; }
.vl-eval.vl-eval--wide .vl-eval-title{ font-size:30px; }
@media (max-width:560px){ .vl-eval, .vl-eval.vl-eval--wide{ padding:26px 20px 20px; } }
/* practice-page placement: proof strip + evaluator two-up */
.vl-intake{ padding:var(--section-y) 0; background:var(--paper); }
.vl-intake-grid{ display:grid; grid-template-columns:1fr 480px; gap:64px; align-items:start; }
.vl-intake-copy h2{ margin-top:14px; }
.vl-intake-copy .lede{ margin-top:22px; max-width:480px; }
.vl-intake-points{ margin-top:32px; display:flex; flex-direction:column; gap:14px; }
.vl-intake-points li{ display:grid; grid-template-columns:36px 1fr; gap:14px; font-size:15px; color:var(--ink-soft); line-height:1.55; }
.vl-intake-points li b{ font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.06em; color:var(--gold); padding-top:4px; }
@media (max-width:980px){ .vl-intake-grid{ grid-template-columns:1fr; gap:40px; } }
/* ------------------------------------------------------------
DEADLINE BAND — scarcity / loss aversion
------------------------------------------------------------ */
.vl-deadline{
position:relative; background:var(--navy-950); color:var(--on-navy);
padding:var(--section-y) 0; overflow:hidden; border-top:1px solid var(--line-on-navy);
}
.vl-deadline::before{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
background:repeating-linear-gradient(90deg, transparent 0 119px, rgba(247,244,236,.035) 119px 120px);
}
.vl-deadline .container{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.vl-deadline h2{ font-size:clamp(36px, 4.8vw, 68px); line-height:1.0; margin-top:18px; }
.vl-deadline h2 em{ font-style:italic; font-weight:440; color:var(--gold); }
.vl-deadline-copy p{ color:var(--on-navy-soft); font-size:16.5px; line-height:1.7; max-width:440px; }
.vl-deadline-copy .vl-deadline-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }
.vl-deadline-list{ margin-top:28px; display:flex; flex-direction:column; }
.vl-deadline-list li{
display:grid; grid-template-columns:44px 1fr; gap:16px; padding:16px 0; border-top:1px solid var(--line-on-navy);
font-size:15px; color:var(--on-navy-soft);
}
.vl-deadline-list li:last-child{ border-bottom:1px solid var(--line-on-navy); }
.vl-deadline-list li b{ font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.06em; color:var(--gold); padding-top:3px; }
@media (max-width:860px){ .vl-deadline .container{ grid-template-columns:1fr; gap:28px; } }
/* ------------------------------------------------------------
TESTIMONIAL GRID — three docket-numbered reviews
------------------------------------------------------------ */
.vl-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--paper-line); }
.vl-quote{ background:var(--paper); padding:40px 34px 34px; display:flex; flex-direction:column; }
.vl-quote-top{ display:flex; justify-content:space-between; align-items:baseline; }
.vl-quote-top .docket{ color:var(--navy-800); opacity:1; }
.vl-quote blockquote{ margin:22px 0 0; font-family:var(--display); font-style:italic; font-weight:440; font-size:clamp(18px,1.5vw,21px); line-height:1.42; flex:1; }
.vl-quote cite{ display:block; margin-top:24px; font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.vl-quote cite span{ color:var(--ink-soft); display:block; margin-top:4px; letter-spacing:.04em; }
@media (max-width:980px){ .vl-quotes{ grid-template-columns:1fr; } }
/* ------------------------------------------------------------
MISC
------------------------------------------------------------ */
.vl-disclaimer{ margin-top:28px; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--on-navy-soft); max-width:720px; line-height:1.6; }
.section .vl-disclaimer--dark{ color:var(--ink-soft); }
/* anchor targets clear the fixed header + utility strip */
.vl-eval, #intake{ scroll-margin-top:120px; }
/* ============================================================
ATTORNEYS PAGE — editorial hierarchy instead of a uniform grid.
Founder gets a wide feature block; the other three sit in an
even three-up; a navy credentials band carries the facts the
bio pages hold (schools, admissions, languages).
============================================================ */
/* ---- shared: focus-area tags (static labels, not the form chips) ---- */
.vl-focus{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.vl-focus li{
color:var(--navy-800); border:1px solid rgba(16,24,32,.18); padding:5px 9px; line-height:1;
}
/* ---- founder feature ---- */
.vl-founder{ padding:var(--section-y) 0 calc(var(--section-y) * .8); background:var(--paper); }
.vl-founder-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,72px); align-items:center; }
.vl-founder-media{ position:relative; }
.vl-founder-media img{
/* height:auto is required — the img's height attribute is a presentational
hint that would otherwise resolve the height and void aspect-ratio */
width:100%; height:auto; aspect-ratio:3/5; object-fit:cover;
object-position:50% 52%; display:block;
}
.vl-founder-media::after{
content:""; position:absolute; left:-14px; bottom:-14px; width:96px; height:96px;
border-left:1px solid var(--gold); border-bottom:1px solid var(--gold); pointer-events:none;
}
.vl-founder-name{ font-size:clamp(34px,4vw,56px); line-height:1.02; margin-top:14px; }
.vl-founder-quote{
font-family:var(--display); font-style:italic; font-weight:440;
font-size:clamp(19px,1.8vw,24px); line-height:1.42; color:var(--ink);
margin:24px 0 28px; padding-left:22px; border-left:2px solid var(--gold);
}
.vl-founder-body{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin-top:0; max-width:540px; }
.vl-founder-body + .vl-founder-body{ margin-top:16px; }
.vl-founder .vl-focus{ margin-top:26px; }
.vl-founder-honors{ margin:28px 0 0; padding:22px 0 0; border-top:1px solid var(--paper-line); list-style:none; }
.vl-founder-honors li{
display:grid; grid-template-columns:18px 1fr; gap:12px; align-items:start;
font-size:14px; color:var(--ink-soft); padding:5px 0;
}
.vl-founder-honors li::before{ content:"\2726"; color:var(--gold); font-size:9px; line-height:1.6; }
.vl-founder-cta{ margin-top:30px; }
@media (max-width:900px){
.vl-founder-grid{ grid-template-columns:1fr; }
.vl-founder-media::after{ display:none; }
.vl-founder-body{ max-width:100%; }
}
/* ---- the other three: even three-up, aligned ---- */
.vl-team-section{ padding:calc(var(--section-y) * .8) 0 var(--section-y); background:var(--paper-dim); }
.vl-team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2px; background:var(--paper-line); }
.vl-team-card{
background:var(--paper); display:flex; flex-direction:column;
transition:background .35s ease;
}
.vl-team-card:hover{ background:#FBF9F3; }
.vl-team-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--navy-900); }
.vl-team-photo img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .9s cubic-bezier(.2,.6,.2,1);
}
.vl-team-card:hover .vl-team-photo img{ transform:scale(1.045); }
.vl-team-meta{ padding:28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.vl-team-meta h3{ font-size:23px; line-height:1.14; }
.vl-team-role{
font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
color:var(--gold); margin-top:7px; display:block;
}
.vl-team-bio{ margin:18px 0 0; font-size:15px; line-height:1.65; color:var(--ink-soft); }
.vl-team-bio + .vl-team-bio{ margin-top:12px; }
.vl-team-meta .vl-focus{ margin-top:20px; }
.vl-team-link{ margin-top:auto; padding-top:24px; }
.vl-team-link .text-link{ font-size:12px; color:var(--ink); }
@media (max-width:620px){ .vl-team{ grid-template-columns:1fr; } }
/* ============================================================
PRACTICE-AREAS INDEX — grouped editorial list.
Three families, each with its own intro; every row carries the
differentiator from its own detail page. Catastrophic injury
closes the page as a full-width row because it cuts across all
three rather than belonging to one.
============================================================ */
.vl-groups{ display:flex; flex-direction:column; }
.vl-group + .vl-group{ margin-top:clamp(56px,7vw,104px); }
.vl-group-head{
display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
padding-bottom:26px; border-bottom:1px solid var(--ink);
}
.vl-group-head .docket{ color:var(--gold); margin-bottom:10px; }
.vl-group-intro{ color:var(--ink-soft); font-size:15.5px; line-height:1.65; max-width:480px; }
@media (max-width:860px){
.vl-group-head{ grid-template-columns:1fr; gap:16px; align-items:start; }
.vl-group-intro{ max-width:100%; }
}
.vl-group-rows{ display:flex; flex-direction:column; }
.vl-parow{
display:grid; grid-template-columns:56px minmax(180px,1.05fr) 1.5fr 128px;
gap:28px; align-items:start; padding:30px 0;
border-bottom:1px solid var(--paper-line);
transition:background .3s ease, padding-left .3s ease;
}
.vl-parow:hover{ background:rgba(173,138,78,.06); padding-left:14px; }
.vl-parow-icon{ width:44px; height:44px; color:var(--gold); display:block; }
.vl-parow-icon svg{ width:100%; height:100%; display:block; }
.vl-parow-name{
font-family:var(--display); font-weight:480; letter-spacing:-.01em;
font-size:clamp(20px,1.9vw,25px); line-height:1.15; padding-top:6px;
}
.vl-parow-note{ color:var(--ink-soft); font-size:14.5px; line-height:1.62; padding-top:6px; }
.vl-parow-note b{
display:block; font-family:var(--mono); font-weight:500;
font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
color:var(--navy-800); margin-bottom:8px;
}
.vl-parow-arrow{ justify-self:end; align-self:center; color:var(--ink); opacity:.45; transition:transform .3s ease, opacity .3s ease; }
.vl-parow:hover .vl-parow-arrow{ transform:translateX(6px); opacity:1; }
.vl-parow-cta{
justify-self:end; align-self:center; white-space:nowrap;
display:inline-flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:3px;
transition:color .3s ease;
}
.vl-parow:hover .vl-parow-cta{ color:var(--navy-800); }
.vl-parow:hover .vl-parow-cta .btn-arrow{ transform:translateX(4px); }
@media (max-width:980px){
.vl-parow{ grid-template-columns:44px 1fr; gap:14px 20px; }
.vl-parow-name{ padding-top:2px; }
.vl-parow-note{ grid-column:2; padding-top:0; }
.vl-parow-arrow{ display:none; }
.vl-parow-cta{ grid-column:2; justify-self:start; margin-top:4px; }
}
/* ---- capstone: catastrophic injury, spanning all three groups ---- */
.vl-capstone{
display:grid; grid-template-columns:72px 1fr auto; gap:32px; align-items:center;
margin-top:clamp(56px,7vw,104px); padding:clamp(28px,3.4vw,44px);
background:var(--navy-950); color:var(--on-navy);
transition:background .35s ease;
}
.vl-capstone:hover{ background:var(--navy-900); }
.vl-capstone-icon{ width:56px; height:56px; color:var(--gold); display:block; }
.vl-capstone-icon svg{ width:100%; height:100%; display:block; }
.vl-capstone-body{ display:block; max-width:680px; }
.vl-capstone-body .docket{ display:block; margin-bottom:10px; }
.vl-capstone-name{
display:block; font-family:var(--display); font-weight:480; letter-spacing:-.01em;
font-size:clamp(26px,2.9vw,38px); line-height:1.08;
}
.vl-capstone-note{ display:block; margin-top:14px; color:var(--on-navy-soft); font-size:15px; line-height:1.68; }
.vl-capstone-cta{
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:3px;
}
.vl-capstone:hover .btn-arrow{ transform:translateX(4px); }
@media (max-width:860px){
.vl-capstone{ grid-template-columns:1fr; gap:20px; }
.vl-capstone-cta{ justify-self:start; }
}
/* ============================================================
RESULTS — equal-weight cards.
Client revision round 4 (2026-10-08): the proportional-bar
presentation was removed at the firm's request — settlement
amounts are no longer encoded as bar length on either the
homepage or the Results page. Every result now occupies the
same card footprint, so none is drawn larger than another.
The dollar amount is the card's headline; the description
sits underneath it.
============================================================ */
.vl-resgrid{
list-style:none; margin:0; padding:0;
display:grid; gap:clamp(14px,1.5vw,20px);
grid-template-columns:repeat(auto-fit,minmax(264px,1fr));
/* 1fr rows keep every card the same height, so no result reads as
larger or smaller than another - the point of round 4. */
grid-auto-rows:1fr;
}
.vl-rescard{
display:flex; flex-direction:column;
padding:clamp(24px,2.4vw,32px);
border:1px solid var(--line-on-navy);
background:rgba(247,244,236,.03);
transition:border-color .35s ease, background-color .35s ease;
}
.vl-rescard:hover{ border-color:rgba(173,138,78,.55); background:rgba(247,244,236,.055); }
.vl-rescard-figure{
font-family:var(--display); font-style:italic; font-weight:480;
font-size:clamp(30px,3vw,41px); line-height:1.02; color:var(--gold);
font-variant-numeric:tabular-nums;
}
.vl-rescard-desc{
margin-top:15px; font-size:16px; font-weight:500; line-height:1.45; color:var(--on-navy);
}
.vl-rescard-note{
margin-top:10px; font-size:13.5px; line-height:1.65; color:var(--on-navy-soft);
}
@media (max-width:620px){
/* single column stacks, so equal heights no longer aid comparison -
auto rows keep short cards from padding out the scroll. */
.vl-resgrid{ grid-template-columns:1fr; grid-auto-rows:auto; }
.vl-rescard{ padding:22px; }
.vl-rescard-figure{ font-size:30px; }
}
/* prior-results disclaimer — sized to be read, not buried.
Round 4 asked for this to be clear rather than fine print. */
.vl-resdisclaimer{
margin-top:clamp(32px,3.4vw,48px);
padding:20px 24px; max-width:840px;
border-left:3px solid var(--gold);
background:rgba(247,244,236,.04);
font-size:15px; line-height:1.7; color:var(--on-navy);
}
.section:not(.section-navy) .vl-resdisclaimer{
background:rgba(16,24,32,.035); color:var(--ink);
}
@media (max-width:620px){
.vl-resdisclaimer{ padding:18px 20px; font-size:14.5px; }
}
/* ============================================================
GOOGLE REVIEWS - rotating carousel + static grid.
Scroll-snap so it still works as a manual scroller with no JS;
the script only adds auto-advance, arrows and the counter.
============================================================ */
.vl-revrot{ position:relative; }
.vl-revrot-viewport{
/* clips at the container edge, not the screen edge, so a card scrolling
out reads as intentional rather than cut off */
overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
scrollbar-width:none; -ms-overflow-style:none;
}
.vl-revrot-viewport::-webkit-scrollbar{ display:none; }
.vl-revrot-viewport:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.vl-revrot-track{
display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3);
gap:24px; margin:0; padding:0; list-style:none; align-items:stretch;
}
@media (max-width:1080px){ .vl-revrot-track{ grid-auto-columns:calc((100% - 24px) / 2); } }
@media (max-width:760px){ .vl-revrot-track{ grid-auto-columns:88%; gap:16px; } }
.vl-rev{
scroll-snap-align:start; display:flex; flex-direction:column;
background:var(--paper); border-top:2px solid var(--gold);
padding:28px 26px 26px;
}
.vl-rev-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; }
.vl-rev-top .vl-stars{ font-size:15px; }
.vl-rev-top .docket{ color:var(--ink-soft); opacity:.8; }
.vl-rev blockquote{
margin:18px 0 0; flex:1;
font-family:var(--display); font-style:italic; font-weight:440;
font-size:clamp(16px,1.35vw,18.5px); line-height:1.5; color:var(--ink);
}
.vl-rev cite{
display:block; margin-top:22px; font-style:normal;
font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
text-transform:uppercase; color:var(--navy-800);
}
.vl-rev cite span{ display:block; margin-top:5px; color:var(--ink-soft); letter-spacing:.04em; }
.vl-revrot-controls{
display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px;
}
.vl-revrot-count{
margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
}
.vl-revrot-now{ color:var(--gold); }
.vl-revrot-btns{ display:flex; gap:10px; }
.vl-revrot-btn{
width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
background:transparent; border:1px solid rgba(16,24,32,.28); color:var(--ink);
cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.vl-revrot-btn:hover:not(:disabled){ background:var(--navy-950); border-color:var(--navy-950); color:var(--paper); }
.vl-revrot-btn:disabled{ opacity:.3; cursor:default; }
.vl-revrot-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* on a navy section the cards keep the paper surface; controls invert */
.section-navy .vl-revrot-btn{ border-color:var(--line-on-navy); color:var(--on-navy); }
.section-navy .vl-revrot-btn:hover:not(:disabled){ background:var(--gold); border-color:var(--gold); color:var(--navy-950); }
.section-navy .vl-revrot-count{ color:var(--on-navy-soft); }
/* static grid (testimonials page) */
.vl-revgrid{
display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
margin:0; padding:0; list-style:none;
}
@media (max-width:1080px){ .vl-revgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .vl-revgrid{ grid-template-columns:1fr; } }
/* homepage attorney cards — rev 2 adds a View Profile affordance */
.attorney-card .attorney-meta{ display:flex; flex-direction:column; flex:1; }
.attorney-card .attorney-link{ margin-top:auto; padding-top:20px; }
.attorney-card .attorney-link .text-link{ font-size:12px; color:var(--ink); }
.attorney-card:hover .attorney-link .btn-arrow{ transform:translateX(4px); }
.attorney-grid .attorney-card{ display:flex; flex-direction:column; }
/* ============================================================
PRACTICE-AREA DETAIL PAGES — shared long-form body (rev 3)
One treatment across all thirteen pages.
============================================================ */
.vl-pa-text{ max-width:680px; font-size:16px; line-height:1.75; color:var(--ink-soft); }
.vl-pa-text + .vl-pa-text{ margin-top:18px; }
.vl-pa-list{
margin:18px 0 0; padding:0; list-style:none; max-width:680px;
border-top:1px solid var(--paper-line);
}
.vl-pa-list li{
position:relative; padding:12px 0 12px 26px;
border-bottom:1px solid var(--paper-line);
font-size:15.5px; line-height:1.6; color:var(--ink-soft);
}
.vl-pa-list li::before{
content:""; position:absolute; left:0; top:21px;
width:12px; height:1px; background:var(--gold);
}
.vl-pa-list + .vl-pa-text{ margin-top:22px; }
/* ============================================================
ABOUT PAGE — client revision round 5 (2026-10-08).
Two-column editorial rows (heading left, copy right) rather
than the centred 820px column the page used before, so the
firm statement, the access section and the CTA share one
rhythm. The old four-step "How We Work" band was removed at
the firm's request and is deliberately NOT replaced with
another numbered process section.
============================================================ */
.vl-about-brand,
.vl-about-access,
.vl-about-cta{
display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);
gap:clamp(32px,5vw,80px); align-items:start;
}
.vl-about-brand-body > p,
.vl-about-access-body > p{
font-size:17px; line-height:1.8; color:var(--ink-soft); margin-bottom:22px; max-width:62ch;
}
.vl-about-brand-body > p:last-child,
.vl-about-access-body > p:last-child{ margin-bottom:0; }
.vl-about-brand-body > p.lede,
.vl-about-access-body > p.lede{ color:var(--ink); margin-bottom:26px; }
/* the firm's tagline, set as a section heading rather than a kicker */
.vl-about-tagline{
margin-top:14px;
font-family:var(--display); font-style:italic; font-weight:480;
font-size:clamp(34px,4.2vw,56px); line-height:1.04; color:var(--gold);
}
/* the three ways to meet, straight from the firm's copy */
.vl-about-ways{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--paper-line); }
.vl-about-ways li{
display:flex; gap:18px; align-items:baseline;
padding:15px 0; border-bottom:1px solid var(--paper-line);
}
.vl-about-ways b{
font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
color:var(--gold); flex:none;
}
.vl-about-ways span{ font-size:15.5px; line-height:1.6; color:var(--ink); }
/* four individual headshots in one row - never a composite image */
.vl-about-team{
margin-top:48px;
display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:clamp(16px,1.8vw,26px);
}
.vl-about-atty{ display:block; text-decoration:none; color:inherit; }
.vl-about-atty-photo{
aspect-ratio:4/5; overflow:hidden; background:var(--navy-900);
border:1px solid var(--paper-line);
}
.vl-about-atty-photo img{
/* height:100% so the wrapper's aspect-ratio governs - the intrinsic
attributes differ between these four source files. */
width:100%; height:100%; object-fit:cover; object-position:50% 22%;
display:block; transition:transform .9s cubic-bezier(.2,.6,.2,1);
}
.vl-about-atty:hover .vl-about-atty-photo img{ transform:scale(1.045); }
.vl-about-atty-name{
display:block; margin-top:16px;
font-family:var(--display); font-size:19px; font-weight:480; line-height:1.3; color:var(--ink);
}
.vl-about-atty:hover .vl-about-atty-name{ color:var(--navy-700); }
@media (prefers-reduced-motion: reduce){
.vl-about-atty-photo img{ transition:none; }
.vl-about-atty:hover .vl-about-atty-photo img{ transform:none; }
}
.vl-about-cta{ align-items:center; }
.vl-about-cta-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }
@media (max-width:860px){
.vl-about-brand,
.vl-about-access,
.vl-about-cta{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:520px){
.vl-about-team{ grid-template-columns:repeat(2,1fr); }
.vl-about-atty-name{ font-size:16px; margin-top:12px; }
}
/* ============================================================
CONTACT PAGE — client revision round 6 (2026-10-08).
The form leads the page now; the phone, email, offices and
statewide note follow it, in the order the firm specified.
============================================================ */
.vl-contact-form{ max-width:760px; }
.vl-contact-form .vl-eval-title{ font-size:clamp(28px,3.4vw,40px); }
.vl-contact-form .vl-eval-sub{
font-family:var(--mono); font-size:11px; letter-spacing:.09em;
text-transform:uppercase; color:var(--gold); margin-top:10px;
}
.vl-contact-grid{
margin-top:48px; display:grid; gap:1px;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
background:var(--paper-line); border:1px solid var(--paper-line);
}
.vl-contact-item{ background:var(--paper-dim); padding:28px 26px; }
.vl-contact-label{
font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em;
text-transform:uppercase; color:var(--gold); margin:0 0 12px;
}
.vl-contact-value{
font-family:var(--display); font-size:21px; line-height:1.25; color:var(--ink);
text-decoration:none; word-break:break-word; border-bottom:1px solid transparent;
transition:border-color .25s ease, color .25s ease;
}
.vl-contact-value:hover{ color:var(--navy-700); border-bottom-color:var(--gold); }
.vl-contact-addr{ font-style:normal; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }
.vl-contact-statewide{
margin-top:clamp(40px,4vw,60px); padding-top:clamp(32px,3.4vw,44px);
border-top:1px solid var(--paper-line); max-width:780px;
}
.vl-contact-statewide p{
margin-top:18px; font-size:16.5px; line-height:1.75; color:var(--ink-soft);
}
.vl-contact-disclaimer{
max-width:780px; font-size:14px; line-height:1.75; color:var(--ink-soft);
padding-left:18px; border-left:2px solid var(--paper-line);
}
/* footer: the "view all" row closes the practice-areas column */
.footer-all{ color:var(--gold) !important; }
.footer-all:hover{ color:var(--gold-bright) !important; }
/* ============================================================
ROUND 7 — hero nav + photo clearance (2026-10-12)
============================================================ */
/* The desktop nav carries seven links, a phone number and a CTA button. It
ran out of room around 1150px and wrapped onto two lines at laptop widths
(visible at 1280 and 1024), so the drawer now takes over before that. */
/* The inline nav phone link is redundant - the number is already in the top
utility strip and the CTA button sits beside it. Dropping it at laptop
widths frees ~150px and keeps the full nav on one row instead of pushing
laptop users to a hamburger. */
@media (max-width:1440px){
.nav-desktop .nav-phone{ display:none; }
}
/* Links were being compressed until "Practice Areas" broke onto a second
line, which is what made the nav look two-storey at laptop widths. Keep
each label intact and let the gaps absorb the squeeze instead. */
.nav-links a{ white-space:nowrap; }
@media (max-width:1440px){
.nav-desktop{ gap:26px; }
.nav-links{ gap:24px; }
}
@media (max-width:1200px){
.nav-desktop{ gap:18px; }
.nav-links{ gap:18px; }
}
@media (max-width:1120px){
.nav-desktop{ display:none; }
.nav-toggle{ display:block; }
}
/* Round 13 (2026-10-14) — the nav phone broke after the verb.
`.nav-links a` got white-space:nowrap in round 7 but `.nav-phone` did not,
so above 1440px (the only widths where it is shown) it wrapped to two
lines and pushed the header from 56px to 84px. English hid it because
"Call (203) 800-7380" happened to fit; Spanish "Llamar (203) 800-7380" is
17px wider and broke. Costs 14px, and there is room for it. */
.nav-phone{ white-space:nowrap; }
/* Spanish labels run ~13% wider than English ("Áreas de Práctica",
"Evaluación gratuita"), which left the logo crowded against the first nav
item once the phone stopped wrapping. Buy the room back from the gaps.
Scoped above 1440 only: the narrower breakpoints below already set their
own gaps, and this selector would otherwise outrank them. */
@media (min-width:1441px){
html[lang="es"] .nav-links{ gap:26px; }
}
/* ============================================================
BLOG CARD FEATURED TILES (2026-10-12, round 10)
Every card gets an image slot at a fixed 3:2 ratio so the
column stays even. The artwork is a brand motif matched to
the article subject - no photographs exist for these pieces
and unlicensed stock is not an option on a law firm's site.
Swapping a real photo in later means replacing the