:root{
  --pageW: 1100px;
  --pageMin: 980px;
  --heroH: 250px;       /* tweak once to visually match “two text lines” */
  --heroPadB: 14px;     /* bottom space below title */

  --colW: 520px;
  --gap: 18px;

  --header-h: 86px;

  /* Background tone matched to the hero image (cool blue-gray) */
  --outer: #e6edf7;          /* page background */
  --pageBg: #eef3fb;         /* behind ALL content area */
  --card: #ffffff;

  --text:#0b1220;
  --muted:#475569;

  --line: rgba(15, 23, 42, 0.12);

  --accent:#0f5ea8;
  --accentSoft: rgba(15,94,168,.10);

  --shadow: 0 4px 12px rgba(2,6,23,.10);
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 540px at 14% 10%, rgba(15,94,168,.10), transparent 60%),
    radial-gradient(900px 540px at 86% 0%, rgba(99,102,241,.07), transparent 55%),
    var(--outer);
  overflow-x:auto;
}

img{ max-width:100%; display:block; }

.container{
  width: var(--pageW);
  min-width: var(--pageMin);
  margin: 0 auto;
  padding: 0 22px;
}

.page{ background: var(--pageBg); }

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:3000;
  background: rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}

.topbar{
  min-height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  padding:8px 18px;
  border-right:1px solid var(--line);
}

.brand img{
  height:72px;
  width:auto;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 0;
}

.nav a,
.nav button{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.94);
  font: inherit;
  color:var(--text);
  font-weight:750;
  font-size:16px;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.nav a[aria-current="page"]{
  background: var(--accentSoft);
  border-color: rgba(15,94,168,.28);
  color:#0b3f73;
}

.nav a:hover,
.nav button:hover{
  background: var(--accentSoft);
  border-color: rgba(15,94,168,.32);
  color:#0b3f73;
  transform: translateY(-1px);
}

.chev{
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  display:inline-block;
  margin-left:2px;
  opacity:.85;
}

/* Dropdown */
.dd{ position:relative; }
.menuPanel{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 380px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius: var(--radius);
  padding: 10px;
  display:none;
  box-shadow: var(--shadow);
}
.menuPanel.is-open{ display:block; }
.menuInner{ padding: 4px; }
.menuGrid{ display:grid; grid-template-columns: 1fr; gap: 6px; }
.menuPanel a[role="menuitem"]{
  display:block;
  padding:10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color:var(--text);
  font-weight:750;
  font-size:15px;
  line-height:1.35;
  border:1px solid transparent;
}
.menuPanel a[role="menuitem"]:hover{
  background: var(--accentSoft);
  border-color: rgba(15,94,168,.22);
}

/* Hero image behind title (CSS path relative to assets/css/style.css) */
.hero{
  background-image:
    linear-gradient(to bottom, rgba(2,6,23,.55), rgba(2,6,23,.18)),
    url("../img/Background.jpg");
  background-size: 100% auto;
  background-position: center 90%;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(15,23,42,.12);

  min-height: var(--heroH);
  display:flex;
  align-items:flex-end;      /* bottom-rectified */
  padding-bottom: 16px;
}


.hero--home{ }

/* Title: no box. Add “stroke-like” clarity using multi shadow */
.heroTitle{
  margin: 0;                /* padding on .hero controls vertical spacing */
  line-height: 1.18;        /* keeps 2-line titles tight */
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:60px;
  font-weight:800;
  letter-spacing:-.8px;
  color:#ffffff;
  text-shadow:
    -1px 0 rgba(0,0,0,.55),
     1px 0 rgba(0,0,0,.55),
     0 -1px rgba(0,0,0,.55),
     0  1px rgba(0,0,0,.55),
     0  8px 22px rgba(0,0,0,.50);
}

.hero--intro .heroTitle{
  font-size:80px;   /* slight bump; adjust if needed */
}


/* Main */
.section{
  padding:42px 0 70px;
  background: var(--pageBg);
}

/* Fixed two columns */
.twoCol{
  width: calc((var(--colW) * 2) + var(--gap));
  margin: 0 auto;
  display:grid;
  grid-template-columns: var(--colW) var(--colW);
  gap: var(--gap);
  align-items:start;
}

.col{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  min-width:0;
}

/* Cards: remove top highlight and make them pop via border + subtle background contrast */
.card{
  background: var(--card);
  border-radius: var(--radius);
  overflow:hidden;

  border: 1px solid rgba(15,23,42,.16);
  box-shadow: 0 6px 18px rgba(2,6,23,.12);

  outline: 1px solid rgba(255,255,255,.70);
  outline-offset: -1px;

  transition: transform .14s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-1px);
  border-color: rgba(15,94,168,.28);
  box-shadow: 0 10px 26px rgba(2,6,23,.14);
}

.cardHead{
  padding:18px 22px;
  border-bottom:1px solid rgba(15,23,42,.10);
  background: #ffffff; /* no gradient highlight */
}

.cardTitle{
  margin:0;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:28px;
  font-weight:800;
  color:#0b1220;
  letter-spacing:-.4px;
  line-height:1.12;
}

.cardBody{ padding:18px 22px 22px; }

.lead{
  margin:0;
  color:#334155;
  font-size:16px;
  font-weight:500;
  line-height:1.8;
}

.subTitle{
  margin:16px 0 10px;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:18px;
  font-weight:800;
  color:#0b1220;
  position:relative;
  padding-bottom:10px;
  width:fit-content;
}
.subTitle::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:78px;
  height:4px;
  background:var(--accent);
  border-radius:999px;
}

/* Lists */
ul.bullets{ margin:8px 0 0; padding-left:20px; }
ul.bullets li{
  margin:8px 0;
  font-size:15px;
  line-height:1.6;
  color:#0b1220;
  font-weight:400;
}

/* Links */
.card a{
  color: var(--accent);
  text-decoration:none;
  font-weight:800;
  overflow-wrap:anywhere;
}
.card a:hover{ text-decoration:underline; }

/* Images */
.figure img{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 2px 6px rgba(2,6,23,.08);
  margin-bottom: 8px;
}

/* tiny copyright line */
.imgCredit{
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
  margin: 0 0 14px;
}

/* Profile (Leslie bigger) */
.profile{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.profilePic{
  width: 185px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 2px 6px rgba(2,6,23,.08);
}

/* Contact */
.name{
  margin: 0 0 6px;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size:20px;
  font-weight:800;
}
.rank, .dept{
  color: var(--muted);
  font-weight:700;
  margin-bottom: 6px;
}
.label{
  font-weight:900;
  color:#0b1220;
}
.contactInfo p{
  margin: 10px 0 0;
  color:#334155;
  font-weight:650;
  line-height:1.6;
}

/* Footer */
.footer{
  border-top:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
}
.foot{
  padding:18px 0;
  color:var(--muted);
  font-weight:800;
}