/* ABOUT PAGE SPECIFIC STYLES */

/* HERO SECTION - DARK OVERLAY & BOLD STACKED TYPOGRAPHY */
.about-hero {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(14, 4, 10, 0.84) 0%,
    rgba(84, 17, 46, 0.78) 48%,
    rgba(14, 4, 10, 0.9) 100%
  );
  padding: 100px 0 100px 0;
  text-align: center;
  overflow: hidden;
}

.about-hero-panel {
  display: flex;
  justify-content: center;
}

.about-hero-panel-inner {
  width: min(860px, 100%);
  padding: 52px 42px 48px;
  background: rgba(10, 10, 10, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

/* Parallax BG layer — sits behind overlay, shifted by JS */
.about-hero-parallax-bg {
  position: absolute;
  inset: -60px 0;            /* extra height for parallax travel */
  background: url('../assets/images/hospital_hallway.png') center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}

/* Container text sits above parallax layer */
.about-hero .container {
  position: relative;
  z-index: 1;
}

/* Top Eyebrow Label with Thin Horizontal Accent Lines */
.about-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.about-hero-eyebrow .eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: #E8A33D;
  opacity: 0.85;
}

.about-hero-eyebrow .eyebrow-text {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E8A33D;
}

/* Main 3-Line Stacked Headline */
.about-hero-headline {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 4.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.about-hero-headline span {
  display: block;
}

.about-hero-headline .line-1,
.about-hero-headline .line-3 {
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.about-hero-headline .line-2 {
  color: #E8A33D;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24);
}

/* Subtext Below Headline */
.about-hero-subtext {
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.85;
  max-width: 660px;
  margin: 0 auto 32px auto;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Stats Row */
.about-hero-stats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}

.about-hero-stats .stat-diamond {
  color: #E8A33D;
  font-size: 0.75rem;
}

/* ============================================================
   ENTRANCE ANIMATIONS — staggered on page load
   ============================================================ */
@keyframes aha-fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aha-fade-up {
  from { opacity: 0; transform: translateY(25px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aha-fade-up-pop {
  from { opacity: 0; transform: translateY(25px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes aha-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Eyebrow fades down */
.aha-entrance-eyebrow {
  opacity: 0;
  animation: aha-fade-down 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

/* Heading lines stagger upward */
.aha-entrance-l1 {
  opacity: 0;
  animation: aha-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.aha-entrance-l2 {
  opacity: 0;
  animation: aha-fade-up-pop 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.37s forwards;
}

.aha-entrance-l3 {
  opacity: 0;
  animation: aha-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.54s forwards;
}

/* Subtext fades in only (no slide) */
.aha-entrance-subtext {
  opacity: 0;
  animation: aha-fade-in 0.55s ease-out 0.82s forwards;
}

/* Stats stagger left-to-right using CSS custom property --stat-i */
.aha-entrance-stat {
  opacity: 0;
  animation: aha-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(1.0s + var(--stat-i, 0) * 0.1s) forwards;
}

/* ============================================================
   AMBIENT SHIMMER — 'in Trust,' gold sweep (loops every 9s)
   ============================================================ */
@keyframes aha-gold-shimmer {
  0%   { background-position: 200% center; }
  20%  { background-position:   0% center; }
  100% { background-position:   0% center; }
}

.aha-shimmer {
  /* override the flat #E8A33D with a sweeping gradient */
  background: linear-gradient(
    90deg,
    #E8A33D 0%,
    #FFE08A 35%,
    #F5C842 55%,
    #E8A33D 100%
  );
  background-size: 200% auto;
  background-position: 200% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* starts sweeping 1.2s after load (after l2 entrance), then repeats every 9s */
  animation:
    aha-fade-up-pop 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.37s forwards,
    aha-gold-shimmer 9s ease-in-out 1.5s infinite;
}

/* ============================================================
   AMBIENT — Diamond bullet glow pulse (infinite)
   ============================================================ */
@keyframes aha-diamond-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

.about-hero-stats .stat-diamond {
  color: #E8A33D;
  font-size: 0.75rem;
  display: inline-block;
  animation: aha-diamond-pulse 2.5s ease-in-out infinite;
}

/* Stagger second diamond slightly */
.about-hero-stats .stat-diamond:nth-of-type(2) {
  animation-delay: 1.25s;
}

/* ============================================================
   REDUCED MOTION — show final state immediately, no animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .aha-entrance-eyebrow,
  .aha-entrance-l1,
  .aha-entrance-l2,
  .aha-entrance-l3,
  .aha-entrance-subtext,
  .aha-entrance-stat {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .aha-shimmer {
    background-position: 0% center;
    animation: none;
  }

  .about-hero-stats .stat-diamond {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* LEGACY OF HEALING SECTION */
.legacy-section {
  padding: 80px 0;
}

.legacy-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.legacy-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--bg-card);
  animation: legacyCardFloat 5s ease-in-out infinite alternate;
}

@keyframes legacyCardFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

.legacy-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legacy-title {
  font-size: 2.25rem;
  margin-bottom: 8px;
}

.legacy-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-body);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* MISSION VISION VALUES CARDS - OPEN BORDERLESS LAYOUT */
.mvv-section {
  padding: 60px 0 80px 0;
}

.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.mvv-card {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: var(--transition);
}

.mvv-card:first-child {
  padding-left: 0;
}

.mvv-card:last-child {
  padding-right: 0;
}

.mvv-card:not(:last-child) {
  border-right: 1px solid rgba(122, 31, 75, 0.15) !important;
}

.mvv-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.mvv-card .icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--primary);
  flex-shrink: 0;
  animation: mvvIconFloat 5.5s ease-in-out infinite;
}

.mvv-card:nth-child(1) .icon-badge {
  animation-delay: 0s;
}

.mvv-card:nth-child(2) .icon-badge {
  animation-delay: 0.6s;
}

.mvv-card:nth-child(3) .icon-badge {
  animation-delay: 1.2s;
}

@keyframes mvvIconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

.mvv-card .icon-badge svg {
  width: 24px;
  height: 24px;
  stroke: var(--primary);
}

.mvv-card-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 12px;
}

.mvv-card-desc {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.7;
}

/* Values vertical list with gold dot bullet and thin bottom borders */
.values-list {
  list-style: none;
  padding: 0;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.values-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-heading);
  border-bottom: 1px solid rgba(122, 31, 75, 0.12);
}

.values-list li:last-child {
  border-bottom: none;
}

.values-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-orange);
  flex-shrink: 0;
}

/* CARE DRIVEN BY EXCELLENCE PANEL */
.excellence-section {
  padding: 80px 0;
  background-color: rgba(251, 234, 243, 0.3);
}

.excellence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Stacked Image Collage */
.collage-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.collage-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--bg-card);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  animation: collageCardFloat 5s ease-in-out infinite alternate;
  will-change: transform;
  position: relative;
  z-index: 1;
}

.collage-item-large {
  grid-row: span 2;
  border-radius: var(--radius-lg);
}

.collage-container .collage-item:nth-of-type(1) {
  animation-delay: 0s;
}

.collage-container .collage-item:nth-of-type(2) {
  animation-delay: 0.5s;
}

.collage-container .collage-item:nth-of-type(3) {
  animation-delay: 1s;
}

@keyframes collageCardFloat {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px);
  }
}

.collage-item:hover {
  animation-play-state: paused;
  box-shadow: var(--shadow-lg), 0 16px 36px rgba(122, 31, 75, 0.15);
  border-color: rgba(122, 31, 75, 0.15);
  z-index: 5;
}

.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.collage-item:hover img {
  transform: scale(1.02);
}

.collage-watermark {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.collage-item:hover .collage-watermark {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.collage-watermark svg {
  width: 18px;
  height: 18px;
  display: block;
}

.excellence-subheading {
  font-size: 1.25rem;
  color: var(--primary);
  font-weight: 600;
  line-height: 1.4;
  margin: 16px 0;
}

.excellence-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 24px;
}

.excellence-stats {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 3px solid var(--accent-orange);
  padding-left: 16px;
}

/* OUR MILESTONES (ACHIEVEMENTS SECTION) */
.milestones-section {
  padding: 85px 0 95px 0;
  background-color: #FFFFFF;
  position: relative;
}

.milestones-header {
  text-align: center !important;
  max-width: 680px;
  margin: 0 auto 48px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.milestones-subtitle {
  color: #F5A623; /* Vibrant orange */
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  display: inline-block;
}

.milestones-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1A1A2E; /* Dark navy/black */
  margin-bottom: 14px;
  line-height: 1.2;
}

.milestones-desc {
  font-size: 0.98rem;
  color: #6B7280; /* Medium gray */
  line-height: 1.65;
}

/* Multi-Column Milestone Cards Grid (Centered Flex Layout) */
.milestones-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .milestones-grid {
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .milestones-grid {
    gap: 16px !important;
  }
}

/* Milestone Card */
.milestone-card {
  opacity: 1 !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important; /* Light gray border */
  border-radius: 16px !important;
  padding: 32px 24px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 0 1 calc(33.333% - 24px) !important;
  min-width: 260px !important;
  max-width: 360px !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  position: relative;
}

@media (max-width: 1024px) {
  .milestone-card {
    flex: 0 1 calc(50% - 20px) !important;
    max-width: 440px !important;
  }
}

@media (max-width: 640px) {
  .milestone-card {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  position: relative;
}

.milestone-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(122, 31, 75, 0.09);
  border-color: rgba(122, 31, 75, 0.2);
}

/* Circular Icon Badge */
.milestone-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #FDF2F5; /* Light pink/blush */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7A1F3D; /* Maroon stroke */
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.milestone-icon-badge svg {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  stroke: #7A1F3D;
  stroke-width: 2;
  transition: stroke 0.3s ease;
}

.milestone-card:hover .milestone-icon-badge {
  transform: scale(1.08);
  background-color: #7A1F3D;
  color: #FFFFFF;
}

.milestone-card:hover .milestone-icon-badge svg {
  stroke: #FFFFFF;
}

/* Title */
.milestone-card-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  color: #1A1A2E;
  margin-bottom: 10px;
  line-height: 1.35;
}

/* Issuer Name */
.milestone-issuer {
  font-size: 0.86rem;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 20px;
  flex: 1; /* Pushes year pill to bottom */
}

/* Year Pill Badge */
.milestone-year-pill {
  background-color: #FDF2F5;
  color: #7A1F3D;
  border: 1px solid rgba(122, 31, 75, 0.15);
  border-radius: 50px;
  padding: 4px 16px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-block;
  margin-top: auto;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.milestone-card:hover .milestone-year-pill {
  background-color: #7A1F3D;
  color: #FFFFFF;
}


/* STATS BAND (DARK MAROON) */
.about-stats-band {
  background-color: var(--primary);
  color: var(--text-white);
  padding: 60px 0;
  text-align: center;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.about-stat-num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-orange);
  margin-bottom: 4px;
  line-height: 1.2;
}

.about-stat-label {
  font-size: 0.9rem;
  color: var(--accent-pink-soft);
  font-weight: 500;
}

/* RESPONSIVE DESIGN - ABOUT */
@media (max-width: 1024px) {
  .legacy-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .legacy-image {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .mvv-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
    gap: 40px;
  }

  .mvv-card {
    padding: 0 !important;
    border-right: none !important;
  }
  
  .excellence-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .collage-container {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .facilities-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .about-hero-title {
    font-size: 2.4rem;
  }
  
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .about-hero {
    padding: 72px 0 72px 0;
  }
  
  .about-hero-panel-inner {
    width: min(100%, 100%);
    padding: 36px 24px 32px;
    border-radius: 20px;
  }
  
  .about-hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  
  .about-hero-eyebrow .eyebrow-line {
    width: 24px;
  }
  
  .about-hero-eyebrow .eyebrow-text {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
  
  .about-stats-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .about-stat-number {
    font-size: 2.2rem;
  }
  
  .about-stat-label {
    font-size: 0.8rem;
  }
  
  .facilities-gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .gallery-item {
    border-radius: 12px;
    height: 200px;
  }

  .legacy-desc {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .about-hero {
    padding: 60px 0 60px 0;
  }
  
  .about-hero-panel-inner {
    padding: 28px 18px 24px;
  }
  
  .about-hero-title {
    font-size: clamp(1.3rem, 4.5vw, 1.8rem);
  }
  
  .about-hero-eyebrow {
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .about-hero-eyebrow .eyebrow-line {
    width: 16px;
    height: 0.5px;
  }
  
  .about-hero-eyebrow .eyebrow-text {
    font-size: 0.6rem;
  }
  
  .about-stats-grid {
    gap: 20px;
  }
  
  .about-stat-number {
    font-size: 1.8rem;
  }
  
  .legacy-image,
  .mvv-card,
  .excellence-item {
    margin-bottom: 20px;
  }
  
  .mvv-card .icon-badge {
    width: 44px;
    height: 44px;
  }
  
  .mvv-card-title {
    font-size: 1rem;
  }
  
  .mvv-card-desc {
    font-size: 0.85rem;
  }
}

/* About Hero ECG line */
.about-hero-ecg {
  margin-top: 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

.about-hero-ecg svg {
  width: 100%;
  height: auto;
  display: block;
}

/* About hero ECG draws in on page load (same pattern as book hero) */
.about-hero-ecg .ecg-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
}

body.page-loaded .about-hero-ecg .ecg-line {
  stroke-dashoffset: 0;
}

/* LEGACY SECTION — handled entirely by animations.js (reveal-left / reveal-right)
   The old slide-in rules below are kept for backwards safety but are overridden
   when animations.js adds .reveal-left / .reveal-right which use .is-visible */
.legacy-image {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.legacy-content {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Visible when triggered by EITHER system */
.legacy-section.revealed .legacy-image,
.legacy-section.revealed .legacy-content,
.legacy-image.is-visible,
.legacy-content.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* MVV Section Icon Draw */
.mvv-card .icon-badge svg.svg-icon-draw path,
.mvv-card .icon-badge svg.svg-icon-draw circle,
.mvv-card .icon-badge svg.svg-icon-draw polyline {
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mvv-section.revealed .svg-icon-draw path,
.mvv-section.revealed .svg-icon-draw circle,
.mvv-section.revealed .svg-icon-draw polyline {
  stroke-dashoffset: 0 !important;
}

/* Stagger card stroke delay */
.mvv-grid.revealed > *:nth-child(1) .svg-icon-draw path,
.mvv-grid.revealed > *:nth-child(1) .svg-icon-draw circle,
.mvv-grid.revealed > *:nth-child(1) .svg-icon-draw polyline {
  transition-delay: 0.15s;
}
.mvv-grid.revealed > *:nth-child(2) .svg-icon-draw path,
.mvv-grid.revealed > *:nth-child(2) .svg-icon-draw circle,
.mvv-grid.revealed > *:nth-child(2) .svg-icon-draw polyline {
  transition-delay: 0.3s;
}
.mvv-grid.revealed > *:nth-child(3) .svg-icon-draw path,
.mvv-grid.revealed > *:nth-child(3) .svg-icon-draw circle,
.mvv-grid.revealed > *:nth-child(3) .svg-icon-draw polyline {
  transition-delay: 0.45s;
}

/* ==========================================================================
   COLLAGE MEDICAL DECORATION
   Animated SVG medical cross + ECG that fills the space while
   images animate in, and sits behind them as a subtle depth layer
   ========================================================================== */

.collage-container {
  position: relative;
}

.collage-medical-decor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 320px;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}

.collage-container.is-visible .collage-medical-decor {
  opacity: 1;
  animation: collageDecorFloat 7s ease-in-out 1s infinite;
}

/* The collage items sit above the decoration */
.collage-item {
  position: relative;
  z-index: 1;
}

/* Medical cross rectangles — scale in from center */
.med-cross-h,
.med-cross-v {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.collage-container.is-visible .med-cross-h {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.25s;
}

.collage-container.is-visible .med-cross-v {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.32s;
}

/* ECG line — draw left to right */
.collage-ecg {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.collage-container.is-visible .collage-ecg {
  stroke-dashoffset: 0;
  transition-delay: 0.45s;
}

/* Floating dots — gentle pulse */
.collage-decor-svg circle {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.collage-container.is-visible .collage-decor-svg circle:nth-child(4)  { opacity: 1; transition-delay: 0.55s; }
.collage-container.is-visible .collage-decor-svg circle:nth-child(5)  { opacity: 1; transition-delay: 0.62s; }
.collage-container.is-visible .collage-decor-svg circle:nth-child(6)  { opacity: 1; transition-delay: 0.69s; }
.collage-container.is-visible .collage-decor-svg circle:nth-child(7)  { opacity: 1; transition-delay: 0.76s; }
.collage-container.is-visible .collage-decor-svg circle:nth-child(8)  { opacity: 1; transition-delay: 0.83s; }
.collage-container.is-visible .collage-decor-svg circle:nth-child(9)  { opacity: 1; transition-delay: 0.90s; }

/* Ambient float on the decoration SVG after reveal — defined with .is-visible above */

@keyframes collageDecorFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50%       { transform: translate(-50%, -50%) translateY(-8px); }
}

/* ==========================================================================
   EXCELLENCE SECTION — collage & text reveal (single system)
   ========================================================================== */

/* Collage container: slide in from left */
.collage-container {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.75s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}

.collage-container.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Individual collage items reveal inside the container */
.collage-item {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.collage-container.is-visible .collage-item {
  opacity: 1;
  animation: collageCardFloat 5s ease-in-out infinite alternate;
}

/* Excellence text block: slide in from right */
.excellence-grid > div:last-child {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.75s cubic-bezier(0.25, 1, 0.5, 1) 0.18s,
              transform 0.75s cubic-bezier(0.25, 1, 0.5, 1) 0.18s;
}

.excellence-grid > div:last-child.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Gallery cards: image zoom on hover already in about.css — add reveal stagger */
.gallery-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1), transform 0.55s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;
}

.facilities-gallery-grid.revealed .gallery-card {
  opacity: 1;
  transform: translateY(0);
}

.facilities-gallery-grid.revealed .gallery-card:nth-child(1) { transition-delay: 0.05s; }
.facilities-gallery-grid.revealed .gallery-card:nth-child(2) { transition-delay: 0.14s; }
.facilities-gallery-grid.revealed .gallery-card:nth-child(3) { transition-delay: 0.23s; }
.facilities-gallery-grid.revealed .gallery-card:nth-child(4) { transition-delay: 0.32s; }

/* Values list: checkmark SVG draw-in when card is revealed */
.mvv-card.revealed .values-list li svg,
.mvv-grid.revealed .mvv-card .values-list li svg {
  stroke-dashoffset: 0 !important;
}

.values-list li svg {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mvv-grid.revealed .mvv-card:nth-child(3) .values-list li:nth-child(1) svg { transition-delay: 0.55s; }
.mvv-grid.revealed .mvv-card:nth-child(3) .values-list li:nth-child(2) svg { transition-delay: 0.67s; }
.mvv-grid.revealed .mvv-card:nth-child(3) .values-list li:nth-child(3) svg { transition-delay: 0.79s; }
.mvv-grid.revealed .mvv-card:nth-child(3) .values-list li:nth-child(4) svg { transition-delay: 0.91s; }

/* Stats band number count-up: subtle scale-in on stat numbers */
.about-stats-band {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.about-stats-band.visible {
  opacity: 1;
}

.about-stat-num {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-stats-band.visible .about-stat-num {
  animation: statNumAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.about-stats-band.visible .about-stats-grid > div:nth-child(1) .about-stat-num { animation-delay: 0.05s; }
.about-stats-band.visible .about-stats-grid > div:nth-child(2) .about-stat-num { animation-delay: 0.15s; }
.about-stats-band.visible .about-stats-grid > div:nth-child(3) .about-stat-num { animation-delay: 0.25s; }
.about-stats-band.visible .about-stats-grid > div:nth-child(4) .about-stat-num { animation-delay: 0.35s; }

@keyframes statNumAppear {
  0%   { opacity: 0; transform: translateY(10px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-image,
  .legacy-content,
  .mvv-card .icon-badge,
  .mvv-card .icon-badge svg.svg-icon-draw path,
  .mvv-card .icon-badge svg.svg-icon-draw circle,
  .mvv-card .icon-badge svg.svg-icon-draw polyline,
  .collage-container,
  .collage-item,
  .collage-medical-decor,
  .med-cross-h,
  .med-cross-v,
  .collage-ecg,
  .collage-decor-svg circle,
  .excellence-grid > div:last-child,
  .gallery-card,
  .values-list li svg,
  .about-stats-band {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .collage-container.is-visible .collage-medical-decor {
    animation: none !important;
    opacity: 0.6 !important;
  }
  .about-stats-band.visible .about-stat-num {
    animation: none !important;
  }
  .about-hero-ecg .ecg-line {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ============================================================
   HAND PORTION SIZE GUIDE (PATIENT EDUCATION SECTION)
   ============================================================ */
.hand-portion-section {
  padding: 85px 0 95px 0;
  background-color: #FAF5F7;
  position: relative;
}

.hand-portion-header {
  text-align: center !important;
  max-width: 680px;
  margin: 0 auto 48px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.hand-portion-subtitle {
  color: #F5A623;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  display: inline-block;
}

.hand-portion-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1A1A2E;
  margin-bottom: 14px;
  line-height: 1.2;
}

.hand-portion-desc {
  font-size: 0.98rem;
  color: #6B7280;
  line-height: 1.65;
}

.hand-portion-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  align-items: stretch;
}

.portion-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portion-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
}

.portion-card-carbs { border: 1.5px solid #93C5FD; }
.portion-card-fiber { border: 1.5px solid #86EFAC; }
.portion-card-proteins { border: 1.5px solid #FCA5A5; }
.portion-card-fats { border: 1.5px solid #FDE047; }

.portion-header-band {
  padding: 14px 16px;
  text-align: center;
}

.portion-header-band h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
}

.header-carbs { background-color: #BFDBFE; color: #1E3A8A; }
.header-fiber { background-color: #BBF7D0; color: #14532D; }
.header-proteins { background-color: #FECACA; color: #7F1D1D; }
.header-fats { background-color: #FDE68A; color: #78350F; }

.portion-card-body {
  padding: 24px 18px 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.hand-illustration-container {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bg-carbs-light { background-color: #EFF6FF; }
.bg-fiber-light { background-color: #F0FDF4; }
.bg-proteins-light { background-color: #FEF2F2; }
.bg-fats-light { background-color: #FFFBEB; }

.hand-svg {
  width: 95px;
  height: 95px;
}

.sublabel-band {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-heading);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: 6px;
  margin-bottom: 14px;
}

.sublabel-carbs { background-color: #DBEAFE; color: #1E40AF; }
.sublabel-fiber { background-color: #DCFCE7; color: #15803D; }
.sublabel-proteins { background-color: #FEE2E2; color: #B91C1C; }
.sublabel-fats { background-color: #FEF3C7; color: #B45309; }

.portion-guideline-text {
  font-size: 0.88rem;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 22px;
  min-height: 52px;
  text-align: center;
  width: 100%;
  padding: 0 4px;
}

.portion-guideline-text strong {
  color: #111827;
  font-weight: 700;
}

.food-section-block {
  width: 100%;
  margin-bottom: 14px;
}

.food-cat-title {
  font-family: var(--font-heading);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 8px;
}

.text-carbs { color: #2563EB; }

.food-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.food-grid-2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 8px;
}

.food-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.food-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.icon-carbs { background-color: #EFF6FF; border: 1px solid #BFDBFE; }
.icon-fiber { background-color: #F0FDF4; border: 1px solid #BBF7D0; }
.icon-proteins { background-color: #FEF2F2; border: 1px solid #FECACA; }
.icon-fats { background-color: #FFFBEB; border: 1px solid #FDE68A; }

.food-item span {
  font-size: 0.74rem;
  font-weight: 600;
  color: #4B5563;
  line-height: 1.2;
  text-align: center;
}

.hand-portion-cta {
  margin-top: 48px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.btn-portion-book {
  background-color: #7A1F3D !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
  padding: 14px 38px !important;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(122, 31, 61, 0.25);
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-portion-book:hover {
  background-color: #63143B !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(122, 31, 61, 0.38);
}

.hand-portion-credit {
  margin-top: 28px;
  text-align: center;
  font-size: 0.82rem;
  color: #6B7280;
  line-height: 1.5;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .hand-portion-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 576px) {
  .hand-portion-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .hand-portion-title {
    font-size: 2.0rem;
  }
  .portion-guideline-text {
    min-height: auto;
  }
}

/* ==========================================================================
   COUNSELING CTA BANNER SECTION
   ========================================================================== */
.counseling-cta-section {
  padding: 80px 0;
  background-color: #FFFFFF;
  border-top: 1px solid rgba(122, 31, 75, 0.08);
}

.counseling-banner-wrapper {
  background: var(--primary-gradient);
  border-radius: var(--radius-lg);
  padding: 60px 55px;
  color: var(--text-white);
  box-shadow: var(--shadow-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.counseling-banner-wrapper::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  right: -90px;
  top: -90px;
  pointer-events: none;
}

.counseling-banner-content {
  flex: 1;
  z-index: 2;
  max-width: 680px;
}

.counseling-banner-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.counseling-banner-title {
  color: var(--text-white);
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 14px;
}

.counseling-banner-subtitle {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 22px;
}

/* Quick Tags / Pills */
.counseling-banner-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.counseling-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
}

.counseling-pill-dot {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  font-size: 1rem;
}

/* ACTIONS */
.counseling-banner-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 2;
  flex-wrap: wrap;
}

.btn-counseling-primary {
  background-color: #FFFFFF;
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn-counseling-primary:hover {
  background-color: #FAFAFA;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: var(--primary);
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
  .counseling-banner-wrapper {
    flex-direction: column;
    text-align: center;
    padding: 50px 32px;
    gap: 32px;
  }
  
  .counseling-banner-content {
    max-width: 100%;
  }

  .counseling-banner-pills {
    justify-content: center;
  }

  .counseling-banner-actions {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .counseling-cta-section {
    padding: 50px 0;
  }

  .counseling-banner-wrapper {
    padding: 40px 20px;
    border-radius: 16px;
  }

  .counseling-banner-title {
    font-size: 1.85rem;
  }

  .counseling-banner-subtitle {
    font-size: 0.95rem;
  }

  .counseling-banner-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-counseling-primary,
  .counseling-banner-actions .cta-phone-btn {
    width: 100%;
    justify-content: center;
  }
}