/**
 * LosaLaw — Stilley-inspired component system
 *
 * @package LosaLaw
 * @since 4.0.0
 */

/* ========================================================================
   PERFORMANCE OVERRIDES — global paint-cost killers
   The legacy CSS used backdrop-filter: blur(10–20px) in 25+ places (hero
   badges, trust bars, CTA buttons, modals, notifications). Backdrop-filter
   is the single most expensive CSS property: it forces the GPU to
   re-rasterize the area behind the element on every frame anything is
   animating, scrolling, or being hovered. With multiple blurred elements
   on one page, scroll and hover noticeably drop frames.

   The translucent rgba(255,255,255,0.1) backgrounds already provide the
   frosted-glass look on a solid navy hero — the blur was doing very
   little visually but a lot of work computationally. Kill it globally
   to keep the interactive hover animations smooth.
   ======================================================================== */
*,
*::before,
*::after {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Kill brand-banned infinite hero animations. Per the brand spec these
   should never run, but legacy CSS still declares them, and on weaker GPUs
   an infinite `transform: translate` on a 120%-sized background image
   (`.hero-bg-parallax`) is a steady frame-rate drain. */
.hero-bg-parallax,
.hero-particles,
.hero-badge-animated,
.badge-icon,
.hero-floating-circle,
.scroll-wheel,
.scroll-arrow,
.scroll-down-modern,
.scroll-down-modern span,
.shimmer,
.pulse-glow {
	animation: none !important;
}

/* ========== De-AI overrides ========== */
.hero-particles,
.hero-scroll-indicator,
.scroll-indicator-landing,
.scroll-mouse,
.scroll-indicator {
	display: none !important;
}

@keyframes pulse-glow {
	0%, 100% { box-shadow: none; }
}

.hero-badge-animated,
.badge-icon {
	animation: none !important;
}

.hero-badge-animated {
	animation: none !important;
	box-shadow: none !important;
}

.badge-icon {
	animation: none !important;
	font-size: 0 !important;
}

.hero-bg-parallax {
	animation: none !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.gradient-text-light,
.result-amount {
	background: none !important;
	-webkit-text-fill-color: unset !important;
	color: #fff !important;
}

.testimonial-stars svg {
	fill: var(--color-accent, var(--brand-gold)) !important;
}

/* ========== Typography ========== */
.hero-title-cinematic,
.section-title-xl,
.cta-title-premium,
.timeline-title,
.team-name,
.card-title-premium {
	font-family: var(--font-display, 'Merriweather', Georgia, serif) !important;
	letter-spacing: -0.02em;
}

.hero-title-cinematic {
	font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
	text-transform: none !important;
	font-weight: 700 !important;
}

.section-title-xl {
	font-size: clamp(1.875rem, 4vw, 3rem) !important;
	text-transform: none !important;
}

.section-desc-large {
	max-width: 42rem;
}

.section-header-premium.center .section-desc-large {
	margin-left: auto;
	margin-right: auto;
}

/* ========== Surfaces ========== */
.sl-surface-cream,
.expertise-showcase.sl-surface-cream {
	background-color: var(--color-surface-cream, var(--brand-cream));
	background-image: repeating-linear-gradient(
		-12deg,
		transparent,
		transparent 40px,
		rgba(var(--brand-navy-rgb), 0.03) 40px,
		rgba(var(--brand-navy-rgb), 0.03) 41px
	);
}

.stats-credentials-section {
	background: #fff;
	padding: 120px 0;
}

.testimonials-premium.sl-surface-cream {
	background: var(--color-surface-cream, var(--brand-cream));
	padding: 120px 0;
}

/* ========== Hero editorial ========== */
.hero-cinematic {
	padding-top: 120px;
}

.hero-gradient-overlay {
	background: linear-gradient(
		105deg,
		rgba(var(--brand-navy-rgb), 0.94) 0%,
		rgba(var(--brand-navy-rgb), 0.78) 55%,
		rgba(var(--brand-navy-rgb), 0.58) 100%
	) !important;
}

.hero-cinematic::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 48px;
	background: var(--color-surface-cream, var(--brand-cream));
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	z-index: 3;
	pointer-events: none;
}

.hero-trust-bar {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.hero-trust-bar .trust-number {
	font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.hero-trust-bar .trust-label {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 500 !important;
}

/* ========== Unified practice cards ========== */
.expertise-card-premium .card-glow {
	display: none !important;
}

.expertise-card-premium .card-icon-premium {
	background: var(--color-accent-muted, rgba(var(--brand-gold-rgb), 0.18)) !important;
	color: var(--color-accent, var(--brand-gold)) !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 12px !important;
}

.expertise-card-premium .card-icon-premium svg {
	stroke: currentColor !important;
}

.expertise-card-premium .card-icon-premium svg [stroke="white"] {
	stroke: currentColor !important;
}

.expertise-card-premium {
	background: #fff !important;
	border: 1px solid var(--color-border, #e2e8f0) !important;
	box-shadow: 0 1px 3px rgba(26, 32, 44, 0.06) !important;
}

.expertise-card-premium:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 40px rgba(26, 32, 44, 0.1) !important;
}

.expertise-card-premium .card-stats {
	display: none !important;
}

.sl-diamond-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
}

.sl-diamond-list li {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-light, #64748b);
	line-height: 1.5;
}

.sl-diamond-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	background: var(--color-accent, var(--brand-gold));
	transform: rotate(45deg);
}

.sl-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--brand-copper-soft);
	color: var(--brand-copper);
	border: 1px solid rgba(var(--brand-copper-rgb), 0.22);
	border-radius: 12px;
	margin-bottom: 1.25rem;
}

.sl-icon-wrap .sl-icon { stroke: var(--brand-copper); }

/* Contextual variant — icon wraps on NAVY surfaces.
   A warm copper-tinted fill that ties the navy card and the copper stroke
   together instead of dropping a dark hole onto the navy. */
.results-showcase .sl-icon-wrap,
.hp-hero .sl-icon-wrap,
.hp-process .sl-icon-wrap,
.site-footer .sl-icon-wrap,
.pre-footer-cta .sl-icon-wrap,
.hp-principles__card .sl-icon-wrap,
.about-hero-cinematic .sl-icon-wrap,
.services-hero-cinematic .sl-icon-wrap,
.contact-hero-cinematic .sl-icon-wrap,
.landing-hero .sl-icon-wrap {
	background: rgba(var(--brand-copper-rgb), 0.14);
	border-color: rgba(var(--brand-copper-rgb), 0.45);
	color: var(--brand-copper);
}

.results-showcase .sl-icon-wrap .sl-icon,
.hp-hero .sl-icon-wrap .sl-icon,
.hp-process .sl-icon-wrap .sl-icon,
.site-footer .sl-icon-wrap .sl-icon,
.pre-footer-cta .sl-icon-wrap .sl-icon,
.hp-principles__card .sl-icon-wrap .sl-icon,
.about-hero-cinematic .sl-icon-wrap .sl-icon,
.services-hero-cinematic .sl-icon-wrap .sl-icon,
.contact-hero-cinematic .sl-icon-wrap .sl-icon,
.landing-hero .sl-icon-wrap .sl-icon {
	stroke: var(--brand-copper);
}

/* Obsidian-only variant — for the .sl-band-orange contrast band.
   Graphite here gives a slight raised-disc feel against the near-black bg. */
.sl-band-orange .sl-icon-wrap {
	background: var(--brand-graphite);
	border-color: rgba(var(--brand-copper-rgb), 0.35);
	color: var(--brand-copper);
}

.sl-band-orange .sl-icon-wrap .sl-icon {
	stroke: var(--brand-copper);
}

/* ========== Values diamond ========== */
.value-card .value-icon {
	background: var(--color-accent-muted) !important;
	color: var(--color-accent) !important;
}

.value-card:hover .value-icon {
	background: var(--color-accent, var(--brand-gold)) !important;
	color: var(--color-primary, var(--brand-navy)) !important;
	transform: scale(1.05) !important;
}

.value-title::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--color-accent);
	transform: rotate(45deg);
	margin-right: 0.5rem;
	vertical-align: middle;
}

/* ========== Unified copper hairline for dark interior bands ==========
   Echoes the logo's black-frame motif. Applies to any dark CTA / feature
   band rendered between bone sections on interior pages. */
.vision-future-section,
.cta-premium,
.emergency-contact-section,
.landing-process,
.landing-final-cta {
	border-top: 1px solid rgba(var(--brand-copper-rgb), 0.18);
	border-bottom: 1px solid rgba(var(--brand-copper-rgb), 0.18);
}

/* ========== Obsidian feature band (copper accents) ========== */
.results-showcase.sl-band-orange {
	background: var(--brand-obsidian) !important;
	border-top: 1px solid rgba(var(--brand-copper-rgb), 0.18);
	border-bottom: 1px solid rgba(var(--brand-copper-rgb), 0.18);
	padding: 100px 0 120px;
	position: relative;
	overflow: visible;
}

.results-showcase.sl-band-orange .results-bg-pattern {
	display: none;
}

.results-showcase.sl-band-orange::after {
	content: '';
	position: absolute;
	bottom: -48px;
	left: 0;
	right: 0;
	height: 48px;
	background: var(--brand-bone);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	z-index: 2;
}

.results-showcase.sl-band-orange .section-badge.light,
.results-showcase.sl-band-orange .section-title-xl.light,
.results-showcase.sl-band-orange .section-desc-large.light {
	color: #fff !important;
}

.results-showcase.sl-band-orange .gradient-text-light {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.results-grid {
	display: none !important;
}

.sl-case-spotlight {
	position: relative;
	max-width: 900px;
	margin: 3rem auto 0;
	overflow: hidden;
}

.sl-case-track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sl-case-slide {
	flex: 0 0 100%;
	min-width: 100%;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 12px;
	color: #fff;
}

.sl-case-outcome {
	font-family: var(--font-display, Merriweather, serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-shrink: 0;
	min-width: 140px;
}

.sl-case-divider {
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
}

.sl-case-detail h3 {
	font-family: var(--font-display, Merriweather, serif);
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.sl-case-detail p {
	font-size: 0.9375rem;
	opacity: 0.95;
	margin-bottom: 0.25rem;
}

.sl-case-year {
	font-size: 0.8125rem;
	opacity: 0.75;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.sl-case-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.sl-case-nav-btn {
	width: 44px;
	height: 44px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.3s, background 0.3s;
}

.sl-case-nav-btn:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.sl-case-dots {
	display: flex;
	gap: 8px;
}

.sl-case-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	padding: 0;
}

.sl-case-dot.active {
	background: #fff;
}

.sl-legal-note {
	font-size: 0.8125rem;
	text-align: center;
	margin-top: 1.5rem;
	opacity: 0.85;
	color: #fff;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

/* ========== Testimonials cream ========== */
.testimonial-card-premium {
	background: #fff !important;
	border: 1px solid var(--color-border) !important;
}

.testimonial-quote {
	font-family: var(--font-display, Merriweather, serif) !important;
	font-style: italic;
}

.testimonials-slider {
	overflow: hidden;
}

.testimonials-track {
	display: flex;
	transition: transform 0.55s ease;
}

.testimonial-card-premium.testimonial-slide {
	flex: 0 0 100%;
	min-width: 100%;
	box-sizing: border-box;
}

/* ========== CTA navy ========== */
.cta-premium.sl-band-navy .cta-bg-gradient {
	display: none !important;
}

.cta-premium.sl-band-navy {
	background: var(--color-primary, var(--brand-navy)) !important;
}

.cta-trust-indicators svg {
	color: var(--color-accent, var(--brand-gold)) !important;
}

/* ========== Stat icons ========== */
.stat-icon-wrapper {
	width: 72px;
	height: 72px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent-muted);
	color: var(--color-accent);
	border-radius: 12px;
}

.stat-icon-wrapper svg {
	width: 36px;
	height: 36px;
	stroke: currentColor;
	fill: none;
}

.stat-number-large {
	background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-light)) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* ========== Team editorial ========== */
.team-card-premium .team-overlay {
	background: linear-gradient(180deg, transparent 40%, rgba(26, 32, 44, 0.85) 100%) !important;
	opacity: 1 !important;
}

.team-card-premium .team-link-btn {
	opacity: 0;
	transition: opacity 0.3s;
}

.team-card-premium:hover .team-link-btn {
	opacity: 1;
}

/* ========== Header scroll — stays navy, just compresses slightly
   so the page feels like it slid under a refined nav bar, not under
   a totally different color scheme. ========== */
.site-header.scrolled {
	background: var(--brand-navy-deep) !important;
	border-bottom: 1px solid rgba(var(--brand-copper-rgb), 0.42) !important;
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45) !important;
}

.site-header.scrolled .header-top-bar {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.site-header .header-top-bar {
	max-height: 60px;
	opacity: 1;
	transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.site-header.scrolled .header-main {
	padding-top: 10px;
	padding-bottom: 10px;
	transition: padding 0.35s ease;
}

.site-header .header-main {
	transition: padding 0.35s ease;
}

/* Logo, nav, and toggles stay white-on-navy throughout (no swap on scroll). */
.site-header.scrolled .logo-l,
.site-header.scrolled .logo-s,
.site-header.scrolled .logo-a {
	color: var(--brand-snow);
}

.site-header.scrolled .logo-full-name {
	color: var(--brand-snow-muted);
}

.site-header.scrolled .logo-o {
	color: var(--brand-copper);
}

.site-header.scrolled .primary-menu > li > a {
	color: var(--brand-snow);
}

.site-header.scrolled .primary-menu > li > a:hover,
.site-header.scrolled .primary-menu > li > a:focus-visible,
.site-header.scrolled .primary-menu .current-menu-item > a {
	color: var(--brand-copper);
}

.site-header.scrolled .search-toggle {
	color: var(--brand-snow);
	border-color: rgba(var(--brand-copper-rgb), 0.45);
}

.reading-progress-bar {
	background: var(--color-accent, var(--brand-gold)) !important;
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
	.hero-bg-parallax,
	.hero-badge-animated,
	.badge-icon,
	.expertise-card-premium,
	.team-card-premium .team-image {
		animation: none !important;
		transition: none !important;
	}
}

/* ========== Inner pages — unified practice cards ========== */
.practice-card-glow,
.practice-area-card-main .practice-card-glow {
	display: none !important;
}

.practice-card-icon,
.practice-area-card-main .practice-card-icon,
.service-icon-landing {
	background: var(--color-accent-muted) !important;
	color: var(--color-accent) !important;
}

.practice-card-icon svg,
.practice-area-card-main .practice-card-icon svg,
.service-icon-landing svg {
	stroke: currentColor !important;
}

.practice-card-icon svg [stroke="white"],
.practice-area-card-main .practice-card-icon svg [stroke="white"] {
	stroke: currentColor !important;
}

.practice-areas-main-section,
.practice-link-icon {
	background-color: var(--color-surface-cream, var(--brand-cream));
}

.practice-link-icon {
	background: var(--color-accent-muted) !important;
	color: var(--color-accent) !important;
}

.scroll-indicator,
.services-hero-cinematic .scroll-indicator {
	display: none !important;
}

svg[fill="#FFD700"],
.testimonial-stars svg[fill="#FFD700"] {
	fill: var(--color-accent, var(--brand-gold)) !important;
}

.gradient-text-light {
	background: none !important;
	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
}

.practice-card-highlights li::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--color-accent);
	transform: rotate(45deg);
	margin-right: 0.5rem;
	vertical-align: middle;
}

@media (max-width: 768px) {
	.sl-case-slide {
		flex-direction: column;
		text-align: center;
	}

	.sl-case-divider {
		width: 60px;
		height: 1px;
		align-self: center;
	}

	.hero-cinematic {
		padding-top: 100px;
	}
}

/* ========== Brand system — reference components ========== */
/**
 * Header top bar (navy band + gold accents)
 * <motion.header class="sl-header-bar">...</motion.header>
 */
.sl-header-bar {
	background: var(--gradient-brand-navy);
	color: var(--color-on-primary);
	border-bottom: 1px solid rgba(var(--brand-gold-rgb), 0.25);
}

.sl-header-bar a {
	color: var(--color-on-primary);
}

.sl-header-bar a:hover,
.sl-header-bar a:focus-visible {
	color: var(--brand-gold);
}

.sl-header-bar .sl-icon {
	stroke: var(--brand-copper);
}

/**
 * Content card on cream section background
 * <article class="sl-card">...</article>
 */
.sl-card {
	background: var(--brand-white);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(var(--brand-navy-rgb), 0.06);
	padding: var(--space-lg, 2rem);
}

.sl-card__title {
	font-family: var(--font-display);
	color: var(--brand-navy);
	margin-bottom: var(--space-sm, 1rem);
}

.sl-card__body {
	color: var(--color-text);
}

.sl-card__meta {
	color: var(--color-text-light);
	border-top: 1px solid var(--color-divider);
	padding-top: var(--space-sm, 1rem);
	margin-top: var(--space-md, 1.5rem);
}

/**
 * Buttons — navy primary (AA+), gold accent CTA
 * <a class="sl-btn sl-btn--primary">Consultation</a>
 * <a class="sl-btn sl-btn--accent">Learn more</a>
 */
.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border-radius: 8px;
	border: 2px solid transparent;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sl-btn--primary {
	background: var(--brand-navy);
	color: var(--color-on-primary);
	box-shadow: 0 4px 12px rgba(var(--brand-navy-rgb), 0.25);
}

.sl-btn--primary:hover,
.sl-btn--primary:focus-visible {
	background: var(--brand-navy-dark);
	color: var(--color-on-primary);
	box-shadow: 0 6px 20px rgba(var(--brand-navy-rgb), 0.35);
}

.sl-btn--accent {
	background: var(--brand-gold);
	color: var(--color-on-accent);
	box-shadow: 0 4px 12px rgba(var(--brand-gold-rgb), 0.35);
}

.sl-btn--accent:hover,
.sl-btn--accent:focus-visible {
	background: var(--brand-gold-dark);
	color: var(--color-on-accent);
}

.sl-btn--outline {
	background: transparent;
	color: var(--brand-navy);
	border-color: var(--brand-navy);
}

.sl-btn--outline:hover,
.sl-btn--outline:focus-visible {
	background: var(--brand-navy);
	color: var(--color-on-primary);
}