*{box-sizing:border-box;margin:0;padding:0}
.page{font-family:'Helvetica Neue',Arial,sans-serif;background:#FDFCF8;color:#374151}

/* NAV */
.nav{background:#0F2D52;display:flex;align-items:center;padding:0 48px;position:sticky;top:0;z-index:100}

.nav-link{font-size:13px;color:rgba(255,255,255,.7);padding:20px 15px;cursor:pointer;white-space:nowrap}
.nav-link.active{color:#fff;border-bottom:2px solid #B8860B}

a {
    text-decoration: none;
}

/* HERO — split layout */
/* HERO — split layout */
.hero{position:relative;min-height:480px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.hero-left{position:relative;background:#0B1E35;display:flex;align-items:center;padding:72px 48px 80px}
.hero-left-overlay{position:absolute;inset:0;background:rgba(8,18,34,.55)}
.hero-left-bg{position:absolute;inset:0;width:100%;height:100%;opacity:.05}
.hero-left-content{position:relative;z-index:2}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.bc-item{font-size:12px;color:rgba(255,255,255,.45);cursor:pointer}
.bc-sep{font-size:12px;color:rgba(255,255,255,.22)}
.bc-current{font-size:12px;color:#B8860B}
.hero-eyebrow{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#B8860B;margin-bottom:14px}
.hero-h1{font-family:Georgia,serif;font-size:34px;color:#fff;line-height:1.18;letter-spacing:-.3px;margin-bottom:16px}
.hero-sub{font-size:15px;color:rgba(255,255,255,.6);line-height:1.7}
/* RIGHT SIDE */
.hero-right{
    position:relative;
    overflow:hidden;
  }
  
  .hero-right img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
  }
  
  .hero-right-overlay{
    position:absolute;
    inset:0;
    background:rgba(15,45,82,.15);
  }
  
  .hero-right-label{
    position:absolute;
    bottom:16px;
    left:20px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.8);
    background:rgba(0,0,0,.30);
    padding:4px 10px;
    border-radius:3px;
  }

.hero-right-brief{position:absolute;top:14px;right:14px;font-size:10px;color:rgba(255,255,255,.45);background:rgba(0,0,0,.28);padding:3px 7px;border-radius:3px;font-style:italic}
.hero-ic{opacity:.15}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-actions{
  flex-direction:column;
  align-items:stretch;
}

.hero-actions a,
.hero-actions button,
.btn-gold,
.btn-ghost{
  width:100%;
}

.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);padding:12px 28px;font-size:14px;font-weight:500;border-radius:3px;cursor:pointer;font-family:inherit; margin-top: 15px; width:30%;}


/* STATS BAR */
.stats-bar{background:#fff;border-bottom:1px solid #E5E2D9;display:grid;grid-template-columns:repeat(5,1fr)}
.stat{text-align:center;padding:20px 14px;border-right:0.5px solid #E5E2D9}
.stat:last-child{border-right:none}
.stat-n{font-family:Georgia,serif;font-size:22px;color:#0F2D52;line-height:1}
.stat-l{font-size:14px;color:#6B7280;margin-top:4px;line-height:1.4}



/* SECTION */
.sec{padding:64px 48px}
.sec.alt{background:#fff}
.sec.tinted{background:#F8F7F4}
.sec.dark{background:#0F2D52}
.sec.city{background:#0B1E35}
.sec-h2{font-family:Georgia,serif;font-size:28px;color:#0F2D52;margin-bottom:12px;line-height:1.25}
.sec-h2.light{color:#fff}
.sec-lead{font-size:15px;color:#374151;line-height:1.75;max-width:700px;margin-bottom:36px}
.sec-lead.light{color:rgba(255,255,255,.65)}

/* ── SECTION 1: AUTh AT A GLANCE ── */
.glance-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.glance-text p{font-size:15px;color:#374151;line-height:1.75;margin-bottom:16px}
.glance-text p:last-child{margin-bottom:0}
.glance-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.glance-fact{background:#F8F7F4;border:0.5px solid #E5E2D9;border-radius:6px;padding:16px 18px}
.glance-fact-n{font-family:Georgia,serif;font-size:26px;color:#0F2D52;line-height:1;margin-bottom:4px}
.glance-fact-l{font-size:12px;color:#6B7280;line-height:1.4}

/* ── SECTION 2: RESEARCH ── */
.research-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.res-card{background:rgba(255,255,255,.07);border:0.5px solid rgba(255,255,255,.1);border-radius:6px;padding:20px}
.res-n{font-family:Georgia,serif;font-size:32px;color:#B8860B;line-height:1;margin-bottom:6px}
.res-l{font-size:12px;color:rgba(255,255,255,.55);line-height:1.55}
.research-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.res-highlight{background:rgba(255,255,255,.05);border:0.5px solid rgba(255,255,255,.08);border-radius:6px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.res-highlight-dot{width:8px;height:8px;border-radius:50%;background:#B8860B;margin-top:4px;flex-shrink:0}
.res-highlight-title{font-size:13px;font-weight:500;color:#fff;margin-bottom:3px}
.res-highlight-body{font-size:12px;color:rgba(255,255,255,.5);line-height:1.55}

/* ── SECTION 3: THREE DEPARTMENTS ── */
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dept-card{border-radius:6px;overflow:hidden;border:0.5px solid #E5E2D9}
.dept-card-header{padding:20px 20px 16px}
.dept-card-header.chem{background:#E8F0FE}
.dept-card-header.phys{background:#F1EFE8}
.dept-card-header.mech{background:#FEF9EC}
.dept-card-tag{font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
.dept-card-tag.chem{color:#185EA5}
.dept-card-tag.phys{color:#374151}
.dept-card-tag.mech{color:#B8860B}
.dept-card-name{font-family:Georgia,serif;font-size:17px;color:#0F2D52;line-height:1.3;margin-bottom:4px}
.dept-card-sub{font-size:12px;color:#6B7280}
.dept-card-body{padding:16px 20px 18px;background:#fff}
.dept-card-body p{font-size:13px;color:#374151;line-height:1.65;margin-bottom:12px}
.dept-card-stats{display:flex;gap:16px}
.dept-card-stat{font-size:12px;color:#6B7280}
.dept-card-stat strong{color:#0F2D52;font-weight:500}

/* ── SECTION 4: THESSALONIKI ── */
/* City hero — full width image row */
/* IMAGE ROWS */
.city-image-row{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:12px;
    margin-bottom:40px;
  }
  
  .city-image-row-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  
  /* IMAGE BOX */
  .city-img{
    position:relative;
    overflow:hidden;
    border-radius:6px;
  }
  
  /* COVER IMAGE */
  .city-img-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    transition:transform .6s ease;
  }
  
  .city-img:hover img{
    transform:scale(1.04);
  }
  
  /* OVERLAY */
  .city-img-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
      to top,
      rgba(8,18,34,.58),
      rgba(15,45,82,.10)
    );
  }
  
  /* LABEL */
  .city-img-label{
    position:absolute;
    left:12px;
    bottom:10px;
    font-size:10px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    background:rgba(0,0,0,.32);
    padding:4px 8px;
    border-radius:3px;
    z-index:2;
  }

/* City facts grid */
.city-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:40px}
.city-text p{font-size:15px;color:rgba(255,255,255,.72);line-height:1.75;margin-bottom:16px}
.city-text p:last-child{margin-bottom:0}
.city-cards{display:flex;flex-direction:column;gap:10px}
.city-card{background:rgba(255,255,255,.07);border:0.5px solid rgba(255,255,255,.1);border-radius:6px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.city-card-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.city-card-title{font-size:13px;font-weight:500;color:#fff;margin-bottom:3px}
.city-card-body{font-size:12px;color:rgba(255,255,255,.5);line-height:1.55}

/* Cost of living */
.cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.cost-card{background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.1);border-radius:6px;padding:16px 14px;text-align:center}
.cost-n{font-family:Georgia,serif;font-size:22px;color:#B8860B;line-height:1;margin-bottom:4px}
.cost-l{font-size:11px;color:rgba(255,255,255,.45);line-height:1.4}

/* Second image row — 2 images */
.city-image-row-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:12px;
  }
  
  .city-img{
    position:relative;
    overflow:hidden;
    border-radius:6px;
  }
  
  /* cover image */
  .city-img-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    transition:transform .6s ease;
  }
  
  .city-img:hover img{
    transform:scale(1.04);
  }
  
  /* overlay */
  .city-img-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
      to top,
      rgba(8,18,34,.56),
      rgba(15,45,82,.12)
    );
  }
  
  /* label */
  .city-img-label{
    position:absolute;
    left:12px;
    bottom:10px;
    font-size:10px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    background:rgba(0,0,0,.32);
    padding:4px 8px;
    border-radius:3px;
    z-index:2;
  }
/* ── SECTION 5: CAMPUS & STUDENT LIFE ── */
.campus-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
  }
  
  .campus-img-wrap{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  /* image boxes */
  .campus-img{
    position:relative;
    overflow:hidden;
    border-radius:6px;
  }
  
  /* cover image */
  .campus-img-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    transition:transform .6s ease;
  }
  
  .campus-img:hover img{
    transform:scale(1.04);
  }
  
  /* overlay */
  .campus-img-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
      to top,
      rgba(8,18,34,.55),
      rgba(15,45,82,.12)
    );
  }
  
  /* label */
  .campus-img-label{
    position:absolute;
    left:12px;
    bottom:10px;
    font-size:10px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    background:rgba(0,0,0,.32);
    padding:4px 8px;
    border-radius:3px;
    z-index:2;
  }
  
  /* text */
  .campus-text p{
    font-size:15px;
    color:#374151;
    line-height:1.75;
    margin-bottom:16px;
  }

/* ── SECTION 6: LEGACY ── */
.legacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.legacy-text p{font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:16px}
.legacy-timeline{display:flex;flex-direction:column;gap:0}
.timeline-item{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:16px 0;border-bottom:0.5px solid rgba(255,255,255,.08);align-items:start}
.timeline-item:last-child{border-bottom:none}
.timeline-year{font-family:Georgia,serif;font-size:18px;color:#B8860B;line-height:1}
.timeline-text{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6}
.timeline-text strong{color:#fff;font-weight:500}

/* APPLY BAND */
.apply-band{background:#0F2D52;padding:48px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.apply-eyebrow{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#B8860B;margin-bottom:10px}
.apply-title{font-family:Georgia,serif;font-size:22px;color:#fff;margin-bottom:8px;line-height:1.3}
.apply-sub{font-size:14px;color:rgba(255,255,255,.5);line-height:1.6}
.apply-actions{display:flex;gap:10px;flex-direction:column;align-items:flex-end}
.btn-gold-lg{background:#B8860B;color:#fff;border:none;padding:13px 28px;font-size:14px;font-weight:500;border-radius:3px;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-outline-lt{background:transparent;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.28);padding:10px 22px;font-size:13px;border-radius:3px;cursor:pointer;font-family:inherit;white-space:nowrap}

/* =========================================================
   ABOUT PAGE RESPONSIVE LAYER
   Add at very end of CSS
   ========================================================= */

   html,
   body{
     width:100%;
     overflow-x:hidden;
   }
   
   img,
   video,
   svg{
     max-width:100%;
   }
   
   @media(max-width:1200px){
   
     .nav,
     .sec,
     .apply-band{
       padding-left:32px;
       padding-right:32px;
     }
   
     .hero-left{
       padding-left:32px;
       padding-right:32px;
     }
   
     .research-grid,
     .dept-grid{
       grid-template-columns:1fr 1fr;
     }
   
     .cost-grid{
       grid-template-columns:1fr 1fr;
     }
   }
   
   @media(max-width:992px){
   
     .nav{
       padding-left:24px;
       padding-right:24px;
       overflow-x:auto;
       scrollbar-width:none;
     }
   
     .nav::-webkit-scrollbar{
       display:none;
     }
   
     .hero{
       grid-template-columns:1fr;
     }
   
     .hero-left{
       min-height:460px;
     }
   
     .hero-right{
       min-height:320px;
     }
   
     .stats-bar{
       grid-template-columns:repeat(3,1fr);
     }
   
     .stat:nth-child(3){
       border-right:none;
     }
   
     .stat:nth-child(-n+3){
       border-bottom:0.5px solid #E5E2D9;
     }
   
     .glance-grid,
     .city-grid,
     .campus-grid,
     .legacy-grid{
       grid-template-columns:1fr;
       gap:32px;
     }
   
     .research-highlights{
       grid-template-columns:1fr;
     }
   
     .city-image-row{
       grid-template-columns:1fr 1fr;
     }
   
     .city-image-row .city-img:first-child{
       grid-column:1 / -1;
     }
   
     .apply-band{
       grid-template-columns:1fr;
       gap:24px;
     }
   
     .apply-actions{
       align-items:flex-start;
       flex-direction:row;
       flex-wrap:wrap;
     }
   }
   
   @media(max-width:768px){
   
     .nav-link{
       font-size:12px;
       padding:18px 10px;
     }
   
     .hero-left{
       min-height:580px;
       padding:110px 22px 52px;
     }
   
     .hero-left-overlay{
       background:linear-gradient(
         to bottom,
         rgba(8,18,34,.38),
         rgba(8,18,34,.92)
       );
     }
   
     .breadcrumb{
       flex-wrap:wrap;
     }
   
     .hero-eyebrow{
       font-size:10px;
       line-height:1.6;
     }
   
     .hero-h1{
       font-size:28px !important;
       line-height:1.15;
     }
   
     .hero-sub{
       font-size:15px;
       line-height:1.65;
     }
   
     .hero-right{
       min-height:260px;
     }
   
     .stats-bar{
       grid-template-columns:1fr;
     }
   
     .stat{
       border-right:none;
       border-bottom:0.5px solid #E5E2D9;
     }
   
     .stat:last-child{
       border-bottom:none;
     }
   
     .sec{
       padding:56px 22px;
     }
   
     .sec-h2{
       font-size:26px;
     }
   
     .sec-lead{
       font-size:15px;
     }
   
     .glance-facts,
     .research-grid,
     .dept-grid,
     .cost-grid{
       grid-template-columns:1fr;
     }
   
     .dept-card-stats{
       flex-direction:column;
       gap:6px;
     }
   
     .city-image-row,
     .city-image-row-2{
       grid-template-columns:1fr;
     }
   
     .city-img[style*="height:320px"]{
       height:240px !important;
     }
   
     .city-img[style*="height:220px"]{
       height:200px !important;
     }
   
     .campus-img[style*="height:240px"]{
       height:220px !important;
     }
   
     .campus-img[style*="height:160px"]{
       height:190px !important;
     }
   
     .timeline-item{
       grid-template-columns:1fr;
       gap:6px;
     }
   
     .apply-band{
       padding:42px 22px;
     }
   
     .apply-actions{
       flex-direction:column;
       align-items:stretch;
     }
   
     .apply-actions button,
     .btn-gold-lg,
     .btn-outline-lt{
       width:100%;
       text-align:center;
     }
   }
   
   @media(max-width:480px){
   
     .hero-left{
       padding-left:18px;
       padding-right:18px;
     }
   
     .hero-h1{
       font-size:25px !important;
     }
   
     .hero-sub{
       font-size:14px;
     }
   
     .sec,
     .apply-band{
       padding-left:18px;
       padding-right:18px;
     }
   
     .sec-h2{
       font-size:23px;
     }
   
     .glance-fact-n,
     .res-n{
       font-size:24px;
     }
   
     .city-card,
     .res-highlight{
       padding:15px;
     }
   
     .city-img[style*="height:320px"],
     .city-img[style*="height:220px"]{
       height:190px !important;
     }
   
     .apply-title{
       font-size:20px;
     }
   }