/* Office and location pages.
   Boards: "Brownsville office page" and "Brownsville office page - mobile". */

.phero--loc { background: var(--oxblood-deep); }
/* Pharr's board washes a photograph in from the left over ink, the way the
   service heroes do, instead of the oxblood texture the others carry. */
.phero--locphoto { background: var(--ink); }
.phero--locphoto .phero__mark { display: none; }
.phero--loc .phero__mark { left: auto; right: 60px; bottom: 40px; top: auto; width: 460px; height: 460px; opacity: .35; }

/* ---------------------------------------------------------------------------
   The office card beside the hero: map, both addresses, the office line and
   the hours.
   --------------------------------------------------------------------------- */
.officecard {
  background: var(--cream);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  color: var(--ink);
}
.officecard__map { height: 220px; background: var(--map-bg); }
.officecard__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.officecard__body { padding: clamp(20px, 2.08vw, 26px); }
.officecard__h {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.officecard__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.officecard__list li { font-size: 15px; line-height: 1.5; color: var(--body); }
.officecard__list strong { color: var(--ink); }
.officecard__dl { margin: 18px 0 0; display: flex; flex-direction: column; }
.officecard__dl 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);
}
.officecard__dl dd { margin: 4px 0 12px; font-size: 16px; font-weight: 600; }
.officecard__dir {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.officecard__dir:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   The two practice columns
   --------------------------------------------------------------------------- */
.twoprac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.08vw, 30px); }
.pracol {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pracol > img { width: 100%; height: 220px; object-fit: cover; display: block; }
.pracol__b { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.pracol__b > p:not(.eyebrow) { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.pracol__fee { font-weight: 600; color: var(--text-2) !important; }

/* The board shows these as pill chips, not a list of underlined links, and
   runs the immigration card dark with the last chip filled. */
.pracchips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 10px; }
.pracchip {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pracchip:hover { border-color: var(--red); }
.pracchip--fill { background: var(--ink); border-color: var(--ink); color: #fff; }
.pracchip--fill:hover { background: #000; border-color: #000; }

/* Named, not nth-child: a positional rule once inked the wrong card. */
.pracol--ink { background: var(--ink); border-color: var(--ink); }
/* :where() keeps these at (0,1,0) so the chip classes still decide their own
   colours inside the dark card. */
.pracol--ink :where(.h-display, .pracol__b > p) { color: #fff; }
.pracol--ink :where(.pracol__b) > p:not(.eyebrow) { color: var(--on-dark-3); }
.pracol--ink .pracol__fee { color: var(--on-dark-2) !important; }
.pracol--ink .eyebrow { color: var(--pink); }
.pracol--ink .pracchip {
  /* --line-dark-2 is near-invisible against this fill; the board outlines
     these clearly, so the border is set here rather than inherited. */
  background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff;
}
.pracol--ink .pracchip:hover { border-color: #fff; }
.pracol--ink .pracchip--fill { background: #fff; border-color: #fff; color: var(--ink); }
.pracol--ink .pracchip--fill:hover { background: #fff; color: #000; }

/* .sechead carries no bottom margin, so the cards butted against the
   heading with a 1px gap and read as overlapping it. */
.sechead + .twoprac { margin-top: clamp(22px, 2.4vw, 34px); }

/* ---------------------------------------------------------------------------
   Local courts and agencies
   --------------------------------------------------------------------------- */

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

@media (max-width: 760px) {
  .officecard__list { grid-template-columns: minmax(0, 1fr); }
  .phero--loc .phero__mark { width: 320px; height: 320px; right: -120px; }
}

/* ---------------------------------------------------------------------------
   Brownsville "what you get" - the board runs four columns, each with an icon
   above a single paragraph whose lead-in is bold and inline, and gives the
   first column a red rule instead of the ink one. The shared .benefits rule in
   service.css stacks a heading above a paragraph in three columns, which is
   right for the service pages, so this is a modifier rather than a change
   there.
   --------------------------------------------------------------------------- */
.benefits--icons { --cols: 4; gap: clamp(20px, 2.2vw, 32px); }
.benefits--icons .benefits__i { gap: 12px; padding-top: 22px; }
.benefits--icons .benefits__i:first-child { border-top-color: var(--red); }
.benefits--icons .benefits__i svg { flex: none; }
.benefits--icons .benefits__i p { font-size: 17px; line-height: 1.6; }
.benefits--icons .benefits__i p strong { color: var(--ink); font-weight: 700; }

@media (max-width: 1100px) {
  .benefits--icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .benefits--icons { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   "Where Brownsville cases are handled" - the board's layout, which this had
   not been built to: a 440px heading column beside the rows, and each court a
   row of name-and-address against its description, divided by hairlines under
   a heavier rule. It had been a three column grid of bordered cards.
   --------------------------------------------------------------------------- */
.courtband {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: clamp(32px, 4.9vw, 70px);
  align-items: start;
}
.courtband__head .bodycopy { margin-top: 18px; max-width: none; }

.courtrows { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.courtrow {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(18px, 2.1vw, 30px);
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.courtrow h3 {
  margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ink);
}
.courtrow__addr { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.courtrow__note { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.courtrow__note a { font-weight: 600; }
/* A row can carry a label above its name and more than one paragraph: the
   right half is its own column so the extra paragraphs do not become grid
   items and land in the heading's column. */
.courtrow__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.courtrow__body { display: flex; flex-direction: column; gap: 10px; }
.courtrow__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* A link is still something a thumb has to hit, so it carries a 40px
   target rather than sitting at its text height. */
.courtrow__links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--red); }

@media (max-width: 1100px) {
  .courtband { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .courtrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------------------------------------------------------------------------
   City pages: the related-service list in a prose band.

   The Brownsville board shows these points as text, so .callnow sizes the row
   and the text sits inside it. On the city pages the same rows are links, and
   a 24px anchor inside a 56px row is a small tap target on a phone: the row
   is the thing being tapped, so the anchor fills it.
   --------------------------------------------------------------------------- */
.callnow li > a {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.callnow li > a:hover { color: var(--red); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Locations hub.
   Board: "Locations". Two office cards, then the city grid.
   --------------------------------------------------------------------------- */
.officegrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.08vw, 24px);
}
/* The board heads each office with its map, then the details, and runs the
   phone and the hours side by side rather than stacked. */
.officecard {
  background: var(--cream-2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.officecard__map { aspect-ratio: 16 / 7; background: var(--border-2); }
.officecard__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.officecard__body {
  padding: clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.officecard__tag {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.officecard h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.officecard__addr { font-style: normal; font-size: 17px; line-height: 1.5; color: var(--ink); }
.officecard__meta {
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.officecard__meta > div { display: flex; flex-direction: column; gap: 2px; }
.officecard__meta dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.officecard__meta dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.officecard__meta dd a { color: var(--ink); font-weight: 700; }
.officecard__serves { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.officecard__links { margin: auto 0 0; padding-top: 12px; display: flex; gap: 20px; flex-wrap: wrap; }
.officecard__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.officecard__links a:hover { text-decoration: underline; }

.citygrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 20px);
}
/* The board puts the arrow on the name line, adds a line saying what the
   page is, and draws the city that has its own office in ink. */
.citycard {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(18px, 1.9vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.citycard__n {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--cond);
  font-size: clamp(20px, 1.66vw, 24px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.citycard__n svg { flex: none; }
.citycard__m { font-size: 13px; line-height: 1.5; color: var(--red); }
.citycard__w { font-size: 14px; line-height: 1.5; color: var(--body); }
.citycard:hover { border-color: var(--red); background: #fff; }
.citycard--ink { background: #3A0B0D; border-color: #3A0B0D; color: #FFF; }
.citycard--ink .citycard__m { color: var(--pink); }
.citycard--ink .citycard__w { color: var(--on-dark-3); }
.citycard--ink:hover { background: var(--ink); border-color: var(--ink); }

@media (max-width: 1100px) {
  .citygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .officegrid, .citygrid { grid-template-columns: minmax(0, 1fr); }
}

/* The three ways to reach us, which closes the offices band on the board. */
.waysrow {
  margin-top: clamp(24px, 2.5vw, 34px);
  padding-top: clamp(20px, 2.1vw, 28px);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.08vw, 30px);
}
.waysrow p { margin: 0; display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--body); }
.waysrow__ic { flex: none; display: flex; }
.waysrow strong { color: var(--ink); }

/* Service area: the board sets the map beside the copy. */
.areaband {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 3.3vw, 48px);
  align-items: start;
}
.areaband__map { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--border-2); }
.areaband__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.areaband__txt .bodycopy { margin-top: 14px; }
.arealinks { margin: clamp(18px, 1.9vw, 24px) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.arealinks li { border-top: 1px solid var(--border); }
.arealinks li:last-child { border-bottom: 1px solid var(--border); }
.arealinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}
.arealinks a:hover { color: var(--red); }

@media (max-width: 1100px) {
  .areaband { grid-template-columns: minmax(0, 1fr); }
  .waysrow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 620px) {
  .officecard__meta { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   City hero: the card naming the office that serves the city.

   Every city board carries one, with the address, how far it is and a
   directions link. It was being dropped on extraction, so the heroes shipped
   as a column of text with the right half of the band empty.
   --------------------------------------------------------------------------- */
/* Only the heroes that put their card straight inside .phero__in. The
   Brownsville hero lays its own two columns in a .phero__grid inside it,
   and this rule was dropping that whole grid into the 400px track: its
   text column collapsed to one word a line and its 560px card overflowed
   across it. */
.phero--cols .phero__in { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(28px, 3.9vw, 56px); align-items: center; }

/* Locations hub hero: the board puts the two actions and the rating in the
   right column, bottom aligned with the paragraph. The city heroes centre an
   office card in that same column, so this is a modifier on the hub rather
   than a change to the rule both share. */
.phero--lochub .phero__in { align-items: end; }
.locact { display: flex; flex-direction: column; gap: 14px; }
.locact__rating {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  color: var(--on-dark-2);
}

/* The card does not clip its own content: at 280px a long directions link
   was losing its last few pixels to the overflow that rounds the corners.
   Only the map needs clipping, so only the map gets it. */
.citeoffice {
  position: relative;
  background: var(--cream);
  border-radius: 10px;
  color: var(--ink);
}
.citeoffice__map {
  aspect-ratio: 16 / 9;
  background: var(--border-2);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.citeoffice__dir a { flex-wrap: wrap; }
.citeoffice__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.citeoffice__body { padding: clamp(20px, 2.1vw, 26px); display: flex; flex-direction: column; gap: 8px; }
.citeoffice__lead {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.citeoffice__name {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.citeoffice__addr { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.citeoffice__rows {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.citeoffice__rows > div { display: flex; flex-direction: column; gap: 2px; }
.citeoffice__rows dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.citeoffice__rows dd { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 700; }
.citeoffice__note { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.citeoffice__dir { margin: 6px 0 0; }
.citeoffice__dir a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.citeoffice__dir a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .phero--cols .phero__in { grid-template-columns: minmax(0, 1fr); }
  .citeoffice { max-width: 420px; }
  .locact { max-width: 420px; }
  .phero--lochub .phero__in { align-items: start; }
}


/* ---------------------------------------------------------------------------
   The practice split band, on the Edinburg city page.

   The board runs the two practices as cards side by side, each with its own
   photograph, the copy, one line under it and a row of chips, the
   immigration card in ink. The page had been stacking the two halves down
   the page with a column of ticks beside each.
   --------------------------------------------------------------------------- */
.pracsplit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.67vw, 24px);
  align-items: stretch;
}
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.pcard__img { width: 100%; height: clamp(180px, 16.7vw, 240px); object-fit: cover; display: block; }
.pcard__body {
  flex-grow: 1;
  padding: clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pcard__lede { margin: 0; font-size: clamp(16px, 1.18vw, 17px); line-height: 1.6; color: var(--body); }
/* The fee line and the USCIS line sit between hairlines on the board, which
   is what separates them from the paragraph above and the chips below. */
.pcard__fine {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.pcard__aside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.pcard__aside a { font-weight: 600; color: var(--red); }
.pchips { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pchip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--border-2);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.pcard--ink { background: var(--oxblood-deep); border-color: var(--oxblood-deep); color: #FFF; }
.pcard--ink .pcard__img { opacity: .8; }
.pcard--ink .h-display { color: #FFF; }
.pcard--ink .pcard__lede { color: var(--on-dark-3); }
.pcard--ink .pcard__lede a { color: #FFF; font-weight: 700; }
/* --border is near-invisible against this fill, and --line-dark-2 is the
   hairline the board draws on an oxblood card. */
.pcard--ink .pcard__fine { border-color: var(--line-dark-2); color: #FFF; }
.pcard--ink .pcard__aside a { color: var(--pink); }
/* :where() keeps this at (0,1,0) so a filled chip is not overridden by the
   card it sits in: as a plain descendant it was (0,2,0) and painted the
   white chip's label white on white. The modifiers follow it, so at equal
   specificity source order hands them the win. */
.pcard--ink :where(.pchip) { border-color: var(--line-dark-2); color: #FFF; }

/* The board fills one chip per card. */
.pchip--ink { background: var(--ink); border-color: var(--ink); color: #FFF; }
.pchip--red { background: var(--red); border-color: var(--red); color: #FFF; font-weight: 700; }
.pchip--white { background: #FFF; border-color: #FFF; color: var(--ink); }

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

/* ---------------------------------------------------------------------------
   City pages, bands the boards draw that had no component here.

   Pharr's board is the one that uses all of them, and every one was being
   rendered as a list of ticks or a row of courts instead.
   --------------------------------------------------------------------------- */

/* The office card's rows: a mark, a bold lead and its lines. Inside the
   card they stack rather than running three across. */
/* The sentence under the card's title: the board sets it as body copy,
   not as the small print .citeoffice__note carries. */
.citeoffice__blurb { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.waysrow--card {
  margin-top: 10px;
  padding-top: 0;
  border-top: 1px solid var(--border);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.waysrow--card p {
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
/* Weslaco's board sets these rows as a small grey label over the value,
   with the mark centred against the pair rather than sitting on the first
   line. Pharr's board keeps its bold lead and its detail under it, so this
   is a modifier on the rows that carry a label. */
.waysrow--cap { align-items: center; padding: 10px 0; }
.waysrow__k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.waysrow--cap > span:last-child { font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.waysrow--cap a { color: var(--ink); font-weight: 700; }
/* The <br> after the label would print an empty line above the value,
   which the label already is. */
.waysrow--cap br { display: none; }

/* The stats strip's paragraph sits beside the heading, and the band closes
   on the rule it turns on with its sources beside it. */
.lawstrip__lede { margin: 0; flex: 0 1 520px; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--on-dark-3); }
.lawfoot {
  margin-top: clamp(24px, 2.5vw, 34px);
  padding-top: clamp(20px, 2.1vw, 30px);
  border-top: 1px solid var(--line-dark-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(24px, 4.2vw, 60px);
  align-items: center;
}
/* :where() drops this to (0,0,1) so the sources line keeps its own size.
   As a bare descendant it was (0,1,1) and printed it at body size. */
:where(.lawfoot) p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--on-dark-3); }
.lawfoot a { color: #FFF; font-weight: 700; }
.lawfoot__src { font-size: 13px; line-height: 1.55; color: var(--on-dark-2); }

/* A case-type card the whole of which is a link, with the board's arrow. */
.typecard--link { display: block; color: var(--ink); text-decoration: none; }
.typecard--link:hover { border-color: var(--red); }
.typecard h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.typecard h3 > svg { flex: none; }
.morelink { margin: clamp(22px, 2.4vw, 32px) 0 0; }
.morelink a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.morelink a:hover { text-decoration: underline; }
/* Beside a section heading (Weslaco's link to the attorney's page). */
.sechead > .morelink { margin: 0; }

/* The line of fine print the board sets beside a heading. */
.sechead__fine { margin: 0; flex: 0 1 360px; max-width: 360px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* The deadlines under the numbered steps. */
.steplines {
  margin-top: clamp(24px, 2.6vw, 36px);
  padding-top: clamp(18px, 2.1vw, 26px);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 32px);
}
.steplines p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }
.steplines strong { color: var(--ink); }

/* A photograph beside the copy. */
.imsplit {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(28px, 4.9vw, 70px);
  align-items: center;
}
.imsplit--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
.imsplit--flip .imsplit__img { order: 2; }
.imsplit__img {
  width: 100%;
  height: clamp(260px, 32vw, 460px);
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.imsplit__txt .bodycopy { margin-top: 20px; max-width: none; }
.imsplit__txt .pchips { margin-top: clamp(20px, 2.1vw, 26px); }
.imsplit__check {
  margin: clamp(20px, 2.1vw, 26px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 15px;
}
/* These three sit in a flex row, so they are tap targets rather than text
   in a sentence, and they carry the 44px the build plan asks for. */
.imsplit__check a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--red);
}

/* Reviews with the heading in a column beside the cards. */
.revband {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4.9vw, 70px);
  align-items: start;
}
.revband__hd .h-display { margin-top: 12px; }
.revband__rating { margin: 16px 0 0; display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink); }
.revband__all { margin: 14px 0 0; }
.revband__all a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.revband__all a:hover { text-decoration: underline; }
.revband .disclaimer { margin-top: 10px; }

@media (max-width: 1100px) {
  .imsplit, .imsplit--flip, .revband { grid-template-columns: minmax(0, 1fr); }
  .imsplit--flip .imsplit__img { order: 0; }
  .lawfoot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .steplines { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   The knowledge band, on the Mission city page: the practice and its
   service links on one side, the offices a case goes to in an ink card on
   the other. It had been built as a courts band, which lost the card.
   --------------------------------------------------------------------------- */
.knowband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(28px, 4.9vw, 70px);
  align-items: start;
}
.knowband__txt .bodycopy { margin-top: 20px; max-width: 640px; }
.knowlinks {
  margin-top: clamp(22px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.knowlink {
  min-height: 64px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.knowlink:hover { border-color: var(--red); }
.knowlink > svg { flex: none; }
.knowband__wait {
  margin: clamp(20px, 2.1vw, 26px) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  font-size: 16px;
}
.knowband__wait a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--red);
}
.knowcard {
  position: relative;
  overflow: hidden;
  background: var(--oxblood-deep);
  border-radius: 8px;
  padding: clamp(26px, 2.6vw, 36px);
  color: #FFF;
}
.knowcard__h {
  margin: 10px 0 0;
  font-family: var(--cond);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #FFF;
}
.knowcard__intro { margin: 14px 0 6px; font-size: 15px; line-height: 1.55; color: var(--on-dark-3); }
.knowplace { padding: 18px 0; border-bottom: 1px solid var(--line-dark-2); }
.knowplace__n { margin: 0; font-size: 18px; font-weight: 700; color: #FFF; }
.knowplace__a { margin: 4px 0 0; font-size: 14px; color: var(--pink); }
.knowplace__t { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--on-dark-3); }

/* The fee line in a photo band carries the board's hairlines, like the one
   on the practice-split cards. */
.imsplit__fee { margin-top: clamp(20px, 2.1vw, 26px); }

@media (max-width: 1100px) {
  .knowband { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .knowlinks { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   The service-card grid and the route row, on the Weslaco city page.
   --------------------------------------------------------------------------- */
.svcgrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.svccard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.svccard h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.svccard p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.svccard__l {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.svccard__l:hover { text-decoration: underline; }
/* The board inks the card that asks a question rather than naming a
   service, and sets its links as plain underlined text. */
.svccard--ink { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.svccard--ink h3 { color: #FFF; }
.svccard--ink p { color: var(--on-dark-3); }
.svccard--ink :where(.svccard__l) { color: #FFF; text-transform: none; letter-spacing: 0; font-size: 15px; text-decoration: underline; }
.svccard--ink :where(.svccard__l):last-child { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--pink); }

.routerow {
  margin: clamp(28px, 3.1vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 40px);
}
.routerow li { position: relative; display: flex; flex-direction: column; gap: 8px; }
/* The line the board runs between the marks. It stops at the last one. */
.routerow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 64px;
  top: 32px;
  right: calc(-1 * clamp(20px, 2.8vw, 40px));
  height: 1px;
  background: var(--border-2);
}
.routerow__ic {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--red);
}
.routerow__s { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.routerow h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.routerow p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.routefoot {
  margin: clamp(26px, 2.8vw, 38px) 0 0;
  padding-top: clamp(18px, 2.1vw, 26px);
  border-top: 1px solid var(--border-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 16px;
}
.routefoot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--red); }
.routefoot__fine { font-size: 13px; color: var(--muted); }

/* The locations a city page points at, under its reviews. */
.revband__near { margin: clamp(18px, 2.1vw, 26px) 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.revband__near a { font-weight: 600; }
.revband__all a > svg { margin-left: 8px; }

@media (max-width: 1024px) {
  .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routerow { grid-template-columns: minmax(0, 1fr); }
  .routerow li:not(:last-child)::after { display: none; }
}
@media (max-width: 620px) {
  .svcgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   The Harlingen city page: two offices in the hero card, the attorney card
   beside the benefits, two places side by side, and the score card.
   --------------------------------------------------------------------------- */
.offrows { margin-top: 8px; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.offrow { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.offrow h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.offrow__a { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2, #3A2E2C); }
.offrow__d { margin: 0; font-size: 14px; color: var(--muted); }
.offrow__l { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
/* :where() drops this to (0,1,0) so the directions link keeps its own
   size. As a bare descendant it was (0,1,1) and set it at the phone
   number's size. */
:where(.offrow__l) a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--ink); }
.offrow__dir {
  gap: 6px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}

/* The board closes the benefits row with a card for the attorney. */
.benefits--atty { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 380px); }
.attycard {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.attycard img { width: 130px; height: 100%; min-height: 250px; object-fit: cover; object-position: center top; display: block; }
.attycard__b { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.attycard__b h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.attycard__t { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }
.attycard__l {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}

.twocard {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.9vw, 26px);
  align-items: start;
}
.placecard {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(24px, 2.4vw, 32px);
}
.placecard h3 {
  margin: 10px 0 0;
  font-family: var(--cond);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.placecard__a { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
:where(.placecard) p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.placecard__l { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.placecard__l a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; color: var(--red); }
.placecard--ink { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.placecard--ink h3 { color: #FFF; }
.placecard--ink .placecard__a { color: var(--pink); }
.placecard--ink :where(p) { color: var(--on-dark-3); }
.placecard--ink strong { color: #FFF; }
.placecard--ink .placecard__l a { color: #FFF; }
.twocard__foot {
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: clamp(18px, 2.1vw, 26px);
  border-top: 1px solid var(--border-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px clamp(24px, 3vw, 44px);
}
.twocard__fine { margin: 0; font-size: 13px; color: var(--muted); }

.pisplit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.9vw, 70px);
  align-items: start;
}
.pisplit .bodycopy { margin-top: 20px; max-width: none; }
.pisplit .pchips { margin-top: clamp(20px, 2.1vw, 26px); }
.pisplit__h {
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

/* The score, which the board sets as the third card in the row. */
.revgrid--score { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scorecard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--ink);
  border-radius: 8px;
  color: #FFF;
}
.scorecard__n { margin: 0; font-family: var(--cond); font-size: clamp(48px, 4.4vw, 64px); font-weight: 700; line-height: 1; }
.scorecard__s { margin: 0; font-size: 15px; color: var(--on-dark-3); }
.scorecard__l {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFF;
  text-decoration: none;
}
.scorecard__l:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .benefits--atty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twocard, .pisplit, .revgrid--score { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   The benefits row on a phone. The mobile boards - Brownsville, Pharr,
   Weslaco and Harlingen - all draw it as one column of rows with the mark
   beside the text rather than above it, divided by hairlines under a red
   rule, with the attorney card full width under them.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .benefits--icons, .benefits--atty { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .benefits--icons { border-bottom: 1px solid var(--border); }
  .benefits--icons .benefits__i {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
  }
  .benefits--icons .benefits__i:first-child { border-top: 2px solid var(--red); }
  .benefits--icons .benefits__i p { font-size: 16px; line-height: 1.55; }
  /* The card is not one of the rows, so it keeps its own box and sits
     clear of the list's last hairline. */
  .benefits--atty .attycard { margin-top: 18px; grid-template-columns: 110px minmax(0, 1fr); }
  .benefits--atty .attycard img { width: 110px; min-height: 200px; }
  .benefits--atty .attycard__b { padding: 16px; }
}