/**
 * 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);
}


/* ---------------------------------------------------------------------
 * 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;
}

@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;
}

/* ---------------------------------------------------------------------
 * 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;
	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 — 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;
}

.yss-footer__grid {
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	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);
}

.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);
}

.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);
}

/* 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. TESTIMONIAL CAROUSEL WIDGET (Elementor Pro native widget) —
 * /home-video-hero/ only (body.page-id-305). Restyles the native
 * "Testimonial Carousel" widget (elementor-pro/modules/carousel/widgets/
 * testimonial-carousel.php) to match the .yss-quote/.yss-testimonial-slide
 * design this page used before being converted from a hand-coded slider —
 * same tokens/values, just retargeted at the widget's own DOM classes
 * (.elementor-testimonial__*) instead of .yss-quote/.yss-testimonial-*.
 * Lives here (not the widget's own Custom CSS field) so it stays in
 * version control with the rest of the design system rather than baked
 * into page postmeta. !important on a few properties is needed to beat
 * the widget's own generated per-instance CSS (Global Color/Typography
 * "global" defaults emit a rule at the same {{WRAPPER}}-scoped
 * specificity as these rules; ties resolve in the generated CSS's favor
 * here, so plain overrides get silently ignored without !important).
 * Image mask switched to mask-yss-1.svg (the same About Us hub hand-
 * silhouette blob mask, section 26) per an explicit ask to match that
 * page's photo treatment — was masking-paintingv2.svg.
 * ------------------------------------------------------------------ */
body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	align-items: center;
	gap: var(--yss-space-5);
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__content {
	background: none;
	padding: 0;
	border: none;
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__text {
	font-family: inherit !important;
	font-style: normal !important;
	font-size: var(--yss-fs-h3) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--yss-ink) !important;
	margin-bottom: var(--yss-space-4);
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__text:before {
	content: "\201C";
	display: block;
	font-size: 4rem;
	font-weight: 800;
	color: var(--yss-red);
	line-height: 1;
	margin-bottom: var(--yss-space-2);
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__cite {
	display: block;
	text-align: center !important;
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__name {
	display: block;
	font-family: inherit !important;
	font-size: var(--yss-fs-small) !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yss-ink) !important;
	font-style: normal !important;
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__title {
	display: block;
	font-family: inherit !important;
	font-size: var(--yss-fs-small) !important;
	font-weight: 400 !important;
	color: var(--yss-gray) !important;
	font-style: normal !important;
}

/* Default Elementor footer layout is a flex ROW (image beside the cite
   text) — fine for a small round avatar, but this design's portrait is
   large (up to 320px, full column width), so a row squeezed the name/
   title column down to ~80px and wrapped every word onto its own line.
   Stacking it (photo on top, name/title centered below) matches the
   original .yss-testimonial-slide layout this widget replaced. Plain
   `display: block` (image and cite are already block-level) rather than
   flex — no flex needed just to stack two block children. */
body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__footer {
	display: block !important;
	text-align: center !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__image {
	margin-top: 0;
	margin-bottom: var(--yss-space-3);
	width: 100%;
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__image img {
	width: 100% !important;
	height: auto !important;
	max-width: 320px;
	aspect-ratio: 379 / 341;
	object-fit: cover;
	margin-inline: auto;
	display: block;
	border-radius: 0 !important;
	/* transform: translateZ(0) forces this masked image onto its own GPU
	   compositing layer. Without it, the very first swiper slide's mask
	   reliably fails to paint at all (confirmed live: blank box, correct
	   computed styles, loaded image) until the carousel's own transform
	   animates that slide at least once — a real Chromium mask+transform
	   compositing bug, not an animation-timing artifact. Slides reached
	   via a swiper transition render fine without this; only the
	   never-yet-transformed initial slide needs the nudge. */
	transform: translateZ(0);
	-webkit-mask-image: url('../img/mask-yss-1.svg');
	mask-image: url('../img/mask-yss-1.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-swiper-button {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--yss-border);
	background-color: var(--yss-white);
	color: var(--yss-ink);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-swiper-button:hover {
	background-color: var(--yss-ink);
	border-color: var(--yss-ink);
	color: var(--yss-white);
}

body.page-id-305 .elementor-widget-testimonial-carousel .elementor-swiper-button svg {
	width: 16px;
	height: 16px;
}

body.page-id-305 .elementor-widget-testimonial-carousel .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background-color: var(--yss-border);
	opacity: 1;
}

body.page-id-305 .elementor-widget-testimonial-carousel .swiper-pagination-bullet-active {
	background-color: var(--yss-red);
	transform: scale(1.2);
}

@media (max-width: 767px) {
	body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial {
		grid-template-columns: 1fr !important;
	}
	body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__footer {
		order: -1;
	}
	body.page-id-305 .elementor-widget-testimonial-carousel .elementor-testimonial__image img {
		max-width: 260px;
	}
}

/* ---------------------------------------------------------------------
 * 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 "YSS Main
 * Programmes" section. .yss-value-card (section "CARDS") is untouched and
 * reused as-is; these classes just turn the wrapping .yss-grid 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-row {
	position: relative;
}

.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-value-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). Desktop-only: at
 * narrower widths there isn't reliable side margin for a fixed panel
 * without overlapping section content, same call as the other
 * desktop-only enhancements above (shape dividers, step-row connector).
 * ------------------------------------------------------------------ */
.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;
	}
}

@media (max-width: 1100px) {
	.yss-floating-subnav {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * 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');
}

/* ---------------------------------------------------------------------
 * 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;
}

.yss-section--cream:has(.yss-page-hero) .yss-container {
	width: 100%;
}

@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;
	}
}