/* Homepage only — enqueued conditionally (functions.php checks is_front_page()). */

/* Hero */
.cc-hero {
	position: relative;
	height: 600px;
	overflow: hidden;
}

/* Fades out on scroll (assets/js/hero-fade.js) — wraps the photo, scrim and
   copy but not the header, so nav stays fully visible/usable while it fades. */
.cc-hero__fade {
	opacity: 1;
}

.cc-hero__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Colour-wash + grain overlay, faded over every hero photo (via opacity) so
   a real photo reads as a toned, textured surface in the site's own palette
   rather than a crisp stock photo -- same treatment used on the photo-less
   statement slide before a photo existed here. */
.cc-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .82;
	background-color: var(--cc-dark);
	background-image:
		radial-gradient(120% 90% at 25% 20%, rgba(71, 117, 111, .45) 0%, rgba(32, 48, 45, 0) 60%),
		radial-gradient(100% 85% at 80% 95%, rgba(76, 99, 118, .35) 0%, rgba(32, 48, 45, 0) 65%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: cover, cover, 160px 160px;
	background-blend-mode: normal, normal, overlay;
}

.cc-hero__photo .cc-photo-placeholder__caption {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .5);
}

/* Symmetric tint (rather than the old left-to-right version) — the copy is
   centred now, so the darkening needs to read evenly behind it regardless
   of which side of the photo it falls on. */
.cc-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 70% at 50% 50%, rgba(28, 34, 31, .55) 0%, rgba(28, 34, 31, .3) 60%, rgba(28, 34, 31, .15) 100%),
		linear-gradient(180deg, rgba(28, 34, 31, .25) 0%, rgba(28, 34, 31, .1) 30%, rgba(28, 34, 31, .35) 100%);
}

.cc-hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	max-width: 660px;
	margin-inline: auto;
	padding-inline: 46px;
	z-index: 2;
	text-align: center;
}

.cc-hero__copy .cc-hero-actions {
	justify-content: center;
}

.cc-hero__eyebrow {
	color: var(--cc-teal-pale);
	margin-bottom: 18px;
}

.cc-hero__title {
	font: 300 var(--cc-display-1) / 1.06 var(--cc-font-serif);
	letter-spacing: -.015em;
	color: #fff;
	margin: 0 0 20px;
}

.cc-hero__body {
	font: 400 19px / 1.55 var(--cc-font-sans);
	color: rgba(255, 255, 255, .9);
	margin: 0 auto 30px;
	max-width: 560px;
}

/* Statement slide's copy is a full paragraph rather than a one-line tagline
   — a touch smaller and a wider measure keeps it to a comfortable line
   count instead of running tall inside the fixed-height hero. */
.cc-hero__body--statement {
	font-size: 17px;
	max-width: 620px;
}

/* Hero slider — two slides swapped via assets/js/hero-slider.js (progressive
   enhancement: both slides exist in the DOM, JS hides all but the active one
   with the same accessible pattern as .cc-testimonials). Each slide is its
   own full-bleed photo/scrim/copy stack, absolutely positioned inside
   .cc-hero-slider so slides overlay one another. */
.cc-hero-slider {
	position: absolute;
	inset: 0;
}

.cc-hero-slide {
	position: absolute;
	inset: 0;
}

/* Fallback paint beneath the photo (e.g. while it loads) -- the decorative
   wash/grain itself now lives in .cc-hero__photo::after above, shared by
   every slide. */
.cc-hero__photo--statement {
	background-color: var(--cc-dark);
}

.cc-hero-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	background: transparent;
	color: #fff;
	font: 400 20px var(--cc-font-sans);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cc-hero-slider__nav:hover { background: rgba(255, 255, 255, .15); }
.cc-hero-slider__nav--prev { left: 24px; }
.cc-hero-slider__nav--next { right: 24px; }

.cc-hero-slider__controls {
	position: absolute;
	right: 46px;
	bottom: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cc-hero-slider__dots {
	display: flex;
}

/* Visual dot stays 7px; the tap target is 44x44 via a pseudo-element, same
   pattern as .cc-testimonials__dot (README → Accessibility: "Minimum tap
   target 44px throughout"). */
.cc-hero-slider__dot {
	position: relative;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.cc-hero-slider__dot::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
}

.cc-hero-slider__dot.is-active::before { background: #fff; }

.cc-hero-slider__playpause {
	position: relative;
	width: 44px;
	height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	font-size: 9px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cc-hero-slider__playpause::before {
	content: '';
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	pointer-events: none;
}

.cc-hero-slider__playpause:hover::before { background: rgba(255, 255, 255, .15); }

/* Two paths band */
.cc-two-paths {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--cc-border-2);
}

.cc-two-paths__col {
	padding: 40px 46px;
}

.cc-two-paths__col > * { max-width: 480px; }

.cc-two-paths__col--client {
	background: var(--cc-cream-alt);
	border-right: 1px solid var(--cc-border-2);
}

.cc-two-paths__col--referrer {
	background: var(--cc-slate-tint);
}

.cc-two-paths__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.cc-two-paths__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

.cc-two-paths__title {
	font: 400 25px / 1.2 var(--cc-font-serif);
	margin: 0 0 8px;
}

.cc-two-paths__body {
	font: 400 15px / 1.55 var(--cc-font-sans);
	color: var(--cc-body-text);
	margin: 0 0 16px;
}

.cc-two-paths__link {
	font: 600 14px var(--cc-font-sans);
	text-decoration: none;
	border-bottom: 2px solid;
	padding-bottom: 2px;
}

/* Accreditations strip */
.cc-accreditations {
	padding-block: 26px;
	background: var(--cc-cream);
	border-bottom: 1px solid var(--cc-border-2);
}

.cc-accreditations__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 38px;
	flex-wrap: wrap;
	text-align: center;
}

.cc-accreditations__label {
	font: 500 12px var(--cc-font-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cc-muted-2);
}

.cc-accreditations__bacp {
	font: 600 17px var(--cc-font-sans);
	color: var(--cc-body-text);
	letter-spacing: .04em;
}

/* Services band */
.cc-services-band {
	padding-block: 64px;
	background: var(--cc-slate);
}

.cc-services-band__head {
	text-align: center;
	margin-bottom: 44px;
}

.cc-services-band__title {
	font: 300 42px var(--cc-font-serif);
	color: #fff;
	margin: 0;
}

.cc-services-band__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: var(--cc-max-cards);
	margin: 0 auto;
}

.cc-service-feature-card {
	position: relative;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--cc-radius-card);
	padding: 28px 26px;
}

.cc-service-feature-card__icon { margin-bottom: 16px; display: block; }
/* Whole card is clickable via the title link's stretched ::after. */
.cc-service-feature-card__link { color: inherit; text-decoration: none; }
.cc-service-feature-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cc-service-feature-card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
.cc-service-feature-card__link:focus-visible { outline: none; }
.cc-service-feature-card:has(.cc-service-feature-card__link:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.cc-service-feature-card__title { font: 400 20px / 1.15 var(--cc-font-serif); color: #fff; margin: 0 0 8px; }
.cc-service-feature-card__body { font: 400 14px / 1.55 var(--cc-font-sans); color: rgba(255, 255, 255, .78); margin: 0; }

.cc-services-band__cta { text-align: center; margin-top: 40px; }

/* Safe space split */
.cc-safe-space {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.cc-safe-space__photo { height: 440px; overflow: hidden; }
.cc-safe-space__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; display: block; }

.cc-safe-space__copy { padding: 60px 56px; }

.cc-safe-space__title {
	font: 300 40px / 1.08 var(--cc-font-serif);
	margin: 0 0 20px;
}

.cc-safe-space__body {
	font: 400 17px / 1.65 var(--cc-font-sans);
	color: var(--cc-body-text);
	margin: 0 0 28px;
}

/* Testimonials */
.cc-testimonials {
	padding-block: 72px;
	background: var(--cc-sage);
}

.cc-testimonials__frame {
	position: relative;
	max-width: var(--cc-max-page);
	margin-inline: auto;
	padding-inline: 46px;
}

.cc-testimonials__container {
	max-width: var(--cc-max-quote);
	margin-inline: auto;
	text-align: center;
}

.cc-testimonial__quote {
	font: 400 30px / 1.35 var(--cc-font-serif);
	color: var(--cc-dark);
	margin: 0 0 24px;
}

.cc-testimonial__attribution {
	font: 600 14px var(--cc-font-sans);
	letter-spacing: .04em;
	color: #2c3e3a;
	margin-bottom: 22px;
}

.cc-testimonials__controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.cc-testimonials__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Visual dot stays 7px (matches the design); the actual tap target is
   44x44 (README → Accessibility: "Minimum tap target 44px throughout"),
   via a pseudo-element so the enlarged hit area doesn't blow out the
   tight visual rhythm of the row. */
.cc-testimonials__dot {
	position: relative;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.cc-testimonials__dot::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(32, 48, 45, .35);
}

.cc-testimonials__dot.is-active::before { background: var(--cc-dark); }

.cc-testimonials__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(32, 48, 45, .3);
	background: transparent;
	color: var(--cc-dark);
	font: 400 18px var(--cc-font-sans);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cc-testimonials__nav:hover { background: rgba(32, 48, 45, .08); }
.cc-testimonials__nav--prev { left: 28px; }
.cc-testimonials__nav--next { right: 28px; }

/* Visual circle stays 32px (matches the design); the button's own box is
   the 44px tap target, with the circle drawn via ::before so hit area and
   visual chrome can differ without one distorting the other. */
.cc-testimonials__playpause {
	position: relative;
	width: 44px;
	height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--cc-dark);
	font-size: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cc-testimonials__playpause::before {
	content: '';
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	border: 1px solid rgba(32, 48, 45, .3);
	pointer-events: none;
}

.cc-testimonials__playpause:hover::before { background: rgba(32, 48, 45, .08); }

@media (max-width: 1023px) {
	.cc-safe-space { grid-template-columns: 1fr; }
	.cc-safe-space__photo { height: 320px; }
	.cc-services-band__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.cc-hero { height: 660px; }
	.cc-hero__title { font-size: 34px; }
	.cc-hero__copy { padding-inline: 20px; }
	.cc-hero__body--statement { font-size: 15.5px; }
	.cc-hero-actions { flex-direction: column; align-items: stretch; }
	.cc-hero-slider__nav { display: none; }
	.cc-hero-slider__controls { right: 20px; }

	.cc-two-paths { grid-template-columns: 1fr; }
	.cc-two-paths__col--client { border-right: 0; border-bottom: 1px solid var(--cc-border-2); }

	.cc-services-band__grid { grid-template-columns: 1fr; }
	.cc-safe-space__copy { padding: 40px 20px; }

	.cc-testimonials__frame { padding-inline: 20px; }
	.cc-testimonials__nav { display: none; }
	.cc-testimonial__quote { font-size: 22px; }

	.cc-footer-social { flex-wrap: wrap; }
}