.elementor-kit-17{--e-global-color-primary:#004A98;--e-global-color-secondary:#062E56;--e-global-color-text:#2A2620;--e-global-color-accent:#AB8900;--e-global-color-c9d7fce:#004A98;--e-global-color-a751710:#062E56;--e-global-color-79febb9:#6E97C4;--e-global-color-5d98d99:#E7EEF6;--e-global-color-3b17eff:#AB8900;--e-global-color-ea15eb4:#E6CE86;--e-global-color-7034f28:#FFFFFF;--e-global-color-d6eba6a:#F5F1E8;--e-global-color-e20feb5:#E9E6DD;--e-global-color-ecca3ce:#F5F1E8;--e-global-color-7634415:#2A2620;--e-global-color-775ac2c:#5E5950;--e-global-color-07a7a00:#8A8479;--e-global-color-e77be08:#FFFFFF;--e-global-color-f6a3728:#F5F1E8;--e-global-color-5dd3f1a:#AEC0D6;--e-global-color-b3acd09:#7E6500;--e-global-color-e24faf1:#004A98;--e-global-color-3d57126:#C9A93D;--e-global-color-77de6cf:#BD9E39;--e-global-color-d4b6499:#F6EDD0;--e-global-color-d5c6ee3:#B9CCE4;--e-global-color-b58b4bb:#006E43;--e-global-color-41e4ffb:#DCEDE4;--e-global-color-cde4875:#044F31;--e-global-color-7f2a6c3:#A7D0BB;--e-global-color-84b7dc3:#4F9E78;--e-global-color-9495ffd:#DDD8CC;--e-global-color-1105760:#C9C2B2;--e-global-color-d7b524f:#073A6B;--e-global-typography-primary-font-family:"Merriweather";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:none;--e-global-typography-secondary-font-family:"Merriweather";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:none;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:none;--e-global-typography-140f928a-font-family:"Merriweather";--e-global-typography-140f928a-font-size:clamp(2.5rem, calc(2.5vw + 1.75rem), 3.625rem);--e-global-typography-140f928a-font-weight:700;--e-global-typography-140f928a-text-transform:none;--e-global-typography-140f928a-line-height:1.15;--e-global-typography-fe703ec1-font-family:"Merriweather";--e-global-typography-fe703ec1-font-size:clamp(2.25rem, calc(1.667vw + 1.75rem), 2.75rem);--e-global-typography-fe703ec1-font-weight:700;--e-global-typography-fe703ec1-text-transform:none;--e-global-typography-fe703ec1-line-height:1.2;--e-global-typography-871cee50-font-family:"Merriweather";--e-global-typography-871cee50-font-size:clamp(2rem, calc(1.25vw + 1.625rem), 2.625rem);--e-global-typography-871cee50-font-weight:700;--e-global-typography-871cee50-text-transform:none;--e-global-typography-871cee50-line-height:1.18;--e-global-typography-28974bbc-font-family:"Merriweather";--e-global-typography-28974bbc-font-size:clamp(1.75rem, calc(0.833vw + 1.5rem), 2.25rem);--e-global-typography-28974bbc-font-weight:700;--e-global-typography-28974bbc-text-transform:none;--e-global-typography-28974bbc-line-height:1.25;--e-global-typography-5b935e52-font-family:"Merriweather";--e-global-typography-5b935e52-font-size:1.375rem;--e-global-typography-5b935e52-font-weight:700;--e-global-typography-5b935e52-text-transform:none;--e-global-typography-5b935e52-line-height:1.3;--e-global-typography-5b935e52-letter-spacing:0em;--e-global-typography-c78f4e7c-font-family:"Montserrat";--e-global-typography-c78f4e7c-font-size:12px;--e-global-typography-c78f4e7c-font-weight:600;--e-global-typography-c78f4e7c-text-transform:uppercase;--e-global-typography-c78f4e7c-line-height:1.4;--e-global-typography-c78f4e7c-letter-spacing:0.14em;--e-global-typography-32e05c6c-font-family:"Montserrat";--e-global-typography-32e05c6c-font-size:12px;--e-global-typography-32e05c6c-font-weight:600;--e-global-typography-32e05c6c-text-transform:uppercase;--e-global-typography-32e05c6c-line-height:1.4;--e-global-typography-32e05c6c-letter-spacing:0.14em;--e-global-typography-41cd4fd5-font-family:"Montserrat";--e-global-typography-41cd4fd5-font-size:12px;--e-global-typography-41cd4fd5-font-weight:600;--e-global-typography-41cd4fd5-text-transform:uppercase;--e-global-typography-41cd4fd5-line-height:1.4;--e-global-typography-41cd4fd5-letter-spacing:0.14em;--e-global-typography-d6f780b2-font-family:"Montserrat";--e-global-typography-d6f780b2-font-size:18px;--e-global-typography-d6f780b2-font-weight:400;--e-global-typography-d6f780b2-text-transform:none;--e-global-typography-d6f780b2-line-height:1.6;--e-global-typography-50e5e013-font-family:"Montserrat";--e-global-typography-50e5e013-font-size:17px;--e-global-typography-50e5e013-font-weight:400;--e-global-typography-50e5e013-text-transform:none;--e-global-typography-50e5e013-line-height:1.7;--e-global-typography-d6c2c0f2-font-family:"Montserrat";--e-global-typography-d6c2c0f2-font-size:16px;--e-global-typography-d6c2c0f2-font-weight:400;--e-global-typography-d6c2c0f2-text-transform:none;--e-global-typography-d6c2c0f2-line-height:1.7;--e-global-typography-33351576-font-family:"Montserrat";--e-global-typography-33351576-font-size:15px;--e-global-typography-33351576-font-weight:400;--e-global-typography-33351576-text-transform:none;--e-global-typography-33351576-line-height:1.6;--e-global-typography-a49f954a-font-family:"Merriweather";--e-global-typography-a49f954a-font-size:clamp(1.375rem, calc(0.833vw + 1.125rem), 1.5rem);--e-global-typography-a49f954a-font-weight:400;--e-global-typography-a49f954a-text-transform:none;--e-global-typography-a49f954a-font-style:italic;--e-global-typography-a49f954a-line-height:1.55;--e-global-typography-9d8a32be-font-family:"Merriweather";--e-global-typography-9d8a32be-font-size:clamp(1.375rem, calc(0.833vw + 1.125rem), 1.5rem);--e-global-typography-9d8a32be-font-weight:400;--e-global-typography-9d8a32be-text-transform:none;--e-global-typography-9d8a32be-font-style:italic;--e-global-typography-9d8a32be-line-height:1.55;--e-global-typography-9fad0952-font-family:"Montserrat";--e-global-typography-9fad0952-font-size:16px;--e-global-typography-9fad0952-font-weight:600;--e-global-typography-9fad0952-text-transform:none;--e-global-typography-9fad0952-line-height:1.2;--e-global-typography-9fad0952-letter-spacing:0em;background-color:var( --e-global-color-ecca3ce );color:var( --e-global-color-7634415 );font-family:"Merriweather", Sans-serif;font-size:18px;font-weight:400;line-height:1.8;}.elementor-kit-17 button,.elementor-kit-17 input[type="button"],.elementor-kit-17 input[type="submit"],.elementor-kit-17 .elementor-button{background-color:var( --e-global-color-3d57126 );font-family:var( --e-global-typography-9fad0952-font-family ), Sans-serif;font-size:var( --e-global-typography-9fad0952-font-size );font-weight:var( --e-global-typography-9fad0952-font-weight );text-transform:var( --e-global-typography-9fad0952-text-transform );line-height:var( --e-global-typography-9fad0952-line-height );letter-spacing:var( --e-global-typography-9fad0952-letter-spacing );word-spacing:var( --e-global-typography-9fad0952-word-spacing );color:var( --e-global-color-7634415 );border-radius:8px 8px 8px 8px;padding:15px 30px 15px 30px;}.elementor-kit-17 button:hover,.elementor-kit-17 button:focus,.elementor-kit-17 input[type="button"]:hover,.elementor-kit-17 input[type="button"]:focus,.elementor-kit-17 input[type="submit"]:hover,.elementor-kit-17 input[type="submit"]:focus,.elementor-kit-17 .elementor-button:hover,.elementor-kit-17 .elementor-button:focus{background-color:var( --e-global-color-77de6cf );color:var( --e-global-color-7634415 );}.elementor-kit-17 e-page-transition{background-color:#FFBC7D;}.elementor-kit-17 a{color:var( --e-global-color-e24faf1 );font-weight:600;text-decoration:underline;}.elementor-kit-17 a:hover{color:var( --e-global-color-a751710 );text-decoration:underline;}.elementor-kit-17 h1{font-family:"Merriweather", Sans-serif;font-weight:700;}.elementor-kit-17 h2{font-family:"Merriweather", Sans-serif;font-weight:600;}.elementor-kit-17 h3{font-family:"Merriweather", Sans-serif;font-weight:600;}.elementor-kit-17 h4{font-family:"Merriweather", Sans-serif;font-weight:600;}.elementor-kit-17 h5{font-family:"Merriweather", Sans-serif;font-weight:600;}.elementor-kit-17 h6{font-family:"Merriweather", Sans-serif;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-17{font-size:15px;}.elementor-kit-17 button,.elementor-kit-17 input[type="button"],.elementor-kit-17 input[type="submit"],.elementor-kit-17 .elementor-button{font-size:var( --e-global-typography-9fad0952-font-size );line-height:var( --e-global-typography-9fad0952-line-height );letter-spacing:var( --e-global-typography-9fad0952-letter-spacing );word-spacing:var( --e-global-typography-9fad0952-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-17{font-size:15px;}.elementor-kit-17 button,.elementor-kit-17 input[type="button"],.elementor-kit-17 input[type="submit"],.elementor-kit-17 .elementor-button{font-size:var( --e-global-typography-9fad0952-font-size );line-height:var( --e-global-typography-9fad0952-line-height );letter-spacing:var( --e-global-typography-9fad0952-letter-spacing );word-spacing:var( --e-global-typography-9fad0952-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --brand-navy:#004A98; --brand-navy-deep:#062E56; --brand-blue:#6E97C4; --brand-blue-tint:#E7EEF6; --brand-yellow:#AB8900; --brand-yellow-soft:#E6CE86; --surface-white:#FFFFFF; --surface-page:#F5F1E8; --surface-grey:#E9E6DD; --surface-grey-warm:#F5F1E8; --text-ink:#2A2620; --text-ink-soft:#5E5950; --text-muted:#8A8479; --text-inverse:#FFFFFF; --text-inverse-soft:#F5F1E8; --text-inverse-muted:#AEC0D6; --font-display:Merriweather; --font-body:Montserrat; --font-script:Merriweather; --font-mono:Montserrat; --text-2xs:0.625rem; --text-xs:0.75rem; --text-s:0.875rem; --text-m:1rem; --text-l:1.125rem; --text-xl:1.1875rem; --text-2xl:1.5rem; --heading-s:1.625rem; --heading-m:clamp(1.75rem, calc(1.875vw + 1.375rem), 2.875rem); --heading-l:clamp(2.25rem, calc(2.917vw + 1.667rem), 4rem); --heading-xl:clamp(3rem, calc(2.5vw + 2.5rem), 4.5rem); --heading-hero:clamp(3rem, calc(4.375vw + 2.125rem), 5.625rem); --script-m:clamp(2.25rem, calc(2.083vw + 1.833rem), 3.5rem); --script-l:clamp(3rem, calc(2.708vw + 2.458rem), 4.625rem); --script-xl:clamp(3.75rem, calc(6.25vw + 2.5rem), 7.5rem); --space-3xs:0.25rem; --space-2xs:0.5rem; --space-xs:0.75rem; --space-s:1rem; --space-m:1.5rem; --space-l:2rem; --space-xl:3rem; --space-2xl:4rem; --space-3xl:5.5rem; --space-4xl:7rem; --width-prose:50rem; --width-narrow:47.5rem; --width-content:75rem; --width-wide:90rem; --brand-gold-hover:#7E6500; --heading-xs:1.25rem; --link-accent:#004A98; --gold-button:#C9A93D; --gold-button-hover:#BD9E39; --gold-tint:#F6EDD0; --blue-soft:#B9CCE4; --green:#006E43; --green-tint:#DCEDE4; --green-deep:#044F31; --green-soft:#A7D0BB; --green-mid:#4F9E78; --border-hairline:#DDD8CC; --border-strong:#C9C2B2; --navy-mid:#073A6B; }
/* Start custom CSS *//* sanctum-ported */
/* ============================================================ */
/* SPM PARISH HEADER - Custom CSS (Site Settings > Custom CSS)   */
/* Central: stored in the active Kit, loads site-wide.          */
/* Each rule documents WHY code is needed and how fragile it is. */
/* Goal: keep this block as small as possible.                  */
/* ============================================================ */

/* [1] MOBILE NAV ROW - keep logo + hamburger on ONE row on phones. */
/*     Why CSS: the off-canvas trigger renders full-width on mobile  */
/*     and drops the logo onto its own line; this forces a nowrap    */
/*     row with the trigger right-aligned.                           */
/*     Fragility LOW: stable .elementor-element-<id> + standard flex. */
@media(max-width:767px){.elementor-224 .elementor-element-6c800137{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;}.elementor-224 .elementor-element-ocbtn01{width:auto!important;flex:0 0 auto!important;}.elementor-224 .elementor-element-548bc031{flex:0 0 auto!important;max-width:55%!important;}}

/* [2] NAV SEARCH ICON - force the toggle icon white.              */
/*     Why CSS: EP free Search Form has NO toggle colour control,   */
/*     and the icon is an inline SVG (needs fill, not just color).  */
/*     Fragility MEDIUM: reaches EP class elementor-search-form__toggle. */
/*     Becomes native in the V4 rebuild.                           */
.elementor-224 .elementor-element-utSearch .elementor-search-form__toggle,.elementor-224 .elementor-element-utSearch .elementor-search-form__toggle i,.elementor-224 .elementor-element-utSearch .elementor-search-form__toggle svg{color:#fff!important;fill:#fff!important;}

/* [3] OFF-CANVAS SEARCH FIELD - readable dark text on light field. */
/*     Why CSS: EP free Search Form (minimal) has NO text colour    */
/*     control.                                                     */
/*     Fragility LOW: input tag .elementor-kit-17 inside a stable id wrapper. */
.elementor-element-ocSearch input,.elementor-element-ocSearch .elementor-search-form__input{color:var(--text-ink)!important;}
.elementor-element-ocSearch input::placeholder{color:#7a7f87!important;}

/* [5] UTILITY-BAR TEXT SIZE - slightly smaller secondary text. Fragility LOW: scoped to utility-bar container. */
.elementor-224 .elementor-element-693720cb .elementor-icon-list-text,.elementor-224 .elementor-element-693720cb .elementor-item{font-size:13px!important;}

/* [6] UTILITY-BAR no-wrap: keep School + Donate on one line on resize. */
/*     Why CSS: HFE nav menu exposes no flex-wrap control. Fragility LOW. */
.elementor-224 .elementor-element-693720cb,.elementor-224 .elementor-element-utLoginMnu .hfe-nav-menu{flex-wrap:nowrap!important;}

/* [7] Hero heading accent: persistent gold italic on Sacred Place. */
.s-hero h1 span{color:#D2AC58;}

/* [8] Hero heading mobile/tablet center. */
@media (max-width:1024px){[data-interaction-id="1a19f60a"]{text-align:center!important;max-width:100%!important;}}
/* SPM header-logo fix: Elementor conditional asset loading skips widget-image.min.css on pages without a content image widget, so the header logo link/img fall back to inline+baseline and add a descender gap (~6.6px taller header). Replicate the missing widget-image.min.css declarations, scoped to the header, for consistent header height on all pages. */
#masthead .elementor-widget-image a{display:inline-block}
#masthead .elementor-widget-image img{display:inline-block;vertical-align:middle}

/* saint-pio final overrides */
.boxed-content{max-width:90rem;}

.elementor-element-c4e0322 .menu-item a.hfe-menu-item{color:#FFFFFF!important;}
.elementor-element-c4e0322 .menu-item a.hfe-menu-item:hover,.elementor-element-c4e0322 .menu-item.current-menu-item a.hfe-menu-item{color:#D2AC58!important;}
.elementor-element-c4e0322 .elementor-nav-menu{flex-wrap:nowrap!important;}
.elementor-element-693720cb .elementor-nav-menu,.elementor-element-a585abf .elementor-nav-menu{flex-wrap:nowrap!important;}

/* spm-hero-bg */
/* ===== HERO OVERLAY OPACITY: edit the rgba(...) alpha values on the .s-hero line below ===== */
.s-hero{background-image:linear-gradient(100deg,rgba(26,26,69,0.72) 0%,rgba(26,26,69,0.40) 40%,rgba(26,26,69,0.10) 72%,rgba(26,26,69,0) 100%),url('https://stcroixcatholic.org/wp-content/uploads/2026/07/modern-church-brick-architecture-2500x1406-1.jpg');background-size:cover;background-position:center right, right center;background-repeat:no-repeat;}
@media(max-width:767px){.s-hero{background-image:linear-gradient(180deg,rgba(26,26,69,0.92),rgba(26,26,69,0.92)),url('https://stcroixcatholic.org/wp-content/uploads/2026/07/modern-church-brick-architecture-2500x1406-1.jpg');}}
/* ===== TEMP CSS — pending native conversion (rose, hero left-half, mass heading row) ===== */
@media(min-width:768px){.s-hero .elementor-element-hero-inner > *{max-width:50%;}}
.elementor-element-masshdrow{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;width:100%;gap:24px;flex-wrap:wrap;}
.elementor-element-masstimes{position:relative;overflow:hidden;}
.elementor-element-masstimes::after{content:'';position:absolute;right:-100px;top:50%;transform:translateY(-50%);width:560px;height:560px;background:url('https://stcroixcatholic.org/wp-content/uploads/2026/06/rose-white.png') no-repeat center center;background-size:contain;opacity:0.10;pointer-events:none;z-index:0;}
.elementor-element-masstimes > *{position:relative;z-index:1;}

/* Utility-bar Give Online — flush CTA (class-based, kit-portable) */
.elementor-element-utLoginMnu .hfe-nav-menu{align-items:center;}
.elementor-element-utLoginMnu .spm-util-cta{align-self:stretch;display:flex;align-items:stretch;}
.elementor-element-utLoginMnu .spm-util-cta > a{background:#D2AC58;color:#1A1A45!important;display:flex;align-items:center;height:100%;min-height:40px;padding:0 18px;font-weight:600;border-radius:0;}
.elementor-element-utLoginMnu .spm-util-cta > a:hover{background:var(--e-global-color-primary);color:var(--e-global-color-7034f28)!important;}

/* Primary nav + search pinned right; gap falls between logo and nav (flex push) */
.spm-primary-nav{margin-left:auto;}

/* ===== HEADER V2 (post 331) — native rebuild; scoped copies of still-needed rules. At flip: retire .elementor-224 versions. ===== */
.elementor-331 .elementor-element-utLoginMnu .elementor-nav-menu{align-items:center;}
@media(max-width:1024px){.elementor-331 .elementor-element-693720cb .elementor-item{font-size:13px!important;}}

/* HEADER V2: dropdown panels get a generous fixed minimum width instead of hugging content (Craig) */
.elementor-331 .elementor-element-c4e0322 .elementor-nav-menu--dropdown{min-width:340px;}


/* L-003 Pattern A overlay card (Spotlight/Events) — scrim + type helpers, class-keyed/portable */
.spm-ov-card-title{text-transform:uppercase;}
.spm-ov-card-desc{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}

/* L-005 Pattern B editorial (News + Ministry, M63C) — 16:9 media, non-root child */
.spm-ed-media-169, .elementor-element-news-card-media, .elementor-element-ministry-card-media{aspect-ratio:16/9;width:100%;background-size:cover;background-position:center center;flex-shrink:0;}


/* L-019 Phase 2: float the transparent hero header so hero pages need no negative pull. Class-keyed to #331 (hero header only); #607 solid header stays in flow. */
header.elementor-331 {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
}
/* SPM: View All link hover (Item 4) */
.spm-viewall a:hover, .spm-viewall a:focus-visible { color: var(--link-accent); }

/* SPM: Item 1 button weight parity (Elementor omits font-weight for V3 button widget) */
.elementor-widget-button .elementor-button { font-weight: 600; }

/* SPM R2: Item 8 quote mark visibility (no native control for quotation-skin ::before) */
.elementor-widget-blockquote.elementor-blockquote--skin-quotation .elementor-blockquote::before { color: var(--e-global-color-accent); }

/* SPM R2-closeout D2: inline field labels (label-caps treatment) */
.spm-field-label { font-family: var(--font-display, 'Cinzel'), sans-serif; font-weight: 500; font-size: var(--text-xs, 0.75rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-global-color-primary); }


/* Editor-preview only: WP emits --wp-admin--admin-bar--height:32px for logged-in
   sessions, but Elementor's preview iframe renders no admin bar — so the absolutely
   positioned header drops 32px away from the hero while editing. Front end is
   unaffected (logged-out visitors get 0px). Added 2026-07-23, Craig signed off.
   NOTE: keyed to .elementor-editor-active (not .elementor-editor-preview) — the
   latter is not emitted by this Elementor version; live DevTools capture confirmed
   .elementor-editor-active is the editor-iframe-only body class and is absent on the
   logged-in front end, so the logged-in admin-bar offset stays correct. */
body.elementor-editor-active .elementor-location-header { top: 0; }

/* [OEB-M11-A1] BAND RHYTHM - even the vertical rhythm BETWEEN adjacent bands. */
/*     `band` carries space-2xl (4rem) on BOTH block edges, so two adjacent    */
/*     bands produced 8rem. Round 1 cut only the TOP of the following band,    */
/*     which made the asymmetry WORSE, not better: a coloured band's padding   */
/*     sits inside its background and does not read as whitespace, so the eye  */
/*     saw 32px above a photo band and 96px below it.                          */
/*     Round 2 trims BOTH sides of every interior seam, so the space below a   */
/*     band matches the space above it whatever follows. Interior seam is now  */
/*     2rem + 2rem = 4rem, symmetric. The page's FIRST band keeps its full     */
/*     4rem top and the LAST band its full 4rem bottom, so the outer page      */
/*     margins are untouched.                                                  */
/*     Class-keyed and portable - no post-ID, no element-instance scope (D6).  */
/*     Pre-authorised by Craig, Mission 11 A1.                                 */
/*     THREE traps, all deliberate:                                            */
/*     (1) The leading `.elementor` is REQUIRED. Elementor emits               */
/*         `.elementor .band` at 0,2,0 and loads it AFTER this file, so a bare */
/*         `.band + .band` silently loses and nothing changes (O-53).          */
/*     (2) `:has()` is the only way CSS can express "a band FOLLOWED BY a      */
/*         band". There is no native Elementor control for it.                */
/*     (3) Elementor rewrites the bare word s-e-l-e-c-t-o-r anywhere in kit    */
/*         custom CSS, INCLUDING inside comments. Avoid it here (O-52).        */
.elementor .band + .band { padding-block-start: var(--space-l); }
.elementor .band:has(+ .band):not(:has(> .e-ts2-s)) { padding-block-end: var(--space-l); }
/* [OEB-M23-A1] TITLE BANDS ARE EXCLUDED FROM THE BOTTOM TRIM ABOVE.
   Mechanism, measured 2026-07-30 on prod AND dev (identical 64/32, +16px):
   the band class gives 4rem/4rem; the trim below cuts the bottom to 2rem
   whenever another band follows. While the eyebrow existed the asymmetry
   read as a text composition; after the M19 eyebrow removal the Standard
   title band holds a lone h1 and the 2:1 padding reads as an off-center
   title. The Hero band self-centers (fixed 416px min-height, centered
   content) and needs no exclusion. The key .e-ts2-s is the Standard
   title band component's own compiled inner-container class, stable
   across installs because component-internal element ids travel.
   Consequence, deliberate: the seam below a Standard title band becomes
   64+32=96px, matching what Hero pages already show. Interior content
   seams keep M11-A1's even 64px. Component definitions untouched. */


/* [O-71] FORM SUBMIT BUTTON OVERFLOWS ITS FIELD GROUP AT TABLET WIDTHS.
   Why CSS: the Elementor form submit button carries an intrinsic width
   (105px measured) larger than its flex field group (54px measured), so it
   escapes the container and pushes document scrollWidth past the viewport,
   causing sideways scroll on every page at around 900px. Elementor exposes
   no native control for the button's shrink behaviour in a submit field group.
   Keyed to Elementor's own form classes; no post-ID scoping; portable.
   Measured before the fix: 900px viewport, 908px scrollWidth, 8px overflow.
   Added 2026-07-29, OEB Mission 18, Craig-authorised under D6. */
.elementor .elementor-form .elementor-field-type-submit{min-width:0;}
.elementor .elementor-form .elementor-field-type-submit .elementor-button{max-width:100%;}

/* [OEB-M22-P5] BODY-COPY LINKS - bold, underlined, link-accent.
   Craig-approved, Mission 22. Token link-accent resolves to a darkened brand-blue
   at 4.5057:1 on white, derived by holding the brand-blue hue and reducing
   lightness only until AA passes. The value lives in the kit variable, not here.
   SCOPE IS PROSE ONLY, and that is a deliberate narrowing by Craig:
   an earlier draft also matched links inside component text props, whose
   dominant effect was restyling all 25 Staff Directory contact lines.
   That arm is intentionally absent - do not reinstate it without a ruling.
   Class-keyed, portable, zero post-ID scoping (D6). Colour is a var() only (R-022).
   The leading .elementor is REQUIRED for cascade weight (O-53). */
.elementor .elementor-widget-text-editor a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){font-weight:700;text-decoration:underline;color:var(--link-accent);}

/* [OEB-M42-B] SECTION INTRO LINKS - the arm M22 deliberately left out, now RULED IN.
   Craig's ruling 2026-08-01, Mission 42. This satisfies the M22 comment above:
   'do not reinstate it without a ruling'. It is NOT that arm reinstated - that one
   matched links inside ALL component text props and would have repainted the 25
   Staff Directory contact lines. This one is keyed to the Section Intro component's
   rendered class only.
   MEASURED BEFORE WRITING, live on all 44 candidate surfaces: this .elementor-kit-17 matches
   exactly ONE anchor site-wide - the Staff Directory prose intro email. The 12 staff
   cards (card-feature), the 4 info-card emails on Contact Us and Baptism, and the
   Capital Campaign FAQ accordion email are all OUTSIDE .section-intro and are
   provably unreachable by this rule.
   Class-keyed, portable, zero post-ID scoping (D6). Colour is a var() only (R-022).
   The leading .elementor is REQUIRED for cascade weight (O-53). */
.elementor .section-intro a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){font-weight:700;text-decoration:underline;color:var(--link-accent);}

/* [OEB-M22-P4] GRAVITY FORMS SUBMIT - carry the yellow CTA treatment.
   Why CSS: Gravity Forms exposes no control to put a design-system class on
   its submit control, and the theme leaves it unstyled (transparent, weight 400).
   Keyed to the form cssClass set on form 1 plus GF own classes; no post-ID.
   All colours are var() tokens - zero raw literals (R-022). */
/* NOTE added after measuring on the live page: Gravity Forms 2.10 ships the
   'orbital' theme framework, which paints the submit control with its own
   high-specificity rules (measured winning value rgb(32,76,229), radius 3px,
   weight 500). Its theme custom properties are not exposed on the wrapper's
   computed style, so re-theming them natively would mean guessing property
   names. !important is used deliberately here, matching the convention the
   rules above already use for third-party widgets that expose no control.
   Colours remain var() tokens - the override is on weight, not on values. */
/* MEASURED 2026-08-19 on the rendered form: this site runs Gravity Forms 3.0, which
   emits <button class="gform_button button"> inside .gform-footer (hyphen), NOT the
   <input type="submit"> inside .gform_footer (underscore) the 2.10-era note above
   assumed. The input arms are kept for forward/back compatibility; the button arms are
   the ones that actually match today. */
.elementor .spm-contact-form .gform_footer input[type="submit"],.elementor .spm-contact-form input.gform_button[type="submit"],.elementor .spm-contact-form .gform_footer button.gform_button,.elementor .spm-contact-form .gform-footer button.gform_button,.elementor .spm-contact-form button.gform_button[type="submit"]{background-color:var(--gold-button)!important;color:var(--text-ink)!important;font-family:var(--font-body)!important;font-size:16px!important;font-weight:600!important;line-height:1.2!important;text-transform:none!important;letter-spacing:normal!important;border:0!important;border-radius:8px!important;padding:15px 30px!important;cursor:pointer;inline-size:auto!important;}
.elementor .spm-contact-form .gform_footer input[type="submit"]:hover,.elementor .spm-contact-form .gform_footer input[type="submit"]:focus-visible,.elementor .spm-contact-form button.gform_button:hover,.elementor .spm-contact-form button.gform_button:focus-visible{background-color:var(--gold-button-hover)!important;color:var(--text-ink)!important;}

/* [OEB-M23-E] CATEGORY HEADINGS - short gold rule beneath each category
   heading, per Craig's request for stronger visual separation on the
   Ministries page. Role-named class, applied per element; the colour and
   spacing bind existing tokens (R-022, D4). Class-keyed, zero post-ID
   scoping (D6); portable to dev and hub with the same class name. */
.elementor .heading-category::after{content:"";display:block;inline-size:48px;block-size:3px;background-color:var(--brand-yellow);margin-block-start:var(--space-xs);}

/* [OEB-M25-B] Pastor message band on the Capital Campaign page: equalize the two split columns. The split-media and split-body classes carry unequal flex bases (20rem vs 14rem); these two page-local style hooks pin both columns to the same basis so the photo column equals the text column. Child-combinator keeps this rule ahead of the class shorthand in the cascade. */
@media (min-width: 768px) { .elementor .split > .e-fra2-s, .elementor .split > .e-fra3-s { flex-basis: calc(50% - (var(--space-xl) / 2)); } }

/* [OEB-M30-B] Capital Campaign pillar grid: five projects read 3 across with the final two centred beneath. The shared card-grid class auto-fits to four at desktop, so this page-local hook overrides only the column track, at desktop width only. Six equal tracks with each card spanning two gives three per row; starting card four at track two centres the second row. Compound class keeps this ahead of the shared class in the cascade. Below desktop the shared auto-fit behaviour is untouched. */
@media (min-width: 1025px) {
.elementor .card-grid.campaign-pillar-grid { grid-template-columns: repeat(6, 1fr); }
.elementor .card-grid.campaign-pillar-grid > * { grid-column: span 2; }
.elementor .card-grid.campaign-pillar-grid > :nth-child(4) { grid-column: 2 / span 2; }
}

/* [OEB-M49-A] INFO CARD LINKS - the third carrier arm. Craig's ruling 2026-08-01,
   Mission 49, approving the arm drafted in Mission 48 Part A (O-140).
   WHY AN ARM AT ALL: this site delivers link styling entirely through carrier-scoped
   kit rules - [OEB-M22-P5] for text-editor prose and [OEB-M42-B] for section intros.
   An Info Card is neither, so its links were never matched. That is O-114's finding
   exactly: not excluded, never matched. There is NO element-level route - a class on
   a component instance is forbidden by R-045(c) and local styles are house-forbidden.
   MEASURED LIVE BEFORE WRITING: component 797 has 33 instances across 15 documents
   (revisions excluded). Exactly FIVE carry an anchor and only FOUR are reachable by a
   visitor - Contact Us q022/q023 and Baptism q014/q015, all four mailto. The fifth is
   in library template 812 (t014, a placeholder address); that template redirects to
   the home page and renders nowhere.
   Staff Directory cards are card-feature, NOT info-card, and stay unstyled - that is
   Craig's M22 ruling and this arm is provably unable to reach them.
   Declarations are byte-identical to the two arms above, deliberately: one look.
   NO hover rule, also deliberately - measured on this site, zero hover rules match a
   styled link, so the two arms above have none either. Adding one here would make
   Info Card links the only links on the site that move on hover.
   Class-keyed, portable, zero post-ID scoping (D6). Colour is a var() only (R-022).
   The leading .elementor is REQUIRED for cascade weight (O-53). */
.elementor .info-card a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){font-weight:700;text-decoration:underline;color:var(--link-accent);}


/* [OEB-P9-A] CLASSIC BODY-COPY LINKS - the fourth carrier arm. Craig-directed
   2026-08-14 (Part 9): stick to the established carrier model, do not reinvent.
   WHY: theme-post-content output is a carrier no existing arm matches - O-114's
   pattern again (not excluded, never matched). Posts authored in the classic
   editor (Reclaiming Sundays, CSA, all Bible studies) render their body through
   the Post Content widget on SPM - Post Single (1142) and News Single (592),
   so their anchors carried no styling while text-editor prose did (M22-P5).
   SCOPE - THE :has() EXCLUSION IS THE WHOLE POINT: the same widget also renders
   entire nested Elementor page documents on templates 522/605/825. A bare
   .elementor-widget-theme-post-content arm would therefore repaint links inside
   ALL page content - component text props, the 25 Staff Directory contact lines -
   which is precisely the arm M22 deliberately left absent. Classic content is
   distinguishable: it never contains a nested .elementor document; page renders
   always do. :not(:has(.elementor)) keys the arm to classic content only.
   :has() precedent: M11-A1 band rhythm. MEASURED BEFORE WRITING: 247 anchors
   across 36 published classic posts are reachable; zero anchors inside nested
   Elementor documents can match.
   Declarations byte-identical to M22-P5/M42-B/M49-A, deliberately: one look.
   NO hover rule, matching the three arms above. Class-keyed, portable, zero
   post-ID scoping (D6). Colour is a var() only (R-022). The leading .elementor
   is REQUIRED for cascade weight (O-53). */
.elementor .elementor-widget-theme-post-content:not(:has(.elementor)) a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){font-weight:700;text-decoration:underline;color:var(--link-accent);}


/* [OEB-M67-A] BUTTON BREATHING ROOM - the systemic button-spacing mechanism.
   Craig-directed 2026-08-14 (M67): buttons crowd the content below them; per-page
   spacing patches are RETIRED as a class - three existed (Give v004, Bulletin w002,
   Careers y003, all 2.5rem on the FOLLOWING heading) and all are removed this mission.
   MEASURED BEFORE WRITING: the approved give-online seam rendered 56px total
   (2.5rem hand margin + the prose-zone's 1rem space-s gap). The systemic rhythm
   converges on ONE total seam of space-xl (3rem) in every context - the only token
   adjacent to both the 40px patch value and the 56px rendered seam.
   TWO RULES, ONE RHYTHM, deliberately: prose carriers have NO flex gap, so the
   margin IS the seam (space-xl); prose-zone flex contexts already carry a space-s
   gap, so a space-l margin COMPOSES with it to the same space-xl total. Do not
   equalize the two margins - the totals are what match.
   MEASURED SCOPE: zero btn-class anchors exist in prose today (rules 1-2 are the
   forward guarantee); rule 3 reaches exactly four pages live - Give, Bulletin,
   Careers (the three unwound patches) and Livestream (three seams, previously
   crowded at 16px, now correct - the systemic rule fixing an unreported instance).
   :not(:last-child) keeps a zone-ending button flush - card CTAs and end-of-zone
   buttons gain nothing. Widget-in-container cases (FF Single 550) converge on the
   parent gap instead - see that template; a margin there would stack (the doubling
   this comment exists to forbid).
   Class-keyed, portable, zero post-ID scoping (D6). Values are var() only (R-022).
   The leading .elementor is REQUIRED for cascade weight (O-53). */
.elementor .elementor-widget-theme-post-content:not(:has(.elementor)) a[class*="btn"],.elementor .elementor-widget-text-editor a[class*="btn"]{display:inline-block;margin-block-end:var(--space-xl);}
.elementor .prose-zone > a[class*="btn"]:not(:last-child){margin-block-end:var(--space-l);}

/* [OEB-M67-B] TWO-COLUMN DROPDOWN PANEL - role-named, menu-editable.
   Craig-directed 2026-08-14 (M67 item 3): the Faith Formation dropdown holds 12
   items after the M66/M67 nav work - too tall as a single column. Mechanism: the
   WP menu-item CSS class spm-menu-cols-2 on the PARENT item (Craig can move or
   remove it in Appearance > Menus - no menu-item-ID scoping, portable), plus this
   one rule. Elementor Pro Mega Menu deliberately NOT adopted (both-headers rebuild;
   separate mission if ever wanted).
   MEASURED MARKUP: the desktop nav is .elementor-nav-menu--layout-horizontal; the
   off-canvas drawer's nav is --layout-vertical, so this rule CANNOT reach the
   mobile accordion - single column there is correct and untouched. CSS columns
   (not grid) so the item count never needs restating; break-inside guards mid-item
   splits. min-width doubles the existing 340px panel rule (Craig, Header V2).
   Desktop media query matches the site's own 1025px breakpoint convention. */
@media (min-width:1025px){
.elementor-nav-menu--layout-horizontal li.spm-menu-cols-2 > ul.sub-menu{columns:2;column-gap:0;min-width:680px;}
.elementor-nav-menu--layout-horizontal li.spm-menu-cols-2 > ul.sub-menu > li{break-inside:avoid;}
}

/* [OEB-M68-A] LIST BOTTOM RHYTHM IN PROSE - lists end flush against what follows.
   Craig item 1, 2026-08-14 (M68). MEASURED BEFORE WRITING on the FF Registration
   content and a classic post: ul/ol inside the prose carriers compute
   margin-block-end 0 (theme reset) while paragraphs carry ~14.4px (0.8em at 18px),
   so a list's last item touches the next element (measured seam: 0px).
   ol is INCLUDED - the same reset zeroes it identically (Craig: 'and OL if
   necessary'; measurement says necessary).
   Token: space-s (1rem) - the token nearest the measured 14.4px paragraph rhythm;
   lists close like paragraphs close, no more.
   Scope is the two prose carriers ONLY, deliberately parallel to the link-arm and
   M67-A architecture; the :has() exclusion keeps nested Elementor page renders
   out, exactly as P9-A does. Lists inside flex/gap contexts are spaced by their
   container and are not matched. Class-keyed, portable, zero post-ID scoping (D6).
   Value is a var() only (R-022). Leading .elementor REQUIRED (O-53). */
.elementor .elementor-widget-text-editor ul,.elementor .elementor-widget-text-editor ol,.elementor .elementor-widget-theme-post-content:not(:has(.elementor)) ul,.elementor .elementor-widget-theme-post-content:not(:has(.elementor)) ol{margin-block-end:var(--space-s);}

/* [OEB-M68-B] RSS WIDGET LIST INDENT - the core WP RSS widget's ul keeps the
   40px user-agent padding-inline-start, pushing feed items 40px right of the
   column edge while the column headings sit at 0 (MEASURED on /parish-news/,
   all three columns identical). No native control exists on the wrapped WP
   widget. space-m (1.5rem/24px) keeps room for the bullet marker while pulling
   items to the design system's list indent. Class-keyed to the widget wrapper,
   portable, zero post-ID scoping (D6). Value is a var() only (R-022).
   Leading .elementor REQUIRED (O-53). */
.elementor .elementor-widget-wp-widget-rss ul{padding-inline-start:var(--space-m);}

/* Off-canvas drawer: submenus expand inline (accordion) instead of absolute flyout — portable, any nav-menu in any off-canvas. */
.elementor-widget-off-canvas .elementor-nav-menu .sub-menu{position:static!important;width:100%!important;box-shadow:none!important;padding-left:16px!important;}

/* [SCCS-S01-2d] PROSE BUTTON ARM - carry-forward defect #2, recreated against the
   SCCS button spec. WHY AN ARM AT ALL: the four link arms above all exclude
   [class*="btn"], so an author-placed button anchor inside prose was matched by
   nothing and rendered as bare text. This is the arm that catches it.
   Gold is the scarce primary action: fill gold-button, text text-ink (never white,
   never navy - README project rule). --blue modifier is the secondary action.
   All colours are var() tokens - zero raw literals. Class-keyed, zero post-ID
   scoping. The leading .elementor is REQUIRED for cascade weight. */
.elementor a.spm-prose-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:none;text-decoration:none;padding:15px 30px;border-radius:8px;background-color:var(--gold-button);color:var(--text-ink);transition:background-color .2s ease;}
.elementor a.spm-prose-btn:hover,.elementor a.spm-prose-btn:focus-visible{background-color:var(--gold-button-hover);color:var(--text-ink);text-decoration:none;}
.elementor a.spm-prose-btn.spm-prose-btn--blue{background-color:var(--brand-navy);color:var(--text-inverse);font-weight:500;}
.elementor a.spm-prose-btn.spm-prose-btn--blue:hover,.elementor a.spm-prose-btn.spm-prose-btn--blue:focus-visible{background-color:var(--brand-navy-deep);color:var(--text-inverse);}

/* [SCCS-S01-4] FOCUS RING - README requires a visible AA focus indicator on every
   link, button and trigger; the mocks leave it to the build. Navy-blue ring on light,
   white ring on dark fills. Tokens only. */
.elementor a:focus-visible,.elementor button:focus-visible,.elementor input:focus-visible,.elementor textarea:focus-visible,.elementor [tabindex]:focus-visible{outline:2px solid var(--brand-navy);outline-offset:2px;}
.elementor .surface-navy a:focus-visible,.elementor .surface-navy button:focus-visible,.elementor .sccs-on-dark a:focus-visible,.elementor .sccs-on-dark button:focus-visible{outline-color:var(--text-inverse);}


/* [SCCS-S01-4C] retired by S15 — clusters are menus and text widgets now */
/* [SCCS-S15-1] Nav Menu hover underline. The Nav Menu widget exposes hover colour but no hover text-decoration; its "underline" pointer is an animated pseudo-element, not text-decoration. The widgets keep Typography > Decoration = none (without it the kit link underline leaks in at rest), which Elementor emits at specificity 0,5,0, so this hover exception repeats the widget and menu classes to reach 0,6,0. Measured after Pass 1/3: hover text-decoration-line none. Reproduces S01-4C hover for .sccs-util-nav and .sccs-foot-nav. */
.elementor .elementor-widget-nav-menu.sccs-util-nav .elementor-nav-menu .elementor-item:hover,.elementor .elementor-widget-nav-menu.sccs-util-nav .elementor-nav-menu .elementor-item:focus-visible,.elementor .elementor-widget-nav-menu.sccs-foot-nav .elementor-nav-menu .elementor-item:hover,.elementor .elementor-widget-nav-menu.sccs-foot-nav .elementor-nav-menu .elementor-item:focus-visible{text-decoration:underline;}
/* [SCCS-S15-2] Text Editor paragraph margin. The Text Editor widget has no paragraph-spacing control; the kit paragraph_spacing (measured 14.4px) applied under the address and legal paragraphs where the retired <address>/<div> had margin 0. */
.elementor .sccs-foot-id p,.elementor .sccs-foot-directions p,.elementor .sccs-legal p{margin:0;}
/* [SCCS-S15-3] Anchors inside Text Editor widgets. The widget has no link colour control, and the kit prose-link arm .elementor .elementor-widget-text-editor a:not(...) (specificity 0,5,1; measured rgb(0,74,152), 700, underline) beats a plain class rule, so these .elementor-kit-17s repeat that :not() chain to outrank it. Values carried over from the retired S01-4C rules; no new colour. */
.elementor .elementor-widget-text-editor.sccs-foot-id a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){color:inherit;font-weight:500;text-decoration:none;}
.elementor .elementor-widget-text-editor.sccs-foot-id a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):hover,.elementor .elementor-widget-text-editor.sccs-foot-id a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):focus-visible{color:#FFFFFF;text-decoration:underline;}
.elementor .elementor-widget-text-editor.sccs-foot-directions a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){color:var(--text-inverse-soft);font-weight:500;text-decoration:none;}
.elementor .elementor-widget-text-editor.sccs-foot-directions a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):hover,.elementor .elementor-widget-text-editor.sccs-foot-directions a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):focus-visible{color:#FFFFFF;}
/* [SCCS-S13-eyebrow] footer column headings 12 -> 14px to track the 18px body copy, 2026-09-17 */
/* [SCCS-S12-type] 18px body copy — 2026-09-17 */
/* [SCCS-S12-type] 18px body copy — 2026-09-17 */
.elementor .sccs-social{display:flex;gap:12px;margin-block-start:20px;}
.elementor .sccs-social a{inline-size:34px;block-size:34px;border:1px solid rgba(255,255,255,.4);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;color:var(--text-inverse-soft);text-decoration:none;}
.elementor .sccs-social a:hover,.elementor .sccs-social a:focus-visible{border-color:#FFFFFF;color:#FFFFFF;}
/* [SCCS-S12-type] 18px body copy — 2026-09-17 */


/* [SCCS-S01-4D] HOMEPAGE BAND MECHANICS. Every rule here expresses something the
   V3 element controls cannot: a four-stop gradient (Elementor's overlay takes two),
   an aspect-ratio crop, a card-lift hover, an image zoom on parent hover, and the
   small link/rule primitives that render from HTML widgets. Colours are var() tokens
   wherever a token exists; the rgba() values are the README's own alpha-on-photo and
   alpha-on-navy values, which have no token equivalent by construction.
   Class-keyed, zero post-ID scoping. Leading .elementor is REQUIRED for cascade weight. */
.elementor .sccs-hero::before{background-image:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.44) 26%, rgba(0,0,0,0.10) 52%, rgba(0,0,0,0) 74%)!important;}
.elementor .sccs-mark{display:block;}
/* [SCCS-S32-rule] Short decorative rule, now a native Divider widget carrying the class sccs-rule (2026-10-08). One rule: the widget wrapper, its flex box and the separator are all held at 44px so the container's own alignment places it exactly as the former HTML widget; padding-block:0 removes the Divider's default 15px gap; the custom properties override the Divider's emitted colour, weight and style. The former .sccs-rule div rule was removed in the same mission once the last HTML widget was converted. */
.elementor .elementor-widget.elementor-widget-divider.sccs-rule,.elementor .elementor-widget.elementor-widget-divider.sccs-rule .elementor-divider,.elementor .elementor-widget.elementor-widget-divider.sccs-rule .elementor-divider .elementor-divider-separator{inline-size:44px;padding-block:0;--divider-border-style:solid;--divider-border-width:2px;--divider-color:var(--brand-yellow);}
/* [SCCS-S12-type] 18px body copy — 2026-09-17 */
.elementor a.sccs-inline-link{font-family:Montserrat,sans-serif;font-size:18px;font-weight:600;line-height:1.5;color:var(--link-accent);text-decoration:underline;}
.elementor a.sccs-inline-link:hover,.elementor a.sccs-inline-link:focus-visible{color:var(--brand-navy-deep);text-decoration:underline;}
.elementor .sccs-emph strong{color:var(--text-ink);font-weight:600;}
.elementor .sccs-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.elementor .sccs-card .elementor-widget-image img{inline-size:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .2s ease;}
.elementor .sccs-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,46,86,0.14);border-color:var(--border-strong);}
.elementor .sccs-card:hover .elementor-widget-image img{transform:scale(1.03);}
/* [SCCS-S12-type] 18px body copy — 2026-09-17 */
.elementor a.sccs-card-link{font-family:Montserrat,sans-serif;font-size:18px;font-weight:600;color:var(--link-accent);text-decoration:underline;}
.elementor .sccs-tile{transition:box-shadow .2s ease;}
.elementor .sccs-tile:hover{box-shadow:0 8px 24px rgba(6,46,86,0.14);}
.elementor .sccs-tile img{display:block;inline-size:100%;block-size:200px;object-fit:cover;}
.elementor .sccs-img-16x11 img{inline-size:100%;aspect-ratio:16/11;object-fit:cover;display:block;}
.elementor .sccs-portrait img{inline-size:280px;block-size:280px;object-fit:cover;display:block;}
/* [SCCS-S12-type] 18px body copy — 2026-09-17 */
.elementor .sccs-cta-contact{font-family:Montserrat,sans-serif;font-size:18px;line-height:1.7;color:rgba(245,241,232,0.9);text-align:center;margin-block-start:8px;}
.elementor .sccs-cta-contact strong{color:#FFFFFF;font-weight:600;}
.elementor .sccs-cta-contact a{color:inherit;text-decoration:underline;}
.elementor .sccs-cta-contact a:hover,.elementor .sccs-cta-contact a:focus-visible{color:#FFFFFF;}
.elementor h1,.elementor h2,.elementor h3,.elementor .sccs-cta-contact{text-wrap:pretty;}
@media (max-width:1024px){.elementor .sccs-card .elementor-widget-image img{aspect-ratio:16/10;}}


/* [SCCS-S01-4A] HEADER ROW SIZING. MEASURED 2026-08-19: the Image widget defaults to
   100% of its flex parent, so the 48px-tall logo claimed the whole 1145px nav row and
   crushed the eight-item menu to zero width, pushing every item off-canvas. Elementor
   exposes an image width control but no 'auto' unit, so the intrinsic ratio has to be
   restored here. The logo cell must not grow or shrink; the nav cell takes the rest and
   is allowed to shrink below its content width so the row can never overflow the page. */
.elementor .sccs-logo{flex:0 0 auto;}
.elementor .sccs-logo img{block-size:48px;inline-size:auto;max-inline-size:none;display:block;}
.elementor .sccs-nav{flex:1 1 auto;min-inline-size:0;}
.elementor .sccs-nav .elementor-nav-menu--main>ul.elementor-nav-menu{justify-content:flex-end;flex-wrap:wrap;}


/* [SCCS-R1] Craig punch list 2026-08-19, chat-run. Measured before writing. */
/* R1-1 HEADER ROW HEIGHT + LOGO CENTERING. Measured: widget 58px vs img 48px - the anchor renders inline-block inside the widget's line box and adds a ~10px descender gap below the logo, pushing the row to 87px with the logo 5px high of center. Block the anchor; center the row. Row lands 14+48+14+1 = 77px. */
.elementor .sccs-nav-row{align-items:center;}
.elementor .sccs-logo a{display:block;}
/* R1-4 ALUMNI FLUSH RIGHT. Menu items carry 10px side padding; the utility bar's Calendars has none, so Alumni stopped 10px short of the shared x=1165 edge. Widget align=right (JSON) does the coarse move; this is the final 10px. Top-level last item only; submenus untouched. */
/* [SCCS-S12-nav] 2026-09-17 last item right padding 0 to 10px so the active background is centred (BugHerd 69); value change only. The R1-4 flush-right reason no longer applies: the row now ends in the search icon. */
.elementor .sccs-nav .elementor-nav-menu--main>ul.elementor-nav-menu>li:last-child>a{padding-right:10px;}
/* R1-2/3 SUPPORTING-TEXT WEIGHT 400 to 500 for the HTML-widget clusters (element-level widgets swept in JSON, 13 pairs). Merriweather is structurally immune: it loads 400/700 only, so a 500 request resolves down to 400 - the serif reading voice is unchanged by construction. */
.elementor .sccs-cta-contact{font-weight:500;}
/* R1-9 FOOTER LINK COLUMNS tightened per Craig: row gap 14 to 8, line-height 1.4 to 1.35, weight joins the 500 step. Later-in-file at equal specificity, so these win over [SCCS-S01-4C] without touching it. */
/* R1-5/6/7 REDUCED MOTION: entrance animations collapse to instant reveal. */
@media (prefers-reduced-motion: reduce){.elementor .animated{animation-duration:1ms!important;animation-delay:0ms!important;}}

/* [SCCS-R1B] Residuals from the R1 verify pass, measured live. */
/* R1-4b: the nav wrapper .elementor-nav-menu--main is display:flex with justify normal, so the ul (847px) hugged LEFT of its 884px cell regardless of the widget align token (markup emitted text-align-aside). Right-justify the wrapper; ul right edge lands on the shared x=1165 line with the utility bar's Calendars. */
.elementor .sccs-nav .elementor-nav-menu--main{justify-content:flex-end;}
/* R1-9b: footer li boxes inherited the kit body line (17px/1.8 = 30.6px) around 14px links, inflating row pitch to 39px. Pin the li to the link's own scale; pitch lands at ~27px (18.9 + 8 gap). */
/* [SCCS-S12-type] 18px body copy — 2026-09-17 */


/* [SCCS-R2-RWD] MID-WIDTH HORIZONTAL OVERFLOW - band 04, the positioning band.
   MEASURED 2026-08-19 before writing, at five viewports: 1100 -> 167px of overflow,
   1200 -> 110px, 1280 -> 70px, 1366 -> 27px, 1440 -> 0. Ten elements overflow at every
   failing width and all ten are 'Positioning Inner' (924f1cb) and its descendants.
   Bands 07 (Sisters copy) and 08 (Affordability grid) were measured at the same five
   widths and are clean at all of them - they are NOT given rules here.
   CAUSE: the copy column (6db2d6b) is 50% wide and carries 168px of horizontal padding,
   while its child is pinned to a fixed 620px. Below ~1440 the parent's content box drops
   under 620 and the child simply hangs out of the page. Elementor exposes a width control
   but no max-width, and no fluid padding unit, so both have to be expressed here.
   FIX: cap the child at its own width or the space available, whichever is smaller, and
   let the padding breathe down fluidly so the reading column keeps a usable measure.
   SCOPED @media (max-width:1439px) BY CONSTRUCTION: the approved mock is 1440-desktop-only,
   so 1440 and above render exactly as they did before this block existed - verified
   identical after the write (padding 104px 80px 104px 88px, child 620px, max-width none). */
@media (max-width:1439px){
  .elementor .sccs-pos-copy{padding:clamp(48px,7vw,104px) clamp(32px,5.5vw,80px) clamp(48px,7vw,104px) clamp(36px,6vw,88px);min-inline-size:0;}
  .elementor .sccs-pos-inner{max-inline-size:min(620px,100%);inline-size:min(620px,100%);}
}

/* [SCCS-R2-RWD-GRIDS] MID-WIDTH TRACK WRAP - bands 05 and 06. Found while verifying the
   band-04 fix and fixed under the same Phase 3 remit; it is the same mid-width failure
   wearing a different face. NOTE FOR ANYONE RE-MEASURING: this one is INVISIBLE to a
   scrollWidth-minus-clientWidth check, because flex-wrap absorbs the excess instead of
   pushing the page wide. Both bands measured zero overflow while laying out wrong.
   MEASURED at viewport 1200 (inner 1160): proof band 4 cells x 22% = 255px each, plus
   3 x 48px gap = 1164 > 1160, so the fourth stat wrapped to its own row - 3+1, not 4.
   Program doors 3 cards x 31.5% = 365.4px each, plus 2 x 32px gap = 1160.2 > 1160 - over
   by two tenths of a pixel, and the third card wrapped. The README ladder is 4 -> 2 -> 1
   and 3 -> 2 -> 1; 3+1 and 2+1 are not steps on it.
   CAUSE: a percentage track plus a fixed gap cannot be guaranteed to fit - the percentage
   is of the full inner width and the gap is added on top. Elementor's width control takes
   a percentage or a fixed value, never a calc, so the gap-aware track has to live here.
   SCOPE min-width 1025px: at and below Elementor's tablet breakpoint the cells already
   carry their own 45%/100% tablet widths and step down correctly - untouched.
   SCOPE max-width 1439px: 1440 and above keep the authored 22%/31.5% tracks exactly. */
@media (min-width:1025px) and (max-width:1439px){
  .elementor .sccs-proof-band > .e-con-inner > .e-con{inline-size:calc((100% - (3 * 48px)) / 4);}
  .elementor .sccs-doors-grid > .e-con{inline-size:calc((100% - (2 * 32px)) / 3);}
}


/* [SCCS-S02] INTERIOR PAGES - title bands, Simple Hero, accordion, strip tiles.
   Every rule stands in for a control Elementor does not expose. Colours are var()
   tokens wherever a token exists; the rgba() values are the READMEs' own alpha-on-photo
   and alpha-on-fill values, which have no token equivalent by construction.
   Class-keyed, zero post-ID scoping. Leading .elementor is REQUIRED for cascade weight. */
/* S02-1 The band's gradient has THREE stops and Elementor's background control takes two.
   The element keeps a faithful two-stop approximation so it degrades honestly if this rule
   is removed; the exact 102deg navy-deep -> navy-mid -> brand-navy ramp lives here.
   !important because Elementor's own per-element background rule is one class more specific. */
.elementor .sccs-title-band{background-image:linear-gradient(102deg, var(--brand-navy-deep) 0%, var(--navy-mid) 54%, var(--brand-navy) 100%)!important;}
.elementor .sccs-title-rule{inline-size:64px;block-size:2px;background-color:var(--gold-button);}
/* S02-2 Simple Hero: the README asks for height 40vh with a 380px floor - two values for
   one Elementor control, so the floor is expressed here. The scrim has four stops (control
   takes two), same pattern as the homepage hero. */
.elementor .sccs-simple-hero{min-block-size:max(40vh,380px);}
.elementor .sccs-simple-hero::before{background-image:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0.08) 62%, rgba(0,0,0,0) 82%)!important;}
/* [SCCS-S33-rule-gold] Gold variant of the short decorative rule, now a native Divider widget carrying the class sccs-rule-gold (2026-10-08). Same construction as [SCCS-S32-rule]: wrapper, flex box and separator held at 44px so the container's alignment places it as the former HTML widget did; padding-block:0 removes the Divider's default 15px gap; the custom properties override the Divider's emitted colour, weight and style. The former .sccs-rule-gold div rule was removed in this write. */
.elementor .elementor-widget.elementor-widget-divider.sccs-rule-gold,.elementor .elementor-widget.elementor-widget-divider.sccs-rule-gold .elementor-divider,.elementor .elementor-widget.elementor-widget-divider.sccs-rule-gold .elementor-divider .elementor-divider-separator{inline-size:44px;padding-block:0;--divider-border-style:solid;--divider-border-width:2px;--divider-color:var(--gold-button);}
.elementor .sccs-strip-tile img{display:block;inline-size:100%;block-size:240px;object-fit:cover;border-radius:14px;}
/* S02-4 ACCORDION. Elementor's native accordion is exclusive by default and ships its own
   aria-expanded / aria-controls / role=tab and keyboard handling, which is why it was chosen
   over a hand-built one. What it does NOT expose: the card frame, the divider convention
   (every item carries a top border, including the first, so the first shows a divider under
   the card's own edge - intentional per the README), and the state marker as a TEXT glyph.
   The marker is drawn with ::before on Elementor's own two icon spans, whose display is
   already toggled by the widget - so open renders U+2212 MINUS SIGN and closed renders +,
   with no JS of ours. The icon elements themselves are hidden rather than removed so the
   widget's own toggle logic is untouched. */
.elementor .sccs-accordion .elementor-accordion{background-color:var(--surface-white);border:1px solid var(--border-hairline);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(6,46,86,0.08);}
.elementor .sccs-accordion .elementor-accordion-item{border:0;border-top:1px solid var(--border-hairline);}
.elementor .sccs-accordion .elementor-tab-title{padding:26px 32px;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;transition:background-color .18s ease;}
.elementor .sccs-accordion .elementor-tab-title:hover,.elementor .sccs-accordion .elementor-tab-title:focus-visible{background:rgba(0,74,152,0.04);}
.elementor .sccs-accordion .elementor-accordion-title{font-family:Merriweather,serif;font-size:20px;font-weight:700;line-height:1.3;color:var(--link-accent);}
.elementor .sccs-accordion .elementor-accordion-icon i,.elementor .sccs-accordion .elementor-accordion-icon svg{display:none!important;}
.elementor .sccs-accordion .elementor-accordion-icon{inline-size:auto;font-family:Montserrat,sans-serif;font-size:24px;font-weight:500;line-height:1;color:var(--brand-gold-hover);}
.elementor .sccs-accordion .elementor-accordion-icon-closed::before{content:"+";}
.elementor .sccs-accordion .elementor-accordion-icon-opened::before{content:"−";}
.elementor .sccs-accordion .elementor-tab-content{padding:0 32px 30px;border:0;background:transparent;}
/* [SCCS-S11-R-B] 2026-09-17 accordion body copy 16px to 18px, the site base size (BugHerd 59); value change only. */
.elementor .sccs-accordion .elementor-tab-content p{font-family:Merriweather,serif;font-size:18px;font-weight:400;line-height:1.8;color:var(--text-ink);margin:0;max-inline-size:760px;text-wrap:pretty;}
@media (prefers-reduced-motion: no-preference){.elementor .sccs-accordion .elementor-tab-content{animation:sccsFade .2s ease;}}
@keyframes sccsFade{from{opacity:0}to{opacity:1}}
.elementor .sccs-prose{text-wrap:pretty;}

/* [SCCS-S02-GRID] TWO- AND THREE-UP TRACKS, GAP-AWARE FROM THE START.
   R2 lesson applied at build time rather than after: a percentage track plus a fixed gap
   cannot be guaranteed to fit, and the failure hides from a scrollWidth check because
   flex-wrap absorbs it. Every multi-column band on these two pages therefore sizes its
   columns with calc() against its own gap. Elementor's width control takes a percentage
   or a fixed value, never a calc, so this is the only place it can live.
   Below the 1025px breakpoint every track goes single-column, per both READMEs. */
.elementor .sccs-split-80 > .e-con-inner > .e-con{inline-size:calc((100% - 80px) / 2);}
.elementor .sccs-split-64 > .e-con-inner > .e-con{inline-size:calc((100% - 64px) / 2);}
.elementor .sccs-strip-3 > .e-con-inner > .e-con{inline-size:calc((100% - 48px) / 3);}
@media (max-width:1024px){
  .elementor .sccs-split-80 > .e-con-inner > .e-con,.elementor .sccs-split-64 > .e-con-inner > .e-con,.elementor .sccs-strip-3 > .e-con-inner > .e-con{inline-size:100%;}
/* Both READMEs are explicit: on mobile the photo goes ABOVE the copy in every pillar band -
   do not preserve the left/right alternation, it produces an inconsistent read order. */
  .elementor .sccs-split-80.sccs-photo-right > .e-con-inner{flex-direction:column-reverse;}
}

/* [SCCS-S02-NAV] ACTIVE NAV ITEM. Both READMEs: the current section's item carries the
   hover treatment permanently at weight 600 with brand-navy text, and does NOT change on
   hover. WordPress emits current-menu-item on the page itself and current-menu-ancestor /
   current-page-ancestor on its parent, so a child page lights its top-level parent - which
   is exactly what About Us on Why Choose and Academics on Elementary need. Class-keyed to
   the header's own .sccs-nav; no menu-item IDs, so it survives any menu edit. */
.elementor .sccs-nav .elementor-nav-menu > li.current-menu-item > a.elementor-item,.elementor .sccs-nav .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item,.elementor .sccs-nav .elementor-nav-menu > li.current-page-ancestor > a.elementor-item,.elementor .sccs-nav .elementor-nav-menu > li.current-menu-parent > a.elementor-item{font-weight:600;color:var(--brand-navy);background-color:rgba(0,74,152,0.07);}
.elementor .sccs-nav .elementor-nav-menu > li.current-menu-item > a.elementor-item:hover,.elementor .sccs-nav .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item:hover,.elementor .sccs-nav .elementor-nav-menu > li.current-page-ancestor > a.elementor-item:hover,.elementor .sccs-nav .elementor-nav-menu > li.current-menu-parent > a.elementor-item:hover{color:var(--brand-navy);background-color:rgba(0,74,152,0.07);}

/* [SCCS-S02-ACC-FIX] MEASURED ON THE RENDERED ACCORDION, two corrections.
   (1) ORDER. Elementor emits the icon span BEFORE the title in the DOM, so a
   space-between row put the +/- marker on the LEFT and the subject name hard RIGHT -
   the mirror of the design. The README is explicit: subject name left, state marker
   right. Fixed with flex order rather than row-reverse so the DOM order (and therefore
   the screen-reader reading order: name, then state) is untouched.
   (2) UNDERLINE. Elementor renders the subject name as an anchor, so it inherited the
   site-wide underlined-link rule set in S01. The README's accordion title is not a link
   treatment. Same class of defect as the nav underline found in R1. */
.elementor .sccs-accordion .elementor-accordion-title{order:1;flex:1 1 auto;text-decoration:none;}
.elementor .sccs-accordion .elementor-accordion-title:hover,.elementor .sccs-accordion .elementor-accordion-title:focus-visible{text-decoration:none;}
.elementor .sccs-accordion .elementor-accordion-icon{order:2;flex:0 0 auto;margin:0;}

/* [SCCS-R3] DROPDOWN PANEL SPEC - Craig-ratified 2026-08-19 (derived: extends the approved top-level nav language downward; no dropdown design exists in the DS or any mock). MEASURED before writing: panel computed 156px wide (the width_dropdown_item control never compiled), border 0, no parent caret, no hover bg. Typography/colors/radius/shadow were already correct; the earlier underline hypothesis was DISPROVEN by measurement - dropdown items compute text-decoration none. min-width (not width) so long labels can grow. Border binds the hairline token. Current-item rule mirrors the top-level active treatment. */
.elementor .sccs-nav .elementor-nav-menu--dropdown{min-width:260px;border:1px solid var(--border-hairline);}
.elementor .sccs-nav .elementor-nav-menu--dropdown .current-menu-item > a{font-weight:600;color:var(--brand-navy);}

/* [SCCS-R4] LINKS ON DARK FILLS. The kit link colour is brand-blue, which fails contrast on green and navy fills (DS pairing rule: never navy on green). Any text-editor placed on a green or navy background carries the class sccs-on-dark so its links render cream. Standing rule from Craig 2026-09-02. */
.elementor .sccs-on-dark a{color:var(--surface-grey-warm);text-decoration:underline;text-underline-offset:3px;}
.elementor .sccs-on-dark a:hover{color:#FFFFFF;}


/* [SCCS-R5] accordion paragraph margin - 2026-09-03. Measured before: p inside .elementor-accordion .elementor-tab-content computes margin-bottom 0px, zeroed by the [SCCS-S02] rule .elementor .sccs-accordion .elementor-tab-content p{margin:0}. Same specificity, later source order wins. Teamwork 48987521. */
.elementor-accordion .elementor-tab-content p:not(:last-child) { margin-bottom: 1em; }


/* [SCCS-S16-1] 2026-09-17 accordion state marking and rhythm (BugHerd 101, third pass per Craig). Measured on the rendered card. (1) DIVIDERS. S02-4 put the hairline on the item's top edge, which reads as a divider only above the first item and above whichever item follows an open one; Craig wants a line under every title row. The border moves to the title itself, and the item top border is dropped so closed rows never double up. The last item's title carries no line when closed, so nothing sits against the card's own bottom edge. (2) OPEN STATE. The open title keeps the page cream plus its hairline, so the question reads as a header over its own answer. (3) MARKER SIZE. The +/- glyph doubles from 24px to 48px, with line-height 1 held so the title row height is unchanged. (4) ANSWER SPACING. The content had no top padding, so the answer sat against the title; 20px added. Existing tokens only, no new hex. */
.elementor .sccs-accordion .elementor-accordion-item{border:0;}
.elementor .sccs-accordion .elementor-tab-title{border-bottom:1px solid var(--border-hairline);}
.elementor .sccs-accordion .elementor-accordion-item:last-child .elementor-tab-title:not(.elementor-active){border-bottom:0;}
.elementor .sccs-accordion .elementor-tab-title.elementor-active{background:rgba(0,74,152,0.04);border-bottom:1px solid var(--border-hairline);}
.elementor .sccs-accordion .elementor-tab-title:hover,.elementor .sccs-accordion .elementor-tab-title:focus-visible{background:rgba(0,74,152,0.04);}
.elementor .sccs-accordion .elementor-accordion-icon{font-size:48px;line-height:1;}
.elementor .sccs-accordion .elementor-tab-content{padding-top:20px;border-bottom:1px solid var(--border-hairline);}
.elementor .sccs-accordion .elementor-accordion-item:last-child .elementor-tab-content{border-bottom:0;}


/* [SCCS-S16-2] 2026-09-17 interior title band: shield embellishment (Craig). The reversed white shield sits at the far right of the band, deliberately cropped by the band's own edge so only most of the outline reads. Drawn as ::after rather than a background image because S02-1 already owns background-image on this element (the three-stop gradient, !important) and because a pseudo-element can carry its own opacity without tinting the gradient. Hidden below 768px, where the band is too narrow to crop it gracefully and the title would collide with it. Decorative only: no text, aria-hidden by construction, pointer-events none. */
.elementor .sccs-title-band{position:relative;overflow:hidden;}
.elementor .sccs-title-band > .e-con-inner{position:relative;z-index:1;}
.elementor .sccs-title-band::after{content:"";position:absolute;top:50%;right:-64px;inline-size:336px;block-size:336px;transform:translateY(calc(-50% + 28px));background-image:url('https://stcroixcatholic.org/wp-content/uploads/2026/09/sccs-shield-reversed-white-500.png');background-repeat:no-repeat;background-position:center;background-size:contain;opacity:0.14;pointer-events:none;}
@media (max-width:767px){.elementor .sccs-title-band::after{display:none;}}


/* [SCCS-S18-2] 2026-09-23 Home mini cards (BugHerd 135, Craig). The three Home photo tiles are now whole-card links (container html_tag a, class sccs-card sccs-card--mini). They reuse the existing .sccs-card hover above unchanged. This block adds only what that rule cannot give an anchor card: (1) no inherited link underline under the heading, (2) keyboard focus gets exactly the hover treatment, (3) reduced-motion users get no lift or zoom. Scoped to .sccs-card--mini so the Academics cards are untouched. Values copied from the .sccs-card hover rule; no new colours. */
.elementor a.sccs-card--mini,.elementor a.sccs-card--mini:hover,.elementor a.sccs-card--mini:focus-visible{text-decoration:none;}
.elementor a.sccs-card--mini:focus-visible{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,46,86,0.14);border-color:var(--border-strong);}
.elementor a.sccs-card--mini:focus-visible .elementor-widget-image img{transform:scale(1.03);}
@media (prefers-reduced-motion: reduce){.elementor .sccs-card--mini,.elementor .sccs-card--mini .elementor-widget-image img{transition:none;}.elementor .sccs-card--mini:hover,.elementor .sccs-card--mini:focus-visible,.elementor .sccs-card--mini:hover .elementor-widget-image img,.elementor .sccs-card--mini:focus-visible .elementor-widget-image img{transform:none;}}


/* [SCCS-S19-1] 2026-09-23 "Card — Mini" component (post 2632, Craig). Reproduces the S18 mini card (.sccs-card rules + [SCCS-S18-2]) on the component's own local-style classes, which Elementor renders unchanged in every instance on every page: .e-sccsmc1-s = the card link (e-flexbox, tag a), .e-sccsmc2-s = the image, .e-sccsmc3-s = the heading. The component's atomic local styles carry only the documented typed props (padding as dimensions, the resting box-shadow); everything without a documented typed-prop format lives here instead: surface, border, radius, overflow, column flow, image frame, heading type, hover, focus, reduced motion. Values copied from Academics card af7faf3/f70a48c and the S18 rules; colours are kit globals. */
.elementor a.e-sccsmc1-s{display:flex;flex-direction:column;gap:0;padding:0;inline-size:100%;background-color:var(--e-global-color-7034f28);border:1px solid var(--e-global-color-9495ffd);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.elementor .e-sccsmc1-s .e-sccsmc2-s{display:block;inline-size:100%;max-inline-size:100%;block-size:200px;object-fit:cover;transition:transform .2s ease;}
.elementor .e-sccsmc1-s .e-sccsmc3-s{margin:0;text-align:center;font-family:Merriweather,serif;font-size:22px;font-weight:700;line-height:1.3;text-transform:none;color:var(--e-global-color-c9d7fce);}
.elementor a.e-sccsmc1-s:hover{transform:translateY(-2px);}
.elementor a.e-sccsmc1-s:hover .e-sccsmc2-s{transform:scale(1.03);}
.elementor a.e-sccsmc1-s:focus-visible{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,46,86,0.14);border-color:var(--border-strong);}
.elementor a.e-sccsmc1-s:focus-visible .e-sccsmc2-s{transform:scale(1.03);}
@media (prefers-reduced-motion: reduce){.elementor a.e-sccsmc1-s,.elementor .e-sccsmc1-s .e-sccsmc2-s{transition:none;}.elementor a.e-sccsmc1-s:hover,.elementor a.e-sccsmc1-s:focus-visible,.elementor a.e-sccsmc1-s:hover .e-sccsmc2-s,.elementor a.e-sccsmc1-s:focus-visible .e-sccsmc2-s{transform:none;}}

/* [SCCS-S20-1] 2026-09-23 - the 14 former HTML-widget links, now Text Editor widgets (S20). The kit prose-link arm [OEB-M22-P5] (specificity 0,5,1: weight 700, link-accent) outranks the S12 class rules (0,2,1) once these anchors sit inside a Text Editor, and the widget's own link colour control (0,3,1) cannot outrank it either. These .elementor-kit-17s repeat that :not() chain (the S15-3 pattern) to restore the pre-S20 render exactly: card/inline links 600; inline link hover and focus brand-navy-deep; the Sisters link cream on dark with white hover (focus stays navy-deep, as measured before); CTA contact links inherit colour at 600 with white hover and focus. Existing values only. The paragraph margin is neutralised on each widget (paragraph_spacing 0), not here. */
.elementor .elementor-widget-text-editor a.sccs-card-link:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]),.elementor .elementor-widget-text-editor a.sccs-inline-link:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){font-weight:600;}
.elementor .elementor-widget-text-editor.sccs-on-dark a.sccs-inline-link:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){color:var(--surface-grey-warm);}
.elementor .elementor-widget-text-editor a.sccs-inline-link:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):hover,.elementor .elementor-widget-text-editor a.sccs-inline-link:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):focus-visible{color:var(--brand-navy-deep);}
.elementor .elementor-widget-text-editor.sccs-on-dark a.sccs-inline-link:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):hover{color:#FFFFFF;}
.elementor .elementor-widget-text-editor .sccs-cta-contact a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){color:inherit;font-weight:600;}
.elementor .elementor-widget-text-editor .sccs-cta-contact a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):hover,.elementor .elementor-widget-text-editor .sccs-cta-contact a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):focus-visible{color:#FFFFFF;}

/* [SCCS-S22-1] 2026-09-23 - reading-column maximums for the two Home containers that cannot use Elementor's boxed mode (S22 converted the other 52 fixed-width reading columns to boxed mode with their old px as the content width). Hero Copy (e33201e) sits left-aligned in a flex-start column, and boxed mode would centre its inner wrapper; Witness Copy (1ebc339) is a row item beside the quote column, where a full-width boxed outer would change the row's shrink maths. Each is now width 100% in its own control and capped here at its previous fixed width, so 1440 renders as before and narrower screens shrink it instead of overflowing. The Hero Copy rule carries no auto margins so it stays left-aligned. */
.elementor .e-con.sccs-readcol-start-760{max-inline-size:760px;}
.elementor .e-con.sccs-readcol-624{max-inline-size:624px;margin-inline:auto;}


/* [SCCS-S24-1] 2026-09-24 full-screen search: close button (BugHerd 259, Craig). Elementor places the X beside the search field, where it touches the field's border on hover. Moved to the overlay's top-right corner, clear of the field at every width, with a comfortable hit area. Existing tokens only. */
.elementor .elementor-search-form--skin-full_screen .dialog-lightbox-close-button{position:fixed;top:24px;right:24px;inset-inline-start:auto;transform:none;margin:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.elementor .elementor-search-form--skin-full_screen .dialog-lightbox-close-button svg{width:28px;height:28px;}
@media (max-width:767px){.elementor .elementor-search-form--skin-full_screen .dialog-lightbox-close-button{top:16px;right:16px;}}


/* [SCCS-S24-2] 2026-09-24 footer legal bar: Privacy Policy link (Craig). The legal lines are Text Editor widgets since S20, so a link inside them would take the kit's body-copy link colour and underline on the dark footer. These two arms are byte-for-byte clones of the S15-3 Directions arms with the class swapped, so the link matches every other footer link at rest and on hover. */
.elementor .elementor-widget-text-editor.sccs-legal a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]){color:var(--text-inverse-soft);font-weight:500;text-decoration:none;}
.elementor .elementor-widget-text-editor.sccs-legal a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):hover,.elementor .elementor-widget-text-editor.sccs-legal a:not([class*="btn"]):not([class*="e-button"]):not([class*="elementor-button"]):focus-visible{color:#FFFFFF;}/* End custom CSS */