/* Responsive layout for the brand website.
   The artwork is laid out against a 1500px design canvas. The page
   unit follows the viewport until a 1200px reading width, then the whole
   mobile page stays centered instead of becoming uncomfortably oversized. */

html {
  font-size: clamp(56.64px, 17.7094vw, 212.5px) !important;
  min-width: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  background: #fff;
}

#root,
.screen-xs,
.screen-xs .ant-layout,
.screen-xs .content___1eX2k,
.brandPage {
  width: 100%;
  min-width: 0;
}

.screen-xs {
  max-width: 1200px;
  margin: 0 auto;
}

.imgHonor___1VxLG .slider-frame {
  width: 100% !important;
  height: auto !important;
}

.imgHonor___1VxLG .slider-list {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  margin: 0 !important;
}

.imgHonor___1VxLG .slider-slide {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 80%;
  width: 80% !important;
  height: auto !important;
  margin: 0 0.1rem !important;
}

.imgHonor___1VxLG .slider-slide > img {
  display: block;
  width: 100% !important;
  height: auto;
}

@media (min-width: 1201px) {
  .screen-xs {
    box-shadow: 0 0 40px rgb(20 45 120 / 8%);
  }
}

/* Replacement brand header and the three new campaign slides. */
.customBrandHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.6vw, 24px);
  width: 100%;
  min-height: 60px;
  height: clamp(60px, 17.7094vw, 96px);
  padding: 0 clamp(22px, 5.5vw, 64px);
  box-sizing: border-box;
  overflow: hidden;
  background: #2A56D3;
}

.customBrandHeader img {
  display: block;
  width: clamp(58px, 11vw, 88px);
  height: clamp(58px, 11vw, 88px);
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  object-fit: contain;
}

.customAbout {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(48px, 8vw, 92px) clamp(20px, 5vw, 64px) clamp(52px, 8vw, 96px);
  background: #fff;
  color: #333;
  text-align: center;
}

.customAboutImage {
  display: block;
  width: min(100%, 980px);
  height: auto;
  margin: clamp(26px, 6vw, 64px) auto 0;
}

.customAboutCopy {
  width: min(100%, 980px);
  margin: clamp(28px, 6vw, 64px) auto 0;
  text-align: left;
  font-size: clamp(15px, 3.8vw, 24px);
  line-height: 1.9;
}

.customAboutCopy p {
  margin: 0 0 1.1em;
}

.customAboutCopy p:last-child {
  margin-bottom: 0;
  color: #2a55d3;
  font-weight: 600;
  text-align: center;
}

/* Full-height artwork for the service section. */
.brandPage .customServiceImage {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1242 / 2208;
  object-fit: contain;
  background-image: none !important;
}

.customBrandHeader h1 {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(18px, 4.8vw, 32px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.customAudience {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(52px, 8vw, 96px) clamp(20px, 5vw, 72px) clamp(58px, 8vw, 104px);
  background: linear-gradient(180deg, #f7faff 0%, #fff 48%, #f4f8ff 100%);
  color: #333;
}

.customAudienceHeader {
  text-align: center;
}

.customAudienceKicker {
  display: block;
  color: #8ea7e8;
  font-size: clamp(11px, 2.8vw, 16px);
  font-weight: 600;
  letter-spacing: .28em;
  line-height: 1.4;
}

.customAudienceHeader h2 {
  margin: 8px 0 0;
  color: #2a55d3;
  font-size: clamp(28px, 7.8vw, 46px);
  font-weight: 600;
  line-height: 1.25;
}

.customAudienceRule {
  display: block;
  width: clamp(42px, 11vw, 72px);
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #48b8f5, #2a55d3);
}

.customAudienceVisual {
  display: block;
  width: min(100%, 980px);
  height: auto;
  aspect-ratio: 1200 / 675;
  object-fit: contain;
  margin: clamp(28px, 5vw, 56px) auto 0;
  border-radius: clamp(10px, 2vw, 20px);
  box-shadow: 0 16px 38px rgb(42 85 211 / 12%);
}

.customAudienceIntro {
  width: min(100%, 980px);
  margin: clamp(28px, 5vw, 56px) auto 0;
  font-size: clamp(15px, 3.7vw, 23px);
  line-height: 1.9;
}

.customAudienceIntro p {
  margin: 0 0 1em;
}

.customAudienceIntro p:last-child {
  margin-bottom: 0;
}

.customAudienceCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 28px);
  width: min(100%, 980px);
  margin: clamp(30px, 5vw, 58px) auto 0;
}

.customAudienceCard {
  position: relative;
  min-height: 196px;
  box-sizing: border-box;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid #dbe6ff;
  border-radius: clamp(12px, 2vw, 20px);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 12px 30px rgb(42 85 211 / 8%);
}

.customAudienceCard h3 {
  position: relative;
  z-index: 1;
  margin: 10px 0 14px;
  color: #2a55d3;
  font-size: clamp(18px, 3.2vw, 26px);
  font-weight: 600;
  line-height: 1.35;
}

.customAudienceCard ul {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #5c6b89;
  font-size: clamp(13px, 2.6vw, 17px);
  line-height: 1.9;
}

.customAudienceCard li::before {
  margin-right: .45em;
  color: #48b8f5;
  content: '•';
}

@media (max-width: 600px) {
  .customAudienceCards {
    grid-template-columns: 1fr;
  }

  .customAudienceCard {
    min-height: 0;
  }
}

.customTeacher {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(52px, 8vw, 96px) clamp(20px, 5vw, 72px) clamp(60px, 9vw, 112px);
  background: #fff;
  color: #333;
}

.customTeacherHeading {
  text-align: center;
}

.customTeacherHeading h2 {
  margin: 0;
  color: #2a55d3;
  font-size: clamp(28px, 7.8vw, 46px);
  font-weight: 600;
  line-height: 1.25;
}

.customTeacherHeading span {
  display: block;
  margin-top: 10px;
  color: #bdc6ee;
  font-size: clamp(11px, 2.8vw, 16px);
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1.4;
}

.customTeacherHeading i {
  display: block;
  width: clamp(42px, 11vw, 72px);
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #48b8f5, #2a55d3);
}

.customTeacherBody {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(22px, 5vw, 64px);
  align-items: center;
  width: min(100%, 980px);
  margin: clamp(30px, 6vw, 66px) auto 0;
}

.customTeacherPortrait {
  overflow: hidden;
  border-radius: clamp(14px, 2.5vw, 24px);
  background: #d9f2f7;
  box-shadow: 0 16px 34px rgb(42 85 211 / 12%);
}

.customTeacherPortrait img {
  display: block;
  width: 100%;
  height: auto;
}

.customTeacherDetails {
  padding: clamp(6px, 1vw, 12px) 0;
}

.customTeacherGroup {
  padding: clamp(16px, 2.6vw, 26px) clamp(18px, 3vw, 30px);
  border-left: 3px solid #48b8f5;
  border-radius: 0 clamp(12px, 2vw, 18px) clamp(12px, 2vw, 18px) 0;
  background: linear-gradient(90deg, #f3f8ff, #fff);
}

.customTeacherGroup + .customTeacherGroup {
  margin-top: clamp(16px, 2.5vw, 26px);
  border-left-color: #2a55d3;
}

.customTeacherGroup p {
  position: relative;
  margin: 0;
  padding-left: 1.15em;
  color: #4c5c7a;
  font-size: clamp(14px, 2.7vw, 18px);
  line-height: 1.9;
}

.customTeacherGroup p::before {
  position: absolute;
  top: .78em;
  left: .1em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: #48b8f5;
  content: '';
}

.customTeacherGroup + .customTeacherGroup p::before {
  background: #2a55d3;
}

@media (max-width: 700px) {
  .customTeacherBody {
    grid-template-columns: 1fr;
  }

  .customTeacherPortrait {
    width: min(100%, 420px);
    margin: 0 auto;
  }
}

.customPhilosophy {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(52px, 8vw, 96px) clamp(20px, 5vw, 72px) clamp(60px, 9vw, 112px);
  background: linear-gradient(180deg, #f4f9ff 0%, #fff 36%, #f5f9ff 100%);
  color: #3f4d68;
}

.customPhilosophyHeading {
  width: min(100%, 980px);
  margin: 0 auto;
  text-align: center;
}

.customPhilosophyHeading h2 {
  margin: 0;
  color: #2a55d3;
  font-size: clamp(24px, 6vw, 38px);
  font-weight: 600;
  line-height: 1.45;
}

.customPhilosophyBanner {
  display: block;
  width: min(100%, 980px);
  height: auto;
  aspect-ratio: 1200 / 319;
  object-fit: contain;
  margin: clamp(28px, 5vw, 56px) auto 0;
  border-radius: clamp(10px, 2vw, 18px);
  box-shadow: 0 14px 32px rgb(42 85 211 / 10%);
}

.customPhilosophyCopy,
.customPhilosophyPrinciples,
.customPhilosophySupport {
  width: min(100%, 980px);
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(15px, 3.6vw, 22px);
  line-height: 1.9;
}

.customPhilosophyCopy {
  margin-top: clamp(28px, 5vw, 54px);
}

.customPhilosophy p {
  margin: 0 0 1em;
}

.customPhilosophyPrinciples {
  margin-top: clamp(38px, 6vw, 68px);
}

.customPhilosophy h3 {
  margin: 0 0 1em;
  color: #2a55d3;
  font-size: clamp(18px, 4.8vw, 30px);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.customPrincipleGrid,
.customSupportGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 26px);
  margin-top: clamp(24px, 4vw, 42px);
}

.customPrincipleCard,
.customSupportCard {
  box-sizing: border-box;
  padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 28px);
  border: 1px solid #dbe7ff;
  border-radius: clamp(12px, 2vw, 18px);
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 10px 28px rgb(42 85 211 / 7%);
}

.customPrincipleCard strong,
.customSupportCard strong {
  display: block;
  color: #2a55d3;
  font-size: clamp(16px, 3vw, 21px);
  font-weight: 600;
  line-height: 1.55;
}

.customPrincipleCard strong {
  white-space: normal;
}

@media (max-width: 360px) {
  .customPrincipleCard strong {
    font-size: clamp(14px, 4.4vw, 16px);
  }
}

.customPrincipleCard p,
.customSupportCard p {
  margin-top: 12px;
  color: #5a6882;
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.8;
}

.customPhilosophySupport {
  margin-top: clamp(40px, 6vw, 70px);
}

.customSupportGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(22px, 4vw, 40px) 0 clamp(26px, 5vw, 50px);
}

.customPhilosophyClosing {
  margin-top: clamp(28px, 5vw, 52px) !important;
  color: #2a55d3;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 700px) {
  .customPrincipleGrid,
  .customSupportGrid {
    grid-template-columns: 1fr;
  }

  .customPrincipleCard strong {
    white-space: nowrap;
  }
}

.customJourney {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(112px, 11vw, 148px) clamp(20px, 5vw, 72px) clamp(64px, 9vw, 120px);
  background: linear-gradient(180deg, #f5f9ff 0%, #fff 42%, #f4f8ff 100%);
  color: #3f4d68;
}

.customJourney::before {
  position: absolute;
  top: clamp(40px, 4.4vw, 58px);
  left: 50%;
  width: min(calc(100% - 32px), 1180px);
  height: clamp(8px, .8vw, 12px);
  border-radius: 50%;
  background: linear-gradient(90deg,
    rgb(72 184 245 / 0%) 0%,
    rgb(119 205 248 / 58%) 16%,
    #4c91ed 38%,
    #2a55d3 50%,
    #4c91ed 62%,
    rgb(119 205 248 / 58%) 84%,
    rgb(72 184 245 / 0%) 100%);
  content: '';
  transform: translateX(-50%);
}

.customJourneyHeading {
  width: min(100%, 980px);
  margin: 0 auto;
  text-align: center;
}

.customJourneyHeading h2 {
  margin: 0;
  color: #2a55d3;
  font-size: clamp(25px, 6vw, 40px);
  font-weight: 600;
  line-height: 1.4;
}

.customJourneyHeading span {
  display: block;
  margin-top: 10px;
  color: #bdc6ee;
  font-size: clamp(11px, 2.8vw, 16px);
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1.4;
}

.customJourneyHeading p {
  margin: 18px 0 0;
  color: #637493;
  font-size: clamp(14px, 3.3vw, 20px);
  line-height: 1.8;
}

.customJourneyImage {
  display: block;
  width: min(100%, 980px);
  height: auto;
  aspect-ratio: 1200 / 613;
  object-fit: contain;
  margin: clamp(28px, 5vw, 56px) auto 0;
  border-radius: clamp(10px, 2vw, 18px);
  box-shadow: 0 14px 32px rgb(42 85 211 / 10%);
}

.customJourneyTimeline {
  position: relative;
  width: min(100%, 980px);
  margin: clamp(46px, 7vw, 78px) auto 0;
}

.customJourneyTimeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, #48b8f5, #2a55d3 55%, #9eb7ef);
  content: '';
  transform: translateX(-50%);
}

.customJourneyItem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 5vw, 68px);
  align-items: start;
  margin-bottom: clamp(38px, 6vw, 70px);
}

.customJourneyItem:last-child {
  margin-bottom: 0;
}

.customJourneyItem:nth-child(odd) .customJourneyYear {
  grid-column: 1;
  text-align: right;
}

.customJourneyItem:nth-child(odd) .customJourneyCard {
  grid-column: 2;
}

.customJourneyItem:nth-child(even) .customJourneyYear {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}

.customJourneyItem:nth-child(even) .customJourneyCard {
  grid-column: 1;
  grid-row: 1;
}

.customJourneyYear {
  position: relative;
  padding-top: 22px;
  color: #2a55d3;
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
}

.customJourneyYear::after {
  position: absolute;
  top: 29px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #48b8f5;
  box-shadow: 0 0 0 3px #48b8f5;
  content: '';
}

.customJourneyItem:nth-child(odd) .customJourneyYear::after {
  right: calc(clamp(13px, 2.5vw, 34px) * -1);
}

.customJourneyItem:nth-child(even) .customJourneyYear::after {
  left: calc(clamp(13px, 2.5vw, 34px) * -1);
}

.customJourneyCard {
  box-sizing: border-box;
  padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 30px);
  border: 1px solid #dbe7ff;
  border-radius: clamp(12px, 2vw, 20px);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 12px 30px rgb(42 85 211 / 8%);
}

.customJourneyCard h3 {
  margin: 0 0 14px;
  color: #2a55d3;
  font-size: clamp(18px, 3.5vw, 26px);
  font-weight: 600;
  line-height: 1.45;
}

.customJourneyCard p,
.customJourneyList {
  margin: 0 0 1em;
  color: #5a6882;
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.85;
}

.customJourneyCard p:last-child,
.customJourneyList:last-child {
  margin-bottom: 0;
}

.customJourneyCard strong {
  color: #2a55d3;
  font-weight: 600;
}

.customJourneyEmphasis {
  padding-left: 1em;
  border-left: 3px solid #48b8f5;
  color: #2a55d3 !important;
  font-weight: 600;
}

.customJourneyList {
  padding: 0;
  list-style: none;
}

.customJourneyList li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: .65em;
}

.customJourneyList li::before {
  position: absolute;
  top: .8em;
  left: .1em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: #48b8f5;
  content: '';
}

@media (max-width: 700px) {
  .customJourneyTimeline::before {
    left: 8px;
    transform: none;
  }

  .customJourneyItem,
  .customJourneyItem:nth-child(even) {
    display: block;
    margin-bottom: 34px;
    padding-left: 28px;
  }

  .customJourneyYear,
  .customJourneyItem:nth-child(odd) .customJourneyYear,
  .customJourneyItem:nth-child(even) .customJourneyYear {
    padding-top: 0;
    margin-bottom: 12px;
    text-align: left;
  }

  .customJourneyYear::after,
  .customJourneyItem:nth-child(odd) .customJourneyYear::after,
  .customJourneyItem:nth-child(even) .customJourneyYear::after {
    top: .35em;
    left: -26px;
    right: auto;
  }
}

@media (min-width: 701px) {
  .customJourneyYear::after {
    display: none;
  }

  .customJourneyItem::before {
    position: absolute;
    top: 29px;
    left: 50%;
    z-index: 2;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #48b8f5;
    box-shadow: 0 0 0 3px #48b8f5;
    content: '';
    transform: translateX(-50%);
  }
}

.customSiteFooter {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #2a56d3 0%, #2148bd 100%);
}

.customSiteFooter::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: rgb(255 255 255 / 28%);
  content: '';
}

.customSiteFooterInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 1360px);
  min-height: clamp(112px, 15vw, 168px);
  margin: 0 auto;
  padding: clamp(18px, 3.4vw, 38px) clamp(22px, 5vw, 72px);
  box-sizing: border-box;
}

.customSiteFooterLogo {
  display: block;
  width: clamp(68px, 7.2vw, 96px);
  height: clamp(68px, 7.2vw, 96px);
  flex: 0 0 auto;
  object-fit: contain;
}

.customSiteFooterContact {
  min-width: 0;
  text-align: right;
}

.customSiteFooterContact a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 2.2vw, 34px);
  color: #fff;
  white-space: nowrap;
}

.customPhoneCopy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
}

.customPhoneLabel {
  display: block;
  margin-bottom: 6px;
  color: rgb(255 255 255 / 72%);
  font-size: clamp(11px, 1.8vw, 16px);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
}

.customPhoneNumber {
  display: block;
  color: #fff;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.2;
  white-space: nowrap;
}

.customPhoneIcon {
  display: grid;
  width: clamp(46px, 4.8vw, 64px);
  height: clamp(46px, 4.8vw, 64px);
  box-sizing: border-box;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid rgb(255 255 255 / 58%);
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 5px 14px rgb(19 55 161 / 20%);
}

.customPhoneIcon svg {
  display: block;
  width: 48%;
  height: 48%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: translate(.5px, .5px);
}

@media (max-width: 420px) {
  .customSiteFooterInner {
    min-height: 104px;
    padding-right: 22px;
    padding-left: 22px;
  }

  .customSiteFooterLogo {
    width: clamp(62px, 18vw, 74px);
    height: clamp(62px, 18vw, 74px);
  }

  .customPhoneNumber {
    font-size: clamp(18px, 5.4vw, 23px);
  }

}

.customHeroCarousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #eef4ff;
  touch-action: pan-y;
  user-select: none;
  line-height: 0;
}

.customHeroTrack {
  display: flex;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.customHeroSlide {
  display: block;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100%;
  line-height: 0;
}

.customHeroSlide img {
  display: block;
  width: 100% !important;
  height: auto;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.customHeroDots {
  position: absolute;
  right: 0;
  bottom: clamp(8px, 1.5vw, 18px);
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.customHeroDots .am-carousel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, .8vw, 10px);
}

.customHeroDots .am-carousel-wrap-dot {
  display: block;
  width: clamp(8px, 1vw, 12px);
  height: clamp(8px, 1vw, 12px);
  flex: 0 0 auto;
  box-sizing: border-box;
  cursor: pointer;
  transition: width .3s ease;
}

.customHeroDots .am-carousel-wrap-dot.is-active {
  width: clamp(20px, 2.5vw, 30px);
}

.customHeroDots .am-carousel-wrap-dot > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgb(255 255 255 / 78%);
  transition: border-radius .3s ease, background-color .3s ease;
}

.customHeroDots .am-carousel-wrap-dot.is-active > span {
  width: 100%;
  border-radius: 999px;
  background: #2a55d3;
}

@media (prefers-reduced-motion: reduce) {
  .customHeroTrack,
  .customHeroDots .am-carousel-wrap-dot > span {
    transition: none !important;
  }
}

/* Desktop: let the page itself fill the viewport while keeping long-form
   copy at a comfortable reading width. The mobile layout remains unchanged. */
@media (min-width: 1024px) {
  .screen-xs {
    max-width: none;
    margin: 0;
    box-shadow: none;
  }

  .customBrandHeader,
  .customHeroCarousel,
  .customAbout,
  .brandPage .customServiceImage,
  .customAudience,
  .customTeacher,
  .customPhilosophy,
  .customJourney {
    width: 100%;
    max-width: none;
  }

  .customAbout,
  .customAudience,
  .customTeacher,
  .customPhilosophy,
  .customJourney {
    padding-right: clamp(48px, 5vw, 96px);
    padding-left: clamp(48px, 5vw, 96px);
  }

  .customAboutImage,
  .customAboutCopy,
  .customAudienceVisual,
  .customAudienceIntro,
  .customAudienceCards,
  .customTeacherBody,
  .customPhilosophyHeading,
  .customPhilosophyBanner,
  .customPhilosophyCopy,
  .customPhilosophyPrinciples,
  .customPhilosophySupport,
  .customJourneyHeading,
  .customJourneyImage,
  .customJourneyTimeline {
    width: min(100%, 1360px);
  }

  .customHeroSlide img {
    width: 100vw !important;
  }
}