/**
 * Yayasan Sukarelawan Siswa (YSS) — Design System
 * Reference: homepage comp (theme.jpeg)
 *
 * This file defines design tokens (custom properties) and reusable
 * component classes. Apply the component classes as "CSS Classes" on
 * Elementor widgets/sections/containers to match the reference design.
 * See design-system.md in the theme root for full usage documentation.
 */

/* ---------------------------------------------------------------------
 * 0. HORIZONTAL-SCROLL GUARD
 * Added 2026-08-30 after a mobile report of the page scrolling
 * horizontally past the intended screen width. There was no `overflow-x`
 * rule on html/body anywhere in this codebase before this — meaning
 * *any* element that's even a few px too wide makes the entire document
 * horizontally scrollable instead of just clipping quietly. Checked the
 * obvious suspects (several full-bleed decorative elements use negative
 * left/right offsets by design: .yss-cta's floating badge/doodle
 * stickers, .yss-hero__scroll, the .yss-hero__chip--* positions,
 * .yss-doodle--*) and all of them already have a `@media (max-width:
 * 767px)` mobile override that either hides or repositions them — so the
 * actual offending element, if there is a single one, wasn't found by
 * this code review. This can't be verified against a real narrow
 * viewport in this environment (see the `resize_window` limitation
 * elsewhere in CLAUDE.md), so treat this as a defensive guard rather
 * than a confirmed fix for one specific located element. `overflow-x:
 * hidden` scoped to
 * html/body only clips the *document's* own overflow — it does not
 * affect any element with its own internal `overflow-x: auto` (e.g. the
 * mission-list filter row, program category tabs), which stay scrollable
 * exactly as designed. width: 100% on body is a browser default already,
 * kept explicit here as a second guard against Elementor's `.elementor
 * *,:after,:before { box-sizing: border-box }` interacting oddly with
 * `max-width: 100vw` (100vw can be wider than the visible viewport on
 * some mobile browsers once you factor in the scrollbar-that-shouldn't-
 * exist — a self-fulfilling problem `overflow-x: hidden` sidesteps by
 * not needing 100vw math to be correct in the first place).
 * ------------------------------------------------------------------ */
html {
	overflow-x: hidden;
	width: 100%;
}

body {
	overflow-x: hidden;
	max-width: 100%;
}

/* ---------------------------------------------------------------------
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------ */
:root {
	/* Color — sampled directly from the YSS logo (black / red / white) */
	--yss-red: #CE2027;
	--yss-red-dark: #A11920;
	--yss-orange: #E2574C;
	--yss-ink: #101010;
	--yss-gray: #4B5563;
	--yss-gray-light: #A3A3A3;
	--yss-cream: #FFFFFF;
	--yss-border: #ECE0DF;
	--yss-white: #FFFFFF;
	--yss-gradient-glow: linear-gradient(135deg, var(--yss-orange) 0%, var(--yss-red) 100%);

	/* Typography */
	--yss-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--yss-font-script: 'Caveat', 'Segoe Script', cursive;
	--yss-fs-display: clamp(2.5rem, 4.2vw + 1rem, 3.5rem);
	--yss-fs-h2: clamp(1.875rem, 2.4vw + 1rem, 2.5rem);
	--yss-fs-h3: 1.375rem;
	--yss-fs-lead: 1.125rem;
	--yss-fs-body: 1rem;
	--yss-fs-small: 0.875rem;
	--yss-fs-eyebrow: 0.8125rem;
	--yss-lh-tight: 1.1;
	--yss-lh-heading: 1.25;
	--yss-lh-body: 1.6;
	--yss-tracking-eyebrow: 0.08em;

	/* Spacing (4px base scale) */
	--yss-space-1: 4px;
	--yss-space-2: 8px;
	--yss-space-3: 16px;
	--yss-space-4: 24px;
	--yss-space-5: 32px;
	--yss-space-6: 48px;
	--yss-space-7: 64px;
	--yss-space-8: 96px;
	--yss-section-py: clamp(56px, 8vw, 96px);

	/* Radius */
	--yss-radius-sm: 8px;
	--yss-radius-md: 16px;
	--yss-radius-lg: 24px;
	--yss-radius-pill: 999px;
	--yss-radius-card: 8px;

	/* Shadow */
	--yss-shadow-card: 0 20px 40px -16px rgba(18, 18, 18, 0.12);
	--yss-shadow-card-hover: 0 24px 48px -16px rgba(18, 18, 18, 0.18);
	--yss-shadow-card-flat: none;

	/* Layout */
	--yss-container: 1280px;
	--yss-container-narrow: 800px;
}

/* ---------------------------------------------------------------------
 * 2. BASE
 * ------------------------------------------------------------------ */
body {
	font-family: var(--yss-font);
	color: var(--yss-ink);
	background-color: var(--yss-white);
}

.yss-container {
	max-width: var(--yss-container);
	width: calc(100% - 80px);
	margin: auto;
}

@media (max-width: 1024px) {
	.yss-container {
		width: calc(100% - 48px);
	}
}

@media (max-width: 767px) {
	.yss-container {
		width: calc(100% - 30px);
	}
}

.yss-section {
	padding-block: var(--yss-section-py);
}

.yss-section--cream {
	background-color: var(--yss-cream);
}

.yss-section--tight {
	padding-block: var(--yss-space-6);
	padding-inline: var(--yss-space-5);
	border-radius: var(--yss-radius-lg);
}

@media (max-width: 767px) {
	.yss-section--tight {
		padding-inline: 15px;
	}
}

/* ---------------------------------------------------------------------
 * 3. EYEBROW / LABELS
 * ------------------------------------------------------------------ */
/* .yss-subtitle is a documented alias for .yss-eyebrow — same class, same
   rules, two names. Use .yss-subtitle when building a new widget/section
   and thinking of this as "the subtitle label above the heading" (e.g.
   "— Our Impact —") rather than a page-level eyebrow; both class names
   are interchangeable and always stay in sync since they share every
   rule below. See design-system.md for the reference entry. */
.yss-eyebrow,
.yss-subtitle {
	display: inline-block;
	font-family: var(--yss-font-script);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--yss-red);
	margin-bottom: var(--yss-space-2);
}

.yss-eyebrow--light,
.yss-subtitle--light {
	color: var(--yss-orange);
}

/* ---------------------------------------------------------------------
 * 4. HEADINGS
 * ------------------------------------------------------------------ */
.yss-display {
	font-size: var(--yss-fs-display);
	line-height: var(--yss-lh-tight);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--yss-ink);
}

.yss-display .yss-highlight,
.yss-heading .yss-highlight {
	color: var(--yss-red);
}

.yss-heading {
	font-size: var(--yss-fs-h2);
	line-height: var(--yss-lh-heading);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--yss-ink);
}

.yss-heading--on-dark {
	color: var(--yss-white);
}

.yss-heading--upper {
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Decorative brush-script accent for hero statements / subheaders */
.yss-script {
	display: inline-block;
	font-family: var(--yss-font-script);
	font-weight: 700;
	line-height: 1;
}

/* Modifier: render a heading in the brush-script accent font at a larger,
   more expressive scale (hero statements) instead of the default sans.
   Used exclusively by main hero titles (both homepages' hero and all 7
   .yss-split-cover subpage heroes — confirmed by grepping every page's
   _elementor_data for this class before touching it), so a change here
   only ever affects a hero title, never any other heading. Max size
   reduced 2026-08-30 from 5rem/80px to 4.125rem/66px per follow-up
   feedback ("76px" was this clamp's computed value at the reporter's
   viewport width, not the literal 5rem/80px max — the whole clamp was
   scaled down proportionally, not just the upper bound, to keep the
   same relative mobile-to-desktop scaling behavior). */
/* Elementor's Heading widget puts its "CSS Classes" control on the
   widget's *wrapper* div, not on the actual <h1>/<span> it renders inside
   (that inner tag only ever gets Elementor's own `.elementor-heading-title`
   class) — the same wrapper-vs-inner-element indirection already
   documented for the Button widget's `_css_classes` elsewhere in this
   file. font-family/color/font-weight still reach the inner tag fine
   here because those were also set as *real* Elementor typography
   settings on the title widget (which Elementor's own CSS generator
   targets correctly), but font-size/line-height/letter-spacing were
   deliberately left off that widget (see the hero-native-widget-
   conversion notes in CLAUDE.md) so this class's clamp() would govern
   size — except a value merely *inherited* from the wrapper loses to
   ANY explicit declaration on the child, even hello-elementor's low-
   specificity bare `h1 { font-size: 2.5rem }` reset rule, so the title
   silently rendered at a fixed 40px instead of the clamp. `inherit`
   here (not a duplicated value) means this class's clamp stays the
   single source of truth. */
.yss-display--script .elementor-heading-title {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.yss-display--script {
	font-family: var(--yss-font-script);
	font-weight: 700;
	font-size: clamp(2.75rem, 5.5vw + 0.75rem, 4.125rem);
	line-height: 0.95;
	letter-spacing: 0;
}

/* Eyebrow/subtitle labels get a small flanking dash, e.g. "— Our Impact —" */
.yss-eyebrow,
.yss-subtitle {
	position: relative;
}

.yss-eyebrow::before,
.yss-subtitle::before {
	content: '\2014\00A0';
}

.yss-eyebrow::after,
.yss-subtitle::after {
	content: '\00A0\2014';
}

.yss-lead {
	font-size: var(--yss-fs-lead);
	line-height: var(--yss-lh-body);
	color: var(--yss-gray);
}

/* ---------------------------------------------------------------------
 * 5. BUTTONS
 * ------------------------------------------------------------------ */
.yss-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--yss-space-2);
	font-family: var(--yss-font);
	font-size: var(--yss-fs-small);
	font-weight: 700;
	line-height: 1;
	padding: 16px 28px;
	border-radius: var(--yss-radius-pill);
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.yss-btn:hover {
	transform: translateY(-2px);
}

.yss-btn::after {
	content: '';
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M21.5904 20.1551L22.2683 12.4065L14.5197 11.7286M21.3107 13.21L11.3522 21.5662' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M21.5904 20.1551L22.2683 12.4065L14.5197 11.7286M21.3107 13.21L11.3522 21.5662' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

.yss-btn--primary {
	background-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-btn--primary:hover {
	background-color: #000;
	color: var(--yss-white);
}

.yss-btn--accent {
	background-color: var(--yss-red);
	color: var(--yss-white);
}

.yss-btn--accent::before {
	content: '';
	width: 15px;
	height: 14px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.yss-btn--accent.yss-btn--no-icon::before {
	content: none;
}

.yss-btn--accent::after {
	content: none;
}

.yss-btn--accent:hover {
	/* Black hover on red buttons, matching the brand-mark's black + red
	   pairing (see .yss-btn--filled-red, same rule) — was --yss-red-dark
	   before, per an explicit ask to make every red button's hover
	   consistent site-wide. */
	background-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-btn--outline {
	background-color: transparent;
	color: var(--yss-ink);
	border-color: var(--yss-ink);
}

.yss-btn--outline:hover {
	background-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-btn--outline-light {
	background-color: transparent;
	color: var(--yss-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.yss-btn--outline-light:hover {
	background-color: var(--yss-white);
	color: var(--yss-ink);
}

/* About Us hub "Learn More" buttons — solid red, white text, hover to
   solid black. Its own modifier rather than reusing .yss-btn--accent
   (same red/white base) since the hover target (black, not red-dark)
   differs and this is scoped to a specific ask on this page's buttons. */
.yss-btn--filled-red {
	background-color: var(--yss-red);
	color: var(--yss-white);
	border-color: var(--yss-red);
}

.yss-btn--filled-red:hover {
	background-color: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-btn--no-arrow::after {
	content: none;
}

.yss-link {
	display: inline-flex;
	align-items: center;
	gap: var(--yss-space-1);
	color: var(--yss-red);
	font-weight: 700;
	font-size: var(--yss-fs-small);
	text-decoration: none;
}

.yss-link::after {
	content: '';
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M21.5904 20.1551L22.2683 12.4065L14.5197 11.7286M21.3107 13.21L11.3522 21.5662' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M21.5904 20.1551L22.2683 12.4065L14.5197 11.7286M21.3107 13.21L11.3522 21.5662' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Used when a caller supplies its own icon (e.g. the "YSS Programs" widget's
   Button Icon control) instead of .yss-link's own CSS-drawn arrow above. */
.yss-link--custom-icon::after {
	display: none;
}

.yss-story-card__btn-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.yss-story-card__btn-icon svg {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------
 * 6. CARDS
 * ------------------------------------------------------------------ */
.yss-card {
	background-color: var(--yss-cream);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-card);
	box-shadow: var(--yss-shadow-card-flat);
	padding: var(--yss-space-4);
}

/* .yss-card rendered as a real <a> (Upcoming Programs cards) — a hover
   affordance so a clickable card reads as clickable. */
.yss-card--link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.yss-card--link:hover {
	box-shadow: var(--yss-shadow-lg);
	transform: translateY(-3px);
}

/* Stat card: icon circle + big number + label (Our Impact section).
   Frosted glass on the dark "Our Impact" section background (see 6b
   below) — ref: Figma "Main Design" node 36-505. Typography stays the
   site's own (--yss-font / .yss-stat-card__number|__label sizes) — only
   color/material changed to read on a dark background. */
.yss-stat-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--yss-radius-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	padding: var(--yss-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--yss-space-2);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.yss-stat-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%);
	pointer-events: none;
}

.yss-stat-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.yss-stat-card .yss-icon-circle {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: transform 0.25s ease;
}

.yss-stat-card:hover .yss-icon-circle {
	transform: scale(1.1) rotate(-6deg);
}

.yss-stat-card__number {
	font-size: 2rem;
	font-weight: 800;
	color: var(--yss-white);
	line-height: 1;
}

.yss-stat-card__label {
	font-size: var(--yss-fs-small);
	color: var(--yss-white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.yss-stat-card,
	.yss-stat-card .yss-icon-circle {
		transition: none;
	}
	.yss-stat-card:hover,
	.yss-stat-card:hover .yss-icon-circle {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * 6b. "OUR IMPACT" SECTION — dark glass background + torn-paper edges
 * Scoped with :has() so no Elementor content edit is needed: applies to
 * whichever .yss-section happens to contain the stat-card grid. Ref:
 * Figma "Main Design" node 36-505 (dark red glass panel) for the section
 * background, and the "Paper Resource" torn-paper prototype for the
 * top/bottom edge treatment. Fonts are untouched (.yss-eyebrow/.yss-heading
 * keep their existing family/size — only color flips to white here).
 * ------------------------------------------------------------------ */
.yss-section:has(.yss-stat-card, .yss-step-circle) {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--yss-ink) 0%, var(--yss-red-dark) 55%, var(--yss-red) 100%);
	padding-block: calc(var(--yss-section-py) + 32px);
}

.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-eyebrow,
.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-subtitle,
.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-lead {
	color: var(--yss-white);
}

.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-heading {
	color: var(--yss-white);
}

.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-btn--outline {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--yss-white);
}

/* Some "Our Impact" instances (e.g. /about/'s "Alumni by Race" breakdown)
   embed extra content authored with inline ink/gray text colors and the
   light-cream .yss-value-card component, on the assumption of a light
   section background — that assumption predates this section always
   getting the dark-glass gradient treatment below, so left as-is those
   colors read as near-invisible dark-on-dark. Inline `style` beats any
   class-based override regardless of specificity, so this needs
   `!important`; scoped to this section only, so it can't affect ink/gray
   text used intentionally elsewhere on the site. */
.yss-section:has(.yss-stat-card, .yss-step-circle) [style*="--yss-ink"] {
	color: var(--yss-white) !important;
}

.yss-section:has(.yss-stat-card, .yss-step-circle) [style*="--yss-gray"] {
	color: rgba(255, 255, 255, 0.75) !important;
}

.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-value-card {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
}

.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-value-card .yss-icon-circle {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.3);
}

.yss-section:has(.yss-stat-card, .yss-step-circle) .yss-btn--outline:hover {
	background-color: var(--yss-white);
	color: var(--yss-ink);
}

/* /home-video-hero/ only (body.page-id-305): restructure from the
   side-by-side split (text column | card grid) to a stacked, centered
   layout matching the Alumni Map section's pattern — eyebrow/heading/
   button centered on top, the card row centered underneath instead of
   beside it. Scoped to this one page since it's a bigger structural
   change than the shared dark-glass/torn-paper styling above. */
body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-split {
	flex-direction: column;
	align-items: center;
}

/* display:contents "dissolves" this div so its children (eyebrow, heading,
   button) become direct flex items of .yss-split alongside
   .yss-split__content — lets the button be reordered to appear AFTER the
   card grid via `order`, without moving it out of the text block in the
   actual HTML. text-align moves up to .yss-split since a display:contents
   element can't carry its own box-model styling (max-width, text-align,
   etc. would simply be ignored on it). */
body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-split {
	text-align: center;
}

body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-split__text {
	display: contents;
}

body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-split__content {
	order: 1;
	width: 100%;
	margin-top: var(--yss-space-4);
}

body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-split__text .yss-btn {
	order: 2;
	margin-top: var(--yss-space-4);
}

/* The eyebrow/heading were also carrying their default browser margins
   (an <h2> defaults to ~0.83em top+bottom, a big chunk of extra gap at
   this font size) on top of the explicit margins above — trim those too
   so "too much space" is actually fixed, not just moved around. */
body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-eyebrow,
body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-subtitle {
	margin: 0 0 20px;
}

body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-heading {
	margin: 0;
}

/* Cards themselves: fixed/bounded widths (not 1fr, which always stretches
   to fill the row) so the row has real leftover space for
   justify-content:center to center against — same trick the map
   section's stat pills use to read as a centered cluster, not a
   full-bleed strip. */
body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-grid--5 {
	grid-template-columns: repeat(5, minmax(160px, 200px)) !important;
	justify-content: center;
}

@media (max-width: 1024px) {
	body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-grid--5 {
		grid-template-columns: repeat(3, minmax(160px, 200px)) !important;
	}
}

@media (max-width: 767px) {
	body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-grid--5 {
		grid-template-columns: repeat(2, minmax(140px, 200px)) !important;
	}
}

@media (max-width: 480px) {
	body.page-id-305 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-grid--5 {
		grid-template-columns: minmax(140px, 220px) !important;
	}
}

/* Shared smooth-wave edge (replaces the earlier jagged torn-paper
   texture per a supplied reference — a gentle solid-color wave divider,
   not a paper tear). Solid white fill via clip-path:polygon() instead of
   an image asset: percentage coordinates scale to the flap's own fixed
   64px-tall box regardless of viewport width, and a smooth few-point
   curve (unlike fine jagged detail) doesn't lose its character when
   stretched, so no tiling trick is needed here the way the torn-paper
   version required. Reused for both flaps — the bottom one is this same
   shape flipped with scaleY(-1), so the wave points into the section
   from both top and bottom while the outer edge stays a clean straight
   line flush with the section boundary. */
.yss-section:has(.yss-stat-card, .yss-step-circle)::before,
.yss-section:has(.yss-stat-card, .yss-step-circle)::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 64px;
	background-color: var(--yss-white);
	clip-path: polygon(
		0% 0%, 100% 0%,
		100% 55%, 90% 70%, 80% 85%, 70% 95%, 60% 90%, 50% 70%,
		40% 50%, 30% 35%, 20% 45%, 10% 65%, 0% 80%
	);
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.22));
	pointer-events: none;
}

.yss-section:has(.yss-stat-card, .yss-step-circle)::before {
	top: 0;
}

.yss-section:has(.yss-stat-card, .yss-step-circle)::after {
	bottom: 0;
	transform: scaleY(-1);
}

@media (max-width: 767px) {
	.yss-section:has(.yss-stat-card, .yss-step-circle)::before,
	.yss-section:has(.yss-stat-card, .yss-step-circle)::after {
		height: 36px;
	}
}

/* About Us hub's "Our Impact" section (body.page-id-218) now duplicates
   the homepage's real background (native Elementor background_image +
   wave-brush shape dividers, set directly on the container — see the
   PHP that applied it) instead of relying on this shared rule's CSS
   gradient + clip-path wave fallback. The background_image itself
   already wins on specificity the same way post 305's does (see the
   comment on that page's Our Impact section elsewhere in this file), but
   the clip-path ::before/::after waves here would still double up with
   the new native shape dividers, so they're suppressed for this page
   only — every other page with stat-cards keeps them. */
body.page-id-218 .yss-section:has(.yss-stat-card, .yss-step-circle)::before,
body.page-id-218 .yss-section:has(.yss-stat-card, .yss-step-circle)::after {
	display: none;
}

/* /alumni/ (body.page-id-221) — the 4-stat row on this page is a plain
   summary strip on the page's normal white background, not an "Our
   Impact"-style dark panel, so the shared dark-glass/wave treatment above
   (meant for stat-cards in general) is fully undone here: no gradient, no
   wave dividers, and both the text colors and the cards themselves revert
   from the "frosted glass on dark" look back to a plain light card —
   otherwise the translucent-white .yss-stat-card would be almost
   invisible against white. */
body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) {
	background: none;
	padding-block: var(--yss-section-py);
}

body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle)::before,
body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle)::after {
	display: none;
}

body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-eyebrow,
body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-subtitle,
body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-lead,
body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-heading {
	color: var(--yss-ink);
}

body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) [style*="--yss-ink"] {
	color: var(--yss-ink) !important;
}

body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) [style*="--yss-gray"] {
	color: var(--yss-gray) !important;
}

/* Pill-shaped stat cards on a dotted cream band — same treatment as
   /global/ (body.page-id-227), applied here too so the two subpages'
   stat rows read as one consistent pattern rather than two different
   card styles. */
body.page-id-221 .yss-section:has(.yss-stat-card, .yss-step-circle) {
	background-color: var(--yss-cream);
	background-image: radial-gradient(var(--yss-border) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
}

body.page-id-221 .yss-stat-card {
	flex-direction: row;
	align-items: center;
	gap: var(--yss-space-3);
	background-color: var(--yss-white);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-pill);
	box-shadow: var(--yss-shadow-card-flat);
	padding: var(--yss-space-3) var(--yss-space-5);
}

body.page-id-221 .yss-stat-card .yss-icon-circle {
	flex-shrink: 0;
	background-color: var(--yss-red);
	border: none;
	color: var(--yss-white);
}

body.page-id-221 .yss-stat-card__number,
body.page-id-221 .yss-stat-card__label {
	color: var(--yss-ink);
}

body.page-id-221 .yss-stat-card__number {
	font-size: 1.5rem;
	display: inline;
	margin-right: 6px;
}

body.page-id-221 .yss-stat-card__label {
	font-size: var(--yss-fs-small);
	display: inline;
}

/* CTA — real photo background, matching /global/'s photo-CTA treatment
   (attachment 528, a volunteer selection session photo) instead of the
   flat dark-ink panel every other page's CTA still uses. */
body.page-id-221 .yss-cta {
	position: relative;
	background-image:
		linear-gradient(180deg, rgba(16, 16, 16, 0.55) 0%, rgba(16, 16, 16, 0.75) 100%),
		url('/wp-content/uploads/2026/09/volunteer-selection-session-6b1bf3.jpg');
	background-size: cover;
	background-position: center;
}

/* /global/ (body.page-id-227) — same fix, same reasoning: its "Countries
   Reached" stat row is a plain summary strip on white, not a dark "Our
   Impact" panel. */
body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) {
	background: none;
	padding-block: var(--yss-section-py);
}

body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle)::before,
body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle)::after {
	display: none;
}

body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-eyebrow,
body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-subtitle,
body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-lead,
body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-heading {
	color: var(--yss-ink);
}

body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) [style*="--yss-ink"] {
	color: var(--yss-ink) !important;
}

body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) [style*="--yss-gray"] {
	color: var(--yss-gray) !important;
}

body.page-id-227 .yss-section:has(.yss-stat-card, .yss-step-circle) {
	background-color: var(--yss-cream);
	background-image: radial-gradient(var(--yss-border) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
}

body.page-id-227 .yss-stat-card {
	flex-direction: row;
	align-items: center;
	gap: var(--yss-space-3);
	background-color: var(--yss-white);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-pill);
	box-shadow: var(--yss-shadow-card-flat);
	padding: var(--yss-space-3) var(--yss-space-5);
}

body.page-id-227 .yss-stat-card .yss-icon-circle {
	flex-shrink: 0;
	background-color: var(--yss-red);
	border: none;
	color: var(--yss-white);
}

body.page-id-227 .yss-stat-card__number,
body.page-id-227 .yss-stat-card__label {
	color: var(--yss-ink);
}

body.page-id-227 .yss-stat-card__number {
	font-size: 1.5rem;
	display: inline;
	margin-right: 6px;
}

body.page-id-227 .yss-stat-card__label {
	font-size: var(--yss-fs-small);
	display: inline;
}

/* SDG wheel graphic (Sustainability @ YSS section) — 17 official SDG
   colour dots evenly spaced on a circle via rotate+translate+counter-
   rotate per dot (angle baked into each dot's inline style server-side,
   see revamp-global-page.php), around a static centered globe icon. */
body.page-id-227 .yss-sdg-wheel {
	position: relative;
	width: 280px;
	height: 280px;
	max-width: 100%;
	border-radius: 50%;
	background: var(--yss-cream);
	border: 1px dashed var(--yss-border);
}

body.page-id-227 .yss-sdg-wheel__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--yss-ink);
	color: var(--yss-white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--yss-shadow-card-flat);
}

body.page-id-227 .yss-sdg-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--yss-white);
	font-size: 0.65rem;
	font-weight: 800;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

@media (max-width: 480px) {
	body.page-id-227 .yss-sdg-wheel {
		transform: scale(0.78);
	}
}

/* Global page CTA — real photo background (IVCO conference, attachment
   532) with a dark scrim, per the "revamp look exactly" reference which
   shows a photo (not flat ink) behind the "Take Volunteerism Beyond
   Borders" banner. */
body.page-id-227 .yss-cta {
	position: relative;
	background-image:
		linear-gradient(180deg, rgba(16, 16, 16, 0.55) 0%, rgba(16, 16, 16, 0.75) 100%),
		url('/wp-content/uploads/2026/09/ivco-yss-ke-arah-global-8846c7.jpg');
	background-size: cover;
	background-position: center;
}

/* /home-video-hero/'s "Our Impact" section (.yss-impact-glass, 5 stats)
   ships its own inline <style> baked into that page's Elementor content,
   which lays the 5 cards out as a 3+2 asymmetric grid via hardcoded
   nth-child grid-column/row rules. Overriding it here in the shared
   stylesheet (with !important to beat the non-!important inline rules)
   gets it to one row like Figma node 36-505, without touching that
   page's _elementor_data again — see CLAUDE.md's postmeta-editing
   warning for why that's worth avoiding. */
.yss-impact-glass .yss-grid--5 {
	grid-template-columns: repeat(5, 1fr) !important;
	grid-template-rows: none !important;
}

/* .yss-split is display:flex with the default align-items:stretch, so
   .yss-split__content (and the grid/cards inside it) was stretching to
   match .yss-split__text's height — the tall heading column — leaving
   each card ~347px tall with a big dead-space gap below the label.
   align-self:flex-start on the content column, plus align-self:start on
   the grid items themselves (grid items also default to stretch,
   independent of the flex-level fix), lets cards size to their own
   content instead. */
.yss-impact-glass .yss-split__content {
	align-self: flex-start;
}

.yss-impact-glass .yss-grid--5 .yss-stat-card {
	grid-column: auto !important;
	grid-row: auto !important;
	align-self: start !important;
	height: auto !important;
}

/* A little variety instead of five identical tiles — alternating warm
   accent on the icon glow, echoing the red/orange alternation already
   used on the "How It Works" step icons elsewhere in this design system. */
.yss-impact-glass .yss-grid--5 .yss-stat-card:nth-child(even) .yss-icon-circle {
	background: rgba(226, 87, 76, 0.28);
	border-color: rgba(226, 87, 76, 0.5);
}

@media (max-width: 1024px) {
	.yss-impact-glass .yss-grid--5 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.yss-impact-glass .yss-grid--5 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.yss-impact-glass .yss-grid--5 {
		grid-template-columns: 1fr !important;
	}
}

/* Floating stat chip used over the hero image */
.yss-floating-chip {
	position: absolute;
	z-index: 2;
	background-color: var(--yss-white);
	border-radius: var(--yss-radius-md);
	box-shadow: var(--yss-shadow-card);
	padding: var(--yss-space-3) var(--yss-space-4);
}

.yss-floating-chip__number {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--yss-ink);
	line-height: 1;
}

.yss-floating-chip__label {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

/* ---------------------------------------------------------------------
 * 7. ICON CIRCLES (stat icons, "How It Works" step icons)
 * ------------------------------------------------------------------ */
.yss-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: var(--yss-white);
	font-size: 1.25rem;
}

.yss-icon-circle--red {
	background-color: var(--yss-red);
}

.yss-icon-circle--orange {
	background-color: var(--yss-orange);
}

.yss-icon-circle--gradient {
	background: var(--yss-gradient-glow);
}

/* ---------------------------------------------------------------------
 * 8. MEDIA CARDS (Alumni / Featured Programs — image with dark overlay + title)
 * ------------------------------------------------------------------ */
.yss-media-card {
	display: block;
	position: relative;
	border-radius: var(--yss-radius-md);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	color: inherit;
	text-decoration: none;
}

.yss-media-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yss-media-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}

.yss-media-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--yss-space-4);
	color: var(--yss-white);
}

.yss-media-card__title {
	font-size: var(--yss-fs-h3);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--yss-space-1);
}

.yss-media-card__meta {
	font-size: var(--yss-fs-small);
	opacity: 0.85;
	margin: 0;
}

/* Aspect variant for wider program cards */
.yss-media-card--wide {
	aspect-ratio: 4 / 5;
}

/* ---------------------------------------------------------------------
 * 9. PROCESS STEPS ("How It Works")
 * ------------------------------------------------------------------ */
.yss-steps {
	display: flex;
	align-items: flex-start;
	gap: var(--yss-space-4);
}

.yss-step {
	flex: 1;
	position: relative;
}

.yss-step__number {
	font-size: var(--yss-fs-small);
	font-weight: 700;
	color: var(--yss-gray);
	margin-bottom: var(--yss-space-2);
}

.yss-step__title {
	font-size: var(--yss-fs-lead);
	font-weight: 800;
	color: var(--yss-ink);
	margin: var(--yss-space-3) 0 var(--yss-space-1);
}

.yss-step__desc {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
	line-height: var(--yss-lh-body);
}

/* dotted connector between step icons */
.yss-steps--connected .yss-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 28px;
	left: calc(56px + var(--yss-space-2));
	right: calc(-1 * var(--yss-space-4) + 28px);
	border-top: 2px dotted var(--yss-border);
}

/* ---------------------------------------------------------------------
 * 10. TESTIMONIAL / QUOTE
 * ------------------------------------------------------------------ */
.yss-quote {
	position: relative;
}

.yss-quote__mark {
	font-size: 4rem;
	font-weight: 800;
	color: var(--yss-red);
	line-height: 1;
	margin-bottom: var(--yss-space-2);
}

.yss-quote__text {
	font-size: var(--yss-fs-h3);
	font-weight: 600;
	line-height: 1.35;
	color: var(--yss-ink);
	margin-bottom: var(--yss-space-4);
}

.yss-quote__author {
	font-size: var(--yss-fs-small);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-quote__role {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

/* Auto-sliding testimonial carousel — wraps several .yss-quote slides,
   one visible (.is-active) at a time, cross-fading on an interval. */
.yss-testimonial-slider {
	position: relative;
}

.yss-testimonial-slide {
	display: none;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--yss-space-5);
}

.yss-testimonial-slide.is-active {
	display: grid;
	animation: yss-testimonial-fade-in 0.5s ease;
}

@keyframes yss-testimonial-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.yss-testimonial-slide__photo {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 454 / 399;
	object-fit: cover;
	margin-inline: auto;
	display: block;
	/* Hand-painted brush-stroke mask instead of a clean rectangle */
	-webkit-mask-image: url('../img/masking-paintingv2.svg');
	mask-image: url('../img/masking-paintingv2.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.yss-testimonial-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--yss-space-5);
}

.yss-testimonial-dots {
	display: flex;
	gap: 10px;
}

.yss-testimonial-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--yss-border);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.yss-testimonial-dots button.is-active {
	background: var(--yss-red);
	transform: scale(1.2);
}

.yss-testimonial-arrows {
	display: inline-flex;
	align-items: center;
	gap: var(--yss-space-2);
}

.yss-testimonial-arrows button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--yss-border);
	background-color: var(--yss-white);
	color: var(--yss-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.yss-testimonial-arrows button:hover,
.yss-testimonial-arrows button:focus-visible {
	background-color: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

/* Without this, an unstyled <button> falls back to the OS/browser's native
   accent color on click (can render pink) — always red instead. */
.yss-testimonial-arrows button:active {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
	color: var(--yss-white);
}

@media (max-width: 767px) {
	.yss-testimonial-slide {
		grid-template-columns: 1fr;
	}
	.yss-testimonial-slide__photo {
		order: -1;
		max-width: 260px;
	}
}

/* ---------------------------------------------------------------------
 * 11. CTA BANNER (dark, rounded, full-width)
 * Default look is a real photo + dark overlay (not a flat fill) so the
 * banner reads as a live moment rather than an empty color block; the
 * gradient's job is purely to keep white text legible over whatever the
 * photo is doing underneath it. body.page-id-221/227 already override
 * background-image with their own page-specific photo (higher specificity
 * via the body class) — this default only shows on pages that don't set
 * their own, so it never fights those two.
 * ------------------------------------------------------------------ */
.yss-cta {
	position: relative;
	overflow: hidden;
	background-color: var(--yss-ink);
	background-image:
		linear-gradient(180deg, rgba(16, 16, 16, 0.55) 0%, rgba(16, 16, 16, 0.75) 100%),
		url('../img/cta-default-bg.jpg');
	background-size: cover;
	background-position: center;
	border-radius: var(--yss-radius-lg);
	padding: var(--yss-space-6) var(--yss-space-6);
	color: var(--yss-white);
}

.yss-cta .yss-eyebrow {
	color: var(--yss-red);
}

.yss-cta__desc {
	color: var(--yss-gray-light);
	font-size: var(--yss-fs-small);
	line-height: var(--yss-lh-body);
}

/* Right column of the homepage's "Ready To Build Impact Together?" CTA
   banner (description + button) — was a plain inline style on that div
   (display:flex;justify-content:flex-end;...), which meant it had no
   mobile override. At the ≤768px breakpoint where .yss-grid--2 collapses
   to one column, .yss-cta itself switches to text-align:center, but this
   row's own justify-content:flex-end ignores that (flex alignment isn't
   controlled by text-align) — the button ended up pinned to the right
   edge while the heading/description above it centered, a visible
   mismatch confirmed via getBoundingClientRect() (button center offset
   ~55px right of the card's true center). Moved to a real class so the
   mobile step below can override just this one property. */
.yss-cta__actions {
	display: flex;
	align-items: center;
	gap: var(--yss-space-4);
	justify-content: flex-end;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.yss-cta__actions {
		justify-content: center;
	}
}


/* ---------------------------------------------------------------------
 * 12. FOOTER
 * ------------------------------------------------------------------ */
.yss-footer {
	background-color: var(--yss-red);
	padding-block: var(--yss-space-7);
	color: rgba(255, 255, 255, 0.78);
}

.yss-footer__logo {
	display: block;
	height: 42px !important;
	width: auto !important;
	margin-bottom: var(--yss-space-3);
}

.yss-footer__heading {
	font-size: var(--yss-fs-small);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--yss-space-3);
	color: var(--yss-white);
}

.yss-footer__link,
.yss-footer a {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--yss-fs-small);
	text-decoration: none;
}

.yss-footer__link:hover,
.yss-footer a:hover {
	color: var(--yss-white);
}

/* Real brand SVG marks (not text-abbreviation placeholders) in a frosted
   glass circle, matching the "on dark/red background" glass treatment
   used elsewhere (.yss-stat-card .yss-icon-circle etc.) — see that
   pattern's own note for why rgba-white-on-dark is the sitewide
   convention rather than a solid fill. Hover swaps to each platform's own
   brand color (a little visual delight instead of a flat, uniform
   rollover) plus a lift, so the row reads as a set of live buttons
   rather than static icons. */
.yss-footer a.yss-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--yss-white);
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.yss-footer a.yss-footer__social svg {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}

.yss-footer a.yss-footer__social:hover {
	transform: translateY(-3px) scale(1.08);
	border-color: transparent;
	box-shadow: 0 6px 14px rgba(16, 16, 16, 0.28);
}

.yss-footer a.yss-footer__social:hover svg {
	transform: scale(1.08);
}

.yss-footer a.yss-footer__social--facebook:hover {
	background-color: #1877f2;
}

.yss-footer a.yss-footer__social--instagram:hover {
	background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.yss-footer a.yss-footer__social--tiktok:hover {
	background-color: #000000;
	box-shadow: 0 0 0 1px #25f4ee, 0 6px 14px rgba(16, 16, 16, 0.28);
}

.yss-footer a.yss-footer__social--youtube:hover {
	background-color: #ff0000;
}

.yss-footer a.yss-footer__social--linkedin:hover {
	background-color: #0a66c2;
}

.yss-footer a.yss-footer__social--x:hover {
	background-color: #000000;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 14px rgba(16, 16, 16, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.yss-footer a.yss-footer__social,
	.yss-footer a.yss-footer__social svg {
		transition: none;
	}
	.yss-footer a.yss-footer__social:hover {
		transform: none;
	}
	.yss-footer a.yss-footer__social:hover svg {
		transform: none;
	}
}

.yss-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	margin-top: var(--yss-space-6);
	padding-top: var(--yss-space-4);
	font-size: var(--yss-fs-small);
	color: rgba(255, 255, 255, 0.7);
}

.yss-footer__bottom .yss-footer__link,
.yss-footer__bottom a {
	color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
 * 13a0. GLOBAL HEADER (Elementor Pro "YSS Global Header" template, Entire
 * Site condition) — a floating nav-on-photo overlay at the top of the
 * page, matching the reference screenshot. Fixed (not absolute) so it
 * stays pinned and visible while scrolling, rather than scrolling away
 * with the hero — assets/js/header-scroll.js toggles the `--scrolled`
 * modifier once the page has scrolled past the hero, swapping the
 * transparent-on-photo scrim for a solid frosted bar with dark text, so
 * the nav stays legible over whatever content (not just the hero) is
 * now behind it.
 * ------------------------------------------------------------------ */
.yss-global-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	/* A flat "transparent" header reads fine over a dark photo/video hero,
	   but the white nav text goes near-illegible on a page whose hero is
	   light (e.g. the live homepage's cream hero). A soft top-down scrim
	   keeps the overlay-on-photo look while guaranteeing contrast
	   everywhere, instead of needing a per-page light/dark variant. */
	background: linear-gradient(to bottom, rgba(16, 16, 16, 0.45) 0%, rgba(16, 16, 16, 0.15) 70%, rgba(16, 16, 16, 0) 100%);
	transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease;
}

.yss-global-header--scrolled {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 16px rgba(16, 16, 16, 0.1);
}

/* Shrinks the bar once scrolled (a smaller, more compact sticky nav)
   instead of just recoloring it. The container's padding is applied via
   Elementor's own --padding-* custom properties (see its generated
   post-401.css), not a plain `padding` declaration, so that's what has to
   be overridden here — only top/bottom, so the logo/menu keep their
   horizontal position. !important for the same reason as the nav-item
   color override above: matching a 3-class generated selector's
   specificity isn't reliable through source order alone. */
.yss-global-header.yss-global-header--scrolled {
	--padding-top: 10px !important;
	--padding-bottom: 10px !important;
}

@media (max-width: 1024px) {
	.yss-global-header.yss-global-header--scrolled {
		--padding-top: 8px !important;
		--padding-bottom: 8px !important;
	}
}

/* Two ancestors sit between the toggle and .yss-global-header, and both
   default to `position: relative` (Elementor's own base .e-con and
   .elementor-widget rules) — either one being positioned makes IT the
   toggle's containing block instead of the full header, so the toggle's
   absolute box below only spanned the nav-menu widget's own (much
   shorter) height until both were knocked back to static. Same technique
   as .yss-split-cover__visual .elementor-widget-image elsewhere in this
   file. With both neutralized, `.yss-global-header` itself (fixed, so
   still a valid containing block) is what the toggle actually anchors
   to. The mobile dropdown's own `top: 100%` (Elementor Pro's own CSS)
   then resolves against the header too, which still places it directly
   under the visible bar in both the tall and scrolled-compact states —
   checked live, and nothing else in this row relies on either ancestor
   being the positioned one. */
.yss-global-header .elementor-widget-nav-menu,
.yss-global-header > .e-con {
	position: static !important;
}

/* The open mobile dropdown panel itself (<nav class="elementor-nav-menu--
   dropdown elementor-nav-menu__container">) carries no `position` rule
   at all in this Elementor Pro build — confirmed live via the CSSOM
   (zero matched stylesheet rules set `position` on it), so it renders at
   the CSS default, `static`. Opening it (all menu items, real height)
   therefore pushed real height into normal flow, growing the row and
   re-centering — moving — the logo, which sat vertically centered in
   that now-taller row. This is what "logo follows the menu open" was:
   not something introduced by the toggle changes above, just this
   dropdown never having been taken out of flow to begin with. Absolute
   positioning (with `!important`, since the plugin's own JS sets an
   inline `top` in px via jQuery `.css()` when it opens, and that must
   lose to this) turns it back into a floating overlay, so opening it no
   longer affects the header's own height at all. Its containing block
   resolves to .yss-global-header (the same chain neutralized above), so
   `left/right: 0` here means the full header width, not just the
   nav-menu widget's own narrow box. */
.yss-global-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
}

/* Red panel flush to the header's own edges — `top/right/bottom: 0` on an
   absolutely positioned box resolves against its containing block's
   *padding* edge, which is exactly what "zero padding right/top" means
   here: the panel deliberately overrides the header's own inset on its
   side rather than sitting inset like the logo. Anchoring bottom too
   (not a fixed height) means it automatically matches whatever height
   the header currently has, so it shrinks in step with the
   scrolled-compact state below for free, no extra rule needed.

   `display: flex` is deliberately NOT in this base rule. Elementor's own
   CSS hides the toggle above the widget's breakpoint with a plain (no
   !important) `display: none` at the exact same specificity as a rule
   here would have (two classes each) — a tie, which source order would
   have resolved in favor of whichever loads later, and this stylesheet
   loading after Elementor's own turned out to mean an unscoped
   `display: flex` here silently won and made the toggle show up on
   desktop too. Scoping it to the same max-width below, matching
   Elementor's own tablet breakpoint, means desktop never sees a `display`
   declaration from this rule to tie against at all. */
.yss-global-header .elementor-menu-toggle {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: 64px;
	height: auto !important;
	background-color: var(--yss-red) !important;
	border-radius: 0 !important;
}

@media (max-width: 1024px) {
	.yss-global-header .elementor-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.yss-global-header .elementor-menu-toggle:hover,
.yss-global-header .elementor-menu-toggle:focus {
	background-color: var(--yss-red-dark) !important;
}

/* The Nav Menu widget's own generated CSS (post-401.css) sets the item
   color to a fixed #fff via a 3-class selector — matched here, not beaten
   by source order alone, so !important is needed the same way the rest
   of this widget's overrides already are (see the header gotchas logged
   elsewhere in this file). The toggle itself doesn't need a scrolled
   color swap any more — it's always white-on-red now, regardless of
   what the rest of the header is doing. */
.yss-global-header--scrolled .elementor-nav-menu--main .elementor-item {
	color: var(--yss-ink) !important;
}

/* The dropdown "+" (sub-arrow SVG) gets a fixed white fill from the same
   widget CSS, so on the white scrolled header it vanished. Follow the
   item's text colour instead, whatever state that text is in. */
.yss-global-header--scrolled .elementor-nav-menu--main .elementor-item .sub-arrow svg {
	fill: currentColor !important;
}

/* ---------------------------------------------------------------------
 * 13a. NAVBAR (legacy — superseded by the global header above; left in
 * place only because some of its classes may still be referenced from
 * older exported page content).
 * ------------------------------------------------------------------ */
.yss-navbar-strip {
	padding-block: 18px;
	border-bottom: 1px solid var(--yss-border);
}

.yss-navbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yss-space-4);
}

.yss-navbar__toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--yss-red);
	border: none;
	border-radius: var(--yss-radius-sm);
	cursor: pointer;
	flex-shrink: 0;
	order: 3;
}

.yss-navbar__toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--yss-white);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.yss-navbar__toggle.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.yss-navbar__toggle.is-active span:nth-child(2) {
	opacity: 0;
}

.yss-navbar__toggle.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.yss-navbar__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	font-size: var(--yss-fs-lead);
	font-weight: 800;
	color: var(--yss-ink);
	text-decoration: none;
}

.yss-navbar__logo {
	height: 42px;
	max-height: 42px;
	width: auto;
	max-width: none;
	object-fit: contain;
	display: block;
}

.yss-navbar__cta-short {
	display: none;
}

.yss-navbar__menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--yss-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.yss-navbar__menu li {
	white-space: nowrap;
}

.yss-navbar__link {
	position: relative;
	display: inline-block;
	color: var(--yss-ink);
	font-size: var(--yss-fs-small);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	padding-bottom: var(--yss-space-2);
}

.yss-navbar__link.is-active {
	color: var(--yss-ink);
}

.yss-navbar__link.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--yss-red);
}

/* ---------------------------------------------------------------------
 * 13b. HERO
 * ------------------------------------------------------------------ */
.yss-hero {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--yss-space-5);
}

.yss-hero__content {
	flex: 0 1 410px;
	min-width: 320px;
}

.yss-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--yss-space-3);
	margin-top: var(--yss-space-4);
}

.yss-hero__visual {
	position: relative;
	flex: 1 1 380px;
	min-width: 320px;
	max-width: 820px;
	margin-inline: 0;
	display: flex;
	justify-content: flex-start;
}

.yss-hero__glow {
	position: absolute;
	inset: -10% -10% -10% 10%;
	background: var(--yss-gradient-glow);
	filter: blur(70px);
	opacity: 0.5;
	border-radius: 50%;
	z-index: 0;
}

.yss-hero__image {
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: var(--yss-white);
	padding: 10px 10px 30px;
	border-radius: var(--yss-radius-sm);
	box-shadow: var(--yss-shadow-card);
	transform: rotate(-1.25deg);
}

.yss-hero__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}

/* Hand-drawn red doodle accents scattered around the hero photo */
.yss-doodle {
	position: absolute;
	z-index: 3;
	color: var(--yss-red);
	pointer-events: none;
}

.yss-doodle svg {
	display: block;
	width: 100%;
	height: 100%;
}

.yss-doodle--star {
	top: -5%;
	left: 4%;
	width: 30px;
	height: 30px;
}

.yss-doodle--scribble {
	bottom: -3%;
	left: -8%;
	width: 64px;
	height: 28px;
}

.yss-doodle--heart {
	top: 6%;
	right: -4%;
	width: 26px;
	height: 26px;
}

@media (max-width: 767px) {
	.yss-doodle {
		display: none;
	}
}

.yss-hero__scroll {
	position: absolute;
	left: -56px;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.yss-hero__scroll::before {
	content: '';
	width: 1px;
	height: 36px;
	background: var(--yss-border);
}

.yss-hero__scroll-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yss-red);
	flex-shrink: 0;
}

.yss-hero__scroll-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 11px;
	font-weight: 600;
	color: var(--yss-gray);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
}

.yss-hero__chip--students {
	top: -10%;
	right: -30px;
}

.yss-hero__chip--schools {
	bottom: 10%;
	left: 5%;
}

.yss-hero__chip--states {
	bottom: -14%;
	right: 20%;
}

.yss-hero__watch {
	position: absolute;
	z-index: 2;
	bottom: -16%;
	right: -20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.yss-hero__watch-text {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--yss-ink);
	text-align: right;
}

.yss-hero__play {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--yss-red);
	color: var(--yss-white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--yss-shadow-card);
}

/* ---------------------------------------------------------------------
 * 13c. PARTNER / LOGO STRIP
 * ------------------------------------------------------------------ */
.yss-partners {
	display: flex;
	align-items: center;
	gap: var(--yss-space-6);
}

.yss-partners__label {
	font-size: var(--yss-fs-eyebrow);
	font-weight: 700;
	color: var(--yss-red);
	text-transform: uppercase;
	letter-spacing: var(--yss-tracking-eyebrow);
	white-space: nowrap;
	flex-shrink: 0;
}

.yss-partners__logos {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.yss-partners__track {
	display: flex;
	align-items: center;
	gap: var(--yss-space-6);
	width: max-content;
	animation: yss-partners-scroll 40s linear infinite;
}

.yss-partners__logos:hover .yss-partners__track {
	animation-play-state: paused;
}

.yss-partners__track .yss-partners__logo {
	height: 40px;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.yss-partners-strip {
	padding-block: var(--yss-space-5);
	border-top: 1px solid var(--yss-border);
	border-bottom: 1px solid var(--yss-border);
}

@keyframes yss-partners-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.yss-partners__track {
		animation: none;
	}
	.yss-partners__logos {
		overflow-x: auto;
	}
}

@media (max-width: 767px) {
	.yss-partners {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--yss-space-3);
	}
}

.yss-logo-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--yss-space-4);
}

.yss-logo-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	background: var(--yss-white);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-md);
	padding: var(--yss-space-3);
}

.yss-logo-grid__item img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.yss-logo-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 768px) {
	.yss-logo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.yss-carousel-controls {
	display: inline-flex;
	align-items: center;
	gap: var(--yss-space-2);
}

.yss-carousel-controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 52px to match the "YSS Testimonials" widget's own default arrow size
	   (--yss-testimonial-arrow-size, section "YSS TESTIMONIALS WIDGET") —
	   was 40px, same as .yss-programs-widget__nav button, but that read as
	   noticeably small next to testimonials' arrows elsewhere on the site;
	   the icon inside stays the exact same 18x18 SVG markup as every other
	   carousel's arrows (see yss_render_programs_carousel(), the
	   testimonials widget, and this shortcode's own prev/next buttons) —
	   only the circle grew, not the icon, matching how it already looks at
	   testimonials' own default size. */
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--yss-border);
	background-color: var(--yss-white);
	color: var(--yss-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Explicit hover/focus/active states — without these, unstyled <button>
   elements fall back to the OS/browser's native accent color on click,
   which can render as pink depending on system settings. Always red. */
.yss-carousel-controls button:hover,
.yss-carousel-controls button:focus-visible {
	background-color: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-carousel-controls button:active {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
	color: var(--yss-white);
}

/* ---------------------------------------------------------------------
 * 13d. GRID UTILITIES
 * ------------------------------------------------------------------ */
.yss-grid {
	display: grid;
	gap: var(--yss-space-4);
}

.yss-grid--2 { grid-template-columns: repeat(2, 1fr); }
.yss-grid--3 { grid-template-columns: repeat(3, 1fr); }
.yss-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* .yss-grid--5 previously only existed scoped (body.page-id-305
   .yss-impact-glass .yss-grid--5, with !important, further down this
   file) — used unscoped (Meet YSS All Stars' supporting alumni grid) it
   had no grid-template-columns at all and silently rendered as one
   stacked column. This is the real, unscoped base rule; the responsive
   steps mirror the scoped version's breakpoints. */
.yss-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px) {
	.yss-grid--5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.yss-grid--5 {
		grid-template-columns: 1fr;
	}
}

/* Article layout (Our Story): wider text column, narrower image-gallery
   column. A dedicated modifier rather than an inline grid-template-columns
   so it collapses to one column at mobile the same way .yss-grid--2/3/4
   already do below — an inline style can't be reached by that rule. */
.yss-grid--article {
	grid-template-columns: 1.3fr 1fr;
	gap: 56px;
	align-items: start;
}

/* Sticks the article text in place while the taller image column scrolls
   past it (see the .yss-grid--article rule above) — only makes sense
   once the two columns sit side by side, so it's turned off again in the
   767px media query below once the layout stacks to one column. */
.yss-article__text {
	position: sticky;
	top: 40px;
}

/* News section: big featured story + compact list (Media page "Latest Updates") */
.yss-news-layout {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--yss-space-5);
	align-items: stretch;
}

@media (max-width: 900px) {
	.yss-news-layout {
		grid-template-columns: 1fr;
	}
}

.yss-news-featured {
	position: relative;
	display: block;
	border-radius: var(--yss-radius-md);
	overflow: hidden;
	min-height: 360px;
	text-decoration: none;
	color: inherit;
}

.yss-news-featured img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yss-news-featured__overlay {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--yss-space-5);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
}

.yss-news-featured__title {
	color: var(--yss-white);
	font-size: var(--yss-fs-h3);
	font-weight: 800;
	margin-top: 6px;
}

.yss-news-featured__desc {
	color: var(--yss-gray-light);
	font-size: var(--yss-fs-small);
	margin-top: 8px;
	max-width: 460px;
}

.yss-news-list {
	display: flex;
	flex-direction: column;
	gap: var(--yss-space-4);
}

.yss-news-row {
	display: block;
	text-decoration: none;
	padding-bottom: var(--yss-space-3);
	border-bottom: 1px solid var(--yss-border);
}

.yss-news-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.yss-news-row__title {
	color: var(--yss-ink);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
}

.yss-news-row__date {
	color: var(--yss-gray);
	font-size: var(--yss-fs-small);
	margin-top: 4px;
}

/* Brand column takes the free space; Quick Links and Contact Us size to
   their content and sit together on the right with one fixed gap, rather
   than stretching into equal-width columns with a wide hole between them.
   (Tablet/phone stacking comes from .yss-grid--3 in the media queries.) */
.yss-footer__grid {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 320px);
	column-gap: clamp(48px, 6vw, 96px);
	row-gap: var(--yss-space-5);
}

.yss-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--yss-space-4);
	margin-bottom: var(--yss-space-5);
}

.yss-split {
	display: flex;
	align-items: flex-start;
	gap: var(--yss-space-6);
}

.yss-split__text {
	flex: 0 0 280px;
}

.yss-split__content {
	flex: 1;
	min-width: 0;
}

.yss-split__controls {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--yss-space-4);
}

/* ---------------------------------------------------------------------
 * 13e. TESTIMONIAL PHOTO STACK
 * ------------------------------------------------------------------ */
.yss-photo-stack {
	position: relative;
	width: 100%;
	max-width: 320px;
	margin-inline: auto;
}

.yss-photo-stack img {
	width: 78%;
	border-radius: var(--yss-radius-md);
	box-shadow: var(--yss-shadow-card);
	display: block;
}

.yss-photo-stack img:first-child {
	position: relative;
	z-index: 1;
	transform: rotate(-1.5deg);
}

.yss-photo-stack img:last-child {
	position: absolute;
	width: 55%;
	right: 0;
	bottom: -10%;
	z-index: 2;
	border: 4px solid var(--yss-white);
	transform: rotate(2.5deg);
}

/* Torn-paper edge mask, applied to the trailing image for a hand-torn feel */
.yss-photo-stack--torn img:last-child {
	clip-path: polygon(0% 0%, 94% 0%, 100% 5%, 95% 9%, 100% 14%, 94% 19%, 100% 24%, 95% 29%, 100% 34%, 94% 39%, 100% 44%, 95% 49%, 100% 54%, 94% 59%, 100% 64%, 95% 69%, 100% 74%, 94% 79%, 100% 84%, 95% 89%, 100% 94%, 94% 100%, 0% 100%);
	border-right: none;
}

/* ---------------------------------------------------------------------
 * 13. RESPONSIVE
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.yss-steps {
		flex-wrap: wrap;
	}
	.yss-steps--connected .yss-step:not(:last-child)::after {
		content: none;
	}
	.yss-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.yss-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.yss-navbar__toggle {
		display: flex;
		order: 3;
	}
	.yss-navbar .yss-btn {
		order: 2;
	}
	.yss-navbar {
		gap: var(--yss-space-3);
	}
	.yss-navbar__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 20;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		background: var(--yss-white);
		border: 1px solid var(--yss-border);
		border-top: none;
		border-radius: 0 0 var(--yss-radius-md) var(--yss-radius-md);
		box-shadow: var(--yss-shadow-card);
		padding: var(--yss-space-2) var(--yss-space-4);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transition: max-height 0.25s ease, opacity 0.2s ease;
	}
	.yss-navbar__menu.is-open {
		max-height: 420px;
		opacity: 1;
		pointer-events: auto;
		padding-block: var(--yss-space-3);
	}
	.yss-navbar__menu li {
		width: 100%;
	}
	.yss-navbar__link {
		display: block;
		padding: var(--yss-space-2) 0;
	}
}

/* Below ~420px, logo + full CTA text + hamburger no longer fit on one
   row — shrink the CTA to a short label with tighter padding and no
   arrow icon so all three navbar elements stay on-screen. */
@media (max-width: 420px) {
	.yss-navbar__cta-full {
		display: none;
	}
	.yss-navbar__cta-short {
		display: inline;
	}
	.yss-navbar .yss-btn {
		padding: 12px 16px;
	}
	.yss-navbar .yss-btn::after {
		display: none;
	}
}

@media (max-width: 768px) {
	.yss-section {
		padding-block: var(--yss-space-6);
	}
	.yss-cta {
		padding-block: var(--yss-space-5);
		padding-inline: var(--yss-space-5);
		text-align: center;
	}
	.yss-hero {
		flex-direction: column;
	}
	.yss-hero__content {
		flex-basis: auto;
	}
	.yss-floating-chip {
		padding: 10px 14px;
	}
	.yss-floating-chip__number {
		font-size: 1.1rem;
	}
	.yss-hero__chip--students {
		top: -6%;
		right: 0;
	}
	.yss-hero__chip--schools {
		bottom: 8%;
		left: 4%;
	}
	.yss-hero__chip--states {
		top: 42%;
		right: -4%;
		bottom: auto;
	}
	.yss-hero__watch {
		bottom: -12%;
		right: 0;
	}
	.yss-hero__visual {
		flex-basis: auto;
		max-width: 100%;
		order: -1;
	}
	.yss-hero__scroll {
		display: none;
	}
	.yss-section-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.yss-split {
		flex-direction: column;
	}
	.yss-split__text {
		flex-basis: auto;
	}
	.yss-grid--2,
	.yss-grid--3,
	.yss-grid--4,
	.yss-grid--article {
		grid-template-columns: 1fr;
	}
	.yss-grid--5 {
		grid-template-columns: repeat(2, 1fr);
	}
	.yss-article__text {
		position: static;
	}
}

/* Max 15px left/right padding on every section at true phone width — same
   rule already applied to .yss-container/.yss-section--tight above, here
   for .yss-cta specifically since its own padding shorthand (space-5,
   32px) otherwise wins on mobile. Vertical padding is untouched. */
@media (max-width: 767px) {
	.yss-cta {
		padding-inline: 15px;
	}
}

/* ---------------------------------------------------------------------
 * 14. SUBPAGE COMPONENTS
 * ------------------------------------------------------------------ */
.yss-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
	margin-bottom: var(--yss-space-3);
}

.yss-breadcrumb a {
	color: var(--yss-gray);
	text-decoration: none;
}

.yss-breadcrumb a:hover {
	color: var(--yss-red);
}

.yss-breadcrumb span:last-child {
	color: var(--yss-ink);
	font-weight: 600;
}

/* Pagination: pill-shaped page numbers + prev/next, matches .yss-btn family */
.yss-pagination__link,
.yss-pagination span.dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--yss-radius-pill);
	border: 1px solid var(--yss-border);
	color: var(--yss-ink);
	font-size: var(--yss-fs-small);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a.yss-pagination__link:hover {
	background-color: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-pagination__link.current {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
	color: var(--yss-white);
}

.yss-pagination span.dots {
	border-color: transparent;
	color: var(--yss-gray);
}

.yss-page-hero {
	padding-block: var(--yss-space-6) var(--yss-space-5);
}

.yss-page-hero__title {
	font-size: var(--yss-fs-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--yss-ink);
}

/* Values / feature cards with an icon */
.yss-value-card {
	background-color: var(--yss-cream);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-card);
	padding: var(--yss-space-4);
	text-align: center;
}

.yss-value-card .yss-icon-circle {
	margin-inline: auto;
	margin-bottom: var(--yss-space-3);
}

.yss-value-card__title {
	font-weight: 800;
	font-size: var(--yss-fs-lead);
	margin-bottom: var(--yss-space-1);
}

.yss-value-card__desc {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

/* Timeline ("Our Journey") */
.yss-timeline {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--yss-space-3);
	padding-top: var(--yss-space-4);
}

.yss-timeline::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	border-top: 2px dotted var(--yss-border);
}

.yss-timeline__item {
	position: relative;
	flex: 1;
	text-align: center;
}

.yss-timeline__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--yss-red);
	border: 3px solid var(--yss-white);
	box-shadow: 0 0 0 2px var(--yss-red);
	margin: 0 auto var(--yss-space-3);
}

.yss-timeline__year {
	font-weight: 800;
	color: var(--yss-ink);
	margin-bottom: var(--yss-space-1);
}

.yss-timeline__desc {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

/* Team card (circular photo) */
.yss-team-card {
	display: block;
	text-align: center;
	color: inherit;
	text-decoration: none;
}

.yss-team-card__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: var(--yss-space-3);
}

.yss-team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yss-team-card__name {
	font-weight: 800;
	font-size: var(--yss-fs-lead);
}

.yss-team-card__role {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

/* Filter tabs (Programs page) */
.yss-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yss-space-2);
}

.yss-filter-tab {
	font-size: var(--yss-fs-small);
	font-weight: 700;
	padding: 10px 20px;
	border-radius: var(--yss-radius-pill);
	border: 1px solid var(--yss-border);
	background: var(--yss-white);
	color: var(--yss-ink);
	text-decoration: none;
	cursor: pointer;
}

.yss-filter-tab.is-active {
	background: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

/* Search + filter toolbar (Programs page) */
.yss-filter-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--yss-space-4);
	margin-bottom: var(--yss-space-5);
}

.yss-search-box {
	position: relative;
	flex-shrink: 0;
	width: 280px;
	max-width: 100%;
}

.yss-search-box svg {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--yss-gray-light);
	pointer-events: none;
}

.yss-search-box input {
	width: 100%;
	font-family: var(--yss-font);
	font-size: var(--yss-fs-small);
	padding: 12px 16px 12px 44px;
	border-radius: var(--yss-radius-pill);
	border: 1px solid var(--yss-border);
	background: var(--yss-white);
	color: var(--yss-ink);
}

.yss-search-box input:focus {
	outline: 2px solid var(--yss-red);
	outline-offset: 1px;
}

.yss-filter-empty {
	display: none;
	text-align: center;
	color: var(--yss-gray);
	padding: var(--yss-space-7) 0;
}

.yss-filter-empty.is-visible {
	display: block;
}

@media (max-width: 767px) {
	.yss-filter-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.yss-search-box {
		width: 100%;
	}
}

/* /programs/ (body.page-id-106) — "Upcoming Programs" cards restyled per
   a supplied reference: date badge overlaid bottom-left of the photo
   (instead of top-left category badge), a category eyebrow line below
   the photo, a location line with a pin icon, and a "Learn More" +
   circular arrow-icon footer. Colors kept on-brand (--yss-red), not the
   reference's teal, per this site's established "no pink/off-brand
   buttons, always brand red" rule. Scoped to this page only — the shared
   .yss-story-card component (and .yss-story-card__badge default
   position) used elsewhere on the site is untouched. */
body.page-id-106 .yss-story-card__badge--date {
	top: auto;
	bottom: 12px;
}

body.page-id-106 .yss-story-card__location {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
	margin-bottom: var(--yss-space-3);
}

body.page-id-106 .yss-story-card__location svg {
	flex-shrink: 0;
	color: var(--yss-red);
}

body.page-id-106 .yss-story-card__footer--arrow {
	justify-content: flex-start;
	gap: 10px;
	border-top: none;
	padding-top: 0;
}

body.page-id-106 .yss-story-card__learn-more {
	font-weight: 700;
	font-size: var(--yss-fs-small);
	color: var(--yss-red);
}

body.page-id-106 .yss-story-card--link:hover .yss-story-card__title {
	color: var(--yss-red);
}

body.page-id-106 .yss-story-card--link:hover .yss-icon-circle--red {
	transform: scale(1.08);
}

/* Story / program card with body below image (not overlaid) */
.yss-story-card {
	background: var(--yss-cream);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-card);
	overflow: hidden;
}

.yss-story-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.yss-story-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Category pill, overlaid top-left on the photo — per a supplied
   reference design (badge + title + desc + date/Read More footer). */
.yss-story-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background-color: var(--yss-red);
	color: var(--yss-white);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--yss-radius-pill);
}

.yss-story-card__body {
	padding: var(--yss-space-4);
}

.yss-story-card__title {
	font-weight: 800;
	font-size: var(--yss-fs-lead);
	margin-bottom: var(--yss-space-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Explicit, not just inherited plain text: this component is now also
	   used with the whole card wrapped in an <a> (Programs, Alumni Success
	   Stories), where the title would otherwise inherit the anchor's own
	   link color instead of the page's ink color. */
	color: var(--yss-ink);
}

.yss-story-card__desc {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
	margin-bottom: var(--yss-space-3);
}

.yss-story-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--yss-space-3);
	border-top: 1px solid var(--yss-border);
}

.yss-story-card__date {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

/* Opportunity list row (Get Involved) */
.yss-opportunity {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yss-space-4);
	padding: var(--yss-space-4);
	background: var(--yss-cream);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-card);
}

.yss-opportunity + .yss-opportunity {
	margin-top: var(--yss-space-3);
}

.yss-opportunity__title {
	font-weight: 700;
	margin-bottom: 2px;
}

.yss-opportunity__meta {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Map placeholder (Impact page) */
.yss-map-placeholder {
	background: var(--yss-cream);
	border-radius: var(--yss-radius-lg);
	padding: var(--yss-space-7);
	text-align: center;
	color: var(--yss-gray);
}

/* Forms (Volunteer Registration) */
.yss-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--yss-space-4);
}

.yss-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.yss-form__field--full {
	grid-column: 1 / -1;
}

.yss-form__field label {
	font-size: var(--yss-fs-small);
	font-weight: 700;
	color: var(--yss-ink);
}

.yss-form__field input[type="text"],
.yss-form__field input[type="email"],
.yss-form__field input[type="tel"],
.yss-form__field input[type="date"],
.yss-form__field select,
.yss-form__field textarea {
	font-family: var(--yss-font);
	font-size: var(--yss-fs-body);
	padding: 12px 20px;
	border-radius: var(--yss-radius-pill, 999px);
	border: 1px solid var(--yss-border);
	background: var(--yss-white);
	color: var(--yss-ink);
	box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.yss-form__field input[type="text"],
.yss-form__field input[type="email"],
.yss-form__field input[type="tel"],
.yss-form__field input[type="date"],
.yss-form__field select {
	height: 48px;
}

.yss-form__field textarea {
	border-radius: var(--yss-radius-lg);
	padding: 14px 20px;
}

.yss-form__field input[type="text"]:hover,
.yss-form__field input[type="email"]:hover,
.yss-form__field input[type="tel"]:hover,
.yss-form__field input[type="date"]:hover,
.yss-form__field select:hover,
.yss-form__field textarea:hover {
	border-color: var(--yss-red);
}

.yss-form__field input[type="text"]:focus,
.yss-form__field input[type="email"]:focus,
.yss-form__field input[type="tel"]:focus,
.yss-form__field input[type="date"]:focus,
.yss-form__field select:focus,
.yss-form__field textarea:focus {
	outline: none;
	border-color: var(--yss-red);
	box-shadow: 0 0 0 3px rgba(206, 32, 39, 0.12);
}

/* Optional-field hint inside a label, and the file picker (Contact page
   Partnership form's PDF attachment) styled to match the other inputs. */
.yss-form__optional {
	font-weight: 400;
	color: var(--yss-gray);
}

.yss-form__field input[type="file"] {
	font-family: var(--yss-font);
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
	padding: 8px;
	border: 1px dashed var(--yss-border);
	border-radius: var(--yss-radius-lg);
	background: var(--yss-white);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.yss-form__field input[type="file"]:hover,
.yss-form__field input[type="file"]:focus-visible {
	border-color: var(--yss-red);
	outline: none;
}

.yss-form__field input[type="file"]::file-selector-button {
	font-family: var(--yss-font);
	font-weight: 700;
	font-size: var(--yss-fs-small);
	color: var(--yss-white);
	background: var(--yss-red);
	border: 0;
	border-radius: var(--yss-radius-pill, 999px);
	padding: 8px 18px;
	margin-right: 12px;
	cursor: pointer;
}

.yss-form__field input[type="file"]::file-selector-button:hover {
	background: var(--yss-red-dark);
}

.yss-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

.yss-form__checkbox a {
	color: var(--yss-red);
}

/* Form tabs (Contact page "Get in Touch" — Enquiry / Partnership) — a
   pill-shaped segmented toggle, reusing the exact look of the Alumni
   directory's "By Alumni / By Country" view toggle
   (.yss-alumni-directory-map__viewtoggle) for UI consistency. Applied via
   the native Elementor Tabs (nested-tabs) widget's _css_classes so the
   tab structure stays a real widget; only its default heading/button
   chrome is restyled here. */
/* .e-n-tabs-heading is a flex ITEM of .e-n-tabs, whose default direction
   is column — a column flex container's default align-items:stretch
   forces every child to full width regardless of the child's own
   display value, which is why display:inline-flex alone wasn't enough to
   keep this track hugging its content. align-self opts this one item out
   of that stretch. */
.yss-form-tabs .e-n-tabs-heading {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: #F3F4F6;
	border-radius: var(--yss-radius-pill, 999px);
	margin-bottom: var(--yss-space-4);
}

.yss-form-tabs .e-n-tab-title {
	height: 40px;
	padding: 0 20px;
	border-radius: var(--yss-radius-pill, 999px);
	background: transparent;
	color: var(--yss-gray, #6B7280);
	font-size: 14px;
	font-weight: 700;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.yss-form-tabs .e-n-tab-title[aria-selected="false"]:hover {
	color: var(--yss-ink, #101010);
}

.yss-form-tabs .e-n-tab-title[aria-selected="true"] {
	background: var(--yss-red, #CE2027);
	color: var(--yss-white, #fff);
	box-shadow: 0 2px 6px rgba(206, 32, 39, 0.35);
}

.yss-reason-card {
	display: flex;
	gap: var(--yss-space-3);
	align-items: flex-start;
}

.yss-reason-card .yss-icon-circle {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
}

.yss-reason-card__title {
	font-weight: 700;
	margin-bottom: 2px;
}

.yss-reason-card__desc {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

@media (max-width: 768px) {
	.yss-timeline {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--yss-space-4);
	}
	.yss-timeline::before {
		display: none;
	}
	.yss-form {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * 14. PHOTO COLLAGE (About — "Who We Are")
 * ------------------------------------------------------------------ */
.yss-photo-collage {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--yss-space-3);
	align-items: stretch;
}

.yss-photo-collage__side {
	display: flex;
	flex-direction: column;
	gap: var(--yss-space-3);
}

.yss-photo-collage img {
	width: 100%;
	object-fit: cover;
	border-radius: var(--yss-radius-md);
	display: block;
	aspect-ratio: 4 / 5;
}

.yss-photo-collage__side img {
	aspect-ratio: 1 / 1;
}

@media (max-width: 767px) {
	.yss-photo-collage {
		grid-template-columns: 1fr;
	}
	.yss-photo-collage__side {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
	}
}

/* ---------------------------------------------------------------------
 * 15. CTA BANNER — RED / PHOTO VARIANTS
 * ------------------------------------------------------------------ */
.yss-cta--red {
	background-color: var(--yss-red);
}

.yss-cta--red .yss-eyebrow {
	color: var(--yss-white);
	opacity: 0.85;
}

.yss-cta--photo {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.yss-cta--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.35) 0%, rgba(18, 18, 18, 0.8) 100%);
}

.yss-cta--photo > * {
	position: relative;
	z-index: 1;
}

/* Steps rendered on a dark/red background (e.g. Volunteer Journey banner) */
.yss-steps--on-dark .yss-icon-circle {
	background-color: var(--yss-white);
	color: var(--yss-red);
}

.yss-steps--on-dark .yss-step__number {
	color: rgba(255, 255, 255, 0.7);
}

.yss-steps--on-dark .yss-step__title {
	color: var(--yss-white);
}

.yss-steps--on-dark .yss-step__desc {
	color: rgba(255, 255, 255, 0.75);
}

.yss-steps--on-dark.yss-steps--connected .yss-step:not(:last-child)::after {
	border-top-color: rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------------------
 * 16. SUBPAGE HERO — full-bleed photo + dark scrim + wave-bottom divider
 * Redesigned 2026-08-30 (per the pending "subpage hero photo redesign"
 * TODO) from the earlier side-by-side split-cover (text column + a
 * boxed photo in the right half) to a full-width photo background
 * behind the text, matching a supplied reference screenshot. The markup
 * is untouched — .yss-split-cover__visual still just wraps a plain
 * <img> — only the CSS changed: the visual is now pinned absolute to
 * cover the whole section instead of sitting in its own flex column, so
 * no _elementor_data structural edit was needed for any of the pages
 * using this component, only swapping each page's <img src>/alt to a
 * new full-bleed-worthy photo. .yss-split-cover--curved-left is a
 * no-op now (a curved photo edge doesn't apply to a full-bleed
 * background) — left in the markup harmlessly rather than editing it
 * out of every page.
 * ------------------------------------------------------------------ */
.yss-split-cover {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	overflow: hidden;
	isolation: isolate;
}

.yss-split-cover__content {
	position: relative;
	z-index: 1;
	flex: 0 1 620px;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--yss-space-6);
	padding-right: var(--yss-space-5);
	padding-left: clamp(40px, 6vw, 120px);
}

.yss-split-cover__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Dark scrim over the photo — stronger over the text column (left) and
   toward the bottom (where the wave divider sits) so white text stays
   legible regardless of which photo a given page uses underneath. A
   third flat low-opacity layer sits under the two gradients so even the
   lighter right/top of the photo gets a little dimming — needed once the
   hero went edge-to-edge (see the container padding note above): with
   the containers no longer inset, more of each photo's busier detail
   (patterned clothing, a red event backdrop, etc.) sits directly behind
   the title text than before. */
.yss-split-cover__visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.88) 0%, rgba(16, 16, 16, 0.68) 40%, rgba(16, 16, 16, 0.42) 70%, rgba(16, 16, 16, 0.24) 100%),
		linear-gradient(0deg, rgba(16, 16, 16, 0.55) 0%, rgba(16, 16, 16, 0) 45%),
		rgba(16, 16, 16, 0.18);
}

/* Elementor's own `.elementor-widget { position: relative }` (frontend.
   min.css) sits between .yss-split-cover__visual and the <img> now that
   the hero photo is a real Image widget — that div has no height of its
   own (its only child is the absolutely-positioned img, so it collapses
   to 0), and being `position: relative` it becomes the img's actual
   containing block instead of .yss-split-cover__visual, so the img's
   `inset: 0` / `height: 100%` were resolving against a 0-height box.
   Overriding it back to `static` here (two classes beats Elementor's one)
   removes it as a positioning context so the img's absolute positioning
   skips through to .yss-split-cover__visual (which does have a real
   height, via its own inset: 0 off .yss-split-cover) as originally
   intended. */
.yss-split-cover__visual .elementor-widget-image {
	position: static;
}

/* !important on height: Elementor's own `.elementor img { height: auto;
   max-width: 100% }` (frontend.min.css) ties this rule's specificity
   exactly (one class + one element each) and loads after this
   stylesheet, so it silently won the height property once the hero
   photos became real Image widgets instead of plain <img> tags in an
   HTML widget (which weren't inside `.elementor img`'s reach the same
   way). Same category of fight as the other Elementor-widget-CSS
   !important overrides elsewhere in this file. */
.yss-split-cover__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center 35%;
	display: block;
}

/* Per-page crop tweak: the shared 35% vertical anchor above works for
   the other six sideloaded hero photos, but Collaborate's MOU/gala photo
   has its seated group concentrated in the bottom quarter of the frame,
   which 35% crops past — nudge just this one rather than changing the
   shared default and re-checking the other six. */
body.page-id-224 .yss-split-cover__visual img {
	object-position: center 80%;
}

/* Our Story's hero photo (a busy group/crowd shot) needs a fuller overlay
   than the shared scrim gives it: that gradient is intentionally strong
   over the text column and fades to almost nothing by the right edge (see
   the comment above .yss-split-cover__visual::before), which leaves the
   right two-thirds of this particular photo fully vivid and distractingly
   busy since there's no text there to justify going easy on it. A flat
   layer on top, scoped to this page only, evens that out without touching
   the shared gradient the other pages rely on for their own photos. */
body.page-id-432 .yss-split-cover__visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(16, 16, 16, 0.4);
}

/* The scrim has to paint over the photo. The absolutely-positioned <img>
   comes later in the DOM than .yss-split-cover__visual::before and both sit
   at z-index auto, so without this the photo covers the scrim on every hero
   (it went unnoticed on darker photos). z-index 1 keeps the scrim inside
   .yss-split-cover__visual's own stacking context (z-index 0), still under
   the z-index 1 title. The homepage has no .yss-split-cover, so it's
   unaffected. */
.yss-split-cover__visual::before {
	z-index: 1;
}

/* Breadcrumb dropped from the full-bleed hero per follow-up feedback —
   hidden via CSS rather than stripped out of each page's _elementor_data,
   consistent with keeping this a CSS-only redesign (see the section
   header comment above). The markup (<div class="yss-breadcrumb">…)
   is still there in all 7 pages, just not rendered here. */
.yss-split-cover .yss-breadcrumb {
	display: none;
}

.yss-split-cover .yss-eyebrow,
.yss-split-cover .yss-subtitle {
	color: var(--yss-white);
}

.yss-split-cover .yss-display {
	color: var(--yss-white);
}

/* Description paragraph dropped from the full-bleed hero per follow-up
   feedback (titles now carry the page on their own) — CSS-only, same
   pattern as the breadcrumb removal above: the <p class="yss-lead"> stays
   in every page's _elementor_data, just not rendered here. About's
   "Watch Our Story" link sits after this paragraph in the markup and is
   unaffected. */
.yss-split-cover .yss-lead {
	display: none;
}

/* Wave-bottom divider: was a custom clip-path CSS wave (same technique as
   the "Our Impact" section's flaps, see section 6b) — replaced 2026-08-30
   with Elementor's own native "Shape Divider" feature (shape_divider_bottom:
   'wave-brush', width 100%, height 49px) set as real settings on each
   page's .yss-split-cover container, to match the live homepage's video
   hero divider exactly rather than a look-alike CSS approximation. See
   CLAUDE.md's hero-native-widget-conversion notes for the
   `_elementor_page_assets` caching gotcha this surfaced: the shape's CSS
   (`e-shapes`, in Elementor's conditionally-loaded
   assets/css/conditionals/shapes.min.css) never rendered until that
   per-post asset-dependency cache was cleared, even though the setting
   itself was correct.
   One more fix needed beyond that: Elementor renders `.elementor-shape-
   bottom` as the FIRST child of whichever container it's set on,
   `position: absolute; z-index: auto`. On the live homepage this is
   invisible-by-default because that hero's photo is a true CSS
   `background` on the same container (paints behind everything, shape
   divider included, with no z-index fight possible). Here the photo
   sits in a separate `.yss-split-cover__visual` element with its own
   explicit `z-index: 0` somewhere later in the DOM — on the 7 converted
   pages that's a direct sibling of the shape divider, but on
   `/volunteer-registration/` (still the older raw-HTML-widget hero,
   never converted — see CLAUDE.md) it's nested a level deeper inside an
   `html` widget that's the shape divider's sibling instead. Either way,
   since z-index:auto siblings paint in DOM order at the same stacking
   tier as explicit z-index:0 descendants, the photo was painting on top
   of the shape divider, hiding it completely despite it being correctly
   positioned. Deliberately global (not scoped to `.yss-split-cover`) so
   it also covers that raw-HTML-widget case, where the shape divider
   isn't a descendant of anything carrying the `.yss-split-cover` class
   at all. z-index:1 doesn't need to reach the text content's z-index:1
   on the converted pages — they don't overlap in practice (the divider
   sits at the very bottom edge). */
.elementor-shape-bottom {
	z-index: 1;
}

.yss-watch-story {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--yss-white);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--yss-fs-small);
}

.yss-watch-story__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--yss-red);
	color: var(--yss-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 900px) {
	.yss-split-cover {
		min-height: 460px;
	}
	.yss-split-cover__content {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding-block: var(--yss-space-5) calc(var(--yss-space-5) + 44px);
		padding-inline: 20px;
	}
}

/* Tighter horizontal padding at mobile widths (max 15px per side, per an
   explicit ask covering every section) — 20px (set just above) is the
   tablet/large-phone value; steps down to 15px at the site's standard
   767px mobile breakpoint. */
@media (max-width: 767px) {
	.yss-split-cover__content {
		padding-inline: 15px;
	}
}

/* ---------------------------------------------------------------------
 * 17. YSS TESTIMONIALS WIDGET (native Elementor widget) — base layout for
 * .yss-testimonial-card + .yss-testimonials-widget__* (inc/testimonials.php,
 * inc/elementor-widgets/class-yss-testimonials-widget.php). Colors,
 * typography, photo sizing and the button's full styling are all real
 * Elementor Style-tab controls on the widget itself (see that class) —
 * the values below are just those controls' own defaults, expressed as
 * plain CSS so the widget still looks right the moment it's dropped onto
 * a page before anyone opens the panel. This replaces the previous
 * page-id-305-scoped override of Elementor Pro's native "Testimonial
 * Carousel" widget — that widget's slide repeater has no link/button
 * field, so "See Full Content" had to be bolted on via JS DOM injection;
 * this widget renders the button as a first-class part of the markup
 * instead, and every color/spacing value below is editable from the
 * panel rather than hardcoded here with !important.
 * ------------------------------------------------------------------ */
.yss-testimonial-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--yss-space-5);
	/* Reserves clearance for the side-overlaid nav arrows (desktop only —
	   see .yss-testimonials-widget__prev/__next below) so the quote text
	   and photo never render underneath them. Reads the same
	   --yss-testimonial-arrow-size custom property the widget's Arrow Size
	   control writes (with a fallback matching that control's own default),
	   so the padding automatically tracks whatever size is set instead of
	   a hardcoded value that only matched one specific arrow size. Zeroed
	   on mobile, where arrows move below the card instead of overlaying it. */
	padding-inline: calc(var(--yss-testimonial-arrow-size, 52px) + var(--yss-space-3));
}

.yss-testimonial-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.yss-testimonial-card__text {
	font-family: inherit;
	font-size: var(--yss-fs-h3);
	font-weight: 600;
	line-height: 1.35;
	color: var(--yss-ink);
	margin: 0 0 var(--yss-space-4);
}

.yss-testimonial-card__text::before {
	content: "\201C";
	display: block;
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--yss-red);
	margin-bottom: var(--yss-space-2);
}

.yss-testimonial-card__cite {
	display: block;
	font-style: normal;
	margin-bottom: var(--yss-space-4);
}

.yss-testimonial-card__name {
	display: block;
	font-family: inherit;
	font-size: var(--yss-fs-small);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-testimonial-card__title {
	display: block;
	font-family: inherit;
	font-size: var(--yss-fs-small);
	font-weight: 400;
	color: var(--yss-gray);
}

/* The button is a real full button (background + padding + pill radius),
   not a text link — matches .yss-btn's own values as this widget's
   defaults, all overridable per-instance via the widget's Button style
   controls. */
.yss-testimonial-card__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--yss-space-2);
	font-family: var(--yss-font);
	font-size: var(--yss-fs-small);
	font-weight: 700;
	line-height: 1;
	padding: 16px 28px;
	border-radius: var(--yss-radius-pill);
	border: 1px solid transparent;
	background-color: var(--yss-red);
	color: var(--yss-white);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.yss-testimonial-card__btn:hover {
	background-color: var(--yss-red-dark);
	color: var(--yss-white);
}

.yss-testimonial-card__btn:hover,
.yss-testimonial-card__btn:focus-visible {
	transform: translateY(-2px);
}

/* Same CSS-drawn arrow as .yss-btn — hidden via .yss-testimonial-card__btn--custom-icon
   when the widget's own Icon control is set (see yss_render_testimonial_card()). */
.yss-testimonial-card__btn::after {
	content: '';
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M21.5904 20.1551L22.2683 12.4065L14.5197 11.7286M21.3107 13.21L11.3522 21.5662' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M21.5904 20.1551L22.2683 12.4065L14.5197 11.7286M21.3107 13.21L11.3522 21.5662' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

.yss-testimonial-card__btn--custom-icon::after {
	display: none;
}

.yss-testimonial-card__btn-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.yss-testimonial-card__btn-icon svg {
	width: 100%;
	height: 100%;
}

/* Smooth rounded blob mask (mask-yss-3.svg, supplied 2026-09-28 as
   "masking image yss.svg"; replaced the hand-silhouette mask-yss-1.svg
   here) + GPU-compositing nudge, as the widget's default photo look rather
   than a plain rounded rectangle. The "Photo Border Radius" style control above still applies
   to the image's own bounding box, which only shows once someone swaps
   the mask off via custom CSS; harmless to leave set either way. */
.yss-testimonial-card__photo img {
	width: 100%;
	height: auto;
	max-width: 320px;
	aspect-ratio: 379 / 341;
	object-fit: cover;
	margin-inline: auto;
	display: block;
	transform: translateZ(0);
	-webkit-mask-image: url('../img/mask-yss-3.svg');
	mask-image: url('../img/mask-yss-3.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

@media (max-width: 767px) {
	.yss-testimonial-card {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}
	.yss-testimonial-card__photo {
		order: -1;
	}
	.yss-testimonial-card__content {
		align-items: center;
		text-align: center;
	}
	.yss-testimonial-card__photo img {
		max-width: 260px;
	}
}

/* --- Carousel shell — same scroll-snap "track + prev/next arrows"
   mechanism as .yss-programs-widget__* (section 20), one slide (one full
   testimonial) per view instead of a per-view count, plus dot pagination
   since a single-slide carousel benefits from an at-a-glance position
   indicator the way a multi-card row doesn't. --- */
.yss-testimonials-widget__row {
	position: relative;
}

.yss-testimonials-widget__track {
	display: flex;
	/* Explicit 0 (not just the initial "no gap between slides" default) so
	   getComputedStyle(track).columnGap reliably reads back a numeric "0px"
	   for the nav script's step() calculation below — an unset gap computes
	   to "normal", and parseFloat("normal") is NaN, which silently breaks
	   every scrollBy() call (NaN scroll distance is a no-op) despite no JS
	   error anywhere. Same step()/getComputedStyle(...).columnGap formula as
	   .yss-programs-widget__track, which sets a real var(--yss-space-4) gap
	   and so never hits this. */
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.yss-testimonials-widget__track::-webkit-scrollbar {
	display: none;
}

.yss-testimonials-widget__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

/* Desktop: one arrow flush against the row's left edge, one against the
   right, both vertically centered on the row — the wrapper itself carries
   no layout (buttons are taken out of flow via position:absolute below),
   so it doesn't add empty flex space above the dots. Reverted to a plain
   centered row below the slide on mobile (see the media query at the
   bottom of this block) since the stacked mobile layout's height varies
   with quote length, so a vertical-center offset no longer lines up with
   anything meaningful once photo and text stack instead of sitting
   side-by-side. */
.yss-testimonials-widget__nav {
	display: contents;
}

.yss-testimonials-widget__nav button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--yss-testimonial-arrow-size, 52px);
	height: var(--yss-testimonial-arrow-size, 52px);
	border-radius: 50%;
	border: 1px solid var(--yss-border);
	background-color: var(--yss-white);
	color: var(--yss-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.yss-testimonials-widget__prev {
	left: 0;
}

.yss-testimonials-widget__next {
	right: 0;
}

.yss-testimonials-widget__nav button:hover,
.yss-testimonials-widget__nav button:focus-visible {
	background-color: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-testimonials-widget__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: var(--yss-space-3);
}

.yss-testimonials-widget__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background-color: var(--yss-border);
	padding: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.yss-testimonials-widget__dot.is-active {
	background-color: var(--yss-red);
	transform: scale(1.2);
}

@media (max-width: 767px) {
	.yss-testimonials-widget__nav {
		display: flex;
		justify-content: center;
		gap: var(--yss-space-2);
		margin-top: var(--yss-space-4);
	}
	.yss-testimonials-widget__nav button {
		position: static;
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * 18. NATIVE BUTTON WIDGET — "Our Impact" CTA (Elementor Pro's own
 * Button widget, /home-video-hero/ only). Elementor's "CSS Classes"
 * Advanced-tab field only ever lands on the widget's outer wrapper div,
 * never on the actual <a class="elementor-button"> it renders inside —
 * so classes like .yss-btn/.yss-btn--outline (written for a single plain
 * <a> element) can't reach the element that actually needs the pill
 * shape. Rather than pile up one-off inline widget settings (padding,
 * radius, typography, colors) in the page's postmeta, that styling lives
 * here as a reusable class, descendant-scoped onto the real button
 * element the same way .elementor-widget-testimonial-carousel is
 * targeted above — apply "yss-btn-native" via the widget's CSS Classes
 * field, same as any other yss-* class. Values match .yss-btn /
 * .yss-btn--outline (as flipped to white-on-dark by the
 * .yss-section:has(.yss-stat-card, .yss-step-circle) .yss-btn--outline override) 1:1.
 * ------------------------------------------------------------------ */
body.page-id-305 .yss-btn-native .elementor-button {
	font-family: var(--yss-font);
	font-size: var(--yss-fs-small);
	font-weight: 700;
	padding: 16px 28px;
	border-radius: var(--yss-radius-pill);
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: var(--yss-white);
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.page-id-305 .yss-btn-native .elementor-button:hover,
body.page-id-305 .yss-btn-native .elementor-button:focus {
	background-color: var(--yss-white);
	color: var(--yss-ink);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
 * 19. CATEGORY ROW — one-row, arrow-navigated card row used by the
 * [yss_program_categories] shortcode (inc/shortcodes.php) for the homepage
 * "Our Programmes" section. These classes turn the wrapping row into a
 * horizontally-scrollable single row with prev/next controls. Cards get a
 * fixed comfortable width rather than 1fr, so 5 of them fit one row at
 * normal desktop widths without needing to scroll at all — the scroll
 * behavior (and the arrows that drive it) exist for narrower viewports and
 * for whenever more than ~5 terms are passed in.
 *
 * .yss-category-card (below) is this row's own card component — photo +
 * name + short description + "Learn More", mirroring .yss-story-card's
 * look (section "CARDS") since both are photo-fronted content cards, but
 * kept as a separate class rather than reused directly: .yss-story-card's
 * `__footer` assumes a date next to the link, which a category card has no
 * equivalent of.
 * ------------------------------------------------------------------ */
.yss-category-row {
	position: relative;
}

.yss-category-card {
	background: var(--yss-cream);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.yss-category-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.yss-category-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yss-category-card__body {
	padding: var(--yss-space-4);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.yss-category-card__title {
	font-weight: 800;
	font-size: var(--yss-fs-lead);
	margin-bottom: var(--yss-space-2);
	color: var(--yss-ink);
}

.yss-category-card__desc {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
	margin-bottom: var(--yss-space-3);
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Shown instead of the image (badge) / instead of the "Learn More" button
   (note) when a category has zero published programs yet — see the
   `$term->count` check in yss_render_program_category_card(). Both disappear
   on their own the moment that category's first program is published, since
   the card is re-rendered live on every request; nothing to manually clear. */
.yss-category-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background-color: var(--yss-ink);
	color: var(--yss-white);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--yss-radius-pill);
}

.yss-category-card__soon {
	font-size: var(--yss-fs-small);
	color: var(--yss-gray-light);
	font-style: italic;
}

.yss-category-row__track {
	display: flex;
	gap: var(--yss-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	/* Hide the native scrollbar — the arrow buttons are the intended affordance. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.yss-category-row__track::-webkit-scrollbar {
	display: none;
}

.yss-category-row__track {
	/* Overridden inline per-instance via the [yss_program_categories] shortcode's
	   `per_view` attribute; this is just the fallback if that's ever missing. */
	--yss-cat-per-view: 5;
}

.yss-category-row__track .yss-category-card {
	flex: 0 0 calc((100% - (var(--yss-cat-per-view) - 1) * var(--yss-space-4)) / var(--yss-cat-per-view));
	min-width: 180px;
	scroll-snap-align: start;
}

.yss-category-row__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--yss-space-2);
	margin-top: var(--yss-space-4);
}

/* Responsive per-view always wins over whatever the shortcode requested —
   `!important` is needed here specifically to beat the inline
   `style="--yss-cat-per-view: N"` the shortcode prints on the track. */
@media (max-width: 1024px) {
	.yss-category-row__track {
		--yss-cat-per-view: 3 !important;
	}
}

@media (max-width: 767px) {
	.yss-category-row__track {
		--yss-cat-per-view: 1 !important;
	}
}

/* ---------------------------------------------------------------------
 * 20. PROGRAMS WIDGET CAROUSEL — one-row, arrow-navigated card row used by
 * the native "YSS Programs" Elementor widget (inc/elementor-widgets/
 * class-yss-programs-widget.php) via yss_render_programs_carousel()
 * (inc/programs.php). Same "scrollable row + prev/next" mechanism as
 * .yss-category-row (section 19), generalized so .yss-story-card (section
 * "CARDS") is reused as-is. Per-view count (desktop/tablet/mobile) comes
 * from the widget's own responsive "Cards Per View" control — no hardcoded
 * breakpoint overrides here, unlike .yss-category-row, since this widget is
 * meant to be end-to-end configurable including on mobile.
 * ------------------------------------------------------------------ */
.yss-programs-widget__row {
	position: relative;
}

.yss-programs-widget__track {
	display: flex;
	gap: var(--yss-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Fallback only — the widget's own responsive control normally sets this
	   per breakpoint via Elementor-generated CSS with higher specificity. */
	--yss-programs-per-view: 4;
}

.yss-programs-widget__track::-webkit-scrollbar {
	display: none;
}

.yss-programs-widget__slide {
	flex: 0 0 calc((100% - (var(--yss-programs-per-view) - 1) * var(--yss-space-4)) / var(--yss-programs-per-view));
	min-width: 0;
	scroll-snap-align: start;
}

.yss-programs-widget__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--yss-space-2);
	margin-top: var(--yss-space-4);
}

.yss-programs-widget__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--yss-border);
	background-color: var(--yss-white);
	color: var(--yss-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Explicit hover/focus/active states from the start — an unstyled <button>
   falls back to the OS/browser's native accent color on click otherwise
   (can render pink); always red here, matching the site's other controls. */
.yss-programs-widget__nav button:hover,
.yss-programs-widget__nav button:focus-visible {
	background-color: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

.yss-programs-widget__nav button:active {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
	color: var(--yss-white);
}

/* ---------------------------------------------------------------------
 * 21. MAP SECTION INTRO — centered intro text block above a section
 * (currently used above the Alumni Map's [yss_alumni_map] shortcode).
 * Extracted from what was previously inline styles on that section's raw
 * HTML widget, so any future centered-intro block can reuse it too.
 * ------------------------------------------------------------------ */
.yss-intro-block {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: 40px;
}

/* ---------------------------------------------------------------------
 * 22. STEP CIRCLE ROW — photo circles + title only, evenly spaced in one
 * row ("How to be part of us?" 6-step section on /home-video-hero/), per
 * a supplied reference (glossy circle badges + white title, no card box,
 * no description) — deliberately simpler than a card: just the circle
 * (photo instead of the reference's icon) and a title underneath, floating
 * directly on the section's background. Desktop keeps one row; narrower
 * breakpoints wrap since 6 items can't stay legible across one row below
 * ~1024px.
 * ------------------------------------------------------------------ */
.yss-step-circle-row {
	position: relative;
}

.yss-step-circle-row > .e-con-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--yss-space-4);
	width: 100%;
	position: relative;
	z-index: 1;
}

/* Dashed track running exactly first-photo-center to last-photo-center,
   plus a small arrowhead that travels along it on a loop — reads as "flow"
   from step 1 through to the last step rather than a static per-segment
   connector. The --yss-step-line-* custom properties are measured and set
   by assets/js/step-circle-row.js from the actual rendered circle
   positions (the row's items are centered as a group with a max-width cap,
   not stretched full-width, so a hardcoded percentage drifts depending on
   viewport — the JS keeps the line pinned to the real centers and correct
   length at any width). The percentage fallbacks below only apply for the
   instant before that script runs. Sits at z-index 0, behind the circles
   (z-index 1 above), so it visually passes underneath each photo. Desktop/
   one-row only: hidden once the row wraps below ~1024px, where a single
   straight track across multiple lines would no longer line up with
   anything. */
.yss-step-circle-row::before {
	content: '';
	position: absolute;
	top: var(--yss-step-line-top, 55px);
	left: var(--yss-step-line-start, 7%);
	width: calc(var(--yss-step-line-end, 93%) - var(--yss-step-line-start, 7%));
	height: 2px;
	transform: translateY(-50%);
	background: repeating-linear-gradient(
		to right,
		rgba(255, 255, 255, 0.35) 0,
		rgba(255, 255, 255, 0.35) 8px,
		transparent 8px,
		transparent 16px
	);
	z-index: 0;
}

.yss-step-circle-row::after {
	content: '';
	position: absolute;
	top: var(--yss-step-line-top, 55px);
	left: var(--yss-step-line-start, 7%);
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid var(--yss-red);
	filter: drop-shadow(0 0 6px rgba(206, 32, 39, 0.85));
	transform: translateY(-50%);
	z-index: 0;
	animation: yss-step-arrow-flow 4s ease-in-out infinite;
}

@keyframes yss-step-arrow-flow {
	0% {
		left: var(--yss-step-line-start, 7%);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	92% {
		opacity: 1;
	}
	100% {
		left: calc(var(--yss-step-line-end, 93%) - 14px);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yss-step-circle-row::after {
		animation: none;
		left: calc(var(--yss-step-line-end, 93%) - 14px);
		opacity: 1;
	}
}

.yss-step-circle {
	flex: 1 1 0;
	min-width: 0;
	max-width: 180px;
	text-align: center;
}

.yss-step-circle__photo,
.yss-step-circle__photo img {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 auto var(--yss-space-3);
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.08);
}

.yss-step-circle__title {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--yss-white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	margin: 0;
}

@media (max-width: 1024px) {
	.yss-step-circle-row > .e-con-inner {
		flex-wrap: wrap;
	}

	.yss-step-circle {
		flex: 0 1 calc(33.333% - var(--yss-space-4) * 2 / 3);
		max-width: none;
	}

	.yss-step-circle-row::before,
	.yss-step-circle-row::after {
		display: none;
	}
}

@media (max-width: 767px) {
	.yss-step-circle {
		flex: 0 1 calc(50% - var(--yss-space-3) / 2);
	}

	.yss-step-circle__photo,
	.yss-step-circle__photo img {
		width: 88px;
		height: 88px;
	}
}

/* ---------------------------------------------------------------------
 * 23. FLOATING SUB-NAV — scroll-spy jump list (About Us hub page)
 * A fixed vertical panel of anchor links to the hub's teaser sections
 * (Our Story, YSS Value, ...). Hidden until the hero scrolls out of view
 * (floating-subnav.js toggles .is-visible), and highlights whichever
 * section is centered in the viewport (.is-active). Below 1100px it
 * turns into a bottom-docked horizontal pill bar (see the media query at
 * the end of this section).
 * ------------------------------------------------------------------ */
.yss-floating-subnav {
	position: fixed;
	top: 50%;
	right: 28px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var(--yss-space-2);
	padding: var(--yss-space-3) var(--yss-space-4);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-lg);
	box-shadow: var(--yss-shadow-card);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.yss-floating-subnav.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

.yss-floating-subnav__link {
	position: relative;
	padding-left: var(--yss-space-3);
	font-size: var(--yss-fs-small);
	font-weight: 600;
	color: var(--yss-gray);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.yss-floating-subnav__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yss-border);
	transform: translateY(-50%) scale(1);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.yss-floating-subnav__link:hover {
	color: var(--yss-ink);
}

.yss-floating-subnav__link.is-active {
	color: var(--yss-red);
}

.yss-floating-subnav__link.is-active::before {
	background: var(--yss-red);
	transform: translateY(-50%) scale(1.5);
}

@media (max-width: 1366px) {
	.yss-floating-subnav {
		right: 16px;
		padding: var(--yss-space-2) var(--yss-space-3);
	}

	.yss-floating-subnav__link {
		font-size: 0.75rem;
	}
}

/* ≤1100px: no reliable side margin for the vertical panel, so it becomes
   a bottom-docked, horizontally scrollable pill bar (same links, same
   scroll-spy classes). floating-subnav.js scrolls the active pill into
   view within the bar. */
@media (max-width: 1100px) {
	.yss-floating-subnav {
		top: auto;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		flex-direction: row;
		gap: 6px;
		padding: 6px;
		border-radius: var(--yss-radius-pill, 999px);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		transform: translateY(16px);
	}

	.yss-floating-subnav::-webkit-scrollbar {
		display: none;
	}

	.yss-floating-subnav.is-visible {
		transform: translateY(0);
	}

	.yss-floating-subnav__link {
		flex: 0 0 auto;
		padding: 8px 14px;
		font-size: 0.8125rem;
		border-radius: var(--yss-radius-pill, 999px);
	}

	.yss-floating-subnav__link::before {
		display: none;
	}

	.yss-floating-subnav__link.is-active {
		color: var(--yss-white);
		background: var(--yss-red);
	}
}

/* ---------------------------------------------------------------------
 * 24. OUR JOURNEY — DARK TIMELINE (Our Story page)
 * Duplicates the *actual* background effect used by the live homepage's
 * "Our Impact" section (post 305, container id 51936d9) — not a CSS
 * recreation: this section's Elementor container carries the same real
 * settings verbatim (background_image = attachment 306, the red-waves
 * photo; background_position "center center"; background_size "cover";
 * background_attachment "fixed"; shape_divider_top/bottom "wave-brush").
 * Those are set directly on the container in _elementor_data, so the only
 * CSS needed here is the white text color for content sitting on the dark
 * photo — the background and both wave dividers are real Elementor
 * elements, not this stylesheet's doing.
 * ------------------------------------------------------------------ */
.yss-journey-section .yss-eyebrow {
	color: var(--yss-white);
}

.yss-journey-section .yss-heading {
	color: var(--yss-white);
}

/* Timeline itself, restyled for the dark background: each item becomes a
   frosted-glass card (same recipe as .yss-stat-card) that fades/slides up
   into place as it scrolls into view (timeline-reveal.js toggles
   .is-visible; each item's own inline transition-delay staggers them). */
.yss-timeline--journey {
	padding-top: var(--yss-space-5);
}

.yss-timeline--journey::before {
	border-top-color: rgba(255, 255, 255, 0.3);
}

/* A small bright highlight travels once along the connector line — the
   same "energy flowing along a track" idea as the homepage's step-circle
   connector (section 22, @keyframes yss-step-arrow-flow), reused here so
   the two timeline-ish moments on the site share a visual signature. */
.yss-journey-section .yss-timeline--journey::after {
	content: '';
	position: absolute;
	top: 7px;
	left: 0;
	height: 2px;
	width: 60px;
	background: linear-gradient(90deg, transparent, var(--yss-white), transparent);
	animation: yss-timeline-flow 5s ease-in-out infinite;
}

@keyframes yss-timeline-flow {
	0% { left: 0; opacity: 0; }
	8% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: calc(100% - 60px); opacity: 0; }
}

.yss-timeline--journey .yss-timeline__item {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--yss-radius-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	padding: var(--yss-space-4) var(--yss-space-3);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.yss-timeline--journey .yss-timeline__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.yss-timeline--journey .yss-timeline__dot {
	background: var(--yss-white);
	border-color: var(--yss-red);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
	position: relative;
}

/* Only the most recent milestone pulses — a "this is where we are now"
   cue rather than all five dots pulsing at once, which read as noisy
   during design review. */
.yss-timeline--journey .yss-timeline__item:last-child .yss-timeline__dot::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	animation: yss-timeline-pulse 2.2s ease-out infinite;
}

@keyframes yss-timeline-pulse {
	0% { transform: scale(0.6); opacity: 0.8; }
	100% { transform: scale(2); opacity: 0; }
}

.yss-timeline--journey .yss-timeline__year {
	color: var(--yss-white);
}

.yss-timeline--journey .yss-timeline__desc {
	color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
	.yss-timeline--journey .yss-timeline__item {
		transition: none;
		opacity: 1;
		transform: none;
	}
	.yss-journey-section .yss-timeline--journey::after,
	.yss-timeline--journey .yss-timeline__item:last-child .yss-timeline__dot::after {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * 25. YSS VALUE — I.M.M.E.R.S.E photo cards (native Elementor widgets)
 * Each card is a real Elementor Container holding an Image widget, a
 * Heading widget, and a Text Editor widget — not one hand-typed HTML
 * blob — per an explicit ask to build with actual widgets first and
 * reach for classes only to style/lay them out, not to replace them.
 *
 * The row is a real CSS Grid rather than flex-wrap: with 7 cards, a
 * flex-basis/max-width approach lets each row fit a different number of
 * cards depending on how the remainder wraps, so card width drifted row
 * to row (and the lone last-row card centered at a different width than
 * the ones above it) — the opposite of "every box follows the container
 * width consistently". Grid's column tracks are shared down every row,
 * so every card is exactly (container width − gaps) / 4 regardless of
 * which row it lands on; the 7th card just leaves an empty trailing
 * slot on the last row instead of being resized to fill it.
 * `!important` on display: grid because this class sits on the
 * Elementor container's own outer element, which carries a same-
 * specificity `display: var(--display)` (resolving to flex) from
 * Elementor's per-element generated CSS — see the analogous
 * .yss-grid--5 override elsewhere in this file for the same fight.
 * ------------------------------------------------------------------ */
.yss-value-cards-row {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--yss-space-5);
}

@media (max-width: 1024px) {
	.yss-value-cards-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.yss-value-cards-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.yss-value-cards-row {
		grid-template-columns: 1fr;
	}
}

.yss-value-card-native {
	width: 100%;
	text-align: center;
}

.yss-value-photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--yss-radius-lg);
	box-shadow: var(--yss-shadow-card);
	display: block;
	margin-bottom: var(--yss-space-3);
}

/* ---------------------------------------------------------------------
 * 26. ABOUT US HUB — hand-silhouette photo masks
 * Two supplied SVGs (assets/img/mask-yss-1.svg / -2.svg), mirror images
 * of each other: a rounded blob with a row of raised-hands silhouettes
 * cut into the bottom edge, each blob leaning toward the opposite side.
 * Applied to the hub's alternating teaser photos — mask-1 (leans right)
 * on photos sitting on the right of their row, mask-2 (leans left) on
 * photos sitting on the left — so the shape always "leans into" the
 * empty side of its own row rather than toward the text column.
 * aspect-ratio matches the SVG's own 379:341 box so mask-size:contain
 * doesn't stretch the shape; object-fit:cover still governs how the
 * source photo itself fills that box before masking.
 * ------------------------------------------------------------------ */
.yss-mask-1,
.yss-mask-2 {
	width: 100%;
	aspect-ratio: 379 / 341;
	object-fit: cover;
	display: block;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.yss-mask-1 {
	mask-image: url('../img/mask-yss-1.svg');
	-webkit-mask-image: url('../img/mask-yss-1.svg');
}

.yss-mask-2 {
	mask-image: url('../img/mask-yss-2.svg');
	-webkit-mask-image: url('../img/mask-yss-2.svg');
}

/* Contact page "Get in Touch" photo — the plain rounded blob
   (mask-yss-3.svg, supplied as "masking image yss.svg"; previously the
   hand-silhouette mask-yss-1 like .yss-mask-1 above). This photo is a native Elementor Image widget rather than a
   plain <img> inside an html widget. Elementor's Advanced > CSS Classes
   control puts _css_classes on the widget's own wrapper div, not the
   <img> it renders (same indirection already documented for the Heading
   widget elsewhere in this file) — applying .yss-mask-1 there masked the
   wrapper's box, not the photo, producing a misaligned/incomplete blob.
   Fix: scope a class on the wrapping Container instead and target the
   real <img> descendant directly. No transform:translateZ(0) here
   (unlike the testimonials photo mask): the source photo is a ~7000px
   original, and forcing it onto its own GPU layer exceeded the texture
   limit, so Chrome painted nothing at all. */
.yss-contact-photo .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 379 / 341;
	object-fit: cover;
	display: block;
	mask-image: url('../img/mask-yss-3.svg');
	-webkit-mask-image: url('../img/mask-yss-3.svg');
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* ---------------------------------------------------------------------
 * 27. TESTIMONIAL SINGLE PAGE (single-testimonial.php)
 * Deliberately its own template/URL (/testimonial/{slug}/), separate
 * from single-alumni.php (/alumni-profile/{slug}/) — same visual family
 * (reuses .yss-quote, .yss-cta, .yss-icon-circle) but its own hero/name
 * block and info-item rows, not a copy of the Alumni profile layout.
 * ------------------------------------------------------------------ */

/* Larger pull-quote than the shared .yss-quote base (1.375rem, used
   as-is on single-alumni.php) — scoped to body.single-testimonial (WP's
   own default body class for this CPT) rather than editing the shared
   rule, so single-alumni.php's quote block is untouched. clamp() keys
   off viewport width only, never the quote's own text length, so every
   one of the 10 testimonials renders the exact same size at a given
   screen width regardless of how long/short its quote is. */
body.single-testimonial .yss-quote__text {
	font-size: clamp(1.5rem, 1.1vw + 1.25rem, 2rem);
	font-weight: 700;
	line-height: 1.3;
}

body.single-testimonial .yss-quote__mark {
	font-size: 4.5rem;
}

.yss-testimonial-hero__name {
	font-size: var(--yss-fs-display);
	font-weight: 800;
	line-height: 1.1;
	color: var(--yss-ink);
	position: relative;
	padding-bottom: var(--yss-space-3);
	margin-bottom: var(--yss-space-3);
}

.yss-testimonial-hero__name::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--yss-red);
}

.yss-testimonial-hero__subtitle {
	font-size: var(--yss-fs-lead);
	font-weight: 700;
	color: var(--yss-red);
	margin-bottom: var(--yss-space-4);
}

.yss-testimonial-hero__info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yss-space-4);
}

.yss-info-item {
	display: flex;
	align-items: center;
	gap: var(--yss-space-2);
}

.yss-info-item .yss-icon-circle {
	width: 40px;
	height: 40px;
	font-size: 1rem;
	flex-shrink: 0;
}

.yss-info-item__label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--yss-gray);
}

.yss-info-item__value {
	font-size: var(--yss-fs-small);
	font-weight: 700;
	color: var(--yss-ink);
}

/* Full-bleed one-row hero (redesign per supplied reference screenshot):
   text column on plain white background, photo panel bleeding to the
   TRUE right edge and top of the viewport in the same row — deliberately
   its own layout, not a reuse of .yss-split-cover, since that pattern
   overlays white text on a dark-scrimmed photo; here text and photo stay
   two separate, fully visible panels side by side, one row, full width. */
.yss-testimonial-hero {
	display: flex;
	align-items: stretch;
	min-height: 480px;
	position: relative;
	padding-left: max(40px, calc((100vw - var(--yss-container)) / 2));
}

.yss-testimonial-hero__text {
	position: relative;
	z-index: 1;
	flex: 0 1 480px;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--yss-space-6);
	padding-right: var(--yss-space-5);
}

/* Soft diagonal wash in the gap between text and photo — a light tint of
   brand red (not the removed #FBF1F0 cream token) standing in for the
   reference image's pale pink accent shape. */
.yss-testimonial-hero__text::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -140px;
	width: 220px;
	background-color: rgba(206, 32, 39, 0.07);
	clip-path: polygon(55% 0, 100% 0, 45% 100%, 0 100%);
	z-index: -1;
}

/* Photo panel: fills the rest of the row, bleeding to the viewport's
   true right edge (no .yss-container gutter on this side) and top (no
   top padding on the hero) — object-fit:cover fills the box regardless
   of the source photo's own orientation/aspect ratio. Rounded only on
   the bottom-left corner, matching the reference; the other three
   corners are flush against the browser edges. */
.yss-testimonial-hero__photo-wrap {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	border-radius: 0 0 0 var(--yss-radius-lg);
}

.yss-testimonial-hero__photo-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Red diagonal-cut corner flap with a dotted pattern, overlapping the
   photo's own bottom-right corner. */
.yss-testimonial-hero__corner {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 120px;
	height: 120px;
	z-index: 2;
	background-color: var(--yss-red);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.yss-testimonial-hero__corner::before {
	content: '';
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 64px;
	height: 64px;
	background-image: radial-gradient(rgba(255, 255, 255, 0.85) 2px, transparent 2px);
	background-size: 12px 12px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

@media (max-width: 900px) {
	.yss-testimonial-hero {
		flex-direction: column;
		min-height: 0;
		padding-left: 0;
	}
	.yss-testimonial-hero__text {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		padding: var(--yss-space-5) 20px calc(var(--yss-space-5) + 8px);
	}
	.yss-testimonial-hero__text::after {
		display: none;
	}
	.yss-testimonial-hero__photo-wrap {
		flex: 0 0 auto;
		width: 100%;
		height: 320px;
		border-radius: 0;
	}
	.yss-testimonial-hero__info {
		gap: var(--yss-space-3);
	}
}

@media (max-width: 767px) {
	.yss-testimonial-hero__text {
		padding-inline: 15px;
	}
	.yss-testimonial-hero__photo-wrap {
		height: 260px;
	}
	.yss-testimonial-hero__corner {
		width: 84px;
		height: 84px;
	}
	.yss-testimonial-hero__corner::before {
		width: 44px;
		height: 44px;
		right: 10px;
		bottom: 10px;
	}
}

/* "Pengalaman & Perjalanan" full write-up section heading */
.yss-testimonial-section-title {
	display: flex;
	align-items: center;
	gap: var(--yss-space-3);
	margin-bottom: var(--yss-space-4);
}

.yss-testimonial-section-title h2 {
	position: relative;
	padding-bottom: var(--yss-space-2);
	margin: 0;
}

.yss-testimonial-section-title h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--yss-red);
}

.yss-testimonial-body {
	color: var(--yss-gray);
	line-height: var(--yss-lh-body);
}

.yss-testimonial-body p {
	margin-bottom: var(--yss-space-3);
}

.yss-testimonial-body p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * 28. CPT SINGLE/ARCHIVE HERO BACKGROUND (yss-page-hero fallback)
 * single-alumni.php, single-program.php, and every archive-*.php template
 * (via yss_archive_hero() in inc/site-parts.php) share one plain
 * .yss-page-hero component inside a bare .yss-section--cream wrapper —
 * unlike the .yss-split-cover pages, none of them ever had a background
 * photo. Applied here as a shared fallback background for any page using
 * this component, per an explicit ask, plus a bottom wave divider
 * matching /contact/'s Elementor-native shape divider exactly: same
 * asset (assets/img/wave-brush.svg, copied verbatim from Elementor core's
 * assets/shapes/wave-brush.svg, white fill added since there's no
 * Elementor runtime CSS to supply it here), same 49px height / 100%
 * width. Reproduced in plain CSS rather than an Elementor setting since
 * these are plain PHP templates, not Elementor content — the native
 * shape-divider widget feature isn't available outside Elementor.
 * Scoped via :has() so it only ever touches a .yss-section--cream that
 * actually wraps a .yss-page-hero, not other cream sections site-wide.
 * ------------------------------------------------------------------ */
.yss-section--cream:has(.yss-page-hero) {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 420px;
	padding-block: var(--yss-space-6);
	background-image:
		linear-gradient(90deg, rgba(16, 16, 16, 0.82) 0%, rgba(16, 16, 16, 0.55) 55%, rgba(16, 16, 16, 0.32) 100%),
		linear-gradient(0deg, rgba(16, 16, 16, 0.55) 0%, rgba(16, 16, 16, 0) 30%),
		url('/wp-content/uploads/2026/08/yss-impact-bg-red-waves-scaled.jpg');
	background-size: cover;
	background-position: center;
}

/* NOTE: deliberately no .yss-container width override here (an earlier
   version of this rule forced it to width:100%) — the background photo
   above lives on the outer .yss-section--cream, which is already full-width
   as a block-level section regardless of the container's own width, so
   nothing needed the container widened. Forcing it to 100% instead removed
   .yss-container's own centered gutter (calc(100% - 80px), the same left/
   right padding every other section on the site uses), leaving the
   breadcrumb/title/subtitle flush against the true viewport edge with 0
   left padding — confirmed via getBoundingClientRect() showing this hero's
   title at left:0 while the exact same page's content below it (still
   inside a normal .yss-container) sat at the correct left:40px. Removing
   the override just lets .yss-container behave here exactly like it does
   everywhere else. */

@media (max-width: 767px) {
	.yss-section--cream:has(.yss-page-hero) {
		min-height: 320px;
		padding-block: var(--yss-space-5);
	}
}

/* Real <img> element (.yss-page-hero-wave, emitted by yss_archive_hero()
   and single-alumni.php/single-program.php's own hero markup) — NOT a CSS
   background-image/mask-image. Confirmed by isolated test: this exact SVG
   file stretched via background-image or mask-image gets rasterized at
   its intrinsic 283.5x27.8 size before the ~5x horizontal stretch to the
   section's full width, flattening the fine wave curve into a hard flat
   edge near both corners — a real <img> (like Elementor's own inline
   <svg> on /contact/) re-renders the vector at final display size and
   stays crisp. Same root cause/category as the .yss-mask-1/-2 and
   paper-tear.svg preserveAspectRatio gotchas elsewhere in this file, but
   mask-image did NOT fix this one — only a real element does. */
.yss-page-hero-wave {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 49px;
	display: block;
	pointer-events: none;
	transform: scaleY(-1);
}

.yss-section--cream:has(.yss-page-hero) .yss-page-hero__title,
.yss-section--cream:has(.yss-page-hero) .yss-eyebrow,
.yss-section--cream:has(.yss-page-hero) .yss-lead {
	color: var(--yss-white);
}

.yss-section--cream:has(.yss-page-hero) .yss-breadcrumb,
.yss-section--cream:has(.yss-page-hero) .yss-breadcrumb a {
	color: rgba(255, 255, 255, 0.75);
}

.yss-section--cream:has(.yss-page-hero) .yss-breadcrumb a:hover,
.yss-section--cream:has(.yss-page-hero) .yss-breadcrumb span:last-child {
	color: var(--yss-white);
}

/* ---------------------------------------------------------------------
 * 29. HOMEPAGE "YSS MAIN PROGRAMMES" — CATEGORY TILE GRID
 * The homepage's "Our Programmes" section (body.page-id-305) shows
 * program CATEGORIES only, not individual program cards — replaces the
 * yss-programs carousel widget that lived here before. Each tile shares
 * one supplied stock photo as its background (a simple "browse by
 * category" look, not a per-category photo set) — scoped to this page
 * only, not a sitewide component.
 * ------------------------------------------------------------------ */
.yss-category-grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

body.page-id-305 .yss-category-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-height: 160px;
	padding: var(--yss-space-4);
	border-radius: var(--yss-radius-card);
	overflow: hidden;
	text-decoration: none;
	background-image:
		linear-gradient(0deg, rgba(16, 16, 16, 0.82) 0%, rgba(16, 16, 16, 0.25) 70%),
		url('/wp-content/uploads/2026/08/yss-impact-bg-red-waves-scaled.jpg');
	background-size: cover;
	background-position: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-id-305 .yss-category-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--yss-shadow-lg);
}

body.page-id-305 .yss-category-tile__title {
	color: var(--yss-white);
	font-weight: 800;
	font-size: var(--yss-fs-lead);
	line-height: 1.2;
}

body.page-id-305 .yss-category-tile__count {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--yss-fs-small);
}

/* ---------------------------------------------------------------------
 * 30. HOMEPAGE HERO — FLOATING SOCIAL BAR
 * Right-side, vertically centered, fixed to the viewport (visible while
 * scrolling the whole homepage, not just past the hero) — rendered via
 * PHP on every request (see inc/social-links.php), not baked into the
 * page's _elementor_data, so toggling a platform in the Customizer
 * ("YSS Social Links") takes effect immediately with no postmeta edit.
 * ------------------------------------------------------------------ */
.yss-hero-social {
	position: fixed;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	opacity: 1;
	transition: opacity 0.25s ease;
}

/* Only visible while the video hero is on screen — toggled by
   assets/js/hero-social.js against .yss-hero-video-section's own
   scroll position, so it fades out once the hero scrolls past. */
.yss-hero-social.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.yss-hero-social__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--yss-white);
	color: var(--yss-ink);
	box-shadow: var(--yss-shadow-card-flat);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.yss-hero-social__icon:hover {
	background-color: var(--yss-red);
	color: var(--yss-white);
	transform: translateY(-2px);
}

.yss-hero-social__line {
	width: 1px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
	.yss-hero-social {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * 31. ORGANIZATION CHART (Board of Directors page, /about/board-of-directors/)
 * Pure CSS tree: a single trunk line down to Deputy Chairman, then one
 * horizontal bar with a vertical stub down to each of the 6 Board
 * Director nodes. Node width is fixed (130px) so the row's connector
 * math (inset by half a node's width on each side) lines up exactly
 * with each node's own center regardless of name-text wrapping.
 * ------------------------------------------------------------------ */
.yss-org-chart {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.yss-org-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

.yss-org-node__photo {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	overflow: hidden;
	background: #ECECEC;
	box-shadow: var(--yss-shadow-card-flat);
}

.yss-org-node__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yss-org-node__name {
	margin-top: 10px;
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--yss-ink);
	max-width: 140px;
}

.yss-org-node__role {
	font-size: 12px;
	color: var(--yss-gray);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-top: 2px;
}

.yss-org-chart__trunk {
	width: 3px;
	height: 48px;
	background-color: var(--yss-ink);
}

.yss-org-chart__row {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: 48px;
	margin-top: 0;
}

.yss-org-chart__row::before {
	content: '';
	position: absolute;
	top: 0;
	left: 65px;
	right: 65px;
	height: 3px;
	background-color: var(--yss-ink);
}

.yss-org-chart__row .yss-org-node {
	flex: 0 0 130px;
}

.yss-org-chart__row .yss-org-node::before {
	content: '';
	position: absolute;
	top: -48px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 48px;
	background-color: var(--yss-ink);
}

@media (max-width: 900px) {
	.yss-org-chart__row::before {
		display: none;
	}
	.yss-org-chart__row .yss-org-node::before {
		display: none;
	}
	.yss-org-chart__row {
		padding-top: 0;
		gap: 32px 16px;
	}
}

/* ---------------------------------------------------------------------
 * 32. MEDIA GALLERY (YSS @ Media page — replaces the old "Current
 * Programmes" section). Plain responsive grid of photos, each an <a>
 * with data-elementor-open-lightbox so Elementor's own already-enabled
 * global lightbox (kit setting global_image_lightbox: "yes") handles
 * the click-to-enlarge + slideshow, no extra JS needed.
 * ------------------------------------------------------------------ */
.yss-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.yss-gallery-item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--yss-radius-md);
	overflow: hidden;
}

.yss-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.yss-gallery-item:hover img {
	transform: scale(1.06);
}

.yss-gallery-item__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 12px 10px;
	background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
	color: var(--yss-white);
	font-size: var(--yss-fs-small);
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.yss-gallery-item:hover .yss-gallery-item__caption {
	opacity: 1;
}

@media (max-width: 900px) {
	.yss-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.yss-gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * 33. PROGRAMS FILTER TOOLBAR (/programs/ page's [yss_programs_filterable]
 * shortcode) — search + Category/Year/Month/Sort selects. Same pill/
 * height/shadow/focus treatment as the Alumni Directory map's toolbar
 * (yss-alumni-map plugin's alumni-directory-map.css) for a consistent
 * "filter row" look across the site; kept here rather than shared since
 * the two live in different packages (theme vs. plugin) and duplicating
 * ~15 lines of CSS was simpler than introducing a cross-package dependency
 * for it.
 * ------------------------------------------------------------------ */
.yss-programs-filter__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
}

.yss-programs-filter__search,
.yss-programs-filter__select {
	height: 48px;
	border-radius: var(--yss-radius-pill);
	border: 1px solid var(--yss-border);
	background: var(--yss-white);
	box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04);
	font-size: 14px;
	color: var(--yss-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.yss-programs-filter__search {
	flex: 1 1 240px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 18px center;
}

/* input[type="search"] on the selector, not just the class: a global base
   style (input[type="date"], ...[type="search"], ...) sets padding:0.5rem
   1rem and border-radius:3px with higher specificity (element+attribute)
   than a plain class — see the identical fix + full explanation on
   .yss-alumni-directory-map__search in the yss-alumni-map plugin's
   alumni-directory-map.css. Applying the same fix here up front rather
   than rediscovering it through testing again. */
input[type="search"].yss-programs-filter__search {
	padding: 0 20px 0 44px;
	border-radius: var(--yss-radius-pill);
}

.yss-programs-filter__select {
	flex: 0 1 160px;
	padding: 0 16px;
	cursor: pointer;
}

.yss-programs-filter__search:hover,
.yss-programs-filter__select:hover {
	border-color: var(--yss-red);
}

.yss-programs-filter__search:focus,
.yss-programs-filter__select:focus {
	outline: none;
	border-color: var(--yss-red);
	box-shadow: 0 0 0 3px rgba(206, 32, 39, 0.12);
}

.yss-programs-filter__empty[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.yss-programs-filter__search,
	.yss-programs-filter__select {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------
 * 34. JOB OPENING CARD (/careers/ archive + Contact page's "Career
 * Opportunities" section, via [yss_job_openings] — see
 * yss_render_job_opening_card() in inc/job-openings.php). Redesigned to
 * show only a short summary by default; the full posting (intro content +
 * responsibilities + requirements, now their own structured ACF fields
 * instead of one hand-formatted Editor blob) sits behind a native
 * <details> disclosure so the card itself stays scannable.
 * ------------------------------------------------------------------ */
.yss-job-card {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
	max-width: 800px;
	padding: var(--yss-space-5);
	background: var(--yss-white);
	border: 1px solid var(--yss-border);
	/* --yss-radius-card (8px), not --yss-radius-lg — every other card
	   component on the site (.yss-value-card, .yss-story-card, the media
	   card, etc.) uses --yss-radius-card; this one used a different token
	   by mistake, giving it noticeably rounder corners than everything
	   around it. */
	border-radius: var(--yss-radius-card);
	box-shadow: var(--yss-shadow-card);
	margin-bottom: 20px;
}

.yss-job-card__body {
	flex: 1 1 420px;
	min-width: 0;
}

.yss-job-card__title {
	font-size: var(--yss-fs-large);
	font-weight: 700;
	color: var(--yss-ink);
}

.yss-job-card__meta {
	color: var(--yss-gray);
	font-size: var(--yss-fs-small);
	margin-top: 6px;
}

.yss-job-card__summary {
	color: var(--yss-gray);
	margin-top: 10px;
	max-width: 640px;
}

.yss-job-card__apply {
	flex: none;
}

.yss-job-card__details {
	margin-top: 14px;
}

/* Custom disclosure marker (a plain chevron) instead of the browser's
   default triangle, rotated open via the [open] attribute — no JS. */
.yss-job-card__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--yss-red);
	font-size: var(--yss-fs-small);
	font-weight: 700;
	list-style: none;
}

.yss-job-card__toggle::-webkit-details-marker {
	display: none;
}

.yss-job-card__toggle::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.yss-job-card__details[open] .yss-job-card__toggle::after {
	transform: rotate(-135deg);
}

.yss-job-card__details-body {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--yss-border);
	color: var(--yss-gray);
	max-width: 640px;
}

.yss-job-card__details-heading {
	font-size: var(--yss-fs-small);
	font-weight: 700;
	color: var(--yss-ink);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 16px;
	margin-bottom: 8px;
}

.yss-job-card__details-heading:first-child {
	margin-top: 0;
}

.yss-job-card__list {
	margin: 0;
	padding-left: 20px;
}

.yss-job-card__list li {
	margin-bottom: 6px;
}

@media (max-width: 600px) {
	.yss-job-card {
		flex-direction: column;
	}
	.yss-job-card__apply {
		width: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------
 * 35. NEWS ARCHIVE (/category/news/, category-news.php) — reuses the
 * .yss-split-cover hero and section 33's filter toolbar; these rules only
 * cover what's new: the PHP-rendered hero's wave, the per-card category
 * buttons, and the result count.
 * ------------------------------------------------------------------ */

/* The Elementor heroes get their wave from a native shape divider. This
   PHP hero uses the theme's wave <img> instead (see .yss-page-hero-wave),
   which has to sit above the photo/scrim layer (.yss-split-cover__visual,
   z-index 0). */
.yss-split-cover--php .yss-page-hero-wave {
	z-index: 2;
}

/* Equal-height cards per grid row, with the date/Read More footer pinned
   to the bottom regardless of how long the title/excerpt run. */
.yss-news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.yss-news-card .yss-story-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.yss-news-card .yss-story-card__footer {
	margin-top: auto;
}

.yss-news-card .yss-story-card__image {
	display: block;
	flex-shrink: 0;
}

.yss-news-card .yss-story-card__title a {
	color: inherit;
	text-decoration: none;
}

.yss-news-card .yss-story-card__title a:hover,
.yss-news-card .yss-story-card__title a:focus-visible {
	color: var(--yss-red);
}

.yss-news-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--yss-space-2);
}

/* Explicit hover/focus-visible/active states so the button never falls
   back to the browser's native accent color (which rendered pink before —
   see the no-pink note in design-system.md history). */
.yss-news-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 1.5px solid var(--yss-red);
	border-radius: var(--yss-radius-pill);
	background-color: var(--yss-white);
	color: var(--yss-red);
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.yss-news-chip:hover,
.yss-news-chip:focus-visible,
.yss-news-chip:active,
.yss-news-chip.is-active {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
	color: var(--yss-white);
	outline: none;
}

.yss-news-filter__count {
	margin: -16px 0 20px;
	font-size: 14px;
	color: var(--yss-gray);
}

/* ---------------------------------------------------------------------
 * 36. ELEMENTOR PRO POPUPS — edge spacing
 * The popup's own Padding control (Popup settings → Style, set to 50px
 * top/bottom on the About page popups 544–556) is the single source of the
 * space above the first and below the last content. The page sections
 * copied into these popups still carry .yss-section's 96px padding-block
 * plus Elementor's default 10px container padding, which would stack on
 * top of it, so zero both on the popup's outer edges only. Spacing between
 * sections inside a popup is untouched.
 * ------------------------------------------------------------------ */
.elementor-popup-modal .dialog-message > .elementor > .e-con:first-child,
.elementor-popup-modal .dialog-message > .elementor > .e-con:first-child > .e-con:first-child,
.elementor-popup-modal .dialog-message > .elementor > .e-con:first-child > .e-con-inner > .e-con:first-child {
	padding-top: 0 !important;
}

/* .dialog-message is a flex row with a capped height (it scrolls), so its
   .elementor child is stretched to exactly that visible height and taller
   content overflows it. The popup's bottom padding then lands after the
   stretched box instead of after the content, and scrolling to the end
   shows the last section flush against the edge. Letting the child size
   to its content puts the bottom padding after the real content. */
.elementor-popup-modal .dialog-message > .elementor {
	align-self: flex-start;
}

.elementor-popup-modal .dialog-message > .elementor > .e-con:last-child,
.elementor-popup-modal .dialog-message > .elementor > .e-con:last-child > .e-con:last-child,
.elementor-popup-modal .dialog-message > .elementor > .e-con:last-child > .e-con-inner > .e-con:last-child {
	padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
 * 37. I.M.M.E.R.S.E WORDMARK — the values heading used in the Our Story
 * popup's "Our Values" section (Figma "yss-pillar" file, node 2:4). A
 * dark block with a large faint IMMERSE word between two hairlines, a
 * decorative arc + gold dot top-right, and the seven values underneath. Sized in container query
 * units off the block's own width, so it scales as one piece from the
 * 1030px design width down to phones. Assets: assets/img/immerse/.
 * The value labels are plain text (no longer buttons) since the value
 * cards they used to scroll to were removed from the popup.
 * ------------------------------------------------------------------ */
.yss-immerse {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	background-color: #1e2530;
	border-radius: var(--yss-radius-md);
	padding-bottom: 1cqi;
}

.yss-immerse__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.yss-immerse__decor {
	position: absolute;
	display: block;
	pointer-events: none;
}

.yss-immerse__decor--outer {
	top: -7cqi;
	right: 2.9cqi;
	width: 17.5cqi;
	height: 17.5cqi;
}

.yss-immerse__decor--inner {
	top: -5.05cqi;
	right: 5.8cqi;
	width: 11.65cqi;
	height: 11.65cqi;
}

.yss-immerse__decor--gold {
	top: -1.75cqi;
	right: 10.1cqi;
	width: 2.72cqi;
	height: 2.72cqi;
}

.yss-immerse__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 2.6cqi 3.9cqi 0;
	height: 16.6cqi;
	border-top: 1px solid #3a4555;
	border-bottom: 1px solid #3a4555;
}

/* Trailing letter-spacing is offset with an equal padding-left so the
   word stays optically centered. */
.yss-immerse__word {
	display: block;
	padding-left: 0.24em;
	font-family: var(--yss-font);
	font-size: 14.56cqi;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #2c3542;
	user-select: none;
}

.yss-immerse__values {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 1.1cqi;
	padding: 0 3.5cqi;
	list-style: none;
}

.yss-immerse__divider {
	flex: 0 0 1px;
	align-self: flex-start;
	height: 36px;
	background-color: #3a4555;
}

.yss-immerse__value {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 1 auto;
	max-width: 120px;
	padding: 0 4px;
	color: #d0d8e4;
	font-size: 11px;
	font-weight: 500;
	line-height: 15px;
	letter-spacing: 0.5px;
	text-align: center;
}

/* Acrostic letters only exist for the mobile layout below. */
.yss-immerse__letter {
	display: none;
}

/* Mobile: the seven values become a vertical acrostic list, each value
   paired with its I-M-M-E-R-S-E letter in the design's gold accent,
   separated by the design's own hairline colour. Desktop keeps the Figma
   row layout untouched. */
@media (max-width: 767px) {
	.yss-immerse__values {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin-top: 8px;
		padding: 0 5cqi 8px;
	}

	.yss-immerse__divider,
	.yss-immerse__value img {
		display: none;
	}

	.yss-immerse__value {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		max-width: none;
		padding: 12px 0;
		border-top: 1px solid #3a4555;
		text-align: left;
	}

	.yss-immerse__value:first-of-type {
		border-top: 0;
	}

	.yss-immerse__letter {
		display: block;
		flex: 0 0 28px;
		font-size: 28px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0;
		text-align: center;
		color: #c9a84c;
	}

	.yss-immerse__name {
		font-size: 15px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: 0.2px;
		color: #e6ebf2;
	}
}

/* ---------------------------------------------------------------------
 * 38. STRATEGIC HOUSE DIAGRAM — the Our Story popup's "YSS Strategic
 * House" section (Figma "yss-pillar" file, node 3:5
 * "house-strategy-framework"). A dark panel with a red roof (Vision) over
 * five labelled rows: Mission, Goals, Pillars, Theme, Foundation. Built as
 * a real grid (label column + content column) rather than the design's
 * fixed 1000px geometry, so it reflows; below 768px each row stacks its
 * label above its content. Assets: assets/img/house/.
 * Colours are the design's own, except its pale cream cells (#FBF3ED),
 * which are plain white here per the site's no-pink rule.
 * ------------------------------------------------------------------ */
.yss-house {
	position: relative;
	overflow: hidden;
	padding: 40px 15px;
	background-color: #131822;
	border-radius: var(--yss-radius-md);
	color: var(--yss-white);
}

.yss-house__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.yss-house__decor {
	position: absolute;
	display: block;
	pointer-events: none;
}

.yss-house__decor--1 {
	top: -40px;
	right: 10px;
}

.yss-house__decor--2 {
	top: 0;
	right: 50px;
}

.yss-house__header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 0 16px;
	margin-bottom: 16px;
}

.yss-house__word {
	font-size: 52px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -1.5px;
	text-transform: uppercase;
	color: #d22d2d;
}

.yss-house__kicker {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8a96a8;
}

.yss-house__frame {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

.yss-house__roof {
	position: relative;
	height: 140px;
}

.yss-house__roof img {
	position: absolute;
	top: 8px;
	left: 6.7%;
	width: 86.6%;
	height: 105px;
}

.yss-house__vision {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.yss-house__vision-label {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.yss-house__vision-text {
	max-width: 760px;
	margin: 0;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.yss-house__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
}

.yss-house__row {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 8px;
}

.yss-house__label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background-color: #d22d2d;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}

.yss-house__band {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	margin: 0;
	background-color: #e0937c;
	color: var(--yss-white);
	text-align: center;
}

.yss-house__row--mission .yss-house__band {
	min-height: 72px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.yss-house__row--theme .yss-house__band,
.yss-house__row--foundation .yss-house__band {
	min-height: 48px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.yss-house__row--foundation .yss-house__band {
	background-color: #c27f69;
}

.yss-house__cells {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yss-house__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background-color: var(--yss-white);
	color: #262b35;
	text-align: center;
}

.yss-house__row--goals .yss-house__cell {
	min-height: 56px;
	font-size: 13px;
	font-weight: 700;
}

.yss-house__row--pillars .yss-house__cell {
	min-height: 180px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
}

@media (max-width: 767px) {
	.yss-house {
		padding: 28px 8px;
	}

	.yss-house__word {
		font-size: 40px;
	}

	/* The roof keeps its shape but grows taller so the wrapped Vision line
	   still sits on the red, not the dark panel. */
	.yss-house__roof {
		height: 170px;
	}

	.yss-house__roof img {
		left: 0;
		width: 100%;
		height: 162px;
	}

	.yss-house__vision {
		top: 62px;
	}

	.yss-house__vision-label {
		font-size: 24px;
	}

	.yss-house__vision-text {
		font-size: 12px;
		padding: 0 40px;
	}

	.yss-house__body {
		padding: 8px 0;
	}

	.yss-house__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.yss-house__label {
		padding: 6px;
		font-size: 13px;
	}

	.yss-house__cells {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yss-house__row--pillars .yss-house__cell {
		min-height: 96px;
		font-size: 12px;
	}
}

/* ---------------------------------------------------------------------
 * 39. VOLUNTEERISM PILLAR ROWS — the Our Story popup's "6 YSS
 * Volunteerism Pillars" section. Each pillar is a native two-column
 * Container row (text + an Elementor Pro Media Carousel on the Slideshow
 * skin: main photo, arrows, 5 thumbnails), alternating sides via the
 * row's own flex_direction and a neutral panel on every second row.
 * Layout, typography and colours are real Elementor settings; these rules
 * only cover what the widget has no control for.
 * ------------------------------------------------------------------ */
.yss-pillar-row .yss-pillar-row__sdg p {
	margin: 0;
}

.yss-pillar-row .yss-pillar-row__sdg strong {
	margin-right: 4px;
	color: var(--yss-red);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
}

.yss-pillar-gallery .elementor-main-swiper:not(.elementor-thumbnails-swiper) {
	border-radius: var(--yss-radius-md);
	overflow: hidden;
}

.yss-pillar-gallery .elementor-thumbnails-swiper {
	margin-top: 10px;
}

.yss-pillar-gallery .elementor-thumbnails-swiper .elementor-carousel-image {
	border-radius: 8px;
	border: 2px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

/* Loop mode duplicates slides, so the current thumbnail can carry either
   swiper-slide-active or swiper-slide-duplicate-active. */
.yss-pillar-gallery .elementor-thumbnails-swiper .swiper-slide:hover .elementor-carousel-image,
.yss-pillar-gallery .elementor-thumbnails-swiper .swiper-slide-active .elementor-carousel-image,
.yss-pillar-gallery .elementor-thumbnails-swiper .swiper-slide-duplicate-active .elementor-carousel-image {
	opacity: 1;
}

.yss-pillar-gallery .elementor-thumbnails-swiper .swiper-slide-active .elementor-carousel-image,
.yss-pillar-gallery .elementor-thumbnails-swiper .swiper-slide-duplicate-active .elementor-carousel-image {
	border-color: var(--yss-red);
}

/* Round translucent arrow buttons over the main photo, with explicit
   hover/focus-visible/active states (see the no-pink note). */
.yss-pillar-gallery .elementor-swiper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(16, 16, 16, 0.45);
	transition: background-color 0.2s ease;
}

.yss-pillar-gallery .elementor-swiper-button:hover,
.yss-pillar-gallery .elementor-swiper-button:focus-visible,
.yss-pillar-gallery .elementor-swiper-button:active {
	background-color: var(--yss-red);
	outline: none;
}

/* ---------------------------------------------------------------------
 * 36b. POPUPS ON MOBILE — edge-to-edge sections, 16px content gutter
 * The popups' own mobile padding is 0 left/right (popup settings), so a
 * section with a background (Our Journey's red waves, the grey pillar
 * panels) runs the full popup width. Content keeps one consistent 16px
 * gutter, replacing the stacked section padding + Elementor's default
 * 10px + .yss-container's calc(100% - 30px) that previously put text 55px
 * in from the edge on a phone.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.elementor-popup-modal .dialog-message > .elementor > .e-con {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elementor-popup-modal .dialog-message > .elementor > .e-con > .e-con,
	.elementor-popup-modal .dialog-message > .elementor > .e-con > .e-con-inner > .e-con {
		width: 100%;
		max-width: 100%;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Pillar rows: the grey (alt) panels bleed to the popup edges; the
	   16px gutter moves inside the row. */
	.elementor-popup-modal .yss-pillar-row {
		margin-left: -16px;
		margin-right: -16px;
		width: calc(100% + 32px) !important;
		max-width: none;
		padding-left: 16px !important;
		padding-right: 16px !important;
		border-radius: 0 !important;
	}

	/* The Media Carousel's Height control doesn't apply on the Slideshow
	   skin (the main photo stays 450px), which is a tall portrait crop on a
	   ~320px-wide phone. Size it by aspect ratio instead. Not popup-scoped:
	   the same rows are also on the Our Story and YSS Pillars pages. */
	.yss-pillar-gallery .elementor-main-swiper:not(.elementor-thumbnails-swiper) {
		height: auto !important;
		aspect-ratio: 4 / 3;
	}
}

/* Elementor core (common.min.css) switches popups to `position: sticky`
   below 1024px whenever the WP admin bar is present (`body.admin-bar`),
   which drops the popup into the page flow: it opens halfway down the
   screen with its bottom cut off and no overlay. Visitors never have the
   admin bar, so this only affected logged-in editors checking the site on
   a phone/tablet; keep the normal fixed overlay for them too. */
@media (max-width: 1024px) {
	body.admin-bar .elementor-popup-modal.dialog-type-lightbox {
		position: fixed;
	}
}

/* ---------------------------------------------------------------------
 * 40. BOARD OF DIRECTORS TREE — the Board of Directors popup (553), per a
 * supplied reference: Chairman → Deputy Chairman I → six board members in
 * one row, joined by solid connector lines. Photo, name and role use the
 * same look as Meet YSS All Stars (round photo, black name, red role). The
 * connectors are pseudo-elements, so the markup is just the members.
 * Below 768px the six members wrap to 2 columns and the horizontal
 * connector is dropped (a stem still links each level).
 * ------------------------------------------------------------------ */
.yss-board-tree {
	--yss-board-line: 4px;
	--yss-board-drop: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 8px;
}

.yss-board-tree__stem {
	width: var(--yss-board-line);
	height: 48px;
	margin: 12px 0;
	background-color: var(--yss-ink);
}

.yss-board-member {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.yss-board-member__photo {
	width: 160px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 50%;
	background: linear-gradient(135deg, #d6b57a 0%, #eeeeee 55%, #b9bcc2 100%);
	box-shadow: 0 8px 20px rgba(16, 16, 16, 0.12);
}

.yss-board-member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Name / role match Meet YSS All Stars (.yss-team-member__name / __role):
   black bold name, red role, same sizes. */
.yss-board-member__name {
	max-width: 240px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--yss-ink);
}

.yss-board-member__role {
	margin-top: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--yss-red);
}

.yss-board-member--chair .yss-board-member__name {
	max-width: 420px;
}

.yss-board-tree__row {
	position: relative;
	display: grid;
	--yss-board-gap: 16px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--yss-board-gap);
	width: 100%;
	padding-top: var(--yss-board-drop);
}

/* Horizontal bar spanning first to last member's centre. */
.yss-board-tree__row::before {
	content: '';
	position: absolute;
	top: 0;
	/* Column centre = half a column; columns are (100% - 5 gaps) / 6. */
	left: calc((100% - 5 * var(--yss-board-gap)) / 12);
	right: calc((100% - 5 * var(--yss-board-gap)) / 12);
	height: var(--yss-board-line);
	background-color: var(--yss-ink);
}

/* Drop from the bar to each member's photo. */
.yss-board-tree__row > .yss-board-member::before {
	content: '';
	position: absolute;
	top: calc(var(--yss-board-drop) * -1);
	left: 50%;
	width: var(--yss-board-line);
	height: var(--yss-board-drop);
	transform: translateX(-50%);
	background-color: var(--yss-ink);
}

.yss-board-tree__row .yss-board-member__photo {
	width: min(160px, 100%);
}

@media (max-width: 1024px) {
	.yss-board-tree__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 32px;
	}

	.yss-board-tree__row::before,
	.yss-board-tree__row > .yss-board-member::before {
		display: none;
	}

	.yss-board-tree__row {
		padding-top: 0;
	}
}

@media (max-width: 767px) {
	.yss-board-tree__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 12px;
	}

	.yss-board-member__photo,
	.yss-board-tree__row .yss-board-member__photo {
		width: 120px;
	}

	.yss-board-tree__stem {
		height: 32px;
	}
}

/* ---------------------------------------------------------------------
 * 41. PROGRAM CATEGORY SECTIONS — the /programs/ page's one-section-per-
 * category layout ([yss_program_category_sections], inc/programs.php):
 * label + title + short description on the left, a red "See All" button
 * (yss-btn--filled-red, the red pill with the standard arrow) on the right, then a carousel of the category's latest .yss-story-card
 * programmes (3 per view desktop, 2 tablet, 1 mobile; behaviour in
 * assets/js/program-category-rows.js). Every second section sits on a
 * red band (section 56). Empty categories show a "will update soon" note.
 * ------------------------------------------------------------------ */
.yss-program-cats {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: var(--yss-space-5);
}

.yss-program-cat {
	--yss-program-per-view: 3;
	padding: 40px;
	border-radius: 16px;
}

/* Red segments (1st, 3rd, 5th …) — the same red-waves photo and wave-brush
   edges as Our Story's Our Journey / YSS Value bands, full width. See
   section 56 below for the rest of the red-segment rules. */
.yss-program-cat--red {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 88px calc(50vw - 50% + 40px);
	border-radius: 0;
	background: #a11920 url('../../../../uploads/2026/08/yss-impact-bg-red-waves-scaled.jpg') center / cover no-repeat fixed;
}

.yss-program-cat__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 28px;
}

.yss-program-cat__intro {
	max-width: 680px;
}

.yss-program-cat__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yss-red);
}

.yss-program-cat__title {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 1.1vw + 1.05rem, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-program-cat__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--yss-gray);
}

.yss-program-cat__all {
	flex-shrink: 0;
	white-space: nowrap;
}

.yss-program-cat__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.yss-program-cat__track::-webkit-scrollbar {
	display: none;
}

.yss-program-cat__track:focus-visible {
	outline: 2px solid var(--yss-red);
	outline-offset: 4px;
}

.yss-program-cat__slide {
	flex: 0 0 calc((100% - (var(--yss-program-per-view) - 1) * 24px) / var(--yss-program-per-view));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

.yss-program-cat__slide .yss-story-card {
	width: 100%;
}

.yss-program-cat__nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.yss-program-cat__carousel.is-static .yss-program-cat__nav {
	display: none;
}

/* Explicit hover/focus-visible/active states (see the no-pink note). */
.yss-program-cat__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--yss-border);
	background-color: var(--yss-white);
	color: var(--yss-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.yss-program-cat__nav button:hover,
.yss-program-cat__nav button:focus-visible,
.yss-program-cat__nav button:active {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
	color: var(--yss-white);
	outline: none;
}

.yss-program-cat__empty {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
	border: 1px dashed var(--yss-border);
	border-radius: 12px;
	background-color: var(--yss-white);
}

.yss-program-cat__empty .yss-icon-circle {
	flex-shrink: 0;
}

.yss-program-cat__empty-title {
	margin: 0 0 2px;
	font-weight: 800;
	color: var(--yss-ink);
}

.yss-program-cat__empty-text {
	margin: 0;
	color: var(--yss-gray);
}

@media (max-width: 1024px) {
	.yss-program-cat {
		--yss-program-per-view: 2;
		padding: 32px 24px;
	}
}

@media (max-width: 767px) {
	.yss-program-cat {
		--yss-program-per-view: 1.15;
		/* Full-bleed on phones: .yss-container's mobile gutter is 15px
		   (width: calc(100% - 30px)), so bleed and re-pad by exactly that. */
		padding: 28px 15px;
		border-radius: 0;
		margin-left: -15px;
		margin-right: -15px;
	}

	.yss-program-cat__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.yss-program-cat__track {
		gap: 16px;
	}

	.yss-program-cat__slide {
		flex-basis: calc((100% - 16px) / 1.15);
	}
}

/* ---------------------------------------------------------------------
 * 42. GLOBAL PAGE — INTERNATIONAL PROJECTS (/global/, post 227): the
 * "Global Participation" cards (IVCO, IAVE, ...) and the horizontal
 * "Beyond Borders" timeline (2012 → 2026, vertical below 768px), above
 * the existing International Missions story cards.
 * ------------------------------------------------------------------ */
.yss-global-sub {
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-global-block + .yss-global-block {
	margin-top: 56px;
}

.yss-participation {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.yss-participation__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--yss-border);
	border-radius: 16px;
	background-color: var(--yss-white);
	box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04);
}

.yss-participation__card > .yss-icon-circle {
	margin: 24px 20px 0;
}

.yss-participation__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.yss-participation__card > .yss-icon-circle + .yss-participation__body {
	padding-top: 16px;
}

/* Photo cards: lead photo across the top; the whole set opens in
   Elementor's lightbox as one slideshow (the other photos are hidden
   links in the same data-elementor-lightbox-slideshow group). */
.yss-participation__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: #eee;
}

.yss-participation__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.yss-participation__media:hover img,
.yss-participation__media:focus-visible img {
	transform: scale(1.05);
}

.yss-participation__media:focus-visible {
	outline: 3px solid var(--yss-red);
	outline-offset: -3px;
}

.yss-participation__more {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 5px 10px;
	border-radius: var(--yss-radius-pill);
	background-color: rgba(16, 16, 16, 0.72);
	color: var(--yss-white);
	font-size: 0.75rem;
	font-weight: 700;
}

.yss-participation__hidden {
	display: none;
}

.yss-participation__tag {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: var(--yss-radius-pill);
	background-color: var(--yss-red);
	color: var(--yss-white);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.yss-participation__name {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--yss-ink);
}

.yss-participation__full {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--yss-red);
}

.yss-participation__desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--yss-gray);
}

/* Horizontal timeline: a red line through the dots, year above text. */
.yss-bb-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--yss-bb-count, 6), minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yss-bb-timeline::before {
	content: '';
	position: absolute;
	top: 9px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--yss-red) 0%, var(--yss-red) 85%, rgba(206, 32, 39, 0.2) 100%);
}

.yss-bb-timeline__item {
	position: relative;
	padding-top: 36px;
}

.yss-bb-timeline__item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--yss-white);
	border: 4px solid var(--yss-red);
	box-sizing: border-box;
}

.yss-bb-timeline__item--next::before {
	border-style: dashed;
}

.yss-bb-timeline__year {
	margin: 0 0 6px;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--yss-red);
}

.yss-bb-timeline__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--yss-ink);
}

@media (max-width: 1024px) {
	.yss-participation {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.yss-participation {
		grid-template-columns: minmax(0, 1fr);
	}

	.yss-bb-timeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-left: 36px;
	}

	.yss-bb-timeline::before {
		top: 0;
		bottom: 0;
		left: 9px;
		right: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(180deg, var(--yss-red) 0%, var(--yss-red) 85%, rgba(206, 32, 39, 0.2) 100%);
	}

	.yss-bb-timeline__item {
		padding-top: 0;
	}

	.yss-bb-timeline__item::before {
		top: 4px;
		left: -36px;
	}
}

/* ---------------------------------------------------------------------
 * 43. SINGLE MISSION PAGE (single-mission.php) — photo hero, "Mission
 * Details" fact strip, optional write-up, and a gallery where the first
 * photo spans a 2×2 cell. Photos open in Elementor's lightbox as one
 * slideshow per mission. Also: .yss-split-cover--long-title for heroes
 * whose title is a full mission name.
 * ------------------------------------------------------------------ */
.yss-split-cover--long-title .yss-display {
	font-size: clamp(2rem, 2.4vw + 1.1rem, 3.25rem);
	line-height: 1.12;
}

.yss-split-cover--long-title .yss-split-cover__content {
	flex-basis: 760px;
}

.yss-mission__sub {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 20px;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-mission__count {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--yss-gray);
}

.yss-mission__details,
.yss-mission__about,
.yss-mission__gallery-block {
	margin-bottom: 56px;
}

.yss-mission__open {
	display: inline-block;
	margin-bottom: 16px;
	padding: 4px 12px;
	border-radius: var(--yss-radius-pill);
	background-color: #1f8a4c;
	color: var(--yss-white);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.yss-mission__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

.yss-mission__fact {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--yss-border);
	border-radius: 16px;
	background-color: var(--yss-white);
}

.yss-mission__fact .yss-icon-circle {
	flex-shrink: 0;
}

.yss-mission__fact dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--yss-gray);
}

.yss-mission__fact dd {
	margin: 2px 0 0;
	font-size: 1rem;
	font-weight: 800;
	color: var(--yss-ink);
}

.yss-mission__content {
	max-width: 760px;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--yss-gray);
}

.yss-mission__gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 180px;
	gap: 12px;
}

.yss-mission__photo {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background-color: #eee;
}

.yss-mission__photo--lead {
	grid-column: span 2;
	grid-row: span 2;
}

.yss-mission__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.yss-mission__photo:hover img,
.yss-mission__photo:focus-visible img {
	transform: scale(1.04);
}

.yss-mission__photo:focus-visible {
	outline: 3px solid var(--yss-red);
	outline-offset: 2px;
}

.yss-mission__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

@media (max-width: 1024px) {
	.yss-mission__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yss-mission__gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 160px;
	}
}

@media (max-width: 767px) {
	.yss-mission__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.yss-mission__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 130px;
		gap: 8px;
	}
}

/* ---------------------------------------------------------------------
 * 44. NEWS ARTICLE (single.php) — shares section 27's testimonial layout;
 * these rules only adapt it to articles: a smaller hero title (article
 * titles are sentences, not names) and the Programme Summary block.
 * ------------------------------------------------------------------ */
.yss-testimonial-hero--article .yss-testimonial-hero__name {
	font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.625rem);
	line-height: 1.18;
}

.yss-testimonial-hero--article .yss-info-item__value {
	max-width: 320px;
}

.yss-article-summary__label {
	margin: 0 0 8px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yss-red);
}

.yss-article-summary .yss-quote__text {
	font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
}

.yss-article-facts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.yss-article-back {
	margin-top: 32px;
}

/* The global header is position:fixed and overlays the page (93px tall on
   desktop, 79px on phones), and the testimonial/article hero has no photo
   behind its text column — so the hero text must start below the header
   or the first line of the title sits under it. This was already clipping
   the testimonial pages' names on phones; long article titles made it
   visible on desktop too. Applies to both (shared section 27 layout). */
.yss-testimonial-hero__text {
	padding-top: calc(93px + var(--yss-space-4));
}

@media (max-width: 900px) {
	.yss-testimonial-hero__text {
		padding-top: calc(79px + var(--yss-space-4));
	}
}

/* ---------------------------------------------------------------------
 * 45. WHATSAPP BUTTON — for links that open the YSS WhatsApp Channel, so
 * visitors can tell at a glance where they'll land. WhatsApp green with
 * the WhatsApp glyph (inline SVG in the markup) instead of the red accent
 * button's heart. #1FA855 rather than WhatsApp's brighter #25D366 so white
 * text stays readable (≈3:1, AA for large/bold text — hence 18px bold).
 * Use with .yss-btn--no-arrow.
 * ------------------------------------------------------------------ */
.yss-btn--whatsapp {
	gap: 10px;
	background-color: #1fa855;
	border-color: #1fa855;
	color: var(--yss-white);
	font-size: 1.125rem;
	font-weight: 700;
}

.yss-btn--whatsapp svg {
	flex-shrink: 0;
}

.yss-btn--whatsapp:hover,
.yss-btn--whatsapp:focus-visible,
.yss-btn--whatsapp:active {
	background-color: #178a45;
	border-color: #178a45;
	color: var(--yss-white);
}

.yss-btn--whatsapp:focus-visible {
	outline: 3px solid rgba(31, 168, 85, 0.45);
	outline-offset: 3px;
}

/* Phones: .yss-btn is nowrap, so the long "Join Our WhatsApp Channel"
   label forced its column wider than the CTA card (which clips overflow),
   cutting off the button and the sentence above it. Let it shrink to the
   available width and wrap instead. */
@media (max-width: 767px) {
	.yss-btn--whatsapp {
		max-width: 100%;
		justify-content: center;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------------------
 * 46. HOMEPAGE HERO MOTTO — "Perpaduan Melalui Kesukarelawanan" as a
 * highlighted red pill above the hero title (post 305, widget 2d0cb1d).
 * A solid badge rather than red text because it sits on the darkened
 * video, where plain red text would read poorly.
 * ------------------------------------------------------------------ */
.yss-hero-video__motto {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 8px 18px;
	border-radius: var(--yss-radius-pill);
	background-color: var(--yss-red);
	box-shadow: 0 6px 20px rgba(206, 32, 39, 0.35);
	color: var(--yss-white);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.yss-hero-video__motto::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--yss-white);
}

@media (max-width: 767px) {
	.yss-hero-video__motto {
		font-size: 0.75rem;
		padding: 7px 14px;
		letter-spacing: 0.04em;
	}
}

/* ==========================================================================
   47. CONTACT "GET IN TOUCH" ANCHOR
   The Partners page CTA links to /contact/?yss_form=partnership#get-in-touch
   (the Contact page's own script then switches to the Partnership tab).
   Keep the jumped-to section clear of the fixed global header.
   ========================================================================== */
/* Also the About Us dropdown's jump links into the Our Story page. */
#get-in-touch,
#introduction,
#vision-mission,
#yss-pillars,
#yss-value,
#strategic-house {
	scroll-margin-top: 93px;
}

@media (max-width: 767px) {
	#get-in-touch,
	#introduction,
	#vision-mission,
	#yss-pillars,
	#yss-value,
	#strategic-house {
		scroll-margin-top: 79px;
	}
}

/* ==========================================================================
   48. PLAIN STATS SECTION (.yss-section--stats-plain) — Our Impact page
   A stat section on plain white using the same pill stat cards as /alumni/
   and /global/ (see body.page-id-221 / -227 above). Class-based rather than
   page-id-based, so it can be reused. Overrides the shared
   `.yss-section:has(.yss-stat-card)` dark-red "Our Impact" panel (gradient,
   white text, wave flaps) that any section containing stat cards gets by
   default. Selectors carry `.yss-section` twice-over (`.yss-section.
   yss-section--stats-plain`) to out-rank that rule's `:has()` specificity.
   ========================================================================== */
.yss-section.yss-section--stats-plain {
	background: var(--yss-white);
	padding-block: var(--yss-section-py);
}

.yss-section.yss-section--stats-plain::before,
.yss-section.yss-section--stats-plain::after {
	display: none;
}

.yss-section.yss-section--stats-plain .yss-eyebrow,
.yss-section.yss-section--stats-plain .yss-heading,
.yss-section.yss-section--stats-plain .yss-lead {
	color: var(--yss-ink);
}

.yss-section.yss-section--stats-plain .yss-eyebrow {
	color: var(--yss-red);
}

.yss-section.yss-section--stats-plain .yss-stat-card {
	flex-direction: row;
	align-items: center;
	gap: var(--yss-space-3);
	background-color: var(--yss-white);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-pill);
	box-shadow: var(--yss-shadow-card-flat);
	padding: var(--yss-space-3) var(--yss-space-5);
	backdrop-filter: none;
}

.yss-section.yss-section--stats-plain .yss-stat-card .yss-icon-circle {
	flex-shrink: 0;
	background-color: var(--yss-red);
	border: none;
	color: var(--yss-white);
}

.yss-section.yss-section--stats-plain .yss-stat-card__number,
.yss-section.yss-section--stats-plain .yss-stat-card__label {
	color: var(--yss-ink);
}

.yss-section.yss-section--stats-plain .yss-stat-card__number {
	font-size: 1.5rem;
	display: inline;
	margin-right: 6px;
	white-space: nowrap;
}

.yss-section.yss-section--stats-plain .yss-stat-card__label {
	font-size: var(--yss-fs-small);
	display: inline;
}

/* Layout: centred header, key numbers, then titled sub-groups. */
.yss-impact-stats__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--yss-space-6);
}

.yss-impact-stats__head .yss-heading {
	margin: var(--yss-space-1) 0 var(--yss-space-2);
}

.yss-impact-stats__head .yss-lead {
	margin: 0;
}

.yss-impact-stats .yss-grid--4 {
	grid-auto-rows: 1fr;
}

.yss-impact-stats__group {
	margin-top: var(--yss-space-7, 64px);
	padding-top: var(--yss-space-6);
	border-top: 1px solid var(--yss-border);
}

.yss-impact-stats__title {
	margin: 0 0 var(--yss-space-1);
	font-size: 1.375rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--yss-ink);
}

.yss-impact-stats__desc {
	margin: 0 0 var(--yss-space-4);
	max-width: 640px;
	font-size: var(--yss-fs-small);
	color: var(--yss-gray);
}

@media (max-width: 767px) {
	.yss-impact-stats__group {
		margin-top: var(--yss-space-5);
		padding-top: var(--yss-space-5);
	}
}

/* ==========================================================================
   49. HOMEPAGE VIDEO HERO — phone side margin
   The hero text only had the outer container's default 10px padding on
   phones, so it sat almost against the screen edge (the logo sits at 16px).
   Add 10px so the text starts 20px in, the same gutter as the subpage
   heroes (.yss-split-cover__content, section 16).
   ========================================================================== */
@media (max-width: 767px) {
	.yss-hero-video {
		padding-inline: 10px;
	}
}

/* Soft shadow so the title, especially the red "Beyond Borders" highlight,
   stays readable when a bright or red/yellow scene of the background video
   passes behind it (most noticeable on phones, where the text covers more
   of the frame). */
.yss-hero-video__title {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   50. BEYOND BORDERS TIMELINE ACCORDION (/global/)
   [yss_beyond_borders_timeline] (theme inc/shortcodes.php): FAQ-style rows,
   newest year first and open on load, one open at a time. Card look matches
   the Global Participation cards above it (.yss-participation__card).
   Replaces the old horizontal .yss-bb-timeline (section 42, now unused).
   ========================================================================== */
.yss-bb-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* The next section (International Missions) is a separate widget, so the
   usual .yss-global-block + .yss-global-block gap does not reach it. */
.yss-global-block:has(.yss-bb-accordion) {
	margin-bottom: 56px;
}

.yss-bb-accordion__item {
	border: 1px solid var(--yss-border);
	border-radius: 16px;
	background-color: var(--yss-white);
	box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yss-bb-accordion__item[open] {
	border-color: rgba(206, 32, 39, 0.35);
	box-shadow: 0 8px 24px rgba(16, 16, 16, 0.06);
}

.yss-bb-accordion__head {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 24px;
	cursor: pointer;
	list-style: none;
	border-radius: 16px;
}

.yss-bb-accordion__head::-webkit-details-marker {
	display: none;
}

.yss-bb-accordion__head:focus-visible {
	outline: 2px solid var(--yss-red);
	outline-offset: 2px;
}

.yss-bb-accordion__year {
	flex: 0 0 64px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--yss-red);
}

.yss-bb-accordion__title {
	flex: 1 1 auto;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--yss-ink);
}

.yss-bb-accordion__latest {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: var(--yss-red);
	color: var(--yss-white);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Plus sign that turns into a minus when open. */
.yss-bb-accordion__icon {
	position: relative;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--yss-border);
	border-radius: 50%;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.yss-bb-accordion__icon::before,
.yss-bb-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background-color: var(--yss-red);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.yss-bb-accordion__icon::after {
	transform: rotate(90deg);
}

.yss-bb-accordion__item[open] .yss-bb-accordion__icon {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
}

.yss-bb-accordion__item[open] .yss-bb-accordion__icon::before,
.yss-bb-accordion__item[open] .yss-bb-accordion__icon::after {
	background-color: var(--yss-white);
}

.yss-bb-accordion__item[open] .yss-bb-accordion__icon::after {
	transform: rotate(0deg);
}

/* Body lines up under the headline (24px padding + 64px year + 20px gap). */
.yss-bb-accordion__body {
	padding: 0 24px 20px 108px;
	color: var(--yss-gray);
	line-height: 1.7;
}

.yss-bb-accordion__body > :first-child {
	margin-top: 0;
}

.yss-bb-accordion__body > :last-child {
	margin-bottom: 0;
}

/* A year with several missions: title per mission, divider between them.
   The header lists every title, clamped to one line. */
.yss-bb-accordion__title {
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.yss-bb-accordion__count {
	flex: 0 0 auto;
	padding: 3px 10px;
	border: 1px solid var(--yss-red);
	border-radius: 999px;
	color: var(--yss-red);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.yss-bb-accordion__mission > :first-child {
	margin-top: 0;
}

.yss-bb-accordion__mission > :last-child {
	margin-bottom: 0;
}

.yss-bb-accordion__mission + .yss-bb-accordion__mission {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--yss-border);
}

.yss-bb-accordion__mission-title {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--yss-ink);
}

@media (max-width: 767px) {
	.yss-bb-accordion__title {
		-webkit-line-clamp: 2;
	}

	.yss-bb-accordion__count {
		display: none;
	}
}

/* Optional photos under a year's text; each opens full size in Elementor's
   lightbox (arrows + close). */
.yss-bb-accordion__photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
	margin-top: 16px;
}

.yss-bb-accordion__photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	background-color: var(--yss-cream);
	cursor: zoom-in;
}

.yss-bb-accordion__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.yss-bb-accordion__photo:hover img,
.yss-bb-accordion__photo:focus-visible img {
	transform: scale(1.05);
}

.yss-bb-accordion__photo:focus-visible {
	outline: 2px solid var(--yss-red);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.yss-bb-accordion__head {
		gap: 12px;
		padding: 14px 16px;
	}

	.yss-bb-accordion__year {
		flex-basis: 52px;
		font-size: 1.25rem;
	}

	.yss-bb-accordion__title {
		font-size: 1rem;
	}

	.yss-bb-accordion__latest {
		display: none;
	}

	.yss-bb-accordion__body {
		padding: 0 16px 16px;
	}
}

/* ==========================================================================
   51. UN SDG ICON ROW (.yss-sdg-icons) — Our Story's 6 Pillars
   Official UN SDG goal icons (assets/img/sdg/sdg-01..17.png, 200px, from
   the UN "E SDG Icons WEB" set) in place of the "Supports UN SDG 1 · 5 …"
   text line under each pillar. Plain list of <img>s inside the pillar's
   Text Editor widget, so it stays editable there.
   ========================================================================== */
.yss-sdg-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.yss-sdg-icons li {
	margin: 0;
	padding: 0;
}

.yss-sdg-icons img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 4px;
}

@media (max-width: 767px) {
	.yss-sdg-icons img {
		width: 48px;
		height: 48px;
	}
}

/* ==========================================================================
   52. SINGLE TESTIMONIAL — country flag + justified write-up
   single-testimonial.php: a small flag (assets/img/flags/{iso2}.svg,
   flag-icons, MIT) before the Country value, and the full write-up
   justified (its "Pengalaman & Perjalanan" heading was removed).
   ========================================================================== */
.yss-info-item__value--flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.yss-flag {
	flex: 0 0 auto;
	width: 24px;
	height: 18px;
	border-radius: 3px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(16, 16, 16, 0.12);
}

/* Same content box as the quote/info and CTA sections (no narrower 820px
   column), and no padding of its own: the sections above and below already
   bring 96px each, so every gap on the page stays one section-padding. */
.yss-section.yss-testimonial-body-section {
	padding-top: 0;
	padding-bottom: 0;
}

.yss-testimonial-body--justify p {
	text-align: justify;
	text-justify: inter-word;
}

/* ==========================================================================
   53. I.M.M.E.R.S.E WORDMARK ON THE RED "OUR JOURNEY" BACKGROUND
   Our Story's YSS Value section (de65c9f) now uses the Our Journey section's
   red-waves background (.yss-journey-section). Here the wordmark drops its
   dark #1e2530 panel and switches its greys to translucent white. Scoped
   to .yss-journey-section, so the dark version (section 37) still applies
   anywhere else it is used.
   ========================================================================== */
.yss-journey-section .yss-immerse {
	background-color: transparent;
	border-radius: 0;
	/* The arc + gold dot sit partly above the block. On the dark panel the
	   panel edge clipped them; with no panel that flat cut looks broken, so
	   let them show whole and leave room above for them. */
	overflow: visible;
	margin-top: 6cqi;
}

.yss-journey-section .yss-immerse__stage {
	border-top-color: rgba(255, 255, 255, 0.35);
	border-bottom-color: rgba(255, 255, 255, 0.35);
}

/* Was 0.14, which sank into the red background (client feedback, Oct
   2026); 0.55 reads clearly while staying lighter than the value names. */
.yss-journey-section .yss-immerse__word {
	color: rgba(255, 255, 255, 0.55);
}

.yss-journey-section .yss-immerse__divider {
	background-color: rgba(255, 255, 255, 0.3);
}

.yss-journey-section .yss-immerse__value {
	color: var(--yss-white);
}

@media (max-width: 767px) {
	.yss-journey-section .yss-immerse__value {
		border-top-color: rgba(255, 255, 255, 0.3);
	}

	.yss-journey-section .yss-immerse__name {
		color: var(--yss-white);
	}
}

/* ==========================================================================
   54. OUR JOURNEY CARDS — full width when stacked (phones)
   The base .yss-timeline stacks with align-items: flex-start at ≤768px,
   so each glass card shrank to its own text width (a short "Hosted IVCO
   2023" became a narrow card next to full-width long ones). Stretch
   them so every card is the column's full width.
   ========================================================================== */
@media (max-width: 768px) {
	.yss-timeline--journey {
		align-items: stretch;
	}
}

/* ==========================================================================
   55. TEAM BY DEPARTMENT — Meet YSS All Stars ([yss_team_by_department])
   One block per department (team_type): heading, then round photos with
   name + Role / Title underneath, 4 across on desktop, 3 on tablet,
   2 on phones.
   ========================================================================== */
.yss-team-depts {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.yss-team-dept__title {
	margin: 0 0 28px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--yss-border);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-team-dept__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yss-team-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
}

.yss-team-member__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	max-width: 100%;
	aspect-ratio: 1;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 50%;
	background: linear-gradient(135deg, #d6b57a 0%, #eeeeee 55%, #b9bcc2 100%);
	box-shadow: 0 8px 20px rgba(16, 16, 16, 0.12);
}

.yss-team-member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yss-team-member__initials {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--yss-white);
}

.yss-team-member__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--yss-ink);
}

.yss-team-member__role {
	margin-top: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--yss-red);
}

@media (max-width: 1024px) {
	.yss-team-dept__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.yss-team-depts {
		gap: 40px;
	}

	.yss-team-dept__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}

	.yss-team-member__photo {
		width: 120px;
	}
}

/* 55b. Elementor-built version (page 437 since Oct 2026): each department is
   a container, members are containers with Image + Heading + Heading +
   Icon List widgets carrying the classes above. These rules let the
   Elementor markup inherit the same look and add phone / email lines. */
.e-con.yss-team-member > .elementor-widget.yss-team-member__photo {
	width: 160px;
	margin-bottom: 14px;
}

.e-con.yss-team-dept > .elementor-widget.yss-team-dept__title {
	margin-bottom: 28px;
}

.yss-team-dept__title .elementor-heading-title,
.yss-team-member__name .elementor-heading-title,
.yss-team-member__role .elementor-heading-title {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

.e-con.yss-team-member > .elementor-widget {
	width: 100%;
}

.yss-team-member__contact {
	margin-top: 10px;
}

.yss-team-member__contact .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.yss-team-member__contact .elementor-icon-list-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	max-width: 100%;
}

.yss-team-member__contact .elementor-icon-list-icon svg {
	width: 11px;
	height: 11px;
	fill: var(--yss-red);
}

.yss-team-member__contact .elementor-icon-list-text {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--yss-gray);
	overflow-wrap: anywhere;
	text-align: left;
}

.yss-team-member__contact a:hover .elementor-icon-list-text,
.yss-team-member__contact a:focus-visible .elementor-icon-list-text {
	color: var(--yss-red);
}

@media (max-width: 767px) {
	.e-con.yss-team-member > .elementor-widget.yss-team-member__photo {
		width: 120px;
	}

	.yss-team-member__contact .elementor-icon-list-item > a {
		gap: 4px;
	}

	.yss-team-member__contact .elementor-icon-list-text {
		font-size: 0.6875rem;
	}
}

/* ==========================================================================
   56. PROGRAMS PAGE — RED CATEGORY SEGMENTS (.yss-program-cat--red)
   /programs/ alternates red – white – red – white – red, like the red bands
   on Our Story. Wave-brush edges use Elementor's own shape
   (assets/img/wave-brush-white.svg, the plugin's wave-brush.svg with a
   white fill) at the same heights as Our Journey: 31px top, 52px bottom
   (flipped). Text goes white, and the "See All" pill turns white-on-red
   so it still stands out. The white programme cards stay as they are.
   ========================================================================== */
.yss-program-cat--red::before,
.yss-program-cat--red::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	background: url('../img/wave-brush-white.svg') center / 100% 100% no-repeat;
	pointer-events: none;
}

.yss-program-cat--red::before {
	top: -1px;
	height: 31px;
}

.yss-program-cat--red::after {
	bottom: -1px;
	height: 52px;
	transform: rotate(180deg);
}

.yss-program-cat--red .yss-program-cat__label {
	color: rgba(255, 255, 255, 0.85);
}

.yss-program-cat--red .yss-program-cat__title {
	color: var(--yss-white);
}

.yss-program-cat--red .yss-program-cat__desc {
	color: rgba(255, 255, 255, 0.88);
}

.yss-program-cat--red .yss-program-cat__all.yss-btn--filled-red {
	background-color: var(--yss-white);
	border-color: var(--yss-white);
	color: var(--yss-red);
}

.yss-program-cat--red .yss-program-cat__all.yss-btn--filled-red:hover,
.yss-program-cat--red .yss-program-cat__all.yss-btn--filled-red:focus-visible {
	background-color: var(--yss-cream);
	border-color: var(--yss-cream);
	color: var(--yss-red-dark);
}

.yss-program-cat--red .yss-program-cat__nav button {
	border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) {
	.yss-program-cat--red {
		padding: 72px calc(50vw - 50% + 24px);
	}
}

@media (max-width: 767px) {
	/* Phones: iOS ignores background-attachment: fixed anyway. */
	.yss-program-cat--red {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		/* The container already has a 15px phone gutter, so 50vw - 50% alone
		   lands the text at 15px, the same as the white segments. */
		padding: 64px calc(50vw - 50%);
		background-attachment: scroll;
	}

	.yss-program-cat--red::before {
		height: 20px;
	}

	.yss-program-cat--red::after {
		height: 32px;
	}
}

/* ==========================================================================
   57. MEDIA HUB — /media/ "Our Coverage" (inc/media-hub.php)
   Magazine layout from native posts: hero mosaic of the 5 latest stories,
   "Latest Stories" with type tabs + sidebar (Follow Us, Editor's Picks),
   and the Gallery album grid. Badges use brand red, never pink.
   ========================================================================== */
.yss-mhub__hidden { display: none; }

.yss-mhub__badge {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: var(--yss-radius-pill);
	background: var(--yss-red);
	color: var(--yss-white);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--yss-tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1.4;
}

.yss-mhub__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 0.8125rem;
	color: var(--yss-gray);
}

.yss-mhub__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.yss-mhub__meta-item svg { width: 13px; height: 13px; }

.yss-mhub__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--yss-gradient-glow);
	color: rgba(255, 255, 255, 0.7);
}

/* --- Hero mosaic --------------------------------------------------------- */
.yss-mhub__mosaic {
	display: grid;
	grid-template-columns: 1fr 1.35fr 1fr;
	grid-template-rows: repeat(2, minmax(210px, 1fr));
	grid-template-areas:
		"t2 t1 t4"
		"t3 t1 t5";
	gap: 4px;
	border-radius: var(--yss-radius-md);
	overflow: hidden;
	margin-bottom: var(--yss-space-7);
}

.yss-mhub__mosaic--1 { grid-template-columns: 1fr; grid-template-areas: "t1" "t1"; }
.yss-mhub__mosaic--2 { grid-template-columns: 1.35fr 1fr; grid-template-areas: "t1 t2" "t1 t2"; }
.yss-mhub__mosaic--3 { grid-template-columns: 1.35fr 1fr; grid-template-areas: "t1 t2" "t1 t3"; }
.yss-mhub__mosaic--4 { grid-template-columns: 1fr 1.35fr 1fr; grid-template-areas: "t2 t1 t4" "t3 t1 t4"; }

.yss-mhub__tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 210px;
	overflow: hidden;
	color: var(--yss-white);
	text-decoration: none;
	background: var(--yss-ink);
}

.yss-mhub__tile--1 { grid-area: t1; }
.yss-mhub__tile--2 { grid-area: t2; }
.yss-mhub__tile--3 { grid-area: t3; }
.yss-mhub__tile--4 { grid-area: t4; }
.yss-mhub__tile--5 { grid-area: t5; }

.yss-mhub__tile img,
.yss-mhub__tile .yss-mhub__noimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.yss-mhub__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 16, 16, 0.05) 20%, rgba(16, 16, 16, 0.85) 100%);
	transition: background 0.3s ease;
}

.yss-mhub__tile:hover img { transform: scale(1.05); }
.yss-mhub__tile:hover::after { background: linear-gradient(180deg, rgba(206, 32, 39, 0.15) 10%, rgba(16, 16, 16, 0.9) 100%); }

.yss-mhub__tile-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.yss-mhub__tile-title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: var(--yss-lh-heading);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yss-mhub__tile--1 .yss-mhub__tile-body { padding: 32px; }
.yss-mhub__tile--1 .yss-mhub__tile-title { font-size: clamp(1.375rem, 1.4vw + 0.8rem, 1.875rem); }
.yss-mhub__tile .yss-mhub__meta { color: rgba(255, 255, 255, 0.85); }

/* --- Stories + sidebar --------------------------------------------------- */
.yss-mhub__body {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--yss-space-6);
	align-items: start;
}

.yss-mhub__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-bottom: 12px;
	margin-bottom: var(--yss-space-4);
	border-bottom: 1px solid var(--yss-border);
}

.yss-mhub__title {
	position: relative;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--yss-ink);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.yss-mhub__head .yss-mhub__title::after,
.yss-mhub__box .yss-mhub__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -13px;
	width: 48px;
	height: 3px;
	background: var(--yss-red);
}

.yss-mhub__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.yss-mhub__tab {
	padding: 6px 12px;
	border: 0;
	border-radius: var(--yss-radius-pill);
	background: transparent;
	color: var(--yss-gray);
	font: 600 0.75rem/1.4 var(--yss-font);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.yss-mhub__tab:hover,
.yss-mhub__tab:focus { color: var(--yss-red); background: transparent; } /* beat Hello's pink button:focus */
.yss-mhub__tab[aria-selected="true"] { background: var(--yss-red); color: var(--yss-white); }
.yss-mhub__tab:focus-visible { outline: 2px solid var(--yss-red); outline-offset: 2px; }

.yss-mhub__panel-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--yss-space-5);
}

.yss-mhub__lead-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--yss-radius-card);
	overflow: hidden;
	margin-bottom: var(--yss-space-3);
}

.yss-mhub__lead-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.yss-mhub__lead-media:hover img { transform: scale(1.04); }

.yss-mhub__lead-media .yss-mhub__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
}

.yss-mhub__lead-title {
	margin: 0 0 8px;
	font-size: 1.3125rem;
	line-height: var(--yss-lh-heading);
}

.yss-mhub__lead-title a,
.yss-mhub__row-title a {
	color: var(--yss-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yss-mhub__lead-title a:hover,
.yss-mhub__row-title a:hover { color: var(--yss-red); }

.yss-mhub__excerpt {
	margin: 12px 0 18px;
	color: var(--yss-gray);
	font-size: 0.9375rem;
	line-height: var(--yss-lh-body);
}

.yss-mhub__lead .yss-mhub__meta + .yss-mhub__more { margin-top: 18px; }

.yss-mhub__more {
	padding: 8px 18px;
	font-size: 0.8125rem;
}

.yss-mhub__list,
.yss-mhub__picks,
.yss-mhub__socials {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yss-mhub__row {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--yss-border);
}

.yss-mhub__row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.yss-mhub__row-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--yss-radius-sm);
	overflow: hidden;
}

.yss-mhub__row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yss-mhub__row-title {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yss-mhub__all {
	margin: var(--yss-space-4) 0 0;
	text-align: right;
}


.yss-mhub__empty {
	padding: var(--yss-space-6) var(--yss-space-4);
	border: 1px dashed var(--yss-border);
	border-radius: var(--yss-radius-card);
	color: var(--yss-gray);
	text-align: center;
}

/* Sidebar */
.yss-mhub__aside { display: grid; gap: var(--yss-space-5); }

.yss-mhub__box {
	padding: 24px;
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-card);
	background: var(--yss-white);
}

.yss-mhub__box .yss-mhub__title {
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--yss-border);
}

.yss-mhub__box .yss-mhub__title::after { bottom: -1px; }

.yss-mhub__socials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.yss-mhub__social {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--yss-radius-sm);
	background: var(--yss-ink);
	color: var(--yss-white);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.yss-mhub__social:hover { background: var(--yss-red); color: var(--yss-white); }
.yss-mhub__social-icon { display: inline-flex; }
.yss-mhub__social-icon svg { width: 16px; height: 16px; }

.yss-mhub__pick {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--yss-border);
}

.yss-mhub__pick:first-child { padding-top: 0; }
.yss-mhub__pick:last-child { border-bottom: 0; padding-bottom: 0; }

.yss-mhub__pick-num {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--yss-red);
	opacity: 0.35;
}

/* --- Gallery albums ------------------------------------------------------ */
.yss-mhub-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--yss-space-4);
}

.yss-mhub-gallery__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--yss-radius-card);
	overflow: hidden;
	background: var(--yss-ink);
}

.yss-mhub-gallery__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.yss-mhub-gallery__media:hover img { transform: scale(1.05); opacity: 0.85; }

.yss-mhub-gallery__count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 6px 12px;
	border-radius: var(--yss-radius-pill);
	background: rgba(16, 16, 16, 0.75);
	color: var(--yss-white);
	font-size: 0.75rem;
	font-weight: 600;
}

.yss-mhub-gallery__title {
	margin: 12px 0 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--yss-ink);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.yss-mhub__body { grid-template-columns: minmax(0, 1fr); }
	.yss-mhub__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yss-mhub-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.yss-mhub__mosaic,
	.yss-mhub__mosaic--1,
	.yss-mhub__mosaic--2,
	.yss-mhub__mosaic--3,
	.yss-mhub__mosaic--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-template-areas: none;
		grid-auto-rows: 150px;
		margin-bottom: var(--yss-space-6);
	}
	.yss-mhub__tile { grid-area: auto; min-height: 0; }
	/* Lead story spans two rows so its taller text box never spills onto the tiles below. */
	.yss-mhub__tile--1 { grid-column: 1 / -1; grid-row: span 2; }
	.yss-mhub__tile--1 .yss-mhub__tile-body { padding: 20px; }
	.yss-mhub__tile-title { font-size: 0.9375rem; }
	.yss-mhub__tile:not(.yss-mhub__tile--1) .yss-mhub__meta { display: none; }
	.yss-mhub__panel-grid { grid-template-columns: minmax(0, 1fr); }
	.yss-mhub__aside { grid-template-columns: minmax(0, 1fr); }
	/* Tabs wrap onto a second line so every type stays visible (no hidden sideways scroll). */
	.yss-mhub__tabs { width: 100%; }
	.yss-mhub__tab { padding: 6px 10px; }
	.yss-mhub__row { grid-template-columns: 96px minmax(0, 1fr); }
	.yss-mhub-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   58. SUSTAINABILITY REPORT SHELF — /media/ (yss_render_media_reports())
   Each Report shows as an e-book: A4-portrait cover with a spine shadow on
   the left and a page-edge on the right, lifting on hover. Read Online
   opens .yss-reader (modal PDF viewer); phones open the PDF in a new tab.
   ========================================================================== */
.yss-book {
	position: relative;
	display: block;
	width: 100%;
	max-width: 240px;
	perspective: 1200px;
	text-decoration: none;
}

.yss-book__cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	container-type: inline-size;
	border-radius: 3px 10px 10px 3px;
	background: var(--yss-gradient-glow);
	box-shadow:
		6px 6px 0 -1px #fff,
		6px 6px 0 0 var(--yss-border),
		0 24px 40px -18px rgba(16, 16, 16, 0.45);
	transform-origin: left center;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Spine: a darker strip + highlight line down the left edge. */
.yss-book__cover::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: 14px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.05) 70%, rgba(255, 255, 255, 0.25) 85%, rgba(0, 0, 0, 0.08));
}

.yss-book__cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a.yss-book:hover .yss-book__cover,
a.yss-book:focus-visible .yss-book__cover {
	transform: rotateY(-14deg) translateY(-4px);
	box-shadow:
		8px 6px 0 -1px #fff,
		8px 6px 0 0 var(--yss-border),
		14px 30px 44px -18px rgba(16, 16, 16, 0.5);
}

a.yss-book:focus-visible { outline: none; }
a.yss-book:focus-visible .yss-book__cover { outline: 3px solid var(--yss-red); outline-offset: 4px; }

.yss-book__placeholder-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10cqw 8cqw 12cqw 13cqw;
	color: var(--yss-white);
	/* Scales with the cover so "SUSTAINABILITY" fits at every book size. */
	font-size: 7.2cqw;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.yss-book__placeholder-eyebrow {
	font-size: 0.6em;
	letter-spacing: 0.16em;
	opacity: 0.8;
}

.yss-book--placeholder .yss-book__cover { opacity: 0.9; }

/* Coming-soon state */
.yss-reports__soon {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: var(--yss-space-6);
	align-items: center;
	max-width: 760px;
	padding: var(--yss-space-5);
	border: 1px dashed var(--yss-border);
	border-radius: var(--yss-radius-md);
	background: var(--yss-white);
}

.yss-reports__soon-title {
	margin: 12px 0 8px;
	font-size: var(--yss-fs-h3);
}

.yss-reports__soon-text {
	margin: 0;
	color: var(--yss-gray);
	line-height: var(--yss-lh-body);
}

/* Shelf */
.yss-reports__shelf {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yss-space-6);
}

.yss-reports__item {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: var(--yss-space-5);
	align-items: center;
}

.yss-reports__title {
	margin: 12px 0 8px;
	font-size: 1.25rem;
	line-height: var(--yss-lh-heading);
}

.yss-reports__summary {
	margin: 0 0 20px;
	color: var(--yss-gray);
	font-size: 0.9375rem;
	line-height: var(--yss-lh-body);
}

.yss-reports__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.yss-reports__actions .yss-btn { padding: 10px 18px; font-size: 0.8125rem; }

/* Reader modal */
.yss-reader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: rgba(16, 16, 16, 0.85);
}

.yss-reader[hidden] { display: none; }

.yss-reader__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1100px;
	width: 100%;
	margin: 0 auto 12px;
	color: var(--yss-white);
}

.yss-reader__title {
	flex: 1;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yss-reader__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--yss-radius-pill);
	background: transparent;
	color: var(--yss-white);
	font: 600 0.875rem/1 var(--yss-font);
	text-decoration: none;
	cursor: pointer;
}

/* :focus too — Hello Elementor's default button:focus/hover is pink (#c36). */
.yss-reader__btn:hover,
.yss-reader__btn:focus { background: var(--yss-red); border-color: var(--yss-red); color: var(--yss-white); }
.yss-reader__btn:focus-visible { outline: 2px solid var(--yss-white); outline-offset: 2px; }
.yss-reader__close { padding: 0; font-size: 1.5rem; }

.yss-reader__frame {
	flex: 1;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	border: 0;
	border-radius: var(--yss-radius-sm);
	background: #fff;
}

@media (max-width: 1024px) {
	.yss-reports__shelf { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.yss-reports__soon,
	.yss-reports__item {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}
	.yss-reports__soon { padding: var(--yss-space-4); gap: var(--yss-space-4); }
	.yss-reports__soon .yss-book,
	.yss-reports__item .yss-book { max-width: 180px; }
	.yss-reports__actions { justify-content: center; }
}

/* ==========================================================================
   58. FEATURED ON OUR PARTNERS' WEBSITES — Collaborate page (224)
   Native Elementor section: heading + intro, then a grid of cards (logo,
   partner name, "Visit Website →" text link). 4 across on desktop,
   2 on tablet/phone. Every card shares the same frame, logo box and
   link position so the row reads as one consistent set.
   ========================================================================== */
.e-con > .elementor-widget.yss-featured-section__intro {
	max-width: 560px;
	margin: 12px auto 40px;
}

.e-con.yss-featured-card {
	height: 100%;
	text-align: center;
	background: var(--yss-white);
	border: 1px solid var(--yss-border);
	border-radius: var(--yss-radius-lg);
	box-shadow: var(--yss-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.e-con.yss-featured-card:hover {
	transform: translateY(-4px);
}

.e-con.yss-featured-card > .elementor-widget {
	width: 100%;
}

/* Logos are pre-normalised to the same 600x300 transparent canvas with
   matched visual weight, so a fixed 2:1 box keeps every card identical. */
.e-con.yss-featured-card > .elementor-widget.yss-featured-card__logo {
	width: 100%;
	max-width: 240px;
	aspect-ratio: 2 / 1;
	margin-inline: auto;
	margin-bottom: 4px;
}

.yss-featured-card__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.e-con.yss-featured-card > .elementor-widget.yss-featured-card__link {
	margin-top: auto;
}

/* Two lines reserved so a long name never makes one card taller. */
.yss-featured-card__name .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	margin: 0;
	line-height: 1.3;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-featured-card__link .elementor-button {
	padding: 4px 0;
	font-family: var(--yss-font);
	background: transparent;
	border-radius: 0;
	font-size: var(--yss-fs-small);
	font-weight: 700;
	color: var(--yss-red);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.yss-featured-card__link .elementor-button:hover,
.yss-featured-card__link .elementor-button:focus-visible {
	background: transparent;
	color: var(--yss-ink);
}

.yss-featured-card__link .elementor-button-icon svg {
	width: 12px;
	fill: currentColor;
}

@media (max-width: 767px) {
	.e-con > .elementor-widget.yss-featured-section__intro {
		margin-bottom: 28px;
	}

	.yss-featured-card__name .elementor-heading-title {
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   60. TESTIMONIAL CARDS LAYOUT — carousel layout "cards" (inc/testimonials.php
   yss_render_testimonial_tile()), used on Our Impact. Compact cards, 3 per
   view on desktop, 2 on tablet, 1 (with a peek of the next) on phones, auto-
   sliding. The large single-slide layout (homepage) is untouched.
   ========================================================================== */
.yss-testimonials-widget__row--cards {
	padding-inline: calc(var(--yss-testimonial-arrow-size, 52px) + 16px);
}

.yss-testimonials-widget__row--cards .yss-testimonials-widget__track {
	gap: 24px;
	padding-block: 8px 24px; /* room for the card shadow / hover lift */
}

.yss-testimonials-widget__row--cards .yss-testimonials-widget__slide {
	display: flex;
	flex: 0 0 calc((100% - 48px) / 3);
}

.yss-tcard {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 28px 28px 24px;
	background: var(--yss-white);
	border: 1px solid var(--yss-border);
	border-top: 4px solid var(--yss-red);
	border-radius: var(--yss-radius-lg);
	box-shadow: var(--yss-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.yss-tcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(16, 16, 16, 0.12);
}

.yss-tcard__mark {
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 0.8;
	color: var(--yss-red);
	opacity: 0.9;
}

.yss-tcard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	margin: 8px 0 24px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--yss-ink);
}

.yss-tcard__person {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--yss-border);
}

/* img.-qualified: a global img rule was squaring these off. */
.yss-tcard .yss-tcard__photo,
.yss-tcard img.yss-tcard__photo {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	box-shadow: 0 0 0 3px var(--yss-white), 0 0 0 4px var(--yss-border);
}

.yss-tcard__photo--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--yss-red);
	color: var(--yss-white);
	font-weight: 800;
	font-size: 1.25rem;
}

.yss-tcard__who {
	min-width: 0;
}

.yss-tcard__name {
	display: block;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--yss-ink);
}

.yss-tcard__role {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 2px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--yss-gray);
}

.yss-tcard__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: var(--yss-fs-small);
	font-weight: 700;
	color: var(--yss-red);
	text-decoration: none;
}

.yss-tcard__link::after {
	content: '→';
	transition: transform 0.15s ease;
}

.yss-tcard__link:hover,
.yss-tcard__link:focus-visible {
	color: var(--yss-ink);
}

.yss-tcard__link:hover::after {
	transform: translateX(3px);
}

@media (max-width: 1024px) {
	.yss-testimonials-widget__row--cards .yss-testimonials-widget__slide {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (max-width: 767px) {
	.yss-testimonials-widget__row--cards {
		padding-inline: 0;
	}

	.yss-testimonials-widget__row--cards .yss-testimonials-widget__track {
		gap: 16px;
	}

	.yss-testimonials-widget__row--cards .yss-testimonials-widget__slide {
		flex-basis: 86%;
	}

	.yss-tcard {
		padding: 24px 20px 20px;
	}
}

/* ==========================================================================
   61. LANGUAGE TOGGLE — TranslatePress "Opposite Language" menu item in the
   global header (menu item class .yss-lang-switch): shows BM on English
   pages, EN on Bahasa Melayu pages. A small outlined pill with a globe so it
   reads as a language switch, not another page link. Inherits the menu
   text colour, so it follows the transparent / scrolled header states.
   ========================================================================== */
.elementor-nav-menu--main .yss-lang-switch > a.elementor-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding: 6px 12px !important;
	border: 1px solid currentColor;
	border-radius: var(--yss-radius-pill);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	min-height: 0;
	height: auto;
	align-self: center;
}

.elementor-nav-menu--main .yss-lang-switch {
	display: flex;
	align-items: center;
}

.elementor-nav-menu--main .yss-lang-switch .trp-menu-ls-label,
.elementor-nav-menu--main .yss-lang-switch .trp-ls-language-name {
	display: inline;
	line-height: 1;
}

/* Elementor's pointer effect also uses ::before (absolute, opacity 0) —
   reset that so this pseudo-element can be the globe icon. */
.elementor-nav-menu--main .yss-lang-switch > a.elementor-item::before {
	content: '';
	display: block;
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* No active-page underline bar on the toggle. */
.elementor-nav-menu--main .yss-lang-switch > a.elementor-item::after {
	display: none !important;
}

.elementor-nav-menu--main .yss-lang-switch > a.elementor-item:hover,
.elementor-nav-menu--main .yss-lang-switch > a.elementor-item:focus-visible {
	background-color: var(--yss-red);
	border-color: var(--yss-red);
	color: var(--yss-white) !important;
}

/* ==========================================================================
   62. BAHASA MELAYU HEADER FIT — Malay menu labels are longer than English
   (Tentang Kami, Hubungi Kami, Antarabangsa…), which wrapped the menu onto
   two rows. On BM pages only (html[lang^="ms"], set by TranslatePress) the
   items get tighter side padding and the CTA button never wraps.
   ========================================================================== */
html[lang^="ms"] .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

html[lang^="ms"] .yss-global-header .elementor-button,
html[lang^="ms"] .yss-global-header .elementor-button-text {
	white-space: nowrap;
}

@media (max-width: 1360px) and (min-width: 1025px) {
	html[lang^="ms"] .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-left: 7px !important;
		padding-right: 7px !important;
		font-size: 14px !important;
	}

	html[lang^="ms"] .elementor-nav-menu--main .yss-lang-switch > a.elementor-item {
		margin-left: 4px;
		padding: 5px 9px !important;
		font-size: 12px !important;
	}

	html[lang^="ms"] .yss-global-header .elementor-button {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

@media (max-width: 1180px) and (min-width: 1025px) {
	html[lang^="ms"] .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 13px !important;
	}
}

/* Narrowest desktop band before the hamburger menu (1025–1100px) on BM
   pages: drop the globe icon and slim the CTA so the menu stays on one row. */
@media (max-width: 1100px) and (min-width: 1025px) {
	html[lang^="ms"] .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-left: 4px !important;
		padding-right: 4px !important;
		font-size: 12.5px !important;
	}

	html[lang^="ms"] .elementor-nav-menu--main .yss-lang-switch > a.elementor-item::before {
		display: none !important;
	}

	html[lang^="ms"] .yss-global-header .elementor-button {
		padding-left: 14px !important;
		padding-right: 14px !important;
		font-size: 13px !important;
	}
}

/* ==========================================================================
   63. WHY PARTNER WITH US — Partners page (224), native Elementor section
   (.yss-why-section): four numbered benefit cards in a 2×2 grid (1 column
   on phones) + "Check out our Programs" button. Card look matches the
   site's other white cards (border, radius, shadow, red top accent).
   ========================================================================== */
.yss-why-section .yss-intro-block {
	margin-bottom: 36px;
}

.e-con.yss-why-card {
	height: 100%;
	padding: 28px 28px 26px;
	background: var(--yss-white);
	border: 1px solid var(--yss-border);
	border-top: 4px solid var(--yss-red);
	border-radius: var(--yss-radius-lg);
	box-shadow: var(--yss-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.e-con.yss-why-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(16, 16, 16, 0.12);
}

.yss-why-card__num .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(206, 32, 39, 0.1);
	color: var(--yss-red);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.yss-why-card__title .elementor-heading-title {
	margin: 4px 0 0;
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--yss-ink);
}

.yss-why-card__text,
.yss-why-card__text p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--yss-gray);
}

@media (max-width: 767px) {
	.e-con.yss-why-card {
		padding: 22px 20px;
	}

	.yss-why-card__title .elementor-heading-title {
		font-size: 1.0625rem;
	}
}

/* English header fit at laptop widths: the EN/BM toggle added one more
   menu item, which wrapped the menu and the CTA label below ~1360px. */
.yss-global-header .elementor-button,
.yss-global-header .elementor-button-text {
	white-space: nowrap;
}

@media (max-width: 1360px) and (min-width: 1025px) {
	html:not([lang^="ms"]) .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 15px !important;
	}

	html:not([lang^="ms"]) .elementor-nav-menu--main .yss-lang-switch > a.elementor-item {
		margin-left: 4px;
		padding: 5px 10px !important;
		font-size: 12px !important;
	}

	html:not([lang^="ms"]) .yss-global-header .elementor-button {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

@media (max-width: 1180px) and (min-width: 1025px) {
	html:not([lang^="ms"]) .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 14px !important;
	}
}

@media (max-width: 1100px) and (min-width: 1025px) {
	html:not([lang^="ms"]) .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-left: 4px !important;
		padding-right: 4px !important;
		font-size: 13px !important;
	}

	html:not([lang^="ms"]) .elementor-nav-menu--main .yss-lang-switch > a.elementor-item::before {
		display: none !important;
	}

	html:not([lang^="ms"]) .yss-global-header .elementor-button {
		padding-left: 14px !important;
		padding-right: 14px !important;
		font-size: 13px !important;
	}
}

@media (max-width: 767px) {
	.yss-why-section .yss-intro-block {
		margin-bottom: 8px;
	}
}