/* =====================================================================
   Public pages (templates/pages/index.html, templates/pages/faq.html) —
   builds on the shared design system in static/css/style.css.
   Some classes below (.hero-v2/.hero-v2-sm, .faq-search, .faq-tabs/
   .faq-tab, .campus-faq-*, .faq-cta) are shared between BOTH pages —
   keep their base rules page-agnostic. Anything prefixed `.hero-ed-` or
   `.ed-` is homepage-only (templates/pages/index.html) and safe to
   restyle freely without touching the FAQ page's look.
   The site header/nav itself (.public-header etc.) lives in the shared
   stylesheet since main/base.html renders it on every public page now.
   ===================================================================== */

/* ------------------------------------------------------- shared hero -- */
.hero-v2{
  position:relative; overflow:hidden; isolation:isolate;
  color:#fff; padding:96px 24px 120px; text-align:center;
}
.hero-v2-bg{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  background-image:
    linear-gradient(135deg, rgba(0,31,74,.88) 0%, rgba(0,55,123,.78) 55%, rgba(11,79,163,.7) 100%),
    var(--hero-photo);
}
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; z-index:0;
  animation:heroBlobFloat 16s ease-in-out infinite alternate;
}
.hero-v2-sm{
  padding:64px 24px 74px;
  background:linear-gradient(135deg, var(--primary-600) 0%, var(--primary) 60%, #0b4fa3 100%);
}
.hero-v2-sm .hero-inner{ max-width:640px; }
.hero-v2-sm .hero-inner h1{ font-size:clamp(26px,4vw,36px); }
.hero-blob.b1{ width:420px; height:420px; background:#5ea3ff; top:-160px; left:-120px; }
.hero-blob.b2{ width:380px; height:380px; background:#ffb648; top:60px; right:-140px; animation-duration:20s; animation-delay:-4s; }
.hero-blob.b3{ width:300px; height:300px; background:#7fe8c0; bottom:-160px; left:38%; animation-duration:14s; animation-delay:-8s; }
@keyframes heroBlobFloat{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(30px,-24px) scale(1.12); }
}
@media (prefers-reduced-motion:reduce){ .hero-blob{ animation:none; } }

.hero-inner{ position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  font-size:12.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-bottom:22px;
  backdrop-filter:blur(6px);
}
.hero-inner h1{
  font-family:'Merriweather',serif; font-weight:800; font-size:clamp(32px,5.2vw,52px); line-height:1.12; margin:0 0 18px;
  text-wrap:balance; color:#fff;
}
.hero-inner h1 .accent{
  background:linear-gradient(90deg,#ffd166,#ff9a76); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-inner p{ max-width:640px; margin:0 auto 32px; font-size:15.5px; line-height:1.75; color:rgba(255,255,255,.86); }
.hero-actions{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:48px; }
.btn-light{ background:#fff; color:var(--primary); border:none; }
.btn-light:hover{ background:rgba(255,255,255,.9); transform:translateY(-1px); }
.btn-ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* -------------------------------------------------------- shell/sections */
.public-shell{ max-width:1180px; margin:0 auto; padding:64px 24px; }
.public-section{ margin-bottom:72px; }

/* Full-bleed tinted "band" a section can sit inside, so consecutive
   sections visually blend into different backgrounds instead of one flat
   page. Breaks out of any max-width parent via the negative-margin trick. */
.section-band{
  position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:70px 0; overflow:hidden;
}
.section-band.tint-neutral{ background:linear-gradient(180deg, transparent 0%, var(--surface-2) 14%, var(--surface-2) 86%, transparent 100%); }
.section-band.tint-primary{ background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary) 7%, transparent) 14%, color-mix(in srgb, var(--primary) 7%, transparent) 86%, transparent 100%); }
.section-band.tint-warm{ background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--warning) 11%, transparent) 14%, color-mix(in srgb, var(--warning) 11%, transparent) 86%, transparent 100%); }
.section-band.tint-cool{ background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--success) 9%, transparent) 14%, color-mix(in srgb, var(--success) 9%, transparent) 86%, transparent 100%); }
.section-band.tint-dark{
  background:linear-gradient(135deg, #061428 0%, var(--primary-600) 55%, var(--primary) 100%);
  color:#fff; padding:80px 0;
}
.section-band.tint-dark .eyebrow{ color:#7fe8c0; }
.section-band.tint-dark .section-head-row h2,
.section-band.tint-dark .public-section-head h2{ color:#fff; }
.section-band.tint-dark .public-section-head p{ color:rgba(255,255,255,.72); }
.section-band.tint-dark .view-more-link{ color:#fff; }
.section-band.tint-dark .view-more-link:hover{ color:#7fe8c0; }
.public-section-head{ text-align:center; max-width:640px; margin:0 auto 32px; }
.public-section-head.left{ text-align:left; margin:0 0 40px; max-width:640px; }
.public-section-head .eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--primary); margin-bottom:8px; }
.public-section-head h2{ font-family:'Merriweather',serif; font-size:clamp(22px,3vw,28px); margin:0 0 8px; }
.public-section-head p{ font-size:13.5px; color:var(--muted); line-height:1.6; }

.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.section-head-row .eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--primary); margin-bottom:8px; display:block; }
.section-head-row h2{ font-family:'Merriweather',serif; font-size:clamp(22px,3vw,28px); margin:0; }
.view-more-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--primary); white-space:nowrap; }
.view-more-link svg{ width:14px; height:14px; transition:transform .2s ease; }
.view-more-link:hover svg{ transform:translate(3px,-3px); }

/* scroll-reveal (progressive enhancement — content is visible without JS) */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger .in-view{ transition-delay:calc(var(--stagger-i, 0) * 70ms); }

/* ================================================================ */
/*  Homepage-only "bold editorial" components (templates/pages/index) */
/* ================================================================ */

/* ------------------------------------------------------ ed. hero ---- */
.hero-ed{ position:relative; background:#04122b; color:#fff; overflow:hidden; }
.hero-ed::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px circle at 12% 15%, rgba(11,79,163,.55), transparent 60%),
    radial-gradient(520px circle at 92% 85%, rgba(255,149,51,.14), transparent 60%);
}
.hero-ed-shell{
  position:relative; z-index:1; max-width:1260px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:56px;
  padding:100px 24px 96px;
}
.hero-ed-eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase; color:#ffb648; margin-bottom:26px;
}
.hero-ed-eyebrow::before{ content:""; width:26px; height:2px; background:#ffb648; flex-shrink:0; }
.hero-ed-copy h1{
  font-family:'Merriweather',serif; font-weight:800; font-size:clamp(38px,4.8vw,64px); line-height:1.06;
  letter-spacing:-.5px; margin:0 0 24px; text-wrap:balance; color:#fff;
}
.hero-ed-copy h1 .accent{ color:#ffb648; }
.hero-ed-copy p{ font-size:16px; line-height:1.8; color:rgba(255,255,255,.72); max-width:480px; margin:0 0 38px; }
.hero-ed-actions{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-bottom:56px; }
.btn-ed-primary{
  display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px;
  background:#fff; color:var(--primary-600); font-weight:800; font-size:14px;
  transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.btn-ed-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.34); }
.btn-ed-primary svg{ width:16px; height:16px; transition:transform .2s ease; }
.btn-ed-primary:hover svg{ transform:translate(3px,-2px); }
.btn-ed-text{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#fff;
  border-bottom:1.5px dashed rgba(255,255,255,.4); padding-bottom:3px; transition:border-color .2s ease;
}
.btn-ed-text:hover{ border-color:#fff; }
.btn-ed-text svg{ width:14px; height:14px; transition:transform .2s ease; }
.btn-ed-text:hover svg{ transform:translate(3px,-3px); }
.hero-ed-stats{ display:flex; border-top:1px solid rgba(255,255,255,.16); padding-top:26px; max-width:480px; }
.hero-ed-stat{ flex:1; padding-right:22px; }
.hero-ed-stat + .hero-ed-stat{ border-left:1px solid rgba(255,255,255,.16); padding-left:22px; }
.hero-ed-stat .n{ display:block; font-family:'Merriweather',serif; font-weight:800; font-size:28px; }
.hero-ed-stat .l{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.55); margin-top:4px; }

/* Real photo "card deck" — every slide is its own rounded card; instead of
   a plain crossfade, each tick reshuffles which card sits in which depth
   role (front/mid/back/hidden), so the ones behind actually show the next
   photos queued up rather than a flat decorative color (see initHeroSlider
   in pages/scripts.js, which just swaps each card's role class). */
.hero-ed-media{ position:relative; aspect-ratio:0.893; }
.hero-ed-media-frame{
  position:absolute; inset:0; border-radius:22px; overflow:hidden; background-size:cover; background-position:center;
  background-image:linear-gradient(200deg, rgba(4,18,43,0) 42%, rgba(4,18,43,.88) 100%), var(--hero-photo);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  transition:transform .7s cubic-bezier(.22,.85,.32,1), opacity .7s ease, z-index 0s;
}
.hero-card-role-0{ transform:translate(0,0) rotate(0deg) scale(1); opacity:1; z-index:3; }
.hero-card-role-1{ transform:translate(16px,-16px) rotate(5deg) scale(.94); opacity:.85; z-index:2; }
.hero-card-role-2{ transform:translate(30px,-30px) rotate(9deg) scale(.88); opacity:.55; z-index:1; }
.hero-card-role-hidden{ transform:translate(30px,-30px) rotate(9deg) scale(.82); opacity:0; z-index:0; pointer-events:none; }
.hero-ed-media-tag{
  position:absolute; left:24px; bottom:24px; z-index:10; display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--primary-600);
  font-size:12.5px; font-weight:800;
}
/* Overlaid on the photo itself (bottom-center) rather than below it. Active
   dot stretches into a pill (instead of just changing color) so it visually
   reads as two dots joined together. */
.hero-ed-media-dots{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(4,18,43,.35); backdrop-filter:blur(6px);
}
.hero-ed-media-dot{
  width:8px; height:8px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.4); transition:width .3s ease, background .3s ease;
}
.hero-ed-media-dot:hover{ background:rgba(255,255,255,.65); }
.hero-ed-media-dot.active{ width:22px; background:#ffb648; }
@media (prefers-reduced-motion:reduce){ .hero-ed-media-frame{ transition:opacity .4s ease; } }

.hero-ed-scroll{
  position:relative; z-index:1; display:flex; justify-content:center; padding-bottom:40px;
  color:rgba(255,255,255,.55); animation:heroBounce 2.2s ease-in-out infinite;
}
@keyframes heroBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce){ .hero-ed-scroll{ animation:none; } }
@media(max-width:900px){
  .hero-ed-shell{ grid-template-columns:1fr; padding:64px 20px 70px; gap:36px; }
  .hero-ed-media{ order:-1; aspect-ratio:1.724; }
}

/* ------------------------------------------------- ed. feature list -- */
.ed-feature-list{ display:flex; flex-direction:column; }
.ed-feature-row{
  display:grid; grid-template-columns:60px 200px 1fr; gap:32px; align-items:center;
  padding:34px 0; border-top:1px solid var(--border);
}
.ed-feature-list .ed-feature-row:last-child{ border-bottom:1px solid var(--border); }
.ed-feature-index{ font-family:'Merriweather',serif; font-weight:800; font-size:34px; color:var(--border); line-height:1; }
.ed-feature-media{ width:100%; height:120px; border-radius:14px; overflow:hidden; }
.ed-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ed-feature-row:hover .ed-feature-media img{ transform:scale(1.06); }
.ed-feature-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; background:var(--accent-100, var(--primary-100)); color:var(--accent, var(--primary));
}
.ed-feature-body h3{ font-size:19px; margin:0 0 8px; }
.ed-feature-body p{ font-size:14px; color:var(--muted); line-height:1.7; margin:0 0 14px; max-width:520px; }
.ed-feature-link{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--text);
  border-bottom:1.5px dashed var(--accent, var(--primary)); padding-bottom:2px;
}
.ed-feature-link svg{ width:13px; height:13px; transition:transform .2s ease; }
.ed-feature-row:hover .ed-feature-link svg{ transform:translate(3px,-3px); }
@media(max-width:760px){
  .ed-feature-row{ grid-template-columns:1fr; gap:16px; padding:26px 0; }
  .ed-feature-media{ height:160px; order:-1; }
  .ed-feature-index{ font-size:26px; }
}

/* ----------------------------------------------------- ed. FAQ split - */
.ed-faq-layout{ display:grid; grid-template-columns:250px 1fr; gap:32px; align-items:start; }
.ed-faq-tablist{
  display:flex; flex-direction:column; gap:2px; position:sticky; top:24px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:8px; box-shadow:var(--shadow);
}
.ed-faq-tablist .faq-tab{
  justify-content:flex-start; width:100%; border-radius:10px; border:none; border-left:3px solid transparent;
  background:transparent; padding:13px 14px; color:var(--muted); font-size:14px;
}
.ed-faq-tablist .faq-tab:hover{ color:var(--text); background:var(--surface-2); transform:none; }
.ed-faq-tablist .faq-tab.active{
  background:color-mix(in srgb, var(--primary) 8%, var(--surface)); border-left-color:var(--primary);
  color:var(--text); box-shadow:none; font-weight:800;
}
.ed-faq-tablist .faq-tab.active .dotc{ background:currentColor !important; }
.ed-faq-panels .campus-faq-block{ padding:0; }
.ed-faq-panels .campus-faq-head{ padding-top:0; }
.ed-faq-panels .campus-faq-list{ max-width:none; margin:0; }
@media(max-width:820px){
  .ed-faq-layout{ grid-template-columns:1fr; gap:16px; }
  .ed-faq-tablist{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .ed-faq-tablist .faq-tab{ width:auto; border-left:none; border-radius:10px; padding:10px 16px; }
  .ed-faq-tablist .faq-tab.active{ border-left:none; }
}

/* -------------------------------------------------------- ed. events - */
.ed-events-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; }
.ed-event-feature{ position:relative; display:block; border-radius:18px; overflow:hidden; min-height:420px; color:#fff; }
.ed-event-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ed-event-feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,12,28,.92) 0%, rgba(4,12,28,.15) 55%, transparent 100%);
}
.ed-event-feature:hover img{ transform:scale(1.06); }
.ed-event-feature-body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:32px; }
.ed-event-feature-tag{ display:inline-flex; font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#ffb648; margin-bottom:10px; }
.ed-event-feature-body h3{ font-family:'Merriweather',serif; font-size:24px; margin:0 0 8px; color:#fff; line-height:1.3; }
.ed-event-feature-body p{ font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.6; max-width:440px; margin:0; }

.ed-event-list{ display:flex; flex-direction:column; }
.ed-event-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); color:#fff; }
.ed-event-list .ed-event-row:first-child{ padding-top:0; }
.ed-event-row-media{ width:76px; height:76px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.ed-event-row-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ed-event-row:hover .ed-event-row-media img{ transform:scale(1.08); }
.ed-event-row-body{ flex:1; min-width:0; }
.ed-event-row-body h4{ font-size:14.5px; margin:0 0 5px; color:#fff; line-height:1.4; }
.ed-event-row-body p{
  font-size:12.5px; color:rgba(255,255,255,.62); margin:0; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ed-event-row-arrow{ flex-shrink:0; color:rgba(255,255,255,.5); transition:transform .2s ease, color .2s ease; }
.ed-event-row-arrow svg{ width:16px; height:16px; }
.ed-event-row:hover .ed-event-row-arrow{ color:#fff; transform:translate(3px,-3px); }
@media(max-width:860px){
  .ed-events-layout{ grid-template-columns:1fr; }
  .ed-event-feature{ min-height:280px; }
}

/* ---------------------------------------------------------- ed. news - */
.ed-news-list{ display:flex; flex-direction:column; }
.ed-news-row{ display:flex; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid var(--border); }
.ed-news-list .ed-news-row:first-child{ padding-top:0; }
.ed-news-date{
  flex-shrink:0; width:108px; font-family:'Merriweather',serif; font-weight:800; font-size:13px;
  color:var(--warning); text-transform:uppercase; letter-spacing:.3px; line-height:1.4;
}
.ed-news-body{ flex:1; min-width:0; }
.ed-news-body h4{ font-size:16px; margin:0 0 6px; }
.ed-news-body p{
  font-size:13px; color:var(--muted); line-height:1.6; margin:0;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ed-news-thumb{ width:88px; height:64px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.ed-news-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ed-news-row:hover .ed-news-thumb img{ transform:scale(1.08); }
.ed-news-arrow{ flex-shrink:0; color:var(--muted); transition:transform .2s ease, color .2s ease; }
.ed-news-arrow svg{ width:16px; height:16px; }
.ed-news-row:hover .ed-news-arrow{ color:var(--primary); transform:translate(3px,-3px); }
@media(max-width:640px){
  .ed-news-arrow{ display:none; }
  .ed-news-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .ed-news-date{ width:auto; }
  .ed-news-thumb{ width:100%; height:160px; order:3; margin-top:4px; }
}

/* --------------------------------------------------------- ed. clubs - */
.ed-club-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px; }
.ed-club-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 16px;
  border-radius:16px; border:1px solid var(--border); background:var(--surface);
  transition:transform .12s ease, box-shadow .25s ease, border-color .2s ease; will-change:transform;
}
.ed-club-card:hover{ box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--primary) 30%, var(--border)); }
.ed-club-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; margin-bottom:14px; border:1px solid var(--border); flex-shrink:0; }
.ed-club-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-club-card h4{ font-size:13.5px; margin:0 0 4px; }
.ed-club-card p{ font-size:11.5px; color:var(--muted); margin:0 0 8px; line-height:1.4; }
.ed-club-tag{ font-size:10.5px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:.3px; padding:3px 10px; border-radius:999px; background:var(--primary-100); }

/* ------------------------------------------------------- ed. FAQ CTA -- */
.faq-search{ max-width:520px; margin:28px auto 0; position:relative; }
.faq-search input{
  width:100%; padding:15px 20px 15px 48px; border-radius:14px; border:1px solid rgba(255,255,255,.18); outline:none;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); color:#fff; font-size:14px; font-family:inherit;
  transition:background .2s ease, box-shadow .2s ease;
}
.faq-search input::placeholder{ color:rgba(255,255,255,.6); }
.faq-search input:focus{ background:rgba(255,255,255,.2); box-shadow:0 0 0 3px rgba(255,255,255,.16); }
.faq-search svg{ position:absolute; left:17px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:rgba(255,255,255,.7); pointer-events:none; }

/* --------------------------------------------------------- FAQ tabs ---- */
.faq-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:32px; }
.faq-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface);
  font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .2s ease; font-family:inherit;
}
.faq-tab .dotc{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.faq-tab:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
.faq-tab.active{
  background:linear-gradient(135deg, var(--primary), var(--primary-600)); border-color:var(--primary); color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent);
}
.faq-tab.active .dotc{ background:#fff !important; }
.faq-panel{ display:none; scroll-margin-top:100px; }
.faq-panel.active{ display:block; animation:faqPanelIn .35s ease; }
@keyframes faqPanelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* While searching, every campus panel is shown at once (see initFaqSearch
   in pages/scripts.js) so a match under a non-active tab still surfaces. */
.faq-panels.searching .faq-panel{ display:block; margin-bottom:20px; }

/* ----------------------------------------------------- FAQ accordion --- */
.campus-faq-block{ padding:8px 30px 32px; }
.campus-faq-head{ display:flex; align-items:center; gap:14px; padding:22px 0 20px; }
.campus-faq-head-icon{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.campus-faq-head-icon svg{ width:20px; height:20px; }
.campus-faq-head h3{ font-family:'Merriweather',serif; font-size:19px; margin:0; }
.campus-faq-list{ max-width:760px; margin:0 auto; }

.campus-faq-cat-group{ margin-bottom:4px; }
.campus-faq-category{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--primary-text);
  margin:22px 0 10px;
}
.campus-faq-cat-group:first-child .campus-faq-category{ margin-top:0; }
.campus-faq-category::before{ content:""; width:14px; height:2px; border-radius:2px; background:var(--primary-text); flex-shrink:0; }

.campus-faq-item{
  border:1px solid var(--border); border-radius:14px; margin-bottom:10px; overflow:hidden; background:var(--surface);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.campus-faq-item:hover{ border-color:color-mix(in srgb, var(--primary) 30%, var(--border)); }
.campus-faq-item.open{ border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow:var(--shadow); }
.campus-faq-q{
  width:100%; display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer;
  background:transparent; border:none; text-align:left; font-family:inherit;
}
.campus-faq-q-icon{
  width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--primary-100); color:var(--primary-text); transition:background .2s ease, color .2s ease;
}
.campus-faq-item.open .campus-faq-q-icon{ background:var(--primary); color:#fff; }
.campus-faq-q-icon svg{ width:13px; height:13px; }
.campus-faq-q-text{ flex:1; font-size:13.8px; font-weight:700; color:var(--text); }
.campus-faq-q-chev{ flex-shrink:0; color:var(--muted); transition:transform .25s ease; }
.campus-faq-item.open .campus-faq-q-chev{ transform:rotate(180deg); color:var(--primary-text); }
.campus-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.22,.85,.32,1); }
.campus-faq-a .answer{ padding:0 18px 16px 58px; font-size:13.3px; color:var(--muted); line-height:1.65; }

/* --------------------------------------------------------- FAQ CTA ----- */
.faq-cta{
  margin-top:16px; padding:36px; border-radius:20px; text-align:center;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%); color:#fff;
}
.faq-cta h3{ font-family:'Merriweather',serif; font-size:20px; margin:0 0 6px; color:#fff; }
.faq-cta p{ font-size:13.5px; color:rgba(255,255,255,.8); margin:0 0 20px; }

/* ------------------------------------------------------------ responsive */
@media(max-width:640px){
  .hero-v2{ padding:64px 18px 84px; }
  .hero-v2-sm{ padding:48px 18px 56px; }
  .public-shell{ padding:44px 18px; }
  .public-section{ margin-bottom:48px; }
  .section-band{ padding:44px 0; }
  .campus-faq-block{ padding:20px 18px; }
}