*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#161329;font-family:Inter,Arial,sans-serif;background:#fff}a{color:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.topbar{background:#200060;color:#fff;font-size:13px}.topin{height:34px;display:flex;gap:34px;align-items:center}header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 14px #160c3c14}.nav{height:82px;display:flex;align-items:center;gap:28px}.brand img{width:190px;height:64px;object-fit:contain}.nav nav{display:flex;gap:24px;align-items:center;margin-left:auto}.nav nav>a,.dd>a{text-decoration:none;font-weight:700;font-size:14px}.apply,.btn{background:#f5a800;color:#fff;text-decoration:none;font-weight:800;padding:15px 21px;border-radius:8px}.dd{position:relative}.drop{position:absolute;display:none;top:100%;left:-16px;background:#fff;min-width:230px;padding:10px;border-radius:10px;box-shadow:0 14px 36px #1d0b5224}.dd:hover .drop{display:block}.drop a{display:block;text-decoration:none;padding:10px;border-radius:7px;font-size:14px}.drop a:hover{background:#f5f1ff}.menu{display:none}.homehero{min-height:560px;background-size:cover;background-position:center;position:relative;color:#fff}.homehero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,3,101,.96) 0%,rgba(47,9,116,.78) 42%,rgba(47,9,116,.12) 75%)}.heroCopy{position:relative;padding:90px 0;max-width:690px}.eyebrow{color:#f5a800;font-weight:900;letter-spacing:4px;font-size:13px}.homehero h1,.innerhero h1{font-family:Georgia,serif;font-size:clamp(50px,6vw,82px);line-height:.96;margin:16px 0}.homehero p,.innerhero p{font-size:20px;line-height:1.5;max-width:650px}.actions{display:flex;gap:12px;margin-top:28px}.btn.alt{background:transparent;border:1px solid #fff}.benefits{margin-top:-34px;position:relative;z-index:3}.benefitgrid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:14px;box-shadow:0 16px 40px #1d0b5220;padding:22px}.benefitgrid div{padding:8px 22px;border-right:1px solid #e3dff0}.benefitgrid div:last-child{border:0}.benefitgrid strong{display:block;color:#200060;font-family:Georgia,serif;font-size:18px}.section{padding:64px 0}.soft{background:#f7f5fc}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.section h2{font-family:Georgia,serif;color:#200060;font-size:42px;margin:5px 0}.runner{overflow:hidden}.track{display:flex;gap:20px;width:max-content;animation:run 38s linear infinite}.runner:hover .track{animation-play-state:running !important}@keyframes run{to{transform:translateX(-50%)}}.slide{width:300px;flex:0 0 300px;background:#fff;border:1px solid #e5e1ef;border-radius:13px;overflow:hidden;text-decoration:none}.slide img{width:100%;height:190px;object-fit:cover}.slide div{padding:15px}.slide h3{font-family:Georgia,serif;color:#200060;margin:0 0 7px;font-size:20px}.slide p{margin:0;color:#6a6474;font-size:14px}.innerhero{min-height:330px;background-size:cover;background-position:center;display:flex;align-items:center;color:#fff}.innerhero .wrap{padding:60px 0}.innerhero h1{font-size:58px}.content{padding:60px 0}.content h2{font-family:Georgia,serif;color:#200060;font-size:36px}.content p{line-height:1.7;color:#393447}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #e4dfed;border-radius:14px;overflow:hidden;text-decoration:none;background:#fff;box-shadow:0 8px 24px #24105a0b}.card img{width:100%;height:220px;object-fit:cover}.cardbody{padding:18px}.cardbody span{font-size:12px;color:#f5a800;font-weight:900;text-transform:uppercase;letter-spacing:1px}.card h3{font-family:Georgia,serif;color:#200060;font-size:23px;margin:7px 0 16px}.card b{color:#200060}.split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}.split img{width:100%;height:430px;object-fit:cover;border-radius:18px}.notice{background:#f6f2ff;border-left:4px solid #200060;padding:18px 20px;border-radius:8px}.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form label{font-weight:700;font-size:14px}.form input,.form select,.form textarea{width:100%;padding:13px;border:1px solid #d9d3e7;border-radius:8px;margin-top:6px;font:inherit}.form .full{grid-column:1/-1}.form button{border:0;cursor:pointer}.coursehero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.coursehero img{width:100%;height:390px;object-fit:cover;border-radius:18px}.pill{display:inline-block;background:#f1ebff;color:#200060;padding:8px 12px;border-radius:999px;font-weight:800;font-size:13px}footer{background:#170047;color:#fff;padding:52px 0 0;margin-top:40px}.footgrid{display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:60px}.flogo{width:220px;background:#fff;border-radius:8px;padding:8px}.footgrid a{display:block;text-decoration:none;margin:9px 0;color:#eee}.footgrid p{line-height:1.6;color:#e6e0f4}.legal{margin-top:38px;padding:18px;text-align:center;background:#100032;color:#d9d1ec;font-size:12px}.wa{position:fixed;right:24px;bottom:24px;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;z-index:99;box-shadow:0 8px 24px #0003}.wa svg{width:34px}.subject{padding:40px 0;border-bottom:1px solid #eee}.subject h2{font-family:Georgia,serif;color:#200060;font-size:34px}.ucards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.ucard{border:1px solid #e5e1ed;border-radius:12px;overflow:hidden;background:#fff}.ucard img{width:100%;height:170px;object-fit:cover}.ucard div{padding:14px}.ucard h3{font-family:Georgia,serif;color:#200060;font-size:18px;margin:0 0 8px}.ucard a{font-weight:800;color:#f5a800;text-decoration:none}@media(max-width:900px){.topbar{display:none}.nav{height:72px}.brand img{width:150px}.menu{display:block;margin-left:auto}.nav nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;padding:20px;flex-direction:column;align-items:flex-start}.nav nav.open{display:flex}.apply{display:none}.drop{position:static;display:block;box-shadow:none;padding-left:12px}.benefitgrid,.cards,.ucards,.footgrid,.split,.coursehero{grid-template-columns:1fr 1fr}.homehero{min-height:600px}.form{grid-template-columns:1fr}.form .full{grid-column:auto}}@media(max-width:620px){.wrap{width:min(100% - 24px,1180px)}.benefitgrid,.cards,.ucards,.footgrid,.split,.coursehero{grid-template-columns:1fr}.benefits{margin-top:0}.benefitgrid div{border-right:0;border-bottom:1px solid #eee}.homehero h1{font-size:50px}.actions{flex-direction:column;align-items:flex-start}.innerhero h1{font-size:44px}.slide{width:270px;flex-basis:270px}}
/* User-requested homepage hero update */
.ctc-requested-title {
text-align:left !important;
max-width:820px !important;
line-height:0.98 !important;
}
.hero, .home-hero, .ctc-hero {
text-align:left !important;
}
.hero .container, .home-hero .container, .ctc-hero .container,
.hero-content, .hero-copy {
text-align:left !important;
align-items:flex-start !important;
}
.hero p, .home-hero p, .ctc-hero p,
.hero .eyebrow, .home-hero .eyebrow, .ctc-hero .eyebrow {
text-align:left !important;
}
/* Keep all running sliders moving even when the pointer is over them */
.marquee-track, .running-track, .slider-track, .course-track,
[data-running-slider] > div {
animation-play-state:running !important;
}
.marquee:hover .marquee-track,
.running-slider:hover .running-track,
.slider:hover .slider-track,
.course-slider:hover .course-track,
[data-running-slider]:hover > div {
animation-play-state:running !important;
}
@media (max-width:700px) {
.ctc-requested-title br { display:none; }
}
/* Corrected homepage hero: exact two-line copy, true left alignment */
.homehero.liveHero{
min-height:560px;
background-size:cover;
background-position:center 42%;
transition:background-image 1s ease-in-out;
}
.homehero.liveHero .heroCopy{
width:min(1180px,calc(100% - 40px));
max-width:none !important;
margin:0 auto;
padding:92px 0 100px;
text-align:left !important;
}
.homehero.liveHero .heroCopy .eyebrow,
.homehero.liveHero .heroCopy p,
.homehero.liveHero .heroCopy .actions{
margin-left:0 !important;
text-align:left !important;
}
.homehero.liveHero .ctc-requested-title{
width:100%;
max-width:980px !important;
margin:16px 0 24px !important;
font-size:clamp(54px,5.25vw,76px) !important;
line-height:1.00 !important;
text-align:left !important;
}
.homehero.liveHero .ctc-requested-title span{
display:block;
white-space:nowrap;
}
.homehero.liveHero p{
max-width:720px !important;
}
.homehero.liveHero:before{
background:linear-gradient(90deg,rgba(38,3,101,.96) 0%,rgba(47,9,116,.80) 38%,rgba(47,9,116,.18) 70%,rgba(47,9,116,.05) 100%) !important;
}
/* Course/image runners must NEVER pause on mouse hover */
.runner .track,
.runner:hover .track,
.runner:focus-within .track,
.slide:hover,
.slide:focus{
animation-play-state:running !important;
}
.track{animation-play-state:running !important;}
@media(max-width:900px){
.homehero.liveHero .ctc-requested-title{
font-size:clamp(46px,8vw,64px) !important;
}
}
@media(max-width:700px){
.homehero.liveHero .heroCopy{width:min(100% - 28px,1180px);padding:72px 0 84px}
.homehero.liveHero .ctc-requested-title span{white-space:normal}
}
/* Final clean Thames hero */
.cleanThamesHero{
background-size:cover !important;
background-position:center center !important;
min-height:650px !important;
}
.cleanThamesHero .heroCopy{
width:min(1180px,calc(100% - 48px)) !important;
margin:0 auto !important;
padding:110px 0 105px !important;
text-align:left !important;
}
.cleanThamesHero .ctc-requested-title{
max-width:900px !important;
margin:16px 0 22px !important;
font-size:clamp(54px,4.9vw,78px) !important;
line-height:1.02 !important;
text-align:left !important;
}
.cleanThamesHero .ctc-requested-title span{display:block;white-space:nowrap}
.cleanThamesHero .eyebrow,
.cleanThamesHero p,
.cleanThamesHero .actions{text-align:left !important;margin-left:0 !important}
.cleanThamesHero p{max-width:720px !important}
.cleanThamesHero:before{
background:linear-gradient(90deg,rgba(22,9,45,.82) 0%,rgba(34,11,78,.60) 34%,rgba(22,9,45,.18) 62%,rgba(0,0,0,.03) 100%) !important;
}
.runner .track,.runner:hover .track,.runner:focus-within .track,
.running-slider .track,.running-slider:hover .track,
.course-slider .track,.course-slider:hover .track{
animation-play-state:running !important;
}
@media(max-width:700px){
.cleanThamesHero{min-height:600px !important}
.cleanThamesHero .heroCopy{width:calc(100% - 30px) !important;padding:80px 0 !important}
.cleanThamesHero .ctc-requested-title span{white-space:normal}
}
/* REAL PHOTO HERO - no screenshot/mockup backgrounds */
.cleanThamesHero{
position:relative !important;
overflow:hidden !important;
background:none !important;
min-height:650px !important;
}
.cleanThamesHero .realHeroPhoto{
position:absolute;
inset:0;
z-index:0;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
opacity:1;
transition:opacity .55s ease;
transform:scale(1.002);
}
.cleanThamesHero::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(90deg,rgba(38,8,94,.92) 0%,rgba(45,7,115,.67) 37%,rgba(28,8,66,.20) 68%,rgba(0,0,0,.06) 100%) !important;
pointer-events:none;
}
.cleanThamesHero .heroCopy{position:relative;z-index:2}
.cleanThamesHero .ctc-requested-title span{display:block;white-space:nowrap}
.photoCredits{font-size:11px;opacity:.65;margin-top:14px}
/* COURSE SLIDERS: run normally, PAUSE while mouse is over the slider */
.runner .track,.running-slider .track,.course-slider .track{
animation-play-state:running !important;
}
.runner:hover .track,.runner:focus-within .track,
.running-slider:hover .track,.running-slider:focus-within .track,
.course-slider:hover .track,.course-slider:focus-within .track{
animation-play-state:paused !important;
}
@media(max-width:700px){
.cleanThamesHero .ctc-requested-title span{white-space:normal}
}
/* Fix CTC course-card image rendering */
.courseCard img,.course-card img,.card img{
width:100%;
height:230px;
object-fit:cover;
display:block;
}
/* Footer logo on purple: no white card/background */
footer .brand img,
footer .footer-brand img,
footer img[alt*="City Thames"],
footer img[alt*="CTC"]{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
padding:0 !important;
max-width:300px;
height:auto;
}
footer .brand,footer .footer-brand{
background:transparent !important;
}
/* Course sliders pause on hover as requested */
.runner:hover .track,.runner:focus-within .track,
.running-slider:hover .track,.running-slider:focus-within .track,
.course-slider:hover .track,.course-slider:focus-within .track{
animation-play-state:paused !important;
}
/* Running course slider image visibility fix */
.runner .slide img,
.runner .courseCard img,
.runner .course-card img,
.running-slider img,
.course-slider img,
.courseCard img,
.course-card img{
display:block !important;
width:100% !important;
height:230px !important;
min-height:230px !important;
object-fit:cover !important;
object-position:center !important;
opacity:1 !important;
visibility:visible !important;
background:#eee;
}
/* Course slider runs normally and pauses only while hovered */
.runner .track,.running-slider .track,.course-slider .track{animation-play-state:running !important}
.runner:hover .track,.running-slider:hover .track,.course-slider:hover .track{animation-play-state:paused !important}
/* User-approved purple footer logo and exact matching purple background */
footer {
background:#200060 !important;
}
footer .ctc-purple-footer-logo {
display:block !important;
width:min(100%, 340px) !important;
height:auto !important;
object-fit:contain !important;
background:#200060 !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 0 24px 0 !important;
}
footer .brand, footer .footer-brand,
footer .brand img, footer .footer-brand img {
background:#200060 !important;
box-shadow:none !important;
border:0 !important;
}
/* Professional CTC About dropdown */
.aboutNavItem{position:relative;display:flex;align-items:center;height:100%}
.ctcAboutDropdown{
position:absolute;top:calc(100% + 16px);left:-34px;width:330px;background:#fff;
border:1px solid #e6e1ef;border-radius:14px;padding:16px;box-shadow:0 20px 45px rgba(31,13,72,.16);
opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;z-index:9999;
}
.aboutNavItem:hover .ctcAboutDropdown,.aboutNavItem:focus-within .ctcAboutDropdown{opacity:1;visibility:visible;transform:none}
.ctcAboutDropdown a{display:block!important;padding:13px 15px!important;border-radius:9px;color:#17142a!important;text-decoration:none!important;font-weight:650!important;white-space:nowrap}
.ctcAboutDropdown a:hover{background:#f5f1fb!important;color:#200060!important}
/* CTC About family pages */
.aboutHero{position:relative;min-height:470px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.aboutHeroOverlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,6,99,.94),rgba(48,12,117,.68) 46%,rgba(20,8,47,.18))}
.aboutHeroInner{position:relative;z-index:2;width:min(1180px,calc(100% - 48px));margin:0 auto;padding:90px 0 72px;color:#fff}
.aboutEyebrow{font-size:14px;letter-spacing:.24em;font-weight:800;color:#ff2a31;margin-bottom:16px}
.aboutHero h1{font-family:Georgia,serif;font-size:clamp(48px,6vw,78px);line-height:1.02;margin:0 0 20px;max-width:850px}
.aboutHero p{font-size:20px;line-height:1.65;max-width:790px;margin:0}
.aboutIntroGrid{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:90px 0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:70px;align-items:start}
.aboutTextBlock{padding:0 0 34px;margin:0 0 34px;border-bottom:1px solid #e8e3ef}
.aboutTextBlock:last-child{border-bottom:0;margin-bottom:0}
.aboutTextBlock h2{font-family:Georgia,serif;color:#200060;font-size:34px;margin:0 0 14px}
.aboutTextBlock p{font-size:18px;line-height:1.8;color:#454151;margin:0}
.aboutSide{position:sticky;top:120px}
.aboutSide img{display:block;width:100%;height:460px;object-fit:cover;border-radius:18px}
.aboutSideNote{background:#200060;color:#fff;margin:-54px 20px 0;position:relative;padding:25px;border-radius:14px;box-shadow:0 14px 30px rgba(34,7,95,.18)}
.aboutSideNote strong{display:block;font-family:Georgia,serif;font-size:24px;margin-bottom:8px}
.aboutSideNote span{line-height:1.55;opacity:.9}
.aboutCta{background:#250667;color:#fff;padding:58px max(24px,calc((100vw - 1180px)/2));display:flex;justify-content:space-between;gap:40px;align-items:center}
.aboutCta span{color:#ff292f;letter-spacing:.2em;font-weight:800;font-size:13px}
.aboutCta h2{font-family:Georgia,serif;font-size:36px;margin:9px 0 0}
.aboutCtaActions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:850px){
.aboutIntroGrid{grid-template-columns:1fr;gap:40px;padding:60px 0}
.aboutSide{position:static}.aboutSide img{height:380px}
.aboutCta{display:block}.aboutCtaActions{margin-top:25px}
.ctcAboutDropdown{left:0;width:min(330px,90vw)}
}
/* About Us: keyboard, pointer and touch navigation */
.about-menu{display:flex;align-items:center;gap:4px}
.about-toggle{border:0;background:transparent;color:#200060;cursor:pointer;font-size:18px;padding:8px;min-width:32px;min-height:40px}
.about-menu:focus-within .drop,.about-menu.is-open .drop{display:block}
.about-menu .drop{min-width:250px}
.about-menu a:focus-visible,.about-toggle:focus-visible{outline:2px solid #f5a800;outline-offset:3px}
@media(max-width:900px){nav.open .about-menu{flex-wrap:wrap}nav.open .about-menu .drop{position:static;width:100%;box-shadow:none;margin:0}}
/* CTC course navigation: expanding Level 2 and Level 3 menus */
.courses-menu{display:flex;align-items:center;gap:3px}
.courses-toggle,.level-toggle{border:0;background:transparent;color:#200060;font-size:18px;cursor:pointer;min-height:40px;min-width:30px}
.courses-menu>.drop{min-width:230px}
.courses-menu:focus-within>.drop,.courses-menu.is-open>.drop{display:block}
.course-submenu{position:relative}.course-level-row{display:flex;align-items:center;justify-content:space-between}.course-level-row>a{flex:1;font-weight:700}
.course-flyout{display:none;position:absolute;left:100%;top:0;width:310px;padding:10px;background:#fff;border-radius:10px;box-shadow:0 14px 36px #1d0b5224}
.course-submenu:hover>.course-flyout,.course-submenu:focus-within>.course-flyout,.course-submenu.is-open>.course-flyout{display:block}
.courses-menu a:focus-visible,.courses-menu button:focus-visible{outline:2px solid #f5a800;outline-offset:2px}
.ctc-slider-section{margin-bottom:48px}.ctc-slider{overflow:hidden;padding:4px 0 18px}.ctc-slide-track{display:flex;width:max-content;gap:22px;animation:ctcCourseRun 32s linear infinite}.ctc-slide-group{display:flex;gap:22px}.ctc-slide{width:300px;flex:0 0 300px}.ctc-slide img{display:block;width:100%;height:230px;object-fit:cover}.ctc-slide .cardbody{min-height:180px}.ctc-slide b,.course-explore{display:block;color:#200060;margin-top:14px}.ctc-slide:hover b,.ctc-slide:focus-visible b{color:#f5a800}
@keyframes ctcCourseRun{to{transform:translateX(calc(-50% - 11px))}}
.ctc-slider-section:hover .ctc-slide-track,.ctc-slider-section:focus-within .ctc-slide-track,.ctc-slider-section.paused .ctc-slide-track{animation-play-state:paused}
.ctc-slider-pause{border:1px solid #200060;border-radius:7px;background:#fff;color:#200060;padding:10px 14px;cursor:pointer;font-size:14px}
@media(max-width:1050px){.course-flyout{left:auto;right:100%}}
@media(max-width:900px){nav.open .courses-menu{flex-wrap:wrap}nav.open .courses-menu>.drop{position:static;width:100%;box-shadow:none}nav.open .course-flyout{position:static;width:100%;box-shadow:none;padding-left:20px}.ctc-slide{width:270px;flex-basis:270px}}
@media(prefers-reduced-motion:reduce){.ctc-slide-track{animation:none}.ctc-slider{overflow-x:auto}.ctc-slide-group[aria-hidden]{display:none}}
/* Keep the logo, navigation and application action on one header row. */
header .wrap.nav{width:min(1440px,calc(100% - 40px));display:flex;flex-wrap:nowrap;gap:18px;height:82px}
header .brand{flex:0 0 165px}header .brand img{width:165px;max-width:100%;height:64px}
header .nav nav{flex-wrap:nowrap;gap:14px;margin-left:auto}
header .nav nav>a,header .nav .dd>a{white-space:nowrap;line-height:1.3}
header .nav .dd{flex-shrink:0}
header .nav>.apply{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;padding:14px 18px;line-height:1.2}
header .nav>.menu{flex-shrink:0}
@media(min-width:1101px){header .nav>.menu{display:none}header .nav nav{display:flex}}
@media(max-width:1100px){
header .wrap.nav{height:72px;gap:12px}
header .brand{flex-basis:150px}header .brand img{width:150px;height:58px}
header .nav>.menu{display:block;margin-left:auto;border:1px solid #ddd;background:#fff;border-radius:6px;padding:8px;font-size:20px}
header .nav nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;padding:20px;flex-direction:column;align-items:flex-start;max-height:calc(100vh - 110px);overflow-y:auto}
header .nav nav.open{display:flex}
header .nav .dd{width:100%;flex-wrap:wrap}
header .nav .drop{position:static;display:none;width:100%;box-shadow:none;padding-left:12px}
header .nav .dd:hover>.drop,header .nav .dd:focus-within>.drop,header .nav .dd.is-open>.drop{display:block}
header .nav .course-flyout{position:static;width:100%;box-shadow:none;padding-left:20px}
}
@media(max-width:480px){header .wrap.nav{width:calc(100% - 24px);gap:8px}header .brand{flex-basis:115px}header .brand img{width:115px}header .nav>.apply{padding:12px 10px;font-size:14px}}
/* University menu: category, department and individual course. */
.university-menu{display:flex;align-items:center;gap:3px}.uni-toggle{border:0;background:transparent;color:#200060;min-width:28px;min-height:40px;font-size:18px;cursor:pointer}
.university-menu:focus-within>.drop,.university-menu.is-open>.drop{display:block}
.university-menu>.drop{width:250px}.uni-branch{position:relative}.uni-row{display:flex;align-items:center;justify-content:space-between}.uni-row>a{flex:1}
.uni-panel{display:none;position:absolute;left:100%;top:0;width:270px;background:#fff;border-radius:10px;padding:10px;box-shadow:0 14px 36px #1d0b5224;max-height:65vh;overflow:visible}
.uni-panel .uni-panel{width:300px}.uni-panel a{white-space:normal;line-height:1.4}.uni-branch:hover>.uni-panel,.uni-branch:focus-within>.uni-panel,.uni-branch.is-open>.uni-panel{display:block}
.uni-panel .uni-panel{left:auto;right:100%;max-height:65vh;overflow-y:auto}
.university-menu a:focus-visible,.uni-toggle:focus-visible{outline:2px solid #f5a800;outline-offset:2px}
@media(max-width:1100px){header .nav .university-menu{flex-wrap:wrap}header .nav .uni-panel,header .nav .uni-panel .uni-panel{position:static;width:100%;max-height:none;padding-left:16px;box-shadow:none}.uni-row{width:100%}}
.services-menu{display:flex;align-items:center;gap:3px}.services-toggle{border:0;background:transparent;color:#200060;min-width:28px;min-height:40px;font-size:18px;cursor:pointer}.services-menu:focus-within>.drop,.services-menu.is-open>.drop{display:block}.services-menu>.drop{min-width:260px}.service-copy{max-width:1000px}.service-copy section{margin-bottom:35px}.services-menu a:focus-visible,.services-toggle:focus-visible{outline:2px solid #f5a800;outline-offset:2px}.service-copy li{margin-bottom:12px;line-height:1.6}
/* Solid brand background for service headings without a photograph. */
.innerhero{background-color:#2a0568}
.opportunities-menu{display:flex;align-items:center;gap:3px}.opportunities-toggle{border:0;background:transparent;color:#200060;min-width:28px;min-height:40px;font-size:18px;cursor:pointer}.opportunities-menu:focus-within>.drop,.opportunities-menu.is-open>.drop{display:block}.opportunities-menu>.drop{min-width:290px;left:auto;right:0}.opportunities-menu a:focus-visible,.opportunities-toggle:focus-visible{outline:2px solid #f5a800;outline-offset:2px}
/* Matching solid purple dropdown triangles across all header sections. */
.dropdown-triangle{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #200060;vertical-align:middle}
.about-toggle,.courses-toggle,.services-toggle,.opportunities-toggle,.university-menu>.uni-toggle{display:inline-flex;align-items:center;justify-content:center;padding:8px;line-height:1}
/* Regular weight for the Level 2 and Level 3 dropdown labels. */
header .courses-menu .course-level-row>a{font-weight:400}
/* Homepage network / quality sections - added to the latest CTC build */
.networkShowcase{background:#f7f5f2;padding:72px 0 60px;overflow:hidden}.awardingShowcase{padding-top:78px}.networkHead{text-align:center}.networkHead h2{font-family:Georgia,serif;color:#200060;font-size:clamp(40px,4.2vw,58px);margin:12px 0 18px}.networkHead>p{max-width:850px;margin:0 auto 38px;font-size:18px;line-height:1.65}.networkViewport{overflow:hidden;width:100%;padding:4px 0 20px}.networkTrack{display:flex;gap:24px;width:max-content;animation:networkRun 42s linear infinite}.networkTrackReverse{animation-name:networkRunReverse}.networkViewport:hover .networkTrack{animation-play-state:paused}.networkCard{width:360px;height:220px;flex:0 0 360px;background:#fff;border:1px solid #e8e3ef;border-radius:22px;box-shadow:0 10px 30px #24105a0d;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}.networkCard strong,.recognitionCard strong{font-family:Georgia,serif;color:#200060;font-size:29px}.networkCard span,.recognitionCard span{margin-top:18px;color:#f5a800;font-weight:900;text-transform:uppercase;letter-spacing:1px}.recognitionShowcase{background:#fff;padding:78px 0 82px}.recognitionGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}.recognitionCard{min-height:180px;border:1px solid #e8e3ef;border-radius:18px;background:#fff;box-shadow:0 10px 28px #24105a0d;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px}@keyframes networkRun{to{transform:translateX(calc(-384px * 6))}}@keyframes networkRunReverse{from{transform:translateX(calc(-384px * 6))}to{transform:translateX(0)}}@media(max-width:700px){.networkShowcase,.recognitionShowcase{padding:52px 0}.networkCard{width:280px;flex-basis:280px;height:180px}.networkCard strong,.recognitionCard strong{font-size:24px}.recognitionGrid{grid-template-columns:1fr}.recognitionCard{min-height:150px}@keyframes networkRun{to{transform:translateX(calc(-304px * 6))}}@keyframes networkRunReverse{from{transform:translateX(calc(-304px * 6))}to{transform:translateX(0)}}}@media(prefers-reduced-motion:reduce){.networkTrack{animation:none}}
/* EduEx-reference university application form - CTC branded */
.eduex-style-form textarea{
width:100%; box-sizing:border-box; border:1px solid #d8d1e7; border-radius:10px;
padding:16px; font:inherit; resize:vertical; background:#fff;
}
.eduex-style-form select{background:#fff}
.eduex-style-form .eduex-consent{align-items:center}
.eduex-style-form .btn{margin-top:4px}
/* ===== Premium CTC University Application Form ===== */
.ctc-application-section{
background:linear-gradient(180deg,#f8f6fc 0%,#ffffff 100%);
padding:72px 0 88px;
}
.ctc-application-shell{
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:28px;
align-items:start;
}
.ctc-application-aside{
position:sticky;
top:118px;
overflow:hidden;
border-radius:24px;
padding:38px 32px;
color:#fff;
background:
radial-gradient(circle at 100% 0%,rgba(255,255,255,.15),transparent 34%),
linear-gradient(155deg,#3b0798 0%,#27006d 72%);
box-shadow:0 24px 55px rgba(45,2,115,.18);
}
.ctc-application-aside:after{
content:"";
position:absolute;
width:180px;height:180px;border:1px solid rgba(255,255,255,.14);
border-radius:50%;right:-92px;bottom:-72px;
}
.ctc-app-kicker,.ctc-app-mini{
display:inline-block;
font-size:12px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.ctc-app-kicker{color:#ff6a70}
.ctc-application-aside h2{
color:#fff;
font-family:Georgia,serif;
font-size:34px;
line-height:1.08;
margin:12px 0 16px;
}
.ctc-application-aside>p{
color:rgba(255,255,255,.82);
line-height:1.7;
margin:0 0 30px;
}
.ctc-app-steps{display:grid;gap:18px}
.ctc-app-step{
display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center;
padding:14px 0;border-top:1px solid rgba(255,255,255,.13);
}
.ctc-app-step>span{
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.12);font-weight:800;font-size:12px;
}
.ctc-app-step strong{display:block;color:#fff;font-size:15px}
.ctc-app-step small{display:block;color:rgba(255,255,255,.64);margin-top:3px}
.ctc-app-help{
margin-top:28px;padding:20px;border-radius:16px;
background:rgba(255,255,255,.09);position:relative;z-index:1;
}
.ctc-app-help strong{display:block;margin-bottom:7px}
.ctc-app-help p{margin:0;color:rgba(255,255,255,.78);line-height:1.6;font-size:14px}
.ctc-app-help a{color:#fff;text-decoration:none}
.ctc-application-card{
background:#fff;border:1px solid #ebe6f3;border-radius:24px;
padding:40px;box-shadow:0 24px 60px rgba(34,13,76,.08);
}
.ctc-app-card-head{margin-bottom:24px}
.ctc-app-mini{color:#f5a800}
.ctc-app-card-head h2{
margin:8px 0 8px;color:#200060;font-family:Georgia,serif;
font-size:clamp(30px,3vw,42px);line-height:1.08;
}
.ctc-app-card-head p{margin:0;color:#5d5968}
.ctc-app-notice{
display:grid;grid-template-columns:36px 1fr;gap:13px;align-items:center;
padding:16px 18px;margin:0 0 30px;border-radius:14px;
background:#f5f1ff;border:1px solid #e5dcfb;color:#312943;
}
.ctc-notice-icon{
width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
background:#200060;color:#fff;font-family:Georgia,serif;font-weight:700;
}
.ctc-app-notice p{margin:0;line-height:1.55;font-size:14px}
.ctc-premium-form{gap:20px 18px}
.ctc-form-section-title{
display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:0 0 14px;
border-bottom:1px solid #ece8f2;
}
.ctc-form-section-title:first-child{margin-top:0}
.ctc-form-section-title>span{
width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
background:#200060;color:#fff;font-weight:800;font-size:12px;
}
.ctc-form-section-title strong{display:block;color:#211a32;font-size:17px}
.ctc-form-section-title small{display:block;color:#817a8e;margin-top:2px;font-weight:400}
.ctc-premium-form label>span:first-child{
display:block;margin-bottom:8px;color:#211a32;font-weight:750;font-size:14px;
}
.ctc-premium-form label>span b{color:#f5a800}
.ctc-premium-form label>span em{
color:#8b8494;font-style:normal;font-size:12px;font-weight:600;margin-left:5px;
}
.ctc-premium-form input:not([type="checkbox"]),
.ctc-premium-form select,
.ctc-premium-form textarea{
width:100%;box-sizing:border-box;border:1px solid #dcd6e8;border-radius:12px;
background:#fbfafe;color:#1d1728;font:inherit;outline:none;
transition:border-color .2s,box-shadow .2s,background .2s;
}
.ctc-premium-form input:not([type="checkbox"]),
.ctc-premium-form select{height:56px;padding:0 16px}
.ctc-premium-form textarea{padding:16px;min-height:128px;resize:vertical}
.ctc-premium-form input:focus,
.ctc-premium-form select:focus,
.ctc-premium-form textarea:focus{
border-color:#6c40c5;background:#fff;box-shadow:0 0 0 4px rgba(53,16,138,.08);
}
.ctc-premium-form input::placeholder,.ctc-premium-form textarea::placeholder{color:#9a94a3}
.ctc-consent-row{
display:flex!important;align-items:flex-start;gap:11px;padding:16px 18px;
border-radius:12px;background:#faf9fc;border:1px solid #eeeaf3;
}
.ctc-consent-row input{
width:18px!important;height:18px!important;min-width:18px;margin:1px 0 0;accent-color:#200060;
}
.ctc-consent-row span{margin:0!important;font-size:14px!important;line-height:1.45;font-weight:600!important}
.ctc-submit-button{
height:58px;border:0;border-radius:12px;padding:0 22px;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:12px;
background:linear-gradient(90deg,#e91d2a,#f12830);color:#fff;
font-weight:800;font-size:16px;box-shadow:0 12px 26px rgba(233,29,42,.18);
transition:transform .2s,box-shadow .2s;
}
.ctc-submit-button:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(233,29,42,.24)}
.ctc-submit-arrow{font-size:22px;line-height:1}
.ctc-form-footnote{text-align:center;margin:-4px 0 0;color:#8a8491;font-size:12px}
@media(max-width:980px){
.ctc-application-shell{grid-template-columns:1fr}
.ctc-application-aside{position:relative;top:auto}
.ctc-app-steps{grid-template-columns:repeat(3,1fr);gap:10px}
.ctc-app-step{display:block}
.ctc-app-step>span{margin-bottom:10px}
}
@media(max-width:700px){
.ctc-application-section{padding:42px 0 58px}
.ctc-application-aside,.ctc-application-card{padding:26px 20px;border-radius:18px}
.ctc-app-steps{grid-template-columns:1fr}
.ctc-app-step{display:grid}
.ctc-app-step>span{margin-bottom:0}
.ctc-premium-form{grid-template-columns:1fr!important}
.ctc-premium-form>*{grid-column:1/-1!important}
}
/* ===== CTC About page - professional text-led redesign, no content photography ===== */
.ctc-about-hero{
position:relative;overflow:hidden;color:#fff;padding:92px 0 98px;
background:linear-gradient(118deg,#250064 0%,#3c128b 47%,#a89cbd 100%);
}
.ctc-about-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,0,67,.18),transparent 65%)}
.ctc-about-hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;right:-120px;top:-230px;background:rgba(255,255,255,.10);filter:blur(2px)}
.ctc-about-hero-content{position:relative;z-index:1;max-width:1120px}
.ctc-about-kicker,.ctc-about-section-kicker{display:inline-block;color:#ef2833;font-size:13px;font-weight:850;letter-spacing:.22em;text-transform:uppercase}
.ctc-about-hero h1{max-width:1050px;margin:18px 0 24px;font-family:Georgia,serif;font-size:clamp(48px,6.5vw,86px);line-height:.98;color:#fff;letter-spacing:-.025em}
.ctc-about-hero p{max-width:970px;margin:0;color:rgba(255,255,255,.9);font-size:20px;line-height:1.7}
.ctc-about-intro{padding:88px 0 84px;background:#fff}
.ctc-about-lead-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.ctc-about-lead-title h2,.ctc-about-section-head h2,.ctc-about-experience h2,.ctc-about-london h2{font-family:Georgia,serif;color:#200060;font-size:clamp(34px,4vw,54px);line-height:1.08;margin:14px 0 0}
.ctc-about-lead-copy p{font-size:17px;line-height:1.8;color:#494454;margin:0 0 18px}
.ctc-about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:62px}
.ctc-about-pillar{position:relative;padding:30px 28px 32px;border:1px solid #ece8f2;border-radius:20px;background:#fbfafe;box-shadow:0 14px 34px rgba(45,2,115,.05)}
.ctc-pillar-number{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#200060;color:#fff;font-weight:850;font-size:12px;margin-bottom:22px}
.ctc-about-pillar h3{font-family:Georgia,serif;color:#200060;font-size:25px;margin:0 0 12px}
.ctc-about-pillar p{margin:0;color:#5b5564;line-height:1.7}
.ctc-about-dark{padding:88px 0;background:linear-gradient(135deg,#260064,#200060);color:#fff}
.ctc-about-dark-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}
.ctc-about-section-kicker.light{color:#ff5a62}
.ctc-about-dark-heading h2{font-family:Georgia,serif;color:#fff;font-size:clamp(36px,4vw,55px);line-height:1.08;margin:14px 0 0}
.ctc-about-dark-content{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ctc-about-dark-item{padding:25px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.07)}
.ctc-about-dark-item h3{margin:0 0 9px;color:#fff;font-size:19px}
.ctc-about-dark-item p{margin:0;color:rgba(255,255,255,.78);line-height:1.65;font-size:15px}
.ctc-about-scope{padding:88px 0;background:#f8f6fb}
.ctc-about-section-head{text-align:center;max-width:850px;margin:0 auto 42px}
.ctc-about-section-head p{font-size:17px;line-height:1.75;color:#5c5666;margin:18px auto 0}
.ctc-about-scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ctc-scope-card{padding:38px;border-radius:22px;background:#fff;border:1px solid #e9e4f0;box-shadow:0 14px 36px rgba(45,2,115,.06)}
.ctc-scope-card.featured{border-top:4px solid #200060}
.ctc-scope-tag{display:inline-block;color:#f5a800;font-size:11px;font-weight:850;letter-spacing:.15em;margin-bottom:15px}
.ctc-scope-card h3{font-family:Georgia,serif;color:#200060;font-size:29px;margin:0 0 14px}
.ctc-scope-card p{color:#595362;line-height:1.75;margin:0 0 22px}
.ctc-scope-card a{color:#200060;font-weight:800;text-decoration:none}
.ctc-about-experience{padding:88px 0;background:#fff}
.ctc-about-experience-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.ctc-about-experience-grid>div:first-child>p{font-size:17px;line-height:1.78;color:#5b5564;margin:18px 0 0}
.ctc-about-checks{display:grid;gap:14px}
.ctc-about-checks>div{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:19px 20px;border-radius:16px;background:#faf9fc;border:1px solid #ece8f2}
.ctc-about-checks>div>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#200060;color:#fff;font-weight:900}
.ctc-about-checks p{margin:0;color:#5c5666;line-height:1.55}
.ctc-about-checks strong{color:#282132}
.ctc-about-london{padding:86px 0;background:#f3f0f8}
.ctc-about-london-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.ctc-about-london-copy p{font-size:17px;line-height:1.8;color:#585160;margin:18px 0 0}
.ctc-about-values{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ctc-about-values>div{padding:22px;border-radius:16px;background:#fff;border:1px solid #e7e2ed}
.ctc-about-values strong{display:block;color:#200060;font-family:Georgia,serif;font-size:21px;margin-bottom:6px}
.ctc-about-values span{color:#6a6371;font-size:14px;line-height:1.5}
.ctc-about-provider-note{padding:34px 0 0;background:#fff}
.ctc-provider-note-inner{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start;padding:22px 24px;border-radius:16px;background:#f5f1ff;border-left:4px solid #200060}
.ctc-provider-note-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#200060;color:#fff;font-family:Georgia,serif;font-weight:800}
.ctc-provider-note-inner strong{color:#200060}
.ctc-provider-note-inner p{margin:5px 0 0;color:#5b5564;line-height:1.65;font-size:14px}
.ctc-about-cta{margin-top:70px}
.ctc-about-cta>div:first-child p{margin:10px 0 0;max-width:660px}
@media(max-width:900px){
.ctc-about-lead-grid,.ctc-about-dark-grid,.ctc-about-experience-grid,.ctc-about-london-inner{grid-template-columns:1fr;gap:36px}
.ctc-about-pillars{grid-template-columns:1fr}
.ctc-about-scope-grid{grid-template-columns:1fr}
.ctc-about-dark-content{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.ctc-about-hero{padding:64px 0 68px}
.ctc-about-hero p{font-size:17px}
.ctc-about-intro,.ctc-about-dark,.ctc-about-scope,.ctc-about-experience,.ctc-about-london{padding:58px 0}
.ctc-about-dark-content,.ctc-about-values{grid-template-columns:1fr}
.ctc-scope-card{padding:28px 24px}
}
/* ===== About hero: modern classroom with students ===== */
.ctc-about-hero{
background:
linear-gradient(90deg,
rgba(37,0,100,.96) 0%,
rgba(45,2,115,.91) 34%,
rgba(53,16,138,.74) 57%,
rgba(53,16,138,.34) 78%,
rgba(31,0,82,.20) 100%
),
url("https://images.unsplash.com/photo-1758270703884-e1c40c43465f?auto=format&fit=crop&w=2400&q=90") center 42% / cover no-repeat !important;
}
.ctc-about-hero:before{
background:linear-gradient(180deg,rgba(25,0,67,.08),rgba(25,0,67,.18)) !important;
}
.ctc-about-hero-glow{
display:none !important;
}
@media(max-width:760px){
.ctc-about-hero{
background:
linear-gradient(90deg,rgba(37,0,100,.94),rgba(53,16,138,.72)),
url("https://images.unsplash.com/photo-1758270703884-e1c40c43465f?auto=format&fit=crop&w=1600&q=88") 58% center / cover no-repeat !important;
}
}
/* ===== CTC Mission & Vision - professional text-led redesign ===== */
.ctc-mv-hero .aboutHeroOverlay{
background:linear-gradient(90deg,rgba(36,0,98,.96) 0%,rgba(48,7,119,.83) 48%,rgba(27,0,66,.46) 100%) !important;
}
.ctc-mv-hero .aboutHeroInner{max-width:1050px}
.ctc-mv-hero .aboutHeroInner p{max-width:930px;line-height:1.65}
.ctc-mv-intro{padding:86px 0 76px;background:#fff}
.ctc-mv-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.ctc-mv-kicker{display:inline-block;color:#f5a800;font-size:12px;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
.ctc-mv-intro h2,.ctc-mv-section-head h2,.ctc-mv-priority-title h2{
margin:13px 0 0;font-family:Georgia,serif;color:#200060;
font-size:clamp(35px,4vw,54px);line-height:1.08
}
.ctc-mv-intro-copy p{margin:0 0 18px;color:#575160;font-size:17px;line-height:1.8}
.ctc-mv-core{padding:0 0 86px;background:#fff}
.ctc-mv-core-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ctc-mv-core-card{position:relative;overflow:hidden;padding:42px 38px;border-radius:24px;min-height:430px}
.ctc-mv-core-card.mission{background:#200060;color:#fff}
.ctc-mv-core-card.vision{background:#f4f0fb;border:1px solid #e5dcf3;color:#282132}
.ctc-mv-core-card:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-95px;bottom:-105px;border:1px solid currentColor;opacity:.08}
.ctc-mv-card-label{display:inline-block;color:#ff555d;font-size:11px;font-weight:850;letter-spacing:.18em;margin-bottom:18px}
.ctc-mv-core-card h2{font-family:Georgia,serif;font-size:clamp(30px,3.1vw,43px);line-height:1.1;margin:0 0 22px}
.ctc-mv-core-card.mission h2{color:#fff}
.ctc-mv-core-card.vision h2{color:#200060}
.ctc-mv-core-card p{font-size:16px;line-height:1.75;margin:0 0 16px}
.ctc-mv-core-card.mission p{color:rgba(255,255,255,.82)}
.ctc-mv-core-card.vision p{color:#5a5462}
.ctc-mv-principles{padding:88px 0;background:#f8f6fb}
.ctc-mv-section-head{text-align:center;max-width:860px;margin:0 auto 44px}
.ctc-mv-section-head>p{margin:17px auto 0;color:#615a68;font-size:17px;line-height:1.7}
.ctc-mv-principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ctc-mv-principle-grid article{padding:29px 27px;border-radius:18px;background:#fff;border:1px solid #eae5f0;box-shadow:0 12px 30px rgba(45,2,115,.05)}
.ctc-mv-principle-grid article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#200060;color:#fff;font-size:11px;font-weight:850;margin-bottom:20px}
.ctc-mv-principle-grid h3{margin:0 0 10px;font-family:Georgia,serif;color:#200060;font-size:23px}
.ctc-mv-principle-grid p{margin:0;color:#5e5766;line-height:1.68;font-size:15px}
.ctc-mv-priorities{padding:88px 0;background:linear-gradient(135deg,#260064,#200060);color:#fff}
.ctc-mv-priority-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.ctc-mv-kicker.light{color:#ffd36a}
.ctc-mv-priority-title h2{color:#fff}
.ctc-mv-priority-title p{color:rgba(255,255,255,.76);line-height:1.7;font-size:16px}
.ctc-mv-priority-list{display:grid;gap:12px}
.ctc-mv-priority-list>div{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:20px 22px;border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.ctc-mv-priority-list strong{color:#fff;font-size:16px}
.ctc-mv-priority-list span{color:rgba(255,255,255,.75);line-height:1.55;font-size:14px}
.ctc-mv-journey{padding:88px 0;background:#fff}
.ctc-mv-section-head.compact{margin-bottom:36px}
.ctc-mv-journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #e7e1ee;border-radius:20px;overflow:hidden}
.ctc-mv-journey-grid>div{padding:28px 24px;min-height:190px;border-right:1px solid #e7e1ee;background:#fff}
.ctc-mv-journey-grid>div:last-child{border-right:0}
.ctc-mv-journey-grid>div>span{color:#f5a800;font-size:11px;font-weight:850;letter-spacing:.12em}
.ctc-mv-journey-grid strong{display:block;margin:12px 0 9px;color:#200060;font-family:Georgia,serif;font-size:21px}
.ctc-mv-journey-grid p{margin:0;color:#625b69;line-height:1.6;font-size:14px}
.ctc-mv-provider-note{padding:0 0 20px;background:#fff}
.ctc-mv-cta{margin-top:58px}
@media(max-width:920px){
.ctc-mv-intro-grid,.ctc-mv-core-grid,.ctc-mv-priority-grid{grid-template-columns:1fr;gap:36px}
.ctc-mv-principle-grid{grid-template-columns:1fr 1fr}
.ctc-mv-journey-grid{grid-template-columns:1fr 1fr}
.ctc-mv-journey-grid>div:nth-child(2){border-right:0}
.ctc-mv-journey-grid>div{border-bottom:1px solid #e7e1ee}
.ctc-mv-journey-grid>div:nth-child(3),.ctc-mv-journey-grid>div:nth-child(4){border-bottom:0}
}
@media(max-width:620px){
.ctc-mv-intro,.ctc-mv-principles,.ctc-mv-priorities,.ctc-mv-journey{padding:58px 0}
.ctc-mv-core{padding-bottom:58px}
.ctc-mv-core-card{padding:30px 24px;min-height:0}
.ctc-mv-principle-grid,.ctc-mv-journey-grid{grid-template-columns:1fr}
.ctc-mv-journey-grid>div{border-right:0!important;border-bottom:1px solid #e7e1ee!important}
.ctc-mv-journey-grid>div:last-child{border-bottom:0!important}
.ctc-mv-priority-list>div{grid-template-columns:1fr;gap:7px}
}
/* ===== CTC Opportunity + Our Approach - professional text-led pages ===== */
.ctc-detail-hero .aboutHeroOverlay{
background:linear-gradient(90deg,rgba(36,0,98,.96) 0%,rgba(48,7,119,.84) 47%,rgba(28,0,70,.46) 100%) !important;
}
.ctc-detail-hero .aboutHeroInner{max-width:1060px}
.ctc-detail-hero .aboutHeroInner p{max-width:950px;line-height:1.65}
.ctc-detail-intro{padding:86px 0;background:#fff}
.ctc-detail-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.ctc-detail-kicker{display:inline-block;color:#f5a800;font-size:12px;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
.ctc-detail-kicker.light{color:#ffd36a}
.ctc-detail-intro h2,.ctc-detail-head h2,.ctc-detail-purple h2,.ctc-detail-path h2,.ctc-detail-improve h2{
margin:13px 0 0;font-family:Georgia,serif;color:#200060;
font-size:clamp(35px,4vw,54px);line-height:1.08
}
.ctc-detail-copy p{margin:0 0 18px;color:#575160;font-size:17px;line-height:1.8}
.ctc-detail-feature,.ctc-detail-section{padding:86px 0;background:#f8f6fb}
.ctc-detail-section{background:#fff}
.ctc-detail-head{text-align:center;max-width:900px;margin:0 auto 42px}
.ctc-detail-head>p{margin:17px auto 0;color:#615a68;font-size:17px;line-height:1.7}
.ctc-detail-card-grid{display:grid;gap:20px}
.ctc-detail-card-grid.four{grid-template-columns:repeat(4,1fr)}
.ctc-detail-card-grid.three{grid-template-columns:repeat(3,1fr)}
.ctc-detail-card-grid article{
padding:29px 27px;border-radius:19px;background:#fff;border:1px solid #eae5f0;
box-shadow:0 12px 30px rgba(45,2,115,.05)
}
.ctc-detail-section .ctc-detail-card-grid article{background:#faf9fc}
.ctc-detail-card-grid article>span{
display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
background:#200060;color:#fff;font-size:11px;font-weight:850;margin-bottom:20px
}
.ctc-detail-card-grid h3{margin:0 0 10px;font-family:Georgia,serif;color:#200060;font-size:23px}
.ctc-detail-card-grid p{margin:0;color:#5e5766;line-height:1.68;font-size:15px}
.ctc-detail-purple{padding:88px 0;background:linear-gradient(135deg,#260064,#200060);color:#fff}
.ctc-detail-purple-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.ctc-detail-purple h2{color:#fff}
.ctc-detail-purple-grid>div:first-child>p{color:rgba(255,255,255,.76);font-size:16px;line-height:1.7}
.ctc-detail-list{display:grid;gap:12px}
.ctc-detail-list>div{
display:grid;grid-template-columns:180px 1fr;gap:20px;padding:20px 22px;
border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}
.ctc-detail-list strong{color:#fff;font-size:16px}
.ctc-detail-list span{color:rgba(255,255,255,.76);line-height:1.55;font-size:14px}
.ctc-detail-path{padding:86px 0;background:#f4f1f8}
.ctc-detail-path-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.ctc-detail-path-grid>div:first-child>p{font-size:17px;line-height:1.75;color:#5c5664;margin:18px 0 0}
.ctc-detail-checks{display:grid;gap:13px}
.ctc-detail-checks>div{
display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;
padding:18px 20px;border-radius:15px;background:#fff;border:1px solid #e7e1ed
}
.ctc-detail-checks b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#200060;color:#fff}
.ctc-detail-checks strong{display:block;color:#200060;margin-bottom:4px}
.ctc-detail-checks small{display:block;color:#625b69;line-height:1.5;font-size:14px}
.ctc-detail-balance{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ctc-detail-balance article{padding:36px 34px;border-radius:22px;border:1px solid #e7e1ed;background:#faf9fc}
.ctc-detail-balance article:first-child{border-top:4px solid #200060}
.ctc-detail-balance article:last-child{border-top:4px solid #f5a800}
.ctc-detail-balance article>span{font-size:11px;letter-spacing:.16em;color:#f5a800;font-weight:850}
.ctc-detail-balance h3{font-family:Georgia,serif;color:#200060;font-size:28px;line-height:1.15;margin:12px 0 20px}
.ctc-detail-balance ul{margin:0;padding-left:20px;color:#5c5664}
.ctc-detail-balance li{padding:6px 0;line-height:1.6}
.ctc-detail-improve{padding:78px 0;background:#fff}
.ctc-detail-improve-inner{max-width:920px;text-align:center}
.ctc-detail-improve p{margin:18px auto 0;color:#5b5563;font-size:17px;line-height:1.78}
.ctc-detail-cta{margin-top:58px}
@media(max-width:980px){
.ctc-detail-intro-grid,.ctc-detail-purple-grid,.ctc-detail-path-grid{grid-template-columns:1fr;gap:36px}
.ctc-detail-card-grid.four{grid-template-columns:1fr 1fr}
.ctc-detail-card-grid.three{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
.ctc-detail-intro,.ctc-detail-feature,.ctc-detail-section,.ctc-detail-purple,.ctc-detail-path,.ctc-detail-improve{padding:58px 0}
.ctc-detail-card-grid.four,.ctc-detail-card-grid.three,.ctc-detail-balance{grid-template-columns:1fr}
.ctc-detail-list>div{grid-template-columns:1fr;gap:7px}
.ctc-detail-balance article{padding:28px 24px}
}
/* ===== About page: red top accent for University & Higher-Education card ===== */
.ctc-about-scope-grid .ctc-scope-card:nth-child(2){
border-top:4px solid #f5a800 !important;
}
/* ===== CTC Opportunities pages: Partnerships + Careers professional redesign ===== */
.ctc-opps-hero .aboutHeroOverlay{
background:linear-gradient(90deg,rgba(36,0,98,.96) 0%,rgba(48,7,119,.84) 47%,rgba(28,0,70,.45) 100%) !important;
}
.ctc-opps-hero .aboutHeroInner{max-width:1080px}
.ctc-opps-hero .aboutHeroInner p{max-width:960px;line-height:1.65}
.ctc-opps-intro{padding:86px 0;background:#fff}
.ctc-opps-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.ctc-opps-kicker{display:inline-block;color:#f5a800;font-size:12px;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
.ctc-opps-kicker.light{color:#ffd36a}
.ctc-opps-intro h2,.ctc-opps-head h2,.ctc-opps-purple h2,.ctc-opps-path h2,.ctc-opps-interest h2,.ctc-vacancy-status h2{
margin:13px 0 0;font-family:Georgia,serif;color:#200060;
font-size:clamp(35px,4vw,54px);line-height:1.08
}
.ctc-opps-copy p{margin:0 0 18px;color:#575160;font-size:17px;line-height:1.8}
.ctc-opps-feature,.ctc-opps-section{padding:86px 0;background:#f8f6fb}
.ctc-opps-section{background:#fff}
.ctc-opps-head{text-align:center;max-width:900px;margin:0 auto 42px}
.ctc-opps-head>p{margin:17px auto 0;color:#615a68;font-size:17px;line-height:1.7}
.ctc-opps-card-grid{display:grid;gap:20px}
.ctc-opps-card-grid.three{grid-template-columns:repeat(3,1fr)}
.ctc-opps-card-grid article{
padding:29px 27px;border-radius:19px;background:#fff;border:1px solid #eae5f0;
box-shadow:0 12px 30px rgba(45,2,115,.05)
}
.ctc-opps-card-grid article:nth-child(even){border-top:4px solid #f5a800}
.ctc-opps-card-grid article:nth-child(odd){border-top:4px solid #200060}
.ctc-opps-card-grid article>span{
display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
background:#200060;color:#fff;font-size:11px;font-weight:850;margin-bottom:20px
}
.ctc-opps-card-grid h3{margin:0 0 10px;font-family:Georgia,serif;color:#200060;font-size:23px}
.ctc-opps-card-grid p{margin:0;color:#5e5766;line-height:1.68;font-size:15px}
.ctc-opps-purple{padding:88px 0;background:linear-gradient(135deg,#260064,#200060);color:#fff}
.ctc-opps-purple-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.ctc-opps-purple h2{color:#fff}
.ctc-opps-purple-grid>div:first-child>p{color:rgba(255,255,255,.76);font-size:16px;line-height:1.7}
.ctc-opps-list{display:grid;gap:12px}
.ctc-opps-list>div{
display:grid;grid-template-columns:185px 1fr;gap:20px;padding:20px 22px;
border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}
.ctc-opps-list strong{color:#fff;font-size:16px}
.ctc-opps-list span{color:rgba(255,255,255,.76);line-height:1.55;font-size:14px}
.ctc-opps-balance{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ctc-opps-balance article{padding:36px 34px;border-radius:22px;border:1px solid #e7e1ed;background:#faf9fc}
.ctc-opps-balance article:first-child{border-top:4px solid #200060}
.ctc-opps-balance article:last-child{border-top:4px solid #f5a800}
.ctc-opps-balance article>span{font-size:11px;letter-spacing:.16em;color:#f5a800;font-weight:850}
.ctc-opps-balance h3{font-family:Georgia,serif;color:#200060;font-size:28px;line-height:1.15;margin:12px 0 20px}
.ctc-opps-balance ul{margin:0;padding-left:20px;color:#5c5664}
.ctc-opps-balance li{padding:6px 0;line-height:1.6}
.ctc-opps-path{padding:86px 0;background:#f4f1f8}
.ctc-opps-path-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.ctc-opps-path-grid>div:first-child>p{font-size:17px;line-height:1.75;color:#5c5664;margin:18px 0 0}
.ctc-opps-checks{display:grid;gap:13px}
.ctc-opps-checks>div{
display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;
padding:18px 20px;border-radius:15px;background:#fff;border:1px solid #e7e1ed
}
.ctc-opps-checks b{
display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
background:#200060;color:#fff;font-size:12px
}
.ctc-opps-checks strong{display:block;color:#200060;margin-bottom:4px}
.ctc-opps-checks small{display:block;color:#625b69;line-height:1.5;font-size:14px}
.ctc-opps-interest,.ctc-vacancy-status{padding:78px 0;background:#fff}
.ctc-opps-interest-inner,.ctc-vacancy-status-inner{max-width:930px;text-align:center}
.ctc-opps-interest p,.ctc-vacancy-status p{margin:18px auto 0;color:#5b5563;font-size:17px;line-height:1.78}
.ctc-vacancy-status{background:#f8f6fb}
.ctc-vacancy-status-inner{
padding:46px 38px;border-radius:24px;background:#fff;border:1px solid #e7e1ed;
box-shadow:0 16px 38px rgba(45,2,115,.06)
}
.ctc-vacancy-contact{display:inline-block;margin-top:22px;color:#200060;font-weight:800;text-decoration:none}
.ctc-opps-journey{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e7e1ed;border-radius:20px;overflow:hidden}
.ctc-opps-journey>div{padding:28px 24px;min-height:205px;border-right:1px solid #e7e1ed;background:#faf9fc}
.ctc-opps-journey>div:last-child{border-right:0}
.ctc-opps-journey span{color:#f5a800;font-size:11px;font-weight:850;letter-spacing:.12em}
.ctc-opps-journey strong{display:block;margin:12px 0 9px;color:#200060;font-family:Georgia,serif;font-size:21px}
.ctc-opps-journey p{margin:0;color:#625b69;line-height:1.6;font-size:14px}
.ctc-opps-cta{margin-top:58px}
@media(max-width:980px){
.ctc-opps-intro-grid,.ctc-opps-purple-grid,.ctc-opps-path-grid{grid-template-columns:1fr;gap:36px}
.ctc-opps-card-grid.three{grid-template-columns:1fr 1fr}
.ctc-opps-journey{grid-template-columns:1fr 1fr}
.ctc-opps-journey>div:nth-child(2){border-right:0}
}
@media(max-width:700px){
.ctc-opps-intro,.ctc-opps-feature,.ctc-opps-section,.ctc-opps-purple,.ctc-opps-path,.ctc-opps-interest,.ctc-vacancy-status{padding:58px 0}
.ctc-opps-card-grid.three,.ctc-opps-balance,.ctc-opps-journey{grid-template-columns:1fr}
.ctc-opps-list>div{grid-template-columns:1fr;gap:7px}
.ctc-opps-balance article{padding:28px 24px}
.ctc-opps-journey>div{border-right:0!important;border-bottom:1px solid #e7e1ed}
.ctc-opps-journey>div:last-child{border-bottom:0}
.ctc-vacancy-status-inner{padding:32px 22px}
}
/* ===== CTC Homepage 2026: professional, informative redesign ===== */
.home-kicker{
display:inline-block;
color:#f5a800;
font-size:12px;
font-weight:850;
letter-spacing:.2em;
text-transform:uppercase;
}
.home-kicker.light{color:#ffd36a}
.home-proof{
position:relative;
z-index:4;
margin-top:-38px;
padding:0 0 20px;
}
.home-proof-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
background:#fff;
border:1px solid #e8e2ef;
border-radius:22px;
box-shadow:0 18px 45px rgba(38,0,98,.12);
overflow:hidden;
}
.home-proof-grid>div{
padding:25px 25px 23px;
border-right:1px solid #ebe6f0;
}
.home-proof-grid>div:last-child{border-right:0}
.home-proof-grid span{
display:block;
color:#f5a800;
font-size:10px;
font-weight:850;
letter-spacing:.12em;
margin-bottom:9px;
}
.home-proof-grid strong{
display:block;
color:#200060;
font-family:Georgia,serif;
font-size:20px;
margin-bottom:7px;
}
.home-proof-grid small{
display:block;
color:#625b69;
font-size:13px;
line-height:1.55;
}
.home-welcome{padding:82px 0 76px;background:#fff}
.home-welcome-grid{
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:76px;
align-items:start;
}
.home-welcome-title h2,
.home-section-head h2,
.home-why h2,
.home-final-cta h2{
margin:13px 0 0;
font-family:Georgia,serif;
color:#200060;
font-size:clamp(36px,4.2vw,58px);
line-height:1.06;
}
.home-welcome-copy p{
margin:0 0 18px;
color:#575160;
font-size:17px;
line-height:1.8;
}
.home-inline-links{
display:flex;
flex-wrap:wrap;
gap:22px;
margin-top:25px;
}
.home-inline-links a{
color:#200060;
text-decoration:none;
font-weight:800;
}
.home-inline-links a:last-child{color:#f5a800}
.home-what{padding:84px 0;background:#f8f6fb}
.home-section-head{
max-width:930px;
margin:0 auto 42px;
text-align:center;
}
.home-section-head>p{
max-width:820px;
margin:17px auto 0;
color:#615a68;
font-size:17px;
line-height:1.72;
}
.home-what-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:26px;
}
.home-what-card{
position:relative;
padding:39px 38px 36px;
border-radius:23px;
background:#fff;
border:1px solid #e7e1ed;
box-shadow:0 14px 34px rgba(45,2,115,.06);
}
.home-what-card.ctc-provision{border-top:5px solid #200060}
.home-what-card.progression{border-top:5px solid #f5a800}
.home-what-card>span{
color:#f5a800;
font-size:11px;
font-weight:850;
letter-spacing:.17em;
}
.home-what-card h3{
margin:14px 0 16px;
color:#200060;
font-family:Georgia,serif;
font-size:clamp(29px,3vw,40px);
line-height:1.08;
}
.home-what-card p{
margin:0 0 24px;
color:#5b5563;
font-size:16px;
line-height:1.75;
}
.home-what-card a{
color:#200060;
font-weight:850;
text-decoration:none;
}
.home-slider-head>div{max-width:780px}
.home-slider-head p{
max-width:740px;
margin:12px 0 0;
color:#615a68;
font-size:15px;
line-height:1.65;
}
.home-slider-head>a{align-self:flex-end}
.home-learning{
padding:88px 0;
background:linear-gradient(135deg,#24005f 0%,#200060 58%,#4d20a1 100%);
color:#fff;
}
.home-section-head.light h2{color:#fff}
.home-section-head.light>p{color:rgba(255,255,255,.76)}
.home-learning-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.home-learning-grid>div{
min-height:215px;
padding:27px 24px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
}
.home-learning-grid b{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:10px;
background:#fff;
color:#200060;
font-size:11px;
margin-bottom:22px;
}
.home-learning-grid strong{
display:block;
font-family:Georgia,serif;
color:#fff;
font-size:22px;
margin-bottom:10px;
}
.home-learning-grid span{
display:block;
color:rgba(255,255,255,.76);
font-size:14px;
line-height:1.65;
}
.home-learning-link{text-align:center;margin-top:30px}
.home-learning-link a{color:#fff;font-weight:850;text-decoration:none}
.home-provider-note{padding:0 0 64px;background:#fff}
.home-provider-note-inner{
display:grid;
grid-template-columns:44px 1fr;
gap:17px;
align-items:start;
padding:24px 26px;
border-radius:16px;
background:#f4f0fb;
border-left:5px solid #200060;
}
.home-provider-icon{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:#200060;
color:#fff;
font-family:Georgia,serif;
font-weight:800;
}
.home-provider-note strong{display:block;color:#200060;margin-bottom:6px}
.home-provider-note p{margin:0;color:#5f5867;font-size:14px;line-height:1.65}
.home-services{padding:86px 0;background:#f8f6fb}
.home-services-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}
.home-services-grid>a{
display:block;
padding:29px 25px 26px;
border-radius:19px;
background:#fff;
border:1px solid #e7e1ed;
border-top:4px solid #200060;
text-decoration:none;
box-shadow:0 12px 30px rgba(45,2,115,.05);
transition:transform .2s ease,box-shadow .2s ease;
}
.home-services-grid>a:nth-child(even){border-top-color:#f5a800}
.home-services-grid>a:hover{
transform:translateY(-4px);
box-shadow:0 18px 38px rgba(45,2,115,.10);
}
.home-services-grid span{
color:#f5a800;
font-size:10px;
font-weight:850;
letter-spacing:.12em;
}
.home-services-grid h3{
margin:14px 0 10px;
color:#200060;
font-family:Georgia,serif;
font-size:23px;
line-height:1.15;
}
.home-services-grid p{
min-height:105px;
margin:0 0 17px;
color:#5e5766;
font-size:14px;
line-height:1.65;
}
.home-services-grid b{color:#200060;font-size:14px}
.home-sfe-note{
max-width:980px;
margin:25px auto 0;
text-align:center;
color:#6a6470;
font-size:12px;
line-height:1.6;
}
.home-journey{padding:86px 0;background:#fff}
.home-journey-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid #e7e1ed;
border-radius:21px;
overflow:hidden;
}
.home-journey-grid>div{
min-height:205px;
padding:29px 25px;
border-right:1px solid #e7e1ed;
}
.home-journey-grid>div:last-child{border-right:0}
.home-journey-grid span{
color:#f5a800;
font-size:11px;
font-weight:850;
letter-spacing:.12em;
}
.home-journey-grid strong{
display:block;
margin:13px 0 10px;
color:#200060;
font-family:Georgia,serif;
font-size:24px;
}
.home-journey-grid p{
margin:0;
color:#625b69;
font-size:14px;
line-height:1.65;
}
.home-why{
padding:90px 0;
background:linear-gradient(135deg,#250064,#200060);
color:#fff;
}
.home-why-grid{
display:grid;
grid-template-columns:.86fr 1.14fr;
gap:72px;
align-items:start;
}
.home-why h2{color:#fff}
.home-why-grid>div:first-child>p{
color:rgba(255,255,255,.77);
font-size:16px;
line-height:1.75;
margin:18px 0 25px;
}
.home-why-btn{
display:inline-block;
color:#fff;
font-weight:850;
text-decoration:none;
}
.home-why-points{display:grid;gap:12px}
.home-why-points>div{
display:grid;
grid-template-columns:42px 1fr;
gap:15px;
padding:19px 21px;
border-radius:15px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}
.home-why-points b{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:#fff;
color:#200060;
font-size:11px;
}
.home-why-points strong{display:block;color:#fff;margin-bottom:4px}
.home-why-points small{display:block;color:rgba(255,255,255,.75);font-size:14px;line-height:1.5}
.home-final-cta{
padding:78px 0;
background:#f8f6fb;
}
.home-final-cta-inner{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:50px;
align-items:center;
padding:48px 52px;
border-radius:26px;
background:#fff;
border:1px solid #e7e1ed;
box-shadow:0 18px 45px rgba(45,2,115,.07);
}
.home-final-cta-inner>div:first-child>span{
color:#f5a800;
font-size:11px;
font-weight:850;
letter-spacing:.17em;
}
.home-final-cta h2{font-size:clamp(32px,3.6vw,48px)}
.home-final-cta p{color:#615a68;line-height:1.7;margin:15px 0 0}
.home-final-actions{display:grid;gap:11px}
.home-final-actions a{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 19px;
border-radius:12px;
background:#200060;
color:#fff;
text-decoration:none;
font-weight:800;
}
.home-final-actions a:nth-child(2){background:#f5a800}
.home-final-actions a:nth-child(3){background:#f2eef8;color:#200060}
@media(max-width:1000px){
.home-proof-grid{grid-template-columns:1fr 1fr}
.home-proof-grid>div:nth-child(2){border-right:0}
.home-proof-grid>div:nth-child(-n+2){border-bottom:1px solid #ebe6f0}
.home-welcome-grid,.home-why-grid,.home-final-cta-inner{grid-template-columns:1fr;gap:36px}
.home-learning-grid,.home-services-grid{grid-template-columns:1fr 1fr}
.home-journey-grid{grid-template-columns:1fr 1fr}
.home-journey-grid>div:nth-child(2){border-right:0}
.home-journey-grid>div:nth-child(-n+2){border-bottom:1px solid #e7e1ed}
}
@media(max-width:700px){
.home-proof{margin-top:-18px}
.home-proof-grid,.home-what-grid,.home-learning-grid,.home-services-grid,.home-journey-grid{grid-template-columns:1fr}
.home-proof-grid>div{border-right:0;border-bottom:1px solid #ebe6f0}
.home-proof-grid>div:last-child{border-bottom:0}
.home-welcome,.home-what,.home-learning,.home-services,.home-journey,.home-why,.home-final-cta{padding:58px 0}
.home-welcome-grid{gap:30px}
.home-what-card{padding:30px 25px}
.home-services-grid p{min-height:0}
.home-journey-grid>div{border-right:0!important;border-bottom:1px solid #e7e1ed!important}
.home-journey-grid>div:last-child{border-bottom:0!important}
.home-final-cta-inner{padding:32px 24px}
.home-slider-head{display:block}
.home-slider-head>a{display:inline-block;margin-top:16px}
}
/* ===== Homepage highlight numbers: centred, larger, CTC purple ===== */
.home-proof-grid span{
display:block !important;
width:100% !important;
margin:0 0 12px 0 !important;
text-align:center !important;
color:#200060 !important;
font-family:Georgia,serif !important;
font-size:24px !important;
line-height:1 !important;
font-weight:700 !important;
letter-spacing:.04em !important;
}
/* ===== Homepage highlight cards: clean steady layout, no numbers ===== */
.home-proof-grid > div{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
min-height:170px !important;
padding:30px 34px !important;
}
.home-proof-grid > div > span{
display:none !important;
}
.home-proof-grid strong{
margin:0 0 12px 0 !important;
}
/* ===== CTC legal pages: Terms of Services + Privacy Policy ===== */
.ctc-legal-hero{
padding:86px 0 78px;
background:linear-gradient(135deg,#24065f 0%,#200060 62%,#4c2896 100%);
color:#fff;
}
.ctc-legal-kicker{
display:inline-block;color:#ff6875;font-size:11px;font-weight:800;
letter-spacing:.19em;text-transform:uppercase;
}
.ctc-legal-hero h1{
margin:13px 0 17px;color:#fff;font-family:Georgia,"Times New Roman",serif;
font-size:clamp(48px,6vw,76px);line-height:1;
}
.ctc-legal-hero p{
max-width:900px;margin:0;color:rgba(255,255,255,.86);
font-size:18px;line-height:1.7;
}
.ctc-legal-body{padding:76px 0 90px;background:#f7f5fb}
.ctc-legal-layout{
display:grid;grid-template-columns:310px minmax(0,1fr);
gap:48px;align-items:start;
}
.ctc-legal-summary{
position:sticky;top:110px;padding:29px 27px;border-radius:19px;
background:#fff;border:1px solid #e5e0eb;border-top:5px solid #f5a800;
box-shadow:0 14px 34px rgba(45,7,149,.06);
}
.ctc-legal-summary>span{
color:#f5a800;font-size:10px;font-weight:800;letter-spacing:.15em;
}
.ctc-legal-summary h2{
margin:12px 0 14px;color:#200060;font-family:Georgia,"Times New Roman",serif;
font-size:27px;line-height:1.12;
}
.ctc-legal-summary p{margin:0;color:#615b68;font-size:14px;line-height:1.7}
.ctc-legal-contact{margin-top:24px;padding-top:21px;border-top:1px solid #e8e3ed}
.ctc-legal-contact strong{display:block;color:#200060;margin-bottom:9px}
.ctc-legal-contact a{
display:block;margin:5px 0;color:#5e5867;font-size:13px;
overflow-wrap:anywhere;text-decoration:none;
}
.ctc-legal-content{
padding:12px 45px 45px;border-radius:22px;background:#fff;
border:1px solid #e5e0eb;
}
.ctc-legal-content section{padding:31px 0;border-bottom:1px solid #ece8f0}
.ctc-legal-content section:last-of-type{border-bottom:0}
.ctc-legal-content h2{
margin:0 0 13px;color:#200060;font-family:Georgia,"Times New Roman",serif;
font-size:26px;line-height:1.2;
}
.ctc-legal-content p,.ctc-legal-content li{
color:#585260;font-size:15px;line-height:1.76;
}
.ctc-legal-content p{margin:0 0 12px}
.ctc-legal-content p:last-child{margin-bottom:0}
.ctc-legal-content ul{margin:10px 0 4px;padding-left:22px}
.ctc-legal-content li{padding:4px 0}
.ctc-legal-content a{
color:#200060;font-weight:700;text-decoration:underline;
text-underline-offset:2px;
}
.ctc-legal-right-object{
margin:20px -20px 0;padding:28px 20px!important;
background:#f6f1fb;border-left:4px solid #f5a800;
}
.ctc-legal-note{
margin-top:28px;padding:22px 24px;border-radius:15px;
background:#f3effa;border-left:4px solid #200060;
}
.ctc-legal-note strong{display:block;color:#200060;margin-bottom:6px}
.ctc-legal-note p{margin:0;color:#625c69;font-size:13px;line-height:1.6}
.ctc-consent-row a{color:#200060;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){
.ctc-legal-layout{grid-template-columns:1fr}
.ctc-legal-summary{position:static}
}
@media(max-width:700px){
.ctc-legal-hero{padding:62px 0 58px}
.ctc-legal-body{padding:48px 0 62px}
.ctc-legal-content{padding:5px 24px 28px}
.ctc-legal-content section{padding:25px 0}
}
/* ======================================================================
RAVENSBOURNE-INSPIRED CTC VISUAL SYSTEM - 2026-10-02
Presentation-only layer. CTC content, links, branding colours and
functionality remain unchanged.
====================================================================== */
:root{
--ctc-purple:#200060;
--ctc-purple-2:#200060;
--ctc-purple-dark:#100032;
--ctc-red:#f5a800;
--ctc-ink:#111111;
--ctc-paper:#ffffff;
--ctc-mist:#f3f1f5;
--ctc-line:#d9d5dd;
}
html{scroll-padding-top:112px}
body{
color:var(--ctc-ink) !important;
font-family:Arial,Helvetica,sans-serif !important;
background:#fff !important;
-webkit-font-smoothing:antialiased;
}
.wrap{width:min(1320px,calc(100% - 64px)) !important}
/* Header: clean, graphic, editorial */
.topbar{background:var(--ctc-purple) !important;border-bottom:1px solid rgba(255,255,255,.18)}
.topin{height:38px !important;gap:30px !important;font-size:12px;letter-spacing:.02em}
header{
background:#fff !important;
box-shadow:none !important;
border-bottom:1px solid #dedbe1;
}
.nav{height:92px !important;gap:24px !important}
.brand img{width:205px !important;height:70px !important}
.nav nav{gap:20px !important}
.nav nav>a,.dd>a{
position:relative;
font-family:Arial,Helvetica,sans-serif !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.015em;
}
.nav nav>a:not(.apply):after,.dd>a:after{
content:"";position:absolute;left:0;right:100%;bottom:-11px;height:3px;background:var(--ctc-red);transition:right .2s ease;
}
.nav nav>a:not(.apply):hover:after,.dd:hover>a:after{right:0}
.apply,.btn{
border-radius:0 !important;
background:var(--ctc-purple) !important;
color:#fff !important;
padding:15px 22px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-weight:800 !important;
letter-spacing:.01em;
transition:background .18s ease,transform .18s ease;
}
.apply:hover,.btn:hover{background:var(--ctc-red) !important;transform:translateY(-1px)}
.btn.alt{background:transparent !important;border:2px solid #fff !important}
.btn.alt:hover{background:#fff !important;color:var(--ctc-purple) !important}
.drop,.ctcAboutDropdown{
border-radius:0 !important;
border:1px solid #dedbe1 !important;
box-shadow:0 18px 44px rgba(20,8,45,.14) !important;
padding:12px !important;
}
.drop a{border-radius:0 !important;padding:11px 12px !important}
.drop a:hover{background:var(--ctc-purple) !important;color:#fff !important}
/* Homepage hero: oversized, image-led, high-impact */
.homehero.liveHero.cleanThamesHero{
min-height:min(780px,78vh) !important;
border-bottom:0 !important;
}
.cleanThamesHero::before{
background:linear-gradient(90deg,rgba(24,4,71,.93) 0%,rgba(45,2,115,.76) 37%,rgba(45,2,115,.22) 68%,rgba(0,0,0,.04) 100%) !important;
}
.cleanThamesHero .heroCopy{
width:min(1320px,calc(100% - 64px)) !important;
padding:125px 0 118px !important;
}
.homehero .eyebrow,.innerhero .eyebrow,.home-kicker,
.ctc-about-kicker,.ctc-about-section-kicker,.ctc-mv-kicker,
.ctc-detail-kicker,.ctc-opps-kicker,.ctc-legal-kicker{
font-family:Arial,Helvetica,sans-serif !important;
color:var(--ctc-red) !important;
font-size:12px !important;
font-weight:900 !important;
letter-spacing:.16em !important;
text-transform:uppercase;
}
.homehero.liveHero .ctc-requested-title{
max-width:1080px !important;
margin:18px 0 28px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:clamp(66px,7.2vw,112px) !important;
font-weight:900 !important;
line-height:.86 !important;
letter-spacing:-.055em !important;
text-transform:none !important;
}
.homehero.liveHero p{
max-width:720px !important;
font-size:18px !important;
line-height:1.55 !important;
}
.actions{gap:10px !important;margin-top:32px !important}
.actions .btn{padding:17px 22px !important}
/* Editorial proof strip */
.home-proof{margin:0 !important;background:#fff !important;border-bottom:1px solid var(--ctc-line)}
.home-proof-grid{border-left:1px solid var(--ctc-line);border-right:1px solid var(--ctc-line)}
.home-proof-grid>div{
min-height:150px !important;
padding:28px 30px !important;
border-right:1px solid var(--ctc-line) !important;
}
.home-proof-grid>div:last-child{border-right:0 !important}
.home-proof-grid strong{
color:var(--ctc-ink) !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:19px !important;
font-weight:900 !important;
letter-spacing:-.02em;
}
.home-proof-grid small{color:#555 !important;font-size:13px !important;line-height:1.55 !important}
/* Section typography and spacing */
.section,.content{padding:88px 0 !important}
.home-welcome,.home-what,.home-learning,.home-services,.home-journey,.home-why,.home-final-cta{padding:104px 0 !important}
.section h2,.content h2,.home-section-head h2,.home-welcome h2,.home-what h2,
.home-learning h2,.home-services h2,.home-journey h2,.home-why h2,.home-final-cta h2,
.ctc-about-intro h2,.ctc-about-dark h2,.ctc-about-scope h2,.ctc-about-experience h2,.ctc-about-london h2,
.ctc-mv-intro h2,.ctc-mv-core h2,.ctc-detail-section h2,.ctc-opps-section h2{
font-family:Arial,Helvetica,sans-serif !important;
font-weight:900 !important;
letter-spacing:-.045em !important;
line-height:.96 !important;
}
.section h2,.home-section-head h2{font-size:clamp(46px,5vw,72px) !important;color:var(--ctc-ink) !important}
.home-welcome h2,.home-what h2,.home-services h2,.home-journey h2,.home-final-cta h2{
font-size:clamp(44px,4.6vw,68px) !important;color:var(--ctc-ink) !important;
}
.home-section-head{max-width:980px !important;margin-bottom:42px !important}
.home-section-head>p,.home-welcome-copy p,.home-what-card p,.home-slider-head p{
color:#4f4f4f !important;line-height:1.65 !important;
}
/* Homepage welcome / content blocks: asymmetrical editorial composition */
.home-welcome{background:#fff !important}
.home-welcome-grid{grid-template-columns:.95fr 1.05fr !important;gap:88px !important;align-items:start !important}
.home-welcome-title{position:relative;padding-top:4px}
.home-welcome-copy{padding-top:40px;border-top:1px solid var(--ctc-ink)}
.home-inline-links{display:flex !important;flex-wrap:wrap;gap:24px !important;margin-top:28px !important}
.home-inline-links a,.home-slider-head>a,.home-learning-link a,.home-why-btn{
color:var(--ctc-purple) !important;text-decoration:none !important;font-weight:900 !important;border-bottom:2px solid currentColor;padding-bottom:3px;
}
/* What we do: large flat tiles, no soft rounded UI */
.home-what{background:var(--ctc-mist) !important}
.home-what-grid{gap:0 !important;border:1px solid var(--ctc-line)}
.home-what-card{
min-height:410px !important;
padding:44px 42px !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
background:#fff !important;
}
.home-what-card+ .home-what-card{border-left:1px solid var(--ctc-line) !important}
.home-what-card span{color:var(--ctc-red) !important}
.home-what-card h3{
font-family:Arial,Helvetica,sans-serif !important;
font-size:clamp(38px,4vw,60px) !important;
font-weight:900 !important;
letter-spacing:-.045em !important;
color:var(--ctc-ink) !important;
}
.home-what-card a{color:var(--ctc-purple) !important;font-weight:900 !important}
/* Running course rails: editorial image cards */
.soft{background:var(--ctc-mist) !important}
.runner{overflow:hidden !important;margin-left:calc((100vw - min(1320px,calc(100vw - 64px)))/-2);margin-right:calc((100vw - min(1320px,calc(100vw - 64px)))/-2);padding-left:max(32px,calc((100vw - 1320px)/2));padding-right:32px}
.track{gap:18px !important}
.slide{
width:360px !important;flex:0 0 360px !important;
border:0 !important;border-radius:0 !important;background:transparent !important;
overflow:visible !important;
}
.slide img{
height:270px !important;min-height:270px !important;border-radius:0 !important;
transition:transform .28s ease,filter .28s ease;
}
.slide>div{padding:18px 0 10px !important}
.slide h3{
color:var(--ctc-ink) !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:25px !important;font-weight:900 !important;letter-spacing:-.03em !important;
}
.slide p{color:#555 !important;font-size:13px !important}
.slide:hover img{transform:scale(1.018);filter:contrast(1.04)}
.course-explore{display:inline-block;margin-top:12px;color:var(--ctc-purple) !important;border-bottom:2px solid currentColor;padding-bottom:2px}
.runner:hover .track,.runner:focus-within .track{animation-play-state:paused !important}
/* Learning / why sections: graphic dark fields */
.home-learning,.home-why{
background:var(--ctc-purple) !important;
color:#fff !important;
}
.home-learning .home-section-head h2,.home-why h2{color:#fff !important}
.home-learning-grid{gap:0 !important;border:1px solid rgba(255,255,255,.35)}
.home-learning-grid>div{
min-height:265px !important;padding:34px 30px !important;border:0 !important;border-right:1px solid rgba(255,255,255,.35) !important;
border-radius:0 !important;background:transparent !important;
}
.home-learning-grid>div:last-child{border-right:0 !important}
.home-learning-grid b{border-radius:0 !important;background:var(--ctc-red) !important;color:#fff !important}
.home-learning-grid strong{
font-family:Arial,Helvetica,sans-serif !important;font-size:25px !important;font-weight:900 !important;letter-spacing:-.025em;
}
.home-learning-link{text-align:left !important;margin-top:34px !important}
.home-learning-link a,.home-why-btn{color:#fff !important}
/* Services and journey: grid with strong rules */
.home-services{background:#fff !important}
.home-services-grid{gap:0 !important;border:1px solid var(--ctc-line)}
.home-services-grid>a{
min-height:310px !important;padding:32px 28px !important;border:0 !important;border-right:1px solid var(--ctc-line) !important;
border-top:0 !important;border-radius:0 !important;box-shadow:none !important;
}
.home-services-grid>a:last-child{border-right:0 !important}
.home-services-grid>a:hover{transform:none !important;background:var(--ctc-mist) !important;box-shadow:none !important}
.home-services-grid h3{
font-family:Arial,Helvetica,sans-serif !important;font-size:27px !important;font-weight:900 !important;letter-spacing:-.03em !important;color:var(--ctc-ink) !important;
}
.home-services-grid b{color:var(--ctc-purple) !important;border-bottom:2px solid currentColor;padding-bottom:2px}
.home-journey{background:var(--ctc-mist) !important}
.home-journey-grid{border-radius:0 !important;border-color:var(--ctc-line) !important}
.home-journey-grid>div{min-height:230px !important;padding:34px 28px !important;border-color:var(--ctc-line) !important;background:#fff}
.home-journey-grid strong{
font-family:Arial,Helvetica,sans-serif !important;font-size:27px !important;font-weight:900 !important;letter-spacing:-.03em !important;color:var(--ctc-ink) !important;
}
/* Final CTA: flat, confident */
.home-final-cta{background:#fff !important}
.home-final-cta-inner{
padding:58px 60px !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;background:var(--ctc-mist) !important;
}
.home-final-actions a{border-radius:0 !important;background:var(--ctc-purple) !important}
.home-final-actions a:nth-child(2){background:var(--ctc-red) !important}
.home-final-actions a:nth-child(3){background:#fff !important;color:var(--ctc-purple) !important;border:1px solid var(--ctc-line)}
/* Internal heroes: full-width visual statements */
.innerhero,.ctc-about-hero,.ctc-mv-hero,.ctc-detail-hero,.ctc-opps-hero,.aboutHero,.ctc-legal-hero{
min-height:500px !important;
border-radius:0 !important;
}
.innerhero{
position:relative !important;background-position:center !important;background-size:cover !important;
}
.innerhero:before{
content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,4,71,.92),rgba(45,2,115,.64) 45%,rgba(45,2,115,.12));pointer-events:none;
}
.innerhero .wrap{position:relative;z-index:1;padding:95px 0 !important}
.innerhero h1,.ctc-about-hero h1,.ctc-mv-hero h1,.ctc-detail-hero h1,.ctc-opps-hero h1,.aboutHero h1,.ctc-legal-hero h1{
max-width:1050px;
font-family:Arial,Helvetica,sans-serif !important;
font-size:clamp(58px,7vw,104px) !important;
font-weight:900 !important;
letter-spacing:-.055em !important;
line-height:.88 !important;
color:#fff !important;
}
.innerhero p,.ctc-about-hero p,.ctc-mv-hero p,.ctc-detail-hero p,.ctc-opps-hero p,.aboutHero p,.ctc-legal-hero p{
max-width:760px !important;font-size:18px !important;line-height:1.55 !important;
}
/* Standard content and course pages */
.content>.wrap{max-width:1320px}
.content>.wrap>h2{
margin:54px 0 18px !important;
font-size:clamp(38px,4vw,58px) !important;
color:var(--ctc-ink) !important;
}
.content>.wrap>h2:first-child{margin-top:0 !important}
.content>.wrap>p{max-width:900px;font-size:17px !important;line-height:1.75 !important;color:#414141 !important}
.coursehero{grid-template-columns:.9fr 1.1fr !important;gap:72px !important;align-items:start !important}
.coursehero>div{padding-top:18px}
.coursehero h2{font-size:clamp(48px,5vw,74px) !important;color:var(--ctc-ink) !important}
.coursehero img{height:560px !important;border-radius:0 !important}
.pill{border-radius:0 !important;background:var(--ctc-red) !important;color:#fff !important;text-transform:uppercase;letter-spacing:.1em;font-size:11px !important}
.notice{border-radius:0 !important;background:var(--ctc-mist) !important;border-left:5px solid var(--ctc-purple) !important;padding:22px 24px !important}
/* Cards and course directories */
.cards,.ucards{gap:0 !important;border-top:1px solid var(--ctc-line);border-left:1px solid var(--ctc-line)}
.card,.ucard{
border:0 !important;border-right:1px solid var(--ctc-line) !important;border-bottom:1px solid var(--ctc-line) !important;
border-radius:0 !important;box-shadow:none !important;background:#fff !important;
}
.card:hover,.ucard:hover{background:var(--ctc-mist) !important}
.card img{height:260px !important;border-radius:0 !important}
.cardbody{padding:24px !important}
.cardbody span{color:var(--ctc-red) !important}
.card h2,.card h3,.ucard h3{
font-family:Arial,Helvetica,sans-serif !important;font-weight:900 !important;letter-spacing:-.035em !important;color:var(--ctc-ink) !important;
}
.card h2{font-size:30px !important;line-height:1.05 !important}
.card h3{font-size:27px !important;line-height:1.05 !important}
.card b,.ucard a{color:var(--ctc-purple) !important}
.subject{padding:62px 0 !important;border-bottom:1px solid var(--ctc-line) !important}
.subject h2{font-family:Arial,Helvetica,sans-serif !important;font-size:clamp(42px,4.5vw,66px) !important;font-weight:900 !important;letter-spacing:-.045em !important;color:var(--ctc-ink) !important}
/* CTC animated directory sliders */
.ctc-slider-section{padding:30px 0 52px !important}
.ctc-slider-section .sectionhead{border-bottom:1px solid var(--ctc-ink);padding-bottom:20px;margin-bottom:28px !important}
.ctc-slider-section .sectionhead h2{font-family:Arial,Helvetica,sans-serif !important;font-weight:900 !important;color:var(--ctc-ink) !important;letter-spacing:-.04em !important}
.ctc-slider-pause{border-radius:0 !important;border:1px solid var(--ctc-ink) !important;background:#fff !important;padding:10px 14px !important;font-weight:800 !important}
.ctc-slide.card{border:0 !important;background:transparent !important}
.ctc-slide.card img{height:250px !important}
.ctc-slide.card .cardbody{padding:18px 0 12px !important}
.ctc-slide.card:hover{background:transparent !important}
/* About / mission / opportunities custom page systems: remove rounded dashboard look */
.ctc-about-pillar,.ctc-scope-card,.ctc-about-checks>div,.ctc-about-values>div,
.ctc-mv-core-card,.ctc-detail-feature,.ctc-detail-card-grid>* ,.ctc-opps-feature,.ctc-opps-card-grid>*,
.networkCard,.recognitionCard{
border-radius:0 !important;box-shadow:none !important;
}
.ctc-about-pillar,.ctc-scope-card,.ctc-mv-core-card,.ctc-detail-card-grid>*,.ctc-opps-card-grid>*,.networkCard,.recognitionCard{
border:1px solid var(--ctc-line) !important;
}
.ctc-about-pillar h3,.ctc-scope-card h3,.ctc-mv-core-card h3,.ctc-detail-card-grid h3,.ctc-opps-card-grid h3,
.networkCard h3,.recognitionCard h3{
font-family:Arial,Helvetica,sans-serif !important;font-weight:900 !important;letter-spacing:-.03em !important;
}
.ctc-about-dark,.ctc-detail-purple,.ctc-opps-purple{background:var(--ctc-purple) !important}
.aboutCta,.ctc-about-cta,.ctc-detail-cta,.ctc-opps-cta{border-radius:0 !important}
/* Forms: clean, functional, squared */
.form input,.form select,.form textarea{
border-radius:0 !important;border:1px solid #aaa !important;padding:15px 14px !important;background:#fff !important;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(45,2,115,.15);border-color:var(--ctc-purple) !important}
/* Legal pages */
.ctc-legal-hero{background:var(--ctc-purple) !important}
.ctc-legal-body{background:var(--ctc-mist) !important}
.ctc-legal-summary,.ctc-legal-content,.ctc-legal-note{border-radius:0 !important;box-shadow:none !important}
.ctc-legal-summary h2,.ctc-legal-content h2{font-family:Arial,Helvetica,sans-serif !important;font-weight:900 !important;color:var(--ctc-ink) !important;letter-spacing:-.025em}
/* Footer: large, simple, strongly branded */
footer{margin-top:0 !important;padding:72px 0 0 !important;background:var(--ctc-purple) !important}
.footgrid{grid-template-columns:1.35fr .65fr 1fr !important;gap:80px !important}
footer .ctc-purple-footer-logo{width:min(100%,360px) !important;background:var(--ctc-purple) !important}
.footgrid a{color:#fff !important;text-decoration:none !important;padding-bottom:2px}
.footgrid a:hover{text-decoration:underline !important;text-underline-offset:4px}
.footgrid p{color:rgba(255,255,255,.78) !important}
.legal{margin-top:52px !important;background:var(--ctc-purple-dark) !important;border-top:1px solid rgba(255,255,255,.16) !important;padding:22px !important}
/* Responsive */
@media(max-width:1100px){
.wrap,.cleanThamesHero .heroCopy{width:min(100% - 44px,1320px) !important}
.nav nav{gap:14px !important}.nav nav>a,.dd>a{font-size:12px !important}
.home-learning-grid,.home-services-grid{grid-template-columns:1fr 1fr !important}
.home-learning-grid>div:nth-child(2){border-right:0 !important}
.home-learning-grid>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.35) !important}
.home-services-grid>a:nth-child(2){border-right:0 !important}.home-services-grid>a:nth-child(-n+2){border-bottom:1px solid var(--ctc-line) !important}
}
@media(max-width:900px){
.nav{height:76px !important}.brand img{width:165px !important;height:58px !important}
.nav nav{top:76px !important;border-top:1px solid var(--ctc-line);box-shadow:0 18px 30px rgba(0,0,0,.08)}
.homehero.liveHero.cleanThamesHero{min-height:650px !important}
.home-welcome-grid,.coursehero{grid-template-columns:1fr !important;gap:42px !important}
.coursehero img{height:440px !important}
.cards,.ucards{grid-template-columns:1fr 1fr !important}
.footgrid{grid-template-columns:1fr 1fr !important;gap:46px !important}
}
@media(max-width:700px){
.wrap,.cleanThamesHero .heroCopy{width:calc(100% - 28px) !important}
.section,.content{padding:58px 0 !important}
.home-welcome,.home-what,.home-learning,.home-services,.home-journey,.home-why,.home-final-cta{padding:64px 0 !important}
.homehero.liveHero.cleanThamesHero{min-height:590px !important}
.cleanThamesHero .heroCopy{padding:82px 0 76px !important}
.homehero.liveHero .ctc-requested-title{font-size:clamp(52px,15vw,76px) !important;line-height:.9 !important}
.homehero.liveHero .ctc-requested-title span{white-space:normal !important}
.home-proof-grid,.home-learning-grid,.home-services-grid,.home-journey-grid,.cards,.ucards,.footgrid{grid-template-columns:1fr !important}
.home-proof-grid>div,.home-learning-grid>div,.home-services-grid>a{border-right:0 !important;border-bottom:1px solid var(--ctc-line) !important}
.home-learning-grid>div{border-bottom-color:rgba(255,255,255,.35) !important}
.home-welcome-grid{gap:34px !important}.home-welcome-copy{padding-top:26px}
.home-what-card{min-height:0 !important;padding:34px 26px !important}.home-what-card+.home-what-card{border-left:0 !important;border-top:1px solid var(--ctc-line) !important}
.slide{width:285px !important;flex-basis:285px !important}.slide img{height:215px !important;min-height:215px !important}
.runner{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
.innerhero,.ctc-about-hero,.ctc-mv-hero,.ctc-detail-hero,.ctc-opps-hero,.aboutHero,.ctc-legal-hero{min-height:390px !important}
.innerhero h1,.ctc-about-hero h1,.ctc-mv-hero h1,.ctc-detail-hero h1,.ctc-opps-hero h1,.aboutHero h1,.ctc-legal-hero h1{font-size:clamp(46px,13vw,68px) !important}
.coursehero img{height:330px !important}
.home-final-cta-inner{padding:34px 24px !important}
footer{padding-top:54px !important}
}
/* 2026-10-02: Increase the CITY THAMES COLLEGE brand kicker consistently across page sections. */
.ctc-brand-kicker{
font-size:15px !important;
font-weight:900 !important;
letter-spacing:.18em !important;
line-height:1.25 !important;
}
@media(max-width:620px){
.ctc-brand-kicker{font-size:14px !important;letter-spacing:.15em !important;}
}
/* 2026-10-02: User-approved page hierarchy across every internal hero.
Kicker = small-to-medium, page title = medium, supporting copy = normal. */
.innerhero .eyebrow,
.ctc-about-hero .ctc-about-kicker,
.ctc-mv-hero .aboutEyebrow,
.ctc-mv-hero .ctc-mv-kicker,
.ctc-detail-hero .aboutEyebrow,
.ctc-detail-hero .ctc-detail-kicker,
.ctc-opps-hero .aboutEyebrow,
.ctc-opps-hero .ctc-opps-kicker,
.aboutHero .aboutEyebrow,
.ctc-legal-hero .ctc-legal-kicker,
.ctc-brand-kicker{
font-family:Arial,Helvetica,sans-serif !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.3 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
}
.innerhero h1,
.ctc-about-hero h1,
.ctc-mv-hero h1,
.ctc-detail-hero h1,
.ctc-opps-hero h1,
.aboutHero h1,
.ctc-legal-hero h1{
max-width:1100px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:clamp(46px,4.8vw,64px) !important;
font-weight:900 !important;
line-height:1.02 !important;
letter-spacing:-.035em !important;
}
.innerhero p,
.ctc-about-hero p,
.ctc-mv-hero p,
.ctc-detail-hero p,
.ctc-opps-hero p,
.aboutHero p,
.ctc-legal-hero p{
max-width:900px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:18px !important;
font-weight:400 !important;
line-height:1.6 !important;
letter-spacing:0 !important;
}
@media(max-width:700px){
.innerhero .eyebrow,
.ctc-about-hero .ctc-about-kicker,
.ctc-mv-hero .aboutEyebrow,
.ctc-mv-hero .ctc-mv-kicker,
.ctc-detail-hero .aboutEyebrow,
.ctc-detail-hero .ctc-detail-kicker,
.ctc-opps-hero .aboutEyebrow,
.ctc-opps-hero .ctc-opps-kicker,
.aboutHero .aboutEyebrow,
.ctc-legal-hero .ctc-legal-kicker,
.ctc-brand-kicker{font-size:14px !important;letter-spacing:.14em !important;}
.innerhero h1,
.ctc-about-hero h1,
.ctc-mv-hero h1,
.ctc-detail-hero h1,
.ctc-opps-hero h1,
.aboutHero h1,
.ctc-legal-hero h1{font-size:clamp(38px,10vw,50px) !important;line-height:1.04 !important;}
.innerhero p,
.ctc-about-hero p,
.ctc-mv-hero p,
.ctc-detail-hero p,
.ctc-opps-hero p,
.aboutHero p,
.ctc-legal-hero p{font-size:16px !important;line-height:1.55 !important;}
}
/* 2026-10-02: Apply the approved three-level typography hierarchy to the homepage hero.
Brand label = small-to-medium, homepage title = medium, supporting copy = normal. */
.homehero.liveHero .eyebrow{
font-family:Arial,Helvetica,sans-serif !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1.3 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
}
.homehero.liveHero .ctc-requested-title{
max-width:1100px !important;
margin:18px 0 24px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:clamp(46px,4.8vw,64px) !important;
font-weight:900 !important;
line-height:1.02 !important;
letter-spacing:-.035em !important;
text-transform:none !important;
}
.homehero.liveHero p{
max-width:900px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:18px !important;
font-weight:400 !important;
line-height:1.6 !important;
letter-spacing:0 !important;
}
@media(max-width:700px){
.homehero.liveHero .eyebrow{font-size:14px !important;letter-spacing:.14em !important;}
.homehero.liveHero .ctc-requested-title{font-size:clamp(38px,10vw,50px) !important;line-height:1.04 !important;}
.homehero.liveHero p{font-size:16px !important;line-height:1.55 !important;}
}
/* ======================================================================
STUDYIN-INSPIRED CTC VISUAL SYSTEM - 2026-10-02
Design-language adaptation only. CTC identity, colours, content,
navigation, links, forms and slider functionality are preserved.
====================================================================== */
:root{
--si-purple:#200060;
--si-purple-2:#200060;
--si-purple-dark:#100032;
--si-red:#f5a800;
--si-ink:#171321;
--si-text:#5d5865;
--si-soft:#f7f5fa;
--si-soft-2:#f1edf7;
--si-line:#e6e1eb;
--si-white:#fff;
--si-radius:20px;
--si-shadow:0 18px 50px rgba(38,16,72,.10);
}
body{background:#fff !important;color:var(--si-ink) !important;font-family:Inter,Arial,Helvetica,sans-serif !important}
.wrap{width:min(1240px,calc(100% - 48px)) !important}
/* Compact, service-led header */
.topbar{background:var(--si-purple) !important;border:0 !important}
.topin{height:36px !important;font-size:12px !important;gap:26px !important;opacity:.96}
header{background:rgba(255,255,255,.98) !important;border-bottom:1px solid var(--si-line) !important;box-shadow:0 5px 22px rgba(35,17,62,.05) !important;backdrop-filter:blur(12px)}
.nav{height:80px !important;gap:18px !important}
.brand img{width:190px !important;height:62px !important}
.nav nav{gap:17px !important}
.nav nav>a,.dd>a{font-size:13px !important;font-weight:750 !important;letter-spacing:0 !important}
.nav nav>a:not(.apply):after,.dd>a:after{bottom:-9px !important;height:2px !important;background:var(--si-red) !important}
.apply,.btn{border-radius:999px !important;padding:13px 21px !important;background:var(--si-purple) !important;box-shadow:none !important}
.apply:hover,.btn:hover{background:var(--si-purple-2) !important;transform:translateY(-1px) !important}
.btn.alt{border:1px solid rgba(255,255,255,.8) !important;background:rgba(255,255,255,.08) !important}
.drop,.ctcAboutDropdown{border:1px solid var(--si-line) !important;border-radius:16px !important;box-shadow:0 20px 55px rgba(28,12,52,.15) !important;padding:10px !important}
.drop a{border-radius:10px !important;padding:10px 12px !important}
.drop a:hover{background:var(--si-soft-2) !important;color:var(--si-purple) !important}
.course-flyout,.uni-panel{border-radius:14px !important;box-shadow:0 20px 55px rgba(28,12,52,.14) !important}
/* Homepage hero: professional image-led introduction with approved type scale */
.homehero.liveHero.cleanThamesHero{min-height:560px !important;background-position:center 42% !important}
.cleanThamesHero::before{background:linear-gradient(90deg,rgba(24,4,71,.91) 0%,rgba(45,2,115,.76) 43%,rgba(45,2,115,.26) 72%,rgba(24,4,71,.08) 100%) !important}
.cleanThamesHero .heroCopy{width:min(1240px,calc(100% - 48px)) !important;padding:96px 0 102px !important}
.homehero .eyebrow,.home-kicker,.innerhero .eyebrow,
.ctc-about-kicker,.ctc-about-section-kicker,.ctc-mv-kicker,.ctc-detail-kicker,.ctc-opps-kicker,.ctc-legal-kicker{
font-size:16px !important;line-height:1.25 !important;letter-spacing:.09em !important;font-weight:800 !important;color:var(--si-red) !important;
}
.homehero.liveHero .ctc-requested-title{
max-width:760px !important;margin:15px 0 18px !important;font-size:clamp(38px,4.1vw,54px) !important;line-height:1.05 !important;letter-spacing:-.025em !important;font-weight:800 !important;
}
.homehero.liveHero p{max-width:680px !important;font-size:17px !important;line-height:1.65 !important;color:rgba(255,255,255,.92) !important}
.actions{gap:12px !important;margin-top:27px !important}.actions .btn{padding:14px 22px !important}
/* Homepage trust/proof strip */
.home-proof{padding:0 0 24px !important;background:#fff !important;border:0 !important}
.home-proof-grid{margin-top:-34px !important;position:relative;z-index:5;display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:0 !important;border:1px solid var(--si-line) !important;border-radius:18px !important;background:#fff !important;box-shadow:var(--si-shadow) !important;overflow:hidden}
.home-proof-grid>div{min-height:128px !important;padding:25px 26px !important;border-right:1px solid var(--si-line) !important;background:#fff !important}
.home-proof-grid strong{font-size:18px !important;color:var(--si-purple) !important;letter-spacing:-.01em !important}.home-proof-grid small{font-size:13px !important;color:var(--si-text) !important}
/* Global section rhythm */
.section,.content{padding:76px 0 !important}
.home-welcome,.home-what,.home-learning,.home-services,.home-journey,.home-why,.home-final-cta{padding:82px 0 !important}
.soft,.home-what,.home-journey{background:var(--si-soft) !important}
.sectionhead,.home-section-head{margin-bottom:30px !important;align-items:end !important}
.section h2,.content h2,.home-section-head h2,.home-welcome h2,.home-what h2,.home-learning h2,.home-services h2,.home-journey h2,.home-why h2,.home-final-cta h2,
.ctc-about-intro h2,.ctc-about-dark h2,.ctc-about-scope h2,.ctc-about-experience h2,.ctc-about-london h2,.ctc-mv-intro h2,.ctc-mv-core h2,.ctc-detail-section h2,.ctc-opps-section h2{
font-family:Inter,Arial,Helvetica,sans-serif !important;font-size:clamp(30px,3.2vw,44px) !important;line-height:1.08 !important;letter-spacing:-.025em !important;font-weight:800 !important;color:var(--si-ink) !important;
}
.sectionhead>a,.home-slider-head>a,.home-inline-links a,.home-learning-link a,.home-why-btn{display:inline-flex !important;align-items:center;gap:6px;color:var(--si-purple) !important;text-decoration:none !important;font-weight:800 !important;border:0 !important}
.sectionhead>a:hover,.home-slider-head>a:hover,.home-inline-links a:hover{color:var(--si-red) !important}
/* Welcome / explanatory content */
.home-welcome{background:#fff !important}
.home-welcome-grid{grid-template-columns:.9fr 1.1fr !important;gap:70px !important;align-items:center !important}
.home-welcome-copy{padding:34px !important;border:1px solid var(--si-line) !important;border-radius:var(--si-radius) !important;background:var(--si-soft) !important}
.home-welcome-copy p,.home-section-head>p,.home-what-card p,.home-slider-head p{font-size:16px !important;line-height:1.7 !important;color:var(--si-text) !important}
/* Service-style cards */
.home-what-grid,.home-services-grid{gap:20px !important;border:0 !important}
.home-what-card,.home-services-grid>a{
min-height:300px !important;padding:30px !important;border:1px solid var(--si-line) !important;border-radius:var(--si-radius) !important;background:#fff !important;box-shadow:0 8px 28px rgba(38,16,72,.05) !important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
}
.home-what-card+.home-what-card,.home-services-grid>a{border-left:1px solid var(--si-line) !important;border-right:1px solid var(--si-line) !important}
.home-what-card:hover,.home-services-grid>a:hover{transform:translateY(-4px) !important;box-shadow:var(--si-shadow) !important;border-color:#d7cfe3 !important;background:#fff !important}
.home-what-card span,.home-services-grid span{color:var(--si-red) !important;font-weight:850 !important}
.home-what-card h3,.home-services-grid h3{font-size:clamp(24px,2.4vw,32px) !important;line-height:1.12 !important;letter-spacing:-.02em !important;color:var(--si-purple) !important;font-weight:800 !important}
.home-what-card a,.home-services-grid b{color:var(--si-purple) !important;font-weight:800 !important}
.home-sfe-note,.home-provider-note-inner,.notice{border:1px solid var(--si-line) !important;border-left:4px solid var(--si-purple) !important;border-radius:14px !important;background:#fff !important;box-shadow:0 8px 26px rgba(38,16,72,.05) !important}
/* Course sliders: rounded, image-forward cards */
.runner{margin-left:0 !important;margin-right:0 !important;padding:8px 2px 18px !important}
.track{gap:20px !important}
.slide{width:320px !important;flex:0 0 320px !important;border:1px solid var(--si-line) !important;border-radius:18px !important;background:#fff !important;overflow:hidden !important;box-shadow:0 8px 26px rgba(38,16,72,.06) !important;transition:transform .2s ease,box-shadow .2s ease !important}
.slide:hover{transform:translateY(-4px) !important;box-shadow:var(--si-shadow) !important}
.slide img{height:205px !important;min-height:205px !important;border-radius:0 !important;transform:none !important}
.slide>div{padding:18px 19px 20px !important}.slide h3{font-size:20px !important;line-height:1.18 !important;color:var(--si-purple) !important;font-weight:800 !important}.slide p{font-size:13px !important;color:var(--si-text) !important}.course-explore{margin-top:10px !important;border:0 !important;color:var(--si-red) !important}
.runner:hover .track,.runner:focus-within .track{animation-play-state:running !important}
/* Journey and dark feature areas */
.home-learning,.home-why{background:var(--si-purple) !important;color:#fff !important}
.home-learning .home-section-head h2,.home-why h2{color:#fff !important}
.home-learning-grid{gap:14px !important;border:0 !important}
.home-learning-grid>div{min-height:220px !important;padding:28px !important;border:1px solid rgba(255,255,255,.18) !important;border-radius:16px !important;background:rgba(255,255,255,.07) !important}
.home-learning-grid b{border-radius:999px !important;background:var(--si-red) !important}.home-learning-grid strong{font-size:22px !important}
.home-learning-link a,.home-why-btn{color:#fff !important}
.home-journey-grid{gap:16px !important;border:0 !important;background:transparent !important}
.home-journey-grid>div{min-height:205px !important;padding:28px !important;border:1px solid var(--si-line) !important;border-radius:16px !important;background:#fff !important;box-shadow:0 8px 24px rgba(38,16,72,.04) !important}
.home-journey-grid span{color:var(--si-red) !important}.home-journey-grid strong{font-size:22px !important;color:var(--si-purple) !important}
.home-why-grid{gap:60px !important}.home-why-points>div{border-radius:14px !important;background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.14) !important}
/* Network / recognition areas */
.networkShowcase,.recognitionShowcase{padding:76px 0 !important;background:#fff !important}
.awardingShowcase{background:var(--si-soft) !important}
.networkHead{margin-bottom:28px !important}.networkHead h2{font-size:clamp(30px,3.2vw,44px) !important;letter-spacing:-.025em !important;color:var(--si-ink) !important}.networkHead>p{max-width:760px;color:var(--si-text) !important;line-height:1.7 !important}
.networkCard,.recognitionCard{border:1px solid var(--si-line) !important;border-radius:16px !important;background:#fff !important;box-shadow:0 7px 22px rgba(38,16,72,.04) !important}
.recognitionGrid{gap:18px !important}
/* Final CTA */
.home-final-cta{background:var(--si-soft) !important}
.home-final-cta-inner{border:0 !important;border-radius:24px !important;background:var(--si-purple) !important;color:#fff !important;padding:48px 50px !important;box-shadow:var(--si-shadow) !important}
.home-final-cta-inner>div:first-child>span{color:#fff !important;opacity:.8}.home-final-cta h2{color:#fff !important}.home-final-cta p{color:rgba(255,255,255,.8) !important}
.home-final-actions a{border-radius:999px !important;background:#fff !important;color:var(--si-purple) !important;border:0 !important}.home-final-actions a:nth-child(2){background:var(--si-red) !important;color:#fff !important}.home-final-actions a:nth-child(3){background:transparent !important;color:#fff !important;border:1px solid rgba(255,255,255,.45) !important}
/* Internal page heroes: approved small / medium / normal hierarchy */
.innerhero,.ctc-about-hero,.ctc-mv-hero,.ctc-detail-hero,.ctc-opps-hero,.aboutHero,.ctc-legal-hero{min-height:330px !important;position:relative !important}
.innerhero:before,.ctc-about-hero:before,.ctc-mv-hero:before,.ctc-detail-hero:before,.ctc-opps-hero:before,.aboutHero:before,.ctc-legal-hero:before{background:linear-gradient(90deg,rgba(24,4,71,.91),rgba(45,2,115,.67) 58%,rgba(45,2,115,.18)) !important}
.innerhero .wrap,.ctc-about-hero .wrap,.ctc-mv-hero .wrap,.ctc-detail-hero .wrap,.ctc-opps-hero .wrap,.aboutHero .wrap,.ctc-legal-hero .wrap{padding:72px 0 !important}
.innerhero h1,.ctc-about-hero h1,.ctc-mv-hero h1,.ctc-detail-hero h1,.ctc-opps-hero h1,.aboutHero h1,.ctc-legal-hero h1,
.ctc-about-title,.ctc-mv-title,.ctc-detail-title,.ctc-opps-title,.ctc-legal-title{
max-width:820px !important;margin:12px 0 14px !important;font-size:clamp(34px,3.7vw,46px) !important;line-height:1.08 !important;letter-spacing:-.025em !important;font-weight:800 !important;color:#fff !important;
}
.innerhero p,.ctc-about-hero p,.ctc-mv-hero p,.ctc-detail-hero p,.ctc-opps-hero p,.aboutHero p,.ctc-legal-hero p,
.ctc-about-hero-copy,.ctc-mv-hero-copy,.ctc-detail-hero-copy,.ctc-opps-hero-copy,.ctc-legal-hero-copy{max-width:720px !important;font-size:16px !important;line-height:1.65 !important;color:rgba(255,255,255,.9) !important}
/* Standard content, course directories and information cards */
.content>.wrap{max-width:1240px !important}.content>.wrap>p{max-width:850px !important;font-size:16px !important;line-height:1.75 !important;color:var(--si-text) !important}
.split{gap:52px !important}.split img,.coursehero img{border-radius:20px !important;box-shadow:var(--si-shadow) !important}
.cards,.ucards{gap:20px !important;border:0 !important}
.card,.ucard{border:1px solid var(--si-line) !important;border-radius:18px !important;overflow:hidden !important;background:#fff !important;box-shadow:0 8px 26px rgba(38,16,72,.05) !important;transition:transform .2s ease,box-shadow .2s ease !important}
.card:hover,.ucard:hover{transform:translateY(-4px) !important;background:#fff !important;box-shadow:var(--si-shadow) !important}
.card img{height:220px !important}.ucard img{height:190px !important}.cardbody,.ucard div{padding:19px !important}.cardbody span{color:var(--si-red) !important}.card h2,.card h3,.ucard h3{font-size:22px !important;line-height:1.18 !important;color:var(--si-purple) !important;font-weight:800 !important}.card b,.ucard a{color:var(--si-red) !important}
.subject{padding:60px 0 !important;border-bottom:1px solid var(--si-line) !important}.subject:nth-of-type(even){background:var(--si-soft) !important}.subject h2{font-size:clamp(30px,3.2vw,42px) !important;letter-spacing:-.025em !important;color:var(--si-ink) !important}
.ctc-slider-section{border-radius:18px !important}.ctc-slide-track{gap:18px !important}.ctc-slider-pause{border-radius:999px !important;border:1px solid var(--si-line) !important;background:#fff !important;color:var(--si-purple) !important}
.pill{border-radius:999px !important;background:var(--si-soft-2) !important;color:var(--si-purple) !important}
/* Forms */
.form{gap:20px !important}.form label{color:var(--si-ink) !important}.form input,.form select,.form textarea{padding:14px 15px !important;border:1px solid #dcd5e5 !important;border-radius:12px !important;background:#fff !important;outline:none}.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--si-purple) !important;box-shadow:0 0 0 3px rgba(45,2,115,.08) !important}
/* Footer */
footer{margin-top:0 !important;padding:66px 0 0 !important;background:var(--si-purple-dark) !important}.footgrid{gap:56px !important}.footgrid h4{font-size:16px !important}.footgrid a{color:rgba(255,255,255,.84) !important}.footgrid a:hover{color:#fff !important;text-decoration:underline}.footgrid p{color:rgba(255,255,255,.74) !important}.legal{background:rgba(0,0,0,.18) !important;color:rgba(255,255,255,.7) !important}.wa{width:56px !important;height:56px !important;box-shadow:0 12px 30px rgba(0,0,0,.18) !important}
/* Responsive */
@media(max-width:1050px){
.nav nav{gap:12px !important}.nav nav>a,.dd>a{font-size:12px !important}.brand img{width:170px !important}
.home-proof-grid{grid-template-columns:repeat(2,1fr) !important}.home-proof-grid>div:nth-child(2){border-right:0 !important}.home-proof-grid>div:nth-child(-n+2){border-bottom:1px solid var(--si-line) !important}
}
@media(max-width:900px){
.wrap{width:min(100% - 32px,1240px) !important}.nav{height:72px !important}.brand img{width:155px !important;height:56px !important}.nav nav{top:72px !important;border-top:1px solid var(--si-line);box-shadow:0 18px 40px rgba(30,15,50,.12)}
.homehero.liveHero.cleanThamesHero{min-height:520px !important}.cleanThamesHero .heroCopy{width:min(100% - 32px,1240px) !important;padding:76px 0 84px !important}
.home-welcome-grid,.home-why-grid{grid-template-columns:1fr !important;gap:34px !important}.home-services-grid{grid-template-columns:repeat(2,1fr) !important}.home-journey-grid{grid-template-columns:repeat(2,1fr) !important}
.home-final-cta-inner{padding:38px 32px !important}
}
@media(max-width:620px){
.wrap{width:min(100% - 24px,1240px) !important}.cleanThamesHero .heroCopy{width:min(100% - 24px,1240px) !important;padding:62px 0 70px !important}.homehero.liveHero .ctc-requested-title{font-size:36px !important}.homehero .eyebrow,.home-kicker,.innerhero .eyebrow,.ctc-about-kicker,.ctc-about-section-kicker,.ctc-mv-kicker,.ctc-detail-kicker,.ctc-opps-kicker,.ctc-legal-kicker{font-size:14px !important}.homehero.liveHero p{font-size:16px !important}
.home-proof-grid{grid-template-columns:1fr !important;margin-top:-18px !important}.home-proof-grid>div{border-right:0 !important;border-bottom:1px solid var(--si-line) !important}.home-proof-grid>div:last-child{border-bottom:0 !important}
.section,.content,.home-welcome,.home-what,.home-learning,.home-services,.home-journey,.home-why,.home-final-cta{padding:58px 0 !important}
.home-services-grid,.home-journey-grid{grid-template-columns:1fr !important}.home-what-grid{grid-template-columns:1fr !important}.home-what-card{min-height:0 !important}.slide{width:270px !important;flex-basis:270px !important}.slide img{height:180px !important;min-height:180px !important}
.innerhero,.ctc-about-hero,.ctc-mv-hero,.ctc-detail-hero,.ctc-opps-hero,.aboutHero,.ctc-legal-hero{min-height:300px !important}.innerhero .wrap,.ctc-about-hero .wrap,.ctc-mv-hero .wrap,.ctc-detail-hero .wrap,.ctc-opps-hero .wrap,.aboutHero .wrap,.ctc-legal-hero .wrap{padding:58px 0 !important}.innerhero h1,.ctc-about-hero h1,.ctc-mv-hero h1,.ctc-detail-hero h1,.ctc-opps-hero h1,.aboutHero h1,.ctc-legal-hero h1,.ctc-about-title,.ctc-mv-title,.ctc-detail-title,.ctc-opps-title,.ctc-legal-title{font-size:32px !important}
.home-final-cta-inner{padding:30px 24px !important;border-radius:18px !important}
}
/* Footer logo blend correction - 2026-10-02 */
footer .ctc-purple-footer-logo{
background:transparent !important;
}
/* Purple educational approach contrast correction - 2026-10-02 */
.ctc-about-dark .ctc-about-dark-heading h2,
.ctc-about-dark h2{
color:#fff !important;
}
.ctc-about-dark .ctc-about-dark-item h3{
color:#fff !important;
}
.ctc-about-dark .ctc-about-dark-item p{
color:rgba(255,255,255,.82) !important;
}
/* CTC application contrast correction - 2026-10-02 */
.ctc-application-section .ctc-application-aside h2{
color:#fff !important;
}
\n\n/* CTC SHORT UNIVERSITY ENQUIRY FORM */
.ctc-premium-form{gap:16px 18px}
.ctc-application-card{padding:34px}
.ctc-app-card-head{margin-bottom:20px}
.ctc-premium-form input:not([type="checkbox"]),
.ctc-premium-form select{height:52px}
.ctc-consent-row{margin-top:2px;padding:14px 16px}
.ctc-submit-button{height:54px}
.ctc-app-help{margin-top:22px}
@media(max-width:680px){
.ctc-application-card{padding:24px 18px}
.ctc-premium-form{gap:14px}
}
/* 2026-10-02: Compact University Courses directory spacing.
Keeps the Important notice and all course sections, while removing oversized vertical gaps. */
body.university-directory main > .content{
padding:34px 0 18px !important;
}
body.university-directory main > .content .notice{
margin:0 !important;
}
body.university-directory main > .subject{
padding:34px 0 30px !important;
}
body.university-directory main > .content + .subject{
padding-top:30px !important;
}
body.university-directory main > .subject > .wrap > h2{
margin:0 0 18px !important;
}
body.university-directory .ctc-slider-section{
padding:8px 0 14px !important;
margin-bottom:0 !important;
}
body.university-directory .ctc-slider-section .sectionhead{
padding-bottom:16px !important;
margin-bottom:20px !important;
}
@media(max-width:700px){
body.university-directory main > .content{padding:26px 0 12px !important}
body.university-directory main > .subject{padding:26px 0 22px !important}
body.university-directory main > .content + .subject{padding-top:24px !important}
body.university-directory main > .subject > .wrap > h2{margin-bottom:14px !important}
body.university-directory .ctc-slider-section{padding-top:6px !important;padding-bottom:10px !important}
}
/* 2026-10-05: PDF-grounded City Thames College course detail updates */
.coursehero h3{margin:26px 0 10px;font-size:1.15rem;color:#2a0768}
.course-entry-list{margin:8px 0 24px;padding-left:22px;line-height:1.7}
.course-entry-list li{margin:0 0 8px}
header .course-flyout{max-height:72vh;overflow-y:auto;overscroll-behavior:contain}
.ctc-slide .cardbody h3{line-height:1.2}
@media(max-width:900px){header .course-flyout{max-height:none;overflow:visible}}
/* 2026-10-05: PDF-based course detail expansion and image reliability pass */
.course-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 34px}
.course-fact{background:#f7f5fb;border:1px solid #e5dff0;padding:18px 20px;border-radius:14px}
.course-fact span{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6c6476;margin-bottom:5px}
.course-fact strong{display:block;font-family:Georgia,serif;font-size:24px;line-height:1.15;color:#200060}
.course-extra-section{margin-top:34px}
.course-extra-section h3{font-family:Georgia,serif;color:#200060;font-size:27px;margin:34px 0 12px}
.course-entry-list,.course-study-list,.course-assessment-list,.course-delivery-list{padding-left:22px;margin:12px 0 24px}
.course-entry-list li,.course-study-list li,.course-assessment-list li,.course-delivery-list li{margin:8px 0;line-height:1.62;color:#393447}
.coursehero>img{position:sticky;top:110px}
@media(max-width:900px){.coursehero>img{position:static}}
@media(max-width:620px){.course-facts{grid-template-columns:1fr}.course-extra-section h3{font-size:24px}}
/* =========================================================
UNIBEE V1 BRAND THEME
Built around the supplied UNIBEE purple + cyan logo.
========================================================= */
:root{
--uni-purple:#200060;
--uni-purple-2:#35108a;
--uni-cyan:#f5a800;
--uni-cyan-2:#ffc54d;
--uni-ink:#17132b;
--uni-soft:#f6f7fc;
--uni-line:#e8e7f1;
}
body{color:var(--uni-ink);font-family:Inter,Arial,sans-serif}
.topbar{display:none!important}
.unibee-header{background:rgba(255,255,255,.98);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100;box-shadow:0 6px 24px rgba(32,0,96,.08)}
.unibee-header .nav{height:88px;gap:20px}
.unibee-header .brand img{width:205px;height:62px;object-fit:contain}
.unibee-header nav{gap:18px}
.unibee-header .nav nav>a,.unibee-header .dd>a{font-size:13.5px;color:#21163d;letter-spacing:.01em}
.unibee-header .nav nav>a:hover,.unibee-header .dd>a:hover{color:var(--uni-cyan)}
.unibee-header .apply{background:linear-gradient(135deg,var(--uni-cyan),#0a91e9);border-radius:10px;padding:14px 18px;white-space:nowrap;box-shadow:0 8px 22px rgba(245,168,0,.24)}
.unibee-header .apply:hover{transform:translateY(-1px)}
.dropdown-triangle{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--uni-cyan);display:block}
.drop,.uni-panel{border:1px solid rgba(32,0,96,.08)!important;box-shadow:0 22px 55px rgba(32,0,96,.14)!important}
.drop a:hover,.uni-panel a:hover{background:#f1f8ff!important;color:var(--uni-purple)!important}
.eyebrow{color:var(--uni-cyan);letter-spacing:3px}
.section h2,.content h2,.slide h3,.card h3,.ucard h3,.subject h2{color:var(--uni-purple)}
.btn{background:linear-gradient(135deg,var(--uni-cyan),#0a91e9);border-radius:10px}
.text-link{font-weight:800;color:var(--uni-purple);text-decoration:none}
.text-link:hover{color:var(--uni-cyan)}
.unibee-hero{min-height:650px;position:relative;overflow:hidden;color:#fff;background:var(--uni-purple)}
.unibee-hero-photo{position:absolute;inset:0;background-image:url('https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=2200');background-size:cover;background-position:center 40%}
.unibee-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,0,96,.98) 0%,rgba(32,0,96,.88) 38%,rgba(32,0,96,.52) 64%,rgba(245,168,0,.15) 100%);z-index:1}
.unibee-hero:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(0,190,255,.35);border-radius:50%;right:-120px;top:-180px;z-index:1;box-shadow:0 0 0 90px rgba(245,168,0,.05),0 0 0 180px rgba(245,168,0,.035)}
.unibee-hero-inner{position:relative;z-index:2;min-height:650px;display:flex;align-items:center}
.unibee-hero-copy{max-width:780px;padding:90px 0}
.unibee-hero h1{font-family:Inter,Arial,sans-serif;font-weight:800;font-size:clamp(52px,5.4vw,82px);line-height:1.02;letter-spacing:-.045em;margin:16px 0 24px}
.unibee-hero p{font-size:20px;line-height:1.6;max-width:680px;color:rgba(255,255,255,.92)}
.unibee-hero .btn.alt{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.65)}
.unibee-benefits{margin-top:-42px;position:relative;z-index:4}
.unibee-benefits .benefitgrid{border-top:4px solid var(--uni-cyan)}
.unibee-benefits .benefitgrid strong{font-family:Inter,Arial,sans-serif;font-size:17px}
.unibee-benefits .benefitgrid span{font-size:13px;line-height:1.5;color:#6c6678}
.unibee-intro{padding:95px 0}
.unibee-intro-grid{grid-template-columns:1fr .85fr}
.unibee-feature-panel{background:linear-gradient(145deg,var(--uni-purple),#36128d);color:#fff;border-radius:24px;padding:34px;box-shadow:0 24px 55px rgba(32,0,96,.18)}
.unibee-feature-panel>span{display:inline-flex;color:var(--uni-cyan);font-weight:900;font-size:12px;letter-spacing:2px;margin-top:8px}
.unibee-feature-panel h3{font-size:22px;margin:6px 0 8px}
.unibee-feature-panel p{color:rgba(255,255,255,.78);margin:0 0 16px}
.soft{background:linear-gradient(180deg,#f8f9fd,#f4f7fb)}
.runner{padding:4px 0 14px}
.slide{border:0;box-shadow:0 14px 34px rgba(32,0,96,.09);border-radius:18px;transition:transform .25s ease,box-shadow .25s ease}
.slide:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(32,0,96,.15)}
.slide img{height:205px}
.course-explore{display:block;color:var(--uni-cyan);margin-top:12px;font-size:13px}
.unibee-services{padding:92px 0;background:#fff}
.home-section-head{max-width:760px;margin-bottom:30px}
.home-section-head h2{font-size:44px;color:var(--uni-purple);margin:8px 0 12px}
.home-section-head p{font-size:17px;line-height:1.7;color:#625d6d}
.home-services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.home-services-grid>a{display:block;text-decoration:none;border:1px solid var(--uni-line);border-radius:18px;padding:26px;background:#fff;transition:.25s ease}
.home-services-grid>a:hover{border-color:rgba(245,168,0,.55);transform:translateY(-4px);box-shadow:0 16px 34px rgba(32,0,96,.09)}
.home-services-grid span{font-size:12px;font-weight:900;color:var(--uni-cyan)}
.home-services-grid h3{color:var(--uni-purple);font-size:20px;margin:18px 0 10px}
.home-services-grid p{font-size:14px;line-height:1.65;color:#686273}
.home-services-grid b{color:var(--uni-purple);font-size:13px}
.unibee-why{padding:92px 0;background:linear-gradient(120deg,#170047 0%,#200060 60%,#143b7a 100%);color:#fff;position:relative;overflow:hidden}
.unibee-why:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(245,168,0,.12);right:-160px;bottom:-220px}
.unibee-why-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;position:relative;z-index:2}
.unibee-why h2{font-size:46px;margin:10px 0 18px}
.unibee-why p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.78)}
.home-why-btn{display:inline-block;margin-top:16px;color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid var(--uni-cyan);padding-bottom:6px}
.home-why-points>div{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.home-why-points b{color:var(--uni-cyan)}
.home-why-points span{display:flex;flex-direction:column;gap:5px}
.home-why-points strong{font-size:18px}
.home-why-points small{font-size:13px;line-height:1.5;color:rgba(255,255,255,.7)}
.unibee-final-cta{padding:72px 0;background:#eff9fe}
.home-final-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:50px}
.home-final-cta-inner>div:first-child{max-width:700px}
.home-final-cta-inner span{font-size:12px;letter-spacing:2px;font-weight:900;color:var(--uni-cyan)}
.home-final-cta-inner h2{font-size:38px;color:var(--uni-purple);margin:8px 0}
.home-final-cta-inner p{color:#615b6c;line-height:1.6}
.home-final-actions{display:flex;flex-direction:column;gap:10px;min-width:220px}
.home-final-actions a{text-decoration:none;background:#fff;border:1px solid #dfe9ef;border-radius:10px;padding:13px 16px;font-weight:800;color:var(--uni-purple)}
.home-final-actions a:first-child{background:var(--uni-purple);color:#fff;border-color:var(--uni-purple)}
.unibee-innerhero{min-height:360px;background-size:cover;background-position:center;position:relative}
.unibee-innerhero .wrap{position:relative;z-index:2}
.unibee-innerhero h1{font-family:Inter,Arial,sans-serif;font-weight:800;letter-spacing:-.035em;max-width:820px}
.unibee-innerhero p{max-width:760px}
.content{padding:76px 0}
.content h2{font-family:Inter,Arial,sans-serif;font-weight:800;letter-spacing:-.025em}
.unibee-info-card{border:1px solid var(--uni-line);border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(32,0,96,.07);text-decoration:none;padding:28px!important}
.unibee-info-card span{color:var(--uni-cyan);font-weight:900;font-size:12px;letter-spacing:1.5px}
.unibee-info-card h3{font-family:Inter,Arial,sans-serif;color:var(--uni-purple);font-size:23px}
.unibee-info-card p{color:#625d6d;line-height:1.65}
.unibee-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.unibee-steps>div{padding:28px;border:1px solid var(--uni-line);border-radius:18px}
.unibee-steps b{color:var(--uni-cyan)}
.unibee-steps h3{color:var(--uni-purple);font-size:22px}
.unibee-steps p{font-size:14px;line-height:1.65;color:#625d6d}
.unibee-form{background:#fff;border:1px solid var(--uni-line);padding:28px;border-radius:20px;box-shadow:0 18px 45px rgba(32,0,96,.08)}
.unibee-form input:focus,.unibee-form select:focus,.unibee-form textarea:focus{outline:2px solid rgba(245,168,0,.25);border-color:var(--uni-cyan)}
.unibee-consent{display:flex;gap:10px;align-items:flex-start}
.unibee-consent input{width:auto;margin-top:2px}
.unibee-footer{background:#f7f8fc!important;color:#2a2440;padding:54px 0 0;border-top:1px solid var(--uni-line)}
.unibee-footer .unibee-footer-logo{width:240px;max-width:100%;height:auto;background:transparent}
.unibee-footer .footgrid p{color:#655f72}
.unibee-footer .footgrid a{color:#40384f}
.unibee-footer .footgrid a:hover{color:var(--uni-cyan)}
.unibee-footer h4{color:var(--uni-purple)}
.unibee-footer .legal{background:var(--uni-purple);color:#dcd4ef}
.footer-note{font-size:13px}
.photoCredits{display:none!important}
.subject{scroll-margin-top:110px}
.pill{background:#eef8ff;color:var(--uni-purple)}
.notice{background:#f0f9ff;border-left-color:var(--uni-cyan)}
.ucard a,.cardbody span{color:var(--uni-cyan)}
@media(max-width:1100px){
.unibee-header .nav{gap:12px}
.unibee-header .brand img{width:175px}
.unibee-header nav{gap:12px}
.unibee-header .nav nav>a,.unibee-header .dd>a{font-size:12.5px}
}
@media(max-width:900px){
.unibee-header .nav{height:76px}
.unibee-header .brand img{width:170px;height:55px}
.unibee-header .nav nav{top:76px;max-height:calc(100vh - 76px);overflow:auto}
.unibee-header .apply{display:none}
.unibee-hero,.unibee-hero-inner{min-height:600px}
.home-services-grid,.unibee-steps{grid-template-columns:1fr 1fr}
.unibee-why-grid{grid-template-columns:1fr;gap:35px}
.home-final-cta-inner{flex-direction:column;align-items:flex-start}
.home-final-actions{width:100%}
}
@media(max-width:620px){
.unibee-hero h1{font-size:48px}
.unibee-hero-copy{padding:70px 0}
.unibee-benefits{margin-top:0}
.home-services-grid,.unibee-steps{grid-template-columns:1fr}
.home-section-head h2,.unibee-why h2{font-size:36px}
.unibee-feature-panel{padding:26px}
}
/* UNIBEE V2 - footer readability + slightly larger logo */
.unibee-header .brand{
flex:0 0 240px !important;
}
.unibee-header .brand img{
width:240px !important;
height:72px !important;
}
.unibee-footer{
background:#f7f8fc !important;
color:#2a2440 !important;
}
.unibee-footer .unibee-footer-logo{
width:285px !important;
max-width:100% !important;
height:auto !important;
background:transparent !important;
}
.unibee-footer .footgrid h4{
color:#200060 !important;
}
.unibee-footer .footgrid p,
.unibee-footer .footer-note{
color:#655f72 !important;
}
.unibee-footer .footgrid a{
color:#40384f !important;
}
.unibee-footer .footgrid a:hover{
color:#f5a800 !important;
}
.unibee-footer .legal{
background:#200060 !important;
color:#e8e1f6 !important;
}
@media(max-width:1100px){
.unibee-header .brand{flex-basis:205px !important}
.unibee-header .brand img{width:205px !important;height:66px !important}
}
@media(max-width:900px){
.unibee-header .brand{flex-basis:190px !important}
.unibee-header .brand img{width:190px !important;height:60px !important}
}
@media(max-width:480px){
.unibee-header .brand{flex-basis:150px !important}
.unibee-header .brand img{width:150px !important;height:52px !important}
}
/* UNIBEE V3 - GBS course catalogue */
.gbs-courses-hero{min-height:420px}
.gbs-source-note{background:#fff7df;border-bottom:1px solid #ccefff;padding:18px 0;color:#3d3650;font-size:14px;line-height:1.6}
.gbs-source-note strong{color:#200060}
.gbs-subject-section{padding:72px 0;scroll-margin-top:100px}
.gbs-course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gbs-course-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid #e7e5f0;border-radius:18px;padding:25px;box-shadow:0 12px 30px rgba(32,0,96,.06);transition:.22s ease;min-height:260px}
.gbs-course-card:hover{transform:translateY(-4px);border-color:rgba(245,168,0,.55);box-shadow:0 18px 40px rgba(32,0,96,.11)}
.gbs-course-card>span{font-size:11px;letter-spacing:1.4px;font-weight:900;color:#f5a800;text-transform:uppercase}
.gbs-course-card h3{font-size:20px;line-height:1.3;color:#200060;margin:14px 0;letter-spacing:-.015em}
.gbs-course-card p{font-size:13px;color:#696273;line-height:1.55}
.gbs-course-card>strong{color:#200060;font-size:13px;margin-top:auto;padding-top:16px}
.gbs-card-meta{display:flex;gap:8px;flex-wrap:wrap}
.gbs-card-meta b{font-size:11px;background:#f0f8ff;color:#40365b;border-radius:999px;padding:7px 9px}
.gbs-empty{max-width:800px}
.gbs-empty h2{color:#200060}
.gbs-course-hero{min-height:490px;background-size:cover;background-position:center;display:flex;align-items:center;color:#fff}
.gbs-course-hero .wrap{padding-top:60px;padding-bottom:60px}
.gbs-course-hero h1{font-size:clamp(42px,5vw,68px);line-height:1.04;letter-spacing:-.04em;max-width:1000px;margin:14px 0 18px}
.gbs-course-hero p{font-size:18px;max-width:720px;color:rgba(255,255,255,.86)}
.gbs-course-hero .btn.alt{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.5)}
.gbs-facts{background:#fff;border-bottom:1px solid #eceaf3;box-shadow:0 12px 28px rgba(32,0,96,.05)}
.gbs-facts-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.gbs-facts-grid>div{padding:22px 20px;border-right:1px solid #eceaf3;border-bottom:1px solid #eceaf3}
.gbs-facts-grid span{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#f5a800;font-weight:900;margin-bottom:6px}
.gbs-facts-grid strong{font-size:14px;color:#2d2542;line-height:1.45}
.gbs-course-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:54px;align-items:start}
.gbs-main>h2{font-size:34px;margin:7px 0 14px}
.gbs-main>p{font-size:16px;line-height:1.75;color:#5e5869;margin-bottom:36px}
.gbs-main>.eyebrow{display:block;margin-top:42px}
.gbs-fee-box{background:linear-gradient(135deg,#200060,#36128d);color:#fff;border-radius:18px;padding:24px;margin:28px 0 45px}
.gbs-fee-box span,.gbs-fee-box small{display:block}
.gbs-fee-box span{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#5ed3ff;font-weight:900}
.gbs-fee-box strong{display:block;font-size:24px;margin:8px 0}
.gbs-fee-box small{color:rgba(255,255,255,.72);line-height:1.5}
.gbs-modules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 44px}
.gbs-module-block{border:1px solid #e7e5f0;border-radius:16px;padding:20px;background:#fff}
.gbs-module-block h3{font-size:17px;color:#200060;margin:0 0 12px}
.gbs-module-block ul{margin:0;padding-left:18px}
.gbs-module-block li{font-size:13px;line-height:1.55;color:#5d5669;margin:6px 0}
.gbs-note{font-size:13px!important;background:#f5f9fc;border-left:3px solid #f5a800;padding:12px 14px;margin-bottom:18px!important}
.gbs-sidebar{position:sticky;top:115px;display:flex;flex-direction:column;gap:16px}
.gbs-side-card{border:1px solid #e7e5f0;border-radius:18px;padding:22px;background:#fff;box-shadow:0 12px 28px rgba(32,0,96,.06)}
.gbs-side-card h3{color:#200060;font-size:19px;margin-top:0}
.gbs-side-card p{font-size:13px;line-height:1.55;color:#625b6d}
.gbs-side-card .btn{display:block;text-align:center;margin-top:18px}
.source-card{background:#f4faff}
.source-card a{font-size:13px;font-weight:800;color:#200060;text-decoration:none}
.gbs-alert{background:#fff5e9;border-left:4px solid #f4a12b;border-radius:8px;padding:14px 16px;color:#59432b;line-height:1.55;margin-bottom:28px;font-size:14px}
@media(max-width:1000px){
.gbs-course-grid{grid-template-columns:1fr 1fr}
.gbs-course-layout{grid-template-columns:1fr}
.gbs-sidebar{position:static}
}
@media(max-width:680px){
.gbs-course-grid,.gbs-modules,.gbs-facts-grid{grid-template-columns:1fr}
.gbs-course-hero{min-height:430px}
.gbs-course-hero h1{font-size:40px}
.gbs-subject-section{padding:54px 0}
}
/* UNIBEE V5 - expanded neutral catalogue */
.course-category-block{margin:0 0 48px}
.course-category-block>h3{font-size:24px;color:#200060;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #e7e5f0}
.courses-page .gbs-course-card{min-height:235px}
.course-detail-page .gbs-module-block{margin:18px 0 44px}
.course-detail-page .gbs-module-block li{font-size:14px;margin:8px 0}
/* =========================================================
UNIBEE V6 - CLEAN RIGHT-SIDE COURSE FLYOUTS
Courses > study level > subject > individual courses
========================================================= */
@media(min-width:1101px){
.unibee-header,
.unibee-header .nav,
.unibee-header nav,
.university-menu,
.university-menu>.drop,
.university-menu .uni-branch{
overflow:visible !important;
}
.university-menu>.drop{
left:0 !important;
top:calc(100% + 12px) !important;
width:270px !important;
min-width:270px !important;
padding:10px !important;
border-radius:16px !important;
}
.university-menu>.drop>.uni-branch{
position:relative !important;
}
.university-menu .uni-row{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
min-height:48px !important;
}
.university-menu .uni-row>a{
flex:1 1 auto !important;
padding:12px 10px !important;
line-height:1.3 !important;
}
.university-menu .uni-toggle{
flex:0 0 34px !important;
width:34px !important;
min-width:34px !important;
}
/* First extension: always to the RIGHT of the study-level menu. */
.university-menu>.drop>.uni-branch>.uni-panel{
display:none;
position:absolute !important;
left:calc(100% + 10px) !important;
right:auto !important;
top:-10px !important;
width:300px !important;
max-height:none !important;
overflow:visible !important;
padding:10px !important;
border-radius:16px !important;
background:#fff !important;
z-index:220 !important;
}
/* Second extension: individual courses continue further RIGHT. */
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch>.uni-panel{
display:none;
position:absolute !important;
left:calc(100% + 10px) !important;
right:auto !important;
top:-10px !important;
width:390px !important;
max-height:72vh !important;
overflow-x:hidden !important;
overflow-y:auto !important;
padding:10px !important;
border-radius:16px !important;
background:#fff !important;
z-index:230 !important;
}
.university-menu>.drop>.uni-branch:hover>.uni-panel,
.university-menu>.drop>.uni-branch:focus-within>.uni-panel,
.university-menu>.drop>.uni-branch.is-open>.uni-panel,
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch:hover>.uni-panel,
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch:focus-within>.uni-panel,
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch.is-open>.uni-panel{
display:block !important;
}
.university-menu .uni-panel a{
display:block !important;
padding:11px 12px !important;
white-space:normal !important;
line-height:1.35 !important;
border-radius:10px !important;
}
}
/* =========================================================
UNIBEE V6 - RUNNING COURSE SLIDERS ON COURSES PAGE
========================================================= */
.courses-page .course-category-block{
margin:0 0 58px !important;
overflow:visible;
}
.courses-page .course-category-block>h3{
margin-bottom:20px !important;
}
.course-running-slider{
width:100%;
overflow:hidden;
padding:4px 2px 22px;
}
.course-running-track{
display:flex;
width:max-content;
gap:20px;
will-change:transform;
animation:unibeeCourseRowRun var(--course-slider-duration,36s) linear infinite;
animation-play-state:running !important;
}
.course-running-slider:hover .course-running-track,
.course-running-slider:focus-within .course-running-track{
animation-play-state:running !important;
}
.course-running-group{
display:flex;
gap:20px;
}
.course-running-slider .gbs-course-card{
width:340px !important;
flex:0 0 340px !important;
min-height:455px !important;
padding:0 !important;
overflow:hidden !important;
border-radius:18px !important;
background:#fff !important;
}
.course-card-image{
width:100%;
height:205px;
overflow:hidden;
background:#eef4fa;
}
.course-card-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}
.course-running-slider .gbs-course-card:hover .course-card-image img{
transform:scale(1.035);
}
.course-card-content{
display:flex;
flex-direction:column;
flex:1 1 auto;
padding:22px 24px 24px;
}
.course-card-content>span{
font-size:11px;
letter-spacing:1.4px;
font-weight:900;
color:#f5a800;
text-transform:uppercase;
}
.course-card-content h3{
font-size:20px;
line-height:1.3;
color:#200060;
margin:12px 0;
letter-spacing:-.015em;
}
.course-card-content p{
font-size:13px;
color:#696273;
line-height:1.55;
}
.course-card-content>strong{
color:#200060;
font-size:13px;
margin-top:auto;
padding-top:16px;
}
@keyframes unibeeCourseRowRun{
to{transform:translateX(calc(-50% - 10px))}
}
@media(max-width:700px){
.course-running-slider .gbs-course-card{
width:285px !important;
flex-basis:285px !important;
min-height:430px !important;
}
.course-card-image{height:175px}
}
@media(prefers-reduced-motion:reduce){
.course-running-slider{overflow-x:auto}
.course-running-track{animation:none !important}
.course-running-group[aria-hidden="true"]{display:none}
}
/* =========================================================
UNIBEE V7 - RELIABLE COURSE FLYOUT HOVER CORRIDOR
Removes the pointer gap that caused Foundation and other
right-side flyouts to disappear before the mouse reached them.
========================================================= */
@media(min-width:1101px){
.university-menu>.drop>.uni-branch>.uni-panel{
left:calc(100% - 2px) !important;
margin-left:0 !important;
}
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch>.uni-panel{
left:calc(100% - 2px) !important;
margin-left:0 !important;
}
/* Invisible hover bridge: keeps the submenu alive during pointer travel. */
.university-menu .uni-panel::before{
content:"";
position:absolute;
left:-14px;
top:0;
width:16px;
height:100%;
background:transparent;
pointer-events:auto;
}
.university-menu>.drop>.uni-branch:hover>.uni-panel,
.university-menu>.drop>.uni-branch>.uni-panel:hover,
.university-menu>.drop>.uni-branch:focus-within>.uni-panel,
.university-menu>.drop>.uni-branch.is-open>.uni-panel,
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch:hover>.uni-panel,
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch>.uni-panel:hover,
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch:focus-within>.uni-panel,
.university-menu>.drop>.uni-branch>.uni-panel>.uni-branch.is-open>.uni-panel{
display:block !important;
}
}
/* V7: short course rows use their real number of courses only.
The second group is solely the seamless animation copy. */
.course-running-group{
min-width:max-content;
}
.course-running-slider .course-running-group>.gbs-course-card{
margin:0;
}
/* =========================================================
UNIBEE V9 - FINAL COURSES HOVER FIX
Continuous pointer path:
Courses > level > subject > individual course
========================================================= */
@media (min-width:1101px) and (hover:hover) and (pointer:fine){
/* Remove the previous 12px dead zone below the Courses trigger. */
.university-menu > .drop{
top:100% !important;
margin-top:0 !important;
}
/* Extra invisible vertical hover bridge above the main dropdown. */
.university-menu > .drop::after{
content:"";
position:absolute;
left:0;
right:0;
top:-16px;
height:16px;
background:transparent;
pointer-events:auto;
}
/* Keep the main menu visible while the pointer travels into it. */
.university-menu:hover > .drop,
.university-menu.hover-open > .drop,
.university-menu:focus-within > .drop,
.university-menu.is-open > .drop{
display:block !important;
}
/* Keep every cascading level visible during normal pointer travel. */
.university-menu .uni-branch.hover-open > .uni-panel,
.university-menu .uni-branch:hover > .uni-panel,
.university-menu .uni-branch:focus-within > .uni-panel,
.university-menu .uni-branch.is-open > .uni-panel{
display:block !important;
}
/* Panels touch/overlap their parent by 2px - no horizontal dead zone. */
.university-menu > .drop > .uni-branch > .uni-panel,
.university-menu > .drop > .uni-branch > .uni-panel > .uni-branch > .uni-panel{
left:calc(100% - 2px) !important;
margin-left:0 !important;
}
}
/* =========================================================
UNIBEE V10 - PROFESSIONAL APPLICATION EXPERIENCE
========================================================= */
.application-page{background:#f7f8fc}
.application-hero{
position:relative;overflow:hidden;padding:78px 0 72px;
background:radial-gradient(circle at 88% 20%,rgba(245,168,0,.28),transparent 26%),
linear-gradient(125deg,#200060 0%,#2c0872 58%,#35108a 100%);color:#fff
}
.application-hero::after{
content:"";position:absolute;width:360px;height:360px;right:-90px;bottom:-220px;
border:1px solid rgba(255,255,255,.22);border-radius:50%;
box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.025)
}
.application-hero-grid{
position:relative;z-index:1;display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr);gap:70px;align-items:end
}
.application-hero .eyebrow{color:#ffd36a}
.application-hero h1{
max-width:780px;margin:13px 0 18px;color:#fff;font-size:clamp(42px,5vw,72px);
line-height:1.02;letter-spacing:-.045em
}
.application-hero-copy>p{max-width:760px;margin:0;color:rgba(255,255,255,.82);font-size:18px;line-height:1.7}
.application-points{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.application-points span{
display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(255,255,255,.18);
border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:700;backdrop-filter:blur(8px)
}
.application-points b{color:#ffd36a;font-size:11px;letter-spacing:.08em}
.application-hero-note{
display:flex;gap:15px;padding:24px;border:1px solid rgba(255,255,255,.2);border-radius:22px;
background:rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.12);backdrop-filter:blur(10px)
}
.application-note-icon{
display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;
background:#f5a800;color:#fff;font-weight:900
}
.application-hero-note strong{display:block;color:#fff;font-size:17px}
.application-hero-note p{margin:5px 0 0;color:rgba(255,255,255,.72);font-size:13px;line-height:1.55}
.application-section{padding:74px 0 90px}
.application-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.55fr);gap:58px;align-items:start}
.application-aside{position:sticky;top:115px;padding:10px 0}
.application-aside h2{margin:11px 0 14px;color:#200060;font-size:34px;line-height:1.12;letter-spacing:-.03em}
.application-aside>p{margin:0 0 30px;color:#6d6878;line-height:1.65}
.application-step{display:flex;gap:15px;padding:20px 0;border-top:1px solid #e4e3ec}
.application-step>span{
display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;
background:#fff7df;color:#c88400;font-size:12px;font-weight:900
}
.application-step strong{display:block;color:#21193d;font-size:15px}
.application-step p{margin:5px 0 0;color:#777181;font-size:13px;line-height:1.5}
.application-disclaimer{margin-top:24px;padding:20px;border-left:4px solid #f5a800;border-radius:0 14px 14px 0;background:#eef9fe}
.application-disclaimer strong{color:#200060}
.application-disclaimer p{margin:6px 0 0;color:#5e5969;font-size:12px;line-height:1.55}
.application-card{overflow:hidden;border:1px solid #e4e2ed;border-radius:26px;background:#fff;box-shadow:0 24px 65px rgba(32,0,96,.09)}
.application-card-head{padding:34px 38px 28px;border-bottom:1px solid #eceaf2;background:linear-gradient(180deg,#fff,#fbfbfe)}
.application-card-head h2{margin:8px 0 6px;color:#200060;font-size:32px;letter-spacing:-.03em}
.application-card-head p{margin:0;color:#777181;font-size:13px}
.professional-application-form{padding:8px 38px 38px}
.professional-application-form fieldset{margin:0;padding:30px 0;border:0;border-bottom:1px solid #eceaf2}
.professional-application-form legend{
display:flex;align-items:center;gap:11px;width:100%;margin:0 0 22px;padding:0;color:#200060;font-size:18px;font-weight:850
}
.professional-application-form legend span{
display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#200060;color:#fff;font-size:11px;letter-spacing:.06em
}
.application-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.application-form-grid label{display:flex;flex-direction:column;gap:8px;color:#2a2439;font-size:13px;font-weight:750}
.application-form-grid label.full{grid-column:1/-1}
.application-form-grid input,.application-form-grid select,.application-form-grid textarea{
width:100%;min-height:54px;padding:13px 15px;border:1px solid #dcd9e7;border-radius:12px;outline:0;
background:#fff;color:#211d2d;font:inherit;font-weight:500;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}
.application-form-grid textarea{min-height:118px;resize:vertical}
.application-form-grid input::placeholder,.application-form-grid textarea::placeholder{color:#aaa5b4}
.application-form-grid input:focus,.application-form-grid select:focus,.application-form-grid textarea:focus{
border-color:#f5a800;box-shadow:0 0 0 4px rgba(245,168,0,.11);background:#fcfeff
}
.application-consent{display:flex;align-items:flex-start;gap:12px;margin:27px 0 20px;color:#5f596a;font-size:12px;line-height:1.55}
.application-consent input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:#200060}
.application-consent a{color:#200060;font-weight:800;text-decoration:underline}
.application-submit{
display:flex;align-items:center;justify-content:space-between;width:100%;min-height:62px;padding:0 20px 0 24px;
border:0;border-radius:14px;background:linear-gradient(100deg,#200060,#35108a 66%,#f5a800 150%);
color:#fff;cursor:pointer;box-shadow:0 13px 30px rgba(32,0,96,.2);font-size:15px;font-weight:850;
transition:transform .2s ease,box-shadow .2s ease
}
.application-submit:hover{transform:translateY(-2px);box-shadow:0 17px 36px rgba(32,0,96,.25)}
.application-submit b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f5a800;color:#fff;font-size:18px}
.application-form-note{margin:13px 0 0;text-align:center;color:#8a8493;font-size:11px;line-height:1.5}
@media(max-width:900px){
.application-hero-grid,.application-layout{grid-template-columns:1fr}
.application-hero-grid{gap:34px}.application-layout{gap:36px}.application-aside{position:static}
}
@media(max-width:620px){
.application-hero{padding:56px 0 50px}.application-hero h1{font-size:42px}
.application-points{align-items:stretch;flex-direction:column}.application-points span{width:max-content;max-width:100%}
.application-section{padding:46px 0 65px}.application-card-head{padding:27px 22px 22px}
.professional-application-form{padding:4px 22px 28px}.application-form-grid{grid-template-columns:1fr}
.application-form-grid label.full{grid-column:auto}.application-card{border-radius:20px}
}
/* =========================================================
UNIBEE V11 - OFFICIAL CONTACT DETAILS
========================================================= */
.contact-hero{
padding:78px 0 72px;
background:
radial-gradient(circle at 86% 18%,rgba(245,168,0,.25),transparent 27%),
linear-gradient(125deg,#200060 0%,#2c0872 62%,#35108a 100%);
color:#fff;
}
.contact-hero .eyebrow{color:#ffd36a}
.contact-hero h1{
margin:12px 0 14px;
color:#fff;
font-size:clamp(44px,5vw,72px);
line-height:1.02;
letter-spacing:-.045em;
}
.contact-hero p{
max-width:720px;
margin:0;
color:rgba(255,255,255,.8);
font-size:18px;
line-height:1.7;
}
.contact-details-section{padding:72px 0;background:#f7f8fc}
.contact-details-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.contact-detail-card{
display:flex;
flex-direction:column;
min-height:285px;
padding:30px;
border:1px solid #e4e2ed;
border-radius:22px;
background:#fff;
color:#211d2d;
text-decoration:none;
box-shadow:0 18px 45px rgba(32,0,96,.07);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.contact-detail-card:hover{
transform:translateY(-4px);
border-color:rgba(245,168,0,.45);
box-shadow:0 24px 55px rgba(32,0,96,.11);
}
.contact-detail-kicker{
margin-bottom:22px;
color:#d58e00;
font-size:12px;
font-weight:900;
letter-spacing:.1em;
}
.contact-detail-card h2{
margin:0 0 13px;
color:#200060;
font-size:24px;
line-height:1.2;
overflow-wrap:anywhere;
}
.contact-detail-card p,
.contact-detail-card address{
margin:0;
color:#6d6878;
font-size:14px;
font-style:normal;
line-height:1.65;
}
.contact-detail-card b{
margin-top:auto;
padding-top:24px;
color:#200060;
font-size:13px;
}
.contact-address-card{border-top:4px solid #f5a800}
.contact-address-card .company-registration{
margin-top:18px;
padding-top:18px;
border-top:1px solid #eceaf2;
color:#393247;
font-weight:700;
}
.contact-cta-section{padding:0 0 82px;background:#f7f8fc}
.contact-cta-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:35px;
padding:38px 42px;
border-radius:24px;
background:#200060;
color:#fff;
}
.contact-cta-box .eyebrow{color:#ffd36a}
.contact-cta-box h2{margin:7px 0 6px;color:#fff;font-size:30px}
.contact-cta-box p{margin:0;color:rgba(255,255,255,.72)}
/* Official company/contact block in every footer */
.unibee-official-details{
display:grid;
grid-template-columns:1.6fr .9fr 1fr;
gap:30px;
width:min(1180px,calc(100% - 40px));
margin:28px auto 0;
padding:24px 0 26px;
border-top:1px solid rgba(32,0,96,.13);
}
.unibee-official-details .official-detail{
display:flex;
flex-direction:column;
gap:5px;
}
.unibee-official-details .official-detail>span{
color:#200060;
font-size:11px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.unibee-official-details address,
.unibee-official-details p,
.unibee-official-details a{
margin:0;
color:#5f596a;
font-size:12px;
font-style:normal;
line-height:1.55;
text-decoration:none;
}
.unibee-official-details a:hover{color:#f5a800}
@media(max-width:900px){
.contact-details-grid{grid-template-columns:1fr}
.contact-detail-card{min-height:230px}
.unibee-official-details{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.contact-hero{padding:56px 0 50px}
.contact-details-section{padding:46px 0}
.contact-detail-card{padding:25px;min-height:0}
.contact-cta-section{padding-bottom:60px}
.contact-cta-box{align-items:flex-start;flex-direction:column;padding:30px 25px}
.unibee-official-details{grid-template-columns:1fr;gap:18px}
}
/* =========================================================
UNIBEE V12 - FINAL FOOTER BAR
Inspired by the supplied reference: privacy left,
copyright centred, social icons right.
========================================================= */
.footer-programme-disclaimer{
margin-top:34px;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.12);
background:#170047;
color:rgba(255,255,255,.68);
font-size:11px;
line-height:1.65;
text-align:center;
}
.footer-bottom-bar{
width:100%;
background:#0d3157;
border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom-inner{
min-height:92px;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:28px;
}
.footer-privacy-link{
justify-self:start;
color:#fff !important;
text-decoration:none !important;
font-size:15px;
font-weight:650;
}
.footer-privacy-link:hover{
color:#ffd36a !important;
text-decoration:underline !important;
text-underline-offset:4px;
}
.footer-copyright{
justify-self:center;
color:#fff;
font-size:14px;
font-weight:650;
text-align:center;
white-space:nowrap;
}
.footer-socials{
justify-self:end;
display:flex;
align-items:center;
gap:13px;
}
.footer-social-icon{
display:grid;
place-items:center;
width:30px;
height:30px;
border:2px solid rgba(255,255,255,.78);
color:#fff;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:800;
line-height:1;
opacity:.92;
user-select:none;
}
.footer-social-icon.facebook,
.footer-social-icon.x-social,
.footer-social-icon.tiktok{
border-radius:4px;
}
.footer-social-icon.linkedin,
.footer-social-icon.instagram{
border-radius:7px;
}
.footer-social-icon.youtube{
width:34px;
border-radius:8px;
font-size:12px;
}
.footer-social-icon.linkedin{font-size:11px;letter-spacing:-.04em}
.footer-social-icon.instagram{font-size:18px}
.footer-social-icon.tiktok{font-size:17px}
@media(max-width:850px){
.footer-bottom-inner{
min-height:0;
padding:25px 0;
grid-template-columns:1fr;
justify-items:center;
gap:18px;
}
.footer-privacy-link,
.footer-copyright,
.footer-socials{
justify-self:center;
}
.footer-copyright{
white-space:normal;
}
}
/* =========================================================
UNIBEE V13 - FINAL PURPLE FOOTER
========================================================= */
.footer-bottom-bar{
background:#200060 !important;
border-top:0 !important;
}
/* =========================================================
UNIBEE V1 - APPROVED BRAND IDENTITY
Purple + golden yellow from the supplied transparent logo.
========================================================= */
:root{
--unibee-purple:#2b005b;
--unibee-purple-deep:#200050;
--unibee-gold:#f5a800;
--unibee-gold-light:#ffd36a;
}
.unibee-header .brand img{
width:230px !important;
height:68px !important;
object-fit:contain !important;
}
.unibee-footer .unibee-footer-logo{
width:270px !important;
max-width:100%;
height:auto;
background:transparent !important;
}
.apply,.btn.primary,.application-submit{
background:linear-gradient(105deg,#2b005b 0%,#3a0872 58%,#f5a800 145%) !important;
}
.eyebrow,.home-kicker,.cardbody span,.ucard a{
color:#f5a800 !important;
}
.dropdown-triangle{
border-top-color:#f5a800 !important;
}
.footer-bottom-bar{
background:#2b005b !important;
}
@media(max-width:900px){
.unibee-header .brand img{width:185px !important;height:58px !important}
}
@media(max-width:480px){
.unibee-header .brand img{width:150px !important;height:52px !important}
}
/* UNIBEE V1 - contact enquiry layout until official contact details are supplied */
.contact-enquiry-layout{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(330px,.75fr);
gap:55px;
align-items:center;
}
.contact-enquiry-copy h2,
.contact-enquiry-card h2{
margin:10px 0 14px;
color:#2b005b;
font-size:34px;
line-height:1.12;
letter-spacing:-.03em;
}
.contact-enquiry-copy>p,
.contact-enquiry-card>p{
color:#6d6878;
line-height:1.7;
}
.contact-enquiry-points{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:28px;
}
.contact-enquiry-points div{
display:flex;
align-items:center;
gap:12px;
padding:16px;
border:1px solid #e6e1ec;
border-radius:14px;
background:#fff;
}
.contact-enquiry-points b{
display:grid;
place-items:center;
flex:0 0 36px;
width:36px;
height:36px;
border-radius:50%;
background:#fff7df;
color:#c88400;
font-size:11px;
}
.contact-enquiry-points span{
color:#312a3b;
font-size:13px;
font-weight:750;
}
.contact-enquiry-card{
padding:34px;
border:1px solid #e4deeb;
border-top:5px solid #f5a800;
border-radius:22px;
background:#fff;
box-shadow:0 22px 55px rgba(43,0,91,.09);
}
.contact-enquiry-card .btn{
display:inline-flex;
margin-top:14px;
}
.contact-enquiry-card small{
display:block;
margin-top:20px;
color:#8a8493;
font-size:11px;
line-height:1.55;
}
@media(max-width:850px){
.contact-enquiry-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
.contact-enquiry-points{grid-template-columns:1fr}
.contact-enquiry-card{padding:26px}
}
/* =========================================================
UNIBEE V2 - USER APPROVED GOLDEN CTA + FOOTER + LARGER LOGO
========================================================= */
/* Slightly larger approved transparent UNIBEE logo */
.unibee-header .brand{
flex:0 0 275px !important;
}
.unibee-header .brand img{
width:275px !important;
height:78px !important;
object-fit:contain !important;
}
.unibee-footer .unibee-footer-logo{
width:315px !important;
max-width:100% !important;
height:auto !important;
}
/* Apply buttons - solid UNIBEE golden yellow */
.unibee-header .apply,
.apply,
.btn.primary,
.application-submit{
background:#f5a800 !important;
color:#2b005b !important;
border-color:#f5a800 !important;
box-shadow:0 10px 24px rgba(245,168,0,.28) !important;
}
.unibee-header .apply:hover,
.apply:hover,
.btn.primary:hover,
.application-submit:hover{
background:#ffc13d !important;
color:#2b005b !important;
border-color:#ffc13d !important;
}
.application-submit b{
background:#2b005b !important;
color:#fff !important;
}
/* Final footer bar - solid UNIBEE golden yellow */
.footer-bottom-bar{
background:#f5a800 !important;
border-top:0 !important;
}
.footer-privacy-link,
.footer-copyright{
color:#2b005b !important;
}
.footer-privacy-link:hover{
color:#2b005b !important;
}
.footer-social-icon{
border-color:#2b005b !important;
color:#2b005b !important;
}
/* Keep main footer light so the transparent gold BEE wordmark remains visible */
.unibee-footer{
background:#f7f8fc !important;
}
/* Responsive logo sizing */
@media(max-width:1200px){
.unibee-header .brand{flex-basis:240px !important}
.unibee-header .brand img{width:240px !important;height:72px !important}
}
@media(max-width:1000px){
.unibee-header .brand{flex-basis:210px !important}
.unibee-header .brand img{width:210px !important;height:66px !important}
}
@media(max-width:900px){
.unibee-header .brand{flex-basis:190px !important}
.unibee-header .brand img{width:190px !important;height:60px !important}
}
@media(max-width:480px){
.unibee-header .brand{flex-basis:160px !important}
.unibee-header .brand img{width:160px !important;height:54px !important}
}
/* =========================================================
UNIBEE V3 - PREMIUM LIVE VISUAL SYSTEM
Broad visual inspiration: full-width editorial education sites,
oversized typography, layered motion, strong section rhythm.
UNIBEE content, branding, navigation and functions are preserved.
========================================================= */
:root{
--ub-purple:#2b005b;
--ub-purple-deep:#17003d;
--ub-purple-soft:#3b0a75;
--ub-gold:#f5a800;
--ub-gold-bright:#ffb515;
--ub-ink:#181223;
--ub-muted:#706a78;
--ub-paper:#f7f5fa;
--ub-line:rgba(43,0,91,.13);
}
/* Global editorial feel */
html{scroll-behavior:smooth}
body{
background:#fff;
color:var(--ub-ink);
font-family:Inter,Arial,sans-serif;
overflow-x:hidden;
}
.wrap{width:min(1240px,calc(100% - 56px))}
.section,.content{padding-top:96px;padding-bottom:96px}
.section h2,.content h2,.subject h2,
.home-section-head h2,.unibee-why h2,
.home-final-cta-inner h2,.card h3,.ucard h3,.slide h3{
font-family:Inter,Arial,sans-serif !important;
letter-spacing:-.035em;
}
.section h2,.content h2,.home-section-head h2,.subject h2{
font-weight:800;
}
.eyebrow{
color:var(--ub-gold) !important;
font-size:11px;
font-weight:900;
letter-spacing:3.4px;
text-transform:uppercase;
}
/* Premium header - same navigation and dropdown behaviour */
.unibee-header{
background:rgba(255,255,255,.96) !important;
border-bottom:1px solid rgba(43,0,91,.08);
box-shadow:none !important;
backdrop-filter:blur(18px);
}
.unibee-header .nav{height:96px !important}
.unibee-header .brand{flex:0 0 290px !important}
.unibee-header .brand img{
width:290px !important;
height:82px !important;
object-fit:contain !important;
}
.unibee-header .nav nav>a,.unibee-header .dd>a{
position:relative;
font-size:13px !important;
font-weight:800 !important;
color:#241534 !important;
}
.unibee-header .nav nav>a:not(.apply)::after,
.unibee-header .dd>a::after{
content:"";
position:absolute;
left:0;
bottom:-9px;
width:0;
height:2px;
background:var(--ub-gold);
transition:width .28s ease;
}
.unibee-header .nav nav>a:not(.apply):hover::after,
.unibee-header .dd:hover>a::after{width:100%}
/* GOLD BACKGROUNDS ALWAYS USE WHITE TYPE */
.unibee-header .apply,
.apply,.btn.primary,.application-submit{
background:var(--ub-gold) !important;
color:#fff !important;
border-color:var(--ub-gold) !important;
border-radius:0 !important;
box-shadow:none !important;
transition:background .25s ease,transform .25s ease !important;
}
.unibee-header .apply:hover,
.apply:hover,.btn.primary:hover,.application-submit:hover{
background:var(--ub-gold-bright) !important;
color:#fff !important;
border-color:var(--ub-gold-bright) !important;
transform:translateY(-2px);
}
.application-submit b{
background:rgba(255,255,255,.18) !important;
color:#fff !important;
}
/* Dropdown presentation - behaviour unchanged */
.drop,.uni-panel{
border-radius:0 !important;
border:1px solid rgba(43,0,91,.08) !important;
border-top:3px solid var(--ub-gold) !important;
box-shadow:0 28px 60px rgba(31,0,72,.16) !important;
}
.drop a,.uni-panel a{transition:background .18s ease,padding-left .18s ease}
.drop a:hover,.uni-panel a:hover{
background:#fff7e5 !important;
color:var(--ub-purple) !important;
padding-left:14px;
}
/* ---------------------------------------------------------
LIVE HOMEPAGE HERO
--------------------------------------------------------- */
.unibee-hero{
min-height:760px !important;
background:var(--ub-purple-deep) !important;
isolation:isolate;
}
.unibee-live-hero-media{
position:absolute !important;
inset:0 !important;
overflow:hidden;
background:none !important;
}
.unibee-live-hero-layer{
position:absolute;
inset:-2%;
background-size:cover;
background-position:center 42%;
opacity:0;
transform:scale(1.055);
transition:opacity 1.35s ease,transform 7s ease;
will-change:opacity,transform;
}
.unibee-live-hero-layer.active{
opacity:1;
transform:scale(1);
}
.unibee-hero:before{
z-index:1 !important;
background:
linear-gradient(90deg,rgba(23,0,61,.98) 0%,rgba(43,0,91,.91) 34%,rgba(43,0,91,.58) 61%,rgba(23,0,61,.16) 100%) !important;
}
.unibee-hero:after{
width:720px !important;
height:720px !important;
right:-260px !important;
top:-290px !important;
border:1px solid rgba(245,168,0,.55) !important;
box-shadow:
0 0 0 105px rgba(245,168,0,.06),
0 0 0 210px rgba(245,168,0,.035) !important;
animation:ubOrbitPulse 7s ease-in-out infinite;
}
@keyframes ubOrbitPulse{
0%,100%{transform:scale(.96);opacity:.72}
50%{transform:scale(1.05);opacity:1}
}
.unibee-live-orbit{
position:absolute;
z-index:2;
width:170px;
height:170px;
right:8%;
bottom:10%;
border:1px solid rgba(255,255,255,.26);
border-radius:50%;
animation:ubOrbitSpin 18s linear infinite;
}
.unibee-live-orbit:before,
.unibee-live-orbit:after{
content:"";
position:absolute;
border-radius:50%;
}
.unibee-live-orbit:before{
inset:22px;
border:1px solid rgba(245,168,0,.7);
}
.unibee-live-orbit:after{
width:11px;height:11px;
background:var(--ub-gold);
left:50%;top:-6px;
box-shadow:0 0 0 8px rgba(245,168,0,.12);
}
@keyframes ubOrbitSpin{to{transform:rotate(360deg)}}
.unibee-hero-inner{
min-height:760px !important;
z-index:3 !important;
}
.unibee-hero-copy{
max-width:850px !important;
padding:115px 0 130px !important;
}
.unibee-hero .eyebrow{color:#ffd15c !important}
.unibee-hero h1{
max-width:850px;
font-size:clamp(60px,6.1vw,94px) !important;
line-height:.94 !important;
letter-spacing:-.058em !important;
font-weight:850 !important;
margin:20px 0 28px !important;
text-wrap:balance;
animation:ubHeroIn .9s cubic-bezier(.2,.8,.2,1) both;
}
.unibee-hero p{
max-width:720px !important;
font-size:19px !important;
line-height:1.72 !important;
color:rgba(255,255,255,.88) !important;
animation:ubHeroIn .9s .12s cubic-bezier(.2,.8,.2,1) both;
}
.unibee-hero .actions{
margin-top:34px !important;
animation:ubHeroIn .9s .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ubHeroIn{
from{opacity:0;transform:translateY(28px)}
to{opacity:1;transform:translateY(0)}
}
.unibee-hero .btn{
border-radius:0 !important;
padding:17px 24px !important;
min-width:160px;
text-align:center;
}
.unibee-hero .btn:not(.alt){
background:var(--ub-gold) !important;
color:#fff !important;
}
.unibee-hero .btn.alt{
background:rgba(255,255,255,.06) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.7) !important;
}
.unibee-live-hero-dots{
position:absolute;
z-index:4;
left:max(28px,calc((100vw - 1240px)/2));
bottom:46px;
display:flex;
gap:8px;
}
.unibee-live-hero-dots span{
width:30px;height:3px;
background:rgba(255,255,255,.38);
transition:width .3s ease,background .3s ease;
}
.unibee-live-hero-dots span.active{
width:58px;
background:var(--ub-gold);
}
/* Floating benefit band */
.unibee-benefits{
margin-top:-54px !important;
z-index:8 !important;
}
.unibee-benefits .benefitgrid{
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:#fff !important;
box-shadow:0 28px 65px rgba(30,0,70,.14) !important;
}
.unibee-benefits .benefitgrid div{
position:relative;
min-height:132px;
padding:30px 28px !important;
display:flex;
flex-direction:column;
justify-content:center;
border-right:1px solid var(--ub-line) !important;
overflow:hidden;
}
.unibee-benefits .benefitgrid div:before{
content:"";
position:absolute;
left:0;bottom:0;
width:0;height:4px;
background:var(--ub-gold);
transition:width .35s ease;
}
.unibee-benefits .benefitgrid div:hover:before{width:100%}
.unibee-benefits .benefitgrid div:last-child{border-right:0 !important}
.unibee-benefits .benefitgrid strong{
color:var(--ub-purple) !important;
font-size:18px !important;
font-weight:850;
margin-bottom:7px;
}
/* Editorial intro */
.unibee-intro{padding:125px 0 110px !important}
.unibee-intro-grid{gap:100px !important;align-items:start !important}
.unibee-intro h2{
max-width:680px;
font-size:clamp(48px,5vw,72px) !important;
line-height:.98;
margin:12px 0 28px !important;
}
.unibee-intro p{
max-width:690px;
font-size:17px;
line-height:1.82;
color:var(--ub-muted);
}
.unibee-feature-panel{
position:relative;
border-radius:0 !important;
padding:44px 46px !important;
background:var(--ub-purple) !important;
box-shadow:24px 24px 0 rgba(245,168,0,.16) !important;
}
.unibee-feature-panel:before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:5px;
background:var(--ub-gold);
}
.unibee-feature-panel>span{color:#ffd15c !important}
.unibee-feature-panel h3{font-size:24px !important}
.unibee-feature-panel p{line-height:1.65 !important}
/* Course runner - larger, more cinematic */
.soft{
background:#f4f1f7 !important;
padding:112px 0 !important;
overflow:hidden;
}
.home-slider-head{margin-bottom:40px !important}
.home-slider-head h2{
font-size:clamp(44px,4.3vw,66px) !important;
line-height:1;
}
.home-slider-head p{font-size:16px;line-height:1.7;color:var(--ub-muted)}
.runner{overflow:visible !important}
.track{gap:24px !important;animation-duration:48s !important}
.slide{
width:355px !important;
flex:0 0 355px !important;
border-radius:0 !important;
box-shadow:none !important;
border:0 !important;
background:#fff !important;
transition:transform .35s ease,box-shadow .35s ease !important;
}
.slide:hover{
transform:translateY(-8px) !important;
box-shadow:0 25px 50px rgba(43,0,91,.13) !important;
}
.slide img{
height:245px !important;
filter:saturate(.9) contrast(1.02);
transition:transform .7s ease;
}
.slide:hover img{transform:scale(1.035)}
.slide div{padding:23px 22px 25px !important}
.slide h3{font-size:22px !important;line-height:1.18 !important}
.course-explore{color:#c98200 !important}
/* Services */
.unibee-services{padding:120px 0 !important}
.home-section-head{max-width:880px !important;margin-bottom:48px !important}
.home-section-head h2{
font-size:clamp(46px,4.4vw,68px) !important;
line-height:1 !important;
}
.home-services-grid{gap:0 !important;border-top:1px solid var(--ub-line);border-left:1px solid var(--ub-line)}
.home-services-grid>a{
min-height:310px;
border-radius:0 !important;
border:0 !important;
border-right:1px solid var(--ub-line) !important;
border-bottom:1px solid var(--ub-line) !important;
padding:36px 30px !important;
position:relative;
overflow:hidden;
box-shadow:none !important;
}
.home-services-grid>a:after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:0;
background:var(--ub-purple);
transition:height .38s cubic-bezier(.2,.8,.2,1);
z-index:0;
}
.home-services-grid>a>*{position:relative;z-index:1;transition:color .3s ease}
.home-services-grid>a:hover{
transform:none !important;
border-color:var(--ub-line) !important;
}
.home-services-grid>a:hover:after{height:100%}
.home-services-grid>a:hover h3,
.home-services-grid>a:hover p,
.home-services-grid>a:hover b{color:#fff !important}
.home-services-grid>a:hover span{color:#ffd15c !important}
.home-services-grid span{color:#c98200 !important}
.home-services-grid h3{font-size:24px !important;margin-top:54px !important}
.home-services-grid p{line-height:1.75 !important}
.home-services-grid b{position:absolute !important;left:30px;bottom:30px}
/* Strong purple feature section */
.unibee-why{
padding:120px 0 !important;
background:
radial-gradient(circle at 84% 25%,rgba(245,168,0,.17),transparent 24%),
linear-gradient(118deg,#160038 0%,#2b005b 58%,#3a0a74 100%) !important;
}
.unibee-why:before{
content:"";
position:absolute;
left:-170px;top:-190px;
width:520px;height:520px;
border:1px solid rgba(255,255,255,.11);
border-radius:50%;
box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(245,168,0,.025);
}
.unibee-why-grid{gap:105px !important}
.unibee-why h2{
font-size:clamp(48px,4.7vw,72px) !important;
line-height:.98;
}
.home-why-points>div{padding:26px 0 !important}
.home-why-points b{color:#ffd15c !important}
.home-why-btn{border-color:var(--ub-gold) !important}
/* Final CTA is gold, therefore ALL text on it is white */
.unibee-final-cta{
padding:90px 0 !important;
background:var(--ub-gold) !important;
color:#fff !important;
position:relative;
overflow:hidden;
}
.unibee-final-cta:after{
content:"";
position:absolute;
width:360px;height:360px;
border:1px solid rgba(255,255,255,.25);
border-radius:50%;
right:-120px;top:-180px;
box-shadow:0 0 0 70px rgba(255,255,255,.06);
}
.home-final-cta-inner{position:relative;z-index:2}
.home-final-cta-inner span,
.home-final-cta-inner h2,
.home-final-cta-inner p{color:#fff !important}
.home-final-cta-inner h2{
font-size:clamp(40px,4vw,58px) !important;
line-height:1.03;
}
.home-final-actions a{
border-radius:0 !important;
border:1px solid rgba(255,255,255,.72) !important;
background:transparent !important;
color:#fff !important;
}
.home-final-actions a:first-child{
background:#fff !important;
color:var(--ub-purple) !important;
border-color:#fff !important;
}
/* ---------------------------------------------------------
ALL INNER PAGES - same premium visual system, content unchanged
--------------------------------------------------------- */
.unibee-innerhero,.innerhero,.gbs-courses-hero,.gbs-course-hero,
.application-hero,.contact-hero{
min-height:440px !important;
position:relative;
overflow:hidden;
}
.unibee-innerhero:after,.innerhero:after,.gbs-courses-hero:after,
.gbs-course-hero:after,.application-hero:after,.contact-hero:after{
content:"";
position:absolute;
width:420px;height:420px;
border:1px solid rgba(245,168,0,.34);
border-radius:50%;
right:-110px;top:-170px;
box-shadow:0 0 0 70px rgba(245,168,0,.04);
pointer-events:none;
}
.unibee-innerhero h1,.innerhero h1,.gbs-courses-hero h1,
.gbs-course-hero h1,.application-hero h1,.contact-hero h1{
font-family:Inter,Arial,sans-serif !important;
font-weight:850 !important;
letter-spacing:-.05em !important;
line-height:.98 !important;
}
.card,.ucard,.unibee-info-card,.gbs-course-card{
border-radius:0 !important;
}
.card,.ucard,.unibee-info-card{
box-shadow:none !important;
transition:transform .3s ease,box-shadow .3s ease !important;
}
.card:hover,.ucard:hover,.unibee-info-card:hover{
transform:translateY(-5px);
box-shadow:0 20px 45px rgba(43,0,91,.10) !important;
}
.cardbody span,.ucard a{color:#c98200 !important}
/* Footer: main area stays light for logo legibility; final bar gold + WHITE text */
.unibee-footer{
background:#f7f6f9 !important;
color:var(--ub-purple) !important;
margin-top:0 !important;
border-top:1px solid var(--ub-line);
}
.unibee-footer .footgrid p{color:#716a79 !important}
.unibee-footer .footgrid a{color:#443b4e !important}
.unibee-footer .footgrid a:hover{color:#b87400 !important}
.unibee-footer .unibee-footer-logo{width:330px !important}
.footer-bottom-bar{
background:var(--ub-gold) !important;
color:#fff !important;
}
.footer-privacy-link,.footer-copyright,.footer-social-icon{
color:#fff !important;
}
.footer-social-icon{
border-color:rgba(255,255,255,.82) !important;
}
.footer-privacy-link:hover{color:#fff !important}
/* Scroll reveal */
.unibee-motion-section,
.unibee-home .home-services-grid>a,
.unibee-home .unibee-feature-panel,
.unibee-home .home-why-points>div{
opacity:0;
transform:translateY(26px);
transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.unibee-motion-section.ub-visible,
.unibee-home .home-services-grid>a.ub-visible,
.unibee-home .unibee-feature-panel.ub-visible,
.unibee-home .home-why-points>div.ub-visible{
opacity:1;
transform:none;
}
.unibee-home .home-services-grid>a:nth-child(2){transition-delay:.06s}
.unibee-home .home-services-grid>a:nth-child(3){transition-delay:.12s}
.unibee-home .home-services-grid>a:nth-child(4){transition-delay:.18s}
/* Responsive */
@media(max-width:1200px){
.unibee-header .brand{flex-basis:250px !important}
.unibee-header .brand img{width:250px !important;height:76px !important}
.unibee-header nav{gap:12px !important}
.unibee-hero h1{font-size:72px !important}
}
@media(max-width:1000px){
.wrap{width:min(100% - 40px,1240px)}
.unibee-header .brand{flex-basis:220px !important}
.unibee-header .brand img{width:220px !important;height:68px !important}
.unibee-hero,.unibee-hero-inner{min-height:680px !important}
.unibee-intro-grid{gap:55px !important}
.home-services-grid{grid-template-columns:1fr 1fr !important}
}
@media(max-width:900px){
.unibee-header .nav{height:82px !important}
.unibee-header .brand{flex-basis:205px !important}
.unibee-header .brand img{width:205px !important;height:64px !important}
.unibee-hero h1{font-size:clamp(50px,9vw,68px) !important}
.unibee-hero-copy{padding:90px 0 120px !important}
.unibee-live-orbit{display:none}
.unibee-why-grid{gap:50px !important}
}
@media(max-width:700px){
.wrap{width:min(100% - 28px,1240px)}
.section,.content{padding-top:72px;padding-bottom:72px}
.unibee-hero,.unibee-hero-inner{min-height:650px !important}
.unibee-hero-copy{padding:74px 0 110px !important}
.unibee-hero h1{font-size:50px !important}
.unibee-hero p{font-size:16px !important}
.unibee-live-hero-dots{left:14px;bottom:28px}
.unibee-benefits{margin-top:0 !important}
.unibee-benefits .benefitgrid{grid-template-columns:1fr !important}
.unibee-benefits .benefitgrid div{min-height:auto;border-right:0 !important;border-bottom:1px solid var(--ub-line)}
.unibee-intro{padding:78px 0 !important}
.unibee-intro-grid{grid-template-columns:1fr !important;gap:42px !important}
.unibee-intro h2,.home-section-head h2,.unibee-why h2{font-size:43px !important}
.soft,.unibee-services,.unibee-why{padding:78px 0 !important}
.home-services-grid{grid-template-columns:1fr !important}
.home-services-grid>a{min-height:265px}
.slide{width:300px !important;flex-basis:300px !important}
.slide img{height:210px !important}
.home-final-cta-inner{flex-direction:column;align-items:flex-start !important}
.home-final-actions{width:100%}
.unibee-footer .unibee-footer-logo{width:270px !important}
}
@media(prefers-reduced-motion:reduce){
.unibee-live-hero-layer,.unibee-hero:after,.unibee-live-orbit,
.unibee-motion-section,.home-services-grid>a,.unibee-feature-panel,.home-why-points>div{
animation:none !important;
transition:none !important;
}
}
/* =========================================================
UNIBEE V4 - HOMEPAGE BLANK-SCREEN FIX
The page remains visible even if JavaScript is blocked.
========================================================= */
main{
display:block !important;
visibility:visible !important;
}
section.unibee-hero{
display:block !important;
visibility:visible !important;
opacity:1 !important;
min-height:760px !important;
background-color:#17003d !important;
background-image:linear-gradient(112deg,#17003d 0%,#2b005b 54%,#3b0a75 100%) !important;
}
.unibee-hero-inner,
.unibee-hero-copy,
.unibee-hero .eyebrow,
.unibee-hero h1,
.unibee-hero p,
.unibee-hero .actions{
visibility:visible !important;
opacity:1 !important;
}
.unibee-hero h1,
.unibee-hero p,
.unibee-hero .actions{
animation:none !important;
transform:none !important;
}
.unibee-live-hero-media{
background:transparent !important;
}
.unibee-live-hero-layer{
background-color:#2b005b;
}
.unibee-live-hero-layer.active{
opacity:1 !important;
}
/* Progressive enhancement:
without JS everything is visible; with working JS reveal animation runs. */
.unibee-motion-section,
.unibee-home .home-services-grid>a,
.unibee-home .unibee-feature-panel,
.unibee-home .home-why-points>div{
opacity:1 !important;
transform:none !important;
}
html.ub-js-ready .unibee-motion-section:not(.ub-visible),
html.ub-js-ready .unibee-home .home-services-grid>a:not(.ub-visible),
html.ub-js-ready .unibee-home .unibee-feature-panel:not(.ub-visible),
html.ub-js-ready .unibee-home .home-why-points>div:not(.ub-visible){
opacity:0 !important;
transform:translateY(26px) !important;
}
html.ub-js-ready .unibee-motion-section.ub-visible,
html.ub-js-ready .unibee-home .home-services-grid>a.ub-visible,
html.ub-js-ready .unibee-home .unibee-feature-panel.ub-visible,
html.ub-js-ready .unibee-home .home-why-points>div.ub-visible{
opacity:1 !important;
transform:none !important;
}
/* Slightly bigger headline typography */
.unibee-hero h1{
font-size:clamp(66px,6.6vw,104px) !important;
line-height:.93 !important;
}
.unibee-intro h2,
.home-slider-head h2,
.home-section-head h2,
.unibee-why h2{
font-size:clamp(50px,4.8vw,74px) !important;
}
/* Slightly bigger header/navigation typography */
.unibee-header .nav nav>a,
.unibee-header .dd>a{
font-size:15.5px !important;
font-weight:800 !important;
}
.unibee-header .apply{
font-size:16px !important;
padding:16px 23px !important;
}
/* Golden-yellow backgrounds use white text */
.unibee-header .apply,
.apply,
.btn.primary,
.application-submit,
.footer-bottom-bar{
color:#fff !important;
}
.footer-bottom-bar *,
.footer-bottom-bar a{
color:#fff !important;
}
@media(max-width:1200px){
.unibee-header .nav nav>a,
.unibee-header .dd>a{font-size:14.5px !important}
.unibee-hero h1{font-size:78px !important}
}
@media(max-width:900px){
.unibee-hero h1{font-size:clamp(54px,9vw,70px) !important}
}
@media(max-width:700px){
.unibee-hero h1{font-size:52px !important}
.unibee-intro h2,
.home-slider-head h2,
.home-section-head h2,
.unibee-why h2{font-size:45px !important}
}
/* =========================================================
UNIBEE V5 - EDUEX-INFORMED CONTENT ARCHITECTURE
Original UNIBEE design language, content and branding.
========================================================= */
.ub-v5-heading{max-width:900px;margin:0 auto 52px}
.ub-v5-heading.centered{text-align:center}
.ub-v5-heading h2,
.ub-about-copy h2,
.ub-experience-copy h2,
.ub-cert-block h2,
.ub-partner-block h2{
margin:10px 0 18px;
font-size:clamp(48px,4.6vw,72px);
line-height:.98;
letter-spacing:-.05em;
color:var(--ub-purple);
}
.ub-v5-heading p{max-width:720px;margin:0 auto;color:var(--ub-muted);font-size:17px;line-height:1.7}
/* About */
.ub-about-showcase{padding:120px 0;background:#f7f5f1}
.ub-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.ub-about-visual{min-height:610px;position:relative}
.ub-about-img{position:absolute;overflow:hidden}
.ub-about-img img{width:100%;height:100%;object-fit:cover;display:block}
.ub-about-img-main{left:0;top:0;width:68%;height:82%}
.ub-about-img-front{right:0;bottom:0;width:58%;height:62%;border:14px solid #f7f5f1}
.ub-about-mark{position:absolute;left:-24px;top:110px;width:28px;height:84px;border-left:3px solid var(--ub-gold);border-radius:50%}
.ub-about-copy{padding-right:20px}
.ub-about-lead{font-size:18px;line-height:1.75;color:#5d5665;border-left:4px solid var(--ub-gold);padding-left:24px}
.ub-about-values{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:34px 0}
.ub-about-values>div{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--ub-line)}
.ub-about-values b{color:var(--ub-gold);font-size:14px}
.ub-about-values span{display:grid;gap:7px}
.ub-about-values strong{font-size:19px;color:var(--ub-purple)}
.ub-about-values small{font-size:14px;line-height:1.55;color:var(--ub-muted)}
/* Study options */
.ub-study-options{padding:118px 0 110px;background:#fff;overflow:hidden}
.ub-study-scroller,.ub-popular-scroller{overflow-x:auto;scrollbar-width:none;padding:8px max(0px,calc((100vw - 1240px)/2)) 30px}
.ub-study-scroller::-webkit-scrollbar,.ub-popular-scroller::-webkit-scrollbar{display:none}
.ub-study-track{display:flex;gap:24px;width:max-content}
.ub-study-card{width:350px;background:#f6f3ee;color:var(--ub-ink);text-decoration:none;display:block;transition:transform .3s ease,box-shadow .3s ease}
.ub-study-card:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(43,0,91,.12)}
.ub-study-card img{width:100%;height:245px;object-fit:cover;display:block}
.ub-study-card>div{padding:25px 26px 28px}
.ub-study-card h3{font-size:25px;line-height:1.1;margin:0 0 12px;color:var(--ub-purple)}
.ub-study-card p{min-height:78px;color:var(--ub-muted);line-height:1.55;margin:0 0 18px}
.ub-study-card b{color:#b87500}
/* Stats */
.ub-stats{padding:0 0 115px;background:#fff}
.ub-stats-panel{
background:
radial-gradient(circle at 78% 35%,rgba(255,255,255,.10),transparent 24%),
var(--ub-purple);
display:grid;grid-template-columns:repeat(4,1fr);
padding:58px 32px;color:#fff;
}
.ub-stats-panel>div{text-align:center;border-right:1px solid rgba(255,255,255,.24);padding:8px 22px}
.ub-stats-panel>div:last-child{border-right:0}
.ub-stats-panel strong{display:block;font-size:clamp(44px,4vw,66px);line-height:1;font-family:Georgia,serif;font-style:italic;font-weight:500;color:#fff}
.ub-stats-panel strong i{font-style:normal;color:var(--ub-gold)}
.ub-stats-panel small{display:block;margin-top:13px;font-size:15px;font-weight:800;color:#fff}
/* Popular programs */
.ub-popular{padding:118px 0;background:#f7f5f1;overflow:hidden}
.ub-popular-track{display:flex;gap:22px;width:max-content}
.ub-popular-card{width:330px;background:#fff;text-decoration:none;color:var(--ub-ink);display:block;transition:transform .3s ease,box-shadow .3s ease}
.ub-popular-card:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(43,0,91,.12)}
.ub-popular-card img{width:100%;height:220px;object-fit:cover;display:block}
.ub-popular-card>div{padding:24px}
.ub-popular-card span{font-size:11px;font-weight:900;letter-spacing:1.6px;color:#b87500;text-transform:uppercase}
.ub-popular-card h3{font-size:22px;line-height:1.16;margin:12px 0 22px;color:var(--ub-purple)}
.ub-popular-card b{color:#b87500}
/* Student experience */
.ub-experience{display:grid;grid-template-columns:46% 54%;min-height:680px;background:#fff}
.ub-experience-media{position:relative;overflow:hidden;min-height:680px}
.ub-experience-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.86)}
.ub-experience-media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,0,61,.70),rgba(23,0,61,.08) 62%)}
.ub-experience-overlay{position:absolute;z-index:2;left:10%;right:10%;bottom:10%;color:#fff}
.ub-experience-overlay span{font-size:12px;font-weight:900;letter-spacing:2.4px;color:#ffd15c}
.ub-experience-overlay strong{display:block;max-width:520px;margin-top:10px;font-size:34px;line-height:1.05;color:#fff}
.ub-experience-copy{padding:88px 9%;display:flex;flex-direction:column;justify-content:center}
.ub-experience-copy>p{font-size:17px;line-height:1.72;color:var(--ub-muted)}
.ub-experience-points{margin:22px 0}
.ub-experience-points>div{display:flex;gap:20px;padding:19px 0;border-top:1px solid var(--ub-line)}
.ub-experience-points b{color:var(--ub-gold)}
.ub-experience-points span{display:grid;gap:4px}
.ub-experience-points strong{font-size:18px;color:var(--ub-purple)}
.ub-experience-points small{font-size:14px;line-height:1.5;color:var(--ub-muted)}
.ub-verification-note{font-size:12px !important;line-height:1.55 !important;padding:14px 16px;background:#f7f5f1;border-left:3px solid var(--ub-gold)}
/* Insights */
.ub-insights{padding:120px 0;background:#f7f5f1}
.ub-insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ub-insight-card{background:#fff;text-decoration:none;color:var(--ub-ink);padding:16px;transition:transform .3s ease,box-shadow .3s ease}
.ub-insight-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(43,0,91,.11)}
.ub-insight-card img{width:100%;height:330px;object-fit:cover;display:block}
.ub-insight-card>div{padding:26px 12px 18px}
.ub-insight-card span{color:#b87500;font-size:11px;font-weight:900;letter-spacing:1.8px}
.ub-insight-card h3{font-size:30px;line-height:1.08;margin:12px 0;color:var(--ub-purple)}
.ub-insight-card p{color:var(--ub-muted);line-height:1.6}
.ub-insight-card b{color:#b87500}
/* Certification / partner-ready network */
.ub-trust-network{padding:120px 0;background:#fff}
.ub-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ub-cert-block,.ub-partner-block{padding:48px;background:#f7f5f1;min-height:430px;overflow:hidden}
.ub-cert-block p,.ub-partner-block p{color:var(--ub-muted);line-height:1.7}
.ub-pending-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ub-pending-badges span,.ub-partner-track span{
display:inline-flex;align-items:center;justify-content:center;
min-height:74px;padding:14px 22px;background:#fff;border:1px solid var(--ub-line);
color:var(--ub-purple);font-weight:850;text-align:center;
}
.ub-partner-runner{overflow:hidden;margin-top:34px}
.ub-partner-track{display:flex;gap:14px;width:max-content;animation:ubPartnerRun 30s linear infinite}
.ub-partner-track span{min-width:170px}
@keyframes ubPartnerRun{to{transform:translateX(calc(-50% - 7px))}}
/* Motion */
.ub-v5-section{opacity:1;transform:none}
html.ub-js-ready .ub-v5-section:not(.ub-visible){opacity:0;transform:translateY(26px)}
html.ub-js-ready .ub-v5-section.ub-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
/* Responsive */
@media(max-width:1000px){
.ub-about-grid{grid-template-columns:1fr;gap:55px}
.ub-about-visual{min-height:560px}
.ub-stats-panel{grid-template-columns:1fr 1fr;gap:0}
.ub-stats-panel>div:nth-child(2){border-right:0}
.ub-stats-panel>div{border-bottom:1px solid rgba(255,255,255,.22);padding:30px 20px}
.ub-stats-panel>div:nth-child(3),.ub-stats-panel>div:nth-child(4){border-bottom:0}
.ub-experience{grid-template-columns:1fr}
.ub-experience-media{min-height:520px}
.ub-trust-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
.ub-about-showcase,.ub-study-options,.ub-popular,.ub-insights,.ub-trust-network{padding:78px 0}
.ub-about-visual{min-height:440px}
.ub-about-values{grid-template-columns:1fr}
.ub-study-card{width:295px}
.ub-study-card img{height:205px}
.ub-popular-card{width:285px}
.ub-popular-card img{height:190px}
.ub-stats{padding-bottom:78px}
.ub-stats-panel{grid-template-columns:1fr;padding:18px}
.ub-stats-panel>div{border-right:0 !important;border-bottom:1px solid rgba(255,255,255,.22) !important}
.ub-stats-panel>div:last-child{border-bottom:0 !important}
.ub-experience-media{min-height:430px}
.ub-experience-copy{padding:70px 24px}
.ub-insight-grid{grid-template-columns:1fr}
.ub-insight-card img{height:240px}
.ub-cert-block,.ub-partner-block{padding:32px 24px;min-height:auto}
.ub-v5-heading h2,.ub-about-copy h2,.ub-experience-copy h2,.ub-cert-block h2,.ub-partner-block h2{font-size:43px}
}
@media(prefers-reduced-motion:reduce){
.ub-partner-track{animation:none !important}
}
/* =========================================================
UNIBEE V6 - CTC-STYLE PARTNERS + CERTIFICATION/ACCREDITATION
Structure follows the approved CTC presentation, adapted to
UNIBEE purple and golden-yellow branding.
========================================================= */
.ub-v6-network{
background:#f7f5f2;
padding:76px 0 64px;
overflow:hidden;
}
.ub-v6-network-head{
text-align:center;
}
.ub-v6-network-head h2{
color:#2b005b;
font-size:clamp(48px,4.6vw,70px);
line-height:1;
letter-spacing:-.045em;
margin:12px 0 18px;
}
.ub-v6-network-head>p{
max-width:850px;
margin:0 auto 40px;
color:#625a6a;
font-size:18px;
line-height:1.65;
}
.ub-v6-network-viewport{
width:100%;
overflow:hidden;
padding:4px 0 20px;
}
.ub-v6-network-track{
display:flex;
gap:24px;
width:max-content;
animation:ubV6NetworkRun 42s linear infinite;
}
.ub-v6-network-viewport:hover .ub-v6-network-track{
animation-play-state:paused;
}
.ub-v6-network-card{
width:360px;
height:220px;
flex:0 0 360px;
background:#fff;
border:1px solid #e8e3ef;
border-radius:18px;
box-shadow:0 8px 26px rgba(43,0,91,.05);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:28px;
}
.ub-v6-network-card strong,
.ub-v6-recognition-card strong{
color:#2b005b;
font-size:29px;
line-height:1.15;
font-weight:850;
}
.ub-v6-network-card span,
.ub-v6-recognition-card span{
margin-top:18px;
color:#b87500;
font-weight:900;
text-transform:uppercase;
letter-spacing:1px;
font-size:13px;
}
.ub-v6-recognition{
background:#fff;
padding:82px 0 90px;
}
.ub-v6-recognition-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:34px;
}
.ub-v6-recognition-card{
min-height:180px;
border:1px solid #e8e3ef;
border-radius:18px;
background:#fff;
box-shadow:0 8px 26px rgba(43,0,91,.05);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:25px;
}
@keyframes ubV6NetworkRun{
to{transform:translateX(calc(-384px * 6))}
}
@media(max-width:700px){
.ub-v6-network,
.ub-v6-recognition{
padding:58px 0;
}
.ub-v6-network-head h2{
font-size:43px;
}
.ub-v6-network-head>p{
padding:0 18px;
font-size:16px;
}
.ub-v6-network-card{
width:280px;
flex-basis:280px;
height:180px;
}
.ub-v6-network-card strong,
.ub-v6-recognition-card strong{
font-size:24px;
}
.ub-v6-recognition-grid{
grid-template-columns:1fr;
}
.ub-v6-recognition-card{
min-height:150px;
}
@keyframes ubV6NetworkRun{
to{transform:translateX(calc(-304px * 6))}
}
}
@media(prefers-reduced-motion:reduce){
.ub-v6-network-track{animation:none}
}
/* =========================================================
UNIBEE V11 - STREAMLINED APPLICATION FORM
Flow informed by the current EDUEX application experience,
restyled and rewritten for UNIBEE.
========================================================= */
.eduex-flow-form{padding-top:28px}
.quick-form-intro{
margin:0 0 26px;padding:20px 22px;border:1px solid #ece8f4;border-radius:16px;
background:linear-gradient(135deg,#fbfaff,#fff9e9)
}
.quick-form-badge{
display:inline-flex;margin-bottom:9px;padding:6px 9px;border-radius:999px;background:#200060;
color:#fff;font-size:10px;font-weight:900;letter-spacing:.09em
}
.quick-form-intro strong{display:block;color:#200060;font-size:18px;line-height:1.25}
.quick-form-intro p{margin:7px 0 0;color:#6f697a;font-size:13px;line-height:1.55}
.eduex-form-stack{display:grid;gap:18px}
.eduex-form-field{display:flex;flex-direction:column;gap:8px;color:#2a2439;font-size:13px;font-weight:800}
.eduex-form-field input,.eduex-form-field select{
width:100%;min-height:58px;padding:14px 16px;border:1px solid #dcd9e7;border-radius:12px;outline:0;
background:#fff;color:#211d2d;font:inherit;font-weight:550;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}
.eduex-form-field input::placeholder{color:#aaa5b4}
.eduex-form-field input:focus,.eduex-form-field select:focus{
border-color:#f5a800;box-shadow:0 0 0 4px rgba(245,168,0,.11);background:#fff
}
.eduex-form-field small{margin-top:-2px;color:#8a8493;font-size:11px;font-weight:500;line-height:1.45}
.eduex-contact-divider{display:flex;align-items:center;gap:14px;margin:7px 0 0;color:#200060;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.eduex-contact-divider:before,.eduex-contact-divider:after{content:"";height:1px;flex:1;background:#e9e6f0}
.eduex-consent{margin-top:25px}
@media(max-width:620px){
.eduex-flow-form{padding-top:22px}.quick-form-intro{padding:18px}.eduex-form-stack{gap:16px}
.eduex-form-field input,.eduex-form-field select{min-height:56px}
}
\n\n/* V12 - KCL-matched University Application page */
.kcl-application-page{background:#fff;color:#221b32}
.kcl-application-intro{padding:72px 0 64px;background:linear-gradient(135deg,#200060 0%,#32117a 100%);position:relative;overflow:hidden}
.kcl-application-intro:after{content:"";position:absolute;right:-120px;top:-170px;width:430px;height:430px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.kcl-application-intro-inner{position:relative;z-index:1;max-width:920px}
.kcl-application-kicker,.kcl-section-label{display:block;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.kcl-application-kicker{margin-bottom:14px;color:#f5a800}
.kcl-application-intro h1{margin:0;color:#fff;font-size:clamp(40px,5vw,66px);line-height:1.04;letter-spacing:-.04em}
.kcl-application-intro p{max-width:820px;margin:20px 0 0;color:rgba(255,255,255,.82);font-size:17px;line-height:1.72}
.kcl-application-form-section{padding:68px 0 74px;background:#f7f7fb}
.kcl-application-form-wrap{max-width:980px}
.kcl-section-label{margin-bottom:13px;color:#6e5f8c}
.kcl-form-panel{overflow:hidden;border:1px solid #e5e1ec;border-radius:4px;background:#fff;box-shadow:0 14px 40px rgba(32,0,96,.08)}
.kcl-form-panel-head{padding:30px 34px 24px;border-bottom:1px solid #ece9f1}
.kcl-form-panel-head h2{margin:0 0 8px;color:#200060;font-size:30px;line-height:1.18;letter-spacing:-.025em}
.kcl-form-panel-head p{margin:0;color:#716a7d;font-size:13px}
.kcl-university-form{padding:30px 34px 34px}
.kcl-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.kcl-form-grid label{display:flex;flex-direction:column;gap:8px;color:#2c2638;font-size:13px;font-weight:800}
.kcl-form-grid label.kcl-form-full{grid-column:1/-1}
.kcl-form-grid input,.kcl-form-grid select{width:100%;min-height:54px;padding:0 15px;border:1px solid #d8d3df;border-radius:2px;background:#fff;color:#2b2635;font:inherit;font-weight:500;outline:none;transition:border-color .18s,box-shadow .18s}
.kcl-form-grid input::placeholder{color:#a39daa}
.kcl-form-grid input:focus,.kcl-form-grid select:focus{border-color:#5c3b9c;box-shadow:0 0 0 3px rgba(92,59,156,.10)}
.kcl-form-consent{display:flex;align-items:flex-start;gap:11px;margin:26px 0 20px;color:#625c6c;font-size:12px;line-height:1.58}
.kcl-form-consent input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:#200060}
.kcl-form-consent a{color:#200060;font-weight:800;text-decoration:underline}
.kcl-form-submit{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 24px;border:0;border-radius:2px;background:#200060;color:#fff;font-weight:900;font-size:14px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.kcl-form-submit:hover{transform:translateY(-1px);background:#2d0879;box-shadow:0 12px 26px rgba(32,0,96,.2)}
.kcl-form-submit span{color:#f5a800;font-size:20px;line-height:1}
.kcl-form-disclaimer{margin:18px 0 0;padding-top:18px;border-top:1px solid #ece9f1;color:#7b7583;font-size:11.5px;line-height:1.62}
.kcl-application-support{padding:72px 0 82px;background:#fff}
.kcl-application-support h2{margin:0;color:#200060;font-size:36px;line-height:1.12;letter-spacing:-.03em}
.kcl-support-lead{max-width:760px;margin:13px 0 32px;color:#6c6674;line-height:1.65}
.kcl-support-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #e5e1ec;border-bottom:1px solid #e5e1ec}
.kcl-support-grid article{min-height:190px;padding:28px 24px;border-right:1px solid #e5e1ec}
.kcl-support-grid article:last-child{border-right:0}
.kcl-support-grid article>span{display:block;margin-bottom:24px;color:#f5a800;font-size:12px;font-weight:900;letter-spacing:.12em}
.kcl-support-grid h3{margin:0 0 9px;color:#21183a;font-size:17px}
.kcl-support-grid p{margin:0;color:#777080;font-size:13px;line-height:1.55}
.kcl-application-help{margin-top:26px;color:#5f5968;font-size:13px}
.kcl-application-help strong{color:#200060}
.kcl-application-help a{color:#200060;font-weight:800;text-decoration:underline}
@media(max-width:820px){
.kcl-application-intro{padding:54px 0 48px}.kcl-application-intro h1{font-size:42px}
.kcl-application-form-section{padding:44px 0 54px}.kcl-form-grid{grid-template-columns:1fr}.kcl-form-grid label.kcl-form-full{grid-column:auto}
.kcl-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kcl-support-grid article:nth-child(2){border-right:0}.kcl-support-grid article:nth-child(-n+2){border-bottom:1px solid #e5e1ec}
}
@media(max-width:560px){
.kcl-application-intro h1{font-size:36px}.kcl-application-intro p{font-size:15px}
.kcl-form-panel-head,.kcl-university-form{padding-left:20px;padding-right:20px}.kcl-form-panel-head h2{font-size:26px}
.kcl-support-grid{grid-template-columns:1fr}.kcl-support-grid article{min-height:auto;border-right:0!important;border-bottom:1px solid #e5e1ec!important}.kcl-support-grid article:last-child{border-bottom:0!important}
.kcl-application-support h2{font-size:31px}.kcl-form-submit{width:100%}
}
/* =========================================================
UNIBEE V13 - SITE-WIDE TEXT VISIBILITY / CONTRAST HARDENING
Ensures copy remains readable on image, purple and gold areas.
========================================================= */
/* Course listing hero fix: these two pages do not carry the base
.innerhero class, so explicitly give their image hero light copy. */
.unibee-innerhero.gbs-courses-hero,
.unibee-innerhero.gbs-courses-hero .wrap,
.unibee-innerhero.gbs-courses-hero h1,
.unibee-innerhero.gbs-courses-hero p{
color:#fff !important;
}
.unibee-innerhero.gbs-courses-hero .eyebrow{
color:#ffd15c !important;
}
/* Defensive hero rules across the rest of the site. */
.innerhero,
.gbs-course-hero,
.contact-hero,
.kcl-application-intro,
.unibee-hero,
.unibee-why{
color:#fff;
}
.innerhero h1,.innerhero p,
.gbs-course-hero h1,.gbs-course-hero p,
.contact-hero h1,.contact-hero p,
.kcl-application-intro h1,.kcl-application-intro p,
.unibee-hero h1,.unibee-hero p,
.unibee-why h2,.unibee-why p{
color:#fff !important;
}
.innerhero .eyebrow,
.gbs-course-hero .eyebrow,
.contact-hero .eyebrow,
.kcl-application-intro .eyebrow,
.unibee-hero .eyebrow,
.unibee-why .eyebrow{
color:#ffd15c !important;
}
/* Golden-yellow buttons: deep purple type is substantially clearer
than white on the brand gold. Transparent alternate buttons stay light. */
.unibee-header .apply,
a.apply,
button.apply,
.btn:not(.alt),
.btn.primary,
.application-submit{
color:#200060 !important;
}
.btn.alt,
.gbs-course-hero .btn.alt,
.unibee-hero .btn.alt{
color:#fff !important;
}
/* Small gold labels on light surfaces use a deeper accessible gold.
Hero labels above are intentionally overridden to the brighter gold. */
body .eyebrow{color:#8a5b00 !important}
.innerhero .eyebrow,
.unibee-innerhero .eyebrow,
.gbs-course-hero .eyebrow,
.contact-hero .eyebrow,
.kcl-application-intro .eyebrow,
.unibee-hero .eyebrow,
.unibee-why .eyebrow{
color:#ffd15c !important;
}
/* Gold final CTA: use the paired deep purple for strong readability. */
.unibee-final-cta,
.home-final-cta-inner,
.home-final-cta-inner span,
.home-final-cta-inner h2,
.home-final-cta-inner p{
color:#200060 !important;
}
.home-final-actions a{
color:#200060 !important;
border-color:#200060 !important;
}
.home-final-actions a:first-child{
background:#200060 !important;
color:#fff !important;
border-color:#200060 !important;
}
/* Gold footer bar: keep the approved gold band, but make all copy/icons
deep purple so copyright, privacy and social marks remain clear. */
.footer-bottom-bar,
.footer-bottom-bar *,
.footer-bottom-bar a,
.footer-privacy-link,
.footer-copyright,
.footer-social-icon{
color:#200060 !important;
}
.footer-social-icon{border-color:#200060 !important}
/* =========================================================
UNIBEE V16 - SITE-WIDE VISIBILITY & CONTRAST REPAIR
Final compatibility layer for the current purple/gold design.
========================================================= */
/* Standard buttons in the current design are purple. Keep their labels
white; the previous blanket V13 rule accidentally made them purple-on-purple. */
a.btn:not(.alt):not(.primary),
button.btn:not(.alt):not(.primary),
.gbs-side-card .btn,
.content .btn:not(.alt):not(.primary){
color:#fff !important;
}
/* Gold action controls use deep purple text for stronger contrast. */
.unibee-header .apply,
a.apply,
button.apply,
.btn.primary,
.application-submit,
.unibee-hero .btn:not(.alt){
color:#200060 !important;
}
/* Transparent/dark-hero secondary buttons remain light. */
.btn.alt,
.gbs-course-hero .btn.alt,
.unibee-hero .btn.alt{
color:#fff !important;
}
/* Homepage final CTA currently contains a purple inner panel. Restore
white copy and clearly separated actions on that purple surface. */
.unibee-final-cta .home-final-cta-inner,
.unibee-final-cta .home-final-cta-inner span,
.unibee-final-cta .home-final-cta-inner h2,
.unibee-final-cta .home-final-cta-inner p{
color:#fff !important;
}
.unibee-final-cta .home-final-actions a{
background:transparent !important;
color:#fff !important;
border-color:rgba(255,255,255,.82) !important;
}
.unibee-final-cta .home-final-actions a:first-child{
background:#f5a800 !important;
color:#200060 !important;
border-color:#f5a800 !important;
}
/* Small gold labels on light surfaces need a deeper gold to remain readable.
Bright gold is still retained on dark/purple/image areas. */
.gbs-facts-grid span,
.cardbody span,
.ucard a,
.home-services-grid span,
.ub-experience-points b,
.kcl-support-grid article>span{
color:#8a5b00 !important;
}
.gbs-course-hero .eyebrow,
.innerhero .eyebrow,
.unibee-innerhero .eyebrow,
.unibee-hero .eyebrow,
.contact-hero .eyebrow,
.kcl-application-intro .eyebrow,
.unibee-why .eyebrow,
.ub-experience-overlay span{
color:#ffd15c !important;
}
/* Preserve readable light copy on all dark feature panels. */
.unibee-feature-panel,
.unibee-feature-panel h3,
.unibee-feature-panel p,
.gbs-fee-box,
.gbs-fee-box strong,
.gbs-fee-box small{
color:#fff !important;
}
/* Course catalogue labels sit on white cards, so use the deeper gold there. */
.gbs-course-card>span,
.course-card-content>span{
color:#8a5b00 !important;
}
/* The homepage primary hero action is gold; use deep purple text. */
.unibee-hero a.btn:not(.alt):not(.primary){
color:#200060 !important;
}
/* Dark fallback ensures image-overlay copy remains readable even if the
remote student image is delayed or unavailable. */
.ub-experience-media{
background:#200060 !important;
}
/* =========================================================
UNIBEE V17 - EXPANDED PURPOSE, MISSION & VISION PAGE
========================================================= */
.purpose-page .purpose-hero{min-height:430px}
.purpose-page .purpose-hero h1{max-width:940px}
.purpose-page .purpose-hero p{max-width:820px}
.purpose-page .purpose-lead{font-size:20px !important;line-height:1.7 !important;color:#241c38 !important;font-weight:600}
.purpose-page .purpose-sectionhead{max-width:900px;align-items:flex-start}
.purpose-page .purpose-sectionhead p{font-size:17px;line-height:1.75;color:#625d6d;max-width:850px;margin:10px 0 0}
.purpose-page .purpose-statement-grid{align-items:stretch}
.purpose-page .purpose-statement-grid .unibee-info-card{display:flex;flex-direction:column}
.purpose-page .purpose-statement-grid .unibee-info-card h3{font-size:25px;line-height:1.25;margin:12px 0 14px}
.purpose-page .purpose-statement-grid .unibee-info-card p{font-size:15px;margin:0 0 14px}
.purpose-page .purpose-values{background:#fff}
.purpose-page .purpose-values-grid{grid-template-columns:repeat(3,1fr)}
.purpose-page .purpose-values-grid .unibee-info-card{box-shadow:none;border-top:4px solid #f5a800}
.purpose-page .purpose-values-grid .unibee-info-card h3{margin:12px 0 10px}
.purpose-page .purpose-values-grid .unibee-info-card p{margin-bottom:0}
.purpose-page .purpose-steps>div{background:#fff;box-shadow:0 12px 30px rgba(32,0,96,.05)}
.purpose-page .purpose-responsibility .split{align-items:stretch}
.purpose-page .purpose-expect-card{background:linear-gradient(145deg,#200060,#36128d);color:#fff;border-radius:24px;padding:38px;box-shadow:0 24px 55px rgba(32,0,96,.18)}
.purpose-page .purpose-expect-card .eyebrow{color:#ffd15c !important}
.purpose-page .purpose-expect-card h3{font-size:28px;line-height:1.25;margin:12px 0 22px}
.purpose-page .purpose-expect-card ul{margin:0;padding:0;list-style:none}
.purpose-page .purpose-expect-card li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid rgba(255,255,255,.14);line-height:1.6;color:rgba(255,255,255,.88)}
.purpose-page .purpose-expect-card li:last-child{border-bottom:0}
.purpose-page .purpose-expect-card li:before{content:'✓';position:absolute;left:0;top:14px;color:#ffd15c;font-weight:900}
.purpose-page .purpose-closing{padding:76px 0;background:linear-gradient(120deg,#170047 0%,#200060 60%,#143b7a 100%);color:#fff}
.purpose-page .purpose-closing-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}
.purpose-page .purpose-closing-inner>div:first-child{max-width:760px}
.purpose-page .purpose-closing span{font-size:12px;letter-spacing:2px;font-weight:900;color:#ffd15c}
.purpose-page .purpose-closing h2{font-size:42px;letter-spacing:-.03em;margin:10px 0 14px;color:#fff}
.purpose-page .purpose-closing p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);margin:0}
.purpose-page .purpose-closing-actions{display:flex;flex-direction:column;gap:12px;min-width:220px}
.purpose-page .purpose-closing-actions .btn{display:block;text-align:center}
.purpose-page .purpose-closing-actions .btn.primary{background:#f5a800;color:#200060 !important;border:1px solid #f5a800}
.purpose-page .purpose-closing-actions .btn.alt{background:transparent;color:#fff !important;border:1px solid rgba(255,255,255,.75)}
@media(max-width:900px){
.purpose-page .purpose-values-grid{grid-template-columns:1fr 1fr}
.purpose-page .purpose-closing-inner{align-items:flex-start;flex-direction:column;gap:30px}
}
@media(max-width:620px){
.purpose-page .purpose-values-grid{grid-template-columns:1fr}
.purpose-page .purpose-expect-card{padding:28px}
.purpose-page .purpose-closing h2{font-size:34px}
.purpose-page .purpose-closing-actions{width:100%}
}
/* =========================================================
UNIBEE V19 - EXPANDED OPPORTUNITIES PAGES
Partnerships & Collaboration / Careers & Vacancies
========================================================= */
.opportunity-detail-page .opportunity-detail-hero{min-height:430px}
.opportunity-detail-page .opportunity-detail-hero h1{max-width:940px}
.opportunity-detail-page .opportunity-detail-hero p{max-width:850px}
.opportunity-detail-page .opportunity-lead{font-size:20px !important;line-height:1.7 !important;color:#241c38 !important;font-weight:600}
.opportunity-detail-page .opportunity-sectionhead{max-width:930px;align-items:flex-start}
.opportunity-detail-page .opportunity-sectionhead p{font-size:17px;line-height:1.75;color:#625d6d;max-width:880px;margin:10px 0 0}
.opportunity-detail-page .opportunity-intro-grid{align-items:stretch}
.opportunity-detail-page .opportunity-feature-panel{height:100%}
.opportunity-detail-page .opportunity-card-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.opportunity-detail-page .opportunity-card-grid .unibee-info-card{display:flex;flex-direction:column;box-shadow:none;border-top:4px solid #f5a800}
.opportunity-detail-page .opportunity-card-grid .unibee-info-card h3{font-size:23px;line-height:1.28;margin:12px 0 12px}
.opportunity-detail-page .opportunity-card-grid .unibee-info-card p{margin-bottom:0}
.opportunity-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.opportunity-service-grid article{background:#fff;border:1px solid #e7e2ef;border-radius:18px;padding:28px;box-shadow:0 12px 30px rgba(32,0,96,.05)}
.opportunity-service-grid article b{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:#f5a800;color:#200060;font-size:13px}
.opportunity-service-grid article h3{font-size:22px;line-height:1.3;color:#200060;margin:18px 0 10px}
.opportunity-service-grid article p{color:#625d6d;line-height:1.7;margin:0}
.opportunity-principles-grid{align-items:stretch}
.opportunity-checklist{margin-top:26px;border-top:1px solid #e5e0ec}
.opportunity-checklist>div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid #e5e0ec}
.opportunity-checklist strong{color:#200060;font-size:16px}
.opportunity-checklist span{color:#625d6d;line-height:1.6}
.opportunity-dark-card{background:linear-gradient(145deg,#200060,#36128d);color:#fff;border-radius:24px;padding:38px;box-shadow:0 24px 55px rgba(32,0,96,.18)}
.opportunity-dark-card .eyebrow{color:#ffd15c !important}
.opportunity-dark-card h3{font-size:29px;line-height:1.25;margin:12px 0 20px;color:#fff}
.opportunity-dark-card p{color:rgba(255,255,255,.86);line-height:1.75}
.opportunity-detail-page .opportunity-steps{grid-template-columns:repeat(5,1fr)}
.opportunity-detail-page .opportunity-steps>div{background:#fff;box-shadow:0 12px 30px rgba(32,0,96,.05)}
.opportunity-closing{padding:76px 0;background:linear-gradient(120deg,#170047 0%,#200060 60%,#143b7a 100%);color:#fff}
.opportunity-closing-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}
.opportunity-closing-inner>div:first-child{max-width:790px}
.opportunity-closing span{font-size:12px;letter-spacing:2px;font-weight:900;color:#ffd15c}
.opportunity-closing h2{font-size:42px;letter-spacing:-.03em;margin:10px 0 14px;color:#fff}
.opportunity-closing p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);margin:0}
.opportunity-closing-actions{min-width:235px}
.opportunity-closing-actions .btn{display:block;text-align:center}
.opportunity-closing-actions .btn.primary{background:#f5a800;color:#200060 !important;border:1px solid #f5a800}
.careers-vacancy-grid{align-items:stretch}
.careers-interest-card{background:#fff;border:1px solid #e5e0ec;border-top:5px solid #f5a800;border-radius:22px;padding:34px;box-shadow:0 16px 38px rgba(32,0,96,.07)}
.careers-interest-card h3{font-size:27px;line-height:1.3;color:#200060;margin:12px 0 16px}
.careers-interest-card p{color:#625d6d;line-height:1.7}
.careers-interest-card .btn{margin-top:8px}
@media(max-width:1000px){
.opportunity-detail-page .opportunity-card-grid,.opportunity-service-grid{grid-template-columns:1fr 1fr}
.opportunity-detail-page .opportunity-steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
.opportunity-detail-page .opportunity-card-grid,.opportunity-service-grid,.opportunity-detail-page .opportunity-steps{grid-template-columns:1fr}
.opportunity-checklist>div{grid-template-columns:1fr;gap:6px}
.opportunity-closing-inner{align-items:flex-start;flex-direction:column;gap:30px}
.opportunity-closing h2{font-size:34px}
.opportunity-closing-actions{width:100%;min-width:0}
.opportunity-dark-card,.careers-interest-card{padding:28px}
}
/* =========================================================
UNIBEE V20 - OFFICIAL CONTACT INFORMATION
Confirmed company, registered office, general email and phone.
========================================================= */
.unibee-official-details strong{color:#200060}
.unibee-official-details a{overflow-wrap:anywhere}
.contact-detail-card h2{overflow-wrap:anywhere}
.contact-detail-card[href^="mailto:"],
.contact-detail-card[href^="tel:"]{cursor:pointer}
.contact-detail-card[href^="mailto:"]:focus-visible,
.contact-detail-card[href^="tel:"]:focus-visible{outline:3px solid #f5a800;outline-offset:4px}
.contact-cta-box .btn.primary{flex:0 0 auto}
@media(max-width:620px){
.unibee-official-details{width:min(100% - 24px,1180px)}
.contact-detail-card h2{font-size:21px}
.contact-cta-box .btn.primary{width:100%;text-align:center}
}
/* =========================================================
UNIBEE V21 - MEDIUM SECTION LABELS
Consistent readable size for uppercase section-introduction lines.
========================================================= */
.eyebrow,
.unibee-feature-panel>span,
.home-final-cta-inner>span,
.contact-detail-kicker,
.kcl-application-kicker,
.kcl-section-label,
.purpose-closing>span,
.opportunity-closing>span,
.ub-experience-overlay>span{
font-size:16px !important;
line-height:1.35 !important;
}
@media(max-width:620px){
.eyebrow,
.unibee-feature-panel>span,
.home-final-cta-inner>span,
.contact-detail-kicker,
.kcl-application-kicker,
.kcl-section-label,
.purpose-closing>span,
.opportunity-closing>span,
.ub-experience-overlay>span{
font-size:15px !important;
}
}
/* =========================================================
UNIBEE V22 - EXPANDED STUDENT SERVICES
Course Offering / Admission Guidance / SFE / Post Enrolment
========================================================= */
.student-service-detail-page .service-detail-hero{min-height:430px}
.student-service-detail-page .service-detail-hero h1{max-width:980px}
.student-service-detail-page .service-detail-hero p{max-width:860px}
.student-service-detail-page .service-lead{font-size:20px !important;line-height:1.7 !important;color:#241c38 !important;font-weight:600}
.student-service-detail-page .service-sectionhead{max-width:980px;align-items:flex-start}
.student-service-detail-page .service-sectionhead p{font-size:17px;line-height:1.75;color:#625d6d;max-width:900px;margin:10px 0 0}
.student-service-detail-page .service-intro-grid{align-items:stretch}
.student-service-detail-page .service-feature-panel{height:100%}
.student-service-detail-page .service-card-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.student-service-detail-page .service-card-grid .unibee-info-card{display:flex;flex-direction:column;box-shadow:none;border-top:4px solid #f5a800}
.student-service-detail-page .service-card-grid .unibee-info-card h3{font-size:23px;line-height:1.28;margin:12px 0 12px}
.student-service-detail-page .service-card-grid .unibee-info-card p{margin-bottom:0}
.service-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.service-topic-grid article{background:#fff;border:1px solid #e7e2ef;border-radius:18px;padding:28px;box-shadow:0 12px 30px rgba(32,0,96,.05)}
.service-topic-grid article b{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:#f5a800;color:#200060;font-size:13px}
.service-topic-grid article h3{font-size:22px;line-height:1.3;color:#200060;margin:18px 0 10px}
.service-topic-grid article p{color:#625d6d;line-height:1.7;margin:0}
.student-service-detail-page .service-principles-grid{align-items:stretch}
.service-checklist{margin-top:26px;border-top:1px solid #e5e0ec}
.service-checklist>div{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid #e5e0ec}
.service-checklist strong{color:#200060;font-size:16px}
.service-checklist span{color:#625d6d;line-height:1.6}
.service-dark-card{background:linear-gradient(145deg,#200060,#36128d);color:#fff;border-radius:24px;padding:38px;box-shadow:0 24px 55px rgba(32,0,96,.18)}
.service-dark-card .eyebrow{color:#ffd15c !important}
.service-dark-card h3{font-size:29px;line-height:1.25;margin:12px 0 20px;color:#fff}
.service-dark-card p{color:rgba(255,255,255,.86) !important;line-height:1.75}
.service-dark-card .btn.primary{display:inline-block;margin-top:8px;background:#f5a800 !important;color:#200060 !important;border:1px solid #f5a800}
.service-reference-card{background:#fff;border:1px solid #e5e0ec;border-top:5px solid #f5a800;border-radius:22px;padding:34px;box-shadow:0 16px 38px rgba(32,0,96,.07)}
.service-reference-card h3{font-size:27px;line-height:1.3;color:#200060;margin:12px 0 16px}
.service-reference-card p{color:#625d6d;line-height:1.7}
.service-reference-card a{display:block;padding:14px 0;border-top:1px solid #e5e0ec;color:#200060;text-decoration:none;font-weight:800;line-height:1.5}
.service-reference-card a:hover{text-decoration:underline}
.student-service-detail-page .service-steps{grid-template-columns:repeat(5,1fr)}
.student-service-detail-page .service-steps.six-steps{grid-template-columns:repeat(3,1fr)}
.student-service-detail-page .service-steps>div{background:#fff;box-shadow:0 12px 30px rgba(32,0,96,.05)}
.service-closing{padding:76px 0;background:linear-gradient(120deg,#170047 0%,#200060 60%,#143b7a 100%);color:#fff}
.service-closing-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}
.service-closing-inner>div:first-child{max-width:790px}
.service-closing span{font-size:16px !important;line-height:1.35;letter-spacing:2px;font-weight:900;color:#ffd15c}
.service-closing h2{font-size:42px;letter-spacing:-.03em;margin:10px 0 14px;color:#fff}
.service-closing p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);margin:0}
.service-closing-actions{display:flex;flex-direction:column;gap:12px;min-width:250px}
.service-closing-actions .btn{display:block;text-align:center}
.service-closing-actions .btn.primary{background:#f5a800;color:#200060 !important;border:1px solid #f5a800}
.service-closing-actions .btn.alt{background:transparent;color:#fff !important;border:1px solid rgba(255,255,255,.75)}
@media(max-width:1000px){
.student-service-detail-page .service-card-grid,.service-topic-grid{grid-template-columns:1fr 1fr}
.student-service-detail-page .service-steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
.student-service-detail-page .service-card-grid,.service-topic-grid,.student-service-detail-page .service-steps,.student-service-detail-page .service-steps.six-steps{grid-template-columns:1fr}
.service-checklist>div{grid-template-columns:1fr;gap:6px}
.service-closing-inner{align-items:flex-start;flex-direction:column;gap:30px}
.service-closing h2{font-size:34px}
.service-closing-actions{width:100%;min-width:0}
.service-dark-card,.service-reference-card{padding:28px}
}
@media(max-width:620px){
.service-closing span{font-size:15px !important}
}
/* V22 responsive safeguards for the expanded Student Services pages. */
.student-service-detail-page .eyebrow{font-size:16px !important;line-height:1.35 !important}
@media(max-width:900px){
.unibee-header .apply{display:none !important}
}
@media(max-width:620px){
.student-service-detail-page .eyebrow{font-size:15px !important}
}
/* =========================================================
UNIBEE V23 - FULL MOBILE & TABLET RESPONSIVE OPTIMISATION
Final responsive compatibility layer for 320px-1100px.
========================================================= */
/* Keep media and long content inside the available viewport. */
html,body{max-width:100%}
img,video,iframe{max-width:100%}
main h1,main h2,main h3,.unibee-official-details,.footer-copyright{overflow-wrap:anywhere}
.mobile-nav-apply{display:none}
@media(max-width:1100px){
html{scroll-padding-top:82px}
body.mobile-nav-open{overflow:hidden !important}
/* Header and primary mobile navigation */
.unibee-header .nav{
height:82px !important;
min-height:82px !important;
position:relative;
}
.unibee-header .nav>.apply{display:none !important}
.unibee-header .menu{
display:grid !important;
place-items:center;
flex:0 0 48px !important;
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
margin-left:auto !important;
padding:0 !important;
border:1px solid rgba(43,0,91,.18) !important;
border-radius:8px !important;
background:#fff !important;
color:#2b005b !important;
font:800 27px/1 Arial,sans-serif !important;
cursor:pointer;
touch-action:manipulation;
}
.unibee-header .menu:focus-visible{outline:3px solid #f5a800;outline-offset:3px}
.unibee-header .nav nav{
display:none !important;
position:absolute !important;
top:100% !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%);
width:100vw !important;
max-width:100vw !important;
max-height:calc(100vh - 82px) !important;
max-height:calc(100dvh - 82px) !important;
margin:0 !important;
padding:8px max(14px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)) !important;
gap:0 !important;
flex-direction:column !important;
align-items:stretch !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
background:#fff !important;
border-top:1px solid rgba(43,0,91,.10);
box-shadow:0 22px 45px rgba(32,0,96,.16) !important;
z-index:500 !important;
}
.unibee-header .nav nav.open{display:flex !important}
.unibee-header .nav nav>a:not(.mobile-nav-apply){
display:flex !important;
align-items:center;
width:100%;
min-height:52px;
padding:10px 8px !important;
border-bottom:1px solid rgba(43,0,91,.09);
font-size:16px !important;
line-height:1.35;
}
.unibee-header .nav nav>a::after,.unibee-header .dd>a::after{display:none !important}
/* Dropdown rows become touch-friendly accordions. */
.unibee-header .nav .dd{
display:grid !important;
grid-template-columns:minmax(0,1fr) 52px;
align-items:stretch !important;
width:100% !important;
gap:0 !important;
border-bottom:1px solid rgba(43,0,91,.09);
}
.unibee-header .nav .dd>a{
display:flex !important;
align-items:center;
min-width:0;
min-height:52px;
padding:10px 8px !important;
font-size:16px !important;
line-height:1.35;
}
.unibee-header .about-toggle,
.unibee-header .services-toggle,
.unibee-header .opportunities-toggle,
.unibee-header .university-menu>.uni-toggle{
display:grid !important;
place-items:center;
justify-self:end;
width:52px !important;
height:52px !important;
min-width:52px !important;
min-height:52px !important;
padding:0 !important;
touch-action:manipulation;
}
.unibee-header .dd>.drop{
grid-column:1/-1;
position:static !important;
display:none !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
margin:0 !important;
padding:6px 0 10px 12px !important;
border:0 !important;
border-top:1px solid rgba(43,0,91,.08) !important;
box-shadow:none !important;
background:#fbf9fd !important;
}
.unibee-header .dd.is-open>.drop{display:block !important}
.unibee-header .dd.is-open>.about-toggle .dropdown-triangle,
.unibee-header .dd.is-open>.services-toggle .dropdown-triangle,
.unibee-header .dd.is-open>.opportunities-toggle .dropdown-triangle,
.unibee-header .university-menu.is-open>.uni-toggle .dropdown-triangle{transform:rotate(180deg)}
.unibee-header .dropdown-triangle{transition:transform .2s ease}
.unibee-header .drop>a,
.unibee-header .uni-panel>a{
display:flex !important;
align-items:center;
min-height:46px;
padding:10px 12px !important;
font-size:15px !important;
line-height:1.4 !important;
white-space:normal !important;
}
/* Courses: level > subject > individual course stays collapsed until tapped. */
.unibee-header .university-menu>.drop{display:none !important}
.unibee-header .university-menu.is-open>.drop{display:block !important}
.unibee-header .university-menu .uni-branch{width:100% !important}
.unibee-header .university-menu .uni-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 48px;
align-items:stretch !important;
width:100% !important;
min-height:48px !important;
}
.unibee-header .university-menu .uni-row>a{
display:flex !important;
align-items:center;
min-width:0;
min-height:48px;
padding:9px 10px !important;
font-size:14.5px !important;
line-height:1.4 !important;
}
.unibee-header .university-menu .uni-row>.uni-toggle{
display:grid !important;
place-items:center;
width:48px !important;
min-width:48px !important;
min-height:48px !important;
padding:0 !important;
font-size:24px !important;
touch-action:manipulation;
transition:transform .2s ease;
}
.unibee-header .university-menu .uni-panel,
.unibee-header .university-menu .uni-panel .uni-panel{
position:static !important;
display:none !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
max-height:none !important;
margin:0 !important;
padding:4px 0 8px 12px !important;
overflow:visible !important;
border:0 !important;
border-left:2px solid rgba(245,168,0,.45) !important;
box-shadow:none !important;
background:#fff !important;
}
.unibee-header .university-menu .uni-branch.is-open>.uni-panel{display:block !important}
.unibee-header .university-menu .uni-branch.is-open>.uni-row>.uni-toggle{transform:rotate(90deg)}
.mobile-nav-apply{
display:flex !important;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin:16px 0 0 !important;
padding:12px 18px !important;
background:#f5a800 !important;
color:#200060 !important;
border:0 !important;
font-size:15px !important;
font-weight:900 !important;
text-decoration:none !important;
letter-spacing:.03em;
}
/* Tablet layout corrections. */
.ub-v6-recognition-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.ub-v6-recognition-card{min-width:0}
/* Comfortable controls on touch devices. */
.btn,.kcl-form-submit,.application-submit,.contact-detail-card[href],.gbs-side-card .btn{
min-height:48px;
touch-action:manipulation;
}
input,select,textarea{max-width:100%}
.privacy-table-wrap,.ub-study-scroller,.ub-popular-scroller,.course-running-slider{
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
}
}
@media(max-width:700px){
/* Single-column reading rhythm and more useful mobile spacing. */
.section,.content{padding-top:64px !important;padding-bottom:64px !important}
.sectionhead{align-items:flex-start;flex-direction:column}
.ub-v6-recognition-grid{grid-template-columns:1fr !important}
.ub-about-mark{display:none !important}
.wa{
right:max(14px,env(safe-area-inset-right)) !important;
bottom:max(14px,env(safe-area-inset-bottom)) !important;
width:54px !important;
height:54px !important;
}
.footer-socials{flex-wrap:wrap;justify-content:center}
.unibee-official-details address,.unibee-official-details p,.unibee-official-details a{font-size:13px}
}
@media(max-width:620px){
/* 16px controls prevent browser zoom on focus on common mobile browsers. */
input,select,textarea,
.kcl-form-grid input,.kcl-form-grid select,
.form input,.form select,.form textarea{
font-size:16px !important;
min-height:50px;
}
textarea{min-height:120px}
.kcl-form-consent input{width:22px !important;height:22px !important;min-height:22px !important}
.kcl-university-form{padding-left:18px !important;padding-right:18px !important}
.gbs-course-hero .wrap{padding-top:48px;padding-bottom:48px}
.gbs-course-hero h1{font-size:clamp(34px,10vw,40px) !important;line-height:1.04 !important}
.gbs-course-hero p{font-size:16px !important;line-height:1.6}
.gbs-facts-grid>div{padding:18px 16px}
.gbs-side-card{padding:20px}
}
@media(max-width:480px){
.unibee-header .nav{height:76px !important;min-height:76px !important}
.unibee-header .brand{flex-basis:150px !important}
.unibee-header .brand img{width:150px !important;height:52px !important}
.unibee-header .nav nav{
max-height:calc(100vh - 76px) !important;
max-height:calc(100dvh - 76px) !important;
}
.unibee-hero h1{font-size:46px !important;line-height:.98 !important}
.unibee-intro h2,.home-slider-head h2,.home-section-head h2,.unibee-why h2{font-size:40px !important}
.service-closing h2,.opportunity-closing h2,.purpose-page .purpose-closing h2{font-size:32px !important}
.actions,.home-final-actions{width:100%}
.actions .btn,.home-final-actions a{width:100%;text-align:center}
}
@media(max-width:900px){.ub-about-mark{display:none !important}}
@media(max-width:1100px){
a.btn{display:inline-flex;align-items:center;justify-content:center}
}