/* ===== THEME VARIABLES ===== */
:root {
    /* Light theme colors (current) */
    --bg-primary: #f8f6f3;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f9f8f4;
    --text-primary: #292a25;
    --text-secondary: #2b2c27;
    --accent-red: #d13028;
    --accent-purple: #482fa5;
    --accent-brown: #8B4513;
    --border-color: #c4c3c1;
    --border-light: #bfbfbf;
    --border-gray: #e0e0e0;
    --overlay-dark: rgba(0, 0, 0, 0.7);
}

/* Dark theme - black and white only */
[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #f0f0f0;
    --accent-red: #ffffff;
    --accent-purple: #ffffff;
    --accent-brown: #ffffff;
    --border-color: #666666;
    --border-light: #444444;
    --border-gray: #333333;
    --overlay-dark: rgba(255, 255, 255, 0.1);
}

/* ===== ALL FONT DECLARATIONS ===== */

/* CERA PRO */
@font-face {
    font-family: 'Cera Pro';
    src: url('../fonts/CERA PRO REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('../fonts/CERA PRO BLACK.OTF') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* MADE Outer Sans */
@font-face {
    font-family: 'MADE Outer Sans';
    src: url('../fonts/MADE Outer Sans Light PERSONAL USE.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MADE Outer Sans';
    src: url('../fonts/MADE Outer Sans Bold PERSONAL USE.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Proxima Nova */
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/MARK SIMONSON - PROXIMA NOVA REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Mona Sans */
@font-face {
    font-family: 'Mona Sans';
    src: url('../fonts/MonaSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('../fonts/MonaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('../fonts/MonaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('../fonts/MonaSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('../fonts/MonaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('/fonts/MonaSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Source Serif */
@font-face {
    font-family: 'Source Serif 4';
    src: url('/fonts/SourceSerif4-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}










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

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--bg-primary);
    line-height: 1.6;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Utility Bar */
.utility-bar {
    background-color: var(--bg-primary);
    padding: 40px 0;
    transition: background-color 0.3s ease;
}

.utility-buttons {
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 0 30px;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
}

.theme-icon {
    width: 50px;
    height: 28px;
    background-image: url('../images/bulb.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
    position: absolute;
}

/* Dark theme logo changes */
[data-theme="dark"] .university-logo {
    content: url('../images/vidyashilp_uni_s_dark.png');
}

[data-theme="dark"] .law-school-logo {
    content: url('../images/vidyashilplaw_dark.png');
}

/* Dark theme toggle button bulb icon - white */
[data-theme="dark"] .theme-icon {
    background-image: url('../images/bulb.png');
    filter: brightness(0) invert(1);
}

.theme-icon.light-icon {
    opacity: 1;
    transform: scale(1);
}

.theme-icon.dark-icon {
    opacity: 0;
    transform: scale(0.5);
}

/* Dark theme icon states */
[data-theme="dark"] .theme-icon.light-icon {
    opacity: 0;
    transform: scale(0.5);
}

[data-theme="dark"] .theme-icon.dark-icon {
    opacity: 1;
    transform: scale(1);
}

/* Dark theme specific overrides */
[data-theme="dark"] .theme-toggle-btn {
    border: none;
}

/* Dark theme search input */
[data-theme="dark"] .search-input {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-btn-inside {
    color: var(--text-primary);
}

[data-theme="dark"] .search-btn-inside:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

/* Dark theme hamburger menu */
[data-theme="dark"] .hamburger-line {
    background-color: var(--text-primary);
}

[data-theme="dark"] .hamburger-menu:hover {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
/* Search Container */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 180px;
    height: 40px;
    border: 2px solid #d13028;
    border-radius: 25px;
    padding: 0 50px 0 20px;
    font-size: 14px;
    background-color: transparent;
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    background-color: rgba(209, 48, 40, 0.05);
    box-shadow: 0 0 0 3px rgba(209, 48, 40, 0.1);
}

.search-btn-inside {
    position: absolute;
    right: 18px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    color: #d13028;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    top: 0.5px;
}

.search-btn-inside:hover {
    background-color: #d13028;
    color: white;
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .search-input {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .utility-buttons {
        gap: 15px;
    }
    
    .search-input {
        width: 180px;
        height: 40px;
    }
    
    .theme-toggle-btn {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
        transition: 0.3s;
    }
}

/* Apply requested sizes across tablet breakpoints as well */
@media (max-width: 1024px) {
    .btn-pill { font-size: 12px; }
    .exp-num { font-size: clamp(7.5rem, 10vw + 1rem, 297.5px); }
}

@media (max-width: 992px) {
    .btn-pill { font-size: 12px; }
    .exp-num { font-size: clamp(7.5rem, 10vw + 1rem, 297.5px); }
}

/* Header Content - WHITE BACKGROUND WITH BORDERS */
.header-content {
    background-color: var(--bg-secondary);
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    padding: 40px 0;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode header content borders */
[data-theme="dark"] .header-content {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    max-width: 90%;  /* Changed to 90% width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 30px;
    position: relative;
}

/* Left Section - Law School (70% of total width) */
.header-left {
    width: 70%;
    display: flex;
    justify-content: flex-start;
    padding-right: 40px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 25px;
}

.law-school-logo {
    width: 34em;
    height: auto;
}

.brand-text {
    text-align: left;
}

.brand-name {
    font-size: 32px;
    font-weight: 400;
    color: var(--accent-brown);
    margin-bottom: 5px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.brand-subtitle {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-brown);
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Vertical Divider - Full height at 70% width position */
.vertical-divider {
    position: absolute;
    left: 70%;
    top: -41px;
    width: 1px;
    background-color: var(--border-color);
    height: 131%;
    transition: background-color 0.3s ease;
}

/* Right Section - University (30% of total width) */
.header-right {
    width: 30%;
    display: flex;
    justify-content: center;
    padding-left: 40px;
}

.university-logo {
    width: 16em;
    height: auto;
}

/* Navigation */
.main-navigation {
    background-color: var(--bg-primary);
    padding-top: 50px;
    padding-bottom: 20px;
    transition: background-color 0.3s ease;
}

.nav-container {
    max-width: 90%;  /* Changed to 90% width */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hamburger Menu Button */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    transition: all 0.3s ease;
}

.hamburger-menu:hover {
    background-color: rgba(209, 48, 40, 0.05);
    box-shadow: 0 0 0 3px rgba(209, 48, 40, 0.1);
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: #d13028;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* Desktop Navigation */
.nav-menu-desktop {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Mobile Navigation Overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.nav-overlay-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

.nav-menu-mobile {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}



.nav-menu-mobile a {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    text-decoration: none;
    letter-spacing: 0px;
    transition: all 0.3s ease;
    display: block;
    padding: 15px 0;
}

.nav-menu-mobile a:hover {
    color: #8B4513;
    transform: translateY(-2px);
}

/* Hamburger Menu Animation */
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
    align-items: center;
}

.nav-menu a {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 14.47px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.2;
    text-decoration: none;
    letter-spacing: 0px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-menu a:hover {
    color: var(--accent-brown);
    transform: translateY(-1px);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-brown);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-brown);
}

/* Dark theme dropdown */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

[data-theme="dark"] .dropdown-menu a {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu a:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dropdown-header {
    font-weight: bold;
    color: var(--text-primary);
    padding: 8px 16px;
    cursor: default;
    pointer-events: none;
    font-size: 14px;
}

[data-theme="dark"] .dropdown-header {
    color: var(--text-primary);
}

/* Submenu styles */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu-items {
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--bg-secondary);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 300px;
    z-index: 1000;
}

.dropdown-submenu:hover .dropdown-submenu-items {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.dropdown-submenu-items li {
    margin: 0;
}

.dropdown-submenu-items a {
    display: block;
    padding: 6px 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.3;
    transition: background-color 0.2s ease;
}

.dropdown-submenu-items a:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-brown);
}

/* Dark theme submenu */
[data-theme="dark"] .dropdown-submenu-items {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

[data-theme="dark"] .dropdown-submenu-items a {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-submenu-items a:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .header-container {
        flex-direction: row;
        gap: 0;
        text-align: left;
    }
    
    .header-left {
        width: 70%;
        padding-right: 20px;
        justify-content: flex-start;
    }
    
    .header-right {
        width: 30%;
        padding-left: 20px;
        justify-content: center;
    }
    
    .vertical-divider {
        display: block;
    }
    
    .nav-menu {
        gap: 25px;
    }
    
    /* Hide desktop navigation */
    .nav-menu-desktop {
        display: none;
    }
}

@media (max-width: 768px) {
    .utility-buttons {
        padding: 0 20px;
    }
    
    .header-container {
        padding: 0 20px;
    }
    
    .logo-section {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .brand-name {
        font-size: 26px;
    }
    
    .brand-subtitle {
        font-size: 30px;
    }
    
    .university-logo {
        width: 180px;
    }
    
    .nav-container {
        flex-direction: row;
        gap: 0;
        padding: 0 20px;
        justify-content: space-between;
    }
    
    /* Hide desktop navigation */
    .nav-menu-desktop {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Hide desktop navigation */
    .nav-menu-desktop {
        display: none;
    }
}

/* ===== HERO / BANNER ===== */
.hero-section{
    max-width:90%;          /* same page frame as header/nav */
    margin:8px auto;       /* top gap equals PDF spacing    */
}

.hero-image{
    position:relative;
    width:100%;
    /* 16 : 9 aspect ratio so it scales fluidly */
    padding-top:56.25%;
    background:url('../images/header_banner.jpeg') center/cover no-repeat;
    overflow:hidden;
    border-top:2px solid #14110a;
}

/* 15 % dark overlay for text legibility */
.hero-image::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.15);
}



/* headline */
.hero-title{
    position:absolute;
    left:60px;
    bottom:60px;
    margin:0;
    font-family:'Mona Sans';
    font-weight:800;
    color:#fff;
    /* clamp keeps it large on desktop and shrinks on phones */
    font-size:clamp(1.75rem,4vw + 1rem,96.4px);
    line-height:0.972;
}

/* ----------- Tablet tweaks ----------- */
@media(max-width:1024px){
    .hero-title{
        left:40px;
        bottom:40px;
    }
}

/* ----------- Mobile tweaks ----------- */
@media(max-width:600px){
    .hero-image{
        padding-top:65%;    /* a bit taller for narrow screens */
    }
    .hero-title{
        left:24px;
        bottom:24px;
        max-width:90%;
    }
}


/* ===== RED SPLIT BANNER – final ===== */
.discipline-split{
    width:100%;
    background:#d13028;   /* full-width red bar   */
    overflow:hidden;      /* hides the cropped parts */
    margin-top: 8em;
    height: 150px;       /* Show 1.5 items at a time */
}

/* 3-column grid inside 90 % page frame */
.discipline-inner{
    max-width:90%;
    margin:-8px auto;
    display:grid;
    grid-template-columns:auto min-content 1fr;  /* left / + / right */
    align-items:center;
    padding:20px 0;        /* Added padding to ensure left text is visible */
    column-gap:0;
    height: 100%;          /* Ensure full height usage */
}

.left-title{
    font-family:'Mona Sans',sans-serif;
    font-weight:800;
    font-size:57px;
    line-height:0.972;
    color:#fff;
    margin:0;
    text-align:left;
    z-index: 10;           /* Ensure it's above other elements */
    position: relative;    /* Ensure proper positioning */
}

/* Right title styling */
.right-title{
    font-family:'Mona Sans',sans-serif;
    font-weight:800;
    font-size:73px;
    line-height:0.972;
    color:#fff;
    margin:0;
    text-align:right;
}

/* Auto-scrolling text container */
.right-title-scroll {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.scroll-content {
    display: flex;
    flex-direction: column;
    animation: scrollUp 15s linear infinite;
    transform: translateY(0);  /* Start from the beginning */
    animation-fill-mode: both;  /* Ensure proper animation state */
}

.scroll-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    height: 100px;      /* Fixed height for 1.5 items display */
    min-height: 100px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: 66px;
    line-height: 0.972;
    color: #fff;
    text-align: right;
}

.scroll-item .rt-top,
.scroll-item .rt-bottom {
    display: block;
    margin: 0;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);  /* Move through 5 items (half of 10 total) for seamless loop */
    }
}

/* Plus box styling */
.plus-box{
    font-family:'Cera Pro',sans-serif;
    font-weight:900;
    font-size:clamp(2.5rem,6vw + 1rem,184.8px);
    line-height:0.972;
    color:#fff;
    padding-left:2em;        /* ← your 20 px space */
}

/* column-1 */
.left-title{ text-align:left; }

/* column-2  (always 20 px gap each side) */
.plus-box{
    font-weight:800;
    font-size:clamp(2.5rem,6vw + 1rem,7rem);
    line-height:1;
    color:#fff;
    padding-left:1.9em;        /* ← your 20 px space */
    z-index: 5;                 /* Ensure proper layering */
    position: relative;         /* Ensure proper positioning */
}

/* column-3 wrapper – crops 25 % top & bottom */
.right-wrap{
    clip-path:inset(5% 0 2% 0);
    overflow:hidden;          /* nothing outside shows */
    text-align:right;
}

.rt-top,
.rt-bottom{
    display:block;
    line-height:1;            /* tight line height */
    transform-origin:left center;
}

/* VISUAL GAP without changing layout height */
.rt-top{
    transform:translateY(-18%);   /* shift upward 18 % */
}

.rt-bottom{
    margin-top:12px;            /* base gap */
    transform:translateY(18%);    /* shift downward 18 % */
}

/* right text itself */
.right-title{
    text-align:right;
}

/* ---------- tablet / stack ---------- */
@media(max-width:992px){
    .discipline-inner{
        grid-template-columns:1fr;
        row-gap:30px;
        text-align:center;
    }
    .left-title,
    .right-title{ text-align:center; }
    
    .scroll-item {
        align-items: center;
        text-align: center;
    }
    .plus-box{ font-size:3.5rem; padding:0; }
    .right-wrap{ clip-path:inset(20% 0 20% 0); }
}

/* ---------- mobile ---------- */
@media(max-width:600px){
    .discipline-inner{ padding:40px 0; }
    .plus-box{ font-size:3rem; }
    .right-wrap{ clip-path:inset(15% 0 15% 0); }
}
/* =========  NEWS GRID  ========= */
.news-grid {
    width: 100%;
    height:100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    border-left: none;
    font-family: 'Lexend Tera', sans-serif;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Individual column styling */
.news-col {
    display: grid;
    grid-template-rows:45% 45% 10%;
    border-left: none;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.news-col:nth-child(2) .cta-box{ display:none; }
.news-col:nth-child(3) .cta-box{
    /* remove its left border so it merges with column-2 area */
    border-left:none;
}

/* Left column custom layout */
.news-col--left {
    grid-template-rows: 30% 70%;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* NEWS heading */
.news-heading {
    font-family: 'Mona Sans', sans-serif;
    font-size: 55px;
    font-weight: 800;
    line-height: 1.2;
    padding: 160px 36px 0 75px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.news-heading,
.feature-story{
    min-height:0;                    /* allow shrinking          */
    overflow:hidden;                 /* clip if content longer   */
}

/* Feature box with unique background */
.feature-story {
    background: var(--bg-tertiary);
    padding: 46px 36px 0 75px;
    border-bottom: 1px solid var(--border-light);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3em;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.source {
    font-family: 'Mona Sans', sans-serif;
    font-size: 25.3px;
    font-weight: 400;
    line-height: 0.972;
    color: #d03028;
    margin: 0 0 16px 0;
}

.feature-head {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.story-box {
    padding: 74px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 3em;
    justify-content: flex-start;
    border-right: 1px solid var(--border-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.story-head {
    font-family: 'Mona Sans', sans-serif;
    font-size: 32px !important;
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    margin: 0;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.author {
    font-family: 'Mona Sans', sans-serif;
    font-size: 22.3px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}

/* Single CTA button (bottom-right) merged cell */
.cta-box {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding:37px 85px 28px 38px;
    border-bottom:none;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.more-btn {
    display: inline-block;
    background: #482fa5;
    color: #fff;
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    padding: 5px 25px;
    border-radius: 25px;
    text-decoration: none;
    transition: background 0.25s;
}
.more-btn:hover {
    background: #2b1b71;
}

/* Responsive: stack on tablet/mobile */
@media(max-width:992px){
    .news-grid {
        grid-template-columns: 1fr;
    }
    .news-col, .news-col--left {
        grid-template-rows: auto;
        border-left: none;
    }
    .news-heading { padding:32px 16px 0 16px;}
    .feature-story, .story-box { padding:22px;}
    .story-head { padding-top: 0 !important; }
    .cta-box { padding:24px 16px;}
    
    /* Center tile-heading vertically for section 1 */
    .opportunities-section-1 .tile-content {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .opportunities-section-1 .tile-heading {
        font-size: 1.6rem;
        padding-left: 0;
        padding-top: 2.4em;
    }
    .opportunities-section-1 .tile-paragraph {
        display: none;
    }
    .opportunities-section-1 .opportunity-tile.expanded .tile-paragraph {
        display: block;
    }
    .opportunities-section-1 .opportunity-tile.expanded .tile-heading {
        padding-top: 1.4em;
    }
    
    /* Apply same changes to sections 2 and 3 */
    .opportunities-section-2 .tile-content,
    .opportunities-section-3 .tile-content {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .opportunities-section-2 .tile-heading,
    .opportunities-section-3 .tile-heading {
        font-size: 1.6rem;
        padding-left: 0;
        padding-top: 2.4em;
    }
    .opportunities-section-2 .tile-paragraph,
    .opportunities-section-3 .tile-paragraph {
        display: none;
    }
    .opportunities-section-2 .opportunity-tile.expanded .tile-paragraph,
    .opportunities-section-3 .opportunity-tile.expanded .tile-paragraph {
        display: block;
    }
    .opportunities-section-2 .opportunity-tile.expanded .tile-heading,
    .opportunities-section-3 .opportunity-tile.expanded .tile-heading {
        padding-top: 1.4em;
    }
    .opportunities-section-2 .opportunity-tile[data-tile="moot"]:not(.expanded) .tile-heading {
        margin-top: 0.5em;
    }
    
    /* Hero overlay padding */
    .hero-overlay {
        padding: 26px;
    }
    
    /* Event card background colors */
    .event-card[aria-labelledby="event-1-title"],
    .event-card[aria-labelledby="event-3-title"] {
        background: #f9f8f4;
    }
    .event-card[aria-labelledby="event-2-title"],
    .event-card[aria-labelledby="event-4-title"] {
        background: #ffffff;
    }
    .event-card[aria-labelledby="event-2-title"] {
        border-top: 1px solid #d9d6d1;
        border-bottom: 1px solid #d9d6d1;
    }
    .event-card[aria-labelledby="event-3-title"] {
        border-bottom: 1px solid #d9d6d1;
    }
    .events-grid {
        border-right: none;
    }
    
    /* Mosaic header styling */
    .opportunities-section-1 .mosaic-header h2 {
        text-align: center;
        font-size: 28px;
    }
    
    /* Header layout - maintain desktop side-by-side */
    .header-container {
        flex-direction: row;
        gap: 0;
    }
    .header-left {
        width: 70%;
        padding-right: 15px;
        justify-content: flex-start;
    }
    .header-right {
        width: 30%;
        padding-left: 0px;
        justify-content: center;
    }
    .vertical-divider {
        position: absolute;
        left: 60%;
        top: -24px;
        width: 1px;
        background-color: #c4c3c1;
        height: 162%;
        display: block;
    }
    .header-content {
        border-top: 1px solid #c4c3c1;
        border-bottom: 1px solid #c4c3c1;
    }
    .law-school-logo {
        width: 12em;
    }
    .university-logo {
        width: 6em;
    }
}
/* ==========  FACULTY THOUGHT-LEADERSHIP  ========== */
.faculty-lead{
    width:100%;
    display:grid;
    grid-template-columns:52% 48%;
    border:1px solid #bfbfbf;
    border-left:none; border-top:none;
    background:#fff;
    font-family:'Lexend Tera',sans-serif;
}

/* ---------- left column ---------- */
.lead-left{ display:flex; flex-direction:column; }

.lead-title{
    background:#482fa5;
    color:#fff;
    font-family: 'Mona Sans', sans-serif;
    font-weight:800;
    font-size:47px;
    line-height:1.2;
    padding:38px 68px;
}

.lead-profile{
    display:flex;
    gap:32px;
    padding:40px 68px;
    flex:1;
    background-color: var(--bg-tertiary);
    transition: background-color 0.3s ease;
}

.lead-photo{
    width:230px; height:230px;
    object-fit:cover;
    border-radius:8px;
}

.lead-head{
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-size:42px;
    font-weight:400;
    line-height:1.2;
    margin:0;
    align-self:center;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

/* ---------- right column ---------- */
.lead-right{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:83px 40px 40px 83px;
    border-left:1px solid var(--border-light);
    transition: border-color 0.3s ease;
}

.lead-text{
    font-family: 'Proxima Nova', sans-serif;
    font-size:29px;
    font-weight:400;
    line-height:1.2;
    margin:0 0 35px 0;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.lead-ctas{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top: 7.7em;
}
.lead-next{ margin:0; }
.cta-row{
    display:flex;
    justify-content:space-between;   /* left ↔ right ends     */
    align-items:center;
}

.btn-solid{
    background:#d13028;
    color:#fff;
    font-family: 'MADE Outer Sans', sans-serif;
    font-weight:700;
    font-size:18px;
    line-height:1.2;
    padding:5px 25px;
    border-radius:20px;
    text-decoration:none;
    display:inline-block;
    width:max-content;
}

.btn-outline{
    background:#fff;
    color:#482fa5;
    border:2px solid #482fa5;
    font-family: 'MADE Outer Sans', sans-serif;
    font-weight:700;
    font-size:18px;
    line-height:1.2;
    padding:5px 25px;
    border-radius:20px;
    text-decoration:none;
    display:inline-block;
    width:max-content;
}

.lead-next{
    margin-top:-10px;
    align-self:flex-end;
    font-family: 'MADE Outer Sans', sans-serif;
    font-weight:700;
    color:#482fa5;
    font-size:18px;
    line-height:1.2;
    text-decoration:none;
}
.arrow{ font-size:1.8rem; margin-left:30px; }

/* ---------- responsive stack ---------- */
@media(max-width:992px){
    .faculty-lead{
        grid-template-columns:1fr;
    }
    .lead-right{ border-left:none; }
    .lead-next{ align-self:flex-start; }
    /* Keep profile media left and heading right */
    .lead-profile{ flex-direction:row; align-items:center; gap:20px; }
    .lead-head{ text-align:left; }
}
/* =====  section wrapper & heading  ===== */
.experience{
    width:100%;
    text-align:center;
    background-color: var(--bg-secondary);
    padding-top: 3em;
    transition: background-color 0.3s ease;
}
.exp-heading{
    font-family: 'Mona Sans', sans-serif;
    font-weight:800;
    font-size:30px;
    line-height:1.2;
    margin-bottom:40px;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

/* ===== 2 × 2 grid ===== */
.exp-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,57vh);   /* equal height tiles */
    gap:0;                               /* visible dividers via borders */
}
.exp-tile{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    padding:60px 50px 70px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    border:4px solid #fff;  
    border-bottom: 0;             /* white grid lines */
}
.exp-tile::before{                       /* dark overlay for contrast */
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    transition:background .3s;
}
.exp-tile:hover::before{ background:rgba(0,0,0,.65); }  /* subtle hover */

/* ----- foreground content ----- */
.exp-num{
    position:relative;
    z-index:1;
    font-family: 'Cera Pro', sans-serif;
    font-weight:900;
    font-size:clamp(4.5rem,10vw + 1rem,297.5px);
    line-height:1.2;
    color:#fff;
}
.exp-label{
    position:relative;
    z-index:1;
    font-family: 'Cera Pro', sans-serif;
    font-weight:900;
    font-size:clamp(1.1rem,1.5vw + .4rem,57.9px);
    line-height:1.15;
    color:#fff;
    margin:18px 0 28px 0;
    text-align: left;
}

/* ----- pill buttons ----- */
.btn-pill{
    position:relative;
    z-index:1;
    display:inline-block;
    font-family: 'MADE Outer Sans', sans-serif;
    font-weight:700;
    font-size:18px;
    line-height:1.2;
    letter-spacing:.4px;
    padding:5px 32px;
    border-radius:25px;
    text-decoration:none;
    white-space:nowrap;
    transition:filter .25s;
}
.btn-pill:hover{ filter:brightness(.9); }

.red   { background:#d13028; color:#fff; }
.purple{ background:#392582; color:#fff; }

/* =====  responsive single-column ===== */
@media(max-width:900px){
    .exp-grid{
        grid-template-columns:1fr;
        grid-template-rows:repeat(4,45vh);
    }
    .exp-tile{ border-width:3px; }
}

/* =====  wrapper QUICK-ACCESS MENU  ===== */
.quick-menu{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid var(--border-gray);
    border-bottom:1px solid var(--border-gray);
    overflow:hidden;                   /* keeps dividers flush */
    transition: border-color 0.3s ease;
}

/* =====  reusable tile  ===== */
.feature-tile{
    --purple: var(--accent-purple);
    --charcoal: var(--text-primary);
    --red: var(--accent-red);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:60px;
    padding:60px 16px;
    text-align:center;
    background: var(--bg-secondary);
    color:var(--charcoal);
    text-decoration:none;
    position:relative;
    transition:background .2s ease, color .2s ease;
}

/* vertical dividers */
.feature-tile:not(:last-child)::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0;
    width:1px;
    background: var(--border-gray);
    transition: background-color 0.3s ease;
}

/* icon */
.tile-icon{
    height:69.63px;
    fill:var(--purple);                /* for inline-svg; PNG/GIF just use purple assets */
    transition:filter .2s ease;
}

/* label */
.tile-label{
    font-family: 'MADE Outer Sans', sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.3px;
    transition:color .2s ease;
}

/* hover / focus / active  */
.feature-tile:hover,
.feature-tile:focus-visible,
.feature-tile:active{
    background:var(--red);
    color:#fff;
}
.feature-tile:hover .tile-icon,
.feature-tile:focus-visible .tile-icon,
.feature-tile:active .tile-icon{
    filter: brightness(0) invert(1);                  /* turns purple asset white */
}

/* focus ring */
.feature-tile:focus-visible{
    outline:2px solid #000;
    outline-offset:-2px;
}

/* =====  responsive breakpoints  ===== */
@media(max-width:1024px){              /* tablet: 3-column */
    .quick-menu{ grid-template-columns:repeat(3,1fr); }
    .feature-tile:nth-child(3n)::after{ display:none; }
}

@media(max-width:640px){               /* mobile: single column */
    .quick-menu{ grid-template-columns:1fr; }
    .feature-tile::after{ display:none; }
}

/* =====  BLANK TWO-COLUMN STRIP  ===== */
/* blank 50-px two-column strip */
.blank-split{
    width:100%;
    display:grid;
    grid-template-columns:50% 50%;
    height:90px;
    border-top:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    background-color: #fff;
}

/* inner divider between the two halves */
.blank-col{
    border-right:2px solid #e0e0e0;
}
.blank-col:last-child{ border-right:none; }   /* remove final divider */

.blank-split {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-gray);
    border-bottom: 1px solid var(--border-gray);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.blank-col {
    border-right: 2px solid var(--border-gray);
    transition: border-color 0.3s ease;
}






/* ===== SECTION 1: HEADER + CADR ===== */
.opportunities-section-1 {
    width: 100%;
    display: flex;
    gap: 0px;
    background: #e0e0e0;
    height: 26em;
}

.opportunities-section-1 .mosaic-header {
    background: #fff;
    padding: 32px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    max-width: 50%;
}

.opportunities-section-1 .mosaic-header h2 {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 2vw + .5rem, 92.0px);
    line-height: 1.2;
    color: #000;
    margin: 0;
}

.opportunities-section-1 .opportunity-tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #482fa5;
    flex: 1;
    min-width: 0;
    transform: translateZ(0);
    transition: flex 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: flex;
}

.opportunities-section-1 .opportunity-tile.expanded {
    flex: 2.33;
}

.opportunities-section-1 .tile-content {
    position: relative;
    z-index: 2;
    padding: 32px 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
    transform: translateZ(0);
}

.opportunities-section-1 .opportunity-tile.expanded .tile-content {
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    padding-top: 20px;
    padding-left: 5em;
    gap: 5em;
}

.opportunities-section-1 .tile-heading {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.23;
    margin: 0;
    color: #fff;
    transition: none;
    transform: translateY(0) translateZ(0);
    padding-top: 2em;
    padding-left: 1.2em;
}

.opportunities-section-1 .opportunity-tile.expanded .tile-heading {
    color: #fff;
    font-size: clamp(1.3rem, 1.8vw + .5rem, 2rem);
    padding-top: 1.4em;
    padding-left: initial;

}

.opportunities-section-1 .tile-paragraph {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 21.3px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    opacity: 0;
    transform: translateY(40px) translateZ(0);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.2,.9,.2,1);
    max-width: 65ch;
    display: none;
}

.opportunities-section-1 .opportunity-tile.expanded .tile-paragraph {
    display: block;
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.opportunities-section-1 .tile-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.1) translateZ(0);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.2,.9,.2,1);
    will-change: transform, opacity;
}

.opportunities-section-1 .tile-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

.opportunities-section-1 .opportunity-tile.expanded .tile-bg {
    opacity: 1;
    transform: scale(1) translateZ(0);
}


/* ===== SECTION 2: GLOBAL + MOOT COURT ===== */
.opportunities-section-2 {
    width: 100%;
    display: flex;
    gap: 0px;
    background: #e0e0e0;
    height: 30em;
}

.opportunities-section-2 .opportunity-tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transform: translateZ(0);
    transition: flex 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: flex;
}

.opportunities-section-2 .opportunity-tile[data-tile="global"] {
    background: #f9f8f4;
}

.opportunities-section-2 .opportunity-tile[data-tile="moot"] {
    background: #ffffff;
}

.opportunities-section-2 .opportunity-tile.expanded {
    flex: 2;
}

.opportunities-section-2 .tile-content {
    position: relative;
    z-index: 2;
    padding: 32px 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
    transform: translateZ(0);
}

.opportunities-section-2 .opportunity-tile.expanded .tile-content {
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    padding-top: 48px;
    padding-left: 5em;
    gap: 5em;
}
.opportunities-section-2 .opportunity-tile[data-tile="moot"]:not(.expanded) .tile-heading {
    margin-top: 2.8em; /* Adjust this value to push it down as much as you want */
}

.opportunities-section-2 .tile-heading {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 2.3rem;
    line-height: 1.23;
    margin: 0;
    transition: none;
    transform: translateY(0) translateZ(0);
}

.opportunities-section-2 .opportunity-tile[data-tile="global"] .tile-heading {
    color: #292a25;
}

.opportunities-section-2 .opportunity-tile[data-tile="moot"] .tile-heading {
    color: #333;
}

.opportunities-section-2 .opportunity-tile.expanded .tile-heading {
    color: #fff;
    font-size: clamp(1.3rem, 1.8vw + .5rem, 2rem);
}

.opportunities-section-2 .tile-paragraph {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 21.3px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    opacity: 0;
    transform: translateY(40px) translateZ(0);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.2,.9,.2,1);
    max-width: 65ch;
    display: none;
}

.opportunities-section-2 .opportunity-tile.expanded .tile-paragraph {
    display: block;
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.opportunities-section-2 .tile-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.1) translateZ(0);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.2,.9,.2,1);
    will-change: transform, opacity;
}

.opportunities-section-2 .tile-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

.opportunities-section-2 .opportunity-tile.expanded .tile-bg {
    opacity: 1;
    transform: scale(1) translateZ(0);
}


/* ===== SECTION 3: CLINICS + CMRG + PRO BONO ===== */
.opportunities-section-3 {
    width: 100%;
    display: flex;
    gap: 0px;
    background: #e0e0e0;
    height: 33em;
}

.opportunities-section-3 .opportunity-tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transform: translateZ(0);
    transition: flex 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: flex;
}

.opportunities-section-3 .opportunity-tile[data-tile="clinics"] {
    background: #d13028;
}

.opportunities-section-3 .opportunity-tile[data-tile="cmrg"] {
    background: #ffffff;
}

.opportunities-section-3 .opportunity-tile[data-tile="probono"] {
    background: #f9f8f4;
}

.opportunities-section-3 .opportunity-tile.expanded {
    flex: 3;
}

.opportunities-section-3 .tile-content {
    position: relative;
    z-index: 2;
    padding: 32px 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
    transform: translateZ(0);
}

.opportunities-section-3 .opportunity-tile.expanded .tile-content {
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    padding-top: 48px;
    padding-left: 5em;
    gap: 5em;
}

.opportunity-tile[data-tile="clinics"] {
    padding-top: 0;
}
.opportunity-tile[data-tile="cmrg"] {
    padding-top: 0;
}
.opportunity-tile[data-tile="probono"] {
    padding-top: 0;
}

.opportunity-tile.expanded[data-tile="clinics"] {
    padding-top: 1em;
}
.opportunity-tile.expanded[data-tile="cmrg"] {
    padding-top: 1em;
}
.opportunity-tile.expanded[data-tile="probono"] {
    padding-top: 1em;
}

.opportunities-section-3 .tile-heading {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 2.3rem;
    line-height: 1.23;
    margin: 0;
    transition: none;
    transform: translateY(0) translateZ(0);
}

.opportunities-section-3 .opportunity-tile[data-tile="clinics"] .tile-heading {
    color: #fff;
}

.opportunities-section-3 .opportunity-tile[data-tile="cmrg"] .tile-heading {
    color: #333;
}

.opportunities-section-3 .opportunity-tile[data-tile="probono"] .tile-heading {
    color: #292a25;
}

.opportunities-section-3 .opportunity-tile.expanded .tile-heading {
    color: #fff;
    font-size: clamp(1.3rem, 1.8vw + .5rem, 2rem);
}

.opportunities-section-3 .tile-paragraph {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 21.3px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    opacity: 0;
    transform: translateY(40px) translateZ(0);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.2,.9,.2,1);
    max-width: 65ch;
    display: none;
}

.opportunities-section-3 .opportunity-tile.expanded .tile-paragraph {
    display: block;
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.opportunities-section-3 .tile-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.1) translateZ(0);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.2,.9,.2,1);
    will-change: transform, opacity;
}

.opportunities-section-3 .tile-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

.opportunities-section-3 .opportunity-tile.expanded .tile-bg {
    opacity: 1;
    transform: scale(1) translateZ(0);
}





/* ===== TRANSFORMATIVE PROGRAMS HERO ===== */
.transformative-hero {
    width: 100%;
    position: relative;
}

/* Hero container with background image */
.hero-container {
    position: relative;
    width: 100%;
    min-height: 400px;
    height: 34em;
    overflow: hidden;
}

/* Full-bleed background image */
.hero-background {
    position: absolute;
    inset: 0;
    background-image: url('images/Picture11.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

/* UPDATED: Dark overlay positioned at bottom, full width */
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5.5rem;
    width: 100%;
}

/* UPDATED: Hero title styling - full width */
.hero-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 0.97;
    color: #ffffff;
    text-align: center;
    margin: 0;
    width: 100%;
}

/* Program selector row */
.program-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #8d8e90;
}

/* Individual program cards */
.program-card {
    background: #1a1a1a;
    color: #ffffff;
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-right: 1px solid #8d8e90;
    transition: all 220ms ease-out;
    position: relative;
    overflow: hidden;
}

/* Remove border-right from last card */
.program-card:last-child {
    border-right: none;
}

/* Program card headings */
.program-card h3 {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 31px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin: 0;
    text-align: center;
    transition: transform 220ms ease-out;
}

/* NEW: Bottom program selector (third row) */
.program-selector-bottom {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid #8d8e90;
    border-bottom: 1px solid #8d8e90;  /* Added bottom border with same style */
}

/* NEW: Bottom program card with same background as B.A. L.L.B. */
.program-card-bottom {
    background: #1a1a1a;
    color: #ffffff;
    padding: 2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 220ms ease-out;
    position: relative;
    overflow: hidden;
}

/* NEW: Bottom program card heading */
.program-card-bottom h3 {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1.3rem, 2vw + 0.5rem, 53.3px);
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin: 0;
    text-align: center;
    transition: transform 220ms ease-out;
}

/* Hover effects for both card types */
.program-card:hover,
.program-card-bottom:hover {
    background: #1a1a1a;
    box-shadow: none;
}

.program-card:hover h3,
.program-card-bottom:hover h3 {
    transform: none;
    color: #ffffff;
}



/* Active state */
.program-card:active,
.program-card-bottom:active {
    transform: translateY(0);
    background: #333333;
}


.program-card:hover::before,
.program-card-bottom:hover::before {
    opacity: 0;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-container {
        min-height: 300px;
        height: 34vh;
    }
    
    .hero-overlay {
        padding: 26px;
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
    
    .program-selector {
        grid-template-columns: 1fr;
    }
    
    .program-card {
        border-right: none;
        border-bottom: 1px solid #8d8e90;
        padding: 2.5rem 2rem;
    }
    
    .program-card:last-child {
        border-bottom: none;
    }
    
    .program-card-bottom {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 480px) {
    .hero-overlay {
        padding: 26px;
    }
    
    .program-card,
    .program-card-bottom {
        padding: 2rem 1.5rem;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.hero-background {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.program-card,
.program-card-bottom {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    .program-card,
    .program-card-bottom,
    .program-card h3,
    .program-card-bottom h3,
    .program-card::before,
    .program-card-bottom::before {
        transition: none;
    }
    
    .program-card:hover,
    .program-card-bottom:hover {
        transform: none;
    }
    
    .program-card:hover h3,
    .program-card-bottom:hover h3 {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hero-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
    
    
}









/* ===== EVENTS SECTION ===== */
.events-section {
    width: 100%;
    background: #ffffff;
}

/* Events header */
.events-header {
    background: #ffffff;
    padding: 3.3rem 2rem 3rem;
    border-bottom: 1px solid #d9d6d1;
}

.events-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    color: #222222;
    margin: 0;
    text-transform: uppercase;
}

/* Events grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    border-right: 1px solid #999894;
    border-bottom: 1px solid #999894;
}

/* Individual event cards */
.event-card {
    background: #f9f8f4;
    padding: 32px 40px 32px 80px;
    border-left: 1px solid #999894;
    border-top: 1px solid #999894;
    display: flex;
    flex-direction: column;
    gap: 26px;
    text-decoration: none;
    color: inherit;
    transition: background-color 220ms ease-out;
    min-height: 160px;
}

/* Event tag (category) */
.event-tag {
    color: #d13028;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Event title */
.event-title {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 35px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0;
    flex-grow: 1;
    max-width: 32ch;
}

/* Event date */
.event-date {
    color: #4930a5;
    font-family: 'Mona Sans', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.17;
    text-decoration: none;
    margin-top: auto;
}

/* Hover effects */
.event-card:hover {
    background: #f7f6f2;
}

.event-card:hover .event-title {
    color: #1a1a1a;
}

/* Focus styles for accessibility */
.event-card:focus {
    outline: 2px solid #3b36c8;
    outline-offset: 2px;
    background: #f7f6f2;
}

.event-card:focus:not(:focus-visible) {
    outline: none;
}

.event-card:focus-visible {
    outline: 2px solid #3b36c8;
    outline-offset: 2px;
}

/* Active state */
.event-card:active {
    background: #f5f4f0;
    transform: translateY(1px);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 960px) {
    .events-header {
        padding: 2rem 1.5rem 1.5rem;
    }
    
    .events-grid {
        grid-template-columns: 1fr;
    }
    
    .event-card {
        padding: 28px 24px;
        min-height: 140px;
    }
    
    /* Remove left border from first column in mobile */
    .event-card:first-child {
        border-left: none;
    }
    
    /* Remove top border from first row in mobile */
    .event-card:first-child {
        border-top: none;
    }
}

@media (max-width: 640px) {
    .events-header {
        padding: 1.5rem 1rem 1rem;
    }
    
    .event-card {
        padding: 24px 20px;
        gap: 16px;
    }
    
    .event-tag {
        font-size: 0.9rem;
    }
    
    .event-title {
        font-size: clamp(1rem, 2.5vw, 1.3rem);
    }
    
    .event-date {
        font-size: 0.9rem;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    .event-card {
        transition: none;
    }
    
    .event-card:active {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .events-header {
        border-bottom-color: #000000;
    }
    
    .events-grid {
        border-color: #000000;
    }
    
    .event-card {
        border-color: #000000;
        background: #ffffff;
    }
    
    .event-card:hover {
        background: #f0f0f0;
    }
    
    .event-tag {
        color: #cc0000;
    }
    
    .event-date {
        color: #0000cc;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.event-card {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.events-grid li:nth-child(2) .event-card {
    background: #ffffff;
}
.events-grid li:nth-child(3) .event-card {
    background: #ffffff;
}

/* ======== MOBILE-ONLY CONSOLIDATED OVERRIDES ======== */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }

    /* Utility bar */
    .utility-bar { padding: 16px 0; }
    .utility-buttons { max-width: 100%; padding: 0 16px; justify-content: space-between; }
    .search-input { width: 100%; max-width: 240px; }
    .hamburger-menu { display: flex; }

    /* Header */
    .header-content { padding: 24px 0; }
    .header-container { max-width: 100%; padding: 0 16px; gap: 0; flex-direction: row; }
    .header-left { width: 70%; padding-right: 10px; justify-content: flex-start; }
    .header-right { width: 30%; padding-left: 0px; justify-content: center; }
    .logo-section { flex-direction: row; gap: 8px; align-items: center; }
    .law-school-logo { width: 12em; }
    .brand-name { font-size: 18px; }
    .brand-subtitle { font-size: 20px; }
    .vertical-divider { 
        position: absolute;
        left: 60%;
        top: none;
        width: 1px;
        background-color: #c4c3c1;
        height: 162%;
        display: block;
    }
    .header-content {
        border-top: 1px solid #c4c3c1;
        border-bottom: 1px solid #c4c3c1;
    }
    .university-logo { width: 6em; }

    /* Navigation */
    .main-navigation { padding-top: 0px; padding-bottom: 0px; }
    .nav-container { max-width: 100%; padding: 0 16px; flex-direction: row; justify-content: space-between; }
    .nav-menu-desktop { display: none; }
    
    /* Utility bar hamburger */
    .hamburger-menu { display: flex; }

    /* Hero/banner */
    .hero-section { max-width: 100%; margin: 0px auto; }
    .hero-image { padding-top: 65%; }
    .hero-title { left: 20px; bottom: 20px; max-width: 92%; }

    /* Red split banner */
    .discipline-split { 
        margin-top: 3em; 
        height: 120px;      /* Show 1.5 items on mobile */
    }
    .discipline-inner { 
        max-width: 100%; 
        padding: 0px 4px;   /* Updated padding */
        margin-top: 0px;    /* Added margin-top */
        grid-template-columns: auto min-content 1fr;  /* Keep 3-column layout */
        align-items: center;
        column-gap: 8px;    /* Reduced gap for mobile */
        height: 100%;       /* Use full height */
    }
    .left-title { 
        font-size: 28px;    /* Smaller font for mobile */
        text-align: left;   /* Keep left alignment */
    }
    
    .scroll-item {
        font-size: 28px;    /* Smaller font for mobile */
        align-items: center;
        text-align: center;
        height: 50px;      /* Adjusted for mobile 1.5 items display */
        min-height: 50px;  /* Added min-height for mobile */
    }
    .plus-box { 
        font-size: 2.2rem;  /* Smaller plus sign for mobile */
        padding-left: 0.5em; /* Reduced padding for mobile */
    }
    .right-wrap { 
        clip-path: inset(15% 0 15% 0); 
        text-align: right;  /* Keep right alignment */
    }

    /* News grid */
    .news-grid { grid-template-columns: 1fr; }
    .news-col, .news-col--left { grid-template-rows: auto; border-left: none; }
    .news-col--left { border-right: none; }
    .news-heading { padding: 24px 16px 14px 16px; font-size: 36px; }
    .feature-story { padding: 20px 16px; gap: 16px; }
    .feature-head { font-size: 30px; }
    .story-box { padding: 20px 16px; gap: 16px; border-right: none; }
    .story-head { font-size: 22px !important; padding-top: 0 !important; }
    .author { font-size: 16px; }
    .cta-box { padding: 16px; justify-content: center; }
    .more-btn { font-size: 16px; padding: 6px 18px; }

    /* Faculty leadership */
    .faculty-lead { grid-template-columns: 1fr; }
    .lead-title { font-size: 30px; padding: 20px 16px; text-align: center; }
    /* Side-by-side on mobile as per desktop intent */
    .lead-profile { flex-direction: row; align-items: center; gap: 16px; padding: 20px 16px; }
    .lead-photo { width: 160px; height: 160px; }
    .lead-head { font-size: 28px; text-align: left; }
    .lead-right { border-left: none; padding: 20px 16px; }
    .lead-text { font-size: 18px; }
    .lead-ctas { gap: 10px; margin-top: 0; }
    .cta-row { gap: 12px; }
    .btn-solid, .btn-outline { font-size: 16px; padding: 6px 18px; }
    .lead-next { align-self: flex-start; margin-top: 8px; }

    /* Experience grid */
    .exp-heading { font-size: 34px; margin-bottom: 20px; }
    .exp-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 42vh); }
    .exp-tile { padding: 28px 20px 32px; border-width: 3px; justify-content: center; }
    .exp-label { margin: 12px 0 18px 0; }
    .btn-pill { font-size: 12px; padding: 6px 20px; }
    .exp-num { font-size: clamp(7.5rem, 10vw + 1rem, 297.5px); }

    /* Quick menu */
    .quick-menu { grid-template-columns: repeat(2,1fr); }
    .feature-tile { gap: 28px; padding: 28px 12px; }
    .feature-tile::after{ display:block; }
    .tile-label { font-size: 16px; }

    /* Blank split */
    .blank-split { grid-template-columns: 1fr; height: 64px; }
    .blank-col { border-right: none; }

    /* Opportunities sections */
    .opportunities-section-1,
    .opportunities-section-2,
    .opportunities-section-3 { flex-direction: column; height: auto; }
    .opportunities-section-1 .mosaic-header { max-width: 100%; padding: 20px 16px; }
    .opportunities-section-1 .opportunity-tile,
    .opportunities-section-2 .opportunity-tile,
    .opportunities-section-3 .opportunity-tile { min-height: 320px; }
    .opportunities-section-1 .tile-content {
        align-items: center;
        text-align: center;
        padding: 24px 16px;
        gap: 20px;
        justify-content: center;
    }
    .opportunities-section-2 .tile-content,
    .opportunities-section-3 .tile-content { align-items: center; text-align: center; padding: 24px 16px; gap: 20px; }
    .opportunities-section-1 .opportunity-tile.expanded .tile-content,
    .opportunities-section-2 .opportunity-tile.expanded .tile-content,
    .opportunities-section-3 .opportunity-tile.expanded .tile-content { padding-left: 16px; padding-top: 24px; gap: 20px; }
    .opportunities-section-1 .tile-heading {
        font-size: 1.6rem;
        padding-left: 0;
        padding-top: 2.4em;
    }
    .opportunities-section-1 .tile-paragraph {
        display: none;
    }
    .opportunities-section-1 .opportunity-tile.expanded .tile-paragraph {
        display: block;
    }
    .opportunities-section-1 .opportunity-tile.expanded .tile-heading {
        padding-top: 1.4em;
    }
    
    /* Apply same changes to sections 2 and 3 */
    .opportunities-section-2 .tile-content,
    .opportunities-section-3 .tile-content {
        align-items: center;
        text-align: center;
        padding: 24px 16px;
        gap: 20px;
        justify-content: center;
    }
    .opportunities-section-2 .tile-heading,
    .opportunities-section-3 .tile-heading {
        font-size: 1.6rem;
        padding-left: 0;
        padding-top: 2.4em;
    }
    .opportunities-section-2 .tile-paragraph,
    .opportunities-section-3 .tile-paragraph {
        display: none;
    }
    .opportunities-section-2 .opportunity-tile.expanded .tile-paragraph,
    .opportunities-section-3 .opportunity-tile.expanded .tile-paragraph {
        display: block;
    }
    .opportunities-section-2 .opportunity-tile.expanded .tile-heading,
    .opportunities-section-3 .opportunity-tile.expanded .tile-heading {
        padding-top: 1.4em;
    }
    .opportunities-section-2 .opportunity-tile[data-tile="moot"]:not(.expanded) .tile-heading {
        margin-top: 0.5em;
    }
    .opportunities-section-1 .tile-paragraph,
    .opportunities-section-2 .tile-paragraph,
    .opportunities-section-3 .tile-paragraph { font-size: 16px; }
    .opportunity-tile[data-tile="clinics"],
    .opportunity-tile[data-tile="cmrg"],
    .opportunity-tile[data-tile="probono"] { padding-top: 2em; }

    /* Transformative programs hero */
    .hero-container { min-height: 300px; height: 42vh; }
    .hero-overlay { padding: 26px; }
    .transformative-hero .hero-title { font-size: 32px; padding-right: 0; }
    .program-selector { grid-template-columns: 1fr; }
    .program-card { border-right: none; border-bottom: 1px solid #8d8e90; padding: 20px 16px; }
    .program-card:last-child { border-bottom: none; }
    .program-card h3 { font-size: 22px; }
    .program-card-bottom { padding: 20px 16px; }

    /* Events */
    .events-header { padding: 20px 16px 16px; }
    .events-title { font-size: 36px; }
    .events-grid { grid-template-columns: 1fr; }
    .event-card { padding: 20px 16px; min-height: 120px; }
    .event-card[aria-labelledby="event-1-title"],
    .event-card[aria-labelledby="event-3-title"] { background: #f9f8f4; }
    .event-card[aria-labelledby="event-2-title"],
    .event-card[aria-labelledby="event-4-title"] { background: #ffffff; }
    .event-card[aria-labelledby="event-2-title"] {
        border-top: 1px solid #d9d6d1;
        border-bottom: 1px solid #d9d6d1;
    }
    .event-card[aria-labelledby="event-3-title"] {
        border-bottom: 1px solid #d9d6d1;
    }
    .events-grid {
        border-right: none;
    }
    
    /* Mosaic header styling */
    .opportunities-section-1 .mosaic-header h2 {
        text-align: center;
        font-size: 28px;
    }
    
    .event-tag { font-size: 18px; }
    .event-title { font-size: 24px; }
    .event-date { font-size: 18px; }
}

@media (max-width: 480px) {
    /* Red split right-wrap line offsets */
    .rt-top { transform: translateY(5%); }
    .rt-bottom { transform: translateY(-13%); }

    /* News heading spacing */
    .news-heading { padding: 24px 16px 14px 16px; }

    /* Smaller CTAs in faculty section */
    .btn-solid, .btn-outline { font-size: 10px; }
    .lead-next { font-size: 10px; margin-top: 0px; }
    .arrow { font-size: 1.3rem; }
    /* Tight phones */
    .search-input { max-width: 200px; }

    .law-school-logo { width: 14em; }
    .brand-name { font-size: 20px; }
    .brand-subtitle { font-size: 22px; }
    .university-logo { width: 9em; }
    .nav-menu { gap: 10px; }
    .nav-menu a { font-size: 11px; }

    .hero-image { padding-top: 70%; }
    .hero-title { left: 16px; bottom: 16px; }

    .discipline-inner { 
        padding: 0px 4px;   /* Updated padding for smallest mobile */
        margin-top: 0px;    /* Added margin-top for smallest mobile */
    }
    
    .left-title { 
        font-size: 24px;   /* Even smaller for smallest mobile */
        text-align: left;   /* Keep left alignment */
    }
    
    .discipline-split { 
        height: 62px;      /* Show 1.5 items on smallest mobile */
    }
    
    .scroll-item {
        font-size: 24px;   /* Even smaller for smallest mobile */
        align-items: center;
        text-align: center;
        height: 50px;      /* Adjusted for smallest mobile 1.5 items display */
        min-height: 50px; /* Added min-height for smallest mobile */
    }
    .plus-box { 
        font-size: 1.8rem; /* Smaller plus sign for smallest mobile */
        padding-left: 0.3em; /* Further reduced padding */
    }

    .feature-head { font-size: 26px; }
    .story-head { font-size: 20px !important; padding-top: 0 !important; }
    .author { font-size: 14px; }

    /* Keep side-by-side on smallest devices */
    .lead-profile { flex-direction: row; align-items: center; gap: 14px; }
    .lead-photo { width: 140px; height: 140px; }
    .lead-head { font-size: 24px; text-align: left; }
    .lead-text { font-size: 16px; }

    .exp-grid { grid-template-rows: repeat(4, 40vh); }
    .exp-tile { padding: 24px 16px 28px; justify-content: center; }
    .btn-pill { font-size: 12px; }
    .exp-num { font-size: clamp(7.5rem, 10vw + 1rem, 297.5px); }

    .quick-menu { grid-template-columns: 1fr; }
    .feature-tile { gap: 24px; padding: 24px 12px; border-bottom:1px solid #e0e0e0; }
    .feature-tile:last-child{ border-bottom:none; }
    .feature-tile::after{ display:none; }

    .opportunities-section-1 .opportunity-tile,
    .opportunities-section-2 .opportunity-tile,
    .opportunities-section-3 .opportunity-tile { min-height: 280px; }
    .opportunities-section-2 .opportunity-tile[data-tile="moot"]:not(.expanded) .tile-heading { margin-top: 1.5em; }
    
    /* Center tile-heading vertically for section 1 */
    .opportunities-section-1 .tile-content {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .opportunities-section-1 .tile-heading {
        font-size: 1.6rem;
        padding-left: 0;
        padding-top: 2.4em;
    }
    .opportunities-section-1 .tile-paragraph {
        display: none;
    }
    .opportunities-section-1 .opportunity-tile.expanded .tile-paragraph {
        display: block;
    }
    .opportunities-section-1 .opportunity-tile.expanded .tile-heading {
        padding-top: 1.4em;
    }
    
    /* Apply same changes to sections 2 and 3 */
    .opportunities-section-2 .tile-content,
    .opportunities-section-3 .tile-content {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .opportunities-section-2 .tile-heading,
    .opportunities-section-3 .tile-heading {
        font-size: 1.6rem;
        padding-left: 0;
        padding-top: 2.4em;
    }
    .opportunities-section-2 .tile-paragraph,
    .opportunities-section-3 .tile-paragraph {
        display: none;
    }
    .opportunities-section-2 .opportunity-tile.expanded .tile-paragraph,
    .opportunities-section-3 .opportunity-tile.expanded .tile-paragraph {
        display: block;
    }
    .opportunities-section-2 .opportunity-tile.expanded .tile-heading,
    .opportunities-section-3 .opportunity-tile.expanded .tile-heading {
        padding-top: 1.4em;
    }
    .opportunities-section-2 .opportunity-tile[data-tile="moot"]:not(.expanded) .tile-heading {
        margin-top: 0.5em;
    }

    .transformative-hero .hero-title { font-size: clamp(1.3rem, 6vw, 2rem); }
    .program-card h3, .program-card-bottom h3 { font-size: 20px; }

    .events-title { font-size: 30px; }
    .event-tag { font-size: 16px; }
    .event-title { font-size: 20px; }
    .event-date { font-size: 16px; }
    .event-card[aria-labelledby="event-1-title"],
    .event-card[aria-labelledby="event-3-title"] { background: #f9f8f4!important; }
    .event-card[aria-labelledby="event-2-title"],
    .event-card[aria-labelledby="event-4-title"] { background: #ffffff; }
    .event-card[aria-labelledby="event-2-title"] {
        border-top: 1px solid #d9d6d1;
        border-bottom: 1px solid #d9d6d1;
    }
    .event-card[aria-labelledby="event-3-title"] {
        border-bottom: 1px solid #d9d6d1;
    }
    .events-grid {
        border-right: none;
    }
    
    /* Header layout - maintain desktop side-by-side */
    .header-container {
        flex-direction: row;
        gap: 0;
        padding: 0 12px;
    }
    .header-left {
        width: 70%;
        padding-right: 8px;
        justify-content: flex-start;
    }
    .header-right {
        width: 30%;
        padding-left: 0px;
        justify-content: center;
    }
    .vertical-divider {
        position: absolute;
        left: 60%;
        top: -24px;
        width: 1px;
        background-color: #c4c3c1;
        height: 162%;
        display: block;
    }
    .header-content {
        border-top: 1px solid #c4c3c1;
        border-bottom: 1px solid #c4c3c1;
    }
    .law-school-logo {
        width: 12em;
    }
    .university-logo {
        width: 6em;
    }
    
    /* Mosaic header styling */
    .opportunities-section-1 .mosaic-header h2 {
        text-align: center;
        font-size: 28px;
    }
}

.faculty-lead {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.lead-right {
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-outline {
    background: var(--bg-secondary);
    color: var(--accent-purple);
    border-color: var(--accent-purple);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.lead-next {
    color: var(--accent-purple);
    transition: color 0.3s ease;
}

/* Dark mode feature-tile hover - red background */
[data-theme="dark"] .feature-tile:hover,
[data-theme="dark"] .feature-tile:focus-visible,
[data-theme="dark"] .feature-tile:active {
    background: #d13028; /* Red background on hover */
    color: #ffffff; /* White text */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode feature-tile hover icon - white */
[data-theme="dark"] .feature-tile:hover .tile-icon,
[data-theme="dark"] .feature-tile:focus-visible .tile-icon,
[data-theme="dark"] .feature-tile:active .tile-icon {
    filter: brightness(0) invert(1); /* Makes icon white */
}

/* Dark mode tile-heading colors */
[data-theme="dark"] .opportunities-section-2 .opportunity-tile[data-tile="global"] .tile-heading {
    color: var(--text-primary); /* White in dark mode */
}

[data-theme="dark"] .opportunities-section-2 .opportunity-tile[data-tile="moot"] .tile-heading {
    color: var(--text-primary); /* White in dark mode */
}

[data-theme="dark"] .opportunities-section-3 .opportunity-tile[data-tile="cmrg"] .tile-heading {
    color: var(--text-primary); /* White in dark mode */
}

[data-theme="dark"] .opportunities-section-3 .opportunity-tile[data-tile="probono"] .tile-heading {
    color: var(--text-primary); /* White in dark mode */
}

/* Dark mode opportunity-tile backgrounds */
[data-theme="dark"] .opportunities-section-2 .opportunity-tile[data-tile="global"] {
    background: var(--bg-tertiary); /* Dark gray in dark mode */
}

[data-theme="dark"] .opportunities-section-2 .opportunity-tile[data-tile="moot"] {
    background: var(--bg-secondary); /* Darker gray in dark mode */
}

[data-theme="dark"] .opportunities-section-3 .opportunity-tile[data-tile="cmrg"] {
    background: var(--bg-secondary); /* Darker gray in dark mode */
}

[data-theme="dark"] .opportunities-section-3 .opportunity-tile[data-tile="probono"] {
    background: var(--bg-tertiary); /* Dark gray in dark mode */
}

/* Dark mode mosaic-header */
[data-theme="dark"] .opportunities-section-1 .mosaic-header {
    background: var(--bg-secondary); /* Dark gray background */
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .opportunities-section-1 .mosaic-header h2 {
    color: var(--text-primary); /* White text */
    transition: color 0.3s ease;
}

/* Dark mode events section */
[data-theme="dark"] .events-section {
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .events-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .events-title {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

[data-theme="dark"] .events-grid {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    transition: border-color 0.3s ease;
}

[data-theme="dark"] .event-card {
    background: var(--bg-tertiary);
    border-left: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .event-title {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

[data-theme="dark"] .event-card:hover {
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .event-card:hover .event-title {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

[data-theme="dark"] .event-card:focus {
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .event-card:active {
    background: var(--bg-tertiary);
    transition: background-color 0.3s ease;
}

/* Dark mode specific event card backgrounds */
[data-theme="dark"] .event-card[aria-labelledby="event-1-title"],
[data-theme="dark"] .event-card[aria-labelledby="event-4-title"] {
    background: #2d2d2d !important; /* Darker gray for event-1 and event-4 */
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .event-card[aria-labelledby="event-2-title"],
[data-theme="dark"] .event-card[aria-labelledby="event-3-title"] {
    background: #1a1a1a !important; /* Darkest gray for event-2 and event-3 */
    transition: background-color 0.3s ease;
}

/* Dark mode event card borders */
[data-theme="dark"] .event-card[aria-labelledby="event-2-title"] {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    transition: border-color 0.3s ease;
}

[data-theme="dark"] .event-card[aria-labelledby="event-3-title"] {
    border-bottom: 1px solid var(--border-light);
    transition: border-color 0.3s ease;
}

/* 768px breakpoint - more-btn already matches btn-solid */
/* 480px breakpoint - add missing more-btn styling */
@media (max-width: 480px) {
    .more-btn { 
        font-size: 10px; 
        padding: 6px 18px;
    }
}

/* ===== SEARCH FUNCTIONALITY STYLES ===== */
.search-highlight {
    background-color: var(--accent-red) !important;
    color: white !important;
    padding: 2px 0 !important;
    border-radius: 2px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
}

.search-highlight.current {
    background-color: #ff6b6b !important;
    box-shadow: 0 0 0 2px var(--accent-red) !important;
    transform: scale(1.05) !important;
}

/* Search results display */
.search-results-display {
    position: fixed;
    top: 120px;
    right: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 300px;
    display: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
}

.search-results-display button {
    transition: all 0.2s ease;
}

.search-results-display button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Dark theme search highlights */
[data-theme="dark"] .search-highlight {
    background-color: var(--accent-red) !important;
    color: white !important;
}

[data-theme="dark"] .search-highlight.current {
    background-color: #ff6b6b !important;
    box-shadow: 0 0 0 2px var(--accent-red) !important;
}

/* Search input focus styles */
.search-input:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(209, 48, 40, 0.1);
}

/* ===== HYPERLINK STYLES ===== */
/* Remove underlines from all links */
a {
    text-decoration: none;
    color: #292a25;
}

/* Dark theme link color */
[data-theme="dark"] a {
    color: #ffffff;
}

/* Feature-head hover color */
.feature-head a:hover {
    color: #482fa5 !important;
}

/* Story-head hover color */
.story-head a:hover {
    color: #482fa5 !important;
}

/* Lead-head hover color */
.lead-head a:hover {
    color: #482fa5 !important;
}

/* More-btn hover background color (red) */
.more-btn:hover {
    background: #d13028 !important;
}

/* Btn-solid hover background color (blue) */
.btn-solid:hover {
    background: #482fa5 !important;
}

/* Btn-outline hover colors (red border and text) */
.btn-outline:hover {
    border-color: #d13028 !important;
    color: #d13028 !important;
}

/* Btn-pill red hover background color (blue) */
.btn-pill.red:hover {
    background: #482fa5 !important;
}

/* Btn-pill purple hover background color (red) */
.btn-pill.purple:hover {
    background: #d13028 !important;
}

/* Program-card hover background color (blue) */
.program-card:hover {
    background: #482fa5 !important;
}

/* Feature-tile hover effects remain unchanged as they already have proper hover styles */

/* Event title hover color */
.event-card:hover .event-title {
    color: #482fa5 !important;
}

/* ===== FOOTER STYLES ===== */
.main-footer {
    padding-top: 60px;
    background-color: var(--bg-secondary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 150px;
    padding: 0;
}

.footer-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.footer-heading {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    position: relative;
    transition: color 0.3s ease;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 28%;
    height: 2px;
    background-color: #a61a2e;
}

.footer-address-text {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    transition: color 0.3s ease;
}

.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav li {
    margin: 0;
}

.footer-nav a {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #a61a2e;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.contact-label {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}

.contact-link {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #a61a2e;
}

.social-icons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.social-icon {
    width: 24px;
    height: 24px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(2000%) hue-rotate(340deg) brightness(90%) contrast(120%);
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon.facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.social-icon.instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.social-icon.linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

.social-icon.youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.footer-bottom {
    border-top: 1px solid #ebebeb;
    margin-top: 40px;
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-left,
.copyright-right {
    font-family: 'MADE Outer Sans', sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}

.copyright-left {
    text-align: left;
}

.copyright-right {
    text-align: right;
}

/* Dark theme footer */
[data-theme="dark"] .main-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-light);
}

[data-theme="dark"] .footer-heading {
    color: var(--text-primary);
}

[data-theme="dark"] .footer-address-text,
[data-theme="dark"] .footer-nav a,
[data-theme="dark"] .contact-link {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .copyright-left,
[data-theme="dark"] .copyright-right {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer-bottom {
    border-top-color: var(--border-light);
}

/* Dark theme footer logo */
[data-theme="dark"] .footer-logo {
    content: url('../images/footer_logo_dark.png');
}

/* Faculty Slide Functionality */
.faculty-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.faculty-slide.active {
    display: block;
    opacity: 1;
}

/* Smooth transitions for faculty slides */
.faculty-slide .lead-profile,
.faculty-slide .lead-text,
.faculty-slide .lead-ctas {
    transition: all 0.3s ease-in-out;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column !important;
        gap: 40px !important;
        text-align: center !important;
        padding: 0 20px !important;
    }
    
    .footer-column {
        align-items: center !important;
    }
    
    .footer-heading::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .social-icons {
        justify-content: center !important;
    }
    
    .social-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .footer-nav {
        align-items: center !important;
    }
    
    .contact-info {
        align-items: center !important;
    }
    
    .footer-bottom-content {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
    
    .copyright-left,
    .copyright-right {
        text-align: center !important;
    }
}