/* ----------------------------------------------------
   dwain.me additions (Sep 29, 2026)
   Loaded AFTER the original stylesheets. Every selector here is NEW and
   prefixed "dm-", scoped to content added in this update (video cards and
   modal, company logos, contact form states, one-sheet print layout).
   No original selector is overridden. Values reuse the original tokens:
   #C5283D (accent), #1d1917 (ink), #4f4945 / #39332f (text),
   #f7f4ef (page), rgba(38, 31, 27, 0.12) (borders), 8px / 6px radii,
   Poppins and 'Playfair Display'.
-----------------------------------------------------*/

/* ---- Video cards (thumbnail button inside the original .media-frame) ---- */

.dm-video-thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #1d1917;
	cursor: pointer;
}

.dm-video-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-video-thumb:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 58px;
	height: 40px;
	border-radius: 6px;
	background: #C5283D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center / 22px no-repeat;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}

.dm-video-thumb:hover:after,
.dm-video-thumb:focus:after {
	background-color: #1d1917;
}

.dm-video-thumb:focus {
	outline: 2px solid #C5283D;
	outline-offset: 2px;
}

.dm-video-title {
	color: #1d1917;
	text-decoration: none;
	cursor: pointer;
}

.dm-video-title:hover,
.dm-video-title:focus {
	color: #C5283D;
	text-decoration: none;
}

.dm-video-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media only screen and (max-width: 900px) {
	.dm-video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 520px) {
	.dm-video-grid {
		grid-template-columns: 1fr;
	}
}

/* The original .media-card a / .media-frame a rules style plain links as
   uppercase red text; these scoped rules restore normal card links inside
   the new video cards only (.dm-video-card). */
.dm-video-card .dm-video-thumb {
	display: block;
	margin-top: 0;
}

.dm-video-card .dm-video-title {
	display: inline;
	margin-top: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: 0;
	line-height: inherit;
	text-transform: none;
	color: #1d1917;
}

.dm-video-card .dm-video-title:hover,
.dm-video-card .dm-video-title:focus {
	color: #C5283D;
}

.dm-video-series {
	margin-top: 42px;
}

/* Same values as the original .page-card h3 / .media-card h3 heading style. */
.dm-series-title {
	margin-bottom: 18px;
	font-family: Poppins, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #1d1917;
}

.dm-video-series:first-of-type {
	margin-top: 0;
}

.dm-see-more {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.dm-hidden-item {
	display: none;
}

.dm-show-all .dm-hidden-item {
	display: block;
}

/* ---- Video modal ---- */

.dm-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(12, 12, 16, 0.86);
}

.dm-modal[hidden] {
	display: none;
}

.dm-modal-dialog {
	position: relative;
	width: min(1040px, 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	background: #1d1917;
	box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4);
}

.dm-modal-frame {
	aspect-ratio: 16 / 9;
	background: #000;
}

.dm-modal-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.dm-modal-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	font-family: Poppins, sans-serif;
}

.dm-modal-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

.dm-modal-link {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.dm-modal-link:hover,
.dm-modal-link:focus {
	color: #C5283D;
	text-decoration: none;
}

.dm-modal-close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 8px;
	background: rgba(12, 12, 16, 0.36);
	color: #fff;
	font-family: Poppins, sans-serif;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.dm-modal-close:hover,
.dm-modal-close:focus {
	background: #C5283D;
	border-color: #C5283D;
}

.dm-modal-open {
	overflow: hidden;
}

@media only screen and (max-width: 760px) {
	.dm-modal {
		padding: 64px 0 0;
		align-items: flex-start;
	}

	.dm-modal-dialog {
		width: 100%;
		border-radius: 0;
		border-right: 0;
		border-left: 0;
	}

	.dm-modal-close {
		top: -52px;
		right: 12px;
	}

	.dm-modal-bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Company logos inside original cards ---- */

.dm-logo {
	display: block;
	height: 42px;
	width: auto;
	margin-bottom: 16px;
}

.dm-logo-square {
	width: 42px;
	border-radius: 8px;
}

.dm-wordmark {
	display: inline-block;
	margin-bottom: 16px;
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 42px;
	color: #1d1917;
}

.dm-link-list {
	margin-top: 8px;
}

.dm-link-list a {
	margin-right: 14px;
}

/* ---- Contact form states (inside the original .consultation-form) ---- */

.dm-field-error {
	display: none;
	font-size: 12px;
	font-weight: 600;
	color: #C5283D;
}

.dm-invalid .dm-field-error {
	display: block;
}

.dm-invalid input,
.dm-invalid select,
.dm-invalid textarea {
	border-color: #C5283D;
}

.dm-optional {
	font-weight: 400;
	color: #6b625c;
}

.dm-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dm-form-status {
	display: none;
	padding: 14px;
	border: 1px solid #C5283D;
	border-radius: 6px;
	background: #fff;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	line-height: 1.55;
	color: #1d1917;
}

.dm-form-status.dm-error {
	display: block;
}

.dm-form-success h3 {
	margin-bottom: 12px;
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: #1d1917;
}

.dm-form-success[hidden] {
	display: none;
}

/* ---- Talk cards and bios ---- */

.dm-talk-meta {
	margin-bottom: 14px;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	color: #6f645d;
}

.dm-copy-source p + p {
	margin-top: 14px;
}

.dm-copy-button {
	margin-top: 18px;
	cursor: pointer;
}

/* "Show all N lives" reuses the copy-button class; in the Lives button row it
   lines up with its neighbours (no copy-button top margin). */
.dm-see-more .dm-copy-button {
	margin-top: 0;
}

.dm-headshot {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 16px;
	background: #1d1917;
}

.dm-headshot-portrait {
	object-position: 50% 20%;
}

/* ---- One-sheet (screen + print) ---- */

/* Space between the screen-only button row and the photo/intro block
   (the row is hidden in print, so the PDF layout is unchanged). */
.dm-one-sheet .button-row.dm-no-print {
	margin-bottom: 24px;
}

.dm-sheet-head {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 26px;
	align-items: center;
}

.dm-sheet-head img {
	width: 150px;
	height: 184px;
	object-fit: cover;
	object-position: 50% 15%;
	border-radius: 8px;
}

.dm-sheet-head h1 {
	font-family: 'Playfair Display', serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.05;
	color: #1d1917;
}

@media only screen and (max-width: 760px) {
	.dm-sheet-head {
		grid-template-columns: 1fr;
	}
}

@media print {
	@page {
		size: letter;
		margin: 0.35in 0.45in;
	}

	.dm-one-sheet .page-nav,
	.dm-one-sheet .page-footer,
	.dm-one-sheet .dm-no-print {
		display: none !important;
	}

	.dm-one-sheet,
	.dm-one-sheet .site-page {
		background: #fff;
	}

	.dm-one-sheet .content-section {
		padding: 6px 0;
		border-bottom: 0;
	}

	.dm-one-sheet .content-section h2 {
		margin-bottom: 8px;
		font-size: 17px;
	}

	.dm-one-sheet .content-section p,
	.dm-one-sheet .service-list li,
	.dm-one-sheet .page-card p {
		font-size: 9pt;
		line-height: 1.35;
	}

	.dm-one-sheet .page-card {
		padding: 10px 12px;
		break-inside: avoid;
	}

	.dm-one-sheet .page-card h3 {
		margin-bottom: 6px;
		font-size: 10.5pt;
	}

	.dm-one-sheet .service-list {
		margin-top: 8px;
	}

	.dm-one-sheet .service-list li {
		margin-bottom: 4px;
	}

	.dm-one-sheet .page-grid.two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.dm-one-sheet .page-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.dm-one-sheet .page-shell {
		width: 100%;
	}

	.dm-one-sheet .dm-sheet-head img {
		width: 1.2in;
		height: 1.45in;
	}

	.dm-one-sheet .dm-sheet-head h1 {
		font-size: 26pt;
	}

	.dm-one-sheet *,
	.dm-one-sheet *::before {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.dm-one-sheet .page-grid + p {
		margin-top: 10px;
	}
}

/* ---- Shared header (Dwain 9:32 PM; fixed + frosted Dwain 30-Sep) ----
   ONE content edge for the whole site (Dwain 30-Sep, "centre balance"): the
   original .page-shell, min(1120px, 100% - 72px), or 100% - 40px under 900px.
   The logo, the hero text and every section start on that edge, and the
   "Get in touch" button ends on it.

   ONE set of rules for every page (Dwain 1-Oct). Everything the header needs
   is written here under .dm-header, so it renders the same with or without
   the original style.css + Bootstrap underneath: the funnel pages (/links and
   the landing pages) load neither, and used to carry a forked copy of the
   original .page-nav rules. Values are the original ones (style.css .page-nav,
   .brand-link, .page-nav-links, .nav-toggle, .db-button.primary).

   Desktop is a 3-column grid (1fr auto 1fr): the two outer columns are always
   equal, so the links sit on the true page centre whatever the logo and
   button widths are. The nine links are 695px wide, so one row needs 1160px;
   under 1180px the links fold into the menu (one breakpoint, every page).

   The bar is fixed. Over the dark hero it is a smoky glass; once the hero has
   scrolled away (site.js adds dm-on-light) it turns to light frosted glass
   with ink text, so the page shows through blurred. */
:root {
	--dm-edge: max(36px, calc((100vw - 1120px) / 2));
	--dm-header-h: 64px;
}

html:has(.dm-header) {
	scrollbar-gutter: stable;
	scroll-padding-top: calc(var(--dm-header-h) + 16px);
}

.dm-header,
.dm-header *,
.dm-header *:before,
.dm-header *:after {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.dm-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: 0;
	padding: 13px max(36px, calc((100% - 1120px) / 2));
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(12, 12, 16, 0.42);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dm-header .brand-link {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	text-decoration: none;
	transition: color 0.25s ease;
}

.dm-header .brand-link img {
	width: 34px;
	height: 34px;
	border: 0;
}

.dm-header .page-nav-links {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 17px;
	grid-row: 1;
	grid-column: 2;
	margin: 0;
}

.dm-header .page-nav-links a {
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.25s ease;
}

.dm-header a:hover,
.dm-header a:focus {
	color: #C5283D;
	text-decoration: none;
}

.dm-header a:hover,
.dm-header a:active {
	outline: 0;
}

.dm-header a:focus {
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

.dm-header .nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 8px;
	background: rgba(12, 12, 16, 0.36);
	font: inherit;
	cursor: pointer;
}

.dm-header .nav-toggle span:not(.screen-reader-text) {
	display: block;
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background: #fff;
	transform: translateX(-50%);
	transition: top 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.dm-header .nav-toggle span:nth-child(1) {
	top: 14px;
}

.dm-header .nav-toggle span:nth-child(2) {
	top: 20px;
}

.dm-header .nav-toggle span:nth-child(3) {
	top: 26px;
}

.dm-header .nav-toggle.is-open span:nth-child(1) {
	top: 20px;
	transform: translateX(-50%) rotate(45deg);
}

.dm-header .nav-toggle.is-open span:nth-child(2) {
	opacity: 0;
}

.dm-header .nav-toggle.is-open span:nth-child(3) {
	top: 20px;
	transform: translateX(-50%) rotate(-45deg);
}

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

/* "Get in touch" (Dwain 9:42 PM): the live primary button (db-button
   primary), sized for the header. It sits in the grid's right column, ending
   on the content edge. When the links fold into the menu it moves into the
   menu (dm-menu-cta) so the bar does not crowd or overflow. */
.dm-header .dm-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
	min-height: 36px;
	padding: 8px 14px;
	border: 1px solid #C5283D;
	border-radius: 6px;
	background: #C5283D;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	text-decoration: none;
	transition: 0.2s ease;
}

.dm-header .dm-header-cta:hover,
.dm-header .dm-header-cta:focus {
	border-color: #1d1917;
	background: #1d1917;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.dm-header .page-nav-links .dm-menu-cta {
	display: none;
}

.dm-header.dm-scrolled {
	background: rgba(12, 12, 16, 0.62);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
}

.dm-header.dm-on-light {
	border-bottom-color: rgba(38, 31, 27, 0.1);
	background: rgba(247, 244, 239, 0.72);
	box-shadow: 0 10px 30px rgba(31, 24, 20, 0.08);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
}

.dm-header.dm-on-light .brand-link {
	color: #1d1917;
}

.dm-header.dm-on-light .page-nav-links a {
	color: #4f4945;
}

.dm-header.dm-on-light .page-nav-links a:hover,
.dm-header.dm-on-light .page-nav-links a:focus,
.dm-header.dm-on-light .brand-link:hover,
.dm-header.dm-on-light .brand-link:focus {
	color: #C5283D;
}

.dm-header.dm-on-light .nav-toggle {
	border-color: rgba(38, 31, 27, 0.2);
	background: rgba(255, 255, 255, 0.6);
}

.dm-header.dm-on-light .nav-toggle span:not(.screen-reader-text) {
	background: #1d1917;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dm-header,
	.dm-header.dm-scrolled {
		background: rgba(12, 12, 16, 0.9);
	}

	.dm-header.dm-on-light {
		background: rgba(247, 244, 239, 0.97);
	}
}

/* Under 1180px: logo + hamburger, the links (and "Get in touch") in the menu. */
@media only screen and (max-width: 1179px) {
	.dm-header {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0 16px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.dm-header .nav-toggle {
		display: inline-flex;
		grid-column: 2;
	}

	.dm-header .dm-header-cta {
		display: none;
	}

	.dm-header .page-nav-links {
		display: none;
		grid-row: 2;
		grid-column: 1 / -1;
		grid-template-columns: 1fr;
		gap: 0;
		width: 100%;
		max-height: calc(100vh - var(--dm-header-h) - 24px);
		max-height: calc(100dvh - var(--dm-header-h) - 24px);
		overflow-y: auto;
	}

	.dm-header .page-nav-links.is-open {
		display: grid;
		margin-top: 12px;
		padding: 4px 16px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 8px;
		background: rgba(12, 12, 16, 0.9);
	}

	.dm-header .page-nav-links a {
		display: block;
		padding: 14px 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		text-align: left;
	}

	.dm-header .page-nav-links a:first-child {
		border-top: 0;
	}

	.dm-header .page-nav-links .dm-menu-cta {
		display: block;
		color: #fff;
	}

	.dm-header.dm-on-light .page-nav-links.is-open {
		border-color: rgba(38, 31, 27, 0.12);
		background: rgba(255, 255, 255, 0.97);
		box-shadow: 0 18px 40px rgba(31, 24, 20, 0.12);
	}

	.dm-header.dm-on-light .page-nav-links a {
		border-top-color: rgba(38, 31, 27, 0.1);
		color: #1d1917;
	}

	.dm-header.dm-on-light .page-nav-links .dm-menu-cta {
		color: #C5283D;
	}
}

@media only screen and (max-width: 900px) {
	:root {
		--dm-edge: 20px;
	}

	.dm-header {
		padding-right: 20px;
		padding-left: 20px;
	}
}

/* Heroes start their text on the content edge (they used edge + 54px, so the
   headline sat visibly right of the logo). The hero is 100vw wide and pulled
   out of the centred shell, so calc(50vw - 50%) is exactly the shell's edge. */
.dm-hero,
.profile-main .site-hero {
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
}

.dm-hero:after {
	left: var(--dm-edge);
}

@media only screen and (max-width: 520px) {
	.dm-hero:after {
		left: 20px;
	}
}

/* Homepage body: the original sections were a 920px column pinned to the LEFT
   of a 1240px wrapper (154px margin left, 366px right at 1440px). They now sit
   in the same centred container as every other page. */
.profile-main .profile-wrap {
	width: min(1120px, calc(100% - 72px));
	max-width: none;
	padding: 0 0 10px;
}

.profile-main .profile-section {
	max-width: none;
}

/* The three highlight cards span the full content width under the headline,
   so the hero is anchored on both sides instead of hugging the left. */
.profile-main .quick-stats {
	max-width: none;
}

@media only screen and (max-width: 900px) {
	.profile-main .profile-wrap {
		width: calc(100% - 40px);
	}
}

/* ---- Video area side navigation (Dwain 9:32 PM) ----
   Desktop: a sticky column listing every video section. Mobile: a compact,
   horizontally scrolling chip row above the sections. Original tokens only. */
.dm-video-layout {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.dm-video-main {
	min-width: 0;
}

.dm-side-nav {
	position: sticky;
	top: calc(var(--dm-header-h) + 24px);
	z-index: 20;
	padding: 72px 0 24px;
}

.dm-side-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-side-nav li {
	margin: 0;
	padding: 0;
}

.dm-side-link {
	display: block;
	padding: 8px 0 8px 14px;
	border-left: 2px solid rgba(38, 31, 27, 0.12);
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #6f645d;
	text-decoration: none;
}

.dm-side-link:hover,
.dm-side-link:focus,
.dm-side-link.dm-active {
	border-left-color: #C5283D;
	color: #C5283D;
	text-decoration: none;
}

.dm-video-anchor {
	scroll-margin-top: calc(var(--dm-header-h) + 24px);
}

/* Homepage: the video area sits in the original 920px profile column, so it
   uses the full profile width and two-column video grids. */
.dm-video-area {
	max-width: none;
}

.dm-video-area .dm-side-nav {
	padding-top: 0;
}

.dm-video-area .dm-video-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dm-video-block {
	padding-bottom: 56px;
}

.dm-video-block + .dm-video-block {
	padding-top: 56px;
	border-top: 1px solid rgba(38, 31, 27, 0.12);
}

@media only screen and (max-width: 900px) {
	.dm-video-layout {
		display: block;
	}

	.dm-side-nav {
		top: var(--dm-header-h);
		margin: 0 -20px;
		padding: 12px 20px;
		overflow-x: auto;
		background: #f7f4ef;
		border-bottom: 1px solid rgba(38, 31, 27, 0.12);
		-webkit-overflow-scrolling: touch;
	}

	.dm-side-nav .section-kicker {
		display: none;
	}

	.dm-side-nav ul {
		display: flex;
		gap: 8px;
		width: max-content;
	}

	.dm-side-link {
		padding: 8px 12px;
		border: 1px solid rgba(38, 31, 27, 0.12);
		border-radius: 6px;
		background: #fff;
		white-space: nowrap;
	}

	.dm-side-link:hover,
	.dm-side-link:focus,
	.dm-side-link.dm-active {
		border-color: #C5283D;
	}

	.dm-video-anchor {
		scroll-margin-top: calc(var(--dm-header-h) + 72px);
	}

	.dm-video-area .dm-side-nav {
		margin: 0 -22px;
		padding: 12px 22px;
	}
}

@media only screen and (max-width: 520px) {
	.dm-video-area .dm-video-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Mobile hero fix (layout bug on the live site too) ----
   Under 900px the original CSS sets .page-hero to one column, but
   .page-hero:has(.hero-note) is more specific and keeps two columns, so the
   hero note overlapped the text and buttons at 390px. The new dm-hero hook
   restores the single column the original media query intended. */
@media only screen and (max-width: 900px) {
	.dm-hero:has(.hero-note) {
		grid-template-columns: minmax(0, 1fr);
	}

	.dm-hero .hero-note {
		justify-self: start;
	}
}

/* ---- Shorts (Dwain 9:45 PM): vertical 9:16 cards ----
   Desktop: a grid, 6 per row (4 in the narrower homepage column).
   Mobile: a swipeable row with scroll-snap that scrolls inside itself. */
.dm-shorts-row {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.dm-video-area .dm-shorts-row {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dm-short-card {
	min-width: 0;
}

.dm-short-card .dm-short-thumb {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	margin: 0 0 10px;
	overflow: hidden;
	border: 1px solid rgba(38, 31, 27, 0.12);
	border-radius: 8px;
	background: #1d1917;
}

.dm-short-card .dm-short-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-short-card .dm-short-thumb:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 32px;
	border-radius: 6px;
	background: #C5283D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat;
	transform: translate(-50%, -50%);
}

.dm-short-card .section-kicker {
	margin-bottom: 6px;
}

.dm-short-card h3 {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: #1d1917;
}

.dm-short-card .dm-video-title {
	color: #1d1917;
	text-decoration: none;
}

.dm-short-card .dm-video-title:hover,
.dm-short-card .dm-video-title:focus {
	color: #C5283D;
	text-decoration: none;
}

@media only screen and (max-width: 900px) {
	.dm-shorts-row,
	.dm-video-area .dm-shorts-row {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.dm-short-card {
		flex: 0 0 42%;
		scroll-snap-align: start;
	}
}

/* 9:16 player for Shorts in the modal */
.dm-modal-vertical {
	width: min(420px, 100%);
}

.dm-modal-vertical .dm-modal-frame {
	aspect-ratio: 9 / 16;
	max-height: calc(100vh - 160px);
}

/* ---- Company logos on dark page heroes: a white chip keeps real colours legible ---- */
.dm-hero-logo {
	display: inline-flex;
	align-items: center;
	height: 52px;
	margin-bottom: 20px;
	padding: 8px 14px;
	border-radius: 8px;
	background: #fff;
}

.dm-hero-logo img {
	display: block;
	height: 36px;
	width: auto;
}

.dm-hero-logo-square {
	padding: 6px;
}

.dm-hero-logo-square img {
	height: 40px;
}

.dm-hero-wordmark {
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	font-weight: 700;
	color: #1d1917;
}

/* ---- Video thumbnails and the modal player clip their own content ---- */
.dm-video-card .dm-video-thumb,
.dm-short-card .dm-short-thumb,
.dm-modal-frame {
	position: relative;
	overflow: hidden;
}

/* ---- Booking panel with two buttons (Dwain 30-Sep: form OR calendar, never email) ---- */
.dm-booking-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
}

@media only screen and (max-width: 760px) {
	.dm-booking-actions {
		justify-content: flex-start;
	}
}

/* ---- Shared footer (Dwain 1-Oct): one footer on every page ----
   Lockup + social links, then the grouped sitemap (four columns), then the
   legal line. Like the header, everything it needs is written here, so it is
   the same on the funnel pages (no style.css there): the original .page-shell
   width and .page-footer type are restated. Existing tokens only: the
   .brand-link lockup, the .section-kicker heading, the .social-grid chip, the
   hairline border, #C5283D / #1d1917 / #4f4945 / #5d5651. */
.dm-footer,
.dm-footer *,
.dm-footer *:before,
.dm-footer *:after {
	box-sizing: border-box;
}

.dm-footer {
	width: min(1120px, calc(100% - 72px));
	margin: 28px auto 0;
	padding: 46px 0 70px;
	border-top: 1px solid rgba(38, 31, 27, 0.12);
	font-family: Poppins, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #5d5651;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.dm-footer-top {
	display: grid;
	gap: 22px;
	padding-bottom: 34px;
}

.dm-footer .dm-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1d1917;
	text-decoration: none;
}

.dm-footer-brand img {
	width: 34px;
	height: 34px;
}

.dm-footer-about p {
	margin: 14px 0 0;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #5d5651;
}

/* Social links: the same four columns as the sitemap below, so each one
   starts on a column edge (two rows of four). */
.dm-footer-social {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-items: start;
	gap: 10px 28px;
}

.dm-footer .dm-footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 7px 12px 7px 8px;
	border: 1px solid rgba(38, 31, 27, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.62);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	color: #1d1917;
	text-decoration: none;
}

.dm-footer-social img,
.dm-footer-social svg {
	flex: none;
	width: 24px;
	height: 24px;
}

.dm-footer-cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px 28px;
	padding: 34px 0;
	border-top: 1px solid rgba(38, 31, 27, 0.12);
}

.dm-footer-heading {
	margin: 0 0 12px;
	font-family: Poppins, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #C5283D;
}

.dm-footer-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-footer-group li {
	margin: 0 0 9px;
}

.dm-footer .dm-footer-group a {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: #4f4945;
	text-decoration: none;
}

.dm-footer .dm-footer-brand:hover,
.dm-footer .dm-footer-brand:focus,
.dm-footer .dm-footer-group a:hover,
.dm-footer .dm-footer-group a:focus {
	color: #C5283D;
	text-decoration: none;
}

.dm-footer .dm-footer-social a:hover,
.dm-footer .dm-footer-social a:focus {
	border-color: #C5283D;
	color: #C5283D;
	text-decoration: none;
}

.dm-footer-legal {
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid rgba(38, 31, 27, 0.12);
	font-family: Poppins, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #5d5651;
}

.dm-footer-legal span {
	color: #C5283D;
}

/* Homepage: line the footer up with the original .profile-wrap content edge. */
.profile-content .dm-footer {
	width: auto;
	max-width: 1240px;
	margin-top: 0;
	padding-right: 54px;
	padding-left: 54px;
}

@media only screen and (max-width: 1100px) {
	.profile-content .dm-footer {
		padding-right: 34px;
		padding-left: 34px;
	}
}

@media only screen and (max-width: 900px) {
	.dm-footer {
		width: min(100% - 40px, 1120px);
	}
}

@media only screen and (max-width: 801px) {
	.profile-content .dm-footer {
		padding-right: 22px;
		padding-left: 22px;
	}
}

/* Under 1100px a column is narrower than the longest social link: they wrap
   in a row instead. */
@media only screen and (max-width: 1100px) {
	.dm-footer-social {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
}

/* The Blog group (latest posts) takes a full row under the four columns, so
   the long titles stay on one line: two columns of links, on the first and
   third column edges. */
.dm-footer-group-wide {
	grid-column: 1 / -1;
}

.dm-footer-group-wide ul {
	columns: 2;
	column-gap: 28px;
}

.dm-footer-group-wide li {
	break-inside: avoid;
}

@media only screen and (max-width: 760px) {
	.dm-footer-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dm-footer-group-wide ul {
		columns: 1;
	}
}

/* Phones: everything stays in two columns. The social links stack the handle
   under the platform name so two fit side by side. */
@media only screen and (max-width: 520px) {
	.dm-footer-cols {
		gap: 30px 20px;
	}

	.dm-footer-social {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: stretch;
		gap: 10px 20px;
	}

	.dm-footer .dm-footer-social a {
		min-width: 0;
		padding-right: 8px;
		white-space: normal;
	}

	.dm-footer-social-label {
		min-width: 0;
	}

	.dm-footer-social-label span {
		display: block;
		font-size: 11px;
		font-weight: 500;
		overflow-wrap: anywhere;
	}
}

/* ---- Balanced headings + paragraph rhythm (Dwain 30-Sep, "centre balance") ----
   Balanced wrapping evens out heading lines, so a short last word ("AI.",
   "do.") never sits alone on its own line. Browsers without support wrap as
   before. Consecutive paragraphs in the homepage sections ran together with
   no gap; they get the same rhythm as the inner pages. */
.site-hero h1,
.page-hero h1,
.profile-section h2,
.content-section h2,
.section-heading h2,
.page-card h3,
.detail-card h3,
.feature-panel h3 {
	text-wrap: balance;
}

.profile-section p + p {
	margin-top: 14px;
}

/* ---- Social funnel: /links + offer landing pages (Dwain 30-Sep) ----
   Standalone marketing pages (no Bootstrap, no site header). One narrow
   centred column; dark top, light body; one red call to action repeated.
   Site tokens only: #C5283D, #1d1917, #4f4945, #f7f4ef, 'Playfair Display',
   Poppins. */
.dm-links-page,
.dm-f-page {
	margin: 0;
	min-height: 100vh;
	font-family: Poppins, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

.dm-links-page *,
.dm-links-page *:before,
.dm-links-page *:after,
.dm-f-page *,
.dm-f-page *:before,
.dm-f-page *:after {
	box-sizing: border-box;
}

/* /links: top of funnel */
.dm-links-page {
	background: #0c0c10;
	color: #fff;
}

.dm-links-page:before {
	content: "";
	position: fixed;
	inset: -40px;
	z-index: 0;
	background:
		linear-gradient(180deg, rgba(12, 12, 16, 0.4), rgba(12, 12, 16, 0.94) 50%),
		url(../images/profile/business-friendly-dwain-browne.JPG) no-repeat 66% 18% / cover;
	filter: blur(22px) saturate(120%);
	pointer-events: none;
}

.dm-links {
	position: relative;
	z-index: 1;
	width: min(480px, calc(100% - 32px));
	margin: 0 auto;
	padding: max(36px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
	text-align: center;
}

.dm-links-avatar {
	display: block;
	width: 76px;
	height: 76px;
	margin: 0 auto 12px;
	border: 3px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.dm-links-welcome {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(197, 40, 61, 0.92);
	font-size: 12px;
	font-weight: 600;
}

.dm-links-welcome[hidden] {
	display: none;
}

.dm-links h1 {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(22px, 6vw, 26px);
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
}

.dm-links-why {
	margin: 10px auto 0;
	max-width: 400px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: #fff;
	text-wrap: balance;
}

.dm-links-sub {
	margin: 8px auto 0;
	max-width: 380px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	text-wrap: balance;
}

.dm-paths {
	display: grid;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.dm-path-link {
	display: grid;
	gap: 4px;
	padding: 18px 18px 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
	color: #1d1917;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dm-path-link:hover,
.dm-path-link:focus {
	color: #1d1917;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 22px 46px rgba(0, 0, 0, 0.38);
}

/* The core paid offer stands out. */
.dm-path-solo .dm-path-link {
	outline: 3px solid #C5283D;
	outline-offset: -3px;
}

.dm-path-stage {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C5283D;
}

.dm-path-name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.dm-path-hook {
	font-size: 14px;
	line-height: 1.55;
	color: #4f4945;
}

.dm-path-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.dm-path-price {
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	font-weight: 700;
}

.dm-path-btn {
	padding: 10px 16px;
	border-radius: 10px;
	background: #C5283D;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Offer landing pages */
.dm-f-page {
	background: #f7f4ef;
	color: #1d1917;
}

/* Room for the sticky buy bar, inside the dark footer band so no cream strip
   shows under it. */
.dm-f-page .dm-funnel-foot {
	padding-bottom: 88px;
}

.dm-f-wrap {
	width: min(720px, calc(100% - 40px));
	margin: 0 auto;
}

.dm-f-top {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	padding: 16px 20px;
}

.dm-f-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

.dm-f-brand:hover,
.dm-f-brand:focus {
	color: #fff;
	text-decoration: none;
}

.dm-f-brand img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

/* Top padding = the original .page-hero's (124px, 132px over 520px, 148px
   over 900px), so the eyebrow clears the fixed header as on the main pages. */
.dm-f-hero {
	padding: 124px 0 48px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(197, 40, 61, 0.28), transparent 60%),
		#0c0c10;
	color: #fff;
	text-align: center;
}

.dm-f-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #f26477;
}

.dm-f-hero h1 {
	margin: 0 auto;
	max-width: 680px;
	font-family: 'Playfair Display', serif;
	font-size: clamp(32px, 6vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	text-wrap: balance;
}

.dm-f-sub {
	margin: 18px auto 0;
	max-width: 600px;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	text-wrap: balance;
}

.dm-f-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 30px 0 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: #1d1917 center / cover no-repeat;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.dm-f-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.dm-f-yt {
	cursor: pointer;
}

.dm-f-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #C5283D;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.dm-f-play:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-width: 13px 0 13px 22px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	transform: translate(-50%, -50%);
}

.dm-f-yt:hover .dm-f-play,
.dm-f-yt:focus .dm-f-play {
	transform: translate(-50%, -50%) scale(1.08);
}

.dm-f-poster {
	background-image:
		linear-gradient(180deg, rgba(12, 12, 16, 0) 45%, rgba(12, 12, 16, 0.85)),
		url(../images/profile/business-friendly-dwain-browne.JPG);
	background-position: center, 66% 22%;
	background-size: cover, cover;
}

.dm-f-poster-name {
	position: absolute;
	right: 20px;
	bottom: 16px;
	left: 20px;
	font-family: 'Playfair Display', serif;
	font-size: clamp(22px, 4vw, 30px);
	font-weight: 700;
	text-align: left;
	color: #fff;
}

.dm-f-cta-block {
	margin-top: 26px;
}

.dm-f-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 440px;
	min-height: 58px;
	margin: 0 auto;
	padding: 14px 22px;
	border-radius: 12px;
	background: #C5283D;
	box-shadow: 0 12px 28px rgba(197, 40, 61, 0.35);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.dm-f-cta:hover,
.dm-f-cta:focus {
	background: #a8202f;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.dm-f-cta-note {
	margin: 10px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.66);
	text-align: center;
}

.dm-f-body .dm-f-cta-note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6f645d;
}

.dm-f-body .dm-f-offer .dm-f-eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.5;
	color: #f26477;
}

.dm-f-body {
	padding: 16px 0 24px;
}

.dm-f-sec {
	padding: 40px 0;
	border-bottom: 1px solid rgba(38, 31, 27, 0.12);
}

.dm-f-body h2 {
	margin: 0 0 18px;
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px, 5vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.dm-f-body p {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.7;
	color: #4f4945;
}

.dm-f-checks {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-f-checks li {
	position: relative;
	padding-left: 34px;
	font-size: 17px;
	line-height: 1.55;
}

.dm-f-checks li:before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #C5283D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.dm-f-not {
	margin-top: 20px !important;
	padding: 14px 16px;
	border-left: 3px solid #C5283D;
	border-radius: 0 8px 8px 0;
	background: rgba(197, 40, 61, 0.06);
	font-size: 15px !important;
}

.dm-f-stack {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-f-stack li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 14px;
	padding: 18px;
	border: 1px solid rgba(38, 31, 27, 0.12);
	border-radius: 12px;
	background: #fff;
}

.dm-f-num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(197, 40, 61, 0.1);
	font-size: 16px;
	font-weight: 700;
	color: #C5283D;
}

.dm-f-stack h3 {
	margin: 2px 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	text-wrap: balance;
}

.dm-f-stack p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.dm-f-teacher {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.dm-f-teacher img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.dm-f-teacher h2 {
	margin-bottom: 10px;
}

.dm-f-offer {
	margin: 40px 0;
	padding: 32px 24px;
	border-radius: 18px;
	background: #0c0c10;
	box-shadow: 0 24px 60px rgba(31, 24, 20, 0.25);
	color: #fff;
	text-align: center;
}

.dm-f-price {
	margin: 0 !important;
	font-family: 'Playfair Display', serif;
	font-size: 56px !important;
	font-weight: 700;
	line-height: 1 !important;
	color: #fff !important;
}

.dm-f-anchor {
	margin: 10px auto 0 !important;
	max-width: 420px;
	font-size: 14px !important;
	color: rgba(255, 255, 255, 0.72) !important;
}

.dm-f-offer .dm-f-checks {
	width: fit-content;
	max-width: 100%;
	margin: 24px auto;
	text-align: left;
}

.dm-f-offer .dm-f-checks li {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
}

.dm-f-body .dm-f-offer .dm-f-cta-note {
	color: rgba(255, 255, 255, 0.66);
}

.dm-f-guarantee {
	margin: 18px auto 0 !important;
	max-width: 440px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14px !important;
	color: rgba(255, 255, 255, 0.82) !important;
}

.dm-f-downsell {
	margin: 0 0 8px;
	padding: 24px;
	border: 1px dashed rgba(197, 40, 61, 0.45);
	border-radius: 16px;
	background: #fff;
	text-align: center;
}

.dm-f-body .dm-f-downsell h2 {
	margin-bottom: 8px;
	font-size: 24px;
}

.dm-f-body .dm-f-downsell p {
	margin-bottom: 16px;
	font-size: 16px;
}

.dm-f-cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border: 2px solid #C5283D;
	border-radius: 12px;
	color: #C5283D;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dm-f-cta-secondary:hover,
.dm-f-cta-secondary:focus {
	background: #C5283D;
	color: #fff;
	text-decoration: none;
}

.dm-f-faq {
	border-bottom: 1px solid rgba(38, 31, 27, 0.12);
}

.dm-f-faq summary {
	position: relative;
	padding: 16px 32px 16px 0;
	font-size: 17px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.dm-f-faq summary::-webkit-details-marker {
	display: none;
}

.dm-f-faq summary:after {
	content: "+";
	position: absolute;
	top: 12px;
	right: 4px;
	font-size: 24px;
	font-weight: 400;
	color: #C5283D;
}

.dm-f-faq[open] summary:after {
	content: "\2212";
}

.dm-f-faq p {
	margin: 0 0 16px;
	font-size: 16px;
}

.dm-f-final {
	padding: 48px 0 12px;
	text-align: center;
}

.dm-f-final p {
	margin-bottom: 22px;
}

.dm-f-disclaimer {
	margin-top: 28px !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	color: #8a7f78 !important;
	text-align: center;
}

.dm-f-back {
	margin-top: 10px !important;
	font-size: 14px !important;
	text-align: center;
}

.dm-f-back a {
	color: #C5283D;
}

.dm-f-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px max(12px, env(safe-area-inset-bottom));
	border-top: 1px solid rgba(38, 31, 27, 0.12);
	background: rgba(247, 244, 239, 0.82);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	transform: translateY(110%);
	transition: transform 0.25s ease;
}

.dm-f-sticky.dm-f-sticky-on {
	transform: none;
}

.dm-f-sticky-label {
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
	color: #4f4945;
}

.dm-f-sticky-label strong {
	display: block;
	color: #1d1917;
}

.dm-f-cta.dm-f-cta-small {
	flex: none;
	width: auto;
	min-height: 46px;
	margin: 0;
	padding: 10px 16px;
	font-size: 12px;
	box-shadow: none;
}

@media only screen and (min-width: 521px) {
	.dm-f-hero {
		padding-top: 132px;
	}
}

@media only screen and (min-width: 901px) {
	.dm-f-hero {
		padding-top: 148px;
	}
}

@media only screen and (min-width: 760px) {
	.dm-f-sticky {
		right: 50%;
		left: auto;
		bottom: 16px;
		width: min(640px, calc(100% - 40px));
		padding: 10px 10px 10px 20px;
		border: 1px solid rgba(38, 31, 27, 0.12);
		border-radius: 14px;
		box-shadow: 0 14px 34px rgba(31, 24, 20, 0.18);
		transform: translate(50%, 140%);
	}

	.dm-f-sticky.dm-f-sticky-on {
		transform: translate(50%, 0);
	}
}

@media only screen and (max-width: 560px) {
	.dm-f-teacher {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.dm-f-teacher img {
		width: 72px;
		height: 72px;
	}
}

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

	.dm-f-stack li {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 12px;
		padding: 16px;
	}

	.dm-f-num {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-f-sticky,
	.dm-path-link,
	.dm-f-cta {
		transition: none;
	}
}

/* ---- Social visitor bar (Dwain 30-Sep) ----
   A phone visitor from TikTok, YouTube or Instagram who lands on an inner page
   (a link in a video description, say) stays on that page; this small frosted
   bar points them to the link-in-bio store. Closing it hides it for the
   session. Built by site.js only when <html data-dm-social> is set. */
.dm-social-bar {
	position: fixed;
	right: 12px;
	bottom: max(12px, env(safe-area-inset-bottom));
	left: 12px;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 16px;
	border: 1px solid rgba(38, 31, 27, 0.12);
	border-radius: 14px;
	background: rgba(247, 244, 239, 0.8);
	box-shadow: 0 14px 34px rgba(31, 24, 20, 0.2);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	font-family: Poppins, sans-serif;
}

.dm-social-bar-link {
	flex: 1;
	padding: 8px 0;
	font-size: 13px;
	line-height: 1.4;
	color: #1d1917;
	text-decoration: none;
}

.dm-social-bar-link strong {
	color: #C5283D;
}

.dm-social-bar-link:hover,
.dm-social-bar-link:focus {
	color: #1d1917;
	text-decoration: none;
}

.dm-social-bar-close {
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: #4f4945;
	cursor: pointer;
}

/* ---- Funnel pages with the shared header + footer (Dwain 1-Oct) ----
   The fixed header replaces the old small brand bar (dm-f-top). The /links
   column starts below the header. The footer is the shared one in its dark
   variant (below), above /links' blurred photo.
   The original style.css hides the page scrollbar on every other page; the
   funnel pages do the same, so the header has the same width (no 15px
   scrollbar gutter) and the logo sits on the same x. */
html[data-dm-funnel]::-webkit-scrollbar {
	display: none;
}

.dm-links-page .dm-links {
	padding-top: calc(var(--dm-header-h) + 32px);
}

.dm-funnel-foot {
	position: relative;
	z-index: 1;
	background: #0c0c10;
}

/* Dark footer on the funnel pages only (same markup and layout). The pages
   are dark, so the cream band clashed. Tokens already on these pages:
   #0c0c10, white at 70%, and #f26477, the accent they use for small text on
   dark (.dm-f-eyebrow); #C5283D on #0c0c10 is only 3.5:1. */
.dm-funnel .dm-footer {
	margin-top: 0;
	border-top: 0;
	color: rgba(255, 255, 255, 0.7);
}

.dm-funnel .dm-footer .dm-footer-brand {
	color: #fff;
}

.dm-funnel .dm-footer-about p,
.dm-funnel .dm-footer .dm-footer-group a {
	color: rgba(255, 255, 255, 0.7);
}

.dm-funnel .dm-footer .dm-footer-social a {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.dm-funnel .dm-footer-social svg circle {
	fill: #fff;
}

.dm-funnel .dm-footer-social svg path {
	fill: #0c0c10;
}

.dm-funnel .dm-footer-cols,
.dm-funnel .dm-footer-legal {
	border-top-color: rgba(255, 255, 255, 0.12);
}

.dm-funnel .dm-footer-heading,
.dm-funnel .dm-footer-legal span {
	color: #f26477;
}

.dm-funnel .dm-footer-legal {
	color: rgba(255, 255, 255, 0.6);
}

.dm-funnel .dm-footer .dm-footer-brand:hover,
.dm-funnel .dm-footer .dm-footer-brand:focus,
.dm-funnel .dm-footer .dm-footer-group a:hover,
.dm-funnel .dm-footer .dm-footer-group a:focus {
	color: #f26477;
}

.dm-funnel .dm-footer .dm-footer-social a:hover,
.dm-funnel .dm-footer .dm-footer-social a:focus {
	border-color: #f26477;
	color: #f26477;
}

/* ---- Turnstile human check on the contact form: takes no room unless Cloudflare needs a click ---- */
.dm-turnstile:not(:empty) {
	margin: 4px 0 14px;
}

/* ---- /links on wide screens (Dwain 1-Oct) ----
   The phone page (one narrow column of cards over the blurred photo) is
   unchanged. From 1100px up the same content becomes a full page: a split hero
   with the portrait shown sharp, the offers as a numbered three-column grid of
   glass cards, "Why listen to me" on a cream panel, and a closing call to
   action. Everything marked dm-lx exists for this layout only, and carries
   the hidden attribute so a browser holding an older copy of this file never
   shows it unstyled; the first rule in the wide block lifts it.
   Tokens are the ones these pages already use: #C5283D, #f26477 (small text on
   dark), #0c0c10, #1d1917, #4f4945, #f7f4ef, 'Playfair Display', Poppins. */
@media only screen and (max-width: 1099.98px) {

	.dm-links-page .dm-lx {
		display: none !important;
	}
}

@media only screen and (min-width: 1100px) {

	/* Lifts the hidden attribute. Kept to one class so every rule below can
	   still choose flex or grid. */
	.dm-lx {
		display: block;
	}

	/* Backdrop: soft colour instead of the blurred photo, plus a faint grain. */
	.dm-links-page {
		background: #09090c;
	}

	.dm-links-page:before {
		inset: 0;
		filter: none;
		background:
			radial-gradient(62vw 44vw at 86% -8%, rgba(197, 40, 61, 0.36), transparent 64%),
			radial-gradient(46vw 40vw at -8% 30%, rgba(74, 63, 160, 0.26), transparent 66%),
			radial-gradient(54vw 38vw at 58% 112%, rgba(197, 40, 61, 0.18), transparent 62%),
			#09090c;
	}

	.dm-links-page:after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 0;
		opacity: 0.5;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
		pointer-events: none;
	}

	.dm-links-page .dm-links {
		width: min(1120px, calc(100% - 72px));
		padding: var(--dm-header-h) 0 0;
		text-align: left;
	}

	.dm-links a:focus-visible {
		outline: 2px solid #f26477;
		outline-offset: 4px;
	}

	/* Hero */
	.dm-links-head {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
		gap: 72px;
		min-height: min(820px, calc(100vh - var(--dm-header-h)));
		padding: 44px 0 64px;
	}

	/* Fine grid lines behind the hero, fading out toward the edges. */
	.dm-links-head:before {
		content: "";
		position: absolute;
		inset: 0 -36px;
		z-index: -1;
		background:
			linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 76px 76px,
			linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 76px 76px;
		-webkit-mask-image: radial-gradient(ellipse 58% 66% at 46% 42%, #000 18%, transparent 72%);
		mask-image: radial-gradient(ellipse 58% 66% at 46% 42%, #000 18%, transparent 72%);
		pointer-events: none;
	}

	.dm-links-avatar {
		display: none;
	}

	.dm-links-welcome {
		margin-bottom: 18px;
	}

	.dm-links-kicker {
		display: flex;
		align-items: center;
		gap: 14px;
		margin: 0 0 22px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.78);
	}

	.dm-links-kicker:before {
		content: "";
		width: 44px;
		height: 1px;
		background: #f26477;
	}

	.dm-links h1 {
		font-size: clamp(42px, 3.9vw, 58px);
		line-height: 1.06;
		letter-spacing: -0.015em;
		text-wrap: balance;
	}

	.dm-links h1 span {
		display: block;
		margin-top: 0.14em;
		padding-bottom: 0.08em;
		font-style: italic;
		font-weight: 500;
		background: linear-gradient(92deg, #ffb3bd, #f26477 55%, #e0465c);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.dm-links-why {
		margin: 22px 0 0;
		max-width: 540px;
		font-size: 17px;
		font-weight: 400;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.8);
		text-wrap: pretty;
	}

	.dm-links-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		margin-top: 30px;
	}

	.dm-lx-btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 16px 22px;
		border: 1px solid #C5283D;
		border-radius: 12px;
		background: linear-gradient(180deg, #d83249, #C5283D);
		box-shadow: 0 18px 44px rgba(197, 40, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		white-space: nowrap;
		color: #fff;
		text-decoration: none;
		transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
	}

	.dm-lx-btn:after {
		content: "\2192";
		font-size: 16px;
		line-height: 1;
		transition: transform 0.25s ease;
	}

	.dm-lx-btn:hover,
	.dm-lx-btn:focus {
		color: #fff;
		text-decoration: none;
		transform: translateY(-2px);
		box-shadow: 0 24px 54px rgba(197, 40, 61, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	}

	.dm-lx-btn:hover:after,
	.dm-lx-btn:focus:after {
		transform: translateX(4px);
	}

	.dm-lx-btn-ghost {
		border-color: rgba(255, 255, 255, 0.24);
		background: rgba(255, 255, 255, 0.05);
		box-shadow: none;
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	.dm-lx-btn-ghost:hover,
	.dm-lx-btn-ghost:focus {
		border-color: rgba(255, 255, 255, 0.5);
		background: rgba(255, 255, 255, 0.1);
		box-shadow: none;
	}

	.dm-links-facts {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
		margin: 40px 0 0;
		padding-top: 26px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.dm-links-facts dt {
		font-family: 'Playfair Display', serif;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.15;
		color: #fff;
	}

	.dm-links-facts dd {
		margin: 8px 0 0;
		font-size: 13px;
		line-height: 1.55;
		color: rgba(255, 255, 255, 0.64);
	}

	/* Portrait */
	.dm-links-portrait {
		position: relative;
		justify-self: end;
		width: min(100%, 452px);
		margin: 0 18px 0 0;
	}

	.dm-links-portrait:before {
		content: "";
		position: absolute;
		inset: 20px -20px -20px 20px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 30px;
	}

	.dm-links-portrait:after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 28px;
		background: linear-gradient(180deg, transparent 52%, rgba(9, 9, 12, 0.62));
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
		pointer-events: none;
	}

	.dm-links-portrait img {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		border-radius: 28px;
		object-fit: cover;
		object-position: 62% 12%;
		box-shadow: 0 50px 110px rgba(0, 0, 0, 0.62);
	}

	.dm-links-portrait figcaption {
		position: absolute;
		bottom: 34px;
		left: -44px;
		z-index: 1;
		display: grid;
		gap: 4px;
		max-width: 300px;
		padding: 18px 22px;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 18px;
		background: rgba(14, 14, 19, 0.66);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		backdrop-filter: blur(20px) saturate(160%);
	}

	.dm-links-portrait figcaption strong {
		font-family: 'Playfair Display', serif;
		font-size: 21px;
		font-weight: 700;
		line-height: 1.2;
	}

	.dm-links-portrait figcaption span {
		font-size: 12.5px;
		line-height: 1.55;
		color: rgba(255, 255, 255, 0.72);
	}

	.dm-links-live {
		position: absolute;
		top: 28px;
		right: -26px;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 10px 16px 10px 14px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 999px;
		background: rgba(14, 14, 19, 0.7);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		backdrop-filter: blur(18px) saturate(160%);
		font-size: 12px;
		font-weight: 600;
		color: #fff;
		text-decoration: none;
		transition: border-color 0.25s ease, transform 0.25s ease;
	}

	.dm-links-live:hover,
	.dm-links-live:focus {
		border-color: #f26477;
		color: #fff;
		text-decoration: none;
		transform: translateY(-2px);
	}

	.dm-links-live i {
		position: relative;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #f26477;
	}

	.dm-links-live i:after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: #f26477;
		animation: dm-lx-pulse 2.2s ease-out infinite;
	}

	/* The offers */
	.dm-links-paths {
		padding-top: 32px;
	}

	.dm-links-sechead {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 48px;
		margin-bottom: 40px;
	}

	.dm-lx-eyebrow {
		margin: 0 0 14px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: #f26477;
	}

	.dm-links-sechead h2,
	.dm-links-final h2 {
		margin: 0;
		font-family: 'Playfair Display', serif;
		font-size: clamp(36px, 3.4vw, 46px);
		font-weight: 700;
		line-height: 1.12;
		letter-spacing: -0.01em;
		text-wrap: balance;
	}

	.dm-links-sechead > p {
		flex: none;
		margin: 0 0 8px;
		font-size: 15px;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.66);
	}

	.dm-paths {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px;
		margin: 0;
	}

	.dm-path {
		display: flex;
	}

	.dm-path-link {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		padding: 30px 28px 26px;
		overflow: hidden;
		border: 1px solid rgba(255, 255, 255, 0.13);
		border-radius: 22px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.028));
		box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		color: #fff;
		transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease;
	}

	/* The light that follows the pointer (--mx / --my set by the page script). */
	.dm-path-link:before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(242, 100, 119, 0.2), transparent 62%);
		opacity: 0;
		transition: opacity 0.35s ease;
		pointer-events: none;
	}

	.dm-path-link > * {
		position: relative;
	}

	.dm-path-link:hover,
	.dm-path-link:focus {
		border-color: rgba(242, 100, 119, 0.6);
		color: #fff;
		transform: translateY(-6px);
		box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}

	.dm-path-link:hover:before,
	.dm-path-link:focus:before {
		opacity: 1;
	}

	.dm-path-link .dm-path-num {
		position: absolute;
		top: 16px;
		right: 24px;
		font-family: 'Playfair Display', serif;
		font-size: 52px;
		font-weight: 700;
		line-height: 1;
		color: transparent;
		-webkit-text-stroke: 1px rgba(255, 255, 255, 0.24);
		transition: -webkit-text-stroke-color 0.35s ease;
	}

	.dm-path-link:hover .dm-path-num,
	.dm-path-link:focus .dm-path-num {
		-webkit-text-stroke-color: rgba(242, 100, 119, 0.8);
	}

	.dm-path-stage {
		min-height: 2.9em;
		padding-right: 76px;
		line-height: 1.45;
		letter-spacing: 0.14em;
		color: #f26477;
	}

	.dm-path-name {
		margin-top: 18px;
		font-family: 'Playfair Display', serif;
		font-size: 25px;
		line-height: 1.2;
		text-wrap: balance;
	}

	.dm-path-hook {
		margin: 12px 0 28px;
		font-size: 14.5px;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.72);
	}

	.dm-path-foot {
		margin-top: auto;
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.dm-path-price {
		font-size: 30px;
		line-height: 1;
	}

	.dm-path-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 12px 16px;
		background: linear-gradient(180deg, #d83249, #C5283D);
		box-shadow: 0 12px 28px rgba(197, 40, 61, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	}

	.dm-path-btn:after {
		content: "\2192";
		font-size: 14px;
		line-height: 1;
		transition: transform 0.3s ease;
	}

	.dm-path-link:hover .dm-path-btn:after,
	.dm-path-link:focus .dm-path-btn:after {
		transform: translateX(4px);
	}

	/* The core paid offer stands out: a red wash and glow instead of the phone outline. */
	.dm-path-solo .dm-path-link {
		outline: 0;
		border-color: rgba(242, 100, 119, 0.72);
		background: linear-gradient(162deg, rgba(197, 40, 61, 0.42), rgba(197, 40, 61, 0.1) 46%, rgba(255, 255, 255, 0.03));
		box-shadow: 0 34px 90px rgba(197, 40, 61, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
	}

	.dm-path-solo .dm-path-stage {
		color: #ffb3bd;
	}

	.dm-path-solo .dm-path-link .dm-path-num {
		-webkit-text-stroke-color: rgba(255, 255, 255, 0.42);
	}

	/* Why listen to me: cream panel, ink text, so the page has a change of pace. */
	.dm-links-teacher {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: center;
		gap: 60px;
		margin-top: 112px;
		padding: 56px;
		border-radius: 32px;
		background: #f7f4ef;
		box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5);
		color: #1d1917;
	}

	.dm-links-teacher-photo {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		border-radius: 22px;
		object-fit: cover;
		object-position: 22% 50%;
		box-shadow: 0 30px 60px rgba(31, 24, 20, 0.28);
	}

	.dm-links-teacher .dm-lx-eyebrow {
		color: #C5283D;
	}

	.dm-links-teacher h2 {
		margin: 0;
		font-family: 'Playfair Display', serif;
		font-size: clamp(28px, 2.5vw, 34px);
		font-weight: 700;
		line-height: 1.22;
		text-wrap: pretty;
	}

	.dm-links-teacher h2 + p {
		margin-top: 22px;
	}

	.dm-links-teacher p {
		margin: 14px 0 0;
		font-size: 16px;
		line-height: 1.75;
		color: #4f4945;
	}

	.dm-lx-built {
		margin-top: 34px;
		padding-top: 26px;
		border-top: 1px solid rgba(38, 31, 27, 0.14);
	}

	.dm-links-teacher .dm-lx-built p {
		margin: 0 0 14px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.16em;
		line-height: 1.4;
		text-transform: uppercase;
		color: #4f4945;
	}

	.dm-lx-built ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dm-lx-built a {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		height: 46px;
		padding: 0 13px;
		border: 1px solid rgba(38, 31, 27, 0.14);
		border-radius: 12px;
		background: #fff;
		font-size: 13.5px;
		font-weight: 600;
		color: #1d1917;
		text-decoration: none;
		transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	}

	.dm-lx-built a:hover,
	.dm-lx-built a:focus {
		border-color: #C5283D;
		color: #1d1917;
		text-decoration: none;
		transform: translateY(-2px);
		box-shadow: 0 12px 26px rgba(31, 24, 20, 0.12);
	}

	.dm-lx-built img {
		display: block;
		width: auto;
		height: 26px;
	}

	.dm-lx-built img.dm-lx-built-icon {
		height: 24px;
		border-radius: 6px;
	}

	/* Closing call to action */
	.dm-links-final {
		position: relative;
		margin: 0 auto;
		padding: 120px 0 128px;
		max-width: 820px;
		text-align: center;
	}

	.dm-links-final:before {
		content: "";
		position: absolute;
		inset: 40px -36px 20px;
		z-index: -1;
		background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(197, 40, 61, 0.26), transparent 70%);
		pointer-events: none;
	}

	.dm-links-final p {
		margin: 20px 0 0;
		font-size: 18px;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.78);
	}

	.dm-links-final .dm-links-actions {
		justify-content: center;
	}
}

@keyframes dm-lx-pulse {
	from {
		opacity: 0.7;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(3.2);
	}
}

/* Wide screens, motion allowed, script running (it sets dm-lx-anim): the hero
   eases in on load and each section as it scrolls into view. */
@media only screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) {

	html[data-dm-funnel]:has(.dm-links-page) {
		scroll-behavior: smooth;
	}

	.dm-lx-anim .dm-links-intro > *,
	.dm-lx-anim .dm-links-portrait {
		animation: dm-lx-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.dm-lx-anim .dm-links-intro > h1 {
		animation-delay: 0.08s;
	}

	.dm-lx-anim .dm-links-intro > .dm-links-why {
		animation-delay: 0.16s;
	}

	.dm-lx-anim .dm-links-intro > .dm-links-actions {
		animation-delay: 0.24s;
	}

	.dm-lx-anim .dm-links-intro > .dm-links-facts {
		animation-delay: 0.32s;
	}

	.dm-lx-anim .dm-links-portrait {
		animation-delay: 0.2s;
	}

	.dm-lx-anim [data-lx-reveal] {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--lx-d, 0ms), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--lx-d, 0ms);
	}

	.dm-lx-anim [data-lx-reveal].is-in {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-links-live i:after {
		animation: none;
	}
}

@keyframes dm-lx-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}