:root{
  --brand-1: #ea580c;            /* orange-600 */
  --brand-2: #f59e0b;            /* amber-500 */
  --brand-1-rgb: 234, 88, 12;
  --brand-2-rgb: 245, 158, 11;
  --brand-deep: #9a3412;         /* orange-800 */
  --ink: #000;
  --muted: #000;
  --card-border: rgba(15, 23, 42, .08);
}

.about-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .20), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .18), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  position: relative;
}

.accordion-button{
  font-weight: 700;
}

.accordion-button:not(.collapsed){
  background: rgba(var(--brand-1-rgb), .10);
  box-shadow: none;
  color: #7c2d12;
}

.accordion-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.04);
  overflow: hidden;
}

.agenda{
  border-left: 2px dashed rgba(15,23,42,.16);
  padding-left: 18px;
}

.agenda .item{
  padding: 14px 0 14px 0;
  position: relative;
}

.agenda .item:before{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(var(--brand-1-rgb), .24);
  content: "";
  height: 12px;
  left: -26px;
  position: absolute;
  top: 22px;
  width: 12px;
}

.anchor{
  scroll-margin-top: calc(var(--nav-h) + 72px);
}

.article{
  font-size: 1.04rem;
  line-height: 1.85;
}

.article .callout{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 14px 16px;
}

.article .callout strong{
  color: #7c2d12;
}

.article h2{
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: .75rem;
  margin-top: 1.8rem;
}

.article h3{
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: .6rem;
  margin-top: 1.4rem;
}

.article p{
  color: rgba(15,23,42,.92);
}

.article ul{
  margin-top: .25rem;
}

.article-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 40px 0 24px;
  position: relative;
}

.avatar{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.badge-soft{
  background: rgba(var(--brand-1-rgb), .12);
  border: 1px solid rgba(var(--brand-1-rgb), .22);
  color: var(--brand-deep);
  font-weight: 700;
}

.banner-slider{
  height: 700px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.banner-slider .banner-overlay{
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.banner-slider .carousel-caption{
  bottom: 12%;
  left: 8%;
  right: 8%;
  text-align: left;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 2;
}

.banner-slider .carousel-caption h2{
  font-weight: 600;
  letter-spacing: -0.02em;
}

.banner-slider .carousel-inner, .banner-slider .carousel-item{
  height: 100%;
}

.banner-slider .carousel-item img{
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.branch-badge{
  align-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(var(--brand-1-rgb), .20);
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.branch-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 48px 0;
  position: relative;
}

.branch-item{
  align-items: flex-start;
  border-bottom: 1px solid rgba(15,23,42,.08);
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 14px 14px;
  transition: background .15s ease, transform .15s ease;
}

.branch-item.active{
  background: linear-gradient(135deg, rgba(var(--brand-1-rgb), .14), rgba(var(--brand-2-rgb), .10));
}

.branch-item:hover{
  background: rgba(var(--brand-1-rgb), .06);
}

.branch-item:last-child{
  border-bottom: none;
}

.branch-list{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  overflow: hidden;
}

.branch-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.brand-badge{
  align-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(var(--brand-1-rgb), .18);
  color: white;
  display: inline-flex;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  letter-spacing: .5px;
  width: 42px;
}

.breadcrumb a{
  text-decoration: none;
}

.breadcrumb a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-brand{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border: none;
  box-shadow: 0 14px 30px rgba(var(--brand-1-rgb), .18);
}

.btn-brand:hover{
  filter: brightness(.98);
}

.cat-tile{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.05);
  height: 100%;
  padding: 16px;
}

.cat-tile a{
  text-decoration: none;
}

.cat-tile:hover{
  transform: translateY(-1px);
  transition: transform .15s ease;
}

.chip{
  align-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  font-size: .92rem;
  font-weight: 600;
  gap: .5rem;
  padding: .45rem .8rem;
  text-decoration: none;
  user-select: none;
}

.chip.active{
  background: rgba(var(--brand-1-rgb), .10);
  border-color: rgba(var(--brand-1-rgb), .35);
  color: #7c2d12;
  font-weight: 800;
}

.contact-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.content{
  font-size: 1.04rem;
  line-height: 1.85;
}

.content h2{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: .75rem;
  margin-top: 1.8rem;
}

.content h3{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: .6rem;
  margin-top: 1.4rem;
}

.cost-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.cover{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(2,6,23,.10);
  min-height: 320px;
  overflow: hidden;
  position: relative;
}

.cover .cover-caption{
  bottom: 18px;
  color: #fff;
  left: 22px;
  position: absolute;
  right: 22px;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 2;
}

.cover img{
  display: block;
  height: 360px;
  min-height: 320px;
  object-fit: cover;
  width: 100%;
}

.cover:after{
  background: linear-gradient(90deg, rgba(0,0,0,.50), rgba(0,0,0,.10));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.cta-stripe{
  background: linear-gradient( 135deg, rgba(var(--brand-1-rgb), .14), rgba(var(--brand-2-rgb), .12) );
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  border-top: 1px solid rgba(15, 23, 42, .06);
}

.detail-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 40px 0 24px;
  position: relative;
}

.empty-state{
  background: rgba(2,6,23,.01);
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: 18px;
  padding: 28px;
}

.event-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.event-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.event-meta .badge{
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  color: #111827;
  font-weight: 500;
}

.faq-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 52px 0;
  position: relative;
}

.fb-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.filter-bar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
  padding: 14px;
}

.filter-chip{
  align-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: .5rem;
  padding: .45rem .8rem;
  user-select: none;
}

.filter-chip.active{
  background: rgba(var(--brand-1-rgb), .10);
  border-color: rgba(var(--brand-1-rgb), .35);
  color: #7c2d12;
  font-weight: 600;
}

.floating{
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: fixed;
  right: 16px;
  z-index: 1040;
}

.floating a{
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  color: #111827;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  text-decoration: none;
  width: 46px;
}

.floating a, .floating button{
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  color: #111827;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  text-decoration: none;
  width: 46px;
}

.floating a:hover{
  transform: translateY(-1px);
}

.floating a:hover, .floating button:hover{
  transform: translateY(-1px);
}

.floating-contact{
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: fixed;
  right: 16px;
  z-index: 1040;
}

.floating-contact a{
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  color: #111827;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  text-decoration: none;
  width: 46px;
}

.floating-contact a:hover{
  transform: translateY(-1px);
}

.floating-cta{
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: fixed;
  right: 16px;
  z-index: 1040;
}

.floating-cta a{
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  color: #111827;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  text-decoration: none;
  width: 46px;
}

.floating-cta a:hover{
  transform: translateY(-1px);
}

.footer{
  background: #0b1220;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
  margin-top: 28px;
  padding: 28px 0;
}

.footer a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}

.footer a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-sunny{
  background: radial-gradient(900px 520px at 10% 0%, rgba(var(--brand-1-rgb), .22), transparent 55%), radial-gradient(760px 460px at 92% 18%, rgba(var(--brand-2-rgb), .18), transparent 55%), linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  position: relative;
}

.footer-sunny .footer-badge{
  align-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(var(--brand-1-rgb), .28);
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  letter-spacing: .5px;
  width: 44px;
}

.footer-sunny .footer-chip{
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  display: inline-flex;
  font-size: .9rem;
  gap: .35rem;
  padding: .35rem .6rem;
}

.footer-sunny .footer-divider{
  border-color: rgba(255,255,255,.12) !important;
}

.footer-sunny .footer-list a{
  align-items: center;
  display: inline-flex;
  gap: .45rem;
  padding: .15rem 0;
}

.footer-sunny .footer-list a i{
  color: rgba(var(--brand-2-rgb), .95);
}

.footer-sunny .footer-mini-link{
  color: rgba(255,255,255,.72);
}

.footer-sunny .footer-mini-link:hover{
  color: rgba(255,255,255,1);
}

.footer-sunny .footer-social a{
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  width: 42px;
}

.footer-sunny .footer-social a:hover{
  background: rgba(var(--brand-1-rgb), .18);
  border-color: rgba(var(--brand-1-rgb), .38);
  text-decoration: none;
  transform: translateY(-1px);
}

.footer-sunny .footer-text{
  color: rgba(255,255,255,.72);
}

.footer-sunny .footer-title{
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.footer-sunny a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
}

.footer-sunny a:hover{
  color: rgba(255,255,255,1);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-sunny:before{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  content: "";
  height: 4px;
  left: 0;
  opacity: .95;
  position: absolute;
  right: 0;
  top: 0;
}

.gallery img{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  cursor: pointer;
  height: 190px;
  object-fit: cover;
  width: 100%;
}

.g-caption{
  bottom: 12px;
  color: #fff;
  font-weight: 700;
  left: 12px;
  opacity: 0;
  position: absolute;
  right: 12px;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}

.g-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.g-card img{
  display: block;
  height: 220px;
  object-fit: cover;
  width: 100%;
}

.g-card:hover .g-caption{
  opacity: 1;
  transform: translateY(0);
}

.g-card:hover .g-overlay{
  opacity: 1;
}

.g-overlay{
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.38));
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity .15s ease;
}

.g-tag{
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  display: inline-flex;
  font-size: .85rem;
  font-weight: 600;
  gap: .35rem;
  left: 10px;
  padding: .25rem .6rem;
  position: absolute;
  top: 10px;
}

.guide-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .20), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .18), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  overflow: hidden;
  position: relative;
}

.hero-banner{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(2,6,23,.10);
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

.hero-banner .hero-caption{
  bottom: 22px;
  color: #fff;
  left: 24px;
  position: absolute;
  right: 24px;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 2;
}

.hero-banner img{
  display: block;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  width: 100%;
}

.hero-banner:after{
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-caption{
  bottom: 18px;
  color: #fff;
  left: 20px;
  position: absolute;
  right: 20px;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 2;
}

.hero-card{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.86);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(2,6,23,.08);
}

.hero-cover{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  overflow: hidden;
}

.hero-cover img{
  display: block;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  width: 100%;
}

.hero-media{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(2,6,23,.10);
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

.hero-media img{
  display: block;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  width: 100%;
}

.hero-media:after{
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.10));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-pill{
  align-items: center;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 999px;
  display: inline-flex;
  font-size: .9rem;
  gap: .45rem;
  padding: .35rem .6rem;
}

.hero-stat{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(2,6,23,.06);
  padding: 14px 16px;
}

.icon-bubble{
  align-items: center;
  background: linear-gradient(135deg, rgba(var(--brand-1-rgb), .14), rgba(var(--brand-2-rgb), .14));
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 14px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.info-pill{
  align-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 999px;
  display: inline-flex;
  font-size: .92rem;
  gap: .45rem;
  padding: .35rem .6rem;
}

.list-link a{
  color: var(--ink);
  text-decoration: none;
}

.list-link a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.logo-tile{
  align-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(2,6,23,.05);
  display: flex;
  justify-content: center;
  min-height: 74px;
  padding: 16px;
}

.logo-tile img{
  filter: saturate(.95);
  max-height: 36px;
  max-width: 140px;
  opacity: .88;
}

.map-box{
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(2,6,23,.08);
  min-height: 340px;
  overflow: hidden;
  position: relative;
}

.map-box .map-overlay{
  align-items: center;
  color: var(--muted);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: absolute;
  text-align: center;
}

.map-box iframe{
  border: 0;
  display: block;
  height: 360px;
  width: 100%;
}

.meta{
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .92rem;
  gap: 8px;
}

.meta .dot{
  background: rgba(100,116,139,.7);
  border-radius: 50%;
  display: inline-block;
  height: 4px;
  margin: 0 6px;
  width: 4px;
}

.meta-pill{
  align-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  display: inline-flex;
  font-weight: 600;
  gap: .5rem;
  padding: .45rem .75rem;
}

.moments-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.navbar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.navbar .dropdown-item{
  border-radius: 10px;
  color: #000;
  font-weight: 500;
  padding: .55rem .75rem;
}

.navbar .dropdown-item:active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
}

.navbar .dropdown-item:hover{
  background: rgba(var(--brand-1-rgb), .10);
}

.navbar .dropdown-menu{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(2,6,23,.12);
  padding: .5rem;
}

.navbar .navbar-nav > .nav-item > .nav-link{
  color: #000;
  font-size: 17px;
  font-weight: 500;
  text-transform: capitalize;
}

.news-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.page-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .22), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .18), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  overflow: hidden;
  padding: 64px 0;
  position: relative;
}

.pagination .page-item.active .page-link{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-color: transparent;
}

.pagination .page-link{
  color: var(--ink);
}

.parents-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.pill{
  align-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  display: inline-flex;
  font-weight: 600;
  gap: .5rem;
  padding: .42rem .75rem;
}

.play{
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 18px;
  color: #fff;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  position: absolute;
  width: 56px;
  z-index: 2;
}

.post-body{
  padding: 16px;
}

.post-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.post-excerpt{
  color: var(--muted);
  margin: 0;
}

.post-footer{
  margin-top: auto;
  padding: 0 16px 16px 16px;
}

.post-meta{
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .9rem;
  gap: .6rem;
}

.post-thumb{
  display: block;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.post-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  margin-top: 10px;
}

.ratio iframe{
  border-radius: 14px;
}

.sch-badges .badge{
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  color: #111827;
  font-weight: 500;
}

.sch-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sch-desc{
  color: var(--muted);
}

.sch-footer{
  margin-top: auto;
}

.scholar-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.school-body{
  padding: 28px 16px 16px 16px;
}

.school-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(2,6,23,.06);
  height: 100%;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.school-card:hover{
  box-shadow: 0 20px 70px rgba(2,6,23,.10);
  transform: translateY(-1px);
}

.school-cover{
  background: radial-gradient(600px 260px at 12% 20%, rgba(var(--brand-1-rgb), .20), transparent 55%), radial-gradient(520px 240px at 90% 30%, rgba(var(--brand-2-rgb), .18), transparent 55%), linear-gradient(135deg, rgba(15,23,42,.02), rgba(15,23,42,0));
  border-bottom: 1px solid rgba(15,23,42,.08);
  height: 120px;
  position: relative;
}

.school-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .22), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .18), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  overflow: hidden;
  position: relative;
}

.school-logo{
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  bottom: -18px;
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
  display: inline-flex;
  height: 68px;
  justify-content: center;
  left: 16px;
  overflow: hidden;
  position: absolute;
  width: 68px;
}

.school-logo img{
  height: 100%;
  object-fit: contain;
  padding: 12px;
  width: 100%;
}

.school-title{
  letter-spacing: -0.01em;
}

.sch-title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.section-nav a{
  align-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  color: #0f172a;
  display: inline-flex;
  font-size: .95rem;
  font-weight: 600;
  gap: .45rem;
  padding: .45rem .7rem;
  text-decoration: none;
}

.section-nav a:hover{
  background: rgba(var(--brand-1-rgb), .10);
}

.section-title{
  letter-spacing: -0.02em;
}

.soft-card{
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

.stars i{
  color: #f59e0b;
}

.steps{
  border-left: 2px dashed rgba(15,23,42,.16);
  padding-left: 18px;
}

.steps .step{
  padding: 14px 0;
  position: relative;
}

.steps .step:before{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(var(--brand-1-rgb), .24);
  content: "";
  height: 12px;
  left: -26px;
  position: absolute;
  top: 22px;
  width: 12px;
}

.sticky-card{
  position: sticky;
  top: calc(var(--nav-h) + 18px);
}

.story{
  font-size: 1.04rem;
  line-height: 1.85;
}

.story h2{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: .75rem;
  margin-top: 1.8rem;
}

.story h3{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: .6rem;
  margin-top: 1.3rem;
}

.subnav{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  position: sticky;
  top: var(--nav-h);
  z-index: 1020;
}

.subnav .nav-link{
  border-radius: 999px;
  color: #111827;
  font-weight: 600;
  margin: .25rem .15rem;
  padding: .45rem .8rem;
}

.subnav .nav-link.active{
  background: rgba(var(--brand-1-rgb), .12);
  border: 1px solid rgba(var(--brand-1-rgb), .22);
  color: var(--brand-deep);
}

.subnav .nav-link:hover{
  background: rgba(var(--brand-1-rgb), .10);
}

.sunny-intro{
  align-items: flex-start;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
}

.sunny-intro .sunny-mark{
  align-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(var(--brand-1-rgb), .20);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.table thead th{
  background: rgba(var(--brand-1-rgb), .08);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.tag{
  align-items: center;
  background: rgba(2,6,23,.02);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  color: #111827;
  display: inline-flex;
  font-size: .85rem;
  gap: .4rem;
  padding: .32rem .55rem;
}

.tag.ok{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.35);
}

.tag.warn{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.45);
}

.t-body{
  color: rgba(15,23,42,.92);
  line-height: 1.7;
}

.t-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.text-muted-2{
  color: var(--muted);
}

.t-footer{
  margin-top: auto;
}

.t-header{
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.timeline{
  border-left: 2px dashed rgba(15,23,42,.16);
  padding-left: 22px;
}

.timeline .step{
  padding: 18px 18px 18px 0;
  position: relative;
}

.timeline .step:before{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(var(--brand-1-rgb), .28);
  content: "";
  height: 14px;
  left: -32px;
  position: absolute;
  top: 28px;
  width: 14px;
}

.toc a{
  border-radius: 10px;
  color: var(--ink);
  display: block;
  padding: .35rem .25rem;
  text-decoration: none;
}

.toc a:hover{
  background: rgba(var(--brand-1-rgb), .10);
}

.topbar{
  background: linear-gradient(90deg, rgba(var(--brand-1-rgb), .10), rgba(var(--brand-2-rgb), .10));
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  font-size: .92rem;
}

.v-body{
  padding: 16px;
}

.v-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.v-desc{
  color: var(--muted);
  margin-bottom: 0;
  margin-top: 8px;
}

.video-hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .18), transparent 60%), radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .16), transparent 55%), linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  overflow: hidden;
  padding: 56px 0;
  position: relative;
}

.v-meta{
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .9rem;
  gap: .75rem;
}

.v-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.v-tags .badge{
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  color: #111827;
  font-weight: 500;
}

.v-thumb{
  align-items: center;
  background: #0b1220;
  color: #fff;
  display: flex;
  height: 210px;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.v-thumb .play{
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.v-thumb img{
  display: block;
  height: 100%;
  object-fit: cover;
  opacity: .92;
  width: 100%;
}

.v-thumb:after{
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.v-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

body{
  color: var(--ink);
}

section{
  padding: 52px 0;
}


/* Media queries */
@media (max-width: 991.98px){
      .navbar .dropdown-menu{
        position: static;
        float: none;
        box-shadow: none;
        padding: .25rem .5rem;
      }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (max-width: 767.98px){
      .cover img{ height: 240px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (max-width: 767.98px){
      .banner-slider{ height: 450px; } /* mobile */
    }

@media (max-width: 991.98px){
      .navbar .dropdown-menu{
        position: static;
        float: none;
        box-shadow: none;
        padding: .25rem .5rem;
      }
    }

@media (max-width: 991.98px){
      .navbar .dropdown-menu{
        position: static;
        float: none;
        box-shadow: none;
        padding: .25rem .5rem;
      }
    }

@media (max-width: 767.98px){
      .g-card img{ height: 180px; }
    }

@media (max-width: 767.98px){
      .cover img{ height: 240px; }
    }

@media (max-width: 767.98px){
      .g-card img{ height: 180px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (max-width: 767.98px){
      .cover img{ height: 240px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (max-width: 767.98px){
      .cover img{ height: 240px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (min-width: 992px){
      .sticky-side{
        position: sticky;
        top: 96px;
      }
    }

@media (max-width: 991.98px){
      .navbar .dropdown-menu{
        position: static; float: none; box-shadow: none; padding: .25rem .5rem;
      }
    }

@media (max-width: 991.98px){
      .navbar .dropdown-menu{
        position: static;
        float: none;
        box-shadow: none;
        padding: .25rem .5rem;
      }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (max-width: 767.98px){
      .cover img{ height: 240px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (max-width: 767.98px){
      .map-box iframe{ height: 320px; }
    }

@media (min-width: 992px){
      .sticky-left{ position: sticky; top: 96px; }
      .sticky-right{ position: sticky; top: 96px; }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }

@media (max-width: 991.98px){
      .navbar .dropdown-menu{
        position: static;
        float: none;
        box-shadow: none;
        padding: .25rem .5rem;
      }
    }

@media (max-width: 991.98px){
      .navbar .dropdown-menu{
        position: static;
        float: none;
        box-shadow: none;
        padding: .25rem .5rem;
      }
    }

@media (min-width: 992px){
      .sticky-side{ position: sticky; top: 96px; }
    }