/* =====================================================================
   React Bits components — ported to vanilla CSS/JS (no React, no build).
   BorderGlow · GradientText · RotatingText · ScrollVelocity(marquee).
   Colours retuned to the SB palette (blue #154A98, gold #C59930).
   Behaviour lives in assets/js/site.js; motion is disabled for
   prefers-reduced-motion at the bottom of this file.
   ===================================================================== */

/* --------------------------------------------------- GradientText ---- */
.grad-text{
  background:linear-gradient(90deg,#154A98,#C59930,#2E6EBE,#C59930,#154A98);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:grad-shift 8s ease-in-out infinite;
}
.grad-text--light{background-image:linear-gradient(90deg,#F3D07A,#FBF6EA,#8FC6E8,#F3D07A)}
@keyframes grad-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* --------------------------------------------------- RotatingText ---- */
.rotate-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.06}
.rotate-wrap > [data-rotate]{display:inline-block;will-change:transform,opacity}

/* ------------------------------------------- ScrollVelocity marquee -- */
.marquee{background:var(--blue-ink,#0A2450);overflow:hidden;padding:.85rem 0;
  border-block:1px solid rgba(255,255,255,.07)}
.marquee__track{display:flex;flex-wrap:nowrap;white-space:nowrap;width:max-content;will-change:transform}
.marquee__item{display:inline-flex;align-items:center;
  font:700 .9rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#CBDBF2}
.marquee__item::after{content:"✦";color:var(--gold);margin:0 1.75rem;font-size:.85em;opacity:.9}

/* ------------------------------------------------------ BorderGlow ---- */
/* Faithful port of the React Bits BorderGlow: a mesh-gradient border and
   an outer glow that follow the cursor's direction near the edges. JS sets
   --edge-proximity and --cursor-angle on pointermove. */
.border-glow-card{
  --edge-proximity:0;
  --cursor-angle:45deg;
  --edge-sensitivity:28;
  --color-sensitivity:calc(var(--edge-sensitivity) + 20);
  --border-radius:18px;
  --glow-padding:38px;
  --cone-spread:25;
  --fill-opacity:.5;
  --card-bg:#0A2450;
  /* brand glow (gold) */
  --glow-color:hsl(43deg 60% 60% / 100%);
  --glow-color-60:hsl(43deg 60% 60% / 60%);
  --glow-color-50:hsl(43deg 60% 60% / 50%);
  --glow-color-40:hsl(43deg 60% 60% / 40%);
  --glow-color-30:hsl(43deg 60% 60% / 30%);
  --glow-color-20:hsl(43deg 60% 60% / 20%);
  --glow-color-10:hsl(43deg 60% 60% / 10%);
  /* brand mesh (blue / gold / cyan) */
  --g1:radial-gradient(at 80% 55%, #2E6EBE 0px, transparent 50%);
  --g2:radial-gradient(at 69% 34%, #C59930 0px, transparent 50%);
  --g3:radial-gradient(at 8% 6%,  #56B4D8 0px, transparent 50%);
  --g4:radial-gradient(at 41% 38%, #2E6EBE 0px, transparent 50%);
  --g5:radial-gradient(at 86% 85%, #C59930 0px, transparent 50%);
  --g6:radial-gradient(at 82% 18%, #56B4D8 0px, transparent 50%);
  --g7:radial-gradient(at 51% 4%,  #C59930 0px, transparent 50%);
  --g-base:linear-gradient(#2E6EBE 0 100%);

  position:relative;border-radius:var(--border-radius);isolation:isolate;
  transform:translate3d(0,0,.01px);display:grid;
  border:1px solid rgb(255 255 255 / 12%);background:var(--card-bg);overflow:visible;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.28),0 24px 60px rgba(0,0,0,.32);
}
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light{
  content:"";position:absolute;inset:0;border-radius:inherit;
  transition:opacity .25s ease-out;z-index:-1;
}
.border-glow-card:not(:hover)::before,
.border-glow-card:not(:hover)::after,
.border-glow-card:not(:hover) > .edge-light{opacity:0;transition:opacity .7s ease-in-out}

/* coloured mesh-gradient border */
.border-glow-card::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
    var(--g1) border-box,var(--g2) border-box,var(--g3) border-box,var(--g4) border-box,
    var(--g5) border-box,var(--g6) border-box,var(--g7) border-box,var(--g-base) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%));
  mask-image:conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%));
}
/* mesh fill bleeding in from the edges */
.border-glow-card::after{
  border:1px solid transparent;
  background:
    var(--g1) padding-box,var(--g2) padding-box,var(--g3) padding-box,var(--g4) padding-box,
    var(--g5) padding-box,var(--g6) padding-box,var(--g7) padding-box,var(--g-base) padding-box;
  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite:source-out;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite:subtract;
  opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode:soft-light;
}
/* outer glow */
.border-glow-card > .edge-light{
  inset:calc(var(--glow-padding) * -1);pointer-events:none;z-index:1;
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter;
}
.border-glow-card > .edge-light::before{
  content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}
.border-glow-inner{display:flex;flex-direction:column;position:relative;z-index:1}

/* BorderGlow used as the closing CTA card */
.cta-glow .border-glow-inner{padding:2.75rem 2rem;align-items:center;text-align:center;gap:1.1rem}
.cta-glow h2{color:#fff;font-size:var(--step-4);margin:0}
.cta-glow p{color:#C2D4EC;margin:0;max-width:46ch}
@media (min-width:820px){ .cta-glow .border-glow-inner{padding:3.25rem} }

/* Centre + cap course cards so a single course never leaves a lopsided void. */
.card-grid--center{grid-template-columns:repeat(auto-fit,minmax(290px,360px));justify-content:center}

/* ============================================ CONTACT (Get in touch) */
.c-hero{position:relative;overflow:hidden;color:#fff;padding:3.5rem 0 8rem;
  background:linear-gradient(150deg,var(--blue-ink),var(--blue) 62%,var(--blue-800))}
.c-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 85% -10%,rgba(255,255,255,.10),transparent 55%)}
.c-hero__photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.32;mix-blend-mode:luminosity;pointer-events:none}
.c-hero > .wrap{position:relative;z-index:1}
.c-hero h1{color:#fff;font-size:var(--step-5);margin:.4rem 0 .6rem}
.c-hero__sub{color:#CFE0F5;max-width:52ch;font-size:var(--step-1);margin:0}

.c-section{padding:0 0 4rem;margin-top:-6rem;position:relative;z-index:2}
.c-card{display:grid;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
@media (min-width:900px){ .c-card{grid-template-columns:1.5fr 1fr} }

.c-form{padding:2rem}
@media (min-width:768px){ .c-form{padding:2.5rem 2.75rem} }
.c-form__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.c-form__head h2{font-size:var(--step-3);margin:0}
.c-form__mail{color:var(--gold-600)}
.c-row{display:grid;gap:0 1.25rem}
@media (min-width:560px){ .c-row{grid-template-columns:1fr 1fr} }
.c-opt{font-weight:400;color:var(--muted);font-size:.85em}

.c-info{background:var(--blue-ink);color:#CBDBF2;padding:2rem}
@media (min-width:768px){ .c-info{padding:2.5rem} }
.c-info h2{color:#fff;font-size:var(--step-2);margin:0 0 1.5rem}
.c-info__list{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:1rem}
.c-info__list li{display:flex;align-items:center;gap:.85rem;font-size:.95rem}
.c-info__list a{color:#fff;text-decoration:none}
.c-info__list a:hover{color:var(--gold)}
.c-info__ic{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:var(--gold)}
.c-info__socials{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.6rem}
.c-info__socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font:700 .78rem var(--sans);
  transition:background .2s,transform .2s,color .2s}
.c-info__socials a:hover{background:var(--gold);color:#221803;transform:translateY(-2px)}
.c-info__centre{display:flex;gap:.85rem;align-items:flex-start;font-size:.9rem;margin-bottom:1.25rem}
.c-info__centre strong{color:#fff}
.c-info__map{border-radius:var(--r);overflow:hidden;line-height:0;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.c-info__map iframe{width:100%;height:200px;border:0;display:block;filter:grayscale(.15) contrast(1.05)}

/* =================================================== COURSE DETAIL */
.course-hero .hero-copy{max-width:52rem}
.course-crumb{position:relative;font-size:.82rem;color:#B9CDE9;margin:0 0 1.25rem;padding-left:1.5rem}
.course-crumb a{color:#D6E3F5;text-decoration:none}
.course-crumb a:hover{color:#fff}
.course-crumb span[aria-current]{color:#fff}

.course-layout{display:grid;gap:2.5rem}
@media (min-width:920px){ .course-layout{grid-template-columns:1fr 360px;gap:3.25rem;align-items:start} }
.course-main{min-width:0}
.course-h2{font-size:var(--step-3);margin:0 0 .9rem;position:relative}
.course-h2::after{content:"";display:block;width:46px;height:3px;border-radius:2px;margin:.7rem 0 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-600))}

/* module list */
.module-list{list-style:none;padding:0;margin:1.25rem 0 0;counter-reset:mod}
.module-list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.module-list__no{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue);font:700 .9rem var(--sans)}
.module-list h3{font-size:var(--step-1);margin:0 0 .25rem}
.module-list__hrs{font:400 .85rem var(--sans);color:var(--muted)}
.module-list p{margin:0;color:var(--muted);font-size:.95rem}

/* outcomes */
.outcome-grid{display:grid;gap:1.1rem;margin-top:1.25rem}
@media (min-width:640px){ .outcome-grid{grid-template-columns:repeat(3,1fr)} }
.outcome-card{background:var(--cream-3);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem}
.outcome-card__icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--blue),var(--blue-ink));color:var(--gold);margin-bottom:.8rem}
.outcome-card h3{font-size:var(--step-0);margin:0 0 .5rem}
.outcome-card ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.92rem;display:grid;gap:.3rem}

.course-note{background:var(--cream-2);border:1px solid rgba(197,153,48,.25);border-radius:var(--r-lg);
  padding:1.4rem 1.5rem;margin-top:1rem}
.course-note p{margin:0 0 .8rem}

/* sticky enquiry card (BorderGlow) */
@media (min-width:920px){ .course-aside{position:sticky;top:100px} }
.course-card .border-glow-inner{padding:1.75rem;gap:0}
.course-card__label{font:700 .68rem var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#9FB6D8;margin:0}
.course-card__fee{font:700 var(--step-4)/1 var(--serif);color:#fff;margin:.2rem 0 1.1rem}
.course-card__fee--ask{font-size:var(--step-2)}
.course-card__facts{margin:0 0 1.35rem;display:grid;gap:.7rem}
.course-card__facts div{display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.1);font-size:.9rem}
.course-card__facts dt{color:#9FB6D8;margin:0}
.course-card__facts dd{color:#fff;font-weight:650;margin:0;text-align:right}
.course-card .btn{margin-bottom:.6rem}
.course-card__note{font-size:.78rem;color:#8FA6C8;margin:.5rem 0 0}

/* ================================================ CIRCULAR GALLERY ---- */
.cgal{position:relative;height:400px;perspective:1300px;overflow:hidden;touch-action:pan-y;
  margin-top:1.5rem;cursor:grab}
.cgal:active{cursor:grabbing}
.cgal:focus-visible{outline:3px solid var(--gold-600);outline-offset:3px}
.cgal__stage{position:absolute;inset:0;transform-style:preserve-3d}
.cgal__item{position:absolute;top:50%;left:50%;width:300px;margin:-170px 0 0 -150px;opacity:0;
  transition:transform .55s var(--ease),opacity .55s var(--ease);will-change:transform,opacity}
.cgal__item img{width:300px;height:270px;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:var(--sh-3);pointer-events:none;background:var(--blue-50)}
.cgal__cap{text-align:center;margin:.7rem 0 0;font:600 .92rem var(--sans);color:var(--ink);
  opacity:0;transition:opacity .4s ease}
.cgal__item.is-center .cgal__cap{opacity:1}
.cgal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:200;width:46px;height:46px;
  border-radius:50%;border:0;background:#fff;color:var(--blue);box-shadow:var(--sh-2);
  font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .2s,background .2s}
.cgal__nav:hover{background:var(--blue);color:#fff;transform:translateY(-50%) scale(1.08)}
.cgal__nav--prev{left:max(1rem,calc(50% - 560px))}
.cgal__nav--next{right:max(1rem,calc(50% - 560px))}
@media (max-width:600px){
  .cgal{height:340px} .cgal__item{width:230px;margin-left:-115px} .cgal__item img{width:230px;height:210px}
}

/* ======================================================= GALLERY */
.gallery-grid{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){ .gallery-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .gallery-grid{grid-template-columns:repeat(4,1fr)} }
.gallery-tile{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sh-1)}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery-tile:hover img{transform:scale(1.06)}
.gallery-cap{position:absolute;inset:auto 0 0;padding:1.6rem .85rem .7rem;color:#fff;
  font:600 .82rem var(--sans);opacity:0;transition:opacity .25s var(--ease);
  background:linear-gradient(transparent,rgba(10,36,80,.9))}
.gallery-tile:hover .gallery-cap,.gallery-tile:focus-within .gallery-cap{opacity:1}

/* ================================================ WORK-ABROAD ANALYTICS */
.wa-facts{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.9rem}
.wa-facts li{padding-left:1.6rem;position:relative;color:var(--body)}
.wa-facts li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold),var(--gold-600))}
.wa-facts li span{display:block;font-size:.78rem;color:var(--faint);margin-top:.15rem}

.chart{margin:0 0 2.25rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem 1.6rem;box-shadow:var(--sh-1)}
.chart__title{font:600 var(--step-1) var(--serif);color:var(--ink);margin:0 0 1rem}
.chart__row{display:grid;grid-template-columns:112px 1fr 84px;gap:.7rem;align-items:center;margin:.5rem 0}
.chart__label{font-size:.82rem;color:var(--muted);text-align:right;line-height:1.2}
.chart__track{background:var(--line-2);border-radius:7px;height:26px;overflow:hidden}
.chart__bar{height:100%;border-radius:7px;min-width:6px;width:0;transition:width 1.1s var(--ease)}
.chart__val{font:700 .82rem var(--sans);color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.chart__bar--base{background:var(--charcoal-700,#3A3A3A)}
.chart__bar--gulf{background:linear-gradient(90deg,var(--blue-800),var(--blue))}
.chart__bar--west{background:linear-gradient(90deg,var(--blue),#2E6EBE)}
.chart__bar--top{background:linear-gradient(90deg,var(--gold-600),var(--gold));color:#221803}
.chart__note{font-size:.74rem;color:var(--faint);margin:1rem 0 0;line-height:1.5}
@media (max-width:600px){ .chart__row{grid-template-columns:58px 1fr 66px;gap:.45rem} .chart__label{font-size:.7rem} .chart__val{font-size:.72rem} .chart{padding:1.2rem 1rem} }

.truth-grid{display:grid;gap:1.5rem}
@media (min-width:820px){ .truth-grid{grid-template-columns:1fr 1fr} }
.truth-card{border-radius:var(--r-lg);padding:1.75rem;border:1px solid var(--line)}
.truth-card h3{display:flex;align-items:center;gap:.5rem;font-size:var(--step-1);margin:0 0 1rem}
.truth-card ul{margin:0;padding-left:1.15rem;display:grid;gap:.65rem;color:var(--body);font-size:.95rem}
.truth-card--true{background:#F0FDF4;border-color:#BBF7D0}
.truth-card--true h3{color:#15803D}
.truth-card--false{background:#FEF2F2;border-color:#FECACA}
.truth-card--false h3{color:#B91C1C}

/* =================================================== LEAD POPUP ------ */
.lead-popup{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.2rem}
.lead-popup[hidden]{display:none}
.lead-popup__backdrop{position:absolute;inset:0;background:rgba(10,36,80,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.lead-popup__card{position:relative;background:#fff;border-radius:var(--r-lg);max-width:26rem;width:100%;
  padding:2rem 1.9rem;box-shadow:var(--sh-3);opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lead-popup.is-open .lead-popup__backdrop{opacity:1}
.lead-popup.is-open .lead-popup__card{opacity:1;transform:none}
.lead-popup__x{position:absolute;top:.5rem;right:.65rem;border:0;background:none;font-size:1.7rem;
  line-height:1;color:var(--muted);cursor:pointer;padding:.2rem .4rem;border-radius:6px}
.lead-popup__x:hover{color:var(--ink);background:var(--line-2)}
.lead-popup__card h2{font-size:var(--step-3);margin:0 0 .5rem}
.lead-popup__card > p{color:var(--muted);margin:0 0 1.25rem;font-size:.96rem}
.lead-popup__note{font-size:.74rem;color:var(--faint);text-align:center;margin:.75rem 0 0}

/* ============================================ TESTIMONIAL MARQUEE ---- */
/* One continuous row that never stops. Cards are duplicated in the markup so
   translateX(-50%) loops seamlessly; any number of reviews just extends it. */
.testi-marquee{overflow:hidden;padding:.6rem 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.testi-marquee__track{display:flex;width:max-content;animation:testiScroll 55s linear infinite}
.testi-marquee:hover .testi-marquee__track{animation-play-state:paused}
.testi-marquee__track .card{flex:0 0 340px;width:340px;margin-right:1.5rem}
@keyframes testiScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .testi-marquee__track{animation:none} }

/* ============================================ PAGE LOADER + TRANSITION */
.page-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#fff;
  transition:opacity .45s ease,visibility .45s ease;
  animation:loaderAutoHide .5s ease 2.4s forwards}
@keyframes loaderAutoHide{to{opacity:0;visibility:hidden}}
html.is-loaded .page-loader{opacity:0;visibility:hidden;pointer-events:none}
.custom-loader{width:70px;height:70px;background:var(--gold,#C59930);border-radius:50px;
  -webkit-mask:radial-gradient(circle 31px at 50% calc(100% + 13px),#000 95%,#0000) top 4px left 50%,
    radial-gradient(circle 31px,#000 95%,#0000) center,
    radial-gradient(circle 31px at 50% -13px,#000 95%,#0000) bottom 4px left 50%,
    linear-gradient(#000 0 0);
  mask:radial-gradient(circle 31px at 50% calc(100% + 13px),#000 95%,#0000) top 4px left 50%,
    radial-gradient(circle 31px,#000 95%,#0000) center,
    radial-gradient(circle 31px at 50% -13px,#000 95%,#0000) bottom 4px left 50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:cu10 1.5s infinite}
@keyframes cu10{
  0%{-webkit-mask-size:0 18px,0 18px,0 18px,auto;mask-size:0 18px,0 18px,0 18px,auto}
  16.67%{-webkit-mask-size:100% 18px,0 18px,0 18px,auto;mask-size:100% 18px,0 18px,0 18px,auto}
  33.33%{-webkit-mask-size:100% 18px,100% 18px,0 18px,auto;mask-size:100% 18px,100% 18px,0 18px,auto}
  50%{-webkit-mask-size:100% 18px,100% 18px,100% 18px,auto;mask-size:100% 18px,100% 18px,100% 18px,auto}
  66.67%{-webkit-mask-size:0 18px,100% 18px,100% 18px,auto;mask-size:0 18px,100% 18px,100% 18px,auto}
  83.33%{-webkit-mask-size:0 18px,0 18px,100% 18px,auto;mask-size:0 18px,0 18px,100% 18px,auto}
  100%{-webkit-mask-size:0 18px,0 18px,0 18px,auto;mask-size:0 18px,0 18px,0 18px,auto}
}
/* smooth fade-in of the page content on every load (each nav = full load here) */
main{animation:pageIn .55s var(--ease,ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------- HERO IMAGE CAROUSEL ---- */
/* Scoped to .hero--carousel so single-image heroes elsewhere are untouched. */
.hero--carousel .hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.3s ease}
.hero--carousel .hero__bg img.is-active{opacity:1}

/* =============================================== AMBIENT ANIMATION
   Looping life for the page: glowing CTA cards, pulsing gold buttons and a
   breathing hero dot. All auto-disable under prefers-reduced-motion (below). */
@keyframes ctaGlowPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(197,153,48,.22),0 0 26px -10px rgba(197,153,48,.35),0 24px 60px rgba(0,0,0,.32)}
  50%{box-shadow:0 0 0 1px rgba(197,153,48,.5),0 0 60px -6px rgba(197,153,48,.6),0 24px 60px rgba(0,0,0,.32)}
}
.cta-glow{animation:ctaGlowPulse 3.4s ease-in-out infinite}

@keyframes btnGlowPulse{
  0%,100%{box-shadow:0 6px 18px rgba(197,153,48,.34)}
  50%{box-shadow:0 6px 26px rgba(197,153,48,.6),0 0 20px rgba(197,153,48,.42)}
}
.btn--gold,.btn--primary{animation:btnGlowPulse 2.8s ease-in-out infinite}
.btn--gold:hover,.btn--primary:hover{animation-play-state:paused}

@keyframes heroDotPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(197,153,48,.25)}
  50%{box-shadow:0 0 0 9px rgba(197,153,48,.10),0 0 16px rgba(197,153,48,.55)}
}
.hero-copy::after{animation:heroDotPulse 2.6s ease-in-out infinite}

/* Gentle looping float for the gold star spark in section eyebrows/badges */
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.badge-pill{will-change:transform}

/* ================================================= MOBILE TUNING */
@media (max-width:919px){
  /* Course detail: lift the fee/enquiry card above the long syllabus. */
  .course-layout{display:flex;flex-direction:column}
  .course-aside{order:-1}
  .course-aside .course-card{max-width:none}
}
@media (max-width:600px){
  /* Contact: gentler hero-to-card overlap on small screens. */
  .c-hero{padding:2.75rem 0 5rem}
  .c-hero h1{font-size:2.1rem}
  .c-section{margin-top:-3.25rem}
  .hero-copy{padding-left:1rem}
  /* BorderGlow: smaller outer glow so it never pushes page width. */
  .border-glow-card{--glow-padding:16px}
  .cta-glow .border-glow-inner{padding:2rem 1.4rem}
  /* Course cards on the index centre on a phone. */
  .course-group__body .card-grid--courses{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .grad-text{animation:none}
  .marquee__track{transform:none !important}
  .border-glow-card::before,.border-glow-card::after,.border-glow-card > .edge-light{display:none}
}