/**
 * Doctor AK Portal — Home page ([dak_home]).
 *
 * Loaded together with doctor-ak-auth.css (tokens, .dak-button*, .dak-eyebrow,
 * the html[data-theme='dark']/.dak-dashboard[data-theme='dark'] dark-mode
 * overrides), doctor-ak-directory.css (.dak-directory-header/-grid,
 * service/doctor cards) and doctor-ak-featured-doctors.css (slider). Every
 * color here reads from the shared --dak-* tokens so the public light/dark
 * toggle (assets/js/doctor-ak-public-theme-toggle.js) re-colors it for free.
 *
 * Editorial redesign pass: a serif display face for headings (system serif —
 * no external font request), pill-shaped buttons/eyebrows, a soft gradient
 * hero, and boxed tinted panels for a few sections (matching the existing
 * "colored panel inside the container" pattern .dak-home-cta and
 * .dak-home-testimonial-band already used, rather than full-bleed bands).
 * Everything here is scoped under .dak-home so it never leaks into the
 * dashboards, auth pages or the standalone directory pages that share the
 * same button/card components.
 */

.dak-home {
	margin: 0 auto !important;
	padding: 0 1.5rem var( --dak-space-8 ) !important;
}

.dak-home-serif {
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif !important;
}

.dak-home h1,
.dak-home .dak-directory-header h2,
.dak-home-testimonial-card p {
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif !important;
}

.dak-home .dak-directory-header h2 {
	font-size: var( --dak-text-2xl ) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var( --dak-text ) !important;
	margin: 0.4rem 0 0.6rem !important;
}

/* Pill-shaped buttons everywhere on this page (hero, cards, CTA) — scoped
   here rather than on the shared .dak-button so dashboards/auth/directory
   keep their existing rounded-rect buttons. */
.dak-home .dak-button {
	border-radius: 999px !important;
}

/* A subtle gradient + top highlight instead of a flat fill, for a touch of
   depth on the page's main calls to action — just the background/shadow,
   nothing that changes size or layout. */
.dak-home .dak-button-primary {
	background: linear-gradient( 180deg, color-mix( in srgb, var( --dak-primary ) 100%, white 12% ) 0%, var( --dak-primary ) 100% ) !important;
	box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.35 ) inset, 0 6px 16px rgba( 20, 60, 40, 0.18 ) !important;
}

.dak-home .dak-button-primary:hover {
	background: linear-gradient( 180deg, var( --dak-primary ) 0%, var( --dak-primary-dark ) 100% ) !important;
	box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.3 ) inset, 0 8px 20px rgba( 20, 60, 40, 0.22 ) !important;
}

.dak-home-section {
	margin-top: var( --dak-space-8 ) !important;
}

/* Offsets anchor-scrolling (header nav's Videos/Clinics links) so the
   section title doesn't land underneath the sticky header. */
#dak-home-videos,
#dak-home-clinics {
	scroll-margin-top: 96px !important;
}

.dak-home-section-footer {
	display: flex !important;
	justify-content: center !important;
	margin-top: var( --dak-space-5 ) !important;
}

/* Hero */

.dak-home-hero {
	margin-top: var( --dak-space-6 ) !important;
	padding: var( --dak-space-7 ) var( --dak-space-6 ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	/* Layered backgrounds (not extra elements) for a soft depth/glow effect
	   — two large, low-opacity radial "light" blobs sit under the existing
	   top-to-bottom tint fade. Purely a background value, so it can't affect
	   layout, overlap content or need z-index. */
	background:
		radial-gradient( 640px 360px at 12% -10%, rgba( 255, 255, 255, 0.55 ) 0%, rgba( 255, 255, 255, 0 ) 60% ),
		radial-gradient( 520px 420px at 108% 15%, var( --dak-primary-tint ) 0%, rgba( 255, 255, 255, 0 ) 62% ),
		linear-gradient( 180deg, var( --dak-primary-tint ) 0%, var( --dak-bg-card ) 100% ) !important;
}

.dak-home-hero-grid {
	display: grid !important;
	grid-template-columns: 1fr 380px !important;
	gap: var( --dak-space-7 ) !important;
	align-items: stretch !important;
}

.dak-home-hero-copy h1 {
	font-size: 2.75rem !important;
	font-weight: 600 !important;
	line-height: 1.12 !important;
	margin: var( --dak-space-3 ) 0 var( --dak-space-3 ) !important;
	color: var( --dak-text ) !important;
}

.dak-home-hero-accent {
	font-style: italic !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-home-hero-copy > p {
	font-size: var( --dak-text-lg ) !important;
	color: var( --dak-muted ) !important;
	margin: 0 0 var( --dak-space-5 ) !important;
	max-width: 46ch !important;
}

.dak-home-hero-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var( --dak-space-3 ) !important;
}

.dak-button-lg {
	padding: 0.95rem 1.75rem !important;
	font-size: var( --dak-text-md ) !important;
}

.dak-home-hero-actions .dak-button svg,
.dak-home-cta .dak-button svg {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 auto !important;
}

/* Hero floating doctor card */

.dak-home-hero-card {
	position: relative !important;
	overflow: hidden !important;
	align-self: center !important;
	background: linear-gradient( 155deg, var( --dak-bg-card ) 0%, var( --dak-primary-tint ) 100% ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	/* Layered shadow: the existing lift shadow, plus a thin inner highlight
	   along the top edge for a soft glass/3D bevel. */
	box-shadow: var( --dak-shadow-lg ), 0 1px 0 rgba( 255, 255, 255, 0.6 ) inset !important;
	padding: var( --dak-space-5 ) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var( --dak-space-4 ) !important;
}

.dak-home-hero-card-doctor {
	display: flex !important;
	align-items: center !important;
	gap: var( --dak-space-3 ) !important;
}

.dak-home-hero-card-avatar {
	width: 52px !important;
	height: 52px !important;
	flex: 0 0 auto !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-primary-dark ) !important;
	font-weight: 700 !important;
	font-size: var( --dak-text-md ) !important;
	box-shadow: var( --dak-shadow ) !important;
}

.dak-home-hero-card-doctor div {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

.dak-home-hero-card-doctor strong {
	font-size: var( --dak-text-md ) !important;
	color: var( --dak-text ) !important;
}

.dak-home-hero-card-doctor span {
	font-size: var( --dak-text-sm ) !important;
	color: var( --dak-muted ) !important;
}

.dak-home-hero-card-stats {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: var( --dak-space-2 ) !important;
	padding-top: var( --dak-space-4 ) !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-home-hero-card-stats div {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}

.dak-home-hero-card-stats strong {
	font-size: var( --dak-text-lg ) !important;
	font-weight: 800 !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-home-hero-card-stats span {
	font-size: 0.68rem !important;
	color: var( --dak-muted ) !important;
	line-height: 1.3 !important;
}

.dak-home-hero-card-badge {
	align-self: flex-start !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3rem !important;
	padding: 0.3rem 0.75rem !important;
	border-radius: 999px !important;
	background: var( --dak-tint-success, var( --dak-primary-tint ) ) !important;
	color: var( --dak-tint-success-text, var( --dak-primary-dark ) ) !important;
	font-size: var( --dak-text-xs ) !important;
	font-weight: 700 !important;
}

/* Stats strip below the hero */

.dak-home-hero-stats-strip {
	margin-top: var( --dak-space-7 ) !important;
	padding-top: var( --dak-space-6 ) !important;
	border-top: 1px solid var( --dak-border ) !important;
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr ) !important;
	gap: var( --dak-space-4 ) !important;
}

.dak-home-hero-stat {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: var( --dak-space-1 ) !important;
}

.dak-home-hero-stat strong {
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif !important;
	font-size: var( --dak-text-2xl ) !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

.dak-home-hero-stat span {
	font-size: var( --dak-text-sm ) !important;
	color: var( --dak-muted ) !important;
	font-weight: 600 !important;
}

/* Hero visual — the video-tour teaser filling the hero's right column
   (falls back to the doctor spotlight card below when no video is set). */

.dak-home-hero-visual {
	position: relative !important;
	height: 100% !important;
	min-height: 340px !important;
	border-radius: var( --dak-radius-lg ) !important;
	overflow: hidden !important;
	background:
		radial-gradient( 420px 300px at 85% 0%, rgba( 255, 255, 255, 0.22 ) 0%, rgba( 255, 255, 255, 0 ) 60% ),
		linear-gradient( 135deg, var( --dak-secondary ) 0%, var( --dak-primary-dark ) 100% ) !important;
	box-shadow: var( --dak-shadow-lg ), 0 1px 0 rgba( 255, 255, 255, 0.25 ) inset !important;
}

.dak-home-hero-visual video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-home-hero-visual-caption {
	position: absolute !important;
	left: var( --dak-space-4 ) !important;
	bottom: var( --dak-space-4 ) !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	gap: var( --dak-space-3 ) !important;
}

.dak-home-hero-visual::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient( 0deg, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0 ) 45% ) !important;
}

.dak-home-hero-visual-play {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	flex: 0 0 auto !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.94 ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-home-hero-visual-play svg {
	width: 16px !important;
	height: 16px !important;
	margin-left: 2px !important;
}

.dak-home-hero-visual-caption div {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

.dak-home-hero-visual-caption strong {
	color: #fff !important;
	font-size: var( --dak-text-sm ) !important;
	font-weight: 700 !important;
}

.dak-home-hero-visual-caption span {
	color: rgba( 255, 255, 255, 0.8 ) !important;
	font-size: var( --dak-text-xs ) !important;
}

/* Trust strip — flat icon + label row (no card chrome), separated from the
   sections above/below by hairlines, matching the reference design. */

.dak-home-trust {
	padding: var( --dak-space-5 ) 0 !important;
	border-top: 1px solid var( --dak-border ) !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-home-trust-grid {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr ) !important;
	gap: var( --dak-space-5 ) !important;
}

.dak-home-trust-card {
	display: flex !important;
	align-items: flex-start !important;
	gap: var( --dak-space-3 ) !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.dak-home-trust-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	flex: 0 0 auto !important;
	border-radius: 50% !important;
	background: linear-gradient( 165deg, var( --dak-bg-card ) 0%, var( --dak-primary-tint ) 100% ) !important;
	color: var( --dak-primary-dark ) !important;
	box-shadow: var( --dak-shadow ), 0 1px 0 rgba( 255, 255, 255, 0.8 ) inset !important;
	margin-bottom: 0 !important;
}

.dak-home-trust-icon svg {
	width: 19px !important;
	height: 19px !important;
}

.dak-home-trust-card h3 {
	font-size: var( --dak-text-md ) !important;
	font-weight: 700 !important;
	margin: 0 0 0.2rem !important;
	color: var( --dak-text ) !important;
}

.dak-home-trust-card p {
	font-size: var( --dak-text-sm ) !important;
	color: var( --dak-muted ) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* Services / doctors — plain white ground, cards get a touch more lift */

.dak-home-services .dak-service-card,
.dak-home-doctors .dak-doctor-card {
	border-radius: var( --dak-radius-lg ) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.dak-home-services .dak-service-card:hover,
.dak-home-doctors .dak-doctor-card:hover {
	transform: translateY( -3px ) !important;
	box-shadow: var( --dak-shadow-hover ) !important;
}

/* Doctors — a plain, equal-width grid (not the horizontal-scroll slider the
   standalone [featured_doctors] shortcode uses elsewhere), so long names/
   specialty tags get enough room to wrap instead of overflowing a fixed
   270px slide. */

.dak-home-doctors-grid {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr ) !important;
	gap: var( --dak-space-5 ) !important;
}

.dak-home-doctors-grid .dak-doctor-card {
	height: 100% !important;
}

.dak-home-doctors-grid .dak-doctor-card-name {
	overflow-wrap: break-word !important;
}

@media ( max-width: 1024px ) {
	.dak-home-doctors-grid {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}
}

@media ( max-width: 560px ) {
	.dak-home-doctors-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Why Choose Us — plain centered icon columns, no card chrome */

.dak-home-why {
	background: linear-gradient( 165deg, var( --dak-primary-tint ) 0%, var( --dak-bg-card ) 120% ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	padding: var( --dak-space-7 ) var( --dak-space-6 ) !important;
	margin-top: var( --dak-space-8 ) !important;
}

.dak-home-why .dak-directory-header {
	text-align: center !important;
}

.dak-home-why-grid {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr ) !important;
	gap: var( --dak-space-5 ) !important;
	margin-top: var( --dak-space-6 ) !important;
}

.dak-home-why-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}

.dak-home-why-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: linear-gradient( 165deg, var( --dak-bg-card ) 0%, var( --dak-primary-tint ) 100% ) !important;
	color: var( --dak-primary-dark ) !important;
	/* Lift shadow + a bright top-edge highlight so the circle reads as a
	   small floating disc rather than a flat tinted dot. */
	box-shadow: var( --dak-shadow-hover ), 0 1px 0 rgba( 255, 255, 255, 0.8 ) inset !important;
	margin-bottom: var( --dak-space-3 ) !important;
}

.dak-home-why-icon svg {
	width: 22px !important;
	height: 22px !important;
}

.dak-home-why-item h3 {
	font-size: var( --dak-text-md ) !important;
	font-weight: 700 !important;
	margin: 0 0 var( --dak-space-1 ) !important;
	color: var( --dak-text ) !important;
}

.dak-home-why-item p {
	font-size: var( --dak-text-sm ) !important;
	color: var( --dak-muted ) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* Testimonial band — dark, full-bleed within the page's max-width */

.dak-home-testimonial-band {
	margin-top: var( --dak-space-8 ) !important;
	/* Deliberately fixed (not a --dak-text/--dak-bg-* token, which flip with
	   the light/dark toggle) — this band stays dark in both modes, matching
	   the reference design. A subtle radial glow + gradient over the flat
	   fill gives it some depth instead of a flat block of color. */
	background:
		radial-gradient( 520px 320px at 100% 0%, rgba( 255, 255, 255, 0.06 ) 0%, rgba( 255, 255, 255, 0 ) 65% ),
		linear-gradient( 165deg, #1b1e24 0%, #101216 100% ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	padding: var( --dak-space-7 ) var( --dak-space-6 ) !important;
	box-shadow: 0 20px 48px rgba( 0, 0, 0, 0.28 ) !important;
}

.dak-home-testimonial-band-inner {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr !important;
	gap: var( --dak-space-6 ) !important;
	align-items: start !important;
}

.dak-home-testimonial-band-quotes {
	display: flex !important;
	flex-direction: column !important;
	gap: var( --dak-space-4 ) !important;
}

.dak-home-testimonial-band-eyebrow-row {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: var( --dak-space-3 ) !important;
}

.dak-home-testimonial-band-quotes .dak-eyebrow {
	background: rgba( 255, 255, 255, 0.1 ) !important;
	color: var( --dak-primary ) !important;
}

.dak-home-google-rating-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3rem !important;
	color: #d7dade !important;
	font-size: var( --dak-text-sm ) !important;
	font-weight: 600 !important;
}

.dak-home-google-rating-badge svg {
	width: 15px !important;
	height: 15px !important;
	color: #f5b942 !important;
}

.dak-home-testimonial-card + .dak-home-testimonial-card {
	padding-top: var( --dak-space-4 ) !important;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 ) !important;
}

.dak-home-testimonial-stars {
	display: flex !important;
	gap: 0.15rem !important;
	margin-bottom: var( --dak-space-2 ) !important;
}

.dak-home-testimonial-stars svg {
	width: 14px !important;
	height: 14px !important;
	color: rgba( 255, 255, 255, 0.25 ) !important;
}

.dak-home-testimonial-stars .is-filled svg {
	color: #f5b942 !important;
}

.dak-home-testimonial-card p {
	color: #fff !important;
	font-size: 1.25rem !important;
	font-style: italic !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	margin: 0 0 var( --dak-space-2 ) !important;
}

.dak-home-testimonial-band-author {
	color: #9198a3 !important;
	font-size: var( --dak-text-sm ) !important;
}

.dak-home-testimonial-band-stats {
	display: flex !important;
	flex-direction: column !important;
	gap: var( --dak-space-4 ) !important;
}

.dak-home-testimonial-band-stats strong {
	display: block !important;
	color: var( --dak-primary ) !important;
	font-size: var( --dak-text-2xl ) !important;
	font-weight: 800 !important;
}

.dak-home-testimonial-band-stats span {
	color: #9198a3 !important;
	font-size: var( --dak-text-sm ) !important;
}

/* Visit Us / clinics — boxed tinted panel, same pattern as the testimonial
   band and CTA below rather than a full-bleed section. */

.dak-home-clinics {
	background: linear-gradient( 165deg, var( --dak-primary-tint ) 0%, var( --dak-bg-card ) 120% ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	padding: var( --dak-space-7 ) var( --dak-space-6 ) !important;
}

.dak-home-clinics-grid {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: var( --dak-space-5 ) !important;
	margin-top: var( --dak-space-5 ) !important;
}

.dak-home-clinic-card {
	display: flex !important;
	flex-direction: column !important;
	gap: var( --dak-space-2 ) !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	padding: var( --dak-space-4 ) !important;
	box-shadow: var( --dak-shadow ) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.dak-home-clinic-card:hover {
	transform: translateY( -3px ) !important;
	box-shadow: var( --dak-shadow-hover ) !important;
}

.dak-home-clinic-card strong {
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif !important;
	font-size: var( --dak-text-md ) !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

.dak-home-clinic-meta {
	display: flex !important;
	align-items: flex-start !important;
	gap: var( --dak-space-2 ) !important;
	font-size: var( --dak-text-sm ) !important;
	color: var( --dak-muted ) !important;
}

.dak-home-clinic-meta .dak-location-icon {
	flex: 0 0 auto !important;
	width: 14px !important;
	height: 14px !important;
	margin-top: 0.15rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-home-clinic-meta .dak-location-icon svg {
	width: 100% !important;
	height: 100% !important;
}

/* Final CTA band — bold solid primary panel, matching the reference design's
   high-contrast "Ready to see a specialist?" banner. */

.dak-home-cta {
	margin-top: var( --dak-space-8 ) !important;
	background:
		radial-gradient( 460px 260px at 90% -20%, rgba( 255, 255, 255, 0.25 ) 0%, rgba( 255, 255, 255, 0 ) 65% ),
		radial-gradient( 420px 260px at 5% 120%, rgba( 0, 0, 0, 0.18 ) 0%, rgba( 0, 0, 0, 0 ) 60% ),
		linear-gradient( 135deg, var( --dak-primary ) 0%, var( --dak-primary-dark ) 100% ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	padding: var( --dak-space-6 ) var( --dak-space-7 ) !important;
	box-shadow: 0 16px 40px rgba( 20, 60, 40, 0.22 ) !important;
}

.dak-home-cta-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: var( --dak-space-4 ) !important;
}

.dak-home-cta h2 {
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif !important;
	color: #fff !important;
	font-size: var( --dak-text-xl ) !important;
	font-weight: 600 !important;
	margin: 0 0 var( --dak-space-1 ) !important;
}

.dak-home-cta p {
	color: rgba( 255, 255, 255, 0.85 ) !important;
	font-size: var( --dak-text-md ) !important;
	margin: 0 !important;
}

.dak-home-cta .dak-button-primary {
	background: #fff !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-home-cta .dak-button-primary:hover {
	background: rgba( 255, 255, 255, 0.9 ) !important;
}

/* Video grid + lightbox (marketing reel + admin-uploaded videos) */

.dak-home-videos-grid {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: var( --dak-space-5 ) !important;
	margin-top: var( --dak-space-5 ) !important;
}

.dak-home-video-card {
	position: relative !important;
	display: flex !important;
	align-items: flex-end !important;
	aspect-ratio: 16 / 10 !important;
	border: none !important;
	border-radius: var( --dak-radius-lg ) !important;
	overflow: hidden !important;
	background: #000 !important;
	cursor: pointer !important;
	padding: 0 !important;
	box-shadow: var( --dak-shadow ) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.dak-home-video-card:hover {
	transform: translateY( -2px ) !important;
	box-shadow: var( --dak-shadow-hover ) !important;
}

.dak-home-video-card img,
.dak-home-video-card video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-home-video-play {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate( -50%, -50% ) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.92 ) !important;
	color: var( --dak-primary-dark ) !important;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.35 ) !important;
	pointer-events: none !important;
}

.dak-home-video-play svg {
	width: 22px !important;
	height: 22px !important;
	margin-left: 2px !important;
}

.dak-home-video-title {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	padding: var( --dak-space-4 ) var( --dak-space-3 ) var( --dak-space-2 ) !important;
	background: linear-gradient( 180deg, transparent 0%, rgba( 0, 0, 0, 0.75 ) 100% ) !important;
	color: #fff !important;
	font-size: var( --dak-text-sm ) !important;
	font-weight: 700 !important;
	text-align: left !important;
}

.dak-home-video-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var( --dak-space-5 ) !important;
}

.dak-home-video-modal[aria-hidden='true'] {
	display: none !important;
}

.dak-home-video-modal-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: rgba( 10, 12, 15, 0.8 ) !important;
}

.dak-home-video-modal-dialog {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: 860px !important;
	background: #000 !important;
	border-radius: var( --dak-radius-md ) !important;
	box-shadow: var( --dak-shadow-lg ) !important;
	overflow: hidden !important;
}

.dak-home-video-modal-title {
	margin: 0 !important;
	padding: var( --dak-space-3 ) var( --dak-space-4 ) !important;
	background: #000 !important;
	color: #fff !important;
	font-size: var( --dak-text-md ) !important;
}

.dak-home-video-modal-dialog video {
	display: block !important;
	width: 100% !important;
	max-height: 75vh !important;
	background: #000 !important;
}

.dak-home-video-modal-close {
	position: absolute !important;
	top: var( --dak-space-2 ) !important;
	right: var( --dak-space-2 ) !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.9 ) !important;
	color: var( --dak-text ) !important;
	font-size: 1.3rem !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

@media ( max-width: 900px ) {
	.dak-home-hero {
		padding: var( --dak-space-6 ) var( --dak-space-5 ) !important;
	}

	.dak-home-hero-grid {
		grid-template-columns: 1fr !important;
	}

	.dak-home-hero-card {
		max-width: 360px !important;
	}

	.dak-home-hero-stats-strip,
	.dak-home-trust-grid,
	.dak-home-why-grid {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}

	.dak-home-testimonial-band-inner {
		grid-template-columns: 1fr !important;
	}

	.dak-home-clinics-grid,
	.dak-home-videos-grid {
		grid-template-columns: 1fr !important;
	}

	.dak-home-hero-copy h1 {
		font-size: 2rem !important;
	}

	.dak-home-why,
	.dak-home-clinics {
		padding: var( --dak-space-6 ) var( --dak-space-4 ) !important;
	}
}

@media ( max-width: 560px ) {
	.dak-home-hero-stats-strip,
	.dak-home-trust-grid,
	.dak-home-why-grid {
		grid-template-columns: 1fr !important;
	}

	.dak-home-cta-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}
