/* --- CSS Variables & Reset --- */
:root {
    /* Brand Colors (context.md) */
    --ub-purple: #592d82;
    --ub-purple-dark: #3f1d61;
    --ub-blue: #00a7e0;
    --ub-blue-hover: #008fbf;
    
    /* Neutral Colors */
    --text-main: #2c3e50;
    --text-light: #5b6a75;
    --bg-light: #f4f7f6;
    --white: #ffffff;
    
    /* Shadows & Transitions */
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.12);
    --shadow-float: 0 15px 30px rgba(89, 45, 130, 0.2);
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── EDITABLE DESIGN TOKENS ──────────────────────────────────────────
       Everything below is settable at Appearance → Theme Design. The values
       here ARE the defaults that screen shows, and the two must not drift:
       the settings store keeps only what differs from its schema default and
       emits only that, so a value changed here but not there silently becomes
       an override on every page — and one changed there but not here becomes a
       default that never applies.
       See inc/theme-design/tokens.php, which lists the same numbers.

       These are all NEW NAMES for values the sheet already had inline. Each
       consumer below was rewritten to read its token, and each token is set to
       the literal that consumer used to carry, so nothing computes differently
       until somebody changes something.

       Motion: --transition is now composed rather than literal. All 65 of its
       consumers are unchanged; 0.3s and 300ms are the same duration.          */

    /* Typography */
    --font-display: var(--font-primary);   /* headings; falls back to the body face */
    --line-height-base: 1.6;
    --heading-weight: 800;
    --heading-tracking-scale: 1;           /* multiplies the display classes' negative tracking */
    --eyebrow-tracking: 0.2em;

    /* Motion */
    --transition-dur: 300ms;
    --transition-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition: all var(--transition-dur) var(--transition-ease);
    --reveal-dur: 700ms;

    /* Buttons. Padding and label size are MULTIPLIERS, not lengths: the
       homepage runs deliberately larger buttons than the rest of the site
       (13x30 against 10x24, in home-scale.css), and one absolute value here
       would flatten that difference into whichever of the two it happened to
       be set from. */
    /* Units on a zero, deliberately: tools/check-design-settings.php compares
       these literals against the schema defaults, and `0` against `0px` is a
       mismatch it is right to report. */
    --btn-radius: 0px;
    --btn-weight: 600;
    --btn-pad-scale: 1;
    --btn-font-scale: 1;
    --btn-transform: none;
    --btn-tracking: 0em;
    --btn-border-width: 2px;
    --btn-lift: 2px;                       /* hover rise; negated at the point of use */

    /* Vertical rhythm.
       Declared HERE and not only in home.css because ub-elements/assets/blocks/
       ub-sections.css reads it, and that sheet loads with the section blocks on
       any page — while home.css loads only on the homepage, programme pages and
       the brand guide. The two happen to coincide on every page that exists
       today, so this closes a gap rather than fixing a live bug: a section
       block on a page outside that set would have resolved var(--section-pad)
       to nothing, which makes the whole `padding` declaration invalid and
       collapses the section to zero vertical space.
       home.css and home-scale.css both load later and still set their own
       values, so the homepage is untouched. */
    --section-pad: 152px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    color: var(--text-main);
    line-height: var(--line-height-base);
    background-color: var(--bg-light);
    overflow: hidden;
}

/* Headings take the display face, which defaults to the body face — so with
   nothing customised this changes nothing. It is what makes a serif-over-sans
   pairing possible from the settings screen without a code change.
   The .display-* classes are restated because ub-elements.css scopes its own
   copies under `.v2` and sets size, weight and tracking there but never
   font-family, so there is nothing here to collide with. */
h1, h2, h3, h4, h5, h6,
.display-xl,
.display-lg {
    font-family: var(--font-display);
}

/* Reduced motion, honoured for everything the tokens drive.
   RE-STATED in the generated CSS as well (see inc/theme-design/css.php): that
   block prints after this sheet with the same specificity, so an unconditional
   :root there would override this one and start showing hover lifts and long
   fades to somebody who asked their operating system for neither. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-dur: 0.01ms;
        --reveal-dur: 0.01ms;
        --btn-lift: 0px;
    }
}

/* Accessibility: Screen Reader Text and Skip Link */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-color: var(--ub-purple);
    color: var(--white);
    clip: auto !important;
    clip-path: none !important;
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    height: auto;
    left: 12px;
    line-height: normal;
    padding: 12px 24px;
    position: fixed;
    top: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: auto;
    z-index: 100000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    outline: 3px solid var(--ub-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.page-layout {
    display: flex;
    height: 100vh;
    width: 100%;
}

.main-content-wrapper {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: var(--ub-blue);
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* The site's measure. ONE width for every page, deliberately.
 *
 * This lived in home-scale.css as `body.v2 .container { max-width: 1384px }`,
 * which meant the page measure depended on which stylesheet a page happened to
 * load: the homepage and program pages got 1384px, every other page 1280px.
 * The visible symptom was the header — the centennial ribbon, utility bar,
 * brand bar and nav all come from header.php on EVERY page, but their
 * .container inherited whichever width that page's sheets provided, so the
 * chrome shifted 104px between the homepage and /admissions/.
 *
 * Site chrome cannot have a width that depends on a page's block content, so
 * the measure belongs here, in the sheet that loads everywhere. home-scale.css
 * keeps the homepage's TYPE and SPACING scale; it no longer sets the width.
 */
:root {
    --measure: 1384px;
    --gutter: 32px;
}

.container {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

@media (max-width: 1100px) {
    :root {
        --measure: 100%;
        --gutter: 28px;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 22px;
    }
}

/* --------------------------------------------------------------------------
   Centennial ribbon (sits above the utility bar)

   Site chrome: header.php renders this on EVERY page, so it is styled here in
   the sheet that loads everywhere. It used to live in home.css, which only
   loads on the homepage and program pages — everywhere else the ribbon fell
   back to unstyled markup, which is how it came to look different on
   /admissions/ from the homepage.
   -------------------------------------------------------------------------- */
.centennial-ribbon {
    background: var(--ub-purple-deep);
    color: #EBDDF7;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}
.centennial-ribbon .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 9px 20px;
}
.centennial-ribbon .years {
    color: var(--white);
    font-weight: 800;
    letter-spacing: 0.14em;
}
.centennial-ribbon .divider {
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.28);
}
.centennial-ribbon a {
    color: #7FD9F5;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(127, 217, 245, 0.45);
}
.centennial-ribbon a:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}

/* Hidden on phones on every page. This was in home.css too, so the ribbon
   disappeared on a phone on the homepage and stayed visible everywhere else. */
@media (max-width: 768px) {
    .centennial-ribbon { display: none; }
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(10px * var(--btn-pad-scale)) calc(24px * var(--btn-pad-scale));
    border-radius: var(--btn-radius);
    font-weight: var(--btn-weight);
    font-size: calc(0.95rem * var(--btn-font-scale));
    text-transform: var(--btn-transform);
    letter-spacing: var(--btn-tracking);
    transition: var(--transition);
    cursor: pointer;
    /* Transparent, and the same width as an outlined button's visible one, so
       swapping a filled button for an outlined one does not change its size. */
    border: var(--btn-border-width) solid transparent;
}

.btn-large {
    padding: calc(14px * var(--btn-pad-scale)) calc(32px * var(--btn-pad-scale));
    font-size: calc(1.05rem * var(--btn-font-scale));
}

.btn-primary {
    background-color: var(--ub-purple);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--ub-purple-dark);
    transform: translateY(calc(var(--btn-lift) * -1));
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--ub-blue);
    color: var(--white);
}

.btn-secondary:hover {
    background-color: var(--ub-blue-hover);
    transform: translateY(calc(var(--btn-lift) * -1));
    box-shadow: var(--shadow-md);
}

.btn-outline {
    border-color: var(--ub-purple);
    color: var(--ub-purple);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--ub-purple);
    color: var(--white);
}

.btn-outline-light {
    border-color: var(--white);
    color: var(--white);
    background: transparent;
}

.btn-outline-light:hover {
    background-color: var(--white);
    color: var(--ub-purple);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(calc(var(--btn-lift) * -1));
}

.btn-ai {
    background: linear-gradient(135deg, var(--ub-purple), var(--ub-blue));
    color: var(--white);
    border: none;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(89, 45, 130, 0.2);
}

.btn-ai:hover {
    box-shadow: 0 6px 15px rgba(89, 45, 130, 0.4);
    transform: translateY(calc(var(--btn-lift) * -1));
    color: var(--white);
}

.btn-ai .ai-sparkle-icon {
    width: 20px;
    height: 20px;
}

/* --- 3-Tier Header System --- */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    flex-shrink: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

/* Tier 1: Utility Bar */
.utility-bar {
    background-color: var(--bg-light);
    border-bottom: 1px solid #eaeaea;
    font-size: 0.85rem;
    padding: 8px 0;
}
.utility-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.utility-left a, .utility-right a {
    color: var(--text-light);
    margin-right: 20px;
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}
.utility-left a:hover, .utility-right a:hover {
    color: var(--ub-purple);
}
.utility-right {
    display: flex;
    align-items: center;
}
.utility-right a:last-child {
    margin-right: 0;
}
.utility-login {
    font-weight: 700 !important;
    color: var(--ub-purple) !important;
}

/* Tier 2: Brand Bar */
.brand-bar {
    padding: 15px 0;
    background: var(--white);
}
.brand-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    height: 55px;
    width: auto;
}

/* Tier 3: Navigation Bar (Mega Menu Core) */
.nav-bar {
    background-color: var(--white);
    border-top: 1px solid #eaeaea;
}
.nav-container {
    display: flex;
    justify-content: center;
    position: relative; /* Anchor for mega menu */
}
.main-nav {
    width: 100%;
}
.main-nav > ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.main-nav > ul > li > a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 15px 0;
    transition: var(--transition);
}
.main-nav > ul > li > a:focus-visible {
    color: var(--ub-purple);
    outline: 2px solid var(--ub-purple);
    outline-offset: 2px;
    border-radius: 2px;
}
.main-nav > ul > li > a i {
    font-size: 0.8rem;
    color: var(--ub-purple);
    transition: transform 0.3s ease;
}
.main-nav > ul > li:hover > a,
.main-nav > ul > li.is-open > a,
.main-nav > ul > li:has(.mega-menu:focus-within) > a {
    color: var(--ub-purple);
}
.main-nav > ul > li:hover > a i,
.main-nav > ul > li.is-open > a i,
.main-nav > ul > li:has(.mega-menu:focus-within) > a i {
    transform: rotate(180deg);
}

/* Mega Menu Panels */
.mega-menu-trigger {
    position: static; /* Let the mega menu span the full nav-container width */
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-top: 3px solid var(--ub-purple);
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 40px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}
.has-dropdown:hover .mega-menu,
.has-dropdown.is-open .mega-menu,
.has-dropdown:has(.mega-menu:focus-within) .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Athletics mega-menu feature panel

   Site chrome: header.php puts this in the primary nav on EVERY page. It used
   to live in home3.css, which loads only where section blocks appear, so off
   the homepage the panel rendered with no background, no column width and the
   wrong gap — the same failure the centennial ribbon had.

   MUST STAY AFTER the base .mega-menu rules above. `.mega-menu` sets
   gap: 80px for three link columns and `.mega-menu--athletics` is a
   single-class selector too, so this only wins on source order. Placed before
   them, the 52px gap is silently discarded and the fourth column pushes the
   panel off the container edge.
   -------------------------------------------------------------------------- */
.mega-menu--athletics {
  /* style.css sets gap: 80px for three link columns. A fourth, wider child
     needs that pulled in or the panel is forced off the container edge. */
  gap: 52px;
  align-items: flex-start;
}
.mega-menu--athletics .mega-feature {
  flex: 0 0 288px;
  background: var(--ub-purple-deep);
  border-top: 3px solid var(--ub-blue);
  padding: 20px 22px 24px;
}
.mega-feature .mf-kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FD9F5;
}
.mega-feature .mf-title {
  margin-top: 10px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
}
.mega-feature .mf-meta {
  margin-top: 7px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.74);
}
.mega-feature .btn { margin-top: 16px; }
.mega-feature .mf-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.66);
}

@media (max-width: 1100px) {
    /* The mega menu becomes a stacked accordion here. Both of these must be
       re-stated rather than inherited from the mobile block above:
       `.mega-menu` is (0,1,0) and `.mega-menu--athletics` is (0,2,0), so the
       desktop rule outranks it regardless of the media query. Left alone, the
       feature panel would be locked to a 288px HEIGHT (flex-basis follows the
       column axis) with 52px gaps in a drawer. */
    .mega-menu--athletics { gap: 18px; align-items: stretch; }
    .mega-menu--athletics .mega-feature { flex: 0 0 auto; }
}

.mega-column h4 {
    color: var(--ub-purple);
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 10px;
}
.mega-column ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mega-menu a {
    transition-property: color, background-color, border-color, padding, transform;
}
.mega-column ul li a {
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-dur) var(--transition-ease), padding-left var(--transition-dur) var(--transition-ease);
    display: block;
}
.mega-column ul li a:hover,
.mega-column ul li a:focus-visible {
    color: var(--ub-blue);
    padding-left: 5px;
    outline: 2px solid var(--ub-blue);
    outline-offset: 2px;
}

/* Academics mega: three dense columns (aligned with legacy nav breadth) */
.mega-menu--three-col {
    gap: 48px;
    flex-wrap: nowrap;
    justify-content: center;
}

@media (min-width: 1101px) {
    .mega-menu--three-col {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Search / quick links: compact panel, right-aligned under trigger */
.mega-menu--narrow {
    width: auto;
    min-width: 260px;
    max-width: 320px;
    left: auto;
    right: 0;
    gap: 0;
    padding: 28px 24px;
    justify-content: flex-start;
}

.main-nav > ul > li.mega-menu-trigger--search > a {
    font-size: 1.1rem;
    padding-left: 12px;
    padding-right: 12px;
}

.header-actions {
    display: flex;
    gap: 15px;
}

/* Moved mobile-menu-toggle to media queries section to avoid conflict */

/* --- Refined Geometric Mask Hero Carousel --- */
.hero-geo-slider {
    height: 60vh;
    min-height: 720px;
    max-height: 900px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1b0c38 0%, #0d051c 100%);
}

.hero-geo-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    z-index: 1;
    background: #1b0c38; /* Prevents underneath slide bleed-through */
}

.hero-geo-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Left Content Column */
.hero-geo-content {
    position: relative;
    z-index: 5;
    flex: 0 0 44%;
    max-width: 44%;
    padding-left: max(30px, calc((100vw - 1280px) / 2 + 30px));
    padding-right: 20px;
    color: var(--white);
}

@media (max-width: 1340px) {
    .hero-geo-content {
        padding-left: 50px;
        flex: 0 0 46%;
        max-width: 46%;
    }
}

.hero-geo-inner {
    max-width: 560px;
    position: relative;
    padding-left: 24px; /* Adds clear breathing room between vertical accent line and text */
}

.hero-geo-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #ffffff;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ub-purple);
    margin-bottom: 20px;
    border: 1px solid var(--ub-purple);
}

.hero-geo-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--white);
    text-shadow: none;
}

.hero-geo-title span {
    display: block;
    font-size: 1.6rem;
    font-weight: 300;
    color: #e2e8f0;
    margin-top: 8px;
}

.hero-geo-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 25px;
    font-weight: 400;
}

/* Right Angled Image Container */
.hero-geo-image-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    z-index: 3;
    box-shadow: -15px 0 35px rgba(0, 0, 0, 0.6);
}

.hero-geo-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 0.8s ease-out;
}

.hero-geo-slide.active .hero-geo-image {
    animation: kenBurns 25s ease-out infinite alternate;
}

/* Scoped Animations for Active Slide */
.hero-geo-slide.active .animate-reveal {
    animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-geo-slide.active .hero-accent-line {
    animation: drawLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Dots Controls */
.hero-geo-controls {
    position: absolute;
    bottom: 70px; /* Adjusted from 95px to account for the shorter 60vh height and -50px pill card overlap */
    left: max(30px, calc((100vw - 1280px) / 2 + 30px));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
}

.geo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.geo-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.geo-dot.active {
    width: 35px;
    border-radius: 20px;
    background: #c084fc;
    border-color: rgba(255, 255, 255, 0.9);
}

/* =========================================================
   MOBILE RESPONSIVENESS (< 768px & < 1024px)
   ========================================================= */
@media (max-width: 1024px) {
    .hero-geo-slider {
        height: auto;
        min-height: 550px;
        padding-bottom: 90px; /* Added to ensure CTA buttons don't overlap dots */
    }
    .hero-geo-content {
        flex: 0 0 48%;
        max-width: 48%;
        padding-left: 30px;
    }
    .hero-geo-title {
        font-size: 2.6rem;
    }
    .hero-geo-title span {
        font-size: 1.3rem;
    }
    .hero-geo-image-wrapper {
        width: 56%;
        clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    }
}

@media (max-width: 768px) {
    .hero-geo-slider {
        height: auto;
        min-height: 0;
        display: block;
        position: relative;
        background: #1b0c38;
        padding-bottom: 70px; /* Room for dots */
    }
    .hero-geo-slide {
        position: relative;
        top: auto; left: auto;
        width: 100%; height: auto;
        display: none;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
        background: #1b0c38;
    }
    .hero-geo-slide.active {
        display: flex;
    }
    .hero-geo-image-wrapper {
        order: 1;
        position: relative;
        top: auto; right: auto;
        width: 100%;
        height: 280px;
        clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    }
    .hero-geo-content {
        order: 2;
        flex: 1 1 100%;
        max-width: 100%;
        padding: 25px 20px 40px 20px;
        text-align: left;
    }
    .hero-geo-badge {
        margin-bottom: 12px;
        font-size: 0.75rem;
    }
    .hero-geo-title {
        font-size: 2.2rem;
        margin-bottom: 12px;
    }
    .hero-geo-title span {
        font-size: 1.3rem;
        margin-top: 4px;
    }
    .hero-geo-subtitle {
        font-size: 0.98rem;
        margin-bottom: 25px;
    }
    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }
    .hero-cta .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .hero-geo-controls {
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
    }
}

/* =========================================================
   UB BRAND-GUIDED MINIMALIST PILL STATS CARDS
   ========================================================= */
.brand-stats-wrapper {
    position: relative;
    margin-top: -50px; /* Floating overlap on hero bottom */
    z-index: 25;
    padding-bottom: 50px;
}

.brand-pill-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.brand-pill-card {
    background: #ffffff;
    border-radius: 0;
    padding: 24px 22px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.brand-pill-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ub-purple) 0%, var(--ub-blue) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.brand-pill-card:hover {
    border-color: var(--ub-purple);
    transform: translateY(-6px);
    box-shadow: var(--shadow-float);
}

.brand-pill-card:hover::before {
    opacity: 1;
}

.brand-pill-icon {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: linear-gradient(135deg, var(--ub-purple) 0%, var(--ub-purple-dark) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(89, 45, 130, 0.25);
    transition: transform 0.35s ease;
}

.brand-pill-card:hover .brand-pill-icon {
    transform: scale(1.08) rotate(-4deg);
    color: #ffffff;
}

.brand-pill-number {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ub-purple-dark);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.brand-pill-label {
    font-size: 0.88rem;
    color: var(--text-light);
    font-weight: 600;
    margin-top: 4px;
}

@media (max-width: 1024px) {
    .brand-pill-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .brand-stats-wrapper {
        margin-top: -30px;
    }
}

@media (max-width: 640px) {
    .brand-pill-grid {
        grid-template-columns: 1fr;
    }
    .brand-stats-wrapper {
        margin-top: 20px;
        padding-bottom: 30px;
    }
}

/* Advanced Animations */
.hero-accent-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: var(--ub-blue); /* Modern electric blue */
    border-radius: 2px;
}
.hero-slide.active .hero-accent-line {
    animation: drawLine 1s cubic-bezier(0.8, 0, 0.2, 1) forwards;
}

.text-mask {
    overflow: hidden;
    padding-bottom: 5px; /* Prevent text-shadow clipping */
}

.animate-reveal {
    transform: translateY(110%);
    opacity: 0;
}
.hero-slide.active .animate-reveal,
.hero-geo-slide.active .animate-reveal {
    animation: revealUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
}
.hero-slide.active .animate-fade-in-up,
.hero-geo-slide.active .animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* Slider Controls */
.hero-slider-controls {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.slider-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.slider-dot.active {
    background: transparent;
    border-color: var(--white);
    transform: scale(1.3);
}

@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes drawLine {
    to { height: 100%; }
}

@keyframes revealUp {
    0% { transform: translateY(110%); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Stats */
.hero-stats-wrapper {
    position: relative;
    width: 100%;
    z-index: 10;
    margin-top: -80px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    background: var(--white);
    border-radius: 0;
    padding: 30px 20px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    border-bottom: 4px solid var(--ub-blue);
}

.stat-card:hover {
    transform: translateY(-10px);
    border-bottom-color: var(--ub-purple);
}

.stat-card i {
    font-size: 2.5rem;
    color: var(--ub-purple);
    margin-bottom: 15px;
}

.stat-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 5px;
}

.stat-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 600;
}

/* --- 50/50 Split Layout --- */
.split-50-50 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: var(--white);
}

.split-image {
    flex: 1 1 50%;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.split-content {
    flex: 1 1 50%;
    padding: 8% 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-light);
}

.split-content h2 {
    font-size: 2.5rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 20px;
}

.split-content p {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 30px;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .split-image, .split-content {
        flex: 1 1 100%;
    }
}

/* --- Discovery Portal --- */
.discovery-portal {
    padding: 120px 0;
    background: var(--bg-light);
}
.portal-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: flex-start;
}
.portal-tabs {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.portal-tab {
    background: var(--white);
    border: none;
    border-left: 5px solid transparent;
    padding: 30px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: var(--transition);
}
.portal-tab h3 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 10px;
    font-weight: 700;
}
.portal-tab p {
    color: var(--text-light);
    font-size: 1rem;
    margin: 0;
}
.portal-tab:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transform: translateX(5px);
}
.portal-tab.active {
    border-left-color: var(--ub-blue);
    background: #fdfdfd;
}
.portal-tab.active h3 {
    color: var(--ub-purple);
}
.portal-right {
    position: relative;
    height: 600px;
}
.portal-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.portal-content.active {
    opacity: 1;
    pointer-events: auto;
}
.portal-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portal-glass {
    position: absolute;
    bottom: 40px;
    right: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 40px;
    width: 400px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
@media (max-width: 900px) {
    .portal-container { grid-template-columns: 1fr; }
    .portal-right { height: 500px; }
    .portal-glass { width: calc(100% - 40px); right: 20px; bottom: 20px; }
}

/* --- Programs Section --- */
.programs-section {
    padding: 120px 0;
    background-color: var(--bg-light);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--ub-purple);
    margin-bottom: 10px;
    font-weight: 800;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-light);
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
    width: 100%;
}

.program-card {
    background: var(--white);
    border-radius: 0;
    border-top: 5px solid var(--ub-blue);
    padding: 50px 40px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.program-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ub-purple);
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.program-card:hover {
    transform: translateY(-8px);
    border-top-color: var(--ub-purple-dark);
}

.program-card:hover::after {
    transform: scaleY(1);
}

.program-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 167, 224, 0.1);
    color: var(--ub-blue);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: var(--transition);
}

.program-card:hover .program-icon {
    background-color: var(--ub-blue);
    color: var(--white);
}

.program-card h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--ub-purple);
    font-weight: 800;
    transition: color 0.3s ease;
}

.program-card p {
    color: var(--text-main);
    margin-bottom: 30px;
    font-size: 1.05rem;
    flex-grow: 1;
    transition: color 0.3s ease;
}

.program-link {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ub-blue);
    margin-top: auto;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.program-card:hover h3,
.program-card:hover p,
.program-card:hover .program-link,
.program-card:hover .program-icon {
    color: var(--white);
}

.program-card:hover .program-icon {
    background-color: rgba(255, 255, 255, 0.2);
}

.program-link i {
    transition: transform 0.3s ease;
}

.program-card:hover .program-link i {
    transform: translateX(5px);
}

/* --- News & Events Section --- */
.news-events-section {
    padding: 120px 0;
    background-color: var(--white);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card {
    background: var(--bg-light);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 25px;
}

.news-date {
    display: inline-block;
    color: var(--ub-blue);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.news-card h3 {
    font-size: 1.3rem;
    color: var(--ub-purple);
    margin-bottom: 10px;
    line-height: 1.3;
}

.news-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* --- CTA Section --- */
.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 — program variant -------------------------------------------------
   `ub/cta-band` with variant=program renders `class="cta-section pg-cta"`.
   Appended, never substituted: every rule above still applies, so the two
   variants cannot drift apart on anything they share, and no existing page
   styling `.cta-section` changes.

   These rules are the mockup's `.pg-cta` block (program.css § 13) re-pointed at
   the class names the block actually emits — `.cta-container` for the flex row
   and `.cta-buttons` for the actions, instead of `.pg-cta-inner` / `.pg-cta-acts`.
   They live here rather than in program.css because cta-band is generic and
   program.css only loads when a program block is on the page.

   Rationale and the rejected alternatives: docs/programs-plugin-plan.md §5.4.
   --------------------------------------------------------------------------- */
.cta-section.pg-cta {
    position: relative;
    background: var(--ub-purple);
    padding: 96px 0;
    overflow: hidden;
}

/* The diagonal wash on the right. Decorative and pointer-transparent, so it
   never intercepts a click meant for the buttons underneath it. */
.cta-section.pg-cta::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 46%;
    background: linear-gradient(150deg, rgba(42, 18, 64, 0.85) 0%, rgba(42, 18, 64, 0) 78%);
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.cta-section.pg-cta > .container {
    position: relative;
    z-index: 2;
}

.cta-section.pg-cta .cta-container {
    gap: 48px;
}

.cta-section.pg-cta .cta-text h2 {
    font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.028em;
    max-width: 30rem;
    margin-bottom: 0;
}

.cta-section.pg-cta .cta-text p {
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    margin-top: 16px;
    max-width: 32rem;
}

.cta-section.pg-cta .cta-buttons {
    flex-wrap: nowrap;
    gap: 16px;
    flex-shrink: 0;
}

/* --- Labs & Facilities Section (dark band & light variant) --- */
.pg-labs:not(.pg-labs--light) h2,
.pg-labs:not(.pg-labs--light) .display-lg,
.v2 .pg-labs:not(.pg-labs--light) h2,
.v2 .pg-labs:not(.pg-labs--light) .display-lg,
.v2 .pg-labs:not(.pg-labs--light) .pg-head h2 {
    color: var(--white);
}
.pg-labs:not(.pg-labs--light) .eyebrow-rule,
.v2 .pg-labs:not(.pg-labs--light) .eyebrow-rule {
    color: #7FD9F5;
}
.pg-labs:not(.pg-labs--light) .section-lede,
.v2 .pg-labs:not(.pg-labs--light) .section-lede {
    color: rgba(255, 255, 255, 0.88);
}

/* --- Premium Enrollment Sections --- */

/* 2. Career Outcomes Marquee */
.career-outcomes {
    background: var(--white);
    padding: 120px 0;
    overflow: hidden;
}
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #fafafa;
    padding: 50px 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}
.marquee-wrapper::before,
.marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}
.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #fafafa 0%, rgba(250, 250, 250, 0) 100%);
}
.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #fafafa 0%, rgba(250, 250, 250, 0) 100%);
}
.marquee {
    display: flex;
    width: fit-content;
    animation: scroll 40s linear infinite;
    align-items: center;
    gap: 80px;
}
.marquee:hover {
    animation-play-state: paused;
}
.marquee-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.marquee-logo img {
    height: 45px;
    width: auto;
    filter: grayscale(100%) opacity(0.4);
    transition: var(--transition);
}
.marquee-logo:hover img {
    filter: grayscale(0%) opacity(1);
}
.text-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}
.marquee-logo:hover .text-logo {
    color: var(--ub-purple);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 40px));
    }
}

/* 3. Visit Campus */
.visit-campus {
    background: url('https://www.bridgeport.edu/files/images/slider/aerial.jpg') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.visit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.visit-box {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    padding: 60px;
    max-width: 600px;
    margin-left: auto;
    border-left: 8px solid var(--ub-purple);
}
.visit-box h2 {
    font-size: 2.8rem;
    color: var(--ub-purple);
    margin-bottom: 20px;
    font-weight: 800;
}
.visit-box p {
    font-size: 1.15rem;
    margin-bottom: 30px;
    color: var(--text-main);
    line-height: 1.7;
}
.visit-ctas {
    display: flex;
    gap: 15px;
}

/* 3.5 Centennial Section */
.centennial-section {
    background: var(--ub-purple-dark);
    padding: 120px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.ghost-100 {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    font-size: 45vw;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    z-index: 1;
    user-select: none;
    pointer-events: none;
    letter-spacing: -10px;
}
.history-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.history-image {
    background: url('https://images.unsplash.com/photo-1541829070764-84a7d30dd3f3?q=80&w=2069&auto=format&fit=crop') center/cover;
    height: 600px;
    position: relative;
    border-left: 10px solid var(--ub-blue);
    filter: grayscale(100%) contrast(1.2);
}
.history-content {
    padding-right: 40px;
}
.history-kicker {
    display: inline-block;
    color: var(--ub-blue);
    font-weight: 800;
    letter-spacing: 3px;
    font-size: 1.2rem;
    margin-bottom: 20px;
}
.history-content h2 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
    font-weight: 800;
}
.history-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.8);
}
@media (max-width: 900px) {
    .history-split { grid-template-columns: 1fr; gap: 40px; }
    .history-image { height: 400px; }
    .ghost-100 { font-size: 80vw; left: -10%; }
}

/* 4. How to Apply */
.how-to-apply {
    padding: 120px 0;
    background: var(--bg-light);
}
.apply-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}
.apply-step {
    background: var(--white);
    padding: 40px;
    position: relative;
    border-top: 4px solid var(--ub-purple);
    transition: var(--transition);
}
.apply-step:hover {
    transform: translateY(-8px);
    border-color: var(--ub-blue);
    box-shadow: var(--shadow-md);
}
.step-number {
    font-size: 5rem;
    color: rgba(0, 167, 224, 0.08);
    position: absolute;
    top: 10px;
    right: 20px;
    font-weight: 800;
    line-height: 1;
}
.apply-step h3 {
    font-size: 1.6rem;
    color: var(--ub-purple);
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    font-weight: 800;
}
.apply-step p {
    color: var(--text-main);
    position: relative;
    z-index: 2;
    font-size: 1.05rem;
}

/* --- Footer --- */
.site-footer {
    background: #1a1a1a;
    color: rgba(255,255,255,0.6);
    padding: 60px 0 20px;
    font-size: 0.95rem;
}

/* Footer audience row ("Quick routes") — the same doors as the utility bar,
   repeated where people look second. footer.php renders it on EVERY page, so
   it belongs here and not in a page-specific sheet: it lived in home3.css and
   was therefore unstyled everywhere except the homepage and program pages. */
.footer-audiences {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    padding-bottom: 26px;
    margin-bottom: 38px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
/* NOT .fa-label — Font Awesome owns the `fa-*` namespace and a future icon of
   that name would inherit its ::before content. */
.footer-audiences .fr-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.footer-audiences a {
    color: rgba(255,255,255,0.82);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
}
.footer-audiences a:hover { color: var(--white); }

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    height: 45px;
    width: auto;
    margin-bottom: 20px;
    opacity: 0.9;
}

.brand-col p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.8);
}

.brand-col i {
    color: var(--ub-blue);
    margin-top: 5px;
}

.footer-col h3 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.links-col ul li {
    margin-bottom: 10px;
}

.links-col a {
    color: rgba(255,255,255,0.7);
    transition: var(--transition);
}

.links-col a:hover {
    color: var(--ub-blue);
    padding-left: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    font-size: 1.1rem;
}

.social-links a:hover {
    background: var(--ub-blue);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
}

/* Shared by the header's Ask AI button and the brand guide's component
   sample. The chat panel this once belonged to is gone; the icon is not. */
.ai-sparkle-icon {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
}

.mobile-toggles {
    display: none;
    align-items: center;
    gap: 15px;
}

.mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--ub-purple);
    cursor: pointer;
}

/* --- Landing Page Specific Overrides --- */
.landing-header .brand-bar {
    border-bottom: 2px solid var(--ub-purple);
}
.landing-header .phone-link {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ub-purple);
    text-decoration: none;
    margin-right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Landing Hero 50/50 Split */
.landing-hero {
    display: flex;
    min-height: 85vh;
    padding: 0;
    background: var(--ub-purple);
    position: relative;
}
.hero-split-left {
    flex: 1;
    padding: 120px 5% 120px 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    position: relative;
    z-index: 2;
}
.hero-split-right {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
}
.hero-content-wrapper {
    max-width: 600px;
}
.landing-hero .hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}
.landing-hero .hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 40px;
    opacity: 0.9;
}
.vp-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    border-radius: 0;
    margin-bottom: 20px;
}
.vp-item i {
    font-size: 2rem;
    color: var(--ub-blue);
}
.vp-item strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}
.vp-item p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Solid White Lead Form */
.hero-right {
    flex: 0 0 450px;
}
.lead-form-card {
    background: var(--white);
    padding: 40px;
    border-radius: 0;
    box-shadow: var(--shadow-md);
    border: none;
}
.lead-form-card h3 {
    color: var(--ub-purple);
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.lead-form-card > p {
    color: var(--text-light);
    margin-bottom: 25px;
}
.lead-form .form-group {
    position: relative;
    margin-bottom: 25px;
}
.lead-form input, .lead-form select {
    width: 100%;
    padding: 15px 15px 15px 10px;
    background: var(--white);
    border: 1px solid #eaeaea;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 1rem;
    color: var(--text-main);
    transition: var(--transition);
    outline: none;
}
.lead-form input:focus, .lead-form select:focus {
    border-color: var(--ub-purple);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(89, 45, 130, 0.1);
}
.lead-form label {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ub-purple);
    background: var(--white);
    padding: 0 5px;
    pointer-events: none;
}
.lead-form input::placeholder {
    color: transparent;
}
.btn-full {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    margin-top: 10px;
}

/* Scholarships Section */
.scholarships-section {
    padding: 120px 0;
    background: var(--white);
}
.scholarship-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.stat-card i.gold { color: #FFD700; }
.stat-card i.silver { color: #C0C0C0; }
.stat-card i.bronze { color: #CD7F32; }
.stat-card i.purple { color: var(--ub-purple); }
.disclaimer {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
}

/* Split Info Section */
.split-info-section {
    padding: 120px 0;
}
.split-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}
.split-row:last-child {
    margin-bottom: 0;
}
.split-row.reverse {
    flex-direction: row-reverse;
}
.split-content, .split-image {
    flex: 1;
}
.split-content h2 {
    color: var(--ub-purple);
    font-size: 2.2rem;
    margin-bottom: 20px;
}
.split-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.1rem;
}
.split-content ul {
    list-style: none;
    margin-bottom: 30px;
}
.split-content ul li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.split-content ul li i {
    color: var(--ub-blue);
}
.testimonial {
    background: var(--white);
    padding: 30px;
    border-left: 4px solid var(--ub-purple);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-main);
}
.testimonial footer {
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: 700;
    font-style: normal;
    color: var(--ub-purple);
}

/* --- Media Queries (Mobile Readiness) --- */
@media (max-width: 1100px) {
    .utility-bar { display: none; } /* Save vertical space on mobile */
    .header-actions { display: none; }
    
    .main-nav { 
        display: none; 
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 0;
        z-index: 900;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .main-nav.active {
        display: flex;
    }
    
    .main-nav > ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }
    
    .main-nav > ul > li {
        width: 100%;
        border-bottom: 1px solid #eaeaea;
    }
    
    .main-nav > ul > li > a {
        padding: 20px;
        justify-content: space-between;
    }
    
    /* Mobile Mega Menu Accordion */
    .mega-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        padding: 0 20px 20px 20px;
        flex-direction: column;
        gap: 20px;
        display: none; /* JS will toggle this */
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    
    .has-dropdown:hover .mega-menu {
        display: none; /* Disable CSS hover on mobile */
    }
    
    .has-dropdown.active .mega-menu {
        display: flex;
    }
    
    .has-dropdown.active > a i {
        transform: rotate(180deg);
    }
    
    .mobile-toggles { display: flex; }
    .hero-title { font-size: 3.5rem; }
    .hero-title span { font-size: 2rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@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,
    .cta-section.pg-cta .cta-text h2,
    .cta-section.pg-cta .cta-text p {
        max-width: none;
    }
    .cta-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.4rem; }
    .hero-title span { font-size: 1.3rem; }
    .hero-cta { flex-direction: column; }
    .cta-section.pg-cta { padding: 70px 0; }
    .stats-grid { grid-template-columns: 1fr; }
    .programs-grid { grid-template-columns: minmax(0, 1fr); }
    .news-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    
    .hero-stats-wrapper { position: relative; padding-top: 20px; background: transparent; width: 100%; margin-top: -40px; }
    .hero { height: auto; padding: 60px 0 80px; min-height: auto; flex-direction: column; justify-content: flex-start; align-items: stretch; }
    .hero-content { display: flex; flex-direction: column; justify-content: flex-start; flex: 1; align-items: center; text-align: center; padding-bottom: 20px; margin-top: 40px; }
    .programs-section { padding-top: 60px; }
    
    .social-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .alumni-content { flex-direction: column; gap: 30px !important; }
    .alumni-image, .alumni-info { width: 100%; }
}

@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;
    }
}

@media (max-width: 480px) {
    .hero-cta .btn { width: 100%; }
}
/* Landing Page Mobile Fixes */
@media (max-width: 768px) {
    .landing-hero { flex-direction: column; padding: 0; }
    .hero-split-left { padding: 60px 20px; }
    .hero-split-right { min-height: 400px; }
    .testimonial-split { flex-direction: column; }
    .testimonial-image { min-height: 300px !important; }
    .testimonial-content { padding: 60px 20px !important; }
    .open-house-split { flex-direction: column; }
    .open-house-content { padding: 60px 20px !important; }
    .open-house-image { min-height: 300px !important; }
    .hero-split { flex-direction: column; gap: 40px; }
    .hero-right { flex: 0 0 auto; width: 100%; }
    .scholarship-grid { grid-template-columns: 1fr; }
    .split-row, .split-row.reverse { flex-direction: column; gap: 30px; }
    .split-image img { margin-top: 20px; }
    
    .landing-header .brand-container { flex-wrap: wrap; }
    .landing-header .header-actions { display: none; } /* Hide desktop actions to prevent overlap */
    .lead-form-card { padding: 25px; }
    
    #stickyRibbon { flex-direction: column; text-align: center; padding: 15px; }
    #stickyRibbon button { width: 100%; }
}

/* --- Utility: section background --- */
.bg-light {
    background-color: var(--bg-light);
}

/* --- Academics / Programs page --- */
.page-academics {
    display: block;
    width: 100%;
}

.academics-anchor-section {
    scroll-margin-top: 140px;
}

.academics-page-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px 0 64px;
    background-color: var(--ub-purple);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.academics-page-hero > .container {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

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

.academics-page-hero-inner {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 720px;
    width: 100%;
}

.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;
}

.academics-page-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.academics-page-lead {
    font-size: 1.15rem;
    line-height: 1.65;
    margin-bottom: 28px;
    opacity: 0.95;
    max-width: 640px;
}

.academics-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.academics-toolbar-section {
    padding: 0 0 16px;
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.card-elevated {
    background: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--ub-purple);
}

.academics-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 22px 28px;
}

.academics-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ub-purple);
    font-size: 1rem;
}

.academics-jump-select {
    flex: 1;
    min-width: 220px;
    max-width: 420px;
    padding: 12px 18px;
    border-radius: 0;
    border: 2px solid #eaeaea;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ub-purple);
    background: #f9fbfd;
    cursor: pointer;
    transition: var(--transition);
}

.academics-jump-select:focus {
    outline: none;
    border-color: var(--ub-purple);
    box-shadow: 0 0 0 3px rgba(89, 45, 130, 0.12);
}

.academics-quick-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
}

.academics-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 0;
    background: var(--white);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid #eaeaea;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.academics-level-pill:hover {
    border-color: var(--ub-blue);
    color: var(--ub-purple);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.academics-level-pill i {
    color: var(--ub-blue);
}

.academics-intro-block {
    padding: 56px 0 40px;
}

.academics-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    width: 100%;
}

.academics-intro-copy h2 {
    font-size: 2rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

.academics-intro-copy p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.7;
}

.academics-intro-stats {
    display: grid;
    gap: 16px;
}

.academics-mini-stat {
    background: var(--white);
    border-radius: 0;
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--ub-blue);
}

.academics-mini-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ub-purple);
    line-height: 1;
}

.academics-mini-stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 600;
}

.academics-schools-section {
    padding: 72px 0 80px;
}

.academics-schools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: 100%;
    align-items: stretch;
}

.academics-school-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-bottom: 4px solid transparent;
}

.academics-school-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-bottom-color: var(--ub-blue);
}

.academics-school-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-light);
    flex-shrink: 0;
}

.academics-school-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.academics-school-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 28px 28px 32px;
}

.academics-school-icon {
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: rgba(0, 167, 224, 0.12);
    color: var(--ub-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
}

.academics-school-card h3 {
    font-size: 1.25rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}

.academics-school-card p {
    color: var(--text-light);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.academics-school-card .program-link {
    margin-top: auto;
    color: var(--ub-purple);
    padding-top: 4px;
}

.academics-school-card .program-link:hover {
    color: var(--ub-blue);
}

.academics-focus-section {
    padding: 64px 0;
}

.academics-focus-header {
    max-width: 720px;
    margin-bottom: 28px;
}

.academics-focus-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ub-blue);
    margin-bottom: 10px;
}

.academics-focus-eyebrow--on-dark {
    color: rgba(255, 255, 255, 0.95);
}

.academics-focus-header h2 {
    font-size: 1.85rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.2;
}

.academics-focus-header p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.65;
}

.academics-program-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.academics-program-chip {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 0;
    background: var(--white);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border: 2px solid #eaeaea;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.academics-program-chip:hover {
    border-color: var(--ub-purple);
    color: var(--ub-purple);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.academics-focus-section.bg-light .academics-program-chip {
    background: var(--white);
}

.academics-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    width: 100%;
    align-items: stretch;
}

.academics-program-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--white);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    border: 2px solid #eaeaea;
    transition: var(--transition);
}

.academics-focus-section.bg-light .academics-program-card {
    background: var(--white);
}

.academics-program-card:hover {
    border-color: var(--ub-purple);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.academics-program-card:hover .academics-program-card__media img {
    transform: scale(1.03);
}

.academics-program-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8eef3;
}

.academics-program-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.academics-program-card__title {
    padding: 14px 16px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text-main);
    flex: 1;
    display: flex;
    align-items: center;
}

.academics-grad-highlight {
    padding: 72px 0;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 100%);
}

.academics-grad-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    width: 100%;
}

.academics-grad-inner h2 {
    font-size: 2rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 14px;
}

.academics-grad-inner > div:first-child p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 20px;
}

.academics-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.academics-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-main);
}

.academics-checklist i {
    color: var(--ub-blue);
}

.academics-grad-card {
    padding: 32px;
    text-align: center;
}

.academics-grad-card h3 {
    color: var(--ub-purple);
    font-size: 1.35rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.academics-grad-card p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 0.98rem;
}

.academics-online-band {
    padding: 64px 0;
    background: linear-gradient(135deg, var(--ub-purple) 0%, var(--ub-purple-dark) 100%);
    color: var(--white);
}

.academics-online-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.academics-online-copy h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--white);
}

.academics-online-copy p {
    opacity: 0.92;
    max-width: 520px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

.academics-online-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.academics-resources {
    padding: 48px 0 64px;
}

.academics-resources-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.academics-resource-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    border-radius: 0;
    background: var(--white);
    text-decoration: none;
    color: var(--ub-purple);
    font-weight: 700;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 2px solid transparent;
}

.academics-resource-tile i {
    font-size: 1.75rem;
    color: var(--ub-blue);
}

.academics-resource-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 167, 224, 0.35);
}

/* --- College landing pages (schools & colleges mockups) --- */
.page-college {
    display: block;
    width: 100%;
}

.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-page-hero.college-hero--science {
    background-image: url("../assets/images/legacy/majors-biology2.jpg");
}

.college-page-hero.college-hero--ebe {
    background-image: url("../assets/images/legacy/CNC-Lab-hero.jpg");
}

.college-page-hero.college-hero--chs {
    background-image: url("../assets/images/legacy/integrative-care-hero.jpg");
}

.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;
}

/* The hero copy sits on ONE element that is both .container and
   .college-hero-inner. .container supplies `max-width: var(--measure)` plus
   `margin: 0 auto`; narrowing max-width to 760px here left those auto margins
   in place, so the box centred itself in the viewport instead of starting at
   the container's left gutter. Breadcrumb, kicker, title, lede and buttons all
   drifted inward and stopped lining up with every section below the hero.

   Keep the container's width and centring; constrain the *text* with a
   separate measure on the children instead. */
.college-hero-inner {
    position: relative;
    z-index: 2;
    color: var(--white);
}

.college-hero-inner > * {
    max-width: 760px;
    margin-right: auto;
}

/* .college-hero-lead sets its own narrower measure further down; this keeps
   the child rule above from widening it back to 760px. */
.college-hero-inner > .college-hero-lead {
    max-width: 640px;
}

.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-details__note {
    margin-top: 14px;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.55;
    max-width: 52rem;
}

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

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

.college-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "sidebar";
    gap: 32px;
    align-items: start;
    padding: 32px 0 72px;
    width: 100%;
}

@media (min-width: 992px) {
    .college-layout {
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
        grid-template-areas: "sidebar main";
        gap: 40px;
    }

    .college-sidebar {
        position: sticky;
        top: 92px;
        align-self: start;
    }
}

.college-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.college-sidebar-card {
    background: var(--white);
    border-radius: 0;
    padding: 22px 20px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--ub-blue);
}

.college-sidebar-card h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    margin-bottom: 14px;
    font-weight: 700;
}

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

.college-sidebar-nav li {
    margin-bottom: 4px;
}

.college-sidebar-nav a {
    display: block;
    padding: 8px 10px;
    border-radius: 0;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: var(--transition);
}

.college-sidebar-nav a:hover,
.college-sidebar-nav a:focus-visible {
    background: rgba(0, 167, 224, 0.1);
    color: var(--ub-purple);
}

.college-sidebar-nav .college-sidebar-nav__hub {
    font-weight: 800;
    color: var(--ub-purple);
    margin-bottom: 8px;
}

.college-sidebar-nav .college-sidebar-nav__hub a {
    color: var(--ub-purple);
}

.college-main {
    grid-area: main;
    min-width: 0;
}

.college-main h2 {
    font-size: 1.65rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin: 36px 0 14px;
    line-height: 1.25;
}

.college-main h2:first-child {
    margin-top: 0;
}

.college-main .college-lead {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 24px;
    max-width: 52rem;
}

.college-main p {
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 52rem;
}

.college-callout {
    background: linear-gradient(180deg, rgba(0, 167, 224, 0.08) 0%, rgba(89, 45, 130, 0.06) 100%);
    border: 1px solid rgba(0, 167, 224, 0.25);
    border-radius: 0;
    padding: 24px 26px;
    margin: 28px 0 32px;
}

.college-callout h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.35rem;
}

.college-callout p:last-child {
    margin-bottom: 0;
}

.college-callout + h2 {
    margin-top: 24px;
}

.college-details {
    border: 2px solid #eaeaea;
    border-radius: 0;
    margin-bottom: 14px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.college-details:hover {
    border-color: rgba(89, 45, 130, 0.2);
}

.college-details[open] {
    border-color: rgba(0, 167, 224, 0.35);
    box-shadow: var(--shadow-md);
}

.college-details summary {
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ub-purple);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    line-height: 1.35;
}

.college-details summary::-webkit-details-marker {
    display: none;
}

.college-details summary::after {
    content: "+";
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ub-blue);
    flex-shrink: 0;
    margin-top: 0.12em;
}

.college-details[open] summary::after {
    content: "\2212";
}

.college-details__body {
    padding: 0 22px 22px;
    border-top: 1px solid #eaeaea;
}

.college-details__body > p {
    margin-top: 14px;
}

.college-details__body .btn-school {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 18px;
    border-radius: 0;
    background: var(--ub-purple);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition);
}

.college-details__body .btn-school:hover {
    background: var(--ub-blue);
    color: var(--white);
}

.college-link-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 28px;
    align-items: start;
    margin-top: 4px;
}

.college-details__body ul.college-link-list {
    margin: 0;
    padding-left: 1.35rem;
    color: var(--text-main);
    list-style: disc;
    list-style-position: outside;
}

.college-link-list li {
    margin-bottom: 8px;
}

.college-link-list a {
    color: var(--ub-blue);
    font-weight: 600;
    text-decoration: none;
}

.college-link-list a:hover {
    text-decoration: underline;
}

.college-dean {
    display: grid;
    /* Photo column only when there is a photo. ub/profile-card omits
       .college-dean__photo entirely when no image is set, and a fixed
       220px first column then leaves that space empty beside the text. */
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-top: 48px;
    padding: 36px;
    background: var(--bg-light);
    border-radius: 0;
    border: 1px solid #eaeaea;
}

.college-dean:has(.college-dean__photo) {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}

.college-dean__photo {
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 1;
    max-width: 220px;
}

.college-dean__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.college-dean__content h2 {
    margin-top: 0;
}

.college-dean__content .dean-sig {
    margin-top: 20px;
    font-weight: 700;
    color: var(--ub-purple);
}

/* Executive / Large Profile Card (President's Message & Grand Headshot) */
.college-dean--large,
#president.college-dean {
    padding: 48px;
    gap: 48px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
    border-top: 5px solid var(--ub-purple, #592d82);
}

.college-dean--large:has(.college-dean__photo),
#president.college-dean:has(.college-dean__photo) {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: start;
}

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

.college-dean--large .college-dean__photo img,
#president.college-dean .college-dean__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    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:has(.college-dean__photo),
    #president.college-dean:has(.college-dean__photo) {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        gap: 32px;
        padding: 36px;
    }
    .college-dean--large .college-dean__photo,
    #president.college-dean .college-dean__photo {
        max-width: 300px;
    }
}

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

@media (max-width: 1100px) {
    .academics-intro-grid {
        grid-template-columns: 1fr;
    }

    .academics-schools-grid {
        grid-template-columns: 1fr;
    }

    .academics-program-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .academics-grad-inner {
        grid-template-columns: 1fr;
    }

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

    .academics-page-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .academics-page-hero {
        min-height: 360px;
        padding: 36px 0 44px;
    }

    .academics-page-title {
        font-size: 2rem;
    }

    .academics-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .academics-jump-select {
        max-width: none;
    }

    .academics-toolbar-section {
        margin-top: -20px;
    }

    .academics-anchor-section {
        scroll-margin-top: 100px;
    }

    .academics-resources-grid {
        grid-template-columns: 1fr;
    }

    .academics-hero-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .academics-program-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .academics-program-card__title {
        padding: 12px 14px 16px;
        font-size: 0.92rem;
    }

    .college-page-hero {
        min-height: 320px;
        padding: 36px 0 48px;
    }

    .college-dean {
        grid-template-columns: 1fr;
        padding: 28px 22px;
    }

    .college-dean__photo {
        max-width: 200px;
        margin: 0 auto;
    }

    .college-toolbar-links {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .academics-program-card:hover {
        transform: none;
    }

    .academics-program-card:hover .academics-program-card__media img {
        transform: none;
    }
}

/* --- Program detail mockups (e.g. MS Artificial Intelligence + child pages) --- */
/* The measure now lives on the children (see .college-hero-inner above), so the
   program override has to target them too or it would have no effect. */
.page-program .college-hero-inner > * {
    max-width: 820px;
}

.program-ms-ai-hero {
    min-height: 400px;
}

.program-subpage-hero {
    min-height: 340px;
}

.program-catalog-placeholder {
    background: linear-gradient(90deg, rgba(0, 167, 224, 0.12) 0%, rgba(89, 45, 130, 0.06) 100%);
    border: 1px solid rgba(0, 167, 224, 0.35);
    border-radius: 0;
    padding: 18px 22px;
    margin: 28px 0 36px;
    max-width: 52rem;
}

.program-catalog-placeholder h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    color: var(--ub-purple);
}

.program-catalog-placeholder p:last-of-type {
    margin-bottom: 0;
}

.program-callout-notice {
    margin: 20px 0 28px;
    padding: 18px 22px;
    background: rgba(89, 45, 130, 0.08);
    border-left: 4px solid var(--ub-purple);
    border-radius: 0;
}

.program-callout-notice p {
    margin: 0;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.55;
}

.program-callout-notice a {
    font-weight: 700;
}

.program-media-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 36px;
}

/* Program block JPGs from bridgeport.edu are 800×519; match box ratio so tiles align without square cropping */
.program-media-strip figure {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #e8e4ef;
    aspect-ratio: 800 / 519;
    position: relative;
}

.program-media-strip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.program-lede-wide {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 52rem;
    margin-bottom: 20px;
}

.program-dyk {
    text-align: center;
    padding: 32px 24px 36px;
    margin: 32px 0;
    background: var(--white);
    border-radius: 0;
    border: 1px solid #eaeaea;
    box-shadow: var(--shadow-sm);
}

.program-dyk__title {
    font-size: 1.15rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin-bottom: 12px;
}

.program-dyk p {
    font-size: 1.08rem;
    color: var(--text-light);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.65;
}

.program-award-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 32px;
    margin: 36px 0;
}

.program-award-inline img {
    flex-shrink: 0;
    border-radius: 0;
    background: var(--white);
    padding: 8px;
    box-shadow: var(--shadow-sm);
}

.program-award-inline h2 {
    margin-top: 0;
}

.program-footnote {
    font-size: 0.88rem;
    color: var(--text-light);
    margin-top: 10px;
}

.program-checklist {
    list-style: none;
    margin: 16px 0 28px;
    padding: 0;
    max-width: 52rem;
}

.program-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.program-checklist i {
    color: var(--ub-blue);
    margin-top: 3px;
}

.program-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 32px;
}

.program-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 0;
    background: var(--white);
    border: 2px solid #eaeaea;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ub-purple);
    box-shadow: var(--shadow-sm);
}

.program-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 28px 0 8px;
    max-width: 52rem;
}

.program-two-col h3 {
    color: var(--ub-purple);
    margin-bottom: 10px;
}

.program-quote {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: start;
    margin: 36px 0;
    padding: 28px;
    background: var(--bg-light);
    border-radius: 0;
    border: 1px solid #eaeaea;
    max-width: 52rem;
}

.program-quote--alt {
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.program-quote__avatar img {
    border-radius: 50%;
    display: block;
    box-shadow: var(--shadow-md);
}

.program-quote blockquote {
    margin: 0;
}

.program-quote blockquote p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-main);
    margin-bottom: 12px;
}

.program-quote cite {
    font-style: normal;
    font-weight: 700;
    color: var(--ub-purple);
}

.program-video-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: center;
    margin: 48px 0 8px;
    max-width: 56rem;
}

.program-video-split h2 {
    margin-top: 0;
    color: var(--ub-purple);
}

.program-video-frame {
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
    background: #0f172a;
}

.program-video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.program-sidebar-conc .college-sidebar-nav li {
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.92rem;
    padding-left: 2px;
}

.page-program .college-main h2,
.page-program .college-main h3 {
    color: var(--ub-purple);
}

.page-program .college-main h2 {
    margin-top: 28px;
}

@media (max-width: 900px) {
    .program-media-strip {
        grid-template-columns: 1fr;
    }

    .program-two-col,
    .program-video-split {
        grid-template-columns: 1fr;
    }

    .program-quote {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .program-quote__avatar {
        margin: 0 auto;
    }
}

/* ==========================================================================
   Phase 4 Premium Additions
   ========================================================================== */

/* --- 1. Life on the Sound (Masonry) --- */
.masonry-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
}
.masonry-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.masonry-item:hover img {
    transform: scale(1.05);
}
.masonry-item.large {
    grid-column: span 2;
    grid-row: span 2;
}
.masonry-item.tall {
    grid-row: span 2;
}
.masonry-item.wide {
    grid-column: span 2;
}
.masonry-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--white);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}
.masonry-item:hover .masonry-overlay {
    transform: translateY(0);
    opacity: 1;
}
.masonry-overlay h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

/* --- 2. Innovation & Research Editorial Hub --- */
.editorial-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}
.editorial-featured {
    position: relative;
    overflow: hidden;
    height: 600px;
    cursor: pointer;
}
.editorial-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.editorial-featured:hover img {
    transform: scale(1.03);
}
.editorial-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: var(--white);
}
.editorial-stacked {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.editorial-item {
    display: flex;
    gap: 20px;
    align-items: center;
    cursor: pointer;
}
.editorial-item img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}
.editorial-item-content {
    flex: 1;
}
.kicker {
    display: inline-block;
    color: var(--ub-blue);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.editorial-content h3 { font-size: 2.5rem; font-weight: 800; margin-bottom: 15px; }
.editorial-item-content h4 { font-size: 1.5rem; color: var(--ub-purple); font-weight: 700; line-height: 1.3; margin-top: 0; }

.events-list {
    max-width: 800px;
}
.event-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #eaeaea;
    transition: background 0.3s ease;
}
.event-item:hover {
    background: #fdfdfd;
}
.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--ub-purple);
    color: var(--white);
    font-weight: 800;
}
.event-date .month { font-size: 0.9rem; letter-spacing: 2px; }
.event-date .day { font-size: 1.8rem; line-height: 1; }
.event-details { flex: 1; }
.event-details h4 { font-size: 1.3rem; color: var(--text-main); margin: 0 0 5px 0; }
.event-details p { color: var(--text-light); margin: 0; font-size: 0.9rem; }
.event-link {
    margin-left: auto;
    color: var(--ub-blue);
    font-size: 1.5rem;
    padding: 10px;
}

/* --- 3. Centers of Excellence (Facilities) --- */
.facilities-accordion {
    display: flex;
    height: 600px;
    gap: 10px;
}
.facility-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: flex 0.5s ease;
    cursor: pointer;
}
.facility-item:hover, .facility-item.active {
    flex: 3;
}
.facility-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    transition: filter 0.5s ease;
    filter: grayscale(80%) brightness(0.6);
}
.facility-item:hover .facility-image, .facility-item.active .facility-image {
    filter: grayscale(0%) brightness(0.9);
}
.facility-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 30px 30px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    color: var(--white);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.2s;
}
.facility-item:hover .facility-content, .facility-item.active .facility-content {
    opacity: 1;
    transform: translateY(0);
}
.facility-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    margin-top: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.facility-content p {
    text-shadow: 0 1px 5px rgba(0,0,0,0.7);
    margin: 0;
}

/* --- 4. Alumni Voices (Micro-Video Carousel) --- */
.alumni-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.alumni-card {
    position: relative;
    height: 500px;
    overflow: hidden;
    cursor: pointer;
}
.alumni-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.alumni-card:hover img {
    transform: scale(1.05);
}
.alumni-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0; top: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--white);
}
.play-btn-small {
    position: absolute;
    top: 30px; right: 30px;
    width: 50px; height: 50px;
    background: var(--ub-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}
.alumni-card:hover .play-btn-small {
    opacity: 1;
    transform: scale(1);
}
.alumni-info h4 { font-size: 1.5rem; font-weight: 700; margin: 0 0 5px 0; }
.alumni-info span { font-size: 0.9rem; color: var(--ub-blue); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.alumni-quote {
    font-style: italic;
    font-size: 1.1rem;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}
.alumni-card:hover .alumni-quote {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .editorial-grid { grid-template-columns: 1fr; }
    .masonry-gallery { grid-template-columns: 1fr 1fr; }
    .facilities-accordion { flex-direction: column; }
    .alumni-carousel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .masonry-gallery { grid-template-columns: 1fr; }
    .alumni-carousel { grid-template-columns: 1fr; }
}

/* =========================================================
   EMPLOYER MARQUEE (CAREERS & OUTCOMES)
   ========================================================= */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-light) 0%, transparent 100%);
}

.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-light) 0%, transparent 100%);
}

.marquee-content {
    display: flex;
    width: max-content;
    animation: scroll-left 40s linear infinite;
    gap: 60px;
    padding-left: 60px;
}

.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

.employer-logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: -0.5px;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    white-space: nowrap;
    cursor: default;
}

.employer-logo:hover {
    opacity: 1;
    color: var(--ub-purple);
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 30px)); }
}

@media (max-width: 768px) {
    .marquee-content {
        animation-duration: 25s;
        gap: 40px;
        padding-left: 40px;
    }
    .employer-logo {
        font-size: 1.4rem;
    }
    .marquee-wrapper::before,
    .marquee-wrapper::after {
        width: 80px;
    }
}

/* --------------------------------------------------------------------------
   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%;
    }
}