/* ════════════════════════════════════════
   TANTIA UNIVERSITY — EDITORIAL v2
   PALETTE: Soft Neutral Warm (Cream + Camel + Terracotta)
   STYLE: Calm Editorial · Asymmetric · Light Academic
   ════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
   /* ── Desert Rose Palette ── */
   --tu-bg: #F8F2F0;
   /* blush white */

   --tu-bg-alt: #EDD8D0;
   /* soft rose sand */

   --tu-ink: #381410;
   /* deep espresso rose */

   --tu-ink-soft: #7A3828;
   /* muted desert brown */

   --tu-text: #7A3828;
   /* readable warm rose-brown */

   --tu-muted: #B86858;
   /* dusty desert rose */

   --tu-line: rgba(122, 56, 40, .14);

   --tu-paper: #FFF8F6;
   /* warm paper white */

   --tu-accent: #B86858;
   /* primary desert rose */

   --tu-accent-2: #D8A898;
   /* soft sandstone rose */

   --tu-accent-3: #7A3828;
   /* deep clay */

   /* Type */
   --tu-sans: 'Inter', system-ui, sans-serif;
   --tu-serif: 'Fraunces', 'Cormorant Garamond', serif;

   /* Layout */
   --tu-gap: clamp(20px, 4vw, 64px);
   --tu-r: 18px;
   --tu-ease: cubic-bezier(.2, .7, .2, 1);

   /* Orb / decorative tones */
   --stone-200: #F8F2F0;
   --stone-300: #EDD8D0;
   --stone-400: #D8A898;

   --warm-gold-light: #D8A898;
   --warm-gold: #B86858;
   --warm-gold-dark: #7A3828;
}

/* ═════════ BASE ═════════ */
.tu-page {
   background: var(--tu-bg);
   color: var(--tu-text);
   font-family: var(--tu-sans);
   line-height: 1.65;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   position: relative;
}

.tu-page *,
.tu-page *::before,
.tu-page *::after {
   box-sizing: border-box;
}

.tu-wrap {
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 var(--tu-gap);
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

/* Section heading system */
.tu-section-num {
   display: inline-block;
   font-size: .72rem;
   font-weight: 600;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--tu-accent);
   padding-bottom: 14px;
   border-bottom: 1px solid var(--tu-line);
   margin-bottom: 26px;
}

.tu-h2 {
   font-family: var(--tu-serif);
   font-weight: 400;
   font-size: clamp(2.2rem, 5vw, 4.2rem);
   line-height: 1.04;
   letter-spacing: -.02em;
   color: var(--tu-ink);
   margin: 0 0 1.4rem;
}

.tu-h2 em {
   font-style: italic;
   color: var(--tu-accent);
   font-weight: 500;
}

.tu-section-head {
   max-width: 900px;
   margin: 0 0 60px;
}

.tu-section-head--center {
   margin: 0 auto 60px;
   text-align: center;
}

.tu-section-lead {
   color: var(--tu-muted);
   max-width: 620px;
   margin: 0 auto;
}

.tu-tag {
   display: inline-block;
   font-size: .7rem;
   font-weight: 600;
   letter-spacing: 2.4px;
   text-transform: uppercase;
   color: var(--tu-accent);
   margin-bottom: 14px;
}

/* Reveal */
.tu-r,
.tu-r3 {
   opacity: 0;
   transform: translateY(28px);
   transition: all .9s var(--tu-ease);
}

.tu-r3 {
   transition-duration: 1.15s;
}

.vis {
   opacity: 1 !important;
   transform: none !important;
}

/* ═════════ SIDE NAV ═════════ */
.tu-sidenav {
   position: fixed;
   top: 50%;
   left: 24px;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 14px;
   z-index: 50;
}

.tu-sidenav__dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: transparent;
   border: 1.5px solid var(--tu-ink);
   position: relative;
   transition: all .3s var(--tu-ease);
}

.tu-sidenav__dot::after {
   content: attr(data-label);
   position: absolute;
   left: 22px;
   top: 50%;
   transform: translateY(-50%);
   font-size: .7rem;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--tu-ink);
   opacity: 0;
   transition: opacity .25s;
   white-space: nowrap;
}

.tu-sidenav__dot:hover::after {
   opacity: 1;
}

.tu-sidenav__dot.is-active {
   background: var(--tu-accent);
   border-color: var(--tu-accent);
   transform: scale(1.3);
}

/* ═════════ 1. HERO ═════════ */
.tu-hero {
   background: var(--tu-bg-alt);
   color: var(--tu-ink);
   min-height: 100vh;
   padding: 100px var(--tu-gap) 0;
   position: relative;
   display: flex;
   flex-direction: column;
}


.th-hero__logo {
    position: absolute;
    top: 12%;
}

.th-hero__logo img {
  width: 115px;
  height: auto;
}

.tu-hero__grid {
   flex: 1;
   display: grid;
   grid-template-columns: .9fr 1.4fr 1.25fr;   
   grid-template-rows: auto 1fr auto;
   gap: 40px 50px;
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
}

.tu-hero__meta {
   grid-column: 1;
   grid-row: 1;
   display: flex;
   flex-direction: column;
   gap: 30px;
   padding-top: 10px;
}

.tu-hero__year {
   font-family: var(--tu-serif);
   font-size: 2rem;
   color: var(--tu-accent);
   letter-spacing: 2px;
}

.tu-hero__loc {
   font-size: .8rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--tu-muted);
   line-height: 1.6;
}

.tu-hero__title-wrap {
   grid-column: 1 / span 2;
   grid-row: 2;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.tu-hero__title {
   font-family: var(--tu-serif);
   font-weight: 400;
   font-size: clamp(4.5rem, 13vw, 11rem);
   line-height: .88;
   letter-spacing: -.04em;
   margin: 0 0 28px;
   color: var(--tu-ink);
}

.tu-hero__line {
   display: block;
}

.tu-hero__line--2 {
   padding-left: clamp(40px, 8vw, 120px);
   font-style: italic;
   color: var(--tu-accent);
}

.tu-hero__dot {
   color: var(--tu-accent-3);
}

.tu-hero__rotator {
   display: inline-flex;
   align-items: center;
   height: 32px;
   overflow: hidden;
   font-size: .85rem;
   letter-spacing: 4px;
   text-transform: uppercase;
   font-weight: 600;
   color: var(--tu-accent);
}

.tu-hero__rotator::before {
   content: 'We';
   margin-right: 14px;
   color: var(--tu-muted);
   letter-spacing: 2px;
}

.tu-hero__rotator span {
   position: absolute;
   opacity: 0;
   transform: translateY(20px);
   transition: all .5s var(--tu-ease);
}

.tu-hero__rotator {
   position: relative;
   min-width: 240px;
}

.tu-hero__rotator span.is-on {
   position: static;
   opacity: 1;
   transform: none;
}

.tu-hero__image {
   grid-column: 3;
   grid-row: 1 / span 2;
   position: relative;
   border-radius: var(--tu-r);
   overflow: hidden;
   align-self: stretch;
   min-height: 420px;
}

.tu-hero__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: grayscale(.15) contrast(1.02) sepia(.08);
}

.tu-hero__image-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 40%, rgba(77, 63, 51, .45));
}

.tu-hero__image-tag {
   position: absolute;
   bottom: 18px;
   left: 18px;
   background: rgba(251, 246, 238, .55);
   backdrop-filter: blur(10px);
   padding: 8px 16px;
   border-radius: 100px;
   font-size: .72rem;
   letter-spacing: 1.5px;
   font-weight: 600;
   color: var(--tu-ink);
   border: 1px solid rgba(77, 63, 51, .15);
}

.tu-hero__quote {
   grid-column: 1 / span 2;
   grid-row: 3;
   align-self: end;
   border-left: 2px solid var(--tu-accent);
   padding: 10px 0 10px 24px;
   font-family: var(--tu-serif);
   font-size: clamp(1.1rem, 1.6vw, 1.5rem);
   font-style: italic;
   max-width: 560px;
   color: var(--tu-text);
}

.tu-hero__quote em {
   color: var(--tu-accent);
   font-weight: 500;
}

.tu-hero__stats {
   grid-column: 3;
   grid-row: 3;
   display: flex;
   gap: 28px;
   align-items: flex-end;
   justify-content: flex-end;
   padding-bottom: 4px;
}

.tu-hero__stat b {
   display: block;
   font-family: var(--tu-serif);
   font-size: 2rem;
   line-height: 1;
   color: var(--tu-accent);
   margin-bottom: 4px;
}

.tu-hero__stat span {
   font-size: .65rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--tu-muted);
}

.tu-hero__ticker {
   margin-left: calc(-1 * var(--tu-gap));
   margin-right: calc(-1 * var(--tu-gap));
   margin-top: 60px;
   border-top: 1px solid var(--tu-line);
   border-bottom: 1px solid var(--tu-line);
   overflow: hidden;
   padding: 18px 0;
}

.tu-hero__ticker-track {
   display: flex;
   gap: 50px;
   animation: tuTicker 30s linear infinite;
   white-space: nowrap;
   font-size: .78rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--tu-muted);
   font-weight: 500;
}

@keyframes tuTicker {
   to {
      transform: translateX(-50%);
   }
}

/* ═════════ 2. ABOUT ═════════ */
.tu-about {
   padding: 140px 0;
}

.tu-about__layout {
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: 70px;
   align-items: start;
}

.tu-about__lead p {
   font-size: 1.1rem;
   margin: 0 0 1.4rem;
   color: var(--tu-text);
}

.tu-dropcap {
   font-size: 1.18rem;
   line-height: 1.7;
}

.tu-drop {
   float: left;
   font-family: var(--tu-serif);
   font-size: 5.4rem;
   line-height: .82;
   font-weight: 500;
   color: var(--tu-accent);
   padding: 6px 14px 0 0;
}

.tu-about__card {
   background: var(--tu-paper);
   border-radius: var(--tu-r);
   border: 1px solid var(--tu-line);
   overflow: hidden;
   box-shadow: 0 20px 50px -30px rgba(77, 63, 51, .25);
}

.tu-about__card img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
}

.tu-about__card-body {
   padding: 28px 28px 32px;
}

.tu-about__card-eyebrow {
   font-size: .7rem;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--tu-accent);
}

.tu-about__card h4 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.2;
   margin: 8px 0 18px;
   color: var(--tu-ink);
}

.tu-about__list {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid var(--tu-line);
}

.tu-about__list li {
   display: flex;
   gap: 16px;
   align-items: center;
   padding: 14px 0;
   border-bottom: 1px solid var(--tu-line);
   font-size: .95rem;
}

.tu-about__list span {
   font-family: var(--tu-serif);
   font-style: italic;
   color: var(--tu-accent);
   width: 28px;
   font-size: 1.1rem;
}

/* ═════════ 3. STATS WALL ═════════ */
.tu-stats {
   padding: 140px 0;
   background: var(--tu-bg-alt);
}

.tu-stats__wall {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 16px;
   grid-auto-rows: 200px;
}

.tu-stat {
   background: var(--tu-paper);
   border-radius: var(--tu-r);
   padding: 28px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   border: 1px solid var(--tu-line);
   transition: transform .35s var(--tu-ease), box-shadow .35s;
   grid-column: span 2;
   position: relative;
   overflow: hidden;
}

.tu-stat:hover {
   box-shadow: 0 20px 50px -30px rgba(77, 63, 51, .35);
}

.tu-stat__num {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: clamp(2.6rem, 4vw, 4rem);
   line-height: 1;
   color: var(--tu-ink);
   margin-bottom: 8px;
}

.tu-stat__label {
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--tu-muted);
}

.tu-stat__sub {
   display: block;
   margin-top: 8px;
   font-size: .8rem;
   color: var(--tu-muted);
   text-transform: none;
   letter-spacing: 0;
}

.tu-stat--lg {
   grid-column: span 3;
   grid-row: span 2;
   background: var(--tu-paper);
}

.tu-stat--lg .tu-stat__num {
   font-size: clamp(4rem, 7vw, 6.5rem);
   color: var(--tu-accent);
}

.tu-stat--accent {
   background: var(--tu-accent);
   color: var(--tu-paper);
   border: none;
}

.tu-stat--accent .tu-stat__num,
.tu-stat--accent .tu-stat__label {
   color: var(--tu-paper);
}

.tu-stat--dark {
   background: var(--tu-accent-2);
   color: var(--tu-ink);
   border: none;
}

.tu-stat--dark .tu-stat__num {
   color: var(--tu-ink);
}

.tu-stat--dark .tu-stat__label {
   color: var(--tu-ink-soft);
}

.tu-stat--wide {
   grid-column: span 3;
}

/* ═════════ 4. SOLAR SYSTEM PROGRAMS ═════════ */
.tu-programs {
   padding: 140px 0;
}

.tu-solar {
   position: relative;
   width: min(800px, 100%);
   aspect-ratio: 1;
   margin: 60px auto 0;
   cursor: pointer;
}

/* ── Central Sun ── */
.tu-solar__sun {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5;
}

.tu-solar__sun-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(184, 104, 88, .18) 0%, transparent 70%);
   animation: tuSunPulse 4s ease-in-out infinite;
}

@keyframes tuSunPulse {

   0%,
   100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: .6;
   }

   50% {
      transform: translate(-50%, -50%) scale(1.15);
      opacity: 1;
   }
}

.tu-solar__sun-core {
   position: relative;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: var(--tu-paper);
   border: 2px solid var(--tu-accent);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   box-shadow:
      0 0 0 6px rgba(184, 104, 88, .08),
      0 20px 50px -15px rgba(77, 63, 51, .22);
}

.tu-solar__sun-core span {
   font-family: var(--tu-serif);
   font-size: 1.5rem;
   font-weight: 500;
   color: var(--tu-accent);
   line-height: 1.1;
}

.tu-solar__sun-core strong {
   font-family: var(--tu-serif);
   font-size: 1.5rem;
   font-weight: 500;
   color: var(--tu-ink);
   line-height: 1.1;
}

.tu-solar__sun-core small {
   font-family: var(--tu-sans);
   font-size: .6rem;
   font-weight: 600;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--tu-muted);
   margin-top: 8px;
}

/* "Click to explore" hint — visible before launch */
.tu-solar__sun-core::after {
   content: 'Click to Explore ▸';
   position: absolute;
   bottom: -32px;
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--tu-sans);
   font-size: .6rem;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--tu-accent);
   white-space: nowrap;
   opacity: 1;
   animation: tuHintPulse 2s ease-in-out infinite;
   transition: opacity .4s;
}

@keyframes tuHintPulse {

   0%,
   100% {
      opacity: .5;
   }

   50% {
      opacity: 1;
   }
}

.tu-solar--launched .tu-solar__sun-core::after {
   opacity: 0;
   pointer-events: none;
}

/* ── Orbit Containers ── */
.tu-solar__orbit {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.tu-solar__orbit--1 {
   width: 58%;
   height: 58%;
}

.tu-solar__orbit--2 {
   width: 96%;
   height: 96%;
}

/* ── Orbit Rings — hidden initially, fade in on launch ── */
.tu-solar__ring {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 1px solid rgba(122, 56, 40, .12);
   opacity: 0;
   transition: opacity .8s var(--tu-ease) .3s;
}

.tu-solar__orbit--2 .tu-solar__ring {
   border-style: dashed;
   border-color: rgba(122, 56, 40, .08);
}

.tu-solar--launched .tu-solar__ring {
   opacity: 1;
}

/* ── Planet Lists — no animation by default ── */
.tu-solar__planets {
   position: absolute;
   inset: 0;
   list-style: none;
   padding: 0;
   margin: 0;
}

@keyframes tuSolarSpin {
   to {
      transform: rotate(360deg);
   }
}

/* ── Individual Planets — hidden at center by default ── */
.tu-solar__planets li {
   --angle: calc(var(--i) * 360deg / var(--total));
   position: absolute;
   width: 90px;
   height: 90px;
   border-radius: 50%;
   background: var(--tu-paper);
   border: 1px solid var(--tu-line);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 6px;
   box-shadow: 0 4px 16px -6px rgba(77, 63, 51, .12);
   cursor: default;
   /* START: hidden at center */
   top: calc(50% - 45px);
   left: calc(50% - 45px);
   opacity: 0;
   transform: scale(0);
   /* Rocket-launch transition with bouncy overshoot */
   transition:
      top .9s cubic-bezier(.15, .9, .25, 1.08),
      left .9s cubic-bezier(.15, .9, .25, 1.08),
      opacity .4s ease,
      transform .7s cubic-bezier(.15, .9, .25, 1.08),
      background .3s var(--tu-ease),
      border-color .3s,
      box-shadow .3s;
   transition-delay: calc(var(--i) * .08s);
}

/* LAUNCHED: fly to orbital positions */
.tu-solar--launched .tu-solar__planets li {
   top: calc(50% - 45px - 43% * cos(var(--angle)));
   left: calc(50% - 45px + 43% * sin(var(--angle)));
   opacity: 1;
   transform: scale(1);
}

/* Rocket glow trail — visible during flight only */
.tu-solar--launched:not(.tu-solar--orbiting) .tu-solar__planets li {
   box-shadow:
      0 0 18px 3px rgba(184, 104, 88, .30),
      0 0 40px 8px rgba(184, 104, 88, .10);
}

/* Counter-rotation keyframes — explicit from/to for perfect sync */
@keyframes tuCounterCW {
   from { transform: rotate(0deg); }
   to   { transform: rotate(-360deg); }
}

@keyframes tuCounterCCW {
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }
}

/* ORBITING: rings + planet containers spin, planets counter-rotate to stay upright */
.tu-solar--orbiting .tu-solar__orbit--1 .tu-solar__ring {
   animation: tuSolarSpin 90s linear infinite;
}

.tu-solar--orbiting .tu-solar__orbit--2 .tu-solar__ring {
   animation: tuSolarSpin 130s linear infinite reverse;
}

/* Planet containers orbit around the sun */
.tu-solar--orbiting .tu-solar__planets--inner {
   animation: tuSolarSpin 90s linear infinite;
}

.tu-solar--orbiting .tu-solar__planets--outer {
   animation: tuSolarSpin 130s linear infinite reverse;
}

/* Each planet counter-rotates to stay perfectly upright — text always readable */
.tu-solar--orbiting .tu-solar__planets--inner li {
   animation: tuCounterCW 90s linear infinite;
}

.tu-solar--orbiting .tu-solar__planets--outer li {
   animation: tuCounterCCW 130s linear infinite;
}

/* Remove rocket glow once orbiting */
.tu-solar--orbiting .tu-solar__planets li {
   box-shadow: 0 4px 16px -6px rgba(77, 63, 51, .12);
   transition: background .3s, border-color .3s, box-shadow .5s ease 0s;
}

.tu-solar__planets li span {
   font-size: 1.3rem;
   line-height: 1;
   display: block;
   margin-bottom: 3px;
}

.tu-solar__planets li b {
   font-family: var(--tu-sans);
   font-size: .58rem;
   font-weight: 600;
   letter-spacing: .5px;
   color: var(--tu-text);
   line-height: 1.2;
   display: block;
}

/* Hover — accent (only when orbiting) */
.tu-solar--orbiting .tu-solar__planets li:hover {
   background: var(--tu-accent);
   border-color: var(--tu-accent);
   box-shadow: 0 8px 24px -8px rgba(184, 104, 88, .40);
   z-index: 10;
}

.tu-solar--orbiting .tu-solar__planets li:hover b {
   color: var(--tu-paper);
}

/* ── Pause on hover ── */
.tu-solar--paused .tu-solar__planets--inner,
.tu-solar--paused .tu-solar__planets--outer,
.tu-solar--paused .tu-solar__planets--inner li,
.tu-solar--paused .tu-solar__planets--outer li {
   animation-play-state: paused;
}

/* ── Responsive ── */
@media (max-width: 720px) {
   .tu-solar {
      width: min(500px, 95vw);
   }

   .tu-solar__sun-core {
      width: 110px;
      height: 110px;
   }

   .tu-solar__sun-core span,
   .tu-solar__sun-core strong {
      font-size: 1.1rem;
   }

   .tu-solar__sun-core small {
      font-size: .5rem;
      letter-spacing: 1.5px;
      margin-top: 5px;
   }

   .tu-solar__sun-glow {
      width: 150px;
      height: 150px;
   }

   .tu-solar__planets li {
      width: 64px;
      height: 64px;
   }

   .tu-solar__planets li span {
      font-size: 1rem;
      margin-bottom: 1px;
   }

   .tu-solar__planets li b {
      font-size: .46rem;
      letter-spacing: 0;
   }
}

@media (max-width: 420px) {
   .tu-solar {
      width: 95vw;
   }

   .tu-solar__orbit--1 {
      width: 54%;
      height: 54%;
   }

   .tu-solar__sun-core {
      width: 90px;
      height: 90px;
   }

   .tu-solar__sun-core span,
   .tu-solar__sun-core strong {
      font-size: .9rem;
   }

   .tu-solar__planets li {
      width: 52px;
      height: 52px;
      padding: 4px;
   }

   .tu-solar__planets li span {
      font-size: .8rem;
   }

   .tu-solar__planets li b {
      font-size: .38rem;
   }
}


/* ═════════ 5. QUOTE ═════════ */
.tu-quote {
   padding: 120px 0;
   background: var(--tu-accent);
   color: var(--tu-paper);
   text-align: center;
   position: relative;
}

.tu-quote__mark {
   font-family: var(--tu-serif);
   font-size: 10rem;
   line-height: .6;
   color: var(--tu-accent-2);
   display: block;
   margin-bottom: 20px;
}

.tu-quote__text {
   font-family: var(--tu-serif);
   font-style: italic;
   font-size: clamp(1.6rem, 3.4vw, 2.6rem);
   line-height: 1.3;
   max-width: 900px;
   margin: 0 auto 30px;
   color: rgba(251, 246, 238, .98);
}

.tu-quote__by {
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--tu-accent-2);
}

/* ═════════ 6. EVENTS TIMELINE ═════════ */
.tu-events {
   padding: 140px 0;
}

.tu-tl {
   position: relative;
}

.tu-tl::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 1px;
   background: var(--tu-line);
   transform: translateX(-50%);
}

.tu-tl__item {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   margin-bottom: 100px;
}

.tu-tl__item--alt {
   direction: rtl;
}

.tu-tl__item--alt .tu-tl__body {
   direction: ltr;
}

.tu-tl__item--alt .tu-tl__media {
   direction: ltr;
}

.tu-tl__media {
   position: relative;
   border-radius: var(--tu-r);
   overflow: hidden;
   box-shadow: 0 30px 60px -30px rgba(77, 63, 51, .35);
}

.tu-tl__media img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   transition: transform .8s var(--tu-ease);
}

.tu-tl__item:hover .tu-tl__media img {
   transform: scale(1.04);
}

.tu-tl__badge {
   position: absolute;
   top: 18px;
   left: 18px;
   background: var(--tu-paper);
   color: var(--tu-ink);
   padding: 8px 16px;
   border-radius: 100px;
   font-size: .7rem;
   letter-spacing: 1.5px;
   font-weight: 600;
   border: 1px solid var(--tu-line);
}

.tu-tl__body {
   position: relative;
   padding-left: 70px;
}

.tu-tl__item--alt .tu-tl__body {
   padding-left: 0;
   padding-right: 70px;
}

.tu-tl__rail {
   position: absolute;
   left: 0;
   top: 0;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--tu-bg);
   border: 2px solid var(--tu-accent);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--tu-serif);
   font-weight: 600;
   color: var(--tu-accent);
}

.tu-tl__item--alt .tu-tl__rail {
   left: auto;
   right: 0;
}

.tu-tl__body h3 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: clamp(1.8rem, 3vw, 2.6rem);
   line-height: 1.1;
   margin: 8px 0 20px;
   color: var(--tu-ink);
}

.tu-tl__body p {
   margin: 0 0 1.2rem;
   color: var(--tu-text);
}

.tu-tl__chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 22px;
}

.tu-tl__chips span {
   font-size: .72rem;
   font-weight: 600;
   padding: 6px 14px;
   border-radius: 100px;
   background: var(--tu-bg-alt);
   color: var(--tu-text);
   border: 1px solid var(--tu-line);
}

/* ═════════ 7. MSME ═════════ */
.tu-msme {
   background: var(--tu-accent-3);
   color: var(--tu-paper);
   padding: clamp(80px, 10vw, 160px) 0;
   position: relative;
   overflow: hidden;
}

/* Light variants for section heading inside dark bg */
.tu-section-num--light {
   color: var(--tu-accent-2);
   border-color: rgba(248, 242, 240, .2);
}

.tu-h2--light {
   color: var(--tu-paper);
}

.tu-h2--light em {
   color: var(--tu-accent-2);
}

/* Decorative orbs */
.tu-msme__bg-orb {
   position: absolute;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   right: -200px;
   top: -200px;
   background: radial-gradient(circle, rgba(216, 168, 152, .12) 0%, transparent 70%);
   animation: tuMsmeFloat 12s ease-in-out infinite;
   pointer-events: none;
}

.tu-msme__bg-orb--2 {
   width: 400px;
   height: 400px;
   right: auto;
   left: -150px;
   top: auto;
   bottom: -150px;
   background: radial-gradient(circle, rgba(184, 104, 88, .10) 0%, transparent 70%);
   animation-delay: -6s;
   animation-duration: 15s;
}

@keyframes tuMsmeFloat {
   0%, 100% { transform: scale(1) translateY(0); }
   50%      { transform: scale(1.08) translateY(-20px); }
}

/* Grid layout */
.tu-msme__grid {
   display: grid;
   grid-template-columns: 1fr 1.3fr;
   gap: clamp(40px, 6vw, 100px);
   align-items: center;
   position: relative;
   z-index: 1;
}

/* Left content */
.tu-msme__lead {
   font-size: clamp(1.05rem, 1.4vw, 1.2rem);
   line-height: 1.75;
   color: rgba(248, 242, 240, .7);
   margin: 0 0 2rem;
   max-width: 560px;
}

/* Pillars list */
.tu-msme__pillars {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid rgba(248, 242, 240, .12);
}

.tu-msme__pillars li {
   padding: 14px 0;
   border-bottom: 1px solid rgba(248, 242, 240, .08);
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 1.02rem;
   color: rgba(248, 242, 240, .65);
   font-weight: 400;
   transition: color .3s var(--tu-ease), padding-left .3s var(--tu-ease);
}

.tu-msme__pillars li:hover {
   color: var(--tu-paper);
   padding-left: 6px;
}

.tu-msme__dot {
   width: 8px;
   height: 8px;
   background: var(--tu-accent-2);
   border-radius: 50%;
   flex-shrink: 0;
   transition: transform .3s var(--tu-ease);
}

.tu-msme__pillars li:hover .tu-msme__dot {
   transform: scale(1.4);
}

/* Right — Glass Cards */
.tu-msme__cards {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.tu-msme__card {
   background: rgba(248, 242, 240, .06);
   border: 1px solid rgba(248, 242, 240, .12);
   border-radius: var(--tu-r);
   padding: clamp(24px, 3vw, 36px);
   backdrop-filter: blur(8px);
   transition: transform .4s var(--tu-ease), background .3s, box-shadow .4s;
   position: relative;
   overflow: hidden;
}

.tu-msme__card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 4px;
   height: 100%;
   background: var(--tu-accent-2);
   opacity: 0;
   transition: opacity .3s var(--tu-ease);
}

.tu-msme__card:hover {
   background: rgba(248, 242, 240, .10);
   transform: translateY(-4px);
   box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .3);
}

.tu-msme__card:hover::before {
   opacity: 1;
}

.tu-msme__card-icon {
   font-size: 1.8rem;
   margin-bottom: 12px;
   line-height: 1;
}

.tu-msme__card h4 {
   font-family: var(--tu-serif);
   font-size: clamp(1.2rem, 1.6vw, 1.5rem);
   font-weight: 500;
   color: var(--tu-paper);
   margin: 0 0 10px;
   line-height: 1.2;
}

.tu-msme__card p {
   font-size: clamp(.92rem, 1.1vw, 1.02rem);
   color: rgba(248, 242, 240, .6);
   line-height: 1.65;
   margin: 0;
}

/* Staggered float animation on cards */
.tu-msme__card--1 { animation: tuCardFloat 6s ease-in-out infinite; }
.tu-msme__card--2 { animation: tuCardFloat 7s ease-in-out infinite .5s; }
.tu-msme__card--3 { animation: tuCardFloat 8s ease-in-out infinite 1s; }

@keyframes tuCardFloat {
   0%, 100% { transform: translateY(0); }
   50%      { transform: translateY(-8px); }
}

/* Responsive */
@media (max-width: 900px) {
   .tu-msme__grid {
      grid-template-columns: 1fr;
      gap: 50px;
   }
}

@media (max-width: 600px) {
   .tu-msme__card {
      padding: 22px;
   }
   
   .tu-msme__pillars li {
      font-size: .94rem;
   }
}

/* ═════════ 8. VISION ═════════ */
.tu-vision {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 70vh;
}

.tu-vision__panel {
   padding: clamp(60px, 8vw, 120px) var(--tu-gap);
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.tu-vision__panel--a {
   background: var(--tu-bg-alt);
}

.tu-vision__panel--b {
   background: var(--tu-accent);
   color: var(--tu-paper);
}

.tu-vision__panel--b .tu-section-num {
   color: var(--tu-accent-2);
   border-color: rgba(251, 246, 238, .25);
}

.tu-vision__panel--b .tu-h2 {
   color: var(--tu-paper);
}

.tu-vision__panel--b .tu-h2 em {
   color: var(--tu-accent-2);
}

.tu-vision__panel--b p {
   color: rgba(251, 246, 238, .92);
}

/* ═════════ 9. CTA ═════════ */
.tu-cta {
   padding: 140px var(--tu-gap);
   background: var(--tu-bg-alt);
   color: var(--tu-ink);
   position: relative;
   overflow: hidden;
   text-align: center;
}

.tu-cta__bg {
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at 20% 30%, rgba(176, 137, 104, .22), transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(230, 207, 167, .35), transparent 55%);
   pointer-events: none;
}

.tu-cta__glass {
   position: relative;
   max-width: 900px;
   margin: 0 auto;
   background: rgba(251, 246, 238, .55);
   backdrop-filter: blur(14px);
   border: 1px solid rgba(77, 63, 51, .12);
   border-radius: calc(var(--tu-r) * 1.6);
   padding: clamp(50px, 7vw, 90px) clamp(30px, 5vw, 70px);
}

.tu-cta__pre {
   display: block;
   font-size: .72rem;
   font-weight: 600;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--tu-accent);
   margin-bottom: 28px;
}

.tu-cta__title {
   font-family: var(--tu-serif);
   font-weight: 400;
   font-size: clamp(2.6rem, 6vw, 5rem);
   line-height: 1.05;
   margin: 0 0 24px;
   color: var(--tu-ink);
}

.tu-cta__title em {
   color: var(--tu-accent);
   font-style: italic;
}

.tu-cta__sub {
   max-width: 560px;
   margin: 0 auto 36px;
   color: var(--tu-text);
   font-size: 1.05rem;
}

.tu-cta__actions {
   display: inline-flex;
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
}

.tu-cta__btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 18px 36px;
   border-radius: 100px;
   font-weight: 600;
   font-size: .9rem;
   text-decoration: none;
   letter-spacing: 1px;
   transition: all .35s var(--tu-ease);
}

.tu-cta__btn--primary {
   background: var(--tu-accent);
   color: var(--tu-paper);
}

.tu-cta__btn--primary:hover {
   background: var(--tu-ink);
   transform: translateY(-3px);
   box-shadow: 0 14px 30px rgba(77, 63, 51, .28);
}

.tu-cta__btn--ghost {
   border: 1px solid var(--tu-line);
   color: var(--tu-ink);
}

.tu-cta__btn--ghost:hover {
   background: rgba(77, 63, 51, .06);
}

.tu-cta__btn svg {
   width: 18px;
   height: 18px;
}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 1100px) {
   .tu-sidenav {
      display: none;
   }

   .tu-hero__grid {
      grid-template-columns: 1fr 1fr;
   }

   .tu-hero__image {
      grid-column: 1 / -1;
      grid-row: 4;
      min-height: 320px;
   }

   .tu-hero__title-wrap {
      grid-column: 1 / -1;
   }

   .tu-hero__quote {
      grid-column: 1 / -1;
   }

   .tu-hero__stats {
      grid-column: 1 / -1;
      justify-content: flex-start;
   }

   .tu-about__layout {
      grid-template-columns: 1fr;
   }

   .tu-stats__wall {
      grid-template-columns: repeat(4, 1fr);
   }

   .tu-stat--lg {
      grid-column: span 2;
      grid-row: span 2;
   }

   .tu-stat {
      grid-column: span 2;
   }

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

   .tu-vision {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 720px) {
   .tu-hero {
      padding-top: 70px;
   }

   .tu-hero__grid {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .tu-stats__wall {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 170px;
   }

   .tu-stat,
   .tu-stat--lg,
   .tu-stat--wide {
      grid-column: span 2;
   }

   .tu-stat--lg {
      grid-row: span 1;
   }

   .tu-tl::before {
      display: none;
   }

   .tu-tl__item,
   .tu-tl__item--alt {
      grid-template-columns: 1fr;
      direction: ltr;
   }

   .tu-tl__body,
   .tu-tl__item--alt .tu-tl__body {
      padding: 0;
   }

   .tu-tl__rail {
      position: static;
      margin-bottom: 14px;
   }

   .tu-msme__pillars {
      grid-template-columns: 1fr;
   }

   .tu-orbit__list li {
      width: 80px;
      height: 80px;
      font-size: .6rem;
   }

   .tu-orbit__list li span {
      font-size: 1.1rem;
   }

   .tu-orbit__core {
      width: 140px;
      height: 140px;
      font-size: 1.4rem;
   }
}

/* 3D floating orbs */
.orb {
   position: absolute;
   border-radius: 50%;
   animation: float3d 8s ease-in-out infinite;
   transform-style: preserve-3d;
}

.orb-1 {
   width: 380px;
   height: 380px;
   top: -80px;
   right: -80px;
   background: radial-gradient(circle at 35% 35%, var(--stone-200), var(--stone-300) 60%, var(--stone-400));
   opacity: 0.4;
   animation-delay: 0s;
}

.orb-2 {
   width: 220px;
   height: 220px;
   bottom: 10%;
   left: -60px;
   background: radial-gradient(circle at 40% 30%, var(--warm-gold-light), var(--warm-gold) 60%, var(--warm-gold-dark));
   opacity: 0.25;
   animation-delay: -3s;
}

.orb-3 {
   width: 150px;
   height: 150px;
   top: 30%;
   left: 10%;
   background: radial-gradient(circle at 40% 35%, var(--stone-300), var(--stone-400));
   opacity: 0.3;
   animation-delay: -5s;
}

.orb-4 {
   width: 100px;
   height: 100px;
   bottom: 20%;
   right: 15%;
   background: radial-gradient(circle at 40% 35%, var(--warm-gold-light), var(--warm-gold));
   opacity: 0.2;
   animation-delay: -1.5s;
}

@keyframes float3d {

   0%,
   100% {
      transform: translateY(0px) rotateX(0deg) rotateY(0deg);
   }

   25% {
      transform: translateY(-20px) rotateX(5deg) rotateY(8deg);
   }

   50% {
      transform: translateY(-10px) rotateX(-3deg) rotateY(-5deg);
   }

   75% {
      transform: translateY(-30px) rotateX(8deg) rotateY(3deg);
   }
}

.tu-about .tu-wrap {
   position: relative;
   z-index: 2;
}

.orb {
   z-index: 1;
   pointer-events: none;
}

/* ════════════════════════════════════════
   TANTIA UNIVERSITY — CSS ADDITIONS
   Append these styles to tantia-university.css
   New sections: Facilities Grid + Student Life Strip
   ════════════════════════════════════════ */

/* ═════════ FACILITIES PHOTO GRID ═════════ */
.tu-facilities {
   padding: 140px 0;
   background: var(--tu-bg);
}

.tu-facilities__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto auto;
   gap: 16px;
}

/* Wide cards span 2 columns */
.tu-facility__card--wide {
   grid-column: span 2;
}

/* When --wide is the 4th item (bottom-right), align it right */
.tu-facility__card:nth-child(4) {
   grid-column: 2 / span 2;
}

.tu-facility__card {
   border-radius: var(--tu-r);
   overflow: hidden;
   position: relative;
}

.tu-facility__img-wrap {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 280px;
}

.tu-facility__img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .8s var(--tu-ease);
   filter: grayscale(.08) contrast(1.03);
}

.tu-facility__card:hover .tu-facility__img-wrap img {
   transform: scale(1.05);
}

.tu-facility__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top,
         rgba(74, 31, 46, .82) 0%,
         rgba(74, 31, 46, .35) 45%,
         transparent 70%);
   transition: opacity .4s var(--tu-ease);
}

.tu-facility__card:hover .tu-facility__overlay {
   opacity: .9;
}

.tu-facility__caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 28px 28px 32px;
   color: var(--tu-paper);
}

.tu-facility__tag {
   display: inline-block;
   font-size: .68rem;
   font-weight: 600;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--tu-accent-2);
   margin-bottom: 8px;
}

.tu-facility__caption h4 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: clamp(1.2rem, 2vw, 1.7rem);
   line-height: 1.15;
   margin: 0 0 8px;
   color: var(--tu-paper);
}

.tu-facility__caption p {
   font-size: .85rem;
   line-height: 1.5;
   color: rgba(255, 255, 255, .8);
   margin: 0;
   max-width: 360px;

   /* Hidden by default, revealed on hover */
   opacity: 0;
   transform: translateY(8px);
   transition: all .4s var(--tu-ease) .05s;
}

.tu-facility__card:hover .tu-facility__caption p {
   opacity: 1;
   transform: none;
}

/* Responsive: Facilities */
@media (max-width: 900px) {
   .tu-facilities__grid {
      grid-template-columns: 1fr 1fr;
   }

   .tu-facility__card--wide,
   .tu-facility__card:nth-child(4) {
      grid-column: span 2;
   }
}

@media (max-width: 560px) {
   .tu-facilities__grid {
      grid-template-columns: 1fr;
   }

   .tu-facility__card--wide,
   .tu-facility__card:nth-child(4) {
      grid-column: span 1;
   }

   .tu-facility__img-wrap {
      min-height: 220px;
   }

   .tu-facility__caption p {
      opacity: 1;
      transform: none;
   }
}


/* ═════════ STUDENT LIFE STRIP ═════════ */
.tu-life {
   padding: 140px 0;
   background: var(--tu-bg-alt);
}

.tu-life__strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   align-items: start;
}

.tu-life__item {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.tu-life__img-wrap {
   border-radius: var(--tu-r);
   overflow: hidden;
   position: relative;
}

.tu-life__img-wrap img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
   transition: transform .7s var(--tu-ease);
   filter: grayscale(.05) contrast(1.04);
}

.tu-life__item:hover .tu-life__img-wrap img {
   transform: scale(1.04);
}

/* Stagger heights for visual rhythm */
.tu-life__item:nth-child(1) .tu-life__img-wrap img {
   aspect-ratio: 4/3;
}

.tu-life__item:nth-child(2) .tu-life__img-wrap img {
   aspect-ratio: 3/4;
}

.tu-life__item:nth-child(3) .tu-life__img-wrap img {
   aspect-ratio: 4/3;
}

.tu-life__body {
   padding: 0 4px;
}

.tu-life__body h4 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: 1.4rem;
   line-height: 1.15;
   margin: 6px 0 10px;
   color: var(--tu-ink);
}

.tu-life__body p {
   font-size: .92rem;
   line-height: 1.65;
   color: var(--tu-text);
   margin: 0;
}

/* Responsive: Student Life */
@media (max-width: 900px) {
   .tu-life__strip {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
   }

   .tu-life__item:nth-child(3) {
      grid-column: span 2;
   }

   .tu-life__item:nth-child(3) .tu-life__img-wrap img {
      aspect-ratio: 16/7;
   }
}

@media (max-width: 560px) {
   .tu-life__strip {
      grid-template-columns: 1fr;
   }

   .tu-life__item:nth-child(2) .tu-life__img-wrap img,
   .tu-life__item:nth-child(3) .tu-life__img-wrap img {
      aspect-ratio: 4/3;
   }

   .tu-life__item:nth-child(3) {
      grid-column: span 1;
   }
}

/* ════════════════════════════════════════
   TANTIA UNIVERSITY — CSS ADDITIONS
   Append these styles to tantia-university.css
   New sections: Facilities Grid + Student Life Strip
   ════════════════════════════════════════ */

/* ═════════ FACILITIES PHOTO GRID ═════════ */
.tu-facilities {
   padding: 140px 0;
   background: var(--tu-bg);
}

.tu-facilities__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto auto;
   gap: 16px;
}

/* Wide cards span 2 columns */
.tu-facility__card--wide {
   grid-column: span 2;
}

/* When --wide is the 4th item (bottom-right), align it right */
.tu-facility__card:nth-child(4) {
   grid-column: 2 / span 2;
}

.tu-facility__card {
   border-radius: var(--tu-r);
   overflow: hidden;
   position: relative;
}

.tu-facility__img-wrap {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 280px;
}

.tu-facility__img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .8s var(--tu-ease);
   filter: grayscale(.08) contrast(1.03);
}

.tu-facility__card:hover .tu-facility__img-wrap img {
   transform: scale(1.05);
}

.tu-facility__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top,
         rgba(74, 31, 46, .82) 0%,
         rgba(74, 31, 46, .35) 45%,
         transparent 70%);
   transition: opacity .4s var(--tu-ease);
}

.tu-facility__card:hover .tu-facility__overlay {
   opacity: .9;
}

.tu-facility__caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 28px 28px 32px;
   color: var(--tu-paper);
}

.tu-facility__tag {
   display: inline-block;
   font-size: .68rem;
   font-weight: 600;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--tu-accent-2);
   margin-bottom: 8px;
}

.tu-facility__caption h4 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: clamp(1.2rem, 2vw, 1.7rem);
   line-height: 1.15;
   margin: 0 0 8px;
   color: var(--tu-paper);
}

.tu-facility__caption p {
   font-size: .85rem;
   line-height: 1.5;
   color: rgba(255, 255, 255, .8);
   margin: 0;
   max-width: 360px;

   /* Hidden by default, revealed on hover */
   opacity: 0;
   transform: translateY(8px);
   transition: all .4s var(--tu-ease) .05s;
}

.tu-facility__card:hover .tu-facility__caption p {
   opacity: 1;
   transform: none;
}

/* Responsive: Facilities */
@media (max-width: 900px) {
   .tu-facilities__grid {
      grid-template-columns: 1fr 1fr;
   }

   .tu-facility__card--wide,
   .tu-facility__card:nth-child(4) {
      grid-column: span 2;
   }
}

@media (max-width: 560px) {
   .tu-facilities__grid {
      grid-template-columns: 1fr;
   }

   .tu-facility__card--wide,
   .tu-facility__card:nth-child(4) {
      grid-column: span 1;
   }

   .tu-facility__img-wrap {
      min-height: 220px;
   }

   .tu-facility__caption p {
      opacity: 1;
      transform: none;
   }
}


/* ═════════ STUDENT LIFE STRIP ═════════ */
.tu-life {
   padding: 140px 0;
   background: var(--tu-bg-alt);
}

.tu-life__strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   align-items: start;
}

.tu-life__item {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.tu-life__img-wrap {
   border-radius: var(--tu-r);
   overflow: hidden;
   position: relative;
}

.tu-life__img-wrap img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
   transition: transform .7s var(--tu-ease);
   filter: grayscale(.05) contrast(1.04);
}

.tu-life__item:hover .tu-life__img-wrap img {
   transform: scale(1.04);
}

/* Stagger heights for visual rhythm */
.tu-life__item:nth-child(1) .tu-life__img-wrap img {
   aspect-ratio: 4/3;
}

.tu-life__item:nth-child(2) .tu-life__img-wrap img {
   aspect-ratio: 3/4;
}

.tu-life__item:nth-child(3) .tu-life__img-wrap img {
   aspect-ratio: 4/3;
}

.tu-life__body {
   padding: 0 4px;
}

.tu-life__body h4 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: 1.4rem;
   line-height: 1.15;
   margin: 6px 0 10px;
   color: var(--tu-ink);
}

.tu-life__body p {
   font-size: .92rem;
   line-height: 1.65;
   color: var(--tu-text);
   margin: 0;
}

/* Responsive: Student Life */
@media (max-width: 900px) {
   .tu-life__strip {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
   }

   .tu-life__item:nth-child(3) {
      grid-column: span 2;
   }

   .tu-life__item:nth-child(3) .tu-life__img-wrap img {
      aspect-ratio: 16/7;
   }
}

@media (max-width: 560px) {
   .tu-life__strip {
      grid-template-columns: 1fr;
   }

   .tu-life__item:nth-child(2) .tu-life__img-wrap img,
   .tu-life__item:nth-child(3) .tu-life__img-wrap img {
      aspect-ratio: 4/3;
   }

   .tu-life__item:nth-child(3) {
      grid-column: span 1;
   }
}

/* ════════════════════════════════════════
   TANTIA UNIVERSITY — CSS ADDITIONS
   Append these styles to tantia-university.css
   New sections: Facilities Grid + Student Life Strip
   ════════════════════════════════════════ */

/* ═════════ FACILITIES PHOTO GRID ═════════ */
.tu-facilities {
   padding: 140px 0;
   background: var(--tu-bg);
}

.tu-facilities__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto auto;
   gap: 16px;
}

/* Wide cards span 2 columns */
.tu-facility__card--wide {
   grid-column: span 2;
}

/* When --wide is the 4th item (bottom-right), align it right */
.tu-facility__card:nth-child(4) {
   grid-column: 2 / span 2;
}

.tu-facility__card {
   border-radius: var(--tu-r);
   overflow: hidden;
   position: relative;
}

.tu-facility__img-wrap {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 280px;
}

.tu-facility__img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .8s var(--tu-ease);
   filter: grayscale(.08) contrast(1.03);
}

.tu-facility__card:hover .tu-facility__img-wrap img {
   transform: scale(1.05);
}

.tu-facility__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top,
         rgba(74, 31, 46, .82) 0%,
         rgba(74, 31, 46, .35) 45%,
         transparent 70%);
   transition: opacity .4s var(--tu-ease);
}

.tu-facility__card:hover .tu-facility__overlay {
   opacity: .9;
}

.tu-facility__caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 28px 28px 32px;
   color: var(--tu-paper);
}

.tu-facility__tag {
   display: inline-block;
   font-size: .68rem;
   font-weight: 600;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--tu-accent-2);
   margin-bottom: 8px;
}

.tu-facility__caption h4 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: clamp(1.2rem, 2vw, 1.7rem);
   line-height: 1.15;
   margin: 0 0 8px;
   color: var(--tu-paper);
}

.tu-facility__caption p {
   font-size: .85rem;
   line-height: 1.5;
   color: rgba(255, 255, 255, .8);
   margin: 0;
   max-width: 360px;

   /* Hidden by default, revealed on hover */
   opacity: 0;
   transform: translateY(8px);
   transition: all .4s var(--tu-ease) .05s;
}

.tu-facility__card:hover .tu-facility__caption p {
   opacity: 1;
   transform: none;
}

/* Responsive: Facilities */
@media (max-width: 900px) {
   .tu-facilities__grid {
      grid-template-columns: 1fr 1fr;
   }

   .tu-facility__card--wide,
   .tu-facility__card:nth-child(4) {
      grid-column: span 2;
   }
}

@media (max-width: 560px) {
   .tu-facilities__grid {
      grid-template-columns: 1fr;
   }

   .tu-facility__card--wide,
   .tu-facility__card:nth-child(4) {
      grid-column: span 1;
   }

   .tu-facility__img-wrap {
      min-height: 220px;
   }

   .tu-facility__caption p {
      opacity: 1;
      transform: none;
   }
}


/* ═════════ STUDENT LIFE STRIP ═════════ */
.tu-life {
   padding: 140px 0;
   background: var(--tu-bg-alt);
}

.tu-life__strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   align-items: start;
}

.tu-life__item {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.tu-life__img-wrap {
   border-radius: var(--tu-r);
   overflow: hidden;
   position: relative;
}

.tu-life__img-wrap img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
   transition: transform .7s var(--tu-ease);
   filter: grayscale(.05) contrast(1.04);
}

.tu-life__item:hover .tu-life__img-wrap img {
   transform: scale(1.04);
}

/* Stagger heights for visual rhythm */
.tu-life__item:nth-child(1) .tu-life__img-wrap img {
   aspect-ratio: 4/3;
}

.tu-life__item:nth-child(2) .tu-life__img-wrap img {
   aspect-ratio: 3/4;
}

.tu-life__item:nth-child(3) .tu-life__img-wrap img {
   aspect-ratio: 4/3;
}

.tu-life__body {
   padding: 0 4px;
}

.tu-life__body h4 {
   font-family: var(--tu-serif);
   font-weight: 500;
   font-size: 1.4rem;
   line-height: 1.15;
   margin: 6px 0 10px;
   color: var(--tu-ink);
}

.tu-life__body p {
   font-size: .92rem;
   line-height: 1.65;
   color: var(--tu-text);
   margin: 0;
}

/* Responsive: Student Life */
@media (max-width: 900px) {
   .tu-life__strip {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
   }

   .tu-life__item:nth-child(3) {
      grid-column: span 2;
   }

   .tu-life__item:nth-child(3) .tu-life__img-wrap img {
      aspect-ratio: 16/7;
   }
}

@media (max-width: 560px) {
   .tu-life__strip {
      grid-template-columns: 1fr;
   }

   .tu-life__item:nth-child(2) .tu-life__img-wrap img,
   .tu-life__item:nth-child(3) .tu-life__img-wrap img {
      aspect-ratio: 4/3;
   }

   .tu-life__item:nth-child(3) {
      grid-column: span 1;
   }
}

.tu-tl__media--multi {
   display: flex;
   flex-direction: column;
   gap: 10px;
   border-radius: var(--tu-r);
   overflow: hidden;
   box-shadow: 0 30px 60px -30px rgba(77, 63, 51, .35);
}

/* Primary large image */
.tu-tl__media-primary {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: var(--tu-r) var(--tu-r) 0 0;
}

.tu-tl__media-primary img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
   transition: transform .8s var(--tu-ease);
   filter: grayscale(.06) contrast(1.03);
}

.tu-tl__item:hover .tu-tl__media-primary img {
   transform: scale(1.04);
}

/* Badge sits on primary image (inherits existing .tu-tl__badge positioning) */
.tu-tl__media-primary .tu-tl__badge {
   position: absolute;
   top: 18px;
   left: 18px;
   background: var(--tu-paper);
   color: var(--tu-ink);
   padding: 8px 16px;
   border-radius: 100px;
   font-size: .7rem;
   letter-spacing: 1.5px;
   font-weight: 600;
   border: 1px solid var(--tu-line);
   z-index: 2;
}

/* Two thumbnail images side by side */
.tu-tl__media-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.tu-tl__media-thumb {
   overflow: hidden;
   border-radius: 0;
   position: relative;
}

/* Round bottom corners on last row */
.tu-tl__media-row .tu-tl__media-thumb:first-child {
   border-radius: 0 0 0 var(--tu-r);
}

.tu-tl__media-row .tu-tl__media-thumb:last-child {
   border-radius: 0 0 var(--tu-r) 0;
}

.tu-tl__media-thumb img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
   transition: transform .7s var(--tu-ease);
   filter: grayscale(.08) contrast(1.02);
}

.tu-tl__item:hover .tu-tl__media-thumb img {
   transform: scale(1.06);
}

/* Responsive: collapse thumbnails to single col on mobile */
@media (max-width: 560px) {
   .tu-tl__media-row {
      grid-template-columns: 1fr;
   }

   .tu-tl__media-row .tu-tl__media-thumb:first-child {
      border-radius: 0;
   }

   .tu-tl__media-row .tu-tl__media-thumb:last-child {
      border-radius: 0 0 var(--tu-r) var(--tu-r);
   }
}

.tu-about__slider{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.tu-slide{
  display: none;
}

.tu-slide.active{
  display: block;
}

.tu-slide img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.tu-slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 24px;
  z-index: 5;
}

.tu-slider-btn.prev{
  left: 16px;
}

.tu-slider-btn.next{
  right: 16px;
}


/* WEBGL FLUID BACKGROUND */
#fluid-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

/* Canvas created by library */
#fluid-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Ensure content stays above fluid */
.tu-page {
  position: relative;
  z-index: 2;
}


/* Gallery Layout */
.tu-msme__gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  position:relative;
}

/* Photo Card */
.tu-msme__photo{
  overflow:hidden;
  border-radius:24px;
  position:relative;
  background:transparent;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  transition:0.4s ease;
  
  display:flex;
  align-items:center;
  justify-content:center;
}   

/* Image */
.tu-msme__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:0.5s ease;
}

/* Hover Effects */
.tu-msme__photo:hover{
  transform:translateY(-6px);
}

.tu-msme__photo:hover img{
  transform:scale(1.05);
}

/* Different Heights for Modern Look */
.tu-msme__photo:nth-child(1){
  height:360px;
}

.tu-msme__photo:nth-child(2){
  height:260px;
  margin-top:40px;
}

.tu-msme__photo:nth-child(3){
  height:260px;
}

.tu-msme__photo:nth-child(4){
  height:360px;
  margin-top:-40px;
}

/* Mobile */
@media(max-width:768px){

  .tu-msme__gallery{
    grid-template-columns:1fr;
  }

  .tu-msme__photo{
    margin-top:0 !important;
    height:240px !important;
  }

}