/* ==========================================================================
   TraurDigital — premium layer (loaded after main.css)
   Deep ink, metallic gold, display serif, light and depth.
    1. Tokens
    2. Typography
    3. Surfaces: grain, dark chapters, separators
    4. Header
    5. Buttons and links
    6. Hero and page hero
    7. Marquee
    8. Sections: statement, services, feature, why, portfolio, process,
       pricing, FAQ, contact, CTA band, cards
    9. Footer
   10. Motion
   Contrast notes: text on the gold gradient is ink (≥ 5:1 on the darkest
   stop #a8803f). Gradient text on light uses the dark gold gradient and is
   only used for large headings (≥ 3:1 required, ≥ 4:1 measured).
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */

@property --td-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

:root {
	--td-ink: #131416;
	--td-ink-raised: #1c1e21;
	--td-ink-deep: #0c0d0f;
	--td-champagne: #ecd9ab;

	--td-gold-grad: linear-gradient(120deg, #ecd9ab 0%, #c9a467 38%, #a8803f 62%, #d9be86 100%);
	--td-gold-grad-text: linear-gradient(100deg, #f0dfb6 0%, #c9a467 45%, #e2c890 100%);
	--td-gold-grad-dark: linear-gradient(100deg, #7d5f2d 0%, #9b7a41 50%, #73562a 100%);
	--td-gold-line: linear-gradient(90deg, transparent, rgb(201 164 103 / 0.7), transparent);

	--td-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	/* Cormorant has a small x-height: display sizes go up. */
	--td-text-xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
	--td-text-2xl: clamp(1.75rem, 1.45rem + 1.1vw, 2.375rem);
	--td-text-3xl: clamp(2.125rem, 1.6rem + 2vw, 3.5rem);
	--td-text-4xl: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem);

	--td-radius-lg: 22px;
	--td-shadow-lg: 0 40px 100px -40px rgb(0 0 0 / 0.75);
	--td-shadow-gold: 0 24px 60px -28px rgb(201 164 103 / 0.55);

	--td-noise: 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Typography
   ========================================================================== */

/* Cormorant's default old-style "1" reads like a Roman "I" ("I 290 €", "I. Title"):
   lining numerals everywhere (inherited; Sofia Sans uses them anyway). */
body {
	font-variant-numeric: lining-nums;
}

h1,
h2,
h3,
h4 {
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.04;
}

h3,
.h3 {
	line-height: 1.12;
	letter-spacing: 0;
}

/* Accent words: <em> in headings and display text become italic gold. */
:is(h1, h2, h3, .statement__text) em {
	padding-right: 0.06em;
	background: var(--td-gold-grad-dark);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: italic;
	font-weight: 500;
}

:is(.section--dark, .hero, .page-hero, .cta-band, .price-card--featured, .service-card--accent) :is(h1, h2, h3, .statement__text) em {
	background-image: var(--td-gold-grad-text);
}

@media (forced-colors: active) {
	:is(h1, h2, h3, .statement__text) em {
		background: none;
		color: inherit;
	}
}

.lead {
	line-height: 1.7;
}

.eyebrow {
	letter-spacing: 0.22em;
}

.eyebrow::before,
.section-head--center .eyebrow::after {
	width: 2.5rem;
	background: linear-gradient(90deg, currentColor, transparent);
}

.section-head--center .eyebrow::after {
	background: linear-gradient(270deg, currentColor, transparent);
}

.section-head h2 {
	font-size: var(--td-text-3xl);
}

::selection {
	background: #c9a467;
	color: var(--td-ink-deep);
}

/* 3. Surfaces
   ========================================================================== */

.section--dark,
.site-footer {
	background: var(--td-noise), var(--td-ink);
}

/* Consecutive dark sections read as one chapter, divided by a hairline. */
.section--dark + .section--dark {
	position: relative;
}

.section--dark + .section--dark::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(var(--td-container), 100% - 2 * var(--td-gutter));
	height: 1px;
	background: var(--td-gold-line);
	opacity: 0.5;
	transform: translateX(-50%);
}

/* 4. Header
   ========================================================================== */

.site-header {
	border-bottom-color: transparent;
	background: var(--td-ink-deep);
	backdrop-filter: blur(18px) saturate(150%);
	transition:
		background-color 0.4s var(--td-ease),
		border-color 0.4s var(--td-ease);
}

.site-header.is-scrolled {
	border-bottom-color: rgb(201 164 103 / 0.16);
	background: rgb(12 13 15 / 0.94);
}

/* Reading progress hairline (scroll-driven; ignored where unsupported). */
@supports (animation-timeline: scroll()) {
	.site-header::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 100%;
		height: 1px;
		background: var(--td-gold-grad);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: td-progress linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes td-progress {
	to {
		transform: scaleX(1);
	}
}

@media (min-width: 64.0625em) {
	.site-nav__list > li > a {
		position: relative;
		letter-spacing: 0.01em;
	}

	.site-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.15rem;
		height: 1px;
		background: var(--td-gold-grad);
		transform: scaleX(0);
		transform-origin: 100% 50%;
		transition: transform 0.45s var(--td-ease);
	}

	.site-nav__list > li > a:hover::after,
	.site-nav__list > li > a[aria-current="page"]::after {
		transform: scaleX(1);
		transform-origin: 0 50%;
	}

	.site-nav__list > li > a:hover {
		color: var(--td-white);
	}

	.sub-menu {
		border-color: rgb(201 164 103 / 0.18);
		background: rgb(22 23 26 / 0.92);
		backdrop-filter: blur(18px);
	}
}

@media (max-width: 64em) {
	.site-nav {
		background: var(--td-noise), var(--td-ink-deep);
	}

	.site-nav__list a {
		font-size: var(--td-text-2xl);
	}
}

/* 5. Buttons and links
   ========================================================================== */

.btn,
.wp-block-button .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 3.25rem;
	padding: 0.875rem 1.75rem;
	border-radius: 999px;
	letter-spacing: 0.01em;
	transition:
		background-position 0.6s var(--td-ease),
		border-color 0.3s var(--td-ease),
		box-shadow 0.4s var(--td-ease),
		color 0.3s var(--td-ease),
		transform 0.4s var(--td-ease);
}

.btn--sm {
	min-height: 2.625rem;
	padding: 0.5rem 1.25rem;
}

.btn--primary,
.wp-block-button .wp-block-button__link {
	background: var(--td-gold-grad);
	background-size: 180% 100%;
	box-shadow:
		var(--td-shadow-gold),
		inset 0 1px 0 rgb(255 255 255 / 0.35);
	color: var(--td-ink-deep);
}

/* Sheen that sweeps across on hover. */
.btn--primary::before,
.wp-block-button:not(.is-style-secondary, .is-style-dark) .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.5) 50%, transparent 70%);
	transform: translateX(-130%);
	transition: transform 0.9s var(--td-ease);
}

.btn--primary:hover,
.wp-block-button .wp-block-button__link:hover {
	background: var(--td-gold-grad);
	background-position: 100% 0;
	background-size: 180% 100%;
	box-shadow:
		0 30px 70px -26px rgb(201 164 103 / 0.75),
		inset 0 1px 0 rgb(255 255 255 / 0.4);
	color: var(--td-ink-deep);
	transform: translateY(-2px);
}

.btn--primary:hover::before,
.wp-block-button:not(.is-style-secondary, .is-style-dark) .wp-block-button__link:hover::before {
	transform: translateX(130%);
}

.btn--secondary,
.wp-block-button.is-style-secondary .wp-block-button__link {
	border-color: rgb(201 164 103 / 0.45);
	background: rgb(255 255 255 / 0.02);
	box-shadow: none;
	backdrop-filter: blur(8px);
}

.btn--secondary:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	border-color: #c9a467;
	background: rgb(201 164 103 / 0.1);
	box-shadow: none;
	transform: translateY(-2px);
}

.btn--dark,
.wp-block-button.is-style-dark .wp-block-button__link {
	background: var(--td-ink);
	box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.6);
}

.btn--dark:hover,
.wp-block-button.is-style-dark .wp-block-button__link:hover {
	background: var(--td-ink-raised);
	transform: translateY(-2px);
}

p.link-arrow a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition:
		background-size 0.45s var(--td-ease),
		color 0.3s var(--td-ease);
}

p.link-arrow a:hover {
	background-size: calc(100% - 1.6em) 1px;
}

/* 6. Hero and page hero
   ========================================================================== */

.hero {
	display: grid;
	align-items: center;
	min-height: min(calc(100svh - var(--td-header-h)), 60rem);
	padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
	background: var(--td-noise), var(--td-ink-deep);
}

.hero::before {
	background:
		radial-gradient(60rem 38rem at 75% 35%, rgb(201 164 103 / 0.2), transparent 62%),
		radial-gradient(36rem 26rem at 5% 100%, rgb(201 164 103 / 0.08), transparent 70%),
		linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 72px 72px,
		linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 72px 72px;
	mask-image: radial-gradient(ellipse 90% 80% at 60% 40%, #000 40%, transparent 100%);
}

/* Slow drifting light. Decorative. */
.hero::after,
.page-hero::after {
	content: "";
	position: absolute;
	top: -18rem;
	right: -12rem;
	width: 52rem;
	height: 52rem;
	border-radius: 50%;
	background: conic-gradient(from 90deg, transparent, rgb(236 217 171 / 0.22), rgb(168 128 63 / 0.05) 45%, transparent 65%);
	filter: blur(70px);
	pointer-events: none;
	animation: td-aurora 22s ease-in-out infinite alternate;
}

.page-hero::after {
	top: -26rem;
	width: 44rem;
	height: 44rem;
	opacity: 0.8;
}

@media (max-width: 48em) {
	.hero::after,
	.page-hero::after {
		width: 30rem;
		height: 30rem;
		filter: blur(50px);
	}
}

@keyframes td-aurora {
	to {
		transform: translate(-10rem, 7rem) rotate(50deg) scale(1.15);
	}
}

.hero__inner {
	z-index: 1;
}

@media (min-width: 64em) {
	.hero__inner {
		grid-template-columns: 6fr 5fr;
	}
}

.hero__title {
	max-width: 16ch;
	font-size: var(--td-text-4xl);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.hero__lead {
	max-width: 33rem;
	color: #c9c4ba;
}

.hero__points {
	gap: var(--td-space-3);
	padding-top: 0;
	border-top: 0;
}

.hero__points li {
	padding: 0.4rem 0.9rem;
	border: 1px solid rgb(201 164 103 / 0.25);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.025);
	color: #d7d2c8;
}

.hero__points li::before {
	width: 1em;
	height: 1em;
	background: #c9a467;
}

.hero__visual {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

/* Warm glow beneath the devices. */
.hero__visual::before {
	content: "";
	position: absolute;
	inset: 20% 0 -6%;
	z-index: -1;
	background: radial-gradient(closest-side, rgb(201 164 103 / 0.32), transparent);
	filter: blur(30px);
}

.hero .devices {
	transform:
		perspective(1800px)
		rotateY(calc(-13deg + var(--td-ry, 0deg)))
		rotateX(calc(5deg + var(--td-rx, 0deg)));
	transform-style: preserve-3d;
	transition: transform 0.8s var(--td-ease);
}

.hero .device--laptop .device__screen {
	box-shadow:
		0 0 0 1px rgb(201 164 103 / 0.18),
		0 50px 120px -40px rgb(0 0 0 / 0.9);
}

.page-hero {
	background: var(--td-noise), var(--td-ink-deep);
	padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 3rem + 5vw, 7.5rem);
}

.page-hero__inner {
	z-index: 1;
}

.page-hero h1 {
	max-width: 26ch;
	font-size: clamp(2.375rem, 1.7rem + 2.4vw, 4rem);
	line-height: 1.06;
}

/* Breathing room between the title and the text under it. */
:is(.page-hero, .hero) h1 + * {
	margin-top: var(--td-space-6);
}

.section-head h2 + .lead {
	margin-top: var(--td-space-5);
}

.facts {
	border-color: rgb(201 164 103 / 0.22);
	background: linear-gradient(160deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015));
	backdrop-filter: blur(12px);
	box-shadow: var(--td-shadow-lg);
}

.facts__price {
	background: var(--td-gold-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: var(--td-text-3xl);
}

/* Facts card: airy rows, light values. */
.facts {
	gap: 0;
	padding: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}

.facts > div {
	padding-block: var(--td-space-5);
}

.facts > div:first-child {
	padding-top: 0;
}

.facts > div:last-child {
	padding-bottom: 0;
}

.facts > div + div {
	padding-top: var(--td-space-5);
}

.facts__label {
	margin-bottom: var(--td-space-2);
}

.facts > div > p:not(.facts__label) {
	margin-top: 0;
	color: #d7d2c8;
	font-size: var(--td-text-sm);
	font-weight: 400;
	line-height: 1.6;
}

/* Text values ("Индивидуална оферта", "Monthly plan"): calmer than the big figure. */
.facts__price--text {
	display: block;
	font-size: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
	font-style: italic;
	line-height: 1.15;
}

.facts__note {
	display: block;
	margin-top: var(--td-space-2);
	color: var(--td-text-muted);
	font-size: var(--td-text-xs);
	letter-spacing: 0.02em;
}

@media (forced-colors: active) {
	.facts__price {
		background: none;
		color: inherit;
	}
}

/* 7. Marquee (service names; pausable, see main.js)
   ========================================================================== */

.marquee {
	position: relative;
	overflow: hidden;
	padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-block: 1px solid rgb(201 164 103 / 0.16);
	background: var(--td-noise), var(--td-ink-deep);
}

.marquee__viewport {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2.75rem;
	margin: 0;
	padding: 0 1.375rem;
	list-style: none;
}

.marquee__list li {
	display: flex;
	align-items: center;
	gap: 2.75rem;
	color: #e9e6e0;
	font-family: var(--td-font-serif);
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.25rem);
	font-style: italic;
	line-height: 1.2;
	white-space: nowrap;
}

/* Small gold diamond between items. */
.marquee__list li::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	background: var(--td-gold-grad);
	transform: rotate(45deg);
}

.js .marquee__track {
	display: flex;
	width: max-content;
	animation: td-marquee 48s linear infinite;
}

.js .marquee__track .marquee__list {
	flex-wrap: nowrap;
}

.marquee.is-paused .marquee__track {
	animation-play-state: paused;
}

@keyframes td-marquee {
	to {
		transform: translateX(-50%);
	}
}

.marquee__toggle {
	position: absolute;
	top: 50%;
	right: var(--td-gutter);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgb(201 164 103 / 0.35);
	border-radius: 50%;
	background: rgb(12 13 15 / 0.85);
	color: #c9a467;
	transform: translateY(-50%);
}

.marquee__toggle:hover {
	border-color: #c9a467;
}

.marquee__toggle svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
}

/* 8. Sections
   ========================================================================== */

/* Statement: heading + lead on the left, three numbered points on the right. */
.statement {
	position: relative;
	overflow: hidden;
	padding-block: var(--td-space-section);
	background:
		radial-gradient(40rem 26rem at 100% 0%, rgb(201 164 103 / 0.14), transparent 65%),
		var(--td-cream);
}

.statement__inner {
	gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
	align-items: center;
}

.statement__head > * + * {
	margin-top: var(--td-space-5);
}

.statement__head h2 {
	font-size: var(--td-text-3xl);
}

.statement__head .lead {
	max-width: 30rem;
}

.statement__points {
	counter-reset: point;
	border-top: 1px solid rgb(168 128 63 / 0.3);
}

.statement__points li {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	column-gap: var(--td-space-5);
	padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	border-bottom: 1px solid rgb(168 128 63 / 0.3);
	color: var(--td-text-muted);
	transition: padding-left 0.5s var(--td-ease);
}

/* Big gold italic number spanning both rows. */
.statement__points li::before {
	counter-increment: point;
	content: counter(point, decimal-leading-zero);
	grid-row: span 2;
	background: var(--td-gold-grad-dark);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--td-font-serif);
	font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
	font-style: italic;
	line-height: 0.9;
}

.statement__points strong {
	display: block;
	margin-bottom: var(--td-space-2);
	color: var(--td-heading);
	font-family: var(--td-font-serif);
	font-size: var(--td-text-xl);
	font-weight: 600;
	line-height: 1.15;
}

@media (max-width: 40em) {
	.statement__points li {
		grid-template-columns: 3.25rem 1fr;
		column-gap: var(--td-space-4);
	}
}

.nowrap {
	white-space: nowrap;
}

@media (hover: hover) {
	.statement__points li:hover {
		padding-left: var(--td-space-3);
	}
}

@media (forced-colors: active) {
	.statement__points li::before {
		background: none;
		color: inherit;
	}
}

@media (min-width: 64em) {
	.statement__inner {
		grid-template-columns: 5fr 6fr;
	}
}

/* Text-only splits (heading | paragraphs): a framed panel with a gold divider. */
.split:not(:has(> :not(.split__copy))) {
	width: calc(100% - 2 * var(--td-gutter));
	max-width: var(--td-container);
	padding: clamp(2rem, 1.25rem + 3.5vw, 4.5rem);
	border-radius: var(--td-radius-lg);
	background:
		radial-gradient(32rem 22rem at 0% 0%, rgb(201 164 103 / 0.14), transparent 60%),
		linear-gradient(160deg, #fff, var(--td-cream));
	box-shadow:
		0 0 0 1px rgb(168 128 63 / 0.22),
		0 50px 90px -60px rgb(19 20 22 / 0.4);
	align-items: center;
}

.section--cream .split:not(:has(> :not(.split__copy))) {
	background:
		radial-gradient(32rem 22rem at 0% 0%, rgb(201 164 103 / 0.16), transparent 60%),
		#fff;
}

.section--dark .split:not(:has(> :not(.split__copy))) {
	background:
		radial-gradient(32rem 22rem at 0% 0%, rgb(201 164 103 / 0.18), transparent 60%),
		linear-gradient(160deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015));
	box-shadow:
		0 0 0 1px rgb(201 164 103 / 0.25),
		var(--td-shadow-lg);
}

.split:not(:has(> :not(.split__copy))) h2 {
	font-size: var(--td-text-3xl);
}

@media (min-width: 64em) {
	.split:not(:has(> :not(.split__copy))) > .split__copy + .split__copy {
		position: relative;
		padding-left: clamp(2rem, 1rem + 3vw, 4rem);
	}

	.split:not(:has(> :not(.split__copy))) > .split__copy + .split__copy::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 1px;
		background: linear-gradient(180deg, transparent, #a8803f, transparent);
	}
}

/* Icons: hairline circle instead of a filled box. */
.icon-box {
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid rgb(138 106 53 / 0.3);
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #fff, var(--td-gold-soft));
}

.section--dark .icon-box,
.service-card--accent .icon-box {
	border-color: rgb(201 164 103 / 0.35);
	background: radial-gradient(circle at 30% 25%, rgb(201 164 103 / 0.22), rgb(201 164 103 / 0.04));
	color: #d9be86;
}

/* Services */
.service-grid {
	counter-reset: service;
}

.service-card {
	overflow: hidden;
	counter-increment: service;
	padding: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	transition:
		border-color 0.4s var(--td-ease),
		box-shadow 0.5s var(--td-ease),
		transform 0.5s var(--td-ease);
}

/* Index in the corner. */
.service-card::after {
	content: counter(service, decimal-leading-zero);
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	color: var(--td-accent-text);
	font-family: var(--td-font-serif);
	font-size: 1.125rem;
	font-style: italic;
}

/* Spotlight that follows the pointer (--td-mx/--td-my set in main.js). */
.service-card::before,
.price-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(24rem circle at var(--td-mx, 50%) var(--td-my, -30%), rgb(201 164 103 / 0.16), transparent 45%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s var(--td-ease);
}

.service-card:hover::before,
.price-card:hover::after {
	opacity: 1;
}

.service-card:hover {
	border-color: rgb(201 164 103 / 0.55);
	box-shadow: 0 40px 80px -40px rgb(19 20 22 / 0.35);
	transform: translateY(-6px);
}

.service-card h3 {
	font-size: var(--td-text-xl);
}

.section--dark .service-card {
	border-color: rgb(255 255 255 / 0.08);
	background: linear-gradient(170deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.012));
}

.section--dark .service-card:hover {
	border-color: rgb(201 164 103 / 0.45);
	box-shadow:
		0 40px 90px -40px rgb(0 0 0 / 0.9),
		0 0 0 1px rgb(201 164 103 / 0.12);
}

.service-card--accent,
.section--dark .service-card--accent {
	border-color: rgb(201 164 103 / 0.4);
	background:
		radial-gradient(38rem 22rem at 100% 0%, rgb(201 164 103 / 0.3), transparent 60%),
		radial-gradient(20rem 14rem at 0% 100%, rgb(201 164 103 / 0.1), transparent 70%),
		linear-gradient(140deg, #201c15, #121214);
}

.service-card--accent h3 {
	font-size: var(--td-text-2xl);
}

/* Feature (obituaries) */
.feature__visual {
	position: relative;
	isolation: isolate;
}

.feature__visual::before {
	content: "";
	position: absolute;
	inset: 10% 5%;
	z-index: -1;
	background: radial-gradient(closest-side, rgb(201 164 103 / 0.26), transparent);
	filter: blur(30px);
}

.obit-mock {
	border-color: rgb(201 164 103 / 0.22);
	background: linear-gradient(165deg, #23252a, #17181b);
	transform: perspective(1600px) rotateY(8deg) rotateX(3deg);
}

.obit-mock__name {
	font-size: var(--td-text-2xl);
}

/* Why us */
.why-item {
	position: relative;
	padding-top: var(--td-space-6);
	border-top: 0;
}

/* Hairline that draws itself when revealed. */
.why-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #a8803f, rgb(168 128 63 / 0.15));
	transform: scaleX(var(--td-line, 1));
	transform-origin: 0 50%;
	transition: transform 1.4s var(--td-ease) 0.2s;
}

.why-item .why-item__num {
	margin-bottom: var(--td-space-5);
	background: var(--td-gold-grad-dark);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(2.75rem, 2.2rem + 2vw, 4rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
}

.section--dark .why-item__num {
	background-image: var(--td-gold-grad-text);
}

@media (forced-colors: active) {
	.why-item__num {
		background: none;
		color: inherit;
	}
}

.why-item h3 {
	font-size: var(--td-text-xl);
}

/* Portfolio */
.project-grid {
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.project-card__media {
	overflow: hidden;
	border-radius: var(--td-radius-lg);
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 0.06),
		0 40px 80px -40px rgb(0 0 0 / 0.7);
	transition:
		transform 0.8s var(--td-ease),
		box-shadow 0.8s var(--td-ease);
}

.project-card__media img {
	transition: transform 1.2s var(--td-ease);
}

.project-card:hover .project-card__media {
	box-shadow:
		0 0 0 1px rgb(201 164 103 / 0.35),
		0 50px 90px -40px rgb(0 0 0 / 0.8);
	transform: translateY(-6px);
}

.project-card:hover .project-card__media img {
	transform: scale(1.05);
}

.project-card__body .h3 {
	font-size: var(--td-text-2xl);
}

/* Process */
.process__step::before {
	width: 3rem;
	height: 3rem;
	background:
		linear-gradient(var(--td-ink), var(--td-ink)) padding-box,
		var(--td-gold-grad) border-box;
	border: 1px solid transparent;
	box-shadow:
		0 0 0 6px rgb(201 164 103 / 0.05),
		0 0 32px rgb(201 164 103 / 0.25);
	color: #d9be86;
	font-size: 1.125rem;
	font-style: italic;
}

.process__step {
	padding-top: 4.5rem;
}

.process__step h3 {
	font-size: var(--td-text-xl);
}

@media (min-width: 64em) {
	/* The connecting line draws itself when the step is revealed. */
	.process__step:not(:last-child)::after {
		top: 1.5rem;
		left: 4rem;
		background: linear-gradient(90deg, #c9a467, rgb(201 164 103 / 0.1));
		transform: scaleX(var(--td-line, 1));
		transform-origin: 0 50%;
		transition: transform 1.4s var(--td-ease) 0.3s;
	}
}

/* Pricing */
.price-card {
	transition:
		transform 0.5s var(--td-ease),
		box-shadow 0.5s var(--td-ease),
		border-color 0.4s var(--td-ease);
}

.price-card:hover {
	border-color: rgb(168 128 63 / 0.45);
	box-shadow: 0 40px 80px -44px rgb(19 20 22 / 0.4);
	transform: translateY(-6px);
}

.price-card__amount {
	font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
	font-weight: 500;
}

.price-card--featured {
	border-color: transparent;
	background:
		radial-gradient(30rem 18rem at 100% 0%, rgb(201 164 103 / 0.2), transparent 60%),
		var(--td-noise),
		var(--td-ink);
	box-shadow:
		0 50px 100px -40px rgb(19 20 22 / 0.7),
		var(--td-shadow-gold);
}

/* Animated gold border. */
.price-card--featured::before {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 1px;
	border-radius: inherit;
	background: conic-gradient(from var(--td-angle), rgb(201 164 103 / 0.15), #f0dfb6 10%, rgb(201 164 103 / 0.15) 25%, rgb(201 164 103 / 0.15) 60%, #c9a467 72%, rgb(201 164 103 / 0.15) 85%);
	mask:
		linear-gradient(#000 0 0) content-box exclude,
		linear-gradient(#000 0 0);
	pointer-events: none;
	animation: td-spin 9s linear infinite;
}

@keyframes td-spin {
	to {
		--td-angle: 360deg;
	}
}

.price-card--featured .price-card__amount {
	background: var(--td-gold-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (forced-colors: active) {
	.price-card--featured .price-card__amount {
		background: none;
		color: inherit;
	}
}

.badge--gold {
	background: var(--td-gold-grad);
	color: var(--td-ink-deep);
	box-shadow: var(--td-shadow-gold);
}

@media (min-width: 64em) {
	.price-card--featured {
		transform: translateY(-14px);
	}

	.price-card--featured:hover {
		transform: translateY(-20px);
	}
}

/* FAQ */
.faq-item summary {
	font-size: var(--td-text-xl);
	transition: color 0.3s var(--td-ease);
}

.faq-item summary:hover {
	color: var(--td-accent-text);
}

/* Contact */
.next-steps li::before {
	background: var(--td-gold-grad);
	color: var(--td-ink-deep);
}

.contact__form {
	border: 0;
	border-radius: var(--td-radius-lg);
	box-shadow:
		0 0 0 1px rgb(201 164 103 / 0.2),
		0 50px 120px -50px rgb(0 0 0 / 0.6);
}

/* The form is a light card, also inside dark sections: light tokens again. */
.contact__form {
	--td-text: var(--td-ink);
	--td-heading: var(--td-ink);
	--td-text-muted: var(--td-muted);
	--td-link: var(--td-gold-text);
	--td-accent-text: var(--td-gold-text);
	--td-border: var(--td-line);
	--td-focus: var(--td-gold-text);

	color: var(--td-text);
}

.section--dark .contact__form {
	box-shadow:
		0 0 0 1px rgb(201 164 103 / 0.3),
		0 60px 140px -50px rgb(0 0 0 / 0.95),
		0 0 120px -60px rgb(201 164 103 / 0.5);
}

/* Cards */
.card {
	transition:
		border-color 0.4s var(--td-ease),
		transform 0.5s var(--td-ease);
}

.card:has(a):hover {
	border-color: rgb(168 128 63 / 0.45);
	transform: translateY(-4px);
}

/* CTA band */
.cta-band {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	border: 1px solid rgb(201 164 103 / 0.25);
	background:
		radial-gradient(40rem 22rem at 100% 0%, rgb(201 164 103 / 0.28), transparent 65%),
		radial-gradient(24rem 16rem at 0% 100%, rgb(201 164 103 / 0.1), transparent 70%),
		var(--td-noise),
		var(--td-ink-deep);
	box-shadow: var(--td-shadow-lg);
}

/* Slow sheen across the band. */
.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 35%, rgb(236 217 171 / 0.07) 50%, transparent 65%);
	transform: translateX(-100%);
	animation: td-sheen 9s var(--td-ease) infinite;
	pointer-events: none;
}

@keyframes td-sheen {
	55%,
	100% {
		transform: translateX(100%);
	}
}

.cta-band h2 {
	font-size: var(--td-text-3xl);
}

/* Screenshots */
.shot img {
	border-top-color: #ebe6dc;
	border-radius: var(--td-radius-lg);
}

.section--dark .shot img {
	border-color: rgb(255 255 255 / 0.08);
	border-top-color: #2a2c30;
}

/* 9. Footer
   ========================================================================== */

.site-footer {
	position: relative;
	background: var(--td-noise), var(--td-ink-deep);
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--td-gold-line);
}

.site-footer__brand p {
	font-family: var(--td-font-serif);
	font-size: var(--td-text-xl);
	font-style: italic;
	line-height: 1.3;
}

/* 10. Motion
   ========================================================================== */

/* Reveal: fade and rise; siblings are staggered (--td-delay from main.js). */
.js :is([data-reveal], .reveal) {
	transform: translateY(32px);
	transition:
		opacity 1s var(--td-ease) var(--td-delay, 0ms),
		transform 1.2s var(--td-ease) var(--td-delay, 0ms);
}

/* Un-blur on large screens only (blur is costly on phones). */
@media (min-width: 64em) {
	.js :is([data-reveal], .reveal) {
		filter: blur(8px);
		transition:
			opacity 1s var(--td-ease) var(--td-delay, 0ms),
			transform 1.2s var(--td-ease) var(--td-delay, 0ms),
			filter 1s var(--td-ease) var(--td-delay, 0ms);
	}

	.js :is([data-reveal], .reveal).is-visible {
		filter: none;
	}
}

/* Lines that draw themselves once their item is revealed. */
.js :is(.why-item, .process__step).reveal:not(.is-visible) {
	--td-line: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.hero__visual {
		animation: td-float 8s ease-in-out infinite;
	}
}

@keyframes td-float {
	50% {
		transform: translateY(-14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js :is([data-reveal], .reveal) {
		filter: none;
	}

	.hero::after,
	.page-hero::after,
	.cta-band::before,
	.price-card--featured::before {
		animation: none;
	}

	.js .marquee__track {
		animation: none;
	}

	.js .marquee__track .marquee__list {
		flex-wrap: wrap;
	}

	.js .marquee__track .marquee__list[aria-hidden="true"] {
		display: none;
	}

	.marquee__toggle {
		display: none;
	}
}

/* Text pages (legal, blog posts): aligned to the full grid, readable line length. */
.container.prose > * {
	max-width: 52rem;
}

.container.prose > :is(.wp-block-image, .wp-block-table, figure) {
	max-width: none;
}

/* Five services: 3 columns, the accent card spans two (3 + 2 = two full rows). */
@media (min-width: 72em) {
	.service-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.service-card--accent {
		grid-column: span 2;
	}
}

/* ==========================================================================
   Inquiry CTA: gold pill + dark round chip with an arrow that turns ↗ on hover,
   a soft glow and a slow idle sheen. Applies to primary buttons with an arrow
   (theme .btn--primary .icon and editor buttons with the class has-arrow).
   ========================================================================== */

:root {
	--td-arrow-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd9ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.btn--primary:has(> .icon),
.wp-block-button.has-arrow:not(.is-style-secondary, .is-style-dark) .wp-block-button__link {
	gap: var(--td-space-4);
	min-height: 3.5rem;
	padding: 0.4rem 0.4rem 0.4rem 1.75rem;
	font-weight: 700;
	box-shadow:
		0 18px 44px -18px rgb(201 164 103 / 0.7),
		0 0 0 1px rgb(236 217 171 / 0.35) inset,
		inset 0 1px 0 rgb(255 255 255 / 0.45);
}

.btn--primary.btn--sm:has(> .icon) {
	min-height: 2.875rem;
	padding: 0.3rem 0.3rem 0.3rem 1.25rem;
	gap: var(--td-space-3);
}

.btn--primary.btn--block:has(> .icon) {
	justify-content: space-between;
}

/* The chip. */
.btn--primary > .icon {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.75rem;
	border-radius: 50%;
	background: var(--td-ink-deep);
	color: #ecd9ab;
	stroke-width: 2;
	box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.6);
	transition:
		transform 0.55s var(--td-ease),
		background-color 0.4s var(--td-ease);
}

.btn--primary.btn--sm > .icon {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0.6rem;
}

.wp-block-button.has-arrow:not(.is-style-secondary, .is-style-dark) .wp-block-button__link::after {
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--td-arrow-gold) center / 1.1rem no-repeat, var(--td-ink-deep);
	mask: none;
	box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.6);
	transition: transform 0.55s var(--td-ease);
}

.btn--primary:hover > .icon,
.btn--primary:focus-visible > .icon,
.wp-block-button.has-arrow:not(.is-style-secondary, .is-style-dark) .wp-block-button__link:is(:hover, :focus-visible)::after {
	transform: rotate(-45deg) scale(1.06);
}

.btn--primary:has(> .icon):hover,
.wp-block-button.has-arrow:not(.is-style-secondary, .is-style-dark) .wp-block-button__link:hover {
	box-shadow:
		0 26px 60px -20px rgb(201 164 103 / 0.9),
		0 0 0 1px rgb(236 217 171 / 0.5) inset,
		inset 0 1px 0 rgb(255 255 255 / 0.5);
}

/* Idle sheen every few seconds: the CTA catches the eye without blinking. */
@media (prefers-reduced-motion: no-preference) {
	.btn--primary:has(> .icon)::before,
	.wp-block-button.has-arrow:not(.is-style-secondary, .is-style-dark) .wp-block-button__link::before {
		animation: td-cta-sheen 6s var(--td-ease) infinite 1.5s;
	}
}

@keyframes td-cta-sheen {
	0% {
		transform: translateX(-130%);
	}

	22%,
	100% {
		transform: translateX(130%);
	}
}

/* Large variant (form submit). */
.btn--lg:has(> .icon) {
	min-height: 3.875rem;
	padding-left: 2rem;
	font-size: var(--td-text-lg);
}

.btn--lg > .icon {
	width: 3rem;
	height: 3rem;
}