/* ──────────────────────────────────────────────────────────────────
   algioshy-enhance.css
   Client-preview enhancements (post-hydration, vanilla):
   • Toggle bars to pick design/mode variants
   • Dual-path: Design B Parallax Tiles, Design C Glass Split
   • Facilities: Mode A Big Grid, Mode B Circular Carousel,
                 Mode C Alternating Story
   ────────────────────────────────────────────────────────────────── */

/* ── Toggle bar (shared) ──────────────────────────────────────── */
.alg-toggle-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 auto 28px;
  padding: 6px;
  max-width: calc(100% - 24px);
  width: fit-content;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.35);
  position: relative;
  z-index: 5;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.alg-toggle-bar::-webkit-scrollbar { display: none; }
.alg-toggle-bar.light {
  background: rgba(15,30,75,0.06);
  border-color: rgba(15,30,75,0.14);
  box-shadow: 0 10px 30px -10px rgba(15,30,75,0.2);
}
.alg-toggle-btn {
  all: unset;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
  border-radius: 999px;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
  white-space: nowrap;
  scroll-snap-align: center;
  flex: 0 0 auto;
  text-align: center;
}
.alg-toggle-bar.light .alg-toggle-btn { color: rgba(15,30,75,0.72); }
.alg-toggle-btn:hover { color: #fff; transform: translateY(-1px); }
.alg-toggle-bar.light .alg-toggle-btn:hover { color: #0f1e4b; }
.alg-toggle-btn.active {
  background: linear-gradient(135deg, #C1272D, #8a1b20);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(193,39,45,0.55);
}

/* Tablet */
@media (max-width: 900px) {
  .alg-toggle-bar { margin-bottom: 22px; padding: 5px; gap: 6px; }
  .alg-toggle-btn { padding: 9px 16px; font-size: 12.5px; letter-spacing: 0.02em; }
}
/* Mobile */
@media (max-width: 600px) {
  .alg-toggle-bar {
    margin: 0 12px 20px;
    padding: 4px;
    gap: 4px;
    border-radius: 14px;
    justify-content: flex-start;
  }
  .alg-toggle-btn { padding: 8px 12px; font-size: 11.5px; border-radius: 10px; }
}
/* Very narrow */
@media (max-width: 380px) {
  .alg-toggle-btn { padding: 7px 10px; font-size: 11px; }
}

.alg-variant { display: none; }
.alg-variant.active { display: block; }

/* ══════════════════════════════════════════════════════════════
   DUAL PATHWAY — Design B: Parallax Image Tiles
   ══════════════════════════════════════════════════════════════ */
.pwv-b-wrap {
  display: flex;
  gap: 14px;
  height: clamp(380px, 56vw, 560px);
  padding: 0 clamp(14px, 4vw, 40px) 60px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.pwv-b-tile {
  position: relative;
  flex: 1;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 600ms cubic-bezier(.34,1.2,.5,1), box-shadow 600ms ease;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.pwv-b-tile::before {
  content: "";
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 900ms cubic-bezier(.34,1.2,.5,1), filter 600ms ease;
  transform: scale(1.05);
}
/* Branded gradient tiles (no external images — identical render on
   phone + desktop, no Unsplash dependency). */
.pwv-b-tile.left::before {
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(59,130,246,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(14,26,64,0.55) 0%, transparent 60%),
    linear-gradient(135deg, #1e3a8a 0%, #162354 55%, #0a1128 100%);
}
.pwv-b-tile.right::before {
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(248,113,113,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(60,10,20,0.55) 0%, transparent 60%),
    linear-gradient(135deg, #C1272D 0%, #8a1b20 55%, #5a0f12 100%);
}
/* Decorative diagonal stripes for texture (matches on all sizes) */
.pwv-b-tile::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 12px
  );
  pointer-events: none;
  z-index: 1;
}
.pwv-b-tile-inner { z-index: 2; }
.pwv-b-tile:hover { flex: 1.8; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7); }
.pwv-b-tile:hover::before { transform: scale(1.12); filter: saturate(1.15) brightness(1.05); }
.pwv-b-tile:not(:hover):has(~ .pwv-b-tile:hover),
.pwv-b-wrap:hover .pwv-b-tile:not(:hover) { flex: 0.6; }

.pwv-b-tile-inner {
  position: absolute; inset: 0;
  padding: clamp(22px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  z-index: 2;
}
.pwv-b-kicker {
  font-size: 11px; letter-spacing: 0.3em; font-weight: 700;
  opacity: 0.85; margin-bottom: 12px; text-transform: uppercase;
}
.pwv-b-title {
  font-size: clamp(26px, 4.2vw, 44px); font-weight: 800;
  line-height: 1.05; margin-bottom: 10px; letter-spacing: -1px;
}
.pwv-b-desc {
  font-size: 14px; line-height: 1.55; opacity: 0.92;
  max-width: 440px; max-height: 0; overflow: hidden;
  transition: max-height 500ms ease, margin-top 500ms ease;
}
.pwv-b-tile:hover .pwv-b-desc { max-height: 220px; margin-top: 6px; }
.pwv-b-cta {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  align-self: flex-start;
  opacity: 0; transform: translateY(8px);
  transition: opacity 400ms ease 120ms, transform 400ms ease 120ms;
}
.pwv-b-tile:hover .pwv-b-cta { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .pwv-b-wrap { gap: 10px; height: clamp(340px, 52vw, 480px); padding: 0 16px 40px; }
  .pwv-b-title { font-size: 30px; }
}
@media (max-width: 700px) {
  .pwv-b-wrap { flex-direction: column; height: auto; padding: 0 14px 40px; }
  .pwv-b-tile { min-height: 260px; flex: 1 1 auto !important; }
  .pwv-b-tile:hover { flex: 1 1 auto !important; }
  .pwv-b-desc { max-height: 200px; margin-top: 6px; }
  .pwv-b-cta { opacity: 1; transform: none; }
  .pwv-b-title { font-size: 26px; }
}
@media (max-width: 420px) {
  .pwv-b-tile { min-height: 220px; border-radius: 18px; }
  .pwv-b-title { font-size: 22px; }
  .pwv-b-desc  { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   DUAL PATHWAY — Design C: Glass Morphism Split + Decision Core
   ══════════════════════════════════════════════════════════════ */
.pwv-c-wrap {
  position: relative;
  padding: 20px clamp(14px, 4vw, 40px) 70px;
  max-width: 1400px;
  margin: 0 auto;
  perspective: 1600px;
  z-index: 2;
}
.pwv-c-stage {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 0;
  min-height: clamp(360px, 55vw, 540px);
}
.pwv-c-panel {
  position: relative;
  padding: clamp(26px, 3.5vw, 42px);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 40px 80px -30px rgba(0,0,0,0.6);
  transition: transform 500ms cubic-bezier(.34,1.2,.5,1), box-shadow 500ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.pwv-c-panel.left  { transform: rotateY(6deg) translateZ(0); }
.pwv-c-panel.right { transform: rotateY(-6deg) translateZ(0); }
.pwv-c-panel.left:hover  {
  transform: rotateY(0deg) translateZ(40px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 50px 100px -30px rgba(37,99,235,0.5);
  border-color: rgba(96,165,250,0.45);
}
.pwv-c-panel.right:hover {
  transform: rotateY(0deg) translateZ(40px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 50px 100px -30px rgba(193,39,45,0.5);
  border-color: rgba(248,113,113,0.45);
}
.pwv-c-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px; letter-spacing: 0.25em; font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pwv-c-panel.left .pwv-c-badge {
  background: rgba(59,130,246,0.15); color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.3);
}
.pwv-c-panel.right .pwv-c-badge {
  background: rgba(239,68,68,0.15); color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
}
.pwv-c-title {
  font-size: clamp(24px, 3.5vw, 36px); font-weight: 800;
  color: #fff; line-height: 1.1; margin-bottom: 10px; letter-spacing: -1px;
}
.pwv-c-sub {
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75);
  margin-bottom: 22px;
}
.pwv-c-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: 18px;
}
.pwv-c-stat {
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-align: center;
}
.pwv-c-stat-num {
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(135deg, #fff, #c7d2fe);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pwv-c-stat-lbl {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-top: 4px; font-weight: 600;
}

/* Center "OR" decision orb */
.pwv-c-orb {
  width: 72px; height: 72px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0.04) 60%),
    linear-gradient(135deg, rgba(37,99,235,0.4), rgba(193,39,45,0.4));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.2em;
  box-shadow:
    0 0 40px rgba(193,39,45,0.3),
    0 0 40px rgba(37,99,235,0.3),
    inset 0 1px 0 rgba(255,255,255,0.25);
  animation: pwvCOrbPulse 3s ease-in-out infinite;
  position: relative;
  z-index: 3;
}
@keyframes pwvCOrbPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 40px rgba(193,39,45,0.3), 0 0 40px rgba(37,99,235,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%     { transform: scale(1.08); box-shadow: 0 0 60px rgba(193,39,45,0.5), 0 0 60px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.35); }
}

@media (max-width: 1100px) {
  .pwv-c-stage { grid-template-columns: 1fr 60px 1fr; }
  .pwv-c-panel { padding: 24px; }
  .pwv-c-title { font-size: 26px; }
  .pwv-c-orb { width: 60px; height: 60px; font-size: 12px; }
}
@media (max-width: 900px) {
  .pwv-c-wrap { padding: 10px 14px 50px; }
  .pwv-c-stage { grid-template-columns: 1fr; gap: 16px; min-height: auto; }
  .pwv-c-panel.left,.pwv-c-panel.right { transform: none !important; }
  .pwv-c-orb { margin: 4px auto; width: 56px; height: 56px; font-size: 11px; }
  .pwv-c-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pwv-c-stat { padding: 10px; }
  .pwv-c-stat-num { font-size: 18px; }
}
@media (max-width: 420px) {
  .pwv-c-panel { padding: 20px; border-radius: 20px; }
  .pwv-c-title { font-size: 22px; }
  .pwv-c-sub   { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   FACILITIES — Mode A: Big Grid (hover reveal)
   ══════════════════════════════════════════════════════════════ */
.fac-a-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 0 clamp(16px, 4vw, 40px) 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.fac-a-card {
  position: relative;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 24px 50px -20px rgba(15,20,60,0.35);
  transition: transform 500ms cubic-bezier(.34,1.2,.5,1), box-shadow 500ms ease;
}
.fac-a-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px -20px rgba(193,39,45,0.45);
}
.fac-a-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 900ms cubic-bezier(.34,1.2,.5,1);
}
.fac-a-card:hover .fac-a-img { transform: scale(1.1); }
.fac-a-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,15,40,0.92) 0%, rgba(10,15,40,0.55) 45%, transparent 75%);
  z-index: 1;
}
.fac-a-body {
  position: absolute; inset: auto 0 0 0; padding: 22px; z-index: 2; color: #fff;
}
.fac-a-name {
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px;
}
.fac-a-desc {
  font-size: 13px; line-height: 1.5; opacity: 0.85;
  max-height: 0; overflow: hidden;
  transition: max-height 500ms ease, margin-top 500ms ease;
}
.fac-a-card:hover .fac-a-desc { max-height: 180px; margin-top: 6px; }
@media (max-width: 1200px) { .fac-a-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 900px)  {
  .fac-a-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 18px 40px; }
  .fac-a-card { height: 360px; border-radius: 16px; }
  .fac-a-name { font-size: 20px; }
  .fac-a-desc { font-size: 12.5px; }
}
@media (max-width: 560px)  {
  .fac-a-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 14px 36px; }
  .fac-a-card { height: 300px; }
  .fac-a-desc { max-height: 180px; margin-top: 6px; }
  .fac-a-body { padding: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   FACILITIES — Mode B: Circular Carousel
   ══════════════════════════════════════════════════════════════ */
.fac-b-wrap {
  position: relative;
  height: 600px;
  padding: 0 20px 40px;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}
.fac-b-stage {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fac-b-card {
  position: absolute;
  width: 440px; max-width: 80vw;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(15,20,60,0.5);
  transition: transform 700ms cubic-bezier(.34,1.2,.5,1), opacity 500ms ease, filter 500ms ease;
  will-change: transform;
}
.fac-b-card .fac-b-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.fac-b-card .fac-b-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,15,40,0.92), rgba(10,15,40,0.3) 50%, transparent 80%);
}
.fac-b-card .fac-b-body {
  position: absolute; inset: auto 0 0 0; padding: 26px; color: #fff;
}
.fac-b-card .fac-b-name {
  font-size: 26px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.5px;
}
.fac-b-card .fac-b-desc {
  font-size: 14px; line-height: 1.55; opacity: 0.88;
}
.fac-b-card.pos-center   { transform: translateX(0)       translateZ(0)     scale(1);    z-index: 5; filter: none; }
.fac-b-card.pos-left     { transform: translateX(-360px)  translateZ(-200px) scale(0.78); z-index: 4; filter: brightness(0.7); }
.fac-b-card.pos-right    { transform: translateX(360px)   translateZ(-200px) scale(0.78); z-index: 4; filter: brightness(0.7); }
.fac-b-card.pos-far-left { transform: translateX(-620px)  translateZ(-400px) scale(0.55); z-index: 3; filter: brightness(0.45); opacity: 0.5; }
.fac-b-card.pos-far-right{ transform: translateX(620px)   translateZ(-400px) scale(0.55); z-index: 3; filter: brightness(0.45); opacity: 0.5; }
.fac-b-card.pos-hidden   { transform: translateX(0) translateZ(-800px) scale(0.1); opacity: 0; z-index: 1; pointer-events: none; }

.fac-b-arrow {
  all: unset;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 20;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: background 250ms ease, transform 250ms ease;
  font-size: 22px; font-weight: 700;
}
.fac-b-arrow:hover { background: rgba(193,39,45,0.55); transform: translateY(-50%) scale(1.08); }
.fac-b-arrow.prev { left: 24px; }
.fac-b-arrow.next { right: 24px; }

.fac-b-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.fac-b-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer; transition: background 250ms ease, transform 250ms ease;
}
.fac-b-dot.active { background: #C1272D; transform: scale(1.4); }

@media (max-width: 1100px) {
  .fac-b-card { width: 380px; height: 460px; }
  .fac-b-card.pos-left     { transform: translateX(-300px) translateZ(-200px) scale(0.78); }
  .fac-b-card.pos-right    { transform: translateX(300px)  translateZ(-200px) scale(0.78); }
  .fac-b-card.pos-far-left { transform: translateX(-520px) translateZ(-400px) scale(0.55); }
  .fac-b-card.pos-far-right{ transform: translateX(520px)  translateZ(-400px) scale(0.55); }
}
@media (max-width: 900px) {
  .fac-b-wrap { height: 560px; padding: 0 14px 40px; }
  .fac-b-card { width: 340px; max-width: 85vw; height: 440px; }
  .fac-b-card.pos-left     { transform: translateX(-70vw) scale(0.7); filter: brightness(0.55); opacity: 0.65; }
  .fac-b-card.pos-right    { transform: translateX(70vw)  scale(0.7); filter: brightness(0.55); opacity: 0.65; }
  .fac-b-card.pos-far-left,.fac-b-card.pos-far-right { opacity: 0; pointer-events: none; }
  .fac-b-arrow { width: 46px; height: 46px; }
  .fac-b-arrow.prev { left: 12px; }
  .fac-b-arrow.next { right: 12px; }
  .fac-b-card .fac-b-name { font-size: 22px; }
  .fac-b-card .fac-b-desc { font-size: 13px; }
}
@media (max-width: 560px) {
  .fac-b-wrap { height: 500px; }
  .fac-b-card { width: 88vw; height: 400px; border-radius: 18px; }
  .fac-b-card.pos-left     { transform: translateX(-88vw) scale(0.7); filter: brightness(0.5); opacity: 0.5; }
  .fac-b-card.pos-right    { transform: translateX(88vw)  scale(0.7); filter: brightness(0.5); opacity: 0.5; }
  .fac-b-arrow { width: 40px; height: 40px; font-size: 18px; }
  .fac-b-card .fac-b-body { padding: 20px; }
  .fac-b-card .fac-b-name { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   FACILITIES — Mode C: Alternating Story (scroll reveal)
   ══════════════════════════════════════════════════════════════ */
.fac-c-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 40px; }
.fac-c-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 900ms cubic-bezier(.25,.8,.25,1), transform 900ms cubic-bezier(.25,.8,.25,1);
}
.fac-c-row.in-view { opacity: 1; transform: translateY(0); }
.fac-c-row.flip { direction: rtl; }
.fac-c-row.flip > * { direction: ltr; }
.fac-c-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(15,20,60,0.5);
  transform: scale(0.95);
  transition: transform 900ms cubic-bezier(.25,.8,.25,1) 120ms;
}
.fac-c-row.in-view .fac-c-img-wrap { transform: scale(1); }
.fac-c-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 900ms ease;
}
.fac-c-row:hover .fac-c-img { transform: scale(1.07); }
.fac-c-text { padding: 10px 0; }
.fac-c-num {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.25em;
  color: #C1272D; margin-bottom: 10px; text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(193,39,45,0.3);
  border-radius: 999px;
  background: rgba(193,39,45,0.08);
}
.fac-c-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1.2px;
  line-height: 1.05;
  margin-bottom: 14px;
}
.fac-c-wrap.light .fac-c-title { color: #0f1e4b; }
.fac-c-desc {
  font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,0.8);
  max-width: 520px;
}
.fac-c-wrap.light .fac-c-desc { color: rgba(15,30,75,0.75); }
.fac-c-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 18px;
}
.fac-c-chip {
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 12px; color: rgba(255,255,255,0.85); font-weight: 600;
}
.fac-c-wrap.light .fac-c-chip {
  background: rgba(15,30,75,0.04);
  border-color: rgba(15,30,75,0.1);
  color: rgba(15,30,75,0.75);
}

@media (max-width: 1000px) {
  .fac-c-row { gap: 40px; padding: 50px 0; }
  .fac-c-title { font-size: 32px; }
  .fac-c-desc  { font-size: 15px; }
}
@media (max-width: 800px) {
  .fac-c-wrap { padding: 0 18px 40px; }
  .fac-c-row { grid-template-columns: 1fr; gap: 22px; padding: 36px 0; }
  .fac-c-row.flip { direction: ltr; }
  .fac-c-title { font-size: 26px; }
  .fac-c-desc  { font-size: 14px; }
  .fac-c-img-wrap { aspect-ratio: 16/10; }
}
@media (max-width: 480px) {
  .fac-c-wrap { padding: 0 14px 36px; }
  .fac-c-row { gap: 18px; padding: 28px 0; }
  .fac-c-title { font-size: 22px; }
  .fac-c-meta { gap: 8px; }
  .fac-c-chip { font-size: 11px; padding: 5px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   HERO WHITE MODE — matches transparent SC shield logo
   ══════════════════════════════════════════════════════════════ */
.alg-hero-white {
  background: #ffffff !important;
  background-color: #ffffff !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Nuclear approach: opaque white "blanket" pseudo-element at high z-index
   that covers EVERY decorative child (3D canvas, dark gradient overlays,
   loading screens). Solid white ::before, shield painted by a separate
   animated ::after layer that zooms-in from depth. */
.alg-hero-white::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  z-index: 10;
  pointer-events: none;
}
/* ── SC SHIELD WATERMARK — animated zoom-in from depth ─────────────
   Starts small + blurry (logo coming from far away), grows to full
   scale with focus-pull. Gated on `.amh-start` class so mobile can
   defer the animation until the welcome popup is dismissed. */
.alg-hero-white::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/hero-shield.png?v=15");
  background-repeat: no-repeat;
  background-position: 72% 55%;
  background-size: min(80vh, 720px) auto;
  z-index: 11;
  pointer-events: none;
  transform-origin: 72% 55%;
  opacity: 1;
  transform: scale(0.22);
  filter: blur(14px) saturate(0.4);
  will-change: transform, opacity, filter;
  animation: algShieldArrive 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0s both,
             algShieldFloat 9s ease-in-out 2.6s infinite alternate;
}
.alg-hero-white.amh-start::after {
  animation: algShieldArrive 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0s both,
             algShieldFloat 9s ease-in-out 2.6s infinite alternate;
}
@keyframes algShieldArrive {
  0% {
    opacity: 0;
    transform: scale(0.22) translateZ(0);
    filter: blur(14px) saturate(0.4);
  }
  40% {
    opacity: 0.35;
    filter: blur(6px) saturate(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0) saturate(1);
  }
}
@keyframes algShieldFloat {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.03) translateY(-6px); }
}
@media (max-width: 900px) {
  .alg-hero-white::after {
    background-position: center 78%;
    background-size: min(42vh, 320px) auto;
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .alg-hero-white::after {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* Soft radial vignette on top of the blanket for subtle depth.
   NOTE: this used to be a second `::after` rule which overwrote the
   shield's background-image via the `background` shorthand. Moved to
   `::before` overlay trick via a separate decorative element.        */
.alg-hero-white > .alg-hero-vignette {
  position: absolute;
  inset: 0;
  background: none;  /* v26 — removed red/blue tint */
  z-index: 12;
  pointer-events: none;
}
/* Kill the 3D canvas entirely as a second line of defense */
.alg-hero-white canvas {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Flip text colors on the hero */
.alg-hero-white .text-white { color: #0e1a40 !important; }
.alg-hero-white .text-white\/90 { color: rgba(14,26,64,0.92) !important; }
.alg-hero-white .text-white\/80 { color: rgba(14,26,64,0.85) !important; }
.alg-hero-white .text-white\/70 { color: rgba(14,26,64,0.78) !important; }
.alg-hero-white .text-white\/50 { color: rgba(14,26,64,0.55) !important; }
.alg-hero-white .text-white\/25 { color: rgba(14,26,64,0.35) !important; }
/* "SHAPING FUTURES..." chip — swap light tint for navy tint */
.alg-hero-white .bg-white\/10 {
  background: rgba(14,26,64,0.07) !important;
  backdrop-filter: none !important;
}
/* Discover School button (outlined) — flip border + text */
.alg-hero-white a[class*="border-white"],
.alg-hero-white button[class*="border-white"] {
  border-color: #0e1a40 !important;
  color: #0e1a40 !important;
}
.alg-hero-white a[class*="border-white"]:hover,
.alg-hero-white button[class*="border-white"]:hover {
  background: #0e1a40 !important;
  color: #fff !important;
}

/* Left-align hero content and limit width so logo watermark shows at right */
.alg-hero-outer {
  align-items: flex-start !important;
}
.alg-hero-content {
  align-self: flex-start !important;
  max-width: min(640px, 55%) !important;
  padding-left: clamp(8px, 3vw, 48px);
  position: relative;
  z-index: 25;
}
.alg-hero-outer {
  position: relative;
  z-index: 20;
}
/* Any direct content wrapper inside the hero needs to sit above the white blanket */
.alg-hero-white > section,
.alg-hero-white > div.relative,
.alg-hero-white [class*="z-10"],
.alg-hero-white [class*="z-20"] {
  position: relative;
  z-index: 20 !important;
}
@media (max-width: 900px) {
  .alg-hero-content {
    max-width: 100% !important;
    padding-left: 0;
    align-items: center !important;
    text-align: center !important;
  }
  .alg-hero-content * { text-align: center !important; }
  .alg-hero-outer { align-items: center !important; }
  .alg-hero-white::before { background-size: min(60vh, 420px) auto; opacity: 0.12; }
}

/* ══════════════════════════════════════════════════════════════
   NAV WHITE MODE — matches logo, stays legible on white hero
   Tailwind's arbitrary `bg-white/95` + `backdrop-blur-sm` aren't in
   the compiled stylesheet so we force white bg here.
   ══════════════════════════════════════════════════════════════ */
nav.alg-nav-light {
  background: #ffffff !important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 6px 24px -12px rgba(14,26,64,0.18);
  border-bottom: 1px solid rgba(14,26,64,0.06);
}
.alg-nav-light a,
.alg-nav-light span,
.alg-nav-light .text-white {
  color: #0e1a40 !important;
}
/* Keep the red Enroll/Apply button text white on red.
   React emits inline style="background-color: rgb(193, 39, 45);" in
   the DOM (kebab-case), so we match on the rgb value rather than the
   JS property name. Cover both spaced and unspaced rgb variants. */
.alg-nav-light a[style*="rgb(193, 39, 45)"],
.alg-nav-light a[style*="rgb(193,39,45)"],
.alg-nav-light a[style*="rgb(193, 39, 45)"] *,
.alg-nav-light a[style*="rgb(193,39,45)"] *,
.alg-nav-light button[style*="rgb(193, 39, 45)"],
.alg-nav-light button[style*="rgb(193,39,45)"],
.alg-nav-light button[style*="rgb(193, 39, 45)"] *,
.alg-nav-light button[style*="rgb(193,39,45)"] * {
  color: #ffffff !important;
}
/* Hamburger icon on mobile */
.alg-nav-light button svg,
.alg-nav-light button .text-white {
  color: #0e1a40 !important;
  stroke: #0e1a40 !important;
}
/* When scrolled, add subtle shadow under white nav */
.alg-nav-light.bg-white {
  box-shadow: 0 6px 24px -12px rgba(14,26,64,0.18);
}
/* ══════════════════════════════════════════════════════════════
   TOP RIBBON (Admissions Open — Apply Now strip above the nav)
   React renders it with inline style={backgroundColor: primaryDark}
   so we MUST use !important to beat the inline style.
   ══════════════════════════════════════════════════════════════ */
.alg-top-ribbon,
div.alg-top-ribbon {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0e1a40 !important;
  border-bottom: 1px solid rgba(14,26,64,0.08) !important;
}
.alg-top-ribbon *,
.alg-top-ribbon a,
.alg-top-ribbon span,
.alg-top-ribbon div {
  color: #0e1a40 !important;
}
.alg-top-ribbon a:hover,
.alg-top-ribbon span:hover {
  color: #C1272D !important;
}
/* The small red "Apply Now" pill inside the ribbon — keep contrast */
.alg-top-ribbon a[style*="C1272D"],
.alg-top-ribbon a[style*="background"] {
  color: #ffffff !important;
}

/* Unscrolled-state nav (gradient wrapper) — force opaque white override for
   the Tailwind arbitrary `bg-white/95` class which isn't in the compiled CSS */
nav.alg-nav-light[class*="bg-white/95"],
nav.alg-nav-light[class*="from-[#162354]"],
nav.alg-nav-light[class*="to-transparent"] {
  background: #ffffff !important;
  background-image: none !important;
}

/* Close the gap between top ribbon and main nav.
   The React nav uses `lg:top-[32px]` which leaves visible white space when
   the ribbon's actual height differs. Lock both heights and stack them. */
.alg-top-ribbon {
  height: 32px !important;
  min-height: 32px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.6 !important;
}
@media (min-width: 1024px) {
  nav.alg-nav-light {
    top: 32px !important;
  }
  nav.alg-nav-light[class*="shadow-lg"],
  nav.alg-nav-light.shadow-lg {
    top: 0 !important;  /* once scrolled, nav sticks to the top of viewport */
  }
}

/* Belt-and-suspenders: hide the "Shaping Futures. Empowering Minds" chip
   if any cached JS bundle still renders it. Targets the unique red-dash
   + pill structure via the chip's Tailwind classes. */
.alg-hero-white span[class*="rounded-full"][class*="tracking-"][class*="uppercase"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   FACILITIES section — text contrast on light #EEF0F8 background
   (React-rendered facilities grid + our Mode C alternating story)
   ══════════════════════════════════════════════════════════════ */
/* The stock React facilities grid uses "text-white" over image cards
   with a dark gradient overlay — that's fine. But if any plain white
   text bleeds onto the light section bg, darken it: */
#facilities > h2, #facilities > div > h2 { color: #0e1a40 !important; }
#facilities > p,  #facilities > div > p  { color: rgba(14,26,64,0.72) !important; }

/* Mode C title/desc on a light section: force navy palette */
.fac-c-wrap.light .fac-c-title { color: #0e1a40 !important; }
.fac-c-wrap.light .fac-c-desc  { color: rgba(14,26,64,0.78) !important; }
.fac-c-wrap.light .fac-c-num {
  color: #C1272D !important;
  background: rgba(193,39,45,0.08) !important;
  border-color: rgba(193,39,45,0.25) !important;
}
.fac-c-wrap.light .fac-c-chip {
  background: rgba(14,26,64,0.05) !important;
  border-color: rgba(14,26,64,0.12) !important;
  color: rgba(14,26,64,0.8) !important;
}

/* Mode A & B keep dark-overlay-on-image style — those read fine regardless of section bg */

/* ══════════════════════════════════════════════════════════════
   MOBILE PATHWAY VISUAL — replaces cramped Y-junction SVG on phones
   Pure inline SVG injected by enhance.js. Hidden on desktop.
   ══════════════════════════════════════════════════════════════ */
.pw-mobile-viz { display: none; }

@media (max-width: 700px) {
  /* Hide the desktop horizontal Y-junction road — it looks cramped */
  .pw-road-svg,
  .pw-road-wrap svg:not(.pw-mobile-road) {
    display: none !important;
  }
  .pw-mobile-viz {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 8px auto 20px;
    padding: 8px 0 0;
    position: relative;
    z-index: 2;
  }
  .pw-mobile-road {
    width: 100%;
    height: auto;
    overflow: visible;
    filter:
      drop-shadow(0 10px 30px rgba(0,0,0,0.55))
      drop-shadow(0 0 22px rgba(59,130,246,0.18))
      drop-shadow(0 0 22px rgba(239,68,68,0.18));
  }
  .pw-mobile-trunk {
    stroke-dasharray: 8 10;
    animation: pwmTrunkDash 1.4s linear infinite;
  }
  .pw-mobile-path-l,
  .pw-mobile-path-r {
    stroke-linecap: round;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: pwmPathDraw 4.2s cubic-bezier(.65,.05,.3,1) infinite;
  }
  .pw-mobile-path-r { animation-delay: 1.4s; }
  .pw-mobile-end-l,
  .pw-mobile-end-r {
    filter: drop-shadow(0 0 10px currentColor);
    transform-origin: center;
    animation: pwmEndPulse 2.4s ease-in-out infinite;
  }
  .pw-mobile-end-r { animation-delay: 1s; }
  .pw-mobile-label {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .pw-mobile-badge {
    transform-origin: center;
    animation: pwmBadgeGlow 3.2s ease-in-out infinite;
  }
  .pw-mobile-walker {
    transform-origin: center;
    animation: pwmWalker 4.2s cubic-bezier(.65,.05,.3,1) infinite;
    opacity: 0;
  }
}
@keyframes pwmTrunkDash   { to { stroke-dashoffset: -36; } }
@keyframes pwmPathDraw    {
  0%, 8%   { stroke-dashoffset: 280; opacity: 0.3; }
  20%      { opacity: 1; }
  55%, 75% { stroke-dashoffset: 0;   opacity: 1; }
  92%,100% { stroke-dashoffset: -280;opacity: 0; }
}
@keyframes pwmEndPulse {
  0%,100% { transform: scale(1);   }
  50%     { transform: scale(1.25);}
}
@keyframes pwmBadgeGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); }
  50%     { filter: drop-shadow(0 0 14px rgba(255,255,255,0.85)); }
}
@keyframes pwmWalker {
  0%,8%    { opacity: 0; }
  15%      { opacity: 1; }
  55%      { opacity: 1; }
  70%,100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL MOBILE HARDENING — prevent horizontal scroll, tighten
   typography, ensure cards/grids adapt at <420px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  /* Pathway section: tighter padding so content doesn't touch edges */
  #pathways { padding-left: 0 !important; padding-right: 0 !important; }
  .pw-section .pw-head { padding-left: 18px; padding-right: 18px; }
  .pw-section .pw-title { font-size: clamp(24px, 6.5vw, 34px) !important; }
  .pw-section .pw-sub { font-size: 14px; padding: 0 12px; }
  .pw-cards-grid { grid-template-columns: 1fr !important; gap: 14px !important; padding: 12px 14px 40px !important; }
  /* Hero heading shrink on very small screens */
  .alg-hero-content h1 { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.08 !important; }
  .alg-hero-content p  { font-size: 14px !important; }
  /* Nav logo: keep readable height but don't overflow */
  nav.alg-nav-light img { max-height: 64px !important; height: auto !important; }
}
@media (max-width: 420px) {
  .alg-hero-content h1 { font-size: 26px !important; }
  .pw-section .pw-title { font-size: 24px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE HERO — full custom layout on phones/narrow viewports
   White bg, SC logo centered growing 100% → 200%, streamed slogan
   Active only below 900px; enhance.js injects .alg-mobile-hero div.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Hide the original React hero content (h1, p, chip) — the buttons stay */
  .alg-mobile-hero-active .alg-hero-content > h1,
  .alg-mobile-hero-active .alg-hero-content > .alg-hero-content > h1,
  .alg-mobile-hero-active .alg-hero-content > p,
  .alg-mobile-hero-active .alg-hero-content span[class*="rounded-full"] {
    display: none !important;
  }
  /* Kill decorative dark gradient children on mobile (belt-and-suspenders) */
  .alg-mobile-hero-active > div > div[style*="linear-gradient"],
  .alg-mobile-hero-active [style*="#0a1128"],
  .alg-mobile-hero-active [style*="#162354"] {
    background: transparent !important;
    background-image: none !important;
  }
  /* Transparent upper wrappers so the white bg + logo are visible */
  .alg-mobile-hero-active [class*="absolute inset-0"] {
    background: transparent !important;
  }

  /* ── The injected overlay ────────────────────────────────── */
  .alg-mobile-hero {
    position: absolute;
    inset: 0;
    z-index: 30;                 /* above React children AND hero::before blanket */
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 96px 20px 40px;     /* leaves room for top nav */
    gap: 18px;
    pointer-events: none;        /* buttons underneath stay clickable */
  }
  .alg-mobile-hero * { pointer-events: auto; }

  /* Logo stage — centers the image; image animates scale 1 → 2 */
  .amh-logo-stage {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42vh;
    overflow: visible;
    perspective: 800px;
  }
  .amh-logo {
    width: 120px;
    height: auto;
    opacity: 0;
    transform: scale(1) translateZ(0);
    transform-origin: center center;
    filter: drop-shadow(0 10px 28px rgba(14, 26, 64, 0.18));  /* v29 — navy, not red */
  }
  /* Logo animation only runs after `.amh-start` is added (popup closed) */
  .alg-mobile-hero-active.amh-start .amh-logo {
    animation:
      amhLogoIntro 2.4s cubic-bezier(0.2, 0.85, 0.25, 1) 0.2s forwards,
      amhLogoFloat 5s ease-in-out 2.8s infinite alternate;
  }
  @keyframes amhLogoIntro {
    0%   { opacity: 0; transform: scale(1) translateY(0); filter: drop-shadow(0 6px 18px rgba(14,26,64,0.12)) blur(2px); }
    25%  { opacity: 1; transform: scale(1) translateY(0); filter: drop-shadow(0 6px 18px rgba(14,26,64,0.12)) blur(0); }
    100% { opacity: 1; transform: scale(2) translateY(-6px); filter: drop-shadow(0 16px 40px rgba(14, 26, 64, 0.28)); }  /* v29 — navy, not red */
  }
  @keyframes amhLogoFloat {
    0%   { transform: scale(2) translateY(-6px); }
    100% { transform: scale(2.04) translateY(-12px); }
  }

  /* Slogan — two lines, each stream-revealed character by character */
  .amh-slogan {
    margin: 20px 0 0;
    padding: 0 8px;
    text-align: center;
    line-height: 1.15;
    font-family: inherit;
    font-weight: 900;
    letter-spacing: -0.01em;
  }
  .amh-line {
    display: block;
    white-space: nowrap;
  }
  .amh-line-1 {
    color: #0e1a40;
    font-size: clamp(28px, 8vw, 42px);
  }
  .amh-line-2 {
    color: #C1272D;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(30px, 9vw, 46px);
    margin-top: 6px;
  }
  .amh-word {
    display: inline-block;
    white-space: nowrap;
  }
  .amh-space {
    display: inline-block;
    width: 0.3em;
  }
  .amh-ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    animation: amhCharStream 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  }
  @keyframes amhCharStream {
    0%   { opacity: 0; transform: translateY(14px) scale(0.9); filter: blur(6px); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  .amh-sub {
    color: rgba(14, 26, 64, 0.72);
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    max-width: 320px;
    margin: 14px auto 0;
    opacity: 0;
    animation: amhSubFade 0.8s ease-out 4.2s forwards;
  }
  @keyframes amhSubFade { to { opacity: 1; } }

  /* Make sure the buttons underneath are visible & positioned below the overlay */
  .alg-mobile-hero-active .alg-hero-content {
    position: relative;
    z-index: 35;                 /* above the white overlay so buttons show */
    margin-top: auto;
    padding-bottom: 48px;
    pointer-events: auto;
  }
  /* Let the overlay NOT block the button row — push buttons to the bottom */
  .alg-mobile-hero-active .alg-hero-content > *:not(.alg-hero-content-buttons):not(div[class*="gap-4"]):not(a):not(button) {
    display: none !important;
  }

  /* Nuke the watermark ::after on mobile — we're using the JS-injected logo */
  .alg-mobile-hero-active::after {
    display: none !important;
  }
  .alg-mobile-hero-active::before {
    background-color: #ffffff !important;
    z-index: 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amh-logo {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1.6) !important;
    filter: drop-shadow(0 12px 30px rgba(14,26,64,0.22)) !important;  /* v29 — navy, not red */
  }
  .amh-ch {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .amh-sub {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP HERO — streamed H1 chars (same effect as mobile, but
   applied to the existing React h1 so the layout stays intact)
   ══════════════════════════════════════════════════════════════════ */
/* Global keyframes (needed outside the mobile @media block) */
@keyframes amhCharStreamDesktop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.9); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (min-width: 901px) {
  .amh-line-desktop {
    display: inline-block;
  }
  .amh-line-desktop.amh-line-1 {
    color: inherit;
  }
  .amh-line-desktop.amh-line-2 {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    color: #C1272D !important;
  }
  /* Word-level nowrap wrappers so words don't break mid-character */
  .amh-h1-streamed .amh-word {
    display: inline-block;
    white-space: nowrap;
  }
  .amh-h1-streamed .amh-space {
    display: inline-block;
    width: 0.3em;
  }
  /* Each character slides up + fades in + focus-pulls */
  .amh-h1-streamed .amh-ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    animation: amhCharStreamDesktop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    will-change: transform, opacity, filter;
  }
  /* Desktop: on .amh-start, ensure the watermark ::after runs its
     zoom-from-depth arrival animation even when content was restreamed */
  .alg-hero-white.amh-start::after {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .amh-h1-streamed .amh-ch {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .alg-hero-white::after {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BUTTON SYSTEM — senior-designer polish (animated gradients)
   ─────────────────────────────────────────────────────────────────
   Treatments applied app-wide to every button & link-styled-as-button:
     • 14px border-radius
     • ANIMATED rotating gradient angle (uses @property --grad-angle)
       8s smooth linear rotation — subtle, always-on living surface
     • Crimson Prestige (red CTAs) / Midnight Ivy (navy CTAs) palettes
     • Tinted layered shadow (brand-correct)
     • Lift on hover (-2px), press on active (scale 0.98)
     • Aurora Edge sheen sweeps across on hover
     • Respects prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════ */

/* Registered custom property so the angle is actually interpolated
   (Chromium, Safari 16.4+, Firefox 128+). Plain CSS variables can't
   animate a typed <angle> smoothly — this is the key to the effect. */
@property --grad-angle {
  syntax: "<angle>";
  initial-value: 135deg;
  inherits: false;
}

@keyframes algGradSpin {
  0%   { --grad-angle: 135deg; }
  100% { --grad-angle: 495deg; }
}

/* Scope: red-background buttons & red-background links (React renders
   both <button class="bg-[#C1272D]"> and <a style={{backgroundColor:...}}>
   as CTAs. We catch both). */
.alg-btn,
a[class*="bg-[#C1272D]"],
button[class*="bg-[#C1272D]"],
a[style*="#C1272D"],
button[style*="#C1272D"],
a[style*="rgb(193, 39, 45)"],
button[style*="rgb(193, 39, 45)"] {
  --grad-angle: 135deg;
  background: linear-gradient(var(--grad-angle), #E63946 0%, #C1272D 55%, #8B1A1F 100%) !important;
  background-color: #C1272D !important; /* fallback */
  color: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(139, 26, 31, 0.35) !important;
  box-shadow:
    0 6px 20px -6px rgba(193, 39, 45, 0.55),
    0 2px 4px -1px rgba(139, 26, 31, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(139, 26, 31, 0.25) !important;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
  animation: algGradSpin 8s linear infinite;
  position: relative !important;
  overflow: hidden !important;
  letter-spacing: 0.02em;
  isolation: isolate;
}
/* Force every child of a red CTA to WHITE text — beats hero-white's
   .text-white → navy flip rule which would otherwise make button text
   invisible against the red gradient. */
.alg-btn,
.alg-btn *,
a[class*="bg-[#C1272D]"],
a[class*="bg-[#C1272D]"] *,
button[class*="bg-[#C1272D]"],
button[class*="bg-[#C1272D]"] *,
a[style*="#C1272D"],
a[style*="#C1272D"] *,
button[style*="#C1272D"],
button[style*="#C1272D"] *,
.alg-hero-white a[class*="bg-[#C1272D]"],
.alg-hero-white a[class*="bg-[#C1272D]"] *,
.alg-hero-white button[class*="bg-[#C1272D]"],
.alg-hero-white button[class*="bg-[#C1272D]"] *,
.alg-nav-light a[class*="bg-[#C1272D]"],
.alg-nav-light a[class*="bg-[#C1272D]"] *,
.alg-nav-light button[class*="bg-[#C1272D]"],
.alg-nav-light button[class*="bg-[#C1272D]"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Speed up the rotation on hover for a "reacting to your cursor" feel */
.alg-btn:hover,
a[class*="bg-[#C1272D]"]:hover,
button[class*="bg-[#C1272D]"]:hover,
a[style*="#C1272D"]:hover,
button[style*="#C1272D"]:hover {
  animation-duration: 3.5s;
}

.alg-btn::before,
a[class*="bg-[#C1272D]"]::before,
button[class*="bg-[#C1272D]"]::before,
a[style*="#C1272D"]::before,
button[style*="#C1272D"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-18deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.alg-btn:hover,
a[class*="bg-[#C1272D]"]:hover,
button[class*="bg-[#C1272D]"]:hover,
a[style*="#C1272D"]:hover,
button[style*="#C1272D"]:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 32px -10px rgba(193, 39, 45, 0.75),
    0 4px 10px -2px rgba(139, 26, 31, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(139, 26, 31, 0.3) !important;
  filter: brightness(1.05) saturate(1.08) !important;
}

.alg-btn:hover::before,
a[class*="bg-[#C1272D]"]:hover::before,
button[class*="bg-[#C1272D]"]:hover::before,
a[style*="#C1272D"]:hover::before,
button[style*="#C1272D"]:hover::before {
  transform: translateX(120%) skewX(-18deg);
}

.alg-btn:active,
a[class*="bg-[#C1272D]"]:active,
button[class*="bg-[#C1272D]"]:active,
a[style*="#C1272D"]:active,
button[style*="#C1272D"]:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow:
    0 3px 10px -2px rgba(193, 39, 45, 0.45),
    inset 0 2px 4px rgba(139, 26, 31, 0.35) !important;
  transition-duration: 0.1s !important;
}

/* Ensure button text sits above the sheen layer */
.alg-btn > *,
a[class*="bg-[#C1272D]"] > *,
button[class*="bg-[#C1272D]"] > *,
a[style*="#C1272D"] > *,
button[style*="#C1272D"] > * {
  position: relative;
  z-index: 2;
}

/* ── Navy/outlined secondary buttons — Midnight Ivy treatment ── */
a[class*="border-white"],
button[class*="border-white"],
a[class*="border-2"][class*="border-[#0e1a40]"],
button[class*="border-2"][class*="border-[#0e1a40]"] {
  border-radius: 14px !important;
  border-width: 1.5px !important;
  box-shadow:
    0 4px 14px -4px rgba(14, 26, 64, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background 0.3s ease,
    color 0.25s ease !important;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}

a[class*="border-white"]:hover,
button[class*="border-white"]:hover,
a[class*="border-2"][class*="border-[#0e1a40]"]:hover,
button[class*="border-2"][class*="border-[#0e1a40]"]:hover {
  --grad-angle: 135deg;
  background: linear-gradient(var(--grad-angle), #1E3A8A 0%, #162354 60%, #0A1128 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 30px -8px rgba(14, 26, 64, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-color: #162354 !important;
  animation: algGradSpin 5s linear infinite;
}

a[class*="border-white"]:active,
button[class*="border-white"]:active,
a[class*="border-2"][class*="border-[#0e1a40]"]:active,
button[class*="border-2"][class*="border-[#0e1a40]"]:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 0.1s !important;
}

/* Nav links shouldn't get button treatment — scope tightly */
nav a,
nav button,
.alg-top-ribbon a,
.alg-top-ribbon button,
nav.alg-nav-light a[class*="bg-[#C1272D]"] /* keep nav Enroll button styled */ {
  /* no-op — nav Enroll still gets the red CTA rule above via specificity */
}
/* Un-style plain nav text-only links that accidentally matched */
nav a:not([class*="bg-[#"]):not([style*="backgroundColor"]),
.alg-top-ribbon a:not([class*="bg-[#"]):not([style*="backgroundColor"]) {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: inherit;
  transform: none !important;
}
nav a:not([class*="bg-[#"])::before,
.alg-top-ribbon a:not([class*="bg-[#"])::before {
  display: none !important;
}

/* Toggle-bar pills — lighter polish so they don't compete with CTAs */
.alg-toggle-bar button {
  border-radius: 999px !important;
  box-shadow: 0 2px 8px -2px rgba(14, 26, 64, 0.15) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.alg-toggle-bar button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(14, 26, 64, 0.25) !important;
}
.alg-toggle-bar button[aria-pressed="true"],
.alg-toggle-bar button.is-active {
  background: linear-gradient(135deg, #1E3A8A 0%, #162354 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px -4px rgba(14, 26, 64, 0.5) !important;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .alg-btn,
  a[class*="bg-[#C1272D]"],
  button[class*="bg-[#C1272D]"],
  a[class*="border-white"],
  button[class*="border-white"],
  a[class*="border-white"]:hover,
  button[class*="border-white"]:hover {
    transition: none !important;
    animation: none !important;
    --grad-angle: 135deg;
  }
  .alg-btn::before,
  a[class*="bg-[#C1272D]"]::before,
  button[class*="bg-[#C1272D]"]::before {
    display: none !important;
  }
  .alg-btn:hover,
  a[class*="bg-[#C1272D]"]:hover,
  button[class*="bg-[#C1272D]"]:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ADMISSIONS OPEN card — glass/transparent so hero SC logo shows
   ══════════════════════════════════════════════════════════════════ */
.alg-admissions-card {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(14, 26, 64, 0.14) !important;
  box-shadow:
    0 20px 50px -18px rgba(14, 26, 64, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  position: relative;
  z-index: 22;
}
/* Text inside the card needs navy now that the card is light */
.alg-admissions-card,
.alg-admissions-card * {
  color: #0e1a40 !important;
}
.alg-admissions-card .text-white\/70,
.alg-admissions-card [class*="text-white/70"] {
  color: rgba(14, 26, 64, 0.72) !important;
}
.alg-admissions-card h3,
.alg-admissions-card [class*="text-2xl"] {
  color: #0e1a40 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Kill the dark inner decorative circle the card ships with */
.alg-admissions-card > div[class*="absolute"][class*="bg-"],
.alg-admissions-card > div[class*="top-0"],
.alg-admissions-card > div[class*="right-0"] {
  display: none !important;
}
/* Icon tint */
.alg-admissions-card svg {
  color: #C1272D !important;
  stroke: #C1272D !important;
}
/* "LEARN MORE ↗" link inside the card — keep it readable */
.alg-admissions-card a {
  color: #0e1a40 !important;
  font-weight: 600;
}
.alg-admissions-card a:hover {
  color: #C1272D !important;
}

/* ══════════════════════════════════════════════════════════════════
   v15 — Announcement removal, static nav, maps strip, centered
   animated-gradient hero logo, Chairman crop, red-CTA color harden
   ══════════════════════════════════════════════════════════════════ */

/* Hide old top ribbon marquee, bottom fixed promo bar, AND the maps strip
   (v16 — user removed the maps strip). */
.alg-top-ribbon { display: none !important; }
.alg-map-strip { display: none !important; }
div[class*="fixed"][class*="bottom-0"][class*="z-[9999]"] { display: none !important; }

/* Nav sits flush at the top of the viewport, no ribbon / strip offset */
nav.alg-nav-light,
nav[class*="fixed w-full z-40"] {
  top: 0 !important;
}
@media (min-width: 1024px) {
  nav.alg-nav-light { top: 0 !important; }
}

/* Smaller / tighter header — shrink the 108px / 120px Tailwind heights */
nav.alg-nav-light {
  height: 72px !important;
  min-height: 72px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
@media (min-width: 768px) {
  nav.alg-nav-light {
    height: 80px !important;
    min-height: 80px !important;
  }
}
/* Also tighten the inner wrapper that sets h-full */
nav.alg-nav-light > div { height: 100% !important; }
nav.alg-nav-light img { max-height: 52px !important; }

/* ── Desktop centered animated-gradient logo stage ──────────────── */
@property --disc-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes algDiscSpin { to { --disc-angle: 360deg; } }
@keyframes algDiscPulse {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1.06); }
}
@keyframes algShieldArriveCenter {
  0%   { opacity: 0; transform: scale(0.22); filter: blur(14px) saturate(0.4); }
  55%  { opacity: 1; filter: blur(0) saturate(1); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 20px 40px rgba(14,26,64,0.35)); }
}
@keyframes algShieldFloatCenter {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.02) translateY(-6px); }
}

@media (min-width: 901px) {
  /* Disable the side-anchored ::after shield in favor of injected stage */
  .alg-hero-white::after { display: none !important; }

  .alg-desktop-logo-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    pointer-events: none;
  }
  .alg-desktop-logo-disc {
    position: absolute;
    width: min(75vh, 720px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: conic-gradient(
      from var(--disc-angle, 0deg),
      rgba(14, 26, 64, 0.22),
      rgba(27, 46, 109, 0.22),
      rgba(14, 26, 64, 0.28),
      rgba(14, 26, 64, 0.22)
    );  /* v29 — all navy, red removed */
    filter: blur(28px) saturate(1.2);
    animation: algDiscSpin 14s linear infinite,
               algDiscPulse 6s ease-in-out infinite alternate;
    will-change: transform, filter;
  }
  .alg-desktop-logo-img {
    position: relative;
    width: min(70vh, 640px);
    height: auto;
    animation: algShieldArriveCenter 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) both,
               algShieldFloatCenter 9s ease-in-out 2.4s infinite alternate;
    transform-origin: 50% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .alg-desktop-logo-disc,
  .alg-desktop-logo-img {
    animation: none !important;
  }
}

/* ── Chairman portrait — image is pre-cropped at source ─────────── */
.alg-chairman-img {
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* ── Red CTA text-color hardener ────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   v18 — Footer left-to-right gradient (white → navy) so the SC
   logo reads clearly on the white left edge.
   ══════════════════════════════════════════════════════════════════ */
footer#contact {
  background: linear-gradient(90deg,
    #ffffff 0%,
    #eef2fa 22%,
    #1B2E6D 48%,
    #0e1a40 100%) !important;
  background-color: #ffffff !important; /* defeat bg-[#0f1731] on slow paint */
}

/* First column (logo + description + socials) — dark text on white */
footer#contact > div:first-of-type > div:first-child,
footer#contact [class*="col-span-4"]:first-child {
  color: #0e1a40 !important;
}
footer#contact > div:first-of-type > div:first-child p,
footer#contact [class*="col-span-4"]:first-child p {
  color: rgba(14, 26, 64, 0.75) !important;
  font-weight: 400 !important;
}
footer#contact > div:first-of-type > div:first-child h4,
footer#contact > div:first-of-type > div:first-child span,
footer#contact [class*="col-span-4"]:first-child h4,
footer#contact [class*="col-span-4"]:first-child span {
  color: #0e1a40 !important;
}
/* Social icon buttons — border + icon contrast on white */
footer#contact > div:first-of-type > div:first-child a[class*="border-white"],
footer#contact [class*="col-span-4"]:first-child a[class*="border-white"] {
  border-color: rgba(14, 26, 64, 0.18) !important;
  background: rgba(14, 26, 64, 0.04) !important;
}
footer#contact > div:first-of-type > div:first-child a[class*="border-white"] svg,
footer#contact [class*="col-span-4"]:first-child a[class*="border-white"] svg {
  color: #0e1a40 !important;
}
footer#contact > div:first-of-type > div:first-child a[class*="border-white"]:hover,
footer#contact [class*="col-span-4"]:first-child a[class*="border-white"]:hover {
  border-color: #C1272D !important;
  background: rgba(193, 39, 45, 0.08) !important;
}
/* Logo image — ensure full opacity so it reads on the light bg */
footer#contact > div:first-of-type > div:first-child img,
footer#contact [class*="col-span-4"]:first-child img {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 8px rgba(14, 26, 64, 0.15));
}
/* Keep the right-side "SMART COLLEGE" opacity watermark subtle */
footer#contact > div[class*="absolute"][class*="right-0"] {
  opacity: 0.08 !important;
}
/* The copyright / legal row at the bottom — readable against deeper navy */
footer#contact > div:last-of-type,
footer#contact div[class*="border-t"]:last-of-type {
  color: rgba(255, 255, 255, 0.5) !important;
}
@media (max-width: 900px) {
  /* Stack on mobile — fade top to bottom instead so each section is legible */
  footer#contact {
    background: linear-gradient(180deg,
      #ffffff 0%,
      #eef2fa 18%,
      #1B2E6D 42%,
      #0e1a40 100%) !important;
  }
}

/* ── v17: slogan sizing + hero top padding (clears the shrunk nav) ─ */
/* Desktop: cap the h1 so it doesn't swallow the hero; add top padding
   so the slogan sits below the 80px sticky header. */
@media (min-width: 901px) {
  .alg-hero-content {
    padding-top: 110px !important;  /* 80px nav + 30px breathing room */
  }
  .alg-hero-content h1,
  .alg-hero-white h1.amh-h1-streamed {
    font-size: clamp(2.4rem, 5.2vw, 4.2rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 1.25rem !important;
  }
  .alg-hero-content p {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
    line-height: 1.55 !important;
  }
}
@media (max-width: 900px) {
  .alg-hero-content {
    padding-top: 96px !important;  /* 72px nav + 24px */
  }
}

/* ── v17: Google Maps embed section above the footer ───────────── */
.alg-map-embed {
  padding: 80px 24px 60px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
}
.alg-map-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.alg-map-head {
  text-align: center;
  margin-bottom: 28px;
}
.alg-map-head h2 {
  color: #0e1a40;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.alg-map-head p {
  color: rgba(14, 26, 64, 0.7);
  font-size: 1rem;
  margin: 0;
}
.alg-map-frame {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px -20px rgba(14, 26, 64, 0.28);
  border: 1px solid rgba(14, 26, 64, 0.08);
  background: #fff;
}
.alg-map-frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.alg-map-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #C1272D 0%, #8B1A1F 100%);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px -8px rgba(193, 39, 45, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.alg-map-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -6px rgba(193, 39, 45, 0.6);
}
.alg-map-embed {
  text-align: center;
}
@media (max-width: 640px) {
  .alg-map-embed { padding: 56px 16px 40px; }
  .alg-map-frame iframe { height: 320px; }
}

/* Red CTA buttons — force white text EVERYWHERE, beating the
   .alg-hero-white .text-white { color: #0e1a40 } hero flip rule by
   raising specificity (scoped to .alg-hero-white AND the button). */
a[style*="rgb(193, 39, 45)"],
a[style*="rgb(193,39,45)"],
a[style*="#C1272D"],
button[style*="rgb(193, 39, 45)"],
button[style*="rgb(193,39,45)"],
button[style*="#C1272D"],
a[style*="rgb(193, 39, 45)"] *,
a[style*="rgb(193,39,45)"] *,
a[style*="#C1272D"] *,
button[style*="rgb(193, 39, 45)"] *,
button[style*="rgb(193,39,45)"] *,
button[style*="#C1272D"] *,
.alg-hero-white a[style*="rgb(193, 39, 45)"],
.alg-hero-white a[style*="rgb(193,39,45)"],
.alg-hero-white button[style*="rgb(193, 39, 45)"],
.alg-hero-white button[style*="rgb(193,39,45)"],
.alg-hero-white a[style*="rgb(193, 39, 45)"] .text-white,
.alg-hero-white a[style*="rgb(193,39,45)"] .text-white,
.alg-hero-white button[style*="rgb(193, 39, 45)"] .text-white,
.alg-hero-white button[style*="rgb(193,39,45)"] .text-white,
.alg-hero-white a[style*="rgb(193, 39, 45)"] *,
.alg-hero-white a[style*="rgb(193,39,45)"] *,
.alg-hero-white button[style*="rgb(193, 39, 45)"] *,
.alg-hero-white button[style*="rgb(193,39,45)"] * {
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════════
   v19 — Desktop hero: full navy background + stacked vertical layout.
   Slogan streams in above the shield, shield zooms into the center over
   an animated gradient disc, welcome paragraph + CTAs fade in below.
   The React-rendered hero column text and shield are hidden on desktop
   so there's only one clear focal stack (no overlap).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* v22 — Pure white hero background (no tint) — so the shield reads
     crisp on a clean plate in the overview. */
  .alg-hero-white {
    background: #ffffff !important;
    color: #0e1a40 !important;
  }
  .alg-hero-white::before,
  .alg-hero-white::after { display: none !important; }

  /* v23 — KILL the React navy overlay divs. The React hero renders two
     absolutely-positioned divs with INLINE styles:
       • background: linear-gradient(135deg, #0a1128 0%, #162354 55%, #0a1128 100%)
       • background: radial-gradient(... rgba(193,39,45,0.08) ...)
     plus a loading screen that also uses the #0a1128/#162354 palette.
     !important on the parent can't beat an inline style on a child, so
     hide any element inside the hero whose inline background contains
     one of the navy hex codes. The red accent stays untouched. */
  .alg-hero-white div[style*="#0a1128"],
  .alg-hero-white div[style*="#162354"],
  .alg-hero-white div[style*="0a1128"],
  .alg-hero-white div[style*="162354"],
  .alg-hero-white div[style*="linear-gradient(135deg"] {
    display: none !important;
  }

  /* v24 — Remove the floating "Admissions Open" card on the right side of
     the hero. The bundle renders it inside an absolute .alg-admissions-card
     container ("Join a community defined by excellence..."). Its content
     is already represented by the bottom admissions bar (v22), so the
     redundant card is dropped from the overview.  Hide the positioned
     wrapper too so the empty 320px box doesn't trap pointer events. */
  .alg-hero-white .alg-admissions-card,
  .alg-hero-white div[class*="absolute"][class*="bottom-12"][class*="right-6"][class*="w-[320px]"] {
    display: none !important;
  }

  /* Hide the duplicate React hero content (left-column text + right shield).
     We keep the floating "Admissions Open" card (positioned via absolute) by
     only targeting direct flow elements inside .alg-hero-content and the
     shield image. */
  .alg-hero-white .alg-hero-content > h1,
  .alg-hero-white .alg-hero-content > p,
  .alg-hero-white .alg-hero-content > div[class*="flex"][class*="gap"],
  .alg-hero-white .alg-hero-content > div[class*="gap-4"],
  .alg-hero-white .alg-hero-content span[class*="rounded-full"][class*="uppercase"],
  .alg-hero-white img[src*="hero-shield"]:not(.alg-desktop-logo-img),
  .alg-hero-white img[alt="Smart College"]:not(.alg-desktop-logo-img) {
    visibility: hidden !important;
  }

  /* Stacked stage — sits above the now-hidden React flow */
  .alg-desktop-logo-stage {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    padding: 130px 40px 60px !important;
    z-index: 15 !important;
    pointer-events: auto !important;
    text-align: center;
  }

  /* SLOGAN — per-letter streamed reveal on white */
  .alg-desktop-slogan {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.02;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .alg-desktop-slogan-line {
    font-family: inherit;
    color: #0e1a40;
  }
  .alg-desktop-slogan-accent {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: #C1272D;
  }
  /* Per-letter stream: each span animates from blur+offset → visible using
     its own --d delay set inline by enhance.js */
  .alg-stream-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(6px);
    animation: algCharStream 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--d, 0s);
    will-change: opacity, transform, filter;
  }
  @keyframes algCharStream {
    0%   { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0);     filter: blur(0); }
  }

  /* LOGO wrap — disc + shield, shield zooms in */
  .alg-desktop-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(44vh, 360px);
    aspect-ratio: 1;
  }
  .alg-desktop-logo-disc {
    position: absolute !important;
    inset: -24% !important;
    width: auto !important;
    aspect-ratio: 1;
    border-radius: 50%;
    /* Softer tint for white background — v29: red removed, all navy */
    background: conic-gradient(from var(--disc-angle, 0deg),
      rgba(14,26,64,0.18), rgba(27,46,109,0.18),
      rgba(14,26,64,0.22), rgba(14,26,64,0.18));
    filter: blur(40px) saturate(1.15);
    animation: algDiscSpin 14s linear infinite,
               algDiscPulse 6s ease-in-out infinite alternate;
    will-change: transform, filter;
    pointer-events: none;
  }
  .alg-desktop-logo-img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    transform-origin: 50% 50%;
    /* Bigger, more pronounced zoom-in */
    animation: algShieldZoomIn 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.5s both,
               algShieldFloatCenter 9s ease-in-out 3.4s infinite alternate !important;
    filter: drop-shadow(0 20px 44px rgba(14,26,64,0.22));
  }
  @keyframes algShieldZoomIn {
    0%   { opacity: 0; transform: scale(0.12); filter: blur(18px) drop-shadow(0 0 0 transparent); }
    55%  { opacity: 1; filter: blur(0) drop-shadow(0 14px 34px rgba(14,26,64,0.18)); }
    100% { opacity: 1; transform: scale(1);    filter: drop-shadow(0 20px 44px rgba(14,26,64,0.22)); }
  }

  /* WELCOME paragraph — dark text on white */
  .alg-desktop-welcome {
    max-width: 640px;
    margin: 0;
    font-size: clamp(0.98rem, 1.1vw, 1.125rem);
    line-height: 1.6;
    color: rgba(14, 26, 64, 0.78);
    font-weight: 400;
    opacity: 0;
    transform: translateY(16px);
    animation: algFadeUp 0.9s ease-out 2.6s both;
  }
  @keyframes algFadeUp {
    0%   { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* CTAs — fade in last */
  .alg-desktop-ctas {
    display: flex;
    gap: 14px;
    opacity: 0;
    animation: algFadeUp 0.9s ease-out 2.9s both;
  }
  .alg-desktop-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .alg-desktop-cta-primary {
    background: #C1272D;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(193,39,45,0.35);
  }
  .alg-desktop-cta-primary:hover {
    background: #a81f26;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(193,39,45,0.45);
  }
  .alg-desktop-cta-ghost {
    background: transparent;
    color: #0e1a40;
    border: 1.5px solid rgba(14, 26, 64, 0.35);
  }
  .alg-desktop-cta-ghost:hover {
    background: rgba(14, 26, 64, 0.06);
    border-color: #0e1a40;
  }
}
@media (prefers-reduced-motion: reduce) {
  .alg-desktop-slogan,
  .alg-stream-char,
  .alg-desktop-logo-img,
  .alg-desktop-logo-disc,
  .alg-desktop-welcome,
  .alg-desktop-ctas { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v21 — Hero layout toggle (desktop only)
   Two layouts selectable via pill toggle:
     • "center" (default): slogan above → logo center → text below
     • "left":   slogan on LEFT, big logo zoom-in on CENTER/RIGHT,
                 welcome + CTAs also on LEFT
   Choice persists in localStorage as alg.hero.layout.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* Toggle pill — sits top-right of the hero stage */
  .alg-hero-toggle {
    position: absolute;
    top: 118px;
    right: 40px;
    z-index: 30;
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: rgba(14, 26, 64, 0.06);
    border: 1px solid rgba(14, 26, 64, 0.12);
    border-radius: 999px;
    backdrop-filter: blur(6px);
  }
  .alg-hero-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0;
    background: transparent;
    color: rgba(14, 26, 64, 0.7);
    font: 600 12px/1 system-ui, -apple-system, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .alg-hero-toggle-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
  }
  .alg-hero-toggle-btn:hover { color: #0e1a40; }
  .alg-hero-toggle-btn[aria-selected="true"] {
    background: #0e1a40;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(14, 26, 64, 0.2);
  }

  /* ── "Split" layout (data-layout="left") ───────────────────────── */
  .alg-desktop-logo-stage[data-layout="left"] {
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "slogan  logo"
      "welcome logo"
      "ctas    logo" !important;
    column-gap: 40px !important;
    row-gap: 20px !important;
    align-items: center !important;
    justify-items: start !important;
    padding: 130px 60px 60px !important;
    text-align: left !important;
  }
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-slogan {
    grid-area: slogan;
    align-items: flex-start;
    text-align: left;
    font-size: clamp(2.8rem, 5.6vw, 4.8rem);
  }
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-slogan-line,
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-slogan-accent {
    display: block;
  }
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-welcome {
    grid-area: welcome;
    text-align: left;
    margin: 0;
  }
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-ctas {
    grid-area: ctas;
    justify-self: start;
  }
  /* Bigger shield, higher z-index, zooms in "from far away" */
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-logo-wrap {
    grid-area: logo;
    justify-self: center;
    width: min(62vh, 560px) !important;
    z-index: 25;
  }
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-logo-img {
    animation: algShieldZoomFar 2.2s cubic-bezier(0.18, 0.75, 0.22, 1) 1.5s both,
               algShieldFloatCenter 10s ease-in-out 3.8s infinite alternate !important;
    filter: drop-shadow(0 28px 60px rgba(14,26,64,0.28));
  }
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-logo-disc {
    inset: -32% !important;
    /* v29 — red removed, all navy for left-layout disc */
    background: conic-gradient(from var(--disc-angle, 0deg),
      rgba(14,26,64,0.26), rgba(27,46,109,0.26),
      rgba(14,26,64,0.30), rgba(14,26,64,0.26)) !important;
    filter: blur(48px) saturate(1.25) !important;
  }
  @keyframes algShieldZoomFar {
    0%   { opacity: 0; transform: scale(0.05) translateZ(0); filter: blur(22px); }
    55%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: scale(1);    filter: blur(0); }
  }

  /* Replay class — forces a re-run of the zoom when toggling layouts */
  .alg-desktop-logo-img.alg-replay {
    animation: algShieldZoomIn 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0s both,
               algShieldFloatCenter 9s ease-in-out 1.8s infinite alternate !important;
  }
  .alg-desktop-logo-stage[data-layout="left"] .alg-desktop-logo-img.alg-replay {
    animation: algShieldZoomFar 1.8s cubic-bezier(0.18, 0.75, 0.22, 1) 0s both,
               algShieldFloatCenter 10s ease-in-out 2.2s infinite alternate !important;
  }
}

/* Toggle hidden on mobile */
@media (max-width: 900px) {
  .alg-hero-toggle { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v22 — Fixed bottom Admissions bar (desktop + mobile).
   Mirrors the mobile popup copy. Dismissible via X; choice persists in
   localStorage (alg.admBar.dismissed).
   ════════════════════════════════════════════════════════════════════ */
.alg-adm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: linear-gradient(90deg, #0e1a40 0%, #1B2E6D 50%, #0e1a40 100%);
  color: #ffffff;
  box-shadow: 0 -6px 24px rgba(14, 26, 64, 0.25);
  border-top: 3px solid #C1272D;
  animation: algAdmBarIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}
@keyframes algAdmBarIn {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.alg-adm-bar.alg-adm-bar-closing {
  animation: algAdmBarOut 0.28s ease-in forwards;
}
@keyframes algAdmBarOut {
  0%   { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.alg-adm-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 52px 12px 24px;
}
.alg-adm-bar-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
}
.alg-adm-bar-kicker {
  font: 800 14px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.alg-adm-bar-year {
  color: #ff9da1;
  white-space: nowrap;
}
.alg-adm-bar-sub {
  font: 400 12px/1.3 system-ui, -apple-system, sans-serif;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 2px;
}
.alg-adm-bar-ctas {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}
.alg-adm-bar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 6px;
  font: 700 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.alg-adm-bar-cta-primary {
  background: #C1272D;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(193, 39, 45, 0.35);
}
.alg-adm-bar-cta-primary:hover {
  background: #a81f26;
  transform: translateY(-1px);
}
.alg-adm-bar-cta-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.alg-adm-bar-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.alg-adm-bar-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.alg-adm-bar-close svg {
  width: 16px;
  height: 16px;
}
.alg-adm-bar-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: translateY(-50%) scale(1.06);
}

/* v33 — persistent location pill inside the admissions bar */
.alg-adm-bar-addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: 600 12px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.alg-adm-bar-addr:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #1B2E6D;
  transform: translateY(-1px);
}
.alg-adm-bar-addr-pin {
  color: #ff9da1;
  flex-shrink: 0;
  transition: color 160ms ease;
}
.alg-adm-bar-addr:hover .alg-adm-bar-addr-pin { color: #C1272D; }

/* Lift the page content so nothing is hidden under the bar */
body.alg-adm-bar-active { padding-bottom: 78px; }

@media (max-width: 640px) {
  .alg-adm-bar-inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 46px 12px 16px;
  }
  .alg-adm-bar-text { flex: 1 1 100%; }
  .alg-adm-bar-kicker { font-size: 13px; }
  .alg-adm-bar-sub { font-size: 11px; }
  .alg-adm-bar-addr {
    flex: 1 1 100%;
    justify-content: center;
    padding: 8px 14px;
    font-size: 11.5px;
  }
  .alg-adm-bar-ctas { flex: 1 1 100%; }
  .alg-adm-bar-cta { flex: 1 1 0; padding: 10px 12px; font-size: 10px; }
  body.alg-adm-bar-active { padding-bottom: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .alg-adm-bar { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   v19 — Footer social icons: blue on the white side of the gradient.
   Footer now fades white→navy left-to-right (v18). Social buttons sit
   on the white half, so they get a navy border/icon treatment instead
   of white-on-white ghosting. TikTok badge is replaced with the real
   Wikipedia SVG by enhance.js and gets a solid black rounded-square
   look matching TikTok's brand mark.
   ════════════════════════════════════════════════════════════════════ */
footer#contact a.alg-social-icon {
  border-color: rgba(27, 46, 109, 0.35) !important;
  color: #1B2E6D !important;
  background: rgba(255, 255, 255, 0.65) !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
/* Instagram/Facebook use stroke="currentColor" + fill="none" — do NOT force
   fill or the outlines turn into a solid blob. Just set color so stroke
   inherits. TikTok SVG has its own explicit fill values so it's unaffected. */
footer#contact a.alg-social-icon svg {
  color: #1B2E6D;
}
footer#contact a.alg-social-icon:hover {
  background: #1B2E6D !important;
  color: #ffffff !important;
  border-color: #1B2E6D !important;
  transform: translateY(-2px);
}
footer#contact a.alg-social-icon:hover svg { color: #ffffff; }

/* TikTok badge: the injected SVG is an intrinsic 96x96 black square
   with the white glyph — make it fill the round chip cleanly. */
footer#contact a.alg-social-icon .alg-social-tiktok,
footer#contact a.alg-social-icon[href*="tiktok.com"] {
  overflow: hidden;
}
footer#contact a.alg-social-icon svg[viewBox="0 0 96 96"] {
  width: 1.4em !important;
  height: 1.4em !important;
  border-radius: 6px;
}

/* ============================================================
   BUILD MODE — live theme editor drawer (v25)
   Floating gear button (bottom-left) + right-side slide-in
   drawer with presets, per-section color/gradient controls,
   and JSON/CSS export.
   ============================================================ */

/* Toggle button — floats bottom-left, lifts above admissions bar */
.alg-bm-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #1B2E6D 0%, #0e1a40 100%);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(14, 26, 64, 0.35), 0 0 0 2px rgba(255,255,255,0.08) inset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease;
}
.alg-bm-toggle:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 34px rgba(14, 26, 64, 0.45), 0 0 0 2px rgba(255,255,255,0.12) inset;
}
.alg-bm-toggle:active { transform: translateY(0) scale(0.98); }
.alg-bm-toggle svg { width: 22px; height: 22px; }

/* Lift toggle above the fixed admissions bar when it's present */
body.alg-adm-bar-active .alg-bm-toggle { bottom: 94px; }

/* Drawer — right-side, slides in */
.alg-bm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 92vw;
  height: 100vh;
  z-index: 2147483001;
  background: #ffffff;
  color: #0e1a40;
  box-shadow: -24px 0 48px rgba(14, 26, 64, 0.22);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
.alg-bm-drawer.open { transform: translateX(0); }

/* Header */
.alg-bm-header {
  flex: 0 0 auto;
  padding: 18px 20px;
  border-bottom: 1px solid #eef0f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #0e1a40 0%, #1B2E6D 100%);
  color: #ffffff;
}
.alg-bm-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}
.alg-bm-close {
  appearance: none;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms ease;
}
.alg-bm-close:hover { background: rgba(255,255,255,0.12); }

/* Body — scrollable */
.alg-bm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px 24px;
}
.alg-bm-body section { margin-bottom: 20px; }
.alg-bm-body h3 {
  margin: 4px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7489;
}

/* Preset grid */
.alg-bm-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.alg-bm-preset {
  appearance: none;
  border: 1px solid #dfe3ee;
  background: #f7f8fb;
  color: #0e1a40;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.alg-bm-preset:hover { background: #eef1f8; border-color: #c4cbde; }
.alg-bm-preset.selected {
  background: #0e1a40;
  color: #ffffff;
  border-color: #0e1a40;
}

/* Section editors (accordion) */
.alg-bm-sec {
  border: 1px solid #eef0f7;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #ffffff;
}
.alg-bm-sec > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 13px;
  color: #0e1a40;
  background: #f7f8fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.alg-bm-sec > summary::-webkit-details-marker { display: none; }
.alg-bm-sec > summary::after {
  content: "+";
  font-size: 18px;
  color: #8892ac;
  transition: transform 180ms ease;
}
.alg-bm-sec[open] > summary::after { content: "−"; }
.alg-bm-sec-body {
  padding: 12px 14px 14px;
  border-top: 1px solid #eef0f7;
}

/* Row — label + control */
.alg-bm-row { margin-bottom: 10px; }
.alg-bm-row > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7489;
  margin-bottom: 6px;
}

/* Swatch row */
.alg-bm-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.alg-bm-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(14, 26, 64, 0.18);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.alg-bm-swatch:hover { transform: scale(1.12); }
.alg-bm-swatch.selected {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0e1a40;
}
.alg-bm-color-input {
  width: 30px;
  height: 30px;
  border: 1px solid #dfe3ee;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: #ffffff;
  margin-left: 4px;
}
.alg-bm-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.alg-bm-color-input::-webkit-color-swatch { border-radius: 4px; border: none; }

/* Background type tabs */
.alg-bm-bg-tabs {
  display: inline-flex;
  background: #f1f3f9;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
}
.alg-bm-bg-tabs button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7489;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.alg-bm-bg-tabs button.selected {
  background: #ffffff;
  color: #0e1a40;
  box-shadow: 0 1px 3px rgba(14, 26, 64, 0.1);
}

/* Gradient angle chips */
.alg-bm-angle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.alg-bm-angle > label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7489;
  margin-right: 4px;
}
.alg-bm-chip {
  appearance: none;
  border: 1px solid #dfe3ee;
  background: #ffffff;
  color: #0e1a40;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.alg-bm-chip:hover { background: #eef1f8; }
.alg-bm-chip.selected {
  background: #0e1a40;
  color: #ffffff;
  border-color: #0e1a40;
}
.alg-bm-angle-input {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid #dfe3ee;
  border-radius: 6px;
  font-size: 12px;
  color: #0e1a40;
}

/* Actions */
.alg-bm-actions {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef0f7;
  margin-top: 8px;
}
.alg-bm-action {
  appearance: none;
  border: none;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 120ms ease, background 150ms ease, box-shadow 150ms ease;
}
.alg-bm-copy-json {
  background: #C1272D;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(193, 39, 45, 0.3);
}
.alg-bm-copy-json:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(193, 39, 45, 0.4); }
.alg-bm-copy-css {
  background: #0e1a40;
  color: #ffffff !important;
}
.alg-bm-copy-css:hover { background: #1B2E6D; }
.alg-bm-reset {
  background: #f1f3f9;
  color: #6b7489 !important;
}
.alg-bm-reset:hover { background: #e5e8f1; color: #0e1a40 !important; }

/* Copied! state — flashes green so the user sees confirmation on the
   button itself (in addition to the toast). Overrides the red/navy
   backgrounds of the two copy buttons for 1.6s. */
.alg-bm-action.alg-bm-copied,
.alg-bm-action.alg-bm-copied:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important;
  cursor: default;
  transform: none !important;
}
.alg-bm-action.alg-bm-copied::before {
  content: "✓ ";
  font-weight: 700;
}

/* Toast */
.alg-bm-toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(20px);
  z-index: 2147483002;
  padding: 10px 18px;
  background: #0e1a40;
  color: #ffffff;
  border-radius: 999px;
  font: 500 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(14, 26, 64, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.alg-bm-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: drawer becomes full-width */
@media (max-width: 640px) {
  .alg-bm-drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .alg-bm-toggle {
    width: 46px;
    height: 46px;
    left: 14px;
    bottom: 14px;
  }
  body.alg-adm-bar-active .alg-bm-toggle { bottom: 84px; }
  .alg-bm-preset-grid { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .alg-bm-toggle,
  .alg-bm-drawer,
  .alg-bm-toast,
  .alg-bm-preset,
  .alg-bm-swatch,
  .alg-bm-chip,
  .alg-bm-action {
    transition: none !important;
  }
}

/* ============================================================
   v26 — Remove red / blue colored wash behind the hero shield.
   User wants a clean white background; the conic-gradient disc
   (red + navy stops, heavily blurred) was bleeding tint across
   the hero. Kill the disc background across every breakpoint
   and layout variant, and strip the faint hero vignette too.
   ============================================================ */
.alg-hero-white > .alg-hero-vignette { background: none !important; }

.alg-desktop-logo-disc,
.alg-desktop-logo-stage[data-layout="left"] .alg-desktop-logo-disc,
.alg-desktop-logo-stage[data-layout="stacked"] .alg-desktop-logo-disc {
  background: transparent !important;
  filter: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* ============================================================
   v31 — Hard white cleanup around the desktop-first-mount logo.
   Even at opacity:0 the disc was leaving visual ghosting via
   filter/blend. Pull it from the layout entirely. Also remove
   the shield's navy drop-shadow so the white around it is truly
   clean. And kill the footer's red top border + the "Map Coming
   Soon" navy overlay so the default-white footer is uniform.
   ============================================================ */
.alg-desktop-logo-disc,
.alg-desktop-logo-stage[data-layout="left"] .alg-desktop-logo-disc,
.alg-desktop-logo-stage[data-layout="stacked"] .alg-desktop-logo-disc {
  display: none !important;
}
.alg-desktop-logo-img,
.alg-desktop-logo-stage[data-layout="left"] .alg-desktop-logo-img {
  filter: none !important;
}
.alg-desktop-logo-img.alg-replay {
  filter: none !important;
}
/* Shield zoom-in keyframes referenced drop-shadow; nullify via override */
.alg-desktop-logo-img,
.alg-desktop-logo-img.alg-replay {
  animation: algShieldZoomInFlat 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.5s both,
             algShieldFloatCenter 9s ease-in-out 3.4s infinite alternate !important;
}
@keyframes algShieldZoomInFlat {
  0%   { opacity: 0; transform: scale(0.12); filter: blur(18px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1);    filter: none; }
}

/* Footer white cleanup */
html body footer#contact {
  border-top-color: transparent !important;
  border-top-width: 0 !important;
}
html body footer#contact > div.absolute.inset-y-0,
html body footer#contact > div[class*="absolute"][class*="inset-y-0"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v32 — hero address, popup address, book-a-visit, transportation
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero address line ───────────────────────────────────────────── */
.alg-hero-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  font-size: 13px;
  font-weight: 500;
  color: #1B2E6D;
  line-height: 1.4;
}
.alg-hero-address svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #C1272D;
}
.alg-hero-address a {
  color: #1B2E6D;
  text-decoration: underline dashed rgba(27,46,109,0.45);
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.alg-hero-address a:hover {
  color: #C1272D;
  text-decoration-color: #C1272D;
}
@media (max-width: 900px) {
  .alg-hero-address {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 12.5px;
  }
}

/* ── Popup address button (v34 — full-width card button) ─────────── */
.alg-popup-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  margin: 18px auto 0;
  padding: 12px 22px;
  background: linear-gradient(135deg, #E63946, #C1272D 55%, #8B1A1F);
  color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 24px -10px rgba(193,39,45,0.55);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.alg-popup-address:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(193,39,45,0.65);
}
.alg-popup-address svg {
  width: 16px; height: 16px;
  color: #ffffff;
  flex: 0 0 auto;
}
.alg-popup-address a {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.alg-popup-address a:hover { color: #ffffff; }

/* v35 — in-card close X anchored to the popup card's top-right corner */
.alg-popup-close-v33 {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  direction: ltr;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 160ms ease, transform 160ms ease;
}
.alg-popup-close-v33:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}
.alg-popup-close-v33:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.alg-popup-close-v33 svg { display: block; }

/* v36 — Floating WhatsApp button, right side of the viewport */
.alg-wa-float {
  position: fixed;
  right: 20px;
  bottom: 110px; /* sits above the sticky admissions bar */
  z-index: 9997;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 14px 28px -10px rgba(37, 211, 102, 0.55),
              0 6px 14px -8px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.alg-wa-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 20px 36px -10px rgba(37, 211, 102, 0.7),
              0 10px 18px -8px rgba(0, 0, 0, 0.4);
}
.alg-wa-float svg {
  width: 34px;
  height: 34px;
  display: block;
  position: relative;
  z-index: 1;
}
.alg-wa-float-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.5);
  animation: algWaPulse 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes algWaPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(1.55); opacity: 0;    }
  100% { transform: scale(1.55); opacity: 0;    }
}
@media (max-width: 640px) {
  .alg-wa-float {
    right: 14px;
    bottom: 178px; /* clear the wrapped 3-row admissions bar on mobile */
    width: 52px;
    height: 52px;
  }
  .alg-wa-float svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .alg-wa-float-pulse { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   v41 — Discover School 3D mode
   React bundle toggles a fullscreen BuildingScene when "Discover
   School" is clicked. Our sticky chrome was covering it; hide all of
   it while `body.alg-3d-mode` is set and surface a prominent dismiss.
   ══════════════════════════════════════════════════════════════════ */
body.alg-3d-mode .alg-adm-bar,
body.alg-3d-mode .alg-wa-float,
body.alg-3d-mode .alg-hero-address,
body.alg-3d-mode .alg-popup-address,
body.alg-3d-mode .alg-popup-close-v33 {
  display: none !important;
}
/* Release the page-scroll padding we use to clear the admissions bar. */
body.alg-3d-mode.alg-adm-bar-active { padding-bottom: 0 !important; }
body.alg-3d-mode { overflow: hidden; }

/* Prominent top-right dismiss X (pairs with the React "Back" top-left). */
.alg-3d-dismiss {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10005;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(22, 35, 84, 0.85); /* #162354 — matches React back-btn */
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.alg-3d-dismiss:hover {
  background: rgba(193, 39, 45, 0.85); /* #C1272D hover — matches React style */
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.06);
}
.alg-3d-dismiss:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.alg-3d-dismiss svg { display: block; }
@supports (top: env(safe-area-inset-top)) {
  .alg-3d-dismiss {
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 640px) {
  .alg-3d-dismiss { width: 40px; height: 40px; top: 12px; right: 12px; }
}

/* ── Book a Visit section ────────────────────────────────────────── */
#book-visit {
  padding: 72px 24px;
  background: #f5f6fa;
}
.alg-book-visit {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(27,46,109,0.10);
  border-radius: 20px;
  box-shadow: 0 20px 48px -24px rgba(14,26,64,0.25);
  padding: 48px;
}
.alg-book-visit-heading {
  color: #0e1a40;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.alg-book-visit-sub {
  color: rgba(27,46,109,0.70);
  font-size: 15px;
  margin: 0 0 28px;
  max-width: 620px;
}
.alg-book-visit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.alg-book-visit-form .alg-bv-row:last-of-type,
.alg-book-visit-form .alg-bv-submit {
  grid-column: 1 / -1;
}
.alg-bv-row { display: block; }
.alg-bv-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1B2E6D;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.alg-bv-input {
  width: 100%;
  border: 1px solid rgba(27,46,109,0.35);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  color: #0e1a40;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  font-family: inherit;
  box-sizing: border-box;
}
.alg-bv-input:focus {
  outline: none;
  border-color: #C1272D;
  box-shadow: 0 0 0 3px rgba(193,39,45,0.18);
}
.alg-bv-submit {
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, #E63946, #C1272D 55%, #8B1A1F);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(193,39,45,0.55);
  transition: transform 160ms ease, box-shadow 160ms ease;
  margin-top: 8px;
}
.alg-bv-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(193,39,45,0.65); }

/* Success panel */
.alg-book-visit-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 32px 20px;
}
.alg-bv-thanks { color: #0e1a40; margin: 0; font-size: 16px; font-weight: 600; }
.alg-bv-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.alg-bv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 10px;
  border: 1.5px solid #1B2E6D; color: #1B2E6D;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.alg-bv-btn:hover { background: #1B2E6D; color: #ffffff; }
.alg-bv-btn-wa { border-color: #25D366; color: #128C4A; }
.alg-bv-btn-wa:hover { background: #25D366; color: #ffffff; }

@media (max-width: 900px) {
  #book-visit { padding: 56px 16px; }
  .alg-book-visit { padding: 28px 20px; border-radius: 16px; }
  .alg-book-visit-heading { font-size: 22px; }
  .alg-book-visit-form { grid-template-columns: 1fr; gap: 12px; }
  .alg-bv-submit { width: 100%; }
}

/* ── Transportation section ──────────────────────────────────────── */
#transportation {
  padding: 80px 24px;
  background: #ffffff;
}
.alg-transport-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.alg-transport-kicker {
  color: #0e1a40;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.alg-transport-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: center;
}
.alg-transport-art {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef1f8, #dfe3ee);
  box-shadow: 0 24px 48px -20px rgba(14,26,64,0.28);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.alg-transport-art svg { max-width: 100%; height: auto; }
.alg-transport-h3 {
  color: #0e1a40;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.25;
}
.alg-transport-p {
  color: rgba(27,46,109,0.78);
  font-size: 15px;
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
}
@media (max-width: 900px) {
  #transportation { padding: 60px 16px; }
  .alg-transport-grid { grid-template-columns: 1fr; gap: 28px; }
  .alg-transport-kicker { font-size: 12.5px; }
  .alg-transport-h3 { font-size: 20px; }
  .alg-transport-art { border-radius: 18px; padding: 24px; }
}

/* ── Facility placeholder (null img) ── */
.fac-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1B2E6D 0%, #162354 100%) !important;
  color: rgba(255, 255, 255, 0.45);
}
.fac-placeholder span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
}

/* ─────────────────────────────────────────────────────────────
   Overview (Pathways) — hide the variant toggle bar.
   Only the Glass Split variant (C) is shown; toggle serves no
   purpose with a single active variant.
   ───────────────────────────────────────────────────────────── */
#pathways > .alg-toggle-bar,
#pathways .alg-toggle-bar:first-of-type {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   Hide desktop hero Stacked/Split toggle — Split is fixed default.
   Overrides the rule at line ~2096.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .alg-hero-toggle { display: none !important; }
}