.hrcs {
  --navy: var(--hr-navy);
  --blue: var(--hr-blue);
  --blue-dark: var(--hr-blue-dark);
  --blue-pale: var(--hr-blue-pale);
  --coral: var(--hr-accent-color);
  --ink: var(--hr-ink-strong);
  --ink-2: var(--hr-ink-mid);
  --ink-3: var(--hr-ink-soft);
  --ink-4: var(--hr-ink-faint);
  --line: var(--hr-line);
  --line-2: var(--hr-line-strong);
  --line-blue: var(--hr-line-blue);
  --pale: var(--hr-pale);
  --pale-cool: var(--hr-pale-cool);
  --wash-cool: var(--hr-wash-cool);
  --slate: var(--hr-wash-slate);
  --ok: #137a4d;
  --font: var(--font-body, 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: var(--hr-radius-soft, 14px);
  --r-xl: var(--hr-radius-card, 18px);
  --shadow: var(--hr-shadow-card);
  /* Site-wide container width; long-form text keeps its own measure below. */
  --max: 1440px;
  --gutter: clamp(16px, 4vw, 64px);
  --h2: clamp(24px, 1.2vw + 17px, 32px);
  margin: 0;
  padding-bottom: 96px;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hrcs *,
.hrcs *::before,
.hrcs *::after { box-sizing: border-box; }
.hrcs img { max-width: 100%; height: auto; display: block; }
.hrcs svg { flex: 0 0 auto; }
.hrcs h1,
.hrcs h2,
.hrcs h3 { margin: 0; color: var(--ink); letter-spacing: -.02em; text-transform: none; }
.hrcs p { margin: 0; }
.hrcs a { color: var(--blue-dark); }
.hrcs ul,
.hrcs ol { margin: 0; padding: 0; list-style: none; }
.hrcs .strip-num,
.hrcs .r-num,
.hrcs .m-num,
.hrcs .step-n { font-variant-numeric: tabular-nums; }
.hrcs a:focus-visible,
.hrcs button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }
.hrcs .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hrcs .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hrcs [hidden] { display: none !important; }

/***** BUTTONS *****/
.hrcs .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--blue); border-radius: var(--r-sm); background: var(--blue); color: #fff; font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.hrcs .btn:hover,
.hrcs .btn:active,
.hrcs .btn:first-child:active { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.hrcs .btn:focus-visible { box-shadow: none; }
.hrcs .btn-ghost { background: #fff; color: var(--navy); border-color: var(--line-2); }
.hrcs .btn-ghost:hover,
.hrcs .btn-ghost:active,
.hrcs .btn-ghost:first-child:active { background: #fff; color: var(--blue-dark); border-color: var(--blue); }
.hrcs .btn-block { width: 100%; }
.hrcs .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/***** EYEBROW LABELS *****/
.hrcs .label,
.hrcs .card-eyebrow,
.hrcs .toolbar-label { font-size: 13px; font-weight: 800; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark); }
.hrcs .label { display: block; }

/***** HERO *****/
.hrcs .hero { padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 4vw, 56px); background: linear-gradient(0deg, var(--hr-wash-sky) 0%, var(--hr-wash) 25%, #fff 60%); color: var(--hr-ink); }
.hrcs .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.hrcs .crumbs > span[aria-hidden] { color: var(--hr-line-muted); font-size: 15px; line-height: 1; }
.hrcs .crumbs a { color: var(--navy); font-weight: 600; text-decoration: none; }
.hrcs .crumbs a:hover,
.hrcs .crumbs a:focus-visible { color: var(--ink); text-decoration: underline; }
.hrcs .crumbs [aria-current] { overflow: hidden; max-width: 44ch; color: var(--ink-4); text-overflow: ellipsis; white-space: nowrap; }
.hrcs .hero h1 { font-weight: 800; line-height: 1.2; color: var(--hr-primary-color); text-wrap: balance; }
.hrcs .hero .lede { font-size: var(--hr-hero-lead-size); line-height: 1.65; color: var(--ink-3); }

/* Hub: centred, no image. */
.hrcs .hero--hub { text-align: center; }
.hrcs .hero--hub .crumbs { justify-content: center; }
.hrcs .hero--hub h1 { max-width: 18ch; margin: 0 auto 16px; font-size: var(--hr-hero-title-size); }
.hrcs .hero--hub .lede { max-width: 600px; margin: 0 auto; }
.hrcs .proof { max-width: 64ch; margin: 24px auto 0; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--ink); }

/* Single: text left, photo right; the photo drops under the text on phones. */
.hrcs .hero-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .hrcs .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 4vw, 64px); }
  .hrcs .hero-grid--solo { grid-template-columns: minmax(0, 1fr); }
}
/* The theme centres headings on phones; the story hero reads left-aligned. */
.hrcs .hero:not(.hero--hub) .hero-grid > div { text-align: left; }
.hrcs .hero:not(.hero--hub) h1 { max-width: 24ch; text-align: left; font-size: clamp(30px, 1.9vw + 18px, 46px); }
.hrcs .hero-lede { max-width: 60ch; margin-top: 18px; font-size: clamp(16.5px, .3vw + 15.5px, 18.5px); line-height: 1.65; color: var(--ink-3); }
.hrcs .hero-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 20px 0 28px; font-size: 14px; font-weight: 600; color: var(--ink-4); }
.hrcs .hero-photo { margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--pale); box-shadow: var(--hr-shadow-soft); }
.hrcs .hero-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 56% 50%; }
@media (min-width: 900px) {
  .hrcs .hero-photo img { aspect-ratio: 3 / 2; }
}

/***** RESULTS STRIP *****/
/* 1px gaps over a line-coloured background draw the dividers, so any count
   from one to four metrics keeps clean borders. */
.hrcs .strip-wrap { margin-top: 8px; }
.hrcs .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--line); }
.hrcs .strip li { display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2vw, 28px); background: #fff; }
.hrcs .strip--1 { grid-template-columns: minmax(0, 1fr); }
.hrcs .strip--3 li:first-child { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .hrcs .strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hrcs .strip--3 li:first-child { grid-column: auto; }
  .hrcs .strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hrcs .strip-num { display: block; font-size: clamp(22px, 1.5vw + 14px, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); }
.hrcs .strip-lbl { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }

/* The headline metric (Metric 1) leads in brand navy. */
.hrcs .strip li.strip-lead { background: var(--navy); }
.hrcs .strip-lead .strip-num,
.hrcs .strip-lead .m-after { color: #fff; }
.hrcs .strip-lead .m-before,
.hrcs .strip-lead .m-arrow { color: rgba(255, 255, 255, .72); }
.hrcs .strip-lead .strip-lbl { color: #dbe4f5; }

/* Before -> after: the "after" carries the weight, the "before" stays quiet. */
.hrcs .m-before,
.hrcs .m-arrow { font-size: .6em; font-weight: 700; letter-spacing: 0; color: var(--ink-4); }
.hrcs .m-arrow { margin: 0 .3em; font-weight: 400; }
.hrcs .m-after { color: var(--navy); }

/***** BODY LAYOUT *****/
.hrcs .layout { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 1024px) {
  .hrcs .layout { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 4vw, 64px); align-items: start; margin-top: 56px; }
  .hrcs .layout > .glance { grid-column: 2; grid-row: 1; }
  .hrcs .layout > .story { grid-column: 1; grid-row: 1; }
  .hrcs .layout--solo { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) and (min-height: 760px) {
  .hrcs .layout > .glance { position: sticky; top: calc(var(--hr-header-h, 80px) + 24px); }
  .hrcs .glance-card { max-height: calc(100vh - var(--hr-header-h, 80px) - 48px); overflow-y: auto; overscroll-behavior: contain; }
}

.hrcs .glance-card { padding: 24px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow); }
.hrcs .glance-h { margin-bottom: 4px; font-size: 18px; font-weight: 800; }
.hrcs .facts { margin: 0 0 20px; }
.hrcs .facts div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.hrcs .facts dt { color: var(--ink-3); }
.hrcs .facts dd { margin: 0; min-width: 0; color: var(--ink); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.hrcs .glance-sub { margin-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Modules used: a compact plain list, not a cloud of tags. */
.hrcs .chips { margin-bottom: 22px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.hrcs .chips li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.hrcs .chips li:last-child { border-bottom: 0; }
.hrcs .chips a { color: var(--blue-dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-blue); text-underline-offset: 3px; }
.hrcs .chips a:hover { text-decoration-color: currentColor; }

/***** STORY SECTIONS *****/
.hrcs .sec { padding-bottom: clamp(48px, 5vw, 72px); }
.hrcs .sec:last-child { padding-bottom: 0; }
.hrcs .sec h2 { max-width: 28ch; margin: 10px 0 16px; font-size: var(--h2); font-weight: 800; line-height: 1.25; }
.hrcs .sec > p { max-width: 68ch; margin-bottom: 14px; }
.hrcs .sec > p:last-of-type { margin-bottom: 0; }
.hrcs .sec .sec-outro { margin-top: 24px; }
.hrcs .sec h3 { font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; }

/* Problems and solutions: quiet cards in two columns. */
.hrcs .problems,
.hrcs .modules { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 640px) {
  .hrcs .problems,
  .hrcs .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hrcs .problems li,
.hrcs .modules li { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--wash-cool); }
.hrcs .problems li { border-top: 3px solid var(--coral); }
.hrcs .modules li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; background: #fff; }
.hrcs .problems h3,
.hrcs .modules h3 { margin-bottom: 6px; }
.hrcs .problems p,
.hrcs .modules p { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }

/* The module's own line icon, in a tinted square: it names the module. */
.hrcs .m-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--pale); color: var(--blue-dark); }

/* Quote: the decision, in the hospital's own words. */
.hrcs .quote { position: relative; margin: 8px 0 0; padding: 28px 28px 24px 32px; border-left: 4px solid var(--coral); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--pale-cool); }
.hrcs .quote blockquote { margin: 0; }
.hrcs .quote blockquote p { max-width: 60ch; font-size: clamp(17.5px, .4vw + 16px, 20px); font-weight: 600; line-height: 1.6; color: var(--navy); }
.hrcs .quote blockquote p::before { content: '\201C'; }
.hrcs .quote blockquote p::after { content: '\201D'; }
.hrcs .quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.hrcs .quote figcaption strong { display: block; color: var(--ink); font-weight: 700; }
.hrcs .face { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--hr-wash-grey); }

/* Setup steps: numbered, read left to right on wider screens. */
.hrcs .steps { display: grid; gap: 16px; margin-top: 28px; }
.hrcs .steps li { display: grid; gap: 4px; align-content: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.hrcs .step-n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 16px; font-weight: 800; line-height: 1; }
.hrcs .step-when { font-size: 13px; font-weight: 800; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-dark); }
.hrcs .steps h3 { font-size: 16.5px; }
.hrcs .steps p { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
@media (min-width: 768px) {
  .hrcs .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hrcs .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Results: a ruled list, each line leading with its number. */
.hrcs .results { margin-top: 24px; border-top: 1px solid var(--line-2); }
.hrcs .results li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.hrcs .results h3 { font-size: 18px; }
.hrcs .r-num { color: var(--blue-dark); }
.hrcs .results p { max-width: 64ch; margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }

/* Before / after table. Stacks into one card per row on phones. */
.hrcs .sec .ba-title { margin: 44px 0 16px; font-size: 20px; }
.hrcs .ba { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15.5px; line-height: 1.5; }
.hrcs .ba th,
.hrcs .ba td { padding: 14px 18px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.hrcs .ba thead th { border-top: 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hrcs .ba thead th:nth-child(1) { background: #fff; color: var(--ink-3); }
.hrcs .ba thead th:nth-child(2) { background: var(--slate); color: var(--ink-3); }
.hrcs .ba thead th:nth-child(3) { background: var(--navy); color: #fff; }
.hrcs .ba tbody th { width: 24%; font-weight: 700; color: var(--ink); }
.hrcs .ba td { color: var(--ink-3); }
.hrcs .ba td + td { background: var(--wash-cool); color: var(--ink); font-weight: 600; }
.hrcs .ba .cell { display: flex; gap: 10px; align-items: flex-start; }
/* 18px icon on a ~23px first line: 3px down centres it on that line. */
.hrcs .ba .ba-ico { flex: 0 0 18px; margin-top: 3px; }
.hrcs .ba .ba-ico--before { color: var(--ink-4); }
.hrcs .ba .ba-ico--after { color: var(--ok); }
@media (max-width: 640px) {
  .hrcs .ba thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hrcs .ba,
  .hrcs .ba tbody,
  .hrcs .ba tr,
  .hrcs .ba th,
  .hrcs .ba td { display: block; width: 100%; }
  .hrcs .ba tr { padding: 16px; border-top: 1px solid var(--line); }
  .hrcs .ba tr:first-child { border-top: 0; }
  .hrcs .ba th,
  .hrcs .ba td,
  .hrcs .ba td + td { padding: 4px 0; border: 0; background: transparent; }
  .hrcs .ba tbody th { width: 100%; margin-bottom: 6px; font-size: 16px; }
  .hrcs .ba td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
}

/* "Is your hospital facing similar challenges?" */
.hrcs .fit { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line-blue); border-radius: var(--r-lg); background: var(--pale-cool); }
.hrcs .sec .fit h2 { margin-top: 0; font-size: clamp(21px, .8vw + 17px, 26px); }
.hrcs .fit > p { margin-bottom: 14px; color: var(--ink-3); }
.hrcs .checks li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; font-size: 16px; color: var(--ink); }
.hrcs .checks svg { margin-top: 5px; color: var(--blue); }

/***** CTA BOX *****/
.hrcs .cta-box { margin-top: clamp(56px, 6vw, 88px); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: var(--navy); color: #dbe4f5; }
.hrcs .cta-box h2 { max-width: 28ch; margin: 0 0 12px; font-size: clamp(24px, 1.6vw + 16px, 34px); font-weight: 800; line-height: 1.25; color: #fff; }
.hrcs .cta-box p { max-width: 60ch; font-size: 17px; line-height: 1.7; color: #dbe4f5; }
.hrcs .cta-box .btns { margin-top: 28px; }
.hrcs .cta-box .btn { background: #fff; border-color: #fff; color: var(--navy); }
.hrcs .cta-box .btn:hover,
.hrcs .cta-box .btn:active,
.hrcs .cta-box .btn:first-child:active { background: var(--blue-pale); border-color: var(--blue-pale); color: var(--navy); }
.hrcs .cta-box .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.hrcs .cta-box .btn-ghost:hover,
.hrcs .cta-box .btn-ghost:active { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.hrcs .cta-box a:focus-visible { outline-color: #fff; }

/***** HUB LIST AND FILTERS *****/
.hrcs .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 48px 0 24px; }
.hrcs .toolbar-label { flex: 1 0 100%; color: var(--ink-3); }
.hrcs .tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.hrcs .tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.hrcs .tabs button:hover { border-color: var(--blue); color: var(--navy); }
.hrcs .tabs button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.hrcs .tabs button:focus-visible { border-radius: 999px; }
.hrcs .tabs .n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--slate); color: var(--ink-3); font-size: 13px; font-weight: 700; text-align: center; }
.hrcs .tabs button[aria-pressed="true"] .n { background: rgba(255, 255, 255, .16); color: #fff; }
.hrcs .count { font-size: 15px; color: var(--ink-3); }

/* Phones: one scrolling row instead of three wrapped ones. */
@media (max-width: 640px) {
  .hrcs .tabs { flex-wrap: nowrap; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hrcs .tabs::-webkit-scrollbar { display: none; }
  .hrcs .tabs button { scroll-snap-align: start; }
}

.hrcs .empty { margin-top: 24px; padding: 32px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-3); text-align: center; }
.hrcs .hub-list > .featured:first-child,
.hrcs .hub-list > .cards:first-child,
.hrcs .hub-list > .empty:first-child { margin-top: 48px; }
.hrcs .featured + .cards { margin-top: 24px; }

/***** CASE STUDY CARDS (hub + "More case studies") *****/
.hrcs .sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: clamp(56px, 6vw, 88px) 0 24px; }
.hrcs .sec-head h2 { font-size: var(--h2); font-weight: 800; line-height: 1.25; }
.hrcs .sec-head a { font-size: 15px; font-weight: 700; text-decoration: none; }
.hrcs .sec-head a:hover { text-decoration: underline; }
/* Cards in a row share one height; the story link sits at the bottom. */
.hrcs .cards { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 680px) {
  .hrcs .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hrcs .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hrcs .card,
.hrcs .featured { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; color: var(--ink-2); transition: border-color .15s ease, box-shadow .15s ease; }
.hrcs .card { display: flex; flex-direction: column; }
.hrcs .card:hover,
.hrcs .featured:hover { border-color: var(--line-blue); box-shadow: var(--hr-shadow-soft); }
/* Keyboard focus on the story link outlines the whole card it covers. */
.hrcs :is(.card, .featured):has(.card-link:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.hrcs :is(.card, .featured):has(.card-link:focus-visible) .card-link:focus-visible { outline: 0; }

.hrcs .card-img { width: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0; background: var(--pale); }
.hrcs .card-img img { width: 100%; height: 100%; object-fit: cover; }
/* No photo: a plain grey box with the hospital's name. */
.hrcs .card-img--none { display: grid; place-items: center; padding: 16px; background: var(--hr-wash-grey); }
.hrcs .card-img--none span { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ink-3); text-align: center; }
.hrcs .card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 22px 16px; }
.hrcs .card-eyebrow { margin-bottom: 14px; }

/* Location and Size, read like the story's "At a glance" rows. */
.hrcs .card-facts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.hrcs .card-facts div { padding: 0 12px 10px 0; }
.hrcs .card-facts div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.hrcs .card-facts dt { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-4); }
.hrcs .card-facts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.hrcs .card-title { margin-bottom: 16px; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }

/* Metrics: a compact two-column read, number first, label under it. */
.hrcs .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.hrcs .metrics div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.hrcs .metrics dt { margin-top: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
.hrcs .metrics dd { margin: 0; }
.hrcs .m-num { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.hrcs .card-golive { margin-top: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
/* Pushed to the bottom, so links and dates line up across a row. */
.hrcs .card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: auto; padding-top: 12px; }
.hrcs .card-foot time { font-size: 13.5px; color: var(--ink-4); }
/* Inline, so the arrow wraps with the last word; padding keeps a 44px target. */
.hrcs .card-link { display: inline-block; padding: 11px 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--blue-dark); text-decoration: none; }
/* Whole card clickable through the story link (the card has no other links). */
.hrcs .card-link::after { content: ''; position: absolute; inset: 0; }
.hrcs .card:hover .card-link,
.hrcs .featured:hover .card-link { text-decoration: underline; text-underline-offset: 3px; }

/* Featured story: photo left, the story's facts right. */
.hrcs .featured { box-shadow: var(--shadow); }
@media (min-width: 900px) {
  .hrcs .featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .hrcs .featured .card-img { height: 100%; min-height: 360px; aspect-ratio: auto; }
}
.hrcs .featured .card-body { justify-content: center; padding: clamp(22px, 3vw, 44px); }
.hrcs .featured .card-title { margin-bottom: 20px; font-size: clamp(23px, 1.1vw + 17px, 32px); line-height: 1.25; }
.hrcs .featured .metrics { padding-top: 18px; }
.hrcs .featured .m-num { font-size: clamp(26px, 1vw + 20px, 36px); }
.hrcs .featured .card-foot { margin-top: 20px; }
.hrcs .featured .card-link { font-size: 16px; }

/***** MOBILE CALL BAR *****/
.hrcs .mcta { display: none; }
@media (max-width: 767px) {
  .hrcs { padding-bottom: 56px; }
  /* Below the footer, so the fixed call bar never covers it. */
  body.hrcs-page { padding-bottom: 76px; }
  .hrcs .mcta { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: #fff; }
  .hrcs .mcta .btn { flex: 1 1 auto; width: auto; white-space: nowrap; }
  .hrcs .mcta .call { flex: 0 0 auto; width: auto; padding: 12px 18px; }
  .hrcs .mcta .btn { min-width: 0; }
  .hrcs .glance-card { padding: 20px; }
  .hrcs .quote { padding: 24px 20px 20px 22px; }
}

/* 320px phones: both call bar buttons fit side by side. */
@media (max-width: 359px) {
  .hrcs .mcta .btn,
  .hrcs .mcta .call { padding: 12px 14px; font-size: 15px; }
}

/***** MOTION AND PRINT *****/
@media (prefers-reduced-motion: reduce) {
  .hrcs *,
  .hrcs *::before,
  .hrcs *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .hrcs { padding-bottom: 0; font-size: 11pt; }
  .hrcs .mcta,
  .hrcs .btns,
  .hrcs .glance .btn,
  .hrcs .toolbar { display: none !important; }
  .hrcs .hero { padding: 0 0 16pt; background: #fff; }
  .hrcs .strip-wrap { margin-top: 12pt; }
  .hrcs .layout { display: block; }
  .hrcs .layout > .glance { position: static; margin-bottom: 18pt; }
  .hrcs .glance-card { max-height: none; overflow: visible; box-shadow: none; }
  .hrcs .sec,
  .hrcs .quote,
  .hrcs .ba,
  .hrcs .card,
  .hrcs .strip { break-inside: avoid; }
  .hrcs h2,
  .hrcs h3 { break-after: avoid; }
}