/* =============================================================================
   VB ATTORNEYS SANDBOX — INTERIOR / SERVICE PAGE COMPONENTS
   Light, editorial aesthetic consistent with the sandbox homepage. New classes
   only; nothing here overrides homepage selectors.
============================================================================= */

/* ── interior hero ─────────────────────────────────── */
.page-hero { background: var(--off-white); position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 36px) 0 64px; }
.page-hero-inner { max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.page-hero-content { max-width: min(540px, 52%); }
/* photo bleeds off the right edge, navy/gold duotone, faded into the cream on the left */
.page-hero-bleed { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; background: #2c2114; overflow: hidden; z-index: 1; isolation: isolate; }
.page-hero-bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 45%; filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; }
.page-hero-bleed::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(178,146,97,0.05), rgba(222,201,170,0.16)); mix-blend-mode: screen; z-index: 1; }
/* angled left dissolve + a cream veil across the whole image so it reads as a quiet background */
.page-hero-bleed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--off-white) 0%, var(--off-white) 20%, rgba(255,244,234,0.55) 44%, rgba(255,244,234,0.34) 100%); z-index: 2; pointer-events: none; }
.page-crumbs { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n500); margin-bottom: 22px; }
.page-crumbs a { color: var(--n500); transition: color .2s; }
.page-crumbs a:hover { color: var(--navy); }
.page-crumbs span { color: var(--gold); }
.page-hero .hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-hero .hero-eyebrow-line { width: 36px; height: 1px; background: var(--gold); flex-shrink: 0; }
.page-hero h1 { font-family: var(--serif); font-weight: 300; color: var(--navy); font-size: clamp(34px,4.8vw,62px); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 22px; max-width: 16ch; }
.page-hero h1 em { font-style: italic; color: var(--gold-display); }
.page-hero-sub { font-size: 18px; color: var(--n700); line-height: 1.6; max-width: 660px; margin-bottom: 10px; }
.page-hero-tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--n500); margin-bottom: 30px; }
.page-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── generic interior section ──────────────────────── */
.svc { padding: clamp(44px,5vw,68px) 0; background: var(--n0); }
.svc.alt { background: var(--n50); }
.svc.mist { background: var(--off-white); }
.svc-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.svc-inner.narrow { max-width: 820px; }
.svc-head { max-width: 700px; margin-bottom: 44px; }
.svc-head .label { margin-bottom: 16px; }
.svc-head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px,3.2vw,46px); color: var(--navy); line-height: 1.12; }
.svc-head p { color: var(--n700); font-size: 16px; line-height: 1.7; margin-top: 16px; }

/* ── hero value props (4) ──────────────────────────── */
.svc-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
.svc-value { background: var(--off-white); border: 1px solid var(--n200); padding: 30px 26px; position: relative; }
.svc-value::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); }
.svc-value h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--navy); margin-bottom: 10px; line-height: 1.25; }
.svc-value p { font-size: 15px; font-weight: 400; color: var(--n500-aa); line-height: 1.6; }

/* ── lead intro prose ──────────────────────────────── */
.svc-lead p { font-size: 18px; line-height: 1.8; color: var(--n700); margin-bottom: 22px; }
.svc-lead p:last-child { margin-bottom: 0; }
.svc-lead p.drop::first-letter { font-family: var(--serif); font-size: 3.6em; line-height: .8; float: left; padding-right: .1em; color: var(--gold); font-weight: 400; }

/* ── attorney leadership / inline section links ────── */
.svc-biolinks { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 26px; }
.svc-biolinks a { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); display: inline-flex; gap: 6px; transition: color .2s; }
.svc-biolinks a:hover { color: var(--gold); }

/* ── accidents we handle ───────────────────────────── */
.svc-handle-sub { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 26px; }
.svc-handle { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px 32px; list-style: none; }
.svc-handle li { position: relative; padding-left: 20px; color: var(--n700); font-size: 15px; line-height: 1.5; }
.svc-handle li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }

/* ── supply-chain liability table ──────────────────── */
.svc-table-intro { color: var(--n700); font-size: 16px; line-height: 1.7; max-width: 760px; margin-bottom: 32px; }
.svc-table-wrap { overflow-x: auto; overflow-y: hidden; }  /* overflow-y pinned: unset, CSS computes it to auto and any stray vertical overflow turns the table into a wheel trap (see .practice-rail-wrap, 3.29.1) */
.svc-table { width: 100%; border-collapse: collapse; background: var(--n0); border: 1px solid var(--n200); font-size: 15px; }
.svc-table th, .svc-table td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--n200); }
.svc-table thead th { font-family: var(--sans); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); background: var(--off-white); border-bottom: 2px solid var(--gold); font-weight: 600; }
.svc-table tbody th { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--navy); width: 16%; white-space: nowrap; }
.svc-table tbody td { color: var(--n700); line-height: 1.55; }
.svc-table tbody tr:last-child th, .svc-table tbody tr:last-child td { border-bottom: none; }

/* ── Supreme Court callout ─────────────────────────── */
.svc-scotus { margin-top: 32px; background: var(--off-white); border: 1px solid var(--n200); border-left: 3px solid var(--gold); padding: 28px 30px; }
.svc-scotus .tag { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--off-white); background: var(--burgundy); padding: 5px 12px; margin-bottom: 14px; }
.svc-scotus h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--navy); margin-bottom: 10px; }
.svc-scotus p { color: var(--n700); font-size: 15px; line-height: 1.7; }

/* ── "law in plain English" blocks ─────────────────── */
.svc-law-block { border-left: 3px solid var(--gold); padding-left: 28px; margin-bottom: 36px; }
.svc-law-block:last-child { margin-bottom: 0; }
.svc-law-block h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--navy); margin-bottom: 12px; }
.svc-law-block p { color: var(--n700); font-size: 16px; line-height: 1.8; }
.svc-law-block em { font-style: italic; }

/* ── results: 3-up variant (reuses homepage .result-card) ── */
.results-grid.cols3 { grid-template-columns: repeat(3,1fr); }

/* ── FAQ accordion ─────────────────────────────────── */
.svc-faq { border-bottom: 1px solid var(--n200); }
.svc-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--navy); line-height: 1.3; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary span { flex: 1; }
.svc-faq summary::after { content: "+"; font-family: var(--sans); color: var(--gold); font-size: 24px; font-weight: 300; flex-shrink: 0; line-height: 1; }
.svc-faq[open] summary::after { content: "–"; }
.svc-faq .svc-faq-a { padding: 0 0 24px; }
.svc-faq .svc-faq-a p { color: var(--n700); font-size: 16px; line-height: 1.8; }
.svc-faq .svc-faq-a a { color: var(--gold); text-decoration: underline; }
.svc-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── go deeper (spokes) ────────────────────────────── */
.svc-spokes-list { list-style: none; }
.svc-spoke { border-bottom: 1px solid var(--n200); padding: 20px 0; }
.svc-spoke:last-child { border-bottom: none; }
.svc-spoke a { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--navy); transition: color .2s; }
.svc-spoke a:hover { color: var(--gold); }
.svc-spoke span { display: block; font-size: 14px; color: var(--n500); margin-top: 4px; }

/* ── geo corridors ─────────────────────────────────── */
.svc-geo-intro { color: var(--n700); font-size: 16px; line-height: 1.7; max-width: 760px; margin-bottom: 26px; }
.svc-geo { list-style: none; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 32px; }
.svc-geo li { position: relative; padding-left: 20px; font-family: var(--serif); font-size: 17px; color: var(--navy); }
.svc-geo li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }

/* ── responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
  .svc-values { grid-template-columns: repeat(2,1fr); }
  .svc-handle { grid-template-columns: repeat(2,1fr); }
  .results-grid.cols3 { grid-template-columns: repeat(2,1fr); }
  /* drop the bleed image on tablet/mobile; text goes full width */
  .page-hero { min-height: auto; display: block; padding: calc(var(--nav-h) + clamp(44px,7vw,72px)) 0 clamp(44px,7vw,72px); }
  .page-hero-content { max-width: none; }
  .page-hero-bleed { display: none; }
}
@media (max-width: 680px) {
  .svc-values { grid-template-columns: 1fr; }
  .svc-handle { grid-template-columns: 1fr; }
  .results-grid.cols3 { grid-template-columns: 1fr; }
  .svc-geo { grid-template-columns: 1fr; }
  .svc-table tbody th { white-space: normal; width: auto; }
  .svc-table th, .svc-table td { padding: 14px 14px; }
  .page-hero h1 { max-width: none; }
}