/* ═══════════════════════════════════════════════════════════════════════════
   TEACHING WITH CORNERSTONES — PEDAGOGY STAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-twc-stages {
	background: #f9f9f9;
	padding: 5rem 0;
}

/* ── Header ── */
.ce-twc-stages__header {
	text-align: center;
	margin: 0 auto 2.5rem;
}

/* No white-space: nowrap on any of the three below — see the note at the
   responsive block at the foot of this file for why it came off. */
.ce-twc-stages__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.ce-twc-stages__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0;
	line-height: 1.25;
}

.ce-twc-stages__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: #4a5a6a;
	line-height: 1.7;
	margin: 0;
}

/* ── Stage panels ── */
.ce-twc-stages__footer {
	text-align: center;
	margin-top: 2.5rem;
}

.ce-twc-stages__panels {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.ce-twc-stages__panel {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	scroll-margin-top: 185px;
}

/* Diamond column */
.ce-twc-stages__panel-gem-col {
	flex-shrink: 0;
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The four-stage brand mark, shared with the pedagogy page: an open bracket
   frame with one corner in the stage colour. It replaced a solid coloured
   diamond — same four stages, but the mark is the brand's own device and
   already carries the stage identity, so the panel does not need to invent a
   second visual language for it.
   No rotation here: the artwork is drawn square and upright. The old diamond
   rotated its box 45deg and counter-rotated the label to compensate. */
.ce-twc-stages__mark-card {
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ce-twc-stages__mark {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

.ce-twc-stages__mark-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* The brackets leave a gap at the midpoint of each edge, so the widest
	   clear run is the horizontal band through the centre. Capped short of the
	   full width so a label cannot collide with the bracket arms. */
	width: 72%;
}

.ce-twc-stages__mark-label {
	font-family: var(--ci-font-primary);
	font-size: 1.25rem;
	font-weight: 700;
	/* Navy, not the stage colour: the mark sits on a near-white background and
	   the Express green fails contrast on it. Colour identity comes from the
	   mark; the label only has to be readable. */
	color: var(--ci-color-navy);
	margin: 0;
	line-height: 1.15;
}

/* Content card */
.ce-twc-stages__panel-card {
	flex: 1;
	border-radius: 1.25rem;
	padding: 2rem 2.25rem;
}

.ce-twc-stages__panel-card--engage  { background: rgba(249,157,49,0.1); }
.ce-twc-stages__panel-card--develop { background: rgba(175,77,118,0.08); }
.ce-twc-stages__panel-card--innovate { background: rgba(83,141,169,0.1); }
.ce-twc-stages__panel-card--express { background: rgba(207,214,102,0.12); }

/* Subheading */
.ce-twc-stages__subheading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h3);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0 0 1.25rem;
	line-height: 1.3;
}

/* Body */
.ce-twc-stages__body p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.8;
	color: #3a4a5a;
	margin: 0 0 1rem;
}

.ce-twc-stages__body p:last-child {
	margin-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 860px) {
	/* nowrap and its 860px release are BOTH gone from this file.
	
	   The pair was trying to express "keep this on one line where it fits",
	   and got the width wrong. The intro measures 1187px of text; releasing
	   the nowrap at 860px meant every viewport between 861px and roughly
	   1266px still forced the sentence onto one line inside a container far
	   too narrow for it. iPad landscape at 1180px sat squarely in that gap
	   and scrolled sideways.
	
	   Picking a better number would only move the gap: the width the text
	   needs depends on the copy, the font and the root size, so any edit to
	   the sentence puts the breakpoint back out of step. Normal wrapping is
	   the same intent without a number to get wrong — the line stays a single
	   line wherever there is room for one, and wraps where there is not,
	   which is what nowrap was reaching for in the first place. */

	.ce-twc-stages__title-row {
		flex-wrap: wrap;
	}

	.ce-twc-stages__panel {
		gap: 1.5rem;
	}

	.ce-twc-stages__panel-gem-col {
		width: 140px;
	}

	.ce-twc-stages__mark-card {
		/* Matches .ce-twc-stages__panel-gem-col's 140px at this breakpoint —
		   at 150px the mark overflowed its own column. */
		width: 140px;
		height: 140px;
	}

	.ce-twc-stages__mark-label {
		font-size: 1rem;
	}
}

@media (max-width: 600px) {
	.ce-twc-stages {
		padding: 3rem 0;
	}

	/* Mark centred above the card, stacked normally.
	   The previous rule pulled the card up 50px so a rotated diamond
	   overlapped its top edge like a pinned badge — arithmetic that depended
	   on the diamond's rotated bounding height (100·√2≈141px). The mark is
	   drawn upright and unrotated, so none of that holds: it is a closed frame
	   that reads as complete on its own, and overlapping it into the card
	   would clip the bracket's lower arms. */
	.ce-twc-stages__panel {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		scroll-margin-top: 160px;
	}

	.ce-twc-stages__panel-gem-col {
		width: auto;
		justify-content: center;
	}

	.ce-twc-stages__mark-card {
		width: 120px;
		height: 120px;
	}

	.ce-twc-stages__mark-label {
		font-size: 0.85rem;
	}

	.ce-twc-stages__nav-btn {
		padding: 0.4rem 0.5rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHING WITH CORNERSTONES — FAQ SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-twc-faq {
	background: #fff;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
}

.ce-twc-faq::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: #f9f9f9;
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.ce-twc-faq::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: #f9f9f9;
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.ce-twc-faq .site-container {
	position: relative;
	z-index: 1;
}

.ce-twc-faq__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

.ce-twc-faq__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0;
	line-height: 1.25;
}

.ce-twc-faq__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: #7a8a9a;
	text-align: center;
	margin: 0 auto 3rem;
	line-height: 1.7;
}

.ce-twc-faq .ce-twc-faq__grid {
	grid-template-columns: repeat(2, 1fr);
}

.ce-twc-faq .ce-feature-list__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.ce-twc-faq .ce-feature-list__badge {
	font-size: 1.75rem;
	flex-shrink: 0;
}

@media (max-width: 680px) {
	.ce-twc-faq {
		padding: 3rem 0;
	}

	.ce-twc-faq .ce-twc-faq__grid {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHING WITH CORNERSTONES — HOOK SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-twc-hook {
	background-color: #f5f0e8;
	padding: 5rem 0;
}

.ce-twc-hook__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.ce-twc-hook__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.ce-twc-hook__heading {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0;
	line-height: 1.2;
}

.ce-twc-hook__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.75;
	color: #3a4a5a;
	margin: 0;
	max-width: 680px;
}

.ce-twc-hook__bridge {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0;
}

.ce-twc-hook__link {
	margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHING WITH CORNERSTONES — TOOLS GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-twc-tools {
	background-color: #f5f0e8;
}

.ce-twc-tools__title-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.ce-twc-tools__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: #4a5a6a;
	margin: 0 0 2.5rem;
	max-width: 640px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHING WITH CORNERSTONES — TESTIMONIALS GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-twc-testimonials {
	padding: 4rem 0 5rem;
}

/* Flex, not grid — see the matching note on .testimonials__grid in
   testimonials.css. Currently 3 testimonials on this page, so this is
   visually identical to the grid it replaces; it only matters if the count
   ever drops below 3. */
.ce-twc-testimonials .ce-mae-testimonials__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 2rem;
}

@media (max-width: 860px) {
	.ce-twc-testimonials .ce-mae-testimonials__grid > .cc-ts-item {
		flex-basis: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.ce-twc-hook {
		padding: 3.5rem 0;
	}

	.ce-twc-hook__title-row {
		flex-direction: column;
		gap: 0.75rem;
	}
}