/* ICHT public design system. Shared by the landing page and CMS routes. */
:root {
    --blue:#0057ce;
    --navy:#08265f;
    --ink:#304568;
    --muted:#5d7190;
    --pale:#eef6fd;
    --line:#e2eaf3;
    --white:#fff;
    --radius:7px;
    --shadow:0 2px 10px #1538650d;
    --container:1320px
}


body {
    color:var(--ink);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-size:15px;
    line-height:1.5;
    background:color-mix(in srgb,var(--pale) 52%,#fff);
    overflow-wrap:break-word
}


* {
    box-sizing:border-box
}

img {
    max-width:100%
}

a {
    color:var(--blue);
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

h1,h2,h3,h4 {
    color:var(--navy);
    font-family:inherit;
    line-height:1.2
}

a,button {
    touch-action:manipulation
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:4px
}

[hidden] {
    display:none!important
}


.site-container {
    width:min(var(--container),calc(100% - 112px));
    margin-inline:auto
}


.icon {
    width:22px;
    height:22px;
    flex-shrink:0;
    vertical-align:middle;
    color:var(--blue)
}


.skip-link {
    position:fixed;
    top:8px;
    left:8px;
    transform:translateY(-180%);
    z-index:100;
    background:#fff;
    padding:12px 20px;
    border:2px solid var(--blue)
}

.skip-link:focus {
    transform:none
}


.information-bar {
    background:linear-gradient(90deg,#edf5fb,#f7fbff);
    font-size:12px;
    color:var(--navy)
}


.information-inner,.contact-strip,.portal-strip,.contact-strip>span {
    display:flex;
    align-items:center
}


.information-inner {
    justify-content:space-between;
    gap:20px;
    min-height:36px
}

.contact-strip {
    gap:30px
}

.contact-strip>span {
    gap:9px
}

.contact-strip a,.portal-strip>a {
    color:var(--navy)
}

.information-bar .icon {
    width:15px;
    height:15px
}


.portal-strip {
    align-self:stretch;
    gap:0;
    white-space:nowrap
}

.portal-strip>a {
    padding:8px 20px;
    position:relative
}

.portal-strip>a+a:not(.top-apply):before {
    content:"";
    position:absolute;
    left:0;
    top:30%;
    height:40%;
    border-left:1px solid var(--line)
}

.portal-strip .top-apply {
    background:var(--blue);
    color:#fff
}

.portal-strip .search-link {
    padding-right:0
}


.site-header {
    padding:0;
    border:0;
    min-height:0;
    background:#fff;
    z-index:30;
    position:relative;
    display:block
}


.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    min-height:91px
}


.site-brand {
    gap:12px;
    display:flex;
    align-items:center;
    flex-shrink:0
}

.site-brand img {
    width:66px;
    height:66px;
    object-fit:contain
}

.site-brand .brand-copy {
    width:auto;
    height:auto;
    display:block;
    background:none;
    border-radius:0;
    color:var(--navy);
    text-align:left
}


.site-brand strong {
    display:block;
    max-width:275px;
    font:750 19px/1.1 Inter,"Segoe UI",Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:-.35px
}

.site-brand small {
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:500;
    letter-spacing:1.2px;
    margin-top:6px
}

.site-brand small b {
    margin-inline:10px;
    font-weight:400
}

.brand-seal {
    width:62px!important;
    height:62px!important;
    border:1px solid var(--blue);
    background:var(--pale)!important;
    border-radius:50%!important
}

.brand-seal .icon {
    width:32px;
    height:32px
}


.site-header nav {
    display:flex;
    align-items:center;
    gap:24px
}

.nav-item {
    position:relative;
    display:flex;
    align-items:center;
    gap:2px
}

.site-header nav a {
    color:var(--navy);
    font-size:14px;
    font-weight:600;
    padding:30px 0;
    white-space:nowrap
}

.site-header nav a[aria-current=page] {
    color:var(--blue)
}

.site-header nav a[aria-current=page]:after {
    content:"";
    position:absolute;
    height:2px;
    background:var(--blue);
    bottom:16px;
    left:0;
    right:0
}


.submenu-toggle {
    display:grid;
    place-items:center;
    border:0;
    background:none;
    padding:8px 2px;
    cursor:pointer
}

.submenu-toggle .icon {
    width:13px;
    height:13px;
    color:var(--navy)
}

.nav-dropdown {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:230px;
    max-width:320px;
    padding:10px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 12px 25px var(--brand-shadow);
    border-radius:var(--radius);
    z-index:40
}

.nav-item.is-open>.nav-dropdown {
    display:block
}

.nav-dropdown .nav-item {
    display:flex
}

.site-header .nav-dropdown a {
    padding:10px;
    font-size:13px;
    white-space:normal;
    flex:1
}

.site-header .nav-dropdown a:hover {
    background:var(--pale)
}

.nav-dropdown .nav-dropdown {
    left:100%;
    top:0
}


.nav-toggle {
    display:none;
    width:44px;
    height:44px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:6px;
    background:#fff;
    flex-direction:column;
    justify-content:center;
    gap:5px
}

.nav-toggle span {
    display:block;
    width:22px;
    height:2px;
    background:var(--navy)
}


.button-blue,.button-outline {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    min-height:46px;
    padding:12px 23px;
    border:1px solid var(--blue);
    border-radius:var(--radius);
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    transition:background .18s,box-shadow .18s
}


.button-blue {
    background:var(--blue);
    color:#fff
}

.button-blue .icon {
    color:#fff;
    width:19px
}

.button-outline {
    color:var(--blue);
    background:#ffffffc9
}

.button-blue:hover {
    background:var(--button-hover);
    border-color:var(--button-hover);
    box-shadow:0 5px 15px var(--brand-shadow)
}

.button-outline:hover {
    background:var(--pale)
}


.landing-hero {
    position:relative;
    overflow:hidden;
    background:var(--pale);
    min-height:460px
}


.landing-hero-media {
    position:absolute;
    inset:0 0 0 35%;
    overflow:hidden
}

.landing-hero-media>img,.landing-hero-media video,.landing-hero-media .hero-slide img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 42%
}

.landing-hero-media:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,var(--pale) 0%,color-mix(in srgb,var(--pale) 67%,transparent) 12%,transparent 35%);
    pointer-events:none;
    z-index:1
}

.landing-hero-media .hero-slide {
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .5s
}

.landing-hero-media .hero-slide.active {
    opacity:1
}


.hero-layout {
    position:relative;
    min-height:460px;
    display:flex;
    align-items:center;
    padding-block:45px
}

.landing-hero-copy {
    width:51%;
    position:relative;
    z-index:2
}

.eyebrow {
    font-size:13px;
    font-weight:650;
    letter-spacing:1.8px;
    color:var(--blue);
    margin:0 0 12px
}


.landing-hero h1 {
    font-size:clamp(38px,4.15vw,59px);
    letter-spacing:-1.3px;
    font-weight:750;
    margin:0 0 10px
}

.hero-subtitle {
    font-size:clamp(22px,2.35vw,31px);
    line-height:1.18;
    max-width:470px;
    color:var(--navy);
    margin:0 0 20px
}

.hero-introduction {
    max-width:520px;
    color:var(--ink);
    font-size:16px;
    line-height:1.45;
    margin-bottom:23px
}

.hero-introduction p {
    margin:0
}

.landing-hero-actions {
    display:flex;
    gap:15px;
    flex-wrap:wrap
}

.landing-hero-actions a {
    min-height:50px
}

.hero-highlights {
    display:flex;
    gap:26px;
    margin-top:40px;
    color:var(--navy);
    font-size:12px
}

.hero-highlights span {
    display:flex;
    align-items:center;
    gap:10px
}

.hero-highlights .icon {
    width:26px;
    height:26px
}


.admission-window {
    position:absolute;
    right:0;
    bottom:30px;
    width:280px;
    z-index:3;
    background:#fff;
    border-radius:8px;
    padding:17px 18px;
    box-shadow:0 8px 26px var(--brand-shadow)
}

.window-heading {
    display:flex;
    gap:12px;
    align-items:center
}

.window-heading>.icon {
    width:29px;
    height:29px
}

.window-heading h2 {
    font-size:17px;
    margin:0 0 2px
}

.window-heading p {
    font-size:12px;
    color:var(--navy);
    margin:0
}

.countdown-label {
    font-size:11px;
    color:var(--muted);
    margin:9px 0 5px
}

.window-units {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
    text-align:center
}

.window-units strong {
    display:block;
    border-radius:6px;
    padding:8px 3px;
    font-size:25px;
    color:var(--navy);
    background:linear-gradient(var(--pale),color-mix(in srgb,var(--blue) 15%,#fff));
    line-height:1.1
}

.window-units small {
    display:block;
    font-size:10px;
    margin-top:4px
}

.admission-window>a {
    display:inline-block;
    font-size:12px;
    margin-top:15px
}


.landing-hero .hero-slider-controls {
    position:absolute;
    bottom:10px;
    left:50%;
    z-index:5;
    display:flex;
    gap:5px
}

.hero-slider-controls button {
    color:var(--navy);
    background:#fff;
    border:1px solid var(--line);
    min-height:32px;
    min-width:32px
}

.hero-slider-dots {
    display:flex;
    align-items:center;
    gap:5px
}

.hero-slider-dots button {
    min-width:9px;
    min-height:9px;
    width:9px;
    height:9px;
    border-radius:50%;
    padding:0
}

.hero-slider-dots button.active {
    background:var(--blue)
}


.quick-access {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px;
    padding-block:16px 25px
}

.quick-access>a {
    display:flex;
    align-items:center;
    gap:16px;
    padding:17px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:var(--shadow);
    transition:transform .2s,border-color .2s
}

.quick-access>a:hover {
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--blue) 42%,#fff)
}

.quick-access>a>.icon:first-child {
    width:33px;
    height:33px
}

.quick-access>a>.icon:last-child {
    width:17px;
    margin-left:auto
}

.quick-access strong {
    display:block;
    color:var(--navy);
    font-size:13px;
    white-space:nowrap
}

.quick-access small {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:4px
}


.about-home {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:34px;
    padding-block:5px 26px;
    align-items:center
}

.about-visual {
    position:relative;
    min-height:295px;
    align-self:stretch;
    overflow:hidden
}

.about-visual>img {
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    object-fit:cover
}

.tour-link {
    position:absolute;
    bottom:0;
    left:0;
    background:color-mix(in srgb,var(--navy) 85%,transparent);
    color:#fff;
    display:flex;
    gap:12px;
    align-items:center;
    padding:12px 15px
}

.tour-link>span:first-child {
    display:grid;
    place-items:center;
    background:#fff;
    color:var(--navy);
    border-radius:50%;
    height:40px;
    width:40px
}

.tour-link strong,.tour-link small {
    display:block;
    font-size:12px
}

.section-title {
    position:relative;
    margin:0;
    padding-top:13px;
    font-size:25px;
    font-weight:700;
    letter-spacing:-.5px
}

.section-title:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:42px;
    height:2px;
    background:var(--blue)
}

.about-home h2 {
    font-size:31px;
    margin-bottom:10px
}

.about-home .rich-copy {
    font-size:15px;
    line-height:1.45
}

.about-home .rich-copy p {
    margin:0 0 12px
}

.about-home .button-blue {
    min-height:39px;
    padding:9px 17px;
    font-size:12px;
    margin-top:7px
}

.about-facts {
    display:flex;
    align-items:center;
    gap:0;
    margin-top:28px
}

.about-facts>div {
    display:flex;
    align-items:flex-start;
    gap:10px;
    flex:1;
    padding-inline:15px;
    border-left:1px solid var(--line);
    color:var(--navy);
    font-size:12px;
    font-weight:600
}

.about-facts>div:first-child {
    padding-left:0;
    border:0
}

.about-facts strong {
    display:block;
    color:var(--blue);
    font-size:25px;
    line-height:1
}

.about-facts small {
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:400;
    margin-top:4px
}


.courses-home {
    padding-block:8px 27px
}

.section-top {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:16px
}

.section-top>a {
    font-size:12px;
    white-space:nowrap
}

.section-top .icon {
    width:17px;
    height:17px;
    margin-left:5px
}

.course-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px
}

.course-card {
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden;
    box-shadow:var(--shadow);
    background:#fff;
    display:flex;
    flex-direction:column
}

.course-image {
    height:139px;
    display:block;
    overflow:hidden
}

.course-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s
}

.course-card:hover .course-image img {
    transform:scale(1.035)
}

.course-body {
    padding:12px 13px 13px;
    display:flex;
    flex:1;
    flex-direction:column
}

.course-body h3 {
    font-size:15px;
    margin:0 0 6px;
    line-height:1.35
}

.course-body h3 a {
    color:var(--navy)
}

.course-body p {
    font-size:13px;
    margin:0 0 12px
}

.course-meta {
    display:flex;
    align-items:center;
    gap:16px;
    font-size:12px;
    color:var(--navy);
    margin-top:auto;
    margin-bottom:13px;
    padding-top:4px
}

.course-meta span {
    display:flex;
    align-items:center;
    gap:8px
}

.course-meta .icon {
    width:16px;
    height:16px
}

.course-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px
}

.course-actions a {
    min-height:34px;
    font-size:11px;
    padding:7px;
    border-radius:4px
}


.updates-home {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:32px;
    padding-bottom:28px
}

.updates-home>section+section {
    border-left:1px solid var(--line);
    padding-left:32px
}

.updates-home .section-title {
    font-size:23px
}

.news-preview {
    display:flex;
    gap:18px
}

.news-preview>img {
    width:165px;
    height:112px;
    object-fit:cover;
    border-radius:6px
}

.news-preview h3,.compact-events h3 {
    font-size:14px;
    margin:0 0 10px
}

.news-preview h3 a,.compact-events h3 a {
    color:var(--navy)
}

.news-preview time {
    font-size:11px;
    display:flex;
    align-items:center;
    gap:8px
}

.news-preview time .icon {
    width:15px;
    height:15px
}

.news-preview p {
    font-size:12px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:8px 0
}

.news-preview a {
    font-size:13px
}

.news-preview a .icon {
    width:17px;
    height:17px
}

.compact-events article {
    display:flex;
    gap:18px;
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:1px solid var(--line)
}

.compact-events article:last-child {
    border:0;
    margin-bottom:0
}

.event-date {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--pale);
    border-radius:6px;
    width:64px;
    min-width:64px;
    height:60px;
    color:var(--navy)
}

.event-date strong {
    font-size:26px;
    line-height:1.1
}

.event-date small {
    font-size:11px
}

.compact-events p {
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    font-size:11px;
    margin:0
}

.compact-events p span {
    display:flex;
    align-items:center;
    gap:6px
}

.compact-events .icon {
    width:14px;
    height:14px
}

.updates-empty {
    display:flex;
    align-items:center;
    gap:18px;
    background:color-mix(in srgb,var(--pale) 70%,#fff);
    border-radius:6px;
    padding:18px;
    min-height:108px
}

.updates-empty>.icon {
    width:30px;
    height:30px
}

.updates-empty h3 {
    font-size:15px;
    margin:0 0 5px
}

.updates-empty p {
    margin:0;
    font-size:13px
}


.career-banner {
    background:linear-gradient(90deg,#e8f4f7dd,#f0f7fc 45%,#e7f4ff);
    position:relative
}

.career-banner:before {
    content:"";
    position:absolute;
    inset:0 75% 0 0;
    background:url('/assets/images/hero.png') center 40%/cover;
    opacity:.22
}

.career-inner {
    min-height:93px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-block:18px;
    position:relative
}

.career-inner>div {
    margin-left:22%
}

.career-inner h2 {
    font-size:26px;
    margin:0 0 4px;
    letter-spacing:-.5px
}

.career-inner p {
    font-size:14px;
    margin:0
}

.career-inner>a {
    flex-shrink:0
}


.site-footer {
    display:block;
    padding:0;
    background:linear-gradient(100deg,#fff,var(--pale));
    color:var(--muted)
}

.footer-grid {
    display:grid;
    grid-template-columns:1.55fr .8fr 1fr 1.25fr .7fr;
    gap:36px;
    padding-block:24px 18px
}

.site-footer .site-brand img {
    width:49px;
    height:49px
}

.site-footer .site-brand strong {
    font-size:13px;
    max-width:230px
}

.site-footer .site-brand small {
    font-size:8px;
    letter-spacing:.6px
}

.site-footer .site-brand small b {
    margin-inline:5px
}

.footer-institution>p {
    font-size:12px;
    line-height:1.6;
    max-width:260px;
    margin-top:13px
}

.site-footer h3 {
    font-size:13px;
    margin:0 0 11px
}

.footer-grid>div>a:not(.site-brand) {
    display:block;
    color:var(--ink);
    font-size:12px;
    margin-bottom:4px
}

.footer-grid>div>a:hover {
    color:var(--blue)
}

.footer-contact p {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    margin:0 0 6px
}

.footer-contact .icon {
    height:15px;
    width:15px
}

.footer-motto {
    text-align:center;
    align-self:center;
    font-size:12px
}

.footer-motto>span {
    display:block;
    color:color-mix(in srgb,var(--blue) 18%,#fff);
    font-size:62px;
    line-height:1
}

.footer-motto p {
    margin:4px 0
}

.social-links {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}

.social-links a {
    font-size:11px;
    background:var(--blue);
    color:white;
    padding:4px 9px;
    border-radius:20px
}

.footer-bottom {
    background:color-mix(in srgb,var(--blue) 10%,#fff)
}

.footer-bottom>.site-container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-block:11px;
    font-size:11px
}

.footer-bottom small {
    font-size:11px
}

.footer-bottom a {
    color:var(--ink);
    margin-inline:8px
}


.page-hero {
    padding:55px max(56px,calc((100vw - var(--container))/2));
    background:linear-gradient(115deg,var(--blue),var(--navy));
    color:#fff;
    border-block:1px solid color-mix(in srgb,var(--blue) 72%,var(--navy))
}

.page-hero h1 {
    font-family:inherit;
    font-size:clamp(32px,4vw,48px);
    font-weight:700;
    line-height:1.14;
    max-width:900px;
    letter-spacing:-1px;
    color:#fff
}

.page-hero>p {
    color:color-mix(in srgb,#fff 78%,var(--pale))
}

.page-hero span {
    display:block;
    max-width:750px;
    color:color-mix(in srgb,#fff 88%,var(--pale))
}

.public-list-section,.public-form-section,.management-section,.about-intro,.public-article,.mission-vision-section,.welcome-section,.testimonials-section {
    max-width:var(--container);
    margin-inline:auto;
    padding:35px 0;
    background:transparent;
    width:calc(100% - 112px)
}

.section-heading h2,.about-intro h2,.welcome-section h2 {
    font-family:inherit;
    color:var(--navy);
    font-size:28px
}

.public-card-grid article,.management-grid article,.admission-content-grid article,.mission-vision-grid article,.testimonial-grid article {
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    background:#fff
}

.public-card-grid article img {
    aspect-ratio:2/1;
    object-fit:cover
}

.public-article {
    line-height:1.8
}

.public-article>img {
    max-height:500px;
    object-fit:cover;
    border-radius:8px
}

.public-action,.public-form button {
    background:var(--blue);
    color:#fff;
    border-radius:6px
}

.public-form {
    background:color-mix(in srgb,var(--pale) 52%,#fff);
    border:1px solid var(--line);
    border-radius:8px
}

.event-list time {
    color:var(--blue);
    background:var(--pale)
}

.programme-detail {
    padding-block:32px
}

.programme-detail>img {
    width:100%;
    max-height:420px;
    object-fit:cover;
    border-radius:8px
}

.programme-detail-copy {
    max-width:900px;
    padding-block:24px
}

.dynamic-section {
    margin-block:30px
}

.dynamic-section h2 {
    font-family:inherit
}

.dynamic-card-grid article {
    border:1px solid var(--line);
    border-radius:7px;
    padding:22px
}

.dynamic-gallery img {
    border-radius:7px
}

.welcome-photo {
    min-height:320px;
    background:var(--pale);
    color:var(--blue)
}

.welcome-section {
    grid-template-columns:1fr 1.5fr;
    gap:35px
}

.section-label {
    color:var(--blue)
}

.empty-content {
    color:var(--muted);
    background:var(--pale);
    border:1px solid var(--line);
    padding:22px;
    border-radius:6px
}


@media(min-width:1500px) {
    .landing-hero,.hero-layout {
        min-height:510px
    }

    .landing-hero-media {
        left:37%
    }


}


@media(max-width:1250px) {
    .site-container {
        width:calc(100% - 64px)
    }

    .header-inner {
        gap:20px
    }

    .site-header nav {
        gap:15px
    }

    .site-brand strong {
        font-size:16px;
        max-width:230px
    }

    .site-brand img {
        width:58px;
        height:58px
    }

    .site-header nav a {
        font-size:12px
    }

    .contact-strip {
        gap:16px
    }

    .quick-access {
        gap:18px
    }

    .quick-access>a {
        gap:10px;
        padding:14px 12px
    }

    .quick-access strong {
        font-size:12px
    }

    .quick-access small {
        font-size:10px
    }

    .hero-highlights {
        gap:18px
    }

    .landing-hero-copy {
        width:53%
    }

    .footer-grid {
        gap:24px
    }

    .career-inner h2 {
        font-size:23px
    }

    .public-list-section,.public-form-section,.management-section,.about-intro,.public-article,.mission-vision-section,.welcome-section,.testimonials-section {
        width:calc(100% - 64px)
    }


}


@media(max-width:1000px) {
    .header-inner {
        min-height:85px
    }

    .site-header nav {
        gap:10px
    }

    .site-brand strong {
        max-width:210px;
        font-size:15px
    }

    .site-brand img {
        width:52px;
        height:52px
    }

    .site-brand {
        gap:8px
    }

    .site-brand small {
        font-size:9px
    }

    .site-header nav a {
        font-size:11px
    }

    .contact-strip>span:nth-child(3) {
        display:none
    }

    .portal-strip>a {
        padding-inline:12px
    }

    .hero-highlights {
        gap:12px;
        font-size:10px
    }

    .hero-highlights .icon {
        width:22px
    }

    .landing-hero-actions a {
        padding-inline:15px;
        font-size:12px
    }

    .admission-window {
        width:244px;
        padding:14px
    }

    .landing-hero h1 {
        font-size:41px
    }

    .hero-introduction {
        font-size:14px
    }

    .quick-access {
        gap:12px
    }

    .quick-access>a>.icon:first-child {
        width:25px;
        height:25px
    }

    .quick-access>a>.icon:last-child {
        display:none
    }

    .about-home {
        gap:27px
    }

    .about-home h2 {
        font-size:27px
    }

    .about-home .rich-copy {
        font-size:14px
    }

    .about-facts {
        margin-top:20px
    }

    .about-facts>div {
        padding-inline:10px;
        gap:7px
    }

    .about-facts .icon {
        width:19px
    }

    .course-grid {
        gap:20px
    }

    .course-body h3 {
        font-size:13px
    }

    .course-image {
        height:125px
    }

    .course-meta {
        gap:10px
    }

    .updates-home {
        gap:24px
    }

    .updates-home>section+section {
        padding-left:24px
    }

    .news-preview {
        gap:13px
    }

    .news-preview>img {
        width:130px;
        height:105px
    }

    .updates-home .section-title {
        font-size:20px
    }

    .section-top>a {
        font-size:11px
    }

    .career-inner>div {
        margin-left:16%
    }

    .career-inner h2 {
        font-size:21px
    }

    .career-inner p {
        font-size:12px
    }

    .footer-grid {
        grid-template-columns:1.5fr .8fr 1fr 1.2fr;
        gap:25px
    }

    .footer-motto {
        display:none
    }


}


@media(max-width:820px) {
    .site-container {
        width:calc(100% - 40px)
    }

    .nav-toggle {
        display:flex
    }

    .site-header nav {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        border-top:1px solid var(--line);
        padding:12px 20px 20px;
        box-shadow:0 12px 20px var(--brand-shadow);
        max-height:calc(100dvh - 130px);
        overflow:auto;
        align-items:stretch;
        flex-direction:column;
        gap:0
    }

    .site-header nav.open {
        display:flex
    }

    .nav-item {
        flex-wrap:wrap;
        justify-content:space-between
    }

    .site-header nav a {
        padding:13px 4px;
        font-size:15px;
        flex:1
    }

    .site-header nav a[aria-current=page]:after {
        display:none
    }

    .submenu-toggle {
        height:44px;
        width:44px
    }

    .nav-dropdown {
        position:static;
        flex:0 0 100%;
        width:100%;
        max-width:none;
        padding:0 0 0 16px;
        border:0;
        box-shadow:none;
        background:color-mix(in srgb,var(--pale) 70%,#fff)
    }

    .site-brand strong {
        font-size:17px;
        max-width:260px
    }

    .site-brand img {
        width:56px;
        height:56px
    }

    .contact-strip {
        font-size:10px;
        gap:10px
    }

    .contact-strip>span:nth-child(2) {
        display:none
    }

    .portal-strip>a {
        font-size:10px;
        padding:9px
    }

    .information-inner {
        gap:8px
    }

    .landing-hero-copy {
        width:57%
    }

    .landing-hero h1 {
        font-size:36px
    }

    .hero-subtitle {
        font-size:24px
    }

    .hero-layout {
        min-height:460px
    }

    .hero-highlights {
        flex-wrap:wrap;
        gap:12px;
        margin-top:25px
    }

    .hero-highlights span:last-child {
        flex-basis:100%
    }

    .admission-window {
        width:220px;
        bottom:22px
    }

    .window-heading h2 {
        font-size:15px
    }

    .window-units strong {
        font-size:21px
    }

    .quick-access {
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding-block:18px;
        gap:12px
    }

    .quick-access>a {
        padding:16px
    }

    .quick-access strong {
        font-size:13px
    }

    .quick-access small {
        font-size:11px
    }

    .quick-access>a>.icon:last-child {
        display:block
    }

    .about-home {
        grid-template-columns:1fr;
        gap:24px;
        padding-block:10px 30px
    }

    .about-visual {
        height:300px
    }

    .about-home .rich-copy {
        font-size:15px
    }

    .about-facts>div {
        justify-content:center
    }

    .about-facts>div:first-child {
        justify-content:start
    }

    .course-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .course-body h3 {
        font-size:15px
    }

    .updates-home {
        grid-template-columns:1fr;
        gap:25px;
        padding-top:8px
    }

    .updates-home>section+section {
        border:0;
        border-top:1px solid var(--line);
        padding:18px 0 0
    }

    .news-preview>img {
        width:170px;
        height:115px
    }

    .career-inner>div {
        margin:0
    }

    .career-inner {
        gap:20px
    }

    .career-inner>a {
        font-size:12px;
        padding-inline:15px
    }

    .footer-grid {
        grid-template-columns:1.3fr 1fr;
        gap:24px
    }

    .footer-bottom>.site-container {
        flex-wrap:wrap;
        justify-content:center;
        text-align:center;
        gap:6px
    }

    .public-list-section,.public-form-section,.management-section,.about-intro,.public-article,.mission-vision-section,.welcome-section,.testimonials-section {
        width:calc(100% - 40px)
    }

    .page-hero {
        padding:35px 20px
    }

    .public-card-grid,.management-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }


}


@media(max-width:560px) {
    .information-inner {
        width:100%
    }

    .contact-strip {
        display:none
    }

    .portal-strip {
        width:100%;
        justify-content:center
    }

    .portal-strip>a {
        padding:9px 15px;
        font-size:11px
    }

    .portal-strip .search-link {
        padding-right:15px
    }

    .site-brand strong {
        font-size:14px;
        max-width:215px
    }

    .site-brand small {
        font-size:8px;
        letter-spacing:.7px
    }

    .site-brand img {
        width:48px;
        height:48px
    }

    .header-inner {
        min-height:78px;
        gap:10px
    }

    .landing-hero {
        display:flex;
        flex-direction:column
    }

    .landing-hero-media {
        inset:0;
        position:relative;
        height:265px;
        order:2
    }

    .landing-hero-media>img {
        object-position:center 43%
    }

    .landing-hero-media:after {
        background:linear-gradient(var(--pale) 0%,transparent 28%)
    }

    .hero-layout {
        display:block;
        min-height:0;
        padding-block:30px 0;
        order:1
    }

    .landing-hero-copy {
        width:100%
    }

    .landing-hero h1 {
        font-size:40px;
        letter-spacing:-1px
    }

    .hero-subtitle {
        font-size:24px;
        max-width:360px
    }

    .hero-introduction {
        font-size:14px;
        max-width:100%;
        margin-bottom:20px
    }

    .landing-hero-actions {
        gap:10px
    }

    .landing-hero-actions a {
        font-size:12px;
        min-height:46px;
        padding:12px 14px
    }

    .hero-highlights {
        gap:16px;
        margin-top:24px;
        font-size:10px;
        justify-content:space-between
    }

    .hero-highlights span {
        gap:5px
    }

    .hero-highlights span:last-child {
        flex-basis:auto
    }

    .hero-highlights .icon {
        width:20px
    }

    .admission-window {
        position:relative;
        bottom:auto;
        right:auto;
        width:100%;
        margin:24px 0 0;
        padding:14px 17px;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px 12px
    }

    .window-heading {
        gap:8px
    }

    .window-heading h2 {
        font-size:14px
    }

    .window-heading p {
        font-size:10px
    }

    .window-heading>.icon {
        width:23px;
        height:23px
    }

    .window-units {
        grid-column:2;
        grid-row:1/3;
        gap:5px;
        align-self:center
    }

    .window-units strong {
        font-size:20px;
        padding-block:7px
    }

    .window-units small {
        font-size:8px
    }

    .countdown-label {
        margin:0;
        font-size:10px
    }

    .quick-access {
        gap:10px
    }

    .quick-access>a {
        padding:14px 10px;
        gap:9px
    }

    .quick-access strong {
        font-size:11px;
        white-space:normal
    }

    .quick-access small {
        font-size:10px
    }

    .quick-access>a>.icon:last-child {
        display:none
    }

    .quick-access>a>.icon:first-child {
        width:25px
    }

    .about-visual {
        height:225px;
        min-height:225px
    }

    .about-home h2 {
        font-size:27px
    }

    .about-facts>div {
        padding-inline:10px;
        font-size:10px;
        gap:6px
    }

    .about-facts strong {
        font-size:22px
    }

    .about-facts small {
        font-size:10px
    }

    .course-grid {
        grid-template-columns:1fr;
        gap:18px
    }

    .course-image {
        height:175px
    }

    .course-body {
        padding:16px
    }

    .course-body h3 {
        font-size:16px
    }

    .course-body p {
        font-size:14px
    }

    .course-actions a {
        font-size:12px;
        min-height:42px
    }

    .course-meta {
        font-size:12px;
        margin-block:8px 14px
    }

    .section-title {
        font-size:24px
    }

    .section-top {
        gap:10px
    }

    .section-top>a {
        font-size:10px
    }

    .section-top .icon {
        width:14px;
        margin-left:2px
    }

    .news-preview>img {
        width:110px;
        height:110px
    }

    .news-preview h3 {
        font-size:13px
    }

    .compact-events h3 {
        font-size:13px
    }

    .career-inner {
        display:block;
        padding-block:24px
    }

    .career-inner h2 {
        font-size:23px
    }

    .career-inner p {
        font-size:13px;
        margin-bottom:16px
    }

    .career-inner>a {
        font-size:13px
    }

    .career-banner:before {
        right:0;
        opacity:.07
    }

    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:25px 20px;
        padding-top:26px
    }

    .footer-institution {
        grid-column:1/-1
    }

    .footer-contact {
        grid-column:1/-1
    }

    .footer-institution>p {
        max-width:none
    }

    .site-footer .site-brand strong {
        max-width:260px
    }

    .footer-bottom>.site-container {
        padding-block:16px
    }

    .footer-bottom small:last-child {
        display:none
    }

    .public-card-grid,.management-grid,.admission-content-grid,.mission-vision-grid,.testimonial-grid,.dynamic-card-grid {
        grid-template-columns:1fr
    }

    .welcome-section {
        grid-template-columns:1fr
    }

    .public-form {
        padding:20px
    }

    .page-hero h1 {
        font-size:32px
    }

    .programme-detail>img {
        height:200px
    }

    .public-article {
        font-size:15px
    }

    .dynamic-statistics {
        flex-wrap:wrap
    }


}


@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }

    .scroll-reveal,.scroll-reveal-child {
        opacity:1!important;
        transform:none!important
    }


}