/**
 * CWC Sections — front-end styles for the custom sections that replace
 * Revolution Slider. Per-section rules are added as each section is built.
 *
 * Namespacing: every section wrapper uses a .cwc-<section> class to avoid
 * collisions with theme / Zion Builder styles.
 */

/* Shared helpers */
.cwc-section { position: relative; width: 100%; }
.cwc-section__inner { margin-left: auto; margin-right: auto; }

/* When a CWC section is dropped into a Zion "shortcode" element, the wrapper is
   a flex item that otherwise shrinks to 0 width — make it stretch full width so
   the section's full-bleed math has a correct reference. NOTE: only set the
   cross-axis width here, never flex-grow/flex-basis — Zion columns are flex
   columns, so a grow/basis would stretch the wrapper vertically and leave a big
   empty gap below the section. */
.zb-el-shortcode:has(.cwc-section) { width: 100%; align-self: stretch; }

/* Palette */
:root {
	--cwc-navy: #152e60;   /* exact brand navy, sampled from live site */
	--cwc-orange: #ff7300; /* exact brand orange, sampled from live site */
	--cwc-blue: #5d88dd;   /* secondary CTA blue (hero "Where do I start?") */
	--cwc-peach: #fdf5ef;

	/* Brand fonts. The site loads these via Zion's Google Fonts <link>
	   (Fira Sans for body, Spectral for headings). Our custom markup isn't
	   inside Zion's paragraph selectors, so it wouldn't inherit them —
	   declare them explicitly here to match the rest of the site. */
	--cwc-font-body: "Fira Sans", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cwc-font-heading: "Spectral", Georgia, "Times New Roman", serif;
}

/* Base typography: every CWC section uses the brand body font. */
.cwc-section { font-family: var(--cwc-font-body); }

/* Shared buttons */
.cwc-btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 7px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: opacity .15s ease, transform .15s ease;
}
.cwc-btn:hover { opacity: .9; transform: translateY(-1px); }
.cwc-btn--orange { background: var(--cwc-orange); color: #fff; }
.cwc-btn--navy   { background: var(--cwc-navy);   color: #fff; }
.cwc-btn--blue   { background: var(--cwc-blue);   color: #fff; }

/* =========================================================================
 * HERO
 * ===================================================================== */
.cwc-hero {
	position: relative;
	/* full-bleed: span the viewport even inside a constrained content column */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 660px;
	overflow: hidden;
	background: var(--cwc-peach);
	padding: 52px 20px 0;
	text-align: center;
	isolation: isolate;
}
/* Win over Twenty Twenty-One's `.entry-content > *` max-width in classic content.
   Harmless inside a Zion full-width container (50% == 50vw → margins collapse to 0). */
.cwc-hero.cwc-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.cwc-hero__inner {
	max-width: 1180px;
	position: relative;
	z-index: 2;
}

/* Text block. Sizes/weights/colours mirror the live RevSlider hero:
   eyebrow + subtext 20px/500, heading 54px/700, all in brand navy. */
.cwc-hero__content { max-width: 720px; margin: 0 auto; }
.cwc-hero__eyebrow {
	color: var(--cwc-navy);
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 6px;
}
.cwc-hero__heading {
	color: var(--cwc-navy);
	font-family: var(--cwc-font-heading);
	font-weight: 700;
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.08;
	margin: 0 auto 14px;
	max-width: 14em;
}
.cwc-hero__subtext {
	color: var(--cwc-navy);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.55;
	margin: 0 0 24px;
}
.cwc-hero__buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
/* Live hero: the orange primary button uses navy text (not white). */
.cwc-hero .cwc-btn--orange { color: var(--cwc-navy); }

/* Foreground people image — absolutely anchored to the bottom and enlarged so
   the people are zoomed to their faces; the lower bodies are clipped by the
   hero's overflow:hidden and the curved top of the next section. */
.cwc-hero__image {
	position: absolute;
	left: 50%;
	bottom: -150px;
	transform: translateX(-50%);
	width: min(900px, 80%);
	z-index: 2;
}
.cwc-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Decorative layer — spans the full hero so corner pieces anchor to the real
   corners (they bleed off-edge and are clipped by the hero's overflow:hidden),
   exactly like the production RevSlider hero. */
.cwc-hero__decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.cwc-hero__deco { position: absolute; }

/* Orange hatched ring (Asset-1.png) peeking from each top corner. */
.cwc-hero__corner-tl { top: -90px; left: -100px; width: 220px; }
.cwc-hero__corner-tr { top: 0;     right: -100px; width: 220px; }

/* Wide faint dotted band, low and centred, behind the subtext and the people. */
.cwc-hero__dots {
	left: 50%; transform: translateX(-50%);
	top: 40%;
	width: min(1180px, 92%);
}

/* Blue ring lower-left, behind the left person; bottom-clipped by the hero. */
.cwc-hero__ring-blue { bottom: -70px; left: calc(50% - 330px); width: 300px; }

/* Thin orange arc lower-right, behind the right person. A large circle outline
   whose upper-left quadrant shows; the rest is clipped by the hero. */
.cwc-hero__arc-orange {
	right: calc(50% - 610px);
	bottom: -270px;
	width: 520px; height: 520px;
	border-radius: 50%;
	border: 2px solid var(--cwc-orange);
}

@media (max-width: 782px) {
	.cwc-hero { padding-top: 36px; }
	.cwc-hero__corner-tl { width: 150px; top: -60px; left: -60px; }
	.cwc-hero__corner-tr { width: 150px; top: 10px; right: -55px; }
	.cwc-hero__ring-blue { left: -50px; width: 180px; }
	.cwc-hero__arc-orange { display: none; }
}

/* =========================================================================
 * STEPS / "How does it work?"  (transparent bg — blue panel from container)
 * ===================================================================== */
.cwc-steps { padding: 84px 20px; text-align: center; }
.cwc-steps__inner { width: 100%; max-width: 100%; margin: 0 auto; position: relative; }
.cwc-steps__title {
	font-family: var(--cwc-font-heading);
	font-weight: 700;
	color: var(--cwc-navy);
	font-size: clamp(24px, 2.4vw, 30px); /* live: 30px */
	line-height: 1.33;
	margin: 0 0 84px;
}

.cwc-steps__track { position: relative; }
.cwc-steps__grid {
	list-style: none;
	margin: 0;
	padding: 0 6%; /* inset columns so circles sit at ~21%/79% and clear the connector verticals */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
	z-index: 1;
}
.cwc-step { text-align: center; padding: 0 18px; }
.cwc-step__num {
	display: flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--cwc-navy);
	color: var(--cwc-navy);
	font-weight: 700; font-size: 24px; /* live: 24px */
	position: relative; z-index: 1;
}
.cwc-step__pill {
	display: inline-block;
	margin-top: 56px;
	background: var(--cwc-navy);
	color: #fff;
	font-weight: 700; font-size: 20px; /* live: 20px */
	padding: 6px 30px;
	border-radius: 999px;
}
.cwc-step__text { margin: 32px auto 0; max-width: 380px; color: var(--cwc-navy); font-size: 20px; line-height: 1.6; } /* live: 20px / lh 32px */
/* The grid is an <ol>, which Twenty Twenty-One styles with its system-font list
   stack — that direct rule beats .cwc-section inheritance. Re-assert the brand
   body font on the step elements so pills/numbers/text use Fira Sans like live. */
.cwc-step, .cwc-step__num, .cwc-step__pill, .cwc-step__text { font-family: var(--cwc-font-body); }
.cwc-step__text p { margin: 0; }
.cwc-step__text strong { font-weight: 700; }

/* connector "circuit" */
.cwc-steps__hline {
	position: absolute; top: 25px; left: 7%; right: 7%;
	height: 2px; background: var(--cwc-navy); z-index: 0;
}
.cwc-steps__bracket {
	position: absolute; left: 7%; top: -64px; width: 31%; height: 89px;
	border-left: 2px solid var(--cwc-navy);
	border-top: 2px solid var(--cwc-navy);
}
.cwc-steps__rpath {
	/* Bottom edge anchors ~half a button-height above the track bottom (the CTA),
	   so the arrow lines up with the button no matter how tall the steps are. */
	position: absolute; right: 7%; top: 25px; width: 33%; bottom: 21px;
	border-right: 2px solid var(--cwc-navy);
	border-bottom: 2px solid var(--cwc-navy);
}
.cwc-steps__rpath::after { /* left-pointing arrowhead at the button */
	content: ""; position: absolute; left: 0; bottom: -6px;
	width: 0; height: 0;
	border: 6px solid transparent;
	border-right-color: var(--cwc-navy);
	transform: translateX(-100%);
}

.cwc-steps__cta { margin-top: 35px; }
.cwc-steps .cwc-btn--orange { color: var(--cwc-navy); } /* navy text on orange here */

@media (max-width: 860px) {
	.cwc-steps__grid { grid-template-columns: 1fr; gap: 44px; }
	.cwc-steps__hline, .cwc-steps__bracket, .cwc-steps__rpath { display: none; }
	.cwc-steps__title { margin-bottom: 40px; }
}

/* =========================================================================
 * IMPACT & DATA  (transparent bg — four stats around a ring)
 * ===================================================================== */
.cwc-impact { padding: 72px 20px; text-align: center; }
.cwc-impact__inner { width: 100%; margin: 0 auto; }
.cwc-impact__title {
	font-family: var(--cwc-font-heading);
	font-weight: 700;
	color: var(--cwc-navy);
	font-size: clamp(24px, 2.4vw, 30px); /* live: 30px section heading */
	line-height: 1.33;
	margin: 0 0 48px;
}

/* Square stage that holds the ring, centre dot, and the four stats. */
.cwc-impact__circle {
	position: relative;
	width: 560px;
	height: 560px;
	max-width: 100%;
	margin: 0 auto;
}
.cwc-impact__ring {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 380px; height: 380px;
	border-radius: 50%;
	border: 2.5px solid #aab8e4;
	z-index: 0;
}
.cwc-impact__dot {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 118px; height: 118px;
	border-radius: 50%;
	background: #e9e9f1;
}

/* Each stat block is centred on one cardinal point of the ring (radius 190).
   A white background masks the ring line where it passes behind the numbers,
   matching the live design (the line is "cut" at each stat). */
.cwc-impact__stat {
	position: absolute;
	z-index: 1;
	width: 180px;
	padding: 10px 12px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.cwc-impact__num {
	font-family: var(--cwc-font-heading);
	font-weight: 700;
	color: var(--cwc-navy);
	font-size: clamp(36px, 3.6vw, 50px); /* live: 50px */
	line-height: 1;
}
.cwc-impact__label {
	font-family: var(--cwc-font-body);
	color: var(--cwc-navy);
	font-size: 16px; /* live: 16px / 400 / lh 24px */
	font-weight: 400;
	line-height: 1.5;
	margin-top: 8px;
	max-width: 160px;
}
.cwc-impact__stat--top    { top: calc(50% - 190px); left: 50%; transform: translate(-50%, -50%); }
.cwc-impact__stat--right  { top: 50%; left: calc(50% + 190px); transform: translate(-50%, -50%); }
.cwc-impact__stat--bottom { top: calc(50% + 190px); left: 50%; transform: translate(-50%, -50%); }
.cwc-impact__stat--left   { top: 50%; left: calc(50% - 190px); transform: translate(-50%, -50%); }

/* On narrow screens drop the ring and stack the stats. */
@media (max-width: 620px) {
	.cwc-impact__circle { width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 12px; }
	.cwc-impact__ring, .cwc-impact__dot { display: none; }
	.cwc-impact__stat { position: static; transform: none; width: 100%; }
	.cwc-impact__stat--top, .cwc-impact__stat--right,
	.cwc-impact__stat--bottom, .cwc-impact__stat--left { position: static; transform: none; top: auto; left: auto; }
}

/* =========================================================================
 * IMPACT CHART  (grouped bar chart — transparent bg)
 * ===================================================================== */
/* Colours sampled from the live chart image (ImpactTable-bg.png): bars/axis are
   the brand blue #5d88dd, second series #fc8d32, all text navy #152e60. */
.cwc-chart { --cwc-chart-h: 380px; --cwc-bar-blue: #5d88dd; --cwc-bar-orange: #fc8d32; --cwc-grid: #b9cbef; --cwc-axis: #5d88dd; padding: 40px 20px; }
.cwc-chart__inner { max-width: 640px; margin: 0 auto; }

.cwc-chart__plot { display: flex; gap: 10px; }

/* Y axis: labels positioned at their gridline height. */
.cwc-chart__yaxis { position: relative; width: 40px; height: var(--cwc-chart-h); flex: 0 0 auto; }
.cwc-chart__tick {
	position: absolute; right: 0; transform: translateY(-50%);
	color: var(--cwc-navy); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; /* live: navy text */
}

.cwc-chart__area { flex: 1 1 auto; min-width: 0; }

/* Plot grid: light blue gridlines, heavier left/bottom axes. */
.cwc-chart__grid {
	position: relative;
	height: var(--cwc-chart-h);
	border-left: 2px solid var(--cwc-axis);
	border-bottom: 2px solid var(--cwc-axis);
	background-image:
		repeating-linear-gradient(to bottom, var(--cwc-grid) 0 1px, transparent 1px 10%),
		repeating-linear-gradient(to right,  var(--cwc-grid) 0 1px, transparent 1px 16.6667%);
}

.cwc-chart__groups {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end; justify-content: space-around;
}
.cwc-chart__group { height: 100%; display: flex; align-items: flex-end; }
.cwc-chart__bars { height: 100%; display: flex; align-items: flex-end; gap: 18px; }
.cwc-chart__bar { width: 48px; border-radius: 24px 24px 0 0; }
.cwc-chart__bar--1 { background: var(--cwc-bar-blue); }
.cwc-chart__bar--2 { background: var(--cwc-bar-orange); }

.cwc-chart__xlabels { display: flex; justify-content: space-around; margin-top: 12px; }
.cwc-chart__xlabel {
	flex: 1 1 0; text-align: center; padding: 0 8px;
	color: var(--cwc-navy); font-weight: 600; font-size: 15px;
}

.cwc-chart__legend { display: flex; justify-content: center; gap: 40px; margin-top: 22px; flex-wrap: wrap; }
.cwc-chart__leg { display: inline-flex; align-items: center; gap: 10px; color: var(--cwc-navy); font-weight: 600; font-size: 15px; }
.cwc-chart__dot { width: 18px; height: 18px; border-radius: 50%; }
.cwc-chart__dot--1 { background: var(--cwc-bar-blue); }
.cwc-chart__dot--2 { background: var(--cwc-bar-orange); }

@media (max-width: 600px) {
	.cwc-chart { --cwc-chart-h: 300px; }
	.cwc-chart__bar { width: 34px; }
	.cwc-chart__bars { gap: 10px; }
	.cwc-chart__xlabel, .cwc-chart__leg, .cwc-chart__tick { font-size: 13px; }
}