/* EPSE PLAYFUL SECTION THEME v2 — colorful, varied, readable & responsive */
:root{
  --epse-blue:#1268d6; --epse-navy:#123b73; --epse-sky:#e8f8ff;
  --epse-yellow:#ffe18a; --epse-orange:#ff9c35; --epse-green:#75d99b;
  --epse-pink:#ffb3c8; --epse-purple:#c8b7ff; --epse-ink:#17324d;
}
html{scroll-behavior:smooth}
body.epse-page{overflow-x:hidden;color:var(--epse-ink)}

/* Every section gets its own visual personality rather than one repeated background. */
body.epse-page section:not(.hero-slider):not(.counter-section){
  position:relative; isolation:isolate; overflow:hidden;
  padding:78px 0!important; border:0!important;
  background-color:#fff!important;
}
body.epse-page section:not(.hero-slider):not(.counter-section)::before,
body.epse-page section:not(.hero-slider):not(.counter-section)::after{
  content:""; position:absolute; pointer-events:none; z-index:-1;
}
/* alternating palettes */
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(1){
  background:linear-gradient(180deg,#fff 0%,#fffaf0 100%)!important;
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(1)::before{
  width:230px;height:230px;right:-70px;top:-80px;border-radius:50%;
  background:radial-gradient(circle,#ffe18a 0 18%,#ffd45b 19% 28%,transparent 29%);
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(2){
  background:linear-gradient(180deg,#eaf8ff 0%,#f7fcff 100%)!important;
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(2)::before{
  width:280px;height:150px;left:-80px;top:18px;border-radius:50%;
  background:radial-gradient(circle at 55% 50%,#bfeaff 0 42%,transparent 43%);
  transform:rotate(-12deg);
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(3){
  background:linear-gradient(180deg,#fff 0%,#f4efff 100%)!important;
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(3)::after{
  width:210px;height:210px;right:-70px;bottom:-85px;border-radius:50%;
  border:28px solid rgba(200,183,255,.65);
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(4){
  background:linear-gradient(180deg,#f0fff7 0%,#fff 100%)!important;
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(4)::before{
  width:170px;height:170px;left:-65px;bottom:-65px;border-radius:50%;
  background:radial-gradient(circle,#baf0cc 0 45%,transparent 46%);
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(5){
  background:linear-gradient(180deg,#fff9e8 0%,#fff 100%)!important;
}
body.epse-page section:not(.hero-slider):not(.counter-section):nth-of-type(5)::after{
  width:250px;height:130px;right:-60px;top:-30px;border-radius:50%;
  background:linear-gradient(135deg,transparent 45%,rgba(255,179,200,.55) 46% 58%,transparent 59%);
}

/* Small hand-drawn-looking corner accents, positioned behind content. */
body.epse-page section:not(.hero-slider):not(.counter-section) > .container,
body.epse-page section:not(.hero-slider):not(.counter-section) > main{position:relative;z-index:2}
body.epse-page section:not(.hero-slider):not(.counter-section) .section-title{position:relative;display:inline-block}
body.epse-page section:not(.hero-slider):not(.counter-section) .section-title::after{
  background:linear-gradient(90deg,var(--epse-blue),var(--epse-orange),var(--epse-green))!important;
  border-radius:99px;height:5px!important;width:74px!important;
}

/* Cards use varied accent tops so a long page does not feel cloned. */
body.epse-page .card,body.epse-page .feature-card,body.epse-page .message-card,
body.epse-page .date-card,body.epse-page .step-card,body.epse-page .counter-card{
  border-radius:24px!important; border:1px solid rgba(18,59,115,.09)!important;
  box-shadow:0 12px 32px rgba(18,59,115,.09)!important;
}
body.epse-page .card,body.epse-page .feature-card,body.epse-page .message-card,
body.epse-page .date-card,body.epse-page .step-card{background:rgba(255,255,255,.94)!important}
body.epse-page .card:nth-child(4n+1),body.epse-page .feature-card:nth-child(4n+1){border-top:5px solid #62b8ff!important}
body.epse-page .card:nth-child(4n+2),body.epse-page .feature-card:nth-child(4n+2){border-top:5px solid #ffd05a!important}
body.epse-page .card:nth-child(4n+3),body.epse-page .feature-card:nth-child(4n+3){border-top:5px solid #79d69a!important}
body.epse-page .card:nth-child(4n),body.epse-page .feature-card:nth-child(4n){border-top:5px solid #c0adff!important}
body.epse-page .card:hover,body.epse-page .feature-card:hover,body.epse-page .message-card:hover,
body.epse-page .date-card:hover,body.epse-page .step-card:hover{
  transform:translateY(-7px); box-shadow:0 18px 38px rgba(18,104,214,.14)!important;
}

/* Icons remain clear: colored circular badges with white/blue contrast. */
body.epse-page .feature-icon,body.epse-page .highlight-icon,body.epse-page .step-number{
  border-radius:50%!important; display:grid; place-items:center; flex:0 0 auto;
}
body.epse-page .feature-icon{background:#e8f5ff!important;color:var(--epse-blue)!important}
body.epse-page .highlight-icon{color:var(--epse-orange)!important}
body.epse-page .step-number{background:var(--epse-blue)!important;color:#fff!important}

/* Internal page banner: cloud-like, airy, and distinct from homepage hero. */
body.epse-page .page-banner{
  position:relative; isolation:isolate; overflow:hidden; margin-top:82px;
  padding:74px 0 66px!important;
  background:linear-gradient(120deg,#dff6ff 0%,#fff7df 52%,#f1eaff 100%)!important;
}
body.epse-page .page-banner::before{content:"";position:absolute;z-index:-1;left:4%;top:25px;width:150px;height:55px;border-radius:60px;background:#fff;box-shadow:55px -18px 0 -8px #fff;opacity:.9}
body.epse-page .page-banner::after{content:"✦";position:absolute;right:7%;bottom:20px;font-size:3rem;color:#ffbd36;transform:rotate(12deg)}
body.epse-page .page-banner h1{color:var(--epse-navy)!important;text-shadow:0 2px #fff}

/* Homepage hero keeps text on a dark readable panel and adds colorful atmosphere. */
body.epse-page .hero-slider{margin-top:30px;min-height:650px!important;background:#cfeeff;position:relative;isolation:isolate}
body.epse-page .hero-slider .slide-overlay{background:linear-gradient(90deg,rgba(7,45,91,.86) 0%,rgba(7,45,91,.66) 43%,rgba(7,45,91,.15) 76%,rgba(7,45,91,.03) 100%)!important}
body.epse-page .hero-slider .main-title{color:#fff!important;text-shadow:0 3px 12px rgba(0,0,0,.38)}
body.epse-page .hero-slider .hero-content p{color:#fff!important;text-shadow:0 2px 7px rgba(0,0,0,.3)}
body.epse-page .hero-slider .btn-primary{background:var(--epse-orange)!important;border-color:var(--epse-orange)!important;color:#17324d!important}
body.epse-page .hero-slider .btn-outline{background:#fff!important;color:var(--epse-blue)!important;border-color:#fff!important}
body.epse-page .hero-slider .slider-arrow{background:rgba(255,255,255,.94)!important;color:var(--epse-blue)!important}

/* Stats: bright school-board feel, distinct from white content sections. */
body.epse-page .counter-section{
  position:relative;isolation:isolate;overflow:hidden;padding:70px 0!important;
  background:linear-gradient(135deg,#123b73 0%,#1268d6 55%,#3b91e9 100%)!important;
}
body.epse-page .counter-section::before{content:"";position:absolute;left:-50px;bottom:-80px;width:260px;height:180px;border-radius:50%;background:#75d99b;opacity:.28;z-index:-1}
body.epse-page .counter-section::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:180px;border-radius:50%;background:#ffe18a;opacity:.25;z-index:-1}
body.epse-page .counter-card{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.25)!important;backdrop-filter:blur(8px)}
body.epse-page .counter-number,body.epse-page .counter-label{color:#fff!important}
body.epse-page .counter-icon{color:#ffe18a!important}

/* Admissions CTA and other colored callouts get a wavy visual treatment. */
body.epse-page .cta-section{position:relative;isolation:isolate;overflow:hidden}
body.epse-page .cta-section::before{content:"";position:absolute;left:-5%;right:-5%;top:-55px;height:90px;border-radius:50%;background:rgba(255,255,255,.12);z-index:-1}
body.epse-page .cta-section::after{content:"";position:absolute;width:140px;height:140px;right:4%;bottom:-65px;border-radius:50%;border:20px solid rgba(255,225,138,.35);z-index:-1}

/* Coming-soon pages also receive a playful frame. */
body.epse-page main.coming-soon-wrapper{position:relative;overflow:hidden;background:linear-gradient(135deg,#e8f8ff,#fff8e6 55%,#f1eaff)!important;border-radius:30px;box-shadow:0 16px 42px rgba(18,59,115,.10)}
body.epse-page main.coming-soon-wrapper::before{content:"";position:absolute;width:190px;height:190px;right:-60px;top:-60px;border-radius:50%;background:#ffe18a;opacity:.45}
body.epse-page main.coming-soon-wrapper::after{content:"";position:absolute;width:150px;height:150px;left:-55px;bottom:-55px;border-radius:50%;background:#bfeaff;opacity:.55}

/* Mobile: preserve readability and turn decorations down instead of covering text. */
@media(max-width:768px){
  body.epse-page .page-banner{margin-top:0!important;padding:56px 0 48px!important}
  body.epse-page .hero-slider{margin-top:0!important;min-height:620px!important}
  body.epse-page .hero-slider .slide-overlay{background:linear-gradient(180deg,rgba(7,45,91,.88) 0%,rgba(7,45,91,.66) 68%,rgba(7,45,91,.34) 100%)!important}
  body.epse-page section:not(.hero-slider):not(.counter-section){padding:58px 0!important}
  body.epse-page section:not(.hero-slider):not(.counter-section)::before,
  body.epse-page section:not(.hero-slider):not(.counter-section)::after{opacity:.45;transform:scale(.72)}
  body.epse-page .page-banner::before{left:-25px;transform:scale(.7)}
  body.epse-page .page-banner::after{right:4%;font-size:2rem}
  body.epse-page .grid-2,body.epse-page .grid-3,body.epse-page .grid-4,
  body.epse-page .steps,body.epse-page .dates-grid{grid-template-columns:1fr!important}
  body.epse-page .card,body.epse-page .feature-card,body.epse-page .message-card{border-radius:20px!important}
}
@media(prefers-reduced-motion:reduce){body.epse-page *,body.epse-page *::before,body.epse-page *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* =========================================================
   TYPOGRAPHY & CONTENT ALIGNMENT PATCH
   Keeps headings, paragraphs and section content aligned
   across all EPSE pages without affecting decorative art.
   ========================================================= */
body.epse-page {
  --epse-content-width: 1140px;
}

body.epse-page .container {
  width: 100%;
  max-width: var(--epse-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Consistent section heading block */
body.epse-page section:not(.hero-slider) .section-title {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.2;
  text-wrap: balance;
}

body.epse-page section:not(.hero-slider) .section-title::after {
  display: block;
  margin: 12px auto 0;
}

body.epse-page section:not(.hero-slider) .section-subtitle,
body.epse-page section:not(.hero-slider) .section-intro {
  display: block;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Make regular content paragraphs share a predictable rhythm. */
body.epse-page section p {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}

body.epse-page section p:last-child {
  margin-bottom: 0;
}

/* Preserve intentional left-aligned content in split layouts. */
body.epse-page .about-content,
body.epse-page .content-column,
body.epse-page .text-content,
body.epse-page .hero-content {
  text-align: left;
}

body.epse-page .about-content h1,
body.epse-page .about-content h2,
body.epse-page .about-content h3,
body.epse-page .content-column h1,
body.epse-page .content-column h2,
body.epse-page .content-column h3,
body.epse-page .text-content h1,
body.epse-page .text-content h2,
body.epse-page .text-content h3 {
  text-align: left;
  text-wrap: balance;
}

body.epse-page .about-content p,
body.epse-page .content-column p,
body.epse-page .text-content p,
body.epse-page .hero-content p {
  max-width: 760px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Page banners use one consistent readable text column. */
body.epse-page .page-banner .container {
  text-align: center;
}

body.epse-page .page-banner h1,
body.epse-page .page-banner .main-title {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

body.epse-page .page-banner p {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Prevent headings and paragraphs from inheriting accidental flex/grid offsets. */
body.epse-page h1,
body.epse-page h2,
body.epse-page h3,
body.epse-page h4,
body.epse-page p {
  overflow-wrap: break-word;
}

/* Cards: keep text and icons aligned consistently within each card. */
body.epse-page .card,
body.epse-page .feature-card,
body.epse-page .message-card,
body.epse-page .date-card,
body.epse-page .step-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.epse-page .card h3,
body.epse-page .feature-card h3,
body.epse-page .message-card h3,
body.epse-page .date-card h3,
body.epse-page .step-card h3 {
  line-height: 1.3;
  text-wrap: balance;
}

body.epse-page .card p,
body.epse-page .feature-card p,
body.epse-page .message-card p,
body.epse-page .date-card p,
body.epse-page .step-card p {
  max-width: none;
}

@media (max-width: 768px) {
  body.epse-page .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  body.epse-page section:not(.hero-slider) .section-title {
    font-size: clamp(1.65rem, 6vw, 2.2rem);
    line-height: 1.25;
  }

  body.epse-page section:not(.hero-slider) .section-subtitle,
  body.epse-page section:not(.hero-slider) .section-intro {
    margin-bottom: 28px;
    line-height: 1.65;
  }

  body.epse-page section p {
    line-height: 1.65;
  }

  body.epse-page .page-banner h1,
  body.epse-page .page-banner .main-title {
    line-height: 1.25;
  }
}

/* =========================================================
   HOMEPAGE HERO — REFINED TEXT LAYOUT
   Keeps the copy in a clean, predictable column so it
   remains readable over the school imagery.
   ========================================================= */
body.epse-page.page-index .hero-slider {
  min-height: clamp(590px, 76vh, 760px) !important;
}

body.epse-page.page-index .hero-slider .hero-content {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 48px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

body.epse-page.page-index .hero-slider .hero-content > .main-title {
  width: min(100%, 650px);
  max-width: 650px;
  margin: 0 0 20px;
  font-size: clamp(2.35rem, 4.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-align: left;
  text-wrap: balance;
}

body.epse-page.page-index .hero-slider .hero-content > p {
  width: min(100%, 570px);
  max-width: 570px;
  margin: 0 0 28px;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.72;
  text-align: left;
  text-wrap: pretty;
}

body.epse-page.page-index .hero-slider .hero-buttons {
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 0;
}

body.epse-page.page-index .hero-slider .hero-buttons .btn {
  min-height: 50px;
  white-space: nowrap;
}

/* A slightly stronger readable area on the left, without darkening the
   children's/school imagery on the right. */
body.epse-page.page-index .hero-slider .slide-overlay {
  background: linear-gradient(
    90deg,
    rgba(7,45,91,.90) 0%,
    rgba(7,45,91,.78) 34%,
    rgba(7,45,91,.42) 58%,
    rgba(7,45,91,.08) 82%,
    rgba(7,45,91,0) 100%
  ) !important;
}

@media (max-width: 900px) {
  body.epse-page.page-index .hero-slider .hero-content {
    padding: 0 34px;
  }
  body.epse-page.page-index .hero-slider .hero-content > .main-title {
    max-width: 590px;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
  }
  body.epse-page.page-index .hero-slider .hero-content > p {
    max-width: 520px;
  }
}

@media (max-width: 768px) {
  body.epse-page.page-index .hero-slider {
    min-height: 650px !important;
    height: auto !important;
  }

  body.epse-page.page-index .hero-slider .hero-content {
    min-height: 650px;
    padding: 92px 24px 92px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  body.epse-page.page-index .hero-slider .hero-content > .main-title {
    width: 100%;
    max-width: 560px;
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1.1;
    margin-bottom: 16px;
  }

  body.epse-page.page-index .hero-slider .hero-content > p {
    width: 100%;
    max-width: 500px;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 22px;
  }

  body.epse-page.page-index .hero-slider .hero-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }

  body.epse-page.page-index .hero-slider .hero-buttons .btn {
    width: auto;
    min-width: 150px;
    margin: 0;
  }

  body.epse-page.page-index .hero-slider .slide-overlay {
    background: linear-gradient(
      180deg,
      rgba(7,45,91,.70) 0%,
      rgba(7,45,91,.80) 45%,
      rgba(7,45,91,.72) 100%
    ) !important;
  }
}

@media (max-width: 480px) {
  body.epse-page.page-index .hero-slider .hero-content {
    min-height: 610px;
    padding: 78px 20px 84px;
  }

  body.epse-page.page-index .hero-slider .hero-content > .main-title {
    font-size: clamp(1.85rem, 9.2vw, 2.45rem);
  }

  body.epse-page.page-index .hero-slider .hero-content > p {
    font-size: .95rem;
  }

  body.epse-page.page-index .hero-slider .hero-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  body.epse-page.page-index .hero-slider .hero-buttons .btn {
    width: min(100%, 280px);
  }
}