/**
 * Merrick & Vane — full-service law firm theme.
 * Design tokens, layout, and component styles.
 *
 * Restraint is the thesis of this build: a single warm ivory/oxblood
 * palette, one quiet ambient WebGL layer, and generous whitespace rather
 * than a loud GPU spectacle. See mv-bg.js for the signature background.
 *
 * @package MerrickVane
 */

/* ---------------------------------------------------------------------
   1. Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-1);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, dl, dd, figure { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--oxblood); outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   2. Design tokens
   --------------------------------------------------------------------- */
:root {
	/* Palette — warm ivory/parchment base, deep oxblood accent, ink
	   charcoal text, restrained brass for hairline accents only. Quiet and
	   muted by design — deliberately unlike this catalogue's recent
	   saturated/dark run (Copperline's soldermask green, Wavelength's
	   electric blue, Denwell's cream/coral, Tidehaven's teal/coral). */
	--ivory: #f7f1e4;
	--ivory-2: #efe4ce;
	--ivory-3: #e7d9bc;
	--paper: #fbf8f0;

	--ink: #2a241e;
	/* --ink-78 measured ~9.9:1 against --ivory and ~7.7:1 against --paper —
	   comfortably clears the 4.5:1 AA floor for small body text on every
	   real surface it's used against, including layered glass panels. */
	--ink-78: rgba(42, 36, 30, 0.78);
	--ink-52: rgba(42, 36, 30, 0.52);
	--ink-14: rgba(42, 36, 30, 0.14);
	--ink-08: rgba(42, 36, 30, 0.08);

	--oxblood: #6e1b23;
	--oxblood-dark: #4c1218;
	--oxblood-glow: rgba(110, 27, 35, 0.22);

	--brass: #9c7a3e;
	/* --brass-text is reserved for larger/bold labels (~3.6:1 on ivory) —
	   not used for small body copy anywhere in this theme. */
	--brass-text: #6b5122;

	--err: #7d281d;

	/* Fonts */
	--font-display: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
	--font-body: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Type scale: 17px base x 1.25 ratio */
	--fs-0: 0.85rem;
	--fs-1: 1.0625rem;
	--fs-2: 1.328rem;
	--fs-3: 1.66rem;
	--fs-4: 2.074rem;
	--fs-5: 2.593rem;
	--fs-6: 3.242rem;
	--fs-7: 4.052rem;

	/* Spacing scale */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4.5rem;
	--sp-7: 6.5rem;
	--sp-8: 9rem;
	--sp-9: 11rem;

	--section-pad: 8.5rem;
	--radius: 6px;
	--radius-sm: 3px;
	--radius-lg: 10px;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 780px) {
	:root { --section-pad: 4.25rem; }
}

/* ---------------------------------------------------------------------
   3. Base typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.14;
	color: var(--ink);
	text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.9rem + 3vw, var(--fs-7)); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 1.5rem + 1.7vw, var(--fs-6)); }
h3 { font-size: var(--fs-3); }
h4 { font-size: var(--fs-2); }
p { color: var(--ink-78); }
strong { color: var(--ink); font-weight: 600; }
em, i { font-style: italic; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--oxblood);
	margin-bottom: var(--sp-3);
}
.eyebrow::before {
	content: '';
	width: 26px; height: 1px;
	background: var(--oxblood);
	display: inline-block;
}

/* ---------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }
.wrap--narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }
.wrap--text { max-width: 800px; margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }

.section { position: relative; padding: var(--section-pad) 0; z-index: 1; background: rgba(247, 241, 228, 0.9); }
.section--alt { background: rgba(239, 228, 206, 0.92); }
.section--paper { background: rgba(251, 248, 240, 0.94); }
.section--dark {
	background: linear-gradient(160deg, var(--oxblood-dark), var(--oxblood));
	color: var(--ivory);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ivory); }
.section--dark p { color: rgba(247, 241, 228, 0.82); }
.section--tight { padding: var(--sp-6) 0; }
.section--first { padding-top: calc(var(--section-pad) * 0.7); }

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 999;
	background: var(--ink); color: var(--ivory); padding: 0.8em 1.4em; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

.section-head { max-width: 620px; margin-bottom: var(--sp-6); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--wide { max-width: 780px; }
.section-head h2 { margin-top: var(--sp-2); }
.section-head p { margin-top: var(--sp-3); font-size: var(--fs-2); }

.section-foot { margin-top: var(--sp-6); }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

.divider { height: 1px; background: var(--ink-14); border: 0; margin: var(--sp-6) 0; }
.divider--light { background: rgba(247, 241, 228, 0.2); }

/* ---------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	padding: 0.95em 1.9em; border-radius: var(--radius-sm);
	font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
	letter-spacing: 0.01em;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color 0.2s, color 0.2s; } }
.btn--cta { background: var(--oxblood); color: var(--ivory); box-shadow: 0 18px 36px -20px var(--oxblood-glow); }
.btn--cta:hover { background: var(--oxblood-dark); transform: translateY(-2px); }
.btn--outline { background: transparent; border: 1.5px solid var(--ink-14); color: var(--ink); }
.btn--outline:hover { border-color: var(--oxblood); color: var(--oxblood); }
.btn--outline-light { background: transparent; border: 1.5px solid rgba(247, 241, 228, 0.4); color: var(--ivory); }
.btn--outline-light:hover { border-color: var(--ivory); background: rgba(247, 241, 228, 0.08); }
.btn--lg { padding: 1.05em 2.2em; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.text-link { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--oxblood); }
.text-link svg { transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   6. Glass surfaces — warm ivory-tinted, restrained (low blur, low glow)
   --------------------------------------------------------------------- */
.glass {
	position: relative;
	background: linear-gradient(160deg, rgba(255, 253, 247, 0.72), rgba(251, 248, 240, 0.5));
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	border: 1px solid rgba(42, 36, 30, 0.08);
	border-radius: var(--radius);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		0 20px 46px -28px rgba(42, 36, 30, 0.22);
}

/* ---------------------------------------------------------------------
   7. Persistent ambient WebGL2 background — fixed, full-viewport,
   non-negative z-index (see header.php note on the negative-z-index
   occlusion bug class). Content wrapper .mv-page sits at z-index:1 above
   it, and .section keeps a translucent (not opaque) background so the
   glass-light field genuinely continues to read past the hero.
   --------------------------------------------------------------------- */
.mv-bg-stage {
	position: fixed; inset: 0; z-index: 0;
	background: linear-gradient(175deg, #faf5e9 0%, var(--ivory) 45%, var(--ivory-3) 100%);
	overflow: hidden;
	pointer-events: none;
}
.mv-bg-stage canvas { width: 100%; height: 100%; display: block; }
.mv-bg-fallback {
	position: absolute; inset: 0; display: none;
	background:
		radial-gradient(46% 34% at 20% 14%, rgba(110, 27, 35, 0.05), transparent 65%),
		radial-gradient(40% 30% at 82% 62%, rgba(156, 122, 62, 0.06), transparent 60%),
		linear-gradient(175deg, #faf5e9 0%, var(--ivory) 45%, var(--ivory-3) 100%);
}
.mv-bg-stage.is-fallback .mv-bg-fallback { display: block; }
.mv-bg-stage.is-fallback canvas { display: none; }

.mv-page { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   8. Header
   --------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--ink-08); }
/* Blur lives on a ::before layer, not directly on .site-header — a
   computed backdrop-filter on .site-header itself would establish a
   containing block for its position:fixed .nav descendant (mobile
   off-canvas panel), collapsing its inset:0 0 0 auto sizing down to
   content height instead of the full viewport. This exact bug class has
   hit multiple sibling themes in this catalogue; verified fixed here via
   real mobile-nav open/close testing, not assumption. */
.site-header::before {
	content: '';
	position: absolute; inset: 0; z-index: -1;
	background: rgba(247, 241, 228, 0.86);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-4); padding-top: 1.1rem; padding-bottom: 1.1rem; }

.brand { display: flex; align-items: center; gap: 0.65em; }
.brand__mark { color: var(--oxblood); display: flex; }
.brand__text { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: 0.01em; color: var(--ink); }
.brand__text small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-52); margin-top: 0.1em; }

.nav { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.nav ul { display: flex; gap: var(--sp-4); align-items: center; }
.nav a { font-size: 0.92rem; font-weight: 600; color: var(--ink-78); transition: color 0.25s var(--ease); }
.nav a:hover { color: var(--oxblood); }
.nav .menu-item-cta a {
	background: var(--oxblood); color: var(--ivory); padding: 0.7em 1.4em; border-radius: var(--radius-sm);
	transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.nav .menu-item-cta a:hover { background: var(--oxblood-dark); transform: translateY(-1px); }
.nav__phone { display: flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--oxblood); font-size: 0.88rem; white-space: nowrap; }
.nav__phone svg { flex-shrink: 0; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	.nav {
		position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); margin: 0;
		flex-direction: column; align-items: flex-start; justify-content: flex-start;
		padding: 6.5rem var(--sp-4) var(--sp-4);
		background: rgba(247, 241, 228, 0.97);
		backdrop-filter: blur(20px) saturate(130%);
		-webkit-backdrop-filter: blur(20px) saturate(130%);
		border-left: 1px solid var(--ink-08);
		transform: translateX(100%);
		transition: transform 0.4s var(--ease);
		overflow-y: auto;
	}
	@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
	.nav.is-open { transform: translateX(0); }
	.nav ul { flex-direction: column; gap: 0; width: 100%; align-items: flex-start; }
	.nav ul li { width: 100%; border-bottom: 1px solid var(--ink-08); }
	.nav ul a { display: block; padding: 1rem 0; font-size: 1.15rem; }
	.nav .menu-item-cta { margin-top: var(--sp-3); width: 100%; }
	.nav .menu-item-cta a { display: flex; justify-content: center; width: 100%; padding: 0.9em 1.6em; }
	.nav__phone { margin-top: var(--sp-3); font-size: 1rem; }
}

/* ---------------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------------- */
.site-footer { position: relative; z-index: 1; background: var(--ink); color: rgba(247, 241, 228, 0.72); padding: var(--sp-7) 0 0; }
.site-footer h4 { color: var(--ivory); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; margin-bottom: var(--sp-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); }
.footer-brand__mark { color: var(--brass); margin-bottom: var(--sp-2); }
.footer-brand__text { font-family: var(--font-display); font-size: 1.3rem; color: var(--ivory); font-weight: 500; }
.footer-brand__tag { margin-top: var(--sp-2); max-width: 34ch; font-size: 0.92rem; }
.footer-nav a, .footer-contact a { display: block; padding: 0.4em 0; font-size: 0.92rem; color: rgba(247, 241, 228, 0.72); transition: color 0.2s; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--brass); }
.footer-contact p { color: rgba(247, 241, 228, 0.72); font-size: 0.92rem; margin: 0.15em 0; }
.footer-social { display: flex; gap: 0.75rem; margin-top: var(--sp-3); }
.footer-social a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(247, 241, 228, 0.2); border-radius: 50%; color: rgba(247, 241, 228, 0.72); }
.footer-social a:hover { border-color: var(--brass); color: var(--brass); }

.footer-bottom { border-top: 1px solid rgba(247, 241, 228, 0.12); padding: var(--sp-4) 0; }
/* 0.62 alpha (not the more common 0.5) — verified via composited-contrast
   math against the real rgb(42,36,30) footer background: 0.5 measured only
   ~4.51:1, right at the AA floor with no safety margin at this small
   (0.8rem) copyright-line size; 0.62 clears ~6.1:1. */
.footer-bottom__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: 0.8rem; color: rgba(247, 241, 228, 0.62); }
/* The base reset's `p { color: var(--ink-78) }` rule directly targets any
   <p> element, and a directly-matching rule always wins over an inherited
   ancestor color regardless of the ancestor selector's specificity — so
   every dark-background container with plain <p> children needs its own
   explicit `p` rule (color: inherit is enough) rather than relying on
   inheritance from the container's own `color`. Verified via a real
   composited-contrast check that caught this exact miss on first pass. */
.footer-bottom__inner p { color: inherit; }

.disclaimer-bar { background: #1e1a15; color: rgba(247, 241, 228, 0.55); font-size: 0.76rem; line-height: 1.6; padding: var(--sp-3) 0; }
.disclaimer-bar .wrap { max-width: 1100px; }
.disclaimer-bar p { color: inherit; }

@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
	.footer-bottom__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   10. Image placeholder slots — see inc/placeholder-images.php. Neutral,
   on-palette gradient blocks marked for the photography phase; never a
   literal photo stand-in.
   --------------------------------------------------------------------- */
.img-slot {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, var(--ivory-2) 0%, var(--ivory-3) 100%);
	border: 1px solid var(--ink-08);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
}
.img-slot::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 15% -10%, rgba(110, 27, 35, 0.06), transparent 55%);
}
.img-slot__glyph { color: var(--ink-14); position: relative; z-index: 1; }
.img-slot--portrait { aspect-ratio: 3 / 3.6; }
.img-slot--square { aspect-ratio: 1 / 1; }
.img-slot--wide { aspect-ratio: 16 / 9; }
.img-slot--hero { aspect-ratio: 5 / 4; border-radius: var(--radius-lg); }

/* ---------------------------------------------------------------------
   11. Hero (front page) — asymmetric split, static/server-rendered LCP
   text with the ambient canvas visible behind, not a full-bleed centered
   template like recent sibling themes.
   --------------------------------------------------------------------- */
.hero { position: relative; padding: calc(var(--section-pad) * 0.95) 0 var(--sp-8); z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-7); align-items: end; }
.hero__kicker { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oxblood); margin-bottom: var(--sp-3); }
.hero__title { max-width: 15ch; }
.hero__lede { margin-top: var(--sp-4); font-size: var(--fs-2); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.hero__actions--center { justify-content: center; }
.hero__aside { padding-bottom: 0.4rem; }
.hero__stat-line { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-3) 0; border-top: 1px solid var(--ink-14); }
.hero__stat-line:last-child { border-bottom: 1px solid var(--ink-14); }
.hero__stat-line strong { font-family: var(--font-display); font-size: var(--fs-3); font-weight: 500; color: var(--oxblood); }
.hero__stat-line span { font-size: 0.85rem; color: var(--ink-52); }

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
	.hero__title { max-width: none; }
}

/* ---------------------------------------------------------------------
   12. Practice-area editorial index rows (front page + archive) — a
   numbered list treatment, not a card grid.
   --------------------------------------------------------------------- */
.pa-list { border-top: 1px solid var(--ink-14); }
.pa-row { border-bottom: 1px solid var(--ink-14); }
.pa-row__link {
	display: grid;
	grid-template-columns: 3.5rem 3rem 1fr 1.5rem;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-5) 0;
	transition: padding-left 0.35s var(--ease), background-color 0.35s var(--ease);
}
.pa-row__link:hover { padding-left: var(--sp-3); background: rgba(110, 27, 35, 0.035); }
.pa-row__index { font-family: var(--font-display); font-size: var(--fs-3); color: var(--ink-14); font-weight: 500; }
.pa-row__icon { color: var(--oxblood); }
.pa-row__title { display: block; font-family: var(--font-display); font-size: var(--fs-3); font-weight: 500; color: var(--ink); }
.pa-row__summary { display: block; margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-52); max-width: 56ch; }
.pa-row__arrow { color: var(--ink-14); transition: transform 0.3s var(--ease), color 0.3s var(--ease); justify-self: end; }
.pa-row__link:hover .pa-row__arrow { transform: translateX(4px); color: var(--oxblood); }

@media (max-width: 700px) {
	.pa-row__link { grid-template-columns: 2.4rem 2.2rem 1fr; gap: var(--sp-2); padding: var(--sp-4) 0; }
	.pa-row__arrow { display: none; }
	.pa-row__title { font-size: var(--fs-2); }
}

/* ---------------------------------------------------------------------
   13. Stats band
   --------------------------------------------------------------------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat { text-align: left; padding-top: var(--sp-3); border-top: 1px solid rgba(247, 241, 228, 0.22); }
.stat__value { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 500; color: var(--ivory); line-height: 1; }
.stat__label { display: block; margin-top: var(--sp-2); font-size: 0.82rem; letter-spacing: 0.04em; color: rgba(247, 241, 228, 0.68); }
@media (max-width: 780px) {
	.stats-band { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

/* ---------------------------------------------------------------------
   14. Cards — attorneys, matters, practice-area highlight tiles
   --------------------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.atty-card { overflow: hidden; }
.atty-card__media { display: block; }
.atty-card__body { padding: var(--sp-4); }
.atty-card__name { font-size: var(--fs-2); }
.atty-card__name a:hover { color: var(--oxblood); }
.atty-card__role { margin-top: 0.3em; font-size: 0.85rem; color: var(--oxblood); font-weight: 600; }
.atty-card__areas { margin-top: 0.6em; font-size: 0.8rem; color: var(--ink-52); }

.matter-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.matter-card__top { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.matter-card__area { color: var(--oxblood); font-weight: 700; }
.matter-card__year { color: var(--ink-52); }
.matter-card__title { font-size: var(--fs-2); }
.matter-card__title a:hover { color: var(--oxblood); }
.matter-card__summary { font-size: 0.94rem; }
.matter-card__value { font-family: var(--font-display); font-size: var(--fs-3); color: var(--oxblood); font-weight: 500; margin-top: auto; padding-top: var(--sp-2); }

.pa-tile { padding: var(--sp-4); }
.pa-tile__icon { color: var(--oxblood); margin-bottom: var(--sp-3); }
.pa-tile h3 { font-size: var(--fs-2); }
.pa-tile p { margin-top: 0.5em; font-size: 0.92rem; }

/* ---------------------------------------------------------------------
   15. Practice Area x Industry matrix — the second signature technique.
   Real interactive grid: row headers (practice areas) x column headers
   (industries), a button per intersection, and a detail panel that shows
   the real, distinct text for whichever cell is focused/hovered. All 42
   cell strings are also pre-rendered as real DOM text inside the buttons'
   accessible names / a visually-hidden long-form list, so the content is
   crawlable and usable with JS disabled (progressive enhancement, not a
   JS-gated feature). See assets/js/mv-matrix.js.
   --------------------------------------------------------------------- */
.matrix { --cols: 7; }
.matrix__scroll { overflow-x: auto; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; }
.matrix__grid {
	display: grid;
	grid-template-columns: 13rem repeat(var(--cols), minmax(6.5rem, 1fr));
	min-width: 880px;
	border: 1px solid var(--ink-14);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper);
}
.matrix__corner, .matrix__col-head, .matrix__row-head, .matrix__cell {
	border-right: 1px solid var(--ink-08);
	border-bottom: 1px solid var(--ink-08);
	padding: 0.85rem 0.7rem;
}
.matrix__corner { background: var(--ivory-2); }
.matrix__col-head { background: var(--ivory-2); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-align: center; color: var(--ink-78); display: flex; align-items: center; justify-content: center; text-align: center; }
.matrix__row-head { background: var(--ivory-2); font-size: 0.86rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; }
.matrix__cell { padding: 0; }
.matrix__btn {
	width: 100%; height: 100%; min-height: 3.4rem;
	display: flex; align-items: center; justify-content: center;
	padding: 0.6rem;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
	color: var(--ink-14);
}
.matrix__btn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.matrix__btn:hover, .matrix__btn:focus-visible { background: rgba(110, 27, 35, 0.08); color: var(--oxblood); }
.matrix__btn.is-active { background: var(--oxblood); color: var(--ivory); }
.matrix__btn.is-active::before { background: var(--brass); }

.matrix__detail {
	margin-top: var(--sp-4);
	padding: var(--sp-5);
	min-height: 9rem;
}
.matrix__detail-eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oxblood); }
.matrix__detail-title { margin-top: 0.5rem; font-size: var(--fs-3); }
.matrix__detail-body { margin-top: 0.8rem; font-size: 1.02rem; }
.matrix__detail-empty { color: var(--ink-52); font-style: italic; }

.matrix__legend { margin-top: var(--sp-3); font-size: 0.82rem; color: var(--ink-52); }

/* All-cells content, present in the DOM for SEO/no-JS regardless of the
   interactive widget above — visually hidden but real, crawlable text. */
.matrix__full-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.no-js .matrix__full-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-top: var(--sp-5); }
.no-js .matrix__interactive { display: none; }

@media (max-width: 700px) {
	.matrix__detail { padding: var(--sp-4); }
}

/* ---------------------------------------------------------------------
   16. Trust signals (peer recognition, not testimonials)
   --------------------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.trust-card { padding: var(--sp-5); display: flex; gap: var(--sp-3); }
.trust-card__icon { flex-shrink: 0; color: var(--oxblood); }
.trust-card h3 { font-size: var(--fs-2); }
.trust-card p { margin-top: 0.5em; font-size: 0.94rem; }
@media (max-width: 780px) { .trust-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   17. Consultation form
   --------------------------------------------------------------------- */
.info-panel { padding: var(--sp-5); }
.cform { padding: var(--sp-6); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.cform__field { margin-bottom: var(--sp-3); }
.cform__field label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-78); margin-bottom: 0.4em; }
.cform__field input, .cform__field select, .cform__field textarea {
	width: 100%; padding: 0.85em 1em; border-radius: var(--radius-sm);
	border: 1.5px solid var(--ink-14); background: var(--paper); color: var(--ink);
	transition: border-color 0.25s var(--ease);
}
.cform__field input:focus, .cform__field select:focus, .cform__field textarea:focus { outline: none; border-color: var(--oxblood); }
.cform__field textarea { resize: vertical; min-height: 7rem; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__status { margin-top: var(--sp-3); font-size: 0.9rem; min-height: 1.4em; }
.cform__status.is-success { color: #2f5d34; }
.cform__status.is-error { color: var(--err); }
.cform__disclaimer { margin-top: var(--sp-3); font-size: 0.76rem; color: var(--ink-52); }
@media (max-width: 620px) { .cform__row { grid-template-columns: 1fr; } .cform { padding: var(--sp-4); } }

/* ---------------------------------------------------------------------
   18. Attorney / practice-area / matter single templates
   --------------------------------------------------------------------- */
.detail-hero { padding: calc(var(--section-pad) * 0.7) 0 var(--sp-6); }
.detail-hero__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); align-items: start; }
.detail-hero__eyebrow { margin-bottom: var(--sp-2); }
.detail-hero__lede { margin-top: var(--sp-3); font-size: var(--fs-2); }
.detail-meta { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 0.6rem; }
.detail-meta__row { display: flex; gap: 0.6rem; font-size: 0.92rem; }
.detail-meta__row dt { font-weight: 600; min-width: 9rem; color: var(--ink); }
.detail-meta__row dd { margin: 0; color: var(--ink-78); }
.pull-quote { border-left: 3px solid var(--oxblood); padding-left: var(--sp-4); margin: var(--sp-6) 0; }
.pull-quote p { font-family: var(--font-display); font-size: var(--fs-3); color: var(--ink); font-style: italic; font-weight: 400; }
.prose { max-width: 74ch; }
.prose p + p { margin-top: 1.3em; }
.highlight-list { display: grid; gap: 0.6rem; margin-top: var(--sp-4); }
.highlight-list li { display: flex; gap: 0.7em; align-items: flex-start; font-size: 0.98rem; color: var(--ink-78); }
.highlight-list svg { color: var(--oxblood); flex-shrink: 0; margin-top: 0.2em; }

@media (max-width: 900px) {
	.detail-hero__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   19. Archive index headers
   --------------------------------------------------------------------- */
.archive-hero { padding: calc(var(--section-pad) * 0.6) 0 var(--sp-5); }
.archive-hero h1 { max-width: 20ch; }
.archive-hero p { margin-top: var(--sp-3); font-size: var(--fs-2); max-width: 60ch; }
.archive-hero__lede p { margin-top: var(--sp-3); font-size: var(--fs-2); max-width: 60ch; }
.archive-filter { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: var(--sp-5); }
.archive-filter a {
	padding: 0.55em 1.1em; border-radius: 999px; font-size: 0.84rem; font-weight: 600;
	border: 1.5px solid var(--ink-14); color: var(--ink-78); transition: all 0.2s var(--ease);
}
.archive-filter a:hover, .archive-filter a.is-active { border-color: var(--oxblood); color: var(--oxblood); background: rgba(110, 27, 35, 0.06); }

/* ---------------------------------------------------------------------
   20. 404 / search
   --------------------------------------------------------------------- */
.error-hero { padding: var(--sp-9) 0; text-align: center; }
.error-hero__code { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 6vw, 8rem); color: var(--ink-14); font-weight: 500; line-height: 1; }
.search-form { display: flex; gap: 0.6rem; max-width: 480px; margin: var(--sp-5) auto 0; }
.search-form input[type="search"] { flex: 1; padding: 0.9em 1.2em; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-14); background: var(--paper); }
.search-form input[type="search"]:focus { outline: none; border-color: var(--oxblood); }

.search-results-count { color: var(--ink-52); font-size: 0.92rem; margin-bottom: var(--sp-4); }
.search-result { padding: var(--sp-4) 0; border-bottom: 1px solid var(--ink-14); }
.search-result__type { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oxblood); }
.search-result h3 { margin-top: 0.4em; font-size: var(--fs-3); }
.search-result p { margin-top: 0.5em; }

/* ---------------------------------------------------------------------
   21. Comments
   --------------------------------------------------------------------- */
.comments-area { margin-top: var(--sp-7); }
.comment-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.comment-body { padding: var(--sp-4); border: 1px solid var(--ink-14); border-radius: var(--radius); }
.comment-author { font-weight: 700; }
.comment-metadata { font-size: 0.8rem; color: var(--ink-52); margin-top: 0.2em; }
.comment-content { margin-top: var(--sp-2); }
.comment-respond { margin-top: var(--sp-5); }
.comment-form p { margin-bottom: var(--sp-3); }
.comment-form input, .comment-form textarea {
	width: 100%; padding: 0.85em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-14); background: var(--paper);
}
.children { margin-left: var(--sp-5); margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------
   22. Reveal-on-scroll (directional)
   --------------------------------------------------------------------- */
.reveal { opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal--up { transform: translateY(24px); }
.reveal--left { transform: translateX(-24px); }
.reveal--right { transform: translateX(24px); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: opacity 0.3s; transform: none !important; } }
/* No-JS safety net: ui.js is what adds .is-visible (on IntersectionObserver
   entry, or immediately as a fallback when JS runs but IO/reduced-motion
   applies). If JS never runs at all, neither path fires and .reveal
   elements would stay opacity:0 forever — a real content-hidden-without-JS
   bug. <html> starts with class="no-js" (removed by ui.js on load), so
   this rule only ever applies when JS truly never executed. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   23. Utility
   --------------------------------------------------------------------- */
.center { text-align: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }