/* ==========================================================================
   RIA Advisory — CAREERS  ·  rebuild 2026-08-20

   This file is deliberately SMALL. The two biggest pieces of the page are not
   styled here at all:
     · the HERO reuses the approved product hero (.pd-hero / .pd-hero__grid /
       .pd-hero__shot) straight out of product-detail.css, which this page
       loads. Same stylesheet, so it cannot drift from the approved page.
     · LIFE AT RIA reuses the approved homepage testimonial component
       (.r3-tst) from round3-final.css, wired by round3-final.js.
   Only the openings table, the filter chips, the shared band head and the CTA
   live here, plus a few careers-scoped overrides on .r3-tst.

   WHY A LIST, NOT CARDS: only 4 of the 10 postings carry a summary, so a card
   grid produced visibly uneven boxes — the client's exact complaint. A ruled
   list gives every role an identical row regardless of how much the posting
   happens to say.

   CLIENT RULES: linear gradients only, no circles (the avatar in .r3-tst is
   overridden to a rounded square here), no "01/02" numbering in copy.

   HOUSE RULES: clamp()/calc() need SPACES around +/- ; grid/flex children
   that hold text need min-width: 0 .
   ========================================================================== */

/* .r3-rail is already hidden by product-detail.css, which this page loads. */

/* ==========================================================================
   BAND 1 · HERO — the approved product hero, with one careers-only tweak
   A product screenshot is wide and short; team.jpg is close to square, so
   left alone it made the panel tall and opened a void above the copy. Crop
   it to a banner ratio with object-fit so the panel stays banner-height.
   Everything else about the hero comes from product-detail.css.
   ========================================================================== */
.cr-hero .pd-hero__shot { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 42%; }
@media (max-width: 1040px) {
  .cr-hero .pd-hero__shot { aspect-ratio: 16 / 10; }
}

.cr-eyebrow { display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.cr-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--orange); }

.cr-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.2rem, .9rem + 2vw, 3rem); align-items: end;
  margin-bottom: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem); }
.cr-head > * { min-width: 0; }
.cr-head h2 { font-size: clamp(1.7rem, 1.15rem + 2.4vw, 2.7rem); line-height: 1.08;
  letter-spacing: -.03em; margin: .85rem 0 0; }
.cr-head__aside { color: var(--slate); font-size: 1rem; line-height: 1.64; }
@media (max-width: 900px) { .cr-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ==========================================================================
   SPACING — the shared .section is padded up to 6.5rem top AND bottom, so
   two stacked bands opened ~208px of dead air. This page runs tighter.
   ========================================================================== */
/* MUST be `.r3 .x`: the shared rule is `.r3 .section` (0,2,0), so a bare
   class (0,1,0) loses and the tightening never applied. */
.r3 .cr-roles, .r3 .cr-life, .r3 .cr-cta { padding-block: clamp(2rem, 1.5rem + 1.8vw, 3.2rem); }

/* ==========================================================================
   BAND 2 · OPEN ROLES — a dense two-line row, not a spread-out table
   The four-column table stretched title / location / experience / arrow
   across the full 1340px container, leaving big dead gaps mid-row. Now the
   title and its meta sit together on the left, the actions sit together on
   the right, and the list is capped so the two never drift apart.
   ========================================================================== */
.cr-roles { background: var(--white); }

/* ==========================================================================
   FILTER BAR — what a job board actually gives you
   A keyword search over the title AND the full description, plus location
   and minimum-experience facets and a clear control. A single location
   dropdown was not a filter, it was a dropdown.
   ========================================================================== */
.cr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cr-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem .8rem; align-items: center;
  padding: clamp(.7rem, .6rem + .5vw, 1rem);
  border-radius: 14px; background: #F7FAFD; border: 1px solid var(--line);
  margin-bottom: clamp(1rem, .8rem + .8vw, 1.4rem); }

/* search */
.cr-f-search { position: relative; display: flex; align-items: center; min-width: 0; }
.cr-f-search > i { position: absolute; left: .95rem; font-size: .82rem; color: #9aa6b5;
  pointer-events: none; }
.cr-f-search input { width: 100%; min-width: 0; font: inherit; font-size: .9rem;
  color: var(--ink); background: var(--white);
  padding: .68rem 2.4rem .68rem 2.5rem; border-radius: 10px;
  border: 1px solid var(--line-2);
  transition: border-color .22s ease, box-shadow .22s ease; }
.cr-f-search input::placeholder { color: #9aa6b5; }
.cr-f-search input:focus { outline: none; border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(77,159,215,.16); }
/* native search UI would double up with our own clear button */
.cr-f-search input::-webkit-search-cancel-button { display: none; }
.cr-f-clearq { position: absolute; right: .55rem; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 7px;
  border: 0; background: transparent; color: #9aa6b5; font-size: .78rem;
  transition: background .2s ease, color .2s ease; }
.cr-f-clearq:hover { background: var(--line); color: var(--navy); }
/* An explicit `display` beats the [hidden] attribute's UA `display: none`,
   so the button stayed visible on an empty field until this rule. */
.cr-f-clearq[hidden] { display: none; }

/* facets */
.cr-f-facets { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cr-select { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.cr-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--navy);
  padding: .62rem 2.3rem .62rem 1rem; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--white); cursor: pointer;
  transition: border-color .22s ease, box-shadow .22s ease; }
.cr-select select:hover { border-color: var(--navy); }
.cr-select select:focus-visible { outline: none; border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(77,159,215,.16); }
/* chevron sits over the control; pointer-events off so clicks reach it */
.cr-select i { position: absolute; right: .95rem; pointer-events: none;
  font-size: .66rem; color: var(--slate); }

.cr-f-clear { padding: .62rem .95rem; border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  font-size: .84rem; font-weight: 600; color: var(--navy); white-space: nowrap;
  transition: background .22s ease, border-color .22s ease; }
.cr-f-clear:hover { background: var(--white); border-color: var(--line-2); }
.cr-f-clear[hidden] { display: none; }

/* Only rendered while a filter is on — :empty keeps it from reserving a
   blank line at rest, since the page carries no standing role count. */
.cr-f-count { grid-column: 1 / -1; margin: 0; padding-left: .25rem;
  font-size: .82rem; color: var(--slate); }
.cr-f-count:empty { display: none; }

@media (max-width: 860px) {
  .cr-filters { grid-template-columns: minmax(0, 1fr); }
  .cr-f-facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-f-facets .cr-select select { width: 100%; }
  .cr-f-clear { grid-column: 1 / -1; justify-self: start; padding-inline: 0; }
}

/* NOT capped. An earlier version limited this to 1040px while the band head
   above it ran the full container, so the two had different right edges and
   the section looked misaligned. The list now shares the container exactly. */
.cr-list { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line); }
.cr-row { border-bottom: 1px solid var(--line); }
.cr-row[hidden] { display: none; }

.cr-row__in { position: relative; display: flex; align-items: center; gap: 1.2rem;
  min-width: 0; padding: 1rem 1rem 1rem 1.15rem;
  border-radius: 10px; transition: background .22s ease; }
/* A navy accent slides down the left edge on hover — the only ornament, and
   it gives the row somewhere to "land" instead of just tinting. */
.cr-row__in::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 3px; border-radius: 3px; background: var(--navy);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cr-row:hover .cr-row__in { background: #F7FAFD; }
.cr-row:hover .cr-row__in::before { transform: scaleY(1); }

.cr-row__main { flex: 1 1 auto; min-width: 0; }
.cr-row__title { font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: clamp(1rem, .94rem + .32vw, 1.14rem); letter-spacing: -.018em;
  line-height: 1.3; color: var(--ink); margin: 0;
  transition: color .22s ease; }
.cr-row:hover .cr-row__title { color: var(--navy); }

/* Location / experience as PILLS, deliberately the same family as the filter
   chips above — the band then reads as one designed component instead of a
   spreadsheet. The earlier version used tiny square bullets plus mono grey
   text, which looked fussy and weak. */
.cr-row__pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.cr-pill { display: inline-flex; align-items: center; gap: .38rem; white-space: nowrap;
  padding: .28rem .68rem; border-radius: 999px;
  background: var(--sky-tint, #F1F7FC); border: 1px solid rgba(29,65,121,.14);
  font-size: .76rem; font-weight: 600; color: var(--navy); }
.cr-pill i { font-size: .66rem; color: var(--sky); }
/* Experience reads as a qualifier, not a place — quieter. */
.cr-pill--q { background: var(--white); border-color: var(--line-2); color: var(--slate); }
.cr-pill--q i { color: #9aa6b5; }

.cr-row__act { flex: none; display: flex; align-items: center; gap: .8rem; }
/* Details is a TOGGLE, not a link. The client does not want visitors handed
   off to the job board, so the full description is rendered on this page and
   this button expands it in place. */
.cr-row__jd { display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--slate);
  white-space: nowrap; transition: color .22s ease; }
.cr-row__jd:hover { color: var(--navy); }
.cr-row__jd i { font-size: .62rem; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cr-row.is-open .cr-row__jd { color: var(--navy); }
.cr-row.is-open .cr-row__jd i { transform: rotate(180deg); }

/* The expanding description. grid-template-rows 0fr→1fr animates to the
   content's natural height — no guessed max-height, which would either clip
   a long JD or make a short one feel slow. */
.cr-jd { display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1), visibility .4s; }
.cr-row.is-open .cr-jd { grid-template-rows: 1fr; visibility: visible; }
.cr-jd__in { overflow: hidden; min-width: 0; }
.cr-jd__body { max-width: 68ch; padding: .2rem 1.15rem 1.5rem;
  color: var(--slate); font-size: .9rem; line-height: 1.68; }
.cr-jd__body h4 { margin: 1.2rem 0 .5rem; font-size: .95rem; letter-spacing: -.014em;
  color: var(--ink); }
.cr-jd__body h4:first-child { margin-top: 0; }
.cr-jd__body p { margin: 0 0 .75rem; }
.cr-jd__body strong { color: var(--ink); font-weight: 700; }
.cr-jd__body ul, .cr-jd__body ol { margin: 0 0 .9rem; padding-left: 1.1rem; }
.cr-jd__body li { margin-bottom: .4rem; padding-left: .2rem; }
.cr-jd__body li::marker { color: var(--sky); }
.cr-jd__foot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .9rem 1.15rem 1.4rem; border-top: 1px solid var(--line); }
.cr-jd__close { font-size: .82rem; font-weight: 600; color: var(--slate);
  transition: color .22s ease; }
.cr-jd__close:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* Solid navy: Apply is the primary action on this page, so it should look it. */
.cr-row__apply { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .6rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  font-size: .84rem; font-weight: 600;
  transition: background .22s ease, border-color .22s ease, transform .22s ease,
              box-shadow .22s ease; }
.cr-row__apply svg { width: 13px; height: 13px; stroke-width: 2;
  transition: transform .22s ease; }
.cr-row__apply:hover { background: #2f5f9e; border-color: #2f5f9e;
  box-shadow: 0 12px 22px -14px rgba(29,65,121,.9); }
.cr-row__apply:hover svg { transform: translateX(3px); }

.cr-empty { margin: 1.2rem 0 0; font-size: .95rem; color: var(--slate); }
.cr-empty[hidden] { display: none; }
.cr-empty a { color: var(--navy); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; }

/* MOBILE. The desktop row is title-left / actions-right; below 700px there is
   no room for that, so it stacks — but the actions must still use the full
   width rather than huddling on the left, or the row reads as unfinished and
   eats a lot of height. Details sits left, Apply right, on one line. */
@media (max-width: 700px) {
  .cr-row__in { flex-wrap: wrap; gap: .55rem;
    padding: .85rem .8rem .9rem 1rem; }
  .cr-row__main { flex: 1 1 100%; }
  .cr-row__title { font-size: .98rem; }
  .cr-row__pills { margin-top: .45rem; gap: .3rem; }
  .cr-pill { padding: .24rem .6rem; font-size: .72rem; }
  .cr-row__act { width: 100%; justify-content: space-between; align-items: center; gap: .6rem; }
  .cr-row__apply { padding: .5rem 1.05rem; font-size: .8rem; }
  .cr-row__jd { font-size: .8rem; }
  /* the hover accent is meaningless on touch */
  .cr-row__in::before { display: none; }
  .cr-jd__body { padding: .2rem .9rem 1.1rem; font-size: .87rem; }
  .cr-jd__foot { padding: .8rem .9rem 1.1rem; }
}

/* ==========================================================================
   APPLY MODAL — replaces the old third-party redirect
   Dialog is centred, the page behind is scroll-locked by .cr-lock on <body>,
   and the panel itself scrolls if the viewport is short. Esc, the backdrop
   and the × all close it; focus is trapped inside while open.
   ========================================================================== */
body.cr-lock { overflow: hidden; }

.cr-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: clamp(.8rem, .5rem + 1.6vw, 2rem);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.cr-modal.is-open { opacity: 1; visibility: visible; }
.cr-modal__back { position: absolute; inset: 0; background: rgba(11,24,48,.55);
  backdrop-filter: saturate(140%) blur(3px); }

.cr-modal__panel { position: relative; z-index: 1; width: min(660px, 100%);
  max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 20px; background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 50px 90px -40px rgba(11,24,48,.55);
  transform: translateY(14px) scale(.985);
  transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cr-modal.is-open .cr-modal__panel { transform: none; }

.cr-modal__head { position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, .9rem + .9vw, 1.7rem) .8rem;
  background: linear-gradient(180deg, #fff 78%, rgba(255,255,255,0) 100%); }
.cr-modal__head > div { min-width: 0; flex: 1 1 auto; }
.cr-modal__k { font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate); }
.cr-modal__t { margin: .3rem 0 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.22; letter-spacing: -.024em; color: var(--ink); }
/* The role the visitor clicked — replaces a whole readonly form row. */
.cr-modal__role { margin: .3rem 0 0; font-size: .86rem; font-weight: 600; color: var(--navy); }
.cr-modal__role:empty { display: none; }
.cr-modal__x { flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--white);
  color: var(--navy); font-size: 1rem;
  transition: background .22s ease, color .22s ease, border-color .22s ease; }
.cr-modal__x:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Tight on purpose: the whole form must fit a 1050px-tall laptop viewport
   without scrolling. Gaps, field padding and the textarea are all trimmed,
   and the role moved into the header. */
.cr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem .8rem; padding: 0 clamp(1.1rem, .9rem + .9vw, 1.7rem) clamp(1.1rem, .9rem + .9vw, 1.7rem); }
.cr-f { min-width: 0; display: grid; gap: .28rem; }
.cr-f--wide { grid-column: 1 / -1; }
.cr-f label { display: flex; align-items: baseline; gap: .45rem;
  font-size: .78rem; font-weight: 600; color: var(--ink); }
.cr-f label > span { color: var(--orange); }
.cr-opt { font-weight: 500; font-size: .72rem; color: #9aa6b5; }
.cr-f input, .cr-f textarea { width: 100%; min-width: 0; font: inherit; font-size: .9rem;
  color: var(--ink); background: #FBFCFE;
  padding: .6rem .85rem; border-radius: 9px; border: 1px solid var(--line-2);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.cr-f textarea { resize: vertical; min-height: 3.4rem; line-height: 1.55; }
.cr-f input:focus, .cr-f textarea:focus { outline: none; background: #fff;
  border-color: var(--sky); box-shadow: 0 0 0 4px rgba(77,159,215,.16); }
.cr-f input.is-bad, .cr-f textarea.is-bad { border-color: #D64545; background: #FFFAFA; }
.cr-f input[readonly] { background: var(--sky-tint, #F1F7FC); color: var(--navy); font-weight: 600; }
/* File input: the native control is unstyleable, so the label is the button. */
.cr-f input[type="file"] { padding: .5rem; background: #FBFCFE; font-size: .84rem; }
.cr-f input[type="file"]::file-selector-button {
  margin-right: .7rem; padding: .45rem .9rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--white); color: var(--navy);
  font: inherit; font-size: .82rem; font-weight: 600; }
.cr-hint { font-size: .74rem; color: var(--slate); }
.cr-err { display: block; font-size: .75rem; line-height: 1.4; color: #C0392B; }
.cr-err:empty { display: none; }

.cr-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-top: .2rem; }
.cr-actions .btn { padding: .8em 1.6em; }
.cr-status { min-width: 0; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--slate); }
.cr-status:empty { display: none; }
.cr-status.is-ok { color: #1E7A46; font-weight: 600; }
.cr-status.is-bad { color: #C0392B; font-weight: 600; }

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

/* ==========================================================================
   BAND 3 · LIFE AT RIA — careers-scoped tweaks to the shared .r3-tst
   The homepage feeds it 100–140 character client one-liners at up to
   2.15rem. These are 189–736 character employee stories, so the quote type
   comes down and the card gets a taller floor to stop it jumping as much
   when you switch between the shortest and longest story.
   ========================================================================== */
.cr-life { background: linear-gradient(180deg, #EDF4FB 0%, #F4F9FD 55%, #FBFDFE 100%); }
.cr-life .r3-tst { align-items: start; }
.cr-life .r3-tst__quote { min-height: 330px; }
.cr-life .r3-tst__q blockquote { font-size: clamp(1rem, .92rem + .5vw, 1.28rem);
  font-weight: 500; line-height: 1.6; color: var(--ink); }
/* Real photograph in place of the initials disc — and a rounded SQUARE,
   per the standing no-circles rule. */
.cr-life .r3-tst__av { width: 52px; height: 52px; border-radius: 13px;
  overflow: hidden; background: var(--sky-tint, #F1F7FC); padding: 0; }
.cr-life .r3-tst__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The rail carries eight names rather than three sectors — tighten it. */
.cr-life .r3-tst__rail { gap: .45rem; }
.cr-life .r3-tst__tab { padding: .7rem 1rem; }
.cr-life .r3-tst__tab b { font-size: .9rem; }

@media (max-width: 900px) { .cr-life .r3-tst__quote { min-height: 0; } }

/* ==========================================================================
   BAND 4 · CTA — the product pages' panel
   ========================================================================== */
.cr-cta { background: var(--white); }
.cr-cta__panel { position: relative; overflow: hidden; text-align: center; border-radius: 26px;
  padding: clamp(2.2rem, 1.7rem + 3vw, 4rem) clamp(1.4rem, 1rem + 3.4vw, 4.5rem);
  border: 1px solid rgba(247,148,31,.3);
  background:
    linear-gradient(134deg, rgba(247,148,31,.26) 0%, rgba(247,148,31,.1) 34%, rgba(255,255,255,.6) 62%, rgba(77,159,215,.16) 100%),
    linear-gradient(180deg, #FFFCF7 0%, #FFFFFF 100%);
  box-shadow: 0 40px 80px -60px rgba(11,24,48,.5); }
.cr-cta__panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, #f7b45f 34%, var(--sky) 78%, transparent 100%); }
.cr-cta__lbl { font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--navy); }
.cr-cta__panel h2 { font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.1;
  letter-spacing: -.032em; margin: .9rem auto .8rem; max-width: 20ch; }
.cr-cta__panel > p { color: var(--slate); font-size: clamp(.98rem, .94rem + .3vw, 1.06rem);
  line-height: 1.66; max-width: 58ch; margin-inline: auto; }
.cr-cta__btns { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap;
  margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); }
.cr-cta__links { display: flex; justify-content: center; flex-wrap: wrap;
  margin-top: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); padding-top: clamp(1.1rem, .9rem + .8vw, 1.7rem);
  border-top: 1px solid rgba(29,65,121,.14); }
.cr-cta__links a { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 1.2rem;
  border-left: 1px solid rgba(29,65,121,.14); font-size: .88rem; font-weight: 600; color: var(--navy);
  transition: color .25s ease; }
.cr-cta__links a:first-child { border-left: 0; }
.cr-cta__links a i { font-size: .8rem; color: var(--orange); }
.cr-cta__links a:hover { color: var(--orange-600, var(--orange)); }

@media (max-width: 560px) {
  .cr-cta__links a { flex: 1 1 100%; justify-content: center; border-left: 0;
    border-top: 1px solid rgba(29,65,121,.14); padding-block: .7rem; }
  .cr-cta__links a:first-child { border-top: 0; }
}