/************************************************************
 * Prospera — content sections added from the client review
 * (documents/For the website.docx)
 *
 *   0. Hero highlights — the eight value props, directly under the hero
 *   1. Care paths      — Individual / Couples / Teen entry cards
 *   2. What is Prospera — the ecosystem positioning block
 *   3. Our values      — the 5 Cs
 *   4. What we offer   — the "Why Prospera?" list (services.html only)
 *   5. Pioneer programs
 *   6. Meet our experts — provider cards + the "See more" dialog
 *
 * Variables and type scale come from css/custom.css, which must load first.
 ************************************************************/

/************************************/
/***   0. Hero highlights css     ***/
/************************************/

/* Sits flush under the dark hero and reads as its continuation, so the eight
   value props land in the first section without crowding the slider content
   (the hero column already carries a title, body, two CTAs and a rating box). */
.hero-highlights {
  padding: 55px 0;
  background: var(--secondary-color);
}

.hero-highlights-lead {
  margin-bottom: 28px;
  font-family: var(--accent-font);
  font-size: 30px;
  line-height: 1.3em;
  color: var(--primary-color);
  text-align: center;
}

.hero-highlights-list {
  display: grid;
  /* Two columns of eight items on desktop; `minmax(0, 1fr)` (not `1fr`) so a
     long unbroken word cannot force the column wider than its share. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--white-color);
  font-size: 15px;
  line-height: 1.5em;
  color: var(--text-color);
}

.hero-highlights-list li i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 15px;
  color: var(--accent-color);
}

/************************************/
/***      1. Care paths css       ***/
/************************************/

.care-paths {
  padding: 100px 0;
}

/* The brand colour is both the card background -- what shows if the photo
   fails or has not decoded yet -- and the tint the photo is graded into, so
   the two are declared once as an rgb triplet rather than twice. */
.care-path-card {
  --care-path-tint: 13, 59, 102;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: 35px 30px;
  border-radius: 20px;
  overflow: hidden;
  background: rgb(var(--care-path-tint));
  color: var(--white-color);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.care-path-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(13, 59, 102, 0.18);
}

.care-path-card.care-path-couples {
  --care-path-tint: 47, 168, 160;
}

.care-path-card.care-path-teen {
  --care-path-tint: 212, 162, 76;
}

/* Client photography, one per audience. It fills the card and sits behind
   everything else; the label is white, so the photo alone would not carry
   enough contrast under it and the ::after scrim below supplies the rest. */
.care-path-card .care-path-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.6s ease;
}

.care-path-card:hover .care-path-photo {
  transform: scale(1.05);
}

/* The scrim: the card colour, opaque where the text sits and clearing towards
   the top so the photograph is still read as a photograph. Without it the
   three cards would lose the navy/teal/gold identity the section is built on. */
.care-path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--care-path-tint), 0.92) 0%,
    rgba(var(--care-path-tint), 0.72) 45%,
    rgba(var(--care-path-tint), 0.35) 100%
  );
  pointer-events: none;
}

/* Both sit above the photo and its scrim. */
.care-path-card h3,
.care-path-card .care-path-link {
  position: relative;
  z-index: 1;
}

.care-path-card h3 {
  font-family: var(--accent-font);
  font-size: 34px;
  color: var(--white-color);
  margin-bottom: 12px;
}

.care-path-card .care-path-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--white-color);
}

.care-path-card .care-path-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  font-size: 11px;
  transition: transform 0.3s ease;
}

.care-path-card:hover .care-path-link i {
  transform: translateX(4px);
}

body.rtl .care-path-card .care-path-link i {
  transform: scaleX(-1);
}

body.rtl .care-path-card:hover .care-path-link i {
  transform: scaleX(-1) translateX(4px);
}

/************************************/
/***   2. What is Prospera css    ***/
/************************************/

.what-is-prospera {
  padding: 100px 0;
}

.what-is-prospera .prospera-lead {
  font-size: 20px;
  line-height: 1.6em;
  color: var(--primary-color);
  margin-bottom: 25px;
}

.prospera-highlight-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 35px;
}

.prospera-highlight {
  flex: 1 1 240px;
  padding: 25px;
  border-radius: 16px;
  background: var(--secondary-color);
}

.prospera-highlight .icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 18px;
}

.prospera-highlight h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.prospera-highlight p {
  margin: 0;
}

/* Counter strip. `.facts-counter-*` itself is already styled in custom.css;
   this only supplies the section wrapper the template never shipped. */
.our-results {
  padding: 100px 0 60px;
}

.our-results .facts-counter-box {
  padding-top: 50px;
}

/************************************/
/***      3. Our values css       ***/
/************************************/

.our-values {
  padding: 100px 0;
}

.our-values .values-tagline {
  font-family: var(--accent-font);
  font-size: 26px;
  font-style: italic;
  color: var(--accent-color);
  margin-top: 15px;
}

.value-item {
  height: 100%;
  padding: 30px;
  border-radius: 16px;
  background: var(--white-color);
  border-top: 3px solid var(--accent-color);
  box-shadow: 0 8px 24px rgba(13, 59, 102, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.value-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(13, 59, 102, 0.12);
}

.value-item:nth-child(2n) {
  border-top-color: var(--gold-color);
}

.value-item:nth-child(3n) {
  border-top-color: var(--primary-color);
}

.value-item .value-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 700;
}

.value-item h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--primary-color);
}

.value-item p {
  margin: 0;
}

/************************************/
/***    4. What we offer css      ***/
/************************************/

.what-we-offer {
  padding: 100px 0;
}

.offer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 22px 25px;
  border-radius: 14px;
  background: var(--secondary-color);
  line-height: 1.5em;
}

.offer-list li i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent-color);
  font-size: 16px;
}

/************************************/
/***  5. Pioneer programs css     ***/
/************************************/

.pioneer-programs {
  padding: 100px 0;
}

.program-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 40px;
  border-radius: 20px;
  background: var(--secondary-color);
  border-inline-start: 4px solid var(--accent-color);
}

.program-card-content {
  flex: 1 1 320px;
}

.program-card .program-badge {
  display: inline-block;
  margin-bottom: 15px;
  padding: 7px 16px;
  border-radius: 30px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.program-card h3 {
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--primary-color);
}

.program-card p {
  margin: 0;
}

.program-card-action {
  flex: 0 0 auto;
}

/************************************/
/***        Responsive css        ***/
/************************************/

@media only screen and (max-width: 991px) {
  .our-results {
    padding: 70px 0 40px;
  }

  .care-paths,
  .what-is-prospera,
  .our-values,
  .what-we-offer,
  .pioneer-programs {
    padding: 70px 0;
  }

  .care-path-card {
    min-height: 200px;
    margin-bottom: 20px;
  }

  .hero-highlights {
    padding: 45px 0;
  }

  .hero-highlights-lead {
    font-size: 26px;
  }

  .value-item {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .offer-list,
  .hero-highlights-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .care-path-card h3 {
    font-size: 28px;
  }

  .our-values .values-tagline {
    font-size: 21px;
  }

  .program-card {
    padding: 30px 25px;
  }
}

/************************************/
/***   6. Meet our experts css    ***/
/************************************/

.our-experts {
  padding: 100px 0;
}

/* Default state in the markup. js/providers.js removes this only once at
   least one provider has loaded, so a failed or empty fetch leaves no empty
   band between the care paths and the testimonials. */
.our-experts.experts-hidden {
  display: none;
}

.our-experts .section-title p {
  max-width: 640px;
  margin-inline: auto;
}

.expert-card {
  height: 100%;
  margin-bottom: 25px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--white-color);
  border: 1px solid var(--divider-color);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(13, 59, 102, 0.12);
}

.expert-card-photo {
  /* Fixed ratio so a portrait and a landscape upload produce the same card. */
  aspect-ratio: 1 / 1;
  background: var(--secondary-color);
  overflow: hidden;
}

.expert-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* The fallback is the Prospera mark, not a portrait — contain it and let it
   sit on the brand tint instead of cropping a logo to fill a square. */
.expert-card-photo-placeholder img {
  object-fit: contain;
  padding: 22%;
  opacity: 0.55;
}

.expert-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 24px;
}

.expert-card-name {
  font-size: 20px;
  line-height: 1.35em;
  margin-bottom: 10px;
  color: var(--primary-color);
}

/* The two-line bio the client asked for. The full text stays in the DOM —
   this only limits what is painted, so "See more" has something more to show
   and screen readers still get the whole thing. */
.expert-card-bio {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6em;
}

.expert-card-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-color);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s ease;
}

.expert-card-more:hover {
  color: var(--primary-color);
}

.experts-message {
  text-align: center;
  margin: 0;
}

/*** "See more" dialog ***/

.expert-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 32, 56, 0.62);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  /* Dialog.open() unsets [hidden] and adds `is-open` on the next frame, so the
     closed state has to be the default here for the fade to have somewhere to
     animate from. Same contract as .svc-modal-overlay. */
  opacity: 0;
  transition: opacity 0.25s ease;
}

.expert-modal-overlay[hidden] {
  display: none;
}

.expert-modal-overlay.is-open {
  opacity: 1;
}

.expert-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 34px 32px 32px;
  border-radius: 20px;
  background: var(--white-color);
  box-shadow: 0 30px 70px rgba(8, 32, 56, 0.32);
  text-align: center;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.expert-modal-overlay.is-open .expert-modal {
  transform: none;
}

.expert-modal__close {
  position: absolute;
  top: 14px;
  /* Logical property: flips with the page for the Arabic RTL layout. */
  inset-inline-end: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--secondary-color);
  color: var(--primary-color);
  cursor: pointer;
  transition: background 0.3s ease;
}

.expert-modal__close:hover {
  background: var(--divider-color);
}

.expert-modal__photo {
  width: 110px;
  height: 110px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--secondary-color);
}

.expert-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.expert-modal__name {
  font-size: 26px;
  line-height: 1.3em;
  margin-bottom: 16px;
  color: var(--primary-color);
}

.expert-modal__bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.7em;
  text-align: start;
}

.expert-modal__bio-empty {
  text-align: center;
  opacity: 0.75;
}

.expert-modal__actions {
  margin-top: 26px;
}

.expert-modal__cv i {
  margin-inline-end: 8px;
}

/* RTL: custom.css:7116 sets `body.rtl p, body.rtl h1..h6 { text-align: right }`,
   which outranks a bare class selector and would right-align the handful of
   elements above that are deliberately centred in both directions. Headings
   inside .section-title are left alone on purpose — the eyebrow h3 is
   right-aligned in Arabic everywhere else on the site, and matching that is
   the point. These selectors lead with `body.rtl` only to clear that rule. */
body.rtl .hero-highlights-lead,
body.rtl .our-experts .section-title p,
body.rtl .experts-message,
body.rtl .expert-modal__name,
body.rtl .expert-modal__bio-empty {
  text-align: center;
}

/* The home preview's link through to experts.html. Uses .btn-default for the
   button itself, so only the placement is new here.
   Markup: js/providers-render.js moreActionHtml. */
.experts-actions {
  margin-top: 44px;
  text-align: center;
}

/* The eight check-marks, reused as the answer to FAQ 2 (see about.html). Same
   marks as the home page, set smaller and in one column: this sits inside an
   accordion body, not across the top of a landing page. */
.faq-points {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.faq-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.6em;
  color: var(--text-color);
}

.faq-points li i {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent-color);
}

@media only screen and (min-width: 992px) {
  /* Eight items in one column is a long scroll inside an accordion; two
     columns match how the same eight read on the home page. */
  .faq-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
  }
}

/* Call or Chat under the home page's services grid. Markup: index.html,
   "Section Footer Text". */
.section-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.section-footer-actions .btn-default {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Call is the outlined one of the pair, so the two do not read as the same
   button twice. .btn-default supplies the shape; only the fill changes. */
.section-footer-actions .btn-call {
  background: transparent;
  color: var(--primary-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}

.section-footer-actions .btn-call:hover,
.section-footer-actions .btn-call:focus-visible {
  background: var(--accent-color);
  color: var(--white-color);
}

.btn-call-number {
  font-variant-numeric: tabular-nums lining-nums;
  opacity: 0.85;
}

@media only screen and (max-width: 575px) {
  /* Side by side, the number breaks across two lines at this width. */
  .section-footer-actions .btn-default {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * Advisory board banner (experts.html)
 *
 * A single supplied artwork, shown above the team grid. It is the page's first
 * content, so `width`/`height` are on the <img> and the aspect-ratio is set
 * here: between them the browser reserves the right box before the 259KB
 * decodes, and the grid underneath does not jump down when it arrives.
 *
 * The 30px radius is the same one .bg-section uses on every other card, so the
 * banner reads as part of the page rather than pasted onto it.
 * ------------------------------------------------------------------------- */

.advisory-board {
  padding: 80px 0 0;
}

.advisory-board-figure {
  margin: 0;
  /* Its own width, not the container's: on a wide screen a 1448px artwork
     stretched across 1300px would be upscaled and soft. */
  max-width: 1000px;
  margin-inline: auto;
  border-radius: 30px;
  overflow: hidden;
}

.advisory-board-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 1086;
}

@media only screen and (max-width: 767px) {
  .advisory-board {
    padding-top: 50px;
  }

  /* A 30px radius on a phone-width image eats into the artwork's own corner
     shapes, which run right to the edge of the design. */
  .advisory-board-figure {
    border-radius: 18px;
  }
}