/*
Theme Name: Lexora
Theme URI: https://example.com/lexora
Author: Lexora
Author URI: https://example.com
Description: An ultra-light, dependency-free one-page theme for law firms and professional practices. Includes custom post types for practice areas, attorneys and case studies, a full-featured blog, and deep Customizer control over colours, typography, layout and section order. No jQuery, no page builder, no icon fonts.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lexora
Tags: one-column, two-columns, right-sidebar, left-sidebar, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks, blog
*/

/* ==========================================================================
   1. Tokens
   Values here are fallbacks. inc/dynamic-css.php overrides them from the
   Customizer, so this file stays static and cacheable.
   ========================================================================== */

:root {
	--lx-primary: #14304a;
	--lx-primary-rgb: 20, 48, 74;
	--lx-primary-dark: #10273d;
	--lx-primary-light: #e8edf2;
	--lx-primary-contrast: #ffffff;
	--lx-accent: #9a6b2f;
	--lx-accent-rgb: 154, 107, 47;
	--lx-accent-dark: #7f5827;
	--lx-accent-light: #f6efe4;
	--lx-accent-contrast: #ffffff;
	--lx-dark: #0d1f30;
	--lx-dark-rgb: 13, 31, 48;
	--lx-heading: #14213a;
	--lx-body: #525f6e;
	--lx-surface: #ffffff;
	--lx-muted: #f3f1ec;
	--lx-border: #ddd8ce;

	--lx-topbar-bg: #0d1f30;
	--lx-topbar-text: #b9c4d0;
	--lx-header-bg: #ffffff;
	--lx-header-text: #14213a;
	--lx-hero-text: #ffffff;
	--lx-footer-bg: #0d1f30;
	--lx-footer-text: #9daebd;
	--lx-footer-heading: #ffffff;

	--lx-font-heading: Georgia, "Times New Roman", serif;
	--lx-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--lx-fs-base: 16px;
	--lx-fw-heading: 600;
	--lx-fs-h6: 1.25rem;
	--lx-fs-h5: 1.563rem;
	--lx-fs-h4: 1.953rem;
	--lx-fs-h3: 2.441rem;
	--lx-fs-h2: 3.052rem;
	--lx-fs-h1: 3.815rem;

	--lx-container: 1200px;
	--lx-section-pad: 100px;
	--lx-radius: 4px;
	--lx-radius-btn: 0px;
	--lx-gap: 30px;

	--lx-hero-height: 88vh;
	--lx-hero-overlay: 0.62;
	--lx-counter-overlay: 0.88;

	--lx-anim-duration: 700ms;
	--lx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--lx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--lx-shadow-sm: 0 2px 8px rgba(var(--lx-dark-rgb), 0.06);
	--lx-shadow: 0 10px 30px rgba(var(--lx-dark-rgb), 0.08);
	--lx-shadow-lg: 0 24px 60px rgba(var(--lx-dark-rgb), 0.14);

	--lx-header-h: 84px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--lx-font-body);
	font-size: var(--lx-fs-base);
	line-height: 1.75;
	color: var(--lx-body);
	background: var(--lx-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.lx-nav-open {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-family: var(--lx-font-heading);
	font-weight: var(--lx-fw-heading);
	line-height: 1.2;
	color: var(--lx-heading);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--lx-fs-h1); }
h2 { font-size: var(--lx-fs-h2); }
h3 { font-size: var(--lx-fs-h4); }
h4 { font-size: var(--lx-fs-h5); }
h5 { font-size: var(--lx-fs-h6); }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--lx-primary);
	text-decoration: none;
	transition: color 0.25s var(--lx-ease);
}

a:hover { color: var(--lx-accent); }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0 0 1.25em; padding-left: 1.2em; }

blockquote {
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border-left: 3px solid var(--lx-accent);
	background: var(--lx-muted);
	font-style: italic;
	color: var(--lx-heading);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
}

pre {
	padding: 1.25em;
	overflow-x: auto;
	background: var(--lx-dark);
	color: #e6edf3;
	border-radius: var(--lx-radius);
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

th, td {
	padding: 0.7em 1em;
	border: 1px solid var(--lx-border);
	text-align: left;
}

th { background: var(--lx-muted); color: var(--lx-heading); font-weight: 600; }

input, textarea, select, button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 0.85em 1.1em;
	background: var(--lx-surface);
	border: 1px solid var(--lx-border);
	border-radius: var(--lx-radius);
	transition: border-color 0.25s var(--lx-ease), box-shadow 0.25s var(--lx-ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--lx-accent);
	box-shadow: 0 0 0 3px rgba(var(--lx-accent-rgb), 0.16);
}

textarea { min-height: 150px; resize: vertical; }

/* Accessibility */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 0.8em 1.4em;
	clip: auto;
	background: var(--lx-primary);
	color: #fff;
	border-radius: var(--lx-radius);
}

:focus-visible {
	outline: 2px solid var(--lx-accent);
	outline-offset: 3px;
}

.lx-icon {
	flex: none;
	display: block;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

/* Named so full-bleed children — a swipeable row, an edge-to-edge image — can
   cancel the container inset without hardcoding it in three places. */
:root { --lx-edge: 24px; }

.lx-container {
	width: 100%;
	max-width: var(--lx-container);
	margin: 0 auto;
	padding: 0 var(--lx-edge);
}

.lx-section {
	padding: var(--lx-section-pad) 0;
	position: relative;
}

.lx-section--alt { background: var(--lx-muted); }

.lx-section--dark {
	background: var(--lx-dark);
	color: rgba(255, 255, 255, 0.74);
}

.lx-section--dark h2,
.lx-section--dark h3 { color: #fff; }

.lx-section__footer {
	margin-top: 50px;
}

.lx-grid {
	display: grid;
	gap: var(--lx-gap);
}

.lx-grid--1 { grid-template-columns: 1fr; }
.lx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lx-grid--4 { grid-template-columns: repeat(4, 1fr); }

.lx-layout {
	display: grid;
	gap: 50px;
	align-items: start;
}

.lx-layout--full { grid-template-columns: 1fr; }
.lx-layout--right { grid-template-columns: minmax(0, 1fr) 330px; }
.lx-layout--left { grid-template-columns: 330px minmax(0, 1fr); }
.lx-layout--left .lx-layout__content { order: 2; }
.lx-layout--left .lx-layout__sidebar { order: 1; }

/* ==========================================================================
   4. Section headings
   ========================================================================== */

/* A running index on a hairline rule, then an asymmetric heading/standfirst
   split. Deliberately not the centred kicker-title-subtitle stack: that
   arrangement, with its symmetrical em-dashes, is the most recognisable
   signature of an off-the-shelf template. */
.lx-heading {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	column-gap: var(--lx-gap);
	row-gap: 22px;
	margin-bottom: 64px;
	padding-top: 20px;
	border-top: 1px solid var(--lx-border);
}

.lx-heading__index {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-heading__num {
	font-variant-numeric: tabular-nums;
	color: rgba(var(--lx-dark-rgb), 0.32);
}

.lx-heading__body {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	column-gap: var(--lx-gap);
	row-gap: 18px;
	align-items: end;
}

.lx-heading__title {
	max-width: 18ch;
	margin: 0;
	font-size: var(--lx-fs-h3);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.lx-heading__lead {
	margin: 0;
	max-width: 52ch;
	font-size: 1.02rem;
	line-height: 1.65;
}

.lx-heading--light { border-top-color: rgba(255, 255, 255, 0.16); }
.lx-heading--light .lx-heading__num { color: rgba(255, 255, 255, 0.4); }
.lx-heading--light .lx-heading__title { color: #fff; }
.lx-heading--light .lx-heading__lead { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.lx-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0.95em 1.9em;
	border: 1px solid transparent;
	border-radius: var(--lx-radius-btn);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.3s var(--lx-ease), border-color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease), box-shadow 0.3s var(--lx-ease);
}

/* Sweep fill on hover */
.lx-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.4s var(--lx-ease-out);
}

.lx-btn:hover::before,
.lx-btn:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

.lx-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--lx-shadow);
}

.lx-btn .lx-icon {
	transition: transform 0.3s var(--lx-ease);
}

.lx-btn:hover .lx-icon {
	transform: translateX(4px);
}

.lx-btn--primary {
	background: var(--lx-primary);
	color: var(--lx-primary-contrast);
}
.lx-btn--primary::before { background: var(--lx-accent); }
.lx-btn--primary:hover { color: var(--lx-accent-contrast); }

.lx-btn--accent {
	background: var(--lx-accent);
	color: var(--lx-accent-contrast);
}
.lx-btn--accent::before { background: var(--lx-primary); }
.lx-btn--accent:hover { color: var(--lx-primary-contrast); }

.lx-btn--outline {
	background: transparent;
	border-color: var(--lx-primary);
	color: var(--lx-primary);
}
.lx-btn--outline::before { background: var(--lx-primary); }
.lx-btn--outline:hover { color: #fff; }

.lx-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}
.lx-btn--outline-light::before { background: #fff; }
.lx-btn--outline-light:hover { color: var(--lx-primary); border-color: #fff; }

.lx-btn--light {
	background: #fff;
	color: var(--lx-primary);
}
.lx-btn--light::before { background: var(--lx-accent); }
.lx-btn--light:hover { color: #fff; }

/* ==========================================================================
   6. Top bar
   ========================================================================== */

.lx-topbar {
	position: relative;
	z-index: 60;
	background: var(--lx-topbar-bg);
	color: var(--lx-topbar-text);
	font-size: 0.85rem;
}

.lx-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 46px;
	flex-wrap: wrap;
}

.lx-topbar__contact,
.lx-topbar__socials {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lx-topbar__contact li,
.lx-topbar__hours {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lx-topbar a { color: inherit; }
.lx-topbar a:hover { color: var(--lx-accent); }

.lx-topbar__aside {
	display: flex;
	align-items: center;
	gap: 24px;
}

.lx-topbar__socials { gap: 14px; }

.lx-topbar__socials a {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	transition: background 0.3s var(--lx-ease), color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

.lx-topbar__socials a:hover {
	background: var(--lx-accent);
	color: #fff;
	transform: translateY(-2px);
}

.lx-topbar .lx-icon { color: var(--lx-accent); }
.lx-topbar__socials .lx-icon { color: inherit; }

/* ==========================================================================
   7. Header & navigation
   ========================================================================== */

.lx-header {
	position: relative;
	z-index: 50;
	background: var(--lx-header-bg);
	color: var(--lx-header-text);
	border-bottom: 1px solid var(--lx-border);
	transition: background 0.35s var(--lx-ease), box-shadow 0.35s var(--lx-ease), transform 0.35s var(--lx-ease);
}

.lx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: var(--lx-header-h);
}

/* Transparent over hero on the front page */
.lx-header--transparent {
	position: absolute;
	inset: auto 0 auto 0;
	background: transparent;
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.lx-header--transparent .lx-brand__title a,
.lx-header--transparent .lx-nav__link,
.lx-header--transparent .lx-nav-toggle {
	color: #fff;
}

.lx-header--transparent .lx-brand__tagline { color: rgba(255, 255, 255, 0.7); }

/* Sticky state applied by JS */
.lx-header--stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--lx-header-bg);
	border-bottom-color: var(--lx-border);
	box-shadow: var(--lx-shadow);
	animation: lx-slide-down 0.4s var(--lx-ease-out);
}

.lx-header--stuck .lx-brand__title a,
.lx-header--stuck .lx-nav__link,
.lx-header--stuck .lx-nav-toggle {
	color: var(--lx-header-text);
}

.lx-header--stuck .lx-nav__link:hover,
.lx-header--stuck .lx-nav .current-menu-item > .lx-nav__link {
	color: var(--lx-accent);
}

@keyframes lx-slide-down {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

.lx-brand { display: flex; flex-direction: column; justify-content: center; }

.lx-brand__title {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.2;
}

.lx-brand__title a { color: var(--lx-header-text); }
.lx-brand__title a:hover { color: var(--lx-accent); }

.lx-brand__tagline {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lx-body);
}

.custom-logo { max-height: 56px; width: auto; }

/* Nav list */

/* min-width:0 lets the nav shrink below its content width. Without it a long
   menu pushes the call-to-action past the right edge of the viewport instead of
   wrapping, which is invisible until someone assigns a menu with a lot in it. */
.lx-nav { margin-left: auto; min-width: 0; }

.lx-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lx-nav__list li { position: relative; }

.lx-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 12px 16px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--lx-heading);
	white-space: nowrap;
}

/* Underline slide-in */
.lx-nav__link > span::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 4px;
	height: 2px;
	background: var(--lx-accent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s var(--lx-ease-out);
}

.lx-nav__link:hover > span::after,
.lx-nav .current-menu-item > .lx-nav__link > span::after,
.lx-nav__link.is-active > span::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.lx-nav__link:hover,
.lx-nav__link.is-active,
.lx-nav .current-menu-item > .lx-nav__link {
	color: var(--lx-accent);
}

/* Submenus */

.lx-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 230px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--lx-surface);
	border-radius: var(--lx-radius);
	box-shadow: var(--lx-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.28s var(--lx-ease), transform 0.28s var(--lx-ease), visibility 0.28s;
}

.lx-nav__list > li:last-child .lx-submenu { left: auto; right: 0; }

.lx-submenu .lx-submenu { top: 0; left: 100%; }

.lx-nav__list li:hover > .lx-submenu,
.lx-nav__list li:focus-within > .lx-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lx-submenu .lx-nav__link {
	padding: 10px 22px;
	color: var(--lx-heading);
	font-weight: 400;
	transition: padding-left 0.28s var(--lx-ease), color 0.28s var(--lx-ease), background 0.28s var(--lx-ease);
}

.lx-submenu .lx-nav__link > span::after { display: none; }

.lx-submenu .lx-nav__link:hover {
	padding-left: 30px;
	background: var(--lx-muted);
	color: var(--lx-accent);
}

.lx-submenu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	color: inherit;
}

/* Header actions */

.lx-header__actions {
	display: flex;
	align-items: center;
	flex: none;
	gap: 16px;
}

.lx-header__cta { padding: 0.8em 1.5em; font-size: 0.88rem; }

.lx-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: none;
	border: 1px solid var(--lx-border);
	border-radius: var(--lx-radius);
	cursor: pointer;
	color: var(--lx-heading);
}

.lx-nav-toggle__bars {
	display: grid;
	gap: 5px;
	width: 22px;
}

.lx-nav-toggle__bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.3s var(--lx-ease), opacity 0.2s var(--lx-ease);
}

.lx-nav-toggle[aria-expanded="true"] .lx-nav-toggle__bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.lx-nav-toggle[aria-expanded="true"] .lx-nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.lx-nav-toggle[aria-expanded="true"] .lx-nav-toggle__bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.lx-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 45;
	background: rgba(var(--lx-dark-rgb), 0.5);
	opacity: 0;
	transition: opacity 0.3s var(--lx-ease);
}

.lx-nav-overlay.is-visible { opacity: 1; }

/* ==========================================================================
   8. Hero
   ========================================================================== */

.lx-hero {
	position: relative;
	height: var(--lx-hero-height);
	min-height: 520px;
	overflow: hidden;
	background: var(--lx-dark);
}

.lx-hero__track { position: relative; height: 100%; }

.lx-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--lx-ease), visibility 0.9s;
}

.lx-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.lx-hero__media { position: absolute; inset: 0; }

.lx-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Slow zoom on the active slide */
.lx-hero__slide.is-active .lx-hero__image {
	animation: lx-kenburns 9s var(--lx-ease) forwards;
}

@keyframes lx-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}

.lx-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(var(--lx-dark-rgb), var(--lx-hero-overlay)) 0%,
		rgba(var(--lx-dark-rgb), calc(var(--lx-hero-overlay) * 0.72)) 60%,
		rgba(var(--lx-dark-rgb), calc(var(--lx-hero-overlay) * 0.5)) 100%);
}

.lx-hero__inner { position: relative; width: 100%; }

.lx-hero__content { max-width: 680px; }

.lx-hero--center .lx-hero__content {
	margin: 0 auto;
	text-align: center;
}

.lx-hero__kicker,
.lx-hero__title,
.lx-hero__text,
.lx-hero__actions {
	opacity: 0;
	transform: translateY(28px);
}

.lx-hero__slide.is-active .lx-hero__kicker { animation: lx-hero-in 0.8s var(--lx-ease-out) 0.25s forwards; }
.lx-hero__slide.is-active .lx-hero__title { animation: lx-hero-in 0.8s var(--lx-ease-out) 0.4s forwards; }
.lx-hero__slide.is-active .lx-hero__text { animation: lx-hero-in 0.8s var(--lx-ease-out) 0.55s forwards; }
.lx-hero__slide.is-active .lx-hero__actions { animation: lx-hero-in 0.8s var(--lx-ease-out) 0.7s forwards; }

@keyframes lx-hero-in {
	to { opacity: 1; transform: translateY(0); }
}

/* A ruled label, not a pill badge. The rounded translucent tag is the single
   most over-used hero device in this category, and it reads as decoration
   rather than as the firm describing itself. */
.lx-hero__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lx-hero-text);
}

/* Aligned to the first line rather than to the block, so the rule stays level
   with the text when the label wraps on a narrow screen. */
.lx-hero__kicker::before {
	content: "";
	width: 40px;
	height: 1px;
	flex: none;
	align-self: flex-start;
	margin-top: 0.62em;
	background: var(--lx-accent);
}

/* Centred, a leading rule would have to be mirrored on the right, and that
   symmetrical dash pair is the template cliche being avoided here. */
.lx-hero--center .lx-hero__kicker { justify-content: center; }
.lx-hero--center .lx-hero__kicker::before { display: none; }

.lx-hero__title {
	margin-bottom: 22px;
	max-width: 17ch;
	font-size: clamp(2.2rem, 5vw, var(--lx-fs-h1));
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--lx-hero-text);
}

.lx-hero--center .lx-hero__title { max-width: none; }

.lx-hero__text {
	max-width: 58ch;
	margin-bottom: 34px;
	font-size: 1.08rem;
	color: rgba(255, 255, 255, 0.82);
	color: color-mix(in srgb, var(--lx-hero-text) 82%, transparent);
}

.lx-hero--center .lx-hero__text { margin-left: auto; margin-right: auto; }

.lx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.lx-hero--center .lx-hero__actions { justify-content: center; }

/* Arrows & dots */

.lx-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.3s var(--lx-ease), border-color 0.3s var(--lx-ease), opacity 0.3s var(--lx-ease);
	opacity: 0;
}

.lx-hero:hover .lx-hero__arrow,
.lx-hero__arrow:focus-visible { opacity: 1; }

.lx-hero__arrow:hover {
	background: var(--lx-accent);
	border-color: var(--lx-accent);
}

.lx-hero__arrow--prev { left: 28px; }
.lx-hero__arrow--next { right: 28px; }

.lx-hero__dots {
	position: absolute;
	bottom: 34px;
	left: 50%;
	z-index: 5;
	display: flex;
	gap: 12px;
	transform: translateX(-50%);
}

.lx-hero__dot {
	width: 34px;
	height: 4px;
	padding: 0;
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	cursor: pointer;
	transition: background 0.3s var(--lx-ease), width 0.3s var(--lx-ease);
}

.lx-hero__dot.is-active {
	width: 52px;
	background: var(--lx-accent);
}

.lx-hero__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 5;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.15);
}

.lx-hero__progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--lx-accent);
}

/* ==========================================================================
   9. Feature boxes
   ========================================================================== */

.lx-features { position: relative; z-index: 10; padding: var(--lx-section-pad) 0; }

.lx-features--overlap {
	margin-top: calc(var(--lx-section-pad) * -1 - 40px);
	padding-bottom: 0;
}

.lx-feature {
	position: relative;
	display: flex;
	gap: 20px;
	padding: 40px 34px;
	background: var(--lx-surface);
	border-radius: var(--lx-radius);
	box-shadow: var(--lx-shadow);
	overflow: hidden;
	transition: transform 0.4s var(--lx-ease), box-shadow 0.4s var(--lx-ease);
}

/* Accent wash slides up on hover */
.lx-feature::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 0;
	background: var(--lx-primary);
	transition: height 0.45s var(--lx-ease-out);
	z-index: 0;
}

.lx-feature:hover::after { height: 100%; }

.lx-feature:hover {
	transform: translateY(-8px);
	box-shadow: var(--lx-shadow-lg);
}

.lx-feature > * { position: relative; z-index: 1; }

.lx-feature__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	flex: none;
	background: var(--lx-accent-light);
	border-radius: var(--lx-radius);
	color: var(--lx-accent);
	transition: background 0.4s var(--lx-ease), color 0.4s var(--lx-ease), transform 0.4s var(--lx-ease);
}

.lx-feature:hover .lx-feature__icon {
	background: var(--lx-accent);
	color: #fff;
	transform: rotateY(180deg);
}

.lx-feature__title {
	margin-bottom: 8px;
	font-size: 1.22rem;
	transition: color 0.4s var(--lx-ease);
}

.lx-feature__text {
	margin: 0;
	font-size: 0.95rem;
	transition: color 0.4s var(--lx-ease);
}

.lx-feature:hover .lx-feature__title,
.lx-feature:hover .lx-feature__text { color: #fff; }

.lx-feature__index {
	position: absolute;
	right: 18px;
	bottom: 6px;
	font-family: var(--lx-font-heading);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--lx-heading);
	opacity: 0.06;
	transition: opacity 0.4s var(--lx-ease), color 0.4s var(--lx-ease);
}

.lx-feature:hover .lx-feature__index { color: #fff; opacity: 0.14; }

/* ==========================================================================
   10. About
   ========================================================================== */

.lx-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* With no photo set there is no second column to balance, so the copy runs
   the full width rather than leaving half the section blank. */
.lx-about__grid--text { grid-template-columns: minmax(0, 1fr); }

/* The lead has moved up beside the title (see about.php), so what is left is a
   single stacked column. */
.lx-about__grid--text .lx-about__lead {
	margin: 0 0 26px;
	padding-left: 22px;
	border-left: 2px solid var(--lx-accent);
	font-size: 1.22rem;
	line-height: 1.5;
}

/* One long paragraph set across the full container is both an unreadable
   measure and a shape that cannot be balanced against anything. Flowed into
   two columns it fills the band and every line stays inside a sane measure. */
.lx-about__grid--text .lx-about__text {
	margin: 0;
	columns: 2;
	column-gap: 56px;
}

.lx-about__grid--text .lx-about__points { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lx-about__media { position: relative; }

.lx-about__image-wrap {
	position: relative;
	border-radius: var(--lx-radius);
	overflow: hidden;
}

.lx-about__image-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 55%, rgba(var(--lx-dark-rgb), 0.35) 100%);
	pointer-events: none;
}

.lx-about__image-wrap--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	background: var(--lx-muted);
	color: var(--lx-border);
}

.lx-about__image {
	width: 100%;
	transition: transform 0.7s var(--lx-ease);
}

.lx-about__media:hover .lx-about__image { transform: scale(1.05); }

/* Decorative frame */
.lx-about__media::after {
	content: "";
	position: absolute;
	right: -18px;
	bottom: -18px;
	width: 55%;
	height: 55%;
	border: 3px solid var(--lx-accent);
	border-radius: var(--lx-radius);
	z-index: -1;
}

.lx-about__badge {
	position: absolute;
	left: -24px;
	bottom: 40px;
	z-index: 2;
	display: grid;
	gap: 2px;
	padding: 22px 28px;
	background: var(--lx-accent);
	border-radius: var(--lx-radius);
	color: #fff;
	box-shadow: var(--lx-shadow);
}

.lx-about__badge-value {
	font-family: var(--lx-font-heading);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
}

.lx-about__badge-label {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.9;
}

.lx-about__lead {
	font-size: 1.14rem;
	font-weight: 500;
	color: var(--lx-heading);
}

.lx-about__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

/* Each commitment is its own bounded card: tick and short tag on the first
   row for the skim, the full sentence underneath for anyone who stops. */
.lx-about__points li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-content: start;
	gap: 10px 10px;
	padding: 18px 18px 20px;
	border: 1px solid var(--lx-border);
	border-radius: var(--lx-radius);
	background: var(--lx-surface);
	font-size: 0.95rem;
	color: var(--lx-heading);
	transition: border-color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

/* On an untinted band a white card has nothing to sit against. */
.lx-section:not(.lx-section--alt) .lx-about__points li { background: var(--lx-muted); }

.lx-about__points li:hover {
	border-color: var(--lx-accent);
	transform: translateY(-2px);
}

.lx-about__point-tag {
	align-self: center;
	justify-self: start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--lx-accent-light);
	color: var(--lx-accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lx-about__point-text {
	grid-column: 1 / -1;
	line-height: 1.45;
}

/* Without a tag there is no first-row content to sit beside, so the sentence
   moves back up next to the tick instead of leaving an empty row. */
.lx-about__point:not(.has-tag) .lx-about__point-text { grid-column: 2; }

.lx-about__check {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	background: var(--lx-accent-light);
	border-radius: 50%;
	color: var(--lx-accent);
	transition: background 0.3s var(--lx-ease), color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

.lx-about__points li:hover .lx-about__check {
	background: var(--lx-accent);
	color: #fff;
	transform: scale(1.12);
}

.lx-about__footer {
	display: flex;
	align-items: center;
	gap: 36px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--lx-border);
}

.lx-about__signature { display: flex; align-items: center; gap: 14px; }

.lx-about__signature-image { max-height: 52px; width: auto; }

.lx-about__signature-meta { display: grid; }

.lx-about__signature-name { color: var(--lx-heading); font-size: 1rem; }

.lx-about__signature-role { font-size: 0.85rem; color: var(--lx-accent); }

/* ==========================================================================
   11. Practice areas
   ========================================================================== */

.lx-services--card,
.lx-services--bordered,
.lx-services--image { background: var(--lx-muted); }

/* Editorial index: every matter the firm takes on is printed, so a visitor can
   find their own problem by scanning rather than by opening six cards. */
.lx-practice {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lx-border);
}

.lx-practice__item {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--lx-gap);
	row-gap: 14px;
	padding: 34px 0;
	border-bottom: 1px solid var(--lx-border);
	transition: background 0.35s var(--lx-ease);
}

.lx-practice__item:hover { background: rgba(var(--lx-dark-rgb), 0.02); }

.lx-practice__lead {
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr);
	align-items: baseline;
	align-content: start;
	column-gap: 4px;
}

.lx-practice__num {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: var(--lx-accent);
}

.lx-practice__title {
	margin: 0;
	font-size: 1.55rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lx-practice__title a { color: var(--lx-heading); }
.lx-practice__title a:hover { color: var(--lx-accent); }

.lx-practice__subtitle {
	grid-column: 2;
	margin: 8px 0 0;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-practice__excerpt { font-size: 1rem; }
.lx-practice__excerpt p { margin-bottom: 0; }

.lx-practice__matters {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	font-size: 0.9rem;
	color: var(--lx-body);
}

.lx-practice__matters li { position: relative; padding-right: 18px; }

.lx-practice__matters li:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--lx-accent);
	transform: translateY(-50%);
}

.lx-practice__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--lx-primary);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.lx-practice__link:hover {
	color: var(--lx-accent);
	border-bottom-color: currentColor;
}

.lx-practice__link .lx-icon { transition: transform 0.3s var(--lx-ease); }
.lx-practice__link:hover .lx-icon { transform: translateX(4px); }

.lx-service {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--lx-surface);
	border-radius: var(--lx-radius);
	overflow: hidden;
	transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease);
}

.lx-services--card .lx-service { box-shadow: var(--lx-shadow-sm); }
.lx-services--bordered .lx-service { border: 1px solid var(--lx-border); }

.lx-service:hover {
	transform: translateY(-10px);
	box-shadow: var(--lx-shadow-lg);
}

/* Accent bar grows across the top */
.lx-service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 0;
	height: 4px;
	background: var(--lx-accent);
	transition: width 0.5s var(--lx-ease-out);
}

.lx-service:hover::before { width: 100%; }

.lx-service.is-featured { background: var(--lx-primary); }
.lx-service.is-featured .lx-service__title a,
.lx-service.is-featured .lx-service__excerpt { color: #fff; }
.lx-service.is-featured .lx-service__excerpt { opacity: 0.82; }
.lx-service.is-featured .lx-service__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }

.lx-service__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.lx-service__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--lx-ease);
}

.lx-service:hover .lx-service__media img { transform: scale(1.08); }

.lx-service__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 38px 32px;
}

.lx-service__icon {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	margin-bottom: 22px;
	background: var(--lx-accent-light);
	border-radius: var(--lx-radius);
	color: var(--lx-accent);
	transition: background 0.4s var(--lx-ease), color 0.4s var(--lx-ease), transform 0.5s var(--lx-ease);
}

.lx-service:hover .lx-service__icon {
	background: var(--lx-accent);
	color: #fff;
	transform: translateY(-4px) scale(1.06);
}

.lx-service__icon--sm { width: 48px; height: 48px; margin-bottom: 14px; }

.lx-service__title { margin-bottom: 6px; font-size: 1.32rem; }

.lx-service__subtitle {
	display: block;
	margin-bottom: 12px;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-service__excerpt {
	flex: 1;
	margin-bottom: 20px;
	font-size: 0.96rem;
}

.lx-service__excerpt p { margin-bottom: 0; }

.lx-service__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--lx-primary);
}

.lx-service.is-featured .lx-service__link { color: #fff; }

.lx-service__link .lx-icon { transition: transform 0.3s var(--lx-ease); }
.lx-service__link:hover { color: var(--lx-accent); }
.lx-service__link:hover .lx-icon { transform: translateX(5px); }

.lx-service__watermark {
	position: absolute;
	right: -24px;
	bottom: -24px;
	z-index: 0;
	color: var(--lx-heading);
	opacity: 0.035;
	pointer-events: none;
	transition: opacity 0.5s var(--lx-ease), transform 0.5s var(--lx-ease);
}

.lx-service:hover .lx-service__watermark {
	opacity: 0.07;
	transform: rotate(-8deg) scale(1.05);
}

.lx-service.is-featured .lx-service__watermark { color: #fff; opacity: 0.08; }

/* --------------------------------------------------------------------------
   Collapsible practice areas

   Six areas printed in full is several screens before the reader reaches
   anything else. Folded, every heading fits one view and the argument for a
   single area is one tap away. One open at a time is enforced in JS.
   -------------------------------------------------------------------------- */

.lx-fold__toggle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.lx-fold__label { display: grid; gap: 6px; min-width: 0; }

.lx-fold__name {
	display: block;
	color: var(--lx-heading);
	transition: color 0.3s var(--lx-ease);
}

.lx-fold__toggle:hover .lx-fold__name,
.lx-fold__toggle[aria-expanded="true"] .lx-fold__name { color: var(--lx-accent); }

.lx-fold__label .lx-practice__subtitle,
.lx-fold__label .lx-service__subtitle { grid-column: auto; margin: 0; }

/* A plus that turns into a minus. Drawn from two pseudo-elements rather than
   swapped between two SVGs so the change can be a single rotation. */
.lx-fold__sign {
	position: relative;
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid var(--lx-border);
	border-radius: 50%;
	transition: background 0.3s var(--lx-ease), border-color 0.3s var(--lx-ease);
}

.lx-fold__sign::before,
.lx-fold__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: var(--lx-accent);
	transform: translate(-50%, -50%);
	transition: transform 0.35s var(--lx-ease), opacity 0.3s var(--lx-ease), background 0.3s var(--lx-ease);
}

.lx-fold__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.lx-fold__toggle:hover .lx-fold__sign { border-color: var(--lx-accent); }

.lx-fold__toggle[aria-expanded="true"] .lx-fold__sign {
	background: var(--lx-accent);
	border-color: var(--lx-accent);
}

.lx-fold__toggle[aria-expanded="true"] .lx-fold__sign::before,
.lx-fold__toggle[aria-expanded="true"] .lx-fold__sign::after { background: #fff; }

.lx-fold__toggle[aria-expanded="true"] .lx-fold__sign::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* 0fr → 1fr animates the panel to its own height without JS measuring it.
   Visibility, unlike display, is both animatable and enough to keep the
   collapsed links out of the tab order. */
.lx-services--fold .lx-practice__body,
.lx-services--fold .lx-service__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.4s var(--lx-ease), visibility 0.4s var(--lx-ease);
}

.lx-services--fold .is-open .lx-practice__body,
.lx-services--fold .is-open .lx-service__panel {
	grid-template-rows: 1fr;
	visibility: visible;
}

.lx-fold__inner { overflow: hidden; min-width: 0; }

/* Index variant: the two-column split has nothing to hold once the right
   column folds, so the entry runs as one column with the panel indented to
   the title. */
.lx-services--fold .lx-practice__item {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	padding: 0;
}

.lx-services--fold .lx-practice__lead { padding: 26px 0; }

.lx-services--fold .lx-practice__body { padding-left: calc(3.2rem + 4px); }

.lx-services--fold .is-open .lx-practice__body .lx-fold__inner { padding-bottom: 30px; }

/* Card variants: the padding moves onto the toggle so the whole header row is
   the hit area rather than a word-sized target. */
.lx-services--fold .lx-grid { align-items: start; }

.lx-services--fold .lx-service__body { padding: 0; }

.lx-services--fold .lx-service__body > .lx-fold__toggle,
.lx-services--fold .lx-service__title .lx-fold__toggle {
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: 24px 26px;
}

.lx-services--fold .lx-service__title { margin: 0; }

.lx-services--fold .lx-service__icon {
	width: 50px;
	height: 50px;
	margin: 0;
}

.lx-services--fold .lx-service__panel .lx-fold__inner { padding: 0 26px 26px; }

.lx-services--fold .lx-service__excerpt { margin-bottom: 16px; }

/* The lift reads as "this whole card is a link", which it no longer is. */
.lx-services--fold .lx-service:hover { transform: none; box-shadow: var(--lx-shadow-sm); }
.lx-services--fold .lx-service.is-open { box-shadow: var(--lx-shadow-lg); }

.lx-service.is-featured .lx-fold__name { color: #fff; }
.lx-service.is-featured .lx-fold__sign { border-color: rgba(255, 255, 255, 0.3); }
.lx-service.is-featured .lx-fold__sign::before,
.lx-service.is-featured .lx-fold__sign::after { background: #fff; }

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

.lx-testimonials {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.lx-testimonials__overlay {
	position: absolute;
	inset: 0;
	background: rgba(var(--lx-dark-rgb), 0.86);
}

.lx-testimonials .lx-container { position: relative; z-index: 1; }

.lx-testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 40px 34px 34px;
	background: var(--lx-surface);
	border-radius: var(--lx-radius);
	box-shadow: var(--lx-shadow-sm);
	transition: transform 0.4s var(--lx-ease), box-shadow 0.4s var(--lx-ease);
}

.lx-testimonial:hover {
	transform: translateY(-8px);
	box-shadow: var(--lx-shadow-lg);
}

.lx-testimonial__mark {
	position: absolute;
	top: 28px;
	right: 30px;
	color: var(--lx-accent);
	opacity: 0.22;
	transition: opacity 0.4s var(--lx-ease), transform 0.4s var(--lx-ease);
}

.lx-testimonial:hover .lx-testimonial__mark {
	opacity: 0.5;
	transform: scale(1.1) rotate(-6deg);
}

.lx-stars { display: flex; gap: 3px; margin-bottom: 16px; }

.lx-stars__star { color: var(--lx-border); }
.lx-stars__star.is-filled { color: var(--lx-accent); }
.lx-stars__star .lx-icon { fill: currentColor; stroke-width: 0; }

.lx-testimonial__quote {
	flex: 1;
	margin: 0 0 26px;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	font-size: 1rem;
	color: var(--lx-body);
}

.lx-testimonial__author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	border-top: 1px solid var(--lx-border);
}

.lx-testimonial__avatar {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.lx-testimonial__avatar--empty {
	display: grid;
	place-items: center;
	background: var(--lx-muted);
	color: var(--lx-body);
}

.lx-testimonial__meta { display: grid; }

.lx-testimonial__name { color: var(--lx-heading); font-size: 1.02rem; }

.lx-testimonial__role { font-size: 0.86rem; color: var(--lx-accent); }

/* ==========================================================================
   13. Counters
   ========================================================================== */

.lx-counters {
	position: relative;
	padding: 84px 0;
	background: var(--lx-primary);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: #fff;
}

.lx-counters__overlay {
	position: absolute;
	inset: 0;
	background: var(--lx-primary);
	opacity: var(--lx-counter-overlay);
}

.lx-counters--image .lx-counters__overlay { background: var(--lx-dark); }

.lx-counters .lx-container { position: relative; z-index: 1; }

.lx-counter { text-align: center; }

.lx-counter__icon {
	display: inline-grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin-bottom: 18px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: var(--lx-accent);
	transition: background 0.4s var(--lx-ease), transform 0.4s var(--lx-ease);
}

.lx-counter:hover .lx-counter__icon {
	background: var(--lx-accent);
	color: #fff;
	transform: translateY(-6px);
}

.lx-counter__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	font-family: var(--lx-font-heading);
	font-size: 3.1rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.lx-counter__suffix { color: var(--lx-accent); }

.lx-counter__label {
	display: block;
	margin-top: 10px;
	font-size: 0.94rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   14. Team
   ========================================================================== */

.lx-team {
	position: relative;
	background: var(--lx-surface);
	border-radius: var(--lx-radius);
	overflow: hidden;
	box-shadow: var(--lx-shadow-sm);
	transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease);
}

.lx-team:hover {
	transform: translateY(-8px);
	box-shadow: var(--lx-shadow-lg);
}

.lx-team__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--lx-muted);
}

.lx-team__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--lx-ease);
}

.lx-team:hover .lx-team__media img { transform: scale(1.07); }

.lx-team__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(var(--lx-dark-rgb), 0.6) 100%);
	opacity: 0;
	transition: opacity 0.4s var(--lx-ease);
}

.lx-team:hover .lx-team__media::after { opacity: 1; }

/* Socials slide up from the bottom */
.lx-team__socials {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 18px;
	list-style: none;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.45s var(--lx-ease-out), opacity 0.45s var(--lx-ease);
}

.lx-team:hover .lx-team__socials,
.lx-team:focus-within .lx-team__socials {
	transform: translateY(0);
	opacity: 1;
}

.lx-team__socials a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	color: var(--lx-primary);
	transition: background 0.3s var(--lx-ease), color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

.lx-team__socials a:hover {
	background: var(--lx-accent);
	color: #fff;
	transform: translateY(-4px);
}

.lx-team__body { padding: 26px 24px; text-align: center; }

.lx-team__name { margin-bottom: 4px; font-size: 1.24rem; }

.lx-team__role {
	display: block;
	font-size: 0.86rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-team__contact {
	display: grid;
	gap: 6px;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--lx-border);
	list-style: none;
	font-size: 0.88rem;
}

.lx-team__contact li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.lx-team__contact .lx-icon { color: var(--lx-accent); }

/* ==========================================================================
   15. Case studies
   ========================================================================== */

.lx-portfolio { background: var(--lx-muted); }

.lx-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 44px;
}

.lx-filter__btn {
	padding: 0.6em 1.4em;
	background: transparent;
	border: 1px solid var(--lx-border);
	border-radius: var(--lx-radius-btn);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--lx-heading);
	cursor: pointer;
	transition: background 0.3s var(--lx-ease), border-color 0.3s var(--lx-ease), color 0.3s var(--lx-ease);
}

.lx-filter__btn:hover,
.lx-filter__btn.is-active {
	background: var(--lx-primary);
	border-color: var(--lx-primary);
	color: #fff;
}

.lx-case {
	transition: opacity 0.4s var(--lx-ease), transform 0.4s var(--lx-ease);
}

.lx-case.is-hidden {
	display: none;
}

.lx-case__inner {
	position: relative;
	display: block;
	border-radius: var(--lx-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--lx-dark);
}

.lx-case__media { position: absolute; inset: 0; }

.lx-case__media img,
.lx-case__media .lx-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--lx-ease);
}

.lx-case:hover .lx-case__media img { transform: scale(1.1); }

/* A case study with no featured image must still read as a card, not as a hole
   in the section: keep it dark so the overlay text stays legible. */
.lx-case__media .lx-thumb-placeholder {
	background: linear-gradient(140deg, var(--lx-dark) 0%, rgba(var(--lx-primary-rgb), 0.55) 100%);
	color: rgba(255, 255, 255, 0.35);
}

.lx-case__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 28px;
	background: linear-gradient(180deg, transparent 20%, rgba(var(--lx-dark-rgb), 0.72) 100%);
	transition: background 0.45s var(--lx-ease);
}

.lx-case:hover .lx-case__overlay,
.lx-case__inner:focus-visible .lx-case__overlay {
	background: linear-gradient(180deg, rgba(var(--lx-dark-rgb), 0.15) 0%, rgba(var(--lx-dark-rgb), 0.94) 100%);
}

.lx-case__content {
	transition: transform 0.45s var(--lx-ease-out);
}

.lx-case:hover .lx-case__content { transform: translateY(-4px); }

.lx-case__cat {
	display: block;
	margin-bottom: 6px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-case__title {
	margin-bottom: 6px;
	font-size: 1.24rem;
	color: #fff;
}

.lx-case__outcome {
	display: block;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.lx-case__outcome--static {
	margin-bottom: 10px;
	color: var(--lx-accent);
	font-weight: 500;
}

.lx-case__meta {
	display: block;
	margin-top: 4px;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
}

.lx-case__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	background: var(--lx-accent);
	border-radius: 50%;
	color: #fff;
	transform: rotate(-30deg);
	transition: transform 0.45s var(--lx-ease-out);
}

.lx-case:hover .lx-case__arrow { transform: rotate(0); }

/* ==========================================================================
   16. Blog cards & rows
   ========================================================================== */

.lx-card {
	display: flex;
	flex-direction: column;
	background: var(--lx-surface);
	border-radius: var(--lx-radius);
	overflow: hidden;
	box-shadow: var(--lx-shadow-sm);
	transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease);
}

.lx-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--lx-shadow-lg);
}

.lx-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--lx-muted);
}

.lx-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--lx-ease);
}

.lx-card:hover .lx-card__media img { transform: scale(1.08); }

.lx-thumb-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--lx-muted);
	color: rgba(var(--lx-dark-rgb), 0.22);
}

.lx-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 5px 14px;
	background: var(--lx-accent);
	border-radius: var(--lx-radius-btn);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.lx-card__badge:hover { background: var(--lx-primary); color: #fff; }

.lx-card__date {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 62px;
	padding: 10px 0;
	background: var(--lx-surface);
	border-radius: var(--lx-radius);
	line-height: 1.1;
	text-align: center;
	box-shadow: var(--lx-shadow-sm);
	transition: background 0.35s var(--lx-ease), color 0.35s var(--lx-ease);
}

.lx-card__date strong {
	font-family: var(--lx-font-heading);
	font-size: 1.4rem;
	color: var(--lx-heading);
	transition: color 0.35s var(--lx-ease);
}

.lx-card__date span {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lx-accent);
	transition: color 0.35s var(--lx-ease);
}

.lx-card:hover .lx-card__date { background: var(--lx-accent); }
.lx-card:hover .lx-card__date strong,
.lx-card:hover .lx-card__date span { color: #fff; }

.lx-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px 26px 30px;
}

.lx-card__title {
	margin-bottom: 12px;
	font-size: 1.26rem;
	line-height: 1.35;
}

.lx-card__title a { color: var(--lx-heading); }
.lx-card__title a:hover { color: var(--lx-accent); }

.lx-card__excerpt { flex: 1; font-size: 0.96rem; }
.lx-card__excerpt p { margin-bottom: 16px; }

.lx-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--lx-primary);
}

.lx-card__link .lx-icon { transition: transform 0.3s var(--lx-ease); }
.lx-card__link:hover { color: var(--lx-accent); }
.lx-card__link:hover .lx-icon { transform: translateX(5px); }

/* Meta row */

.lx-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 12px;
	font-size: 0.84rem;
	color: var(--lx-body);
}

.lx-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.lx-meta .lx-icon { color: var(--lx-accent); }
.lx-meta a { color: inherit; }
.lx-meta a:hover { color: var(--lx-accent); }

/* List row */

.lx-post-row {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--lx-border);
}

.lx-post-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.lx-post-row__media {
	border-radius: var(--lx-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.lx-post-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--lx-ease);
}

.lx-post-row:hover .lx-post-row__media img { transform: scale(1.07); }

.lx-post-row__title { margin-bottom: 12px; font-size: 1.6rem; }
.lx-post-row__title a { color: var(--lx-heading); }
.lx-post-row__title a:hover { color: var(--lx-accent); }
.lx-post-row__excerpt { margin-bottom: 16px; }

/* ==========================================================================
   17. Newsletter
   ========================================================================== */

.lx-newsletter { padding: 0 0 var(--lx-section-pad); }

.lx-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	padding: 48px 54px;
	background: var(--lx-primary);
	border-radius: var(--lx-radius);
	background-image: linear-gradient(120deg, var(--lx-primary) 0%, var(--lx-primary-dark) 100%);
}

.lx-newsletter__text { display: flex; align-items: center; gap: 22px; }

.lx-newsletter__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	flex: none;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	color: var(--lx-accent);
}

.lx-newsletter__title { margin-bottom: 4px; font-size: 1.7rem; color: #fff; }

.lx-newsletter__subtitle { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.98rem; }

.lx-newsletter__form {
	display: flex;
	gap: 12px;
	flex: 1;
	min-width: 320px;
	max-width: 520px;
}

.lx-newsletter__input {
	flex: 1;
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.lx-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.6); }

.lx-newsletter__input:focus {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--lx-accent);
}

.lx-newsletter__submit { flex: none; }

/* ==========================================================================
   18. Page header & breadcrumbs
   ========================================================================== */

.lx-page-header {
	position: relative;
	padding: 96px 0;
	background: var(--lx-primary);
	background-size: cover;
	background-position: center;
	text-align: center;
	color: #fff;
}

.lx-page-header__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--lx-dark-rgb), 0.72) 0%, rgba(var(--lx-dark-rgb), 0.88) 100%);
}

.lx-page-header .lx-container { position: relative; z-index: 1; }

.lx-page-header__title {
	margin-bottom: 12px;
	font-size: clamp(2rem, 4vw, var(--lx-fs-h2));
	color: #fff;
}

.lx-page-header__subtitle {
	max-width: 620px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.8);
}

.lx-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.7);
}

.lx-breadcrumbs a { color: rgba(255, 255, 255, 0.85); }
.lx-breadcrumbs a:hover { color: var(--lx-accent); }
.lx-breadcrumbs__sep { color: rgba(255, 255, 255, 0.4); }

/* ==========================================================================
   19. Single post & prose
   ========================================================================== */

.lx-prose { font-size: 1.02rem; }

.lx-prose > * { margin-bottom: 1.4em; }
.lx-prose > *:last-child { margin-bottom: 0; }

.lx-prose h2 { font-size: var(--lx-fs-h4); margin-top: 1.6em; }
.lx-prose h3 { font-size: var(--lx-fs-h5); margin-top: 1.4em; }
.lx-prose h4 { font-size: var(--lx-fs-h6); margin-top: 1.2em; }

.lx-prose a { text-decoration: underline; text-underline-offset: 3px; }

.lx-prose img,
.lx-prose figure { border-radius: var(--lx-radius); }

.lx-prose figcaption {
	margin-top: 10px;
	font-size: 0.86rem;
	color: var(--lx-body);
	text-align: center;
}

.lx-prose ul, .lx-prose ol { padding-left: 1.4em; }
.lx-prose li { margin-bottom: 0.5em; }

.lx-single__thumb {
	margin: 0 0 34px;
	border-radius: var(--lx-radius);
	overflow: hidden;
}

.lx-single__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--lx-border);
}

.lx-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.lx-tags__label { font-weight: 600; color: var(--lx-heading); margin-right: 4px; }

.lx-tags a {
	padding: 5px 14px;
	background: var(--lx-muted);
	border-radius: var(--lx-radius-btn);
	font-size: 0.84rem;
	color: var(--lx-heading);
	transition: background 0.3s var(--lx-ease), color 0.3s var(--lx-ease);
}

.lx-tags a:hover { background: var(--lx-accent); color: #fff; }

.lx-share { display: flex; align-items: center; gap: 12px; }

.lx-share__label { font-weight: 600; color: var(--lx-heading); font-size: 0.9rem; }

.lx-share__list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

.lx-share__link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--lx-muted);
	border-radius: 50%;
	color: var(--lx-heading);
	transition: background 0.3s var(--lx-ease), color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

.lx-share__link:hover {
	background: var(--lx-accent);
	color: #fff;
	transform: translateY(-3px);
}

/* Author box */

.lx-author {
	display: flex;
	gap: 24px;
	margin-top: 44px;
	padding: 32px;
	background: var(--lx-muted);
	border-radius: var(--lx-radius);
}

.lx-author__avatar img { border-radius: 50%; }

.lx-author__label {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-author__name { margin: 4px 0 8px; font-size: 1.3rem; }
.lx-author__bio { margin: 0; font-size: 0.96rem; }

/* Post navigation */

.lx-postnav {
	margin-top: 44px;
	padding-top: 30px;
	border-top: 1px solid var(--lx-border);
}

.lx-postnav .nav-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.lx-postnav .nav-next { text-align: right; }

.lx-postnav a {
	display: grid;
	gap: 6px;
	padding: 20px 24px;
	background: var(--lx-muted);
	border-radius: var(--lx-radius);
	transition: background 0.35s var(--lx-ease), transform 0.35s var(--lx-ease);
}

.lx-postnav a:hover { background: var(--lx-primary); transform: translateY(-3px); }

.lx-postnav__label {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-postnav__title { font-family: var(--lx-font-heading); font-size: 1.05rem; color: var(--lx-heading); }

.lx-postnav a:hover .lx-postnav__title { color: #fff; }

/* Related */

.lx-related { margin-top: 54px; }
.lx-related__title { margin-bottom: 28px; font-size: var(--lx-fs-h4); }

/* ==========================================================================
   20. Sidebar & widgets
   ========================================================================== */

.lx-layout__sidebar { display: grid; gap: 30px; }

.widget {
	padding: 28px 26px;
	background: var(--lx-muted);
	border-radius: var(--lx-radius);
}

.widget-title {
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 12px;
	font-size: 1.16rem;
}

.widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: var(--lx-accent);
}

.widget ul { margin: 0; padding: 0; list-style: none; }

.widget li {
	padding: 9px 0;
	border-bottom: 1px solid var(--lx-border);
}

.widget li:last-child { border-bottom: 0; }

.widget a { color: var(--lx-heading); }
.widget a:hover { color: var(--lx-accent); }

.lx-service-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: padding-left 0.3s var(--lx-ease), color 0.3s var(--lx-ease);
}

.lx-service-list a > span { flex: 1; }
.lx-service-list a:hover { padding-left: 6px; }
.lx-service-list .lx-icon:first-child { color: var(--lx-accent); }

.lx-widget-cta {
	background: var(--lx-primary);
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
}

.lx-widget-cta .widget-title { color: #fff; }
.lx-widget-cta .widget-title::after { left: 50%; transform: translateX(-50%); }
.lx-widget-cta p { margin-bottom: 18px; font-size: 0.94rem; }

/* Search form */

.lx-searchform { display: flex; gap: 8px; }

.lx-searchform__submit {
	display: grid;
	place-items: center;
	width: 50px;
	flex: none;
	background: var(--lx-primary);
	border: 0;
	border-radius: var(--lx-radius);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s var(--lx-ease);
}

.lx-searchform__submit:hover { background: var(--lx-accent); }

/* ==========================================================================
   21. Comments
   ========================================================================== */

.lx-comments { margin-top: 54px; }

.lx-comments__title { margin-bottom: 26px; font-size: var(--lx-fs-h5); }

.lx-comments__list,
.lx-comments__list .children {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.lx-comments__list .children { margin: 24px 0 0 40px; }

.lx-comments__list .comment-body {
	position: relative;
	margin-bottom: 24px;
	padding: 26px 28px;
	background: var(--lx-muted);
	border-radius: var(--lx-radius);
}

.lx-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.lx-comments__list .comment-author img { border-radius: 50%; }
.lx-comments__list .comment-author .fn { font-weight: 600; color: var(--lx-heading); font-style: normal; }
.lx-comments__list .comment-metadata { margin-bottom: 12px; font-size: 0.84rem; }
.lx-comments__list .comment-metadata a { color: var(--lx-body); }
.lx-comments__list .reply { margin-top: 10px; }

.lx-comments__list .comment-reply-link {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--lx-accent);
}

.lx-comment-form { margin-top: 30px; }

.lx-comment-form .comment-form-comment,
.lx-comment-form .comment-form-author,
.lx-comment-form .comment-form-email,
.lx-comment-form .comment-form-url { margin-bottom: 18px; }

.lx-comment-form label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--lx-heading); }

.lx-comment-form__notes { font-size: 0.88rem; }

/* ==========================================================================
   22. Pagination, 404, no results
   ========================================================================== */

.lx-pagination { margin-top: 50px; }

.lx-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.lx-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	background: var(--lx-muted);
	border-radius: var(--lx-radius);
	font-weight: 600;
	color: var(--lx-heading);
	transition: background 0.3s var(--lx-ease), color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

.lx-pagination .page-numbers:hover,
.lx-pagination .page-numbers.current {
	background: var(--lx-primary);
	color: #fff;
	transform: translateY(-2px);
}

.lx-404 { max-width: 620px; margin: 0 auto; text-align: center; }

.lx-404__code {
	display: block;
	font-family: var(--lx-font-heading);
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 700;
	line-height: 1;
	color: var(--lx-primary);
	opacity: 0.1;
}

.lx-404__title { margin: -0.3em 0 14px; font-size: var(--lx-fs-h4); }
.lx-404__search { max-width: 420px; margin: 26px auto; }

.lx-no-results {
	max-width: 560px;
	margin: 0 auto;
	padding: 50px 30px;
	text-align: center;
}

.lx-no-results__icon { display: inline-block; margin-bottom: 18px; color: var(--lx-border); }
.lx-no-results__title { font-size: var(--lx-fs-h5); }
.lx-no-results .lx-searchform { max-width: 400px; margin: 24px auto 0; }

/* ==========================================================================
   23. Attorney profile & case single
   ========================================================================== */

.lx-profile {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 50px;
	align-items: start;
}

.lx-profile__media {
	border-radius: var(--lx-radius);
	overflow: hidden;
	margin-bottom: 24px;
	aspect-ratio: 4 / 5;
	background: var(--lx-muted);
}

.lx-profile__media img { width: 100%; height: 100%; object-fit: cover; }

.lx-profile__card { padding: 28px 26px; background: var(--lx-muted); border-radius: var(--lx-radius); }

.lx-profile__card-title { margin-bottom: 16px; font-size: 1.14rem; }

.lx-profile__contact { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }

.lx-profile__contact li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; }
.lx-profile__contact .lx-icon { color: var(--lx-accent); }

.lx-profile__depts { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--lx-border); }
.lx-profile__depts h3 { font-size: 1rem; margin-bottom: 10px; }
.lx-profile__depts ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }

.lx-profile__depts a {
	padding: 4px 12px;
	background: var(--lx-surface);
	border-radius: var(--lx-radius-btn);
	font-size: 0.84rem;
}

.lx-profile .lx-team__socials {
	position: static;
	transform: none;
	opacity: 1;
	justify-content: flex-start;
	padding: 0;
}

.lx-profile .lx-team__socials a { background: var(--lx-surface); }

.lx-case-single__thumb { margin: 0 0 34px; border-radius: var(--lx-radius); overflow: hidden; }

.lx-case-single__facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0 0 40px;
	padding: 30px;
	background: var(--lx-muted);
	border-radius: var(--lx-radius);
}

.lx-case-single__facts dt {
	margin-bottom: 4px;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-case-single__facts dd { margin: 0; font-weight: 600; color: var(--lx-heading); }

/* ==========================================================================
   24. Footer
   ========================================================================== */

.lx-footer {
	background: var(--lx-footer-bg);
	color: var(--lx-footer-text);
}

.lx-footer .lx-container { padding-top: 78px; padding-bottom: 54px; }

.lx-footer__grid { display: grid; gap: 40px; align-items: start; }
.lx-footer__grid--2 { grid-template-columns: 1.4fr 1fr; }
.lx-footer__grid--3 { grid-template-columns: 1.4fr 1fr 1fr; }
.lx-footer__grid--4 { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }

.lx-footer__title {
	position: relative;
	margin-bottom: 24px;
	padding-bottom: 12px;
	font-size: 1.14rem;
	color: var(--lx-footer-heading);
}

.lx-footer__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background: var(--lx-accent);
}

.lx-footer__logo { display: inline-block; margin-bottom: 20px; }
.lx-footer__logo img { max-height: 52px; width: auto; }

.lx-footer__text { margin-bottom: 20px; font-size: 0.95rem; }

.lx-footer__contact { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.lx-footer__contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.94rem; }
.lx-footer__contact .lx-icon { margin-top: 4px; color: var(--lx-accent); }

.lx-footer a { color: var(--lx-footer-text); }
.lx-footer a:hover { color: var(--lx-accent); }

.lx-footer__links,
.lx-footer .lx-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lx-footer__links li,
.lx-footer .lx-footer__col ul li { margin-bottom: 11px; }

.lx-footer__links a,
.lx-footer .lx-footer__col ul a {
	position: relative;
	display: inline-block;
	padding-left: 16px;
	font-size: 0.95rem;
	transition: padding-left 0.3s var(--lx-ease), color 0.3s var(--lx-ease);
}

.lx-footer__links a::before,
.lx-footer .lx-footer__col ul a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-top: 2px solid var(--lx-accent);
	border-right: 2px solid var(--lx-accent);
	transform: rotate(45deg);
	transition: left 0.3s var(--lx-ease);
}

.lx-footer__links a:hover,
.lx-footer .lx-footer__col ul a:hover { padding-left: 22px; }

.lx-footer__socials {
	display: flex;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.lx-footer__socials a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	transition: background 0.3s var(--lx-ease), color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease);
}

.lx-footer__socials a:hover {
	background: var(--lx-accent);
	color: var(--lx-accent-contrast);
	transform: translateY(-4px);
}

.lx-footer .widget {
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.lx-footer .widget-title { color: var(--lx-footer-heading); font-size: 1.14rem; }

.lx-footer .widget li { border-bottom-color: rgba(255, 255, 255, 0.08); }

.lx-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.lx-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 24px;
	padding-bottom: 24px;
}

.lx-footer__copyright { margin: 0; font-size: 0.9rem; }

.lx-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

/* Back to top */

.lx-to-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--lx-accent);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	box-shadow: var(--lx-shadow);
	transition: opacity 0.35s var(--lx-ease), transform 0.35s var(--lx-ease), visibility 0.35s, background 0.3s var(--lx-ease);
}

.lx-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.lx-to-top:hover { background: var(--lx-primary); transform: translateY(-4px); }

/* Both float in the same corner, so the scroll button stacks above the chat
   bubble rather than landing on top of it. */
.lx-has-whatsapp .lx-to-top { bottom: 90px; }

/* ==========================================================================
   24b. Situations, process, FAQ, contact
   ========================================================================== */

.lx-situations__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lx-border);
}

.lx-situation { border-bottom: 1px solid var(--lx-border); }

.lx-situation__link {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: 0 20px;
	padding: 26px 0;
	color: var(--lx-heading);
	transition: padding-left 0.35s var(--lx-ease-out), color 0.3s var(--lx-ease);
}

.lx-situation__link:hover { padding-left: 12px; color: var(--lx-primary); }

.lx-situation__num {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: rgba(var(--lx-dark-rgb), 0.3);
}

.lx-situation__text {
	font-family: var(--lx-font-heading);
	font-size: 1.28rem;
	line-height: 1.4;
	text-wrap: pretty;
}

.lx-situation__tag {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lx-accent);
	white-space: nowrap;
}

.lx-situation__arrow {
	display: inline-flex;
	color: var(--lx-accent);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.3s var(--lx-ease), transform 0.3s var(--lx-ease-out);
}

.lx-situation__link:hover .lx-situation__arrow,
.lx-situation__link:focus-visible .lx-situation__arrow { opacity: 1; transform: translateX(0); }

/* auto-fit rather than a fixed four: a firm that publishes three stages should
   get three columns filling the row, not three columns and a gap. */
.lx-process__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--lx-gap);
}

.lx-step {
	padding-top: 20px;
	border-top: 2px solid var(--lx-accent);
}

.lx-step__num {
	display: block;
	margin-bottom: 14px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--lx-accent);
}

.lx-step__title { margin: 0 0 10px; font-size: 1.16rem; line-height: 1.3; }
.lx-step__text { margin: 0; font-size: 0.94rem; }

/* Only earns its place once the row actually scrolls, which is a phone-width
   affair. Above that the carousel classes are inert. */
.lx-carousel__hint { display: none; }

.lx-faq__list { border-top: 1px solid var(--lx-border); }

.lx-faq__item { border-bottom: 1px solid var(--lx-border); }

.lx-faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--lx-font-heading);
	font-size: 1.15rem;
	font-weight: var(--lx-heading-weight);
	color: var(--lx-heading);
	transition: color 0.3s var(--lx-ease);
}

.lx-faq__q::-webkit-details-marker { display: none; }
.lx-faq__q:hover { color: var(--lx-primary); }

.lx-faq__marker {
	position: relative;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	align-self: center;
}

.lx-faq__marker::before,
.lx-faq__marker::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: var(--lx-accent);
	transition: transform 0.3s var(--lx-ease);
}

.lx-faq__marker::after { transform: rotate(90deg); }
.lx-faq__item[open] .lx-faq__marker::after { transform: rotate(0); }

.lx-faq__a {
	padding: 0 0 26px;
	max-width: 68ch;
}

.lx-faq__a p { margin: 0; }

.lx-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: var(--lx-gap);
	align-items: start;
}

.lx-contact__grid--channels {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 28px;
}

.lx-contact__grid--channels .lx-channel { grid-template-columns: 8rem minmax(0, 22rem) minmax(0, 1fr); }

.lx-contact__channels {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.lx-channel {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lx-channel__label {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.lx-channel__value { color: #fff; }
a.lx-channel__value:hover { color: var(--lx-accent); }

.lx-contact__placeholder {
	padding: 24px;
	border: 1px dashed rgba(255, 255, 255, 0.24);
	font-size: 0.92rem;
}

.lx-contact__note {
	margin: 24px 0 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   24c. Floating actions & disclaimer
   ========================================================================== */

.lx-whatsapp {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 15px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
	transition: gap 0.35s var(--lx-ease-out), padding 0.35s var(--lx-ease-out), transform 0.3s var(--lx-ease);
}

.lx-whatsapp:hover { color: #fff; transform: translateY(-3px); }

.lx-whatsapp__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0;
	transition: max-width 0.35s var(--lx-ease-out), opacity 0.25s var(--lx-ease);
}

.lx-whatsapp:hover .lx-whatsapp__label,
.lx-whatsapp:focus-visible .lx-whatsapp__label {
	max-width: 200px;
	opacity: 1;
}

.lx-whatsapp:hover { gap: 10px; padding-right: 22px; }

/* Mobile only: on a phone the header CTA is behind a menu toggle, so the
   primary action is pinned where the thumb already is. */
.lx-actionbar { display: none; }

.lx-actionbar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 11px 6px calc(11px + env(safe-area-inset-bottom));
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--lx-heading);
	background: var(--lx-surface);
}

.lx-actionbar__item--cta {
	flex: 1.4;
	background: var(--lx-accent);
	color: var(--lx-accent-contrast);
	font-size: 0.86rem;
}

.lx-disclaimer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 20px;
}

.lx-disclaimer[hidden] { display: none; }

.lx-disclaimer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--lx-dark-rgb), 0.72);
	backdrop-filter: blur(3px);
}

.lx-disclaimer__dialog {
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 40px;
	background: var(--lx-surface);
	border-top: 3px solid var(--lx-accent);
	border-radius: var(--lx-radius);
	box-shadow: var(--lx-shadow-lg);
}

.lx-disclaimer__title {
	margin: 0 0 18px;
	font-size: 1.5rem;
}

.lx-disclaimer__body { font-size: 0.92rem; line-height: 1.65; }
.lx-disclaimer__body p { margin: 0 0 14px; }

.lx-disclaimer__body ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lx-disclaimer__body li {
	position: relative;
	padding: 0 0 10px 20px;
}

.lx-disclaimer__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 1px;
	background: var(--lx-accent);
}

.lx-disclaimer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.lx-disclaimer__links {
	margin: 18px 0 0;
	display: flex;
	gap: 18px;
	font-size: 0.8rem;
}

.lx-modal-open { overflow: hidden; }

/* ==========================================================================
   24d. Reading aids
   ========================================================================== */

/* Both aids are switched on per device, so the base state is hidden and the
   two queries at the end of this block turn on whichever modifier the
   template printed. An aid that is off for a device costs it nothing. */
.lx-progress,
.lx-rail { display: none; }

.lx-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	height: 3px;
	pointer-events: none;
}

.lx-progress__bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--lx-accent), var(--lx-primary));
	transform: scaleX(0);
	transform-origin: 0 50%;
	/* Deliberately untransitioned: the scale is rewritten every frame from the
	   scroll position, so easing it only makes the bar trail the page. */
}

.lx-rail {
	position: fixed;
	top: 50%;
	right: 14px;
	z-index: 55;
	transform: translateY(-50%);
}

/* The rail floats over both light and dark bands, so it carries its own
   surface rather than relying on whatever section is behind it. */
.lx-rail__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 8px 7px;
	list-style: none;
	border: 1px solid var(--lx-border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.lx-rail__link {
	position: relative;
	display: block;
	padding: 5px 3px;
	line-height: 0;
	color: var(--lx-heading);
}

.lx-rail__dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.26;
	transition: opacity 0.25s var(--lx-ease), transform 0.25s var(--lx-ease);
}

.lx-rail__link:hover .lx-rail__dot,
.lx-rail__link:focus-visible .lx-rail__dot { opacity: 0.65; }

.lx-rail__link.is-active { color: var(--lx-accent); }
.lx-rail__link.is-active .lx-rail__dot { opacity: 1; transform: scale(1.55); }

/* Absolutely positioned so a long section name can neither widen the rail nor
   push it off the edge of the viewport. */
.lx-rail__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 9px);
	padding: 5px 10px;
	border-radius: 4px;
	background: var(--lx-dark);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(8px, -50%);
	transition: opacity 0.2s var(--lx-ease), transform 0.25s var(--lx-ease-out), visibility 0.25s var(--lx-ease);
}

/* The chip is transient at every width. Parked open it is a second navigation
   menu sitting on top of the copy, and the margin the rail fits into is never
   wide enough to hold a section name as well. It surfaces while the page is
   moving — the moment the name is actually wanted — and on deliberate contact. */
.lx-rail.is-scrolling .lx-rail__link.is-active .lx-rail__label,
.lx-rail__link:hover .lx-rail__label,
.lx-rail__link:focus-visible .lx-rail__label,
.lx-rail__link:active .lx-rail__label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}

@media (min-width: 783px) {
	.lx-progress--desktop { display: block; }
}

/* The rail wants a margin to sit in. Between the phone breakpoint and here the
   container runs the full width of the window, so the rail would float over
   the ends of the lines rather than beside them. */
@media (min-width: 1280px) {
	.lx-rail--desktop { display: block; }
}

@media (max-width: 782px) {
	.lx-progress--mobile,
	.lx-rail--mobile { display: block; }

	/* Tighter against the edge, and the label is capped so it cannot run the
	   full width of a phone. */
	.lx-rail { right: 7px; }
	.lx-rail__list { padding: 6px 5px; }
	.lx-rail__link { padding: 4px 2px; }
	.lx-rail__dot { width: 7px; height: 7px; }
	.lx-rail__label { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   25. Scroll reveal
   ========================================================================== */

/* Nothing here hides content on its own. main.js adds .lx-armed to an element
   just before it observes it, and never to one that is already on screen, so a
   blocked or broken bundle leaves the page fully visible rather than blank. */
[data-reveal] {
	transition: opacity var(--lx-anim-duration) var(--lx-ease-out),
		transform var(--lx-anim-duration) var(--lx-ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].lx-armed {
	opacity: 0;
	will-change: opacity, transform;
}

[data-reveal="up"].lx-armed { transform: translateY(32px); }
[data-reveal="left"].lx-armed { transform: translateX(32px); }
[data-reveal="right"].lx-armed { transform: translateX(-32px); }
[data-reveal="zoom"].lx-armed { transform: scale(0.96); }

/* ==========================================================================
   26. WordPress core classes
   ========================================================================== */

.alignleft { float: left; margin: 0.4em 1.6em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.6em; }
.aligncenter { margin-left: auto; margin-right: auto; }

.alignwide { width: calc(100% + 120px); max-width: none; margin-left: -60px; }
.alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text { text-align: center; font-size: 0.86rem; }

.sticky .lx-card { border: 2px solid var(--lx-accent); }

.lx-page-links { margin-top: 24px; font-weight: 600; }
.lx-page-links a { padding: 4px 10px; background: var(--lx-muted); border-radius: var(--lx-radius); }

/* ==========================================================================
   27. Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.lx-about__badge { left: 0; }
	.lx-alignwide { width: 100%; margin-left: 0; }
}

@media (max-width: 1024px) {
	:root { --lx-gap: 24px; }

	.lx-grid--4 { grid-template-columns: repeat(2, 1fr); }

	.lx-heading__body { grid-template-columns: 1fr; align-items: start; }
	.lx-heading__title { max-width: 24ch; }

	/* Below the heading's own two-column split there is no width left to flow
	   the paragraph into a second column. */
	.lx-about__grid--text .lx-about__text { columns: 1; }
	.lx-about__grid--text .lx-about__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.lx-practice__item { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }

	.lx-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }

	.lx-contact__grid { grid-template-columns: 1fr; row-gap: 44px; }

	.lx-layout--right,
	.lx-layout--left { grid-template-columns: 1fr; }
	.lx-layout--left .lx-layout__content { order: 1; }
	.lx-layout--left .lx-layout__sidebar { order: 2; }

	.lx-profile { grid-template-columns: 1fr; }

	/* Two abreast from here down. Multi-column rather than a grid: link lists are
	   rarely the same length, and a grid row is as tall as its tallest cell, so a
	   short list leaves a band of dead space before the next pair. Flowed, each
	   column ends where its own content ends. */
	.lx-footer__grid--3,
	.lx-footer__grid--4 {
		display: block;
		columns: 2;
		column-gap: 40px;
	}

	.lx-footer__grid--3 .lx-footer__col,
	.lx-footer__grid--4 .lx-footer__col {
		margin-bottom: 40px;
		break-inside: avoid;
	}

	/* Its paragraph and social row need the measure; the link lists do not. */
	.lx-footer__grid--3 .lx-footer__col--about,
	.lx-footer__grid--4 .lx-footer__col--about { column-span: all; }

	.lx-case-single__facts { grid-template-columns: repeat(2, 1fr); }

	.lx-testimonials,
	.lx-counters { background-attachment: scroll; }

	/* Mobile navigation */

	.lx-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		width: min(340px, 84vw);
		margin: 0;
		padding: 90px 0 40px;
		background: var(--lx-surface);
		box-shadow: var(--lx-shadow-lg);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.4s var(--lx-ease-out);
	}

	.lx-nav.is-open { transform: translateX(0); }

	.lx-nav__list {
		display: block;
		padding: 0 20px;
	}

	.lx-nav__list li { border-bottom: 1px solid var(--lx-border); }

	.lx-nav__link,
	.lx-header--transparent .lx-nav__link {
		padding: 14px 6px;
		color: var(--lx-heading);
		font-size: 1rem;
	}

	.lx-nav__link > span::after { display: none; }

	.lx-nav-toggle { display: inline-flex; }

	.lx-has-children { position: relative; }

	.lx-submenu-toggle {
		display: grid;
		place-items: center;
		position: absolute;
		top: 4px;
		right: 0;
		width: 42px;
		height: 42px;
	}

	.lx-submenu-toggle .lx-icon {
		transition: transform 0.3s var(--lx-ease);
	}

	.lx-submenu-toggle[aria-expanded="true"] .lx-icon { transform: rotate(90deg); }

	.lx-submenu {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 8px 16px;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.lx-submenu.is-open { display: block; }

	.lx-nav__list li:hover > .lx-submenu { display: none; }
	.lx-nav__list li:hover > .lx-submenu.is-open { display: block; }

	.lx-header__cta { display: none; }
}

@media (max-width: 782px) {

	.lx-grid--2,
	.lx-grid--3,
	.lx-grid--4 { grid-template-columns: 1fr; }

	.lx-about__grid { grid-template-columns: 1fr; gap: 48px; }
	.lx-about__media::after { display: none; }

	/* Two narrow cards beat four stacked full-width ones: the tags stay in a
	   readable scan column and the section loses half its height. */
	.lx-about__points { gap: 10px; margin-top: 26px; }

	.lx-about__points li {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding: 14px 13px 16px;
		font-size: 0.88rem;
	}

	/* Half a phone column is about 130px of usable width. The tick and the pill
	   cannot share that without the pill wrapping mid-word, and the pill is the
	   one carrying the meaning, so the tick stands down. */
	.lx-about__point.has-tag .lx-about__check { display: none; }

	.lx-about__check { width: 22px; height: 22px; }

	.lx-about__point-tag {
		padding: 3px 9px;
		font-size: 0.68rem;
		letter-spacing: 0.03em;
		white-space: normal;
	}

	.lx-about__point-text { line-height: 1.4; }

	.lx-about__grid--text .lx-about__lead { font-size: 1.06rem; padding-left: 16px; }

	.lx-features--overlap { margin-top: 0; padding-bottom: var(--lx-section-pad); }

	.lx-hero { height: auto; min-height: 0; }

	.lx-hero__slide {
		position: relative;
		display: none;
		padding: 110px 0 90px;
	}

	.lx-hero__slide.is-active { display: flex; }

	.lx-hero__arrow { display: none; }

	.lx-post-row { grid-template-columns: 1fr; }

	.lx-postnav .nav-links { grid-template-columns: 1fr; }
	.lx-postnav .nav-next { text-align: left; }

	.lx-newsletter__inner { padding: 36px 28px; }
	.lx-newsletter__form { min-width: 0; max-width: none; width: 100%; }

	.lx-footer__grid--2 { grid-template-columns: minmax(0, 1fr); }

	/* Same two-column flow as above, closed up for the narrower measure. */
	.lx-footer__grid--3,
	.lx-footer__grid--4 { column-gap: 20px; }

	.lx-footer__grid--3 .lx-footer__col,
	.lx-footer__grid--4 .lx-footer__col { margin-bottom: 30px; }

	.lx-footer__title { margin-bottom: 18px; font-size: 0.98rem; }

	.lx-footer__links li,
	.lx-footer .lx-footer__col ul li { margin-bottom: 9px; }

	.lx-footer__links a,
	.lx-footer .lx-footer__col ul a { font-size: 0.88rem; line-height: 1.35; }

	.lx-topbar__inner { justify-content: center; text-align: center; }
	.lx-topbar__contact { justify-content: center; gap: 16px; flex-wrap: wrap; }
	.lx-topbar__hours { display: none; }

	.lx-single__footer { flex-direction: column; align-items: flex-start; }

	.lx-author { flex-direction: column; text-align: center; align-items: center; }

	.lx-comments__list .children { margin-left: 18px; }

	.lx-heading { margin-bottom: 28px; padding-top: 14px; row-gap: 12px; }
	.lx-heading__body { row-gap: 10px; }
	.lx-heading__title { max-width: none; font-size: var(--lx-fs-h4); }
	.lx-heading__lead { font-size: 0.94rem; line-height: 1.5; }

	/* Hairline-separated full-bleed text collapses into one undifferentiated
	   document on a phone. Each entry gets its own surface so the boundary
	   between one item and the next is unmistakable. */
	.lx-practice,
	.lx-situations__list,
	.lx-process__list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		border-top: 0;
	}

	.lx-practice__item,
	.lx-situation__link,
	.lx-step {
		border: 1px solid var(--lx-border);
		border-radius: var(--lx-radius);
		background: var(--lx-surface);
	}

	/* On an untinted band a white card would be invisible against the section,
	   so the fill flips to the tint and the contrast survives either way. */
	.lx-section:not(.lx-section--alt) .lx-practice__item,
	.lx-section:not(.lx-section--alt) .lx-situation__link,
	.lx-section:not(.lx-section--alt) .lx-step { background: var(--lx-muted); }

	.lx-practice__item {
		grid-template-columns: 1fr;
		row-gap: 12px;
		padding: 20px 18px;
	}

	.lx-practice__item:hover { background: var(--lx-surface); }
	.lx-section:not(.lx-section--alt) .lx-practice__item:hover { background: var(--lx-muted); }

	.lx-practice__lead { grid-template-columns: 2.4rem minmax(0, 1fr); }
	.lx-practice__title { font-size: 1.2rem; line-height: 1.22; }

	/* Six areas at full length is four screens of scrolling before the reader
	   reaches anything else. The opening lines carry the qualification; the
	   rest of the argument lives on the practice area page. */
	.lx-practice__excerpt p {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.95rem;
		line-height: 1.5;
	}

	/* The matter names are the scan targets — people look for "RERA" or "GST"
	   rather than reading the excerpt — so they stay in full and are tightened
	   instead of truncated. */
	.lx-practice__matters {
		margin-top: 12px;
		font-size: 0.84rem;
		line-height: 1.35;
		gap: 2px 0;
	}

	.lx-practice__matters li { padding-right: 14px; }
	.lx-practice__matters li:not(:last-child)::after { right: 6px; }

	.lx-situation__link {
		grid-template-columns: 2.4rem minmax(0, 1fr);
		gap: 6px 12px;
		padding: 18px 16px;
	}

	.lx-situation__link:hover { padding-left: 16px; }
	.lx-situation__text { font-size: 1rem; line-height: 1.35; }
	.lx-situation__tag { grid-column: 2; }
	.lx-situation__arrow { display: none; }

	.lx-step { padding: 20px 18px; border-top: 2px solid var(--lx-accent); }
	.lx-step__num { margin-bottom: 8px; }
	.lx-step__title { font-size: 1.08rem; }

	/* A column of stacked cards is most of a screen spent on something nobody
	   reads twice. Swiped, the whole set costs one screen and the partly
	   visible next card is what tells the reader there is more. Bleeds to the
	   viewport edge so the swipe starts where the thumb already is. */
	.lx-carousel {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		margin-right: calc(var(--lx-edge) * -1);
		margin-left: calc(var(--lx-edge) * -1);
		padding: 4px var(--lx-edge) 8px;
		overflow-x: auto;
		/* Not optional. Declaring overflow-x alone computes overflow-y to auto,
		   which leaves the row scrollable by the few pixels a reveal transform
		   or a shadow sticks out by — and a strip that drags vertically under
		   the thumb reads as broken. */
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--lx-edge);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.lx-carousel::-webkit-scrollbar { display: none; }

	.lx-carousel > * {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	.lx-carousel__hint {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 14px;
		font-size: 0.76rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--lx-accent);
	}

	.lx-channel { grid-template-columns: 1fr; gap: 4px; }

	.lx-disclaimer { padding: 0; place-items: end stretch; }

	.lx-disclaimer__dialog {
		max-width: none;
		max-height: 86vh;
		padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
		border-radius: var(--lx-radius) var(--lx-radius) 0 0;
	}

	.lx-disclaimer__actions .lx-btn { flex: 1; justify-content: center; }

	/* Thumb-reach conversion bar. It owns the bottom of the viewport, so the
	   WhatsApp bubble and the back-to-top button both step above it and the
	   document gains matching padding to keep the footer reachable. */
	.lx-actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		display: flex;
		border-top: 1px solid var(--lx-border);
		box-shadow: 0 -6px 22px rgba(var(--lx-dark-rgb), 0.12);
	}

	.lx-has-actionbar { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

	.lx-has-actionbar .lx-whatsapp,
	.lx-has-actionbar .lx-to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }

	/* A bar, a chat bubble and a scroll button is three layers of floating
	   chrome over a 375px column. The action bar already anchors the thumb, so
	   the scroll button stands down rather than covering the content. */
	.lx-has-actionbar .lx-to-top { display: none; }

	.lx-whatsapp { right: 16px; padding: 13px; }
	.lx-whatsapp__label { display: none; }
}

@media (max-width: 560px) {

	:root { --lx-edge: 18px; }

	.lx-about__points li { padding: 12px 11px 14px; font-size: 0.84rem; }
	.lx-about__point-tag { font-size: 0.64rem; padding: 3px 7px; }

	.lx-case-single__facts { grid-template-columns: 1fr; }

	.lx-hero__actions { flex-direction: column; align-items: stretch; }
	.lx-hero__actions .lx-btn { justify-content: center; }

	.lx-newsletter__text { flex-direction: column; text-align: center; }
	.lx-newsletter__form { flex-direction: column; }

	.lx-footer__bottom-inner { justify-content: center; text-align: center; }

	/* No margin here: the 782px block already tightens the gap under the heading
	   and a second value at this width only widens it back out. */
	.lx-heading { padding-top: 16px; }
	.lx-heading__title { font-size: 1.6rem; }

	.lx-practice__matters { font-size: 0.85rem; }

	.lx-situation__link { grid-template-columns: 2.2rem minmax(0, 1fr); }
	.lx-situation__text { font-size: 1rem; }

	.lx-faq__q { font-size: 1.02rem; gap: 16px; }

	.lx-disclaimer__dialog { padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
	.lx-disclaimer__title { font-size: 1.25rem; }
	.lx-disclaimer__actions { flex-direction: column; }

	.lx-actionbar__item { font-size: 0.68rem; }
	.lx-actionbar__item--cta { font-size: 0.8rem; }
}

/* ==========================================================================
   28. Motion preferences & print
   ========================================================================== */

@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;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.lx-hero__slide.is-active .lx-hero__image { animation: none; }

	.lx-hero__kicker,
	.lx-hero__title,
	.lx-hero__text,
	.lx-hero__actions { opacity: 1; transform: none; }
}

@media print {
	.lx-header,
	.lx-topbar,
	.lx-footer,
	.lx-to-top,
	.lx-share,
	.lx-postnav,
	.lx-related,
	.lx-comments { display: none !important; }

	body { color: #000; }
	.lx-page-header { background: none; color: #000; padding: 20px 0; }
	.lx-page-header__title { color: #000; }
}