/*
 * Blog archive and case study archive.
 *
 * Both handoffs compute their grids in JavaScript from a measured width. These
 * are the same breakpoints as CSS, so the layout holds with the script blocked.
 * The design's muted text is #5F7386 / #5A6B7B throughout -- #7E93A6 and
 * #8A97A8 fail AA at this size and are deliberately absent.
 */

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.bl-crumb { background:#F4F7FA; border-bottom:1px solid #E2E9F0; }
.bl-crumb__in {
  max-width:1300px; margin:0 auto;
  padding:12px clamp(16px,3.5vw,36px);
  font-size:13.5px; color:#5F7386;
}
.bl-crumb__in a { color:#5F7386; font-weight:500; }
.bl-crumb__in span { margin:0 8px; }
.bl-crumb__in strong { color:#14232F; font-weight:700; }

/* ── hero, shared by both archives ──────────────────────────────────── */
.bl-hero, .cs-hero {
  background:linear-gradient(135deg,#F2F7FC 0%,#FFFFFF 42%,#FDF6E8 100%);
  border-bottom:1px solid #E2E9F0;
}
.bl-hero__in, .cs-hero__in {
  max-width:1220px; margin:0 auto;
  padding:clamp(40px,5vw,72px) clamp(16px,3.5vw,36px) clamp(30px,3.6vw,44px);
}
.v2-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  background:#FDF4E0; border-radius:99px; padding:7px 16px; margin-bottom:16px;
}
.v2-eyebrow > span:first-child { width:6px; height:6px; border-radius:50%; background:#F0A500; flex:none; }
.v2-eyebrow > span:last-child {
  font-size:12.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#8A6206;
}
.bl-hero__h1 {
  font-weight:800; font-size:clamp(32px,4.2vw,52px); line-height:1.06;
  letter-spacing:-1.6px; color:#14232F; margin:0 0 16px; text-wrap:balance;
}
.bl-hero__h1 span { color:#0464ad; }
.bl-hero__sub {
  font-size:clamp(16px,1.5vw,18.5px); line-height:1.66;
  color:#5A6B7B; margin:0 0 26px; max-width:640px;
}

/* ── filter chips. Links, not buttons: every view has a URL. ────────── */
.bl-chips { display:flex; flex-wrap:wrap; gap:8px; }
.bl-chip {
  display:inline-block;
  font-size:14px; font-weight:700; color:#14232F;
  background:#fff; border:1px solid #CBDCEB; border-radius:99px;
  padding:9px 16px;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.bl-chip span { font-weight:600; opacity:.85; }   /* .75 put it at 4.15 on the brand blue */
.bl-chip.is-on { color:#fff; background:#0464ad; border-color:#0464ad; }
@media (hover: hover) {
  .bl-chip:hover { border-color:#0464ad; }
  .bl-chip.is-on:hover { background:#04589a; }
}

/* ── the list body, shared ──────────────────────────────────────────── */
.bl-body { background:#F7FAFD; border-bottom:1px solid #E2E9F0; }
.bl-body__in {
  max-width:1220px; margin:0 auto;
  padding:clamp(34px,4.2vw,56px) clamp(16px,3.5vw,36px) clamp(44px,5.4vw,78px);
}
.bl-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
@media (min-width:640px){ .bl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .bl-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.bl-tag {
  display:inline-block;
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  border-radius:7px; padding:5px 9px;
}
.bl-tag--feat { color:#fff; background:#0464ad; }
.bl-tag--grey { color:#5A6B7B; background:#F0F4F8; }
.bl-tags { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; }
.bl-read { color:#0464ad; font-weight:700; }
.bl-meta { font-size:13.5px; font-weight:600; color:#5F7386; }

/* ── featured post ──────────────────────────────────────────────────── */
.bl-feat {
  display:grid; grid-template-columns:minmax(0,1fr);
  background:#fff; border:1px solid #E2E9F0; border-radius:20px; overflow:hidden;
  margin-bottom:clamp(22px,2.6vw,30px);
  box-shadow:0 2px 4px rgba(20,35,47,.05),0 14px 36px rgba(20,35,47,.09);
  transition:transform 170ms ease, box-shadow 170ms ease;
}
@media (min-width:900px){
  .bl-feat { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
}
.bl-feat__img { background:#F4F7FA; min-height:260px; position:relative; }
.bl-feat__img > img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.bl-feat__body {
  padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; justify-content:center;
}
.bl-feat__title {
  font-size:clamp(23px,2.6vw,32px); line-height:1.18; font-weight:800;
  color:#14232F; margin:0 0 14px; letter-spacing:-.8px; text-wrap:pretty;
}
.bl-feat__text { font-size:16px; line-height:1.68; color:#5A6B7B; margin:0 0 22px; }
.bl-feat__foot {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px;
}
.bl-feat__foot .bl-read { font-size:15px; }

/* ── post card ──────────────────────────────────────────────────────── */
.bl-card {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #E2E9F0; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,35,47,.04),0 8px 22px rgba(20,35,47,.07);
  transition:transform 170ms ease, box-shadow 170ms ease;
}
.bl-card__img {
  background:#F4F7FA; border-bottom:1px solid #E2E9F0;
  aspect-ratio:16 / 9; position:relative;
}
.bl-card__img > img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.bl-card__body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.bl-card__cat { align-self:flex-start; margin-bottom:12px; }
.bl-card__title {
  font-size:18px; line-height:1.34; font-weight:800; color:#14232F;
  margin:0 0 9px; letter-spacing:-.3px; text-wrap:pretty;
}
.bl-card__text { font-size:14.5px; line-height:1.6; color:#5A6B7B; margin:0 0 16px; flex:1; }
.bl-card__foot {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:600; color:#5F7386;
  border-top:1px solid #EEF3F8; padding-top:13px;
}

/* ── subscribe band ─────────────────────────────────────────────────── */
.sub {
  margin:clamp(26px,3vw,36px) 0;
  background:#03244a; border-radius:20px; padding:clamp(26px,3.4vw,44px);
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,40px);
  align-items:center; box-shadow:0 18px 44px rgba(3,36,74,.22);
}
@media (min-width:900px){
  .sub { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
}
.sub__eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(240,165,0,.16); border-radius:99px; padding:7px 15px; margin-bottom:16px;
}
.sub__eyebrow > span:first-child { width:6px; height:6px; border-radius:50%; background:#F0A500; }
.sub__eyebrow > span:last-child {
  font-size:12.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#F0A500;
}
.sub__h2 {
  font-size:clamp(24px,2.8vw,34px); line-height:1.14; font-weight:800;
  color:#fff; margin:0 0 12px; letter-spacing:-1px;
}
.sub__h2 span { color:#5FA9DC; }
.sub__text { font-size:15.5px; line-height:1.65; color:#A9C2DA; margin:0; max-width:480px; }
.sub__form { display:flex; flex-wrap:wrap; gap:10px; }
.sub__form input[type="email"] {
  flex:1 1 220px; min-width:0; font-family:inherit; font-size:15.5px; color:#14232F;
  background:#fff; border:1px solid #fff; border-radius:10px; padding:15px 16px;
}
.sub__form button {
  flex:none; font-family:inherit; background:#F0A500; color:#2E2000;
  font-size:15.5px; font-weight:800; border:none; border-radius:10px;
  padding:15px 24px; cursor:pointer;
}
.sub__hp { position:absolute; left:-9999px; }
.sub__note { font-size:13px; color:#A9C2DA; margin:12px 0 0; }
.sub__done {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:20px 22px;
}
.sub__done-h { font-size:17px; font-weight:800; color:#fff; margin-bottom:5px; }
.sub__done-t { font-size:14.5px; line-height:1.6; color:#A9C2DA; }

/* ── load more and empty state ──────────────────────────────────────── */
.bl-more { text-align:center; margin-top:clamp(26px,3vw,36px); }
.bl-more__btn {
  display:inline-block; font-size:15.5px; font-weight:700; color:#0464ad;
  background:#fff; border:1.5px solid #CBDCEB; border-radius:10px; padding:14px 28px;
}
.bl-empty { text-align:center; font-size:15.5px; color:#5F7386; margin:24px 0 0; }

/* ── case study archive: hero extras ────────────────────────────────── */
.cs-hero__top {
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px); align-items:end;
  margin-bottom:clamp(24px,3vw,34px);
}
@media (min-width:1000px){
  .cs-hero__top { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
}
.cs-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cs-stat {
  background:#fff; border:1px solid #E2E9F0; border-radius:13px; padding:15px 16px;
  box-shadow:0 1px 2px rgba(20,35,47,.04),0 8px 22px rgba(20,35,47,.07);
}
.cs-stat--blue  { border-left:4px solid #0464ad; }
.cs-stat--amber { border-left:4px solid #F0A500; }
.cs-stat--navy  { border-left:4px solid #03244a; }
.cs-stat__v { font-size:24px; font-weight:800; line-height:1; letter-spacing:-.6px; }
.cs-stat--blue .cs-stat__v  { color:#0464ad; }
.cs-stat--amber .cs-stat__v { color:#8A6206; }
.cs-stat--navy .cs-stat__v  { color:#03244a; }
.cs-stat__l { font-size:12.5px; font-weight:600; color:#5A6B7B; margin-top:6px; }

.cs-filters {
  display:flex; flex-direction:column; gap:12px;
  background:#fff; border:1px solid #E2E9F0; border-radius:16px; padding:16px 18px;
  box-shadow:0 1px 2px rgba(20,35,47,.04),0 8px 22px rgba(20,35,47,.06);
}
.cs-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cs-filter__label {
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#5F7386; min-width:74px;
}

/* ── featured case study ────────────────────────────────────────────── */
.cs-feat {
  display:grid; grid-template-columns:minmax(0,1fr);
  background:#03244a; border-radius:22px; overflow:hidden;
  margin-bottom:clamp(22px,2.6vw,30px);
  box-shadow:0 18px 44px rgba(3,36,74,.24);
  transition:transform 170ms ease, box-shadow 170ms ease;
}
@media (min-width:900px){
  .cs-feat { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
}
.cs-feat__body {
  padding:clamp(26px,3.4vw,44px);
  display:flex; flex-direction:column; justify-content:center;
}
.cs-feat__head { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:20px; }
.cs-feat__kicker {
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#F0A500; margin-bottom:4px;
}
.cs-feat__where { font-size:14px; font-weight:600; color:#A9C2DA; }
.cs-feat__title {
  font-size:clamp(24px,2.8vw,34px); line-height:1.16; font-weight:800;
  color:#fff; margin:0 0 14px; letter-spacing:-.9px; text-wrap:pretty;
}
.cs-feat__metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
@media (min-width:640px){ .cs-feat__metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cs-feat__read { font-size:15.5px; font-weight:700; color:#fff; }
.cs-feat__img { min-height:280px; background:#0C3257; position:relative; }
.cs-feat__img > img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }

/*
 * The logo plate. A plate rather than a bare image, because client logos vary
 * wildly in shape and a transparent one on a photograph is unreadable.
 */
.cs-plate {
  display:flex; align-items:center; justify-content:center;
  flex:none; width:104px; height:52px;
  background:#fff; border-radius:12px; overflow:hidden; padding:8px;
  box-shadow:0 6px 18px rgba(3,36,74,.18);
}
.cs-feat .cs-plate { width:110px; height:60px; }
.cs-plate img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

.cs-metric { background:#fff; border-radius:12px; padding:13px 14px; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.cs-metric--tint { background:#F0F6FC; border:1px solid #D7E6F4; border-radius:11px; padding:11px 12px; box-shadow:none; }
.cs-metric__v { font-size:22px; font-weight:800; line-height:1; color:#0464ad; letter-spacing:-.6px; }
.cs-metric--tint .cs-metric__v { font-size:20px; letter-spacing:-.5px; }
.cs-metric__l {
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#5F7386; margin-top:6px;
}

/* ── count row, grid, cards ─────────────────────────────────────────── */
.cs-count {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px; font-size:14.5px; font-weight:700; color:#14232F;
}
.cs-clear { font-size:14px; font-weight:700; color:#0464ad; }
.cs-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
@media (min-width:640px){ .cs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .cs-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.cs-card {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #E2E9F0; border-radius:18px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,35,47,.04),0 8px 22px rgba(20,35,47,.07);
  transition:transform 170ms ease, box-shadow 170ms ease;
}
.cs-card__img {
  position:relative; background:#F4F7FA; border-bottom:1px solid #E2E9F0;
  aspect-ratio:16 / 9;
}
.cs-card__img > img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.cs-card__badge { position:absolute; left:14px; bottom:-22px; z-index:2; }
.cs-withheld {
  display:inline-block; background:#03244a; color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  border-radius:9px; padding:9px 13px; box-shadow:0 6px 18px rgba(3,36,74,.22);
}
.cs-card__body { padding:34px 22px 22px; display:flex; flex-direction:column; flex:1; }
.cs-card__tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cs-card__title {
  font-size:18.5px; line-height:1.32; font-weight:800; color:#14232F;
  margin:0 0 14px; letter-spacing:-.3px; text-wrap:pretty;
}
.cs-card__metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.cs-card__chips {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;
  flex:1; align-content:flex-start;
}
.cs-chip {
  font-size:12.5px; font-weight:700; color:#14232F;
  border:1px solid #CBDCEB; border-radius:99px; padding:4px 10px;
}
.cs-card__foot {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid #EEF3F8; padding-top:13px;
  font-size:13px; font-weight:600; color:#5F7386;
}
.cs-card__foot .bl-read { font-size:14.5px; }

.cs-empty {
  text-align:center; background:#fff; border:1px dashed #CBDCEB;
  border-radius:16px; padding:34px 20px;
}
.cs-empty__h { font-size:17px; font-weight:800; color:#14232F; margin-bottom:6px; }
.cs-empty__t { font-size:15px; color:#5A6B7B; margin:0 0 14px; }
.cs-empty__btn {
  display:inline-block; font-size:14.5px; font-weight:700; color:#0464ad;
  background:#fff; border:1.5px solid #CBDCEB; border-radius:10px; padding:11px 20px;
}

/* ── closing band ───────────────────────────────────────────────────── */
.cs-cta { background:#fff; border-bottom:1px solid #E2E9F0; }
.cs-cta__in { max-width:1220px; margin:0 auto; padding:clamp(44px,5.4vw,72px) clamp(16px,3.5vw,36px); }
.cs-cta__box {
  background:linear-gradient(135deg,#0464ad 0%,#03244a 100%);
  border-radius:22px; padding:clamp(28px,3.6vw,48px);
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,40px);
  align-items:center; box-shadow:0 18px 44px rgba(4,100,173,.24);
}
@media (min-width:1000px){
  .cs-cta__box { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .cs-cta__act { justify-content:flex-end; }
}
.cs-cta__h2 {
  font-size:clamp(24px,2.8vw,34px); line-height:1.14; font-weight:800;
  color:#fff; margin:0 0 12px; letter-spacing:-1px;
}
.cs-cta__h2 span { color:#F0A500; }
.cs-cta__t { font-size:16px; line-height:1.65; color:#D3E6F7; margin:0; max-width:560px; }
.cs-cta__act { display:flex; flex-wrap:wrap; gap:12px; }
.cs-cta__btn {
  white-space:nowrap; background:#F0A500; color:#2E2000;
  font-size:15.5px; font-weight:800; padding:16px 28px; border-radius:10px;
}