/*
Theme Name: DigiMark
Theme URI: https://digimarkme.com/
Author: DigiMark
Description: A WordPress theme adapted from the DigiMark landing page export.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: digimark
*/

:root {
	color-scheme: dark;
	--digimark-background: #090b0b;
	--digimark-foreground: #f2f0e9;
	--digimark-silver: #a7aaa8;
	--digimark-gold: #c6a66b;
	--digimark-border: #292c2b;
	--digimark-card: #111413;
	--digimark-font-body: "DM Sans", sans-serif;
	/* Headings use the elegant serif pairing; the wordmark stays sans (below). */
	--digimark-font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--digimark-font-brand: "Space Grotesk", sans-serif;
}

html {
	background: var(--digimark-background);
	scroll-behavior: smooth;
	/* Sections animate in from +/-48px, which otherwise creates a horizontal scrollbar.
	   `clip` (not `hidden`) avoids turning the root into a scroll container, so the sticky header keeps working. */
	overflow-x: clip;
}

body {
	min-width: 320px;
	margin: 0;
	background: var(--digimark-background);
	color: var(--digimark-foreground);
	font-family: var(--digimark-font-body);
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Site-wide heading typography — the elegant serif treatment.
   Scoped to #primary (all page content) and given an id in the selector so it
   outranks the utility classes on individual headings, whatever order the
   Tailwind CDN injects its stylesheet in. Colours are deliberately NOT set so
   headings that are intentionally gold keep their colour.
   -------------------------------------------------------------------------- */

#primary h1,
#primary h2,
#primary h3,
#primary h4,
#primary h5,
#primary h6 {
	font-family: var(--digimark-font-display);
	letter-spacing: -0.02em;
}

#primary h1,
#primary h2 {
	font-weight: 500;
	line-height: 1.12;
}

#primary h3,
#primary h4,
#primary h5,
#primary h6 {
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.digimark-global-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
	padding: 14px clamp(20px, 5vw, 64px);
	/* Pull the following section up underneath the bar so the hero sits behind it,
	   instead of leaving a solid strip above the hero. */
	margin-bottom: -76px;
	/* Transparent over the hero; the .digimark-header-scrolled backdrop fades in on scroll
	   so the nav stays legible against page content. */
	background: transparent;
	box-shadow: none;
	transition: background-color 250ms ease, box-shadow 250ms ease, backdrop-filter 250ms ease;
}

.digimark-global-header.digimark-header-scrolled {
	background: rgb(9 11 11 / 72%);
	backdrop-filter: blur(22px) saturate(140%);
	box-shadow: 0 12px 32px rgb(0 0 0 / 24%);
}

/* With no background behind the bar, the brand and nav links need a soft shadow
   to stay readable over hero imagery. */
.digimark-global-header__brand,
.digimark-global-header__nav a {
	text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
}

.digimark-global-header__brand,
.digimark-global-footer__brand {
	color: var(--digimark-foreground);
	/* The wordmark is brand, not a heading, so it keeps the sans display face. */
	font-family: var(--digimark-font-brand);
	font-size: 21px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Image logo. The badge is square, so only the height needs setting. It sits on a
   transparent bar over hero imagery, hence the soft drop shadow. */
.digimark-global-header__logo {
	display: block;
	width: auto;
	height: 44px;
	filter: drop-shadow(0 2px 6px rgb(0 0 0 / 45%));
}

/* The nav links are nowrap, so they have a hard minimum width. Without this the
   brand was the only item that could shrink and flex-shrink collapsed the logo to
   zero width on narrow viewports. */
.digimark-global-header__brand {
	flex: 0 0 auto;
}

.digimark-global-header__brand sup,
.digimark-global-footer__brand sup {
	margin-left: 2px;
	color: var(--digimark-gold);
	font-size: 10px;
}

.digimark-global-header__nav,
.digimark-global-footer__nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.5vw, 36px);
}

.digimark-global-header__nav a,
.digimark-global-footer__nav a,
.digimark-global-footer__bottom a {
	color: var(--digimark-silver);
	font-size: 13px;
	text-decoration: none;
	transition: color 180ms ease;
}

.digimark-global-header__nav a:hover,
.digimark-global-footer__nav a:hover,
.digimark-global-footer__bottom a:hover {
	color: var(--digimark-gold);
}

.digimark-global-header__cta {
	padding: 10px 15px;
	background: var(--digimark-gold);
	color: var(--digimark-background);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Wrapper so the nav and CTA can collapse into a single dropdown panel on small
   screens. At and above the 900px breakpoint it is layout-transparent, leaving the
   desktop bar exactly as it was: brand | nav | CTA, spread by the header space-between. */
.digimark-global-header__menu {
	display: contents;
}

.digimark-global-header__toggle {
	display: none;
}

.digimark-global-footer {
	padding: 48px clamp(20px, 5vw, 64px) 20px;
	background: #070808;
}

.digimark-global-footer__main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
	padding-bottom: 40px;
}

.digimark-global-footer__main p {
	margin: 12px 0 0;
	color: var(--digimark-silver);
	font-size: 13px;
}

.digimark-global-footer__nav {
	flex-wrap: wrap;
	justify-content: flex-end;
	padding-top: 8px;
}

.digimark-global-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	max-width: 1280px;
	margin: 0 auto;
	padding-top: 18px;
	color: var(--digimark-silver);
	font-size: 12px;
}

@media (max-width: 680px) {
	.digimark-global-header {
		gap: 12px;
		min-height: 66px;
		padding: 12px 16px;
		margin-bottom: -66px;
	}

	.digimark-global-header__logo {
		height: 36px;
	}

	.digimark-global-footer__main,
	.digimark-global-footer__bottom {
		flex-direction: column;
	}

	.digimark-global-footer__nav {
		justify-content: flex-start;
	}
}

/*
 * Below 900px the six nav links plus the CTA no longer fit on one line, so they
 * collapse into a dropdown panel behind the toggle button. The panel is positioned
 * absolutely so opening it cannot reflow the page underneath.
 */
@media (max-width: 900px) {
	.digimark-global-header__toggle {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--digimark-border);
		border-radius: 10px;
		background: rgb(255 255 255 / 6%);
		color: var(--digimark-foreground);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.digimark-global-header__toggle-bars {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 18px;
		height: 13px;
	}

	.digimark-global-header__toggle-bars span {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 200ms ease, opacity 150ms ease;
	}

	.digimark-global-header__toggle[aria-expanded="true"] .digimark-global-header__toggle-bars span:nth-child(1) {
		transform: translateY(5.5px) rotate(45deg);
	}

	.digimark-global-header__toggle[aria-expanded="true"] .digimark-global-header__toggle-bars span:nth-child(2) {
		opacity: 0;
	}

	.digimark-global-header__toggle[aria-expanded="true"] .digimark-global-header__toggle-bars span:nth-child(3) {
		transform: translateY(-5.5px) rotate(-45deg);
	}

	/* Opaque bar while open, so the bar stays readable over hero imagery. */
	.digimark-global-header.digimark-header-open {
		background: rgb(9 11 11 / 94%);
		backdrop-filter: blur(22px) saturate(140%);
	}

	.digimark-global-header__menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		gap: 0;
		padding: 6px clamp(16px, 5vw, 64px) 20px;
		border-top: 1px solid var(--digimark-border);
		background: rgb(9 11 11 / 97%);
		backdrop-filter: blur(22px) saturate(140%);
		box-shadow: 0 24px 48px rgb(0 0 0 / 45%);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		/* visibility is discrete, so it cannot be interpolated. Hold it hidden until the
		   fade-out finishes, and flip it on instantly when opening -- otherwise a paused
		   or throttled frame loop can leave the panel stuck invisible. */
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	}

	.digimark-global-header__menu.is-open {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
	}

	.digimark-global-header__nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.digimark-global-header__nav a {
		padding: 14px 2px;
		font-size: 16px;
		border-bottom: 1px solid rgb(255 255 255 / 7%);
	}

	.digimark-global-header__nav a:last-child {
		border-bottom: 0;
	}

	.digimark-global-header__cta {
		margin-top: 16px;
		padding: 14px 18px;
		text-align: center;
		font-size: 15px;
	}
}

a {
	color: inherit;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--digimark-gold);
	outline-offset: 4px;
}

section[id] {
	scroll-margin-top: 6rem;
}

/*
 * front-page.php embeds its own fixed navbar inside #primary. The global header sits
 * above it (z-index 50 vs 40), which previously relied on the global header's opaque
 * background to hide it. Now that the global header is transparent, that duplicate bar
 * would show through, so it is hidden explicitly.
 *
 * Scoped to body.home on purpose: a bare `#primary header` also matched content
 * headings such as the Services page "Our Approach" <header>.
 */
body.home #primary header {
	display: none;
}

body.home #primary header.digimark-header-scrolled {
	left: clamp(0.75rem, 2.5vw, 1.5rem);
	right: clamp(0.75rem, 2.5vw, 1.5rem);
	top: 0.75rem;
	border-radius: 6px;
	background-color: rgb(24 25 23 / 72%) !important;
	backdrop-filter: blur(32px) saturate(150%);
	box-shadow: 0 16px 48px rgb(0 0 0 / 42%);
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

body.home #primary header.digimark-header-scrolled > div {
	padding-right: 1rem;
	padding-left: 1rem;
}

#primary header nav[aria-label="Primary"] a {
	position: relative;
	transition: color 250ms ease, transform 250ms ease;
}

#primary header a[aria-label="DigiMark home"] > span {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 4px;
	background: var(--digimark-foreground);
	color: var(--digimark-background) !important;
	transition: width 300ms ease, height 300ms ease, transform 300ms ease;
}

#primary header a[aria-label="DigiMark home"] > span * {
	color: var(--digimark-background) !important;
}

body.home #primary header.digimark-header-scrolled a[aria-label="DigiMark home"] > span {
	width: 2.25rem;
	height: 2.25rem;
}

#primary header a.bg-foreground[href="#booking"] {
	border-radius: 4px;
	background-color: var(--digimark-gold) !important;
	box-shadow: 0 6px 18px rgb(198 166 107 / 22%);
	color: var(--digimark-background) !important;
	font-weight: 600;
	transition: background-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

#primary header a.bg-foreground[href="#booking"]:hover {
	background-color: #e0c587 !important;
	box-shadow: 0 8px 22px rgb(198 166 107 / 30%);
	transform: translateY(-1px);
}

#primary header nav[aria-label="Primary"] a:hover {
	transform: translateY(-1px);
}

#primary header nav[aria-label="Primary"] a.digimark-nav-active {
	color: var(--digimark-gold) !important;
}

#primary header nav[aria-label="Mobile"] a.digimark-nav-active {
	color: var(--digimark-gold) !important;
}

#primary header nav[aria-label="Mobile"] a.digimark-nav-active::after {
	position: absolute;
	right: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--digimark-gold);
	content: "";
}

#primary header nav[aria-label="Primary"] a.digimark-nav-active::after {
	position: absolute;
	bottom: -0.55rem;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--digimark-gold);
	content: "";
	opacity: 1;
	transform: translateX(-50%);
}

#primary,
#primary *,
#primary *::before,
#primary *::after {
	border-color: transparent !important;
}

.font-display {
	font-family: var(--digimark-font-display);
}

.text-metallic {
	background: linear-gradient(105deg, #f0e2c3 5%, #c6a66b 48%, #eee0bd 92%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.digimark-service-details-link {
	display: inline-flex;
	align-items: center;
	margin: 2rem 0 0 1rem;
	color: var(--digimark-gold) !important;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 200ms ease, transform 200ms ease;
}

.digimark-service-details-link:hover {
	color: var(--digimark-foreground) !important;
	transform: translateX(3px);
}

.digimark-service-page {
	min-height: 100vh;
	padding: 9rem 24px 6rem;
	background: var(--digimark-background);
}

.digimark-service-page__inner {
	width: min(100%, 1040px);
	margin: 0 auto;
}

.digimark-service-page__eyebrow {
	color: var(--digimark-gold);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.digimark-service-page__title {
	max-width: 900px;
	margin: 24px 0;
	color: var(--digimark-foreground);
	font-family: var(--digimark-font-display);
	font-size: 56px;
	font-weight: 600;
	line-height: 1.05;
}

.digimark-service-page__intro {
	max-width: 760px;
	color: var(--digimark-silver);
	font-size: 20px;
	line-height: 1.65;
}

.digimark-service-page__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 64px;
}

.digimark-service-page__item {
	display: block;
	padding: 24px;
	background: var(--digimark-card);
	color: inherit;
	text-decoration: none;
	transition: background-color 200ms ease, transform 200ms ease;
}

.digimark-service-page__item:hover {
	background: #171a18;
	transform: translateY(-2px);
}

.digimark-service-page__item h2 {
	margin: 0 0 12px;
	color: var(--digimark-foreground);
	font-family: var(--digimark-font-display);
	font-size: 21px;
}

.digimark-service-page__item p,
.digimark-service-page__copy {
	color: var(--digimark-silver);
	line-height: 1.7;
}

.digimark-service-page__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 48px;
	margin: 56px 0;
	padding: 0;
	list-style: none;
}

.digimark-service-page__list li::before {
	margin-right: 12px;
	color: var(--digimark-gold);
	content: "+";
}

.digimark-service-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 48px;
}

.digimark-service-page__back {
	color: var(--digimark-gold);
	text-decoration: none;
}

.digimark-service-page__back:hover {
	color: var(--digimark-foreground);
}

.digimark-service-page__cta {
	display: inline-flex;
	align-items: center;
	padding: 12px 18px;
	background: var(--digimark-gold);
	color: var(--digimark-background);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 760px) {
	.digimark-service-page {
		padding: 7rem 24px 4rem;
	}

	.digimark-service-page__title {
		font-size: 40px;
	}

	.digimark-service-page__intro {
		font-size: 18px;
	}

	.digimark-service-page__grid,
	.digimark-service-page__list {
		grid-template-columns: 1fr;
	}
}

.grain-overlay,
.vignette-overlay {
	position: fixed;
	inset: 0;
	z-index: 30;
	pointer-events: none;
}

.grain-overlay {
	opacity: 0.12;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.vignette-overlay {
	background: radial-gradient(ellipse at center, transparent 48%, rgb(0 0 0 / 32%) 100%);
}

.aurora-blob {
	position: absolute;
	border-radius: 9999px;
	filter: blur(100px);
	opacity: 0.62;
}

.reveal {
	opacity: 1;
	transform: none;
}

.digimark-section-reveal {
	--digimark-reveal-x: 0px;
	--digimark-reveal-y: 36px;
	opacity: 0;
	transform: translate3d(var(--digimark-reveal-x), var(--digimark-reveal-y), 0) scale(0.985);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.digimark-section-reveal:nth-child(2),
.digimark-section-reveal:nth-child(5) {
	--digimark-reveal-x: -48px;
	--digimark-reveal-y: 0px;
}

.digimark-section-reveal:nth-child(3),
.digimark-section-reveal:nth-child(6) {
	--digimark-reveal-x: 48px;
	--digimark-reveal-y: 0px;
}

.digimark-section-reveal:nth-child(4),
.digimark-section-reveal:nth-child(7) {
	--digimark-reveal-y: 44px;
}

.digimark-section-reveal.digimark-section-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

#top .aurora-blob {
	will-change: translate;
	transition: translate 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

canvas {
	display: none !important;
}

.digimark-earth-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block !important;
	width: 100%;
	height: 100%;
	opacity: 0.86;
	pointer-events: none;
}

@media (max-width: 680px) {
	.digimark-earth-canvas {
		opacity: 0.44;
	}
}

#top {
	isolation: isolate;
}

#top::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 20%)),
		linear-gradient(90deg, rgb(4 6 8 / 58%) 0%, rgb(4 6 8 / 40%) 48%, rgb(4 6 8 / 48%) 100%),
		linear-gradient(0deg, rgb(4 6 8 / 56%) 0%, transparent 42%, transparent 76%, rgb(4 6 8 / 28%) 100%);
	content: "";
	pointer-events: none;
}

}

.digimark-mobile-overlay {
	visibility: hidden;
}

.digimark-mobile-overlay.digimark-menu-open {
	visibility: visible;
	pointer-events: auto !important;
	opacity: 1 !important;
}

.digimark-mobile-overlay.digimark-menu-open > div:last-child {
	transform: translateX(0);
}

body.digimark-menu-visible {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.digimark-section-reveal {
		opacity: 1;
		transform: none;
	}

	#top .aurora-blob {
		translate: none !important;
		.digimark-earth-canvas {
			opacity: 0.6;
		}
	}

}

/* ==========================================================================
   Services page — "Our Approach / Discover Our Comprehensive Services"
   Every rule is scoped to .dm-approach so nothing leaks into other sections.
   ========================================================================== */

.dm-approach {
	/* Local tokens, mapped onto the theme palette. */
	--dm-gold: var(--digimark-gold, #c6a66b);
	--dm-gold-light: #d4b67a;
	--dm-surface: rgb(255 255 255 / 3.5%);
	--dm-ring: rgb(198 166 107 / 30%);
	--dm-ink: var(--digimark-foreground, #f2f0e9);
	--dm-muted: var(--digimark-silver, #a7aaa8);
	--dm-radius: 20px;
	--dm-gap: 28px;
	--dm-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(72px, 9vw, 132px) 0;
	background: var(--digimark-background, #090b0b);
	color: var(--dm-ink);
}

/* wpautop can inject stray <br> into stored markup; here they would add gaps
   between grid items. */
.dm-approach br {
	display: none;
}

.dm-approach__inner {
	position: relative;
	z-index: 1;
	width: min(1180px, 100% - 2.5rem);
	margin-inline: auto;
}

/* ---- Ambient background ------------------------------------------------ */

.dm-approach__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.dm-approach__glow {
	position: absolute;
	left: 50%;
	top: 45%;
	width: min(920px, 125vw);
	aspect-ratio: 1;
	translate: -50% -50%;
	background: radial-gradient(circle, rgb(198 166 107 / 15%), transparent 62%);
}

.dm-approach__grid-lines {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background-image:
		linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px);
	background-size: 68px 68px;
	-webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 76%);
	mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 76%);
}

/* ---- Heading ----------------------------------------------------------- */

.dm-approach__head {
	max-width: 780px;
	margin: 0 auto clamp(44px, 5vw, 72px);
	text-align: center;
}

.dm-approach__label {
	margin: 0 0 14px;
	color: var(--dm-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.dm-approach__title {
	margin: 0;
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: clamp(2rem, 1.35rem + 2.4vw, 3.15rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.dm-approach__accent {
	background: linear-gradient(100deg, var(--dm-gold) 0%, var(--dm-gold-light) 48%, var(--dm-gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dm-approach__divider {
	display: block;
	width: 88px;
	height: 2px;
	margin: 26px auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--dm-gold), transparent);
}

/* ---- Cards ------------------------------------------------------------- */

.dm-approach__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px 30px 28px;
	border-radius: var(--dm-radius);
	border: 1px solid transparent;
	/* Gradient hairline: layer 1 is the glass surface, layer 2 shows through
	   the 1px border box as a faint gold/white edge. */
	background:
		linear-gradient(var(--dm-surface), var(--dm-surface)) padding-box,
		linear-gradient(150deg, rgb(198 166 107 / 42%), rgb(255 255 255 / 10%) 42%, rgb(255 255 255 / 4%)) border-box;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		inset 0 0 40px rgb(198 166 107 / 6%),
		0 18px 40px -24px rgb(0 0 0 / 85%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition:
		opacity 620ms var(--dm-ease),
		transform 620ms var(--dm-ease),
		box-shadow 420ms var(--dm-ease),
		border-color 420ms var(--dm-ease);
}

.dm-card:nth-child(1) { --dm-delay: 0ms; }
.dm-card:nth-child(2) { --dm-delay: 120ms; }
.dm-card:nth-child(3) { --dm-delay: 240ms; }
.dm-card:nth-child(4) { --dm-delay: 360ms; }

/* Thin gold line along the card's top edge. */
.dm-card__edge {
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	opacity: 0.75;
	background: linear-gradient(90deg, transparent, var(--dm-gold) 22%, var(--dm-gold-light) 50%, var(--dm-gold) 78%, transparent);
	transition: opacity 420ms var(--dm-ease);
}

/* Radial spotlight; --dm-x / --dm-y are written by the JS on pointermove. */
.dm-card__spot {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(340px circle at var(--dm-x, 50%) var(--dm-y, 0%), rgb(198 166 107 / 18%), transparent 68%);
	transition: opacity 380ms var(--dm-ease);
}

.dm-card__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 22px;
	border-radius: 16px;
	color: var(--dm-gold);
	background: linear-gradient(150deg, rgb(198 166 107 / 26%), rgb(198 166 107 / 8%));
	border: 1px solid var(--dm-ring);
	box-shadow: 0 0 22px rgb(198 166 107 / 14%), inset 0 1px 0 rgb(255 255 255 / 10%);
	transition: transform 420ms var(--dm-ease), box-shadow 420ms var(--dm-ease);
}

.dm-card__icon svg {
	width: 26px;
	height: 26px;
}

.dm-card__title {
	margin: 0 0 10px;
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.dm-card__text {
	margin: 0;
	color: var(--dm-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

.dm-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	color: var(--dm-gold);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 380ms var(--dm-ease), transform 380ms var(--dm-ease), color 200ms ease;
}

.dm-card__link:focus-visible {
	outline: 2px solid var(--dm-gold);
	outline-offset: 4px;
}

/* ---- Entrance states --------------------------------------------------- */

/* Applied by JS only, so content stays visible if scripting is unavailable. */
.dm-approach.dm-hidden .dm-card {
	opacity: 0;
	transform: translateY(26px);
	transition: none;
}

.dm-approach.dm-ready .dm-card {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger applies only while the entrance plays; .dm-settled drops the delay
   so the hover lift stays immediate. */
.dm-approach.dm-ready:not(.dm-settled) .dm-card {
	transition-delay: var(--dm-delay, 0ms);
}

/* ---- Hover (pointer devices only) ------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.dm-card:hover,
	.dm-card:focus-within {
		transform: translateY(-8px);
		border-color: rgb(198 166 107 / 55%);
		box-shadow:
			inset 0 1px 0 rgb(255 255 255 / 8%),
			inset 0 0 50px rgb(198 166 107 / 10%),
			0 30px 60px -26px rgb(0 0 0 / 92%),
			0 0 0 1px rgb(198 166 107 / 16%);
	}

	.dm-card:hover .dm-card__spot,
	.dm-card:focus-within .dm-card__spot {
		opacity: 1;
	}

	.dm-card:hover .dm-card__edge,
	.dm-card:focus-within .dm-card__edge {
		opacity: 1;
	}

	.dm-card:hover .dm-card__icon,
	.dm-card:focus-within .dm-card__icon {
		transform: scale(1.08) rotate(5deg);
		box-shadow: 0 0 30px rgb(198 166 107 / 32%), inset 0 1px 0 rgb(255 255 255 / 14%);
	}

	.dm-card:hover .dm-card__link,
	.dm-card:focus-within .dm-card__link {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Touch devices: keep the link permanently reachable. */
@media (hover: none) {
	.dm-card__link {
		opacity: 1;
		transform: none;
	}
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.dm-approach__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.dm-approach__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.dm-card {
		padding: 30px 24px 26px;
	}
}

/* ---- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.dm-card,
	.dm-approach.dm-hidden .dm-card {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Contact page — "Contact Info" cards
   Scoped to .dm-info so nothing leaks into other sections.
   ========================================================================== */

.dm-info {
	--dm-info-gold: var(--digimark-gold, #c6a66b);
	--dm-info-gold-light: #d4b67a;
	--dm-info-radius: 18px;
	--dm-info-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	padding: clamp(56px, 6vw, 88px) 0;
	background: var(--digimark-card, #111413);
	color: var(--digimark-foreground, #f2f0e9);
}

/* wpautop injects stray <br> / classless <p> into stored markup; neutralise
   both so the grid and card layout stay exactly as authored. */
.dm-info br {
	display: none;
}

.dm-info p:not([class]) {
	display: contents;
}

.dm-info__inner {
	width: min(1180px, 100% - 2.5rem);
	margin-inline: auto;
}

.dm-info__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-info-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Grid items stretch to equal height; min-width lets long values wrap
	   inside the card instead of overflowing it. */
	min-width: 0;
	padding: 28px 24px;
	border-radius: var(--dm-info-radius);
	border: 1px solid var(--digimark-border, #292c2b);
	background: linear-gradient(180deg, rgb(255 255 255 / 2.5%), rgb(255 255 255 / 1%));
	box-shadow: 0 14px 34px -24px rgb(0 0 0 / 90%);
	transition:
		transform 400ms var(--dm-info-ease),
		border-color 400ms var(--dm-info-ease),
		box-shadow 400ms var(--dm-info-ease);
}

.dm-info-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 14px;
	color: var(--dm-info-gold);
	background: linear-gradient(150deg, rgb(198 166 107 / 22%), rgb(198 166 107 / 7%));
	border: 1px solid rgb(198 166 107 / 26%);
	transition: transform 400ms var(--dm-info-ease), box-shadow 400ms var(--dm-info-ease);
}

.dm-info-card__icon svg {
	width: 22px;
	height: 22px;
}

.dm-info-card__title {
	margin: 0 0 8px;
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.dm-info-card__value {
	margin: 0;
	color: var(--digimark-silver, #a7aaa8);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

a.dm-info-card__value {
	color: var(--dm-info-gold);
	text-decoration: none;
	transition: color 200ms ease;
}

a.dm-info-card__value:hover {
	color: var(--dm-info-gold-light);
}

a.dm-info-card__value:focus-visible {
	outline: 2px solid var(--dm-info-gold);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---- Hover (pointer devices only) ------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.dm-info-card:hover,
	.dm-info-card:focus-within {
		transform: translateY(-6px);
		border-color: rgb(198 166 107 / 55%);
		box-shadow: 0 22px 44px -26px rgb(0 0 0 / 95%), 0 0 0 1px rgb(198 166 107 / 16%);
	}

	.dm-info-card:hover .dm-info-card__icon,
	.dm-info-card:focus-within .dm-info-card__icon {
		transform: translateY(-2px) scale(1.06);
		box-shadow: 0 0 22px rgb(198 166 107 / 26%);
	}
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.dm-info__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.dm-info__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Home page — "What we do" feature cards.
   This markup comes from the HTML export that front-page.php parses, so the
   redesign (including the 01/02/03 numbering) lives here rather than edits to
   the export file, which may be regenerated. Scoped to body.home so the
   #services anchors on other pages are untouched.
   ========================================================================== */

body.home #services .grid {
	counter-reset: dm-feature;
}

body.home #services .group {
	--dm-feat-gold: var(--digimark-gold, #c6a66b);
	--dm-feat-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px 28px 32px;
	counter-increment: dm-feature;
	border-radius: 20px;
	border: 1px solid var(--digimark-border, #292c2b);
	background: linear-gradient(180deg, rgb(255 255 255 / 3.5%), rgb(255 255 255 / 1.2%));
	box-shadow: 0 18px 40px -28px rgb(0 0 0 / 90%);
	transition:
		opacity 620ms var(--dm-feat-ease),
		transform 620ms var(--dm-feat-ease),
		border-color 420ms var(--dm-feat-ease),
		box-shadow 420ms var(--dm-feat-ease);
}

/* Structural number plus a hairline gold rule under it. */
body.home #services .group::before {
	content: counter(dm-feature, decimal-leading-zero);
	display: block;
	align-self: stretch;
	margin-bottom: 24px;
	padding-bottom: 16px;
	color: var(--dm-feat-gold);
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	background-image: linear-gradient(90deg, rgb(198 166 107 / 55%), rgb(198 166 107 / 0%) 72%);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 100%;
}

/* Icon tile — gold on a gold-tinted rounded square. */
body.home #services .group > div:first-child {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	color: var(--dm-feat-gold);
	background: linear-gradient(150deg, rgb(198 166 107 / 22%), rgb(198 166 107 / 7%));
	border: 1px solid rgb(198 166 107 / 26%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
	transition:
		transform 420ms var(--dm-feat-ease),
		box-shadow 420ms var(--dm-feat-ease);
}

body.home #services .group > div:first-child svg {
	width: 26px;
	height: 26px;
}

body.home #services .group > h3 {
	margin: 22px 0 10px;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.01em;
}

body.home #services .group > p {
	margin: 0;
	color: var(--digimark-silver, #a7aaa8);
	font-size: 0.95rem;
	line-height: 1.75;
}

/* ---- Hover (pointer devices only) ------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	body.home #services .group:hover,
	body.home #services .group:focus-within {
		transform: translateY(-8px);
		border-color: rgb(198 166 107 / 55%);
		box-shadow: 0 28px 56px -30px rgb(0 0 0 / 95%), 0 0 0 1px rgb(198 166 107 / 16%);
	}

	body.home #services .group:hover > div:first-child,
	body.home #services .group:focus-within > div:first-child {
		transform: translateY(-2px) scale(1.06);
		box-shadow: 0 0 24px rgb(198 166 107 / 28%), inset 0 1px 0 rgb(255 255 255 / 12%);
	}
}

/* ---- Staggered entrance (classes toggled by assets/js/home-features.js) -- */

body.home #services.dm-feat-hidden .group {
	opacity: 0;
	transform: translateY(26px);
	transition: none;
}

body.home #services.dm-feat-ready .group {
	opacity: 1;
	transform: translateY(0);
}

/* Delay applies only while the entrance plays, so hover stays immediate. */
body.home #services.dm-feat-ready:not(.dm-feat-settled) .group {
	transition-delay: var(--dm-feat-delay, 0ms);
}

body.home #services .group:nth-child(1) { --dm-feat-delay: 0ms; }
body.home #services .group:nth-child(2) { --dm-feat-delay: 120ms; }
body.home #services .group:nth-child(3) { --dm-feat-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
	body.home #services.dm-feat-hidden .group {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Home page — testimonial quote card (#about).
   The markup is rebuilt by digimark_upgrade_testimonial() in front-page.php,
   because the home page renders from the HTML export.
   ========================================================================== */

body.home #about .dm-quote-wrap {
	display: flex;
	justify-content: center;
}

body.home #about .dm-quote {
	--dm-quote-gold: var(--digimark-gold, #c6a66b);
	--dm-quote-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(780px, 100%);
	margin: 0;
	padding: clamp(38px, 5vw, 58px) clamp(22px, 5vw, 56px);
	border-radius: 24px;
	border: 1px solid var(--digimark-border, #292c2b);
	background: linear-gradient(180deg, rgb(255 255 255 / 3.5%), rgb(255 255 255 / 1%));
	box-shadow: 0 30px 70px -42px rgb(0 0 0 / 95%);
	text-align: center;
	transition: opacity 700ms var(--dm-quote-ease), transform 700ms var(--dm-quote-ease);
}

/* Faint gold glow behind the card. */
body.home #about .dm-quote__glow {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: -24%;
	width: min(620px, 115%);
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(198 166 107 / 20%), rgb(198 166 107 / 0%) 68%);
	pointer-events: none;
}

body.home #about .dm-quote__mark {
	width: 54px;
	height: 54px;
	flex: none;
	margin-bottom: 16px;
	color: var(--dm-quote-gold);
	opacity: 0.92;
}

body.home #about .dm-quote__stars {
	margin-bottom: 22px;
	color: var(--dm-quote-gold);
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: 0.32em;
	text-indent: 0.32em; /* offsets the trailing letter-spacing so it stays centred */
}

body.home #about .dm-quote__text {
	margin: 0;
	max-width: 46ch;
	color: var(--digimark-foreground, #f2f0e9);
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: clamp(1.3rem, 1rem + 1.35vw, 1.95rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Gold highlight on the key phrase. */
body.home #about .dm-quote__hl {
	color: var(--dm-quote-gold);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	body.home #about .dm-quote__hl {
		background: linear-gradient(100deg, var(--dm-quote-gold), #d4b67a 52%, var(--dm-quote-gold));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		/* The phrase wraps across two lines; cloning gives each line fragment its
		   own copy of the gradient so both words are painted. */
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

body.home #about .dm-quote__author {
	display: flex;
	align-items: center;
	gap: 14px;
	width: min(340px, 100%);
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--digimark-border, #292c2b);
	text-align: left;
}

body.home #about .dm-quote__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: var(--dm-quote-gold);
	background: linear-gradient(150deg, rgb(198 166 107 / 26%), rgb(198 166 107 / 8%));
	border: 1px solid rgb(198 166 107 / 32%);
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

body.home #about .dm-quote__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

body.home #about .dm-quote__name {
	color: var(--digimark-foreground, #f2f0e9);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
}

body.home #about .dm-quote__role {
	color: var(--digimark-silver, #a7aaa8);
	font-size: 0.85rem;
	line-height: 1.4;
}

/* ---- Fade-in (class toggled by assets/js/home-testimonial.js) ---------- */

body.home #about .dm-quote.dm-quote--pre {
	opacity: 0;
	transform: translateY(24px);
	transition: none;
}

@media (max-width: 560px) {
	body.home #about .dm-quote__mark {
		width: 44px;
		height: 44px;
	}

	body.home #about .dm-quote__author {
		gap: 12px;
	}
}

/* ==========================================================================
   Home page — "DigiMark Academy" call to action.
   Markup is rebuilt by digimark_upgrade_academy() in front-page.php.
   ========================================================================== */

body.home .dm-academy {
	display: flex;
	justify-content: center;
}

body.home .dm-academy__banner {
	--dm-academy-gold: var(--digimark-gold, #c6a66b);
	--dm-academy-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding: clamp(46px, 6vw, 78px) clamp(22px, 5vw, 64px);
	border-radius: 28px;
	border: 1px solid rgb(198 166 107 / 30%);
	background:
		radial-gradient(120% 150% at 50% 0%, rgb(198 166 107 / 13%), rgb(198 166 107 / 0%) 60%),
		linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 1%));
	box-shadow: 0 34px 80px -46px rgb(0 0 0 / 95%);
	text-align: center;
	transition: opacity 700ms var(--dm-academy-ease), transform 700ms var(--dm-academy-ease);
}

/* Fade-in state, toggled by assets/js/home-academy.js. */
body.home .dm-academy__banner.dm-academy--pre {
	opacity: 0;
	transform: translateY(26px);
	transition: none;
}

/* Decorative layers. */
body.home .dm-academy__grid {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0.5;
	background-image:
		linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
	pointer-events: none;
}

body.home .dm-academy__glow {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: -32%;
	width: min(760px, 125%);
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(198 166 107 / 22%), rgb(198 166 107 / 0%) 66%);
	pointer-events: none;
}

body.home .dm-academy__dots {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

body.home .dm-academy__dots > span {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(198 166 107 / 75%);
	box-shadow: 0 0 12px rgb(198 166 107 / 60%);
	animation: dm-academy-float 9s ease-in-out infinite;
}

body.home .dm-academy__dots > span:nth-child(1) { left: 11%; top: 24%; }
body.home .dm-academy__dots > span:nth-child(2) { left: 84%; top: 30%; width: 8px; height: 8px; animation-delay: 1.6s; }
body.home .dm-academy__dots > span:nth-child(3) { left: 20%; top: 76%; animation-delay: 3.1s; }
body.home .dm-academy__dots > span:nth-child(4) { left: 76%; top: 80%; width: 5px; height: 5px; animation-delay: 4.4s; }

@keyframes dm-academy-float {
	0%, 100% { transform: translateY(0); opacity: 0.5; }
	50% { transform: translateY(-14px); opacity: 1; }
}

body.home .dm-academy__inner {
	position: relative;
	z-index: 1;
}

/* Gold pill badge. */
body.home .dm-academy__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	border: 1px solid rgb(198 166 107 / 32%);
	background: rgb(198 166 107 / 10%);
	color: var(--dm-academy-gold);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
}

body.home .dm-academy__badge svg {
	width: 16px;
	height: 16px;
	flex: none;
}

body.home .dm-academy__title {
	margin: 0 auto;
	max-width: 22ch;
	color: var(--digimark-foreground, #f2f0e9);
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Gold gradient on the key phrase. */
body.home .dm-academy__hl {
	color: var(--dm-academy-gold);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	body.home .dm-academy__hl {
		background: linear-gradient(100deg, var(--dm-academy-gold), #e0c587 50%, var(--dm-academy-gold));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		/* Keeps each line fragment painted if the phrase wraps. */
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

body.home .dm-academy__text {
	margin: 20px auto 0;
	max-width: 52ch;
	color: var(--digimark-silver, #a7aaa8);
	font-size: 1rem;
	line-height: 1.7;
}

/* ---- Buttons ----------------------------------------------------------- */

body.home .dm-academy__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 34px;
}

body.home .dm-academy__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 28px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		transform 320ms var(--dm-academy-ease),
		box-shadow 320ms var(--dm-academy-ease),
		background-color 220ms ease,
		border-color 220ms ease,
		color 220ms ease;
}

body.home .dm-academy__btn svg {
	width: 17px;
	height: 17px;
	flex: none;
}

body.home .dm-academy__btn--primary {
	background: var(--dm-academy-gold);
	color: var(--digimark-background, #090b0b);
	box-shadow: 0 12px 30px -12px rgb(198 166 107 / 55%);
}

body.home .dm-academy__btn--ghost {
	border-color: rgb(255 255 255 / 30%);
	background: rgb(255 255 255 / 4%);
	color: var(--digimark-foreground, #f2f0e9);
}

@media (hover: hover) and (pointer: fine) {
	body.home .dm-academy__btn--primary:hover {
		transform: translateY(-3px);
		background: #d4b67a;
		box-shadow: 0 18px 40px -14px rgb(198 166 107 / 70%), 0 0 0 1px rgb(198 166 107 / 30%);
	}

	body.home .dm-academy__btn--ghost:hover {
		transform: translateY(-3px);
		border-color: rgb(198 166 107 / 55%);
		color: var(--dm-academy-gold);
	}
}

/* ---- Stats ------------------------------------------------------------- */

body.home .dm-academy__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(22px, 5vw, 56px);
	margin: 38px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgb(255 255 255 / 8%);
	list-style: none;
}

body.home .dm-academy__stats li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 92px;
}

body.home .dm-academy__stat-value {
	color: var(--dm-academy-gold);
	font-family: var(--digimark-font-display, "Space Grotesk", sans-serif);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
}

body.home .dm-academy__stat-label {
	color: var(--digimark-silver, #a7aaa8);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---- Responsive -------------------------------------------------------- */

/* ==========================================================================
   Home page — hero heading typography.
   The h1 is rebuilt by digimark_upgrade_hero() in front-page.php.
   Only type + effects here; layout, globe canvas and content are untouched.
   ========================================================================== */

body.home #top .dm-hero__title {
	margin: 32px auto 0;
	color: #f5f1e8;
	font-family: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.1rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 22px rgb(9 11 11 / 60%), 0 1px 4px rgb(9 11 11 / 45%);
}

body.home #top .dm-hero__line {
	display: block;
	text-wrap: balance;
	animation: dm-hero-line 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.home #top .dm-hero__line:nth-child(1) {
	animation-delay: 0.24s;
}

body.home #top .dm-hero__line:nth-child(2) {
	animation-delay: 0.42s;
}

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

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Gold gradient on the accent phrase. */
body.home #top .dm-hero__line--accent {
	display: block;
	color: #c9a96e; /* fallback if background-clip: text is unsupported */
	font-style: italic;
	font-weight: 500;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	body.home #top .dm-hero__line--accent {
		background: linear-gradient(100deg, #f5e6b8 0%, #c9a96e 52%, #8a6d3b 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		/* Keeps both line fragments painted if the phrase wraps. */
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		/* text-shadow would sit behind the transparent glyphs and muddy the
		   gradient, so drop it in favour of a drop-shadow on the rendered text. */
		text-shadow: none;
		filter: drop-shadow(0 2px 14px rgb(9 11 11 / 60%));
	}
}

/* ---- Eyebrow label ----------------------------------------------------- */

body.home #top .dm-hero__label {
	color: var(--digimark-gold, #c6a66b);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	text-indent: 0.35em; /* offsets the trailing letter-spacing so it centres */
}

body.home #top .dm-hero__label::before,
body.home #top .dm-hero__label::after {
	content: "";
	display: inline-block;
	width: clamp(20px, 6vw, 56px);
	height: 1px;
	margin: 0 16px;
	vertical-align: middle;
	background: linear-gradient(90deg, rgb(198 166 107 / 0%), rgb(198 166 107 / 75%));
}

body.home #top .dm-hero__label::after {
	background: linear-gradient(90deg, rgb(198 166 107 / 75%), rgb(198 166 107 / 0%));
}

@media (prefers-reduced-motion: reduce) {
	body.home #top .dm-hero__line {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 640px) {
	body.home #top .dm-hero__label {
		letter-spacing: 0.18em;
		text-indent: 0.18em;
	}

	body.home #top .dm-hero__label::before,
	body.home #top .dm-hero__label::after {
		display: none;
	}
}

@media (max-width: 640px) {
	body.home .dm-academy__actions {
		flex-direction: column;
		align-items: stretch;
	}

	body.home .dm-academy__btn {
		width: 100%;
	}

	body.home .dm-academy__stats {
		gap: 20px;
	}

	body.home .dm-academy__badge {
		letter-spacing: 0.16em;
	}
}