/* ==========================================================================
   Click With Confidence — site styles
   --------------------------------------------------------------------------
   One set of page content, two presentations:
     html[data-mode="industry"]  Interactive (default): banners, motion, depth
     html[data-mode="readable"]  Readable: larger type, high contrast, no motion
   The base rules below are the Interactive look; Readable overrides follow.
   ========================================================================== */

/* ---------- Fonts (supplied Helvetica Neue LT Pro + Minion Pro) ---------- */

@font-face { font-family: "CWC Helvetica"; src: url(../fonts/HelveticaNeueLTPro-Th.woff2) format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica"; src: url(../fonts/HelveticaNeueLTPro-Lt.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica"; src: url(../fonts/HelveticaNeueLTPro-Roman.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica"; src: url(../fonts/HelveticaNeueLTPro-Md.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica"; src: url(../fonts/HelveticaNeueLTPro-Bd.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica"; src: url(../fonts/HelveticaNeueLTPro-Hv.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica"; src: url(../fonts/HelveticaNeueLTPro-Blk.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "CWC Helvetica Condensed"; src: url(../fonts/HelveticaNeueLTPro-MdCn.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica Condensed"; src: url(../fonts/HelveticaNeueLTPro-BdCn.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica Condensed"; src: url(../fonts/HelveticaNeueLTPro-HvCn.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Helvetica Condensed"; src: url(../fonts/HelveticaNeueLTPro-BlkCn.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "CWC Minion"; src: url(../fonts/MinionPro-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Minion"; src: url(../fonts/MinionPro-It.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "CWC Minion"; src: url(../fonts/MinionPro-Semibold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Minion"; src: url(../fonts/MinionPro-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Minion"; src: url(../fonts/MinionPro-BoldIt.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "CWC Minion Display"; src: url(../fonts/MinionDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CWC Minion Display"; src: url(../fonts/MinionDisplay-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */

:root {
	--blue-300: #5CA3FF;
	--blue-500: #1F80FF;
	--blue-700: #004AAD;
	--blue-800: #003A8A;
	--blue-900: #0A2A5E;
	--navy: #0B1A33;
	--ink: #111C2E;
	--ink-2: #3A475B;
	--ink-3: #627086;
	--line: #DCE3EE;
	--tint: #F4F7FC;
	--white: #FFFFFF;

	--font-head: "CWC Helvetica", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-cond: "CWC Helvetica Condensed", "CWC Helvetica", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-sub: "CWC Minion Display", "CWC Minion", "Minion Pro", Georgia, serif;
	--font-body: "CWC Minion", "Minion Pro", Georgia, "Times New Roman", serif;

	--band: linear-gradient(120deg, var(--blue-900) 0%, var(--blue-800) 45%, var(--blue-700) 100%);
	--radius: 8px;
	--radius-lg: 12px;
	--shadow: 0 1px 2px rgba(17, 28, 46, 0.04), 0 8px 24px rgba(17, 28, 46, 0.08);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gutter: clamp(20px, 3.2vw, 32px);
	--header-h: 72px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.65;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overflow-wrap: break-word;
}

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-700); text-underline-offset: 0.15em; }
a:hover { color: var(--blue-800); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 800; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
strong, b { font-weight: 700; }
hr { border: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 1000;
	padding: 10px 18px;
	background: var(--blue-700);
	color: var(--white);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: var(--radius);
}
.skip-link:focus { top: 10px; color: var(--white); }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--mid { max-width: 1040px; }
.container--text { max-width: 820px; }

.section { position: relative; padding: clamp(48px, 6.5vw, 80px) 0; }
.section--tint { background: var(--tint); }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Type ---------- */

.h2 {
	font-family: var(--font-cond);
	font-weight: 800;
	font-size: clamp(1.625rem, 2.4vw, 2rem);
	letter-spacing: 0.005em;
	color: var(--blue-700);
	margin-bottom: 0.55em;
}
.h2--center { text-align: center; }
.h3 {
	font-family: var(--font-cond);
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: 0.005em;
	color: var(--blue-700);
	margin-bottom: 0.4em;
}
.label {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.lede { font-size: clamp(1.1875rem, 1.6vw, 1.3125rem); line-height: 1.6; color: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 46px;
	padding: 0.7em 1.35em;
	border: 1.5px solid transparent;
	border-radius: 6px;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn--sm { min-height: 38px; padding: 0.45em 1em; font-size: 0.9375rem; }
.btn--lg { min-height: 52px; padding: 0.8em 1.6em; font-size: 1.0625rem; }
.btn--primary { background: var(--blue-700); color: var(--white); }
.btn--primary:hover { background: var(--blue-800); color: var(--white); }
.btn--light { background: var(--white); color: var(--blue-700); }
.btn--light:hover { background: #E8F0FC; color: var(--blue-800); }
.btn--ghost { background: transparent; border-color: currentColor; color: var(--blue-700); }
.btn--ghost:hover { background: var(--tint); }
a.btn:not([href]) { cursor: default; }

/* ---------- Top bar: announcement + display controls ---------- */

.topbar { background: var(--blue-800); color: var(--white); font-family: var(--font-head); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.topbar__notice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	color: var(--white);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.35;
	text-decoration: none;
}
.topbar__notice:hover { color: var(--white); text-decoration: underline; }
.topbar__notice .icon { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.topbar__notice:hover .icon { transform: translateX(3px); }
.topbar__tools { display: flex; align-items: center; gap: 16px; flex: none; }

.mode-switch { display: inline-flex; padding: 2px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.mode-switch__btn {
	min-height: 28px;
	padding: 0 12px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.8125rem;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}
.mode-switch__btn:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.mode-switch__btn[aria-pressed="true"] { background: var(--white); color: var(--blue-800); }

.text-size { display: none; align-items: center; gap: 6px; }
.text-size__label { font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem; margin-right: 2px; }
.text-size__btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	border: 2px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1;
}
.text-size__btn[data-text-set="1"] { font-size: 0.9375rem; }
.text-size__btn[data-text-set="2"] { font-size: 1.0625rem; }
.text-size__btn[data-text-set="3"] { font-size: 1.1875rem; }

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.25s;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(17, 28, 46, 0.25); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 72px; }
.brand { flex: none; display: block; line-height: 0; }
.brand__logo { width: auto; height: 36px; }

.site-nav__list { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	height: 72px;
	padding: 0 12px;
	color: var(--ink);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.9375rem;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s;
}
.site-nav__link::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: -1px;
	height: 3px;
	background: var(--blue-700);
	transform: scaleX(0);
	transition: transform 0.25s var(--ease);
}
.site-nav__link:hover { color: var(--blue-700); }
.site-nav__link:hover::after { transform: scaleX(1); background: var(--blue-300); }
.site-nav__link[aria-current="page"] { color: var(--blue-700); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--blue-700); }

.header-tools { display: none; align-items: center; gap: 10px; }

.mode-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px 0 8px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.875rem;
}
.mode-toggle__track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #C3CEDD; transition: background-color 0.2s; }
.mode-toggle__dot { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.25s var(--ease); }
.mode-toggle[aria-checked="true"] .mode-toggle__track { background: var(--blue-700); }
.mode-toggle[aria-checked="true"] .mode-toggle__dot { transform: translateX(14px); }

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--white);
	color: var(--ink);
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Dark banners (home hero + page titles) ---------- */

.band { position: relative; overflow: hidden; background: var(--band); color: var(--white); }
.band > .container { position: relative; z-index: 1; }
.particles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.page-band { padding: clamp(44px, 5.5vw, 68px) 0 clamp(40px, 5vw, 60px); }
.page-band__title {
	max-width: 900px;
	font-family: var(--font-cond);
	font-weight: 800;
	font-size: clamp(2rem, 3.6vw, 2.875rem);
	letter-spacing: 0.005em;
	line-height: 1.08;
	color: var(--white);
}
.page-band__actions { margin-top: 22px; }
.page-band--tall { padding: clamp(72px, 10vw, 120px) 0; }
.page-band__code { margin: 0 0 4px; font-family: var(--font-head); font-weight: 100; font-size: clamp(4.5rem, 10vw, 7rem); line-height: 1; color: rgba(255, 255, 255, 0.55); }

/* Home hero: headline + mission beside the team photo */
.hero { padding: clamp(48px, 6.5vw, 84px) 0 clamp(52px, 7vw, 92px); }
.hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	grid-template-areas: "title media" "text media";
	grid-template-rows: auto 1fr;
	column-gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
.hero__title {
	grid-area: title;
	align-self: end;
	margin-bottom: 18px;
	font-family: var(--font-cond);
	font-weight: 900;
	font-size: clamp(2.375rem, 4.4vw, 3.5rem);
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--white);
}
.hero__title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 18px; background: var(--blue-300); }
.hero__text { grid-area: text; margin: 0; max-width: 540px; font-size: 1.1875rem; line-height: 1.65; color: rgba(255, 255, 255, 0.9); }
.hero__media { grid-area: media; align-self: center; }
.hero__frame {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
	transform: translate3d(0, var(--parallax, 0px), 0);
}
.hero__frame img { width: 100%; }

/* ---------- Home sections ---------- */

.about__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 72px); }
.about__item .h2::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: 16px; background: var(--blue-500); }
.about__item p { margin: 0; color: var(--ink-2); }

.press { text-align: center; padding: clamp(40px, 5vw, 56px) 0; }
.press__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px clamp(32px, 6vw, 72px); margin-top: 22px !important; }
.press__item img { width: auto; height: 132px; }
.press__item--wral img { height: 112px; }

.donate { padding-top: clamp(48px, 6.5vw, 80px); padding-bottom: 0; }
.donate-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 48px;
	padding: clamp(32px, 4.5vw, 48px) clamp(28px, 5vw, 56px);
	border-radius: var(--radius-lg);
	background: var(--band);
	color: var(--white);
}
.donate-panel .h2 { color: var(--white); }
.donate-panel p { margin: 0; max-width: 680px; color: rgba(255, 255, 255, 0.88); }

/* ---------- Cards ---------- */

.card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); transition: box-shadow 0.25s, transform 0.25s var(--ease); }
.card__media { overflow: hidden; aspect-ratio: 1 / 1; background: var(--tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card__body { padding: 20px 24px 24px; }
.card__body p { margin: 0; font-size: 1.0625rem; color: var(--ink-2); }

/* ---------- Impact ---------- */

.embed { position: relative; }
.embed iframe { width: 100% !important; height: 100% !important; border: 0; }
.embed--sheet { height: clamp(380px, 56vh, 560px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.embed--slides { aspect-ratio: 960 / 569; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 48px); }
.stat { padding: 28px 28px 30px; border: 1px solid var(--line); border-top: 4px solid var(--blue-700); border-radius: var(--radius); text-align: center; background: var(--white); }
.stat__text { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: 1.1875rem; line-height: 1.3; color: var(--ink-2); }
.stat__num {
	display: block;
	margin: 6px 0 4px;
	font-family: var(--font-head);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(3rem, 5.4vw, 4.25rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--blue-700);
	font-variant-numeric: tabular-nums;
}

/* ---------- What We Do ---------- */

.mark {
	font-weight: 700;
	color: var(--blue-800);
	background: linear-gradient(transparent 62%, rgba(92, 163, 255, 0.3) 62%) no-repeat 0 0 / 100% 100%;
	transition: background-size 1s var(--ease) 0.3s;
}
html.js[data-mode="industry"] .reveal:not(.is-in) .mark { background-size: 0% 100%; }
.goals__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }

/* ---------- Leadership ---------- */

.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.team-card__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--tint); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 0.6s var(--ease); }
.team-card__caption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; text-align: center; }
.team-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.team-card__role { font-family: var(--font-body); font-style: italic; font-size: 1.0625rem; color: var(--blue-700); }

/* ---------- Founder's Story ---------- */

.story__title strong { font-weight: inherit; }
.story__title em { display: block; margin-top: 8px; font-family: var(--font-sub); font-weight: 400; font-style: italic; font-size: 0.5em; letter-spacing: 0; color: #BFDBFF; }
.story__body { position: relative; }
.story__spine { display: none; }
.story__beat p { margin: 0; font-size: 1.1875rem; line-height: 1.75; color: var(--ink); }
.story__beat + .story__beat { margin-top: 1.5em; }
.story__turn { display: block; margin-top: 1.1em; padding-left: 18px; border-left: 3px solid var(--blue-500); font-family: var(--font-sub); font-size: 1.375rem; line-height: 1.4; color: var(--blue-700); }
.story__beat--stark p { font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1.35; }
.story__beat--rally p { font-family: var(--font-sub); font-size: 1.375rem; line-height: 1.5; color: var(--blue-700); }
.story__signoff { margin-top: 2.25em; padding-top: 1.5em; border-top: 1px solid var(--line); }
.story__signoff p { margin: 0; color: var(--ink-2); }
.story__signature { font-family: var(--font-sub); font-style: italic; font-size: 1.75rem; line-height: 1.3; color: var(--blue-700) !important; }
.story__date { font-family: var(--font-head); font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--ink-3) !important; }

/* ---------- Docs & Presentations ---------- */

.deck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.deck-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 14px); justify-self: center; }
.divider { height: 1px; margin: clamp(36px, 5vw, 56px) 0; background: var(--line); }

/* ---------- Video Content ---------- */

.media-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	aspect-ratio: 16 / 9;
	padding: 32px;
	border-radius: var(--radius-lg);
	background: var(--band);
	text-align: center;
}
.media-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: var(--white); }
.media-panel__icon .icon { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }

/* ---------- App ---------- */

.app-intro { max-width: 820px; margin-bottom: clamp(32px, 4vw, 44px); }
.badge-soon { display: inline-block; padding: 3px 9px 2px; border-radius: 4px; background: var(--blue-700); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; vertical-align: 3px; white-space: nowrap; }
.masonry { columns: 4 220px; column-gap: 20px; }
.masonry__item { break-inside: avoid; margin-bottom: 20px; }
.masonry__link { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); cursor: zoom-in; transition: box-shadow 0.25s, transform 0.25s var(--ease); }
.masonry__link img { width: 100%; }

/* ---------- Flyer & Brochure ---------- */

.flyers { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 40px; align-items: start; }
.canva-embed { font-family: var(--font-head); font-size: 0.9375rem; color: var(--ink-3); }
.canva-embed a { font-weight: 700; }

/* ---------- Privacy Policy ---------- */

.doc { font-size: 1.0625rem; line-height: 1.7; }
.doc__meta { margin-bottom: 1.5em; padding-bottom: 1.25em; border-bottom: 1px solid var(--line); }
.doc__meta p { margin: 0; font-family: var(--font-head); font-size: 0.9375rem; color: var(--ink-3); }
.doc__meta .doc__kicker { margin-bottom: 6px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.doc__heading { margin: 2em 0 0.6em; font-family: var(--font-cond); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; color: var(--blue-700); }
.doc__subheading { margin: 1.3em 0 0.4em; font-family: var(--font-sub); font-weight: 400; font-style: italic; font-size: 1.3125rem; color: var(--ink); }
.doc p { margin: 0 0 0.75em; }

.maintenance-logo { width: min(480px, 100%); margin: 48px auto; }

/* ---------- Footer ---------- */

.site-footer { margin-top: clamp(48px, 6.5vw, 80px); background: var(--navy); color: rgba(255, 255, 255, 0.72); font-family: var(--font-head); font-size: 0.9375rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 44px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.site-footer__shield { width: 60px; height: auto; }
.site-footer__nav ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-footer__link { display: inline-block; padding: 5px 0; color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.site-footer__link:hover, .site-footer__link[aria-current="page"] { color: var(--white); text-decoration: underline; }
.site-footer__follow { margin: 0 0 14px; font-weight: 700; color: var(--white); }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: background-color 0.2s; }
.social-icon:hover { background: var(--blue-700); }
.social-icon img { width: 22px; height: 22px; }
.site-footer__base { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 18px 0 22px; font-size: 0.875rem; }
.site-footer__hosting { margin: 0; }
.site-footer__hosting a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.site-footer__hosting a:hover { color: var(--white); text-decoration: underline; }

/* ---------- Cookie notice ---------- */

.cookie-notice {
	position: fixed;
	z-index: 45;
	left: 16px; bottom: 16px;
	width: calc(100% - 32px);
	max-width: 420px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 16px 40px -12px rgba(17, 28, 46, 0.3);
}
.cookie-notice__text { margin: 0 0 14px; font-family: var(--font-head); font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.cookie-notice__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Lightbox (App screenshots) ---------- */

.lightbox {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 16px;
	background: rgba(11, 26, 51, 0.92);
	opacity: 0;
	transition: opacity 0.25s;
}
.lightbox.is-open { opacity: 1; }
.lightbox__img { max-width: min(92vw, 860px); max-height: calc(100vh - 128px); width: auto; height: auto; border-radius: var(--radius); }
.lightbox__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--white); }
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; text-align: center; color: rgba(255, 255, 255, 0.75); font-family: var(--font-head); font-size: 0.875rem; }


/* ==========================================================================
   INTERACTIVE MODE — motion and hover (layout lives in the base rules)
   ========================================================================== */

html.js[data-mode="industry"] .reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
}
html.js[data-mode="industry"] .reveal.is-in { opacity: 1; transform: none; }
html.js[data-mode="industry"] [data-delay="1"] { transition-delay: 0.08s; }
html.js[data-mode="industry"] [data-delay="2"] { transition-delay: 0.16s; }

[data-mode="industry"] .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
[data-mode="industry"] .card:hover .card__media img { transform: scale(1.04); }
[data-mode="industry"] .team-card:hover .team-card__photo img { transform: scale(1.04); }
[data-mode="industry"] .masonry__link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
[data-mode="industry"] .embed--slides { transition: box-shadow 0.25s; }
[data-mode="industry"] .embed--slides:hover { box-shadow: var(--shadow); }
[data-mode="industry"] .btn--primary:hover,
[data-mode="industry"] .btn--light:hover { transform: translateY(-1px); }

/* Founder's Story: reading progress line with a marker per passage */
[data-mode="industry"] .story__body { padding-left: calc(var(--gutter) + 40px); }
[data-mode="industry"] .story__spine { display: block; position: absolute; top: 8px; bottom: 8px; left: calc(var(--gutter) + 6px); width: 2px; border-radius: 1px; background: var(--line); }
[data-mode="industry"] .story__spine span { display: block; width: 100%; height: 100%; border-radius: 1px; background: var(--blue-500); transform-origin: 50% 0; transform: scaleY(var(--story, 0)); }
[data-mode="industry"] .story__beat { position: relative; }
[data-mode="industry"] .story__beat::before {
	content: "";
	position: absolute;
	left: -39px; top: 0.55em;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: inset 0 0 0 2px #B9C6D9;
	transition: background-color 0.4s, box-shadow 0.4s;
}
[data-mode="industry"] .story__beat.is-in::before { background: var(--blue-500); box-shadow: 0 0 0 4px rgba(31, 128, 255, 0.15); }

/* Embeds show a soft placeholder while loading */
[data-mode="industry"] .embed--slides,
[data-mode="industry"] .embed--sheet { background: linear-gradient(100deg, var(--tint) 30%, #E9EFF8 50%, var(--tint) 70%) 0 0 / 300% 100%; animation: cwc-skeleton 1.8s linear infinite; }

/* Smaller screens: menu collapses into a drop-down panel */
@media (max-width: 1099px) {
	[data-mode="industry"] .header-tools { display: flex; }
	[data-mode="industry"] .nav-toggle { display: inline-flex; }
	[data-mode="industry"] .site-header__inner { min-height: 64px; gap: 16px; }
	[data-mode="industry"] .site-nav {
		position: fixed;
		top: var(--nav-top, 64px); right: 0; bottom: 0; left: 0;
		z-index: 40;
		overflow-y: auto;
		padding: 8px var(--gutter) 32px;
		background: var(--white);
		border-top: 1px solid var(--line);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
	}
	[data-mode="industry"].nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	[data-mode="industry"] .site-nav__list { display: block; max-width: 640px; margin: 0 auto; }
	[data-mode="industry"] .site-nav__list li { border-bottom: 1px solid var(--line); }
	[data-mode="industry"] .site-nav__link { height: auto; padding: 15px 4px; font-size: 1.0625rem; white-space: normal; transition: color 0.2s, padding 0.2s; }
	[data-mode="industry"] .site-nav__link::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; transform: scaleY(0); }
	[data-mode="industry"] .site-nav__link[aria-current="page"]::after,
	[data-mode="industry"] .site-nav__link:hover::after { transform: scaleY(1); }
	[data-mode="industry"] .site-nav__link[aria-current="page"],
	[data-mode="industry"] .site-nav__link:hover { padding-left: 14px; }
	[data-mode="industry"].nav-open body { overflow: hidden; }
}


/* ==========================================================================
   READABLE MODE
   ========================================================================== */

html[data-mode="readable"] { font-size: 112.5%; }
html[data-mode="readable"][data-text="2"] { font-size: 125%; }
html[data-mode="readable"][data-text="3"] { font-size: 140%; }

[data-mode="readable"] body { color: #111; line-height: 1.7; }
[data-mode="readable"] a { text-decoration: underline; text-decoration-thickness: 0.08em; }
[data-mode="readable"] a:hover { text-decoration-thickness: 0.14em; }
[data-mode="readable"] :focus-visible { outline: 4px solid var(--blue-700); outline-offset: 3px; box-shadow: 0 0 0 7px #FFE27A; }
[data-mode="readable"] .container { max-width: 1000px; }
[data-mode="readable"] .topbar .container,
[data-mode="readable"] .site-header .container { max-width: 1180px; }
[data-mode="readable"] .container--text { max-width: 820px; }
[data-mode="readable"] .section { padding: 36px 0; }
[data-mode="readable"] .section--tint { background: #F3F6FB; border-top: 1px solid #D5DEEB; border-bottom: 1px solid #D5DEEB; }
[data-mode="readable"] .particles { display: none; }
[data-mode="readable"] .site-nav__link,
[data-mode="readable"] .page-band__title,
[data-mode="readable"] .hero__title,
[data-mode="readable"] .doc p { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }

/* Top bar: bigger controls */
[data-mode="readable"] .topbar { background: var(--blue-700); }
[data-mode="readable"] .topbar__inner { min-height: 60px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; row-gap: 8px; }
[data-mode="readable"] .topbar__notice { font-weight: 700; font-size: 1rem; text-decoration: underline; text-underline-offset: 0.2em; }
[data-mode="readable"] .mode-switch { box-shadow: inset 0 0 0 2px var(--white); border-radius: 8px; padding: 3px; }
[data-mode="readable"] .mode-switch__btn { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; font-weight: 700; color: var(--white); border-radius: 6px; }
[data-mode="readable"] .mode-switch__btn[aria-pressed="true"] { color: var(--blue-700); }
[data-mode="readable"] .topbar .text-size { display: inline-flex; }
[data-mode="readable"] .topbar .text-size__btn { color: var(--white); }
[data-mode="readable"] .topbar .text-size__btn[aria-pressed="true"] { background: var(--white); color: var(--blue-700); border-color: var(--white); }

/* Header: logo, then the full menu as large buttons */
[data-mode="readable"] .site-header { position: static; border-bottom: 4px solid var(--blue-700); }
[data-mode="readable"] .site-header__inner { display: block; padding-top: 18px; padding-bottom: 18px; }
[data-mode="readable"] .brand { display: inline-block; }
[data-mode="readable"] .brand__logo { height: 46px; }
[data-mode="readable"] .site-nav { margin-top: 16px; }
[data-mode="readable"] .site-nav__list { flex-wrap: wrap; gap: 10px; }
[data-mode="readable"] .site-nav__list li { flex: 1 1 auto; }
[data-mode="readable"] .site-nav__link {
	justify-content: center;
	height: auto;
	min-height: 54px;
	padding: 0.4em 0.8em;
	border: 2px solid var(--blue-700);
	border-radius: var(--radius);
	color: var(--blue-700);
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	white-space: normal;
}
[data-mode="readable"] .site-nav__link::after { display: none; }
[data-mode="readable"] .site-nav__link:hover { background: #E8F0FC; text-decoration: underline; }
[data-mode="readable"] .site-nav__link[aria-current="page"] { background: var(--blue-700); color: var(--white); }

/* Banners become plain page headings */
[data-mode="readable"] .band { background: var(--white); color: #111; }
[data-mode="readable"] .page-band { padding: 32px 0 4px; text-align: center; }
[data-mode="readable"] .page-band__title,
[data-mode="readable"] .hero__title { margin: 0 auto; font-family: var(--font-head); font-weight: 800; font-size: 2.125rem; letter-spacing: 0; line-height: 1.2; color: var(--blue-700); }
[data-mode="readable"] .page-band__code { color: var(--ink-3); font-size: 4rem; }
[data-mode="readable"] .story__title em { display: inline; margin: 0; font-size: 1em; color: var(--blue-700); }
[data-mode="readable"] .h2,
[data-mode="readable"] .h3 { font-family: var(--font-head); font-weight: 800; letter-spacing: 0; }
[data-mode="readable"] .h2 { font-size: 1.75rem; }
[data-mode="readable"] .h3 { font-size: 1.375rem; }
[data-mode="readable"] .label { font-size: 1rem; letter-spacing: 0.02em; text-transform: none; color: #111; }
[data-mode="readable"] .lede { font-size: 1.1875rem; line-height: 1.75; color: #111; }

/* Buttons: solid, large, underlined */
[data-mode="readable"] .btn { min-height: 54px; padding: 0.6em 1.4em; border-radius: var(--radius); font-weight: 700; font-size: 1.0625rem; text-decoration: underline; text-underline-offset: 0.2em; }
[data-mode="readable"] .btn--primary,
[data-mode="readable"] .btn--light { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }
[data-mode="readable"] .btn--primary:hover,
[data-mode="readable"] .btn--light:hover { background: var(--blue-800); color: var(--white); }
[data-mode="readable"] .btn--ghost { background: var(--white); color: var(--blue-700); border: 2px solid var(--blue-700); }
[data-mode="readable"] a.btn:not([href]) { text-decoration: none; }

/* Home: stacked like the original page */
[data-mode="readable"] .hero { padding: 32px 0 8px; }
[data-mode="readable"] .hero__layout { display: block; max-width: 820px; }
[data-mode="readable"] .hero__title { text-align: center; margin-bottom: 24px; }
[data-mode="readable"] .hero__title::after { display: none; }
[data-mode="readable"] .hero__frame { box-shadow: none; border-radius: var(--radius); transform: none; }
[data-mode="readable"] .hero__text { max-width: none; margin-top: 24px; font-size: 1.1875rem; color: #111; }
[data-mode="readable"] .about__grid { grid-template-columns: 1fr; max-width: 820px; gap: 36px; margin: 0 auto; }
[data-mode="readable"] .about__item { padding-left: 20px; border-left: 6px solid var(--blue-500); }
[data-mode="readable"] .about__item .h2::before { display: none; }
[data-mode="readable"] .about__item p { color: #111; }
[data-mode="readable"] .press__item img { height: 120px; }
[data-mode="readable"] .press__item--wral img { height: 104px; }
[data-mode="readable"] .donate { padding-bottom: 0; }
[data-mode="readable"] .donate-panel { display: block; max-width: 820px; margin: 0 auto; border: 3px solid var(--blue-700); border-radius: var(--radius); background: #F3F6FB; color: #111; }
[data-mode="readable"] .donate-panel .h2 { color: var(--blue-700); }
[data-mode="readable"] .donate-panel p { color: #111; max-width: none; margin-bottom: 20px; }

/* Cards and grids */
[data-mode="readable"] .card { border: 2px solid #C9D5E6; border-radius: var(--radius); }
[data-mode="readable"] .goals__grid { grid-template-columns: 1fr; max-width: 820px; margin: 24px auto 0; gap: 28px; }
[data-mode="readable"] .goal-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
[data-mode="readable"] .goal-card .card__media { aspect-ratio: auto; }
[data-mode="readable"] .goal-card .card__body { padding: 20px 24px; }
[data-mode="readable"] .card__body p { color: #111; font-size: 1.0625rem; }
[data-mode="readable"] .team { gap: 36px 24px; }
[data-mode="readable"] .team-card__name { font-size: 1.25rem; color: #111; }
[data-mode="readable"] .team-card__role { font-size: 1.125rem; }

/* Impact */
[data-mode="readable"] .embed--sheet,
[data-mode="readable"] .embed--slides { border: 2px solid #C9D5E6; }
[data-mode="readable"] .stats { grid-template-columns: 1fr; max-width: 820px; margin-left: auto; margin-right: auto; gap: 16px; }
[data-mode="readable"] .stat { border: 2px solid var(--blue-700); padding: 20px 24px; }
[data-mode="readable"] .stat__text { font-family: var(--font-head); font-style: normal; font-weight: 800; font-size: 1.5rem; color: var(--blue-700); }
[data-mode="readable"] .stat__num { display: inline; margin: 0; font: inherit; letter-spacing: 0; color: inherit; }

/* What We Do, Founder's Story, Privacy */
[data-mode="readable"] .mark { background: #FFF1B8; color: #111; padding: 0 0.1em; }
[data-mode="readable"] .story__beat p { font-size: 1.125rem; color: #111; }
[data-mode="readable"] .story__turn { display: inline; margin: 0; padding: 0; border: 0; font-family: var(--font-body); font-size: 1em; line-height: inherit; color: inherit; }
[data-mode="readable"] .story__beat--stark p,
[data-mode="readable"] .story__beat--rally p { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.75; color: #111; }
[data-mode="readable"] .story__beat--stark p { font-weight: 700; }
[data-mode="readable"] .story__signoff { border-top-color: #C9D5E6; }
[data-mode="readable"] .story__signature { font-family: var(--font-body); font-style: normal; font-size: 1.125rem !important; color: #111 !important; }
[data-mode="readable"] .story__date { font-family: var(--font-body); font-size: 1.125rem !important; color: #111 !important; letter-spacing: 0; }
[data-mode="readable"] .doc { font-size: 1.0625rem; color: #111; }
[data-mode="readable"] .doc__meta p { color: #111; font-size: 1rem; }
[data-mode="readable"] .doc__heading { font-family: var(--font-head); font-size: 1.3125rem; }

/* Docs, Video, App, Flyer */
[data-mode="readable"] .deck-grid { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
[data-mode="readable"] .deck-grid > :last-child:nth-child(odd) { width: auto; justify-self: stretch; }
[data-mode="readable"] .divider { height: 2px; background: #C9D5E6; }
[data-mode="readable"] .media-panel { aspect-ratio: auto; padding: 8px 0; background: none; }
[data-mode="readable"] .media-panel__icon { display: none; }
[data-mode="readable"] .badge-soon { padding: 0; background: none; color: inherit; font-family: inherit; font-size: 1em; letter-spacing: 0; vertical-align: baseline; font-weight: 700; }
[data-mode="readable"] .app-intro { margin-left: auto; margin-right: auto; }
[data-mode="readable"] .masonry { columns: 3 220px; }
[data-mode="readable"] .masonry__link { border: 2px solid #C9D5E6; }
[data-mode="readable"] .flyers { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
[data-mode="readable"] .canva-embed { font-size: 1rem; color: #111; }
[data-mode="readable"] .canva-embed--portrait { max-width: 600px; width: 100%; justify-self: center; }

/* Footer: blue and centered, like the original site */
[data-mode="readable"] .site-footer { background: var(--blue-700); color: var(--white); font-size: 1rem; text-align: center; }
[data-mode="readable"] .site-footer a { color: var(--white); }
[data-mode="readable"] .site-footer__grid { grid-template-columns: 1fr; justify-items: center; gap: 28px; padding-top: 40px; padding-bottom: 32px; }
[data-mode="readable"] .site-footer__brand { align-items: center; }
[data-mode="readable"] .site-footer .btn--light { background: var(--white); color: var(--blue-700); border-color: var(--white); }
[data-mode="readable"] .site-footer .btn--light:hover { background: #E8F0FC; color: var(--blue-800); }
[data-mode="readable"] .site-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
[data-mode="readable"] .site-footer__link { padding: 8px 0; font-weight: 700; text-decoration: underline; }
[data-mode="readable"] .site-footer__follow { font-size: 1.125rem; }
[data-mode="readable"] .social-icon { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
[data-mode="readable"] .site-footer__base { border-top-color: rgba(255, 255, 255, 0.3); font-size: 1rem; }
[data-mode="readable"] .site-footer__hosting a { color: var(--white); text-decoration: underline; }

/* Cookie notice: full-width bar */
[data-mode="readable"] .cookie-notice { left: 0; right: 0; bottom: 0; width: auto; max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px var(--gutter); border: 0; border-top: 4px solid var(--blue-700); border-radius: 0; }
[data-mode="readable"] .cookie-notice__text { flex: 1 1 420px; margin: 0; font-size: 1rem; color: #111; }

/* No motion in Readable mode */
[data-mode="readable"] *, [data-mode="readable"] *::before, [data-mode="readable"] *::after { animation: none !important; transition: none !important; }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1099px) {
	.site-nav__link { padding: 0 10px; }
}

@media (max-width: 960px) {
	.goals__grid, .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.goals__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
	.deck-grid { grid-template-columns: 1fr; }
	.deck-grid > :last-child:nth-child(odd) { width: auto; justify-self: stretch; }
	[data-mode="readable"] .goals__grid > :last-child:nth-child(odd) { width: auto; justify-self: stretch; }
}

@media (max-width: 860px) {
	/* Display controls move from the top bar into the header */
	.topbar__tools { display: none; }
	.topbar__inner { justify-content: center; text-align: center; }
	.header-tools { display: flex; }
	.mode-toggle { display: inline-flex; }

	.hero__layout { grid-template-columns: 1fr; grid-template-areas: "title" "media" "text"; grid-template-rows: auto; }
	.hero__title { margin-bottom: 22px; }
	.hero__media { margin-bottom: 24px; }
	.hero__text { max-width: none; }
	.about__grid { grid-template-columns: 1fr; gap: 36px; }
	.donate-panel { grid-template-columns: 1fr; }
	.donate-panel__action { justify-self: start; }
	.stats { grid-template-columns: 1fr; }
	.flyers { grid-template-columns: 1fr; }
	.canva-embed--portrait { max-width: 520px; width: 100%; justify-self: center; }

	[data-mode="readable"] .site-header__inner { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 14px; }
	[data-mode="readable"] .header-tools { order: 1; }
	[data-mode="readable"] .site-nav { order: 2; }
	[data-mode="readable"] .header-tools { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
	[data-mode="readable"] .header-tools .text-size { display: inline-flex; color: var(--blue-700); }
	[data-mode="readable"] .header-tools .text-size__btn[aria-pressed="true"] { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }
	[data-mode="readable"] .mode-toggle { min-height: 48px; font-size: 1rem; font-weight: 700; border: 2px solid var(--blue-700); color: var(--blue-700); }
	[data-mode="readable"] .site-nav { width: 100%; margin-top: 0; }
	[data-mode="readable"] .site-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	[data-mode="readable"] .goal-card { grid-template-columns: 1fr; }
	[data-mode="readable"] .goal-card .card__media { aspect-ratio: 1 / 1; }
}

@media (max-width: 560px) {
	:root { --header-h: 64px; }
	body { font-size: 1.0625rem; }
	.brand__logo { height: 30px; }
	.topbar__notice { font-size: 0.8125rem; }
	.goals__grid { grid-template-columns: 1fr; }
	.goals__grid > :last-child:nth-child(odd) { width: auto; justify-self: stretch; }
	.team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
	.team-card__name { font-size: 1rem; }
	.team-card__role { font-size: 0.9375rem; }
	.press__item img { height: 100px; }
	.press__item--wral img { height: 88px; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.site-footer__brand { flex-direction: column; align-items: flex-start; }
	.media-panel { aspect-ratio: 4 / 3; }
	.masonry { columns: 2 140px; column-gap: 12px; }
	.masonry__item { margin-bottom: 12px; }
	.cookie-notice__actions .btn { flex: 1; }
	[data-mode="readable"] .masonry { columns: 1; }
	[data-mode="readable"] .team { gap: 28px 14px; }
	[data-mode="readable"] .team-card__name { font-size: 1.0625rem; }
	[data-mode="readable"] .team-card__role { font-size: 1rem; }
	[data-mode="readable"] .cookie-notice { padding: 14px var(--gutter); gap: 10px; }
	[data-mode="readable"] .cookie-notice__text { font-size: 0.9375rem; }
}

@media (max-width: 400px) {
	.site-header__inner { gap: 10px; }
	.brand { flex: 0 1 auto; min-width: 0; }
	.brand__logo { width: 100%; height: auto; max-height: 28px; }
	.header-tools { gap: 6px; }
	.mode-toggle { padding: 0 10px 0 6px; font-size: 0.8125rem; }
	[data-mode="readable"] .brand__logo { width: auto; max-height: none; height: 38px; }
	[data-mode="readable"] .text-size__label { display: none; }
}


/* ==========================================================================
   Fallbacks, motion preferences, print
   ========================================================================== */

@keyframes cwc-skeleton {
	from { background-position: 100% 0; }
	to { background-position: -50% 0; }
}

@supports not (aspect-ratio: 1 / 1) {
	.embed--slides { height: 0; padding-top: 59.27%; }
	.embed--slides > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.team-card__photo { position: relative; height: 0; padding-top: 125%; }
	.card__media { position: relative; height: 0; padding-top: 100%; }
	.team-card__photo img, .card__media img { position: absolute; top: 0; left: 0; }
	.media-panel { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
	html.js[data-mode="industry"] .reveal { opacity: 1; transform: none; }
	.hero__frame { transform: none; }
}

@media print {
	.topbar, .site-header, .site-footer, .cookie-notice, .particles { display: none !important; }
	.reveal { opacity: 1 !important; transform: none !important; }
	body { font-size: 12pt; }
	.band, .donate-panel, .media-panel { background: none !important; color: #111 !important; }
	.page-band__title, .hero__title, .donate-panel .h2 { color: #004AAD !important; }
	.hero__text, .donate-panel p, .story__title em { color: #111 !important; }
	.hero__frame { transform: none !important; }
}