/* Customer Stories v3.1 (Home layout = .cs, Inner pages layout = .csc at the bottom). Colours, container width and height are set in the admin screen;
   fonts/spacing can be tweaked with the variables below. */
.cs {
	--cs-bg: #ebedec;
	--cs-ink: #1f2e33;
	--cs-body: #3b4348;
	--cs-muted: #6b7378;
	--cs-accent: #c94f26;
	--cs-container: 1280px;
	--cs-h: 100vh;
	--cs-display: 'Bebas Neue', 'League Gothic', Anton, Impact, 'Arial Narrow', sans-serif;
	--cs-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* orange disc diameter, and the spacing of names inside it (sizes are relative to the container) */
	--d: min(31.25cqw, calc(var(--cs-h) * .58));
	--pitch: calc(var(--d) * .225);
	--ease: cubic-bezier(.7, 0, .2, 1);

	position: relative;
	background: var(--cs-bg);
	color: var(--cs-body);
	font-family: var(--cs-text);
	overflow: hidden;
}
.cs[data-bleed="1"] { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); } /* full width; JS then sets the exact width (without the scrollbar) */
html:has(.cs[data-bleed="1"]), html:has(.csc[data-bleed="1"]) { overflow-x: clip; } /* never show a horizontal scrollbar on pages using this section */
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }

.cs__wrap {
	position: relative;
	width: 100%;
	max-width: var(--cs-container);
	margin: 0 auto;
	min-height: var(--cs-h);
	display: grid;
	grid-template-columns: 1fr 1fr;
	container-type: inline-size;
}

/* ---------- heading ---------- */
.cs__left { position: relative; z-index: 2; padding: calc(var(--cs-h) * .12) 0 0 11.5cqw; pointer-events: none; }
.cs__title {
	margin: 0;
	font-family: var(--cs-display);
	font-weight: 400;
	font-size: min(13cqw, calc(var(--cs-h) * .24));
	line-height: .84;
	letter-spacing: em;
	text-transform: uppercase;
	color: var(--cs-ink);
	-webkit-text-stroke: .012em currentColor;
}
.cs__word { display: block; white-space: nowrap; }
.cs__from { font-size: .5em; letter-spacing: -.0em; margin-left: .06em; }

/* ---------- progress rail ---------- */
.cs__rail {
	position: absolute; z-index: 2;
	left: 4.75cqw; top: calc(var(--cs-h) * .145);
	width: 2px; height: calc(var(--cs-h) * .71);
	background: rgba(31, 46, 51, .14);
}
.cs__thumb {
	position: absolute; left: 0; top: 0;
	width: 100%;
	height: calc(100% / var(--n));
	background: var(--cs-accent);
	transform: translateY(calc(var(--i) * 100%));
	transition: transform .8s var(--ease);
}

/* ---------- up / down ---------- */
.cs__nav {
	position: absolute; z-index: 4;
	left: calc(4.75cqw - 15px); bottom: calc(var(--cs-h) * .035);
	display: flex; flex-direction: column; gap: 16px;
}
.cs__btn {
	width: 30px; height: 30px; padding: 0;
	display: grid; place-items: center;
	border: 1.5px solid var(--cs-accent);
	border-radius: 50%;
	background: transparent;
	color: var(--cs-accent);
	cursor: pointer;
	transition: background .2s, color .2s, opacity .2s;
}
.cs__btn:hover { background: var(--cs-accent); color: #fff; }
.cs__btn:focus-visible, .cs__all:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }
.cs__btn.is-off { opacity: .35; }

/* ---------- show all ---------- */
.cs__all {
	position: absolute; z-index: 4;
	left: 11.1cqw; bottom: calc(var(--cs-h) * .10);
	font-family: var(--cs-display);
	font-size: min(2.5cqw, calc(var(--cs-h) * .05));
	line-height: 1;
	letter-spacing: -.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cs-accent);
	-webkit-text-stroke: .01em currentColor;
}
.cs__all:hover { text-decoration: underline; text-underline-offset: .12em; }

/* ---------- quote ---------- */
.cs__right {
	grid-column: 2;
	padding: calc(var(--cs-h) * .12) 14cqw 0 .85cqw;
	touch-action: pan-y;
}
.cs__slides { position: relative; z-index: 3; display: grid; }
.cs__slide {
	grid-area: 1 / 1;
	opacity: 0; visibility: hidden;
	transform: translateY(18px);
	transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.cs__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .2s, .2s, 0s; }
.cs__quote { margin: 0; padding: 0; border: 0; }
.cs__quote p { margin: 0 0 .8em; font-size: 20px; line-height: 1.55; font-weight: 400; color: var(--cs-body); }
.cs__quote p:last-child { margin-bottom: 0; }
.cs__quote p:first-child::before { content: '\201C'; }
.cs__quote p:last-child::after { content: '\201D'; }
.cs__author { margin: 1.6em 0 0; line-height: 1.45; font-size: 16px; }
.cs__name { display: block; font-weight: 600; color: var(--cs-ink); }
.cs__company { display: block; color: var(--cs-muted); }

/* ---------- orange disc: names stay inside the circle ---------- */
.cs__orbit {
	position: absolute; z-index: 1;
	left: 48.6cqw; bottom: calc(var(--cs-h) * .045);
	width: var(--d); height: var(--d);
}
.cs__disc {
	position: absolute; inset: 0; z-index: 2;
	border-radius: 50%;
	background: var(--cs-accent);
	overflow: hidden;
}
.cs__col {
	position: absolute;
	left: calc(var(--d) * .078);
	top: 50%;
	margin: 0; padding: 0; list-style: none;
	transform: translateY(calc(var(--i) * var(--pitch) * -1 - var(--pitch) / 2));
	transition: transform .8s var(--ease);
}
.cs__n {
	display: block;
	height: var(--pitch);
	font-family: var(--cs-display);
	font-size: calc(var(--d) * .19 * var(--fit, 1));   /* --fit is set by JS so long names shrink to fit */
	line-height: var(--pitch);
	letter-spacing: -.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .16);
	-webkit-text-stroke: .012em currentColor;
	transition: color .5s ease;
}
.cs__n.is-active { color: #fff; }

.cs__avatars {
	position: absolute; z-index: 3;
	left: calc(var(--d) * .803);
	top: calc(var(--d) * .597);
	width: calc(var(--d) * .4);
	height: calc(var(--d) * .4);
}
.cs__avatar {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	overflow: hidden;
	background: #fbece6;
	opacity: 0;
	transform: scale(.82);
	transition: opacity .5s ease, transform .6s var(--ease);
}
.cs__avatar.is-active { opacity: 1; transform: none; transition-delay: .15s; }
.cs__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs__initials { font-family: var(--cs-display); font-size: calc(var(--d) * .12); color: var(--cs-accent); }

@media (prefers-reduced-motion: reduce) {
	.cs__thumb, .cs__col, .cs__slide, .cs__avatar, .cs__n { transition: none; }
}

/* ---------- phones / small tablets ---------- */
@media (max-width: 860px) {
	.cs__wrap {
		--d: min(68vw, 340px);
		display: flex; flex-direction: column;
		min-height: 0;
		padding: 88px 20px 48px;
	}
	.cs__rail { display: none; }
	.cs__left { order: 1; padding: 0; }
	.cs__title { font-size: min(24vw, 120px); }
	.cs__right { order: 2; padding: 28px 0 0; }
	.cs__orbit { position: relative; left: auto; bottom: auto; margin: 36px 0 0; }
	.cs__nav { order: 3; position: static; flex-direction: row; margin-top: 28px; }
	.cs__all { order: 4; position: static; align-self: flex-start; margin-top: 20px; font-size: 40px; }
}


/* =====================================================================
   INNER PAGES LAYOUT: heading, 3 looping quote cards, dash pager, link
   (cards per screen is set by --pv; the gap by --gap)
   ===================================================================== */
.csc {
	--cs-bg: #ebedec;
	--cs-ink: #1f2e33;
	--cs-body: #3b4348;
	--cs-muted: #6b7378;
	--cs-accent: #c94f26;
	--cs-container: 1240px;
	--cs-display: 'Bebas Neue', 'League Gothic', Anton, Impact, 'Arial Narrow', sans-serif;
	--cs-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pv: 3;
	--ease: cubic-bezier(.7, 0, .2, 1);

	position: relative;
	background: var(--cs-bg);
	color: var(--cs-body);
	font-family: var(--cs-text);
	overflow: hidden;
	padding: clamp(56px, 8vw, 110px) 0;
}
.csc[data-bleed="1"] { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.csc *, .csc *::before, .csc *::after { box-sizing: border-box; }

.csc__wrap {
	width: 100%;
	max-width: var(--cs-container);
	margin: 0 auto;
	padding: 0 24px;
	container-type: inline-size;
}

.csc__title {
	margin: 0 0 .5em;
	font-family: var(--cs-display);
	font-weight: 400;
	font-size: clamp(52px, 8.3cqw, 112px);
	line-height: .9;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--cs-ink);
	-webkit-text-stroke: .012em currentColor;
}

/* ---------- cards ---------- */
.csc__viewport {
	--gap: clamp(28px, 5.5cqw, 68px);
	overflow: hidden;
	touch-action: pan-y;
	outline-offset: 6px;
}
.csc:not(.csc--static) .csc__viewport { cursor: grab; }
.csc.is-dragging .csc__viewport { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.csc__track {
	display: flex;
	gap: var(--gap);
	transition: transform .6s var(--ease);
	will-change: transform;
}
.csc.is-dragging .csc__track { transition: none; }
.csc__slide {
	flex: 0 0 calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));
	min-width: 0;
	display: flex;
	flex-direction: column;          /* every card is as tall as the tallest one */
}
.csc__quote { margin: 0 0 28px; padding: 0; border: 0; }
.csc__quote p { margin: 0 0 .8em; font-size: 20px; line-height: 1.4; font-weight: 400; color: var(--cs-body); }
.csc__quote p:last-child { margin-bottom: 0; }
.csc__quote p:first-child::before { content: '\201C'; }
.csc__quote p:last-child::after { content: '\201D'; }

.csc__person { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.csc__avatar {
	flex: 0 0 50px; width: 50px; height: 50px;
	display: grid; place-items: center;
	border-radius: 50%; overflow: hidden;
	background: #fbece6;
}
.csc__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csc__initials { font-family: var(--cs-display); font-size: 22px; line-height: 1; color: var(--cs-accent); }
.csc__who { display: block; min-width: 0; line-height: 1.45; }
.csc__name { display: block; font-size: 16px; font-weight: 600; color: var(--cs-ink); }
.csc__role { display: block; font-size: 14px; color: var(--cs-muted); }
.csc img { -webkit-user-drag: none; user-drag: none; }

/* ---------- footer: dash pager + link ---------- */
.csc__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 24px; margin-top: clamp(40px, 6vw, 88px); }
.csc__dots { display: flex; gap: 10px; min-width: 0; flex: 0 1 auto; }
.csc__dot {
	position: relative;
	flex: 0 1 60px; min-width: 10px; height: 22px;
	padding: 0; border: 0; background: none; cursor: pointer;
}
.csc__dot::before {
	content: ''; position: absolute; left: 0; right: 0; top: 50%;
	height: 3px; transform: translateY(-50%);
	background: rgba(31, 46, 51, .18);
	transition: background .3s ease;
}
.csc__dot:hover::before { background: rgba(31, 46, 51, .4); }
.csc__dot.is-active::before { background: var(--cs-accent); }
.csc__all {
	margin-left: auto;
	font-family: var(--cs-display);
	font-size: clamp(20px, 1.9cqw, 26px);
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--cs-accent);
	-webkit-text-stroke: .01em currentColor;
}
.csc__all:hover { text-decoration: underline; text-underline-offset: .12em; }
.csc__dot:focus-visible, .csc__all:focus-visible, .csc__viewport:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }

/* fewer stories than cards per screen: show them still, no loop, no pager */
.csc--static .csc__clone, .csc--static .csc__dots { display: none; }
.csc--static .csc__track { transform: none !important; }

@media (max-width: 1000px) { .csc { --pv: 2; } }
@media (max-width: 640px) {
	.csc { --pv: 1; }
	.csc__quote p { font-size: 18px; }
	.csc__foot { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { .csc__track, .csc__dot::before { transition: none; } }