/* ==========================================================
   DIVI FRONTEND BUILDER FIX
========================================================== */

.et-fb-root-ancestor .h1-line-inner,
.et-fb-root-ancestor .h1-line-inner-sub,
.et-fb-root-ancestor .hero-desc,
.et-fb-root-ancestor .hero-btns,
.et-fb-root-ancestor .btn-solid {
    transform: unset;
    opacity: unset;
}


/* ==========================================================
   HERO BADGE
========================================================== */

.hero-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;

    padding: 7px 18px;
    margin-bottom: 1.5rem;

    background: rgba(198, 153, 58, .12);
    border: 1px solid rgba(198, 153, 58, .25);
    border-radius: 2px;

    opacity: 0;
    animation: heroUp .8s var(--ease) 4.2s forwards;
}

.hero-badge-dot {
    width: 6px;
    height: 6px;

    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(198, 153, 58, .9);

    animation: pulse 2.5s ease-in-out infinite 5s;
}

.hero-badge-txt {
    font-size: .62rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: rgba(198, 153, 58, .9);
}


/* ==========================================================
   HERO HEADINGS
========================================================== */

.hero-h1 {
    overflow: hidden;
}

.h1-line {
    display: block;
    overflow: hidden;
}

.h1-line-inner,
.h1-line-inner-sub {
    display: block;
    transform: translateY(210%);
    animation: lineReveal 1.1s var(--ease) forwards;
}

.h1-line span:nth-child(1).h1-line-inner {
    animation-delay: 4s;
    text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
}

.h1-line span:nth-child(2).h1-line-inner {
    animation-delay: 4.3s;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
    font-style: italic;
}

.h1-line span.h1-line-inner-sub {
    animation-delay: 4.5s;
    text-shadow: 0 1px 20px rgba(0, 0, 0, .5);
}


/* ==========================================================
   HERO DESCRIPTION & BUTTONS
========================================================== */

.hero-desc {
    opacity: 0;
    animation: heroUp .9s var(--ease) 5s forwards;
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
	position:relative;
	z-index:9;
    opacity: 0;
    animation: heroUp .9s var(--ease) 5.2s forwards;
}

/* ==========================================================
  HOME HERO: PLAY VIDEO BUTTON
========================================================== */
.hero-play{
  display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:0;
  cursor:pointer;color:#fff;font-family:var(--sans,'DM Sans',sans-serif);
}
.hero-play__ring{
  position:relative;width:54px;height:54px;flex-shrink:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .35s ease,background .35s ease,transform .35s ease;
}
.hero-play__ring::after{
  content:'';position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid var(--gold,#C6993A);opacity:.55;
  animation:heroPlayPulse 2.6s ease infinite;
}
@keyframes heroPlayPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}
.hero-play__ring svg{width:15px;height:15px;fill:#fff;margin-left:3px;transition:fill .35s ease}
.hero-play__label{
  font-size:.72rem;font-weight:400;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.75);transition:color .35s ease;text-align:left;line-height:1.5;
}
.hero-play:hover .hero-play__ring{border-color:var(--gold,#C6993A);background:var(--gold,#C6993A);transform:translateY(-3px)}
.hero-play:hover .hero-play__ring svg{fill:var(--navy,#16255C)}
.hero-play:hover .hero-play__label{color:#fff}
.hero-play:focus-visible .hero-play__ring{outline:2px solid var(--gold,#C6993A);outline-offset:4px}

/* video lightbox - full screen */
.vlb{
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  background:#000;padding:0;opacity:0;transition:opacity .3s ease;
}
.vlb.open{display:flex;opacity:1}
.vlb__inner{position:relative;width:100%;height:100%;background:#000}
.vlb__inner iframe,.vlb__inner video{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000;
}
.vlb__close{
  position:fixed;top:20px;right:24px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;opacity:.8;
  transition:opacity .25s,background .25s;
}
.vlb__close:hover{opacity:1;background:rgba(0,0,0,.7)}
.vlb__close:focus-visible{outline:2px solid var(--gold,#C6993A);outline-offset:3px}

/* nav bar slides out of the way while the video is playing */
#nav,
.gsc-nav-bar-section,
.gsc-nav-bar{
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease,visibility .35s;
}
body.vlb-open #nav,
body.vlb-open .gsc-nav-bar-section,
body.vlb-open .gsc-nav-bar{
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* background scroll lock - the page scrolls on <html>, so body{overflow:hidden}
   alone is not enough. Fixing the body also stops iOS rubber banding. */
html.vlb-lock{overflow:hidden !important}
html.vlb-lock body{
  position:fixed !important;
  left:0;right:0;
  overflow:hidden !important;
  overscroll-behavior:none;
}
.vlb{overscroll-behavior:contain}
@media(max-width:600px){
  .hero-play__ring{width:46px;height:46px}
  .vlb__close{top:14px;right:14px;width:40px;height:40px}
}

/* ==========================================================
   HERO CREST
========================================================== */

.hero-crest {
    position: relative;
    z-index: 4;

    opacity: 0;
    animation: heroUp .9s var(--ease) 5.8s forwards;
}

.crest-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    width: 88px;
    height: 88px;

    background: rgba(10, 14, 26, .4);
    border: 1px solid rgba(198, 153, 58, .25);
    border-radius: 50%;
    backdrop-filter: blur(8px);

    animation: crestPulse 4s ease-in-out infinite 6s;
}

.crest-star {
    color: var(--gold);
    opacity: .7;
    line-height: 1;
}

.crest-text-top {
    font-size: .38rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-align: center;

    color: rgba(255, 255, 255, .4);
}

.crest-year {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: -.5px;

    color: rgba(198, 153, 58, .6);
}


/* ==========================================================
   HERO STATS
========================================================== */

.hero-stats {
    opacity: 0;
    animation: heroUp .9s var(--ease) 5.5s forwards;
}


/* ==========================================================
   HERO TICKER
========================================================== */

.hero-ticker {
    display: flex;
    gap: 4px;

    animation: ticker 28s linear infinite;
}

.hero-ticker:hover {
    animation-play-state: paused;
}

.ticker-photo {
    overflow: hidden;
    flex-shrink: 0;

    opacity: .75;
    transition: opacity .4s;
}

.ticker-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 30%;
}


/* ==========================================================
   MARQUEE
========================================================== */

.mq-item .et_pb_text_inner {
    display: flex;
    align-items: center;
    gap: 2rem;

    white-space: nowrap;
}

.mq-dot {
    display: block;

    width: 3px;
    height: 3px;

    background: var(--gold);
    border-radius: 50%;
    opacity: .6;
}


/* ==========================================================
   INTRO SECTION
========================================================== */

.stmt-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

.stmt-kicker-line {
    width: 28px;
    height: 1px;
    background: var(--gold);
    opacity: .6;
}

.sf-l {
    font-size: .8rem;
    letter-spacing: 3px;
  	line-height:1.9;
    text-transform: uppercase;
    color: rgba(22,37,92,0.64);
    font-weight: 400;
    padding: 0;
    margin: 10px 0;
}

.sf-d {
    font-size: .9rem;
    color: rgba(22,37,92,0.64);
    line-height: 1.55;
    margin-top: 10px;
    font-weight: 300;
      padding-top: 0;
    margin: 0;
}


/* ==========================================================
   GALLERY GRID
========================================================== */

.mosaic-5 {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 320px 260px;
}
.mosaic {
    display: grid;
    gap: 4px;
    background: var(--ink);
}

.mosaic-5 .mi:first-child {
    grid-row: 1 / 3;
}
.mi {
    overflow: hidden;
    position: relative;
}

.mi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.8) saturate(.9);
    transition: transform .9s var(--ease), filter .6s;
      display: block;
    max-width: 100%;
}

.mosaic .et_pb_image_wrap{
      height: 100%!important;
}

.mi:hover img {
    transform: scale(1.05);
    filter: brightness(.95) saturate(1);
}

.mosaic-5 .et_pb_image:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 22px;
    background: linear-gradient(to top, rgba(10, 14, 26, .75), transparent);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(255, 255, 255, .8);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s, transform .35s;
    z-index: 2;
  padding-bottom:20px;
}

.mosaic-5 .et_pb_image:hover:before{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 480px) {
    .mosaic-5 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1024px) {
    .mosaic-5 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}

/* ==========================================================
   WHY CHOOSE US
========================================================== */
.wcu-blurb .et_pb_blurb_container
 {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.wcu-blurb:hover span.wi-t {
    color: var(--navy) !important;
}

.ed-pills {
                    display: flex;
                    flex-wrap: wrap;
	    			align-items: center;
                    gap: .7rem;
                    justify-content: center;
                    max-width: 860px;
                    margin: 2.6rem auto 0
                }

                .ed-pills span {
                    font-size: .72rem;
                    letter-spacing: .08em;
                    color: var(--navy);
                    border: 1px solid rgba(22,37,92,.16);
                    padding: .55rem 1.1rem;
                    border-radius: 99px;
                    background: #fff
                }

.ed-pills i {
    color: var(--gold);
    font-style: normal;
    font-weight: 700;
    font-size: .95rem;
}

                .ed-pills span b {
                    color: var(--gold-d);
                    font-weight: 500
                }


@media (max-width:980px){
	
	.ed-pills {
		flex-direction: column;
	}
	
	.ed-pills i {
		transform: rotate(90deg);
	}
}

/* ==========================================================
   WHY CHOOSE US
========================================================== */

.accreditation-last .et_pb_blurb_container
{
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.accreditation .et_pb_blurb_content{
    display: flex;
    align-items: center;
    gap:10px;
}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.8);
    }
}

@keyframes crestPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(198, 153, 58, .1);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(198, 153, 58, .05);
    }
}

@keyframes lineReveal {
    from {
        transform: translateY(110%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes heroUp {
    from {
        opacity: 0;
        transform: translateY(36px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 971px) {

    .hero-stats {
        display: flex;
        justify-content: center;
    }

}


/* ==========================================================
   ABOUT US
========================================================== */

.val{
    font-family: var(--serif);
    font-weight: 500;
    margin-top: 1rem;
    font-size: 1.55rem;
    color: var(--navy);
    margin-bottom: .6rem;
}

.gsc-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(22, 37, 92, .12);
    border-left: 1px solid rgba(22, 37, 92, .12);
}

@media (max-width: 900px) {
    .gsc-values {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- CARDS ---- */
 .cardgrid {
   display: grid;
   grid-template-columns: repeat(2,1fr);
                gap: 1.4rem
}

.et_pb_blurb.card{
      transition: transform .55s var(--ease), box-shadow .55s var(--ease)!important;
}

.et_pb_blurb.card:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 64px -28px rgba(22, 37, 92, .26);
}

.et_pb_blurb.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 50px;
    background: linear-gradient(90deg, var(--gold), var(--gold-l));
    transition: width .6s var(--ease);
}

.et_pb_blurb.card:hover::before {
    width: 100%;
}

.fb-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .09) 47%, transparent 58%);
    background-size: 280% 100%;
    animation: fbSheen 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fbSheen {
	0%,100%
	    {
		 background-position: 140% 0
		}

	50% {
		 background-position: -50% 0
		}
}

.u2-sec {
    background: #e7f1fa;
    padding: 6.5rem 2rem;
    border-top: 1px solid rgba(22, 37, 92, 0.06);
}
.u2-wrap {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.u2-flag {
    max-width: 620px;
    margin: 3rem auto 1.2rem;
    display: grid;
    grid-template-columns: 54.4% 45.6%;
    grid-template-rows: 54% 46%;
    aspect-ratio: 900/620;
}
.u2-quad {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 18px 40px -18px rgba(10, 20, 50, 0.35);
    transition: transform 1.05s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.u2-quad.tl {
    transform: translate(-34px, -34px) rotate(-1.5deg);
    border-top-left-radius: 10px;
}
.u2-quad.tr {
    transform: translate(34px, -34px) rotate(1.5deg);
    border-top-right-radius: 10px;
    transition-delay: 0.1s;
}
.u2-quad.bl {
    transform: translate(-34px, 34px) rotate(1.5deg);
    border-bottom-left-radius: 10px;
    transition-delay: 0.2s;
}
.u2-quad.br {
    transform: translate(34px, 34px) rotate(-1.5deg);
    border-bottom-right-radius: 10px;
    transition-delay: 0.3s;
}
.u2-anim.in .u2-quad {
    transform: translate(0, 0) rotate(0);
}

.u2-cap {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(22, 37, 92, 0.45);
    font-weight: 600;
    margin-bottom: 1.6rem;
}

.u2-strengths {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin:0;
}

.u2-chip {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    line-height:normal;
    color: #fff;
    padding: 0.55rem 1.1rem;
    border-radius: 99px;
    box-shadow: 0 8px 18px -10px rgba(10, 20, 50, 0.4);
}

.u2-chip.c-ab {
    background: #c0392b;
}

.u2-chip.c-is {
    background: #f6aa5e;
}

.u2-chip.c-ja {
    background: #1e8449;
}

.u2-chip.c-ir {
    background: #2563a8;
}

.u2-dots {
    display: flex;
    gap: .55rem;
    justify-content: center;
    margin-bottom: 1.3rem;
}

.u2-dots i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

@media (max-width: 760px) {
    .cardgrid{
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }
}

/* ==========================================================
   ACADEMICS
========================================================== */

.cardgrid-academics{
      display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.4rem;
}

.nm
 {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--white);
    font-weight: 500;
    line-height: 1.15;
}

.ag
 {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    margin-top: .35rem;
    font-weight: 300;
	 line-height:normal;
}

.jsoon {
    display: inline-block;
    font-size: .54rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-d);
    border: 1px dashed rgba(198, 153, 58, .6);
    padding: 3px 9px;
	line-height:normal;
    border-radius: 99px;
    margin-top: .55rem;
    font-weight: 600;
}

.pathway {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .7rem;
    margin-top: 1rem;
}

.pathway.four-rows {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width:520px){
  .pathway,
  .pathway.four-rows{
  	grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width:1025px) and (min-width:520px) {
  .pathway {
  	grid-template-columns: repeat(3, 1fr);
  }
}



/* ==========================================================
   PEARSON PAGE
========================================================== */
.light-stages .ag {
    color: var(--mid);
}

.uni-logo img {
    opacity: .72;
    transition: opacity .35s ease, transform .35s ease;
    height: 70px;
    width: fit-content;
    max-width: 130px;
    object-fit: contain;
}

.uni-logo:hover img {
    opacity: 1;
    transform: translateY(-3px);
}

.logo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2.5rem 2rem;
    margin-top: 1rem;
    align-items: center;
}


/* ==========================================================
   ADMISSIONS PAGE
========================================================== */
.entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

@media(max-width: 980px) {
 .entry-grid {
		grid-template-columns:1fr 1fr;
	}
	
	.admission-entry-grid .entry-grid{
		grid-template-columns:1fr;
	}
}

.opp-chips .et_pb_text_inner {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: .6rem;
    margin-top: 1.3rem;
}

.opp-chips span {
    font-size: .72rem;
    letter-spacing: .08em;
    font-weight: 600;
	line-height:normal;
    color: var(--navy);
    background: var( --paper);
    border: 1px solid rgba(22, 37, 92, .14);
    padding: .5rem 1.1rem;
    border-radius: 99px;
}

/* ==========================================================
   ABOUT PEARSON PAGE
========================================================== */

.fr-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
 align-items: center;
}

.fr-links svg {
    width: 15px;
    height: 15px;
    stroke: var(--gold-d);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.fr-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid rgba(22, 37, 92, .12);
    border-left: 3px solid var(--gold);
    padding: 1.15rem 1.4rem;
    font-size: .86rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
    transition: border-color .25s, transform .25s;
}

.fr-links a:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

@media (max-width:680px){
  .fr-links {
   grid-template-columns: repeat(1, 1fr);
  }
}