@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--navy:#06274a;--blue:#0a5b9b;--cyan:#4fcbdc;--gold:#e7b735;--ice:#eef8fd;--ink:#21384e;--muted:#64788b;--line:#dbe8ef;--white:#fff;--dark:#041b31;--shadow:0 18px 55px rgba(6,39,74,.12)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"DM Sans",Arial,sans-serif;color:var(--ink);line-height:1.65;background:#fff}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,92%);margin:auto}
.topline{height:7px;background:linear-gradient(90deg,#d92720,var(--gold),#075293)}.utility{background:var(--dark);color:#bcd0dc;font-size:11px;padding:7px 0}.utility .container{display:flex;justify-content:space-between}
header{height:96px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;box-shadow:0 3px 18px rgba(6,39,74,.07)}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand img{width:92px;height:92px;object-fit:contain;flex-shrink:0}.brand-title{font:800 18px Manrope;color:var(--navy)}.brand-title small{display:block;font:500 10px "DM Sans";color:var(--muted);margin-top:2px}.menu{display:flex;gap:24px;align-items:center;font-size:13px;font-weight:700;color:#173453}.menu a:hover,.menu a.active{color:var(--blue)}.menu-btn{display:none;background:none;border:0;font-size:26px;color:var(--navy)}
.hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;background:#06274a}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,25,47,.97),rgba(3,47,78,.88) 45%,rgba(2,33,57,.42) 78%,rgba(2,25,47,.62)),url("https://dmhubeacademy.com/wp-content/uploads/2026/04/welcome_dmhube.png") center/cover no-repeat}.hero-content{position:relative;z-index:2;max-width:760px;color:#fff;padding:65px 0}.kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.hero h1{font:800 clamp(48px,7vw,78px) Manrope;letter-spacing:-.05em;color:#fff;margin:10px 0}.hero h1 span{color:#68d8e5}.hero h2{font:700 24px Manrope;color:#fff;margin-bottom:14px}.hero p{color:#dbeaf2;font-size:17px;max-width:680px}.meta{display:flex;gap:12px;flex-wrap:wrap;margin:23px 0}.pill{padding:9px 13px;border:1px solid rgba(255,255,255,.24);background:#ffffff0e;border-radius:6px;font-size:12px}.buttons{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:5px;font-size:12px;font-weight:800;border:0}.btn-primary{background:var(--cyan);color:#06263d}.btn-secondary{border:1px solid #ffffff55;color:#fff}.btn-blue{background:var(--blue);color:#fff}.status{display:inline-block;background:#f1c13e;color:#09294a;padding:9px 14px;border-radius:6px;font-size:12px;font-weight:800;margin-bottom:17px}
.stats{display:grid;grid-template-columns:repeat(6,1fr);box-shadow:var(--shadow);background:#fff;position:relative;margin-top:-35px;border-radius:10px;overflow:hidden;z-index:4}.stat{text-align:center;padding:19px 8px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat strong{display:block;font:800 27px Manrope;color:var(--blue)}.stat span{font-size:10px;color:#365879;font-weight:700}
section{padding:80px 0}.section-kicker{text-transform:uppercase;letter-spacing:.15em;color:var(--blue);font-size:11px;font-weight:800;text-align:center}.section-title{text-align:center;font:800 clamp(30px,4vw,45px) Manrope;letter-spacing:-.04em;color:var(--navy);margin:6px 0 11px}.section-lead{max-width:760px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px}.goldline{height:3px;width:45px;background:var(--gold);margin:0 auto 18px}
.about{background:linear-gradient(90deg,#fff,#f2f9fc)}.split{display:grid;grid-template-columns:1fr 1.1fr;gap:55px;align-items:center}.photo-box{border-radius:12px;overflow:hidden;min-height:350px;background:#dceef4}.photo-box img{width:100%;height:100%;object-fit:cover}.split h2{font:800 34px Manrope;color:var(--navy);margin-bottom:14px}.split p{color:var(--muted);font-size:14px;margin-bottom:13px}.callout{padding:18px;background:#e9f8f9;border-left:3px solid var(--cyan);font-size:13px;margin:20px 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:34px}.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 7px 25px rgba(6,39,74,.08);transition:.2s}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card-img{height:150px;overflow:hidden;background:#d9ebf2}.card-img img{width:100%;height:100%;object-fit:cover}.card-body{padding:17px;text-align:center}.card-body h3{font:800 17px Manrope;color:var(--blue);margin-bottom:6px}.card-body p{font-size:12px;color:var(--muted)}
.light{background:var(--ice)}.dark{background:var(--dark);color:#fff}.dark .section-title{color:#fff}.dark .section-kicker{color:var(--cyan)}.dark .section-lead{color:#b8ccd8}
.dark-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}.dark-card{padding:25px;background:#ffffff08;border:1px solid #ffffff14;border-radius:10px}.dark-card .num{color:var(--cyan);font:800 25px Manrope}.dark-card h3{color:#fff;font-size:17px;margin:10px 0 5px}.dark-card p{color:#a9c1cd;font-size:12px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:32px}.gallery-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}.gallery-card img{height:160px;width:100%;object-fit:cover}.gallery-card .caption{padding:12px}.gallery-card b{display:block;color:var(--navy);font-size:13px}.gallery-card span{font-size:10px;color:var(--blue)}.album-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.album{background:#fff;border:1px solid var(--line);padding:15px;border-radius:8px;color:var(--navy);font-weight:800;font-size:12px}.album small{display:block;color:var(--muted);font-weight:500;margin-top:3px}
.faculty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 25px;margin-top:35px}.faculty-card{appearance:none;-webkit-appearance:none;width:100%;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;text-align:center;color:inherit;font:inherit;cursor:pointer}.faculty-card:hover,.faculty-card:focus{background:transparent;border:0;box-shadow:none;outline:none}.faculty-card:focus-visible .faculty-photo{outline:3px solid rgba(79,203,220,.55);outline-offset:5px}.faculty-photo{width:120px;height:120px;margin:auto;border-radius:50%;background:#e9f3f8;border:4px solid #e1edf3;display:grid;place-items:center;color:var(--blue);font-weight:800;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.faculty-card:hover .faculty-photo{transform:translateY(-3px);box-shadow:0 12px 28px rgba(6,39,74,.14)}.faculty-photo img{width:100%;height:100%;object-fit:cover}.faculty-card h3{font:800 14px Manrope;color:var(--navy);margin-top:12px}.faculty-card p{font-size:11px;color:var(--muted);margin-top:2px}.view-profile{display:inline-block;margin-top:8px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
/* Faculty profile modal */
body.modal-open{overflow:hidden}.faculty-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}.faculty-modal[hidden]{display:none!important}.faculty-modal-backdrop{position:absolute;inset:0;background:rgba(3,26,48,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.faculty-modal-panel{position:relative;z-index:1;width:min(900px,100%);max-height:min(88vh,820px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.3);padding:34px}.faculty-modal-close{position:absolute;right:16px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:#eef5f8;color:var(--navy);font-size:28px;line-height:1;cursor:pointer}.faculty-modal-close:hover{background:#dcecf2}.faculty-modal-header{display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:center;padding-right:42px;border-bottom:1px solid var(--line);padding-bottom:24px}.modal-avatar{width:110px;height:110px;border-radius:50%;overflow:hidden;background:#e9f3f8;border:4px solid #e1edf3;display:grid;place-items:center;color:var(--blue);font-weight:800}.modal-avatar img{width:100%;height:100%;object-fit:cover}.modal-initials{font:800 22px Manrope}.faculty-modal-header .section-kicker{text-align:left}.faculty-modal-header h2{font:800 30px Manrope;color:var(--navy);margin:4px 0}.faculty-modal-header p{font-size:13px;color:var(--muted)}.faculty-modal-body{padding-top:24px}.faculty-modal-body p,.faculty-modal-body li{font-size:13px;color:var(--muted);line-height:1.75}.faculty-modal-body h3{font:800 19px Manrope;color:var(--navy);margin:24px 0 9px}.faculty-modal-body ul,.faculty-modal-body ol{padding-left:21px}.faculty-modal-body li{margin:5px 0}.modal-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.modal-facts>div{padding:16px;background:#f5fafc;border:1px solid var(--line);border-radius:10px}.modal-facts strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:5px}.modal-facts span{display:block;font-size:12px;color:var(--muted);line-height:1.65}.modal-placeholder{margin-top:18px;padding:14px 16px;border-left:3px solid var(--gold);background:#fff9e9;color:#6e6241;font-size:12px;border-radius:0 7px 7px 0}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:35px}.timeline-card{background:#fff;border:1px solid var(--line);padding:22px;border-radius:8px}.timeline-card strong{font:800 28px Manrope;color:var(--blue)}.timeline-card h3{font-size:17px;margin:7px 0}.timeline-card p{font-size:12px;color:var(--muted)}
.banner{background:linear-gradient(100deg,#062b4e,#086a8d);color:#fff;text-align:center;padding:75px 0}.banner h2{color:#fff;font:800 42px Manrope}.banner p{max-width:680px;margin:12px auto 20px;color:#d7e9ef;font-size:14px}
.page-hero{background:linear-gradient(100deg,#052747,#0a6281);padding:70px 0;color:#fff}.page-hero h1{color:#fff;font:800 48px Manrope}.page-hero p{max-width:700px;color:#d6e8ef;margin-top:10px}.breadcrumb{font-size:11px;color:#9ed9e1;margin-bottom:10px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.contact-box{border:1px solid var(--line);padding:28px;border-radius:10px}.contact-box h3{font-size:20px;margin-bottom:10px}.contact-box p{font-size:13px;color:var(--muted);margin:7px 0}
footer{background:#031a30;color:#9fb8c7;padding:45px 0 18px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}.footer-brand{display:flex;gap:12px;align-items:center}.footer-brand img{width:65px;height:65px;object-fit:contain}.footer h3{color:#fff;font-size:15px;margin-bottom:10px}.footer p,.footer a{font-size:11px;display:block;margin:5px 0}.copy{border-top:1px solid #ffffff18;margin-top:25px;padding-top:12px;display:flex;justify-content:space-between;font-size:9px}.om-credit{text-align:right;margin-top:9px;font-size:10px}.om-credit a{color:#c7d8e3;font-weight:600}.om-credit a:hover{color:var(--cyan)}
.profile-layout{display:grid;grid-template-columns:300px 1fr;gap:42px;align-items:start;margin-top:35px}.profile-photo-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(6,39,74,.08)}.profile-photo-wrap img{width:100%;height:360px;object-fit:cover}.profile-country{padding:12px;text-align:center;font-size:12px;color:var(--blue);font-weight:700}.profile-content h2{font:800 32px Manrope;color:var(--navy);margin-bottom:5px}.profile-role{font-size:12px;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:15px}.profile-content p{font-size:14px;color:var(--muted)}.profile-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.profile-facts div{padding:16px;background:#fff;border:1px solid var(--line);border-radius:8px}.profile-facts strong{display:block;font-size:11px;color:var(--blue);text-transform:uppercase;margin-bottom:4px}.profile-facts span{font-size:12px;color:var(--muted)}.profile-section{margin-top:35px;padding-top:28px;border-top:1px solid var(--line)}.profile-section h3{font:800 22px Manrope;color:var(--navy);margin-bottom:13px}.profile-section ol,.profile-section ul{padding-left:21px;color:var(--muted);font-size:13px}.profile-section li{margin:7px 0}.source-note{font-size:11px;color:#718394;border-top:1px solid var(--line);margin-top:35px;padding-top:18px}
@media(max-width:950px){.menu{gap:12px}.menu a{display:none}.menu-btn{display:block}.stats{grid-template-columns:repeat(3,1fr)}.stat:nth-child(3){border-right:0}.cards,.dark-cards{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:1fr 1fr}.album-row{grid-template-columns:1fr 1fr}.faculty-grid{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:1fr 1fr}.profile-layout{grid-template-columns:230px 1fr}.faculty-modal-header{grid-template-columns:90px 1fr}.modal-avatar{width:90px;height:90px}}
@media(max-width:600px){.utility .container{justify-content:center}.utility span:last-child{display:none}header{height:78px}.brand img{width:70px;height:70px}.brand-title{font-size:14px}.brand-title small{font-size:8px}.hero{min-height:620px}.hero h1{font-size:45px}.hero h2{font-size:20px}.hero p{font-size:15px}.stats{grid-template-columns:1fr 1fr}.stat{padding:17px 5px}.split{grid-template-columns:1fr;gap:28px}.cards,.dark-cards,.gallery-grid,.timeline,.faculty-grid,.contact-grid{grid-template-columns:1fr}.gallery-card img{height:210px}.album-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.copy{display:block}.copy span{display:block;margin-top:5px}.om-credit{text-align:left}.page-hero h1{font-size:38px}.profile-layout{grid-template-columns:1fr}.profile-photo-wrap{max-width:330px;margin:auto}.profile-facts{grid-template-columns:1fr}.faculty-modal{padding:12px}.faculty-modal-panel{max-height:92vh;padding:24px 18px 22px;border-radius:12px}.faculty-modal-header{grid-template-columns:1fr;text-align:center;padding-right:0}.faculty-modal-header .section-kicker{text-align:center}.faculty-modal-header h2{font-size:25px}.modal-avatar{width:96px;height:96px;margin:auto}.modal-facts{grid-template-columns:1fr}.faculty-modal-close{right:10px;top:10px;width:36px;height:36px;font-size:24px}}