/* Page-level components shared by the hubs, the service pages and the
   standalone pages. Chrome lives in site.css.

   Every size is the board's own desktop value at 1440, scaled with clamp()
   down to the mobile board's value at 390. Build plan section 5: desktop
   sections 100px top and bottom with 80px sides, mobile 48px by 16px,
   buttons 52-58px, touch targets at least 44px, form inputs 16px. */

/* ---------------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  /* The link carries the 44px tap-target floor and centres its own text; the
     separator and the current page are plain spans, which stretch to that
     height and sit at the top of it. Without this they read as a different
     baseline from the link beside them. */
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #D9C9C2;
}
.crumb a { color: #D9C9C2; text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb [aria-current] { color: #fff; font-weight: 600; }
.crumb--ink { color: var(--muted); }
.crumb--ink a { color: var(--muted); }
.crumb--ink a:hover { color: var(--red); }
.crumb--ink [aria-current] { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Practice-page hero. One oxblood band with the texture behind it and the
   rooster watermark over it, exactly as the hub and service boards show.
   --------------------------------------------------------------------------- */
.phero {
  position: relative;
  background: var(--oxblood-deep);
  overflow: hidden;
  padding: clamp(28px, 3.9vw, 56px) 0 clamp(40px, 5.56vw, 80px);
  color: #fff;
  /* The headline size each board declares. 86px is what most of them say; the
     ones that differ set their own below or, on the service pages, from the
     board's own value carried in the page data. */
  --h1-max: 86px;
}
.phero--hub { --h1-max: 84px; }   /* PI hub board */
.phero--post { --h1-max: 80px; }  /* Blog post board */
.phero--loc { --h1-max: 80px; }   /* Location boards */
.phero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .9;
}
.phero__mark {
  position: absolute;
  left: 26%;
  top: 120px;
  width: 680px;
  height: 680px;
  max-width: none;
  opacity: .2;
  pointer-events: none;
}
.phero__in { position: relative; }
/* Where the eyebrow follows the breadcrumb directly, as on the post and
   article heroes, it needs the gap the grid gives it elsewhere. */
.crumb + .eyebrow,
.crumb + .ihero__eyebrow { margin-top: clamp(22px, 2.4vw, 34px); }
.phero__grid {
  margin-top: clamp(22px, 2.4vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: clamp(28px, 5.56vw, 80px);
  align-items: start;
}
.phero__col { display: flex; flex-direction: column; }
.phero .lede { max-width: 560px; margin-top: 20px; color: var(--on-dark-3); }
.phero__costs {
  margin: 8px 0 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-2);
}
.phero__cta {
  margin-top: clamp(22px, 2.4vw, 34px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.53vw, 22px);
  flex-wrap: wrap;
}
.phero__tool { min-width: 0; }

/* Check lines under the hero copy */
.checks {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The tick sits out of the text flow rather than being a flex item. As a
   flex row, any inline markup in the label - a <span lang="es">, a link -
   becomes its own flex item and picks up the gap, which opens a space
   before the punctuation that follows it. */
.checks li {
  position: relative;
  padding-left: 34px;
  font-size: clamp(15px, 1.18vw, 17px);
  font-weight: 600;
  line-height: 1.45;
}
.checks li > svg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* "Call 24/7" + number, used in every hero and CTA band */
.telblock {
  display: flex;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
  min-height: 44px;
  justify-content: center;
}
.telblock span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink);
}
.telblock strong {
  font-family: var(--cond);
  font-size: clamp(26px, 2.22vw, 32px);
  font-weight: 700;
}
.telblock:hover strong { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Recent recoveries banner. Only rendered once the firm's approved figures
   are in (build plan section 9), so it never ships with a placeholder.
   --------------------------------------------------------------------------- */
.recov { background: var(--red); display: flex; align-items: stretch; overflow: hidden; }
.recov__hd {
  width: 260px;
  flex-shrink: 0;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 0 18px var(--pad-x);
  box-sizing: border-box;
}
.recov__hd p {
  margin: 0;
  font-family: var(--cond);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.recov__hd a, .recov__hd .is-plain {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
  text-decoration: none;
}
.recov__note {
  margin: 14px auto 0;
  font-size: 13px;
  color: var(--muted);
}

/* The figures strip. The board runs the row off the right edge like a
   ticker, so it is wider than the band on purpose; making it a real
   scroller rather than a clipped box keeps the last figure reachable and
   keeps the sweep honest - clipped text is a bug, a scroller is not. */
.recov { min-height: 112px; }
.recov__track {
  flex-grow: 1; display: flex; align-items: center; gap: 36px;
  padding-left: 40px; white-space: nowrap; color: #FFF;
  overflow-x: auto; scrollbar-width: none;
}
.recov__track::-webkit-scrollbar { display: none; }
.recov__item { display: flex; align-items: baseline; gap: 12px; flex: none; }
.recov__amt { font-family: var(--cond); font-size: 44px; font-weight: 700; line-height: 1; }
.recov__what { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #FFE1DE; }
.recov__sep { width: 34px; height: 34px; flex: none; filter: brightness(0) invert(1); opacity: .6; }

/* ---------------------------------------------------------------------------
   Credentials bar
   --------------------------------------------------------------------------- */
.trustbar { background: var(--cream-2); padding: clamp(20px, 2.1vw, 30px) 0 0; }
.trustbar__row {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trustbar__cell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px clamp(14px, 1.8vw, 26px);
  min-height: 84px;
  box-sizing: border-box;
}
.trustbar__cell + .trustbar__cell { border-left: 1px solid var(--border); }
.trustbar__cell svg { flex-shrink: 0; }
.trustbar__cell span { display: flex; flex-direction: column; min-width: 0; }
.trustbar__cell strong { font-size: 16px; font-weight: 700; }
.trustbar__cell em { font-style: normal; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Four-card service grid
   --------------------------------------------------------------------------- */
.cards4 {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.scard {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.scard > img { width: 100%; height: 190px; object-fit: cover; display: block; }
.scard__b { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.scard__b h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(26px, 2.08vw, 30px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--oxblood);
}
.scard__b > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.scard__links { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.scard__links li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.scard__links svg { flex-shrink: 0; }
.scard__links a { color: var(--ink); text-decoration: none; }
.scard__links a:hover { color: var(--red); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Two-column splits
   --------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(28px, 4.17vw, 60px); align-items: start; }
.split--560 { grid-template-columns: minmax(0, 1fr) 560px; gap: clamp(28px, 5.56vw, 80px); }
.split--faq { grid-template-columns: 420px minmax(0, 1fr); }
.split--center { align-items: center; }
.split__lede { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }

/* What your claim can include */
.dmg {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 36px;
}
.dmg__i {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.dmg__i strong { font-size: 19px; font-weight: 700; }
.dmg__i span { font-size: 16px; line-height: 1.55; color: var(--body); }

/* Texas deadlines card */
.deadlines {
  background: var(--ink);
  border-radius: 8px;
  padding: clamp(26px, 2.8vw, 40px) clamp(22px, 2.8vw, 40px) clamp(24px, 2.5vw, 36px);
  color: #fff;
}
.deadlines__h {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(28px, 2.36vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.deadlines__sub { margin: 4px 0 14px; font-size: 15px; color: var(--on-dark-2); }
.deadlines__r {
  display: flex;
  gap: clamp(14px, 1.53vw, 22px);
  padding: 20px 0;
  border-top: 1px solid var(--panel-border);
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-dark-3);
}
.deadlines__n {
  width: 110px;
  flex-shrink: 0;
  font-family: var(--cond);
  font-size: clamp(38px, 3.19vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: var(--red-bright);
}
.deadlines__fine {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
  font-size: 13px;
  color: var(--footer-muted);
}

/* ---------------------------------------------------------------------------
   Process band with the fee card
   --------------------------------------------------------------------------- */
.process { position: relative; overflow: hidden; }
.process__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .85;
}
.process__in { position: relative; }
/* The board sits the fee card beside the heading. flex-wrap let the heading
   take its full 1066px max-content width, which pushed the card onto its own
   line at every desktop size; min-width:0 lets the heading shrink instead.
   It wraps again at 1180px, where the card goes full width. */
.process__hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(26px, 4.17vw, 60px);
}
.process__hd > :first-child { min-width: 0; }
.feecard {
  width: 420px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 24px 26px;
  color: var(--text-2);
}
.feecard h3 {
  margin: 0 0 6px;
  font-family: var(--cond);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--red);
}
.feecard p { margin: 0; font-size: 15px; line-height: 1.55; }

.steps4 {
  margin: clamp(32px, 3.5vw, 50px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.67vw, 24px);
}
.steps4 li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 2px solid var(--red-bright);
  color: #fff;
}
.steps4__n {
  font-family: var(--cond);
  font-size: clamp(42px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: var(--red-bright);
}
.steps4 strong { font-size: 20px; font-weight: 700; }
.steps4 li > span:last-child { font-size: 16px; line-height: 1.55; color: var(--on-dark-3); }

/* ---------------------------------------------------------------------------
   Reviews
   --------------------------------------------------------------------------- */
.revgrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: 420px repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.revgrid--novideo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rev {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 2.08vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rev__q { margin: 0; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.5; color: var(--ink); }
.rev__by {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.rev__src {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.revvid {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius);
  background: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}
.revvid__play {
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -38px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 0;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* The board's tile: the rooster watermark bleeds off the top right corner and
   the caption sits under the title. Both need position:relative so they paint
   above the watermark. */
.revvid .gallo { position: absolute; right: -60px; top: -40px; width: 300px; height: 300px; opacity: .4; }
.revvid__sub { position: relative; margin: 6px 0 0; font-size: 14px; color: var(--on-dark-2); }
.revvid__h {
  position: relative;
  margin: 0;
  font-family: var(--cond);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.revgrid__more { margin: clamp(20px, 2.1vw, 30px) 0 0; }
.revgrid__more a, .revgrid__more .is-plain {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.revgrid__more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Service area
   --------------------------------------------------------------------------- */
.area {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: clamp(40px, 4.86vw, 70px) 0;
}
.area__in { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: clamp(28px, 4.17vw, 60px); align-items: center; }
.area__txt p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.area__pills { display: flex; flex-wrap: wrap; gap: 12px; }
.area__pills .pill { min-height: 48px; }
.pill--dark {
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}
.pill--dark:hover { background: var(--oxblood); color: #fff; }
.pill--out {
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
.pill--out:hover { border-color: var(--red); color: var(--red); }
.pill--out.is-plain { color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--border-2); }
.faq__i { border-bottom: 1px solid var(--border-2); padding: 22px 0; }
.faq__i summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-size: clamp(18px, 1.46vw, 21px);
  font-weight: 700;
  min-height: 28px;
}
.faq__ic { flex-shrink: 0; display: flex; }
/* One icon swaps for the other, so the control reads open or closed without
   relying on the browser's own marker. */
.faq__i .faq__ic svg:last-child { display: none; }
.faq__i[open] .faq__ic svg:first-child { display: none; }
.faq__i[open] .faq__ic svg:last-child { display: block; }
.faq__a { max-width: 720px; }
.faq__a p { margin: 12px 0 0; font-size: 17px; line-height: 1.65; color: var(--body); }
.faq__a ul, .faq__a ol { margin: 12px 0 0; padding-left: 22px; font-size: 17px; line-height: 1.65; color: var(--body); }
.faq__a li + li { margin-top: 6px; }

/* ---------------------------------------------------------------------------
   Closing CTA band
   --------------------------------------------------------------------------- */
.ctaband { background: var(--red); padding: clamp(40px, 4.44vw, 64px) 0; color: #fff; }
.ctaband__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 2.8vw, 40px);
  flex-wrap: wrap;
}
.ctaband .h-display { color: #fff; }
.ctaband__sub { margin: 8px 0 0; font-size: 18px; color: #FFE1DE; }
.ctaband__btns { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ctaband__tel {
  min-height: 60px;
  padding: 0 clamp(20px, 2.08vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-family: var(--cond);
  font-size: clamp(23px, 1.94vw, 28px);
  font-weight: 700;
}
.ctaband__tel:hover { background: var(--ink-deep); color: #fff; }
.ctaband .btn--white { min-height: 60px; }

/* ---------------------------------------------------------------------------
   "How much is my case worth?" intake tool.

   Rendered as one form with all seven questions present so it works without
   JavaScript; casevalue.js then shows one step at a time. [hidden] has to
   win over the flex rule the steps carry, which is why it is !important in
   site.css.
   --------------------------------------------------------------------------- */
.cv {
  background: var(--cream);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  color: var(--ink);
  text-align: left;
}
.cv__hd {
  position: relative;
  background: var(--oxblood);
  padding: 24px clamp(20px, 2.2vw, 32px) 20px;
  background-image: url("/images/rooster-watermark.webp");
  background-repeat: no-repeat;
  background-position: right -40px top -50px;
  background-size: 220px 220px;
}
.cv__title {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(28px, 2.36vw, 34px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.cv__sub { margin: 4px 0 0; font-size: 15px; color: var(--on-dark-3); }
.cv__meter { padding: 18px clamp(20px, 2.2vw, 32px) 0; display: flex; flex-direction: column; gap: 10px; }
.cv__meterrow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cv__track { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.cv__fill { height: 6px; border-radius: 3px; background: var(--red); transition: width .25s ease; }

.cv__body { flex-grow: 1; padding: 22px clamp(20px, 2.2vw, 32px) 0; }
.cv__step { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cv__q { display: flex; flex-direction: column; gap: 6px; }
.cv__qh {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(26px, 2.08vw, 30px);
  font-weight: 700;
  line-height: 1.05;
}
.cv__qhint { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }

.cv__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cv__opt {
  min-height: 60px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.cv__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv__dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  box-sizing: border-box;
}
.cv__opt:hover { border-color: var(--border-2); }
.cv__opt:has(input:checked) { border-color: var(--red); background: #FDECEA; }
.cv__opt:has(input:checked) .cv__dot { border-color: var(--red); background: var(--red); }
.cv__opt:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

.cv__date, .cv__fields label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.cv__date input {
  height: 56px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
}
.cv__check {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.cv__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv__check span {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border-2);
  box-sizing: border-box;
  flex-shrink: 0;
}
.cv__check:has(input:checked) { border-color: var(--red); }
.cv__check:has(input:checked) span { border-color: var(--red); background: var(--red); }

.cv__step--last { gap: 12px; }
.cv__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cv__chips li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.cv__pick { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cv__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cv__times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cv__day, .cv__time {
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  cursor: pointer;
}
.cv__day { height: 52px; }
.cv__time { height: 44px; font-size: 14px; }
.cv__day input, .cv__time input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv__day small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cv__day b { font-size: 17px; font-weight: 700; }
.cv__day:has(input:checked), .cv__time:has(input:checked) { border-color: var(--red); background: var(--red); color: #fff; }
.cv__day:has(input:focus-visible), .cv__time:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

.cv__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cv__fields label { gap: 5px; font-size: 13px; font-weight: 600; }
.cv__fields input {
  height: 44px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: #fff;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.cv__submit { width: 100%; min-height: 50px; justify-content: center; }
.cv__alt { margin: 0; font-size: 13px; color: var(--muted); }
.cv__alt a { font-weight: 700; }

.cv__ft {
  margin-top: 18px;
  min-height: 62px;
  flex-shrink: 0;
  padding: 10px clamp(20px, 2.2vw, 32px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cv__back {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.cv__next { min-height: 44px; }
.cv__or { font-size: 13px; color: var(--muted); }
.cv__or a { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar__cell:nth-child(odd) { border-left: 0; }
  .trustbar__cell:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .phero__mark { left: auto; right: -140px; }
  .split--560, .split--faq, .area__in { grid-template-columns: minmax(0, 1fr); }
  .revgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revvid { grid-column: 1 / -1; min-height: 280px; }
  .process__hd { flex-wrap: wrap; }
  .feecard { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Mobile. Build plan section 5: the hero stacks, the tool sits under the hero
   CTA, case-type rows become one column and the trust cells stack.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .cards4, .steps4, .revgrid, .dmg { grid-template-columns: minmax(0, 1fr); }
  .trustbar__row { grid-template-columns: minmax(0, 1fr); }
  .trustbar__cell { border-left: 0; }
  .trustbar__cell + .trustbar__cell { border-top: 1px solid var(--border); }
  .phero__mark { width: 420px; height: 420px; top: 60px; right: -180px; }
  .phero__cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .phero__cta .btn { justify-content: center; }
  .telblock { align-items: flex-start; }
  .cv__opts { grid-template-columns: minmax(0, 1fr); }
  .cv__fields { grid-template-columns: minmax(0, 1fr); }
  .cv__days, .cv__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The recoveries band is desktop only. There is no mobile board for this
     page and none of the mobile layouts earned its space: full-width rows
     made a slab of red, a scroller cut the second figure mid-word, and two by
     two still gave four placeholder amounts most of a screen. The disclaimer
     goes with it, since it only explains these figures. */
  .recov, .recov__note { display: none; }
  .ctaband__btns { width: 100%; flex-direction: column; align-items: stretch; }
  .ctaband__tel { justify-content: center; }
  .ctaband .btn--white { justify-content: center; }
  .deadlines__n { width: 84px; }
  .faq__i summary { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   Attorney cards, office cards and the results disclaimer. Shared by the
   home, About us, Attorneys and Contact pages.
   --------------------------------------------------------------------------- */
/* The board gives the card a border on the cream-2 fill, not a plain cream
   block, and the staff card is the dark one with the rooster behind it. */
.person {
  background: var(--cream-2); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
}
.person > img { width: 100%; height: 400px; object-fit: cover; object-position: center top; }
.person__ph {
  width: 100%; height: 400px; background: var(--surface-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.person__mono {
  width: 120px; height: 120px; border-radius: 50%; background: var(--oxblood);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-size: 48px; font-weight: 700; color: var(--pink);
}
/* A 400px tile is the right shape for a portrait. For the people Vale named
   who came with neither a photo nor a work history it is 400px of nothing,
   and four of them together read as a broken page rather than a team. The
   compact card keeps the same type and spacing on a much shorter tile, so a
   row of them sits under the portrait rows without shouting. They grow back
   into full cards on their own as soon as the firm sends the photos. */
.person--compact .person__ph { height: 150px; }
.person--compact .person__mono { width: 72px; height: 72px; font-size: 28px; }
.person__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.person__name { font-family: var(--cond); font-size: 30px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.person__role { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.person__bio { font-size: 15px; line-height: 1.5; color: var(--body); }

@media (max-width: 1100px) {
  .team__grid { grid-template-columns: 1fr; gap: 32px; }
  .team .gallo { display: none; }
}
@media (max-width: 640px) {
  .team__cards > div:first-child { gap: 12px; }
  .person > img, .person__ph { height: 200px; }
  .person__mono { width: 80px; height: 80px; font-size: 32px; }
  .person__body { padding: 12px 12px 14px; gap: 2px; }
  .person__name { font-size: 21px; }
  .person__role { font-size: 12px; letter-spacing: .08em; }
  .person__bio { display: none; }
  .team__points, .team__copy > p { font-size: 15px; }
}

.office {
  background: var(--cream-2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.office__map {
  height: 190px; background: var(--map-bg); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.office__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.office__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; }
.office__name { font-family: var(--cond); font-size: 32px; font-weight: 700; text-transform: uppercase; }
.office__addr { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.office__tel { font-size: 16px; font-weight: 600; }
.office__tel a { color: var(--ink); text-decoration: none; }
.office__hours { font-size: 14px; color: var(--muted); }
.office__dir {
  margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}

.disclaimer { margin: 0; font-size: 13px; color: var(--muted); }