/* Semper Sec — supplemental front-end styles.
   Keep this minimal; prefer theme.json. Only styles that theme.json cannot
   express (grids, cards, brand components, focus states) belong here. */

/* ---- Accessibility ------------------------------------------------------ */

/* Visible keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-element-button:focus-visible {
	/* Two-tone focus indicator. A single brand color cannot clear SC 1.4.11 (3:1)
	   against BOTH white page backgrounds and the dark-teal header at once, so we
	   pair a dark-teal outline (>=15:1 on light) with a white halo (>=18:1 on the
	   dark header). One of the two always contrasts with the adjacent surface. */
	outline: 3px solid var(--wp--preset--color--primary-strong, #002A38);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.95);
	border-radius: 4px;
}
/* On the dark header the outline itself is the low-contrast element, so flip the
   pair: light outline + dark halo keeps a visible ring over primary-strong. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header .wp-element-button:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 6px rgba(0, 18, 26, 0.9);
}

/* Skip link. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary-strong, #002A38);
	color: #fff;
	border-radius: 0 0 8px 0;
	font-weight: 600;
}
.skip-link:focus {
	left: 0;
}

/* theme.json pins every heading to primary-strong ink, which wins over the
   `textColor` a dark band sets on itself — so a heading that omits its own color
   renders near-black on deep teal (1.25:1). Restore the band's own text color for
   direct children only, so light cards nested inside a dark section keep theirs. */
.has-primary-background-color > :where(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.has-primary-strong-background-color > :where(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.has-primary-background-color > .wp-block-group__inner-container > :where(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.has-primary-strong-background-color > .wp-block-group__inner-container > :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Header ------------------------------------------------------------- */

.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff;
}
.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent, #CDDB00);
}
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: #fff;
	/* Comfortable touch target without moving the glyph: the open toggle is the
	   first thing under the logo on phones, so it stays flush with the logo's
	   left edge instead of centring inside the enlarged box. */
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: flex-start;
}
/* `display` is set only below the overlay breakpoint. Core hides the open button
   above it with `:not(.always-shown)`, which carries the same specificity as the
   rule above and loses on source order — so declaring `display` unconditionally
   here put a hamburger next to the already-visible desktop nav, defeating
   `overlayMenu: "mobile"`. The close button lives inside the overlay, which
   cannot open above this width. */
@media (max-width: 599.98px) {
	.site-header .wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation__responsive-container-close {
		display: inline-flex;
	}
}
.site-header .wp-block-navigation__responsive-container-close {
	justify-content: center;
}
/* The submenu chevron is a focusable 8x8 button, well under the SC 2.5.8 24x24
   minimum. Negative inline margins absorb the extra width so the nav row keeps
   its existing rhythm while the target grows around the unmoved glyph. */
.site-header .wp-block-navigation-submenu__toggle {
	min-width: 24px;
	min-height: 24px;
	margin-inline: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* The last nav item sits against the right edge of a right-justified row, so a
   left-anchored submenu would push past the viewport. Anchor it to the right
   instead. Only above the 600px overlay breakpoint — inside the mobile overlay
   the submenu is a static accordion and must not be repositioned. */
@media (min-width: 600px) {
	.site-header .site-header__submenu--end > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}
}
/* Ensure the header CTA never wraps awkwardly. */
.site-header__nav .wp-block-button__link {
	white-space: nowrap;
}

/* ---- Section rhythm ----------------------------------------------------- */

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	/* Deep teal (#003B4D ~= 11:1 on white) — sky-blue #25AAE1 fails SC 1.4.3 at
	   2.65:1 on light backgrounds. On-dark variant keeps lime below. */
	color: var(--wp--preset--color--primary, #003B4D);
	margin-bottom: 0.75rem;
}
.eyebrow--on-dark {
	color: var(--wp--preset--color--accent, #CDDB00);
}

/* ---- Operating-model ribbon (hero motif) -------------------------------- */

.operating-ribbon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}
.operating-ribbon .pill {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #003B4D);
}
.operating-ribbon .arrow {
	/* Teal connector: sky-blue fails SC 1.4.11 (2.65:1) as a non-text graphic. */
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 700;
}
.operating-ribbon .pill--result {
	background: var(--wp--preset--color--primary, #003B4D);
	color: #fff;
	border-color: var(--wp--preset--color--primary, #003B4D);
}

/* ---- Card grids --------------------------------------------------------- */

/* The `--2/--3/--4` modifier declares the column count the content was authored
   for, so the same deck reads identically on every page and breakpoint. An
   auto-fit track counts columns from the container width instead, which made a
   `--3` deck render 4-up inside a 1240px section and 2-up inside an 820px one —
   stranding a lone trailing card on its own row. Fixed tracks keep the last row
   ragged-but-aligned rather than orphaned. */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 600px) {
	.card-grid,
	.card-grid--2,
	.card-grid--3,
	.card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.card-grid,
	.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A deck is authored as a group block, so WordPress treats it as flow layout and
   emits `> * + * { margin-block-start }`. The theme then paints it as a grid, and
   that margin survives: it offsets every card except the first inside its own
   track, so card 1 floats a full block-gap above its row and each row sits a
   doubled gap below the last. Spacing here is the grid's `gap` alone. */
.card-grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* A button row after a deck is a section-level action, but it inherits the
   narrower `contentSize` measure while the deck spans `wideSize`. Those two boxes
   are concentric, so centring the row lands it exactly on the deck's centre —
   whereas the inherited flex-start edge put it 210px inside the deck, reading as
   column 1's own button rather than the section's. */
.card-grid + .wp-block-buttons {
	justify-content: center;
}

.card {
	box-sizing: border-box;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 12px;
	padding: 1.5rem 1.5rem 1.6rem;
	height: 100%;
	/* Column flex so the trailing link can be pinned to the card's bottom edge
	   (see .card__cta). `height: 100%` already stretches every card to its grid
	   row, so this only distributes the space that stretch created. */
	display: flex;
	flex-direction: column;
}
.card > *:first-child { margin-top: 0; }
.card > *:last-child { margin-bottom: 0; }
.card h3 {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}
.card p { margin: 0; color: var(--wp--preset--color--muted, #48585F); }
/* A card's action link is its own paragraph rather than a link inside a sentence,
   so the SC 2.5.8 inline exception does not cover it. Font metrics gave the inline
   box 23px while the line box already reserves 28px, so claiming the line height
   as target area clears the 24px minimum without moving anything. */
.card p > a:only-child {
	display: inline-block;
	min-height: 24px;
}

/* Cards that sit on a light surface get a subtle accent bar. */
.card--accent { border-top: 3px solid var(--wp--preset--color--secondary, #25AAE1); }
.card--lime { border-top: 3px solid var(--wp--preset--color--accent, #CDDB00); }

/* Service cards carry a condition line + link. */
.card .card__condition {
	font-style: italic;
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 600;
}
/* Body copy length varies a lot between service lines, so a link that simply
   followed the last paragraph landed at a different height in every card of the
   row (measured up to ~180px apart). `margin-top: auto` spends the card's spare
   stretch space above the link instead, putting every CTA on one baseline. The
   auto margin collapses to zero in whichever card is tallest, so the padding
   supplies the minimum separation from the body copy in that card. Needs to
   out-specify `.card p { margin: 0 }`. */
.card .card__cta {
	margin-top: auto;
	padding-top: 0.9rem;
}
/* Pages seeded before the generator emitted `card__cta` keep the hookless
   markup until the next re-seed, so match the trailing link paragraph
   structurally too. Deliberately a separate rule rather than a selector list
   with the one above: a browser without `:has()` discards a whole list, which
   would take the hooked rule down with it. `:not(:only-child)` leaves a
   link-only card alone, where pinning would just open a gap below the top. */
.card > p:last-child:not(:only-child):has(> a:only-child) {
	margin-top: auto;
	padding-top: 0.9rem;
}
.card--feature {
	border: 1px solid var(--wp--preset--color--primary, #003B4D);
	box-shadow: 0 1px 0 var(--wp--preset--color--primary, #003B4D);
}
.card__tag {
	display: inline-block;
	/* The card is a flex column, whose default `stretch` would blow this pill out
	   to the full card width. Keep it shrink-wrapped around its label. */
	align-self: flex-start;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--wp--preset--color--accent-ink, #1E2A00);
	background: var(--wp--preset--color--accent, #CDDB00);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

/* Every rule below sets its own vertical margins on purpose. Card children live
   inside a `wp:html` block within a default-layout group, so WordPress's
   `:where(.wp-block-group) > * { margin-block-start: var(--wp--style--block-gap) }`
   applies to them, and `.card`'s flex repaint means that margin is not collapsed
   away. Leaving any of these at `auto`/initial inherits a stray 24px gap. */

.card__avatar {
	/* Rendered at 160px; the 2x variant is offered via srcset. Square crop keeps
	   the five sources — two 287px avatars and three 1080x1350 portraits — on one
	   treatment without upscaling the smaller pair. */
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	/* Same reason as .card__tag: the flex column would otherwise stretch it. */
	align-self: flex-start;
	background: var(--wp--preset--color--surface, #F2F6F7);
	margin: 0 0 1rem;
}

.card__meta {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
}
.card__meta-row {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 0.5rem;
}
/* Once the deck is a single column the card is narrow enough that a fixed label
   column leaves the value ragged over five or six lines. Stack instead. */
@media (max-width: 600px) {
	.card__meta-row { grid-template-columns: 1fr; gap: 0; }
	.card__meta-row + .card__meta-row { margin-top: 0.4rem; }
}
.card__meta dt {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #003B4D);
	margin: 0;
}
.card__meta dd {
	margin: 0;
	color: var(--wp--preset--color--muted, #48585F);
}

.card__list { margin: 0.9rem 0 0; }
.card__list-title {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #003B4D);
	margin: 0 0 0.35rem;
}
.card__list ul {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--wp--preset--color--muted, #48585F);
}
.card__list li { margin: 0 0 0.25rem; }

/* Actions pin to the card's bottom edge for the same reason .card__cta does:
   role cards differ in body length, and a per-card action row would otherwise
   land at a different height in every column of the deck. */
.card__actions {
	list-style: none;
	margin: auto 0 0;
	padding: 0.9rem 0 0;
	display: grid;
	gap: 0.4rem;
}
.card__actions li { margin: 0; }
.card__action {
	display: inline-block;
	min-height: 24px;
}
.card__action-note {
	display: block;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #48585F);
}

/* A qualifier that belongs to the deck above it rather than to the section, so
   it needs its own offset: the zero-specificity block-gap rule loses to the
   global paragraph reset. */
.deck-note { margin: 1.5rem 0 0; }

/* ---- Employee quotes ----------------------------------------------------- */

.quote-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
	/* Matches the inline margin-top a card deck carries, so a quote deck and a
	   card deck sit the same distance below their section intro. */
	margin: 2rem 0 0;
}
.quote {
	box-sizing: border-box;
	margin: 0;
	padding: 1.4rem 1.5rem;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-left: 3px solid var(--wp--preset--color--secondary, #25AAE1);
	border-radius: 12px;
}
.quote p {
	margin: 0;
	color: var(--wp--preset--color--primary, #003B4D);
}
/* The quotes are published anonymously by the source and no attribution was
   invented, so this note stands in for a `<cite>` that would have to name someone. */
.quote-note {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #48585F);
}

/* ---- Before → after list ------------------------------------------------ */

.before-after {
	display: grid;
	gap: 0.75rem;
}
.before-after .row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 10px;
}
.before-after .from { color: var(--wp--preset--color--muted, #48585F); }
.before-after .to { color: var(--wp--preset--color--primary-strong, #002A38); font-weight: 600; }
.before-after .sep {
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 700;
	font-size: 1.25rem;
}
@media (max-width: 600px) {
	.before-after .row { grid-template-columns: 1fr; text-align: left; gap: 0.35rem; }
	.before-after .sep { display: none; }
	.before-after .to::before { content: "→ "; color: var(--wp--preset--color--primary, #003B4D); }
}

/* ---- Visual-storytelling diagram system (F1–F8) ------------------------ */
/* Shared figure wrapper. Meaning is carried by order, labels, and structure —
   never by color alone. Teal (#003B4D) carries connectors; lime is fill only. */
.ss-diagram {
	margin: 1.75rem 0 0;
}
/* Every step/stage/chip in this system sizes itself with `flex: 1 1 <basis>`
   plus its own padding and border. Without border-box the basis measures the
   content box only, so a row of five steps overflowed its band by ~55px and
   wrapped — leaving a dangling connector arrow and an orphaned final step. */
.ss-diagram,
.ss-diagram * {
	box-sizing: border-box;
}
.ss-diagram__caption {
	margin-top: 0.9rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #48585F);
}

/* F1 Lifecycle spine: ordered stages joined by teal arrows, reflows to a
   vertical list on narrow screens (arrows hidden, order preserved by <ol>). */
.ss-spine {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
}
.ss-spine__stage {
	flex: 1 1 110px;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-top: 3px solid var(--wp--preset--color--primary, #003B4D);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.ss-spine__label {
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-spine__desc { font-size: 0.9rem; color: var(--wp--preset--color--muted, #48585F); }
.ss-spine__arrow {
	align-self: center;
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 700;
	font-size: 1.35rem;
}
@media (max-width: 860px) {
	.ss-spine { flex-direction: column; }
	.ss-spine__arrow { display: none; }
}

/* G-2 Continuous lifecycle loop (WS-16): the spine stages plus a static return
   band. No animation — the loop meaning is carried by the return label + long
   description, so it holds under reduced-motion and prefers-reduced-motion. */
.ss-loop {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
}
.ss-loop__stage {
	flex: 1 1 110px;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-top: 3px solid var(--wp--preset--color--primary, #003B4D);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.ss-loop__label {
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-loop__desc { font-size: 0.9rem; color: var(--wp--preset--color--muted, #48585F); }
.ss-loop__arrow {
	align-self: center;
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 700;
	font-size: 1.35rem;
}
.ss-loop__return {
	margin: 0.85rem 0 0;
	padding: 0.6rem 0.9rem;
	border: 1px dashed var(--wp--preset--color--primary, #003B4D);
	border-radius: 10px;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #003B4D);
	background: var(--wp--preset--color--surface, #F3F6F7);
}
.ss-loop__return-arrow { font-size: 1.2rem; font-weight: 700; }
@media (max-width: 860px) {
	.ss-loop { flex-direction: column; }
	.ss-loop__arrow { display: none; }
}

/* F7 Condition → Action → Outcome band. */
.ss-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
}
.ss-flow__step {
	/* The longest flow in the content set is four steps; at a 200px basis that row
	   needed 914px inside an 820px measure, so the final step wrapped alone beneath
	   a dangling connector arrow. 150px keeps four steps plus arrows on one line all
	   the way down to the 860px stacking breakpoint. */
	flex: 1 1 150px;
	background: var(--wp--preset--color--surface, #F3F6F7);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.ss-flow__step--outcome {
	background: var(--wp--preset--color--primary, #003B4D);
}
.ss-flow__step--outcome .ss-flow__role,
.ss-flow__step--outcome .ss-flow__text { color: #fff; }
.ss-flow__role {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-flow__text { color: var(--wp--preset--color--contrast, #17272D); }
.ss-flow__arrow {
	align-self: center;
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 700;
	font-size: 1.35rem;
}
@media (max-width: 860px) {
	.ss-flow { flex-direction: column; }
	.ss-flow__arrow { display: none; }
}

/* F5 Map once, satisfy many: framework-coverage matrix as a real table.
   Coverage is a filled dot AND a screen-reader "Covered by …" — never color-only.
   The figure is a horizontal-scroll container so a wide matrix never forces
   page-level overflow; on phones cells tighten so the common case fits without
   scrolling. min-width:0 lets the scroll container shrink below the table box. */
.ss-diagram--matrix { overflow-x: auto; max-width: 100%; min-width: 0; }
.ss-matrix {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
}
.ss-matrix th,
.ss-matrix td {
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	padding: 0.6rem 0.7rem;
	text-align: center;
}
@media (max-width: 640px) {
	.ss-matrix { font-size: 0.82rem; }
	.ss-matrix th,
	.ss-matrix td { padding: 0.4rem 0.35rem; }
}
.ss-matrix thead th {
	background: var(--wp--preset--color--surface-strong, #E6EEF0);
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-matrix tbody th[scope="row"] {
	text-align: left;
	background: var(--wp--preset--color--surface, #F3F6F7);
	color: var(--wp--preset--color--contrast, #17272D);
}
.ss-matrix__dot {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #003B4D);
}
.ss-matrix td.is-empty { background: var(--wp--preset--color--base, #fff); }

/* F7/F8b owner tag: who is accountable for a step. Reused for the TPRM
   swimlane, where each step carries an owning function. */
.ss-flow__owner {
	margin-top: 0.15rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #48585F);
}
.ss-flow__step--outcome .ss-flow__owner { color: var(--wp--preset--color--on-dark-muted, #AEC4CC); }

/* F2 Two models, one method: two stacked bands (what you buy / how we
   deliver) joined by a teal bridge. Chips reflow 4-up → 1-up; the method
   row becomes a vertical list on phones. Lime is used as a fill with dark
   ink only (never as text). */
.ss-twomodels { display: flex; flex-direction: column; gap: 0.75rem; }
.ss-twomodels__band {
	background: var(--wp--preset--color--surface, #F3F6F7);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 10px;
	padding: 1.1rem 1.2rem;
}
.ss-twomodels__bandlabel {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-twomodels__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}
.ss-twomodels__chip {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 8px;
	padding: 0.7rem 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #17272D);
}
.ss-twomodels__chip--core {
	background: var(--wp--preset--color--accent, #CDDB00);
	border-color: var(--wp--preset--color--accent, #CDDB00);
	color: var(--wp--preset--color--accent-ink, #1E2A00);
}
.ss-twomodels__coretag { font-weight: 700; }
.ss-twomodels__bridge {
	margin: 0;
	text-align: center;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-twomodels__method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.ss-twomodels__step {
	flex: 1 1 120px;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-top: 3px solid var(--wp--preset--color--primary, #003B4D);
	border-radius: 8px;
	padding: 0.6rem 0.7rem;
	text-align: center;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-twomodels__arrow {
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 700;
	font-size: 1.2rem;
}
@media (max-width: 860px) {
	.ss-twomodels__chips { grid-template-columns: 1fr; }
	.ss-twomodels__method { flex-direction: column; }
	.ss-twomodels__arrow { display: none; }
}

/* F3 Unified operating model: several inputs coordinated into one result. */
.ss-hub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}
.ss-hub__inputs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	flex: 1 1 260px;
}
.ss-hub__input {
	background: var(--wp--preset--color--surface, #F3F6F7);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 8px;
	padding: 0.7rem 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #17272D);
	text-align: center;
}
.ss-hub__bridge {
	margin: 0;
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
	text-align: center;
}
.ss-hub__result {
	margin: 0;
	flex: 1 1 200px;
	background: var(--wp--preset--color--primary, #003B4D);
	color: #fff;
	border-radius: 10px;
	padding: 1.1rem 1.2rem;
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-weight: 700;
	text-align: center;
}
@media (max-width: 640px) {
	.ss-hub { flex-direction: column; align-items: stretch; }
	.ss-hub__inputs { grid-template-columns: 1fr; }
}

/* G-1 Operating-model wrapper (WS-18): one program core that harmonizes many
   frameworks. Core is a prominent node; frameworks are chips beneath it. The
   "one core satisfies many" meaning is carried by the labelled core + bridge
   word + long description, not color; reflows to one column on narrow screens. */
.ss-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
}
.ss-wrapper__core {
	margin: 0;
	background: var(--wp--preset--color--primary, #003B4D);
	color: #fff;
	border-radius: 10px;
	padding: 1.1rem 1.4rem;
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-weight: 700;
	max-width: 30rem;
}
.ss-wrapper__bridge {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-wrapper__ring {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.ss-wrapper__node {
	background: var(--wp--preset--color--surface, #F3F6F7);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 999px;
	padding: 0.55rem 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #17272D);
}

/* F8a Independence boundary: two owners separated by a deliberate divider. */
.ss-boundary {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
}
.ss-boundary__col {
	flex: 1 1 240px;
	background: var(--wp--preset--color--surface, #F3F6F7);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-top: 3px solid var(--wp--preset--color--primary, #003B4D);
	border-radius: 10px;
	padding: 1rem 1.1rem;
}
.ss-boundary__owner {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #003B4D);
}
.ss-boundary__items {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--wp--preset--color--contrast, #17272D);
	display: grid;
	gap: 0.3rem;
}
.ss-boundary__divider {
	align-self: center;
	margin: 0;
	color: var(--wp--preset--color--primary, #003B4D);
	font-weight: 700;
	font-size: 1.5rem;
}
@media (max-width: 640px) {
	.ss-boundary { flex-direction: column; }
	.ss-boundary__divider { display: none; }
}

/* ---- Contact / advisor form ------------------------------------------- */

.sempersec-contact-form {
	display: grid;
	gap: 1rem;
	max-width: 40rem;
}
.sempersec-contact-form .field { display: grid; gap: 0.35rem; }
.sempersec-contact-form label { font-weight: 600; }
.sempersec-contact-form input,
.sempersec-contact-form textarea,
.sempersec-contact-form select {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 8px;
	font: inherit;
	background: #fff;
}
/* Required marker: teal, not color-alone — paired with the word "required" in the
   consent line and native required/aria-required on each control. */
.sempersec-contact-form .req { color: var(--wp--preset--color--primary, #003B4D); font-weight: 700; }
.sempersec-contact-form .optional { color: var(--wp--preset--color--muted, #48585F); font-weight: 400; }
.form-consent {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #48585F);
	max-width: 40rem;
	margin: 0;
}
.form-consent a { color: var(--wp--preset--color--primary, #003B4D); }

/* Client-rendered submit status ("Sending…" / success / error). */
.sempersec-contact-form .form-status {
	font-size: 0.95rem;
	margin: 0;
	min-height: 1.4em;
}
.sempersec-contact-form .form-status:empty { display: none; }
.sempersec-contact-form .form-status--pending { color: var(--wp--preset--color--muted, #48585F); }
.sempersec-contact-form .form-status--ok      { color: var(--wp--preset--color--primary, #003B4D); font-weight: 600; }
.sempersec-contact-form .form-status--error   { color: #a5301c; }

/* Honeypot: visually hidden from real users, still submitted by bots. */
.sempersec-contact-form .visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ---- Managed GRC CTA modal --------------------------------------------- */

/* The dialog ships with the `hidden` attribute and is revealed by
   assets/js/cta-form.js. `hidden` alone would be overridden by the flex
   display below, so restate it. */
.cta-modal[hidden] { display: none; }

.cta-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 5vh, 4rem) 1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.cta-modal__backdrop {
	position: fixed;
	inset: 0;
	/* contrast token at ~72% so page content stays legible behind the panel
	   without introducing a colour outside theme.json. The rgba() line is the
	   pre-color-mix() fallback and resolves to the same token value. */
	background: rgba(23, 39, 45, 0.72);
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #17272D) 72%, transparent);
}
.cta-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 44rem;
	margin: auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background: var(--wp--preset--color--base, #FFFFFF);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	animation: cta-modal-in 160ms ease-out;
}
.cta-modal__title { margin: 0.25rem 0 0; }
.cta-modal__desc {
	margin: 0.75rem 0 1.5rem;
	color: var(--wp--preset--color--muted, #48585F);
}
.cta-modal .sempersec-contact-form { max-width: none; }

/* Close control sits inside the panel's padding, clear of the heading. */
.cta-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted, #48585F);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}
.cta-modal__close:hover {
	background: var(--wp--preset--color--surface, #F3F6F7);
	color: var(--wp--preset--color--contrast, #17272D);
}

/* Prevent the page behind the dialog from scrolling while it is open. */
body.cta-modal-open { overflow: hidden; }

@keyframes cta-modal-in {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cta-modal__dialog { animation: none; }
}

/* Contact directory: a description list, so each label stays programmatically
   tied to its value rather than relying on visual proximity. */
.contact-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem 2rem;
	margin: 0;
}
.contact-methods dt {
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #003B4D);
	margin-bottom: 0.4rem;
}
.contact-methods dd {
	margin: 0;
	line-height: 1.7;
}
.contact-methods address {
	font-style: normal;
}
/* These links are their own block, not inline prose, so SC 2.5.8's inline
   exception does not apply. Sized past the 24px AA floor because tapping a phone
   number or address is the whole point of this page on a phone. */
.contact-methods dd a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

/* ---- Privacy / legal table of contents --------------------------------- */

.privacy-toc {
	background: var(--wp--preset--color--surface, #F3F6F7);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin: 0 0 2rem;
}
.privacy-toc h2 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--primary, #003B4D);
}
.privacy-toc ul { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.privacy-toc li { margin: 0 0 0.4rem; break-inside: avoid; }
.privacy-toc a { color: var(--wp--preset--color--primary, #003B4D); }
@media (max-width: 600px) {
	.privacy-toc ul { columns: 1; }
}

/* Plain-language privacy summary: clearly labelled as a convenience summary
   that does not replace the authoritative legal text below it. */
.privacy-updated {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #48585F);
}
.privacy-summary {
	background: var(--wp--preset--color--surface, #F3F6F7);
	border: 1px solid var(--wp--preset--color--border, #D6E0E4);
	border-left: 4px solid var(--wp--preset--color--primary, #003B4D);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0 0;
}
.privacy-summary__label {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--heading, Roboto, Arial, sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary, #003B4D);
}
.privacy-summary__note {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--wp--preset--color--muted, #48585F);
}

/* ---- Rotating hero carousel -------------------------------------------- */

.hero-carousel {
	/* Side-arrow geometry (desktop/tablet):
	   arrow edge inset (16px) + arrow width (48px) = 64px of edge control area.
	   --hero-content-inset (>=96px) pushes ALL slide text past that, leaving a
	   >=32px gap after the arrow's right edge, so no arrow can touch the eyebrow,
	   headline, copy, or CTA. On mobile the arrows drop to a bottom control row
	   (see the media query) and this inset relaxes to a normal reading margin. */
	--hero-content-inset: clamp(96px, 8vw, 120px);
	--hero-media-pad: clamp(1.5rem, 3vw, 2.5rem);
	--hero-arrow-edge: 16px;
	position: relative;
	isolation: isolate;
	margin-top: clamp(1rem, 2vw, 1.5rem);
}
.hero-carousel__viewport {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px -30px rgba(0, 42, 56, 0.6);
}
/* Slides stack in one grid cell and cross-fade; keeps layout height stable and
   avoids horizontal overflow on small screens. */
.hero-carousel__track {
	display: grid;
}
.hero-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(440px, 58vh, 580px);
	background-color: var(--wp--preset--color--primary, #003B4D);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease;
}
.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}
/* Static (single-slide) hero is always visible. */
.hero-carousel--static .hero-slide {
	opacity: 1;
	visibility: visible;
}
.hero-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(0, 42, 56, 0.96), rgba(0, 59, 77, 0.9));
}
.hero-slide__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 3rem var(--hero-content-inset);
	color: #fff;
}
.hero-slide__inner > * {
	max-width: 640px;
}
/* Split-media slides: deep-teal content panel + media panel showing the full
   uploaded artwork (object-fit:contain), so baked-in flyer text never competes
   with the HTML headline/CTA. No full-bleed background, no overlay. */
.hero-slide--media {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: stretch;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--primary-strong, #002A38),
		var(--wp--preset--color--primary, #003B4D)
	);
}
.hero-slide--media .hero-slide__inner {
	max-width: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-inline: var(--hero-content-inset) var(--hero-media-pad);
}
.hero-slide--media .hero-slide__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.75rem var(--hero-content-inset) 1.75rem var(--hero-media-pad);
	background: rgba(0, 18, 26, 0.35);
}
.hero-slide--media .hero-slide__media-img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: clamp(360px, 46vh, 520px);
	object-fit: contain;
	border-radius: 6px;
}
/* Backdrop slides: image fills the slide as a full-bleed cover, with a dark
   scrim between the image and text so the headline/CTA stays legible on any
   underlying artwork. No side-by-side split; text overlays the image within
   the same content inset the other variants use. */
.hero-slide--backdrop {
	background: var(--wp--preset--color--primary-strong, #002A38);
}
.hero-slide--backdrop .hero-slide__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hero-slide--backdrop .hero-slide__backdrop-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The scrim below establishes the legible text zone, so the image can
	   remain centered by default. Individual slides can override with a
	   `--hero-backdrop-position` custom property on the slide root. */
	object-position: var(--hero-backdrop-position, center);
}
.hero-slide--backdrop .hero-slide__scrim {
	position: absolute;
	inset: 0;
	/* Solid opaque dark column across roughly the left half of the frame,
	   then a rapid fade to a faint tint on the right. The opaque section
	   guarantees the text zone is legible regardless of what's behind the
	   image, and the fade section lets the image breathe on the right.
	   Tuned so the fade transition sits outside the widest text column at
	   the 1440px+ desktop breakpoint. */
	background: linear-gradient(90deg, rgba(0, 18, 26, 1) 0%, rgba(0, 18, 26, 1) 46%, rgba(0, 18, 26, 0.72) 58%, rgba(0, 18, 26, 0.20) 82%, rgba(0, 18, 26, 0.08) 100%);
}
.hero-slide--backdrop .hero-slide__inner {
	position: relative;
	z-index: 1;
}
.hero-slide__headline {
	color: #fff;
	margin: 0.25rem 0 0.75rem;
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.hero-slide__copy {
	color: var(--wp--preset--color--on-dark-muted, #AEC4CC);
	font-size: 1.2rem;
	margin: 0 0 1.5rem;
	max-width: 560px;
}
.hero-carousel .eyebrow--on-dark {
	color: var(--wp--preset--color--accent, #CDDB00);
}
.hero-slide__cta {
	margin: 0;
}
/* Prev / next arrows — live in the reserved edge control area; the slide text is
   inset past them by --hero-content-inset (see the token comment above). */
.hero-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 999px;
	background: rgba(0, 42, 56, 0.7);
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
}
.hero-carousel__nav:hover {
	background: var(--wp--preset--color--primary-strong, #002A38);
}
.hero-carousel__nav--prev { left: var(--hero-arrow-edge); }
.hero-carousel__nav--next { right: var(--hero-arrow-edge); }
/* Controls row: pause/play + dots. */
.hero-carousel__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}
.hero-carousel__dots {
	display: flex;
	gap: 0.25rem;
}
.hero-carousel__dot {
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hero-carousel__dot::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	transition: background 0.3s ease, transform 0.3s ease;
}
.hero-carousel__dot:hover::before {
	background: rgba(255, 255, 255, 0.8);
}
.hero-carousel__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--accent, #CDDB00);
	transform: scale(1.35);
}
.hero-carousel__playpause {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 999px;
	background: rgba(0, 42, 56, 0.55);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hero-carousel__playpause:hover {
	background: var(--wp--preset--color--primary-strong, #002A38);
}
.hero-carousel__playpause .hero-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
@media (max-width: 600px) {
	.hero-carousel {
		/* On phones the arrows move OUT of the sides and into the bottom control
		   row (below), so side collisions are impossible. Text uses a normal
		   reading margin; the bottom padding reserves the control band. */
		--hero-content-inset: 24px;
		--hero-media-pad: 24px;
	}
	.hero-slide__inner {
		padding: 2.5rem var(--hero-content-inset) 5rem;
	}
	/* Cap every child at the content box (not `none`): with no global box-sizing
	   reset and a flex/grid parent, `max-width:none` let the copy size to its
	   intrinsic width and spill past the inset content box, clipping the date
	   line on the event slide. 100% keeps text wrapping inside the hero frame. */
	.hero-slide__inner,
	.hero-slide__media,
	.hero-slide__media-img {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}
	.hero-slide__inner > * {
		max-width: 100%;
		min-width: 0;
	}
	.eyebrow,
	.hero-slide__headline,
	.hero-slide__copy {
		overflow-wrap: break-word;
	}
	.hero-slide__overlay {
		background: linear-gradient(180deg, rgba(0, 42, 56, 0.8), rgba(0, 42, 56, 0.94));
	}
	/* Stack media slides: text-first (heading/date/CTA legible), flyer below,
	   with room at the bottom so the arrow/dots/pause controls never cover it. */
	.hero-slide--media {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		background: linear-gradient(180deg, var(--wp--preset--color--primary-strong, #002A38), var(--wp--preset--color--primary, #003B4D));
	}
	.hero-slide--media .hero-slide__inner {
		padding: 2.25rem var(--hero-content-inset) 1.25rem;
	}
	.hero-slide--media .hero-slide__media {
		padding: 0 var(--hero-content-inset) 5rem;
		background: transparent;
	}
	.hero-slide--media .hero-slide__media-img {
		max-height: 300px;
	}
	/* Backdrop slides on mobile: the image reflows under the entire text column,
	   so switch from a horizontal scrim to a vertical fade with an opaque
	   middle band. The image reads as texture at the top and bottom edges and
	   the text sits over a nearly opaque field in the middle. Focal subject
	   is pinned high so the image top edge carries the interesting silhouette
	   rather than the boring lower cityscape. */
	.hero-slide--backdrop .hero-slide__backdrop-img {
		object-position: var(--hero-backdrop-position-mobile, center 25%);
	}
	.hero-slide--backdrop .hero-slide__scrim {
		background: linear-gradient(180deg, rgba(0, 18, 26, 0.55) 0%, rgba(0, 18, 26, 0.95) 22%, rgba(0, 18, 26, 0.98) 55%, rgba(0, 18, 26, 0.92) 82%, rgba(0, 18, 26, 0.75) 100%);
	}
	.hero-slide--backdrop .hero-slide__inner {
		padding-block: 2.25rem 5rem;
	}
	/* Arrows join the bottom control band at the corners — never over text/flyer. */
	.hero-carousel__nav {
		top: auto;
		bottom: 10px;
		transform: none;
		width: 44px;
		height: 44px;
		font-size: 1.5rem;
	}
	.hero-carousel__nav--prev { left: 12px; }
	.hero-carousel__nav--next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide {
		transition: none;
	}
}

/* ---- Utility ------------------------------------------------------------ */

.lede { font-size: 1.2rem; color: var(--wp--preset--color--muted, #48585F); }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
img { max-width: 100%; height: auto; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list a { color: #fff; text-decoration: none; }
.footer-list a:hover { color: var(--wp--preset--color--accent, #CDDB00); text-decoration: underline; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--wp--preset--color--accent, #CDDB00); }