/*
 * Site theme - layout overrides
 *
 * Wins over the bundled CSS via specificity + !important on layout-critical rules.
 * Mirrors the original STJOSEPH design:
 *   - Thin dark-navy top strip (parent-org / contact line)
 *   - White universal-header: logo left, TEAL utility pill right
 *   - White main menu: teal text, gold underline accent on hover
 *   - Full-bleed hero with bottom-left teal caption overlay + gold button
 *   - Horizontal linked-icon row (icon left, two-line teal label right)
 *   - Faculty-leader section (image + yellow corner L + text column + Read More)
 */

/* =================================================================
   Tokens
   ================================================================= */

:root {
    --c-navy:   #0E2C4F;
    --c-teal:   #1B3A5C;
    --c-teal-2: #1B3A5C;
    --c-gold:   #C9A961;
    --c-text:   #1d1d1d;
    --c-muted:  #555;
    --c-border: #e5e5e5;
}

/* =================================================================
   Reset & body
   ================================================================= */

html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.stj-template {
    margin: 0;
    padding: 0;
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
    color: var(--c-text);
    background: #fff;
    width: 100%;
    overflow-x: hidden;
    line-height: 1.55;
}

.stj-template a { text-decoration: none; color: inherit; }

/* Single-typeface system: Frank Ruhl Libre everywhere on the frontend.
   No Manrope, no Inter, no system sans - one face only. Tajawal is the
   Arabic fallback. Icon fonts are exempted further down. */
html body.stj-template,
html body.stj-template *,
html body.stj-template *::before,
html body.stj-template *::after {
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
}
html body.stj-template i,
html body.stj-template .fa,
html body.stj-template .fas,
html body.stj-template .far,
html body.stj-template .fab,
html body.stj-template .fal,
html body.stj-template .fad,
html body.stj-template [class^="fa-"],
html body.stj-template [class*=" fa-"],
html body.stj-template .material-icons,
html body.stj-template .material-symbols-outlined {
    font-family: inherit !important;
}
/* Font Awesome 6 renders glyphs from ::before with its own font-family.
   Re-assert it on both the <i> and its ::before so the global serif
   override doesn't kill the icon font. */
html body.stj-template .fa,
html body.stj-template .fas,
html body.stj-template .far,
html body.stj-template .fal,
html body.stj-template .fad,
html body.stj-template .fa-solid,
html body.stj-template .fa-regular,
html body.stj-template .fa-light,
html body.stj-template .fa-thin,
html body.stj-template .fa-duotone,
html body.stj-template .fa-solid::before,
html body.stj-template .fa-regular::before,
html body.stj-template .fa-light::before,
html body.stj-template .fa-thin::before,
html body.stj-template .fa-duotone::before,
html body.stj-template .fa::before,
html body.stj-template .fas::before,
html body.stj-template .far::before,
html body.stj-template .fal::before,
html body.stj-template .fad::before,
html body.stj-template [class^="fa-"]::before,
html body.stj-template [class*=" fa-"]::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}
html body.stj-template .fab,
html body.stj-template .fa-brands,
html body.stj-template .fab::before,
html body.stj-template .fa-brands::before {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}
html body.stj-template .material-icons,
html body.stj-template .material-icons::before {
    font-family: "Material Icons" !important;
}
html body.stj-template .material-symbols-outlined,
html body.stj-template .material-symbols-outlined::before {
    font-family: "Material Symbols Outlined" !important;
}

.stj-template .page,
.stj-template .dialog-off-canvas-main-canvas {
    width: 100%;
    overflow-x: hidden;
}

.stj-template .header-region {
    background: #fff;
    border-bottom: 1px solid var(--c-border);
}

/* =================================================================
   Page-content decorative backdrop - subtle navy + gold dot grid
   with soft accent halos in the corners. Sits behind everything
   below the hero, site-wide.
   ================================================================= */
.stj-template .page-content-outer-wrap {
    position: relative;
    background-color: #fbfaf6;
    background-image:
        radial-gradient(circle at center, rgba(27, 58, 92, .14) 1.2px, transparent 1.6px),
        radial-gradient(circle at center, rgba(201, 169, 97, .18) 1.2px, transparent 1.6px);
    background-size: 22px 22px, 38px 38px;
    background-position: 0 0, 11px 19px;
    overflow: hidden;
    isolation: isolate;
}
.stj-template .page-content-outer-wrap::before,
.stj-template .page-content-outer-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
}
.stj-template .page-content-outer-wrap::before {
    top: 280px;
    left: -180px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 70% 50%, rgba(201, 169, 97, .35), transparent 65%);
}
.stj-template .page-content-outer-wrap::after {
    top: 1100px;
    right: -200px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle at 30% 50%, rgba(27, 58, 92, .22), transparent 65%);
}
.stj-template .page-content-outer-wrap > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .stj-template .page-content-outer-wrap {
        background-size: 16px 16px, 28px 28px;
    }
    .stj-template .page-content-outer-wrap::before,
    .stj-template .page-content-outer-wrap::after {
        width: 220px;
        height: 220px;
    }
}

/* =================================================================
   Mobile menu visibility
   ================================================================= */

@media (min-width: 1024px) {
    .stj-template .region-mobile-menu { display: none !important; }
}

@media (max-width: 1023px) {
    .stj-template .region-top-banner,
    .stj-template .region-header,
    .stj-template .region-main-menu { display: none !important; }

    .stj-template .region-mobile-menu { display: block; background: #fff; }
    .stj-template .mobile-header-button-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: .75rem 1rem; gap: .75rem;
    }
    .stj-template .mobile-menu-button {
        background: none; border: 1px solid var(--c-teal); color: var(--c-teal);
        padding: .5rem 1rem; border-radius: 4px; font-weight: 600; cursor: pointer;
    }
    .stj-template .mobile-logo img { max-height: 44px; width: auto; }
    .stj-template .mobile-menu-items {
        display: none; padding: 1rem; background: #fff; border-top: 1px solid var(--c-border);
    }
    .stj-template .mobile-menu-button.open ~ .mobile-menu-items,
    .stj-template .mobile-menu-items.open { display: block; }
    .stj-template .mobile-menu-items .menu { list-style: none; padding: 0; margin: 0; }
    .stj-template .mobile-menu-items .menu-item { border-bottom: 1px solid #f0f0f0; }
    .stj-template .mobile-menu-items .menu-item a,
    .stj-template .mobile-menu-items .nav-button {
        display: block; width: 100%; text-align: left; padding: .85rem 0;
        background: none; border: 0; font-size: 1rem; color: var(--c-teal);
        font-weight: 600; cursor: pointer;
    }
    .stj-template .mobile-menu-items .menu-level-1 {
        padding-left: 1rem; max-height: 0; overflow: hidden; transition: max-height .25s ease;
    }
    .stj-template .mobile-menu-items .has-children.open > .menu-level-1 { max-height: 500px; }
}

/* =================================================================
   Header - let the bundled CSS (universal-header.css, main-header.css,
   top-banner.css) drive layout. Only minor tweaks here so the markup
   we render hooks correctly into the original styles.
   ================================================================= */

/* Logo size - bundled CSS sometimes leaves logo unsized in our markup */
.stj-template .universal-header__logo img,
.stj-template .mobile-logo img {
    max-height: 64px;
    width: auto;
    height: auto;
    display: block;
}
.stj-template .universal-header__tagline { display: none; }

/* Main header logo - isolated medallion sitting *inside* the header
   with breathing room between the header bottom and the hero banner
   (no more overhang into the hero). */
.stj-template .header-region,
.stj-template .header,
.stj-template .header__wrap,
.stj-template .header__first,
.stj-template .header__logo,
.stj-template .header__link,
.stj-template .header__link a {
    overflow: visible !important;
}
.stj-template .header {
    position: relative;
    z-index: 20;
    background: #ffffff;
    padding-block: 6px 8px;
    box-shadow: 0 2px 0 rgba(201, 169, 97, .35), 0 6px 18px rgba(15, 36, 64, .06);
}
/* Pull the whole header row up and vertically center the logo with the
   right-side stack (utility row + main nav row). */
.stj-template .header .header__wrap {
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* Tighten the right-side stack: utility bar row + main nav row */
.stj-template .header .header__second {
    min-height: 0 !important;
    gap: 4px;
    align-self: center !important;
}
.stj-template .header .header__menu { margin: 0 !important; padding: 0 !important; }
.stj-template .header .region-main-menu { margin: 0 !important; padding: 0 !important; }
/* Right-align the main nav list so items sit flush with the header's right edge. */
html body.stj-template .header .menu--main .main-menu__item-list--level-0 {
    justify-content: flex-end !important;
    margin-left: auto !important;
}
.stj-template .header__first {
    position: relative;
    z-index: 30;
    min-height: 0;
    min-width: 180px;
    display: flex;
    align-items: center;
    align-self: center !important;
    gap: .65rem;                    /* logo huddles close to the text crest */
    margin-inline-end: 2.5rem;      /* but stands well clear of the nav */
}

/* --- Bilingual hospital crest beside the medallion logo --------------
   Heritage-emblem layout matching the reference:
     line 1: Saint Joseph Hospital      (large bold navy serif)
     line 2: ──── ◆ JERUSALEM ◆ ────    (gold hairlines + diamond ornaments)
     line 3: مستشفى مار يوسف القدس     (Arabic, navy, matching weight)
*/
html body.stj-template .stj-header-brand-text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    color: inherit !important;
    padding-inline-start: 0;
    line-height: 1.1;
    transition: opacity .2s ease;
}
html body.stj-template .stj-header-brand-text:hover {
    opacity: .82;
}

/* Top line - big bold navy serif */
html body.stj-template .stj-header-brand-text__en {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1B3A5C;
    letter-spacing: .005em;
    white-space: nowrap;
    line-height: 1;
}

/* Middle line - "JERUSALEM" with gold hairlines + diamond ornaments. */
html body.stj-template .stj-header-brand-text__city {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    margin: .15rem 0;
}
html body.stj-template .stj-header-brand-text__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A961 30%, #C9A961 70%, transparent 100%);
    min-width: 24px;
}
html body.stj-template .stj-header-brand-text__diamond {
    color: #C9A961;
    font-size: .55rem;
    line-height: 1;
    transform: translateY(-1px);
    flex-shrink: 0;
}
html body.stj-template .stj-header-brand-text__city-name {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: .72rem;
    font-weight: 500;
    color: #1B3A5C;
    letter-spacing: .42em;
    text-transform: uppercase;
    /* compensate for letter-spacing so the word stays optically centred */
    padding-inline-start: .42em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Bottom line - Arabic in Amiri (classical Naskh, thin elegant strokes
   matching the reference emblem). Navy, weight matched to the English. */
html body.stj-template .stj-header-brand-text__ar {
    font-family: 'Amiri', 'Tajawal', 'Segoe UI', serif !important;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1B3A5C;
    direction: rtl;
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1;
}

/* Tablet - shrink the whole crest slightly */
@media (max-width: 73.74em) {
    html body.stj-template .stj-header-brand-text__en { font-size: 1.1rem; }
    html body.stj-template .stj-header-brand-text__city-name { font-size: .58rem; letter-spacing: .32em; }
    html body.stj-template .stj-header-brand-text__ar { font-size: .88rem; }
    .stj-template .header__first { gap: .5rem; margin-inline-end: 1.25rem; }
}
/* Phone - hide the text block, medallion alone speaks for the brand */
@media (max-width: 600px) {
    html body.stj-template .stj-header-brand-text { display: none; }
}
.stj-template .header__logo {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    width: 180px;
    min-height: 0;
    position: relative;
}
.stj-template .header__link {
    display: flex !important;
    align-items: center;
    position: relative;
    width: 180px;
    height: auto;
    z-index: 30;
}
.stj-template .header__link img {
    height: 180px !important;
    width: 180px !important;
    max-height: none !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 30;
    filter: drop-shadow(0 6px 14px rgba(27, 58, 92, .18));
}
/* Breathing room between the header block and the hero banner */
.stj-template .region-hero,
.stj-template .region-top-banner + .region-hero,
.stj-template .header + .region-hero,
.stj-template .header-region + main,
.stj-template .header + main {
    margin-top: 10px;
}
@media (max-width: 73.74em) {
    .stj-template .header__link,
    .stj-template .header__logo { width: 80px; }
    .stj-template .header__link { height: auto; }
    .stj-template .header__link img {
        height: 80px !important;
        width: 80px !important;
    }
    .stj-template .header__first {
        min-height: 0;
        min-width: 80px;
    }
    .stj-template .region-hero,
    .stj-template .header + .region-hero,
    .stj-template .header + main { margin-top: 8px; }
}

/* =================================================================
   Main menu links - make them bold, navy, and visually pop with a
   gold underline reveal so the eye catches them immediately.
   ================================================================= */
/* Level-0 main-menu items: bold navy with gold underline reveal. Font is
   inherited from the global Frank Ruhl Libre rule - no sans-serif here. */
html body.stj-template .main-menu__item--level-0 > .nav-button {
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    padding: 0 !important;
}
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > a.main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button > .main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button > span {
    font-style: normal !important;
    font-variant: normal !important;
    font-stretch: normal !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: .2px !important;
    color: #1B3A5C !important;
    text-transform: none !important;
    position: relative;
    transition: color .2s ease;
    display: inline-block;
}
/* All top-level nav links bold , applies to both plain links and dropdown triggers. */
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > a.main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button > .main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button > span {
    font-weight: 700 !important;
}
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > a.main-menu__nav-link,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button > .main-menu__nav-link {
    padding: 18px 9px !important;
}
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > a.main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .nav-button > .main-menu__nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 3px;
    background: linear-gradient(90deg, #C9A961, #E5C07B, #C9A961);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
/* Hover/active gold tint must be scoped to the LEVEL-0 link only, not
   any descendant link. Otherwise opening a dropdown sets :focus-within
   on the parent and turns every dropdown item gold-on-gray = invisible. */
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:hover > .main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:hover > a.main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:hover > .nav-button > .main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:focus-within > .main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:focus-within > a.main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:focus-within > .nav-button > .main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.active > .main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.active > a.main-menu__nav-link,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.active > .nav-button > .main-menu__nav-link {
    color: #C9A961 !important;
}
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:hover > .main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:hover > a.main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:hover > .nav-button > .main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:focus-within > .main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:focus-within > a.main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0:focus-within > .nav-button > .main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.active > .main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.active > a.main-menu__nav-link::after,
.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.active > .nav-button > .main-menu__nav-link::after {
    transform: scaleX(1);
}
/* HOVER DROPDOWNS - replace the bundled click-to-open behavior with a
   simpler hover/focus open. Position the dropdown directly under its
   parent item, gold accent border on top, navy text on white. */
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.has-children {
    position: relative !important;
}
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.has-children .main-menu__nav-sub-nav,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.has-children .main-menu__nav-sub-nav.hidden {
    /* Visible only when parent is hovered/focused (set below). */
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    background: #fff !important;
    border-top: 3px solid #C9A961 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 12px 28px rgba(15, 36, 64, .15) !important;
    width: max-content !important;
    min-width: 240px !important;
    max-width: 320px !important;
    padding: .25rem 0 !important;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    z-index: 100;
}
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.has-children:hover .main-menu__nav-sub-nav,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.has-children:focus-within .main-menu__nav-sub-nav,
html body.stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0.has-children .main-menu__nav-sub-nav:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* Inner container - strip the bundled padding/positioning. */
html body.stj-template .main-menu__nav-sub-nav .main-menu__nav-sub-nav-container {
    padding: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    position: static !important;
}
html body.stj-template .main-menu__nav-sub-nav ul.main-menu__subnav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}
html body.stj-template .main-menu__nav-sub-nav ul.main-menu__subnav li.main-menu__item--level-1 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    border-bottom: 1px solid #f0eadc !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body.stj-template .main-menu__nav-sub-nav ul.main-menu__subnav li.main-menu__item--level-1:last-child {
    border-bottom: 0 !important;
}
html body.stj-template .main-menu__nav-sub-nav ul.main-menu__subnav li.main-menu__item--level-1 a {
    display: block !important;
    padding: .7rem 1.1rem !important;
    color: #1B3A5C !important;
    -webkit-text-fill-color: #1B3A5C !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, padding-left .15s ease !important;
}
html body.stj-template .main-menu__nav-sub-nav ul.main-menu__subnav li.main-menu__item--level-1 a:hover,
html body.stj-template .main-menu__nav-sub-nav ul.main-menu__subnav li.main-menu__item--level-1 a:focus {
    background: #faf6ec !important;
    color: #C9A961 !important;
    -webkit-text-fill-color: #C9A961 !important;
    padding-left: 1.4rem !important;
}
/* Hide the bundled "Close" button - not needed for hover dropdowns. */
html body.stj-template .main-menu__nav-sub-nav .dropdown-close {
    display: none !important;
}
/* (Belt-and-suspenders catch-all removed - replaced by the targeted
   hover dropdown rules above.) */
@media (max-width: 1199px) {
    .stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .main-menu__nav-link,
    .stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > a.main-menu__nav-link {
        font-size: 15px !important;
        padding: 16px 7px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .stj-template .main-menu__item-list--level-0 > .main-menu__item--level-0 > .main-menu__nav-link::after { transition: none; }
}
.stj-template .mobile-logo img {
    max-height: 80px;
}

/* Social menu - inline row of icons immediately left of the teal utility pill */
.stj-template .utility-social-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
}
.stj-template .menu--social-menu {
    display: block;
    margin: 0;
    padding: 0;
    order: 0;
}
.stj-template .header .header__menu .menu--utility-menu { order: 1; }
.stj-template .menu-social {
    display: flex !important;
    flex-direction: row !important;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 14px;
    align-items: center;
    justify-content: center;
}
.stj-template .menu-social li {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none !important;
}
.stj-template .menu-social li::before,
.stj-template .menu-social li::after { content: none !important; }
.stj-template .header .menu-social .menu-item a,
.stj-template .menu-social .menu-item a,
.stj-template .menu-social a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    color: #1f2c54 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0;
    text-decoration: none;
    font-size: 18px !important;
    transition: color .15s ease, transform .15s ease;
    position: relative;
    padding: 0;
}
.stj-template .menu-social .menu-item a:hover,
.stj-template .menu-social .menu-item a:focus {
    color: #1B3A5C !important;
    transform: translateY(-1px);
}
.stj-template .menu-social .menu-item a::after { content: none !important; }
.stj-template .menu-social .menu-item a i,
.stj-template .menu-social a i {
    font-size: 18px !important;
    line-height: 1;
    display: inline-block !important;
    color: inherit !important;
}
.stj-template .menu-social a > span.visually-hidden { display: none !important; }

/* =================================================================
   A11y
   ================================================================= */

.stj-template .skip-link {
    position: absolute; left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.stj-template .skip-link:focus {
    position: static; width: auto; height: auto;
    padding: .5rem 1rem; background: var(--c-gold); color: var(--c-teal); font-weight: 600;
}
.stj-template .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* =================================================================
   Hero carousel - full-bleed image, bottom-left teal caption box
   ================================================================= */

/* Pre-slick fallback only - when slick hasn't initialized yet, hide all
   slides except the first so the page doesn't show a stack. The bundled
   slick.css + content-carousel-card.css drive everything else. */
.stj-template .region-hero .paragraph--type--content-carousel:not(.slick-initialized) > div ~ div {
    display: none;
}

/* =================================================================
   Page wrapper / typography
   ================================================================= */

.stj-template main#main { min-height: 60vh; }

.stj-template .main.l-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.stj-template .page-title {
    font-size: 2.5rem;
    color: var(--c-navy);
    margin: 0 0 1.5rem;
    font-weight: 700;
}

/* Big section headings (like "Exceptional Patient Care…") */
.stj-template .paragraph--type--text-block h2 {
    color: var(--c-navy);
    font-size: 2.25rem;
    margin: 0 0 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}
.stj-template .paragraph--type--text-block h3 {
    color: var(--c-navy);
    font-size: 1.4rem;
    margin: 1.25rem 0 .5rem;
}
.stj-template .paragraph--type--text-block p {
    line-height: 1.7;
    margin: 0 0 1rem;
    color: var(--c-text);
}

/* =================================================================
   Linked-icon row - HORIZONTAL: icon left, 2-line teal label right
   (matches the target screenshot exactly)
   ================================================================= */

html body.stj-template .stj-linked-grid,
html body.stj-template .paragraph--type--linked-icon-container > .field--name-field-linked-icons,
html body.stj-template .region-content .item-1 .field--name-field-linked-icons,
html body.stj-template .region-content .item-2 .field--name-field-linked-icons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 1.25rem !important;
    margin: 2.75rem 0;
}
@media (max-width: 640px) {
    html body.stj-template .stj-linked-grid,
    html body.stj-template .paragraph--type--linked-icon-container > .field--name-field-linked-icons,
    html body.stj-template .region-content .item-1 .field--name-field-linked-icons,
    html body.stj-template .region-content .item-2 .field--name-field-linked-icons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 380px) {
    html body.stj-template .stj-linked-grid,
    html body.stj-template .paragraph--type--linked-icon-container > .field--name-field-linked-icons,
    html body.stj-template .region-content .item-1 .field--name-field-linked-icons,
    html body.stj-template .region-content .item-2 .field--name-field-linked-icons {
        grid-template-columns: 1fr !important;
    }
}

/* Reset the boxy card style - these should be borderless icon+text rows */
.stj-template .paragraph--type--linked-icon {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transition: transform .15s;
}
.stj-template .paragraph--type--linked-icon:hover { transform: translateY(-2px); }

.stj-template .paragraph--type--linked-icon .link-wrapper {
    display: flex !important;
    align-items: center;
    /* Tightened from 1.25rem ~= roughly 25% reduction in visual gap
       between icon and label. Anything tighter starts to feel cramped. */
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* "Our Achievements" KPI tiles: stack icon ABOVE the number, both
   centred. Scoped to the .stj-achievements wrapper so the Quick
   Actions row (icon-beside-label) is unaffected. */
html body.stj-template .stj-achievements .paragraph--type--linked-icon .link-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: .85rem !important;
    padding: 1.5rem 1rem !important;
}
html body.stj-template .stj-achievements .paragraph--type--linked-icon .field--name-field-icon {
    width: 72px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,169,97,.18) 0%, rgba(201,169,97,0) 70%);
}
html body.stj-template .stj-achievements .paragraph--type--linked-icon .field--name-field-icon i {
    font-size: 2.4rem !important;
    color: #1B3A5C !important;
    line-height: 1 !important;
}
html body.stj-template .stj-achievements .paragraph--type--linked-icon .field--name-field-paragraph {
    text-align: center !important;
}
html body.stj-template .stj-achievements .paragraph--type--linked-icon .field--name-field-paragraph p.teal {
    position: relative;
    padding-bottom: .4rem;
    margin-bottom: .35rem !important;
}
html body.stj-template .stj-achievements .paragraph--type--linked-icon .field--name-field-paragraph p.teal::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: #C9A961;
    border-radius: 1px;
}

.stj-template .paragraph--type--linked-icon .field--name-field-icon {
    flex-shrink: 0;
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
}

.stj-template .paragraph--type--linked-icon .field--name-field-icon img {
    width: 64px; height: 64px;
    margin: 0 !important;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
}

/* Quick-action icon motion: subtle continuous animation per icon,
   amplified on hover. Order matches home.blade.php quick-actions:
   1) Appointment (hospital), 2) Refer (heart-in-hand),
   3) Find Doctor (stethoscope), 4) Find Department (petri dish).
   Card 1 uses an inline SVG so only its cross animates (see below). */
.stj-template .field--name-field-linked-icons > .field__item:nth-child(1)
    .paragraph--type--linked-icon .field--name-field-icon img {
    animation: stj-icon-bob 2.8s ease-in-out infinite;
}

/* Appointment card: inline SVG hospital with the yellow cross
   rising from inside the building up to its resting spot, then easing
   back down. The clipPath effect is faked by the building paths sitting
   on top - but to keep it simple we animate translateY only and let the
   cross travel inside the visible viewBox. */
.stj-template .paragraph--type--linked-icon .field--name-field-icon:has(> .stj-anim-icon) {
    width: 72px; height: 72px;
}
.stj-template .stj-anim-icon {
    width: 72px; height: 72px;
    display: block;
    overflow: visible;
}
.stj-template .stj-anim-icon__cross {
    transform-origin: 36px 25px;
    transform-box: fill-box;
    animation: stj-cross-rise 2.6s ease-in-out infinite;
    will-change: transform;
}
.stj-template .paragraph--type--linked-icon:hover .stj-anim-icon__cross {
    animation-duration: 1.2s;
}
@keyframes stj-cross-rise {
    0%   { transform: translateY(20px); opacity: 0; }
    20%  { opacity: 1; }
    55%  { transform: translateY(0); opacity: 1; }
    80%  { transform: translateY(-3px); }
    100% { transform: translateY(0); opacity: 1; }
}
/* Refer-a-Patient: heart pulses in place inside the hand. */
.stj-template .stj-anim-icon__heart {
    transform-origin: 36px 26px;
    transform-box: fill-box;
    animation: stj-heart-pulse 1.4s ease-in-out infinite;
    will-change: transform;
}
.stj-template .paragraph--type--linked-icon:hover .stj-anim-icon__heart {
    animation-duration: 0.8s;
}
@keyframes stj-heart-pulse {
    0%, 60%, 100% { transform: scale(1); }
    15%           { transform: scale(1.18); }
    30%           { transform: scale(0.95); }
    45%           { transform: scale(1.10); }
}

/* Find-a-Department: microbes drift gently inside the petri dish. */
.stj-template .stj-anim-icon__microbes .m {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
    animation: stj-microbe-drift 3.6s ease-in-out infinite;
}
.stj-template .stj-anim-icon__microbes .m1 { animation-delay: 0s;    animation-duration: 3.2s; }
.stj-template .stj-anim-icon__microbes .m2 { animation-delay: -0.6s; animation-duration: 4.1s; }
.stj-template .stj-anim-icon__microbes .m3 { animation-delay: -1.1s; animation-duration: 3.7s; }
.stj-template .stj-anim-icon__microbes .m4 { animation-delay: -1.8s; animation-duration: 3.0s; }
.stj-template .stj-anim-icon__microbes .m5 { animation-delay: -2.3s; animation-duration: 4.4s; }
.stj-template .stj-anim-icon__microbes .m6 { animation-delay: -0.3s; animation-duration: 3.5s; }
@keyframes stj-microbe-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(2px, -2px) scale(1.1); }
    50%      { transform: translate(-1px, 2px) scale(0.92); }
    75%      { transform: translate(2px, 1px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .stj-template .stj-anim-icon__cross,
    .stj-template .stj-anim-icon__heart,
    .stj-template .stj-anim-icon__microbes .m { animation: none !important; }
    .stj-template .stj-anim-icon animate,
    .stj-template .stj-anim-icon animateTransform { display: none; }
}
.stj-template .field--name-field-linked-icons > .field__item:nth-child(2)
    .paragraph--type--linked-icon .field--name-field-icon img {
    animation: stj-icon-heartbeat 1.6s ease-in-out infinite;
}
.stj-template .field--name-field-linked-icons > .field__item:nth-child(3)
    .paragraph--type--linked-icon .field--name-field-icon img {
    animation: stj-icon-swing 3.2s ease-in-out infinite;
    transform-origin: 50% 15%;
}
.stj-template .field--name-field-linked-icons > .field__item:nth-child(4)
    .paragraph--type--linked-icon .field--name-field-icon img {
    animation: stj-icon-spin 9s linear infinite;
}

.stj-template .paragraph--type--linked-icon:hover .field--name-field-icon img {
    animation-duration: 1s;
}

@keyframes stj-icon-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes stj-icon-heartbeat {
    0%, 60%, 100% { transform: scale(1); }
    15%           { transform: scale(1.18); }
    30%           { transform: scale(0.96); }
    45%           { transform: scale(1.10); }
}
@keyframes stj-icon-swing {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}
@keyframes stj-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .stj-template .paragraph--type--linked-icon .field--name-field-icon img {
        animation: none !important;
    }
}

.stj-template .paragraph--type--linked-icon .field--name-field-icon i {
    font-size: 2.5rem !important;
    color: var(--c-teal-2) !important;
    height: auto !important;
}

.stj-template .paragraph--type--linked-icon .field--name-field-paragraph {
    text-align: left;
    line-height: 1.25;
}

.stj-template .paragraph--type--linked-icon .field--name-field-paragraph p {
    margin: 0 !important;
    color: var(--c-teal-2);
    font-size: 1.15rem;
    font-weight: 500;
}
.stj-template .paragraph--type--linked-icon .field--name-field-paragraph p.teal {
    color: var(--c-teal-2);
    font-weight: 500;
}

/* =================================================================
   Faculty-leader section (matches second target screenshot)
   2-col grid: image with yellow L corner | heading + body + button
   ================================================================= */

.stj-template .faculty-leader-section {
    margin: 3rem 0;
}

.stj-template .faculty-leader-section h2 {
    color: var(--c-navy);
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 2.5rem;
    line-height: 1.15;
}

.stj-template .faculty-leader-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 768px) {
    .stj-template .faculty-leader-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .stj-template .faculty-leader-section h2 { font-size: 1.75rem; }
}

.stj-template .faculty-leader-image {
    position: relative;
    padding: 1.25rem 0 0 1.25rem;
}

.stj-template .faculty-leader-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 50%;
    border-top: 4px solid var(--c-gold);
    border-left: 4px solid var(--c-gold);
}

.stj-template .faculty-leader-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    aspect-ratio: 4/5;
}

.stj-template .faculty-leader-image .leader-caption {
    margin-top: 1rem;
}
.stj-template .faculty-leader-image .leader-name {
    color: var(--c-navy);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 .25rem;
    line-height: 1.25;
}
.stj-template .faculty-leader-image .leader-title {
    color: var(--c-text);
    font-size: .95rem;
    line-height: 1.5;
    margin: .15rem 0;
}

.stj-template .faculty-leader-body p {
    color: var(--c-text);
    line-height: 1.75;
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.stj-template .faculty-leader-body .btn-readmore {
    display: inline-block;
    margin-top: 1rem;
    padding: .65rem 2rem;
    border: 2px solid var(--c-teal);
    color: var(--c-teal);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.stj-template .faculty-leader-body .btn-readmore:hover {
    background: var(--c-teal);
    color: #fff;
}

/* =================================================================
   Photo-CTA grid (department / doctor cards)
   ================================================================= */

.stj-template .paragraph--type--photo-cta-row { margin: 2rem 0; }

.stj-template .paragraph--type--photo-cta-row > .field--name-field-photo-ctas {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* Photo CTA - rounded-rectangle cards with arched top + gold underline.
   Distinct from circular our treatment. */
html body.stj-template .paragraph--type--photo-cta {
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(27, 58, 92, 0.06) !important;
    transition: transform .25s, box-shadow .25s;
    border: 1px solid #ece4d3 !important;
    position: relative;
}
html body.stj-template .paragraph--type--photo-cta::after {
    content: '' !important;
    position: absolute !important;
    left: 1.25rem; right: 1.25rem; bottom: 0;
    height: 3px;
    background: #C9A961;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
html body.stj-template .paragraph--type--photo-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(27, 58, 92, 0.14) !important;
}
html body.stj-template .paragraph--type--photo-cta:hover::after { transform: scaleX(1); }
html body.stj-template .paragraph--type--photo-cta .link-wrapper {
    display: block; text-decoration: none; color: inherit;
}
/* Override bundle's circular image treatment */
html body.stj-template .paragraph--type--photo-cta .field--name-field-photo-cta-image,
html body.stj-template .paragraph--type--photo-cta .image-wrapper {
    border-radius: 12px 12px 0 0 !important;
    outline: none !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 11 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}
html body.stj-template .paragraph--type--photo-cta .field--name-field-photo-cta-image img,
html body.stj-template .paragraph--type--photo-cta .image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform .35s ease;
}
html body.stj-template .paragraph--type--photo-cta:hover .image-wrapper img,
html body.stj-template .paragraph--type--photo-cta:hover .field--name-field-photo-cta-image img {
    transform: scale(1.05);
}
html body.stj-template .paragraph--type--photo-cta .link-arrow { display: none !important; }
html body.stj-template .paragraph--type--photo-cta .field--name-field-title {
    padding: 1rem 1.25rem .75rem !important;
    text-align: left !important;
}
html body.stj-template .paragraph--type--photo-cta .field--name-field-title h3 {
    margin: 0 !important;
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 1.1rem !important;
    color: #1B3A5C !important;
    font-weight: 600 !important;
}
html body.stj-template .paragraph--type--photo-cta .field--name-field-paragraph {
    padding: 0 1.25rem 1.25rem !important;
}

/* =================================================================
   News teaser cards
   ================================================================= */

.stj-template .view-news-events .view-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.stj-template .views-row .node--type-news {
    background: #fff; border-radius: 6px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}
.stj-template .views-row .node--type-news:hover {
    transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.stj-template .views-row .node--type-news .field--name-field-image img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
.stj-template .views-row .node--type-news .text-container { padding: 1.25rem; }
.stj-template .views-row .node--type-news h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.stj-template .views-row .node--type-news h2 a { color: var(--c-navy); text-decoration: none; }
.stj-template .views-row .node--type-news h2 a:hover { color: var(--c-teal); }
.stj-template .views-row .node--type-news .field--name-field-date-published {
    font-size: .875rem; color: var(--c-muted); margin-bottom: .5rem;
}
.stj-template .views-row .node--type-news .field--name-body {
    font-size: .9rem; line-height: 1.55; color: #444;
}

/* =================================================================
   Pager
   ================================================================= */

.stj-template .pager { margin: 2rem 0; }
.stj-template .pager__items {
    display: flex; gap: .25rem; list-style: none; padding: 0; margin: 0;
    justify-content: center; flex-wrap: wrap;
}
.stj-template .pager__item a, .stj-template .pager__item button {
    display: inline-block; padding: .5rem .85rem;
    border: 1px solid var(--c-border); background: #fff; color: var(--c-teal);
    text-decoration: none; border-radius: 4px; cursor: pointer;
}
.stj-template .pager__item.is-active a {
    background: var(--c-teal); color: #fff; border-color: var(--c-teal);
}
.stj-template .pager__item button.disabled { opacity: .4; cursor: not-allowed; }

/* =================================================================
   Footer
   ================================================================= */

.stj-template .footer {
    background: var(--c-navy);
    color: #fff;
    padding: 3rem 0 0;
    margin-top: 4rem;
}
.stj-template .footer__inner {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 3rem;
    padding-bottom: 2.5rem;
}
@media (max-width: 768px) {
    .stj-template .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}
.stj-template .footer__second {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem;
}
@media (max-width: 768px) {
    .stj-template .footer__second { grid-template-columns: 1fr; gap: 1.5rem; }
}
.stj-template .footer__logo img { max-width: 160px; width: auto; height: auto; }
.stj-template .footer .menu--footer .menu { list-style: none; padding: 0; margin: 0; }
.stj-template .footer .menu--footer .menu-item a {
    display: block; padding: .35rem 0; color: #fff; opacity: .85; transition: opacity .2s;
}
.stj-template .footer .menu--footer .menu-item a:hover { opacity: 1; color: var(--c-gold); }

/* ============================================================
   Education Programs heading (kan-columns) - navy title + gold underline
   ============================================================ */
.stj-template .paragraph--type--kan-columns > .field--name-field-heading {
    color: var(--c-navy) !important;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.75rem;
    padding-bottom: .85rem;
    position: relative;
    display: block;
}
.stj-template .paragraph--type--kan-columns > .field--name-field-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60%;
    height: 2px;
    background: var(--c-gold);
}

/* ============================================================
   Clinical Programs faculty-grid - text left, image collage right
   with yellow arc on main image
   ============================================================ */
.stj-template .paragraph--type--faculty-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.2fr);
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
}
@media (max-width: 900px) {
    .stj-template .paragraph--type--faculty-grid {
        grid-template-columns: 1fr;
    }
}
.stj-template .paragraph--type--faculty-grid .faculty-text h2 {
    color: var(--c-navy);
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 2rem;
    margin: 0 0 1rem;
}
.stj-template .paragraph--type--faculty-grid .faculty-text p {
    color: #333;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}
.stj-template .paragraph--type--faculty-grid .faculty-images {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    position: relative;
}
.stj-template .paragraph--type--faculty-grid .main-image {
    grid-row: 1 / span 2;
    position: relative;
    aspect-ratio: 1 / 1;
}
.stj-template .paragraph--type--faculty-grid .main-image img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 50%;
}
.stj-template .paragraph--type--faculty-grid .yellow-round-border {
    position: absolute; inset: -8px;
    pointer-events: none; z-index: 2;
}
.stj-template .paragraph--type--faculty-grid .yellow-round-border svg {
    width: 100%; height: 100%;
}
.stj-template .paragraph--type--faculty-grid .faculty-small-images {
    display: contents;
}
.stj-template .paragraph--type--faculty-grid .faculty-small-images > div {
    aspect-ratio: 1 / 1;
}
.stj-template .paragraph--type--faculty-grid .faculty-small-images img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e4e7eb;
}
.stj-template .paragraph--type--faculty-grid .field--name-field-grid-image-bottom-left,
.stj-template .paragraph--type--faculty-grid .field--name-field-grid-image-bottom-right {
    display: none; /* show only top-row 2 small images on smaller layouts; bundled CSS will pick up larger views */
}
@media (min-width: 1100px) {
    .stj-template .paragraph--type--faculty-grid .faculty-images {
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .stj-template .paragraph--type--faculty-grid .field--name-field-grid-image-bottom-left,
    .stj-template .paragraph--type--faculty-grid .field--name-field-grid-image-bottom-right {
        display: block;
    }
}

/* Read More pill button on Clinical Programs / faculty leader */
.stj-template .btn-readmore {
    display: inline-block;
    border: 2px solid var(--c-teal);
    color: var(--c-teal);
    background: transparent;
    border-radius: 999px;
    padding: .65rem 2rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.stj-template .btn-readmore:hover {
    background: var(--c-teal);
    color: #fff;
}

/* ============================================================
   Hide print-only logo on screen (was bleeding off the left)
   ============================================================ */
.stj-template .print-logo { display: none !important; }
@media print {
    .stj-template .print-logo { display: block !important; }
}

/* If hero has no children at all (no banners), collapse it. */
.stj-template .region-hero:empty,
.stj-template .region-hero .paragraph--type--content-carousel:empty {
    display: none !important;
}

/* ============================================================
   Hero - explicit overrides since bundled CSS isn't fully wiring up.
   Mirror the original our design: teal caption top-left with rounded
   bottom-right cut, gold L-corner, wave divider bottom, dots + arrows.
   ============================================================ */

/* Wrapper provides positioning context for absolute caption.
   overflow: visible so wave + dots + arrows can sit in a strip BELOW
   the image (matching the original reference where the controls live in
   their own white strip under the image, not overlaid on it). The
   padding-bottom carves out that strip. */
.stj-template .region-hero .content-carousel-card-wrapper.desktop {
    position: relative;
    overflow: visible;
    background: #fff;
    padding-bottom: 6.5rem;
}

/* Image fills the full width, natural aspect ratio (no clamping) */
.stj-template .region-hero .content-carousel-card-wrapper .media-container {
    position: relative;
    width: 100%;
    aspect-ratio: 127 / 50;
    overflow: hidden;
}
.stj-template .region-hero .content-carousel-card-wrapper .media-container article,
.stj-template .region-hero .content-carousel-card-wrapper .media-container .field {
    display: block;
    width: 100%;
    height: 100%;
}
.stj-template .region-hero .content-carousel-card-wrapper .media-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Wave dividers - the bundled CSS positions vector-bottom absolutely */
.stj-template .region-hero .content-carousel-card-wrapper .vector {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 5;
    pointer-events: none;
}
.stj-template .region-hero .content-carousel-card-wrapper .vector-top    { top: 0; }
/* Wave lives at the SEAM between the image and the controls strip
   (no overlay onto the image). The wrapper's padding-bottom is
   6.5rem; bottom: 6.5rem pins the wave's TOP edge to the image's
   bottom edge - then transform: translateY(-100%) lifts the SVG
   so its bottom flush-aligns to that seam. */
.stj-template .region-hero .content-carousel-card-wrapper .vector-bottom {
    top: auto;
    bottom: 6.5rem;
    transform: translateY(50%);
    margin: 0;
}

/* Gold L-corner (decorative) */
.stj-template .region-hero .content-carousel-card-wrapper .corner-detail.desktop {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    z-index: 6;
}

/* === Teal caption box, top-left ===
   Caption is now a DIRECT child of .content-carousel-card-wrapper (we removed
   the .content-carousel-card-content-container wrapper from the markup so the
   bundled content-carousel-card.css rule resolves correctly). Positioning is
   driven by the bundled CSS:
     .content-carousel-card-wrapper .content-carousel-card-content {
       position: absolute; top: 0; left: 0; width: 28.75rem; z-index: 2;
       background: rgb(20,130,140);
       border-radius: 0 0 4.375rem 0;
     }
   We only need to override the gradient + ensure the bottom-right radius. */
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content {
    background: linear-gradient(135deg, #C9A961 0%, rgba(15, 56, 138, .92) 100%);
    color: #fff;
    border-radius: 0 0 4rem 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content .heading,
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content .field--name-field-heading {
    font-family: 'Frank Ruhl Libre', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 1rem;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content .body,
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content .field--name-field-body {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1.75rem;
    opacity: .95;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content .link a {
    display: inline-block;
    padding: .85rem 2.25rem;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s, color .2s;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content .link a:hover {
    background: #fff;
    color: #C9A961;
}

/* Mobile variant - stack caption below image */
@media (max-width: 1023px) {
    .stj-template .region-hero .content-carousel-card-wrapper.desktop {
        display: none;
    }
    .stj-template .region-hero .content-carousel-card-wrapper.mobile {
        display: block;
        background: #C9A961;
    }
    .stj-template .region-hero .content-carousel-card-wrapper.mobile .vector {
        display: none !important;
    }
    .stj-template .region-hero .content-carousel-card-wrapper.mobile .content-carousel-card-content {
        padding: 1.5rem;
        color: #fff;
    }
    .stj-template .region-hero .content-carousel-card-wrapper.mobile .heading,
    .stj-template .region-hero .content-carousel-card-wrapper.mobile .field--name-field-heading {
        color: #fff; font-size: 1.5rem; font-weight: 600; margin: 0 0 .5rem;
    }
}
@media (min-width: 1024px) {
    .stj-template .region-hero .content-carousel-card-wrapper.mobile { display: none; }
}

/* Slick dots styling lives further down (search ".slick-dots li" - the
   block that targets each <li> + <button>). The earlier centered-white
   override here was wrong; bundled CSS already absolute-positions the
   dots at bottom-left of the carousel per our theme. */

/* === Slick prev/next arrows === */
.stj-template .region-hero .slick-arrow {
    position: absolute;
    bottom: -3.25rem;
    z-index: 20;
    width: 40px; height: 40px;
    background: transparent;
    border: 2px solid #1B3A5C;
    border-radius: 50%;
    color: #1B3A5C;
    font-size: 0;
    cursor: pointer;
}
.stj-template .region-hero .slick-arrow::before {
    content: '';
    display: block;
    width: 8px; height: 8px;
    border-top: 2px solid #1B3A5C;
    border-right: 2px solid #1B3A5C;
    margin: auto;
}
.stj-template .region-hero .slick-prev { right: 6rem; }
.stj-template .region-hero .slick-prev::before { transform: rotate(-135deg); margin-left: 16px; }
.stj-template .region-hero .slick-next { right: 1.5rem; }
.stj-template .region-hero .slick-next::before { transform: rotate(45deg); margin-left: 12px; }

/* Pause / play button - theme-libs.js inserts a <button class="slick-pause slick-arrow">
   between .slick-prev and .slick-next. Position it between the two and
   render an icon via ::before so the bare-text "Pause" / "Play" disappears. */
html body.stj-template .region-hero .slick-pause {
    right: 3.75rem !important;
    font-size: 0 !important;
    color: transparent !important;
}
html body.stj-template .region-hero .slick-pause::before {
    content: '' !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    margin: auto !important;
    border: 0 !important;
    transform: none !important;
    background:
        linear-gradient(#1B3A5C, #1B3A5C) left/3px 100% no-repeat,
        linear-gradient(#1B3A5C, #1B3A5C) right/3px 100% no-repeat !important;
}
html body.stj-template .region-hero .slick-pause.slick-play::before {
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 9px solid #1B3A5C !important;
    border-right: 0 !important;
}

/* ============================================================
   Hero - let Slick fully manage .slick-list / .slick-track / .slick-slide.
   Touching them breaks the slider (slides stop hiding, all stack vertically).
   We only style our own .content-carousel-card-wrapper inside the slide.
   ============================================================ */
/* our theme-style hero: image area on top (600px), then a white strip
   below (~104px) holding the wave + dots + arrows. Wrapper height =
   image area + strip; media-container is pinned to the top portion
   so the bottom 6.5rem stays empty for the controls. */
@media (min-width: 1024px) {
.stj-template .region-hero .content-carousel-card-wrapper.desktop {
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
    display: block !important;
    background: #fff !important;
    padding-bottom: 4rem !important;
    margin-bottom: 0 !important;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .media-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 820px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .media-container article,
.stj-template .region-hero .content-carousel-card-wrapper.desktop .media-container .field,
.stj-template .region-hero .content-carousel-card-wrapper.desktop .media-container .field__item {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .media-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
} /* end @media (min-width: 1024px) */

/* Caption - top-left teal box, rounded bottom-right corner */
.stj-template .region-hero .content-carousel-card-wrapper.desktop .content-carousel-card-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 28rem !important;
    max-width: 90vw !important;
    padding: 4rem 3rem 3rem 3rem !important;
    background: linear-gradient(135deg, #C9A961 0%, rgba(15, 56, 138, .92) 100%) !important;
    color: #fff !important;
    border-radius: 0 0 4rem 0 !important;
    z-index: 10 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15) !important;
}

/* Wave dividers - match the original our behavior:
     .vector-top    - sits at the top edge of the card wrapper
     .vector-bottom - sits at the bottom edge AND bleeds 35% past it
                      (25% above 90em / 1440px) so the curves visually flow
                      into the section below the hero. */
.stj-template .region-hero .content-carousel-card-wrapper.desktop .vector {
    position: absolute !important;
    width: 100% !important;
    height: auto !important;
    z-index: 10 !important;
    pointer-events: none !important;
    left: 0 !important;
    right: auto !important;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .vector-top {
    top: 0 !important;
    transform: none !important;
    display: block !important;
    /* Top wave must paint OVER the caption box. The fixed caption
       overlay sits at z-index: 9999; we go higher so the gray
       curves continue across the top of the caption, matching the
       original reference. */
    z-index: 10000 !important;
    pointer-events: none !important;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .vector-bottom {
    /* Wave sits FULLY BELOW the image - its top edge meets the
       image's bottom edge, body spans into the controls strip. */
    top: auto !important;
    bottom: 4rem !important;
    transform: translateY(25%) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .vector svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Allow the bottom wave to BLEED out of the wrapper into the section below.
   Wrapper overflow MUST be visible; image still clipped via .media-container. */
.stj-template .region-hero .content-carousel-card-wrapper.desktop {
    overflow: visible !important;
}
.stj-template .region-hero .content-carousel-card-wrapper.desktop .media-container {
    overflow: hidden !important;
}
/* Keep slick-list clipped - earlier `overflow: visible` was bleeding adjacent
   slides' waves into the active slide and made the bottom of the hero look
   like a tangle of overlapping curves. Constrain waves to the hero. */
.stj-template .region-hero,
.stj-template .region-hero .slick-list,
.stj-template .region-hero .paragraph--type--content-carousel {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Gold L-corner - bottom-right of hero */
.stj-template .region-hero .content-carousel-card-wrapper.desktop .corner-detail.desktop {
    position: absolute !important;
    bottom: 6rem !important;
    right: 2rem !important;
    width: 50px; height: 50px;
    z-index: 6 !important;
}

/* (Debug outlines removed - root cause identified: my prior overrides on
   .slick-slide were breaking Slick's slide visibility. Removed those.) */

/* ============================================================
   Caption - FORCE left positioning with maximum specificity.
   The caption was rendering on the right side; nuke any
   competing right/inset rules.
   ============================================================ */
html body .stj-template .region-hero .slick-slide .content-carousel-card-wrapper.desktop .content-carousel-card-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    transform: none !important;
    direction: ltr !important;
    margin: 0 !important;
}

/* ============================================================
   STJ HERO CAPTION - completely new class names so the bundled
   .content-carousel-card-content rules don't apply at all.
   ============================================================ */
.stj-template .region-hero .stj-hero-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 28rem;
    max-width: 90vw;
    padding: 4rem 2.5rem 3rem 2.5rem;
    background: linear-gradient(135deg, #C9A961 0%, rgba(15, 56, 138, .92) 100%);
    color: #fff;
    border-radius: 0 0 4rem 0;
    z-index: 10;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    direction: ltr;
}
.stj-template .region-hero .stj-hero-caption__title {
    font-family: 'Frank Ruhl Libre', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1rem;
}
.stj-template .region-hero .stj-hero-caption__body {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1.75rem;
    opacity: .95;
}
.stj-template .region-hero .stj-hero-caption__btn {
    display: inline-block;
    padding: .75rem 2.25rem;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s, color .2s;
}
.stj-template .region-hero .stj-hero-caption__btn:hover {
    background: #fff;
    color: #C9A961;
}

/* ============================================================
   STJ HERO CAPTION - FORCE left placement with high specificity.
   Slick wraps each slide in .slick-slide; some bundled rules
   try to push absolutely-positioned children to the right edge.
   This belt-and-braces rule pins our caption to the top-left
   regardless of locale or competing inline-axis rules.
   ============================================================ */
html body .stj-template .region-hero .slick-slide .content-carousel-card-wrapper.desktop .stj-hero-caption {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    transform: none !important;
    direction: ltr !important;
    margin: 0 !important;
}
[dir="rtl"] html body .stj-template .region-hero .slick-slide .content-carousel-card-wrapper.desktop .stj-hero-caption {
    /* In RTL, mirror to the visual right - top-right teal box */
    left: auto !important;
    right: 0 !important;
    border-radius: 0 0 0 4rem;
}

/* ============================================================
   SLICK DOTS - make absolutely sure the pagination row renders.
   Slick appends <ul class="slick-dots"> after the slide track;
   bundled CSS sometimes hides it via display:none. Re-show and
   give each <li> a visible inline box.
   ============================================================ */
.stj-template .region-hero .slick-dots {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.stj-template .region-hero .slick-dots li {
    display: inline-flex !important;
    width: 22px;
    height: 22px;
    margin: 0 6px;
}
.stj-template .region-hero .slick-dots li button {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #1B3A5C !important;
    border: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    opacity: 0.55 !important;
    transition: opacity .2s ease !important;
}
.stj-template .region-hero .slick-dots li.slick-active button,
.stj-template .region-hero .slick-dots li:hover button {
    background: #1B3A5C !important;
    opacity: 1 !important;
}
/* Hide slick's auto-numbered text inside each dot button */
.stj-template .region-hero .slick-dots li button::before {
    content: '' !important;
    display: none !important;
}

/* ============================================================
   QUICK LINKS - fixed vertical pull-out tab on the page edge.
   Mirrors the the original target's right-side "Quick Links" tab.
   Colors are inlined (no CSS vars) so this works without the
   premium.css palette that the surgery bundle doesn't load.
   ============================================================ */
.quick-links-tab {
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}
@media (max-width: 767px) {
    .quick-links-tab { display: none !important; }
}
[dir="rtl"] .quick-links-tab { right: auto; left: 0; flex-direction: row; }
.quick-links-toggle {
    background: #1B3A5C;
    color: #fff;
    border: none;
    padding: 14px 10px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.25s;
}
[dir="rtl"] .quick-links-toggle { writing-mode: vertical-lr; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); }
.quick-links-toggle:hover { background: #0f2440; }
.quick-links-toggle i { transform: rotate(-90deg); transition: transform 0.3s; }
.quick-links-tab.is-open .quick-links-toggle i { transform: rotate(90deg); }
.quick-links-panel {
    background: #fff;
    min-width: 230px;
    border-top: 3px solid #C9A961;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: -6px 6px 24px rgba(0, 0, 0, 0.08);
}
.quick-links-panel ul { list-style: none; margin: 0; padding: 0; }
.quick-links-panel li { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.quick-links-panel li:last-child { border-bottom: none; }
.quick-links-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: #0E2A4A;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.quick-links-panel a i { color: #1B3A5C; width: 18px; text-align: center; }
.quick-links-panel a:hover { background: #FBF7EC; color: #0f2440; }

/* ============================================================
   FINAL OVERRIDES - appended last so they win.
   Targets bumped to maximum practical specificity so they beat
   anything in the 65-file surgery-bundle.css.
   ============================================================ */

/* Caption - pin to TOP-LEFT of the desktop card wrapper.
   Uses html body + slick-track ancestry to outweigh bundled rules. */
/* In-slide captions are now hidden - content is rendered into the
   .stj-hero-caption-fixed overlay outside the slick carousel by the
   sync script in home.blade.php (push('scripts')). This avoids the
   slick-translate offset that pushes slide content offscreen on
   wide viewports. */
html body.stj-template .region-hero .slick-track .slick-slide .stj-hero-caption {
    display: none !important;
}

/* Fixed caption overlay - anchored to .region-hero (viewport-width). */
html body.stj-template .region-hero {
    position: relative !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    width: 32rem !important;
    max-width: 90vw !important;
    padding: 4rem 4.5rem 5rem 3.5rem !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #C9A961 0%, rgba(15, 56, 138, .96) 100%) !important;
    color: #fff !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    direction: ltr !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Curved bottom-right corner replaces the old slanted clip-path so the
       card echoes the circular aesthetic used across the rest of the site. */
    clip-path: none !important;
    border-radius: 0 0 9rem 0 !important;
    overflow: hidden !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed[hidden] {
    display: none !important;
}

/* Awards badge - bottom-right of hero, anchored to .region-hero so it
   tracks viewport like the caption overlay. */
html body.stj-template .region-hero .stj-hero-award {
    position: absolute !important;
    right: 1.5rem !important;
    bottom: 4.5rem !important;
    left: auto !important;
    width: 8.5rem !important;
    max-width: 30vw !important;
    z-index: 25 !important;
    display: block !important;
    line-height: 0 !important;
    text-decoration: none !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25)) !important;
    transition: transform .2s ease !important;
}
html body.stj-template .region-hero a.stj-hero-award:hover {
    transform: translateY(-2px) !important;
}
html body.stj-template .region-hero .stj-hero-award img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
html[dir="rtl"] body.stj-template .region-hero .stj-hero-award {
    right: auto !important;
    left: 1.5rem !important;
}
@media (max-width: 768px) {
    html body.stj-template .region-hero .stj-hero-award { width: 5.5rem !important; bottom: 3rem !important; }
}
html[dir="rtl"] body.stj-template .region-hero .stj-hero-caption-fixed {
    left: auto !important;
    right: 0 !important;
    border-radius: 0 0 0 4rem !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__title {
    font-family: 'Frank Ruhl Libre', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 2.25rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: #fff !important;
    margin: 0 0 1rem !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__body {
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin: 0 0 1.5rem !important;
    opacity: .95 !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__btn {
    display: inline-block !important;
    padding: .75rem 2rem !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: transparent !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: background .2s, color .2s !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__btn:hover {
    background: #fff !important;
    color: #C9A961 !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__btn[style*="display: none"],
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__btn[style*="display:none"] {
    display: none !important;
}

/* Force the image stack BELOW the caption - bundled CSS may push
   .media-container / article / img to a high z-index. */
html body.stj-template .region-hero .slick-track .slick-slide .content-carousel-card-wrapper.desktop .media-container,
html body.stj-template .region-hero .slick-track .slick-slide .content-carousel-card-wrapper.desktop .media-container article,
html body.stj-template .region-hero .slick-track .slick-slide .content-carousel-card-wrapper.desktop .media-container .field,
html body.stj-template .region-hero .slick-track .slick-slide .content-carousel-card-wrapper.desktop .media-container img {
    z-index: 1 !important;
}
/* Mobile caption stays hidden because its parent
   .content-carousel-card-wrapper.mobile already has display:none ≥1024px;
   no extra rule needed here. */
html[dir="rtl"] body.stj-template .region-hero .slick-track .slick-slide .content-carousel-card-wrapper.desktop > .stj-hero-caption {
    left: auto !important;
    right: 0 !important;
    border-radius: 0 0 0 4rem !important;
}

/* Slick dots block - neutralized. Canonical styles live further
   down the file (search "Dots pinned bottom-LEFT"). */

/* ============================================================
   DEPARTMENT SUB-NAV - sticky horizontal nav rendered at the
   top of frontend.departments.show. Anchors to in-page sections.
   Mirrors the the original per-department mini-site nav.
   ============================================================ */
.department-subnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin: 0 0 1.5rem;
}
.department-subnav__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: .75rem 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.department-subnav__inner::-webkit-scrollbar { display: none; }
.department-subnav__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1B3A5C;
    white-space: nowrap;
    flex-shrink: 0;
}
.department-subnav__brand i {
    color: #C9A961;
    font-size: 1.1rem;
}
.department-subnav__list {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}
.department-subnav__list a {
    display: inline-block;
    padding: .55rem .9rem;
    color: #1d1d1d;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    border-radius: 999px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s;
}
.department-subnav__list a:hover {
    color: #1B3A5C;
    background: #FBF7EC;
}
.department-subnav__list a.is-active {
    color: #1B3A5C;
    border-bottom-color: #1B3A5C;
    background: transparent;
}
[dir="rtl"] .department-subnav__inner { direction: rtl; }
@media (max-width: 768px) {
    .department-subnav__brand { font-size: .95rem; }
    .department-subnav__list a { padding: .5rem .65rem; font-size: .85rem; }
}

/* Add scroll-margin-top to anchor targets so the sticky subnav doesn't
   cover the section heading when jumping via in-page links. */
[id^="dept-"] {
    scroll-margin-top: 130px;
}

/* ============================================================
   SOCIAL MENU - sits left of the utility pill in the header.
   Renders icon-only buttons; falls back to platform name if no
   .icon set on the social-link record.
   ============================================================ */
.stj-template .utility-social-container {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
}
.stj-template .menu--social-menu {
    margin: 0 !important;
    padding: 0 !important;
}
.stj-template .menu-social {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
}
.stj-template .menu-social li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.stj-template .menu-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background .2s, color .2s, transform .2s !important;
}
.stj-template .menu-social a i {
    font-size: 13px !important;
    line-height: 1 !important;
    color: inherit !important;
}
.stj-template .menu-social a:hover {
    background: #C9A961 !important;
    color: #1B3A5C !important;
    transform: translateY(-1px) !important;
}
.stj-template .menu-social .menu-item--twitter   a:hover { background: #1DA1F2 !important; color: #fff !important; }
.stj-template .menu-social .menu-item--instagram a:hover { background: #E4405F !important; color: #fff !important; }
.stj-template .menu-social .menu-item--linkedin  a:hover { background: #0A66C2 !important; color: #fff !important; }
.stj-template .menu-social .menu-item--youtube   a:hover { background: #FF0000 !important; color: #fff !important; }
.stj-template .menu-social .menu-item--facebook  a:hover { background: #1877F2 !important; color: #fff !important; }
@media (max-width: 1023px) {
    .stj-template .menu--social-menu { display: none !important; }
}

/* ============================================================
   HERO LAYOUT POLISH - close the empty gap between the hero and
   the first content section, slim the dots strip, and make sure
   the hero is fully full-bleed (no page padding side-clipping).
   ============================================================ */

/* Hero is full-bleed: zero side padding/margin, breaks out of any
   parent container width constraint. */
html body.stj-template .region.region-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* allow the bottom wave to bleed down into the section below */
    overflow: visible !important;
}

/* The bundled .paragraph--type--content-carousel reserves padding-bottom
   for the wave bleed; we don't need it because we now let the wave
   actually bleed. Kill the padding to close the empty gap. */
html body.stj-template .region-hero
    .paragraph--type--content-carousel.slick-slider {
    padding-bottom: 0 !important;
}

/* Static hero wave - overlays the bottom edge of the carousel and
   bleeds ~50% into the section below for a soft transition. Lives
   OUTSIDE slick so slick-list's overflow:hidden can't clip it. */
html body.stj-template .region-hero .stj-hero-wave {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 15 !important;
    pointer-events: none !important;
    transform: translateY(35%) !important;
    line-height: 0 !important;
}
html body.stj-template .region-hero .stj-hero-wave svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
@media (min-width: 90em) {
    html body.stj-template .region-hero .stj-hero-wave {
        transform: translateY(25%) !important;
    }
}

/* Earlier slick-dots blocks neutralized - see canonical block below. */

/* The Drupal page wrapper (.l-content / page-content-outer-wrap) has
   inherited top padding that pushes the first content section ~80px
   below the hero. Tighten that gap. */
html body.stj-template .l-content,
html body.stj-template .page-content-outer-wrap,
html body.stj-template .page-content-inner-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
html body.stj-template .region.region-content {
    padding-top: 1rem !important;
}

/* First section in the content region - usually the quick-action
   icon row - should sit close to the hero, not floated mid-page. */
html body.stj-template .region.region-content
    .components-wrap .field__item.item-1 {
    margin-top: 0 !important;
    padding-top: .5rem !important;
}

/* Defensive: the whole hero image area can lose its bottom margin
   so the dots/waves blend straight into the next section. */
html body.stj-template .region-hero
    .paragraph--type--content-carousel.slick-slider {
    margin-bottom: 0 !important;
}

/* ============================================================
   PHOTO-CTA CARDS - bundle sets opacity:0 expecting a scroll-into-
   view JS handler to add .animate to photo-cta-row. We never wired
   that, so cards stay invisible. Force opacity:1 so the cards (and
   the doctor/department/education photos) are actually visible.
   The bundle's slideUp animation only fires on .animate so this
   doesn't conflict - it just removes the hidden default state.
   ============================================================ */
html body.stj-template .paragraph--type--photo-cta {
    opacity: 1 !important;
}

/* Same fix for the faculty-grid (Clinical Programs section) main
   image and small-image grid. */
html body.stj-template .paragraph--type--faculty-grid .faculty-images .main-image,
html body.stj-template .paragraph--type--faculty-grid .faculty-images .faculty-small-images > .field {
    opacity: 1 !important;
}

/* ============================================================
   HERO CAROUSEL - force the slick-slider container to align
   to the left edge of region-hero. The bundled CSS gives the
   carousel a 300px left offset on wide viewports which leaves
   the active slide hanging off the left of the viewport.
   ============================================================ */
html body.stj-template .region-hero
    .paragraph--type--content-carousel.slick-slider {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
html body.stj-template .region-hero .slick-list {
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   FOOTER - our theme-style navy footer with a soft wave divider on
   top, three-cell grid (logo | nav | social/award), and a
   bottom strip with copyright + universal nav.
   ============================================================ */
html body.stj-template .footer {
    position: relative !important;
    background: #1B3A5C !important;
    color: #fff !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
/* Wave strip ABOVE the navy footer body. The strip itself is white
   (gray curves on white) and the SVG's last path is a navy fill that
   forms the lower wave shape - that navy fill butts up flush against
   the navy footer body, so the seam is invisible. The waves element
   sits directly above .footer__container with no negative margin
   and no overlap (any overlap creates a visible wavy band). */
html body.stj-template .footer__waves {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 60px !important;
    max-height: 60px !important;
    background: transparent !important;
    pointer-events: none !important;
    line-height: 0 !important;
    overflow: hidden !important;
    margin: 0 0 -1px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    /* SVG's bottom fill uses currentColor so the wave seam matches the
       footer background. Inline style on this element overrides this
       default whenever an admin sets a custom footer_background_color. */
    color: #6B5E40;
}
html body.stj-template .footer__waves-img {
    display: block !important;
    width: 100% !important;
    height: 60px !important;
    object-fit: cover;
    object-position: bottom;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 768px) {
    html body.stj-template .footer__waves,
    html body.stj-template .footer__waves-img { height: 40px !important; max-height: 40px !important; }
}
html body.stj-template .footer__waves svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
html body.stj-template .footer__waves svg path {
    vector-effect: non-scaling-stroke !important;
    stroke-width: 1 !important;
}
/* Navy body sits below the wave strip. Apply background and wave-kill
   to the footer itself rather than .footer__container so the rules
   live on the wrapper element. */
html body.stj-template .footer {
    background: #6B5E40 !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Decorative Jerusalem skyline panorama on the navy footer.
   The source PNG is sparse line-art (~0.3% opaque pixels) so a plain
   low-opacity stamp disappears. Real-life techniques used here:
     1) `background-size: contain` keeps the thin strokes near native
        resolution - `cover` would scale them sub-pixel and blur them
        to nothing.
     2) `mix-blend-mode: screen` lets the white silhouette glow against
        the navy instead of darkening when stacked at high opacity.
     3) `filter: drop-shadow(...)` chained 1px offsets in four
        directions thickens the strokes visually without re-rasterising
        the source asset - turns 1px lines into ~3px gold strokes.
     4) Top-fade mask keeps the rooftops from crowding the column text. */
/* The PNG is used as an alpha MASK instead of as an image background.
   Where the PNG is opaque the gold colour shows through; where it's
   transparent, nothing shows. This guarantees the silhouette appears
   no matter how thin the source strokes are - colour is painted by us,
   not blended in from the source pixels. A second linear-gradient mask
   layer fades the rooftops into the navy near the top so the silhouette
   never crowds the column text. */
/* Paint the Jerusalem silhouette in gold by using the PNG as an ALPHA
   MASK over a solid gold layer. Two critical sizing tricks:
   - The source PNG has 1-pixel-wide strokes on a 4737-wide canvas.
     Scaling it down to `contain` shrinks the strokes below one pixel
     and they vanish. We use `mask-size: auto 100%` so the image is
     rendered at the FOOTER's height (preserving native line weight)
     and only the centred chunk of the panorama shows.
   - A second gradient mask fades the top so rooftops blend into the
     navy. mask-composite: intersect keeps both masks active. */
/* The source asset is `footer-jerusalem-gold.png` - a pre-processed
   copy of the user's PNG where the silhouette has been dilated (lines
   thickened by 3px) and recoloured to brand gold (#C9A961). Doing the
   dilation up-front lets us drop it in as a plain background-image
   without mask/blend hacks; the strokes survive any downscale. The
   top of the strip is masked to fade into the navy so the rooftops
   don't crowd the column text. */
html body.stj-template .footer::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    /* Skyline as a low-band strip; mask fades the upper portion so the
       silhouette peaks roughly at the social-icons row. */
    height: clamp(160px, 18vw, 250px) !important;
    /* Admin-overridable via the `footer_silhouette_image` setting, which sets
       the `--stj-footer-silhouette` custom property on the .footer element.
       Falls back to the bundled Jerusalem skyline when no override is set. */
    background-image: var(--stj-footer-silhouette, url("../../img/footer-jerusalem-gold.png")) !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;
    /* Higher opacity than before because the gold silhouette has less
       contrast against the new warm-taupe background than it did
       against the previous navy. */
    opacity: .55 !important;
    /* Fade only the top sliver so the spire tops (crosses + crescent)
       stay fully visible. Previous 55% threshold cut them off. */
    -webkit-mask-image: linear-gradient(to top, #000 85%, transparent 100%) !important;
            mask-image: linear-gradient(to top, #000 85%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
@media (max-width: 48em) {
    html body.stj-template .footer::after {
        height: clamp(160px, 42vw, 280px) !important;
        opacity: .65 !important;
    }
}
html body.stj-template .footer .footer__waves { background: #fff !important; }
html body.stj-template .footer > div:not(.footer__waves):not(.stj-footer-emergency) {
    /* Background intentionally transparent - the .footer wrapper paints
       navy underneath, and the ::after skyline panorama sits between
       that navy and this content layer. Painting another solid navy
       here would cover the silhouette. */
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 1.5rem !important;
    max-width: none !important;
    margin: 0 !important;
}
html body.stj-template .footer > div:not(.footer__waves):not(.stj-footer-emergency)::before {
    content: none !important;
    background: none !important;
    display: none !important;
}
html body.stj-template .footer__wrap {
    max-width: 1280px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.25rem !important;
}
@media (min-width: 64em) {
    html body.stj-template .footer__wrap {
        padding-top: 1.75rem !important;
        padding-bottom: 1.5rem !important;
    }
}
/* Kill the bundle's ::before background wave - we render our own .footer__waves
   above the container, so the duplicate would just lift content unnecessarily. */
html body.stj-template .footer__inner {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) 2.5fr minmax(220px, 1.2fr) !important;
    gap: 2.5rem !important;
    align-items: start !important;
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
}
@media (max-width: 900px) {
    html body.stj-template .footer__inner {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }
}
html body.stj-template .footer__logo-link { display: inline-block !important; }
html body.stj-template .footer__logo .footer-logo__img {
    width: auto !important;
    max-width: 240px !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important;
}
html body.stj-template .footer .menu--footer .menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .25rem 2rem !important;
}
@media (max-width: 600px) {
    html body.stj-template .footer .menu--footer .menu {
        grid-template-columns: 1fr !important;
    }
}
html body.stj-template .footer .menu--footer .menu li {
    list-style: none !important;
    margin: 0 !important;
}
html body.stj-template .footer .menu--footer .menu a {
    display: inline-block !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: .35rem 0 !important;
    transition: color .15s !important;
}
html body.stj-template .footer .menu--footer .menu a:hover {
    color: #C9A961 !important;
}
html body.stj-template .footer__third {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 1.5rem !important;
}
@media (max-width: 900px) {
    html body.stj-template .footer__third {
        align-items: center !important;
    }
}
html body.stj-template .footer__social {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
}
html body.stj-template .footer__social-label {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: .95rem !important;
    white-space: nowrap !important;
}
html body.stj-template .footer__social .menu-social {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: .4rem !important;
}
html body.stj-template .footer__social .menu-social li { list-style: none !important; margin: 0 !important; }
/* Solid gold rounded squares with navy glyph - matches our theme's
   yellow social tiles next to "Follow Us:". */
html body.stj-template .footer__social .menu-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    background: #C9A961 !important;
    color: #1B3A5C !important;
    font-size: 0 !important;
    text-decoration: none !important;
    transition: background .2s, transform .2s, color .2s !important;
}
html body.stj-template .footer__social .menu-social a i {
    font-size: 16px !important;
    color: inherit !important;
    line-height: 1 !important;
}
html body.stj-template .footer__social .menu-social a:hover {
    background: #fff !important;
    color: #1B3A5C !important;
    transform: translateY(-2px) !important;
}
/* Brand-colored hover overrides on the gold tiles produce poor
   contrast - keep neutral hover above and disable the brand-color
   shift that the social menu CSS earlier in the file applies. */
html body.stj-template .footer__social .menu-social .menu-item--twitter   a:hover,
html body.stj-template .footer__social .menu-social .menu-item--instagram a:hover,
html body.stj-template .footer__social .menu-social .menu-item--linkedin  a:hover,
html body.stj-template .footer__social .menu-social .menu-item--youtube   a:hover,
html body.stj-template .footer__social .menu-social .menu-item--facebook  a:hover {
    background: #fff !important;
    color: #1B3A5C !important;
}
html body.stj-template .footer__award {
    margin-top: 1rem !important;
    display: flex !important;
    justify-content: flex-end !important;
}
html body.stj-template .footer__award img,
html body.stj-template .footer__award svg.footer__award-svg {
    display: block !important;
    width: 120px !important;
    max-width: 130px !important;
    height: auto !important;
}
html body.stj-template .footer__copyright p {
    margin: 0 !important;
    color: rgba(255,255,255,.85) !important;
    font-size: .9rem !important;
}
html body.stj-template .footer__credit {
    margin-top: .35rem !important;
    color: rgba(255,255,255,.55) !important;
    font-size: .78rem !important;
    letter-spacing: .02em;
}
html body.stj-template .footer__credit a {
    color: rgba(255,255,255,.85) !important;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
}
html body.stj-template .footer__credit a:hover,
html body.stj-template .footer__credit a:focus {
    color: #C9A961 !important;
}
html body.stj-template .footer__universal .menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}
html body.stj-template .footer__universal .menu li { list-style: none !important; margin: 0 !important; }
html body.stj-template .footer__universal .menu a {
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
    font-size: .9rem !important;
    transition: color .15s !important;
}
html body.stj-template .footer__universal .menu a:hover {
    color: #C9A961 !important;
}

/* ============================================================
   SECTION HEADINGS - navy title + gold horizontal rule extending
   to the right (matches the our "Featured Video" pattern).
   Apply <h2 class="stj-section-heading">Section Name</h2> to any
   section that needs the divider.
   ============================================================ */
html body.stj-template .stj-section-heading {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    color: #1B3A5C !important;
    font-family: 'Frank Ruhl Libre', Georgia, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 0 0 1.75rem !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
}
html body.stj-template .stj-section-heading::after {
    content: '' !important;
    flex: 1 1 auto !important;
    height: 2px !important;
    background: #C9A961 !important;
    border: 0 !important;
    margin: 0 !important;
}
[dir="rtl"] html body.stj-template .stj-section-heading {
    direction: rtl !important;
}
@media (max-width: 600px) {
    html body.stj-template .stj-section-heading {
        font-size: 1.5rem !important;
        gap: 1rem !important;
    }
}

/* Auto-apply the section-heading style to every section title produced
   by the surgery components - so all home.blade.php sections (Achievements,
   Medical Departments, Meet Our Doctors, Latest News, Education Programs,
   Clinical Programs, Accreditations & Awards, Insurance Partners, etc.)
   render the navy title with the gold horizontal rule extending right. */
html body.stj-template .region-content .paragraph--type--text-block .field--name-field-title h2,
html body.stj-template .region-content .paragraph--type--text-block .field--name-field-title,
html body.stj-template .region-content .paragraph--type--kan-columns > .field--name-field-heading,
html body.stj-template .region-content .paragraph--type--faculty-grid .faculty-text > .field--name-field-title h2 {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    color: #1B3A5C !important;
    font-family: 'Frank Ruhl Libre', Georgia, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* The .field--name-field-title wrapper around the H2 is sometimes laid out
   as inline-block by the bundle, collapsing the H2's available width.
   Force it to span the full content column so the ::after rule can fill
   the remaining space and draw the gold line. */
html body.stj-template .region-content .paragraph--type--text-block .field--name-field-title {
    display: block !important;
    width: 100% !important;
}
html body.stj-template .region-content .paragraph--type--text-block {
    display: block !important;
    width: 100% !important;
}
/* Side gold rule removed sitewide: subtitles now use only the
   short underline ribbon defined below (.field--name-field-title h2::after
   with width:64px). This keeps headings calm on Contact, Visitor Info,
   Education & Clinical Programs, and Career pages. */
/* The text-block component wraps the H2 in an extra .field__item div;
   the wrapper above adds the rule, so kill any leftover ::after from
   the bundled .columns rules that might draw a second underline. */
html body.stj-template .region-content .paragraph--type--text-block .field--name-field-title h2 {
    margin: 0 !important;
}
[dir="rtl"] html body.stj-template .region-content .paragraph--type--text-block .field--name-field-title h2,
[dir="rtl"] html body.stj-template .region-content .paragraph--type--kan-columns > .field--name-field-heading {
    direction: rtl !important;
}
@media (max-width: 600px) {
    html body.stj-template .region-content .paragraph--type--text-block .field--name-field-title h2,
    html body.stj-template .region-content .paragraph--type--kan-columns > .field--name-field-heading {
        font-size: 1.5rem !important;
        gap: 1rem !important;
    }
}

/* ============================================================
   our theme-MATCH HERO - match the reference screenshot exactly:
     • taller hero (~720px)
     • larger caption with bigger title, slanted right edge
     • dots: bottom-LEFT, larger filled circles
     • prev/pause/next: bottom-RIGHT, large circular buttons
     • wave at TOP of hero (subtle), not bottom
   ============================================================ */

/* Hero wrapper auto-grows to image (820px) + controls strip (11rem). */
html body.stj-template .region-hero .content-carousel-card-wrapper.desktop {
    height: auto !important;
    max-height: none !important;
}

/* Caption typography - bigger to match the reference. */
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__title {
    font-size: 3rem !important;
    line-height: 1.1 !important;
    margin: 0 0 1.5rem !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__body {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    margin: 0 0 2rem !important;
}
html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__btn {
    padding: .85rem 2.25rem !important;
    font-size: 1rem !important;
}

/* Dots pinned in the white strip BELOW the image (original reference) -
   navy filled circles, bottom-left of the wrapper, sitting in the
   padding-bottom area carved out on .content-carousel-card-wrapper. */
html body.stj-template .region-hero ul.slick-dots {
    position: absolute !important;
    bottom: .65rem !important;
    left: 3.75rem !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 25 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: .9rem !important;
    list-style: none !important;
}
html body.stj-template .region-hero ul.slick-dots > li {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
}
html body.stj-template .region-hero ul.slick-dots > li > button {
    width: 22px !important;
    height: 22px !important;
    background: #1B3A5C !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    opacity: .5 !important;
    text-indent: -9999px !important;
    transition: opacity .2s ease !important;
}
html body.stj-template .region-hero ul.slick-dots > li > button::before,
html body.stj-template .region-hero ul.slick-dots > li > button::after {
    content: '' !important;
    display: none !important;
}
html body.stj-template .region-hero ul.slick-dots > li:hover > button,
html body.stj-template .region-hero ul.slick-dots > li.slick-active > button {
    opacity: 1 !important;
}

/* Prev / pause / next - bottom-RIGHT inside the hero. Uses
   SVG background-images (matches the original's content-carousel-
   container.css approach) so the icons are always visible
   regardless of state, and have proper hover variants. */
html body.stj-template .region-hero .slick-arrow {
    position: absolute !important;
    bottom: .25rem !important;
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer !important;
    z-index: 26 !important;
    padding: 0 !important;
    outline: none !important;
    transition: transform .2s !important;
}
html body.stj-template .region-hero .slick-arrow::before,
html body.stj-template .region-hero .slick-arrow::after {
    display: none !important;
    content: none !important;
}
html body.stj-template .region-hero .slick-arrow:hover {
    transform: translateY(-2px) !important;
}

html body.stj-template .region-hero .slick-prev  { right: 13rem !important; left: auto !important; }
html body.stj-template .region-hero .slick-pause,
html body.stj-template .region-hero .slick-pause.slick-play { right: 7.25rem !important; left: auto !important; }
html body.stj-template .region-hero .slick-next  { right: 1.5rem !important; left: auto !important; }

/* Icon images - left/right chevron arrows + play/pause circles. */
html body.stj-template .region-hero .slick-arrow.slick-prev {
    background-image: url("../../icon/google/arrow-nav-left.svg") !important;
}
html body.stj-template .region-hero .slick-arrow.slick-prev:hover {
    background-image: url("../../icon/google/arrow-nav-left-hover.svg") !important;
}
html body.stj-template .region-hero .slick-arrow.slick-next {
    background-image: url("../../icon/google/arrow-nav-right.svg") !important;
}
html body.stj-template .region-hero .slick-arrow.slick-next:hover {
    background-image: url("../../icon/google/arrow-nav-right-hover.svg") !important;
}
html body.stj-template .region-hero .slick-arrow.slick-pause {
    background-image: url("../../icon/svg/pause-circle.svg") !important;
}
html body.stj-template .region-hero .slick-arrow.slick-pause:hover {
    background-image: url("../../icon/svg/pause-circle-hover.svg") !important;
}
html body.stj-template .region-hero .slick-arrow.slick-play {
    background-image: url("../../icon/svg/play-circle.svg") !important;
}
html body.stj-template .region-hero .slick-arrow.slick-play:hover {
    background-image: url("../../icon/svg/play-circle-hover.svg") !important;
}

/* Top wave - subtle thin gray curves at the very top of the hero. */
html body.stj-template .region-hero .stj-hero-wave-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 40px !important;
    z-index: 18 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
    opacity: .9 !important;
}
html body.stj-template .region-hero .stj-hero-wave-top svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Wave lines at the BOTTOM of the hero - overlap the lower portion
   of the image so the curves bleed into the section below. The SVG
   has one white-fill path (creates the soft transition into white)
   and four gray-stroke curves (the visible wave lines). */
html body.stj-template .region-hero .stj-hero-wave {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 220px !important;
    z-index: 20 !important;
    pointer-events: none !important;
    transform: translateY(20%) !important;
    opacity: 1 !important;
    overflow: visible !important;
    line-height: 0 !important;
}
html body.stj-template .region-hero .stj-hero-wave svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
html body.stj-template .region-hero .stj-hero-wave svg path {
    stroke-width: 1 !important;
    /* keep the stroke pixel-perfect 1px regardless of how the
       SVG is stretched by preserveAspectRatio="none" */
    vector-effect: non-scaling-stroke !important;
}

/* Wave stroke draw-on. On every slide change the slick `beforeChange`
   handler toggles .stj-hero-wave--animate, which re-runs this animation:
   each stroked path is dashed along its full length and the dash offset
   slides from full-length → 0, so the curves visibly draw across the
   hero - the our "lines moving along with the slide change" effect. */
html body.stj-template .region-hero .stj-hero-wave svg path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 0;
}
html body.stj-template .region-hero .stj-hero-wave--animate svg path {
    animation: stjHeroWaveDraw 1.1s cubic-bezier(.65,.05,.36,1) both;
}
html body.stj-template .region-hero .stj-hero-wave--animate svg path:nth-of-type(2) { animation-delay: .08s; }
html body.stj-template .region-hero .stj-hero-wave--animate svg path:nth-of-type(3) { animation-delay: .16s; }
html body.stj-template .region-hero .stj-hero-wave--animate svg path:nth-of-type(4) { animation-delay: .24s; }
html body.stj-template .region-hero .stj-hero-wave--animate svg path:nth-of-type(5) { animation-delay: .32s; }
@keyframes stjHeroWaveDraw {
    0%   { stroke-dashoffset: 3000; opacity: .4; }
    100% { stroke-dashoffset: 0;    opacity: 1; }
}

/* Same non-scaling stroke for the top-of-hero subtle wave. */
html body.stj-template .region-hero .stj-hero-wave-top svg path {
    vector-effect: non-scaling-stroke !important;
    stroke-width: 1 !important;
}

/* Footer wave: keep its strokes pixel-perfect, and make them slightly
   brighter so they remain visible after they cross into the navy region
   (matches the our "ribbons flowing across" effect). */
html body.stj-template .footer__waves svg path[stroke] {
    vector-effect: non-scaling-stroke !important;
    stroke: #B8BEC4 !important;
    stroke-opacity: .9 !important;
}
@media (min-width: 90em) {
    html body.stj-template .region-hero .stj-hero-wave {
        height: 260px !important;
        transform: translateY(15%) !important;
    }
}

/* Pause/play icon inherits text color so we hide bare label text. */
html body.stj-template .region-hero .slick-pause {
    color: #1B3A5C !important;
}

/* ============================================================
   MISSION QUOTE STRIP - pale-teal full-bleed strip with the
   hospital's mission in large serif type, wave-bordered top
   and bottom. Mirrors the the original "Our mission is to..."
   pattern.
   ============================================================ */
html body.stj-template .stj-mission-quote {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 6rem 2rem !important;
    background-color: #0f2440 !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #fff !important;
    isolation: isolate;
}
/* Real leaf photo (Unsplash) covers the navy band, with a strong
   center vignette so the foliage frames the edges and the quote in
   the middle stays legible. */
html body.stj-template .stj-mission-quote::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        url('/assets/front-end/theme/images/ext-leaves-bg.jpg') center / cover no-repeat;
    /* Gold-tinted via filter, so the leaves blend with the brand
       palette instead of fighting it. */
    filter: sepia(.55) hue-rotate(355deg) saturate(1.2) brightness(.5) contrast(1.1);
    opacity: .55;
    z-index: 0 !important;
    /* Mask so the photo fades to transparent in the middle, framing
       the quote like a wreath of leaves. */
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at center, transparent 0%, transparent 28%, rgba(0,0,0,.6) 55%, #000 80%);
    mask-image: radial-gradient(ellipse 60% 70% at center, transparent 0%, transparent 28%, rgba(0,0,0,.6) 55%, #000 80%);
    pointer-events: none;
    top: 0; left: 0; right: 0; bottom: 0;
    font-size: 0 !important;
    color: transparent !important;
}
/* Restore the gold quote-mark glyph rule (it was using ::before too).
   Move the glyphs to a different layer using ::after stacking with z. */
/* Decorative gold quotation mark, top-left */
html body.stj-template .stj-mission-quote::before {
    content: '\201C' !important;
    position: absolute !important;
    top: 1.5rem !important;
    left: 8% !important;
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 14rem !important;
    line-height: 1 !important;
    color: #C9A961 !important;
    opacity: .35 !important;
    pointer-events: none !important;
}
/* Decorative gold quotation mark, bottom-right */
html body.stj-template .stj-mission-quote::after {
    content: '\201D' !important;
    position: absolute !important;
    bottom: -2rem !important;
    right: 8% !important;
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 14rem !important;
    line-height: 1 !important;
    color: #C9A961 !important;
    opacity: .35 !important;
    pointer-events: none !important;
}
html body.stj-template .stj-mission-quote__text {
    position: relative !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: #fff !important;
    quotes: none !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 2 !important;
}
html body.stj-template .stj-mission-quote__text::before,
html body.stj-template .stj-mission-quote__text::after {
    content: none !important;
}
/* Gold accent rule under the quote */
html body.stj-template .stj-mission-quote__text + *,
html body.stj-template .stj-mission-quote__author {
    position: relative !important;
    max-width: 1000px !important;
    margin: 2rem auto 0 !important;
    color: #C9A961 !important;
    font-size: .95rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}
/* Hide the legacy wave images entirely (we now render olive branch
   SVGs inline). Kept as a defensive rule in case legacy markup
   resurfaces. */
html body.stj-template .stj-mission-quote__wave {
    display: none !important;
}

/* Mission quote - line-art olive wreath frames the text from above
   and arches down each side. Pure stroke (no fill) so it reads as a
   botanical illustration on top of the leaf photo. */
html body.stj-template .stj-mission-quote__wreath {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    filter: drop-shadow(0 2px 8px rgba(15, 36, 64, .55));
}
@media (max-width: 768px) {
    html body.stj-template .stj-mission-quote__wreath { opacity: .55; }
}

/* (legacy arc rules - unused now but kept for reference) */
html body.stj-template .stj-mission-quote__arc {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: clamp(120px, 14vw, 200px) !important;
    height: clamp(280px, 60%, 420px) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    filter: drop-shadow(0 4px 14px rgba(201, 169, 97, .25));
}
html body.stj-template .stj-mission-quote__arc--left {
    left: 4% !important;
}
html body.stj-template .stj-mission-quote__arc--right {
    right: 4% !important;
}
@media (max-width: 900px) {
    html body.stj-template .stj-mission-quote__arc {
        width: 90px !important;
        opacity: .55;
    }
    html body.stj-template .stj-mission-quote__arc--left  { left: -2% !important; }
    html body.stj-template .stj-mission-quote__arc--right { right: -2% !important; }
}
html[dir="rtl"] body.stj-template .stj-mission-quote__arc--left  { left: auto !important; right: 4% !important; transform: translateY(-50%) scaleX(-1); }
html[dir="rtl"] body.stj-template .stj-mission-quote__arc--right { right: auto !important; left:  4% !important; transform: translateY(-50%) scaleX(-1); }

/* Olive branch decorations - top-left + bottom-right of the mission
   quote. Symbolic for East Jerusalem and the hospital's Catholic
   heritage. Sized responsively so they recede on small screens. */
html body.stj-template .stj-mission-quote__leaf {
    position: absolute !important;
    width: clamp(180px, 26vw, 360px) !important;
    height: auto !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: .9;
    filter: drop-shadow(0 4px 14px rgba(201, 169, 97, .25));
}
html body.stj-template .stj-mission-quote__leaf--top {
    top: 8% !important;
    left: 4% !important;
    transform: rotate(-6deg);
}
html body.stj-template .stj-mission-quote__leaf--bottom {
    bottom: 8% !important;
    right: 4% !important;
    transform: rotate(174deg); /* mirror by 180° + slight tilt */
}
@media (max-width: 768px) {
    html body.stj-template .stj-mission-quote__leaf {
        opacity: .55;
    }
    html body.stj-template .stj-mission-quote__leaf--top {
        top: 4% !important;
        left: -6% !important;
    }
    html body.stj-template .stj-mission-quote__leaf--bottom {
        bottom: 4% !important;
        right: -6% !important;
    }
}
/* RTL: flip the leaves so the curve always opens toward the quote */
html[dir="rtl"] body.stj-template .stj-mission-quote__leaf--top {
    left: auto !important;
    right: 4% !important;
    transform: rotate(6deg) scaleX(-1);
}
html[dir="rtl"] body.stj-template .stj-mission-quote__leaf--bottom {
    right: auto !important;
    left: 4% !important;
    transform: rotate(186deg) scaleX(-1);
}
@media (max-width: 768px) {
    html body.stj-template .stj-mission-quote {
        padding: 3.5rem 1.25rem !important;
    }
    html body.stj-template .stj-mission-quote__text {
        font-size: 1.4rem !important;
    }
}

/* ============================================================
   HOMEPAGE POLISH PASS - consistent section rhythm, better
   typography, hover affordances, cleaner CTAs.
   ============================================================ */

/* === Section vertical rhythm === */
html body.stj-template .region-content .components-wrap > .field__item {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}
html body.stj-template .region-content .components-wrap > .field__item:first-child {
    padding-top: 1.5rem !important;
}
html body.stj-template .region-content .components-wrap > .field__item:last-child {
    padding-bottom: 4rem !important;
}
/* Mission quote breaks out of column padding so its top/bottom aren't doubled */
html body.stj-template .region-content .components-wrap > .field__item:has(.stj-mission-quote) {
    padding: 0 !important;
}

/* === Quick-action card row (top of homepage) - rectangular cards
   with gold left border + hover lift. Distinct from circular our style. === */
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon-container {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 2rem 0 !important;
}
html body.stj-template .region-content .item-1 .field--name-field-linked-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.25rem !important;
}
@media (max-width: 640px) {
    html body.stj-template .region-content .item-1 .field--name-field-linked-icons {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon {
    background: #fff !important;
    border: 1px solid #ece4d3 !important;
    border-left: 4px solid #C9A961 !important;
    border-radius: 6px !important;
    padding: 1.5rem 1.25rem !important;
    box-shadow: 0 4px 14px rgba(27, 58, 92, 0.05) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-left-color .25s ease !important;
    text-align: left !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 26px rgba(27, 58, 92, 0.12) !important;
    border-left-color: #1B3A5C !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon a.link-wrapper {
    display: flex !important;
    align-items: center !important;
    /* Tightened from 1rem; reduces ~25% of the icon-to-label gap so
       the two elements read as one unit instead of two separated
       blocks. The SVG viewBox already adds ~20px of internal padding,
       so 0.5rem here lands at a comfortable ~28px visual gap. */
    gap: 0.5rem !important;
    text-decoration: none !important;
    padding: 0 !important;
    background: transparent !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon a.link-wrapper,
html body.stj-template .paragraph--type--linked-icon-container .paragraph--type--linked-icon .link-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon a.link-wrapper:hover,
html body.stj-template .paragraph--type--linked-icon-container .paragraph--type--linked-icon .link-wrapper:hover {
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon .field--name-field-paragraph {
    flex: 1 !important;
    margin: 0 !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon p {
    margin: 0 !important;
    line-height: 1.25 !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon p:first-child {
    color: #C9A961 !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon p:last-child {
    color: #1B3A5C !important;
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin-top: .15rem !important;
}

/* === Achievements stats === */
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon p:first-child {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #1B3A5C !important;
    margin: .5rem 0 !important;
    line-height: 1 !important;
}
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon p:last-child {
    color: #4d5a66 !important;
    font-size: .95rem !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-weight: 500 !important;
}

/* === Saint Joseph Hospital mission text section === */
html body.stj-template .region-content .item-3 .paragraph--type--text-block .field--name-field-paragraph {
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #2c3e50 !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}
html body.stj-template .region-content .item-3 .paragraph--type--text-block .btn,
html body.stj-template .region-content .item-3 .paragraph--type--text-block .btn-small {
    display: inline-block !important;
    background: #1B3A5C !important;
    color: #fff !important;
    padding: .85rem 2.25rem !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    letter-spacing: .03em !important;
    transition: background .2s, transform .2s !important;
    margin-top: 1.5rem !important;
}
html body.stj-template .region-content .item-3 .paragraph--type--text-block .btn:hover,
html body.stj-template .region-content .item-3 .paragraph--type--text-block .btn-small:hover {
    background: #0f2440 !important;
    transform: translateY(-2px) !important;
}
html body.stj-template .region-content .item-3 .paragraph--type--text-block p:has(.btn-small) {
    text-align: center !important;
}

/* Subtitle hierarchy under Saint Joseph Hospital */
html body.stj-template .region-content .paragraph--type--text-block .field--name-field-subtitle h3 {
    text-align: center !important;
    color: #C9A961 !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .15em !important;
    margin: 0 0 .75rem !important;
}

/* === Photo-CTA card hover - applies to Departments / Doctors /
   Education Programs grids === */
html body.stj-template .paragraph--type--photo-cta a.link-wrapper {
    transition: transform .25s ease !important;
}
html body.stj-template .paragraph--type--photo-cta a.link-wrapper:hover {
    transform: translateY(-4px) !important;
}
html body.stj-template .paragraph--type--photo-cta .field--name-field-photo-cta-image {
    transition: outline-color .25s, transform .35s !important;
}
html body.stj-template .paragraph--type--photo-cta a.link-wrapper:hover .field--name-field-photo-cta-image {
    outline-color: #C9A961 !important;
}

/* === Donation CTA - "Support Our Mission" === */
html body.stj-template .region-content .item-9 .paragraph--type--small-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    padding: 3rem 2rem !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #1B3A5C 0%, #1B3A5C 100%) !important;
    color: #fff !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
html body.stj-template .region-content .item-9 .paragraph--type--small-cta h2 {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 2rem !important;
    color: #fff !important;
    margin: 0 0 .5rem !important;
    line-height: 1.2 !important;
}
html body.stj-template .region-content .item-9 .paragraph--type--small-cta p {
    margin: 0 0 1rem !important;
    max-width: 720px !important;
    font-size: 1.05rem !important;
    opacity: .92 !important;
}
html body.stj-template .region-content .item-9 .paragraph--type--small-cta a {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    background: #C9A961 !important;
    color: #1B3A5C !important;
    padding: .9rem 2.5rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    letter-spacing: .03em !important;
    transition: transform .2s, box-shadow .2s, background .2s !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}
html body.stj-template .region-content .item-9 .paragraph--type--small-cta a:hover {
    transform: translateY(-2px) !important;
    background: #ffd34d !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
}

/* === Latest News teaser cards === */
html body.stj-template .region-content .view-news-events .views-row {
    transition: transform .25s, box-shadow .25s !important;
}
html body.stj-template .region-content .view-news-events .views-row:hover {
    transform: translateY(-3px) !important;
}
html body.stj-template .region-content .view-news-events h2 a {
    color: #1B3A5C !important;
    text-decoration: none !important;
    transition: color .15s !important;
}
html body.stj-template .region-content .view-news-events h2 a:hover {
    color: #1B3A5C !important;
}
html body.stj-template .region-content .view-news-events .field--name-field-date-published {
    color: #C9A961 !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin: .35rem 0 !important;
}

/* === Faculty grid Clinical Programs - center on smaller screens === */
@media (max-width: 900px) {
    html body.stj-template .paragraph--type--faculty-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === Accreditations / Insurance - hide section if no logos === */
html body.stj-template .region-content .item-10 .paragraph--type--text-block:has(div:empty) {
    display: none !important;
}

/* === "View All" link styling beneath grids === */
html body.stj-template .region-content .components-wrap p > a[href*="/departments"]:not(.btn),
html body.stj-template .region-content .components-wrap p > a[href*="/doctors"]:not(.btn),
html body.stj-template .region-content .components-wrap p > a[href*="/news"]:not(.btn) {
    display: inline-block !important;
    color: #1B3A5C !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: .5rem 1rem !important;
    border-radius: 999px !important;
    transition: background .2s, color .2s !important;
}
html body.stj-template .region-content .components-wrap p > a[href*="/departments"]:not(.btn):hover,
html body.stj-template .region-content .components-wrap p > a[href*="/doctors"]:not(.btn):hover,
html body.stj-template .region-content .components-wrap p > a[href*="/news"]:not(.btn):hover {
    background: rgba(14,82,88,.08) !important;
    color: #1B3A5C !important;
}

/* === Subtle alternating section background === */
html body.stj-template .region-content .components-wrap > .field__item.item-3,
html body.stj-template .region-content .components-wrap > .field__item.item-5,
html body.stj-template .region-content .components-wrap > .field__item.item-7 {
    background: #FAFBFC !important;
    border-radius: 0 !important;
}

/* === Consistent max-width for section content (except full-bleed strips) === */
html body.stj-template .region-content .components-wrap > .field__item > * {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
html body.stj-template .region-content .components-wrap > .field__item > .stj-mission-quote {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   SIGNATURE TOUCHES - heritage + prestige cues
   Designed to communicate "established Catholic hospital,
   serving since 1954, distinguished name in Jerusalem".
   ============================================================ */

/* --- Soft fade-up on first paint for content blocks ---
   Staggered by section index so the page reveals in sequence. */
@keyframes stjFadeUp {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
html body.stj-template .region-content .component-item {
    will-change: opacity, transform;
    animation: stjFadeUp .7s ease-out both;
}
html body.stj-template .region-content .item-1 { animation-delay: .05s; }
html body.stj-template .region-content .item-2 { animation-delay: .15s; }
html body.stj-template .region-content .item-3 { animation-delay: .25s; }
html body.stj-template .region-content .item-4 { animation-delay: .35s; }
html body.stj-template .region-content .item-5 { animation-delay: .45s; }
html body.stj-template .region-content .item-6 { animation-delay: .55s; }

/* --- Heritage ribbon: "Serving Since 1954" gold ribbon
       overlaid bottom-left of the hero. Reinforces longevity. --- */
html body.stj-template .region-hero {
    position: relative;
}
html body.stj-template .region-hero::after {
    /* Heritage ribbon hidden - was competing with the hero caption +
       banner image text. Re-enable by setting `content` to the EST.
       text if you want it back. */
    content: none;
}
@media (max-width: 700px) {
    html body.stj-template .region-hero::after { font-size: .6rem; padding: .4rem .85rem; letter-spacing: 1.5px; top: 1rem; right: 1rem; }
}

/* --- Ornamental section dividers between major homepage sections.
       Tiny gold dot + diamond + dot - Catholic-art-inspired flourish
       that nods to the hospital's identity without being literal. --- */
html body.stj-template .region-content .component-item.item-2::before,
html body.stj-template .region-content .component-item.item-4::before,
html body.stj-template .region-content .component-item.item-6::before {
    content: '';
    display: block;
    width: 100%;
    height: 28px;
    margin: 1.5rem auto 1.25rem;
    background-image:
        radial-gradient(circle at 50% 50%, #C9A961 2.5px, transparent 3px),
        radial-gradient(circle at calc(50% - 22px) 50%, #C9A961 1.5px, transparent 2px),
        radial-gradient(circle at calc(50% + 22px) 50%, #C9A961 1.5px, transparent 2px),
        linear-gradient(to right, transparent 0, #ece4d3 calc(50% - 60px), #ece4d3 calc(50% + 60px), transparent 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 1px;
    background-repeat: no-repeat;
    background-position: center, center, center, center;
}

/* --- Achievements: huge serif numerals with gold underline,
       feels like a heritage prestige metric --- */
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon p:first-of-type,
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon .field--name-field-paragraph p:first-child {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #1B3A5C !important;
    letter-spacing: -1px !important;
    margin: .25rem 0 !important;
    position: relative;
    display: inline-block !important;
}
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon p:first-of-type::after {
    content: '' !important;
    display: block !important;
    width: 36px;
    height: 3px;
    background: #C9A961;
    margin: .35rem 0 .5rem !important;
}
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon p:last-child {
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: .78rem !important;
    color: #4d5a66 !important;
    font-weight: 600 !important;
}
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon img {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: .5rem !important;
}

/* --- Hero caption: accent rule is provided by .stj-hero-caption__accent;
       do not also render one via ::after on the title. --- */
html body.stj-template .stj-hero-caption-fixed .stj-hero-caption__title {
    position: relative;
    padding-bottom: 0 !important;
}
html body.stj-template .stj-hero-caption-fixed .stj-hero-caption__title::after {
    content: none !important;
    display: none !important;
}

/* --- Mission block: parchment texture + gold ornament behind the quote --- */
html body.stj-template .stj-mission-quote {
    background:
        radial-gradient(ellipse at center top, rgba(201, 169, 97, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at center bottom, rgba(201, 169, 97, 0.06) 0%, transparent 55%),
        linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%) !important;
}
html body.stj-template .stj-mission-quote__text + *,
html body.stj-template .stj-mission-quote__author {
    margin-top: 2.5rem !important;
}
html body.stj-template .stj-mission-quote__text + *::before,
html body.stj-template .stj-mission-quote__author::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: #C9A961;
    margin: 0 auto 1.25rem;
    opacity: .7;
}

/* --- Card hover lift refinement: gold underline expands across full width --- */
html body.stj-template .paragraph--type--photo-cta {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease !important;
}
html body.stj-template .paragraph--type--photo-cta::after {
    left: 0 !important;
    right: 0 !important;
    transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
}
html body.stj-template .paragraph--type--photo-cta:hover {
    border-color: #C9A961 !important;
}

/* --- Action cards: gold left border thickens on hover, label letter-spacing
       wakes up - feels intentional without being twee --- */
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-left-width .25s ease !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon:hover {
    border-left-width: 6px !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon p:first-child {
    transition: letter-spacing .3s ease !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon:hover p:first-child {
    letter-spacing: 2.5px !important;
}

/* --- Section H2 headings: serif uppercase + gold rule before
       (newspaper masthead feel - "this is a destination, not a marketing site") --- */
html body.stj-template .region-content .field--name-field-title h2 {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1B3A5C !important;
    letter-spacing: .5px !important;
    display: inline-block !important;
    position: relative !important;
    padding-left: 0 !important;
}
html body.stj-template .region-content .field--name-field-title h2::before {
    content: none !important;
    display: none !important;
}

/* --- Buttons get a touch of gravitas: serif label, slow border transition --- */
html body.stj-template a.btn,
html body.stj-template .stj-hero-caption-fixed .stj-hero-caption__btn,
html body.stj-template .form-actions a,
html body.stj-template .form-actions button {
    transition: all .35s cubic-bezier(.2,.7,.2,1) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
}

/* --- Reduce motion preference --- */
@media (prefers-reduced-motion: reduce) {
    html body.stj-template .region-content .component-item { animation: none !important; }
    html body.stj-template * { transition-duration: .01ms !important; }
}

/* ============================================================
   JS-COORDINATED ANIMATIONS - paired with stj-signature.js
   ============================================================ */

/* Scroll reveal: JS toggles .is-visible when element enters viewport.
   !important needed because the bundle's `.animate .field__item:nth-child(N) .X`
   chains have higher class-count specificity than ours. */
html body.stj-template [data-stj-reveal] {
    opacity: 0 !important;
    transform: translate3d(0, 24px, 0) !important;
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) !important;
    animation: none !important;
}
html body.stj-template [data-stj-reveal].is-visible,
html body.stj-template [data-stj-reveal].stj-reveal-in {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Animated underline draw-in for section H2 headings. The static CSS
   above paints a 36px gold rule before the heading text - JS adds
   .stj-h2-revealed to trigger an animated extension to the right. */
html body.stj-template .region-content .field--name-field-title h2::after,
html body.stj-template .region-content .field--name-field-title h2.stj-h2-revealed::after {
    content: none !important;
    display: none !important;
}

/* Logo medallion soft gold glow that pulses gently - heritage cue, not flashy */
@keyframes stjMedallionPulse {
    0%, 100% { filter: drop-shadow(0 6px 16px rgba(201, 169, 97, 0.15)); }
    50%      { filter: drop-shadow(0 8px 22px rgba(201, 169, 97, 0.35)); }
}
html body.stj-template .header__link img.stj-medallion-pulse {
    animation: stjMedallionPulse 4.5s ease-in-out infinite;
}

/* Action card / photo card tilt: don't double-up the transition,
   JS sets the inline transform directly. Just make sure there's
   a smooth return when mouseleave clears the inline style. */
html body.stj-template .paragraph--type--photo-cta,
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon {
    transform-style: preserve-3d;
}

/* Top-banner links ("Saint Joseph Hospital" title + About / Careers / FAQs).
   The universal-header has a navy background; .stj-template a sets
   `color: inherit` which kills the bundled white, leaving links the
   same color as the bar. Re-assert white text + gold hover. */
html body.stj-template .universal-header,
html body.stj-template .universal-header a,
html body.stj-template .universal-header .universal-header__title,
html body.stj-template .universal-header .universal-header__title a,
html body.stj-template .universal-header .menu--top-banner-menu a {
    color: #fff !important;
}
html body.stj-template .universal-header a:hover,
html body.stj-template .universal-header a:focus {
    color: #C9A961 !important;
    text-decoration: underline;
}

/* Social icons: bundled CSS expects SVG background-images at
   /assets/front-end/icon/svg/{Facebook,instagram,...}.svg, but those
   files were never copied over. Neutralize the bundled rule so the
   inline Font Awesome <i> fallback in the Blade markup shows instead. */
html body.stj-template .menu-social .menu-item a {
    font-size: 1.05rem !important;
    color: #fff !important;
    width: auto !important;
    height: auto !important;
    background-image: none !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: .25rem .35rem !important;
}
html body.stj-template .menu-social .menu-item a i {
    font-size: 1.05rem !important;
    color: inherit !important;
    line-height: 1 !important;
}
html body.stj-template .menu-social .menu-item a:hover,
html body.stj-template .menu-social .menu-item a:focus {
    color: #C9A961 !important;
}
/* visually-hidden span inside the link must stay hidden */
html body.stj-template .menu-social .menu-item a .visually-hidden {
    font-size: 0 !important;
}

/* Language toggle in the universal header - gold pill with globe icon */
html body.stj-template .universal-header .stj-lang-toggle {
    margin-left: 1rem !important;
}
html body.stj-template .universal-header .stj-lang-toggle a {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    padding: .15rem .75rem !important;
    border: 1px solid #C9A961 !important;
    border-radius: 999px !important;
    color: #C9A961 !important;
    font-weight: 600 !important;
    font-size: .8rem !important;
    letter-spacing: .5px !important;
    transition: background .25s ease, color .25s ease !important;
}
html body.stj-template .universal-header .stj-lang-toggle a:hover {
    background: #C9A961 !important;
    color: #1B3A5C !important;
}
html body.stj-template .universal-header .stj-lang-toggle i {
    font-size: .85rem !important;
}
html[dir="rtl"] body.stj-template .universal-header .stj-lang-toggle {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

/* "EST 1954" ribbon - gentle shimmer sweep on hover */
@keyframes stjRibbonShimmer {
    0%   { background-position: -100% 0; }
    100% { background-position:  200% 0; }
}
html body.stj-template .region-hero::after {
    background-image:
        linear-gradient(120deg,
            transparent 30%,
            rgba(255,255,255,0.45) 50%,
            transparent 70%),
        linear-gradient(135deg, #C9A961 0%, #E5C07B 100%);
    background-size: 200% 100%, 100% 100%;
    background-position: -100% 0, 0 0;
    background-repeat: no-repeat, no-repeat;
    animation: stjRibbonShimmer 5s ease-in-out infinite;
    animation-delay: 2s;
}
@media (prefers-reduced-motion: reduce) {
    html body.stj-template .region-hero::after { animation: none !important; }
    html body.stj-template .header__link img.stj-medallion-pulse { animation: none !important; }
}

/* =================================================================
   Hero carousel - Ken Burns + caption choreography.

   "stj-motion-on" is added to <html> by stj-motion.js *only* when the
   user has not requested reduced motion, so every rule below is gated
   on it. Users with prefers-reduced-motion get a still hero.
   ================================================================= */
@keyframes stjKenBurns {
    0%   { transform: scale(1.04) translate(0, 0); }
    100% { transform: scale(1.16) translate(-1.5%, -1.2%); }
}

html.stj-motion-on body.stj-template .region-hero .slick-slide.slick-active img {
    animation: stjKenBurns 15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 1.4s; /* hand off after the cross-dissolve finishes */
    transform-origin: center center;
    will-change: transform, opacity, filter;
}
html.stj-motion-on body.stj-template .region-hero .slick-slide:not(.slick-active) img {
    animation: none;
}

/* Slick fade mode stacks slides - make sure each image fills the
   hero so neither shrinks during the cross-dissolve.
   object-position: center 35% keeps faces and building tops in frame
   when an admin uploads a portrait/taller-than-recommended photo,
   instead of cropping at the chin. */
html body.stj-template .region-hero .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* --- Word-by-word title reveal --------------------------------------
   stj-motion.js splits the title into <span class="stj-word"> entries
   and animates each one (opacity / letter-spacing / translate / blur).
   This sets the initial hidden state so there's no flash before JS
   binds - but we only hide them once stj-motion-on is on the html. */
html body.stj-template .region-hero .stj-hero-caption__title .stj-word {
    display: inline-block;
}
html.stj-motion-on body.stj-template .region-hero .stj-hero-caption-fixed:not([hidden]) .stj-hero-caption__title .stj-word {
    opacity: 0;
    will-change: transform, opacity, letter-spacing, filter;
}

/* --- Slide counter ribbon -------------------------------------------
   Editorial "01 / 04 - EST. 1954" in the upper-right corner, small-caps
   gold serif over a thin navy plate. */
html body.stj-template .region-hero {
    position: relative;
}
html body.stj-template .stj-hero-counter {
    position: absolute;
    top: clamp(1rem, 2.5vw, 2.25rem);
    right: clamp(1rem, 3vw, 2.75rem);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.15rem;
    background: rgba(15, 36, 64, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 169, 97, .45);
    border-radius: 2px;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    color: #E5C07B;
    font-size: .9rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
html[dir="rtl"] body.stj-template .stj-hero-counter {
    right: auto;
    left: clamp(1rem, 3vw, 2.75rem);
}
html body.stj-template .stj-hero-counter__num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #FFE7A6;
    min-width: 1.5ch;
    display: inline-block;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1;
}
html body.stj-template .stj-hero-counter__num--total {
    color: rgba(229, 192, 123, .55);
    font-weight: 400;
    font-size: .85rem;
}
html body.stj-template .stj-hero-counter__sep {
    color: rgba(201, 169, 97, .55);
    margin: 0 .15rem;
    font-size: .85rem;
}
html body.stj-template .stj-hero-counter__divider {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 97, .8) 50%, transparent 100%);
    margin: 0 .65rem;
}
html body.stj-template .stj-hero-counter__est {
    color: #fff;
    opacity: .92;
    font-weight: 600;
    letter-spacing: .22em;
}
@media (max-width: 768px) {
    html body.stj-template .stj-hero-counter {
        font-size: .7rem;
        padding: .4rem .75rem;
    }
    html body.stj-template .stj-hero-counter__divider { width: 16px; }
}

/* --- Mask wipe ------------------------------------------------------
   A full-height navy panel that slides across the hero on every slide
   change, ushering the next image in. A thin gold hairline rides the
   leading edge - print page-turn feel. */
html body.stj-template .stj-hero-wipe {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    transform: translateX(-100%);
}
html body.stj-template .stj-hero-wipe::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%);
    opacity: .92;
}
html body.stj-template .stj-hero-wipe__edge {
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #C9A961 25%, #FFE7A6 50%, #C9A961 75%, transparent 100%);
    box-shadow:
        0 0 32px 6px rgba(201, 169, 97, .85),
        0 0 12px 2px rgba(229, 192, 123, 1),
        0 0 60px 16px rgba(201, 169, 97, .35);
}
html[dir="rtl"] body.stj-template .stj-hero-wipe {
    transform: translateX(100%);
}
html[dir="rtl"] body.stj-template .stj-hero-wipe__edge {
    right: auto;
    left: -1px;
    background: linear-gradient(180deg, transparent 0%, #C9A961 30%, #E5C07B 50%, #C9A961 70%, transparent 100%);
}

/* --- Film grain ------------------------------------------------------
   Single inline SVG noise texture, very low opacity. Anchored over the
   hero only. Pure 70s/80s archival photojournalism credibility. */
html body.stj-template .stj-hero-grain {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .08;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
}
html.stj-no-motion body.stj-template .stj-hero-grain { opacity: .07; }
/* Reset Ken Burns on slides leaving the viewport so the animation
   restarts fresh next time they become active. */
html.stj-motion-on body.stj-template .region-hero .slick-slide:not(.slick-active) img {
    animation: none;
    transform: scale(1.02);
}

/* Caption - initial state hidden, Motion drives the reveal.
   NOTE: the title parent stays at opacity:1; only its children (.stj-word)
   start hidden because we animate them individually. */
html.stj-motion-on body.stj-template .region-hero .stj-hero-caption-fixed:not([hidden]) [data-hero-body],
html.stj-motion-on body.stj-template .region-hero .stj-hero-caption-fixed:not([hidden]) [data-hero-btn] {
    opacity: 0;
    will-change: transform, opacity;
}

/* Caption sits ABOVE the wipe panel (z-index: 4) so the wipe doesn't
   obscure it during the transition. */
html body.stj-template .region-hero .stj-hero-caption-fixed {
    z-index: 6;
}

/* Gold accent line under the title - Motion scales it from 0 to 1. */
html body.stj-template .region-hero .stj-hero-caption__accent {
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.6rem 0 1rem;
    background: linear-gradient(90deg, #C9A961 0%, #E5C07B 60%, transparent 100%);
    border-radius: 2px;
    transform-origin: left center;
    box-shadow: 0 1px 0 rgba(201, 169, 97, .35);
}
html.stj-motion-on body.stj-template .region-hero .stj-hero-caption-fixed:not([hidden]) .stj-hero-caption__accent {
    transform: scaleX(0);
    opacity: 0;
    will-change: transform, opacity;
}
html[dir="rtl"] body.stj-template .region-hero .stj-hero-caption__accent {
    transform-origin: right center;
    background: linear-gradient(270deg, #C9A961 0%, #E5C07B 60%, transparent 100%);
}

/* Slide images - Motion fades brightness between slides; ensure they
   sit in their own stacking context for the crossfade. */
html.stj-motion-on body.stj-template .region-hero .slick-slide {
    will-change: opacity, filter;
}

/* =================================================================
   Submit a Complaint page - bring the form in line with the navy +
   gold brand theme. Replaces the teal/yellow legacy palette.
   ================================================================= */

/* Privacy notice strip - navy gradient + gold shield icon. */
html body.stj-template .stj-complaint-privacy {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.75rem;
    background: linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(27, 58, 92, .15);
}
html body.stj-template .stj-complaint-privacy__icon {
    font-size: 1.75rem;
    color: #C9A961;
    flex-shrink: 0;
    line-height: 1;
}
html body.stj-template .stj-complaint-privacy h4 {
    margin: 0 0 .35rem;
    color: #fff;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
}
html body.stj-template .stj-complaint-privacy p {
    margin: 0;
    color: #fff !important;
    opacity: .92;
    font-size: .95rem;
    line-height: 1.55;
}

/* Alerts (success / error). */
html body.stj-template .stj-complaint-alert {
    padding: .85rem 1.1rem;
    margin: 0 0 1.25rem;
    border-radius: 6px;
    border-left: 4px solid;
    font-size: .95rem;
}
html body.stj-template .stj-complaint-alert--success {
    background: #eef3f9;
    color: #1B3A5C;
    border-left-color: #1B3A5C;
}
html body.stj-template .stj-complaint-alert--error {
    background: #fdf2f1;
    color: #9b2c2a;
    border-left-color: #c62828;
}
html body.stj-template .stj-complaint-alert ul { margin: 0; padding-left: 1.25rem; }
html[dir="rtl"] body.stj-template .stj-complaint-alert {
    border-left: 0;
    border-right: 4px solid;
}

/* Form layout - generous spacing, navy focus accents, gold submit. */
html body.stj-template .stj-complaint-form__group {
    margin-bottom: 1.1rem;
}
html body.stj-template .stj-complaint-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    html body.stj-template .stj-complaint-form__row { grid-template-columns: 1fr; }
}
html body.stj-template .stj-complaint-form label {
    display: block;
    margin: 0 0 .5rem;
    font-weight: 600;
    color: #1B3A5C;
    font-size: .95rem;
}
html body.stj-template .stj-complaint-form input[type="text"],
html body.stj-template .stj-complaint-form input[type="email"],
html body.stj-template .stj-complaint-form input[type="date"],
html body.stj-template .stj-complaint-form select,
html body.stj-template .stj-complaint-form textarea {
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid rgba(27, 58, 92, .2);
    border-radius: 6px;
    background: #fff;
    color: #1B3A5C;
    font-size: .98rem;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
html body.stj-template .stj-complaint-form input:focus,
html body.stj-template .stj-complaint-form select:focus,
html body.stj-template .stj-complaint-form textarea:focus {
    outline: none;
    border-color: #C9A961;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, .18);
}
html body.stj-template .stj-complaint-form textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.55;
}
html body.stj-template .stj-complaint-form small {
    display: block;
    margin-top: .4rem;
    color: rgba(27, 58, 92, .65);
    font-size: .85rem;
}

/* Anonymous toggle - soft cream panel with a navy checkbox accent. */
html body.stj-template .stj-complaint-anon {
    margin: 1.25rem 0;
    padding: 1.1rem 1.25rem;
    background: #f6f3ec;
    border-left: 3px solid #C9A961;
    border-radius: 6px;
}
html[dir="rtl"] body.stj-template .stj-complaint-anon {
    border-left: 0;
    border-right: 3px solid #C9A961;
}
html body.stj-template .stj-complaint-anon label {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
    color: #1B3A5C;
    font-weight: 500;
}
html body.stj-template .stj-complaint-anon input[type="checkbox"] {
    margin-top: .3rem;
    accent-color: #1B3A5C;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
html body.stj-template .stj-complaint-anon strong {
    display: block;
    color: #1B3A5C;
    font-weight: 700;
}
html body.stj-template .stj-complaint-anon__hint {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: rgba(27, 58, 92, .65);
    font-weight: 400;
}

/* Identity reveal panel - appears when the anon checkbox is off. */
html body.stj-template .stj-complaint-identity {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(27, 58, 92, .12);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}
html body.stj-template .stj-complaint-identity[hidden] { display: none; }
html body.stj-template .stj-complaint-identity__hint {
    margin: 0 0 1rem;
    color: rgba(27, 58, 92, .7);
    font-size: .9rem;
}

/* Submit button - gold pill, mirrors the rest of the site's primary CTA. */
html body.stj-template .stj-complaint-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .95rem 1.75rem;
    background: #C9A961;
    color: #1B3A5C;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(201, 169, 97, .25);
    transition: background .2s, transform .2s, box-shadow .2s;
}
html body.stj-template .stj-complaint-submit:hover,
html body.stj-template .stj-complaint-submit:focus {
    background: #ffd34d;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(201, 169, 97, .35);
}

/* =================================================================
   News article cover image: lock to a 16:9 letterbox with object-fit:
   cover so every article renders a consistent hero height regardless
   of source image aspect ratio.
   ================================================================= */
html body.stj-template .stj-news-cover {
    margin: 0 0 2rem;
}
html body.stj-template .stj-news-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 540px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(27, 58, 92, .12);
    background: #f3efe6;
}
@media (max-width: 768px) {
    html body.stj-template .stj-news-cover img {
        aspect-ratio: 4 / 3;
        max-height: 360px;
        border-radius: 6px;
    }
}

/* =================================================================
   Homepage "Find a Doctor" hero - replaces the immediate doctor grid
   with a search-style entry point + popular department chips.
   ================================================================= */
html body.stj-template .stj-find-doctor {
    background:
        radial-gradient(circle at 90% 10%, rgba(201, 169, 97, .08) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(27, 58, 92, .06) 0%, transparent 45%),
        #fff;
    border: 1px solid rgba(27, 58, 92, .08);
    border-radius: 14px;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
    text-align: center;
    box-shadow: 0 12px 40px rgba(27, 58, 92, .07);
    margin: 1rem auto;
    max-width: 960px;
    position: relative;
}
html body.stj-template .stj-find-doctor__heading {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    font-weight: 400 !important;
    color: #1B3A5C !important;
    letter-spacing: .02em;
    margin: 0 0 1.75rem !important;
    line-height: 1.1;
}
html body.stj-template .stj-find-doctor__heading-accent {
    color: #C9A961;
    font-weight: 700;
}
html body.stj-template .stj-find-doctor__form {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 560px;
    margin: 0 auto 1.75rem;
    border-bottom: 2px solid #1B3A5C;
    padding: .25rem 0;
}
html body.stj-template .stj-find-doctor__form input[type="search"] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .85rem .25rem;
    font-size: 1.05rem;
    color: #1B3A5C;
    outline: none;
}
html body.stj-template .stj-find-doctor__form input[type="search"]::placeholder {
    color: #1B3A5C;
    opacity: .55;
}
html body.stj-template .stj-find-doctor__form button {
    background: transparent;
    border: 0;
    color: #1B3A5C;
    font-size: 1.15rem;
    padding: .5rem .75rem;
    cursor: pointer;
    transition: color .2s;
}
html body.stj-template .stj-find-doctor__form button:hover {
    color: #C9A961;
}
html body.stj-template .stj-find-doctor__chips-label {
    color: #C9A961;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: .85rem;
    margin: 0 0 1rem !important;
}
html body.stj-template .stj-find-doctor__chips {
    list-style: none;
    margin: 0 auto 1.5rem !important;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    max-width: 720px;
}
html body.stj-template .stj-find-doctor__chips li a {
    display: inline-block;
    padding: .65rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(27, 58, 92, .12);
    border-radius: 999px;
    color: #1B3A5C !important;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
html body.stj-template .stj-find-doctor__chips li a:hover,
html body.stj-template .stj-find-doctor__chips li a:focus {
    background: #1B3A5C;
    border-color: #1B3A5C;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(27, 58, 92, .18);
}
html body.stj-template .stj-find-doctor__view-all {
    margin: 0 !important;
    font-size: .95rem;
}
html body.stj-template .stj-find-doctor__view-all a {
    color: #1B3A5C !important;
    font-weight: 600;
    text-decoration: none;
}
html body.stj-template .stj-find-doctor__view-all a:hover {
    color: #C9A961 !important;
}

/* =================================================================
   /doctors page - pill-style search bar + department picker grid
   ================================================================= */
html body.stj-template .stj-doctors-search {
    display: flex;
    gap: .75rem;
    align-items: stretch;
    max-width: 640px;
    margin: 1.5rem auto 2.5rem;
    border: 2px solid rgba(27, 58, 92, .15);
    border-radius: 999px;
    padding: .25rem .25rem .25rem 1.25rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
html body.stj-template .stj-doctors-search:focus-within {
    border-color: #1B3A5C;
    box-shadow: 0 6px 18px rgba(27, 58, 92, .12);
}
html body.stj-template .stj-doctors-search input[type="search"] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .65rem .25rem;
    font-size: 1rem;
    color: #1B3A5C;
    outline: none;
}
html body.stj-template .stj-doctors-search input[type="search"]::placeholder {
    color: #1B3A5C;
    opacity: .5;
}
html body.stj-template .stj-doctors-search__submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #1B3A5C;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .65rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .2s, color .2s;
}
html body.stj-template .stj-doctors-search__submit:hover {
    background: #C9A961;
    color: #1B3A5C;
    transform: translateY(-1px);
}

html body.stj-template .stj-dept-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 1rem 0 2.5rem;
}
html body.stj-template .stj-dept-picker__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .85rem;
    padding: 2rem 1.25rem;
    background: linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%);
    border-radius: 12px;
    text-decoration: none;
    color: #fff !important;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(27, 58, 92, .12);
}
html body.stj-template .stj-dept-picker__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(201, 169, 97, .15) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(201, 169, 97, .1) 0%, transparent 40%);
    pointer-events: none;
}
html body.stj-template .stj-dept-picker__card:hover,
html body.stj-template .stj-dept-picker__card:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(27, 58, 92, .25);
}
html body.stj-template .stj-dept-picker__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #C9A961;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #C9A961;
    font-size: 2rem;
    background: rgba(255, 255, 255, .04);
    transition: background .2s, color .2s;
    position: relative;
    z-index: 1;
}
html body.stj-template .stj-dept-picker__card:hover .stj-dept-picker__icon {
    background: rgba(201, 169, 97, .15);
    color: #fff;
}
html body.stj-template .stj-dept-picker__name {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}
html body.stj-template .stj-dept-picker__count {
    font-size: .85rem;
    opacity: .75;
    letter-spacing: .03em;
    position: relative;
    z-index: 1;
}

/* =================================================================
   Department photo-cta cards: infographic icon variant.
   When the photo-cta component is passed an :icon prop, replace
   the photo with a circular gold-bordered badge centered on a
   navy gradient background. Mirrors the homepage brand palette.
   ================================================================= */
html body.stj-template .paragraph--type--photo-cta--icon .image-wrapper {
    background: linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
html body.stj-template .paragraph--type--photo-cta--icon .image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(201, 169, 97, .18) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(201, 169, 97, .12) 0%, transparent 45%);
    pointer-events: none;
}
html body.stj-template .photo-cta__icon-badge {
    width: 58%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 2px solid #C9A961;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A961;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    box-shadow: 0 0 0 6px rgba(201, 169, 97, .08), inset 0 0 24px rgba(201, 169, 97, .12);
    transition: transform .35s ease, color .25s ease, border-color .25s ease, background .25s ease;
    position: relative;
    z-index: 1;
}
html body.stj-template .paragraph--type--photo-cta--icon:hover .photo-cta__icon-badge {
    transform: scale(1.08);
    color: #fff;
    background: rgba(201, 169, 97, .18);
    border-color: #ffd34d;
}
html body.stj-template .paragraph--type--photo-cta--icon .photo-cta__icon-badge i {
    line-height: 1;
}
html body.stj-template .paragraph--type--photo-cta--icon .link-arrow {
    background: rgba(0, 0, 0, .35) !important;
    color: #fff !important;
}

/* =================================================================
   Contact page complaint banner - mirrors the homepage donation CTA
   (.item-9 .paragraph--type--small-cta) so the two CTAs share the
   navy + gold brand treatment instead of the older teal/yellow.
   ================================================================= */
html body.stj-template .stj-complaint-banner {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
    flex-wrap: wrap !important;
    padding: 1.75rem 2rem !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%) !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(27, 58, 92, .15) !important;
}
html body.stj-template .stj-complaint-banner__icon {
    font-size: 2.5rem;
    color: #C9A961;
    flex-shrink: 0;
    line-height: 1;
}
html body.stj-template .stj-complaint-banner__body {
    flex: 1;
    min-width: 260px;
}
html body.stj-template .stj-complaint-banner__body h3 {
    color: #fff !important;
    margin: 0 0 .35rem !important;
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
}
html body.stj-template .stj-complaint-banner__body p {
    margin: 0 !important;
    opacity: .9 !important;
    font-size: 1rem !important;
}
html body.stj-template .stj-complaint-banner__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    background: #C9A961 !important;
    color: #1B3A5C !important;
    padding: .85rem 1.75rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: .03em !important;
    transition: transform .2s, box-shadow .2s, background .2s !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important;
}
html body.stj-template .stj-complaint-banner__cta:hover {
    transform: translateY(-2px) !important;
    background: #ffd34d !important;
    color: #1B3A5C !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25) !important;
}

/* =================================================================
   Contact-page map: large iframe with neighborhood context, plus
   an optional "Nearby Landmarks" panel driven by the
   hospital_landmarks_<locale> setting.
   ================================================================= */
html body.stj-template .stj-contact-map {
    margin: 2rem 0;
}
html body.stj-template .stj-contact-map iframe {
    width: 100%;
    height: clamp(420px, 65vh, 720px);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(27, 58, 92, .12);
    display: block;
}
@media (max-width: 768px) {
    html body.stj-template .stj-contact-map iframe {
        height: clamp(360px, 70vh, 560px);
    }
}
html body.stj-template .stj-contact-map__landmarks {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: #f6f3ec;
    border-left: 4px solid #C9A961;
    border-radius: 6px;
}
html body.stj-template .stj-contact-map__landmarks h3 {
    margin: 0 0 .75rem;
    color: #1B3A5C;
    font-size: 1.15rem;
}
html body.stj-template .stj-contact-map__landmarks ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem 1.25rem;
}
html body.stj-template .stj-contact-map__landmarks li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    color: #1B3A5C;
}
html body.stj-template .stj-contact-map__landmarks li i {
    color: #C9A961;
}
html[dir="rtl"] body.stj-template .stj-contact-map__landmarks {
    border-left: 0;
    border-right: 4px solid #C9A961;
}

/* Contact-page social-icon row: navy circles with a gold ring on hover,
   matching the brand palette instead of the legacy teal. */
html body.stj-template .stj-contact-social {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
html body.stj-template .stj-contact-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1B3A5C;
    color: #C9A961;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
html body.stj-template .stj-contact-social__link:hover,
html body.stj-template .stj-contact-social__link:focus-visible {
    background: #C9A961;
    color: #1B3A5C;
    border-color: #1B3A5C;
    transform: translateY(-2px);
}
html body.stj-template .stj-contact-social__link i {
    font-size: 1rem;
    line-height: 1;
}

/* =================================================================
   "We lead with heart" feature panel - navy band with a tagline,
   CTA, and a decorative gold line-art anatomical heart on the
   trailing edge. Inspired by Northside Hospital's heart strip,
   tinted to St Joseph's navy + gold palette.
   ================================================================= */
html body.stj-template .stj-lead-heart {
    position: relative;
    margin: 60px 0;
    padding: 0;
    background: linear-gradient(135deg, #1B3A5C 0%, #0f2440 60%, #1B3A5C 100%);
    color: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(15, 36, 64, .25);
    isolation: isolate;
}
html body.stj-template .stj-lead-heart::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at center, rgba(201, 169, 97, .09) 1.2px, transparent 1.6px),
        radial-gradient(circle at center, rgba(255, 255, 255, .035) 1px, transparent 1.4px);
    background-size: 26px 26px, 42px 42px;
    background-position: 0 0, 13px 21px;
    opacity: .6;
    pointer-events: none;
    z-index: 0;
}
/* Removed: decorative gold glow in the bottom-left corner of the
   "We lead with heart" card. Was a 320×320 radial-gradient bleeding
   in from the corner; the card looks cleaner without it. */
html body.stj-template .stj-lead-heart::after { display: none !important; }
html body.stj-template .stj-lead-heart__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    padding: 64px 56px;
    max-width: 1180px;
    margin: 0 auto;
}
html body.stj-template .stj-lead-heart__copy {
    max-width: 620px;
}
html body.stj-template .stj-lead-heart__title {
    font-family: 'Frank Ruhl Libre', 'Playfair Display', Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 18px;
    letter-spacing: .3px;
}
html body.stj-template .stj-lead-heart__title::after {
    content: '';
    display: block;
    width: 84px;
    height: 4px;
    margin-top: 16px;
    background: linear-gradient(90deg, #C9A961, #E5C07B, #C9A961);
    border-radius: 2px;
}
html body.stj-template .stj-lead-heart__text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 28px;
}
html body.stj-template .stj-lead-heart__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #C9A961, #E5C07B);
    color: #1B3A5C;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(201, 169, 97, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}
html body.stj-template .stj-lead-heart__cta:hover,
html body.stj-template .stj-lead-heart__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(201, 169, 97, .5);
    color: #1B3A5C;
}
html body.stj-template .stj-lead-heart__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
/* Heart sketch image wrapper -- handles the lub-dub pulse + glow */
html body.stj-template .stj-heart-beat-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 52%;
    will-change: transform;
    animation: stjHeartBeat 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
/* invert(1) flips white→black; hue-rotate(180deg) swings the inverted cyan back
   to deep red; mix-blend-mode screen then makes the black "background" fully
   transparent, leaving only the glowing red lines against the navy panel. */
html body.stj-template .stj-heart-sketch {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
    filter: invert(1) hue-rotate(180deg) saturate(5) brightness(0.6)
            drop-shadow(0 0 14px rgba(142, 14, 13, .65))
            drop-shadow(0 0 36px rgba(142, 14, 13, .38));
    mix-blend-mode: screen;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@keyframes stjHeartBeat {
    /* lub */
    0%   { transform: scale(1); }
    8%   { transform: scale(1.10); }
    18%  { transform: scale(0.97); }
    /* dub */
    28%  { transform: scale(1.06); }
    40%  { transform: scale(1); }
    /* rest */
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    html body.stj-template .stj-heart-beat-wrap { animation: none; }
}
@media (max-width: 900px) {
    html body.stj-template .stj-lead-heart { margin: 40px 0; border-radius: 14px; }
    html body.stj-template .stj-lead-heart__inner {
        grid-template-columns: 1fr;
        padding: 44px 28px;
        text-align: center;
    }
    html body.stj-template .stj-lead-heart__copy { margin: 0 auto; }
    html body.stj-template .stj-lead-heart__title::after { margin-left: auto; margin-right: auto; }
    html body.stj-template .stj-lead-heart__art { min-height: 240px; order: -1; }
    html body.stj-template .stj-heart-sketch { max-width: 230px; }
}
/* RTL: flip the art to the leading edge */
html[dir="rtl"] body.stj-template .stj-lead-heart__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
html[dir="rtl"] body.stj-template .stj-lead-heart__art { order: -1; }
html[dir="rtl"] body.stj-template .stj-lead-heart::after {
    left: auto;
    right: -90px;
}
@media (max-width: 900px) {
    html[dir="rtl"] body.stj-template .stj-lead-heart__inner { grid-template-columns: 1fr; }
}

/* =================================================================
   Polish pass: news placeholder, faculty image fallback, achievement
   number polish, standardised section H2 underlines, footer padding.
   ================================================================= */

/* News card thumbnail - gradient placeholder when no image */
html body.stj-template .stj-news-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 16 / 10;
    background: #f4f1e8;
    width: 100%;
}
html body.stj-template .stj-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
html body.stj-template .stj-news-thumb:hover img { transform: scale(1.04); }
html body.stj-template .stj-news-thumb--placeholder {
    background:
        radial-gradient(ellipse at center, rgba(201, 169, 97, .18) 0%, transparent 70%),
        linear-gradient(160deg, #1B3A5C 0%, #16314e 50%, #0f2440 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
html body.stj-template .stj-news-thumb__mark {
    color: rgba(201, 169, 97, .55);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.stj-template .stj-news-thumb__mark svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
}

/* Faculty-grid small images - navy/gold tinted bg behind in case
   the small image doesn't resolve (looks intentional, not broken). */
html body.stj-template .paragraph--type--faculty-grid .faculty-small-images img {
    background: linear-gradient(135deg, #1B3A5C 0%, #C9A961 100%);
    border-radius: 50%;
}

/* Achievement number - tighter typography, gold underline accent */
html body.stj-template .paragraph--type--linked-icon .text-wrapper p.teal {
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 2.1rem !important;
    color: #1B3A5C !important;
    line-height: 1;
    margin: 0 0 .35rem !important;
    letter-spacing: .5px;
}
html body.stj-template .paragraph--type--linked-icon .text-wrapper p:not(.teal) {
    font-size: .85rem;
    color: #555;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Standardised section H2 - gold underline ribbon under every
   text-block heading site-wide for visual rhythm. */
html body.stj-template .paragraph--type--text-block .field--name-field-title h2,
html body.stj-template .paragraph--type--linked-icon-container > .field--name-field-heading,
html body.stj-template .paragraph--type--faculty-grid .faculty-text .field--name-field-title h2 {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 18px;
}
html body.stj-template .paragraph--type--text-block .field--name-field-title h2::after,
html body.stj-template .paragraph--type--linked-icon-container > .field--name-field-heading::after,
html body.stj-template .paragraph--type--faculty-grid .faculty-text .field--name-field-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, #C9A961, #E5C07B, #C9A961);
    border-radius: 2px;
}
/* Centered headings get centered ribbon */
html body.stj-template .paragraph--type--linked-icon-container .field--name-field-heading,
html body.stj-template .paragraph--type--linked-icon-container > .field--name-field-heading {
    text-align: center;
}
html body.stj-template .paragraph--type--linked-icon-container > .field--name-field-heading::after {
    left: 50%;
    transform: translateX(-50%);
}
html[dir="rtl"] body.stj-template .paragraph--type--text-block .field--name-field-title h2::after,
html[dir="rtl"] body.stj-template .paragraph--type--faculty-grid .faculty-text .field--name-field-title h2::after {
    left: auto;
    right: 0;
}

/* Footer - tight vertical rhythm. Padding kept minimal so the navy
   block hugs the column content. Grid uses align-items:start so
   shorter cells (e.g. brand) don't stretch and create dead space
   below the tagline. */
html body.stj-template .footer__wrap {
    padding-block: 18px 6px !important;
}
html body.stj-template .footer__inner {
    gap: 20px !important;
    row-gap: 20px !important;
    align-items: start !important;
}
html body.stj-template .footer__below {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 768px) {
    html body.stj-template .footer__wrap { padding-block: 14px 6px !important; }
    html body.stj-template .footer__inner { gap: 16px !important; }
}

/* =================================================================
   Round-2 polish: hero caption refinement, lead-heart copy,
   alternating news placeholder, clinical-programs main image,
   find-a-doctor framing, donate CTA, universal-header contrast.
   ================================================================= */

/* Hero caption - more refined typography (less heavy, more "premium hospital") */
html body.stj-template .region-hero .stj-hero-caption {
    width: 32rem !important;
    padding: 3.5rem 2.75rem 2.75rem !important;
    background: linear-gradient(135deg, rgba(27, 58, 92, .92) 0%, rgba(15, 36, 64, .94) 100%) !important;
    border-radius: 0 0 3rem 0 !important;
    box-shadow: 0 12px 40px rgba(15, 36, 64, .3) !important;
    border-left: 4px solid #C9A961;
}
html body.stj-template .region-hero .stj-hero-caption__title {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: .3px !important;
    text-transform: none !important;
    color: #ffffff !important;
    margin: 0 0 .85rem !important;
}
/* Accent rule is rendered by the dedicated .stj-hero-caption__accent span
   (animated by Motion). Suppress the duplicate ::after on the title. */
html body.stj-template .region-hero .stj-hero-caption__title::after {
    content: none !important;
    display: none !important;
}
html body.stj-template .region-hero .stj-hero-caption__body {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, .92) !important;
    margin: 0 0 1.6rem !important;
}
/* Hero CTA - prominent gold pill (was outline). Single, bold action
   so the hero meets "primary action focus" reviewer feedback. */
html body.stj-template .region-hero .stj-hero-caption__btn {
    background: linear-gradient(135deg, #C9A961 0%, #E5C07B 100%) !important;
    border: 0 !important;
    color: #1B3A5C !important;
    padding: 1rem 2.4rem !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 30px rgba(201, 169, 97, .45), inset 0 1px 0 rgba(255,255,255,.35) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
html body.stj-template .region-hero .stj-hero-caption__btn:hover,
html body.stj-template .region-hero .stj-hero-caption__btn:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 40px rgba(201, 169, 97, .6), inset 0 1px 0 rgba(255,255,255,.4) !important;
    filter: brightness(1.05);
    color: #0f2440 !important;
}

/* Lead-heart panel - bump body copy size + give it more breathing room */
html body.stj-template .stj-lead-heart__text {
    font-size: 1.18rem !important;
    line-height: 1.8 !important;
}
html body.stj-template .stj-lead-heart__title {
    font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important;
}
html body.stj-template .stj-lead-heart__copy {
    max-width: 680px !important;
    padding-right: 12px;
}

/* News listing on the homepage - 4-column card grid, image stacked
   on top of the text (overrides the bundle's horizontal flex teaser). */
html body.stj-template .region-content .view-news-events .view-content {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}
html body.stj-template .region-content .view-news-events .views-row {
    margin: 0 !important;
    background: #fff;
    border: 1px solid rgba(201, 169, 97, .25);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 36, 64, .06);
}
html body.stj-template .region-content .view-news-events .node__content {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
}
html body.stj-template .region-content .view-news-events .field--name-field-image {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
html body.stj-template .region-content .view-news-events .field--name-field-image,
html body.stj-template .region-content .view-news-events .field--name-field-image > .field__item,
html body.stj-template .region-content .view-news-events .field--name-field-image .media,
html body.stj-template .region-content .view-news-events .field--name-field-image .field--name-field-media-image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
}
html body.stj-template .region-content .view-news-events .stj-news-thumb,
html body.stj-template .region-content .view-news-events .media--view-mode-photo-cta-image,
html body.stj-template .region-content .view-news-events .field--name-field-media-image,
html body.stj-template .region-content .view-news-events .stj-news-thumb img {
    aspect-ratio: 16 / 10;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
}
html body.stj-template .region-content .view-news-events .stj-news-thumb img {
    height: 100%;
    object-fit: cover;
}
html body.stj-template .region-content .view-news-events .text-container {
    padding: 16px 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
html body.stj-template .region-content .view-news-events .text-container > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
html body.stj-template .region-content .view-news-events .text-container h2 {
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: .95rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    color: #1B3A5C;
    display: block !important;
    word-spacing: normal !important;
    min-height: calc(1.3em * 2);
}
html body.stj-template .region-content .view-news-events .text-container h2 * {
    line-height: inherit !important;
    font-family: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body.stj-template .region-content .view-news-events .text-container h2 a {
    font-family: inherit !important;
    color: inherit !important;
    display: inline !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    line-height: inherit !important;
}
html body.stj-template .region-content .view-news-events .text-container h2 a {
    color: #1B3A5C;
    text-decoration: none;
}
html body.stj-template .region-content .view-news-events .text-container h2 a:hover {
    color: #C9A961;
}
html body.stj-template .region-content .view-news-events .field--name-field-date-published,
html body.stj-template .region-content .view-news-events .stj-news-date {
    font-size: .72rem !important;
    color: #8a7a4f !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
    margin: 0 0 10px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
html body.stj-template .region-content .view-news-events .stj-news-date__dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C9A961, #E5C07B);
}
html body.stj-template .region-content .view-news-events .field--name-body,
html body.stj-template .region-content .view-news-events .stj-news-excerpt {
    font-size: .88rem;
    line-height: 1.55;
    color: #555;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category chip - small gold uppercase tag above the title */
html body.stj-template .region-content .view-news-events .stj-news-category {
    display: inline-block;
    align-self: flex-start;
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #C9A961;
    margin: 0 0 8px;
    padding: 4px 10px;
    background: rgba(201, 169, 97, .12);
    border-radius: 999px;
    line-height: 1;
}

/* Read more CTA - subtle gold link aligned to bottom of card */
html body.stj-template .region-content .view-news-events .stj-news-readmore {
    margin-top: auto;
    align-self: flex-start;
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #C9A961;
    text-decoration: none;
    padding-top: 4px;
    border-top: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
html body.stj-template .region-content .view-news-events .views-row:hover .stj-news-readmore {
    color: #1B3A5C;
    border-top-color: #C9A961;
}

/* Equalize card heights - all cards align bottoms with the read-more link */
html body.stj-template .region-content .view-news-events .views-row {
    display: flex;
    flex-direction: column;
}
html body.stj-template .region-content .view-news-events .node--type-news {
    flex: 1;
    display: flex;
    flex-direction: column;
}
html body.stj-template .region-content .view-news-events .text-container {
    flex: 1 !important;
}

/* Branded "View All <thing>" links - navy with gold underline that
   slides in on hover. Used by the homepage news/news-listing CTAs. */
html body.stj-template .stj-view-all-link {
    color: #1B3A5C !important;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    display: inline-block;
    transition: color .2s ease;
}
html body.stj-template .stj-view-all-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #C9A961, #E5C07B, #C9A961);
    transform: scaleX(.4);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
html body.stj-template .stj-view-all-link:hover {
    color: #C9A961 !important;
}
html body.stj-template .stj-view-all-link:hover::after {
    transform: scaleX(1);
}

/* News thumbnail placeholder - alternate variants so a row of
   placeholderless cards doesn't look repetitive. */
html body.stj-template .view-news-events .views-row:nth-child(2n) .stj-news-thumb--placeholder {
    background:
        radial-gradient(ellipse at center, rgba(201, 169, 97, .12) 0%, transparent 70%),
        linear-gradient(160deg, #2c5282 0%, #1f4470 50%, #163050 100%);
}
html body.stj-template .view-news-events .views-row:nth-child(2n) .stj-news-thumb__mark {
    color: rgba(201, 169, 97, .5);
}
html body.stj-template .view-news-events .views-row:nth-child(3n) .stj-news-thumb--placeholder {
    background:
        radial-gradient(ellipse at center, rgba(201, 169, 97, .22) 0%, transparent 70%),
        linear-gradient(160deg, #2c5282 0%, #20446b 50%, #1B3A5C 100%);
}
html body.stj-template .view-news-events .views-row:nth-child(4n) .stj-news-thumb--placeholder {
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, .12) 0%, transparent 70%),
        linear-gradient(160deg, #1B3A5C 0%, #16314e 100%);
}
/* News card itself - lift on hover, soft shadow */
html body.stj-template .view-news-events .views-row {
    transition: transform .25s ease, box-shadow .25s ease;
    border-radius: 10px;
}
html body.stj-template .view-news-events .views-row:hover {
    transform: translateY(-4px);
}

/* Clinical Programs - enforce a min height on the main image so it
   actually fills the layout rather than collapsing. Background gradient
   shows through until lazy-load completes (no blank circle). */
html body.stj-template .paragraph--type--faculty-grid .main-image {
    min-height: 320px;
    background: linear-gradient(135deg, #1B3A5C 0%, #C9A961 100%);
    border-radius: 50%;
}
html body.stj-template .paragraph--type--faculty-grid .main-image img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    border-radius: 50%;
}
/* Education Programs - photo-cta image gradient fallback. Only paint
   the gradient on cards whose image hasn't loaded yet OR is broken;
   when the <img> is in place and complete, leave the wrapper transparent
   so the photo isn't half-covered by gold. */
html body.stj-template .paragraph--type--photo-cta .image-wrapper {
    background: transparent;
    border-radius: 50%;
    overflow: hidden;
}
html body.stj-template .paragraph--type--photo-cta .image-wrapper:has(img:not([src]):not([data-src])),
html body.stj-template .paragraph--type--photo-cta .image-wrapper:not(:has(img)) {
    background: linear-gradient(135deg, #1B3A5C 0%, #C9A961 100%);
    min-height: 220px;
}
html body.stj-template .paragraph--type--photo-cta .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Find a Doctor - tinted card background so it doesn't float
   orphaned in the cream backdrop. */
html body.stj-template .stj-find-doctor {
    background: linear-gradient(135deg, #ffffff 0%, #f4efe1 100%) !important;
    border: 1px solid rgba(201, 169, 97, .35);
    box-shadow: 0 16px 40px rgba(15, 36, 64, .08);
    border-radius: 16px;
    padding: 40px 36px !important;
    margin: 40px auto;
    max-width: 880px;
    position: relative;
}
html body.stj-template .stj-find-doctor::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(201, 169, 97, .12) 1px, transparent 1.4px);
    background-size: 22px 22px;
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}
html body.stj-template .stj-find-doctor > * { position: relative; z-index: 1; }

/* Donate CTA - bolder pill button, more presence */
html body.stj-template .paragraph--type--small-cta {
    background: linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%) !important;
    border-radius: 16px !important;
    padding: 3rem 2.5rem !important;
    position: relative;
    overflow: hidden;
}
html body.stj-template .paragraph--type--small-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(201, 169, 97, .08) 1.2px, transparent 1.6px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: .7;
}
html body.stj-template .paragraph--type--small-cta > * { position: relative; }
html body.stj-template .paragraph--type--small-cta h2 {
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 2.2rem !important;
}
html body.stj-template .paragraph--type--small-cta a {
    background: linear-gradient(135deg, #C9A961, #E5C07B) !important;
    color: #1B3A5C !important;
    padding: 1.1rem 3rem !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 12px 28px rgba(201, 169, 97, .35);
    transition: transform .2s ease, box-shadow .2s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
html body.stj-template .paragraph--type--small-cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(201, 169, 97, .55);
}

/* Universal top strip - stronger navy + slightly larger text for visibility */
html body.stj-template .universal-header {
    background: #0f2440 !important;
    min-height: 42px !important;
    border-bottom: 1px solid rgba(201, 169, 97, .25);
}
html body.stj-template .universal-header,
html body.stj-template .universal-header a,
html body.stj-template .universal-header .menu--top-banner-menu a {
    font-size: .88rem !important;
    font-weight: 500 !important;
    letter-spacing: .3px;
}

/* =================================================================
   Department detail page hero - full-bleed photo with navy/gold
   gradient overlay and centered title block.
   ================================================================= */
html body.stj-template .stj-dept-hero {
    position: relative;
    width: 100%;
    height: clamp(280px, 40vw, 460px);
    overflow: hidden;
    margin: 0 0 40px;
    isolation: isolate;
    border-radius: 0 0 18px 18px;
}
html body.stj-template .stj-dept-hero__media { position: absolute; inset: 0; z-index: 0; }
html body.stj-template .stj-dept-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
html body.stj-template .stj-dept-hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(15, 36, 64, .25) 0%, rgba(15, 36, 64, .85) 100%),
        linear-gradient(135deg, rgba(27, 58, 92, .55) 0%, rgba(201, 169, 97, .25) 100%);
}
html body.stj-template .stj-dept-hero__content {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 40px clamp(24px, 6vw, 80px) 48px;
    max-width: 1200px; margin: 0 auto;
    color: #ffffff;
}
html body.stj-template .stj-dept-hero__eyebrow {
    display: inline-block; align-self: flex-start;
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: .78rem; font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase;
    color: #C9A961;
    background: rgba(201, 169, 97, .12);
    border: 1px solid rgba(201, 169, 97, .4);
    padding: 6px 14px; border-radius: 999px;
    margin-bottom: 14px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
html body.stj-template .stj-dept-hero__title {
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 700; line-height: 1.1;
    color: #ffffff; margin: 0 0 12px;
    letter-spacing: .3px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}
html body.stj-template .stj-dept-hero__title::after {
    content: ''; display: block;
    width: 72px; height: 4px; margin-top: 14px;
    background: linear-gradient(90deg, #C9A961, #E5C07B, #C9A961);
    border-radius: 2px;
}
html body.stj-template .stj-dept-hero__lede {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    max-width: 680px; margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
@media (max-width: 768px) {
    html body.stj-template .stj-dept-hero {
        height: auto !important;
        min-height: clamp(240px, 40vw, 320px);
        margin-bottom: 28px;
        border-radius: 0 0 12px 12px;
    }
    html body.stj-template .stj-dept-hero__content { padding: 32px 24px; }
}

/* =================================================================
   Footer redesign - emergency strip + 4-column grid (brand,
   hospital, patients, get-involved, contact). Replaces the old
   logo/menu/social 3-cell layout that left empty space in the
   middle.
   ================================================================= */
/* Emergency strip - the earlier rule
   `html body.stj-template .footer > div:not(.footer__waves) { background: #1B3A5C !important }`
   was painting our gold strip navy. We list both selectors so the
   compound `.footer > .stj-footer-emergency` wins on specificity. */
html body.stj-template .footer > .stj-footer-emergency,
html body.stj-template .stj-footer-emergency {
    background: linear-gradient(135deg, #b8985a 0%, #d4b56e 50%, #b8985a 100%) !important;
    color: #0f2440 !important;
    padding: 18px 24px !important;
    position: relative;
    z-index: 5;
    box-shadow: 0 -4px 14px rgba(15, 36, 64, .12), 0 4px 14px rgba(15, 36, 64, .12);
}
html body.stj-template .stj-footer-emergency__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}
html body.stj-template .stj-footer-emergency__icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #1B3A5C;
    color: #C9A961;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(15, 36, 64, .35);
    flex-shrink: 0;
}
html body.stj-template .stj-footer-emergency__icon i {
    animation: stjEmergencyRing 2s ease-in-out infinite;
}
@keyframes stjEmergencyRing {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-12deg); }
    20%, 40% { transform: rotate(12deg); }
    50%      { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    html body.stj-template .stj-footer-emergency__icon i { animation: none; }
}
html body.stj-template .stj-footer-emergency__text {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
html body.stj-template .stj-footer-emergency__label {
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
html body.stj-template .stj-footer-emergency__number {
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f2440;
    text-decoration: none;
    letter-spacing: .5px;
    transition: color .2s ease;
    direction: ltr;
}
html body.stj-template .stj-footer-emergency__number:hover { color: #1B3A5C; text-decoration: underline; }
html body.stj-template .stj-footer-emergency__cta {
    margin-left: auto;
    padding: 8px 18px;
    background: rgba(27, 58, 92, .15);
    border: 1px solid rgba(27, 58, 92, .35);
    color: #0f2440;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .8px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
html body.stj-template .stj-footer-emergency__cta:hover {
    background: #0f2440;
    color: #C9A961;
}
html[dir="rtl"] body.stj-template .stj-footer-emergency__cta {
    margin-left: 0;
    margin-right: auto;
}

/* 4-column grid: brand (wider) | Hospital | Patients | Get Involved | Contact */
html body.stj-template .stj-footer-grid {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr !important;
    gap: 40px !important;
    align-items: start;
}
@media (max-width: 1100px) {
    html body.stj-template .stj-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr !important;
        row-gap: 36px !important;
    }
    html body.stj-template .stj-footer-col--contact {
        grid-column: 1 / -1;
    }
}
@media (max-width: 700px) {
    html body.stj-template .stj-footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Brand cell - logo grouped tight with social row, tagline below */
html body.stj-template .stj-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: start;
}
html body.stj-template .stj-footer-brand .footer__logo {
    margin: 0;
}
html body.stj-template .stj-footer-tagline {
    color: rgba(255, 255, 255, .82);
    font-size: .88rem;
    line-height: 1.55;
    margin: 0;
    max-width: 360px;
    letter-spacing: .15px;
}
html body.stj-template .stj-footer-social {
    margin: 4px 0 0;
}

/* Centered social-icon strip below the column grid. Spans the full
   footer inner width, gold pill icons, equal spacing. Sits between
   the column grid and the bottom copyright bar. */
html body.stj-template .stj-footer-socialbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px 0 4px;
    padding: 16px 0 8px;
    position: relative;
    z-index: 2; /* above the .footer::after silhouette */
}
html body.stj-template .stj-footer-socialbar .menu-social {
    display: flex !important;
    gap: 14px !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
html body.stj-template .stj-footer-socialbar .menu-social .menu-item a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(201, 169, 97, .14) !important;
    border: 1px solid rgba(201, 169, 97, .35);
    color: #C9A961 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
html body.stj-template .stj-footer-socialbar .menu-social .menu-item a:hover {
    background: linear-gradient(135deg, #C9A961, #E5C07B) !important;
    color: #1B3A5C !important;
    transform: translateY(-2px);
}
html body.stj-template .stj-footer-social .menu-social {
    display: flex !important;
    gap: 10px !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
html body.stj-template .stj-footer-social .menu-social .menu-item a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(201, 169, 97, .14) !important;
    border: 1px solid rgba(201, 169, 97, .35);
    color: #C9A961 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
html body.stj-template .stj-footer-social .menu-social .menu-item a:hover {
    background: linear-gradient(135deg, #C9A961, #E5C07B) !important;
    color: #1B3A5C !important;
    transform: translateY(-2px);
}

/* Column heading + link list */
html body.stj-template .stj-footer-col__heading {
    color: #C9A961;
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding: 0 0 10px;
    position: relative;
}
html body.stj-template .stj-footer-col__heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, #C9A961, transparent);
}
html[dir="rtl"] body.stj-template .stj-footer-col__heading::after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, #C9A961, transparent);
}
html body.stj-template .stj-footer-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
html body.stj-template .stj-footer-col__list a {
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}
html body.stj-template .stj-footer-col__list a:hover {
    color: #C9A961;
    padding-left: 4px;
}
html[dir="rtl"] body.stj-template .stj-footer-col__list a:hover {
    padding-left: 0;
    padding-right: 4px;
}

/* Contact column - icon + text rows */
html body.stj-template .stj-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
html body.stj-template .stj-footer-contact__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, .85);
    font-size: .92rem;
    line-height: 1.5;
}
html body.stj-template .stj-footer-contact__row i {
    color: #C9A961;
    font-size: .92rem;
    margin-top: 4px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
html body.stj-template .stj-footer-contact__row a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .2s ease;
}
html body.stj-template .stj-footer-contact__row a:hover { color: #C9A961; }
html body.stj-template .stj-footer-contact__row--cta {
    margin-top: 6px;
}
html body.stj-template .stj-footer-directions {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(201, 169, 97, .55);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: #C9A961 !important;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
html body.stj-template .stj-footer-directions:hover,
html body.stj-template .stj-footer-directions:focus {
    background: #C9A961;
    color: #1B3A5C !important;
    border-color: #C9A961;
    transform: translateY(-1px);
}
html body.stj-template .stj-footer-directions i {
    color: inherit !important;
    margin-top: 0 !important;
}
html body.stj-template .stj-footer-award {
    margin-top: 18px;
    max-width: 120px;
}
html body.stj-template .stj-footer-award img {
    width: 100%;
    height: auto;
    opacity: .85;
}

/* =================================================================
   UI/UX review pass - visual hierarchy + interaction feedback.
   Targets: quick-action cards, achievements, lead-heart, medical
   departments, find-a-doctor, generic hover polish.
   ================================================================= */

/* #2 Quick-action cards - bigger, more dominant, stronger hover.
   These are the primary entry points (Appointment / Refer / Doctor /
   Department), so the cards now carry more visual weight: more
   padding, larger icons, gold gradient on hover, lifted shadow. */
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon-container {
    padding: 2.5rem 0 1.5rem !important;
}
html body.stj-template .region-content .item-1 .field--name-field-linked-icons {
    gap: 1.75rem !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon {
    padding: 2rem 1.5rem !important;
    border-radius: 12px !important;
    border-left-width: 5px !important;
    box-shadow: 0 6px 20px rgba(27, 58, 92, .07) !important;
    position: relative;
    overflow: hidden;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0) 0%, rgba(201, 169, 97, .08) 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 40px rgba(27, 58, 92, .18) !important;
    border-left-color: #1B3A5C !important;
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon:hover::after { opacity: 1; }
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon img {
    width: 72px !important;
    height: 72px !important;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon:hover img {
    transform: scale(1.08) rotate(-3deg);
}
html body.stj-template .region-content .item-1 .paragraph--type--linked-icon p:last-child {
    font-size: 1.25rem !important;
}

/* #3 Achievements - bigger, bolder numbers with subtle gold underline */
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon p:first-child,
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon .field--name-field-paragraph p.teal,
html body.stj-template .paragraph--type--linked-icon .text-wrapper p.teal {
    font-family: 'Frank Ruhl Libre', Georgia, serif !important;
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    color: #1B3A5C !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
    margin: 0 0 .4rem !important;
    background: linear-gradient(135deg, #1B3A5C 0%, #2c5282 60%, #C9A961 140%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon {
    transition: transform .25s ease;
}
html body.stj-template .region-content .item-2 .paragraph--type--linked-icon:hover {
    transform: translateY(-3px);
}

/* #4 Lead with heart - bigger copy, more presence */
html body.stj-template .stj-lead-heart__text {
    font-size: 1.22rem !important;
    line-height: 1.85 !important;
    color: rgba(255, 255, 255, .94) !important;
}
html body.stj-template .stj-lead-heart__title {
    font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
}
html body.stj-template .stj-lead-heart__inner {
    padding: 72px 64px !important;
}

/* #5 Medical Departments - stronger hover (scale + glow + gold border) */
html body.stj-template .region-content .item-3 .paragraph--type--photo-cta,
html body.stj-template .region-content .paragraph--type--photo-cta {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
html body.stj-template .region-content .paragraph--type--photo-cta:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 22px 44px rgba(27, 58, 92, .18);
}
html body.stj-template .region-content .paragraph--type--photo-cta--icon .photo-cta__icon-badge {
    transition: transform .3s ease, filter .3s ease;
}
html body.stj-template .region-content .paragraph--type--photo-cta--icon:hover .photo-cta__icon-badge {
    transform: scale(1.1) rotate(-4deg);
    filter: drop-shadow(0 8px 20px rgba(201, 169, 97, .55));
}

/* #6 Find a Doctor - more prominent, bigger search input */
html body.stj-template .stj-find-doctor {
    padding: 56px 48px !important;
    max-width: 960px !important;
    margin: 56px auto !important;
    box-shadow: 0 28px 56px rgba(15, 36, 64, .12) !important;
    border-width: 2px !important;
}
html body.stj-template .stj-find-doctor__heading {
    font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
    margin-bottom: 1.5rem !important;
}
html body.stj-template .stj-find-doctor__form {
    max-width: 720px;
    margin: 0 auto !important;
}
html body.stj-template .stj-find-doctor__input,
html body.stj-template #stj-find-doctor-input,
html body.stj-template .stj-find-doctor input[type="search"],
html body.stj-template .stj-find-doctor input[type="text"] {
    height: 64px !important;
    font-size: 1.1rem !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    border: 2px solid rgba(201, 169, 97, .35) !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 36, 64, .06) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
html body.stj-template .stj-find-doctor input:focus {
    outline: none !important;
    border-color: #C9A961 !important;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, .18), 0 8px 22px rgba(15, 36, 64, .12) !important;
}
html body.stj-template .stj-find-doctor button[type="submit"],
html body.stj-template .stj-find-doctor__submit {
    min-height: 56px;
    padding: 0 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 12px !important;
}

/* #8 General interaction polish - smooth transitions + hover lift on
   interactive cards across the homepage that don't already have one. */
html body.stj-template a,
html body.stj-template button {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
html body.stj-template .paragraph--type--photo-cta,
html body.stj-template .stj-news-card,
html body.stj-template .view-news-events .views-row {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
html body.stj-template .view-news-events .views-row:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(15, 36, 64, .14);
}

/* Header utility pill - Make an Appointment CTA */
html body.stj-template .menu--utility-menu .stj-utility-appointment > a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem !important;
    border-radius: 999px;
    background: #C9A961 !important;
    color: #1B3A5C !important;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: background .2s ease, transform .2s ease;
}
html body.stj-template .menu--utility-menu .stj-utility-appointment > a:hover,
html body.stj-template .menu--utility-menu .stj-utility-appointment > a:focus {
    background: #E5C07B !important;
    color: #1B3A5C !important;
    transform: translateY(-1px);
}
html body.stj-template .menu--utility-menu .stj-utility-appointment > a > i {
    font-size: .95em;
}
html body.stj-template .menu--utility-menu .stj-utility-appointment + .menu-item::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: 0 .6rem;
    background: rgba(255, 255, 255, .25);
    vertical-align: middle;
}

/* =================================================================
   About > Our Journey: horizontal draggable + auto-drifting timeline.
   Cards stack on a navy rail with a gold clock medallion at each node.
   A heartbeat pulse rides the rail, an era-tinted backdrop colours the
   strip from sepia (oldest) to navy (newest), and each card flips from
   a sepia "Then" treatment to full-colour "Now" on hover.
   ================================================================= */
html body.stj-template .stj-timeline {
    position: relative;
    margin: 1.5rem 0 2rem;
    padding: 1rem 0;
    /* Continuous pale-navy band that runs the full width of the timeline
       behind every milestone card , so the highlight stays uniform from
       the first memory to the last. Applied here (not on .__era inside
       the scrolling track) so it never gets clipped by scroll position. */
    background: linear-gradient(180deg, rgba(27, 58, 92, .07) 0%, rgba(27, 58, 92, .12) 100%);
    border: 1px solid rgba(27, 58, 92, .08);
    border-radius: 14px;
}
html body.stj-template .stj-timeline__track {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.5rem 3rem 2rem;
    /* No CSS scroll-behavior: smooth here - it fights the per-frame
       auto-drift reset at end-of-content. Prev/next buttons request
       smooth scroll explicitly via scrollBy({behavior:'smooth'}). */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    /* Block text selection across the whole carousel - without this,
       click-and-drag inside a card highlights the title/description in
       blue and the browser's text-selection drag steals from our pointer
       handlers, so the carousel won't scroll. Touch behaviour: still
       allow vertical page scroll, but capture horizontal pans. */
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}
html body.stj-template .stj-timeline__track * {
    -webkit-user-select: none;
    user-select: none;
}
/* Stop the blue ::selection halo from ever showing on timeline content. */
html body.stj-template .stj-timeline__track ::selection {
    background: transparent;
}
html body.stj-template .stj-timeline__track::-webkit-scrollbar {
    display: none;
}
html body.stj-template .stj-timeline.is-dragging .stj-timeline__track {
    cursor: grabbing;
    scroll-behavior: auto;
}
/* SVG EKG rail: a permanent heartbeat trace that spans the visible track
   between the prev/next arrows. The glowing dot inside the SVG rides
   along the same path via <animateMotion>, so it travels straight along
   the flat segments and rises over each QRS spike. */
html body.stj-template .stj-timeline__rail-svg {
    position: absolute;
    left: 3rem;
    /* Drop the line down so its centre (top + 30px) sits roughly at the
       medallion's vertical centre - year is ~26px tall, then 22px to the
       medallion centre = ~48px from the track's content top. With 1.5rem
       (24px) padding-top, the rail centre should land near 48px ⇒ rail
       top ≈ 18px ⇒ calc(1.5rem - 6px) = calc(1.5rem + 18px - 24px). We
       use a simpler expression below. */
    top: calc(1.5rem + 22px);
    height: 60px;
    /* Fallback width = visible viewport minus the two 3rem gutters.
       JS overrides this on init/resize with track.scrollWidth so the
       EKG line stretches across every card, including ones currently
       scrolled past the visible edge. */
    width: calc(100% - 6rem);
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}
html body.stj-template .stj-timeline__cursor {
    filter:
        drop-shadow(0 0 6px rgba(201, 169, 97, .9))
        drop-shadow(0 0 16px rgba(201, 169, 97, .55));
}
html body.stj-template .stj-timeline__item {
    flex: 0 0 auto;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
html body.stj-template .stj-timeline__year {
    color: #1B3A5C;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .5px;
    /* Tighter spacing pulls the year closer to the top so the medallion
       below it can sit centred on the EKG line. */
    margin-bottom: .15rem;
    line-height: 1.1;
}
html body.stj-template .stj-timeline__node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1B3A5C;
    color: #C9A961;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #C9A961, 0 4px 14px rgba(27, 58, 92, .25);
    position: relative;
    /* z-index 3 so the medallion sits ON TOP of the EKG line (which is
       z-index 1) and the moving gold cursor passes behind it. */
    z-index: 3;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
html body.stj-template .stj-timeline__item:hover .stj-timeline__node {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px #C9A961, 0 8px 20px rgba(201, 169, 97, .4);
}
html body.stj-template .stj-timeline__card {
    margin-top: 1.25rem;
    background: #fff;
    border: 1px solid #ece4d3;
    border-top: 3px solid #C9A961;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(27, 58, 92, .08);
    width: 100%;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
html body.stj-template .stj-timeline__item:hover .stj-timeline__card {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(27, 58, 92, .14);
}
html body.stj-template .stj-timeline__media {
    position: relative;
    margin: -1rem -1rem .75rem;
    aspect-ratio: 16/10;
    overflow: hidden;
    /* Default state = strict black & white, like an old archive print.
       On hover the filter lifts for the "Now" full-colour reveal. */
    filter: grayscale(1) contrast(1.05) brightness(.97);
    transition: filter .65s cubic-bezier(.2,.7,.2,1);
}
html body.stj-template .stj-timeline__item:hover .stj-timeline__media,
html body.stj-template .stj-timeline__item:focus-within .stj-timeline__media,
html body.stj-template .stj-timeline__item.is-current .stj-timeline__media {
    /* "Current" card (the one the pulse is at) shows the photo in
       its original colours; every other card stays archival B&W. */
    filter: grayscale(0) contrast(1) brightness(1);
}
html body.stj-template .stj-timeline__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
html body.stj-template .stj-timeline__item:hover .stj-timeline__media img {
    transform: scale(1.04);
}
/* Decorative placeholder for milestones missing an uploaded image -
   navy gradient wash, faint year watermark, large heritage glyph. */
html body.stj-template .stj-timeline__media--placeholder {
    filter: none;
    background:
        radial-gradient(circle at 30% 30%, rgba(201,169,97,.32) 0%, transparent 60%),
        linear-gradient(135deg, #1B3A5C 0%, #0f2440 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 169, 97, .85);
    position: relative;
}
html body.stj-template .stj-timeline__media--placeholder i {
    font-size: 2.4rem;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    position: relative;
    z-index: 1;
}
html body.stj-template .stj-timeline__placeholder-year {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 3.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .06);
    letter-spacing: 2px;
    z-index: 0;
}

/* Make the media area a button so the keyboard can focus + activate it.
   Strip the default button chrome and keep our existing media styling. */
html body.stj-template .stj-timeline__media--zoomable {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
    width: auto;
    text-align: inherit;
    font: inherit;
    color: inherit;
}
/* Without these, the browser's default image-drag handler swallows
   the click on the <img> child and never emits a click event on the
   parent button. Buttons aren't draggable by default, so routing the
   pointer events to the button itself fixes the click. */
html body.stj-template .stj-timeline__media--zoomable > img,
html body.stj-template .stj-timeline__media--zoomable > .stj-timeline__zoom-hint {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}
html body.stj-template .stj-timeline__media--zoomable:focus-visible {
    outline: 2px solid #C9A961;
    outline-offset: 2px;
}
/* A small expand glyph in the corner of each photo so users know it's
   interactive. Appears on hover/focus only, so it doesn't compete with
   the photo at rest. */
html body.stj-template .stj-timeline__zoom-hint {
    position: absolute;
    top: .5rem;
    inset-inline-end: .5rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(27, 58, 92, .82);
    color: #C9A961;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
html body.stj-template .stj-timeline__media--zoomable:hover .stj-timeline__zoom-hint,
html body.stj-template .stj-timeline__media--zoomable:focus-visible .stj-timeline__zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

/* =================================================================
   Lightbox - vanilla, scoped to the Our Journey timeline. Opens to a
   museum-exhibit style frame: white mat board, gold rule, year tag,
   title, description, archive footer. Navy backdrop with a soft blur.
   ================================================================= */
html body.stj-template .stj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 36, 64, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.2,.7,.2,1);
}
html body.stj-template .stj-lightbox:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}
html body.stj-template .stj-lightbox[hidden] { display: none; }
html body.stj-template .stj-lightbox__inner {
    background: #fbfaf6;
    border: 1px solid rgba(201, 169, 97, .35);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 169, 97, .2);
    max-width: min(1100px, 92vw);
    max-height: 92vh;
    overflow: auto;
    transform: translateY(8px) scale(.985);
    opacity: 0;
    transition: opacity .35s cubic-bezier(.2,.7,.2,1) .05s,
                transform .45s cubic-bezier(.2,.7,.2,1) .05s;
}
html body.stj-template .stj-lightbox:not([hidden]) .stj-lightbox__inner {
    opacity: 1;
    transform: translateY(0) scale(1);
}
html body.stj-template .stj-lightbox__figure {
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 1.25rem 1.25rem 0;
}
html body.stj-template .stj-lightbox__img {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: #1B3A5C;
    border: 1px solid rgba(201, 169, 97, .35);
    border-radius: 2px;
}
html body.stj-template .stj-lightbox__caption {
    padding: 1.25rem 0;
    text-align: center;
    border-top: 1px solid rgba(201, 169, 97, .35);
    margin-top: 1.25rem;
    position: relative;
}
html body.stj-template .stj-lightbox__year {
    display: inline-block;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #C9A961;
    padding: .25rem .75rem;
    border: 1px solid #C9A961;
    border-radius: 2px;
    margin-bottom: .75rem;
}
html body.stj-template .stj-lightbox__title {
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1B3A5C;
    margin: 0 0 .6rem;
    line-height: 1.2;
}
html body.stj-template .stj-lightbox__desc {
    margin: 0 auto;
    max-width: 60ch;
    color: #4d5a66;
    font-size: 1rem;
    line-height: 1.6;
}
html body.stj-template .stj-lightbox__archive {
    margin: 1rem 0 0;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: .7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #94795a;
}
html body.stj-template .stj-lightbox__close {
    position: absolute;
    top: 1.25rem;
    inset-inline-end: 1.25rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 97, .5);
    background: rgba(27, 58, 92, .55);
    color: #C9A961;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    z-index: 1;
}
html body.stj-template .stj-lightbox__close:hover,
html body.stj-template .stj-lightbox__close:focus-visible {
    background: #C9A961;
    color: #1B3A5C;
    transform: scale(1.06);
}
/* Prevent body scroll while the lightbox is open (JS toggles the class). */
html.stj-lightbox-open,
html.stj-lightbox-open body { overflow: hidden; }
@media (max-width: 640px) {
    html body.stj-template .stj-lightbox { padding: .75rem; }
    html body.stj-template .stj-lightbox__figure { padding: .75rem .75rem 0; }
    html body.stj-template .stj-lightbox__title { font-size: 1.2rem; }
    html body.stj-template .stj-lightbox__img { max-height: 60vh; }
}

/* Era-tinted backdrop: a soft horizontal wash spanning the whole scroll
   content. Sepia at the oldest end, navy at the newest. Stays under the
   cards and rail. */
/* The era element is no longer used as a visible band , the parent
   .stj-timeline now carries the uniform navy band so it spans every
   card regardless of horizontal scroll position. Kept in the DOM for
   backwards compatibility but rendered invisible. */
html body.stj-template .stj-timeline__era { display: none; }

/* Relaxed heartbeat - runs continuously on whichever medallion the EKG
   cursor is currently aligned with (i.e. the .is-current item). The
   timing mimics a calm resting heart rate (~60 bpm) with the classic
   two-beat lub-dub pattern: a primary contraction, a quick secondary
   beat, then a longer rest. The expanding gold ring is the only thing
   that moves - the medallion itself holds its position so the rhythm
   feels institutional, not bouncy. */
@keyframes stjMedallionPulseRelaxed {
    0%   { box-shadow: 0 0 0 2px #C9A961, 0 0 0 0   rgba(201,169,97,0),   0 4px 14px rgba(27,58,92,.25); }
    8%   { box-shadow: 0 0 0 2px #C9A961, 0 0 0 8px rgba(201,169,97,.45), 0 6px 18px rgba(201,169,97,.40); } /* lub */
    18%  { box-shadow: 0 0 0 2px #C9A961, 0 0 0 4px rgba(201,169,97,.18), 0 4px 14px rgba(27,58,92,.25); }
    26%  { box-shadow: 0 0 0 2px #C9A961, 0 0 0 12px rgba(201,169,97,.35), 0 8px 22px rgba(201,169,97,.45); } /* dub */
    40%  { box-shadow: 0 0 0 2px #C9A961, 0 0 0 16px rgba(201,169,97,.08), 0 4px 14px rgba(27,58,92,.25); }
    100% { box-shadow: 0 0 0 2px #C9A961, 0 0 0 0   rgba(201,169,97,0),   0 4px 14px rgba(27,58,92,.25); } /* long rest */
}
@keyframes stjCardPulseRelaxed {
    0%   { box-shadow: 0 6px 20px rgba(27,58,92,.08), 0 0 0 0  rgba(201,169,97,0); }
    10%  { box-shadow: 0 8px 22px rgba(27,58,92,.10), 0 0 0 2px rgba(201,169,97,.28); }
    24%  { box-shadow: 0 8px 22px rgba(27,58,92,.10), 0 0 0 1px rgba(201,169,97,.14); }
    34%  { box-shadow: 0 9px 24px rgba(27,58,92,.12), 0 0 0 3px rgba(201,169,97,.22); }
    100% { box-shadow: 0 6px 20px rgba(27,58,92,.08), 0 0 0 0  rgba(201,169,97,0); }
}
html body.stj-template .stj-timeline__node {
    position: relative;
    overflow: visible;
}
/* The currently-active medallion (cursor is over it) beats continuously
   at ~60 bpm. As the cursor moves to the next medallion, this class
   moves with it, so only one medallion beats at a time. */
html body.stj-template .stj-timeline__item.is-current .stj-timeline__node {
    background: #243d63;
    color: #FFE7A6;
    animation: stjMedallionPulseRelaxed 1s cubic-bezier(.4,0,.4,1) infinite;
}
html body.stj-template .stj-timeline__item.is-current .stj-timeline__card {
    animation: stjCardPulseRelaxed 1s cubic-bezier(.4,0,.4,1) infinite;
}
@media (prefers-reduced-motion: reduce) {
    html body.stj-template .stj-timeline__cursor animateMotion { animation: none; }
    html body.stj-template .stj-timeline__rail-svg { display: none; }
}
html body.stj-template .stj-timeline__title {
    color: #1B3A5C;
    font-family: 'Frank Ruhl Libre', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}
html body.stj-template .stj-timeline__desc {
    color: #4d5a66;
    font-size: .9rem;
    line-height: 1.5;
    margin: 0;
}
html body.stj-template .stj-timeline__nav {
    position: absolute;
    top: calc(1.5rem + 32px - 18px);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #C9A961;
    background: #fff;
    color: #1B3A5C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(27, 58, 92, .12);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
html body.stj-template .stj-timeline__nav:hover {
    background: #C9A961;
    color: #1B3A5C;
    transform: translateY(-1px);
}
html body.stj-template .stj-timeline__nav--prev { left: 0; }
html body.stj-template .stj-timeline__nav--next { right: 0; }
html[dir="rtl"] body.stj-template .stj-timeline__nav--prev { left: auto; right: 0; }
html[dir="rtl"] body.stj-template .stj-timeline__nav--next { right: auto; left: 0; }
html[dir="rtl"] body.stj-template .stj-timeline__nav--prev i::before { content: '\f054'; }
html[dir="rtl"] body.stj-template .stj-timeline__nav--next i::before { content: '\f053'; }
html[dir="rtl"] body.stj-template .stj-timeline__rail-svg {
    transform: scaleX(-1);
}
@media (max-width: 640px) {
    html body.stj-template .stj-timeline__item { width: 220px; }
    html body.stj-template .stj-timeline__track { padding: 1.5rem 2.5rem 2rem; gap: 1.25rem; }
    html body.stj-template .stj-timeline__rail-svg {
        left: 2.5rem; right: 2.5rem; width: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    html body.stj-template .stj-timeline__track { scroll-behavior: auto; }
}

/* =================================================================
   Mobile drawer menu - clean slide-in panel replacing the bundled
   stacked-list mobile nav. Uses the bundled JS toggle classes so no
   extra JS needed: the hamburger button toggles .open on itself and
   on .mobile-menu-items .block-menu. We just style the result.
   ================================================================= */
@media (max-width: 1023px) {
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu {
        font-size: 0 !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #1B3A5C !important;
        color: #C9A961 !important;
        border: 0 !important;
        cursor: pointer;
        position: relative;
        z-index: 9999;
        transition: background .2s ease, transform .2s ease;
        text-indent: -9999px;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu::before,
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 2px;
        background: #C9A961;
        border-radius: 2px;
        transition: transform .25s ease;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu::before {
        transform: translate(-50%, -7px);
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu::after {
        transform: translate(-50%, 5px);
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu.open::before {
        transform: translate(-50%, 0) rotate(45deg);
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu.open::after {
        transform: translate(-50%, 0) rotate(-45deg);
    }

    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-search {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        font-size: 0 !important;
        border-radius: 50% !important;
        background: #C9A961 !important;
        border: 2px solid #C9A961 !important;
        color: #1B3A5C !important;
        position: relative;
        display: inline-flex !important;
        align-items: center; justify-content: center;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-search .fas {
        font-size: 1rem !important;
        color: #1B3A5C;
        line-height: 1;
    }
    /* Suppress the bundled SVG background-image so only the Font Awesome
       icon shows , otherwise both pseudo-element and <i> render together. */
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-search::before {
        content: none !important;
        background-image: none !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-search.open {
        background: #1B3A5C !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-search.open .fas { color: #C9A961; }

    /* Mobile search form , appears when the gold search icon is tapped */
    html body.stj-template .mobile-search-form {
        display: flex; gap: .5rem; padding: 1rem;
        background: #fff; border-bottom: 1px solid rgba(201,169,97,.3);
    }
    html body.stj-template .mobile-search-form input[type="search"] {
        flex: 1; padding: .65rem .9rem;
        border: 1px solid rgba(27,58,92,.2); border-radius: 8px;
        font-size: 1rem; color: #1B3A5C;
        background: #F4EEDF;
    }
    html body.stj-template .mobile-search-form input[type="search"]:focus {
        outline: none; border-color: #C9A961;
        box-shadow: 0 0 0 3px rgba(201,169,97,.2);
    }
    html body.stj-template .mobile-search-form button {
        width: 44px; height: 44px; border-radius: 8px;
        background: #1B3A5C; color: #C9A961;
        border: none; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
    }
    html body.stj-template .block-search.hidden { display: none; }

    /* Hide the duplicate centered logo on mobile , the small logo
       inside the navy bar is sufficient. Hide the white header row's
       centered logo (.header) and the thin universal-header strip
       since the .mobile-header-wrapper already covers navigation. */
    @media (max-width: 1023px) {
        html body.stj-template .universal-header,
        html body.stj-template .header-region > .header {
            display: none !important;
        }
    }

    html body.stj-template .region-mobile-menu .mobile-menu-items {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: min(82vw, 360px) !important;
        max-width: none !important;
        height: 100vh !important;
        background: #fff !important;
        box-shadow: -16px 0 40px rgba(15, 36, 64, .2) !important;
        transform: translateX(110%) !important;
        transition: transform .35s cubic-bezier(.2, .7, .2, 1) !important;
        z-index: 9998 !important;
        padding: 5rem 1.25rem 2rem !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    [dir="rtl"] html body.stj-template .region-mobile-menu .mobile-menu-items {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-110%) !important;
        box-shadow: 16px 0 40px rgba(15, 36, 64, .2) !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items:has(.block-menu.open),
    html body.stj-template .region-mobile-menu .mobile-menu-items:has(.block-search:not(.hidden)) {
        transform: translateX(0) !important;
    }

    html body.stj-template .region-mobile-menu::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 36, 64, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 9997;
    }
    html body.stj-template .region-mobile-menu:has(.mobile-menu-items .block-menu.open)::after,
    html body.stj-template .region-mobile-menu:has(.mobile-menu-items .block-search:not(.hidden))::after {
        opacity: 1;
        pointer-events: auto;
    }

    html body.stj-template .region-mobile-menu .mobile-menu-items .block-menu {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items nav.menu--main > ul,
    html body.stj-template .region-mobile-menu .mobile-menu-items nav.menu--utility-menu > ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: .25rem !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-0 {
        border-bottom: 1px solid #f0eadc !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: block !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-0 > a,
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-0 > .nav-button {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: .9rem 0 !important;
        color: #1B3A5C !important;
        -webkit-text-fill-color: #1B3A5C !important;
        font-weight: 700 !important;
        font-size: 1.05rem !important;
        text-decoration: none !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        font-family: inherit !important;
    }
    /* Nullify bundled empty SVG arrow on button > span (broken icon path) */
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item--expanded.has-children > .nav-button > span::after,
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-0.has-children > .nav-button > span::after {
        content: none !important;
        display: none !important;
        background-image: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item--expanded > .nav-button::after {
        content: "\f078" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: .85rem !important;
        color: #C9A961 !important;
        transition: transform .2s ease;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item--expanded.open > .nav-button::after {
        transform: rotate(180deg);
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-0 > ul.menu-level-1 {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 0 .5rem 1rem !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transition: max-height .3s ease, opacity .2s ease, padding .2s ease !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-0.open > ul.menu-level-1 {
        max-height: 500px !important;
        opacity: 1 !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-1 {
        list-style: none !important;
        display: block !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-1 > a {
        display: block !important;
        padding: .5rem 0 .5rem .85rem !important;
        color: #4d5a66 !important;
        -webkit-text-fill-color: #4d5a66 !important;
        font-size: .95rem !important;
        text-decoration: none !important;
        border-left: 2px solid transparent !important;
        transition: color .15s ease, border-color .15s ease, padding-left .15s ease !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items .menu-item-level-1 > a:hover {
        color: #C9A961 !important;
        -webkit-text-fill-color: #C9A961 !important;
        border-left-color: #C9A961 !important;
        padding-left: 1.1rem !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items nav.menu--utility-menu {
        margin-top: auto !important;
        padding-top: 1.5rem !important;
        border-top: 2px solid #C9A961 !important;
    }
    html body.stj-template .region-mobile-menu .mobile-menu-items nav.menu--utility-menu .menu-item > a {
        display: block !important;
        padding: .65rem 0 !important;
        color: #1B3A5C !important;
        -webkit-text-fill-color: #1B3A5C !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    html body.stj-template .region-mobile-menu .mobile-header-wrapper {
        background: #fff !important;
        padding: .5rem .75rem !important;
        border-bottom: 1px solid #ece4d3 !important;
        box-shadow: 0 2px 8px rgba(15, 36, 64, .04) !important;
    }
    html body.stj-template .region-mobile-menu .mobile-header-button-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .75rem !important;
    }
    html body.stj-template .region-mobile-menu .mobile-logo img {
        max-height: 50px !important;
        height: auto !important;
        width: auto !important;
    }
}

/* Lock body scroll while mobile drawer is open. */
html.stj-drawer-open body { overflow: hidden !important; }

/* Mobile drawer must outrank the hero caption overlay (z-index 9999). */
@media (max-width: 1023px) {
    html body.stj-template .region-mobile-menu .mobile-menu-items { z-index: 10001 !important; }
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-menu,
    html body.stj-template .region-mobile-menu .mobile-menu-button.mobile-search { z-index: 10002 !important; }
    html body.stj-template .region-mobile-menu::after { z-index: 10000 !important; }
    /* Hide the WhatsApp floating bubble while drawer is open so it doesn't sit on top */
    html.stj-drawer-open .stj-whatsapp-bubble,
    html.stj-drawer-open .whatsapp-float,
    html.stj-drawer-open [class*="whatsapp"] { display: none !important; }
    /* Hide the search button while the drawer overlay is open */
    html.stj-drawer-open body.stj-template .region-mobile-menu .mobile-menu-button.mobile-search { display: none !important; }
}

/* Lift the mobile header wrapper above the hero overlay (z 9999) so the
   drawer inside it isn't trapped in a lower stacking context. */
@media (max-width: 1023px) {
    html body.stj-template .region-mobile-menu .mobile-header-wrapper { z-index: 10500 !important; position: relative !important; }
}

/* When the mobile drawer is open, lift the whole canvas's z-context below it
   by collapsing the hero overlay's stacking ambitions. Simpler than chasing
   stacking contexts up the tree. */
@media (max-width: 1023px) {
    html.stj-drawer-open body.stj-template .region-hero .stj-hero-caption-fixed,
    html.stj-drawer-open body.stj-template .region-hero .stj-hero-award { z-index: 1 !important; }
}

/* Mobile submenu must be block-displayed for its accordion height transition. */
@media (max-width: 1023px) {
    html body.stj-template .region-mobile-menu .mobile-menu-items ul.menu-level-1 { display: block !important; }
}

/* ============================================================
   FORCE 4-COL LINKED-ICONS GRID - ultra-high specificity to defeat
   any prior !important rule and bundled grid-template-rows.
   ============================================================ */
html body.stj-template .region-content .field--name-field-linked-icons,
html body.stj-template .field--name-field-linked-icons.stj-linked-grid,
html body.stj-template .paragraph--type--linked-icon-container .field--name-field-linked-icons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    grid-template-areas: none !important;
}
@media (max-width: 640px) {
    html body.stj-template .region-content .field--name-field-linked-icons,
    html body.stj-template .field--name-field-linked-icons.stj-linked-grid,
    html body.stj-template .paragraph--type--linked-icon-container .field--name-field-linked-icons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 380px) {
    html body.stj-template .region-content .field--name-field-linked-icons,
    html body.stj-template .field--name-field-linked-icons.stj-linked-grid,
    html body.stj-template .paragraph--type--linked-icon-container .field--name-field-linked-icons {
        grid-template-columns: 1fr !important;
    }
}

/* Flex-children sizing for the 4-card row (defeats grid quirks from bundled CSS).
   flex: 1 1 0 lets all 4 cards stretch evenly to fill the row with the parent gap. */
html body.stj-template .stj-linked-grid > .field__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}
@media (max-width: 900px) {
    html body.stj-template .stj-linked-grid > .field__item {
        flex: 0 0 calc((100% - 1.25rem) / 2) !important;
        max-width: calc((100% - 1.25rem) / 2) !important;
    }
}
@media (max-width: 540px) {
    html body.stj-template .stj-linked-grid > .field__item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* =================================================================
   Footer newsletter band + column rebalance + tagline fix
   ================================================================= */

html body.stj-template .stj-footer-newsletter {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 32px;
    align-items: center;
    padding: 28px 32px;
    margin: 0 0 44px;
    background: linear-gradient(135deg, rgba(201, 169, 97, .10) 0%, rgba(201, 169, 97, .04) 100%);
    border: 1px solid rgba(201, 169, 97, .25);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
html body.stj-template .stj-footer-newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(201, 169, 97, .18), transparent 55%);
    pointer-events: none;
}
html body.stj-template .stj-footer-newsletter__copy { position: relative; z-index: 1; }
html body.stj-template .stj-footer-newsletter__title {
    color: #C9A961;
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: .3px;
}
html body.stj-template .stj-footer-newsletter__lede {
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    line-height: 1.5;
    margin: 0;
    max-width: 460px;
}
html body.stj-template .stj-footer-newsletter__form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
html body.stj-template .stj-footer-newsletter__input {
    flex: 1 1 240px;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .92rem;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
html body.stj-template .stj-footer-newsletter__input::placeholder {
    color: rgba(255, 255, 255, .55);
}
html body.stj-template .stj-footer-newsletter__input:focus {
    outline: none;
    border-color: #C9A961;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, .22);
}
html body.stj-template .stj-footer-newsletter__btn {
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #C9A961, #E5C07B);
    color: #0E2C4F;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, filter .2s;
}
html body.stj-template .stj-footer-newsletter__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(201, 169, 97, .32);
    filter: brightness(1.04);
}
html body.stj-template .stj-footer-newsletter__btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
html body.stj-template .stj-footer-newsletter__status {
    flex: 1 0 100%;
    margin: 4px 0 0;
    font-size: .85rem;
    line-height: 1.4;
}
html body.stj-template .stj-footer-newsletter__status.is-success { color: #8BD9A8; }
html body.stj-template .stj-footer-newsletter__status.is-error   { color: #F4B4B4; }

@media (max-width: 860px) {
    html body.stj-template .stj-footer-newsletter {
        grid-template-columns: 1fr;
        padding: 22px 20px;
        margin-bottom: 32px;
    }
}

/* Tagline: prevent the "Since 1954" orphan wrap by widening the brand
   cell allowance and letting the tagline use the full column. */
html body.stj-template .stj-footer-tagline {
    max-width: none !important;
    font-size: .82rem !important;
    white-space: normal;
}

/* Floating side rails (WhatsApp, Quick Links) - fade out when the
   footer is in view so they stop overlapping the footer columns. */
html body.stj-template.footer-in-view .qa-whatsapp,
html body.stj-template.footer-in-view #qa-toggle,
html body.stj-template.footer-in-view .qa-fab,
html body.stj-template.footer-in-view .quick-actions,
html body.stj-template.footer-in-view .quicklinks-rail {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

/* Bottom bar: prevent FAQs/Visitor-Info redundancy by trimming the
   legal strip to genuinely-legal items only (handled in blade). The
   styling here keeps the strip readable when items are fewer. */
html body.stj-template .footer__below {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    justify-content: space-between;
    align-items: center;
}

/* WhatsApp contact row: green icon so it reads as the WhatsApp brand
   channel rather than blending with the other gold icons. */
html body.stj-template .stj-footer-contact__row .stj-footer-contact__wa-icon {
    color: #25D366 !important;
    font-size: 1.05rem;
}

/* Accreditation / trust badges row */
html body.stj-template .stj-footer-trust {
    margin: 36px 0 28px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    text-align: center;
}
html body.stj-template .stj-footer-trust__title {
    color: rgba(255, 255, 255, .55);
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', Tajawal, serif !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin: 0 0 18px;
}
html body.stj-template .stj-footer-trust__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px 44px;
}
html body.stj-template .stj-footer-trust__item img {
    max-height: 56px;
    width: auto;
    opacity: .82;
    filter: brightness(0) invert(1);
    transition: opacity .2s ease, transform .2s ease;
}
html body.stj-template .stj-footer-trust__item a:hover img,
html body.stj-template .stj-footer-trust__item img:hover {
    opacity: 1;
    transform: translateY(-2px);
}
@media (max-width: 700px) {
    html body.stj-template .stj-footer-trust__list { gap: 20px 28px; }
    html body.stj-template .stj-footer-trust__item img { max-height: 44px; }
}

/* =================================================================
   Gallery image lightbox (.glb) -- Hollywood-grade viewer
   ================================================================= */

/* slide-in animations */
@keyframes glb-in-right { from { opacity:0; transform:translateX(55px); } to { opacity:1; transform:none; } }
@keyframes glb-in-left  { from { opacity:0; transform:translateX(-55px); } to { opacity:1; transform:none; } }
@keyframes glb-ss-fade     { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:scale(1); } }
@keyframes glb-ken-burns        { from { transform:scale(1);                          } to { transform:scale(1.09);                          } }
@keyframes glb-ken-burns-out    { from { transform:scale(1.09);                        } to { transform:scale(1);                            } }
@keyframes glb-pan-right        { from { transform:scale(1.07) translateX(-2.5%);      } to { transform:scale(1.07) translateX(2.5%);        } }
@keyframes glb-pan-left         { from { transform:scale(1.07) translateX(2.5%);       } to { transform:scale(1.07) translateX(-2.5%);       } }
@keyframes glb-pan-up           { from { transform:scale(1.07) translateY(2%);         } to { transform:scale(1.07) translateY(-2%);         } }
@keyframes glb-pan-down         { from { transform:scale(1.07) translateY(-2%);        } to { transform:scale(1.07) translateY(2%);          } }
@keyframes glb-thumb-prog { to { width: 100%; } }

.glb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #080c14;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.glb.glb--open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Album progress line ── */
.glb__progress-bar {
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, #C9A961, #e8c97a);
    z-index: 10;
    transition: width .3s ease;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(201,169,97,.6);
}

/* ── Top bar ── */
.glb__topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2;
}
.glb__counter {
    color: rgba(255,255,255,.8);
    font-size: .88rem;
    letter-spacing: 1.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.glb__toolbar {
    display: flex;
    align-items: center;
    gap: .15rem;
}
.glb__sep { width: 1px; height: 1.2rem; background: rgba(255,255,255,.15); margin: 0 .25rem; }
.glb__tool {
    background: none;
    border: none;
    color: rgba(255,255,255,.65);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    position: relative;
}
.glb__tool:hover { background: rgba(255,255,255,.11); color: #fff; }
.glb__tool--active { color: #C9A961; }
.glb__tool--close:hover { background: rgba(220,50,50,.5); color: #fff; }

/* share dropdown */
.glb__share-menu {
    position: absolute;
    top: 3rem;
    right: 3.5rem;
    background: #1a2030;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: .4rem;
    display: none;
    flex-direction: column;
    gap: .2rem;
    z-index: 20;
    min-width: 170px;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.glb__share-menu.glb__share-menu--open { display: flex; }
.glb__share-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem;
    border-radius: 5px;
    color: rgba(255,255,255,.85);
    font-size: .82rem;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: none;
    transition: background .15s;
}
.glb__share-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.glb__share-item svg { flex-shrink: 0; }
.glb__copy-tip {
    font-size: .72rem;
    color: #C9A961;
    padding: .2rem .85rem .35rem;
    display: none;
}

/* ── Main stage ── */
.glb__stage {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}
/* blurred color backdrop -- the "Hollywood" touch */
.glb__backdrop {
    position: absolute;
    inset: -10%;
    background-size: cover;
    background-position: center;
    filter: blur(45px) brightness(0.22) saturate(1.6);
    pointer-events: none;
    transition: background-image .4s ease;
    will-change: filter;
}
.glb__img-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92%;
    max-height: 100%;
    transform-origin: center center;
    cursor: zoom-in;
}
.glb__img-wrap.glb__img-wrap--zoomed { cursor: move; }
.glb__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 12px 60px rgba(0,0,0,.75);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
/* slide animation driven by direction class on .glb__stage */
.glb--nav-next .glb__img { animation: glb-in-right .32s cubic-bezier(.25,.46,.45,.94) both; }
.glb--nav-prev .glb__img { animation: glb-in-left  .32s cubic-bezier(.25,.46,.45,.94) both; }
/* PowerPoint-style cross-fade + Ken Burns zoom for slideshow mode */
.glb__img--ss-enter   { animation: glb-ss-fade   .65s cubic-bezier(.22,1,.36,1) both; }
.glb__img--ss-playing { animation: glb-ken-burns 4s   ease-in-out forwards; }

/* ── Grid-page slideshow launch button ── */
.gal-slideshow-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem 1.05rem;
    background: #C9A961;
    color: #1B3A5C;
    border: none;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .18s, box-shadow .18s;
    flex-shrink: 0;
    letter-spacing: .3px;
}
.gal-slideshow-btn:hover { background: #b8953a; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,169,97,.3); }
.gal-slideshow-btn.is-playing { background: rgba(255,255,255,.12); color: #C9A961; border: 1px solid rgba(201,169,97,.5); }

/* nav arrows */
.glb__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, border-color .18s, transform .18s;
    z-index: 2;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.glb__btn:hover { background: rgba(201,169,97,.6); border-color: rgba(201,169,97,.8); transform: translateY(-50%) scale(1.08); }
.glb__btn--prev { left: 1.25rem; }
.glb__btn--next { right: 1.25rem; }

/* caption */
.glb__caption {
    flex: 0 0 auto;
    text-align: center;
    color: rgba(255,255,255,.55);
    font-size: .8rem;
    padding: .3rem 1rem;
    min-height: 1.4rem;
    background: rgba(0,0,0,.35);
    letter-spacing: .3px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ── Thumbnail filmstrip ── */
.glb__thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    padding: 6px 8px 8px;
    overflow-x: auto;
    background: rgba(0,0,0,.65);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.glb__thumbs::-webkit-scrollbar { height: 4px; }
.glb__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 2px; }
.glb__thumb {
    flex: 0 0 auto;
    position: relative;
    width: 74px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .45;
    transition: opacity .2s, border-color .2s, transform .2s;
    padding: 0;
    background: #111;
}
.glb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.glb__thumb:hover { opacity: .8; transform: translateY(-2px); }
.glb__thumb--active { border-color: #C9A961; opacity: 1; transform: translateY(-2px); }
/* slideshow progress fill on active thumb */
.glb__thumb-prog {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 0;
    background: #C9A961;
    pointer-events: none;
}

/* click zones */
.glb__zone-prev,
.glb__zone-next {
    position: absolute;
    top: 0; bottom: 0;
    width: 35%;
    cursor: pointer;
    z-index: 0;
    pointer-events: none;
}
.glb__zone-prev { left: 0; }
.glb__zone-next { right: 0; }
.glb.glb--open .glb__zone-prev,
.glb.glb--open .glb__zone-next,
.glb.glb--open .glb__btn { pointer-events: auto; }

@media (max-width: 640px) {
    .glb__btn { display: none; }
    .glb__zone-prev, .glb__zone-next { width: 45%; }
    .glb__thumb { width: 58px; height: 44px; }
    .glb__tool { width: 1.9rem; height: 1.9rem; }
    .glb__sep { display: none; }
}

/* =================================================================
   Gallery -- scroll progress bar (gold line at very top of page)
   ================================================================= */

.gal-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #C9A961, #e8c97a, #C9A961);
    z-index: 9999;
    transition: width .1s linear;
    pointer-events: none;
    border-radius: 0 99px 99px 0;
}

/* =================================================================
   Gallery -- warm hero section
   ================================================================= */

.gal-hero {
    position: relative;
    background: linear-gradient(135deg, #0b1a2e 0%, #1B3A5C 55%, #0b1a2e 100%);
    border-radius: 16px;
    padding: 3.5rem 2rem;
    text-align: center;
    overflow: hidden;
    margin-bottom: .5rem;
}

/* Pulsing warm golden core */
.gal-hero__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: 85%;
    background: radial-gradient(ellipse, rgba(201,169,97,.22) 0%, transparent 68%);
    animation: gal-hero-pulse 5s ease-in-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes gal-hero-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .7; }
    50%       { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

.gal-hero__content {
    position: relative;
    z-index: 1;
    max-width: 580px;
    margin: 0 auto;
}

.gal-hero__icon {
    color: #C9A961;
    margin-bottom: 1rem;
    animation: gal-heartbeat 2.4s ease-in-out infinite;
    display: inline-block;
    will-change: transform;
}

@keyframes gal-heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.18); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.12); }
    56%       { transform: scale(1); }
}

.gal-hero__heading {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 .85rem;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.gal-hero__body {
    color: rgba(255,255,255,.72);
    font-size: .98rem;
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 600px) {
    .gal-hero { padding: 2.5rem 1.25rem; }
    .gal-hero__heading { font-size: 1.3rem; }
}

/* =================================================================
   Gallery -- toolbar (tabs + count in one line)
   ================================================================= */

.gal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .25rem;
}

/* =================================================================
   Gallery -- filter tabs
   ================================================================= */

.gal-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.gal-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1.15rem;
    border-radius: 99px;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    color: #1B3A5C;
    background: #fff;
    border: 1.5px solid #c8d4e0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.gal-tab:hover {
    background: #eef3f8;
    border-color: #1B3A5C;
    color: #1B3A5C;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(27,58,92,.12);
}

.gal-tab--active {
    background: #1B3A5C;
    color: #fff;
    border-color: #1B3A5C;
    box-shadow: 0 3px 10px rgba(27,58,92,.25);
}

.gal-tab--active:hover {
    background: #153050;
    color: #fff;
    border-color: #153050;
}

/* count strip -- sits at the right end of the toolbar */
.gal-count-strip {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #8a9aaa;
    font-size: .82rem;
    flex-shrink: 0;
}

/* =================================================================
   Gallery album grid -- Hollywood makeover
   ================================================================= */

@keyframes gal-card-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gallery-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

/* Featured first card spans 2 columns on wider screens */
@media (min-width: 620px) {
    .gallery-albums-grid .gallery-album-card:first-child {
        grid-column: span 2;
    }
    .gallery-albums-grid .gallery-album-card:first-child .gallery-album-card__title {
        font-size: 1.35rem;
    }
}

/* Stacked-photo pseudo-elements */
.gallery-album-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: visible;
    aspect-ratio: 4 / 3;
    opacity: 0;
}

.gallery-album-card.gal-visible {
    animation: gal-card-in .45s cubic-bezier(.25,.46,.45,.94) both;
    opacity: 1;
    will-change: transform, opacity;
}

.gallery-album-card::before,
.gallery-album-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: -1;
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}

.gallery-album-card::before {
    background: rgba(27,58,92,.18);
    transform: rotate(-2.2deg) translateY(5px) scale(.97);
}

.gallery-album-card::after {
    background: rgba(201,169,97,.22);
    transform: rotate(1.8deg) translateY(3px) scale(.98);
}

.gallery-album-card:hover::before {
    transform: rotate(-3.5deg) translateY(9px) scale(.96);
}

.gallery-album-card:hover::after {
    transform: rotate(3deg) translateY(6px) scale(.97);
}

/* Inner frame that clips the image */
.gallery-album-card__thumb {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0e1520;
}

.gallery-album-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .65s cubic-bezier(.25,.46,.45,.94), filter .4s ease;
    filter: brightness(.92);
}

.gallery-album-card:hover .gallery-album-card__thumb img {
    transform: scale(1.1);
    filter: brightness(1);
}

/* Dark gradient overlay */
.gallery-album-card__overlay {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(
        to top,
        rgba(6,10,18,.88) 0%,
        rgba(6,10,18,.38) 45%,
        transparent 70%
    );
    transition: background .35s ease;
    z-index: 1;
}

.gallery-album-card:hover .gallery-album-card__overlay {
    background: linear-gradient(
        to top,
        rgba(6,10,18,.92) 0%,
        rgba(6,10,18,.55) 55%,
        rgba(6,10,18,.1) 80%
    );
}

/* Text body pinned to bottom */
.gallery-album-card__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.1rem 1.1rem .95rem;
    z-index: 2;
}

.gallery-album-card__title {
    margin: 0 0 .28rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.gallery-album-card__count {
    margin: 0 0 0;
    font-size: .78rem;
    color: rgba(255,255,255,.68);
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* "Browse →" CTA that fades in on hover */
.gallery-album-card__cta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .55rem;
    color: #C9A961;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .4px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

.gallery-album-card:hover .gallery-album-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* Type badge (video icon) */
.gallery-album-card__badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: rgba(27,58,92,.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: .3rem .65rem;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.15);
}

/* Count pill -- top left */
.gallery-album-card__count-badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: rgba(0,0,0,.52);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: rgba(255,255,255,.9);
    padding: .28rem .65rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Warm golden glow ring on hover */
.gallery-album-card__glow {
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(201,169,97,0), rgba(201,169,97,0)) border-box;
    z-index: 0;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(201,169,97,0);
}

.gallery-album-card:hover .gallery-album-card__glow {
    opacity: 1;
    box-shadow: 0 0 28px 4px rgba(201,169,97,.28), 0 8px 24px rgba(0,0,0,.22);
}

@media (max-width: 619px) {
    .gallery-albums-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .85rem;
    }
    .gallery-album-card__title { font-size: .88rem; }
    .gallery-album-card__cta   { display: none; }
}

/* =================================================================
   Gallery -- warm closing care strip
   ================================================================= */

.gal-care-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #0e1a2c 0%, #1B3A5C 50%, #0e1a2c 100%);
    border-radius: 14px;
    text-align: center;
}

.gal-care-strip__pulse {
    color: #C9A961;
    flex-shrink: 0;
    animation: gal-heartbeat 2.4s ease-in-out infinite;
    will-change: transform;
}

.gal-care-strip__text {
    color: rgba(255,255,255,.75);
    font-size: .93rem;
    line-height: 1.6;
    margin: 0;
}

.gal-care-strip__text span {
    display: block;
    color: rgba(255,255,255,.48);
    font-size: .82rem;
    margin-top: .2rem;
}

@media (max-width: 500px) {
    .gal-care-strip { flex-direction: column; gap: .65rem; padding: 1.4rem 1.25rem; }
}

/* =================================================================
   Gallery album show -- masonry photo wall
   ================================================================= */

.gal-show-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #888;
    font-size: .85rem;
}

.gal-show-meta__count {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* True CSS columns masonry -- images display at natural aspect ratio */
.gallery-masonry {
    columns: 4 180px;
    column-gap: 6px;
}

.gallery-item {
    break-inside: avoid;
    margin: 0 0 6px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #e8edf2;
}

.gallery-item__link {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.gallery-item__link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .4s ease;
    filter: brightness(.96);
}

.gallery-item__link:hover img {
    transform: scale(1.07);
    filter: brightness(1.04);
}

/* Dark overlay revealed on hover */
.gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8,12,20,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
}

.gallery-item__link:hover .gallery-item__overlay {
    opacity: 1;
}

/* Expand icon */
.gallery-item__expand-icon {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    transform: scale(.8);
    transition: transform .25s ease;
}

.gallery-item__link:hover .gallery-item__expand-icon {
    transform: scale(1);
}

/* Video play button -- absolute wrapper centers the circle over the image */
.gallery-item__play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.gallery-item__play-icon__circle {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(27,58,92,.82);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    transform: scale(.85);
    transition: transform .25s ease, background .2s;
}

.gallery-item__link:hover .gallery-item__play-icon__circle {
    transform: scale(1);
    background: rgba(27,58,92,.95);
}

/* Optional caption */
.gallery-item__caption {
    padding: .5rem .65rem;
    font-size: .78rem;
    color: #555;
    line-height: 1.4;
    background: #f8f9fa;
}

@media (max-width: 600px) {
    .gallery-masonry { columns: 2 140px; column-gap: 4px; }
    .gallery-item    { margin-bottom: 4px; border-radius: 4px; }
}

/* Back to Gallery / Back to Top footer nav */
.gal-show-footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.25rem 0 .5rem;
    flex-wrap: wrap;
}

.gal-show-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.25rem;
    border-radius: 99px;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    border: 1.5px solid;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.gal-show-nav-btn--back {
    color: #1B3A5C;
    background: #fff;
    border-color: #c8d4e0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.gal-show-nav-btn--back:hover {
    background: #eef3f8;
    border-color: #1B3A5C;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(27,58,92,.12);
}

.gal-show-nav-btn--top {
    color: #C9A961;
    background: #fff;
    border-color: #C9A961;
    box-shadow: 0 1px 4px rgba(201,169,97,.12);
}

.gal-show-nav-btn--top:hover {
    background: #C9A961;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(201,169,97,.3);
}

/* =================================================================
   Mobile language toggle - gold pill in the mobile header bar
   ================================================================= */
@media (max-width: 1023px) {
    html body.stj-template .stj-mobile-lang-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: .3rem;
        padding: .35rem .65rem;
        background: transparent;
        border: 1.5px solid #C9A961;
        border-radius: 20px;
        color: #1B3A5C;
        font-size: .8rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        transition: background .2s ease, color .2s ease;
        flex-shrink: 0;
    }
    html body.stj-template .stj-mobile-lang-toggle i {
        font-size: .8rem;
        color: #C9A961;
    }
    html body.stj-template .stj-mobile-lang-toggle:hover {
        background: #C9A961;
        color: #fff;
    }
    html body.stj-template .stj-mobile-lang-toggle:hover i {
        color: #fff;
    }
}
@media (min-width: 1024px) {
    html body.stj-template .stj-mobile-lang-toggle {
        display: none !important;
    }
}

/* =================================================================
   Mobile hero - single cohesive image + caption unit.
   On mobile we reuse .stj-hero-caption-fixed but reposition it from
   its desktop top-left card into a full-width gradient strip pinned
   to the bottom of .region-hero, so it overlays the image bottom.
   We also clear the gold background from the .mobile wrapper so no
   colored strip bleeds below the image.
   ================================================================= */
@media (max-width: 1023px) {
    /* Clip the entire hero to its content height.
       The stj-motion scale(1.18) + blur creates GPU compositing layers that escape
       overflow:hidden on individual carousel children. Clamping the outermost region
       is the only reliable containment. The base CSS sets overflow:visible on this
       element so it can bleed the wave below; on mobile we don't need the bleed and
       this is the only way to prevent the second image from showing below the hero. */
    html body.stj-template .region.region-hero {
        overflow: hidden !important;
    }

    /* Cap the mobile image container so the entire hero fits in one viewport.
       Without this, the aspect-ratio (or slick height computation) can make
       the media-container taller than the screen, pushing the caption overlay
       and controls below the fold. clamp() keeps it proportional across all
       phone sizes without hard-coding a pixel value. */
    html body.stj-template .region-hero .content-carousel-card-wrapper.mobile .media-container {
        height: clamp(180px, 56vw, 320px) !important;
        aspect-ratio: auto !important;
    }

    /* Kill all hero image animations on mobile.
       The stjKenBurns scale animation + will-change:transform promotes images to
       GPU compositing layers that escape overflow:hidden clipping, causing the
       zoomed image to bleed below the hero frame. Stop the animation entirely --
       the slide cross-fade (opacity) is handled at the .slick-slide level by
       Slick, not by these image rules, so transitions still work. */
    html body.stj-template .region-hero .slick-slide img,
    html body.stj-template .region-hero .slick-slide
        .content-carousel-card-wrapper.mobile .media-container img {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }

    /* Remove gold wrapper background -- image covers the full mobile slide */
    html body.stj-template .region-hero .slick-track .slick-slide
        .content-carousel-card-wrapper.mobile {
        background: transparent !important;
    }

    /* Reposition the fixed caption from its desktop top-left card into a
       full-width gradient pinned to the bottom of the hero image area. */
    html body.stj-template .region-hero .stj-hero-caption-fixed {
        position: absolute !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(to top, rgba(10, 25, 47, .93) 0%, rgba(15, 36, 64, .65) 55%, transparent 100%) !important;
        padding: 3.5rem 1.25rem 1rem !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        clip-path: none !important;
        direction: inherit !important;
        z-index: 20 !important;
    }
    html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__title {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
        color: #fff !important;
        margin: 0 0 .35rem !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
    }
    html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__body {
        font-size: .78rem !important;
        line-height: 1.4 !important;
        color: rgba(255,255,255,.88) !important;
        margin: 0 0 .6rem !important;
        opacity: 1 !important;
    }
    html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__btn {
        display: inline-block !important;
        padding: .35rem .9rem !important;
        border: 1.5px solid #C9A961 !important;
        border-radius: 999px !important;
        color: #C9A961 !important;
        font-size: .75rem !important;
        font-weight: 600 !important;
        background: transparent !important;
        text-decoration: none !important;
    }
    /* The accent bar is part of the desktop card style -- hide on mobile */
    html body.stj-template .region-hero .stj-hero-caption-fixed .stj-hero-caption__accent {
        display: none !important;
    }
}

/* =================================================================
   Custom icon: kidney  (FA Pro doesn't ship this in the free CDN)
   Used as a CSS mask so currentColor is inherited -- the icon looks
   identical to Font Awesome icons in every context (gold circles,
   admin picker, etc.).  Store "stj-icon-kidney" in the icon field.
   ================================================================= */
.stj-icon-kidney {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M50 5 C70 3 90 18 90 40 C90 62 70 77 50 75 C35 73 20 65 15 55 C12 50 14 44 18 42 C22 38 28 40 28 46 C28 52 22 54 18 50 C14 46 12 40 15 32 C20 18 35 7 50 5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M50 5 C70 3 90 18 90 40 C90 62 70 77 50 75 C35 73 20 65 15 55 C12 50 14 44 18 42 C22 38 28 40 28 46 C28 52 22 54 18 50 C14 46 12 40 15 32 C20 18 35 7 50 5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: -0.125em;
}
.stj-icon-kidney::before,
.stj-icon-kidney::after { content: none !important; display: none !important; }

/* =================================================================
   Gold bullet list -- authored via TinyMCE "Gold Bullets" button
   ================================================================= */
ul.stj-gold-bullets {
    list-style: none;
    padding-left: 1.4em;
    margin: 0 0 1rem;
}
ul.stj-gold-bullets li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: .35em;
}
ul.stj-gold-bullets li::before {
    content: "\25CF";
    color: #C9A961;
    position: absolute;
    left: 0;
    font-size: .7em;
    line-height: 2;
}