.elementor-kit-41826{--e-global-color-primary:#6366F1;--e-global-color-secondary:#4F46E5;--e-global-color-text:#0A0A0A;--e-global-color-accent:#6366F1;--e-global-typography-primary-font-family:"General Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-family:"General Sans";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"General Sans";--e-global-typography-accent-font-weight:500;background-color:#FAFAFA;color:var( --e-global-color-text );font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;line-height:1.6em;}.elementor-kit-41826 button,.elementor-kit-41826 input[type="button"],.elementor-kit-41826 input[type="submit"],.elementor-kit-41826 .elementor-button{background-color:var( --e-global-color-primary );font-family:"DM Sans", Sans-serif;font-size:14px;font-weight:500;line-height:1.2em;color:#FFFFFF;border-radius:6px 6px 6px 6px;padding:12px 24px 12px 24px;}.elementor-kit-41826 button:hover,.elementor-kit-41826 button:focus,.elementor-kit-41826 input[type="button"]:hover,.elementor-kit-41826 input[type="button"]:focus,.elementor-kit-41826 input[type="submit"]:hover,.elementor-kit-41826 input[type="submit"]:focus,.elementor-kit-41826 .elementor-button:hover,.elementor-kit-41826 .elementor-button:focus{background-color:var( --e-global-color-accent );color:#FFFFFF;}.elementor-kit-41826 e-page-transition{background-color:#FFBC7D;}.elementor-kit-41826 p{margin-block-end:0px;}.elementor-kit-41826 a{color:#6B6B6B;}.elementor-kit-41826 a:hover{color:#4F46E5;}.elementor-kit-41826 h1{font-family:"General Sans", Sans-serif;font-size:60px;font-weight:700;line-height:1.04em;letter-spacing:-0.04em;}.elementor-kit-41826 h2{font-family:"General Sans", Sans-serif;font-size:32px;font-weight:700;line-height:1.15em;letter-spacing:-0.03em;}.elementor-kit-41826 h3{font-family:"General Sans", Sans-serif;font-size:24px;font-weight:600;line-height:1.25em;letter-spacing:-0.03em;}.elementor-kit-41826 h4{font-family:"General Sans", Sans-serif;font-size:20px;font-weight:600;line-height:1.3em;letter-spacing:-0.02em;}.elementor-kit-41826 h5{font-family:"General Sans", Sans-serif;font-size:16px;font-weight:600;line-height:1.4em;letter-spacing:-0.01em;}.elementor-kit-41826 h6{font-family:"General Sans", Sans-serif;font-size:14px;font-weight:600;line-height:1.4em;}.elementor-kit-41826 label{color:var( --e-global-color-text );font-family:"DM Sans", Sans-serif;font-size:13px;font-weight:500;line-height:1.4em;}.elementor-kit-41826 input:not([type="button"]):not([type="submit"]),.elementor-kit-41826 textarea,.elementor-kit-41826 .elementor-field-textual{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;line-height:1.4em;color:var( --e-global-color-text );background-color:#FFFFFF;border-radius:6px 6px 6px 6px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-41826 h1{font-size:44px;}.elementor-kit-41826 h2{font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-41826 h1{font-size:34px;}.elementor-kit-41826 h2{font-size:26px;}.elementor-kit-41826 h3{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --text-primary:#0A0A0A; --text-secondary:#6B6B6B; --surface:#FFFFFF; --border:#E8E8EC; --indigo:#6366F1; --gray-100:#F2F2F3; --error:#EF4444; --ink-invert:#FFFFFF; --font-display:General Sans; --tracking-tighter:-0.04em; --radius-sm:6px; --radius-md:8px; --radius-full:9999px; --topbar-height:40px; --header-height:68px; --brand-mark-size:34px; --icon-btn-size:40px; --nav-gap:24px; --indigo-tint:#6366F11F; --header-bg:#FFFFFFD1; --topbar-text:#FFFFFFB8; --topbar-icon:#FFFFFFB3; --topbar-icon-hover-bg:#FFFFFF1F; --container-max:1240px; --container-pad:24px; --indigo-hover:#4F46E5; --indigo-glow:#6366F159; --green:#20970B; --bg:#FAFAFA; --space-5:20px; --space-7:32px; --space-8:40px; --space-10:64px; --space-11:80px; --footer-social-size:38px; --footer-text:#FFFFFFB3; --footer-text-soft:#FFFFFF9E; --footer-text-dim:#FFFFFF73; --footer-text-faint:#FFFFFF80; --footer-link-strong:#FFFFFFE6; --footer-icon:#FFFFFFD9; --footer-border:#FFFFFF1A; --footer-social-bg:#FFFFFF14; --text-muted:#9C9C9C; --success:#10B981; --warning:#F59E0B; --gray-50:#FAFAFA; --gray-200:#E8E8EC; --gray-800:#333338; --gray-900:#0A0A0A; --font-body:DM Sans; --font-mono:JetBrains Mono; --tracking-tight:-0.03em; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-9:48px; --space-12:96px; --radius-xs:4px; --radius-lg:12px; --radius-xl:16px; --section-title-size:clamp(26px, 4vw, 34px); --chip-solid-bg:#FFFFFF29; --feature-title-size:clamp(28px, 3.4vw, 42px); --feature-excerpt:#FFFFFFD1; --feature-meta:#FFFFFFB3; --feature-meta-link:#FFFFFFD9; --tile-meta:#FFFFFFB8; --tile-meta-link:#FFFFFFD9; --cat-count-text:#FFFFFFBF; --cat-count-bg:#FFFFFF29; --widget-cta-text:#FFFFFFB3; --widget-cta-input-bg:#FFFFFF14; --widget-cta-input-border:#FFFFFF29; --widget-cta-placeholder:#FFFFFF80; --page-hero-title-size:clamp(34px, 5.5vw, 58px); --page-hero-lede-size:clamp(16px, 2vw, 19px); --prose-text:#3A3A40; --stat-num-size:clamp(38px, 5vw, 52px); --cta-band-pad:clamp(32px, 6vw, 64px); --cta-band-title-size:clamp(28px, 4vw, 42px); --cta-band-text:#FFFFFFB8; --cta-band-input-bg:#FFFFFF14; --cta-band-input-border:#FFFFFF2E; --cta-band-placeholder:#FFFFFF8C; --cta-band-fineprint:#FFFFFF80; --cta-band-dot:#FFFFFF1F; --author-banner-title-size:clamp(30px, 4vw, 44px); --notfound-code-size:clamp(96px, 22vw, 220px); --notfound-title-size:clamp(26px, 4vw, 38px); --mission-title-size:clamp(26px, 3.5vw, 38px); --services-panel-pad:clamp(28px, 5vw, 64px); }
/* Start custom CSS *//* Header location wrapper must not box the sticky header.
   Elementor wraps theme-builder locations in <header class="elementor-location-header">,
   which is only as tall as its content, so position:sticky on .site-header
   can never travel past it. display:contents removes that box so .site-header
   sticks against <body>, matching the source markup. */
.elementor-location-header { display: contents; }

/* --- B29 base reset -------------------------------------------------
   Only the properties Elementor's Site Settings UI cannot express.
   body font/size/line-height/colour/background, h1-h6, link colours and
   paragraph spacing all live in Site Settings, not here.
   box-sizing, scroll-behavior, text-size-adjust, font-smoothing,
   img max-width and the ul/ol reset already come from hello-elementor. */
img { display: block; }
body { text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
button { font-family: inherit; cursor: pointer; }

/* --- B29 WCAG focus visibility ---------------------------------------
   Tag-level and :focus-visible based, so this cannot be a global class:
   it must cover every focusable element on the site, including markup
   WordPress and plugins output. --focus-ring has no Global Variable form
   (shadows have no variable type), so it is redefined here.
   DELIBERATE DEVIATION from styles.css: the source uses --indigo-tint (12%),
   which composites to ~#ECEDFD on white — about 1.2:1, failing WCAG 2.2
   SC 2.4.11 Focus Appearance (3:1 required). Solid --indigo is ~4.5:1. */
:root { --focus-ring: 0 0 0 3px var(--indigo); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* --- B29 layout: the three bits a Global Class cannot express ---------
   Everything else in the Layout block of styles.css IS a global class
   (container, section, section--tight, visually-hidden, eyebrow,
   section-head, section-head-title, link-more, link-more-icon). */

/* pseudo-elements have no global-class form (only hover/active/focus states) */
.eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--indigo);
	border-radius: 2px;
}

/* parent-hover-child: a class can only style its own hover, not a descendant's */
.link-more:hover svg { transform: translateX(3px); }

/* clip and white-space are absent from the v4 atomic Style Schema */
.visually-hidden {
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- B29 chips: hover is anchor-scoped in styles.css --------------------
   Only link chips react; plain label chips must not. A global-class hover
   variant cannot express the `a.` qualifier, so it lives here. The muted rule
   follows the base rule, matching source order (both are (0,2,1), so order
   decides which wins on a muted link chip). */
.elementor a.chip:hover {
	background: var(--indigo);
	color: var(--ink-invert);
}

.elementor a.chip--muted:hover {
	background: var(--gray-200);
	color: var(--text-primary);
}

/* --- B29 hero (home) ---------------------------------------------------
   The rest of the HERO block is global classes (hero, hero-grid, feature-card,
   feature-card-img/body/heading/title/excerpt, hero-side, side-post,
   side-post-thumb/-img/-title/-link). Only these six have no class form. */

/* `isolation` is absent from the v4 atomic Style Schema. It matters: it creates
   a stacking context so the img (z-index:-2) and ::after (z-index:-1) stay
   behind the body text but in front of the page background. */
.elementor .feature-card { isolation: isolate; }

/* pseudo-element: the bottom-up scrim that makes white text legible on photos */
.elementor .feature-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.86) 100%);
}

/* parent-hover-child: a class styles its own hover, never a descendant's */
/* The mockup writes the feature title link as <a style="color:inherit">.
   Elementor e-heading emits <h1 class="feature-card-title"><a class="e-heading-link-base">,
   and that anchor would otherwise take the Site Settings link colour (indigo)
   instead of the white set on the h2. Class-based equivalent of that inline style. */
.elementor .feature-card-heading a,
.elementor .tile-title a { color: inherit; }

.elementor .feature-card:hover img { transform: scale(1.04); }

/* Descendant overrides that retarget the EXISTING meta component on dark
   imagery. Written as descendant .elementor-kit-41826s (0,3,0 / 0,3,1) so they beat the
   flat .elementor .meta / .meta-link rules (0,2,0) without needing modifier
   classes and a kit reorder. */
.elementor .feature-card .meta { color: var(--feature-meta); }
.elementor .feature-card .meta a,
.elementor .feature-card .meta svg { color: var(--feature-meta-link); }

/* --- B29 cards grid ----------------------------------------------------
   Classes cover grid/grid-2/grid-3/grid-4 and card + card-media, -media-img,
   -body, -title, -link, -text. These three cannot be classes. */

/* parent-hover-child */
.elementor .card:hover .card-media-img { transform: scale(1.05); }

/* descendant overrides of components defined elsewhere (chip, meta): written as
   descendant .elementor-kit-41826s so specificity (0,4,0) beats the flat (0,2,0) rules,
   with no modifier class and no kit reorder. */
.elementor .card .card-media .chip {
	position: absolute;
	top: 12px;
	left: 12px;
}

.elementor .card .card-body .meta {
	margin-top: auto;
	padding-top: 6px;
}

/* --- B29 compact story tile -------------------------------------------
   Classes: tile, tile-img, tile-body, tile-title.
   NOTE: unlike .feature-card this has NO `isolation: isolate`, and that is
   correct — the tile stacks by paint order instead (absolute img, then the
   ::after scrim as a later-generated child, then .tile-body at z-index 1).
   Do not "fix" it by adding isolation. */

.elementor .tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,.85));
}

.elementor .tile:hover img { transform: scale(1.05); }

.elementor .tile .meta { color: var(--tile-meta); }
.elementor .tile .meta a,
.elementor .tile .meta svg { color: var(--tile-meta-link); }

/* --- B29 category cards ------------------------------------------------
   Classes: cat-grid, cat, cat-img, cat-body, cat-title, cat-count.
   Like .tile -- and unlike .feature-card -- this has NO `isolation: isolate`,
   and that is correct: it stacks by paint order instead (absolutely positioned
   img, then the ::after scrim as a later-generated child, then .cat-body at
   z-index 1). Do not "fix" it by adding isolation. */

/* pseudo-element: bottom-up scrim that keeps the white label legible on photos */
.elementor .cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,.8));
}

/* parent-hover-child: a class styles its own hover, never a descendant's */
.elementor .cat:hover img { transform: scale(1.06); }

/* --- B29 two-col layout / post-row (styles.css 348-370) -----------------
   Classes: with-sidebar, post-row, post-row-media, -media-img, -body,
   -title, -title-link, -text, -tags, -read-more, -read-more-icon.
   Only these three have no global-class form. */

/* parent-hover-child: a class styles its own hover, never a descendant's */
.elementor .post-row:hover .post-row-media-img { transform: scale(1.05); }
.elementor .post-row:hover .post-row-read-more-icon { transform: translateX(3px); }

/* descendant override pinning the EXISTING chip component over the image.
   (0,4,0) beats the flat .elementor .chip (0,2,0), so no modifier class and
   no kit reorder -- same pattern as .card .card-media .chip above, but note
   the offsets differ: 14px here vs 12px on the card, as in the source. */
.elementor .post-row .post-row-media .chip {
	position: absolute;
	top: 14px;
	left: 14px;
}

/* --- B29 sidebar widgets (styles.css 372-414) --------------------------
   Classes: widget, widget--cta, widget-title, widget-title-icon,
   widget-search-row, widget-cta-title, widget-cta-text, mini-post + -thumb,
   -thumb-img, -title, -title-link, -date, tag-cloud, author-widget +
   -avatar, -avatar-img, -text, -socials, -social, -social-icon.

   NOTE `.widget--cta h3 svg` is NOT ported as a class: it restates
   `color: var(--indigo)`, identical to `.widget h3 svg` at equal specificity,
   so `widget-title-icon` alone already produces the right result. */

/* :first-child / :last-child have no atomic variant form. Earlier regions were
   told to handle these per-element when building the template; kit CSS is the
   better answer -- it is markup-agnostic and cannot be forgotten on one item. */
.elementor .mini-post:first-child { padding-top: 0; }

.elementor .mini-post:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Bare-tag descendants. `input` is styled at TAG level in Site Settings (the
   FORM CONTROLS region, styles.css 416+, is not ported yet), so there is no
   input global class to modify and no way to know yet what markup Elementor
   will emit for the field. Descendant .elementor-kit-41826s here are markup-agnostic and
   survive whichever form widget is chosen. Revisit when that region lands. */
.elementor .widget-search-row input { flex: 1; }

.elementor .widget--cta input:not([type=button]):not([type=submit]) {
	background: var(--widget-cta-input-bg);
	border-color: var(--widget-cta-input-border);
	color: var(--ink-invert);
}

/* pseudo-element: no global-class form */
.elementor .widget--cta input:not([type=button]):not([type=submit])::placeholder { color: var(--widget-cta-placeholder); }

.elementor .widget--cta input:not([type=button]):not([type=submit]):focus { border-color: var(--indigo); }

/* --- B29 form controls (styles.css 416-432) ----------------------------
   .field / .field label / .req / .hint / .checkbox are CLASSES and became the
   global classes field, field-label, field-req, field-hint, checkbox.
   Everything below is TAG level, so it belongs here: it must also reach markup
   that WordPress, the search form and any form plugin emit.

   DELIBERATE SPLIT WITH SITE SETTINGS. Elementor Theme Style already owns
   font-family/size/weight/line-height, text colour, background and
   border-radius for input+textarea, emitted as
     .elementor-kit-41826 input:not([type=button]):not([type=submit]), textarea
   at specificity (0,3,1). Those properties are NOT restated here, because a
   tag-level rule (0,0,1) would silently lose to it.
   BORDER and PADDING are deliberately owned HERE and were removed from Theme
   Style, so that :hover and :focus (0,1,1) can override them. Left in Theme
   Style at (0,3,1) they would have been unbeatable by a tag-level hover.
   If you ever move border/padding back into the Site Settings UI, the hover and
   focus rules below stop working. */

input, textarea, select {
	width: 100%;
	border: 1px solid var(--border);
	padding: 12px 14px;
	transition: all 200ms ease;
}

/* select is NOT in Elementor's theme-style .elementor-kit-41826 list, so unlike input and
   textarea it gets no font/colour/background/radius from Site Settings and
   needs the full base here. */
select {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-primary);
	background-color: var(--surface);
	border-radius: var(--radius-sm);
}

input::placeholder, textarea::placeholder { color: var(--text-muted); }

input:hover, textarea:hover, select:hover { border-color: var(--gray-800); }

input:focus, textarea:focus, select:focus {
	border-color: var(--indigo);
	box-shadow: var(--focus-ring);
	outline: none;
}

textarea {
	resize: vertical;
	min-height: 150px;
}

/* appearance + the chevron data URI have no UI or global-class form */
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

/* bare-tag descendant of the checkbox class; accent-color is not in the Schema */
.elementor .checkbox input {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	accent-color: var(--indigo);
}

/* --- B29 page header, interior pages (styles.css 434-447) ---------------
   Classes: page-hero, page-hero--center, page-hero-breadcrumbs,
   page-hero-breadcrumb-link, page-hero-breadcrumb-sep, page-hero-title,
   page-hero-lede. The two clamp() sizes are variables
   (page-hero-title-size, page-hero-lede-size) since clamp cannot sit in a prop.

   NOTE page-hero and page-hero--center DO stack on one element but share NO
   property (the base sets border/background/padding, the modifier only
   text-align), so their order is irrelevant. Checked, not assumed.

   Only these two rules need to be here: both retarget a descendant from the
   modifier, which a class cannot do. (0,3,0) beats the flat (0,2,0). */
.elementor .page-hero--center .page-hero-lede { margin-inline: auto; }
.elementor .page-hero--center .page-hero-breadcrumbs { justify-content: center; }

/* --- B29 article body / .prose (styles.css 449-469) ---------------------
   `prose` is the ONLY global class here. Everything else styles arbitrary
   post content -- h2/p/a/ul/ol/li/blockquote/figure/figcaption/code that the
   WordPress editor emits -- and you cannot attach a class to markup you do not
   author. So the whole block lives here as descendant .elementor-kit-41826s.

   max-width:none is here too: the Style Schema types max-width as size only and
   rejects the keyword `none`.

   LIST MARKERS -- read before touching. styles.css line 85 kills markers
   site-wide (`ul,ol{margin:0;padding:0;list-style:none}`) and 458-459 restore
   them inside .prose. That global reset was NEVER ported: an old note claimed
   hello-elementor supplied it, and that is WRONG -- hello only resets lists for
   nav menus and comments, and neither Elementor nor the child theme touches
   list-style. Verified 2026-08-13. So on this site markers are simply browser
   default, which makes the two restore rules below currently redundant. They
   are kept anyway: they are what styles.css says, and they guarantee post
   bullets survive if the global reset is ever added. */

.elementor .prose { max-width: none; }

.elementor .prose > * + * { margin-top: 1.35em; }

/* Paragraphs need a stronger form of the rule directly above. Elementor's
   atomic base stylesheet (base-desktop.css) emits
   `.elementor .e-paragraph-base { margin: 0 }` at the SAME (0,2,0) and
   loads AFTER kit custom CSS, so the flat rule lost on every <p> and the
   article body rendered with zero paragraph spacing. Headings were fine --
   .prose h2 / h3 below are (0,2,1) and already outrank the base reset.
   This targets ONLY paragraphs, so the h2 1.8em / h3 1.6em rules keep
   winning exactly as in styles.css; a blanket bump would have flattened
   them to 1.35em. Found 2026-08-20 building single-post. */
.elementor .prose > * + .e-paragraph-base { margin-top: 1.35em; }

.elementor .prose h2 {
	font-size: 30px;
	letter-spacing: var(--tracking-tight);
	margin-top: 1.8em;
}

.elementor .prose h3 {
	font-size: 22px;
	margin-top: 1.6em;
}

.elementor .prose p { color: var(--prose-text); }

.elementor .prose a {
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--indigo-tint);
	text-underline-offset: 3px;
}

.elementor .prose a:hover { text-decoration-color: var(--indigo); }

.elementor .prose ul,
.elementor .prose ol {
	padding-left: 1.3em;
	display: flex;
	flex-direction: column;
	gap: .5em;
}

.elementor .prose ul li { list-style: disc; }
.elementor .prose ol li { list-style: decimal; }

.elementor .prose ul li::marker,
.elementor .prose ol li::marker { color: var(--indigo); }

.elementor .prose blockquote {
	border-left: 3px solid var(--indigo);
	margin: 0;
	padding: 6px 0 6px 24px;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.elementor .prose figure { margin: 0; }

.elementor .prose figure img {
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

.elementor .prose figcaption {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 10px;
	text-align: center;
}

.elementor .prose code {
	font-family: var(--font-mono);
	font-size: .86em;
	background: var(--gray-100);
	padding: 2px 6px;
	border-radius: var(--radius-xs);
}

/* --- B29 prose: ARIA stand-ins for tags the atomic tree cannot emit -------
   e-div-block tag enum is div/header/section/article/aside/footer/a/button,
   and there is no atomic list, quote or figure widget. So single-post builds
   the bulleted list and the pull quote as divs / paragraphs carrying the
   matching ARIA role. The role is BOTH what a screen reader announces AND
   what these rules hook onto -- never strip one as "decorative markup".
   Values mirror .prose ul / li / blockquote above.
   Decided 2026-08-20: the user chose atomic-only over a v3 text-editor.

   Shape notes. (1) List items are SPANS, not paragraphs, so they inherit
   .prose colour rather than the slightly different .prose p colour, exactly
   as a real <li> does; display:list-item is what draws the marker.
   (2) The list container writes all four padding sides because
   .e-div-block-base carries padding:10px, which a one-sided rule leaves
   standing. (3) The quote is a <p>, and (0,3,0) is what lets it beat
   .elementor .prose p (0,2,1) on colour. */

.elementor .prose [role=list] {
	padding: 0 0 0 1.3em;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .5em;
}

.elementor .prose [role=listitem] {
	display: list-item;
	list-style: disc;
}

.elementor .prose [role=listitem]::marker { color: var(--indigo); }

.elementor .prose [role=blockquote] {
	border-left: 3px solid var(--indigo);
	margin: 0;
	padding: 6px 0 6px 24px;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

/* --- B29 required-field asterisk ---------------------------------------
   styles.css:419 is `.field .req{color:var(--indigo)}`. There IS a
   `field-req` global class, but it can never take effect where the
   asterisk actually lives: e-form-label carries its text as html-v3 inline
   markup (<span class="field-req" aria-hidden="true">*</span>), and the
   per-page global-*-frontend-*.css is FILTERED to classes attached through
   settings.classes -- a class named only inside inline markup is never
   emitted. Kit CSS is emitted whole, so the rule lives here.
   Found 2026-08-20 building single-post. Leave the global class in place
   for any label built from real child elements; this rule is the one that
   serves the inline form, which is how every .field label is built. */
.elementor .field-req { color: var(--indigo); }

/* --- B29 fancy sections (styles.css 471-510) ----------------------------
   Classes: stat-grid, stat, stat-num, stat-num-accent, stat-label,
   feature-list, feature-item, feature-item-ico, feature-item-ico-icon,
   feature-item-title, feature-item-text, cta-band, cta-band-title,
   cta-band-text, cta-band-newsletter-form, cta-band-inner, cta-band-fineprint,
   cta-band-dotgrid.
   NOTE .num/.lbl/.ico/.accent/.inner are bare names REUSED by other components
   with different styling (.author-banner .num, .info-list .ico, .notfound .code
   .accent ...), which is why every one of these is parent-prefixed. */

/* The dotgrid class carries position/inset/opacity; these three cannot: the
   Style Schema has no pointer-events at all, and no gradient or mask form. */
.elementor .cta-band-dotgrid {
	pointer-events: none;
	background-image: radial-gradient(var(--cta-band-dot) 1.4px, transparent 1.4px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 65%);
	        mask-image: linear-gradient(90deg, transparent, #000 65%);
}

/* Input inside a component -- same trap as the sidebar CTA field. A plain
   descendant .elementor-kit-41826 is only (0,3,1), which merely TIES Elementor's theme
   style and would depend on source order; the :not() pair makes it (0,4,1) and
   wins outright. See the form-controls block for the full explanation. */
.elementor .cta-band-newsletter-form input:not([type=button]):not([type=submit]) {
	flex: 1;
	min-width: 220px;
	background: var(--cta-band-input-bg);
	border-color: var(--cta-band-input-border);
	color: var(--ink-invert);
}

.elementor .cta-band-newsletter-form input:not([type=button]):not([type=submit])::placeholder {
	color: var(--cta-band-placeholder);
}

.elementor .cta-band-newsletter-form input:not([type=button]):not([type=submit]):focus {
	border-color: var(--indigo);
}

/* --- B29 team (styles.css 512-529) --------------------------------------
   Classes: team-grid, member, member-photo, member-photo-img, member-body,
   member-title, member-role, member-text, member-socials, member-social,
   member-social-icon. No new variables -- every value was already tokenised.
   `.role` and `.socials` are bare names shared with .author-banner and four
   other components, hence the member- prefix on both. */

/* parent-hover-child */
.elementor .member:hover .member-photo-img { transform: scale(1.04); }

/* --- B29 pagination (styles.css 548-557) --------------------------------
   Classes: pagination, pagination-item. The source styles `a` and `span`
   identically for the base, so ONE shared item class covers both.

   Both rules below are anchor/attribute scoped and have no class form. */

/* Anchor-scoped hover, exactly like the chip rules above: a span in the
   pagination (the current page, an ellipsis) must NOT react to hover, and a
   class hover variant cannot express the `a.` qualifier.
   (0,3,1) beats the flat .elementor .pagination-item (0,2,0). */
.elementor a.pagination-item:hover {
	border-color: var(--indigo);
	color: var(--indigo);
}

/* Attribute .elementor-kit-41826s have no global-class form at all. (0,3,0) beats the base
   (0,2,0), so the current page wins -- and it stays BELOW the anchor hover
   (0,3,1), which is exactly the relationship styles.css has: there the hover is
   (0,2,1) and the attribute rule (0,2,0). In the mockup [aria-current] sits on a
   <span>, so the hover never applies to it anyway.
   NOTE: if pagination is ever built with an Elementor Pro posts widget, that
   markup uses `.page-numbers.current` rather than [aria-current] -- this
   .elementor-kit-41826 would then need revisiting. */
.elementor .pagination [aria-current=page] {
	background: var(--indigo);
	border-color: var(--indigo);
	color: var(--ink-invert);
}

/* --- B29 contact (styles.css 567-578) -----------------------------------
   Classes: contact-grid, contact-card, info-list, info-list-item,
   info-list-ico, info-list-ico-icon, info-list-label, info-list-value,
   info-list-value-link, form-note. No new variables.

   `.info-list` is a real <ul> in the mockup -- the FIRST genuine list the port
   has had to handle. styles.css:85 kills markers site-wide, but that reset was
   never ported (see the base-reset note), and `list-style` does NOT exist in
   the Style Schema, so a class cannot express it. This one line makes the
   semantic <ul>/<li> build safe; it is a harmless no-op if the list is built
   with div-blocks instead, which is what the header and footer did.
   The indent is handled by the class itself (padding: 0). */
.elementor .info-list { list-style: none; }

/* --- B29 reduced motion (styles.css line 661) --------------------------
   Ported as ONE unit. This REPLACES the two per-component guards that were
   previously inlined with the hero and card hover rules -- do not re-add them.

   The `transform: none` list is deliberately separate from the blanket
   transition kill: transform is the END STATE of those hover effects, not a
   transition, so switching transitions off would leave the image scaled.

   The first four .elementor-kit-41826s are ported from the source and have been checked
   against the built components: .card/.card-media-img, .feature-card, .tile
   and .cat all match real global-class labels, and the three img-based ones
   target genuine <img> elements.

   DELIBERATE ADDITIONS -- .post-row and .member are NOT in the styles.css list. That is an
   oversight in the source: .post-row:hover .media img scales to 1.05, and as
   explained above the blanket transition kill does NOT undo an end-state
   transform, so a reduced-motion user still got the zoom. Added on the user's
   approval 2026-08-13. Do not remove it to 'match the source'; sync the source
   instead. */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	.elementor .card:hover .card-media-img,
	.elementor .feature-card:hover img,
	.elementor .tile:hover img,
	.elementor .cat:hover img,
	.elementor .post-row:hover .post-row-media-img,
	.elementor .member:hover .member-photo-img {
		transform: none;
	}
}/* End custom CSS */