has an inline background * image, its natural aspect can push content below the fold on short or * wide viewports. Honor the designer's intent (full-bleed image) by * pinning the hero to one screen and cropping the image via object-fit. * * --site-header-height: override on or :root to match the actual * sticky header height (default 80px). */ main > .module-container:first-child:has(.module-container__bg-img) { height: calc(100svh - var(--site-header-height, 80px)); } main > .module-container:first-child > .module-container__bg-img { display: block; width: 100%; height: 100%; } main > .module-container:first-child > .module-container__bg-img > img { width: 100%; /* Beat Bootstrap's .h-auto (which is height:auto !important) so the hero image cover-fills the pinned viewport box on mobile. */ height: 100% !important; object-fit: cover; object-position: center; display: block; } /* Hero row packing: on mobile the two columns wrap to separate flex lines and stretch by default, so .align-items-end has no visible effect. align-content:end packs both wrapped lines to the bottom of the absolutely-positioned inner, matching the desktop intent. */ @media (max-width: 991.98px) { main > .module-container:first-child .module-container__inner > .row.align-items-end { align-content: end; } } .module-column { /* Width is controlled by Bootstrap col-* classes; don't override here. */ top: var(--col-top-mobile, auto); bottom: var(--col-bottom-mobile, auto); left: var(--col-left-mobile, auto); right: var(--col-right-mobile, auto); transform: translateY(var(--col-shift-mobile, 0)); } /* Auto-center absolute-positioned columns on mobile only */ @media (max-width: 991.98px) { .module-column.position-absolute { left: 0; right: 0; margin-left: auto; margin-right: auto; } /* Also center relative columns that have a fixed mobile width */ .module-column.position-relative { margin-left: auto; margin-right: auto; } } .module-heading-block { width: var(--heading-width-mobile, auto); /* Let modern browsers auto-balance multi-line headlines so each breakpoint gets a sensible wrap without manual
tags. Falls back to normal wrapping in older browsers. */ text-wrap: balance; } @media (max-width: 991.98px) { .module-heading-block.text-center { margin-left: auto; margin-right: auto; } .module-heading-block.text-end { margin-left: auto; margin-right: 0; } .module-heading-block.text-start { margin-left: 0; margin-right: auto; } } .module-body-copy { width: var(--body-width-mobile, auto); top: var(--body-top-mobile, auto); bottom: var(--body-bottom-mobile, auto); left: var(--body-left-mobile, auto); right: var(--body-right-mobile, auto); } @media (max-width: 991.98px) { .module-body-copy.text-center { margin-left: auto; margin-right: auto; } .module-body-copy.text-end { margin-left: auto; margin-right: 0; } .module-body-copy.text-start { margin-left: 0; margin-right: auto; } } /* Four Photo Gallery - 5-column desktop support */ .col-lg-5ths { flex: 0 0 auto; } @media (min-width: 992px) { .col-lg-5ths { width: 20%; } .module-four-photo-gallery > .col-lg-5ths { width: 20%; } } @media (min-width: 992px) { .position-lg-absolute { position: absolute !important; } .module-column { /* Width is controlled by Bootstrap col-{bp}-* classes; don't override here. */ top: var(--col-top-desktop, var(--col-top-mobile, auto)); bottom: var(--col-bottom-desktop, var(--col-bottom-mobile, auto)); left: var(--col-left-desktop, var(--col-left-mobile-fallback, var(--col-left-mobile, auto))); right: var(--col-right-desktop, var(--col-right-mobile-fallback, var(--col-right-mobile, auto))); transform: translateY(var(--col-shift-desktop, var(--col-shift-mobile, 0))); } .module-column.position-absolute.col-center-x { left: 0; right: 0; margin-left: auto; margin-right: auto; } .module-heading-block { width: var(--heading-width-desktop, var(--heading-width-mobile, auto)); } .module-heading-block.text-lg-center { margin-left: auto; margin-right: auto; } .module-heading-block.text-lg-end { margin-left: auto; margin-right: 0; } .module-heading-block.text-lg-start { margin-left: 0; margin-right: auto; } .module-body-copy { width: var(--body-width-desktop, var(--body-width-mobile, auto)); top: var(--body-top-desktop, var(--body-top-mobile, auto)); bottom: var(--body-bottom-desktop, var(--body-bottom-mobile, auto)); left: var(--body-left-desktop, var(--body-left-mobile, auto)); right: var(--body-right-desktop, var(--body-right-mobile, auto)); } .module-body-copy.text-lg-center { margin-left: auto; margin-right: auto; } .module-body-copy.text-lg-end { margin-left: auto; margin-right: 0; } .module-body-copy.text-lg-start { margin-left: 0; margin-right: auto; } /* ® and ™ auto-wrapped in ^{via functions.php */
sup.legal-mark {
font-size: 0.55em;
vertical-align: super;
line-height: 0;
}

.font-lg-50 { font-size: 50px; line-height: normal; }
zzzzzz .font-lg-40 { font-size: 40px; line-height: normal; }
.font-lg-30 { font-size: 30px; line-height: 45px; }
.font-lg-25 { font-size: 25px; line-height: normal; }
.font-lg-24 { font-size: 24px; line-height: normal; }
.font-lg-21 { font-size: 21px; line-height: 30px; }
.font-lg-16 { font-size: 16px; line-height: 29px; }

.font-lg-300 { font-weight: 300; }
.font-lg-400 { font-weight: 400; }
.font-lg-600 { font-weight: 600; }
.font-lg-700 { font-weight: 700; }

.font-lg-italic { font-style: italic; }

.barlow { font-family: var(--font-primary); }

/* --------------------------------------------------
RESPONSIVE HERO FONT SCALING
Scales Barlow font sizes fluidly in the first
.module-container of (hero banner area),
limited to absolute-positioned columns.
Design reference: 1440px wide.
Formula: vw = design_px / 14.4
Clamp range: 992px (min) → 2560px (max)
-------------------------------------------------- */
main > .module-container:first-child .module-column.position-absolute .barlow.font-lg-50,
main > .module-container:first-child .module-column.position-lg-absolute .barlow.font-lg-50 {
font-size: clamp(34px, 3.47vw, 89px); /* overridden below if .no-responsive-text */
line-height: 1.1;
}
main > .module-container:first-child .module-column.position-absolute .barlow.font-lg-40,
main > .module-container:first-child .module-column.position-lg-absolute .barlow.font-lg-40 {
font-size: clamp(28px, 2.78vw, 71px);
line-height: 1.1;
}
main > .module-container:first-child .module-column.position-absolute .barlow.font-lg-30,
main > .module-container:first-child .module-column.position-lg-absolute .barlow.font-lg-30 {
font-size: clamp(22px, 2.08vw, 53px);
line-height: 1.5;
}
main > .module-container:first-child .module-column.position-absolute .barlow.font-lg-25,
main > .module-container:first-child .module-column.position-lg-absolute .barlow.font-lg-25 {
font-size: clamp(18px, 1.74vw, 44px);
line-height: 1.2;
}
main > .module-container:first-child .module-column.position-absolute .barlow.font-lg-21,
main > .module-container:first-child .module-column.position-lg-absolute .barlow.font-lg-21 {
font-size: clamp(16px, 1.46vw, 37px);
line-height: 1.43;
}

/* Opt-out: column has disable_responsive_text checked — restore fixed sizes */
main > .module-container:first-child .module-column.no-responsive-text .barlow.font-lg-50 { font-size: 50px; line-height: normal; }
main > .module-container:first-child .module-column.no-responsive-text .barlow.font-lg-40 { font-size: 40px; line-height: normal; }
main > .module-container:first-child .module-column.no-responsive-text .barlow.font-lg-30 { font-size: 30px; line-height: 45px; }
main > .module-container:first-child .module-column.no-responsive-text .barlow.font-lg-25 { font-size: 25px; line-height: normal; }
main > .module-container:first-child .module-column.no-responsive-text .barlow.font-lg-21 { font-size: 21px; line-height: 30px; }
}

/* --------------------------------------------------
FADING SLIDES BLOCK
-------------------------------------------------- */

/* Prevent Owl from collapsing to 0 height during fade transitions */
.podsearch-fading-slides.owl-carousel .owl-stage-outer {
overflow: visible;
}
/* Clip overflow at the carousel wrapper so the visible stage-outer doesn't
cause a horizontal scrollbar on the page */
.podsearch-fading-slides.owl-carousel {
overflow: hidden;
}
.podsearch-fading-slides.owl-carousel .owl-item {
/* Items stack via Owl's own absolute positioning during animation */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.podsearch-fading-slides .fading-slide {
width: 100%;
}

/* Carousel variation: mobile 1-up, desktop 3-up with optional arrows */
.podsearch-fading-slides--cards .owl-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin-top: 18px;
}
.podsearch-fading-slides--cards .owl-nav button.owl-prev,
.podsearch-fading-slides--cards .owl-nav button.owl-next {
background: transparent !important;
color: #fff !important;
font-size: 64px !important;
line-height: 1;
padding: 0 6px !important;
margin: 0;
opacity: 0.95;
transition: opacity 0.2s ease;
}
.podsearch-fading-slides--cards .owl-nav button.owl-prev:hover,
.podsearch-fading-slides--cards .owl-nav button.owl-next:hover {
opacity: 1;
}
.podsearch-fading-slides--cards .podsearch-fading-slides__nav-label {
display: inline-block;
font-family: var(--font-condensed);
font-size: 54px;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}

@media (max-width: 1199.98px) {
.podsearch-fading-slides--cards .owl-nav button.owl-prev,
.podsearch-fading-slides--cards .owl-nav button.owl-next {
font-size: 48px !important;
}
.podsearch-fading-slides--cards .podsearch-fading-slides__nav-label {
font-size: 38px;
}
}

@media (max-width: 767.98px) {
.podsearch-fading-slides--cards .owl-nav {
gap: 10px;
margin-top: 12px;
}
.podsearch-fading-slides--cards .owl-nav button.owl-prev,
.podsearch-fading-slides--cards .owl-nav button.owl-next {
font-size: 34px !important;
}
.podsearch-fading-slides--cards .podsearch-fading-slides__nav-label {
font-size: 16px;
letter-spacing: 0.07em;
}
}

/* --------------------------------------------------
INLINE ANCHOR HIGHLIGHT
Applies only to anchors inside body copy / rich text
(not nav, buttons, or CTAs). Resting state: accent
underline. Hover/focus: accent wipes behind text.
-------------------------------------------------- */
.module-body-copy a:not(.btn):not(.btn-cta):not(.button),
.entry-content a:not(.btn):not(.btn-cta):not(.button) {
color: inherit;
text-decoration: underline;
}

/* --------------------------------------------------
POST PAGINATION (single.php)
-------------------------------------------------- */

.post-pagination {
padding: 60px 20px;
border-top: 1px solid rgba(0, 0, 0, 0.15);
color: var(--color-primary);
}

.post-pagination__inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}

.post-pagination__item--prev {
justify-self: start;
}

.post-pagination__item--next {
justify-self: end;
}

.post-pagination__link {
display: inline-flex;
align-items: center;
gap: 16px;
text-decoration: none;
color: var(--color-primary);
font-family: var(--font-primary);
}

.post-pagination__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
transition: transform 0.2s ease;
}

.post-pagination__icon svg {
width: 100%;
height: 100%;
display: block;
}

.post-pagination__link:hover .post-pagination__icon {
transform: translateX(-4px);
}

.post-pagination__link--next:hover .post-pagination__icon {
transform: translateX(4px);
}

.post-pagination__text {
display: flex;
flex-direction: column;
line-height: 1.3;
}

.post-pagination__link--next .post-pagination__text {
text-align: right;
}

.post-pagination__label {
font-size: 14px;
font-weight: 400;
opacity: 0.7;
margin-bottom: 2px;
}

.post-pagination__title {
font-size: 18px;
font-weight: 600;
}

@media (max-width: 767.98px) {
.post-pagination__inner {
gap: 16px;
}
.post-pagination__title {
display: none;
}
.post-pagination__label {
font-size: 13px;
}
}

/* --------------------------------------------------
MEDIA QUERIES (BOOTSTRAP 5)
-------------------------------------------------- */

@media (max-width: 991.98px) {
.faq-col-left {
border-right: none;
padding-right: 0;
padding-bottom: 40px;
}

.faq-col-right {
padding-left: 0;
}

.faq-question {
font-family: var(--font-condensed);
}

.faq-answer {
font-family: var(--font-condensed);
}

.hero-block__content-wrap {
top: var(--hero-m-top, 20%);
left: var(--hero-m-left, 50%);
width: var(--hero-m-width, 90%);
text-align: var(--hero-m-align, center);
transform: translateX(-50%);
}

.hero-block__cta-group {
gap: 12px;
margin-top: 24px;
}

.btn-lg {
min-height: 32px;
padding: 8px 18px;
font-size: 11px;
}

.btn-sm {
min-height: 32px;
padding: 8px 18px;
font-size: 11px;
}
}

/* --------------------------------------------------
PRINT (MODERNIZED)
-------------------------------------------------- */

@media print {
body {
background: #fff !important;
color: #000 !important;
}

.site-header,
.hero,
.site-header__nav,
.site-header__menu-toggle,
.site-header__search-toggle {
display: none !important;
}

a::after {
content: " (" attr(href) ")";
font-size: 12px;
}

img {
max-width: 100% !important;
height: auto !important;
}
}

/* ==================================================
SPACER (divider block in spacer mode)
================================================== */

.module-spacer {
width: 100%;
flex-shrink: 0;
height: var(--spacer-h-mobile, 0);
}
@media (min-width: 992px) {
.module-spacer {
height: var(--spacer-h-desktop, 0);
}
}

/* A column that only contains a spacer should always span the full row width */
.module-column:has(> .module-spacer:only-child) {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}

/* CTA GROUP FLEX LAYOUTS */
.cta-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 991.98px) {
.cta-group {
margin-bottom: 16px;
}
}
.cta-group-inline {
flex-direction: row;
justify-content: flex-start;
}
.cta-group-stacked {
flex-direction: column;
align-items: stretch;
}
.cta-group > div {
/* Each CTA wrapper spans the full row so its `text-start | text-center |
text-end` utility (and any inherited text-align from the parent
column) actually positions the inline button. */
width: 100%;
margin: 0 !important;
}
/* Inline variant: keep wrappers shrink-to-fit and let the group control
horizontal placement via justify-content. */
.cta-group-inline > div {
width: auto;
}
@media (max-width: 600px) {
.cta-group-inline {
flex-direction: column;
align-items: center;
}
}
/* ==================================================
SITE HEADER � MAIN NAV DROPDOWN PANEL
================================================== */
.site-header__panel {
position: absolute;
top: calc(100% + 18px);
right: 0;
width: 280px;
background: #071049;
color: #fff;
padding: 24px 28px 20px;
z-index: 1001;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
border: solid 1px #ffffff;
border-radius: 10px;
}

.site-header__panel .menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}

.site-header__panel .menu li {
margin: 0;
padding: 0;
}

.site-header__panel .menu a {
display: inline-block;
padding: 8px 0;
font-family: var(--font-condensed);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
line-height: 1.2;
transition: color 0.15s ease;
}

.site-header__panel .menu a:hover,
.site-header__panel .menu a:focus,
.site-header__panel .menu .current-menu-item > a,
.site-header__panel .menu .current_page_item > a {
color: var(--color-accent, #ffbb00);
}

.site-header__panel-cta {
display: block;
width: 100%;
background: transparent;
border: 0;
padding: 4px 0 10px;
text-align: right;
font-family: var(--font-condensed);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent, #ffbb00);
line-height: 1.2;
cursor: pointer;
}
.site-header__panel-cta:hover,
.site-header__panel-cta:focus {
color: #fff;
outline: 0;
}

.site-header__panel-phone {
display: block;
padding: 6px 0 14px;
text-align: right;
font-family: var(--font-condensed);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--color-accent, #ffbb00);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 8px;
}
.site-header__panel-phone:hover,
.site-header__panel-phone:focus {
color: #fff;
}

.site-header__panel-close {
display: block;
margin: 12px 0 0 auto;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 0;
color: #fff;
cursor: pointer;
}
.site-header__panel-close:hover,
.site-header__panel-close:focus {
color: var(--color-accent, #ffbb00);
outline: 0;
}
.site-header__panel-close svg {
width: 100%;
height: 100%;
display: block;
}

@media (max-width: 991px) {
.site-header__panel {
left: 50%;
right: auto;
transform: translateX(-50%);
width: min(92vw, 320px);
}
.site-header__panel-close {
margin-left: auto;
margin-right: 0;
}
}

/* Light search panel variant */
.site-header__panel--search {
width: 420px;
background: #fff;
color: #071049;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(7, 16, 73, 0.08);
}
.site-header__panel--search .site-header__panel-inner {
display: flex;
flex-direction: column;
gap: 12px;
}
.site-header__panel--search .site-header__panel-close {
color: #071049;
}
.site-header__panel--search .site-header__panel-close:hover,
.site-header__panel--search .site-header__panel-close:focus {
color: var(--color-accent, #ffbb00);
}
.site-header__panel--search form {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
}
.site-header__panel--search input[type="text"],
.site-header__panel--search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
padding: 10px 14px;
border: 1px solid rgba(7, 16, 73, 0.2);
border-radius: 4px;
font-family: var(--font-primary);
font-size: 15px;
color: #071049;
background: #fff;
}
.site-header__panel--search input[type="text"]:focus,
.site-header__panel--search input[type="search"]:focus {
outline: none;
border-color: var(--color-accent, #ffbb00);
}
.site-header__panel--search button[type="submit"] {
flex: 0 0 auto;
background: var(--color-accent, #ffbb00);
color: #071049;
border: 0;
border-radius: 4px;
padding: 10px 14px;
font-family: var(--font-condensed);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
.site-header__panel--search .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

@media (max-width: 991px) {
.site-header__panel--search {
width: min(92vw, 420px);
}
}

/* ==================================================
SEARCH RESULTS PAGE
================================================== */
.search-results-page {
padding-top: 200px;
}
.search-results-eyebrow {
font-family: var(--font-condensed);
font-size: 13px;
letter-spacing: 0.18em;
color: #071049;
opacity: 0.7;
}
.search-results-query {
font-family: var(--font-condensed);
font-weight: 700;
font-size: clamp(28px, 4vw, 44px);
color: #071049;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.search-results-form {
max-width: 560px;
}
.search-results-form form {
display: flex;
gap: 8px;
align-items: center;
}
.search-results-form input[type="text"],
.search-results-form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
padding: 12px 16px;
border: 1px solid rgba(7, 16, 73, 0.2);
border-radius: 4px;
font-family: var(--font-primary);
font-size: 16px;
color: #071049;
background: #fff;
}
.search-results-form input[type="text"]:focus,
.search-results-form input[type="search"]:focus {
outline: none;
border-color: var(--color-accent, #ffbb00);
}
.search-results-form button[type="submit"] {
flex: 0 0 auto;
background: var(--color-accent, #ffbb00);
color: #071049;
border: 0;
border-radius: 4px;
padding: 12px 18px;
font-family: var(--font-condensed);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
.search-results-count {
font-family: var(--font-condensed);
letter-spacing: 0.16em;
font-size: 13px;
color: #071049;
opacity: 0.7;
}
.search-result-card {
background: #fff;
border: 1px solid rgba(7, 16, 73, 0.08);
border-radius: 4px;
color: #071049;
text-decoration: none;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.search-result-card:hover,
.search-result-card:focus {
box-shadow: 0 10px 28px rgba(7, 16, 73, 0.12);
transform: translateY(-2px);
color: #071049;
}
.search-result-card__media {
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
background: #f5f5f5;
}
.search-result-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.search-result-card__body {
padding: 20px 22px 24px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.search-result-card__type {
font-family: var(--font-condensed);
font-size: 12px;
letter-spacing: 0.18em;
color: var(--color-accent, #ffbb00);
margin: 0;
}
.search-result-card__title {
font-family: var(--font-condensed);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #071049;
}
.search-result-card:hover .search-result-card__title {
color: var(--color-accent, #ffbb00);
}
.search-result-card__excerpt {
font-family: var(--font-primary);
font-size: 15px;
line-height: 1.55;
color: #333;
}
.search-results-pagination {
display: flex;
justify-content: center;
}
.search-results-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
margin: 0 4px;
border: 1px solid rgba(7, 16, 73, 0.2);
border-radius: 4px;
font-family: var(--font-condensed);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #071049;
text-decoration: none;
}
.search-results-pagination .page-numbers.current,
.search-results-pagination .page-numbers:hover {
background: var(--color-accent, #ffbb00);
border-color: var(--color-accent, #ffbb00);
color: #071049;
}
.search-results-empty {
color: #071049;
}
.search-results-empty h2 {
font-family: var(--font-condensed);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}

@media (max-width: 991px) {
.search-results-page {
padding-top: 200px;
}
}

/* ==================================================
ARCHIVE PAGES (blog / story / category / tag / etc.)
Bootstrap grid: col-12 col-lg-3 standard, col-lg-6 featured
Container target: 1275px + 24px (gutter allowance) = 1299px max
================================================== */
.archive-page {
padding: 64px 15px;
background: #ffffff;
}
.archive-container {
max-width: 1299px;
width: 100%;
margin-left: auto;
margin-right: auto;
}

/* Page title */
.archive-header {
margin-bottom: 40px;
}
.archive-title {
width: 100%;
max-width: 770px;
margin: 0 auto;
color: #000;
text-align: center;
font-family: var(--font-bricolage);
font-size: 50px;
font-weight: 400;
line-height: normal;
}

/* Grid row � Bootstrap gx-4 gy-4 already provides 24px gutters both axes */
.archive-row {
margin-bottom: 0;
}

/* -------- Archive card (standard, col-lg-3) -------- */
.archive-card {
margin-bottom: 24px;
}
.archive-card__inner {
background: #FFF;
padding: 24px 10px;
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}

/* Category link at the top */
.archive-card__category {
display: block;
max-width: 100%;
color: var(--color-grey-2, #5F5F5F);
text-align: center;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
text-decoration: none;
}
.archive-card__category:hover {
color: #000;
}

/* Divider */
.archive-card__divider {
width: 100%;
max-width: 220px;
height: 1px;
background: var(--color-grey-4, #CDCDCD);
border: 0;
opacity: 1;
margin: 10px auto;
}

/* Title */
.archive-card__title {
width: 100%;
max-width: 246px;
margin: 0 auto;
color: #000;
text-align: center;
font-family: var(--font-sans);
font-size: 35px;
font-weight: 300;
line-height: 37px;
text-transform: none;
}
.archive-card__title a {
color: inherit;
text-decoration: none;
}
.archive-card__title a:hover {
color: var(--color-accent, #FFBB00);
}

/* Attribution */
.archive-card__attribution {
width: 100%;
max-width: 280px;
margin: 10px auto 16px;
color: var(--color-grey-2, #5F5F5F);
text-align: center;
font-family: var(--font-sans);
font-size: 15px;
font-style: italic;
font-weight: 300;
line-height: normal;
}

/* Feature image � pinned to bottom of flex card so all cards align evenly */
.archive-card__image {
position: relative;
display: block;
width: 100%;
max-width: 300px;
height: 260px;
margin: auto auto 0; /* push to bottom of card */
background: #FFF;
overflow: hidden;
text-decoration: none;
}
.archive-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Badge (Popular / New / etc.) � tab-shape at bottom center of image */
.archive-card__badge {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 101px;
height: 19px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 15px 15px 0 0;
background: var(--color-accent, #FFBB00);
color: #000;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
letter-spacing: 0.04em;
z-index: 2;
}

/* -------- Featured card (col-lg-6) — two nested columns -------- */
.archive-card--featured .archive-card__inner {
display: flex !important;
flex-direction: row;
align-items: stretch;
padding: 0;
background: #FFF;
min-height: 500px;
}
.archive-card--featured .archive-card__media {
flex: 0 0 50%;
max-width: 50%;
display: block;
background: #D9D9D9;
position: relative;
}
.archive-card--featured .archive-card__media .archive-card__image {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
margin: 0;
}
.archive-card--featured .archive-card__media .archive-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.archive-card--featured .archive-card__body {
flex: 1 1 50%;
max-width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 24px 16px;
gap: 6px;
}
.archive-card--featured .archive-card__body > * {
width: 100%;
max-width: 280px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
.archive-card--featured .archive-card__divider { max-width: 220px; }
.archive-card--featured .archive-card__title { max-width: 100%; }

/* Featured card's post tag color — red variant */
.archive-card--featured .archive-card__badge {
background: var(--color-warning, #F00);
color: #fff;
}

/* Excerpt */
.archive-card__excerpt {
width: 100%;
max-width: 268px;
margin: 14px auto 0;
color: #000;
text-align: center;
font-family: var(--font-sans);
font-size: 21px;
font-weight: 400;
line-height: 26px;
}
.archive-card__excerpt p { margin: 0 0 8px; }
.archive-card__excerpt p:last-child { margin-bottom: 0; }

/* Read more link */
.archive-card__readmore {
display: inline-block;
width: 100%;
max-width: 280px;
margin: 10px auto 0;
color: #000;
text-align: center;
font-family: var(--font-sans);
font-size: 15px;
font-style: italic;
font-weight: 300;
line-height: normal;
text-decoration: underline;
}
.archive-card__readmore:hover {
color: var(--color-accent, #FFBB00);
}

/* -------- Custom search block placeholder (col-lg-6) -------- */
.archive-custom-search {
margin-bottom: 24px;
}
.archive-custom-search__inner {
background: #FFF;
min-height: 500px;
}

/* -------- Load More -------- */
.archive-loadmore {
margin-top: 30px;
}
.archive-loadmore__btn {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
padding: 10px 20px;
cursor: pointer;
color: #000;
font-family: var(--font-sans);
font-size: 21px;
font-weight: 400;
line-height: 30px;
text-align: center;
}
.archive-loadmore__btn:hover {
color: var(--color-accent, #FFBB00);
}
.archive-loadmore__icon {
display: inline-flex;
width: 32px;
height: 32px;
aspect-ratio: 1 / 1;
line-height: 0;
}
.archive-loadmore__icon svg {
width: 100%;
height: 100%;
display: block;
}
.archive-loadmore__btn.is-loading {
opacity: 0.5;
cursor: wait;
}

/* -------- Responsive: mobile/tablet -------- */
@media (max-width: 991.98px) {
.archive-card__inner { min-height: 0; }
.archive-card--featured .archive-card__inner {
display: flex !important;
flex-direction: column;
min-height: 0;
}
.archive-card--featured .archive-card__media,
.archive-card--featured .archive-card__body {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
.archive-card--featured .archive-card__media .archive-card__image {
height: 260px;
}
.archive-card--featured .archive-card__body {
padding: 16px 16px 24px;
}
.archive-title { font-size: 36px; }
}

/* Edge-to-edge feature images (no card padding around the image) */
.archive-card__inner { padding: 24px 0 0; }
.archive-card__image {
max-width: 100%;
width: 100%;
}
.archive-card__category,
.archive-card__divider,
.archive-card__title,
.archive-card__attribution,
.archive-card__excerpt,
.archive-card__readmore {
padding-left: 10px;
padding-right: 10px;
}

/* First row: standard cards match featured card height; image fills remainder */
@media (min-width: 992px) {
.archive-row > .archive-card:nth-child(2) .archive-card__inner,
.archive-row > .archive-card:nth-child(3) .archive-card__inner {
min-height: 500px;
}
.archive-row > .archive-card:nth-child(2) .archive-card__image,
.archive-row > .archive-card:nth-child(3) .archive-card__image {
flex: 1 1 auto;
height: auto;
min-height: 260px;
align-self: stretch;
max-width: 100%;
}
}

/* ==================================================================
CTA Button Block — pill variants
Style values map to (set in modules/cta-button-block.php):
pill-icon-grey/blue/white -> .btn-cta.btn-cta-icon.btn-cta-{color}
pill-grey/blue/white -> .btn-cta.btn-cta-pill.btn-cta-{color}
Base .btn-cta rules above still apply for any legacy buttons.
================================================================== */

/* Pill shape (no icon) */
.btn-cta.btn-cta-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
min-height: 32px;
border-radius: 999px;
border: 1px solid transparent;
font-family: 'Geist', sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.33;
text-decoration: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Pill with icon */
.btn-cta.btn-cta-icon {
display: inline-flex;
align-items: center;
padding: 8px 16px;
min-height: 32px;
border-radius: 999px;
border: 1px solid transparent;
font-family: 'Geist', sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.33;
text-decoration: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-cta.btn-cta-icon .btn-cta__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding-right: 16px;
}

.btn-cta.btn-cta-icon .btn-cta__icon img {
display: block;
height: 16px;
width: auto;
}

.btn-cta .btn-cta__label {
display: inline-block;
}

/* Color variants -- shared across pill and pill-icon */
.btn-cta.btn-cta-grey {
background-color: #303a3b;
border-color: #303a3b;
color: #ffffff;
}
.btn-cta.btn-cta-grey:hover,
.btn-cta.btn-cta-grey:focus-visible {
background-color: #1f2728;
border-color: #1f2728;
color: #ffffff;
}

.btn-cta.btn-cta-blue {
background-color: #2E6AEA;
border-color: #2E6AEA;
color: #ffffff;
}
.btn-cta.btn-cta-blue:hover,
.btn-cta.btn-cta-blue:focus-visible {
background-color: #1F58D6;
border-color: #1F58D6;
color: #ffffff;
}

.btn-cta.btn-cta-white {
background-color: #ffffff;
border-color: #e5e5e5;
color: #222222;
}
.btn-cta.btn-cta-white:hover,
.btn-cta.btn-cta-white:focus-visible {
background-color: #f1f1f1;
border-color: #e5e5e5;
color: #222222;
}

/* Light Blue pill (and pill-with-icon).
Uses Geist semibold 12px #0A0A0A on a soft blue tint. */
.btn-cta.btn-cta-blue-light {
background-color: #EFF3FE;
border-color: #EFF3FE;
color: #0A0A0A;
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 12px;
}
.btn-cta.btn-cta-blue-light:hover,
.btn-cta.btn-cta-blue-light:focus-visible {
background-color: #E0E8FC;
border-color: #E0E8FC;
color: #0A0A0A;
}

/* Semi-transparent pill (and pill-with-icon).
White at 16% opacity bg on any background; white Geist semibold 12px.
Use a white SVG for the icon. */
.btn-cta.btn-cta-semi {
background-color: rgba(255, 255, 255, 0.16);
border-color: transparent;
color: #ffffff;
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 12px;
}
.btn-cta.btn-cta-semi:hover,
.btn-cta.btn-cta-semi:focus-visible {
background-color: rgba(255, 255, 255, 0.24);
border-color: transparent;
color: #ffffff;
}

/* Mobile: tighten pills so long labels fit the viewport */
@media (max-width: 575.98px) {
.btn-cta.btn-cta-pill,
.btn-cta.btn-cta-icon {
max-width: 100%;
padding: 6px 12px;
}
.btn-cta.btn-cta-icon .btn-cta__icon {
padding-right: 8px;
}
.btn-cta.btn-cta-icon .btn-cta__icon img {
height: 14px;
}
/* No-link CTA (rendered as ): use 10px on mobile */
span.btn-cta.btn-cta-pill,
span.btn-cta.btn-cta-icon {
font-size: 10px;
}
}

/* ==================================================================
Accordion Block
- Repeater of items. First item open on load. One open at a time.
- Closed item: white bg, black icon + title.
- Open item: #eff3fe bg, blue (#2e6aea) icon + title, body shown.
- Icons use mask-image so the SVG is tinted by currentColor.
- Open/close: body slides via max-height; bg-color fades AFTER the
slide when opening (delay), fades immediately when closing.
================================================================== */

.accordion-block {
width: 100%;
}

.accordion-item {
background-color: #ffffff;
border-radius: 0;
overflow: hidden;
color: #000000;
/* Closing: bg fades out immediately (no delay). */
transition: background-color 250ms ease;
}

.accordion-item:first-child {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}

.accordion-item:last-child {
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}

.accordion-item + .accordion-item {
margin-top: 16px;
}

.accordion-item.is-open {
background-color: #EFF3FE;
color: #2E6AEA;
/* Opening: bg fades in AFTER the body slides down. */
transition: background-color 250ms ease 250ms;
}

.accordion-item__header {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 20px 24px;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
color: inherit;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.2;
}

.accordion-item__header:focus-visible {
outline: 2px solid #2E6AEA;
outline-offset: -2px;
}

.accordion-item__icon {
display: inline-block;
flex: 0 0 24px;
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask-image: var(--accordion-icon);
mask-image: var(--accordion-icon);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}

.accordion-item__title {
color: inherit;
}

.accordion-item__body {
overflow: hidden;
max-height: 0;
transition: max-height 250ms ease;
}

.accordion-item.is-open .accordion-item__body {
/* JS sets an explicit max-height for the slide, then clears it
after the transition so content can reflow at any size.
Empty placeholder kept for documentation purposes. */
max-height: none;
}

.accordion-item__body-inner {
padding: 0 24px 20px 24px;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #777777;
text-align: left;
}

/* ==================================================================
Accordion + side image layout
Used when the accordion block has an Image set. Stacks on mobile;
at lg+ the accordion takes ~40% on the left and the image fills
the remaining space with a 48px gap.
================================================================== */

.accordion-with-image {
width: 100%;
}

.accordion-with-image > .angled-image,
.accordion-with-image > .angled-image-stack {
margin-top: 32px;
}

@media (min-width: 992px) {
.accordion-with-image {
display: flex;
align-items: flex-start;
}
.accordion-with-image > .accordion-block {
flex: 0 0 40%;
max-width: 40%;
}
.accordion-with-image > .angled-image,
.accordion-with-image > .angled-image-stack {
flex: 1 1 auto;
min-width: 0;
margin-top: 0;
margin-left: 48px;
}
}

/* ==================================================================
Angled Image Block
Two layouts share the same markup:
1) Unbordered (left/right/bottom/left_tall/right_tall):
Outer container is mask-clipped to an SVG shape and filled
white. Inner image is mask-clipped to the SAME shape; CSS
padding (16/24px) makes the inner box smaller, creating a
constant-width white frame that follows the angled edge.
2) Bordered (left_border, right_border):
Outer container is NOT masked. Instead the bordered SVG
(white fill + #e5e5e5 1px stroke) is drawn as the background.
Inner image is mask-clipped to a SEPARATE "inner" SVG path so
only the image area shows, sitting inside the stroked frame.
CSS variables (--shape-mask / --shape-mask-inner / --shape-bg-image
etc.) are set per shape modifier. LG variants (.angled-image--lg-*)
re-assign the same variables inside a media query so the user can
choose a different shape per breakpoint.
================================================================== */

.angled-image {
--shape-mask: none;
--shape-mask-inner: var(--shape-mask);
--shape-aspect: 1 / 1;
--shape-padding: 16px;
--shape-bg-color: #ffffff;
--shape-bg-image: none;

width: 100%;
background-color: var(--shape-bg-color);
background-image: var(--shape-bg-image);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
padding: var(--shape-padding);
box-sizing: border-box;
aspect-ratio: var(--shape-aspect);
-webkit-mask-image: var(--shape-mask);
mask-image: var(--shape-mask);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

.angled-image__media {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: var(--ai-pos, center center);
-webkit-mask-image: var(--shape-mask-inner);
mask-image: var(--shape-mask-inner);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

/* --- Stacked variant: multiple .angled-image instances cross-fade
inside .angled-image-stack. Used by the Accordion Block so each
item has its own image AND its own shape/position. All layers share
the same grid cell; the active layer is opaque, the rest fade out.
The stack's height grows to the tallest aspect-ratio in the set. -- */
.angled-image-stack {
display: grid;
grid-template-areas: "stack";
width: 100%;
}

.angled-image-stack > .angled-image {
grid-area: stack;
opacity: 0;
transition: opacity 400ms ease;
pointer-events: none;
}

.angled-image-stack > .angled-image.is-active {
opacity: 1;
}

/* --- Unbordered shape modifiers (mobile / base) --- */
.angled-image--left {
--shape-mask: url('images/shapes/left-angle.svg');
--shape-aspect: 604.87 / 493.01;
}
.angled-image--right {
--shape-mask: url('images/shapes/right-angle.svg');
--shape-aspect: 604.87 / 493.01;
}
.angled-image--bottom {
--shape-mask: url('images/shapes/bottom-angle.svg');
--shape-aspect: 751.99 / 458.83;
}
.angled-image--left-tall {
--shape-mask: url('images/shapes/left-angle-tall.svg');
--shape-aspect: 385.49 / 492;
}
.angled-image--right-tall {
--shape-mask: url('images/shapes/right-angle-tall.svg');
--shape-aspect: 386.84 / 492;
}

/* --- Bordered shape modifiers (mobile / base) --- */
.angled-image--left-border {
--shape-mask: none;
--shape-mask-inner: url('images/shapes/left-angle-border-inner.svg');
--shape-bg-image: url('images/shapes/left-angle-border.svg');
--shape-bg-color: transparent;
--shape-padding: 0;
--shape-aspect: 604.87 / 493.01;
}
.angled-image--right-border {
--shape-mask: none;
--shape-mask-inner: url('images/shapes/right-angle-border-inner.svg');
--shape-bg-image: url('images/shapes/right-angle-border.svg');
--shape-bg-color: transparent;
--shape-padding: 0;
--shape-aspect: 604.87 / 493.01;
}

@media (min-width: 992px) {
/* Unbordered frame grows from 16px to 24px on lg. */
.angled-image--left,
.angled-image--right,
.angled-image--bottom,
.angled-image--left-tall,
.angled-image--right-tall {
--shape-padding: 24px;
}

/* --- LG overrides: same vars, different shape --- */
.angled-image--lg-left {
--shape-mask: url('images/shapes/left-angle.svg');
--shape-mask-inner: var(--shape-mask);
--shape-bg-image: none;
--shape-bg-color: #ffffff;
--shape-padding: 24px;
--shape-aspect: 604.87 / 493.01;
}
.angled-image--lg-right {
--shape-mask: url('images/shapes/right-angle.svg');
--shape-mask-inner: var(--shape-mask);
--shape-bg-image: none;
--shape-bg-color: #ffffff;
--shape-padding: 24px;
--shape-aspect: 604.87 / 493.01;
}
.angled-image--lg-bottom {
--shape-mask: url('images/shapes/bottom-angle.svg');
--shape-mask-inner: var(--shape-mask);
--shape-bg-image: none;
--shape-bg-color: #ffffff;
--shape-padding: 24px;
--shape-aspect: 751.99 / 458.83;
}
.angled-image--lg-left-tall {
--shape-mask: url('images/shapes/left-angle-tall.svg');
--shape-mask-inner: var(--shape-mask);
--shape-bg-image: none;
--shape-bg-color: #ffffff;
--shape-padding: 24px;
--shape-aspect: 385.49 / 492;
}
.angled-image--lg-right-tall {
--shape-mask: url('images/shapes/right-angle-tall.svg');
--shape-mask-inner: var(--shape-mask);
--shape-bg-image: none;
--shape-bg-color: #ffffff;
--shape-padding: 24px;
--shape-aspect: 386.84 / 492;
}
.angled-image--lg-left-border {
--shape-mask: none;
--shape-mask-inner: url('images/shapes/left-angle-border-inner.svg');
--shape-bg-image: url('images/shapes/left-angle-border.svg');
--shape-bg-color: transparent;
--shape-padding: 0;
--shape-aspect: 604.87 / 493.01;
}
.angled-image--lg-right-border {
--shape-mask: none;
--shape-mask-inner: url('images/shapes/right-angle-border-inner.svg');
--shape-bg-image: url('images/shapes/right-angle-border.svg');
--shape-bg-color: transparent;
--shape-padding: 0;
--shape-aspect: 604.87 / 493.01;
}

/* LG image position override */
.angled-image__media {
background-position: var(--ai-pos-lg, var(--ai-pos, center center));
}
}

/* ==================================================================
Scrolling Pills Block
Two horizontal marquee rows of non-clickable pills (icon + text).
Row 1 scrolls left, Row 2 scrolls right. Tracks are duplicated in
markup so the loop is seamless when we translate by -50% / +50%.

Per-row tunables exposed via inline style on .scrolling-pills__row:
--sp-duration : seconds per full loop on >=768px (set from ACF)
--sp-duration-mobile : seconds per full loop on <768px (set from ACF;
falls back to --sp-duration when ACF field blank)
================================================================== */

.scrolling-pills {
width: 100%;
overflow: hidden;
}

.scrolling-pills__row {
position: relative;
width: 100%;
overflow: hidden;
padding: 8px 0;
/* Soft fade on both edges */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.scrolling-pills__row + .scrolling-pills__row {
margin-top: 12px;
}

.scrolling-pills__track {
display: flex;
flex-wrap: nowrap;
width: max-content;
will-change: transform;
}

.scrolling-pills__group {
display: flex;
flex-wrap: nowrap;
flex: 0 0 auto;
}

/* Left-scrolling row: translate the track from 0 to -50% (the second
group is an exact copy, so the wrap is invisible). */
.scrolling-pills__row--left .scrolling-pills__track {
animation: scrolling-pills-left var(--sp-duration, 60s) linear infinite;
}

/* Right-scrolling row: start at -50% and animate to 0. */
.scrolling-pills__row--right .scrolling-pills__track {
animation: scrolling-pills-right var(--sp-duration, 60s) linear infinite;
}

.scrolling-pills__row.is-pause-on-hover:hover .scrolling-pills__track {
animation-play-state: paused;
}

/* Mobile speed override (<768px). Uses --sp-duration-mobile when present;
the PHP renderer falls back to --sp-duration when the ACF field is empty,
so this rule is safe even on rows that don't define a mobile speed. */
@media (max-width: 767.98px) {
.scrolling-pills__row--left .scrolling-pills__track,
.scrolling-pills__row--right .scrolling-pills__track {
animation-duration: var(--sp-duration-mobile, var(--sp-duration, 60s));
}
}

@keyframes scrolling-pills-left {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}

@keyframes scrolling-pills-right {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
.scrolling-pills__row .scrolling-pills__track {
animation: none;
transform: translate3d(0, 0, 0);
}
}

/* -------- Pill -------- */
.scrolling-pills__pill {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
margin-right: 12px;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 999px;
background-color: #ffffff;
font-family: 'Geist', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #222222;
white-space: nowrap;
user-select: none;
}

.scrolling-pills__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
/* Same icon-to-text gap used on the CTA pill-icon button */
padding-right: 16px;
box-sizing: content-box;
color: #2e6aea;
}

.scrolling-pills__icon img {
display: block;
width: 24px;
height: 24px;
}

.scrolling-pills__label {
display: inline-block;
}

/* ==================================================================
Icon List Block
Vertical bordered list rendered as a single rounded card.
================================================================== */
.icon-list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

.icon-list__item {
display: flex;
align-items: center;
padding: 20px;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
background-color: #ffffff;
}

.icon-list__item:first-child {
border-top: 1px solid #e5e5e5;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}

.icon-list__item:last-child {
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}

.icon-list__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
/* Same icon-to-text gap as the pills / CTA pill-icon */
padding-right: 16px;
box-sizing: content-box;
color: #2e6aea;
}

.icon-list__icon img {
display: block;
width: 24px;
height: 24px;
}

.icon-list__label {
font-family: 'Bricolage Grotesque', 'Bricolage', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
color: #222222;
}

/* ==================================================================
Image Card Grid Block
Bordered card with a centered title, a responsive image grid, and
a tagline at the bottom. Grid is 2 columns on mobile and 3 from
md (>=768px) up. A partial last row is centered automatically via
flex-wrap + justify-content:center.
================================================================== */

.image-card-grid {
padding: 24px;
border: 1px solid #e5e5e5;
border-radius: 24px;
background-color: #ffffff;
}

.image-card-grid__title {
margin: 0 0 16px;
font-family: 'Bricolage Grotesque', 'Bricolage', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: #222222;
text-align: center;
}

.image-card-grid__items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}

/* 2 columns on mobile */
.image-card-grid__item {
flex: 0 0 calc((100% - 16px) / 2);
max-width: calc((100% - 16px) / 2);
border: 1px solid #e5e5e5;
border-radius: 16px;
overflow: hidden;
background-color: #ffffff;
}

/* When the item is rendered as an anchor (image_link set),
keep the visual identical to the div variant. */
a.image-card-grid__item,
a.image-card-grid__item:hover,
/* --------------------------------------------------
PROCESS STEPS BLOCK
----------------------------------------------------
Two-column sticky-sidebar process layout.
- Sidebar (col-lg-3) sticks at top: 100px and releases
when its parent .row ends, so the next page block
scrolls into view normally.
- Each step card has a 1px border, 24px radius, 24px
padding, with a full-bleed angled-bottom image at
the top (escapes padding via negative margins,
clipped by overflow: hidden on the card).
- White pill CTA pulled up 24px (8px mobile) so it
overlaps the angled bottom of the image.
-------------------------------------------------- */

.process-steps {
margin: 0 auto;
width: 100%;
}

/* 48px gap between sidebar and main content at >= lg.
Bootstrap row gutters are split half on each side, so --bs-gutter-x: 96px
yields 48px between the two columns. */
@media (min-width: 992px) {
.process-steps__layout {
--bs-gutter-x: 96px;
}
}

/* Sidebar -------------------------------------------- */
/* .process-steps__sidebar-inner sticky activates at >= lg in the media query below. */

.process-steps__heading {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.25;
color: #222;
margin: 0 0 16px;
}

.process-steps__nav {
list-style: none;
padding: 0;
margin: 0;
}

.process-steps__nav-item {
margin-bottom: 16px;
}
.process-steps__nav-item:last-child {
margin-bottom: 0;
}

.process-steps__nav-link {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 24px;
border-radius: 16px;
text-decoration: none;
color: inherit;
background-color: transparent;
transition: background-color 0.15s ease, color 0.15s ease;
}

.process-steps__nav-icon {
width: 24px;
height: 24px;
flex: 0 0 24px;
margin-top: 2px;
}

.process-steps__nav-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.process-steps__nav-num {
font-family: 'Geist', system-ui, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1.4;
color: #222;
}

.process-steps__nav-label {
font-family: 'Geist', system-ui, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: #222;
}

.process-steps__nav-link.is-active {
background-color: #EFF3FE;
}
.process-steps__nav-link.is-active .process-steps__nav-num,
.process-steps__nav-link.is-active .process-steps__nav-label {
color: #2E6AEA;
}

/* Sticky at desktop only. Hidden on mobile via d-none d-lg-block on the column. */
@media (min-width: 992px) {
.process-steps__sidebar-inner {
position: sticky;
top: 100px;
}
}

/* Main column / step cards --------------------------- */
/* .process-steps__main is a Bootstrap col; spacing handled by .process-step margin-bottom. */

.process-step {
position: relative;
border: 1px solid #E5E5E5;
border-radius: 24px;
padding: 24px;
margin-bottom: 24px;
overflow: hidden; /* clip angled-image top corners to card radius */
background-color: #ffffff;
scroll-margin-top: 100px; /* matches sticky offset */
}
.process-step:last-child {
margin-bottom: 0;
}

/* Angled-bottom image at top of card, full-bleed. */
.process-step__media {
margin: -24px -24px 0;
width: auto;
}

/* CTA pulled up to overlap the angled bottom. */
.process-step__cta {
margin-top: -24px;
margin-bottom: 16px;
align-self: flex-start;
scroll-margin-top: 100px;
}
@media (max-width: 767.98px) {
.process-step__cta {
margin-top: -8px;
}
}

/* Card headline. */
.process-step__title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.2;
color: #222;
margin: 0 0 16px;
}
@media (min-width: 768px) {
.process-step__title {
font-size: 32px;
}
}

/* Sub-items list. */
.process-step__items {
list-style: none;
padding: 0;
margin: 0;
}

.process-step__item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.process-step__item:last-child {
margin-bottom: 0;
}

.process-step__item-icon {
width: 24px;
height: 24px;
flex: 0 0 24px;
margin-top: 4px;
}

.process-step__item-text {
min-width: 0;
}

.process-step__item-title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #222;
margin: 0 0 4px;
}

.process-step__item-body {
font-family: 'Geist', system-ui, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #777;
}
.process-step__item-body :last-child {
margin-bottom: 0;
}

/* --------------------------------------------------
FAQ STEPS BLOCK
----------------------------------------------------
Two-column sticky-sidebar FAQ layout. Sidebar reuses
all .process-steps__sidebar* / .process-steps__nav*
classes from the PROCESS STEPS BLOCK section above.
The .process-steps__nav-link--single modifier removes
the two-line "Step N + label" layout so the sidebar
shows just the icon + a single label line.
-------------------------------------------------- */

.faq-steps {
margin: 0 auto;
width: 100%;
}

/* 48px gap between sidebar and main content at >= lg
(matches process-steps). */
@media (min-width: 992px) {
.faq-steps .process-steps__layout {
--bs-gutter-x: 96px;
}
}

/* Sidebar single-line variant: hide the "Step N" line if any
slipped in (this block doesn't render it) and let the label
sit beside the icon naturally. The base styles already match. */
.process-steps__nav-link--single .process-steps__nav-text {
justify-content: center;
}

/* Main column / FAQ sections ------------------------- */

.faq-step {
margin-bottom: 48px;
scroll-margin-top: 100px;
}
.faq-step:last-child {
margin-bottom: 0;
}

.faq-step__header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}

.faq-step__number {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #2E6AEA;
color: #ffffff;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}

.faq-step__title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.25;
color: #0a0a0a;
margin: 0;
}

/* Accordion ------------------------------------------ */

.faq-accordion {
margin: 0;
}

.faq-accordion__item {
border: 1px solid #E5E5E5;
border-radius: 16px;
padding: 24px;
margin-bottom: 16px;
background-color: #ffffff;
}
.faq-accordion__item:last-child {
margin-bottom: 0;
}

.faq-accordion__question {
/* Button reset. */
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
color: #0a0a0a;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.4;
}

.faq-accordion__q-text {
flex: 1 1 auto;
min-width: 0;
}

/* Pure-CSS chevron. Down by default, flips up when open. */
.faq-accordion__chevron {
flex: 0 0 12px;
width: 12px;
height: 12px;
border-right: 2px solid #0a0a0a;
border-bottom: 2px solid #0a0a0a;
transform: rotate(45deg);
transform-origin: 50% 50%;
transition: transform 0.2s ease;
margin-top: -4px; /* visual centering offset */
}
.faq-accordion__item.is-open .faq-accordion__chevron {
transform: rotate(-135deg);
margin-top: 4px;
}

/* Active (open) question gets a bottom border + spacing
to separate it from the answer. Border-color animates so
the divider fades in rather than snapping. */
.faq-accordion__question {
border-bottom: 1px solid transparent;
transition: padding-bottom 0.3s ease,
margin-bottom 0.3s ease,
border-bottom-color 0.3s ease;
}
.faq-accordion__item.is-open .faq-accordion__question {
padding-bottom: 16px;
border-bottom-color: #E5E5E5;
margin-bottom: 16px;
}

/* Answer slides open/closed.
- No-JS fallback: PHP renders [hidden] on closed answers so
they stay collapsed without script.
- JS removes [hidden] on init and toggles .is-open on the
parent item; CSS animates max-height + opacity. */
.faq-accordion__answer {
font-family: 'Geist', system-ui, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #777;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.2s ease;
will-change: max-height;
}
.faq-accordion__item.is-open .faq-accordion__answer {
opacity: 1;
/* max-height is set inline by JS to the measured scrollHeight
so it animates smoothly; falls back to a large value if JS
hasn't run yet. */
max-height: 2000px;
}
.faq-accordion__answer :last-child {
margin-bottom: 0;
}
.faq-accordion__answer p {
margin: 0 0 12px;
}

a.image-card-grid__item:focus,
a.image-card-grid__item:visited {
display: block;
color: inherit;
text-decoration: none;
}
a.image-card-grid__item:hover,
a.image-card-grid__item:focus-visible {
border-color: #cfcfcf;
}

/* 3 columns from md up. With gap 16px and 3 items per row,
total gap = 32px -> each item = (100% - 32px) / 3. */
@media (min-width: 768px) {
.image-card-grid__item {
flex: 0 0 calc((100% - 32px) / 3);
max-width: calc((100% - 32px) / 3);
}
}

.image-card-grid__media {
width: 100%;
aspect-ratio: 169 / 144;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

.image-card-grid__caption {
padding: 16px 8px;
font-family: 'Geist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: #0A0A0A;
text-align: center;
}

.image-card-grid__tagline {
margin: 16px 0 0;
font-family: 'Geist', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777777;
text-align: center;
}

/* ==================================================================
Blue Checkmarks list (WYSIWYG "Blue Checkmarks" style)
Adds a blue double-check SVG bullet to each . The icon sits
flush left inside the (no outdent); text is offset 8px to
the right of the icon via padding-left = icon width (24px) + 8px.
================================================================== */
ul.ul-blue-checks {
list-style: none;
padding-left: 0;
margin-left: 0;
}
ul.ul-blue-checks > li {
position: relative;
padding-left: 32px;
margin-bottom: 12px;
background-image: url('images/blue-double-check.svg');
background-repeat: no-repeat;
background-position: 0 0.25em;
background-size: 24px auto;
list-style: none;
}

/* ==================================================================
Stat Cards Block
White wrapper with 1px #e5e5e5 border + 24px radius + 24px padding.
3 columns on desktop (>=768px), 1 column on mobile (16px gap).
Each card has its own 1px #e5e5e5 border and 16px radius.
================================================================== */

.stat-cards {
padding: 24px;
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 24px;
margin-bottom: 24px;
}

@media (min-width: 992px) {
.stat-cards {
margin-bottom: 48px;
}
}

.stat-cards__items {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}

@media (min-width: 768px) {
.stat-cards__items {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}

.stat-card {
padding: 24px;
border: 1px solid #e5e5e5;
border-radius: 16px;
background-color: #ffffff;
}

.stat-card__icon {
margin-bottom: 24px;
line-height: 0;
}

.stat-card__icon img {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
}

.stat-card__number {
display: flex;
align-items: baseline;
gap: 2px;
font-family: 'Bricolage Grotesque', 'Bricolage', sans-serif;
font-weight: 700;
font-size: 64px;
line-height: 1;
color: #000000;
margin-bottom: 8px;
}

.stat-card__number-value,
.stat-card__number-suffix {
font: inherit;
color: inherit;
}

.stat-card__title {
font-family: 'Geist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: #777777;
}

.stat-cards__body {
margin: 24px 0 0;
padding: 0 16px;
font-family: 'Geist', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #777777;
text-align: center;
}

/* ==================================================================
Icon Title Boxes Block
- Static repeater. White card, 1px border, 16px rounded corners,
24px padding, selectable aspect-ratio.
- Icon 40x40 at top; title aligned to bottom (Bricolage 700 24px).
- Mobile: 1 column full width.
- >= 768px: 2, 3, or 4 per row via .icon-title-boxes--cols-{2|3|4}
(default 4), fluid to container width.
- Height (aspect-ratio) is responsive via multi-select. Each
selected value emits a class on the wrapper:
.icon-title-boxes--h-tall -> 271 / 216 (base)
.icon-title-boxes--h-medium -> 271 / 196 (base)
.icon-title-boxes--h-short -> 271 / 176 (base)
.icon-title-boxes--h-md-* -> applies at >= 768px
.icon-title-boxes--h-lg-* -> applies at >= 1024px
Default is tall.
================================================================== */
.icon-title-boxes {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
width: 100%;
}
@media (min-width: 768px) {
.icon-title-boxes--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.icon-title-boxes--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.icon-title-boxes--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

.icon-title-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #ffffff;
border: 1px solid #E5E5E5;
border-radius: 16px;
padding: 24px;
aspect-ratio: 271 / 216;
width: 100%;
}

/* Base (mobile-first) height variants. */
.icon-title-boxes--h-tall > .icon-title-box { aspect-ratio: 271 / 216; }
.icon-title-boxes--h-medium > .icon-title-box { aspect-ratio: 271 / 170; }
.icon-title-boxes--h-short > .icon-title-box { aspect-ratio: 271 / 150; }

/* >= 768px overrides. */
@media (min-width: 768px) {
.icon-title-boxes--h-md-tall > .icon-title-box { aspect-ratio: 271 / 216; }
.icon-title-boxes--h-md-medium > .icon-title-box { aspect-ratio: 271 / 170; }
.icon-title-boxes--h-md-short > .icon-title-box { aspect-ratio: 271 / 150; }
}

/* >= 1024px overrides. */
@media (min-width: 1024px) {
.icon-title-boxes--h-lg-tall > .icon-title-box { aspect-ratio: 271 / 216; }
.icon-title-boxes--h-lg-medium > .icon-title-box { aspect-ratio: 271 / 170; }
.icon-title-boxes--h-lg-short > .icon-title-box { aspect-ratio: 271 / 150; }
}

.icon-title-box__icon {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
margin-bottom: 16px;
}

.icon-title-box__title {
margin: 0;
align-self: center;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.15;
color: #222222;
width: 100%;
text-align: center;
}

/* ==================================================================
Icon Title Text Grid Block
- Static repeater grid (no border, no bg, no animation).
- Each item: icon (24x24) + title on the same row, body
copy below indented to align under the title.
- Mobile: 1 column. >= 768px: .icon-text-grid--cols-{1|2|3|4}
(default 2).
- Typography mirrors the accordion (Bricolage 600 24px title,
Geist 400 16px body), but title color is locked to #222 since
this block has no open/closed state.
================================================================== */
.icon-text-grid {
display: grid;
grid-template-columns: 1fr;
row-gap: 32px;
column-gap: 24px;
width: 100%;
}
@media (min-width: 768px) {
.icon-text-grid--cols-1 {
grid-template-columns: 1fr;
}
.icon-text-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.icon-text-grid--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.icon-text-grid--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

.icon-text-item {
display: block;
}

.icon-text-item__header {
display: flex;
align-items: center;
gap: 12px;
}

.icon-text-item__icon {
display: block;
flex: 0 0 24px;
width: 24px;
height: 24px;
object-fit: contain;
}

.icon-text-item__title {
margin: 0;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.2;
color: #222222;
text-align: left;
}

/* Body aligns under the title (indent past icon width + header gap). */
.icon-text-item__body {
margin-top: 8px;
padding-left: 36px; /* 24px icon + 12px gap */
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #777777;
text-align: left;
}

/* If an item has no icon, drop the indent so body aligns flush left. */
.icon-text-item__header:not(:has(.icon-text-item__icon)) + .icon-text-item__body {
padding-left: 0;
}

/* ==================================================================
Column / Row / Container — Optional Border
- Opt-in 1px border with 24px rounded corners + 16px padding.
- On a column: applied to a nested .col-border-inner element so the
column itself keeps its Bootstrap gutter padding (preserves the
24px row gutter between bordered columns).
- On a row / container auto-row: applied to an outer wrapper around
the .row so the border defines the visible edge of the row.
- col-border-light: 1px Grey Border (#E5E5E5) — for light backgrounds.
- col-border-dark: 1px White Border (#FFFFFF) — for dark backgrounds.
- col-border-blue: 4px Blue Border (#2E6AEA) — accent emphasis.
================================================================== */
.col-border-light,
.col-border-dark,
.col-border-blue {
border-style: solid;
border-width: 1px;
border-radius: 24px;
padding: 16px;
margin-bottom: 48px;
}
.col-border-inner.col-border-light,
.col-border-inner.col-border-dark,
.col-border-inner.col-border-blue {
/* Inside a column the inner element should fill the column's
available height so adjacent bordered columns visually align. */
height: 100%;
}
.col-border-light {
border-color: #E5E5E5;
}
.col-border-dark {
border-color: #FFFFFF;
}
.col-border-blue {
border-color: #2E6AEA;
border-width: 4px;
}

/* ==================================================================
Angled Image - Overlap Next Block
- Pulls the IMMEDIATELY following sibling up by N pixels. Because the
sibling and any blocks after it sit in normal flow, the whole stack
(heading + body + CTA) shifts up together.
- Use only with bottom-angled shapes (left, right, bottom, *_tall,
*_border) where the angle creates an empty triangle to fill.
================================================================== */
.angled-image.overlap-1 + *,
.angled-image.overlap-2 + *,
.angled-image.overlap-3 + *,
.angled-image.overlap-4 + * {
position: relative;
z-index: 1;
}
.angled-image.overlap-1 + * { margin-top: -8px; }
.angled-image.overlap-2 + * { margin-top: -16px; }
.angled-image.overlap-3 + * { margin-top: -32px; }
.angled-image.overlap-4 + * { margin-top: -48px; }

@media (min-width: 992px) {
.angled-image.overlap-lg-0 + *,
.angled-image.overlap-lg-1 + *,
.angled-image.overlap-lg-2 + *,
.angled-image.overlap-lg-3 + *,
.angled-image.overlap-lg-4 + * {
position: relative;
z-index: 1;
}
.angled-image.overlap-lg-0 + * { margin-top: 0; }
.angled-image.overlap-lg-1 + * { margin-top: -8px; }
.angled-image.overlap-lg-2 + * { margin-top: -16px; }
.angled-image.overlap-lg-3 + * { margin-top: -32px; }
.angled-image.overlap-lg-4 + * { margin-top: -48px; }
}

/* ==================================================================
Scrolling Pills - Image Variant
- Same marquee mechanics as the pill variant; items are 120x120
images with an 8px rounded corner and 1px #E5E5E5 border.
- 24px gap between items (margin-right replaces the pill 12px gap).
================================================================== */
.scrolling-pills--image .scrolling-pills__pill--image {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 120px;
height: 120px;
margin-right: 24px;
padding: 0;
border: 1px solid #E5E5E5;
border-radius: 8px;
background-color: transparent;
overflow: hidden;
}
.scrolling-pills--image .scrolling-pills__pill--image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* ==================================================
SINGLE POST (interim — standard the_content layout)
================================================== */
.single-post {
width: 100%;
margin: 0 auto;
padding: 40px 15px 80px;
}
.single-post__container {
max-width: 800px;
margin: 0 auto;
}
.single-post__feature-image {
margin-bottom: 32px;
border-radius: 16px;
overflow: hidden;
}
.single-post__feature-image img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
.single-post__header {
margin-bottom: 32px;
}
.single-post__category {
display: inline-block;
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 12px;
color: #222;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 12px;
}
.single-post__category:hover,
.single-post__category:focus-visible {
color: #2E6AEA;
}
.single-post__title {
font-family: 'Bricolage Grotesque', serif;
font-weight: 700;
font-size: 40px;
line-height: 1.2;
color: #222;
margin: 0 0 12px;
}
.single-post__meta {
font-family: 'Geist', sans-serif;
font-size: 14px;
color: #777;
margin: 0;
}
.single-post__content {
font-family: 'Geist', sans-serif;
font-size: 17px;
line-height: 1.7;
color: #222;
}
.single-post__content p { margin: 0 0 1.25em; }
.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
font-family: 'Bricolage Grotesque', serif;
font-weight: 700;
color: #222;
margin: 2em 0 0.75em;
line-height: 1.25;
}
.single-post__content h2 { font-size: 28px; }
.single-post__content h3 { font-size: 22px; }
.single-post__content h4 { font-size: 18px; }
.single-post__content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1em 0;
}
.single-post__content ul,
.single-post__content ol {
margin: 0 0 1.25em 1.25em;
}

@media (max-width: 767.98px) {
.single-post { padding: 24px 15px 60px; }
.single-post__title { font-size: 30px; }
.single-post__content { font-size: 16px; }
}

/* ==================================================
RELATED ARTICLES (after single post)
================================================== */
.related-articles {
padding: 0 15px 80px;
}
.related-articles__container {
max-width: 1140px;
margin: 0 auto;
}
.related-articles__title {
font-family: 'Bricolage Grotesque', serif;
font-weight: 700;
font-size: 32px;
color: #222;
margin: 0 0 32px;
}
.related-articles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 991.98px) {
.related-articles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
.related-articles__grid { grid-template-columns: 1fr; }
}

.related-card {
border: 1px solid #E5E5E5;
border-radius: 16px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
}
.related-card__image {
display: block;
border-radius: 16px;
overflow: hidden;
margin-bottom: 24px;
line-height: 0;
}
.related-card__image img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.related-card__meta {
display: flex;
align-items: center;
font-family: 'Geist', sans-serif;
font-size: 12px;
color: #222;
margin-bottom: 12px;
}
.related-card__category {
display: inline-flex;
align-items: center;
padding: 0 8px 0 0;
font-weight: 600;
border-right: 1px solid #E5E5E5;
color: inherit;
text-decoration: none;
}
.related-card__category:hover .related-card__category-name,
.related-card__category:focus-visible .related-card__category-name {
color: #2E6AEA;
}
.related-card__icon {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
.related-card__category-name {
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 12px;
color: #222;
}
.related-card__date {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 12px;
color: #222;
padding-left: 8px;
}
.related-card__date--no-category {
padding-left: 0;
}
.related-card__title {
font-family: 'Bricolage Grotesque', serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #222;
margin: 0 0 8px;
}
.related-card__excerpt {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: #777;
margin: 0 0 24px;
}
.related-card__cta {
align-self: flex-start;
margin-top: auto;
text-decoration: none;
}
.related-card__cta:hover,
.related-card__cta:focus { text-decoration: none; }

/* ==================================================
BLOG ARCHIVE — title / tagline / graphic CTA (Blog Options)
================================================== */
.archive-header .archive-title {
font-family: 'Bricolage Grotesque', serif;
font-weight: 700;
font-size: 48px;
line-height: 1.15;
color: #222;
max-width: none;
}
.archive-tagline {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #777;
max-width: 770px;
margin: 12px auto 0;
}
.archive-graphic-cta {
margin: 0 0 16px;
}

/* --------------------------------------------------
Archive page — simple 3-col placeholder layout
-------------------------------------------------- */
.archive-page .archive-container {
max-width: 1140px;
padding: 0 20px;
}
.archive-page .archive-header {
margin-bottom: 48px;
}
.archive-page .archive-grid-section {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.archive-empty {
grid-column: 1 / -1;
text-align: center;
color: #777;
font-family: var(--font-sans);
}
.archive-loadmore {
margin-top: 40px;
}
.archive-loadmore__link {
display: inline-block;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: #2E6AEA;
text-decoration: underline;
text-underline-offset: 4px;
}
/* When the loadmore is the split-pill CTA, undo the simple-link styles
above so the two pills align as a single button. */
.archive-loadmore__link.btn-split {
display: inline-flex;
align-items: stretch;
font-size: inherit;
font-weight: inherit;
color: inherit;
text-decoration: none;
text-underline-offset: 0;
}
.archive-loadmore__link.btn-split:hover,
.archive-loadmore__link.btn-split:focus {
text-decoration: none;
}
.archive-loadmore__link.is-loading {
pointer-events: none;
}
/* Loading state: hide the arrow icon and show a spinner in its place,
inside the right pill of the split button. */
.archive-loadmore__link.is-loading .btn-split__arrow > svg {
visibility: hidden;
}
.archive-loadmore__link.is-loading .btn-split__arrow {
position: relative;
}
.archive-loadmore__link.is-loading .btn-split__arrow::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: podsearch-loadmore-spin 0.7s linear infinite;
}
@keyframes podsearch-loadmore-spin {
to { transform: rotate(360deg); }
}

/* ==================================================================
ARCHIVE — blog cards (.blog-card / .blog-card--featured)
Replaces the legacy .archive-card layout. Featured card sits above
the 3-col grid; both use the angled-image shape system and a
blue split-pill Read More CTA wrapped in a single anchor.
================================================================== */

/* Featured card sits as a full-width row above the grid. */
.blog-card--featured {
display: block;
max-width: 100%;
margin: 0 0 48px;
border: 1px solid #E5E5E5;
border-radius: 16px;
padding: 0;
background: #fff;
overflow: hidden;
}

.blog-card--featured .blog-card__media-col {
padding: 0;
}
.blog-card--featured .blog-card__media-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.blog-card--featured .blog-card__angled {
width: 100%;
height: 100%;
}

.blog-card--featured .blog-card__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 24px 24px 24px 32px;
}

@media (max-width: 991.98px) {
.blog-card--featured .blog-card__body {
padding: 24px;
}
}

.blog-card--featured .blog-card__title--lg {
font-family: var(--font-bricolage);
font-weight: 700;
font-size: 32px;
line-height: 1.2;
color: #222;
margin: 0 0 16px;
}
.blog-card--featured .blog-card__title--lg a {
color: inherit;
text-decoration: none;
}

/* 3-column grid (responsive). Each card matches the related-card visual style. */
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
@media (max-width: 575.98px) {
.blog-grid { grid-template-columns: 1fr; }
}

.blog-card {
border: 1px solid #E5E5E5;
border-radius: 16px;
padding: 0;
background: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* Image - flush to card edge, shape provides the visible bounds */
.blog-card > .blog-card__media-link {
display: block;
margin: 0;
text-decoration: none;
}
.blog-card .blog-card__angled {
width: 100%;
}

.blog-card > .blog-card__body {
padding: 24px;
}

/* Meta row (category + pipe + date) — same pattern as related-card */
.blog-card__meta {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.blog-card__category {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
color: #222;
padding-right: 8px;
border-right: 1px solid #E5E5E5;
text-decoration: none;
}
.blog-card__category:hover .blog-card__category-name,
.blog-card__category:focus-visible .blog-card__category-name {
color: #2E6AEA;
}
.blog-card__icon {
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
.blog-card__date {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
color: #222;
padding-left: 8px;
}
.blog-card__date--no-category {
padding-left: 0;
}

/* Title (default — used on grid cards) */
.blog-card__title {
font-family: var(--font-bricolage);
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #222;
margin: 0 0 12px;
}
.blog-card__title a {
color: inherit;
text-decoration: none;
}

/* Excerpt */
.blog-card__excerpt {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: #777;
margin: 0 0 24px;
}

/* CTA — single wrapping both pills of the split button.
Keeps the label hugging its text content. */
.blog-card__cta {
align-self: flex-start;
text-decoration: none;
}
.blog-card__cta:hover,
.blog-card__cta:focus { text-decoration: none; }

/* Hide the "Show more" loadmore container's old fancy SVG button styling
when used inside .blog-grid-section — we just want the simple link. */
.blog-grid-section .archive-loadmore { margin-top: 40px; }

/* Show more CTA: grey at rest, blue on hover. Both pills swap together via
the existing .btn-split:hover rule which uses --cta-bg-hover. */
.archive-loadmore__link.btn-split-grey:hover,
.archive-loadmore__link.btn-split-grey:focus-visible {
--cta-bg-hover: #2E6AEA;
}

/* ==================================================================
FOOTER BANNER
Pre-footer full-width CTA strip above site-footer.
================================================================== */
.footer-banner {
background-color: #eff3fe;
}
.site-footer {
background-color: #2E6AEA;
padding:0 16px;
}
.site-footer > .container-fluid {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
.footer__logo {
max-width: 120px;
}
@media (min-width: 992px) {
.py-lg-64 { padding-top: 96px !important; padding-bottom: 96px !important; }
}
.footer-banner__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-banner__icon {
margin-bottom: 24px;
}
.footer-banner__icon img {
display: block;
width: 64px;
height: 64px;
object-fit: contain;
}
.footer-banner__headline {
font-family: var(--font-bricolage);
font-weight: 700;
font-size: 32px;
line-height: 1.2;
color: #222;
margin: 0 0 16px;
}
.footer-banner__tagline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #292929;
margin: 0 0 32px;
}
.footer-banner__cta {
text-decoration: none;
}
.footer-banner__cta:hover,
.footer-banner__cta:focus { text-decoration: none; }}