/**
 * Outcomes Template – Hero overrides
 *
 * This file only contains the bespoke hero styling for the Outcomes page.
 * Everything else (intro, video, affects, journey, faqs, bottom CTA, etc.) is
 * inherited from css/addiction-treatment.css because template-outcomes-2026.php
 * uses the same `.addiction-treatment` body class alongside `.outcomes-template`.
 */

.outcomes-template {
	--out-teal: #7bd6cf;
	--out-cream: #f1ead9;
	--out-olive: #45483b;
	--out-olive-dark: #393b30;
	--out-yellow: #ffd26c;
}

body.page-template-template-outcomes-2026-php { overflow-x: hidden; }

/* Mobile navigation fix moved out of this file:
   - `.callBar` is hidden on mobile site-wide in `site-style.css`.
   - `main.addiction-treatment` offset/background reset on mobile lives in
     `css/addiction-treatment.css` so it applies to every template that uses
     that wrapper class (Addiction, Treatment Model, Outcomes V2). */

/* ========== Hero: dark olive background with subtle butterfly pattern ========== */
.outcomes-template .at-hero.out-hero {
	background-color: var(--out-olive);
	background-image: url('../images/outcomes-butterfly-pattern.svg');
	background-repeat: repeat;
	background-size: 280px auto;
	background-position: center top;
	padding: 48px 24px 56px;
	position: relative;
}

.outcomes-template .at-hero.out-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(69, 72, 59, 0.55) 0%, rgba(69, 72, 59, 0.82) 100%);
	pointer-events: none;
	z-index: 0;
}

.outcomes-template .at-hero__container {
	position: relative;
	z-index: 1;
}

/* Breadcrumb: keep the yellow link colour but slightly tighter */
.outcomes-template .at-breadcrumb { margin-bottom: 24px; }

/* ========== Hero Grid ========== */
.outcomes-template .out-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: start;
	margin-bottom: 0;
}

/* ========== Left column ========== */
.outcomes-template .out-hero__content {
	min-height: 0;
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.outcomes-template .out-hero__headline {
	font-size: 47px;
	font-weight: 500;
	color: #ffffff;
	line-height: 1.15;
	letter-spacing: -0.5px;
	margin: 0 0 32px;
	max-width: 480px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Primary yellow CTA – wider than the addiction hero CTA */
.outcomes-template .out-hero__cta-wrap {
	width: 100%;
	max-width: 460px;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.outcomes-template .at-hero__cta.out-hero__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 460px;
	height: 64px;
	background: var(--out-yellow);
	color: #1f2419 !important;
	font-size: 18px;
	font-weight: 600;
	border-radius: 8px;
	padding: 0 24px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	border: 2px solid transparent;
}

.outcomes-template .at-hero__cta.out-hero__cta:hover,
.outcomes-template .at-hero__cta.out-hero__cta:focus {
	background: #ffc84a;
	color: #1f2419 !important;
}

/* Secondary white "Download brochure" CTA */
.outcomes-template .at-hero__cta.out-hero__cta.out-hero__cta--brochure {
	background: #ffffff;
	color: #1f2419 !important;
	border: 2px solid #ffffff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.outcomes-template .at-hero__cta.out-hero__cta.out-hero__cta--brochure:hover,
.outcomes-template .at-hero__cta.out-hero__cta.out-hero__cta--brochure:focus {
	background: #f3efe2;
	color: #1f2419 !important;
	border-color: #f3efe2;
}

/* Bullet list (dot bullets, not checkmarks) – sits above the CTAs */
.outcomes-template .out-hero__features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	max-width: 460px;
}

.outcomes-template .out-hero__feature {
	font-size: 17px;
	line-height: 1.55;
	color: #ffffff;
	margin: 0 0 8px;
	padding-left: 26px;
	position: relative;
}

.outcomes-template .out-hero__feature::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--out-yellow);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
}

.outcomes-template .out-hero__feature:last-child { margin-bottom: 0; }

/* "Learn more about outcomes" link with butterfly badge + arrow */
.outcomes-template .out-hero__learn-more {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	margin-top: auto;
	padding-top: 8px;
}

.outcomes-template .out-hero__learn-more:hover,
.outcomes-template .out-hero__learn-more:focus {
	color: var(--out-yellow);
	text-decoration: none;
}

.outcomes-template .out-hero__learn-more-text {
	display: inline-block;
	max-width: 110px;
}

.outcomes-template .out-hero__learn-more-icons {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.outcomes-template .out-hero__learn-more-img {
	display: block;
	width: 78px;
	height: auto;
}

/* ========== Right column ========== */
.outcomes-template .out-hero__media {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
}

/* Teal butterfly logo that sits above the hero image, aligned top-right
   so it visually pairs with the H1 in the left column. */
.outcomes-template .out-hero__logo {
	display: block;
	width: 120px;
	height: auto;
	margin: -35px 65px -6px auto;
	align-self: flex-end;
}

/* Hero image */
.outcomes-template .at-hero__img-wrap.out-hero__img-wrap {
	margin-top: 0;
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
	overflow: visible;
	width: 100%;
	max-width: 540px;
	align-self: flex-end;
}

.outcomes-template .at-hero__img.out-hero__img {
	border-radius: 12px;
}

.outcomes-template .at-hero__badge.out-hero__badge {
	top: auto;
	bottom: -28px;
	right: 50%;
	transform: translateX(50%);
	width: 200px;
	max-width: 60%;
	z-index: 3;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* Doctify horizontal-widget (stars + rating + review count, all on one line),
   centred horizontally below the hero image. */
.outcomes-template .out-hero__rating {
	margin: 28px auto 0;
	width: 100%;
	max-width: 505px;
	align-self: center;
	padding: 0;
	border-radius: 8px;
	background: transparent;
}

.outcomes-template .out-hero__rating .doctify-widget-shell {
	border-radius: 8px;
	background: transparent;
}

.outcomes-template .out-hero__rating .doctify-script-widget {
	display: block;
	width: 100%;
	min-height: 48px;
	background: transparent;
	white-space: nowrap;
}

/* Force the injected Doctify widget text to render white against the dark
   olive hero background, and keep every text node on a single line. The stars
   are SVGs with hard-coded fills, so the colour rule below doesn't affect
   them. */
.outcomes-template .out-hero__rating .doctify-script-widget,
.outcomes-template .out-hero__rating .doctify-script-widget * {
	color: #ffffff !important;
	white-space: nowrap !important;
}

.outcomes-template .out-hero__rating .doctify-script-widget a {
	text-decoration: none;
}

.outcomes-template .out-hero__rating .doctify-script-widget a:hover,
.outcomes-template .out-hero__rating .doctify-script-widget a:focus {
	text-decoration: underline;
}

/* Hide the trailing "end" item of the injected Doctify horizontal widget –
   the element that carries the three classes:
       doctify_horizontal_widget_style_wrapper-item_<hash>
       doctify_horizontal_widget_style_wrapper-item_end_<hash>
       doctify_horizontal_widget_style_ml-1_<hash>
   We target it by the combination `wrapper-item_end_…` + `ml-1_…` so it
   matches only the single end-cap element (not every wrapper-item inside the
   widget). The hash suffix is a CSS-module build id and can change between
   Doctify releases, so we use attribute-contains rather than the literal
   class names. */
.outcomes-template .out-hero__rating [class*="doctify_horizontal_widget_style_wrapper-item_end_"][class*="doctify_horizontal_widget_style_ml-1_"] {
	display: none !important;
}

.outcomes-template .out-hero__rating .doctify-fallback {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}

/* Bottom anchor nav (optional, reuses .at-hero__nav) */
.outcomes-template .out-hero__bottom { padding-top: 40px; }

/* ========== Three Pillars Section (icon cards with gradient borders) ========== */
.out-pillars {
	background: #ffffff;
	padding: 64px 24px 72px;
}

.out-pillars__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.out-pillars__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: var(--out-teal);
	text-align: center;
	margin: 0 0 24px;
}

.out-pillars__intro {
	max-width: 880px;
	margin: 0 auto 48px;
	color: #4a4a4a;
	font-size: 17px;
	line-height: 1.65;
	text-align: left;
}

.out-pillars__intro p { margin: 0 0 16px; }
.out-pillars__intro p:last-child { margin-bottom: 0; }

.out-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	align-items: stretch;
}

/* Card with gradient border (teal → magenta). Uses a wrapping gradient bg + inner white card via background-clip. */
.out-pillars__card {
	position: relative;
	padding: 36px 28px 32px;
	border-radius: 18px;
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		linear-gradient(180deg, #7bd6cf 0%, #6db5d3 35%, #b15dbf 100%) border-box;
	border: 8px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.out-pillars__card-icon {
	width: 160px;
	height: 88px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: center;
}

.out-pillars__card-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	object-fit: contain;
}

.out-pillars__card-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #2a2d26;
	margin: 0 0 16px;
	line-height: 1.3;
}

.out-pillars__card-desc {
	font-size: 15px;
	line-height: 1.6;
	color: #4a4a4a;
	margin: 0;
	max-width: 320px;
}

@media (max-width: 1024px) {
	.out-pillars { padding: 56px 20px 64px; }
	.out-pillars__title { font-size: 30px; }
	.out-pillars__grid { gap: 24px; }
	.out-pillars__card { padding: 32px 24px 28px; }
}

@media (max-width: 768px) {
	.out-pillars { padding: 44px 16px 52px; }
	.out-pillars__title { font-size: 26px; margin-bottom: 16px; }
	.out-pillars__intro { font-size: 16px; margin-bottom: 36px; }
	.out-pillars__grid { grid-template-columns: 1fr; gap: 20px; }
	.out-pillars__card { padding: 28px 24px 26px; border-radius: 16px; }
	.out-pillars__card-icon { width: 140px; height: 76px; margin-bottom: 16px; }
	.out-pillars__card-title { font-size: 20px; margin-bottom: 12px; }
}

/* ========== Outcomes Results Section (yellow + butterfly bg + checklist pills + analysis) ========== */
.out-results {
	position: relative;
	background-color: var(--out-yellow);
	background-image: url('../images/outcomes-butterfly-pattern-yellow.svg');
	background-repeat: repeat;
	background-size: 520px auto;
	background-position: center top;
	padding: 72px 24px 80px;
	color: #2a2d26;
	overflow: hidden;
}

.out-results__inner {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
}

.out-results__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.3px;
	color: #2a2d26;
	text-align: center;
	margin: 0 auto 44px;
	max-width: 880px;
}

/* Checklist pills – 2x2 grid */
.out-results__checklist {
	list-style: none;
	margin: 0 auto 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	max-width: 880px;
}

.out-results__check {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border-radius: 999px;
	padding: 12px 24px 12px 12px;
	min-height: 56px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.out-results__check-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--out-teal);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.out-results__check-icon svg {
	display: block;
}

.out-results__check-text {
	font-size: 16px;
	font-weight: 400;
	color: #2a2d26;
	line-height: 1.35;
}

/* Analysis block (left-aligned subheading + paragraphs) */
.out-results__analysis {
	max-width: 880px;
	margin: 0 auto;
	text-align: left;
}

.out-results__subtitle {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #2a2d26;
	text-align: center;
	margin: 0 0 16px;
	line-height: 1.35;
}

.out-results__content {
	font-size: 16px;
	line-height: 1.65;
	color: #2a2d26;
}

.out-results__content p { margin: 0 0 16px; }
.out-results__content p:last-child { margin-bottom: 0; }
.out-results__content a { color: #2a2d26; text-decoration: underline; }

@media (max-width: 1024px) {
	.out-results { padding: 56px 20px 64px; background-size: 420px auto; }
	.out-results__title { font-size: 28px; margin-bottom: 32px; }
	.out-results__checklist { margin-bottom: 44px; }
}

@media (max-width: 768px) {
	.out-results { padding: 44px 16px 52px; background-size: 320px auto; }
	.out-results__title { font-size: 22px; line-height: 1.3; margin-bottom: 28px; }
	.out-results__checklist {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 36px;
	}
	.out-results__check { padding: 10px 18px 10px 10px; min-height: 52px; }
	.out-results__check-icon { flex-basis: 32px; width: 32px; height: 32px; }
	.out-results__check-text { font-size: 15px; }
	.out-results__subtitle { font-size: 18px; }
	.out-results__content { font-size: 15px; }
}

/* ========== Wellbeing Impact Section (teal bg + butterfly + copy left + data table right) ========== */
.out-wellbeing {
	position: relative;
	background-color: #d6efe9;
	background-image: url('../images/outcomes-butterfly-pattern-teal.svg');
	background-repeat: no-repeat;
	background-size: auto 110%;
	background-position: -160px 50%;
	padding: 72px 24px 80px;
	overflow: hidden;
}

.out-wellbeing__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Left column: copy */
.out-wellbeing__copy { color: #4a4a4a; }

.out-wellbeing__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: #6b1f88;
	margin: 0 0 28px;
	letter-spacing: -0.3px;
}

.out-wellbeing__content {
	font-size: 16px;
	line-height: 1.7;
	color: #4a4a4a;
}

.out-wellbeing__content p { margin: 0 0 18px; }
.out-wellbeing__content p:last-child { margin-bottom: 0; }

.out-wellbeing__content ul {
	margin: 0 0 24px;
	padding-left: 22px;
}

.out-wellbeing__content ul li {
	margin-bottom: 8px;
	color: #4a4a4a;
	line-height: 1.55;
}

.out-wellbeing__content a {
	color: #6b1f88;
	text-decoration: underline;
}

/* Right column: data table */
.out-wellbeing__table-wrap {
	border-radius: 18px;
	overflow: hidden;
	background: transparent;
	box-shadow: 0 8px 24px rgba(33, 30, 60, 0.08);
}

/* The wellbeing table is laid out with CSS Grid rather than the browser's
   native table algorithm. We still use `<table>`/`<thead>`/`<tbody>`/`<tr>`
   for semantics (so screen readers announce it as a table) but we apply
   `display: contents` on the row/section elements so every cell becomes a
   direct grid item of `.out-wellbeing__table`.

   Why: the design has 3 column headers above 3 data columns, plus a purple
   row-label column on the left. Native table markup would either require an
   empty placeholder `<th>` in the head row (to keep columns aligned) or
   would mis-align the headers if that placeholder was omitted. Using grid
   lets us simply offset the first head cell to column 2; the body cells
   then auto-flow into columns 1–4 of each subsequent row, with the
   top-left corner left transparent so the section background shows
   through (matching the previous look). */
.out-wellbeing__table {
	display: grid;
	grid-template-columns: minmax(120px, auto) repeat(3, minmax(0, 1fr));
	width: 100%;
	background: transparent;
	color: #2a2d26;
	font-family: 'Montserrat', sans-serif;
	border-radius: 18px;
	overflow: hidden;
}

.out-wellbeing__table thead,
.out-wellbeing__table tbody,
.out-wellbeing__table tr {
	display: contents;
}

.out-wellbeing__table th,
.out-wellbeing__table td {
	padding: 18px 14px;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #eaeaea;
}

/* Last data row: drop the divider on the row label + every data cell. With
   grid we can't rely on `tr:last-child` painting a row of cells, so we
   target the four cells of the final body row directly. */
.out-wellbeing__table tbody tr:last-child > * {
	border-bottom: none;
}

/* Header row */
.out-wellbeing__th {
	background: var(--out-teal);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.25;
	padding: 18px 12px;
}

/* Offset the very first column header into grid column 2 so column 1 stays
   empty in the head row (where the old transparent placeholder cell used
   to live). The remaining two head cells auto-flow into columns 3 and 4. */
.out-wellbeing__table thead th:first-child {
	grid-column: 2;
}

/* Row labels (left column) */
.out-wellbeing__row-label {
	background: linear-gradient(180deg, #6b1f88 0%, #4f176a 100%);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	padding: 22px 16px;
	min-width: 120px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Data cells */
.out-wellbeing__cell {
	background: #ffffff;
}

.out-wellbeing__cell-value {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.2px;
}

.out-wellbeing__cell-note {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	color: inherit;
	opacity: 0.9;
}

.out-wellbeing__cell--arrival,
.out-wellbeing__cell--departure {
	color: #e0264e;
}

.out-wellbeing__cell--outcome,
.out-wellbeing__cell--positive {
	color: #1ca896;
}

@media (max-width: 1024px) {
	.out-wellbeing { padding: 56px 20px 64px; background-size: auto 130%; background-position: -200px 50%; }
	.out-wellbeing__inner { gap: 40px; grid-template-columns: 1fr; }
	.out-wellbeing__title { font-size: 28px; }
	.out-wellbeing__table th,
	.out-wellbeing__table td { padding: 16px 10px; }
	.out-wellbeing__cell-value { font-size: 20px; }
}

@media (max-width: 768px) {
	.out-wellbeing { padding: 44px 16px 52px; background-size: 360px auto; background-position: left top; }
	.out-wellbeing__inner { gap: 28px; }
	.out-wellbeing__title { font-size: 24px; margin-bottom: 20px; }

	/* ----------------------------------------------------------------
	   Mobile: convert the data table into a stack of cards.
	   ---------------------------------------------------------------- */

	/* Drop the wrapping card chrome — each row will become its own card. */
	.out-wellbeing__table-wrap {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}

	.out-wellbeing__table {
		display: block;
		width: 100%;
		background: transparent;
		border-radius: 0;
		overflow: visible;
	}

	.out-wellbeing__table thead { display: none; }
	.out-wellbeing__table tbody { display: block; width: 100%; }

	.out-wellbeing__table tbody tr {
		display: block;
		width: 100%;
		margin: 0 0 16px;
		background: #ffffff;
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 6px 18px rgba(33, 30, 60, 0.10);
		box-sizing: border-box;
	}

	.out-wellbeing__table tbody tr:last-child { margin-bottom: 0; }

	/* Card header: keep the purple gradient row label, but make it span
	   the full card width. */
	.out-wellbeing__row-label {
		display: block;
		width: 100%;
		min-width: 0;
		text-align: center;
		padding: 14px 18px;
		font-size: 16px;
		font-weight: 600;
		border-bottom: none;
		box-sizing: border-box;
	}

	/* Each data cell becomes a "label / value" row inside the card. The
	   label comes from `data-label="…"` set in the template. */
	.out-wellbeing__cell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		align-items: baseline;
		width: 100%;
		padding: 14px 18px;
		background: #ffffff;
		text-align: right;
		border-bottom: 1px solid #eaeaea;
		box-sizing: border-box;
	}

	.out-wellbeing__table tbody tr td.out-wellbeing__cell:last-child {
		border-bottom: none;
	}

	.out-wellbeing__cell::before {
		content: attr(data-label);
		grid-column: 1;
		justify-self: start;
		text-align: left;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.2px;
		color: #6b1f88;
		line-height: 1.3;
	}

	.out-wellbeing__cell-value {
		grid-column: 2;
		font-size: 20px;
		line-height: 1.15;
	}

	.out-wellbeing__cell-note {
		grid-column: 2;
		display: block;
		margin-top: 2px;
		font-size: 12px;
		text-align: right;
	}
}

/* ========== Outcomes Journey Section (full-width video + centered headline + intro copy) ========== */
.out-journey {
	background: #ffffff;
	padding: 72px 24px 80px;
}

.out-journey__inner {
	max-width: 1080px;
	margin: 0 auto;
}

/* Reading flow on this section is: copy block -> video -> Doctify carousel.
   The Doctify carousel is the last child, so its trailing space is handled
   by the section's own bottom padding; copy and video each reserve space
   below themselves so the rhythm reads consistently. A `min-height` keeps
   the layout stable while the lazy-loaded widget hydrates. */
.out-journey__doctify {
	margin: 0;
}

.out-journey__doctify-widget {
	display: block;
	width: 100%;
	min-height: 220px;
}

.out-journey__doctify .doctify-fallback {
	margin: 0;
	color: #4a4a4a;
	font-size: 15px;
	text-align: center;
}

.out-journey__video-wrap {
	margin: 0 0 40px;
}

/* Inherits 16:9 layout from .at-video__embed (defined in addiction-treatment.css) */
.out-journey__video {
	background: #2a2d26;
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.out-journey__copy {
	max-width: 880px;
	margin: 0 auto 40px;
	text-align: center;
}

/* If the section ends up with the copy block as the last child (e.g. no
   video and no Doctify carousel), drop its bottom margin so the section's
   padding handles the trailing space rather than double-spacing. */
.out-journey__copy:last-child {
	margin-bottom: 0;
}

.out-journey__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #2a2d26;
	line-height: 1.25;
	letter-spacing: -0.3px;
	margin: 0 0 20px;
}

.out-journey__content {
	font-size: 17px;
	line-height: 1.65;
	color: #4a4a4a;
	text-align: left;
}

.out-journey__content p { margin: 0 0 16px; }
.out-journey__content p:last-child { margin-bottom: 0; }
.out-journey__content a { color: var(--out-teal); text-decoration: underline; }

@media (max-width: 1024px) {
	.out-journey { padding: 56px 20px 64px; }
	.out-journey__title { font-size: 26px; }
	.out-journey__doctify-widget { min-height: 260px; }
	.out-journey__copy { margin-bottom: 32px; }
	.out-journey__video-wrap { margin-bottom: 32px; }
}

@media (max-width: 768px) {
	.out-journey { padding: 44px 16px 52px; }
	.out-journey__title { font-size: 22px; margin-bottom: 14px; }
	.out-journey__content { font-size: 15px; }
	.out-journey__video { border-radius: 10px; }
	.out-journey__doctify-widget { min-height: 320px; }
	.out-journey__copy { margin-bottom: 24px; }
	.out-journey__video-wrap { margin-bottom: 24px; }
}

/* ========== Positive Transformation Section (gradient + steps left + overlapping photos right) ========== */
.out-transformation {
	position: relative;
	background-color: #5cc4b5;
	background-image:
		url('../images/outcomes-butterfly-pattern-teal.svg'),
		linear-gradient(95deg, #5cc4b5 0%, #56b0b7 40%, #6e63ad 75%, #6b3f9c 100%);
	background-repeat: no-repeat, no-repeat;
	background-size: auto 130%, cover;
	background-position: -160px center, center center;
	padding: 80px 24px;
	color: #ffffff;
	overflow: hidden;
}

.out-transformation__inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: center;
}

/* Left column: steps */
.out-transformation__steps {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.out-transformation__step {
	text-align: center;
	max-width: 420px;
	margin: 0 auto;
}

.out-transformation__step-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 14px;
	line-height: 1.25;
}

.out-transformation__step-desc {
	font-size: 15px;
	line-height: 1.6;
	color: #ffffff;
	margin: 0;
	opacity: 0.96;
}

/* Right column: overlapping photos */
.out-transformation__media {
	position: relative;
	width: 100%;
	min-height: 520px;
	aspect-ratio: 1 / 1.05;
}

/* All three photos share the same dimensions; only their position differs so
   they overlap to create the crossover effect.
   - `width` + `aspect-ratio` on the base class size the frame consistently.
   - `object-fit: cover` on the `<img>` makes every image fill that 4:3 frame
     regardless of its original aspect (portrait shots get a centre crop). */
.out-transformation__photo {
	position: absolute;
	width: 60%;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
	background: #2a2d26;
}

.out-transformation__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
}

.out-transformation__photo--1 { top: 0;    left: 0;  z-index: 1; }
.out-transformation__photo--2 { top: 28%;  right: 0; z-index: 2; }
.out-transformation__photo--3 { bottom: 0; left: 8%; z-index: 3; }

@media (max-width: 1024px) {
	.out-transformation { padding: 64px 20px; background-size: auto 150%, cover; }
	.out-transformation__inner { gap: 40px; }
	.out-transformation__media { min-height: 460px; }
}

@media (max-width: 768px) {
	.out-transformation {
		padding: 52px 16px 56px;
		background-image: url('../images/outcomes-butterfly-pattern-teal.svg'), linear-gradient(180deg, #5cc4b5 0%, #6b3f9c 100%);
		background-size: 360px auto, cover;
		background-position: -120px top, center center;
	}
	.out-transformation__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.out-transformation__steps { gap: 28px; order: 2; }
	.out-transformation__media { order: 1; min-height: 0; aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
	.out-transformation__photo,
	.out-transformation__photo--1,
	.out-transformation__photo--2,
	.out-transformation__photo--3 {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		aspect-ratio: 16 / 10;
		z-index: auto;
	}
	.out-transformation__step-title { font-size: 20px; }
	.out-transformation__step-desc { font-size: 14.5px; }
}

/* ========== Guest Tracking Section (intro + dark olive metric callout + video) ========== */
.out-tracking {
	background: #ffffff;
	padding: 56px 24px 72px;
}

.out-tracking__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.out-tracking__intro {
	font-size: 16px;
	line-height: 1.65;
	color: #4a4a4a;
	margin: 0 auto 36px;
	max-width: 880px;
	text-align: center;
}

.out-tracking__intro p { margin: 0 0 14px; }
.out-tracking__intro p:last-child { margin-bottom: 0; }

/* Dark olive callout box with butterfly background */
.out-tracking__box {
	position: relative;
	background-color: var(--out-olive);
	background-image: url('../images/outcomes-butterfly-pattern.svg');
	background-repeat: repeat;
	background-size: 280px auto;
	background-position: center top;
	border-radius: 18px;
	padding: 44px 32px 36px;
	color: #ffffff;
	overflow: hidden;
}

.out-tracking__box::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(43, 46, 36, 0.45);
	pointer-events: none;
	z-index: 0;
}

.out-tracking__box > * {
	position: relative;
	z-index: 1;
}

.out-tracking__box-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: var(--out-yellow);
	text-align: center;
	margin: 0 0 12px;
	line-height: 1.25;
	letter-spacing: -0.2px;
}

/* Metrics grid */
.out-tracking__metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.out-tracking__metric {
	text-align: center;
	color: #ffffff;
}

.out-tracking__metric-icon {
	width: 100px;
	height: 100px;
	margin: 0 auto 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.out-tracking__metric-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.out-tracking__metric-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 2px;
	line-height: 1.25;
}

.out-tracking__metric-note {
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

/* Video below the callout box */
.out-tracking__video-wrap {
	margin: 48px 0 0;
}

.out-tracking__video {
	background: #2a2d26;
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1024px) {
	.out-tracking { padding: 48px 20px 64px; }
	.out-tracking__box { padding: 36px 24px 32px; }
	.out-tracking__box-title { font-size: 26px; margin-bottom: 10px; }
	.out-tracking__metrics { gap: 20px; }
	.out-tracking__video-wrap { margin-top: 36px; }
}

@media (max-width: 768px) {
	.out-tracking { padding: 36px 16px 52px; }
	.out-tracking__intro { font-size: 15px; margin-bottom: 28px; }
	.out-tracking__box { padding: 32px 20px 28px; background-size: 220px auto; }
	.out-tracking__box-title { font-size: 22px; margin-bottom: 8px; }
	.out-tracking__metrics {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.out-tracking__metric-icon { width: 60px; height: 60px; margin-bottom: 4px; }
	.out-tracking__metric-title { font-size: 16px; }
	.out-tracking__metric-note { font-size: 13px; }
	.out-tracking__video-wrap { margin-top: 28px; }
	.out-tracking__video { border-radius: 10px; }
}

/* ========== Custom background-image overrides (uploaded per section in ACF) ========== */
/* When a section has a custom background-image, it is applied inline via the section element.
   The defaults are kept in CSS so an unset field falls back to the artwork shipped with the theme. */

.out-hero.out-hero--has-bg {
	background-image: none;
}

.out-hero.out-hero--has-bg[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.out-pillars.out-pillars--has-bg[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.out-results.out-results--has-bg[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.out-wellbeing.out-wellbeing--has-bg[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.out-journey.out-journey--has-bg[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.out-transformation.out-transformation--has-bg[style*="background-image"] {
	/* Inline background-image (uploaded) overrides the default gradient + butterfly.
	   Force single-layer sizing/positioning so the uploaded artwork fills the section cleanly. */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.out-tracking.out-tracking--has-bg[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.out-tracking__box.out-tracking__box--has-bg[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
	.outcomes-template .at-hero.out-hero { padding: 36px 20px 44px; }
	.outcomes-template .out-hero__grid { gap: 32px; }
	.outcomes-template .out-hero__headline { font-size: 38px; }
	.outcomes-template .at-hero__cta.out-hero__cta { height: 58px; font-size: 17px; }
}

@media (max-width: 768px) {
	.outcomes-template .at-hero.out-hero {
		padding: 32px 16px 40px;
		background-size: 200px auto;
	}

	/* Promote .at-hero__container to flex column so the hero grid and the
	   bottom anchor nav can be ordered together (mirrors addiction template). */
	.outcomes-template .at-hero__container {
		display: flex;
		flex-direction: column;
	}

	/* Switch the hero grid to a flex column and let its content/media wrappers
	   pass their children through so we can reorder them via `order`. */
	.outcomes-template .out-hero__grid {
		order: 2;
		display: flex;
		flex-direction: column;
		grid-template-columns: unset;
		gap: 24px;
		margin-bottom: 0;
	}

	.outcomes-template .out-hero__content,
	.outcomes-template .out-hero__media {
		display: contents;
	}

	/* Mobile order (matches addiction template):
	   1. Headline
	   2. Image
	   3. Bullet features
	   4. Primary CTA + Download brochure CTA (stacked inside the wrap)
	   5. "Learn more" link
	   6. Doctify rating widget */
	.outcomes-template .out-hero__headline   { order: 1; font-size: 32px; margin-bottom: 0; max-width: 100%; text-align: left; }
	.outcomes-template .out-hero__logo       {
		order: 2;
		width: 84px;
		align-self: flex-end;
		/* Overlay the logo on the top-right corner of the hero image:
		   - position: relative + z-index: 2 → paints on top of the image
		   - negative bottom margin → pulls the image up so it slides
		     underneath the logo. */
		position: relative;
		z-index: 2;
		margin: 0 10px -108px auto;
	}
	.outcomes-template .at-hero__img-wrap.out-hero__img-wrap { order: 3; max-width: 100%; align-self: stretch; margin: 0; }
	.outcomes-template .out-hero__features   { order: 4; max-width: 100%; margin: 0; }
	.outcomes-template .out-hero__cta-wrap   { order: 5; max-width: 100%; margin: 0; gap: 10px; }
	.outcomes-template .out-hero__learn-more { order: 6; margin: 0 auto; align-self: center; }
	.outcomes-template .out-hero__rating     { order: 7; max-width: 100%; margin: 4px 0 0; align-self: stretch; }

	.outcomes-template .at-hero__cta.out-hero__cta {
		max-width: 100%;
		height: 54px;
		font-size: 16px;
	}

	.outcomes-template .out-hero__bottom { order: 3; padding-top: 24px; }
}

/* ==========================================================================
   Bottom CTA – Outcomes V2 colour overrides
   --------------------------------------------------------------------------
   The shared `.at-bottom-cta` styles in css/addiction-treatment.css paint the
   section (and its inner content card) white. On the Outcomes template we
   want it to read as the cream brand colour instead, matching the rest of
   the page surface.

   The text link inside `.at-bottom-cta__contact` also inherits a yellow
   background from a global rule in site-style.css:

       a[class*="cta"][href*="/contact"] { background-color: #ffd26c !important; }

   That makes the "Visit the contact us page" link render as a yellow pill.
   We override it back to transparent so it reads as a plain underlined text
   link (matching the `tel:` link beside it).
   ========================================================================== */
.outcomes-template .at-bottom-cta,
.outcomes-template .at-bottom-cta__content {
	background: var(--out-cream);
}

.outcomes-template .at-bottom-cta a.at-bottom-cta__link,
.outcomes-template .at-bottom-cta a.at-bottom-cta__link:hover,
.outcomes-template .at-bottom-cta a.at-bottom-cta__link:focus,
.outcomes-template .at-bottom-cta a.at-bottom-cta__link:active {
	background-color: transparent !important;
}

/* Footer's global `border-top: 1px solid #f1f1ed` (site-style.css)
   renders as a pale hairline directly under the cream Bottom CTA on
   the Outcomes V2 template. Scope the override to this template only
   so other pages keep the divider. */
body.page-template-template-outcomes-2026-php .footer {
	border-top: 0;
}