/* =========================================================
       1. GLOBAL COLORS / VARIABLES
       Change these once and the colors update across the site.
       ========================================================= */
	  
    :root {
      --rutgers-red: #cc0033;
      --rutgers-red-dark: #a00028;
      --navy: #111827;
      --dark-blue: #0c1c2c;
      --text: #111827;
      --text-secondary: #4b5563;
      --background: #f6f7f9;
      --white: #ffffff;
	  --darkgray: #222222;
      --border: #e3e6ea;
      --light-red: #fff3f5;
      --max-width: 1450px;
      --shadow:
        0 2px 8px rgba(0, 0, 0, 0.06);
    }
	  
    /* =========================================================
       2. GLOBAL PAGE STYLES
       ========================================================= */
    
	* {
      box-sizing: border-box;
    }
	  
    html {
      scroll-behavior: smooth;
    }
	  
    body {
      margin: 0;
      font-family:
        Arial,
        Helvetica,
        sans-serif;
      color: var(--text);
      background: var(--background);
    }
	  
    a {
      color: inherit;
      text-decoration: none;
    }
	  
    img {
      display: block;
      width: 100%;
    }
	  
    .container {
      width: min(var(--max-width), calc(100% - 48px));
      margin: 0 auto;
    }
	  
    /* =========================================================
       3. TOP UNIVERSITY / OFFICE HEADER
       Corresponds to:
       Rutgers R + Office Name
       Rutgers.edu | Academic Affairs | Contact Us 
       ========================================================= */
    
	  .site-header {
      background: var(--white);
      border-bottom: 1px solid var(--border);
    }
    .site-header-inner {
      min-height: 105px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }
	  
    .office-brand {
      display: flex;
      align-items: center;
      gap: 18px;
    }
	  
	.oirds-logo {
	  width: 450px;
	  height: auto;
	}	
	  
    .utility-nav {
      display: flex;
      align-items: center;
      gap: 0;
      font-size: 15px;
    }
    .utility-nav a {
      padding: 0 22px;
      border-right: 1px solid var(--border);
    }
    .utility-nav a:hover {
      color: var(--rutgers-red);
    }
    .site-search {
      display: flex;
      align-items: center;
      margin-left: 14px;
      border: 1px solid #b8bec7;
      border-radius: 4px;
      overflow: hidden;
      background: var(--white);
    }
    .site-search:focus-within {
      border-color: var(--rutgers-red);
      box-shadow: 0 0 0 2px rgba(204, 0, 51, 0.15);
    }
    .site-search-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .site-search-input {
      width: 180px;
      height: 42px;
      padding: 0 12px;
      border: 0;
      outline: 0;
      color: var(--text);
      background: transparent;
      font: inherit;
    }
    .site-search-input::placeholder {
      color: #667085;
    }
    .site-search-scope {
      height: 42px;
      max-width: 116px;
      padding: 0 30px 0 10px;
      border: 0;
      border-right: 1px solid #b8bec7;
      outline: 0;
      color: var(--text);
      background-color: #f6f7f9;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .site-search-scope:hover,
    .site-search-scope:focus-visible {
      background-color: var(--light-red);
    }
    .search-button {
      width: 46px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-left: 1px solid #b8bec7;
      color: var(--white);
      background: var(--rutgers-red);
      cursor: pointer;
    }
    .search-button:hover,
    .search-button:focus-visible {
      background: var(--rutgers-red-dark);
    }
    .search-button svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }
    /* =========================================================
       4. MAIN NAVIGATION BAR
       Home
       Data by Topic
       Analytics Portal
       Reports & Resources
       Request Data & Support
       About OIRDS
       ========================================================= */
    .main-nav {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 100;
    }
    .main-nav-inner {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
    }
    .nav-item {
      position: relative;
      padding: 22px 24px 20px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 4px solid transparent;
    }
    .nav-item:hover,
    .nav-item.active {
      color: var(--rutgers-red);
      border-bottom-color: var(--rutgers-red);
    }
    .nav-arrow {
      font-size: 12px;
      margin-left: 7px;
    }
    /* =========================================================
       5. HERO SECTION
       Office name
       Tagline
       3 main action cards
       IMPORTANT:
       Replace images/hero-campus.jpg with your actual hero image.
       ========================================================= */
    .hero {
      position: relative;
      min-height: 580px;
      background:
        linear-gradient(
          90deg,
          rgba(3, 21, 35, 0.96) 0%,
          rgba(3, 21, 35, 0.87) 38%,
          rgba(3, 21, 35, 0.25) 100%
        ),
url("../Images/Geology_Hall.jpg")
        center / cover no-repeat;
      color: var(--white);
    }
    .hero-inner {
      padding-top: 68px;
      padding-bottom: 32px;
    }
    .hero-copy {
      max-width: 760px;
    }
    .hero h1 {
      margin: 0;
      font-size: clamp(44px, 5vw, 66px);
      line-height: 1.02;
      letter-spacing: -1.5px;
    }
    .hero-tagline {
      margin: 20px 0 0;
      max-width: 680px;
      font-size: 26px;
      line-height: 1.4;
      font-weight: 400;
    }
    /* =========================================================
       6. PRIMARY ACTION CARDS
       Browse Data by Topic
       Analytics Portal
       Request Data & Support
       ========================================================= */
    .primary-actions {
      margin-top: 58px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
	  
    .action-card {
      min-height: 200px;
      position: relative;
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 18px;
      padding: 28px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 8px;
      box-shadow: var(--shadow);
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }
	  
    .action-card:hover {
      transform: translateY(-3px);
      box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.15);
    }
	  
    .action-icon {
      width: 68px;
      height: 68px;
      border-radius: 65%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--rutgers-red);
      background: var(--light-red);
      font-size: 32px;
    }
	  
    .action-card h2 {
      margin: 4px 0 10px;
      font-size: 25px;
      line-height: 1.05;
    }
	  
    .action-card p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.55;
    }
	  
    .action-arrow {
      position: absolute;
      right: 24px;
      bottom: 20px;
      color: var(--rutgers-red);
      font-size: 28px;
    }
	  
    /* =========================================================
       7. MAIN HOMEPAGE CONTENT
       ========================================================= */
    main {
      padding: 24px 0 30px;
    }
    .panel {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }
    .section-heading {
      margin: 0;
      font-size: 21px;
    }
    /* =========================================================
       8. RUTGERS AT A GLANCE
       Thin institutional statistics row
       ========================================================= */
    .glance {
      padding: 28px 30px 24px;
      margin-bottom: 24px;
    }
	  
    .glance-header {
      margin-bottom: 18px;
    }
	  
    .glance-header h2 {
      margin: 0;
      font-size: 20px;
    }
	  
    .glance-header span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
    }
	  
    .glance-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
    }
	  
    .stat {
      position: relative;
      padding: 8px 20px;
      text-align: center;
      border-right: 1px solid var(--border);
    }
	  
    .stat:last-child {
      border-right: 0;
    }
	  
    .stat-icon {
	  height: 38px;
	  margin-bottom: 10px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.stat-icon svg {
	  width: 34px;
	  height: 34px;
	  fill: none;
	  stroke: currentColor;
	  stroke-width: 1.7;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	}
	  
    .stat-value {
      display: block;
      font-size: 27px;
      font-weight: 700;
    }
	  
    .stat-label {
      display: block;
      margin-top: 8px;
      font-size: 13px;
    }
	  
    .stat-arrow {
      margin-left: 4px;
      color: var(--rutgers-red);
    }
	  
    /* =========================================================
       9. FEATURED DATA & ANALYTICS
       Full-width row with actual screenshots of dashboards.
       Replace the image paths below in the HTML with your
       actual screenshots.
       ========================================================= */
    .featured {
      padding: 28px;
      margin-bottom: 24px;
    }
    .section-header-row {
      margin-bottom: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }
    .section-link {
      color: var(--rutgers-red);
      font-size: 14px;
      font-weight: 700;
    }
    .featured-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .resource-card {
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 6px;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }
    .resource-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }
    .resource-image {
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: top;
      border-bottom: 1px solid var(--border);
    }
    .resource-content {
      padding: 17px 17px 20px;
    }
    .resource-content h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }
    .resource-content p {
      min-height: 65px;
      margin: 0 0 15px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
    }
    .resource-link {
      color: var(--rutgers-red);
      font-size: 14px;
      font-weight: 700;
    }
    /* =========================================================
       10. QUICK LINKS
       ========================================================= */
		.quick-links {
		  padding: 20px 28px;
		  background: #fff;
		  border: 1px solid #dfe3e8;
		  border-radius: 8px;
		  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
		}

		.quick-links h2 {
		  margin: 0 0 18px;
		  font-size: 20px;
		  line-height: 1.2;
		}

		.quick-links-grid {
		  display: grid;
		  grid-template-columns: repeat(4, minmax(0, 1fr));
		  column-gap: 32px;
		}

		.quick-link {
		  display: flex;
		  flex-direction: column;
		  color: #222;
		  text-decoration: none;
		}

		.quick-link strong {
		  margin-bottom: 6px;
		  font-size: 17px;
		  line-height: 1.25;
		}

		.quick-link-description {
		  color: #555;
		  font-size: 14px;
		  line-height: 1.4;
		}

		.quick-link-action {
		  margin-top: 10px;
		  color: #cc0033;
		  font-size: 14px;
		  font-weight: 700;
		}

		.quick-link:hover strong,
		.quick-link:focus strong {
		  color: #cc0033;
		}

		@media (max-width: 850px) {
		  .quick-links-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 22px 28px;
		  }
		}

		@media (max-width: 500px) {
		  .quick-links {
			padding: 20px;
		  }

		  .quick-links-grid {
			grid-template-columns: 1fr;
			gap: 18px;
		  }
		}

    /* =========================================================
       13. FOOTER
       ========================================================= */
    .site-footer {
      padding: 38px 0 30px;
      color: var(--white);
      background: #000;
    }

    .footer-top {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      align-items: start;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(255,255,255,0.25);
    }

    .footer-home {
      display: inline-flex;
      align-items: center;
      color: var(--white);
    }

    .rutgers-white-logo {
      width: 200px;
      height: auto;
    }

    .footer-division-links {
      display: grid;
      gap: 4px;
      font-size: 12px;
      line-height: 1.6;
    }

    .footer-division-links a {
      display: block;
    }

    .footer-top > .footer-column,
    .footer-top > .footer-division-links {
      padding-left: 28px;
      border-left: 1px solid rgba(255,255,255,0.25);
    }

    .footer-column {
      font-size: 12px;
      line-height: 1.6;
    }

    .footer-column a {
      display: block;
      margin-bottom: 4px;
    }

    .footer-legal {
      max-width: 1050px;
      margin: 24px auto 0;
      text-align: center;
      font-size: 12px;
      line-height: 1.6;
    }

    .footer-legal p {
      margin: 0 0 10px;
    }

    .footer-legal p:last-child {
      margin-bottom: 0;
    }

    .footer-legal a {
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }

    .footer-legal a:hover,
    .footer-legal a:focus {
      color: var(--white);
      text-decoration-thickness: 2px;
    }
	  
    /* =========================================================
       14. RESPONSIVE DESIGN
       ========================================================= */
    @media (max-width: 1100px) {
      .site-header-inner {
        min-height: auto;
        padding: 16px 0;
        flex-wrap: wrap;
        gap: 16px 24px;
      }
      .oirds-logo {
        width: 400px;
        max-width: 100%;
      }
      .utility-nav {
        margin-left: auto;
      }
      .utility-nav a {
        padding: 0 12px;
      }
      .site-search-input {
        width: 150px;
      }
      .footer-top {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .nav-item {
        white-space: nowrap;
      }
      .primary-actions {
        grid-template-columns: 1fr;
      }
      .featured-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .glance-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .stat:nth-child(3) {
        border-right: 0;
      }
      .lower-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 700px) {
      .container {
        width: min(100% - 28px, var(--max-width));
      }
      .site-header-inner {
        min-height: auto;
        padding: 18px 0;
        align-items: flex-start;
      }
      .utility-nav {
        display: none;
      }
      .rutgers-r {
        font-size: 50px;
      }
      .office-brand-text strong {
        font-size: 16px;
      }
      .hero {
        min-height: auto;
      }
      .hero-inner {
        padding-top: 45px;
        padding-bottom: 28px;
      }
      .hero h1 {
        font-size: 40px;
      }
      .hero-tagline {
        font-size: 21px;
      }
      .action-card {
        grid-template-columns: 60px 1fr;
      }
      .action-icon {
        width: 52px;
        height: 52px;
        font-size: 25px;
      }
      .featured-grid,
      .glance-grid,
      .quick-links-grid {
        grid-template-columns: 1fr;
      }
      .stat,
      .stat:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }
      .stat:last-child {
        border-bottom: 0;
      }
      .quick-link {
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }
      .footer-top {
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .footer-division-links {
        grid-column: auto;
      }
      .footer-top > .footer-column,
      .footer-top > .footer-division-links {
        padding-left: 0;
        border-left: 0;
      }
    }
    /* =========================================================
       15. NAVIGATION DROPDOWNS
       ========================================================= */
    .nav-dropdown {
      position: relative;
      display: flex;
      align-items: stretch;
    }
    .nav-dropdown-toggle {
      appearance: none;
      border-top: 0;
      border-right: 0;
      border-left: 0;
      background: transparent;
      color: inherit;
      font-family: inherit;
      cursor: pointer;
    }
    .nav-caret {
      display: inline-block;
      margin-left: 7px;
      font-size: 11px;
      transition: transform 0.18s ease;
    }
    .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      min-width: 235px;
      margin: 0;
      padding: 8px 0;
      list-style: none;
      background: var(--white);
      border: 1px solid var(--border);
      border-top: 3px solid var(--rutgers-red);
      border-radius: 0 0 5px 5px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    }
    .nav-dropdown:hover > .dropdown-menu,
    .nav-dropdown:focus-within > .dropdown-menu,
    .nav-dropdown.is-open > .dropdown-menu {
      display: block;
    }
    .nav-dropdown:hover .nav-caret,
    .nav-dropdown:focus-within .nav-caret,
    .nav-dropdown.is-open .nav-caret {
      transform: rotate(180deg);
    }
    .dropdown-menu a {
      display: block;
      padding: 11px 18px;
      color: var(--text);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.3;
      white-space: nowrap;
    }
    .dropdown-menu a:hover,
    .dropdown-menu a:focus-visible {
      color: var(--rutgers-red);
      background: var(--light-red);
      outline: none;
    }
    @media (max-width: 1100px) {
      .main-nav-inner {
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow: visible;
      }
    }
    @media (max-width: 700px) {
      .main-nav {
        overflow: visible;
      }
      .main-nav-inner {
        width: 100%;
        display: block;
      }
      .nav-dropdown {
        display: block;
      }
      .nav-item,
      .nav-dropdown-toggle {
        display: block;
        width: 100%;
        padding: 14px 24px;
        text-align: left;
        border-bottom-width: 1px;
        border-bottom-color: var(--border);
      }
      .dropdown-menu {
        position: static;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        background: #fafafa;
      }
      .dropdown-menu a {
        padding-left: 40px;
        white-space: normal;
      }
    }
  /* =========================================================
   16. INNER-PAGE CONTENT
   Uses the template's existing colors, spacing and panels.
   ========================================================= */
    .page-content {
      padding-top: 26px;
      padding-bottom: 54px;
    }
    .breadcrumbs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 28px;
      color: var(--text-secondary);
      font-size: 14px;
    }
    .breadcrumbs a:hover,
    .breadcrumbs a:focus-visible {
      color: var(--rutgers-red);
      text-decoration: underline;
    }
    .breadcrumbs strong {
      color: var(--text);
    }
    .page-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
      gap: 42px;
      align-items: center;
      padding: 42px;
      margin-bottom: 38px;
      color: var(--white);
      background: var(--darkgray);
      border-radius: 9px;
      box-shadow: var(--shadow);
    }
    .page-intro h1 {
      margin: 0 0 18px;
      font-size: clamp(38px, 4vw, 56px);
      line-height: 1.05;
      letter-spacing: -1px;
    }
    .intro-copy {
      max-width: 800px;
      margin: 0;
      color: rgba(255, 255, 255, 0.9);
      font-size: 18px;
      line-height: 1.65;
    }
    .question-card {
      padding: 27px;
      color: var(--text);
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
    }
    .question-card h2 {
      margin: 0 0 10px;
      font-size: 21px;
      line-height: 1.25;
    }
    .question-card p {
      margin: 0 0 20px;
      color: var(--text-secondary);
      line-height: 1.55;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 11px 18px;
      color: var(--white);
      background: var(--rutgers-red);
      border: 2px solid var(--rutgers-red);
      border-radius: 4px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      transition: background 0.18s ease, border-color 0.18s ease;
    }
    .button:hover,
    .button:focus-visible {
      background: var(--rutgers-red-dark);
      border-color: var(--rutgers-red-dark);
      outline: none;
    }
    .section {
      margin-bottom: 38px;
    }
    .section-title {
      margin: 0 0 20px;
      padding-bottom: 11px;
      font-size: 27px;
      line-height: 1.2;
      border-bottom: 3px solid var(--rutgers-red);
    }
    .about-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
    }
    .info-card {
      min-height: 220px;
      padding: 23px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }
    .info-icon,
    .related-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      margin-bottom: 17px;
      color: var(--rutgers-red);
      background: var(--light-red);
      border-radius: 50%;
      font-size: 23px;
      font-weight: 700;
    }
    .info-card h3 {
      margin: 0 0 9px;
      font-size: 18px;
    }
    .info-card p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
    }
    .info-card a {
      display: inline-block;
      margin-top: 13px;
      color: var(--rutgers-red);
      font-size: 14px;
      font-weight: 700;
    }
    .reports-panel,
    .contents-panel,
    .page-content .panel {
      padding: 30px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }
    .reports-panel > h2,
    .contents-panel > h2,
    .page-content .panel > h2 {
      margin: 0 0 9px;
      font-size: 24px;
    }
    .reports-panel > p {
      margin: 0 0 22px;
      color: var(--text-secondary);
      line-height: 1.55;
    }
    .table-wrap {
      overflow-x: auto;
      margin-top: 20px;
      border: 1px solid var(--border);
      border-radius: 6px;
    }
    .table-wrap table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      background: var(--white);
    }
    .table-wrap th,
    .table-wrap td {
      padding: 16px 18px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--border);
    }
    .table-wrap th {
      color: var(--white);
      background: var(--dark-blue);
      font-size: 14px;
    }
    .table-wrap tbody tr:last-child td {
      border-bottom: 0;
    }
    .table-wrap tbody tr:hover {
      background: #fbfcfd;
    }
    .year-cell {
      font-weight: 700;
      white-space: nowrap;
    }
    .recent-badge {
      display: block;
      width: max-content;
      margin-top: 7px;
      padding: 4px 8px;
      color: var(--rutgers-red-dark);
      background: var(--light-red);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }
    .pdf-link {
      display: inline-block;
      color: var(--navy);
      font-weight: 800;
      text-decoration: none;
      text-underline-offset: 3px;
    }
    .posted-date {
      display: block;
      margin-top: 2px;
      color: #778390;
      font-size: 0.71rem;
      font-weight: 500;
    }
    .more-years,
    .faq-link {
      display: inline-block;
      margin-top: 20px;
      color: var(--rutgers-red);
      font-weight: 700;
    }
    .contents-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }
    .contents-item {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 68px;
      padding: 13px;
      background: var(--background);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
    }
    .section-letter {
      display: flex;
      flex: 0 0 35px;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      color: var(--white);
      background: var(--rutgers-red);
      border-radius: 50%;
      font-weight: 700;
    }
    .two-column {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin-bottom: 38px;
    }
    .page-content details {
      border-top: 1px solid var(--border);
    }
    .page-content details:last-of-type {
      border-bottom: 1px solid var(--border);
    }
    .page-content summary {
      position: relative;
      list-style: none;
      padding: 15px 2px;
      color: #2b394c;
      font-size: 0.87rem;
      font-weight: 600;
      line-height: 1.4;
      cursor: pointer;
    }
    .page-content details p {
      margin: -4px 0 16px;
      padding: 0 24px 18px 0;
      color: #5b6877;
      font-size: 0.83rem;
      line-height: 1.6;
    }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .related-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      min-height: 125px;
      padding: 18px;
      background: var(--background);
      border: 1px solid var(--border);
      border-radius: 7px;
      transition: transform 0.18s ease, border-color 0.18s ease;
    }
    .related-card:hover,
    .related-card:focus-visible {
      transform: translateY(-2px);
      border-color: var(--rutgers-red);
      outline: none;
    }
    .related-card.wide {
      grid-column: 1 / -1;
    }
    .related-icon {
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      margin: 0;
      font-size: 20px;
    }
    .related-card strong,
    .related-card span {
      display: block;
    }
    .related-card strong {
      margin-bottom: 6px;
      font-size: 15px;
    }
    .related-card span {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.45;
    }
    .support-callout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 30px;
      color: var(--white);
      background: var(--dark-blue);
      border-radius: 8px;
    }
    .support-callout h2 {
      margin: 0 0 7px;
      font-size: 24px;
    }
    .support-callout p {
      margin: 0;
      color: rgba(255, 255, 255, 0.82);
      line-height: 1.5;
    }
    @media (max-width: 1100px) {
      .about-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .contents-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .two-column {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 800px) {
      .page-intro {
        grid-template-columns: 1fr;
        padding: 30px;
      }
      .about-grid,
      .contents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      .page-content {
        padding-top: 18px;
      }
      .page-intro,
      .reports-panel,
      .contents-panel,
      .page-content .panel,
      .support-callout {
        padding: 22px;
      }
      .about-grid,
      .contents-grid,
      .related-grid {
        grid-template-columns: 1fr;
      }
      .related-card.wide {
        grid-column: auto;
      }
      .support-callout {
        align-items: flex-start;
        flex-direction: column;
      }
    }
    /* =========================================================
       17. COMMON DATA SET PAGE STYLES
       Supplied body-class definitions, adapted only to reuse the
       fixed template's existing color variables.
       ========================================================= */
    .page-content .breadcrumbs {
      margin: 26px 0 22px;
      color: #7b8794;
      font-size: 0.8rem;
    }
    .page-content .breadcrumbs a {
      color: #5f6c7b;
      text-decoration: none;
    }
    .page-content .breadcrumbs span {
      margin: 0 8px;
      color: #abb3bc;
    }
    .page-content .breadcrumbs strong {
      color: var(--rutgers-red);
      font-weight: 700;
    }
    .page-content .page-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 34px;
      align-items: start;
      margin-bottom: 42px;
      padding: 0;
      color: var(--text);
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }
    .page-content .page-intro h1 {
      margin: 0 0 14px;
      color: var(--navy);
      font-size: clamp(2.3rem, 4vw, 3.7rem);
      line-height: 1.03;
      letter-spacing: -0.04em;
    }
    .page-content .intro-copy {
      max-width: 930px;
      margin: 0;
      color: #344253;
      font-size: 1.02rem;
      line-height: 1.72;
    }
    .page-content .question-card {
      padding: 24px;
      color: var(--text);
      background: #f2f5f9;
      border: 1px solid #ebeff3;
      border-radius: 12px;
      box-shadow: none;
    }
    .page-content .question-card h2 {
      margin: 0 0 8px;
      color: var(--navy);
      font-size: 1.05rem;
    }
    .page-content .question-card p {
      margin: 0 0 18px;
      color: #4e5b69;
      font-size: 0.9rem;
    }
    .page-content .button {
      min-height: 44px;
      padding: 0 18px;
      gap: 8px;
      border-radius: 7px;
      font-size: 0.86rem;
    }
    .page-content .section {
      margin-bottom: 46px;
    }
    .page-content .section-title {
      margin: 0 0 18px;
      padding: 0;
      color: var(--navy);
      font-size: 1.35rem;
      line-height: 1.2;
      border: 0;
    }
    .page-content .about-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
    }
    .page-content .info-card {
      min-height: 190px;
      padding: 22px;
      border-radius: 12px;
    }
    .page-content .info-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 18px;
      display: grid;
      place-items: center;
      background: #f0f4f8;
      font-size: 1.35rem;
    }
    .page-content .info-card h3 {
      margin: 0 0 8px;
      color: var(--navy);
      font-size: 0.98rem;
    }
    .page-content .info-card p {
      color: #4f5c6b;
      font-size: 0.87rem;
    }
    .page-content .info-card a {
      margin-top: 10px;
      font-size: 0.82rem;
      text-decoration: none;
    }
    .page-content .reports-panel,
    .page-content .contents-panel,
    .page-content .panel {
      padding: 26px;
      border-radius: 12px;
    }
    .page-content .reports-panel h2 {
      margin: 0 0 5px;
      color: var(--navy);
      font-size: 1.22rem;
    }
    .page-content .reports-panel > p {
      margin: 0 0 20px;
      color: #5a6776;
      font-size: 0.88rem;
    }
    .page-content .table-wrap {
      margin-top: 0;
      border: 0;
      border-radius: 0;
    }
    .page-content .table-wrap table {
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.84rem;
    }
    .page-content .table-wrap th,
    .page-content .table-wrap td {
      padding: 14px 16px;
      color: var(--text);
      background: var(--white);
      border-top: 0;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .page-content .table-wrap th:first-child,
    .page-content .table-wrap td:first-child {
      border-left: 1px solid var(--border);
    }
    .page-content .table-wrap thead th {
      color: #263447;
      background: #f7f9fa;
      border-top: 1px solid var(--border);
      font-weight: 800;
    }
    .page-content .table-wrap thead th:first-child {
      border-top-left-radius: 8px;
    }
    .page-content .table-wrap thead th:last-child {
      border-top-right-radius: 8px;
    }
    .page-content .year-cell {
      color: var(--navy);
      font-weight: 800;
    }
    .page-content .recent-badge {
      display: inline-block;
      width: auto;
      margin: 0 0 0 8px;
      padding: 3px 8px;
      color: #317a3d;
      background: #eaf7ec;
      font-size: 0.66rem;
      vertical-align: middle;
    }
    .page-content .pdf-link {
      color: var(--navy);
      text-decoration: none;
    }
    .page-content .pdf-link::before {
      content: "?";
      margin-right: 8px;
      color: var(--rutgers-red);
    }
    .page-content .posted-date {
      margin-top: 2px;
      color: #778390;
      font-size: 0.71rem;
      font-weight: 500;
    }
    .page-content .more-years,
    .page-content .faq-link {
      margin-top: 14px;
      color: var(--rutgers-red);
      font-size: 0.82rem;
      text-decoration: none;
    }
    .page-content .contents-panel {
      padding: 24px;
    }
    .page-content .contents-panel h2 {
      margin: 0 0 16px;
      color: var(--navy);
      font-size: 1.18rem;
    }
    .page-content .contents-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 0;
    }
    .page-content .contents-item {
      min-height: 64px;
      padding: 12px 14px;
      background: var(--white);
      border-radius: 8px;
    }
    .page-content .section-letter {
      flex-basis: 28px;
      width: 28px;
      height: 28px;
      color: var(--rutgers-red);
      background: transparent;
      border: 1px solid #f1a4b7;
      border-radius: 5px;
      font-size: 0.76rem;
    }
    .page-content .contents-item span:last-child {
      color: #344253;
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.3;
    }
    .page-content .two-column {
      grid-template-columns: 1fr 1.15fr;
      gap: 24px;
      margin-bottom: 34px;
    }
    .page-content .panel {
      padding: 24px;
    }
    .page-content .panel > h2 {
      margin: 0 0 14px;
      color: var(--navy);
      font-size: 1.15rem;
    }
    .page-content summary::-webkit-details-marker {
      display: none;
    }
    .page-content summary::after {
      content: "?";
      float: right;
      color: var(--navy);
      font-size: 1.05rem;
    }
    .page-content details[open] summary::after {
      content: "^";
    }
    .page-content .related-grid {
      gap: 14px;
    }
    .page-content .related-card {
      min-height: 116px;
      padding: 16px;
      border-radius: 9px;
      background: var(--white);
      transform: none;
    }
    .page-content .related-icon {
      border-radius: 7px;
      background: #f1f5f9;
      color: var(--navy);
    }
    .page-content .related-card strong {
      color: var(--navy);
      font-size: 0.86rem;
    }
    .page-content .related-card span {
      margin-top: 4px;
      color: #677382;
      font-size: 0.75rem;
    }
   
    @media (max-width: 1100px) {
      .page-content .page-intro {
        grid-template-columns: 1fr;
      }
      .page-content .question-card {
        max-width: 520px;
      }
      .page-content .about-grid,
      .page-content .contents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .page-content .two-column {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 760px) {
      .page-content .about-grid,
      .page-content .contents-grid,
      .page-content .related-grid {
        grid-template-columns: 1fr;
      }
      .page-content .related-card.wide {
        grid-column: auto;
      }
      .page-content .support-callout {
        grid-template-columns: 1fr;
      }
    }
    .dashboard-section {
      padding: 0 0 16px;
    }
    .dashboard-frame {
      min-height: 520px;
      padding: 24px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    
    .dashboard-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .outline-button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid var(--rutgers-red);
      border-radius: 7px;
      color: var(--rutgers-red);
      background: var(--white);
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }
    .info-button {
      border: 0;
      background: transparent;
      color: var(--navy);
      font-size: 1.2rem;
      cursor: pointer;
    }
    /*
      DEMO DASHBOARD CONTENT
      Remove these rules if you're using an iframe/embed.
    */
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-bottom: 30px;
    }
    .metric {
      padding: 12px 20px;
      text-align: center;
      border-right: 1px solid var(--border);
    }
    .metric:last-child {
      border-right: 0;
    }
    .metric-value {
      color: var(--navy);
      font-size: 1.75rem;
      font-weight: 700;
    }
    .metric-label {
      margin-top: 2px;
      font-size: 0.8rem;
      color: var(--muted);
    }
    .chart-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
	  
	 .chart-grid.single-chart {
	  display: flex;
	  justify-content: center;
	  width: 100%;
	} 
	  
    .placeholder-chart {
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      background:
        linear-gradient(
          180deg,
          rgba(204,0,51,.03),
          rgba(20,33,61,.02)
        );
    }
    .placeholder-chart span {
      color: var(--muted);
      font-size: 0.9rem;
    }
	.panel h2 {
      margin: 0 0 14px;
      color: var(--navy);
      font-size: 1.15rem;
    }
    details {
      border-top: 1px solid var(--line);
    }
    details:last-of-type {
      border-bottom: 1px solid var(--line);
    }
    summary {
      list-style: none;
      padding: 15px 2px;
      color: #2b394c;
      font-size: 0.87rem;
      font-weight: 600;
      cursor: pointer;
    }
    summary::-webkit-details-marker {
      display: none;
    }
    summary::after {
      content: "?";
      float: right;
      color: var(--navy);
      font-size: 1.05rem;
    }
    details[open] summary::after {
      content: "^";
    }
    details p {
      margin: -4px 0 16px;
      padding-right: 24px;
      color: #5b6877;
      font-size: 0.83rem;
    }
    .related-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .related-card {
      min-height: 116px;
      padding: 16px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: white;
      text-decoration: none;
    }
    .related-card:hover,
    .related-card:focus-visible {
      border-color: var(--rutgers-red);
    }
    .related-icon {
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      background: #f1f5f9;
      color: var(--navy);
    }
    .related-card strong {
      display: block;
      color: var(--navy);
      font-size: 0.86rem;
    }
    .related-card span {
      display: block;
      margin-top: 4px;
      color: #677382;
      font-size: 0.75rem;
      line-height: 1.45;
    }
    /* =========================================================
       6. DEFINITIONS & METHODOLOGY
       ========================================================= */
    .definitions-section {
      margin-top: 16px;
      padding: 24px;
    }
    .definition-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .definition-card {
      min-height: 180px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: 7px;
      display: flex;
      flex-direction: column;
    }
    .definition-card h3 {
      margin: 0 0 12px;
      font-size: 1rem;
      color: var(--navy);
    }
    .definition-card p {
      margin: 0 0 16px;
      font-size: 0.86rem;
      color: #344054;
    }
    .definition-card a {
      margin-top: auto;
      color: var(--rutgers-red);
      font-size: 0.8rem;
      font-weight: 700;
    }
    /* =========================================================
       7. TWO-COLUMN RESOURCE ROW
       Left: secured/authenticated analytics
       Right: related public/reference resources
       ========================================================= */
    .resource-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }
    .resource-panel {
      padding: 22px;
    }
    .resource-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .resource-item {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .resource-item:last-child {
      border-bottom: 0;
    }
    .resource-thumbnail {
      width: 72px;
      height: 48px;
      object-fit: cover;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: #eef1f5;
    }
    .resource-text strong {
      display: block;
      margin-bottom: 2px;
      color: var(--navy);
      font-size: 0.88rem;
    }
    .resource-text span {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
    }
    .resource-arrow {
      color: var(--rutgers-red);
      font-size: 1.2rem;
    }
    .resource-panel-footer {
      margin-top: 14px;
      text-align: center;
    }
    /*
      Related resources use a smaller icon instead of a screenshot.
    */
    .reference-item {
      grid-template-columns: 38px 1fr auto;
    }
    .reference-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--rutgers-red);
      background: var(--light-red);
      border-radius: 6px;
      font-weight: 700;
    }
    /* =========================================================
       8. FAQ + RELATED TOPICS ROW
       ========================================================= */
    .lower-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin: 18px 0;
    }
    .faq-panel,
    .related-topics-panel {
      padding: 22px;
    }
	  
	.faq-full-width {
	  grid-template-columns: 1fr;
	  width: 100%;
	}

	.faq-full-width .panel {
	  width: 100%;
	}
	  
    /* =========================================================
       9. COLLAPSIBLE FAQ ACCORDION
       ========================================================= */
    .faq-list {
      border-top: 1px solid var(--border);
    }
    .faq-item {
      border-bottom: 1px solid var(--border);
    }
    .faq-question {
      width: 100%;
      padding: 13px 4px;
      border: 0;
      background: transparent;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      text-align: left;
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--navy);
      cursor: pointer;
    }
    .faq-chevron {
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
    }
    .faq-answer {
      display: none;
      padding: 0 28px 14px 4px;
      color: #475467;
      font-size: 0.82rem;
    }
    .faq-item.open .faq-answer {
      display: block;
    }
   
    /* =========================================================
       11. CONTEXTUAL DASHBOARD QUESTIONS / ISSUE BANNER
       ========================================================= */
	  
    
	  
    .survey-shell {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: white;
      box-shadow: var(--shadow);
    }
	  
    .survey-tabs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border-bottom: 1px solid var(--line);
      background: white;
    }
	  
    .survey-tab {
      position: relative;
      padding: 18px 12px;
      text-align: center;
      color: #2c3846;
      font-size: 0.87rem;
      font-weight: 600;
      border-right: 1px solid #eef1f4;
      cursor: pointer;
    }
	  
    .survey-tab:last-child {
      border-right: 0;
    }
	  
    .survey-tab.active {
      color: var(--navy);
      font-weight: 800;
    }
	  
    .survey-tab.active::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 0;
      height: 3px;
      background: var(--rutgers-red);
    }
	  
    .survey-content {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
    }
	  
    .survey-description {
      padding: 28px;
      border-right: 1px solid var(--line);
      background: #fbfcfd;
    }
	  
    .survey-description h3 {
      margin: 0 0 10px;
      color: var(--navy);
      font-size: 1rem;
    }
	  
    .survey-description p {
      margin: 0 0 18px;
      color: #465464;
      font-size: 0.89rem;
    }
	  
    .topics-label {
      padding-top: 16px;
      border-top: 1px solid var(--line);
      color: var(--navy);
      font-size: 0.82rem;
      font-weight: 800;
    }
	  
    .topics-list {
      list-style: none;
      margin: 10px 0 20px;
      padding: 0;
      display: grid;
      gap: 8px;
      color: #435163;
      font-size: 0.85rem;
    }
	  
    .topics-list li::before {
      content: "?";
      margin-right: 9px;
      color: var(--rutgers-red);
      font-weight: 800;
    }
	  
    .report-area {
      padding: 28px;
    }
	  
    .report-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
    }
	  
    .report-heading h3 {
      margin: 0 0 4px;
      color: var(--navy);
      font-size: 1rem;
    }
	  
    .report-heading p {
      margin: 0;
      color: #5b6877;
      font-size: 0.85rem;
    }
	  
    .legend {
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: #536171;
      font-size: 0.76rem;
      white-space: nowrap;
    }
	  
    table {
      width: 100%;
      min-width: 760px;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.83rem;
    }
	  
    th,
    td {
      padding: 14px 16px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
    }
	  
    th:first-child,
    td:first-child {
      border-left: 1px solid var(--line);
    }
    thead th {
      border-top: 1px solid var(--line);
      background: #f7f9fa;
      color: #263447;
      font-weight: 800;
    }
	  
    thead th:first-child {
      border-top-left-radius: 8px;
    }
	  
    thead th:last-child {
      border-top-right-radius: 8px;
    }
	  
    tbody tr:last-child td:first-child {
      border-bottom-left-radius: 8px;
    }
	  
    tbody tr:last-child td:last-child {
      border-bottom-right-radius: 8px;
    }
	  
    .pdf-link::before {
      content: "?";
      margin-right: 8px;
      color: var(--rutgers-red);
    }
	  
    .more-years {
      display: inline-block;
      margin-top: 14px;
      color: var(--navy);
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
    }
	  
    /* Page-specific CDS banner treatment. I need to find out
	  where this is being controlled for other pages */
    .page-content .page-intro.cds-blue-intro {
      align-items: center;
      padding: 42px;
      color: var(--white);
      background: var(--darkgray);
      border-radius: 9px;
      box-shadow: var(--shadow);
    }
    .page-content .page-intro.cds-blue-intro h1,
    .page-content .page-intro.cds-blue-intro .intro-copy {
      color: var(--white);
    }
    .page-content .page-intro.cds-blue-intro .question-card {
      color: var(--text);
      background: var(--white);
      border-color: var(--white);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }
    @media (max-width: 760px) {
      .page-content .page-intro.cds-blue-intro {
        padding: 28px;
      }
    }
	  
	  
/*Dashboard images*/
  .chart-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
	  
.topic-chart-image {
  display: block;
  width: 100%;
  max-width: 1366px;
  aspect-ratio: 1366 / 768;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
	  
	  
  /* =========================================================
   DATA BY TOPIC LANDING PAGE
   ========================================================= */

	.topic-landing {
	  padding: 30px 0 58px;
	}

	.topic-hero {
	  display: grid;
	  grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
	  gap: 36px;
	  align-items: center;
	  padding: 42px;
	  margin-bottom: 34px;
	  color: var(--white);
	  background: var(--darkgray);
	  border-radius: 9px;
	  box-shadow: var(--shadow);
	}

	.topic-hero h1 {
	  margin: 0 0 14px;
	  font-size: clamp(40px, 4vw, 58px);
	  line-height: 1.03;
	  letter-spacing: -0.04em;
	}

	.topic-hero p {
	  max-width: 820px;
	  margin: 0;
	  color: rgba(255, 255, 255, 0.9);
	  font-size: 18px;
	  line-height: 1.65;
	}

	.topic-hero-side {
	  padding: 23px 25px;
	  color: var(--text);
	  background: var(--white);
	  border-radius: 8px;
	  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	}

	.topic-hero-side strong {
	  display: block;
	  margin-bottom: 7px;
	  color: var(--navy);
	  font-size: 16px;
	}

	.topic-hero-side span {
	  display: block;
	  color: var(--text-secondary);
	  font-size: 14px;
	  line-height: 1.5;
	}

	.topic-section-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: end;
	  gap: 24px;
	  margin-bottom: 20px;
	}

	.topic-section-header h2 {
	  margin: 0 0 6px;
	  color: var(--navy);
	  font-size: 27px;
	}

	.topic-section-header p {
	  max-width: 760px;
	  margin: 0;
	  color: var(--text-secondary);
	  font-size: 15px;
	  line-height: 1.55;
	}

	.topic-grid {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 22px;
	}

	.topic-card {
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	  min-width: 0;
	  background: var(--white);
	  border: 1px solid var(--border);
	  border-radius: 10px;
	  box-shadow: var(--shadow);
	  transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
	}

	.topic-card:hover,
	.topic-card:focus-within {
	  transform: translateY(-3px);
	  border-color: #d2d7de;
	  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.1);
	}

	/* Dashboard screenshot placeholder */
	.topic-preview {
	  aspect-ratio: 16 / 9;
	  display: grid;
	  place-items: center;
	  padding: 24px;
	  background:
		linear-gradient(
		  135deg,
		  rgba(23, 50, 77, 0.05),
		  rgba(204, 0, 51, 0.045)
		),
		#f7f9fb;
	  border-bottom: 1px solid var(--border);
	}

	.topic-preview-inner {
	  text-align: center;
	  color: #667485;
	}

	.topic-preview-icon {
	  display: grid;
	  place-items: center;
	  width: 54px;
	  height: 54px;
	  margin: 0 auto 12px;
	  color: var(--rutgers-red);
	  background: var(--light-red);
	  border-radius: 50%;
	  font-size: 25px;
	}

	.topic-preview-inner strong {
	  display: block;
	  margin-bottom: 4px;
	  color: #344253;
	  font-size: 14px;
	}

	.topic-preview-inner span:last-child {
	  display: block;
	  font-size: 12px;
	  line-height: 1.4;
	}

	/* Use this class once a real screenshot replaces the placeholder */
	.topic-preview-image {
	  display: block;
	  width: 100%;
	  aspect-ratio: 16 / 9;
	  object-fit: cover;
	  object-position: top;
	  border-bottom: 1px solid var(--border);
	}

	.topic-card-content {
	  display: flex;
	  flex: 1;
	  flex-direction: column;
	  padding: 23px 24px 25px;
	}
	  
	.topic-card h3 {
	  margin: 0 0 9px;
	  color: var(--navy);
	  font-size: 21px;
	  line-height: 1.2;
	}

	.topic-card p {
	  margin: 0 0 20px;
	  color: var(--text-secondary);
	  font-size: 14px;
	  line-height: 1.6;
	}

	.topic-card-link {
	  display: inline-flex;
	  align-items: center;
	  gap: 7px;
	  width: max-content;
	  margin-top: auto;
	  color: var(--rutgers-red);
	  font-size: 14px;
	  font-weight: 800;
	}

	.topic-card-link:hover,
	.topic-card-link:focus-visible {
	  color: var(--rutgers-red-dark);
	  text-decoration: underline;
	  text-underline-offset: 3px;
	  outline: none;
	}

	.topic-help {
	  display: grid;
	  grid-template-columns: 1fr auto;
	  gap: 24px;
	  align-items: center;
	  margin-top: 28px;
	  padding: 24px 28px;
	  background: var(--light-red);
	  border: 1px solid #f1dce3;
	  border-radius: 10px;
	}

	.topic-help h2 {
	  margin: 0 0 5px;
	  color: var(--navy);
	  font-size: 19px;
	}

	.topic-help p {
	  margin: 0;
	  color: var(--text-secondary);
	  font-size: 14px;
	  line-height: 1.5;
	}

/* =========================================================
   DATA BY TOPIC RESPONSIVE DESIGN
   ========================================================= */

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

	  .topic-hero-side {
		max-width: 520px;
	  }
	}

	@media (max-width: 700px) {
	  .topic-landing {
		padding-top: 20px;
	  }

	  .topic-hero {
		padding: 28px;
	  }

	  .topic-grid {
		grid-template-columns: 1fr;
	  }

	  .topic-section-header {
		align-items: flex-start;
		flex-direction: column;
	  }

	  .topic-help {
		grid-template-columns: 1fr;
		align-items: flex-start;
	  }
	}

/* =========================================================
   ENROLLMENT DEFINITIONS + FAQ PANELS
   ========================================================= */

	.reference-panels {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 24px;
	  align-items: start;
	  margin-top: 28px;
	  margin-bottom: 48px;
	}

	.reference-panel {
	  padding: 26px 28px;
	  background: var(--white);
	  border: 1px solid var(--border);
	  border-radius: 10px;
	  box-shadow: var(--shadow);
	}

	.reference-panel-header {
	  margin-bottom: 18px;
	}

	.reference-panel-header h2 {
	  margin: 0 0 6px;
	  color: var(--navy);
	  font-size: 22px;
	}

	.reference-panel-header p {
	  margin: 0;
	  color: var(--text-secondary);
	  font-size: 14px;
	  line-height: 1.5;
	}

	.reference-accordion {
	  border-top: 1px solid var(--border);
	}

	.reference-item {
	  border-bottom: 1px solid var(--border);
	}

	.reference-item summary {
	  position: relative;
	  padding: 16px 34px 16px 2px;
	  color: var(--navy);
	  font-size: 14px;
	  font-weight: 700;
	  line-height: 1.4;
	  list-style: none;
	  cursor: pointer;
	}

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

	.reference-item summary::after {
	  content: "+";
	  position: absolute;
	  top: 50%;
	  right: 4px;
	  transform: translateY(-50%);
	  color: var(--rutgers-red);
	  font-size: 22px;
	  font-weight: 400;
	}

	.reference-item[open] summary::after {
	  content: "-";
	}

	.reference-item summary:hover,
	.reference-item summary:focus-visible {
	  color: var(--rutgers-red);
	  outline: none;
	}

	.reference-answer {
	  padding: 0 28px 18px 2px;
	  color: var(--text-secondary);
	  font-size: 13px;
	  line-height: 1.65;
	}

	.reference-answer p {
	  margin: 0 0 12px;
	}

	.reference-answer p:last-child {
	  margin-bottom: 0;
	}

	.reference-answer strong {
	  color: var(--text);
	}

	@media (max-width: 850px) {
	  .reference-panels {
		grid-template-columns: 1fr;
	  }
	}

	@media (max-width: 560px) {
	  .reference-panel {
		padding: 22px;
	  }
	}

/* =========================================================
   STAFF DIRECTORY PAGE
   ========================================================= */
    .staff-page {
      padding: 30px 0 58px;
    }
 
    .staff-intro {
      padding: 42px;
      margin-bottom: 32px;
      color: var(--white);
      background: var(--darkgray);
      border-radius: 9px;
      box-shadow: var(--shadow);
    }
    .staff-intro h1 {
      margin: 0 0 12px;
      font-size: clamp(40px, 4vw, 58px);
      line-height: 1.03;
      letter-spacing: -0.04em;
    }
    .staff-intro p {
      max-width: 760px;
      margin: 0;
      color: rgba(255, 255, 255, 0.9);
      font-size: 18px;
      line-height: 1.6;
    }

	 .staff-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, 250px);
	  gap: 22px;
	  justify-content: start;
	}
	  
    .staff-card {
      overflow: hidden;
      min-width: 0;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--shadow);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .staff-card:hover {
      transform: translateY(-3px);
      border-color: #d2d7de;
      box-shadow: 0 9px 24px rgba(0, 0, 0, 0.1);
    }
    .staff-photo-placeholder {
      aspect-ratio: 4 / 3;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        linear-gradient(135deg, rgba(23, 50, 77, 0.05), rgba(204, 0, 51, 0.04)),
        #f3f5f7;
      border-bottom: 1px solid var(--border);
      color: #778390;
      text-align: center;
    }
    .staff-photo-placeholder-inner {
      display: grid;
      justify-items: center;
      gap: 10px;
    }
    .staff-photo-placeholder-icon {
      position: relative;
      width: 58px;
      height: 58px;
      border: 2px solid #b8c0ca;
      border-radius: 50%;
    }
    .staff-photo-placeholder-icon::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 50%;
      width: 15px;
      height: 15px;
      transform: translateX(-50%);
      background: #b8c0ca;
      border-radius: 50%;
    }
    .staff-photo-placeholder-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 9px;
      width: 30px;
      height: 15px;
      transform: translateX(-50%);
      background: #b8c0ca;
      border-radius: 18px 18px 8px 8px;
    }
    .staff-photo-placeholder span {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .staff-photo {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      object-position: center top;
      border-bottom: 1px solid var(--border);
    }
    .staff-card-content {
      padding: 20px 21px 23px;
    }
    .staff-card h2 {
      margin: 0 0 7px;
      color: var(--navy);
      font-size: 19px;
      line-height: 1.25;
    }
	  
    .staff-title {
      margin: 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
    }
    
	  
    @media (max-width: 560px) {
      .staff-page {
        padding-top: 20px;
      }
      .staff-intro {
        padding: 28px;
      }
      .staff-grid {
        grid-template-columns: 1fr;
      }
    }
	  
	  
	
	/* =========================================================
   OUR OFFICE PAGE
   ========================================================= */

	.office-page {
	  padding: 30px 0 58px;
	}
	  
	.office-building-image {
	  display: block;
	  width: 100%;
	  height: 100%;
	  min-height: 320px;
	  object-fit: cover;
	  object-position: center;
	  border-radius: 8px;
	}


	/* =========================================================
	   INTRO
	   ========================================================= */

	.office-intro {
	  display: grid;
	  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
	  gap: 42px;
	  align-items: center;
	  padding: 42px;
	  margin-bottom: 44px;
	  color: var(--white);
	  background: var(--darkgray);
	  border-radius: 9px;
	  box-shadow: var(--shadow);
	}

	.office-intro h1 {
	  margin: 0 0 16px;
	  font-size: clamp(40px, 4vw, 58px);
	  line-height: 1.03;
	  letter-spacing: -0.04em;
	}

	.office-intro p {
	  max-width: 760px;
	  margin: 0;
	  color: rgba(255, 255, 255, 0.9);
	  font-size: 18px;
	  line-height: 1.65;
	}


	/* =========================================================
	   OFFICE IMAGE PLACEHOLDER
	   ========================================================= */

	.office-image-placeholder {
	  aspect-ratio: 4 / 3;
	  display: grid;
	  place-items: center;
	  padding: 30px;
	  color: #687585;
	  background: #f5f7f9;
	  border: 1px solid rgba(255,255,255,.4);
	  border-radius: 8px;
	}

	.office-image-placeholder-inner {
	  text-align: center;
	}

	.office-image-placeholder-icon {
	  display: block;
	  margin-bottom: 12px;
	  color: var(--rutgers-red);
	  font-size: 42px;
	}

	.office-image-placeholder strong {
	  display: block;
	  margin-bottom: 6px;
	  color: var(--navy);
	  font-size: 15px;
	}

	.office-image-placeholder span:last-child {
	  display: block;
	  max-width: 260px;
	  margin: 0 auto;
	  font-size: 12px;
	  line-height: 1.5;
	}


	/* =========================================================
	   SECTIONS
	   ========================================================= */

	.office-section {
	  margin-bottom: 46px;
	}

	.office-section-heading {
	  margin-bottom: 22px;
	}

	.office-section-heading h2 {
	  margin: 0 0 7px;
	  color: var(--navy);
	  font-size: 27px;
	}

	.office-section-heading p {
	  max-width: 760px;
	  margin: 0;
	  color: var(--text-secondary);
	  font-size: 15px;
	  line-height: 1.55;
	}


	/* =========================================================
	   ABOUT
	   ========================================================= */

	.office-about-grid {
	  display: grid;
	  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
	  gap: 26px;
	}

	.office-about-copy {
	  padding: 28px 30px;
	  background: var(--white);
	  border: 1px solid var(--border);
	  border-radius: 10px;
	  box-shadow: var(--shadow);
	}

	.office-about-copy p {
	  margin: 0 0 18px;
	  color: var(--text-secondary);
	  font-size: 15px;
	  line-height: 1.7;
	}

	.office-about-copy p:last-child {
	  margin-bottom: 0;
	}

	.office-highlight-card {
	  padding: 28px;
	  background: var(--light-red);
	  border: 1px solid #f1dce3;
	  border-radius: 10px;
	}

	.office-highlight-kicker {
	  display: block;
	  margin-bottom: 9px;
	  color: var(--rutgers-red);
	  font-size: 11px;
	  font-weight: 800;
	  letter-spacing: .08em;
	  text-transform: uppercase;
	}

	.office-highlight-card h3 {
	  margin: 0 0 12px;
	  color: var(--navy);
	  font-size: 21px;
	  line-height: 1.25;
	}

	.office-highlight-card p {
	  margin: 0;
	  color: var(--text-secondary);
	  font-size: 14px;
	  line-height: 1.65;
	}


	/* =========================================================
	   SERVICES
	   ========================================================= */

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

	.office-service-card {
	  min-height: 235px;
	  padding: 24px;
	  background: var(--white);
	  border: 1px solid var(--border);
	  border-radius: 10px;
	  box-shadow: var(--shadow);
	}

	.office-service-icon {
	  display: grid;
	  place-items: center;
	  width: 48px;
	  height: 48px;
	  margin-bottom: 18px;
	  color: var(--rutgers-red);
	  background: var(--light-red);
	  border-radius: 50%;
	  font-size: 22px;
	}

	.office-service-card h3 {
	  margin: 0 0 10px;
	  color: var(--navy);
	  font-size: 18px;
	}

	.office-service-card p {
	  margin: 0;
	  color: var(--text-secondary);
	  font-size: 14px;
	  line-height: 1.6;
	}


	/* =========================================================
	   PRINCIPLES
	   ========================================================= */

	.office-principles-grid {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 18px;
	}

	.office-principle {
	  display: grid;
	  grid-template-columns: 52px 1fr;
	  gap: 17px;
	  padding: 22px;
	  background: var(--white);
	  border: 1px solid var(--border);
	  border-radius: 9px;
	}

	.office-principle-number {
	  color: var(--rutgers-red);
	  font-size: 18px;
	  font-weight: 800;
	}

	.office-principle h3 {
	  margin: 0 0 7px;
	  color: var(--navy);
	  font-size: 17px;
	}

	.office-principle p {
	  margin: 0;
	  color: var(--text-secondary);
	  font-size: 14px;
	  line-height: 1.55;
	}


	/* =========================================================
	   CALL TO ACTION
	   ========================================================= */

	.office-callout {
	  display: grid;
	  grid-template-columns: 1fr auto;
	  gap: 24px;
	  align-items: center;
	  padding: 28px 30px;
	  background: var(--dark-blue);
	  border-radius: 10px;
	}

	.office-callout h2 {
	  margin: 0 0 6px;
	  color: var(--white);
	  font-size: 22px;
	}

	.office-callout p {
	  margin: 0;
	  color: rgba(255,255,255,.8);
	  font-size: 14px;
	  line-height: 1.5;
	}

	.office-callout-actions {
	  display: flex;
	  gap: 12px;
	  align-items: center;
	}

	.office-secondary-button {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  min-height: 44px;
	  padding: 11px 18px;
	  color: var(--white);
	  background: transparent;
	  border: 2px solid rgba(255,255,255,.55);
	  border-radius: 4px;
	  font-size: 14px;
	  font-weight: 700;
	}

	.office-secondary-button:hover,
	.office-secondary-button:focus-visible {
	  background: rgba(255,255,255,.1);
	  border-color: var(--white);
	  outline: none;
	}


	/* =========================================================
	   RESPONSIVE
	   ========================================================= */

	@media (max-width: 1050px) {

	  .office-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	  }

	}

	@media (max-width: 850px) {

	  .office-intro,
	  .office-about-grid {
		grid-template-columns: 1fr;
	  }

	  .office-image-placeholder {
		max-width: 520px;
	  }

	}

	@media (max-width: 650px) {

	  .office-intro {
		padding: 28px;
	  }

	  .office-services-grid,
	  .office-principles-grid {
		grid-template-columns: 1fr;
	  }

	  .office-callout {
		grid-template-columns: 1fr;
	  }

	  .office-callout-actions {
		align-items: stretch;
		flex-direction: column;
	  }

	}


	/* =========================================================
   IPEDS SURVEY NAVIGATION - LEFT-SIDE TAB DESIGN
   ========================================================= */


	/* ---------------------------------------------------------
	   OUTER SURVEY LAYOUT
	   --------------------------------------------------------- */

	.survey-layout {
	  display: grid;
	  grid-template-columns: 380px minmax(0, 1fr);

	  background: var(--white);
	  border: 1px solid var(--border);
	  border-radius: 12px;
	  box-shadow: var(--shadow);

	  overflow: hidden;
	}


	/* =========================================================
	   LEFT SIDEBAR
	   ========================================================= */

	.survey-sidebar {
	  padding: 24px;

	  background: #f7f8fa;
	  border-right: 1px solid var(--border);
	}


	/* Sidebar heading */

	.survey-sidebar-heading {
	  margin-bottom: 18px;
	}

	.survey-sidebar-heading h3 {
	  margin: 0 0 5px;

	  color: var(--navy);
	  font-size: 17px;
	  line-height: 1.2;
	}

	.survey-sidebar-heading p {
	  margin: 0;

	  color: var(--text-secondary);
	  font-size: 12px;
	  line-height: 1.5;
	}


	/* =========================================================
	   TWO-COLUMN TAB GRID
	   ========================================================= */

	.survey-sidebar .survey-tabs {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));

	  gap: 9px;

	  margin: 0;
	  padding: 0;

	  border: 0;
	  background: transparent;
	}


	/* Individual tab */

	.survey-sidebar .survey-tab {
	  appearance: none;

	  width: 100%;
	  min-width: 0;
	  min-height: 68px;

	  display: flex;
	  align-items: center;
	  justify-content: flex-start;

	  padding: 11px 12px;

	  color: var(--navy);
	  background: var(--white);

	  border: 1px solid var(--border);
	  border-radius: 7px;

	  font-family: inherit;
	  font-size: 12px;
	  font-weight: 700;
	  line-height: 1.25;
	  text-align: left;

	  cursor: pointer;

	  transition:
		color .18s ease,
		background-color .18s ease,
		border-color .18s ease,
		box-shadow .18s ease,
		transform .18s ease;
	}


	/* Hover */

	.survey-sidebar .survey-tab:hover {
	  color: var(--rutgers-red);

	  border-color: rgba(204, 0, 51, .6);

	  box-shadow:
		0 2px 7px rgba(0, 0, 0, .05);
	}


	/* Active / selected */

	.survey-sidebar .survey-tab.active,
	.survey-sidebar .survey-tab[aria-selected="true"] {
	  color: var(--white);

	  background: var(--rutgers-red);
	  border-color: var(--rutgers-red);

	  box-shadow:
		0 3px 9px rgba(204, 0, 51, .18);
	}


	/* Keyboard focus */

	.survey-sidebar .survey-tab:focus-visible {
	  outline: 3px solid rgba(204, 0, 51, .20);
	  outline-offset: 2px;
	}


	/* =========================================================
	   RIGHT PANEL
	   ========================================================= */

	.survey-panels {
	  min-width: 0;

	  padding: 27px 28px 30px;

	  background: var(--white);
	}


	.survey-panel {
	  min-width: 0;
	}


	/* =========================================================
	   SELECTED SURVEY CONTENT
	   ========================================================= */

	.survey-panel .survey-content {
	  display: grid;

	  grid-template-columns:
		minmax(190px, 220px)
		minmax(0, 1fr);

	  gap: 26px;

	  align-items: start;

	  padding: 0;
	}


	/* =========================================================
	   SURVEY DESCRIPTION
	   ========================================================= */

	.survey-panel .survey-description {
	  min-width: 0;
	}


	.survey-panel .survey-description h3 {
	  margin: 0 0 11px;

	  color: var(--navy);

	  font-size: 16px;
	  line-height: 1.15;
	}


	.survey-panel .survey-description p {
	  margin: 0 0 22px;

	  color: var(--text-secondary);

	  font-size: 13px;
	  line-height: 1.5;
	}


	/* Topics */

	.survey-panel .topics-label {
	  margin-bottom: 9px;

	  color: var(--navy);

	  font-size: 13px;
	  font-weight: 700;
	}


	.survey-panel .topics-list {
	  margin: 0 0 22px;
	  padding: 0;

	  list-style: none;
	}


	.survey-panel .topics-list li {
	  position: relative;

	  margin-bottom: 8px;
	  padding-left: 20px;

	  color: var(--text-secondary);

	  font-size: 12px;
	  line-height: 1.35;
	}


	.survey-panel .topics-list li::before {
	  content: "?";

	  position: absolute;
	  left: 0;
	  top: 0;

	  color: var(--rutgers-red);

	  font-size: 14px;
	  font-weight: 700;
	}


	/* =========================================================
	   REPORT AREA
	   ========================================================= */

	.survey-panel .report-area {
	  min-width: 0;
	}


	.survey-panel .report-heading {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;

	  gap: 20px;

	  margin-bottom: 18px;
	}


	.survey-panel .report-heading h3 {
	  margin: 0 0 3px;

	  color: var(--navy);

	  font-size: 16px;
	  line-height: 1.3;
	}


	.survey-panel .report-heading p {
	  margin: 0;

	  color: var(--text-secondary);

	  font-size: 12px;
	  line-height: 1.4;
	}


	.survey-panel .legend {
	  flex: 0 0 auto;

	  padding-top: 3px;

	  color: var(--text-secondary);

	  font-size: 11px;
	}


	/* =========================================================
	   REPORT TABLE
	   ========================================================= */

	.survey-panel .table-wrap {
	  width: 100%;

	  overflow-x: auto;

	  border: 1px solid var(--border);
	  border-radius: 8px;
	}


	.survey-panel .table-wrap table {
	  width: 100%;
	  min-width: 720px;
	  border-collapse: collapse;
	  table-layout: fixed;
	}

	/* Collection year */
	.survey-panel .table-wrap th:nth-child(1),
	.survey-panel .table-wrap td:nth-child(1) {
	  width: 19%;
	}

	/* Three campus columns */
	.survey-panel .table-wrap th:nth-child(2),
	.survey-panel .table-wrap td:nth-child(2),
	.survey-panel .table-wrap th:nth-child(3),
	.survey-panel .table-wrap td:nth-child(3),
	.survey-panel .table-wrap th:nth-child(4),
	.survey-panel .table-wrap td:nth-child(4) {
	  width: 27%;
	}


	.survey-panel .table-wrap th {
	  padding: 16px 14px;

	  color: var(--white);
	  background: var(--dark-blue);

	  font-size: 12px;
	  font-weight: 700;
	  text-align: left;
	}


	.survey-panel .table-wrap td {
	  padding: 16px 14px;

	  vertical-align: top;

	  background: var(--white);
	  border-bottom: 1px solid var(--border);

	  font-size: 12px;
	}


	.survey-panel .table-wrap tbody tr:last-child td {
	  border-bottom: 0;
	}


	/* PDF link */

	.survey-panel .pdf-link {
	  display: inline-block;

	  color: var(--navy);

	  font-size: 12px;
	  font-weight: 700;
	}


	.survey-panel .pdf-link::before {
	  content: "?";

	  margin-right: 7px;

	  color: var(--rutgers-red);

	  font-size: 11px;
	}


	.survey-panel .pdf-link:hover {
	  color: var(--rutgers-red);
	}


	/* Posted date */

	.survey-panel .posted-date {
	  display: block;

	  margin-top: 3px;

	  color: var(--text-secondary);

	  font-size: 10px;
	}


	/* =========================================================
	   EMPTY / FUTURE SURVEY PANELS
	   ========================================================= */

	.survey-placeholder-content {
	  min-height: 365px;

	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  justify-content: center;

	  padding: 36px 40px;

	  background: #fafbfc;

	  border: 1px solid var(--border);
	  border-radius: 9px;
	}


	.survey-placeholder-content h3 {
	  margin: 0 0 9px;

	  color: var(--navy);

	  font-size: 21px;
	}


	.survey-placeholder-content p {
	  max-width: 570px;

	  margin: 0 0 22px;

	  color: var(--text-secondary);

	  font-size: 14px;
	  line-height: 1.6;
	}


	/* =========================================================
	   RESPONSIVE
	   ========================================================= */

	@media (max-width: 1200px) {

	  .survey-layout {
		grid-template-columns: 320px minmax(0, 1fr);
	  }

	  .survey-sidebar {
		padding: 20px;
	  }

	  .survey-sidebar .survey-tab {
		min-height: 72px;
		padding: 10px;
		font-size: 11px;
	  }

	  .survey-panel .survey-content {
		grid-template-columns: 1fr;
	  }

	}


	/* Stack sidebar over report area */

	@media (max-width: 850px) {

	  .survey-layout {
		grid-template-columns: 1fr;
	  }

	  .survey-sidebar {
		border-right: 0;
		border-bottom: 1px solid var(--border);
	  }

	  .survey-sidebar .survey-tabs {
		grid-template-columns:
		  repeat(3, minmax(0, 1fr));
	  }

	  .survey-panels {
		padding: 24px;
	  }

	}


	/* Two tabs per row */

	@media (max-width: 650px) {

	  .survey-sidebar .survey-tabs {
		grid-template-columns:
		  repeat(2, minmax(0, 1fr));
	  }

	}


	/* One tab per row */

	@media (max-width: 430px) {

	  .survey-sidebar .survey-tabs {
		grid-template-columns: 1fr;
	  }

	  .survey-sidebar .survey-tab {
		min-height: 50px;
	  }
 
	  .survey-panels {
		padding: 18px;
	  }

	}

	.info-icon {
	  width: 46px;
	  height: 46px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-bottom: 16px;
	  border-radius: 50%;
	  background: var(--light-red);
	  color: var(--rutgers-red);
	  flex: 0 0 46px;
	}

	.info-icon svg {
	  width: 22px;
	  height: 22px;
	  display: block;
	  fill: none;
	  stroke: currentColor;
	  stroke-width: 1.8;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	}

	  
	  /* =========================================================
	   REPORT TABLE
	   ========================================================= */

	.reports-panel .table-wrap {
	  width: 100%;
	  margin-top: 20px;
	  overflow-x: auto;
	  border: 1px solid var(--border);
	  border-radius: 10px;
	  background: var(--white);
	}

	.reports-panel .table-wrap table {
	  width: 100%;
	  min-width: 760px;
	  border-collapse: collapse;
	  background: var(--white);
	}


	/* Header */

	.reports-panel .table-wrap thead th {
	  padding: 15px 18px;
	  color: var(--white);
	  background: var(--dark-blue);
	  border: 0;
	  border-right: 1px solid rgba(255, 255, 255, 0.12);
	  font-size: 13px;
	  font-weight: 700;
	  text-align: left;
	}

	.reports-panel .table-wrap thead th:last-child {
	  border-right: 0;
	}


	/* Body cells */

	.reports-panel .table-wrap tbody td {
	  padding: 18px;
	  vertical-align: middle;
	  background: var(--white);
	  border: 0;
	  border-bottom: 1px solid var(--border);
	}

	.reports-panel .table-wrap tbody tr:last-child td {
	  border-bottom: 0;
	}


	/* Subtle row hover */

	.reports-panel .table-wrap tbody tr {
	  transition: background-color 0.15s ease;
	}

	.reports-panel .table-wrap tbody tr:hover td {
	  background: #fafbfc;
	}


	/* Academic year */

	.reports-panel .year-cell {
	  color: var(--navy);
	  font-size: 14px;
	  font-weight: 700;
	  white-space: nowrap;
	}


	/* PDF link */

	.reports-panel .pdf-link {
	  display: inline-flex;
	  align-items: center;
	  gap: 6px;
	  color: var(--rutgers-red);
	  font-size: 13px;
	  font-weight: 700;
	  text-decoration: none;
	}

	.reports-panel .pdf-link::before {
	  content: "";
	}

	.reports-panel .pdf-link:hover,
	.reports-panel .pdf-link:focus-visible {
	  color: var(--rutgers-red-dark);
	  text-decoration: underline;
	  text-underline-offset: 3px;
	}


	/* Posted date */

	.reports-panel .posted-date {
	  display: block;
	  margin-top: 4px;
	  color: var(--text-secondary);
	  font-size: 11px;
	  font-weight: 400;
	}
	 
	 /* IPEDS survey name */
	 .survey-name {
	  font-size: 1.25em;
	  font-weight: 700;
	}
	  
	/*Ask a question or report an issue buttons */)
	.support-callout-buttons {
	  display: flex;
	  align-items: center;
	  gap: 16px;
	  flex-shrink: 0;
	}
	
	@media (max-width: 700px) {
	  .support-callout {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	  }

	  .support-callout-buttons {
		flex-wrap: wrap;
	  }
	}