/**
 * CARTA Strategic Plan 2026-2030 page.
 *
 * Everything is scoped under .carta-sp so the theme and Elementor cannot leak
 * into it and it cannot leak out. Colours are the CARTA palette already used by
 * the impact dashboard, so the two pages read as one site.
 */

.carta-sp{
	/* Brand */
	--csp-gold: #efa400;
	--csp-gold-soft: #f6c964;
	--csp-brown: #8a5a11;
	--csp-brown-deep: #5d3c0a;
	--csp-ink: #16213e;
	--csp-cream: #faeed1;
	--csp-cream-pale: #fdfbf5;

	/* Surfaces and text */
	--csp-paper: #ffffff;
	--csp-text: #2b2a26;
	--csp-text-soft: #5f5a50;
	--csp-line: rgba(138, 90, 17, .18);
	--csp-shadow: 0 1px 2px rgba(45, 33, 12, .05), 0 12px 32px rgba(45, 33, 12, .07);

	/* Set by JS to the real document width, so full-bleed sections do not
	   overflow by the width of the scrollbar. 100vw is the fallback. */
	--csp-vw: 100vw;

	--csp-radius: 14px;
	--csp-measure: 1180px;

	box-sizing: border-box;
	color: var(--csp-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* No overflow clipping here: it would clip the full-bleed sections, which are
   this element's own children. Width is kept honest by --csp-vw instead. */

.carta-sp *,
.carta-sp *::before,
.carta-sp *::after{
	box-sizing: inherit;
}

.carta-sp p{
	margin: 0 0 1em;
}

.carta-sp.carta-sp h1,
.carta-sp.carta-sp h2,
.carta-sp.carta-sp h3{
	margin: 0 0 .5em;
	line-height: 1.18;
	color: var(--csp-ink);
	letter-spacing: -.01em;
}

.carta-sp img{
	max-width: 100%;
	display: block;
}

/* A section that escapes the theme's content column and spans the window. */
.carta-sp .csp-bleed{
	width: var(--csp-vw);
	max-width: var(--csp-vw);
	margin-left: calc(50% - var(--csp-vw) / 2);
	margin-right: calc(50% - var(--csp-vw) / 2);
}

.carta-sp .csp-wrap{
	max-width: var(--csp-measure);
	margin: 0 auto;
	padding: 0 24px;
}

/* The printed plan's border band, reused as a tintable texture. Delivered as a
   mask so one file can be any colour: a background-image SVG cannot inherit. */
.carta-sp .csp-pattern{
	-webkit-mask-image: var(--csp-pattern-src);
	mask-image: var(--csp-pattern-src);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: 96px 96px;
	mask-size: 96px 96px;
	background-color: currentColor;
}

/* ------------------------------------------------------------------ buttons */

.carta-sp .csp-btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.carta-sp .csp-btn:focus-visible{
	outline: 3px solid var(--csp-gold);
	outline-offset: 3px;
}

.carta-sp .csp-btn:hover{
	transform: translateY(-2px);
}

.carta-sp .csp-btn-primary{
	background: var(--csp-gold);
	color: #241a06;
}

.carta-sp .csp-btn-primary:hover{
	background: var(--csp-gold-soft);
	color: #241a06;
}

.carta-sp .csp-btn-ghost{
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.carta-sp .csp-btn-ghost:hover{
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

.carta-sp .csp-btn-outline{
	background: transparent;
	border-color: var(--csp-brown);
	color: var(--csp-brown);
}

.carta-sp .csp-btn-outline:hover{
	background: var(--csp-brown);
	color: #fff;
}

.carta-sp .csp-btn svg{
	width: 18px;
	height: 18px;
	flex: none;
}

/* -------------------------------------------------------------------- hero */

.carta-sp .csp-hero{
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(78svh, 720px);
	padding: 96px 0 56px;
	overflow: hidden;
	background: var(--csp-ink);
}

.carta-sp .csp-hero-photo{
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

/* Abstract wash over the photograph: brand gradient, then two soft gold glows, so the image reads as art rather than as a stock photo behind text. */
.carta-sp .csp-hero-wash{
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(58% 52% at 84% 16%, rgba(239, 164, 0, .24), transparent 72%),
		linear-gradient(104deg, rgba(22, 33, 62, .93) 0%, rgba(22, 33, 62, .8) 45%, rgba(93, 60, 10, .68) 100%);
}

/* Kept deliberately faint: a hint of the printed plan's border pattern rather
   than a wallpaper. The mask-image here comes from .csp-pattern, so do not set
   one on this rule: it would replace the pattern instead of combining with it. */
.carta-sp .csp-hero-texture{
	position: absolute;
	inset: 0;
	z-index: -1;
	color: var(--csp-cream);
	opacity: .05;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.carta-sp .csp-hero-inner{
	position: relative;
	width: 100%;
}

.carta-sp .csp-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 7px 16px;
	border: 1px solid rgba(250, 238, 209, .4);
	border-radius: 999px;
	background: rgba(22, 33, 62, .4);
	color: var(--csp-cream);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	backdrop-filter: blur(3px);
}

.carta-sp .csp-eyebrow::before{
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--csp-gold);
}

.carta-sp .csp-hero h1{
	max-width: 15ch;
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(2.4rem, 6.2vw, 4.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.carta-sp .csp-hero h1 .csp-years{
	display: block;
	color: var(--csp-gold);
}

.carta-sp .csp-hero-lead{
	max-width: 56ch;
	margin: 0 0 30px;
	color: rgba(255, 255, 255, .92);
	font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}

.carta-sp .csp-hero-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 26px;
}

.carta-sp .csp-hero-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	color: rgba(250, 238, 209, .82);
	font-size: .86rem;
	letter-spacing: .02em;
}

.carta-sp .csp-hero-meta span{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ---------------------------------------------------------------- framework */

.carta-sp .csp-section{
	padding: 78px 0;
}

.carta-sp .csp-section-cream{
	background: var(--csp-cream-pale);
	border-top: 1px solid var(--csp-line);
	border-bottom: 1px solid var(--csp-line);
}

.carta-sp .csp-section-head{
	max-width: 62ch;
	margin-bottom: 40px;
}

.carta-sp .csp-kicker{
	margin: 0 0 12px;
	color: var(--csp-brown);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.carta-sp .csp-section h2{
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 800;
}

.carta-sp .csp-section-head p:not(.csp-kicker){
	color: var(--csp-text-soft);
	font-size: 1.05rem;
	margin-bottom: 0;
}

.carta-sp .csp-vm{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
	margin-bottom: 52px;
}

.carta-sp .csp-card{
	position: relative;
	padding: 32px;
	border: 1px solid var(--csp-line);
	border-radius: var(--csp-radius);
	background: var(--csp-paper);
	box-shadow: var(--csp-shadow);
}

.carta-sp .csp-card-vision{
	background:
		linear-gradient(180deg, rgba(250, 238, 209, .5), rgba(255, 255, 255, 0) 55%),
		var(--csp-paper);
}

.carta-sp .csp-card h3{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	color: var(--csp-brown);
	font-size: .92rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.carta-sp .csp-card h3 svg{
	width: 30px;
	height: 30px;
	flex: none;
	color: var(--csp-gold);
}

.carta-sp .csp-card p{
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--csp-text);
}

.carta-sp .csp-values{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.carta-sp .csp-value{
	padding: 24px 22px;
	border: 1px solid var(--csp-line);
	border-radius: var(--csp-radius);
	background: var(--csp-paper);
}

.carta-sp .csp-value-mark{
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 11px;
	background: var(--csp-cream);
	color: var(--csp-brown);
}

.carta-sp .csp-value-mark svg{
	width: 21px;
	height: 21px;
}

.carta-sp .csp-value h3{
	margin-bottom: 6px;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--csp-ink);
	letter-spacing: 0;
	text-transform: none;
}

.carta-sp .csp-value p{
	margin: 0;
	font-size: .92rem;
	color: var(--csp-text-soft);
}

/* --------------------------------------------------------------- objectives */

.carta-sp .csp-objectives{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: csp-obj;
}

.carta-sp .csp-objective{
	position: relative;
	display: flex;
	gap: 18px;
	padding: 26px 24px;
	border: 1px solid var(--csp-line);
	border-radius: var(--csp-radius);
	background: var(--csp-paper);
	transition: transform .2s ease, box-shadow .2s ease;
}

.carta-sp .csp-objective:hover{
	transform: translateY(-3px);
	box-shadow: var(--csp-shadow);
}

.carta-sp .csp-objective::before{
	counter-increment: csp-obj;
	content: "0" counter(csp-obj);
	flex: none;
	align-self: flex-start;
	padding: 6px 11px;
	border-radius: 8px;
	background: var(--csp-cream);
	color: var(--csp-brown);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .04em;
}

.carta-sp .csp-objective h3{
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--csp-ink);
}

/* Goal pulled from the plan's theory of change. */
.carta-sp .csp-goal{
	position: relative;
	isolation: isolate;
	margin-top: 46px;
	padding: 44px 40px;
	border-radius: var(--csp-radius);
	background: linear-gradient(120deg, var(--csp-brown-deep), var(--csp-brown));
	color: #fff;
	overflow: hidden;
}

.carta-sp .csp-goal-texture{
	position: absolute;
	inset: 0;
	z-index: -1;
	color: var(--csp-gold);
	opacity: .16;
	pointer-events: none;
}

.carta-sp .csp-goal .csp-kicker{
	color: var(--csp-gold-soft);
}

.carta-sp .csp-goal p{
	max-width: 46ch;
	margin: 0;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.45;
	text-wrap: balance;
}

/* ---------------------------------------------------------------- contents */

.carta-sp .csp-contents{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 34px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: csp-toc;
}

.carta-sp .csp-contents a{
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 15px 4px;
	border-bottom: 1px solid var(--csp-line);
	color: var(--csp-text);
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}

.carta-sp .csp-contents a:hover,
.carta-sp .csp-contents a:focus-visible{
	color: var(--csp-brown);
	padding-left: 10px;
}

.carta-sp .csp-contents a:focus-visible{
	outline: 3px solid var(--csp-gold);
	outline-offset: 2px;
}

/* A leader rule, so the page number reads as a page number. */
.carta-sp .csp-contents a span{
	flex: none;
	max-width: calc(100% - 46px);
}

.carta-sp .csp-contents a::after{
	content: "";
	flex: 1 1 auto;
	align-self: center;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--csp-line) 0 2px, transparent 2px 6px);
}

.carta-sp .csp-contents a em{
	flex: none;
	order: 3;
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--csp-brown);
}

/* ------------------------------------------------------------------ reader */

.carta-sp .csp-reader{
	position: relative;
	display: flex;
	flex-direction: column;
	/* A definite height, not a minimum: the page image sizes itself with
	   max-height: 100%, and a percentage against an indefinite height is
	   ignored, which would let a 2105px page push the section past the window.
	   --csp-top is the site's fixed header, measured by the script. */
	height: calc(100svh - var(--csp-top, 0px));
	min-height: 520px;
	scroll-margin-top: var(--csp-top, 0px);
	background: #10192f;
	color: #fff;
}

.carta-sp .csp-reader:fullscreen{
	height: 100vh;
	scroll-margin-top: 0;
}

.carta-sp .csp-reader-bar{
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 20px;
	border-bottom: 1px solid rgba(250, 238, 209, .16);
	background: rgba(10, 16, 30, .92);
}

.carta-sp .csp-reader-title{
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-right: auto;
	min-width: 0;
}

.carta-sp .csp-reader-title strong{
	font-size: .98rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.carta-sp .csp-reader-title span{
	color: rgba(250, 238, 209, .6);
	font-size: .8rem;
	white-space: nowrap;
}

.carta-sp .csp-nav{
	display: flex;
	align-items: center;
	gap: 6px;
}

.carta-sp .csp-icon-btn{
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(250, 238, 209, .28);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.carta-sp .csp-icon-btn:hover:not(:disabled){
	background: rgba(239, 164, 0, .2);
	border-color: var(--csp-gold);
}

.carta-sp .csp-icon-btn:focus-visible{
	outline: 3px solid var(--csp-gold);
	outline-offset: 2px;
}

.carta-sp .csp-icon-btn:disabled{
	opacity: .32;
	cursor: default;
}

.carta-sp .csp-icon-btn svg{
	width: 18px;
	height: 18px;
}

.carta-sp .csp-counter{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .88rem;
	font-variant-numeric: tabular-nums;
	color: rgba(250, 238, 209, .9);
}

.carta-sp.carta-sp .csp-counter.csp-counter input{
	width: 46px;
	padding: 5px 2px;
	border: 1px solid rgba(250, 238, 209, .28);
	border-radius: 7px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.carta-sp .csp-counter input::-webkit-outer-spin-button,
.carta-sp .csp-counter input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

.carta-sp .csp-counter input:focus-visible{
	outline: 2px solid var(--csp-gold);
	outline-offset: 1px;
}

.carta-sp .csp-tools{
	display: flex;
	align-items: center;
	gap: 6px;
}

.carta-sp .csp-text-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid rgba(250, 238, 209, .28);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	font-size: .86rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}

.carta-sp .csp-text-btn:hover{
	background: rgba(239, 164, 0, .2);
	border-color: var(--csp-gold);
	color: #fff;
}

.carta-sp .csp-text-btn:focus-visible{
	outline: 3px solid var(--csp-gold);
	outline-offset: 2px;
}

.carta-sp .csp-text-btn svg{
	width: 16px;
	height: 16px;
	flex: none;
}

/* The page track. One slide per page, snapped horizontally: swipe on touch, arrow keys and the buttons elsewhere. The page itself never scroll-jacks. */
.carta-sp .csp-stage{
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(239, 164, 0, .1), transparent 70%),
		#10192f;
}

.carta-sp .csp-stage::-webkit-scrollbar{
	display: none;
}

.carta-sp .csp-slide{
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.carta-sp .csp-slide img{
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
	background: #fff;
}

/* Fit width: the page fills the column and the slide scrolls down it. Default
   on narrow screens, where a whole A4 page scaled to the viewport is unreadable. */
.carta-sp .csp-reader.is-fit-width .csp-slide{
	align-items: flex-start;
}

.carta-sp .csp-reader.is-fit-width .csp-slide img{
	width: 100%;
	max-width: 900px;
	max-height: none;
}

.carta-sp .csp-reader:fullscreen .csp-stage{
	background: #0b1222;
}

.carta-sp .csp-reader-hint{
	padding: 10px 20px 14px;
	border-top: 1px solid rgba(250, 238, 209, .12);
	background: rgba(10, 16, 30, .92);
	color: rgba(250, 238, 209, .6);
	font-size: .8rem;
	text-align: center;
}

.carta-sp .csp-reader-hint a{
	color: var(--csp-gold-soft);
}

/* Screen readers and visitors without JS get the real document, not 24 images. */
.carta-sp .csp-sr{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- closing band */

.carta-sp .csp-cta{
	position: relative;
	isolation: isolate;
	padding: 72px 0;
	background: var(--csp-cream);
	overflow: hidden;
}

.carta-sp .csp-cta-texture{
	position: absolute;
	inset: 0;
	z-index: -1;
	color: var(--csp-brown);
	opacity: .08;
	pointer-events: none;
}

.carta-sp .csp-cta-inner{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.carta-sp .csp-cta h2{
	color: var(--csp-ink);
	margin-bottom: 8px;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.carta-sp .csp-cta p{
	margin: 0;
	color: var(--csp-text-soft);
}

/* ------------------------------------------------------------- narrow view */

@media (max-width: 860px){
	.carta-sp .csp-hero{
		min-height: auto;
		padding: 72px 0 44px;
	}

	.carta-sp .csp-section{
		padding: 56px 0;
	}

	.carta-sp .csp-goal{
		padding: 32px 26px;
	}

	.carta-sp .csp-reader-bar{
		gap: 10px;
		padding: 10px 14px;
	}

	.carta-sp .csp-reader-title{
		width: 100%;
		margin-right: 0;
	}

	.carta-sp .csp-nav{
		margin-right: auto;
	}

	.carta-sp .csp-slide{
		padding: 10px;
	}
}

@media (max-width: 560px) {
	.carta-sp .csp-hero-actions .csp-btn{
		flex: 1 1 100%;
		justify-content: center;
	}

	.carta-sp .csp-tools .csp-label{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.carta-sp *{
		transition-duration: .01ms !important;
	}

	.carta-sp .csp-stage{
		scroll-behavior: auto;
	}

	.carta-sp .csp-btn:hover,
	.carta-sp .csp-objective:hover{
		transform: none;
	}
}

@media print {
	.carta-sp .csp-reader,

	.carta-sp .csp-hero-actions{
		display: none;
	}
}