@charset "UTF-8";
/* CSS Document */

html{
  font-size: 14px;
}

body{
    font-family: var(--mih-font-body);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
	/* Lets elements intentionally bleed past the right edge (e.g. the About
	   intro photo sliding in from off-screen on mobile) without opening up a
	   horizontal scrollbar for the whole page -- standard practice for this
	   kind of edge-bleed technique, since the site has no legitimate need to
	   scroll horizontally anywhere. */
	overflow-x: hidden;

	animation-name: animateBodyIn;
	animation-duration: .35s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	
    font-synthesis-weight: none;
    font-synthesis-style: none; /* Safari 17+ supports these */
}

main{
	background: var(--mih-bg-grey);
}

body *{
	min-width: 0;
}

@keyframes animateBodyIn {
	0% {
		padding-top: 24px;
		opacity: 0
	}

	to {
		padding-top: 0;
		opacity: 1
	}
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}








   /* Sitewide Text Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

a {
	text-decoration: none;
	transition: var(--mih-anim-normal);
}

a:hover{
    transition: var(--mih-anim-normal);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
	font-family: var(--mih-font-header);
	font-weight: var(--mih-fw-regular);
	line-height: var(--mih-lh-normal);
	font-optical-sizing: auto;
	color: var(--mih-black);
}

h1{font-size: var(--mih-fs-13);}
h2{font-size: var(--mih-fs-10);}
h3{font-size: var(--mih-fs-9);}
h4{font-size: var(--mih-fs-8);}
h5{font-size: var(--mih-fs-7);}
h6{font-size: var(--mih-fs-5);}

h1.display {font-size: var(--mih-fs-14);}
h2.display {font-size: var();}
h3.display {font-size: var();}
h4.display {font-size: var();}
h5.display {font-size: var();}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--text-primary-hover);
    text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--text-primary-hover);
    text-decoration: underline;
}

p.xl, p.lg, p, p.sm, span.xl, span.lg, span, span.sm {
    line-height: var(--mih-lh-expanded);
    font-weight: var(--mih-fw-light);
}

p.xl {font-size: var(--mih-fs-6);}
p.lg {font-size: var(--mih-fs-5);}
p {font-size: var(--mih-fs-4);}
p.sm {font-size: var(--mih-fs-3);}

p.xl a, p.lg a, p a, p.sm a {
	text-decoration: underline;
	color: var(--text-primary-hover);
}

strong, b {font-weight: var(--mih-fw-bold);}

@media (max-width: 870px) {
	h1{font-size: var(--mih-fs-11);}
	h2{font-size: var(--mih-fs-9);}
	h3{font-size: var(--mih-fs-8);}
	h4{font-size: var(--mih-fs-7);}
	h5{font-size: var(--mih-fs-6);}
	h6{font-size: var(--mih-fs-5);}
}








   /* Sitewide Image Styles ------ */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: var(--mih-spacing-9);
}








   /* Sitewide hr/rule Styles ---- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

hr {
	width: 100%;
	height: 2px;
	border: 0;
	border-radius: var(-mih-radius-round);
	background-color: var(--mih-brand-gray-500);
}








   /* Sitewide Icon Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.fill{transition: var(--mih-anim-normal);}
.fill:hover{transition: var(--mih-anim-normal);}

.fill--clr-1{fill: var(--text-primary);}
.fill--clr-2{fill: var(--text-primary-contrastText);}








   /* Button Styles -------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */




 /* Default Button --------------- */
/* ------------------------------ */

[type="button"], [type="reset"], [type="submit"], a.btn, .btn {
    display: inline-flex;
	position: relative;
	overflow: hidden; overflow: clip;
    column-gap: var(--mih-spacing-3);
    align-items: center;
    justify-content: center;
    padding: var(--mih-spacing-6) var(--mih-spacing-9);
    min-width: 24px;
    min-height: 24px;
    font-family: var(--mih-font-body);
	font-size: var(--mih-fs-4);
	font-weight: var(--mih-fw-regular);
    line-height: var(--mih-lh-dense);
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
    border-radius: var(--mih-radius-round);
	box-shadow: none;
	cursor: pointer;
    transition: var(--mih-anim-normal);
}

a.btn--icon-only, .btn--icon-only{
	padding: var(--mih-spacing-6);
	aspect-ratio: 1 / 1;
}

.btn:disabled, .btn[disabled]{
	opacity: .45;
	cursor: not-allowed;
}

.btn:disabled:hover, .btn[disabled]:hover,
.btn:disabled:focus, .btn[disabled]:focus,
.btn:disabled:active, .btn[disabled]:active{
	background: var(--btn-primary);
	border: 1px solid var(--btn-primary);
	outline: none;
}

a.btn:hover, .btn:hover{
	color: var(--text-primary-contrastText);
    background: var(--btn-primary-hover);
    border: 1px solid var(--btn-primary-hover);
    transition: var(--mih-anim-normal) ;
}

a.btn:focus, .btn:focus{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary-active);
    border: 1px solid var(--btn-primary-active);
	outline: 3px solid var(--btn-focusedBorder);
    transition: var(--mih-anim-normal);
}

button:focus, a:focus {
	outline: 3px solid var(--btn-focusedBorder);
	outline-offset: 1px;
	transition: var(--mih-anim-normal);
}

/*a.btn.btn:active, button.btn.btn:active{*/
a.btn:active, button.btn:active{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary-active);
    border: 1px solid var(--btn-primary-active);
    transition: var(--mih-anim-normal);
}

.btn svg, .btn .icon{
	max-width: var(--mih-spacing-7); max-height: var(--mih-spacing-7);
}

a.btn .fill--clr-1, .btn .fill--clr-1{fill: var(--text-primary-contrastText);}




 /* Button Size Variants --------- */
/* ------------------------------ */

a.btn--xs, .btn--xs{
    font-size: var(--mih-fs-3);
    padding: 0.438rem var(--mih-spacing-5);
}

a.btn--xs.btn--icon-only, .btn--xs.btn--icon-only{
	padding: 0.438rem;
	aspect-ratio: 1 / 1;
}

.btn--xs svg, .btn--xs .icon{
	max-width: var(--mih-spacing-3); max-height: var(--mih-spacing-3);
}

a.btn--sm, .btn--sm{
    font-size: var(--mih-fs-3);
    padding: var(--mih-spacing-2) var(--mih-spacing-5);
}

a.btn--sm.btn--icon-only, .btn--sm.btn--icon-only{
	padding: var(--mih-spacing-2);
	aspect-ratio: 1 / 1;
}

.btn--sm svg, .btn--sm .icon{
	max-width: var(--mih-spacing-6); max-height: var(--mih-spacing-6);
}

a.btn--lg, .btn--lg{
    font-size: var(--mih-fs-5);
    padding: var(--mih-spacing-5) var(--mih-spacing-7);
	column-gap: var(--mih-padding-smedium);
}

a.btn--lg.btn--icon-only, .btn--lg.btn--icon-only{
	padding: var(--mih-spacing-5);
	aspect-ratio: 1 / 1;
}

.btn--lg svg, .btn--lg .icon{
	max-width: var(--mih-spacing-3); max-height: var(--mih-spacing-3);
}




 /* Primary Button --------------- */
/* ------------------------------ */
/* 
These classes are not needed as they are the same as the default btn class. Left here for reference.
*/




 /* Primary Reverse Button ------- */
/* ------------------------------ */

a.btn--primary-rev, .btn--primary-rev {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-rev:hover, .btn--primary-rev:hover {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-hover);
    border: 1px solid var(--btn-primary-rev-hover);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--primary-rev:focus, .btn--primary-rev:focus {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-active);
    border: 1px solid var(--btn-primary-rev-active);
	outline: 3px solid var(--btn-focusedBorder);
	box-shadow: var(--mih-shadow-xs);
}

a.btn.btn--primary-rev:active, button.btn.btn--primary-rev:active {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-active);
    border: 1px solid var(--btn-primary-rev-active);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--primary-rev .fill--clr-1, .btn--primary-rev .fill--clr-1 {fill: var(--btn-primary-rev-contrastText);}
a.btn--primary-rev:hover .fill--clr-1, .btn--primary-rev:hover .fill--clr-1 {fill: var(--btn-primary-rev-contrastText);}




 /* Primary Outlined Button ------ */
/* ------------------------------ */

a.btn--primary-outlined, .btn--primary-outlined{
    color: var(--btn-primary);
    background: transparent;
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined:hover, .btn--primary-outlined:hover{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined:focus, .btn--primary-outlined:focus{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--primary-outlined:active, button.btn.btn--primary-outlined:active{
    color: var(--text-primary);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined .fill--clr-1, .btn--primary-outlined .fill--clr-1 {fill: var(--btn-primary);}

a.btn--primary-outlined:hover .fill--clr-1, .btn--primary-outlined:hover .fill--clr-1 {fill: var(--text-primary-contrastText);}







 /* Primary Outlined Reversed Button ------ */
/* --------------------------------------- */

a.btn--primary-outlined-rev, .btn--primary-outlined-rev{
    color: var(--text-primary-contrastText);
    background: transparent;
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev:hover, .btn--primary-outlined-rev:hover{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev:focus, .btn--primary-outlined-rev:focus{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--primary-outlined-rev:active, button.btn.btn--primary-outlined-rev:active{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev .fill--clr-1, .btn--primary-outlined-rev .fill--clr-1 {fill: var(--text-primary-contrastText);}
a.btn--primary-outlined-rev:hover .fill--clr-1, .btn--primary-outlined-rev:hover .fill--clr-1 {fill: var(--text-primary);}




 /* Primary Text Button ---------- */
/* ------------------------------ */

a.btn--primary-text, .btn--primary-text{
    color: var(--mih-brand-red);
    background: transparent;
    border: 1px solid transparent;
	padding: var(--mih-spacing-4) 0;
}

a.btn--primary-text:hover, .btn--primary-text:hover{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text:focus, .btn--primary-text:focus{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--btn-focusedBorder);
	text-decoration: underline;
}

a.btn.btn--primary-text:active, button.btn.btn--primary-text:active{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text .fill--clr-1, .btn--primary-text .fill--clr-1 {fill: var(--mih-brand-red);}
a.btn--primary-text:hover .fill--clr-1, .btn--primary-text:hover .fill--clr-1 {fill: var(--text-primary-hover);}




 /* Secondary Button ------------- */
/* ------------------------------ */

a.btn--secondary, .btn--secondary {
    color: var(--text-secondary);
    background: var(--btn-secondary);
    border: 1px solid var(--btn-secondary);
}

a.btn--secondary:hover, .btn--secondary:hover {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--secondary:focus, .btn--secondary:focus {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	outline: 3px solid var(--btn-focusedBorder);
	box-shadow: var(--mih-shadow-xs);
}

a.btn.btn--secondary:active, button.btn.btn--secondary:active {
    color: var(--text-secondary);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--secondary .fill--clr-1, .btn--secondary .fill--clr-1 {
    fill: var(--text-secondary);
}

a.btn--secondary:hover .fill--clr-1, .btn--secondary:hover .fill--clr-1 {
    fill: var(--text-secondary);
}




 /* Secondary Outlined Button ---- */
/* ------------------------------ */

a.btn--secondary-outlined, .btn--secondary-outlined {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--btn-secondary);
}

a.btn--secondary-outlined:hover, .btn--secondary-outlined:hover {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
}

a.btn--secondary-outlined:focus, .btn--secondary-outlined:focus {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--secondary-outlined:active, button.btn.btn--secondary-outlined:active {
    color: var(--text-secondary);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
}

a.btn--secondary-outlined .fill--clr-1, .btn--secondary-outlined .fill--clr-1 {fill: var(--text-secondary);}
a.btn--secondary-outlined:hover .fill--clr-1, .btn--secondary-outlined:hover .fill--clr-1 {fill: var(--text-secondary);}




 /* Secondary Text Button -------- */
/* ------------------------------ */

a.btn--secondary-text, .btn--secondary-text {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
	padding: var(--mih-spacing-4) 0;
}

a.btn--secondary-text:hover, .btn--secondary-text:hover {
    color: var(--text-secondary-hover);
    background: transparent;
    border: 1px solid transparent;
}

a.btn--secondary-text:focus, .btn--secondary-text:focus {
    color: var(--text-secondary-hover);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--secondary-text:active, button.btn.btn--secondary-text:active {
    color: var(--text-secondary-active);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
}

a.btn--secondary-text .fill--clr-1, .btn--secondary-text .fill--clr-1 {fill: var(--text-secondary);}
a.btn--secondary-text:hover .fill--clr-1, .btn--secondary-text:hover .fill--clr-1 {fill: var(--text-secondary-hover);}




 /* Hidden Text Button ----------- */
/* ------------------------------ */

span.btn__hover-text{
	width: 0;
	opacity: 0;
	transition: var(--mih-anim-normal);
}

.btn:hover .btn__hover-text{
	width: auto;
	opacity: 1;
	transition: var(--mih-anim-normal);
}


 /* Stacked Buttons -------------- */
/* (only on homepage rn)--------- */

.btn.btn--stacked{
	background-color: var(--mih-white);
	border: 1px solid var(--mih-white);
	color: var(--mih-black);
	border-radius: 0;
	justify-content: space-between;
	width: 100%;
}

.btn.btn--stacked .fill{
	fill: var(--mih-brand-red);
}

/* The trailing arrow on a stacked button is now wrapped in its own
   .btn.btn--icon-only circle (red bg, white icon) -- this out-specifies the
   red-fill rule above so the icon stays white inside that circle. */
.btn.btn--stacked .btn--icon-only .fill--clr-1{
	fill: var(--text-primary-contrastText);
}








   /* Dropdown Styles ------------ */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.dropdown{
	display: flex;
	position: relative;
	anchor-name: --dropdown-btn;
}

.dropdown__list{
	position-anchor: --dropdown-btn;
	display: flex;
	flex-direction: column;
	background-color: var(--mih-white);
	box-shadow: 0 20px 20px rgba(0, 0, 0, .1);
	z-index: 25;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	padding: var(--mih-spacing-7) 0;
	width: 308px;
	max-width: calc(100vw - 1rem);
	max-height: 90vh;
	max-height: 90svh;
	border: none;    
}

/* Applied by JS at open time when the default left-aligned position would
   overflow the right edge of the viewport -- see the dropdown toggle
   script. Not used by .action-bar__sort .dropdown__list below, which is
   always right-aligned by design regardless of available space. */
.dropdown__list--align-right{
	left: auto;
	right: 0;
}

.dropdown__select{
	width: 100%;
	min-height: 180px;
	border: 0;
	padding: 0;
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-4);
	background: var(--mih-white);
}

.dropdown__select:focus{
	outline: none;
}

.dropdown__select option{
	padding: var(--mih-spacing-6) var(--mih-spacing-8);
}

.dropdown__select option:checked{
	background: var(--mih-brand-gray-200);
	color: var(--text-primary);
}

.dropdown__count-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .35rem;
	margin-left: var(--mih-spacing-2);
	border-radius: 999px;
	background: var(--mih-brand-red);
	color: var(--mih-white);
	font-size: var(--mih-fs-2);
	font-weight: var(--mih-fw-bold);
	line-height: 1;
}

.dropdown__checklist{
	display: flex;
	flex-direction: column;
}

.dropdown__check-item{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-5);
	padding: var(--mih-spacing-4) var(--mih-spacing-8);
	cursor: pointer;
}

.dropdown__check{
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--mih-brand-gray-500);
	background: var(--mih-brand-gray-200);
	border-radius: 3px;
	display: inline-grid;
	place-content: center;
}

.dropdown__check::after{
	content: "";
	width: 8px;
	height: 5px;
	border-left: 2px solid var(--mih-black);
	border-bottom: 2px solid var(--mih-black);
	transform: rotate(-45deg) scale(0);
	transform-origin: center;
	transition: transform 120ms ease-in-out;
}

.dropdown__check:checked::after{
	transform: rotate(-45deg) scale(1);
}

.dropdown__list-item {
	list-style-type: none;
	padding: 0;
}

.dropdown__list-item .btn, option.dropdown__list-item{
	padding: var(--mih-spacing-6) var(--mih-spacing-8);
	border-radius: 0;
	width: 100%;
	justify-content: flex-start;
}

.dropdown__active-item{
	line-height: 1;
}


.dropdown__list-footer{
	background-color: var(--mih-white);
	display: flex;
	padding: var(--mih-spacing-4) var(--mih-spacing-7) 0 var(--mih-spacing-7);
}

.SearchFilterDropdown-applyFilters, .SearchFilterDropdown-clearFilters {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	color: var(--text-primary);
}

.SearchFilterDropdown-applyFilters {
	color: var(--mih-brand-red);
	margin-left: auto;
}

.dropdown-enter {
	opacity: 0;
	transform: scale(0.95);
}
.dropdown-enter-active {
	opacity: 1;
	transform: scale(1);
	transition: all 150ms ease-in-out;
}

.dropdown .btn[aria-expanded="false"] .icon{
    transform: rotate(0deg);
    transition: var(--mih-anim-normal);
}

.dropdown .btn[aria-expanded="true"] .icon{
    transform: rotate(180deg);
    transition: var(--mih-anim-normal);
}








   /* Badge Styles --------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.badge{
	font-size: var(--mih-fs-3);
	font-weight: var(--mih-fw-semibold);
	color: var(--mih-brand-red);
	/* Bootstrap ships its own .badge (color: white, text-align: center) --
	   loaded before this stylesheet, so this rule's color already wins on
	   cascade order, but text-align needs an explicit value here to win
	   too, since otherwise there's no competing declaration for this
	   stylesheet to override it with. */
	text-align: left;
	border-radius: var(--mih-radius-round);
	margin: 0;
}

.badge--primary{
	padding: var(--mih-spacing-2) var(--mih-spacing-5);
	background-color: var(--mih-brand-gray-200);
}

.badge--primary-text{
	padding: var(--mih-spacing-2) 0;
}








   /* Card Styles ---------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.card{
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: #fff;
	background-clip: border-box;
	border: 0;
	border: 1px solid var(--mih-brand-gray-200);
	border-radius: 0;
	overflow: hidden;
	overflow: clip;
	transition: var(--mih-anim-normal);
}

.card:hover{
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
	transition: var(--mih-anim-normal);
}

.card--no-hover:hover{
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	transition: var(--mih-anim-normal);
}


.card__title{
	text-wrap: pretty;
    margin-top: var(--mih-spacing-4);
	transition: var(--mih-anim-normal);
}

.card__title:hover{
	color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.card--resource p{
	color: var(--text-primary);
}

.card--resource .badge{
	color: var(--mih-brand-red);
}

.card--resource{
	align-items: flex-start;
	padding: var(--mih-spacing-9) var(--mih-spacing-9) var(--mih-spacing-25) var(--mih-spacing-9);
	background-color: white;
	text-align: left;
	border: 1px solid var(--mih-brand-gray-200);
	border-radius: 0;
}

.card--resource *{
	z-index: 2;
}

.card--resource .badge--primary{
	position: absolute;
	left: var(--mih-spacing-9);
	bottom: var(--mih-spacing-9);
}

.card--resource .btn--icon-only{
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
}

/* .card--resource p.badge--primary:nth-child(6) {
	bottom: calc(var(--mih-spacing-9) + .5rem + 20px);
} */

.card--resource p.badge--primary:nth-of-type(2 of .badge--primary) {
    bottom: calc(var(--mih-spacing-9) + .5rem + 20px);
}

.asset-img{
	position: absolute;
	width: auto;
	object-fit: contain;
	z-index: 1;
	width: 90%;
	filter: drop-shadow(0px 0px 6px rgba(49, 44, 42, 0.125));
	transition: var(--mih-anim-normal);
}

.asset-img--pdf{
	right: 15px;
	bottom: -60px;
	height: 193px;
	width: 90%;
	max-width: 170px;
	transform: rotate(-8.18deg);
}

.card--resource:hover .asset-img--pdf{
	filter: drop-shadow(0px 0px 12px rgba(49, 44, 42, 0.1));
	transform: rotate(-7.18deg) scale(1.05);
	bottom: -57px;
	transition: var(--mih-anim-normal);
}

.asset-img--logo {
	right: var(--mih-spacing-9);
	bottom: var(--mih-spacing-9);
	height: auto;
	width: 90%;
	max-width: 150px;
}

.card--resource:hover .asset-img--logo{
	transform: scale(1.05);
	transform-origin: center;
	transition: var(--mih-anim-normal);
}

.asset-img--video {
	right: var(--mih-spacing-9);
	bottom: var(--mih-spacing-9);
	height: auto;
	max-width: 150px;
	transform: scale(1);
	transition: var(--mih-anim-normal);
}

.card--resource:hover .asset-img--video{
	transform: scale(1.05);
	transform-origin: center;
	transition: var(--mih-anim-normal);
}

.card--resource .icon--play-btn{
	display: none;
	transform: scale(1);
}

.icon--play-btn .fill{
	transition: var(--mih-anim-normal);
}

.icon--play-btn .fill-clr-2{
	fill: var(--mih-black);
}

.card--resource:has(.asset-img--video) .icon--play-btn{
	display: block;
	position: absolute;
    bottom: 3.125rem;
    right: 10rem;
    width: 20px;
	filter: drop-shadow(0px 0px 5px rgba(49,44,42,.125));
}

.card--resource:hover .icon--play-btn, .btn--modal-video:hover .icon--play-btn{
	transform: scale(1.03);
}

.card--resource:hover .icon--play-btn .fill-clr-2, .btn--modal-video:hover .icon--play-btn .fill-clr-2{
	fill: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.asset-img--video__thumb{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	overflow: hidden;					
}

.asset-img--website {
	right: 0rem;
	bottom: 0rem;
	height: 130px;
	width: 90%;
	max-width: 230px;
	object-fit: cover;
	object-position: center top;
	transform: scale(1);
	transition: var(--mih-anim-normal);
}

.card--resource:hover .asset-img--website{
	transform: scale(1.05);
	transform-origin: center;
	transition: var(--mih-anim-normal);
}


.card--tumor-type{
	position: relative;
	display: grid;
	grid-template-columns: 1fr minmax(220px, 38%);
	align-items: stretch;
	background: var(--mih-white);
	min-height: 240px;
	margin-bottom: var(--mih-spacing-9);
	overflow: hidden;
	overflow: clip;
}

.card--tumor-type__content{
	padding: var(--mih-spacing-15) var(--mih-spacing-15);
}

.card--tumor-type h2{
	color: var(--mih-brand-red);
	margin-bottom: var(--mih-spacing-8);
}

.card--tumor-type p{
	color: var(--text-primary);
	font-size: var(--mih-fs-5);
	max-width: 62ch;
}

.card--tumor-type__media{
	position: relative;
	background: var(--mih-brand-purple-100);
	min-height: 100%;
}

.card--tumor-type__media .background-img{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	overflow: hidden;
}

@media (max-width: 1010px) {
	.card--tumor-type{
		grid-template-columns: 1fr;
	}

	.card--tumor-type__content{
		padding: var(--mih-spacing-12) var(--mih-spacing-11);
	}

	.card--tumor-type__media{
		min-height: 210px;
	}

	.card--tumor-type p{
		max-width: none;
	}
}

@media (max-width: 640px) {
	.card--tumor-type__content{ padding: var(--mih-spacing-10) var(--mih-spacing-9); }

	.card--tumor-type h2{
		margin-bottom: var(--mih-spacing-7);
	}

	.card--tumor-type p{
		font-size: var(--mih-fs-4);
	}

	.card--tumor-type__media{
		min-height: 170px;
	}
}


   /* Modal Styles --------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.modal-dialog-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100% - 1rem);
}

.modal-content.card--resource, .modal-content.card--video{
	height: auto;
	/*max-height: 90vh;*/
	/*max-height: 90svh;*/
	width: 90vw;
	max-width: 650px;
	overflow: hidden;
	overflow: clip;
	padding: var(--mih-spacing-11);
	border: 0 transparent;
	border-radius: 0;
}

.modal--pdf .modal-content.card--resource, .modal--external .modal-content.card--resource{
	min-height: 500px;
    padding-bottom: 18rem;
    width: 100%;
    max-width: 650px;
}

.modal--video .modal-content.card--resource{
	height: auto;
	max-height: 90vh;
	max-height: 90svh;
	padding-bottom: var(--mih-spacing-20);
}

.modal-body {
	width: 100%;
	position: initial;
	padding: 0;
}

.btn-close{
	position: absolute;
	top: var(--mih-spacing-8);
	right: var(--mih-spacing-11);
}



.modal-content:hover .asset-img {
	transform: scale(1);
	transition: var(--mih-anim-normal);
}

.modal-content .asset-img--pdf{
	right: 15px;
	bottom: -60px;
	height: 293px;
	width: 90%;
    max-width: 420px;
}

.modal-content:hover .asset-img--pdf{
	right: 15px;
	bottom: -60px;
	height: 293px;
	transform: rotate(-8.18deg) scale(1);
}

.modal-content .asset-img--logo {
	right: var(--mih-spacing-11);
	bottom: var(--mih-spacing-11);
	height: auto;
	width: 90%;
	max-width: 300px;
}

.modal-content .asset-img--website {
	max-width: 350px;
	height: auto;
	transition: var(--mih-anim-normal);
}


.modal__header-banner{
	background-color: var(--mih-brand-red);
	color: var(--mih-white);
	padding: var(--mih-spacing-4);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 650px;
}

.modal__header-banner a{
	color: var(--mih-white);
	font-weight: var(--mih-fw-semibold);
	text-decoration: none;
}


/*
.modal-body .card__title{
	max-width: 25ch;
}
*/

.modal-body .card__title:hover{
	color: var(--mih-black);
}

/*
.modal-body p{
	max-width: 50ch;
}
*/

.modal-body p.sm{
	max-width: 70ch;
}

.modal-body .badge--primary{
	left: var(--mih-spacing-11);
	bottom: var(--mih-spacing-11);
}

.btn-row{
	display: flex;
	gap: var(--mih-spacing-5);
	margin-top: 2rem;
	
}

@media (min-width: 576px) {
	.modal-dialog-centered {
		min-height: calc(100% - 3.5rem);
		min-width: calc(100% - 3.5rem);
	}
}

#withMeModal .modal-content.card--resource{
	padding-bottom: var(--mih-spacing-11);
}

#withMeModal .btn-row {
    margin-top: 3rem;
}



 


   /* Navigation/Header Styles --- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.logo-header{
    /* background-color: var(--mih-white); */
	background-color: var(--mih-bg-grey);
	/* No shadow of its own -- .megamenu below supplies the only shadow,
	   which only shows up while it's open. */
	/* border-bottom: 1px solid var(--mih-brand-gray-200); */
	/* .megamenu below anchors to this (not to .main-nav or .main-nav__item)
	   so it drops full-width below the WHOLE header regardless of where
	   "Resources" happens to sit horizontally in the nav. z-index keeps this
	   opaque header painted on top of the fixed-position mobile nav
	   panel/megamenu overlays (see the 650px query), which is what makes
	   those overlays read as "starting below the header" without needing to
	   measure or hardcode the header's own height. */
	position: relative;
	z-index: 30;
}

.logo-header .container-fluid{
	display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--mih-spacing-11);
}

.mih-logo-container{
    display: grid;
    justify-items: flex-start;
	/* .main-nav__panel/.megamenu are descendants of .logo-header (not
	   siblings), which establishes its own stacking context (position +
	   z-index) -- within that context, ANY positioned descendant (like the
	   fixed-position mobile panel/megamenu, however low their own z-index)
	   paints above the context root's own unpositioned content by default.
	   Without its own explicit stacking level here, the logo would render
	   underneath the full-screen mobile overlay instead of staying visible
	   above it. */
	position: relative;
	z-index: 25;
}

.mih-logo, .logo--mih{
    display: grid;
    justify-content: flex-start;
	width: 100%;
    max-width: 110px;
	height: 47.35px;
}

.joint-logos{
    display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 2rem;
      justify-self: flex-end;
      align-items: center;
}

.logo--jnj{
	width: 150px;
}

.joint-logos hr{
	height: 35px;
	width: 2px;
	background: var(--mih-brand-red);
	border: none;
	margin: 0;
	opacity: 1;
}

.apsho-logo{
    width: auto;
	max-height: 45px;
}

/* Step down to a smaller fixed size once the header starts feeling tight,
   instead of scaling continuously with the viewport -- buys .main-nav
   more room so it isn't forced to the mobile hamburger as soon. */
@media (max-width: 800px) {
	.logo--jnj{ width: 110px; }
	.apsho-logo{ max-height: 33px; }

	/* Tighten the gaps around the divider to match the smaller logos --
	   the full 2rem gap starts reading as too much empty space between
	   them once they've shrunk. */
	.joint-logos{ grid-gap: 1.25rem; }
}

/* Main Nav --------- */
/* Figma: 3555-16963 (desktop user flow), 3556-30648 (megamenu component/
   breakpoints), 3555-35211 (mobile hamburger). */

.visually-hidden{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.nav-scroll-lock{
	overflow: hidden;
}

.main-nav{
	justify-self: center;
	height: 100%;
}

.main-nav__hamburger{
	display: none; /* desktop: the list below is always visible, no toggle needed */
}

.main-nav__panel{
	display: flex;
	height: 100%;
}

.main-nav__list{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-17);
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.main-nav__item{
	height: 100%;
}

.main-nav__link{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-4);
	background: none;
	border: none;
	padding: 0;
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-4);
	color: var(--mih-black);
	text-decoration: none;
	cursor: pointer;
	height: 100%;
	border-radius: 0;
}

/* The underline anchors to this label (not .main-nav__link itself) so its
   bottom:-6px sits just under the text's own natural height -- anchoring
   it to .main-nav__link would put it 6px under that element's full
   height:100% box instead, since the text is only vertically centered
   inside it. z-index keeps it painted above .megamenu (also z-index 25 in
   this shared stacking context) so it stays visible while the menu's open,
   rather than being covered as soon as the megamenu appears below it. */
.main-nav__link-label{
	display: grid;
	align-items: center;
	height: 100%;
	position: relative;
	z-index: 26;
}

/* The hover/active underline is its own element rather than a real
   border-bottom so it can transition in via transform (scaleX) instead of
   an abrupt border appearing/disappearing. Grows from the center out. */
.main-nav__link-label::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0px;
	height: 2px;
	background: var(--mih-brand-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: var(--mih-anim-normal);
}

.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__link[aria-expanded="true"]{
	color: var(--mih-brand-red);
}

.main-nav__link:hover .main-nav__link-label::after,
.main-nav__link:focus-visible .main-nav__link-label::after,
.main-nav__link[aria-expanded="true"] .main-nav__link-label::after{
	transform: scaleX(1);
}

/* Current-page indicator -- static (no transition), and set on the link via
   a .is-active class. This markup is shared across every page through the
   layout, so nothing here can know which page is "current" -- something
   server-side needs to add .is-active (or swap this for a per-page
   attribute) on the matching link when this goes into Umbraco. */
.main-nav__link.is-active{
	color: var(--mih-brand-red);
}

.main-nav__link.is-active .main-nav__link-label::after{
	transform: scaleX(1);
	transition: none;
}

.main-nav__chevron{
	display: none; /* desktop: chevrons are mobile-list-only per Figma */
}

/* Resources megamenu --------- */

.megamenu{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background: linear-gradient(0deg, var(--mih-white) 0%, var(--mih-brand-gray-100) 40%, var(--mih-brand-gray-200) 70%, var(--mih-brand-gray-300) 100%);
	/* Same negative-spread technique as .logo-header -- confines the shadow
	   below the megamenu's own top edge (which sits flush against the
	   header) instead of blurring back up over the header/nav. */
	box-shadow: 0 8px 16px -8px rgba(49, 44, 42, .15);
	border-bottom: 1px solid var(--mih-brand-gray-200);
	z-index: 25;
	/* CSS-only "auto height" reveal: a single-row grid track sized in fr
	   units transitions cleanly between 0fr (nothing visible) and 1fr
	   (the row's full natural content height) without either end ever
	   needing to know an actual pixel value -- unlike a plain height
	   transition, which can't target "auto" and would otherwise need JS
	   to measure the content and keep that measurement in sync on
	   resize. The browser just recalculates the fr proportion on every
	   layout pass, so this adapts automatically to any viewport width or
	   content change. No opacity/transform on this box itself; the
	   content below fades/slides in independently (see below). visibility
	   (not display) is what keeps this transitionable while still keeping
	   the links inside from being keyboard-focusable while closed. */
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	pointer-events: none;
	transition: grid-template-rows .5s ease-in-out, visibility 0s linear .5s;
}

.megamenu.is-open{
	grid-template-rows: 1fr;
	visibility: visible;
	pointer-events: auto;
	transition: grid-template-rows .5s ease-in-out;
}

/* Content fades in and slides in from the right on its own staggered
   schedule (matching jnj.com's own timing: 350ms ease-in-out per piece,
   100ms apart) instead of sharing the container's reveal -- heading
   first, working down to the link columns last, each finishing shortly
   after the previous one starts. */
@keyframes megamenu-content-in{
	from{ opacity: 0; transform: translateX(40px); }
	to{ opacity: 1; transform: translateX(0); }
}

.megamenu__heading,
.megamenu__desc,
.megamenu__cta-group,
.megamenu__col--secondary{
	opacity: 0;
}

.megamenu.is-open .megamenu__heading{
	animation: megamenu-content-in .35s ease-in-out .1s both;
}

.megamenu.is-open .megamenu__desc{
	animation: megamenu-content-in .35s ease-in-out .2s both;
}

.megamenu.is-open .megamenu__cta-group{
	animation: megamenu-content-in .35s ease-in-out .3s both;
}

.megamenu.is-open .megamenu__col--secondary{
	animation: megamenu-content-in .35s ease-in-out .4s both;
}

.megamenu__back{
	display: none; /* desktop: closing happens via outside-click/Escape/re-toggle, no dedicated control needed */
}

/* Wraps .megamenu__grid so *this* (padding-free) element is what actually
   sits in .megamenu's 0fr/1fr grid row -- a grid item's rendered size
   always includes its own padding regardless of min-height:0/overflow,
   so if .megamenu__grid carried the clipping properties directly, its
   padding alone would keep the "closed" row from ever reaching true 0. */
.megamenu__grid-clip{
	overflow: hidden;
	min-height: 0;
}

.megamenu__grid{
	display: grid;
	/* Proportional (not a fixed primary-column px) so "By audience"/"By
	   tumor type" don't keep growing unchecked on wide viewports -- 2:1:1
	   keeps the primary column roomiest while capping the two link lists
	   relative to it instead of to the leftover space. */
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--mih-spacing-11);
	max-width: var(--mih-max-width);
	margin: 0 auto;
	padding: var(--mih-spacing-15) var(--mih-body-padding);
}

.megamenu__heading{
	font-family: var(--mih-font-header);
	font-size: var(--mih-fs-9);
	color: var(--mih-black);
	margin-bottom: var(--mih-spacing-7);
}

.megamenu__desc{
	font-size: var(--mih-fs-4);
	color: var(--mih-brand-gray-700);
	max-width: 230px;
	margin-bottom: var(--mih-spacing-9);
}

.megamenu__cta-group{
	display: flex;
	flex-wrap: wrap;
	gap: var(--mih-spacing-7);
}

.megamenu__cta,
.megamenu__cta:visited{
	display: inline-flex;
	align-items: center;
	gap: var(--mih-spacing-3);
	color: var(--mih-brand-red);
	font-size: var(--mih-fs-4);
	text-decoration: none;
	padding: var(--mih-spacing-2) var(--mih-spacing-4);
	border-radius: 999px;
	transition: var(--mih-anim-normal);
}

/* :visited (element+pseudo-class) otherwise outranks the plain
   .megamenu__cta class, so the browser's default visited-link color
   (blue/purple) wins once these have been clicked once -- pinning it
   above keeps it brand-red at rest, and this keeps it the same darker
   red used for hover states elsewhere on the site once hovered. */
.megamenu__cta:hover{
	background: var(--mih-brand-gray-200);
	color: var(--text-primary-hover);
}

.megamenu__col--secondary{
	border-left: 1px solid var(--mih-brand-gray-500);
	padding-left: var(--mih-spacing-11);
}

.megamenu__col-heading{
	font-family: var(--mih-font-header);
	font-size: var(--mih-fs-6);
	color: var(--mih-brand-red);
	margin-bottom: var(--mih-spacing-7);
}

.megamenu__nav{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mih-spacing-4);
}

.megamenu__nav a{
	display: inline-block;
	color: var(--mih-black);
	opacity: .75;
	font-size: var(--mih-fs-4);
	text-decoration: none;
	padding: var(--mih-spacing-2) var(--mih-spacing-4);
	border-radius: 999px;
	transition: var(--mih-anim-normal);
}

.megamenu__nav a:hover{
	opacity: 1;
	background: var(--mih-brand-gray-200);
	color: var(--mih-brand-red);
}

@media (max-width: 1100px) {
	/* Tablet (Figma's second breakpoint): the primary/intro column spans the
	   full row, the two secondary lists move below it side by side instead
	   of all three sharing one row. */
	.megamenu__grid{
		grid-template-columns: 1fr 1fr;
	}

	.megamenu__col--primary{
		grid-column: 1 / -1;
	}

	/* Free from the desktop column's width once the primary column spans the
	   full row -- let the copy use the extra room instead of wrapping into
	   three cramped lines at the old fixed 230px, capped at a readable line
	   length (~12 words) rather than the row's full (much wider) span. */
	.megamenu__desc{
		max-width: 60ch;
	}
}

@media (max-width: 650px) {
	.logo-header .container-fluid{
		grid-template-columns: auto auto;
	}

	/* Not part of the Figma mobile header (logo + hamburger only) -- dropped
	   here rather than relocated, since no other node shows where these end
	   up on mobile. */
	.joint-logos{
		display: none;
	}

	.mih-logo{
		margin-bottom: 0;
	}

	.main-nav{
		align-content: center;
		justify-self: flex-end;
		/* The desktop height:100% (for the underline/hover fill effect)
		   doesn't apply here -- reset so the mobile hamburger/panel go back
		   to sizing off their own content instead. */
		height: auto;
	}

	.main-nav__hamburger{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
		/* Needs to stay clickable/visible above .main-nav__panel and
		   .megamenu (see .mih-logo-container for the full explanation of
		   why -- same shared-stacking-context issue applies here). */
		position: relative;
		z-index: 25;
	}

	.main-nav__hamburger-bars{
		position: relative;
		display: block;
		width: 20px;
		height: 14px;
	}

	.main-nav__hamburger-bars span{
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--mih-black);
		border-radius: 1px;
		transition: var(--mih-anim-normal);
	}

	.main-nav__hamburger-bars span:nth-child(1){ top: 0; }
	.main-nav__hamburger-bars span:nth-child(2){ top: 6px; }
	.main-nav__hamburger-bars span:nth-child(3){ top: 12px; }

	/* Bars morph into an X and swap to navy when open, per Figma. */
	.main-nav__hamburger[aria-expanded="true"] .main-nav__hamburger-bars span{
		background: var(--mih-brand-navy);
	}

	.main-nav__hamburger[aria-expanded="true"] .main-nav__hamburger-bars span:nth-child(1){
		top: 6px;
		transform: rotate(45deg);
	}

	.main-nav__hamburger[aria-expanded="true"] .main-nav__hamburger-bars span:nth-child(2){
		opacity: 0;
	}

	.main-nav__hamburger[aria-expanded="true"] .main-nav__hamburger-bars span:nth-child(3){
		top: 6px;
		transform: rotate(-45deg);
	}

	/* Same red on hover whether showing the hamburger bars or the X --
	   the second, higher-specificity selector is only needed so this beats
	   the aria-expanded rule above regardless of source order. */
	.main-nav__hamburger:hover .main-nav__hamburger-bars span,
	.main-nav__hamburger[aria-expanded="true"]:hover .main-nav__hamburger-bars span{
		background: var(--mih-brand-red);
	}

	/* position:fixed + inset:0 (not top:100% of the header) so this doesn't
	   need to know the header's actual height -- .logo-header's own opaque
	   background and higher z-index above are what make this read as
	   "starting below the header" instead. */
	.main-nav__panel{
		position: fixed;
		inset: 0;
		/* Reset from the desktop height:100% -- inset:0 already fully sizes
		   this against the viewport, so auto here just avoids the two
		   fighting each other. */
		height: auto;
		background: linear-gradient(180deg, var(--mih-brand-gray-300) 0%, var(--mih-white) 60%);
		z-index: 20;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-16px);
		/* See .megamenu above for why this is spelled out rather than
		   var(--mih-anim-normal). Unlike the desktop megamenu, this isn't
		   revealed progressively by clip-path -- it's a plain whole-box
		   fade, so opacity and the slide can safely share one duration
		   without the same "content pops in already partway faded" risk. */
		transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s;
		overflow-y: auto;
		/* Without this, overflow-x computes to auto (the other axis being
		   non-visible forces it) -- which let the drill-down .megamenu
		   below, sitting off-screen to the right via translateX(100%),
		   register as real scrollable content instead of being invisible. */
		overflow-x: hidden;
	}

	.main-nav__panel.is-open{
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		/* ease-out (not ease-in-out) so the motion is at full speed
		   immediately instead of easing in from a standstill -- see the
		   desktop .megamenu.is-open rule for the same reasoning. */
		transition: opacity .25s ease-out, transform .25s ease-out;
	}

	.main-nav__list{
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		/* padding-top clears the actual header height (the panel itself
		   starts at the true viewport top, underneath the opaque header) */
		padding: 88px var(--mih-body-padding) var(--mih-spacing-9);
		/* Reset from the desktop height:100% -- forced both list items to
		   split 100% of the panel's height between them instead of sitting
		   at their own natural size, which is what was pushing "About" down
		   and away from the top. */
		height: auto;
	}

	.main-nav__item{
		height: auto;
	}

	.main-nav__link{
		width: 100%;
		justify-content: space-between;
		font-size: var(--mih-fs-6);
		padding: var(--mih-spacing-7) 0;
		height: auto;
	}

	/* No hover-underline animation and no active-page state on mobile (the
	   user confirmed the active state is desktop-only). */
	.main-nav__link-label::after{
		display: none;
	}

	/* The desktop z-index:26 (keeping the underline above the megamenu,
	   z-index 25 there) would otherwise also lift this above the mobile
	   drill-down .megamenu (z-index 21), which is meant to fully cover
	   the list -- letting "Resources"/"About" bleed through on top of it. */
	.main-nav__link-label{
		z-index: auto;
	}

	.main-nav__chevron{
		display: block;
		color: var(--mih-brand-gray-800);
		flex-shrink: 0;
		transition: var(--mih-anim-normal);
	}

	/* The chevron's own color above otherwise breaks the currentColor
	   inheritance that would let it follow .main-nav__link's red on
	   hover/focus/expanded -- same three states as the link's own color
	   rule, just re-targeted at the chevron specifically. */
	.main-nav__link:hover .main-nav__chevron,
	.main-nav__link:focus-visible .main-nav__chevron,
	.main-nav__link[aria-expanded="true"] .main-nav__chevron{
		color: var(--mih-brand-red);
	}

	.megamenu{
		position: fixed;
		inset: 0;
		/* This fullscreen drill-down slides via transform instead of the
		   desktop grid-row reveal above, so opt out of display:grid
		   entirely -- .megamenu__back and .megamenu__grid just stack in
		   normal block flow here. */
		display: block;
		/* Matches .main-nav__panel's background exactly -- a plain white
		   background here made the color visibly jump as this slid in over
		   the list's gray-to-white gradient. */
		background: linear-gradient(180deg, var(--mih-brand-gray-300) 0%, var(--mih-white) 60%);
		transform: translateX(100%);
		z-index: 21;
		overflow-y: auto;
		box-shadow: none;
		border-bottom: none;
		/* See the desktop .megamenu rule above for why this is spelled out
		   rather than var(--mih-anim-normal). */
		transition: transform .25s ease-in-out, visibility 0s linear .25s;
	}

	.megamenu.is-open{
		transform: translateX(0);
		/* Same property list as the closed state above (including visibility,
		   even though it flips instantly either way) -- an asymmetric
		   transition-property list between the two toggled states risks the
		   reverse direction not animating consistently. ease-out (not
		   ease-in-out) so the slide is at full speed immediately, rather
		   than easing in from a standstill. */
		transition: transform .25s ease-out, visibility 0s linear .25s;
	}

	.megamenu__back{
		display: flex;
		align-items: center;
		gap: var(--mih-spacing-4);
		background: none;
		border: none;
		color: var(--mih-brand-navy);
		font-size: var(--mih-fs-4);
		padding: 88px var(--mih-body-padding) 0;
		cursor: pointer;
		/* The global [type="button"] reset gives every button a pill
		   border-radius + overflow:clip meant for CTA-style buttons -- with
		   this button's tall top padding, that clipped the "Back" label
		   against its own rounded corner. This is a plain text+icon link,
		   not a pill button, so opt back out of both. */
		border-radius: 0;
		overflow: visible;
		transition: var(--mih-anim-normal);
	}

	/* The icon fills with currentColor, so this alone recolors both. */
	.megamenu__back:hover{
		color: var(--mih-brand-red);
	}

	/* Shares the same right-pointing arrow asset as .megamenu__cta's icons
	   (see .about-mih__intro-nav .icon--arrow-left for the same pattern) --
	   flip it to point left for a "back" affordance. */
	.megamenu__back .icon--arrow-left{
		transform: rotate(180deg);
	}

	.megamenu__grid{
		grid-template-columns: 1fr;
		padding: var(--mih-spacing-7) var(--mih-body-padding) var(--mih-spacing-15);
		gap: var(--mih-spacing-9);
	}

	.megamenu__col--primary{
		grid-column: auto;
	}

	.megamenu__cta-group{
		flex-wrap: nowrap;
	}

	.megamenu__col--secondary{
		border-left: none;
		border-top: 1px solid var(--mih-brand-gray-500);
		padding-left: 0;
		padding-top: var(--mih-spacing-9);
	}
}








   /* Resource Grid Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */


.action-bar, .action-bar__filters, .active-filters {
	display: flex;
	gap: var(--mih-spacing-9);
}

.action-bar{
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: var(--mih-spacing-9);
}

.action-bar .dropdown, .action-bar .action-bar__filters .btn, .action-bar .action-bar__sort .btn{
	height: 100%;
	min-height: 44px;
}

.app-resources--subpage .action-bar .action-bar__sort .btn{
	min-width: 12rem;
}

.action-bar__filters{
	align-items: stretch;
	gap: var(--mih-spacing-4) var(--mih-spacing-7);
	order: 1;
}


.action-bar__search{
	display: flex;
	flex: 1 1 400px;
	order: 2;
}

.action-bar__search form{
	display: flex;
	width: 100%;
	position: relative;
}

.action-bar__search .form-control {
	position: relative;
	padding: .7rem 3.25rem .7rem 2.75rem;
    border-radius: 0;
	border: 1px solid var(--mih-brand-gray-200);
	background-color: var(--mih-white);
	z-index: 1;
}

.action-bar__search .search-prefix-icon{
	pointer-events: none;
	position: absolute;
	z-index: 2;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.form-control::placeholder {
	font-family: var(--mih-font-body);
	color: var(--mih-brand-gray-500);
	font-size: var(--mih-fs-6);

}

.action-bar__search .search-submit-btn{
	position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
	z-index: 3;
}

.action-bar__search .search-prefix-icon .fill--clr-1{
	fill: var(--mih-brand-red);
}

.action-bar__search .search-submit-btn .fill--clr-1{
	fill: var(--mih-white);
}

.action-bar__search .search-clear-btn{
	position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
	z-index: 3;
}

.icon--mih-search{
	transform: scale(1.1);
	transition: var(--mih-anim-normal);
}

.action-bar__search .search-submit-btn .icon--arrow-right{
	transition: var(--mih-anim-normal);
}

/* .action-bar__search .search-submit-btn:hover .icon--arrow-right{
	transform: translateX(1px);
} */

.action-bar__sort{
	order: 3;
}

.app-resources--home .action-bar__sort .btn{
	background-color: var(--mih-brand-red);
	border-color: var(--mih-brand-red);
	color: var(--mih-white);
	padding: .65rem 1.25rem;
}

.app-resources--home .action-bar__sort .btn:hover,
.app-resources--home .action-bar__sort .btn:focus{
	background-color: var(--mih-brand-red-700);
	border-color: var(--mih-brand-red-700);
}

.app-resources--home .action-bar__sort .btn .fill--clr-1{
	fill: var(--mih-white);
}

.action-bar__sort .dropdown__list{
	left: auto;
	right: 0;
	width: 12rem;
}

.active-filters {
	position: relative;
	display: flex;
	align-items: center;
    gap: 0;
    box-sizing: border-box;
    width: calc(100% + var(--body-padding));
    margin-top: calc(-1 * var(--mih-spacing-6));
    margin-right: calc(-1 * var(--body-padding));
    margin-bottom: var(--mih-spacing-4);
/*    overflow: hidden;*/
}

/* Sized/positioned to match .active-filters__btn-wrapper's own box model
   (top: 1rem = its padding-top, height: 24px = a .btn--sm pill's rendered
   height) instead of centering across the wrapper's full absolutely-
   positioned height -- that full height also includes its permanently
   reserved horizontal scrollbar strip (overflow-x:scroll), which pushed
   this label's visual center below the pills' actual center. */
.active-filters p{
	position: absolute;
    top: 1rem;
    right: auto;
    height: 24px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-right: 1.5rem;
    color: var(--mih-brand-gray-800);
    background: linear-gradient(90deg, rgba(249, 248, 247, 1) 80%, rgba(249, 248, 247, 0) 100%);
	white-space: nowrap;
}

.active-filters__btn-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.5rem;
	padding: 1rem .5rem 1rem 7rem;
	position: relative;

	overflow-x: scroll;
	overflow-y: hidden;

	width: calc(100% + var(--mih-body-padding));
	margin-right:  calc(-1 * var(--mih-body-padding));
	box-sizing: border-box;

	-webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
	scrollbar-width: thin;             /* For Firefox */
}

.active-filters__btn-wrapper::-webkit-scrollbar {
	height: 8px;
	border-radius: 10px;
}

.active-filters__btn-wrapper::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 10px;
	border: 0px transparent;
}

.active-filters__btn-wrapper::-webkit-scrollbar-thumb {
	background-color: var(--mih-brand-gray-500);
	border-radius: 10px;
}

.active-filters__btn-wrapper > * {
	flex: 0 0 auto;   /* Don't shrink */
	white-space: nowrap; /* Prevent line breaks */
	margin: 0; 
}

.active-filters__btn-wrapper .btn {
    flex: 0 0 auto;
}


@media (max-width: 992px) {
	.action-bar, .action-bar__filters, .active-filters{
		gap: var(--mih-spacing-6) var(--mih-spacing-9);
	}
	
	.action-bar__filters{
		order: 2;
		gap: var(--mih-spacing-5);
	}

	.action-bar__search{
		flex: 1 1 100%;
		order: 1;
	}
	
	.app-resources--home .action-bar__search{
		flex: 1 1 50%;
	}

	.action-bar .action-bar__filters .btn{
		padding: var(--mih-spacing-4) var(--mih-spacing-7);
	}
}








   /* Search Styles -------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.no-results-wrapper{
    grid-column: 1 / 4;
    display: grid;
    justify-items: center;
}

.no-results{
    text-align: center;
    padding: 2rem 2rem 0 2rem;
    color: var(--mih-brand-gray-700);
}








   /* Footer Styles -------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.footer--jnj{
	background-color: var(--mih-black);
	color: var(--mih-white);
	padding-top: var(--mih-spacing-16);
	padding-bottom: var(--mih-spacing-16);
}

.footer--jnj .container-fluid{
	display: grid;
	grid-gap: var(--mih-spacing-13);
}

.footer__top, .footer__bottom{
	display: grid;
	grid-template-columns: 381px 1fr;
	transition: var(--mih-anim-normal);
}

.footer__top{
	grid-gap: var(--mih-spacing-13) var(--mih-spacing-15);
	align-items: flex-start;
	justify-items: flex-start;
}

.footer__logos{
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: var(--mih-spacing-16);
	align-items: center;
}

.footer__logos hr{
	width: 1px;
	background-color: var(--mih-white);
	border: none;
	height: 100%;
}

.footer__desc p:last-child{
	margin-bottom: 0;
}

.footer__bottom{
	grid-gap: var(--mih-spacing-13) var(--mih-spacing-15);
	padding-top: var(--mih-spacing-13);
	border-top: 1px solid var(--mih-white);
}

.btn.btn--footer-link{
	color: var(--mih-white);
}

a.btn.btn--footer-link:hover, .footer--jnj a.btn.btn--footer-link:active, .footer--jnj a.btn.btn--footer-link:focus{
	color: white;
}

/* Phase 3 footer: single combined logo lockup, underlined text links instead of button pills */
.footer--phase3 .footer__logos{
	display: block;
}

.footer--phase3 .footer__logos .logo--cobranded{
	width: 407px;
	height: auto;
}

.footer--phase3 .footer__top,
.footer--phase3 .footer__bottom{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mih-spacing-9);
}

a.btn--footer-link-text, button.btn--footer-link-text{
	background: none;
	border: none;
	padding: 0;
	color: var(--mih-white);
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-4);
	text-decoration: underline;
	cursor: pointer;
}

a.btn--footer-link-text:hover, a.btn--footer-link-text:focus, button.btn--footer-link-text:hover, button.btn--footer-link-text:focus{
	color: var(--mih-white);
	opacity: .8;
}

/* The OneTrust SDK (otSDKStub.js) injects its OWN #ot-sdk-btn styling --
   also !important -- asynchronously at some point after the SDK script
   finishes loading, so it can land in the DOM either before or after this
   stylesheet. Since both sides use !important, the browser breaks the tie
   by specificity, not source order -- so instead of matching OneTrust's
   own #ot-sdk-btn.ot-sdk-show-settings selector, this repeats the class
   (#ot-sdk-btn.ot-sdk-show-settings.ot-sdk-show-settings) purely to add an
   extra specificity point neither their default rule nor plain !important
   alone could reliably beat, forcing "Cookies settings" back to the same
   plain text link as its Privacy/Cookie policy siblings regardless of
   which stylesheet the browser happened to apply last. */
#ot-sdk-btn.ot-sdk-show-settings.ot-sdk-show-settings{
	background: none !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: var(--mih-white) !important;
	font-family: var(--mih-font-body) !important;
	font-size: var(--mih-fs-4) !important;
	font-weight: var(--mih-fw-regular) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

#ot-sdk-btn.ot-sdk-show-settings.ot-sdk-show-settings:hover, #ot-sdk-btn.ot-sdk-show-settings.ot-sdk-show-settings:focus{
	color: var(--mih-white) !important;
	opacity: .8;
}

/* OneTrust also injects a default icon via ::before on this button -- suppress it so
   "Cookies settings" reads as plain underlined text like its Privacy/Cookie policy siblings. */
#ot-sdk-btn.ot-sdk-show-settings.ot-sdk-show-settings::before{
	content: none !important;
}

@media (max-width: 920px) {
	.footer__top, .footer__bottom{
		grid-template-columns: 1fr;
		transition: var(--mih-anim-normal);
	}
}








   /* Misc Styles ---------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.container-fluid {
    max-width: var(--mih-max-width);
    padding-left: var(--mih-body-padding, 2.5rem);
    padding-right: var(--mih-body-padding, 2.5rem);
	transition: var(--mih-anim-normal);
}

.max-width{
	max-width: var(--mih-max-width);
}

.header-row{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
}

.header-row{
	margin-bottom: var(--mih-spacing-9);
}

.header-row h2{
	margin-bottom: 0;
}

@media (max-width: 576px) {
    .container-fluid{
        max-width: var(--mih-max-width);
        padding-left: var(--mih-body-padding, .5rem);
        padding-right: var(--mih-body-padding, .5rem);
		transition: var(--mih-anim-normal);
    }  
}








   /* Page Specific Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */


/* Home Hero Styles --------- */

.hero-text-container .btn{
	margin-top: 1.5rem;
}

.swiper{
	width: 100%;
}

/* Home hero: node 3566-52692 (search hero, breakpoints), referenced from
   the flow at 3555-16843. A .hero__bg rectangle sits behind the content at
   75% width (Figma's 12/16 grid columns) rather than filling the whole
   section, so the photo on the right can overlap onto the plain gray-100
   ground -- .hero-resources__content/.hero-resources__thumb sit above it
   in normal flow via z-index, not the grid the Figma export used. */
.hero--resources{
	position: relative;
	/* Explicit z-index (not just position:relative, and no isolation --
	   isolation:isolate would trap the open dropdown's z-index inside this
	   section's own stacking context instead of letting it outrank the
	   .app-resources section that follows) so the whole hero, including an
	   open filter dropdown that overflows past the hero's own bottom edge,
	   stacks above the content section below it regardless of DOM order. */
	z-index: 1;
	background-color: var(--mih-brand-gray-100);
	padding: var(--mih-spacing-18) 0;
}

.hero__bg{
	position: absolute;
	inset: 0 auto 0 0;
	width: 75%;
	background-color: var(--mih-brand-red);
	z-index: 0;
}

.hero__inner{
	position: relative;
	z-index: 1;
	display: flex;
	/* nowrap until the intentional 870px stacking breakpoint below, which
	   switches this to wrap + reorders the children -- otherwise, once the
	   viewport gets too narrow for both children at their flex-basis, wrap
	   would kick in on its own well above 870px (before that breakpoint
	   ever fires) and dump the thumb onto a broken, non-reordered second
	   line instead of shrinking both children to fit one row. */
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--mih-spacing-11) var(--mih-spacing-19);
	max-width: var(--mih-max-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--mih-body-padding);
	padding-left: var(--mih-body-padding);
}

.hero-resources__content{
	flex: 1 1 420px;
	/* Without this, a flex item's shrink floor defaults to its own
	   content's min-content width (not 0) -- here that's wide enough
	   (search bar's filter buttons, etc.) to force this column to wrap
	   below the thumb well before the intentional 870px stacking
	   breakpoint, instead of continuing to shrink smoothly down to it. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mih-spacing-21);
	color: var(--mih-white);
}

.hero-resources__intro{
	display: flex;
	flex-direction: column;
	gap: var(--mih-spacing-7);
}

.hero-resources__intro h1{
	margin: 0;
	color: var(--mih-white);
	font-family: var(--mih-font-header);
	font-size: var(--mih-fs-14);
	line-height: var(--mih-lh-normal);
}

.hero-resources__intro p{
	margin: 0;
	color: var(--mih-white);
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-6);
	line-height: var(--mih-lh-expanded);
}

.hero-resources__search{
	display: flex;
	flex-direction: column;
	gap: var(--mih-spacing-7);
}

.hero-resources__search h5{
	margin: 0;
	color: var(--mih-white);
	font-family: var(--mih-font-header);
	font-size: var(--mih-fs-7);
	line-height: var(--mih-lh-normal);
}

.hero-search{
	width: 100%;
}

.hero-search__bar{
	/* Queried below so the filters/submit-button layout responds to this
	   bar's own available width -- not just a guessed viewport breakpoint --
	   since the same "too narrow to fit on one row" squeeze can happen at
	   the tablet two-column layout (content column narrower than 577px)
	   as well as at true mobile widths. */
	container-type: inline-size;
	container-name: hero-search-bar;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	min-height: 64px;
	max-width: 577px;
	/* Reserve the submit button's own right offset plus its full width, so
	   the button's absolute position can never overlap the last filter
	   button's clickable area/label. */
	padding-right: calc(44px + var(--mih-spacing-7));
	background-color: var(--mih-white);
}

.hero-search__field{
	display: flex;
	flex: 1 1 220px;
	/* Keeps the search field's own row a consistent 64px once the filters
	   wrap onto a second row below it (align-items:stretch on the bar only
	   matches heights within the same flex line, not across wrapped ones),
	   so the submit button's row-relative centering below has a fixed
	   target regardless of wrap state. */
	min-height: 64px;
	align-items: center;
	gap: var(--mih-spacing-4);
	padding: var(--mih-spacing-7);
}

.hero-search__field .search-prefix-icon .fill--clr-1{
	fill: var(--mih-brand-red);
}

.hero-search__input{
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-6);
	color: var(--mih-black);
}

.hero-search__input:focus{
	outline: none;
}

.hero-search__input::placeholder{
	font-family: var(--mih-font-body);
	color: var(--mih-brand-gray-500);
}

.hero-search__filters{
	display: flex;
	align-items: stretch;
}

.hero-search__filter-btn{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-3);
	height: 100%;
	min-width: 0;
	min-height: 0;
	padding: var(--mih-spacing-7) var(--mih-spacing-7);
	border: 0;
	border-left: 1px solid var(--mih-brand-gray-500);
	border-radius: 0;
	background: none;
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-3);
	color: var(--mih-black);
	opacity: .75;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--mih-anim-normal);
}

.hero-search__filter-btn:hover,
.hero-search__filter-btn[aria-expanded="true"]{
	opacity: 1;
}

.hero-search__filter-btn[aria-expanded="false"] .icon{
	transform: rotate(0deg);
	transition: var(--mih-anim-normal);
}

.hero-search__filter-btn[aria-expanded="true"] .icon{
	transform: rotate(180deg);
	transition: var(--mih-anim-normal);
}

.hero-search__submit{
	position: absolute;
	top: 50%;
	right: var(--mih-spacing-7);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--mih-brand-red);
	color: var(--mih-white);
	cursor: pointer;
	transition: var(--mih-anim-normal);
}

.hero-search__submit:hover,
.hero-search__submit:focus-visible{
	background-color: var(--mih-brand-red-700);
}

.hero-search__view-all{
	width: fit-content;
	color: var(--mih-white);
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-3);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hero-search__view-all:hover,
.hero-search__view-all:focus-visible{
	/* Explicit color (not just opacity) so this wins over Bootstrap's
	   default a:hover blue -- ":hover" alone is equal-specificity but
	   .hero-search__view-all:hover has one more class-level selector, so
	   it takes precedence regardless of source order. */
	color: var(--mih-brand-gray-500);
}

.hero-resources__thumb{
	flex: 1 1 380px;
	min-width: 0;
	align-self: stretch;
	position: relative;
	min-height: 450px;
	overflow: hidden;
}

.hero-resources__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 870px) {
	.hero__inner{
		flex-wrap: wrap;
	}

	.hero-resources__content{
		order: 2;
		flex: 1 1 100%;
		gap: var(--mih-spacing-16);
	}

	.hero-resources__intro h1{
		line-height: var(--mih-lh-dense);
	}

	/* No top padding, and a short, fixed-height image (not a viewport-
	   relative one) -- once the hero stacks, the headline/subtext/search
	   need to stay above the fold, so the image can't be allowed to eat
	   an open-ended share of the viewport's height here. */
	.hero--resources{
		padding: 0 0 48px;
	}

	.hero-resources__thumb{
		order: 1;
		flex: 0 0 auto;
		width: 100%;
		/* Taller than the true-mobile crop below -- at this container width
		   a 200px-tall crop cuts off the APP's head, leaving just his hands
		   and torso visible. 300px comfortably keeps both people's faces in
		   frame. */
		height: 300px;
		min-height: 0;
		max-height: none;
	}

	.hero-resources__thumb img{
		object-position: center 72%;
	}

	.hero__bg{
		width: 100%;
		/* Same ~1/3-exposed proportion as the true-mobile crop below
		   (65px / 200px), scaled up for this taller 300px image so the
		   image-overlapping-into-red look stays visually consistent across
		   both stacked sizes: 300px * (65/200) = 97.5px. */
		top: 98px;
	}

	.hero-search__bar{
		max-width: 100%;
	}
}

@media (max-width: 560px) {
	/* Reverts to the original, tighter mobile crop (node 3566-52854) once
	   the viewport is narrow enough that even a 300px-tall image would
	   start crowding the headline/search out below the fold. */
	.hero-resources__thumb{
		height: 200px;
	}

	.hero-resources__thumb img{
		object-position: center 65%;
	}

	.hero__bg{
		top: 65px;
	}
}

/* Fires whenever the bar itself is too narrow to fit the search field,
   both filter buttons, and the submit button on one line -- true mobile
   widths, but also the tablet two-column layout once the content column
   (and therefore this bar, capped at 577px) gets squeezed below it. */
@container hero-search-bar (max-width: 480px) {
	.hero-search__filters{
		flex: 1 1 100%;
		/* The bar's padding-right only exists to keep row 1 (the search
		   field) clear of the submit button -- the button never overlaps
		   this row once it's wrapped below, so reclaim that reserved space
		   here instead of leaving it as unused space on this row's right edge. */
		margin-right: calc(-1 * (44px + var(--mih-spacing-7)));
		border-top: 1px solid var(--mih-brand-gray-500);
	}

	/* .hero-search__filter (the "dropdown" wrapper) is the actual flex
	   child of .hero-search__filters -- .hero-search__filter-btn is a
	   grandchild, so flex-grow on the button alone never stretched it;
	   that just left both dropdowns at their natural content width,
	   left-justified with empty space on the row's right. */
	.hero-search__filter{
		flex: 1 1 0;
	}

	.hero-search__filter-btn{
		width: 100%;
		justify-content: center;
	}

	/* The left border is a divider between the search field and Tumor
	   Types in the single-row layout -- once Tumor Types starts its own
	   full-width row below (with its own border-top), that left border has
	   nothing to its left anymore and just reads as a stray line. */
	.hero-search__filter:first-child .hero-search__filter-btn{
		border-left: 0;
	}

	/* Once the filters wrap onto their own row below the search field, the
	   bar is taller than a single 64px row -- pin the button to the search
	   field row's own center instead of the whole stacked bar's center. */
	.hero-search__submit{
		top: calc((64px - 44px) / 2);
		transform: none;
	}
}


   /* About Intro Carousel Styles --- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

/*
Lives inside <section class="about-mih about-mih--subpage"> -- there is no
separate hero section on this page anymore. Slide markup matches the homepage
hero's swiper-slide structure exactly (.flex > .hero-text-container +
.hero__thumb, image paired inside each slide) -- these rules only adjust
proportions/spacing for this context, they do not restructure the slides.
Nav buttons are inside .swiper (siblings of .swiper-wrapper, Swiper's own
standard structure), not nested inside a .swiper-slide.

Trade-off: because the photo lives inside each slide (not detached), it can
only be as tall as the slide's own content -- it can't literally stretch down
to flush with the "In the news" heading below, since that heading sits outside
the swiper entirely. min-height below gets it visually close to the Figma
frame without JS or restructuring the slide markup.
*/

.about-mih__intro{
	margin-bottom: var(--mih-spacing-11);
	/* .about-mih__intro-heading (below) is positioned absolutely against
	   this instead of .swiper directly, since it's a sibling of .swiper, not
	   a child of it -- with the heading taken out of flow, .swiper is this
	   element's only remaining normal-flow child, so this element's own
	   bottom edge ends up coinciding with .swiper's (and therefore the
	   photo's) bottom edge anyway. */
	position: relative;
	/* Establishes a block formatting context so .swiper's negative margin-top
	   (below) can't collapse through and drag this whole section upward --
	   without this, the vertical buffer trick would shift .about-mih__intro
	   itself instead of just reserving clip-safe space inside .swiper. */
	display: flow-root;
}

/* width/margin-left/padding-left on .swiper reserve a genuine buffer zone to
   the left of the visible content for the text's slide-in animation to
   travel through, without changing where anything actually renders: margin-
   left pulls the box (and therefore .swiper's own overflow:hidden clip edge)
   left by --intro-anim-distance, width grows by the same amount so the right
   edge doesn't move, and padding-left pushes the content back in by that
   amount so it lands exactly where it would have without any of this. Net
   effect: zero visual change at rest, but the clip edge now sits
   --intro-anim-distance further left than the content, so the text can
   slide in from there without ever crossing it (see the .hero-text-container
   rules below). Same idea vertically with margin-top/padding-top for the
   photo's rise-in (--intro-anim-distance-v): margin-top pulls the clip edge
   up, padding-top pushes the content back down by the same amount, and since
   margin-top's negative value doesn't add to the element's own flow height,
   the row below (the nav buttons / "In the news" heading) doesn't shift. */
.about-mih__intro .swiper{
	--intro-anim-distance: 10rem;
	--intro-anim-distance-v: 10rem;
	width: calc(100% + var(--intro-anim-distance));
	margin-left: calc(var(--intro-anim-distance) * -1);
	padding-left: var(--intro-anim-distance);
	margin-top: calc(var(--intro-anim-distance-v) * -1);
	padding-top: var(--intro-anim-distance-v);
}

/* No explicit height on .swiper-wrapper anymore -- letting it size from
   content instead of a fixed pixel value is what makes the row (and the
   photo, via align-items:stretch below) respond to however tall the copy
   + its padding actually ends up being. Swiper's own base CSS sets
   height:100% on .swiper-wrapper/.swiper-slide, and .swiper itself has no
   explicit height either, so that 100% chain has nothing concrete to
   resolve against -- per spec, an unresolvable percentage height falls
   back to auto (content-based) at every level, which is exactly the
   auto-sizing chain we want here.

   That auto-sizing is also why .swiper-slide needs an override back to
   height:auto: .swiper-wrapper is a flex container (Swiper's own base CSS),
   and since its own height is indeterminate, the slides' inherited
   height:100% can't resolve either -- but browsers still treat that
   unresolvable 100% as a definite cross size, which is enough to opt the
   slide out of the wrapper's align-items:stretch. With every slide sized
   to its own content instead of the tallest one, .swiper-wrapper's
   rendered height still ends up matching the tallest slide (ordinary auto-
   sizing), but any OTHER, shorter slide -- like this carousel's second
   slide, with less copy -- stays exactly as short as its own content
   requires, leaving unused space below its photo instead of the photo
   filling the space every slide actually has available. Restoring
   height:auto here undoes that opt-out, letting stretch equalize every
   slide to the tallest one's height as normal flexbox would. */
.about-mih__intro .swiper-slide{
	height: auto;
}

/* Countering the same problem one level down: .flex is a plain block, not
   itself a stretched flex item, so even though the slide above is now
   equalized to the tallest slide's height, .flex still only takes up
   however much room ITS OWN content (the text/photo row) naturally needs --
   height:100% is what makes it actually fill that now-taller slide, which
   is what gives align-items:stretch below something worth stretching
   .hero-text-container/.hero__thumb to. */
.about-mih__intro .swiper-slide .flex{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2rem var(--mih-spacing-17);
	height: 100%;
}

/* Reveal is driven by .is-revealed, added/removed by JS in
   mih-template-master.html rather than Swiper's own swiper-slide-active --
   this lets the script sequence the outgoing slide's exit and the incoming
   slide's entrance instead of firing both at once (see the slideChange
   handler there). .is-revealed's extra class gives it higher specificity
   than the unscoped `.swiper-slide-active .hero-text-container` / `.hero__thumb`
   rules above (Home Hero Styles), so those can't bleed in here even though
   Swiper still applies swiper-slide-active on its own for its own purposes.

   The text slides in from exactly --intro-anim-distance (the buffer
   reserved on .swiper above), so it travels the full distance without ever
   reaching the real clip edge. */
.about-mih__intro .hero-text-container{
	flex: 1 1 350px;
	max-width: 485px;
	position: relative;
	opacity: 0;
	left: calc(var(--intro-anim-distance) * -1);
	transition: var(--mih-anim-slow);
	padding-bottom: 128px;
}

.about-mih__intro .hero-text-container.is-revealed{
	opacity: 1;
	left: 0;
	transition: var(--mih-anim-xslow);
}

.about-mih__intro .hero__thumb{
	/* No explicit height -- align-items:stretch on .flex (above) gives this
	   a definite used height matching the row (i.e. the copy's height), which
	   is what the img's height:100% below then resolves against. Explicitly
	   setting height here would override stretch's own auto-cross-sizing and
	   reintroduce the "photo doesn't follow the copy's height" problem.

	   Exit transition matches .hero-text-container's (--mih-anim-slow, not
	   -xslow) -- introExitDuration in mih-template-master.html schedules the
	   incoming slide's entrance to start once that exit duration has
	   elapsed, so a slower exit here just meant the photo was still visibly
	   fading out (about a third of the way left to go) by the time the next
	   slide's content started entering. */
	flex: 1 1 380px;
	width: 100%;
	position: relative;
	top: calc(var(--intro-anim-distance-v) * -1);
	opacity: 0;
	transition: var(--mih-anim-slow);
}

.about-mih__intro .hero__thumb.is-revealed{
	opacity: 1;
	top: 0;
	transition: var(--mih-anim-xslow);
}

.about-mih__intro .hero__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Toggled by mih-template-master.html while the user is actively dragging
   the carousel -- the photo/text position and opacity are driven by inline
   styles set frame-by-frame from the drag position instead, so the CSS
   transition needs to get out of the way or it'll lag behind the finger. */
.about-mih__intro.intro-no-transition .hero-text-container,
.about-mih__intro.intro-no-transition .hero__thumb{
	transition: none !important;
}

.about-mih__intro-nav{
	display: flex;
	gap: var(--mih-spacing-7);
	/* margin-top: var(--mih-spacing-9); */
	position: absolute;
    bottom: 82px;
    z-index: 5;
}

/* btn--secondary-outlined is transparent by default, so the sliding text
   behind it would show through the middle of the ring even though the nav
   already sits above it in stacking order -- an opaque fill is what actually
   reads as "on top" regardless of z-index. */
.about-mih__intro-nav .btn{
	background: var(--mih-white);
}

.about-mih__intro-nav .icon--arrow-left{
	transform: rotate(180deg);
}

/* Absolutely positioned against .about-mih__intro (see position:relative
   there -- this is a sibling of .swiper, not a child of it, so it can't
   anchor to .swiper directly like .about-mih__intro-nav does) instead of
   normal-flow with a hand-tuned negative margin-top -- bottom:0 ends up
   flush with .swiper's own bottom edge (and therefore the photo's, since
   align-items:stretch keeps the text column and photo the same height).
   padding-top creates the gap above the divider (see
   .about-mih__intro-divider) instead of that gap coming from flow spacing. */
.about-mih__intro-heading{
	position: absolute;
	bottom: 0;
	padding-top: 48px;
	margin-bottom: 0;
}

/* Was a border-bottom on .about-mih__intro-nav -- tied the divider's
   existence (and width) to the nav's own layout, which broke down once the
   nav moved to a top-right stack on mobile (see below). A dedicated rule in
   the same container as the heading works at both breakpoints. */
.about-mih__intro-divider{
	width: 100px;
	height: 0;
	margin: 0 0 22px 0;
	border: none;
	border-top: 2px solid var(--mih-brand-gray-500);
}

@media (max-width: 870px) {
	/* The nav buttons sit flush against the right edge here (see
	   .about-mih__intro-nav below), so their :focus outline would otherwise
	   get clipped by .swiper's own overflow:hidden right at that edge --
	   and the photo below now slides in from the right instead of rising
	   from the top (see .hero__thumb below), which needs real travel room
	   on that side for the same reason the text already has it on the
	   left. Same bleed-to-edge idiom used elsewhere in this file (e.g.
	   width:calc(100% + gutter) + margin-right:-gutter), just reusing
	   --intro-anim-distance instead of --mih-body-padding now that the
	   buffer needs to be travel-distance-sized rather than just
	   focus-ring-sized: extend .swiper past the true viewport edge, cancel
	   the resulting overflow with margin-right (body's overflow-x:hidden
	   is what keeps this from opening a scrollbar), then pad the content
	   back in by the same amount so nothing shifts at rest. */
	.about-mih__intro .swiper{
		width: calc(100% + var(--intro-anim-distance) + var(--intro-anim-distance));
		margin-right: calc(-1 * var(--intro-anim-distance));
		padding-right: var(--intro-anim-distance);
	}

	/* The stretch-based height trick above only works while .hero-text-container
	   and .hero__thumb share the same flex row -- on mobile they wrap onto
	   separate rows (Figma's stacked layout), so .hero__thumb has nothing left
	   to stretch against and collapses to 0 height (hence the image not
	   rendering at all). Giving it its own aspect-ratio (matching the Figma
	   crop, 370x230) replaces stretch as the height source for this
	   breakpoint. Also drop the old fixed height:40vh/max-height:400px that
	   was left over from the pre-stretch layout -- it capped .swiper-wrapper
	   well below the stacked text+image content's real height, clipping the
	   image via .swiper's own overflow:hidden.

	   The reveal direction also switches from vertical (top, desktop) to
	   horizontal (left, matching the text's own slide-in direction but from
	   the opposite side) -- top:0 cancels the inherited vertical offset so
	   only the new horizontal one applies. */
	.about-mih__intro .hero__thumb{
		aspect-ratio: 370 / 230;
		top: 0;
		left: var(--intro-anim-distance);
	}

	.about-mih__intro .hero__thumb.is-revealed{
		left: 0;
	}

	/* The nav buttons move from a horizontal row below the text (desktop) to
	   a vertical stack pinned to the top-right of the text column (Figma).
	   padding-right on the text replaces the desktop padding-bottom that
	   used to reserve room for the old below-text nav position. */
	.about-mih__intro .hero-text-container{
		max-width: none;
		padding-bottom: 0;
		padding-right: 48px;
	}

	.about-mih__intro-nav{
		flex-direction: column;
		/* top:0 would land at the very top of .swiper's padding box, but
		   .swiper has padding-top:--intro-anim-distance-v (10rem) reserved as
		   a clip-safe buffer for the photo's rise-in animation -- offsetting
		   by that same amount lands here at the actual visible content's top
		   edge (where the text starts) instead of 10rem above it. */
		top: var(--intro-anim-distance-v);
		bottom: auto;
		/* Absolutely positioned elements are placed relative to the
		   containing block's padding EDGE, not inset by its padding value --
		   .swiper's own padding-right above only helps its normal-flow
		   content (the text/image), so this needs the same offset applied
		   explicitly to land at the same visual position instead of flush
		   against the (now further out) clip edge. */
		right: var(--intro-anim-distance);
		left: auto;
		gap: var(--mih-spacing-4);
	}

	/* Desktop positions this absolutely (bottom:0 within .swiper, flush with
	   the photo's bottom edge, since the heading sits beside the photo
	   there) -- on mobile the photo and heading are stacked in normal flow
	   instead, so this resets back to a normal-flow block with its own
	   top margin for spacing, rather than floating over the (now full-width,
	   stacked-above) image. */
	.about-mih__intro-heading{
		position: static;
		padding-top: 0;
		margin-top: var(--mih-spacing-12);
	}
}




/* Subpage Hero Styles --------- */ 

.hero--subpage{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: var(--mih-spacing-15) 0;
	min-height: 200px;
	position: relative;
	overflow: hidden; overflow: clip;
	transition: var(--mih-anim-normal);
}

.hero--subpage .hero-text-container{
	padding-right: 18rem;
}

.hero--subpage h1{
	color: var(--mih-brand-red);
}

.hero__subpage-bg{
	height: 100%;
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: calc(100% - 40vw);
}

.hero__subpage-bg::after{
	content:'';
	display: block;
	position: absolute;
	top: 0;
	right: -1000%;
	bottom: 0;
	left: 100%;
	background-color: var(--mih-brand-red);
}

.hero__subpage-bg img{
	display: flex;
	height: 100%;
	width: auto;
	object-fit: cover;
	object-position: left center;
}

@media (max-width: 768px) {
	.hero--subpage{
		min-height: 175px;
		padding: var(--mih-spacing-9) 0;
		transition: var(--mih-anim-normal);
	}
}




/* Home All Section Styles --------- */

.app-resources{
	padding: var(--mih-spacing-16) 0 var(--mih-spacing-22) 0;	
}

.about-mih, .oce-connect, .app-resources--treatments-withMe, .advocacy-resources {
	padding: 0 0 var(--mih-spacing-22) 0;
}

/* On the homepage .about-mih sits directly under .advocacy-resources with no
   gap wanted (hence padding-top:0 above), but the about page reuses the same
   .about-mih class right after its own separate .hero--subpage section, which
   does need a gap -- restore it just for that context. */
.about-mih--subpage{
	padding-top: var(--mih-spacing-15);
}




/* Home Primary Resource Styles --------- */

.app-resources{
	background-color: var(--mih-bg-grey);
	overflow: hidden;
	overflow: clip;
}

.app-resources__primary{
	display: grid;
	margin-bottom: var(--mih-spacing-7);
}

.app-resources--subpage .app-resources__primary{
	margin-bottom: 0;
}

.app-resources__primary .action-bar{
	margin-bottom: var(--mih-spacing-9);
}

.main-resources{
	--mih-scroll-buttons-width: 80px;
	--mih-scroll-gap: 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	grid-gap: var(--mih-spacing-9);
/*    overflow-y: scroll;*/
}

.app-resources--subpage .main-resources{
	align-items: stretch;
/*    margin-bottom: -5rem;*/
}

.resources__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: var(--mih-spacing-9);
	transition: var(--mih-anim-normal);
	position: relative;
	z-index: 1;
}

.main-resources__scroll {
	overflow-x: scroll;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
    padding-top: 5px;
	padding-bottom: 2.5rem;
	padding-left: calc((100vw - 100%) / 2);
    padding-right: calc((100vw - 100%) / 2);
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
    width: calc(100% + (100vw - 100%));
}

.main-resources__scroll::-webkit-scrollbar {
	height: 8px;
	border-radius: 10px;
}

/* The scrollbar-track's margin-right carves out --mih-scroll-gap +
   --mih-scroll-buttons-width so the bar fills the remaining space and
   stops short of the arrow buttons by that smaller gap, instead of
   running underneath them -- per the updated Figma (node 3464:14840),
   the bar and the arrows sit side by side in one row instead of the bar
   spanning edge-to-edge with the arrows stacked below it. margin-left is
   untouched (no reservation) so the bar still starts flush at the row's
   left edge, matching .scroll-controls sitting flush at the right edge
   below. This is a track-only (visual) margin -- deliberately NOT
   mirrored as padding-right on .main-resources__scroll itself, since
   that would extend how far the row actually scrolls and leave a gap of
   dead space after the last card. The webkit scrollbar thumb already
   renders within this shortened track box on its own (same trick the
   margin-left/right pair already relies on to inset the bar from the
   viewport edges without touching real scroll width).

   The baseline term intentionally stays ((100vw - max-width)/2) +
   body-padding, matching the pre-existing pattern above, rather than the
   more "exact" (100vw - 100%)/2 that .main-resources__scroll uses for its
   own padding: percentages don't reliably resolve inside a
   ::-webkit-scrollbar-track rule (confirmed by testing -- a var()/calc()
   expression built on `100%` here is silently ignored), so it has to stay
   a fixed/vw-based expression. This baseline needs the max-width media
   query below to zero out its negative term under that breakpoint --
   dropping the query (as an earlier pass here did) reintroduces
   misalignment between the bar and the buttons. */
.main-resources__scroll::-webkit-scrollbar-track {
	background: var(--mih-brand-gray-200);
	border-radius: 10px;
	margin-left: calc(((100vw - var(--mih-max-width)) / 2) + var(--mih-body-padding));
    margin-right: calc(((100vw - var(--mih-max-width)) / 2) + var(--mih-body-padding) + var(--mih-scroll-gap) + var(--mih-scroll-buttons-width));
}

@media (max-width: 1320px) {
	.main-resources__scroll::-webkit-scrollbar-track {
		margin-left: var(--mih-body-padding);
		margin-right: calc(var(--mih-body-padding) + var(--mih-scroll-gap) + var(--mih-scroll-buttons-width));
	}
}

.main-resources__scroll::-webkit-scrollbar-thumb {
	background-color: var(--mih-brand-gray-500);
	border-radius: 10px;
}

/* Sits in the same row as the scrollbar strip above (the bottom-padding
   area of .main-resources__scroll) instead of stacking as its own row
   below it. Floats via position:absolute rather than reserving its own
   trailing space in the scroll track -- doing that instead (extra
   padding-right on .main-resources__scroll) would let the row scroll
   further than its content, stranding a gap of dead space after the last
   card once fully scrolled. Floating means these buttons can overlap the
   last card's bottom-right corner at max scroll; that's an accepted
   trade-off for keeping the real scroll range matched to the actual
   content width. right:0 keeps the buttons flush with the row's right
   edge, mirroring the bar's own flush-left start above -- the bar fills
   whatever space is left between them (via the scrollbar-track's
   margin-right, not this block's own width). height:8px matches
   .main-resources__scroll::-webkit-scrollbar's own height exactly
   (rather than the full 1.5rem padding-bottom zone), so align-items
   centers the taller round buttons on the thin scrollbar LINE itself,
   not on the wider padding area around it. */
.scroll-controls{
	position: absolute;
	right: 0;
	bottom: 0;
	height: 8px;
	display: flex;
	align-items: center;
	gap: .5rem;
	z-index: 2;
}

.scroll-btn {
	z-index: 10;
	transition: background-color 0.3s ease;
}

.scroll-btn:hover {
	background-color: var(--mih-brand-gray-400);
}

.scroll-btn--left {
	position: absolute;
	left: 0;
	top: 40%;
	transform: translateY(-50%);
}

.scroll-btn--right {
	position: absolute;
	right: 0;
	top: 40%;
	transform: translateY(-50%);
}

.scroll-btn:disabled {
	background-color: var(--mih-brand-gray-200);
	color: var(--mih-brand-gray-500);
	cursor: not-allowed;
	opacity: 0.6;
}

@media (min-width: 1010px) {
	.app-resources .main-resources:not(.main-resources--bundles) {
		display: grid;
		grid-gap: var(--mih-spacing-1);

	}

	.app-resources .scroll-controls:not(.scroll-controls--bundles) .btn {
		display: none;
	}

	.app-resources .main-resources__scroll:not(.main-resources--bundles .main-resources__scroll) {
		overflow: visible;
	}
}


   /* Resource Bundles (home page) --- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

/* Node 3555-16456 (flow), 3555-17782 (card). Reuses the same always-on
   horizontal-scroll pattern as .advocacy-resources below (plain flex row,
   width:max-content, no responsive grid/scroll toggle) rather than the
   grid-on-desktop/scroll-on-mobile behavior above, which is specific to the
   old resource cards this section replaced. */
.main-resources--bundles .resources__grid{
	display: flex;
	width: max-content;
}

.card--bundle{
	/* This is a <button type="button">, which otherwise picks up the
	   sitewide default-button reset ([type="button"] { ... }): inline-flex
	   row layout, centered content, padding, nowrap text, white text on a
	   red pill. Every property below reasserts this as a plain stacked
	   card instead (the same class of bug as the earlier hero search
	   buttons/collection-modal item, just with more properties to cover
	   since this button also controls its own internal layout). */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	flex: 1 0 350px;
	width: 350px;
	max-width: 350px;
	padding: 0;
	min-width: 0;
	min-height: 0;
	white-space: normal;
	line-height: normal;
	color: var(--mih-black);
	background-color: var(--mih-white);
	border: 1px solid var(--mih-brand-gray-200);
	border-radius: 0;
	text-align: left;
	cursor: pointer;
}

.card--bundle__body{
	display: flex;
	/* Fixed to its own content height (not 1 1 auto) -- .resources__grid is a
	   flex row with the default align-items:stretch, so cards with a shorter
	   description would otherwise get stretched to match the tallest card in
	   the row, and this growing to fill that extra height pushed the image
	   stack down by a different amount on every card. .card--bundle__stack
	   below absorbs the stretch instead, since extra empty space at the top
	   of its gradient reads as intentional, unlike a gap in the copy block. */
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--mih-spacing-11);
	padding: var(--mih-spacing-11);
	width: 100%;
}

.card--bundle__copy{
	display: flex;
	flex-direction: column;
	gap: var(--mih-spacing-3);
}

/* .card__title has its own margin-top intended for contexts where it
   follows plain body copy -- here it follows the "Resource Bundle" badge
   directly, and that extra margin on top of this column's own gap made the
   badge-to-title spacing roughly double the title-to-description spacing. */
.card--bundle__copy .card__title{
	margin-top: 0;
}

.card--bundle__desc{
	color: var(--text-primary);
}

.card--bundle__tags{
	display: flex;
	flex-wrap: wrap;
	gap: var(--mih-spacing-4);
}

.card--bundle__arrow{
	/* .card--bundle__body's default align-items:stretch would otherwise
	   stretch this flex child to the body's full width -- combined with
	   .btn--icon-only's aspect-ratio:1/1, that scales its height to match,
	   turning a 48px icon button into a circle as wide as the card. */
	align-self: flex-start;
}

.card--bundle__stack{
	position: relative;
	/* Figma's "Slot" component (3555-17800/-17788/-17813/-17830) is exactly
	   400x250px for all four bundles -- identical frame, confirmed via
	   get_metadata -- so this is that same 1.6:1 ratio scaled to this
	   card's own 350px width (350/400 = .875 -> 250*.875 = 218.75px). Every
	   position below is scaled by that same .875 factor from the metadata's
	   real x/y/width/height, so the relative layout matches exactly. */
	flex: 1 1 218.75px;
	min-height: 218.75px;
	overflow: hidden;
	background: linear-gradient(180deg, var(--mih-white) 0%, var(--mih-brand-gray-200) 50%, var(--mih-brand-gray-400) 100%);
}

.card--bundle__thumb{
	position: absolute;
	/* contain, not cover -- these sit in a fixed-size box (below) now
	   instead of a box shaped to match each asset's own aspect ratio, so
	   a portrait asset just letterboxes inside the same box a landscape
	   one uses instead of stretching/cropping to fill it. */
	object-fit: contain;
	object-position: center;
	border-radius: 2px;
	/* box-shadow follows this element's full box, but with object-fit:contain
	   the rendered pixels only fill part of that box (letterboxed) whenever
	   an asset's real aspect ratio doesn't match its fixed tier box -- so
	   the shadow traced the invisible box edges instead of the image's
	   actual visible edges. filter:drop-shadow follows the rendered
	   content's own alpha shape instead of the element box, which is
	   exactly why .asset-img elsewhere in this file already uses the same
	   technique for the same reason. */
	filter: drop-shadow(0px 2px 8px rgba(49, 44, 42, 0.14));
	transition: var(--mih-anim-normal);
}

/* A shared template turned out not to hold up -- the actual card art sizes
   each asset differently depending on its own role/content (e.g. the wide
   short "purple slide" on New to Oncology vs. the small "Educator Modules"
   peeking behind it are not the same box at all), so every asset below is
   sized and placed individually against its own reference image rather
   than inheriting a tier default. The front-right/front-left/back-right/
   back-left order and count-aware z-index (highest on --1, descending)
   from spec still hold -- only the box geometry per asset is now bespoke. */
.card--bundle__thumb:nth-child(1){ z-index: 4; transform: translate(-50%, -50%) rotate(4deg); }
.card--bundle__thumb:nth-child(2){ z-index: 3; transform: translate(-50%, -50%) rotate(-4deg); }
.card--bundle__thumb:nth-child(3){ z-index: 2; transform: translate(-50%, -50%) rotate(3deg); }
.card--bundle__thumb:nth-child(4){ z-index: 1; transform: translate(-50%, -50%) rotate(-3deg); }

/* z-index range scales to how many assets a bundle actually has (4 vs 6)
   instead of a flat 4-3-2-1 for every bundle, so Treatment Options' extra
   pair extends the same front-to-back ordering cleanly rather than
   dropping to 0/negative z-index. */
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(1){ z-index: 6; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(2){ z-index: 5; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(3){ z-index: 4; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(4){ z-index: 3; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(5){ z-index: 2; transform: translate(-50%, -50%) rotate(2deg); }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(6){ z-index: 1; transform: translate(-50%, -50%) rotate(-2deg); }

/* Exact centers/sizes pulled from Figma's Card Component (node 3555:17782,
   "Bundle=NewtoOnc" 3555:17794), computed from each asset's real unrotated
   bounding box as a % of the 400x250 art slot, and cross-checked by
   downloading the actual rendered Figma PNG and pixel-measuring the
   purple slide's edges against this math (a prior pass double-counted
   the asset group's own offset inside the slot, pushing everything down
   and to the right of where Figma actually places it). */
.card--bundle__stack--new-to-onc .card--bundle__thumb:nth-child(1){ left: 71.9%; top: 83.43%; width: 49.38%; height: 49.94%; }
.card--bundle__stack--new-to-onc .card--bundle__thumb:nth-child(2){ left: 29.38%; top: 82.04%; width: 49.6%; height: 50.55%; }
.card--bundle__stack--new-to-onc .card--bundle__thumb:nth-child(3){ left: 63.96%; top: 52.31%; width: 57.45%; height: 51.93%; }
.card--bundle__stack--new-to-onc .card--bundle__thumb:nth-child(4){ left: 34.05%; top: 49.41%; width: 50.09%; height: 51.9%; }

/* From Figma "Bundle=Bispecifics" (node 3555:17783), same corrected method. */
.card--bundle__stack--bispecifics .card--bundle__thumb:nth-child(1){ left: 74.97%; top: 95.93%; width: 36.85%; height: 68.41%; }
.card--bundle__stack--bispecifics .card--bundle__thumb:nth-child(2){ left: 33.96%; top: 84.55%; width: 51.92%; height: 49.28%; }
.card--bundle__stack--bispecifics .card--bundle__thumb:nth-child(3){ left: 66.27%; top: 53.2%; width: 50.57%; height: 62.81%; }
.card--bundle__stack--bispecifics .card--bundle__thumb:nth-child(4){ left: 35.96%; top: 46.98%; width: 47.43%; height: 58.86%; }

/* From Figma "Bundle=J&J Treatments" (node 3555:17806), same corrected method. */
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(1){ left: 70.56%; top: 94.17%; width: 51.23%; height: 51.41%; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(2){ left: 30.79%; top: 102.13%; width: 47.58%; height: 47.19%; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(3){ left: 64.33%; top: 74.03%; width: 50.03%; height: 47.55%; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(4){ left: 35.22%; top: 70.59%; width: 46.84%; height: 44.78%; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(5){ left: 68.09%; top: 60.21%; width: 36.57%; height: 73.04%; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(6){ left: 38.26%; top: 53.84%; width: 37.42%; height: 74.84%; }

/* From Figma "Bundle=MM" (node 3555:17823), same corrected method -- all 4
   source assets are portrait, hence the taller boxes than the other bundles. */
.card--bundle__stack--mm .card--bundle__thumb:nth-child(1){ left: 72.42%; top: 113.02%; width: 49.08%; height: 99.64%; }
.card--bundle__stack--mm .card--bundle__thumb:nth-child(2){ left: 30.03%; top: 110.46%; width: 49.56%; height: 100.22%; }
.card--bundle__stack--mm .card--bundle__thumb:nth-child(3){ left: 65.73%; top: 73.23%; width: 50.1%; height: 100.87%; }
.card--bundle__stack--mm .card--bundle__thumb:nth-child(4){ left: 37.31%; top: 68.44%; width: 50.61%; height: 101.48%; }

/* Same "lift up and scale" idea as .card--resource:hover .asset-img--pdf
   above -- adds a lift on top of each thumb's own centering and a touch
   more rotation (in the same direction as its resting angle), so it reads
   as the pile fanning out rather than one flat image. The lift itself is a
   % of this stack's own height (not a fixed px) for the same scale-with-
   the-card reason as the resting positions above. */
.card--bundle:hover .card--bundle__thumb{
	transform: translate(-50%, calc(-50% - 4%)) scale(1.05) rotate(var(--thumb-hover-rotate, 0deg));
}
.card--bundle__thumb:nth-child(1){ --thumb-hover-rotate: 6deg; }
.card--bundle__thumb:nth-child(2){ --thumb-hover-rotate: -6deg; }
.card--bundle__thumb:nth-child(3){ --thumb-hover-rotate: 5deg; }
.card--bundle__thumb:nth-child(4){ --thumb-hover-rotate: -5deg; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(5){ --thumb-hover-rotate: 4deg; }
.card--bundle__stack--treatment-options .card--bundle__thumb:nth-child(6){ --thumb-hover-rotate: -4deg; }

.load-more-row{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: var(--mih-spacing-6);
    align-items: center;
    position: relative;
    z-index: 2;
    padding-bottom: .5rem;
}

.app-resources--subpage .load-more-row{
    position: absolute;
    padding-bottom: .5rem;
    bottom: 2rem;
    width: 100%;
}

.load-more-row .btn, .load-more-row hr{
	position: relative;
	z-index: 3;
}

.app-resources--subpage .load-more-row::after{
	content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: -110%;
    left: 0;
    height: 22rem;
    background: linear-gradient(180deg, rgba(249, 248, 247, 0.00) 0%, #F9F8F7 60%);
    backdrop-filter: blur(.35px);
}

@media (max-width: 1010px) {
	.app-resources--home .resources__grid{
		display: flex;
		overflow-y: visible;
		width: max-content;
		/*padding-right: calc((100vw - 100%) / 2);*/
		transition: var(--mih-anim-normal);
	}

	.app-resources--home .card--resource{
		display: flex;
		flex: 1 0 300px;
		width: 33%;
		max-width: 350px;
	}
	
	.app-resources--home .load-more-row{
		display: none;
	}
	
	.resources__grid{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.resources__grid{
		grid-template-columns: repeat(1, 1fr);
	}
}




/* Home Highlighted Resource Styles --------- */

.app-resources__highlights{
	display: grid;
	gap: var(--mih-spacing-9);
	margin-bottom: var(--mih-spacing-9);
}

.app-resources__highlights .app-resources__tumor-highlights, 
.app-resources__highlights .app-resources__audience-highlights{
	display: flex;
	align-items: stretch;
/*	gap: var(--mih-spacing-9);*/
}

.app-resources__highlights, 
.app-resources__highlights .app-resources__tumor-highlights, 
.app-resources__highlights .app-resources__audience-highlights {
	gap: var(--mih-spacing-6);
}

.app-resources__tile{
	display: grid;
	grid-template-columns: 1fr 35%;
	padding: 0;
	position: relative;
	flex: 1 1 250px;
	align-items: stretch;
	overflow: hidden;
	overflow: clip;
	background-color: var(--mih-brand-red);
	border-radius: 0;
	min-height: 70px;
	transition: box-shadow var(--mih-anim-normal);
}

.app-resources__tile:hover, .app-resources__tile:focus, .app-resources__tile:focus-visible{
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
}

.app-resources__tumor-highlights .app-resources__tile{
	justify-content: flex-start;
}

.app-resources__audience-highlights .app-resources__tile{
	justify-content: flex-start;
}

.app-resources__audience-highlights .app-resources__tile p{
	text-align: left;
}

.app-resources__tile p{
	grid-column: 1;
	font-weight: var(--mih-fw-semibold);
	line-height: var(--mih-lh-dense);
	text-align: left;
	color: var(--mih-white);
	background: transparent;
	backdrop-filter: none;
    margin: 0;
    padding: var(--mih-spacing-5) var(--mih-spacing-7);
	position: relative;
	z-index: 2;
	align-self: center;
	transform: none;
	transform-origin: center left;
	transition: none;
}

.app-resources__tile p::after{
	content: none;
}

.app-resources__tile:hover p, .app-resources__tile:focus p, .app-resources__tile:focus-visible p{
	text-decoration: underline;
}

.app-resources__tile:hover p::after, .app-resources__tile:focus p::after{
	opacity: 1;
	transition: var(--mih-anim-normal);
}

.app-resources__tile-media{
	grid-column: 2;
	overflow: hidden;
	overflow: clip;
}

.app-resources__tile img{
	position: static;
	object-fit: cover;
	z-index: 1;
	height: 100%;
	width: 100%;
	opacity: 1;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.app-resources__tile:hover img, .app-resources__tile:focus img, .app-resources__tile:focus-visible img{
	transform: scale(1.1);
}

.app-resources__audience-highlights .app-resources__tile img{
	object-position: right center;
}

.app-resources__tumor-highlights .app-resources__tile img{
	max-height: 75px;
	margin: auto 0 auto auto;
}

.app-resources__audience-highlights .app-resources__tile img{
	max-height: 100px;
	margin: auto 0 auto auto;
}

.app-resources__audience-highlights .app-resources__tile p{
	transform-origin: left center;
}

@media (max-width: 820px) {
	.app-resources__highlights .app-resources__tumor-highlights{
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.app-resources__tile {
		padding: 0;
		flex: 1 1 40%;
	}
	
	.app-resources__audience-highlights .app-resources__tile img {
		object-position: right;
		background-color: #8571C9;
	}
}

@media (max-width: 560px) {
	.app-resources__highlights, .app-resources__highlights .app-resources__tumor-highlights, .app-resources__highlights .app-resources__audience-highlights {
		gap: var(--mih-spacing-4);
	}
	
	.app-resources__highlights{
    	margin-bottom: var(--mih-spacing-9);
	}
	
	.app-resources__highlights .app-resources__audience-highlights{
		flex-wrap: wrap;
	}
	
	.app-resources__tumor-highlights .app-resources__tile {
		justify-content: flex-start;
	}
	
	.app-resources__tile p, .app-resources__audience-highlights .app-resources__tile p {
    	/* text-align: center; */
		width: 100%;
		transform: none;
		/* transform-origin: center center; */
	}
}




/* Home Secondary Resource Styles --------- */

.secondary-header{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mih-spacing-9);
	margin-bottom: var(--mih-spacing-9);
}

.secondary-header h2{
	margin-bottom: 0;
}

.secondary-resources{
	/* display: flex;
	flex-wrap: wrap;
	gap: var(--mih-spacing-9);
	align-items: stretch; */
	display: grid;
	grid-template-areas: 
		"resource-title-1 	resource-title-2"
		"resource-list		resource-highlight";
	grid-gap: var(--mih-spacing-3) var(--mih-spacing-9);
	grid-template-columns: 7fr 10fr;
}


.secondary-resources .h2:first-of-type{
	grid-area: resource-title-1;
}

.secondary-resources .h2:last-of-type{
	grid-area: resource-title-2;
}

.secondary-resources .external-resources-list{
	grid-area: resource-list;
	flex: 1 1 400px;
	display: grid;
	grid-gap: 3px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.secondary-resources .external-resources--lg-card{
	grid-area: resource-highlight;
	flex: 4 1 500px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--mih-white);
	overflow: clip;
}

@media (max-width: 940px) {
	.secondary-resources{
		grid-template-areas: 
			"resource-title-1"
			"resource-list" 	
			"resource-title-2"
			"resource-highlight";
		grid-template-columns: 1fr;
	}

	.secondary-resources .h2:last-of-type{
		margin-top: var(--mih-spacing-15);
	}
}

.external-resources .btn--stacked{
	font-family: var(--mih-font-header);
	font-size: var(--mih-fs-5);
}

.external-resources .btn--stacked:hover, .external-resources .btn--stacked:focus,
.external-resources-list .btn--stacked:hover, .external-resources-list .btn--stacked:focus{
	background-color: var(--mih-brand-red);
	border: 1px solid var(--mih-brand-red);
	color: var(--mih-white);
	transform: scale(1.01);
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
}

.external-resources .btn--stacked:hover .fill, .external-resources .btn--stacked:focus .fill,
.external-resources-list .btn--stacked:hover .fill, .external-resources-list .btn--stacked:focus .fill{
	fill: var(--mih-white);
}

.external-resources__body-text{
	padding: var(--mih-spacing-11);
}

.logo--with-me{
	width: 100%;
	max-width: 150px;
	margin-bottom: 1.5rem;
}

.external-resources__body-text p{
	margin-bottom: 1.5rem
}

.external-resources__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.secondary-header{
		grid-template-columns: 1fr;
	}
}




/* About MIH Section Styles --------- */

.about-mih__flex{
	display: flex;
	flex-wrap: wrap;
	gap: var(--mih-spacing-11);
}

.about-mih__links{
	flex: 1 1 250px;
}

.about-mih__links .header-row h2 {
	padding-right: 6.5rem;
}

@media (max-width: 768px) {
    .about-mih__links .header-row h2 br{
        display: none;
    }
}

.about-mih__resources .btn--stacked{
	background: transparent;
	padding: var(--mih-spacing-9) 0;
	border: 0;
	border-top: 1px solid var(--mih-brand-gray-200);
}

.about-mih__resources .btn--stacked:last-child{
	border-bottom: 1px solid var(--mih-brand-gray-200);
}

.about-mih__resources .btn--stacked:hover, .about-mih__resources .btn--stacked:focus, .about-mih__resources .btn--stacked:active{
	background: transparent;
	color: var(--mih-brand-red);
	padding-left: var(--mih-spacing-4);
	border: 0;
	border-top: 1px solid var(--mih-brand-gray-200);
	transition: var(--mih-anim-normal);
}

.about-mih__resources .btn--stacked:focus, .about-mih__resources .btn--stacked:active{
	padding-right: var(--mih-spacing-4);
	transition: var(--mih-anim-normal);
}

.about-mih__resources .btn--stacked:last-child:hover{
	border-bottom: 1px solid var(--mih-brand-gray-200);
}

.app-impact{
/*	background-color: var(--mih-brand-gray-200);*/
	background-color: transparent;
	flex: 5 1 400px;
    display: flex;
    flex-direction: column;
}

.app-impact .header-row{
	background-color: transparent;
	padding: 0 0 var(--mih-spacing-7) 0;
	border-bottom: 1px solid var(--mih-brand-gray-200);
	margin-bottom: 0;
}

.app-impact .header-row h2{
	color: var(--mih-brand-red);
}

.app-impact .accordion{
	overflow: hidden;
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.accordion-item, .accordion-button {
	height: 100%;
	background-color: transparent;
	border: 0px solid transparent;
	transition: var(--mih-anim-normal);
}

.accordion-item{
	position: relative;
	border-bottom: 1px solid var(--mih-brand-gray-200);
}

.accordion-button.collapsed:hover{
	background-color: transparent;
}

.accordion-button.collapsed:active{
	background-color: transparent;
}

.accordion-button:not(.collapsed) .accordion-button, .accordion-item:focus .accordion-button, .accordion-item:has(.accordion-button:focus) {
	background-color: transparent;
	border-radius: 0;
}

.accordion-item:has(.accordion-button:focus) {
	outline: 3px;
}

.accordion-item:last-of-type, .accordion-item:last-of-type .accordion-button.collapsed{
	border-radius: 0;
}

.accordion-button {
	background-color: transparent;
	padding: var(--mih-spacing-11) 0;
	border-radius: 0;
	gap: 1.5rem;
}

.accordion-button:focus {
	background: transparent;
	outline: 3px solid rgba(13,110,253,.25);
	outline-offset: 2px;
}

.accordion-button .title, .accordion-button p{
	color: var(--mih-black);
	transition: var(--mih-anim-normal);
}

.accordion-button .title{
	margin-bottom: 0;
}

.accordion-button:hover .title, .accordion-button:focus .title{
	color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.accordion-button p{
	display: none;
	visibility: hidden;
	opacity: 0;
}

.accordion-button p:first-of-type{
	margin-top: .5rem;
}

.accordion-button p:last-child, .accordion-body__hidden-txt p:last-child{
	margin-bottom: 0;
}

.accordion-button:not(.collapsed) .title{
	color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.accordion-button:not(.collapsed) p {
	display: block;
	visibility: visible;
	opacity: 1;
	transition: var(--mih-anim-normal);
}

.accordion-item:first-of-type .accordion-button {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accordion-button__copy{
	display: flex;
	flex-direction: column;
}

.accordion-button:not(.collapsed){
/*	height: 92.3px;*/
	align-items: flex-start;
	overflow: visible;
    background-color: transparent;
    box-shadow: none;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.accordion-button:not(.collapsed) .accordion-button__copy{
	align-self: flex-start;
	max-width: 50%;
	padding-right: var(--mih-spacing-11);
}

.accordion-body {
	padding: var(--mih-spacing-11) calc(1.25rem + 17px) var(--mih-spacing-11) var(--mih-spacing-11);
/*	margin-top: calc(-1 * 92.3px);*/
	display: flex;
	align-items: flex-start;
    gap: var(--mih-spacing-9);
}

.accordion-body__hidden-txt{
	flex: 1 1 50%;
	opacity: 0;
}

.accordion-item .accordion-collapse {
/*	background-color: var(--mih-brand-red);*/
	/*margin-top: calc(-1 * 80px);*/
	margin-top: 0;
	position: relative;
    z-index: 2;
    pointer-events: none;
}

.accordion-item .accordion-collapse .btn--modal{
	pointer-events: visible;
	flex: 1 1 50%;
	padding: 0;
    border: 0;
	position: relative;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23EB1700'/%3e%3cpath d='M10 5.5v9M5.5 10h9' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
}

.accordion-button.collapsed:hover::after, .accordion-button.collapsed:focus::after, .accordion-button.collapsed:active::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23CC1400'/%3e%3cpath d='M10 5.5v9M5.5 10h9' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23EB1700'/%3e%3cpath d='M5.5 10h9' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
}


#appImpactVid1Modal .modal-content.card--resource,
#appImpactVid2Modal .modal-content.card--resource,
#appImpactVid3Modal .modal-content.card--resource{
	padding: 0;
}

#appImpactVid1Modal .modal-content.card--resource .asset--video,
#appImpactVid2Modal .modal-content.card--resource .asset--video,
#appImpactVid3Modal .modal-content.card--resource .asset--video{
    display: flex;
    margin-bottom: -1px;
}


#appImpactVid1Modal .btn-close,
#appImpactVid2Modal .btn-close,
#appImpactVid3Modal .btn-close{
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    z-index: 3;
}

.btn--modal-video .icon--play-btn{
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	width: 32px;
	filter: drop-shadow(0px 0px 5px rgba(49, 44, 42, .25));
	transform: scale(1);
	height: 28px;
}



@media (max-width: 560px) {
	.accordion-button:not(.collapsed) .accordion-button__copy{
		max-width: 100%;
		border-right: 0;
	}

	.accordion-body {
		flex-wrap: wrap;
	}
}





/* OCE Connect Section Styles --------- */

.oce-connect{
	background-color: var(--mih-bg-grey);
}

.oce-connect__card{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: var(--mih-spacing-11) 1fr var(--mih-spacing-11);
	grid-gap: 0 var(--mih-spacing-11);
	transition: var(--mih-anim-normal);
}

.oce-connect__card-copy{	
	background-color: var(--mih-brand-red);
	padding: var(--mih-spacing-11);
	width: 100%;
	grid-column: 1 / 10;
	grid-row: 2 / 4;
	padding-right: 60%;
	transition: var(--mih-anim-normal);
}

.oce-connect__card-copy .title, .oce-connect__card-copy p{
	color: var(--mih-white);
}

.oce-connect__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	grid-column: 5 / 13;
	grid-row: 1 / 3;
	transition: var(--mih-anim-normal);
}

/* locatemyoce.com renders its own therapeutic-area/zip search and OCE
   profile result inside this iframe (Figma node 3555:16337), so this
   modal only needs to be sized to hold it comfortably -- wider than the
   standard .card--resource modal (650px) since it's framing a full
   external page, not a single MIH content card. */
.modal-content--oce{
	max-width: 800px;
	padding: 0;
}

/* .modal-content--oce .modal-body{
	padding: 0;
	height: 85vh;
	height: 85svh;
} */

.oce-locator-iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.form-group{
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-width: 0;
}

.form-group label,
.form-group input {
	width: 100%;
	flex: 0 0 auto;
}

label{
	font-weight: var(--mih-fw-light);
	color: var(--mih-brand-gray-800);
}

input{
	border-radius: 4px;
	border: 1px solid var(--mih-brand-gray-300);
}

.g-recaptcha{
	flex: 1 1 100%;
	margin-top: 1rem;
}

@media (max-width: 992px) {
	.oce-connect__card{
		grid-template-rows: 1fr 100px 350px;
		transition: var(--mih-anim-normal);
	}

	.oce-connect__card-copy {
		max-width: 100%;
		display: grid;
		grid-template-columns: 2fr 3fr;
		justify-items: flex-start;
		grid-gap: 0 2rem;
		grid-column: 1 / 12;
		grid-row: 1 / 3;
		padding-right: var(--mih-spacing-11);
		padding-bottom: calc(100px + var(--mih-spacing-11));
		transition: var(--mih-anim-normal);
	}

	.oce-connect__card .title{
		grid-column: 1/2;
		transition: var(--mih-anim-normal);
	}

	.oce-connect__card p, .oce-connect__card .btn{
		grid-column: 2/3;
		transition: var(--mih-anim-normal);
	}

	.oce-connect__img {
		grid-row: 2 / 4;
		grid-column: 2 / 13;
		transition: var(--mih-anim-normal);
	}
}

@media (max-width: 738px) {
	.oce-connect__card .title, .oce-connect__card p, .oce-connect__card .btn{
		grid-column: 1/3;
		transition: var(--mih-anim-normal);
	}
	.oce-connect__card .title br:first-of-type{
		display: none;
	}
}




/* Home Advocacy Resource Styles --------- */

.advocacy-resources{
/*	padding-top: 0;*/
	background-color: var(--mih-bg-grey);
}

.advocacy-resources .main-resources{
	margin-bottom: var(--mih-spacing-7);
}

.advocacy-resources .resources__grid {
	display: flex;
	width: max-content;
	transition: var(--mih-anim-normal);
	/*padding-right: calc((100vw - 100%) / 2);*/
}

.advocacy-resources .card--resource {
	display: flex;
	flex: 1 0 300px;
	width: 33%;
	max-width: 350px;
}




/* Collection Feature Styles --------- */

.card--selectable{
	cursor: pointer;
}

.card-select-indicator{
	position: absolute;
	top: var(--mih-spacing-7);
	right: var(--mih-spacing-7);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--mih-brand-gray-300);
	background: var(--mih-white);
	box-shadow: var(--mih-shadow-xs);
	display: grid;
	place-items: center;
	z-index: 3;
	transition: var(--mih-anim-normal);
}

.card-select-indicator::before{
	content: "";
	position: absolute;
	inset: -1rem;
	background: transparent;
	border-radius: 50%;
	z-index: 2;
}

.card--selectable:hover .card-select-indicator{
	border-color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.card--selectable.is-selected .card-select-indicator{
	background: var(--mih-brand-red);
	border-color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.card--selectable.is-selected .card-select-indicator::after{
	content: "✓";
	border-radius: 50%;
	color: var(--mih-white);
	transition: var(--mih-anim-fast);
}

.card-select-indicator__label,
.card-select-indicator__button,
.card-select-indicator__symbol{
	display: none;
}

@media (hover: hover) {
	.card--selectable:hover .card-select-indicator,
	.card-select-indicator:focus-visible{
		align-items: center;
		background: var(--mih-brand-gray-800);
		border-color: var(--mih-brand-gray-800);
		border-radius: 999px;
		display: flex;
		gap: .25rem;
		justify-content: flex-start;
		padding: 0;
		width: auto;
	}

	.card--selectable:hover .card-select-indicator__label,
	.card-select-indicator:focus-visible .card-select-indicator__label{
		color: var(--mih-white);
		display: block;
		font-size: .875rem;
		font-weight: 400;
		opacity: 1;
		padding: 2px 2px 2px 10px;
		white-space: nowrap;
	}

	.card--selectable:hover .card-select-indicator__button,
	.card-select-indicator:focus-visible .card-select-indicator__button{
		align-items: center;
		border: 1.5px solid var(--mih-white);
		border-radius: 50%;
		display: grid;
		place-items: center;
	}

	.card--selectable:hover .card-select-indicator__symbol,
	.card-select-indicator:focus-visible .card-select-indicator__symbol{
		align-items: center;
		background: var(--mih-white);
		border: 1.5px solid var(--mih-brand-red);
		border-radius: 50%;
		color: var(--mih-brand-red);
		display: grid;
		font-size: 1.125rem;
		height: 24px;
		line-height: 1;
		place-items: center;
		width: 24px;
	}
}

/* Figma collection-selector states. */
@media (hover: hover) {
	.card--selectable:hover .card-select-indicator,
	.card-select-indicator:focus-visible,
	.card--selectable.is-selected .card-select-indicator{
		align-items: center;
		border: 0;
		border-radius: 999px;
		display: inline-flex;
		gap: .25rem;
		overflow: visible;
		padding: 0;
		width: max-content;
	}

	.card--selectable:hover .card-select-indicator,
	.card-select-indicator:focus-visible{
		background: var(--mih-brand-gray-800);
	}

	.card-select-indicator:hover{
		background: var(--mih-brand-red);
	}

	.card--selectable:hover .card-select-indicator__label,
	.card-select-indicator:focus-visible .card-select-indicator__label,
	.card--selectable.is-selected .card-select-indicator__label{
		color: var(--mih-white);
		display: block;
		font-size: .875rem;
		font-weight: 400;
		line-height: 1.4;
		padding: 2px 2px 2px 10px;
		white-space: nowrap;
	}

	.card--selectable:hover .card-select-indicator__button,
	.card-select-indicator:focus-visible .card-select-indicator__button,
	.card--selectable.is-selected .card-select-indicator__button{
		align-items: center;
		border: 1.5px solid var(--mih-white);
		border-radius: 999px;
		display: grid;
		flex: 0 0 24px;
		margin-right: -6px;
		place-items: center;
		position: relative;
		z-index: 1;
	}

	.card--selectable:hover .card-select-indicator__symbol,
	.card-select-indicator:focus-visible .card-select-indicator__symbol{
		align-items: center;
		background: var(--mih-white);
		border: 1.5px solid var(--mih-brand-red);
		border-radius: 50%;
		color: var(--mih-brand-red);
		display: grid;
		font-size: 1.125rem;
		height: 24px;
		line-height: 1;
		place-items: center;
		width: 24px;
	}

	.card--selectable.is-selected .card-select-indicator{
		background: var(--mih-brand-gray-900);
	}

	.card--selectable.is-selected .card-select-indicator__symbol{
		align-items: center;
		background: var(--mih-brand-red);
		border: 1.5px solid var(--mih-brand-red);
		border-radius: 50%;
		color: var(--mih-white);
		display: grid;
		font-size: .875rem;
		font-weight: 700;
		height: 24px;
		line-height: 1;
		place-items: center;
		width: 24px;
	}
}

.card--selectable.is-selected .card-select-indicator{
	align-items: center;
	background: var(--mih-brand-gray-900);
	border-color: var(--mih-brand-gray-900);
	border-radius: 999px;
	display: flex;
	gap: .25rem;
	justify-content: flex-start;
	padding: 0;
	width: auto;
}

.card--selectable.is-selected .card-select-indicator__label{
	color: var(--mih-white);
	display: block;
	font-size: .875rem;
	font-weight: 400;
	padding: 2px 2px 2px 10px;
	white-space: nowrap;
}

.card--selectable.is-selected .card-select-indicator__button{
	align-items: center;
	border: 1.5px solid var(--mih-white);
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.card--selectable.is-selected .card-select-indicator__symbol{
	align-items: center;
	background: var(--mih-brand-red);
	border: 1.5px solid var(--mih-brand-red);
	border-radius: 50%;
	color: var(--mih-white);
	display: grid;
	font-size: .875rem;
	font-weight: 700;
	height: 24px;
	place-items: center;
	width: 24px;
}

.card--selectable.is-selected .card-select-indicator::after{
	content: none;
}

@media (hover: hover) {
	.card--selectable.is-selected .card-select-indicator{
		padding: 0;
		width: max-content;
	}

	.card--selectable.is-selected .card-select-indicator__button{
		flex: 0 0 24px;
		margin-right: -6px;
		position: relative;
		z-index: 1;
	}

	.card--selectable:not(.is-selected):hover .card-select-indicator:hover{
		background: var(--mih-brand-red);
	}
}

/* Add-resources mode exposes each card's collection selector. */
.card--selection-mode:not(.is-selected) .card-select-indicator{
	align-items: center;
	background: var(--mih-brand-gray-800);
	border: 0;
	border-radius: 999px;
	display: inline-flex;
	gap: .25rem;
	overflow: visible;
	padding: 0;
	width: max-content;
	animation: card-selector-reveal .24s ease-out both;
	animation-delay: var(--collection-selector-delay, 0ms);
}

.card--selection-mode:not(.is-selected) .card-select-indicator__label{
	color: var(--mih-white);
	display: block;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.4;
	padding: 2px 2px 2px 10px;
	white-space: nowrap;
}

.card--selection-mode:not(.is-selected) .card-select-indicator__button{
	align-items: center;
	background: var(--mih-white);
	border: 0;
	border-radius: 50%;
	display: grid;
	flex: 0 0 28px;
	height: 28px;
	margin-right: -6px;
	place-items: center;
	position: relative;
	width: 28px;
	z-index: 1;
}

.card--selection-mode:not(.is-selected) .card-select-indicator__symbol{
	align-items: center;
	background: var(--mih-bg-grey);
	border: 1.5px solid var(--mih-brand-red);
	border-radius: 50%;
	color: var(--mih-brand-red);
	display: grid;
	font-size: 1.125rem;
	height: 24px;
	line-height: 1;
	place-items: center;
	width: 24px;
}

@keyframes card-selector-reveal{
	from{
		opacity: 0;
		transform: translateY(-4px) scale(.96);
	}
	to{
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.collection-bar.is-expanded.is-adding-resources.has-selected-resources .collection-bar__count{
	display: block;
}

.collection-bar.is-expanded.has-selected-resources .collection-bar__actions{
	justify-content: flex-end;
	width: auto;
}

/* Edit Selection opens the selected resources within the same collection bar. */
.collection-bar > .collection-bar__expand{
	display: grid;
	padding: 0;
}

.collection-bar.is-expanded.is-editing-selection{
	width: min(1100px, calc(100% - 32px));
}

.collection-bar.is-expanded.is-editing-selection > .collection-bar__expand{
	display: grid;
	gap: var(--mih-spacing-4);
	max-height: 390px;
	opacity: 1;
	padding: 0 24px 16px;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
	width: 100%;
}

.collection-bar.is-expanded.is-editing-selection .collection-bar__expand > .collection-bar__count{
	display: block;
	font-weight: 600;
}

.collection-bar.is-expanded.is-editing-selection .collection-preview-grid{
	max-height: 250px;
	padding: 0;
	margin: 0;
	mask-image: none;
}

.collection-bar.is-expanded.is-editing-selection .collection-bar__footer .collection-bar__count{
	display: block;
}

@media (max-width: 820px) {
	/* Selected summary: show the count above the actions until Edit Selection
	   opens the selected-resource list. */
	.collection-bar.is-expanded.has-selected-resources:not(.is-editing-selection) > .collection-bar__footer{
		align-items: stretch;
		flex-direction: column;
		gap: var(--mih-spacing-6);
		justify-content: flex-start;
		max-height: 176px;
		padding: 14px 16px;
	}

	.collection-bar.is-expanded.has-selected-resources:not(.is-editing-selection) .collection-bar__footer .collection-bar__count{
		display: block;
		width: 100%;
	}

	.collection-bar.is-expanded.has-selected-resources:not(.is-editing-selection) .collection-bar__actions{
		align-self: flex-end;
		justify-content: flex-end;
		width: auto;
	}

	/* Keep the selected-count readable while preserving a compact action row. */
	.collection-bar.is-expanded.has-selected-resources > .collection-bar__footer{
		max-height: 160px;
	}

	.collection-bar.is-expanded.is-editing-selection > .collection-bar__footer{
		align-items: stretch;
		flex-direction: column;
		gap: var(--mih-spacing-6);
		max-height: 160px;
	}

	.collection-bar.is-expanded.is-editing-selection .collection-bar__footer .collection-bar__count{
		width: 100%;
	}

	.collection-bar.is-expanded.is-editing-selection .collection-bar__actions{
		align-self: flex-end;
		gap: var(--mih-spacing-4);
		justify-content: flex-end;
		flex-wrap: wrap;
		width: auto;
	}

	.collection-bar.is-expanded.is-editing-selection .collection-bar__footer .btn{
		padding: .75rem 1.15rem;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.collection-bar.is-expanded.is-editing-selection .collection-bar__actions{
		align-self: stretch;
		width: 100%;
	}

	.collection-bar.is-expanded.is-editing-selection .collection-bar__footer .btn{
		flex: 1 1 140px;
	}
}

.collection-bar.is-expanded.has-selected-resources > .collection-bar__footer{
	justify-content: space-between;
}

.collection-bar.is-expanded.has-selected-resources .collection-bar__footer .btn{
	align-items: center;
	display: inline-flex;
	gap: .5rem;
	padding: .7rem 1.25rem;
}

.collection-bar.is-expanded.has-selected-resources #collectionCreateBtn img{
	display: block;
	height: 12px;
	width: 12px;
}

/* Collection selector: keep all state visuals within the one indicator control. */
.card-select-indicator::before,
.card-select-indicator::after{
	content: none !important;
}

.card-select-indicator__label,
.card-select-indicator__button,
.card-select-indicator__symbol{
	box-sizing: border-box;
	inset: auto;
	margin: 0;
	position: static;
	transform: none;
}

.card-select-indicator{
	overflow: visible;
	transition: background-color .15s ease, border-color .15s ease;
}

@media (hover: hover) {
	.card--selectable:hover .card-select-indicator,
	.card-select-indicator:focus-visible,
	.card--selectable.is-selected .card-select-indicator{
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		gap: .25rem;
		min-width: 0;
		padding: 0;
		width: max-content;
	}

	.card--selectable:hover .card-select-indicator__label,
	.card-select-indicator:focus-visible .card-select-indicator__label,
	.card--selectable.is-selected .card-select-indicator__label{
		flex: 0 0 auto;
		padding: 2px 2px 2px 10px;
	}

	.card--selectable:hover .card-select-indicator__button,
	.card-select-indicator:focus-visible .card-select-indicator__button,
	.card--selectable.is-selected .card-select-indicator__button{
		aspect-ratio: 1;
		background: var(--mih-white);
		border: 0;
		border-radius: 50%;
		flex: 0 0 28px;
		height: 28px;
		margin-right: -6px;
		position: relative;
		width: 28px;
		z-index: 1;
	}
}

/* Add-resources flow: this is the final selector state layer. */
.card--selection-mode:not(.is-selected) .card-select-indicator{
	align-items: center !important;
	background: var(--mih-brand-gray-800) !important;
	border: 0 !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	gap: .25rem !important;
	overflow: visible !important;
	padding: 0 !important;
	width: max-content !important;
	animation: card-selector-reveal .24s ease-out both;
	animation-delay: var(--collection-selector-delay, 0ms);
}

.card--selection-mode:not(.is-selected) .card-select-indicator:hover{
	background: var(--mih-brand-red) !important;
}

.card--selection-mode:not(.is-selected) .card-select-indicator__label{
	color: var(--mih-white) !important;
	display: block !important;
	font-size: .875rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	padding: 2px 2px 2px 10px !important;
	white-space: nowrap !important;
}

.card--selection-mode:not(.is-selected) .card-select-indicator__button,
.card--selection-mode.is-selected .card-select-indicator__button{
	align-items: center !important;
	aspect-ratio: 1 !important;
	background: var(--mih-white) !important;
	border: 0 !important;
	border-radius: 50% !important;
	display: grid !important;
	flex: 0 0 28px !important;
	height: 28px !important;
	margin-right: -6px !important;
	place-items: center !important;
	position: relative !important;
	width: 28px !important;
	z-index: 1 !important;
}

.card--selection-mode:not(.is-selected) .card-select-indicator__symbol{
	align-items: center !important;
	background: var(--mih-white) !important;
	border: 1.5px solid var(--mih-brand-red) !important;
	border-radius: 50% !important;
	color: var(--mih-brand-red) !important;
	display: grid !important;
	font-size: 1.125rem !important;
	height: 24px !important;
	line-height: 1 !important;
	place-items: center !important;
	width: 24px !important;
}

.card--selection-mode.is-selected .card-select-indicator{
	align-items: center !important;
	background: var(--mih-brand-gray-900) !important;
	border: 0 !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	gap: .25rem !important;
	overflow: visible !important;
	padding: 0 !important;
	width: max-content !important;
}

.card--selection-mode.is-selected .card-select-indicator__label{
	color: var(--mih-white) !important;
	display: block !important;
	font-size: .875rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	padding: 2px 2px 2px 10px !important;
	white-space: nowrap !important;
}

.card--selection-mode.is-selected .card-select-indicator__symbol{
	align-items: center !important;
	background: var(--mih-brand-red) !important;
	border: 1.5px solid var(--mih-brand-red) !important;
	border-radius: 50% !important;
	color: var(--mih-white) !important;
	display: grid !important;
	font-size: .875rem !important;
	font-weight: 700 !important;
	height: 24px !important;
	line-height: 1 !important;
	place-items: center !important;
	width: 24px !important;
}

.collection-bar{
	position: fixed;
	left: calc(100% - 24px);
	transform: translateX(-100%);
	right: auto;
	bottom: 24px;
	width: auto;
	background: var(--mih-white);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
	border: 1px solid var(--mih-brand-gray-200);
	border-radius: 999px;
	z-index: 1040;
	padding: 16px;
	display: flex;
	justify-content: flex-end;
	overflow: hidden;
	transition: left .46s cubic-bezier(.22, .61, .36, 1), width .46s cubic-bezier(.22, .61, .36, 1), padding .46s cubic-bezier(.22, .61, .36, 1), border-radius .46s cubic-bezier(.22, .61, .36, 1), transform .46s cubic-bezier(.22, .61, .36, 1);
}

.collection-bar__build-btn{
	align-items: center;
	background: var(--mih-brand-red);
	border: 0;
	border-radius: 999px;
	color: var(--mih-white);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 1rem;
	gap: 7px;
	justify-content: center;
	line-height: 1.25rem;
	min-height: 56px;
	padding: 16px 24px;
	transition: opacity .2s ease-out, visibility 0s linear .2s;
}

/* body:not(.resources-page) .collection-bar:not(.has-selected-resources){
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
} */

body:not(.resources-page) .collection-bar,
body:not(.resources-page) .collection-bar-backdrop{
	display: none;
}

body:not(.resources-page) .collection-bar.is-expanded{
	display: flex;
    flex-direction: column;
	align-items: stretch;
}

body:not(.resources-page) .collection-bar .collection-bar__minimize{
	display: none;
}

.collection-bar__build-btn:hover,
.collection-bar__build-btn:focus-visible{
	background: var(--mih-brand-red-700);
}

.collection-bar__build-btn:focus-visible{
	outline: 2px solid var(--mih-brand-red-700);
	outline-offset: 3px;
}

.collection-bar__build-btn img{
	display: block;
	flex: 0 0 12px;
	height: 12px;
	width: 12px;
}

.collection-bar__header,
.collection-bar__expand,
.collection-bar__footer,
.collection-bar-backdrop{
	display: none;
}

.collection-bar-backdrop{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(25svh, 100px);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 100%);
	z-index: 1035;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
	will-change: opacity;
	pointer-events: none;
}

.collection-bar-backdrop.is-visible{
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.collection-bar__header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mih-spacing-7);
}

.collection-bar__title{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-4);
}

.collection-bar__header-actions{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-3);
}

.collection-bar__title h4{
	margin: 0;
}

.collection-bar__title-input{
	border: 1px solid var(--mih-brand-gray-300);
	border-radius: 999px;
	padding: .35rem .85rem;
	font-size: 1rem;
	line-height: 1.2;
	min-width: 220px;
	max-width: 500px;
    width: 100%;
}

.collection-bar__actions{
	display: flex;
	gap: var(--mih-spacing-4);
	align-items: center;
}

.collection-bar__count{
	color: var(--mih-brand-gray-800);
}

.collection-bar__expand{
	display: grid;
	/* gap: var(--mih-spacing-6); */
	max-height: 0;
	opacity: 0;
	transform: translateY(8px);
	overflow: hidden visible;
	margin: 0 -5px;
    padding: var(--mih-spacing-7) 5px 0 5px;
    width: calc(100% + 10px);
	visibility: hidden;
	pointer-events: none;
	transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.collection-bar.is-expanded .collection-bar__expand{
	max-height: 420px;
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.collection-preview-grid{
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mih-spacing-6);
	overflow: scroll;
    max-height: 250px;
	padding: var(--mih-spacing-7) 5px var(--mih-spacing-7) 5px;
    margin: 0 -5px 0 -5px;

	--fade-t: var(--mih-spacing-7, 8px);
    --fade-b: var(--mih-spacing-7, 8px);

	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-mode: match-source;
}

.collection-preview-card{
	border: 1px solid var(--mih-brand-gray-200);
	background: var(--mih-white);
	padding: var(--mih-spacing-6);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--mih-spacing-6);
	align-items: start;
	cursor: pointer;
}

.collection-preview-card:hover{
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
	transform: scale(calc(1.005));
    transition: var(--mih-anim-normal);
}


.collection-preview-card .badge--primary-text{
	padding-top: 0;
}

.collection-preview-card h6{
	margin: var(--mih-spacing-1) 0 var(--mih-spacing-4) 0;
}

.collection-remove{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--mih-brand-gray-300);
	background: var(--mih-white);
	display: grid;
	place-items: center;
	color: var(--mih-brand-gray-800);
}

.collection-bar__footer{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mih-spacing-6);
	border-top: 1px solid var(--mih-brand-gray-200);
	padding-top: var(--mih-spacing-6);
}

.collection-bar__footer .btn{
	padding: .6rem 1.25rem;
}

.collection-modal{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1060;
	padding: var(--mih-spacing-11);
}

.collection-modal.is-open{
	display: flex;
}

.collection-modal.is-behind{
	z-index: 1045;
}

.collection-modal__panel{
	background: var(--mih-white);
	box-shadow: var(--mih-shadow-md);
	width: min(900px, 100%);
	padding: var(--mih-spacing-11);
	position: relative;
	max-height: 90vh;
    overflow-y: scroll;
}

.collection-modal__close{
	position: absolute;
	top: var(--mih-spacing-11);
	right: var(--mih-spacing-11);
}

.collection-modal__list{
	display: grid;
	gap: var(--mih-spacing-6);
	margin: var(--mih-spacing-7) 0;
}

.collection-modal__item{
	border: 1px solid var(--mih-brand-gray-200);
	padding: var(--mih-spacing-6);
	cursor: pointer;
}

.collection-modal__item .card__title{
	margin-top: var(--mih-spacing-1);
}

.collection-modal__share{
	display: grid;
	gap: var(--mih-spacing-4);
}

.collection-modal__share-row{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--mih-spacing-4);
	align-items: center;
}

.collection-modal__share input{
	padding: .8rem 1rem;
	border: 1px solid var(--mih-brand-gray-300);
	width: 100%;
}

.collection-modal__share .btn{
	padding: .8rem 1.5rem;
}

/* Resource bundle modals (Figma nodes 3555:16483-16498, mobile 3585:125014):
   real Bootstrap `.modal.fade` instances now, like every other resource
   modal on this page (#resourceModal, #withMeModal, etc.) -- same
   .modal/.modal-dialog/.modal-content/.modal-body/.btn-close skeleton and
   data-bs-toggle/data-bs-dismiss triggers, so they pick up Bootstrap's own
   backdrop-fade + dialog-transform transition instead of the old hand-rolled
   .collection-modal is-open/is-behind class toggle, which had no transition
   at all. The .collection-modal__list/__item/__share* classes are still
   reused for the item grid and share row (those were always plain,
   bootstrap-agnostic list styling) -- only the outer wrapper changed. */
.modal--bundle .modal-content{
	background: var(--mih-bg-grey);
	border: 1px solid var(--mih-brand-gray-300);
	border-radius: 0;
	box-shadow: 0px 16px 20px rgba(49, 44, 42, 0.5);
	width: 90vw;
	max-width: 964px;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--mih-spacing-11);
}

.bundle-modal__intro{
	display: flex;
	flex-wrap: wrap;
	gap: var(--mih-spacing-9);
	margin-bottom: var(--mih-spacing-9);
	padding-right: var(--mih-spacing-19);
}

.bundle-modal__intro-title{
	display: flex;
	flex: 1 1 300px;
	flex-direction: column;
	gap: var(--mih-spacing-4);
}

.bundle-modal__intro-title h2{
	margin: 0;
}

.bundle-modal__intro > p{
	flex: 1 1 300px;
	margin: 0;
	color: var(--text-primary);
}

.bundle-modal .collection-modal__list{
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 560px) {
	.bundle-modal .collection-modal__list{
		grid-template-columns: 1fr;
	}

	.bundle-modal .collection-modal__share-row{
		grid-template-columns: 1fr;
	}
}

/* Item cards match the site's existing .card--resource + .asset-img
   pattern (corner thumbnail, absolutely-positioned tumor-type badge) rather
   than a new one-off layout, per Figma. */
.collection-modal__item--bundle{
	/* The sitewide [type="button"] reset sets align-items/justify-content
	   to center -- since this is a <button>, those still win over the
	   flex-direction below unless re-asserted here, which is what was
	   centering the badge/title instead of the left alignment below. */
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--mih-spacing-4);
	width: 100%;
	min-height: 172px;
	padding: var(--mih-spacing-7) var(--mih-spacing-7) 90px;
	overflow: hidden;
	background: var(--mih-white);
	border: 1px solid var(--mih-brand-gray-200);
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	text-align: left;
}

.collection-modal__item--bundle p,
.collection-modal__item--bundle h5{
	position: relative;
	z-index: 2;
}

/* .modal-body .card__title:hover{color:var(--mih-black)} (for the other
   resource modals' own titles) otherwise wins on specificity here since
   these items also live inside a .modal-body -- re-assert red to match
   the sitewide .card__title:hover default. */
.collection-modal__item--bundle .card__title:hover{
	color: var(--mih-brand-red);
}

.collection-modal__item--bundle .badge--primary{
	position: absolute;
	left: var(--mih-spacing-7);
	bottom: var(--mih-spacing-7);
}

/* Thumbnail sizing per asset type, taken directly from the reusable Card
   component (Figma node 3461:13897) rather than the sitewide .asset-img--*
   rules -- those are sized for the much larger standalone resource cards
   elsewhere on the page and were oversized here. Widths/heights and the
   rotation on the pdf variant are the component's own numbers; only the
   "bottom" offset on the pdf variant is approximate, since Figma's exact
   value there shifts slightly with each card's actual text height. */
.collection-modal__item--bundle .asset-img{
	width: auto;
	max-width: none;
}

.collection-modal__item--bundle .asset-img--website{
	right: 16px;
	bottom: 0;
	width: 148px;
	height: 90px;
	object-fit: cover;
	filter: drop-shadow(0px 2px 8px rgba(49, 44, 42, 0.14));
}

/* Matches the live site's .card--resource:hover .asset-img--website
   (grow-on-hover, no other change) exactly. */
.collection-modal__item--bundle:hover .asset-img--website{
	transform: scale(1.05);
	transform-origin: center;
}

.collection-modal__item--bundle .asset-img--logo{
	right: 16px;
	bottom: 19px;
	width: 148px;
	height: 53px;
	object-fit: cover;
	filter: drop-shadow(0px 2px 8px rgba(49, 44, 42, 0.14));
}

/* Video variant matches the live site's resource-card video pattern
   (asset id 1178, "Empowering Healing..."): a 16:9 thumbnail with a play
   button, image growing on hover and the play icon switching to red --
   same .icon--play-btn markup and fill-clr-1/fill-clr-2 hook points as the
   live .card--resource:has(.asset-img--video) pattern. The button's
   position (left:10px, top:8px, not centered) was measured directly off
   the live card's rendered box, then re-sized for this modal's much
   smaller item card instead of the full-size one. Only the image grows on
   hover, per feedback -- the button stays put and only its icon recolors. */
.collection-modal__item--bundle .asset-video-wrap{
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 148px;
	aspect-ratio: 16 / 9;
	z-index: 1;
	transition: var(--mih-anim-normal);
}

.collection-modal__item--bundle:hover .asset-video-wrap{
	transform: scale(1.05);
	transform-origin: center;
}

.collection-modal__item--bundle .asset-img--video{
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: drop-shadow(0px 2px 8px rgba(49, 44, 42, 0.14));
}

.collection-modal__item--bundle .asset-video-wrap .icon--play-btn{
	position: absolute;
	top: 8px;
	left: 10px;
	width: 20px;
	height: 20px;
	filter: drop-shadow(0px 0px 5px rgba(49, 44, 42, .125));
}

.collection-modal__item--bundle:hover .icon--play-btn .fill-clr-2{
	fill: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

/* The extra .collection-modal__list ancestor bumps this to a higher
   specificity than .modal-content:hover .asset-img--pdf (the single-item
   resource-modal's PDF hover rule, ~line 1187). Without it, that rule
   -- built for a much larger modal (293px tall vs. this item's 111px) --
   would win the instant the pointer entered the bundle modal at all,
   ballooning every stacked PDF thumbnail at once instead of just the
   one item actually being hovered. */
.collection-modal__list .collection-modal__item--bundle .asset-img--pdf{
	right: 17px;
	bottom: -37px;
	width: 133px;
	height: 111px;
	object-fit: contain;
	transform: rotate(-8.18deg);
	filter: drop-shadow(0px 4px 10px rgba(49, 44, 42, 0.25));
}

/* Matches the live site's .card--resource:hover .asset-img--pdf (slight
   grow + de-rotate), scoped per item so only the hovered thumbnail
   animates. */
.collection-modal__list .collection-modal__item--bundle:hover .asset-img--pdf{
	transform: rotate(-7.18deg) scale(1.05);
	bottom: -34px;
}

/* "Back to Bundle" button (Figma node 3555:16457/3555:16482): shown above
   a resource modal's own .modal-content, only on the per-item modals a
   .collection-modal__item--bundle opens. Markup is `btn btn--primary-rev
   back-to-bundle-btn` -- .btn--primary-rev already renders the solid
   white pill with red text/icon this needs (see --btn-primary-rev and
   --btn-primary-rev-contrastText in mih-variables.css), so no color
   overrides are needed here at all. */
.back-to-bundle-btn .icon--arrow-left{
	transform: rotate(180deg);
}

/* Bootstrap's own .modal-dialog{pointer-events:none} (so clicking the
   gutter around .modal-content falls through to the backdrop and closes
   the modal) otherwise makes this row -- a sibling of .modal-content, not
   a descendant -- completely unclickable by real pointer input even
   though it's visually right there. */
.back-to-bundle-row{
	pointer-events: auto;
	width: 90vw;
	max-width: 650px;
	margin-bottom: var(--mih-spacing-7);
}

.collection-name{
	margin-right: 4rem;
}

.collection-name__display,
.collection-name__edit{
	display: grid;
    
    gap: var(--mih-spacing-6);
    align-items: center;
}

.collection-name__display{grid-template-columns: max-content max-content;}
.collection-name__edit{grid-template-columns: 1fr max-content;}

#collectionModalTitle{
	margin: 0;
}

.collection-name input{
	padding: .8rem 1rem;
	border: 1px solid var(--mih-brand-gray-300);
	width: 100%;
}

@media (max-width: 820px) {
	.collection-preview-grid{
		grid-template-columns: 1fr;
	}

	.collection-bar__footer{
		flex-direction: column;
		align-items: stretch;
	}

	.collection-bar__actions{
		justify-content: flex-end;
	}
}

/* Persistent collection action on the resources page. */
.collection-bar > :not(.collection-bar__build-btn){
	display: none;
}

.collection-bar > .collection-bar__header,
.collection-bar > .collection-bar__footer{
	display: flex;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	visibility: hidden;
	transition: opacity .22s ease-out, visibility 0s linear .22s;
}

.collection-bar > .collection-bar__expand{
	display: none;
}

.collection-bar.is-expanded{
	left: 50%;
	transform: translateX(-50%);
	width: min(1100px, calc(100% - 48px));
	border-radius: 32px;
	padding: 0;
	display: block;
}

.collection-bar.is-expanded .collection-bar__build-btn{
	display: inline-flex;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	visibility: hidden;
}

.collection-bar.is-expanded > .collection-bar__header{
	align-items: center;
	display: flex;
	gap: var(--mih-spacing-7);
	justify-content: space-between;
	padding: 28px 40px;
	opacity: 1;
	pointer-events: auto;
	position: static;
	visibility: visible;
	transition-delay: .18s;
}

.collection-bar.is-expanded > .collection-bar__footer{
	align-items: center;
	display: flex;
	justify-content: flex-end;
	padding: 24px 24px;
	opacity: 1;
	pointer-events: auto;
	position: static;
	visibility: visible;
	transition-delay: .18s;
}

.collection-bar.is-expanded .collection-bar__footer{
	border-top: 1px solid var(--mih-brand-gray-200);
}

.collection-bar.is-expanded .collection-bar__count,
.collection-bar.is-expanded .collection-bar__expand{
	display: none;
}

.collection-bar.is-expanded .collection-bar__actions{
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.collection-bar.is-expanded .collection-bar__footer .btn{
	padding: .8rem 1.5rem;
}

/* body:not(.resources-page) .collection-bar,
body:not(.resources-page) .collection-bar-backdrop{
	display: none;
} */

@media (max-width: 640px) {
	.collection-bar{
		bottom: 16px;
		left: calc(100% - 16px);
		right: auto;
		padding: 12px;
	}

	.collection-bar__build-btn{
		min-height: 48px;
		padding: 12px 18px;
	}

	.collection-bar.is-expanded{
		width: calc(100% - 32px);
	}

	.collection-bar.is-expanded > .collection-bar__header{
		padding: 20px 24px;
	}

	.collection-bar.is-expanded > .collection-bar__footer{
		padding: 16px;
	}
}

/* Keep both collection states in one layout so the bar can morph smoothly. */
.collection-bar,
.collection-bar.is-expanded{
	align-items: stretch;
	display: flex;
	flex-direction: column;
}

/* Content reveal, staggered separately from the header/footer's own
   max-height/width "grow" transition below -- header leads on expand
   (giving the still-widening box a moment to establish itself before text
   drops in), footer follows; collapse runs that same pair in reverse
   (footer packs away first, header second) so it reads as one continuous
   motion undoing itself rather than a mirrored duplicate. */
@keyframes collectionBarContentIn{
	from{ opacity: 0; transform: translateY(10px); }
	to{ opacity: 1; transform: translateY(0); }
}

@keyframes collectionBarContentOut{
	from{ opacity: 1; transform: translateY(0); }
	to{ opacity: 0; transform: translateY(10px); }
}

.collection-bar__build-btn{
	align-self: flex-end;
	max-height: 56px;
	overflow: hidden;
	opacity: 1;
	position: static;
	pointer-events: auto;
	visibility: visible;
	transition: max-height .3s ease-out, padding .3s ease-out, opacity .18s ease-out, visibility 0s linear 0s;
}

.collection-bar > .collection-bar__header,
.collection-bar > .collection-bar__footer{
	display: flex;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: static;
	transform: translateY(10px);
	visibility: hidden;
	width: 0;
	/* opacity/transform are handled by the collectionBarContentIn/Out
	   keyframes (staggered per element below) instead of living in this
	   transition list, so the two effects don't fight over the same
	   properties. */
	transition: max-height .38s ease-out, width .38s ease-out, padding .38s ease-out, visibility 0s linear .38s;
}

.collection-bar > .collection-bar__footer{
	border-top-color: transparent;
}

.collection-bar.is-expanded .collection-bar__build-btn{
	display: none;
	max-height: 0;
	opacity: 0;
	padding-bottom: 0;
	padding-top: 0;
	pointer-events: none;
	position: static;
	visibility: visible;
}

.collection-bar.is-collapsing .collection-bar__build-btn{
	display: inline-flex;
	opacity: 0;
	pointer-events: none;
	visibility: visible;
}

.collection-bar.is-expanded > .collection-bar__header{
	max-height: 96px;
	padding: 16px 24px;
	pointer-events: auto;
	transition-delay: 0s;
	visibility: visible;
	width: 100%;
	animation: collectionBarContentIn .3s cubic-bezier(.22, .61, .36, 1) .16s both;
}

.collection-bar.is-expanded > .collection-bar__footer{
	border-top-color: var(--mih-brand-gray-200);
	max-height: 88px;
	padding: 16px 24px;
	pointer-events: auto;
	transition-delay: 0s;
	visibility: visible;
	width: 100%;
	animation: collectionBarContentIn .3s cubic-bezier(.22, .61, .36, 1) .28s both;
}

/* Collapse reverses the reveal order: footer (last to appear) is first to
   fade back out, header follows -- the box itself keeps shrinking via the
   max-height/width transition on the base rule above, unchanged by this. */
.collection-bar.is-collapsing > .collection-bar__header{
	animation: collectionBarContentOut .22s ease-in .12s both;
}

.collection-bar.is-collapsing > .collection-bar__footer{
	animation: collectionBarContentOut .22s ease-in both;
}

/* Expanded collection actions: keep the empty and selected states explicit.
   This lives after the morph rules so their width/visibility values cannot
   override the intended footer layout. */
.collection-bar.is-expanded > .collection-bar__footer{
	justify-content: space-between;
}

.collection-bar.is-expanded:not(.has-selected-resources) .collection-bar__actions{
	justify-content: space-between;
	width: 100%;
}

.collection-bar.is-expanded.is-adding-resources.has-selected-resources .collection-bar__count{
	display: block;
}

.collection-bar.is-expanded.has-selected-resources .collection-bar__actions{
	justify-content: flex-end;
	width: auto;
}

@media (max-width: 640px) {
	.collection-bar > .collection-bar__header{
		padding-left: 0;
		padding-right: 0;
	}

	.collection-bar.is-expanded > .collection-bar__header{
		padding: 16px 20px;
	}

	.collection-bar.is-expanded > .collection-bar__footer{
		padding: 14px 16px;
	}
}

/* This follows the expanded-state reset above, which hides counts by default.
   A count is only visible once the collection contains a resource. */
.collection-bar.is-expanded.has-selected-resources .collection-bar__footer .collection-bar__count{
	display: block;
}

/* Add Resources explicitly reveals each selector; this does not rely on hover. */
body.is-adding-resources .resources__grid .card--selectable .card-select-indicator{
	display: inline-flex !important;
}

/* Direct indicator state set by the Add Resources control. */
.card-select-indicator.is-visible{
	align-items: center !important;
	background: var(--mih-brand-gray-800) !important;
	border: 0 !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	gap: .25rem !important;
	overflow: visible !important;
	padding: 0 !important;
	width: max-content !important;
}

.card-select-indicator.is-visible .card-select-indicator__label{
	color: var(--mih-white) !important;
	display: block !important;
	padding: 2px 2px 2px 10px !important;
	white-space: nowrap;
}

.card-select-indicator.is-visible .card-select-indicator__button{
	align-items: center !important;
	aspect-ratio: 1 !important;
	background: var(--mih-white) !important;
	border: 0 !important;
	border-radius: 50% !important;
	display: grid !important;
	flex: 0 0 28px !important;
	height: 28px !important;
	margin-right: -6px !important;
	place-items: center !important;
	width: 28px !important;
}

.card-select-indicator.is-visible .card-select-indicator__symbol{
	align-items: center !important;
	background: var(--mih-white) !important;
	border: 1.5px solid var(--mih-brand-red) !important;
	border-radius: 50% !important;
	color: var(--mih-brand-red) !important;
	display: grid !important;
	height: 24px !important;
	place-items: center !important;
	width: 24px !important;
}

.card--selectable.is-selected .card-select-indicator.is-visible{
	background: var(--mih-brand-gray-900) !important;
}

.card--selectable.is-selected .card-select-indicator.is-visible .card-select-indicator__symbol{
	background: var(--mih-brand-red) !important;
	color: var(--mih-white) !important;
}

/* Shared collection-selector geometry across hover, focus, selection mode,
   and the Added state. */
.card--selectable:hover .card-select-indicator,
.card-select-indicator:focus-visible,
.card-select-indicator.is-visible{
	align-items: center !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	gap: .25rem !important;
	padding: 0 !important;
	width: max-content !important;
}

.card--selectable:hover .card-select-indicator__label,
.card-select-indicator:focus-visible .card-select-indicator__label,
.card-select-indicator.is-visible .card-select-indicator__label{
	color: var(--mih-white) !important;
	display: block !important;
	font-size: .875rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	padding: 2px 2px 2px 10px !important;
	white-space: nowrap;
}

.card--selectable:hover .card-select-indicator__button,
.card-select-indicator:focus-visible .card-select-indicator__button,
.card-select-indicator.is-visible .card-select-indicator__button{
	align-items: center !important;
	aspect-ratio: 1 !important;
	background: var(--mih-white) !important;
	border: 0 !important;
	border-radius: 50% !important;
	display: grid !important;
	flex: 0 0 28px !important;
	height: 28px !important;
	margin-right: -6px !important;
	place-items: center !important;
	width: 28px !important;
}

.card--selectable:hover .card-select-indicator__symbol,
.card-select-indicator:focus-visible .card-select-indicator__symbol,
.card-select-indicator.is-visible .card-select-indicator__symbol{
	align-items: center !important;
	background: var(--mih-white) !important;
	border: 1.5px solid var(--mih-brand-red) !important;
	border-radius: 50% !important;
	color: var(--mih-brand-red) !important;
	display: grid !important;
	height: 24px !important;
	place-items: center !important;
	width: 24px !important;
}

.card-select-indicator.is-visible:hover{
	background: var(--mih-brand-red) !important;
}



/* About MIH Page Styles --------- */

.about-mih--subpage {
	background-color: var(--mih-bg-grey);
	position: relative;
	z-index: 1;
}

.about-mih__grid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: var(--mih-spacing-24);
}

.about-mih__col {
	width: 100%;
}

.about-mih__col-l {
	/* max-width: 694px; */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mih-spacing-9);
}

.about-mih__col-r {
	max-width: 350px;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mih-spacing-9);
}

.about-mih__grid .header-row {
    margin-bottom: 0;
}

.card--about {
	align-items: flex-start;
	padding: var(--mih-spacing-11) var(--mih-spacing-11) var(--mih-spacing-11) var(--mih-spacing-11);
	text-align: left;
	background: linear-gradient(0deg, #f9f8f7 0%, #f9f8f7 100%), linear-gradient(90deg, #FFF 50%, rgba(255, 255, 255, 0.35) 100%);
	background-blend-mode: color, normal;
}

.card__badge-row {
	display: flex;
	gap: .5rem;
	margin-right: 196px;
	flex-wrap: wrap;
}

.badge--secondary-text{
	color: var(--mih-brand-gray-700);
	font-weight: var(--mih-fw-regular);
}

/* News Item Card (horizontal) --- */
.card--news{
	flex-direction: row;
	align-items: stretch;
	width: 100%;
}

.card--news .card__news-meta{
	display: flex;
	flex-direction: column;
	gap: var(--mih-spacing-1);
	justify-content: flex-start;
	flex: 0 0 225px;
	max-width: 225px;
	padding: var(--mih-spacing-11);
	background-color: var(--mih-brand-gray-300);
}

.card--news .card__news-meta .badge{
	text-align: left;
	padding-inline: 0;
}

.card--news .card__news-body{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mih-spacing-11);
	flex: 1 1 0%;
	padding: var(--mih-spacing-11);
}

.card--news .card__title{
	margin-top: 0;
	max-width: 60ch;
}

.card--news .card__news-cta{
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.card--news{
		flex-direction: column;
	}

	.card--news .card__news-meta{
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		gap: var(--mih-spacing-7);
		max-width: 100%;
		width: 100%;
		padding: var(--mih-spacing-5) var(--mih-spacing-9);
	}

	.card--news .card__news-body{
		flex-wrap: wrap;
		row-gap: var(--mih-spacing-7);
		width: 100%;
		align-items: flex-start;
	}
}

@media (max-width: 992px) {
	.about-mih__grid {
		grid-template-columns: 1fr;
		grid-gap: var(--mih-spacing-11);
	}

	.about-mih__col-l {
		/* max-width: 694px; */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mih-spacing-7);
	}
}
/* About Page styling : END */



/* ------------------------- * /
   ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⠁⠸⢳⡄⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠃⠀⠀⢸⠸⠀⡠⣄⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⠃⠀⠀⢠⣞⣀⡿⠀⠀⣧⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣠⡖⠁⠀⠀⠀⢸⠈⢈⡇⠀⢀⡏⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠩⢠⡴⠀⠀⠀⠀⠀⠈⡶⠉⠀⠀⡸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⠎⢠⣇⠏⠀⠀⠀⠀⠀⠀⠀⠁⠀⢀⠄⡇⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢠⠏⠀⢸⣿⣴⠀⠀⠀⠀⠀⠀⣆⣀⢾⢟⠴⡇⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⣿⠀⠠⣄⠸⢹⣦⠀⠀⡄⠀⠀⢋⡟⠀⠀⠁⣇⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⡾⠁⢠⠀⣿⠃⠘⢹⣦⢠⣼⠀⠀⠉⠀⠀⠀⠀⢸⡀⠀⠀⠀⠀
⠀⠀⢀⣴⠫⠤⣶⣿⢀⡏⠀⠀⠘⢸⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⢳⠀⠀⠀⠀
⠐⠿⢿⣿⣤⣴⣿⣣⢾⡄⠀⠀⠀⠀⠳⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢣⠀⠀⠀
⠀⠀⠀⣨⣟⡍⠉⠚⠹⣇⡄⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⢀⡀⣾⡇⠀⠀
⠀⠀⢠⠟⣹⣧⠃⠀⠀⢿⢻⡀⢄⠀⠀⠀⠀⠐⣦⡀⣸⣆⠀⣾⣧⣯⢻⠀⠀
⠀⠀⠘⣰⣿⣿⡄⡆⠀⠀⠀⠳⣼⢦⡘⣄⠀⠀⡟⡷⠃⠘⢶⣿⡎⠻⣆⠀⠀
⠀⠀⠀⡟⡿⢿⡿⠀⠀⠀⠀⠀⠙⠀⠻⢯⢷⣼⠁⠁⠀⠀⠀⠙⢿⡄⡈⢆⠀
⠀⠀⠀⠀⡇⣿⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠦⠀⠀⠀⠀⠀⠀⡇⢹⢿⡀
⠀⠀⠀⠀⠁⠛⠓⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⡟

/ *--------------------------- */