/* College (institute) page + campus pages — moved out of institute.php so campus.php can share it (and it caches). */
  html{scroll-behavior:smooth}
  /* breadcrumb */
  .inst-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.82rem;margin-bottom:14px;color:var(--ink-3,#7B8499)}
  .inst-crumb a{color:var(--ink-3,#7B8499);font-weight:600}
  .inst-crumb a:hover{color:var(--primary,#3563C9)}
  .inst-crumb span{color:var(--ink-4,#9AA7B8)}
  .inst-crumb__cur{color:var(--ink,#101935);font-weight:700;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* quick-facts: branded heading accent */
  .inst-facts__h{padding-bottom:9px;border-bottom:2px solid var(--primary,#3563C9);display:inline-block}
  /* mobile refinements */
  @media (max-width:600px){
    .inst-crumb__cur{max-width:58vw}
    .inst-nav__link{font-size:.9rem;margin-right:18px;padding:13px 2px}
    .inst-prog{padding:13px 14px}
    .inst-prog__fee b{font-size:.95rem}
  }
  /* sticky section nav */
  .inst-nav{position:sticky;top:var(--header-h,64px);z-index:25;background:rgba(255,255,255,.93);
      backdrop-filter:blur(10px);border-bottom:1px solid var(--line,#E7EBF3)}
  .inst-nav__in{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
  .inst-nav__in::-webkit-scrollbar{display:none}
  .inst-nav__link{flex:none;padding:15px 2px;margin-right:24px;font-family:var(--display,'Sora');font-weight:700;
      font-size:.95rem;color:var(--ink-3,#7B8499);border-bottom:3px solid transparent;white-space:nowrap;
      transition:color .15s,border-color .15s;cursor:pointer}
  .inst-nav__link:hover{color:var(--ink,#101935)}
  .inst-nav__link.is-on{color:var(--primary,#3563C9);border-bottom-color:var(--primary,#3563C9)}
  .inst-nav__cta{margin-left:auto;align-self:center;flex:none}
  @media (max-width:600px){.inst-nav__cta{display:none}}
  /* anchored sections clear the sticky header + nav */
  #i-about,#i-gallery,#i-programs,#i-costs,#i-requirements,#i-similar,#i-admissions,.inst-article :where(h2,h3)[id]{scroll-margin-top:calc(var(--header-h,64px) + 66px)}
  /* keep the sticky Quick-facts sidebar below the sticky section nav (was hidden under it) */
  .inst-aside{top:calc(var(--header-h,64px) + 66px)}

  /* programs & fees section */
  .inst-sec{padding-block:18px 10px} /* keep .wrap side padding; left-aligns with About */
  .inst-sec__head{margin-bottom:16px}
  .inst-sec__h{font-family:var(--display,'Sora');font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink,#101935);margin:0}
  .inst-sec__sub{margin:6px 0 0;color:var(--ink-2,#475069);font-size:.98rem}
  .inst-progs{display:flex;flex-direction:column;gap:10px}
  .inst-prog{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;
      background:#fff;border:1px solid var(--line,#E7EBF3);border-radius:14px;box-shadow:var(--sh-sm,0 2px 8px rgba(16,27,46,.05));
      transition:transform .15s,box-shadow .15s,border-color .15s}
  .inst-prog:hover{transform:translateY(-2px);border-color:var(--primary,#3563C9);box-shadow:0 12px 28px -16px rgba(53,99,201,.5)}
  .inst-prog__main{min-width:0}
  .inst-prog__name{display:block;font-family:var(--display,'Sora');font-weight:700;font-size:1.02rem;color:var(--ink,#101935);line-height:1.3}
  .inst-prog:hover .inst-prog__name{color:var(--primary,#3563C9)}
  .inst-prog__meta{display:block;margin-top:3px;font-size:.85rem;color:var(--ink-3,#7B8499)}
  .inst-prog__intake{color:var(--safe,#0FA06A);font-weight:600}
  .inst-prog__fee{flex:none;display:flex;align-items:center;gap:10px;text-align:right}
  .inst-prog__fee b{font-family:var(--display,'Sora');font-size:1.04rem;color:var(--ink,#101935);white-space:nowrap}
  .inst-prog__arrow{color:var(--primary,#3563C9);font-weight:700;transition:transform .15s}
  .inst-prog:hover .inst-prog__arrow{transform:translateX(3px)}
  .inst-sec__all{margin-top:18px;display:inline-flex}
  @media (max-width:560px){.inst-prog{padding:13px 14px}.inst-prog__fee b{font-size:.95rem}}

  .inst-faq{padding-block:18px 44px} /* keep .wrap side padding; left-aligns with About */
  /* On desktop, reserve the 320px Quick-facts aside column + gap on the right so the
     Programs & FAQ sections match the width of the About text column (not full-bleed). */
  @media (min-width:901px){
    .inst-sec, .inst-faq { padding-right: calc(var(--s-5, 20px) + 320px + var(--s-6, 24px)); }
  }
  .inst-faq__h{font-family:var(--display,'Sora');font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink,#101935);margin:0}
  .inst-faq__sub{margin:6px 0 20px;color:var(--ink-2,#475069);font-size:.98rem}
  .inst-faq__list{display:flex;flex-direction:column;gap:12px}
  .inst-faq__item{background:#fff;border:1px solid var(--line,#E7EBF3);border-radius:14px;overflow:hidden;
      box-shadow:var(--sh-sm,0 2px 8px rgba(16,27,46,.06));transition:border-color .15s,box-shadow .15s}
  .inst-faq__item[open]{border-color:var(--primary,#3563C9);box-shadow:0 10px 30px -16px rgba(53,99,201,.5)}
  .inst-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
      list-style:none;padding:17px 20px;font-family:var(--display,'Sora');font-weight:700;font-size:1.02rem;
      color:var(--ink,#101935);line-height:1.35}
  .inst-faq__item summary::-webkit-details-marker{display:none}
  .inst-faq__item summary svg{flex:none;width:20px;height:20px;color:var(--ink-3,#7B8499);transition:transform .2s}
  .inst-faq__item[open] summary svg{transform:rotate(180deg);color:var(--primary,#3563C9)}
  .inst-faq__a{padding:0 20px 18px;color:var(--ink-2,#475069);font-size:.97rem;line-height:1.6}
  .inst-faq__a a{color:var(--primary,#3563C9);font-weight:600}
  .inst-faq__a strong{color:var(--ink,#101935)}
  .inst-faq__cta{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
      background:linear-gradient(120deg,#EEF2FE,#E7FAF3);border:1px solid var(--line,#E7EBF3);border-radius:16px;padding:18px 22px}
  .inst-faq__cta span{font-family:var(--display,'Sora');font-weight:700;color:var(--ink,#101935)}
  @media (max-width:560px){.inst-faq__cta{flex-direction:column;align-items:stretch;text-align:center}}

  /* ===== enhanced institute page: stats, highlights, mix, costs, gallery, similar ===== */
  .inst-stats{border-bottom:1px solid var(--line,#E7EBF3);background:var(--surface,#fff)}
  .inst-stats__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0}
  .inst-stat{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:16px 10px;border-right:1px solid var(--line,#E7EBF3);min-width:0}
  .inst-stat:last-child{border-right:0}
  .inst-stat__ic{font-size:1.15rem;line-height:1}
  .inst-stat__v{font-family:var(--display,'Sora');font-weight:800;font-size:clamp(1rem,1.6vw,1.25rem);color:var(--ink,#101935);white-space:nowrap}
  .inst-stat__l{font-size:.74rem;color:var(--ink-3,#7B8499);font-weight:600;letter-spacing:.01em}
  @media (max-width:720px){.inst-stats__in{grid-template-columns:repeat(3,1fr)}.inst-stat:nth-child(3n){border-right:0}.inst-stat{border-bottom:1px solid var(--line,#E7EBF3)}}
  @media (max-width:420px){.inst-stats__in{grid-template-columns:repeat(2,1fr)}.inst-stat:nth-child(3n){border-right:1px solid var(--line,#E7EBF3)}.inst-stat:nth-child(2n){border-right:0}}

  .inst-hl{padding-block:22px 0}
  .inst-hl__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
  .inst-hl__card{display:flex;align-items:center;gap:11px;background:var(--surface,#fff);border:1px solid var(--line,#E7EBF3);border-radius:14px;padding:12px 14px;box-shadow:0 1px 2px rgba(16,27,46,.04)}
  .inst-hl__ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;background:linear-gradient(135deg,#EEF2FE,#E7FAF3)}
  .inst-hl__tx{display:flex;flex-direction:column;min-width:0}
  .inst-hl__tx strong{font-size:.92rem;color:var(--ink,#101935)}
  .inst-hl__tx small{font-size:.76rem;color:var(--ink-3,#7B8499)}

  .inst-mix{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:22px}
  @media (max-width:640px){.inst-mix{grid-template-columns:1fr;gap:18px}}
  .inst-mix__h{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3,#7B8499);margin:0 0 12px}
  .inst-bar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;gap:10px;margin-bottom:9px}
  .inst-bar__l{font-size:.86rem;color:var(--ink-2,#475069);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inst-bar__track{height:8px;border-radius:99px;background:var(--bg-2,#F1F4FA);overflow:hidden}
  .inst-bar__fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary,#3563C9),#4d78de)}
  .inst-bar__fill--alt{background:linear-gradient(90deg,#12b886,#38d9a9)}
  .inst-bar__n{font-size:.82rem;font-weight:700;color:var(--ink,#101935);min-width:1.6em;text-align:right}

  .inst-costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:14px}
  .inst-cost{background:linear-gradient(160deg,#F7F9FF,#fff);border:1px solid var(--line,#E7EBF3);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:4px}
  .inst-cost__l{font-size:.82rem;color:var(--ink-3,#7B8499);font-weight:600}
  .inst-cost__v{font-family:var(--display,'Sora');font-weight:800;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--ink,#101935)}
  .inst-cost__v small{font-weight:600;font-size:.7em;color:var(--ink-2,#475069)}
  .inst-cost__s{font-size:.78rem;color:var(--ink-3,#7B8499)}
  .inst-costs__note{margin:16px 0 0;font-size:.86rem;color:var(--ink-2,#475069);background:var(--bg-2,#F1F4FA);border-radius:12px;padding:12px 15px}
  .inst-costs__note a{color:var(--primary,#3563C9);font-weight:600}
  .inst-article__shared{font-size:.9rem;color:var(--ink-2,#475069);background:linear-gradient(120deg,#EEF2FE,#E7FAF3);border:1px solid var(--line,#E7EBF3);border-radius:12px;padding:12px 15px;margin:0 0 18px}
  .inst-article__shared strong{color:var(--ink,#101935)}

  .inst-video{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;background:#0b1220;margin-bottom:16px;box-shadow:0 18px 44px -22px rgba(16,27,46,.5)}
  .inst-video__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,opacity .3s}
  .inst-video:hover .inst-video__thumb{transform:scale(1.03);opacity:.9}
  .inst-video__play{position:absolute;inset:0;margin:auto;width:74px;height:52px}
  .inst-video__play svg{width:100%;height:100%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));transition:transform .2s}
  .inst-video:hover .inst-video__play svg{transform:scale(1.08)}
  .inst-video.is-playing{cursor:default;aspect-ratio:16/9}
  .inst-video iframe{width:100%;height:100%;border:0;display:block}
  .inst-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .inst-gallery__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;scroll-snap-align:start;background:var(--bg-2,#F1F4FA)}
  @media (min-width:721px){.inst-gallery{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible}}

  .inst-reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
  .inst-req{display:flex;align-items:center;gap:11px;background:var(--surface,#fff);border:1px solid var(--line,#E7EBF3);border-radius:14px;padding:14px}
  .inst-req__ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;background:linear-gradient(135deg,#EEF2FE,#E7FAF3)}
  .inst-req__tx{display:flex;flex-direction:column;min-width:0}
  .inst-req__tx strong{font-family:var(--display,'Sora');font-size:1rem;color:var(--ink,#101935)}
  .inst-req__tx small{font-size:.78rem;color:var(--ink-3,#7B8499)}
  .inst-reqs__cta{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(120deg,#EEF2FE,#E7FAF3);border:1px solid var(--line,#E7EBF3);border-radius:16px;padding:16px 20px}
  .inst-reqs__cta span{font-family:var(--display,'Sora');font-weight:700;color:var(--ink,#101935)}
  @media (max-width:560px){.inst-reqs__cta{flex-direction:column;align-items:stretch;text-align:center}}

  .inst-similar{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
  .inst-sim{display:flex;align-items:center;gap:12px;background:var(--surface,#fff);border:1px solid var(--line,#E7EBF3);border-radius:14px;padding:13px 15px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
  .inst-sim:hover{border-color:var(--primary,#3563C9);box-shadow:0 12px 26px -16px rgba(53,99,201,.5);transform:translateY(-2px)}
  .inst-sim__logo{flex:none;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;overflow:hidden;background:var(--bg-2,#F1F4FA);font-family:var(--display,'Sora');font-weight:800;color:var(--primary,#3563C9)}
  .inst-sim__logo img{width:100%;height:100%;object-fit:contain}
  .inst-sim__id{display:flex;flex-direction:column;min-width:0;flex:1}
  .inst-sim__id strong{font-size:.92rem;color:var(--ink,#101935);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inst-sim__id small{font-size:.78rem;color:var(--ink-3,#7B8499)}
  .inst-sim__meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
  .inst-sim__rt{font-size:.82rem;font-weight:700;color:#f59f00}
  .inst-sim__n{font-size:.72rem;color:var(--ink-3,#7B8499)}

  .inst-sticky{display:none}
  @media (max-width:820px){
    .inst-sticky{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:70;
      background:var(--surface,#fff);border-top:1px solid var(--line,#E7EBF3);padding:10px 82px 10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
      box-shadow:0 -8px 24px -14px rgba(16,27,46,.35)}
    .inst-sticky__t{flex:1;min-width:0;font-family:var(--display,'Sora');font-weight:700;font-size:.9rem;color:var(--ink,#101935);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .inst-sticky .btn{flex:none}
    .inst-page{padding-bottom:68px}
    /* lift the floating WhatsApp bubble clear of the sticky apply bar (they overlapped
       in the thumb zone — the bubble sat on top of the "Apply / View programs" button) */
    .inst-page .waw{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  }

  /* ===== lightbox (gallery photos + video) ===== */
  .inst-gallery__img{cursor:zoom-in;transition:transform .2s,box-shadow .2s}
  .inst-gallery__img:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(16,27,46,.45)}
  .inst-lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
      background:rgba(9,13,22,.95);padding:clamp(10px,2vw,24px);animation:instLbIn .18s ease}
  .inst-lb[hidden]{display:none}
  @keyframes instLbIn{from{opacity:0}to{opacity:1}}
  .inst-lb__frame{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.2vw,26px);width:100%;min-height:0}
  .inst-lb__stage{flex:0 1 auto;min-width:0;max-height:84vh;display:flex;align-items:center;justify-content:center}
  .inst-lb__img{max-width:min(1160px,calc(96vw - 150px));max-height:84vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain}
  .inst-lb__video{position:relative;width:min(1160px,calc(96vw - 60px));aspect-ratio:16/9;max-height:84vh}
  .inst-lb__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
  .inst-lb__close{position:absolute;top:clamp(12px,2vw,20px);right:clamp(12px,2vw,20px);width:46px;height:46px;border-radius:50%;
      background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);font-size:20px;line-height:1;cursor:pointer;
      display:grid;place-items:center;transition:background .15s,transform .15s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2}
  .inst-lb__close:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
  .inst-lb__nav{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
      border:1px solid rgba(255,255,255,.22);cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .15s;
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .inst-lb__nav svg{width:26px;height:26px}
  .inst-lb__nav:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
  .inst-lb__nav[hidden],.inst-lb__count[hidden]{display:none}
  .inst-lb__count{color:#fff;font-size:.85rem;font-weight:600;background:rgba(255,255,255,.12);padding:5px 14px;border-radius:99px;letter-spacing:.03em}
  @media (max-width:600px){
    .inst-lb__nav{width:42px;height:42px}.inst-lb__nav svg{width:22px;height:22px}
    .inst-lb__img{max-width:calc(98vw - 96px)}.inst-lb__video{width:calc(98vw - 20px)}
  }

/* ===== campus pages (campus.php) + campus cards on the college page ===== */
.campus-switch { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px 0 4px; }
.campus-switch::-webkit-scrollbar { display: none; }
.campus-switch__pill { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line, #E7EBF3); background: #fff;
  font-weight: 700; font-size: .85rem; color: var(--ink-2, #475069); text-decoration: none; white-space: nowrap; }
.campus-switch__pill:hover { border-color: var(--primary, #3563C9); color: var(--primary, #3563C9); }
.campus-switch__pill.is-on { background: var(--primary, #3563C9); border-color: var(--primary, #3563C9); color: #fff; }
.inst-campuses--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.inst-campus--card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.inst-campus--card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(16,27,46,.35); }
.inst-campus__cover { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #E8EDF8, #F3F7FB); overflow: hidden; }
.inst-campus__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inst-campus__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.inst-campus__facts { font-size: .8rem; color: var(--ink-3, #7B8499); }
.campus-map { border-radius: 14px; overflow: hidden; border: 1px solid var(--line, #E7EBF3); aspect-ratio: 16 / 7; background: #eef2f8; }
.campus-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 600px) { .campus-map { aspect-ratio: 4 / 3; } }
.campus-tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.campus-tools .fselect { flex: 1 1 220px; max-width: 420px; }
.campus-cta { text-align: center; padding: 28px 20px; border-radius: 18px; background: linear-gradient(135deg, #EEF3FF, #F3FBF8); border: 1px solid var(--line, #E7EBF3); }
.campus-cta h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.3rem; }
.campus-cta p { margin: 0 0 14px; color: var(--ink-2, #475069); }

/* =====================================================================
   Campus pages v2 (campus.php): photo hero → sticky campus tabs → fact cards →
   two columns (programs · photos · about · FAQ | location · other campuses · help)
   ===================================================================== */
.cp-page main { background: var(--bg, #F3F7FB); }

/* ---- hero: the campus photo, darkened so text reads on any image ---- */
.cp-hero { position: relative; overflow: hidden; color: #fff; background: #1b2c63; isolation: isolate; }
.cp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cp-hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,18,44,.35) 0%, rgba(10,18,44,.55) 45%, rgba(10,18,44,.88) 100%); }
.cp-hero--plain { background: radial-gradient(1200px 500px at 85% -10%, #5E86E0 0%, transparent 60%), linear-gradient(135deg, #1b2c63 0%, #2A4FA3 60%, #3563C9 100%); }
.cp-hero--plain::after { background: none; }
.cp-hero__in { position: relative; padding-top: 22px; padding-bottom: 36px; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.cp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: rgba(255,255,255,.72); margin-bottom: auto; }
.cp-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.cp-crumb a:hover { color: #fff; text-decoration: underline; }
.cp-crumb [aria-current] { color: #fff; font-weight: 600; }
.cp-college { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding: 5px 14px 5px 5px;
  border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px);
  color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; }
.cp-college:hover { background: rgba(255,255,255,.22); }
.cp-college__logo { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #fff; overflow: hidden; display: grid; place-items: center; }
.cp-college__logo span { font-size: .62rem; font-weight: 800; color: var(--primary, #3563C9); }
.cp-college__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; }
.cp-hero__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); line-height: 1.08; letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.cp-hero__loc { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 1rem; color: rgba(255,255,255,.9); }
.cp-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cp-chip { padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #fff; backdrop-filter: blur(6px); }
.cp-chip--ok { background: rgba(16,201,142,.22); border-color: rgba(16,201,142,.5); }
.cp-chip--warn { background: rgba(230,138,23,.25); border-color: rgba(230,138,23,.55); }
.cp-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cp-btn-light { background: #fff; color: var(--ink, #101935); border: 0; }
.cp-btn-light:hover { background: #F3F6FC; }

/* ---- sticky campus tabs ---- */
.cp-switch { position: sticky; top: var(--header-h, 64px); z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line, #E7EBF3); }
.cp-switch__in { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.cp-switch__in::-webkit-scrollbar { display: none; }
.cp-switch__label { flex: none; margin-right: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #7B8499); }
.cp-switch__tab { flex: none; padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--ink-2, #475069); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.cp-switch__tab:hover { background: var(--primary-tint, #E8EDF8); color: var(--primary, #3563C9); }
.cp-switch__tab.is-on { background: var(--primary, #3563C9); color: #fff; }

/* ---- fact cards ---- */
.cp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 22px; margin-bottom: 22px; }
.cp-fact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line, #E7EBF3); border-radius: 16px; box-shadow: 0 1px 2px rgba(16,27,46,.04); }
.cp-fact__ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--primary-tint, #E8EDF8); }
.cp-fact b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--ink, #101935); line-height: 1.2; }
.cp-fact small { display: block; font-size: .78rem; color: var(--ink-3, #7B8499); margin-top: 2px; }

/* ---- two-column layout; on phones the sidebar lands right after the programs ---- */
.cp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; padding-bottom: 56px; }
.cp-layout > .cp-block { grid-column: 1; }
.cp-aside { grid-column: 2; grid-row: 1 / span 6; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) {
  .cp-layout { grid-template-columns: minmax(0, 1fr); }
  .cp-aside { grid-column: 1; grid-row: auto; }
}

.cp-block { background: #fff; border: 1px solid var(--line, #E7EBF3); border-radius: 20px; padding: 22px 24px; }
.cp-block + .cp-block { margin-top: 0; }
.cp-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cp-block__head h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--ink, #101935); letter-spacing: -.01em; }
.cp-block__head p { margin: 4px 0 0; font-size: .88rem; color: var(--ink-3, #7B8499); }
.cp-link { font-weight: 700; font-size: .88rem; color: var(--primary, #3563C9); text-decoration: none; white-space: nowrap; }
.cp-link:hover { text-decoration: underline; }
@media (max-width: 600px) { .cp-block { padding: 18px 16px; border-radius: 16px; } }

/* ---- programs list ---- */
.cp-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-2, #DBE1EC); border-radius: 12px; background: #fff; color: var(--ink-3, #7B8499); }
.cp-search:focus-within { border-color: var(--primary, #3563C9); box-shadow: 0 0 0 3px rgba(53,99,201,.14); }
.cp-search input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink, #101935); }
.cp-level { flex: 0 1 230px; height: 46px; }
.cp-list { border: 1px solid var(--line, #E7EBF3); border-radius: 14px; overflow: hidden; }
.cp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--line, #E7EBF3); color: inherit; text-decoration: none; transition: background .12s; }
.cp-row:first-child { border-top: 0; }
.cp-row[hidden] { display: none; }
.cp-row:hover { background: #F7F9FD; }
.cp-row__name { display: block; font-weight: 700; font-size: .95rem; color: var(--ink, #101935); line-height: 1.35; }
.cp-row:hover .cp-row__name { color: var(--primary, #3563C9); }
.cp-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cp-tag { padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #F1F4FA; color: var(--ink-2, #475069); }
.cp-tag--open { background: var(--safe-tint, #E7FAF3); color: var(--safe-700, #0BB37E); }
.cp-row__fee { text-align: right; white-space: nowrap; }
.cp-row__fee b { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink, #101935); }
.cp-row__fee small { font-size: .72rem; color: var(--ink-3, #7B8499); }
.cp-row__go { font-size: 1.4rem; line-height: 1; color: var(--ink-4, #9AA4BA); }
@media (max-width: 600px) {
  .cp-row { grid-template-columns: minmax(0, 1fr) 14px; gap: 6px 10px; padding: 13px 14px; }
  .cp-row__fee { grid-column: 1; grid-row: 2; text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .cp-row__fee b { display: inline; }
  .cp-row__go { grid-column: 2; grid-row: 1 / span 2; }
}
.cp-more { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 12px; background: var(--primary-tint, #E8EDF8); color: var(--primary, #3563C9); font: inherit; font-weight: 700; cursor: pointer; }
.cp-more:hover { background: #DCE4F6; }
.cp-more[hidden] { display: none; }
.cp-empty { margin: 10px 0 0; color: var(--ink-3, #7B8499); }

/* ---- sidebar boxes ---- */
.cp-box { background: #fff; border: 1px solid var(--line, #E7EBF3); border-radius: 20px; padding: 18px; }
.cp-box__h { margin: 0 0 12px; font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink, #101935); }
.cp-map { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #EEF2F8; border: 1px solid var(--line, #E7EBF3); }
.cp-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cp-addr { margin: 12px 0 10px; font-size: .88rem; line-height: 1.5; color: var(--ink-2, #475069); }
.cp-box__btns { display: flex; gap: 8px; }
.cp-box__btns .btn { flex: 1; justify-content: center; }
.cp-kv { margin: 14px 0 0; }
.cp-kv div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line, #E7EBF3); }
.cp-kv dt { font-size: .8rem; color: var(--ink-3, #7B8499); }
.cp-kv dd { margin: 0; font-size: .84rem; font-weight: 700; color: var(--ink, #101935); text-align: right; }
.cp-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-others a { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 12px; color: inherit; text-decoration: none; }
.cp-others a:hover { background: #F5F7FC; }
.cp-others a > span:last-child { color: var(--ink-4, #9AA4BA); font-size: 1.3rem; }
.cp-others__img { flex: none; width: 56px; height: 42px; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, #DCE5F7, #EEF3FB); }
.cp-others__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-others__txt { flex: 1; min-width: 0; }
.cp-others__txt b { display: block; font-size: .9rem; color: var(--ink, #101935); }
.cp-others__txt small { display: block; font-size: .76rem; color: var(--ink-3, #7B8499); }
.cp-help { background: linear-gradient(145deg, #EEF3FF 0%, #F2FBF7 100%); }
.cp-help p { margin: 0 0 14px; font-size: .88rem; line-height: 1.55; color: var(--ink-2, #475069); }
.cp-help .btn { display: flex; justify-content: center; width: 100%; }
.cp-help .btn + .btn { margin-top: 8px; }

/* ---- photos & video: a mosaic, first tile large ---- */
.cp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; gap: 8px; }
.cp-gallery > :first-child { grid-column: span 2; grid-row: span 2; }
.cp-gallery__img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; cursor: zoom-in; display: block; background: #EEF2F8; }
.cp-gallery__video { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; margin: 0; aspect-ratio: auto; cursor: pointer; }
.cp-gallery__video .inst-video__thumb { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .cp-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; } }

/* ---- about (long guides open folded) ---- */
.cp-about.is-folded { max-height: 640px; overflow: hidden; position: relative; }
.cp-about.is-folded::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%); }

/* ---- all-campuses cards ---- */
.cp-section { padding-top: 26px; padding-bottom: 56px; }
.cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.cp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, #E7EBF3); border-radius: 20px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.cp-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -22px rgba(16,27,46,.4); }
.cp-card__img { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #DCE5F7, #EEF3FB); }
.cp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-card__badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--safe-700, #0BB37E); font-size: .72rem; font-weight: 800; box-shadow: 0 4px 12px rgba(16,27,46,.15); }
.cp-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.cp-card__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--ink, #101935); }
.cp-card__where { font-size: .86rem; color: var(--ink-3, #7B8499); }
.cp-card__stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; color: var(--ink-2, #475069); }
.cp-card__stats b { color: var(--ink, #101935); }
.cp-card__go { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: .88rem; color: var(--primary, #3563C9); }
/* campus page — phones */
@media (max-width: 600px) {
  .cp-hero__in { min-height: 0; padding-top: 16px; padding-bottom: 26px; }
  .cp-crumb > :nth-child(-n+6) { display: none; }   /* keep "College › Campuses › Campus" on one line */
  .cp-college { margin-top: 18px; font-size: .84rem; }
  .cp-hero__loc { font-size: .92rem; }
  .cp-hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .cp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; margin-bottom: 16px; }
  .cp-fact { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .cp-fact__ic { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .cp-fact b { font-size: 1.02rem; }
  .cp-switch__label { display: none; }
  .cp-level { flex: 1 1 100%; }
}
/* wide tables inside a campus article scroll sideways instead of spilling off a phone screen */
.cp-about .inst-article table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* campus card / thumbnail with no photo yet: a soft building icon instead of a blank box */
.cp-card__img, .cp-others__img {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA9CC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-4 7 4v13M9 21v-5h6v5M9 11h.01M15 11h.01'/%3E%3C/svg%3E") center / 44px no-repeat,
              linear-gradient(135deg, #DCE5F7, #EEF3FB);
}
.cp-others__img { background-size: 22px, auto; }