/* =========================================================================
   Streams of Joy Houston: theme styles
   Colours/fonts below mirror the Elementor global kit. Elementor widget
   settings always win over these defaults, so anything can be restyled
   from the Elementor panel.
   ========================================================================= */

:root {
	--soj-teal: #349DC5;
	--soj-teal-hover: #2A82A6;
	--soj-teal-text: #1E6F91;
	--soj-teal-light: #7CC8E6;
	--soj-tint: #E6F4FA;
	--soj-navy: #0B2A4A;
	--soj-navy-deep: #071B33;
	--soj-ink: #0F172A;
	--soj-muted: #475569;
	--soj-soft: #F8FAFC;
	--soj-border: #E2E8F0;
	--soj-live: #E11D48;
	--soj-radius: 20px;
	--soj-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
	--soj-shadow-lift: 0 20px 40px rgba(11, 42, 74, .16);
	--soj-ease: cubic-bezier(.22, .61, .36, 1);
	--soj-head: "Montserrat", system-ui, sans-serif;
	--soj-body: "Inter", system-ui, sans-serif;
	--soj-admin-bar: 0px;
}

.admin-bar { --soj-admin-bar: 32px; }
@media (max-width: 782px) { .admin-bar { --soj-admin-bar: 46px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--soj-body); font-size: 17px; line-height: 1.65; color: var(--soj-ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--soj-teal-text); }
a:hover { color: var(--soj-navy); }
:focus-visible { outline: 3px solid var(--soj-teal); outline-offset: 3px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100000; background: #fff; color: var(--soj-navy); padding: 12px 18px; border-radius: 12px; box-shadow: var(--soj-shadow-lift); }

/* ---------- header ---------- */
.soj-has-sticky-header .soj-site-header { position: sticky; top: var(--soj-admin-bar); z-index: 900; }
.soj-site-header .soj-header { transition: box-shadow .3s var(--soj-ease); border-bottom: 1px solid var(--soj-border); }
.soj-site-header.is-scrolled .soj-header { box-shadow: 0 6px 24px rgba(15, 23, 42, .08); }
.soj-site-header .soj-announce { overflow: hidden; max-height: 120px; transition: max-height .35s var(--soj-ease), padding .35s var(--soj-ease); }
.soj-site-header.is-scrolled .soj-announce { max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; }
.soj-announce p { margin: 0; }
.soj-header__ctas { flex-shrink: 0; }
@media (max-width: 1024px) {
	.soj-header__ctas .soj-btn--outline { display: none; }
}

/* logo */
.soj-logo-wrap { display: flex; }
.soj-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--soj-navy); }
.soj-logo__img { display: block; height: 52px; width: auto; max-width: 100%; object-fit: contain; }
.soj-logo__img--mobile { display: none; height: 36px; }
@media (max-width: 1024px) {
	.soj-logo--swap-tablet .soj-logo__img--main { display: none; }
	.soj-logo--swap-tablet .soj-logo__img--mobile { display: block; }
}
@media (max-width: 767px) {
	.soj-logo--swap-mobile .soj-logo__img--main { display: none; }
	.soj-logo--swap-mobile .soj-logo__img--mobile { display: block; }
	.soj-logo--hide-tag-mobile .soj-logo__tag { display: none; }
}
.soj-logo__mark { width: 44px; height: 44px; border-radius: 50%; background: var(--soj-navy); color: var(--soj-teal); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.soj-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.soj-logo__name { font-family: var(--soj-head); font-weight: 800; font-size: 18px; letter-spacing: -.3px; }
.soj-logo__tag { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--soj-teal-text); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- navigation ---------- */
/* Header layout per screen size.
   Desktop: logo | menu (fills the middle, one line) | Watch Live + Give
   Tablet & mobile: logo | Give | hamburger                                  */
.soj-header .e-con { flex-wrap: nowrap !important; }
.soj-site-header { overflow-x: clip; }
.e-con > .elementor-widget-soj-logo, .e-con-inner > .elementor-widget-soj-logo { flex: 0 1 auto !important; min-width: 0; }
.e-con > .elementor-widget-soj-nav-menu, .e-con-inner > .elementor-widget-soj-nav-menu { flex: 1 1 0% !important; min-width: 0; width: auto !important; max-width: none !important; }
.soj-header__ctas { flex: 0 0 auto !important; }
.soj-nav, .soj-nav__panel { width: 100%; }
.soj-nav__list { flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1280px) {
	.soj-nav { --soj-nav-gap: 18px; }
	.soj-nav__list a { font-size: 14px; }
	.soj-header__ctas .elementor-button { padding: 12px 20px !important; }
}
@media (max-width: 1024px) {
	.e-con > .elementor-widget-soj-nav-menu, .e-con-inner > .elementor-widget-soj-nav-menu { flex: 0 0 auto !important; order: 3; }
	.soj-nav, .soj-nav__panel { width: auto; }
	.soj-header__ctas { margin-left: auto; order: 2; }
	.soj-header .elementor-widget-button.soj-btn--outline { display: none !important; }
	.soj-header__ctas .elementor-button { padding: 11px 20px !important; font-size: 14px !important; }
	.soj-announce .soj-announce__icon, .soj-announce .soj-textlink { display: none !important; }
	.soj-announce .elementor-widget-text-editor { text-align: center; font-size: 13px; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.soj-nav--bp-mobile .soj-nav__list { flex-wrap: wrap; white-space: normal; }
}
.soj-nav { --soj-nav-link: var(--soj-ink); --soj-nav-hover: var(--soj-teal-text); --soj-nav-gap: 26px; --soj-nav-panel: var(--soj-navy); display: flex; }
.soj-nav--center { justify-content: center; }
.soj-nav--right { justify-content: flex-end; }
.soj-nav__toggle, .soj-nav__close { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--soj-border); background: #fff; color: var(--soj-navy); cursor: pointer; padding: 0; }
.soj-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--soj-nav-gap); align-items: center; }
.soj-nav__list li { position: relative; }
.soj-nav__list a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; font-weight: 600; font-size: 15px; color: var(--soj-nav-link); text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.soj-nav__list a:hover, .soj-nav__list .current-menu-item > a, .soj-nav__list .current-menu-ancestor > a { color: var(--soj-nav-hover); }
.soj-nav__list .current-menu-item > a { border-bottom-color: var(--soj-teal); }
.soj-nav__list .menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.soj-nav__list .sub-menu { list-style: none; margin: 0; padding: 10px; position: absolute; top: 100%; left: -14px; min-width: 220px; background: #fff; border-radius: 14px; box-shadow: var(--soj-shadow-lift); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 20; }
.soj-nav__list li:hover > .sub-menu, .soj-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.soj-nav__list .sub-menu a { display: flex; padding: 10px 14px; border-radius: 10px; border: 0; }
.soj-nav__list .sub-menu a:hover { background: var(--soj-soft); }

@media (max-width: 1024px) {
	.soj-nav--bp-tablet .soj-nav__toggle { display: inline-flex; }
	.soj-nav--bp-tablet .soj-nav__panel { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--soj-nav-panel); padding: 88px 28px 32px; transform: translateX(100%); transition: transform .3s var(--soj-ease); z-index: 1000; overflow-y: auto; visibility: hidden; }
	.soj-nav--bp-tablet.is-open .soj-nav__panel { transform: none; visibility: visible; box-shadow: -20px 0 60px rgba(7, 27, 51, .4); }
	.soj-nav--bp-tablet .soj-nav__close { display: inline-flex; position: absolute; top: 24px; right: 24px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
	.soj-nav--bp-tablet .soj-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.soj-nav--bp-tablet .soj-nav__list a { color: #fff; font-family: var(--soj-head); font-size: 22px; font-weight: 700; padding: 10px 0; border: 0; }
	.soj-nav--bp-tablet .soj-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; }
	.soj-nav--bp-tablet .soj-nav__list .sub-menu a { font-family: var(--soj-body); font-size: 16px; color: rgba(255, 255, 255, .8); padding: 6px 0; }
	.soj-nav--bp-tablet .soj-nav__list .menu-item-has-children > a::after { display: none; }
}
@media (max-width: 767px) {
	.soj-nav--bp-mobile .soj-nav__toggle { display: inline-flex; }
	.soj-nav--bp-mobile .soj-nav__panel { position: fixed; inset: 0 0 0 auto; width: 88vw; background: var(--soj-nav-panel); padding: 88px 28px 32px; transform: translateX(100%); transition: transform .3s var(--soj-ease); z-index: 1000; overflow-y: auto; visibility: hidden; }
	.soj-nav--bp-mobile.is-open .soj-nav__panel { transform: none; visibility: visible; }
	.soj-nav--bp-mobile .soj-nav__close { display: inline-flex; position: absolute; top: 24px; right: 24px; background: transparent; color: #fff; }
	.soj-nav--bp-mobile .soj-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.soj-nav--bp-mobile .soj-nav__list a { color: #fff; font-size: 20px; }
	.soj-nav--bp-mobile .soj-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; }
}
body.soj-nav-open { overflow: hidden; }

/* toggle button + panel buttons */
.soj-nav__toggle { gap: 8px; transition: background-color .2s, color .2s, border-color .2s; }
.soj-nav__toggle--label { padding: 0 16px; width: auto; min-width: 44px; font: 700 15px var(--soj-body); }
.soj-nav__toggle-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.soj-nav__toggle-icon svg { width: 22px; height: 22px; }
.soj-nav__toggle-icon i { font-size: 20px; }
.soj-nav__buttons { display: none; }
.soj-nav__btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 999px; border: 2px solid transparent; font: 700 16px var(--soj-body); text-decoration: none; transition: background-color .2s, color .2s; }
.soj-nav__btn--primary { background: var(--soj-teal); color: #fff !important; }
.soj-nav__btn--primary:hover { background: var(--soj-teal-hover); }
.soj-nav__btn--ghost { border-color: #fff; color: #fff !important; }
.soj-nav__btn--ghost:hover { background: #fff; color: var(--soj-navy) !important; }
.soj-nav__btn--white { background: #fff; color: var(--soj-navy) !important; }
@media (max-width: 1024px) {
	.soj-nav--bp-tablet .soj-nav__buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .15); }
	.soj-nav--bp-tablet .soj-nav__list a { color: var(--soj-nav-panel-link, #fff); }
}
@media (max-width: 767px) {
	.soj-nav--bp-mobile .soj-nav__buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .15); }
	.soj-nav--bp-mobile .soj-nav__list a { color: var(--soj-nav-panel-link, #fff); }
}

/* ---------- buttons (Elementor Button widget + class) ---------- */
.elementor .soj-btn .elementor-button { border-radius: 999px; padding: 16px 32px; font-family: var(--soj-body); font-weight: 700; font-size: 15px; letter-spacing: .2px; line-height: 1; transition: transform .25s var(--soj-ease), box-shadow .25s var(--soj-ease), background-color .25s, color .25s, border-color .25s; border: 2px solid transparent; }
.elementor .soj-btn .elementor-button:hover { transform: translateY(-2px); }
.elementor .soj-btn--primary .elementor-button { background-color: var(--soj-teal); color: #fff; }
.elementor .soj-btn--primary .elementor-button:hover { background-color: var(--soj-teal-hover); box-shadow: 0 10px 24px rgba(52, 157, 197, .35); }
.elementor .soj-btn--secondary .elementor-button { background-color: var(--soj-navy); color: #fff; }
.elementor .soj-btn--secondary .elementor-button:hover { background-color: var(--soj-navy-deep); }
.elementor .soj-btn--outline .elementor-button { background-color: transparent; color: var(--soj-navy); border-color: var(--soj-navy); }
.elementor .soj-btn--outline .elementor-button:hover { background-color: var(--soj-navy); color: #fff; }
.elementor .soj-btn--ghost .elementor-button { background-color: transparent; color: #fff; border-color: #fff; }
.elementor .soj-btn--ghost .elementor-button:hover { background-color: #fff; color: var(--soj-navy); }
.elementor .soj-btn--white .elementor-button { background-color: #fff; color: var(--soj-navy); }
.elementor .soj-btn--white .elementor-button:hover { background-color: var(--soj-tint); }
.soj-live-dot .elementor-button-text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--soj-live); vertical-align: middle; animation: sojPulse 1.6s infinite; }
@keyframes sojPulse { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .6); } 70% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); } }

.soj-textlink .elementor-heading-title a { font-weight: 700; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s var(--soj-ease); }
.soj-textlink .elementor-heading-title a:hover { background-size: 100% 2px; }

/* ---------- type helpers ---------- */
.soj-accent { color: var(--soj-teal); }
.soj-measure { max-width: 640px; }
.soj-narrow > .e-con-inner { max-width: 920px !important; }
.soj-page-hero .soj-measure p, .soj-page-hero .elementor-widget-text-editor p { margin: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ---------- hero ---------- */
.soj-chips .elementor-icon-list-items.elementor-inline-items { gap: 10px; }
.soj-chips .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin: 0 !important; padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: 14px; font-weight: 600; color: #fff; }
.soj-chips .elementor-icon-list-item::after { display: none !important; }

/* ---------- cards ---------- */
.e-con.soj-card { border-radius: var(--soj-radius); overflow: hidden; }
.e-con.soj-card--light { box-shadow: var(--soj-shadow); }
.e-con.soj-card--dark, .e-con.soj-card--image, .e-con.soj-card--gradient { box-shadow: var(--soj-shadow-lift); }
a.e-con.soj-card { text-decoration: none; color: inherit; transition: transform .35s var(--soj-ease), box-shadow .35s var(--soj-ease); }
a.e-con.soj-card:hover { transform: translateY(-6px); box-shadow: var(--soj-shadow-lift); }
.e-con.soj-card--outline { border: 1px solid rgba(52, 157, 197, .45); background-color: rgba(52, 157, 197, .12) !important; }
.soj-form-card { max-width: 760px; margin-inline: auto; }

/* images */
.soj-img img { width: 100%; border-radius: var(--soj-radius); object-fit: cover; display: block; }
.soj-img--flush img { border-radius: 0; }
.soj-ratio-4-5 img { aspect-ratio: 4 / 5; }
.soj-ratio-1-1 img { aspect-ratio: 1 / 1; }
.soj-ratio-16-9 img { aspect-ratio: 16 / 9; }
.soj-offset-frame .elementor-widget-container { position: relative; padding: 0 24px 24px 0; }
.soj-offset-frame .elementor-widget-container::before { content: ""; position: absolute; inset: 24px 0 0 24px; border: 3px solid var(--soj-teal); border-radius: 24px; }
.soj-offset-frame img { position: relative; border-radius: 24px; }
@media (max-width: 767px) { .soj-offset-frame .elementor-widget-container { padding: 0 12px 12px 0; } .soj-offset-frame .elementor-widget-container::before { inset: 12px 0 0 12px; } }
.soj-gallery img { border-radius: 14px; }
.soj-video .elementor-wrapper, .soj-video iframe { border-radius: 24px; overflow: hidden; }
.soj-map iframe { border-radius: var(--soj-radius); display: block; filter: grayscale(.25) contrast(1.05); }

/* service rows */
.e-con.soj-service-row { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 14px !important; padding-bottom: 14px !important; }
.soj-service-row .elementor-heading-title { font-size: 17px !important; }

/* steps (Next Steps) */
.soj-steps { position: relative; }
.soj-steps::before { content: ""; position: absolute; top: 32px; left: 12%; right: 12%; height: 3px; background: linear-gradient(90deg, var(--soj-teal), var(--soj-navy)); }
.soj-step-num .elementor-heading-title { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #fff; border: 3px solid var(--soj-teal); display: flex; align-items: center; justify-content: center; font-family: var(--soj-head); font-weight: 800; font-size: 22px; color: var(--soj-navy); position: relative; }
@media (max-width: 1024px) { .soj-steps::before { display: none; } }

/* date badge (events) */
.e-con.soj-date-badge { height: 96px; border-radius: 18px; background: var(--soj-tint); flex-shrink: 0; }

/* accordion */
.soj-accordion .elementor-accordion-item { border: 1px solid var(--soj-border) !important; border-radius: 16px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.soj-accordion .elementor-tab-title { padding: 20px 24px !important; }
.soj-accordion .elementor-tab-content { border-top: 0 !important; padding: 0 24px 20px !important; color: var(--soj-muted); }

/* footer */
.soj-footer a { color: rgba(255, 255, 255, .78); }
.soj-footer a:hover { color: #fff; }
.soj-footer .elementor-icon-list-text { color: rgba(255, 255, 255, .78); }
.e-con.soj-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px !important; }
.soj-socials .elementor-social-icon { transition: background-color .2s; }
.soj-socials .elementor-social-icon:hover { background-color: var(--soj-teal) !important; }

/* ---------- countdown ---------- */
.soj-countdown__timer { display: flex; gap: 10px; flex-wrap: wrap; }
.soj-countdown__unit { min-width: 76px; padding: 10px 14px; border-radius: 14px; text-align: center; display: flex; flex-direction: column; }
.soj-countdown__num { font-family: var(--soj-head); font-weight: 800; font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.soj-countdown__label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.soj-countdown--dark .soj-countdown__unit { background: var(--soj-navy-deep); }
.soj-countdown--dark .soj-countdown__num { color: #fff; }
.soj-countdown--dark .soj-countdown__label { color: var(--soj-teal-light); }
.soj-countdown--light .soj-countdown__unit { background: #fff; box-shadow: var(--soj-shadow); }
.soj-countdown--light .soj-countdown__num { color: var(--soj-navy); }
.soj-countdown--light .soj-countdown__label { color: var(--soj-teal-text); }
.soj-countdown--glass .soj-countdown__unit { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.soj-countdown--glass .soj-countdown__num { color: #fff; }
.soj-countdown--glass .soj-countdown__label { color: var(--soj-teal-light); }
.soj-countdown__live { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--soj-navy-deep); color: #fff !important; font-weight: 700; text-decoration: none; }
.soj-countdown__live[hidden] { display: none; }
.soj-countdown__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--soj-live); animation: sojPulse 1.6s infinite; }
.soj-countdown.is-live .soj-countdown__timer { display: none; }

/* ---------- posts grid ---------- */
.soj-posts { display: grid; gap: 24px; }
.soj-posts--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .soj-posts--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .soj-posts--cards { grid-template-columns: 1fr; } }
.soj-post { display: flex; flex-direction: column; border-radius: var(--soj-radius); overflow: hidden; background: #fff; border: 1px solid var(--soj-border); box-shadow: var(--soj-shadow); transition: transform .35s var(--soj-ease), box-shadow .35s var(--soj-ease); }
.soj-post:hover { transform: translateY(-4px); box-shadow: var(--soj-shadow-lift); }
.soj-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--soj-teal) 0%, var(--soj-navy) 100%); }
.soj-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--soj-ease); }
.soj-post:hover .soj-post__media img { transform: scale(1.04); }
.soj-post__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.soj-post__date { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soj-teal-text); }
.soj-post__title { margin: 0; font-family: var(--soj-head); font-weight: 800; font-size: 21px; line-height: 1.25; }
.soj-post__title a { color: var(--soj-ink); text-decoration: none; }
.soj-post__title a:hover { color: var(--soj-teal-text); }
.soj-post__excerpt { margin: 0; color: var(--soj-muted); font-size: 15px; }
.soj-post__foot { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.soj-post__more { font-weight: 700; text-decoration: none; color: var(--soj-teal-text); }

/* featured */
.soj-posts--featured { grid-template-columns: 1fr; }
.soj-posts--featured .soj-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.soj-posts--featured .soj-post__media { aspect-ratio: auto; min-height: 360px; }
.soj-posts--featured .soj-post__body { padding: 48px; gap: 16px; justify-content: center; }
.soj-posts--featured .soj-post__date { padding: 6px 14px; border-radius: 999px; background: var(--soj-teal); color: var(--soj-navy-deep); letter-spacing: .5px; text-transform: none; font-size: 13px; }
.soj-posts--featured .soj-post__title { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.8px; }
@media (max-width: 900px) { .soj-posts--featured .soj-post { grid-template-columns: 1fr; } .soj-posts--featured .soj-post__media { min-height: 240px; } .soj-posts--featured .soj-post__body { padding: 28px; } }

/* list */
.soj-posts--list { gap: 0; }
.soj-posts--list .soj-post { flex-direction: row; align-items: center; gap: 18px; padding: 20px 0; background: transparent; border: 0; border-bottom: 1px solid var(--soj-border); border-radius: 0; box-shadow: none; }
.soj-posts--list .soj-post:hover { transform: none; box-shadow: none; }
.soj-posts--list .soj-post__media { width: 96px; height: 96px; flex: none; aspect-ratio: 1; border-radius: 14px; }
.soj-posts--list .soj-post__body { padding: 0; gap: 4px; }
.soj-posts--list .soj-post__title { font-size: 18px; }

/* dark variant */
.soj-posts--dark .soj-post { background: var(--soj-navy-deep); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.soj-posts--dark.soj-posts--list .soj-post { background: transparent; border-color: rgba(255, 255, 255, .12); }
.soj-posts--dark .soj-post__title a { color: #fff; }
.soj-posts--dark .soj-post__title a:hover { color: var(--soj-teal-light); }
.soj-posts--dark .soj-post__excerpt { color: rgba(255, 255, 255, .78); }
.soj-posts--dark .soj-post__date, .soj-posts--dark .soj-post__more { color: var(--soj-teal-light); }
.soj-posts--dark.soj-posts--featured .soj-post__date { color: var(--soj-navy-deep); }
.soj-posts__empty { padding: 32px; border-radius: var(--soj-radius); border: 1px dashed #CBD5E1; color: var(--soj-muted); text-align: center; margin: 0; }

/* share */
.soj-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--soj-muted); }
.soj-share__link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; background: #F1F5F9; color: var(--soj-navy); text-decoration: none; font-weight: 600; }
.soj-share__link:hover { background: var(--soj-tint); }
.soj-posts--dark .soj-share { color: rgba(255, 255, 255, .7); }
.soj-posts--dark .soj-share__link { background: rgba(255, 255, 255, .1); color: #fff; }

/* pagination */
.soj-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.soj-pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--soj-border); background: #fff; color: var(--soj-navy); font-weight: 600; text-decoration: none; }
.soj-pagination .page-numbers.current { background: var(--soj-navy); color: #fff; border-color: var(--soj-navy); }

/* ---------- forms ---------- */
.soj-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.soj-form__field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.soj-form__field--half { grid-column: span 1; }
@media (max-width: 600px) { .soj-form__field--half { grid-column: 1 / -1; } }
.soj-form label, .soj-form legend { font-size: 14px; font-weight: 600; color: var(--soj-ink); }
.soj-form input[type=text], .soj-form input[type=email], .soj-form input[type=tel], .soj-form input[type=date], .soj-form input[type=number], .soj-form select, .soj-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--soj-border); border-radius: 12px; font: 400 16px/1.4 var(--soj-body); color: var(--soj-ink); background: #fff; }
.soj-form input:focus, .soj-form select:focus, .soj-form textarea:focus { border-color: var(--soj-teal); box-shadow: 0 0 0 4px rgba(52, 157, 197, .15); outline: none; }
.soj-form fieldset { border: 0; padding: 0; margin: 0; }
.soj-form__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.soj-form__checks label, .soj-form__check { font-weight: 500; display: flex; gap: 8px; align-items: center; }
.soj-form__req { color: var(--soj-live); }
.soj-form__submit { justify-self: start; align-self: flex-start; padding: 16px 36px; border: 0; border-radius: 999px; background: var(--soj-teal); color: #fff; font: 700 16px var(--soj-body); cursor: pointer; transition: background-color .2s, transform .2s; }
.soj-form__submit:hover { background: var(--soj-teal-hover); transform: translateY(-2px); }
.soj-form__notice { padding: 16px 20px; border-radius: 12px; margin: 0 0 16px; font-weight: 600; }
.soj-form__notice--ok { background: #ECFDF5; color: #065F46; }
.soj-form__notice--err { background: #FEF2F2; color: #991B1B; }
.soj-form__hp { position: absolute; left: -9999px; }

/* ---------- classic templates (posts, archives, 404) ---------- */
.soj-shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.soj-shell--narrow { max-width: 808px; }
.soj-hero-band { padding: 110px 0 90px; color: #fff; background: radial-gradient(ellipse at 85% 20%, rgba(52, 157, 197, .45) 0%, rgba(52, 157, 197, 0) 55%), linear-gradient(90deg, var(--soj-navy-deep) 0%, var(--soj-navy) 60%, #123B63 100%); }
.soj-hero-band--center { text-align: center; }
.soj-hero-band__title { margin: 0; font-family: var(--soj-head); font-weight: 800; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -1.5px; }
.soj-hero-band__intro { margin-top: 18px; font-size: 19px; color: rgba(255, 255, 255, .82); }
.soj-eyebrow-text { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--soj-teal-light); }
.soj-band { padding: 96px 0; }
.soj-band--soft { background: var(--soj-soft); }
.soj-single__media { margin-top: -48px; }
.soj-single__media img { border-radius: 24px; box-shadow: var(--soj-shadow-lift); width: 100%; }
.soj-prose { padding-top: 56px; padding-bottom: 40px; font-size: 18px; line-height: 1.75; }
.soj-prose h2, .soj-prose h3 { font-family: var(--soj-head); font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin: 1.6em 0 .6em; }
.soj-prose blockquote { margin: 1.5em 0; padding: 20px 24px; border-radius: 16px; background: var(--soj-tint); color: var(--soj-navy); font-style: italic; }
.soj-share--single { padding: 24px 0; border-top: 1px solid var(--soj-border); border-bottom: 1px solid var(--soj-border); }
.soj-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.soj-postnav a { display: flex; flex-direction: column; padding: 20px; border-radius: 16px; border: 1px solid var(--soj-border); text-decoration: none; color: var(--soj-ink); font-weight: 700; height: 100%; }
.soj-postnav a span { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soj-teal-text); font-weight: 700; }
.soj-postnav div:last-child a { text-align: right; }
.soj-subscribe { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0 0 96px; padding: 32px; border-radius: 24px; background: var(--soj-navy); color: #fff; }
.soj-subscribe p { margin: 0; color: rgba(255, 255, 255, .8); }
.soj-subscribe .soj-subscribe__title { font-family: var(--soj-head); font-weight: 800; font-size: 24px; color: #fff; }
.soj-btn-link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: var(--soj-teal); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid var(--soj-teal); }
.soj-btn-link:hover { background: var(--soj-teal-hover); border-color: var(--soj-teal-hover); }
.soj-btn-link--outline { background: transparent; color: var(--soj-navy) !important; border-color: var(--soj-navy); }
.soj-btn-link--outline:hover { background: var(--soj-navy); color: #fff !important; }
.soj-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--soj-live); }
.search-form { display: flex; gap: 8px; margin: 24px 0; }
.search-form .search-field { flex: 1; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--soj-border); font: inherit; }
.search-form .search-submit { padding: 0 22px; border-radius: 12px; border: 0; background: var(--soj-navy); color: #fff; font-weight: 700; cursor: pointer; }

/* fallback header/footer */
.soj-fallback-header { background: #fff; border-bottom: 1px solid var(--soj-border); }
.soj-fallback-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.soj-fallback-header__ctas { display: flex; gap: 10px; }
.soj-fallback-header .soj-btn-link { padding: 11px 22px; }
@media (max-width: 1024px) { .soj-fallback-header__ctas .soj-btn-link--outline { display: none; } }
.soj-fallback-footer { background: var(--soj-navy-deep); color: rgba(255, 255, 255, .72); padding: 72px 0 28px; }
.soj-fallback-footer__inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.soj-fallback-footer__brand { font-family: var(--soj-head); font-weight: 800; font-size: 22px; color: #fff; margin: 0 0 8px; }
.soj-fallback-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.soj-fallback-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.soj-fallback-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}