/* =========================================================================
   Charis Theme — component styles.
   Loaded after tokens.css. Tokens own primitives; this file owns components.
   ========================================================================= */

/* ---------- Layout primitives ---------- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
body { margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
button { font: inherit; }

/* ---------- Header ---------- */
.charis-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: var(--c-ivory);
	border-bottom: 1px solid var(--c-border);
	transition: background var(--d-base) var(--ease-out),
	            box-shadow var(--d-base) var(--ease-out);
}
.charis-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}
.charis-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 84px;
	padding-block: var(--s-2);
}
.charis-header__brand { text-decoration: none; flex: 0 0 auto; line-height: 0; }
.charis-header__cta { display: flex; align-items: center; gap: var(--s-2); }

/* Custom logo (uploaded via Customizer).
   The wordmark contains a "Counselling & Clinical Services" subtitle that
   only becomes legible at ~80px+ tall. We size accordingly and let the
   header grow to accommodate. */
.charis-header__brand--logo,
.charis-header__brand--logo .custom-logo-link { display: inline-flex; align-items: center; }
.charis-header__brand--logo .custom-logo-link { line-height: 0; }
.custom-logo {
	display: block;
	width: auto;
	height: 48px;
	max-height: 48px;
	max-width: 100%;
	object-fit: contain;
	/* Crisp downscaling: browsers default to bilinear which softens; these
	   hints push them toward higher-quality contrast-preserving downsampling. */
	image-rendering: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
}
.charis-header__inner { min-height: 76px; }

@media (max-width: 1024px) {
	.custom-logo { height: 42px; max-height: 42px; }
	.charis-header__inner { min-height: 68px; }
}
@media (max-width: 640px) {
	.custom-logo { height: 36px; max-height: 36px; }
	.charis-header__inner { min-height: 60px; }
}
@media (max-width: 420px) {
	.custom-logo { height: 32px; max-height: 32px; }
	.charis-header__inner { min-height: 56px; }
}

.charis-header__menu-toggle {
	display: none;
	background: transparent;
	border: 1.5px solid var(--c-border-strong);
	color: var(--c-navy);
	padding: 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	line-height: 0;
	flex: 0 0 auto;
	transition: border-color var(--d-fast) var(--ease-out),
	            background var(--d-fast) var(--ease-out),
	            color var(--d-fast) var(--ease-out),
	            transform var(--d-fast) var(--ease-out);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.charis-header__menu-toggle:hover {
	border-color: var(--c-gold);
	color: var(--c-gold-hover);
}
.charis-header__menu-toggle:active {
	transform: scale(0.94);
	background: rgba(201, 162, 77, 0.08);
}
.charis-header__menu-toggle[aria-expanded="true"] {
	border-color: var(--c-gold);
	background: rgba(201, 162, 77, 0.10);
	color: var(--c-gold-hover);
}

/* (Header media queries are emitted AFTER all .charis-nav-primary base
   rules below, to avoid same-specificity overrides. See block at end of
   the header section.) */

/* ---------- Wordmark ---------- */
.charis-wordmark {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1;
}
.charis-wordmark__lead {
	font-family: var(--f-display);
	font-weight: 700;
	color: var(--c-navy);
	font-size: 28px;
	letter-spacing: -0.005em;
}
.charis-wordmark__sub {
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-slate);
}

.charis-section--dark .charis-wordmark__lead { color: var(--c-ivory); }
.charis-section--dark .charis-wordmark__sub  { color: var(--c-soft-blue); }

/* ---------- Primary nav ---------- */
.charis-nav-primary { flex: 1 1 auto; display: flex; justify-content: center; }
.charis-menu {
	display: flex;
	gap: var(--s-3);
	align-items: center;
}
.charis-menu li { position: relative; }
.charis-menu a {
	font-family: var(--f-ui);
	font-weight: 500;
	font-size: 15px;
	color: var(--c-charcoal);
	text-decoration: none;
	padding: 8px 4px;
	transition: color var(--d-fast) var(--ease-out);
}
.charis-menu a:hover,
.charis-menu .current-menu-item > a {
	color: var(--c-navy);
}
.charis-menu .current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--c-gold);
}
.charis-nav-primary__notice {
	font-size: var(--t-small);
	color: var(--c-slate);
	margin: 0;
}
.charis-nav-primary__notice a { color: var(--c-gold-hover); }

/* ---------- Header responsive (must come AFTER all base header rules
   so same-specificity selectors override correctly). ---------- */
@media (max-width: 1024px) {
	.charis-header__menu-toggle { display: inline-flex !important; }
	.charis-nav-primary        { display: none !important; }
	.charis-header__inner      { gap: var(--s-2); }
	.charis-header__book {
		padding: 10px 16px;
		font-size: var(--t-small);
		letter-spacing: 0;
	}
}
@media (max-width: 640px) {
	.charis-wordmark__sub      { display: none !important; }
	.charis-wordmark__lead     { font-size: 22px; }
	.charis-header__inner      { min-height: 64px; gap: 8px; }
	.charis-header__cta        { gap: 6px; }
	.charis-header__book       { padding: 9px 14px; font-size: 13px; }
}
@media (max-width: 420px) {
	.charis-header__book       { padding: 9px 12px; font-size: 13px; }
}

/* =========================================================================
   Mobile menu — off-canvas slide panel
   ========================================================================= */
.charis-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}
.charis-mobile-menu[hidden] { display: none; }
.charis-mobile-menu.is-open { pointer-events: auto; }

.charis-mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 25, 38, 0.55);
	opacity: 0;
	transition: opacity 380ms cubic-bezier(0.32, 0.72, 0, 1);
	cursor: pointer;
	will-change: opacity;
}
.charis-mobile-menu.is-open .charis-mobile-menu__overlay { opacity: 1; }

/* Panel: 3-row grid (header / scrollable nav / sticky footer).
   Slide-from-right uses Apple-style easing (cubic-bezier(0.32, 0.72, 0, 1))
   for a calm, deliberate motion. transform + opacity are GPU-accelerated;
   will-change tells the browser to promote the layer up front. */
.charis-mobile-menu__panel {
	position: relative;
	width: min(380px, 92vw);
	max-width: 100vw;
	height: 100dvh;
	height: 100vh; /* fallback */
	background: var(--c-navy);
	color: var(--c-ivory);
	display: grid;
	grid-template-rows: auto 1fr auto;
	transform: translate3d(100%, 0, 0);
	transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
	box-shadow: -16px 0 48px rgba(0, 0, 0, 0.25);
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.charis-mobile-menu.is-open .charis-mobile-menu__panel {
	transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
	.charis-mobile-menu__panel,
	.charis-mobile-menu__overlay { transition: none; }
}

/* Header row */
.charis-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex: 0 0 auto;
}
.charis-mobile-menu__brand {
	text-decoration: none;
	color: var(--c-ivory);
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1;
}
.charis-mobile-menu__brand .charis-wordmark__lead {
	color: var(--c-ivory);
	font-size: 24px;
}
.charis-mobile-menu__sub {
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-soft-blue);
}
.charis-mobile-menu__close {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.16);
	color: var(--c-ivory);
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--d-base) var(--ease-out),
	            background var(--d-base) var(--ease-out),
	            color var(--d-base) var(--ease-out);
}
.charis-mobile-menu__close:hover,
.charis-mobile-menu__close:focus-visible {
	border-color: var(--c-gold);
	background: rgba(201, 162, 77, 0.10);
	color: var(--c-gold);
}

/* Nav (scrollable middle row) */
.charis-mobile-menu__nav {
	overflow-y: auto;
	padding: var(--s-2) var(--s-4);
	-webkit-overflow-scrolling: touch;
	min-height: 0;
}
.charis-mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.charis-mobile-menu__list > li { position: relative; }
.charis-mobile-menu__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	color: var(--c-ivory);
	text-decoration: none;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: color var(--d-fast) var(--ease-out),
	            padding-left var(--d-fast) var(--ease-out);
	min-height: 52px; /* tap target */
}
.charis-mobile-menu__list a:hover,
.charis-mobile-menu__list a:focus-visible {
	color: var(--c-gold);
	padding-left: 8px;
	outline: none;
}
.charis-mobile-menu__list .current-menu-item > a,
.charis-mobile-menu__list .current_page_item > a {
	color: var(--c-gold);
}
.charis-mobile-menu__list .current-menu-item > a::before,
.charis-mobile-menu__list .current_page_item > a::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-gold);
	margin-right: 10px;
	flex: 0 0 auto;
}

/* Submenus (level 2) */
.charis-mobile-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 4px 0 12px var(--s-3);
	display: flex;
	flex-direction: column;
}
.charis-mobile-menu__list .sub-menu a {
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 16px;
	padding: 10px 0;
	color: var(--c-soft-blue);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	min-height: 40px;
}
.charis-mobile-menu__list .sub-menu a:hover { color: var(--c-gold); }

/* Footer row (sticky CTA + contact) */
.charis-mobile-menu__cta {
	flex: 0 0 auto;
	padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.10));
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.charis-mobile-menu__cta .charis-btn {
	width: 100%;
	justify-content: center;
	padding: 14px 24px;
}
.charis-mobile-menu__contact {
	margin: var(--s-2) 0 0;
	font-size: var(--t-small);
	color: var(--c-soft-blue);
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.charis-mobile-menu__contact a {
	color: var(--c-soft-blue);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
}
.charis-mobile-menu__contact a:hover,
.charis-mobile-menu__contact a:focus-visible {
	color: var(--c-gold);
}

/* Lock body scroll when mobile menu is open */
body.charis-menu-locked { overflow: hidden; }

/* Tiny screens: full-bleed panel, condense paddings */
@media (max-width: 420px) {
	.charis-mobile-menu__panel { width: 100vw; }
	.charis-mobile-menu__header { padding: var(--s-2) var(--s-3); }
	.charis-mobile-menu__nav    { padding: var(--s-1) var(--s-3); }
	.charis-mobile-menu__cta    { padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); }
	.charis-mobile-menu__list a { font-size: 18px; padding: 14px 0; }
}

/* ---------- Hero — full-bleed slideshow with opacity transitions ---------- */
.charis-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 86vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-ivory);
	isolation: isolate;
}

/* Slideshow stack */
.charis-hero__slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.charis-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s var(--ease-out);
	overflow: hidden;
}
.charis-hero__slide.is-active { opacity: 1; }

.charis-hero__img,
.charis-hero__video,
.charis-hero__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
}
.charis-hero__placeholder {
	background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-80) 50%, var(--c-soft-blue) 100%);
}
/* Empty Unsplash placeholder while proxy resolves */
.charis-hero__img:not([src]),
.charis-hero__img[src=""] { visibility: hidden; }

/* Subtle Ken Burns on the active image slide */
.charis-hero__slide.is-active[data-type="image"] .charis-hero__img {
	animation: charis-ken-burns 14s ease-out forwards;
}
@keyframes charis-ken-burns {
	from { transform: scale(1.00); }
	to   { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	.charis-hero__slide { transition: none; }
	.charis-hero__slide[data-type="image"] .charis-hero__img { animation: none; }
}

/* Twin gradient overlays — left-to-right + bottom-to-top */
.charis-hero__overlay-lr {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right,
		rgba(31, 58, 95, 0.78) 0%,
		rgba(31, 58, 95, 0.55) 35%,
		rgba(31, 58, 95, 0.20) 70%,
		rgba(31, 58, 95, 0.10) 100%);
	pointer-events: none;
}
.charis-hero__overlay-bt {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
		rgba(31, 58, 95, 0.55) 0%,
		rgba(31, 58, 95, 0.10) 50%,
		rgba(31, 58, 95, 0.20) 100%);
	pointer-events: none;
}

/* Content panels — stacked, opacity-toggled, vertically centred */
.charis-hero__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
	pointer-events: none;
}
.charis-hero__content.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.charis-hero__content { transition: none; transform: none; }
}

.charis-hero__text {
	width: 100%;
	max-width: 920px;
	padding-block: var(--s-6);
}

.charis-hero__eyebrow {
	color: var(--c-gold);
	margin-bottom: var(--s-2);
}

.charis-hero__title {
	color: var(--c-ivory);
	font-size: clamp(36px, 5vw, var(--t-display));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin-bottom: var(--s-3);
	max-width: 18ch;
}

.charis-hero__lead {
	color: var(--c-ivory);
	opacity: 0.92;
	font-size: var(--t-lead);
	max-width: 600px;
	margin-bottom: var(--s-4);
	line-height: var(--lh-base);
}

.charis-hero__buttons {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
}

/* Right-side dot indicators (with up/down arrows) */
.charis-hero__indicators {
	position: absolute;
	z-index: 3;
	right: var(--s-4);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.charis-hero__arrow {
	width: 28px;
	height: 28px;
	border: 1.5px solid rgba(255,255,255,0.45);
	border-radius: 6px;
	background: transparent;
	color: var(--c-ivory);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--d-base) var(--ease-out),
	            background var(--d-base) var(--ease-out),
	            color var(--d-base) var(--ease-out),
	            transform var(--d-base) var(--ease-out);
}
.charis-hero__arrow:hover {
	border-color: var(--c-gold);
	background: rgba(201, 162, 77, 0.15);
	color: var(--c-gold);
	transform: scale(1.08);
}
.charis-hero__arrow--up:not(:hover):not(:focus-visible) {
	animation: charis-bounce-up 2.4s infinite var(--ease-out);
}
.charis-hero__arrow--down:not(:hover):not(:focus-visible) {
	animation: charis-bounce-down 2.4s infinite var(--ease-out);
}
@keyframes charis-bounce-up {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
@keyframes charis-bounce-down {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
	.charis-hero__arrow--up,
	.charis-hero__arrow--down { animation: none; }
}

.charis-hero__indicator-line {
	width: 1px;
	height: 16px;
	background: rgba(255,255,255,0.3);
}

.charis-hero__dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background var(--d-base) var(--ease-out),
	            height var(--d-base) var(--ease-out),
	            transform var(--d-base) var(--ease-out);
	padding: 0;
}
.charis-hero__dot:hover { background: rgba(255,255,255,0.7); transform: scale(1.2); }
.charis-hero__dot.is-active {
	background: var(--c-gold);
	height: 22px;
}
.charis-hero__dot:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 3px;
}

/* Pause / play button — top right */
.charis-hero__pause {
	position: absolute;
	z-index: 3;
	top: var(--s-3);
	right: var(--s-3);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(31, 58, 95, 0.4);
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--c-ivory);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.charis-hero__pause:hover {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-navy);
}

/* Tablet + mobile */
@media (max-width: 1024px) {
	.charis-hero { min-height: 78vh; }
	.charis-hero__indicators { right: var(--s-3); }
}
@media (max-width: 768px) {
	.charis-hero { min-height: 70vh; }
	.charis-hero__indicators {
		right: 50%;
		top: auto;
		bottom: var(--s-3);
		transform: translateX(50%);
		flex-direction: row;
	}
	.charis-hero__indicator-line { width: 16px; height: 1px; }
	.charis-hero__arrow { display: none; }
	.charis-hero__title { font-size: clamp(32px, 8vw, 44px); }
	.charis-hero__text { padding-block: var(--s-5); }
	.charis-hero__pause { width: 36px; height: 36px; }
}

/* =========================================================================
   §8.3 — Welcome / Mission strip
   ========================================================================= */
.charis-welcome__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--s-6);
	align-items: center;
}
@media (max-width: 900px) {
	.charis-welcome__inner { grid-template-columns: 1fr; gap: var(--s-4); }
}
.charis-welcome__lead h2 { margin-bottom: var(--s-3); }
.charis-welcome__lead p { color: var(--c-slate); font-size: var(--t-lead); line-height: var(--lh-base); margin-bottom: var(--s-3); }
.charis-welcome__quote-card {
	background: var(--c-white);
	border-left: 3px solid var(--c-gold);
	padding: var(--s-4);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
.charis-welcome__quote {
	font-family: var(--f-display);
	font-style: italic;
	font-size: var(--t-quote);
	color: var(--c-navy);
	line-height: var(--lh-snug);
	margin: 0 0 var(--s-2);
}
.charis-welcome__cite {
	display: block;
	font-style: normal;
	font-size: var(--t-small);
	color: var(--c-slate);
	letter-spacing: var(--ls-wide);
}

/* =========================================================================
   §8.4 — Services grid
   ========================================================================= */
.charis-services__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-5); }
.charis-services__head h2 { margin-bottom: var(--s-2); }
.charis-services__intro { color: var(--c-slate); font-size: var(--t-lead); }
.charis-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-3);
}
@media (max-width: 1024px) { .charis-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .charis-services__grid { grid-template-columns: 1fr; } }
.charis-services__more { text-align: center; margin-top: var(--s-5); margin-bottom: 0; }

.charis-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	padding: var(--s-4);
	transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.charis-service-card__link-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.charis-service-card__link-overlay:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 4px;
}
.charis-service-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(111, 133, 115, 0.10); /* sage tint */
	color: var(--c-sage);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--d-base) var(--ease-out);
}
.charis-service-card:hover .charis-service-card__icon {
	background: rgba(201, 162, 77, 0.16);
	color: var(--c-gold-hover);
}
.charis-service-card__title { font-size: var(--t-h4); color: var(--c-navy); margin: 0; }
.charis-service-card__body  { color: var(--c-slate); margin: 0; }
.charis-service-card__cta {
	margin-top: auto;
	color: var(--c-gold-hover);
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-small);
	letter-spacing: var(--ls-wide);
}
.charis-service-card__cta::after {
	content: ' →';
	transition: transform var(--d-base) var(--ease-out);
	display: inline-block;
}
.charis-service-card:hover .charis-service-card__cta::after { transform: translateX(4px); }

/* =========================================================================
   §8.5 — About Iddi
   ========================================================================= */
.charis-about-iddi__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--s-6);
	align-items: center;
}
@media (max-width: 900px) {
	.charis-about-iddi__inner { grid-template-columns: 1fr; gap: var(--s-4); }
}
.charis-about-iddi__media {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1.5px solid var(--c-gold);
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 5;
	background: var(--c-pale-blue);
}
.charis-about-iddi__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Cutout PNG — fully transparent figure, subject sits clean on the page.
   No border, no card background, no halo, no shadow — just Iddi. */
.charis-about-iddi__media.is-cutout {
	border: 0;
	box-shadow: none;
	background: transparent;
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.charis-about-iddi__media.is-cutout .charis-about-iddi__img {
	height: auto;
	max-height: 640px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.charis-about-iddi__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--c-pale-blue) 0%, var(--c-soft-blue) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.charis-about-iddi__placeholder-text {
	color: var(--c-slate);
	font-family: var(--f-ui);
	font-size: var(--t-small);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.charis-about-iddi__copy h2 { margin-bottom: var(--s-3); }
.charis-about-iddi__copy p  { color: var(--c-slate); margin-bottom: var(--s-3); }
.charis-about-iddi__credentials {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: var(--s-3) 0 var(--s-4);
}
@media (max-width: 600px) { .charis-about-iddi__credentials { grid-template-columns: 1fr; } }
.charis-about-iddi__credentials li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--t-small);
	color: var(--c-charcoal);
}
.charis-about-iddi__credentials li svg { color: var(--c-sage); flex: 0 0 auto; }
.charis-about-iddi__actions { margin: 0; }

/* =========================================================================
   §8.6 — Modalities band (auto-scrolling chip row)
   ========================================================================= */
.charis-modalities { padding-bottom: var(--section-pad-y); padding-top: 0; }
.charis-modalities__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-4); }
.charis-modalities__head h2 { margin-bottom: 0; }
.charis-modalities__marquee {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.charis-modalities__track {
	display: flex;
	gap: var(--s-2);
	width: max-content;
	animation: charis-marquee 50s linear infinite;
	padding-block: var(--s-2);
}
.charis-modalities__marquee:hover .charis-modalities__track,
.charis-modalities__marquee:focus-within .charis-modalities__track {
	animation-play-state: paused;
}
@keyframes charis-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.charis-modalities__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}
.charis-modalities__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	background: var(--c-white);
	border: 1px solid var(--c-border-strong);
	font-family: var(--f-ui);
	font-size: var(--t-small);
	color: var(--c-charcoal);
	white-space: nowrap;
	flex: 0 0 auto;
}
.charis-modalities__chip strong {
	color: var(--c-navy);
	font-weight: 700;
	font-size: 15px;
}
.charis-modalities__chip span { color: var(--c-slate); }

/* =========================================================================
   §8.7 — Process timeline (4 numbered steps, alternating)
   ========================================================================= */
.charis-process__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-5); }
.charis-process__head h2 { margin-bottom: var(--s-2); }
.charis-process__intro { color: var(--c-slate); font-size: var(--t-lead); }
.charis-process__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 920px;
	margin-inline: auto;
}
.charis-process__list::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--c-gold) 10%, var(--c-gold) 90%, transparent);
	opacity: 0.5;
}
.charis-process__step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-5);
	margin-bottom: var(--s-5);
}
.charis-process__step:last-child { margin-bottom: 0; }
.charis-process__num {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 56px;
	color: var(--c-gold);
	line-height: 1;
	opacity: 0.85;
}
.charis-process__title { font-size: var(--t-h3); color: var(--c-navy); margin-bottom: var(--s-1); }
.charis-process__body p { color: var(--c-slate); margin: 0; }

.charis-process__step:nth-child(odd)  > .charis-process__num  { text-align: right; }
.charis-process__step:nth-child(odd)  > .charis-process__body { order: 2; }
.charis-process__step:nth-child(even) > .charis-process__num  { order: 2; text-align: left; }

@media (max-width: 768px) {
	.charis-process__list::before { left: 24px; }
	.charis-process__step,
	.charis-process__step:nth-child(odd),
	.charis-process__step:nth-child(even) {
		grid-template-columns: 64px 1fr;
		gap: var(--s-3);
	}
	.charis-process__step:nth-child(odd)  > .charis-process__num,
	.charis-process__step:nth-child(odd)  > .charis-process__body,
	.charis-process__step:nth-child(even) > .charis-process__num,
	.charis-process__step:nth-child(even) > .charis-process__body {
		order: initial; text-align: left;
	}
	.charis-process__num { font-size: 36px; }
}
.charis-process__cta { text-align: center; margin: var(--s-5) 0 0; }

/* =========================================================================
   §8.8 — Testimonials
   ========================================================================= */
.charis-testimonials__head { text-align: center; margin-bottom: var(--s-4); }
.charis-testimonials__placeholder {
	border: 1px dashed var(--c-border-strong);
	background: var(--c-white);
	padding: var(--s-4);
	border-radius: var(--radius-md);
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.charis-testimonials__placeholder p { color: var(--c-slate); margin: 0; }
.charis-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--s-3);
}
.charis-testimonials__quote { font-style: italic; line-height: var(--lh-base); }
.charis-testimonials__quote footer { display: flex; gap: var(--s-2); margin-top: var(--s-2); align-items: center; }
.charis-testimonials__initials {
	display: inline-flex;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--c-pale-blue);
	color: var(--c-navy);
	align-items: center;
	justify-content: center;
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-small);
}
.charis-testimonials__location { color: var(--c-muted); font-size: var(--t-small); font-style: normal; }

/* =========================================================================
   §8.9 — FAQ accordion
   ========================================================================= */
.charis-faq__inner { max-width: 820px; margin-inline: auto; }
.charis-faq__head  { text-align: center; margin-bottom: var(--s-4); }
.charis-faq__list  { display: flex; flex-direction: column; gap: var(--s-2); }
.charis-faq__item {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.charis-faq__item[open] {
	border-color: var(--c-gold);
	box-shadow: var(--shadow-sm);
}
.charis-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding: var(--s-3);
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-navy);
	font-size: var(--t-h4);
}
.charis-faq__question::-webkit-details-marker { display: none; }
.charis-faq__chev {
	color: var(--c-gold);
	transition: transform var(--d-base) var(--ease-out);
	flex: 0 0 auto;
}
.charis-faq__item[open] .charis-faq__chev { transform: rotate(180deg); }
.charis-faq__answer {
	padding: 0 var(--s-3) var(--s-3);
	color: var(--c-slate);
	line-height: var(--lh-base);
}
.charis-faq__answer p { margin: 0; }
.charis-faq__more { text-align: center; margin-top: var(--s-4); color: var(--c-slate); }
.charis-faq__more a { color: var(--c-gold-hover); font-weight: 600; }

/* =========================================================================
   §8.10 — Final CTA band
   ========================================================================= */
.charis-final-cta { text-align: center; }
.charis-final-cta__inner { max-width: 820px; margin-inline: auto; }
.charis-final-cta__inner h2 {
	font-size: clamp(28px, 4vw, 44px);
	line-height: var(--lh-tight);
	margin-bottom: var(--s-3);
}
.charis-final-cta__lead {
	color: var(--c-soft-blue);
	font-size: var(--t-lead);
	margin-bottom: var(--s-4);
}
.charis-final-cta__actions {
	display: flex;
	gap: var(--s-2);
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}

/* ---------- Article / Page / Archive ---------- */
.charis-article,
.charis-page {
	max-width: 760px;
	margin-inline: auto;
}
.charis-article__hero { margin-block: var(--s-4); border-radius: var(--radius-lg); overflow: hidden; }
.charis-article__body p,
.charis-page__body p { color: var(--c-charcoal); }

.charis-archive__header { text-align: center; margin-bottom: var(--s-5); }
.charis-archive__intro { color: var(--c-slate); max-width: 720px; margin-inline: auto; }
.charis-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--s-3);
}
.charis-archive__card { display: flex; flex-direction: column; }
.charis-archive__thumb { display: block; margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3); }
.charis-archive__thumb img { width: 100%; height: auto; }
.charis-archive__title { font-size: var(--t-h4); margin-bottom: var(--s-1); }
.charis-archive__title a { color: var(--c-navy); text-decoration: none; }
.charis-archive__title a:hover { color: var(--c-gold-hover); }
.charis-archive__meta { font-size: var(--t-small); color: var(--c-muted); margin-bottom: var(--s-2); }
.charis-archive__excerpt { color: var(--c-slate); }

/* ---------- 404 ---------- */
.charis-404 { max-width: 720px; text-align: center; margin-inline: auto; }
.charis-404__actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; margin-top: var(--s-4); }

/* ---------- Footer ---------- */
.charis-footer { color: var(--c-ivory); }
.charis-footer__columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--s-5);
	padding-bottom: var(--s-5);
}
@media (max-width: 1024px) { .charis-footer__columns { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
@media (max-width: 600px)  { .charis-footer__columns { grid-template-columns: 1fr; } }
.charis-footer__brand { display: inline-block; text-decoration: none; margin-bottom: var(--s-3); }
.charis-footer__tagline { color: var(--c-soft-blue); font-size: var(--t-small); margin-bottom: var(--s-3); }
.charis-footer__credentials { color: var(--c-soft-blue); font-size: var(--t-small); line-height: 1.65; }
.charis-footer__title {
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: var(--s-3);
}
.charis-footer__list { display: flex; flex-direction: column; gap: 10px; }
.charis-footer__list a { color: var(--c-ivory); text-decoration: none; font-size: var(--t-small); }
.charis-footer__list a:hover { color: var(--c-gold); }
.charis-footer__address { font-style: normal; color: var(--c-soft-blue); font-size: var(--t-small); line-height: 1.85; }
.charis-footer__address a { color: var(--c-ivory); text-decoration: none; }
.charis-footer__address a:hover { color: var(--c-gold); }

/* Crisis line */
.charis-crisis {
	background: rgba(255,255,255,0.04);
	border-block: 1px solid rgba(255,255,255,0.08);
	padding-block: var(--s-3);
}
.charis-crisis__inner { text-align: center; }
.charis-crisis__lead { color: var(--c-ivory); font-size: var(--t-small); margin-bottom: 4px; }
.charis-crisis__lead a { color: var(--c-gold); text-decoration: none; }
.charis-crisis__lead a:hover { color: var(--c-ivory); }
.charis-crisis__sub { color: var(--c-soft-blue); font-size: 13px; margin: 0; }

/* Footer base */
.charis-footer__base { padding-block: var(--s-3); border-top: 1px solid rgba(255,255,255,0.06); }
.charis-footer__base-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	flex-wrap: wrap;
}
.charis-footer__copyright { color: var(--c-soft-blue); font-size: 13px; margin: 0; }
.charis-footer__legal-list { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.charis-footer__legal-list a { color: var(--c-soft-blue); text-decoration: none; font-size: 13px; }
.charis-footer__legal-list a:hover { color: var(--c-gold); }

/* ---------- Pagination ---------- */
.charis-pagination {
	margin-top: var(--s-5);
	text-align: center;
}
.charis-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin-inline: 2px;
	border-radius: var(--radius-sm);
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-small);
	color: var(--c-navy);
	text-decoration: none;
	background: var(--c-white);
	border: 1px solid var(--c-border-strong);
}
.charis-pagination .page-numbers.current {
	background: var(--c-navy);
	color: var(--c-ivory);
	border-color: var(--c-navy);
}

/* ---------- Search form ---------- */
.charis-search { display: flex; gap: var(--s-1); }
.charis-search .charis-input { flex: 1 1 auto; }

/* =========================================================================
   Shared interior page hero
   ========================================================================= */
.charis-page-hero { padding-block: var(--s-7); text-align: center; }
.charis-page-hero__inner { max-width: 820px; margin-inline: auto; }
.charis-page-hero__title {
	font-size: clamp(36px, 5vw, var(--t-display));
	line-height: var(--lh-tight);
	margin-bottom: var(--s-3);
}
.charis-page-hero__lead {
	color: var(--c-slate);
	font-size: var(--t-lead);
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: 0;
}
.charis-section--dark .charis-page-hero__lead { color: var(--c-soft-blue); }

/* =========================================================================
   About page — bio + portrait
   ========================================================================= */
.charis-about-bio__inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--s-6);
	align-items: flex-start;
}
@media (max-width: 900px) {
	.charis-about-bio__inner { grid-template-columns: 1fr; gap: var(--s-4); }
}
.charis-about-bio__portrait {
	position: sticky;
	top: 96px;
}
@media (max-width: 900px) { .charis-about-bio__portrait { position: static; } }
.charis-about-bio__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	display: block;
	margin-bottom: var(--s-3);
}
.charis-about-bio__credentials {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	padding: var(--s-3);
	margin: 0;
	font-size: var(--t-small);
	box-shadow: var(--shadow-sm);
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px var(--s-2);
}
.charis-about-bio__credentials dt {
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-slate);
	align-self: center;
}
.charis-about-bio__credentials dd {
	margin: 0;
	color: var(--c-charcoal);
	align-self: center;
}
.charis-about-bio__copy h2 { margin-bottom: var(--s-3); }
.charis-about-bio__copy h3 { margin: var(--s-4) 0 var(--s-2); color: var(--c-navy); }
.charis-about-bio__copy p  { color: var(--c-slate); margin-bottom: var(--s-3); }
.charis-about-bio__cta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

/* =========================================================================
   Services page — full grid
   ========================================================================= */
.charis-services-full__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3);
}
@media (max-width: 1024px) { .charis-services-full__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .charis-services-full__grid { grid-template-columns: 1fr; } }
.charis-services-full__note {
	margin-top: var(--s-5);
	padding: var(--s-4);
	background: var(--c-pale-blue);
	border-radius: var(--radius-lg);
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}
.charis-services-full__note p { color: var(--c-charcoal); margin-bottom: var(--s-2); }
.charis-services-full__note p:last-child { margin: 0; }

/* =========================================================================
   Contact page
   ========================================================================= */
.charis-contact__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--s-5);
	align-items: stretch;
}
.charis-contact__form-col,
.charis-contact__info-col { display: flex; flex-direction: column; }
.charis-contact__info-col {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	box-shadow: var(--shadow-sm);
}
.charis-contact__info-col h2 { margin-top: 0; }
@media (max-width: 900px) { .charis-contact__inner { grid-template-columns: 1fr; gap: var(--s-4); align-items: stretch; } }

.charis-contact__phi-notice {
	display: flex;
	gap: var(--s-2);
	background: rgba(201, 162, 77, 0.10);
	border-left: 3px solid var(--c-gold);
	padding: var(--s-3);
	border-radius: var(--radius-md);
	margin-bottom: var(--s-4);
}
.charis-contact__phi-notice svg { color: var(--c-gold-hover); flex: 0 0 auto; margin-top: 4px; }
.charis-contact__phi-notice p   { margin: 0; font-size: var(--t-small); color: var(--c-charcoal); }

.charis-contact__fallback {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.charis-contact__fallback .charis-input,
.charis-contact__fallback .charis-textarea,
.charis-contact__fallback .charis-select { margin-bottom: var(--s-2); }
.charis-contact__consent {
	font-size: var(--t-small);
	color: var(--c-slate);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.charis-contact__consent label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}
.charis-contact__admin-hint {
	margin-top: var(--s-2);
	padding: 12px;
	background: var(--c-pale-blue);
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: var(--c-slate);
}

.charis-contact__info-col h2 {
	font-size: var(--t-h3);
	margin-bottom: var(--s-3);
}
.charis-contact__info {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}
.charis-contact__info dt {
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-slate);
	margin-top: var(--s-1);
}
.charis-contact__info dd {
	margin: 0 0 8px;
	color: var(--c-charcoal);
}
.charis-contact__info a { color: var(--c-navy); font-weight: 500; }
.charis-contact__info a:hover { color: var(--c-gold-hover); }

.charis-contact__crisis-card {
	background: var(--c-navy);
	color: var(--c-ivory);
	border-radius: var(--radius-md);
	padding: var(--s-3);
	margin-top: var(--s-3);
}
.charis-contact__crisis-card h3 { color: var(--c-gold); font-size: var(--t-h4); margin-bottom: var(--s-1); }
.charis-contact__crisis-card p { color: var(--c-ivory); font-size: var(--t-small); margin-bottom: 8px; }
.charis-contact__crisis-card a { color: var(--c-gold); font-weight: 600; }
.charis-contact__crisis-card a:hover { color: var(--c-ivory); }
.charis-contact__crisis-sub { color: var(--c-soft-blue) !important; font-size: 13px !important; margin: 0 !important; }

/* Flash messages (success/error after form submission) */
.charis-flash {
	padding: var(--s-2) 0;
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-small);
	text-align: center;
}
.charis-flash.is-success { background: var(--c-success); color: var(--c-ivory); }
.charis-flash.is-error   { background: var(--c-error);   color: var(--c-ivory); }

/* =========================================================================
   Booking page
   ========================================================================= */
.charis-booking__notice {
	max-width: 720px;
	margin: 0 auto var(--s-4);
	padding: var(--s-3);
	background: var(--c-pale-blue);
	border-radius: var(--radius-md);
	text-align: center;
}
.charis-booking__notice p { margin: 0; color: var(--c-charcoal); }

.charis-booking__widget {
	max-width: 1100px;
	margin-inline: auto;
}
.charis-booking__placeholder {
	background: var(--c-white);
	border: 2px dashed var(--c-border-strong);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	text-align: center;
}
.charis-booking__placeholder h2 { margin-bottom: var(--s-2); font-size: var(--t-h3); }
.charis-booking__placeholder p  { color: var(--c-slate); max-width: 540px; margin-inline: auto; }
.charis-booking__placeholder-actions {
	display: flex;
	gap: var(--s-2);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--s-4);
}
.charis-booking__admin-hint {
	margin-top: var(--s-3);
	padding: 12px;
	background: var(--c-pale-blue);
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: var(--c-slate);
}

/* =========================================================================
   FAQ page (extended, categorized)
   ========================================================================= */
.charis-faq-page__inner { max-width: 820px; margin-inline: auto; }
.charis-faq-page__group { margin-bottom: var(--s-5); }
.charis-faq-page__category {
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--t-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-sage);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid var(--c-border-strong);
}

/* =========================================================================
   Legal pages (Privacy / PHIPA / Accessibility)
   ========================================================================= */
.charis-legal__inner { max-width: 760px; margin-inline: auto; }
.charis-legal__body h2 {
	font-size: var(--t-h3);
	margin: var(--s-5) 0 var(--s-2);
	color: var(--c-navy);
}
.charis-legal__body h2:first-child { margin-top: 0; }
.charis-legal__body p,
.charis-legal__body li { color: var(--c-charcoal); line-height: var(--lh-base); }
.charis-legal__body ul,
.charis-legal__body ol { padding-left: var(--s-3); margin-block: var(--s-2); }
.charis-legal__body li { margin-bottom: 8px; list-style: disc; }
.charis-legal__body ol li { list-style: decimal; }
.charis-legal__placeholder-note {
	background: rgba(201, 162, 77, 0.10);
	border-left: 3px solid var(--c-gold);
	padding: var(--s-3);
	border-radius: var(--radius-sm);
	margin-bottom: var(--s-4);
	color: var(--c-charcoal);
	font-size: var(--t-small);
}

/* Contact: small response-time line replacing the redundant inline crisis card */
.charis-contact__response-time {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: var(--s-3) 0 0;
	font-size: var(--t-small);
	color: var(--c-slate);
}
.charis-contact__response-time svg { color: var(--c-sage); flex: 0 0 auto; }

/* Safety: hide any CSRF/identity inputs Bit Form (or any other form
   plugin) marks as .d-none — since they don't ship the rule themselves
   in a stylesheet that loads on our pages. */
.d-none, .charis-contact__form .d-none { display: none !important; }

/* =========================================================================
   Mobile responsiveness sweep — global cleanup for narrow viewports
   ========================================================================= */

/* Hero (.charis-hero uses width: 100vw + margin-left: calc(50% - 50vw)) can
   introduce a 1-2px horizontal scrollbar on systems with overlay scrollbars.
   Lock the body to prevent any sub-pixel x-scroll. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* All <img> default to constrain — already in tokens but reinforce here */
img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
	/* Hero text scales down for narrow screens */
	.charis-hero__title { font-size: clamp(28px, 7vw, 36px); max-width: 100%; }
	.charis-hero__lead  { font-size: 16px; }
	.charis-hero__buttons { flex-direction: column; align-items: stretch; gap: 10px; }
	.charis-hero__buttons .charis-btn { width: 100%; justify-content: center; padding: 12px 20px; }
	.charis-hero__pause { width: 32px; height: 32px; top: 12px; right: 12px; }

	/* Page hero gets tighter padding */
	.charis-page-hero { padding-block: var(--s-5); }
	.charis-page-hero__title { font-size: clamp(28px, 7vw, 36px); }
	.charis-page-hero__lead { font-size: 16px; }

	/* Section padding shrinks via tokens; just tighten container */
	.charis-container { padding-inline: var(--container-pad); }

	/* Service cards: padding shrinks on mobile so 14px-side gutters don't crush content */
	.charis-service-card { padding: var(--s-3); gap: 14px; }
	.charis-service-card__icon { width: 48px; height: 48px; }

	/* Welcome strip: ensure the quote card has breathing room */
	.charis-welcome__quote-card { padding: var(--s-3); }
	.charis-welcome__quote { font-size: 18px; }

	/* About strip */
	.charis-about-iddi__inner { gap: var(--s-3); }
	.charis-about-iddi__placeholder { aspect-ratio: 4/5; }

	/* Process timeline */
	.charis-process__head { margin-bottom: var(--s-4); }
	.charis-process__title { font-size: var(--t-h4); }

	/* FAQ */
	.charis-faq__question { font-size: 17px; padding: var(--s-2) var(--s-3); }
	.charis-faq__answer { padding: 0 var(--s-3) var(--s-3); }

	/* Final CTA */
	.charis-final-cta__inner h2 { font-size: clamp(24px, 6vw, 32px); }
	.charis-final-cta__lead { font-size: 16px; }
	.charis-final-cta__actions { flex-direction: column; align-items: stretch; }
	.charis-final-cta__actions .charis-btn { width: 100%; justify-content: center; }

	/* Footer: tighten padding so 4 columns at 1 col don't waste space */
	.charis-footer__columns { padding-bottom: var(--s-4); gap: var(--s-3); }
	.charis-footer__base-inner { flex-direction: column; gap: 12px; text-align: center; }
	.charis-footer__legal-list { justify-content: center; }

	/* Contact page form/info */
	.charis-contact__inner { gap: var(--s-3); }
	.charis-contact__phi-notice { padding: var(--s-2); font-size: 13px; }
	.charis-contact__fallback { padding: var(--s-3); }
	.charis-contact__info-col { padding: var(--s-3); }

	/* Booking placeholder buttons */
	.charis-booking__placeholder { padding: var(--s-3); }
	.charis-booking__placeholder-actions { flex-direction: column; }
	.charis-booking__placeholder-actions .charis-btn { width: 100%; justify-content: center; }

	/* Services full grid: any 1-col card padding fix */
	.charis-services-full__note { padding: var(--s-3); }

	/* About bio (interior About page) */
	.charis-about-bio__credentials { grid-template-columns: 1fr; }
	.charis-about-bio__cta { flex-direction: column; align-items: stretch; }
	.charis-about-bio__cta .charis-btn { width: 100%; justify-content: center; }

	/* Modality chips: prevent extreme overflow */
	.charis-modalities__chip { padding: 10px 16px; font-size: 13px; }
	.charis-modalities__chip strong { font-size: 14px; }
}

@media (max-width: 480px) {
	.charis-hero__title { font-size: clamp(24px, 8vw, 30px); }
	.charis-page-hero__title { font-size: clamp(24px, 8vw, 32px); }

	/* Final CTA on tiny screens */
	.charis-final-cta__inner h2 { font-size: 22px; }

	/* Welcome strip headings */
	.charis-welcome__lead h2 { font-size: 24px; }

	/* Section h2 generally — make sure we never overflow */
	.charis-section h2 { font-size: clamp(22px, 6vw, 28px); }

	/* Service card titles can wrap awkwardly at 22px on tiny screens */
	.charis-service-card__title { font-size: 18px; }

	/* Mobile menu panel narrower on phones */
	.charis-mobile-menu__panel { width: 100vw; }

	/* About page grid stays single column at all small sizes */
	.charis-about-bio__inner { gap: var(--s-3); }
}

/* Touch-friendly: ensure tap targets are ≥ 44×44 on mobile */
@media (max-width: 768px) {
	.charis-menu a,
	.charis-mobile-menu__list a,
	.charis-footer__list a,
	.charis-footer__legal-list a {
		padding-block: 10px;
		display: inline-block;
	}
}

/* =========================================================================
   Scroll-reveal — always visible by default.
   We previously hid [data-charis-reveal] at opacity 0 and faded them in via
   IntersectionObserver. That broke when content moved into Elementor's
   the_content() wrapper (preview iframe scroll context, defer timing,
   widget hydration order). Result: hidden-forever sections.
   Trade-off: content always renders, no fade-in animation. JS could still
   add a custom enter animation later via a different class if desired.
   ========================================================================= */
[data-charis-reveal] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* =========================================================================
   Elementor render path — break Charis sections out to full viewport width.
   When a Charis section widget is dropped into an Elementor column, the
   parent column has padding + max-width, leaving the section's background
   colour visible only as a "boxed" rectangle. Force every section class
   inside .charis-elementor-page (or any .elementor-widget wrapper) to
   stretch edge-to-edge while content stays inside its own .charis-container.
   ========================================================================= */
.charis-elementor-page .charis-section,
.charis-elementor-page .charis-hero,
.charis-elementor-page .charis-modalities,
.elementor-widget .charis-section,
.elementor-widget .charis-hero,
.elementor-widget .charis-modalities {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* Belt-and-suspenders: also kill Elementor's container padding for any
   column that hosts a Charis section widget directly. */
.elementor-widget-charis-hero-slider,
.elementor-widget-charis-welcome-strip,
.elementor-widget-charis-services-section,
.elementor-widget-charis-about-section,
.elementor-widget-charis-modality-chips,
.elementor-widget-charis-process-section,
.elementor-widget-charis-testimonials,
.elementor-widget-charis-faq-section,
.elementor-widget-charis-cta-band {
	width: 100% !important;
}
.elementor-element:has(> .elementor-widget-charis-hero-slider),
.elementor-element:has(> .elementor-widget-charis-welcome-strip),
.elementor-element:has(> .elementor-widget-charis-services-section),
.elementor-element:has(> .elementor-widget-charis-about-section),
.elementor-element:has(> .elementor-widget-charis-modality-chips),
.elementor-element:has(> .elementor-widget-charis-process-section),
.elementor-element:has(> .elementor-widget-charis-testimonials),
.elementor-element:has(> .elementor-widget-charis-faq-section),
.elementor-element:has(> .elementor-widget-charis-cta-band) {
	padding: 0 !important;
}