/* Safeguarding redesign prototype — variant 3 «Кампания» (editorial).
   Flagship-programme treatment: deep-navy panels with football-pitch line
   markings as texture, oversized Montserrat-ExtraBold display type, a stats
   band, chapter markers 01–04 and generous yellow accents. All classes are
   prefixed sgv3- — see views/site/safeguarding-variants/. */

.sgv3 {
	--sgv3-navy: #133c8b;
	--sgv3-deep: #0d2a66;
	--sgv3-night: #0a1f4d;
	--sgv3-ink: #131f3a;
	--sgv3-body: #47546f;
	--sgv3-line: #e1e7f2;
	--sgv3-panel: #f4f6fa;
	--sgv3-yellow: #fbe736;
	color: var(--sgv3-ink);
	font-family: "Montserrat-Regular", sans-serif;
	padding-bottom: 80px;
}

.sgv3 .sgv3-ic { display: inline-block; flex: 0 0 auto; height: 24px; vertical-align: middle; width: 24px; }
.sgv3 .sgv3-ic--sm { height: 15px; width: 15px; }

/* Scroll reveals: hidden state applies only once JS adds .sgv3-js on <html>
   (and prefers-reduced-motion already opted the page out in JS). */
.sgv3-js .sgv3-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.sgv3-js .sgv3-reveal.is-in { opacity: 1; transform: none; }

/**** Pitch texture ****/
.sgv3-pitch { height: 100%; left: 0; opacity: .07; pointer-events: none; position: absolute; top: 0; width: 100%; }

/**** Hero ****/
.sgv3-hero {
	background: linear-gradient(160deg, var(--sgv3-navy) 0%, var(--sgv3-deep) 55%, var(--sgv3-night) 100%);
	border-radius: 24px;
	color: #ffffff;
	margin-top: 30px;
	overflow: hidden;
	position: relative;
}

.sgv3-hero-inner { padding: 80px 70px 60px; position: relative; }

.sgv3-kicker {
	background: var(--sgv3-yellow);
	border-radius: 3px;
	color: var(--sgv3-navy);
	display: inline-block;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	margin: 0 0 30px;
	padding: 9px 14px 8px;
	text-transform: uppercase;
}

.sgv3-title {
	color: #ffffff;
	font-family: "Montserrat-ExtraBold", sans-serif;
	font-size: 64px;
	letter-spacing: .01em;
	line-height: 1.04;
	margin: 0 0 26px;
	max-width: 900px;
	text-transform: uppercase;
}

.sgv3-title span { color: var(--sgv3-yellow); }

.sgv3-lead { color: #d6dff2; font-size: 17px; line-height: 1.65; margin: 0; max-width: 660px; }

.sgv3-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.sgv3-btn {
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	display: inline-block;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 13px;
	line-height: 1;
	padding: 16px 30px 15px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background .15s ease, color .15s ease;
}

.sgv3-btn--yellow { background: var(--sgv3-yellow); color: var(--sgv3-navy); }
.sgv3-btn--yellow:hover, .sgv3-btn--yellow:focus-visible { background: #ffffff; color: var(--sgv3-navy); text-decoration: none; }

.sgv3-btn--outline { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: #ffffff; }
.sgv3-btn--outline:hover, .sgv3-btn--outline:focus-visible { background: #ffffff; border-color: #ffffff; color: var(--sgv3-navy); text-decoration: none; }

.sgv3-hero-emergency {
	border-top: 1px solid rgba(255, 255, 255, .16);
	color: #b9c6e4;
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	padding: 20px 70px;
	position: relative;
}

.sgv3-hero-emergency strong { color: var(--sgv3-yellow); font-family: "Montserrat-ExtraBold", sans-serif; font-size: 17px; }

/**** Chapter scaffolding ****/
.sgv3-chapter { padding: 70px 0 0; scroll-margin-top: 20px; }

.sgv3-ch-head { align-items: baseline; display: flex; gap: 20px; margin-bottom: 34px; }

.sgv3-ch-num {
	-webkit-text-stroke: 2px var(--sgv3-navy);
	color: transparent;
	font-family: "Montserrat-ExtraBold", sans-serif;
	font-size: 56px;
	line-height: 1;
}

.sgv3-ch-title {
	color: var(--sgv3-navy);
	font-family: "Montserrat-ExtraBold", sans-serif;
	font-size: 32px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.sgv3-ch-rule { align-self: center; background: var(--sgv3-line); flex: 1 1 auto; height: 2px; position: relative; }
.sgv3-ch-rule::before { background: var(--sgv3-yellow); content: ""; height: 2px; left: 0; position: absolute; top: 0; width: 70px; }

.sgv3-sub {
	color: var(--sgv3-ink);
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 18px;
	margin: 40px 0 20px;
	text-transform: uppercase;
}

/**** 01 Understand ****/
.sgv3-defs { display: grid; gap: 34px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 34px; }

.sgv3-defs h3 {
	color: var(--sgv3-navy);
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 16px;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.sgv3-defs p { color: var(--sgv3-body); font-size: 14.5px; line-height: 1.6; margin: 0; }

.sgv3-areas { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }

.sgv3-areas li {
	align-items: center;
	background: var(--sgv3-panel);
	border-radius: 14px;
	color: var(--sgv3-ink);
	display: flex;
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 14px;
	gap: 14px;
	min-height: 76px;
	padding: 16px 18px;
}

.sgv3-area-ic {
	align-items: center;
	background: #ffffff;
	border-radius: 10px;
	color: var(--sgv3-navy);
	display: flex;
	flex: 0 0 44px;
	height: 44px;
	justify-content: center;
	transition: background .18s ease, color .18s ease;
}

.sgv3-areas li:hover .sgv3-area-ic { background: var(--sgv3-yellow); color: var(--sgv3-deep); }

/**** 02 Rules ****/
.sgv3-policy {
	align-items: center;
	background: linear-gradient(140deg, var(--sgv3-navy) 0%, var(--sgv3-deep) 100%);
	border-radius: 18px;
	color: #ffffff;
	display: grid;
	gap: 30px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 32px 38px;
}

.sgv3-policy-label {
	color: var(--sgv3-yellow);
	display: block;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.sgv3-policy h3 {
	color: #ffffff;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 22px;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.sgv3-policy p { color: #cdd8ef; font-size: 14px; line-height: 1.55; margin: 0; max-width: 560px; }

.sgv3-policy-actions { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.sgv3-policy-actions span { color: #9fb0d6; font-size: 11.5px; }

.sgv3-codes { display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sgv3-codes--understand { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sgv3-code {
	background: #ffffff;
	border: 1.5px solid var(--sgv3-line);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	padding: 22px 20px 16px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sgv3-code:hover { border-color: var(--sgv3-navy); box-shadow: 0 16px 34px rgba(10, 31, 77, .1); transform: translateY(-3px); }

.sgv3-code-ic {
	align-items: center;
	background: var(--sgv3-panel);
	border-radius: 11px;
	color: var(--sgv3-navy);
	display: flex;
	height: 46px;
	justify-content: center;
	margin-bottom: 14px;
	transition: background .18s ease, color .18s ease;
	width: 46px;
}

.sgv3-code:hover .sgv3-code-ic { background: var(--sgv3-yellow); color: var(--sgv3-deep); }

.sgv3-code h3,
.sgv3-code h4 {
	color: var(--sgv3-ink);
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 15px;
	line-height: 1.3;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.sgv3-code > p { color: #8b98b4; flex: 1 1 auto; font-size: 12px; margin: 0 0 14px; }

.sgv3-code-actions { border-top: 1px solid var(--sgv3-line); display: flex; gap: 18px; padding-top: 12px; }

.sgv3-code-actions a {
	align-items: center;
	color: var(--sgv3-navy);
	display: inline-flex;
	font-family: "Montserrat-Medium", sans-serif;
	font-size: 11.5px;
	gap: 6px;
	text-decoration: none;
	text-transform: uppercase;
}

.sgv3-code-actions a:hover, .sgv3-code-actions a:focus-visible { text-decoration: underline; }

/**** 03 Learn ****/
.sgv3-learn { display: grid; gap: 24px; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }

.sgv3-academy {
	background: linear-gradient(155deg, var(--sgv3-navy) 0%, var(--sgv3-night) 100%);
	border-radius: 18px;
	color: #ffffff;
	overflow: hidden;
	padding: 32px 32px 28px;
	position: relative;
}

.sgv3-academy-label {
	color: var(--sgv3-yellow);
	display: block;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.sgv3-academy h3 { color: #ffffff; font-family: "Montserrat-Bold", sans-serif; font-size: 21px; margin: 0 0 16px; text-transform: uppercase; }

.sgv3-academy ul { font-size: 13.5px; line-height: 1.5; margin: 0 0 22px; padding-left: 18px; position: relative; }
.sgv3-academy li { margin-bottom: 7px; }

.sgv3-academy-link {
	align-items: center;
	color: var(--sgv3-yellow);
	display: inline-flex;
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 12px;
	gap: 8px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

.sgv3-academy-link:hover, .sgv3-academy-link:focus-visible { color: #ffffff; text-decoration: none; }

.sgv3-academy-badge { bottom: -20px; color: rgba(255, 255, 255, .12); position: absolute; right: -16px; }
.sgv3-academy-badge .sgv3-ic { height: 140px; width: 140px; }

.sgv3-learn-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.sgv3-topics { display: grid; gap: 4px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }

.sgv3-topics li {
	align-items: center;
	border-bottom: 1px solid var(--sgv3-line);
	color: var(--sgv3-ink);
	display: flex;
	font-size: 14px;
	gap: 10px;
	line-height: 1.45;
	padding: 11px 0;
}

.sgv3-topics .sgv3-ic--sm { color: var(--sgv3-navy); }

.sgv3-int { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sgv3-int-card { background: var(--sgv3-panel); border-radius: 16px; padding: 20px 22px; }

.sgv3-int-card h4 {
	color: var(--sgv3-navy);
	font-family: "Montserrat-ExtraBold", sans-serif;
	font-size: 17px;
	letter-spacing: .04em;
	margin: 0 0 12px;
}

.sgv3-int-card ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }

.sgv3-int-card a {
	align-items: flex-start;
	color: var(--sgv3-ink);
	display: flex;
	font-family: "Montserrat-Medium", sans-serif;
	font-size: 12.5px;
	gap: 9px;
	line-height: 1.45;
	padding: 6px 0;
	text-decoration: none;
}

.sgv3-int-card a:hover, .sgv3-int-card a:focus-visible { color: var(--sgv3-navy); text-decoration: none; }
.sgv3-int-card .sgv3-ic--sm { color: var(--sgv3-navy); margin-top: 2px; }

/**** 04 Act ****/
.sgv3-act {
	background: linear-gradient(150deg, var(--sgv3-navy) 0%, var(--sgv3-night) 100%);
	border-radius: 22px;
	color: #ffffff;
	overflow: hidden;
	position: relative;
}

.sgv3-act-inner {
	display: grid;
	gap: 50px;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
	padding: 50px 54px;
	position: relative;
}

.sgv3-act-copy h3 {
	color: #ffffff;
	font-family: "Montserrat-ExtraBold", sans-serif;
	font-size: 42px;
	line-height: 1.08;
	margin: 6px 0 18px;
	text-transform: uppercase;
}

.sgv3-act-copy h3 span { color: var(--sgv3-yellow); }

.sgv3-act-copy > p { color: #d6dff2; font-size: 15px; line-height: 1.6; margin: 0 0 26px; max-width: 460px; }

.sgv3-act-officer { align-items: center; display: flex; gap: 14px; margin-bottom: 22px; }
.sgv3-act-officer img { border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; display: block; flex: 0 0 56px; height: 56px; object-fit: cover; object-position: center top; width: 56px; }
.sgv3-act-officer p { color: #ffffff; font-family: "Montserrat-Medium", sans-serif; font-size: 13px; margin: 0 0 2px; }
.sgv3-act-officer a { color: var(--sgv3-yellow); font-size: 12.5px; overflow-wrap: anywhere; text-decoration: none; }
.sgv3-act-officer a:hover, .sgv3-act-officer a:focus-visible { text-decoration: underline; }

.sgv3-act-emergency { border-top: 1px solid rgba(255, 255, 255, .18); color: #b9c6e4; font-size: 12.5px; line-height: 1.6; margin: 0; padding-top: 18px; }
.sgv3-act-emergency strong { color: #ffffff; font-family: "Montserrat-ExtraBold", sans-serif; font-size: 17px; }

.sgv3-form { background: #ffffff; border-radius: 16px; color: var(--sgv3-ink); padding: 26px 26px 22px; }

.sgv3-field { margin-bottom: 14px; }

.sgv3-field label {
	color: var(--sgv3-ink);
	display: block;
	font-family: "Montserrat-Medium", sans-serif;
	font-size: 12.5px;
	margin-bottom: 5px;
}

.sgv3-field input, .sgv3-field textarea {
	background: #ffffff;
	border: 1.5px solid #ccd6e8;
	border-radius: 9px;
	box-sizing: border-box;
	font-family: "Montserrat-Regular", sans-serif;
	font-size: 14px;
	padding: 11px 14px;
	transition: border-color .15s ease;
	width: 100%;
}

.sgv3-field input:focus, .sgv3-field textarea:focus { border-color: var(--sgv3-navy); outline: none; }

.sgv3-field textarea { min-height: 100px; resize: vertical; }

.sgv3-form .sgv3-btn--yellow { width: 100%; }

.sgv3-field.has-error input, .sgv3-field.has-error textarea { border-color: #c62828; }
.sgv3-field-error { color: #c62828; font-size: 12.5px; line-height: 1.4; margin: 6px 0 0; }

.sgv3-form-sent { align-items: center; display: flex; gap: 12px; }
.sgv3-form-sent .sgv3-ic { color: #1e7d45; flex: 0 0 28px; height: 28px; width: 28px; }
.sgv3-form-sent p { font-family: "Montserrat-SemiBold", sans-serif; font-size: 15px; margin: 0; }

/* Honeypot: off-screen, not display:none, so bots still fill it in. */
.sgv3-hp {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	left: -9999px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

/**** President ****/
.sgv3-pres {
	align-items: start;
	display: grid;
	gap: 60px;
	grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
	padding: 80px 0 10px;
}

.sgv3-pres-photo { position: relative; }

.sgv3-pres-photo::before {
	border: 3px solid var(--sgv3-yellow);
	border-radius: 18px;
	bottom: -16px;
	content: "";
	left: 16px;
	position: absolute;
	right: -16px;
	top: 16px;
}

.sgv3-pres-photo img { border-radius: 18px; display: block; height: auto; position: relative; width: 100%; }

.sgv3-pres-label {
	color: #8b98b4;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.sgv3-pres-text p { color: var(--sgv3-body); font-size: 14.5px; line-height: 1.7; margin: 0 0 15px; }

.sgv3-pres-text p:first-child {
	color: var(--sgv3-navy);
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 19px;
	line-height: 1.55;
}

.sgv3-pres-sign { border-top: 1px solid var(--sgv3-line); color: var(--sgv3-body); font-size: 13.5px; line-height: 1.5; margin: 20px 0 0; padding-top: 18px; }
.sgv3-pres-sign strong { color: var(--sgv3-ink); font-family: "Montserrat-Bold", sans-serif; font-size: 15px; text-transform: uppercase; }

/**** FAQ ****/
.sgv3-faq-wrap { margin: 0 auto; max-width: 860px; padding: 60px 0 0; }

.sgv3-faq-title {
	color: var(--sgv3-navy);
	font-family: "Montserrat-ExtraBold", sans-serif;
	font-size: 32px;
	margin: 0 0 24px;
	text-align: center;
	text-transform: uppercase;
}

.sgv3-faq { border-top: 1px solid var(--sgv3-line); }

.sgv3-faq-item { border-bottom: 1px solid var(--sgv3-line); }

.sgv3-faq-item summary {
	color: var(--sgv3-ink);
	cursor: pointer;
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 15.5px;
	line-height: 1.45;
	list-style: none;
	padding: 18px 34px 18px 0;
	position: relative;
}

.sgv3-faq-item summary::-webkit-details-marker { display: none; }

.sgv3-faq-item summary::after {
	align-items: center;
	background: var(--sgv3-panel);
	border-radius: 50%;
	color: var(--sgv3-navy);
	content: "+";
	display: flex;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 16px;
	height: 26px;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 15px;
	width: 26px;
}

.sgv3-faq-item[open] summary { color: var(--sgv3-navy); }
.sgv3-faq-item[open] summary::after { background: var(--sgv3-yellow); content: "\2212"; }

.sgv3-faq-item > div { color: var(--sgv3-body); font-size: 14px; line-height: 1.65; padding: 0 34px 18px 0; }
.sgv3-faq-item p { margin: 0; }
.sgv3-faq-item a { color: var(--sgv3-navy); font-family: "Montserrat-Medium", sans-serif; }

/**** Footer trio ****/
.sgv3-foot { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 70px; }

.sgv3-foot-card {
	align-items: center;
	background: var(--sgv3-panel);
	border-radius: 16px;
	color: var(--sgv3-ink);
	display: flex;
	gap: 16px;
	padding: 20px 22px;
	text-decoration: none;
	transition: background .15s ease;
}

a.sgv3-foot-card:hover, a.sgv3-foot-card:focus-visible { background: #e9edf6; color: var(--sgv3-ink); text-decoration: none; }

.sgv3-foot-card > .sgv3-ic { color: var(--sgv3-navy); }

.sgv3-foot-card span:not(.sgv3-ic) { display: flex; flex: 1 1 auto; flex-direction: column; font-size: 12.5px; gap: 3px; line-height: 1.4; }
.sgv3-foot-card strong { color: var(--sgv3-navy); font-family: "Montserrat-Bold", sans-serif; font-size: 13px; text-transform: uppercase; }
.sgv3-foot-card .sgv3-ic--sm { color: #9fb1d1; }
a.sgv3-foot-card:hover .sgv3-ic--sm { color: var(--sgv3-navy); }

/**** Motion preferences (belt-and-braces on top of the JS opt-out) ****/
@media (prefers-reduced-motion: reduce) {
	.sgv3 *, .sgv3 *::before, .sgv3 *::after { transition: none !important; }
	.sgv3-js .sgv3-reveal { opacity: 1; transform: none; }
}

/**** Responsive ****/
@media (max-width: 1100px) {
	.sgv3-title { font-size: 48px; }
	.sgv3-hero-inner { padding: 55px 45px 45px; }
	.sgv3-hero-emergency { padding: 18px 45px; }
	.sgv3-act-inner { gap: 36px; grid-template-columns: 1fr; padding: 40px 42px; }
	.sgv3-pres { gap: 40px; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
	.sgv3-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.sgv3-defs { grid-template-columns: 1fr; gap: 20px; }
	.sgv3-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sgv3-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sgv3-learn { grid-template-columns: 1fr; }
	.sgv3-policy { grid-template-columns: 1fr; }
	.sgv3-policy-actions { align-items: flex-start; text-align: left; }
	.sgv3-pres { grid-template-columns: 1fr; }
	.sgv3-pres-photo { max-width: 320px; }
	.sgv3-foot { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.sgv3-hero { border-radius: 16px; margin-top: 16px; }
	.sgv3-hero-inner { padding: 36px 24px 30px; }
	.sgv3-title { font-size: 32px; }
	.sgv3-lead { font-size: 15px; }
	.sgv3-hero-actions, .sgv3-hero-actions .sgv3-btn { width: 100%; }
	.sgv3-hero-actions .sgv3-btn { box-sizing: border-box; }
	.sgv3-hero-emergency { padding: 16px 24px; }
	.sgv3-ch-num { font-size: 40px; }
	.sgv3-ch-title { font-size: 24px; }
	.sgv3-chapter { padding-top: 50px; }
	.sgv3-areas, .sgv3-codes, .sgv3-topics, .sgv3-int { grid-template-columns: 1fr; }
	.sgv3-act-inner { padding: 30px 22px; }
	.sgv3-act-copy h3 { font-size: 30px; }
	.sgv3-pres { padding-top: 60px; }
	.sgv3-pres-text p:first-child { font-size: 16.5px; }
	.sgv3-faq-title { font-size: 24px; }
}