/*
 * LiveSpecial — Components (LSRD26-36 to 40)
 * Shared by every template: page hero, breadcrumbs, callouts, section
 * headings, cards, chips, grids, panels, prose, empty state, video modal,
 * map placeholder. Template-specific layout lives in home/listing/detail/page.css.
 */

/* ── Utilities ───────────────────────────────────────── */
.ls-js .ls-no-js-only { display: none !important; }
html:not(.ls-js) .ls-js-only { display: none !important; }

/* Text link with an arrow ("All events →"): design text-sm font-semibold. */
.ls-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	color: var( --ls-primary );
	text-decoration: none;
}
.ls-link-arrow:hover { color: var( --ls-secondary ); }

.ls-btn + .ls-btn--block { margin-top: 0.625rem; }

/* Toolbar controls (Filters, Sort, Copy link): design "bg-white border
 * border-border rounded-full px-3.5 py-2 text-sm shadow-sm" — not buttons. */
.ls-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.4375rem 0.875rem;
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius-full );
	background: var( --ls-white );
	box-shadow: var( --ls-shadow-sm );
	color: var( --ls-primary );
	font: inherit;
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	line-height: 1.25rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var( --ls-transition );
}
.ls-control:hover { border-color: rgba( 25, 54, 103, 0.6 ); color: var( --ls-primary ); }

/* ── Grids ───────────────────────────────────────────── */
.ls-grid {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ls-grid > li { display: flex; min-width: 0; }
.ls-grid > li > * { flex: 1; }
@media ( min-width: 640px ) {
	.ls-grid--2, .ls-grid--3, .ls-grid--4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( min-width: 1024px ) {
	.ls-grid--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.ls-grid--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
}

/* ── Image placeholder (ls_media()) ─────────────────── */
.ls-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: var( --ls-gradient-primary-secondary );
}
.ls-ph--2 { background: var( --ls-gradient-primary-accent ); }
.ls-ph--3 { background: var( --ls-gradient-secondary-accent ); }
.ls-ph--4 { background: var( --ls-gradient-secondary-accent-accent ); }
.ls-ph img.ls-ph__logo {
	display: block;
	position: static;
	width: 46%;
	max-width: 13rem;
	height: auto;
	border-radius: 0;
	transform: none;
	aspect-ratio: auto;
	object-fit: contain;
}

/* ── Page hero (LSRD26-58) ────────────────────────────
 * Values from the design exports: landing = directory/news/about/contact
 * ("py-16 sm:py-24", "text-4xl sm:text-5xl font-bold leading-tight"),
 * compact = directory-search/general ("py-12 sm:py-16", "text-3xl
 * sm:text-4xl font-extrabold"), detail = compact type beside a card/image.
 */
.ls-page-hero { padding-block: 4rem; }
@media ( min-width: 640px ) { .ls-page-hero { padding-block: 6rem; } }
.ls-page-hero--compact,
.ls-page-hero--detail { padding-block: 3rem; }
@media ( min-width: 640px ) {
	.ls-page-hero--compact,
	.ls-page-hero--detail { padding-block: 4rem; }
}

.ls-page-hero__inner {
	position: relative;
	display: grid;
	gap: 2.5rem;
	align-items: center;
}
.ls-page-hero__main { min-width: 0; }
@media ( min-width: 1024px ) {
	.ls-page-hero--split .ls-page-hero__inner { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: 3rem; }
	/* A card beside the title ("grid lg:grid-cols-5 … col-span-3 / col-span-2", events). */
	.ls-page-hero--aside-card .ls-page-hero__inner { grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr ); align-items: center; }
}
.ls-page-hero--center .ls-page-hero__main { max-width: 42rem; margin-inline: auto; text-align: center; }
.ls-page-hero--center .ls-page-hero__intro,
.ls-page-hero--center .ls-search-box { margin-inline: auto; }
.ls-page-hero--center .ls-callouts,
.ls-page-hero--center .ls-breadcrumbs ol { justify-content: center; }

.ls-page-hero__title {
	margin: 0 0 1rem;
	color: var( --ls-white );
	font-size: 2.25rem;
	font-weight: var( --ls-fw-bold );
	line-height: 1.25;
}
@media ( min-width: 640px ) { .ls-page-hero__title { font-size: 3rem; } }
.ls-page-hero--compact .ls-page-hero__title,
.ls-page-hero--detail .ls-page-hero__title { font-size: 1.875rem; font-weight: var( --ls-fw-black ); }
@media ( min-width: 640px ) {
	.ls-page-hero--compact .ls-page-hero__title,
	.ls-page-hero--detail .ls-page-hero__title { font-size: 2.25rem; }
}

.ls-page-hero__intro {
	max-width: 36rem;
	margin: 0 0 2rem;
	color: var( --ls-white );
	line-height: 1.625;
}
.ls-page-hero__intro--lg { font-size: var( --ls-fs-md ); }
@media ( min-width: 640px ) { .ls-page-hero__intro--lg { font-size: var( --ls-fs-lg ); } }
.ls-page-hero__intro--base { font-size: var( --ls-fs-md ); }
.ls-page-hero__intro strong { color: var( --ls-white ); font-weight: var( --ls-fw-bold ); }
.ls-page-hero--compact .ls-page-hero__intro,
.ls-page-hero--detail .ls-page-hero__intro { margin-bottom: 1.5rem; }
.ls-page-hero__main > :last-child { margin-bottom: 0; }

.ls-page-hero__eyebrow--text {
	margin: 0 0 1rem;
	color: var( --ls-white );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.ls-page-hero__eyebrow--pill {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.25rem 0.75rem;
	border-radius: var( --ls-radius-full );
	background: var( --ls-accent );
	color: var( --ls-primary );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-bold );
	line-height: 1rem;
}
.ls-page-hero--landing .ls-page-hero__eyebrow--pill { margin-bottom: 1.5rem; padding: 0.375rem 0.875rem; }
/* General page: "uppercase tracking-wider". */
.ls-page-hero--compact .ls-page-hero__eyebrow--pill { letter-spacing: 0.05em; text-transform: uppercase; }
/* Landing titles wrap like the design's "max-w-2xl" column. */
.ls-page-hero--landing:not( .ls-page-hero--center ) .ls-page-hero__title { max-width: 42rem; }

.ls-page-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0 0 1.5rem;
	color: var( --ls-white );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	text-decoration: none;
}
.ls-page-hero__back:hover { color: var( --ls-white ); text-decoration: underline; }

/* Highlighted words in hero titles: light blue on navy is 5.0:1 (titles
 * are large text, 3:1 needed). */
.ls-hl { color: var( --ls-accent ); font-style: normal; }

.ls-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var( --ls-radius-card );
	box-shadow: 0 25px 50px -12px rgba( 0, 0, 0, 0.25 );
}
.ls-page-hero__aside .ls-card { box-shadow: 0 25px 50px -12px rgba( 0, 0, 0, 0.25 ); }

.ls-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.ls-pill {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: var( --ls-radius-full );
	background: var( --ls-white );
	color: var( --ls-primary );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-bold );
	line-height: 1rem;
	text-decoration: none;
}
.ls-pill--accent { background: var( --ls-accent ); color: var( --ls-primary ); }
a.ls-pill:hover { background: var( --ls-white ); color: var( --ls-primary ); }

/* Meta row under a detail title (design: "LOCATION / Beachwood, OH"). */
.ls-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ls-hero-meta li { display: flex; flex-direction: column; gap: 0.125rem; }
.ls-hero-meta__label {
	color: var( --ls-white );
	font-size: 0.625rem;
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.ls-hero-meta__value { color: var( --ls-white ); font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); }

/* ── Breadcrumbs (design general.html) ───────────────── */
.ls-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.375rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	line-height: 1rem;
}
.ls-breadcrumbs li { display: inline-flex; align-items: center; gap: 0.375rem; color: var( --ls-white ); }
.ls-breadcrumbs__sep { display: inline-flex; }
.ls-breadcrumbs a { color: var( --ls-white ); text-decoration: none; transition: color var( --ls-transition ); }
.ls-breadcrumbs a:hover { color: var( --ls-white ); text-decoration: underline; }
/* The current page reads lighter by weight, not by fading the colour. */
.ls-breadcrumbs [aria-current] { max-width: 28ch; overflow: hidden; color: var( --ls-white ); font-weight: var( --ls-fw-light ); text-overflow: ellipsis; white-space: nowrap; }

/* ── Callouts ────────────────────────────────────────── */
.ls-callouts { display: flex; flex-wrap: wrap; margin: 0; }
.ls-callouts__item { display: flex; flex-direction: column; }
.ls-callouts__label, .ls-callouts__value { margin: 0; }

/* Directory hero: "text-[10px] font-bold uppercase tracking-widest" over
 * "text-white font-semibold text-sm". The label is white: light blue fails
 * AA as small text where the hero gradient turns magenta (LSRD26-17). */
.ls-callouts--labels { gap: 1rem 2rem; margin-top: 2.5rem; }
.ls-callouts--labels .ls-callouts__label {
	color: var( --ls-white );
	font-size: 0.625rem;
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}
.ls-callouts--labels .ls-callouts__value { color: var( --ls-white ); font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-semibold ); line-height: 1.25rem; }

/* Articles hero: big number, small label, divided. */
.ls-callouts--figures { gap: 1.5rem; margin-top: 2.5rem; }
.ls-callouts--figures .ls-callouts__item + .ls-callouts__item { padding-left: 1.5rem; border-left: 1px solid var( --ls-border-on-dark ); }
.ls-callouts--figures .ls-callouts__value { color: var( --ls-white ); font-size: 1.5rem; font-weight: var( --ls-fw-black ); line-height: 2rem; }
.ls-callouts--figures .ls-callouts__label { color: var( --ls-white ); font-size: var( --ls-fs-sm ); line-height: 1.25rem; }

/* Homepage band: "text-2xl font-extrabold" in the accent over "text-xs" white. */
.ls-callouts--bar { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.25rem; }
@media ( min-width: 768px ) { .ls-callouts--bar { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }
.ls-callouts--bar .ls-callouts__value { color: var( --ls-accent ); font-size: 1.5rem; font-weight: var( --ls-fw-black ); line-height: 2rem; }
.ls-callouts--bar .ls-callouts__label { margin-top: 0.125rem; color: var( --ls-white ); font-size: 0.75rem; line-height: 1rem; }

/* ── Search box ──────────────────────────────────────── */
.ls-search-box { display: flex; gap: 0.5rem; max-width: 36rem; margin: 0; }
.ls-search-box__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	padding: 0 1rem;
	border: 2px solid transparent;
	border-radius: var( --ls-radius-full );
	background: var( --ls-white );
	color: var( --ls-muted-foreground );
	box-shadow: var( --ls-shadow-sm );
}
.ls-search-box__field input {
	flex: 1;
	min-width: 0;
	padding: 0.625rem 0;
	border: 0;
	background: transparent;
	color: var( --ls-foreground );
	font: inherit;
	font-size: var( --ls-fs-sm );
	line-height: 1.25rem;
}
.ls-search-box__field input::placeholder { color: var( --ls-muted-foreground ); opacity: 1; }
.ls-search-box__field input:focus { outline: none; }
.ls-search-box__field:focus-within { border-color: var( --ls-primary ); }
/* Design: "bg-secondary text-white font-bold px-6 py-3 rounded-full" (16px). */
.ls-search-box__submit { flex-shrink: 0; font-size: var( --ls-fs-md ); font-weight: var( --ls-fw-bold ); line-height: 1.5rem; }

.ls-search-box--soft .ls-search-box__field { border-radius: var( --ls-radius ); }

/* Homepage: one white bar, button attached ("rounded-2xl shadow-2xl"). */
.ls-search-box--joined {
	flex-direction: column;
	gap: 0;
	max-width: none;
	overflow: hidden;
	border-radius: 1rem;
	background: var( --ls-white );
	box-shadow: 0 25px 50px -12px rgba( 0, 0, 0, 0.25 );
}
.ls-search-box--joined .ls-search-box__field { padding: 0.375rem 1.25rem; border: 0; border-bottom: 1px solid rgba( 25, 54, 103, 0.03 ); border-radius: 0; box-shadow: none; }
.ls-search-box--joined .ls-search-box__field input { padding-block: 0.625rem; }
.ls-search-box--joined .ls-search-box__submit {
	--ls-btn-py: 1rem;
	--ls-btn-px: 1.75rem;
	border-radius: 0;
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	line-height: 1.25rem;
}
@media ( min-width: 640px ) {
	.ls-search-box--joined { flex-direction: row; }
	.ls-search-box--joined .ls-search-box__field { border-bottom: 0; border-right: 1px solid rgba( 25, 54, 103, 0.03 ); }
}

/* Page heroes (Directory, Directory search, Resources) use the homepage's
 * joined bar at the homepage's width (LSRD26-84). */
.ls-page-hero .ls-search-box--joined { max-width: 42rem; margin-top: 0.5rem; }
.ls-page-hero--compact .ls-search-box--joined { margin-top: 0; }

/* ── Sections ────────────────────────────────────────── */
.ls-section { padding-block: 3rem; }
.ls-section__head { margin-bottom: 2rem; }
.ls-section__head--center { text-align: center; }
.ls-section__head--center .ls-section__text { margin-inline: auto; }
.ls-section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}
.ls-section__eyebrow {
	margin: 0 0 0.5rem;
	color: var( --ls-muted-foreground );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.1em;
	line-height: 1rem;
	text-transform: uppercase;
}
/* Homepage section titles: "text-3xl sm:text-4xl font-extrabold". */
.ls-section__title { margin: 0 0 0.5rem; font-size: 1.875rem; font-weight: var( --ls-fw-black ); line-height: 1.25; }
@media ( min-width: 640px ) { .ls-section__title { font-size: 2.25rem; } }
/* Events / News column titles: "text-3xl font-extrabold mb-6". */
.ls-section__title--sm { margin-bottom: 1.5rem; font-size: 1.875rem; }
@media ( min-width: 640px ) { .ls-section__title--sm { font-size: 1.875rem; } }
.ls-section__text { max-width: 36rem; margin: 0.25rem 0 0; color: var( --ls-text ); font-size: var( --ls-fs-sm ); line-height: 1.25rem; }

.ls-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding: 1.5rem;
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius-card );
	background: var( --ls-white );
	box-shadow: var( --ls-shadow-sm );
}
.ls-band__title { margin: 0; font-weight: var( --ls-fw-black ); }
.ls-band__text { margin: 0; color: var( --ls-text ); font-size: var( --ls-fs-sm ); }

/* ── Cards ───────────────────────────────────────────
 * The design's listing card (news.html, resources, directory-search):
 * "rounded-xl border border-border/40 shadow-sm", 176px image, p-5,
 * 12px uppercase category, 14px bold title, 12px excerpt and meta.
 * Homepage cards (home.css) and the Directory card (listing.css) adjust it.
 */
.ls-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba( 25, 54, 103, 0.04 );
	border-radius: var( --ls-radius );
	background: var( --ls-white );
	box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 );
	transition: box-shadow var( --ls-transition ), border-color var( --ls-transition ), transform var( --ls-transition );
}
.ls-card:hover { border-color: rgba( 25, 54, 103, 0.25 ); box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.1 ); }
.ls-card:focus-within { outline: 2px solid var( --ls-ring ); outline-offset: 2px; }

.ls-card__media {
	position: relative;
	flex-shrink: 0;
	height: 11rem;
	overflow: hidden;
	background: var( --ls-muted );
}
.ls-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.ls-card:hover .ls-card__media img { transform: scale( 1.05 ); }
.ls-card:hover .ls-card__media .ls-ph img { transform: none; }
@media ( prefers-reduced-motion: reduce ) { .ls-card:hover .ls-card__media img { transform: none; } }

.ls-card__badge,
.ls-card__count {
	position: absolute;
	top: 0.75rem;
	z-index: 1;
	padding: 0.125rem 0.5rem;
	border-radius: var( --ls-radius-full );
	background: var( --ls-white );
	color: var( --ls-primary );
	font-size: 0.6875rem;
	font-weight: var( --ls-fw-bold );
	line-height: 1rem;
	box-shadow: var( --ls-shadow-sm );
}
.ls-card__badge { left: 0.75rem; }
.ls-card__count { right: 0.75rem; }
.ls-card__badge--solid { padding: 0.125rem 0.625rem; background: var( --ls-accent ); color: var( --ls-primary ); font-size: 0.75rem; box-shadow: none; }
.ls-card__duration {
	position: absolute;
	right: 0.625rem;
	bottom: 0.625rem;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	background: rgba( 0, 0, 0, 0.75 );
	color: var( --ls-white );
	font-family: ui-monospace, monospace;
	font-size: 0.75rem;
}

.ls-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.ls-card__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0 0 0.5rem;
	color: var( --ls-secondary );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.05em;
	line-height: 1rem;
	text-transform: uppercase;
}
.ls-card__title { margin: 0 0 0.5rem; font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); line-height: 1.375; }
.ls-card__link { color: var( --ls-heading ); text-decoration: none; }
.ls-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.ls-card__link:hover,
.ls-card:hover .ls-card__link { color: var( --ls-secondary ); text-decoration: none; }
.ls-card__link:focus-visible { outline: none; }
.ls-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0 0 0.5rem;
	color: var( --ls-muted-foreground );
	font-size: 0.75rem;
	line-height: 1rem;
}
.ls-card__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ls-card__excerpt {
	display: -webkit-box;
	margin: 0 0 1rem;
	overflow: hidden;
	color: var( --ls-text );
	font-size: 0.75rem;
	line-height: 1.625;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.ls-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid rgba( 25, 54, 103, 0.04 );
}
p.ls-card__foot { margin-bottom: 0; }
.ls-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var( --ls-primary );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
}
.ls-card__foot .ls-card__more { margin-left: auto; }

/* Lead card: image left ("sm:w-72 lg:w-80"), p-6, 20px title, 14px excerpt. */
.ls-card--featured { border-radius: var( --ls-radius-card ); }
.ls-card--featured .ls-card__media { height: 13rem; }
.ls-card--featured .ls-card__body { justify-content: center; padding: 1.5rem; }
.ls-card--featured .ls-card__title { margin-bottom: 0.75rem; font-size: 1.25rem; }
.ls-card--featured .ls-card__excerpt { margin-bottom: 1.25rem; font-size: var( --ls-fs-sm ); }
@media ( min-width: 640px ) {
	.ls-card--featured { flex-direction: row; }
	.ls-card--featured .ls-card__media { flex: 0 0 18rem; height: auto; min-height: 13rem; }
}
@media ( min-width: 1024px ) { .ls-card--featured .ls-card__media { flex-basis: 20rem; } }

/* Resources type-page hero card (sprint5/resources-hero.png): "rounded-2xl
 * shadow-2xl", h-44 image under a 25% dark wash, a Featured badge, p-4, a tag,
 * 14px title, 12px excerpt, read time and "Read →". */
.ls-card--resource-hero { border: 0; border-radius: var( --ls-radius-card ); box-shadow: 0 25px 50px -12px rgba( 0, 0, 0, 0.25 ); }
.ls-card--resource-hero .ls-card__media::after { content: ""; position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.25 ); pointer-events: none; }
.ls-card--resource-hero .ls-card__badge--solid { z-index: 2; }
.ls-card--resource-hero .ls-card__body { padding: 1rem; }
.ls-card--resource-hero .ls-card__title { margin: 0.5rem 0 0.25rem; }
.ls-card--resource-hero .ls-card__excerpt { margin-bottom: 0; }
.ls-card--resource-hero .ls-card__foot { margin-top: 0.75rem; padding-top: 0.625rem; }
.ls-card--resource-hero .ls-card__more { font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); }
.ls-card--resource-hero .ls-card__duration { display: none; }
@media ( max-width: 1023px ) { .ls-page-hero__aside:has( .ls-card--resource-hero ) { display: none; } }
.ls-tag--xs { align-self: flex-start; padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: var( --ls-fw-bold ); line-height: 0.875rem; }

/* Play button sits above the card's stretched link. */
.ls-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --ls-white );
	color: var( --ls-primary );
	box-shadow: var( --ls-shadow-md );
	cursor: pointer;
	transform: translate( -50%, -50% );
	transition: transform var( --ls-transition );
}
.ls-play svg { margin-left: 3px; fill: currentColor; }
.ls-play:hover { transform: translate( -50%, -50% ) scale( 1.08 ); }
.ls-play:focus-visible { outline: 3px solid var( --ls-white ); outline-offset: 3px; }
.ls-play--lg { width: 4.5rem; height: 4.5rem; }

/* ── Numbered steps (home.html "Getting started is simple"; About) ── */
.ls-steps { margin-top: 4rem; }
.ls-steps__head { max-width: 28rem; margin: 0 auto 4rem; text-align: center; }
.ls-steps__title { margin: 0 0 0.75rem; color: var( --ls-heading ); font-size: 1.875rem; font-weight: var( --ls-fw-black ); line-height: 1.25; }
@media ( min-width: 640px ) { .ls-steps__title { font-size: 2.25rem; } }
.ls-steps__intro { margin: 0; color: var( --ls-text ); line-height: 1.625; }
.ls-steps__list { position: relative; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media ( min-width: 768px ) {
	.ls-steps__list--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.ls-steps__list--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 2rem; }
	.ls-steps__list--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.ls-steps__list::before {
		content: "";
		position: absolute;
		top: 2.25rem;
		inset-inline: calc( 100% / var( --ls-steps, 3 ) / 2 );
		height: 2px;
		background: linear-gradient( to right, var( --ls-primary ), var( --ls-secondary ), var( --ls-primary ) );
	}
	.ls-steps__list--2 { --ls-steps: 2; }
	.ls-steps__list--4 { --ls-steps: 4; }
	.ls-steps__list--1::before { display: none; }
}
.ls-steps__item { display: flex; flex-direction: column; align-items: center; }
.ls-steps__badge {
	position: relative;
	z-index: 1;
	display: grid;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 2rem;
	place-items: center;
	border: 4px solid var( --ls-white );
	border-radius: 50%;
	background: var( --ls-primary );
	box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.1 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.1 );
	color: var( --ls-white );
	font-size: var( --ls-fs-2xl );
	font-weight: var( --ls-fw-black );
}
.ls-steps__item--alt .ls-steps__badge { background: var( --ls-secondary ); }
.ls-steps__card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 1.75rem;
	overflow: hidden;
	border: 1px solid rgba( 25, 54, 103, 0.03 );
	border-radius: var( --ls-radius-card );
	background: var( --ls-white );
	box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 );
	text-align: center;
}
/* Decorative numerals (aria-hidden): a solid pale tint, not a faded colour. */
.ls-steps__ghost { position: absolute; right: 0.75rem; bottom: 0.25rem; color: #F3F5F8; font-size: 6.25rem; font-weight: var( --ls-fw-black ); line-height: 1; pointer-events: none; }
.ls-steps__icon { display: grid; width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; place-items: center; border-radius: 1rem; background: var( --ls-primary-tint ); color: var( --ls-primary ); }
.ls-steps__item--alt .ls-steps__icon { background: var( --ls-secondary-tint ); color: var( --ls-secondary ); }
.ls-steps__icon--image { overflow: hidden; background: none; }
.ls-steps__icon--image img { width: 100%; height: 100%; object-fit: cover; }
.ls-steps__name { margin: 0 0 0.75rem; color: var( --ls-heading ); font-size: var( --ls-fs-lg ); font-weight: var( --ls-fw-bold ); }
.ls-steps__text { margin: 0; color: var( --ls-text ); font-size: 0.9rem; line-height: 1.625; }
.ls-steps__item--alt .ls-steps__ghost { color: #FAF3F8; }

/* ── Tags & pill tabs ─────────────────────────────────
 * Tag: "text-xs px-2.5 py-0.5 rounded-full font-medium" on a solid tint of
 * its tone (event types, age groups). Light blue and green tags take navy
 * text — the brand colour itself fails AA as text on them. Pill tabs: the
 * homepage providers' category filter ("px-4 py-2 rounded-full text-sm"). */
.ls-tag {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	border-radius: var( --ls-radius-full );
	background: var( --ls-primary-tint );
	color: var( --ls-primary );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-medium );
	line-height: 1rem;
}
.ls-tag--secondary { background: var( --ls-secondary-tint ); color: var( --ls-secondary ); }
.ls-tag--accent { background: var( --ls-accent-tint ); color: var( --ls-primary ); }
.ls-tag--secondary-accent { background: var( --ls-secondary-accent-tint ); color: var( --ls-primary ); }

.ls-pill-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.ls-pill-tab {
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var( --ls-radius-full );
	background: var( --ls-muted );
	color: var( --ls-muted-foreground );
	font: inherit;
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-medium );
	line-height: 1.25rem;
	cursor: pointer;
	transition: background-color var( --ls-transition ), color var( --ls-transition );
}
.ls-pill-tab:hover { background: var( --ls-muted-strong ); color: var( --ls-primary ); }
.ls-pill-tab[aria-pressed="true"] { background: var( --ls-primary ); color: var( --ls-white ); box-shadow: var( --ls-shadow-sm ); }

/* ── Chips ───────────────────────────────────────────── */
.ls-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.ls-chip {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	border-radius: var( --ls-radius-full );
	background: var( --ls-primary-tint );
	color: var( --ls-primary );
	font-size: var( --ls-fs-xs );
	font-weight: var( --ls-fw-medium );
}
.ls-chips--muted .ls-chip { background: var( --ls-muted ); color: var( --ls-muted-foreground ); }
.ls-chip a, a.ls-chip { color: inherit; text-decoration: none; position: relative; z-index: 2; }
a.ls-chip--link:hover, .ls-chip a:hover { text-decoration: underline; }

/* ── Panels / sidebar boxes ──────────────────────────── */
/* "bg-white rounded-2xl border border-border/40 shadow-sm p-6 sm:p-8". */
.ls-panel {
	margin-bottom: 2rem;
	padding: 1.5rem;
	border: 1px solid rgba( 25, 54, 103, 0.04 );
	border-radius: var( --ls-radius-card );
	background: var( --ls-white );
	box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 );
}
@media ( min-width: 640px ) { .ls-panel { padding: 2rem; } }
.ls-panel--plain { padding: 0; border: 0; background: none; box-shadow: none; }
.ls-panel--center { text-align: center; }
.ls-panel__title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: var( --ls-fw-black ); line-height: 1.4; }
.ls-panel__title--sm { font-size: var( --ls-fs-md ); margin-bottom: 1rem; }
.ls-panel__subtitle { margin: 1.25rem 0 0.5rem; font-size: var( --ls-fs-sm ); color: var( --ls-muted-foreground ); }
.ls-panel__subtitle:first-of-type { margin-top: 0; }
.ls-panel__icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.75rem;
	border-radius: 0.75rem;
	background: var( --ls-secondary-tint );
	color: var( --ls-secondary );
}

/* Rail cards ("bg-white rounded-2xl border border-border/40 shadow-sm p-5"). */
.ls-rail-card { padding: 1.25rem; border: 1px solid rgba( 25, 54, 103, 0.04 ); border-radius: var( --ls-radius-card ); background: var( --ls-white ); box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 ); }

/* Navy rail cards ("bg-primary rounded-2xl p-5"): Find a provider, Stay informed. */
.ls-promo {
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	border-radius: var( --ls-radius-card );
	background: var( --ls-primary );
	color: var( --ls-white );
	font-size: 0.75rem;
	line-height: 1.625;
}
.ls-promo p { margin: 0 0 0.75rem; }
.ls-promo__title { margin: 0 0 0.25rem; color: var( --ls-white ); font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-black ); line-height: 1.25rem; }
.ls-promo .ls-btn--white { font-size: 0.75rem; font-weight: var( --ls-fw-bold ); }
.ls-promo--newsletter { color: var( --ls-white ); }
.ls-promo--newsletter .ls-promo__title { font-size: var( --ls-fs-md ); line-height: 1.5rem; }
.ls-promo--newsletter p { margin-bottom: 1rem; }
.ls-newsletter-proxy { display: grid; gap: 0.5rem; }
.ls-newsletter-proxy input {
	width: 100%;
	padding: 0.625rem 1rem;
	border: 2px solid transparent;
	border-radius: var( --ls-radius-full );
	background: var( --ls-white );
	color: var( --ls-foreground );
	font: inherit;
	font-size: var( --ls-fs-sm );
	line-height: 1.25rem;
}
.ls-newsletter-proxy input:focus { border-color: var( --ls-accent ); outline: none; }
.ls-newsletter-proxy__status { margin: 0; color: var( --ls-white ); font-size: 0.75rem; font-weight: var( --ls-fw-semibold ); }
.ls-newsletter-proxy__status:empty { display: none; }
.ls-newsletter-proxy__status.is-error { color: #FCA5A5; }
.ls-newsletter-proxy.is-done input,
.ls-newsletter-proxy.is-done .ls-btn { display: none; }
.ls-link-arrow--light { color: var( --ls-white ); }

.ls-notice {
	padding: 0.625rem 0.875rem;
	border-radius: 0.5rem;
	background: var( --ls-muted );
	color: var( --ls-foreground );
	font-size: var( --ls-fs-sm );
}

/* ── Prose (classic-editor content) ──────────────────── */
.ls-prose { color: var( --ls-text ); font-size: var( --ls-fs-md ); line-height: 1.625; }
.ls-prose > :first-child { margin-top: 0; }
.ls-prose > :last-child { margin-bottom: 0; }
.ls-prose h2 { margin: 2.25rem 0 0.75rem; font-size: var( --ls-fs-2xl ); }
.ls-prose h3 { margin: 1.75rem 0 0.5rem; font-size: var( --ls-fs-xl ); }
.ls-prose h4 { margin: 1.5rem 0 0.5rem; font-size: var( --ls-fs-lg ); }
.ls-prose p, .ls-prose ul, .ls-prose ol { margin: 0 0 1.25rem; }
.ls-prose li + li { margin-top: 0.375rem; }
.ls-prose a { color: var( --ls-primary ); text-decoration: underline; }
.ls-prose a:hover { color: var( --ls-secondary ); }
.ls-prose blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 4px solid var( --ls-secondary );
	color: var( --ls-primary );
	font-size: var( --ls-fs-xl );
	font-weight: var( --ls-fw-bold );
	line-height: 1.5;
}
.ls-prose blockquote p { margin-bottom: 0.5rem; }
.ls-prose blockquote cite { display: block; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-sm ); font-style: normal; font-weight: var( --ls-fw-normal ); }
.ls-prose img { border-radius: var( --ls-radius-card ); }
.ls-prose figure, .ls-prose .wp-caption { max-width: 100%; margin: 2rem 0; }
.ls-prose figcaption, .ls-prose .wp-caption-text { margin-top: 0.5rem; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-sm ); text-align: center; }
.ls-prose .alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; }
.ls-prose .alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; }
.ls-prose .aligncenter { display: block; margin-inline: auto; }
@media ( max-width: 639px ) { .ls-prose .alignleft, .ls-prose .alignright { float: none; margin: 1rem 0; } }
.ls-prose table { margin: 1.5rem 0; font-size: var( --ls-fs-sm ); }
.ls-prose th { background: var( --ls-muted ); }
.ls-prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var( --ls-border ); }
.ls-prose::after { content: ""; display: table; clear: both; }

/* Lead paragraph: "text-lg sm:text-xl font-semibold leading-relaxed
 * border-l-4 border-secondary pl-5". */
.ls-lead {
	margin: 0 0 2rem;
	padding-left: 1.25rem;
	border-left: 4px solid var( --ls-secondary );
	color: var( --ls-foreground );
	font-size: var( --ls-fs-lg );
	font-weight: var( --ls-fw-semibold );
	line-height: 1.625;
}
@media ( min-width: 640px ) { .ls-lead { font-size: 1.25rem; } }

/* ── Empty state ─────────────────────────────────────── */
.ls-empty {
	padding: 3rem 1.5rem;
	border: 1px dashed var( --ls-border );
	border-radius: var( --ls-radius-card );
	text-align: center;
}
.ls-empty__title { margin: 0 0 0.5rem; color: var( --ls-primary ); font-size: var( --ls-fs-xl ); font-weight: var( --ls-fw-bold ); }
.ls-empty__text { margin: 0 0 1.25rem; color: var( --ls-text ); }

/* ── Map placeholder (LSRD26-47 builds the real map) ─── */
.ls-map-placeholder {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 14rem;
	overflow: hidden;
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius-card );
	background-color: var( --ls-muted );
	background-image:
		linear-gradient( rgba( 25, 54, 103, 0.06 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 25, 54, 103, 0.06 ) 1px, transparent 1px );
	background-size: 32px 32px;
}
.ls-map-placeholder__pin {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 3px solid var( --ls-white );
	border-radius: 50%;
	background: var( --ls-primary );
	color: var( --ls-white );
	box-shadow: var( --ls-shadow-md );
}
.ls-map-placeholder__card {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: var( --ls-white );
	box-shadow: var( --ls-shadow-md );
	font-size: var( --ls-fs-sm );
}
.ls-map-placeholder__card strong { flex-basis: 100%; }
.ls-map-placeholder__card > span { flex: 1; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-xs ); }
.ls-map-placeholder__note { position: absolute; bottom: 1rem; margin: 0; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-sm ); }

/* ── Video modal ─────────────────────────────────────── */
.ls-video-modal {
	width: min( 64rem, calc( 100vw - 2rem ) );
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: var( --ls-radius-card );
	background: #000;
	overflow: visible;
}
.ls-video-modal::backdrop { background: rgba( 12, 20, 40, 0.85 ); } /* a scrim, not text */
.ls-video-modal__frame { aspect-ratio: 16 / 9; }
.ls-video-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var( --ls-radius-card ); }
.ls-video-modal__close-form { position: absolute; top: -3rem; right: 0; margin: 0; }
.ls-video-modal__close {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: var( --ls-white );
	color: var( --ls-primary );
	cursor: pointer;
}

/* ── Events ──────────────────────────────────────────── */
.ls-event-list { display: grid; gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }

/* Event rows (events.html): "rounded-xl border border-border/40 shadow-sm",
 * 80px date column on primary/5, px-5 py-4 body, 14px title, 12px meta. */
.ls-event {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid rgba( 25, 54, 103, 0.04 );
	border-radius: var( --ls-radius );
	background: var( --ls-white );
	box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 );
	transition: box-shadow var( --ls-transition ), border-color var( --ls-transition );
}
.ls-event:hover { border-color: rgba( 25, 54, 103, 0.25 ); box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.1 ); }
.ls-event:focus-within { outline: 2px solid var( --ls-ring ); outline-offset: 2px; }
.ls-event__date {
	display: flex;
	flex: 0 0 5rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding-block: 1.25rem;
	border-right: 1px solid rgba( 25, 54, 103, 0.04 );
	background: var( --ls-muted-soft );
	color: var( --ls-primary );
	line-height: 1;
	text-align: center;
}
.ls-event__month, .ls-event__weekday { font-size: 0.75rem; font-weight: var( --ls-fw-bold ); letter-spacing: 0.05em; line-height: 1rem; text-transform: uppercase; }
.ls-event__day { margin-top: 0.125rem; font-size: 1.875rem; font-weight: var( --ls-fw-black ); line-height: 1; }
.ls-event__year { margin-top: 0.25rem; color: var( --ls-muted-foreground ); font-size: 0.75rem; line-height: 1rem; }
.ls-event__year:empty { display: none; }
.ls-event__body { flex: 1; min-width: 0; padding: 1rem 1.25rem; }
.ls-event__type {
	margin: 0 0 0.25rem;
	color: var( --ls-secondary );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.05em;
	line-height: 1rem;
	text-transform: uppercase;
}
.ls-event__title { margin: 0 0 0.5rem; font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); line-height: 1.375; }
.ls-event .ls-card__link { color: var( --ls-heading ); }
.ls-event:hover .ls-card__link { color: var( --ls-secondary ); text-decoration: none; }
.ls-event__excerpt { display: -webkit-box; margin: 0 0 1rem; overflow: hidden; color: var( --ls-text ); font-size: var( --ls-fs-sm ); line-height: 1.625; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ls-event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	line-height: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var( --ls-muted-foreground );
	font-size: var( --ls-fs-xs );
}
.ls-event__meta li { display: inline-flex; align-items: center; gap: 0.3rem; }
.ls-event__meta strong { color: var( --ls-foreground ); }
.ls-event__arrow { display: flex; align-items: center; padding-right: 1.25rem; color: var( --ls-muted-foreground ); }
.ls-event:hover .ls-event__arrow { color: var( --ls-primary ); }
.ls-event__cta { align-self: center; margin-right: 1.5rem; flex-shrink: 0; --ls-btn-py: 0.5rem; --ls-btn-px: 1rem; font-size: 0.75rem; font-weight: var( --ls-fw-bold ); }

/* Featured event: "rounded-2xl … mb-8", 112px date column, p-6, 20px title. */
.ls-event--featured { margin-bottom: 2rem; border-radius: var( --ls-radius-card ); }
.ls-event--featured .ls-event__date { flex-basis: 7rem; border-right: 0; }
.ls-event--featured .ls-event__day { margin-top: 0.25rem; font-size: 2.25rem; }
.ls-event--featured .ls-event__type { margin-bottom: 0.5rem; }
.ls-event--featured .ls-event__title { font-size: 1.25rem; }
.ls-event--featured .ls-event__body { padding: 1.5rem; }
@media ( max-width: 639px ) {
	.ls-event__cta { display: none; }
	.ls-event__date { flex-basis: 4rem; }
}

/* ── Save & Share (LSRD26-76; design news detail "Save · Share") ── */
.ls-share-save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ls-share-save--end { margin-left: auto; justify-content: flex-end; }
.ls-share-save--center { justify-content: center; }
.ls-share-save [data-ls-save][aria-pressed="true"] { border-color: var( --ls-primary ); background: var( --ls-primary ); color: var( --ls-white ); }
.ls-share-save [data-ls-save][aria-pressed="true"] svg { fill: currentColor; }

.ls-share-menu { position: relative; }
.ls-share-menu__panel { min-width: 12rem; }
.ls-js .ls-share-menu__panel {
	position: absolute;
	top: calc( 100% + 0.375rem );
	right: 0;
	z-index: 20;
	display: none;
	padding: 0.375rem;
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius );
	background: var( --ls-white );
	box-shadow: 0 20px 25px -5px rgba( 0, 0, 0, 0.1 ), 0 8px 10px -6px rgba( 0, 0, 0, 0.1 );
	text-align: left;
}
.ls-share-save--center .ls-share-menu__panel { right: auto; left: 50%; transform: translateX( -50% ); }
.ls-js .ls-share-menu.is-open .ls-share-menu__panel { display: block; }
.ls-share-menu__title { margin: 0 0 0.25rem; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-xs ); font-weight: var( --ls-fw-bold ); text-transform: uppercase; }
.ls-share-menu__list { margin: 0; padding: 0; list-style: none; }
.ls-share-menu__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.5rem 0.625rem;
	border: 0;
	border-radius: var( --ls-radius-lg );
	background: none;
	color: var( --ls-primary );
	font: inherit;
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-medium );
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.ls-share-menu__item:hover,
.ls-share-menu__item:focus-visible { background: var( --ls-muted ); color: var( --ls-primary ); }

/* Status messages ("Saved to this device. View saved items"). */
.ls-toast {
	position: fixed;
	bottom: 1.25rem;
	left: 50%;
	z-index: 90;
	max-width: calc( 100vw - 2rem );
	padding: 0.75rem 1.125rem;
	border-radius: var( --ls-radius );
	background: var( --ls-primary );
	box-shadow: var( --ls-shadow-md );
	color: var( --ls-white );
	font-size: var( --ls-fs-sm );
	transform: translate( -50%, 200% );
	transition: transform 200ms ease;
}
.ls-toast.is-visible { transform: translate( -50%, 0 ); }
.ls-toast a { color: var( --ls-white ); font-weight: var( --ls-fw-bold ); }
.ls-toast :focus-visible { outline-color: var( --ls-white ); }

/* ── Map (LSRD26-47) ─────────────────────────────────── */
.ls-map { position: relative; overflow: hidden; border: 1px solid var( --ls-border ); border-radius: var( --ls-radius-card ); background: var( --ls-muted ); }
.ls-map__canvas { width: 100%; height: 22rem; }
.ls-results__map .ls-map__canvas { height: 70vh; min-height: 26rem; }
.ls-map.is-failed .ls-map__canvas::after { content: ""; }
.ls-map__legend {
	position: absolute;
	left: 0.75rem;
	bottom: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: rgba( 255, 255, 255, 0.95 );
	box-shadow: var( --ls-shadow-sm );
	color: var( --ls-foreground );
	font-size: var( --ls-fs-xs );
	list-style: none;
}
.ls-map__legend li { display: flex; align-items: center; gap: 0.5rem; }
.ls-map__key { width: 0.75rem; height: 0.75rem; border: 2px solid var( --ls-primary ); border-radius: 50%; }
.ls-map__key--page { background: var( --ls-secondary ); border-color: var( --ls-secondary ); }
.ls-map__key--exact { background: var( --ls-primary ); }
.ls-map__key--approx { background: var( --ls-white ); }
.ls-map__pin {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	border: 3px solid var( --ls-white );
	border-radius: 50%;
	background: var( --ls-primary );
	box-shadow: 0 2px 6px rgba( 25, 54, 103, 0.35 );
}
.ls-map__pin.is-approx { border: 3px dashed var( --ls-primary ); background: var( --ls-white ); }
.ls-map__pin--numbered {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	place-items: center;
	border-color: var( --ls-white );
	background: var( --ls-secondary );
	color: var( --ls-white );
	font: var( --ls-fw-bold ) var( --ls-fs-xs ) / 1 var( --ls-font-body, inherit );
	cursor: pointer;
}
.ls-map__pin--numbered.is-approx { border: 2px dashed var( --ls-secondary ); background: var( --ls-white ); color: var( --ls-secondary ); }
.ls-map__pin--numbered.is-active, .ls-map__pin--numbered:focus-visible { z-index: 2; outline: 3px solid var( --ls-primary ); outline-offset: 1px; transform: scale( 1.15 ); }
.ls-map__you { display: block; width: 1rem; height: 1rem; border: 3px solid var( --ls-white ); border-radius: 50%; background: #1A73E8; box-shadow: 0 0 0 6px rgba( 26, 115, 232, 0.25 ); }
.ls-map__note { margin: 0; padding: 0.625rem 0.875rem; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-xs ); }
.ls-map__directions { position: absolute; top: 0.75rem; left: 0.75rem; }
.ls-map .mapboxgl-popup-content { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: var( --ls-fs-sm ); line-height: 1.5; }
.ls-map .mapboxgl-popup-content a { color: var( --ls-primary ); font-weight: var( --ls-fw-bold ); }

/* Numbered cards match the map's numbered pins (Map view only). */
.ls-card__pin { display: none; }
.ls-results[data-view="map"] .ls-card__pin {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	place-items: center;
	border: 2px solid var( --ls-white );
	border-radius: 50%;
	background: var( --ls-secondary );
	color: var( --ls-white );
	font-size: var( --ls-fs-xs );
	font-weight: var( --ls-fw-bold );
}
.ls-card__distance { margin-left: auto; padding-left: 0.5rem; color: var( --ls-primary ); font-weight: var( --ls-fw-bold ); white-space: nowrap; }

/* Near-me search in the Directory filter rail. */
.ls-near { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; margin: 0; padding: 0.875rem 0 1rem; border: 0; border-bottom: 1px solid var( --ls-border ); }
.ls-near__legend { float: left; width: 100%; margin: 0 0 0.375rem; padding: 0; color: var( --ls-primary ); font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); }
.ls-near__legend + * { clear: both; }
.ls-near__label { color: var( --ls-muted-foreground ); font-size: var( --ls-fs-xs ); font-weight: var( --ls-fw-medium ); }
.ls-near__field { position: relative; display: flex; align-items: center; }
.ls-near__field svg { position: absolute; left: 0.75rem; color: var( --ls-muted-foreground ); pointer-events: none; }
.ls-near__input,
.ls-near__radius {
	width: 100%;
	min-width: 0;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid rgba( 25, 54, 103, 0.2 );
	border-radius: 0.5rem;
	background-color: var( --ls-white );
	color: var( --ls-foreground );
	font: inherit;
	font-size: var( --ls-fs-sm );
}
.ls-near__input { padding-left: 2.125rem; }
.ls-near__radius { margin-bottom: 0.25rem; }
.ls-near__input:focus-visible, .ls-near__radius:focus-visible { outline: 2px solid var( --ls-primary ); outline-offset: 1px; border-color: var( --ls-primary ); }
.ls-near__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.ls-near__locate, .ls-near__go { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; border: 0; background: none; color: var( --ls-primary ); font: inherit; font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); cursor: pointer; }
.ls-near__locate:hover, .ls-near__go:hover { text-decoration: underline; }
.ls-near__locate:disabled { opacity: 0.6; cursor: progress; }
.ls-near__error { margin: 0.25rem 0 0; color: #B3261E; font-size: var( --ls-fs-xs ); }

/* Service Category: subcategories nested under their category (LSRD26-46). */
.ls-check__label { min-width: 0; overflow-wrap: anywhere; }
.ls-check-group__sub { margin: -0.125rem 0 0.25rem 1.625rem; }
.ls-check-group__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0;
	color: var( --ls-muted-foreground );
	font-size: var( --ls-fs-xs );
	font-weight: var( --ls-fw-medium );
	list-style: none;
	cursor: pointer;
}
.ls-check-group__toggle::-webkit-details-marker { display: none; }
.ls-check-group__toggle:hover { color: var( --ls-primary ); }
.ls-check-group__toggle svg { transition: transform var( --ls-transition ); }
.ls-check-group__sub[open] > .ls-check-group__toggle svg { transform: rotate( 180deg ); }
.ls-check--sub { padding-block: 0.3125rem; font-size: var( --ls-fs-sm ); }

/* ── Page not found (LSRD26-71): "min-h-[60vh] … py-20", "text-6xl
 * font-extrabold" (solid navy — never a faded colour, LSRD26-80), "text-2xl font-extrabold". ── */
.ls-not-found { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding-block: 5rem; text-align: center; }
.ls-not-found__number { margin: 0 0 1rem; color: var( --ls-primary ); font-size: 3.75rem; font-weight: var( --ls-fw-black ); line-height: 1; }
.ls-not-found__title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: var( --ls-fw-black ); line-height: 2rem; }
.ls-not-found__text { max-width: 24rem; margin: 0 0 2rem; color: var( --ls-text ); line-height: 1.5; }
.ls-not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.ls-not-found__actions .ls-btn { font-size: var( --ls-fs-md ); line-height: 1.5rem; }

/* ── Section looks (LSRD26-89) ────────────────────────
 * ls_section_look() gives each homepage / page section a background
 * (ls-bg--*), and optionally the pattern and a swoop. Text colours are
 * tokens, so a section flips them in one place: white on the dark colours,
 * the normal dark text on light ones — including light blue and green,
 * where white text fails WCAG AA (2.4:1 and 2.8:1). White cards inside a
 * coloured section keep their own colours. */
.ls-bg { position: relative; --ls-section-bg: var( --ls-white ); }
.ls-bg.ls-bg--white            { --ls-section-bg: var( --ls-white );            background: var( --ls-section-bg ); }
.ls-bg.ls-bg--muted            { --ls-section-bg: var( --ls-muted );            background: var( --ls-section-bg ); }
.ls-bg.ls-bg--primary          { --ls-section-bg: var( --ls-primary );          background: var( --ls-section-bg ); }
.ls-bg.ls-bg--secondary        { --ls-section-bg: var( --ls-secondary );        background: var( --ls-section-bg ); }
.ls-bg.ls-bg--accent           { --ls-section-bg: var( --ls-accent );           background: var( --ls-section-bg ); }
.ls-bg.ls-bg--secondary-accent { --ls-section-bg: var( --ls-secondary-accent ); background: var( --ls-section-bg ); }
.ls-bg.ls-bg--gradient         { --ls-section-bg: var( --ls-secondary );        background: var( --ls-gradient-hero ); }

.ls-bg > .ls-container,
.ls-bg > dl { position: relative; }

.ls-on-dark {
	--ls-heading: var( --ls-white );
	--ls-foreground: var( --ls-white );
	--ls-text: var( --ls-white );
	--ls-muted-foreground: var( --ls-white );
	--ls-link: var( --ls-white );
	--ls-link-hover: var( --ls-accent-tint );
	--ls-pattern-color: var( --ls-white );
	color: var( --ls-white );
}
.ls-on-dark .ls-link-arrow,
.ls-on-dark .ls-link-arrow:hover,
.ls-on-dark .ls-sec__eyebrow,
.ls-on-dark .ls-news-item__cat,
.ls-on-dark .ls-stats-strip__value { color: var( --ls-white ); }
.ls-on-dark .ls-link-arrow:hover { text-decoration: underline; }
/* A button in the section's own colour would vanish: make it white. */
.ls-bg--primary { --ls-btn-primary: var( --ls-white ); --ls-btn-primary-on: var( --ls-primary ); --ls-btn-primary-hover: var( --ls-muted ); }
.ls-bg--secondary { --ls-btn-secondary: var( --ls-white ); --ls-btn-secondary-on: var( --ls-secondary ); --ls-btn-secondary-hover: var( --ls-muted ); }
.ls-on-dark :focus-visible { outline-color: var( --ls-white ); }

.ls-on-light { --ls-pattern-color: var( --ls-primary ); }
.ls-on-light > .ls-hero__pattern { opacity: var( --ls-pattern-opacity-light ); }
/* Light blue and green: every word near-black or navy (7:1 / 5:1). */
.ls-bg--accent,
.ls-bg--secondary-accent { --ls-muted-foreground: var( --ls-foreground ); --ls-link-hover: var( --ls-primary ); }
.ls-bg--accent .ls-sec__eyebrow,
.ls-bg--secondary-accent .ls-sec__eyebrow,
.ls-bg--accent .ls-card__cat,
.ls-bg--secondary-accent .ls-card__cat { color: var( --ls-foreground ); }

/* White cards and panels inside a coloured section keep the site's normal
 * colours. */
.ls-bg :is( .ls-card, .ls-testimonial, .ls-steps__card, .ls-event, .ls-tile, .ls-value-card, .ls-process__item, .ls-stat-grid__item, .ls-cta--light, .ls-sec__form-card, .ls-band, .ls-panel, .ls-rail, .ls-empty ) {
	--ls-heading: var( --ls-primary );
	--ls-foreground: #1A1F2B;
	--ls-text: #1A1F2B;
	--ls-muted-foreground: #4A5168;
	--ls-link: var( --ls-primary );
	--ls-link-hover: var( --ls-secondary );
	--ls-btn-primary: var( --ls-primary );
	--ls-btn-primary-on: var( --ls-white );
	--ls-btn-primary-hover: var( --ls-primary-hover );
	--ls-btn-secondary: var( --ls-secondary );
	--ls-btn-secondary-on: var( --ls-white );
	--ls-btn-secondary-hover: var( --ls-secondary-hover );
	color: var( --ls-foreground );
}
.ls-bg :is( .ls-card, .ls-testimonial, .ls-steps__card, .ls-event, .ls-tile, .ls-value-card, .ls-process__item, .ls-stat-grid__item, .ls-cta--light, .ls-sec__form-card, .ls-band, .ls-panel, .ls-rail ) :focus-visible { outline-color: var( --ls-ring ); }
/* The dark CTA card is its own navy surface. */
.ls-bg .ls-cta--dark { --ls-heading: var( --ls-white ); --ls-link: var( --ls-white ); color: var( --ls-white ); }

/* The swoop hangs below the section, in its colour, over the next one. */
.ls-bg.has-swoop { z-index: 1; overflow: visible; }
.ls-swoop {
	position: absolute;
	top: calc( 100% - 1px );
	left: 0;
	display: block;
	width: 100%;
	height: 3.75rem;
	color: var( --ls-section-bg );
	pointer-events: none;
}
/* Room for it at the top of the next section (a transparent border shows
 * that section's own background, and leaves its padding alone). */
.ls-bg.has-swoop + * { border-top: 3.75rem solid transparent; }

/* White buttons are for dark surfaces; on a light section they turn navy. */
.ls-on-light .ls-btn--white:not( .ls-cta--dark * ) { --ls-btn-c: var( --ls-primary ); --ls-btn-on: var( --ls-white ); --ls-btn-hover: var( --ls-primary-hover ); }
.ls-on-light .ls-btn--white.ls-btn--ghost:not( .ls-cta--dark * ) { --ls-btn-c: var( --ls-primary ); }