/*
 * Case study — v3.
 *
 * The cover does the visual work; the body does the reading work. That split is
 * what lets a one-section case study and a five-section one look like the same
 * page — the difference lands in a part of the page that is fixed height.
 *
 * No numbered sections, no contents list, no approach diagrams. All of that
 * existed to impose structure on content that is paragraphs.
 *
 *  from the handoff is deliberately not carried over: it is the
 * design tool's drop affordance and ships nowhere.
 */
*{box-sizing:border-box;}
.ph { position: relative; }
.ph::after { content: ""; position: absolute; top: -3px; right: -9px; width: 7px; height: 7px; border-radius: 50%; background: #F0A500; }
.toc { background: #FFFFFF; border: 1px solid #E2E9F0; border-radius: 16px; padding: clamp(20px,2.4vw,28px); box-shadow: 0 2px 10px rgba(20,35,47,.05); }
.toc__label { font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #8A6206; margin-bottom: 16px; }
.toc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 2px 26px; }
.toc__item { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid #F0F4F8; color: #14232F; }
.toc__item:hover { color: #0464AD; }
.toc__item:focus-visible { outline: 2px solid #0464AD; outline-offset: 2px; }
.toc__n { flex: none; font-size: 12px; font-weight: 800; color: #5F7386; font-variant-numeric: tabular-nums; }
.toc__t { font-size: 15px; font-weight: 700; line-height: 1.4; }
.toc__time { margin-left: auto; font-size: 12.5px; color: #5F7386; white-space: nowrap; }
.secn { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.secn__n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #0464AD; color: #FFFFFF; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.secn__rule { flex: 1; border-top: 1px solid #E2E9F0; }
.tl { --months: 9; }
.tl__ruler { display: grid; grid-template-columns: 148px repeat(var(--months), minmax(0,1fr)); gap: 0 4px; align-items: end; margin-bottom: 10px; }
.tl__rlabel { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5F7386; }
.tl__m { font-size: 12px; font-weight: 700; color: #5F7386; text-align: center; padding-bottom: 8px; border-bottom: 2px solid #E2E9F0; }
.tl__row { display: grid; grid-template-columns: 148px repeat(var(--months), minmax(0,1fr)); gap: 0 4px; align-items: center; }
.tl__row + .tl__row { margin-top: 8px; }
.tl__name { font-size: 13.5px; font-weight: 700; color: #14232F; line-height: 1.35; padding-right: 12px; }
.tl__track { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--months), minmax(0,1fr)); gap: 0 4px; }
.tl__bar { height: 34px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: #FFFFFF; overflow: hidden; white-space: nowrap; }
.tl__bar--deep { background: #03244A; }
.tl__bar--mid { background: #0464AD; }
.tl__bar--light { background: #5FA9DC; color: #0C2E4A; }
.tl__bar--pale { background: #BBD8EF; color: #0C2E4A; }
.tl__bar--open { border-radius: 8px 0 0 8px; }
.tl__note { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: #5F7386; }
.tl__scroll { overflow-x: auto; }
.tl__inner { min-width: 780px; }
.find { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 14px; }
.find__card { background: #FFFFFF; border: 1px solid #E2E9F0; border-left: 3px solid #F0A500; border-radius: 0 14px 14px 0; padding: 20px 22px; }
.find__t { font-size: 16px; font-weight: 800; color: #14232F; margin-bottom: 7px; letter-spacing: -.2px; }
.find__d { font-size: 14.5px; line-height: 1.6; color: #5A6B7B; }
.find__cost { margin-top: 12px; font-size: 13px; font-weight: 700; color: #8A6206; background: #FDF4E0; border-radius: 7px; padding: 7px 11px; display: inline-block; }
.miss { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.miss__card { background: #F7FAFD; border: 1px solid #CBDCEB; border-radius: 16px; padding: 22px 24px; }
.miss__label { font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #5F7386; margin-bottom: 9px; }
.miss__t { font-size: 16.5px; font-weight: 800; color: #14232F; margin-bottom: 8px; letter-spacing: -.3px; }
.miss__d { font-size: 14.5px; line-height: 1.6; color: #5A6B7B; }
.miss__learn { margin-top: 13px; padding-top: 13px; border-top: 1px solid #CBDCEB; font-size: 14px; line-height: 1.55; color: #14232F; font-weight: 700; }
.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; }
.res__cell { background: #03244A; padding: 26px 24px; }
.res__v { font-size: clamp(30px,3.6vw,44px); font-weight: 800; line-height: 1; color: #FFFFFF; letter-spacing: -1.4px; display: inline-block; }
.res__u { font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #F0A500; margin-top: 11px; }
.res__n { font-size: 13.5px; line-height: 1.5; color: #A9C2DA; margin-top: 7px; }
.lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.lockup__plate { flex: none; display: flex; align-items: center; justify-content: center;
                   width: 104px; height: 60px; background: #FFFFFF; border: none;
                   border-radius: 12px; position: relative; overflow: hidden; }
.lockup__rule { flex: none; width: 1px; align-self: stretch; background: rgba(255,255,255,.18); }
.lockup__name { font-size: 19px; font-weight: 800; color: #FFFFFF; letter-spacing: -.4px; line-height: 1.2; }
.lockup__sector { font-size: 14px; color: #A9C2DA; margin-top: 3px; }
.ev { background: #FFFFFF; border: 1px solid #E2E9F0; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 14px rgba(20,35,47,.06); }
.ev__chrome { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                padding: 13px 18px; background: #F7FAFD; border-bottom: 1px solid #E2E9F0; }
.ev__dots { display: flex; gap: 6px; flex: none; }
.ev__dot { width: 9px; height: 9px; border-radius: 50%; background: #CBDCEB; }
.ev__src { font-size: 13px; font-weight: 700; color: #14232F; }
.ev__range { font-size: 12.5px; color: #5F7386; }
.ev__redacted { margin-left: auto; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
                  text-transform: uppercase; color: #8A6206; background: #FDF4E0;
                  border-radius: 6px; padding: 5px 9px; white-space: nowrap; }
.ev__shot { position: relative; background: #F0F4F8; }
.ev__mark { position: absolute; width: 28px; height: 28px; border-radius: 50%;
              background: #F0A500; color: #2E2000; font-size: 13px; font-weight: 800;
              display: flex; align-items: center; justify-content: center;
              box-shadow: 0 2px 10px rgba(20,35,47,.28); transform: translate(-50%,-50%); }
.ev__legend { border-top: 1px solid #E2E9F0; }
.ev__item { display: flex; gap: 13px; align-items: flex-start; padding: 15px 18px; }
.ev__item + .ev__item { border-top: 1px solid #F0F4F8; }
.ev__n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #FDF4E0;
           color: #8A6206; font-size: 12px; font-weight: 800; display: flex;
           align-items: center; justify-content: center; margin-top: 1px; }
.ev__t { font-size: 14.5px; line-height: 1.6; color: #5A6B7B; }
.ev__t strong { color: #14232F; font-weight: 700; }
.ev__note { padding: 13px 18px; background: #F7FAFD; border-top: 1px solid #E2E9F0;
              font-size: 12.5px; line-height: 1.55; color: #5F7386; }
.quote { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(21px,2.5vw,30px); line-height: 1.45; color: #14232F; letter-spacing: -.4px; margin: 0 0 24px; }
.prose p { font-size: 16.5px; line-height: 1.75; color: #5A6B7B; margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: #14232F; font-weight: 700; }
@media (max-width: 899px) {
    .tl__ruler, .tl__row { grid-template-columns: 120px repeat(var(--months), minmax(0,1fr)); }
  }
.cv { position: relative; background: #03244a; overflow: hidden; }
.cv__art { position: absolute; inset: 0 0 0 auto; width: 58%; z-index: 0; pointer-events: auto; }
.cv__art img,
  .cv__art image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, #03244a 0%, #03244a 34%, rgba(3,36,74,.82) 52%, rgba(3,36,74,.32) 78%, rgba(3,36,74,.18) 100%),
      linear-gradient(180deg, rgba(3,36,74,.42) 0%, rgba(3,36,74,0) 30%, rgba(3,36,74,.42) 100%);
  }
.cv__in { position: relative; z-index: 2; max-width: 1300px; margin: 0 auto;
            padding: clamp(30px,3.6vw,50px) clamp(16px,3.5vw,36px) clamp(38px,4.4vw,60px);
            pointer-events: none; }
.cv__in a, .cv__in button, .cv__in input, .cv__in .wm__card, .cv__in .fs { pointer-events: auto; }
.cv__col { max-width: 760px; }
.cv__lock { display: flex; align-items: stretch; gap: 14px; margin-bottom: clamp(22px,2.8vw,34px); }
.cv__plate { flex: none; width: 116px; height: 64px; background: #fff; border-radius: 12px;
               position: relative; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.20); }
/*
 * The plate clips whatever is inside it, and the handoff centred and capped the
 * logo in JavaScript — which does not survive being rendered by WordPress. With
 * no rule here the image draws at its natural size and the mark is cut off at
 * the plate edge. Client logos arrive at wildly different aspect ratios, so the
 * cap is proportional rather than fixed.
 */
.cv__plate img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
                 max-width: 78%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.cv__accent { flex: none; width: 3px; min-height: 48px; background: #F0A500; border-radius: 2px; }
.cv__name { font-size: 16px; font-weight: 800; line-height: 1.3; color: #fff; letter-spacing: -.2px; }
.cv__sector { font-size: 13.5px; line-height: 1.45; color: #BCDCF5; margin-top: 4px; }
.wm { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(26px,3.2vw,40px); }
.wm__card { display: flex; align-items: center; gap: 16px; background: #fff;
              border-radius: 14px; padding: 18px 22px; min-width: 248px;
              box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 16px 38px rgba(0,0,0,.24); }
.wm__v { font-size: clamp(30px,3.4vw,40px); font-weight: 800; line-height: 1;
           letter-spacing: -1.4px; color: #0464ad; flex: none; }
.wm__l { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #14232F; }
.cv__h1 { font-weight: 800; font-size: clamp(27px,3.4vw,44px); line-height: 1.12;
            letter-spacing: -1.3px; color: #fff; margin: 0; text-wrap: balance; }
.cv__note { font-size: 13.5px; line-height: 1.6; color: #BCDCF5; margin: 18px 0 0;
              padding: 12px 16px; background: rgba(255,255,255,.08);
              border-left: 3px solid #F0A500; border-radius: 0 10px 10px 0; max-width: 620px; }
@media (max-width: 1000px) {
    /* The art goes full-bleed behind everything and the veil goes heavier,
       because at this width there is no room for a left column to be clear
       of it. */
    .cv__art { width: 100%; }
    .cv__veil { background:
      linear-gradient(90deg, #03244a 0%, rgba(3,36,74,.92) 55%, rgba(3,36,74,.74) 100%),
      linear-gradient(180deg, rgba(3,36,74,.55) 0%, rgba(3,36,74,.35) 100%); }
  }
@media (max-width: 560px) {
    .wm__card { min-width: 0; width: 100%; }
  }
.fs { display: grid; gap: 1px; background: #E2E9F0; border: 1px solid #E2E9F0;
        border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.22);
        grid-template-columns: repeat(5, minmax(0,1fr)); margin-top: clamp(26px,3.2vw,38px); }
.fs__cell { background: #fff; padding: 16px 18px; }
.fs__k { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
           color: #5F7386; margin-bottom: 7px; }
.fs__v { font-size: 15px; font-weight: 700; color: #14232F; }
@media (max-width: 1000px) { .fs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .fs { grid-template-columns: 1fr; } }
.bd { max-width: 780px; }
.bd__sec + .bd__sec { margin-top: clamp(38px,4.6vw,58px); }
.bd__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.bd__eyebrow span:first-child { width: 22px; height: 3px; background: #F0A500; border-radius: 2px; }
.bd__eyebrow span:last-child { font-size: 12px; font-weight: 800; letter-spacing: .14em;
                                 text-transform: uppercase; color: #8A6206; }
.bd__h2 { font-size: clamp(23px,2.7vw,33px); line-height: 1.16; font-weight: 800;
            color: #14232F; letter-spacing: -.9px; margin: 0 0 16px; }
.bd p { font-size: 17px; line-height: 1.72; color: #14232F; margin: 0 0 16px; }
.bd p:last-child { margin-bottom: 0; }
.bd ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex;
           flex-direction: column; gap: 10px; }
.bd li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.6; color: #14232F; }
.bd li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px;
                   border-radius: 50%; background: #0464ad; }
.bd__sec--takeaway { background: #F5FAFE; border-left: 4px solid #0464ad;
                       border-radius: 0 16px 16px 0; padding: clamp(24px,2.8vw,34px); }
.bd__sec--takeaway .bd p:last-child { margin-bottom: 0; }
.fig { margin: clamp(26px,3vw,36px) 0 0; }
.fig__frame { background: #fff; border: 1px solid #E2E9F0; border-radius: 14px;
                overflow: hidden; box-shadow: 0 2px 10px rgba(20,35,47,.05), 0 14px 34px rgba(20,35,47,.09); }
.fig__chrome { display: flex; align-items: center; gap: 8px; padding: 11px 14px;
                 background: #F7FAFD; border-bottom: 1px solid #E2E9F0; }
.fig__dot { width: 9px; height: 9px; border-radius: 50%; background: #CBDCEB; }
.fig__label { margin-left: 5px; font-size: 12.5px; font-weight: 700; color: #5F7386; }
.fig__cap { font-size: 13.5px; line-height: 1.6; color: #5F7386; margin: 11px 0 0; }
.fig__redact { display: inline-block; font-size: 12px; font-weight: 700; color: #8A6206;
                 background: #FDF4E0; border-radius: 8px; padding: 6px 11px; margin-top: 9px; }
.tm { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
        gap: 18px; }
.tm__card { background: #fff; border: 1px solid #E2E9F0; border-top: 4px solid #F0A500;
              border-radius: 16px; padding: 26px 28px;
              box-shadow: 0 2px 6px rgba(20,35,47,.04), 0 14px 34px rgba(20,35,47,.08); }
.tm__q { font-family: "Source Serif 4", Georgia, serif; font-size: 18.5px; line-height: 1.55;
           color: #14232F; margin: 0 0 20px; }
.tm__by { display: flex; align-items: center; gap: 14px; }
.tm__plate { flex: none; width: 82px; height: 54px; background: #fff; border: 1px solid #E2E9F0;
               border-radius: 11px; position: relative; overflow: hidden; }
.tm__name { font-size: 16px; font-weight: 800; color: #14232F; }
.tm__role { font-size: 13.5px; color: #5F7386; margin-top: 2px; }

/*
 * Four metrics in one line.
 *
 * The handoff caps at three because a 248px card cannot carry a 40px figure.
 * Four fit only by changing the card, not by squeezing it: value above label
 * instead of beside it, and a smaller figure. The column is 760px, so four
 * cards get (760 - 3 gaps) / 4 ≈ 179px each.
 */
.wm--4 { flex-wrap: nowrap; gap: 10px; }
.wm--4 .wm__card { min-width: 0; flex: 1 1 0; flex-direction: column; align-items: flex-start;
                   gap: 6px; padding: 14px 16px; }
.wm--4 .wm__v { font-size: clamp(22px,2.2vw,29px); letter-spacing: -1px; }
.wm--4 .wm__l { font-size: 12.5px; line-height: 1.3; }
@media (max-width: 860px) {
  /* Below this four slivers are unreadable; two rows of two instead. */
  .wm--4 { flex-wrap: wrap; }
  .wm--4 .wm__card { flex: 1 1 calc(50% - 5px); }
}
@media (max-width: 560px) {
  .wm--4 .wm__card { flex: 1 1 100%; }
}

/* Cover art is optional. With none, the cover is flat navy and still reads as
   intentional — the veil and the art box simply do not render. */
.cv--noart .cv__art, .cv--noart .cv__veil { display: none; }


/* ── Body: content column plus a sticky form ───────────────────────────── */
/* The bottom CTA is gone; the form travels with the reader instead, so the
   ask is present at the moment the proof lands rather than after it. */
.csbody { max-width: 1300px; margin: 0 auto; padding: clamp(40px,5vw,72px) clamp(16px,3.5vw,36px);
          display: grid; gap: clamp(30px,3.4vw,52px); align-items: start; }
@media (min-width: 1040px) { .csbody { grid-template-columns: minmax(0,1fr) 360px; } }
.csbody__main { min-width: 0; max-width: 780px; }
/* 77px header + breathing room. */
.csbody__aside { position: sticky; top: 97px; }
@media (max-width: 1039px) { .csbody__aside { position: static; } }
.csform { background: #fff; border: 1px solid #E2E9F0; border-radius: 18px;
          padding: clamp(20px,2.4vw,26px); box-shadow: 0 14px 40px rgba(20,35,47,.10); }
.csform__tag { display: inline-flex; align-items: center; gap: 7px; background: #FDF4E0;
               border-radius: 99px; padding: 6px 13px; margin-bottom: 14px;
               font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
               text-transform: uppercase; color: #8A6206; }

/* ── Readability: structure the prose rather than leaving it flat ──────── */
/* Each approach item arrives as "<strong>Title</strong> detail". Promoting the
   lead-in to its own line turns a run of paragraphs into a scannable list
   without changing the content. */
.bd__sec p > strong:first-child { display: block; font-size: 16.5px; color: #14232F;
                                  letter-spacing: -.2px; margin-bottom: 5px; }
.bd__sec p { margin: 0 0 20px; }
.bd__sec ul { margin: 0 0 22px; padding: 0; list-style: none; }
.bd__sec li { position: relative; padding-left: 26px; margin-bottom: 11px;
              font-size: 16px; line-height: 1.7; color: #5A6B7B; }
.bd__sec li::before { content: ""; position: absolute; left: 4px; top: 10px;
                      width: 7px; height: 7px; border-radius: 50%; background: #F0A500; }
.bd__sec li strong { color: #14232F; }

/* ── Related case studies ─────────────────────────────────────────────── */
/* The card leads with the single figure that matters most, because that is
   what makes a reader click through — the title alone rarely does. The
   supporting numbers sit underneath in their own boxes so the hook keeps its
   weight instead of competing with three equals. */
.rel { background: #F7FAFD; border-top: 1px solid #E2E9F0; }
.rel__in { max-width: 1300px; margin: 0 auto; padding: clamp(48px,5.6vw,80px) clamp(16px,3.5vw,36px); }
.rel__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline;
             justify-content: space-between; margin-bottom: clamp(24px,3vw,36px); }
.rel__h2 { font-size: clamp(24px,2.8vw,34px); font-weight: 800; color: #14232F;
           margin: 0; letter-spacing: -1px; }
.rel__all { font-size: 15.5px; font-weight: 700; color: #0464AD; white-space: nowrap; }
.rel__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 680px)  { .rel__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1040px) { .rel__grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

.rel__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E2E9F0;
             border-radius: 18px; overflow: hidden; color: inherit;
             transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease; }
@media (hover: hover) {
  .rel__card:hover { border-color: #0464AD; box-shadow: 0 18px 44px rgba(4,100,173,.14); transform: translateY(-3px); }
}
.rel__card:focus-visible { outline: 2px solid #0464AD; outline-offset: 3px; }

/* Lockup row. Named cards carry the client's mark; anonymous ones carry the
   same 3px amber accent the cover uses — never a substitute mark. */
.rel__lock { display: flex; align-items: center; gap: 12px; height: 44px;
             padding: 18px 24px 0; }
.rel__plate { flex: none; width: 88px; height: 44px; background: #fff; border: 1px solid #E2E9F0;
              border-radius: 9px; display: flex; align-items: center; justify-content: center;
              overflow: hidden; padding: 6px; }
.rel__plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rel__accent { flex: none; width: 3px; height: 32px; border-radius: 2px; background: #F0A500; }
.rel__anon { font-size: 12.5px; font-weight: 700; color: #5F7386; line-height: 1.3; }
.rel__sector { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
               color: #8A6206; padding: 14px 24px 0; }

/* The hook. Tinted band so the figure reads before anything else on the card. */
.rel__hook { margin: 14px 24px 0; padding: 16px 18px; border-radius: 14px;
             background: linear-gradient(135deg,#EAF4FD 0%,#F7FAFD 100%);
             border: 1px solid #D6E7F6; }
.rel__hookv { font-size: clamp(32px,3.2vw,42px); font-weight: 800; line-height: 1;
              letter-spacing: -1.6px; color: #0464AD; }
.rel__hookl { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
              color: #8A6206; margin-top: 8px; }

.rel__t { font-size: 18.5px; font-weight: 800; color: #14232F; line-height: 1.34;
          letter-spacing: -.35px; margin: 16px 24px 0; }

/* Supporting numbers — boxed, so they read as evidence rather than as more hooks. */
.rel__boxes { display: grid; gap: 8px; margin: 16px 24px 0;
              grid-template-columns: repeat(auto-fit,minmax(88px,1fr)); }
.rel__box { background: #F7FAFD; border: 1px solid #E2E9F0; border-radius: 10px; padding: 10px 12px; }
.rel__boxv { font-size: 16.5px; font-weight: 800; color: #14232F; line-height: 1.1; letter-spacing: -.4px; }
.rel__boxl { font-size: 11px; font-weight: 700; color: #5F7386; line-height: 1.3; margin-top: 4px; }

.rel__go { margin: auto 24px 0; padding: 18px 0 22px; font-size: 14.5px; font-weight: 800; color: #0464AD; }
.rel__go span { display: inline-block; transition: transform 170ms ease; }
@media (hover: hover) { .rel__card:hover .rel__go span { transform: translateX(4px); } }


/* Quote plate. Same treatment as the cover lockup — a fixed white box so any
   logo sits correctly regardless of aspect ratio or ink density. */
.quote__plate { flex: none; width: 86px; height: 58px; background: #fff; border: 1px solid #E2E9F0;
                border-radius: 12px; display: flex; align-items: center; justify-content: center;
                overflow: hidden; padding: 8px; }
.quote__plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }