:root{
    --ink:#0F2547; --ink-soft:#1A3358; --cobalt:#1E4D8C; --cobalt-light:#3E6FB0;
    --brass:#B08D4F; --brass-light:#D3B679; --parchment:#F3EEE1; --paper:#FBFAF6;
    --ash:#5B6472; --line:#E1DACB; --white:#FFFFFF; --radius:4px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper); color:var(--ink); font-family:'Source Sans 3', sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
  a{color:inherit; text-decoration:none;}
  .mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
  img{max-width:100%; display:block;}

  /* ---------- Top strip ---------- */
  .top-strip{background:var(--ink); color:var(--parchment); font-family:'IBM Plex Mono', monospace; font-size:12.5px;}
  .top-strip .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 32px;}
  .top-strip a{opacity:.9;} .top-strip a:hover{opacity:1; text-decoration:underline;}
  .top-strip .sep{opacity:.4; margin:0 10px;}
  .top-strip .social a{margin-left:14px;}

  /* ---------- Header ---------- */
  header.site{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
  header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 32px;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand .mark{width:40px; height:40px; flex-shrink:0;}
  .brand .word{font-family:'Fraunces', serif; font-weight:700; font-size:19px; line-height:1.1;}
  .brand .word small{display:block; font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:9.5px; letter-spacing:0.06em; color:var(--ash); text-transform:uppercase; margin-top:2px;}
  nav.main{display:flex; align-items:center; gap:26px;}
  nav.main a{font-size:14px; font-weight:600; color:var(--ink-soft); padding:6px 0; border-bottom:2px solid transparent;}
  nav.main a:hover{border-color:var(--brass); color:var(--ink);}
  .header-cta{background:var(--brass); color:#fff; padding:10px 22px; font-weight:700; font-size:13.5px; border-radius:var(--radius);}
  .header-cta:hover{background:var(--ink);}
  .nav-toggle{display:none; background:none; border:1px solid var(--line); padding:8px 10px; cursor:pointer;}
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{display:block; width:20px; height:2px; background:var(--ink); position:relative;}
  .nav-toggle span::before, .nav-toggle span::after{content:""; position:absolute;}
  .nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}

  /* ---------- Hero ---------- */
  .hero{position:relative; min-height:640px; display:flex; align-items:center;
    background:linear-gradient(120deg, rgba(15,37,71,0.88) 10%, rgba(15,37,71,0.55) 55%, rgba(15,37,71,0.25) 100%), url('https://picsum.photos/seed/szabist-campus/1800/1000') center/cover no-repeat;
  }
  .hero-inner{position:relative; z-index:2; padding:110px 0 150px;}
  .hero .eyebrow{color:var(--brass-light); font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:20px;}
  .hero .eyebrow::before{content:""; width:26px; height:1px; background:var(--brass-light);}
  .hero h1{color:#fff; font-size:clamp(34px,5vw,58px); line-height:1.08; max-width:15ch; margin-bottom:22px;}
  .hero h1 em{font-style:italic; color:var(--brass-light);}
  .hero p.lede{color:rgba(255,255,255,0.85); font-size:18px; max-width:48ch; margin-bottom:32px;}
  .cta-row{display:flex; gap:16px; flex-wrap:wrap;}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 28px; font-weight:700; font-size:14.5px; border-radius:var(--radius); transition:all .18s ease;}
  .btn-primary{background:var(--brass); color:#fff;}
  .btn-primary:hover{background:#fff; color:var(--ink);}
  .btn-outline{border:1.5px solid rgba(255,255,255,0.6); color:#fff;}
  .btn-outline:hover{border-color:#fff; background:rgba(255,255,255,0.1);}

  /* Stat cards overlapping hero bottom */
  .stat-cards{position:relative; z-index:3; margin-top:-70px; margin-bottom:60px;}
  .stat-cards .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px rgba(15,37,71,0.18);}
  .stat-card{background:#fff; padding:32px 28px; display:flex; gap:18px; align-items:flex-start;}
  .stat-card .ic{width:44px; height:44px; flex-shrink:0; color:var(--brass);}
  .stat-card h4{font-size:16.5px; margin-bottom:6px;}
  .stat-card p{font-size:13.5px; color:var(--ash);}

  section{padding:88px 0;}
  section.tight{padding:60px 0;}
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .eyebrow-sm{font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.1em; color:var(--brass); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:10px;}
  .section-head.center .eyebrow-sm{justify-content:center;}
  .eyebrow-sm::before{content:""; width:22px; height:1px; background:var(--brass);}
  .section-head h2{font-size:clamp(28px,3.2vw,36px); line-height:1.15;}
  .section-head p{color:var(--ash); font-size:16px; margin-top:14px;}

  /* ---------- About ---------- */
  .about .grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:60px; align-items:center;}
  .about-media{position:relative;}
  .about-media img{border-radius:var(--radius); width:100%;}
  .about-media .badge{position:absolute; bottom:-24px; left:-24px; background:var(--ink); color:#fff; padding:20px 26px; border-radius:var(--radius);}
  .about-media .badge .n{font-family:'Fraunces', serif; font-weight:700; font-size:30px; color:var(--brass-light);}
  .about-media .badge .l{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.7); margin-top:2px;}
  .about-body p{color:var(--ink-soft); font-size:16.5px; margin-bottom:20px;}
  .check-list{list-style:none; margin:24px 0; display:grid; gap:12px;}
  .check-list li{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--ink-soft);}
  .check-list li .dot{width:22px; height:22px; border-radius:50%; background:var(--parchment); border:1px solid var(--brass); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--brass);}

  /* ---------- Institutions (faculties) grid ---------- */
  .inst-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
  .inst-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:box-shadow .2s ease, transform .2s ease;}
  .inst-card:hover{box-shadow:0 16px 40px rgba(15,37,71,0.12); transform:translateY(-4px);}
  .inst-card .photo{aspect-ratio:4/3; overflow:hidden;}
  .inst-card .photo img{width:100%; height:100%; object-fit:cover;}
  .inst-card .body{padding:24px 22px;}
  .inst-card .tag{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--brass);}
  .inst-card h3{font-size:19px; margin:8px 0 8px;}
  .inst-card p{font-size:13.5px; color:var(--ash); margin-bottom:16px;}
  .inst-card .link{font-size:13px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px;}
  .inst-card .link:hover{color:var(--cobalt);}

  /* ---------- Gallery mosaic ---------- */
  .gallery-mosaic{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:10px;}
  .gallery-mosaic img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius);}
  .gallery-mosaic .g1{grid-column:span 2; grid-row:span 2;}
  .gallery-mosaic .g4{grid-column:span 2;}

  /* ---------- Achievements band ---------- */
  .achieve{background:var(--ink); color:#fff;}
  .achieve .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .achieve-item{text-align:center; border-left:1px solid rgba(255,255,255,0.14); padding:8px 16px;}
  .achieve-item:first-child{border-left:0;}
  .achieve-item .n{font-family:'Fraunces', serif; font-weight:700; font-size:40px; color:var(--brass-light); line-height:1;}
  .achieve-item .l{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.65); margin-top:10px;}

  /* ---------- Testimonials ---------- */
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .testi-card{background:var(--parchment); border-radius:var(--radius); padding:30px 26px;}
  .testi-card .stars{color:var(--brass); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
  .testi-card blockquote{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:20px;}
  .testi-who{display:flex; align-items:center; gap:12px;}
  .testi-who img{width:44px; height:44px; border-radius:50%; object-fit:cover;}
  .testi-who .name{font-weight:700; font-size:14px;}
  .testi-who .role{font-size:12px; color:var(--ash);}

  /* ---------- Leadership / professors grid ---------- */
  .lead-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
  .lead-card .photo{aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; margin-bottom:14px;}
  .lead-card .photo img{width:100%; height:100%; object-fit:cover;}
  .lead-card h4{font-size:15.5px; margin-bottom:2px;}
  .lead-card p{font-size:12.5px; color:var(--ash);}

  /* ---------- Admission CTA ---------- */
  .admission{background:linear-gradient(120deg, rgba(15,37,71,0.92), rgba(30,77,140,0.82)), url('https://picsum.photos/seed/szabist-admission/1600/700') center/cover no-repeat; color:#fff;}
  .admission .wrap{display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center;}
  .admission h2{color:#fff; font-size:clamp(26px,3.2vw,36px); margin-bottom:16px;}
  .admission p{color:rgba(255,255,255,0.85); font-size:16px; margin-bottom:26px; max-width:44ch;}
  .admission-card{background:#fff; border-radius:var(--radius); padding:32px; color:var(--ink);}
  .admission-card h4{font-size:17px; margin-bottom:16px;}
  .admission-card .row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;}
  .admission-card .row:last-child{border-bottom:0;}

  /* ---------- News ---------- */
  .news-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
  .news-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff;}
  .news-card .photo{aspect-ratio:16/10; overflow:hidden;}
  .news-card .photo img{width:100%; height:100%; object-fit:cover;}
  .news-card .body{padding:20px;}
  .news-card .tag{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; color:var(--brass); letter-spacing:0.05em;}
  .news-card h4{font-size:15.5px; margin:10px 0 8px; line-height:1.3;}
  .news-card .date{font-size:12px; color:var(--ash);}

  /* ---------- Footer ---------- */
  footer{background:var(--ink); color:rgba(255,255,255,0.75);}
  .foot-top{border-bottom:1px solid rgba(255,255,255,0.12);}
  .foot-top .wrap{display:flex; justify-content:space-between; align-items:center; padding:36px 32px; flex-wrap:wrap; gap:20px;}
  .foot-top h3{color:#fff; font-size:22px;}
  .newsletter-form{display:flex; gap:10px;}
  .newsletter-form input{padding:12px 16px; border-radius:var(--radius); border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); color:#fff; min-width:240px;}
  .newsletter-form input::placeholder{color:rgba(255,255,255,0.5);}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding:56px 0;}
  .foot-brand .word{color:#fff; font-family:'Fraunces', serif; font-weight:700; font-size:19px;}
  .foot-brand p{font-size:14px; margin-top:14px; max-width:34ch; color:rgba(255,255,255,0.6);}
  footer h5{font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--brass-light); margin-bottom:16px; font-weight:500;}
  footer ul{list-style:none;}
  footer li{margin-bottom:10px; font-size:14.5px;}
  footer a:hover{color:#fff; text-decoration:underline;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,0.12); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,0.5);}
  .foot-social{display:flex; gap:16px;}

  @media (max-width:1000px){
    nav.main{display:none;}
    .nav-toggle{display:block;}
    .header-cta{display:none;}
    .stat-cards .wrap{grid-template-columns:1fr;}
    .about .grid{grid-template-columns:1fr; gap:40px;}
    .inst-grid{grid-template-columns:1fr 1fr;}
    .gallery-mosaic{grid-template-columns:repeat(2,1fr);}
    .achieve .wrap{grid-template-columns:1fr 1fr; row-gap:28px;}
    .achieve-item{border-left:0;}
    .testi-grid{grid-template-columns:1fr;}
    .lead-grid{grid-template-columns:repeat(3,1fr);}
    .admission .wrap{grid-template-columns:1fr;}
    .news-grid{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .inst-grid{grid-template-columns:1fr;}
    .lead-grid{grid-template-columns:repeat(2,1fr);}
    .news-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .foot-top .wrap{flex-direction:column; align-items:flex-start;}
  }