/*--------------------------------------------------------------
# St. Luigi School - Bright Blue & Gold design system
# Loaded last: light, airy, professional. White surfaces,
# vivid blue + gold accents.
--------------------------------------------------------------*/

:root {
  --stl-blue: #1565c0;        /* vivid primary blue */
  --stl-blue-deep: #114a8f;   /* headings / gradients */
  --stl-blue-ink: #16365f;    /* nav + text blue */
  --stl-blue-50: #eef4fc;     /* light blue tint */
  --stl-sky: #f2f7fd;         /* section tint */
  --stl-gold: #c9a24b;
  --stl-gold-bright: #deb761;
  --stl-gold-dark: #a9853b;
  --stl-ivory: #faf8f2;
  --stl-ink: #2a3648;
  --stl-ink-soft: #5a6b82;
  --stl-shadow: 0 10px 30px rgba(16, 58, 110, .08);
  --stl-shadow-lg: 0 18px 44px rgba(16, 58, 110, .14);
}

::selection {
  background: var(--stl-gold);
  color: #ffffff;
}

/* ---------------------------------------------------------------
   Header & navigation: clean white
--------------------------------------------------------------- */
.header {
  --background-color: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid rgba(21, 101, 192, .12);
  box-shadow: 0 2px 18px rgba(16, 58, 110, .06);
}
.header .branding {
  background: rgba(255, 255, 255, .97);
}
.header .topbar {
  background: linear-gradient(90deg, var(--stl-blue-deep), var(--stl-blue));
  border-bottom: none;
}
/* ---------------------------------------------------------------
   Side rail (ERP Login · Admission · Prospectus)
--------------------------------------------------------------- */
.sticky-icon a.book {
  background-color: var(--stl-blue-deep);
  color: #ffffff;
}
.sticky-icon a i.fa-book-open {
  background-color: #ffffff;
  color: var(--stl-blue-deep);
}

/* The rail was a fixed 220px, so "Prospectus" — longer than the other two
   labels — wrapped under its icon. Let each button size to its own label and
   sit flush to the right edge, with a fixed sliver showing at rest. */
@media (min-width: 768px) {
  .sticky-icon {
    width: auto !important;
    align-items: flex-end;
  }
  .sticky-icon a {
    width: max-content;
    max-width: 90vw;
    white-space: nowrap;
    font-size: 18px !important;
    padding: 9px 22px 9px 10px !important;
    transform: translateX(calc(100% - 62px)) !important;
  }
  .sticky-icon a:hover {
    transform: translateX(0) !important;
  }
  .sticky-icon a i,
  .sticky-icon a img {
    margin-right: 14px !important;
    vertical-align: middle;
  }
}

/* On a phone the rail used to sit across the page as three wide slabs of text.
   Shrink it to icon buttons on the edge so it stops covering the content. */
/* The rail's own rules live in a <style> block further down each page, so these
   overrides need !important to win rather than lose on document order. */
@media (max-width: 767.98px) {
  .sticky-icon {
    width: auto !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%);
    gap: 8px;
  }
  .sticky-icon a {
    transform: none !important;
    display: grid !important;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(9, 28, 56, .3);
  }
  .sticky-icon a i {
    margin: 0 !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    font-size: 13px !important;
    background-color: transparent !important;
    color: #ffffff !important;
  }
  .sticky-icon a img {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
  }
  .sticky-icon a:hover i,
  .sticky-icon a:hover img { transform: none !important; }
}

/* Ticker: run it across the whole window. It used to sit inside the centred
   Bootstrap container, so the message was clipped at the container's right
   edge instead of scrolling all the way off screen. */
.header .topbar > .container {
  max-width: 100% !important;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.header .topscroll {
  width: 100%;
  padding: 11px 0;
}
.header .topscroll-content {
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%);
  will-change: left;
}

.topscroll-content, .topscroll-content a {
  color: #ffffff !important;
}
.header .logo h1 {
  color: var(--stl-blue-deep) !important;
}
.mobile-nav-toggle {
  color: var(--stl-blue-ink) !important;
}

/* ---------------------------------------------------------------
   Menus: a small slide and a gold marker as the pointer passes
--------------------------------------------------------------- */
@media (min-width: 1200px) {
  .navmenu .dropdown ul a {
    position: relative;
    display: block;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1),
                color .28s ease, background-color .28s ease;
  }
  /* Gold bar that grows in from the left edge */
  .navmenu .dropdown ul a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--stl-gold), var(--stl-gold-bright));
    transform: translateY(-50%);
    transition: width .28s cubic-bezier(.2, .8, .2, 1);
  }
  .navmenu .dropdown ul li:hover > a,
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul a:focus-visible {
    transform: translateX(12px);
    background-color: rgba(21, 101, 192, .06);
  }
  .navmenu .dropdown ul li:hover > a::before,
  .navmenu .dropdown ul a:hover::before,
  .navmenu .dropdown ul a:focus-visible::before {
    width: 10px;
  }

  /* Top-level items get a gold underline that sweeps out from the middle */
  .navmenu > ul > li > a {
    position: relative;
    transition: color .28s ease;
  }
  .navmenu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--stl-gold), var(--stl-gold-bright));
    transition: left .3s ease, right .3s ease;
  }
  .navmenu > ul > li:hover > a::after,
  .navmenu > ul > li > a:focus-visible::after {
    left: 12px;
    right: 12px;
  }
  /* The chevron nudges down to say "there is more under here" */
  .navmenu .dropdown > a i {
    transition: transform .28s ease;
  }
  .navmenu .dropdown:hover > a i {
    transform: translateY(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navmenu .dropdown ul a,
  .navmenu .dropdown ul a::before,
  .navmenu > ul > li > a::after,
  .navmenu .dropdown > a i { transition: none !important; }
  .navmenu .dropdown ul li:hover > a { transform: none !important; }
}
.scrolled .header {
  box-shadow: 0 6px 24px rgba(16, 58, 110, .12);
}

/* ---------------------------------------------------------------
   Hero: light blue veil, readable text, bright feel
--------------------------------------------------------------- */
.hero .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(13, 52, 102, .62) 0%,
      rgba(13, 52, 102, .28) 52%,
      rgba(13, 52, 102, .10) 100%);
}
.hero .container {
  position: relative;
  z-index: 3;
}
.hero h2 {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 4px 24px rgba(10, 30, 60, .6);
}
.hero h2 span {
  color: var(--stl-gold-bright);
}
.hero p {
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 12px rgba(10, 30, 60, .55);
}

/* Hero buttons: solid gold primary + ghost secondary */
.cta-btn {
  background: linear-gradient(135deg, #dcb765, var(--stl-gold)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .03em;
}
.hero .d-flex .cta-btn + .cta-btn {
  background: rgba(255, 255, 255, .14) !important;
  border: 1.5px solid rgba(255, 255, 255, .85) !important;
  color: #ffffff !important;
  backdrop-filter: blur(4px);
}

/* Swiper controls */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, .6) !important;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--stl-gold-bright) !important;
}
.swiper-button-next, .swiper-button-prev {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Section backgrounds: white and soft tints
--------------------------------------------------------------- */
.school-section,
.testimonial-section {
  background: var(--stl-ivory) !important;
}
.school-section::before {
  background: transparent !important;
}
section.why-us,
#why-us.why-us {
  background: var(--stl-blue-50) !important;
}
.gallery.section {
  background: #ffffff !important;
}
.about {
  background: var(--stl-sky) !important;
}
.about .content p {
  color: var(--stl-ink);
}

/* Serif display headings */
.section-title p,
.useful-info h3,
.content h3 {
  font-family: "Playfair Display", serif !important;
}
.section-title p {
  position: relative;
  padding-bottom: 14px;
  color: var(--stl-blue-deep) !important;
}
.section-title p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--stl-gold), var(--stl-gold-bright));
}
/* Centre the rule wherever the heading itself is centred */
.section-title.text-center p::after,
.text-center .section-title p::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------
   WHO WE ARE lives in index.html's own stylesheet now: an even
   split of introduction and film. Nothing to override from here.
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Why-Us: white cards, gold icons, blue headings
--------------------------------------------------------------- */
.why-us [class*="col-"] {
  background: transparent !important;
}
.why-us .card-item {
  background: #ffffff !important;
  border: 1px solid #dfe9f6 !important;
  border-top: 4px solid var(--stl-gold) !important;
  border-radius: 16px;
  padding: 34px 28px !important;
  height: 100%;
  box-shadow: var(--stl-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.why-us .card-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--stl-shadow-lg);
}
/* Four across on wide screens: slightly tighter padding */
@media (min-width: 1200px) {
  .why-us .card-item {
    padding: 32px 24px !important;
  }
}
.why-us .card-item span,
.why-us .card-item span i {
  color: var(--stl-gold-dark) !important;
  font-size: 2rem;
}
.why-us .card-item h4,
.why-us .card-item h4 a {
  color: var(--stl-blue-deep) !important;
  font-family: "Playfair Display", serif;
  margin-top: 10px;
}
.why-us .card-item p {
  color: var(--stl-ink) !important;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.75;
}
/* Justified text in a narrow column opens ugly rivers, so left-align there */
@media (max-width: 575.98px) {
  .why-us .card-item p {
    text-align: left;
    hyphens: none;
  }
}

/* ---------------------------------------------------------------
   What Sets Us Apart now carries its own bright styling in
   index.html. The overrides that used to lighten the old dark
   version were fighting it, so they are gone.
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Useful Info: bright blue glass over the photo
--------------------------------------------------------------- */
.useful-info-section::before {
  background: linear-gradient(180deg, rgba(17, 62, 120, .82), rgba(21, 82, 156, .78)) !important;
  backdrop-filter: blur(3px);
}
.info-box {
  background: rgba(255, 255, 255, .12) !important;
  border-left: 4px solid var(--stl-gold-bright) !important;
  border-radius: 14px !important;
}
.info-box h3 {
  color: var(--stl-gold-bright) !important;
}

/* ---------------------------------------------------------------
   Joyful / photo-overlay sections: brighter blue
--------------------------------------------------------------- */
.joyful::before, .joyful:before {
  background: rgba(17, 74, 143, .82) !important;
}

/* ---------------------------------------------------------------
   Cards on inner pages
--------------------------------------------------------------- */
.feature-card,
.clubcard,
.why-card,
.school-uniform-card,
.content-box {
  border-radius: 16px !important;
  border: 1px solid #e3ebf5 !important;
  box-shadow: var(--stl-shadow) !important;
  background-color: #ffffff;
}

/* ---------------------------------------------------------------
   Page-title banners: photo stays bright
--------------------------------------------------------------- */
.page-title {
  position: relative;
  isolation: isolate;
}
.page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(13, 52, 102, .34) 0%, rgba(13, 52, 102, .6) 100%);
}
.page-title .container {
  position: relative;
  z-index: 2;
}
.page-title h1 {
  font-family: "Playfair Display", serif !important;
  font-weight: 800;
  color: #ffffff;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  text-shadow: 0 4px 22px rgba(10, 30, 60, .65);
}
.page-title h1::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 70px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--stl-gold), var(--stl-gold-bright));
}
.page-title .breadcrumbs .current {
  color: var(--stl-gold-bright);
}

/* ---------------------------------------------------------------
   Contact: light stage, bright blue info panel, white form
--------------------------------------------------------------- */
.contact-section {
  background: linear-gradient(180deg, var(--stl-blue-50) 0%, #ffffff 100%) !important;
}
.contact-container {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: var(--stl-shadow-lg) !important;
  border: 1px solid #dfe9f6;
}
.contact-info {
  background: linear-gradient(165deg, var(--stl-blue) 0%, var(--stl-blue-deep) 100%) !important;
}
.contact-info h2 {
  font-family: "Playfair Display", serif;
  color: #ffffff !important;
}
.contact-form h2 {
  font-family: "Playfair Display", serif;
  color: var(--stl-blue-deep) !important;
}
.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form textarea:focus {
  border-color: var(--stl-blue) !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, .15);
}
.submit-btn {
  background: linear-gradient(135deg, #dcb765, var(--stl-gold)) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------
   Popup modal
--------------------------------------------------------------- */
.popup-modal {
  padding: 16px;
  box-sizing: border-box;
}
.popup-content {
  border-radius: 16px !important;
  border-top: 4px solid var(--stl-gold);
  /* Fit the whole popup on screen: the box never exceeds the viewport and the
     poster scales down to whatever height is left after the heading/button,
     so tall portrait images show in full with no inner scrollbar. */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px !important;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 22px 22px 20px !important;
  overflow: hidden;
}
.popup-content .close-btn {
  z-index: 1;
  line-height: 1;
}
.popup-title,
.popup-subtitle,
.popup-footer {
  flex: 0 0 auto;
  width: 100%;
}
.popup-title {
  margin: 0 28px 10px !important;
  width: auto;
  font-size: clamp(18px, 4.5vw, 24px) !important;
  line-height: 1.2;
}
.popup-image {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}
.popup-footer {
  margin-top: 14px;
}
.popup-title {
  font-family: "Playfair Display", serif !important;
  color: var(--stl-blue-deep) !important;
  font-weight: 800;
}

/* ---------------------------------------------------------------
   Sticky side buttons (ERP / Admission)
--------------------------------------------------------------- */
.sticky-icon a.Instagram {
  background-color: var(--stl-blue) !important;
}
.sticky-icon a.Youtube {
  background-color: var(--stl-gold) !important;
  color: #ffffff !important;
}
.sticky-icon a.Youtube i {
  background-color: #ffffff;
  color: var(--stl-gold-dark);
}

/* Scroll-top button */
.scroll-top, #myBtn {
  background-color: var(--stl-blue) !important;
  color: #ffffff !important;
}

/* Preloader brand color */
#preloader {
  background: #ffffff !important;
}
#preloader:before, #preloader:after {
  border-color: var(--stl-blue) transparent var(--stl-blue) transparent !important;
}

/* ---------------------------------------------------------------
   Footer: bright blue, gold accent line
--------------------------------------------------------------- */
#footer, footer, .footer {
  background: linear-gradient(160deg, #1a5cae 0%, #113d7e 100%) !important;
  border-top: 3px solid var(--stl-gold);
}
#footer a:hover, footer a:hover {
  color: var(--stl-gold-bright) !important;
}

/* ---------------------------------------------------------------
   Small refinements
--------------------------------------------------------------- */
.stluigi-shadow-effect {
  border-radius: 14px !important;
}
.stluigi-overlay {
  background: rgba(17, 62, 120, .35) !important;
}
iframe {
  border-radius: 10px;
}

/* Mobile: keep hero readable but bright */
@media (max-width: 768px) {
  .hero .swiper-slide::before {
    background: linear-gradient(180deg,
        rgba(13, 52, 102, .6) 0%,
        rgba(13, 52, 102, .45) 55%,
        rgba(13, 52, 102, .62) 100%);
  }
}

/* Fix: template's global white heading color on now-light surfaces */
section#stl-stands-out .stl-h3,
section#stl-stands-out h3 {
  color: var(--stl-blue-deep) !important;
}

/* ---------------------------------------------------------------
   Learning Stages: four colour-coded stage cards
--------------------------------------------------------------- */
.stl-stages {
  background: linear-gradient(180deg, #ffffff 0%, var(--stl-blue-50) 100%);
  padding: 78px 0 86px;
}
.stl-stages .section-title {
  padding-bottom: 34px;
}
/* Cards grow independently when their details are opened */
.stl-stages-row {
  align-items: flex-start;
}
.stl-stages-row > [class*="col-"] {
  transition: width .45s cubic-bezier(.4, 0, .2, 1), max-width .45s cubic-bezier(.4, 0, .2, 1);
}

.stage-card {
  --sc-a: var(--stl-blue-deep);
  --sc-b: var(--stl-blue);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: auto;
  padding: 30px 26px 26px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(155deg, var(--sc-b) 0%, var(--sc-a) 100%);
  box-shadow: 0 16px 38px rgba(16, 40, 78, .18);
  transition: transform .35s ease, box-shadow .35s ease;
}
.stage-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(16, 40, 78, .26);
}
/* Soft light bloom, top-left */
.stage-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70px;
  left: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%);
}
/* Second bloom, bottom-right, to keep the flat fill from looking dead */
.stage-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 70%);
}

.stage-card--foundational { --sc-a: #0e6f5b; --sc-b: #17a184; }
.stage-card--preparatory  { --sc-a: #a97516; --sc-b: #d9a63c; }
.stage-card--middle       { --sc-a: #10508f; --sc-b: #2b7fd1; }
.stage-card--secondary    { --sc-a: #872140; --sc-b: #b93f5e; }

.stage-num {
  position: absolute;
  z-index: -1;
  top: 6px;
  right: 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 5.4rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .16);
  pointer-events: none;
}

.stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .20);
  border: 1px solid rgba(255, 255, 255, .28);
}
.stage-icon i {
  font-size: 1.35rem;
  color: #ffffff;
}

.stage-eyebrow {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.stage-card h3.stage-title {
  margin: 0 0 12px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
.stage-classes {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.stage-summary {
  margin: 0 0 20px;
  font-size: .96rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .95);
}

/* Expandable detail */
.stage-more {
  border-top: 1px solid rgba(255, 255, 255, .26);
  padding-top: 14px;
}
.stage-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 4px 0;
}
.stage-more > summary::-webkit-details-marker { display: none; }
.stage-more > summary::marker { content: ""; }
.stage-more > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.stage-more[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.stage-more > summary:hover {
  color: rgba(255, 255, 255, .8);
}
.stage-more > summary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The body is a 1-row grid so its height can animate from 0fr to 1fr
   while the card is widening; the inner wrapper does the clipping. */
.stage-more__body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.stage-more.js > .stage-more__body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.stage-more.js.is-open > .stage-more__body {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), opacity .35s ease .1s;
}
.stage-more__inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 6px;
}
.stage-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* An opened card takes the full row so its detail can breathe in columns.
   Browsers without :has() simply keep the narrow single-column version. */
@media (min-width: 768px) {
  .stl-stages-row > [class*="col-"]:has(> .stage-card > details[open]) {
    width: 100%;
    max-width: 100%;
  }
  .stl-stages-row > [class*="col-"]:has(> .stage-card > details[open]) .stage-more__inner {
    columns: 2;
    column-gap: 42px;
    padding-top: 10px;
  }
  .stl-stages-row > [class*="col-"]:has(> .stage-card > details[open]) .stage-card {
    padding: 34px 34px 30px;
  }
  .stl-stages-row > [class*="col-"]:has(> .stage-card > details[open]) .stage-summary {
    max-width: 66ch;
  }
}
@media (min-width: 1200px) {
  .stl-stages-row > [class*="col-"]:has(> .stage-card > details[open]) .stage-more__inner {
    columns: 3;
  }
}
.stage-more__body h4 {
  margin: 26px 0 10px;
  font-family: var(--default-font);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.stage-more__body h4:first-child { margin-top: 6px; }
.stage-more__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.stage-more__body li {
  position: relative;
  padding: 0 0 0 20px;
  margin-bottom: 8px;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .94);
}
.stage-more__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
}

@media (prefers-reduced-motion: reduce) {
  .stage-card,
  .stage-more > summary::after,
  .stage-more__body,
  .stl-stages-row > [class*="col-"] {
    transition: none;
  }
  .stage-card:hover { transform: none; }
}

@media (max-width: 575.98px) {
  .stl-stages { padding: 56px 0 62px; }
  .stage-card { padding: 26px 22px 24px; border-radius: 18px; }
  .stage-num { font-size: 4.4rem; }
}

/* ---------------------------------------------------------------
   "Joyful & Confident" curriculum band: photo backdrop needs a
   deeper scrim so the white body copy stays crisp.
--------------------------------------------------------------- */
.joyful {
  background-size: cover !important;
}
.joyful:before {
  background: linear-gradient(115deg,
      rgba(8, 26, 52, .93) 0%,
      rgba(12, 44, 88, .88) 50%,
      rgba(8, 26, 52, .93) 100%) !important;
}

/* ---------------------------------------------------------------
   Founder section — St. Luigi Scrosoppi & the Sisters of Providence
   Photo background stays visible, but the copy sits on its own
   readable glass panel instead of directly on the crowd photo.
--------------------------------------------------------------- */
.events {
  padding: 90px 0 !important;
}

/* Softened photo backdrop: texture, not competing detail */
.events .slider-bg {
  filter: blur(3px) saturate(.85);
  transform: scale(1.05);
}

/* Directional scrim: lighter on the portrait side, deep on the text side */
.events:before {
  background: linear-gradient(100deg,
      rgba(9, 28, 56, .74) 0%,
      rgba(9, 28, 56, .80) 34%,
      rgba(9, 28, 56, .90) 60%,
      rgba(9, 28, 56, .94) 100%) !important;
}

/* The portrait now arrives unframed, so the frame is built here: a gold
   double border, a deep mount, and a small name plate along the foot. */
.stl-founder-frame {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 14px 14px 0;
  background: linear-gradient(150deg, #d9b46a 0%, #b8892f 42%, #e2c37f 68%, #a9782a 100%);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .28) inset,
    0 26px 54px rgba(0, 0, 0, .5);
}
/* Thin inner rule, the way a real frame sits inside its moulding */
.stl-founder-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 6px;
  pointer-events: none;
}

.stl-founder-portrait {
  display: block;
  width: 100%;
  height: auto !important;
  border-radius: 3px;
  background: #cdc7bb;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45) inset, 0 3px 12px rgba(0, 0, 0, .35);
}

.stl-founder-frame figcaption {
  padding: 12px 10px 14px;
  text-align: center;
  color: #2c1e05;
  line-height: 1.35;
}
.stl-founder-frame figcaption strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.08rem;
  letter-spacing: .02em;
}
.stl-founder-frame figcaption span {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(44, 30, 5, .78);
}

.stl-founder-card {
  background: linear-gradient(158deg, rgba(13, 38, 74, .72) 0%, rgba(8, 24, 48, .84) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  border: 1px solid rgba(201, 162, 75, .30);
  border-radius: 16px;
  padding: 40px 42px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .38);
}

.events .event-item .stl-founder-card h3.stl-founder-title,
.stl-founder-section .stl-founder-card h3.stl-founder-title {
  color: var(--stl-gold-bright) !important;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.25rem;
  line-height: 1.22;
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* When no "St. Luigi School" line follows the title, add a gold rule instead */
.stl-founder-card h3.stl-founder-title + p {
  margin-top: 26px;
}
.stl-founder-card:not(:has(.price)) h3.stl-founder-title::after {
  content: "";
  display: block;
  width: 88px;
  height: 3px;
  border-radius: 2px;
  background: var(--stl-gold);
  margin-top: 18px;
}

.stl-founder-card .price {
  margin-bottom: 8px !important;
}
.stl-founder-card .price p {
  margin: 0;
}
.stl-founder-card .price span {
  display: inline-block;
  font-family: var(--default-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 2px solid var(--stl-gold) !important;
  padding-bottom: 5px;
}

.stl-founder-sub {
  position: relative;
  color: var(--stl-blue-deep);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  margin: 30px 0 14px;
  padding-left: 16px;
}
.stl-founder-sub:first-of-type {
  margin-top: 26px;
}
/* On the dark photo panel the sub-headings turn gold */
.events .stl-founder-sub,
.stl-founder-section .stl-founder-sub {
  color: var(--stl-gold-bright);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.stl-founder-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 4px;
  border-radius: 3px;
  background: var(--stl-gold);
}

.stl-founder-card p {
  color: rgba(255, 255, 255, .95);
  font-size: 1.02rem;
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-word;
  margin-bottom: 16px;
}
.stl-founder-card p:last-child {
  margin-bottom: 0;
}

/* Narrow columns: justified text opens ugly word gaps, so left-align */
@media (max-width: 1199.98px) {
  .stl-founder-card p {
    text-align: left;
  }
}

@media (max-width: 991.98px) {
  .stl-founder-frame {
    max-width: 340px;
  }
  .stl-founder-card {
    padding: 32px 28px;
  }
  .events .event-item .stl-founder-card h3.stl-founder-title,
  .stl-founder-section .stl-founder-card h3.stl-founder-title {
    font-size: 1.9rem;
  }
}

@media (max-width: 575.98px) {
  .events {
    padding: 60px 0 !important;
  }
  .stl-founder-frame {
    max-width: 290px;
    padding: 11px 11px 0;
  }
  .stl-founder-frame figcaption { padding: 10px 8px 12px; }
  .stl-founder-card {
    padding: 24px 20px;
    border-radius: 14px;
  }
  .events .event-item .stl-founder-card h3.stl-founder-title,
  .stl-founder-section .stl-founder-card h3.stl-founder-title {
    font-size: 1.55rem;
  }
  .stl-founder-sub {
    font-size: 1.25rem;
  }
  .stl-founder-card p {
    font-size: .98rem;
    line-height: 1.8;
  }
}

/* ---------------------------------------------------------------
   Founder panel as a full section of its own
   (sistersofprovidence.html) — same card and frame as the homepage,
   on its own photographic backdrop.
--------------------------------------------------------------- */
.stl-founder-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px 0;
  background: #091c38;
}
.stl-founder-section .stl-founder-bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px) saturate(.85);
  transform: scale(1.05);
}
.stl-founder-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(9, 28, 56, .74) 0%,
      rgba(9, 28, 56, .80) 34%,
      rgba(9, 28, 56, .90) 60%,
      rgba(9, 28, 56, .94) 100%);
}
.stl-founder-section .stl-founder-card .price span {
  display: inline-block;
  font-family: var(--default-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 2px solid var(--stl-gold) !important;
  padding-bottom: 5px;
}
@media (max-width: 575.98px) {
  .stl-founder-section { padding: 60px 0; }
}

/* ---------------------------------------------------------------
   "Read more" link on the homepage founder panel
--------------------------------------------------------------- */
.stl-readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, .55);
  background: linear-gradient(100deg, #b8892f, #d7ae55);
  color: #ffffff !important;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .32);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.stl-readmore i,
.stl-readmore svg { transition: transform .25s ease; }
.stl-readmore:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .4);
}
.stl-readmore:hover i,
.stl-readmore:hover svg { transform: translateX(4px); }
.stl-readmore:focus-visible {
  outline: 2px solid var(--stl-gold-bright);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .stl-readmore, .stl-readmore i, .stl-readmore svg { transition: none; }
  .stl-readmore:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Custom mouse cursor (assets/js/stl-cursor.js)
   Only active on mouse devices — the .stl-has-cursor class is added
   by the script, so touch screens never lose their normal cursor.
--------------------------------------------------------------- */
html.stl-has-cursor,
html.stl-has-cursor body,
html.stl-has-cursor a,
html.stl-has-cursor button,
html.stl-has-cursor summary,
html.stl-has-cursor label,
html.stl-has-cursor [role="button"],
html.stl-has-cursor :fullscreen,
html.stl-has-cursor :fullscreen * {
  cursor: none;
}
/* Text fields keep the normal I-beam; the custom cursor hides there. */
html.stl-has-cursor input,
html.stl-has-cursor textarea,
html.stl-has-cursor select,
html.stl-has-cursor [contenteditable="true"] {
  cursor: auto;
}
.stl-cursor-dot,
.stl-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
  transition: opacity .25s ease, width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1),
              background-color .3s ease, border-color .3s ease;
}
.stl-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--stl-gold);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 8px rgba(16, 40, 78, .35);
}
.stl-cursor-ring {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--stl-blue);
  background: rgba(21, 101, 192, .06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}
.stl-cursor-dot.is-visible,
.stl-cursor-ring.is-visible { opacity: 1; }
html.stl-cursor-text .stl-cursor-dot,
html.stl-cursor-text .stl-cursor-ring { opacity: 0; }

/* Over a link or button: the ring swells and warms to gold. */
.stl-cursor-ring.is-hover {
  width: 60px;
  height: 60px;
  border-color: var(--stl-gold);
  background: rgba(201, 162, 75, .14);
}
.stl-cursor-dot.is-hover { width: 6px; height: 6px; }
/* While pressing: a quick squeeze. */
.stl-cursor-ring.is-down { width: 28px; height: 28px; }
.stl-cursor-ring.is-hover.is-down { width: 48px; height: 48px; }