/* ─────────────────────────────────────────────────────────────
   ESI · Practice Area + Core Service SINGLE — page-specific styles
   ADDITIVE layer loaded on top of main.css (the base: tokens, chrome,
   nav, footer, CTA band, contact modal, motion all live in main.css).
   Enqueued only on: page-practice-area.php template, is_singular('solutions'),
   is_singular('core-service'). See functions.php esi_assets().
   Depends on main.css (enqueue dependency 'esi-styles') for :root tokens.
   ───────────────────────────────────────────────────────────── */

/* ─────────────── Breadcrumb ─────────────── */
.crumb {
  padding: var(--s-4) 0 0;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--ink-muted);
}
.crumb a { color: var(--ink-muted); transition: color .2s ease; }
.crumb a:hover { color: var(--green-dark); }
.crumb .sep { margin: 0 10px; color: var(--rule); }
.crumb .here { color: var(--green-dark); font-weight: 700; font-size: 15px; }

/* Skip link — visually hidden until keyboard focus (a11y). Mirrors main.css so
   pages loading only this stylesheet still get a styled skip link. */
.skip-link { position: absolute; left: 8px; top: -56px; z-index: 200; background: var(--green-dark); color: #fff; padding: 10px 16px; border-radius: 2px; font-family: var(--sans); font-size: 14px; font-weight: 600; transition: top .2s ease; }
.skip-link:focus { top: 8px; }

/* ─────────────── Practice hero ─────────────── */
/* Split hero: image with overlaid headline (left) + solid color panel with detail (right) */
.phero { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); min-height: clamp(480px, 60vh, 660px); overflow: hidden; background: #244c5b; }
@media (max-width: 880px) { .phero { grid-template-columns: 1fr; min-height: 0; } }

.phero__media { position: relative; display: flex; background: var(--green-dark); overflow: hidden; }
@media (max-width: 880px) { .phero__media { min-height: 360px; } }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,26,19,0.82) 0%, rgba(15,26,19,0.45) 30%, rgba(36,76,91,0.4) 55%, rgba(36,76,91,0.85) 80%, #244c5b 93%); }
.phero__content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: var(--s-8) var(--s-8) var(--s-8) var(--gutter); }
.phero__content .crumb { padding: 0; }
.phero__content .crumb a { color: rgba(255,255,255,0.75); }
.phero__content .crumb a:hover { color: #fff; }
.phero__content .crumb .sep { color: rgba(255,255,255,0.4); }
.phero__content .crumb .here { color: #fff; font-weight: 700; font-size: 15px; }
.phero__statement { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.14; letter-spacing: -0.02em; color: #fff; margin: 0; max-width: 22ch; text-shadow: 0 1px 2px rgba(15,26,19,0.55), 0 2px 22px rgba(15,26,19,0.72); animation: fadeUp .9s ease both; }
/* Lighter gold + stronger shadow so the accent reads over light/warm imagery (e.g. a wood
   table), matching the Our Work featured-card treatment. */
.phero__statement em { font-style: italic; font-weight: 700; color: #e6d488; text-shadow: 0 1px 3px rgba(15,26,19,0.9), 0 2px 14px rgba(15,26,19,0.7); }
.phero__actions { display: flex; gap: 16px; align-items: center; margin-top: var(--s-2); animation: fadeUp .9s ease .3s both; }
.phero .btn--ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.phero .btn--ghost:hover { color: var(--gold); border-bottom-color: var(--gold); }

.phero__panel { background: linear-gradient(90deg, #244c5b 0%, #1e4250 100%); display: flex; align-items: center; padding: var(--s-8) var(--gutter) var(--s-8) var(--s-8); }
@media (max-width: 880px) { .phero__panel { padding: var(--s-6) var(--gutter); } }
.phero__detail-rule { display: block; width: 44px; height: 2px; background: var(--gold); margin-bottom: var(--s-4); }
.phero__detail .phero__detail-lead { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45; color: #fff; margin: 0 0 var(--s-3); }
.phero__detail p { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.7; margin: 0 0 1em; }
.phero__detail p:last-child { margin-bottom: 0; }

/* Featured-case anchor in hero */
.phero__feature {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-3);
  position: relative;
  animation: fadeIn 1.2s ease .4s both;
}
.phero__feature::before {
  content: "FEATURED ENGAGEMENT";
  position: absolute;
  top: -10px; left: var(--s-4);
  background: var(--paper);
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  padding: 0 10px;
}
.phero__feature__tag {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
}
.phero__feature__tag::before { content: ""; width: 18px; height: 1px; background: var(--gold); }
.phero__feature__title {
  font-family: var(--serif); font-weight: 700;
  font-size: 24px; line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink);
}
.phero__feature__client {
  font-family: var(--sans); font-size: 14px; color: var(--ink-muted);
}
.phero__feature__row {
  display: flex; justify-content: space-between; align-items: end;
  padding-top: var(--s-3); border-top: 1px solid var(--rule);
}
.phero__feature__stat {
  font-family: var(--serif); font-weight: 700; font-size: 32px;
  line-height: 1; color: var(--green-dark); letter-spacing: -0.01em;
}
.phero__feature__stat-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
  margin-top: 4px;
}
.phero__feature__cta {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: gap .2s ease, color .2s ease, border-color .2s ease;
}
.phero__feature:hover .phero__feature__cta { gap: 10px; color: var(--green-dark); border-color: var(--green-dark); }

/* (Old image-box .phero__media rule removed — the split hero above defines it.) */

/* ═══════════ Practice content sections (Gina model, redesigned) ═══════════ */
/* Band rhythm: alternate surface / paper / deep-green so sections never bleed.
   section.band supplies the vertical padding; background color marks boundaries. */
.pa-eyebrow { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-dark); margin-bottom: var(--s-3); }
.pa-h2 { font-size: var(--t-h2); font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0 0 var(--s-6); }
.pa-h2 em { font-style: italic; font-weight: 700; color: var(--green-dark); }

/* (Hero statement/detail styles live in the split-hero block above.) */

/* Questions we answer — paper band, two-column index with hairline dividers */
.pa-qa { background: var(--paper); }
.pa-qa__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); }
@media (max-width: 720px) { .pa-qa__list { grid-template-columns: 1fr; } }
.pa-qa__list li { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); padding: var(--s-3) 0; border-top: 1px solid var(--rule); }

/* How we work — full-bleed deep-green band (the rhythm breaker) */
.pa-how { background: var(--green-dark); color: #fff; }
.pa-how__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
@media (max-width: 880px) { .pa-how__grid { grid-template-columns: 1fr; gap: var(--s-3); } }
.pa-how__grid h2 { color: #fff; font-size: var(--t-h2); font-weight: 400; line-height: 1.15; margin: 0; }
.pa-how__grid h2 em { font-style: italic; font-weight: 700; color: var(--gold); }
.pa-how__body p { color: rgba(255,255,255,0.82); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; margin: 0 0 1em; max-width: 62ch; }
.pa-how__body p:last-child { margin-bottom: 0; }

/* What we deliver — three selectable, box-free editorial layouts (per-page ACF pa_deliver_variant).
   Serious peer firms (HR&A, RCLCO) present deliverables as ruled typographic lists, not card grids;
   all three drop the cards for a defined set that reads as a document. One renders at a time.
   Numbered and accordion treatments were tried and rejected: the numbering implied a sequence that
   does not exist, and an accordion hid a single line of copy behind a click. */
.pa-deliver { background: radial-gradient(900px 480px at 94% -12%, rgba(35,75,89,0.09), transparent 60%), linear-gradient(165deg, #f7f5f0 0%, #ebf1ea 100%); }
.pa-deliver__pairs { max-width: 960px; }

/* Variant B (default) — Deliverable -> outcome: two-column definition list, output | decision. */
.pa-deliver__pairs { margin: 0; }
.pa-deliver__pairs .pa-deliver__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.pa-deliver__pairs .pa-deliver__row:first-child { border-top: 2px solid var(--green-dark); }
.pa-deliver__pairs .pa-deliver__row:last-child { border-bottom: 2px solid var(--green-dark); }
.pa-deliver__term { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--green-dark); margin: 0; }
.pa-deliver__outcome { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink); }
.pa-deliver__arrow { color: var(--gold); font-weight: 700; margin-right: 10px; }
@media (max-width: 720px) {
  .pa-deliver__pairs .pa-deliver__row { grid-template-columns: 1fr; gap: 8px; }
  .pa-deliver__outcome { padding-left: var(--s-3); border-left: 2px solid var(--gold); }
  .pa-deliver__arrow { display: none; }
}

/* Variant: Editorial list — full-width stacked rows at a reading measure, hairline separated,
   generous whitespace. HR&A's services pattern: no boxes, no icons, no numbers; the type and the
   space do the work. Reads as considered depth rather than a catalogue. */
.pa-deliver__editorial { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.pa-deliver__ed { padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.pa-deliver__ed:first-child { border-top: none; padding-top: var(--s-2); }
.pa-deliver__ed-title { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.25; color: var(--ink); margin: 0 0 10px; }
.pa-deliver__ed-desc { font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink-muted); margin: 0; max-width: 66ch; }

/* Variant: Capability index — the whole set at a glance, flowed across two columns with a quiet
   support line under each title (RCLCO's typographic index). Reads as breadth and completeness;
   the densest of the three. */
.pa-deliver__index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); max-width: 1000px; }
@media (max-width: 760px) { .pa-deliver__index { grid-template-columns: 1fr; } }
.pa-deliver__ix { padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.pa-deliver__ix-title { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--green-dark); }
.pa-deliver__ix-desc { display: block; margin-top: 5px; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* Selected work — white band (cards/list styled above) */
.work { background: var(--surface); }

/* Related practices — image cards reusing the hub imagery */
.pa-related { background: var(--paper); }
.pa-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 980px) { .pa-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pa-related__grid { grid-template-columns: 1fr; } }
.pa-rcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pa-rcard:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -26px rgba(15,26,19,0.42); border-color: var(--green-dark); }
.pa-rcard:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.pa-rcard__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper); }
.pa-rcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.pa-rcard:hover .pa-rcard__media img { transform: scale(1.04); }
.pa-rcard__body { padding: var(--s-4); display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.pa-rcard__title { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.pa-rcard__desc { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.pa-rcard__cta { margin-top: auto; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); }

/* Respect reduced motion on pages that load this stylesheet (matches main.css). */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 2px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--green-dark); color: #fff; }
.btn--primary:hover { background: var(--ink); }
.btn--ghost { color: var(--ink); border-bottom: 1.5px solid var(--ink); padding: 10px 0; border-radius: 0; }
.btn--ghost:hover { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─────────────── Section heading shared ─────────────── */
section.band { padding: var(--s-12) 0; }
.section-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr);
  gap: var(--s-8); margin-bottom: var(--s-8); align-items: start;
}
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; gap: var(--s-3); } }
.section-head h2 { font-size: var(--t-h2); font-weight: 400; max-width: 22ch; }
.section-head h2 em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.section-head__meta { color: var(--ink-muted); }

/* ─────────────── Capabilities ─────────────── */
.cap { background: var(--paper-deep); padding: var(--s-16) 0; }
.cap__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 980px) { .cap__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cap__grid { grid-template-columns: 1fr; } }
.cap__card {
  background: var(--paper);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-2);
  min-height: 220px;
  position: relative;
  transition: background .25s ease;
}
.cap__card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold-bright);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cap__card:hover { background: var(--surface); }
.cap__card:hover::before { transform: scaleY(1); }
.cap__card:hover .cap__title { color: var(--green-dark); }
.cap__title {
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--ink);
  transition: color .25s ease;
}
.cap__desc { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 auto; }
.cap__items {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-muted); margin-top: var(--s-2);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cap__items span {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
}

/* ─────────────── Methodology ─────────────── */
.method { padding: var(--s-16) 0; background: var(--paper); }
.method__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 980px) { .method__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .method__steps { grid-template-columns: 1fr; } }
.step {
  padding: var(--s-6) var(--s-4) var(--s-6) 0;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--s-3);
  position: relative;
}
.step:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 980px) {
  .step { border-right: 0; padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); }
  .step:nth-child(2n) { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
}
.step:not(:first-child) { padding-left: var(--s-4); }
.step__num {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 80px; line-height: 0.85; color: var(--gold);
  letter-spacing: -0.04em;
}
.step__title {
  font-family: var(--serif); font-weight: 700; font-size: 24px;
  letter-spacing: -0.01em; color: var(--ink);
  border-top: 1px solid var(--ink); padding-top: var(--s-2);
  margin-top: var(--s-2);
}
.step__desc { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0; }

/* ─────────────── Selected work (featured + engagements unified) ─────────────── */
.work { padding: var(--s-12) 0; background: var(--paper-deep); }

/* Featured trio: image-led horizontal cards */
.featured { display: flex; flex-direction: column; gap: var(--s-3); }
.featured__card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: border-color .25s ease, transform .35s ease;
  min-height: 320px;
}
.featured__card:hover { border-color: var(--ink); }
@media (max-width: 880px) {
  .featured__card { grid-template-columns: 1fr; }
}
.featured__media {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
  min-height: 240px;
}
/* Absolute-fill the image so its intrinsic aspect ratio never sizes the card. The card
   height is driven by the copy column (and .featured__card min-height); portrait, square,
   and landscape images all crop to the same box via object-fit: cover. */
.featured__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s ease;
}
.featured__card:hover .featured__media img { transform: scale(1.04); }
.featured__copy {
  padding: var(--s-6) var(--s-6) var(--s-6) var(--s-6);
  display: flex; flex-direction: column;
  justify-content: center;
}
@media (max-width: 880px) {
  .featured__copy { padding: var(--s-4); }
}
.featured__tag {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--s-2);
  display: inline-flex; align-items: center; gap: 10px;
}
.featured__tag::before { content: ""; width: 22px; height: 1px; background: var(--gold); }
.featured__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 var(--s-2);
}
.featured__client {
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-muted); margin-bottom: var(--s-3);
}
.featured__teaser {
  font-size: 16px; color: var(--ink-muted); line-height: 1.55;
  margin: 0 0 var(--s-4);
}
.featured__cta {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink); display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
  align-self: flex-start;
}
.featured__card:hover .featured__cta { color: var(--green-dark); border-color: var(--green-dark); gap: 10px; }

/* Engagements list — continuation, no separate section heading */
.work .eng__list {
  border-top: 1px solid var(--ink);
  margin-top: var(--s-12);
}
.eng__row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 0.6fr 0.4fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background .2s ease, padding .2s ease;
  cursor: pointer;
}
.eng__row::before {
  content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 2px;
  background: var(--gold); opacity: 0; transition: opacity .25s ease;
}
.eng__row:hover { background: var(--surface); padding-left: 16px; }
.eng__row:hover::before { opacity: 1; }
.eng__row:last-child { border-bottom: 1px solid var(--ink); }
@media (max-width: 880px) {
  .eng__row { grid-template-columns: 1fr; gap: 4px; padding: var(--s-3) 0; }
}
.eng__client {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  letter-spacing: -0.005em; color: var(--ink);
}
.eng__desc { font-size: 15px; color: var(--ink-muted); line-height: 1.5; }
.eng__sub {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-dark);
}
.eng__year {
  font-family: var(--sans); font-size: 14px; color: var(--ink-muted);
  text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 880px) {
  .eng__year { text-align: left; }
  .eng__sub, .eng__year { font-size: 12px; }
}

/* ─────────────── Insights ─────────────── */
.insights { padding: var(--s-16) 0; background: var(--paper-deep); }
.insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 880px) { .insights__grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.insight {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-top: var(--s-4); border-top: 1px solid var(--ink);
}
.insight__meta {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
  display: flex; gap: 14px; align-items: center;
}
.insight__meta .dot { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; }
.insight__title {
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--ink);
  transition: color .2s ease;
}
.insight:hover .insight__title { color: var(--green-dark); }
.insight__teaser { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   RESTORED 2026-07-24: Core Service single page-specific styles. These were
   dropped by mistake in the base+additive refactor (dd7570c) — they sat in the
   file TAIL, after the chrome, so the tail-drop took them too. The CS single fell
   back to unstyled lists until this restore. (main.css owns fadeUp/fadeIn/.reveal/
   .esi-social, so only the genuinely page-specific rules are restored here.)
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   CORE SERVICE single (single-core-service.php)
   Same DNA as the practice-area single, but leaner and deliberately distinct
   (research: service pages read lighter than sector pages). Reuses .phero,
   .work/.featured, .band, .pa-h2; adds a photo-free brand hero, a headed
   sub-offering list (not cards), a client-situations band, a pairs-with strip,
   and a Litigation-only testimony block.
   ═══════════════════════════════════════════════════════════════════════ */

/* One-liner under the statement in the split-photo hero variant. */
.phero__oneliner { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: #e6d488; margin: 0; max-width: 30ch; text-shadow: 0 1px 3px rgba(15,26,19,0.9), 0 2px 14px rgba(15,26,19,0.7); }

/* Brand-panel hero — the photo-free default that sets Core Services apart. */
.cshero { position: relative; overflow: hidden; color: #fff; padding: var(--s-8) 0 var(--s-12); background: linear-gradient(155deg, var(--teal-dark) 0%, var(--green-dark) 72%); }
.cshero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 380px at 100% -10%, rgba(190,172,77,0.16), transparent 60%); }
.cshero__inner { position: relative; }
.crumb--dark a { color: rgba(255,255,255,0.72); }
.crumb--dark a:hover { color: #fff; }
.crumb--dark .sep { color: rgba(255,255,255,0.4); }
.crumb--dark .here { color: #fff; font-weight: 700; font-size: 15px; }
.cshero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: end; margin-top: var(--s-6); }
@media (max-width: 880px) { .cshero__grid { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; } }
.cshero__body { padding-left: var(--s-6); padding-bottom: 4px; }
@media (max-width: 880px) { .cshero__body { padding-left: 0; } }
.cshero__rule { display: block; width: 48px; height: 2px; background: var(--gold); margin-bottom: var(--s-4); }
.cshero__title { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 0; animation: fadeUp .9s ease both; }
.cshero__oneliner { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; color: var(--gold-bright); margin: var(--s-3) 0 0; max-width: 26ch; }
.cshero__lead { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5; color: #fff; margin: 0 0 var(--s-3); }
.cshero__body p { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.7; margin: 0 0 1em; }
.cshero__body p:last-child { margin-bottom: 0; }

/* What this looks like in practice — headed list, NOT cards (the deliberate
   divergence from the practice-area "What we deliver" card grid). */
.cs-practice { background: var(--paper); }
.cs-practice__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); }
@media (max-width: 720px) { .cs-practice__list { grid-template-columns: 1fr; } }
.cs-practice__item { padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.cs-practice__title { font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; color: var(--ink); margin: 0 0 6px; }
.cs-practice__desc { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink-muted); margin: 0; max-width: 46ch; }

/* When organizations come to us — client-situation list (a differentiator;
   few competitors surface this). */
.cs-clients { background: var(--teal-dark); color: #fff; }
.cs-clients__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
@media (max-width: 880px) { .cs-clients__grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.cs-clients__head h2 { color: #fff; font-size: var(--t-h2); font-weight: 400; line-height: 1.15; margin: 0; }
.cs-clients__head h2 em { font-style: italic; font-weight: 700; color: var(--gold); }
.cs-clients__list { list-style: none; margin: 0; padding: 0; }
.cs-clients__list li { position: relative; font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: rgba(255,255,255,0.92); padding: var(--s-3) 0 var(--s-3) var(--s-4); border-top: 1px solid rgba(255,255,255,0.16); }
.cs-clients__list li:first-child { border-top: 0; }
.cs-clients__list li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-3) + 0.66em); width: 14px; height: 2px; background: var(--gold); }

/* Pairs with — editorial strip cross-linking to the practice areas this method
   runs inside (net-new; ties the two doorways together). */
/* Pairs with: reuses the .pa-related/.pa-rcard image cards; only the band colour,
   heading spacing, and intro line are bespoke here. */
.cs-pairs { background: var(--paper-deep); }
.cs-pairs .pa-h2 { margin-bottom: var(--s-2); }
.cs-pairs__intro { font-family: var(--serif); font-style: italic; color: var(--ink-muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; margin: 0 0 var(--s-6); max-width: 54ch; }
/* Services pair with 2–3 practice areas (fewer than the PA siblings grid's 4). */
.cs-pairs .pa-related__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .cs-pairs .pa-related__grid { grid-template-columns: 1fr; } }

/* In testimony — Litigation Support credibility block. */
.cs-testimony { background: var(--surface); }
.cs-testimony__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
@media (max-width: 880px) { .cs-testimony__grid { grid-template-columns: 1fr; gap: var(--s-3); } }
.cs-testimony__grid h2 { font-size: var(--t-h2); font-weight: 400; color: var(--ink); margin: 0; }
.cs-testimony__grid h2 em { font-style: italic; font-weight: 700; color: var(--green-dark); }
.cs-testimony__body { border-left: 3px solid var(--gold); padding-left: var(--s-4); }
.cs-testimony__body p { font-family: var(--serif); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink); margin: 0 0 1em; }
.cs-testimony__body p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   JOB single (single-job.php) — reuses the .cshero brand-panel hero, .band,
   .pa-h2, .btn, and the .cta-band apply block. Only the job-specific bits below.
   ═══════════════════════════════════════════════════════════════════════ */
.job-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; margin-top: var(--s-6); }
@media (max-width: 880px) { .job-hero__grid { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; } }
.job-hero__meta { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.job-hero__meta li { font-family: var(--sans); font-size: 15px; color: rgba(255,255,255,0.9); }
.job-hero__meta li + li::before { content: "·"; margin: 0 12px; color: rgba(255,255,255,0.45); }
.job-hero__actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
@media (max-width: 880px) { .job-hero__actions { align-items: stretch; } }
.job-hero .btn--primary { background: var(--gold-bright); color: var(--ink); }
.job-hero .btn--primary:hover { background: #fff; }
.job-hero .btn--ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.job-hero .btn--ghost:hover { color: var(--gold); border-bottom-color: var(--gold); }
.job-hero__closed { font-family: var(--sans); color: var(--gold-bright); font-weight: 600; margin: 0; }

.job-overview { background: var(--surface); }
/* A posting runs to six or more sections, so the site's default band rhythm (96px top AND
   bottom) makes the page enormous and mostly air. Tighten it here only. */
section.job-overview, section.job-sec, section.job-details { padding: var(--s-8) 0; }
.job-overview .pa-h2, .job-sec .pa-h2, .job-details .pa-h2 { margin-bottom: var(--s-4); }
/* Reading measure for the intro. Must NOT sit on the .wrap element itself: .wrap carries
   margin:0 auto, so combining them centred the 760px box while every other section started at
   the gutter, which read as an empty left column. */
.job-prose__body { max-width: 760px; font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--ink); }
.job-prose__body p { margin: 0 0 1em; }
.job-prose__body p:last-child { margin-bottom: 0; }

/* Body sections alternate paper / surface automatically, however many a posting has, so an
   extra "Additional section" never lands on the same ground as its neighbour. */
.job-sec:nth-of-type(odd) { background: var(--paper); }
.job-sec:nth-of-type(even) { background: var(--surface); }
.job-details { background: var(--paper-deep); }

/* Shared bullet list for responsibilities + qualifications. */
.job-list { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.job-list li { position: relative; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); padding: 10px 0 10px var(--s-4); border-top: 1px solid var(--rule); }
.job-list li:first-child { border-top: none; }
.job-list li::before { content: ""; position: absolute; left: 0; top: calc(10px + 0.6em); width: 14px; height: 2px; background: var(--gold); }
/* Sub-point: detail nested under the item above it (editor prefixes the line with "--").
   Indented, no rule of its own, quieter type, so it reads as belonging to its parent. */
.job-list li.job-list__sub { border-top: none; padding-top: 0; padding-bottom: 8px; padding-left: var(--s-6); font-size: 15px; color: var(--ink-muted); }
.job-list li.job-list__sub::before { left: var(--s-4); top: 0.62em; width: 8px; background: var(--gold); opacity: 0.55; }

.job-details__list { margin: 0; max-width: 640px; }
.job-details__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.job-details__row:first-child { border-top: none; }
@media (max-width: 560px) { .job-details__row { grid-template-columns: 1fr; gap: 4px; } }
.job-details__row dt { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.job-details__row dd { font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 0; }

/* Apply band — sits on .cta-band (dark). */
.job-apply__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
@media (max-width: 880px) { .job-apply__inner { grid-template-columns: 1fr; gap: var(--s-5); } }
.job-apply__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; color: #fff; margin: 0; }
.job-apply__note { color: rgba(255,255,255,0.82); margin: var(--s-3) 0 0; max-width: 52ch; }
.job-apply__eeo { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; margin: var(--s-3) 0 0; max-width: 60ch; }
.job-apply__actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
@media (max-width: 880px) { .job-apply__actions { align-items: stretch; } }
.job-apply .btn--primary { background: var(--gold-bright); color: var(--ink); }
.job-apply .btn--primary:hover { background: #fff; }
.job-apply .btn--ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.job-apply .btn--ghost:hover { color: var(--gold); border-bottom-color: var(--gold); }