/**
 * RC102 / The Soul Thrive Clinic — Native Services Overview visual identity.
 * Brand source: "الهيكل العام للموقع.docx".
 * Deliberately restricted to main.as-services-page.as-overview; avoids header,
 * footer, Elementor, and CBT / ACT / Hypnosis details.
 * Loaded AFTER assets/css/services.css, not a shared root-level reset.
 */
main.as-services-page.as-overview {
  --as-navy: #0B2C59;
  --as-blue: #1469E8;
  --as-blue-2: #398CFF;
  --as-sky: #D9F0FF;
  --as-sky-2: #ECF8FF;
  --as-text: #214365;
  --as-muted: #4F6D8C;
  --as-line: #DFEAF5;
  --as-green: #39B995;
  --as-violet: #FF806F;
  --as-white: #FFFFFF;
  --as-shadow: 0 17px 43px rgba(23, 69, 114, .10);
  --as-radius: 23px;
  --as-overview-cream: #FFF1DE;
  --as-overview-coral: #FF806F;
  --as-overview-gold: #F6BD4A;
  color: var(--as-text);
  background: #FFFEFC;
}

/* The introductory hero stays airy; only its existing background is revised. */
main.as-services-page.as-overview > .as-overview-hero {
  background:
    radial-gradient(ellipse at 16% 18%, rgba(255,255,255,.80), transparent 39%),
    linear-gradient(112deg, #D9F0FF 0%, #EAF8FF 57%, #FFF1DE 100%);
  border-bottom: 0;
}
main.as-services-page.as-overview .as-overview-hero .as-hero-copy h1 {
  color: #0B2C59;
}
main.as-services-page.as-overview .as-overview-hero .as-lead {
  color: #3A5B7D;
}
main.as-services-page.as-overview .as-overview-hero .as-eyebrow {
  color: #1469E8;
}
main.as-services-page.as-overview .as-overview-doctor-frame {
  background: linear-gradient(160deg, rgba(255,255,255,.89), rgba(217,240,255,.86));
  box-shadow: inset 0 0 0 1px rgba(20,105,232,.19), 0 18px 45px rgba(13,62,110,.08);
}

/* Alternating sky and cream surfaces from the approved brand reference. */
main.as-services-page.as-overview > #main-pathways {
  background: linear-gradient(180deg, #FFF1DE 0%, #FFF8EF 100%);
}
main.as-services-page.as-overview > .as-section-soft {
  background: linear-gradient(145deg, #D9F0FF 0%, #ECF8FF 100%);
}
main.as-services-page.as-overview > .as-section:nth-of-type(4) {
  background: linear-gradient(180deg, #FFFEFC 0%, #FFF5E8 100%);
}
main.as-services-page.as-overview > .as-cta-section {
  background: linear-gradient(180deg, #FFF5E8 0%, #E9F7FF 100%);
  padding-top: 30px;
  padding-bottom: 86px;
}
main.as-services-page.as-overview .as-section-heading {
  max-width: 815px;
  margin-bottom: 48px;
}
main.as-services-page.as-overview .as-section-heading h2 {
  color: #0B2C59;
  letter-spacing: -.015em;
}
main.as-services-page.as-overview .as-section-heading p {
  color: #507091;
}
main.as-services-page.as-overview .as-kicker,
main.as-services-page.as-overview .as-eyebrow {
  color: #1469E8;
}

/* Service cards: white surfaces with distinctive blue, green and coral accents. */
main.as-services-page.as-overview .as-service-grid {
  gap: 23px;
}
main.as-services-page.as-overview .as-service-card {
  border: 1px solid #E3EAF1;
  border-radius: 26px;
  padding: 30px 26px 26px;
  background: #FFFFFF;
  box-shadow: 0 18px 43px rgba(21, 72, 115, .10);
}
main.as-services-page.as-overview .as-service-card::before {
  height: 6px;
}
main.as-services-page.as-overview .as-tone-blue { --tone: #1469E8; }
main.as-services-page.as-overview .as-tone-green { --tone: #39B995; }
main.as-services-page.as-overview .as-tone-violet { --tone: #FF806F; }
main.as-services-page.as-overview .as-service-card:hover {
  box-shadow: 0 23px 51px rgba(17,68,113,.15);
}
main.as-services-page.as-overview .as-icon-badge {
  width: 82px;
  height: 82px;
  font-size: 46px;
  border-radius: 23px;
  background: #E3F0FF;
  color: #1469E8;
}
main.as-services-page.as-overview .as-tone-green .as-icon-badge {
  background: #E0F7EF;
  color: #219C76;
}
main.as-services-page.as-overview .as-tone-violet .as-icon-badge {
  background: #FFE6E0;
  color: #E76B5C;
}
main.as-services-page.as-overview .as-card-title-wrap h3 {
  color: #0B2C59;
}
main.as-services-page.as-overview .as-abbr {
  color: #1469E8;
  background: #E9F4FF;
}
main.as-services-page.as-overview .as-mini-paths { border-top-color: #E7EDF5; }
main.as-services-page.as-overview .as-mini-path:hover { background: #EAF6FF; }

/* Steps: clear, touch-friendly icons; keep all steps clickable as before. */
main.as-services-page.as-overview .as-step-grid { gap: 19px; }
main.as-services-page.as-overview .as-step-card {
  border-radius: 24px;
  padding: 30px 26px;
  background: #FFFFFF;
  border: 1px solid #DBE8F5;
  box-shadow: 0 16px 38px rgba(22,76,121,.09);
}
main.as-services-page.as-overview .as-step-card:nth-child(1) { --step-tint:#FFE6E0; --step-ink:#D96355; }
main.as-services-page.as-overview .as-step-card:nth-child(2) { --step-tint:#E3F0FF; --step-ink:#1469E8; }
main.as-services-page.as-overview .as-step-card:nth-child(3) { --step-tint:#E0F7EF; --step-ink:#219C76; }
main.as-services-page.as-overview .as-step-icon {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  font-size: 40px;
  background: var(--step-tint, #E3F0FF);
  color: var(--step-ink, #1469E8);
}
main.as-services-page.as-overview .as-step-number {
  width: 35px;
  height: 35px;
  background: var(--step-tint, #E3F0FF);
  color: var(--step-ink, #1469E8);
}
main.as-services-page.as-overview .as-step-card h3 { color: #0B2C59; }
main.as-services-page.as-overview .as-step-card:hover { border-color: #98C8F9; }

/* Purpose cards use the full brand accent palette, never dull grey tiles. */
main.as-services-page.as-overview .as-choice-grid { gap: 21px; }
main.as-services-page.as-overview .as-choice-card {
  border-radius: 24px;
  padding: 32px 24px;
  border: 1px solid #E3EAF2;
  background: #FFFFFF;
  box-shadow: 0 12px 33px rgba(19,74,121,.07);
}
main.as-services-page.as-overview .as-choice-card .as-choice-icon {
  width: 77px;
  height: 77px;
  border-radius: 22px;
  font-size: 40px;
}
main.as-services-page.as-overview .as-choice-card:nth-child(1) .as-choice-icon { background: #E3F0FF; color: #1469E8; }
main.as-services-page.as-overview .as-choice-card:nth-child(2) .as-choice-icon { background: #FFF0C9; color: #B57C0B; }
main.as-services-page.as-overview .as-choice-card:nth-child(3) .as-choice-icon { background: #DDF7EC; color: #249E78; }
main.as-services-page.as-overview .as-choice-card h3 { color: #0B2C59; }

/* Bright blue is the primary action; keep CTA markup and navigation intact. */
main.as-services-page.as-overview .as-btn-primary {
  background: #1469E8;
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(20,105,232,.21);
}
main.as-services-page.as-overview .as-btn-ghost {
  color: #1469E8;
  background: #FFFFFF;
  border-color: #A9CFFF;
}
main.as-services-page.as-overview .as-cta {
  background: linear-gradient(120deg, #0B55BF 0%, #1469E8 63%, #2389ED 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 53px rgba(20,105,232,.20);
}
main.as-services-page.as-overview .as-cta .as-kicker { color: #E3F2FF; }
main.as-services-page.as-overview .as-cta .as-kicker::before { background: #E3F2FF; }
main.as-services-page.as-overview .as-cta-actions .as-btn-white {
  background: #FFFFFF;
  color: #0C55C2;
  border-color: #FFFFFF;
}
main.as-services-page.as-overview .as-cta-actions .as-btn-outline-white {
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.83);
  background: rgba(255,255,255,.08);
}
main.as-services-page.as-overview .as-cta-actions .as-btn-outline-white:hover { background: rgba(255,255,255,.18); }
main.as-services-page.as-overview a:focus-visible,
main.as-services-page.as-overview button:focus-visible {
  outline: 3px solid #FF806F;
  outline-offset: 4px;
}

/* The overview's existing "Start Here" dialog, not shared site modals. */
main.as-services-page.as-overview .as-modal-dialog { border: 1px solid #DAEAF6; }
main.as-services-page.as-overview .as-modal-option { border-color: #D8E8F8; }
main.as-services-page.as-overview .as-modal-option:hover { border-color: #1469E8; background: #F2F9FF; }

@media (max-width: 980px) {
  main.as-services-page.as-overview .as-service-grid,
  main.as-services-page.as-overview .as-choice-grid { gap: 16px; }
  main.as-services-page.as-overview .as-icon-badge { width: 72px; height: 72px; font-size: 40px; }
}
@media (max-width: 700px) {
  main.as-services-page.as-overview > .as-cta-section { padding-top: 15px; padding-bottom: 52px; }
  main.as-services-page.as-overview .as-section-heading { margin-bottom: 27px; }
  main.as-services-page.as-overview .as-service-card { padding: 24px 20px; }
  main.as-services-page.as-overview .as-step-card { padding: 23px 20px; }
  main.as-services-page.as-overview .as-step-icon { width: 64px; height: 64px; font-size: 35px; }
  main.as-services-page.as-overview .as-choice-card { padding: 24px 17px; }
  main.as-services-page.as-overview .as-choice-card .as-choice-icon { width: 65px; height: 65px; font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  main.as-services-page.as-overview .as-service-card,
  main.as-services-page.as-overview .as-step-card { transition: none; }
}


/* RC103 — Services Overview Hero only: match the approved homepage portrait.
 * The existing Home hero portrait is a 1:1 photograph WITH the clinic wordmark.
 * Unlike the legacy transparent full-body artwork, it must be covered by one
 * rounded surface, not a second inset frame or a translated/cropped cutout.
 * Scoped to the Overview template; NEVER affects CBT / ACT / Hypnosis heroes.
 */
main.as-services-page.as-overview > .as-overview-hero .as-hero-grid {
  grid-template-columns: minmax(0, 1.09fr) minmax(0, .91fr);
  gap: clamp(23px, 3.8vw, 65px);
}
main.as-services-page.as-overview > .as-overview-hero .as-overview-doctor-visual {
  display: block;
  position: relative;
  isolation: isolate;
  align-self: center;
  justify-self: center;
  width: min(100%, 520px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 105, 232, .18);
  border-radius: 27px;
  background: #A7D2EE;
  box-shadow: 0 23px 52px rgba(20, 72, 122, .18);
}
main.as-services-page.as-overview > .as-overview-hero .as-overview-doctor-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  pointer-events: none;
}
main.as-services-page.as-overview > .as-overview-hero .as-overview-doctor-visual > img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  transform: none;
}
@media (max-width: 980px) {
  main.as-services-page.as-overview > .as-overview-hero .as-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  main.as-services-page.as-overview > .as-overview-hero .as-overview-doctor-visual {
    width: min(100%, 520px);
  }
}
@media (max-width: 760px) {
  main.as-services-page.as-overview > .as-overview-hero .as-overview-doctor-visual {
    border-radius: 23px;
  }
}
@media (max-width: 480px) {
  main.as-services-page.as-overview > .as-overview-hero .as-overview-doctor-visual {
    border-radius: 20px;
  }
}