/* ==========================================================================
   ub-sections.css  -  the section blocks' own styles
   University of Bridgeport · plugin: ub-elements

   WHY THIS FILE EXISTS
   These rules used to live in the theme, in css/home3.css  -  a PAGE-named
   stylesheet inside a THEME, styling blocks that belong to this plugin. That
   was wrong for the reason css/ub-elements.css already documents at length:

     "Style by element, not by page. A component's styles live with the
      component and load wherever the component can appear."

   ub-elements.css got that right and was then left in the theme. This file
   finishes the move. Every selector below is emitted by a block registered in
   includes/ub-section-blocks.php, so the styling now ships with the code that
   renders it: install the plugin under any theme and the blocks still paint.

   WHICH BLOCKS
     ub/door-band     → .doors, .doors-grid, .door*
     ub/news-events   → .whatson*, .news-*, .events*, .ev*, .subscribe
     ub/impact-cards  → .impact*
     ub/legacy-band   → .legacy*
     ub/stat-strip    → .proof-strip--standalone (a variant, not the base)
     ub/cta-band      → .cta-more*
     ub/hero-carousel → .hero2--four / .hero2--multi slide-track counts

   TOKEN CONTRACT
   These rules read design tokens the UB design system provides  -  --ub-purple,
   --ub-blue-text, --ink, --bg-light, --section-pad, --shadow-md  -  plus the
   .container / .btn / .reveal primitives. That is a contract with the design
   system, not with one theme, which is why the enqueue in ub-elements.php
   names no theme handle: a missing dependency handle makes wp_enqueue_style()
   drop the sheet silently. Defaults for the tokens that were only ever
   declared in a page stylesheet are set below.

   SCOPING
   The `.v2` / `body.v2` scopes are preserved exactly as they were. That class
   is applied by the theme's ubridgeport_uses_section_blocks(); dropping the
   scope would repaint pages that never opted into this design layer.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens these blocks need.
   -------------------------------------------------------------------------- */
:root {
  --ub-blue-text: #0A6E8F;
  --ub-purple-deep: #2A1240;
  --ink: #1B1023;
  --wedge: 4.5vw;
  --section-pad: 120px;
  --proof-overlap: 56px;
  --switcher-h: 38px;
  --switcher-gap: 26px;
}

body.v2 {
  font-family: var(--font-primary);
  background: var(--white);
  --doors-overlap: 70px;
  --proof-overlap: var(--doors-overlap);
}

.v2 .pathways a:not([class*="btn"]):not(.pathway-card),
.v2 .centennial2 a:not([class*="btn"]),
.v2 .centers a:not([class*="btn"]):not(.center-card),
.v2 .apply2 a:not([class*="btn"]),
.v2 .proof-strip a:not([class*="btn"]),
.v2 .whatson a:not([class*="btn"]):not(.news-lead):not(.news-item):not(.ev),
.v2 .impact a:not([class*="btn"]):not(.impact-card) {
  color: var(--ub-blue-text);
}

.v2 .btn { border-radius: var(--btn-radius); }


/* --------------------------------------------------------------------------
   HERO — cinematic wedge & multi-slide carousel (ub/hero-carousel)
   -------------------------------------------------------------------------- */
.hero2 {
  position: relative;
  display: grid;
  grid-template-areas: 'hero-stack';
  min-height: clamp(430px, calc(100vh - 246px), 820px);
  background: var(--ub-purple-deep);
  overflow: hidden;
}

/* Bottom scrim. The switcher track is wider than the dark panel, so its
   right-hand items sit over photography — this guarantees legibility
   regardless of the slide, and reads as a deliberate cinematic fade. */
.hero2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(to top,
    rgba(42,18,64,0.93) 0%,
    rgba(42,18,64,0.58) 46%,
    rgba(42,18,64,0) 100%);
  z-index: 5;
  pointer-events: none;
}

.hero2-slide {
  grid-area: hero-stack;
  position: relative;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease;
}
.hero2-slide.active { opacity: 1; visibility: visible; }

/* Right-hand imagery, masked by the signature diagonal */
.hero2-media {
  position: absolute;
  inset: 0 0 0 38%;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.hero2-image {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
}
.hero2-slide.active .hero2-image {
  animation: kenburns 22s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1) translate3d(0,0,0); }
  to   { transform: scale(1.07) translate3d(0, -1.2%, 0); }
}
/* Keeps white hero text legible over any photograph. */
.hero2-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(42,18,64,0.92) 0%,
    rgba(42,18,64,0.42) 34%,
    rgba(42,18,64,0.12) 70%,
    rgba(42,18,64,0.30) 100%);
}

.hero2-body {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  align-items: safe center;
  padding-bottom: calc(var(--proof-overlap) + var(--switcher-gap) + var(--switcher-h) + 18px);
}
.hero2-inner {
  max-width: 39rem;
  border-left: 3px solid var(--ub-blue);
  padding-left: 32px;
}

.hero2-badge {
  display: inline-block;
  background: var(--white);
  color: var(--ub-purple);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 15px;
  margin-bottom: 26px;
}
.hero2-title {
  color: var(--white);
  font-size: clamp(2.6rem, min(5.2vw, 7.4vh), 4.6rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.hero2-title span {
  display: block;
  font-size: 0.42em;
  font-weight: 300;
  letter-spacing: -0.012em;
  color: rgba(255,255,255,0.9);
  margin-top: 14px;
  line-height: 1.25;
}
.hero2-sub {
  color: rgba(255,255,255,0.9);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.6;
  margin-top: 24px;
  max-width: 30rem;
  min-height: 3.2em;
}
.hero2-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 40px;
}

/* Oversized centennial watermark — heraldic grandeur, low opacity */
.hero2-watermark {
  position: absolute;
  right: 3vw;
  bottom: -6vh;
  font-size: 34vh;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.07);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   HERO SWITCHER — slide tabs and progress indicator
   -------------------------------------------------------------------------- */
.hero2-switcher {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--proof-overlap) + var(--switcher-gap));
  z-index: 6;
}
.hs-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 39rem;
  margin-left: 35px;
}
.hero2--four .hs-track,
.hero2--multi .hs-track {
  grid-template-columns: repeat(var(--hs-count, 4), minmax(0, 1fr));
  max-width: min(46rem, 100%);
}
.hs-item {
  position: relative;
  background: none;
  border: none;
  padding: 15px 20px 0 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.hs-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 16px;
  height: 2px;
  background: rgba(255,255,255,0.26);
}
.hs-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--ub-blue);
}
.hs-item.active::after {
  animation: hsProgress 7500ms linear forwards;
}
@keyframes hsProgress {
  from { width: 0; }
  to   { width: calc(100% - 16px); }
}
.hero2:hover .hs-item.active::after,
.hero2.is-paused .hs-item.active::after { animation-play-state: paused; }
.hs-num {
  display: none;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.48);
  transition: var(--transition);
}
.hs-label {
  display: block;
  margin-top: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: rgba(255,255,255,0.7);
  transition: var(--transition);
}
.hs-item:hover .hs-num,
.hs-item:focus-visible .hs-num { color: rgba(255,255,255,0.8); }
.hs-item:hover .hs-label,
.hs-item:focus-visible .hs-label { color: var(--white); }
.hs-item.active .hs-num { color: var(--ub-blue); }
.hs-item.active .hs-label { color: var(--white); }
.hs-item:focus-visible { outline: 2px solid var(--ub-blue); outline-offset: 3px; }

@media (min-width: 1101px) and (max-height: 820px) {
  :root { --switcher-gap: 20px; }
  .hero2-sub { margin-top: 18px; }
  .hero2-ctas { margin-top: 30px; }
  .hero2-watermark { font-size: 26vh; }
}

@media (min-width: 1101px) and (max-height: 800px) {
  .hero2-ctas .btn-large,
  .hero2-ctas .btn-ghost { padding: 13px 26px; }
}


/* --------------------------------------------------------------------------
   DOOR BAND  -  the five audiences, overlapping the hero
   Icon + audience name sit on the FIRST line of each cell, deliberately: on a
   short laptop where the band cannot fully clear the fold, the part that peeks
   is the part that names the audience, not decorative padding.
   -------------------------------------------------------------------------- */
.doors {
  position: relative;
  z-index: 6;
  margin-top: calc(var(--doors-overlap) * -1);
  /* No bottom padding of its own  -  the next section's --section-pad supplies
     the gap. Both would stack to 240px of dead air. */
  padding-bottom: 0;
}
/* The flat variant drops the overlap. The negative margin above is only correct
   when there is a hero directly above to ride over; anywhere else it pulls the
   band up over whatever precedes it. Declared after .doors so plain source order
   settles it  -  no !important needed, and both stay single-class so a later
   media query can still override either. */
.doors--flat {
  margin-top: 0;
  padding-top: var(--section-pad);
}
.doors-grid {
  display: grid;
  /* One column per door (the block passes the count), so three doors fill the
     row instead of leaving two empty cells; five is the home page's band. */
  grid-template-columns: repeat(var(--doors-count, 5), 1fr);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.door {
  position: relative;
  display: block;
  /* Symmetric now. The 2px of extra bottom padding balanced a descriptor line
     whose own line-height sat higher than its box; with the descriptor gone it
     just made a one-line cell look like it was sitting up. */
  padding: 22px 22px 22px;
  border-right: 1px solid #E8ECEE;
  border-top: 4px solid var(--ub-purple);
  text-decoration: none;
  transition: var(--transition);
  overflow: hidden;
}
.door:nth-child(even) { border-top-color: var(--ub-blue); }
.door:last-child { border-right: none; }

/* Wedge wash on hover  -  the hero's diagonal, reused at cell scale. */
.door::before {
  content: '';
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: linear-gradient(180deg, rgba(89,45,130,0) 0%, rgba(89,45,130,0.07) 100%);
  transform: translateY(102%);
  transition: transform 0.45s cubic-bezier(0.25,0.8,0.25,1);
  pointer-events: none;
}
.door:hover::before,
.door:focus-visible::before { transform: translateY(40%); }
.door:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.door:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: -3px; }

.door-head {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  width: 100%;
}
.door-head i {
  font-size: 0.95rem;
  color: var(--ub-purple);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.door:nth-child(even) .door-head i { color: var(--ub-blue-text); }
.door-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--text-main);
  transition: var(--transition);
  flex: 1 1 auto;
  min-width: 0;
}
.door:hover .door-title { color: var(--ub-purple); }
.door-line {
  display: block;
  position: relative;
  z-index: 2;
  margin-top: 9px;
  font-size: 0.845rem;
  line-height: 1.45;
  color: var(--text-light);
}
/* The arrow rides in-flow with the title label on the same line, vertically
   centered across all screen sizes without absolute positioning drift. */
.door-arrow {
  margin-left: auto;
  padding-left: 8px;
  font-size: 0.82rem;
  color: var(--ub-purple);
  opacity: 0.55;
  transition: var(--transition);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.door:hover .door-arrow,
.door:focus-visible .door-arrow { opacity: 1; transform: translateX(4px); }

/* --------------------------------------------------------------------------
   DOOR BAND, DESKTOP  -  cells sized by their own name, not by 1/5 of the row
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  .doors-grid { display: flex; flex-wrap: nowrap; }
  .door { flex: 1 1 auto; min-width: 0; }
  .door-arrow {
    position: static;
    margin-left: auto;
    padding-left: 8px;
    top: auto;
    right: auto;
    opacity: 0.55;
    flex-shrink: 0;
  }
  .door:hover .door-arrow,
  .door:focus-visible .door-arrow { opacity: 1; transform: translateX(4px); }
  /* The hover wash was tuned to sweep a 128px cell. At 70px the same 120%-tall
     gradient stopping at translateY(40%) barely enters the box, so both are
     re-proportioned to the shorter cell. */
  .door::before { inset: auto -20% -30% -20%; height: 90%; }
  .door:hover::before,
  .door:focus-visible::before { transform: translateY(30%); }
  /* -6px was a third of a 22px title's height in a tall cell. In a 70px strip
     it reads as the row coming apart. */
  .door:hover { transform: translateY(-3px); }
}


/* --------------------------------------------------------------------------
   PROOF STRIP  -  relocated
   No longer overlaps anything; it now introduces the Outcomes block on the
   light background. home.css pulls it up by --proof-overlap, which is why
   that has to be cancelled here rather than just left alone.
   -------------------------------------------------------------------------- */
/* A VARIANT CLASS, not a blanket override of .proof-strip.
   The overlap version is still correct wherever the strip does ride over a hero
    -  program pages use it that way  -  and repainting every instance from one
   stylesheet would change those pages as a side effect of loading this file.
   Same reasoning as ub/cta-band's `variant`: appearance differs, structure and
   data do not. */
.v2 .proof-strip--standalone {
  margin-top: 0;
  padding: clamp(3rem, 5vw, 4.5rem) 0 100px;
  background: var(--bg-light);
}
.pathways + .proof-strip--standalone,
.v2 .pathways + .proof-strip--standalone {
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
}
.v2 .proof-strip--standalone .proof-lead {
  margin-bottom: 34px;
}
/* Smaller than .display-lg on purpose: this heading introduces the block that
   introduces Outcomes, so it must not compete with the 8rem figure below. */
.v2 .proof-strip--standalone .proof-lead h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-main);
}


/* --------------------------------------------------------------------------
   WHAT'S HAPPENING  -  news + events
   The one section that serves every audience at once, and the one a
   university homepage cannot credibly omit. Left column is editorial, right
   column is the events rail; each event carries an audience tag so a parent
   or an alum can see at a glance which items are for them.
   -------------------------------------------------------------------------- */
.whatson { padding: var(--section-pad) 0; background: var(--white); }
.whatson-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.whatson-head .section-lede { margin-top: 18px; }
.whatson-head-link {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ub-blue);
  white-space: nowrap;
}
.whatson-grid {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 44px;
}

.news-lead { display: block; text-decoration: none; }
.news-lead-img {
  height: 330px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.news-lead-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,16,35,0) 55%, rgba(27,16,35,0.35) 100%);
  transition: var(--transition);
}
.news-lead:hover .news-lead-img::after { background: linear-gradient(180deg, rgba(89,45,130,0.18) 0%, rgba(89,45,130,0.65) 100%); }
.news-kicker {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ub-purple);
}
.news-lead h3 {
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.16;
  color: var(--text-main);
  margin: 9px 0 10px;
  transition: var(--transition);
}
.news-lead:hover h3 { color: var(--ub-purple); }
.news-lead p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 38rem;
}
.news-date {
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* The text-safe blue, not a lighter grey: #8593A0 measured 3.1:1 on white
     and fails WCAG AA at this size. */
  color: var(--ub-blue-text);
}

.news-list { margin-top: 36px; border-top: 1px solid #E4E9EB; }
.news-item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid #E4E9EB;
  text-decoration: none;
  transition: var(--transition);
}
.news-item:hover { padding-left: 8px; }
.news-item-thumb {
  height: 74px;
  background-size: cover;
  background-position: center;
}
.news-item h4 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.28;
  color: var(--text-main);
  margin: 5px 0 6px;
  transition: var(--transition);
}
.news-item:hover h4 { color: var(--ub-purple); }
.news-item .news-kicker { margin-top: 0; font-size: 0.68rem; }
.news-item .news-date { margin-top: 4px; }

/* Events rail + the subscribe block stack in one side column, so the rail is
   not left floating against 400px of white space. */
.whatson-side {
  align-self: start;
  display: grid;
  gap: 22px;
}
.events {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 4px solid var(--ub-purple, #4b1d6b);
  box-shadow: 0 4px 20px rgba(75, 29, 107, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 26px 26px 14px;
}

.subscribe {
  background: var(--ub-purple-deep);
  border-top: 4px solid var(--ub-blue);
  padding: 26px 26px 28px;
}
.subscribe h3 {
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}
.subscribe p {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.subscribe .btn { margin-top: 18px; }

.events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}
.events-head h3 {
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main, #1e293b);
  margin: 0;
}
.events-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ub-purple, #4b1d6b);
  background: rgba(75, 29, 107, 0.07);
  border: 1px solid rgba(75, 29, 107, 0.16);
  padding: 3px 8px;
  white-space: nowrap;
}
.events-live-dot {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: ubLivePulse 2s infinite;
}
@keyframes ubLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.ev {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding: 16px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid #edf2f7;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.ev:hover {
  background: rgba(75, 29, 107, 0.03);
  transform: translateX(4px);
}
.ev:last-of-type {
  border-bottom: none;
}
.ev-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #faf8fc;
  border: 1px solid #e9d5ff;
  border-top: 3px solid var(--ub-purple, #4b1d6b);
  padding: 8px 4px;
  min-height: 56px;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ev:nth-child(even) .ev-date {
  background: #f0f9ff;
  border-color: #bae6fd;
  border-top-color: var(--ub-blue, #00a7e0);
}
.ev:hover .ev-date {
  background: #ffffff;
}
.ev-date .m {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ub-purple, #4b1d6b);
  line-height: 1;
  margin-bottom: 4px;
}
.ev:nth-child(even) .ev-date .m {
  color: var(--ub-blue-text, #0a6e8f);
}
.ev-date .d {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-main, #1e293b);
}
.ev-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ev-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-main, #1e293b);
  transition: color 0.2s ease;
}
.ev:hover .ev-title {
  color: var(--ub-purple, #4b1d6b);
}
.ev-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--text-light, #64748b);
  line-height: 1.4;
}
.ev-meta i {
  color: var(--ub-purple, #4b1d6b);
  font-size: 0.76rem;
}
/* Who the event is for badges */
.ev-aud {
  align-self: flex-start;
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ub-purple, #4b1d6b);
  background: rgba(75, 29, 107, 0.08);
  border: 1px solid rgba(75, 29, 107, 0.16);
}
.ev-aud.is-public {
  color: #0284c7;
  background: rgba(0, 167, 224, 0.1);
  border-color: rgba(0, 167, 224, 0.25);
}
.ev-aud.is-prospective {
  color: #7c3aed;
  background: #ede9fe;
  border-color: #ddd6fe;
}
.ev-aud.is-alumni {
  color: #b45309;
  background: #fef3c7;
  border-color: #fde68a;
}
.events-foot {
  padding: 16px 0 6px;
  border-top: 1px solid #edf2f7;
  margin-top: 6px;
}
.events-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ub-purple, #4b1d6b);
  text-decoration: none;
  transition: color 0.2s ease;
}
.events-foot a i {
  transition: transform 0.2s ease;
}
.events-foot a:hover {
  color: var(--ub-purple-deep, #2a0845);
}
.events-foot a:hover i {
  transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   IN THE CITY  -  community-facing UB
   Everything here is open to someone who will never enrol: patients at the
   clinics, families at Seaside Park, fans at a home game, an audience at a
   lecture. It is the section that makes the "Community" door honest.
   -------------------------------------------------------------------------- */
.impact {
  padding: var(--section-pad) 0;
  /* One light band, so the white cards stand clear of it. (It was white with an
     empty grey wedge behind the cards, which read as a missing photo.) */
  background: var(--bg-light);
  position: relative;
  overflow: hidden;
}
.impact .container { position: relative; z-index: 2; }
.impact-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 60px;
  align-items: start;
}
.impact-intro { max-width: 30rem; }
.impact-intro .section-lede { margin-top: 20px; }
.impact-open {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 3px solid var(--ub-blue);
}
.impact-open .n {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ub-purple);
}
.impact-open .l {
  margin-top: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.5;
}
.impact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.impact-card {
  display: block;
  background: var(--white);
  border-top: 4px solid var(--ub-purple);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px 26px;
  text-decoration: none;
  transition: var(--transition);
}
.impact-card:nth-child(even) { border-top-color: var(--ub-blue); }
.impact-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.impact-card > i {
  font-size: 1.35rem;
  color: var(--ub-purple);
}
.impact-card:nth-child(even) > i { color: var(--ub-blue-text); }
.impact-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin: 14px 0 9px;
  transition: var(--transition);
}
.impact-card:hover h3 { color: var(--ub-purple); }
.impact-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-light);
}
.impact-card .go {
  display: block;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ub-purple);
}
.impact-card .go i { margin-left: 5px; transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1); }
.impact-card:hover .go i { transform: translateX(5px); }


/* --------------------------------------------------------------------------
   A CENTURY OF PURPLE KNIGHTS  -  alumni & giving
   Full-bleed split, photography on the wedge. Two equal actions, because
   "come back" and "give" are different decisions and collapsing them into one
   button loses the alum who is not ready to donate.
   -------------------------------------------------------------------------- */
.legacy {
  display: grid;
  grid-template-columns: 41% 59%;
  background: var(--ub-purple-deep);
  position: relative;
  overflow: hidden;
}
.legacy-media {
  background-size: cover;
  background-position: center 30%;
  min-height: 560px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--wedge)) 100%, 0 100%);
}
.legacy-body {
  display: flex;
  align-items: center;
  padding: 96px 5vw 96px 3vw;
}
.legacy-inner { max-width: 36rem; color: var(--white); }
.legacy-inner .eyebrow-rule { color: #7FD9F5; }
.legacy-inner h2 {
  font-size: clamp(2.3rem, 4.1vw, 3.7rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.032em;
  color: var(--white);
}
.legacy-inner p.lede {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin-top: 20px;
}
.legacy-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 34px;
  margin-top: 38px;
  justify-content: start;
}
.legacy-stats > div { border-left: 3px solid var(--ub-blue); padding-left: 16px; }
.legacy-stats .n {
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}
.legacy-stats .l {
  margin-top: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.66);
  line-height: 1.4;
}
.legacy-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 42px;
}
.legacy-act {
  display: block;
  border: 1px solid rgba(255,255,255,0.24);
  padding: 24px 22px 26px;
  text-decoration: none;
  transition: var(--transition);
}
.legacy-act:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--ub-blue);
  transform: translateY(-5px);
}
.legacy-act h3 {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}
.legacy-act p {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}
.legacy-act .go {
  display: block;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7FD9F5;
}
.legacy-act .go i { margin-left: 5px; transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1); }
.legacy-act:hover .go i { transform: translateX(5px); }


/* --------------------------------------------------------------------------
   CLOSING CTA  -  enrollment stays the primary ask, with the other three
   audiences given a quiet line rather than a competing button.
   -------------------------------------------------------------------------- */
.cta-section {
  background: linear-gradient(135deg, var(--ub-purple) 0%, var(--ub-purple-dark) 100%);
  padding: 100px 0;
  color: var(--white);
}

.cta-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}

.cta-text {
  flex: 1 1 50%;
  max-width: 38rem;
}

.cta-text h2 {
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.cta-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
  margin: 0;
}

.cta-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.cta-section .cta-buttons .btn {
  white-space: nowrap;
}

.cta-section .cta-more {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.24);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
}
.cta-more .cta-more-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 0.55 measured 4.5:1 on the purple gradient  -  a bare pass at 11.5px bold.
     0.62 gives real margin. */
  color: rgba(255,255,255,0.62);
}
.cta-more a {
  color: rgba(255,255,255,0.86);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
}
.cta-more a:hover { color: var(--white); border-bottom-color: var(--white); }



/* ==========================================================================
   RESPONSIVE  -  1100px then 768px
   Split out of the theme's home3.css along with the rules above. The two
   short-viewport queries that trimmed .door-line come too: that descriptor
   line is the door band's own, and it is inert on the current homepage but
   correct the moment an editor types a `line` back into a door.
   ========================================================================== */

@media (min-width: 1101px) and (max-height: 900px) {
  .door-line { margin-top: 7px; font-size: 0.82rem; }
}

@media (max-width: 1100px) {
  /* Hero goes static below 1100px, so nothing overlaps it. */
  .doors { margin-top: 0; padding-bottom: 0; }
  .doors-grid { grid-template-columns: repeat(2, 1fr); box-shadow: var(--shadow-md); }
  .door:nth-child(2n) { border-right: none; }
  .door:nth-child(-n+4) { border-bottom: 1px solid #E8ECEE; }
  /* Fifth door has no partner; let it run the full width rather than leaving
     a hole in the grid. */
  .door:last-child { grid-column: 1 / -1; border-right: none; }

  .whatson-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .whatson-grid { grid-template-columns: 1fr; gap: 40px; }
  .news-lead-img { height: 280px; }

  .impact-grid { grid-template-columns: 1fr; gap: 44px; }
  .impact-intro { max-width: none; }

  .legacy { grid-template-columns: 1fr; }
  .legacy-media {
    min-height: 300px;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }
  .legacy-body { padding: 60px 0; }
  .legacy-inner { max-width: none; padding: 0 20px; }
}

@media (max-width: 768px) {
  .doors-grid { grid-template-columns: 1fr; }
  .door { border-right: none; border-bottom: 1px solid #E8ECEE; }
  .door:last-child { border-bottom: none; }

  .news-lead-img { height: 210px; }
  .news-lead h3 { font-size: 1.42rem; }
  .news-item { grid-template-columns: 78px 1fr; gap: 14px; }
  .news-item-thumb { height: 60px; }

  .impact-cards { grid-template-columns: 1fr; }

  .legacy-stats { grid-template-columns: 1fr; gap: 20px; }
  .legacy-actions { grid-template-columns: 1fr; }

  .cta-more { gap: 10px 20px; }
}

@media (max-width: 1180px) {
  .cta-section { padding: 80px 0; }
  .cta-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 32px;
  }
  .cta-text { max-width: 44rem; }
  .cta-text h2,
  .cta-text p { max-width: none; }
  .cta-buttons { justify-content: center; }
}

@media (max-width: 640px) {
  .cta-section { padding: 64px 0; }
  .cta-container { gap: 28px; }
  .cta-section .cta-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    gap: 12px;
  }
  .cta-section .cta-buttons .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .cta-section .cta-text h2 { font-size: 1.85rem; }
}

/* ==========================================================================
   SECTION BLOCKS (ub/stat-strip, ub/stat-feature, ub/tabbed-cards,
   ub/feature-panel, ub/timeline, ub/overlay-cards, ub/numbered-steps)
   Migrated from theme home.css to ensure self-contained block portability.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PROOF STRIP  -  overlaps the hero edge
   -------------------------------------------------------------------------- */
.proof-strip {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--proof-overlap) * -1);
  padding-bottom: 100px;
}
.college-page-hero + .proof-strip,
.pg-hero + .proof-strip {
  margin-top: -44px;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.proof-cell {
  padding: 30px 26px;
  border-right: 1px solid #E8ECEE;
  border-top: 4px solid var(--ub-purple);
  transition: var(--transition);
}
.proof-cell:nth-child(even) { border-top-color: var(--ub-blue); }
.proof-cell:last-child { border-right: none; }
.proof-cell:hover { transform: translateY(-6px); }
.proof-num {
  font-size: clamp(2rem, 2.7vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ub-purple);
}
.proof-label {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-main);
  margin-top: 9px;
  line-height: 1.38;
  letter-spacing: 0.015em;
}
.proof-note {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.45;
  letter-spacing: 0.015em;
}
/* Source line under the figures (ub/stat-strip `source`). Declared here so the
   block carries it: content-blocks.css, which holds the .pg-facts-source twin,
   is not loaded on a page that has only section blocks. */
.proof-source {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-light, #5a6570);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   OUTCOMES  -  full-bleed dark band, editorial scale
   -------------------------------------------------------------------------- */
.outcomes {
  background: var(--ink);
  color: var(--white);
  padding: var(--section-pad) 0 90px;
  position: relative;
  overflow: hidden;
}
/* Wedge motif, echoed as a hairline */
.outcomes::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 46%;
  height: 100%;
  background: linear-gradient(160deg, rgba(89,45,130,0.55) 0%, rgba(89,45,130,0) 62%);
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.outcomes .container { position: relative; z-index: 2; }

.outcomes-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.v2 .outcomes .eyebrow-rule,
.outcomes .eyebrow-rule { color: #7FD9F5; }
.v2 .outcomes .eyebrow-rule::before,
.outcomes .eyebrow-rule::before { background: #7FD9F5; }
.mega-figure {
  font-size: clamp(6rem, 15vw, 13.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--white);
}
.mega-caption {
  font-size: clamp(1.4rem, 2.3vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-top: 12px;
}
.mega-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.62);
  margin-top: 12px;
  line-height: 1.6;
  max-width: 30rem;
}

/* Were inline styles in ub_render_stat_feature(). The disclaimer was #666 on
   ink (3.19:1); it now carries source footnotes, so it has to be readable. */
.outcomes-action { margin-top: 24px; }
.outcomes-disclaimer {
  margin-top: 14px;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
}

.outcomes-splits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.split-stat { border-left: 3px solid var(--ub-blue); padding-left: 18px; }
.split-stat .n {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}
.split-stat .l {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
  line-height: 1.45;
}

/* Employer roster, reversed */
.employers2 { margin-top: 66px; }
.employers2 h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 30px;
}
.employer-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.12);
}
.employer-name {
  background: var(--ink);
  padding: 26px 20px;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: rgba(255,255,255,0.82);
  text-align: center;
  transition: var(--transition);
}
.employer-name:hover { color: var(--white); background: rgba(89,45,130,0.5); }

/* --------------------------------------------------------------------------
   PATHWAYS  -  outcome-first program finder
   -------------------------------------------------------------------------- */
.pathways {
  padding: clamp(2.25rem, 3.5vw, 3.5rem) 0;
  background: var(--bg-light);
}
.ac-colleges + .pathways {
  padding-top: clamp(1rem, 1.75vw, 1.75rem);
}
.pathways-head {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.pathway-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid #DEE4E7;
  margin-bottom: clamp(1.5rem, 2.25vw, 2rem);
}
.pathway-tab {
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  margin-bottom: -3px;
  padding: 15px 26px 15px 0;
  margin-right: 34px;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: -0.01em;
}
.pathway-tab:hover { color: var(--ub-purple); }
.pathway-tab.active { color: var(--ub-purple); border-bottom-color: var(--ub-purple); }

.pathway-panel { display: none; }
.pathway-panel.active { display: block; }

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.pathway-card {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border-bottom: 4px solid transparent;
  transition: var(--transition);
}
.pathway-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--ub-blue);
}
.pathway-thumb {
  height: 168px;
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Wedge motif again, as a corner cut on every card */
.pathway-thumb::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  border-style: solid;
  border-width: 0 0 26px 26px;
  border-color: transparent transparent var(--white) transparent;
}
.pathway-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.pathway-degree {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ub-blue-text);
}
.pathway-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 9px 0 14px;
}
.pathway-outcome {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #EDF1F2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pathway-outcome .v {
  font-size: 1.42rem;
  font-weight: 800;
  color: var(--ub-purple);
  letter-spacing: -0.025em;
  line-height: 1;
}
.pathway-outcome .k {
  font-size: 0.82rem;
  color: var(--text-light);
  text-align: right;
  line-height: 1.3;
  font-weight: 600;
}
.pathways-foot {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.pathways-foot .disclaimer {
  font-size: 0.82rem;
  color: var(--text-light);
  max-width: 34rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   SOUND  -  full-bleed panoramic, 50/50 overlay
   -------------------------------------------------------------------------- */
.sound {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-image: url('../images/ub-seaside-pano.jpg');
  background-size: cover;
  /* Bias upward so the Sound and Seaside Park stay in frame, not the rooftops.
     NOT background-attachment: fixed  -  scrolling happens in
     .main-content-wrapper, and `fixed` anchors to the viewport instead,
     which strands the image mid-section. */
  background-position: center 34%;
}
.sound::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(27,16,35,0.93) 0%,
    rgba(27,16,35,0.78) 38%,
    rgba(27,16,35,0.30) 62%,
    rgba(27,16,35,0.08) 100%);
}
.sound .container { position: relative; z-index: 2; }
.sound-panel { max-width: 40rem; color: var(--white); padding: 90px 0; }
/* Was an inline style on an unclassed div in ub_render_feature_panel(). */
.sound-actions {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.v2 .sound-panel .eyebrow-rule,
.sound-panel .eyebrow-rule { color: #7FD9F5; }
.v2 .sound-panel .eyebrow-rule::before,
.sound-panel .eyebrow-rule::before { background: #7FD9F5; }
.sound-panel h2 {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--white);
}
.sound-panel p {
  font-size: 1.16rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.84);
  margin-top: 22px;
}
.sound-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px;
  margin-top: 42px;
  justify-content: start;
}
/* Direct children only  -  a bare `.sound-facts div` also matches the nested
   .n and .l elements, which draws the accent rule three times per stat. */
.sound-facts > div { border-top: 3px solid var(--ub-blue); padding-top: 13px; }
.sound-facts .n {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}
.sound-facts .l {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.66);
  margin-top: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   CENTENNIAL TIMELINE 1927 → 2027
   -------------------------------------------------------------------------- */
.centennial2 {
  padding: var(--section-pad) 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.centennial2 .ghost-year {
  position: absolute;
  top: 40px;
  right: -2vw;
  font-size: 26vw;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(89,45,130,0.045);
  pointer-events: none;
  user-select: none;
}
.centennial2 .container { position: relative; z-index: 2; }

.timeline2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 3px solid #E4E9EB;
}
.tl-node { padding: 0 22px 0 0; position: relative; padding-top: 30px; }
.tl-node::before {
  content: '';
  position: absolute;
  top: -3px; left: 0;
  width: 100%;
  height: 3px;
  background: var(--ub-purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.25,0.8,0.25,1);
}
.tl-node.in-view::before { transform: scaleX(1); }
.tl-node::after {
  content: '';
  position: absolute;
  top: -8px; left: 0;
  width: 13px; height: 13px;
  background: var(--ub-purple);
}
.tl-node:last-child::after { background: var(--ub-blue); }
.tl-year {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ub-purple);
  line-height: 1;
}
.tl-node:last-child .tl-year { color: var(--ub-blue-text); }
.tl-text {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-top: 11px;
}
.tl-text strong { color: var(--text-main); font-weight: 700; display: block; margin-bottom: 3px; }

/* --------------------------------------------------------------------------
   CENTERS OF EXCELLENCE  -  real facilities
   -------------------------------------------------------------------------- */
.centers { padding: var(--section-pad) 0; background: var(--bg-light); }
.centers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 52px;
}
.center-card {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.center-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(27,16,35,0.93) 0%,
    rgba(27,16,35,0.55) 42%,
    rgba(27,16,35,0.08) 100%);
  transition: var(--transition);
}
.center-card:hover::before { background: linear-gradient(to top, rgba(89,45,130,0.95) 0%, rgba(27,16,35,0.5) 55%, rgba(27,16,35,0.1) 100%); }
.center-body { position: relative; z-index: 2; padding: 30px 28px; }
.center-body .kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FD9F5;
}
.center-body h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 10px 0 9px;
}
.center-body p {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   APPLY  -  numbered steps on the wedge
   -------------------------------------------------------------------------- */
.apply2 { padding: var(--section-pad) 0; background: var(--white); }
.apply2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.apply2-step {
  border-top: 4px solid var(--ub-purple);
  background: var(--bg-light);
  padding: 30px 26px 32px;
  position: relative;
  transition: var(--transition);
}
.apply2-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.apply2-step .n {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(89,45,130,0.18);
}
.apply2-step h3 {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 10px 0 10px;
}
.apply2-step p { font-size: 0.98rem; color: var(--text-light); line-height: 1.58; }



/* Count-aware grids, desktop: a 3-column grid with four cards went 3+1 and a
   5-column timeline with three or six nodes left gaps or an orphan. */
@media (min-width: 1101px) {
  .timeline2:has(> .tl-node:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .timeline2:has(> .tl-node:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .timeline2:has(> .tl-node:nth-child(6):last-child) { grid-template-columns: repeat(6, 1fr); }
  .centers-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .apply2-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .pathway-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .proof-grid:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
  .proof-grid > :nth-child(5):last-child { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {

  :root { --section-pad: 88px; }

  /* Hero carousel responsive rules */
  .hero2 { display: block; min-height: 0; }
  .hero2::after { display: none; }
  .hero2-slide {
    position: relative;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .hero2-slide.active { display: block; }
  .hero2-media {
    position: relative;
    inset: auto;
    height: 320px;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }
  .hero2-image { inset: 0; }
  .hero2-body { padding: 46px 0 34px; }
  .hero2-inner { max-width: none; padding-left: 22px; }
  .hero2-sub { min-height: 0; }
  .hero2-watermark { display: none; }

  .hero2-switcher {
    position: relative;
    bottom: auto;
    padding: 0 0 40px;
  }
  .hs-track {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: none;
    margin-left: 0;
    padding-bottom: 1.6rem;
    position: relative;
  }
  .hs-item {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    text-align: center;
    transition: background 0.25s ease, border-color 0.25s ease;
    position: static;
  }
  .hs-item:hover,
  .hs-item:focus-visible {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.5);
  }
  .hs-item.active {
    background: var(--ub-blue);
    border-color: var(--ub-blue);
  }
  .hs-item::before,
  .hs-item::after { display: none; }
  .hs-num {
    display: block;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);
  }
  .hs-item.active .hs-num { color: var(--ink, #1B1023); }
  .hs-label {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-top: 0;
    max-width: 100%;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    clip-path: inset(50%);
    color: rgba(255,255,255,0.001);
  }
  .hs-item.active .hs-label {
    clip-path: none;
    color: var(--white);
  }

  /* Section blocks responsive rules */
  .proof-strip { margin-top: 0; padding: 0 0 var(--section-pad); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); box-shadow: var(--shadow-md); }
  .proof-cell:nth-child(2) { border-right: none; }
  .proof-cell:nth-child(1), .proof-cell:nth-child(2) { border-bottom: 1px solid #E8ECEE; }

  .outcomes-head { grid-template-columns: 1fr; gap: 40px; }
  .outcomes-splits { grid-template-columns: 1fr; gap: 24px; }
  .employer-row { grid-template-columns: repeat(2, 1fr); }

  .pathway-grid { grid-template-columns: repeat(2, 1fr); }

  .sound { background-attachment: scroll; min-height: 0; }
  .sound-facts { grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .timeline2 { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .centers-grid { grid-template-columns: repeat(2, 1fr); }
  .apply2-grid { grid-template-columns: 1fr; }
  .centennial2 .ghost-year { font-size: 38vw; }

}

@media (max-width: 768px) {

  :root { --section-pad: 66px; }

  /* Hero carousel mobile rules */
  .hero2-media { height: 240px; }
  .hero2-inner { padding-left: 18px; }
  .hero2-badge { margin-bottom: 18px; }
  .hero2-ctas .btn, .hero2-ctas .btn-ghost { width: 100%; text-align: center; }

  .hs-track { gap: 8px; }
  .hs-item { min-width: 46px; }
  .hs-num { font-size: 0.86rem; }

  /* Section blocks mobile rules */
  .proof-grid { grid-template-columns: 1fr; }
  .proof-cell { border-right: none; border-bottom: 1px solid #E8ECEE; }
  .proof-cell:last-child { border-bottom: none; }

  .employer-row { grid-template-columns: 1fr; }
  /* Scroll the tab strip rather than wrapping four labels onto three rows. */
  .pathway-tabs { gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pathway-tab { white-space: nowrap; flex-shrink: 0; }
  /* The wedge is dropped on stacked mobile layouts (brand: The wedge). */
  .outcomes::before { display: none; }
  .pathway-tab { font-size: 0.96rem; margin-right: 20px; padding: 12px 16px 12px 0; }
  .pathway-grid { grid-template-columns: 1fr; }

  .sound-facts { grid-template-columns: 1fr; gap: 20px; }
  .sound-facts > div { display: flex; align-items: baseline; gap: 16px; border-top: none; border-left: 3px solid var(--ub-blue); padding-top: 0; padding-left: 14px; }
  .sound-facts .l { margin-top: 0; }

  .timeline2 { grid-template-columns: 1fr; }
  .centers-grid { grid-template-columns: 1fr; }

}