/* Small overrides that theme.json can't express. */

/* Hero: on desktop the photo is anchored on the framed credentials at the
   left. Once the columns stack the crop is much narrower, so nudge right
   just enough to keep the credential wall and the spine model in frame. */
@media (max-width: 781px) {
	.wp-block-cover.is-style-hero .wp-block-cover__image-background {
		object-position: 22% 40% !important;
	}
}

/* Check list: core/list can't draw an icon marker, so swap the bullet for a
   gold check. Used for the product benefit lists. */
.wp-block-list.is-style-check-list {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-check-list li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}

.wp-block-list.is-style-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25em;
	height: 1.25em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--drmarylynn-check) center / contain no-repeat;
	mask: var(--drmarylynn-check) center / contain no-repeat;
}

:root {
	--drmarylynn-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm141 121L235 341c-5 5-13 5-18 0l-102-98c-5-5-5-13 0-18l18-18c5-5 13-5 18 0l75 72 141-146c5-5 13-5 18 0l19 18c5 5 5 13-1 18z'/%3E%3C/svg%3E");
}

/* Hero with a side fade: once the columns stack there is no "side" left, so
   fade from the top instead and keep the copy readable over the photo. */
@media (max-width: 781px) {
	.wp-block-cover.is-fade-down .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(249, 247, 247, 0.97) 0%,
			rgba(249, 247, 247, 0.94) 62%,
			rgba(249, 247, 247, 0.45) 100%
		) !important;
	}
}

/* ---------------------------------------------------------------------------
   Header
   The live site's header is a white bar with an 80px minimum height, a 5px
   gold rule under it, and nav links that reveal an underline on hover / for
   the current page. The border and colours come from the block markup and
   theme.json; the rest needs real CSS.
   --------------------------------------------------------------------------- */

.dml-header > .wp-block-group {
	min-height: 80px;
}

.dml-branding .wp-block-site-logo img {
	display: block;
}

/* Underline-on-hover nav, matching Kadence's "underline" header style. Scoped
   away from the mobile overlay, where an underline under each item is noise. */
.dml-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation-item__content {
	position: relative;
	padding: 0.6em 0.9em;
}

.dml-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0.9em;
	right: 0.9em;
	bottom: 0.3em;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.dml-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation-item__content:hover::after,
.dml-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation-item__content:focus-visible::after,
.dml-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.dml-header-nav .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Product media
   Two stacked images in one grid cell: an organically masked square photo,
   with the product shot floating over its lower-right corner and overhanging
   the bottom edge. This is the layered treatment from the original page,
   rebuilt with core Image blocks plus a CSS mask instead of a plugin.
   --------------------------------------------------------------------------- */

.dml-product-media {
	display: grid;
	align-items: center;
}

.dml-product-media > * {
	grid-area: 1 / 1;
	margin: 0;
}

/* Photographic backdrops get cropped square and cut to an organic blob. A
   cut-out product image (`is-cutout`) already has its own silhouette, so it
   is left alone. */
.dml-product-photo img {
	width: 100%;
	height: auto;
}

.dml-product-photo:not(.is-cutout) img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 66% 34% 45% 55% / 42% 58% 42% 58%;
}

.dml-product-photo.is-sepia img {
	filter: sepia(0.4) saturate(1.15);
}

.dml-product-shot {
	align-self: end;
	justify-self: end;
	width: min(58%, 300px);
	margin-right: 1rem;
	margin-bottom: -2.5rem;
	filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.22));
}

.dml-product-shot img {
	width: 100%;
	height: auto;
}

/* The overhanging bottle needs a little breathing room under it before the
   next section starts. */
.dml-product-media {
	margin-bottom: 2.5rem;
}

/* A section photo used purely as texture behind copy. The cover block's dim
   ratio only steps in tens, and even 90% leaves the photo too loud, so knock
   the image itself back as well. Matches the ~6% wash on the original site. */
.wp-block-cover.is-faint-photo .wp-block-cover__image-background {
	opacity: 0.5;
}

/* Phone header: keep branding and the menu toggle on one row rather than
   letting the toggle drop to a second line. */
@media (max-width: 600px) {
	.dml-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	.dml-branding img.custom-logo {
		width: 52px;
		height: auto;
	}
}

/* Footer bottom bar: copyright, nav, and credit share one row on desktop.
   The nav's own flex gap is enough separation, so strip the list padding. */
.dml-footer-bottom .wp-block-navigation {
	flex: 1 1 auto;
}
.dml-footer-bottom .wp-block-navigation-item__content {
	text-decoration: none;
}
.dml-footer-bottom .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* Phone footer: everything centres and stacks. The columns block already
   stacks at 781px, but its children keep their desktop alignment. */
@media (max-width: 781px) {
	.dml-footer-top,
	.dml-footer-bottom {
		text-align: center;
	}
	.dml-footer-brand,
	.dml-footer-contact,
	.dml-footer-bottom,
	.dml-footer-bottom .wp-block-navigation__container {
		justify-content: center;
	}
	.dml-footer-bottom .has-text-align-right {
		text-align: center;
	}
	.dml-footer-top .wp-block-column {
		flex-basis: 100% !important;
	}
	/* Stack the mark over the name so the lockup centres as one unit --
	   side by side, the wide name block pushes the logo off-centre. */
	.dml-footer-brand {
		flex-direction: column;
	}
	/* Stack the bottom bar outright -- left at space-between the copyright
	   and the nav end up sharing a line and reading as one sentence. */
	.dml-footer-bottom {
		flex-direction: column;
	}
}

/* Narrow phones: cap the nav so the four items break 2+2 rather than 3+1. */
@media (max-width: 560px) {
	.dml-footer-bottom .wp-block-navigation__container {
		max-width: 17rem;
		margin-inline: auto;
	}
}

/* Narrow phones: the brand lockup is nowrap by design, so shrink the mark
   rather than let the name overflow. */
@media (max-width: 480px) {
	.dml-footer-brand img {
		width: 44px;
	}
}

/* ---------------------------------------------------------------------------
   Photo panels
   The original muscle-testing page sat each photo on a flat colour block
   offset behind it (Kadence drew it as a hard box-shadow). Rebuilt here on a
   plain core Image block: the offset is margin + shadow, so the photo and its
   block stay inside the column.
   --------------------------------------------------------------------------- */

.dml-photo-panel {
	--dml-panel-offset: 22px;
	box-shadow: calc(-1 * var(--dml-panel-offset)) var(--dml-panel-offset) 0 0
		var(--wp--preset--color--accent-tint);
	margin-left: var(--dml-panel-offset);
	margin-bottom: var(--dml-panel-offset);
}

.dml-photo-panel.is-offset-right {
	box-shadow: var(--dml-panel-offset) var(--dml-panel-offset) 0 0
		var(--wp--preset--color--accent-tint);
	margin-left: 0;
	margin-right: var(--dml-panel-offset);
}

.dml-photo-panel img {
	display: block;
	width: 100%;
}

@media (max-width: 781px) {
	.dml-photo-panel {
		--dml-panel-offset: 14px;
	}
}

/* ---------------------------------------------------------------------------
   Numbered steps
   A gold numeral in its own gutter beside each step, with a hairline between
   steps. The flex group handles the two columns; the rest is alignment the
   block attributes can't set.
   --------------------------------------------------------------------------- */

.dml-step {
	align-items: flex-start;
}

.dml-step-number {
	flex: 0 0 auto;
	min-width: 2.25ch;
	padding-top: 0.15em;
}

/* The step body takes the rest of the row; min-width:0 stops long words from
   forcing the flex item wider than the column. */
.dml-step > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

.dml-step + .dml-step {
	border-top: 1px solid var(--wp--preset--color--accent-tint);
	padding-top: var(--wp--preset--spacing--30);
}

/* Outline button. theme.json's shared button hover swaps to a near-black fill,
   which disappears against the dark CTA band, so invert to the gold instead.
   The colour needs !important to beat core's has-*-color utility class. */
.dml-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.dml-cta .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--black) !important;
}


/* ---------------------------------------------------------------------------
   Home page
   The original leans on a handful of layout devices that core blocks have no
   attribute for: hard offset shadows in the light gold, cards that hang past
   the section they live in, and a stadium-shaped contact bar sitting over the
   map. Each one is rebuilt here on plain core blocks plus the CSS below.
   --------------------------------------------------------------------------- */

/* Icons ------------------------------------------------------------------ */

/* Empty group blocks used purely as a glyph. The mask keeps the shape a
   single colour we can theme, rather than a pasted-in SVG per instance. */
.dml-icon {
	flex: 0 0 auto;
	align-self: flex-start;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--black);
}

.dml-icon::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-color: currentColor;
	-webkit-mask: var(--dml-glyph) center / contain no-repeat;
	mask: var(--dml-glyph) center / contain no-repeat;
}

.dml-icon-phone,
.dml-icon-phone-call {
	--dml-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");
}

.dml-icon-map {
	--dml-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E");
}

/* The accreditation rows use a bare glyph, not a filled disc. */
.dml-icon-certificate {
	width: 20px;
	height: 20px;
	margin-top: 0.35em;
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--contrast-2);
	--dml-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M458.622 255.92l45.985-45.005c13.708-12.977 7.316-36.039-10.664-40.339l-62.65-15.99 17.661-62.015c4.991-17.838-11.829-34.663-29.661-29.671l-61.994 17.667-15.984-62.671C337.085.197 313.765-6.276 300.99 7.228L256 53.57 211.011 7.229c-12.63-13.351-36.047-7.234-40.325 10.668l-15.984 62.671-61.995-17.667C74.87 57.907 58.056 74.738 63.046 92.572l17.661 62.015-62.65 15.99C.069 174.878-6.31 197.944 7.392 210.915l45.985 45.005-45.985 45.004c-13.708 12.977-7.316 36.039 10.664 40.339l62.65 15.99-17.661 62.015c-4.991 17.838 11.829 34.663 29.661 29.671l61.994-17.667 15.984 62.671c4.439 18.575 27.696 24.018 40.325 10.668L256 458.61l44.989 46.001c12.5 13.488 35.987 7.486 40.325-10.668l15.984-62.671 61.994 17.667c17.836 4.994 34.651-11.837 29.661-29.671l-17.661-62.015 62.65-15.99c17.987-4.302 24.366-27.367 10.664-40.339l-45.984-45.004z'/%3E%3C/svg%3E");
}

.dml-icon-certificate::before {
	width: 20px;
	height: 20px;
}

/* Hero ------------------------------------------------------------------- */

/* The phone card hangs below the hero, so the cover can't clip its children.
   Core sets `overflow: clip` on every cover, hence the doubled-up selector.
   The background image is absolutely positioned inside, so it still can't
   escape. The z-index lifts the overhang above the section it lands on. */
.wp-block-cover.dml-hero {
	overflow: visible;
}

.dml-hero {
	position: relative;
	z-index: 10;
}

.dml-hero-copy {
	background-color: rgba(255, 255, 255, 0.85);
}

.dml-hero-title {
	font-size: clamp(2.5rem, 1.55rem + 3vw, 65px);
	line-height: 1.28;
	text-shadow: 3px 1px 1px rgba(0, 0, 0, 0.2);
}

.dml-hero-intro {
	padding-right: 80px;
}

.dml-hero-card {
	gap: 16px;
	box-shadow: 15px 15px 0 0 var(--wp--preset--color--accent-tint);
}

.dml-hero-phone {
	font-size: 28px;
}

/* WordPress's layout styles zero the block margins of every child in a flow
   or constrained container -- `:root :where(.is-layout-flow) > *`, which lands
   at (0,2,0). Every deliberate offset below has to out-specify that, which is
   why these selectors are longer than they otherwise need to be. */

/* The card sits at the foot of the hero's content and then hangs past the
   section's bottom edge, the way the original does. The negative margin drops
   the column out of the flow; the offset is `top` rather than more margin
   because a flex item's height can't go below zero, which caps how far a
   margin alone can pull the card down. */
@media (min-width: 1025px) {
	.dml-hero .dml-hero-cta-col > .dml-hero-card {
		position: relative;
		z-index: 2;
		margin-bottom: -210px;
		top: 60px;
	}
}

/* The original stacks this hero a good deal earlier than core's 782px
   breakpoint -- at 55/45 the headline is unreadable well before then. */
@media (max-width: 1024px) {
	.dml-hero .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.dml-hero .wp-block-column {
		flex-basis: 100% !important;
	}
	.dml-hero-copy {
		order: 1;
	}
	.dml-hero-cta-col {
		order: 2;
	}
	.dml-hero-intro {
		padding-right: 0;
	}
	.dml-hero .dml-hero-cta-col > .dml-hero-card {
		box-shadow: 10px 10px 0 0 var(--wp--preset--color--accent-tint);
		margin-right: 10px;
	}
}

/* Services --------------------------------------------------------------- */

/* Each service photo sits on a light gold block offset up and to the right.
   The offset is margin + shadow so the photo stays inside its column. */
.dml-offset-photo {
	margin-top: 15px;
	margin-right: 15px;
}

.dml-offset-photo img {
	display: block;
	width: 100%;
	box-shadow: 15px -15px 0 0 var(--wp--preset--color--accent-tint);
}

.dml-offset-photo.is-white-offset {
	margin-top: 25px;
	margin-right: 25px;
}

.dml-offset-photo.is-white-offset img {
	box-shadow: 25px -25px 0 0 var(--wp--preset--color--base);
}

/* The intro's hand-placed line break only helps while the line is long. */
@media (max-width: 700px) {
	.dml-section-intro br {
		display: none;
	}
}

/* Address + map ---------------------------------------------------------- */

/* Side by side, the contact pill rises 74px into the foot of the services
   section, so that section needs clearance under its buttons. It goes on the
   cover's inner container rather than the cover, whose padding is an inline
   style set in the editor. Stacked, the pill sits below and it isn't needed. */
@media (min-width: 782px) {
	.dml-services .wp-block-cover__inner-container {
		padding-bottom: 70px;
	}
}

.dml-locate {
	position: relative;
}

/* A stadium-shaped white bar straddling the seam between the services section
   and the map, as on the original. The group around it is given no height of
   its own -- equal negative margins top and bottom cancel the bar out of the
   flow entirely, so the two sections still meet edge to edge and the pill rides
   the join instead of sitting in a white gap between them.

   Pulled in from the full wide width too: at 1240px the pill was mostly empty
   air, and the shorter bar reads as a deliberate capsule. */
.dml-locate .wp-block-group.dml-locate-card {
	position: relative;
	z-index: 2;
	max-width: 1040px;
	border-radius: 999px;
	box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.35);
	margin-top: -74px;
	margin-bottom: -74px;
}

/* Nested in a constrained group, the columns clamp themselves to contentSize
   and sit centred, which stranded ~200px of white inside each end of the pill.
   Let them span the bar instead. */
.dml-locate-card .wp-block-columns {
	max-width: none;
}

/* A hairline between the two halves, inset from the curved ends. */
.dml-locate-card::after {
	content: "";
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 50%;
	width: 1px;
	background-color: var(--wp--preset--color--accent-tint);
}

.dml-info {
	gap: 16px;
	align-items: flex-start;
}

/* Inside the pill each icon/text pair centres on its own half, so the two sit
   symmetrically about the divider instead of clustering in the middle. The
   columns stretch and the pairs hang from a shared top edge, which lines the
   two labels up -- centring them individually left the shorter phone block
   sitting visibly lower than the two-line address. */
.dml-locate-card .wp-block-column {
	align-self: stretch;
}

.dml-locate-card .dml-info {
	align-items: flex-start;
	justify-content: center;
}

/* One width for both text columns so the pairs measure the same and the two
   gold discs land at matching distances from the divider. The padding reset
   undoes core's global padding, which otherwise pads the two unequally. */
.dml-locate-card .dml-info > .wp-block-group:last-child {
	flex: 0 0 auto;
	width: 190px;
	padding-left: 0;
	padding-right: 0;
}

.dml-info-label {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.dml-info a {
	color: inherit;
	text-decoration: none;
}

.dml-info a:hover,
.dml-info a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.dml-map {
	line-height: 0;
}

.dml-map iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

/* Stacked, the bar is tall rather than wide -- a stadium radius stops making
   sense and the overlap would bury the map, so drop both. */
@media (max-width: 781px) {
	.dml-locate .wp-block-group.dml-locate-card {
		border-radius: 28px;
		margin-top: var(--wp--preset--spacing--40);
		margin-bottom: var(--wp--preset--spacing--40);
	}
	/* Stacked, a vertical rule between the halves makes no sense. */
	.dml-locate-card::after {
		display: none;
	}
	.dml-locate-card .dml-info {
		justify-content: flex-start;
	}
	.dml-map iframe {
		height: 320px;
	}
}

/* Accreditations --------------------------------------------------------- */

.dml-cert {
	gap: 20px;
	align-items: flex-start;
}

.dml-cert-title {
	font-size: clamp(1.5rem, 1.45rem + 0.2vw, 1.5625rem);
	font-weight: 400;
	line-height: 1.5;
}

/* The experience figure overlaps the lower-left corner of the photo. */
.dml-credential-media {
	position: relative;
}

.dml-credential-media .wp-block-group.dml-stat {
	position: relative;
	z-index: 2;
	width: min(230px, 62%);
	margin-top: -150px;
	margin-left: 40px;
	box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.08);
}

.dml-stat-number {
	font-size: 40px;
	line-height: 1.25;
}

.dml-stat-label {
	font-size: 18px;
	line-height: 1.2;
}

@media (max-width: 781px) {
	.dml-credential-media .wp-block-group.dml-stat {
		margin-top: -90px;
		margin-left: 20px;
	}
}

/* Narrow phones: 28px is too wide for the phone number to sit on one line
   inside the card, and a broken-up number is hard to read at a glance. */
@media (max-width: 480px) {
	.dml-hero-phone {
		font-size: 24px;
	}
}

/* Hero photo crop. Anchored right on desktop, where the copy sits over the
   faded side; once the columns stack, that crop is just the treatment table,
   so pan back towards the wall of framed credentials. Matches the crops the
   original switches between at the same widths. */
@media (max-width: 1024px) {
	.dml-hero .wp-block-cover__image-background {
		object-position: 40% 40% !important;
	}
}

@media (max-width: 767px) {
	.dml-hero .wp-block-cover__image-background {
		object-position: 10% 100% !important;
	}
}

/* ---------------------------------------------------------------------------
   Section seams
   Header, content and footer are full-bleed bands that each carry their own
   vertical padding, so the root block gap only ever shows up as a white strip
   between them. The template part wrapper is a plain div we can't put a block
   attribute on, so it gets zeroed here instead; WordPress emits those gaps at
   (0,2,0), hence the `:root` prefix.
   --------------------------------------------------------------------------- */

:root .wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}