/* story.css - styles for Our Story page specific sections */

/* Shared scale for the page's major section titles. These are the values the
   established titles already render at ("Get to know us", "The CAFS Home",
   "Our Values", "Our Vision"): 3.2rem at every breakpoint, line-height 1.1.
   "Our Framework" and "Our Team" reference these tokens so they stay part of
   the same heading system instead of carrying their own sizes. */
:root {
  --section-title-size: 3.2rem;
  --section-title-line-height: 1.1;
}

/* Story-specific overrides and additions */

/* About Section */
.about-section {
  background: #fff7ef;
  padding: 60px 0 30px 0;
}
.about-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto 40px auto;
  gap: 40px;
}
.about-container.reverse {
  flex-direction: row-reverse;
}
.about-image img {
  width: 320px;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.about-content {
  max-width: 420px;
}
.about-content h2 {
  font-family: 'Amatic SC', cursive;
  font-size: 2.5rem;
  color: #12a89c;
  margin-bottom: 10px;
}
.about-content p {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Values Section */
.values-section {
  background: #fff;
  padding: 60px 0 30px 0;
}
.values-header {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto 30px auto;
  gap: 40px;
}
.values-image img {
  width: 260px;
  height: 180px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}
.values-content h2 {
  font-family: 'Amatic SC', cursive;
  font-size: 2.3rem;
  color: #12a89c;
  margin-bottom: 10px;
}
.values-content p {
  font-size: 1.1rem;
  line-height: 1.6;
}
.values-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.value-card {
  background: #fff7ef;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 32px 28px;
  width: 210px;
  text-align: center;
  transition: transform 0.2s;
}
.value-card:hover {
  transform: translateY(-6px) scale(1.03);
}
.value-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.value-card h3 {
  font-family: 'Amatic SC', cursive;
  font-size: 1.5rem;
  color: #12a89c;
  margin-bottom: 8px;
}
.value-card p {
  font-size: 1rem;
  color: #444;
}

/* Vision Section */
.vision-section {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
  padding: clamp(44px, 6vw, 56px) 0 clamp(36px, 5vw, 48px) 0;
}
.mision-section {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 0 0 48px 0;
}
.vision-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  gap: 32px;
  padding: 0 clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}

.vision-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 36rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.vision-content h2 {
  font-family: 'Amatic SC', cursive;
  font-size: 3.2rem;
  color: #12a89c;
  margin-bottom: 14px;
  width: 100%;
  text-align: center;
  line-height: 1.1;
}
.vision-main {
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  margin-bottom: 0;
  color: #222;
  font-family: 'Zain', cursive;
  line-height: 1.55;
  text-align: center;
  max-width: 100%;
}
.vision-content ul {
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 18px;
  line-height: 1.7;
  color: #222;
  font-family: 'Zain', cursive;
}
.vision-content li {
  margin-bottom: 10px;
}
.vision-image {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 350px;
  max-width: 600px;
  margin-left: 32px;
}
.vision-image img {
  width: 100%;
  height: 100%;
  max-width: 500px;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
.vision-image-wide {
  width: 100%;
  max-width: 1400px;
  margin: 32px auto 0 auto;
  display: flex;
  justify-content: center;
}
.vision-image-wide img {
  width: 80vw;
  max-width: 100%;
  height: 35vh;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
@media (max-width: 1100px) {
  .vision-container {
    flex-direction: column;
    gap: 32px;
    padding: 32px 0 0 0;
    align-items: center;
  }
  .vision-image, .vision-content {
    width: 100%;
    max-width: 100%;
  }
  .vision-image {
    margin-left: 0;
    min-width: 0;
  }
  .vision-image img, .vision-image-wide img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .vision-image-wide img {
    height: clamp(160px, 50vw, 220px);
    object-fit: cover;
    object-position: center center;
  }
}

/* Vision section — mobile/tablet spacing */
@media (max-width: 900px) {
  .vision-section {
    padding: clamp(52px, 7vw, 64px) 0 clamp(44px, 5.5vw, 54px) 0;
  }

  .vision-container {
    padding: 0 16px;
    gap: 20px;
  }

  .vision-image-wide {
    margin: 24px auto 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .vision-section {
    padding: clamp(48px, 8vw, 58px) 0 clamp(40px, 5vw, 48px) 0;
  }

  .vision-container {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .vision-section {
    padding: clamp(40px, 9vw, 52px) 0 clamp(36px, 7vw, 46px) 0;
  }

  .vision-container {
    padding: 0 12px;
    gap: 14px;
  }

  .vision-image-wide {
    margin-top: 18px;
    padding: 0 12px;
  }
}

/* Framework Section */
.framework-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  transform: none;
  box-sizing: border-box;
  overflow-x: clip;
  background: #FFF2DF;
  padding: 32px 24px 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.framework-heading {
  text-align: center;
  font-family: 'Amatic SC', cursive;
  font-size: var(--section-title-size);
  line-height: var(--section-title-line-height);
  color: #12A89C;
  margin-bottom: 32px;
}
.framework-img-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.framework-zoom-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 24px;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
.framework-zoom-trigger:focus-visible {
  outline: 3px solid #12A89C;
  outline-offset: 4px;
}
.framework-img-container img,
.framework-zoom-trigger img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.framework-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  background: rgba(0, 0, 0, 0.88);
}
.framework-zoom-overlay.is-open {
  display: block;
}
.framework-zoom-stage {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 24px;
  box-sizing: border-box;
}
.framework-zoom-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.framework-zoom-close {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 4001;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #12A89C;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.framework-zoom-close:hover,
.framework-zoom-close:focus-visible {
  background: #0D948A;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .framework-section {
    padding: 28px 20px 48px 20px;
  }

  .framework-heading {
    margin-bottom: 24px;
  }
}

/* Our Model intro — white section directly before story cards (not Our Values) */
.our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) {
  min-height: auto;
  padding: clamp(8px, 1.5vw, 16px) clamp(16px, 3vw, 32px) clamp(4px, 1vw, 12px);
}

.our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) .our-values-container {
  margin-bottom: 0;
  padding: 0;
  gap: 12px;
}

.our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) .our-values-content {
  max-width: 36rem;
  width: 100%;
  min-height: auto;
  margin: 0 auto;
}

.our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) .our-values-content h2 {
  margin-bottom: 12px;
}

.our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) .our-values-content p {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) {
    padding: 20px 16px 8px 16px;
  }

  .our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) .our-values-container {
    gap: 10px;
  }

  .our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) .our-values-content {
    max-width: 100%;
    width: 100%;
  }

  .our-values-section[style*="255, 255, 255"]:has(+ .story-card-section) .our-values-content p {
    max-width: 36rem;
  }
}

/* Desktop — Our Values cards → Our Vision → THE CAFS MODEL rhythm */
@media (min-width: 1024px) {
  .story-card-section:not(.model-card-section) > .card-section:first-child {
    padding-top: 48px;
    padding-bottom: 32px;
    min-height: auto;
    align-items: center;
  }

  .story-card-section:not(.model-card-section) > .vision-section {
    padding: clamp(72px, 5vw, 84px) 0 clamp(56px, 4vw, 68px) 0;
  }

  .story-card-section:not(.model-card-section) > .vision-section .vision-container {
    padding: 0 32px;
  }

  .story-card-section:not(.model-card-section) > .vision-section .vision-content {
    max-width: 68rem;
  }

  .story-card-section:not(.model-card-section) > .vision-section .vision-main {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 66rem;
    margin-left: auto;
    margin-right: auto;
  }

  .story-card-section:not(.model-card-section) > .our-values-section[style*="255, 255, 255"] {
    min-height: auto;
    padding: 10px 32px 24px;
  }

  .story-card-section:not(.model-card-section) > .our-values-section[style*="255, 255, 255"] .our-values-container {
    margin-bottom: 0;
    padding: 0;
    gap: 8px;
  }

  .story-card-section:not(.model-card-section) > .our-values-section[style*="255, 255, 255"] .our-values-content {
    max-width: 68rem;
    width: 100%;
    min-height: auto;
    margin: 0 auto;
    text-align: left;
  }

  .story-card-section:not(.model-card-section) > .our-values-section[style*="255, 255, 255"] .our-values-content h2 {
    margin-bottom: 10px;
    text-align: center;
  }

  .story-card-section:not(.model-card-section) > .our-values-section[style*="255, 255, 255"] .our-values-content p {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .story-card-section:not(.model-card-section) > .our-values-section[style*="255, 255, 255"] .model-components-list {
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .story-card-section.model-card-section > .card-section {
    min-height: auto;
    align-items: center;
    padding: 32px 24px 44px;
  }
}

/* Our Values — cream intro + first value-cards block only */
.our-values-section[style*="FFF2DF"]:has(+ .story-card-section):not(:has(.our-values-image-stack)) {
  min-height: auto;
}

.our-values-section[style*="FFF2DF"]:has(+ .story-card-section) + .story-card-section > .card-section:first-child {
  min-height: auto;
  align-items: center;
}

@media (max-width: 900px) {
  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section):not(:has(.our-values-image-stack)) {
    padding: 32px 16px 8px 16px;
  }

  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section):not(:has(.our-values-image-stack)) .our-values-container {
    max-width: 100%;
    padding: 0;
    gap: 12px;
  }

  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section):not(:has(.our-values-image-stack)) .our-values-content {
    max-width: 100%;
    width: 100%;
    min-height: auto;
  }

  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section):not(:has(.our-values-image-stack)) .our-values-content p {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
  }

  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section) + .story-card-section > .card-section:first-child {
    padding: 8px 16px 48px 16px;
    box-sizing: border-box;
  }

  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section) + .story-card-section > .card-section:first-child .card-container {
    gap: 20px;
    padding: 0;
  }

  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section) + .story-card-section > .card-section:first-child .card-img-container img {
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .our-values-section[style*="FFF2DF"]:has(+ .story-card-section) + .story-card-section > .card-section:first-child .card-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    justify-items: center;
    max-width: 680px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .framework-section {
    padding: 28px 16px 44px 16px;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .framework-section {
    padding: 24px 16px 36px 16px;
  }
}

.framework-section h2 {
  font-family: 'Amatic SC', cursive;
  font-size: var(--section-title-size);
  line-height: var(--section-title-line-height);
  color: #12a89c;
  margin-bottom: 30px;
}

@media (max-width: 900px) {
  .framework-section .framework-heading {
    margin-bottom: 24px;
  }
}
.framework-diagram {
  position: relative;
  width: 500px;
  height: 320px;
  margin: 0 auto;
}
.framework-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #12a89c;
  color: #fff;
  font-family: 'Amatic SC', cursive;
  font-size: 2rem;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  z-index: 2;
}
.framework-item {
  position: absolute;
  width: 170px;
  background: #fff;
  color: #12a89c;
  border-radius: 12px;
  padding: 16px 10px;
  font-size: 1rem;
  font-family: 'Zain', Arial, sans-serif;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  z-index: 1;
}
.framework-item-1 { top: 10px; left: 50%; transform: translateX(-50%); }
.framework-item-2 { top: 60px; right: 0; }
.framework-item-3 { bottom: 60px; right: 0; }
.framework-item-4 { bottom: 10px; left: 50%; transform: translateX(-50%); }
.framework-item-5 { top: 60px; left: 0; }

/* Team Section */
.team-section {
  background: #fff;
  margin-top: 48px;
  padding: 60px 0 60px 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.team-section h2 {
  font-family: 'Amatic SC', cursive;
  font-size: var(--section-title-size);
  line-height: var(--section-title-line-height);
  color: #12a89c;
  margin-bottom: 30px;
}

.team-group {
  width: 100%;
  margin-bottom: 44px;
}

.team-group:last-of-type {
  margin-bottom: 8px;
}

/* Each category heading sits in its own coloured badge so the three groups
   are told apart at a glance. All three backgrounds are drawn from the
   existing CAFS palette, deepened so white label text stays legible:
     CAFS Team            #0b7d75  brand teal  #12a89c, deepened   4.99:1
     CAFS-ASHA Team       #a35c00  brand orange #ff9801, deepened  5.14:1
     External Consultants #33565f  deep slate from the teal family 7.96:1
   Each ratio is white-on-background and clears 4.5:1, well above the 3:1
   required at this display size. Keyed off data-team-group, which mirrors the
   CMS enum, so no extra markup is needed and the colours hold at every
   breakpoint. Only the background differs between the three; shape, size,
   padding and type are identical. */
.team-group[data-team-group="CAFS Team"] {
  --team-heading-color: #0b7d75;
}

.team-group[data-team-group="CAFS-ASHA Team"] {
  --team-heading-color: #a35c00;
}

.team-group[data-team-group="External Consultants"] {
  --team-heading-color: #33565f;
}

/* Category heading badge. Shrink-wraps its text rather than spanning the
   section, and borrows the site's existing pill language (32px radius, the
   same proportions as .see-story / .consult-btn) so it reads as part of the
   CAFS system. Capped below the rail width so the longest label, "External
   Consultants", never touches the screen edge or forces the block wide. */
.team-group-heading {
  display: inline-block;
  box-sizing: border-box;
  font-family: 'Amatic SC', cursive;
  font-size: 2.05rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--team-heading-color, #0b7d75);
  border-radius: 32px;
  padding: 10px 32px;
  margin: 0 0 24px 0;
  max-width: calc(100% - 32px);
}

.team-empty-message {
  width: 100%;
  opacity: 0.7;
  margin: 0 auto 16px auto;
}

.team-modal-qualifications {
  font-size: 0.95rem !important;
  color: #555 !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
}

/* Team rails.
   Each category owns one rail. initTeamCarousel() measures it and applies
   exactly one mode class:
     .is-static  - the row fits, so it is centred and still (no clones)
     .is-marquee - the row overflows on a fine pointer, so it auto-scrolls
                   at a constant px/sec over a JS-measured loop distance
     .is-manual  - the row overflows on touch / narrow / reduced-motion, so
                   it becomes a native scroll-snap rail (no clones)
   Card width comes from --team-card-w so no distance is ever hardcoded. */
.team-carousel-container {
  --team-card-w: 320px;
  --team-rail-gap: 0px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.team-carousel-track {
  display: flex;
  gap: var(--team-rail-gap);
  width: max-content;
  margin: 0 auto;
}

.team-carousel-container.is-static .team-carousel-track {
  animation: none;
  transform: none;
}

.team-carousel-container.is-marquee .team-carousel-track {
  margin: 0;
  animation: teamMarquee var(--team-marquee-duration, 40s) linear infinite;
  will-change: transform;
}

/* Rails alternate direction so the three categories separate visually.
   Playing the same keyframes in reverse moves the track rightwards at the
   identical duration, so the speed is unchanged. The loop stays seamless
   because both ends of the keyframe show the same content: the originals at
   offset 0 and their identical clone run at -loopDistance. Card order in the
   DOM is untouched, so the profile sequence still reads first to last. */
.team-carousel-container.is-marquee.is-reversed .team-carousel-track {
  animation-direction: reverse;
}

/* Per-rail pause: keyboard focus, open modal and hidden tab set .is-paused.
   Hover pause is mouse-only so sticky :hover cannot freeze a touch rail. */
.team-carousel-container.is-marquee.is-paused .team-carousel-track {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .team-carousel-container.is-marquee:hover .team-carousel-track {
    animation-play-state: paused;
  }
}

@keyframes teamMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--team-marquee-offset, 0), 0, 0); }
}

/* Native scroll rails. Both modes are real scroll containers so the finger
   always has direct control. Autoplay clones the original run and wraps by
   adding or subtracting the measured loop distance — direction never flips.
   Reduced-motion stays clone-free. */
.team-carousel-container.is-manual,
.team-carousel-container.is-autoscroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 16px;
  padding-right: 16px;
  scroll-padding-left: 16px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.team-carousel-container.is-manual::-webkit-scrollbar,
.team-carousel-container.is-autoscroll::-webkit-scrollbar {
  display: none;
}

.team-carousel-container.is-manual .team-carousel-track,
.team-carousel-container.is-autoscroll .team-carousel-track {
  margin: 0;
  animation: none;
  transform: none;
}

.team-carousel-container.is-manual .team-member,
.team-carousel-container.is-autoscroll .team-member {
  scroll-snap-align: start;
}

/* Reduced motion: nothing drifts, so snapping can be firm and every swipe
   settles cleanly on a card. */
.team-carousel-container.is-manual {
  scroll-snap-type: x mandatory;
}

/* Autoplay advances scrollLeft by about a pixel per frame. Chrome resolves
   snapping against those writes and pins the rail to the nearest card, which
   measured as a hard stop at 0 under both `mandatory` and `proximity`
   (scrollLeft = 50 read back as 0). Snap type is therefore off while a rail
   is drifting; the snap-align points stay declared on the cards so the
   reduced-motion rail keeps using them. Swiping remains fully native, and the
   card peek still shows where the rail continues. */
.team-carousel-container.is-autoscroll {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Reduced motion: JS already routes every overflowing rail to .is-manual,
   this is the belt-and-braces guarantee that nothing auto-scrolls and that
   every card stays reachable by scrolling. */
@media (prefers-reduced-motion: reduce) {
  .team-carousel-track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  .team-member,
  .team-member img,
  .team-img-container {
    transition: none;
  }

  .team-member:hover {
    transform: none;
  }

  .team-member:hover img {
    transform: none;
  }
}

/* Bounded card: a long name or designation can never widen it, so the
   measured loop distance stays valid. */
.team-member {
  background: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 var(--team-card-w);
  width: var(--team-card-w);
  max-width: var(--team-card-w);
  min-width: 0;
  padding: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  box-sizing: border-box;
}

.team-member:hover {
  transform: translateY(-8px);
  background: rgba(18, 168, 156, 0.05);
}

.team-img-container {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #12a89c;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(18, 168, 156, 0.3);
}

/* Member name: same family and colour as before, one clear step below the
   category heading in size, and no longer a heading element. */
.team-member-name {
  font-family: 'Amatic SC', cursive;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: #12a89c;
  margin: 0 0 6px 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Designation: capped at two lines so one long title cannot inflate the
   height of an entire rail. Full text stays in the modal. */
.team-member-role {
  font-size: 1rem;
  color: #666;
  font-weight: 500;
  max-width: 100%;
  text-align: center;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* links in pop up members */
/* Modal Links Container */
.team-modal-links {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* Links */
.team-modal-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
  background-color: #f2f2f2;
}

/* Icon inside link */
.team-modal-links a i {
  font-size: 16px;
}

/* Hover effect */
.team-modal-links a:hover {
  background-color: #0077b5; /* example hover color */
  color: #fff;
}

/* Individual icon colors */
#modalMemberLinkedIn i { color: #0077b5; }
#modalMemberORiC i { color: #ff6600; }
#modalMemberResearchGate { display: inline-flex; }
#modalMemberTwitter i { color: #1da1f2; }
#modalMemberEmail i { color: #333; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.carousel-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff7ef;
  border: 2px solid #12a89c;
  display: inline-block;
  transition: background 0.2s;
}

.carousel-dots .dot.active {
  background: #12a89c;
}

/* Team Modal Styles */
.team-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.team-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.team-modal-container {
  background: #fff;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  transform: scale(0.7);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.team-modal-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.team-modal-overlay.active .team-modal-container {
  transform: scale(1);
}

.team-modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 1;
}

.team-modal-close:hover {
  background: #f0f0f0;
  color: #333;
}

.team-modal-content {
  padding: 40px 30px 28px 30px;
  text-align: left;
}

.team-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
  text-align: left;
}

.team-modal-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #12a89c;
}

.team-modal-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.team-modal-info h2 {
  font-family: 'Amatic SC', cursive;
  font-size: 1.8rem;
  color: #12a89c;
  margin: 0 0 8px 0;
  line-height: 1.15;
  text-align: left;
}

.team-modal-info p {
  font-size: 1.05rem;
  color: #666;
  margin: 0;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.team-modal-body {
  overflow-wrap: anywhere;
  text-align: left;
}

.team-modal-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: #444;
  margin: 0 0 18px 0;
  white-space: pre-line;
  text-align: left;
}

.team-modal-links {
  margin-top: 4px;
}

.team-modal-book {
  display: inline-block;
  margin-top: 18px;
}

.team-modal-scroll-hint-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0.82) 100%);
  pointer-events: none;
  z-index: 2;
}

.team-modal-scroll-hint-wrap.is-hidden {
  display: none;
}

.team-modal-scroll-hint-wrap.is-visible {
  display: flex;
  pointer-events: none;
}

.team-modal-scroll-hint {
  pointer-events: auto;
  border: none;
  background: rgba(18, 168, 156, 0.1);
  color: #12a89c;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.team-modal-scroll-hint:hover {
  background: rgba(18, 168, 156, 0.18);
}

.team-modal-scroll-hint svg {
  animation: teamModalScrollHintBounce 1.6s ease-in-out infinite;
}

@keyframes teamModalScrollHintBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* Responsive styles for team section.
   Card width is a bounded step per breakpoint; below 768px it is a share of
   the viewport capped at 320px so exactly one card plus a peek of the next
   is visible and the rail can never be wider than the screen. */
@media (max-width: 1199px) {
  .team-carousel-container {
    --team-card-w: 300px;
  }
}

@media (max-width: 767px) {
  .team-carousel-container {
    --team-card-w: min(78vw, 320px);
  }
}

@media (max-width: 768px) {
  .team-member {
    padding: 15px;
  }

  .team-img-container {
    width: 120px;
    height: 120px;
  }

  .team-group {
    margin-bottom: 36px;
  }

  .team-group-heading {
    font-size: 1.75rem;
    padding: 9px 26px;
    margin-bottom: 18px;
  }

  .team-member-name {
    font-size: 1.4rem;
  }

  .team-member-role {
    font-size: 0.9rem;
  }

  .team-modal-container {
    width: 95%;
    max-width: 400px;
  }
  
  .team-modal-content {
    padding: 30px 20px 24px 20px;
  }
  
  .team-modal-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .team-modal-info,
  .team-modal-info h2,
  .team-modal-info p {
    text-align: center;
  }
  
  .team-modal-avatar img {
    width: 70px;
    height: 70px;
  }
  
  .team-modal-info h2 {
    font-size: 1.6rem;
  }
  
  .team-modal-info p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .team-member {
    padding: 12px;
  }

  .team-img-container {
    width: 100px;
    height: 100px;
  }

  .team-group-heading {
    font-size: 1.6rem;
    padding: 8px 20px;
    max-width: calc(100% - 24px);
  }

  .team-modal-container {
    width: 98%;
    max-width: 350px;
  }
  
  .team-modal-content {
    padding: 25px 15px 22px 15px;
  }

  .team-modal-body p {
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

/* Get to know us — match main section title scale (overrides shared responsive shrink) */
.get-to-know .get-to-know-content h2 {
  font-size: 3.2rem;
  line-height: 1.1;
  color: rgba(18, 168, 156, 1);
}

/* Get to know us — tablet/mobile: title above image, no duplicate heading */
@media (max-width: 1024px) {
  .get-to-know .get-to-know-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .get-to-know .get-to-know-content {
    display: contents;
  }

  .get-to-know .get-to-know-content h2 {
    display: block !important;
    order: 1;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
  }

  .get-to-know .get-to-know-icon {
    order: 2;
  }

  .get-to-know .get-to-know-content .zain-font {
    order: 3;
    width: 100%;
    max-width: 36rem;
  }

  .get-to-know .get-to-know-content .see-story,
  .get-to-know .get-to-know-content #fullStoryBtn {
    order: 4;
  }
}

/*
 * CAFS Home section chrome only.
 * Layout, padding, gaps, and breakpoints come from shared .get-to-know-* classes
 * on the same nodes (see story.php) — same responsive path as Get to Know Us.
 * HTML order is content then image → text left / image right on desktop rows.
 */
.cafs-home-section {
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0 40px 0;
  min-height: 60vh;
  box-sizing: border-box;
}

/* Section title scale (same as Get to Know Us story override) */
.cafs-home-section .get-to-know-content h2,
.cafs-home-section .cafs-home-content h2 {
  font-family: 'Zeyada', cursive;
  font-size: 3.2rem;
  line-height: 1.1;
  margin-bottom: 18px;
  color: rgba(18, 168, 156, 1);
}

/*
 * Keep this section’s image as a cover card (Get to Know Us uses object-fit: contain
 * on .get-to-know-img site-wide). Layout box still follows .get-to-know-icon rules.
 */
.cafs-home-section .cafs-home-img,
.cafs-home-section .get-to-know-img.cafs-home-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  display: block;
}

.cafs-home-section .get-to-know-icon.cafs-home-icon {
  aspect-ratio: 600 / 400;
  border-radius: 32px;
  overflow: hidden;
}

/*
 * Tablet/mobile stack — same strategy as Get to Know Us on this page:
 * column container, content uses display:contents so heading / image / copy / CTA
 * share one flex stack with balanced width (max-width 36rem on body copy).
 * Order: heading → image → paragraph → button (matches Get to Know Us stack).
 */
@media (max-width: 1024px) {
  .cafs-home-section {
    padding: 64px 0 48px 0;
    min-height: 60vh;
  }

  .cafs-home-section .get-to-know-container,
  .cafs-home-section .cafs-home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cafs-home-section .get-to-know-content,
  .cafs-home-section .cafs-home-content {
    display: contents;
  }

  .cafs-home-section .get-to-know-content h2,
  .cafs-home-section .cafs-home-content h2 {
    display: block !important;
    order: 1;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
  }

  .cafs-home-section .get-to-know-icon,
  .cafs-home-section .cafs-home-icon {
    order: 2;
  }

  .cafs-home-section .get-to-know-content .zain-font,
  .cafs-home-section .cafs-home-content .zain-font {
    order: 3;
    width: 100%;
    max-width: 36rem;
    text-align: center;
  }

  .cafs-home-section .get-to-know-content .see-story,
  .cafs-home-section .cafs-home-content .see-story {
    order: 4;
    align-self: center;
  }
}

@media (max-width: 768px) {
  .cafs-home-section {
    padding: 48px 0 32px 0;
    min-height: auto;
  }

  /*
   * Shared mobile rules hide `.get-to-know-content h2` in favour of a
   * mobile-only title. CAFS Home has no such duplicate — keep the h2 visible.
   */
  .cafs-home-section .get-to-know-content h2,
  .cafs-home-section .cafs-home-content h2 {
    display: block !important;
    text-align: center;
    width: 100%;
  }
}

/* Our Values Section - perfect horizontal alignment */
.our-values-section {
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 0 32px 0;
  min-height: 30vh;
}
.our-values-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 64px;
  width: 100%;
  max-width: 1400px;
}
.our-values-image-stack {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.our-values-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 420 / 280;
  background: #FFF7EF;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.our-values-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-left: 0;
  margin-right: 18px;
  height: 100%;
}
.our-values-dots .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFA500;
  opacity: 0.6;
  transition: opacity 0.2s, box-shadow 0.2s, border 0.2s;
  box-shadow: 0 1px 4px rgba(255,165,0,0.18);
  border: 2px solid #fff3d1;
  cursor: pointer;
}
.our-values-dots .dot.active {
  opacity: 1;
  box-shadow: 0 2px 8px rgba(255,165,0,0.25);
  border: 2px solid #FFA500;
}
.our-values-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  max-width: 80%;
  min-height: 220px;
}
.our-values-content h2 {
  font-family: 'Zeyada', cursive;
  font-size: 3.2rem;
  margin-bottom: 18px;
  color: rgba(18, 168, 156, 1);
}
.our-values-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.5s cubic-bezier(.4,0,.2,1);
  transform: translateY(100%);
}
.our-values-img.active {
  opacity: 1;
  z-index: 2;
  transform: translateY(0);
  pointer-events: auto;
}
.our-values-img.slide-out {
  opacity: 0;
  z-index: 1;
  transform: translateY(-100%);
  transition: opacity 0.3s, transform 0.5s cubic-bezier(.4,0,.2,1);
}
@media (max-width: 900px) {
  .our-values-section {
    padding: 32px 0 18px 0;
    min-height: 30vh;
  }
  .our-values-container {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    max-width: 98vw;
  }
  .our-values-image-stack {
    flex-direction: row;
    gap: 10px;
  }
  .our-values-image-wrapper {
    width: 90vw;
    max-width: 360px;
    height: 180px;
  }
  .our-values-content {
    align-items: center;
    text-align: center;
    max-width: 98vw;
    min-height: unset;
  }
}

/* Responsive Design */
@media (max-width: 900px) {
  .about-container, .values-header, .vision-container {
    flex-direction: column;
    gap: 24px;
  }
  .framework-diagram {
    width: 100%;
    min-width: 320px;
    height: 420px;
  }
}
@media (max-width: 600px) {
  .about-section, .values-section, .mision-section, .team-section {
    padding: 32px 0 18px 0;
  }

  .framework-section {
    padding: 28px 16px 44px 16px;
    box-sizing: border-box;
  }
  .about-image img, .values-image img, .vision-image img, .vision-image-wide img {
    width: 100%;
    height: auto;
    min-width: 0;
  }
  .framework-diagram {
    width: 100%;
    min-width: 0;
    height: 520px;
  }
  .team-carousel {
    flex-direction: column;
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .framework-section {
    padding: 24px 16px 36px 16px;
  }
}

.go-to-top {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.go-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.go-to-top svg circle {
  fill: rgba(255, 179, 0, 0.25);
  transition: fill 0.2s;
}
.go-to-top:hover svg circle {
  fill: #FFB300;
}
.go-to-top svg path {
  stroke: #fff;
}
.go-to-top svg {
  display: block;
}
@media (max-width: 600px) {
  .go-to-top {
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
  }
  .go-to-top svg {
    width: 32px;
    height: 32px;
  }
} 

.whatsapp-float {
  position: fixed;
  right: 32px;
  bottom: 60px;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: none;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
@media (max-width: 600px) {
  .whatsapp-float {
    right: 12px;
    bottom: 50px;
    width: 48px;
    height: 48px;
  }
  .whatsapp-float svg {
    width: 48px;
    height: 48px;
  }
} 

.story-card-section .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
  padding-bottom: 32px;
}
.story-card-section .card-img-container {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 0;
  position: static;
  box-shadow: none;
}
.story-card-section .card-teal-bg {
  background: #12A89C;
}
.story-card-section .card-orange-bg {
  background: #FF9801;
}
.story-card-section .card-img-container img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.story-card-section .card h3 {
  font-family: 'Zeyada', cursive;
  font-size: 3rem;
  margin-top: 18px;
  margin-bottom: 18px;
  color: #fff;
  text-align: center;
  width: 100%;
}
.story-card-section .card-img-safety {
  margin-top: 30px !important;
}
.story-card-section .card-img-compassion, .story-card-section .card-img-enrichment {
  margin-top: 0px !important;
}
.story-card-section .card-img-compassion + h3, .story-card-section .card-img-enrichment + h3 {
  margin-top: 8px !important;
}
@media (max-width: 900px) {
  .story-card-section .card-img-container {
    width: 90px;
    height: 90px;
    margin-top: 8px;
  }
  .story-card-section .card-img-container img {
    max-width: 100%;
    max-height: 100%;
  }
  .story-card-section .card h3 {
    margin-top: 14px;
  }
  .story-card-section .card {
    padding-top: 8px;
    padding-bottom: 24px;
  }
} 

.story-card-section .card-section {
  min-height: 50vh;
  display: flex;
  align-items: center;
}
.story-card-section .card-container {
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding-top: 0;
  padding-bottom: 0;
}
.story-card-section .card {
  margin-top: auto;
  margin-bottom: auto;
} 

/* Mental Illness Section */
.mental-illness-section {
  background: #FFF7EF;
  padding: 80px 0;
}

.mental-illness-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "icon intro"
    "icon lower";
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}

.mental-illness-intro {
  grid-area: intro;
}

.mental-illness-lower {
  grid-area: lower;
}

.mental-illness-lower ul {
  margin-top: 0;
}

.mental-illness-icon {
  grid-area: icon;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.mental-illness-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.face-icon {
  position: relative;
  width: 200px;
  height: 200px;
}

.face-outline {
  width: 100%;
  height: 100%;
  border: 4px solid #12A89C;
  border-radius: 50%;
  position: relative;
}

.face-outline::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40%;
  border: 3px solid #12A89C;
  border-top: none;
  border-radius: 0 0 50% 50%;
}



.mental-illness-content h2 {
  font-family: 'Zeyada', cursive;
  font-size: 3.5rem;
  color: #12A89C;
  margin-bottom: 16px;
  line-height: 1.2;
}

.mental-illness-content h3 {
  font-family: 'Zeyada', cursive;
  font-size: 2rem;
  color: #12A89C;
  margin-bottom: 24px;
  line-height: 1.2;
}

.mental-illness-content p {
  font-family: 'Zain', cursive;
  font-size: 1.2rem;
  color: #444;
  margin-bottom: 16px;
  line-height: 1.6;
}

.mental-illness-content ul {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.mental-illness-content li {
  font-family: 'Zain', cursive;
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}

.mental-illness-content li::before {
  content: '•';
  color: #FF9801;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.mental-illness-additional {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
}

.mental-illness-additional p {
  font-family: 'Zain', cursive;
  font-size: 1.2rem;
  color: #444;
  margin-bottom: 16px;
  line-height: 1.6;
  text-align: center;
}

/* Mental Illness Section — mobile / small tablet stack */
@media (max-width: 900px) {
  .mental-illness-section {
    padding: 48px 0 32px 0;
  }

  .mental-illness-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "icon"
      "lower";
    gap: 28px;
    padding: 0 24px;
    margin-bottom: 32px;
    align-items: center;
  }

  .mental-illness-icon {
    justify-content: center;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .mental-illness-content {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .mental-illness-content h2 {
    font-size: 2.4rem;
    text-align: center;
  }

  .mental-illness-content h3 {
    font-size: 1.6rem;
    text-align: center;
  }

  .mental-illness-additional {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .mental-illness-container {
    padding: 0 20px;
    gap: 24px;
  }

  .mental-illness-content h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  .mental-illness-section {
    padding: 40px 0 28px 0;
  }

  .mental-illness-container {
    padding: 0 16px;
    gap: 20px;
    margin-bottom: 24px;
  }

  .mental-illness-icon {
    max-width: 220px;
  }

  .mental-illness-content h2 {
    font-size: 1.9rem;
    line-height: 1.25;
  }

  .mental-illness-content h3 {
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .mental-illness-content p,
  .mental-illness-content li {
    font-size: 1rem;
    line-height: 1.65;
  }

  .mental-illness-additional {
    padding: 0 16px;
  }

  .mental-illness-additional p {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* Story hero — bg/overlay sizing (story.php only; shared .hero-bg uses min-height: 100vh) */
@media (max-width: 900px) {
  section.hero .hero-bg,
  section.hero .hero-overlay {
    min-height: 0 !important;
    height: 100% !important;
  }
}

/*
 * img/4.JPG has a dark blurred strip on the far right.
 * Shift the cover crop left so that edge is clipped on desktop/tablet.
 */
section.hero .hero-bg {
  object-fit: cover;
  object-position: 22% 48%;
}

@media (max-width: 1024px) {
  section.hero .hero-bg {
    object-position: 18% 46%;
  }
}

/* Story hero — mobile title typography (story.php only; overrides shared 2.6rem !important) */
@media (max-width: 768px) {
  section.hero .hero-content h1 {
    font-size: clamp(1.7rem, 1.25rem + 2.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  section.hero .hero-bg {
    object-fit: cover !important;
    object-position: 16% 45% !important;
  }
}

@media (max-width: 480px) {
  section.hero .hero-bg {
    object-position: 32% 42% !important;
  }
}

/* Story Modal Styles */
.story-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}



.story-modal-container {
  background: #fff;
  border-radius: 32px;
  max-width: 800px;
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.8) translateY(40px) rotateX(10deg);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  border: 2px solid #12A89C;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.story-modal-overlay.active .story-modal-container {
  transform: scale(1) translateY(0) rotateX(0deg);
  opacity: 1;
}



.story-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #12A89C 0%, #0D948A 100%);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(18, 168, 156, 0.3);
  transform: scale(0.8) rotate(90deg);
  opacity: 0;
}

.story-modal-overlay.active .story-modal-close {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  transition-delay: 0.2s;
}



.story-modal-close:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(18, 168, 156, 0.4);
}

.story-modal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.story-modal-header {
  background: linear-gradient(135deg, #12A89C 0%, #0D948A 100%);
  color: #fff;
  padding: 32px 40px 24px 40px;
  text-align: center;
  position: relative;
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-modal-overlay.active .story-modal-header {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.1s;
}

.story-modal-overlay.closing .story-modal-header {
  transform: translateY(-20px);
  opacity: 0;
  transition-delay: 0s;
}

.story-modal-header h2 {
  font-family: 'Amatic SC', cursive;
  font-size: 2.5rem;
  margin: 0;
  font-weight: 700;
}

.story-modal-body {
  flex: 1;
  padding: 32px 40px 40px 40px;
  overflow-y: auto;
  background: #f8f9fa;
  position: relative;
  min-height: 0;
}

.story-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-modal-overlay.active .story-section {
  transform: translateY(0);
  opacity: 1;
}

.story-modal-overlay.active .story-section:nth-child(1) { transition-delay: 0.2s; }
.story-modal-overlay.active .story-section:nth-child(2) { transition-delay: 0.3s; }
.story-modal-overlay.active .story-section:nth-child(3) { transition-delay: 0.4s; }
.story-modal-overlay.active .story-section:nth-child(4) { transition-delay: 0.5s; }
.story-modal-overlay.active .story-section:nth-child(5) { transition-delay: 0.6s; }
.story-modal-overlay.active .story-section:nth-child(6) { transition-delay: 0.7s; }
.story-modal-overlay.active .story-section:nth-child(7) { transition-delay: 0.8s; }
.story-modal-overlay.active .story-section:nth-child(8) { transition-delay: 0.9s; }
.story-modal-overlay.active .story-section:nth-child(9) { transition-delay: 1.0s; }



.story-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.story-section h3 {
  font-family: 'Amatic SC', cursive;
  font-size: 1.8rem;
  color: #12A89C;
  margin-bottom: 16px;
  font-weight: 700;
}

.story-section p {
  font-family: 'Zain', cursive;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #222;
  margin-bottom: 16px;
}

.story-section p:last-child {
  margin-bottom: 0;
}

.story-section blockquote {
  margin: 0 0 16px 0;
  padding: 0 0 0 16px;
  border-left: 3px solid #12A89C;
}

.story-section blockquote p {
  font-style: italic;
}

.story-section blockquote p:last-child {
  margin-bottom: 0;
}

/* Scrollbar styling for modal content */
.story-modal-body::-webkit-scrollbar {
  width: 8px;
}

.story-modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.story-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #12A89C 0%, #0D948A 100%);
  border-radius: 4px;
}

.story-modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0D948A 0%, #12A89C 100%);
}

/* Responsive Design for Modal */
@media (max-width: 900px) {
  .story-modal-container {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 24px;
  }
  
  .story-modal-header {
    padding: 24px 24px 20px 24px;
  }
  
  .story-modal-header h2 {
    font-size: 2rem;
  }
  
  .story-modal-body {
    padding: 24px 24px 32px 24px;
  }
  
  .story-modal-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
  
  .story-section h3 {
    font-size: 1.6rem;
  }
  
  .story-section p {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  .story-modal-overlay {
    padding: 10px;
  }
  
  .story-modal-container {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 20px;
  }
  
  .story-modal-header {
    padding: 20px 20px 16px 20px;
  }
  
  .story-modal-header h2 {
    font-size: 1.8rem;
  }
  
  .story-modal-body {
    padding: 20px 20px 28px 20px;
  }
  
  .story-modal-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
  
  .story-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }
  
  .story-section h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  
  .story-section p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
} 

/* Story Modal Go to Top Button */
.story-modal-go-to-top {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.3s, visibility 0.3s, background 0.2s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.story-modal-go-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.story-modal-go-to-top svg circle {
  fill: rgba(18, 168, 156, 0.25);
  transition: fill 0.2s;
}

.story-modal-go-to-top:hover svg circle {
  fill: #12A89C;
}

.story-modal-go-to-top svg path {
  stroke: #fff;
}

.story-modal-go-to-top svg {
  display: block;
}

@media (max-width: 600px) {
  .story-modal-go-to-top {
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
  }
  .story-modal-go-to-top svg {
    width: 32px;
    height: 32px;
  }
} 

/* Flip Card Styles for Story Page */
.flip-card {
  perspective: 1000px;
  background: transparent !important;
  width: 350px !important;
  height: 350px !important;
}

.model-card-section {
  overflow-x: clip;
}

.model-card-section > .card-section {
  min-height: auto;
  align-items: center;
  padding: 32px 24px 48px;
  box-sizing: border-box;
}

.model-card-section .card-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 48px 40px !important;
  column-gap: 40px !important;
  row-gap: 48px !important;
  width: 100% !important;
  max-width: 1130px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.model-card-section .flip-card {
  width: 350px !important;
  max-width: 350px !important;
  height: 420px !important;
  min-height: 420px !important;
  flex: 0 0 350px !important;
  margin: 0 !important;
}

@media (max-width: 1199px) {
  .model-card-section > .card-section {
    padding: 28px 20px 40px;
  }

  .model-card-section .card-container {
    max-width: 680px !important;
    gap: 32px 24px !important;
    column-gap: 24px !important;
    row-gap: 32px !important;
  }

  .model-card-section .flip-card {
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
    height: 400px !important;
    min-height: 400px !important;
  }
}

@media (max-width: 767px) {
  .model-card-section > .card-section {
    padding: 24px 16px 36px;
  }

  .model-card-section .card-container {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    max-width: 100% !important;
    gap: 24px !important;
    column-gap: 0 !important;
    row-gap: 24px !important;
  }

  .model-card-section .flip-card {
    width: min(280px, calc(100vw - 32px)) !important;
    max-width: min(280px, calc(100vw - 32px)) !important;
    flex: 0 0 auto !important;
    height: 420px !important;
    min-height: 420px !important;
  }
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.flip-card-front {
  background: #12A89C;
  color: #fff;
}

.flip-card-back {
  background: #12A89C;
  color: #fff;
  transform: rotateY(180deg);
  border: 2px solid #12A89C;
}

/* Orange specific styles */
.flip-card.card-orange .flip-card-front {
  background: #FF9801;
  color: #fff;
}

.flip-card.card-orange .flip-card-back {
  background: #FF9801;
  color: #fff;
  border: 2px solid #FF9801;
}

/* Responsive adjustments for flip cards */
@media (max-width: 1200px) {
  .flip-card {
    width: 320px !important;
    height: 320px !important;
  }
}

@media (max-width: 900px) {
  .flip-card {
    width: 300px !important;
    height: 300px !important;
  }
}

@media (max-width: 600px) {
  .flip-card {
    width: 280px !important;
    height: 280px !important;
  }
  
  .flip-card-front, .flip-card-back {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .flip-card {
    width: 260px !important;
    height: 260px !important;
  }
}

.card-section-model {
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 0 64px 0;
  box-shadow: none;
}

/* THE CAFS MODEL — intro bullet list */
.our-values-section .model-components-list {
  list-style: disc;
  list-style-position: outside;
  text-align: left;
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding-left: 1.5rem;
  padding-right: 0.5rem;
  box-sizing: border-box;
}

.our-values-section .model-components-list li {
  margin-bottom: 5px;
  line-height: 1.45;
}

/* THE CAFS MODEL — scoped flip-card backs (scrollable long copy) */
.model-card-section .flip-card-back {
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 16px;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.model-card-section .flip-card-back::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.model-card-section .flip-card-front {
  justify-content: center;
  padding: 16px 14px;
}

.model-card-section .flip-card-front h3 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.15;
  margin: 0;
  text-align: center;
}

.model-card-section .flip-card-back p {
  font-family: 'Zain', cursive;
  font-size: 0.88rem;
  line-height: 1.38;
  color: #fff;
  text-align: center;
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
}

.model-card-section .flip-card-back p + ul {
  margin-top: 2px;
}

.model-card-section .flip-card-back > :first-child {
  margin-top: auto;
}

.model-card-section .flip-card-back > :last-child {
  margin-bottom: auto;
}

.model-card-section .flip-card-back ul {
  list-style: disc;
  list-style-position: outside;
  display: inline-block;
  text-align: left;
  padding-left: 1.2rem;
  padding-right: 0.25rem;
  margin: 0 auto 6px;
  max-width: 100%;
  box-sizing: border-box;
}

.model-card-section .flip-card-back li {
  font-family: 'Zain', cursive;
  font-size: 0.85rem;
  line-height: 1.38;
  color: #fff;
  margin-bottom: 5px;
  padding-left: 0.15rem;
}

.model-card-section .flip-card-back li:last-child {
  margin-bottom: 0;
}

/* THE CAFS MODEL — keep long back copy reachable on tablet/mobile */
@media (max-width: 1199px) {
  .model-card-section .flip-card-back {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .model-card-section .flip-card {
    width: 300px !important;
    height: 400px !important;
    min-height: 400px !important;
  }
  .our-values-section .model-components-list {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 0.5rem;
    margin-bottom: 8px;
  }

  .model-card-section .flip-card-front h3 {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  }

  .model-card-section .flip-card-back {
    padding: 16px 14px;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
  }

  .model-card-section .flip-card-back p {
    font-size: 0.86rem;
    line-height: 1.4;
  }

  .model-card-section .flip-card-back li {
    font-size: 0.84rem;
    line-height: 1.4;
  }
}

@media (max-width: 600px) {
  .model-card-section .flip-card {
    width: 280px !important;
    height: 420px !important;
    min-height: 420px !important;
  }
}

@media (max-width: 480px) {
  .model-card-section .flip-card {
    width: 260px !important;
    height: 440px !important;
    min-height: 440px !important;
  }
  .our-values-section .model-components-list {
    padding-left: 1.25rem;
    padding-right: 0.5rem;
    margin-bottom: 12px;
  }

  .model-card-section .flip-card-front {
    padding: 12px 11px;
  }

  .model-card-section .flip-card-front h3 {
    font-size: 1.2rem;
  }

  .model-card-section .flip-card-back {
    padding: 14px 12px;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
  }

  .model-card-section .flip-card-back p {
    font-size: 0.84rem;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .model-card-section .flip-card-back ul {
    padding-left: 1.1rem;
    margin-left: auto;
    margin-right: auto;
  }

  .model-card-section .flip-card-back li {
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 4px;
  }
}