:root {
      /* === ROYAL PALETTE (aligned to CATKing Results page + Brand Manual) === */
      /* Primary trio: ink black, brand orange, royal blue. White ground. */
      --orange: #FEA82F;
      /* CATKing orange , primary accent */
      --orange-d: #E8951F;
      /* hover / pressed */
      --orange-l: #FFF4E0;
      /* warm cream tint */
      --blue: #2385F4;
      /* royal blue , saturated, energetic */
      --blue-d: #1A6FCC;
      --blue-l: #EAF3FE;
      /* light blue wash */
      --navy: #1a1a2e;
      /* deep navy , section ground */
      --navy-d: #11111f;
      --navy-l: #242438;
      --ink: #0f0f1c;
      /* richer black , hero/CTA bands */
      --dark: #0f0f1c;
      --text: #1a1a2e;
      --muted: #6b6b7d;
      --soft: #6b6b7d;
      --border: #e6e6ec;
      --line: #e6e6ec;
      --bg: #f5f7fa;
      /* cool off-white */
      --bg-warm: #fafaf7;
      /* warm off-white */
      --bg-d: #0f0f1c;
      /* Legacy aliases (so existing class references don't break) */
      --gold: #FEA82F;
      --gold-d: #E8951F;
      --gold-l: #FFF4E0;
      --green: #1F8A5B;
      --green-d: #0F5E3A;
      --green-l: #E4F1EA;
      /* Display serif for stats, countdowns, big numbers */
      --serif: Georgia, "Times New Roman", serif;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #fff;
      color: var(--text);
      line-height: 1.6;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      letter-spacing: -.005em;
    }

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

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

    /* ============ TOP NAV ============ */
    .tn {
      background: #1a1a1a;
      border-bottom: 2px solid var(--gold);
      padding: 8px 22px;
      display: flex;
      align-items: center;
      gap: 18px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1100;
      height: 54px;
    }

    .tn .logo-img {
      height: 36px;
    }

    .tn .links {
      display: flex;
      gap: 4px;
      flex: 1;
      margin-left: 14px;
    }

    .tn .links a {
      color: rgba(255, 255, 255, .75);
      font-size: 11px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 14px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .tn .links a:hover,
    .tn .links a.act {
      background: var(--blue);
      color: #fff;
    }

    .tn .right {
      display: flex;
      gap: 12px;
      align-items: center;
      color: #fff;
      font-size: 12px;
    }

    .tn .right .ico {
      font-size: 15px;
      cursor: pointer;
      opacity: .85;
    }

    .tn .right .av {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 12px;
      border: 2px solid var(--gold);
    }

    .tn .apply {
      background: var(--gold);
      color: #1a1a1a;
      padding: 7px 16px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    body {
      padding-top: 54px;
    }

    /* Mobile horizontal-overflow fail-safe — applied per-section instead of on body
   because body{overflow-x:hidden} silently disables position:sticky on the sub-nav.
   Each potentially-overflowing section gets clipped individually below. */

    /* ============ HERO with multiple looping videos ============ */
    .hero {
      position: relative;
      min-height: 88vh;
      background: var(--ink);
      color: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    /* Multi-layer video grid placeholder (4 video tiles tiled in background) */
    .hero-bg {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .hero-bg .vt {
      position: relative;
      overflow: hidden;
      background: #1a1a1a;
    }

    .hero-bg .vt:nth-child(1) {
      background: var(--navy);
    }

    .hero-bg .vt:nth-child(2) {
      background: #1a1a1a;
    }

    .hero-bg .vt:nth-child(3) {
      background: #1a1a1a;
    }

    .hero-bg .vt:nth-child(4) {
      background: var(--navy-d);
    }

    .hero-bg .vt::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 14px, rgba(255, 255, 255, .06) 14px 28px);
    }

    .hero-bg .vt::after {
      content: "";
      position: absolute;
      width: 140%;
      height: 140%;
      left: -20%;
      top: -20%;
      background: radial-gradient(circle at 50% 50%, rgba(74, 143, 217, .18) 0%, transparent 50%);
      animation: bgmove 14s ease-in-out infinite alternate;
    }

    .hero-bg .vt:nth-child(2)::after {
      background: radial-gradient(circle at 50% 50%, rgba(245, 166, 35, .15) 0%, transparent 50%);
      animation-delay: -3s;
      animation-duration: 18s;
    }

    .hero-bg .vt:nth-child(3)::after {
      background: radial-gradient(circle at 50% 50%, rgba(59, 183, 126, .15) 0%, transparent 50%);
      animation-delay: -6s;
      animation-duration: 16s;
    }

    .hero-bg .vt:nth-child(4)::after {
      background: radial-gradient(circle at 50% 50%, rgba(74, 143, 217, .18) 0%, transparent 50%);
      animation-delay: -9s;
      animation-duration: 20s;
    }

    @keyframes bgmove {
      0% {
        transform: scale(1) translateX(0);
      }

      100% {
        transform: scale(1.15) translateX(-3%);
      }
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(10, 10, 10, .55);
    }

    .hero .vid-tag {
      position: absolute;
      top: 18px;
      left: 22px;
      background: rgba(0, 0, 0, .5);
      border: 1px solid rgba(255, 255, 255, .15);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 7px;
      z-index: 5;
    }

    .hero .vid-tag .dot {
      width: 8px;
      height: 8px;
      background: var(--gold);
      border-radius: 50%;
      animation: pulse 1.6s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .4;
      }
    }

    .hero .mute-btn {
      position: absolute;
      top: 18px;
      right: 22px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      cursor: pointer;
      z-index: 5;
      border: 1px solid rgba(255, 255, 255, .2);
      color: #fff;
    }

    .hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 22px;
      position: relative;
      z-index: 3;
      width: 100%;
    }

    .hero .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      padding: 7px 16px;
      border-radius: 30px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 24px;
      color: #fff;
    }

    .hero .eyebrow .pip {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
    }

    .hero h1 {
      font-size: 88px;
      font-weight: 900;
      letter-spacing: -3px;
      line-height: .92;
      margin-bottom: 18px;
      color: #fff;
    }

    .hero h1 .lite {
      font-weight: 300;
      font-size: 62px;
      letter-spacing: -2px;
      display: block;
      margin-bottom: 6px;
      color: rgba(255, 255, 255, .85);
    }

    .hero h1 .yellow {
      color: var(--gold);
    }

    .hero .sub {
      font-size: 19px;
      opacity: .88;
      max-width: 680px;
      margin-bottom: 32px;
      font-weight: 400;
      line-height: 1.55;
    }

    .hero .ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 36px;
    }

    .hero .btn {
      padding: 15px 30px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .15s;
      border: 0;
    }

    .hero .btn:hover {
      transform: translateY(-2px);
    }

    .hero .btn.p {
      background: var(--gold);
      color: #1a1a1a;
    }

    .hero .btn.p:hover {
      background: var(--gold-d);
    }

    .hero .btn.s {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .4);
    }

    .hero .btn.s:hover {
      background: rgba(255, 255, 255, .1);
    }

    .hero .btn.s .play {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      color: var(--navy);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
    }

    .hero-stats {
      display: flex;
      gap: 36px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding-top: 30px;
      flex-wrap: wrap;
    }

    .hero-stats .hs {}

    .hero-stats .hs .n {
      font-size: 30px;
      font-weight: 900;
      color: var(--gold);
      font-family: var(--serif);
    }

    .hero-stats .hs .l {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: .7;
      margin-top: 4px;
    }

    /* Marquee announcement */
    .marquee {
      background: var(--blue);
      color: #fff;
      padding: 10px 0;
      overflow: hidden;
      border-bottom: 1px solid var(--blue-d);
    }

    .marquee-track {
      display: flex;
      gap: 60px;
      white-space: nowrap;
      animation: scrollx 35s linear infinite;
    }

    .marquee-track span {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .marquee-track span::before {
      content: "\25cf";
      color: var(--gold);
    }

    @keyframes scrollx {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    /* Sticky sub nav */
    .sub-nav {
      position: sticky;
      top: 54px;
      background: #fff;
      border-bottom: 1px solid var(--border);
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
      max-width: 100vw;
      overflow-x: hidden;
    }

    .sub-nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 22px;
      display: flex;
      align-items: center;
      overflow-x: auto;
    }

    .sub-nav a {
      padding: 18px 14px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 3px solid transparent;
      white-space: nowrap;
      transition: .2s;
    }

    .sub-nav a:hover,
    .sub-nav a.act {
      color: var(--orange-d);
      border-bottom-color: var(--orange);
    }

    .sub-nav .cta {
      margin-left: auto;
      background: var(--green);
      color: #fff;
      padding: 8px 18px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      border-bottom: 0;
    }

    .sub-nav .cta:hover {
      background: var(--green-d);
    }

    /* SECTION SCAFFOLD */
    .sec {
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 22px;
    }

    .sec.dark {
      background: var(--ink);
      color: #fff;
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    .sec.dark .sec-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 22px;
    }

    .sec.bg {
      background: var(--bg);
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    .sec.bg .sec-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 22px;
    }

    .sec h2 {
      font-size: 46px;
      font-weight: 900;
      letter-spacing: -1.8px;
      margin-bottom: 10px;
      line-height: 1.05;
      color: var(--dark);
    }

    .sec.dark h2 {
      color: #fff;
    }

    .sec h2 .accent {
      color: var(--blue);
    }

    .sec.dark h2 .accent {
      color: var(--gold);
    }

    .sec .sub-h {
      font-size: 15px;
      color: var(--muted);
      max-width: 680px;
      margin-bottom: 42px;
    }

    .sec.dark .sub-h {
      color: rgba(255, 255, 255, .7);
    }

    .sec-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 32px;
      gap: 30px;
      flex-wrap: wrap;
    }

    .sec-head .right-link {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--orange-d);
      padding: 10px 0;
      border-bottom: 2px solid var(--orange);
    }

    /* Reveal animation hook */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }

    /* Highlight animations */
    .accent {
      position: relative;
      display: inline-block;
      color: var(--blue) !important;
      z-index: 1;
    }

    .accent::after {
      content: none;
    }

    /* Removed highlights */

    .hi {
      background: transparent;
      padding: 1px 4px;
      font-weight: 700;
      color: var(--ink);
    }


    /* ====== PROGRAMME BREATHER (intro tagline strip) ====== */
    .prog-breather {
      padding: 60px 22px;
      background: var(--navy);
      color: #fff;
      text-align: center;
    }

    .prog-breather h3,
    .prog-breather .prog-breather-text {
      font-size: 32px;
      font-weight: 300;
      letter-spacing: -.8px;
      line-height: 1.3;
      max-width: 980px;
      margin: 0 auto;
    }

    .prog-breather h3 b,
    .prog-breather .prog-breather-text b {
      font-weight: 800;
      color: var(--gold);
    }

    /* ====== CRAFTED SECTION (cohort fit) ====== */
    .crafted {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .craft-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px 24px;
      position: relative;
      overflow: hidden;
      transition: .3s;
    }

    .craft-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    }

    .craft-card .ico {
      width: 50px;
      height: 50px;
      background: var(--blue-l);
      color: var(--blue-d);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 18px;
    }

    .craft-card:nth-child(2) .ico {
      background: var(--green-l);
      color: var(--green-d);
    }

    .craft-card:nth-child(3) .ico {
      background: var(--gold-l);
      color: var(--gold-d);
    }

    .craft-card h4 {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 10px;
      color: var(--dark);
    }

    .craft-card p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
    }

    .craft-card .num {
      position: absolute;
      top: 14px;
      right: 18px;
      font-size: 48px;
      font-weight: 900;
      color: var(--bg);
      line-height: 1;
    }

    /* ====== BLUEPRINT, pillars (4-up grid with image+text) ====== */
    .blueprint {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .bp-card {
      background: var(--navy);
      color: #fff;
      border-radius: 14px;
      padding: 26px 22px;
      position: relative;
      overflow: hidden;
      transition: .3s;
      cursor: pointer;
    }

    .bp-card:hover {
      transform: translateY(-6px);
      background: var(--blue-d);
    }

    .bp-card::before {
      content: "";
      position: absolute;
      top: -30px;
      right: -30px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(245, 166, 35, .15);
    }

    .bp-card .num {
      font-size: 42px;
      font-weight: 900;
      color: var(--gold);
      font-family: var(--serif);
      line-height: 1;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
    }

    .bp-card h4 {
      font-size: 17px;
      font-weight: 800;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
    }

    .bp-card p {
      font-size: 12px;
      opacity: .8;
      line-height: 1.6;
      position: relative;
      z-index: 2;
    }

    /* ====== SEMESTER CURRICULUM, phase tabs + content ====== */
    .curr {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
    }

    .curr-tabs {
      display: flex;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
    }

    .curr-tabs .tab {
      padding: 18px 24px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      white-space: nowrap;
      transition: .2s;
    }

    .curr-tabs .tab.act {
      color: var(--orange-d);
      background: #fff;
      border-bottom-color: var(--orange);
    }

    .curr-body {
      padding: 32px;
      display: none;
    }

    .curr-body.act {
      display: block;
    }

    .curr-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 24px;
    }

    @media (max-width:600px) {
      .curr-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      .curr-mod {
        padding: 16px 18px !important;
      }

      .curr-mod h5 {
        font-size: 15px !important;
      }

      .curr-mod p {
        font-size: 13px !important;
      }
    }

    .curr-mod {
      background: #fff;
      border: 1px solid var(--border);
      border-left: 4px solid var(--orange);
      border-radius: 8px;
      padding: 18px 20px;
    }

    .curr-mod h5 {
      font-size: 14px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 6px;
    }

    .curr-mod p {
      font-size: 12px;
      color: #555;
      line-height: 1.55;
    }

    .curr-mod .meta {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--ink);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px dashed var(--border);
    }

    .curr-mod .meta::before {
      content: "\25cf  ";
      color: var(--orange);
    }

    .curr-mod.intensive-only {
      border-left-color: var(--orange);
      background: linear-gradient(135deg, #FFF4E0 0%, #FFE9C7 100%);
    }

    .curr-mod.intensive-only h5 {
      color: var(--ink);
    }

    .curr-mod.intensive-only .meta-exclusive {
      color: var(--orange-d);
      font-weight: 800;
    }

    .omet-intro {
      font-size: 13.5px;
      color: var(--muted);
      margin: -4px 0 18px;
      line-height: 1.5;
    }

    .omet-intro b {
      color: var(--ink);
      font-weight: 800;
    }

    /* ====== FACULTY, large showcase cards (horizontal scroll on mobile) ====== */
    .faculty-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .fac {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      transition: .3s;
    }

    .fac:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .1);
    }

    .fac .ph {
      aspect-ratio: 1;
      background: var(--navy);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      color: #fff;
      font-weight: 900;
      font-size: 48px;
    }

    .fac .ph::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 14px, rgba(255, 255, 255, .07) 14px 28px);
    }

    .fac:nth-child(2) .ph {
      background: var(--blue);
    }

    .fac:nth-child(3) .ph {
      background: var(--green);
    }

    .fac:nth-child(4) .ph {
      background: var(--gold);
      color: #1a1a1a;
    }

    .fac .ph .ini {
      position: relative;
      z-index: 2;
      padding-bottom: 30px;
    }

    .fac .info {
      padding: 18px 20px;
    }

    .fac h5 {
      font-size: 15px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 3px;
    }

    .fac .role {
      font-size: 11px;
      color: var(--blue-d);
      font-weight: 700;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .fac .creds {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .fac .creds span {
      background: var(--blue-l);
      color: var(--blue-d);
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 9px;
      font-weight: 700;
    }

    /* ====== METRICS GRAPH ====== */
    .metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      text-align: center;
    }

    .metric {
      padding: 30px 20px;
      border-right: 1px solid rgba(255, 255, 255, .1);
    }

    .metric:last-child {
      border-right: 0;
    }

    .metric .n {
      font-size: 60px;
      font-weight: 900;
      color: var(--gold);
      font-family: var(--serif);
      line-height: 1;
      letter-spacing: -2px;
    }

    .metric .n .small {
      font-size: 32px;
    }

    .metric .l {
      font-size: 12px;
      color: rgba(255, 255, 255, .75);
      margin-top: 8px;
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
    }

    .metric .desc {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      margin-top: 6px;
    }

    /* ====== COHORT, student profiles strip ====== */
    .cohort-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .cohort-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px;
      position: relative;
    }

    .cohort-card .top {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
    }

    .cohort-card .av {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 18px;
      flex-shrink: 0;
    }

    .cohort-card:nth-child(2) .av {
      background: var(--green);
    }

    .cohort-card:nth-child(3) .av {
      background: var(--gold);
      color: #1a1a1a;
    }

    .cohort-card:nth-child(4) .av {
      background: var(--navy);
    }

    .cohort-card h5 {
      font-size: 14px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 2px;
    }

    .cohort-card .from {
      font-size: 11px;
      color: var(--muted);
    }

    .cohort-card .quote {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 14px;
      font-style: italic;
    }

    .cohort-card .target {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 14px;
      border-top: 1px dashed var(--border);
    }

    .cohort-card .target .lk {
      font-size: 10px;
      color: var(--soft);
      text-transform: uppercase;
      font-weight: 700;
    }

    .cohort-card .target .lv {
      font-size: 13px;
      color: var(--blue-d);
      font-weight: 800;
    }

    /* ====== STUDY CLUBS, colored pill grid ====== */
    .clubs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .club {
      padding: 24px 20px;
      border-radius: 14px;
      color: #fff;
      cursor: pointer;
      transition: .2s;
      position: relative;
      overflow: hidden;
    }

    .club:hover {
      transform: translateY(-4px);
    }

    .club:nth-child(4n+1) {
      background: var(--blue);
    }

    .club:nth-child(4n+2) {
      background: var(--green);
    }

    .club:nth-child(4n+3) {
      background: var(--gold);
      color: #1a1a1a;
    }

    .club:nth-child(4n+4) {
      background: var(--navy);
    }

    .club::before {
      content: "";
      position: absolute;
      bottom: -30px;
      right: -30px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
    }

    .club .ico {
      font-size: 28px;
      margin-bottom: 14px;
    }

    .club h5 {
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .club p {
      font-size: 11px;
      opacity: .85;
    }

    /* ====== LIFE AT, video tile gallery ====== */
    .life-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .life-tile {
      aspect-ratio: 4/3;
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      background: var(--navy);
    }

    .life-tile:nth-child(2) {
      background: var(--blue-d);
    }

    .life-tile:nth-child(3) {
      background: var(--ink);
    }

    .life-tile:nth-child(4) {
      background: var(--green-d);
    }

    .life-tile:nth-child(5) {
      background: var(--gold-d);
    }

    .life-tile:nth-child(6) {
      background: var(--navy-d);
    }

    .life-tile::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 14px, rgba(255, 255, 255, .06) 14px 28px);
    }

    .life-tile::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .3);
    }

    .life-tile .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      color: var(--navy);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      z-index: 2;
      transition: .2s;
    }

    .life-tile:hover .play-btn {
      transform: translate(-50%, -50%) scale(1.15);
      background: var(--gold);
    }

    .life-tile h4 {
      position: absolute;
      bottom: 18px;
      left: 18px;
      right: 18px;
      color: #fff;
      font-size: 18px;
      font-weight: 800;
      z-index: 2;
      letter-spacing: -.3px;
    }

    .life-tile .vid-mark {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(255, 255, 255, .15);
      backdrop-filter: blur(8px);
      color: #fff;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .life-tile .vid-mark .dot {
      width: 6px;
      height: 6px;
      background: var(--gold);
      border-radius: 50%;
      animation: pulse 1.6s infinite;
    }

    /* ====== PRESS / NEWS ====== */
    .press-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .press {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 22px;
      cursor: pointer;
      transition: .2s;
    }

    .press:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
      border-color: var(--blue);
    }

    .press .pub {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--blue-d);
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }

    .press h5 {
      font-size: 14px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.45;
      margin-bottom: 14px;
      min-height: 64px;
    }

    .press .date {
      font-size: 10px;
      color: var(--soft);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    /* ====== APPLICATION TIMELINE ====== */
    .appline {
      position: relative;
      padding: 0 0 20px 0;
    }

    .appline::before {
      content: "";
      position: absolute;
      left: 32px;
      top: 8px;
      bottom: 8px;
      width: 3px;
      background: var(--blue);
      border-radius: 2px;
    }

    .al-row {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      padding: 18px 0;
      position: relative;
    }

    .al-row .stage {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      border: 4px solid var(--blue);
      margin-left: 21px;
      flex-shrink: 0;
      margin-top: 6px;
      z-index: 2;
      box-shadow: 0 0 0 5px #fff;
    }

    .al-row.done .stage {
      background: var(--green);
      border-color: var(--green);
    }

    .al-row.now .stage {
      background: var(--gold);
      border-color: var(--gold);
      box-shadow: 0 0 0 5px #fff, 0 0 0 9px rgba(245, 166, 35, .25);
      animation: pulse 2s infinite;
    }

    .al-row .body {
      flex: 1;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 22px;
    }

    .al-row.now .body {
      border-color: var(--gold);
      background: var(--gold-l);
    }

    .al-row .body .label {
      font-size: 14px;
      font-weight: 800;
      color: var(--dark);
    }

    .al-row .body .desc {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }

    .al-row .body .date {
      font-size: 12px;
      color: var(--blue-d);
      font-weight: 800;
      margin-top: 6px;
    }

    .al-row.now .body .date {
      color: var(--gold-d);
    }

    .al-row.done .body .date {
      color: var(--green-d);
    }

    /* ====== COURSES ====== */
    .cv-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    .cv-tabs .tab {
      padding: 9px 18px;
      border-radius: 24px;
      background: #fff;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      cursor: pointer;
      border: 1.5px solid var(--border);
    }

    .cv-tabs .tab.act {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    .cv-tabs .tab:hover {
      border-color: var(--blue);
    }

    .c-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .c-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      transition: .2s;
      display: flex;
      flex-direction: column;
    }

    .c-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, .1);
    }

    .c-card .thumb {
      aspect-ratio: 16/9;
      background: var(--blue);
      position: relative;
      display: flex;
      align-items: flex-end;
      padding: 16px;
      color: #fff;
    }

    .c-card.rec .thumb {
      background: var(--navy);
    }

    .c-card .thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 12px, rgba(255, 255, 255, .08) 12px 24px);
    }

    .c-card .thumb .badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--gold);
      color: #1a1a1a;
      padding: 5px 11px;
      border-radius: 5px;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      z-index: 2;
    }

    .c-card .thumb .label {
      position: relative;
      z-index: 2;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      opacity: .95;
    }

    .c-card .body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .c-card .body h4 {
      font-size: 16px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 6px;
    }

    .c-card .body .desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      margin-bottom: 14px;
      flex: 1;
    }

    .c-card .body .feats {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 14px;
    }

    .c-card .body .feats div {
      font-size: 11px;
      color: var(--muted);
    }

    .c-card .body .feats div::before {
      content: "\2713 ";
      color: var(--green);
      font-weight: 800;
    }

    .c-card .body .price {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 14px;
      padding-top: 14px;
      border-top: 1px dashed var(--border);
    }

    .c-card .body .price .now {
      font-size: 24px;
      font-weight: 900;
      color: var(--dark);
    }

    .c-card .body .price .mrp {
      font-size: 13px;
      color: var(--muted);
      text-decoration: line-through;
    }

    .c-card .body .price .off {
      background: var(--green-l);
      color: var(--green-d);
      font-size: 10px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 10px;
      margin-left: auto;
    }

    .c-card .body .ctas {
      display: flex;
      gap: 6px;
    }

    .c-card .body .ctas .b {
      flex: 1;
      padding: 11px;
      text-align: center;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .3px;
      cursor: pointer;
    }

    .c-card .body .ctas .b.buy {
      background: var(--blue);
      color: #fff;
    }

    .c-card .body .ctas .b.buy:hover {
      background: var(--blue-d);
    }

    .c-card .body .ctas .b.cart {
      background: #fff;
      color: var(--blue-d);
      border: 1.5px solid var(--blue);
    }

    /* ====== FEES & FINANCING ====== */
    .fees {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 30px;
      align-items: start;
    }

    .fee-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
    }

    .fee-card h3 {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 6px;
      color: var(--dark);
    }

    .fee-card .total {
      font-size: 48px;
      font-weight: 900;
      color: var(--blue-d);
      letter-spacing: -1.5px;
      margin: 14px 0 4px;
    }

    .fee-card .total .mrp {
      font-size: 18px;
      color: var(--muted);
      text-decoration: line-through;
      font-weight: 700;
      margin-left: 8px;
    }

    .fee-card .saving {
      display: inline-block;
      background: var(--green-l);
      color: var(--green-d);
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 24px;
    }

    .fee-row {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px dashed var(--border);
      font-size: 13px;
    }

    .fee-row:last-child {
      border: 0;
    }

    .fee-row .k {
      color: var(--muted);
    }

    .fee-row .v {
      color: var(--dark);
      font-weight: 700;
    }

    .fee-card .cta {
      display: block;
      background: var(--blue);
      color: #fff;
      text-align: center;
      padding: 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 800;
      margin-top: 18px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .fee-card .cta:hover {
      background: var(--blue-d);
    }

    .fin {
      background: var(--navy);
      color: #fff;
      border-radius: 16px;
      padding: 32px;
    }

    .fin h3 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 18px;
      color: var(--gold);
    }

    .fin .opt {
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .fin .opt:last-child {
      border: 0;
    }

    .fin .opt h5 {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .fin .opt p {
      font-size: 11px;
      opacity: .7;
    }

    /* ====== OUTCOMES (alumni placements) ====== */
    .outcomes-row {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      padding-bottom: 10px;
    }

    .outcome {
      flex: 0 0 280px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px;
      cursor: pointer;
      transition: .2s;
    }

    .outcome:hover {
      transform: translateY(-4px);
      border-color: var(--blue);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    }

    .outcome .ph {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 20px;
      margin-bottom: 14px;
    }

    .outcome:nth-child(2) .ph {
      background: var(--green);
    }

    .outcome:nth-child(3) .ph {
      background: var(--gold);
      color: #1a1a1a;
    }

    .outcome:nth-child(4) .ph {
      background: var(--navy);
    }

    .outcome:nth-child(5) .ph {
      background: var(--blue-d);
    }

    .outcome:nth-child(6) .ph {
      background: var(--green-d);
    }

    .outcome h5 {
      font-size: 15px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 3px;
    }

    .outcome .pct {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .outcome .school {
      display: inline-block;
      background: var(--ink);
      color: #fff;
      padding: 4px 11px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .3px;
      margin-bottom: 10px;
    }

    .outcome .quote {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      font-style: italic;
      border-top: 1px dashed var(--border);
      padding-top: 12px;
      margin-top: 10px;
    }

    /* ====== NEWS / INSIGHTS row ====== */
    .insight-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .insight {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      transition: .2s;
    }

    .insight:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
    }

    .insight .thumb {
      aspect-ratio: 16/9;
      background: var(--blue);
      position: relative;
      display: flex;
      align-items: flex-end;
      padding: 14px;
      color: #fff;
    }

    .insight:nth-child(2) .thumb {
      background: var(--green);
    }

    .insight:nth-child(3) .thumb {
      background: var(--gold);
    }

    .insight .thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 12px, rgba(255, 255, 255, .07) 12px 24px);
    }

    .insight .thumb .cat {
      position: relative;
      z-index: 2;
      background: rgba(0, 0, 0, .4);
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .insight .body {
      padding: 20px;
    }

    .insight h5 {
      font-size: 16px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 8px;
      line-height: 1.35;
    }

    .insight p {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 12px;
    }

    .insight .meta {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--soft);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
    }

    /* ====== FAQ ====== */
    .faqs {
      max-width: 840px;
      margin: 0 auto;
    }

    .faq {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .faq summary {
      padding: 20px 24px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      color: var(--dark);
    }

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

    .faq summary::after {
      content: "+";
      font-size: 24px;
      font-weight: 300;
      color: var(--muted);
      transition: .2s;
    }

    .faq[open] summary::after {
      transform: rotate(45deg);
      color: var(--blue);
    }

    .faq[open] summary {
      color: var(--blue-d);
      background: var(--blue-l);
    }

    .faq .body {
      padding: 0 24px 18px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.7;
    }

    /* ====== LEAD CAPTURE ====== */
    .lead {
      background: var(--navy);
      color: #fff;
      border-radius: 18px;
      padding: 60px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .lead::before {
      content: "";
      position: absolute;
      top: -120px;
      left: -120px;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: var(--blue);
      opacity: .2;
      filter: blur(50px);
    }

    .lead::after {
      content: "";
      position: absolute;
      bottom: -120px;
      right: -120px;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: var(--gold);
      opacity: .15;
      filter: blur(50px);
    }

    .lead h2 {
      font-size: 42px;
      font-weight: 900;
      letter-spacing: -1.2px;
      margin-bottom: 12px;
      position: relative;
      z-index: 2;
      color: #fff;
    }

    .lead h2 .yellow {
      color: var(--gold);
    }

    .lead p {
      font-size: 15px;
      opacity: .85;
      max-width: 600px;
      margin: 0 auto 32px;
      position: relative;
      z-index: 2;
    }

    .lead .form {
      display: flex;
      gap: 8px;
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      flex-wrap: wrap;
    }

    .lead .form input {
      flex: 1;
      min-width: 220px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .2);
      color: #fff;
      padding: 15px 20px;
      border-radius: 6px;
      font-size: 13px;
      outline: none;
    }

    .lead .form input::placeholder {
      color: rgba(255, 255, 255, .4);
    }

    .lead .form input:focus {
      border-color: var(--gold);
      background: rgba(255, 255, 255, .12);
    }

    .lead .form button {
      background: var(--gold);
      color: #1a1a1a;
      border: 0;
      padding: 15px 30px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      cursor: pointer;
    }

    .lead .form button:hover {
      background: var(--gold-d);
    }

    /* ====== FOOTER ====== */
    .foot {
      background: #1a1a1a;
      color: #666;
      padding: 50px 22px 22px;
      font-size: 12px;
      border-top: 2px solid var(--gold);
    }

    .foot-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
      gap: 30px;
    }

    .foot h6 {
      color: #fff;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
      font-weight: 700;
    }

    .foot a {
      display: block;
      padding: 5px 0;
      color: #666;
      font-size: 12px;
    }

    .foot a:hover {
      color: var(--gold);
    }

    .foot .logo-img {
      height: 38px;
      margin-bottom: 18px;
    }

    .foot .copy {
      max-width: 1200px;
      margin: 30px auto 0;
      padding-top: 22px;
      border-top: 1px solid #1a1a1a;
      font-size: 11px;
      color: #666;
      text-align: center;
    }


    /* ====== STACKED PERSONA CARDS (sticky-scroll feel) ====== */
    .stack-row {
      display: flex;
      gap: 0;
      perspective: 1200px;
    }

    .stack-card {
      flex: 1;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 32px 28px;
      position: relative;
      overflow: hidden;
      transition: transform .4s ease, box-shadow .4s ease, z-index 0s .2s;
      margin-left: -30px;
      cursor: pointer;
    }

    .stack-card:first-child {
      margin-left: 0;
    }

    .stack-card:nth-child(1) {
      background: #fff;
      z-index: 1;
      transform: rotate(-2deg) translateY(8px);
    }

    .stack-card:nth-child(2) {
      background: var(--blue-l);
      z-index: 2;
      transform: rotate(0deg);
    }

    .stack-card:nth-child(3) {
      background: #fff;
      z-index: 1;
      transform: rotate(2deg) translateY(8px);
    }

    .stack-card:hover {
      transform: translateY(-12px) rotate(0deg) scale(1.02);
      z-index: 10;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
    }

    .stack-card .num {
      position: absolute;
      top: 18px;
      right: 24px;
      font-size: 64px;
      font-weight: 900;
      color: rgba(0, 0, 0, .05);
      line-height: 1;
    }

    .stack-card .ico {
      width: 54px;
      height: 54px;
      background: var(--navy);
      color: #fff;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 20px;
    }

    .stack-card:nth-child(2) .ico {
      background: var(--blue-d);
    }

    .stack-card h4 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 12px;
      color: var(--dark);
    }

    .stack-card p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 18px;
    }

    .stack-card .tag {
      display: inline-block;
      background: var(--gold);
      color: #1a1a1a;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    /* ====== IMAGE STACK / PARALLAX TILE GRID ====== */
    .image-stack {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
      align-items: center;
    }

    .is-text h2 {
      margin-bottom: 14px;
    }

    .is-text p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .is-text .stat-row {
      display: flex;
      gap: 24px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
    }

    .is-text .stat-row .s .n {
      font-size: 32px;
      font-weight: 900;
      color: var(--blue-d);
      font-family: var(--serif);
      line-height: 1;
    }

    .is-text .stat-row .s .l {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: .5px;
      margin-top: 4px;
    }

    .is-collage {
      position: relative;
      height: 440px;
    }

    .is-tile {
      position: absolute;
      border-radius: 14px;
      overflow: hidden;
      background: var(--navy);
      color: #fff;
      padding: 18px;
      display: flex;
      align-items: flex-end;
      font-weight: 800;
      font-size: 13px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
      transition: transform .4s ease;
    }

    .is-tile::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 14px, rgba(255, 255, 255, .08) 14px 28px);
    }

    .is-tile span {
      position: relative;
      z-index: 2;
    }

    .is-tile.t1 {
      width: 62%;
      height: 62%;
      top: 0;
      left: 0;
      background: var(--blue-d);
      transform: rotate(-2deg);
    }

    .is-tile.t2 {
      width: 48%;
      height: 55%;
      top: 14%;
      right: 0;
      background: var(--navy);
      transform: rotate(3deg);
    }

    .is-tile.t3 {
      width: 54%;
      height: 48%;
      bottom: 0;
      left: 8%;
      background: var(--gold);
      color: #1a1a1a;
      transform: rotate(-1deg);
    }

    .is-tile.t4 {
      width: 36%;
      height: 38%;
      bottom: 6%;
      right: 6%;
      background: var(--green-d);
      transform: rotate(2deg);
    }

    .is-tile:hover {
      transform: rotate(0deg) scale(1.05);
      z-index: 10;
    }

    /* ====== VIDEO CAPSULES (horizontal scroll-snap row) ====== */
    .capsule-wrap {
      margin: 0 -22px;
      padding: 0 22px;
    }

    .capsules {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 24px;
      scroll-padding: 22px;
    }

    .capsules::-webkit-scrollbar {
      height: 8px;
    }

    .capsules::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, .05);
      border-radius: 4px;
    }

    .capsules::-webkit-scrollbar-thumb {
      background: var(--gold);
      border-radius: 4px;
    }

    .capsule {
      flex: 0 0 320px;
      aspect-ratio: 9/16;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      scroll-snap-align: start;
      cursor: pointer;
      background: var(--navy);
      transition: transform .3s ease;
    }

    .capsule:nth-child(2) {
      background: var(--blue-d);
    }

    .capsule:nth-child(3) {
      background: var(--ink);
    }

    .capsule:nth-child(4) {
      background: var(--green-d);
    }

    .capsule:nth-child(5) {
      background: var(--gold-d);
    }

    .capsule:nth-child(6) {
      background: var(--navy-d);
    }

    .capsule:nth-child(7) {
      background: var(--blue);
    }

    .capsule::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 14px, rgba(255, 255, 255, .07) 14px 28px);
    }

    .capsule::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0, 0, 0, .85) 100%);
    }

    .capsule:hover {
      transform: scale(1.03);
    }

    .capsule .vid-mark {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(255, 255, 255, .15);
      backdrop-filter: blur(8px);
      color: #fff;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .capsule .vid-mark .dot {
      width: 6px;
      height: 6px;
      background: var(--gold);
      border-radius: 50%;
      animation: pulse 1.6s infinite;
    }

    .capsule .duration {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(0, 0, 0, .5);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      z-index: 3;
    }

    .capsule .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: var(--navy);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      z-index: 3;
      transition: .2s;
    }

    .capsule:hover .play-btn {
      background: var(--gold);
      transform: translate(-50%, -50%) scale(1.1);
    }

    .capsule .meta {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 18px 20px;
      color: #fff;
      z-index: 3;
    }

    .capsule .meta .tag {
      display: inline-block;
      background: var(--gold);
      color: #1a1a1a;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 8px;
    }

    .capsule .meta h4 {
      font-size: 17px;
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 6px;
    }

    .capsule .meta .author {
      font-size: 11px;
      opacity: .85;
    }

    .capsule-controls {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 14px;
    }

    .capsule-controls button {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2);
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }

    .capsule-controls button:hover {
      background: rgba(255, 255, 255, .2);
    }

    /* ====== TESTIMONIAL MARQUEE ROWS ====== */
    .testi-section {
      padding: 60px 0;
      background: var(--bg);
      overflow: hidden;
    }

    .testi-row {
      display: flex;
      gap: 14px;
      animation: scrollx 60s linear infinite;
      width: max-content;
      margin-bottom: 14px;
    }

    .testi-row.r2 {
      animation-direction: reverse;
      animation-duration: 50s;
    }

    .testi-card {
      flex: 0 0 380px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px;
    }

    .testi-card .top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .testi-card .av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 16px;
    }

    .testi-card:nth-child(3n+2) .av {
      background: var(--green);
    }

    .testi-card:nth-child(3n+3) .av {
      background: var(--gold);
      color: #1a1a1a;
    }

    .testi-card .name {
      font-size: 13px;
      font-weight: 800;
      color: var(--dark);
    }

    .testi-card .role {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .3px;
      font-weight: 700;
    }

    .testi-card .quote {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
      font-style: italic;
    }

    .testi-card .stars {
      color: var(--gold);
      font-size: 12px;
      margin-bottom: 6px;
    }

    /* Mobile */
    @media(max-width:900px) {
      .hero h1 {
        font-size: 52px;
        letter-spacing: -1.5px;
      }

      .hero h1 .lite {
        font-size: 38px;
      }

      .hero .sub {
        font-size: 15px;
      }

      .hero-bg {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
      }

      .crafted,
      .faculty-row,
      .cohort-grid,
      .clubs-grid,
      .life-grid,
      .press-row,
      .insight-grid,
      .metrics {
        grid-template-columns: repeat(2, 1fr);
      }

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

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

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

      .foot-inner {
        grid-template-columns: 1fr 1fr;
      }

      .sec h2 {
        font-size: 32px;
      }

      .sec {
        padding: 50px 22px;
      }

      .tn .links {
        display: none;
      }

      .metric {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
      }
    }

    @media(max-width:600px) {

      /* Stack blueprint cards 1-per-row at narrow mobile (text was getting too cramped at 2-col) */
      .blueprint {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
      }

      .bp-card {
        padding: 24px 20px !important;
      }

      /* Stack other 2-col grids 1-per-row too */
      .crafted,
      .faculty-row,
      .clubs-grid,
      .life-grid,
      .press-row,
      .insight-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
    }

    /* ====== NMAT COLLEGES with CUTOFFS TABLE ====== */
    .colleges-wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .coll-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px;
      transition: .2s;
      cursor: pointer;
      border-left: 4px solid var(--blue);
    }

    .coll-card:nth-child(3n+2) {
      border-left-color: var(--green);
    }

    .coll-card:nth-child(3n+3) {
      border-left-color: var(--gold);
    }

    .coll-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 32px rgba(0, 0, 0, .08);
    }

    .coll-card .coll-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .coll-card h5 {
      font-size: 15px;
      font-weight: 800;
      color: var(--dark);
      line-height: 1.3;
    }

    .coll-card .city {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      margin-top: 4px;
    }

    .coll-card .rank {
      background: var(--navy);
      color: #fff;
      padding: 3px 9px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .3px;
      flex-shrink: 0;
    }

    .coll-card .cutoff-row {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px dashed var(--border);
      font-size: 12px;
    }

    .coll-card .cutoff-row:last-of-type {
      border: 0;
      margin-bottom: 8px;
    }

    .coll-card .cutoff-row .k {
      color: var(--muted);
    }

    .coll-card .cutoff-row .v {
      font-weight: 800;
      color: var(--dark);
      font-family: var(--serif);
    }

    .coll-card .cutoff-row .v.hi {
      color: var(--blue-d);
    }

    .coll-card .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      margin-top: 8px;
    }

    .coll-card .footer .fee {
      font-size: 11px;
      color: var(--muted);
    }

    .coll-card .footer .fee b {
      color: var(--dark);
      font-size: 13px;
    }

    .coll-card .footer .cta {
      font-size: 10px;
      font-weight: 800;
      color: var(--blue-d);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    /* ====== COMPOSITE SCORE BREAKDOWN ====== */
    .composite {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 24px;
      align-items: center;
      margin-top: 30px;
    }

    .composite .donut {
      position: relative;
      width: 280px;
      height: 280px;
      margin: 0 auto;
    }

    .composite .donut svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .composite .donut circle {
      fill: none;
      stroke-width: 28;
    }

    .composite .donut .center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .composite .donut .center .big {
      font-size: 36px;
      font-weight: 900;
      color: var(--dark);
      line-height: 1;
    }

    .composite .donut .center .lbl {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-top: 4px;
      font-weight: 700;
    }

    .composite .breakdown {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .composite .comp-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    .composite .comp-row .swatch {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      flex-shrink: 0;
    }

    .composite .comp-row h6 {
      font-size: 13px;
      font-weight: 800;
      color: var(--dark);
      flex: 1;
    }

    .composite .comp-row .pct {
      font-size: 18px;
      font-weight: 900;
      color: var(--dark);
      font-family: var(--serif);
    }

    .composite .comp-row .pct .lbl {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      margin-left: 3px;
    }

    /* ====== EXAM PATTERN, 3 sections with real marks ====== */
    .pattern-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .pat-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
      position: relative;
      overflow: hidden;
      transition: .2s;
    }

    .pat-card:nth-child(1) {
      border-top: 4px solid var(--blue);
    }

    .pat-card:nth-child(2) {
      border-top: 4px solid var(--green);
    }

    .pat-card:nth-child(3) {
      border-top: 4px solid var(--gold);
    }

    .pat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 32px rgba(0, 0, 0, .08);
    }

    .pat-card .top-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .pat-card .num {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 14px;
    }

    .pat-card:nth-child(2) .num {
      background: var(--green);
    }

    .pat-card:nth-child(3) .num {
      background: var(--gold);
      color: #1a1a1a;
    }

    .pat-card .cutoff-tag {
      background: var(--navy);
      color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
    }

    .pat-card h4 {
      font-size: 17px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 4px;
    }

    .pat-card .sub {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 16px;
    }

    .pat-card .stats-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 16px;
      padding: 14px;
      background: var(--bg);
      border-radius: 8px;
    }

    .pat-card .stats-3 .s {
      text-align: center;
    }

    .pat-card .stats-3 .s .n {
      font-size: 22px;
      font-weight: 900;
      color: var(--dark);
      font-family: var(--serif);
      line-height: 1;
    }

    .pat-card .stats-3 .s .l {
      font-size: 9px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      margin-top: 4px;
    }

    .pat-card .topics {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.7;
    }

    .pat-card .topics b {
      color: var(--dark);
      font-weight: 700;
    }

    .pattern-footer {
      display: flex;
      justify-content: space-around;
      gap: 14px;
      background: var(--navy);
      color: #fff;
      border-radius: 14px;
      padding: 22px;
      flex-wrap: wrap;
    }

    .pattern-footer .item {
      text-align: center;
      flex: 1;
      min-width: 120px;
    }

    .pattern-footer .item .big {
      font-size: 28px;
      font-weight: 900;
      color: var(--gold);
      font-family: var(--serif);
      line-height: 1;
    }

    .pattern-footer .item .lbl {
      font-size: 10px;
      text-transform: uppercase;
      opacity: .75;
      letter-spacing: .5px;
      font-weight: 700;
      margin-top: 6px;
    }




    /* ====== Why CATKing · Pinned Feature Stack (5 reasons) ====== */
    .pin-wrap {
      position: relative;
    }

    .pin-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 40px;
      margin-bottom: 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
      position: sticky;
      top: 120px;
    }

    .pin-card.dk {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .pin-card.br {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .pin-card .count {
      position: absolute;
      top: 22px;
      right: 26px;
      font-size: 13px;
      font-weight: 900;
      color: rgba(0, 0, 0, .2);
      letter-spacing: 1.5px;
      font-family: var(--serif);
    }

    .pin-card.dk .count,
    .pin-card.br .count {
      color: rgba(255, 255, 255, .25);
    }

    .pin-card .ct-left .tag {
      display: inline-block;
      background: var(--orange-l);
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--orange-d);
      margin-bottom: 14px;
    }

    .pin-card.dk .ct-left .tag,
    .pin-card.br .ct-left .tag {
      background: rgba(255, 255, 255, .12);
      color: var(--gold);
    }

    .pin-card .ct-left h3 {
      font-size: 30px;
      font-weight: 900;
      letter-spacing: -.8px;
      line-height: 1.15;
      margin-bottom: 14px;
    }

    .pin-card .ct-left h3 .acc {
      color: var(--orange);
    }

    .pin-card.dk .ct-left h3 .acc,
    .pin-card.br .ct-left h3 .acc {
      color: var(--gold);
    }

    .pin-card .ct-left p {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 18px;
      color: #444;
    }

    .pin-card.dk .ct-left p,
    .pin-card.br .ct-left p {
      color: rgba(255, 255, 255, .8);
    }

    .pin-card .ct-left ul {
      list-style: none;
      margin-bottom: 22px;
    }

    .pin-card .ct-left ul li {
      padding: 6px 0 6px 24px;
      font-size: 13px;
      position: relative;
      line-height: 1.5;
    }

    .pin-card .ct-left ul li::before {
      content: "\2713";
      position: absolute;
      left: 0;
      color: var(--green);
      font-weight: 900;
    }

    .pin-card.dk .ct-left ul li::before,
    .pin-card.br .ct-left ul li::before {
      color: var(--gold);
    }

    .pin-card .ct-ctas {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .btn-p {
      background: var(--orange);
      color: var(--ink);
      padding: 12px 22px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: .15s;
      border: 0;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(254, 168, 47, .28);
    }

    .btn-p:hover {
      background: var(--orange-d);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(254, 168, 47, .4);
    }

    .btn-o {
      background: transparent;
      color: var(--ink);
      padding: 12px 22px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1.5px solid var(--ink);
      transition: .15s;
      cursor: pointer;
    }

    .btn-o:hover {
      background: var(--ink);
      color: #fff;
    }

    .pin-card .md {
      aspect-ratio: 16/10;
      border-radius: 10px;
      background: #1a1a2e;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .pin-card .md .lite-yt {
      aspect-ratio: auto !important;
      width: 100%;
      height: 100%;
    }

    .pin-card.dk .md,
    .pin-card.br .md {
      background: repeating-linear-gradient(45deg, #1a1a1a 0 12px, #1a1a1a 12px 24px);
    }

    .pin-card .md .play {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .95);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: var(--dark);
    }

    .pin-card .md .cap {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      background: rgba(0, 0, 0, .6);
      color: #fff;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

    @media(max-width:900px) {
      .pin-card {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 24px;
        position: static;
      }

      .pin-card .ct-left h3 {
        font-size: 24px;
      }
    }

    /* ====== Overview split ====== */
    .ov-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 40px;
      align-items: start;
    }

    .ov-txt p {
      font-size: 15px;
      line-height: 1.8;
      color: #444;
      margin-bottom: 14px;
    }

    .ov-txt .hi {
      background: linear-gradient(120deg, transparent 0%, #fdf3e0 0%, #fdf3e0 100%, transparent 100%);
      padding: 1px 3px;
      font-weight: 700;
      color: var(--dark);
    }

    .ov-facts {
      background: var(--bg);
      border-radius: 12px;
      padding: 28px;
      border-left: 4px solid var(--blue);
    }

    .ov-facts h4 {
      font-size: 11px;
      color: var(--blue-d);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .ov-facts .row {
      display: flex;
      justify-content: space-between;
      padding: 11px 0;
      border-bottom: 1px dashed #e0e0e0;
      font-size: 13px;
      gap: 12px;
    }

    .ov-facts .row:last-child {
      border: 0;
    }

    .ov-facts .row .k {
      color: var(--muted);
      flex-shrink: 0;
    }

    .ov-facts .row .v {
      font-weight: 800;
      color: var(--dark);
      text-align: right;
    }

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

    /* ====== IIM Selection Weightage Donut ====== */
    .donut-block {
      margin-top: 40px;
      background: var(--bg);
      border-radius: 14px;
      padding: 40px;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 40px;
      align-items: center;
    }

    .donut-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .donut-svg {
      width: 240px;
      height: 240px;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .06));
    }

    .donut-legend h4 {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.4px;
      margin-bottom: 10px;
      color: var(--dark);
    }

    .donut-legend .donut-lede {
      font-size: 14px;
      color: #666;
      line-height: 1.65;
      margin-bottom: 18px;
    }

    .donut-rows {
      margin-bottom: 16px;
    }

    .donut-rows .dr {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px dashed #e0e0e0;
      font-size: 13px;
    }

    .donut-rows .dr:last-child {
      border: 0;
    }

    .donut-rows .sw {
      width: 14px;
      height: 14px;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .donut-rows .lb {
      flex: 1;
      color: #444;
      font-weight: 600;
    }

    .donut-rows .vl {
      font-weight: 900;
      color: var(--dark);
      font-family: var(--serif);
    }

    .donut-note {
      font-size: 12px;
      color: #666;
      line-height: 1.6;
      background: #fff;
      padding: 12px 14px;
      border-radius: 8px;
      border-left: 3px solid var(--blue);
    }

    @media(max-width:900px) {
      .donut-block {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 24px;
      }
    }

    /* ====== Pattern Footer Strip ====== */
    .pattern-footer {
      background: var(--ink);
      color: #fff;
      padding: 22px 28px;
      border-radius: 12px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-top: 22px;
    }

    .pf-cell {
      padding: 4px 12px;
      border-right: 1px solid rgba(255, 255, 255, .1);
    }

    .pf-cell:last-child {
      border: 0;
    }

    .pf-cell .pl {
      font-size: 10px;
      color: rgba(255, 255, 255, .6);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .pf-cell .pv {
      font-size: 18px;
      font-weight: 900;
      color: var(--gold);
      font-family: var(--serif);
    }

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

      .pf-cell {
        border: 0;
      }
    }

    /* ====== Cohort Profile Cards ====== */
    .cohort-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .co-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px;
      transition: .2s;
    }

    .co-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 32px rgba(0, 0, 0, .08);
    }

    .co-head {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }

    .co-av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1a1a1a 0%, #4a8fd9 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 17px;
      flex-shrink: 0;
    }

    .co-head h5 {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.2px;
      margin-bottom: 3px;
    }

    .co-bg {
      font-size: 11px;
      color: var(--blue-d);
      font-weight: 700;
    }

    .co-q {
      font-size: 13px;
      color: #444;
      font-style: italic;
      line-height: 1.6;
      margin-bottom: 12px;
    }

    .co-target {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      padding-top: 10px;
      border-top: 1px dashed var(--border);
    }

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

    @media(max-width:600px) {
      .cohort-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ====== Testimonial dual-row marquee ====== */
    .testi-section {
      padding: 40px 0;
      background: var(--ink);
      color: #fff;
      overflow: hidden;
      margin-top: 20px;
      border-radius: 0;
    }

    .testi-rows-wrap {
      position: relative;
      overflow: hidden;
      max-width: 1400px;
      margin: 0 auto;
    }

    .testi-rows-wrap::before,
    .testi-rows-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }

    .testi-rows-wrap::before {
      left: 0;
      background: linear-gradient(90deg, var(--ink) 0%, transparent 100%);
    }

    .testi-rows-wrap::after {
      right: 0;
      background: linear-gradient(270deg, var(--ink) 0%, transparent 100%);
    }

    .testi-row {
      overflow: hidden;
      margin-bottom: 14px;
    }

    .testi-row:last-child {
      margin-bottom: 0;
    }

    .testi-track {
      display: flex;
      gap: 14px;
      animation: t-scroll 60s linear infinite;
      width: max-content;
    }

    .testi-track.rev {
      animation-direction: reverse;
      animation-duration: 75s;
    }

    @keyframes t-scroll {
      from {
        transform: translateX(0);
      }

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

    .tc {
      flex: 0 0 320px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 18px;
      backdrop-filter: blur(10px);
    }

    .tc .stars {
      color: var(--gold);
      font-size: 13px;
      margin-bottom: 8px;
      letter-spacing: 1px;
    }

    .tc p {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .88);
      margin-bottom: 12px;
      font-style: italic;
    }

    .tc .who {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .tc .who .av {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--gold);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 14px;
      flex-shrink: 0;
    }

    .tc .who b {
      font-size: 12px;
      display: block;
      color: #fff;
    }

    .tc .who span {
      font-size: 10px;
      color: rgba(255, 255, 255, .65);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 600;
    }

    /* ====== Video Capsule Rail ====== */
    .cap-ctrl {
      display: flex;
      gap: 8px;
    }

    .cap-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #fff;
      border: 1.5px solid var(--border);
      color: var(--dark);
      font-size: 22px;
      font-weight: 300;
      cursor: pointer;
      transition: .15s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding-bottom: 3px;
    }

    .cap-btn:hover {
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
      transform: scale(1.05);
    }

    .cap-rail {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 8px 4px 20px;
      scrollbar-width: thin;
    }

    .cap-rail::-webkit-scrollbar {
      height: 6px;
    }

    .cap-rail::-webkit-scrollbar-track {
      background: var(--bg);
      border-radius: 3px;
    }

    .cap-rail::-webkit-scrollbar-thumb {
      background: #e0e0e0;
      border-radius: 3px;
    }

    .cap {
      flex: 0 0 200px;
      aspect-ratio: 9/16;
      background: linear-gradient(140deg, var(--navy) 0%, #1a1a1a 100%);
      border-radius: 14px;
      scroll-snap-align: start;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: .2s;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    }

    .cap:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    }

    .cap::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 12px, rgba(255, 255, 255, .04) 12px 24px);
    }

    .cap:nth-child(2n) {
      background: linear-gradient(140deg, #1a1a1a 0%, var(--blue-d) 100%);
    }

    .cap:nth-child(3n) {
      background: linear-gradient(140deg, #1a1a1a 0%, var(--green) 100%);
    }

    .cap:nth-child(4n) {
      background: linear-gradient(140deg, var(--navy-d) 0%, var(--gold) 100%);
    }

    .cap-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(4px);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .6px;
      text-transform: uppercase;
      z-index: 2;
    }

    .cap-dur {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(4px);
      color: #fff;
      padding: 4px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      z-index: 2;
    }

    .cap-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      z-index: 2;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
      transition: .2s;
    }

    .cap:hover .cap-play {
      transform: translate(-50%, -50%) scale(1.08);
    }

    .cap-foot {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .65) 50%, rgba(0, 0, 0, .85) 100%);
      padding: 30px 12px 12px;
      z-index: 2;
    }

    .cap-foot .cap-nm {
      color: #fff;
      font-weight: 900;
      font-size: 12px;
      line-height: 1.2;
    }

    .cap-foot .cap-adm {
      color: rgba(255, 255, 255, .75);
      font-size: 10px;
      margin-top: 3px;
      font-weight: 600;
    }

    /* ====== Faculty Founder Split ====== */
    .founder-split {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 40px;
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 40px;
      align-items: center;
    }

    .fs-media {
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, #1a1a1a 0%, #4a8fd9 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .fs-media::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 14px, rgba(255, 255, 255, .06) 14px 28px);
    }

    .fs-play {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .95);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: var(--dark);
      z-index: 2;
    }

    .fs-cap {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      background: rgba(0, 0, 0, .6);
      color: #fff;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      z-index: 2;
    }

    .fs-text .fs-tag {
      display: inline-block;
      background: var(--gold-l);
      color: var(--gold-d);
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .fs-text h3 {
      font-size: 30px;
      font-weight: 900;
      letter-spacing: -.6px;
      line-height: 1.15;
      margin-bottom: 14px;
      color: var(--dark);
    }

    .fs-text h3 .accent {
      color: var(--blue);
    }

    .fs-text p {
      font-size: 14px;
      line-height: 1.7;
      color: #444;
      margin-bottom: 20px;
    }

    .fs-stats {
      display: flex;
      gap: 28px;
      padding: 16px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-bottom: 20px;
    }

    .fss b {
      display: block;
      font-size: 24px;
      font-weight: 900;
      color: var(--blue-d);
      font-family: var(--serif);
      line-height: 1;
    }

    .fss span {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      margin-top: 4px;
      display: block;
    }

    .fs-ctas {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    @media(max-width:900px) {
      .founder-split {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 24px;
      }

      .fs-text h3 {
        font-size: 24px;
      }
    }

    /* ====== News / Insights Cards ====== */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .news-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: .2s;
      cursor: pointer;
    }

    .news-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    }

    .nc-thumb {
      aspect-ratio: 16/9;
      background: linear-gradient(135deg, #f0f0ed 0%, #e0e0e0 100%);
      position: relative;
      display: flex;
      align-items: flex-start;
      padding: 14px;
    }

    .nc-tag {
      background: var(--blue);
      color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .4px;
      text-transform: uppercase;
    }

    .nc-body {
      padding: 18px;
    }

    .nc-body h5 {
      font-size: 15px;
      font-weight: 900;
      line-height: 1.3;
      margin-bottom: 8px;
      color: var(--dark);
    }

    .nc-exc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      margin-bottom: 10px;
    }

    .nc-meta {
      font-size: 10px;
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      padding-top: 10px;
      border-top: 1px dashed var(--border);
    }

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

    /* ====== Final Counsellor CTA ====== */
    .counsellor-sec {
      background: var(--navy);
      color: #fff;
      position: relative;
      overflow: hidden;
      max-width: none !important;
      padding: 0 !important;
    }

    .counsellor-sec::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 22px, rgba(255, 255, 255, .04) 22px 44px);
      pointer-events: none;
    }

    .counsellor-card {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 22px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 50px;
      align-items: center;
      z-index: 1;
    }

    .counsellor-card .ccl-left .eyebrow {
      display: inline-block;
      background: var(--gold);
      color: var(--ink);
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 14px;
    }

    .counsellor-card .ccl-left h2 {
      font-size: 38px;
      font-weight: 900;
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin-bottom: 12px;
      color: #fff;
    }

    .counsellor-card .ccl-left h2 .accent {
      color: var(--gold);
    }

    .counsellor-card .ccl-left p {
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255, 255, 255, .85);
      margin-bottom: 22px;
      max-width: 520px;
    }

    .counsellor-card .ccl-ctas {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .counsellor-card .ccl-ctas .btn {
      padding: 14px 26px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .3px;
      cursor: pointer;
      transition: all .15s;
      border: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .counsellor-card .ccl-ctas .btn.p {
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 4px 14px rgba(245, 166, 35, .35);
    }

    .counsellor-card .ccl-ctas .btn.p:hover {
      background: #f5a623;
      transform: translateY(-2px);
    }

    .counsellor-card .ccl-ctas .btn.g {
      background: var(--green);
      color: #fff;
      box-shadow: 0 4px 14px rgba(59, 183, 126, .3);
    }

    .counsellor-card .ccl-ctas .btn.g:hover {
      background: var(--green-d);
      transform: translateY(-2px);
    }

    .counsellor-card .ccl-trust {
      display: flex;
      gap: 32px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .15);
      flex-wrap: wrap;
    }

    .counsellor-card .ccl-trust .t .n {
      font-size: 22px;
      font-weight: 900;
      color: var(--gold);
      font-family: var(--serif);
      line-height: 1;
    }

    .counsellor-card .ccl-trust .t .l {
      font-size: 11px;
      color: rgba(255, 255, 255, .7);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      margin-top: 5px;
    }

    .counsellor-card .ccl-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    .counsellor-card .ccl-avatars {
      display: flex;
      align-items: center;
    }

    .counsellor-card .ccl-avatars .av {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 3px solid var(--navy);
      margin-left: -14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 900;
      font-size: 16px;
    }

    .counsellor-card .ccl-avatars .av:first-child {
      margin-left: 0;
    }

    .counsellor-card .ccl-avatars .av.a1 {
      background: var(--blue);
    }

    .counsellor-card .ccl-avatars .av.a2 {
      background: var(--green);
    }

    .counsellor-card .ccl-avatars .av.a3 {
      background: var(--gold);
      color: var(--ink);
    }

    .counsellor-card .ccl-avatars .av.a4 {
      background: var(--navy-l);
    }

    .counsellor-card .ccl-avatars .av.plus {
      background: rgba(255, 255, 255, .15);
    }

    .counsellor-card .ccl-callout {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 10px;
      padding: 18px 22px;
      font-size: 13px;
      color: rgba(255, 255, 255, .9);
      line-height: 1.6;
      max-width: 320px;
      text-align: center;
    }

    @media(max-width:900px) {
      .counsellor-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 22px;
      }

      .counsellor-card .ccl-left h2 {
        font-size: 26px;
      }
    }

    /* ====== FAQ Accordion enhancements ====== */
    .faq-list {
      max-width: 820px;
      margin: 0 auto;
    }

    .fq {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
      overflow: hidden;
      transition: .15s;
    }

    .fq[open] {
      border-color: var(--blue);
      box-shadow: 0 4px 14px rgba(74, 143, 217, .08);
    }

    .fq summary {
      padding: 18px 22px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      list-style: none;
    }

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

    .fq-chev {
      font-size: 20px;
      color: var(--blue);
      font-weight: 300;
      transition: .2s;
    }

    .fq[open] .fq-chev {
      transform: rotate(45deg);
    }

    .fq .fq-a {
      padding: 0 22px 18px;
      font-size: 13px;
      color: #444;
      line-height: 1.7;
    }

    /* ====== Animated counter shimmer ====== */
    .cnt {
      transition: color .2s;
      display: inline-block;
    }


    /* ====== Footer ====== */
    .foot {
      background: #1a1a1a;
      color: rgba(255, 255, 255, .7);
      padding: 60px 22px 20px;
      margin-top: 0;
    }

    .foot-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
      gap: 36px;
    }

    .foot h6 {
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 14px;
    }

    .foot a {
      display: block;
      padding: 4px 0;
      font-size: 12px;
      color: rgba(255, 255, 255, .6);
      transition: .15s;
      cursor: pointer;
    }

    .foot a:hover {
      color: var(--gold);
    }

    .foot-copy {
      max-width: 1200px;
      margin: 32px auto 0;
      padding: 20px 0 0;
      border-top: 1px solid rgba(255, 255, 255, .1);
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
      text-align: center;
    }

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

    /* ====== Course cards enhancement ====== */
    /* "View more courses" callout row at bottom of #courses-again - replaces filter pills */
    .courses-more-row {
      margin-top: 34px;
      text-align: center;
    }

    .courses-more-link {
      display: inline-block;
      max-width: 740px;
      padding: 18px 28px;
      background: linear-gradient(135deg, rgba(254, 168, 47, .14) 0%, rgba(255, 255, 255, .05) 100%);
      border: 1px solid rgba(254, 168, 47, .35);
      border-radius: 14px;
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .92);
      text-decoration: none;
      transition: all .2s;
      font-weight: 500;
    }

    .courses-more-link:hover {
      background: linear-gradient(135deg, rgba(254, 168, 47, .22) 0%, rgba(255, 255, 255, .08) 100%);
      border-color: var(--orange);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(254, 168, 47, .18);
    }

    .courses-more-link .cml-cta {
      display: inline-block;
      margin-left: 6px;
      color: var(--orange);
      font-weight: 800;
      white-space: nowrap;
    }

    @media (max-width:780px) {
      .courses-more-link {
        padding: 16px 20px;
        font-size: 13.5px;
      }

      .courses-more-link .cml-cta {
        display: block;
        margin-left: 0;
        margin-top: 6px;
      }
    }

    .courses-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .course-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      transition: .25s;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .course-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .09);
      border-color: #e0e0e0;
    }

    .course-card.rec {
      border: 2px solid var(--blue);
    }

    .cc-thumb {
      position: relative;
      aspect-ratio: 16/9;
      background: linear-gradient(135deg, #1a1a1a 0%, #4a8fd9 100%);
      display: flex;
      align-items: flex-start;
      padding: 14px;
      overflow: hidden;
    }

    .cc-thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 14px, rgba(255, 255, 255, .07) 14px 28px);
    }

    .thumb-tag {
      background: rgba(0, 0, 0, .5);
      color: #fff;
      padding: 5px 12px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      z-index: 2;
      backdrop-filter: blur(6px);
    }

    .rec-tag {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--gold);
      color: var(--ink);
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .6px;
      z-index: 2;
    }

    .cc-body {
      padding: 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .cc-body h4 {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.5px;
      margin-bottom: 8px;
    }

    .cc-cap {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      margin-bottom: 14px;
    }

    .cc-feats {
      list-style: none;
      margin: 0 0 16px;
      padding: 0;
      flex: 1;
    }

    .cc-feats li {
      padding: 6px 0 6px 22px;
      font-size: 12px;
      color: #444;
      position: relative;
      line-height: 1.55;
    }

    .cc-feats li::before {
      content: "\2713";
      position: absolute;
      left: 0;
      color: var(--green-d);
      font-weight: 900;
    }

    .cc-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-top: 1px dashed var(--border);
      border-bottom: 1px dashed var(--border);
      margin-bottom: 14px;
    }

    .cc-price .now {
      font-size: 24px;
      font-weight: 900;
      color: var(--ink);
      font-family: var(--serif);
    }

    .cc-price .was {
      font-size: 13px;
      color: #666;
      text-decoration: line-through;
      margin-left: 8px;
    }

    .cc-price .off {
      background: #fdf3e0;
      color: var(--green-d);
      padding: 3px 9px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 800;
    }

    .cc-btns {
      display: flex;
      gap: 8px;
    }

    .cc-btns .cc-b {
      flex: 1;
      padding: 12px;
      border-radius: 6px;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
      transition: .15s;
    }

    .cc-btns .cc-b.p {
      background: var(--blue);
      color: #fff;
    }

    .cc-btns .cc-b.p:hover {
      background: var(--blue-d);
    }

    .cc-btns .cc-b.s {
      background: #fff;
      border: 1.5px solid var(--blue);
      color: var(--blue);
    }

    .cc-btns .cc-b.s:hover {
      background: var(--blue);
      color: #fff;
    }

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

    /* ====== Mock Test Series sub-band ====== */
    .mocks-band {
      margin-top: 36px;
    }

    .mocks-band-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 22px;
      margin-bottom: 18px;
      padding: 18px 22px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(254, 168, 47, .10) 0%, rgba(31, 138, 91, .07) 100%);
      border: 1px dashed rgba(254, 168, 47, .42);
    }

    .mocks-band-head .mb-text {
      flex: 1;
      min-width: 240px;
    }

    .mocks-band-head h3 {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.4px;
      margin: 0 0 4px;
      color: var(--ink);
      line-height: 1.2;
    }

    .mocks-band-accent {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 600;
      color: var(--orange-d);
    }

    .mocks-band-sub {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
      max-width: 600px;
    }

    .mocks-band-link {
      font-size: 13px;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
      border-bottom: 1.5px solid var(--orange);
      padding: 8px 2px 4px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 36px;
    }

    .mocks-band-link:hover {
      color: var(--orange-d);
      border-bottom-color: var(--orange-d);
    }

    @media(max-width:640px) {
      .mocks-band-head {
        padding: 16px;
      }

      .mocks-band-head h3 {
        font-size: 18px;
      }

      .mocks-band {
        margin-top: 28px;
      }
    }

    /* Mocks-band on the dark courses-again section */
    #courses-again .mocks-band-head {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(254, 168, 47, .5);
    }

    #courses-again .mocks-band-head h3 {
      color: #fff !important;
    }

    #courses-again .mocks-band-sub {
      color: rgba(255, 255, 255, .78) !important;
    }

    #courses-again .mocks-band-link {
      color: var(--orange) !important;
      border-bottom-color: var(--orange) !important;
    }

    #courses-again .mocks-band-link:hover {
      color: #fff !important;
      border-bottom-color: #fff !important;
    }

    /* Mock tile thumb gets a distinct gradient so it reads as a different product family */
    .course-card.mock-card .cc-thumb {
      background: linear-gradient(135deg, #0F5E3A 0%, #1F8A5B 60%, #FEA82F 100%);
    }

    /* ====== Pattern grid ====== */
    .pattern-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .pat-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 26px;
      transition: .2s;
    }

    .pat-card:hover {
      border-color: var(--blue);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(74, 143, 217, .1);
    }

    .pat-card .top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }

    .pat-card .num {
      background: var(--blue);
      color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .6px;
    }

    .cutoff-tag {
      background: var(--gold-l);
      color: var(--gold-d);
      padding: 4px 10px;
      border-radius: 14px;
      font-size: 10px;
      font-weight: 800;
    }

    .pat-card h4 {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -.3px;
      margin-bottom: 4px;
    }

    .pat-card .sub {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 18px;
    }

    .pat-card .stats-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      background: var(--bg);
      padding: 14px;
      border-radius: 8px;
      margin-bottom: 14px;
    }

    .pat-card .stats-3 .s {
      text-align: center;
    }

    .pat-card .stats-3 .n {
      font-size: 22px;
      font-weight: 900;
      color: var(--blue-d);
      font-family: var(--serif);
      line-height: 1;
    }

    .pat-card .stats-3 .l {
      font-size: 9px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .4px;
      font-weight: 700;
      margin-top: 4px;
    }

    .pat-card .topics {
      font-size: 12px;
      color: #666;
      line-height: 1.6;
    }

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

    /* ====== Colleges grid (Results-portal tile design, 4 across × 2 rows) ====== */
    .colleges-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .col-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px 22px;
      transition: all .25s;
      position: relative;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .col-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--orange), var(--orange-d));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
    }

    .col-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 44px rgba(26, 26, 46, .12);
      border-color: transparent;
    }

    .col-card:hover::before {
      transform: scaleX(1);
    }

    .col-card .rank {
      position: absolute;
      top: 16px;
      right: 16px;
      background: var(--orange-l);
      color: var(--orange-d);
      font-size: 10px;
      font-weight: 900;
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: 1px;
    }

    .col-card.top .rank {
      background: var(--orange);
      color: #fff;
    }

    .col-card .col-mono {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--orange) 0%, var(--orange-d) 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: .5px;
      margin-bottom: 14px;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
    }

    .col-card h4 {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -.3px;
      color: var(--ink);
      margin-bottom: 4px;
      padding-right: 54px;
      line-height: 1.2;
    }

    .col-card .city {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .3px;
      margin-bottom: 16px;
      font-weight: 600;
    }

    .col-card .stats {
      padding: 14px 0;
      border-top: 1px dashed var(--border);
      border-bottom: 1px dashed var(--border);
      margin-bottom: 14px;
    }

    .col-card .stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      font-size: 12px;
    }

    .col-card .stat span {
      color: var(--muted);
    }

    .col-card .stat b {
      font-weight: 800;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }

    .col-card .stat:first-child b {
      color: var(--orange-d);
      font-size: 13px;
    }

    .col-card .place-strip {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.45;
      margin-bottom: 14px;
    }

    .col-card .footer {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px dashed var(--border);
    }

    .col-card .fee {
      font-size: 11px;
      color: var(--muted);
    }

    .col-card .fee b {
      color: var(--ink);
      font-weight: 800;
    }

    .col-card .cta {
      color: var(--orange-d);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap .15s;
    }

    .col-card:hover .cta {
      gap: 8px;
    }

    @media(max-width:1100px) {
      .colleges-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    /* ====== Timeline ====== */
    .timeline {
      max-width: 880px;
      margin: 0 auto;
      padding-left: 40px;
      position: relative;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 13px;
      top: 10px;
      bottom: 10px;
      width: 2.5px;
      background: linear-gradient(180deg, var(--blue) 0%, var(--border) 50%, var(--border) 100%);
    }

    .tr {
      position: relative;
      margin-bottom: 18px;
    }

    .tr .dot {
      position: absolute;
      left: -34px;
      top: 14px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 3.5px solid var(--border);
      box-shadow: 0 0 0 5px var(--bg);
      z-index: 2;
    }

    .tr.done .dot {
      background: var(--green);
      border-color: var(--green);
    }

    .tr.done .dot::after {
      content: "\2713";
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .tr.now .dot {
      background: var(--orange);
      border-color: var(--orange);
      animation: puls 1.4s infinite;
    }

    .tr .body {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 18px 22px;
      transition: .15s;
    }

    .tr.now .body {
      background: #fdf3e0;
      border-color: var(--orange);
      border-left: 4px solid var(--orange);
    }

    .tr.done .body {
      opacity: .78;
    }

    .tr .date {
      font-size: 10px;
      color: var(--orange-d);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 6px;
    }

    .tr.done .date {
      color: var(--muted);
    }

    .tr.now .date {
      color: var(--orange-d);
    }

    .tr h4 {
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .tr p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }

    .tr .state {
      display: inline-block;
      margin-left: 8px;
      font-size: 9px;
      padding: 2px 7px;
      border-radius: 10px;
      font-weight: 900;
      letter-spacing: .5px;
      vertical-align: middle;
    }

    .tr.done .state {
      background: #e6f5ed;
      color: var(--green-d);
    }

    .tr.now .state {
      background: var(--orange-l);
      color: var(--orange-d);
    }

    /* Upcoming rows (default) — hide state badge entirely so DONE/NOW carry visual weight */
    .tr:not(.done):not(.now) .state {
      display: none;
    }

    @keyframes puls {

      0%,
      100% {
        box-shadow: 0 0 0 5px var(--bg), 0 0 0 8px rgba(254, 168, 47, .3);
      }

      50% {
        box-shadow: 0 0 0 5px var(--bg), 0 0 0 14px rgba(254, 168, 47, 0);
      }
    }

    /* ====== Metrics (Social Proof) ====== */
    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .met {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
      padding: 26px 22px;
      border-left: 4px solid var(--orange);
      transition: all .2s ease;
    }

    .met:hover {
      background: rgba(255, 255, 255, .07);
      border-color: rgba(254, 168, 47, .4);
      transform: translateY(-2px);
    }

    .met .val {
      font-size: 42px;
      font-weight: 900;
      color: var(--orange);
      font-family: var(--serif);
      line-height: 1;
      letter-spacing: -.5px;
    }

    .met .lab {
      font-size: 12px;
      color: rgba(255, 255, 255, .85);
      text-transform: uppercase;
      letter-spacing: .6px;
      font-weight: 700;
      margin-top: 8px;
    }

    @media(max-width:900px) {
      .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .met {
        padding: 22px 18px;
      }

      .met .val {
        font-size: 34px;
      }
    }

    @media(max-width:480px) {
      .metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }

      .met {
        padding: 18px 14px !important;
      }

      .met .val {
        font-size: 30px !important;
      }

      .met .lab {
        font-size: 10.5px !important;
      }
    }

    /* ====== Clubs ====== */
    .clubs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .club {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      transition: .25s;
      cursor: pointer;
    }

    .club:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
      border-color: var(--blue);
    }

    .cl-ico {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 16px;
    }

    .club h5 {
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .club p {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 12px;
    }

    .cl-link {
      color: var(--orange-d);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 6px 0;
    }

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

    @media(max-width:600px) {
      .clubs-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Reveal (global override removed in favor of top definition) */



    /* ====== TRUST BADGES ROW (Hero) - centered, comfortable wrap ====== */
    .trust-row {
      display: flex;
      gap: 10px;
      margin-bottom: 28px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
    }

    .tb {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .9);
      letter-spacing: .3px;
      backdrop-filter: blur(6px);
    }

    .tb-ico {
      font-size: 13px;
    }

    /* ====== COURSE PERSUASION TAGS ====== */
    .value-tag {
      position: absolute;
      bottom: 14px;
      right: 14px;
      background: var(--gold);
      color: var(--ink);
      padding: 5px 12px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .6px;
      text-transform: uppercase;
      z-index: 2;
    }

    .value-tag.cov {
      background: #fff;
      color: var(--orange-d);
    }

    .seats-tag {
      position: absolute;
      bottom: 14px;
      left: 14px;
      background: rgba(0, 0, 0, .7);
      color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 700;
      z-index: 2;
      animation: pulse-seat 2s ease-in-out infinite;
    }

    @keyframes pulse-seat {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .7;
      }
    }

    .fi {
      display: inline-block;
      width: 18px;
      text-align: center;
      font-size: 12px;
      margin-right: 2px;
    }

    .cc-feats li {
      display: flex;
      align-items: flex-start;
      gap: 0;
    }

    /* ====== SCORE BADGES (Testimonials) ====== */
    .score-badge {
      display: inline-block;
      background: var(--gold);
      color: var(--ink);
      padding: 1px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 900;
      margin-left: 6px;
      vertical-align: middle;
    }

    /* ====== RESOURCE TYPE TAGS ====== */
    .res-type {
      display: inline-block;
      background: var(--blue);
      color: #fff;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .res-type.free {
      background: var(--gold);
      color: var(--ink);
    }

    /* ====== PLACEMENT STRIP (Colleges) ====== */
    .place-strip {
      background: var(--gold);
      color: var(--ink);
      padding: 6px 14px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .3px;
      margin: -14px -20px 14px;
      border-radius: 0;
      text-align: center;
    }

    .col-card.top .place-strip {
      margin-top: 10px;
    }

    /* ====== FAQ QUICK LINKS ====== */
    .faq-quick {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 24px;
    }

    .fq-pill {
      background: #fff;
      border: 1.5px solid var(--border);
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      color: var(--blue);
      cursor: pointer;
      transition: .15s;
    }

    .fq-pill:hover {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    /* ====== MID-PAGE CTA BLOCKS ====== */
    .mid-cta {
      background: linear-gradient(135deg, #FFE9C7 0%, #FFD394 100%);
      color: var(--ink);
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      border-top: 1px solid rgba(254, 168, 47, .25);
      border-bottom: 1px solid rgba(254, 168, 47, .25);
    }

    .mid-cta span {
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
    }

    .mc-btn {
      background: var(--orange);
      color: #fff;
      padding: 11px 24px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .3px;
      transition: .15s;
      box-shadow: 0 4px 12px rgba(254, 168, 47, .32);
    }

    .mc-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(254, 168, 47, .42);
      background: var(--orange-d);
    }

    .mc-btn.alt {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--ink);
      box-shadow: none;
    }

    .mc-btn.alt:hover {
      background: var(--ink);
      color: #fff;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
    }

    /* ====== STICKY MOBILE CTA ====== */
    .sticky-cta {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1200;
      background: #fff;
      border-top: 1px solid var(--border);
      padding: 10px 16px;
      gap: 8px;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
    }

    .sc-btn {
      flex: 1;
      padding: 12px;
      text-align: center;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .sc-btn.pri {
      background: var(--gold);
      color: var(--ink);
    }

    .sc-btn.sec {
      background: #fff;
      color: var(--blue);
      border: 1.5px solid var(--blue);
    }

    @media(max-width:768px) {
      .sticky-cta {
        display: flex;
      }

      body {
        padding-bottom: 72px;
      }
    }

    /* ====== STRATEGY PHASE ICONS ====== */
    .bp-ico {
      font-size: 28px;
      margin-bottom: 10px;
      line-height: 1;
    }

    /* ====== MICRO-INTERACTIONS ====== */
    .course-card {
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .course-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 44px rgba(0, 0, 0, .1);
    }

    .col-card {
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .col-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .07);
      border-left-color: var(--gold);
    }

    .club {
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .club:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .1);
    }

    .bp-card {
      transition: transform .2s ease, background .2s ease;
    }

    .bp-card:hover {
      transform: translateY(-6px) scale(1.02);
    }

    .pat-card {
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .pat-card:hover {
      transform: translateY(-4px);
      border-color: var(--blue);
      box-shadow: 0 10px 24px rgba(74, 143, 217, .12);
    }

    .co-card {
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .co-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, .1);
    }

    .fac {
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .fac:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    }

    .news-card {
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .news-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 32px rgba(0, 0, 0, .09);
    }

    /* ====== SECTION SEPARATORS ====== */
    .sec::after {
      content: "";
      display: block;
      max-width: 120px;
      height: 3px;
      background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%);
      margin: 0 auto;
      margin-top: 48px;
      border-radius: 2px;
      opacity: .4;
    }

    .sec.dark::after,
    .sec.bg::after,
    .counsellor-sec::after,
    .testi-section::after {
      display: none;
    }



    /* ======= HERO: YouTube video background ======= */
    .hero {
      position: relative;
      min-height: 88vh;
      background: #1a1a1a;
      color: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .hero-video iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 177.78vh;
      height: 56.25vw;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      border: 0;
      pointer-events: none;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(10, 10, 10, .65) 0%, rgba(10, 10, 10, .85) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 22px;
      width: 100%;
    }

    /* (Legacy hero-anchor countdown rules removed — chip now lives in #courses sec-head) */

    /* ======= FACULTY CAROUSEL (slim) ======= */
    .faculty-slim .fac-ctrl {
      display: flex;
      gap: 8px;
    }

    .fac-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #fff;
      border: 1.5px solid var(--border);
      color: #1a1a1a;
      font-size: 22px;
      font-weight: 300;
      cursor: pointer;
      transition: .15s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding-bottom: 3px;
    }

    .fac-btn:hover {
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
      transform: scale(1.05);
    }

    .faculty-rail {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 8px 4px 20px;
      scrollbar-width: thin;
    }

    .faculty-rail::-webkit-scrollbar {
      height: 6px;
    }

    .faculty-rail::-webkit-scrollbar-track {
      background: var(--bg);
      border-radius: 3px;
    }

    .faculty-rail::-webkit-scrollbar-thumb {
      background: #b5b5b0;
      border-radius: 3px;
    }

    .fac-tile {
      flex: 0 0 230px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      scroll-snap-align: start;
      transition: .2s;
    }

    .fac-tile:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
      border-color: var(--blue);
    }

    .fac-tile .fac-ph {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1a1a1a 0%, var(--blue) 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 22px;
      margin-bottom: 14px;
    }

    .fac-tile h4 {
      font-size: 17px;
      font-weight: 900;
      letter-spacing: -.2px;
      margin-bottom: 4px;
      color: #1a1a1a;
    }

    .fac-tile .fac-role {
      font-size: 12px;
      color: var(--blue);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 10px;
    }

    .fac-tile .fac-creds {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .fac-tile .fac-creds span {
      background: var(--bg);
      color: #444;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
    }

    /* ======= TESTIMONIALS: Flip-to-view-scorecard (opacity-based, reliable) ======= */
    .testi-slim {
      padding-bottom: 14px;
      background: var(--bg);
    }

    .testi-marquee-section {
      padding: 8px 0 50px;
      background: var(--bg);
      overflow: hidden;
    }

    .testi-marquee-section .testi-rows-wrap {
      position: relative;
      overflow: hidden;
      max-width: 1400px;
      margin: 0 auto;
    }

    .testi-marquee-section .testi-rows-wrap::before,
    .testi-marquee-section .testi-rows-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 60px;
      z-index: 2;
      pointer-events: none;
    }

    .testi-marquee-section .testi-rows-wrap::before {
      left: 0;
      background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
    }

    .testi-marquee-section .testi-rows-wrap::after {
      right: 0;
      background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
    }

    .flip-track {
      display: flex;
      gap: 16px;
      animation: flipScroll 55s linear infinite;
      width: max-content;
      padding: 14px 0;
    }

    .flip-track:hover {
      animation-play-state: paused;
    }

    @keyframes flipScroll {
      from {
        transform: translateX(0);
      }

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

    .flip-tc {
      flex: 0 0 320px;
      height: 240px;
      position: relative;
      cursor: pointer;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }

    @media (max-width:480px) {

      /* On narrow mobile, clamp flip-card width to viewport so it doesn't overflow horizontally */
      .flip-tc {
        flex: 0 0 calc(100vw - 48px) !important;
        max-width: 320px;
        height: auto !important;
        min-height: 240px;
      }
    }

    .flip-inner {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .flip-front,
    .flip-back {
      position: absolute;
      inset: 0;
      border-radius: 14px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      transition: opacity .3s ease;
    }

    .flip-front {
      background: #fff;
      border: 1px solid var(--border);
      opacity: 1;
      z-index: 2;
    }

    .flip-back {
      background: linear-gradient(135deg, #1a1a1a 0%, var(--blue) 100%);
      color: #fff;
      opacity: 0;
      z-index: 3;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .flip-tc:hover .flip-front,
    .flip-tc.flipped .flip-front {
      opacity: 0;
    }

    .flip-tc:hover .flip-back,
    .flip-tc.flipped .flip-back {
      opacity: 1;
    }

    .flip-front .stars {
      color: var(--gold);
      font-size: 14px;
      letter-spacing: 2px;
      margin-bottom: 10px;
    }

    .flip-front p {
      font-size: 13px;
      line-height: 1.55;
      color: #333;
      font-style: italic;
      margin-bottom: auto;
    }

    .flip-front .who {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed var(--border);
    }

    .flip-front .who .av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 13px;
      flex-shrink: 0;
    }

    .flip-front .who b {
      font-size: 12px;
      color: #1a1a1a;
      display: block;
      line-height: 1.3;
    }

    .flip-front .who span {
      font-size: 10px;
      color: #666;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .flip-back .sc-head {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }

    .flip-back .sc-percentile {
      font-size: 56px;
      font-weight: 900;
      color: var(--gold);
      font-family: var(--serif);
      line-height: 1;
      letter-spacing: -2px;
    }

    .flip-back .sc-percentile .sc-pct {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.3px;
      margin-left: 4px;
      color: var(--gold);
      font-family: var(--serif);
      vertical-align: baseline;
      opacity: .92;
    }

    .flip-back .sc-label {
      font-size: 11px;
      color: rgba(255, 255, 255, .85);
      font-weight: 700;
      margin: 6px 0 14px;
      letter-spacing: .3px;
    }

    .flip-back .sc-breakdown {
      display: flex;
      gap: 14px;
      margin-bottom: 10px;
    }

    .flip-back .sc-breakdown>div {
      text-align: center;
    }

    .flip-back .sc-breakdown span {
      display: block;
      font-size: 9px;
      color: rgba(255, 255, 255, .75);
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      margin-bottom: 3px;
    }

    .flip-back .sc-breakdown b {
      font-size: 17px;
      font-weight: 900;
      color: #fff;
      font-family: var(--serif);
    }

    .flip-back .sc-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
      margin-bottom: 10px;
    }

    .flip-back .sc-meta span {
      font-size: 9.5px;
      color: rgba(255, 255, 255, .75);
      font-weight: 800;
      letter-spacing: .6px;
      text-transform: uppercase;
    }

    .flip-back .sc-meta b {
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      text-align: right;
      line-height: 1.15;
      letter-spacing: .1px;
    }

    .flip-back .sc-name {
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      border-top: 1px solid rgba(255, 255, 255, .2);
      padding-top: 10px;
      margin-top: 10px;
    }

    /* ======= FAQ: Minimize with View More ======= */
    .faq-more-wrap {
      display: none;
    }

    .faq-more-wrap.expanded {
      display: block;
    }

    .faq-more-btn {
      display: block;
      margin: 20px auto 0;
      background: var(--orange);
      color: var(--ink);
      padding: 13px 30px;
      border: 0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      cursor: pointer;
      transition: .15s;
      box-shadow: 0 4px 12px rgba(254, 168, 47, .28);
    }

    .faq-more-btn:hover {
      background: var(--orange-d);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(254, 168, 47, .42);
    }

    .faq-more-btn.expanded {
      background: var(--ink);
      color: #fff;
    }

    /* ======= Counsellor trust row is now removed in HTML ======= */

    /* ======= Color & contrast adjustments ======= */
    .sec.bg {
      background: var(--bg);
    }

    .sec.bg h2,
    .sec.bg h3,
    .sec.bg h4 {
      color: #1a1a1a;
    }

    .sec:not(.dark):not(.counsellor-sec) p {
      color: #333;
    }

    .sec:not(.dark):not(.counsellor-sec) .sub-h {
      color: #555;
    }

    @media(max-width:768px) {
      .flip-tc {
        flex-basis: 260px;
        height: 220px;
      }

      .fac-tile {
        flex-basis: 200px;
      }
    }



    /* ===== ELIGIBILITY (compact pointer version) ===== */
    .elig-compact {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 22px 24px;
      margin-bottom: 20px;
    }

    .elig-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .elig-ico-mini {
      width: 34px;
      height: 34px;
      background: linear-gradient(135deg, var(--blue) 0%, #1a1a1a 100%);
      color: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .elig-title h3 {
      font-size: 16px;
      font-weight: 900;
      color: #1a1a1a;
      letter-spacing: -.2px;
      margin: 0;
    }

    .elig-title .elig-sub {
      font-size: 11px;
      color: #666;
      font-weight: 600;
      margin-left: auto;
    }

    .elig-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }

    .elig-col-head {
      font-size: 10px;
      font-weight: 900;
      color: var(--blue);
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .elig-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .elig-list li {
      padding: 5px 0 5px 22px;
      position: relative;
      font-size: 12.5px;
      line-height: 1.45;
      color: #333;
      font-weight: 500;
      border-bottom: 1px dashed #eee;
    }

    .elig-list li:last-child {
      border-bottom: 0;
    }

    .elig-list.yes li::before {
      content: "\2713";
      position: absolute;
      left: 2px;
      top: 5px;
      color: #3bb77e;
      font-weight: 900;
      font-size: 14px;
    }

    .elig-list.warn li::before {
      content: "!";
      position: absolute;
      left: 4px;
      top: 4px;
      color: var(--gold);
      font-weight: 900;
      font-size: 15px;
      background: rgba(245, 166, 35, .15);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .elig-list.warn li {
      padding-left: 26px;
    }

    @media(max-width:768px) {
      .elig-cols {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .elig-title {
        flex-wrap: wrap;
      }

      .elig-title .elig-sub {
        margin-left: 0;
        flex-basis: 100%;
      }
    }

    }



    /* ===== CONTRAST + SPACING FIXES ===== */
    /* Ensure all body text has minimum WCAG AA contrast */
    .sec p,
    .sub-h {
      color: #333 !important;
    }

    .sec.dark p,
    .sec.dark .sub-h,
    .counsellor-sec p,
    .counsellor-sec .sub-h {
      color: rgba(255, 255, 255, .88) !important;
    }

    /* Exception: video-card vc-meta has white bg even inside dark sections — restore muted text */
    .sec.dark .video-card .vc-meta p,
    .sec.dark .video-card .vc-meta h5 {
      color: var(--muted) !important;
    }

    .sec.dark .video-card .vc-meta h5 {
      color: var(--ink) !important;
      font-weight: 800;
    }

    /* Section spacing - ensure no section is cut off */
    .sec {
      padding: 56px 22px 48px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .sec.dark,
    .sec.bg {
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    .sec.dark .sec-inner,
    .sec.bg .sec-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 22px;
    }

    /* Ensure testimonials section is visible and properly spaced */
    .testi-slim {
      padding: 48px 22px 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .testi-slim .sec-head {
      margin-bottom: 8px;
    }

    /* Faculty carousel section also needs clean spacing */
    .faculty-slim {
      padding: 48px 22px 56px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* FAQ section */
    #faq {
      padding-top: 56px;
      padding-bottom: 56px;
    }

    /* Force section background colors to not clash */
    .sec:not(.dark):not(.bg) {
      background: #fff;
    }

    /* Overview + eligibility extra margin */
    #overview .sec-inner>* {
      margin-bottom: 16px;
    }

    #overview .sec-inner>*:last-child {
      margin-bottom: 0;
    }

    /* Hero readability */
    .hero h1 .yellow {
      color: var(--gold) !important;
    }

    .hero .sub {
      color: rgba(255, 255, 255, .88) !important;
    }

    .hero-overlay {
      background: linear-gradient(180deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .90) 100%) !important;
    }

    /* Counsellor section */
    .counsellor-sec {
      background: #1a1a1a !important;
    }

    .counsellor-sec h2,
    .counsellor-sec h3 {
      color: #fff !important;
    }

    /* Make sure the mid-CTAs do not double up */
    .mid-cta+.mid-cta {
      display: none;
    }



    /* =================================================================
   OVERVIEW SECTION REDESIGN
================================================================== */
    .ov-intro-row {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
      gap: 34px;
      margin-bottom: 34px;
      align-items: stretch;
    }

    .ov-intro-text p {
      font-size: 14.5px;
      line-height: 1.7;
      color: #333;
      margin-bottom: 14px;
    }

    .ov-intro-text p:last-child {
      margin-bottom: 0;
    }

    .ov-intro-text b {
      color: #1a1a1a;
      font-weight: 800;
    }

    .ov-intro-text .hi {
      background: linear-gradient(180deg, transparent 55%, rgba(245, 166, 35, .35) 55%);
      padding: 1px 2px;
      color: #1a1a1a;
      font-weight: 700;
    }

    .ov-highlight-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      background: linear-gradient(135deg, #1a1a1a 0%, #2c3e6b 100%);
      padding: 22px;
      border-radius: 14px;
      color: #fff;
      min-height: 280px;
      align-content: center;
    }

    .ohs {
      text-align: center;
      padding: 18px 12px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      transition: .2s;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .ohs:hover {
      background: rgba(245, 166, 35, .12);
      border-color: rgba(245, 166, 35, .3);
      transform: translateY(-2px);
    }

    .ohs-n {
      font-size: 34px;
      font-weight: 900;
      color: var(--gold);
      line-height: 1;
      letter-spacing: -1.2px;
      font-family: var(--serif);
      margin-bottom: 6px;
    }

    .ohs-l {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .8);
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .ov-facts-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;
    }

    /* Eligibility compact card (NO explanations, only pointers) */
    .elig-card-new {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 26px;
    }

    .elig-head-new {
      display: flex;
      gap: 14px;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }

    .elig-ico-new {
      width: 46px;
      height: 46px;
      background: linear-gradient(135deg, #4a8fd9 0%, #1a1a1a 100%);
      color: #fff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    .elig-head-new h3 {
      font-size: 18px;
      font-weight: 900;
      color: #1a1a1a;
      letter-spacing: -.3px;
      line-height: 1.2;
    }

    .elig-head-new span {
      font-size: 11px;
      color: #666;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .elig-cols-new {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .elig-col-new .elig-col-lbl {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--border);
    }

    .elig-col-new.yes .elig-col-lbl {
      color: #3bb77e;
    }

    .elig-col-new.warn .elig-col-lbl {
      color: var(--gold);
    }

    .lbl-tick,
    .lbl-bang {
      display: inline-flex;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 900;
      color: #fff;
    }

    .lbl-tick {
      background: #3bb77e;
    }

    .lbl-bang {
      background: var(--gold);
      color: #1a1a1a;
    }

    .elig-col-new ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .elig-col-new ul li {
      font-size: 12.5px;
      line-height: 1.5;
      color: #333;
      padding: 6px 0 6px 16px;
      position: relative;
      font-weight: 500;
    }

    .elig-col-new.yes ul li::before {
      content: "\2022";
      position: absolute;
      left: 4px;
      color: #3bb77e;
      font-weight: 900;
    }

    .elig-col-new.warn ul li::before {
      content: "\2022";
      position: absolute;
      left: 4px;
      color: var(--gold);
      font-weight: 900;
    }

    /* Quick Facts (updated styling for consistency) */
    .ov-facts {
      background: var(--bg);
      border-radius: 14px;
      padding: 26px;
      border-left: 4px solid var(--blue);
    }

    .ov-facts h4 {
      font-size: 11px;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font-weight: 800;
      margin-bottom: 14px;
    }

    .ov-facts .row {
      display: flex;
      justify-content: space-between;
      padding: 9px 0;
      border-bottom: 1px dashed var(--border);
      font-size: 12.5px;
      gap: 12px;
      line-height: 1.4;
    }

    .ov-facts .row:last-child {
      border: 0;
    }

    .ov-facts .row .k {
      color: #555;
      flex-shrink: 0;
      font-weight: 600;
    }

    .ov-facts .row .v {
      font-weight: 800;
      color: #1a1a1a;
      text-align: right;
    }

    @media(max-width:900px) {

      .ov-intro-row,
      .ov-facts-row {
        grid-template-columns: 1fr;
      }

      .elig-cols-new {
        grid-template-columns: 1fr;
      }
    }

    /* =================================================================
   CONTRAST FIXES (font + background)
================================================================== */
    /* Ensure consistent body text on light sections */
    .sec:not(.dark):not(.counsellor-sec) p {
      color: #333;
    }

    .sec:not(.dark):not(.counsellor-sec) .sub-h {
      color: #555;
      font-weight: 500;
    }

    .sec h2,
    .sec h3,
    .sec h4 {
      color: #1a1a1a;
    }

    .sec.dark h2,
    .sec.dark h3,
    .sec.dark h4,
    .sec.dark p,
    .sec.dark .sub-h {
      color: #fff;
    }

    .sec.dark .sub-h {
      color: rgba(255, 255, 255, .75);
    }

    /* Flip card text color reinforcement (was low contrast) */
    .flip-front p {
      color: #333;
      font-weight: 500;
    }

    .flip-front .who b {
      color: #1a1a1a;
      font-weight: 800;
    }

    .flip-front .who span {
      color: #666;
    }

    /* Course feature list contrast */
    .cc-feats li {
      color: #333;
      font-weight: 500;
    }

    /* Faculty tile contrast */
    .fac-tile h4 {
      color: #1a1a1a;
    }

    .fac-tile .fac-role {
      color: var(--blue);
    }

    .fac-tile .fac-creds span {
      color: #444;
    }

    /* FAQ accordion text */
    .fq summary {
      color: #1a1a1a;
      font-weight: 700;
    }

    .fq[open] summary {
      color: var(--blue);
    }

    /* =================================================================
   DESIGN GAP FIXES (testimonial cards, section spacing)
================================================================== */
    /* Ensure testimonial flip cards have sufficient height and visibility */
    .flip-tc {
      height: 260px;
    }

    .flip-front,
    .flip-back {
      overflow: hidden;
    }

    .flip-front p {
      font-size: 13px;
      line-height: 1.5;
      -webkit-line-clamp: 5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Ensure testimonials section has proper background */
    .testi-marquee-section {
      padding: 24px 0 60px;
      background: var(--bg);
    }

    /* Section padding consistency */
    .sec {
      padding: 60px 22px;
    }

    .sec.dark {
      padding: 60px 22px;
    }

    /* Hero stats text contrast on black background */
    .hero-stats .n {
      color: var(--gold);
    }

    .hero-stats .l {
      color: rgba(255, 255, 255, .75);
    }

    /* Trust row on hero - better visibility */
    .trust-row .tb {
      color: rgba(255, 255, 255, .95);
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .15);
    }

    /* Counsellor section clean contrast */
    .counsellor-sec h2,
    .counsellor-sec h3 {
      color: #fff;
    }

    .counsellor-sec p {
      color: rgba(255, 255, 255, .85);
    }



    /* (old testimonials CSS replaced by catkingMarquee rule below) */

    /* (removed overly-broad club color rules, replaced below) */



    /* ======= FREE RESOURCES: per-card text contrast ======= */
    /* Override the section-level p{color:#333} rule for club cards */
    .clubs-grid .club h5,
    .clubs-grid .club p,
    .clubs-grid .club .res-type,
    .clubs-grid .club .cl-link,
    .clubs-grid .club .cl-ico {
      color: #fff !important;
    }

    .clubs-grid .club p {
      color: rgba(255, 255, 255, .92) !important;
      font-weight: 500 !important;
    }

    .clubs-grid .club .res-type {
      background: rgba(255, 255, 255, .2) !important;
      color: #fff !important;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .5px;
      display: inline-block;
      margin-bottom: 10px;
    }

    .clubs-grid .club .cl-link {
      color: #fff !important;
      font-weight: 800 !important;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: .5px;
      display: inline-block;
      margin-top: 8px;
    }

    .clubs-grid .club .cl-ico {
      background: rgba(255, 255, 255, .15) !important;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 14px;
      color: #fff !important;
    }

    /* Gold card (nth-child 4n+3) needs DARK text */
    .clubs-grid .club:nth-child(4n+3) h5,
    .clubs-grid .club:nth-child(4n+3) p,
    .clubs-grid .club:nth-child(4n+3) .res-type,
    .clubs-grid .club:nth-child(4n+3) .cl-link {
      color: #1a1a1a !important;
    }

    .clubs-grid .club:nth-child(4n+3) p {
      color: rgba(26, 26, 26, .85) !important;
    }

    .clubs-grid .club:nth-child(4n+3) .res-type {
      background: rgba(26, 26, 26, .15) !important;
      color: #1a1a1a !important;
    }

    .clubs-grid .club:nth-child(4n+3) .cl-ico {
      background: rgba(26, 26, 26, .12) !important;
      color: #1a1a1a !important;
    }

    .clubs-grid .club:nth-child(4n+3) .cl-link {
      color: #1a1a1a !important;
    }

    /* Also make sure cards have proper padding and layout */
    .clubs-grid .club {
      padding: 26px 22px !important;
      min-height: 220px;
      display: flex;
      flex-direction: column;
    }

    .clubs-grid .club h5 {
      font-size: 17px !important;
      font-weight: 900 !important;
      margin-bottom: 8px !important;
      line-height: 1.3;
    }

    .clubs-grid .club p {
      font-size: 13px !important;
      line-height: 1.55 !important;
      opacity: 1 !important;
      margin-bottom: auto;
    }




    /* =================================================================
   OVERVIEW UNIFIED LAYOUT
   Left: prose (top) + eligibility (bottom) stacked
   Right: Quick Facts (full-height)
================================================================== */
    .ov-unified {
      display: flex;
      gap: 28px;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .ov-left {
      flex: 1 1 600px;
      min-width: 300px;
    }

    .ov-right {
      flex: 1 1 360px;
      min-width: 300px;
      max-width: 460px;
    }

    .ov-left-inner {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }


    /* Overview prose block */
    .ov-prose {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 28px;
    }

    .ov-prose p {
      font-size: 14.5px;
      line-height: 1.7;
      color: #333;
      margin-bottom: 14px;
      font-weight: 500;
    }

    .ov-prose p:last-child {
      margin-bottom: 0;
    }

    .ov-prose p b {
      color: #1a1a1a;
      font-weight: 800;
    }

    .ov-prose p .hi {
      background: linear-gradient(180deg, transparent 55%, rgba(245, 166, 35, .35) 55%);
      padding: 1px 2px;
      color: #1a1a1a;
      font-weight: 700;
    }

    /* Eligibility card (matches prose card styling for unified look) */
    .elig-card-unified {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 24px;
      flex: 1;
    }

    .elig-head-u {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .elig-ico-u {
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, #4a8fd9 0%, #1a1a1a 100%);
      color: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .elig-head-u h3 {
      font-size: 17px;
      font-weight: 900;
      color: #1a1a1a;
      letter-spacing: -.3px;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .elig-head-u span {
      font-size: 10px;
      color: #666;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .elig-cols-u {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .elig-col-u .elig-col-lbl-u {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--border);
    }

    .elig-col-u.yes .elig-col-lbl-u {
      color: #3bb77e;
    }

    .elig-col-u.warn .elig-col-lbl-u {
      color: var(--gold);
    }

    .lbl-tick-u,
    .lbl-bang-u {
      display: inline-flex;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 900;
      color: #fff;
    }

    .lbl-tick-u {
      background: #3bb77e;
    }

    .lbl-bang-u {
      background: var(--gold);
      color: #1a1a1a;
    }

    .elig-col-u ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .elig-col-u ul li {
      font-size: 12px;
      line-height: 1.5;
      color: #333;
      padding: 5px 0 5px 14px;
      position: relative;
      font-weight: 500;
    }

    .elig-col-u.yes ul li::before {
      content: "\2022";
      position: absolute;
      left: 2px;
      color: #3bb77e;
      font-weight: 900;
      font-size: 14px;
      line-height: 1;
      top: 8px;
    }

    .elig-col-u.warn ul li::before {
      content: "\2022";
      position: absolute;
      left: 2px;
      color: var(--gold);
      font-weight: 900;
      font-size: 14px;
      line-height: 1;
      top: 8px;
    }

    /* Quick Facts right column (full-height, same styling as prose card for unified look) */
    .ov-facts-unified {
      background: #fff;
      border: 1.5px solid var(--border);
      border-left: 4px solid var(--orange);
      border-radius: 14px;
      padding: 24px 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .qf-head {
      padding-bottom: 14px;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }

    .qf-head h4 {
      font-size: 14px;
      color: var(--orange-d);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font-weight: 900;
      margin-bottom: 3px;
    }

    .qf-sub {
      font-size: 10px;
      color: #888;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .qf-list {
      flex: 1;
    }

    .qf-list .row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px dashed var(--border);
      font-size: 12px;
      gap: 10px;
      line-height: 1.45;
    }

    .qf-list .row:last-child {
      border: 0;
    }

    .qf-list .row .k {
      color: #555;
      flex-shrink: 0;
      font-weight: 600;
      min-width: 150px;
    }

    .qf-list .row .v {
      font-weight: 800;
      color: #1a1a1a;
      text-align: right;
      flex: 1;
    }

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

      .elig-cols-u {
        grid-template-columns: 1fr;
      }
    }




    /* =================================================================
   TESTIMONIALS MARQUEE - DEFINITIVE FIX
   Uses unique animation name 'catkingMarquee' to avoid ANY conflict
   with the older flipScroll/t-scroll/scrollx rules above.
================================================================== */
    @keyframes catkingMarquee {
      0% {
        transform: translate3d(0, 0, 0);
      }

      100% {
        transform: translate3d(-50%, 0, 0);
      }
    }

    .testi-marquee-section {
      padding: 30px 0 60px !important;
      background: var(--bg) !important;
      overflow: hidden !important;
      width: 100% !important;
    }

    .testi-marquee-section .testi-rows-wrap {
      position: relative !important;
      overflow: hidden !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }

    .testi-marquee-section .testi-rows-wrap::before,
    .testi-marquee-section .testi-rows-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 3;
      pointer-events: none;
    }

    .testi-marquee-section .testi-rows-wrap::before {
      left: 0;
      background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
    }

    .testi-marquee-section .testi-rows-wrap::after {
      right: 0;
      background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
    }

    .testi-marquee-section .flip-track {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 16px !important;
      width: max-content !important;
      padding: 16px 0 !important;
      animation: catkingMarquee 45s linear infinite !important;
      animation-play-state: running !important;
      will-change: transform;
    }

    .testi-marquee-section .flip-track:hover {
      animation-play-state: paused !important;
    }

    /* Card sizing */
    .testi-marquee-section .flip-tc {
      flex: 0 0 300px !important;
      width: 300px !important;
      height: 260px !important;
      perspective: 1200px;
      cursor: pointer;
    }



    /* Sub-nav active state slider - smoother transition */
    .sub-nav a {
      transition: color .25s ease, border-bottom-color .25s ease, background .15s ease !important;
      padding: 18px 10px !important;
      font-size: 11px !important;
      letter-spacing: .4px !important;
    }

    .sub-nav-inner {
      gap: 2px;
    }

    .sub-nav-ctas {
      margin-left: auto;
      padding-left: 10px;
      padding-top: 10px;
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .sub-nav-ctas .cta {
      white-space: nowrap;
      font-size: 11.5px !important;
      padding: 8px 14px !important;
    }

    .sub-nav a.act {
      color: var(--orange-d) !important;
      border-bottom-color: var(--orange) !important;
      border-bottom-width: 3px !important;
    }

    .sub-nav a:hover:not(.act):not(.cta) {
      color: var(--dark) !important;
      border-bottom-color: var(--border) !important;
    }

    @media (max-width:1280px) {
      .sub-nav a {
        padding: 18px 8px !important;
        font-size: 10.5px !important;
      }

      .sub-nav-ctas .cta {
        font-size: 11px !important;
        padding: 8px 12px !important;
      }
    }

    @media (max-width:1100px) {
      .sub-nav a {
        padding: 18px 6px !important;
        font-size: 10px !important;
      }

      /* At smaller laptop widths drop the lowest-priority items first */
      .sub-nav a[href="#dates"],
      .sub-nav a[href="#resources"] {
        display: none;
      }
    }

    @media (max-width:1024px) {

      /* Drop next tier - Insights */
      .sub-nav a[href="#insights"] {
        display: none;
      }
    }

    @media (max-width:920px) {

      /* At tablet drop Faculty (already disabled), Strategy, Pattern, and the ghost CTA */
      .sub-nav a[href="#faculty"],
      .sub-nav a[href="#strategy"],
      .sub-nav a[href="#pattern"] {
        display: none;
      }

      .sub-nav-ctas .cta-ghost {
        display: none;
      }
    }

    @media (max-width:768px) {

      /* On mobile/small tablet, sub-nav link items are unusable — hide them all and keep only the Buy Now CTA.
     Users still navigate via top-nav mega menus and the on-page section flow. */
      .sub-nav .sub-nav-inner>a {
        display: none !important;
      }

      .sub-nav-ctas {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        gap: 10px !important;
      }

      .sub-nav-ctas .cta {
        flex: 0 1 auto !important;
      }

      /* Show the Book a Mentorship Call CTA back on mobile (was hidden at 920px) */
      .sub-nav-ctas .cta-ghost {
        display: inline-flex !important;
      }

      .sub-nav-inner {
        padding: 10px 14px !important;
        justify-content: center;
      }
    }



    /* =================================================================
   WHY CATKING pin-card dark variant contrast fix
   My earlier .sec h3/.sec p rules inadvertently forced dark text
   on .pin-card.dk children. Override with higher specificity here.
================================================================== */
    .pin-card.dk,
    .pin-card.dk * {
      color: #fff;
    }

    .pin-card.dk h2,
    .pin-card.dk h3,
    .pin-card.dk h4,
    .pin-card.dk .ct-left h3 {
      color: #fff !important;
    }

    .pin-card.dk p,
    .pin-card.dk .ct-left p,
    .pin-card.dk .sub-h {
      color: rgba(255, 255, 255, 0.82) !important;
    }

    .pin-card.dk ul li,
    .pin-card.dk .ct-left ul li {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    .pin-card.dk .ct-left h3 .acc {
      color: var(--gold) !important;
    }

    .pin-card.dk .ct-left .tag {
      background: rgba(255, 255, 255, 0.12) !important;
      color: var(--gold) !important;
    }

    .pin-card.dk .count {
      color: rgba(255, 255, 255, 0.28) !important;
    }

    .pin-card.dk .btn-o {
      color: #fff !important;
      border-color: rgba(255, 255, 255, 0.4) !important;
    }

    .pin-card.dk .btn-o:hover {
      background: rgba(255, 255, 255, 0.12) !important;
      border-color: #fff !important;
      color: #fff !important;
    }

    /* Same treatment for .pin-card.br (brown/navy variant if used) */
    .pin-card.br,
    .pin-card.br * {
      color: #fff;
    }

    .pin-card.br h3,
    .pin-card.br p,
    .pin-card.br li {
      color: #fff !important;
    }

    .pin-card.br p {
      color: rgba(255, 255, 255, 0.82) !important;
    }

    /* ============================================================ */
    /* ROYAL THEME OVERRIDES (last cascade, intentionally !important) */
    /* Aligned to CATKing Results page + brand manual:                */
    /*   ink black, brand orange, royal blue, white, alternating.     */
    /*   Display numbers in Georgia serif, tabular, tight tracking.   */
    /* ============================================================ */

    /* ---- Top nav: royal black with orange accent ---- */
    .tn {
      background: var(--ink) !important;
      border-bottom: 1.5px solid var(--orange) !important;
    }

    .tn .links a {
      color: rgba(255, 255, 255, .78) !important;
    }

    .tn .links a:hover,
    .tn .links a.act {
      background: var(--orange) !important;
      color: var(--ink) !important;
    }

    .tn .right .ico {
      color: rgba(255, 255, 255, .85);
    }

    .tn .right .av {
      background: var(--blue) !important;
      border-color: var(--orange) !important;
    }

    .tn .apply {
      background: var(--orange) !important;
      color: var(--ink) !important;
    }

    /* ---- Display serif numbers: tighter tracking so they don't look stretched ---- */
    .hero-stats .hs .n,
    .bp-card .num,
    .metric .n,
    .is-text .stat-row .s .n,
    .coll-card .cutoff-row .v,
    .composite .comp-row .pct,
    .pat-card .stats-3 .s .n,
    .pattern-footer .item .big,
    .pin-card .count,
    .donut-rows .vl,
    .pf-cell .pv,
    .fss b,
    .counsellor-card .ccl-trust .t .n,
    .cc-price .now,
    .pat-card .stats-3 .n,
    .col-card .stat b,
    .met .val,
    .flip-back .sc-percentile,
    .flip-back .sc-breakdown b,
    .ohs-n {
      font-family: var(--serif) !important;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
      letter-spacing: -1.2px;
      font-weight: 900;
    }

    /* Bigger display numbers want even tighter tracking */
    .metric .n,
    .met .val,
    .flip-back .sc-percentile,
    .ohs-n {
      letter-spacing: -2.2px !important;
    }

    .hero-stats .hs .n,
    .bp-card .num,
    .pattern-footer .item .big,
    .fee-card .total {
      letter-spacing: -1.6px !important;
      font-family: var(--serif) !important;
      font-variant-numeric: tabular-nums;
    }

    /* (Dark-glass hero-countdown override removed — chip now lives in #courses sec-head) */

    /* ---- Bigger headings, tighter tracking (fix "stretched feel") ---- */
    .sec h2 {
      font-size: 56px !important;
      letter-spacing: -2.2px !important;
      line-height: 1.02 !important;
      font-weight: 900 !important;
    }

    .sec h2 .accent,
    .sec.dark h2 .accent,
    .pin-card .ct-left h3 .acc,
    .pin-card.dk .ct-left h3 .acc,
    .pin-card.br .ct-left h3 .acc,
    .fs-text h3 .accent,
    .counsellor-card .ccl-left h2 .accent {
      color: var(--orange) !important;
      font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
      font-style: italic !important;
      font-weight: 600 !important;
      letter-spacing: -1px !important;
    }

    .sec h2 .serif {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      color: var(--orange);
    }

    @media (max-width:760px) {
      .sec h2 {
        font-size: 38px !important;
        letter-spacing: -1.3px !important;
      }
    }

    /* Hero h1 stays large, but tighten tracking and re-color the highlight */
    .hero h1 {
      font-size: 92px !important;
      letter-spacing: -3.5px !important;
      line-height: .94 !important;
    }

    .hero h1 .lite {
      font-size: 60px !important;
      letter-spacing: -2.2px !important;
      font-weight: 300 !important;
    }

    .hero h1 .yellow {
      color: var(--orange) !important;
    }

    .hero h1 .royal {
      color: var(--blue) !important;
    }

    .hero h1 .serif {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      color: #fff;
    }

    @media (max-width:760px) {
      .hero h1 {
        font-size: 42px !important;
        letter-spacing: -1.4px !important;
      }

      .hero h1 .lite {
        font-size: 28px !important;
      }
    }

    @media (max-width:480px) {
      .hero h1 {
        font-size: 40px !important;
        letter-spacing: -1.3px !important;
      }

      .hero h1 .lite {
        font-size: 26px !important;
      }

      .hero-title-line1 {
        white-space: normal !important;
      }
    }

    @media (max-width:380px) {
      .hero h1 {
        font-size: 34px !important;
        letter-spacing: -1.1px !important;
      }

      .hero h1 .lite {
        font-size: 22px !important;
      }

      .hero-title-accent {
        font-size: 52px !important;
      }
    }

    /* Section eyebrow gets bolder to match Results page */
    .sec .eyebrow,
    .sec-head .eyebrow {
      font-size: 11px !important;
      font-weight: 800 !important;
      letter-spacing: 2px !important;
      color: var(--orange) !important;
      text-transform: none !important;
    }

    /* ---- Buttons: orange primary, royal-blue accent secondary ---- */
    .hero .btn.p {
      background: var(--orange) !important;
      color: #fff !important;
      box-shadow: 0 6px 22px rgba(254, 168, 47, .4);
    }

    .hero .btn.p:hover {
      background: var(--orange-d) !important;
    }

    .sub-nav a:hover,
    .sub-nav a.act {
      color: var(--orange-d) !important;
      border-bottom-color: var(--orange) !important;
    }

    .sub-nav .cta {
      background: var(--orange) !important;
      color: #fff !important;
    }

    .sub-nav .cta:hover {
      background: var(--orange-d) !important;
    }

    /* Hero supporting marquee turns into orange band, royal contrast */
    .marquee {
      background: var(--orange) !important;
      color: var(--ink) !important;
      border-bottom: 1px solid var(--orange-d) !important;
    }

    .marquee-track span::before {
      color: var(--ink) !important;
    }

    /* ============ ROYAL ALTERNATION: section backgrounds ============ */
    /* Pattern: light --> dark --> light --> dark across the page */
    /* Already-dark sections keep their dark; we add new dark bands. */

    #pattern {
      background: var(--navy);
      color: #fff;
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    #pattern .sec-inner,
    #pattern>* {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    #pattern h2,
    #pattern h3,
    #pattern h4 {
      color: #fff !important;
    }

    #pattern p {
      color: rgba(255, 255, 255, .82) !important;
    }

    #pattern .pat-card {
      background: rgba(255, 255, 255, .04) !important;
      border: 1px solid rgba(255, 255, 255, .1) !important;
      color: #fff;
    }

    #pattern .pat-card h3,
    #pattern .pat-card h4 {
      color: #fff !important;
    }

    #pattern .pat-card p {
      color: rgba(255, 255, 255, .78) !important;
    }

    #pattern .pat-card .stats-3 .s .n,
    #pattern .pat-card .stats-3 .n {
      color: var(--orange) !important;
    }

    #pattern .pattern-footer {
      border-top: 1px solid rgba(255, 255, 255, .1);
    }

    #pattern .pattern-footer .item .lbl {
      color: rgba(255, 255, 255, .7) !important;
    }

    #pattern .pattern-footer .item .big {
      color: var(--orange) !important;
    }

    #testimonials {
      background: var(--ink) !important;
      color: #fff;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .testi-slim {
      background: var(--ink) !important;
    }

    .testi-slim>.sec-head h2,
    .testi-slim>.sec-head h3,
    .testi-slim>.sec-head .sub-h,
    .testi-slim>.sec-head p {
      color: #fff !important;
    }

    .testi-slim>.sec-head .sub-h,
    .testi-slim>.sec-head p {
      color: rgba(255, 255, 255, .82) !important;
    }

    .testi-slim .right-link {
      color: var(--orange) !important;
      border-bottom-color: var(--orange) !important;
    }

    /* Testimonials marquee lives in a SIBLING section -- target it directly so
   the dark band carries through and gradient fades blend with --ink */
    .testi-marquee-section {
      background: var(--ink) !important;
      padding-top: 8px !important;
      padding-bottom: 60px !important;
    }

    .testi-marquee-section .testi-rows-wrap::before {
      background: linear-gradient(90deg, var(--ink), transparent) !important;
    }

    .testi-marquee-section .testi-rows-wrap::after {
      background: linear-gradient(270deg, var(--ink), transparent) !important;
    }

    #courses-again {
      background: var(--ink) !important;
      color: #fff;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      overflow-x: hidden;
    }

    #courses-again>* {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 22px;
      padding-right: 22px;
    }

    #courses-again>.sec-head h2,
    #courses-again>.sec-head h3,
    #courses-again>.sec-head .sub-h,
    #courses-again>.sec-head p {
      color: #fff !important;
    }

    #courses-again>.sec-head .sub-h,
    #courses-again>.sec-head p {
      color: rgba(255, 255, 255, .82) !important;
    }

    /* Course cards stay as white tiles -- inner content stays dark for legibility */
    #courses-again .c-card,
    #courses-again .course-card {
      background: #fff !important;
      color: var(--text) !important;
    }

    #courses-again .c-card h3,
    #courses-again .c-card h4,
    #courses-again .course-card h3,
    #courses-again .course-card h4 {
      color: var(--ink) !important;
    }

    #courses-again .c-card p,
    #courses-again .course-card p {
      color: #444 !important;
    }

    #courses-again .right-link {
      color: var(--orange) !important;
      border-bottom-color: var(--orange) !important;
    }

    #courses-again .pill {
      background: rgba(255, 255, 255, .06) !important;
      border: 1px solid rgba(255, 255, 255, .16) !important;
      color: #fff !important;
    }

    #courses-again .pill.act {
      background: var(--orange) !important;
      border-color: var(--orange) !important;
      color: var(--ink) !important;
    }

    #faculty {
      background: var(--navy) !important;
      color: #fff;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #faculty>* {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 22px;
      padding-right: 22px;
    }

    .faculty-slim {
      background: var(--navy) !important;
    }

    /* Section-level head text only -- do NOT cascade into tile cards */
    .faculty-slim>.sec-head h2,
    .faculty-slim>.sec-head h3,
    .faculty-slim>.sec-head .sub-h,
    .faculty-slim>.sec-head p {
      color: #fff !important;
    }

    .faculty-slim>.sec-head .sub-h,
    .faculty-slim>.sec-head p {
      color: rgba(255, 255, 255, .82) !important;
    }

    /* Faculty rail scrollbar visible on dark */
    .faculty-rail::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, .06) !important;
    }

    .faculty-rail::-webkit-scrollbar-thumb {
      background: rgba(254, 168, 47, .5) !important;
    }

    /* Faculty tiles stay as crisp white cards on navy -- restore inner text colors */
    .fac-tile {
      background: #fff !important;
      border: 1px solid rgba(255, 255, 255, .1) !important;
    }

    .fac-tile:hover {
      border-color: var(--orange) !important;
      box-shadow: 0 12px 28px rgba(254, 168, 47, .25) !important;
    }

    .fac-tile .fac-ph {
      background: linear-gradient(135deg, var(--ink) 0%, var(--blue) 100%) !important;
    }

    .fac-tile h4 {
      color: var(--ink) !important;
    }

    .fac-tile .fac-role {
      color: var(--blue) !important;
    }

    .fac-tile .fac-creds span {
      color: #444 !important;
      background: var(--bg-warm) !important;
    }

    .fac-btn {
      background: rgba(255, 255, 255, .08) !important;
      color: #fff !important;
      border: 1px solid rgba(255, 255, 255, .18) !important;
    }

    .fac-btn:hover {
      background: var(--orange) !important;
      border-color: var(--orange) !important;
      color: var(--ink) !important;
    }

    /* Light sections that previously felt washed out get a warm cream tint */
    #syllabus,
    #colleges,
    #dates,
    #resources,
    #faq {
      background: var(--bg-warm);
    }

    #overview {
      background: #fff;
    }

    #courses {
      background: #fff;
    }

    /* ---- Kill "claudy box" feeling: flatter cards on dark sections, ----
   ---- orange edge accents instead of soft rounded shadows.           */
    .sec.dark .craft-card,
    .sec.dark .pin-card,
    .sec.dark .bp-card,
    .sec.dark .metric {
      background: rgba(255, 255, 255, .04) !important;
      border: 1px solid rgba(255, 255, 255, .1) !important;
      border-radius: 8px !important;
      box-shadow: none !important;
    }

    .sec.dark .craft-card:hover,
    .sec.dark .bp-card:hover {
      border-color: var(--orange) !important;
    }

    /* Light sections: trim shadows so cards read as flat tiles, not bubbles */
    .craft-card,
    .c-card,
    .coll-card,
    .col-card,
    .tcar-card,
    .audit-card,
    .trust-card,
    .fee-card,
    .f-card,
    .r-card,
    .faq-card,
    .t-card,
    .testimonial,
    .tile,
    .fac-card {
      box-shadow: 0 1px 3px rgba(15, 15, 28, .06) !important;
      border-radius: 10px !important;
    }

    .craft-card:hover,
    .c-card:hover,
    .coll-card:hover,
    .col-card:hover {
      box-shadow: 0 4px 14px rgba(254, 168, 47, .18) !important;
      border-color: var(--orange) !important;
      transform: translateY(-2px);
    }

    /* ---- Solid, single-coloured icon system (per brand manual) ---- */
    .fi {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      background: var(--orange);
      color: #fff !important;
      border-radius: 50%;
      font-size: 10px !important;
      font-weight: 900;
      margin-right: 8px;
      flex-shrink: 0;
      vertical-align: -3px;
    }

    .tb-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      color: var(--orange);
      font-size: 11px;
      font-weight: 900;
      margin-right: 5px;
    }

    /* Top-nav SVG icons inherit nav text colour and stay subtle */
    .tn .right .ico svg {
      display: block;
    }

    .tn .right .ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .85);
      transition: color .15s;
      cursor: pointer;
    }

    .tn .right .ico:hover {
      color: var(--orange);
    }

    /* Why-CATKing pin-card dark variants on the new royal background */
    .pin-card.dk {
      background: var(--navy) !important;
      border: 1px solid rgba(254, 168, 47, .18) !important;
    }

    .pin-card.dk .acc {
      color: var(--orange) !important;
    }

    /* Counter-balance: any leftover .gold accents read as orange now */
    .hero .vid-tag .dot,
    .hero .eyebrow .pip,
    .tn .right .av {
      background: var(--orange) !important;
    }

    /* Stat blocks on dark hero want bigger, bolder numbers without monospace stretch */
    .hero-stats .hs .n {
      font-family: var(--serif) !important;
      font-size: 42px !important;
      font-weight: 900 !important;
      letter-spacing: -1.8px !important;
      color: var(--orange) !important;
      line-height: 1;
    }

    .hero-stats .hs .l {
      font-size: 11px;
      letter-spacing: 1.4px;
      color: rgba(255, 255, 255, .7);
      text-transform: none;
      font-weight: 700;
      margin-top: 6px;
    }

    /* Trust badges on hero: cleaner, no claudy box look */
    .trust-row .tb {
      background: rgba(255, 255, 255, .06) !important;
      border: 1px solid rgba(255, 255, 255, .14) !important;
      border-radius: 6px !important;
      padding: 7px 12px !important;
      box-shadow: none !important;
      font-size: 11px;
      letter-spacing: .3px;
    }

    /* Final CTA / counsellor band: deep ink with orange edge */
    #counsellor {
      background: var(--ink) !important;
    }

    #counsellor .counsellor-card {
      border-top: 3px solid var(--orange) !important;
    }

    /* End royal theme overrides */

    /* Kill duplicate checkmark: when .fi span carries the icon, suppress the
   ::before that originally drew a separate ✓ */
    .cc-feats li {
      padding-left: 0 !important;
    }

    .cc-feats li::before {
      content: "" !important;
      display: none !important;
    }

    .c-card .body .feats div::before {
      content: "" !important;
    }

    /* =================================================================
   v4 FINAL CASCADE
   1. New centered hero (NMAT-style, video bg, italic Cormorant accent)
   2. Slim course tiles (Featured Courses row only)
   3. Global tile spacing tightening
   4. Font legibility upgrade
   5. Mobile responsive pass
   ================================================================= */

    /* ---- 1. HERO: centered, large, with local video bg ---- */
    .hero {
      position: relative !important;
      min-height: auto !important;
      height: auto !important;
      background: var(--ink, #0f0f1c) !important;
      color: #fff;
      overflow: hidden;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      padding: 96px 0 64px !important;
    }

    .hero-video {
      position: absolute !important;
      inset: 0 !important;
      z-index: 0 !important;
      overflow: hidden;
      pointer-events: none;
      display: block !important;
    }

    .hero-video video,
    .hero-video iframe {
      position: absolute !important;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      opacity: .78 !important;
      filter: saturate(.85) brightness(.78);
      border: 0;
      pointer-events: none;
      animation: heroZoom 18s ease-in-out infinite alternate;
    }

    @keyframes heroZoom {
      from {
        transform: scale(1.0);
      }

      to {
        transform: scale(1.06);
      }
    }

    .hero-overlay {
      position: absolute !important;
      inset: 0 !important;
      z-index: 1 !important;
      background: linear-gradient(to bottom, rgba(8, 12, 20, .55) 0%, rgba(8, 12, 20, .18) 35%, rgba(8, 12, 20, .25) 60%, rgba(8, 12, 20, .72) 85%, rgba(8, 12, 20, 1) 100%) !important;
    }

    .hero-overlay-bottom {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(8, 12, 20, .55) 100%);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 880px;
      padding: 0 32px;
      margin-top: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(8, 12, 20, .55);
      border: 1px solid rgba(255, 255, 255, .25);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 10px 22px;
      border-radius: 50px;
      margin-bottom: 30px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-family: 'DM Sans', sans-serif;
      animation: fadeUp .8s ease both;
    }

    .hero-badge::before {
      content: '';
      width: 7px;
      height: 7px;
      background: var(--orange);
      border-radius: 50%;
      animation: hpulse 1.8s infinite;
    }

    @keyframes hpulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: .5;
        transform: scale(1.4);
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

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

    /* The big two-line title: white DM Sans + Cormorant italic orange */
    .hero-title-line1 {
      display: block;
      white-space: nowrap;
    }

    .hero-title {
      font-family: 'DM Sans', sans-serif !important;
      font-size: clamp(42px, 6.6vw, 76px) !important;
      font-weight: 800 !important;
      line-height: 1.0 !important;
      color: #fff !important;
      margin: 0 0 4px !important;
      letter-spacing: -1.8px !important;
      text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
      animation: fadeUp .8s .15s ease both;
    }

    .hero-title-accent {
      display: block;
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-style: italic !important;
      font-weight: 600 !important;
      font-size: clamp(54px, 8.6vw, 98px) !important;
      color: var(--orange) !important;
      line-height: 0.98 !important;
      letter-spacing: -1px !important;
      margin-top: 4px;
    }

    .hero-title-accent .hero-div {
      display: inline-block;
      font-style: normal;
      color: rgba(254, 168, 47, .45);
      font-weight: 300;
      font-size: .7em;
      vertical-align: middle;
      margin: 0 .15em;
      transform: translateY(-.06em);
    }

    .hero-sub {
      font-size: clamp(16px, 1.7vw, 19px) !important;
      color: rgba(232, 235, 242, .88) !important;
      margin: 18px auto 26px !important;
      max-width: 620px !important;
      line-height: 1.6 !important;
      font-weight: 400 !important;
      text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
      animation: fadeUp .8s .35s ease both;
    }

    .hero-sub strong {
      color: #fff;
      font-weight: 700;
    }

    /* Pill CTAs */
    .hero-ctas {
      display: flex !important;
      gap: 14px !important;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 24px !important;
      animation: fadeUp .8s .5s ease both;
    }

    .hero-ctas .btn-primary {
      background: var(--orange) !important;
      color: #0f0f1c !important;
      border-radius: 50px !important;
      padding: 16px 36px !important;
      font-size: 14.5px !important;
      font-weight: 800 !important;
      letter-spacing: .2px;
      box-shadow: 0 6px 24px rgba(254, 168, 47, .36) !important;
      transition: all .2s;
      font-family: 'DM Sans', sans-serif !important;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 0 !important;
    }

    .hero-ctas .btn-primary:hover {
      background: var(--orange-d) !important;
      color: #0f0f1c !important;
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(254, 168, 47, .5) !important;
    }

    .hero-ctas .btn-outline {
      border-radius: 50px !important;
      border: 1.5px solid rgba(255, 255, 255, .55) !important;
      color: #fff !important;
      padding: 16px 36px !important;
      font-size: 14.5px !important;
      font-weight: 700 !important;
      background: rgba(255, 255, 255, .06) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: all .2s;
      font-family: 'DM Sans', sans-serif !important;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero-ctas .btn-outline:hover {
      border-color: #fff !important;
      background: rgba(255, 255, 255, .14) !important;
      color: #fff !important;
      transform: translateY(-2px);
    }

    /* Trust chip row */
    .hero .trust-row {
      display: flex !important;
      gap: 10px 18px !important;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 28px !important;
      border: 0 !important;
      padding: 0 !important;
      animation: fadeUp .8s .65s ease both;
    }

    .hero .tb {
      display: inline-flex !important;
      align-items: center;
      gap: 7px;
      background: rgba(8, 12, 20, .55) !important;
      border: 1px solid rgba(255, 255, 255, .18) !important;
      color: rgba(255, 255, 255, .92) !important;
      padding: 8px 16px !important;
      border-radius: 30px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      letter-spacing: .2px !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      font-family: 'DM Sans', sans-serif;
    }

    .hero .tb .tb-ico {
      font-size: 13px;
      color: var(--orange);
      font-weight: 900;
    }

    /* Stats row */
    .hero-stats {
      display: flex !important;
      gap: 48px !important;
      flex-wrap: wrap;
      justify-content: center !important;
      align-items: flex-start;
      padding-top: 22px !important;
      border-top: 1px solid rgba(255, 255, 255, .14) !important;
      width: 100%;
      max-width: 880px;
      animation: fadeUp .8s .8s ease both;
    }

    .hero-stats .hs {
      text-align: center;
      min-width: 130px;
    }

    .hero-stats .hs .n {
      font-size: clamp(30px, 3.4vw, 40px) !important;
      font-weight: 800 !important;
      color: var(--orange) !important;
      font-family: 'DM Sans', sans-serif !important;
      letter-spacing: -1.2px !important;
      line-height: 1 !important;
      font-variant-numeric: tabular-nums;
    }

    .hero-stats .hs .l {
      font-size: 11px !important;
      letter-spacing: 1.2px !important;
      opacity: .78 !important;
      margin-top: 10px !important;
      text-transform: uppercase !important;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700 !important;
      color: rgba(255, 255, 255, .78) !important;
    }

    /* CAT 2026 countdown chip — placed in #courses sec-head above View All Courses link */
    .courses-head-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 14px;
    }

    .hero-countdown {
      display: inline-block !important;
      position: relative;
      background: var(--orange) !important;
      color: var(--ink) !important;
      border: 0 !important;
      padding: 14px 22px !important;
      border-radius: 12px !important;
      box-shadow: 0 8px 22px rgba(254, 168, 47, .28) !important;
      font-family: 'DM Sans', sans-serif !important;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      text-align: center;
    }

    .hero-countdown .cd-line {
      display: block;
      color: var(--ink);
      font-weight: 800;
      text-align: center;
    }

    .hero-countdown .cd-num {
      font-size: 26px;
      font-weight: 900;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.5px;
      display: inline-block;
      vertical-align: baseline;
      line-height: 1;
      margin: 0 3px;
    }

    .hero-countdown .cd-batch-date {
      font-size: 16px;
      font-weight: 900;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      margin-left: 3px;
    }

    .hero-countdown .cd-line-batch {
      border-top: 1px solid rgba(0, 0, 0, .18);
      padding-top: 7px;
      margin-top: 5px;
    }

    @media (max-width:768px) {

      /* On mobile the sec-head stacks; align chip to the start so it sits left under the heading */
      .courses-head-right {
        align-items: flex-start;
        width: 100%;
      }
    }

    /* Hide ALL old hero h1 / .yellow / .lite / .ctas / .btn variants that conflict */
    .hero h1.hero-title {}

    /* no-op anchor; keeps specificity */
    .hero h1 .lite,
    .hero h1 .yellow {
      display: none !important;
    }

    .hero .vid-tag,
    .hero .mute-btn {
      display: none !important;
    }

    .hero-bg {
      display: none !important;
    }

    .hero-inner {
      display: none !important;
    }

    /* ---- 2. SLIM COURSE TILES (Featured Courses row only - section #courses) ---- */
    #courses .courses-grid {
      gap: 18px !important;
    }

    #courses .course-card {
      padding: 0 !important;
      border-radius: 14px !important;
      border: 1px solid var(--border) !important;
      background: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    #courses .course-card .cc-thumb {
      display: none !important;
    }

    #courses .course-card .cc-body {
      padding: 22px 22px 18px !important;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    #courses .course-card.rec {
      border-color: var(--orange) !important;
      box-shadow: 0 8px 28px rgba(254, 168, 47, .18);
      position: relative;
    }

    #courses .course-card.rec::before {
      content: "MOST POPULAR";
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--orange);
      color: #0f0f1c;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1.2px;
      padding: 5px 14px;
      border-radius: 0 0 8px 8px;
      font-family: 'DM Sans', sans-serif;
      z-index: 2;
    }

    #courses .course-card.rec .cc-body {
      padding-top: 30px !important;
    }

    #courses .course-card h4 {
      font-size: 20px !important;
      font-weight: 800 !important;
      color: var(--ink) !important;
      margin-bottom: 6px !important;
      letter-spacing: -.4px !important;
      line-height: 1.2 !important;
    }

    #courses .course-card .cc-cap {
      font-size: 13.5px !important;
      color: var(--muted) !important;
      line-height: 1.5 !important;
      margin-bottom: 18px !important;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    #courses .course-card .cc-feats {
      display: none !important;
    }

    #courses .course-card .cc-price {
      padding: 14px 0 !important;
      border-top: 1px dashed var(--border) !important;
      border-bottom: 1px dashed var(--border) !important;
      margin-bottom: 14px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-top: auto !important;
    }

    #courses .course-card .cc-price .now {
      font-size: 24px !important;
      font-weight: 900 !important;
      color: var(--ink) !important;
      font-family: 'DM Sans', sans-serif !important;
      letter-spacing: -.6px !important;
    }

    #courses .course-card .cc-price .was {
      font-size: 13px !important;
      color: var(--muted) !important;
      text-decoration: line-through !important;
      margin-left: 8px !important;
      font-weight: 600 !important;
    }

    #courses .course-card .cc-price .off {
      background: var(--orange-l) !important;
      color: var(--orange-d) !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      padding: 4px 10px !important;
      border-radius: 6px !important;
      letter-spacing: .4px;
    }

    #courses .course-card .cc-btns {
      display: flex !important;
      gap: 10px !important;
      margin-top: 0 !important;
      align-items: stretch !important;
    }

    #courses .course-card .cc-b,
    #courses-again .course-card .cc-b {
      flex: 1;
      text-align: center;
      padding: 13px 14px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
      letter-spacing: .3px !important;
      text-transform: none !important;
      cursor: pointer;
      transition: all .15s;
      font-family: 'DM Sans', sans-serif !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1.2 !important;
      min-height: 44px !important;
      box-sizing: border-box !important;
    }

    #courses .course-card .cc-b.p,
    #courses-again .course-card .cc-b.p {
      background: var(--orange) !important;
      color: #fff !important;
      border: 0 !important;
    }

    #courses .course-card .cc-b.p:hover,
    #courses-again .course-card .cc-b.p:hover {
      background: var(--orange-d) !important;
    }

    #courses .course-card .cc-b.s,
    #courses-again .course-card .cc-b.s {
      background: transparent !important;
      color: var(--ink) !important;
      border: 1.5px solid var(--border) !important;
    }

    #courses .course-card .cc-b.s:hover,
    #courses-again .course-card .cc-b.s:hover {
      border-color: var(--ink) !important;
      background: var(--bg) !important;
    }

    /* ---- 3. SECTION + TILE TIGHTENING (everywhere) ---- */
    .sec {
      padding: 64px 22px !important;
    }

    .sec h2 {
      font-size: clamp(32px, 4.2vw, 46px) !important;
      letter-spacing: -1.4px !important;
      line-height: 1.06 !important;
    }

    .sec .sub-h {
      font-size: 15px !important;
      line-height: 1.6 !important;
      max-width: 720px;
    }

    .sec-head {
      margin-bottom: 28px !important;
      gap: 24px !important;
    }

    .prog-breather {
      padding: 48px 22px !important;
    }

    .prog-breather h3,
    .prog-breather .prog-breather-text {
      font-size: clamp(20px, 2.4vw, 26px) !important;
      line-height: 1.45 !important;
    }

    /* Why CATKing pin cards: reduce overall padding, body text up to 14.5 */
    .pin-card {
      padding: 36px 32px !important;
      gap: 42px !important;
    }

    .pin-card h3 {
      font-size: clamp(24px, 2.8vw, 32px) !important;
      letter-spacing: -.6px !important;
    }

    .pin-card p,
    .pin-card ul li {
      font-size: 14.5px !important;
      line-height: 1.6 !important;
    }

    .pin-card .tag {
      font-size: 10.5px !important;
      letter-spacing: 1.4px !important;
      padding: 6px 12px !important;
    }

    .pin-card .count {
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 1.5px;
    }

    /* Metrics tiles */
    .met {
      padding: 24px 18px !important;
    }

    .met .val {
      font-size: clamp(34px, 4.2vw, 52px) !important;
      letter-spacing: -1.5px !important;
    }

    .met .lab {
      font-size: 11.5px !important;
      letter-spacing: .8px !important;
      font-weight: 700 !important;
    }

    /* Pattern cards */
    .pat-card {
      padding: 24px 22px !important;
    }

    .pat-card h4 {
      font-size: 18px !important;
      letter-spacing: -.3px;
    }

    .pat-card .stats-3 .n {
      font-size: 24px !important;
      font-weight: 900 !important;
    }

    .pat-card .stats-3 .l {
      font-size: 10.5px !important;
      letter-spacing: .6px;
    }

    .pat-card .topics {
      font-size: 12.5px !important;
      line-height: 1.6 !important;
    }

    /* Free resources cards */
    .club {
      padding: 22px 20px !important;
    }

    .club h5 {
      font-size: 16px !important;
      font-weight: 800 !important;
    }

    .club p {
      font-size: 13px !important;
      line-height: 1.55 !important;
    }

    /* News cards */
    .news-card .nc-body {
      padding: 20px !important;
    }

    .news-card h5 {
      font-size: 15.5px !important;
      line-height: 1.35 !important;
    }

    .news-card .nc-exc {
      font-size: 13px !important;
      line-height: 1.55 !important;
    }

    /* FAQ */
    .fq summary {
      font-size: 15.5px !important;
      padding: 18px 22px !important;
      font-weight: 700 !important;
    }

    .fq-a {
      font-size: 14px !important;
      line-height: 1.65 !important;
      padding: 0 22px 20px !important;
    }

    /* Course-variant cards (#courses-again section) - keep richer detail per user spec, just tighten */
    #courses-again .course-card {
      padding: 0 !important;
    }

    #courses-again .course-card .cc-body {
      padding: 22px !important;
      display: flex !important;
      flex-direction: column !important;
    }

    #courses-again .course-card .cc-feats li {
      font-size: 13px !important;
      line-height: 1.5 !important;
    }

    #courses-again .course-card .cc-price {
      margin-top: auto !important;
    }

    #courses-again .course-card .cc-btns {
      display: flex !important;
      gap: 10px !important;
      align-items: stretch !important;
    }

    #courses-again .course-card .cc-b {
      flex: 1;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1.2 !important;
      min-height: 44px !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 13px 14px !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
      border-radius: 8px !important;
    }

    /* College tiles (8 already, just tighten) */
    .col-card {
      padding: 20px 18px !important;
    }

    .col-card h4 {
      font-size: 16px !important;
    }

    .col-card .stats {
      padding: 12px 0 !important;
      margin-bottom: 12px !important;
    }

    .col-card .stat {
      font-size: 12px !important;
    }

    .col-card .place-strip {
      font-size: 11px !important;
      margin-bottom: 12px !important;
    }

    .col-card .col-mono {
      width: 46px !important;
      height: 46px !important;
      font-size: 13px !important;
      margin-bottom: 12px !important;
    }

    /* Counsellor card */
    .counsellor-card {
      padding: 48px 36px !important;
    }

    .counsellor-card h2 {
      font-size: clamp(28px, 3.6vw, 40px) !important;
    }

    .counsellor-card p {
      font-size: 14.5px !important;
      line-height: 1.6 !important;
    }

    /* ---- 4. MOBILE RESPONSIVE PASS ---- */
    @media (max-width:900px) {
      body {
        font-size: 15.5px;
      }

      .sec {
        padding: 48px 18px !important;
      }

      .sec h2 {
        font-size: 32px !important;
        letter-spacing: -1px !important;
      }

      .sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px !important;
      }

      .prog-breather {
        padding: 36px 18px !important;
      }

      .prog-breather h3 {
        font-size: 18px !important;
        line-height: 1.5 !important;
      }

      /* Hero on mobile */
      .hero {
        padding: 80px 0 50px !important;
      }

      .hero-content {
        margin-top: 0;
        padding: 0 18px;
      }

      .hero-title {
        font-size: 38px !important;
        letter-spacing: -1px !important;
      }

      .hero-title-accent {
        font-size: 46px !important;
      }

      .hero-sub {
        font-size: 15px !important;
        margin: 14px auto 22px !important;
      }

      .hero-ctas {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-bottom: 22px !important;
      }

      .hero-ctas .btn-primary,
      .hero-ctas .btn-outline {
        width: 100% !important;
        justify-content: center;
        padding: 14px 22px !important;
      }

      .hero .trust-row {
        gap: 8px !important;
        margin-bottom: 22px !important;
      }

      .hero .tb {
        font-size: 11px !important;
        padding: 6px 12px !important;
      }

      .hero-stats {
        gap: 24px !important;
        padding-top: 18px !important;
      }

      .hero-stats .hs {
        min-width: 0;
        flex: 1 1 40%;
      }

      .hero-stats .hs .n {
        font-size: 26px !important;
      }

      .hero-stats .hs .l {
        font-size: 9.5px !important;
        letter-spacing: .8px !important;
      }

      /* Slim course cards: 1 col on mobile, comfortable touch targets */
      #courses .courses-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      #courses .course-card .cc-body {
        padding: 20px !important;
      }

      /* Course variants 1-col */
      #courses-again .courses-grid {
        grid-template-columns: 1fr !important;
      }

      /* Pin cards: stack image+text */
      .pin-card {
        padding: 28px 22px !important;
        gap: 20px !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
      }

      .pin-card h3 {
        font-size: 22px !important;
      }

      .pin-card .md {
        order: 0 !important;
      }

      /* Pattern: stack */
      .pattern-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      /* Metrics: 2 col */
      .metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
      }

      .met {
        padding: 22px 16px !important;
      }

      /* Faculty rail: smaller tiles */
      .fac-tile {
        min-width: 170px !important;
      }

      /* News: 1 col */
      .news-grid {
        grid-template-columns: 1fr !important;
      }

      /* FAQ */
      .fq summary {
        font-size: 14px !important;
        padding: 14px 16px !important;
      }

      .fq-a {
        font-size: 13px !important;
        padding: 0 16px 16px !important;
      }

      /* Top nav: hide some links, show drawer */
      .tn .links a:nth-child(n+5) {
        display: none;
      }

      /* Sub-nav: smaller padding */
      .sub-nav a {
        padding: 14px 10px !important;
        font-size: 10.5px !important;
      }

      /* Counsellor card: stack */
      .counsellor-card {
        padding: 32px 22px !important;
      }

      .counsellor-card h2 {
        font-size: 24px !important;
      }

      /* Popup: full-width with margins */
      .anc-pop {
        width: calc(100vw - 28px) !important;
        max-width: none !important;
        padding: 26px 20px 22px !important;
      }

      .anc-pop h3 {
        font-size: 19px !important;
      }
    }

    @media (max-width:560px) {
      .hero-title {
        font-size: 36px !important;
      }

      .hero-title-accent {
        font-size: 40px !important;
      }

      .hero-stats {
        gap: 18px !important;
      }

      .hero-stats .hs .n {
        font-size: 22px !important;
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .hero-video video {
        animation: none !important;
      }

      .hero-title,
      .hero-title-accent,
      .hero-sub,
      .hero-ctas,
      .trust-row,
      .hero-stats {
        animation: none !important;
      }
    }

    /* ==================================================================
   POLISH applied after main override block
   1. Pattern dark-section text contrast
   2. Eyebrow pill redesign (01/02/03)
   3. Free Resources 2-2-2 colour distribution
   4. Free Resources icon refresh (real SVG icons)
   5. Whitespace + alignment tightening
   ================================================================== */

    /* ---- 1. PATTERN: fix muted-text-on-dark-bg contrast issue ---- */
    #pattern .pat-card .sub {
      color: rgba(255, 255, 255, .72) !important;
      font-size: 13px !important;
    }

    #pattern .pat-card .topics {
      color: rgba(255, 255, 255, .78) !important;
      font-size: 12.5px !important;
      line-height: 1.6 !important;
    }

    #pattern .pat-card .topics b {
      color: #fff !important;
      font-weight: 800 !important;
    }

    #pattern .pat-card .stats-3 .l {
      color: var(--muted) !important;
      /* on white inner card → keep muted, just confirm */
    }

    /* ---- 2. EYEBROW PILLS REDESIGN (01/02/03) ----
   Light section default: orange-l ground, orange-d numeral, italic Cormorant.
   Dark section (#pattern): tinted orange ring, orange numeral, transparent ground.
   ALL three pills now share the same brand language - no more off-brand blue. */
    .pat-card .num {
      width: 38px !important;
      height: 38px !important;
      border-radius: 50% !important;
      background: var(--orange-l) !important;
      color: var(--orange-d) !important;
      border: 1.5px solid var(--orange) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
      font-style: italic !important;
      font-weight: 600 !important;
      font-size: 17px !important;
      letter-spacing: 0 !important;
      padding: 0 !important;
    }

    /* Override the per-nth-child colour rules so all pills are identical */
    .pat-card:nth-child(1) .num,
    .pat-card:nth-child(2) .num,
    .pat-card:nth-child(3) .num {
      background: var(--orange-l) !important;
      color: var(--orange-d) !important;
      border-color: var(--orange) !important;
    }

    /* Dark section variant - pills sit on navy bg */
    #pattern .pat-card .num,
    #pattern .pat-card:nth-child(1) .num,
    #pattern .pat-card:nth-child(2) .num,
    #pattern .pat-card:nth-child(3) .num {
      background: rgba(254, 168, 47, .14) !important;
      color: var(--orange) !important;
      border: 1.5px solid rgba(254, 168, 47, .55) !important;
    }

    /* While we're here, also retune the .cutoff-tag chip on dark bg so it pairs visually */
    #pattern .pat-card .cutoff-tag {
      background: rgba(255, 255, 255, .06) !important;
      color: rgba(255, 255, 255, .85) !important;
      border: 1px solid rgba(255, 255, 255, .12) !important;
      border-radius: 6px !important;
      padding: 4px 10px !important;
    }

    /* ---- 3. FREE RESOURCES - 2 BLACK + 2 BLUE + 2 ORANGE diagonal ----
   Override the cycling :nth-child(4n+X) rules with explicit per-position colours:
     1: BLUE   (Free CAT Mock)
     2: ORANGE (Doubt Forum)
     3: BLACK  (YouTube Channel)   ← was orange, changed
     4: BLACK  (Vocab Builder App)
     5: BLUE   (30-Day Study Plan)
     6: ORANGE (Cutoff Tracker)
   Visual rhythm: Row 1 = BLUE-ORANGE-BLACK, Row 2 = BLACK-BLUE-ORANGE
*/
    .clubs-grid .club:nth-child(1),
    .clubs-grid .club:nth-child(5) {
      background: var(--blue) !important;
      color: #fff !important;
    }

    .clubs-grid .club:nth-child(2),
    .clubs-grid .club:nth-child(6) {
      background: var(--orange) !important;
      color: #1a1a1a !important;
    }

    .clubs-grid .club:nth-child(3),
    .clubs-grid .club:nth-child(4) {
      background: var(--ink) !important;
      color: #fff !important;
    }

    /* Orange cards: dark text + dark-on-orange chip/icon */
    .clubs-grid .club:nth-child(2) h5,
    .clubs-grid .club:nth-child(6) h5 {
      color: #1a1a1a !important;
    }

    .clubs-grid .club:nth-child(2) p,
    .clubs-grid .club:nth-child(6) p {
      color: rgba(26, 26, 26, .78) !important;
    }

    .clubs-grid .club:nth-child(2) .cl-link,
    .clubs-grid .club:nth-child(6) .cl-link {
      color: #1a1a1a !important;
    }

    .clubs-grid .club:nth-child(2) .res-type,
    .clubs-grid .club:nth-child(6) .res-type {
      background: rgba(26, 26, 26, .16) !important;
      color: #1a1a1a !important;
    }

    .clubs-grid .club:nth-child(2) .cl-ico,
    .clubs-grid .club:nth-child(6) .cl-ico {
      background: rgba(26, 26, 26, .10) !important;
      color: #1a1a1a !important;
    }

    /* Black cards: confirm white text everywhere */
    .clubs-grid .club:nth-child(3) h5,
    .clubs-grid .club:nth-child(4) h5,
    .clubs-grid .club:nth-child(3) p,
    .clubs-grid .club:nth-child(4) p,
    .clubs-grid .club:nth-child(3) .cl-link,
    .clubs-grid .club:nth-child(4) .cl-link {
      color: #fff !important;
    }

    .clubs-grid .club:nth-child(3) p,
    .clubs-grid .club:nth-child(4) p {
      color: rgba(255, 255, 255, .78) !important;
    }

    .clubs-grid .club:nth-child(3) .res-type,
    .clubs-grid .club:nth-child(4) .res-type {
      background: rgba(255, 255, 255, .10) !important;
      color: #fff !important;
    }

    .clubs-grid .club:nth-child(3) .cl-ico,
    .clubs-grid .club:nth-child(4) .cl-ico {
      background: rgba(255, 255, 255, .10) !important;
      color: #fff !important;
    }

    /* ---- 4. .cl-ico container - switch from coloured square to subtle SVG slot ---- */
    .club .cl-ico {
      width: 42px !important;
      height: 42px !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-bottom: 14px !important;
      font-size: 0 !important;
      /* prevents stray text-content from old "â–¶" */
    }

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

    /* ---- 5. WHITESPACE / ALIGNMENT TIGHTENING ---- */
    .sec {
      padding: 56px 22px !important;
    }

    /* down from 64 */
    .sec-head {
      margin-bottom: 22px !important;
    }

    /* down from 28 */
    #syllabus .curr,
    #syllabus .syllabus-tabs {
      margin-top: 0 !important;
    }

    .testi-marquee-section {
      padding-bottom: 36px !important;
      padding-top: 0 !important;
    }

    /* down from 60/8 */
    #testimonials {
      padding-bottom: 32px !important;
    }

    .mid-cta {
      padding: 32px 22px !important;
    }

    /* tighten "Ready to start CAT 2026 prep" stripe */

    @media (max-width:900px) {
      .sec {
        padding: 48px 20px !important;
      }

      .testi-marquee-section {
        padding-bottom: 28px !important;
      }
    }

    @media (max-width:600px) {
      .sec {
        padding: 42px 18px !important;
      }

      .sec h2 {
        font-size: 28px !important;
      }

      .sec-head {
        margin-bottom: 24px !important;
      }
    }

    @media (max-width:380px) {
      .sec {
        padding: 38px 16px !important;
      }

      .sec h2 {
        font-size: 24px !important;
      }
    }

    /* ==================================================================
   POLISH solid icons, Title Case, hero trim, label sizing
   ================================================================== */

    /* ---- Solid SVG icons (replace stroke-based "AI emoji" feel) ---- */
    .club .cl-ico svg {
      width: 22px !important;
      height: 22px !important;
      fill: currentColor !important;
      stroke: none !important;
      display: block;
    }

    /* ---- Kill text-transform:uppercase across user-facing copy ----
   Acronyms that ARE legitimately uppercase (IIM, BLACKI, NMIMS, %ile, MBA, SC/ST,
   PwD, OBC, EWS, FMS, CAT, etc.) stay uppercase because they are typed that way
   in the markup. We only stop the CSS from FORCING uppercase on Title-Case copy. */
    .sub-nav a,
    .sub-nav .cta,
    .hero-stats .hs .l,
    .met .lab,
    .metric .l,
    .cl-link,
    .res-type,
    .club .cl-link,
    .clubs-grid .club .res-type,
    .clubs-grid .club .cl-link,
    .curr-mod .meta,
    .nc-meta,
    .counsellor-card .ccl-trust .t .l,
    .counsellor-card .ccl-left .eyebrow,
    .counsellor-card .ccl-ctas .btn,
    .tb,
    .btn-primary,
    .btn-outline,
    .hero .btn {
      text-transform: none !important;
      letter-spacing: .2px !important;
    }

    /* Restore tiny letter-spacing punch where it helps small all-caps acronyms (kept from
   prior styling) - but ONLY for the labels that contain a typed-uppercase acronym */
    .hero-stats .hs .l {
      font-weight: 700 !important;
    }

    .met .lab {
      font-weight: 700 !important;
    }

    /* ---- Trim hero TOP padding so stat labels are visible above the fold ---- */
    .hero {
      padding: 64px 0 56px !important;
    }

    @media (max-width:900px) {
      .hero {
        padding: 60px 0 44px !important;
      }
    }

    /* ---- MOBILE HERO LAYOUT FIX ----
   On small phones (≤480px) switch the hero from flex centering to block layout
   so .hero-content can reliably be 100% width without flex min-content overflow
   pushing it off-canvas. Also moves countdown to inline static position above the title. */
    @media (max-width:480px) {
      .hero {
        display: block !important;
        text-align: left !important;
        padding: 32px 0 32px !important;
      }

      .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 18px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
      }

      .hero-content>* {
        max-width: 100% !important;
      }

      .hero-sub {
        word-wrap: break-word;
      }
    }

    /* ---- Sub-nav 2-CTA group ---- */
    .sub-nav-ctas {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .sub-nav .cta {
      margin-left: 0 !important;
      padding: 9px 18px !important;
      border-radius: 6px !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      text-transform: none !important;
      letter-spacing: .2px !important;
      border-bottom: 0 !important;
      white-space: nowrap;
      transition: all .15s;
    }

    .sub-nav .cta-ghost {
      background: transparent !important;
      color: var(--ink) !important;
      border: 1.5px solid var(--border) !important;
    }

    .sub-nav .cta-ghost:hover {
      border-color: var(--ink) !important;
      background: var(--bg) !important;
    }

    .sub-nav .cta-buy {
      background: var(--orange) !important;
      color: #0f0f1c !important;
      border: 1.5px solid var(--orange) !important;
      box-shadow: 0 4px 12px rgba(254, 168, 47, .28);
    }

    .sub-nav .cta-buy:hover {
      background: var(--orange-d) !important;
      border-color: var(--orange-d) !important;
      transform: translateY(-1px);
    }

    @media (max-width:900px) {
      .sub-nav-ctas {
        position: sticky;
        right: 0;
        background: linear-gradient(90deg, transparent 0, #fff 18px);
        padding-left: 24px;
      }

      .sub-nav .cta {
        padding: 12px 16px !important;
        font-size: 12px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
      }
    }

    /* Sub-nav text links: Title Case (already typed that way in markup; remove uppercase force) */
    .sub-nav a {
      text-transform: none !important;
      font-size: 13px !important;
      letter-spacing: .1px !important;
      font-weight: 600 !important;
    }

    /* ==================================================================
   POLISH testimonial alignment + global contrast audit
   ================================================================== */

    /* ---- 1. TESTIMONIAL SECTION: full-bleed dark band with centered 1200px content ----
   Screenshot showed text touching viewport edges. Same fix pattern as #courses-again:
   make the SECTION full-width, then constrain INNER content to 1200px. */
    .testi-slim {
      background: var(--ink) !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 48px !important;
      padding-bottom: 14px !important;
    }

    .testi-slim>.sec-head {
      max-width: 1200px;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 32px !important;
      padding-right: 32px !important;
      margin-bottom: 8px !important;
    }

    .testi-marquee-section {
      background: var(--ink) !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .testi-marquee-section .testi-rows-wrap {
      max-width: 1400px !important;
      margin: 0 auto !important;
    }

    .testi-slim>.sec-head .right-link {
      align-self: flex-end;
      margin-bottom: 6px;
    }

    @media (max-width:900px) {
      .testi-slim>.sec-head {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }

      .testi-slim {
        padding-top: 36px !important;
      }
    }

    @media (max-width:560px) {
      .testi-slim>.sec-head {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
    }

    /* ---- 2. MID-CTA stripe: never let text touch viewport edges ---- */
    .mid-cta {
      padding-left: 32px !important;
      padding-right: 32px !important;
    }

    @media (max-width:900px) {
      .mid-cta {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }
    }

    /* ---- 3. CONTRAST: testimonial section text on dark ---- */
    .testi-slim .sub-h {
      color: rgba(255, 255, 255, .78) !important;
    }

    .testi-slim h2 {
      color: #fff !important;
    }

    .testi-slim h2 .accent {
      color: var(--orange) !important;
    }

    /* ---- 4. CONTRAST: courses-again pills on dark ---- */
    #courses-again .pill {
      color: rgba(255, 255, 255, .85) !important;
      background: rgba(255, 255, 255, .06) !important;
      border: 1px solid rgba(255, 255, 255, .18) !important;
    }

    #courses-again .pill.act {
      background: var(--orange) !important;
      color: var(--ink) !important;
      border-color: var(--orange) !important;
    }

    /* ---- 5. CONTRAST: hero stat labels and trust chips ---- */
    .hero-stats .hs .l {
      color: rgba(255, 255, 255, .78) !important;
    }

    .hero .tb {
      color: rgba(255, 255, 255, .92) !important;
      background: rgba(255, 255, 255, .08) !important;
      border: 1px solid rgba(255, 255, 255, .18) !important;
    }

    .hero .tb-ico {
      color: var(--orange) !important;
    }

    /* ---- 6. CONTRAST: dates timeline - section is LIGHT (sec.bg), keep default colors ---- */
    /* No override needed; #dates uses var(--bg) cream background with default dark text */

    /* ---- 7. CONTRAST: footer ---- */
    .footer-inner a {
      color: rgba(255, 255, 255, .72) !important;
    }

    .footer-inner a:hover {
      color: #fff !important;
    }

    .footer-inner h4,
    .footer-inner h5 {
      color: #fff !important;
    }

    /* ---- 8. EDGE GUARDRAIL: every full-bleed dark section gets a consistent gutter ---- */
    .sec.dark>.sec-head,
    .testi-slim>.sec-head,
    #courses-again>.sec-head {
      padding-left: 32px !important;
      padding-right: 32px !important;
    }

    @media (max-width:900px) {

      .sec.dark>.sec-head,
      .testi-slim>.sec-head,
      #courses-again>.sec-head {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }
    }

    /* ==================================================================
   v6.0 PRODUCTION - top nav, mega menus, footer, new sections
   ================================================================== */

    /* --- TOP NAV: official logo + redesigned (mirrors live catking.in nav) --- */
    .tn {
      background: #0f0f1c !important;
      border-bottom: 1.5px solid var(--orange) !important;
      padding: 0 22px !important;
      height: 64px !important;
      gap: 18px !important;
    }

    .tn-logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      height: 40px;
      padding: 4px 0;
      border-radius: 6px;
      transition: opacity .12s;
    }

    .tn-logo:hover {
      opacity: .85;
    }

    .tn-logo img {
      height: 34px;
      width: auto;
      display: block;
      filter: brightness(0) invert(1);
    }

    .tn .links {
      display: flex !important;
      gap: 6px !important;
      margin-left: 18px !important;
      flex: 1;
      align-items: center;
    }

    .tn .links a {
      color: rgba(255, 255, 255, .85) !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      padding: 8px 13px !important;
      border-radius: 7px !important;
      text-transform: none !important;
      letter-spacing: .1px !important;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
    }

    .tn .links a .caret {
      opacity: .6;
      transition: transform .15s;
      margin-left: 1px;
    }

    .tn .links a:hover {
      background: rgba(255, 255, 255, .08) !important;
      color: #fff !important;
    }

    .tn .links a:hover .caret {
      transform: rotate(180deg);
      opacity: 1;
    }

    .tn .links a.act {
      background: var(--orange) !important;
      color: var(--ink) !important;
      font-weight: 700 !important;
    }

    .tn .right {
      display: flex !important;
      gap: 6px !important;
      align-items: center;
      flex-shrink: 0;
    }

    .tn .right .ico-link {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .78);
      background: rgba(255, 255, 255, .05);
      transition: all .15s;
      position: relative;
    }

    .tn .right .ico-link:hover {
      background: rgba(255, 255, 255, .12);
      color: #fff;
    }

    /* Hover tooltip - surfaces icon name on hover/focus (replaces native title hover delay) */
    .tn .right .ico-link::after {
      content: attr(data-label);
      position: absolute;
      top: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%) translateY(-3px);
      background: rgba(15, 15, 28, .96);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .3px;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px solid rgba(254, 168, 47, .4);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s, transform .15s;
      z-index: 9999;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
    }

    .tn .right .ico-link::before {
      content: "";
      position: absolute;
      top: calc(100% + 1px);
      left: 50%;
      transform: translateX(-50%) translateY(-3px);
      border: 5px solid transparent;
      border-bottom-color: rgba(15, 15, 28, .96);
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s, transform .15s;
      z-index: 9999;
    }

    .tn .right .ico-link:hover::after,
    .tn .right .ico-link:focus::after,
    .tn .right .ico-link:hover::before,
    .tn .right .ico-link:focus::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .tn .right .login {
      color: rgba(255, 255, 255, .85) !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      padding: 8px 12px !important;
      border-radius: 7px !important;
      text-transform: none !important;
      letter-spacing: .1px !important;
      transition: all .12s;
    }

    .tn .right .login:hover {
      color: #fff !important;
      background: rgba(255, 255, 255, .08) !important;
    }

    .tn .right .apply {
      background: var(--orange) !important;
      color: var(--ink) !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
      padding: 9px 16px !important;
      border-radius: 7px !important;
      text-transform: none !important;
      letter-spacing: .2px !important;
      white-space: nowrap;
      margin-left: 6px;
      box-shadow: 0 4px 14px rgba(254, 168, 47, .3);
      transition: all .15s;
    }

    .tn .right .apply:hover {
      background: var(--orange-d) !important;
      transform: translateY(-1px);
    }

    /* --- MEGA MENU panels --- */
    .tn .mega {
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      background: #fff;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 16px 32px rgba(15, 15, 28, .12);
      display: none;
      z-index: 1099;
    }

    .tn .mega.open {
      display: block;
    }

    .tn .mega-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 28px 22px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }

    /* 7-column variant for Courses mega menu */
    .tn .mega-inner.mega-7col {
      grid-template-columns: repeat(7, 1fr);
      gap: 24px;
    }

    .tn .mega-col h6 {
      font-size: 11px;
      font-weight: 800;
      color: var(--orange-d);
      text-transform: uppercase;
      letter-spacing: 1.1px;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }

    .tn .mega-col a {
      display: block;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink);
      padding: 5px 0;
      text-transform: none !important;
      letter-spacing: .1px !important;
      background: none !important;
      border-radius: 0 !important;
      transition: color .12s;
      white-space: normal;
      line-height: 1.35;
    }

    .tn .mega-col a:hover {
      color: var(--orange-d) !important;
      background: none !important;
    }

    @media (max-width:1280px) {
      .tn .mega-inner.mega-7col {
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
      }

      .tn .mega-inner.mega-7col .mega-col {
        grid-column: span 1;
      }
    }

    @media (max-width:1180px) {
      .tn {
        padding: 0 16px !important;
        gap: 14px !important;
      }

      .tn .links {
        gap: 2px !important;
        margin-left: 6px !important;
      }

      .tn .links a {
        font-size: 12.5px !important;
        padding: 7px 9px !important;
      }

      .tn-logo img {
        height: 32px;
      }

      .tn .right .login {
        display: none !important;
      }
    }

    @media (max-width:980px) {
      .tn .right .ico-link {
        display: none;
      }
    }

    @media (max-width:780px) {
      .tn {
        padding: 0 14px !important;
        height: 58px !important;
        gap: 10px !important;
      }

      .tn-logo img {
        height: 30px;
      }

      .tn .links {
        display: none !important;
      }

      .tn .right .apply {
        padding: 8px 12px !important;
        font-size: 11.5px !important;
      }
    }

    @media (max-width:480px) {

      /* Squeeze top-nav for iPhone SE class viewports (320-414px) */
      .tn {
        padding: 0 10px !important;
        height: 54px !important;
        gap: 8px !important;
      }

      .tn-logo img {
        height: 26px !important;
      }

      .tn .right {
        gap: 6px !important;
      }

      .tn .right .apply,
      .tn .buy-btn {
        padding: 7px 10px !important;
        font-size: 11px !important;
        letter-spacing: .2px !important;
        white-space: nowrap;
      }

      .tn .ico-link {
        padding: 6px !important;
      }
    }

    @media (max-width:380px) {

      /* iPhone SE 1st-gen and similar small viewports - tighten everything in the top nav */
      .tn {
        padding: 0 8px !important;
        gap: 6px !important;
        max-width: 100vw !important;
        overflow: hidden !important;
      }

      .tn-logo img {
        height: 26px !important;
      }

      .tn .right {
        gap: 6px !important;
        flex-shrink: 0;
      }

      .tn .ico-link {
        width: 34px !important;
        height: 34px !important;
      }

      .tn .right .apply,
      .tn .right .buy-btn,
      .tn .login-link {
        padding: 7px 9px !important;
        font-size: 10.5px !important;
        letter-spacing: .2px !important;
        white-space: nowrap;
      }
    }

    /* ============ MOBILE HAMBURGER + NAV DRAWER ============ */
    /* Hamburger button — hidden on desktop, shown only on mobile (<= 780 px) */
    .tn-hamburger {
      display: none;
      width: 42px;
      height: 42px;
      background: transparent;
      border: 0;
      padding: 9px 8px;
      cursor: pointer;
      flex-direction: column;
      justify-content: space-around;
      border-radius: 6px;
      transition: background .15s;
      flex-shrink: 0;
      margin-left: auto;
      /* pushes hamburger to right when other nav items hide */
    }

    .tn-hamburger:hover {
      background: rgba(255, 255, 255, .08);
    }

    .tn-hamburger:active {
      background: rgba(255, 255, 255, .14);
    }

    .tn-hamburger span {
      display: block;
      width: 24px;
      height: 2.5px;
      background: #fff;
      border-radius: 2px;
      transition: transform .25s ease, opacity .15s ease;
      transform-origin: center;
    }

    /* X state when drawer open */
    .tn-hamburger[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg);
    }

    .tn-hamburger[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .tn-hamburger[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg);
    }

    /* Drawer container — hidden by default */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      z-index: 2000;
      visibility: hidden;
      opacity: 0;
      transition: opacity .25s ease, visibility 0s linear .25s;
      font-family: 'DM Sans', sans-serif;
    }

    .mobile-drawer.open {
      visibility: visible;
      opacity: 1;
      transition: opacity .25s ease, visibility 0s linear 0s;
    }

    .mobile-drawer-overlay {
      position: absolute;
      inset: 0;
      background: rgba(8, 12, 20, .55);
      backdrop-filter: blur(2px);
    }

    .mobile-drawer-panel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(86vw, 360px);
      background: #fff;
      display: flex;
      flex-direction: column;
      box-shadow: -8px 0 32px rgba(0, 0, 0, .25);
      transform: translateX(100%);
      transition: transform .3s cubic-bezier(.22, 1, .36, 1);
      -webkit-overflow-scrolling: touch;
    }

    .mobile-drawer.open .mobile-drawer-panel {
      transform: translateX(0);
    }

    .mobile-drawer-head {
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .mobile-drawer-title {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--muted);
    }

    .mobile-drawer-close {
      width: 36px;
      height: 36px;
      border: 0;
      background: var(--bg);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--ink);
      transition: background .15s;
    }

    .mobile-drawer-close:hover {
      background: var(--border);
    }

    .mobile-drawer-nav {
      flex: 1;
      overflow-y: auto;
      padding: 14px 0;
    }

    .mdrawer-item,
    .mdrawer-summary,
    .mdrawer-item-secondary {
      display: flex;
      align-items: center;
      padding: 14px 22px;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      text-decoration: none;
      cursor: pointer;
      min-height: 48px;
      border: 0;
      background: transparent;
      width: 100%;
      list-style: none;
      user-select: none;
    }

    .mdrawer-summary {
      justify-content: space-between;
    }

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

    .mdrawer-summary .caret {
      transition: transform .2s;
      color: var(--muted);
    }

    .mdrawer-group[open] .mdrawer-summary .caret {
      transform: rotate(180deg);
    }

    .mdrawer-item:hover,
    .mdrawer-summary:hover,
    .mdrawer-item-secondary:hover {
      background: var(--bg);
    }

    .mdrawer-item:active,
    .mdrawer-summary:active,
    .mdrawer-item-secondary:active {
      background: var(--border);
    }

    .mdrawer-sublist {
      background: var(--bg);
      padding: 4px 0 8px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .mdrawer-sublist a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 22px 11px 38px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      min-height: 42px;
    }

    .mdrawer-sublist a:hover {
      color: var(--ink);
      background: #fff;
    }

    .mdrawer-tag {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .4px;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--bg);
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      white-space: nowrap;
    }

    .mdrawer-tag-orange {
      color: var(--orange-d);
      background: #FFE9C7;
      border-color: rgba(254, 168, 47, .4);
    }

    .mdrawer-sublist a.mdrawer-all {
      color: var(--orange-d);
      font-weight: 800;
      border-top: 1px solid var(--border);
      margin-top: 4px;
      padding-top: 14px;
    }

    .mdrawer-item-secondary {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--muted);
    }

    .mdrawer-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 22px;
    }

    .mobile-drawer-foot {
      padding: 14px 18px 18px;
      border-top: 1px solid var(--border);
      background: var(--bg);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mdrawer-cta {
      display: block;
      background: var(--orange);
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      padding: 13px 18px;
      border-radius: 8px;
      text-decoration: none;
      letter-spacing: .3px;
      box-shadow: 0 4px 12px rgba(254, 168, 47, .3);
    }

    .mdrawer-cta:hover {
      background: var(--orange-d);
    }

    .mdrawer-call {
      display: block;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      text-decoration: none;
      padding: 8px;
    }

    /* Scroll lock helper — when drawer is open, body shouldn't scroll */
    body.drawer-open {
      overflow: hidden;
    }

    /* Show hamburger + hide drawer at <= 780 px */
    @media (max-width:780px) {
      .tn-hamburger {
        display: flex;
      }
    }

    /* On tablet/desktop the drawer is force-hidden even if a stale 'open' class is left */
    @media (min-width:781px) {
      .mobile-drawer {
        display: none !important;
      }
    }

    /* --- FOOTER REBUILD (production) --- */
    .foot {
      background: var(--ink);
      color: #fff;
      padding: 64px 22px 0;
      margin-top: 0;
    }

    .foot-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 48px;
    }

    .foot-col h6 {
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 1.4px;
      margin-bottom: 18px;
    }

    .foot-col a {
      display: block;
      font-size: 13px;
      color: rgba(255, 255, 255, .72);
      padding: 5px 0;
      font-weight: 500;
      transition: color .12s;
    }

    .foot-col a:hover {
      color: #fff;
    }

    .foot-brand img {
      height: 48px;
      width: auto;
      display: block;
      margin-bottom: 18px;
      filter: brightness(0) invert(1);
    }

    .foot-brand p {
      font-size: 13px;
      line-height: 1.7;
      color: rgba(255, 255, 255, .7);
      font-weight: 500;
    }

    .foot-brand .contacts {
      margin-top: 14px;
      font-size: 12px;
      line-height: 1.85;
      color: rgba(255, 255, 255, .72);
    }

    .foot-brand .contacts a {
      display: inline;
      padding: 0;
      color: var(--orange);
    }

    .foot-social {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }

    .foot-social a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 0;
      transition: all .15s;
    }

    .foot-social a:hover {
      background: var(--orange);
      color: var(--ink);
      transform: translateY(-2px);
    }

    .foot-bottom {
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding: 22px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 12px;
      color: rgba(255, 255, 255, .6);
    }

    .foot-bottom .legal {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 24px;
    }

    .foot-bottom .legal a {
      color: rgba(255, 255, 255, .6);
      white-space: nowrap;
      transition: color .12s;
    }

    .foot-bottom .legal a:hover {
      color: #fff;
    }

    @media (max-width:900px) {
      .foot-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }

      .foot-brand {
        grid-column: 1/-1;
      }
    }

    @media (max-width:560px) {
      .foot {
        padding: 48px 18px 0;
      }

      .foot-inner {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .foot-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .foot-bottom .legal {
        gap: 18px;
      }
    }

    /* --- FREE WORKSHOP SECTION (Sumit Sir) --- */
    #workshop {
      background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1c 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
      max-width: none !important;
      padding: 80px 0 !important;
    }

    #workshop::before {
      content: "";
      position: absolute;
      top: -50%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(254, 168, 47, .15) 0%, transparent 70%);
      pointer-events: none;
    }

    #workshop .ws-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 56px;
      position: relative;
      z-index: 1;
    }

    #workshop .ws-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(254, 168, 47, .16);
      color: var(--orange);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.4px;
      padding: 6px 14px;
      border-radius: 20px;
      text-transform: uppercase;
      margin-bottom: 20px;
      border: 1px solid rgba(254, 168, 47, .3);
    }

    #workshop h2 {
      font-size: clamp(34px, 4vw, 46px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -1.2px;
      color: #fff;
      margin-bottom: 18px;
    }

    #workshop h2 em,
    #workshop h2 .accent {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      color: var(--orange);
    }

    #workshop .ws-lede {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .85);
      margin-bottom: 24px;
      max-width: 520px;
      font-weight: 500;
    }

    #workshop .ws-bullets {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
    }

    #workshop .ws-bullets li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 14.5px;
      line-height: 1.5;
      color: rgba(255, 255, 255, .88);
    }

    #workshop .ws-bullets svg {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: var(--orange);
      margin-top: 1px;
    }

    #workshop .ws-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    #workshop .ws-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 26px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .2px;
      cursor: pointer;
      transition: all .15s;
      border: none;
    }

    #workshop .ws-btn.primary {
      background: var(--orange);
      color: var(--ink);
      box-shadow: 0 8px 24px rgba(254, 168, 47, .35);
    }

    #workshop .ws-btn.primary:hover {
      background: var(--orange-d);
      transform: translateY(-2px);
    }

    #workshop .ws-btn.whatsapp {
      background: #25D366;
      color: #fff;
    }

    #workshop .ws-btn.whatsapp:hover {
      background: #1DA851;
      transform: translateY(-2px);
    }

    #workshop .ws-quote {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-size: 17px;
      color: var(--orange);
      letter-spacing: -.2px;
      margin-top: 12px;
    }

    #workshop .ws-quote span {
      display: block;
      font-family: 'DM Sans', Arial, sans-serif;
      font-size: 11px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 1.2px;
      color: rgba(255, 255, 255, .6);
      text-transform: uppercase;
      margin-top: 6px;
    }

    #workshop .ws-video {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      aspect-ratio: 16/9;
      background: #000;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
      border: 1px solid rgba(254, 168, 47, .25);
    }

    #workshop .ws-video iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    #workshop .ws-mentor {
      margin-top: 18px;
      padding: 14px 18px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 12px;
      display: flex;
      gap: 14px;
      align-items: center;
    }

    #workshop .ws-mentor .av {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--orange) 0%, var(--orange-d) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 500;
      font-size: 24px;
      color: var(--ink);
      flex-shrink: 0;
    }

    #workshop .ws-mentor h4 {
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 2px;
    }

    #workshop .ws-mentor p {
      font-size: 12px;
      color: rgba(255, 255, 255, .7);
      line-height: 1.5;
      font-weight: 500;
    }

    @media (max-width:900px) {
      #workshop {
        padding: 56px 0 !important;
      }

      #workshop .ws-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 22px;
      }
    }

    /* --- PYQ DOWNLOADS SECTION --- */
    #pyq .pyq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 14px;
      margin-top: 28px;
    }

    .pyq-tile {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px;
      text-align: center;
      transition: all .15s;
      text-decoration: none;
      color: var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;
      font-family: inherit;
    }

    button.pyq-tile {
      /* reset native button defaults */
      appearance: none;
      -webkit-appearance: none;
      width: 100%;
    }

    .pyq-tile:hover {
      border-color: var(--orange);
      box-shadow: 0 12px 28px rgba(254, 168, 47, .15);
      transform: translateY(-3px);
    }

    .pyq-tile .pyq-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--orange-l);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .pyq-tile .pyq-icon svg {
      width: 22px;
      height: 22px;
      fill: var(--orange-d);
    }

    .pyq-tile .pyq-year {
      font-size: 13px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .pyq-tile .pyq-slot {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: .3px;
    }

    .pyq-tile .pyq-dl {
      /* Hidden by request — the click still triggers the lead-gate modal via .pdf-gate handler. */
      display: none !important;
    }

    /* --- SLOT ANALYSIS SECTION --- */
    #slot-analysis {
      background: var(--bg);
    }

    .slot-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 26px;
    }

    .slot-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
    }

    .slot-card .slot-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    .slot-card .slot-h h4 {
      font-size: 16px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -.3px;
    }

    .slot-card .slot-h .diff {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .6px;
      padding: 4px 10px;
      border-radius: 12px;
      text-transform: uppercase;
    }

    .slot-card .slot-h .diff.easy {
      background: #E4F1EA;
      color: #0F5E3A;
    }

    .slot-card .slot-h .diff.med {
      background: #FFF4E0;
      color: #E8951F;
    }

    .slot-card .slot-h .diff.hard {
      background: #FFE5E5;
      color: #C62828;
    }

    .slot-card .slot-stat {
      display: flex;
      gap: 14px;
      margin-bottom: 14px;
      padding: 12px;
      background: var(--bg);
      border-radius: 8px;
    }

    .slot-card .slot-stat .ss {
      flex: 1;
      text-align: center;
    }

    .slot-card .slot-stat .ss .n {
      font-family: 'DM Sans', sans-serif;
      font-style: normal;
      font-weight: 900;
      font-size: 24px;
      color: var(--orange-d);
      letter-spacing: -.6px;
      line-height: 1;
    }

    .slot-card .slot-stat .ss .l {
      font-size: 9px;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-top: 4px;
    }

    .slot-card .slot-content p {
      font-size: 13px;
      line-height: 1.55;
      color: #444;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .slot-card .slot-content p strong {
      color: var(--ink);
      font-weight: 800;
    }

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

    /* --- LAST 3 YEARS TREND TABLE --- */
    .trend-table-wrap {
      overflow-x: auto;
      margin-top: 22px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
    }

    table.trend-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    table.trend-table th {
      background: var(--ink);
      color: #fff;
      font-size: 11.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .8px;
      padding: 14px 18px;
      text-align: left;
      white-space: nowrap;
    }

    table.trend-table td {
      padding: 14px 18px;
      border-top: 1px solid var(--border);
      font-weight: 600;
      color: #333;
    }

    table.trend-table tr:hover td {
      background: var(--orange-l);
    }

    table.trend-table .recent td {
      background: var(--orange-l);
      font-weight: 700;
    }

    table.trend-table .recent td:first-child {
      border-left: 3px solid var(--orange);
      font-weight: 800;
      color: var(--orange-d);
    }

    table.trend-table .yr {
      font-family: 'DM Sans', sans-serif;
      font-style: normal;
      font-weight: 800;
      color: var(--orange-d);
      font-size: 15px;
      letter-spacing: -.2px;
    }

    /* --- IIM CUTOFF CALC TEASER --- */
    #cutoff-calc {
      background: linear-gradient(135deg, var(--orange-l) 0%, #FFE5C2 100%);
      border-radius: 18px;
      padding: 48px 36px;
      margin: 36px auto;
      max-width: 1100px;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 32px;
      align-items: center;
    }

    #cutoff-calc h3 {
      font-size: 30px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -1px;
      line-height: 1.1;
      margin-bottom: 14px;
    }

    #cutoff-calc h3 em {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 500;
      color: var(--orange-d);
    }

    #cutoff-calc p {
      font-size: 14.5px;
      color: #444;
      line-height: 1.55;
      margin-bottom: 20px;
      font-weight: 500;
    }

    #cutoff-calc .cc-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--ink);
      color: #fff;
      padding: 14px 28px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 14px;
      text-decoration: none;
      transition: all .15s;
    }

    #cutoff-calc .cc-cta:hover {
      background: #000;
      transform: translateY(-2px);
    }

    #cutoff-calc .cc-vis {
      background: #fff;
      border-radius: 14px;
      padding: 24px;
      box-shadow: 0 12px 32px rgba(15, 15, 28, .08);
    }

    #cutoff-calc .cc-vis-h {
      font-size: 11px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    #cutoff-calc .cc-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 11px;
      font-size: 13px;
    }

    #cutoff-calc .cc-bar .iim {
      width: 88px;
      font-weight: 800;
      color: var(--ink);
      flex-shrink: 0;
    }

    #cutoff-calc .cc-bar .track {
      flex: 1;
      height: 14px;
      background: var(--bg);
      border-radius: 7px;
      overflow: hidden;
      position: relative;
    }

    #cutoff-calc .cc-bar .fill {
      height: 100%;
      background: linear-gradient(90deg, var(--orange) 0%, var(--orange-d) 100%);
      border-radius: 7px;
    }

    #cutoff-calc .cc-bar .pct {
      width: 54px;
      text-align: right;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 500;
      font-size: 16px;
      color: var(--orange-d);
      flex-shrink: 0;
    }

    @media (max-width:900px) {
      #cutoff-calc {
        grid-template-columns: 1fr;
        padding: 36px 24px;
      }
    }

    /* --- STICKY MOBILE BAR --- */
    .sticky-mobile {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid var(--border);
      box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
      display: none;
      z-index: 1050;
      padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
      gap: 8px;
    }

    .sticky-mobile a {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 6px;
      border-radius: 10px;
      font-size: 10.5px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: .2px;
      text-decoration: none;
      text-align: center;
      line-height: 1.2;
      gap: 4px;
      transition: all .15s;
    }

    .sticky-mobile a svg {
      width: 20px;
      height: 20px;
    }

    .sticky-mobile a.workshop {
      background: var(--orange);
      color: var(--ink);
    }

    .sticky-mobile a.mock {
      background: var(--ink);
      color: #fff;
    }

    .sticky-mobile a.whatsapp {
      background: #25D366;
      color: #fff;
    }

    .sticky-mobile a:active {
      transform: scale(.96);
    }

    @media (max-width:780px) {
      .sticky-mobile {
        display: flex;
      }

      body {
        padding-bottom: 72px;
      }

      .toast-stack {
        bottom: 88px !important;
      }
    }

    /* --- v6 contrast fix: counsellor card eyebrow (orange-on-orange bug) --- */
    .counsellor-card .ccl-left .eyebrow {
      color: var(--ink) !important;
      background: var(--orange) !important;
    }

    /* --- LATEST CAT INSIGHTS (blog cards grid) --- */
    #insights {
      padding: 64px 0;
    }

    .insights-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 8px;
    }

    .insight-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      transition: all .25s;
      display: flex;
      flex-direction: column;
    }

    .insight-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 38px rgba(15, 15, 28, .12);
      border-color: var(--orange);
    }

    .insight-link {
      display: flex;
      flex-direction: column;
      height: 100%;
      text-decoration: none;
      color: inherit;
    }

    .insight-thumb {
      height: 165px;
      position: relative;
      display: flex;
      align-items: flex-end;
      padding: 14px;
      overflow: hidden;
    }

    .insight-thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .55) 100%);
      z-index: 1;
    }

    /* 6 thumbnail variations using brand-aligned gradients (no stock photography needed) */
    .insight-thumb-1 {
      background: linear-gradient(135deg, #FEA82F 0%, #E8951F 100%);
    }

    .insight-thumb-2 {
      background: linear-gradient(135deg, #1F8A5B 0%, #0F5E3A 100%);
    }

    .insight-thumb-3 {
      background: linear-gradient(135deg, #2385F4 0%, #1565C0 100%);
    }

    .insight-thumb-4 {
      background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1c 100%);
    }

    .insight-thumb-5 {
      background: linear-gradient(135deg, #FEA82F 0%, #1F8A5B 100%);
    }

    .insight-thumb-6 {
      background: linear-gradient(135deg, #2385F4 0%, #1F8A5B 100%);
    }

    /* Decorative pattern overlay on thumbnails */
    .insight-thumb-1::after,
    .insight-thumb-2::after,
    .insight-thumb-3::after,
    .insight-thumb-4::after,
    .insight-thumb-5::after,
    .insight-thumb-6::after {
      content: "";
      position: absolute;
      top: -20%;
      right: -20%;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, transparent 70%);
      z-index: 0;
    }

    .insight-tag {
      position: relative;
      z-index: 2;
      background: rgba(255, 255, 255, .95);
      color: var(--ink);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 5px;
      align-self: flex-start;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    }

    .insight-body {
      padding: 18px 20px 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .insight-cat {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--orange-d);
      margin-bottom: 8px;
    }

    .insight-card h3 {
      font-size: 16px;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: -.3px;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .insight-excerpt {
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
      margin-bottom: 14px;
      flex: 1;
    }

    .insight-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 600;
    }

    .insight-author {
      color: var(--ink);
      font-weight: 700;
    }

    .insight-dot {
      opacity: .5;
    }

    @media (max-width:980px) {
      .insights-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width:680px) {
      .insights-grid {
        grid-template-columns: 1fr;
      }
    }

    /* --- WHATSAPP MOMENTS MARQUEE CAROUSEL (mirrors results-page pattern) --- */
    #whatsapp-testimonials {
      background: linear-gradient(180deg, #0f0f1c 0%, #1a1a2e 100%);
      color: #fff;
      padding: 72px 0 80px;
      position: relative;
      overflow: hidden;
      max-width: none !important;
    }

    #whatsapp-testimonials::before,
    #whatsapp-testimonials::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 140px;
      z-index: 2;
      pointer-events: none;
    }

    #whatsapp-testimonials::before {
      left: 0;
      background: linear-gradient(90deg, #0f0f1c, transparent);
    }

    #whatsapp-testimonials::after {
      right: 0;
      background: linear-gradient(270deg, #1a1a2e, transparent);
    }

    #whatsapp-testimonials .wa-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 28px;
      position: relative;
      z-index: 1;
    }

    #whatsapp-testimonials .wa-head {
      text-align: center;
      margin-bottom: 42px;
    }

    #whatsapp-testimonials h2 {
      font-size: clamp(30px, 3.8vw, 44px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -1.2px;
      color: #fff;
      margin-bottom: 14px;
    }

    #whatsapp-testimonials h2 em {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 500;
      color: var(--orange);
    }

    #whatsapp-testimonials .wa-sub {
      font-size: 14.5px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .72);
      font-weight: 500;
      max-width: 720px;
      margin: 0 auto;
    }

    #whatsapp-testimonials .wa-sub b {
      color: #fff;
    }

    #whatsapp-testimonials .wa-results-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--orange);
      font-weight: 800;
      font-size: 14px;
      text-decoration: none;
      letter-spacing: .3px;
      padding: 6px 0;
      border-bottom: 1.5px solid var(--orange);
      transition: .15s;
    }

    #whatsapp-testimonials .wa-results-link:hover {
      color: #fff;
      border-bottom-color: #fff;
    }

    .wa-marquee-wrap {
      position: relative;
      margin-top: 8px;
    }

    .wa-marquee {
      display: flex;
      gap: 18px;
      animation: wascroll 120s linear infinite;
      width: max-content;
    }

    .wa-marquee:hover {
      animation-play-state: paused;
    }

    @keyframes wascroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .wa-card {
      flex: 0 0 auto;
      width: 240px;
      background: #fff;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 14px;
      padding: 12px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
      position: relative;
      overflow: hidden;
      transition: all .25s;
    }

    .wa-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
      border-color: var(--orange);
    }

    .wa-card-img {
      width: 100%;
      border-radius: 8px;
      display: block;
      aspect-ratio: 400/700;
      background: linear-gradient(180deg, #075E54 0%, #128C7E 35%, #E5DDD5 35%, #DCF8C6 100%);
      position: relative;
      overflow: hidden;
    }

    .wa-card-img.has-img {
      background: #0c1317;
    }

    .wa-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      display: block;
    }

    /* CSS-rendered placeholder when image not yet uploaded */
    .wa-card-img .ph-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: #075E54;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 48px;
      box-sizing: border-box;
    }

    .wa-card-img .ph-av {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--orange) 0%, var(--orange-d) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      font-size: 14px;
      color: var(--ink);
      flex-shrink: 0;
    }

    .wa-card-img .ph-name {
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .wa-card-img .ph-msg {
      position: absolute;
      top: 62px;
      left: 12px;
      background: #fff;
      padding: 7px 10px 6px;
      border-radius: 0 8px 8px 8px;
      font-size: 11px;
      line-height: 1.4;
      color: #111;
      max-width: 170px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
    }

    .wa-card-img .ph-msg-2 {
      top: auto;
      bottom: 62px;
      left: auto;
      right: 12px;
      background: #DCF8C6;
      border-radius: 8px 0 8px 8px;
      font-weight: 600;
    }

    .wa-card-img .ph-celebrate {
      position: absolute;
      bottom: 8px;
      left: 12px;
      right: 12px;
      background: linear-gradient(135deg, var(--orange) 0%, var(--orange-d) 100%);
      color: var(--ink);
      padding: 8px 10px;
      border-radius: 8px;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      font-size: 12px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(254, 168, 47, .3);
      z-index: 1;
    }

    /* Verified CATKing stamp - mirrors results page */
    .wa-stamp {
      position: absolute;
      bottom: 8px;
      right: 8px;
      z-index: 3;
    }

    .wa-stamp-outer {
      background: linear-gradient(135deg, #1F8A5B 0%, #0F5E3A 100%);
      color: #fff;
      border-radius: 5px;
      padding: 5px 7px;
      border: 2px solid rgba(255, 255, 255, .2);
      box-shadow: 0 4px 10px rgba(31, 138, 91, .45);
      text-align: center;
      letter-spacing: .3px;
    }

    .wa-stamp-top {
      font-size: 6.5px;
      font-weight: 900;
      color: rgba(255, 255, 255, .85);
      text-transform: uppercase;
      letter-spacing: .6px;
      line-height: 1.1;
      margin-bottom: 1px;
    }

    .wa-stamp-ctr {
      font-size: 9px;
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 1px;
    }

    .wa-card-caption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 4px 2px;
      font-size: 11.5px;
      color: var(--ink);
      font-weight: 800;
      gap: 6px;
    }

    .wa-card-caption b {
      color: var(--ink);
      font-size: 11.5px;
      letter-spacing: -.1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .wa-card-caption .wa-card-score {
      font-size: 10px;
      color: var(--orange-d);
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .wa-disclaimer-row {
      margin-top: 36px;
      text-align: center;
      font-size: 12.5px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.6;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      padding: 14px 18px;
      background: rgba(255, 255, 255, .03);
      border: 1px dashed rgba(255, 255, 255, .1);
      border-radius: 10px;
    }

    .wa-disclaimer-row b {
      color: rgba(255, 255, 255, .85);
      font-weight: 700;
    }

    .wa-disclaimer-row a {
      color: var(--orange);
      text-decoration: none;
      font-weight: 700;
    }

    .wa-disclaimer-row a:hover {
      text-decoration: underline;
    }

    @media (max-width:780px) {
      #whatsapp-testimonials {
        padding: 56px 0 64px;
      }

      #whatsapp-testimonials .wa-inner {
        padding: 0 18px;
      }

      .wa-card {
        width: 200px;
      }

      .wa-marquee {
        animation-duration: 90s;
      }
    }

    /* --- LITE-YOUTUBE EMBED (click thumbnail → iframe loads + autoplays inline) --- */
    .lite-yt {
      position: relative;
      display: block;
      width: 100%;
      background-color: #000;
      background-position: center center;
      background-size: cover;
      cursor: pointer;
      aspect-ratio: 16/9;
      border-radius: 14px;
      overflow: hidden;
      contain: content;
    }

    .lite-yt::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background-image: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
      pointer-events: none;
      z-index: 1;
    }

    .lite-yt>.lite-yt-title {
      position: absolute;
      top: 14px;
      left: 18px;
      right: 60px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
      z-index: 2;
      line-height: 1.3;
    }

    .lite-yt>.lite-yt-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 78px;
      height: 54px;
      margin-top: -27px;
      margin-left: -39px;
      background: rgba(33, 33, 33, .85);
      border-radius: 14px;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, transform .15s;
    }

    .lite-yt:hover>.lite-yt-play-btn {
      background: #FF0000;
      transform: scale(1.08);
    }

    .lite-yt>.lite-yt-play-btn::before {
      content: '';
      border: solid transparent;
      border-width: 11px 0 11px 19px;
      border-left-color: #fff;
      transform: translateX(2px);
    }

    .lite-yt>.lite-yt-meta {
      position: absolute;
      bottom: 14px;
      left: 18px;
      color: rgba(255, 255, 255, .9);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .3px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .lite-yt>.lite-yt-meta svg {
      width: 14px;
      height: 14px;
      fill: #FF0000;
    }

    .lite-yt.activated {
      cursor: auto;
    }

    .lite-yt.activated::before,
    .lite-yt.activated>.lite-yt-title,
    .lite-yt.activated>.lite-yt-play-btn,
    .lite-yt.activated>.lite-yt-meta {
      display: none;
    }

    .lite-yt>iframe {
      width: 100%;
      height: 100%;
      border: 0;
      position: absolute;
      inset: 0;
    }

    /* --- VIDEO STRIP - multiple lite-youtube cards in a row --- */
    .video-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 26px;
    }

    .video-strip .lite-yt {
      border-radius: 12px;
    }

    .video-card {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .video-card .vc-meta {
      background: #fff;
      border: 1px solid var(--border);
      border-top: 0;
      border-radius: 0 0 12px 12px;
      padding: 14px 16px 16px;
      margin-top: -8px;
      position: relative;
      z-index: 1;
    }

    .video-card .vc-meta h5 {
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -.2px;
      line-height: 1.3;
      margin-bottom: 4px;
    }

    .video-card .vc-meta p {
      font-size: 12px;
      color: var(--muted);
      font-weight: 500;
      line-height: 1.4;
    }

    .video-card .lite-yt {
      border-radius: 12px 12px 0 0;
    }

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

    /* --- WORKSHOP MODAL --- */
    .cat-modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(15, 15, 28, .78);
      backdrop-filter: blur(6px);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      transition: opacity .25s;
    }

    .cat-modal-bg.open {
      display: flex;
      opacity: 1;
    }

    .cat-modal-card {
      background: #fff;
      border-radius: 18px;
      max-width: 480px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      transform: translateY(20px);
      transition: transform .25s;
    }

    .cat-modal-bg.open .cat-modal-card {
      transform: translateY(0);
    }

    .cat-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg);
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 20px;
      color: var(--ink);
      z-index: 1;
      transition: background .12s;
    }

    .cat-modal-close:hover {
      background: var(--border);
    }

    .cat-modal-head {
      background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
      color: #fff;
      padding: 32px 28px 24px;
      border-radius: 18px 18px 0 0;
      position: relative;
      overflow: hidden;
    }

    .cat-modal-head::before {
      content: "";
      position: absolute;
      top: -50%;
      right: -30%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(254, 168, 47, .2), transparent 70%);
    }

    .cat-modal-head .eyebrow {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.4px;
      color: var(--orange);
      text-transform: uppercase;
      margin-bottom: 8px;
      position: relative;
    }

    .cat-modal-head h3 {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -.6px;
      line-height: 1.15;
      color: #fff;
      position: relative;
    }

    .cat-modal-head h3 em {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 500;
      color: var(--orange);
    }

    .cat-modal-head .when {
      margin-top: 14px;
      font-size: 13px;
      color: rgba(255, 255, 255, .85);
      font-weight: 600;
      position: relative;
    }

    .cat-modal-body {
      padding: 24px 28px 28px;
    }

    .cat-modal-body label {
      display: block;
      font-size: 11.5px;
      font-weight: 800;
      color: var(--ink);
      text-transform: uppercase;
      letter-spacing: .8px;
      margin-bottom: 6px;
      margin-top: 14px;
    }

    .cat-modal-body label:first-child {
      margin-top: 0;
    }

    .cat-modal-body input,
    .cat-modal-body select {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      font-family: inherit;
      background: #fff;
      transition: border-color .12s;
    }

    .cat-modal-body input:focus,
    .cat-modal-body select:focus {
      outline: none;
      border-color: var(--orange);
    }

    .cat-modal-body .cat-modal-cta {
      width: 100%;
      background: var(--orange);
      color: var(--ink);
      border: 0;
      padding: 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .2px;
      cursor: pointer;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all .15s;
    }

    .cat-modal-body .cat-modal-cta:hover {
      background: var(--orange-d);
      transform: translateY(-1px);
    }

    .cat-modal-body .cat-modal-foot {
      text-align: center;
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 14px;
      line-height: 1.5;
    }

    .cat-modal-body .cat-modal-foot a {
      color: var(--orange-d);
      font-weight: 700;
    }