/**
 * Our People listing and single team member profile.
 *
 * Kept out of style.css deliberately: that file is shared with the rest of the
 * team, and appending to it makes every change here collide with theirs. Same
 * reasoning footer.css and animations.css are already separate.
 *
 * Loaded by dm-partner.php, after salient-child-style so these rules can
 * build on the brand tokens and the .dm-partner-* card styles in style.css.
 */

/* ==========================================================================
   Our Team listing — the /our-people/ grid built by [team_listing].
   Cards reuse the homepage slider's .dm-partner-* classes (photo, name,
   role, caption, view button) so both stay identical and the hover
   treatment above is shared rather than duplicated. Only the things the
   grid does differently live here: layout, square corners, the filter/sort
   toolbar and the pager.
   ========================================================================== */

/* Measured off the mockup: 64px between the "Meet Our Team" heading and the
   pill row, then only 13px from the pills down to the first card. The
   heading's own .dm-mb-md lands on a WPBakery wrapper and collapses to ~10px,
   so the gap is set here as margin-top instead of fighting for it there. */
.dm-team-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 64px;
	margin-bottom: 13px;
}

.dm-team-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dm-team-filter {
	font-family: var(--dm-font-body);
	font-size: 15px;
	line-height: 1;
	color: var(--dm-admiralty);
	background: transparent;
	border: 1px solid var(--dm-mist);
	border-radius: 999px;
	padding: 13px 22px;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.dm-team-filter:hover {
	border-color: var(--dm-straw);
}

/* Straw fill for the selected pill, matching the "All" state in the design. */
.dm-team-filter.is-active {
	background: var(--dm-straw);
	border-color: var(--dm-straw);
	color: var(--dm-admiralty);
}

.dm-team-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.dm-team-sort label {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-body-text);
	margin: 0;
	/* "Sort By:" breaks across two lines once the pill row takes the space
	   it wants, which the design never does. */
	white-space: nowrap;
}

/* Salient styles bare selects heavily; reset to the design's plain text
   control with its own chevron rather than fighting each inherited rule. */
.dm-team-sort-select {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-admiralty);
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 26px 0 0;
	margin: 0;
	height: auto;
	min-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%231E2438' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px 16px;
}

/* Measured off the desktop mockup: 4 columns of 346px with a 16px gutter
   across the 1432px content band, and a 492px row pitch. */
.dm-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 16px;
}

/* The card is a two-row grid so the view button can be assigned to either
   cell by breakpoint: the caption row on desktop, overlaying the photo on
   mobile. Grid items sharing an area simply stack, which avoids absolute
   positioning against the wrong ancestor. */
.dm-team-card {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-areas:
		"photo"
		"caption";
}

/* Author rules always beat the UA stylesheet's [hidden]{display:none}, so the
   display:grid above kept every filtered-out and off-page card on screen —
   pagination rendered but changed nothing, and the filters appeared inert.
   The JS toggles .hidden, so the opt-out has to be restated here. */
.dm-team-card[hidden] {
	display: none;
}

/* The slider's photo is square and sized by ratio; the grid's is a fixed
   400px-tall band, so the height is stated outright and the width is left to
   the column. aspect-ratio would re-derive the height from the column width
   and drift as the viewport changes. */
.dm-team-card .dm-partner-photo {
	grid-area: photo;
	aspect-ratio: auto;
	height: 400px;
	border-radius: 0;
	margin-bottom: 20px;
}

/* The radius belongs to the image, not the wrapper — the wrapper is only a
   sizing/positioning box and rounding it just clips a square child.
   The height needs the extra .dm-team-grid qualifier: Salient's
   `.row .col img { height: auto }` is (0,2,1) and outranks the theme's own
   `.dm-partner-photo img { height: 100% }` at (0,1,1), which left the image
   at its natural square inside a 400px-tall wrapper. */
.dm-team-grid .dm-team-card .dm-partner-photo img {
	height: 100%;
	border-radius: 10px;
}

.dm-team-card .dm-partner-caption {
	grid-area: caption;
	/* The button is no longer a flex child of the caption, so the caption is
	   just the text block; the button is placed by the grid instead. */
	display: block;
}

.dm-team-card .dm-partner-view-btn {
	grid-area: caption;
	justify-self: end;
	align-self: end;
}

.dm-team-empty {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
	text-align: center;
	padding: 40px 0;
}

.dm-team-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 72px;
}

.dm-team-page {
	font-family: var(--dm-font-body);
	font-size: 15px;
	line-height: 1;
	color: var(--dm-admiralty);
	background: transparent;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
	transition: color 0.25s ease;
}

.dm-team-page:hover {
	color: var(--dm-straw);
}

.dm-team-page.is-active {
	color: var(--dm-straw);
}

.dm-team-page-gap {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-body-text);
	padding: 0 4px;
}

.dm-team-next {
	margin-left: 12px;
}

@media only screen and (min-width: 1000px) and (max-width: 1300px) {
	.dm-team-grid {
		gap: 32px 24px;
	}
}

@media only screen and (max-width: 999px) {

	/* Mobile stacks the toolbar: pills on one scrollable row, sort beneath —
	   the pill row is wider than a phone, and wrapping it pushes the sort
	   control far down the page. */
	.dm-team-toolbar {
		display: block;
		margin-top: 36px;
		margin-bottom: 20px;
	}

	.dm-team-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 10px;
		margin-bottom: 16px;
		/* Let the row bleed to the viewport edge so the last pill doesn't
		   look clipped mid-word at the container's padding. */
		scrollbar-width: none;
	}

	.dm-team-filters::-webkit-scrollbar {
		display: none;
	}

	.dm-team-filter {
		flex: 0 0 auto;
		font-size: 14px;
		padding: 11px 18px;
	}

	/* Mobile mockup: two 170px columns, 10px gutter, 290px row pitch. */
	.dm-team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 10px;
	}

	/* Mobile moves the arrow inside the image, bottom-right, over a
	   translucent disc. Height is fixed here too, at the 197px the 390px
	   mockup uses (290px row pitch less 93px of caption and gap). */
	.dm-team-card .dm-partner-photo {
		height: 220px;
		margin-bottom: 12px;
	}

	/* Reassigning the button to the photo cell is the whole move; it lands
	   over the image with no positioning context to get wrong.
	   position/z-index are still needed: .dm-partner-photo is positioned and
	   the button is not, so without them the photo paints over the button and
	   the arrow disappears entirely. */
	.dm-team-card .dm-partner-view-btn {
		grid-area: photo;
		justify-self: end;
		align-self: end;
		position: relative;
		z-index: 1;
		margin: 0 12px 24px 0;
		width: 36px;
		height: 36px;
		border-color: transparent;
		background: rgba(255, 255, 255, 0.82);
	}

	.dm-team-pagination {
		margin-top: 40px;
	}
}

@media only screen and (max-width: 690px) {
	/* This is the rule that governs real phone widths — it comes after the
	   999px block, so it sets the final gutter. Measured against the 390px
	   mockup: 290px row pitch, 10px column gutter. */
	.dm-team-grid {
		gap: 44px 10px;
	}
}

/* ==========================================================================
   Our Team hero — the banner above the listing.
   Salient zeroes padding-bottom on a row's last column, so .dm-py-xl only
   ever applies its top half here and the band renders short. Pin the height
   to the design's 400px band and centre the content instead of fighting
   that rule with !important.
   ========================================================================== */

.dm-team-hero {
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dm-team-hero .vc_column-inner {
	width: 100%;
}

.dm-breadcrumbs,
.dm-breadcrumbs p {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-white);
	margin: 0 0 18px;
}

/* The trail before the current page is dimmed; only "Our People" is solid. */
.dm-breadcrumbs a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.25s ease;
}

.dm-breadcrumbs a:hover {
	color: var(--dm-white);
}

.dm-team-hero-title,
.dm-team-hero-title h1 {
	color: var(--dm-white) !important;
	margin: 0;
}

/* The intro band's right-hand copy column — the left holds eyebrow +
   heading, the right the paragraphs, per the design's two-column split. */
.dm-team-intro-copy p {
	color: var(--dm-mist);
}

.dm-faq-intro,
.dm-faq-intro p {
	color: var(--dm-body-text);
	margin-top: 16px;
}

/* Submit button — Home's contact form has no submit; this page's design
   does, so the rule lives here rather than with the shared form styles. */
.dm-form-submit {
	font-family: var(--dm-font-body);
	font-size: 15px;
	line-height: 1;
	color: var(--dm-admiralty);
	background: var(--dm-white);
	border: 0;
	border-radius: 0;
	padding: 18px 34px;
	margin-top: 24px;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.dm-form-submit:hover {
	background: var(--dm-admiralty);
	color: var(--dm-white);
}

@media only screen and (max-width: 999px) {

	.dm-team-hero {
		min-height: 260px;
	}

	.dm-breadcrumbs,
	.dm-breadcrumbs p {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.dm-form-submit {
		width: 100%;
	}
}

/* Salient styles bare <button> from the theme's own button rules, which beat
   a plain .dm-form-submit selector — the submit rendered parchment-on-white
   and vanished into the contact band. Scope it under the form and force the
   two colour properties rather than raising specificity everywhere. */
.dm-contact-form .dm-form-submit {
	background: var(--dm-white) !important;
	color: var(--dm-admiralty) !important;
}

.dm-contact-form .dm-form-submit:hover {
	background: var(--dm-admiralty) !important;
	color: var(--dm-white) !important;
}

/* Salient renders a toggle title as an h3, which the global heading rules
   set to 38px — far larger than the design's accordion, where each question
   sits on one line. */
.dm-faq-col .toggle > .toggle-title,
.dm-faq-col .toggle > .toggle-title a {
	font-size: 24px !important;
	line-height: 32px !important;
}

@media only screen and (max-width: 999px) {

	.dm-faq-col .toggle > .toggle-title,
	.dm-faq-col .toggle > .toggle-title a {
		font-size: 19px !important;
		line-height: 27px !important;
	}
}

/* ==========================================================================
   Restore .dm-py-* bottom padding inside full-width rows.

   Salient ships `.full-width-section > .span_12 > div:last-child {
   padding-bottom: 0 }` — specificity (0,3,1), which beats a bare .dm-py-lg
   at (0,1,0). The result is that every full-bleed section renders with its
   top padding only and the last line of copy sits flush against the band's
   bottom edge. It caught the hero first, but it applies to the intro, FAQ
   and contact bands equally, and to the last column of a multi-column row.

   Matching the selector shape with the utility class added takes this to
   (0,4,1) so it wins on specificity, not on !important.
   ========================================================================== */

.full-width-section > .span_12 > div.dm-py-sm:last-child { padding-bottom: 40px; }
.full-width-section > .span_12 > div.dm-py-md:last-child { padding-bottom: 80px; }
.full-width-section > .span_12 > div.dm-py-lg:last-child { padding-bottom: 120px; }
.full-width-section > .span_12 > div.dm-py-xl:last-child { padding-bottom: 160px; }

@media only screen and (max-width: 999px) {
	.full-width-section > .span_12 > div.dm-py-sm:last-child { padding-bottom: 24px; }
	.full-width-section > .span_12 > div.dm-py-md:last-child { padding-bottom: 50px; }
	.full-width-section > .span_12 > div.dm-py-lg:last-child { padding-bottom: 60px; }
	.full-width-section > .span_12 > div.dm-py-xl:last-child { padding-bottom: 70px; }
}

@media only screen and (max-height: 700px) {
	.full-width-section > .span_12 > div.dm-py-xl:last-child { padding-bottom: 60px; }
}

/* ==========================================================================
   Single team member profile — single-partner.php.

   Measured off workspace/figma/Single Employee Profile.png: a 1432px content
   band split 600 / 85 / 747, photo 600x650 at the top, share block beneath
   it, and 100px of space between the header and the photo.
   ========================================================================== */

.dm-profile-wrap {
	background: var(--dm-parchment-light);
	padding-top: 100px;
	padding-bottom: 40px;
}

.dm-profile {
	display: grid;
	grid-template-columns: 600fr 747fr;
	column-gap: 85px;
	align-items: start;
}

.dm-profile-photo {
	width: 100%;
	height: 650px;
	overflow: hidden;
}

/* Square corners here — probing the mockup's corner pixel shows photo, not
   background, on both breakpoints. The 10px radius belongs to the listing
   card only. */
.dm-profile-photo img {
	display: block;
	width: 100%;
	/* Salient's `.row .col img { height: auto }` is (0,2,1) and outranks a
	   single-class rule here, same fight as the listing card. */
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.dm-profile-share {
	margin-top: 42px;
}

.dm-share-title {
	font-family: var(--dm-font-heading);
	font-size: 22px;
	color: var(--dm-admiralty);
	margin: 0 0 22px;
}

.dm-share-links {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-share-links li { margin: 0; }

.dm-share-links a {
	display: block;
	color: var(--dm-obsidian);
	transition: color 0.25s ease;
}

.dm-share-links a:hover { color: var(--dm-straw); }

.dm-share-links .dm-icon {
	width: 22px;
	height: 22px;
	display: block;
}

/* --- detail column --- */

.dm-profile-role {
	font-family: var(--dm-font-heading);
	font-size: 20px;
	line-height: 1;
	color: var(--dm-admiralty);
	margin: 0 0 12px;
}

.dm-profile-name {
	font-family: var(--dm-font-heading);
	font-size: 46px;
	line-height: 1;
	color: var(--dm-admiralty) !important;
	margin: 0 0 24px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.dm-profile-linkedin {
	display: inline-flex;
	color: var(--dm-admiralty);
	transition: opacity 0.25s ease;
}

.dm-profile-linkedin:hover { opacity: 0.75; }

.dm-profile-linkedin .dm-icon {
	width: 26px;
	height: 26px;
}

.dm-profile-education {
	font-family: var(--dm-font-heading);
	font-size: 26px;
	line-height: 1.2;
	color: var(--dm-admiralty);
	margin: 0 0 26px;
}

/* Phone / email / vCard rows. The glyph is straw, the label navy and
   underlined — a link colour change would take the icon with it, hence the
   colour is set on the icon rather than inherited from the <a>. */
.dm-profile-contact {
	list-style: none;
	margin: 0 0 52px;
	padding: 0;
}

.dm-profile-contact li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
}

.dm-profile-contact .dm-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--dm-straw);
}

.dm-profile-contact a {
	font-family: var(--dm-font-body);
	font-size: 16px;
	color: var(--dm-admiralty);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.25s ease;
}

.dm-profile-contact a:hover { color: var(--dm-straw); }

.dm-profile-bio p {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
	margin: 0 0 22px;
}

.dm-profile-pa { margin-top: 46px; }

.dm-pa-title {
	font-family: var(--dm-font-heading);
	font-size: 26px;
	color: var(--dm-admiralty);
	margin: 0 0 10px;
}

.dm-pa-name {
	font-family: var(--dm-font-heading);
	font-size: 20px;
	color: var(--dm-admiralty);
	margin: 0 0 18px;
}

.dm-profile-pa .dm-profile-contact { margin-bottom: 0; }

/* --- contact band --- */

.dm-profile-contact-band {
	background: var(--dm-parchment);
	padding: 120px 0;
}

.dm-profile-contact-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.dm-profile-contact-copy h2 {
	margin: 0 0 16px;
}

.dm-profile-contact-copy p {
	font-family: var(--dm-font-body);
	color: var(--dm-body-text);
}

@media only screen and (max-width: 999px) {

	.dm-profile-wrap {
		padding-top: 40px;
		padding-bottom: 60px;
	}

	/* Mobile stacks to one column: photo, then every detail beneath it, with
	   the share block moving below the assistant rather than under the photo
	   — see single employee Mobile.png. */
	.dm-profile {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.dm-profile-media {
		display: contents;
	}

	/* The mobile mockup crops taller than desktop: 350x430 against 600x650. */
	.dm-profile-photo {
		height: auto;
		aspect-ratio: 350 / 430;
		order: 1;
		margin-bottom: 32px;
	}

	.dm-profile-detail { order: 2; }

	.dm-profile-share {
		order: 3;
		margin-top: 40px;
	}

	.dm-profile-name {
		font-size: 32px;
		gap: 14px;
	}

	.dm-profile-education { font-size: 21px; }

	.dm-profile-contact-band { padding: 60px 0; }

	.dm-profile-contact-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   Profile — neutralise two Salient defaults.

   1. skin-material.css sets `p { padding-bottom: 1.5em }`, so every
      paragraph in the profile rendered ~30px taller than its own line box
      and the whole detail column drifted well past the design's rhythm.
      Spacing here is controlled by margin, so the padding is zeroed.
   2. The list markers are set on the `li`, not the `ul`, so `list-style:
      none` on the list did not remove them — the share row showed bullets.
   ========================================================================== */

.dm-profile-role,
.dm-profile-education,
.dm-pa-name,
.dm-profile-bio p,
.dm-profile-contact-copy p {
	padding-bottom: 0;
}

.dm-share-links li,
.dm-profile-contact li {
	list-style: none;
	list-style-type: none;
}

.dm-share-links li::marker,
.dm-profile-contact li::marker {
	content: "";
}

/* Rhythm re-tuned against the mockup once the phantom padding was gone:
   role -> name 20, name -> education 33, education -> first contact row 27,
   contact row pitch 41, last row -> bio 52. */
.dm-profile-role { margin-bottom: 16px; }
.dm-profile-name { margin-bottom: 28px; }
.dm-profile-education { margin-bottom: 22px; }
.dm-profile-contact li { margin-bottom: 18px; }
.dm-profile-contact { margin-bottom: 52px; }
.dm-profile-bio p { margin-bottom: 20px; }

 .dm-team-card .dm-partner-photo {
        grid-area: photo;
        aspect-ratio: 173 / 200;
        height: auto;
        border-radius: 0;
        margin-bottom: 20px;
  }