/* =========================================================
   SECTION A — BASE & TOKENS
   (when extracting partials later, this goes into style.css)
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#4D0D09 #FBF8F4;
}
html{scroll-behavior:smooth}
img,video{max-width:100%;display:block}
button,a{-webkit-tap-highlight-color:transparent}

:root{
  --primary:#9A2921;
  --primary-dark:#4D0D09;
  --primary-deep:#371311;
  --primary-deeper:#2A0908;
  --primary-bright:#C7372C;
  --accent-warm:#D4A87C;
  --accent-warm-soft:#E8D2B8;
  --accent-warm-deep:#8A5E36;

  --text:#1c1c1c;
  --text-soft:#374151;
  --text-mute:#6B7280;

  --bg:#FBF8F4;
  --bg-card:#F8F7F4;
  --line:#E5E2D9;
  --line-strong:rgba(0,0,0,.14);

  --motion-ease:cubic-bezier(.22, 1, .36, 1);
  --motion-slow:900ms;
  --motion-med:700ms;
  --motion-fast:420ms;
}

body{
  font-family:'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text-soft);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.site{
  font-family:'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text-soft);
}
a{color:inherit;text-decoration:none}


/* =========================================================
   SECTION C — HERO (SPLIT PANEL)
   Custom to SESHP. Two columns desktop, stacked mobile,
   hover-to-play video on desktop, autoplay loop on mobile.
   ========================================================= */
.hero-split{
  position:relative;
  min-height:580px;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--primary-deeper);
  overflow:hidden;
}
.hero-panel{
  position:relative;
  overflow:hidden;
  min-height:580px;
  padding:90px 56px 80px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  cursor:default;
}
.hero-panel-still,
.hero-panel-hover-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:opacity .7s var(--motion-ease), transform .9s var(--motion-ease);
}



.hero-panel-still{
  z-index:0;
  opacity:1;
}

.hero-panel-hover-image{
  z-index:1;
  opacity:0;
}

.hero-panel-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s var(--motion-ease), transform .9s var(--motion-ease);
  z-index:1;
}
.hero-panel-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(42,9,8,0.42) 0%, rgba(42,9,8,0.82) 100%);
  z-index:2;
}
.hero-panel-content{
  position:relative;
  z-index:3;
  max-width:520px;
}
@media (hover:hover) and (min-width:993px){

  /* LEFT PANEL: image changes to another image */
  .hero-panel--image-hover:hover .hero-panel-still{
    opacity:0;
    transform:scale(1.04);
  }

  .hero-panel--image-hover:hover .hero-panel-hover-image{
    opacity:1;
    transform:scale(1.04);
  }

  /* RIGHT PANEL: image changes to video */
  .hero-panel--video-hover:hover .hero-panel-still{
    opacity:0;
    transform:scale(1.04);
  }

  .hero-panel--video-hover:hover .hero-panel-video{
    opacity:1;
    transform:scale(1.04);
  }
}

@media (hover:none), (max-width:992px){

  .hero-panel-still{
    opacity:1;
  }

  .hero-panel-hover-image,
  .hero-panel-video{
    opacity:0;
  }
}

.hero-panel-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-warm);
  margin-bottom:22px;
  line-height:1;
}
.hero-panel-eyebrow::before{
  content:"";
  width:36px;
  height:1px;
  flex-shrink:0;
  background:linear-gradient(
    90deg,
    var(--accent-warm) 0%,
    var(--accent-warm-deep) 45%,
    rgba(212,168,124,0) 100%
  );
}
.hero-panel h1{
  font-family:"Inter Tight",sans-serif;
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:800;
  margin-bottom:20px;
  color:#fff;
}
.hero-panel-sub{
  color:rgba(255,255,255,.82);
  font-size:16px;
  max-width:460px;
  line-height:1.6;
  margin-bottom:30px;
}
.hero-panel-meta{
  font-size:11px;
  color:rgba(255,255,255,.5);
  letter-spacing:.08em;
  line-height:1.7;
}
.hero-panel-meta strong{color:rgba(255,255,255,.78);font-weight:600}
.hero-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(255,255,255,.12);
  z-index:4;
}
.hero-panel-dot{
  position:absolute;
  top:22px;
  right:22px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.7);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
}
.hero-panel-dot::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-warm);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(212,168,124,.55)}
  70%{box-shadow:0 0 0 10px rgba(212,168,124,0)}
  100%{box-shadow:0 0 0 0 rgba(212,168,124,0)}
}
@media(max-width:992px){
  .hero-split{grid-template-columns:1fr;min-height:auto}
  .hero-panel{min-height:480px;padding:70px 32px 60px}
  .hero-divider{display:none}
  .hero-panel-dot{display:none}
}
@media(max-width:600px){
  .hero-panel{min-height:420px;padding:54px 22px 48px}
}

/* =========================================================
   SECTION D — SECTIONS, EYEBROW, BASE TYPOGRAPHY
   Ported from Materials landing-style with burgundy palette
   ========================================================= */
.sec{padding:84px 48px}
.sec.alt{background:#fff}
.sec.dark{background:var(--primary-deeper)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:14px;
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:42px;
  height:1px;
  flex-shrink:0;
  background:linear-gradient(
    90deg,
    var(--primary-bright) 0%,
    var(--primary) 45%,
    rgba(154,41,33,0) 100%
  );
}
.eyebrow.light-eyebrow{color:var(--accent-warm)}
.eyebrow.light-eyebrow::before{
  background:linear-gradient(
    90deg,
    var(--accent-warm) 0%,
    var(--accent-warm-deep) 45%,
    rgba(212,168,124,0) 100%
  );
}

.sec-h2{
  font-family:"Inter Tight",sans-serif;
  font-size:34px;
  font-weight:800;
  color:var(--primary-deep);
  margin-bottom:14px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.sec-h2.light{color:#fff}
.sec-lead{
  font-size:16px;
  color:var(--text-soft);
  line-height:1.7;
  max-width:680px;
  margin-bottom:44px;
}
.sec-lead.light{color:rgba(255,255,255,.7)}

/* =========================================================
   SECTION E — QUOTE BAND (replaces stats on homepage)
   The sole serif moment on the site.
   ========================================================= */
.quote-band{
  background:linear-gradient(90deg, var(--primary-deep), var(--primary-dark));
  color:#fff;
  padding:54px 48px;
  overflow:hidden;
}
.quote-wrap{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:34px;
  align-items:center;
}
.quote-tag{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:#f0c9c2;
  font-weight:700;
}
.quote-band blockquote{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.7rem, 3.4vw, 2.9rem);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:600;
}
@media(max-width:760px){
  .quote-band{padding:42px 22px}
  .quote-wrap{grid-template-columns:1fr;gap:14px}
}

/* =========================================================
   SECTION F — FACULTY (light variant for SESHP homepage)
   Materials uses dark background; SESHP uses light cards
   over warm bg to let real photos breathe.
   ========================================================= */
.fac-section{background:var(--bg)}
.fac-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.fac-card{
  background:#fff;
  border:0.5px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  transition:transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.fac-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(55,19,17,.10);
}
.fac-img{
  position:relative;
  aspect-ratio:1.25 / 1;
  background:var(--bg-card);
  overflow:hidden;
}
.fac-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1000ms var(--motion-ease);
}
.fac-card:hover .fac-img img{transform:scale(1.045)}
.fac-dept-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(154,41,33,.85);
  padding:7px 14px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  z-index:2;
}
.fac-body{padding:22px 22px 24px}
.fac-name{
  font-family:"Inter Tight",sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--primary-deep);
  margin-bottom:4px;
  line-height:1.2;
}
.fac-role{
  font-size:12px;
  color:var(--primary);
  font-weight:600;
  letter-spacing:.04em;
  margin-bottom:12px;
}
.fac-area{
  font-size:13px;
  color:var(--text-soft);
  line-height:1.6;
}
.fac-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:36px;
}

/* Top-2% Elsevier highlight badge on faculty cards.
   Reserved for verified Top-2% scientists only. */
.fac-card.fac-top2{
  position:relative;
}
.fac-top2-badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:rgba(255,255,255,.94);
  border:0.5px solid rgba(154,41,33,.18);
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--primary-dark);
  box-shadow:0 4px 12px rgba(55,19,17,.10);
}
.fac-top2-badge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
}
.fac-top2-badge strong{
  font-weight:700;
  color:var(--primary);
}

/* Credibility strip below the faculty grid — borrowed from Materials' .fac-context.
   Source attribution + stat + caption. Used when the section has
   enough Top-2% faculty to justify a context strip. */
.fac-context{
  margin-top:36px;
  padding-top:36px;
  border-top:0.5px solid var(--line);
}
.fac-context-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:18px;
}
.fac-context-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.fac-context-card{
  background:#fff;
  border:0.5px solid var(--line);
  border-radius:6px;
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
}
.fac-context-source{
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  line-height:1.4;
  margin-bottom:16px;
}
.fac-context-stat{
  font-family:"Inter Tight",sans-serif;
  font-size:38px;
  font-weight:800;
  color:var(--primary-deep);
  line-height:1;
  letter-spacing:-.035em;
  margin-bottom:8px;
}
.fac-context-line{
  font-family:"Inter Tight",sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
  margin-bottom:10px;
}
.fac-context-caption{
  font-size:11.5px;
  color:var(--text-mute);
  line-height:1.55;
  margin-top:auto;
  padding-top:6px;
}

/* =========================================================
   SECTION F2 — PROGRAMME SUMMARY
   Ported from Materials' .prog-wrap / .prog-bsc / .prog-master pattern
   with burgundy palette. Opens the homepage main content with
   a light summary of WHAT the bachelor is, before introducing
   the people and the schools.
   ========================================================= */
.prog-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:stretch;
}
.prog-bsc{
  background:var(--bg-card);
  border:0.5px solid var(--line);
  border-radius:8px;
  padding:32px;
  position:relative;
  overflow:hidden;
}
.prog-bsc-num{
  font-family:"Inter Tight",sans-serif;
  font-size:90px;
  font-weight:800;
  color:rgba(154,41,33,.10);
  position:absolute;
  bottom:-14px;
  right:18px;
  line-height:1;
  letter-spacing:-.04em;
  user-select:none;
}
.prog-bsc-badge{
  display:inline-block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(154,41,33,.08);
  color:var(--primary);
  padding:5px 11px;
  border-radius:3px;
  margin-bottom:16px;
}
.prog-bsc-title{
  font-family:"Inter Tight",sans-serif;
  font-size:22px;
  font-weight:800;
  color:var(--primary-deep);
  margin-bottom:8px;
  line-height:1.2;
  letter-spacing:-.025em;
}
.prog-bsc-ects{
  font-size:13px;
  color:var(--text-mute);
  margin-bottom:18px;
}
.prog-bsc-list{
  list-style:none;
  padding:0;
  position:relative;
  z-index:1;
}
.prog-bsc-list li{
  font-size:13px;
  color:var(--text-soft);
  padding:9px 0;
  border-bottom:0.5px solid var(--line);
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.5;
}
.prog-bsc-list li:last-child{border-bottom:none}
.prog-bsc-list li::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
  margin-top:7px;
  flex-shrink:0;
}

.prog-master{
  background:var(--primary-deeper);
  border-radius:8px;
  padding:36px;
  position:relative;
  overflow:hidden;
}
.prog-master-accent{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--accent-warm);
}
.prog-master-num{
  font-family:"Inter Tight",sans-serif;
  font-size:110px;
  font-weight:800;
  color:rgba(255,255,255,.04);
  position:absolute;
  bottom:-22px;
  right:14px;
  line-height:1;
  letter-spacing:-.04em;
  user-select:none;
}
.prog-master-badge{
  display:inline-block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(212,168,124,.16);
  color:var(--accent-warm);
  padding:5px 11px;
  border-radius:3px;
  margin-bottom:16px;
}
.prog-master-title{
  font-family:"Inter Tight",sans-serif;
  font-size:24px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
  line-height:1.2;
  letter-spacing:-.025em;
}
.prog-master-ects{
  font-size:13px;
  color:rgba(255,255,255,.55);
  margin-bottom:22px;
}
.prog-master-list{
  list-style:none;
  padding:0;
  margin-bottom:24px;
  position:relative;
  z-index:1;
}
.prog-master-list li{
  font-size:13px;
  color:rgba(255,255,255,.82);
  padding:9px 0;
  border-bottom:0.5px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.5;
}
.prog-master-list li:last-child{border-bottom:none}
.prog-master-list li::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-warm);
  margin-top:7px;
  flex-shrink:0;
}
.prog-master-hl{
  background:rgba(212,168,124,.12);
  border:0.5px solid rgba(212,168,124,.3);
  border-radius:4px;
  padding:14px 16px;
  margin-top:20px;
  position:relative;
  z-index:1;
}
.prog-master-hl p{
  font-size:12px;
  color:rgba(255,255,255,.7);
  line-height:1.6;
}
.prog-master-hl strong{color:var(--accent-warm);font-weight:600}

/* =========================================================
   SECTION G — DEPARTMENT/SCHOOL ROWS
   Restructured from Materials' original .dept-row so the CONTENT CARD
   sits in the MIDDLE COLUMN on every row. This aligns the school-info
   block vertically across both Thessaloniki and Serres rows.

   Row 1 (standard, Thessaloniki):  main image (5fr) · content (4fr) · image stack (3fr)
   Row 2 (mirrored, Serres):        image stack (3fr) · content (4fr) · main image (5fr)

   Middle column is 4fr in both — content cards align exactly.
   ========================================================= */
.dept-row{
  display:grid;
  grid-template-columns:5fr 4fr 3fr;
  gap:12px;
  align-items:stretch;
  padding:18px 0;
  overflow:visible;
}
.dept-img-main{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-radius:8px;
  background:#C8C4B8;
}
.dept-img-main-bg{position:absolute;inset:0}
.dept-img-main-bg img,
.dept-img-main-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1000ms var(--motion-ease);
}
.dept-img-main:hover .dept-img-main-bg img,
.dept-img-main:hover .dept-img-main-bg video{transform:scale(1.045)}
.dept-img-main-overlay{
  position:absolute;
  inset:0;
  background:rgba(42,9,8,.18);
  z-index:1;
}
.dept-img-main-label{
  position:absolute;
  bottom:14px;
  left:14px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.32);
  padding:5px 10px;
  border-radius:3px;
  z-index:2;
}

.dept-imgs-stack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:12px;
}
.dept-img-sm{
  position:relative;
  overflow:hidden;
  min-height:174px;
  border-radius:8px;
  background:#D6D2C7;
}
.dept-img-sm-bg{position:absolute;inset:0}
.dept-img-sm-bg img,
.dept-img-sm-bg video {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1000ms var(--motion-ease);
}
.dept-img-sm:hover .dept-img-sm-bg img{transform:scale(1.045)}
.dept-img-sm-overlay{
  position:absolute;
  inset:0;
  background:rgba(42,9,8,.12);
  z-index:1;
}

.dept-content{
  padding:28px 26px;
  border:0.5px solid var(--line);
  border-radius:8px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:box-shadow var(--motion-fast) var(--motion-ease);
}
.dept-content:hover{
  box-shadow:0 18px 44px rgba(55,19,17,.08);
}
.dept-name{
  font-family:"Inter Tight",sans-serif;
  font-size:22px;
  font-weight:800;
  color:var(--primary-deep);
  margin-bottom:8px;
  line-height:1.2;
  letter-spacing:-.025em;
}
.dept-sub{
  font-size:11px;
  color:var(--primary);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.dept-desc{
  font-size:13.5px;
  color:var(--text-soft);
  line-height:1.65;
  margin-bottom:22px;
}
.dept-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:24px;
}
.dept-stat{
  background:var(--bg-card);
  border:0.5px solid var(--line);
  border-radius:6px;
  padding:12px 14px;
}
.dept-stat-n{
  font-family:"Inter Tight",sans-serif;
  font-size:22px;
  font-weight:800;
  color:var(--primary-deep);
  line-height:1;
  letter-spacing:-.03em;
}
.dept-stat-l{
  font-size:11px;
  color:var(--text-mute);
  margin-top:5px;
  line-height:1.4;
}
.dept-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--primary);
  border:1px solid var(--primary);
  padding:10px 18px;
  border-radius:3px;
  cursor:pointer;
  background:transparent;
  align-self:flex-start;
  text-decoration:none;
  transition:background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.dept-cta:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px);
}

/* MIRRORED variant — used for the Serres row.
   Reverses to: image stack (3fr) · content (4fr) · main image (5fr).
   Middle column stays at 4fr so the content card aligns vertically
   with the standard row's content card on the page above.

   NOTE: .dept-content keeps the same justify-content:space-between
   inherited from the base rule — header block sits at top, CTA at
   bottom, in BOTH rows. This makes the two content cards visually
   symmetrical when stacked vertically. */
.dept-row.mirrored{
  grid-template-columns:5fr 4fr 3fr;
}

/* =========================================================
   SECTION H — NETWORK / PROFESSIONAL CONNECTIONS
   Dark band. Statistic cards over imagery.
   ========================================================= */
.network-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:36px;
}
.network-card{
  background:rgba(255,255,255,.04);
  border:0.5px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:24px 22px;
}
.network-n{
  font-family:"Inter Tight",sans-serif;
  font-size:36px;
  font-weight:800;
  color:#fff;
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:10px;
}
.network-l{
  font-family:"Inter Tight",sans-serif;
  font-size:13.5px;
  color:rgba(255,255,255,.84);
  line-height:1.4;
  margin-bottom:8px;
  font-weight:600;
}
.network-d{
  font-size:12px;
  color:rgba(255,255,255,.5);
  line-height:1.5;
}

.network-images{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:12px;
  margin-top:8px;
}
.network-img{
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:rgba(255,255,255,.06);
}
.network-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1000ms var(--motion-ease);
}
.network-img:hover img{transform:scale(1.045)}

/* =========================================================
   SECTION I — APPLIED PREPARATION
   Image-left / text-right pattern from Materials.
   ========================================================= */
.applied-grid{
  display:grid;
  grid-template-columns:6fr 5fr;
  gap:36px;
  align-items:center;
}
.applied-images{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:240px 240px;
  gap:10px;
}
.applied-img-main{
  grid-row:span 2;
  border-radius:8px;
  overflow:hidden;
  background:#D6D2C7;
  position:relative;
}
.applied-img-sm{
  border-radius:8px;
  overflow:hidden;
  background:#D6D2C7;
  position:relative;
}
.applied-img-main img,
.applied-img-sm img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1000ms var(--motion-ease);
}
.applied-img-main:hover img,
.applied-img-sm:hover img{transform:scale(1.045)}

.applied-body h3{
  font-family:"Inter Tight",sans-serif;
  font-size:30px;
  color:var(--primary-deep);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:16px;
}
.applied-body p{
  font-size:15px;
  color:var(--text-soft);
  line-height:1.75;
  margin-bottom:18px;
}
.applied-points{
  list-style:none;
  padding:0;
  display:grid;
  gap:12px;
  margin-top:10px;
  margin-bottom:28px;
}
.applied-points li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  color:var(--text-soft);
  line-height:1.6;
}
.applied-points li strong{color:var(--primary-dark);font-weight:600}
.applied-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--primary);
}

/* =========================================================
   SECTION J — IMPACT NEWS
   News card pattern: image on top, body below.
   ========================================================= */
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.news-card{
  background:#fff;
  border:0.5px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(55,19,17,.10);
}
.news-img{
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--bg-card);
}
.news-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1000ms var(--motion-ease);
}
.news-card:hover .news-img img{transform:scale(1.045)}
.news-body{
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.news-tag{
  display:inline-block;
  align-self:flex-start;
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(154,41,33,.1);
  color:var(--primary);
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:14px;
}
.news-title{
  font-family:"Inter Tight",sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--primary-deep);
  margin-bottom:10px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.news-excerpt{
  font-size:13.5px;
  color:var(--text-soft);
  line-height:1.65;
  margin-bottom:16px;
}
.news-link{
  margin-top:auto;
  font-size:13px;
  font-weight:600;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  gap:8px;
  letter-spacing:.02em;
  transition:gap var(--motion-fast) var(--motion-ease);
}
.news-link::after{
  content:"→";
  transition:transform var(--motion-fast) var(--motion-ease);
}
.news-link:hover{gap:12px}


/* =========================================================
   SECTION — LIFE IN THESSALONIKI
   Editorial split layout, adapted to current brand identity
   ========================================================= */

   .city-place{
    padding:0;
    background:var(--bg-soft);
  }
  
  .city-place-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:720px;
  }
  
  .city-place-image-wrap{
    position:relative;
    overflow:hidden;
    margin:0;
  }
  
  .city-place-img-frame{
    position:relative;
    height:100%;
    min-height:720px;
    overflow:hidden;
    background:#C8C4B8;
  }
  
  .city-place-img-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 1200ms var(--motion-ease);
  }
  
  .city-place-image-wrap:hover img{
    transform:scale(1.045);
  }
  
  .city-place-overlay{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(42,9,8,.08), rgba(42,9,8,.22)),
      rgba(42,9,8,.12);
    z-index:1;
  }
  
  .city-place-content{
    padding:80px 64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  
  .city-place-h2{
    margin-bottom:22px;
  }
  
  .city-place-h2 span{
    font-style:italic;
    color:var(--primary);
  }
  
  .city-place-body{
    font-size:14.5px;
    line-height:1.75;
    color:var(--text-soft);
    margin-bottom:34px;
    max-width:520px;
  }
  
  .city-place-features-section + .city-place-features-section{
    margin-top:30px;
  }
  
  .city-place-features-label{
    font-size:10px;
    color:var(--primary);
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:10px;
  }
  
  .city-place-features{
    border-top:1.5px solid var(--primary-deep);
  }
  
  .city-place-feature{
    padding:13px 0;
    border-bottom:0.5px solid var(--line);
    display:grid;
    grid-template-columns:115px 1fr;
    align-items:baseline;
    gap:22px;
  }
  
  .city-place-feature:last-child{
    border-bottom:none;
  }
  
  .city-place-f-num{
    font-family:"Inter Tight",sans-serif;
    font-size:22px;
    font-weight:800;
    color:var(--primary-deep);
    line-height:1.05;
    letter-spacing:-.035em;
    margin:0;
  }
  
  .city-place-f-l{
    font-size:13px;
    color:var(--text-soft);
    line-height:1.5;
    margin:0;
  }
  
  
  /* Responsive */
  @media (max-width: 980px){
    .city-place-grid{
      grid-template-columns:1fr;
      min-height:auto;
    }
  
    .city-place-img-frame{
      min-height:420px;
    }
  
    .city-place-content{
      padding:56px 28px;
    }
  }
  
  @media (max-width: 640px){
    .city-place-content{
      padding:46px 20px;
    }
  
    .city-place-feature{
      grid-template-columns:1fr;
      gap:6px;
    }
  
    .city-place-f-num{
      font-size:24px;
    }
  }

/* =========================================================
   SECTION L — CTA
   Burgundy gradient panel. Pure conversion.
   ========================================================= */
.cta-sec{
  background:var(--bg-card);
  border-top:1px solid var(--line);
  padding:80px 48px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-sec::before{
  content:"";
  position:absolute;
  top:-120px;
  left:50%;
  width:520px;
  height:520px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(154,41,33,.13), rgba(154,41,33,0) 68%);
  pointer-events:none;
}
.cta-inner{
  position:relative;
  z-index:1;
  max-width:740px;
  margin:0 auto;
}
.cta-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:16px;
}
.cta-eyebrow::before,.cta-eyebrow::after{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(154,41,33,0),
    rgba(154,41,33,.75),
    rgba(154,41,33,0)
  );
}
.cta-h2{
  font-family:"Inter Tight",sans-serif;
  font-size:38px;
  font-weight:800;
  color:var(--primary-deep);
  margin-bottom:14px;
  line-height:1.15;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.cta-sub{
  font-size:15px;
  color:var(--text-mute);
  margin:0 auto 32px;
  max-width:520px;
  line-height:1.65;
}
.cta-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* =========================================================
   SECTION M — BUTTONS
   Materials' button family ported with burgundy palette.
   The asymmetric border-radius (3px 18px 18px 3px) is RESERVED
   for lead-generating actions only — i.e. "Submit your interest".
   Every other primary action uses standard rounded corners.
   ========================================================= */

/* Standard primary — for non-lead primary actions (Explore curriculum, Meet faculty, etc.) */
.btn-burgundy{
  background:var(--primary);
  color:#fff;
  padding:15px 32px;
  font-size:14.5px;
  font-weight:600;
  border:1px solid var(--primary);
  border-radius:3px;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.01em;
  text-decoration:none;
  display:inline-block;
  transition:transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.btn-burgundy:hover{
  transform:translateY(-3px);
  background:var(--primary-dark);
  box-shadow:0 16px 34px rgba(154,41,33,.22);
}

/* Lead variant — ONLY for "Submit your interest" CTAs.
   The asymmetric corners are the brand's call-to-action signature. */
.btn-burgundy-lead{
  background:var(--primary);
  color:#fff;
  padding:15px 36px;
  font-size:14.5px;
  font-weight:600;
  border:1px solid var(--primary);
  border-radius:3px 18px 18px 3px;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.01em;
  text-decoration:none;
  display:inline-block;
  transition:transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.btn-burgundy-lead:hover{
  transform:translateY(-3px);
  background:var(--primary-dark);
  box-shadow:0 16px 34px rgba(154,41,33,.22);
}

.btn-warm{
  background:var(--accent-warm);
  color:var(--primary-deeper);
  padding:15px 32px;
  font-size:14.5px;
  font-weight:600;
  border:1px solid var(--accent-warm);
  border-radius:3px;
  cursor:pointer;
  font-family:inherit;
  text-decoration:none;
  display:inline-block;
  transition:transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.btn-warm:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(212,168,124,.32);
}
.btn-outline{
  background:transparent;
  color:var(--primary);
  border:1.5px solid var(--primary);
  padding:14px 34px;
  font-size:14.5px;
  font-weight:600;
  border-radius:3px;
  cursor:pointer;
  font-family:inherit;
  text-decoration:none;
  display:inline-block;
  transition:transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.btn-outline:hover{
  transform:translateY(-3px);
  background:var(--primary);
  color:#fff;
}
.btn-ghost{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.4);
  padding:14px 34px;
  font-size:14.5px;
  font-weight:600;
  border-radius:3px;
  cursor:pointer;
  font-family:inherit;
  text-decoration:none;
  display:inline-block;
  transition:transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.btn-ghost:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
}

/* =========================================================
   SECTION N — FOOTER
   Ported from Materials .footer pattern with burgundy palette.
   ========================================================= */
footer{background:var(--primary-deeper)}
.footer{
  padding:40px 48px 24px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:42px;
}
.footer-top{
  background:var(--primary-deeper);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-bottom-grid{background:var(--primary-deeper)}
.footer-brand{
  font-family:"Inter Tight",sans-serif;
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
  letter-spacing:-.015em;
}
.footer-brand span{color:var(--accent-warm)}
.footer-desc{
  font-size:12px;
  color:rgba(255,255,255,.42);
  line-height:1.65;
  max-width:280px;
}
.footer-head{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  margin-bottom:14px;
}
.footer-subhead{margin-top:14px}
.footer-link{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.62);
  margin-bottom:8px;
  text-decoration:none;
  line-height:1.55;
  transition:.18s ease;
}
.footer-link:hover{
  color:var(--accent-warm);
  transform:translateX(2px);
}
.footer-bottom{
  background:var(--primary-dark);
  border-top:1px solid rgba(255,255,255,.06);
  padding:16px 48px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.footer-copy{
  font-size:11px;
  color:rgba(255,255,255,.34);
}

/* =========================================================
   MOTION SYSTEM (data-reveal)
   Ported from Materials' style.css.
   ========================================================= */
.motion-ready [data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-ease);
  will-change:opacity, transform;
}
.motion-ready [data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}
.motion-ready [data-reveal="left"]{transform:translateX(-28px)}
.motion-ready [data-reveal="right"]{transform:translateX(28px)}
.motion-ready [data-reveal="scale"]{transform:scale(1.035)}
.motion-ready [data-reveal="left"].is-visible,
.motion-ready [data-reveal="right"].is-visible{transform:translateX(0)}
.motion-ready [data-reveal="scale"].is-visible{transform:scale(1)}
.motion-ready [data-delay="1"]{transition-delay:90ms}
.motion-ready [data-delay="2"]{transition-delay:180ms}
.motion-ready [data-delay="3"]{transition-delay:270ms}
.motion-ready [data-delay="4"]{transition-delay:360ms}
.motion-ready [data-delay="5"]{transition-delay:450ms}
.motion-ready [data-delay="6"]{transition-delay:540ms}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .motion-ready [data-reveal],
  .motion-ready [data-reveal].is-visible{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   RESPONSIVE LAYER
   Mirrors Materials' responsive.css breakpoints.
   ========================================================= */
@media(max-width:1200px){
  .nav,.sec,.cta-sec,.footer,.footer-bottom{
    padding-left:32px;
    padding-right:32px;
  }
  /* dept-row keeps its main fr-ratios (5fr 4fr 3fr / 3fr 4fr 5fr) intact
     all the way down to the 992px collapse so middle-column alignment
     between the two rows is preserved. */
  .applied-grid{grid-template-columns:1fr;gap:32px}
  .applied-images{grid-template-rows:200px 200px}
}
@media(max-width:992px){
  .nav{padding:0 24px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav-link{padding:20px 12px}
  .nav-apply{margin-left:12px}
  .quote-band{padding:46px 24px}
  .dept-row,.dept-row.mirrored{grid-template-columns:1fr 1fr;gap:12px}
  .dept-content{grid-column:1 / -1}
  .prog-wrap{grid-template-columns:1fr}
  .fac-grid,.news-grid,.network-grid{grid-template-columns:1fr 1fr;gap:14px}
  .fac-context-grid{grid-template-columns:1fr 1fr}
  .network-images{grid-template-columns:1fr 1fr}
  .network-images > :nth-child(3){display:none}
  .city-intro{grid-template-columns:1fr;gap:20px}
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto}
  .mos-left{grid-row:auto;height:340px}
  .mos-right-grid{grid-template-rows:220px 220px}
  .city-facts-strip{grid-template-columns:repeat(2,1fr)}
  .footer{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav{padding:0 18px}
  .nav-link{font-size:12px;padding:18px 10px}
  .nav-apply{font-size:12px;padding:9px 14px}
  .nav-logo-main{font-size:13.5px}
  .nav-logo-main small{font-size:10px}
  .sec,.cta-sec{padding:60px 22px}
  .sec-h2{font-size:28px}
  .sec-lead{font-size:14.5px;margin-bottom:32px}
  .fac-grid,.news-grid,.network-grid,.fac-context-grid{grid-template-columns:1fr}
  .fac-card,.news-card{max-width:680px;margin-left:auto;margin-right:auto}
  .dept-row,.dept-row.mirrored{grid-template-columns:1fr;gap:10px}
  .dept-img-main,.dept-img-sm{min-height:240px}
  .dept-content{padding:24px 20px}
  .prog-bsc,.prog-master{padding:26px}
  .prog-bsc-num,.prog-master-num{font-size:70px;bottom:-10px}
  .cta-h2{font-size:30px}
  .cta-row{flex-direction:column;align-items:stretch}
  .btn-burgundy,.btn-burgundy-lead,.btn-warm,.btn-outline,.btn-ghost{
    width:100%;
    text-align:center;
  }
  .applied-images{grid-template-columns:1fr;grid-template-rows:auto}
  .applied-img-main{grid-row:auto;height:280px}
  .applied-img-sm{height:200px}
  .footer{grid-template-columns:1fr;padding:32px 24px 20px;gap:28px}
  .footer-bottom{padding:14px 24px;flex-direction:column;align-items:flex-start}
}