/*
 * Recovery, Actually — design direction 1b.
 *
 * Fluid from 390px to 1440px+ with no breakpoints: the page root is a size
 * container and sizes use clamp(min, Ncqi, max). Values mirror the approved
 * design reference (RA Site B.dc.html) exactly.
 */

:root {
	--ra-navy: #263C4A;
	--ra-navy-hover: #1B2D38;
	--ra-coral: #E18473;
	--ra-coral-hover: #EB9A8B;
	--ra-coral-link-hover: #C86A59;
	--ra-cream: #F8F2E8;
	--ra-paper: #FFFCF7;
	--ra-sand: #F3ECE1;
	--ra-line: #EAE0D0;
	--ra-line-2: #E3D8C7;
	--ra-ink-muted: #4A5B66;
	--ra-ink-subtle: #5E6B73;
	--ra-on-navy-muted: #DCE3E7;
	--ra-on-navy-subtle: #B8C3CA;
	--ra-stripe-navy: repeating-linear-gradient(135deg, #2F4858 0 10px, #2A4251 10px 20px);
	--ra-stripe-cream: repeating-linear-gradient(135deg, #EDE3D3 0 10px, #E6DAC8 10px 20px);
	--ra-heading: 'Jost', sans-serif;
	--ra-body: 'Instrument Sans', sans-serif;
}

/* cqi-based lengths must resolve inside the container, so they live here. */
.ra-page {
	--ra-pad-x: clamp(20px, 5cqi, 80px);
	--ra-section-y: clamp(64px, 9cqi, 128px);
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

body {
	margin: 0;
	background: var(--ra-cream);
}

.ra-page {
	container-type: inline-size;
	background: var(--ra-cream);
	color: var(--ra-navy);
	font-family: var(--ra-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.ra-page a { color: var(--ra-navy); transition: background-color 150ms ease, color 150ms ease; }
.ra-page a:hover { color: var(--ra-coral-link-hover); }
/* Focus ring: navy on cream/coral (coral on cream is only ~2.4:1), coral on navy. */
.ra-page a:focus-visible { outline: 2px solid var(--ra-navy); outline-offset: 3px; border-radius: 4px; }
.ra-page .ra-masthead a:focus-visible,
.ra-page .ra-top a:focus-visible,
.ra-page .ra-latest a:focus-visible { outline-color: var(--ra-coral); }
.ra-page p { text-wrap: pretty; }
.ra-page h1, .ra-page h2 { text-wrap: balance; }
.ra-page img { max-width: 100%; }

.ra-accent { color: var(--ra-coral); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ra-skip:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	width: auto; height: auto;
	margin: 0; clip: auto;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--ra-cream);
	color: var(--ra-navy) !important;
	border-radius: 999px;
	font-weight: 600;
}

/* Content column: 1280px max, fluid side padding (content-box, as designed). */
.ra-wrap {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ra-pad-x);
	padding-right: var(--ra-pad-x);
}

/* ---------- Type ---------- */

.ra-h1 {
	margin: 0;
	font-family: var(--ra-heading);
	font-weight: 500;
	font-size: clamp(42px, 6.8cqi, 100px);
	line-height: 1;
	letter-spacing: -0.03em;
}

.ra-h2 {
	margin: 0;
	font-family: var(--ra-heading);
	font-weight: 500;
	font-size: clamp(32px, 3.6cqi, 50px);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
.ra-h2--lg { font-size: clamp(32px, 4cqi, 56px); line-height: 1.05; }
.ra-h2--sm { font-size: clamp(28px, 2.8cqi, 40px); line-height: 1.1; }

.ra-lead {
	margin: 0;
	font-size: clamp(19px, 2cqi, 26px);
	line-height: 1.45;
}
.ra-lead--muted { color: var(--ra-ink-muted); }
.ra-lead strong { color: var(--ra-navy); font-weight: 600; }

.ra-body {
	margin: 0;
	font-size: clamp(17px, 1.4cqi, 19px);
}
.ra-muted { color: var(--ra-ink-muted); }

/* ---------- Buttons ---------- */

.ra-page .ra-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
.ra-page .ra-btn--coral {
	background: var(--ra-coral);
	color: var(--ra-navy);
	padding: 16px 28px;
	font-size: 16px;
}
.ra-page .ra-btn--coral:hover { background: var(--ra-coral-hover); color: var(--ra-navy); }
.ra-page .ra-btn--navy {
	background: var(--ra-navy);
	color: var(--ra-cream);
	padding: 14px 24px;
}
.ra-page .ra-btn--navy:hover { background: var(--ra-navy-hover); color: var(--ra-cream); }

/* ---------- 1. Header + hero (navy) ---------- */

.ra-masthead,
.ra-top {
	background: var(--ra-navy);
	color: var(--ra-cream);
}
.ra-top { overflow: hidden; }

.ra-header {
	padding-top: 22px;
	padding-bottom: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: center;
	justify-content: space-between;
}
.ra-header__logo { display: block; }
.ra-header__logo img {
	display: block;
	height: clamp(34px, 4cqi, 52px);
	width: auto;
	margin-left: -12px; /* the SVG has built-in left whitespace */
}
.ra-header__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 15px;
	font-weight: 500;
}
.ra-page .ra-header__nav a { color: var(--ra-cream); text-decoration: none; }
.ra-page .ra-header__nav a:hover { color: var(--ra-cream); text-decoration: underline; text-underline-offset: 4px; }

.ra-hero {
	max-width: 1100px;
	padding-top: clamp(40px, 6cqi, 96px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 26px;
}
.ra-hero__body {
	margin: 0;
	font-size: clamp(18px, 1.5cqi, 21px);
	max-width: 600px;
	color: var(--ra-on-navy-muted);
}
.ra-hero__support { font-size: 15px; color: var(--ra-on-navy-subtle); }

/* Video arc: five 9:16 tiles, centre (latest) highest. */
/*
 * The arc and strip are positioned so the absolutely positioned screen-reader
 * labels inside their links ("opens in a new tab") are contained and clipped by
 * the scroller; otherwise labels on off-screen tiles widen the whole page.
 */
.ra-arc {
	position: relative;
	margin: clamp(48px, 6cqi, 80px) auto 0;
	max-width: 1400px;
	padding: 4px clamp(20px, 3cqi, 40px) clamp(48px, 6cqi, 88px); /* 4px keeps the latest ring unclipped */
	display: grid;
	grid-template-columns: repeat(5, minmax(120px, 1fr));
	gap: clamp(10px, 1.4cqi, 20px);
	align-items: start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ra-arc::-webkit-scrollbar { display: none; }
.ra-arc > * { scroll-snap-align: center; }
.ra-arc > :nth-child(1),
.ra-arc > :nth-child(5) { margin-top: 64px; }
.ra-arc > :nth-child(2),
.ra-arc > :nth-child(4) { margin-top: 28px; }
.ra-page .ra-arc__link { display: block; border-radius: 20px; }

/* ---------- Thumbnails (shared) ---------- */

.ra-thumb {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	border-radius: 20px;
	overflow: hidden;
	background: var(--ra-stripe-navy);
}
.ra-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ra-thumb--latest { box-shadow: 0 0 0 4px var(--ra-coral); }
.ra-thumb--latest.ra-thumb--placeholder { background: var(--ra-stripe-cream); }
.ra-thumb--strip { border-radius: 18px; }

.ra-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--ra-navy);
	color: var(--ra-cream);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.55;
	padding: 4px 9px;
	border-radius: 999px;
	letter-spacing: 0.04em;
}

/* ---------- 2. Introduction ---------- */

.ra-intro {
	max-width: 960px;
	padding-top: var(--ra-section-y);
	padding-bottom: var(--ra-section-y);
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ---------- 3. What we talk about ---------- */

.ra-topics-wrap { padding-bottom: var(--ra-section-y); }

.ra-topics {
	background: var(--ra-paper);
	border: 1px solid var(--ra-line);
	border-radius: clamp(24px, 3cqi, 40px);
	padding: clamp(28px, 5cqi, 72px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 40px 72px;
	align-items: center;
}
.ra-topics__text { display: flex; flex-direction: column; gap: 20px; }

.ra-chat {
	background: var(--ra-sand);
	border-radius: 28px;
	padding: clamp(18px, 2.4cqi, 28px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: clamp(16px, 1.35cqi, 18px);
	font-weight: 500;
}
.ra-chat__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ra-line-2);
	margin-bottom: 6px;
}
.ra-chat__head img { width: 36px; height: 36px; border-radius: 50%; }
.ra-chat__who { display: flex; flex-direction: column; line-height: 1.2; }
.ra-chat__name { font-weight: 600; font-size: 15px; }
.ra-chat__sub { font-weight: 400; font-size: 13px; color: var(--ra-ink-subtle); }

.ra-chat__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
/* Grouped "sent" bubbles: the right-hand corners tighten between messages. */
.ra-bubble {
	max-width: 85%;
	box-sizing: border-box;
	background: var(--ra-navy);
	color: var(--ra-cream);
	padding: 12px 18px;
	border-radius: 20px 6px 6px 20px;
}
.ra-bubble:first-child { border-radius: 20px 20px 6px 20px; }
.ra-bubble:last-child { border-radius: 20px 6px 20px 20px; }
.ra-bubble:only-child { border-radius: 20px; }

.ra-typing {
	align-self: flex-start;
	display: flex;
	gap: 5px;
	background: var(--ra-paper);
	padding: 14px 18px;
	border-radius: 20px 20px 20px 6px;
	margin-top: 4px;
}
.ra-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--ra-coral); }
/* Static fade from the design; shown when motion is reduced. */
.ra-typing span:nth-child(2) { opacity: 0.6; }
.ra-typing span:nth-child(3) { opacity: 0.3; }

/* Gentle staggered pulse. "both" holds the 0% frame during each delay (no first-cycle jump). */
@keyframes ra-dot {
	0%, 80%, 100% { opacity: 0.3; }
	40% { opacity: 1; }
}
.ra-typing span { animation: ra-dot 1.2s ease-in-out infinite both; }
.ra-typing span:nth-child(2) { animation-delay: 0.15s; }
.ra-typing span:nth-child(3) { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
	.ra-typing span { animation: none; }
}

/* ---------- 4. Why Recovery, Actually ---------- */

.ra-why {
	padding-bottom: var(--ra-section-y);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 80px;
}
.ra-statement {
	margin: 0;
	font-family: var(--ra-heading);
	font-weight: 400;
	font-size: clamp(40px, 5.4cqi, 78px);
	line-height: 1.02;
	letter-spacing: -0.025em;
}
.ra-page .ra-statement { text-wrap: wrap; }
.ra-why__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
}

/* ---------- 5. Latest videos (navy) ---------- */

.ra-latest { background: var(--ra-navy); color: var(--ra-cream); }
.ra-latest__inner {
	padding: clamp(64px, 8cqi, 112px) 0;
	max-width: 1280px;
	margin: 0 auto;
}
.ra-latest__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 32px;
}
.ra-page .ra-latest__all { font-weight: 600; font-size: 15px; color: var(--ra-cream); }
.ra-page .ra-latest__all:hover { color: var(--ra-coral); }

.ra-strip {
	position: relative; /* contains the screen-reader labels; see .ra-arc */
	list-style: none;
	margin: 0;
	display: grid;
	grid-auto-flow: column;
	/* Quarter-width columns (4 across, as designed); fewer videos stay this size, left-aligned. */
	grid-auto-columns: minmax(200px, calc((100% - 3 * 18px) / 4));
	gap: 18px;
	overflow-x: auto;
	padding: 0 var(--ra-pad-x) 8px;
	scroll-padding: 0 var(--ra-pad-x);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ra-strip::-webkit-scrollbar { display: none; }
.ra-strip > li { scroll-snap-align: start; }
.ra-page .ra-strip__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--ra-cream);
	text-decoration: none;
	border-radius: 18px;
}
.ra-page a.ra-strip__item:hover { color: var(--ra-cream); }
.ra-page a.ra-strip__item:hover .ra-strip__title { text-decoration: underline; text-underline-offset: 3px; }
.ra-strip__title { font-weight: 500; font-size: 16px; line-height: 1.35; }

/* ---------- 6. Social CTA (coral) ---------- */

.ra-cta { background: var(--ra-coral); color: var(--ra-navy); }
.ra-cta__inner {
	padding-top: clamp(56px, 7cqi, 96px);
	padding-bottom: clamp(56px, 7cqi, 96px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}
.ra-cta__title {
	margin: 0;
	font-family: var(--ra-heading);
	font-weight: 500;
	font-size: clamp(34px, 4.4cqi, 64px);
	line-height: 1.04;
	letter-spacing: -0.025em;
}
.ra-cta__body {
	margin: 0;
	font-size: clamp(17px, 1.4cqi, 19px);
	max-width: 560px;
	font-weight: 500;
}
.ra-cta__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

/* ---------- 7. Footer (cream) ---------- */

.ra-footer {
	background: var(--ra-cream);
	color: var(--ra-navy);
	font-size: 14px;
	line-height: 1.6;
}
.ra-footer__grid {
	padding-top: clamp(48px, 6cqi, 80px);
	padding-bottom: 32px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 32px 64px;
}
.ra-footer__avatar { width: 64px; height: 64px; border-radius: 50%; }
.ra-footer__disclaimer { margin: 0; color: var(--ra-ink-muted); }
.ra-footer__crisis { margin: 0; }
.ra-footer__legal {
	margin-bottom: 32px;
	border-top: 1px solid var(--ra-line-2);
	padding-top: 20px;
	font-size: 13px;
	color: var(--ra-ink-subtle);
}

/* ---------- Fallback pages (privacy policy, 404, …) ---------- */

.ra-plain {
	max-width: 760px;
	padding-top: var(--ra-section-y);
	padding-bottom: var(--ra-section-y);
}
.ra-plain__content { margin-top: 28px; font-size: clamp(17px, 1.4cqi, 19px); }
.ra-plain__content h2,
.ra-plain__content h3 { font-family: var(--ra-heading); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }