/* =========================================================================
   Strang Bradley — main stylesheet
   A restrained, high-end editorial system. Mobile-first, token-driven.
   Design intent: luxury fashion-house editorial applied to a trial firm —
   generous negative space, fine hairline rules, oversized high-contrast serif
   display, letter-spaced micro-labels, a single warm brass accent.

   1 Tokens · 2 Reset · 3 Type · 4 Layout · 5 Buttons/links · 6 Header
   7 Breadcrumbs · 8 Hero · 9 Sections · 10 Intro/insets · 11 Practice rows
   12 Carousels/cards · 13 Awards · 14 Practice grid · 15 CTA · 16 Footer
   17 Utilities/a11y · 18 Motion · 19 Responsive
   ========================================================================= */

/* ----------------------------------------------------------- 1. Tokens */
:root {
	/* Ink — the brand deep navy (#012641) as a full tonal scale. */
	--ink-950: #01151f;
	--ink-900: #012641;   /* brand navy */
	--ink-850: #032d4a;
	--ink-800: #053453;
	--ink-700: #0d4060;
	--ink-600: #1c506f;
	--ink-500: #356682;
	--slate-400: #5e7e96;
	--slate-300: #93a9bb;
	--slate-200: #c2cfda;

	/* Accent — the brand blues. Used for links, labels, rules, fills.
	   (var names kept as --gold-* across the system; values are blue.) */
	--gold-700: #146280;   /* deep readable blue for text/labels on light */
	--gold-600: #1c7a9d;
	--gold-500: #60b3d1;   /* primary brand blue */
	--gold-400: #84c5dd;
	--gold-300: #99bad1;   /* muted brand blue — accents on dark */
	--gold-100: #d4e8f1;

	/* Paper — cool off-white, never pure white in large fields. */
	--bone-50: #f7fafb;
	--bone-100: #eef3f6;
	--bone-150: #e6edf1;
	--bone-200: #d9e3ea;
	--paper: #ffffff;

	--text-on-ink: #eaf2f7;          /* cool off-white on navy */
	--text-on-ink-soft: #b3c4d1;
	--text-on-ink-mute: #7f95a6;
	--text-body: #1f2c38;
	--text-soft: #4c5b69;
	--text-mute: #74828f;

	--rule: rgba(1, 38, 65, 0.12);           /* hairline on light */
	--rule-strong: rgba(1, 38, 65, 0.22);
	--rule-ink: rgba(234, 242, 247, 0.16);   /* hairline on dark */
	--rule-ink-soft: rgba(234, 242, 247, 0.09);
	--brass-rule: rgba(96, 179, 209, 0.55);

	/* Type families. Fraunces = high-contrast display serif (optical sizing). */
	--font-serif: "Fraunces", "Times New Roman", Georgia, serif;
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* A deliberate, slightly dramatic display scale. */
	--fs-micro: 0.72rem;       /* letter-spaced labels */
	--fs-small: 0.85rem;
	--fs-body: 1rem;
	--fs-lede: clamp(1.02rem, 0.97rem + 0.28vw, 1.12rem);
	--fs-h4: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
	--fs-h3: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
	--fs-h2: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
	--fs-h1: clamp(2.9rem, 1.8rem + 4.6vw, 6.2rem);

	/* Generous, editorial spacing scale. */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.25rem;
	--space-5: 3.5rem;
	--space-6: 5.5rem;
	--space-7: 8rem;
	--space-8: 11rem;

	--container: 1400px;
	--container-wide: 1560px;
	--container-narrow: 800px;
	--gutter: clamp(1.25rem, 5vw, 4rem);
	--header-h: 96px;

	--radius: 2px;            /* sharp, not rounded — crisper, more couture */
	--radius-lg: 3px;

	--ease: cubic-bezier(0.22, 0.61, 0.18, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.55s;
}

/* ------------------------------------------------------------ 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.7;
	color: var(--text-body);
	background: var(--bone-50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-700); text-decoration: none; text-underline-offset: 0.2em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
::selection { background: var(--gold-500); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 2px; }
hr { border: 0; height: 1px; background: var(--rule); margin: var(--space-5) 0; }

/* -------------------------------------------------------- 3. Base type */
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1.04;
	color: var(--ink-900);
	margin: 0 0 var(--space-3);
	letter-spacing: -0.018em;
	font-optical-sizing: auto;
	text-wrap: balance;
}
h3, h4 { line-height: 1.14; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-3); }

/* Letter-spaced micro-label (the couture signature element). */
.eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold-700);
	margin: 0 0 var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: 1em;
}
.eyebrow::before {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: var(--brass-rule);
	display: inline-block;
	flex: 0 0 auto;
}
.eyebrow--plain::before { display: none; }

.rich-text { color: var(--text-soft); line-height: 1.72; }
.rich-text p { margin-bottom: var(--space-4); }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text--lede { font-size: var(--fs-lede); line-height: 1.78; color: var(--text-body); font-weight: 400; }
.rich-text--lede p { margin-bottom: var(--space-4); }
.rich-text a { color: var(--gold-700); border-bottom: 1px solid var(--brass-rule); transition: border-color var(--dur) var(--ease); }
.rich-text a:hover { border-color: var(--gold-600); }

/* Elegant italic emphasis available to serif headings. */
em, .italic { font-style: italic; }

/* ----------------------------------------------------------- 4. Layout */
.sb-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sb-container--wide { max-width: var(--container-wide); }
.sb-container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(2.75rem, 6vw, 5.25rem); position: relative; }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.section--light { background: var(--bone-50); }
.section--paper { background: var(--paper); }
.section--bone { background: var(--bone-100); }
.section--ink { background: var(--ink-900); color: var(--text-on-ink); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--bone-50); }
.section--ink .eyebrow { color: var(--gold-400); }
.section--ink .eyebrow::before { background: var(--gold-500); }

/* Fine top rule that reads as a luxury divider between stacked sections. */
.section--ruled { border-top: 1px solid var(--rule); }
.section--ink.section--ruled { border-top: 1px solid var(--rule-ink); }

/* Section intro block — eyebrow + serif heading + optional lede. */
.section-intro { max-width: 60ch; margin-bottom: var(--space-5); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro--center .eyebrow { justify-content: center; }
.section-intro__heading { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.section-intro__lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--text-soft); margin: 0; }
.section--ink .section-intro__lede { color: var(--text-on-ink-soft); }

/* Oversized muted serif index numeral — pure editorial luxury cue. */
.index-num {
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: clamp(2.4rem, 1.5rem + 3vw, 4.4rem);
	line-height: 1;
	color: var(--gold-500);
	opacity: 0.5;
	font-feature-settings: "lnum" 1;
	letter-spacing: 0;
}

/* --------------------------------------------------- 5. Buttons / links */
.btn {
	--btn-fg: var(--ink-900);
	--btn-bg: var(--gold-500);
	--btn-bd: var(--gold-500);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	padding: 1.05em 2.2em;
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 1px solid var(--btn-bd);
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Refined fill-sweep on hover instead of a crude lift. */
.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ink-900);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn--gold { --btn-fg: var(--ink-900); --btn-bg: var(--gold-500); --btn-bd: var(--gold-500); }
.btn--gold:hover, .btn--gold:focus-visible { color: var(--gold-300); }
.btn--gold::after { background: var(--ink-900); }

.btn--ink { --btn-fg: var(--bone-50); --btn-bg: var(--ink-900); --btn-bd: var(--ink-900); }
.btn--ink:hover, .btn--ink:focus-visible { color: var(--ink-900); }
.btn--ink::after { background: var(--gold-500); }

/* Ghost: a hairline outline that fills with brass. */
.btn--ghost { --btn-fg: currentColor; background: transparent; border-color: currentColor; }
.btn--ghost::after { background: var(--gold-500); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink-900); border-color: var(--gold-500); }
.section--light .btn--ghost, .section--paper .btn--ghost, .section--bone .btn--ghost { color: var(--ink-800); }

.btn--lg { padding: 1.2em 2.6em; font-size: 0.82rem; }

/* Underlined arrow link — quiet, editorial. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--font-sans);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-700);
	padding-bottom: 0.35em;
	position: relative;
}
.link-arrow::before {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 1px; width: 100%;
	background: var(--brass-rule);
	transform-origin: left;
	transition: transform var(--dur) var(--ease-out);
}
.link-arrow::after { content: "\2192"; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(0.4em); }
.link-arrow:hover::before { transform: scaleX(0.82); }
.section--ink .link-arrow { color: var(--gold-400); }

/* ----------------------------------------------------- 6. Header / nav */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--bone-50) 82%, transparent);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
	box-shadow: 0 1px 0 0 transparent;
	transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
	background: color-mix(in srgb, var(--bone-50) 96%, transparent);
	box-shadow: 0 1px 0 0 var(--rule);
}

/* Front page: the hero slides up behind a transparent, light-on-dark masthead.
   On scroll the header flips to the solid bone bar with dark text (above). */
body.sb-home .site-main--home { margin-top: calc(-1 * var(--header-h)); }
body.sb-home .site-header:not(.is-scrolled) {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 1px 0 0 transparent;
}
body.sb-home .site-header:not(.is-scrolled) .site-header__wordmark-name,
body.sb-home .site-header:not(.is-scrolled) .site-header__call-num { color: var(--bone-50); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45); }
body.sb-home .site-header:not(.is-scrolled) .site-header__phone-label { color: rgba(241, 236, 227, 0.82); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5); }
body.sb-home .site-header:not(.is-scrolled) .site-nav__menu .menu-link { color: rgba(241, 236, 227, 0.86); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5); }
body.sb-home .site-header:not(.is-scrolled) .site-nav__menu .menu-link:hover,
body.sb-home .site-header:not(.is-scrolled) .site-nav__menu .current-menu-item > .menu-link { color: var(--bone-50); }
/* Dropdown panels are always a light card — keep their links dark regardless of the transparent home header. */
body.sb-home .site-header:not(.is-scrolled) .site-nav__menu .sub-menu .menu-link { color: var(--text-soft); text-shadow: none; }
body.sb-home .site-header:not(.is-scrolled) .site-nav__menu .sub-menu .menu-link:hover { color: var(--ink-900); }
body.sb-home .site-header:not(.is-scrolled) .site-nav__menu .sub-menu .menu-item--overview .menu-link { color: var(--gold-700); }
body.sb-home .site-header:not(.is-scrolled) .nav-toggle { border-color: var(--rule-ink); }
body.sb-home .site-header:not(.is-scrolled) .nav-toggle__bar,
body.sb-home .site-header:not(.is-scrolled) .nav-toggle__bar::before,
body.sb-home .site-header:not(.is-scrolled) .nav-toggle__bar::after { background: var(--bone-50); }
.site-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(0.7rem, 1vw, 1.2rem);
	min-height: 96px;
	transition: min-height var(--dur) var(--ease);
}
.site-header.is-scrolled .site-header__bar { min-height: 76px; }

.site-header__brand { justify-self: start; }
.site-header__logo-img { height: 28px; width: auto; max-width: none; display: block; transition: filter var(--dur) var(--ease); }
/* On the homepage hero (transparent header) the colour logo reads white;
   once the solid bar appears on scroll it returns to full brand colour. */
body.sb-home .site-header:not(.is-scrolled) .site-header__logo-img { filter: brightness(0) invert(1); }
.site-header__wordmark { display: inline-block; }
.site-header__wordmark-name {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--ink-900);
	letter-spacing: 0.005em;
	line-height: 1;
}

/* Centered primary nav for a balanced, gallery-like masthead. */
.site-nav { justify-self: stretch; display: flex; justify-content: center; }
.site-nav__menu { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(0.75rem, 1.3vw, 1.5rem); list-style: none; }
.site-nav__menu .menu-link {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--text-soft);
	padding: 0.6rem 0;
	position: relative;
	white-space: nowrap;
	transition: color var(--dur) var(--ease);
}
.site-nav__menu .menu-link:hover { color: var(--ink-900); }
.site-nav__menu .menu-link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 1px; width: 0;
	background: var(--gold-500);
	transition: width var(--dur) var(--ease-out);
}
.site-nav__menu .menu-link:hover::after,
.site-nav__menu .current-menu-item > .menu-link::after,
.site-nav__menu .current-menu-ancestor > .menu-link::after { width: 100%; }
.site-nav__menu .current-menu-item > .menu-link { color: var(--ink-900); }

/* Practice-area dropdowns */
.site-nav__menu .menu-item.has-submenu { position: relative; }
.site-nav__menu .menu-link { display: inline-flex; align-items: center; }
.menu-caret { display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); opacity: 0.55; transition: transform var(--dur) var(--ease); }
.site-nav__menu .has-submenu:hover .menu-caret { transform: translateY(0.05em) rotate(45deg); }
.site-nav__menu .sub-menu {
	/* Pulled up 7px and given a matching transparent top border (below), so the
	   panel's HIT AREA starts above the nav item's bottom edge while the visible
	   card stays put. */
	position: absolute; top: calc(100% - 7px); left: 50%; transform: translateX(-50%) translateY(10px);
	margin: 0; padding: 0.4rem; list-style: none;
	/* Wide enough that each entry sits on one line; capped so a long menu can
	   scroll rather than run off the bottom of a laptop screen. */
	min-width: 260px; width: max-content; max-width: min(92vw, 27rem);
	max-height: min(72vh, 34rem); overflow-y: auto;
	background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
	/* The visual gap under the nav word is a TRANSPARENT TOP BORDER, not an
	   offset. The border is part of the panel's hit area and spans its full
	   (wide) width, so there is no dead strip for the pointer to fall through
	   on the way down — including on a diagonal move that leaves the narrow
	   nav item sideways. background-clip keeps the white card visually clear
	   of the header. Was a 4px transform offset + a bridge pseudo-element on
	   .sub-menu, which overflow-y:auto silently clips — that is what made the
	   menu flicker shut roughly half the time. */
	border-top: 12px solid transparent; background-clip: padding-box;
	/* inset hairline replaces the top border, which is transparent (see below). */
	box-shadow: 0 22px 55px rgba(1, 16, 27, 0.18), inset 0 1px 0 var(--rule);
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 200;
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease-out);
}
/* Hover bridge across the gap between the nav word and the dropdown. It lives
   on the parent <li> (NOT on .sub-menu) because the sub-menu now has
   overflow-y:auto, which clips any pseudo-element sitting outside its box —
   a bridge there is invisible to the pointer and the menu flickers shut when
   you move down toward it. Only rendered while hovering, and the pointer stays
   inside the <li> the whole way across, so :hover never drops. */
.site-nav__menu .has-submenu:hover::after,
.site-nav__menu .has-submenu:focus-within::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.site-nav__menu .has-submenu:hover > .sub-menu, .site-nav__menu .has-submenu:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.site-nav__menu .sub-menu .menu-item { display: block; }
.site-nav__menu .sub-menu .menu-link { display: block; padding: 0.5rem 0.75rem; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: none; color: var(--text-soft); white-space: nowrap; border-radius: calc(var(--radius) - 3px); }
.site-nav__menu .sub-menu .menu-link::after { display: none; }
.site-nav__menu .sub-menu .menu-link:hover { background: var(--bone-100); color: var(--ink-900); }
.site-nav__menu .sub-menu .menu-item--overview .menu-link { color: var(--gold-700); font-weight: 600; border-bottom: 1px solid var(--rule); border-radius: 0; margin-bottom: 0.25rem; }

/* Mobile: sub-pages render indented under the parent */
.mobile-nav__menu .sub-menu { list-style: none; margin: 0.15rem 0 0.6rem; padding: 0 0 0 var(--space-3); display: grid; gap: 0.1rem; border-left: 1px solid var(--rule); }
/* --text-soft is a dark slate meant for light backgrounds; on the navy drawer
   it reads at ~2:1 and looked almost blank. --text-on-ink-soft is ~8.5:1 and
   still sits below the white top-level items. */
.mobile-nav__menu .sub-menu .menu-link { font-size: 1rem; color: var(--text-on-ink-soft); padding: 0.35rem 0; }
.mobile-nav__menu .sub-menu .menu-link:hover,
.mobile-nav__menu .sub-menu .current-menu-item > .menu-link { color: var(--gold-400); }
.mobile-nav__menu .menu-caret { display: none; }

.site-header__actions { justify-self: end; display: flex; align-items: center; gap: clamp(0.8rem, 1.3vw, 1.35rem); }
.site-header__phone { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; white-space: nowrap; }
.site-header__phone-label { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-bottom: 0.18rem; }
.site-header__call-num { font-family: var(--font-serif); font-size: 1.08rem; color: var(--ink-900); font-weight: 400; letter-spacing: 0.01em; white-space: nowrap; transition: color var(--dur) var(--ease); }
.site-header__phone:hover .site-header__call-num { color: var(--gold-700); }
.site-header__cta { white-space: nowrap; padding: 0.88em 1.4em; font-size: 0.72rem; }

/* Hamburger */
.nav-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--rule); border-radius: var(--radius); background: transparent; position: relative; transition: border-color var(--dur) var(--ease); }
.nav-toggle:hover { border-color: var(--gold-500); }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: var(--ink-900); transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease), opacity 0.2s; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translate(-50%, 0) rotate(45deg); top: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translate(-50%, 0) rotate(-45deg); top: 0; }

/* Mobile slide-out drawer — off-canvas panel + dimmed backdrop.
   Hidden entirely on desktop (display:none); the ≤1200 breakpoint flips them on.
   Closed state lives off the right edge with visibility:hidden so its links stay
   out of the tab order until opened; body.nav-open slides it in. */
.mobile-nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(1, 16, 27, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
body.nav-open .mobile-nav-backdrop { opacity: 1; visibility: visible; }

.mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	width: min(86vw, 400px);
	height: 100%;
	height: 100dvh;
	flex-direction: column;
	background: var(--ink-900);
	color: var(--text-on-ink);
	border-left: 1px solid var(--rule-ink);
	box-shadow: -24px 0 60px -28px rgba(1, 12, 21, 0.7);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
}
body.nav-open .mobile-nav { transform: translateX(0); visibility: visible; }

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3) var(--gutter);
	min-height: var(--header-h);
	border-bottom: 1px solid var(--rule-ink-soft);
}
.mobile-nav__label { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-400); }
.mobile-nav__close { width: 48px; height: 48px; border: 1px solid var(--rule-ink); border-radius: var(--radius); background: transparent; position: relative; transition: border-color var(--dur) var(--ease); }
.mobile-nav__close:hover { border-color: var(--gold-500); }
/* Close X: the span is an invisible 20x20 box that positions the two strokes.
   It used to share one rule with its own ::before/::after, which gave all
   three the bar's dimensions and `left/top:50%` WITHOUT a centering translate —
   so ::before sat 10px off-centre and ::after was an unrotated third stroke. */
.mobile-nav__close-x { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); }
.mobile-nav__close-x::before,
.mobile-nav__close-x::after { content: ""; position: absolute; left: 0; top: calc(50% - 0.75px); width: 100%; height: 1.5px; background: var(--bone-50); }
.mobile-nav__close-x::before { transform: rotate(45deg); }
.mobile-nav__close-x::after { transform: rotate(-45deg); }

.mobile-nav__nav { padding: var(--space-3) var(--gutter) 0; }
.mobile-nav__menu { list-style: none; }
.mobile-nav__menu a { display: block; padding: 0.95rem 0; color: var(--text-on-ink); font-family: var(--font-serif); font-size: 1.4rem; letter-spacing: -0.01em; border-bottom: 1px solid var(--rule-ink-soft); transition: color var(--dur) var(--ease); }
.mobile-nav__menu a:hover, .mobile-nav__menu .current-menu-item > a { color: var(--gold-400); }
.mobile-nav__menu .sub-menu { list-style: none; padding-left: var(--space-2); }
.mobile-nav__menu .sub-menu a { font-size: 1.05rem; font-family: var(--font-sans); }
.mobile-nav__menu > .menu-item:last-child > a { border-bottom: 0; }

.mobile-nav__actions { margin-top: auto; padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-ink-soft); display: grid; gap: var(--space-3); }
.mobile-nav__call { display: flex; align-items: baseline; gap: 0.6rem; }
.mobile-nav__call-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-on-ink-mute); }
.mobile-nav__call-num { font-family: var(--font-serif); font-size: 1.5rem; color: var(--bone-50); }
.mobile-nav__text { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.mobile-nav__cta { width: 100%; }
body.nav-open { overflow: hidden; }

/* ------------------------------------------------------- 7. Breadcrumbs */
.page-breadcrumbs { background: var(--bone-100); border-bottom: 1px solid var(--rule); }
.page-breadcrumbs > .sb-container { padding-block: 0.85rem; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.breadcrumbs__item + .breadcrumbs__item::before { content: "\2014"; margin-right: 0.6em; color: var(--slate-300); }
.breadcrumbs__item a { color: var(--text-mute); }
.breadcrumbs__item a:hover { color: var(--gold-700); }
.breadcrumbs__item[aria-current] { color: var(--ink-800); }

/* ------------------------------------------------------------ 8. Hero */
.hero {
	position: relative;
	min-height: clamp(620px, 92vh, 980px);
	display: flex;
	align-items: flex-end;
	color: var(--text-on-ink);
	overflow: hidden;
	isolation: isolate;
	background: var(--ink-950);
}
/* The blue-wall photo shows in its natural brand-navy palette — only lightly
   deepened so it stays cohesive with the site. No grayscale: the wall already
   carries the brand blue. */
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--ink-900); }
.hero__image {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 24%;
	filter: saturate(1.06) contrast(1.03) brightness(0.94);
}
/* Darkness creeps in from all edges, weighted heavily over the lower-left
   text column where the headline crosses the lit shirt and the bright table.
   Every tone is deep brand navy, never neutral black, so the wash stays
   on-brand while guaranteeing white-on-photo legibility. */
.hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background:
		/* uniform base dim across the whole frame — lifts overall legibility
		   (incl. the eyebrow band) before the directional scrims layer on top */
		linear-gradient(0deg, rgba(1, 16, 27, 0.4), rgba(1, 16, 27, 0.4)),
		/* primary text scrim: a dark pool anchored bottom-left, fading up and
		   to the right so it covers the headline + sub + CTAs */
		radial-gradient(140% 120% at 6% 98%, rgba(1, 14, 24, 0.8) 0%, rgba(1, 15, 25, 0.62) 30%, rgba(1, 16, 27, 0.34) 52%, rgba(1, 17, 28, 0.12) 70%, rgba(1, 18, 30, 0) 85%),
		/* bottom-up anchor for the lower copy, reviews badge + scroll cue */
		linear-gradient(0deg, rgba(1, 14, 24, 0.66) 0%, rgba(1, 15, 25, 0.34) 26%, rgba(1, 17, 28, 0.1) 50%, rgba(1, 18, 30, 0) 66%),
		/* top-down: keeps the transparent masthead readable */
		linear-gradient(180deg, rgba(1, 18, 30, 0.5) 0%, rgba(1, 18, 30, 0.14) 18%, rgba(1, 18, 30, 0) 36%),
		/* all-sides vignette: darkens every edge + corner */
		radial-gradient(125% 130% at 50% 42%, rgba(1, 16, 27, 0) 46%, rgba(1, 16, 27, 0.3) 78%, rgba(1, 14, 24, 0.5) 100%),
		/* faint brand tint for overall cohesion */
		linear-gradient(0deg, rgba(1, 38, 65, 0.12), rgba(1, 38, 65, 0.12));
}
.hero__inner { position: relative; width: 100%; padding-block: clamp(2.25rem, 6vh, 5rem); }
.hero__content { position: relative; max-width: 56rem; }
.hero__eyebrow {
	font-family: var(--font-sans);
	color: var(--gold-100);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 1em;
	margin-bottom: var(--space-4);
	text-shadow: 0 1px 2px rgba(1, 12, 21, 0.7), 0 2px 14px rgba(1, 12, 21, 0.8);
}
.hero__eyebrow::before { content: ""; width: 3rem; height: 1px; background: var(--gold-400); flex: 0 0 auto; }
.hero__heading {
	color: var(--bone-50);
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin-bottom: var(--space-4);
	max-width: 18ch;
	text-shadow: 0 1px 2px rgba(1, 12, 21, 0.6), 0 2px 28px rgba(1, 12, 21, 0.75);
}
.hero__heading em { font-style: italic; font-weight: 400; color: var(--gold-300); }
.hero__sub {
	font-family: var(--font-sans);
	font-size: var(--fs-lede);
	line-height: 1.55;
	color: var(--text-on-ink);      /* full off-white — readable on photo */
	font-weight: 400;
	max-width: 40rem;
	margin-bottom: var(--space-5);
	text-shadow: 0 1px 2px rgba(1, 12, 21, 0.7), 0 2px 18px rgba(1, 12, 21, 0.8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* Pinned to the same boxed content edge as every other section, not the viewport. */
.hero__reviews {
	position: absolute; left: 0; right: 0;
	bottom: clamp(2rem, 5vh, 3.5rem);
	z-index: 2;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex; justify-content: flex-end;
	pointer-events: none;
}
.hero__reviews > * { pointer-events: auto; }
/* The Elfsight Google-reviews badge sits here as the hero badge; its own
   appearance is themed via Elfsight's custom CSS. Reserve height to avoid a
   layout shift while the widget loads. */
.reviews-badge--elfsight { display: inline-flex; align-items: center; min-height: 54px; }

/* Thin scroll cue */
.hero__scroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.hero__scroll-label { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-on-ink-mute); }
.hero__scroll-line { width: 1px; height: 44px; background: linear-gradient(180deg, var(--gold-400), transparent); }

/* --------------------------------------------------- 10. Intro / insets */
.intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.intro__body .section-intro { margin-bottom: var(--space-4); }
.intro__body .index-num { display: block; margin-bottom: var(--space-3); }

/* The inset is a quietly luxurious panel: hairline frame, brass top tick. */
.inset {
	background: var(--paper);
	border: 1px solid var(--rule);
	padding: clamp(1.8rem, 3.4vw, 2.8rem);
	position: relative;
}
.inset::before { content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 2px; background: var(--gold-500); }
.inset--accent { background: var(--ink-900); color: var(--text-on-ink-soft); border-color: var(--ink-800); }
.inset--accent .inset__heading { color: var(--bone-50); }
.inset--accent .inset__content { color: var(--text-on-ink-soft); }
.inset--accent a { color: var(--gold-400); }
.inset__heading { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.inset__intro { color: var(--text-soft); margin-bottom: var(--space-3); }
.inset__list { list-style: none; display: grid; gap: var(--space-3); }
.inset__list li { position: relative; padding-left: 1.8em; line-height: 1.5; }
.inset__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55em; height: 0.55em; border: 1.5px solid var(--gold-500); transform: rotate(45deg); }
.inset--accent .inset__list li::before { border-color: var(--gold-400); }
.inset__footer { margin-top: var(--space-4); font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--text-soft); margin-bottom: 0; }
.inset--accent .inset__footer { color: var(--gold-300); }
.inset__media { margin: calc(-1 * clamp(1.8rem, 3.4vw, 2.8rem)) calc(-1 * clamp(1.8rem, 3.4vw, 2.8rem)) var(--space-3); overflow: hidden; }
.inset__cta, .inset__content > :last-child { margin-bottom: 0; }

/* --------------------------------------------- 11. Practice rows
   Editorial split: a full-bleed image background fills one half of the viewport
   while the number/title and the descriptive text sit inside the SAME site
   container as the header, hero and intro — so every content edge lines up.
   Consecutive rows alternate which side the image sits on. */
.practice-blocks { padding-block: 0; }
.practice-blocks__inner { width: 100%; }
.practice-block { position: relative; background: var(--paper); overflow: hidden; }

/* Image background covering one half of the row. Uses 50% (not 50vw) so its
   edge lands on the centred container's true centre — 50vw would be off by half
   the scrollbar width, since the container is centred in the scrollbar-less body. */
.practice-block__bg {
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 50%; z-index: 0;
	background: var(--ink-900); overflow: hidden;
}
.practice-block--flip .practice-block__bg { left: auto; right: 0; }
.practice-block__image {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 32%;
	transition: transform 1.4s var(--ease-out);
}
.practice-block:hover .practice-block__image { transform: scale(1.05); }
.practice-block__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(0deg, rgba(1, 16, 27, 0.5), rgba(1, 16, 27, 0.5)),
		linear-gradient(180deg, rgba(1, 18, 30, 0.12) 0%, rgba(1, 18, 30, 0.66) 100%);
}

/* Content grid — rides inside .sb-container, so edges match the rest of the site.
   Title + first paragraph stack on the image side; the rest on the text side. */
.practice-block__grid {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: "cap body" "intro body";
	column-gap: clamp(2.5rem, 6vw, 6rem);
	row-gap: var(--space-3);
	align-items: start;
	min-height: clamp(360px, 38vw, 540px);
}
.practice-block--flip .practice-block__grid { grid-template-areas: "body cap" "body intro"; }

.practice-block__caption {
	grid-area: cap;
	display: flex; flex-direction: column;
	padding-top: clamp(2rem, 3.5vw, 3.25rem);
	color: var(--bone-50);
}
.practice-block--flip .practice-block__caption { text-align: right; align-items: flex-end; }
.practice-block__caption .index-num { display: none; } /* client: remove 01/02/03 numbers over practice areas */
.practice-block__heading {
	font-size: var(--fs-h2); margin: 0; color: var(--bone-50);
	text-shadow: 0 1px 2px rgba(1, 12, 21, 0.55), 0 2px 28px rgba(1, 12, 21, 0.5);
}
/* First paragraph, on the image side under the headline. */
.practice-block__intro {
	grid-area: intro;
	max-width: 44ch;
	padding-bottom: clamp(2rem, 3.5vw, 3.25rem);
	color: var(--text-on-ink);
	text-shadow: 0 1px 16px rgba(1, 12, 21, 0.6);
}
.practice-block__intro p { margin: 0; }
/* Optional extra copy filling the bottom of the image (left) column. */
.practice-block__intro-extra { margin-top: var(--space-3); }
.practice-block__intro-extra p { margin: 0 0 0.75em; }
.practice-block__intro-extra p:last-child { margin-bottom: 0; }
.practice-block__intro-extra a { color: var(--gold-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Inline links in the intro sit over the dark image scrim — brighten + underline
   them so they clearly read as links against the photo (client request). */
.practice-block__intro a { color: var(--gold-300); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(132, 197, 221, 0.6); transition: color var(--dur) var(--ease-out); }
.practice-block__intro a:hover,
.practice-block__intro a:focus-visible { color: #fff; text-decoration-color: currentColor; }
.practice-block--flip .practice-block__intro { justify-self: end; text-align: left; } /* readable even when the title is right-aligned */
.practice-block__body {
	grid-area: body;
	align-self: center;
	display: flex; flex-direction: column; justify-content: center;
	padding-block: clamp(2rem, 3.5vw, 3.25rem);
}
.practice-block__cta { margin-top: var(--space-4); margin-bottom: 0; }

/* Dark case-results callout inside a practice row (e.g. summary judgment wins). */
.case-wins {
	position: relative;
	background: var(--ink-900);
	color: var(--text-on-ink);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	margin-top: var(--space-4);
	border-radius: var(--radius);
	overflow: hidden;
}
.case-wins::before { content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 2px; background: var(--gold-500); }
.case-wins__label { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-300); margin: 0 0 var(--space-3); }
.case-wins__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.case-wins__list li { position: relative; padding-left: 1.5rem; font-size: 0.98rem; line-height: 1.5; color: var(--bone-50); }
.case-wins__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5em; height: 0.5em; border: 1.5px solid var(--gold-400); transform: rotate(45deg); }
.case-wins__list strong { font-weight: 600; color: var(--gold-300); margin-right: 0.15em; }
.case-wins__list span { display: block; margin-top: 0.2rem; font-size: 0.84rem; color: var(--text-on-ink-mute); letter-spacing: 0.01em; }
/* Free-text version of the wins box (client edits it as a text box like the homepage). */
.case-wins__text { color: var(--bone-50); font-size: 0.98rem; line-height: 1.6; }
.case-wins__text p { margin: 0 0 0.75em; }
.case-wins__text p:last-child { margin-bottom: 0; }
.case-wins__text strong { color: var(--gold-300); }
.case-wins__text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.case-wins__text li { position: relative; padding-left: 1.5rem; }
.case-wins__text li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5em; height: 0.5em; border: 1.5px solid var(--gold-400); transform: rotate(45deg); }

/* Case links inside the dark wins box — off-white, not the light-blue accent.
   The brand blues (--gold-300/700) are too low-contrast against --ink-900, so
   the linked case names were hard to read. Covers both variants of the box
   (.case-wins__list on the homepage, .case-wins__text on the pillar pages) and
   is declared last so it also beats the generic `.rich-text a` colour, which
   the box inherits when it sits inside a WYSIWYG field. Editing the colour by
   hand in the editor does NOT work — a stylesheet `a` rule always wins over an
   inherited colour on a wrapper, and <style> blocks are stripped on save. */
.case-wins a {
	color: var(--text-on-ink);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--brass-rule);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.case-wins a:hover, .case-wins a:focus-visible { color: var(--paper); border-bottom-color: var(--gold-400); }

/* The intro paragraph reads as a quiet sans standfirst — comfortably sized
   but no longer an oversized serif block, so the left column stays light. */
.practice-block__lede {
	font-size: var(--fs-lede);
	line-height: 1.72;
	color: var(--text-soft);
	margin-bottom: 0;
}
.practice-block__lede p { margin-bottom: var(--space-3); }
.practice-block__lede > :last-child { margin-bottom: 0; }

/* Supporting detail rendered as a framed callout panel — surfaces the inset
   heading and visually separates it from the lede, so each row reads less
   text-dense and gains a clear secondary tier. */
.practice-block__inset {
	position: relative;
	margin-top: var(--space-5);
	padding: clamp(1.5rem, 3vw, 2.3rem);
	background: var(--bone-100);
	border: 1px solid var(--rule);
}
.practice-block__inset::before { content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 2px; background: var(--gold-500); }
.practice-block__inset-heading { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.2; color: var(--ink-900); margin: 0 0 var(--space-3); }
.practice-block__inset .rich-text { font-size: 0.95rem; line-height: 1.75; color: var(--text-soft); }
.practice-block__inset .rich-text p { margin-bottom: var(--space-3); }
.practice-block__inset .practice-block__cta { margin-top: var(--space-3); margin-bottom: 0; }
.practice-block__inset .case-wins { margin-top: var(--space-4); }
.practice-block__inset .rich-text > :last-child { margin-bottom: 0; }
/* Optional portrait inside the inset (e.g. featured attorney: Dean Strang). */
.practice-block__inset-portrait { display: block; float: right; width: 210px; margin: 0.15rem 0 0.85rem 1.4rem; }
.practice-block__inset-img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rule); object-fit: cover; aspect-ratio: 4 / 5; object-position: 50% 22%; }
@media (max-width: 560px) {
	.practice-block__inset-portrait { float: right; width: 150px; margin: 0.15rem 0 0.85rem 1.1rem; }
}

/* When a block carries an inset panel (image + heading) rather than media-only. */
.practice-block .inset--accent .inset__media { aspect-ratio: 16 / 10; }

/* ---------------------------------------------- 12. Carousels / cards */
.carousel { position: relative; max-width: var(--container); margin: var(--space-5) auto 0; padding-inline: var(--gutter); }
.carousel__track {
	display: flex;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.5rem 0 var(--space-3);
	margin: 0;
	list-style: none;
	scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { scroll-snap-align: start; flex: 0 0 calc((100% - 2 * clamp(1.25rem, 2.5vw, 2rem)) / 3); min-width: 300px; }
.carousel__nav { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.carousel__btn {
	width: 54px; height: 54px;
	border-radius: 50%;
	border: 1px solid var(--rule-strong);
	background: transparent;
	color: var(--ink-900);
	font-size: 1.05rem;
	display: grid; place-items: center;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.section--ink .carousel__btn { border-width: 1.5px; border-color: var(--gold-500); color: var(--gold-400); background: rgba(96, 179, 209, 0.2); }
.section--ink .carousel__btn:hover { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }
.carousel__btn:hover { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }
.carousel__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.section--ink .carousel__btn:disabled { opacity: 0.5; }

/* News card — hairline frame, generous type. */
.news-card { display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; color: inherit; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.news-card:hover { border-color: var(--rule-strong); transform: translateY(-4px); }
.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bone-100); display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 2vw, 1.25rem); }
/* client: show the full logo / video still (contain), not a zoomed-in crop */
.news-card__image { width: 100%; height: 100%; object-fit: contain; transition: transform 1.1s var(--ease-out); }
.news-card:hover .news-card__image { transform: scale(1.03); }
.news-card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.4rem, 2.5vw, 2rem); flex: 1; }
.news-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-700); font-weight: 600; }
.news-card__outlet { color: var(--text-mute); }
.news-card__title { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.2; color: var(--ink-900); letter-spacing: -0.01em; }
.news-card__summary { font-size: 0.92rem; color: var(--text-soft); margin-top: auto; }

/* ------------------------------------------------------- 13. Awards */
/* Awards — a slim color-blocked band: title on the left, full-colour logos right. */
/* Awards spans the full container width: heading centred on top, then the
   badges in a large, tightly-spaced full-width row (easier to read per client). */
.awards__inner { display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.2rem, 2.5vw, 2rem); }
.awards__head { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.awards__head .eyebrow { margin-bottom: 0.4rem; }
.awards__heading { text-align: center; font-family: var(--font-serif); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-h3); line-height: 1.15; color: var(--ink-900); margin: 0 auto; max-width: none; }
.awards__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.4rem, 1vw, 0.9rem); list-style: none; margin: 0; padding: 0; width: 100%; }
.awards__item { display: flex; flex: 0 1 auto; justify-content: center; }
.awards__logo { height: clamp(72px, 8vw, 108px); width: auto; object-fit: contain; }
.awards__item a { display: flex; transition: transform var(--dur) var(--ease-out); }
.awards__item a:hover { transform: translateY(-2px); }

/* ------------------------------------------- 14. Practice grid */
/* Spaced bordered cards — each box carries its own hairline frame with a
   comfortable gap between them (client-requested padding between boxes). */
.practice-areas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: var(--space-5); list-style: none; }
.practice-card { background: var(--paper); border: 1px solid var(--rule); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.practice-card:hover { background: var(--bone-50); border-color: var(--rule-strong); transform: translateY(-4px); }
.practice-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.practice-card__media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--ink-800); }
.practice-card__image { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 1.1s var(--ease-out), opacity var(--dur) var(--ease); }
.practice-card:hover .practice-card__image { transform: scale(1.05); opacity: 1; }
.practice-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: clamp(1.6rem, 3vw, 2.4rem); flex: 1; }
.practice-card__title { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.15; color: var(--ink-900); letter-spacing: -0.01em; }
.practice-card__summary { color: var(--text-soft); font-size: 0.95rem; }
.practice-card__more { margin-top: auto; }

/* ------------------------------------------------------ 15. CTA band */
.cta-band { background: var(--ink-900); color: var(--text-on-ink); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 4rem; background: linear-gradient(180deg, var(--gold-500), transparent); }
.cta-band__inner { text-align: center; max-width: 48rem; margin-inline: auto; }
.cta-band__heading { font-size: var(--fs-h2); font-weight: 300; margin-bottom: var(--space-3); }
.cta-band__heading em { font-style: italic; color: var(--gold-300); }
.cta-band__text { color: var(--text-on-ink-soft); font-size: var(--fs-lede); line-height: 1.55; margin-bottom: var(--space-5); }
.cta-band__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.cta-band__actions .btn__eyebrow { display: block; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; font-weight: 600; margin-bottom: 0.2rem; }

/* -------------------------------------------------------- 16. Footer */
.site-footer { background: var(--ink-950); color: var(--text-on-ink-soft); }
.site-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(3rem, 5.5vw, 4.5rem); border-bottom: 1px solid var(--rule-ink-soft); }
.site-footer__logo { height: 42px; width: auto; margin-bottom: var(--space-4); }
.site-footer__logo--mark { filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer__wordmark { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 400; color: var(--bone-50); display: block; margin-bottom: var(--space-4); letter-spacing: 0.005em; }
.site-footer__blurb { max-width: 40ch; color: var(--text-on-ink-mute); font-size: 0.95rem; line-height: 1.65; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin-top: var(--space-4); }
.site-footer__social a { color: var(--text-on-ink-mute); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; transition: color var(--dur) var(--ease); }
.site-footer__social a:hover { color: var(--gold-400); }
.site-footer__col-title { font-family: var(--font-sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-400); font-weight: 600; margin-bottom: var(--space-4); }
.site-footer__menu { list-style: none; display: grid; gap: 0.9rem; }
.site-footer__menu a { color: var(--text-on-ink-soft); font-size: 0.95rem; transition: color var(--dur) var(--ease); }
.site-footer__menu a:hover { color: var(--bone-50); }
.site-footer__office { font-style: normal; display: grid; gap: 0.15rem; margin-bottom: var(--space-3); font-size: 0.92rem; line-height: 1.55; }
.site-footer__office-name { color: var(--bone-50); font-weight: 600; letter-spacing: 0.02em; }
.site-footer__phone-label { display: block; margin-top: 0.7rem; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(241, 236, 227, 0.6); font-weight: 600; }
.site-footer__phone, .site-footer__email { display: block; color: var(--gold-400); margin-top: 0.4rem; font-size: 0.95rem; transition: color var(--dur) var(--ease); }
.site-footer__phone-label + .site-footer__phone { margin-top: 0.15rem; }
.site-footer__phone:hover, .site-footer__email:hover { color: var(--gold-300); }
.site-footer__legal-inner { padding-block: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__disclaimer { font-size: 0.74rem; line-height: 1.6; color: var(--text-on-ink-mute); max-width: 100ch; margin: 0; }
.site-footer__copy { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--slate-400); margin: 0; }

/* ------------------------------------------ 16b. Inner pages (pillars) */
/* Inner-page hero — a compact brand-navy band (optional toned photo) under the
   solid masthead + breadcrumb bar. Shares the homepage hero's scrim language. */
.inner-hero { position: relative; background: var(--ink-900); color: var(--text-on-ink); overflow: hidden; isolation: isolate; }
.inner-hero__media { position: absolute; inset: 0; z-index: -1; background: var(--ink-900); }
.inner-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.04) brightness(0.9); }
.inner-hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(0deg, rgba(1, 16, 27, 0.42), rgba(1, 16, 27, 0.42)),
		radial-gradient(120% 130% at 4% 100%, rgba(1, 14, 24, 0.7) 0%, rgba(1, 16, 27, 0.28) 52%, rgba(1, 18, 30, 0) 80%),
		linear-gradient(180deg, rgba(1, 18, 30, 0.5) 0%, rgba(1, 18, 30, 0) 40%);
}
.inner-hero__inner { position: relative; padding-block: clamp(2.25rem, 5vw, 4.25rem); }
.inner-hero .eyebrow { color: var(--gold-400); }
.inner-hero .eyebrow::before { background: var(--gold-500); }
.inner-hero__heading { color: var(--bone-50); font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.2rem); line-height: 1.02; letter-spacing: -0.022em; max-width: 20ch; margin: 0; }
.inner-hero--media .inner-hero__heading { text-shadow: 0 1px 2px rgba(1, 12, 21, 0.55), 0 2px 24px rgba(1, 12, 21, 0.6); }
.inner-hero__lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--text-on-ink-soft); max-width: 54ch; margin: var(--space-3) 0 0; }
.inner-hero--media .inner-hero__lede { color: var(--text-on-ink); }
.inner-hero__actions { margin-top: var(--space-4); }

/* Overview — editorial two-column standfirst at the standard container width:
   a serif heading (brass tick) on the left, the lede copy in a comfortable
   measure on the right. Mirrors the homepage intro the client approved. */
.pa-overview__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pa-overview--single .pa-overview__grid { grid-template-columns: 1fr; max-width: var(--container-narrow); }
.pa-overview__head { position: relative; }
.pa-overview__head::before { content: ""; display: block; width: 3rem; height: 2px; background: var(--gold-500); margin-bottom: var(--space-3); }
.pa-overview__heading { font-size: var(--fs-h2); margin: 0; }
.pa-overview__body > :first-child { margin-top: 0; }
.pa-overview__body h3 { margin-top: var(--space-5); font-size: var(--fs-h4); }
/* Split content section (e.g. State Court vs. Federal Court) + optional inset. */
.pa-split__grid { display: grid; grid-template-columns: 1.35fr 0.8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pa-split__grid--single { grid-template-columns: 1fr; max-width: var(--container-narrow); }
.pa-split__heading { font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.pa-split__body > .rich-text > :first-child { margin-top: 0; }
.pa-split__body h3 { margin-top: var(--space-5); font-size: var(--fs-h4); }
.pa-split__body h3:first-child { margin-top: var(--space-3); }
.pa-split__inset .inset__body { font-size: 0.95rem; line-height: 1.7; }
.pa-split__inset .inset__body ul { margin: var(--space-3) 0; padding-left: 1.2rem; }
.pa-split__inset .inset__body li { margin-bottom: 0.35rem; }
@media (min-width: 901px) { .pa-split__inset { position: sticky; top: calc(var(--header-h) + var(--space-3)); } }
@media (max-width: 900px) { .pa-split__grid { grid-template-columns: 1fr; gap: var(--space-4); } }
/* On desktop the heading rides alongside the copy as you read. */
@media (min-width: 901px) {
	.pa-overview:not(.pa-overview--single) .pa-overview__head { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}

/* Stat-bar comparison chart (pure CSS, accessible — value printed as text). */
.stat-bars { list-style: none; display: grid; gap: var(--space-3); margin: var(--space-5) 0 var(--space-2); padding: 0; }
.stat-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.45rem 1rem; }
.stat-bar__label { grid-column: 1 / -1; font-size: 0.92rem; font-weight: 500; color: var(--text-soft); }
.stat-bar__track { position: relative; height: 14px; background: var(--bone-200); border-radius: 999px; overflow: hidden; }
.stat-bar__fill { display: block; height: 100%; background: var(--slate-400); border-radius: 999px; }
.stat-bar__value { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1; color: var(--ink-800); min-width: 3ch; text-align: right; }
.stat-bar--highlight .stat-bar__label { color: var(--ink-900); font-weight: 600; }
.stat-bar--highlight .stat-bar__fill { background: linear-gradient(90deg, var(--gold-600), var(--gold-500)); }
.stat-bar--highlight .stat-bar__value { color: var(--gold-700); }
.stat-bars__source { font-size: 0.76rem; line-height: 1.5; color: var(--text-mute); font-style: italic; margin: var(--space-3) 0 0; }

/* The record section — win-rate narrative + chart (left) beside the dark
   recent-wins box (right), at full container width. */
.pa-record__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pa-record__grid--single { grid-template-columns: 1fr; max-width: var(--container-narrow); }
.pa-record__heading { font-size: var(--fs-h2); margin-bottom: var(--space-4); }
.pa-record__judgments { margin-top: var(--space-5); }
.pa-record__judgments > :last-child { margin-bottom: 0; }
.pa-record__cta { margin-top: var(--space-4); margin-bottom: 0; }
.pa-record__aside-cta { margin: var(--space-3) 0 0; }
.pa-record .case-wins { margin: 0; }
@media (min-width: 901px) {
	.pa-record__aside { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}

/* Featured case — dark editorial split: narrative + a hairline facts panel. */
.featured-case__heading { font-size: var(--fs-h2); max-width: 26ch; margin-bottom: var(--space-5); }
.featured-case__grid { display: grid; grid-template-columns: 1.5fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.featured-case__figure { margin: 0 0 var(--space-4); overflow: hidden; border: 1px solid var(--rule-ink); aspect-ratio: 16 / 10; }
.featured-case__image { width: 100%; height: 100%; object-fit: cover; }
.featured-case__body .rich-text { color: var(--text-on-ink-soft); }
.featured-case__body .rich-text h2, .featured-case__body .rich-text h3, .featured-case__body .rich-text h4 { color: var(--bone-50); font-size: var(--fs-h4); margin: var(--space-4) 0 var(--space-2); }
.featured-case__quote { border-left: 2px solid var(--gold-500); padding-left: var(--space-3); margin: var(--space-4) 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); line-height: 1.4; color: var(--gold-100); }
.featured-case__quote p { margin: 0; }
.featured-case__cite { display: block; margin-top: var(--space-2); font-family: var(--font-sans); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.featured-case__cta { margin-top: var(--space-4); margin-bottom: 0; }
.featured-case__facts { position: relative; background: var(--ink-850); border: 1px solid var(--ink-800); padding: clamp(1.5rem, 3vw, 2.2rem); position: sticky; top: calc(var(--header-h) + var(--space-2)); }
.featured-case__facts::before { content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 2px; background: var(--gold-500); }
.featured-case__facts-list { display: grid; gap: var(--space-3); margin: 0; }
.featured-case__fact dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 0.2rem; }
.featured-case__fact dd { margin: 0; color: var(--bone-50); font-size: 0.98rem; line-height: 1.4; }

/* Text-only sub-area card (no media) — brass top tick stands in for the image. */
.practice-card--text { position: relative; }
.practice-card--text::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2px; background: var(--gold-500); z-index: 1; }

/* E-E-A-T byline / freshness — authorship + last-updated signal at content top. */
.pa-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.7em; margin: 0 0 var(--space-3); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.pa-byline__author { color: var(--gold-700); font-weight: 600; }
.pa-byline__sep { color: var(--slate-300); }

/* FAQ accordion — native <details>; content stays in the DOM for AI/crawlers. */
.faq-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item__details { }
.faq-item__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.3; color: var(--ink-900); transition: color var(--dur) var(--ease); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--gold-700); }
.faq-item__icon { position: relative; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.35em; }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--gold-600); transition: transform var(--dur) var(--ease); }
.faq-item__icon::before { width: 1.1rem; height: 1.5px; transform: translate(-50%, -50%); }
.faq-item__icon::after { width: 1.5px; height: 1.1rem; transform: translate(-50%, -50%); }
.faq-item__details[open] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item__details[open] .faq-item__q { color: var(--gold-700); }
.faq-item__a { padding: 0 0 var(--space-4); max-width: 68ch; }
.faq-item__a p { margin: 0 0 var(--space-2); color: var(--text-soft); }
.faq-item__a > :last-child { margin-bottom: 0; }
:focus-visible.faq-item__q, .faq-item__q:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* --------------------------------------------------- 17. Utilities / a11y */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; }
.skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.7rem 1.2rem; background: var(--ink-900); color: var(--bone-50); border-radius: var(--radius); }
.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; }

/* archive / entry minimal */
.archive-head { margin-bottom: var(--space-5); }
.post-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.entry__title { font-size: var(--fs-h1); }
.entry__content { max-width: var(--container-narrow); }
.entry__content p { margin-bottom: var(--space-3); }

/* --------------------------------------------------------- 18. Motion */
@media (prefers-reduced-motion: reduce) {
	.hero__image, .news-card__image, .practice-card__image, .practice-block__image { transition: none !important; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------- 18b. People + Press */
.people-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.person-card { position: relative; }
.person-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.person-card__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); margin-bottom: var(--space-3); }
.person-card__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* William Grau's headshot sat too high (hair clipped at top) — pull the crop up
   to the top edge so there's headroom above his head (client request). */
.person-card--william-e-grau .person-card__img { object-position: 50% 0; }
.person-card__name { font-family: var(--font-serif); font-size: var(--fs-h4); color: var(--ink-900); display: block; }
.person-card__role { display: block; font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); margin-top: 0.35rem; }
/* Homepage "meet the attorneys" scrolling headshots (reuses .carousel) */
.carousel__item--team { flex: 0 0 calc((100% - 3 * clamp(1.25rem, 2.5vw, 2rem)) / 4); min-width: 220px; }
.team-card { display: block; text-decoration: none; }
.team-card__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); margin-bottom: var(--space-3); }
.team-card__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform 1.1s var(--ease-out); }
.team-card:hover .team-card__img { transform: scale(1.03); }
.team-card__name { font-family: var(--font-serif); font-size: var(--fs-h4); color: var(--ink-900); display: block; }
.team-card__role { display: block; font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); margin-top: 0.3rem; }
.person-card__bio { display: block; font-size: 0.95rem; line-height: 1.6; color: var(--text-soft); margin-top: var(--space-2); }
.person-card__more { margin-top: var(--space-2); font-size: var(--fs-small); }

/* Single attorney bio */
.attorney__grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.attorney__side { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
.attorney__photo { margin: 0 0 var(--space-3); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-800); }
.attorney__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.attorney__name { font-size: var(--fs-h2); margin: 0; }
.attorney__role { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); margin: 0.5rem 0 0; }
.attorney__contact { list-style: none; padding: 0; margin: var(--space-3) 0 0; font-size: 0.95rem; display: grid; gap: 0.35rem; }
.attorney__contact a { color: var(--gold-700); text-decoration: none; }
.attorney__contact a:hover { text-decoration: underline; }
.attorney__creds { margin: var(--space-4) 0 0; border-top: 1px solid var(--rule); padding-top: var(--space-3); display: grid; gap: var(--space-3); }
.attorney__cred dt { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 0.25rem; }
.attorney__cred dd { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--text-body); }
/* Blocked bio sections (Employment, Representative Cases, etc.) */
.attorney__sections { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.bio-block { background: var(--bone-50); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.25rem, 2.5vw, 1.9rem); }
.bio-block__heading { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); margin: 0 0 var(--space-2); }
.bio-block__body { font-size: 0.95rem; line-height: 1.65; color: var(--text-soft); }
.bio-block__body :first-child { margin-top: 0; }
.bio-block__body :last-child { margin-bottom: 0; }
.bio-block__body ul { margin: 0; padding-left: 1.1rem; }
.bio-block__body li { margin-bottom: 0.4rem; }

/* Media / press list */
.press-list { list-style: none; margin: 0; padding: 0; }
.press-item { border-top: 1px solid var(--rule); }
.press-item:last-child { border-bottom: 1px solid var(--rule); }
.press-item__link { display: grid; grid-template-columns: 200px 1fr; gap: clamp(1.4rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.4rem, 3vw, 2rem) 0; color: inherit; text-decoration: none; }
.press-item--no-thumb .press-item__link { grid-template-columns: 1fr; }
.press-item__link:hover .press-item__title { color: var(--gold-700); }
.press-item__content { max-width: 70ch; }
.press-item__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--bone-100); border: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.press-item__img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; transition: transform 1.2s var(--ease-out); }
.press-item--video .press-item__img { object-fit: cover; padding: 0; }
.press-item__link:hover .press-item--video .press-item__img, .press-item--video .press-item__link:hover .press-item__img { transform: scale(1.04); }
.press-item__play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 999px; background: rgba(1, 16, 27, 0.62); }
.press-item__play::after { content: ""; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.press-item__content { min-width: 0; }
.press-item__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.press-item__outlet { color: var(--gold-700); font-weight: 600; }
.press-item__tag { color: var(--ink-900); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.1rem 0.6rem; letter-spacing: 0.08em; }
.press-item__title { display: block; font-family: var(--font-serif); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.25; color: var(--ink-900); margin: 0.6rem 0 0; }
.press-item__summary { display: block; font-size: 0.98rem; line-height: 1.6; color: var(--text-soft); margin-top: var(--space-2); max-width: 70ch; }
.press-item__more { margin-top: var(--space-2); font-size: var(--fs-small); display: inline-block; }
.press-item__pdf { display: inline-flex; align-items: center; gap: 0.4rem; margin: -0.6rem 0 clamp(1.2rem, 3vw, 1.8rem) calc(200px + clamp(1.4rem, 3vw, 2.5rem)); font-size: var(--fs-small); font-weight: 600; color: #146280; text-decoration: underline; text-underline-offset: 2px; }
.press-item__pdf::before { content: "\2193"; font-weight: 700; }
.press-item__pdf:hover { color: var(--ink-900); }
.press-item--no-thumb .press-item__pdf { margin-left: 0; }
@media (max-width: 720px) { .press-item__pdf { margin-left: 0; } }

/* Single press page — dark banner hero + a wide, prominent media column. */
.press-single { max-width: 960px; margin-inline: auto; }
.press-single__summary { margin-top: var(--space-4); }
.press-single__actions { margin-top: var(--space-5); display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.press-single__back { font-size: var(--fs-small); }

/* Embedded video (single press page) */
.sb-video { margin: 0; }
.sb-video video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--ink-950); }

/* "Civil Rights Lawyers" inset (practice sub-pages) */
.cr-lawyers__grid { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2.2vw, 2rem); }
.cr-lawyer__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.cr-lawyer__photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); margin-bottom: var(--space-2); border: 1px solid var(--rule-ink); }
.cr-lawyer__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.cr-lawyer__name { font-family: var(--font-serif); font-size: 1.08rem; color: var(--bone-50); }
.cr-lawyer__role { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); margin-top: 0.2rem; }

/* ------------------------------------------- 18c. Contact + Case Results */
.contact__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact__why-heading { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.contact__why-text { color: var(--text-soft); line-height: 1.7; }
.contact__points { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-3); }
.contact__points li { position: relative; padding-left: 1.6rem; color: var(--text-body); line-height: 1.6; }
.contact__points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55em; height: 0.55em; border: 1.5px solid var(--gold-500); transform: rotate(45deg); }
.contact__talk { margin-top: var(--space-4); background: var(--ink-900); color: var(--text-on-ink); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); }
.contact__talk-label { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); margin: 0 0 0.4rem; }
.contact__talk-phone { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1; color: var(--bone-50); text-decoration: none; display: inline-block; }
.contact__talk-phone:hover { color: var(--gold-300); }
.contact__talk-sub { margin: 0.6rem 0 0; color: var(--text-on-ink-soft); font-size: 0.9rem; line-height: 1.5; }
.contact__talk-email { display: inline-block; margin-top: 0.7rem; color: var(--gold-300); text-decoration: none; font-size: 0.95rem; }
.contact__talk-email:hover { color: var(--gold-400); }
.contact__form-wrap { background: var(--bone-50); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); }
.contact__form-note { color: var(--text-soft); }
.contact__form-wrap .wpforms-head-container { display: none; }

/* WPForms — branded, placeholder-driven (labels hidden in the form settings). */
.contact__form-wrap .wpforms-container,
.contact__form-wrap .wpforms-container-full {
	margin: 0 !important;
	/* WPForms 1.8+ modern-markup CSS variables → brand the button + fields. */
	--wpforms-button-background-color: var(--gold-500);
	--wpforms-button-background-color-alt: var(--gold-400);
	--wpforms-button-text-color: var(--ink-950);
	--wpforms-button-border-radius: var(--radius);
	--wpforms-field-border-radius: var(--radius);
	--wpforms-field-border-color: var(--rule-strong);
	--wpforms-label-color: var(--text-body);
}
.contact__form-wrap .wpforms-form .wpforms-field { padding: 0 !important; margin: 0 0 0.85rem !important; }
.contact__form-wrap .wpforms-form .wpforms-field:last-of-type { margin-bottom: 0 !important; }
.contact__form-wrap .wpforms-form .wpforms-field-label,
.contact__form-wrap .wpforms-form .wpforms-field-sublabel { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.contact__form-wrap .wpforms-form input[type="text"],
.contact__form-wrap .wpforms-form input[type="email"],
.contact__form-wrap .wpforms-form input[type="tel"],
.contact__form-wrap .wpforms-form input.wpforms-field-medium,
.contact__form-wrap .wpforms-form input.wpforms-field-large,
.contact__form-wrap .wpforms-form textarea {
	width: 100%; max-width: none; box-sizing: border-box; height: auto;
	padding: 0.85rem 1rem; margin: 0;
	font-family: var(--font-sans); font-size: 1rem; line-height: 1.4; color: var(--text-body);
	background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact__form-wrap .wpforms-form input:focus,
.contact__form-wrap .wpforms-form textarea:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(96, 179, 209, 0.18); outline: none; }
.contact__form-wrap .wpforms-form ::placeholder { color: var(--text-mute); opacity: 1; }
.contact__form-wrap .wpforms-form textarea { min-height: 280px; resize: vertical; }
/* Force full-width fields (WPForms applies width:60% via .wpforms-field-medium,
   incl. on the name ROW) and an even first/last split. */
.contact__form-wrap .wpforms-form .wpforms-field-medium,
.contact__form-wrap .wpforms-form .wpforms-field-large,
.contact__form-wrap .wpforms-form .wpforms-field-row { width: 100% !important; max-width: 100% !important; }
.contact__form-wrap .wpforms-form input,
.contact__form-wrap .wpforms-form textarea { width: 100% !important; max-width: 100% !important; }
/* The name field is a <fieldset> — strip its default UA border/padding so the
   first/last row fills the full width like the other fields. */
.contact__form-wrap .wpforms-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact__form-wrap .wpforms-field-row { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 0.85rem !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
.contact__form-wrap .wpforms-field-row > * { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; }
/* WPForms adds clearfix ::before/::after to the row — as flex items they steal
   ~14px and shove the fields inward. Remove them. */
.contact__form-wrap .wpforms-field-row::before,
.contact__form-wrap .wpforms-field-row::after { content: none !important; display: none !important; }
.contact__form-wrap .wpforms-field-row input { width: 100% !important; max-width: 100% !important; }
.contact__form-wrap .wpforms-submit-container { margin: var(--space-3) 0 0 !important; padding: 0 !important; }
.contact__form-wrap button.wpforms-submit,
.contact__form-wrap .wpforms-form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
	background-color: var(--gold-500) !important; color: var(--ink-950) !important; border: 0 !important; border-radius: var(--radius) !important;
	font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 0.5rem 1.5rem; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.contact__form-wrap button.wpforms-submit:hover,
.contact__form-wrap .wpforms-form button[type="submit"]:hover { background-color: var(--gold-400) !important; transform: translateY(-1px); }
.contact__form-wrap .wpforms-required-label { color: var(--gold-700); }
.contact__form-wrap .wpforms-form label.wpforms-error { color: #b3261e; font-size: 0.78rem; margin-top: 0.3rem; display: block; }
.contact__form-wrap .wpforms-form input.wpforms-error, .contact__form-wrap .wpforms-form textarea.wpforms-error { border-color: #b3261e; }
.contact__form-wrap .wpforms-confirmation-container-full { margin: 0 !important; background: var(--bone-100); border: 1px solid var(--rule); border-left: 3px solid var(--gold-500); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem); color: var(--text-body); }
.offices__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.office { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: 0 22px 55px rgba(1, 16, 27, 0.10); background: var(--ink-900); }
.office--flip .office__map { order: 2; }
.office__map { line-height: 0; min-height: clamp(260px, 30vw, 360px); background: var(--bone-200); }
.office__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.office__panel { background: var(--ink-900); color: var(--text-on-ink); padding: clamp(1.8rem, 3vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; }
.office__eyebrow { color: var(--gold-400); margin-bottom: var(--space-2); }
.office__name { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.1; margin: 0; color: var(--bone-50); }
.office__address { font-style: normal; color: var(--text-on-ink-soft); line-height: 1.6; margin-top: var(--space-3); font-size: 1.05rem; }
.office__lines { margin: var(--space-3) 0 0; display: grid; gap: 0.5rem; }
.office__lines div { display: flex; gap: 0.8rem; align-items: baseline; }
.office__lines dt { flex: 0 0 3.2rem; font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-ink-mute); margin: 0; }
.office__lines dd { margin: 0; color: var(--text-on-ink); }
.office__lines dd a { color: var(--gold-300); text-decoration: none; }
.office__lines dd a:hover { color: var(--gold-400); }
.office__dir { align-self: flex-start; margin-top: var(--space-4); }

.case-results__list { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; gap: var(--space-3); }
.case-result { background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--gold-500); padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.4rem, 3vw, 2rem); }
.section--bone .case-result { background: var(--bone-50); }
.case-result__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.case-result__name { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; margin: 0; color: var(--ink-900); }
.case-result__date { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-700); white-space: nowrap; }
.case-result__court { font-size: 0.85rem; color: var(--text-mute); margin: 0.3rem 0 0; }
.case-result__summary { margin: 0.7rem 0 0; color: var(--text-soft); line-height: 1.6; }
.case-result__meta { margin: 0.7rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.8rem; color: var(--text-mute); }
/* Structured rows for filings / SJ wins / verdicts. */
.case-result__row { margin: 0.55rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-soft); }
.case-result__k { font-weight: 600; color: var(--ink-900); }
.case-result__claims { display: block; }
.case-result__claim-list { margin: 0.35rem 0 0; padding-left: 1.15rem; }
.case-result__claim-list li { margin: 0.15rem 0; }
.case-result__claim-list .claim-link { color: var(--gold-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.case-result__claim-list .claim-link:hover,
.case-result__claim-list .claim-link:focus-visible { color: var(--gold-600); }
.case-result__decision { margin: 0.7rem 0 0; }
.case-result__decision .link-arrow { font-weight: 600; color: #146280; }
.case-result__docs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0; }
.btn--sm { padding: 0.5rem 1.1rem; font-size: var(--fs-micro); letter-spacing: 0.08em; }
/* Detailed sub-page "History of Winning" groups. */
.pa-history__group { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.pa-history__group:first-of-type { margin-top: clamp(1rem, 2vw, 1.5rem); }
.pa-history__group-heading { font-family: var(--font-serif); font-size: var(--fs-h4); color: var(--ink-900); margin: 0; padding-bottom: 0.6rem; border-bottom: 2px solid var(--gold-500); }
.pa-history__group .case-results__list { margin-top: var(--space-3); }

/* Overview inset ("what sets us apart"-style box beside a pillar overview) */
.pa-overview__inset { margin-top: var(--space-4); }

/* "Lawyers who worked on this case" — headshot row in the featured case */
.case-lawyers { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(241, 236, 227, 0.18); }
.case-lawyers__heading { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); margin: 0 0 var(--space-3); }
.case-lawyers__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 1.75rem); }
.case-lawyer__link { display: block; text-decoration: none; width: 92px; text-align: center; }
.case-lawyer__photo { display: block; width: 92px; height: 108px; overflow: hidden; background: var(--ink-700); border-radius: 2px; margin-bottom: 0.5rem; }
.case-lawyer__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.case-lawyer__name { display: block; font-size: 0.78rem; color: var(--bone-100); line-height: 1.25; }
.case-lawyer__link:hover .case-lawyer__name { color: var(--gold-300); }

/* Statewide Impact — interactive case-map iframe */
.case-map__frame-wrap { margin-top: var(--space-4); }
/* Taller box so the pin pop-ups have room; the map itself is draggable so users
   can also pan a pop-up into view (client request 2026-09-09). */
.case-map__frame { width: 100%; height: 760px; max-height: 86vh; border: 1px solid var(--rule); border-radius: 3px; background: var(--bone-50); display: block; }
@media (max-width: 640px) { .case-map__frame { height: 600px; } }

/* ------------------------------------------------------ 19. Responsive */
@media (max-width: 1400px) {
	/* When the bar gets tight, drop the "Free Consult" button and KEEP the phone
	   (client request — the phone number must stay reachable, the CTA can go). */
	.site-header__cta { display: none; }
}
@media (max-width: 1200px) {
	.site-header__bar { grid-template-columns: 1fr auto; }
	.site-nav { display: none; }
	.nav-toggle { display: block; }
	.site-header__cta { display: none; }
	/* phone stays visible next to the hamburger */
	.mobile-nav { display: flex; }
	.mobile-nav-backdrop { display: block; }
}
@media (max-width: 560px) {
	/* On the smallest screens the slide-out drawer carries Call + Text, so the
	   masthead phone can drop to keep the top bar uncluttered. */
	.site-header__phone { display: none; }
}
@media (max-width: 900px) {
	.intro__grid { grid-template-columns: 1fr; gap: var(--space-4); }
	.people-grid { grid-template-columns: repeat(2, 1fr); }
	.attorney__grid { grid-template-columns: 1fr; gap: var(--space-4); }
	.attorney__side { position: static; }
	.attorney__photo { max-width: 340px; }
	.cr-lawyers__grid { grid-template-columns: repeat(3, 1fr); }
	.contact__grid { grid-template-columns: 1fr; gap: var(--space-4); }
	.contact__form-wrap { order: -1; }
	.office { grid-template-columns: 1fr; }
	.office--flip .office__map { order: 0; }
	.awards__grid { justify-content: center; gap: clamp(1.25rem, 5vw, 2rem); }
	.awards__logo { height: clamp(58px, 16vw, 88px); }
	/* Stacked: the number + title stay overlaid on the image band at top; the
	   paragraph and the rest of the content drop into the white area below. */
	.practice-block { --pb-band: clamp(240px, 58vw, 360px); }
	.practice-block__bg { top: 0; left: 0; right: 0; width: auto; height: var(--pb-band); }
	.practice-block--flip .practice-block__bg { left: 0; right: 0; }
	.practice-block__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "cap" "intro" "body";
		grid-template-rows: auto auto auto;
		min-height: 0; row-gap: 0; column-gap: 0;
		padding-bottom: clamp(2rem, 8vw, 3rem);
	}
	.practice-block--flip .practice-block__grid { grid-template-areas: "cap" "intro" "body"; }
	.practice-block__caption {
		min-height: var(--pb-band);
		justify-content: flex-end;
		padding-top: 0; padding-bottom: clamp(1.25rem, 5vw, 1.75rem);
		text-align: left; align-items: flex-start;
		color: var(--bone-50);
	}
	.practice-block--flip .practice-block__caption { text-align: left; align-items: flex-start; }
	.practice-block__heading { color: var(--bone-50); text-shadow: 0 1px 16px rgba(1, 12, 21, 0.6); }
	.practice-block__intro {
		justify-self: stretch; max-width: none;
		color: var(--text-soft); text-shadow: none;
		padding-top: clamp(1.5rem, 6vw, 2rem); padding-bottom: 0;
	}
	.practice-block--flip .practice-block__intro { justify-self: stretch; text-align: left; }
	.practice-block__body { padding-block: clamp(1.25rem, 5vw, 1.75rem) 0; justify-content: flex-start; align-self: start; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
	.featured-case__grid { grid-template-columns: 1fr; gap: var(--space-4); }
	.featured-case__facts { position: static; order: -1; }
	.pa-overview__grid { grid-template-columns: 1fr; gap: var(--space-3); }
	.pa-record__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 640px) {
	.press-item__link { grid-template-columns: 1fr; gap: var(--space-3); }
	.press-item__thumb { max-width: 280px; }
	.people-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-2); }
	.cr-lawyers__grid { grid-template-columns: repeat(2, 1fr); }
	.hero { min-height: 88vh; min-height: 88dvh; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-top: calc(var(--header-h) + var(--space-4)); padding-bottom: var(--space-5); }
	.hero__inner { padding-block: 0; }
	.hero__heading { font-size: clamp(2.6rem, 10vw, 3.6rem); max-width: none; }
	.hero__sub { max-width: none; }
	.hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
	.hero__actions .btn { width: 100%; }
	.hero__reviews { position: static; left: auto; right: auto; max-width: none; width: 100%; padding-inline: var(--gutter); margin: var(--space-4) 0 0; display: block; }
	.hero__scroll { display: none; }
	.carousel { padding-inline: var(--gutter); }
	.carousel__item { flex-basis: 84%; min-width: 0; }
	.practice-areas__grid { grid-template-columns: 1fr; }
	.site-footer__top { grid-template-columns: 1fr; }
	.cta-band__actions { flex-direction: column; align-items: stretch; }
	.cta-band__actions .btn { width: 100%; }
}

/* Very small handsets — keep the masthead compact and type readable. */
@media (max-width: 400px) {
	:root { --gutter: 1.15rem; }
	.site-header__bar { min-height: 72px; }
	.site-header__logo-img { height: 30px; }
	.hero__heading { font-size: clamp(2.2rem, 11vw, 2.8rem); }
}