/* yENSOF brand base. Every value here comes from the Branding Kit. */
:root {
	--plum: #93378E;        /* yENSOF Plum: headings, accents */
	--deep: #5C2467;        /* Deep Plum: headers, covers, dark surfaces */
	--night: #3A1240;       /* deep plum pushed darker for large dark fields */
	--lilac: #D9B7D7;       /* Lilac Tint: borders, secondary accents */
	--lav: #F3E9F4;         /* Soft Lavender: panels, photo tiles */
	--green: #5D9F2B;       /* Signal Green: marks and accents only */
	--green-ui: #4A8420;    /* Signal Green deepened to carry white text at AA */
	--ink: #222222;
	--ink-2: #4A4550;
	--line: #E7DDE9;
	--white: #ffffff;

	--f-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
	--f-body: "Inter", ui-sans-serif, system-ui, sans-serif;

	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;
	--wrap: 1200px;
	--gutter: clamp(20px, 4vw, 40px);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 .5em;
	color: var(--deep);
}
button { font: inherit; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--deep); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
	text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--lilac); }

/* Buttons: one green action per view, everything else plum or quiet. */
.btn {
	display: inline-flex; align-items: center; gap: .55em;
	font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .01em;
	padding: 14px 22px; border-radius: 999px; border: 2px solid transparent;
	text-decoration: none; cursor: pointer; line-height: 1.1; white-space: nowrap;
	transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-go { background: var(--green-ui); color: #fff; }
.btn-go:hover { background: #3F7A18; }
.btn-line { border-color: var(--plum); color: var(--plum); background: transparent; }
.btn-line:hover { background: var(--plum); color: #fff; }
.btn-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-light:hover { background: #fff; color: var(--deep); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.logo { display: block; }
.logo img { width: 124px; height: auto; } /* kit minimum on screen is 120 px wide */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}

.nb { white-space: nowrap; }

@media (max-width: 620px) { .br-wide { display: none; } }