﻿:root {
        --bg: #ffffff;
        --surface: #ffffff;
        --text: #13282d;
        --text-muted: #5c7076;
        --border: #ded8ca;
        --accent: #00756f;
        --accent-dark: #064f4c;
        --accent-soft: #d8f2ec;
        --warning: #f5b84b;
        --warning-soft: #fff0c7;
        --night: #123232;
        --icon-muted: #4f6870;
        --surface-rgb: 255 255 255;
        --text-rgb: 19 40 45;
        --accent-rgb: 0 117 111;
        --shadow-rgb: 36 44 42;
        --overlay-rgb: 13 31 35;
        --radius-xs: 6px;
        --radius-sm: 8px;
        --radius-pill: 999px;
        --shadow-sm: 0 16px 44px rgb(var(--shadow-rgb) / 0.08);
        --shadow-md: 0 22px 60px rgb(var(--shadow-rgb) / 0.12);
        --page-width: min(1720px, calc(100vw - 144px));
        --section-x: 40px;
        --section-y: 34px;
        --section-gap: 22px;
        --image-bg: #d8e5e1;
      }

      * {
        box-sizing: border-box;
      }

      html {
        background: var(--bg);
        color: var(--text);
      }

      body {
        margin: 0;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        line-height: 1.45;
        overflow-x: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button,
      input,
      select {
        font: inherit;
      }

      button {
        border: 0;
        cursor: pointer;
      }

      svg {
        display: block;
      }

      .page {
        min-height: 100vh;
        background:
          linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #f6f9f8 100%);
      }
      .shell {
        max-width: var(--page-width);
        margin: 0 auto;
        padding: 26px var(--section-x) 0;
        min-width: 0;
      }

      .page-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: end;
        padding: 30px 0 22px;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        color: var(--accent-dark);
        font-size: 13px;
        font-weight: 820;
      }

      .eyebrow::before {
        content: "";
        width: 44px;
        height: 4px;
        border-radius: var(--radius-pill);
        background: var(--accent);
      }

      h1 {
        max-width: 820px;
        margin: 0;
        font-size: 56px;
        font-weight: 780;
        line-height: 1;
        letter-spacing: 0;
      }

      .page-title p {
        max-width: 650px;
        margin: 14px 0 0;
        color: var(--text-muted);
        font-size: 18px;
      }

      .handoff-copy {
        max-width: 620px;
        margin: 10px 0 0;
        color: var(--accent-dark);
        font-size: 14px;
        font-weight: 760;
      }

      .quick-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        min-width: 390px;
      }

      .fact {
        padding: 13px 14px;
        border: 1px solid rgb(var(--text-rgb) / 0.1);
        border-radius: var(--radius-sm);
        background: rgb(var(--surface-rgb) / 0.7);
      }

      .fact strong,
      .fact span {
        display: block;
      }

      .fact strong {
        color: var(--accent-dark);
        font-size: 20px;
        font-weight: 850;
      }

      .fact span {
        margin-top: 2px;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 760;
      }

      .search-panel {
        display: grid;
        gap: 14px;
        min-width: 0;
        padding: 16px;
        border: 1px solid rgb(var(--text-rgb) / 0.12);
        border-radius: var(--radius-sm);
        background: rgb(var(--surface-rgb) / 0.82);
        box-shadow: var(--shadow-md);
      }

      .search-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        min-width: 0;
        padding: 8px;
        border: 1px solid rgb(var(--text-rgb) / 0.14);
        border-radius: var(--radius-sm);
        background: white;
      }

      .search-icon {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        color: var(--text);
      }

      .search-icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.25;
      }

      .search-row input {
        min-width: 0;
        min-height: 54px;
        border: 0;
        outline: 0;
        color: var(--text);
        font-size: 18px;
      }

      .primary {
        min-height: 54px;
        padding: 0 22px;
        border-radius: var(--radius-xs);
        background: var(--accent);
        color: white;
        font-weight: 840;
        box-shadow: 0 14px 32px rgb(var(--accent-rgb) / 0.18);
      }

      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
      }

      .chip {
        padding: 8px 11px;
        border: 1px solid rgb(var(--text-rgb) / 0.12);
        border-radius: var(--radius-pill);
        background: rgb(var(--surface-rgb) / 0.78);
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 760;
      }

      .chip.active {
        border-color: rgb(var(--accent-rgb) / 0.28);
        background: var(--accent-soft);
        color: var(--accent-dark);
      }

      .toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: center;
        min-width: 0;
        padding: 22px 0 14px;
      }

      .result-copy {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: baseline;
      }

      .result-copy strong {
        font-size: 18px;
        font-weight: 820;
      }

      .result-copy span {
        color: var(--text-muted);
        font-size: 14px;
      }

      .university-agent-notice {
        display: none;
        flex-basis: 100%;
        width: fit-content;
        padding: 9px 11px;
        border: 1px solid rgb(var(--accent-rgb) / 0.18);
        border-radius: var(--radius-xs);
        background: rgb(var(--accent-rgb) / 0.08);
        color: var(--accent-dark);
        font-size: 13px;
        font-weight: 780;
      }

      .university-agent-notice.visible {
        display: inline-flex;
        animation: universityNoticeIn 180ms ease;
      }

      .university-agent-notice a {
        margin-left: 8px;
        color: var(--accent-dark);
        font-weight: 900;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
      }

      .select,
      .toggle,
      .filter-button {
        min-height: 42px;
        border: 1px solid rgb(var(--text-rgb) / 0.14);
        border-radius: var(--radius-xs);
        background: rgb(var(--surface-rgb) / 0.9);
        color: var(--text);
        font-size: 13px;
        font-weight: 780;
      }

      .select {
        padding: 0 10px;
      }

      .toggle {
        display: inline-flex;
        overflow: hidden;
        padding: 3px;
      }

      .toggle button {
        min-width: 58px;
        border-radius: 4px;
        background: transparent;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 800;
      }

      .toggle button.active {
        background: var(--accent-soft);
        color: var(--accent-dark);
      }

      .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        min-width: 0;
        padding: 12px 0 16px;
        border-top: 1px solid rgb(var(--text-rgb) / 0.1);
        border-bottom: 1px solid rgb(var(--text-rgb) / 0.1);
      }

      .filter-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
      }

      .filter-button.active {
        border-color: rgb(var(--accent-rgb) / 0.28);
        background: var(--accent-soft);
        color: var(--accent-dark);
      }

      .advanced-filters {
        display: grid;
        grid-template-columns: minmax(220px, 0.9fr) repeat(4, minmax(145px, 1fr));
        gap: 10px;
        align-items: end;
        padding: 12px;
        border: 1px solid rgb(var(--accent-rgb) / 0.16);
        border-radius: var(--radius-sm);
        background:
          linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--surface-rgb) / 0.92) 52%),
          rgb(var(--surface-rgb) / 0.96);
      }

      .advanced-filters > div,
      .advanced-filters label {
        min-width: 0;
      }

      .advanced-filters > div {
        display: grid;
        gap: 4px;
        align-self: center;
      }

      .advanced-filters span {
        color: var(--accent-dark);
        font-size: 12px;
        font-weight: 900;
      }

      .advanced-filters strong {
        color: var(--muted);
        font-size: 12px;
        font-weight: 720;
        line-height: 1.35;
      }

      .advanced-filters label {
        display: grid;
        gap: 6px;
      }

      .advanced-filters select {
        width: 100%;
        min-height: 42px;
        padding: 0 10px;
        border: 1px solid rgb(var(--text-rgb) / 0.14);
        border-radius: var(--radius-xs);
        background: rgb(var(--surface-rgb) / 0.94);
        color: var(--text);
        font-size: 13px;
        font-weight: 800;
      }

      .active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 28px;
        padding: 12px 0 0;
      }

      .active-pill {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        padding: 6px 9px;
        border-radius: var(--radius-pill);
        background: var(--night);
        color: white;
        font-size: 12px;
        font-weight: 820;
      }

      .active-pill button {
        background: transparent;
        color: white;
        font-weight: 900;
      }

      .results {
        padding: 28px 0 40px;
      }

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

      .university-grid.list {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .university-card {
        position: relative;
        display: grid;
        grid-template-rows: 166px 1fr;
        min-width: 0;
        cursor: pointer;
        outline: none;
        transition: transform 160ms ease;
      }

      .university-card:focus-visible {
        outline: 3px solid rgb(var(--accent-rgb) / 0.2);
        outline-offset: 4px;
        border-radius: var(--radius-sm);
      }

      .card-image {
        position: relative;
        height: 166px;
        overflow: hidden;
        border-radius: var(--radius-sm);
        background: var(--image-bg);
      }

      .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 360ms ease;
      }

      .university-card:hover .card-image img {
        transform: scale(1.035);
      }

      .university-card-open {
        position: absolute;
        z-index: 1;
        right: 12px;
        bottom: 12px;
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(255 255 255 / 0.72);
        border-radius: var(--radius-pill);
        background: rgb(255 255 255 / 0.92);
        color: var(--accent);
        box-shadow: 0 12px 24px rgb(0 0 0 / 0.1);
        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      }

      .university-card-open svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .university-card:hover .university-card-open,
      .university-card:focus-visible .university-card-open {
        background: var(--accent);
        color: white;
        transform: translateX(2px);
      }

      .badge {
        position: absolute;
        z-index: 1;
        display: inline-grid;
        place-items: center;
        border-radius: var(--radius-pill);
        background: rgb(255 255 255 / 0.92);
        color: var(--accent-dark);
        font-size: 12px;
        font-weight: 850;
      }

      .badge {
        top: 10px;
        left: 10px;
        padding: 6px 8px;
      }

      .save {
        position: absolute;
        z-index: 1;
        top: 9px;
        right: 9px;
      }

      .card-body {
        display: grid;
        grid-template-rows: auto auto auto minmax(42px, auto) auto auto;
        padding-top: 11px;
      }

      .card-body h2 {
        display: -webkit-box;
        min-height: 46px;
        margin: 0;
        overflow: hidden;
        color: var(--accent-dark);
        font-size: 20px;
        font-weight: 820;
        line-height: 1.15;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .card-body h2 a {
        color: inherit;
        text-decoration: none;
      }

      .card-body h2 a:hover {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .location {
        margin-top: 4px;
        color: var(--text-muted);
        font-size: 14px;
      }

      .signals {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 7px;
        min-height: 28px;
        margin-top: 10px;
      }

      .signal {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        max-width: 100%;
        min-height: 28px;
        padding: 5px 7px;
        overflow: hidden;
        border-radius: var(--radius-pill);
        background: rgb(var(--accent-rgb) / 0.08);
        color: var(--accent-dark);
        font-size: 12px;
        font-weight: 820;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .note {
        display: -webkit-box;
        min-height: 42px;
        margin: 12px 0 0;
        overflow: hidden;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .facts {
        display: grid;
        grid-template-columns: minmax(66px, 0.72fr) minmax(0, 1.7fr) minmax(58px, 0.68fr);
        gap: 0;
        margin-top: 14px;
        overflow: hidden;
        border: 1px solid rgb(var(--text-rgb) / 0.1);
        border-radius: var(--radius-sm);
        background: #f7faf9;
      }

      .mini-fact {
        min-width: 0;
        padding: 9px 10px 8px;
      }

      .mini-fact + .mini-fact {
        border-left: 1px solid rgb(var(--text-rgb) / 0.1);
      }

      .mini-fact strong,
      .mini-fact span {
        display: block;
      }

      .mini-fact strong {
        display: -webkit-box;
        overflow: hidden;
        overflow-wrap: anywhere;
        color: var(--text);
        font-size: 14px;
        line-height: 1.2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }

      .mini-fact span {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 740;
      }

      .card-actions {
        display: block;
        margin-top: 12px;
      }

      .card-actions a,
      .card-actions button,
      .load-more,
      .pagination button {
        min-height: 38px;
        min-width: 0;
        width: 100%;
        padding: 0 12px;
        border: 1px solid rgb(var(--text-rgb) / 0.14);
        border-radius: var(--radius-xs);
        background: white;
        color: var(--text);
        font-size: 13px;
        font-weight: 820;
        letter-spacing: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }

      .card-actions a,
      .card-actions button {
        min-height: 42px;
      }

      .card-actions a {
        display: grid;
        place-items: center;
        text-decoration: none;
      }

      .card-actions button {
        border-color: rgb(var(--text-rgb) / 0.12);
        background: #ffffff;
        color: var(--accent-dark);
        box-shadow: none;
      }

      .card-actions button:hover {
        border-color: rgb(var(--accent-rgb) / 0.28);
        background: #f8fcfb;
        box-shadow: 0 8px 18px rgb(var(--shadow-rgb) / 0.045);
      }

      .university-grid.list .university-card {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr) auto;
        grid-template-rows: none;
        gap: 18px;
        align-items: center;
        padding: 14px;
        border: 1px solid rgb(var(--text-rgb) / 0.1);
        border-radius: var(--radius-sm);
        background: rgb(var(--surface-rgb) / 0.78);
      }

      .university-grid.list .card-image {
        height: 124px;
      }

      .university-grid.list .card-body {
        display: block;
        padding-top: 0;
      }

      .university-grid.list .card-body h2 {
        min-height: 0;
      }

      .university-grid.list .note {
        min-height: 0;
      }

      .university-grid.list .card-actions {
        width: 180px;
        align-self: stretch;
        grid-template-columns: 1fr;
        align-content: center;
      }

      .pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding-top: 24px;
      }

      .pagination button {
        display: inline-grid;
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        place-items: center;
        background: var(--surface);
        color: var(--text);
      }

      .pagination button:focus-visible {
        outline: 3px solid rgb(var(--accent-rgb) / 0.2);
        outline-offset: 2px;
      }

      .pagination button.active {
        border-color: var(--accent);
        background: var(--accent);
        color: white;
      }

      .pagination button:disabled {
        cursor: not-allowed;
        opacity: 0.42;
      }

      .results-divider {
        width: 100%;
        height: 1px;
        background: rgb(var(--text-rgb) / 0.12);
      }
      .desktop-only {
        display: inline-flex;
      }

      .primary,
      .hub-link,
      .nav-icon,
      .account-pill,
      .filter-button,
      .card-actions a,
      .card-actions button,
      .load-more,
      .pagination button,
      .chip {
        transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
      }

      .primary:hover,
      .hub-link:hover,
      .nav-icon:hover,
      .card-actions a:hover,
      .card-actions button:hover,
      .load-more:hover,
      .pagination button:not(:disabled):hover {
        transform: translateY(-1px);
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.001ms !important;
        }
      }

      @media (max-width: 1180px) {
        .page-title {
          grid-template-columns: 1fr;
        }

        .quick-facts {
          min-width: 0;
          max-width: 560px;
        }

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

      @media (max-width: 980px) {

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

        .controls {
          justify-content: flex-start;
        }

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

        .university-grid.list .university-card {
          grid-template-columns: 180px minmax(0, 1fr);
        }

        .university-grid.list .card-actions {
          width: auto;
          grid-column: 2;
        }

      }

      @media (max-width: 560px) {
        :root {
          --section-x: 16px;
          --section-y: 30px;
          --page-width: 100vw;
        }

        .shell {
          padding: 20px var(--section-x) 0;
        }

        .page-title {
          gap: 18px;
          padding: 24px 0 18px;
          text-align: left;
        }

        h1 {
          font-size: 38px;
          line-height: 1.02;
        }

        .page-title p {
          max-width: 340px;
          font-size: 16px;
        }

        .quick-facts {
          grid-template-columns: 1fr 1fr;
        }

        .quick-facts .fact:last-child {
          grid-column: 1 / -1;
        }

        .search-panel {
          padding: 10px;
          overflow: hidden;
        }

        .search-row {
          grid-template-columns: auto 1fr;
        }

        .search-row input,
        .primary {
          min-height: 50px;
        }

        .primary {
          grid-column: 1 / -1;
        }

        .search-row input {
          font-size: 16px;
        }

        .chips {
          flex-wrap: nowrap;
          overflow-x: auto;
          padding-bottom: 2px;
        }

        .chip {
          flex: 0 0 auto;
        }

        .toolbar {
          position: sticky;
          top: 0;
          z-index: 5;
          margin: 16px calc(var(--section-x) * -1) 0;
          padding: 12px var(--section-x);
          background: rgb(var(--surface-rgb) / 0.94);
          border-top: 1px solid rgb(var(--text-rgb) / 0.1);
          border-bottom: 1px solid rgb(var(--text-rgb) / 0.1);
          backdrop-filter: blur(16px);
          overflow: hidden;
        }

        .result-copy {
          display: grid;
          gap: 4px;
        }

        .result-copy span {
          max-width: 340px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .controls {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }

        .controls .toggle {
          grid-column: 1 / -1;
        }

        .desktop-only {
          display: none;
        }

        .filters {
          flex-wrap: nowrap;
          overflow-x: auto;
          margin: 0 calc(var(--section-x) * -1);
          padding-left: var(--section-x);
          padding-right: var(--section-x);
        }

        .advanced-filters {
          grid-template-columns: 1fr;
          margin-inline: 0;
        }

        .filter-button {
          flex: 0 0 auto;
        }

        .university-grid,
        .university-grid.list {
          grid-template-columns: 1fr;
          gap: 22px;
        }

        .university-grid.list .university-card,
        .university-card {
          display: block;
          padding: 0;
          border: 0;
          background: transparent;
        }

        .card-body {
          display: block;
        }

        .card-body h2 {
          min-height: 0;
        }

        .card-image,
        .university-grid.list .card-image {
          height: 184px;
        }

        .university-grid.list .card-actions,
        .card-actions {
          width: auto;
          display: block;
        }

        .facts {
          grid-template-columns: minmax(64px, 0.72fr) minmax(0, 1.7fr) minmax(56px, 0.68fr);
        }

        .results {
          padding-bottom: 32px;
        }

        .pagination {
          gap: 6px;
          padding-top: 22px;
        }

        .pagination button {
          flex-basis: 38px;
          width: 38px;
          min-width: 38px;
          min-height: 38px;
        }
      }

      @keyframes universityNoticeIn {
        from {
          opacity: 0;
          transform: translateY(-5px);
        }

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