/* =====================================================================
   V14 BALANCE & CONSISTENCY PATCH
   ---------------------------------------------------------------------
   Goals:
   1. Unify Patents / Funding / Academic Roles boards to ONE dark premium look
   2. Rebalance Academic Roles: 4 service cards become a 2x2 grid (less
      vertical scrolling, matches RA feature card height)
   3. Tighten the CV section so left/right columns align better
   4. Reduce overall section padding for a less "scroll-heavy" feel
   ===================================================================== */

/* ---------- 1. Patents board → DARK premium (match Funding) ---------- */
.ip-profile-board {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20, 37, 63, .09);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(15, 39, 71, .98), rgba(23, 59, 108, .96)) !important;
  box-shadow: 0 24px 60px rgba(15, 39, 71, .18);
  padding: 26px;
}

.ip-profile-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(20, 157, 221, .24), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(217, 154, 43, .14), transparent 30%);
  pointer-events: none;
}

.ip-profile-board > .ip-profile-head,
.ip-profile-board > .ip-profile-stats,
.ip-profile-board > .ip-profile-list,
.ip-profile-board > .ip-profile-loadmore {
  position: relative;
  z-index: 1;
}

.ip-profile-head {
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  padding-bottom: 18px;
  margin-bottom: 4px;
}

.ip-profile-eyebrow {
  color: #8fd6ff !important;
}

.ip-profile-eyebrow::before {
  background: #42c4ff !important;
  box-shadow: 0 0 0 6px rgba(66, 196, 255, .13) !important;
}

.ip-profile-head h2 {
  color: #fff !important;
}

.ip-profile-head p {
  color: rgba(255, 255, 255, .72) !important;
}

/* Stats pills on dark */
.ip-profile-stats span {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .72) !important;
  border-radius: 16px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 14px;
}

.ip-profile-stats strong {
  color: #fff !important;
  font-size: 1.35rem !important;
  margin-bottom: 4px;
}

/* Patent items keep light cards on the dark board so content stays readable */
.ip-profile-item {
  background: rgba(255, 255, 255, .97) !important;
}

.ip-profile-item.is-featured {
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 252, 244, .97)) !important;
}

/* Load-more button polished for dark surrounding */
.ip-profile-loadmore-btn {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #173b6c;
}

.ip-profile-loadmore-btn:hover {
  background: #fff;
  border-color: rgba(20, 157, 221, .42);
}

/* ---------- 2. Academic Roles board → SAME dark premium ---------- */
.academic-premium-board {
  position: relative;
  overflow: hidden;
  padding: 26px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(15, 39, 71, .98), rgba(23, 59, 108, .96)) !important;
  border: 1px solid rgba(20, 37, 63, .09);
  box-shadow: 0 24px 60px rgba(15, 39, 71, .18) !important;
}

.academic-premium-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(20, 157, 221, .24), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(217, 154, 43, .14), transparent 30%);
  pointer-events: none;
  width: auto;
  height: auto;
  right: auto;
  top: auto;
  border-radius: 0;
}

.academic-premium-board::after {
  display: none;
}

/* New head pattern: eyebrow + h2 + subtitle + badge */
.academic-board-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 18px !important;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.academic-board-head > div:first-child {
  flex: 1;
  min-width: 0;
}

/* Eyebrow chip — matches funding/patents */
.academic-board-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: #8fd6ff !important;
  font-size: .78rem !important;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px !important;
  border-radius: 0;
}

.academic-board-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42c4ff;
  box-shadow: 0 0 0 6px rgba(66, 196, 255, .13);
}

.academic-board-head h2 {
  margin: 0 0 7px;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.academic-board-head p {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
  font-size: .96rem;
}

/* Right-side badge — matches funding badge */
.academic-board-badge {
  flex: 0 0 auto;
  min-width: 105px;
  padding: 16px 18px;
  border-radius: 22px;
  text-align: center;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
}

.academic-board-badge span {
  display: block;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

.academic-board-badge small {
  display: block;
  color: rgba(255, 255, 255, .64);
  font-weight: 800;
  margin-top: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .68rem;
}

/* New stats grid below head — matches funding/patents pattern */
.academic-board-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}

.academic-board-stats span {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 12px 14px;
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.academic-board-stats strong {
  display: block;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 4px;
}

/* Hide old mini-stats (no longer used) */
.academic-board-mini-stats {
  display: none !important;
}

/* ---------- 3. Service stack → 2×2 grid (balances RA card height) ---------- */
.academic-service-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  grid-auto-rows: 1fr;
}

/* Tighter, balanced 2x2 cards */
.academic-service-card {
  padding: 16px 16px !important;
  min-height: 0;
  border-radius: 20px !important;
}

.academic-service-card .academic-card-top {
  margin-bottom: 8px;
}

.academic-service-card .academic-card-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 13px;
  font-size: 1.05rem;
}

.academic-service-card .academic-card-number {
  font-size: 1.65rem !important;
  line-height: 1;
}

.academic-service-card h3 {
  margin-bottom: 3px !important;
  font-size: .98rem !important;
  line-height: 1.25;
}

.academic-service-card .academic-card-kicker {
  font-size: .65rem;
  letter-spacing: .10em;
  margin-bottom: 4px;
}

.academic-service-card .academic-card-note {
  margin-bottom: 8px !important;
  font-size: .76rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.academic-service-card .academic-card-link {
  font-size: .76rem;
  padding: 6px 0;
  margin-top: auto;
}

/* RA feature card stays prominent on the left */
.academic-premium-card-feature {
  padding: 22px !important;
}

.academic-premium-card-feature h3 {
  font-size: clamp(1.25rem, 1.85vw, 1.6rem);
}

/* Redesign: hero (Research Assistant) card full-width on top,
   four service cards in a single row beneath. Removes the side-by-side
   height mismatch that was leaving a gap. */
@media (min-width: 1200px) {
  .academic-premium-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch;
  }
  .academic-service-stack {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
  }
  /* Spread the RA meta tiles across the now-wider hero card */
  .academic-ra-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  }
}

/* When RA card is missing, the 4 cards span the full width as 4-up */
.academic-service-stack-full {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Tablet: stack RA above 2x2 service grid */
@media (max-width: 1199px) {
  .academic-premium-layout {
    grid-template-columns: 1fr !important;
  }
  .academic-service-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .academic-service-stack-full {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: single column for everything */
@media (max-width: 575px) {
  .academic-premium-board {
    padding: 18px !important;
    border-radius: 22px !important;
  }
  .academic-board-head {
    flex-direction: column;
  }
  .academic-board-badge {
    width: 100%;
  }
  .academic-board-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .academic-service-stack,
  .academic-service-stack-full {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 4. CV section: tighter alignment between columns ---------- */
.cv-balanced-row {
  align-items: flex-start;
}

/* Tighten gap between resume groups for a calmer rhythm */
.cv-balanced-row .resume-title {
  margin-top: 14px;
  margin-bottom: 14px;
}

.cv-balanced-row .resume-title:first-child {
  margin-top: 0;
}

@media (min-width: 992px) {
  .cv-balanced-row > .col-lg-6:first-child {
    padding-right: 18px;
  }
  .cv-balanced-row > .col-lg-6:last-child {
    padding-left: 18px;
    border-left: 1px dashed rgba(20, 37, 63, .10);
  }
}

/* ---------- 5. Reduce section padding (less "scroll-heavy" feel) ---------- */
.ip-profile-section {
  padding: 48px 0 !important;
}

.funding-profile-section {
  padding: 48px 0 !important;
}

.academic-premium-section,
.academic-roles-section {
  padding: 48px 0 !important;
}

/* Soften the wash of decorative gradients between sections */
.academic-roles-section::before {
  display: none;
}

/* ---------- 6. Patent / Funding heads: align padding & hierarchy ---------- */
.funding-profile-head,
.ip-profile-head {
  padding: 0 0 18px;
  margin-bottom: 4px;
}

.funding-profile-stats,
.ip-profile-stats,
.academic-board-stats {
  margin: 16px 0 18px;
}

/* ---------- 7. Cleaner small touches ---------- */
/* Section title above CV section gets a calmer rhythm */
#resume .section-title {
  padding-bottom: 18px;
}

/* Friendly back-to-top floats stay above all content */
.back-to-top {
  z-index: 1500;
}


/* =====================================================================
   V14.1 — CV REDESIGN: STICKY SIDEBAR NAV + SINGLE-COLUMN CONTENT
   ---------------------------------------------------------------------
   Replaces the two-column CV with a sticky left rail navigation and a
   full-width content stack on the right. Eliminates the column-balance
   problem entirely.
   ===================================================================== */

/* Override the V14 dashed divider — no longer two columns */
.cv-balanced-row > .col-lg-6:first-child,
.cv-balanced-row > .col-lg-6:last-child {
  border-left: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Layout: 240px sidebar + flexible content */
.cv-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 12px;
}

/* Sidebar rail */
.cv-nav-rail {
  position: sticky;
  top: 24px;            /* generous breathing room from top */
  align-self: start;
  z-index: 5;
}

.cv-nav-rail-inner {
  background: #fff;
  border: 1px solid rgba(20, 37, 63, .08);
  border-radius: 18px;
  padding: 14px 10px 10px;
  box-shadow: 0 8px 30px rgba(15, 39, 71, .06);
}

.cv-nav-eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #149ddd;
  padding: 0 12px 10px;
  border-bottom: 1px solid rgba(20, 37, 63, .07);
  margin-bottom: 6px;
}

.cv-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cv-nav-list li {
  margin: 0;
  padding: 0;
}

.cv-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  margin: 2px 0;
  border-radius: 10px;
  text-decoration: none;
  color: #5d6b7b;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  position: relative;
}

.cv-nav-link:hover {
  background: rgba(20, 157, 221, .07);
  color: #173b6c;
  text-decoration: none;
}

.cv-nav-link.is-active {
  background: linear-gradient(135deg, rgba(20, 157, 221, .10), rgba(20, 157, 221, .04));
  color: #149ddd;
}

.cv-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #149ddd;
}

.cv-nav-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(20, 157, 221, .08);
  color: #149ddd;
  font-size: .95rem;
  transition: background .18s ease, color .18s ease;
}

.cv-nav-link.is-active .cv-nav-icon {
  background: #149ddd;
  color: #fff;
  box-shadow: 0 6px 14px rgba(20, 157, 221, .28);
}

.cv-nav-link:hover .cv-nav-icon {
  background: rgba(20, 157, 221, .15);
}

.cv-nav-label {
  flex: 1;
  min-width: 0;
}

/* Content area */
.cv-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv-section {
  scroll-margin-top: 30px;    /* offset for hash-link anchor scroll */
  padding-top: 4px;
}

.cv-section .resume-title:first-child {
  margin-top: 0;
}

/* Soft dividers between sections so each block feels distinct */
.cv-section + .cv-section {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px dashed rgba(20, 37, 63, .10);
}

/* ===== Mobile / tablet: collapse sidebar to horizontal scroll pills ===== */
@media (max-width: 991px) {
  .cv-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cv-nav-rail {
    position: sticky;
    top: 16px;
    z-index: 20;
    margin: 0 -8px;
  }

  .cv-nav-rail-inner {
    padding: 8px;
    border-radius: 14px;
  }

  .cv-nav-eyebrow {
    display: none;
  }

  .cv-nav-list {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .cv-nav-list::-webkit-scrollbar {
    display: none;
  }

  .cv-nav-list li {
    flex: 0 0 auto;
  }

  .cv-nav-link {
    white-space: nowrap;
    padding: 7px 10px;
    font-size: .8rem;
    margin: 0;
  }

  .cv-nav-link.is-active::before {
    display: none;
  }

  .cv-nav-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: .85rem;
    border-radius: 7px;
  }
}

/* Very small screens: tighter padding */
@media (max-width: 575px) {
  .cv-nav-rail {
    margin: 0 -4px;
  }
  .cv-nav-link {
    padding: 6px 9px;
    font-size: .76rem;
  }
}

/* When the user clicks an Academic Roles card and the section flashes,
   the flash should still look right inside cv-section blocks */
.cv-section .resume-title.section-flash::before,
.cv-section .resume-title.section-flash::after {
  border-radius: 8px;
}

/* ============================================================
   CV preview-to-production alignment patch
   Makes the real dynamic PHP CV section match the sticky sidebar
   preview more closely while keeping all admin/dynamic data.
   ============================================================ */
#resume.resume.section-bg {
  background: #f5f8fd;
}

#resume .section-title {
  padding-bottom: 8px;
  margin-bottom: 0;
}

#resume .section-title h2 {
  font-size: 26px;
  font-weight: 600;
  color: #173b6c;
  margin-bottom: 8px;
}

#resume .btn-resume-primary {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

#resume .cv-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 12px;
}

#resume .cv-nav-rail {
  position: sticky;
  top: 82px; /* keeps it below the fixed site header on desktop */
  align-self: start;
  z-index: 5;
}

#resume .cv-nav-rail-inner {
  background: #fff;
  border: 1px solid rgba(20, 37, 63, .08);
  border-radius: 14px;
  padding: 12px 8px 8px;
  box-shadow: none;
}

#resume .cv-nav-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #149ddd;
  padding: 0 10px 8px;
  border-bottom: 1px solid rgba(20, 37, 63, .07);
  margin-bottom: 4px;
}

#resume .cv-nav-link {
  gap: 8px;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: 8px;
  color: #5d6b7b;
  font-size: 12px;
  font-weight: 500;
}

#resume .cv-nav-link:hover {
  background: rgba(20, 157, 221, .07);
  color: #173b6c;
}

#resume .cv-nav-link.is-active {
  background: rgba(20, 157, 221, .10);
  color: #149ddd;
}

#resume .cv-nav-link.is-active::before {
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}

#resume .cv-nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  background: rgba(20, 157, 221, .08);
  color: #149ddd;
  font-size: 14px;
  box-shadow: none;
}

#resume .cv-nav-link.is-active .cv-nav-icon {
  background: #149ddd;
  color: #fff;
  box-shadow: none;
}

#resume .cv-content {
  display: block;
}

#resume .cv-section {
  scroll-margin-top: 92px;
  padding-top: 0;
}

#resume .cv-section + .cv-section {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px dashed rgba(20, 37, 63, .10);
}

#resume .cv-section .resume-title {
  font-size: 18px;
  font-weight: 500;
  color: #050d18;
  margin: 0 0 12px;
  line-height: 1.25;
}

/* Remove old BootstrapMade timeline dots inside this CV layout */
#resume .cv-section .resume-item::before {
  display: none !important;
}

#resume .cv-section .resume-item {
  background: #fff;
  padding: 12px 14px 12px 18px !important;
  border-left: 2px solid #1f5297 !important;
  border-radius: 0 8px 8px 0;
  margin: 0 0 8px !important;
  position: relative;
  box-shadow: none;
}

#resume .cv-section .resume-item:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
}

#resume .cv-section .resume-item h4 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #050d18;
  margin: 0 0 6px;
  text-transform: none;
  font-family: inherit;
}

#resume .cv-section .resume-item h5 {
  display: inline-block;
  font-size: 11px;
  background: #e4edf9;
  color: #26384d;
  padding: 3px 10px;
  font-weight: 600;
  margin: 0 0 6px;
  border-radius: 0;
  line-height: 1.35;
}

#resume .cv-section .resume-item p,
#resume .cv-section .resume-item li {
  font-size: 12px;
  color: #5d6b7b;
  line-height: 1.55;
}

#resume .cv-section .resume-item p {
  margin: 4px 0 0;
}

#resume .cv-section .resume-item ul {
  margin: 6px 0 0;
  padding-left: 16px;
}

#resume .cv-section .resume-item ul li {
  padding-bottom: 3px;
}

#resume .cv-review-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

#resume .cv-review-badges span {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  background: #E6F1FB;
  color: #0C447C;
  border-radius: 999px;
  line-height: 1.4;
}

@media (max-width: 991px) {
  #resume .cv-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #resume .cv-nav-rail {
    top: 12px;
    margin: 0 -8px;
  }

  #resume .cv-nav-rail-inner {
    padding: 8px;
    border-radius: 14px;
  }

  #resume .cv-nav-list {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  #resume .cv-nav-list::-webkit-scrollbar {
    display: none;
  }

  #resume .cv-nav-list li {
    flex: 0 0 auto;
  }

  #resume .cv-nav-link {
    white-space: nowrap;
    padding: 7px 10px;
    font-size: 12px;
    margin: 0;
  }

  #resume .cv-nav-link.is-active::before {
    display: none;
  }
}

@media (max-width: 575px) {
  #resume .cv-nav-link {
    padding: 6px 9px;
    font-size: 11px;
  }
  #resume .cv-review-item-head {
    display: block;
  }
}

/* CV sticky sidebar reliability patch */
#resume .cv-nav-rail {
  position: relative !important;
  top: auto !important;
  z-index: 30;
}

#resume .cv-nav-rail-inner {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  will-change: top, left, width;
}

#resume .cv-affix-fixed .cv-nav-rail-inner,
#resume .cv-affix-bottom .cv-nav-rail-inner {
  z-index: 100;
}

#resume .cv-section {
  scroll-margin-top: 48px;
}

@media (max-width: 991px) {
  #resume .cv-nav-rail {
    position: sticky !important;
    top: 8px !important;
    z-index: 35;
  }

  #resume .cv-nav-rail-inner {
    max-height: none;
    overflow-y: visible;
  }

  #resume .cv-section {
    scroll-margin-top: 92px;
  }
}

/* ============================================================
   CV typography/site-balance patch
   Keeps the working sticky behavior, but brings the CV section
   back in line with the rest of the portfolio typography.
   ============================================================ */
#resume,
#resume .cv-layout,
#resume .cv-nav-rail,
#resume .cv-content {
  font-family: "Open Sans", sans-serif;
}

#resume .section-title h2 {
  font-family: "Raleway", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 14px;
  padding-bottom: 20px;
  color: #173b6c;
}

#resume .section-title p {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #4f5f70;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

#resume .btn-resume-primary {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}

#resume .cv-nav-eyebrow {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

#resume .cv-nav-link {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

#resume .cv-nav-icon {
  font-size: 15px;
}

#resume .cv-section .resume-title {
  font-family: "Raleway", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  color: #050d18;
  margin-bottom: 14px;
}

#resume .cv-section .resume-item {
  padding: 16px 18px 16px 20px !important;
  margin-bottom: 10px !important;
  border-left-color: #1f5297 !important;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 6px 18px rgba(15, 39, 71, .035);
}

#resume .cv-section .resume-item h4 {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  color: #050d18;
  margin-bottom: 7px;
  text-transform: none;
}

#resume .cv-section .resume-item h5 {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  margin-bottom: 8px;
  border-radius: 2px;
  color: #26384d;
}

#resume .cv-section .resume-item p,
#resume .cv-section .resume-item li {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.62;
  color: #5d6b7b;
}

#resume .cv-section .resume-item p {
  margin-top: 5px;
}

#resume .cv-section .resume-item ul {
  padding-left: 18px;
  margin-top: 8px;
}

#resume .cv-section .resume-item ul li {
  padding-bottom: 5px;
}

#resume .cv-review-badges span {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
}

@media (max-width: 991px) {
  #resume .section-title h2 {
    font-size: 30px;
  }

  #resume .cv-nav-link {
    font-size: 13px;
  }

  #resume .cv-section .resume-title {
    font-size: 21px;
  }
}

@media (max-width: 575px) {
  #resume .section-title h2 {
    font-size: 28px;
  }

  #resume .cv-section .resume-item h4 {
    font-size: 14px;
  }

  #resume .cv-section .resume-item p,
  #resume .cv-section .resume-item li {
    font-size: 13px;
  }
}

/* ============================================================
   CV mobile alignment patch
   Desktop layout is intentionally untouched. On phones/tablets the
   CV nav becomes a normal horizontal scroller and the content is forced
   back inside the viewport.
   ============================================================ */
@media (max-width: 991px) {
  #resume,
  #resume .container,
  #resume .cv-layout,
  #resume .cv-content,
  #resume .cv-section,
  #resume .cv-section .resume-item {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #resume .container {
    overflow-x: hidden !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  #resume .cv-layout {
    display: block !important;
    width: 100% !important;
    margin-top: 12px;
    overflow: hidden !important;
  }

  #resume .cv-nav-rail {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    z-index: 10 !important;
    overflow: hidden !important;
  }

  #resume .cv-nav-rail-inner {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #resume .cv-nav-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 8px !important;
    margin: 0 !important;
  }

  #resume .cv-nav-list::-webkit-scrollbar {
    display: none;
  }

  #resume .cv-nav-list li {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  #resume .cv-nav-link {
    white-space: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    font-size: 12px !important;
  }

  #resume .cv-nav-link.is-active::before {
    display: none !important;
  }

  #resume .cv-content {
    width: 100% !important;
    overflow: visible !important;
  }

  #resume .cv-section {
    width: 100% !important;
    overflow: visible !important;
    scroll-margin-top: 24px !important;
  }

  #resume .cv-section .resume-item {
    width: 100% !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #resume .cv-section .resume-item h4,
  #resume .cv-section .resume-item h5,
  #resume .cv-section .resume-item p,
  #resume .cv-section .resume-item li {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  #resume .cv-review-item-head {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 575px) {
  #resume .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  #resume .cv-section .resume-item {
    padding: 14px 14px 14px 16px !important;
  }

  #resume .cv-nav-link {
    font-size: 11.5px !important;
    padding: 6px 9px !important;
  }

  #resume .cv-nav-icon {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    font-size: 13px !important;
  }
}

/* =====================================================================
   V14.2 — Mobile header slide fix
   ---------------------------------------------------------------------
   Bug: on mobile the FIRST open of the side nav stalled "stuck in the
   middle", then worked normally afterwards.
   Cause: #header (a 300px sidebar with overflow-y:auto + heavy content:
   profile image, inline SVGs, full nav) was slid in by animating `left`
   via `transition: all 0.5s`. While off-screen the browser deferred
   painting that content; on the first open it had to do a full first-time
   layout + image decode + paint AT THE SAME TIME as animating `left`
   (which forces per-frame layout). That blocked the compositor mid-slide.
   Subsequent opens were smooth because the content was already painted.
   Fix: slide with a GPU-composited transform instead of `left`, limit the
   transition to `transform` only, and pre-promote the layer with
   will-change so there is no first-paint stall.
   ===================================================================== */
@media (max-width: 1199px) {
  #header {
    left: 0;                              /* dock at 0; move with transform */
    transform: translateX(-100%);         /* hidden off-screen to the left */
    transition: transform 0.45s ease;     /* only transform, not `all` */
    will-change: transform;               /* keep the layer pre-composited */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .mobile-nav-active #header {
    left: 0;
    transform: translateX(0);             /* slide fully into view */
  }
}

/* Respect users who prefer reduced motion: show/hide instantly. */
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  #header {
    transition: none;
  }
}

/* =====================================================================
   V14.3 — Research Profile typography (clean / professional)
   ---------------------------------------------------------------------
   Plain academic statement: no accent numbers, no highlighted keywords,
   no callout box. Just evenly spaced paragraphs in a comfortable
   reading measure. Emphasis comes from rhythm and restraint, not bold.
   ===================================================================== */
.about-modern .about-summary {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.85;
  color: #3f4a5a;
}

.about-modern .about-summary .about-line {
  margin: 0 0 16px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.about-modern .about-summary .about-line:last-child {
  margin-bottom: 0;
}

/* Keep any incidental bold subtle and on-brand, never loud */
.about-modern .about-summary strong,
.about-modern .about-summary b {
  font-weight: 600;
  color: #2b3a52;
}

@media (max-width: 767px) {
  .about-modern .about-summary {
    font-size: 15.3px;
    line-height: 1.8;
  }
  .about-modern .about-summary .about-line {
    margin-bottom: 14px;
  }
}

/* =====================================================================
   V14.4 — Compact mobile hero (fit within ~one viewport)
   ---------------------------------------------------------------------
   The hero stacks a lot vertically on phones: kicker, large name, typed
   line, lead paragraph, 3 CTAs, up to 7 stats, and 4 scholar links — so
   it ran well past one screen. This tightens the vertical rhythm on small
   screens (smaller gaps, 2-line lead, denser stat grid) and hides the CTA
   buttons (their destinations are in the nav + stat strip) so the whole
   hero fits in roughly one viewport.
   Loaded last, so it wins over premium-upgrade.css.
   ===================================================================== */
@media (max-width: 575px) {
  #hero {
    /* svh/dvh as fallback; --app-height (set by JS) is the exact live
       visible height, so the next section never peeks at the bottom. */
    min-height: 100svh;
    min-height: 100dvh;
    min-height: var(--app-height, 100dvh);
    /* extra bottom padding reserves room for the scroll-down arrow so it
       never overlaps the scholar-link row */
    padding: 44px 0 72px;
  }

  #hero .hero-container {
    padding: 18px 16px 18px;
    border-radius: 20px;
  }

  #hero .hero-kicker {
    margin-bottom: 9px;
  }

  #hero h1 {
    font-size: clamp(1.85rem, 9.5vw, 2.45rem);
    margin-bottom: 7px;
  }

  #hero .hero-typed-line {
    font-size: .95rem;
    margin-bottom: 10px;
  }

  #hero .hero-lead {
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: 13px;
    -webkit-line-clamp: 2;          /* trim from 4 lines to 2 on phones */
  }

  /* Hide the CTA buttons on phones — the same destinations (Research
     Profile, Patents, Contact) are reachable from the mobile nav menu
     and the stat strip, so this saves a full row without losing access. */
  #hero .hero-cta-group {
    display: none;
  }

  /* Denser stat grid: 3-up, tighter padding, smaller numerals */
  #hero .hero-stat-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 2px;
    padding: 9px 6px;
    margin: 2px auto 13px;
    border-radius: 14px;
  }

  #hero .hero-stat {
    padding: 4px 4px;
  }

  #hero .hero-stat-num {
    font-size: 1.08rem;
  }

  #hero .hero-stat-lbl {
    font-size: .55rem;
    letter-spacing: .06em;
  }

  #hero .hero-link-row {
    gap: 6px 9px;
  }

  #hero .hero-link-row a {
    font-size: .76rem;
    padding: 5px 10px;
  }

  /* Bring back the animated scroll-down chevron on mobile (now that the
     hero fits one screen). Overrides the display:none !important set in
     premium-upgrade.css. flex keeps its inner arrow centered like the
     base style; the hero's larger bottom padding gives it clear space
     below the scholar-link row (no overlap). */
  #hero .scroll-down {
    display: flex !important;
    bottom: 14px;
  }
}

/* Very small / short phones: shave a little more */
@media (max-width: 380px) {
  #hero h1 {
    font-size: clamp(1.7rem, 9vw, 2.1rem);
  }
  #hero .hero-stat-num { font-size: 1rem; }
  #hero .hero-lead { -webkit-line-clamp: 2; }
}

/* =====================================================================
   V14.6 — Tiered hero stat strip
   ---------------------------------------------------------------------
   Seven flat stats read as a data dump and made small "1" values compete
   with the big "18+/48+" headline numbers. Now organised into two tiers:
     Tier 1 (primary): Published Papers, Citations — headline credentials.
     Tier 2 (secondary): Patents, Funding, TPC, Peer Reviews, Memberships
        — supporting metrics, smaller + slightly muted, under a hairline.
   Structural only; all stats remain visible. Loaded last so it wins.
   ===================================================================== */
.hero-stat-strip.hero-stat-strip-tiered {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-stat-strip .hero-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tier 1 — headline row keeps the larger, full-strength numerals */
.hero-stat-strip .hero-stat-row-primary {
  gap: 0;
}

/* Tier 2 — supporting row: hairline separator above, denser + calmer */
.hero-stat-strip .hero-stat-row-secondary {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  gap: 0;
  row-gap: 4px;
}

/* No leading divider at the start of either row */
.hero-stat-strip .hero-stat-row > .hero-stat-divider:first-child {
  display: none;
}

/* Secondary stats are visually one tier down */
.hero-stat-strip .hero-stat-row-secondary .hero-stat {
  padding: 4px 14px;
}

.hero-stat-strip .hero-stat-row-secondary .hero-stat-num {
  font-size: 1.18rem;
}

.hero-stat-strip .hero-stat-row-secondary .hero-stat-lbl {
  font-size: .6rem;
  color: rgba(255, 255, 255, .56);
}

.hero-stat-strip .hero-stat-row-secondary .hero-stat-divider {
  height: 22px;
}

/* Tablet */
@media (max-width: 991px) {
  .hero-stat-strip .hero-stat-row-secondary .hero-stat-num {
    font-size: 1.05rem;
  }
}

/* Mobile: rows stack their items; dividers hide; tiers stay distinct */
@media (max-width: 575px) {
  /* Override the V14.4 grid — the tiered strip is a flex column now */
  #hero .hero-stat-strip.hero-stat-strip-tiered {
    display: flex;
    grid-template-columns: none;
  }

  #hero .hero-stat-strip .hero-stat-row-primary {
    gap: 0 6px;
  }

  #hero .hero-stat-strip .hero-stat-row-secondary {
    gap: 6px 2px;
    margin-top: 8px;
    padding-top: 8px;
  }

  #hero .hero-stat-strip .hero-stat-divider {
    display: none;
  }

  #hero .hero-stat-strip .hero-stat-row-secondary .hero-stat {
    flex: 0 0 33.333%;
    padding: 2px 2px;
  }

  #hero .hero-stat-strip .hero-stat-row-secondary .hero-stat-num {
    font-size: .98rem;
  }

  #hero .hero-stat-strip .hero-stat-row-secondary .hero-stat-lbl {
    font-size: .52rem;
  }
}

/* ============================================================
   V15 — Hide CV "Jump to" sidebar/nav rail on mobile & tablet
   The CV jump navigation is not needed on small screens, where
   the CV reads as one continuous column. Hidden at <= 991px.
   Placed last so it overrides the earlier sticky/scroller rules.
   ============================================================ */
@media (max-width: 991px) {
  #resume .cv-nav-rail {
    display: none !important;
  }
  #resume .cv-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
}