/* ============================================================
   CST Academy — ABA Outcomes pages
   Extends the home component library (home1/cst-home-base.css).
   Page wrapper carries BOTH .cst-home-page (base tokens + components:
   .stats-row/.stat, .hiw-steps, .section-head, .btn, .bg-navy, .wrap ...)
   and .cst-outcomes-page (these outcomes-only extras).
   Accent: brand blue gradient (per client edits — was teal/green).
   The --teal/--green var names are kept only to avoid touching every usage;
   both now hold brand blues so all gradients/markers read blue.
   ============================================================ */
.cst-outcomes-page { --teal: #3B7EAB; --green: #1B4E77; }

/* Section vertical rhythm (base is 40px; hero + disclaimer keep their own padding) */
.cst-outcomes-page section { padding: 60px 0; }

/* Eyebrow (gradient) */
.cst-outcomes-page .eyebrow {
  display: inline-block;
  font-family: 'Quicksand', 'Poppins', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--teal), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 30px;
}

/* Hero eyebrow as a filled pill badge: light blue background, dark blue text */
.cst-outcomes-page .o-hero .eyebrow {
  padding: 8px 18px; border-radius: 999px;
  background: #DEEFF9; color: #163A4C;
  -webkit-text-fill-color: #163A4C;
  -webkit-background-clip: border-box; background-clip: border-box;
}

/* Hero: photo background + navy overlay, split (copy left, form card right) */
.cst-outcomes-page .o-hero { position: relative; background: var(--navy); color: #fff; padding: 56px 0; overflow: hidden; }
.cst-outcomes-page .o-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("aba-therapy-outcomes.webp") center/cover no-repeat; }
.cst-outcomes-page .o-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(22,58,76,0.95) 0%, rgba(22,58,76,0.82) 50%, rgba(22,58,76,0.60) 100%); }
.cst-outcomes-page .o-hero .wrap { position: relative; z-index: 1; }
.cst-outcomes-page .o-hero-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.cst-outcomes-page .o-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.15; margin: 0; max-width: 20ch; }
.cst-outcomes-page .o-hero .lede { color: rgba(255,255,255,0.92); font-size: 18px; line-height: 1.6; max-width: 56ch; margin: 18px 0 0; }
.cst-outcomes-page .o-hero .big-number { margin-top: 22px; }
@media (min-width: 1000px) {
  .cst-outcomes-page .o-hero { padding: 72px 0; }
  .cst-outcomes-page .o-hero-grid { grid-template-columns: 1.05fr 0.92fr; gap: 56px; }
}

/* Smooth-scroll for the "Schedule a Tour" buttons that jump to #hero-form (offset clears the fixed header). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.cst-outcomes-page #hero-form { scroll-margin-top: 110px; }
@media (max-width: 700px) { .cst-outcomes-page #hero-form { scroll-margin-top: 90px; } }

/* Hero form card (Gravity Form 29 — same form as the PPC page) */
.cst-outcomes-page .o-hero-form { background: #fff; border-radius: var(--radius-card); box-shadow: 0 18px 50px rgba(0,0,0,0.28); padding: 26px 26px 22px; color: var(--navy); }
.cst-outcomes-page .o-hero-form-head { margin-bottom: 14px; }
.cst-outcomes-page .o-hero-form-head h2 { color: var(--navy); font-size: 22px; line-height: 1.2; margin: 0; }
.cst-outcomes-page .o-hero-form-head p { margin: 6px 0 0; font-size: 15px; color: var(--body); }
/* Hide the Gravity Forms honeypot/hidden fields (GF's own CSS that hides these is disabled here) */
.cst-outcomes-page .o-hero-form .gform_validation_container,
.cst-outcomes-page .o-hero-form li.gfield.gform_validation_container,
.cst-outcomes-page .o-hero-form .gfield_visibility_hidden { display: none !important; }
.cst-outcomes-page .o-hero-form .gform_fields { display: grid; gap: 12px; grid-template-columns: 1fr; }
.cst-outcomes-page .o-hero-form .gfield { margin: 0; }
.cst-outcomes-page .o-hero-form .gform_heading { display: none; }
.cst-outcomes-page .o-hero-form .gfield_label { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--navy); margin: 0 0 5px; }
.cst-outcomes-page .o-hero-form input[type=text],
.cst-outcomes-page .o-hero-form input[type=email],
.cst-outcomes-page .o-hero-form input[type=tel],
.cst-outcomes-page .o-hero-form input[type=number],
.cst-outcomes-page .o-hero-form select,
.cst-outcomes-page .o-hero-form textarea {
  width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--card-border);
  border-radius: 10px; padding: 13px 16px; font-family: 'Poppins', sans-serif; font-size: 15px;
  color: var(--body); min-height: 48px; line-height: 1.3;
}
.cst-outcomes-page .o-hero-form select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23163A4C' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.cst-outcomes-page .o-hero-form input:focus, .cst-outcomes-page .o-hero-form select:focus, .cst-outcomes-page .o-hero-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,126,171,0.18); }
.cst-outcomes-page .o-hero-form .gform_footer { padding: 0; margin: 8px 0 0; }
.cst-outcomes-page .o-hero-form input[type=submit], .cst-outcomes-page .o-hero-form .gform_button {
  width: 100%; background: var(--navy); color: #fff; border: none; border-radius: 999px;
  padding: 15px 24px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; min-height: 52px;
}
.cst-outcomes-page .o-hero-form input[type=submit]:hover, .cst-outcomes-page .o-hero-form .gform_button:hover { background: var(--navy-deep); }
.cst-outcomes-page .o-hero-form .micro { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.cst-outcomes-page .o-hero-form .gfield_required { color: #c0392b; }
.cst-outcomes-page .o-hero-form .gfield_validation_message, .cst-outcomes-page .o-hero-form .validation_message { color: #c0392b; font-size: 13px; margin-top: 4px; }

/* Big gradient number */
.cst-outcomes-page .big-number {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(52px, 8vw, 88px); line-height: 1;
  background: linear-gradient(90deg, var(--teal), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 4-stat strip — recolor the numbers to the outcomes gradient */
.cst-outcomes-page .stats-row .stat-num {
  background: linear-gradient(90deg, var(--teal), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* "Short version" pull box */
.cst-outcomes-page .short-version {
  background: var(--pale); border-left: 4px solid var(--teal); border-radius: 12px;
  padding: 24px 28px; margin: 24px auto 0; max-width: 900px; font-size: 18px; line-height: 1.6;
}
.cst-outcomes-page .short-version strong { color: var(--navy); font-weight: 800; }

/* Scores-over-time data list */
.cst-outcomes-page .data-list { list-style: none; margin: 20px auto 0; padding: 0; max-width: 520px; }
.cst-outcomes-page .data-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 2px; border-bottom: 1px solid var(--pale-deep); font-size: 17px;
}
.cst-outcomes-page .data-list li:last-child { border-bottom: none; }
.cst-outcomes-page .data-list .label { color: var(--body); }
.cst-outcomes-page .data-list .val { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--navy); font-size: 20px; }

/* Real-life / benefit list with gradient check markers */
.cst-outcomes-page .o-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cst-outcomes-page .o-list li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.55; color: var(--body); }
.cst-outcomes-page .o-list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--green));
}
.cst-outcomes-page .o-list li::after {
  content: "\2713"; position: absolute; left: 6px; top: 1px; color: #fff; font-size: 12px; font-weight: 800; line-height: 22px;
}

/* Icon tiles (client edit: put list items on tiles with a graphic) */
.cst-outcomes-page .o-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 26px 0 0; }
.cst-outcomes-page .o-tiles.cols-1 { grid-template-columns: 1fr; max-width: 860px; margin-left: auto; margin-right: auto; }
/* 4-up variant: cards stack icon-over-text */
.cst-outcomes-page .o-tiles.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cst-outcomes-page .o-tiles.cols-4 .o-tile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
@media (max-width: 900px) { .cst-outcomes-page .o-tiles.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cst-outcomes-page .o-tiles.cols-4 { grid-template-columns: 1fr; } }

/* 5-up variant: cards stack icon-over-text so they read in narrow columns */
.cst-outcomes-page .o-tiles.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cst-outcomes-page .o-tiles.cols-5 .o-tile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
@media (max-width: 1000px) { .cst-outcomes-page .o-tiles.cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cst-outcomes-page .o-tiles.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cst-outcomes-page .o-tiles.cols-5 { grid-template-columns: 1fr; } }
.cst-outcomes-page .o-tile { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; }
.cst-outcomes-page .o-tile-ico { flex-shrink: 0; width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }
.cst-outcomes-page .o-tile-ico img { width: 100%; height: 100%; object-fit: contain; }
.cst-outcomes-page .o-tile-ico svg { width: 24px; height: 24px; color: var(--teal); } /* fallback check */
.cst-outcomes-page .o-tile p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.cst-outcomes-page .o-tile p strong { color: var(--navy); font-style: italic; }
@media (max-width: 700px) { .cst-outcomes-page .o-tiles { grid-template-columns: 1fr; } }

/* "What Makes Our Data Different" — Megan Morien headshot circle */
.cst-outcomes-page .data-diff { display: flex; gap: 28px; align-items: flex-start; max-width: 900px; margin: 0 auto; }
.cst-outcomes-page .data-diff .headshot { flex-shrink: 0; width: 116px; height: 116px; border-radius: 50%; overflow: hidden; box-shadow: var(--card-shadow); border: 4px solid #fff; }
.cst-outcomes-page .data-diff .headshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cst-outcomes-page .data-diff .o-body { max-width: none; margin: 0; }
@media (max-width: 700px) { .cst-outcomes-page .data-diff { flex-direction: column; align-items: center; text-align: center; } }

/* Bold-lead definition list (VB-MAPP 16 areas) */
.cst-outcomes-page .def-list { display: grid; gap: 16px; margin: 18px auto 0; max-width: 860px; text-align: center; }
.cst-outcomes-page .def-list p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }
.cst-outcomes-page .def-list strong { color: var(--navy); font-style: italic; }

/* VB-MAPP score bar chart */
.cst-outcomes-page .vb-chart { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); padding: 32px 34px; max-width: 720px; margin: 28px auto 0; }
.cst-outcomes-page .vb-chart-title { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--navy); font-size: 17px; margin: 0 0 22px; }
/* Vertical bar chart (0–100 scale, faint gridlines every 20) */
.cst-outcomes-page .vb-vplot { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 26px; height: 260px; margin: 8px 0 0; padding-top: 8px; border-bottom: 2px solid var(--card-border); background: repeating-linear-gradient(to top, transparent 0, transparent 51px, #EAF1F6 51px, #EAF1F6 52px); }
.cst-outcomes-page .vb-vcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.cst-outcomes-page .vb-vbar { width: 58px; max-width: 72%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--teal), var(--green)); min-height: 4px; }
.cst-outcomes-page .vb-vbar.is-start { background: #C6D5E2; }
.cst-outcomes-page .vb-vval { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--navy); font-size: 18px; margin-bottom: 8px; }
.cst-outcomes-page .vb-vlabels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; margin-top: 12px; }
.cst-outcomes-page .vb-vlabels span { text-align: center; font-size: 14px; color: var(--body); }
.cst-outcomes-page .vb-chart-foot { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--card-border); text-align: center; font-size: 15px; color: var(--body); }
.cst-outcomes-page .vb-chart-foot strong { color: var(--green); }
@media (max-width: 560px) {
  .cst-outcomes-page .vb-vplot, .cst-outcomes-page .vb-vlabels { gap: 12px; }
  .cst-outcomes-page .vb-vval { font-size: 16px; }
  .cst-outcomes-page .vb-vlabels span { font-size: 12.5px; }
}

/* Number-forward callout box (early-intervention stat) */
.cst-outcomes-page .stat-callout { background: var(--navy); color: #fff; border-radius: 20px; padding: 28px 40px 40px; text-align: center; max-width: 560px; margin: 0 auto; }
.cst-outcomes-page .stat-callout .big-number { display: block; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff; }
.cst-outcomes-page .stat-callout p { color: rgba(255,255,255,0.9); margin: 12px 0 0; font-size: 17px; }

/* Plain bold-question FAQ (no accordion, per design notes) */
.cst-outcomes-page .qa { display: grid; gap: 22px; margin: 20px auto 0; max-width: 820px; }
.cst-outcomes-page .qa h3 { font-size: 18px; color: var(--navy); margin: 0 0 6px; }
.cst-outcomes-page .qa p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }

/* CTA (button + phone next to it) */
.cst-outcomes-page .o-cta { text-align: center; }
.cst-outcomes-page .o-cta .lede { margin: 0 auto 20px; max-width: 60ch; }
.cst-outcomes-page .o-cta-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.cst-outcomes-page .o-cta-phone { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--navy); }
.cst-outcomes-page .o-cta-phone svg { width: 18px; height: 18px; }
.cst-outcomes-page .bg-navy .o-cta-phone { color: #fff; }

/* Inline arrow text link (cross-page) */
.cst-outcomes-page .arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); }
.cst-outcomes-page .arrow-link:hover { color: var(--navy); }

/* Disclaimer strip */
.cst-outcomes-page .o-disclaimer { background: var(--pale); padding: 24px 0; }
.cst-outcomes-page .o-disclaimer p { max-width: 900px; margin: 0 auto; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Visible TBD placeholder (data not final) */
.cst-outcomes-page .tbd { background: rgba(245,166,35,0.18); border-bottom: 1px dashed #F5A623; padding: 0 3px; border-radius: 3px; font-style: normal; white-space: nowrap; }

/* Section intro copy width */
.cst-outcomes-page .o-body { font-size: 17px; line-height: 1.7; max-width: 820px; }
.cst-outcomes-page .o-body + .o-body { margin-top: 16px; }

/* Closing CTA (home final-cta layout): space heading from buttons now that there's no sub-line */
.cst-outcomes-page .final-cta-btns { margin-top: 26px; }

/* Hub stat strip: 4 stats (base component is already repeat(4); mobile 2-up) */
@media (max-width: 640px) { .cst-outcomes-page .stats-row { grid-template-columns: repeat(2, 1fr); } }

/* Numbered step cards (progress timeline) — same look as the service-page steps */
.cst-outcomes-page .o-steps { display: flex; flex-direction: column; gap: 20px; max-width: 860px; margin: 0 auto; }
.cst-outcomes-page .o-step { background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); padding: 24px 28px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: flex-start; }
.cst-outcomes-page .o-step-num { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(90deg, var(--teal), var(--green)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; flex-shrink: 0; }
.cst-outcomes-page .o-step h3 { font-size: 22px; line-height: 1.3; margin: 0 0 6px; color: var(--navy); }
.cst-outcomes-page .o-step p { margin: 0; color: var(--body); opacity: 0.85; font-size: 16px; line-height: 1.6; }

/* Full-width rounded photo band (landscape imagery) */
.cst-outcomes-page .o-figure { margin: 32px auto 0; max-width: 1000px; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--card-shadow); aspect-ratio: 16 / 9; }
.cst-outcomes-page .o-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Text + photo side by side. Text always gets the wider 1.15 share, photo the
   narrower 0.85, no matter which side the photo is on (children are sized
   directly via flex, so it's independent of source order). Add .o-split-rev to
   put the photo on the left. */
.cst-outcomes-page .o-split { display: flex; flex-direction: column; gap: 36px; }
.cst-outcomes-page .o-split > .o-split-copy { min-width: 0; }
.cst-outcomes-page .o-split .section-head { text-align: left; margin: 0 0 18px; }
.cst-outcomes-page .o-split .section-head .lede { margin-left: 0; margin-right: 0; }
.cst-outcomes-page .o-split .o-body { max-width: none; }
.cst-outcomes-page .o-split .o-figure { margin: 0; max-width: none; aspect-ratio: 4 / 5; }
.cst-outcomes-page .o-split .o-figure.is-landscape { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .cst-outcomes-page .o-split { flex-direction: row; align-items: center; gap: 48px; }
  .cst-outcomes-page .o-split.o-split-rev { flex-direction: row-reverse; }
  .cst-outcomes-page .o-split > .o-split-copy { flex: 1.15 1 0; }
  .cst-outcomes-page .o-split > .o-figure { flex: 0.85 1 0; min-width: 0; }
}