/* ============================================================
 * Litigation Docs — front.css
 * Homepage: editorial two-column hero, pillars, featured, close.
 *
 * Design note on the hero: the section renders on a solid ink
 * background so it works in every condition — video playing,
 * video paused (reduced motion), slow connection, print export,
 * screenshot. The courtroom video is a framed atmospheric inset
 * on the right, not a full-bleed background. This removes the
 * failure mode where a stripped video leaves low-contrast text
 * floating on parchment.
 * ============================================================ */

/* --- Hero -------------------------------------------------------------- */
.ld-hero {
	background: var(--ld-ink);
	color: #F7F3EC;
	padding: var(--ld-s-7) 0;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
	print-color-adjust: exact;
}

/* Defensive color rules: use explicit hex + high specificity so nothing
   can null these out. In prior live testing, CSS-variable-based colors
   were getting overridden somewhere (possibly by a block-editor / plugin
   rule shadowing `.ld-hero__headline`). Hex + specificity + element
   selectors beats anything short of !important. */
section.ld-hero .ld-hero__content,
section.ld-hero .ld-hero__content * { color: #F7F3EC; }
section.ld-hero .ld-hero__kicker { color: rgba(247, 243, 236, 0.72); }
section.ld-hero .ld-hero__kicker-sigil { color: #AC1F2B; }
section.ld-hero .ld-hero__headline { color: #F7F3EC; }
section.ld-hero .ld-hero__headline em { color: #F7F3EC; font-style: italic; font-weight: 400; }
section.ld-hero .ld-hero__subhead { color: rgba(247, 243, 236, 0.82); }
section.ld-hero .ld-hero__signoff { color: rgba(247, 243, 236, 0.56); }
section.ld-hero .ld-hero__actions .ld-btn--primary { color: #F7F3EC; background: #AC1F2B; border-color: #AC1F2B; }
section.ld-hero .ld-hero__actions .ld-btn--primary:hover { background: #7D1620; border-color: #7D1620; }
section.ld-hero .ld-hero__actions .ld-btn--ghost { color: #F7F3EC; border-color: rgba(247, 243, 236, 0.35); background: transparent; }
section.ld-hero .ld-hero__actions .ld-btn--ghost:hover { background: #F7F3EC; color: #0E0E10; border-color: #F7F3EC; }
.ld-hero::before {
	content: '';
	position: absolute; inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(70% 90% at 85% 10%, rgba(172, 31, 43, 0.28), transparent 60%),
		radial-gradient(50% 60% at 10% 90%, rgba(172, 31, 43, 0.12), transparent 70%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
	background-size: auto, auto, 220px;
}
.ld-hero::after {
	content: '';
	position: absolute; inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 47px,
		rgba(247, 243, 236, 0.03) 47px,
		rgba(247, 243, 236, 0.03) 48px
	);
}

.ld-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--ld-wide);
	margin-inline: auto;
	padding: 0 var(--ld-s-4);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--ld-s-6);
	align-items: center;
}
@media (min-width: 1024px) {
	.ld-hero__inner { padding-inline: var(--ld-s-5); gap: var(--ld-s-7); }
}
@media (max-width: 900px) {
	.ld-hero__inner { grid-template-columns: 1fr; gap: var(--ld-s-5); }
}

.ld-hero__content { max-width: 620px; }

.ld-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--ld-s-3);
	font-family: var(--ld-mono);
	font-size: var(--ld-fs-xs);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(247, 243, 236, 0.72);
	margin: 0 0 var(--ld-s-4);
}
.ld-hero__kicker::before {
	content: '';
	width: 32px; height: 1px;
	background: var(--ld-crimson);
	display: inline-block;
	flex-shrink: 0;
}
.ld-hero__kicker-sigil {
	font-family: var(--ld-serif);
	font-style: italic;
	font-size: var(--ld-fs-sm);
	letter-spacing: 0;
	color: var(--ld-crimson);
	text-transform: none;
}

.ld-hero__headline {
	font-family: var(--ld-serif);
	font-size: clamp(2.75rem, 4vw + 1.5rem, 5.25rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: var(--ld-parchment);
	margin: 0 0 var(--ld-s-4);
	font-weight: 500;
	font-feature-settings: 'ss01';
	font-variation-settings: 'SOFT' 50, 'WONK' 1;
}
.ld-hero__headline em,
.ld-hero__headline .italic {
	font-style: italic;
	font-weight: 400;
}

.ld-hero__subhead {
	font-size: var(--ld-fs-md);
	line-height: 1.5;
	color: rgba(247, 243, 236, 0.82);
	max-width: 48ch;
	margin: 0 0 var(--ld-s-5);
}

.ld-hero__actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ld-s-3);
	margin-bottom: var(--ld-s-5);
}
.ld-hero__actions .ld-btn--ghost {
	color: var(--ld-parchment);
	border-color: rgba(247, 243, 236, 0.35);
}
.ld-hero__actions .ld-btn--ghost:hover {
	background: var(--ld-parchment);
	color: var(--ld-ink);
	border-color: var(--ld-parchment);
}

.ld-hero__signoff {
	display: flex;
	align-items: center;
	gap: var(--ld-s-3);
	padding-top: var(--ld-s-4);
	border-top: 1px solid rgba(247, 243, 236, 0.12);
	font-family: var(--ld-mono);
	font-size: var(--ld-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(247, 243, 236, 0.56);
}
.ld-hero__signoff-glyph {
	width: 16px; height: 16px;
	flex-shrink: 0;
	background: url("../img/favicon-512.png") center/contain no-repeat;
	opacity: 0.7;
}

.ld-hero__visual {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	overflow: hidden;
	background: #1a1a1c;
	box-shadow:
		0 0 0 1px rgba(247, 243, 236, 0.08),
		0 30px 60px -20px rgba(0, 0, 0, 0.6),
		0 0 80px -20px rgba(172, 31, 43, 0.25);
}
@media (max-width: 900px) {
	.ld-hero__visual { aspect-ratio: 16 / 9; max-width: 620px; margin-inline: auto; }
}
.ld-hero__video {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.85) contrast(1.05);
}
.ld-hero__visual::after {
	content: '';
	position: absolute; inset: 0;
	background:
		linear-gradient(220deg, transparent 30%, rgba(14, 14, 16, 0.35) 100%),
		linear-gradient(20deg, rgba(172, 31, 43, 0.12), transparent 50%);
	pointer-events: none;
}
.ld-hero__visual-caption {
	position: absolute;
	left: var(--ld-s-3); bottom: var(--ld-s-3);
	z-index: 2;
	font-family: var(--ld-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(247, 243, 236, 0.72);
	padding: 6px 10px;
	background: rgba(14, 14, 16, 0.72);
	backdrop-filter: blur(6px);
	border-radius: 2px;
}

/* --- Trust section ---------------------------------------------------- */
.ld-trust-section {
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
	print-color-adjust: exact;
}

/* --- Pillars ----------------------------------------------------------- */
.ld-pillars {
	padding: var(--ld-s-7) 0;
	position: relative;
}
.ld-pillars__inner {
	max-width: var(--ld-wide);
	margin-inline: auto;
	padding: 0 var(--ld-s-4);
}
@media (min-width: 768px) { .ld-pillars__inner { padding-inline: var(--ld-s-5); } }

.ld-pillars__heading {
	font-size: clamp(1.875rem, 2vw + 1rem, var(--ld-fs-2xl));
	max-width: 26ch;
	margin: 0 0 var(--ld-s-6);
	letter-spacing: -0.015em;
}
.ld-pillars__grid {
	display: grid;
	gap: var(--ld-s-4);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .ld-pillars__grid { grid-template-columns: 1fr; gap: var(--ld-s-3); } }

.ld-pillar {
	padding: var(--ld-s-5);
	background: var(--ld-white);
	border: 1px solid var(--ld-rule);
	border-radius: var(--ld-radius-lg);
	position: relative;
	transition: transform var(--ld-d-std) var(--ld-ease),
	            box-shadow var(--ld-d-std) var(--ld-ease);
}
.ld-pillar:hover { transform: translateY(-3px); box-shadow: var(--ld-shadow-soft); }
.ld-pillar__numeral {
	font-family: var(--ld-serif);
	font-size: var(--ld-fs-md);
	font-style: italic;
	font-weight: 400;
	color: var(--ld-crimson);
	display: block;
	margin-bottom: var(--ld-s-3);
}
.ld-pillar__title {
	font-size: var(--ld-fs-lg);
	margin-bottom: var(--ld-s-3);
	line-height: 1.15;
}
.ld-pillar p {
	font-size: var(--ld-fs-sm);
	color: var(--ld-slate);
	line-height: 1.65;
	margin: 0;
	max-width: none;
}

/* --- Featured services ------------------------------------------------- */
.ld-featured {
	padding: var(--ld-s-7) 0;
	background: var(--ld-parchment-alt);
	position: relative;
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
	print-color-adjust: exact;
}
.ld-featured::before {
	content: '';
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--ld-rule) 31px, var(--ld-rule) 32px);
	opacity: 0.4;
	pointer-events: none;
}
.ld-featured__inner {
	max-width: var(--ld-wide);
	margin-inline: auto;
	padding: 0 var(--ld-s-4);
	position: relative;
}
.ld-featured__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ld-s-4);
	margin-bottom: var(--ld-s-5);
	padding-bottom: var(--ld-s-3);
	border-bottom: 1px solid var(--ld-rule);
	flex-wrap: wrap;
}
.ld-featured__kicker {
	font-family: var(--ld-mono);
	font-size: var(--ld-fs-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ld-crimson);
	margin: 0 0 var(--ld-s-2);
}
.ld-featured__heading { font-size: var(--ld-fs-2xl); margin: 0; max-width: 24ch; letter-spacing: -0.015em; }
.ld-featured__all {
	color: var(--ld-ink);
	font-weight: 600;
	font-size: var(--ld-fs-sm);
	white-space: nowrap;
	align-self: flex-end;
}

.ld-featured__grid {
	list-style: none;
	padding: 0; margin: 0;
	display: grid;
	gap: var(--ld-s-4);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .ld-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ld-featured__grid { grid-template-columns: 1fr; } }

.ld-featured__card {
	padding: var(--ld-s-4);
	background: var(--ld-white);
	border: 1px solid var(--ld-rule);
	border-radius: var(--ld-radius-lg);
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: transform var(--ld-d-std) var(--ld-ease), box-shadow var(--ld-d-std) var(--ld-ease);
}
.ld-featured__card:hover { transform: translateY(-3px); box-shadow: var(--ld-shadow-soft); }

.ld-featured__card h3 {
	font-size: var(--ld-fs-lg);
	line-height: 1.15;
	margin: 0 0 var(--ld-s-2);
	min-height: 2.3em;
}
.ld-featured__card h3 a { color: var(--ld-ink); }
.ld-featured__card h3 a:hover { color: var(--ld-crimson); }

.ld-featured__desc {
	font-size: var(--ld-fs-sm);
	color: var(--ld-muted);
	line-height: 1.55;
	flex: 1;
	margin: 0 0 var(--ld-s-3);
}

.ld-featured__meta {
	margin: auto 0 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ld-s-3);
	padding-top: var(--ld-s-3);
	border-top: 1px solid var(--ld-rule);
}
.ld-featured__meta > span {
	font-size: var(--ld-fs-xs);
	color: var(--ld-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	flex-shrink: 0;
}
.ld-featured__meta strong {
	font-family: var(--ld-serif);
	font-weight: 500;
	color: var(--ld-crimson);
	font-size: var(--ld-fs-md);
	text-align: right;
	line-height: 1.2;
	min-width: 0;
	overflow-wrap: anywhere;
}
.ld-featured__meta strong .woocommerce-Price-amount,
.ld-featured__meta strong .amount {
	font-size: var(--ld-fs-lg);
}

/* --- Close / CTA section ---------------------------------------------- */
.ld-close {
	background: var(--ld-ink);
	color: var(--ld-parchment);
	padding: var(--ld-s-7) 0;
	text-align: center;
	position: relative;
	isolation: isolate;
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
	print-color-adjust: exact;
}
.ld-close::before {
	content: '';
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(60% 80% at 50% 0%, rgba(172, 31, 43, 0.22), transparent 70%);
}
.ld-close__inner { max-width: 760px; margin-inline: auto; padding: 0 var(--ld-s-4); }
.ld-close__heading {
	font-size: clamp(2rem, 3vw + 1rem, var(--ld-fs-3xl));
	color: var(--ld-parchment);
	max-width: 28ch;
	margin-inline: auto;
	letter-spacing: -0.015em;
}
.ld-close__sub {
	color: rgba(247, 243, 236, 0.74);
	margin: 0 auto var(--ld-s-5);
	max-width: 52ch;
}