/* The injury service template.
   Boards: "Service page template - Car accidents", "Truck accident service
   page" + mobile parts 1 and 2, and the ten sibling service boards, which
   share this layout. */

/* ---------------------------------------------------------------------------
   Hero. The service boards wash a practice photo in from the left behind the
   ink background, rather than the oxblood texture the hub uses.
   --------------------------------------------------------------------------- */
.phero--service { background: var(--ink); padding: clamp(24px, 2.8vw, 40px) 0 clamp(40px, 4.44vw, 64px); }
.phero__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 900px;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .28;
}
.phero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 18, 19, .55) 0%, rgba(26, 18, 19, .85) 45%, rgba(26, 18, 19, 1) 62%);
}

/* ---------------------------------------------------------------------------
   "Talk to us" card - the hero card on the wrongful death, medical
   malpractice and sexual abuse boards.
   --------------------------------------------------------------------------- */
.tcard {
  background: var(--cream);
  border-radius: 8px;
  padding: clamp(22px, 2.2vw, 32px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tcard__h {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(28px, 2.36vw, 34px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.tcard__sub { margin: 0; font-size: 15px; color: var(--body); }
.tcard__call, .tcard__wa {
  min-height: 56px;
  padding: 10px 18px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
}
.tcard__call { background: #FDECEA; border: 1.5px solid var(--red); color: var(--red); }
.tcard__call span { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tcard__call strong { font-family: var(--cond); font-size: 24px; color: var(--red); }
.tcard__wa { border: 1.5px solid var(--border-2); background: #fff; color: var(--ink); font-size: 15px; }
.tcard__wa:hover, .tcard__call:hover { border-color: var(--red); }
.tcard__or { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tcard .field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tcard .field input, .tcard .field textarea {
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: #fff;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.tcard .field input { height: 44px; padding: 0 12px; }
.tcard__lang { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.tcard__lang legend { padding: 0; font-size: 13px; font-weight: 700; color: var(--text-2); }
.tcard__lang label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }
.tcard__submit { width: 100%; justify-content: center; min-height: 52px; }
.tcard__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Homeowner insurance: the board's "Claim review" form. A dark band with the
   rooster mark heads it; damage choices are tiles, the claim stage pills. */
.ccard { padding: 0; gap: 0; overflow: hidden; }
.ccard__hd { position: relative; overflow: hidden; background: #3A0B0D; padding: 24px clamp(20px, 2.2vw, 32px) 20px; display: flex; flex-direction: column; gap: 4px; }
.ccard__mark { position: absolute; right: -40px; top: -50px; width: 220px; height: 220px; opacity: .45; pointer-events: none; }
.ccard__h { position: relative; margin: 0; font-family: var(--cond); font-size: clamp(28px, 2.36vw, 34px); font-weight: 700; line-height: 1; text-transform: uppercase; color: #FFF; }
.ccard__sub { position: relative; margin: 0; font-size: 15px; color: var(--on-dark-3); }
.ccard__body { padding: 20px clamp(20px, 2.2vw, 32px) 22px; display: flex; flex-direction: column; gap: 18px; }
.ccard__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.ccard__group legend { margin: 0 0 10px; padding: 0; font-family: var(--cond); font-size: 24px; font-weight: 700; line-height: 1.05; color: var(--ink); }
.ccard__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ccard__group--tiles .ccard__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccard__opts label {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px;
  border: 1.5px solid var(--border); border-radius: 6px; background: #FFF;
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); cursor: pointer;
}
.ccard__group--pills .ccard__opts label { min-height: 44px; padding: 0 14px; border-color: var(--border-2); border-radius: 999px; font-size: 14px; gap: 8px; }
.ccard__opts input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.ccard__opts label:has(input:checked) { border-color: var(--red); background: #FDECEA; }
.ccard__opts label:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.ccard__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ccard .field input { height: 46px; }
.ccard__foot { margin: 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.ccard__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--red); font-weight: 700; }
@media (max-width: 560px) {
  .ccard__group--tiles .ccard__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Proof row
   --------------------------------------------------------------------------- */
.proof { background: var(--cream); padding: clamp(28px, 3.1vw, 44px) 0; border-bottom: 1px solid var(--border); }
.proof__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
  align-items: stretch;
}
.proof__row--reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The board keeps the figures on cream and darkens the review beside them,
   which was the other way round here: the money cards were ink and the
   quote was the pale one. */
.proof__fig {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 2.08vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proof__label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

/* Only the quote that sits alongside figures goes dark; the two-review
   fallback stays as a pair of pale cards. */
.proof__row:not(.proof__row--reviews) .rev { background: #3A0B0D; border-color: #3A0B0D; }
.proof__row:not(.proof__row--reviews) .rev .rev__q { color: #FFF; }
.proof__row:not(.proof__row--reviews) .rev .rev__by { color: var(--on-dark-3); }
.proof__row:not(.proof__row--reviews) .rev .rev__src { color: var(--on-dark-2); }
.proof__amt { margin: 0; font-family: var(--cond); font-size: clamp(40px, 3.3vw, 48px); font-weight: 700; line-height: 1; }
.proof__note { margin: 16px auto 0; font-size: 13px; color: var(--muted); }
.proof__help { display: flex; flex-direction: column; gap: 10px; grid-column: span 2; }
.proof__help p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }

/* ---------------------------------------------------------------------------
   When to call
   --------------------------------------------------------------------------- */
.bodycopy { margin: 20px 0 0; font-size: clamp(16px, 1.32vw, 18px); line-height: 1.65; color: var(--body); max-width: 700px; }
/* The board gives this no card: the points are ruled rows under a heavier
   top rule, sitting beside the copy rather than boxed away from it. */
.callnow {
  background: none;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  padding: 0;
}
.callnow h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.callnow ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.callnow li { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border-2); font-size: 16px; line-height: 1.5; }
.callnow li > svg { flex: none; }
.callnow li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   Why this firm
   --------------------------------------------------------------------------- */
.benefits {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  /* The board runs these in one row. Pages carry four or five, so a row
     holds them without cramping; the count comes from the template so a
     longer list would still lay out cleanly rather than stranding items. */
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(20px, 2.08vw, 30px);
}
.benefits__i { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px solid var(--ink); }
/* The rating cell some boards close the band with. */
.benefits__i--rev strong { font-size: 20px; }
.benefits__i--rev a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); text-decoration: none; }
.benefits__i--rev a:hover { text-decoration: underline; }
.benefits__i strong { font-size: 19px; font-weight: 700; }
.benefits__i p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }

/* ---------------------------------------------------------------------------
   How we handle it
   --------------------------------------------------------------------------- */
.howgrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  gap: clamp(20px, 2.5vw, 36px);
}
.howgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.howgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.howgrid--1 { grid-template-columns: minmax(0, 1fr); }

/* The paired band on the board is two cards, the second in ink, each with a
   display size heading and its points as plain lines. */
/* Three groups is the board's handling band: the first column plain, the
   second an ink card and the third a cream one, so the evidence list is the
   thing the eye lands on. */
.howgrid--3 .howcol :where(h2, h3) { font-size: clamp(26px, 2.36vw, 34px); }
.howgrid--3 .howcol:first-child { padding-right: 16px; }

.howgrid--cards { gap: 24px; }
.howgrid--cards .howcol {
  background: var(--cream-2);
  border-radius: 8px;
  padding: clamp(26px, 2.8vw, 40px);
}
.howgrid--cards .howcol :where(h2, h3) { font-size: clamp(30px, 3.05vw, 44px); line-height: 1; margin-bottom: 16px; color: var(--ink); }
.howgrid--cards .howcol:nth-child(2) { background: var(--ink); }
.howgrid--cards .howcol:nth-child(2) :where(h2, h3) { color: #FFF; }
.howgrid--cards .howcol:nth-child(2) :where(p, li) { color: var(--on-dark-3); }
.howgrid--cards .ticks li { padding-left: 0; font-size: 16px; line-height: 1.6; }
.howcol :where(h2, h3) {
  margin: 0 0 12px;
  font-family: var(--cond);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--oxblood);
}
.howcol p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--body); }

/* Named, not positional. Keying these off nth-child darkened whichever
   column happened to sit second, and on the immigration template that is
   the fees card, whose dark text then vanished against it. */
.howcol--ink, .howcol--soft {
  border-radius: 8px;
  padding: clamp(24px, 2.2vw, 32px);
}
.howcol--ink { background: var(--ink); }
/* Two classes, to match .howgrid--cards .howcol, which sets the ink colour
   and would otherwise win and leave this heading dark on a dark card. */
.howcol.howcol--ink :where(h2, h3) { color: #FFF; }
.howcol--ink :where(p, li) { color: var(--on-dark-3); }
.howcol--soft { background: var(--cream-2); }

.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; }
.ticks li > svg { position: absolute; left: 0; top: 3px; }

/* ---------------------------------------------------------------------------
   Case types. The mobile boards turn this into a swipe row.
   --------------------------------------------------------------------------- */
.typegrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.typecard {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 2.08vw, 28px);
}
.typecard h3 {
  margin: 0 0 8px;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.typecard { display: flex; flex-direction: column; }
.typecard p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
/* Links from a case type to its own service page, under the card copy. */
.typecard .typecard__l { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 0 22px; }
.typecard__l a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); text-decoration: none;
}
.typecard__l a:hover { color: var(--red-hover); }

/* ---------------------------------------------------------------------------
   The law strip
   --------------------------------------------------------------------------- */
.lawstrip { position: relative; overflow: hidden; }
.lawstrip__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .85; }
.lawstrip__in { position: relative; }
.lawstrip__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 2.8vw, 40px); flex-wrap: wrap; }
/* Pair the note with the heading, the way .sechead does; both children were
   auto width so the heading filled the row and pushed it underneath. */
.lawstrip__hd > :first-child { flex: 1 1 560px; min-width: 0; }
.lawstrip__fine { margin: 0; flex: 0 1 380px; max-width: 380px; font-size: 13px; line-height: 1.55; color: var(--on-dark-2); }
/* Wrongful death, medical malpractice and sexual abuse answer the heading's
   question beside it; the fine print then takes its own row underneath. */
.lawstrip__sub { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--on-dark-3); }
.lawstrip__lede { margin: 0; flex: 0 1 520px; max-width: 520px; font-size: 18px; line-height: 1.65; color: var(--on-dark-3); }
.lawstrip__lede + .lawstrip__fine { flex-basis: 100%; max-width: none; }
.lawgrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(20px, 2.08vw, 30px);
}
.lawcell { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px solid var(--red-bright); color: #fff; }
.lawcell__n { margin: 0; font-family: var(--cond); font-size: clamp(34px, 2.8vw, 40px); font-weight: 700; line-height: 1; color: var(--red-bright); }
.lawcell__t { margin: 0; font-size: 16px; line-height: 1.55; color: var(--on-dark-3); }
.lawcell__c { margin: 0; font-size: 13px; }
.lawcell__c a { color: var(--pink); }
.lawnotes {
  margin-top: clamp(24px, 2.5vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.lawnotes p {
  margin: 0;
  padding: 18px 20px;
  background: rgba(0, 0, 0, .25);
  border-left: 3px solid var(--red-bright);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-3);
}
.lawnotes a { color: var(--pink); }

/* ---------------------------------------------------------------------------
   From first call to resolution
   --------------------------------------------------------------------------- */
.stepsrow {
  margin: clamp(28px, 3.1vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.stepsrow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stepsrow li { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px solid var(--red); }
.stepsrow__n { font-family: var(--cond); font-size: clamp(34px, 2.8vw, 40px); font-weight: 700; line-height: 1; color: var(--red); }
/* The step number with its time label on the right, as the boards draw it. */
.stepsrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stepsrow__ph { text-align: right; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stepsrow h3 { margin: 0; font-size: 19px; font-weight: 700; }
.stepsrow p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }

/* ---------------------------------------------------------------------------
   Fees and consultation
   --------------------------------------------------------------------------- */
.feeband__in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(24px, 2.8vw, 40px); align-items: start; }
.feeband__main {
  position: relative;
  background: var(--ink);
  border-radius: 8px;
  overflow: hidden;
  padding: clamp(26px, 3.1vw, 44px);
  color: #fff;
}
.feeband__mark { position: absolute; right: -60px; top: -50px; width: 300px; height: 300px; max-width: none; opacity: .3; }
.feeband__txt { position: relative; }
.feeband__txt .h-display { color: #fff; }
.feeband__fee { margin: 20px 0 0; font-size: clamp(18px, 1.46vw, 21px); font-weight: 700; line-height: 1.5; }
.feeband__costs { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--on-dark-2); }
.feeband__txt p { color: var(--on-dark-3); }
.feeband__txt > p:not(.feeband__fee):not(.feeband__costs):not(.eyebrow) { margin: 14px 0 0; font-size: 16px; line-height: 1.65; }
.feeband__cta { margin-top: clamp(22px, 2.2vw, 30px); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.reach {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 2.2vw, 30px);
}
.reach h3 {
  margin: 0 0 14px;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  text-transform: uppercase;
}
.reach dl { margin: 0; display: flex; flex-direction: column; }
.reach dt {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.reach dd { margin: 4px 0 12px; font-size: 15px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Attorney + related
   --------------------------------------------------------------------------- */
.atty { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(24px, 2.8vw, 40px); align-items: start; }
.atty__card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}
.atty__card > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.atty__body { padding: clamp(22px, 2.2vw, 30px); }
.atty__bio { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.atty__rev { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.atty__link { margin: 16px 0 0; }
.atty__link a, .atty__link .is-plain {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.atty__link a:hover { text-decoration: underline; }
/* The board sets the heading plain and the cases as a two by two grid of
   small cards, rather than a list boxed inside one panel. */
.atty__related { background: none; border: 0; padding: 0; }
/* Scoped to the attorney band. The same list also runs on the results pages,
   on a dark background, where a cream card behind white text is unreadable. */
.atty__related .relinks {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.atty__related .relinks li {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.atty__related .relinks li:hover { border-color: var(--red); }
.relinks a, .relinks .is-plain {
  min-height: 48px;
}
.atty__related .relinks a {
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}
.relinks a:hover { color: var(--red); }
.relinks .is-plain { color: var(--muted); }
.relinks .is-plain svg { display: none; }
.atty__serving { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--body); }

/* ---------------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .phero__photo { width: 100%; }
  .phero__wash { background: linear-gradient(90deg, rgba(26, 18, 19, .7) 0%, rgba(26, 18, 19, .92) 55%, rgba(26, 18, 19, 1) 100%); }
  .benefits, .howgrid--3, .typegrid, .lawgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepsrow, .stepsrow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feeband__in, .atty { grid-template-columns: minmax(0, 1fr); }
  .proof__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Mobile. Build plan: the case types become a swipe row and the hero photo a
   band behind the top of the hero (mobile boards, part 1).
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .phero__photo { height: 300px; opacity: .34; }
  .phero__wash { background: linear-gradient(180deg, rgba(26, 18, 19, .4) 0%, rgba(26, 18, 19, .92) 60%, rgba(26, 18, 19, 1) 100%); }
  .benefits, .howgrid--2, .howgrid--3, .lawgrid, .lawnotes, .stepsrow, .stepsrow--4, .proof__row, .proof__row--reviews { grid-template-columns: minmax(0, 1fr); }
  .proof__help { grid-column: auto; }

  /* Swipe row: the cards keep their width and scroll sideways inside the
     page gutter, so nothing is cut off and the page itself never scrolls. */
  .typegrid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    padding-bottom: 6px;
  }
  .typecard { flex: 0 0 78%; scroll-snap-align: start; }

  .atty__card { grid-template-columns: minmax(0, 1fr); }
  /* The portrait is 582x728 and this box is about 345x320, so cover fits it
     by width and shows only the top 74% - anchored at the top, that keeps
     every pixel of headroom above his head and cuts him off at the hands.
     Taller, and dropped to the subject rather than the top edge: the crop
     now starts below the empty space and keeps the whole pose. */
  .atty__card > img { height: 400px; object-position: 50% 30%; }
  .feeband__cta { flex-direction: column; align-items: stretch; }
  .feeband__cta .btn { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   The second heading in the "when to call" band, where a board has one, and
   the comparison table three boards use to set two kinds of claim side by
   side. Both were being dropped on extraction.
   --------------------------------------------------------------------------- */
.callnow__h {
  margin: 0 0 4px;
  font-family: var(--cond);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}

.cmptable { margin-top: clamp(20px, 2.1vw, 28px); overflow-x: auto; }
.cmptable table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmptable th, .cmptable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.cmptable thead th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--cond);
  font-size: 17px;
  text-transform: uppercase;
  color: var(--ink);
}
.cmptable tbody th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cmptable td { color: var(--body); }

/* ---------------------------------------------------------------------------
   The sexual abuse board's two bands in place of case figures: what to expect
   from the call, and the crisis lines. Both were dropped on extraction, the
   hotlines with them, which is why this is built rather than left out.
   --------------------------------------------------------------------------- */
.helpband__in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.08vw, 24px);
  align-items: start;
}
.helpcol {
  background: var(--cream-2);
  border-radius: 8px;
  padding: clamp(24px, 2.5vw, 34px);
}
.helpcol h2 {
  margin: 0 0 16px;
  font-family: var(--cond);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
.helpcol dl { margin: 0; display: flex; flex-direction: column; }
.helpcol dl > div { padding: 12px 0; border-top: 1px solid var(--border); }
.helpcol dl > div:first-child { border-top: 0; padding-top: 0; }
.helpcol dt { font-size: 16px; font-weight: 700; color: var(--ink); }
.helpcol dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.helpcol dd a { font-weight: 700; color: var(--red); }
.helpcol__note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.helpcol--ink { background: var(--ink); }
.helpcol--ink h2 { color: #FFF; }
.helpcol--ink dl > div { border-top-color: rgba(255, 255, 255, .14); }
.helpcol--ink dt { color: #FFF; }
.helpcol--ink dd { color: var(--on-dark-3); }
.helpcol--ink dd a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.helpcol--ink .helpcol__note { color: var(--on-dark-2); }
.helpcol--ink .helpcol__note a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .helpband__in { grid-template-columns: minmax(0, 1fr); }
}

/* Two lines with a check under the fee paragraphs (slip and fall, homeowner
   insurance), on the band's dark panel. */
.feeband__checks { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.feeband__checks li { display: flex; gap: 12px; font-size: 17px; font-weight: 600; line-height: 1.4; color: #FFF; }
.feeband__checks svg { flex: none; margin-top: 1px; }