.elementor-kit-6{--e-global-color-primary:#0B8A45;--e-global-color-secondary:#054D28;--e-global-color-text:#26322B;--e-global-color-accent:#0D9A4C;--e-global-color-spswhite:#FFFFFF;--e-global-color-spsmint:#E4F4EA;--e-global-color-spssage:#E1F2E7;--e-global-color-spsink:#14211A;--e-global-typography-primary-font-family:"Nunito";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Nunito";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Nunito";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Nunito";--e-global-typography-accent-font-weight:600;color:#26322B;font-family:"Nunito", Sans-serif;font-size:18px;font-weight:400;line-height:1.6em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1366px;}.e-con{--container-max-width:1366px;}.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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --sps-green:#087A3F; --sps-green-dark:#066333; --sps-green-deep:#054D28; --sps-sage:#E1F2E7; --sps-cream:#E4F4EA; --sps-white:#FFFFFF; --sps-ink:#14211A; --sps-muted:#5A665E; --sps-body:#26322B; --sps-line:rgba(20,33,26,0.16); --sps-line-light:rgba(255,255,255,0.22); --sps-font:Nunito; --sps-max:1366px; --sps-gutter:clamp(22px, 4.4vw, 60px); --sps-section-y:clamp(80px, 9vw, 112px); --sps-h2:clamp(30px, 3.9vw, 44px); --sps-radius:6px; --sps-text-fine:14px; --sps-text-small:15px; --sps-text-ui:16px; --sps-text-menu-sub:17px; --sps-text-body:18px; --sps-text-body-lg:19px; --sps-text-lede:20px; --sps-text-intro:22px; --sps-text-xl:24px; --sps-h4:25px; --sps-h3:28px; --sps-h-value:38px; --sps-h-value-mobile:44px; --sps-h2-alt:clamp(36px, 5vw, 56px); --sps-h-statement:clamp(28px, 4.6vw, 46px); --sps-h-page:clamp(34px, 5.2vw, 60px); --sps-h-cta:clamp(42px, 8vw, 80px); --sps-h-display:clamp(38px, 7vw, 66px); --sps-on-dark-strong:rgba(255,255,255,0.94); --sps-on-dark:rgba(255,255,255,0.84); --sps-on-dark-muted:rgba(255,255,255,0.75); --sps-on-dark-faint:rgba(255,255,255,0.5); --sps-on-dark-tint:rgba(255,255,255,0.16); --sps-shade-strong:rgba(0,0,0,0.66); --sps-shade-mid:rgba(0,0,0,0.55); --sps-shade-soft:rgba(0,0,0,0.42); --sps-shade-light:rgba(0,0,0,0.3); --sps-shade-faint:rgba(0,0,0,0.1); --sps-shade-none:rgba(0,0,0,0); --sps-text-shadow:rgba(0,0,0,0.35); --sps-shadow:rgba(1,30,15,0.22); --sps-radius-md:8px; --sps-radius-lg:12px; --sps-radius-card:14px; --sps-radius-pill:999px; --sps-h-quote:clamp(24px, 3.7vw, 36px); --sps-h-statement-sm:clamp(24px, 3.4vw, 32px); --sps-h5:21px; --sps-green-band:#0B8A45; --sps-green-bright:#0D9A4C; --sps-radius-xl:24px; --sps-radius-2xl:28px; --sps-logo-header:112px; --sps-logo-header-solid:68px; --sps-header-h:136px; --sps-header-h-solid:88px; --sps-h-welcome:clamp(24px, 2.8vw, 34px); --sps-h-cta-card:clamp(30px, 3.9vw, 46px); --sps-h-greeting:clamp(26px, 3vw, 34px); --sps-h-statement-card:clamp(22px, 3vw, 28px); --sps-h-photo-card:clamp(25px, 2.4vw, 30px); }
/* Start custom CSS *//* St Patrick's shared styles for parts Elementor's atomic widgets can't style from the panel.
   Colours and text sizes come from the global variables (Elementor > Variables). */

/* ---- Text on green bands: headings and paragraphs take the band's white instead of the site-wide default colours ---- */
.elementor .sps-bg-green h1, .elementor .sps-bg-green h2, .elementor .sps-bg-green h3, .elementor .sps-bg-green h4, .elementor .sps-bg-green p, .elementor .sps-band-slim p { color: inherit; }
/* ...except inside a white card sitting on a band */
.elementor .sps-bg-green .sps-split-card h2 { color: var(--sps-green-bright); }
.elementor .sps-bg-green .sps-split-card p { color: var(--sps-body); }
.elementor .sps-bg-green .sps-login-card h3 { color: var(--sps-green-band); }
.elementor .sps-bg-green .sps-step-card h3 { color: var(--sps-green-band); }
.elementor .sps-bg-green .sps-step-card p { color: var(--sps-body); }
/* Arrow links on a green band */
.elementor .sps-bg-green .sps-explore-list { border-bottom-color: var(--sps-line-light); }
.elementor .sps-bg-green .sps-explore-link, .elementor .sps-bg-green .sps-explore-link:hover, .elementor .sps-bg-green .sps-explore-link:focus-visible { color: var(--sps-white); border-top-color: var(--sps-line-light); }

/* ---- SPS Page Hero: the intro line is optional. Crop: each page sets --hero-pos on .sps-page-hero in its Page Settings > Custom CSS. Add --hero-pos-phone to crop phones differently ---- */
.elementor .sps-page-lede:empty { display: none; }
/* The notch takes the colour of the section directly under the hero */
.elementor .sps-page-hero:has(+ .sps-bg-green) .sps-page-notch, .elementor .sps-page-hero:has(+ .sps-band-slim) .sps-page-notch { background-color: var(--sps-green-band); }
.elementor .sps-page-hero:has(+ .sps-bg-cream) .sps-page-notch { background-color: var(--sps-cream); }

/* ---- Phones: announcement bar scrolls away and the green header sticks to the top ---- */
@media (max-width: 767px) {
  html body:has(.sps-hero, .sps-page-hero):not(.elementor-editor-active) .elementor-location-header { position: static; display: contents; }
  html body:has(.sps-hero, .sps-page-hero) .sps-header { display: contents; animation: none; }
  html body:has(.sps-hero, .sps-page-hero):not(.elementor-editor-active) .sps-announce { border-bottom: 1px solid rgba(255,255,255,.35); }
  html body .elementor .sps-header-inner { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; background-color: var(--sps-green-band); box-shadow: 0 6px 20px rgba(0,0,0,.12); }

  /* Heading sized so each sentence of the homepage heading stays on one line */
  html body .elementor .sps-hero-title, html body .elementor .sps-page-title { font-size: min(8.6vw, 34px); line-height: 1.05; text-shadow: none; }
  html body .elementor .sps-hero-lead, html body .elementor .sps-page-lede { font-weight: 500; text-shadow: none; }

  /* Homepage hero: its intro is the longest on the site, so the words sit in a white card overlapping the bottom of the photo. To change the photo's height or the overlap, change 72vw and 40px */
  html body .elementor .sps-hero { background-color: var(--sps-green-band); }
  html body .elementor .sps-hero > .sps-abs-fill { height: 72vw; inset-block-end: auto; }
  html body .elementor .sps-hero > .sps-hero-overlay { height: 72vw; background-image: none; }
  html body .elementor .sps-hero > .sps-hero-content { width: auto; max-width: none; margin: calc(72vw - 40px) 16px 0; padding: 24px 22px 26px; background-color: var(--sps-white); border-radius: var(--sps-radius-xl); box-shadow: 0 12px 28px rgba(3,44,23,.2); }
  html body .elementor .sps-hero-title { color: var(--sps-green-bright); }
  html body .elementor .sps-hero-lead { color: var(--sps-body); }
  /* White buttons don't show on the white card */
  html body .elementor .sps-hero .sps-btn-light { background-color: var(--sps-green-band); border-color: var(--sps-green-band); color: var(--sps-white); }
  html body .elementor .sps-hero .sps-btn-outline { background-color: transparent; border-color: var(--sps-green-band); color: var(--sps-green-band); }
  html body .elementor .sps-hero > .sps-hero-notch { display: none; }

  /* Other pages: white words over the photo with a dark fade behind them. Keep faces in the top half using --hero-pos-phone. To change the photo's height, change 125vw */
  html body .elementor .sps-page-hero { min-height: 125vw; justify-content: flex-end; }
  html body .elementor .sps-page-hero > .sps-page-hero-overlay { background-image: linear-gradient(0deg, rgba(3,28,15,.86) 0, rgba(3,28,15,.64) 40%, rgba(3,28,15,0) 72%); }
  html body .elementor .sps-page-hero > .sps-page-hero-content { padding-block: 32px 52px; }
  html body .elementor .sps-page-hero .sps-pos-page-hero { object-position: var(--hero-pos-phone, var(--hero-pos, 50% 40%)); }

  .elementor .sps-readmore summary.e-accordion-item-header-base { padding: 10px 0; }
}

/* ---- Phones and tablets: the full-screen menu lines up with the header at the top of the screen, so the bar steps aside while it's open ---- */
@media (max-width: 1024px) {
  html body:has(.elementor-menu-toggle.elementor-active):not(.elementor-editor-active) .sps-announce { display: none; }
}

/* ---- Announcement bar on desktop: the whole header slides up as the page scrolls, taking the bar off the top of the screen. --sps-bar-h is the bar's height, so change it if the bar's wording ever wraps to two lines ---- */
@media (min-width: 1025px) {
  @supports (animation-timeline: scroll()) {
    body:has(.sps-hero, .sps-page-hero):not(.elementor-editor-active) .elementor-location-header { --sps-bar-h: 47px; animation: sps-bar-away linear both; animation-timeline: scroll(root); animation-range: 0 47px; }
  }
}
@keyframes sps-bar-away { to { transform: translateY(calc(-1 * var(--sps-bar-h))); } }

/* ---- SPS Value Card: the photo is optional. With none, the image area is hidden and the card gets top padding ---- */
.elementor .sps-value-card:not(:has(img[src])) { padding-top: 30px; }
.elementor .sps-value-card:not(:has(img[src])) .sps-value-media { display: none; }

/* ---- SPS Explore Card: the page links are a plain bulleted list in the Paragraph; this turns it into arrow rows ---- */
.sps-explore-items ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sps-explore-items li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(8,122,63,.14); font-size: var(--sps-text-menu-sub); font-weight: 600; color: var(--sps-ink); text-decoration: none; transition: color .2s; }
.sps-explore-items li a::after { content: '\2192'; font-weight: 400; color: var(--sps-green-band); }
.sps-explore-items li a:hover { color: var(--sps-green-band); }
.sps-explore-title a { color: inherit; text-decoration: none; }
.sps-explore-media img { transition: transform .4s ease; }
.sps-explore-card:hover .sps-explore-media img { transform: scale(1.04); }

/* ---- SPS Document Card: the pill brightens when the card is hovered ---- */
.elementor .sps-doc-card:hover .sps-doc-pill { background-color: var(--sps-green-bright); }

/* ---- SPS Subject Card: the extra link is optional. It stays hidden until it's given a real link (not #). The card fills its grid slot ---- */
.elementor .sps-subject-link[href="#"] { display: none; }
.elementor .sps-subject-slot > * { width: 100%; }

/* ---- The bold opening line of the goal panel on How We Teach ---- */
.sps-goal strong { display: block; margin-bottom: 6px; font-size: var(--sps-h4); font-weight: 800; letter-spacing: -.01em; color: var(--sps-green-bright); }

/* ---- Read-more toggle (Accordion widget with the sps-readmore class) ---- */
/* The accordion fills the spare space at the bottom of its card. Inside it the item is flipped so the revealed text
   sits at the top (directly under the teaser) and the "Read more" toggle stays pinned to the bottom of the card.
   Because the text never moves, the open/close animation runs in one direction instead of jumping.
   Browsers that can't lay out <details> as flex simply show the text below the toggle instead. */
.elementor .sps-readmore details.e-con { display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: flex-start; flex: 1 1 auto; }
.elementor .sps-readmore summary.e-accordion-item-header-base { display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; width: auto; padding: 2px 0; list-style: none; cursor: pointer; font-family: var(--sps-font); font-size: var(--sps-text-small); font-weight: 600; line-height: 1.3; color: var(--sps-green); }
.elementor .sps-readmore summary.e-accordion-item-header-base::-webkit-details-marker { display: none; }
.elementor .sps-readmore summary.e-accordion-item-header-base::marker { content: ''; }
.elementor .sps-readmore summary.e-accordion-item-header-base > .e-con { width: auto; }
.elementor .sps-readmore summary.e-accordion-item-header-base::before { content: '+'; position: static; inset: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--sps-green); border-radius: 50%; font-size: 14px; font-weight: 400; line-height: 1; color: var(--sps-green); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.elementor .sps-readmore details[open] > summary.e-accordion-item-header-base::before { transform: rotate(45deg); }
.elementor .sps-readmore summary.e-accordion-item-header-base:focus-visible { outline: 2px solid var(--sps-green); outline-offset: 3px; border-radius: 4px; }
.elementor .sps-readmore .e-accordion-item-content-base { padding: 0 0 16px; }
.elementor .sps-readmore .e-accordion-item-content-base > :last-child { margin-bottom: 0; }

/* ---- FAQ list (Accordion widget with the sps-faq class): divided question rows with a + that turns to x ---- */
.elementor .sps-faq > details.e-con { border-top: 1px solid var(--sps-line); }
.elementor .sps-faq summary.e-accordion-item-header-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; font-family: var(--sps-font); font-size: var(--sps-text-body-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--sps-ink); text-align: left; }
.elementor .sps-faq summary.e-accordion-item-header-base::-webkit-details-marker { display: none; }
.elementor .sps-faq summary.e-accordion-item-header-base::marker { content: ''; }
.elementor .sps-faq summary.e-accordion-item-header-base::after { content: '+'; position: static; inset: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--sps-green); border-radius: 50%; font-size: 15px; font-weight: 400; line-height: 1; color: var(--sps-green); transition: transform .25s cubic-bezier(.4,0,.2,1); }
.elementor .sps-faq details[open] > summary.e-accordion-item-header-base::after { transform: rotate(45deg); }
.elementor .sps-faq summary.e-accordion-item-header-base:focus-visible { outline: 2px solid var(--sps-green); outline-offset: 3px; border-radius: 4px; }
.elementor .sps-faq .e-accordion-item-content-base { padding: 0 0 8px; }
@media (min-width: 1025px) { .elementor .sps-faq > details.e-con:nth-last-child(-n+2), .sps-step-list > .sps-step:nth-last-child(-n+2) { border-bottom: 1px solid var(--sps-line); } }
@media (max-width: 1024px) { .elementor .sps-faq > details.e-con:last-child, .sps-step-list > .sps-step:last-child { border-bottom: 1px solid var(--sps-line); } }

/* ---- Bullet lists with the crest's diamond marker (Paragraph widget with the sps-point-list class) ---- */
.sps-point-list { display: block; margin: 4px 0 0; font-size: var(--sps-text-body); line-height: 1.5; color: var(--sps-body); }
.sps-point-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sps-point-list li { position: relative; padding-left: 26px; }
.sps-point-list li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; background: var(--sps-green-bright); transform: rotate(45deg); }
@media (min-width: 700px) { .sps-point-list-wide ul { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* ---- Links inside running text ---- */
.sps-body-text a, .sps-prose-text a, .sps-faq-answer a, .sps-first a, .sps-split-text a, .sps-letter-first a, .sps-split-card-text a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--sps-line); text-underline-offset: 3px; }
.sps-body-text a:hover, .sps-prose-text a:hover, .sps-faq-answer a:hover, .sps-first a:hover, .sps-split-text a:hover, .sps-letter-first a:hover, .sps-split-card-text a:hover { color: var(--sps-green); text-decoration-color: currentColor; }
.sps-motto strong { color: var(--sps-green); }

/* ---- SPS Person component: every field is optional ---- */
/* A person with no photo, role, note or email simply leaves that part out.
   (Selectors start with `.elementor .sps-person` so they outrank the widgets' own display rules.) */
.elementor .sps-person .sps-avatar:not([src]), .elementor .sps-person .sps-avatar[src=""] { display: none; }
.elementor .sps-person .sps-person-role:empty, .elementor .sps-person .sps-person-meta:empty, .elementor .sps-person .sps-person-email:empty { display: none; }
/* Cards are mint on white sections and white on mint sections. Text-only cards line up at the top. */
.elementor .sps-bg-cream .sps-person { background-color: var(--sps-white); box-shadow: 0 8px 22px rgba(8,122,63,.08), 0 1px 0 rgba(8,122,63,.06); }
.elementor .sps-person:not(:has(img[src])) { align-items: flex-start; padding: 20px 22px; }

@media (prefers-reduced-motion: reduce) { .elementor .sps-readmore summary.e-accordion-item-header-base::before, .elementor .sps-faq summary.e-accordion-item-header-base::after { transition: none; } .sps-explore-media img { transition: none; } }/* End custom CSS */