:root {
                  --navy: #0f2a6b;
                  --navy2: #1f3a8f;
                  --dark: #06133a;
                  --cyan: #19cfe3;
                  --gold: #f7ba00;
                  --gold-l: #ffd84d;
                  --gold-d: #d99100;
                  --orange: #e8833a;
                  --cream: #fdf0d5;
                  --cream-d: #f7dfae;
                  --cream-l: #fff5da;
                  --cream-m: #fffaf1;
                  --cream-s: #fffdf8;
                  --pale: #ffe9a6;
                  --white: #fff;
                  --line: #dfe5f5;
                  --line-d: #b9c6ea;
                  --text: #3d4766;
                  --muted: #5d6785;
                  --ink: #212529;
                  --navy-rgb: 15, 42, 107;
                  --dark-rgb: 6, 19, 58;
                  --gold-rgb: 247, 186, 0;
                  --orange-rgb: 232, 131, 58;
                  --cream-rgb: 253, 240, 213;
                  --white-rgb: 255, 255, 255
              }

              * {
                  font-family: 'Poppins', sans-serif;
                  box-sizing: border-box
              }

              body {
                  margin: 0;
                  background: var(--cream);
                  overflow-x: hidden
              }

              a {
                  text-decoration: none
              }

              img {
                  vertical-align: middle
              }

              h2,
              h3,
              h4,
              .serif {
                  font-family: 'Playfair Display', serif
              }

              .sec-head {
                  text-align: center;
                  padding: 0 20px;
                  margin-bottom: 20px;
              }

              .sec-head h2 {
                  margin: 0;
                  font-weight: 800;
                  color: var(--navy);
                  font-size: clamp(2.4rem, 5vw, 3rem);
                  line-height: 1.1
              }

              .sec-head h2 b,
              .gold-text {
                  background: linear-gradient(100deg, var(--gold-l), var(--gold) 50%, var(--gold-d));
                  -webkit-background-clip: text;
                  background-clip: text;
                  color: transparent
              }

              .sec-sub {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: clamp(8px, 2vw, 14px);
                  margin-top: 10px;
                  font-size: clamp(.62rem, 2vw, .78rem);
                  font-weight: 500;
                  letter-spacing: clamp(2px, .8vw, 4px);
                  text-transform: uppercase;
                  color: var(--navy)
              }

              .sec-sub i {
                  width: clamp(24px, 5vw, 70px);
                  height: 2px;
                  background: var(--gold)
              }

              .sec-sub s {
                  width: 5px;
                  height: 5px;
                  border-radius: 50%;
                  background: var(--gold)
              }

              .label {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  font-size: .78rem;
                  font-weight: 700;
                  letter-spacing: 3px;
                  text-transform: uppercase;
                  color: var(--navy)
              }

              .label i {
                  color: var(--gold)
              }

              .label::after {
                  content: "";
                  flex: 1;
                  height: 2px;
                  background: linear-gradient(90deg, var(--gold), transparent)
              }

              .box {
                  background: var(--white);
                  border: 2px solid var(--line);
                  border-radius: 20px;
                  box-shadow: 0 6px 16px rgba(var(--navy-rgb), .10);
                  transition: .35s
              }

              .box:hover {
                  border-color: var(--line-d);
                  box-shadow: 0 12px 28px rgba(var(--navy-rgb), .2)
              }

              .tag {
                  display: inline-block;
                  padding: 4px 14px;
                  border-radius: 30px;
                  background: var(--gold);
                  color: var(--navy);
                  font-size: .68rem;
                  font-weight: 700;
                  letter-spacing: .8px;
                  text-transform: uppercase
              }

              .pill-btn {
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  border-radius: 30px;
                  background: var(--gold);
                  color: var(--navy);
                  font-weight: 600;
                  transition: .3s
              }

              .pill-btn:hover {
                  background: var(--white);
                  color: var(--navy);
                  transform: translateY(-2px)
              }

              .u-link {
                  display: inline-block;
                  padding-bottom: 4px;
                  border-bottom: 3px solid var(--gold);
                  color: var(--navy);
                  font-weight: 600;
                  font-size: .92rem
              }

              .u-link:hover {
                  color: var(--navy)
              }

              .u-link i {
                  margin-left: 6px;
                  font-size: .75rem
              }

              .bg-blob {
                  position: absolute;
                  z-index: 0;
                  pointer-events: none;
                  border-radius: 50%
              }

              .s-wrap {
                  position: relative;
                  overflow: hidden;
                  line-height: 1.5;
                  color: var(--ink)
              }

              .s-wrap>* {
                  position: relative;
                  z-index: 2
              }

              .s-wrap>.bg-blob {
                  position: absolute;
                  z-index: 0
              }

              /* ===== NAVBAR ===== */
              .nav-wrap {
                  position: fixed !important;
                  top: 14px;
                  left: 0;
                  right: 0;
                  z-index: 9999;
                  display: flex;
                  justify-content: center;
                  padding: 0 20px;
                  transition: top .3s
              }

              .nav-wrap.nav-scrolled {
                  top: 8px
              }

              .nav-wrap.nav-scrolled .nav-pill {
                  box-shadow: 0 8px 24px rgba(var(--dark-rgb), .35)
              }

              .nav-shell {
                  position: relative;
                  width: 100%;
                  max-width: 1150px
              }

              .nav-topstrip {
                  position: relative;
                  z-index: 1;
                  width: min(600px, 60%);
                  margin: 0 auto;
                  height: 36px;
                  background: linear-gradient(90deg, var(--dark), var(--navy2) 50%, var(--dark));
                  border: 2px solid var(--cyan);
                  border-bottom: 0;
                  border-radius: 20px 20px 0 0;
                  justify-content: space-between;
                  align-items: center;
                  padding: 3px 26px 6px;
                  color: var(--cream);
                  font-size: .76rem;
                  font-weight: 500;
                  letter-spacing: .5px;
                  white-space: nowrap
              }

              .nav-topstrip span {
                  display: inline-flex;
                  align-items: center;
                  gap: 8px
              }

              .nav-topstrip i {
                  display: inline-grid;
                  place-items: center;
                  width: 20px;
                  height: 20px;
                  margin: 0;
                  border-radius: 50%;
                  background: var(--gold);
                  color: var(--navy);
                  font-size: .58rem
              }

              .nav-pill {
                  position: relative;
                  min-height: 60px;
                  padding: 8px 14px;
                  border-radius: 30px;
                  border: 2px solid var(--cyan);
                  background: radial-gradient(ellipse 190px 70px at 50% 40%, var(--cream-l), transparent 72%), var(--cream);
                  box-shadow: 0 4px 14px rgba(var(--dark-rgb), .15)
              }

              .nav-group {
                  list-style: none;
                  margin: 0;
                  padding: 8px 0 4px;
                  justify-content: space-evenly;
                  gap: 2px
              }

              .nav-right {
                  padding-top: 0
              }

              .nav-link {
                  position: relative;
                  isolation: isolate;
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  padding: 11px 16px;
                  border-radius: 999px;
                  color: var(--navy2);
                  font-size: 1rem;
                  font-weight: 600;
                  white-space: nowrap;
                  transition: color .25s
              }

              .nav-link::before {
                  content: "";
                  position: absolute;
                  inset: 0;
                  z-index: -1;
                  border-radius: inherit;
                  background: var(--navy2);
                  opacity: 0;
                  transform: scale(.7);
                  transition: .28s cubic-bezier(.3, 1.4, .5, 1)
              }

              .nav-link:hover,
              .nav-has-drop:hover>.nav-link,
              .nav-link.nav-active {
                  color: var(--white)
              }

              .nav-link:hover::before,
              .nav-has-drop:hover>.nav-link::before,
              .nav-link.nav-active::before {
                  opacity: 1;
                  transform: none
              }

              .nav-link .fa-chevron-down {
                  font-size: .6rem;
                  transition: transform .25s
              }

              li:hover>.nav-link .fa-chevron-down {
                  transform: rotate(180deg)
              }

              .nav-home .nav-ic {
                  font-size: 1rem
              }

              .nav-cta {
                  background: linear-gradient(135deg, var(--orange), var(--gold));
                  color: var(--navy);
                  font-weight: 600;
                  box-shadow: 0 6px 14px rgba(var(--orange-rgb), .4)
              }

              .nav-cta:hover {
                  color: var(--white)
              }

              .nav-ic {
                  font-size: .78rem;
                  color: var(--orange);
                  transition: color .25s
              }

              .nav-link:hover .nav-ic,
              li:hover>.nav-link .nav-ic,
              .nav-active .nav-ic,
              .nav-cta:hover .nav-ic {
                  color: var(--gold)
              }

              .nav-cta .nav-ic {
                  color: var(--navy)
              }

              .nav-cta:hover .nav-ic {
                  color: var(--white)
              }

              .nav-logo-gap {
                  width: 112px;
                  flex: none
              }

              .nav-logo-badge {
                  display: block;
                  width: 48px;
                  height: 48px;
                  border-radius: 50%;
                  background: var(--cream);
                  overflow: hidden;
                  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--navy2)
              }

              .nav-logo-badge img {
                  width: 100%;
                  height: 100%;
                  display: block;
                  object-fit: cover;
                  object-position: 50% 45%;
                  transform: scale(1.13)
              }

              .nav-has-drop {
                  position: relative
              }

              /* dropdowns: tap-to-open accordion on mobile, hover panel on desktop */
              .nav-drop {
                  display: none;
                  margin: 2px 0 6px 14px;
                  padding: 6px;
                  background: rgba(var(--navy-rgb), .06);
                  border-radius: 18px
              }

              .nav-has-drop.open>.nav-drop {
                  display: block
              }

              .nav-has-drop.open>.nav-link {
                  color: var(--white)
              }

              .nav-has-drop.open>.nav-link::before {
                  opacity: 1;
                  transform: none
              }

              .nav-has-drop.open>.nav-link .fa-chevron-down {
                  transform: rotate(180deg)
              }

              .nav-link .fa-chevron-down {
                  margin-left: auto
              }

              .nav-drop a {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  padding: 10px 14px;
                  border-radius: 12px;
                  color: var(--navy2);
                  font-size: .95rem;
                  font-weight: 500;
                  transition: .2s
              }

              .nav-drop a i {
                  color: var(--orange);
                  width: 16px;
                  text-align: center
              }

              .nav-drop a:hover {
                  background: var(--cream-d);
                  padding-left: 18px
              }

              .nav-toggle {
                  display: grid;
                  place-items: center;
                  background: var(--navy2);
                  color: var(--white);
                  border: 0;
                  width: 42px;
                  height: 42px;
                  border-radius: 50%
              }


              /* ===== HERO ===== */
              .herosl {
                  position: relative;
                  min-height: 100vh;
                  overflow: hidden;
                  color: var(--white);
                  background: var(--dark)
              }

              .herosl-video {
                  position: absolute;
                  inset: 0;
                  width: 100%;
                  height: 100%;
                  object-fit: cover
              }

              .herosl-overlay {
                  position: absolute;
                  inset: 0;
                  z-index: 1;
                  background: linear-gradient(95deg, rgba(var(--dark-rgb), .96) 0%, rgba(var(--dark-rgb), .8) 38%, rgba(var(--dark-rgb), .2) 100%)
              }

              .herosl-texts {
                  position: relative;
                  z-index: 4;
                  width: 100%;
                  max-width: 1560px;
                  margin-inline: auto;
                  padding: 130px 20px 10px;
                  pointer-events: none
              }

              .herosl-copy {
                  position: relative;
                  max-width: 100%;
                  pointer-events: auto
              }

              .herosl-eye {
                  display: flex;
                  align-items: center;
                  gap: 14px;
                  font-size: 12px;
                  font-weight: 600;
                  letter-spacing: 2.5px;
                  text-transform: uppercase;
                  color: var(--cream)
              }

              .herosl-eye b {
                  width: 54px;
                  height: 2px;
                  background: linear-gradient(90deg, var(--gold), transparent)
              }

              .herosl-copy h1 {
                  margin: 16px 0 20px;
                  font-family: 'Playfair Display', serif;
                  font-weight: 700;
                  line-height: 1
              }

              .herosl-copy h1>span {
                  display: block;
                  animation: herosl-rise .9s both cubic-bezier(.2, .8, .2, 1)
              }

              .herosl-l1 {
                  font-style: italic;
                  font-weight: 600;
                  font-size: clamp(26px, 3vw, 42px);
                  color: var(--cream);
                  opacity: .92
              }

              .herosl-l2 {
                  font-size: clamp(56px, 7.6vw, 118px);
                  line-height: .95;
                  background: linear-gradient(100deg, var(--gold-l), var(--gold) 45%, var(--orange));
                  -webkit-background-clip: text;
                  background-clip: text;
                  color: transparent;
                  animation-delay: .15s !important;
                  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35))
              }

              .herosl-l3 {
                  position: relative;
                  display: inline-block !important;
                  font-size: clamp(34px, 4.6vw, 68px);
                  animation-delay: .3s !important
              }

              .herosl-l3 em {
                  color: var(--gold)
              }

              .herosl-l3 svg {
                  position: absolute;
                  left: 0;
                  bottom: -14px;
                  width: 100%;
                  height: 16px;
                  overflow: visible
              }

              .herosl-l3 path {
                  fill: none;
                  stroke: var(--cyan);
                  stroke-width: 4;
                  stroke-linecap: round;
                  stroke-dasharray: 420;
                  stroke-dashoffset: 420;
                  animation: herosl-draw 1.4s .9s forwards
              }

              @keyframes herosl-rise {
                  from {
                      opacity: 0;
                      transform: translateY(40px)
                  }
              }

              @keyframes herosl-draw {
                  to {
                      stroke-dashoffset: 0
                  }
              }

              .herosl-copy p {
                  max-width: 460px;
                  margin: 30px auto 24px;
                  font-size: clamp(15px, 1.2vw, 16px);
                  line-height: 1.7;
                  opacity: .92
              }

              .herosl-acts {
                  gap: 22px
              }

              .herosl-btn {
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;
                  padding: 14px 30px;
                  border-radius: 40px;
                  font-weight: 600;
                  transition: .3s;
                  background: linear-gradient(135deg, var(--orange), var(--gold));
                  color: var(--navy);
                  box-shadow: 0 10px 24px rgba(var(--orange-rgb), .4)
              }

              .herosl-btn:hover {
                  transform: translateY(-3px);
                  box-shadow: 0 14px 28px rgba(0, 0, 0, .4)
              }

              .herosl-ghost {
                  display: inline-flex;
                  align-items: center;
                  gap: 12px;
                  color: var(--white);
                  font-weight: 500;
                  font-size: .95rem
              }

              .herosl-ghost i {
                  width: 46px;
                  height: 46px;
                  border-radius: 50%;
                  display: grid;
                  place-items: center;
                  border: 1.5px solid var(--cream);
                  font-size: .85rem;
                  color: var(--gold);
                  transition: .3s
              }

              .herosl-ghost:hover i {
                  background: var(--gold);
                  color: var(--navy);
                  border-color: var(--gold)
              }

              .herosl-badge {
                  position: absolute;
                  right: -6px;
                  top: -34px;
                  width: 112px;
                  height: 112px;
                  border-radius: 50%;
                  background: rgba(var(--dark-rgb), .55);
                  border: 1px solid rgba(var(--cream-rgb), .35);
                  backdrop-filter: blur(8px);
                  place-items: center
              }

              .herosl-badge svg {
                  position: absolute;
                  inset: 0;
                  width: 100%;
                  height: 100%;
                  animation: herosl-spin 16s linear infinite
              }

              .herosl-badge text {
                  font-size: 9.4px;
                  font-weight: 600;
                  letter-spacing: 2.4px;
                  fill: var(--cream)
              }

              .herosl-badge i {
                  color: var(--gold);
                  font-size: 1.5rem
              }

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

              .herosl-track {
                  position: relative;
                  z-index: 4;
                  display: flex;
                  align-items: center;
                  gap: 24px;
                  overflow-x: auto;
                  scroll-snap-type: x mandatory;
                  scroll-padding-inline: 24px;
                  scrollbar-width: none;
                  padding: 40px 24px 30px
              }

              .herosl-track::-webkit-scrollbar {
                  display: none
              }

              .herosl-card {
                  position: relative;
                  flex: 0 0 min(240px, 72%);
                  height: 340px;
                  scroll-snap-align: start;
                  border-radius: clamp(70px, 16vw, 90px) 16px clamp(70px, 16vw, 90px) 16px;
                  overflow: hidden;
                  border: 3px solid var(--cream);
                  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 6px rgba(var(--gold-rgb), .16)
              }

              .herosl-card:nth-child(odd) {
                  top: -22px
              }

              .herosl-card:nth-child(even) {
                  top: 34px;
                  border-radius: 16px clamp(70px, 16vw, 90px) 16px clamp(70px, 16vw, 90px)
              }

              .herosl-card img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                  transition: transform .8s
              }

              .herosl-card:hover img {
                  transform: scale(1.07)
              }

              .herosl-card::after {
                  content: "";
                  position: absolute;
                  inset: 0;
                  background: linear-gradient(transparent 42%, rgba(var(--dark-rgb), .96))
              }

              .herosl-no {
                  position: absolute;
                  z-index: 2;
                  top: 16px;
                  left: 50%;
                  transform: translateX(-50%);
                  font-family: 'Playfair Display', serif;
                  font-size: 3rem;
                  line-height: 1;
                  color: transparent;
                  -webkit-text-stroke: 1.5px var(--cream);
                  opacity: .85
              }

              .herosl-cap {
                  position: absolute;
                  z-index: 2;
                  left: 18px;
                  right: 18px;
                  bottom: 22px;
                  text-align: center
              }

              .herosl-cap b {
                  display: block;
                  font-family: 'Playfair Display', serif;
                  font-style: italic;
                  font-size: 1.55rem;
                  line-height: 1.1;
                  color: var(--gold)
              }

              .herosl-cap span {
                  display: block;
                  margin-top: 6px;
                  font-size: .8rem;
                  opacity: .92
              }

              @keyframes herosl-pop {
                  0% {
                      opacity: .3;
                      transform: scale(.85) rotate(4deg)
                  }

                  15%,
                  85% {
                      opacity: 1;
                      transform: none
                  }

                  100% {
                      opacity: 0;
                      transform: scale(.8) rotate(-5deg)
                  }
              }

              .herosl-ctrl {
                  position: relative;
                  z-index: 6;
                  gap: 14px;
                  align-items: center;
                  margin-bottom: 80px
              }

              .herosl-bar {
                  width: 130px;
                  height: 4px;
                  border-radius: 4px;
                  background: rgba(var(--white-rgb), .25);
                  overflow: hidden;
                  margin-right: 6px
              }

              .herosl-bar span {
                  display: block;
                  height: 100%;
                  width: 0;
                  background: linear-gradient(90deg, var(--gold), var(--orange))
              }

              .herosl-nv {
                  width: 46px;
                  height: 46px;
                  border-radius: 50%;
                  border: 1.5px solid rgba(var(--cream-rgb), .6);
                  background: rgba(var(--cream-rgb), .1);
                  color: var(--white);
                  backdrop-filter: blur(6px);
                  transition: .3s;
                  cursor: pointer
              }

              .herosl-nv:hover {
                  background: var(--gold);
                  color: var(--navy);
                  border-color: var(--gold)
              }

              .herosl-wave {
                  position: absolute;
                  bottom: -1px;
                  left: 0;
                  width: 100%;
                  z-index: 5;
                  line-height: 0
              }



              /* ===== LATEST NEWS ===== */
              .newsx {
                  padding: 60px 0 190px;
                  background: linear-gradient(var(--cream), var(--cream-m) 24%, var(--cream-s))
              }


              .newsx .sec-head {
                  margin-bottom: 48px
              }

              .newsx-blob {
                  right: -130px;
                  bottom: -60px;
                  width: 400px;
                  height: 400px;
                  background: var(--gold)
              }

              .newsx-feat {
                  position: relative;
                  transform: rotateZ(-.8deg);
                  transform-origin: left center
              }

              .newsx-feat::before {
                  content: "";
                  position: absolute;
                  inset: -12px;
                  border: 3px solid var(--gold);
                  border-radius: 48px;
                  z-index: 0
              }

              .newsx-feat::after {
                  content: "";
                  position: absolute;
                  inset: 14px -14px -16px 24px;
                  background: var(--gold);
                  border-radius: 44px;
                  z-index: -1
              }

              .newsx-feat .swiper {
                  position: relative;
                  z-index: 1;
                  height: 480px;
                  border-radius: 38px;
                  overflow: hidden;
                  background: var(--navy);
                  box-shadow: 0 30px 60px rgba(var(--navy-rgb), .35)
              }

              .newsx-wrap {
                  position: relative
              }

              .newsx-slide {
                  position: relative;
                  overflow: hidden
              }

              .newsx-slide>img {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 62%;
                  object-fit: cover;
                  object-position: 50% 16%;
                  transform-origin: 50% 20%;
                  filter: saturate(1.1) contrast(1.04)
              }

              .newsx-cap {
                  position: absolute;
                  z-index: 2;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  padding: 34px clamp(22px, 3.2vw, 44px) 26px;
                  color: var(--white);
                  background: linear-gradient(160deg, var(--navy2), var(--navy));
                  border-radius: 50% 50% 0 0/34px 34px 0 0
              }

              .newsx-meta {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  flex-wrap: wrap;
                  font-size: .8rem;
                  font-weight: 500
              }

              .newsx-meta i {
                  color: var(--gold);
                  margin-right: 6px
              }

              .newsx-cap h3 {
                  margin: 10px 0 6px;
                  font-weight: 700;
                  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
                  line-height: 1.15;
                  color: var(--white)
              }

              .newsx-cap p {
                  margin: 0 0 16px;
                  font-size: .88rem;
                  line-height: 1.55;
                  opacity: .92;
                  max-width: 520px
              }

              .newsx-btn {
                  padding: 10px 24px;
                  font-size: .88rem
              }

              .newsx-badge {
                  position: absolute;
                  z-index: 6;
                  top: 24px;
                  left: 26px;
                  display: inline-flex;
                  align-items: center;
                  gap: 8px;
                  padding: 8px 18px;
                  border-radius: 30px;
                  background: var(--gold);
                  color: var(--navy);
                  font-size: .78rem;
                  font-weight: 700;
                  letter-spacing: 1px;
                  text-transform: uppercase
              }

              .newsx-count {
                  position: absolute;
                  z-index: 6;
                  top: 24px;
                  right: 26px;
                  padding: 8px 16px;
                  border-radius: 30px;
                  background: rgba(var(--navy-rgb), .82);
                  color: var(--white);
                  font-size: .78rem;
                  font-weight: 600;
                  letter-spacing: 1px
              }

              .newsx-count b {
                  color: var(--gold)
              }

              .newsx-arw {
                  position: absolute;
                  z-index: 8;
                  top: 42%;
                  width: 46px;
                  height: 46px;
                  border-radius: 50%;
                  border: 0;
                  background: var(--white);
                  color: var(--navy);
                  box-shadow: 0 8px 20px rgba(var(--navy-rgb), .28);
                  cursor: pointer;
                  transition: .3s
              }

              .newsx-arw:hover {
                  background: var(--gold)
              }

              .newsx-prev {
                  left: 8px
              }

              .newsx-next {
                  right: 8px
              }

              .newsx .newsx-dots.swiper-pagination {
                  position: static;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 12px;
                  width: auto;
                  margin-top: 36px
              }

              .newsx-dots::before,
              .newsx-dots::after {
                  content: "";
                  width: 42px;
                  height: 2px;
                  background: var(--gold)
              }

              .newsx-dots .swiper-pagination-bullet {
                  width: 10px;
                  height: 10px;
                  margin: 0 !important;
                  background: var(--white);
                  border: 2px solid var(--line-d);
                  opacity: 1
              }

              .newsx-dots .swiper-pagination-bullet-active {
                  background: var(--gold);
                  border-color: var(--gold);
                  transform: scale(1.25)
              }

              .newsx-slide.swiper-slide-active .newsx-cap>* {
                  animation: newsx-rise .7s both
              }

              .newsx-slide.swiper-slide-active .newsx-cap>:nth-child(2) {
                  animation-delay: .1s
              }

              .newsx-slide.swiper-slide-active .newsx-cap>:nth-child(3) {
                  animation-delay: .2s
              }

              .newsx-slide.swiper-slide-active .newsx-cap>:nth-child(4) {
                  animation-delay: .3s
              }

              @keyframes newsx-rise {
                  from {
                      opacity: 0;
                      transform: translateY(22px)
                  }
              }

              .newsx-slide.swiper-slide-active>img {
                  animation: newsx-zoom 7s ease-out both
              }

              @keyframes newsx-zoom {
                  from {
                      transform: scale(1.14)
                  }

                  to {
                      transform: scale(1)
                  }
              }

              .newsx-slide::before {
                  content: "";
                  position: absolute;
                  z-index: 1;
                  top: 0;
                  left: 0;
                  right: 0;
                  height: 62%;
                  pointer-events: none;
                  background: radial-gradient(circle at 88% 6%, rgba(var(--gold-rgb), .38), transparent 46%), linear-gradient(180deg, rgba(var(--navy-rgb), .22), transparent 38%, rgba(var(--navy-rgb), .18))
              }

              .newsx-slide::after {
                  content: "";
                  position: absolute;
                  z-index: 1;
                  top: 0;
                  left: -60%;
                  width: 36%;
                  height: 62%;
                  pointer-events: none;
                  opacity: 0;
                  background: linear-gradient(105deg, transparent, rgba(var(--white-rgb), .38), transparent);
                  transform: skewX(-16deg)
              }

              .newsx-slide.swiper-slide-active::after {
                  animation: newsx-shine 1.5s .6s ease-out both
              }

              @keyframes newsx-shine {
                  from {
                      left: -60%;
                      opacity: 1
                  }

                  to {
                      left: 130%;
                      opacity: 1
                  }
              }

              .newsx-listwrap {
                  padding: 8px
              }

              .newsx-label {
                  margin: 0 0 10px 8px
              }

              .newsx-list {
                  overflow: hidden;
                  padding-top: 14px
              }

              .newsx-list .swiper-slide {
                  height: auto;
                  padding: 8px 12px
              }

              .newsx-card {
                  position: relative;
                  display: flex;
                  align-items: center;
                  gap: 16px;
                  height: 100%;
                  min-height: 124px;
                  padding: 14px 18px 14px 14px;
                  cursor: pointer
              }

              .newsx-th {
                  width: clamp(80px, 9vw, 106px);
                  aspect-ratio: 106/94;
                  flex: none;
                  object-fit: cover;
                  object-position: 50% 20%;
                  border-radius: 12px;
                  border: 3px solid var(--white);
                  box-shadow: 0 6px 14px rgba(var(--navy-rgb), .22);
                  transition: .4s
              }

              .newsx-card:hover .newsx-th {
                  transform: rotate(-3deg) scale(1.06)
              }

              .newsx-body {
                  flex: 1;
                  min-width: 0;
                  display: grid;
                  grid-template-columns: auto 1fr;
                  grid-template-areas: "date txt" "desc desc";
                  gap: 4px 12px;
                  align-items: center
              }

              .newsx-date {
                  grid-area: date;
                  width: 44px;
                  padding: 5px 0;
                  border-radius: 10px;
                  background: var(--pale);
                  color: var(--navy);
                  text-align: center;
                  font-size: .6rem;
                  font-weight: 700;
                  line-height: 1.1;
                  transition: .35s
              }

              .newsx-date b {
                  display: block;
                  font-size: 1.15rem
              }

              .newsx-txt {
                  grid-area: txt;
                  min-width: 0
              }

              .newsx-txt .tag {
                  padding: 2px 10px;
                  background: var(--white);
                  border: 1px solid var(--line-d);
                  color: var(--navy2);
                  font-size: .58rem;
                  transition: .35s
              }

              .newsx-txt h4 {
                  margin: 3px 0 0;
                  font-size: 1.05rem;
                  color: var(--navy);
                  line-height: 1.2;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis
              }

              .newsx-body p {
                  grid-area: desc;
                  margin: 0;
                  font-size: .74rem;
                  line-height: 1.4;
                  color: var(--muted);
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden
              }

              .newsx-go {
                  flex: none;
                  width: 34px;
                  height: 34px;
                  border-radius: 50%;
                  display: grid;
                  place-items: center;
                  background: var(--pale);
                  color: var(--navy);
                  font-size: .8rem;
                  transition: .3s
              }

              .newsx-card:hover .newsx-go {
                  background: var(--navy);
                  color: var(--white)
              }

              .is-active .newsx-card {
                  border-color: var(--gold);
                  background: linear-gradient(135deg, var(--cream-l), var(--white) 70%);
                  box-shadow: 0 0 0 3px var(--gold), 0 14px 30px rgba(var(--navy-rgb), .25)
              }

              .is-active .newsx-card::before {
                  content: "Now Showing";
                  position: absolute;
                  top: -12px;
                  left: 22px;
                  padding: 2px 12px;
                  border-radius: 30px;
                  background: var(--navy);
                  color: var(--gold);
                  font-size: .56rem;
                  font-weight: 700;
                  letter-spacing: 1.2px;
                  text-transform: uppercase
              }

              .is-active .newsx-th {
                  box-shadow: 0 0 0 3px var(--gold), 0 8px 16px rgba(var(--navy-rgb), .28)
              }

              .is-active .newsx-date,
              .is-active .newsx-go {
                  background: var(--navy);
                  color: var(--white)
              }

              .is-active .newsx-txt .tag {
                  background: var(--gold);
                  border-color: var(--gold);
                  color: var(--navy)
              }

              .newsx-all {
                  margin: 18px 0 0 8px
              }

              .newsx-girl {
                  position: absolute;
                  z-index: 4;
                  right: 0;
                  bottom: 30px;
                  width: clamp(150px, 14vw, 240px);
                  height: auto;
                  pointer-events: none;
                  filter: drop-shadow(0 12px 18px rgba(var(--navy-rgb), .3))
              }

              @media(prefers-reduced-motion:reduce) {

                  .newsx *,
                  .newsx *::before,
                  .newsx *::after,
                  .aboutx-ring {
                      animation: none !important
                  }
              }




              /* ===== ABOUT US ===== */
              .aboutx {
                  padding: 0 0 60px;
                  background: linear-gradient(var(--cream-s), var(--cream-m) 60%, var(--cream))
              }

              .aboutx .sec-head {
                  margin-bottom: 48px
              }

              .aboutx-wrap {
                  position: relative;
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  gap: clamp(12px, 2vw, 18px);
                  max-width: 640px;
                  height: clamp(400px, 75vw, 600px);
                  margin: 0 auto
              }

              .aboutx-bgc {
                  right: -60px;
                  bottom: -40px;
                  width: clamp(240px, 40vw, 380px);
                  aspect-ratio: 1;
                  background: var(--pale)
              }

              .aboutx-dots {
                  position: absolute;
                  z-index: 0;
                  left: -20px;
                  top: -20px;
                  width: clamp(110px, 18vw, 170px);
                  aspect-ratio: 1;
                  background: radial-gradient(var(--gold) 2.6px, transparent 3.2px) 0 0/18px 18px;
                  opacity: .8
              }

              .aboutx-orb {
                  position: absolute;
                  z-index: 1;
                  right: 10%;
                  top: 6px;
                  width: 34px;
                  height: 34px;
                  border: 4px solid var(--cyan);
                  border-radius: 50%
              }

              .aboutx-col {
                  position: relative;
                  z-index: 2;
                  display: flex;
                  flex-direction: column;
                  gap: inherit;
                  min-height: 0
              }

              .aboutx-col1 {
                  padding-bottom: clamp(30px, 6vw, 48px)
              }

              .aboutx-col2 {
                  padding-top: clamp(30px, 6vw, 48px)
              }

              .aboutx-ph {
                  position: relative;
                  flex: 1;
                  min-height: 0;
                  margin: 0;
                  overflow: hidden;
                  border: 4px solid var(--cream);
                  background: var(--navy)
              }

              .aboutx-ph img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                  filter: saturate(1.1) contrast(1.04);
                  transition: transform .8s
              }

              .aboutx-ph:hover img {
                  transform: scale(1.07)
              }

              .aboutx-ph::after {
                  content: "";
                  position: absolute;
                  inset: 0;
                  pointer-events: none;
                  background: linear-gradient(transparent 52%, rgba(var(--navy-rgb), .9))
              }

              .aboutx-ph figcaption {
                  position: absolute;
                  z-index: 2;
                  left: 12px;
                  right: 12px;
                  bottom: 14px;
                  text-align: center;
                  font-family: 'Playfair Display', serif;
                  font-style: italic;
                  font-weight: 600;
                  font-size: clamp(.95rem, 2.4vw, 1.3rem);
                  line-height: 1.1;
                  color: var(--gold)
              }

              .aboutx-ph-a {
                  border-radius: clamp(90px, 20vw, 130px) 18px clamp(90px, 20vw, 130px) 18px;
                  box-shadow: 0 0 0 3px var(--gold), 0 26px 48px rgba(var(--navy-rgb), .3)
              }

              .aboutx-ph-b {
                  border-radius: 18px clamp(60px, 14vw, 90px) 18px clamp(60px, 14vw, 90px);
                  box-shadow: 0 0 0 3px var(--cyan), 0 22px 40px rgba(var(--navy-rgb), .28)
              }

              .aboutx-ph-c {
                  border-radius: clamp(60px, 14vw, 90px) 18px clamp(60px, 14vw, 90px) 18px;
                  box-shadow: 0 0 0 3px var(--orange), 0 22px 40px rgba(var(--navy-rgb), .28)
              }

              .aboutx-badge {
                  --s: clamp(92px, 22vw, 124px);
                  --r: calc(var(--s)*.379);
                  position: absolute;
                  z-index: 6;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  width: var(--s);
                  height: var(--s);
                  border-radius: 50%;
                  background: var(--cream);
                  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--navy), 0 12px 26px rgba(var(--navy-rgb), .35);
                  display: grid;
                  place-items: center
              }

              .aboutx-ring {
                  position: absolute;
                  inset: 0;
                  animation: aboutx-spin 18s linear infinite
              }

              .aboutx-ring span {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  font-size: calc(var(--s)*.075);
                  font-weight: 700;
                  line-height: 1;
                  color: var(--navy);
                  transform: translate(-50%, -50%) rotate(calc(var(--i)*9.7297deg)) translateY(calc(var(--r)*-1))
              }

              .aboutx-badge img {
                  position: relative;
                  width: calc(var(--s)*.5);
                  aspect-ratio: 1;
                  border-radius: 50%;
                  object-fit: cover;
                  object-position: 50% 45%;
                  box-shadow: 0 0 0 2px var(--gold)
              }

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

              .aboutx-note {
                  position: absolute;
                  z-index: 6;
                  left: 50%;
                  bottom: -24px;
                  transform: translateX(-50%);
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  padding: 10px 18px 10px 10px;
                  border-radius: 20px;
                  background: linear-gradient(160deg, var(--navy2), var(--navy));
                  color: var(--white);
                  box-shadow: 0 14px 28px rgba(var(--navy-rgb), .35)
              }

              .aboutx-note i {
                  width: 38px;
                  height: 38px;
                  border-radius: 50%;
                  display: grid;
                  place-items: center;
                  background: var(--gold);
                  color: var(--navy)
              }

              .aboutx-note b {
                  display: block;
                  font-family: 'Playfair Display', serif;
                  font-size: 1rem;
                  color: var(--gold);
                  line-height: 1.15
              }

              .aboutx-note span {
                  display: block;
                  font-size: .7rem;
                  opacity: .9
              }

              .aboutx-copy {
                  position: relative;
                  z-index: 3;
                  max-width: 680px;
                  padding-top: 6px
              }

              .aboutx-label {
                  margin: 0 0 12px
              }

              .aboutx-label::after {
                  max-width: 220px
              }

              .aboutx-copy h3 {
                  margin: 0;
                  font-weight: 700;
                  font-size: clamp(1.6rem, 3vw, 2.7rem);
                  line-height: 1.15;
                  color: var(--navy)
              }

              .aboutx-copy h3 em {
                  font-style: italic;
                  color: var(--gold-d)
              }

              .aboutx-lead {
                  margin: 16px 0 0;
                  font-size: clamp(.92rem, 1.2vw, .98rem);
                  line-height: 1.75;
                  color: var(--text)
              }

              .aboutx-feat {
                  position: relative;
                  z-index: 1;
                  display: flex;
                  align-items: center;
                  gap: 14px;
                  height: 100%;
                  padding: 12px 16px 12px 12px;
                  text-align: left
              }

              .aboutx-feat:hover {
                  transform: translateY(-3px)
              }

              .aboutx-ic {
                  flex: none;
                  width: 50px;
                  height: 50px;
                  border-radius: 14px;
                  display: grid;
                  place-items: center;
                  background: var(--pale);
                  color: var(--navy);
                  font-size: 1.1rem;
                  transition: .35s
              }

              .aboutx-feat:hover .aboutx-ic {
                  background: var(--navy);
                  color: var(--white)
              }

              .aboutx-feat h4 {
                  margin: 0;
                  font-size: 1.02rem;
                  line-height: 1.2;
                  color: var(--navy)
              }

              .aboutx-feat p {
                  margin: 3px 0 0;
                  font-size: .76rem;
                  line-height: 1.4;
                  color: var(--muted)
              }




              /* ===== MESSAGE  ===== */
              .msgx {
                  padding: 90px 0 60px;
                  color: var(--cream);
                  background: linear-gradient(165deg, var(--navy2), var(--navy) 45%, var(--dark))
              }

              .msgx>.msgx-wave {
                  position: absolute;
                  top: -1px;
                  left: 0;
                  width: 100%;
                  height: 60px;
                  z-index: 1
              }

              .msgx-glow {
                  left: -160px;
                  top: 28%;
                  width: 460px;
                  height: 460px;
                  background: radial-gradient(circle, rgba(var(--gold-rgb), .2), transparent 65%)
              }

              .msgx-glow2 {
                  right: -140px;
                  bottom: 4%;
                  width: 420px;
                  height: 420px;
                  background: radial-gradient(circle, rgba(25, 207, 227, .16), transparent 65%)
              }

              .msgx-head {
                  margin-bottom: 36px
              }

              .msgx-tabs {
                  display: flex;
                  justify-content: center;
                  gap: clamp(20px, 6vw, 56px);
                  margin: 0 0 34px
              }

              .msgx-tab {
                  position: relative;
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  padding: 10px 6px 14px;
                  background: none;
                  border: 0;
                  cursor: pointer;
                  font-family: 'Playfair Display', serif;
                  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
                  font-weight: 700;
                  color: rgba(var(--cream-rgb), .55);
                  transition: color .3s
              }

              .msgx-tab i {
                  color: var(--gold);
                  font-size: .85em
              }

              .msgx-tab::after {
                  content: "";
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  height: 3px;
                  border-radius: 3px;
                  background: var(--gold);
                  transform: scaleX(0);
                  transition: transform .35s
              }

              .msgx-tab:hover,
              .msgx-tab.active {
                  color: var(--white)
              }

              .msgx-tab.active::after {
                  transform: scaleX(1)
              }

              .msgx-panel {
                  display: none
              }

              .msgx-panel.active {
                  display: flex;
                  animation: msgx-in .6s both cubic-bezier(.2, .8, .2, 1)
              }

              @keyframes msgx-in {
                  from {
                      opacity: 0;
                      transform: translateY(26px)
                  }
              }

              .msgx-head h2 {
                  color: var(--white)
              }

              .msgx-head .sec-sub {
                  color: var(--cream)
              }

              /* portrait = same card design as the news slider (gold frame + gold offset block + tilt) */
              .msgx-photo {
                  position: relative;
                  width: min(300px, 78%);
                  aspect-ratio: 3/4;
                  margin: 0 auto;
                  transform: rotateZ(-.8deg);
                  transform-origin: left center
              }

              .msgx-photo::before {
                  content: "";
                  position: absolute;
                  inset: -12px;
                  border: 3px solid var(--gold);
                  border-radius: 48px;
                  z-index: 0
              }

              .msgx-photo::after {
                  content: "";
                  position: absolute;
                  inset: 14px -14px -16px 24px;
                  background: var(--gold);
                  border-radius: 44px;
                  z-index: -1
              }

              .msgx-ring {
                  display: none
              }

              .msgx-photo img {
                  position: relative;
                  z-index: 1;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 38px;
                  background: var(--navy);
                  filter: saturate(1.1) contrast(1.04);
                  box-shadow: 0 30px 60px rgba(var(--navy-rgb), .35)
              }

              .msgx-role {
                  position: absolute;
                  z-index: 3;
                  left: 50%;
                  bottom: -32px;
                  transform: translateX(-50%);
                  white-space: nowrap;
                  padding: 8px 24px;
                  border-radius: 30px;
                  background: var(--gold);
                  color: var(--navy);
                  font-family: 'Playfair Display', serif;
                  font-style: italic;
                  font-weight: 700;
                  font-size: 1rem;
                  box-shadow: 0 10px 22px rgba(0, 0, 0, .35)
              }

              .msgx-text {
                  position: relative
              }

              .msgx-text>* {
                  position: relative;
                  z-index: 1
              }


              .msgx-text .label {
                  color: var(--cream)
              }

              .msgx-text h3 {
                  margin: 14px 0 40px;
                  font-weight: 700;
                  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
                  line-height: 1.15;
                  color: var(--white)
              }

              .msgx-text h3 em {
                  color: var(--gold);
                  font-style: italic
              }

              .msgx-quote {
                  position: relative;
                  margin: 0;
                  padding-left: 28px;
                  border-left: 3px solid var(--gold)
              }

              .msgx-quote::before {
                  content: "\201C";
                  position: absolute;
                  top: -46px;
                  left: 18px;
                  font-family: 'Playfair Display', serif;
                  font-size: 6rem;
                  line-height: 1;
                  color: var(--gold)
              }

              .msgx-quote p {
                  margin: 0 0 14px;
                  font-size: clamp(.92rem, 1.2vw, 1rem);
                  line-height: 1.85;
                  color: rgba(var(--cream-rgb), .88)
              }

              .msgx-sign {
                  display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  gap: 16px;
                  margin: 26px 0 22px
              }

              .msgx-sign b {
                  font-family: 'Playfair Display', serif;
                  font-style: italic;
                  font-weight: 600;
                  font-size: 1.7rem;
                  color: var(--gold)
              }

              .msgx-sign span {
                  padding-left: 16px;
                  border-left: 2px solid var(--gold);
                  font-size: .72rem;
                  letter-spacing: 2px;
                  text-transform: uppercase;
                  opacity: .85
              }

              .msgx .u-link,
              .msgx .u-link:hover {
                  color: var(--white)
              }


              @media(min-width:992px) {
                  .nav-group {
                      min-width: 0
                  }

                  .nav-pill {

                      padding: 2px 10px;
                      min-height: 64px
                  }

                  .nav-group {
                      padding: 0;
                      gap: 2px
                  }

                  .nav-link {
                      padding: 9px clamp(6px, .65vw, 10px);
                      gap: 5px;
                      font-size: clamp(.78rem, .15rem + .95vw, .9rem);
                      font-weight: 600
                  }

                  .nav-home {
                      padding: 10px 15px
                  }

                  .nav-home .nav-ic {
                      font-size: 1.1rem
                  }

                  .nav-logo-badge {
                      position: absolute;
                      left: 50%;
                      top: -22px;
                      transform: translateX(-50%);
                      width: 92px;
                      height: 92px;
                      z-index: 5;
                      box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--navy2), 0 5px 12px rgba(var(--dark-rgb), .2);
                      transition: transform .35s
                  }

                  .nav-logo-badge:hover {
                      transform: translateX(-50%) scale(1.04)
                  }

                  .nav-link .fa-chevron-down {
                      margin-left: 0
                  }

                  .nav-drop,
                  .nav-has-drop.open>.nav-drop {
                      display: block;
                      position: absolute;
                      top: 100%;
                      left: 50%;
                      margin: 22px 0 0;
                      min-width: 280px;
                      padding: 8px;
                      background: var(--cream);
                      border-radius: 20px;
                      border: 2px solid var(--cyan);
                      box-shadow: 0 22px 44px rgba(var(--dark-rgb), .28);
                      opacity: 0;
                      visibility: hidden;
                      transform: translate(-50%, 10px);
                      transition: .28s
                  }

                  .nav-drop::before {
                      content: "";
                      position: absolute;
                      left: 0;
                      right: 0;
                      top: -24px;
                      height: 24px
                  }

                  .nav-drop a {
                      padding: 11px 16px
                  }

                  .nav-has-drop:hover .nav-drop,
                  .nav-has-drop:focus-within .nav-drop {
                      opacity: 1;
                      visibility: visible;
                      transform: translate(-50%, 0)
                  }

                  .herosl {
                      height: 100vh;
                      min-height: 700px
                  }

                  .herosl-texts {
                      height: 100%;
                      padding: 118px 28px 80px
                  }

                  .herosl-copy {
                      max-width: min(600px, 42%)
                  }

                  .herosl-eye {
                      letter-spacing: 4px
                  }

                  .herosl-copy p {
                      margin: 34px 0 28px;
                      padding-left: 18px;
                      border-left: 3px solid var(--gold)
                  }

                  .herosl-track {
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      right: 0;
                      left: 46%;
                      z-index: 2;
                      padding: 90px 14px 40px;
                      scroll-padding-inline: 14px;
                      -webkit-mask: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 14px), transparent);
                      mask: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 14px), transparent)
                  }

                  .herosl-card {
                      flex: 0 0 calc((100% - 48px)/3);
                      min-width: 190px;
                      height: clamp(340px, 54vh, 450px);
                      animation: herosl-pop linear both;
                      animation-timeline: view(inline)
                  }

                  .herosl-ctrl {
                      position: absolute;
                      right: 48px;
                      bottom: 84px;
                      margin: 0
                  }

                  .newsx {
                      padding: 60px 0
                  }

                  .newsx-feat {
                      transform: perspective(1700px) rotateY(9deg) rotateZ(-1.2deg)
                  }

                  .newsx-feat .swiper {
                      height: 500px
                  }

                  .newsx-slide>img {
                      height: 68%
                  }

                  .newsx-slide::before,
                  .newsx-slide::after {
                      height: 68%
                  }

                  .newsx-prev {
                      left: -24px
                  }

                  .newsx-next {
                      right: -22px
                  }

                  .newsx-list {
                      height: 404px;
                      padding-top: 0
                  }

                  .newsx-list .is-active .newsx-card {
                      transform: translateX(-8px)
                  }

                  .newsx-girl {
                      bottom: 60px
                  }

                  .aboutx-note {
                      left: -14px;
                      bottom: 2px;
                      transform: none;
                      padding: 12px 22px 12px 14px
                  }

                  .aboutx-note i {
                      width: 42px;
                      height: 42px
                  }

                  .msgx {
                      padding: 90px 0 60px
                  }

                  /* same 3D tilt as the news card; Manager is mirrored */
                  .msgx-photo {
                      width: 340px;
                      transform: perspective(1700px) rotateY(9deg) rotateZ(-1.2deg)
                  }

                  #msg-manager .msgx-photo {
                      transform: perspective(1700px) rotateY(-9deg) rotateZ(1.2deg);
                      transform-origin: right center
                  }
              }

              @media(min-width:992px) and (max-width:1199.98px) {
                  .herosl-card {
                      flex-basis: calc((100% - 52px)/2)
                  }

                  .herosl-l2 {
                      font-size: clamp(50px, 7vw, 84px)
                  }
              }

              @media(min-width:992px) and (max-height:760px) {
                  .herosl-texts {
                      padding-top: 118px;
                      padding-bottom: 70px
                  }

                  .herosl-l2 {
                      font-size: clamp(46px, 6vw, 86px)
                  }

                  .herosl-l3 {
                      font-size: clamp(30px, 3.8vw, 52px)
                  }

                  .herosl-copy p {
                      margin: 26px 0 20px
                  }

                  .herosl-card {
                      height: clamp(310px, 56vh, 420px)
                  }

                  .herosl-ctrl {
                      bottom: 76px
                  }
              }

              @supports not (animation-timeline:view()) {
                  .herosl-card {
                      animation: none !important
                  }
              }




              /* ==========================================
   8. GALLERY
   ========================================== */
              .gal {
                  padding: 60px 0 0 0;
                  overflow: hidden;
                  font-family: var(--nav-serif, sans-serif);
                  color: var(--ink);
              }

              .gal .container-fluid {
                  padding-inline: clamp(16px, 4vw, 64px);
              }

              .gal :focus-visible {
                  outline: 3px solid var(--orange);
                  outline-offset: 3px;
              }

              /* title: uses .sec-head from About Us */
              .gal-top {
                  margin-bottom: 40px;
              }

              .gal-head {
                  position: relative;
                  display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  gap: 14px 16px;
                  padding-bottom: 20px;
                  border-bottom: 1px solid var(--gold-d);
              }

              .gal-head::after {
                  content: "";
                  position: absolute;
                  left: 0;
                  bottom: -2px;
                  width: 96px;
                  height: 3px;
                  border-radius: 3px;
                  background: var(--orange);
              }

              .gal-ic {
                  flex: none;
                  width: 54px;
                  height: 54px;
                  border-radius: 50%;
                  background: var(--ink);
                  color: var(--gold);
                  display: grid;
                  place-items: center;
                  font-size: 1.4rem;
                  box-shadow: 0 0 0 4px var(--gold);
              }

              .gal-head-title {
                  font-weight: 700;
                  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
                  line-height: 1.1;
                  margin: 0;
              }

              .gal-head-text {
                  margin: 4px 0 0;
                  font-size: 0.9rem;
                  color: var(--muted);
              }

              .gal-tools {
                  margin-left: auto;
                  display: flex;
                  align-items: center;
                  gap: 10px;
              }

              .gal-arrow {
                  width: 42px;
                  height: 42px;
                  border-radius: 50%;
                  border: 1.5px solid var(--ink);
                  background: var(--white);
                  color: var(--ink);
                  display: grid;
                  place-items: center;
              }

              .gal-arrow:hover {
                  background: var(--gold);
                  border-color: var(--gold);
              }

              .gal-view {
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;
                  text-decoration: none;
                  font-weight: 600;
                  font-size: 0.9rem;
                  background: var(--ink);
                  color: var(--white);
                  padding: 6px 6px 6px 20px;
                  border-radius: 99px;
              }

              .gal-view::after {
                  content: "\f138";
                  font-family: bootstrap-icons;
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  background: var(--orange);
                  color: var(--gold);
                  display: grid;
                  place-items: center;
              }

              .gal-view:hover {
                  background: var(--gold);
                  color: var(--ink);
              }

              .gal-col {
                  container-type: inline-size;
              }

              .gal-stack {
                  --gal-w: max(250px, min(60cqw, 620px));
                  --gal-k: 0.75;
                  position: relative;
                  margin-top: 44px;
                  height: calc(var(--gal-w) * var(--gal-k) + 90px);
                  user-select: none;
              }

              /* CARD: outer design copied from the news card (.newsx-feat) */
              .gal-card {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  width: var(--gal-w);
                  margin: calc((var(--gal-w) * var(--gal-k) + 20px) * -0.5) 0 0 calc(var(--gal-w) * -0.5);
                  padding: 10px;
                  background: transparent;
                  border-radius: 38px;
                  cursor: pointer;
                  transition:
                      transform 0.8s cubic-bezier(0.22, 0.9, 0.28, 1),
                      opacity 0.5s,
                      z-index 0.8s;
              }

              /* white plate + gold ring (same as news card frame) */
              .gal-card::before {
                  content: "";
                  position: absolute;
                  inset: 0;
                  z-index: -1;
                  pointer-events: none;
                  background: var(--white);
                  border-radius: 38px;
                  outline: 3px solid var(--gold);
                  outline-offset: 9px;
                  box-shadow: 0 30px 60px rgba(var(--navy-rgb), .35);
              }

              /* gold offset block behind the card (same as news card) */
              .gal-card::after {
                  content: "";
                  position: absolute;
                  inset: 14px -14px -16px 24px;
                  z-index: -2;
                  pointer-events: none;
                  background: var(--gold);
                  border-radius: 44px;
              }

              .gal-img {
                  position: relative;
                  display: block;
                  aspect-ratio: 4/3;
                  border-radius: 28px;
                  overflow: hidden;
                  background: var(--muted);
                  container-type: inline-size;
              }

              .gal-img img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                  pointer-events: none;
                  transition: transform 1.2s;
              }

              .gal-img img.gal-hq {
                  width: 134%;
                  height: 134%;
                  max-width: none;
                  margin: -16.7%;
              }

              .gal-front:hover img {
                  transform: scale(1.05);
              }

              .gal-img iframe {
                  position: absolute;
                  inset: 0;
                  width: 100%;
                  height: 100%;
                  border: 0;
                  background: var(--ink);
              }

              .gal-playing .gal-info,
              .gal-playing .gal-play {
                  display: none;
              }

              .gal-info {
                  position: absolute;
                  inset: auto 0 0;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  gap: 7px;
                  padding: 16cqw 6cqw 6cqw;
                  color: var(--white);
                  background: linear-gradient(to top,
                          color-mix(in srgb, var(--ink) 94%, transparent) 35%,
                          color-mix(in srgb, var(--ink) 60%, transparent) 72%,
                          transparent);
                  opacity: 0;
                  visibility: hidden;
                  transition:
                      opacity 0.4s,
                      visibility 0s 0.4s;
              }

              .gal-front .gal-info {
                  opacity: 1;
                  visibility: visible;
                  transition-delay: 0.3s;
              }

              .gal-info>* {
                  margin: 0;
              }

              .gal-date {
                  color: var(--gold);
                  font-weight: 600;
                  font-size: 0.8rem;
                  letter-spacing: 0.03em;
              }

              .gal-date::before {
                  content: "\f20e";
                  font-family: bootstrap-icons;
                  margin-right: 7px;
              }

              .gal-name {
                  font-weight: 700;
                  font-size: clamp(1.1rem, 5.2cqw, 1.9rem);
                  line-height: 1.15;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
              }

              .gal-text {
                  font-size: 0.86rem;
                  line-height: 1.45;
                  opacity: 0.85;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
              }

              .gal-btn {
                  display: inline-flex;
                  align-items: center;
                  gap: 8px;
                  margin-top: 3px;
                  text-decoration: none;
                  font-weight: 600;
                  font-size: 0.84rem;
                  background: var(--white);
                  color: var(--ink);
                  padding: 5px 5px 5px 16px;
                  border-radius: 99px;
              }

              .gal-btn::after {
                  content: "\f138";
                  font-family: bootstrap-icons;
                  width: 26px;
                  height: 26px;
                  border-radius: 50%;
                  background: var(--orange);
                  color: var(--gold);
                  display: grid;
                  place-items: center;
              }

              .gal-btn:hover {
                  background: var(--gold);
                  color: var(--ink);
              }

              .gal-play {
                  position: absolute;
                  left: 50%;
                  top: 30%;
                  width: 68px;
                  height: 68px;
                  margin: -34px 0 0 -34px;
                  border-radius: 50%;
                  display: grid;
                  place-items: center;
                  font-size: 2.2rem;
                  background: var(--white);
                  color: var(--orange);
                  box-shadow: 0 0 0 10px color-mix(in srgb, var(--white) 35%, transparent);
              }

              @media (max-width: 767.98px) {
                  .gal-top {
                      margin-bottom: 0;
                  }
              }

              @media (max-width: 575.98px) {
                  .gal {
                      padding: 44px 0;
                  }

                  .gal-head {
                      gap: 12px;
                  }

                  .gal-ic {
                      width: 44px;
                      height: 44px;
                      font-size: 1.15rem;
                  }

                  .gal-head-title {
                      font-size: 1.4rem;
                  }

                  .gal-head-text {
                      font-size: 0.82rem;
                  }

                  .gal-tools {
                      margin-left: 0;
                      width: 100%;
                      gap: 8px;
                  }

                  .gal-arrow {
                      width: 38px;
                      height: 38px;
                  }

                  .gal-view {
                      font-size: 0.84rem;
                      margin-left: auto;
                  }

                  .gal-stack {
                      --gal-w: max(200px, min(66cqw, 620px));
                      margin-top: 30px;
                  }

                  .gal-card {
                      padding: 7px;
                      border-radius: 30px;
                  }

                  .gal-card::before {
                      border-radius: 30px;
                      outline-offset: 7px;
                  }

                  .gal-card::after {
                      inset: 10px -10px -12px 18px;
                      border-radius: 34px;
                  }

                  .gal-img {
                      border-radius: 23px;
                  }

                  .gal-play {
                      width: 54px;
                      height: 54px;
                      margin: -27px 0 0 -27px;
                      font-size: 1.8rem;
                  }

                  .gal-text {
                      font-size: 0.78rem;
                  }

                  .gal-btn {
                      font-size: 0.78rem;
                  }
              }

              @media (max-width: 400px) {
                  .gal-view {
                      margin-left: 0;
                  }
              }





              /* Toppers  */


              /* ===== OUR TOPPERS ===== */
              .toppers-section {
                  padding: 60px 0;
                  background: linear-gradient(var(--cream), var(--cream-m) 40%, var(--cream-s));
              }

              .toppers-head {
                  margin-bottom: 48px;
              }

              .toppers-blob {
                  left: -120px;
                  bottom: -80px;
                  width: 380px;
                  height: 380px;
                  background: var(--pale);
              }

              .toppers-panel h3,
              .toppers-marks,
              .toppers-tile span {
                  font-family: 'Playfair Display', serif;
              }

              /* banner: --u = 1% of banner width, every size inside scales from it */
              .toppers-banner {
                  position: relative;
                  z-index: 2;
              }

              .toppers-banner>img {
                  display: block;
                  width: 100%;
                  height: auto;
                  position: relative;
                  z-index: 2;
              }

              .toppers-panel {
                  --u: 1cqw;
                  container-type: inline-size;
                  position: absolute;
                  z-index: 3;
                  inset: 24.5% 3% 3%;
                  text-align: center;
                  color: var(--white);
              }

              .toppers-panel h3 {
                  margin: 0 0 calc(var(--u)*.6);
                  font-weight: 800;
                  letter-spacing: 1.5px;
                  font-size: max(1.3rem, calc(var(--u)*4.6));
                  text-shadow: 0 3px 8px rgba(var(--dark-rgb), .7), 0 1px 0 rgba(var(--dark-rgb), .9);
              }

              .toppers-medal,
              .toppers-trophy {
                  position: absolute;
                  z-index: 4;
                  color: var(--gold);
              }

              .toppers-medal {
                  top: -6%;
                  right: 2%;
                  font-size: clamp(2rem, 5vw, 3.4rem);
              }

              .toppers-trophy {
                  bottom: -4%;
                  left: -3%;
                  font-size: clamp(2.2rem, 5vw, 3.6rem);
                  filter: drop-shadow(0 4px 4px rgba(var(--dark-rgb), .35));
              }

              .toppers-legs {
                  display: block;
                  width: 24%;
                  margin: -12% auto 0;
                  position: relative;
                  z-index: 1;
              }

              /* two sliders */
              .toppers-col {
                  position: relative;
              }

              .toppers-col+.toppers-col::before {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 8%;
                  bottom: 8%;
                  width: 1px;
                  background: linear-gradient(transparent, var(--gold), transparent);
              }

              .toppers-swiper {
                  padding: calc(var(--u)*2.6) 0 calc(var(--u)*1.2);
              }

              .toppers-ctrl {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: calc(var(--u)*2);
                  margin-top: calc(var(--u)*.6);
              }

              .toppers-btn {
                  display: grid;
                  place-items: center;
                  padding: 0;
                  width: max(38px, calc(var(--u)*5.2));
                  aspect-ratio: 1;
                  border-radius: 50%;
                  cursor: pointer;
                  font-size: max(.8rem, calc(var(--u)*2));
                  color: var(--gold);
                  background: rgba(var(--white-rgb), .1);
                  border: 1.5px solid var(--gold);
                  transition: .25s;
              }

              .toppers-btn:hover {
                  color: var(--navy);
                  background: var(--gold);
                  transform: scale(1.1);
                  box-shadow: 0 0 14px rgba(var(--gold-rgb), .7);
              }

              .toppers-viewall {
                  display: inline-flex;
                  align-items: center;
                  gap: calc(var(--u)*.9);
                  font-weight: 600;
                  letter-spacing: .5px;
                  font-size: max(.8rem, calc(var(--u)*2.1));
                  padding: calc(var(--u)*.6) calc(var(--u)*.7) calc(var(--u)*.6) calc(var(--u)*2.6);
                  color: var(--navy);
                  background: linear-gradient(135deg, var(--gold-l), var(--gold));
                  border-radius: 50px;
                  box-shadow: 0 4px 12px rgba(var(--dark-rgb), .35);
                  transition: .25s;
              }

              .toppers-viewall span {
                  display: grid;
                  place-items: center;
                  width: max(28px, calc(var(--u)*4.4));
                  aspect-ratio: 1;
                  border-radius: 50%;
                  font-size: .75em;
                  color: var(--gold);
                  background: var(--navy);
                  transition: .25s;
              }

              .toppers-viewall:hover {
                  color: var(--dark);
                  background: linear-gradient(135deg, var(--cyan), #7ff0fb);
                  transform: translateY(-2px);
              }

              .toppers-viewall:hover span {
                  color: var(--cyan);
                  transform: translateX(3px);
              }

              /* topper card (no background) */
              .toppers-card {
                  text-align: center;
                  padding-left: calc(var(--u)*2.5);
              }

              .toppers-photo {
                  position: relative;
                  width: max(120px, calc(var(--u)*24));
                  margin: 0 auto;
                  padding: 0 calc(var(--u)*.9) calc(var(--u)*.9) 0;
              }

              .toppers-photo::before {
                  content: "";
                  position: absolute;
                  inset: calc(var(--u)*-.7) 0 0 calc(var(--u)*-.7);
                  border: max(3px, calc(var(--u)*.55)) solid var(--gold);
                  border-radius: calc(var(--u)*3.6) calc(var(--u)*3.6) calc(var(--u)*3.6) calc(var(--u)*1.2);
                  background: linear-gradient(135deg, transparent 55%, var(--gold) 55%);
                  animation: toppers-glow 2.6s infinite;
              }

              @keyframes toppers-glow {
                  50% {
                      box-shadow: 0 0 20px rgba(var(--gold-rgb), .8);
                  }
              }

              .toppers-photo div {
                  position: relative;
                  aspect-ratio: 1/1.2;
                  overflow: hidden;
                  display: grid;
                  place-items: center;
                  font-size: 3.2rem;
                  border-radius: calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*1) calc(var(--u)*3);
                  color: rgba(var(--white-rgb), .5);
                  background: linear-gradient(160deg, var(--navy2), var(--dark));
              }

              .toppers-photo img {
                  position: absolute;
                  inset: 0;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
              }

              .toppers-star {
                  position: absolute;
                  top: calc(var(--u)*-2);
                  right: calc(var(--u)*-1.2);
                  z-index: 3;
                  display: grid;
                  place-items: center;
                  width: max(28px, calc(var(--u)*5));
                  aspect-ratio: 1;
                  border-radius: 50%;
                  font-size: max(.7rem, calc(var(--u)*1.9));
                  color: var(--navy);
                  background: linear-gradient(135deg, var(--gold-l), var(--gold-d));
                  border: 3px solid var(--navy);
                  box-shadow: 0 2px 6px rgba(var(--dark-rgb), .45);
              }

              .toppers-class {
                  position: relative;
                  z-index: 3;
                  display: inline-block;
                  margin-top: calc(var(--u)*-2);
                  padding: calc(var(--u)*.3) calc(var(--u)*2.6);
                  font-size: max(.62rem, calc(var(--u)*1.6));
                  font-weight: 600;
                  letter-spacing: 2px;
                  text-transform: uppercase;
                  color: var(--gold);
                  background: var(--navy);
                  border: 2px solid var(--gold);
                  border-radius: 14px;
                  text-shadow: 0 1px 3px rgba(var(--dark-rgb), .6);
              }

              .toppers-name {
                  margin: calc(var(--u)*.8) 0 0;
                  font-weight: 700;
                  font-size: max(.95rem, calc(var(--u)*3.1));
                  text-shadow: 0 2px 6px rgba(var(--dark-rgb), .75);
              }

              .toppers-school {
                  font-size: max(.62rem, calc(var(--u)*1.55));
                  color: var(--cream);
                  text-shadow: 0 1px 4px rgba(var(--dark-rgb), .8);
              }

              .toppers-school i,
              .toppers-line {
                  color: var(--gold);
              }

              .toppers-school i {
                  margin-right: 5px;
              }

              .toppers-line {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 8px;
                  font-size: max(.65rem, calc(var(--u)*1.5));
              }

              .toppers-line::before,
              .toppers-line::after {
                  content: "";
                  width: calc(var(--u)*5);
                  height: 1px;
                  background: var(--gold);
              }

              .toppers-marks {
                  font-weight: 800;
                  line-height: 1.1;
                  font-size: max(1.5rem, calc(var(--u)*6));
                  color: transparent;
                  filter: drop-shadow(0 3px 4px rgba(var(--dark-rgb), .7));
                  background: linear-gradient(90deg, var(--gold-d), var(--gold-l), var(--gold-d)) 0 0/200% 100%;
                  -webkit-background-clip: text;
                  background-clip: text;
                  animation: toppers-shine 3s linear infinite;
              }

              .toppers-marks small {
                  font-size: .5em;
              }

              @keyframes toppers-shine {
                  to {
                      background-position: -200% 0;
                  }
              }

              /* quick-link tiles */
              .toppers-tile {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  gap: 8px;
                  height: 100%;
                  min-height: 190px;
                  padding: 16px;
                  text-align: center;
                  color: var(--white);
                  border-radius: 8px;
                  border-bottom: 4px solid var(--gold);
                  background: linear-gradient(145deg, var(--navy2), var(--navy));
                  box-shadow: 0 8px 18px rgba(var(--navy-rgb), .25);
                  transition: .25s;
              }

              .toppers-tile i {
                  font-size: 2.8rem;
                  color: var(--gold);
                  transition: color .25s;
              }

              .toppers-tile span {
                  line-height: 1.2;
              }

              .toppers-tile:hover {
                  transform: translateY(-6px);
                  color: var(--navy);
                  background: linear-gradient(145deg, var(--gold-l), var(--gold));
              }

              .toppers-tile:hover i {
                  color: var(--navy);
              }

              /* mobile: image cropped to the girl, blue panel below holds the sliders stacked */
              @media (max-width: 767.98px) {
                  .toppers-section {
                      padding: 44px 0 56px;
                  }

                  .toppers-banner>img {
                      aspect-ratio: 100/23;
                      object-fit: cover;
                      object-position: top;
                  }

                  .toppers-panel {
                      --u: clamp(5px, 1.9cqw, 7px);
                      position: relative;
                      inset: auto;
                      margin-top: -1px;
                      padding: 4px 14px 20px;
                      border-radius: 0 0 18px 18px;
                      background: linear-gradient(170deg, #0536ad, #03206f);
                  }

                  .toppers-trophy {
                      display: none;
                  }

                  .toppers-medal {
                      top: -3%;
                      right: 4%;
                      font-size: 2rem;
                  }

                  .toppers-col+.toppers-col {
                      margin-top: 18px;
                      padding-top: 18px;
                  }

                  .toppers-col+.toppers-col::before {
                      inset: 0 12% auto;
                      width: auto;
                      height: 1px;
                      background: linear-gradient(90deg, transparent, var(--gold), transparent);
                  }

                  .toppers-legs {
                      width: 34%;
                      margin-top: -5%;
                      display: none;
                  }

                  .toppers-tile {
                      min-height: 140px;
                  }

                  .toppers-tile i {
                      font-size: 2.2rem;
                  }
              }




              /* ===== INTRO BANNER  ===== */
              .nh {
                  position: relative;
                  overflow: hidden;
                  display: flex;
                  flex-direction: column;
                  min-height: clamp(560px, 48vw, 720px);
                  background: var(--dark);
                  color: var(--white);
                  text-align: center
              }

              .nh-video,
              .nh-overlay {
                  position: absolute;
                  inset: 0;
                  width: 100%;
                  height: 100%
              }

              .nh-video {
                  object-fit: cover
              }

              .nh-overlay {
                  background: linear-gradient(rgba(var(--dark-rgb), .45), rgba(var(--navy-rgb), .3) 55%, rgba(var(--dark-rgb), .65))
              }

              /* cutouts sit behind the text, at the bottom corners; width only, height follows the image ratio */
              .nh-girl,
              .nh-duo {
                  position: absolute;
                  bottom: 0;
                  z-index: 2;
                  height: auto;
                  pointer-events: none
              }

              .nh-girl {
                  left: 1%;
                  width: clamp(180px, 28vw, 440px)
              }

              .nh-duo {
                  right: 1%;
                  width: clamp(160px, 24vw, 380px)
              }

              /* curved cream strip at the bottom */
              .nh-strip {
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  z-index: 2;
                  width: 100%;
                  height: clamp(48px, 7vw, 72px);
                  background: #fdf0d6;
                  border-radius: 50% 50% 0 0/24px 24px 0 0
              }

              /* content column */
              .nh-content {
                  position: relative;
                  z-index: 3;
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: clamp(44px, 6vw, 84px) 16px 24px
              }

              .nh-title {
                  margin: 0 0 16px;
                  max-width: 820px;
                  font-size: clamp(1.35rem, 3.4vw, 2.8rem);
                  font-weight: 700;
                  line-height: 1.2;
                  letter-spacing: .5px;
                  text-transform: uppercase;
                  color: var(--white);
                  text-shadow: 0 3px 14px rgba(var(--dark-rgb), .55)
              }

              .nh-text {
                  margin: 0 0 22px;
                  max-width: min(680px, 100%);
                  font-size: clamp(.8rem, 1.1vw, .95rem);
                  line-height: 1.7;
                  color: var(--white);
                  text-shadow: 0 2px 8px rgba(var(--dark-rgb), .6)
              }

              /* profile video button */
              .nh-profile {
                  display: inline-flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 8px;
                  font-size: .85rem;
                  font-weight: 500;
                  color: var(--white)
              }

              .nh-play {
                  position: relative;
                  display: grid;
                  place-items: center;
                  width: 58px;
                  height: 58px;
                  border-radius: 50%;
                  background: linear-gradient(135deg, var(--orange), var(--gold));
                  color: var(--navy)
              }

              .nh-play::before,
              .nh-play::after {
                  content: "";
                  position: absolute;
                  inset: 0;
                  border-radius: 50%;
                  border: 2px solid var(--gold);
                  animation: nh-ring 2.4s infinite
              }

              .nh-play::after {
                  animation-delay: 1.2s
              }

              @keyframes nh-ring {
                  to {
                      transform: scale(1.9);
                      opacity: 0
                  }
              }

              /* 4 quick-link cards, pushed to the bottom of the banner */
              .nh-cards {
                  width: 100%;
                  max-width: 480px;
                  margin-top: auto;
                  padding-top: 24px
              }

              .nh-card {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  gap: 8px;
                  height: 100%;
                  min-height: 90px;
                  padding: 8px;
                  font-size: .55rem;
                  font-weight: 700;
                  line-height: 1.2;
                  text-transform: uppercase;
                  color: var(--navy);
                  background: linear-gradient(160deg, var(--gold-l), var(--gold) 55%, var(--gold-d));
                  border-radius: 22px 22px 14px 14px;
                  box-shadow: 0 6px 14px rgba(var(--dark-rgb), .3);
                  transition: transform .3s
              }

              .nh-card:hover {
                  color: var(--navy);
                  transform: translateY(-6px)
              }

              .nh-card i {
                  font-size: 1.6rem
              }

              @media(min-width:768px) {
                  .nh-cards {
                      max-width: min(640px, 46vw)
                  }

                  .nh-card {
                      min-height: 100px;
                      font-size: .62rem
                  }
              }

              /* phones: cutouts would sit on top of the text, so hide them */
              @media(max-width:767.98px) {

                  .nh-girl,
                  .nh-duo {
                      display: none
                  }

                  .nh {
                      min-height: 0
                  }
              }

              @media(prefers-reduced-motion:reduce) {

                  .nh-play::before,
                  .nh-play::after {
                      animation: none
                  }
              }






              /* Achievements + Birthday  */

              .achx {
                  padding: 60px 0;
                  background: linear-gradient(var(--cream-s), var(--cream-m) 50%, var(--cream))
              }


              .achx-blob {
                  right: -170px;
                  top: 10%;
                  width: 340px;
                  height: 340px;
                  background: var(--pale);
                  opacity: .45
              }

              /* round arrow buttons (birthday + achievements) */
              .achx-nv {
                  flex: none;
                  width: 42px;
                  height: 42px;
                  border-radius: 50%;
                  border: 0;
                  display: grid;
                  place-items: center;
                  cursor: pointer;
                  font-size: .78rem;
                  background: var(--navy);
                  color: var(--white);
                  transition: .3s
              }

              .achx-nv:hover {
                  background: var(--gold);
                  color: var(--navy);
                  transform: scale(1.1)
              }

              /* ---------- Birthday ---------- */
              .bday {
                  container-type: inline-size;
                  position: relative;
                  display: flex;
                  flex-direction: column;
                  height: 100%;
                  width: min(100%, 470px);
                  margin: 0 auto;
                  text-align: center
              }

              .bday::before {
                  content: "";
                  position: absolute;
                  z-index: 0;
                  left: 50%;
                  top: 40%;
                  width: 86%;
                  aspect-ratio: 1;
                  border-radius: 50%;
                  transform: translate(-50%, -50%);
                  background: var(--pale);
                  opacity: .55
              }

              .bday::after {
                  content: "";
                  position: absolute;
                  z-index: 0;
                  left: -18px;
                  bottom: 70px;
                  width: 120px;
                  aspect-ratio: 1;
                  background: radial-gradient(var(--gold) 2.6px, transparent 3.2px) 0 0/18px 18px;
                  opacity: .8
              }

              .bday>* {
                  position: relative;
                  z-index: 1
              }

              .bday-top {
                  position: relative
              }

              .bday-top>img {
                  display: block;
                  width: 100%;
                  height: auto
              }

              .bday-title {
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 60%;
                  line-height: 1.1
              }

              .bday-title small {
                  display: block;
                  font-size: 3.1cqw;
                  font-weight: 500;
                  letter-spacing: .24em;
                  text-transform: uppercase;
                  color: var(--navy)
              }

              .bday-title b {
                  display: block;
                  margin: 1cqw 0 1.6cqw;
                  font-family: 'Playfair Display', serif;
                  font-weight: 800;
                  font-size: 8.4cqw;
                  letter-spacing: .03em;
                  text-transform: uppercase;
                  color: var(--navy)
              }

              .bday-title span {
                  display: block;
                  font-size: 2.9cqw;
                  letter-spacing: .12em;
                  text-transform: uppercase;
                  color: var(--muted)
              }

              .bday-swiper {
                  margin-top: -4cqw;
                  overflow: hidden;
                  width: 100%;
                  min-width: 0
              }

              .bday-slide {
                  position: relative;
                  padding: 2cqw 0 1cqw
              }

              .bday-pw {
                  position: relative;
                  width: 44%;
                  margin: 0 auto
              }

              .bday-pw::before {
                  content: "";
                  position: absolute;
                  inset: 14px -14px -14px 14px;
                  border-radius: 999px 999px 26px 26px;
                  background: var(--gold)
              }

              .bday-photo {
                  position: relative;
                  aspect-ratio: 200/236;
                  border-radius: 999px 999px 26px 26px;
                  overflow: hidden;
                  border: 4px solid var(--cream);
                  background: var(--navy);
                  box-shadow: 0 20px 38px rgba(var(--navy-rgb), .3)
              }

              .bday-photo img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: 50% 15%;
                  display: block
              }

              .bday-bl,
              .bday-br {
                  position: absolute;
                  top: 2cqw;
                  width: 24%;
                  height: auto;
                  pointer-events: none;
                  animation: bday-float 5s ease-in-out infinite
              }

              .bday-bl {
                  left: 1%
              }

              .bday-br {
                  right: 1%;
                  animation-delay: -2.5s
              }

              .bday-cap {
                  position: absolute;
                  z-index: 3;
                  left: -22%;
                  bottom: -5%;
                  width: 144%;
                  max-width: none;
                  height: auto;
                  pointer-events: none
              }

              @keyframes bday-float {
                  50% {
                      transform: translateY(-7px)
                  }
              }

              .bday-info {
                  margin-top: 5cqw
              }

              .bday-name {
                  margin: 0;
                  font-family: 'Playfair Display', serif;
                  font-weight: 800;
                  font-size: 1.5rem;
                  color: var(--navy)
              }

              .bday-class {
                  display: inline-block;
                  margin: 10px 0 12px;
                  padding: 3px 16px;
                  border-radius: 30px;
                  background: var(--gold);
                  color: var(--navy);
                  font-size: .72rem;
                  font-weight: 700;
                  letter-spacing: 1px;
                  text-transform: uppercase
              }

              .bday-date {
                  margin: 0;
                  font-weight: 700;
                  font-size: clamp(1rem, 4.6cqw, 1.25rem);
                  letter-spacing: .08em;
                  text-transform: uppercase;
                  color: var(--navy)
              }

              .bday-date i {
                  margin-right: 8px;
                  font-size: .85em;
                  color: var(--gold-d)
              }

              .bday-date sup {
                  font-size: .55em
              }

              .bday-role {
                  margin: 6px 0 0;
                  font-size: .74rem;
                  letter-spacing: 3px;
                  text-transform: uppercase;
                  color: var(--muted)
              }

              /* arrows pinned to the bottom of the column = same line as the achievements controls */
              .bday-ctrl {
                  display: flex;
                  justify-content: center;
                  gap: 10px;
                  margin-top: auto;
                  padding-top: 20px
              }

              /* ---------- Achievements ---------- */
              .achx-right {
                  position: relative;
                  display: flex;
                  flex-direction: column
              }

              .achx-swiper {
                  overflow: hidden;
                  margin-block: auto;
                  width: 100%;
                  min-width: 0
              }

              .achx-slide {
                  height: auto;
                  padding: 6px 22px 28px 6px
              }

              @media (min-width: 576px) {
                  .achx-slide:nth-child(even) {
                      padding-top: 34px;
                      padding-bottom: 0
                  }
              }

              .achx-pic {
                  position: relative
              }

              .achx-pic::before {
                  content: "";
                  position: absolute;
                  inset: 12px -12px -12px 12px;
                  border-radius: 90px 20px 90px 20px;
                  background: var(--gold)
              }

              .achx-pic img {
                  position: relative;
                  display: block;
                  width: 100%;
                  height: 310px;
                  object-fit: cover;
                  border-radius: 90px 20px 90px 20px;
                  border: 4px solid var(--cream);
                  background: var(--navy);
                  filter: saturate(1.1) contrast(1.04);
                  box-shadow: 0 22px 40px rgba(var(--navy-rgb), .28)
              }

              .achx-pill {
                  position: absolute;
                  z-index: 2;
                  left: 46px;
                  top: 16px;
                  display: inline-flex;
                  align-items: center;
                  gap: 6px;
                  padding: 6px 14px;
                  border-radius: 30px;
                  background: var(--gold);
                  color: var(--navy);
                  font-size: .66rem;
                  font-weight: 700;
                  letter-spacing: 1px;
                  text-transform: uppercase
              }

              .achx-medal {
                  position: absolute;
                  z-index: 3;
                  right: 22px;
                  bottom: -20px;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  display: grid;
                  place-items: center;
                  font-size: 1.1rem;
                  background: var(--gold);
                  color: var(--navy);
                  border: 4px solid var(--cream);
                  box-shadow: 0 0 0 2px var(--navy), 0 8px 16px rgba(var(--navy-rgb), .35)
              }

              .achx-body {
                  margin-top: 36px
              }

              .achx-date {
                  font-size: .78rem;
                  font-weight: 600;
                  letter-spacing: .5px;
                  color: var(--navy)
              }

              .achx-date i {
                  margin-right: 6px;
                  color: var(--gold-d)
              }

              .achx-body h3 {
                  margin: 6px 0;
                  font-weight: 700;
                  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
                  line-height: 1.2;
                  color: var(--navy)
              }

              .achx-body p {
                  margin: 0 0 12px;
                  font-size: .84rem;
                  line-height: 1.6;
                  color: var(--text);
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical;
                  overflow: hidden
              }

              /* controls:  ‹  [View All Achievements ↗]  ›   (no dots) */
              .achx-ctrl {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 14px;
                  padding-top: 20px
              }

              .achx-all {
                  height: 42px;
                  padding: 0 24px;
                  font-size: .88rem;
                  white-space: nowrap;
                  box-shadow: 0 6px 14px rgba(var(--navy-rgb), .18)
              }

              .achx-all i {
                  font-size: .75rem
              }

              .achx-all:hover {
                  background: var(--navy);
                  color: var(--white)
              }

              @media (min-width: 992px) {
                  .achx-right::before {
                      content: "";
                      position: absolute;
                      left: -12px;
                      top: 6%;
                      bottom: 6%;
                      width: 1px;
                      background: linear-gradient(transparent, var(--gold), transparent)
                  }
              }

              @media (max-width: 575.98px) {
                  .achx {
                      padding: 44px 0 56px
                  }

                  .achx-pic img {
                      height: 230px
                  }

                  .achx-all {
                      padding: 0 16px;
                      font-size: .8rem
                  }
              }

              @media (prefers-reduced-motion: reduce) {

                  .bday-bl,
                  .bday-br {
                      animation: none
                  }
              }


              /* Facility  */



              .facp {
                  padding:
                      /*H*/
                      40px 0 52px;
                  background: linear-gradient(var(--cream), var(--cream-m) 40%, var(--cream-s));
              }

              .facp-blob {
                  left: -130px;
                  top: 18%;
                  width: 380px;
                  height: 380px;
                  background: var(--pale);
                  opacity: 0.6;
              }

              .facp .sec-head {
                  margin-bottom:
                      /*H*/
                      34px;
              }

              .facp-stage {
                  position: relative;
              }

              /* ONE student on the left, standing in the page margin with his hands on the card's left edge (wide screens only) */
              .facp-kid {
                  display: none;
                  position: absolute;
                  z-index: 3;
                  top: -70px;
                  bottom: 0;
                  right: calc(100% - 35px);
                  width: clamp(0px, calc((200vw - 100% - 17px) / 2 + 8px), 190px);
                  pointer-events: none;
                  filter: drop-shadow(0 14px 18px rgba(var(--navy-rgb), 0.35));
              }

              .facp-kid img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                  object-position: right bottom;
              }

              @media (min-width: 1200px) {
                  .facp .sec-head {
                      margin-bottom:
                          /*H*/
                          52px;
                  }

                  .facp-kid {
                      display: block;
                  }
              }

              .facp-card {
                  position: relative;
                  z-index: 1;
                  padding: clamp(
                          /*H*/
                          20px,
                          /*H*/
                          3vw,
                          /*H*/
                          38px);
                  border-radius: 36px;
                  border: 2px solid var(--gold);
                  color: var(--white);
                  overflow: hidden;
                  background:
                      radial-gradient(circle at 100% 0,
                          rgba(var(--gold-rgb), 0.22),
                          transparent 45%),
                      radial-gradient(circle at 0 100%,
                          rgba(25, 207, 227, 0.16),
                          transparent 40%),
                      linear-gradient(160deg, var(--navy2), var(--navy) 55%, var(--dark));
                  box-shadow:
                      0 0 0 6px rgba(var(--gold-rgb), 0.18),
                      0 34px 70px rgba(var(--navy-rgb), 0.4);
              }

              .facp-card::before {
                  content: "";
                  position: absolute;
                  right: -30px;
                  bottom: -30px;
                  width: 220px;
                  height: 220px;
                  background: radial-gradient(rgba(var(--gold-rgb), 0.5) 2.4px,
                          transparent 3px) 0 0/18px 18px;
                  opacity: 0.5;
                  pointer-events: none;
              }

              .facp-card>* {
                  position: relative;
                  z-index: 1;
              }

              /* every facility is one <article>; they sit on top of each other and the active one fades in */
              .facp-items {
                  display: grid;
              }

              .facp-item {
                  grid-area: 1/1;
                  opacity: 0;
                  visibility: hidden;
                  transition:
                      opacity 0.5s,
                      visibility 0.5s;
              }

              .facp-item.on {
                  opacity: 1;
                  visibility: visible;
              }

              .facp-a {
                  opacity: 0;
                  transform: translateY(24px);
                  transition:
                      opacity 0.6s,
                      transform 0.6s;
              }

              .facp-item.on .facp-a {
                  opacity: 1;
                  transform: none;
              }

              .facp-item.on .facp-text>.facp-a:nth-child(2) {
                  transition-delay: 0.08s;
              }

              .facp-item.on .facp-text>.facp-a:nth-child(3) {
                  transition-delay: 0.16s;
              }

              .facp-item.on .facp-text>.facp-a:nth-child(4) {
                  transition-delay: 0.24s;
              }

              .facp-item.on .facp-text>.facp-a:nth-child(5) {
                  transition-delay: 0.32s;
              }

              .facp-count {
                  display: flex;
                  align-items: center;
                  gap: 14px;
              }

              .facp-no {
                  font-family: "Playfair Display", serif;
                  font-weight: 800;
                  font-size: clamp(3.4rem, 6vw, 5rem);
                  line-height: 0.9;
                  color: transparent;
                  -webkit-text-stroke: 1.5px var(--gold);
              }

              .facp-of {
                  font-size: 0.8rem;
                  letter-spacing: 3px;
                  color: var(--cream);
                  opacity: 0.8;
              }

              .facp-title {
                  margin:
                      /*H*/
                      10px 0
                      /*H*/
                      10px;
                  font-weight: 800;
                  font-size: clamp(2rem, 4vw, 3.2rem);
                  line-height: 1.05;
                  color: var(--white);
              }

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

              .facp-chips span {
                  padding: 5px 15px;
                  border-radius: 30px;
                  background: rgba(var(--white-rgb), 0.1);
                  border: 1px solid rgba(var(--gold-rgb), 0.6);
                  font-size: 0.72rem;
                  font-weight: 600;
                  letter-spacing: 1px;
                  text-transform: uppercase;
              }

              .facp-desc {
                  margin:
                      /*H*/
                      14px 0
                      /*H*/
                      18px;
                  max-width: 470px;
                  font-size: 0.95rem;
                  line-height: 1.75;
                  color: rgba(var(--cream-rgb), 0.9);
              }

              .facp-btn {
                  padding: 12px 28px;
                  font-size: 0.92rem;
              }

              /* photo */
              .facp-photo {
                  position: relative;
                  max-width: 520px;
                  margin: 0 auto;
              }

              .facp-photo::before {
                  content: "";
                  position: absolute;
                  inset: 16px -16px -16px 16px;
                  background: var(--gold);
                  border-radius: 30px 110px 30px 110px;
              }

              .facp-frame {
                  position: relative;
                  height: clamp(
                          /*H*/
                          220px,
                          /*H*/
                          27vw,
                          /*H*/
                          310px);
                  border-radius: 30px 110px 30px 110px;
                  overflow: hidden;
                  border: 4px solid var(--cream);
                  background: var(--dark);
                  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.4);
              }

              .facp-frame img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  display: block;
                  transform: scale(1.18);
                  transition: transform 1.8s;
                  filter: saturate(1.1) contrast(1.04);
              }

              .facp-item.on .facp-frame img {
                  transform: scale(1);
              }

              .facp-frame::after {
                  content: "";
                  position: absolute;
                  inset: 0;
                  background: linear-gradient(transparent 55%,
                          rgba(var(--dark-rgb), 0.85));
                  pointer-events: none;
              }

              .facp-pill {
                  position: absolute;
                  z-index: 2;
                  left: 20px;
                  bottom: 18px;
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;
                  padding: 8px 20px 8px 8px;
                  border-radius: 40px;
                  background: rgba(var(--dark-rgb), 0.78);
                  border: 1px solid var(--gold);
                  backdrop-filter: blur(6px);
                  font-weight: 600;
                  font-size: 0.9rem;
              }

              .facp-pill i {
                  width: 34px;
                  height: 34px;
                  border-radius: 50%;
                  display: grid;
                  place-items: center;
                  background: var(--gold);
                  color: var(--navy);
              }

              /* shared controls: view-all link, progress line, arrows */
              .facp-ctrl {
                  margin-top:
                      /*H*/
                      22px;
              }

              .facp-all {
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;
                  color: var(--white);
                  font-weight: 500;
                  font-size: 0.92rem;
                  border-bottom: 2px solid var(--gold);
                  padding-bottom: 3px;
                  white-space: nowrap;
              }

              .facp-all:hover {
                  color: var(--gold);
              }

              .facp-track {
                  height: 4px;
                  border-radius: 4px;
                  background: rgba(var(--cream-rgb), 0.2);
                  overflow: hidden;
              }

              .facp-track i {
                  display: block;
                  height: 100%;
                  width: 0;
                  background: linear-gradient(90deg, var(--gold), var(--orange));
              }

              .facp-track i.go {
                  animation: facp-bar 5s linear forwards;
              }

              @keyframes facp-bar {
                  to {
                      width: 100%;
                  }
              }

              .facp-ar {
                  flex: none;
                  width: 44px;
                  height: 44px;
                  border-radius: 50%;
                  border: 1.5px solid rgba(var(--cream-rgb), 0.6);
                  background: rgba(var(--cream-rgb), 0.1);
                  color: var(--white);
                  cursor: pointer;
                  transition: 0.3s;
              }

              .facp-ar:hover {
                  background: var(--gold);
                  border-color: var(--gold);
                  color: var(--navy);
              }

              /* facility buttons */
              .facp-tabs {
                  margin-top:
                      /*H*/
                      18px;
                  padding-top:
                      /*H*/
                      18px;
                  border-top: 1px solid rgba(var(--cream-rgb), 0.2);
              }

              .facp-tab {
                  appearance: none;
                  font: inherit;
                  width: 100%;
                  cursor: pointer;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 6px;
                  padding: 12px 6px;
                  border-radius: 18px;
                  border: 1.5px solid rgba(var(--cream-rgb), 0.25);
                  background: rgba(var(--white-rgb), 0.06);
                  color: var(--cream);
                  font-size: 0.74rem;
                  font-weight: 600;
                  line-height: 1.2;
                  text-align: center;
                  transition: 0.3s;
              }

              .facp-tab i {
                  font-size: 1.15rem;
                  color: var(--gold);
                  transition: 0.3s;
              }

              .facp-tab:hover {
                  background: rgba(var(--white-rgb), 0.14);
                  transform: translateY(-3px);
              }

              .facp-tab.on {
                  background: linear-gradient(135deg, var(--gold-l), var(--gold));
                  border-color: var(--gold);
                  color: var(--navy);
                  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
              }

              .facp-tab.on i {
                  color: var(--navy);
              }

              @media (max-width: 991.98px) {
                  .facp-photo {
                      margin-top: 8px;
                  }
              }

              @media (max-width: 575.98px) {
                  .facp {
                      padding:
                          /*H*/
                          34px 0
                          /*H*/
                          44px;
                  }

                  .facp-card {
                      border-radius: 28px;
                  }

                  .facp-photo::before {
                      inset: 12px -10px -12px 10px;
                  }
              }

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





              /* ===============================FOOTER=========================== */
              .ftr {
                  padding: 90px 0 0;
                  color: var(--cream);
                  background: linear-gradient(165deg, var(--navy2), var(--navy) 45%, var(--dark));
                  text-align: center
              }

              .ftr>.ftr-wave {
                  position: absolute;
                  top: -1px;
                  left: 0;
                  width: 100%;
                  height: 60px;
                  z-index: 1
              }

              .ftr-glow {
                  left: -160px;
                  top: 14%;
                  width: 460px;
                  height: 460px;
                  background: radial-gradient(circle, rgba(var(--gold-rgb), .2), transparent 65%)
              }

              .ftr-glow2 {
                  right: -140px;
                  bottom: 10%;
                  width: 420px;
                  height: 420px;
                  background: radial-gradient(circle, rgba(25, 207, 227, .16), transparent 65%)
              }

              /* soft diamond lattice (replaces the pattern image, pure CSS) */
              .ftr-pattern {
                  position: absolute;
                  inset: 0;
                  z-index: 0;
                  pointer-events: none;
                  background:
                      repeating-linear-gradient(45deg, rgba(var(--gold-rgb), .07) 0 1px, transparent 1px 34px),
                      repeating-linear-gradient(-45deg, rgba(var(--gold-rgb), .07) 0 1px, transparent 1px 34px);
                  -webkit-mask: radial-gradient(ellipse at 50% 30%, #000, transparent 75%);
                  mask: radial-gradient(ellipse at 50% 30%, #000, transparent 75%)
              }

              /* ---------- Patron ---------- */
              .ftr-patron-img {
                  display: block;
                  width: clamp(240px, 32vw, 380px);
                  height: auto;
                  margin: 0 auto;
                  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .4))
              }

              .ftr-patron h3 {
                  margin: 20px 0 0;
                  font-weight: 800;
                  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
                  line-height: 1.1;
                  background: linear-gradient(100deg, var(--gold-l), var(--gold) 50%, var(--gold-d));
                  -webkit-background-clip: text;
                  background-clip: text;
                  color: transparent
              }

              .ftr-patron .sec-sub {
                  color: var(--cream)
              }

              .ftr-about {
                  max-width: 720px;
                  margin: 18px auto 24px;
                  font-size: .95rem;
                  line-height: 1.8;
                  color: rgba(var(--cream-rgb), .9)
              }

              .ftr-social {
                  display: flex;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 12px;
                  margin: 0;
                  padding: 0;
                  list-style: none
              }

              .ftr-social a {
                  display: grid;
                  place-items: center;
                  width: 44px;
                  height: 44px;
                  border-radius: 50%;
                  border: 1.5px solid rgba(var(--gold-rgb), .7);
                  background: rgba(var(--white-rgb), .08);
                  color: var(--gold);
                  font-size: 1rem;
                  transition: .3s
              }

              .ftr-social a:hover {
                  background: var(--gold);
                  border-color: var(--gold);
                  color: var(--navy);
                  transform: translateY(-4px) rotate(-6deg);
                  box-shadow: 0 10px 20px rgba(0, 0, 0, .35)
              }

              /* divider with a diamond in the middle */
              .ftr-hr {
                  position: relative;
                  height: 1px;
                  margin: 44px 0 40px;
                  background: linear-gradient(90deg, transparent, var(--gold), transparent)
              }

              .ftr-hr::after {
                  content: "";
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  width: 12px;
                  height: 12px;
                  background: var(--gold);
                  border: 2px solid var(--navy);
                  transform: translate(-50%, -50%) rotate(45deg)
              }

              /* ---------- Columns ---------- */
              .ftr-title {
                  position: relative;
                  margin: 0 0 24px;
                  padding-bottom: 12px;
                  font-family: 'Poppins', sans-serif;
                  font-size: .88rem;
                  font-weight: 700;
                  letter-spacing: 3px;
                  text-transform: uppercase;
                  color: var(--gold)
              }

              .ftr-title::after {
                  content: "";
                  position: absolute;
                  left: 50%;
                  bottom: 0;
                  width: 46px;
                  height: 3px;
                  border-radius: 3px;
                  background: linear-gradient(90deg, var(--gold), var(--orange));
                  transform: translateX(-50%)
              }

              /* contact: icon left, label + text right */
              .ftr-contact {
                  max-width: 330px;
                  margin: 0 auto;
                  padding: 0;
                  list-style: none;
                  text-align: left
              }

              .ftr-contact li {
                  display: flex;
                  align-items: center;
                  gap: 14px;
                  padding: 5px 1px;
                  border-radius: 16px;
                  /* background: rgba(var(--white-rgb), .06); */
                  /* border: 1px solid rgba(var(--gold-rgb), .35); */
                  transition: .3s;
              }

              .ftr-contact li+li {
                  margin-top: 12px
              }

              .ftr-contact li:hover {
                  background: rgba(var(--white-rgb), .12);
                  border-color: var(--gold);
                  transform: translateX(4px)
              }

              .ftr-ic {
                  flex: none;
                  display: grid;
                  place-items: center;
                  width: 42px;
                  height: 42px;
                  border-radius: 12px;
                  background: linear-gradient(135deg, var(--gold-l), var(--gold));
                  color: var(--navy);
                  font-size: .95rem;
                  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
                  transition: .3s
              }

              .ftr-contact li:hover .ftr-ic {
                  transform: rotate(-8deg) scale(1.08)
              }

              .ftr-contact div {
                  flex: 1;
                  min-width: 0
              }

              .ftr-contact b {
                  display: block;
                  margin-bottom: 2px;
                  font-size: .66rem;
                  font-weight: 600;
                  letter-spacing: 2px;
                  text-transform: uppercase;
                  color: var(--gold)
              }

              .ftr-contact div span,
              .ftr-contact a {
                  font-size: .88rem;
                  line-height: 1.5;
                  color: var(--cream);
                  word-break: break-word
              }

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

              /* map (same gold offset frame as the site's cards) */
              .ftr-map {
                  position: relative;
                  max-width: 300px;
                  margin: 0 auto
              }

              .ftr-map::before {
                  content: "";
                  position: absolute;
                  inset: 10px -10px -10px 10px;
                  border-radius: 22px 56px 22px 56px;
                  background: var(--gold)
              }

              .ftr-map iframe {
                  position: relative;
                  z-index: 1;
                  display: block;
                  width: 100%;
                  height: 180px;
                  border: 3px solid var(--cream);
                  border-radius: 22px 56px 22px 56px;
                  background: var(--dark);
                  box-shadow: 0 18px 34px rgba(0, 0, 0, .4)
              }

              .ftr-dir {
                  margin-top: 26px;
                  padding: 9px 22px;
                  font-size: .86rem
              }

              /* quick links */
              .ftr-links {
                  margin: 0;
                  padding: 0;
                  list-style: none
              }

              .ftr-links li+li {
                  margin-top: 6px
              }

              .ftr-links a {
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;
                  padding: 6px 0;
                  font-size: .95rem;
                  font-weight: 500;
                  color: var(--cream);
                  transition: .25s
              }

              .ftr-links a i {
                  font-size: .62rem;
                  color: var(--gold);
                  transition: .25s
              }

              .ftr-links a:hover {
                  color: var(--gold);
                  transform: translateX(6px)
              }

              /* mobile app */
              .ftr-stores {
                  display: flex;
                  justify-content: center;
                  flex-wrap: wrap;
                  gap: 10px
              }

              .ftr-stores a {
                  display: block;
                  padding: 6px 10px;
                  border-radius: 30px;
                  background: var(--white);
                  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
                  transition: .3s
              }

              .ftr-stores a:hover {
                  transform: translateY(-4px)
              }

              .ftr-stores img {
                  display: block;
                  height: 28px;
                  width: auto
              }

              .ftr-code {
                  display: inline-flex;
                  align-items: center;
                  gap: 14px;
                  margin: 24px 0 18px
              }

              .ftr-code small {
                  font-size: .78rem;
                  font-weight: 600;
                  line-height: 1.25;
                  text-align: right;
                  color: var(--gold)
              }

              .ftr-code b {
                  padding-left: 14px;
                  border-left: 2px solid var(--gold);
                  font-family: 'Playfair Display', serif;
                  font-size: 1.7rem;
                  font-weight: 800;
                  letter-spacing: 1px;
                  color: var(--white)
              }

              .ftr-guide {
                  display: inline-flex;
                  align-items: center;
                  gap: 8px;
                  padding: 9px 22px;
                  border-radius: 30px;
                  border: 1.5px solid var(--cream);
                  color: var(--white);
                  font-size: .9rem;
                  font-weight: 500;
                  transition: .3s
              }

              .ftr-guide:hover {
                  background: var(--gold);
                  border-color: var(--gold);
                  color: var(--navy)
              }

              /* ---------- Bottom bar ---------- */
              .ftr-bar {
                  margin-top: 56px;
                  padding: 26px 0 22px;
                  border-top: 1px solid rgba(var(--cream-rgb), .2)
              }

              .ftr-brand {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 16px
              }

              .ftr-logo {
                  flex: none;
                  width: 62px;
                  height: 62px;
                  border-radius: 50%;
                  overflow: hidden;
                  background: var(--cream);
                  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--gold), 0 10px 20px rgba(0, 0, 0, .35)
              }

              .ftr-logo img {
                  width: 100%;
                  height: 100%;
                  display: block;
                  object-fit: cover;
                  object-position: 50% 45%;
                  transform: scale(1.13)
              }

              .ftr-line {
                  position: relative;
                  flex: 1;
                  max-width: 380px;
                  height: 2px;
                  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb), .25))
              }

              .ftr-line::before,
              .ftr-line::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background: var(--gold);
                  transform: translateY(-50%)
              }

              .ftr-line::before {
                  left: 0
              }

              .ftr-line::after {
                  right: 0
              }

              .ftr-name {
                  margin: 0;
                  font-family: 'Poppins', sans-serif;
                  font-weight: 700;
                  font-size: clamp(.9rem, 2.4vw, 1.1rem);
                  color: var(--gold)
              }

              .ftr-copy {
                  margin: 18px 0 0;
                  font-size: .82rem;
                  color: rgba(var(--cream-rgb), .85)
              }

              .ftr-copy b {
                  color: var(--gold);
                  font-weight: 600
              }

              .ftr-copy a {
                  font-weight: 600;
                  color: var(--gold)
              }

              .ftr-copy a:hover {
                  color: var(--gold-l)
              }

              .ftr-copy i {
                  margin-right: 6px;
                  color: var(--orange);
                  font-size: .8rem
              }

              @media(max-width:767.98px) {
                  .ftr-line {
                      display: none
                  }

                  .ftr-brand {
                      flex-direction: column;
                      gap: 12px
                  }
              }

              @media(prefers-reduced-motion:reduce) {

                  .ftr *,
                  .ftr *::before,
                  .ftr *::after {
                      transition: none !important
                  }
              }


              .ft-up {
                  position: fixed;
                  right: 20px;
                  bottom: 20px;
                  z-index: 9990;
                  display: grid;
                  place-items: center;
                  width: 46px;
                  height: 46px;
                  border-radius: 50%;
                  background: var(--gold);
                  color: var(--navy);
                  border: 3px solid var(--cream);
                  box-shadow: 0 8px 18px rgba(var(--dark-rgb), .4);
                  transition: .3s
              }

              .ft-up:hover {
                  background: var(--navy);
                  color: var(--gold);
                  transform: translateY(-4px)
              }










/* ============================================================================== */
            /* Banners & Overlays */
            /* ============================================================================== */
            .universal-banner,
            .hero-banner {
                background: linear-gradient(to right, rgba(26, 26, 26, 0.9), rgba(15, 42, 107, 0.85), rgba(26, 26, 26, 0.9)), url('../images/st\ anns\ images.jpg') center/cover no-repeat;
                height: 360px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .hero-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--ink, #212529);
                opacity: 0.75;
                z-index: 1;
                /* Sits behind the content */
            }

            /* ============================================================================== */
            /* Enhanced Banner & Title Design */
            /* ============================================================================== */

            .banner-content {
                position: relative;
                z-index: 2;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 100px;
            }

            /* Upgraded Page Title */
            .banner-content h1 {
                font-size: 2.5rem;
                /* Larger, more impactful */
                font-weight: 800;
                color: var(--white, #ffffff);
                letter-spacing: 3px;
                text-transform: uppercase;
                text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
                /* Text pop */
                margin-bottom: 15px;
            }

            /* Glowing Gold/Navy Gradient Separator */
            .heading-separator {
                width: 100px;
                height: 5px;
                background: linear-gradient(90deg, var(--gold, #f7ba00), var(--navy, #0f2a6b));
                border-radius: 5px;
                margin: 0 auto 25px;
                box-shadow: 0 0 12px rgba(15, 42, 107, 0.6);
                /* Adds a vibrant blue glow */
            }

            /* Footer layout for lines and pill */
            .banner-footer {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 15px;
                margin-top: 10px;
            }

            /* Fading Navy/Gold Lines on the sides */
            .decorative-line {
                height: 2px;
                width: 60px;
                background: linear-gradient(90deg, transparent, var(--navy, #0f2a6b), transparent);
            }

            /* Glassmorphism Description/Location Pill */
            .location-tag {
                margin: 0;
                padding: 5px 10px;
                background: rgba(15, 42, 107, 0.6);
                /* Dark navy tint matching theme */
                backdrop-filter: blur(8px);
                /* Modern frosted glass effect */
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid rgba(247, 186, 0, 0.5);
                /* Gold border */
                border-radius: 40px;
                color: var(--white, #ffffff);
                font-weight: 500;
                font-size: 0.9rem;
                letter-spacing: 1px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

            /* Responsive adjustments for banner on mobile */
            @media (max-width: 768px) {
                .banner-content h1 {
                    font-size: 2.5rem;
                }

                .decorative-line {
                    display: none;
                    /* Hide side lines on small screens to save space */
                }

                .location-tag {
                    font-size: 0.95rem;
                    padding: 8px 18px;
                }
            }

            /* ============================================================================== */
            /* General Content Styles */
            /* ============================================================================== */

            .about-content {
                padding: 50px 0px;
                background: var(--cream, #fdf0d5);
            }

            .page-heading {
                text-transform: uppercase;
                position: relative;
                color: var(--navy, #0f2a6b);
                font-weight: 700;
            }

            .about-quote {
                text-transform: uppercase;
                position: relative;
                color: var(--navy, #0f2a6b);
                font-weight: 600;
            }

            .yellow-divider {
                width: 200px;
                height: 6px;
                background: linear-gradient(90deg, var(--gold, #f7ba00), var(--gold, #f7ba00));
                margin: 10px auto;
                border-radius: 1px;
            }

            /* Swiper full size */
            .heroSwiper {
                width: 100%;
                height: 100%;
            }

            .heroSwiper .swiper-slide {
                width: 100%;
                height: 100%;
            }

            .heroSwiper img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            /* ============================================================================== */
            /* Cards */
            /* ============================================================================== */
            .custom-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                border-radius: var(--card-radius, 8px);
                border: 1px solid rgba(15, 42, 107, 0.2);
            }

            .custom-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(15, 42, 107, 0.15);
            }

            .card-img-top {
                height: 220px;
                object-fit: cover;
                border-top-left-radius: var(--card-radius, 8px);
                border-top-right-radius: var(--card-radius, 8px);
            }

            /* ============================================================================== */
            /* Lists */
            /* ============================================================================== */
            .list-styling-arrow {
                padding: 0% 0% 0% 1%;
                margin: 0;
            }

            .list-styling-arrow li {
                position: relative;
                line-height: 28px;
                padding: 0px 0 0px 32px;
                list-style: none;
                margin: 8px 0;
                color: var(--ink, #212529);
            }

            .list-styling-arrow li::before {
                content: "\f00c";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                position: absolute;
                left: 0;
                top: 14px;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--gold, #f7ba00);
                color: var(--navy, #0f2a6b);
                font-size: 11px;
                border-radius: 20px;
            }

            ol li {
                line-height: 28px;
                padding: 0px !important;
                list-style-type: disc !important;
                background: none !important;
                list-style: none;
                margin: 8px 0px;
                vertical-align: middle;
                color: var(--ink, #212529);
            }

            /* ============================================================================== */
            /* Tables */
            /* ============================================================================== */
            thead th {
                background: linear-gradient(135deg, var(--navy, #0f2a6b), var(--navy2, #1f3a8f)) !important;
                color: var(--white, #ffffff) !important;
                border-color: var(--navy2, #1f3a8f) !important;
                text-align: center;
                vertical-align: middle;
                font-weight: 700;
            }

            table td {
                font-size: 15px;
                background: #ffffff !important;
                color: var(--ink, #212529);
                border-color: rgba(15, 42, 107, 0.15);
            }

            /* ============================================================================== */
            /* Accordion */
            /* ============================================================================== */

            .accordion-item {
                border: none;
                background: transparent;
                margin-bottom: 10px;
            }

            /* Default ALL buttons (Navy/Navy2 Gradient theme) */
            .accordion-button {
                background: linear-gradient(135deg, var(--navy, #0f2a6b), var(--navy2, #1f3a8f));
                color: var(--white, #ffffff);
                border-radius: 10px !important;
                padding: 15px 20px;
                border: none;
                box-shadow: none;
                transition: all 0.3s ease;
                font-weight: 700;
            }

            /* Remove Bootstrap arrow */
            .accordion-button::after {
                display: none;
            }

            /* Arrow */
            .arrow-icon {
                transition: transform 0.3s ease;
                font-size: 14px;
                color: var(--white, #ffffff);
            }

            /* Rotate when open */
            .accordion-button:not(.collapsed) .arrow-icon {
                transform: rotate(180deg);
            }

            /* OPEN STATE HEADER (Gold background with dark text) */
            .accordion-button:not(.collapsed) {
                border-radius: 10px 10px 0 0 !important;
                background: var(--gold, #f7ba00);
                color: var(--ink, #212529);
            }

            /* Arrow color updates to dark when open */
            .accordion-button:not(.collapsed) .arrow-icon {
                color: var(--ink, #212529);
            }

            /* BODY STYLE */
            .accordion-body {
                background: var(--cream, #fdf0d5);
                border: 1px solid rgba(15, 42, 107, 0.2);
                border-top: none;
                border-radius: 0 0 10px 10px;
                padding: 20px;
                color: var(--text, #3d4766);
            }

            /* Remove gap between header & body */
            .accordion-collapse {
                border: none;
                margin-top: -5px;
            }

            .accordion-button:focus {
                box-shadow: none;
            }