/* ==========================================================================
   content-blocks.css  -  Block-specific CSS for UB Elements Content Blocks
   University of Bridgeport · plugin: ub-elements
   ========================================================================== */

/* ==========================================================================
   program.css  -  Program detail pages (pattern established on MS in AI)
   University of Bridgeport

   Load order: style.css → home.css (shared v2 layer) → program.css
   home.css supplies the brand tokens, --ub-blue-text, --section-pad,
   --wedge, .reveal, .eyebrow-rule, .display-*, .btn-ghost, .sticky-cta,
   .scroll-progress. Nothing here re-declares them.

   INTENT
   A program page is a decision page, not a brochure. Its job is to answer,
   in order: can I get in → what will I actually learn → where does it lead
   → what does it cost me in time → how do I start. Everything below is
   ordered to that sequence, and the two facts a graduate STEM applicant
   screens on first (credits/duration and STEM-OPT eligibility) are in the
   fact rail above the fold.

   Reused brand devices: the diagonal wedge, the 3px UB Blue rule as the
   marker for a fact, 0px radius, oversized numerals for scale contrast.
   ========================================================================== */

:root {
  /* ---- Hero / fact-rail interlock ------------------------------------
     The fact rail rides UP over the hero's bottom edge. Both positions
     are derived from one variable so changing the overlap cannot leave
     the hero copy sitting underneath the rail (the bug that bit the
     homepage switcher). */
  --fact-overlap: 54px;
  --fact-clear: 40px;     /* air between hero copy and the rail          */
}

/* --------------------------------------------------------------------------
   Body-copy link colour, scoped per section.
   Deliberately NOT a blanket `.v2 a` rule  -  at that specificity it
   outranks the header/footer chrome rules in style.css and repaints the
   whole nav. Same discipline as home.css.
   -------------------------------------------------------------------------- */
.v2 .pg-onramp a:not([class*="btn"]),
.v2 .pg-conc a:not([class*="btn"]),
.v2 .pg-path a:not([class*="btn"]),
.v2 .pg-recog a:not([class*="btn"]),
.v2 .pg-admit a:not([class*="btn"]),
.v2 .pg-faq a:not([class*="btn"]),
.v2 .pg-more a:not([class*="btn"]):not(.pg-more-card) {
  color: var(--ub-blue-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.pg-hero {
  position: relative;
  background-color: var(--ub-purple-deep);
  background-image: url('../assets/images/legacy/programs-ai-lg.jpg');
  background-size: cover;
  /* NOT background-attachment: fixed  -  scrolling happens inside
     .main-content-wrapper, and `fixed` anchors to the viewport instead,
     which strands the image. */
  background-position: center 32%;
  overflow: hidden;
}
.pg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(98deg,
    rgba(27,16,35,0.96) 0%,
    rgba(42,18,64,0.92) 38%,
    rgba(42,18,64,0.62) 70%,
    rgba(42,18,64,0.34) 100%);
}
/* Signature wedge */
.pg-hero::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 46%;
  background: linear-gradient(150deg, rgba(89,45,130,0.6) 0%, rgba(89,45,130,0) 66%);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.pg-hero > .container { position: relative; z-index: 2; }

.pg-hero-inner {
  padding: 54px 0 calc(var(--fact-overlap) + var(--fact-clear));
  max-width: 47rem;
  border-left: 3px solid var(--ub-blue);
  padding-left: 32px;
}

.pg-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  margin-bottom: 24px;
}
.pg-crumb a { color: rgba(255,255,255,0.66); text-decoration: none; }
.pg-crumb a:hover { color: var(--white); text-decoration: underline; }
.pg-crumb span[aria-current] { color: var(--white); font-weight: 600; }
.pg-crumb i { color: rgba(255,255,255,0.34); font-size: 0.64rem; }

.pg-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FD9F5;
  margin-bottom: 18px;
}
.pg-kicker .sep { color: rgba(255,255,255,0.3); }
/* STEM flag reads as a credential, so it gets a chip rather than plain text */
.pg-kicker .stem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ub-blue);
  color: var(--ink);
  padding: 5px 11px;
  letter-spacing: 0.1em;
}

.pg-hero h1 {
  font-size: clamp(2.5rem, 5.1vw, 4.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.034em;
  color: var(--white);
}
/* Degree abbreviation as a set-apart line rather than "(MS)" wrapping
   onto its own orphan line inside the h1. */
.pg-degree-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}
.pg-degree-line .deg {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.24);
  padding: 4px 12px;
  color: var(--white);
  letter-spacing: 0.04em;
}

.pg-hero .lede {
  font-size: 1.17rem;
  line-height: 1.64;
  color: rgba(255,255,255,0.87);
  margin-top: 22px;
  max-width: 35rem;
}
.pg-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ==========================================================================
   1B. PAGE HERO V2 (Asymmetric Editorial Split Hero)
   Deep purple/indigo canvas, crisp typography, sharp framed visual,
   strictly sharp corners (border-radius: 0)
   ========================================================================== */
.page-hero-v2 {
  position: relative;
  background: linear-gradient(135deg, #180928 0%, #2f1246 60%, #120826 100%);
  color: #ffffff;
  padding: 56px 0 72px;
  overflow: hidden;
  border-bottom: 3px solid #7FD9F5;
}

.page-hero-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 85% 15%, rgba(127, 217, 245, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 85%, rgba(75, 29, 107, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero-v2-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 48px;
  align-items: center;
}

.page-hero-v2--no-image .page-hero-v2-container {
  grid-template-columns: 1fr;
  max-width: var(--measure, 1384px);
}
.page-hero-v2--no-image .page-hero-v2-col-content {
  max-width: 960px;
}

/* Breadcrumbs */
.hero-v2-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.7);
}
.hero-v2-breadcrumbs a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-v2-breadcrumbs a:hover {
  color: #7FD9F5;
  text-decoration: underline;
}
.hero-v2-breadcrumbs .crumb-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
}
.hero-v2-breadcrumbs .crumb-current {
  color: #7FD9F5;
}

/* Kicker & Badges */
.hero-v2-kicker-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.hero-v2-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7FD9F5;
}
.hero-v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(127, 217, 245, 0.12);
  border: 1px solid rgba(127, 217, 245, 0.28);
  border-radius: 0;
  color: #7FD9F5;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Typography */
.hero-v2-title {
  font-size: clamp(2.3rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero-v2-lede {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 640px;
}

/* Actions / Buttons */
.hero-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
}
.hero-v2-actions .btn {
  border-radius: 0 !important;
  font-weight: 700;
  padding: 14px 28px;
}
.hero-v2-actions .btn-primary {
  background: #7FD9F5;
  color: #120826;
  border: 1px solid #7FD9F5;
}
.hero-v2-actions .btn-primary:hover {
  background: #ffffff;
  color: #120826;
  border-color: #ffffff;
}
.hero-v2-actions .btn-outline-light,
.hero-v2-actions .btn-glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  backdrop-filter: blur(8px);
}
.hero-v2-actions .btn-outline-light:hover,
.hero-v2-actions .btn-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  color: #ffffff;
}

/* Highlights Rail */
.hero-v2-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-v2-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 3px solid #7FD9F5;
  border-radius: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: #ffffff;
}
.hero-v2-highlight-pill .h-label {
  color: #e5e7eb;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.hero-v2-highlight-pill .h-val {
  color: #7FD9F5;
  font-weight: 800;
}

/* Visual Column */
.page-hero-v2-col-visual {
  position: relative;
}
.hero-v2-image-frame {
  position: relative;
  z-index: 1;
}
.hero-v2-accent-frame {
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 2px solid #7FD9F5;
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-v2-image-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.55);
}
.hero-v2-floating-badge {
  position: absolute;
  bottom: 24px;
  left: -20px;
  z-index: 3;
  background: #ffffff;
  color: #120826;
  border-radius: 0;
  border-left: 4px solid var(--ub-purple, #4b1d6b);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  padding: 12px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-v2-floating-badge i {
  color: var(--ub-purple, #4b1d6b);
}

@media (max-width: 991px) {
  .page-hero-v2 {
    padding: 44px 0 56px;
  }
  .page-hero-v2-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .page-hero-v2-col-visual {
    max-width: 540px;
  }
  .hero-v2-accent-frame {
    right: -10px;
    bottom: -10px;
  }
  .hero-v2-image-frame img {
    height: 320px;
  }
  .hero-v2-floating-badge {
    left: 12px;
    bottom: 12px;
  }
}

/* ==========================================================================
   1C. PAGE HERO V3 (Clean Magazine / At-A-Glance Split Banner)
   Porcelain daylight canvas, architectural top gradient stripe,
   authoritative typography, interactive quick-action card
   ========================================================================== */
.page-hero-v3 {
  position: relative;
  background: #ffffff;
  border-bottom: 2px solid #e8ecf2;
  padding: 48px 0 64px;
  overflow: hidden;
}
.hero-v3-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #4b1d6b 0%, #0077aa 50%, #7FD9F5 100%);
}

.hero-v3-container {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 0 24px;
}

/* Breadcrumbs */
.hero-v3-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #6c757d;
}
.hero-v3-breadcrumbs a {
  color: #4b5563;
  text-decoration: none;
}
.hero-v3-breadcrumbs a:hover {
  color: var(--ub-purple, #4b1d6b);
  text-decoration: underline;
}
.hero-v3-breadcrumbs .crumb-sep {
  color: #adb5bd;
}
.hero-v3-breadcrumbs .crumb-current {
  color: var(--ub-purple, #4b1d6b);
  font-weight: 700;
}

/* Header */
.hero-v3-header {
  margin-bottom: 24px;
}
.hero-v3-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ub-purple, #4b1d6b);
  margin-bottom: 8px;
}
.hero-v3-title {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--ub-purple, #4b1d6b);
  margin: 0;
  letter-spacing: -0.025em;
}

/* Body Grid */
.hero-v3-body-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: start;
}
.hero-v3--no-sidebar .hero-v3-body-grid {
  grid-template-columns: 1fr;
  max-width: 920px;
}

.hero-v3-lede {
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  line-height: 1.65;
  color: #374151;
  margin: 0 0 28px;
}

.hero-v3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.hero-v3-actions .btn {
  border-radius: 0 !important;
  font-weight: 700;
  padding: 14px 28px;
}
.hero-v3-actions .btn-primary {
  background: var(--ub-purple, #4b1d6b);
  color: #ffffff;
  border: 1px solid var(--ub-purple, #4b1d6b);
}
.hero-v3-actions .btn-primary:hover {
  background: #36134f;
  border-color: #36134f;
  color: #ffffff;
}
.hero-v3-actions .btn-secondary,
.hero-v3-actions .btn-outline-primary {
  background: transparent;
  color: var(--ub-purple, #4b1d6b);
  border: 2px solid var(--ub-purple, #4b1d6b);
}
.hero-v3-actions .btn-secondary:hover,
.hero-v3-actions .btn-outline-primary:hover {
  background: var(--ub-purple, #4b1d6b);
  color: #ffffff;
}

/* Sidebar Quick Card */
.hero-v3-sidebar {
  position: relative;
}
.hero-v3-card {
  background: #f8f9fc;
  border: 1px solid #e1e6ee;
  border-top: 4px solid var(--ub-blue, #0077aa);
  border-radius: 0;
  padding: 24px 26px;
  box-shadow: 0 8px 24px -6px rgba(18, 8, 38, 0.08);
}
.hero-v3-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e9f0;
}
.hero-v3-card-header i {
  color: var(--ub-blue, #0077aa);
  font-size: 1.15rem;
}
.hero-v3-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #120826;
  margin: 0;
}

.hero-v3-quicklinks {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-v3-quicklinks li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 0;
  color: #1f2937;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hero-v3-quicklinks li a:hover {
  background: #ffffff;
  border-color: var(--ub-blue, #0077aa);
  color: var(--ub-blue, #0077aa);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 119, 170, 0.12);
}
.hero-v3-quicklinks li a i {
  color: var(--ub-blue, #0077aa);
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}
.hero-v3-quicklinks li a:hover i {
  transform: translateX(3px);
}

.hero-v3-card-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #e5e9f0;
}
.hero-v3-card-contact .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-v3-card-contact .contact-link:hover {
  color: var(--ub-purple, #4b1d6b);
}
.hero-v3-card-contact .contact-link i {
  color: var(--ub-purple, #4b1d6b);
  width: 16px;
}

@media (max-width: 991px) {
  .page-hero-v3 {
    padding: 38px 0 48px;
  }
  .hero-v3-body-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- Fact rail ---------- */
.pg-facts {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--fact-overlap) * -1);
  padding-bottom: 0;
}
.pg-facts-inner {
  background: var(--white);
  box-shadow: 0 24px 54px rgba(27,16,35,0.18);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.pg-fact {
  padding: 26px 24px 24px;
  border-right: 1px solid #E6EBEE;
}
.pg-fact:last-child { border-right: 0; }
.pg-fact .n {
  font-size: 1.72rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ub-purple);
}
.pg-fact .n small {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-light);
  display: block;
  margin-top: 4px;
}
.pg-fact .l {
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 3px solid var(--ub-blue);
  display: inline-block;
}

/* ==========================================================================
   2. STICKY JUMP BAR
   --pg-header-h is measured at runtime by program.js. The site header is
   sticky and its height changes at 768px (the centennial ribbon hides), so
   a hard-coded offset pins this bar underneath it at one breakpoint or the
   other.
   ========================================================================== */
.pg-jump {
  position: sticky;
  top: var(--pg-header-h, 0px);
  z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E6EBEE;
  margin-top: 24px;
}
/* Hero clearance when followed by proof strip / facts rail */
.college-page-hero {
  padding-bottom: 104px;
}
.college-page-hero + .proof-strip,
.pg-hero + .proof-strip {
  margin-top: -36px;
  position: relative;
  z-index: 2;
}
.page-hero-v2 + .proof-strip,
.page-hero-v3 + .proof-strip {
  margin-top: 32px;
  position: relative;
  z-index: 2;
}
/* Spacing when jump bar follows a proof strip or facts rail */
.proof-strip:has(+ .pg-jump) {
  padding-bottom: 24px;
}
.proof-strip + .pg-jump,
.pg-facts + .pg-jump {
  margin-top: 16px;
}
/* If hero is followed immediately by jump bar */
.college-page-hero + .pg-jump,
.pg-hero + .pg-jump,
.page-hero-v2 + .pg-jump,
.page-hero-v3 + .pg-jump {
  margin-top: 0;
}
/* Safety rule: in case jump bar is placed before proof strip */
.pg-jump + .proof-strip {
  margin-top: 0;
  padding-bottom: 40px;
}
.pg-jump-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pg-jump-links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  flex: 1 1 auto;
}
.pg-jump-links::-webkit-scrollbar { display: none; }
.pg-jump-links a {
  flex-shrink: 0;
  padding: 17px 15px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  /* Colour only  -  NOT `all`. With the border transitioning, the outgoing
     link's rule fades out while the incoming one fades in, so mid-scroll
     two links read as active and the bar smears. */
  transition: color 0.2s ease;
}
.pg-jump-links a:hover { color: var(--ub-purple); border-bottom-color: #D5DDE2; }
.pg-jump-links a.current {
  color: var(--ub-purple);
  border-bottom-color: var(--ub-blue);
}
.pg-jump-act { flex-shrink: 0; display: flex; gap: 9px; }
.pg-jump-act .btn { padding: 10px 20px; font-size: 0.88rem; }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.pg-sec { padding: var(--section-pad) 0; }
.pg-sec--light { background: var(--bg-light); }
.pg-sec--white { background: var(--white); }

/* Adjacent sections on the SAME background stack two --section-pad values into
   one undivided gap  -  2 × 152px, with no colour change to explain it. A tint
   change earns that much air; an invisible seam does not. Collapse the pair to
   a single pad by dropping the lower section's top padding.
 *
 * Keyed to the tinted sections by name because .pg-embed and .pg-conc set no
 * background of their own and inherit white, so "same background" is not
 * something a selector can test for. Sections listed in the light group are the
 * ones that set --bg-light; everything else on a program page is white.
 *
 * Block order is editorial, so any pair can end up adjacent  -  this is a rule
 * about the element pair, not about one page's running order. */
.pg-sec + .pg-sec { padding-top: 0; }

/* A light section after a white one (or the reverse) keeps its full pad: the
   tint boundary is doing visible work and needs the room to read as a break.
   Custom content blocks also maintain their vertical breathing room when adjacent. */
.pg-sec + .pg-path,
.pg-sec + .pg-recog,
.pg-sec + .pg-admit,
.pg-sec + .pg-more,
.pg-sec + .pg-sec--light,
.pg-sec + .pg-onramp,
.pg-sec + .pg-conc,
.pg-sec + .ub-profile-sec,
.pg-sec + .pg-out,
.pg-sec + .pg-voices,
.pg-sec + .pg-embed,
.pg-path + .pg-sec,
.pg-recog + .pg-sec,
.pg-admit + .pg-sec,
.pg-more + .pg-sec,
.pg-sec--light + .pg-sec,
.pg-onramp + .pg-sec,
.pg-conc + .pg-sec,
.ub-profile-sec + .pg-sec,
.pg-out + .pg-sec,
.pg-voices + .pg-sec,
.pg-embed + .pg-sec { padding-top: var(--section-pad); }

/* Split Sections & FAQ Sections - normalized, elegant vertical rhythm */
.ub-split-sec,
.pg-sec.ub-split-sec {
  padding: clamp(3rem, 4.5vw, 4.5rem) 0;
}
.pg-faq,
.pg-sec.pg-faq {
  padding: clamp(3rem, 4.5vw, 4.5rem) 0;
}
.ub-split-sec .split-row {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.ub-split-sec .split-row:last-child {
  margin-bottom: 0 !important;
}
.pg-faq .pg-head {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* Adjacent split/faq sections - collapse double padding to avoid dead whitespace */
.ub-split-sec + .pg-faq,
.pg-faq + .ub-split-sec,
.ub-split-sec + .ub-split-sec,
.pg-faq + .pg-faq {
  padding-top: clamp(0.75rem, 1.5vw, 1.5rem) !important;
}
.pg-sec + .ub-split-sec,
.ub-split-sec + .pg-sec,
.pg-sec + .pg-faq,
.pg-faq + .pg-sec {
  padding-top: clamp(2rem, 3vw, 3rem);
}

/* Contact Strip Section - ensure top and bottom breathing room even when following another .pg-sec */
.ub-contact-strip-sec { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.pg-sec + .ub-contact-strip-sec,
.pg-sec.ub-contact-strip-sec { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
.ub-contact-strip__inner { border-radius: 0 !important; }

/* Two tinted sections in a row are the same-background case again. These win by
   coming later in source order at equal specificity (0,2,0). */
.pg-path + .pg-recog,
.pg-path + .pg-admit,
.pg-path + .pg-more,
.pg-recog + .pg-path,
.pg-recog + .pg-admit,
.pg-recog + .pg-more,
.pg-admit + .pg-path,
.pg-admit + .pg-recog,
.pg-admit + .pg-more,
.pg-more + .pg-path,
.pg-more + .pg-recog,
.pg-more + .pg-admit,
.pg-sec--light + .pg-sec--light { padding-top: 0; }
.pg-head { max-width: 47rem; margin-bottom: 44px; }
.pg-head .display-lg + .section-lede { margin-top: 18px; }

/* Anchor targets sit under the sticky header + jump bar; scroll-margin
   keeps a jumped-to heading from hiding behind both. */
.pg-anchor { scroll-margin-top: calc(var(--pg-header-h, 0px) + 74px); }

/* ==========================================================================
   3. ONRAMP  -  "does this fit my background?"
   The single biggest objection to a graduate AI degree is "my bachelor's
   isn't in computer science". This answers it before the curriculum, which
   is why it is section one and not a bullet list further down.
   ========================================================================== */
.pg-onramp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.pg-onramp-card {
  background: var(--white);
  border: 1px solid #E1E7EA;
  border-top: 4px solid var(--ub-purple);
  padding: 34px 30px 30px;
  position: relative;
  transition: var(--transition);
}
.pg-onramp-card:hover {
  border-top-color: var(--ub-blue);
  box-shadow: 0 18px 40px rgba(27,16,35,0.1);
  transform: translateY(-3px);
}
.pg-onramp-card .who {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ub-blue-text);
  margin-bottom: 12px;
}
.pg-onramp-card h3 {
  font-size: 1.34rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.016em;
  color: var(--ub-purple);
  margin-bottom: 13px;
}
.pg-onramp-card p {
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--text-light);
}
.pg-onramp-card .answer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #EDF1F3;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  gap: 10px;
}
.pg-onramp-card .answer i { color: var(--ub-blue); margin-top: 4px; flex-shrink: 0; }

/* ==========================================================================
   4. CONCENTRATIONS  -  the decision engine
   Choosing a track is the real decision on this page, so it gets an
   interactive tablist instead of four inert pills. All four panels are in
   the HTML and merely hidden, so the content stays crawlable for the
   AEO/SEO layer.
   ========================================================================== */
.pg-conc { background: var(--white); }
.pg-conc-shell {
  display: grid;
  /* minmax(0,…) not 1fr: a bare 1fr track has an automatic minimum of the
     item's min-content, and the rail's min-content is set by the tabs'
     210px min-width in the horizontal layout. That pushed the grid wider
     than the viewport and produced 471px of horizontal overflow at 390px. */
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 0;
  border: 1px solid #E1E7EA;
}
/* The rail is the grid cell; the tablist is nested inside it so the advisor
   nudge below is NOT a child of role="tablist" (a tablist may only contain
   tabs). */
.pg-conc-rail {
  background: var(--bg-light);
  border-right: 1px solid #E1E7EA;
  display: flex;
  flex-direction: column;
}
.pg-conc-tabs { display: flex; flex-direction: column; min-width: 0; }
.pg-conc-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #E1E7EA;
  border-left: 4px solid transparent;
  padding: 24px 24px 22px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  display: block;
  width: 100%;
}
.pg-conc-tab:last-child { border-bottom: 0; }
.pg-conc-tab .num {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-light);
  display: block;
  margin-bottom: 7px;
}
.pg-conc-tab .name {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text-main);
  display: block;
}
.pg-conc-tab:hover { background: #ECF1F3; }
.pg-conc-tab[aria-selected="true"] {
  background: var(--ub-purple);
  border-left-color: var(--ub-blue);
}
.pg-conc-tab[aria-selected="true"] .num { color: #7FD9F5; }
.pg-conc-tab[aria-selected="true"] .name { color: var(--white); }
.pg-conc-tab:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: -3px; }

/* The tab rail is a grid cell, so it stretches to the height of the tallest
   panel and leaves dead grey below track 04. Rather than collapse the rail,
   the leftover space carries the nudge that belongs exactly here: the
   student who has read all four tracks and still can't choose. */
.pg-conc-aside {
  margin-top: auto;
  border-top: 1px solid #E1E7EA;
  padding: 24px;
}
.pg-conc-aside .k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 9px;
}
.pg-conc-aside p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 15px;
}
.pg-conc-aside .btn { width: 100%; text-align: center; }

.pg-conc-panels { padding: 40px 44px 44px; position: relative; }
.pg-conc-panel[hidden] { display: none; }
.pg-conc-panel h3 {
  font-size: 1.86rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ub-purple);
  margin-bottom: 14px;
}
.pg-conc-panel > p {
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--text-light);
  max-width: 40rem;
}
.pg-conc-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 32px;
}
.pg-conc-col h4 {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ub-blue);
  margin-bottom: 15px;
  display: inline-block;
}
.pg-conc-col ul { display: grid; gap: 9px; }
.pg-conc-col li {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--text-main);
  display: flex;
  gap: 10px;
}
.pg-conc-col li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ub-purple);
  flex-shrink: 0;
  margin-top: 8px;
}
.pg-conc-roles {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #EDF1F3;
}
.pg-conc-roles h4 {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 13px;
}
.pg-role-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pg-role-chip {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ub-purple-dark);
  background: var(--bg-light);
  border-left: 3px solid var(--ub-blue);
  padding: 8px 14px;
}
.pg-conc-note {
  margin-top: 28px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-light);
  background: var(--bg-light);
  border-left: 3px solid var(--ub-purple);
  padding: 14px 18px;
}

/* ==========================================================================
   5. CURRICULUM PATH
   ========================================================================== */
.pg-path,
.pg-sec.pg-path {
  background: var(--bg-light);
  padding: clamp(2.75rem, 4.5vw, 4.25rem) 0;
}
.pg-sec + .pg-path,
.pg-path + .pg-sec {
  padding-top: clamp(2.5rem, 4vw, 3.75rem);
}
.pg-path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pg-step {
  background: var(--white);
  padding: 0 0 28px;
  border: 1px solid #E1E7EA;
  position: relative;
}
/* Wedge-cut corner: the hero's diagonal, reduced to a corner detail. */
.pg-step::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 22px 22px;
  border-color: transparent transparent var(--ub-blue) transparent;
}
.pg-step-head {
  background: var(--ub-purple);
  color: var(--white);
  padding: 18px 24px 16px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.pg-step:nth-child(2) .pg-step-head { background: #4E2673; }
.pg-step:nth-child(3) .pg-step-head { background: var(--ub-purple-dark); }
.pg-step:nth-child(4) .pg-step-head { background: var(--ub-purple-deep); }
.pg-step-head .stage {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.pg-step-head .num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
  margin-top: 2px;
}
.pg-step-body { padding: 22px 24px 0; }
.pg-step-body h3 {
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.26;
  color: var(--ub-purple);
  margin-bottom: 11px;
}
.pg-step-body p {
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--text-light);
}
.pg-path-note {
  margin-top: 30px;
  background: var(--white);
  border-left: 4px solid var(--ub-blue);
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pg-path-note i { color: var(--ub-blue-text); font-size: 1.15rem; margin-top: 3px; }
.pg-path-note p { font-size: 0.97rem; line-height: 1.66; color: var(--text-main); }
.pg-path-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 13px; }

/* Path Footer - Centered, comfortable padding on paragraph and link */
.pg-path-foot,
.path-foot {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding: 0 1rem;
}

.pg-path-foot p,
.path-foot p {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--text-light, #555e68);
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  padding: 0.25rem 0.5rem;
}

.pg-path-foot a,
.pg-path-foot .btn,
.path-foot a,
.path-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 34px;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  border-radius: var(--btn-radius, 6px);
  text-decoration: none;
  transition: var(--transition, all 0.2s ease);
}

.pg-path-foot a:hover,
.pg-path-foot .btn:hover,
.path-foot a:hover,
.path-foot .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
}

/* ==========================================================================
   6. LABS & COMPUTE / ICON CARDS
   Accessible, modern cards supporting dark (Midnight) & light variants
   ========================================================================== */
.pg-labs {
  position: relative;
  background: var(--ink, #120826);
  color: var(--white, #ffffff);
  padding: var(--section-pad, 100px 0);
  overflow: hidden;
}
.pg-labs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 42%;
  background: radial-gradient(circle at 10% 20%, rgba(89, 45, 130, 0.45) 0%, rgba(89, 45, 130, 0) 70%);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
  pointer-events: none;
}
.pg-labs > .container { position: relative; z-index: 2; }
.pg-labs .eyebrow-rule,
.v2 .pg-labs .eyebrow-rule { color: #7FD9F5; }
.pg-labs h2,
.pg-labs .display-lg,
.v2 .pg-labs h2,
.v2 .pg-labs .display-lg,
.v2 .pg-labs .pg-head h2 {
  color: var(--white, #ffffff);
}
.pg-labs .section-lede,
.v2 .pg-labs .section-lede { color: rgba(255, 255, 255, 0.88); font-size: 1.125rem; line-height: 1.6; }

.pg-labs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Base / Dark Card */
.pg-lab {
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid #7FD9F5;
  border-radius: 0;
  padding: 32px 28px 28px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}
.pg-lab:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(127, 217, 245, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 18px 38px -8px rgba(0, 0, 0, 0.65), 0 0 20px rgba(127, 217, 245, 0.12);
}

/* Icon Box */
.pg-lab-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: rgba(127, 217, 245, 0.12);
  border: 1px solid rgba(127, 217, 245, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.pg-lab:hover .pg-lab-icon-box {
  transform: scale(1.05);
  background: rgba(127, 217, 245, 0.18);
  border-color: rgba(127, 217, 245, 0.45);
}
.pg-lab-icon-box i,
.pg-lab > i {
  font-size: 1.35rem;
  color: #7FD9F5;
  display: block;
}
.pg-lab > i {
  margin-bottom: 18px;
}

/* Abbreviation Badge */
.pg-lab .abbr {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7FD9F5;
  background: rgba(127, 217, 245, 0.12);
  border: 1px solid rgba(127, 217, 245, 0.24);
  padding: 3px 8px;
  border-radius: 0;
  margin-bottom: 10px;
}

/* Heading & Text */
.pg-lab h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--white, #ffffff);
  margin: 0 0 12px;
}
.pg-lab p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 12px;
}

.pg-lab:has(.pg-lab-link) {
  cursor: pointer;
}
.pg-lab:has(.pg-lab-link) .pg-lab-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.pg-lab-action {
  margin-top: auto;
  padding-top: 14px;
  position: relative;
  z-index: 3;
}
.pg-lab-link,
.pg-lab .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #7FD9F5 !important;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.pg-lab-link .arrow,
.pg-lab .btn-text .arrow {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pg-lab-link:hover,
.pg-lab .btn-text:hover {
  color: #ffffff !important;
}
.pg-lab:hover .pg-lab-link .arrow,
.pg-lab:hover .btn-text .arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   Clean Light Theme Variant (.pg-labs--light)
   ========================================================================== */
.pg-labs--light {
  background: var(--bg-light, #f8f9fc);
  color: var(--ink, #120826);
}
.pg-labs--light::before {
  background: radial-gradient(circle at 10% 20%, rgba(75, 29, 107, 0.08) 0%, rgba(75, 29, 107, 0) 70%);
}
.pg-labs--light .eyebrow-rule,
.v2 .pg-labs--light .eyebrow-rule {
  color: var(--ub-purple, #4b1d6b);
}
.pg-labs--light h2,
.pg-labs--light .display-lg,
.v2 .pg-labs--light h2,
.v2 .pg-labs--light .display-lg,
.v2 .pg-labs--light .pg-head h2 {
  color: var(--ink, #120826);
}
.pg-labs--light .section-lede,
.v2 .pg-labs--light .section-lede {
  color: var(--text-muted, #4b5563);
}

.pg-labs--light .pg-lab {
  background: #ffffff;
  border: 1px solid rgba(18, 8, 38, 0.08);
  border-top: 3px solid var(--ub-purple, #4b1d6b);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(18, 8, 38, 0.06);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}
.pg-labs--light .pg-lab:hover {
  background: #ffffff;
  border-color: rgba(75, 29, 107, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(18, 8, 38, 0.12), 0 0 20px rgba(75, 29, 107, 0.06);
}
.pg-labs--light .pg-lab-icon-box {
  border-radius: 6px;
  background: rgba(75, 29, 107, 0.08);
  border-color: rgba(75, 29, 107, 0.16);
}
.pg-labs--light .pg-lab:hover .pg-lab-icon-box {
  background: rgba(75, 29, 107, 0.14);
  border-color: rgba(75, 29, 107, 0.3);
}
.pg-labs--light .pg-lab-icon-box i,
.pg-labs--light .pg-lab > i {
  color: var(--ub-purple, #4b1d6b);
}
.pg-labs--light .pg-lab .abbr {
  color: var(--ub-purple, #4b1d6b);
  background: rgba(75, 29, 107, 0.08);
  border-color: rgba(75, 29, 107, 0.18);
}
.pg-labs--light .pg-lab h3 {
  color: var(--ink, #120826);
}
.pg-labs--light .pg-lab p {
  color: #4b5563;
}
.pg-labs--light .pg-lab-link,
.pg-labs--light .pg-lab .btn-text {
  color: var(--ub-purple, #4b1d6b) !important;
}
.pg-labs--light .pg-lab-link:hover,
.pg-labs--light .pg-lab .btn-text:hover {
  color: #0077aa !important;
}

/* ---------- Video facade ----------
   The iframe is not loaded until clicked: it keeps the third-party request
   (and its cookies) off first paint, and it avoids the dead black rectangle
   an unloaded YouTube embed leaves behind. */
.pg-video {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
}
.pg-video-copy h3 {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--white);
  margin-bottom: 14px;
}
.pg-video-copy p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.74);
  margin-bottom: 24px;
}
.pg-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ub-purple) 0%, var(--ub-purple-deep) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  overflow: hidden;
}
.pg-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pg-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--white);
  font-family: inherit;
  transition: var(--transition);
}
.pg-video-play:hover { background: rgba(0,0,0,0.16); }
.pg-video-play .disc {
  width: 74px;
  height: 74px;
  border-radius: 50%;   /* inherently circular  -  the radius exception */
  background: var(--ub-blue);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding-left: 5px;
  transition: var(--transition);
}
.pg-video-play:hover .disc { transform: scale(1.07); }
.pg-video-play .cap {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.pg-video-play:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: -3px; }

/* ==========================================================================
   7. OUTCOMES
   ========================================================================== */
.pg-out { background: var(--white); }
.pg-out-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 46px;
  align-items: start;
}
.pg-out-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #E1E7EA;
  border: 1px solid #E1E7EA;
}
.pg-out-role {
  background: var(--white);
  padding: 22px 22px 20px;
}
.pg-out-role .t {
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ub-purple);
}
.pg-out-role .d {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-light);
  margin-top: 7px;
}
.pg-opt {
  background: var(--ub-purple);
  color: var(--white);
  padding: 34px 32px 32px;
  position: relative;
  overflow: hidden;
}
.pg-opt::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent var(--ub-blue) transparent;
}
.pg-opt .tag {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  background: var(--ub-blue);
  color: var(--ink);
  padding: 5px 11px;
  margin-bottom: 16px;
}
.pg-opt h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 13px;
}
.pg-opt p { font-size: 0.97rem; line-height: 1.7; color: rgba(255,255,255,0.84); }
.pg-opt p + p { margin-top: 13px; }
.pg-opt a { color: #7FD9F5; text-decoration: underline; text-underline-offset: 3px; }
.pg-opt a:hover { color: var(--white); }

/* Figures Institutional Research has not signed off on are visibly marked
   rather than invented. */
.pg-slot {
  margin-top: 22px;
  border: 2px dashed #C3CDD3;
  background: var(--bg-light);
  padding: 18px 20px;
}
.pg-slot .k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Was #8A97A0: 2.78:1 on bg-light, fails WCAG AA for normal text. */
  color: var(--text-light);
  margin-bottom: 6px;
}
.pg-slot p { font-size: 0.9rem; line-height: 1.58; color: var(--text-light); }

/* ==========================================================================
   8. RECOGNITION
   ========================================================================== */
.pg-recog { background: var(--bg-light); }
.pg-recog-inner {
  background: var(--white);
  border: 1px solid #E1E7EA;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: stretch;
}
/* No badge, no badge column. Without this the copy is auto-placed into the
   220px track reserved for the image and the whole panel becomes a column of
   two-word lines  -  which is what a program with no award looks like, and every
   program starts that way. The renderer sets the class; it is not left to the
   browser to infer. */
.pg-recog-inner--nobadge { grid-template-columns: 1fr; }
.pg-recog-badge {
  background: var(--ub-purple-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
}
.pg-recog-badge img { width: 152px; height: auto; display: block; }
.pg-recog-copy { padding: 42px 44px 40px; }
.pg-recog-copy h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--ub-purple);
  margin-bottom: 16px;
}
.pg-recog-copy p { font-size: 1.02rem; line-height: 1.72; color: var(--text-light); }
.pg-recog-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #EDF1F3;
}
.pg-recog-marks > div { border-top: 3px solid var(--ub-blue); padding-top: 12px; }
.pg-recog-marks .n {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ub-purple);
}
.pg-recog-marks .l {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.4;
}
.pg-footnote,
.pg-recog-copy .pg-footnote {   /* outranks .pg-recog-copy p, which set 1.02rem */
  margin-top: 22px;
  font-size: 0.83rem;
  font-style: italic;
  /* Was #8A97A0: 3.76:1 on white, fails WCAG AA for normal text. */
  color: var(--text-light);
}

/* ==========================================================================
   9. VOICES
   ========================================================================== */
.pg-voices { background: var(--white); }
.pg-voices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.pg-voice {
  background: var(--bg-light);
  border-left: 4px solid var(--ub-purple);
  padding: 36px 34px 32px;
  position: relative;
}
.pg-voice::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  right: 24px;
  font-size: 6rem;
  line-height: 1;
  font-weight: 800;
  color: rgba(89,45,130,0.1);
  pointer-events: none;
}
.pg-voice blockquote p {
  font-size: 1.13rem;
  line-height: 1.66;
  font-weight: 500;
  color: var(--text-main);
  position: relative;
  z-index: 1;
}
.pg-voice-by {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #DFE6EA;
}
.pg-voice-by img {
  width: 58px;
  height: 58px;
  border-radius: 50%;   /* inherently circular  -  the radius exception */
  object-fit: cover;
  flex-shrink: 0;
}
.pg-voice-by .who { font-size: 1rem; font-weight: 700; color: var(--ub-purple); }
.pg-voice-by .what { font-size: 0.85rem; color: var(--text-light); margin-top: 2px; }

/* ==========================================================================
   10. ADMISSION SNAPSHOT
   ========================================================================== */
.pg-admit { background: var(--bg-light); }
.pg-admit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.pg-admit-card {
  background: var(--white);
  border: 1px solid #E1E7EA;
  padding: 36px 34px 32px;
}
.pg-admit-card h3 {
  font-size: 1.34rem;
  font-weight: 700;
  color: var(--ub-purple);
  margin-bottom: 20px;
}
.pg-req { display: grid; gap: 15px; }
.pg-req li {
  display: flex;
  gap: 13px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--text-main);
}
.pg-req li i { color: var(--ub-blue); margin-top: 5px; flex-shrink: 0; }

/* Deadline timeline: the rule is the spine, the squares are the dates. */
.pg-dates { display: grid; gap: 0; }
.pg-date {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #EDF1F3;
  align-items: baseline;
}
.pg-date:last-child { border-bottom: 0; }
.pg-date .d {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ub-purple);
  border-left: 3px solid var(--ub-blue);
  padding-left: 12px;
}
.pg-date .t { font-size: 0.97rem; font-weight: 600; color: var(--text-main); }
.pg-date .s { font-size: 0.87rem; color: var(--text-light); margin-top: 3px; }
.pg-admit-card .btn { margin-top: 26px; }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.pg-faq { background: var(--white); }
.pg-faq .pg-head { max-width: 56rem; margin-inline: auto; text-align: center; }
.pg-faq .pg-head .eyebrow-rule { margin-inline: auto; }
.pg-faq-list { max-width: 56rem; margin-inline: auto; border-top: 1px solid #E1E7EA; }
.pg-faq details { border-bottom: 1px solid #E1E7EA; }
.pg-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 46px 22px 0;
  position: relative;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-main);
  transition: var(--transition);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary:hover { color: var(--ub-purple); }
.pg-faq summary::after {
  content: '\002B';
  position: absolute;
  right: 8px;
  top: 22px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ub-blue-text);
  transition: transform 0.25s ease;
}
.pg-faq details[open] summary { color: var(--ub-purple); }
.pg-faq details[open] summary::after { content: '\2212'; }
.pg-faq summary:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: 2px; }
.pg-faq-a { padding: 0 46px 26px 0; }
.pg-faq-a p {
  font-size: 1rem;
  line-height: 1.74;
  color: var(--text-light);
  max-width: 46rem;
}
.pg-faq-a p + p { margin-top: 12px; }

/* ==========================================================================
   12. MORE IN THIS PROGRAM (replaces the old left sidebar)
   ========================================================================== */
/* Full padding top AND bottom. It previously opened with `padding: 0`, which
   works only if whatever precedes it is white and supplies the gap itself  -  but
   the tint starts at the section box, so the heading's caps sat 15px under the
   colour change and read as clipped. A tinted band owns its own breathing room;
   this is the same rhythm every .pg-sec uses, and it holds whatever an editor
   drops above it. */
.pg-more { background: var(--bg-light); padding: var(--section-pad) 0; }
.pg-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pg-more-card {
  display: block;
  background: var(--white);
  border: 1px solid #E1E7EA;
  padding: 26px 24px 24px;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
}
.pg-more-card:hover {
  border-color: var(--ub-purple);
  box-shadow: 0 16px 34px rgba(27,16,35,0.1);
  transform: translateY(-3px);
}
.pg-more-card .k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ub-blue-text);
  margin-bottom: 10px;
}
.pg-more-card .t {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ub-purple);
}
.pg-more-card .s { font-size: 0.88rem; line-height: 1.55; color: var(--text-light); margin-top: 8px; }
.pg-more-card .go { font-size: 0.85rem; font-weight: 700; color: var(--ub-blue-text); margin-top: 16px; display: block; }
.pg-more-card .go i { transition: transform 0.25s ease; }
.pg-more-card:hover .go i { transform: translateX(4px); }

/* ==========================================================================
   12b. DEFERRED EMBED (ub/catalog-embed)
   --------------------------------------------------------------------------
   The catalog widget folded in from the old curriculum sub-page. It is the one
   element on a program page that is page-sized rather than section-sized, so it
   stays behind a click and the section reserves space for it rather than
   letting a vendor iframe shove the rest of the page around on arrival.
   ========================================================================== */
.pg-embed-card {
  border: 1px solid #E1E7EA;
  border-radius: 14px;
  background: var(--white);
  padding: 34px 32px 30px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.pg-embed-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  /* Holds the vertical space the iframe will take, so the click does not make
     everything below it jump. */
  min-height: 132px;
  justify-content: center;
}
.pg-embed-frame.is-loaded {
  display: block;
  min-height: 0;
}
.pg-embed-frame iframe {
  width: 100%;
  min-height: 560px;
  border: 0;
  border-radius: 10px;
  display: block;
}
.pg-embed-note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
  max-width: 44rem;
}
.pg-embed-fallback {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid #EEF2F4;
  font-size: 0.94rem;
}
.pg-embed-fallback a {
  color: var(--ub-blue-text);
  font-weight: 600;
  text-decoration: none;
}
.pg-embed-fallback a:hover { text-decoration: underline; }
.pg-embed-fallback i { font-size: 0.78rem; margin-left: 6px; }

/* ==========================================================================
   13. FINAL CTA  -  moved to style.css
   --------------------------------------------------------------------------
   The mockup's `.pg-cta` is now the `program` variant of `ub/cta-band`, which
   renders `class="cta-section pg-cta"` (see docs/programs-plugin-plan.md §5.4).
   Its rules moved to style.css next to `.cta-section` for one reason: cta-band
   is a generic block usable on any page, but program.css only loads when a
   program block is present. Left here, a CTA band on a page with no other
   program block would render unstyled.

   Nothing to see here. Selectors live in style.css § "CTA  -  program variant".
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .pg-facts-inner { grid-template-columns: repeat(3, 1fr); }
  /* With 5 items on a 3-column grid, items 4 and 5 form the last row; the
     right border on item 3 would then be an orphan edge. */
  .pg-fact:nth-child(3) { border-right: 0; }
  .pg-fact:nth-child(n+4) { border-top: 1px solid #E6EBEE; }

  .pg-onramp-grid { grid-template-columns: 1fr; }
  .pg-conc-shell { grid-template-columns: 1fr; }
  .pg-conc-rail {
    border-right: 0;
    border-bottom: 1px solid #E1E7EA;
    min-width: 0;
    overflow: hidden;   /* contains the tabs' horizontal scroll */
  }
  .pg-conc-tabs {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pg-conc-tabs::-webkit-scrollbar { display: none; }
  /* The rail is a horizontal strip here, so there is no leftover column for
     the nudge to fill. The section note and the sticky CTA carry it. */
  .pg-conc-aside { display: none; }
  .pg-conc-tab {
    flex-shrink: 0;
    min-width: 210px;
    border-bottom: 0;
    border-left: 0;
    border-top: 4px solid transparent;
    border-right: 1px solid #E1E7EA;
    padding: 18px 20px 16px;
  }
  .pg-conc-tab[aria-selected="true"] { border-left-color: transparent; border-top-color: var(--ub-blue); }
  .pg-conc-panels { padding: 32px 28px 36px; }
  .pg-path-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-labs-grid { grid-template-columns: 1fr; }
  .pg-video { grid-template-columns: 1fr; gap: 28px; }
  .pg-out-layout { grid-template-columns: 1fr; gap: 34px; }
  .pg-recog-inner { grid-template-columns: 1fr; }
  .pg-recog-badge { padding: 30px; }
  .pg-voices-grid { grid-template-columns: 1fr; }
  .pg-admit-grid { grid-template-columns: 1fr; }
  .pg-more-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pg-hero-inner { padding-left: 20px; max-width: none; }
  .pg-hero-ctas .btn, .pg-hero-ctas .btn-ghost { width: 100%; text-align: center; }
  .pg-facts-inner { grid-template-columns: 1fr; }
  .pg-fact { border-right: 0; border-top: 1px solid #E6EBEE; }
  .pg-fact:first-child { border-top: 0; }
  .pg-fact:nth-child(3) { border-right: 0; }

  .pg-jump { margin-top: 30px; }
  .pg-jump-inner { justify-content: flex-start; }
  /* The two buttons would eat the whole bar on a phone; the sticky CTA at
     the foot of the viewport already carries Apply / Request info. */
  .pg-jump-act { display: none; }
  .pg-jump-links a { padding: 14px 12px 11px; font-size: 0.86rem; }

  .pg-conc-cols { grid-template-columns: 1fr; gap: 24px; }
  .pg-path-grid { grid-template-columns: 1fr; }
  .pg-out-roles { grid-template-columns: 1fr; }
  .pg-recog-copy { padding: 30px 26px 28px; }
  .pg-voice { padding: 28px 24px 26px; }
  .pg-admit-card { padding: 28px 24px 26px; }
  .pg-more-grid { grid-template-columns: 1fr; }
  /* .pg-cta responsive rules moved to style.css with the rest of the variant. */
}



/* ==========================================================================
   COLLEGE HERO & TOOLBAR BLOCKS (ub/page-hero image variant & ub/toolbar)
   ========================================================================== */
.college-page-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 44px 0 104px;
    background-color: var(--ub-purple);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.college-page-hero + .proof-strip,
.pg-hero + .proof-strip {
    margin-top: -44px;
}

.college-page-hero .hero-overlay {
    background: linear-gradient(135deg, rgba(89, 45, 130, 0.92) 0%, rgba(0, 167, 224, 0.52) 100%);
}

.college-page-hero.college-hero--ebe .hero-overlay {
    background: linear-gradient(135deg, rgba(89, 45, 130, 0.9) 0%, rgba(0, 130, 195, 0.62) 100%);
}

.college-page-hero.college-hero--chs .hero-overlay {
    background: linear-gradient(135deg, rgba(89, 45, 130, 0.94) 0%, rgba(0, 110, 150, 0.48) 100%);
}

.college-hero-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 10px;
}

.college-hero-inner {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 760px;
}

.college-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.college-hero-lead {
    font-size: 1.08rem;
    line-height: 1.65;
    opacity: 0.96;
    max-width: 640px;
    margin-bottom: 22px;
}

.college-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.college-toolbar-band {
    padding: 0 0 12px;
    margin-top: -36px;
    position: relative;
    z-index: 3;
}

.college-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px 20px;
    padding: 18px 24px;
}

.college-toolbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 0;
}

.college-toolbar-links a {
    color: var(--ub-purple);
    text-decoration: none;
}

.college-toolbar-links a:hover {
    color: var(--ub-blue);
    text-decoration: underline;
}

.academics-breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 16px;
    opacity: 0.95;
}

.academics-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
}

.academics-breadcrumb a:hover {
    text-decoration: underline;
}

.academics-breadcrumb-sep {
    margin: 0 8px;
    opacity: 0.7;
}

.academics-breadcrumb-current {
    font-weight: 600;
}

@media (max-width: 768px) {
    .college-page-hero {
        min-height: 300px;
        padding: 28px 0 44px;
    }
    .college-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .college-toolbar-band {
        margin-top: 0;
        padding: 12px 0 20px;
    }
}


/* --------------------------------------------------------------------------
   PERSONA CHIPS (ub/persona-chips)
   -------------------------------------------------------------------------- */
.ac-personas { margin-bottom: 30px; }
.ac-personas-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 13px;
}
.ac-persona-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-persona {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid #CBD4D8;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}
.ac-persona i { color: var(--ub-blue-text); font-size: 0.95rem; }
.ac-persona:hover {
  border-color: var(--ub-purple);
  color: var(--ub-purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.ac-persona[aria-pressed="true"] {
  background: var(--ub-purple);
  border-color: var(--ub-purple);
  color: var(--white);
}
.ac-persona[aria-pressed="true"] i { color: var(--white); }

/* --------------------------------------------------------------------------
   COLLEGE / IMAGE CARDS (ub/image-cards)
   -------------------------------------------------------------------------- */
.ac-colleges {
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2rem, 3vw, 2.75rem);
  background: var(--bg-light);
}
.ac-college-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 50px;
}
.ac-college {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--ub-purple);
  transition: var(--transition);
}
.ac-college:nth-child(even) { border-top-color: var(--ub-blue); }
.ac-college:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.ac-college-media { height: 186px; background-size: cover; background-position: center; }
.ac-college-body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.ac-college-body h3 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 12px;
}
.ac-college-body p {
  font-size: 0.94rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 22px;
}
.ac-college-more {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ub-purple);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--transition);
}
.ac-college:hover .ac-college-more { gap: 13px; }

@media (max-width: 1100px) {
  .ac-college-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ac-college-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   PROFILE GRID (ub/profile-grid) - Executive and Leadership Headshots
   -------------------------------------------------------------------------- */
.ub-profile-sec {
  padding: var(--section-pad, 80px) 0;
  background: var(--bg-light, #f8f9fa);
}
.ub-profile-grid {
  display: grid;
  gap: 32px;
  margin-top: 48px;
}
.ub-profile-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.ub-profile-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ub-profile-grid--cols-4 .ub-profile-card__body {
  padding: 20px 18px 24px;
}
.ub-profile-grid--cols-4 .ub-profile-card__role {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.ub-profile-grid--cols-4 .ub-profile-card__name {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 6px 0;
}
.ub-profile-grid--cols-4 .ub-profile-card__dept {
  font-size: 0.84rem;
  line-height: 1.35;
  margin-bottom: 10px;
}
.ub-profile-grid--cols-4 .ub-profile-card__bio {
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.ub-profile-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ub-profile-card {
  background: var(--white, #ffffff);
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--ub-purple, #592d82);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  height: 100%;
}
.ub-profile-card:nth-child(even) {
  border-top-color: var(--ub-blue, #005cb9);
}
.ub-profile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

/* Headshot container: NEVER CHOPPED. Proper 1:1 square framing */
.ub-profile-card__photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #edf0f5;
  overflow: hidden;
}
.ub-profile-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.35s ease;
}
.ub-profile-card:hover .ub-profile-card__photo {
  transform: scale(1.03);
}

.ub-profile-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ub-profile-card__role {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ub-purple, #592d82);
  margin-bottom: 6px;
}
.ub-profile-card:nth-child(even) .ub-profile-card__role {
  color: var(--ub-blue, #005cb9);
}
.ub-profile-card__name {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-main, #111111);
  line-height: 1.25;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.ub-profile-card__dept {
  font-size: 0.9rem;
  color: #555555;
  font-style: italic;
  margin-bottom: 12px;
  line-height: 1.4;
}
.ub-profile-card__bio {
  font-size: 0.92rem;
  color: var(--text-light, #444444);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}
.ub-profile-card__bio p {
  margin: 0 0 10px 0;
}
.ub-profile-card__bio p:last-child {
  margin-bottom: 0;
}
.ub-profile-card__link {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ub-blue, #005cb9);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ub-profile-card__link:hover {
  color: var(--ub-purple, #592d82);
}

/* Row / Directory layout variant */
.ub-profile-grid--row {
  grid-template-columns: 1fr;
  gap: 28px;
}
.ub-profile-grid--row .ub-profile-card {
  flex-direction: row;
}
.ub-profile-grid--row .ub-profile-card__photo-wrap {
  width: 260px;
  min-width: 260px;
  aspect-ratio: 1 / 1;
}

@media (max-width: 1200px) and (min-width: 881px) {
  .ub-profile-grid--cols-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 880px) and (min-width: 581px) {
  .ub-profile-grid--cols-3,
  .ub-profile-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 580px) {
  .ub-profile-grid--cols-3,
  .ub-profile-grid--cols-4,
  .ub-profile-grid--cols-2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ub-profile-grid--row .ub-profile-card {
    flex-direction: column;
  }
  .ub-profile-grid--row .ub-profile-card__photo-wrap {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   LARGE / EXECUTIVE PROFILE CARD (ub/profile-card with size=large or #president)
   -------------------------------------------------------------------------- */
.college-dean--large,
#president.college-dean {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
  margin-top: 48px;
  padding: 48px !important;
  background: var(--white, #ffffff) !important;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  border-top: 5px solid var(--ub-purple, #592d82) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}

.college-dean--large .college-dean__photo,
#president.college-dean .college-dean__photo {
  max-width: 380px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(89, 45, 130, 0.16) !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.college-dean--large .college-dean__photo img,
#president.college-dean .college-dean__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block;
}

.college-dean--large .college-dean__content h2,
#president.college-dean .college-dean__content h2 {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--ub-purple, #592d82);
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.college-dean--large .college-dean__content p,
#president.college-dean .college-dean__content p {
  font-size: 1.05rem;
  line-height: 1.72;
  color: #333333;
  margin-bottom: 18px;
}

.college-dean--large .college-dean__content .dean-sig,
#president.college-dean .college-dean__content .dean-sig {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid #eef2f6;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ub-purple, #592d82);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .college-dean--large,
  #president.college-dean {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 36px !important;
  }
  .college-dean--large .college-dean__photo,
  #president.college-dean .college-dean__photo {
    max-width: 300px !important;
  }
}

@media (max-width: 768px) {
  .college-dean--large,
  #president.college-dean {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 24px !important;
  }
  .college-dean--large .college-dean__photo,
  #president.college-dean .college-dean__photo {
    max-width: 260px !important;
    margin: 0 auto;
  }
  .college-dean--large .college-dean__content h2,
  #president.college-dean .college-dean__content h2 {
    font-size: 1.6rem;
    text-align: center;
  }
}

/* ==========================================================================
   ELEMENT BLOCKS: COUNTDOWN, VIDEO SHOWCASE, MILESTONES, TESTIMONIALS, GIVING
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED ELEMENT BUTTONS (Sharp Edges, 0px Radius, WCAG AAA Contrast)
   -------------------------------------------------------------------------- */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f8df8c 0%, #d4af37 55%, #b68d1d 100%);
  color: #12041d !important;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 0 !important;
  border: 1px solid #eed07a;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}
.btn-gold:hover, .btn-gold:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.5);
  filter: brightness(1.05);
  color: #12041d !important;
}

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #ffffff !important;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 0 !important;
  border: 2px solid #ffffff;
  text-decoration: none !important;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}
.btn-ghost-light:hover, .btn-ghost-light:focus {
  background: #ffffff;
  border-color: #ffffff;
  color: #230c33 !important;
  transform: translateY(-2px);
}

.btn-outline-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #3a1454 !important;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 0 !important;
  border: 2px solid #3a1454;
  text-decoration: none !important;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.btn-outline-purple:hover, .btn-outline-purple:focus {
  background: #3a1454;
  color: #ffffff !important;
  border-color: #3a1454;
}

/* ==========================================================================
   1. COUNTDOWN BANNER (ub/countdown-banner)
   ========================================================================== */
.ub-countdown-banner {
  background: radial-gradient(circle at 50% -10%, rgba(212, 175, 55, 0.22) 0%, rgba(37, 11, 56, 0.98) 65%, #140620 100%);
  color: #ffffff;
  padding: 64px 0 72px;
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  border-bottom: 2px solid rgba(212, 175, 55, 0.45);
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}

.ub-countdown-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f5d77f, #d4af37, #f5d77f, transparent);
}

.ub-countdown-shell {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Properly Sized & Visible Logo */
.ub-countdown-crest {
  margin: 0 auto 28px;
  display: flex;
  justify-content: center;
}
.ub-countdown-crest img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.75));
}

.ub-countdown-eyebrow {
  color: #f5d77f !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 12px;
}
.ub-countdown-eyebrow::before,
.ub-countdown-eyebrow::after {
  border-color: rgba(212, 175, 55, 0.5) !important;
}

.ub-countdown-heading {
  color: #ffffff;
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 14px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.ub-countdown-subtext {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #ffffff;
  max-width: 680px;
  margin: 0 auto 36px;
}

/* Timer Grid (Sharp Edges) */
.ub-timer-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 28px;
  flex-wrap: wrap;
}

.ub-timer-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 0 !important;
  padding: 16px 22px;
  min-width: 105px;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ub-timer-card:hover {
  transform: translateY(-3px);
  border-color: #f5d77f;
}

.ub-timer-num {
  display: block;
  font-family: 'Oswald', Impact, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: #f9dc86;
  text-shadow: 0 2px 14px rgba(212, 175, 55, 0.35);
  font-variant-numeric: tabular-nums;
}

.ub-timer-lbl {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 6px;
  font-weight: 600;
}

.ub-timer-divider {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2rem;
  color: #d4af37;
  opacity: 0.8;
  font-weight: 700;
  line-height: 1;
}

.ub-countdown-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 0 !important;
  padding: 8px 22px;
  color: #f5d77f;
  font-size: 0.95rem;
  margin-bottom: 32px;
}

.ub-countdown-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   2. VIDEO SHOWCASE (ub/video-showcase)
   ========================================================================== */
.ub-video-showcase {
  background-color: #f8f6fb;
  padding: 72px 0 80px;
}

.ub-video-showcase-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
}
.ub-video-showcase-header h2 {
  color: #230c33;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  margin: 10px 0 14px;
}
.ub-video-showcase-lede {
  font-size: 1.12rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

.ub-video-showcase-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.ub-video-theater {
  display: flex;
  flex-direction: column;
}

.ub-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(42, 18, 64, 0.18);
  border: 2px solid rgba(212, 175, 55, 0.4);
}
.ub-video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ub-video-theater-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #6b7280;
  margin-top: 12px;
  padding: 0 4px;
}
.ub-video-theater-caption i {
  color: #e02424;
  font-size: 1.1rem;
}

.ub-video-narrative {
  background: #ffffff;
  border: 1px solid #e2d9ec;
  border-left: 4px solid #d4af37;
  border-radius: 0 !important;
  padding: 36px 32px;
  box-shadow: 0 10px 30px rgba(42, 18, 64, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ub-narrative-title {
  color: #2b0d3e;
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 14px;
}

.ub-narrative-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0 0 20px;
}

.ub-narrative-quote {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: #fbf9fd;
  border-left: 3px solid #3a1454;
  border-radius: 0 !important;
}
.ub-narrative-quote p {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #2b0d3e;
  line-height: 1.5;
  margin: 0 0 6px;
}
.ub-narrative-quote cite {
  display: block;
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 700;
  color: #6e2594;
}

.ub-narrative-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ub-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1ecf7;
  color: #3a1454;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 0 !important;
  border: 1px solid #ded3ea;
}
.ub-badge-pill i {
  color: #d4af37;
}

/* ==========================================================================
   3. MILESTONE CARDS (ub/milestone-cards)
   ========================================================================== */
.ub-milestone-cards {
  background-color: #ffffff;
  padding: 80px 0 88px;
}

.ub-milestone-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 52px;
}
.ub-milestone-header h2 {
  color: #230c33;
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  margin: 10px 0 14px;
}
.ub-milestone-lede {
  font-size: 1.12rem;
  color: #4a5568;
  line-height: 1.6;
}

.ub-milestone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}

.ub-milestone-card {
  background: #ffffff;
  border: 1px solid #e5dfed;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(42, 18, 64, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
.ub-milestone-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(42, 18, 64, 0.12);
  border-color: #d4af37;
}

.ub-milestone-media {
  position: relative;
  width: 100%;
  height: 230px;
  background: #1e0d33;
  border-radius: 0 !important;
  overflow: hidden;
}
.ub-milestone-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ub-milestone-card:hover .ub-milestone-media img {
  transform: scale(1.05);
}

.ub-milestone-year-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: #3a1454;
  color: #f9dc86;
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 0 !important;
  border: 1px solid #d4af37;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

.ub-milestone-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ub-milestone-cat {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #4b1d6b;
  margin-bottom: 8px;
}

.ub-milestone-title {
  color: #1e0d33;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px;
}

.ub-milestone-desc {
  font-size: 0.95rem;
  color: #2b2f38;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

/* ==========================================================================
   4. VIDEO TESTIMONIALS (ub/video-testimonials)
   ========================================================================== */
.ub-video-testimonials {
  background: #f7f5fa;
  padding: 80px 0 88px;
}

.ub-vtest-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 52px;
}
.ub-vtest-header h2 {
  color: #230c33;
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  margin: 10px 0 14px;
}
.ub-vtest-lede {
  font-size: 1.12rem;
  color: #4a5568;
  line-height: 1.6;
}

.ub-vtest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ub-vtest-card {
  background: #ffffff;
  border: 1px solid #e5dfed;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(42, 18, 64, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.ub-vtest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(42, 18, 64, 0.12);
}

.ub-vtest-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #230c33;
  border-radius: 0 !important;
  overflow: hidden;
}
.ub-vtest-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ub-vtest-card:hover .ub-vtest-media img {
  transform: scale(1.04);
}

.ub-vtest-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 0 !important;
  background: rgba(43, 13, 62, 0.92);
  border: 2px solid #f5d77f;
  color: #f5d77f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.25s ease;
  padding-left: 2px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.ub-vtest-play-btn:hover {
  background: #d4af37;
  color: #1a082a;
  transform: translate(-50%, -50%) scale(1.1);
  border-color: #ffffff;
}

.ub-vtest-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(26, 10, 42, 0.88);
  color: #f5d77f;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0 !important;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.ub-vtest-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ub-vtest-name {
  color: #1e0d33;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.ub-vtest-role {
  font-size: 0.86rem;
  color: #4b1d6b;
  font-weight: 700;
  margin-bottom: 12px;
}

.ub-vtest-quote {
  font-family: Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  color: #374151;
  line-height: 1.55;
  margin: 0 0 16px;
  flex-grow: 1;
}

.ub-vtest-watch-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #4b1d6b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
  text-align: left;
}
.ub-vtest-watch-link:hover {
  color: #d4af37;
}

/* ==========================================================================
   5. GIVING TIERS (ub/giving-tiers)
   ========================================================================== */
.ub-giving-tiers {
  background-color: #ffffff;
  padding: 80px 0 88px;
}

.ub-giving-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 36px;
}
.ub-giving-header h2 {
  color: #230c33;
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  margin: 10px 0 14px;
}
.ub-giving-lede {
  font-size: 1.12rem;
  color: #4a5568;
  line-height: 1.6;
}

.ub-giving-stat-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fbf7ec;
  border: 1.5px solid #d4af37;
  border-radius: 0 !important;
  padding: 12px 28px;
  max-width: 580px;
  margin: 0 auto 48px;
  color: #230c33;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.5px;
}
.ub-giving-stat-ribbon i {
  color: #b68d1d;
}

.ub-giving-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.ub-giving-card {
  background: #ffffff;
  border: 1.5px solid #e7e0ef;
  border-radius: 0 !important;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(42, 18, 64, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ub-giving-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(42, 18, 64, 0.12);
  border-color: #d4af37;
}

.ub-giving-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ub-giving-icon {
  width: 48px;
  height: 48px;
  border-radius: 0 !important;
  background: #f2edf8;
  color: #4b1d6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.ub-giving-badge {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: #6e2594;
  background: #f5effa;
  padding: 4px 10px;
  border-radius: 0 !important;
  border: 1px solid #dfd1ee;
}

.ub-giving-card-body {
  flex-grow: 1;
  margin-bottom: 24px;
}

.ub-giving-title {
  color: #1e0d33;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
}

.ub-giving-desc {
  font-size: 0.92rem;
  color: #2b2f38;
  line-height: 1.55;
  margin: 0 0 14px;
}

.ub-giving-impact {
  font-size: 0.85rem;
  color: #1e0d33;
  background: #f9f8fc;
  padding: 10px 14px;
  border-radius: 0 !important;
  border-left: 3px solid #6e2594;
}

.ub-giving-card-footer {
  margin-top: auto;
}
.ub-giving-card-footer .btn-outline-purple {
  width: 100%;
}

/* Giving Callout Banner (Accessible Contrast) */
.ub-giving-banner {
  background-color: #170428 !important;
  background: linear-gradient(135deg, #2b0b42 0%, #170428 55%, #0e021a 100%) !important;
  border-radius: 0 !important;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  border: 1.5px solid #d4af37 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  color: #ffffff !important;
}

.ub-giving-banner-content h3 {
  color: #ffffff !important;
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.ub-giving-banner-content p {
  color: #f3ecfb !important;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

.ub-giving-banner-actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.ub-giving-banner-actions .btn-gold {
  background: #d4af37 !important;
  color: #120320 !important;
  border: 1px solid #e5c158 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.ub-giving-banner-actions .btn-gold:hover {
  background: #f5d77f !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

.ub-giving-banner-actions .btn-ghost-light {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.ub-giving-banner-actions .btn-ghost-light:hover {
  background: #ffffff !important;
  color: #170428 !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   6. VIDEO MODAL LIGHTBOX
   ========================================================================== */
.ub-video-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 4, 16, 0.9);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ub-video-modal-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ub-video-modal-container {
  width: 100%;
  max-width: 900px;
  background: #140620;
  border: 1.5px solid #d4af37;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}
.ub-video-modal-backdrop.is-active .ub-video-modal-container {
  transform: scale(1);
}

.ub-video-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.ub-video-modal-close:hover {
  background: #d4af37;
  color: #140620;
  border-color: #d4af37;
}

.ub-video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 0 !important;
}
.ub-video-modal-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ub-video-modal-footer {
  padding: 14px 20px;
  color: #f5d77f;
  font-weight: 700;
  font-size: 0.95rem;
  background: #1e092c;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .ub-video-showcase-grid {
    grid-template-columns: 1fr;
  }
  .ub-vtest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ub-giving-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ub-giving-banner {
    flex-direction: column;
    text-align: center;
  }
  .ub-giving-banner-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .ub-timer-grid {
    gap: 8px;
  }
  .ub-timer-card {
    min-width: 78px;
    padding: 12px 14px;
  }
  .ub-timer-divider {
    font-size: 1.5rem;
  }
  .ub-milestone-grid {
    grid-template-columns: 1fr;
  }
  .ub-vtest-grid {
    grid-template-columns: 1fr;
  }
  .ub-giving-grid {
    grid-template-columns: 1fr;
  }
  .ub-giving-banner {
    padding: 32px 24px;
  }
}