:root{

--bg: #ffffff;

--panel: #ffffff;

--panel2:#f8fafc;

--muted:#475569;

--text: #111827;

--hover:#1e3a8a;

--accent:#16a34a;

--danger:#ef4444;

--border:#e5e7eb;

--ring: rgba(30,58,138,0.25);

--shadow: 0 6px 24px rgba(0,0,0,0.08);

--radius: 14px;

}

*{box-sizing:border-box}

html,body{height:100%}

body{

margin:0;

font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";

background: var(--bg);

color: var(--text);

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.container{width: min(1400px, 95%); margin: 0 auto;}

.btn{

display:inline-flex; align-items:center; justify-content:center;

gap:.55rem; border-radius: 12px; padding:.9rem 1.1rem; font-weight:700; letter-spacing:.2px; cursor:pointer; border:1px solid transparent; text-decoration:none; color:var(--text);

transition: all .2s ease;

}

.btn.small{padding:.6rem .8rem; font-size:.9rem}

.btn.solid{

background:#111827;

color:#ffffff;

box-shadow: var(--shadow);

border-color:#111827;

}

.btn.solid:hover{transform: translateY(-1px); filter: brightness(1.02);}

.btn.ghost{background: transparent; border-color: #cbd5e1; color:var(--text)}

.btn.ghost:hover{border-color:#94a3b8; background:#f1f5f9; color:var(--hover)}

.muted{color: var(--muted)}

.site-header{

position: sticky; top:0; z-index:50;

background: rgba(255,255,255,.85);

backdrop-filter: blur(10px);

border-bottom: 1px solid var(--border);

}

.header-inner{display:flex; align-items:center; justify-content:space-between; padding: .9rem 0;}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text)}

.brand-mark{display:inline-flex; width:50px; height:50px}

.brand-mark img{width:100%; height:100%; object-fit:contain}

.brand-text{font-family:"Plus Jakarta Sans", Inter, system-ui; font-weight:800; font-size:1.05rem; letter-spacing:.4px; color:var(--text)}

.brand-tagline{color:var(--muted); font-size:.8rem; margin-left:.35rem}

.main-nav{display:flex; align-items:center; gap:1.2rem}

.main-nav ul{display:flex; list-style:none; gap:1rem; padding:0; margin:0}

.main-nav a{color:#334155; text-decoration:none; font-weight:600}

.main-nav a:hover{color:var(--hover)}

.main-nav a.active{color:var(--hover)}

.nav-cta{display:flex; gap:.6rem}

.nav-toggle{display:none; background:none; border:0; width:44px; height:44px; border-radius:10px; color:var(--text); cursor:pointer}

.nav-toggle span{display:block; height:2px; background:#111827; margin:7px 8px}

@media (max-width: 900px){

.nav-toggle{display:inline-block}

.main-nav{position: fixed; inset:64px 0 auto 0; background:rgba(255,255,255,.98); border-bottom:1px solid var(--border); padding:1rem; transform: translateY(-120%); transition: transform .25s ease; flex-direction:column; align-items:stretch; gap:1rem}

.main-nav.open{transform: translateY(0)}

.main-nav ul{flex-direction:column}

.nav-cta{flex-direction:column}

}

/* Hero */

.hero{

position: relative;

overflow: hidden;

min-height: 560px;

padding: 3.5rem 0 2rem;

background: radial-gradient(1000px 400px at 20% -40%, #f1f5f9, rgba(255,255,255,0) 65%);

}

.hero-inner{

position: relative;

z-index: 2;

display: flex;

align-items: center;

min-height: clamp(560px, 72vh, 820px);

}

.hero-copy{max-width: 820px}

.hero h1{font-size: clamp(2rem, 3.4vw, 3.2rem); margin:0 0 .6rem; line-height:1.1}

.hero p{color:#334155; max-width: 64ch}

.hero-cta{display:flex; gap:.8rem; margin-top:1rem}

.hero-media{

position:absolute; inset:0;

z-index: 1;

pointer-events: none;

}

.hero-video{

position:absolute;

top:0; right:0; bottom:0;

width: 62vw;

min-width: 600px;

height: 100%;

object-fit: cover;

object-position: center;

filter: saturate(1.05) contrast(1.02);

}

.hero-media::after{

content:"";

position:absolute; inset:0;

pointer-events:none;

background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 40%, rgba(255,255,255,0) 62%);

}

@media (max-width: 1100px){

.hero-video{width: 58vw; min-width: 520px}

.hero-media::after{background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 45%, rgba(255,255,255,0) 70%)}

}

@media (min-width: 1200px){
.hero-copy{
max-width: 40%;
flex-basis: 40%;
}
}

.hero-mobile-video{display:none}

.hero-mobile-video .mobile-video{

width: 100%;

display: block;

aspect-ratio: 16 / 9;

object-fit: cover;

border-radius: var(--radius);

box-shadow: var(--shadow);

filter: saturate(1.05) contrast(1.02);

}

@media (max-width: 900px){

.hero{min-height: auto; padding: 2.5rem 0 1.5rem}

.hero-media{display:none}

.hero-inner{min-height: auto;}

.hero-copy{ text-align: center; margin-left:auto; margin-right:auto;}

.hero p{margin-left:auto; margin-right:auto;}

.hero-cta{justify-content:center; flex-wrap:wrap}

.hero-mobile-video{display:block; margin:.9rem 0 0}

.badges{justify-content:center}

}

.program-hero-support{padding:1rem 0 2rem}

.support-grid{

display:grid;

grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);

gap:1.4rem;

align-items:stretch;

grid-auto-rows:1fr;

}

.support-grid > *{height:100%}

.support-grid .stats{margin-top:0}

@media (max-width: 900px){

.support-grid{grid-template-columns:1fr; grid-auto-rows:auto}

.support-grid > *{height:auto}

}

.panel-card{

background: var(--panel);

border:1px solid var(--border);

border-radius: var(--radius);

padding:1rem 1.1rem;

box-shadow: var(--shadow);

}

.panel-card h3{margin:.2rem 0 .4rem}

.panel-card ol{padding-left:1.2rem; color:var(--muted)}

.stats{

display:grid;

grid-template-columns: repeat(3, 1fr);

gap:.6rem;

margin-top:1rem;

height:100%;

align-content:stretch;

}

.stat{

background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1.1rem .9rem;

display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;

box-shadow: var(--shadow); gap:.45rem;

}

.stat-value{font-weight:800; font-size:1.2rem; line-height:1.1; margin-bottom:0; color:#0f172a}

.stat-label{color:var(--muted); font-size:.9rem}

.stat-icon{

width: clamp(44px, 4.4vw, 64px);

height: clamp(44px, 4.4vw, 64px);

border-radius: 16px;

border:1px solid #e2e8f0;

background:#ffffff;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

transition: transform .2s ease;

--stat-placeholder-bg:#e2e8f0;

--stat-placeholder-fg:#0f172a;

}

.stat-icon img{

width:70%;

height:70%;

object-fit:contain;

display:none;

}

.stat-icon .stat-icon-placeholder{

display:flex;

align-items:center;

justify-content:center;

width:100%;

height:100%;

font-weight:700;

font-size:clamp(.85rem, 1.8vw, 1.1rem);

letter-spacing:.05em;

text-transform:uppercase;

color:var(--stat-placeholder-fg);

background:var(--stat-placeholder-bg);

}

.stat-icon img[src]{display:none}

.stat-icon img[src]:not([src=""]){display:block}

.stat-icon img[src]:not([src=""]) + .stat-icon-placeholder{display:none}

.stat-icon.placeholder-faculties{--stat-placeholder-bg:#e0f2fe; --stat-placeholder-fg:#0c4a6e}

.stat-icon.placeholder-programs{--stat-placeholder-bg:#ede9fe; --stat-placeholder-fg:#4c1d95}

.stat-icon.placeholder-levels{--stat-placeholder-bg:#ecfccb; --stat-placeholder-fg:#365314}

.badges{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem}

.badge{display:flex; align-items:center; gap:.4rem; background:#f8fafc; border:1px solid var(--border); padding:.45rem .6rem; border-radius:999px; color:#0f172a}

.badge svg{width:20px; height:20px; display:inline-block}

.badge svg *{stroke: currentColor}

.badges.rotator-enabled{

position: relative; display: inline-block; width: fit-content; min-height: 0;

}

.badges.rotator-enabled .badge{

position:absolute; left:0; top:0; opacity:0; transform: translateY(6px);

pointer-events:none; transition: opacity .35s ease, transform .35s ease; white-space: nowrap;

}

.badges.rotator-enabled .badge.active{ position:relative; opacity:1; transform: none; pointer-events:auto; }

/* Areas grid */

.areas{padding:2.2rem 0}

.section-head h2{margin:.2rem 0}

.section-head p{color:#334155}

/* 4 across on desktop, down to 1 on small screens */

.category-grid{

display:grid;

grid-template-columns: repeat(4, 1fr);

gap:1rem;

margin-top:1rem;

align-items:stretch;

}

@media (max-width: 1024px){ .category-grid{grid-template-columns: repeat(2, 1fr)} }

@media (max-width: 640px){ .category-grid{grid-template-columns: 1fr} }

/* Faculty tiles */

.faculty-card{

--c-bg:#0f172a; /* default inner background */

--c-fg:#ffffff; /* default foreground on inner card */

background: var(--panel);

border:1px solid var(--border);

border-radius: 16px;

box-shadow: var(--shadow);

overflow:hidden;

display:grid;

grid-template-rows:auto 1fr;

transition: transform .15s ease, box-shadow .15s ease;

height:100%;

}

.faculty-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.09); }
.faculty-card.is-highlight{outline:3px solid #111827; box-shadow:0 12px 30px rgba(17,24,39,0.25);}

.fc-head{

display:flex; align-items:center; gap:.6rem;

padding:.9rem 1rem .35rem;

background:#ffffff;

}

.fc-head h4{margin:0; color:#0f172a}

/* Icon container and sizing */

.category-icon{

width: clamp(42px, 4vw, 56px);

height: clamp(42px, 4vw, 56px);

border-radius:14px;

display:grid;

place-items:center;

font-size:clamp(.8rem, 1.6vw, 1rem);

background:#ffffff;

border:1px solid #e2e8f0; color:#0f172a;

transition: transform .2s ease;

}

.category-icon svg,

.category-icon img{

width:70%;

height:70%;

display:block;

max-width:100%;

max-height:100%;

object-fit:contain;

}

.category-icon svg [stroke]{ stroke: currentColor; }

.category-icon svg [fill="#000000"],

.category-icon svg [fill="#231F20"],

.category-icon svg [fill="#444"],

.category-icon svg path:not([fill="none"]){

fill: currentColor;

}

.category-icon.is-placeholder{

background:#e0e7ff;

border-color:#c7d2fe;

color:#312e81;

font-weight:700;

letter-spacing:.05em;

text-transform:uppercase;

}

.fc-inner{

background: var(--c-bg);

color: var(--c-fg);

padding: 1rem;

border-top-left-radius: 14px;

border-top-right-radius: 14px;

margin-top:.35rem;

/* Keep buttons aligned uniformly */

display:grid;

grid-template-rows: auto 1fr auto;

gap:.75rem;

}

/* Clamp helper usable anywhere */

.clamp-2{

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}

/* Preview list of first 4 programs */

.program-snippet{

list-style:none;

padding:0;

margin:0;

display:grid;

gap:.25rem;

/* Smaller text so items fit comfortably */

font-size:clamp(.78rem, 1.5vw, .9rem);

line-height:1.2;

/* Reserve the height of 4 rows so short lists stay uniform */

min-height:4.8rem;

}

.program-snippet li{

color: var(--c-fg);

opacity:.95;

font-weight:600;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

letter-spacing:-.01em;

}

.program-snippet li.placeholder{opacity:0; pointer-events:none}

/* Foot of the inner card (count + button) */

.fc-inner .fc-foot{

display:flex; align-items:center; justify-content:space-between; gap:.6rem;

}

/* Remove the rectangle around "xx programs" on colored cards */

.fc-inner .pill{

background: transparent !important;

border: 0 !important;

padding: 0 !important;

border-radius: 0 !important;

box-shadow: none !important;

color: var(--c-fg) !important;

font-weight: 800;

}

/* Buttons on colored cards for high contrast */

.fc-inner .btn.ghost{

background: transparent;

border-color: rgba(255,255,255,0.8);

color: var(--c-fg);

}

.fc-inner .btn.ghost:hover{

background: rgba(255,255,255,0.15);

border-color: rgba(255,255,255,1);

}

/* Reuse existing bits */

.category-card-body{display:grid; gap:.6rem}

.category-card-head{display:flex; align-items:center; gap:.6rem}

.category-card h4{margin:0; color:#0f172a}

.category-card-foot{display:flex; align-items:center; justify-content:space-between}

.category-card .pill{padding:.25rem .5rem; border:1px solid #e2e8f0; border-radius:999px; color:#0f172a; background:#ffffff}

/* Palette: solid and clearly differentiated (new area ids) */

.fc--engineering{ --c-bg:#7c3aed; --c-fg:#ffffff; } /* violet */

.fc--artdesign{ --c-bg:#c026d3; --c-fg:#ffffff; } /* fuchsia */

.fc--architecture{ --c-bg:#1e3a8a; --c-fg:#ffffff; } /* indigo */

.fc--business{ --c-bg:#d97706; --c-fg:#ffffff; } /* amber */

.fc--trades{ --c-bg:#ea580c; --c-fg:#ffffff; } /* orange */

.fc--itds{ --c-bg:#2563eb; --c-fg:#ffffff; } /* blue */

.fc--music{ --c-bg:#db2777; --c-fg:#ffffff; } /* pink */

.fc--draughting{ --c-bg:#0d9488; --c-fg:#ffffff; } /* teal */

/* Modal and program list */

.modal{position: fixed; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); display:none; align-items:center; justify-content:center; padding:1rem; z-index:60}

.modal.open{display:flex}

.modal-content{background:var(--panel); border:1px solid var(--border); border-radius:16px; width:min(980px, 96vw); max-height: 86vh; overflow:auto; padding:1rem 1.1rem; box-shadow: var(--shadow)}

.modal-close{position: sticky; top:0; float:right; background:transparent; border:0; color:var(--muted); font-size:1.1rem; cursor:pointer}

.modal h3{margin:.2rem 0 .2rem; display:flex; align-items:center; gap:.4rem; color:#0f172a}

.modal .meta{color:#64748b}

.modal .modal-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}

.modal .modal-left{min-width: 320px}

.modal .modal-tools{display:flex; align-items:center; gap:.6rem}
.filter-toggle{display:none; align-items:center; gap:.35rem; border-radius:999px; border:1px solid #cbd5e1; background:#ffffff; color:#0f172a; font-weight:600; padding:.45rem .9rem; cursor:pointer;}

.modal .modal-search{position:relative}

.modal .modal-search input{background:#ffffff; border:1px solid #cbd5e1; color:var(--text); padding:.6rem .9rem; border-radius:12px; width:min(360px, 70vw); outline:none}

.modal .modal-search input:focus{border-color:#94a3b8; box-shadow: 0 0 0 4px var(--ring)}

.modal .modal-search button{position:absolute; right:.25rem; top:50%; transform:translateY(-50%); background:transparent; border:0; color:#64748b; cursor:pointer; padding:.25rem .45rem}

.level-filter{display:flex; gap:.4rem; flex-wrap:wrap}

.level-filter .filter-pill{

padding:.35rem .6rem; border-radius:999px; border:1px solid #e2e8f0; color:#0f172a; background:#ffffff; cursor:pointer; font-weight:600; font-size:.9rem;

}

.level-filter .filter-pill.active{border-color:#111827; background:#111827; color:#ffffff}

.program-list{display:grid; grid-template-columns: 1fr 1fr; gap:.9rem; margin-top:.8rem}

@media (max-width: 720px){.program-list{grid-template-columns: 1 fr}}

@media (max-width: 720px){
  .modal .modal-tools{flex-direction:column; align-items:flex-start; position:relative;}
  .filter-toggle{display:inline-flex;}
  .level-filter{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:.75rem;
    margin-top:.4rem;
    border-radius:14px;
    background:#ffffff;
    box-shadow:var(--shadow);
    z-index:25;
  }
  .level-filter.is-open{display:flex; flex-wrap:wrap;}
}

.program-item{

background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.9rem;

display:grid; gap:.5rem; grid-template-rows:auto auto;

box-shadow: var(--shadow);

}

.program-item h5{margin:0; font-size:1rem; font-weight:800; color:#0f172a}

.program-item--link{cursor:pointer; border-color:#cbd5e1}

.program-item .program-link{
display:inline-flex;
align-items:center;
gap:.35rem;
font-weight:700;
color:#2563eb;
text-decoration:none;
font-size:.85rem;
}

.program-item .program-link::after{content:"›"; font-size:1rem; line-height:1}

.program-item .program-link:hover{text-decoration:underline}

.level-chips{display:flex; gap:.4rem; flex-wrap:wrap}

.level-chip{padding:.25rem .5rem; border:1px solid #e2e8f0; border-radius:999px; color:#0f172a; font-weight:700; font-size:.85rem; background:#ffffff}

.cta-band{padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#f8fafc}

.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}

.cta-actions{display:flex; gap:.6rem}

@media (max-width: 800px){

.cta-inner{flex-direction:column; align-items:flex-start}

}

.site-footer{border-top:1px solid var(--border); padding:2rem 0; background:#ffffff}

.footer-inner{display:grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap:1rem}

@media (max-width: 1024px){.footer-inner{grid-template-columns: 1fr 1fr}}

@media (max-width: 640px){.footer-inner{grid-template-columns: 1fr}}

.footer-col h5{margin:.2rem 0 .6rem}

.footer-col ul{list-style:none; padding:0; margin:0}

.footer-col a{color:#1f2937; text-decoration:none; font-weight:600}

.footer-col a:hover{color:var(--hover)}

.footer-col form label{display:block; margin-bottom:.5rem}

.footer-col input, .footer-col textarea{

width:100%; background:#ffffff; border:1px solid #cbd5e1; color:var(--text); border-radius:12px; padding:.6rem .8rem; outline:none;

}

.footer-col input:focus, .footer-col textarea:focus{border-color:#94a3b8; box-shadow: 0 0 0 4px var(--ring)}
.category-icon .icon-initials{display:block}