/* ===================================================================
   EG_PRIVACY_LAYOUT_FIX
   -------------------------------------------------------------------
   THE BUG, measured against the live stylesheet:

   bundle.css defines .lg\:col-span-2, -3, -5 and -7, but NOT -9.
   /privacy-policy is built as  aside.lg:col-span-3 + main.lg:col-span-9
   inside a 12-column grid. The sidebar therefore gets its 3 columns
   correctly while the content column has no span rule at all, so it
   falls into a single implicit track and collapses to a sliver.

   That is precisely the screenshot: "We will only use your personal
   data when the law allows us to" wrapping one word per line.

   A single missing rule caused it. The rest of this block adds the
   other spans so the same class of failure cannot recur on another
   page, plus the gap and typography rules the policy body never had.
   =================================================================== */

@media (min-width: 1024px) {
  .lg\:col-span-1  { grid-column: span 1  / span 1;  }
  .lg\:col-span-4  { grid-column: span 4  / span 4;  }
  .lg\:col-span-6  { grid-column: span 6  / span 6;  }
  .lg\:col-span-8  { grid-column: span 8  / span 8;  }
  .lg\:col-span-9  { grid-column: span 9  / span 9;  }  /* the fix */
  .lg\:col-span-10 { grid-column: span 10 / span 10; }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:gap-12 { gap: 3rem; }
}

@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-6 { grid-column: span 6 / span 6; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:block { display: block; }
}

/* Safety net: if a span class is ever missing again, a direct child of
   a 12-column grid should still take the remaining width rather than
   collapsing to a single word per line. Low specificity, so any real
   span rule above overrides it. */
@media (min-width: 1024px) {
  .grid.lg\:grid-cols-12 > :only-child { grid-column: 1 / -1; }
}

/* ===================================================================
   EG_DOC_TYPOGRAPHY
   -------------------------------------------------------------------
   bundle.css contains ZERO rules for .visual-content, the wrapper
   around the entire policy body, so every heading and paragraph fell
   back to browser defaults - no size hierarchy, no spacing, no
   line-height and no measure. Even with the column fixed, that reads
   as a dense wall of text.

   Scoped to .visual-content so it cannot affect cards or listings.
   =================================================================== */

.visual-content {
  max-width: 72ch;          /* ~70 characters: the readable span for prose */
  color: #40535C;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.visual-content > *:first-child { margin-top: 0; }

.visual-content h2 {
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 800;
  color: #0F2831;
  margin: 2.75rem 0 .9rem;
  letter-spacing: -.01em;
  scroll-margin-top: 110px;   /* anchor links clear the sticky header */
}
.visual-content h2:not(:first-child) {
  padding-top: 2rem;
  border-top: 1px solid #E6E2DC;
}
.visual-content h2 + p { margin-top: .25rem; }

.visual-content h3 {
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 700;
  color: #0F2831;
  margin: 2rem 0 .6rem;
  scroll-margin-top: 110px;
}

.visual-content p  { margin: 0 0 1.15rem; }
.visual-content ul,
.visual-content ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.visual-content li { margin-bottom: .55rem; line-height: 1.7; }
.visual-content strong { color: #0F2831; font-weight: 700; }
.visual-content a { color: #0B5CAB; text-decoration: underline; text-underline-offset: 2px; }

/* Inline code such as the eduglobal_leads reference should not inherit
   a monospace block's full weight in running prose. */
.visual-content code {
  background: #F2F5F7;
  border: 1px solid #E3E9ED;
  border-radius: 5px;
  padding: .08em .35em;
  font-size: .92em;
  word-break: break-word;
}

@media (max-width: 767px) {
  .visual-content { font-size: 1rem; line-height: 1.7; }
  .visual-content h2 { font-size: 1.3rem; margin-top: 2.25rem; }
}

/* ===================================================================
   EG_DOC_SIDENAV
   The quick-navigation rail should track the reader's position.
   =================================================================== */
.pp-nav-link {
  display: block;
  padding: .5rem .7rem;
  border-radius: 8px;
  line-height: 1.35;
  transition: background .15s, color .15s;
}
.pp-nav-link:hover { background: #F6F3EF; color: #0F2831; }
.pp-nav-link.is-active {
  background: #FFF7EC;
  color: #0F2831;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #F5A524;
}

/* ===================================================================
   EG_HERO_CLIP
   leading-none is line-height:1, which clips descenders on a large
   display face - the cut-off tops of "Data Protection & Privacy
   Policy" and "Meet the" in both screenshots.
   =================================================================== */
h1.leading-none,
h2.leading-none,
.text-5xl.leading-none,
.text-6xl.leading-none,
.text-7xl.leading-none {
  line-height: 1.1;
  padding-bottom: .06em;
}

/* ===================================================================
   EG_FACULTY_ORDER
   The faculty page read as unordered because nothing set a hierarchy:
   the dossier arrow panels were visually heavier than the people, the
   intro sat at near-background contrast, and a broken avatar left a
   blank white box.
   =================================================================== */

/* The arrow is an affordance, not the subject of the card. */
.faculty-card a[href] svg,
.faculty-card [class*="dossier"] svg { width: 40px; height: 40px; flex: 0 0 auto; }
.faculty-card [class*="dossier"] {
  max-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
}

/* Readable secondary text: the original grey sat close to the page
   background at the sizes used. */
.faculty-intro, .eg-fac-sub, .faculty-card p { color: #4E5F69; }

/* A failed avatar should still read as a person rather than a hole. */
.faculty-img-wrapper {
  background: #EDF1F4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #8A99A2;
  font-size: 1.6rem;
}
.faculty-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faculty-img-wrapper img[src=""],
.faculty-img-wrapper img:not([src]) { display: none; }

/* Equal-height cards so a short bio and a long one still line up -
   most of what "random" was describing. */
.faculty-card { display: flex; flex-direction: column; height: 100%; }

@media (max-width: 767px) {
  .faculty-img-wrapper { width: 104px; height: 104px; }
  .faculty-card [class*="dossier"] { max-height: 72px; }
}

/* ===================================================================
   EG_DARK_HERO_FIX
   -------------------------------------------------------------------
   Measured in a real browser, not inferred from the markup:

     /faculty h1  -> color rgb(255,255,255) on background rgb(248,250,252)
     /faculty p   -> color rgb(203,213,225) on the same near-white

   Both hero sections are authored for a DARK backdrop (text-white,
   text-slate-300) inside <section class="bg-slate-950">. That class is
   not defined anywhere in the served CSS, so the backdrop never paints
   and the white text lands on a near-white page - which is why the
   headline read as a faint smudge and the subtitle was unreadable.

   Defining the slate palette restores the intended design rather than
   recolouring the text, which would have fought the authors' intent and
   left the glow effects floating on white.
   =================================================================== */

.bg-slate-950 { background-color: #020617; }
.bg-slate-900 { background-color: #0F172A; }
.bg-slate-800 { background-color: #1E293B; }
.bg-slate-100 { background-color: #F1F5F9; }
.border-slate-900 { border-color: #0F172A; }
.border-slate-200 { border-color: #E2E8F0; }
.text-slate-300 { color: #CBD5E1; }
.text-slate-400 { color: #94A3B8; }

/* Tinted overlays used for the hero glow. Without these the blurred
   colour washes are invisible and the section looks flat. */
.bg-blue-600\/20    { background-color: rgba(37, 99, 235, .20); }
.bg-emerald-600\/10 { background-color: rgba(5, 150, 105, .10); }
.bg-blue-500\/10    { background-color: rgba(59, 130, 246, .10); }
.border-blue-500\/30{ border-color: rgba(59, 130, 246, .30); }
.text-blue-400      { color: #60A5FA; }
.blur-\[150px\]     { --tw-blur: blur(150px); filter: blur(150px); }

/* EG_HERO_H1_CLIP
   Measured: the faculty h1 reports scrollHeight 81px inside a 72px
   box, so the gradient-filled span was being cut off. leading-[1.1] is
   too tight for a 72px display face once descenders are included. */
h1[class*="leading-"],
h1.leading-\[1\.1\] {
  line-height: 1.18;
  padding-bottom: .1em;
  overflow: visible;
}

/* A gradient-clipped span needs its own line box, or the clip crops the
   descenders of the text behind it. */
h1 span[class*="bg-clip-text"] {
  display: inline-block;
  padding-bottom: .12em;
  line-height: 1.18;
}

/* ===================================================================
   EG_GRADIENT_TEXT_FIX
   -------------------------------------------------------------------
   Measured: h1 span on /faculty computes
       background-image: none
       -webkit-background-clip: text
       -webkit-text-fill-color: rgba(0,0,0,0)
   so the word "Masterminds." was invisible - the text is clipped to a
   gradient that was never defined. The same pattern is used for
   "Privacy Policy" on /privacy-policy.

   The gradient utilities (bg-gradient-to-r, from-*, via-*, to-*) are
   absent from the served CSS, so the colour stops resolve to nothing.
   Defining them restores the intended gradient.

   The guard below is the important part: if a gradient is ever missing
   again, text clipped to it falls back to a visible colour instead of
   vanishing. A heading that silently disappears is far worse than one
   that loses its gradient.
   =================================================================== */

/* Fallback first, so a real gradient below overrides it. */
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.text-transparent { -webkit-text-fill-color: transparent; color: transparent; }

/* If no gradient resolved, show solid text rather than nothing. */
.text-transparent.bg-clip-text:not([style*="gradient"]) { -webkit-text-fill-color: currentColor; }

/* Gradient engine */
.bg-gradient-to-r  { background-image: linear-gradient(to right,  var(--tw-gradient-stops)); }
.bg-gradient-to-l  { background-image: linear-gradient(to left,   var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }

.from-blue-400   { --tw-gradient-from: #60A5FA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96,165,250,0)); }
.from-\[\#F5A524\]{ --tw-gradient-from: #F5A524; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,165,36,0)); }
.via-cyan-400    { --tw-gradient-stops: var(--tw-gradient-from), #22D3EE, var(--tw-gradient-to, rgba(34,211,238,0)); }
.to-emerald-400  { --tw-gradient-to: #34D399; }
.to-amber-400    { --tw-gradient-to: #FBBF24; }

/* Once a gradient IS present the clip works, so restore transparency. */
.text-transparent.bg-clip-text.bg-gradient-to-r,
.text-transparent.bg-clip-text.bg-gradient-to-l,
.text-transparent.bg-clip-text.bg-gradient-to-br { -webkit-text-fill-color: transparent; }

/* ===================================================================
   EG_ICON_SIZING
   -------------------------------------------------------------------
   Measured in a real browser on /faculty:

     svg.w-4.h-4  rendered 365 x 365 px   (should be 16px)
     svg.w-5.h-5  rendered 205 x 205 px   (should be 20px)

   The width and height utilities are absent from the served CSS
   entirely, so an inline SVG with no intrinsic size stretches to fill
   its flex container. That is why the dossier arrows and the stat-tile
   icons dwarfed the cards they belong to.

   The full numeric scale is defined here so the same failure cannot
   recur on another page with a different size class.
   =================================================================== */

.w-0{width:0}.w-1{width:.25rem}.w-2{width:.5rem}.w-3{width:.75rem}
.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}
.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}
.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}
.w-24{width:6rem}.w-28{width:7rem}.w-32{width:8rem}.w-36{width:9rem}
.w-40{width:10rem}.w-48{width:12rem}.w-56{width:14rem}.w-64{width:16rem}

.h-0{height:0}.h-1{height:.25rem}.h-2{height:.5rem}.h-3{height:.75rem}
.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}
.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}
.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}
.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-36{height:9rem}
.h-40{height:10rem}.h-48{height:12rem}.h-56{height:14rem}.h-64{height:16rem}

/* A safety net for the general case: an inline SVG inside a button or
   a card should never outgrow its line. If a size class is ever missing
   again the icon stays sane instead of swallowing the layout. */
button svg:not([width]),
.faculty-card svg:not([width]) { max-width: 2rem; max-height: 2rem; flex: 0 0 auto; }

/* The sizing classes above are more specific than the safety net for
   the cases that legitimately want a larger icon. */
button svg.w-4, button svg.h-4 { width: 1rem;    height: 1rem;    max-width: 1rem;    max-height: 1rem; }
button svg.w-5, button svg.h-5 { width: 1.25rem; height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; }
button svg.w-6, button svg.h-6 { width: 1.5rem;  height: 1.5rem;  max-width: 1.5rem;  max-height: 1.5rem; }

/* ===================================================================
   EG_DOSSIER_BUTTON
   -------------------------------------------------------------------
   The dossier button measured 494 x 397px - taller than the person it
   belongs to - because the oversized arrow forced the height. With the
   icon constrained it collapses to a normal control, but the layout is
   stated explicitly so it cannot drift again.
   =================================================================== */
.faculty-card button,
button[class*="bg-slate-900"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 0;
  height: auto;
  padding: .95rem 1.25rem;
  line-height: 1.2;
}

/* ===================================================================
   EG_STAT_TILE
   -------------------------------------------------------------------
   The expertise / publications / accolades tiles inherited the same
   oversized icons. Constrain the icon and give the tile a consistent
   rhythm so the four read as one row rather than four different blocks.
   =================================================================== */
.faculty-card [class*="bg-slate-50"] svg,
[class*="rounded-2xl"][class*="bg-slate-50"] svg {
  width: 1.5rem;
  height: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
  margin-bottom: .5rem;
}

/* ===================================================================
   EG_ASSISTANT_CARD
   -------------------------------------------------------------------
   Dhruv Kumar's avatar is a gradient tile with "DK" in white text:
       bg-gradient-to-br from-indigo-500 to-cyan-500
   Those gradient stops are not defined, so the tile painted white and
   the white initials vanished into it - the empty box in the
   screenshot. Nothing is broken about the image; there is no image.
   =================================================================== */

.from-indigo-500 { --tw-gradient-from: #6366F1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99,102,241,0)); }
.to-cyan-500     { --tw-gradient-to: #06B6D4; }
.from-blue-500   { --tw-gradient-from: #3B82F6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59,130,246,0)); }
.to-blue-600     { --tw-gradient-to: #2563EB; }
.from-emerald-500{ --tw-gradient-from: #10B981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16,185,129,0)); }
.to-emerald-600  { --tw-gradient-to: #059669; }

.text-indigo-500 { color: #6366F1; }
.border-slate-100{ border-color: #F1F5F9; }
.bg-slate-50     { background-color: #F8FAFC; }

/* Belt and braces: an avatar tile that still resolves to no background
   falls back to a readable neutral rather than white-on-white. */
[class*="rounded-"][class*="bg-gradient"]:not([style*="background"]) {
  background-color: #6366F1;
}

/* ===================================================================
   EG_SECTION_SPACING
   -------------------------------------------------------------------
   "Assistant Faculty" sat hard against the cards above it, so the
   heading read as part of the previous block. The chief-faculty grid
   also needs bottom clearance now that the cards are equal height.
   =================================================================== */
.faculty-card { margin-bottom: 0; }

h2 + .grid, h3 + .grid { margin-top: 1.5rem; }

/* A clear band between the two faculty tiers. */
section > .max-w-7xl > h2:not(:first-child),
section > div > h2:not(:first-child) { margin-top: 4rem; }

/* ===================================================================
   EG_SPACING_SCALE
   -------------------------------------------------------------------
   pb-4 and pt-4 were undefined, among others, so the "Assistant
   Faculty" header band had no padding and its underline sat tight
   against the cards above - the heading read as part of the previous
   block rather than as a new section.

   The directional padding and margin scale is defined in full so a
   missing spacing class cannot quietly collapse a layout again.
   =================================================================== */

.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.p-10{padding:2.5rem}.p-12{padding:3rem}

.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}
.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.pt-10{padding-top:2.5rem}
.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-24{padding-top:6rem}
.pt-32{padding-top:8rem}

.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}
.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}
.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}
.pb-24{padding-bottom:6rem}.pb-32{padding-bottom:8rem}

.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}

.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-8{margin-bottom:2rem}

/* The assistant-faculty band specifically: give it real clearance from
   the chief-faculty cards above, which are equal height and end flush. */
.faculty-card ~ div > h2,
div[class*="border-b"][class*="pb-"] { margin-top: 3.5rem; }