/* miller-staff 1.0.4 — team cards 3-across (1/3 content width); photo well shares one CSS background behind transparent PNGs */
.mst-grid, .mst-dialog {
	--mst-navy: var(--ms-navy, #0B1F33);
	--mst-orange: var(--ms-orange, #F5A623);
	--mst-primary: var(--ms-primary, #1B4F72);
	--mst-text: var(--ms-text, #1A1A1A);
	--mst-gray: var(--ms-gray, #4B5563);
	--mst-border: var(--ms-border, #D1D5DB);
}
html body .mst-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	justify-items: stretch;
}
html body .mst-grid > .mst-card {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
html body .mst-grid--unified > .mst-dept-label {
	grid-column: 1 / -1;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
html body .mst-grid--unified > .mst-dept-label:first-child { margin-top: 0; }
html body .mst-dept-heading {
	margin: 0;
	padding: 4px 0 2px;
	font-size: 22px;
	line-height: 1.3;
	color: var(--mst-navy);
	scroll-margin-top: 90px;
}
/* Equal-height cards: flex column, photo fixed aspect, body fills, button pinned */
html body .mst-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
	background: #fff;
	border: 1px solid var(--mst-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(11,31,51,.06), 0 8px 24px rgba(11,31,51,.08);
	margin: 0;
}
html body .mst-photo {
	aspect-ratio: 370 / 246; /* 3:2 landscape, matches standardized staff PNGs */
	width: 100%;
	flex: 0 0 auto;
	background: #F1F3F5; /* shared backdrop for transparent staff PNGs; not baked into the image */
	display: block;
	position: relative;
	overflow: hidden;
	/* content-box so a global border-box reset cannot steal the 4px orange bar
	   from the 370:246 image well (otherwise the PNG letterboxes slightly). */
	box-sizing: content-box;
	border-bottom: 4px solid var(--mst-orange);
}
html body .mst-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* natural 370:246 aspect; never stretch */
	object-position: 50% 50%;
	display: block;
}
html body .mst-initials {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem; font-weight: 700; color: var(--mst-navy); background: #E8EEF3;
}
html body .mst-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 14px 16px;
	/* Fixed body floor so orphan cards (alone in a grid row) match pair/trio heights;
	   margin-top:auto on the button still pins it when the grid stretches the card. */
	min-height: calc(14px + 16px + (1.25em * 2) + 6px + (1.4em * 3) + 10px + (1.35em * 1) + 12px + 44px);
}
/* Fixed line slots so name/title/phone sit at the same Y on every card. Full text stays in the DOM for screen readers. */
html body .mst-card .mst-name {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	color: var(--mst-navy);
	height: calc(1.25em * 2); /* fixed 2-line slot; full text remains in the DOM for screen readers */
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
html body .mst-card .mst-title {
	margin: 6px 0 0;
	color: var(--mst-gray);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	height: calc(1.4em * 3); /* fixed 3-line slot for longer titles */
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
html body .mst-card .mst-bio {
	margin: 6px 0 0;
	color: var(--mst-text);
	font-size: 15px;
	line-height: 1.55;
	display: none; /* bios reserved for a later revision so card height stays uniform */
}
html body .mst-card .mst-phone {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.35;
	height: calc(1.35em * 1); /* one-line slot: icon + number (no Sales/Service label) */
	overflow: hidden;
}
html body .mst-card .mst-phone a {
	color: var(--mst-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	max-width: 100%;
}
html body .mst-card .mst-phone .mst-phone-icon {
	flex: 0 0 auto;
	display: block;
}
html body .mst-card .mst-phone .mst-phone-num {
	min-width: 0;
}
html body .mst-card .mst-contact-btn {
	margin-top: auto;
	align-self: stretch;
	text-align: center;
	min-height: 44px;
	height: 44px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding-left: .6em;
	padding-right: .6em;
	font-size: 15px;
}
@media (max-width: 1024px) {
	html body .mst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	html body .mst-grid { grid-template-columns: 1fr; gap: 14px; }
	html body .mst-body { padding: 12px 12px 14px; }
	html body .mst-card .mst-name { font-size: 18px; }
	html body .mst-card .ms-btn { padding: .7em .8em; font-size: 15px; }
}

/* Dialog */
html body .mst-dialog {
	border: 0; border-radius: 16px; padding: 0; max-width: min(520px, calc(100vw - 24px));
	width: 100%; box-shadow: 0 20px 50px rgba(11,31,51,.28); color: var(--mst-text);
}
html body .mst-dialog::backdrop { background: rgba(11,31,51,.55); }
html body .mst-dialog-inner { padding: 22px 22px 18px; position: relative; }
html body .mst-close-form { position: absolute; top: 10px; right: 10px; margin: 0; }
html body .mst-close {
	width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--mst-border);
	background: #fff; color: var(--mst-navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
html body .mst-close:focus-visible, html body .mst-card .mst-contact-btn:focus-visible, html body .mst-form :focus-visible {
	outline: 3px solid var(--mst-orange); outline-offset: 2px;
}
html body .mst-dialog-title { margin: 0 48px 8px 0; font-size: 24px; color: var(--mst-navy); }
html body .mst-note, html body .mst-fine, html body .mst-call { font-size: 14px; color: var(--mst-gray); }
html body .mst-field { margin: 12px 0 0; }
html body .mst-field label { display: block; font-weight: 600; margin-bottom: 4px; }
html body .mst-field input, html body .mst-field textarea {
	width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #6B7280; border-radius: 10px; font: inherit; background: #fff;
}
html body .mst-field textarea { min-height: 120px; resize: vertical; }
html body .mst-fs { border: 0; margin: 12px 0 0; padding: 0; }
html body .mst-fs legend { font-weight: 600; padding: 0; }
html body .mst-opt { font-weight: 400; color: var(--mst-gray); }
html body .mst-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html body .mst-actions { margin-top: 16px; }
html body .mst-req { color: #B42318; }
html body .mst-err { color: #B42318; font-size: 14px; margin: 4px 0 0; }
html body .mst-error-summary {
	background: #FEF3F2; border: 1px solid #FDA29B; border-radius: 10px; padding: 12px 14px; margin: 10px 0 4px;
}
html body .mst-error-summary:focus { outline: 3px solid var(--mst-orange); outline-offset: 2px; }
html body .mst-error-summary-title { margin: 0 0 6px; font-weight: 700; color: #B42318; }
html body .mst-error-summary ul { margin: 0; padding-left: 1.2em; }
html body .mst-success { background: #ECFDF3; border: 1px solid #A6F4C5; border-radius: 10px; padding: 12px 14px; color: #027A48; font-weight: 600; }
html body .mst-call { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--mst-border); }
html body .ms-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
@media (max-width: 520px) {
	html body .mst-row { grid-template-columns: 1fr; }
	html body .mst-dialog-inner { padding: 18px 16px 14px; }
}
/* Non-modal open (no-JS): keep dialog in the page flow */
html body .mst-dialog[open]:not(.mst-modal) {
	position: relative; margin: 24px auto; max-width: min(520px, calc(100% - 24px));
}


/* 1.0.4: beat the Contact page HTML-widget rule
   `html body .ms-contact-page .mst-grid--unified` (display:flex; cards calc(25% - 15px)).
   Department headings span the row. Incomplete rows left-align at 1/3 (or 1/2) width. */
html body .mst-grid--unified,
html body .ms-contact-page .mst-grid.mst-grid--unified {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	justify-content: initial;
	align-items: stretch;
}
html body .mst-grid--unified > .mst-card,
html body .ms-contact-page .mst-grid.mst-grid--unified > .mst-card {
	flex: none;
	width: 100%;
	max-width: none;
	min-width: 0;
}
@media (max-width: 1024px) {
	html body .mst-grid--unified,
	html body .ms-contact-page .mst-grid.mst-grid--unified { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	html body .mst-grid--unified,
	html body .ms-contact-page .mst-grid.mst-grid--unified { grid-template-columns: 1fr; gap: 14px; }
}