/* ==========================================================================
   components.css — Reusable UI Components
   ========================================================================== */

/* -------------------- Hero -------------------- */
.hero{
  position: relative; min-height: 94vh; display: flex; align-items: center;
  background-size: cover; background-position: right center; background-repeat: no-repeat;
  background-color: var(--mmss-bg-dark);
  overflow: hidden;
}
.hero::before{ content: ''; position: absolute; inset: 0; background: var(--mmss-gradient-hero); z-index: 0; pointer-events: none; }
.hero::after{
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 8% 90%, rgba(255,176,32,.18) 0%, transparent 40%),
    radial-gradient(circle at 92% 8%, rgba(15,156,142,.16) 0%, transparent 45%);
}
.hero-shapes{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-shapes .deco-blob{ z-index: 1; }
.hero > .container{ position: relative; z-index: 2; width: 100%; }

.hero-content{ position: relative; z-index: 2; color: #fff; padding: 150px 0 110px; }
.hero-badge{
  display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.28);
  padding: 9px 22px; border-radius: var(--mmss-radius-pill); font-size: .82rem; font-weight: 600; margin-bottom: 28px;
}
.hero-badge i{ color: var(--mmss-flame); }
.hero h1{
  font-size: var(--mmss-fs-hero); color: #fff; margin-bottom: 26px; font-weight: 700;
}
.hero h1 .text-grad{
  font-style: italic; font-weight: 600;
  background: linear-gradient(90deg, var(--mmss-flame), var(--mmss-secondary-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead{ color: rgba(255,255,255,.85); font-size: var(--mmss-fs-lead); max-width: 580px; margin-bottom: 40px; font-family: var(--mmss-font-body); }
.hero-actions{ display: flex; gap: 20px 18px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-trustbar{ display: flex; gap: 40px; flex-wrap: wrap; }
.hero-trust-item{ display: flex; flex-direction: column; gap: 2px; position: relative; padding-left: 18px; }
.hero-trust-item::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background: var(--mmss-gradient-warm); }
.hero-trust-item strong{ font-family: var(--mmss-font-display); font-size: 1.7rem; color: #fff; display: block; line-height: 1; font-weight: 700; }
.hero-trust-item span{ font-size: .78rem; color: rgba(255,255,255,.68); margin-top: 4px; }

.hero-floating-card{
  position: absolute; right: 6%; bottom: 12%; z-index: 3;
  background: rgba(255,255,255,.1); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.24); border-radius: var(--mmss-radius-md);
  padding: 22px 28px; color: #fff; display: flex; align-items: center; gap: 16px;
  box-shadow: var(--mmss-shadow-lg); animation: floatY 4.5s ease-in-out infinite;
}
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
.hero-floating-card strong{ font-family: var(--mmss-font-display); font-size: 1.3rem; }
.hero-floating-card .icon{
  width: 50px; height: 50px; border-radius: 50%; background: var(--mmss-gradient-warm);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  box-shadow: 0 0 22px 4px rgba(255,176,32,.4);
}

/* -------------------- Page (inner) Hero -------------------- */
.page-hero{
  position: relative; padding: 176px 0 96px;
  background: var(--mmss-gradient-dusk);
  overflow: hidden;
}
.page-hero::after{ content:''; position:absolute; inset:0; background: var(--mmss-gradient-mesh); }
.page-hero .breadcrumb-row{ position: relative; z-index: 2; }
.page-hero h1{ color: #fff; margin-bottom: 16px; }
.page-hero p{ color: rgba(255,255,255,.85); max-width: 620px; }
.mmss-breadcrumb{ display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,.68); font-size: .9rem; margin-bottom: 20px; }
.mmss-breadcrumb a{ color: rgba(255,255,255,.88); font-weight: 600; }
.mmss-breadcrumb a:hover{ color: var(--mmss-flame); }

/* -------------------- Glass / Stat Cards -------------------- */
.glass-card{
  background: rgba(255,255,255,.68); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.5); border-radius: var(--mmss-radius-md);
  box-shadow: var(--mmss-shadow-md);
}
.stats-strip{ margin-top: -84px; position: relative; z-index: 5; }
.stat-card{
  background: #fff; border-radius: var(--mmss-radius-md); padding: 36px 26px; text-align: center;
  box-shadow: var(--mmss-shadow-lg); transition: var(--mmss-transition); height: 100%;
  border: 1px solid rgba(26,15,46,.04);
}
.stat-card:hover{ transform: translateY(-10px); box-shadow: 0 34px 70px rgba(26,15,46,.16); }
.stat-icon{
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
  background: var(--mmss-gradient-primary);
}
.stat-card:nth-child(2) .stat-icon{ background: var(--mmss-gradient-warm); }
.stat-card:nth-child(3) .stat-icon{ background: linear-gradient(135deg, var(--mmss-accent), var(--mmss-accent-dark)); }
.stat-card:nth-child(4) .stat-icon{ background: linear-gradient(135deg, var(--mmss-flame), var(--mmss-secondary-dark)); }
.stat-number{ font-family: var(--mmss-font-display); font-size: 2.6rem; font-weight: 700; color: var(--mmss-text-dark); line-height: 1; }
.stat-number sup{ font-size: 1.4rem; color: var(--mmss-secondary); }
.stat-label{ color: var(--mmss-text-muted); font-weight: 600; font-size: .9rem; margin-top: 8px; }

/* -------------------- Mission / Vision -------------------- */
.mv-card{
  background: #fff; border-radius: var(--mmss-radius-lg); padding: 48px 38px; height: 100%;
  box-shadow: var(--mmss-shadow-sm); border: 1px solid rgba(91,33,182,.07); transition: var(--mmss-transition);
  position: relative; overflow: hidden;
}
.mv-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height: 4px;
  background: var(--mmss-gradient-primary); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.mv-card:hover::before{ transform: scaleX(1); }
.mv-card:hover{ box-shadow: var(--mmss-shadow-lg); transform: translateY(-8px); }
.mv-card .mv-icon{
  width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff; margin-bottom: 26px; background: var(--mmss-gradient-primary);
  box-shadow: var(--mmss-shadow-glow);
}
.mv-card.warm .mv-icon{ background: var(--mmss-gradient-warm); box-shadow: var(--mmss-shadow-glow-warm); }
.mv-card.warm::before{ background: var(--mmss-gradient-warm); }
.mv-card.teal .mv-icon{ background: linear-gradient(135deg, var(--mmss-accent), var(--mmss-accent-dark)); box-shadow: 0 10px 30px rgba(15,156,142,.3); }
.mv-card.teal::before{ background: linear-gradient(135deg, var(--mmss-accent), var(--mmss-accent-dark)); }
.mv-card h3{ margin-bottom: 14px; }

/* -------------------- Program / Activity Cards -------------------- */
.program-card{
  background: #fff; border-radius: var(--mmss-radius-md); overflow: hidden; height: 100%;
  box-shadow: var(--mmss-shadow-sm); transition: var(--mmss-transition); position: relative;
  border: 1px solid rgba(26,15,46,.05);
}
.program-card:hover{ box-shadow: var(--mmss-shadow-lg); transform: translateY(-10px); }
.program-img{ height: 240px; overflow: hidden; position: relative; }
.program-img::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(26,15,46,.55) 0%, transparent 45%); }
.program-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.program-card:hover .program-img img{ transform: scale(1.1); }
.program-tag{
  position: absolute; top: 18px; left: 18px; background: var(--mmss-gradient-warm); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  padding: 7px 16px; border-radius: var(--mmss-radius-pill); z-index: 2; box-shadow: var(--mmss-shadow-glow-warm);
}
.program-body{ padding: 28px; }
.program-body h4{ font-family: var(--mmss-font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 12px; }
.program-body p{ font-size: .92rem; margin-bottom: 18px; }
.program-link{ font-weight: 700; color: var(--mmss-primary); font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
.program-link i{ transition: var(--mmss-transition); }
.program-link:hover i{ transform: translateX(5px); }

/* -------------------- Why Choose Us -------------------- */
.why-item{ display: flex; gap: 22px; margin-bottom: 36px; }
.why-icon{
  flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; background: var(--mmss-bg-lavender);
  color: var(--mmss-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  transition: var(--mmss-transition);
}
.why-item:hover .why-icon{ background: var(--mmss-gradient-primary); color: #fff; transform: rotate(-6deg) scale(1.05); }
.why-item h5{ font-family: var(--mmss-font-display); margin-bottom: 8px; font-size: 1.1rem; font-weight: 600; }
.why-item p{ font-size: .92rem; }

/* -------------------- Gallery Preview / Masonry -------------------- */
.gallery-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; grid-auto-rows: 210px; }
.gallery-item{
  border-radius: var(--mmss-radius-md); overflow: hidden; position: relative; cursor: pointer;
  box-shadow: var(--mmss-shadow-sm);
}
.gallery-item.tall{ grid-row: span 2; }
.gallery-item.wide{ grid-column: span 2; }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.gallery-item:hover img{ transform: scale(1.12); }
.gallery-overlay{
  position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,15,46,.9), rgba(26,15,46,.1) 55%, transparent 70%);
  display: flex; align-items: flex-end; padding: 20px; opacity: 0; transition: var(--mmss-transition); pointer-events: none;
}
.gallery-item:hover .gallery-overlay{ opacity: 1; }
.gallery-overlay span{ color: #fff; font-weight: 600; font-size: .9rem; }
.gallery-overlay .zoom-icon{
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #fff;
  transition: var(--mmss-transition);
}
.gallery-item:hover .zoom-icon{ background: var(--mmss-secondary); transform: scale(1.1); }

.gallery-filters{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 48px; }
.gallery-filters button{
  background: var(--mmss-bg-lavender); color: var(--mmss-primary); border: none; font-weight: 600;
  padding: 11px 26px; border-radius: var(--mmss-radius-pill); transition: var(--mmss-transition);
}
.gallery-filters button.active, .gallery-filters button:hover{ background: var(--mmss-gradient-primary); color: #fff; box-shadow: var(--mmss-shadow-glow); }

/* -------------------- Testimonials -------------------- */
.testimonial-card{
  background: #fff; border-radius: var(--mmss-radius-md); padding: 40px; box-shadow: var(--mmss-shadow-md);
  height: 100%; position: relative; border: 1px solid rgba(26,15,46,.05);
}
.testimonial-card .quote-icon{ color: var(--mmss-bg-lavender); font-size: 2.8rem; position: absolute; top: 22px; right: 28px; }
.testimonial-card p.quote{ font-family: var(--mmss-font-display); color: var(--mmss-text-dark); font-style: italic; font-weight: 450; margin-bottom: 26px; font-size: 1.08rem; line-height: 1.5; }
.testimonial-person{ display: flex; align-items: center; gap: 14px; }
.testimonial-person img{ width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mmss-bg-lavender); }
.testimonial-person strong{ display: block; font-size: .96rem; }
.testimonial-person span{ color: var(--mmss-text-muted); font-size: .8rem; }
.testimonial-stars{ color: var(--mmss-secondary); font-size: .8rem; margin-bottom: 14px; }

/* -------------------- News / Event Cards -------------------- */
.news-card{ background: #fff; border-radius: var(--mmss-radius-md); overflow: hidden; box-shadow: var(--mmss-shadow-sm); height: 100%; transition: var(--mmss-transition); border: 1px solid rgba(26,15,46,.05); }
.news-card:hover{ box-shadow: var(--mmss-shadow-lg); transform: translateY(-10px); }
.news-img{ height: 205px; overflow: hidden; }
.news-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.news-card:hover .news-img img{ transform: scale(1.1); }
.news-date{
  display: inline-flex; flex-direction: column; align-items: center; background: var(--mmss-bg-lavender);
  color: var(--mmss-primary); border-radius: var(--mmss-radius-sm); padding: 9px 16px; font-weight: 700; line-height: 1.1; margin-bottom: 16px;
}
.news-date small{ font-size: .68rem; font-weight: 600; text-transform: uppercase; }
.news-body{ padding: 26px; }
.news-body h5{ font-family: var(--mmss-font-display); font-weight: 600; }
.news-meta{ display: flex; gap: 16px; font-size: .8rem; color: var(--mmss-text-muted); margin-bottom: 10px; }
.news-meta i{ color: var(--mmss-accent); margin-right: 4px; }

.event-card{
  display: flex; gap: 22px; background: #fff; border-radius: var(--mmss-radius-md); padding: 24px;
  box-shadow: var(--mmss-shadow-sm); margin-bottom: 22px; transition: var(--mmss-transition); align-items: center;
  border: 1px solid rgba(26,15,46,.05);
}
.event-card:hover{ box-shadow: var(--mmss-shadow-md); transform: translateX(8px); }
.event-date-box{
  flex-shrink: 0; width: 78px; height: 78px; border-radius: var(--mmss-radius-sm); background: var(--mmss-gradient-primary);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.event-date-box strong{ font-family: var(--mmss-font-display); font-size: 1.5rem; line-height: 1; }
.event-date-box span{ font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; }
.badge-upcoming{ background: rgba(15,156,142,.12); color: var(--mmss-accent-dark); }
.badge-past{ background: rgba(122,112,137,.12); color: var(--mmss-text-muted); }
.badge-pill{ font-size: .72rem; font-weight: 700; padding: 6px 14px; border-radius: var(--mmss-radius-pill); text-transform: uppercase; letter-spacing: .4px; }

/* -------------------- Partners -------------------- */
.partner-logo{
  background: #fff; border-radius: var(--mmss-radius-sm); padding: 28px; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--mmss-shadow-sm); height: 112px; filter: grayscale(100%); opacity: .7; transition: var(--mmss-transition);
}
.partner-logo:hover{ filter: grayscale(0); opacity: 1; transform: translateY(-4px); }

/* -------------------- Team Cards -------------------- */
.team-card{
  background: #fff; border-radius: var(--mmss-radius-md); overflow: hidden; box-shadow: var(--mmss-shadow-sm);
  transition: var(--mmss-transition); text-align: center; border: 1px solid rgba(26,15,46,.05);
}
.team-card:hover{ box-shadow: var(--mmss-shadow-lg); transform: translateY(-10px); }
.team-photo{ position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--mmss-bg-lavender); }
.team-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.team-card:hover .team-photo img{ transform: scale(1.1); }
.team-social{
  position: absolute; bottom: -50px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px;
  padding: 16px; background: linear-gradient(0deg, rgba(26,15,46,.88), transparent); transition: var(--mmss-transition);
}
.team-card:hover .team-social{ bottom: 0; }
.team-social a{ width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; }
.team-social a:hover{ background: var(--mmss-secondary); }
.team-info{ padding: 24px; }
.team-info h5, .team-info h6{ font-family: var(--mmss-font-display); font-weight: 600; margin-bottom: 5px; }
.team-role{ color: var(--mmss-secondary); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.team-bio{ font-size: .88rem; }

/* -------------------- Forms -------------------- */
.mmss-form .form-control, .mmss-form .form-select{
  border: 1.5px solid #E7E1F5; border-radius: var(--mmss-radius-sm); padding: 15px 18px; font-size: .94rem;
  background: var(--mmss-bg-lavender); transition: var(--mmss-transition);
}
.mmss-form .form-control:focus, .mmss-form .form-select:focus{
  border-color: var(--mmss-primary); box-shadow: 0 0 0 4px rgba(91,33,182,.12); background: #fff;
}
.mmss-form label{ font-weight: 600; font-size: .88rem; margin-bottom: 8px; color: var(--mmss-text-dark); }
.mmss-form textarea{ min-height: 140px; }
.mmss-form .form-check-input:checked{ background-color: var(--mmss-primary); border-color: var(--mmss-primary); }

.check-tile{
  display: flex; align-items: center; gap: 10px; border: 1.5px solid #E7E1F5; border-radius: var(--mmss-radius-sm);
  padding: 13px 16px; cursor: pointer; transition: var(--mmss-transition); background: var(--mmss-bg-lavender);
  font-weight: 600; font-size: .88rem; height: 100%; box-sizing: border-box;
}
.check-tile:hover{ border-color: var(--mmss-primary); }
.check-tile input{ accent-color: var(--mmss-primary); width: 18px; height: 18px; }
.check-tile.is-checked{ border-color: var(--mmss-primary); background: #fff; box-shadow: 0 0 0 3px rgba(91,33,182,.1); }
.is-invalid-group .check-tile{ border-color: #DC2626; }
.is-invalid-group::after{ content: 'Please select at least one area of interest.'; display:block; color:#DC2626; font-size:.82rem; font-weight:600; margin-top:10px; }

/* -------------------- Donation Page -------------------- */
.donate-tabs{ display: flex; gap: 10px; background: var(--mmss-bg-lavender); padding: 6px; border-radius: var(--mmss-radius-pill); margin-bottom: 32px; }
.donate-tabs button{ flex: 1; border: none; background: transparent; padding: 13px; border-radius: var(--mmss-radius-pill); font-weight: 700; color: var(--mmss-text-muted); transition: var(--mmss-transition); }
.donate-tabs button.active{ background: var(--mmss-gradient-primary); color: #fff; box-shadow: var(--mmss-shadow-glow); }
.amount-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.amount-btn{
  background: var(--mmss-bg-lavender); border: 2px solid transparent; border-radius: var(--mmss-radius-sm);
  padding: 18px; text-align: center; font-weight: 700; color: var(--mmss-text-dark); transition: var(--mmss-transition);
}
.amount-btn.active, .amount-btn:hover{ border-color: var(--mmss-primary); background: #fff; color: var(--mmss-primary); box-shadow: var(--mmss-shadow-sm); }

.qr-card{ background: #fff; border-radius: var(--mmss-radius-lg); padding: 36px; text-align: center; box-shadow: var(--mmss-shadow-md); border: 1px solid rgba(26,15,46,.05); }
.qr-card img{ max-width: 240px; margin: 0 auto 20px; border-radius: var(--mmss-radius-sm); border: 8px solid var(--mmss-bg-lavender); }
.qr-card .qr-placeholder{
  width: 240px; height: 240px; margin: 0 auto 20px; border-radius: var(--mmss-radius-sm);
  border: 2px dashed #D8CFF0; background: var(--mmss-bg-lavender); display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--mmss-text-muted); gap: 8px; padding: 20px; text-align: center;
}
.upi-id-chip{
  display: inline-flex; align-items: center; gap: 10px; background: var(--mmss-bg-lavender);
  border-radius: var(--mmss-radius-pill); padding: 12px 20px; font-weight: 700; color: var(--mmss-primary);
  font-size: .95rem; cursor: pointer; transition: var(--mmss-transition); border: 1.5px solid transparent;
}
.upi-id-chip:hover{ border-color: var(--mmss-primary); background: #fff; }
.upi-id-chip i{ color: var(--mmss-accent); }

.bank-detail-row{ display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px dashed #E7E1F5; }
.bank-detail-row:last-child{ border-bottom: none; }
.bank-detail-row .label{ font-size: .82rem; color: var(--mmss-text-muted); font-weight: 600; }
.bank-detail-row .value{ font-weight: 700; color: var(--mmss-text-dark); font-family: 'Inter', monospace; }

.impact-list li{ display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.impact-amount{
  flex-shrink: 0; background: var(--mmss-gradient-warm); color: #fff; font-weight: 800; font-size: .85rem;
  padding: 11px 18px; border-radius: var(--mmss-radius-sm); min-width: 92px; text-align: center;
  box-shadow: var(--mmss-shadow-glow-warm);
}

/* -------------------- Document Cards -------------------- */
.doc-card{
  background: #fff; border-radius: var(--mmss-radius-md); padding: 28px; box-shadow: var(--mmss-shadow-sm);
  display: flex; align-items: center; gap: 20px; transition: var(--mmss-transition); height: 100%;
  border: 1px solid rgba(26,15,46,.05);
}
.doc-card:hover{ box-shadow: var(--mmss-shadow-md); transform: translateY(-6px); }
.doc-icon{
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 16px; background: var(--mmss-bg-lavender);
  color: var(--mmss-primary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.doc-card h6{ font-family: var(--mmss-font-display); font-weight: 600; margin-bottom: 4px; font-size: 1rem; }
.doc-card span{ font-size: .78rem; color: var(--mmss-text-muted); }
.doc-download{
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--mmss-bg-lavender);
  color: var(--mmss-primary); display: flex; align-items: center; justify-content: center; margin-left: auto;
}
.doc-download:hover{ background: var(--mmss-primary); color: #fff; }

/* -------------------- FAQ Accordion -------------------- */
.mmss-accordion .accordion-item{ border: none; border-radius: var(--mmss-radius-md) !important; margin-bottom: 16px; overflow: hidden; box-shadow: var(--mmss-shadow-sm); }
.mmss-accordion .accordion-button{ font-weight: 700; padding: 24px 28px; background: #fff; color: var(--mmss-text-dark); }
.mmss-accordion .accordion-button:not(.collapsed){ background: var(--mmss-bg-lavender); color: var(--mmss-primary); box-shadow: none; }
.mmss-accordion .accordion-button:focus{ box-shadow: none; }
.mmss-accordion .accordion-body{ padding: 0 28px 26px; color: var(--mmss-text-muted); }

/* -------------------- Timeline (About / History) -------------------- */
.timeline{ position: relative; padding-left: 44px; }
.timeline::before{ content:''; position:absolute; left: 11px; top: 0; bottom: 0; width: 3px; background: var(--mmss-bg-lavender); border-radius: 4px; }
.timeline-item{ position: relative; margin-bottom: 44px; }
.timeline-item::before{
  content: ''; position: absolute; left: -36px; top: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mmss-gradient-primary); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--mmss-bg-lavender), 0 0 16px 2px rgba(91,33,182,.3);
}
.timeline-year{ color: var(--mmss-secondary); font-weight: 800; font-size: .9rem; margin-bottom: 8px; font-family: var(--mmss-font-display); }
.timeline-item h5{ font-family: var(--mmss-font-display); font-weight: 600; }

/* -------------------- Value Cards -------------------- */
.value-card{ text-align: center; padding: 32px 22px; }
.value-icon{
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
  font-size: 1.85rem; color: #fff; background: var(--mmss-gradient-primary); box-shadow: var(--mmss-shadow-glow);
}

/* -------------------- Map -------------------- */
.map-wrapper{ border-radius: var(--mmss-radius-md); overflow: hidden; box-shadow: var(--mmss-shadow-md); }
.map-wrapper iframe{ width: 100%; height: 420px; border: 0; display: block; }

/* -------------------- 404 -------------------- */
.error-404{ text-align: center; padding: 170px 0 130px; }
.error-404 .error-code{
  font-family: var(--mmss-font-display); font-style: italic;
  font-size: clamp(6rem, 14vw, 10rem); font-weight: 700; background: var(--mmss-gradient-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1;
}