:root {
      --red: #d81f27;
      --red-d: #a1141b;
      --gold: #c9a227;
      --gold-l: #e3c766;
      --navy: #16224f;
      --ink: #131b3d;
      --paper: #ffffff;
      --soft: #fbf7f0;
      --soft-2: #f6efe1;
      --slate: #54607e;
      --muted: #8b93ac;
      --line: #ece6d8;
      --display: 'Plus Jakarta Sans', system-ui, sans-serif;
      --body: 'DM Sans', system-ui, sans-serif;
      --sh: 0 18px 44px rgba(22, 34, 79, .10);
      --sh-lg: 0 30px 66px rgba(22, 34, 79, .16);
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--body);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.6;
      overflow-x: hidden
    }

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

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

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--display);
      line-height: 1.1;
      letter-spacing: -.02em;
      font-weight: 800;
      color: var(--navy)
    }

    .wrap {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px
    }

    .eyebrow {
      font-family: var(--display);
      font-weight: 700;
      font-size: .76rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--red);
      display: inline-flex;
      align-items: center;
      gap: 9px
    }

    .eyebrow::before {
      content: '';
      width: 26px;
      height: 2px;
      background: var(--gold);
      border-radius: 2px
    }

    section {
      scroll-margin-top: 88px
    }

    /* GNV logo mark */
    .gnv {
      display: block
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: var(--display);
      font-weight: 700;
      font-size: .96rem;
      padding: 13px 24px;
      border-radius: 12px;
      border: 0;
      cursor: pointer;
      transition: .24s
    }

    .btn i {
      transition: transform .22s
    }

    .btn:hover i {
      transform: translateX(4px)
    }

    .btn-red {
      background: var(--red);
      color: #fff;
      box-shadow: 0 12px 26px rgba(216, 31, 39, .28)
    }

    .btn-red:hover {
      background: var(--red-d);
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(216, 31, 39, .36)
    }

    .btn-gold {
      background: linear-gradient(135deg, var(--gold-l), var(--gold));
      color: var(--navy)
    }

    .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(201, 162, 39, .4)
    }

    .btn-ghost {
      background: transparent;
      color: var(--navy);
      border: 1.5px solid var(--navy)
    }

    .btn-ghost:hover {
      background: var(--navy);
      color: #fff;
      transform: translateY(-2px)
    }

    /* top bar */
    .topbar {
      background: var(--navy);
      color: #d7dcf0;
      font-size: .82rem
    }

    .topbar .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      gap: 12px
    }

    .topbar .motto {
      font-style: italic;
      color: #e7d9a8
    }

    .topbar .motto i {
      color: var(--gold);
      margin-right: 7px
    }

    .topbar .tb-social a {
      margin-left: 14px
    }

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

    /* header */
    header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 78px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px
    }

    .brand .bt {
      font-family: var(--display);
      font-weight: 800;
      font-size: 1.2rem;
      line-height: 1.05;
      color: var(--navy)
    }

    .brand .bs {
      font-size: .64rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      font-weight: 600
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none
    }

    .menu>li>a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      font-size: .92rem;
      color: var(--slate);
      padding: 9px 14px;
      border-radius: 9px;
      transition: .18s
    }

    .menu>li>a:hover,
    .menu>li>a.active {
      color: var(--navy);
      background: var(--soft-2)
    }

    .has-mega {
      position: relative
    }

    .mega {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      width: 540px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--sh-lg);
      padding: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 24px;
      opacity: 0;
      visibility: hidden;
      transition: .2s
    }

    .has-mega:hover .mega {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0)
    }

    .mega h5 {
      font-family: var(--display);
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--red);
      margin: 6px 0 6px
    }

    .mega a {
      display: block;
      padding: 8px 10px;
      border-radius: 9px;
      font-weight: 600;
      font-size: .9rem;
      color: var(--navy);
      transition: .15s
    }

    .mega a:hover {
      background: var(--soft);
      transform: translateX(3px)
    }

    .mega a span {
      display: block;
      font-weight: 400;
      font-size: .76rem;
      color: var(--muted)
    }

    .nav .btn {
      padding: 11px 18px
    }

    .burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: 0;
      cursor: pointer;
      padding: 8px
    }

    .burger span {
      width: 24px;
      height: 2px;
      background: var(--navy);
      border-radius: 2px
    }

    /* HERO */
    .hero {
      padding: 56px 0 0;
      position: relative;
      overflow: hidden
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(900px 500px at 88% 0%, rgba(201, 162, 39, .10), transparent 60%), radial-gradient(700px 500px at 4% 100%, rgba(216, 31, 39, .06), transparent 60%);
      pointer-events: none
    }

    .hero-inner {
      position: relative;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
      align-items: center;
      min-height: 540px
    }

    .hero-copy .eyebrow {
      margin-bottom: 20px
    }

    .hero h1 {
      font-size: clamp(2.6rem, 5.4vw, 4.1rem);
      letter-spacing: -.03em
    }

    .hero h1 .r {
      color: var(--red);
      position: relative;
      white-space: nowrap
    }

    .hero h1 .r::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 5px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--gold), var(--gold-l))
    }

    .hero p.lead {
      font-size: 1.08rem;
      color: var(--slate);
      max-width: 520px;
      margin: 22px 0 30px
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 30px
    }

    .cred {
      display: flex;
      flex-wrap: wrap;
      gap: 12px
    }

    .cred .pill {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 9px 16px;
      box-shadow: 0 4px 12px rgba(22, 34, 79, .05);
      align-items: center;
    }

    .cred .pill b {
      font-family: var(--display);
      font-weight: 800;
      font-size: 1.15rem;
      line-height: 1;
      color: var(--navy)
    }

    .cred .pill span {
      font-size: .74rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--muted)
    }

    /* hero visual: GNV arc backdrop + teacher */
    .hero-visual {
      position: relative;
      height: 560px
    }

    .arc-red {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      left: 50%;
      top: 46%;
      transform: translate(-50%, -50%);
      background: radial-gradient(120% 120% at 30% 20%, #e8353c, var(--red) 55%, var(--red-d));
      box-shadow: 0 30px 70px rgba(216, 31, 39, .32)
    }

    .arc-gold {
      position: absolute;
      width: 470px;
      height: 470px;
      border-radius: 50%;
      left: 50%;
      top: 46%;
      transform: translate(-50%, -50%);
      border: 6px solid transparent;
      background: conic-gradient(from 220deg, var(--gold-l), var(--gold), transparent 55%, transparent 75%, var(--gold-l)) border-box;
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0);
      mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0)
    }

    .arc-dots {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      left: 50%;
      top: 46%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.4px);
      background-size: 22px 22px;
      mask-image: radial-gradient(circle, #000 60%, transparent 72%)
    }

    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 3
    }

    .hero-loading {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      z-index: 4;
      transition: opacity .5s
    }

    .hero-loading.hide {
      opacity: 0;
      pointer-events: none
    }

    .hero-loading .spin {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3px solid rgba(201, 162, 39, .35);
      border-top-color: var(--gold);
      animation: spin 1s linear infinite
    }

    .hero-loading span {
      font-family: var(--display);
      font-weight: 700;
      font-size: .72rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--navy)
    }

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

    .chip {
      position: absolute;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 50px;
      padding: 9px 14px;
      font-family: var(--display);
      font-weight: 700;
      font-size: .82rem;
      color: var(--navy);
      box-shadow: var(--sh);
      animation: floaty 5s ease-in-out infinite
    }

    .chip i {
      color: var(--red)
    }

    .chip.c1 {
      top: 14%;
      left: -8px
    }

    .chip.c2 {
      top: 46%;
      right: -10px;
      animation-delay: .8s
    }

    .chip.c2 i {
      color: var(--gold)
    }

    .chip.c3 {
      bottom: 11%;
      left: 8%;
      animation-delay: 1.6s
    }

    .chip.c3 i {
      color: var(--navy)
    }

    .chip .live {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 0 rgba(216, 31, 39, .6);
      animation: pulse 1.8s infinite
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(216, 31, 39, .5)
      }

      70% {
        box-shadow: 0 0 0 8px rgba(216, 31, 39, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(216, 31, 39, 0)
      }
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-9px)
      }
    }

    /* motto ribbon */
    .motto-ribbon {
      margin-top: 44px;
      background: var(--navy);
      color: #fff;
      border-top: 3px solid var(--gold)
    }

    .motto-ribbon .wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 20px 24px;
      text-align: center
    }

    .motto-ribbon .q {
      font-family: var(--display);
      font-size: 2rem;
      color: var(--gold);
      line-height: 0;
      transform: translateY(6px)
    }

    .motto-ribbon p {
      font-style: italic;
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: #eef0fb
    }

    .motto-ribbon p b {
      font-style: normal;
      color: var(--gold);
      font-family: var(--display)
    }

    /* bands */
    .band {
      padding: 92px 0
    }

    .band.soft {
      background: var(--soft)
    }

    .band-head {
      max-width: 660px;
      margin-bottom: 50px
    }

    .band-head.center {
      margin-inline: auto;
      text-align: center
    }

    .band-head.center .eyebrow {
      justify-content: center
    }

    .band-head h2 {
      font-size: clamp(2rem, 4vw, 2.9rem);
      margin: 14px 0 12px
    }

    .band-head p {
      color: var(--slate);
      font-size: 1.05rem
    }

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

    .pcard {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px 26px;
      transition: transform .25s, box-shadow .25s, border-color .25s;
      position: relative;
      overflow: hidden
    }

    .pcard::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 4px;
      width: 100%;
      background: var(--accent, var(--red));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s
    }

    .pcard:hover {
      transform: translateY(-8px);
      box-shadow: var(--sh-lg);
      border-color: transparent
    }

    .pcard:hover::after {
      transform: scaleX(1)
    }

    .pcard .tag {
      display: inline-block;
      font-family: var(--display);
      font-weight: 700;
      font-size: .66rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent, var(--red));
      background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
      padding: 5px 11px;
      border-radius: 50px;
      margin-bottom: 16px
    }

    .pcard .ico {
      width: 54px;
      height: 54px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      font-size: 1.35rem;
      color: #fff;
      background: var(--accent, var(--red));
      margin-bottom: 16px
    }

    .pcard h3 {
      font-size: 1.3rem
    }

    .pcard .kick {
      font-family: var(--display);
      font-weight: 700;
      font-size: .82rem;
      color: var(--gold);
      margin: 3px 0 12px
    }

    .pcard p {
      color: var(--slate);
      font-size: .93rem;
      margin-bottom: 16px
    }

    .pcard a.more {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--display);
      font-weight: 700;
      font-size: .9rem;
      color: var(--navy)
    }

    .pcard:hover a.more {
      color: var(--red)
    }

    .pcard a.more i {
      transition: transform .22s
    }

    .pcard:hover a.more i {
      transform: translateX(5px)
    }

    /* why (navy band) */
    .why {
      background: linear-gradient(160deg, #16224f, #0f1838);
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .why::before {
      content: '';
      position: absolute;
      width: 460px;
      height: 460px;
      border-radius: 50%;
      background: var(--red);
      filter: blur(150px);
      opacity: .16;
      top: -140px;
      right: -90px
    }

    .why .band-head h2 {
      color: #fff
    }

    .why .band-head p {
      color: #c7cded
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2
    }

    .wcard {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 18px;
      padding: 26px 22px;
      transition: .25s
    }

    .wcard:hover {
      background: rgba(255, 255, 255, .09);
      transform: translateY(-5px)
    }

    .wcard .ico {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      font-size: 1.25rem;
      color: var(--navy);
      background: linear-gradient(135deg, var(--gold-l), var(--gold));
      margin-bottom: 15px
    }

    .wcard h4 {
      font-size: 1.06rem;
      margin-bottom: 8px;
      color: #fff
    }

    .wcard p {
      font-size: .9rem;
      color: #b9c0de
    }

    /* results */
    .res-nums {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 50px
    }

    .rnum {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px 18px;
      text-align: center;
      box-shadow: var(--sh)
    }

    .rnum b {
      font-family: var(--display);
      font-weight: 800;
      font-size: 2.7rem;
      line-height: 1;
      display: block;
      background: linear-gradient(135deg, var(--red), var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent
    }

    .rnum span {
      color: var(--slate);
      font-size: .9rem;
      margin-top: 8px;
      display: block
    }

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

    .topper {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px;
      display: flex;
      gap: 14px;
      align-items: center;
      box-shadow: var(--sh);
      transition: .25s
    }

    .topper:hover {
      transform: translateY(-5px);
      box-shadow: var(--sh-lg)
    }

    .topper .av {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-weight: 800;
      color: #fff;
      font-size: 1.2rem;
      flex-shrink: 0
    }

    .topper h4 {
      font-size: 1rem
    }

    .topper .rk {
      font-family: var(--display);
      font-weight: 700;
      font-size: .85rem;
      color: var(--red)
    }

    .topper .ex {
      font-size: .77rem;
      color: var(--muted)
    }

    /* leadership */
    .lead-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      max-width: 820px;
      margin: 0 auto
    }

    .lcard {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 26px;
      display: flex;
      gap: 18px;
      align-items: center;
      box-shadow: var(--sh)
    }

    .lcard .av {
      width: 76px;
      height: 76px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-weight: 800;
      color: #fff;
      font-size: 1.5rem;
      flex-shrink: 0
    }

    .lcard h4 {
      font-size: 1.16rem
    }

    .lcard .role {
      font-family: var(--display);
      font-weight: 700;
      font-size: .82rem;
      color: var(--red);
      margin: 3px 0 6px
    }

    .lcard p {
      font-size: .86rem;
      color: var(--slate)
    }

    /* mentors */
    .m-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px
    }

    .mcard {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      transition: .25s
    }

    .mcard:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .mcard .top {
      height: 100px;
      position: relative;
      display: grid;
      place-items: center
    }

    .mcard .av {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      border: 4px solid #fff;
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-weight: 800;
      color: #fff;
      font-size: 1.8rem;
      position: absolute;
      bottom: -42px;
      box-shadow: var(--sh)
    }

    .mcard .body {
      padding: 52px 22px 24px;
      text-align: center
    }

    .mcard h4 {
      font-size: 1.1rem
    }

    .mcard .subj {
      font-family: var(--display);
      font-weight: 700;
      font-size: .82rem;
      color: var(--red);
      margin: 3px 0 9px
    }

    .mcard p {
      font-size: .86rem;
      color: var(--slate)
    }

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

    .tcard {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 30px;
      position: relative;
      box-shadow: var(--sh)
    }

    .tcard .q {
      position: absolute;
      top: 16px;
      right: 24px;
      font-family: var(--display);
      font-size: 3.2rem;
      color: var(--gold);
      opacity: .3;
      line-height: .6
    }

    .tcard .stars {
      color: var(--gold);
      font-size: .85rem;
      margin-bottom: 12px
    }

    .tcard p {
      font-size: .96rem;
      color: var(--slate);
      margin-bottom: 18px
    }

    .tperson {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .tperson .av {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-weight: 800;
      font-size: 1rem;
      color: #fff;
      background: var(--navy)
    }

    .tperson b {
      font-size: .92rem
    }

    .tperson span {
      font-size: .78rem;
      color: var(--muted);
      display: block
    }

    /* CTA */
    .cta {
      padding: 0 0 96px
    }

    .cta .box {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      padding: 60px 48px;
      text-align: center;
      color: #fff;
      background: radial-gradient(120% 120% at 85% 12%, #e8353c, var(--red) 45%, var(--red-d))
    }

    .cta .box::after {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: var(--gold);
      opacity: .3;
      filter: blur(100px);
      left: -70px;
      bottom: -120px
    }

    .cta h2 {
      position: relative;
      color: #fff;
      font-size: clamp(1.9rem, 3.6vw, 2.7rem);
      margin-bottom: 12px
    }

    .cta p {
      position: relative;
      color: #ffe3e2;
      max-width: 560px;
      margin: 0 auto 26px
    }

    .cta .btn {
      position: relative
    }

    /* footer */
    footer {
      background: #0f1838;
      color: #b7bedd;
      padding: 64px 0 26px
    }

    .f-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.5fr;
      gap: 38px;
      margin-bottom: 42px
    }

    .f-brand .brand {
      margin-bottom: 14px
    }

    .f-brand .brand .bt {
      color: #fff
    }

    .f-brand .brand .bs {
      color: var(--gold)
    }

    .f-brand p {
      font-size: .9rem;
      max-width: 300px
    }

    .f-brand .motto {
      font-style: italic;
      color: #e7d9a8;
      font-size: .86rem;
      margin-top: 12px
    }

    .f-social {
      display: flex;
      gap: 10px;
      margin-top: 16px
    }

    .f-social a {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .06);
      color: #c7ccec;
      transition: .22s
    }

    .f-social a:hover {
      background: var(--gold);
      color: var(--navy);
      transform: translateY(-3px)
    }

    footer h5 {
      font-family: var(--display);
      color: #fff;
      font-size: .8rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    footer ul {
      list-style: none
    }

    footer ul li {
      margin-bottom: 10px
    }

    footer ul li a {
      font-size: .9rem
    }

    footer ul li a:hover {
      color: var(--gold)
    }

    .f-branch {
      margin-bottom: 16px;
      display: flex;
      gap: 10px;
      font-size: .86rem;
      line-height: 1.5
    }

    .f-branch i {
      color: var(--gold);
      margin-top: 3px
    }

    .f-branch b {
      color: #e7eaf7;
      font-family: var(--display);
      font-weight: 700;
      font-size: .8rem
    }

    .f-bottom {
      border-top: 1px solid rgba(255, 255, 255, .09);
      padding-top: 20px;
      text-align: center;
      font-size: .82rem;
      color: #7a82a6
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s, transform .7s
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    @media(max-width:980px) {
      .hero-inner {
        grid-template-columns: 1fr;
        text-align: center
      }

      .hero-copy .eyebrow,
      .hero-cta,
      .cred {
        justify-content: center
      }

      .hero p.lead {
        margin-inline: auto
      }

      .hero-visual {
        height: 430px;
        order: -1;
        width: 100%;
        max-width: 500px;
        margin: 0 auto
      }

      .arc-red,
      .arc-gold,
      .arc-dots {
        width: 340px;
        height: 340px
      }

      .arc-gold {
        width: 400px;
        height: 400px
      }

      .prog-grid,
      .why-grid,
      .res-nums,
      .toppers,
      .m-grid,
      .t-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .lead-grid {
        grid-template-columns: 1fr
      }

      .f-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:760px) {

      .menu,
      .nav .btn {
        display: none
      }

      .burger {
        display: flex
      }

      .menu.open {
        display: flex;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 12px;
        gap: 4px
      }

      .menu.open .mega {
        display: none
      }

      .topbar .motto {
        display: none
      }

      .prog-grid,
      .why-grid,
      .res-nums,
      .toppers,
      .m-grid,
      .t-grid,
      .f-grid {
        grid-template-columns: 1fr
      }

      .band {
        padding: 64px 0
      }

      .chip.c1 {
        left: 2px
      }

      .chip.c2 {
        right: 2px
      }

      .cta .box {
        padding: 44px 24px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }

      .reveal {
        opacity: 1;
        transform: none
      }
    }


    /* ticker */
    .ticker {
      background: var(--ink);
      color: var(--paper);
      overflow: hidden;
      border-top: 3px solid var(--sun)
    }

    .ticker-track {
      display: flex;
      gap: 0;
      white-space: nowrap;
      animation: scroll 26s linear infinite;
      will-change: transform
    }

    .ticker:hover .ticker-track {
      animation-play-state: paused
    }

    .ticker-track span {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1rem;
      padding: 16px 0;
      display: inline-flex;
      align-items: center
    }

    .ticker-track span::after {
      content: '';
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--sun);
      margin: 0 28px
    }

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

    @media(prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }

      .reveal {
        opacity: 1;
        transform: none
      }

      .ticker-track {
        animation: none !important
      }
    }

/* ============================================================
   ADD TO THE END OF /Assets/css/index.css
   Moving image marquees for Results / Faculty / Testimonials
   ============================================================ */

/* fix: the ticker used var(--sun) which is undefined — use gold */
.ticker{border-top-color:var(--gold)}
.ticker-track span::after{background:var(--gold)}

/* marquee shell */
.marquee{position:relative;overflow:hidden;margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee var(--speed,45s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;gap:20px;padding-right:20px;flex-shrink:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* person card (results + faculty) */
.mqp{width:250px;flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.mqp:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.mqp .photo{position:relative;height:215px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(150deg,var(--a1,#e8353c),var(--a2,#a1141b))}
.mqp .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.mqp .photo .mono{font-family:var(--display);font-weight:800;font-size:3.4rem;color:rgba(255,255,255,.92);letter-spacing:.02em}
.mqp .photo .pill{position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(255,255,255,.95);color:var(--navy);font-family:var(--display);font-weight:800;font-size:.78rem;padding:6px 12px;border-radius:50px;display:inline-flex;gap:6px;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.mqp .photo .pill i{color:var(--red)}
.mqp .body{padding:16px 18px;text-align:center}
.mqp .body h4{font-size:1.08rem}
.mqp .body .line{font-family:var(--display);font-weight:700;font-size:.84rem;color:var(--red);margin:4px 0 2px}
.mqp .body .ex{font-size:.76rem;color:var(--muted)}
.mqp .body p{font-size:.83rem;color:var(--slate);margin-top:8px;line-height:1.5}

/* testimonial card */
.mqt{width:370px;flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:26px;display:flex;flex-direction:column}
.mqt .stars{color:var(--gold);font-size:.85rem;margin-bottom:10px}
.mqt p{font-size:.94rem;color:var(--slate);margin-bottom:18px;flex:1}
.mqt .who{display:flex;align-items:center;gap:12px}
.mqt .who .av{position:relative;width:46px;height:46px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--a1,#16224f),var(--a2,#0f1838));color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem;flex-shrink:0}
.mqt .who .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mqt .who b{font-size:.92rem;color:var(--navy)}
.mqt .who span{font-size:.78rem;color:var(--muted);display:block}

@media(max-width:760px){
  .mqp{width:210px}
  .mqp .photo{height:180px}
  .mqt{width:290px;padding:22px}
}

/* leadership avatars: photo fills the square, initials show if it fails */
.lcard .av{position:relative;overflow:hidden}
.lcard .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* the mobile-only demo button in the menu is hidden on desktop */
.m-cta{display:none}

/* --- mobile nav: Courses is a click-to-open dropdown (accordion) + demo button --- */
@media(max-width:760px){
  .menu.open{padding-bottom:14px}
  .menu.open .has-mega{flex-direction:column;align-items:stretch}
  .menu.open .has-mega>a{justify-content:space-between}
  .menu.open .has-mega>a i{transition:transform .25s}
  .menu.open .mega{
    display:none;position:static;transform:none;opacity:1;visibility:visible;
    width:100%;box-shadow:none;border:0;border-radius:0;
    padding:2px 0 8px 14px;margin-top:2px;grid-template-columns:1fr;gap:2px;
  }
  .menu.open .has-mega.open .mega{display:grid}
  .menu.open .has-mega.open>a{color:var(--navy);background:var(--soft-2)}
  .menu.open .has-mega.open>a i{transform:rotate(180deg)}
  .menu.open .mega h5{margin:8px 0 2px}
  .menu.open .m-cta{display:block;margin-top:10px}
  .menu.open .m-cta .btn{display:inline-flex;width:100%}
}

/* respect reduced motion: stop autoplay, let users swipe instead */
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}


/* ============================================================
   Shared header/nav (injected by layout.js) + avatar photos
   ============================================================ */
.m-cta{display:none}
@media(max-width:760px){
  .menu.open{padding-bottom:14px}
  .menu.open .has-mega{flex-direction:column;align-items:stretch}
  .menu.open .has-mega>a{justify-content:space-between}
  .menu.open .has-mega>a i{transition:transform .25s}
  .menu.open .mega{display:none;position:static;transform:none;opacity:1;visibility:visible;width:100%;box-shadow:none;border:0;border-radius:0;padding:2px 0 8px 14px;margin-top:2px;grid-template-columns:1fr;gap:2px}
  .menu.open .has-mega.open .mega{display:grid}
  .menu.open .has-mega.open>a{color:var(--navy);background:var(--soft-2)}
  .menu.open .has-mega.open>a i{transform:rotate(180deg)}
  .menu.open .mega h5{margin:8px 0 2px}
  .menu.open .m-cta{display:block;margin-top:10px}
  .menu.open .m-cta .btn{display:inline-flex;width:100%}
}
.topper .av,.mcard .av,.lcard .av,.tperson .av{position:relative;overflow:hidden}
.topper .av img,.mcard .av img,.lcard .av img,.tperson .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}