﻿/*
 * Shulick Law - light editorial theme.
 * Charcoal display type on warm paper, hunter-green accent (client palette:
 * green/gray/black/white — M4), translucent Myron Shulick painting
 * backgrounds, ticker hero, draggable press strip.
 * Note: the --sl-brick / --sl-gold variable NAMES are historical; their
 * values are now hunter green and sage (M4 killed the red and gold).
 */

/* Open Sans (SIL OFL 1.1), self-hosted - client, 2026-08-19. Serving it
   from the theme rather than Google keeps the "no third-party requests"
   promise in the privacy policy. The upright file is variable, so one
   48 KB download covers every weight from 300 to 800. */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/open-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--sl-paper: #f1ede2;
	--sl-white: #ffffff;
	--sl-ink: #26242a;
	--sl-charcoal: #454248;
	--sl-slate: #6b6570;
	--sl-muted: #d3ccbd;
	--sl-gold: #9cbda2;
	--sl-brick: #1e4634;
	--sl-brick-dark: #143122;
	--sl-border: 1px solid var(--sl-muted);
	--sl-shadow-soft: 0 10px 32px rgba(38, 36, 42, 0.09);
	--sl-shadow-raise: 0 18px 44px rgba(38, 36, 42, 0.16);
	/* Client, 2026-08-19: Open Sans everywhere except the logo (that is
	   image art). Both vars resolve to the same stack, so every existing
	   font-family reference follows automatically. Supersedes M5's Times
	   New Roman Bold. */
	--sl-display: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sl-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--sl-paper);
	color: var(--sl-ink);
}

a {
	text-underline-offset: 0.18em;
}

::selection {
	background: var(--sl-brick);
	color: var(--sl-white);
}

:focus-visible {
	outline: 2px solid var(--sl-brick);
	outline-offset: 2px;
}

.wp-site-blocks {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- header */

/* No backdrop-filter here: it makes the header the containing block for
   fixed descendants, trapping the mobile nav overlay (position: fixed,
   inset: 0) inside the header bar — the "tiny scroll box" menu bug. */
.lawdts-site-header {
	background: rgba(241, 237, 226, 0.93) !important;
	border-bottom: var(--sl-border);
	position: sticky;
	top: 0;
	z-index: 30;
}

.sl-brand {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

/* Client's interlocked-SL logo icon (replaced the interim boxed monogram). */
.sl-brand-mark {
	display: block;
	height: 46px;
	width: auto;
}

.sl-brand .wp-block-site-title,
.sl-brand .wp-block-site-title a {
	color: var(--sl-ink) !important;
	font-family: var(--sl-display);
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.sl-brand .wp-block-site-title a:hover {
	color: var(--sl-brick) !important;
}

.sl-brand .wp-block-site-tagline {
	color: var(--sl-slate);
	font-family: var(--sl-sans);
	font-size: 0.72rem;
	font-weight: 700; /* M5: tagline beside the logo is bold */
	letter-spacing: 0.2em;
	margin-top: 0.2rem;
	text-transform: uppercase;
}

.lawdts-site-header .wp-block-navigation-item__content {
	color: var(--sl-ink);
	font-family: var(--sl-display);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lawdts-site-header .wp-block-navigation-item__content:hover,
.lawdts-site-header .wp-block-navigation-item__content:focus {
	color: var(--sl-brick);
}

.lawdts-site-header .wp-block-navigation__responsive-container-open,
.lawdts-site-header .wp-block-navigation__responsive-container-close {
	color: var(--sl-ink);
}

.lawdts-site-header .wp-block-navigation__responsive-container-open svg,
.lawdts-site-header .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	height: 32px;
	width: 32px;
}

.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--sl-paper) !important;
	color: var(--sl-ink) !important;
	padding: clamp(1.25rem, 5vw, 2rem) !important;
	z-index: 99999;
}

.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--sl-ink) !important;
	right: 1rem;
	top: 1rem;
}

.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 4rem;
}

.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0 !important;
	width: 100%;
}

.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	border-bottom: var(--sl-border);
	color: var(--sl-ink) !important;
	display: block;
	font-size: 1.7rem;
	padding: 1rem 0;
	text-align: left;
	width: 100%;
}

.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.lawdts-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--sl-brick) !important;
}

/* ------------------------------------------------------------- buttons */

.lawdts-button,
.lawdts-case-form button,
.wp-block-button__link {
	background: var(--sl-brick);
	border: 0;
	border-radius: 4px;
	color: var(--sl-white);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--sl-display);
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 0.85rem 1.6rem 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.2s ease, transform 0.2s ease;
}

.lawdts-button:hover,
.lawdts-case-form button:hover,
.wp-block-button__link:hover {
	background: var(--sl-brick-dark);
	color: var(--sl-white);
	transform: translateY(-1px);
}

/* ------------------------------------------------- front page sections */

.lawdts-front-main,
.home .wp-site-blocks > main.wp-block-post-content {
	box-sizing: border-box;
	margin-top: 0;
	max-width: none !important;
	overflow: hidden;
	width: 100%;
}

.lawdts-front-main > .wp-block-group,
.home .wp-block-post-content > .wp-block-group {
	box-sizing: border-box;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw !important;
	padding: clamp(4rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 4rem) !important;
	position: relative;
	width: 100vw !important;
}

.lawdts-front-main > .wp-block-group > *,
.home .wp-block-post-content > .wp-block-group > * {
	box-sizing: border-box;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1240px !important;
	position: relative;
	width: 100%;
	z-index: 1;
}

/* Translucent painting backdrops (Myron Shulick paintings). */

.sl-bg-hall::before,
.sl-bg-league::before,
.sl-bg-cityhall::before {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 0;
}

/* M5 (client): home paintings run FULL STRENGTH — no overlay wash. The
   "grayed" version of the painting appears only inside the translucent
   content boxes (hero panel, explore tiles). */
.sl-bg-hall::before {
	background: url("../img/painting-independence-hall.jpg") right center / cover no-repeat;
}

.sl-bg-league::before {
	background: url("../img/painting-union-league.jpg") center / cover no-repeat;
}

.sl-bg-cityhall::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.56), rgba(241, 237, 226, 0.62)),
		url("../img/painting-city-hall.jpg") center 30% / cover no-repeat;
}

/* EVERY interior page carries a translucent painting backdrop (Brad,
   2026-08-09): the default below applies to any page automatically —
   including future ones — and the per-page rules further down only pick
   a specific painting/position. New pages need no CSS to get a painting. */

.lawdts-page-main {
	position: relative;
}

.lawdts-page-main::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.62), rgba(241, 237, 226, 0.7)),
		url("../img/painting-independence-hall.jpg") center / cover no-repeat;
	content: "";
	inset: 0;
	position: absolute;
	z-index: 0;
}

.lawdts-page-main > * {
	position: relative;
	z-index: 1;
}

body.page-matters .lawdts-page-main::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.6), rgba(241, 237, 226, 0.68)),
		url("../img/painting-union-league.jpg") center / cover no-repeat;
}

body.page-articles .lawdts-page-main::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.62), rgba(241, 237, 226, 0.69)),
		url("../img/painting-city-hall.jpg") center 25% / cover no-repeat;
}

body.page-recognition .lawdts-page-main::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.6), rgba(241, 237, 226, 0.68)),
		url("../img/painting-independence-hall.jpg") center 30% / cover no-repeat;
}

body.page-practice-areas .lawdts-page-main::before,
body.page-practice-area-detail .lawdts-page-main::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.6), rgba(241, 237, 226, 0.68)),
		url("../img/painting-city-hall.jpg") center 40% / cover no-repeat;
}

body.page-case-evaluation .lawdts-page-main::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.6), rgba(241, 237, 226, 0.68)),
		url("../img/painting-union-league.jpg") center / cover no-repeat;
}

/* Section headings */

.sl-kicker {
	color: var(--sl-brick);
	font-family: var(--sl-sans);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	margin-bottom: 0.4rem;
	text-transform: uppercase;
}

h2.sl-h2 {
	font-size: clamp(2.9rem, 5.6vw, 4.8rem);
	letter-spacing: 0.015em;
	line-height: 0.95;
	margin: 0 0 0.5em;
	text-transform: uppercase;
	text-wrap: balance;
}

.sl-section-lead {
	color: var(--sl-slate);
	font-size: 1.05rem;
	max-width: 62ch !important;
}

/* ------------------------------------------------------------------ hero */

.sl-hero {
	display: flex;
}

.sl-hero .wp-block-columns {
	align-items: start !important;
	display: grid !important;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(280px, 380px);
}

.sl-hero .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

.sl-hero-kicker {
	color: var(--sl-charcoal);
	font-family: var(--sl-sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

/* Sized so "SHULICK LAW" always fits on ONE line inside the hero panel
   (client, 2026-08-09); verified by measurement across viewports. */
h1.sl-hero-title {
	font-size: min(5rem, 4.4vw + 0.9rem);
	letter-spacing: 0.02em;
	line-height: 1;
	margin: 0 0 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sl-badge {
	align-items: center;
	background: var(--sl-white);
	border: 1px solid rgba(169, 139, 63, 0.65);
	border-radius: 3px;
	box-shadow: var(--sl-shadow-soft);
	color: var(--sl-ink);
	display: inline-flex;
	font-family: var(--sl-sans);
	font-size: 0.76rem;
	font-weight: 700;
	gap: 0.55rem;
	letter-spacing: 0.13em;
	line-height: 1.35;
	padding: 0.55rem 0.95rem;
	text-decoration: none;
	text-transform: uppercase;
}

.sl-badge .sl-badge__star {
	color: var(--sl-gold);
	font-size: 1.05rem;
	line-height: 1;
}

.sl-badge:hover {
	border-color: var(--sl-gold);
	box-shadow: var(--sl-shadow-raise);
	color: var(--sl-ink);
}

/* Cycling tagline */

.lawdts-ticker {
	display: block;
	font-family: var(--sl-display);
	font-size: clamp(2.5rem, 4.8vw, 4rem);
	height: 1.12em;
	letter-spacing: 0.03em;
	line-height: 1;
	margin: 0.35em 0 0.55em;
	position: relative;
	text-transform: uppercase;
}

.lawdts-ticker__word {
	color: var(--sl-ink);
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transform: translateY(0.4em);
	transition: opacity 0.45s ease, transform 0.45s ease;
	white-space: nowrap;
}

.lawdts-ticker__word.is-active {
	opacity: 1;
	transform: translateY(0);
}

.lawdts-ticker:not(.is-init) .lawdts-ticker__word:first-child {
	opacity: 1;
	transform: none;
}

/* No measure cap in the hero: the wording runs the full width of its
   column ("the wording should be all the way from here to here"). */
.sl-hero-lead {
	color: var(--sl-charcoal);
	font-size: 1.06rem;
	line-height: 1.7;
}

.sl-hero-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem 1.8rem;
	margin-top: 1.6rem;
}

/* Portrait */

.lawdts-profile-photo-card,
.lawdts-profile-photo-slot {
	aspect-ratio: 4 / 5;
	background: var(--sl-white);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-raise);
	box-sizing: border-box;
	display: grid;
	margin-left: auto;
	max-width: 400px;
	overflow: hidden;
	padding: 10px;
	place-items: center;
	width: 100%;
}

.lawdts-profile-photo-card .wp-block-image,
.lawdts-profile-photo-slot .wp-block-image,
.lawdts-profile-photo-card figure,
.lawdts-profile-photo-slot figure {
	height: 100%;
	margin: 0;
	width: 100%;
}

.lawdts-profile-photo-card img,
.lawdts-profile-photo-slot img {
	border-radius: 3px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Uploaded images may carry generator captions; keep frames image-only. */
.lawdts-profile-photo-card figcaption,
.lawdts-profile-photo-slot figcaption {
	display: none;
}

.sl-portrait-caption {
	color: var(--sl-slate);
	font-family: var(--sl-sans);
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	margin-top: 0.8rem;
	text-align: right;
	text-transform: uppercase;
}

/* ------------------------------------------------------ explore tiles */

.sl-tiles {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	margin-top: 2rem;
}

/* M5 (client): tiles are translucent paper boxes — the section's full-
   strength Union League painting shows through them dimmed. (Replaces the
   F10-era per-tile B&W painting backdrops.) */
.sl-tile {
	background: rgba(241, 237, 226, 0.84);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
	color: var(--sl-ink);
	display: grid;
	gap: 0.55rem;
	padding: 1.6rem 1.5rem 1.5rem;
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sl-tile:hover,
.sl-tile:focus {
	background: rgba(241, 237, 226, 0.94);
	box-shadow: var(--sl-shadow-raise);
	color: var(--sl-ink);
	transform: translateY(-4px);
}

.sl-tile__title {
	font-family: var(--sl-display);
	font-size: 2rem;
	letter-spacing: 0.03em;
	line-height: 0.98;
	text-transform: uppercase;
}

.sl-tile__desc {
	color: var(--sl-slate);
	font-family: var(--sl-sans);
	font-size: 0.92rem;
	line-height: 1.55;
}

.sl-tile__cta {
	color: var(--sl-brick);
	font-family: var(--sl-sans);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin-top: 0.3rem;
	text-transform: uppercase;
}

/* ------------------------------------------------------ practice list */

.sl-practice-list {
	display: grid;
	gap: 0 clamp(2rem, 5vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

/* Hanging indent (client, 2026-08-14): when an item wraps, the second line
   aligns under the TEXT, not under the dash. */
.sl-practice-list li {
	border-bottom: var(--sl-border);
	color: var(--sl-ink);
	font-family: var(--sl-display);
	font-size: clamp(1.4rem, 2vw, 1.7rem);
	letter-spacing: 0.04em;
	line-height: 1.05;
	padding: 0.95rem 0 0.95rem 1.25em;
	position: relative;
	text-transform: uppercase;
}

.sl-practice-list li::before {
	color: var(--sl-brick);
	content: "\2013";
	left: 0;
	position: absolute;
	top: 0.95rem;
}

.sl-practice-list a {
	color: inherit;
	text-decoration: none;
}

.sl-practice-list a:hover,
.sl-practice-list a:focus {
	color: var(--sl-brick);
}

/* -------------------------------------------------------- matters list */

.lawdts-matter-list {
	display: grid;
	gap: 0 clamp(2rem, 5vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	list-style: none;
	margin: 1.5rem auto 0;
	padding: 0;
}

.lawdts-matter-list li {
	border-bottom: var(--sl-border);
	padding: 1.05rem 0;
}

.lawdts-matter-list a,
.lawdts-matter-list .lawdts-matter-name {
	color: var(--sl-ink);
	display: block;
	font-family: var(--sl-display);
	font-size: clamp(1.5rem, 2.2vw, 1.85rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.05;
	text-decoration: none;
	text-transform: uppercase;
}

.lawdts-matter-list a::after {
	color: var(--sl-brick);
	content: " \2197";
	font-size: 0.72em;
}

.lawdts-matter-list a:hover,
.lawdts-matter-list a:focus {
	color: var(--sl-brick);
}

.lawdts-matter-list .lawdts-matter-note {
	color: var(--sl-slate);
	display: block;
	font-family: var(--sl-sans);
	font-size: 0.9rem;
	line-height: 1.55;
	margin-top: 0.35rem;
}

/* ---------------------------------------------------------- press strip */

.sl-strip-head {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
}

.sl-drag-hint {
	color: var(--sl-slate);
	font-family: var(--sl-sans);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lawdts-strip__controls {
	display: flex;
	gap: 0.6rem;
}

.lawdts-strip__controls button {
	align-items: center;
	background: var(--sl-white);
	border: var(--sl-border);
	border-radius: 999px;
	color: var(--sl-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.2rem;
	height: 46px;
	justify-content: center;
	line-height: 1;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	width: 46px;
}

.lawdts-strip__controls button:hover {
	border-color: var(--sl-brick);
	color: var(--sl-brick);
	transform: translateY(-1px);
}

.lawdts-strip__track {
	cursor: grab;
	display: flex;
	gap: 1.5rem;
	margin-top: 1.4rem;
	overflow-x: auto;
	padding: 0.25rem 0.25rem 1.4rem;
	scroll-snap-type: x proximity;
	scrollbar-color: var(--sl-muted) transparent;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.lawdts-strip__track::-webkit-scrollbar {
	height: 8px;
}

.lawdts-strip__track::-webkit-scrollbar-thumb {
	background: var(--sl-muted);
	border-radius: 999px;
}

.lawdts-strip__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.lawdts-strip__track .lawdts-article-card {
	flex: 0 0 clamp(270px, 26vw, 320px);
	scroll-snap-align: start;
}

/* Article cards (strip + grid) */

.lawdts-article-card {
	background: var(--sl-white);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
	color: var(--sl-ink);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.lawdts-article-card:hover,
.lawdts-article-card:focus {
	box-shadow: var(--sl-shadow-raise);
	color: var(--sl-ink);
	transform: translateY(-4px);
}

.lawdts-article-card__thumb {
	background: var(--sl-white);
	border-bottom: var(--sl-border);
	height: 300px;
	overflow: hidden;
}

.lawdts-article-card__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

.lawdts-article-card__body {
	display: grid;
	gap: 0.5rem;
	padding: 1.1rem 1.2rem 1.35rem;
}

.lawdts-article-card__meta {
	color: var(--sl-slate);
	font-family: var(--sl-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.lawdts-article-card__title {
	font-family: var(--sl-display);
	font-size: 1.5rem;
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
}

.lawdts-article-card__cta {
	color: var(--sl-brick);
	font-family: var(--sl-sans);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin-top: 0.2rem;
	text-transform: uppercase;
}

.lawdts-articles-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	margin-top: 1.5rem;
}

.lawdts-articles-grid .lawdts-article-card__thumb {
	height: 340px;
}

.sl-strip-footer {
	margin-top: 0.6rem;
}

.sl-strip-footer a {
	color: var(--sl-brick);
	font-family: var(--sl-sans);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.sl-strip-footer a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------- recognition */

.sl-awards-row {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	margin-top: 1.5rem;
}

.sl-award-card {
	background: var(--sl-white);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
	display: block;
	padding: 12px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sl-award-card:hover {
	box-shadow: var(--sl-shadow-raise);
	transform: translateY(-4px);
}

/* All three tear sheets render as identical frames (M4): fixed aspect,
   top-aligned crop. The full scan still opens in the lightbox. */
.sl-award-card img {
	aspect-ratio: 1 / 1.1;
	border-radius: 3px;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

.sl-awards-note {
	color: var(--sl-slate);
	font-family: var(--sl-sans);
	font-size: 0.92rem;
	margin-top: 1.4rem;
	max-width: 68ch !important;
}

/* -------------------------------------------------- contact bar / social */

.lawdts-contact-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 1.8rem;
}

.lawdts-contact-bar a {
	color: var(--sl-ink);
	font-family: var(--sl-display);
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.lawdts-contact-bar a:hover {
	color: var(--sl-brick);
}

.lawdts-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.lawdts-social-links a,
.lawdts-social-links span {
	align-items: center;
	border: 1px solid rgba(38, 36, 42, 0.28);
	border-radius: 999px;
	color: var(--sl-ink);
	display: inline-flex;
	height: 42px;
	justify-content: center;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	width: 42px;
}

.lawdts-social-links svg {
	fill: currentColor;
	height: 19px;
	width: 19px;
}

.lawdts-social-links a:hover {
	background: var(--sl-brick);
	border-color: var(--sl-brick);
	color: var(--sl-white);
}

/* ---------------------------------------------------------- form / modal */

.lawdts-form-card {
	background: var(--sl-white);
	border: var(--sl-border);
	border-radius: 10px;
	box-shadow: var(--sl-shadow-soft);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.lawdts-case-form {
	display: grid;
	gap: 1rem;
}

.lawdts-case-form *,
.lawdts-case-form *::before,
.lawdts-case-form *::after {
	box-sizing: border-box;
}

.lawdts-case-form label {
	color: var(--sl-ink);
	display: grid;
	font-family: var(--sl-sans);
	font-size: 0.9rem;
	font-weight: 600;
	gap: 0.35rem;
}

.lawdts-case-form input,
.lawdts-case-form textarea,
.lawdts-case-form select {
	background: var(--sl-white);
	border: 1px solid #cfc8ba;
	border-radius: 6px;
	color: var(--sl-ink);
	font: inherit;
	padding: 0.8rem 0.9rem;
	width: 100%;
}

.lawdts-case-form input:focus,
.lawdts-case-form textarea:focus {
	border-color: var(--sl-brick);
	box-shadow: 0 0 0 3px rgba(124, 45, 38, 0.15);
	outline: none;
}

.lawdts-case-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.lawdts-form-message {
	border-radius: 6px;
	font-weight: 600;
	padding: 0.85rem 1rem;
}

.lawdts-form-message.is-success {
	background: rgba(68, 155, 102, 0.14);
	border: 1px solid rgba(68, 155, 102, 0.5);
}

.lawdts-form-message.is-error {
	background: rgba(124, 45, 38, 0.1);
	border: 1px solid rgba(124, 45, 38, 0.4);
}

.lawdts-case-modal-wrap {
	display: inline-flex;
}

html.lawdts-modal-open,
html.lawdts-modal-open body {
	overflow: hidden;
}

.lawdts-modal {
	inset: 0;
	position: fixed;
	z-index: 100000;
}

.lawdts-modal__backdrop {
	background: rgba(38, 36, 42, 0.55);
	inset: 0;
	position: absolute;
}

.lawdts-modal__dialog {
	background: var(--sl-paper);
	border: var(--sl-border);
	border-radius: 10px;
	box-shadow: var(--sl-shadow-raise);
	box-sizing: border-box;
	color: var(--sl-ink);
	left: 50%;
	max-height: min(90vh, 780px);
	max-width: min(94vw, 620px);
	overflow: auto;
	padding: clamp(1.25rem, 4vw, 2rem);
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.lawdts-modal__dialog h2 {
	font-size: 2.1rem;
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.lawdts-modal__dialog .lawdts-form-card {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.lawdts-modal__close {
	background: transparent;
	border: 0;
	color: var(--sl-ink);
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	position: absolute;
	right: 1rem;
	top: 1rem;
}

/* ------------------------------------------------------------- lightbox */

.sl-lightbox {
	inset: 0;
	position: fixed;
	z-index: 100000;
}

.sl-lightbox__backdrop {
	background: rgba(38, 36, 42, 0.72);
	inset: 0;
	position: absolute;
}

.sl-lightbox__dialog {
	background: var(--sl-paper);
	border: var(--sl-border);
	border-radius: 8px;
	box-shadow: var(--sl-shadow-raise);
	left: 50%;
	margin: 0;
	max-height: 92vh;
	max-width: min(94vw, 1040px);
	overflow: auto;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.sl-lightbox__bar {
	align-items: center;
	background: var(--sl-paper);
	border-bottom: var(--sl-border);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.75rem 1.1rem;
	position: sticky;
	top: 0;
	z-index: 1;
}

.sl-lightbox__caption {
	color: var(--sl-ink);
	font-family: var(--sl-sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.sl-lightbox__close {
	background: transparent;
	border: 0;
	color: var(--sl-ink);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 2rem;
	line-height: 1;
	padding: 0 0.2rem;
}

.sl-lightbox__close:hover {
	color: var(--sl-brick);
}

.sl-lightbox__img {
	box-sizing: border-box;
	display: block;
	height: auto;
	padding: clamp(0.8rem, 2vw, 1.4rem);
	width: 100%;
}

/* -------------------------------------------------------- interior pages */

.lawdts-page-main,
.wp-site-blocks > main.wp-block-group {
	box-sizing: border-box;
	padding-left: clamp(1.25rem, 4vw, 4rem) !important;
	padding-right: clamp(1.25rem, 4vw, 4rem) !important;
}

.lawdts-page-main > .wp-block-post-title,
.wp-site-blocks > main.wp-block-group > .wp-block-post-title,
.wp-site-blocks > main.wp-block-group > .wp-block-query-title {
	/* One modest size for every page heading, centered (client, 2026-08-19:
	   "contact is too big… practice areas are too big"). Was 3–5.4rem. */
	font-size: clamp(1.9rem, 3vw, 2.5rem) !important;
	letter-spacing: 0.04em;
	line-height: 1.15;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1240px !important;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	width: 100%;
}

.lawdts-page-main > .wp-block-post-content,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content,
.wp-site-blocks > main.wp-block-group > .wp-block-query {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1240px !important;
	width: 100%;
}

/* One shared rail: WordPress's constrained layout centers post-content
   children at the 820px content size, which left the wide page title on a
   different axis than the text below it. Anchor every child to the same
   left edge as the title (WP's own margins carry !important, so these must
   too). */
.lawdts-page-main > .wp-block-post-content > *,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > * {
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 1240px;
}

/* Keep prose readable while staying on the shared rail. */
.lawdts-page-main > .wp-block-post-content > p,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > p {
	max-width: 70ch;
}

/* Contact and Practice Areas hold narrow content; they read better fully
   centered, unlike the wide grid pages which stay on the left rail.
   NOTE: these MUST come after the shared-rail rules above — the rail
   selector variant (.wp-site-blocks > main...) ties them on specificity,
   so source order decides the !important margin battle. */

body.page-case-evaluation .lawdts-page-main > .wp-block-post-title,
body.page-practice-areas .lawdts-page-main > .wp-block-post-title,
body.page-practice-area-detail .lawdts-page-main > .wp-block-post-title {
	text-align: center;
}

body.page-case-evaluation .lawdts-page-main > .wp-block-post-content > *,
body.page-practice-areas .lawdts-page-main > .wp-block-post-content > *,
body.page-practice-area-detail .lawdts-page-main > .wp-block-post-content > * {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Contact only: its one-line tagline belongs to the centered logo/form
   composition. Practice Areas keeps the centered heading and column but its
   paragraph is justified (client, 2026-08-14) — see the justify block at the
   end of this file. */
body.page-case-evaluation .lawdts-page-main > .wp-block-post-content > p {
	text-align: center;
}

/* Scoped to the page content: the footer's contact bar must stay on the
   shared left rail like every other page (it was centering too — bug). */
body.page-case-evaluation .wp-block-post-content .lawdts-contact-bar {
	justify-content: center;
}

/* The contact form joins the centered composition: centered captions,
   checkbox row, button, and disclaimer (inputs stay full width). */
body.page-case-evaluation .lawdts-case-form label {
	text-align: center;
}

body.page-case-evaluation .lawdts-case-form button {
	justify-self: center;
}

body.page-case-evaluation .lawdts-case-form .lawdts-disclaimer {
	text-align: center;
}

/* Full logo lockup at the top of the Contact page. */
body.page-case-evaluation .sl-contact-logo img {
	height: auto;
	max-width: min(340px, 72vw);
}

/* The contact box matches the footer: ink card, paper text. */
body.page-case-evaluation .lawdts-form-card {
	background: var(--sl-ink);
	border-color: var(--sl-ink);
	color: var(--sl-paper);
}

body.page-case-evaluation .lawdts-case-form label {
	color: var(--sl-paper);
}

body.page-case-evaluation .lawdts-case-form input,
body.page-case-evaluation .lawdts-case-form textarea {
	accent-color: var(--sl-gold);
	background: rgba(247, 244, 236, 0.07);
	border-color: rgba(247, 244, 236, 0.3);
	color: var(--sl-paper);
}

body.page-case-evaluation .lawdts-case-form input:focus,
body.page-case-evaluation .lawdts-case-form textarea:focus {
	border-color: var(--sl-gold);
	box-shadow: 0 0 0 3px rgba(169, 139, 63, 0.25);
}

body.page-case-evaluation .lawdts-case-form .lawdts-disclaimer {
	color: rgba(247, 244, 236, 0.6);
}

.lawdts-page-main > .wp-block-post-content > .wp-block-group,
.lawdts-page-main > .wp-block-post-content > .wp-block-columns,
.lawdts-page-main > .wp-block-post-content > .lawdts-grid,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > .wp-block-group,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > .wp-block-columns,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > .lawdts-grid {
	max-width: 1240px !important;
	width: 100%;
}

.lawdts-page-main .wp-block-columns,
.wp-site-blocks > main.wp-block-group .wp-block-columns {
	gap: clamp(2rem, 5vw, 4rem);
}

.lawdts-page-main .wp-block-heading,
.wp-site-blocks > main.wp-block-group .wp-block-heading {
	text-wrap: balance;
}

.lawdts-page-main > .wp-block-post-content > .lawdts-form-card,
.lawdts-page-main > .wp-block-post-content > form,
.lawdts-page-main .lawdts-form-card,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > .lawdts-form-card,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > form,
.wp-site-blocks > main.wp-block-group .lawdts-form-card {
	max-width: 640px;
	width: 100%;
}

/* Generic cards (legacy content + shortcode grids) */

.lawdts-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.35rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.lawdts-card,
.lawdts-list-card {
	background: var(--sl-white);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
}

.lawdts-card {
	padding: clamp(1.5rem, 4vw, 2.4rem);
}

.lawdts-card:has(> .wp-block-image:only-child) {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.lawdts-card > .wp-block-image {
	margin: 0;
}

.lawdts-card > .wp-block-image img {
	border-radius: 4px;
	display: block;
	width: 100%;
}

.lawdts-list-card {
	padding: 1.25rem;
}

.lawdts-list-card h3 {
	margin-top: 0;
}

.lawdts-eyebrow {
	color: var(--sl-brick);
	font-family: var(--sl-sans);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lawdts-meta {
	color: var(--sl-slate);
	font-size: 0.9rem;
}

/* ----------------------------------------------------------------- footer */

.sl-footer,
.lawdts-section-divider {
	background: var(--sl-ink) !important;
	border-top: 0;
	color: var(--sl-paper);
}

/* Footer carries the Water Works painting under an ink tint (after the rule
   above: same specificity, so source order must decide the !important tie). */
.sl-footer {
	background:
		linear-gradient(rgba(38, 36, 42, 0.82), rgba(38, 36, 42, 0.82)),
		url("../img/painting-bw-waterworks.jpg") center / cover no-repeat var(--sl-ink) !important;
}

.sl-footer h3,
.sl-footer h4,
.lawdts-section-divider h3,
.lawdts-section-divider h4 {
	color: var(--sl-paper);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sl-footer .sl-footer-tag,
.lawdts-section-divider .sl-footer-tag {
	color: rgba(247, 244, 236, 0.72);
	font-family: var(--sl-sans);
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sl-footer .lawdts-contact-bar a,
.lawdts-section-divider .lawdts-contact-bar a {
	color: var(--sl-paper);
}

.sl-footer .lawdts-contact-bar a:hover,
.lawdts-section-divider .lawdts-contact-bar a:hover {
	color: var(--sl-gold);
}

.sl-footer .wp-block-navigation-item__content,
.lawdts-section-divider .wp-block-navigation-item__content {
	color: rgba(247, 244, 236, 0.85);
	font-family: var(--sl-sans);
	font-size: 0.95rem;
}

.sl-footer .wp-block-navigation-item__content:hover,
.lawdts-section-divider .wp-block-navigation-item__content:hover {
	color: var(--sl-gold);
}

.sl-footer .lawdts-social-links a,
.sl-footer .lawdts-social-links span,
.lawdts-section-divider .lawdts-social-links a,
.lawdts-section-divider .lawdts-social-links span {
	border-color: rgba(247, 244, 236, 0.35);
	color: var(--sl-paper);
}

.sl-footer .lawdts-social-links a:hover,
.lawdts-section-divider .lawdts-social-links a:hover {
	/* Brand colors stay on hover (M5); lift/brighten handled in the M5 block. */
	color: #ffffff;
}

.lawdts-disclaimer {
	color: var(--sl-slate);
	font-size: 0.84rem;
}

.sl-footer .lawdts-disclaimer,
.lawdts-section-divider .lawdts-disclaimer {
	color: rgba(247, 244, 236, 0.55);
}

/* Links inside the footer fine print (Privacy Policy) — gray like the
   disclaimer text (M5), underlined for affordance. */
.sl-footer .lawdts-disclaimer a,
.lawdts-section-divider .lawdts-disclaimer a {
	color: rgba(247, 244, 236, 0.55);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.sl-footer .lawdts-disclaimer a:hover,
.sl-footer .lawdts-disclaimer a:focus,
.lawdts-section-divider .lawdts-disclaimer a:hover,
.lawdts-section-divider .lawdts-disclaimer a:focus {
	color: var(--sl-paper);
}

/* ------------------------------------------------------------- responsive */

/* Narrow two-column band: the hero text column gets tight — keep the
   one-line title inside it. */
@media (min-width: 961px) and (max-width: 1150px) {
	h1.sl-hero-title {
		font-size: min(3.4rem, 3.4vw + 0.5rem);
	}
}

@media (max-width: 960px) {
	.sl-hero .wp-block-columns {
		grid-template-columns: 1fr;
		max-width: 720px !important;
		min-height: 0;
	}

	/* No column reordering on phones: David dictated the stack as text →
	   rule → quote → rule → About → picture → badges → contact, which is
	   exactly the natural source order of the two columns. */

	.lawdts-profile-photo-card,
	.lawdts-profile-photo-slot {
		margin-left: 0;
		max-width: 400px;
	}

	.sl-portrait-caption {
		text-align: left;
	}

	h1.sl-hero-title {
		font-size: min(3.2rem, 10.5vw);
	}

	.lawdts-page-main .wp-block-columns,
	.wp-site-blocks > main.wp-block-group .wp-block-columns,
	.lawdts-front-main > .wp-block-group > .wp-block-columns,
	.home .wp-block-post-content > .wp-block-group > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.lawdts-front-main > .wp-block-group > .wp-block-columns > .wp-block-column,
	.home .wp-block-post-content > .wp-block-group > .wp-block-columns > .wp-block-column,
	.lawdts-page-main .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100%;
	}
}

@media (max-width: 720px) {
	.lawdts-site-header {
		position: static;
	}

	.lawdts-site-header > .wp-block-group {
		gap: 0.75rem;
	}

	/* Courtroom photo at half size on phones (client, 2026-08-08). */
	.sl-hero .lawdts-profile-photo-card,
	.sl-hero .lawdts-profile-photo-slot {
		margin-inline: auto;
		max-width: 50%;
	}

	/* Home sections run edge-to-edge on phones so the paintings fill the
	   screen width (client, 2026-08-14); content keeps its inner padding. */
	.lawdts-front-main > .wp-block-group,
	.home .wp-block-post-content > .wp-block-group {
		border-radius: 0;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}


	.lawdts-strip__track .lawdts-article-card {
		flex-basis: 82vw;
	}

	.lawdts-article-card__thumb {
		height: 260px;
	}

	.lawdts-contact-bar a {
		font-size: 1.3rem;
	}

	.lawdts-modal__dialog {
		border-radius: 8px;
		max-height: 92vh;
	}

    .sl-lightbox__dialog {
		border-radius: 6px;
		max-height: 94vh;
		max-width: 96vw;
	}

	/* Phones: inset footer content so phone/email, nav, and disclaimer
	   do not butt against the screen edge (matches home section padding). */
	.sl-footer {
		box-sizing: border-box;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.lawdts-ticker__word,
	.lawdts-article-card,
	.lawdts-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* ----------------------------------------- M4: text on visible paintings */
/* The painting overlays dropped ~20 points so the art reads (client M4).
   Small text sitting straight on the paintings gets a darker color and a
   soft paper halo instead of putting the heavy overlay back. */

.sl-hero-lead,
.sl-hero-actions,
.sl-section-lead,
.lawdts-matter-list .lawdts-matter-note,
.sl-awards-note,
.lawdts-page-main .wp-block-post-content > p {
	text-shadow:
		0 1px 2px rgba(241, 237, 226, 0.95),
		0 0 10px rgba(241, 237, 226, 0.85),
		0 0 22px rgba(241, 237, 226, 0.7);
}

.sl-section-lead,
.lawdts-matter-list .lawdts-matter-note {
	color: var(--sl-charcoal);
}

/* ------------------------------------------------------- M5 client round */
/* Body copy runs at regular weight now that the face is Open Sans (client,
   2026-08-19). M5's blanket bold existed because Times New Roman looked
   thin; in a humanist sans it reads as shouting. Headings, nav, buttons and
   small labels keep their own explicit 600-800 weights. */
body {
	font-weight: 400;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-weight: 400;
}

/* The whole hero — wording, photo, badges and contact — sits in ONE
   translucent paper panel over the full-strength painting (client,
   2026-08-09: "bring in the picture into the same block"). The panel moved
   from the columns block to .sl-hero-panel on 2026-08-19 so the contact row
   could sit inside it, below both columns. No border or shadow: "I don't
   want to see the white frame". */
.sl-hero-panel {
	background: rgba(241, 237, 226, 0.85);
	border-radius: 6px;
	box-sizing: border-box;
	padding: clamp(1.4rem, 2.6vw, 2.4rem);
	width: 100%;
}

/* Footer social icons sit right under the phone/email and wear their
   networks' exact brand colors. */
.sl-footer .lawdts-social-links {
	margin-top: 1rem;
}

.lawdts-social-links a,
.lawdts-social-links span {
	border: 0;
	color: #ffffff;
}

.lawdts-social-links a svg,
.lawdts-social-links span svg {
	fill: #ffffff;
}

.lawdts-social-links .lawdts-social--instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.lawdts-social-links .lawdts-social--linkedin {
	background: #0a66c2;
}

.lawdts-social-links .lawdts-social--facebook {
	background: #1877f2;
}

.lawdts-social-links .lawdts-social--tiktok {
	background: #010101;
}

.sl-footer .lawdts-social-links a:hover,
.lawdts-section-divider .lawdts-social-links a:hover {
	filter: brightness(1.15);
	transform: translateY(-2px);
}

/* Hero panel as light as possible on phones (client, 2026-08-14, round 2:
   "still feels too heavy"): faint wash, no border/shadow, minimal padding.
   Text stays readable via the paper halos. Placed after the M5 panel rule —
   same specificity, source order decides. */
@media (max-width: 720px) {
	.sl-hero-panel {
		background: rgba(241, 237, 226, 0.62);
		border: 0;
		box-shadow: none;
		padding: 0.5rem;
	}
}

/* ------------------------------------ Client round 2026-08-14 (typeset) */
/* Body copy is black and fully justified on every viewport (client: "make
   the text black and make it fully justified not centered"). Last in the
   file so it beats the M4 charcoal rule on source order. The Contact page
   keeps its centered composition (its own rule is more specific), and
   document bodies are nested deeper, so the fill-and-sign fields are
   untouched. The column selector catches prose in a two-column layout (the
   About bio beside the portrait); the homepage is .lawdts-front-main, so
   the hero is handled by .sl-hero-lead alone. */
.sl-hero-lead,
.sl-section-lead,
.lawdts-page-main .wp-block-post-content > p,
.lawdts-page-main .wp-block-post-content .wp-block-column > p {
	color: var(--sl-ink);
	hyphens: none;
	-webkit-hyphens: none;
	overflow-wrap: normal;
	text-align: justify;
	word-break: normal;
}

/* Client Forms cards line up symmetrically (client, 2026-08-14): equal
   rows, titles reserving two lines so every description starts on the same
   line, and the "Fill & Sign" row pinned to the bottom edge of the card. */
.lawdts-doc-tiles {
	grid-auto-rows: 1fr;
}

.lawdts-doc-tiles .sl-tile {
	container-type: inline-size;
	gap: 0.7rem;
	grid-template-rows: auto 1fr auto;
	padding: 1.4rem;
}

/* Sized against the CARD, not the viewport: a phone-width card and a
   two-up tablet card are both narrow, so vw units would let long titles
   spill onto a third line and knock the pair out of alignment. */
.lawdts-doc-tiles .sl-tile__title {
	font-size: clamp(1rem, 6cqi, 1.7rem);
	line-height: 1.12;
	min-height: 2.24em;
	text-wrap: balance;
}

/* On the narrowest phones the longer title cannot fit two lines at a
   readable size, so both cards reserve three — the pair stays matched
   instead of one card running taller than the other. */
@container (max-width: 205px) {
	.lawdts-doc-tiles .sl-tile__title {
		min-height: 3.36em;
	}
}

.lawdts-doc-tiles .sl-tile__cta {
	align-self: end;
}

/* --------------------------------- Client round 2026-08-16 (testimonials) */
/* One letter per slide. The track scrolls natively (swipe on touch, arrows
   on desktop) rather than using the press strip's drag handler, which would
   fight text selection in a long quote. Arrows only render once a second
   testimonial is published. */
.sl-testimonials {
	margin-top: 2.8rem;
}

.sl-testimonials__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.sl-testimonials__title {
	font-family: var(--sl-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	letter-spacing: 0.03em;
	margin: 0;
	text-transform: uppercase;
}

.sl-testimonials__track {
	display: flex;
	gap: 1.5rem;
	margin-top: 1.1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--sl-muted) transparent;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/* border-box matters here: the theme sets it selectively, and without it
   flex-basis 100% measures the content box, so the padding pushes each
   slide wider than the track. */
.sl-testimonial {
	background: rgba(241, 237, 226, 0.9);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
	box-sizing: border-box;
	flex: 0 0 100%;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2.1rem);
	scroll-snap-align: start;
}

/* Cap the measure: a full-width box is fine, 150-character justified lines
   are not. The signature shares the cap so it lands on the text's right
   edge rather than the far edge of the box. */
.sl-testimonial__quote,
.sl-testimonial__sign {
	margin-inline: auto;
	max-width: 95ch;
}

.sl-testimonial__quote {
	border: 0;
	margin-top: 0;
	padding: 0;
}

.sl-testimonial__quote p {
	color: var(--sl-ink);
	hyphens: none;
	-webkit-hyphens: none;
	margin: 0 0 1rem;
	max-width: none;
	overflow-wrap: normal;
	text-align: justify;
	word-break: normal;
}

.sl-testimonial__quote p:last-child {
	margin-bottom: 0;
}

/* Letter close: signer over the date, both hard right. */
.sl-testimonial__sign {
	display: grid;
	gap: 0.1rem;
	justify-items: end;
	margin-top: 1.5rem;
	text-align: right;
}

.sl-testimonial__name {
	font-family: var(--sl-display);
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sl-testimonial__date {
	color: var(--sl-slate);
	font-size: 0.9rem;
}

/* Sits straight on the painting, so it needs the same paper halo the other
   small print gets. */
.sl-testimonials__note {
	color: var(--sl-charcoal);
	margin-top: 0.9rem;
	text-shadow:
		0 1px 2px rgba(241, 237, 226, 0.95),
		0 0 10px rgba(241, 237, 226, 0.85),
		0 0 22px rgba(241, 237, 226, 0.7);
}

/* The hero's BIO link reads as black underlined text, not a green link
   (client, 2026-08-16) — the underline keeps it obviously clickable. */
.sl-hero-bio-link a {
	color: var(--sl-ink);
	text-decoration: underline;
}

.sl-hero-bio-link a:hover,
.sl-hero-bio-link a:focus {
	color: var(--sl-charcoal);
}

/* ------------------------------ Client round 2026-08-19 (call with David) */

/* Section leads are centered and sized up to sit with the entries below
   them ("center that and make it bolder and a touch bigger… the same size
   as BMW"). Applies to Proven Success, Articles, Recognition, Client Forms.
   Selector has to out-rank the 2026-08-14 justify rule, whose
   `.lawdts-page-main .wp-block-post-content > p` arm is more specific than a
   lone class. */
.sl-section-lead,
.lawdts-page-main .wp-block-post-content > p.sl-section-lead {
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	font-weight: 600;
	margin-inline: auto;
	max-width: 60ch !important;
	text-align: center;
}

/* The Super Lawyers note is now the only one on Recognition (the shorter
   duplicate under the heading is gone), so it carries the page. */
.sl-awards-note,
.lawdts-page-main .wp-block-post-content > p.sl-awards-note {
	font-size: 1.02rem;
	margin-inline: auto;
	text-align: center;
}

/* Practice areas read as labels, not body copy - they keep some weight
   now that the body has dropped to regular. */
.sl-practice-list li {
	font-weight: 600;
}

/* Small print that sits directly on a painting needs a little more weight
   than regular to survive the busy backdrop, now that the blanket bold is
   gone. The paper halo above does the rest. */
.lawdts-matter-list .lawdts-matter-note,
.lawdts-article-card__meta,
.sl-awards-note,
.lawdts-page-main .wp-block-post-content > p.sl-awards-note {
	font-weight: 500;
}

/* Practice Areas reads off a paper panel like the homepage does, with the
   painting pushed further back behind it ("I can't read it… what you are
   missing is that grayed out box"). */
body.page-practice-areas .lawdts-page-main::before,
body.page-practice-area-detail .lawdts-page-main::before {
	background:
		linear-gradient(rgba(241, 237, 226, 0.8), rgba(241, 237, 226, 0.86)),
		url("../img/painting-city-hall.jpg") center 40% / cover no-repeat;
}

body.page-practice-areas .sl-practice-list {
	background: rgba(241, 237, 226, 0.88);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
	box-sizing: border-box;
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

body.page-practice-area-detail .sl-practice-panel {
	background: rgba(241, 237, 226, 0.88);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
	box-sizing: border-box;
	max-width: 42rem;
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

body.page-practice-area-detail .sl-practice-detail-nav {
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	margin-bottom: 0;
	text-transform: uppercase;
}

/* Testimonial reads like a letter: single-spaced, a blank line between
   paragraphs, narrower measure, bold date. */
.sl-testimonials__title {
	text-align: center;
	width: 100%;
}

.sl-testimonial__quote,
.sl-testimonial__sign {
	max-width: 68ch;
}

.sl-testimonial__quote p {
	line-height: 1.35;
	margin-bottom: 1.6em;
}

.sl-testimonial__salutation {
	margin-bottom: 1.6em;
}

.sl-testimonial__date {
	color: var(--sl-charcoal);
	font-weight: 700;
}

/* Agreements are justified like the printed originals (client: "can you
   make them fully justified… I am just a stickler for that"). The inline
   fields are inline-block, so they ride along without gapping. */
.lawdts-doc-body p {
	hyphens: auto;
	text-align: justify;
}

/* Footer tagline brighter and bigger ("a little brighter and bigger"). */
.sl-footer .sl-footer-tag {
	color: rgba(247, 244, 236, 0.94);
	font-size: 1.1rem;
	letter-spacing: 0.12em;
}

/* --------------------- Hero rebuilt to David's sketch (2026-08-19 call) */
/* Left column: wording, rule, quote, rule, About link, rule.
   Right column: portrait above the badge strip ("your image above, and then
   the logos lined up"). Contact button centered underneath both, with the
   phone and email spread across the bottom of the panel. */

/* Selector carries three classes deliberately: core's
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)` pins
   separators to 100px, and anything less specific loses to it. */
.sl-hero .sl-hero-panel hr.sl-hero-rule {
	background: var(--sl-muted);
	border: 0;
	height: 1px;
	margin: 1.5rem 0;
	opacity: 1;
	width: 100%;
}

/* The quote is the one piece of display type left in the hero. WordPress
   adds `wp-block-paragraph`, so it has to be matched by exclusion. */
.sl-hero .wp-block-column:first-child > p:not(.sl-hero-lead):not(.sl-hero-bio-link) {
	color: var(--sl-ink);
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.55;
	text-align: left;
}

/* No frame around the hero portrait (Brad, 2026-08-19): drop the card
   chrome, square the corners, fill the column, and scale the image so
   overflow:hidden clips the cream JPEG fringe WITHOUT leaving a paper
   gap (clip-path:inset left a visible cream matte). About keeps its card. */
.sl-hero .lawdts-profile-photo-card,
.sl-hero .lawdts-profile-photo-slot {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	overflow: hidden;
	padding: 0;
}

.sl-hero .lawdts-profile-photo-card img,
.sl-hero .lawdts-profile-photo-slot img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	height: 100%;
	object-fit: cover;
	object-position: 55% 18%;
	outline: none;
	transform: scale(1.12);
	transform-origin: 55% 18%;
	width: 100%;
}

/* Badge strip sits under the portrait and fills the column: the block
   editor pinned it to 518px, which would overflow the narrower column. */
.sl-hero .wp-block-column .wp-block-image:not(.lawdts-profile-photo-card) {
	margin-top: 0;
	min-height: 0;
	width: 100%;
}

.sl-hero .wp-block-column .wp-block-image:not(.lawdts-profile-photo-card) img {
	height: auto !important;
	object-fit: contain;
	object-position: top center;
	width: 100% !important;
}

/* Contact button sits under the wording. Phone and email stay in that
   same column, like the reference screenshot. */
.sl-hero-panel .sl-hero-actions {
	justify-content: center !important;
	margin-top: 2rem;
}

.sl-hero-panel .lawdts-contact-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin-top: 1.2rem;
	width: 100%;
}

/* Desktop: portrait photo + badges as a 4:5 stack on the LEFT, all
   wording on the RIGHT (Brad, 2026-08-19). Column WIDTH is set by
   theme.js from the wording HEIGHT so the headshot stays a portrait
   and both columns end together. Phones keep David's dictated stack. */
@media (min-width: 961px) {
	.sl-hero-panel {
		align-items: start;
		column-gap: clamp(1.75rem, 3.5vw, 3rem);
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}

	.sl-hero-panel > .wp-block-columns {
		display: contents !important;
	}

	.sl-hero-panel > .wp-block-columns > .wp-block-column:first-child {
		grid-column: 2;
		grid-row: 1;
	}

	.sl-hero-panel > .wp-block-columns > .wp-block-column:last-child {
		align-self: start;
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
		grid-column: 1;
		grid-row: 1 / -1;
		max-width: 360px;
		min-height: 0;
		overflow: hidden;
		width: 280px;
	}

	.sl-hero-panel > .wp-block-columns > .wp-block-column:last-child > .lawdts-profile-photo-card {
		aspect-ratio: 4 / 5;
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
	}

	.sl-hero-panel > .wp-block-columns > .wp-block-column:last-child > .wp-block-image:not(.lawdts-profile-photo-card) {
		flex: 0 0 auto;
		width: 100%;
	}

	.sl-hero-panel > .sl-hero-actions {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0.75rem;
	}

	.sl-hero-panel > .lawdts-contact-bar {
		align-self: stretch;
		grid-column: 2;
		grid-row: 3;
	}
}

@media (max-width: 720px) {
	.sl-hero-panel .lawdts-contact-bar {
		justify-content: center;
	}
}

/* Phones: keep David's photo centered. The unscoped hero card rule used
   to set margin-left: 0, which beat the earlier margin-inline: auto and
   pinned the portrait to the left edge (Brad, 2026-08-19). */
@media (max-width: 960px) {
	.sl-hero .lawdts-profile-photo-card,
	.sl-hero .lawdts-profile-photo-slot {
		margin-inline: auto;
	}
}

/* The badge strip repeated under the portrait on the About page, at a
   fraction of its homepage size ("a shrunken down version of those awards
   under my picture"). */
.sl-about-badges {
	margin-top: 1rem;
}

.sl-about-badges img {
	height: auto;
	width: 100%;
}

/* Section leads + the Super Lawyers note were 60/68ch centered-text
   blocks pinned to the left rail (`margin-left: 0 !important` on every
   direct post-content child). Center the blocks themselves so they sit
   under the page heading (Brad, 2026-08-19: Articles, Proven Success,
   Client Forms — same trap as Recognition). */
.lawdts-page-main > .wp-block-post-content > p.sl-section-lead,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > p.sl-section-lead,
.lawdts-page-main > .wp-block-post-content > p.sl-awards-note,
.wp-site-blocks > main.wp-block-group > .wp-block-post-content > p.sl-awards-note {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

/* One white letter sheet. Quote + signature used to paint as two boxes
   with a painting stripe between them (separate backgrounds + a later
   sign margin-top). A single ::before behind both stays white even if
   internal spacing changes. */
.sl-testimonial {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: grid;
	filter: none;
	gap: 0;
	grid-template-columns: minmax(0, 1fr) minmax(0, calc(68ch + 5rem)) minmax(0, 1fr);
	grid-template-rows: auto auto;
	padding: 0;
	position: relative;
}

.sl-testimonial::before {
	background: var(--sl-white);
	border: 1px solid rgba(38, 36, 42, 0.1);
	border-radius: 2px;
	box-shadow: var(--sl-shadow-soft);
	content: "";
	grid-column: 2;
	grid-row: 1 / 3;
	pointer-events: none;
}

.sl-testimonial__quote,
.sl-testimonial__sign {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	grid-column: 2;
	margin: 0;
	max-width: none;
	position: relative;
	width: 100%;
}

.sl-testimonial__quote {
	grid-row: 1;
	padding: 2.75rem 2.5rem 0;
}

.sl-testimonial__sign {
	grid-row: 2;
	padding: 1.35rem 2.5rem 2.75rem;
}

/* Mobile round 2026-08-21 (David via Brad): no hyphenation, Client Forms
   + Contact leads justified on phones, testimonial is Times New Roman and
   tighter, About title keeps the name together, About photo sits with even
   side space, home About link centered, more air between portrait and
   badges. */
.sl-testimonial,
.sl-testimonial__quote,
.sl-testimonial__quote p,
.sl-testimonial__sign,
.sl-testimonial__closing,
.sl-testimonial__name,
.sl-testimonial__date {
	font-family: 'Times New Roman', Times, Georgia, serif;
}

.sl-testimonial__quote p {
	line-height: 1.22;
	margin-bottom: 0.85em;
}

.sl-testimonial__quote p:last-child {
	margin-bottom: 0;
}

.sl-testimonial__sign {
	margin-top: 0;
}

body.page-about .lawdts-page-main > .wp-block-post-title,
body.page-about .wp-block-post-title {
	text-wrap: wrap;
}

@media (max-width: 960px) {
	/* David, 2026-08-25: phones drop full-just for Home, Contact, About,
	   and Client Forms. Desktop Home leads stay justified; Contact and
	   Client Forms leads stay centered on wide screens. */
	.sl-hero-lead,
	body.page-about .lawdts-page-main .wp-block-post-content > p,
	body.page-about .lawdts-page-main .wp-block-post-content .wp-block-column > p,
	body.page-client-forms .lawdts-page-main > .wp-block-post-content > p.sl-section-lead,
	body.page-case-evaluation .lawdts-page-main > .wp-block-post-content > p,
	body.page-case-evaluation .lawdts-page-main > .wp-block-post-content > p.sl-section-lead,
	body.page-practice-area-detail .lawdts-page-main .wp-block-post-content > p {
		hyphens: none;
		-webkit-hyphens: none;
		text-align: left;
	}

	.sl-hero-bio-link {
		text-align: center;
	}

	/* Home portrait sits in the middle of About and the badges: kill the
	   extra column gap, drop the last rule's bottom margin, and use the
	   same air above and below the photo (Brad, 2026-08-21). */
	.sl-hero .wp-block-columns,
	.sl-hero-panel > .wp-block-columns {
		gap: 0 !important;
		row-gap: 0 !important;
	}

	.sl-hero .sl-hero-panel .wp-block-column:first-child > hr.sl-hero-rule:last-of-type {
		margin-bottom: 0;
	}

	.sl-hero .lawdts-profile-photo-card,
	.sl-hero .lawdts-profile-photo-slot {
		margin-bottom: 2.75rem;
		margin-top: 2.75rem;
	}

	body.page-about .lawdts-profile-photo-card,
	body.page-about .lawdts-profile-photo-slot {
		margin-inline: auto;
	}

	.sl-hero .wp-block-column .wp-block-image:not(.lawdts-profile-photo-card) {
		margin-top: 0;
	}

	.sl-about-badges {
		margin-top: 1.85rem;
	}
}

/* ------------------------------ Home hero tiles 2026-09-01 (David) */

/* Four boxes, same grid/chrome as Proven Success / Articles / Recognition /
   Practice: picture, badges, wording, quote + About. Contact/phone/email
   come off the hero (nav + footer still have them). */
.sl-hero-panel {
	align-items: stretch;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: grid;
	gap: 1.4rem;
	grid-template-areas: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	grid-template-rows: none;
	padding: 0;
}

.sl-hero-panel > .wp-block-columns,
.sl-hero-panel > .wp-block-columns > .wp-block-column:last-child {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: contents !important;
	gap: 0;
	margin: 0 !important;
	max-width: none;
	padding: 0;
	width: auto;
}

.sl-hero-panel:has(.sl-hero-wording) > .wp-block-columns > .wp-block-column:first-child {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: contents !important;
	gap: 0;
	margin: 0 !important;
	max-width: none;
	padding: 0;
	width: auto;
}

.sl-hero-panel .sl-hero-contact,
.sl-hero-panel > .sl-hero-actions,
.sl-hero-panel > .lawdts-contact-bar,
.sl-hero-panel hr.sl-hero-rule {
	display: none !important;
}

.sl-hero-panel .lawdts-profile-photo-card,
.sl-hero-panel .lawdts-profile-photo-slot,
.sl-hero-panel .wp-block-image:not(.lawdts-profile-photo-card),
.sl-hero-panel .sl-hero-wording,
.sl-hero-panel .sl-hero-quote {
	background: rgba(241, 237, 226, 0.84);
	border: var(--sl-border);
	border-radius: 6px;
	box-shadow: var(--sl-shadow-soft);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	height: 100%;
	margin: 0;
	max-width: none;
	min-height: 0;
	padding: 1.6rem 1.5rem 1.5rem;
	width: 100%;
}

.sl-hero-panel .lawdts-profile-photo-card,
.sl-hero-panel .lawdts-profile-photo-slot {
	aspect-ratio: auto !important;
	height: 100%;
	margin-inline: 0 !important;
	max-width: none !important;
	order: 1;
	overflow: hidden;
	padding: 1.6rem 1.5rem 1.5rem;
	position: relative;
}

.sl-hero-panel > .wp-block-columns > .wp-block-column:last-child > .lawdts-profile-photo-card {
	aspect-ratio: auto;
	flex: none;
	height: 100%;
	max-width: none;
	width: 100%;
}

.sl-hero-panel .wp-block-image:not(.lawdts-profile-photo-card) {
	justify-content: center;
	order: 2;
}

.sl-hero-panel .sl-hero-wording {
	order: 3;
}

.sl-hero-panel .sl-hero-quote {
	align-items: center;
	justify-content: center;
	order: 4;
	text-align: center;
}

.sl-hero-panel .wp-block-group.sl-hero-wording,
.sl-hero-panel .wp-block-group.sl-hero-quote {
	margin-block: 0 !important;
}

.sl-hero-panel .lawdts-profile-photo-card img,
.sl-hero-panel .lawdts-profile-photo-slot img {
	border-radius: 3px;
	display: block;
	flex: 1 1 auto;
	height: 100%;
	min-height: 12rem;
	object-fit: cover;
	object-position: 52% 22%;
	transform: none !important;
	width: 100%;
}

.sl-hero-panel .wp-block-image:not(.lawdts-profile-photo-card) img {
	height: auto !important;
	margin: auto 0;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	width: 100% !important;
}

.sl-hero-panel .sl-hero-wording .sl-hero-lead,
.sl-hero-panel .sl-hero-lead {
	color: var(--sl-ink);
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.55;
	margin: 0;
	text-align: left;
}

.sl-hero-panel .sl-hero-quote > p:not(.sl-hero-bio-link) {
	color: var(--sl-ink);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.45;
	margin: 0;
	text-align: center;
	width: 100%;
}

.sl-hero-panel .sl-hero-quote .sl-hero-bio-link {
	margin-top: 0;
	text-align: center;
	width: 100%;
}
