/* ==========================================================================
   TPS Moshi — UI polish layer (additive).
   Uses the site's existing palette: navy nav, blue #2563eb, orange #f1683a.
   Everything here is layered on top of the original styles; nothing is removed.
   ========================================================================== */
:root {
    --tps-navy: #0f172a;
    --tps-blue: #2563eb;
    --tps-blue-dark: #1d4ed8;
    --tps-orange: #f1683a;
    --tps-blue-50: #eff6ff;
    --tps-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Explicit light page background ------------------------------------------
   html/body had no background at all, so pages showed the browser's canvas
   colour — black in dark-mode browsers — wherever a section had no fill of
   its own (inner pages looked black while Home/Contact looked white).
   The site's design is light, so pin it. */
:root { color-scheme: light; }
html,
body {
    background-color: #ffffff;
    color: #1f2937;
}

/* Smoother rendering + smooth in-page scrolling ------------------------------ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* clear the fixed navbar when jumping to anchors */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    animation: tpsFadeIn 0.5s var(--tps-ease) both;
}

@keyframes tpsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Gentle, consistent transitions on interactive elements -------------------- */
a,
button,
.btn,
[class*="shadow"] {
    transition: color 0.25s var(--tps-ease),
                background-color 0.25s var(--tps-ease),
                border-color 0.25s var(--tps-ease),
                box-shadow 0.3s var(--tps-ease),
                transform 0.3s var(--tps-ease);
}

/* Card lift — any element carrying a Tailwind shadow gets a soft hover lift -- */
[class*="shadow-md"]:hover,
[class*="shadow-lg"]:hover,
[class*="shadow-xl"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.28) !important;
}

/* Buttons & pill links — subtle press/float feel --------------------------- */
button:not([disabled]):hover,
.btn:hover,
a[class*="bg-blue-600"]:hover,
a[class*="bg-green-600"]:hover,
button[class*="bg-blue-600"]:hover {
    transform: translateY(-2px);
}

button:active,
.btn:active,
a[class*="bg-blue-600"]:active {
    transform: translateY(0);
}

/* Images fade/zoom in once loaded ------------------------------------------ */
img {
    transition: opacity 0.6s var(--tps-ease), transform 0.6s var(--tps-ease);
}
img.tps-img-load {
    opacity: 0;
}
img.tps-img-load.tps-img-in {
    opacity: 1;
}

/* News & Announcements section — refined header + pill tabs ---------------- */
.tps-news-section,
.tps-tinted {
    position: relative;
    background:
        radial-gradient(900px 380px at 15% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
        radial-gradient(760px 360px at 100% 110%, rgba(241, 104, 58, 0.10), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 55%, #f8fafc 100%);
    overflow: hidden;
}
.tps-news-section::before,
.tps-tinted::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    pointer-events: none;
}
.tps-eyebrow {
    display: inline-block;
    color: var(--tps-orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.tps-section-title {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.12;
    font-weight: 800;
    background: linear-gradient(90deg, #1e3a8a, #2563eb 55%, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 16px;
}
.tps-title-underline {
    width: 92px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tps-blue), var(--tps-orange));
    box-shadow: 0 2px 10px rgba(241, 104, 58, 0.35);
}
.tps-section-sub {
    max-width: 640px;
    margin: 18px auto 0;
    color: #64748b;
    font-size: 1.02rem;
    line-height: 1.6;
}
.tps-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 36px -14px rgba(15, 23, 42, 0.30);
    border: 1px solid rgba(37, 99, 235, 0.14);
}
.tps-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border: none;
    background: transparent;
    color: #334155;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s var(--tps-ease), background 0.3s var(--tps-ease),
                box-shadow 0.3s var(--tps-ease), transform 0.3s var(--tps-ease);
}
.tps-tab svg {
    width: 18px;
    height: 18px;
    opacity: 0.65;
    transition: opacity 0.3s var(--tps-ease), transform 0.3s var(--tps-ease);
}
.tps-tabs .tps-tab:hover {
    color: var(--tps-blue);
    background: rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}
.tps-tabs .tps-tab:hover svg { opacity: 1; }
.tps-tabs .tps-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1e3a8a);
    box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.60);
    transform: translateY(-1px);
}
.tps-tabs .tps-tab.is-active svg {
    opacity: 1;
    transform: scale(1.08);
}
@media (max-width: 640px) {
    .tps-tab { padding: 9px 15px; font-size: 0.85rem; }
    .tps-tab svg { width: 16px; height: 16px; }
}

/* Announcements panel — timeline layout ------------------------------------ */
.tps-ann { max-width: 940px; margin: 0 auto; }
.tps-ann__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.tps-ann__list::before {               /* timeline spine */
    content: "";
    position: absolute;
    left: 35px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.35), rgba(37, 99, 235, 0.35), rgba(16, 185, 129, 0.35));
}
.tps-ann__item {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    padding: 10px 0;
}
.tps-ann__date {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 80px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    background: linear-gradient(160deg, #3b82f6, #1e3a8a);
    box-shadow: 0 12px 24px -10px rgba(37, 99, 235, 0.65);
}
.tps-ann__date .d { font-size: 1.65rem; font-weight: 800; }
.tps-ann__date .m { margin-top: 5px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.tps-ann__date .y { margin-top: 3px; font-size: 0.62rem; opacity: 0.75; }
.tps-ann__date--red   { background: linear-gradient(160deg, #ef4444, #991b1b); box-shadow: 0 12px 24px -10px rgba(220, 38, 38, 0.6); }
.tps-ann__date--green { background: linear-gradient(160deg, #10b981, #065f46); box-shadow: 0 12px 24px -10px rgba(16, 185, 129, 0.55); }

.tps-ann__card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 10px 30px -16px rgba(15, 23, 42, 0.25);
    transition: transform 0.35s var(--tps-ease), box-shadow 0.35s var(--tps-ease), border-color 0.35s ease;
}
.tps-ann__item:hover .tps-ann__card {
    transform: translateX(5px);
    border-color: rgba(37, 99, 235, 0.26);
    box-shadow: 0 22px 44px -18px rgba(37, 99, 235, 0.38);
}
.tps-ann__item.is-featured .tps-ann__card {
    border-color: rgba(220, 38, 38, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #fff6f3 100%);
}
.tps-ann__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tps-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tps-pill--red   { background: #fee2e2; color: #b91c1c; }
.tps-pill--blue  { background: #dbeafe; color: #1d4ed8; }
.tps-pill--green { background: #d1fae5; color: #047857; }
.tps-pill--orange { background: #ffedd5; color: #c2410c; }
.tps-pill--feat  { background: #fff7ed; color: #c2410c; }
.tps-pill--feat i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tps-orange);
    animation: tpsPing 1.8s ease-out infinite;
}
@keyframes tpsPing {
    0%   { box-shadow: 0 0 0 0 rgba(241, 104, 58, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(241, 104, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 104, 58, 0); }
}
.tps-ann__title { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; color: #0f172a; }
.tps-ann__text  { margin: 0; color: #475569; line-height: 1.65; }
.tps-ann__text p { margin: 0 0 0.5em; }
.tps-ann__text p:last-child { margin-bottom: 0; }
.tps-ann__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-weight: 600;
    color: var(--tps-blue);
}
.tps-ann__link svg { width: 17px; height: 17px; transition: transform 0.3s var(--tps-ease); }
.tps-ann__link:hover { color: var(--tps-orange); }
.tps-ann__link:hover svg { transform: translateX(4px); }

.tps-ann__files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.tps-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
}
.tps-file:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 14px 26px -14px rgba(37, 99, 235, 0.5);
}
.tps-file__icon {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 48px;
    border-radius: 7px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
}
.tps-file__icon::before {               /* folded page corner */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-bottom-left-radius: 4px;
    background: rgba(255, 255, 255, 0.45);
}
.tps-file__icon--red   { background: linear-gradient(160deg, #ef4444, #b91c1c); }
.tps-file__icon--green { background: linear-gradient(160deg, #10b981, #047857); }
.tps-file__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tps-file__body strong {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}
.tps-file__body small { margin-top: 2px; color: #64748b; font-size: 0.75rem; }
.tps-file__dl {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    transition: transform 0.3s var(--tps-ease), background 0.3s ease;
}
.tps-file__dl svg { width: 17px; height: 17px; }
.tps-file:hover .tps-file__dl {
    transform: translateY(2px);
    background: linear-gradient(135deg, var(--tps-orange), #d9542b);
}

.tps-ann__footer { margin-top: 28px; text-align: center; }
.tps-btn-gradient {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 14px 28px -12px rgba(37, 99, 235, 0.6);
}
.tps-btn-gradient:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--tps-orange), #d9542b);
    box-shadow: 0 14px 28px -12px rgba(241, 104, 58, 0.6);
}
.tps-btn-gradient svg { width: 18px; height: 18px; transition: transform 0.3s var(--tps-ease); }
.tps-btn-gradient:hover svg { transform: translateX(4px); }

/* Extra announcement pieces: intake badge, programme cards, notes, chips */
.tps-ann__date--orange { background: linear-gradient(160deg, #fb923c, #c2410c); box-shadow: 0 12px 24px -10px rgba(234, 88, 12, 0.6); }
.tps-ann__date--orange .d { font-size: 1rem; letter-spacing: -0.02em; }
.tps-file__icon--blue { background: linear-gradient(160deg, #3b82f6, #1e3a8a); }
.tps-pill--free { background: #dcfce7; color: #15803d; }

.tps-ann__programs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.tps-prog {
    border-radius: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.tps-prog h5 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: #1e3a8a; }
.tps-prog ul { margin: 0; padding-left: 18px; color: #475569; font-size: 0.9rem; line-height: 1.6; }
.tps-prog dl { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed #e2e8f0; display: grid; gap: 4px; }
.tps-prog dl > div { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; }
.tps-prog dt { color: #64748b; }
.tps-prog dd { margin: 0; font-weight: 700; color: #0f172a; text-align: right; }

.tps-ann__note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7ed;
    border-left: 4px solid var(--tps-orange);
    color: #7c2d12;
    font-size: 0.9rem;
    line-height: 1.55;
}
.tps-ann__subhead { margin: 14px 0 6px; font-size: 0.95rem; font-weight: 700; color: #1e3a8a; }
.tps-ann__reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tps-ann__reqs li { position: relative; padding-left: 26px; color: #475569; font-size: 0.93rem; }
.tps-ann__reqs li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d1fae5;
    color: #047857;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tps-ann__contacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tps-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    text-decoration: none;
}
.tps-chip:hover { background: #dbeafe; color: #1e3a8a; }
.tps-chip--solid { color: #fff; background: linear-gradient(135deg, var(--tps-blue), #1e3a8a); border-color: transparent; }
.tps-chip--solid:hover { color: #fff; background: linear-gradient(135deg, var(--tps-orange), #d9542b); }

@media (max-width: 640px) {
    .tps-ann__item { grid-template-columns: 56px 1fr; gap: 12px; }
    .tps-ann__list::before { left: 27px; }
    .tps-ann__date { width: 56px; height: 66px; border-radius: 14px; }
    .tps-ann__date .d { font-size: 1.3rem; }
    .tps-ann__card { padding: 16px; }
    .tps-ann__item:hover .tps-ann__card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tps-pill--feat i { animation: none; }
}

/* News tab — featured slideshow + latest grid (scoped restyle of live markup) */
.tps-newsfeed > .grid { gap: 26px; }
.tps-newsfeed > .grid > div:not(.grid),
.tps-newsfeed > .grid > .grid > div {
    border-radius: 22px !important;
    border: 1px solid rgba(37, 99, 235, 0.10);
    box-shadow: 0 12px 34px -16px rgba(15, 23, 42, 0.28) !important;
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease), border-color 0.4s ease !important;
}
.tps-newsfeed > .grid > .grid { gap: 18px; }
.tps-newsfeed > .grid > .grid > div { border-radius: 18px !important; display: flex; flex-direction: column; }
.tps-newsfeed > .grid > div:not(.grid):hover,
.tps-newsfeed > .grid > .grid > div:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.26);
    box-shadow: 0 28px 52px -22px rgba(37, 99, 235, 0.45) !important;
}
/* image areas: zoom on hover + legibility gradient */
.tps-newsfeed .relative.h-80,
.tps-newsfeed .relative.h-48 { overflow: hidden; }
.tps-newsfeed .relative.h-80::after,
.tps-newsfeed .relative.h-48::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.55) 100%);
    pointer-events: none;
}
.tps-newsfeed .relative.h-48 img { transition: transform 0.9s var(--tps-ease); }
.tps-newsfeed > .grid > .grid > div:hover .relative.h-48 img { transform: scale(1.08); }
/* slide dots above the gradient */
.tps-newsfeed .relative.h-80 .absolute.bottom-12 { z-index: 3; bottom: 18px !important; }
.tps-newsfeed .relative.h-80 .absolute.bottom-12 button { box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.15); }
/* "Featured News" / "Latest News" labels -> pills, top-left */
.tps-newsfeed .absolute.bottom-0.left-0 {
    z-index: 3;
    top: 14px;
    bottom: auto !important;
    left: 14px !important;
    padding: 5px 12px !important;
    border-radius: 999px;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a) !important;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.7);
}
.tps-newsfeed .relative.h-80 .absolute.bottom-0.left-0 {    /* the featured one stands out in orange */
    background: linear-gradient(135deg, #fb923c, #c2410c) !important;
    box-shadow: 0 8px 18px -8px rgba(234, 88, 12, 0.7);
    font-size: 0.72rem !important;
}
/* featured story text */
.tps-newsfeed .p-6 h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25;
}
.tps-newsfeed .p-6 > div > div.flex,
.tps-newsfeed .p-6 .flex.items-center.text-gray-500 { gap: 8px; flex-wrap: wrap; }
.tps-newsfeed .p-6 .flex.items-center.text-gray-500 > span {
    margin: 0 !important;
    padding: 5px 11px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #1e3a8a;
    font-weight: 600;
    font-size: 0.8rem;
}
.tps-newsfeed .p-6 p {
    font-size: 1rem !important;
    line-height: 1.7;
    color: #475569 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* small cards */
.tps-newsfeed .p-3 { padding: 14px 16px 16px !important; display: flex; flex-direction: column; flex: 1; }
.tps-newsfeed .p-3 h3 {
    font-size: 0.92rem !important;
    line-height: 1.35;
    color: #0f172a !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tps-newsfeed .p-3 a { margin-top: auto; padding-top: 6px; }
/* read-more arrows nudge on hover */
.tps-newsfeed a svg { transition: transform 0.3s var(--tps-ease); }
.tps-newsfeed a:hover svg { transform: translateX(4px); }
.tps-newsfeed a.text-blue-600:hover { color: var(--tps-orange) !important; }
@media (max-width: 640px) {
    .tps-newsfeed > .grid > div:not(.grid):hover,
    .tps-newsfeed > .grid > .grid > div:hover { transform: none; }
}
/* side card for a story without a photo */
.tps-newsfeed__noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, #1e3a8a 0%, #0f172a 75%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 2.4rem;
}
.tps-newsfeed .tps-ann__footer,
.tps-ev .tps-ann__footer { margin-top: 30px; }

/* Events tab — image-led cards ---------------------------------------------- */
.tps-ev { max-width: 1040px; margin: 0 auto; }
.tps-ev__note {
    margin: 0 auto 22px;
    max-width: 640px;
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
}
.tps-ev__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}
.tps-ev__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 34px -16px rgba(15, 23, 42, 0.28);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease), border-color 0.4s ease;
}
.tps-ev__card:hover {
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, 0.26);
    box-shadow: 0 30px 56px -22px rgba(37, 99, 235, 0.45);
}
.tps-ev__media {
    position: relative;
    height: 230px;
    overflow: hidden;
}
.tps-ev__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--tps-ease);
}
.tps-ev__card:hover .tps-ev__media img { transform: scale(1.07); }
.tps-ev__media::after {                     /* legibility gradient */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 35%, rgba(15, 23, 42, 0.55) 100%);
    pointer-events: none;
}
.tps-ev__date {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    width: 62px;
    height: 68px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    backdrop-filter: blur(6px);
}
.tps-ev__date .d { font-size: 1.55rem; font-weight: 800; }
.tps-ev__date .m { margin-top: 5px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.tps-ev__date--blue { background: linear-gradient(160deg, #3b82f6, #1e3a8a); box-shadow: 0 12px 24px -10px rgba(37, 99, 235, 0.7); }
.tps-ev__date--pink { background: linear-gradient(160deg, #ec4899, #9d174d); box-shadow: 0 12px 24px -10px rgba(219, 39, 119, 0.65); }
.tps-ev__tag {
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c2410c;
    background: rgba(255, 247, 237, 0.95);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.5);
}
.tps-ev__tag--pink { color: #9d174d; background: rgba(253, 242, 248, 0.95); }
.tps-ev__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}
.tps-ev__title { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; color: #0f172a; line-height: 1.25; }
.tps-ev__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tps-ev__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #dbeafe;
}
.tps-ev__chip i { color: var(--tps-blue); font-size: 0.85rem; }
.tps-ev__quote {
    position: relative;
    margin: 0 0 4px;
    padding: 12px 14px 12px 18px;
    border-left: 4px solid var(--tps-orange);
    border-radius: 0 12px 12px 0;
    background: #fff7ed;
    color: #7c2d12;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
}
.tps-ev__quote--pink { border-left-color: #ec4899; background: #fdf2f8; color: #831843; }
.tps-ev__text { margin: 0; color: #475569; line-height: 1.65; }
.tps-ev__body .tps-ann__link { margin-top: auto; padding-top: 14px; }
@media (max-width: 640px) {
    .tps-ev__media { height: 200px; }
    .tps-ev__body { padding: 18px; }
    .tps-ev__card:hover { transform: none; }
}

/* Events page ------------------------------------------------------------------ */
.tps-events-page { padding: 120px 0 80px; min-height: 70vh; }
.tps-subsection { text-align: center; margin: 64px 0 28px; }
.tps-subsection__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #0f172a;
}
.tps-empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 32px;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px dashed rgba(37, 99, 235, 0.30);
    border-radius: 24px;
    box-shadow: 0 16px 40px -22px rgba(15, 23, 42, 0.35);
}
.tps-empty__icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: linear-gradient(160deg, #3b82f6, #1e3a8a);
    box-shadow: 0 14px 28px -12px rgba(37, 99, 235, 0.65);
}
.tps-empty__title { margin: 0 0 10px; font-size: 1.35rem; font-weight: 800; color: #0f172a; }
.tps-empty__text { margin: 0 auto 22px; max-width: 480px; color: #475569; line-height: 1.65; }
.tps-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
@media (max-width: 640px) {
    .tps-events-page { padding: 100px 0 56px; }
    .tps-empty { padding: 30px 20px; }
}

/* Health center: branded art panel when a service has no photo -------------- */
.tps-service-art {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 45%),
        linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #0ea5e9 100%) !important;
    position: relative;
    overflow: hidden;
}
.tps-service-art::after {               /* soft medical cross watermark */
    content: "";
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 110px;
    height: 110px;
    background:
        linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)) center / 34% 100% no-repeat,
        linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)) center / 100% 34% no-repeat;
    border-radius: 12px;
}
.tps-service-art i {
    font-size: 3.4rem;
    color: #fff;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.35));
    transition: transform 0.45s var(--tps-ease);
}
.health-center-service-card:hover .tps-service-art i { transform: scale(1.12) rotate(-6deg); }

/* Courses: slick cards ------------------------------------------------------ */
.course-card {
    position: relative;
    border-radius: 20px !important;
    border: 1px solid rgba(37, 99, 235, 0.10);
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.25) !important;
}
.course-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 5;
    background: linear-gradient(90deg, var(--tps-blue), var(--tps-orange));
    transform: scaleX(0.22);
    transform-origin: left;
    transition: transform 0.55s var(--tps-ease);
}
.course-card:hover::before { transform: scaleX(1); }
.course-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 28px 50px -18px rgba(37, 99, 235, 0.45) !important;
}
.course-card img { transition: transform 0.9s var(--tps-ease), opacity 0.5s ease !important; }
.course-card:hover img { transform: scale(1.06); }

/* Services: slick cards ----------------------------------------------------- */
.tps-services .grid > div {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
    border: 1px solid rgba(37, 99, 235, 0.10) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.22) !important;
}
.tps-services .grid > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tps-blue), var(--tps-orange));
    opacity: 0;
    transition: opacity 0.4s var(--tps-ease);
}
.tps-services .grid > div:hover::before { opacity: 1; }
.tps-services .grid > div:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 28px 50px -18px rgba(37, 99, 235, 0.40) !important;
}
.tps-services .grid > div > div:first-child {
    background: linear-gradient(135deg, #dbeafe, #eff6ff) !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15),
                0 8px 18px -8px rgba(37, 99, 235, 0.45);
    transition: transform 0.45s var(--tps-ease), box-shadow 0.45s var(--tps-ease);
}
.tps-services .grid > div:hover > div:first-child {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.30),
                0 14px 26px -8px rgba(241, 104, 58, 0.45);
}

/* Application-open announcement bar (under the navbar) --------------------- */
.tps-appbar {
    display: flex;
    align-items: stretch;
    height: 44px;
    background: #b91c1c;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.tps-appbar__label {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #7f1d1d;
    color: #fde68a;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.11em;
    white-space: nowrap;
    flex-shrink: 0;
}
.tps-appbar__bell {
    color: #fde68a;
    transform-origin: top center;
    animation: tpsBell 1.8s ease infinite;
}
@keyframes tpsBell {
    0%, 70%, 100% { transform: rotate(0); }
    78% { transform: rotate(13deg); }
    86% { transform: rotate(-11deg); }
    94% { transform: rotate(6deg); }
}
.tps-appbar__track {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.tps-appbar__marquee {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: tpsMarquee 28s linear infinite;
}
.tps-appbar__track:hover .tps-appbar__marquee {
    animation-play-state: paused;
}
.tps-appbar__marquee span {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding-left: 2rem;
}
@keyframes tpsMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.tps-appbar__dl {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f59e0b;
    color: #7c2d12;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}
.tps-appbar__dl:hover {
    background: #fbbf24;
    color: #7c2d12;
    transform: none; /* override the global button lift so the bar stays flush */
}
@media (max-width: 640px) {
    .tps-appbar { height: 40px; }
    .tps-appbar__label span { display: none; }
    .tps-appbar__dl span { display: none; }
    .tps-appbar__marquee span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .tps-appbar__marquee { animation: none; }
    .tps-appbar__bell { animation: none; }
}

/* The marquee is a link to the application form */
a.tps-appbar__track { text-decoration: none; color: inherit; }
a.tps-appbar__track:hover .tps-appbar__marquee span { color: #fde68a; }

/* Navbar logo keeps its natural proportions */
nav.fixed.top-0 img[alt="TPS Moshi"] { width: auto; }

/* Flash-message toasts (form success / errors) ---------------------------- */
.tps-toasts {
    position: fixed;
    top: 120px;
    right: 20px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, calc(100vw - 40px));
}
.tps-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid var(--tps-blue);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.45);
    animation: tpsToastIn 0.45s var(--tps-ease) both;
}
.tps-toast p { margin: 2px 0 0; flex: 1; color: #1f2937; font-size: 0.95rem; line-height: 1.45; }
.tps-toast__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #fff;
    background: var(--tps-blue);
}
.tps-toast__close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.tps-toast__close:hover { color: #0f172a; transform: none; }
.tps-toast--success { border-left-color: #10b981; }
.tps-toast--success .tps-toast__icon { background: #10b981; }
.tps-toast--error { border-left-color: #dc2626; }
.tps-toast--error .tps-toast__icon { background: #dc2626; }
.tps-toast--warning { border-left-color: #f59e0b; }
.tps-toast--warning .tps-toast__icon { background: #f59e0b; }
.tps-toast.is-leaving { animation: tpsToastOut 0.35s ease forwards; }
@keyframes tpsToastIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: none; }
}
@keyframes tpsToastOut {
    to { opacity: 0; transform: translateX(30px); }
}

/* Make sure the navbar and any open dropdown clearly win the stacking order. */
nav.fixed.top-0 {
    z-index: 50;
}

/* Navbar: active section indicator (blue→orange underline) ---------------- */
.tps-nav-active {
    position: relative;
}
.tps-nav-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tps-blue), var(--tps-orange));
    box-shadow: 0 0 8px rgba(241, 104, 58, 0.5);
}

/* Navbar: deepen + shadow once the page is scrolled ------------------------ */
nav.fixed.top-0 {
    transition: background-color 0.35s var(--tps-ease),
                box-shadow 0.35s var(--tps-ease),
                padding 0.35s var(--tps-ease);
}
nav.tps-nav-scrolled {
    background-color: rgba(15, 23, 42, 0.97) !important;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.55);
}

/* Thin scroll-progress bar across the very top ----------------------------- */
#tps-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 60;
    background: linear-gradient(90deg, var(--tps-blue), var(--tps-orange));
    box-shadow: 0 0 10px rgba(241, 104, 58, 0.6);
    transition: width 0.1s linear;
}

/* Scroll-reveal — the class is added by JS, so no-JS pages stay fully visible */
.tps-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--tps-ease), transform 0.7s var(--tps-ease);
    will-change: opacity, transform;
}
.tps-reveal.tps-in {
    opacity: 1;
    transform: none;
}

/* Back-to-top floating button ---------------------------------------------- */
#tps-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), var(--tps-blue-dark));
    box-shadow: 0 10px 25px -6px rgba(37, 99, 235, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    transition: all 0.35s var(--tps-ease);
    z-index: 55;
}
#tps-top.tps-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
#tps-top:hover {
    background: linear-gradient(135deg, var(--tps-orange), #d9542b);
    transform: translateY(-3px) scale(1.05);
}

/* Section headings: animate the little accent underline into view ---------- */
.w-16.h-1, .w-24.h-1 {
    transition: width 0.7s var(--tps-ease);
}

/* Refined, on-brand scrollbar (WebKit) ------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--tps-blue), var(--tps-blue-dark));
    border-radius: 8px;
    border: 2px solid #eef2f7;
}
::-webkit-scrollbar-thumb:hover { background: var(--tps-orange); }

/* Nicer text selection ----------------------------------------------------- */
::selection { background: var(--tps-orange); color: #fff; }

/* Honor reduced-motion preferences ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body, .tps-reveal, img, a, button, [class*="shadow"] {
        animation: none !important;
        transition: none !important;
    }
    .tps-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Contact page — hero, contact channels, message form, map, shortcuts
   ========================================================================== */
[x-cloak] { display: none !important; }

.tps-contact {
    background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 46%);
    padding-bottom: 88px;
}

/* Hero -------------------------------------------------------------------- */
.tps-contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: var(--tps-navy);
    padding: clamp(64px, 9vw, 112px) 0 clamp(130px, 15vw, 180px);
}
.tps-contact-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 45%;
    animation: tpsHeroDrift 18s var(--tps-ease) both;
}
@keyframes tpsHeroDrift {
    from { transform: scale(1.14); }
    to   { transform: scale(1.04); }
}
.tps-contact-hero::before {            /* navy wash, strongest behind the text */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 420px at 88% 115%, rgba(241, 104, 58, 0.38), transparent 62%),
        linear-gradient(100deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.86) 40%,
                                rgba(30, 58, 138, 0.55) 72%, rgba(15, 23, 42, 0.35) 100%);
}
.tps-contact-hero::after {             /* fine dot grid fading out to the right */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.tps-contact-hero__inner {
    display: grid;
    gap: 40px;
    align-items: center;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.tps-contact-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tps-contact-hero__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tps-orange);
    animation: tpsContactPulse 2s infinite;
}
@keyframes tpsContactPulse {
    0%   { box-shadow: 0 0 0 0 rgba(241, 104, 58, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(241, 104, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 104, 58, 0); }
}
.tps-contact-hero h1 {
    margin: 22px 0 16px;
    font-size: clamp(2.7rem, 6.4vw, 4.6rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.tps-contact-hero h1 span {
    background: linear-gradient(120deg, #fdba74, var(--tps-orange) 55%, #fb7185);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tps-contact-hero__copy p {
    max-width: 560px;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.92);
}
.tps-contact-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.tps-cbtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.3s var(--tps-ease), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.tps-cbtn:hover { transform: translateY(-2px); }
.tps-cbtn--light { background: #fff; color: var(--tps-navy); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
.tps-cbtn--light i { color: var(--tps-blue); }
.tps-cbtn--wa { background: #22c55e; color: #fff; box-shadow: 0 14px 30px -12px rgba(34, 197, 94, 0.7); }
.tps-cbtn--wa:hover { background: #16a34a; }
.tps-cbtn--ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); }
.tps-cbtn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.tps-contact-glass {
    justify-self: end;
    width: 100%;
    max-width: 410px;
    padding: 26px;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
}
.tps-contact-glass h2 {
    margin-bottom: 16px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #93c5fd;
}
.tps-contact-glass ul { display: grid; gap: 16px; }
.tps-contact-glass li { display: flex; gap: 14px; align-items: flex-start; }
.tps-contact-glass__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, 0.3);
    color: #bfdbfe;
}
.tps-contact-glass small {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.tps-contact-glass strong,
.tps-contact-glass a { color: #fff; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.tps-contact-glass a:hover { color: #fdba74; }

/* Contact channels (overlap the hero) -------------------------------------- */
.tps-channels {
    position: relative;
    z-index: 2;
    margin-top: clamp(-112px, -9vw, -72px);
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tps-channel {
    --tone: var(--tps-blue);
    --tone-2: #1e3a8a;
    --tone-soft: #eff6ff;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 26px 24px 22px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 22px 46px -26px rgba(15, 23, 42, 0.4);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-channel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.tps-channel::after {
    content: "";
    position: absolute;
    top: -64px;
    right: -64px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--tone-soft);
    transition: transform 0.5s var(--tps-ease);
}
.tps-channel > * { position: relative; z-index: 1; }
.tps-channel:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -28px rgba(15, 23, 42, 0.5); }
.tps-channel:hover::after { transform: scale(1.3); }
.tps-channel--orange { --tone: #f97316; --tone-2: #c2410c; --tone-soft: #fff7ed; }
.tps-channel--green  { --tone: #10b981; --tone-2: #047857; --tone-soft: #ecfdf5; }
.tps-channel--navy   { --tone: #334155; --tone-2: #0f172a; --tone-soft: #f1f5f9; }
.tps-channel__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 12px 24px -12px var(--tone);
}
.tps-channel h3 { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.tps-channel p { margin-top: 4px; font-size: 0.9rem; color: #64748b; }
.tps-channel__lines { display: grid; gap: 6px; margin: 14px 0 18px; }
.tps-channel__lines a,
.tps-channel__lines span { font-size: 0.98rem; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.tps-channel__lines a:hover { color: var(--tone); }
.tps-channel__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tone-2);
}
.tps-channel__cta i { font-size: 0.78rem; transition: transform 0.3s var(--tps-ease); }
.tps-channel__cta:hover i { transform: translateX(4px); }

/* Message form + map ---------------------------------------------------------- */
.tps-contact-main {
    display: grid;
    gap: 28px;
    margin-top: 56px;
    align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    scroll-margin-top: 90px;
}
.tps-form-card {
    position: relative;
    padding: clamp(24px, 3.5vw, 40px);
    border-radius: 28px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 30px 70px -42px rgba(15, 23, 42, 0.5);
}
.tps-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 4px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, var(--tps-blue), #1e3a8a 60%, var(--tps-orange));
}
.tps-form-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.tps-form-card__icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 14px 26px -14px var(--tps-blue);
}
.tps-form-card__head h2 { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.tps-form-card__head p { font-size: 0.95rem; color: #64748b; }
.tps-form-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.92rem;
    font-weight: 600;
}
.tps-form { display: grid; gap: 18px; }
.tps-topics { margin: 0; padding: 0; border: 0; }
.tps-topics legend {
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}
.tps-topics__list { display: flex; flex-wrap: wrap; gap: 8px; }
.tps-topic {
    padding: 8px 15px;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tps-topic:hover { border-color: #93c5fd; background: #fff; color: var(--tps-blue); }
.tps-topic.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    color: #fff;
    box-shadow: 0 10px 20px -12px var(--tps-blue);
}
.tps-form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

/* floating-label fields */
.tps-field { position: relative; }
.tps-field input,
.tps-field textarea {
    display: block;
    width: 100%;
    padding: 24px 46px 10px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.tps-field textarea {
    min-height: 168px;
    padding: 26px 16px 32px;
    line-height: 1.6;
    resize: vertical;
}
.tps-field label {
    position: absolute;
    top: 17px;
    left: 17px;
    color: #64748b;
    font-size: 1rem;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.2s var(--tps-ease), color 0.2s ease;
}
.tps-field input:focus,
.tps-field textarea:focus { border-color: var(--tps-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
.tps-field input:focus + label,
.tps-field input:not(:placeholder-shown) + label,
.tps-field textarea:focus + label,
.tps-field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(0.78); color: var(--tps-blue); font-weight: 600; }
.tps-field__icon { position: absolute; top: 21px; right: 17px; color: #94a3b8; transition: color 0.2s ease; }
.tps-field input:focus ~ .tps-field__icon { color: var(--tps-blue); }
.tps-field__count { position: absolute; right: 14px; bottom: 10px; font-size: 0.75rem; color: #94a3b8; }
.tps-field.has-error .tps-field__count { bottom: 36px; }
.tps-field.has-error input,
.tps-field.has-error textarea { border-color: #ef4444; background: #fff; }
.tps-field.has-error label,
.tps-field.has-error .tps-field__icon { color: #dc2626; }
.tps-field__error { margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: #dc2626; }

.tps-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg, var(--tps-blue) 0%, #1e3a8a 55%, var(--tps-navy) 100%);
    background-size: 170% 100%;
    box-shadow: 0 18px 34px -18px rgba(37, 99, 235, 0.9);
    transition: transform 0.3s var(--tps-ease), box-shadow 0.3s ease, background-position 0.5s ease;
}
.tps-submit:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 24px 40px -18px rgba(37, 99, 235, 0.95); }
.tps-submit:disabled { opacity: 0.85; cursor: progress; transform: none; }
.tps-submit span { display: inline-flex; align-items: center; gap: 10px; }
.tps-form-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.82rem; color: #64748b; }
.tps-form-note i { color: #10b981; }

/* "message sent" panel */
.tps-sent { padding: 34px 10px; text-align: center; }
.tps-sent__icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #059669);
    box-shadow: 0 0 0 10px #dcfce7;
    animation: tpsPop 0.6s var(--tps-ease) both;
}
@keyframes tpsPop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.tps-sent h2 { font-size: 1.65rem; font-weight: 800; color: #0f172a; }
.tps-sent p { max-width: 430px; margin: 8px auto 24px; color: #475569; }
.tps-sent__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

/* map + WhatsApp */
.tps-contact-side { display: grid; gap: 20px; }
.tps-map-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    box-shadow: 0 30px 70px -42px rgba(15, 23, 42, 0.5);
}
.tps-map-card iframe { display: block; width: 100%; height: 420px; border: 0; }
.tps-map-card__bar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    color: #fff;
    background: rgba(15, 23, 42, 0.9);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6);
}
.tps-map-card__bar strong { display: block; font-size: 0.95rem; }
.tps-map-card__bar span { font-size: 0.82rem; color: #cbd5e1; }
.tps-map-card__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--tps-orange);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    transition: transform 0.3s var(--tps-ease), background 0.3s ease;
}
.tps-map-card__btn:hover { background: #ea580c; transform: translateY(-2px); }
.tps-wa-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #065f46);
    box-shadow: 0 20px 40px -24px rgba(22, 163, 74, 0.9);
    transition: transform 0.35s var(--tps-ease), box-shadow 0.35s ease;
}
.tps-wa-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -24px rgba(22, 163, 74, 0.95); }
.tps-wa-card__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    background: rgba(255, 255, 255, 0.16);
}
.tps-wa-card__body { flex: 1; }
.tps-wa-card__body strong { display: block; font-size: 1.05rem; }
.tps-wa-card__body small { font-size: 0.85rem; color: #dcfce7; }
.tps-wa-card__arrow { transition: transform 0.3s var(--tps-ease); }
.tps-wa-card:hover .tps-wa-card__arrow { transform: translateX(5px); }

/* Shortcuts ------------------------------------------------------------------- */
.tps-qlinks { margin-top: 84px; }
.tps-qlinks__grid {
    display: grid;
    gap: 18px;
    margin-top: 34px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tps-qlink {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: transform 0.35s var(--tps-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.tps-qlink:hover { transform: translateY(-5px); border-color: #bfdbfe; box-shadow: 0 24px 44px -26px rgba(37, 99, 235, 0.55); }
.tps-qlink__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--tps-blue);
    background: var(--tps-blue-50);
    transition: background 0.3s ease, color 0.3s ease;
}
.tps-qlink:hover .tps-qlink__icon { background: var(--tps-blue); color: #fff; }
.tps-qlink strong { font-size: 1.02rem; color: #0f172a; }
.tps-qlink small { padding-right: 24px; font-size: 0.88rem; line-height: 1.5; color: #64748b; }
.tps-qlink__arrow { position: absolute; right: 20px; bottom: 24px; color: #94a3b8; transition: transform 0.3s var(--tps-ease), color 0.3s ease; }
.tps-qlink:hover .tps-qlink__arrow { transform: translateX(4px); color: var(--tps-blue); }

@media (max-width: 1024px) {
    .tps-contact-main { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .tps-contact-hero__inner { grid-template-columns: 1fr; }
    .tps-contact-glass { justify-self: stretch; max-width: none; }
    /* stacked layout: a top-to-bottom wash so the parade photo still shows */
    .tps-contact-hero::before {
        background:
            radial-gradient(600px 300px at 90% 100%, rgba(241, 104, 58, 0.3), transparent 62%),
            linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.86) 45%, rgba(15, 23, 42, 0.95) 100%);
    }
    .tps-contact-hero__bg { object-position: 55% 0%; }
}
@media (max-width: 640px) {
    .tps-form-row { grid-template-columns: 1fr; }
    .tps-contact-hero__actions .tps-cbtn { flex: 1 1 auto; justify-content: center; }
    .tps-map-card iframe { height: 340px; }
    .tps-map-card__bar { flex-direction: column; align-items: flex-start; }
    .tps-channel:hover,
    .tps-qlink:hover { transform: none; }
}

/* ==========================================================================
   Newsroom (/news/latest, /news/, /news/category/…) — hero + search,
   top story, topic filter, story cards, pagination, call-to-action cards
   ========================================================================== */
.tps-newsroom {
    background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 42%);
    padding-bottom: 88px;
}

/* Hero (background = the top story's photo, blurred) ------------------------- */
.tps-newsroom-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: var(--tps-navy);
    padding: clamp(60px, 8vw, 100px) 0 clamp(150px, 16vw, 200px);
}
.tps-newsroom-hero__bg {
    position: absolute;
    top: -40px;
    left: -40px;
    z-index: -2;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    object-fit: cover;
    filter: blur(14px) saturate(1.25);
    opacity: 0.9;
}
.tps-newsroom-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(700px 360px at 12% 0%, rgba(37, 99, 235, 0.45), transparent 60%),
        radial-gradient(700px 360px at 88% 100%, rgba(241, 104, 58, 0.36), transparent 62%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.92) 100%);
}
.tps-newsroom-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
}
.tps-newsroom-hero__inner { display: flex; flex-direction: column; align-items: center; }
.tps-newsroom-hero h1 {
    margin: 20px 0 14px;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.tps-newsroom-hero h1 span {
    background: linear-gradient(120deg, #fdba74, var(--tps-orange) 55%, #fb7185);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tps-newsroom-hero p {
    max-width: 620px;
    font-size: 1.08rem;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.92);
}
.tps-news-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 620px;
    margin-top: 28px;
    padding: 7px 7px 7px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.25s ease;
}
.tps-news-search:focus-within { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.45), 0 24px 50px -20px rgba(0, 0, 0, 0.6); }
.tps-news-search > i { color: #94a3b8; }
.tps-news-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f172a;
    font-size: 1rem;
}
.tps-news-search button {
    flex: none;
    padding: 12px 22px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 12px 22px -12px rgba(37, 99, 235, 0.9);
    transition: transform 0.25s var(--tps-ease), filter 0.25s ease;
}
.tps-news-search button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tps-newsroom-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.tps-newsroom-hero__stats li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.85rem;
    color: #e2e8f0;
}
.tps-newsroom-hero__stats i { color: #fdba74; }

/* Whole card clickable through the title link -------------------------------- */
.tps-lead,
.tps-story { position: relative; }
.tps-stretched::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.tps-lead:focus-within,
.tps-story:focus-within { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 3px; }

/* Shared meta bits ------------------------------------------------------------ */
.tps-story__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}
.tps-story__meta i { margin-right: 6px; color: #94a3b8; }
.tps-story__cat {
    padding: 4px 11px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tps-byline { display: inline-flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 700; color: #0f172a; }
.tps-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 0 0 3px #dbeafe;
}
.tps-story__photos {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

/* Top story --------------------------------------------------------------------- */
.tps-lead {
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    overflow: hidden;
    margin-top: clamp(-130px, -11vw, -90px);
    border-radius: 28px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 40px 80px -40px rgba(15, 23, 42, 0.55);
    transition: transform 0.45s var(--tps-ease), box-shadow 0.45s var(--tps-ease);
}
.tps-lead:hover { transform: translateY(-6px); box-shadow: 0 50px 90px -40px rgba(15, 23, 42, 0.6); }
.tps-lead__media { position: relative; min-height: 400px; overflow: hidden; background: var(--tps-navy); }
.tps-lead__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--tps-ease);
}
.tps-lead:hover .tps-lead__media img { transform: scale(1.06); }
.tps-lead__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.5) 0%, transparent 45%);
}
.tps-lead__flag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fb923c, #c2410c);
    box-shadow: 0 10px 20px -10px rgba(234, 88, 12, 0.8);
}
.tps-lead__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 48px); }
.tps-lead__title {
    margin: 14px 0 12px;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.22;
    font-weight: 800;
    color: #0f172a;
}
.tps-lead:hover .tps-lead__title a { color: var(--tps-blue); }
.tps-lead__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-height: 1.75;
    color: #475569;
}
.tps-lead__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
}
.tps-lead__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 16px 30px -16px rgba(37, 99, 235, 0.9);
}
.tps-lead__cta i { transition: transform 0.3s var(--tps-ease); }
.tps-lead:hover .tps-lead__cta i { transform: translateX(4px); }

/* Topic filter ------------------------------------------------------------------ */
.tps-news-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 48px 0 26px;
}
.tps-news-filter--top {          /* no top story (search, later pages): the bar sits on the hero */
    position: relative;
    z-index: 2;
    margin-top: clamp(-120px, -10vw, -84px);
    padding: 14px 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 30px 60px -36px rgba(15, 23, 42, 0.5);
}
.tps-news-filter__pills {
    display: flex;
    gap: 8px;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tps-news-filter__pills::-webkit-scrollbar { display: none; }
.tps-filter-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tps-filter-pill span {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.72rem;
    text-align: center;
}
.tps-filter-pill:hover { border-color: #93c5fd; color: var(--tps-blue); }
.tps-filter-pill.is-active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 12px 22px -14px var(--tps-blue);
}
.tps-filter-pill.is-active span { background: rgba(255, 255, 255, 0.2); color: #fff; }
.tps-news-filter__count { font-size: 0.9rem; font-weight: 600; color: #64748b; }
.tps-news-filter__count a { color: var(--tps-blue); }
.tps-news-filter__count a:hover { text-decoration: underline; }

/* Story cards ------------------------------------------------------------------- */
.tps-stories {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tps-story {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease), border-color 0.4s ease;
}
.tps-story:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 30px 56px -28px rgba(37, 99, 235, 0.45);
}
.tps-story__media { position: relative; height: 210px; overflow: hidden; background: var(--tps-navy); }
.tps-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--tps-ease); }
.tps-story:hover .tps-story__media img { transform: scale(1.08); }
.tps-story__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.45) 0%, transparent 50%);
    pointer-events: none;
}
.tps-story__noimg {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 2.6rem;
    color: rgba(255, 255, 255, 0.8);
    background: radial-gradient(circle at 30% 20%, #1e3a8a 0%, var(--tps-navy) 75%);
}
.tps-story__date {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 8px 8px 7px;
    border-radius: 14px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5);
}
.tps-story__date b { font-size: 1.35rem; font-weight: 800; color: var(--tps-blue); }
.tps-story__date small {
    margin-top: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
}
.tps-story__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px; }
.tps-story__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 1.06rem;
    line-height: 1.38;
    font-weight: 800;
    color: #0f172a;
}
.tps-story__title a { transition: color 0.25s ease; }
.tps-story:hover .tps-story__title a { color: var(--tps-blue); }
.tps-story__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #64748b;
}
.tps-story__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}
.tps-story__go {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tps-blue-50);
    color: var(--tps-blue);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--tps-ease);
}
.tps-story:hover .tps-story__go { background: var(--tps-blue); color: #fff; transform: translateX(3px); }

/* Pagination ---------------------------------------------------------------------- */
.tps-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 46px;
}
.tps-pager__pages { display: flex; gap: 6px; }
.tps-pager__num,
.tps-pager__gap {
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-weight: 700;
    color: #334155;
}
.tps-pager__num { background: #fff; border: 1.5px solid #e2e8f0; transition: border-color 0.25s ease, color 0.25s ease; }
.tps-pager__num:hover { border-color: #93c5fd; color: var(--tps-blue); }
.tps-pager__num.is-current {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 12px 22px -14px var(--tps-blue);
}
.tps-pager__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: var(--tps-blue);
    font-weight: 700;
    transition: border-color 0.25s ease, transform 0.25s var(--tps-ease);
}
.tps-pager__step:hover { border-color: #93c5fd; transform: translateY(-1px); }
.tps-pager__step.is-disabled { opacity: 0.45; pointer-events: none; }

/* Call-to-action cards ------------------------------------------------------------- */
.tps-news-cta {
    display: grid;
    gap: 22px;
    margin-top: 76px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.tps-news-cta__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px;
    border-radius: 26px;
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-news-cta__card:hover { transform: translateY(-5px); }
.tps-news-cta__card--dark {
    color: #fff;
    background:
        radial-gradient(500px 240px at 100% 0%, rgba(241, 104, 58, 0.35), transparent 60%),
        linear-gradient(135deg, #1e3a8a, var(--tps-navy));
    box-shadow: 0 30px 60px -34px rgba(15, 23, 42, 0.8);
}
.tps-news-cta__card--light {
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.45);
}
.tps-news-cta__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}
.tps-news-cta__card--dark .tps-news-cta__icon { background: rgba(255, 255, 255, 0.14); color: #fdba74; }
.tps-news-cta__card--light .tps-news-cta__icon { background: #fff7ed; color: #c2410c; }
.tps-news-cta__card h2 { font-size: 1.4rem; font-weight: 800; }
.tps-news-cta__card p { max-width: 440px; line-height: 1.6; opacity: 0.82; }
.tps-news-cta__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; }
.tps-news-cta__card--dark .tps-news-cta__link { color: #fdba74; }
.tps-news-cta__card--light .tps-news-cta__link { color: var(--tps-blue); }
.tps-news-cta__link i { transition: transform 0.3s var(--tps-ease); }
.tps-news-cta__card:hover .tps-news-cta__link i { transform: translateX(4px); }

@media (max-width: 900px) {
    .tps-lead { grid-template-columns: 1fr; }
    .tps-lead__media { min-height: 250px; }
}
@media (max-width: 640px) {
    .tps-news-search { padding-left: 14px; }
    .tps-news-search button { padding: 11px 14px; }
    .tps-news-filter { flex-direction: column; align-items: stretch; }
    .tps-lead:hover,
    .tps-story:hover,
    .tps-news-cta__card:hover { transform: none; }
    .tps-pager__step { padding: 10px 12px; }
}

/* ==========================================================================
   Careers (Opportunities, Internships, Internship application, Benefits)
   ========================================================================== */
.tps-careers {
    background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 38%);
    padding-bottom: 90px;
}

/* colour tones shared by cards: set --tone / --tone-2 / --tone-soft */
.tps-tone--blue   { --tone: #2563eb; --tone-2: #1e3a8a; --tone-soft: #eff6ff; }
.tps-tone--green  { --tone: #10b981; --tone-2: #047857; --tone-soft: #ecfdf5; }
.tps-tone--red    { --tone: #ef4444; --tone-2: #b91c1c; --tone-soft: #fef2f2; }
.tps-tone--orange { --tone: #f97316; --tone-2: #c2410c; --tone-soft: #fff7ed; }
.tps-tone--purple { --tone: #8b5cf6; --tone-2: #6d28d9; --tone-soft: #f5f3ff; }
.tps-tone--amber  { --tone: #f59e0b; --tone-2: #b45309; --tone-soft: #fffbeb; }
.tps-tone--teal   { --tone: #14b8a6; --tone-2: #0f766e; --tone-soft: #f0fdfa; }

/* Page hero ------------------------------------------------------------------ */
.tps-phero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: var(--tps-navy);
    padding: clamp(64px, 9vw, 108px) 0 clamp(110px, 12vw, 150px);
}
.tps-phero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 40%;
    animation: tpsHeroDrift 18s var(--tps-ease) both;
}
.tps-phero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 420px at 88% 115%, rgba(241, 104, 58, 0.36), transparent 62%),
        linear-gradient(100deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.84) 42%,
                                rgba(30, 58, 138, 0.55) 74%, rgba(15, 23, 42, 0.4) 100%);
}
.tps-phero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
}
.tps-phero--compact {
    padding: clamp(52px, 7vw, 84px) 0 clamp(104px, 11vw, 136px);
    background:
        radial-gradient(800px 380px at 10% 0%, rgba(37, 99, 235, 0.5), transparent 60%),
        radial-gradient(700px 360px at 95% 110%, rgba(241, 104, 58, 0.35), transparent 62%),
        var(--tps-navy);
}
.tps-phero--compact::before { display: none; }
.tps-phero__copy { max-width: 720px; }
.tps-phero h1 {
    margin: 22px 0 16px;
    font-size: clamp(2.5rem, 6vw, 4.3rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.tps-phero--compact h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.tps-phero h1 span {
    background: linear-gradient(120deg, #fdba74, var(--tps-orange) 55%, #fb7185);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tps-phero__copy > p {
    max-width: 580px;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.92);
}
.tps-phero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tps-phero__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.88rem;
    color: #e2e8f0;
}
.tps-phero__chips i { color: #fdba74; }

/* Careers tab bar (sits on the hero's bottom edge) ------------------------------ */
.tps-ctabs {
    position: relative;
    z-index: 3;
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 6px;
    margin: -34px auto 0;
    padding: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 50px -24px rgba(15, 23, 42, 0.45);
}
.tps-ctabs::-webkit-scrollbar { display: none; }
.tps-ctab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
    color: #334155;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.tps-ctab i { color: #94a3b8; transition: color 0.25s ease; }
.tps-ctab:hover { background: #f1f5f9; color: var(--tps-blue); }
.tps-ctab:hover i { color: var(--tps-blue); }
.tps-ctab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 12px 24px -14px var(--tps-blue);
}
.tps-ctab.is-active i { color: #fdba74; }

/* Section heads -------------------------------------------------------------------- */
.tps-careers__section { margin-top: 64px; scroll-margin-top: 90px; }
.tps-careers__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 28px;
}
.tps-careers__title {
    margin-top: 6px;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
}
button.tps-filter-pill { cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 700; }
@media (min-width: 641px) {   /* wide screens: let many filters wrap instead of scrolling */
    .tps-careers__head .tps-news-filter__pills { flex-wrap: wrap; justify-content: flex-end; }
}
.tps-filter-pill > i { font-size: 0.8rem; opacity: 0.8; }

/* Shared checklist ------------------------------------------------------------------ */
.tps-checklist { display: grid; gap: 10px; }
.tps-checklist li {
    position: relative;
    padding-left: 30px;
    line-height: 1.55;
    color: #334155;
}
.tps-checklist li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--tone-2, #047857);
    background: var(--tone-soft, #d1fae5);
}

/* Job openings ---------------------------------------------------------------------- */
.tps-jobs { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tps-job {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 28px 26px 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 22px 46px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-job::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.tps-job::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--tone-soft);
    transition: transform 0.5s var(--tps-ease);
}
.tps-job > * { position: relative; z-index: 1; }
.tps-job:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -30px rgba(15, 23, 42, 0.5); }
.tps-job:hover::after { transform: scale(1.3); }
.tps-job__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tps-job__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 14px 26px -14px var(--tone);
}
.tps-job__title { font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.tps-job__meta {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tone-2);
}
.tps-job__text { margin: 14px 0 22px; line-height: 1.7; color: #64748b; }
.tps-job__foot { margin-top: auto; }
.tps-job__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 13px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 14px 26px -16px var(--tone);
    transition: transform 0.3s var(--tps-ease), filter 0.3s ease;
}
.tps-job__btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.tps-job__btn i { font-size: 0.78rem; }
.tps-job__btn--ghost { color: var(--tone-2); background: var(--tone-soft); box-shadow: none; }

/* status badge */
.tps-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
    color: #047857;
    background: #d1fae5;
}
.tps-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tps-status--open i { animation: tpsContactPulse 2s infinite; }
.tps-status--limited   { color: #b45309; background: #fef3c7; }
.tps-status--selective { color: #6d28d9; background: #ede9fe; }
.tps-status--closed    { color: #b91c1c; background: #fee2e2; }

/* info cards */
.tps-cinfo { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tps-cinfo__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: transform 0.35s var(--tps-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.tps-cinfo__card:hover { transform: translateY(-5px); border-color: var(--tone-soft); box-shadow: 0 26px 48px -30px rgba(15, 23, 42, 0.5); }
.tps-cinfo__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--tone-2);
    background: var(--tone-soft);
}
.tps-cinfo__card strong { font-size: 1.05rem; color: #0f172a; }
.tps-cinfo__card small { font-size: 0.9rem; line-height: 1.55; color: #64748b; }
.tps-cinfo__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; font-size: 0.9rem; color: var(--tone-2); }
.tps-cinfo__link i { font-size: 0.75rem; transition: transform 0.3s var(--tps-ease); }
.tps-cinfo__card:hover .tps-cinfo__link i { transform: translateX(4px); }

/* Internship cards -------------------------------------------------------------------- */
.tps-interns { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tps-intern {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 44px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease), border-color 0.4s ease;
}
.tps-intern:hover { transform: translateY(-6px); border-color: rgba(37, 99, 235, 0.25); box-shadow: 0 30px 56px -28px rgba(37, 99, 235, 0.45); }
.tps-intern__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tps-intern__icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 14px 26px -14px var(--tps-blue);
    transition: transform 0.4s var(--tps-ease);
}
.tps-intern:hover .tps-intern__icon { transform: rotate(-6deg) scale(1.05); }
.tps-intern__cat {
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tps-intern__title { font-size: 1.18rem; font-weight: 800; line-height: 1.3; color: #0f172a; }
.tps-intern__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 10px 0 16px;
    line-height: 1.65;
    color: #64748b;
}
.tps-intern__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tps-intern__chips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
}
.tps-intern__chips i { color: var(--tps-blue); }
.tps-intern__btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 16px 28px -18px rgba(37, 99, 235, 0.9);
    transition: transform 0.3s var(--tps-ease), filter 0.3s ease;
}
.tps-intern__btn i { transition: transform 0.3s var(--tps-ease); }
.tps-intern__btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tps-intern__btn:hover i { transform: translateX(4px); }

/* steps */
.tps-steps { display: grid; gap: 20px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.tps-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.tps-step__num {
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #fb923c, #c2410c);
    box-shadow: 0 0 0 6px #fff7ed;
}
.tps-step strong { font-size: 1.05rem; color: #0f172a; }
.tps-step small { font-size: 0.92rem; line-height: 1.6; color: #64748b; }

/* Internship application ----------------------------------------------------------------- */
.tps-apply {
    display: grid;
    gap: 28px;
    align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
}
.tps-apply__side { display: grid; gap: 18px; }
.tps-place {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 22px 46px -32px rgba(15, 23, 42, 0.45);
}
.tps-place h3 { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.tps-place p { line-height: 1.65; color: #64748b; }
.tps-place .tps-intern__chips { margin-bottom: 0; }
.tps-place--soft { background: #f8fafc; box-shadow: none; }
.tps-back { display: inline-flex; align-items: center; gap: 10px; padding: 6px 4px; font-weight: 700; color: var(--tps-blue); }
.tps-back i { transition: transform 0.3s var(--tps-ease); }
.tps-back:hover i { transform: translateX(-4px); }

/* file drop zone */
.tps-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.tps-drop:hover,
.tps-drop:focus-within { border-color: var(--tps-blue); background: #eff6ff; }
.tps-drop.has-file { border-style: solid; border-color: #10b981; background: #ecfdf5; }
.tps-drop.has-error { border-color: #ef4444; background: #fff; }
.tps-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tps-drop__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--tps-blue);
    background: #dbeafe;
}
.tps-drop.has-file .tps-drop__icon { color: #047857; background: #d1fae5; }
.tps-drop__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tps-drop__body strong { color: #0f172a; overflow-wrap: anywhere; }
.tps-drop__body small { font-size: 0.84rem; color: #64748b; }

/* Benefits -------------------------------------------------------------------------------- */
.tps-bintro {
    display: grid;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.tps-bintro__copy p { margin-top: 14px; font-size: 1.05rem; line-height: 1.8; color: #475569; }
.tps-bintro__copy .tps-btn-gradient { margin-top: 26px; }
.tps-bintro__media { position: relative; margin: 0; }
.tps-bintro__media::before {
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    z-index: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--tps-orange), #c2410c);
    opacity: 0.9;
}
.tps-bintro__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.6);
}
.tps-bintro__badge {
    position: absolute;
    left: -18px;
    bottom: 28px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 16px;
    color: #fff;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.7);
}
.tps-bintro__badge i { color: #fdba74; }

.tps-benefits { display: grid; gap: 24px; margin-top: 36px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tps-benefit {
    position: relative;
    overflow: hidden;
    padding: 30px 26px 28px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 44px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-benefit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.tps-benefit:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -30px rgba(15, 23, 42, 0.5); }
.tps-benefit__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 14px 26px -14px var(--tone);
    transition: transform 0.4s var(--tps-ease);
}
.tps-benefit:hover .tps-benefit__icon { transform: rotate(-6deg) scale(1.06); }
.tps-benefit h3 { margin-bottom: 16px; font-size: 1.2rem; font-weight: 800; color: #0f172a; }

/* testimonials */
.tps-quotes {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 80px;
    padding: clamp(60px, 8vw, 90px) 0;
    color: #fff;
    background:
        radial-gradient(800px 400px at 0% 0%, rgba(37, 99, 235, 0.45), transparent 60%),
        radial-gradient(700px 380px at 100% 100%, rgba(241, 104, 58, 0.32), transparent 62%),
        var(--tps-navy);
}
.tps-quotes__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fdba74;
}
.tps-quotes__title { margin-top: 8px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
.tps-quotes__stage { display: grid; max-width: 820px; margin: 36px auto 0; }
.tps-quote {
    grid-area: 1 / 1;
    margin: 0;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.tps-quote__mark { font-size: 2.2rem; color: var(--tps-orange); opacity: 0.9; }
.tps-quote blockquote { margin: 16px 0 26px; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.8; color: #e2e8f0; }
.tps-quote__who { display: flex; align-items: center; gap: 14px; }
.tps-quote__who img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background: #1e293b;
}
.tps-quote__initials {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-orange), #c2410c);
    border: 3px solid rgba(255, 255, 255, 0.85);
}
.tps-quote__who strong { display: block; font-size: 1.02rem; }
.tps-quote__who small { color: #93c5fd; font-size: 0.88rem; }
.tps-quotes__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.tps-quotes__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s var(--tps-ease);
}
.tps-quotes__arrow:hover { background: var(--tps-blue); transform: scale(1.06); }
.tps-quotes__dots { display: flex; gap: 8px; }
.tps-quotes__dots button {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: width 0.3s var(--tps-ease), background 0.3s ease;
}
.tps-quotes__dots button.is-active { width: 28px; background: var(--tps-orange); }

/* department explorer */
.tps-depts {
    margin-top: 34px;
    padding: clamp(18px, 3vw, 30px);
    border-radius: 28px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 30px 70px -44px rgba(15, 23, 42, 0.5);
}
.tps-depts__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tps-dept { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.tps-dept__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.tps-dept__body h3 { font-size: 1.35rem; font-weight: 800; color: #0f172a; }
.tps-dept__body p { margin: 10px 0 18px; line-height: 1.7; color: #475569; }

/* call-to-action band */
.tps-cband {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(30px, 5vw, 50px);
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(500px 260px at 100% 0%, rgba(241, 104, 58, 0.4), transparent 60%),
        linear-gradient(135deg, #1e3a8a, var(--tps-navy));
    box-shadow: 0 40px 80px -44px rgba(15, 23, 42, 0.85);
}
.tps-cband h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.tps-cband p { max-width: 560px; margin-top: 8px; line-height: 1.7; color: rgba(226, 232, 240, 0.9); }
.tps-cband__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1024px) {
    .tps-apply { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .tps-bintro,
    .tps-dept { grid-template-columns: 1fr; }
    .tps-bintro__media { margin-right: 22px; }
    .tps-bintro__badge { left: 12px; }
    .tps-phero::before {
        background:
            radial-gradient(600px 300px at 90% 100%, rgba(241, 104, 58, 0.3), transparent 62%),
            linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.86) 45%, rgba(15, 23, 42, 0.95) 100%);
    }
}
@media (max-width: 640px) {
    /* three equal tabs, icon above the label, so all fit on a phone */
    .tps-ctabs { width: 100%; }
    .tps-ctab { flex: 1 1 0; flex-direction: column; gap: 5px; padding: 10px 6px; }
    .tps-ctab span { font-size: 0.78rem; }
    .tps-careers__head { flex-direction: column; align-items: stretch; }
    .tps-job:hover,
    .tps-intern:hover,
    .tps-benefit:hover,
    .tps-cinfo__card:hover { transform: none; }
}

/* ==========================================================================
   Facilities (Sports, Library + research repository, Training)
   Builds on the Careers styles (.tps-phero, .tps-ctabs, .tps-tone--*, .tps-cband…)
   ========================================================================== */
.tps-careers__lead { max-width: 640px; margin-top: 8px; line-height: 1.7; color: #64748b; }
.tps-phero .tps-news-search { margin-top: 26px; }

/* feature cards */
.tps-fcards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tps-fcard {
    position: relative;
    overflow: hidden;
    padding: 30px 26px 28px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 22px 46px -32px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-fcard::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--tone-soft);
    transition: transform 0.5s var(--tps-ease);
}
.tps-fcard > * { position: relative; z-index: 1; }
.tps-fcard:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -30px rgba(15, 23, 42, 0.5); }
.tps-fcard:hover::after { transform: scale(1.3); }
.tps-fcard__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 14px 26px -14px var(--tone);
}
.tps-fcard h3 { font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.tps-fcard p { margin-top: 8px; line-height: 1.7; color: #64748b; }

/* figures band */
.tps-statband {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border-radius: 26px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 34px 70px -40px rgba(15, 23, 42, 0.8);
}
.tps-statband--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tps-statband__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px 18px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(400px 200px at 50% 0%, rgba(37, 99, 235, 0.35), transparent 70%),
        var(--tps-navy);
}
.tps-statband__item strong {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(120deg, #fdba74, var(--tps-orange));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tps-statband__item span { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #cbd5e1; }

/* segmented control (Browse / Submit) */
.tps-seg {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.5);
}
.tps-seg button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}
.tps-seg button span { padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 0.72rem; }
.tps-seg button:hover { color: var(--tps-blue); }
.tps-seg button.is-active { color: #fff; background: linear-gradient(135deg, var(--tps-blue), #1e3a8a); }
.tps-seg button.is-active span { background: rgba(255, 255, 255, 0.2); color: #fff; }

.tps-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    line-height: 1.6;
}
.tps-notice i { margin-top: 3px; font-size: 1.1rem; color: #10b981; }

/* research filter bar */
.tps-rfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.5);
}
.tps-rfilter__search {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
}
.tps-rfilter__search:focus-within { border-color: var(--tps-blue); background: #fff; }
.tps-rfilter__search i { color: #94a3b8; }
.tps-rfilter__search input { flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: none; background: transparent; color: #0f172a; }
.tps-rfilter select {
    flex: 0 1 auto;
    padding: 11px 36px 11px 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-weight: 600;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
}
.tps-rfilter__go {
    padding: 11px 20px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
}
.tps-rfilter__count { margin-bottom: 16px; }

/* paper cards */
.tps-papers { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tps-paper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px 20px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease), border-color 0.4s ease;
}
.tps-paper:hover { transform: translateY(-5px); border-color: rgba(37, 99, 235, 0.25); box-shadow: 0 28px 52px -30px rgba(37, 99, 235, 0.45); }
.tps-paper__top { display: flex; align-items: center; justify-content: space-between; }
.tps-paper__year { font-size: 0.82rem; font-weight: 700; color: #64748b; }
.tps-paper__title { font-size: 1.12rem; font-weight: 800; line-height: 1.35; color: #0f172a; }
.tps-paper__authors { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: #334155; }
.tps-paper__authors i { color: var(--tps-blue); }
.tps-paper__abstract {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #64748b;
}
.tps-paper__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tps-paper__tags span { padding: 4px 10px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 0.75rem; font-weight: 600; }
.tps-paper__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}
.tps-paper__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #64748b; }
.tps-paper__actions { display: inline-flex; gap: 8px; }
.tps-paper__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 11px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
}
.tps-paper__btn--ghost { color: var(--tps-blue); background: #eff6ff; }

/* form extras: select field, radio chips */
.tps-field--static label { transform: translateY(-10px) scale(0.78); color: var(--tps-blue); font-weight: 600; }
.tps-field select {
    display: block;
    width: 100%;
    padding: 24px 40px 10px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 1rem;
    outline: none;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
}
.tps-field select:focus { border-color: var(--tps-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
.tps-field.has-error select { border-color: #ef4444; }
.tps-choice { margin: 0; padding: 0; border: 0; }
.tps-choice legend {
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}
.tps-choice label { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; }
.tps-choice input { position: absolute; opacity: 0; pointer-events: none; }
.tps-choice span {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 600;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.tps-choice input:checked + span { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--tps-blue), #1e3a8a); }
.tps-choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25); }

/* opening hours + library news */
.tps-libinfo { display: grid; gap: 26px; align-items: start; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.tps-hours {
    padding: 30px 28px;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(400px 220px at 100% 0%, rgba(241, 104, 58, 0.35), transparent 60%),
        linear-gradient(135deg, #1e3a8a, var(--tps-navy));
    box-shadow: 0 34px 70px -40px rgba(15, 23, 42, 0.85);
}
.tps-hours__icon {
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fdba74;
    background: rgba(255, 255, 255, 0.12);
}
.tps-hours h2 { font-size: 1.4rem; font-weight: 800; }
.tps-hours ul { display: grid; gap: 2px; margin: 18px 0 20px; }
.tps-hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}
.tps-hours li strong { color: #fff; text-align: right; }
.tps-hours__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fdba74; }
.tps-hours__link i { font-size: 0.8rem; transition: transform 0.3s var(--tps-ease); }
.tps-hours__link:hover i { transform: translateX(4px); }
.tps-libnews ol { display: grid; gap: 14px; margin-top: 20px; }
.tps-libnews li {
    display: flex;
    gap: 18px;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: border-color 0.3s ease, transform 0.3s var(--tps-ease);
}
.tps-libnews li:hover { border-color: #bfdbfe; transform: translateX(4px); }
.tps-libnews__date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    line-height: 1;
    background: var(--tps-blue-50);
}
.tps-libnews__date b { font-size: 1.35rem; font-weight: 800; color: var(--tps-blue); }
.tps-libnews__date small { margin-top: 4px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #475569; }
.tps-libnews h3 { font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.tps-libnews p { margin-top: 4px; font-size: 0.92rem; line-height: 1.6; color: #64748b; }

/* sports: live ticker, story cards, modal, gallery */
.tps-ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 12px 16px;
    border-radius: 18px;
    color: #fff;
    background: var(--tps-navy);
}
.tps-ticker__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #dc2626;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tps-ticker__badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: tpsContactPulse 1.6s infinite; }
.tps-ticker__track { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.tps-ticker__item small { margin-right: 8px; color: #fdba74; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; }
.tps-ticker__item b { color: #fdba74; }

.tps-sgrid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tps-scard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 44px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-scard:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -30px rgba(15, 23, 42, 0.5); }
.tps-scard__media { position: relative; height: 220px; overflow: hidden; background: var(--tps-navy); }
.tps-scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--tps-ease); }
.tps-scard:hover .tps-scard__media img { transform: scale(1.06); }
.tps-scard__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.tps-scard__title { font-size: 1.15rem; font-weight: 800; line-height: 1.35; color: #0f172a; }
.tps-scard__text { line-height: 1.7; color: #64748b; }
.tps-scard__more {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
    box-shadow: 0 14px 26px -16px rgba(37, 99, 235, 0.9);
}
.tps-scard__more i { transition: transform 0.3s var(--tps-ease); }
.tps-scard__more:hover i { transform: translateX(4px); }
.tps-scard--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.tps-scard--lead .tps-scard__media { height: auto; min-height: 340px; }
.tps-scard--lead .tps-scard__body { justify-content: center; padding: clamp(24px, 4vw, 44px); }
.tps-scard--lead .tps-scard__title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }

.tps-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.tps-modal__panel {
    position: relative;
    width: min(760px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
.tps-modal__close {
    position: sticky;
    top: 14px;
    float: right;
    z-index: 2;
    width: 42px;
    height: 42px;
    margin: 14px 14px -56px 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(15, 23, 42, 0.75);
    cursor: pointer;
}
.tps-modal__img { width: 100%; max-height: 380px; object-fit: cover; }
.tps-modal__body { padding: 26px 30px 32px; }
.tps-modal__body h2 { margin: 12px 0 14px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 800; line-height: 1.25; color: #0f172a; }
.tps-modal__body p { margin-top: 12px; line-height: 1.8; color: #334155; }

.tps-gallery { display: grid; gap: 16px; margin-top: 34px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tps-gallery__item {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 22px;
    aspect-ratio: 4 / 3;
    background: var(--tps-navy);
}
.tps-gallery__item--wide { grid-row: span 2; aspect-ratio: auto; }
.tps-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--tps-ease); }
.tps-gallery__item:hover img { transform: scale(1.06); }
.tps-gallery__item figcaption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

/* training: jump links, academic course cards, programme photo cards */
.tps-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tps-jump a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-weight: 700;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--tps-ease);
}
.tps-jump a i { color: var(--tps-orange); }
.tps-jump a span { padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 0.75rem; }
.tps-jump a:hover { border-color: #93c5fd; color: var(--tps-blue); transform: translateY(-2px); }

.tps-courses { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.tps-course {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-course::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.tps-course:hover { transform: translateY(-5px); box-shadow: 0 28px 52px -30px rgba(15, 23, 42, 0.5); }
.tps-course__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px 24px 22px; }
/* looping course video (plays only while on screen — see enhance.js) */
.tps-course__media {
    position: relative;
    height: 170px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, var(--tone) 0%, var(--tone-2) 60%, var(--tps-navy) 100%);
}
.tps-course__media::before {          /* shown until the clip starts */
    content: "008";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.55);
}
.tps-course__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.45) 0%, transparent 60%);
    pointer-events: none;
}
.tps-course__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.9s var(--tps-ease);
}
.tps-course__media video.is-playing { opacity: 1; }
.tps-course:hover .tps-course__media video { transform: scale(1.05); }
.tps-course.has-media::before { z-index: 2; }
.tps-course.has-media .tps-course__icon { margin-top: -50px; position: relative; z-index: 2; box-shadow: 0 0 0 4px #fff, 0 14px 26px -14px var(--tone); }
.tps-course__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tps-course__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
}
.tps-course__level {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tone-2);
    background: var(--tone-soft);
}
.tps-course h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.35; color: #0f172a; }
.tps-course p { font-size: 0.92rem; line-height: 1.65; color: #64748b; }
.tps-course__duration {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}
.tps-course__duration i { color: var(--tps-blue); }

.tps-pcards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tps-pcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-pcard:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -30px rgba(15, 23, 42, 0.5); }
.tps-pcard__media { position: relative; height: 190px; overflow: hidden; background: var(--tps-navy); }
.tps-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--tps-ease); }
.tps-pcard:hover .tps-pcard__media img { transform: scale(1.07); }
.tps-pcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 23, 42, 0.5), transparent 55%); }
.tps-pcard__level {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fb923c, #c2410c);
}
.tps-pcard__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.tps-pcard__body h3 { font-size: 1.08rem; font-weight: 800; line-height: 1.35; color: #0f172a; }
.tps-pcard__body p { font-size: 0.92rem; line-height: 1.65; color: #64748b; }

@media (max-width: 900px) {
    .tps-statband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tps-statband--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tps-libinfo { grid-template-columns: 1fr; }
    .tps-scard--lead { grid-template-columns: 1fr; }
    .tps-scard--lead .tps-scard__media { min-height: 240px; }
    .tps-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tps-gallery__item--wide { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
    .tps-statband--three { grid-template-columns: 1fr; }
    .tps-statband__item { padding: 24px 14px; }
    .tps-seg { width: 100%; }
    .tps-seg button { flex: 1; justify-content: center; }
    .tps-rfilter select { flex: 1 1 45%; }
    .tps-rfilter__go { flex: 1 1 100%; }
    .tps-modal { padding: 0; align-items: flex-end; }
    .tps-modal__panel { max-height: 92vh; border-radius: 26px 26px 0 0; }
    .tps-gallery { grid-template-columns: 1fr; }
    .tps-fcard:hover,
    .tps-paper:hover,
    .tps-scard:hover,
    .tps-course:hover,
    .tps-pcard:hover { transform: none; }
}

/* ==========================================================================
   About Us (History, Mission, Leadership, Departments)
   Builds on the Careers/Facilities styles (.tps-phero, .tps-ctabs, tones, modal…)
   ========================================================================== */
.tps-phero__quote {
    max-width: 580px;
    padding-left: 16px;
    border-left: 3px solid var(--tps-orange);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.95);
}

/* History: year rail + alternating timeline ------------------------------------ */
.tps-yearrail {
    position: sticky;
    top: 78px;
    z-index: 20;
    display: flex;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 46px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.5);
}
.tps-yearrail::-webkit-scrollbar { display: none; }
.tps-yearrail a {
    flex: none;
    padding: 8px 14px;
    border-radius: 999px;
    color: #475569;
    font-weight: 800;
    font-size: 0.88rem;
    transition: background 0.25s ease, color 0.25s ease;
}
.tps-yearrail a:hover { color: var(--tps-blue); background: #f1f5f9; }
.tps-yearrail a.is-active { color: #fff; background: linear-gradient(135deg, var(--tps-orange), #c2410c); }

.tps-timeline { position: relative; display: grid; gap: 34px; }
.tps-timeline::before {                 /* the spine */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--tps-blue), #1e3a8a 50%, var(--tps-orange));
    opacity: 0.85;
}
.tps-milestone { position: relative; display: grid; grid-template-columns: 1fr 1fr; scroll-margin-top: 150px; }
.tps-milestone__dot {
    position: absolute;
    top: 34px;
    left: 50%;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--tps-blue);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.tps-milestone.is-in .tps-milestone__dot { border-color: var(--tps-orange); box-shadow: 0 0 0 8px rgba(241, 104, 58, 0.18); }
.tps-milestone__card {
    grid-column: 1;
    margin-right: 44px;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 50px -32px rgba(15, 23, 42, 0.5);
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s var(--tps-ease), transform 0.7s var(--tps-ease), box-shadow 0.4s ease;
}
.tps-milestone--flip .tps-milestone__card { grid-column: 2; margin: 0 0 0 44px; transform: translateX(30px); }
.tps-milestone.is-in .tps-milestone__card { opacity: 1; transform: none; }
.tps-milestone__card:hover { box-shadow: 0 34px 64px -32px rgba(15, 23, 42, 0.55); }
.tps-milestone__media { position: relative; height: 220px; overflow: hidden; background: var(--tps-navy); }
.tps-milestone__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--tps-ease); }
.tps-milestone__card:hover .tps-milestone__media img { transform: scale(1.06); }
.tps-milestone__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 23, 42, 0.6), transparent 55%); }
.tps-milestone__year {
    position: absolute;
    left: 20px;
    bottom: 14px;
    z-index: 1;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.tps-milestone__year--inline {
    position: static;
    display: block;
    margin-bottom: 6px;
    color: var(--tps-orange);
    text-shadow: none;
}
.tps-milestone__body { padding: 22px 24px 26px; }
.tps-milestone__body h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: #0f172a; }
.tps-milestone__body p { margin-top: 10px; line-height: 1.75; color: #475569; }

/* Mission & vision ------------------------------------------------------------- */
.tps-mv { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tps-mv__card {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 28px;
    color: #fff;
    box-shadow: 0 34px 70px -40px rgba(15, 23, 42, 0.85);
}
.tps-mv__card--mission {
    background:
        radial-gradient(500px 260px at 100% 0%, rgba(37, 99, 235, 0.55), transparent 60%),
        linear-gradient(135deg, #1e3a8a, var(--tps-navy));
}
.tps-mv__card--vision {
    background:
        radial-gradient(500px 260px at 100% 0%, rgba(253, 186, 116, 0.45), transparent 60%),
        linear-gradient(135deg, #ea580c, #9a3412);
}
.tps-mv__card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 26px solid rgba(255, 255, 255, 0.07);
}
.tps-mv__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.15);
}
.tps-mv__label { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.tps-mv__card p { margin-top: 10px; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.55; }

.tps-values { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tps-value {
    position: relative;
    overflow: hidden;
    padding: 26px 22px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease), border-color 0.4s ease;
}
.tps-value:hover { transform: translateY(-6px); border-color: var(--tone-soft); box-shadow: 0 28px 52px -30px rgba(15, 23, 42, 0.5); }
.tps-value__num {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tone-soft);
    transition: color 0.4s ease;
}
.tps-value:hover .tps-value__num { color: var(--tone); opacity: 0.25; }
.tps-value__icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 12px 24px -12px var(--tone);
}
.tps-value h3 { font-size: 1.12rem; font-weight: 800; color: #0f172a; }
.tps-value p { margin-top: 8px; font-size: 0.92rem; line-height: 1.65; color: #64748b; }

/* Leadership --------------------------------------------------------------------- */
.tps-head {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    border-radius: 30px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 40px 80px -44px rgba(15, 23, 42, 0.6);
}
.tps-head__photo {
    position: relative;
    min-height: 420px;
    background: radial-gradient(circle at 30% 20%, #1e3a8a, var(--tps-navy) 75%);
}
.tps-head__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tps-head__initials,
.tps-leader__initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3.4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    background: radial-gradient(circle at 30% 20%, #1e3a8a, var(--tps-navy) 75%);
}
.tps-head__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 56px); }
.tps-head__quote {
    position: relative;
    margin: 16px 0 26px;
    font-size: clamp(1.1rem, 1.9vw, 1.35rem);
    font-weight: 600;
    line-height: 1.75;
    color: #1e293b;
}
.tps-head__quote i { display: block; margin-bottom: 12px; font-size: 2rem; color: var(--tps-orange); }
.tps-head__who { padding-left: 16px; border-left: 4px solid var(--tps-orange); }
.tps-head__who strong { display: block; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.tps-head__who span { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }

.tps-leaders { display: grid; gap: 24px; margin-top: 36px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tps-leader__open {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 26px;
    background: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 22px 46px -32px rgba(15, 23, 42, 0.5);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-leader__open:hover { transform: translateY(-6px); box-shadow: 0 34px 64px -32px rgba(15, 23, 42, 0.55); }
.tps-leader__open:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 3px; }
.tps-leader__photo { position: relative; display: block; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--tps-navy); }
.tps-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.9s var(--tps-ease); }
.tps-leader__open:hover .tps-leader__photo img { transform: scale(1.05); }
.tps-leader__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 23, 42, 0.55), transparent 45%); }
.tps-leader__rank {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #fb923c, #c2410c);
}
.tps-leader__body { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; }
.tps-leader__position { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tps-orange); }
.tps-leader__name { font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.tps-leader__role { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.tps-leader__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; font-size: 0.88rem; color: var(--tps-blue); }
.tps-leader__more i { font-size: 0.78rem; transition: transform 0.3s var(--tps-ease); }
.tps-leader__open:hover .tps-leader__more i { transform: translateX(4px); }

.tps-profile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); width: min(820px, 100%); }
.tps-profile > .tps-modal__close { position: absolute; top: 14px; right: 14px; float: none; margin: 0; }
.tps-profile__photo { position: relative; min-height: 340px; background: var(--tps-navy); }
.tps-profile__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tps-profile .tps-modal__body { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.tps-profile__quote { margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--tps-orange); font-style: italic; line-height: 1.75; color: #334155; }

/* Departments ------------------------------------------------------------------- */
.tps-depgrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tps-dep {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding: 26px 24px 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 44px -32px rgba(15, 23, 42, 0.45);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-dep::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.tps-dep:hover { transform: translateY(-6px); box-shadow: 0 30px 58px -30px rgba(15, 23, 42, 0.5); }
.tps-dep__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tps-dep__icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 14px 26px -14px var(--tone);
}
.tps-dep__head {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--tone-soft);
    color: var(--tone-2);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: right;
}
.tps-dep h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: #0f172a; }
.tps-dep p { line-height: 1.65; color: #64748b; }
.tps-dep__more {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    color: var(--tone-2);
    background: var(--tone-soft);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}
.tps-dep__more i { font-size: 0.78rem; transition: transform 0.3s var(--tps-ease); }
.tps-dep__more:hover { color: #fff; background: linear-gradient(135deg, var(--tone), var(--tone-2)); }
.tps-dep__more:hover i { transform: translateX(4px); }

.tps-depmodal__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 30px 30px 24px;
    color: #fff;
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(135deg, var(--tone-2), var(--tps-navy));
}
.tps-depmodal__head h2 { padding-right: 46px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; line-height: 1.25; }
.tps-depmodal__head .tps-dep__icon { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.tps-dep__head--light { margin-top: 8px; color: #fff; background: rgba(255, 255, 255, 0.16); }
.tps-depmodal .tps-modal__body > p { margin-top: 0; }
.tps-depmodal__sub { margin: 22px 0 12px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone-2); }

/* four tabs (About) */
@media (max-width: 640px) {
    .tps-ctabs--four .tps-ctab { padding: 10px 4px; }
    .tps-ctabs--four .tps-ctab span { font-size: 0.72rem; }
}

@media (max-width: 900px) {
    .tps-timeline::before { left: 18px; }
    .tps-milestone { grid-template-columns: 1fr; }
    .tps-milestone__dot { left: 18px; }
    .tps-milestone__card,
    .tps-milestone--flip .tps-milestone__card { grid-column: 1; margin: 0 0 0 46px; transform: translateY(24px); }
    .tps-head,
    .tps-profile { grid-template-columns: 1fr; }
    .tps-head__photo { min-height: 320px; }
    .tps-profile__photo { min-height: 280px; }
}
@media (max-width: 640px) {
    .tps-yearrail { top: 70px; }
    .tps-milestone__media { height: 180px; }
    .tps-milestone__year { font-size: 2rem; }
    .tps-value:hover,
    .tps-dep:hover,
    .tps-leader__open:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tps-milestone__card { opacity: 1; transform: none; }
}

/* ==========================================================================
   Admissions (Undergraduate, Graduate, Application form)
   ========================================================================== */
.tps-partner-note {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff, #fff7ed);
    border: 1px solid #dbeafe;
}
.tps-partner-note__icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tps-blue), #1e3a8a);
}
.tps-partner-note p { line-height: 1.65; color: #334155; }

.tps-courses--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tps-course__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}
.tps-course__foot .tps-course__duration { margin-top: 0; }
.tps-course__links { display: inline-flex; gap: 8px; }

/* graduate programme cards */
.tps-gprogs { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tps-gprog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 26px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 26px 54px -34px rgba(15, 23, 42, 0.5);
    transition: transform 0.4s var(--tps-ease), box-shadow 0.4s var(--tps-ease);
}
.tps-gprog:hover { transform: translateY(-6px); box-shadow: 0 36px 66px -34px rgba(15, 23, 42, 0.55); }
.tps-gprog__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 26px 24px;
    color: #fff;
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(135deg, var(--tone-2), var(--tps-navy));
}
.tps-gprog__icon {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    background: rgba(255, 255, 255, 0.16);
}
.tps-gprog__head h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.tps-gprog__duration {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.16);
}
.tps-gprog__body { display: flex; flex: 1; flex-direction: column; padding: 24px 26px 26px; }
.tps-gprog__body > p { line-height: 1.7; color: #475569; }
.tps-gprog__sub { margin: 20px 0 12px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone-2); }
.tps-gprog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; }
.tps-gprog__actions .tps-paper__btn { border: 0; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }

/* FAQ accordion */
.tps-faq { display: grid; gap: 12px; max-width: 820px; margin: 32px auto 0; }
.tps-faq__item {
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tps-faq__item.is-open { border-color: #bfdbfe; box-shadow: 0 18px 40px -30px rgba(37, 99, 235, 0.6); }
.tps-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.tps-faq__q i {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    color: var(--tps-blue);
    background: var(--tps-blue-50);
    transition: transform 0.3s var(--tps-ease), background 0.3s ease, color 0.3s ease;
}
.tps-faq__item.is-open .tps-faq__q i { transform: rotate(45deg); color: #fff; background: var(--tps-blue); }
.tps-faq__a p { padding: 0 22px 20px; line-height: 1.7; color: #475569; }

@media (max-width: 640px) {
    .tps-partner-note { align-items: flex-start; }
    .tps-gprog:hover { transform: none; }
}

/* ==========================================================================
   Site footer (partials/footer.html)
   ========================================================================== */
.tps-footer { color: #cbd5e1; background: var(--tps-navy); }

/* partners strip */
.tps-partners { padding: 34px 0 30px; background: #fff; border-top: 1px solid #e2e8f0; }
.tps-partners__title {
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}
.tps-partners__title span {
    display: block;
    margin-bottom: 4px;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #0f172a;
    font-weight: 800;
}
.tps-partners__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tps-partners__track { display: flex; gap: 22px; width: max-content; animation: tpsPartners 60s linear infinite; }
.tps-partners__viewport:hover .tps-partners__track { animation-play-state: paused; }
@keyframes tpsPartners {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 11px)); }
}
.tps-partners__track li {
    flex: none;
    display: grid;
    place-items: center;
    width: 150px;
    height: 84px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--tps-ease);
}
.tps-partners__track li:hover { border-color: #bfdbfe; box-shadow: 0 14px 30px -20px rgba(37, 99, 235, 0.6); transform: translateY(-3px); }
.tps-partners__track img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.tps-partners__track li:hover img { filter: none; opacity: 1; }

/* main area */
.tps-footer__main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 64px 0 42px;
    background:
        radial-gradient(700px 360px at 0% 0%, rgba(37, 99, 235, 0.28), transparent 60%),
        radial-gradient(700px 360px at 100% 100%, rgba(241, 104, 58, 0.18), transparent 60%),
        var(--tps-navy);
}
.tps-footer__main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.08;
    background-image: radial-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px);
    background-size: 22px 22px;
}
.tps-footer__grid {
    display: grid;
    gap: 36px;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
}
.tps-footer__logo { display: inline-flex; align-items: center; gap: 12px; }
.tps-footer__logo img { width: 54px; height: auto; }
.tps-footer__logo strong { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; }
.tps-footer__logo small { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #93c5fd; }
.tps-footer__motto {
    margin: 18px 0 20px;
    padding-left: 14px;
    border-left: 3px solid var(--tps-orange);
    font-style: italic;
    line-height: 1.7;
    color: #e2e8f0;
}
.tps-footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.tps-footer__social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.25s ease, transform 0.25s var(--tps-ease);
}
.tps-footer__social a:hover { background: var(--tps-blue); transform: translateY(-3px); }
.tps-footer__social a.is-wa:hover { background: #16a34a; }
.tps-footer__heading {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}
.tps-footer__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tps-orange), #fdba74);
}
.tps-footer__contact { display: grid; gap: 12px; }
.tps-footer__contact li { display: flex; gap: 12px; line-height: 1.5; font-size: 0.92rem; overflow-wrap: anywhere; }
.tps-footer__contact i { width: 16px; margin-top: 3px; color: #fdba74; }
.tps-footer__contact a:hover,
.tps-footer__links a:hover { color: #fff; }
.tps-footer__links { display: grid; gap: 10px; }
.tps-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: #cbd5e1;
    transition: color 0.25s ease, transform 0.25s var(--tps-ease);
}
.tps-footer__links a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    transition: background 0.25s ease;
}
.tps-footer__links a:hover { transform: translateX(4px); }
.tps-footer__links a:hover::before { background: var(--tps-orange); }
.tps-footer__links a i { font-size: 0.65rem; opacity: 0.7; }
.tps-footer__visits dl { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.tps-footer__visits dl > div {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tps-footer__visits dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.tps-footer__visits dd { margin-top: 2px; font-size: 1.25rem; font-weight: 800; color: #fff; }
.tps-footer__visits .is-total { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(30, 58, 138, 0.35)); }
.tps-footer__visits .is-total dd { font-size: 1.6rem; color: #fdba74; }

.tps-footer__bottom { padding: 18px 0; background: #0b1120; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tps-footer__bottom .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tps-footer__bottom p { font-size: 0.85rem; color: #94a3b8; }
.tps-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
.tps-footer__bottom nav a { font-size: 0.85rem; color: #94a3b8; }
.tps-footer__bottom nav a:hover { color: #fff; }

@media (max-width: 1100px) {
    .tps-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tps-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .tps-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
    .tps-footer__visits { grid-column: 1 / -1; }
    .tps-footer__visits dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tps-footer__visits .is-total { grid-column: auto; }
}
@media (max-width: 480px) {
    .tps-footer__grid { grid-template-columns: 1fr; }
    .tps-footer__visits dl { grid-template-columns: 1fr 1fr; }
    .tps-footer__visits .is-total { grid-column: 1 / -1; }
    .tps-footer__bottom .container { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .tps-partners__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .tps-partners__track li[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Application form page (admissions/application-download.html)
   Builds on .tps-phero, .tps-ctabs, .tps-tone--*, .tps-checklist, .tps-cband.
   ========================================================================== */
.tps-cbtn--blue {
    background: linear-gradient(135deg, var(--tps-blue), var(--tps-blue-dark));
    color: #fff;
    box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.8);
}
.tps-cbtn--blue:hover { box-shadow: 0 18px 34px -14px rgba(37, 99, 235, 0.95); }

/* Hero: copy + intake card */
.tps-applyhero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.tps-intake {
    padding: 24px;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
    animation: tpsIntakeIn 0.9s var(--tps-ease) 0.15s both;
}
.tps-intake__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #86efac;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(134, 239, 172, 0.35);
}
.tps-intake__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: tpsIntakePulse 1.8s ease-out infinite;
}
.tps-intake.is-closed .tps-intake__status { color: #fca5a5; background: rgba(248, 113, 113, 0.14); border-color: rgba(252, 165, 165, 0.35); }
.tps-intake.is-closed .tps-intake__dot { animation: none; }
.tps-intake h2 { margin: 16px 0 14px; font-size: 1.2rem; font-weight: 800; }
.tps-intake ul { display: grid; gap: 10px; }
.tps-intake li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tps-intake__label { grid-column: 1 / -1; font-size: 0.82rem; color: rgba(226, 232, 240, 0.78); }
.tps-intake li strong { font-size: 1.05rem; font-weight: 800; }
.tps-intake li em {
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    color: #86efac;
    background: rgba(34, 197, 94, 0.18);
}
.tps-intake li.is-today em { color: #fcd34d; background: rgba(251, 191, 36, 0.2); }
.tps-intake li.is-closed strong { color: rgba(226, 232, 240, 0.7); }
.tps-intake li.is-closed em { color: #fca5a5; background: rgba(248, 113, 113, 0.16); }
.tps-intake__fee { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 0.86rem; color: rgba(226, 232, 240, 0.85); }
.tps-intake__fee i { color: #fdba74; }
@keyframes tpsIntakeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tpsIntakePulse {
    0%   { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0.6); }
    70%  { box-shadow: 0 0 0 9px rgba(134, 239, 172, 0); }
    100% { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0); }
}

/* "Applications closed" notice */
.tps-closed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
    padding: 22px 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border: 1px solid #fed7aa;
}
.tps-closed__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    color: #c2410c;
    font-size: 1.35rem;
    box-shadow: 0 10px 24px -14px rgba(194, 65, 12, 0.6);
}
.tps-closed > div { flex: 1 1 320px; }
.tps-closed strong { display: block; font-size: 1.08rem; color: #7c2d12; }
.tps-closed p { margin-top: 4px; line-height: 1.6; color: #9a3412; }

/* How to apply: 4 step cards */
.tps-astep-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tps-astep {
    position: relative;
    padding: 26px 22px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.35);
    transition: transform 0.35s var(--tps-ease), box-shadow 0.35s ease;
}
.tps-astep:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(15, 23, 42, 0.45); }
.tps-astep::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.tps-astep:not(:last-child)::after {           /* arrow to the next step */
    content: "\f054";
    position: absolute;
    top: 38px;
    right: -16px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font: 900 0.62rem/1 "Font Awesome 6 Free";
}
.tps-astep__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--tone-soft);
    color: var(--tone-2);
    font-size: 1.3rem;
}
.tps-astep__num {
    display: block;
    margin-top: 18px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tone-2);
}
.tps-astep h3 { margin-top: 4px; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.tps-astep p { margin-top: 8px; font-size: 0.93rem; line-height: 1.65; color: #475569; }
.tps-astep__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.9rem; font-weight: 700; color: var(--tone-2); }
.tps-astep__link:hover { text-decoration: underline; }
.tps-astep__emails { display: grid; gap: 6px; margin-top: 14px; }
.tps-astep__emails a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--tone-soft);
    color: var(--tone-2);
    font-size: 0.8rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.tps-astep__emails a:hover { filter: brightness(0.96); }

/* The form: rendered pages + side cards */
.tps-formgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.tps-formdoc {
    position: sticky;
    top: 96px;
    overflow: hidden;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(520px 300px at 100% 0%, rgba(37, 99, 235, 0.32), transparent 62%),
        linear-gradient(160deg, #1e293b, var(--tps-navy));
    box-shadow: 0 40px 80px -46px rgba(15, 23, 42, 0.9);
}
.tps-formdoc__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tps-formdoc__file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tps-formdoc__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    font-size: 1.25rem;
}
.tps-formdoc__file strong { display: block; font-size: 0.98rem; }
.tps-formdoc__file small { display: block; font-size: 0.78rem; color: #94a3b8; overflow-wrap: anywhere; }
.tps-formdoc__actions { display: flex; gap: 8px; }
.tps-formdoc__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 11px;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.25s ease;
}
.tps-formdoc__btn:hover { background: rgba(255, 255, 255, 0.16); }
.tps-formdoc__btn.is-primary { background: var(--tps-blue); border-color: var(--tps-blue); }
.tps-formdoc__btn.is-primary:hover { background: var(--tps-blue-dark); }
.tps-formdoc__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 30px; }
.tps-formdoc__page {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 595 / 842;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 26px 44px -24px rgba(0, 0, 0, 0.85);
    transition: transform 0.45s var(--tps-ease), box-shadow 0.45s ease;
}
.tps-formdoc__page:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: 0 34px 54px -24px rgba(0, 0, 0, 0.9); }
.tps-formdoc__page:nth-child(2):hover { transform: translateY(-6px) rotate(0.5deg); }
.tps-formdoc__page canvas { display: block; width: 100%; height: 100%; animation: tpsFadeIn 0.5s ease both; }
@keyframes tpsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tps-formdoc__paper {        /* placeholder "sheet" while PDF.js loads (and if it can't) */
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12% 10%;
}
.tps-formdoc__paper span { width: 100%; height: 7px; border-radius: 4px; background: #e2e8f0; }
.tps-formdoc__paper .is-w80 { width: 80%; }
.tps-formdoc__paper .is-w70 { width: 70%; }
.tps-formdoc__paper .is-w60 { width: 60%; align-self: center; }
.tps-formdoc__paper .is-w50 { width: 50%; }
.tps-formdoc__paper .is-w40 { width: 40%; align-self: center; }
.tps-formdoc__paper .is-gap { height: 6px; background: none; }
.tps-formdoc__paper .tps-formdoc__crest { align-self: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%; }
.tps-formdoc__stage:not(.is-fallback) .tps-formdoc__paper span:not(.is-gap) {
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: tpsPaperShimmer 1.4s linear infinite;
}
@keyframes tpsPaperShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.tps-formdoc__pageno {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
.tps-formdoc__notes { display: grid; gap: 10px; padding: 0 30px 28px; }
.tps-formdoc__notes li { display: flex; gap: 10px; font-size: 0.88rem; line-height: 1.6; color: #cbd5e1; }
.tps-formdoc__notes i { margin-top: 4px; color: #93c5fd; }

.tps-formside { display: grid; gap: 20px; }
.tps-formcard {
    padding: 26px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.35);
}
.tps-formcard__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tone-soft);
    color: var(--tone-2);
    font-size: 1.2rem;
}
.tps-formcard h3 { margin: 14px 0; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.tps-formcard__cta { width: 100%; justify-content: center; margin-top: 20px; }
.tps-feecard__fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tps-feecard__fees > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    border-radius: 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.tps-feecard__fees dt { font-size: 0.78rem; font-weight: 600; line-height: 1.35; color: #92400e; }
.tps-feecard__fees dd { margin-top: 6px; font-size: 1.45rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.tps-feecard__fees dd small { margin-right: 4px; font-size: 0.74rem; font-weight: 700; color: #b45309; }
.tps-feecard__note { margin-top: 12px; font-size: 0.86rem; line-height: 1.6; color: #64748b; }
.tps-feecard__sub { margin-top: 16px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.tps-feecard__banks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tps-feecard__banks li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}
.tps-feecard__banks i { font-size: 0.78rem; color: #b45309; }
.tps-feecard__call {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #1e3a8a, var(--tps-navy));
    transition: transform 0.3s var(--tps-ease), box-shadow 0.3s ease;
}
.tps-feecard__call:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(15, 23, 42, 0.8); }
.tps-feecard__callicon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fdba74;
}
.tps-feecard__call small { display: block; font-size: 0.75rem; color: #cbd5e1; }
.tps-feecard__call strong { display: block; font-size: 1.2rem; letter-spacing: 0.02em; }

/* Programmes listed on the form */
.tps-plevels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.tps-plevel {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.35);
}
.tps-plevel header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
}
.tps-plevel__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); }
.tps-plevel h3 { flex: 1; font-size: 1.08rem; font-weight: 800; }
.tps-plevel__count {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.85rem;
    font-weight: 800;
}
.tps-plevel ul { padding: 8px 22px 16px; }
.tps-plevel li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-weight: 600;
    line-height: 1.45;
    color: #1e293b;
}
.tps-plevel li:last-child { border-bottom: 0; }
.tps-plevel li::before {        /* tick box, like on the paper form */
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 5px;
    border: 2px solid var(--tone);
    background: var(--tone-soft);
}
.tps-plevels__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.92rem; color: #64748b; }
.tps-plevels__more i { color: var(--tps-blue); }
.tps-plevels__more a { font-weight: 700; color: var(--tps-blue); }
.tps-plevels__more a:hover { text-decoration: underline; }

/* Campus contacts */
.tps-campuses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tps-campus {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 18px;
    padding: 26px 26px 26px 30px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.35);
}
.tps-campus::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--tone), var(--tone-2)); }
.tps-campus__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--tone-soft);
    color: var(--tone-2);
    font-size: 1.35rem;
}
.tps-campus__body { min-width: 0; }
.tps-campus h3 { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.tps-campus__role { margin-top: 2px; font-size: 0.85rem; font-weight: 600; color: var(--tone-2); }
.tps-campus ul { display: grid; gap: 9px; margin-top: 14px; }
.tps-campus li { display: flex; align-items: baseline; gap: 10px; color: #334155; overflow-wrap: anywhere; }
.tps-campus li i { flex: none; width: 16px; text-align: center; color: #94a3b8; }
.tps-campus a { font-weight: 600; }
.tps-campus a:hover { color: var(--tps-blue); }

@media (max-width: 1100px) {
    .tps-astep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tps-astep:not(:last-child)::after { display: none; }
    .tps-plevels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .tps-applyhero { grid-template-columns: 1fr; }
    .tps-intake { max-width: 520px; }
    .tps-formgrid { grid-template-columns: 1fr; }
    .tps-formdoc { position: static; }
    .tps-formside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 720px) {
    .tps-formside,
    .tps-plevels,
    .tps-campuses { grid-template-columns: 1fr; }
    .tps-formdoc__stage { gap: 14px; padding: 18px; }
    .tps-formdoc__notes { padding: 0 18px 22px; }
}
@media (max-width: 560px) {
    .tps-astep-list { grid-template-columns: 1fr; }
    .tps-campus { flex-direction: column; gap: 14px; }
    .tps-formdoc__btn span { display: none; }
    .tps-formdoc__btn { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .tps-intake,
    .tps-intake__dot,
    .tps-formdoc__page canvas,
    .tps-formdoc__stage:not(.is-fallback) .tps-formdoc__paper span:not(.is-gap) { animation: none; }
}

/* ==========================================================================
   Homepage (home.html): slideshow, Commandant, courses, facilities, services,
   achievements timeline. Shares .tps-tone--*, .tps-cbtn, hero eyebrow/actions.
   ========================================================================== */
.tps-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tps-cbtn--outline { color: var(--tps-navy); border: 1.5px solid #cbd5e1; background: #fff; }
.tps-cbtn--outline:hover { border-color: var(--tps-blue); color: var(--tps-blue); }
.tps-cbtn i.fa-arrow-right { transition: transform 0.3s var(--tps-ease); }
.tps-cbtn:hover i.fa-arrow-right { transform: translateX(4px); }

/* Section shell + heading */
.tps-hsec { position: relative; padding: clamp(64px, 8vw, 104px) 0; background: #fff; }
.tps-hsec--tint {
    background:
        radial-gradient(700px 320px at 92% 0%, rgba(241, 104, 58, 0.07), transparent 60%),
        linear-gradient(180deg, #f1f5fb 0%, #f8fafc 100%);
}
.tps-hhead { max-width: 720px; margin: 0 auto clamp(34px, 5vw, 52px); text-align: center; }
.tps-hhead__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tps-orange);
}
.tps-hhead__eyebrow::before,
.tps-hhead .tps-hhead__eyebrow::after { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.6; }
.tps-hhead__title {
    margin-top: 12px;
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.tps-hhead__title span {
    background: linear-gradient(120deg, var(--tps-blue), #7c3aed 45%, var(--tps-orange));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tps-hhead__lead { margin-top: 14px; font-size: 1.05rem; line-height: 1.7; color: #64748b; }
.tps-hhead--light .tps-hhead__title { color: #fff; }
.tps-hhead--light .tps-hhead__title span { background-image: linear-gradient(120deg, #fdba74, var(--tps-orange) 55%, #fb7185); }
.tps-hhead--light .tps-hhead__lead { color: rgba(226, 232, 240, 0.85); }
.tps-hhead--light .tps-hhead__eyebrow { color: #fdba74; }
.tps-hsec__cta { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 44px); }
.tps-news-section .tps-hhead { margin-bottom: 30px; }

/* 1. Slideshow ------------------------------------------------------------------ */
.tps-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(560px, calc(100vh - 80px), 860px);
    color: #fff;
    background: var(--tps-navy);
}
.tps-hero.has-bar { padding-top: 44px; }       /* the "applications open" bar overlaps the top */
.tps-hero__slides { position: absolute; inset: 0; z-index: -2; }
.tps-hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.tps-hero__slide.is-active { opacity: 1; }
.tps-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.tps-hero__slide.is-active img { animation: tpsHeroKen 12s ease-out both; }
@keyframes tpsHeroKen { from { transform: scale(1.1); } to { transform: scale(1); } }
.tps-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.2) 34%, transparent 55%),
        linear-gradient(95deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.74) 36%, rgba(30, 58, 138, 0.3) 66%, rgba(15, 23, 42, 0.1) 100%);
}
.tps-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.tps-hero__inner { flex: 1; display: flex; align-items: center; padding-top: clamp(48px, 8vh, 96px); padding-bottom: 32px; }
.tps-hero__copies { display: grid; width: 100%; }
.tps-hero__copy {
    grid-area: 1 / 1;
    max-width: 680px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.8s var(--tps-ease), visibility 0s linear 0.6s;
}
.tps-hero__copy.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.25s, 0.25s, 0s; }
.tps-hero__copy h2 {
    margin: 22px 0 16px;
    font-size: clamp(2.6rem, 6.4vw, 4.8rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.tps-hero__copy h2 span {
    background: linear-gradient(120deg, #fdba74, var(--tps-orange) 55%, #fb7185);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tps-hero__copy p { max-width: 540px; font-size: 1.12rem; line-height: 1.7; color: rgba(226, 232, 240, 0.92); }
.tps-hero__copy .tps-cbtn--light i { margin-left: 2px; }

.tps-hero__nav { display: flex; align-items: flex-end; gap: 24px; padding-bottom: clamp(22px, 4vh, 36px); }
.tps-hero__tabs { flex: 1; display: grid; grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr)); gap: 16px; }
.tps-hero__tab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 0 0 4px;
    text-align: left;
    color: rgba(255, 255, 255, 0.58);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}
.tps-hero__tab:hover,
.tps-hero__tab.is-active { color: #fff; }
.tps-hero__bar { flex: 0 0 100%; height: 3px; margin-bottom: 12px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.22); }
.tps-hero__bar i {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, #fdba74, var(--tps-orange));
}
.tps-hero__tab.is-done .tps-hero__bar i { transform: scaleX(1); opacity: 0.55; }
.tps-hero__tab.is-active .tps-hero__bar i { animation: tpsHeroProgress var(--hero-interval, 7s) linear forwards; }
.tps-hero.is-paused .tps-hero__bar i { animation-play-state: paused; }
@media (hover: hover) {      /* pause while reading the text or using the controls */
    .tps-hero__inner:has(.tps-hero__copy.is-active:hover) ~ .tps-hero__nav .tps-hero__bar i,
    .tps-hero__nav:hover .tps-hero__bar i { animation-play-state: paused; }
}
@keyframes tpsHeroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tps-hero__num { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: #fdba74; }
.tps-hero__label { min-width: 0; overflow: hidden; font-size: 0.9rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.tps-hero__controls { display: flex; gap: 8px; }
.tps-hero__controls button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--tps-ease);
}
.tps-hero__controls button:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; transform: translateY(-2px); }
.tps-hero__controls i { font-size: 0.85rem; }

/* 2. Commandant ---------------------------------------------------------------- */
.tps-cmd { overflow: hidden; }
.tps-cmd::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 340px at 0% 100%, rgba(37, 99, 235, 0.08), transparent 60%),
        radial-gradient(500px 300px at 100% 0%, rgba(241, 104, 58, 0.07), transparent 60%);
    pointer-events: none;
}
.tps-cmd__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.tps-cmd__photo { position: relative; margin: 0; max-width: 440px; justify-self: center; width: 100%; }
.tps-cmd__frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 28px;
    background: #e2e8f0;
    box-shadow: 0 40px 70px -40px rgba(15, 23, 42, 0.7);
}
.tps-cmd__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1s var(--tps-ease); }
.tps-cmd__photo:hover .tps-cmd__frame img { transform: scale(1.04); }
.tps-cmd__photo::before {                     /* offset accent block behind the photo */
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    z-index: -1;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--tps-blue), var(--tps-orange));
    opacity: 0.9;
}
.tps-cmd__photo { isolation: isolate; }
.tps-cmd__badge {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    color: #fff;
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}
.tps-cmd__badgeicon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tps-orange); }
.tps-cmd__badge strong { display: block; font-size: 1rem; line-height: 1.25; }
.tps-cmd__badge small { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fdba74; }
.tps-cmd__body .tps-hhead__title { margin-bottom: 22px; }
.tps-cmd__quote { position: relative; padding: 26px 28px 26px 30px; border-radius: 22px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 24px 50px -36px rgba(15, 23, 42, 0.45); }
.tps-cmd__quote::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--tps-blue), var(--tps-orange)); }
.tps-cmd__quote i { position: absolute; top: -16px; right: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--tps-blue); font-size: 0.95rem; box-shadow: 0 12px 24px -10px rgba(37, 99, 235, 0.8); }
.tps-cmd__quote p { font-size: 1.08rem; line-height: 1.8; color: #334155; }
.tps-cmd__sign { display: flex; flex-direction: column; margin-top: 22px; }
.tps-cmd__sign strong { font-size: 1.05rem; color: #0f172a; }
.tps-cmd__sign span { font-size: 0.9rem; color: #64748b; }
.tps-cmd__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* 3. Courses ------------------------------------------------------------------- */
.tps-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tps-path {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 44px -32px rgba(15, 23, 42, 0.45);
    transition: transform 0.45s var(--tps-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
.tps-path:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--tone) 40%, #e2e8f0); box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--tone-2) 70%, transparent); }
.tps-path__media { position: relative; overflow: hidden; height: 220px; background: linear-gradient(135deg, var(--tone), var(--tone-2)); }
.tps-path__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 23, 42, 0.55), transparent 50%); pointer-events: none; }
.tps-path__item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s ease, transform 1.2s var(--tps-ease);
}
.tps-path__item.is-active { opacity: 1; }
.tps-path:hover .tps-path__item { transform: scale(1.06); }
.tps-path__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.85); font-size: 3rem; }
.tps-path__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--tone-2);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.6);
}
.tps-path__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.tps-path__dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); transition: width 0.35s var(--tps-ease), background 0.35s ease; }
.tps-path__dots i.is-active { width: 20px; background: #fff; }
.tps-path__body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.tps-path__body::before { content: ""; width: 38px; height: 4px; margin-bottom: 16px; border-radius: 4px; background: linear-gradient(90deg, var(--tone), var(--tone-2)); transition: width 0.45s var(--tps-ease); }
.tps-path:hover .tps-path__body::before { width: 70px; }
.tps-path h3 { font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.tps-path p { margin-top: 10px; font-size: 0.93rem; line-height: 1.65; color: #475569; }
.tps-path__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 0.92rem; font-weight: 800; color: var(--tone-2); }
.tps-path__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }   /* the whole card is the link */
.tps-path__link i { transition: transform 0.3s var(--tps-ease); }
.tps-path:hover .tps-path__link i { transform: translateX(5px); }

/* 4. Facilities ---------------------------------------------------------------- */
.tps-fac__tabs {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 28px;
    padding: 6px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.tps-fac__tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #475569;
    background: none;
    border: 0;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.tps-fac__tab i { color: #94a3b8; transition: color 0.3s ease; }
.tps-fac__tab:hover { color: #0f172a; }
.tps-fac__tab.is-active { color: #fff; background: linear-gradient(135deg, var(--tps-blue), var(--tps-blue-dark)); box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.9); }
.tps-fac__tab.is-active i { color: #fdba74; }
.tps-fac { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 22px; align-items: stretch; }
.tps-fac--enter { transition: opacity 0.45s ease, transform 0.6s var(--tps-ease); }
.tps-fac--from { opacity: 0; transform: translateY(14px); }
.tps-fac__stage { position: relative; overflow: hidden; min-height: 440px; border-radius: 26px; background: var(--tps-navy); box-shadow: 0 40px 70px -44px rgba(15, 23, 42, 0.8); }
.tps-fac__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.9s ease; }
.tps-fac__shot.is-active { opacity: 1; }
.tps-fac__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease-out; }
.tps-fac__shot.is-active img { transform: scale(1); }
.tps-fac__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.25) 45%, transparent 70%); }
.tps-fac__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(22px, 3vw, 34px); color: #fff; }
.tps-fac__shot figcaption span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #fdba74; }
.tps-fac__shot h3 { margin-top: 6px; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.15; }
.tps-fac__shot p { max-width: 520px; margin-top: 8px; line-height: 1.6; color: rgba(226, 232, 240, 0.9); }
.tps-fac__list { display: flex; flex-direction: column; gap: 12px; }
.tps-fac__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px;
    text-align: left;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--tps-ease);
}
.tps-fac__item:hover { transform: translateX(4px); border-color: #bfdbfe; }
.tps-fac__item.is-active { border-color: var(--tps-blue); box-shadow: 0 16px 30px -22px rgba(37, 99, 235, 0.9); }
.tps-fac__item img { flex: none; width: 88px; height: 72px; border-radius: 12px; object-fit: cover; }
.tps-fac__item strong { display: block; font-size: 0.98rem; color: #0f172a; }
.tps-fac__item small { display: -webkit-box; margin-top: 3px; overflow: hidden; font-size: 0.84rem; line-height: 1.45; color: #64748b; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tps-fac__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 14px 18px;
    border-radius: 16px;
    font-weight: 800;
    color: var(--tps-blue);
    background: var(--tps-blue-50);
    transition: background 0.3s ease, color 0.3s ease;
}
.tps-fac__more:hover { color: #fff; background: var(--tps-blue); }

/* 5. Services ------------------------------------------------------------------ */
.tps-svcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tps-svc {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 44px -34px rgba(15, 23, 42, 0.45);
    transition: transform 0.45s var(--tps-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
.tps-svc::before {                       /* soft tone glow in the corner */
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tone-soft) 0%, transparent 70%);
    transition: transform 0.6s var(--tps-ease);
}
.tps-svc:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--tone) 40%, #e2e8f0); box-shadow: 0 34px 60px -36px color-mix(in srgb, var(--tone-2) 70%, transparent); }
.tps-svc:hover::before { transform: scale(1.5); }
.tps-svc__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 16px 28px -14px var(--tone-2);
    transition: transform 0.45s var(--tps-ease);
}
.tps-svc:hover .tps-svc__icon { transform: rotate(-6deg) scale(1.06); }
.tps-svc h3 { position: relative; margin-top: 20px; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.tps-svc p { position: relative; margin-top: 8px; font-size: 0.93rem; line-height: 1.65; color: #475569; }

/* The big icon as a slideshow (partials/service_icon.html, turned by enhance.js): the service's icon, then each
   topic's icon sliding in from the right, with the topic's name in a pill beside it. */
.tps-iconshow { position: relative; display: flex; align-items: center; gap: 14px; }
.tps-iconshow__box { flex: none; overflow: hidden; }
.tps-iconshow__box > i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateX(120%) scale(0.6);
    transition: transform 0.6s var(--tps-ease), opacity 0.45s ease;
}
.tps-iconshow__box > i.is-active { opacity: 1; transform: none; }
.tps-iconshow__box > i.is-leaving { opacity: 0; transform: translateX(-120%) scale(0.6); }
.tps-iconshow__label { position: relative; flex: 1; min-width: 0; height: 30px; overflow: hidden; }
.tps-iconshow__label > span {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--tone-2);
    background: var(--tone-soft);
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s var(--tps-ease), opacity 0.4s ease;
}
.tps-iconshow__label > span:empty { display: none; }
.tps-iconshow__label > span.is-active { opacity: 1; transform: none; }
.tps-iconshow__label > span.is-leaving { opacity: 0; transform: translateY(-100%); }
.tps-svc.has-photo .tps-iconshow { align-items: flex-end; }
/* the topics as text: read by screen readers, shown as tags when animations are turned off */
.tps-svc__topics { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
    .tps-iconshow__label { display: none; }
    .tps-svc__topics { position: relative; display: flex; flex-wrap: wrap; gap: 6px; width: auto; height: auto; margin: 14px 0 0; overflow: visible; clip: auto; white-space: normal; }
    .tps-svc__topics li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: var(--tone-2); background: var(--tone-soft); }
}
.tps-svc__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-size: 0.92rem; font-weight: 800; color: var(--tone-2); }
.tps-svc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.tps-svc__link i { transition: transform 0.3s var(--tps-ease); }
.tps-svc:hover .tps-svc__link i { transform: translateX(5px); }

/* 6. Achievements timeline ---------------------------------------------------- */
.tps-journey {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(800px 400px at 0% 0%, rgba(37, 99, 235, 0.35), transparent 60%),
        radial-gradient(700px 380px at 100% 100%, rgba(241, 104, 58, 0.25), transparent 62%),
        var(--tps-navy);
}
.tps-journey::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
            mask-image: linear-gradient(180deg, #000, transparent 70%);
    pointer-events: none;
}
.tps-journey .container { position: relative; }
.tps-journey__rail {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto 34px;
    padding-top: 6px;
}
.tps-journey__line { position: absolute; left: 12px; right: 12px; top: 14px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.tps-journey__line i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #fdba74, var(--tps-orange)); transition: width 0.8s var(--tps-ease); }
.tps-journey__year {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(226, 232, 240, 0.6);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}
.tps-journey__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tps-navy);
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--tps-ease), box-shadow 0.3s ease;
}
.tps-journey__year:hover { color: #fff; }
.tps-journey__year.is-past .tps-journey__dot { border-color: var(--tps-orange); background: var(--tps-orange); }
.tps-journey__year.is-active { color: #fff; }
.tps-journey__year.is-active .tps-journey__dot { transform: scale(1.25); border-color: #fff; background: var(--tps-orange); box-shadow: 0 0 0 6px rgba(241, 104, 58, 0.25); }
.tps-journey__stage { display: grid; max-width: 1080px; margin: 0 auto; }
.tps-journey__card {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
.tps-journey--enter { transition: opacity 0.5s ease, transform 0.7s var(--tps-ease); }
.tps-journey--from { opacity: 0; transform: translateX(26px); }
.tps-journey__photo { position: relative; margin: 0; min-height: 360px; }
.tps-journey__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tps-journey__text { display: flex; flex-direction: column; padding: clamp(26px, 4vw, 44px); }
.tps-journey__big {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(253, 186, 116, 0.85);
}
.tps-journey__text h3 { margin-top: 14px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; line-height: 1.2; }
.tps-journey__text p { margin-top: 12px; line-height: 1.75; color: rgba(226, 232, 240, 0.88); }
.tps-journey__ctrl { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 26px; font-weight: 800; }
.tps-journey__ctrl small { font-weight: 600; color: rgba(226, 232, 240, 0.55); }
.tps-journey__ctrl button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.tps-journey__ctrl button:hover { background: var(--tps-orange); border-color: var(--tps-orange); }

/* Responsive ------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .tps-paths,
    .tps-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tps-cmd__grid { grid-template-columns: 1fr; }
    .tps-cmd__photo { max-width: 360px; }
    .tps-fac { grid-template-columns: 1fr; }
    .tps-fac__stage { min-height: 360px; }
    .tps-fac__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tps-fac__item { flex-direction: column; align-items: stretch; }
    .tps-fac__item img { width: 100%; height: 90px; }
    .tps-fac__item small { display: none; }
    .tps-fac__more { grid-column: 1 / -1; }
    .tps-journey__card { grid-template-columns: 1fr; }
    .tps-journey__photo { min-height: 240px; }
}
@media (max-width: 768px) {
    .tps-hero__label { display: none; }
    .tps-hero__tabs { gap: 10px; }
    .tps-hero__controls button { width: 38px; height: 38px; }
    .tps-hero__copy p { font-size: 1rem; }
    .tps-journey__rail { overflow-x: auto; justify-content: flex-start; gap: 34px; padding: 6px 12px 10px; scrollbar-width: none; }
    .tps-journey__rail::-webkit-scrollbar { display: none; }
    .tps-journey__line { right: auto; width: calc(100% - 24px); min-width: 100%; }
}
@media (max-width: 640px) {
    .tps-paths,
    .tps-svcs { grid-template-columns: 1fr; }
    .tps-hero { min-height: 600px; }
    .tps-hero__nav { flex-direction: column; align-items: stretch; gap: 14px; }
    .tps-hero__controls { justify-content: flex-end; }
    .tps-fac__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; border-radius: 18px; scrollbar-width: none; }
    .tps-fac__tab { flex: none; }
    .tps-fac__stage { min-height: 300px; }
    .tps-fac__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .tps-fac__item { padding: 6px; border-radius: 14px; }
    .tps-fac__item img { height: 64px; border-radius: 10px; }
    .tps-fac__item strong { font-size: 0.8rem; line-height: 1.3; }
    .tps-cmd__photo::before { inset: 14px -10px -14px 10px; }
    .tps-cmd__quote { padding: 24px 20px 22px 24px; }
    .tps-cmd__quote p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tps-hero__slide.is-active img,
    .tps-hero__tab.is-active .tps-hero__bar i { animation: none; }
    .tps-hero__tab.is-active .tps-hero__bar i { transform: scaleX(1); }
    .tps-fac__shot img,
    .tps-path__item { transition: none; transform: none; }
}

/* Phone menu: emergency call button (number from Admin -> Page content -> "Site: logo & menu") */
.tps-emergency {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
}
.tps-emergency:hover { background: #b91c1c; color: #fff; }
.tps-nav-current { color: #93c5fd !important; font-weight: 600; }
.tps-cbtn__ext { margin-left: 2px; font-size: 0.75em; opacity: 0.75; }
.tps-careers__hl { color: var(--tps-orange); }

/* ==========================================================================
   Services pages (Services/*.html) and shared bits for admin-edited content
   ========================================================================== */
.tps-svc.has-photo { padding-top: 0; }
.tps-svc__photo { display: block; width: calc(100% + 48px); height: 170px; margin: 0 -24px 18px; object-fit: cover; }
.tps-svc.has-photo .tps-svc__icon { margin-top: -48px; border: 4px solid #fff; }
.tps-course__media--reel { position: relative; }
.tps-course__media--reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.tps-course__media--reel img.is-active { opacity: 1; }
.tps-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.tps-menu__item { padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 16px 36px -30px rgba(15, 23, 42, 0.45); }
.tps-menu__item header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tps-menu__item h3 { font-size: 1.08rem; font-weight: 800; color: #0f172a; }
.tps-menu__price { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 800; color: #b45309; background: #fffbeb; }
.tps-menu__item p { margin-top: 8px; line-height: 1.6; color: #475569; }
.tps-menu__note { display: flex; gap: 8px; margin-top: 18px; font-size: 0.9rem; color: #64748b; }
.tps-menu__note i { margin-top: 3px; color: var(--tps-blue); }
.tps-ctabs--many { overflow-x: auto; scrollbar-width: none; }
.tps-ctabs--many::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
    .tps-menu { grid-template-columns: 1fr; }
    .tps-ctabs--many .tps-ctab { flex: 0 0 auto; min-width: 84px; }
}

/* Desktop menu (layouts/app.html): one line per entry, tighter spacing on smaller laptops */
.tps-nav-desktop { gap: 2rem; margin-left: 24px; white-space: nowrap; }
.tps-nav-desktop > * { flex: none; }
@media (max-width: 1279px) { .tps-nav-desktop { gap: 1.35rem; font-size: 0.95rem; } }
nav .tracking-tight { white-space: nowrap; }

/* Review copy ribbon (DJANGO_REVIEW_NOTICE, run-review.ps1) */
.tps-review-ribbon {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #7c2d12;
    background: #fde68a;
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.6);
    pointer-events: none;
}

/* News article text (staff-written rich text, news/newdetail.html): spacing the base styles reset away */
.tps-article-body { font-size: 1.08rem; line-height: 1.8; color: #334155; overflow-wrap: anywhere; }
.tps-article-body > * + * { margin-top: 1.1em; }
.tps-article-body h2, .tps-article-body h3, .tps-article-body h4 { margin-top: 1.6em; font-weight: 800; line-height: 1.3; color: #0f172a; }
.tps-article-body h2 { font-size: 1.5rem; }
.tps-article-body h3 { font-size: 1.25rem; }
.tps-article-body ul, .tps-article-body ol { padding-left: 1.4em; }
.tps-article-body ul { list-style: disc; }
.tps-article-body ol { list-style: decimal; }
.tps-article-body li + li { margin-top: 0.35em; }
.tps-article-body a { color: var(--tps-blue, #1d4ed8); text-decoration: underline; text-underline-offset: 3px; }
.tps-article-body strong, .tps-article-body b { font-weight: 700; color: #0f172a; }
.tps-article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.tps-article-body blockquote { padding-left: 1em; border-left: 4px solid #cbd5e1; font-style: italic; color: #475569; }
.tps-article-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tps-article-body th, .tps-article-body td { padding: 8px 10px; border: 1px solid #e2e8f0; text-align: left; }
@media (max-width: 640px) { .tps-article-body { font-size: 1rem; } }

/* Homepage featured news: "3 / 15" photo counter on a story with several photos */
.tps-newsfeed__count {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}