/* ============================================================
   ONE VISION  —  style.css
   Pixel-faithful to Figma node 21:2 (Priyaranjan's Draft)
   ============================================================ */

/* ──────────────────────────────────────
   TOKENS  (from Figma)
────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Syne:wght@400..800&display=swap');

:root {
	/* colours */
	--bg-page: #f6e9ed;
	--bg-light: #faf8f6;
	--hero-dark: #4b1f2e;
	--maroon: #9e2a38;
	--orange: #e36414;
	--text-dark: #2e2e2e;
	--text-mid: #a4a4a4;
	--footer-bg: #2e2e2e;

	/* typography */
	--f-syne: "Syne", sans-serif;
	--f-body: "Archivo", sans-serif;
	/* swap for Archive when licensed */

	/* geometry */
	--r-pill: 90.907px;
	--r-card: 25px;
	/* blob radii (Figma) */
	--blob-tl: 166.274px;
	--blob-tr: 166.274px;
	--blob-br: 100.631px;
	--blob-bl: 0px;
	/* team card pill (Figma) */
	--pill-top: 120.2px;
	--pill-bot: 72.746px;
	/* impact blob (Figma — after rotate 180) */
	--imp-tl: 125.674px;
	--imp-tr: 0px;
	--imp-br: 207.653px;
	--imp-bl: 207.653px;

	/* layout */
	--gap-side: 80px;
}


/* ──────────────────────────────────────
   RESET
────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	overflow-x: hidden;
	/* prevent horizontal bleed from reveal transforms */
}

body {
	background: var(--bg-page);
	color: var(--text-dark);
	font-family: var(--f-body);
	line-height: 1.5;
	overflow-x: hidden;
}

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

a {
	text-decoration: none;
	color: inherit;
}

p {
	letter-spacing: 0.5px;
}

/* ──────────────────────────────────────
   SHARED UTILITIES
────────────────────────────────────── */
.section-heading {
	font-family: var(--f-syne);
	font-weight: 500;
	font-size: 42px;
	line-height: 1.15;
	color: var(--text-dark);
}

.section-body {
	font-size: 16px;
	line-height: 25px;
	color: var(--text-dark);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12.345px 8.979px;
	min-width: 120px;
	border-radius: var(--r-pill);
	font-size: 16px;
	font-family: var(--f-body);
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease,
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

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

.btn:active {
	transform: translateY(-1px);
}

.btn--orange {
	background: var(--orange);
	color: var(--bg-light);
}

.btn--light {
	background: var(--bg-light);
	color: var(--text-dark);
}

.btn--orange:hover {
	background: #e36414;
	box-shadow: 0 2px 20px rgba(227, 100, 20, 0.3);
	;
	color: #ffffff;
}

.btn--light:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
	background-color: #ffffff;
}

/* Orange text link */
.ov-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--orange);
	font-size: 16px;
	transition: color 0.2s ease;
}

.ov-link:hover {
	color: #c05510;
}

.ov-link:hover img {
	transform: translateX(5px);
}

.ov-link--sm {
	font-size: 12px;
}

/* Arrow icon — Figma node 21:28 / 21:113: w=11.028 h=11.34 */
.ov-link img {
	width: 8px;
	height: 9px;
	object-fit: contain;
	flex-shrink: 0;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Orange text link */
.ov-link-cutom {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--orange);
	font-size: 16px;
	transition: color 0.2s ease;
}

.ov-link-cutom:hover {
	color: #c05510;
}

.ov-link-cutom:hover .ov-img {
	transform: translateX(5px);
}

.ov-link-cutom--sm {
	font-size: 12px;
}

/* Arrow icon — Figma node 21:28 / 21:113: w=11.028 h=11.34 */
.ov-link-cutom .ov-img {
	width: 11.028px;
	height: 11.34px;
	object-fit: contain;
	flex-shrink: 0;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	border-radius: 0;
	margin-bottom: 0;
}


/* ============================================================
   NAVBAR
   407 × 51 px, border-radius 15 px, fixed at top-center
   ============================================================ */
.navbar {
	position: fixed;
	top: 20px;
	left: 50%;
	translate: -50% 0;
	z-index: 300;
	display: flex;
	align-items: center;
	width: 430px;
	height: 55px;
	padding: 0 2px;
	background: var(--bg-light);
	border-radius: 15px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
	gap: 8px;
	transition: box-shadow .3s;
}

.navbar.scrolled {
	box-shadow: 0 4px 28px rgba(0, 0, 0, .22);
}

.navbar__logo {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1;
	justify-content: space-between;
}

/* Figma: icon 29.255 × 21.472 px */
.navbar__logo-icon {
	width: 145px;
	/* height: 22px; */
	object-fit: contain;
}

/* Figma: text 79.177 × 12.963 px */
.navbar__logo-wordmark {
	width: 93px;
	object-fit: contain;
}

.navbar__hamburger {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__hamburger:hover {
	transform: scale(1.15);
}

/* Toggle hamburger ↔ close icon */
.navbar__hamburger-close {
	display: none;
}

.navbar__hamburger.is-open .navbar__hamburger-icon {
	display: none;
}

.navbar__hamburger.is-open .navbar__hamburger-close {
	display: block;
}

.navbar__drawer {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--bg-light);
	border-radius: 15px;
	padding: 14px 18px 18px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	pointer-events: none;
}

.navbar__drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: all;
	gap: 12px;
}

/* Main nav links */
.navbar__drawer-link {
	font-family: var(--f-syne);
	font-size: 20px;
	font-weight: 500;
	color: var(--text-dark);
	text-decoration: none;
	line-height: 1.25;
	display: block;
	transition: opacity 0.2s;
}

.navbar__drawer-link:hover {
	opacity: 0.65;
}

.navbar__drawer-link--orange {
	color: var(--orange);
}

/* Programmes sub-block */
.navbar__drawer-programmes {
	margin-bottom: 2px;
}

/* Toggle button (inherits .navbar__drawer-link font/colour) */
.navbar__drawer-toggle {
	background: none;
	border: none;
	cursor: pointer;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	text-align: left;
}

/* Chevron arrow */
.navbar__drawer-chevron {
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.navbar__drawer-toggle[aria-expanded="true"] .navbar__drawer-chevron {
	transform: rotate(180deg);
}

/* Submenu — collapsed by default, expands on .is-open */
.navbar__drawer-prog-list {
	list-style: none;
	padding: 0;
	margin: 0 0 0 2px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, margin 0.3s ease;
}

.navbar__drawer-prog-list.is-open {
	max-height: 500px;
	margin: 10px 0 0px 0px;
	margin-bottom: 0;
}

.navbar__drawer-prog-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.navbar__drawer-prog-item::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: transparent;
	flex-shrink: 0;
}

.navbar__drawer-prog-item--active::before {
	background: var(--orange);
}

.navbar__drawer-prog-item a {
	font-family: var(--f-body);
	font-size: 14px;
	color: var(--text-mid);
	text-decoration: none;
	transition: color 0.2s;
}

.navbar__drawer-prog-item--active a {
	color: var(--text-dark);
}

.navbar__drawer-prog-item a:hover {
	color: var(--orange);
}


/* ============================================================
   HERO
   margin: 0 80px  |  min-height: 982px  |  rounded bottom 190px
   ============================================================ */
.hero {
	position: relative;
	background: var(--hero-dark);
	margin: 0 var(--gap-side);
	min-height: 960px;
	border-radius: 0 0 190px 190px;
	overflow: hidden;
	isolation: isolate;
	max-width: 1340px;
	margin: auto;
}

/* Decorative mesh (top-right corner) */
.hero__mesh {
	position: absolute;
	top: -4px;
	right: -8px;
	width: 58%;
	max-width: 760px;
	pointer-events: none;
	z-index: 0;
	opacity: .95;
}

/* ── Centred heading + CTA ── */
.hero__copy {
	position: relative;
	z-index: 5;
	text-align: center;
	padding-top: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.hero__h1 {
	font-family: var(--f-syne);
	font-weight: 500;
	font-size: 52px;
	line-height: 1.15;
	color: var(--bg-light);
	max-width: 800px;
}

.hero__h1-orange {
	color: var(--orange);
}

.hero__lead {
	font-size: 17px;
	line-height: 26px;
	color: var(--bg-light);
	font-weight: 300;
}

.hero__ctas {
	display: flex;
	gap: 15.294px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

/* Figma sizes for CTA buttons inside hero */
.hero__ctas .btn {
	height: 44.937px;
}

.hero__ctas .btn--orange {
	min-width: 127px;
}

.hero__ctas .btn--light {
	min-width: 165px;
}

.hero__ctas .btn {
	min-width: 160px;
}

/* ── Blob scene (bottom 589 px of hero) ── */
.hero__scene {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* 982 - 393 = 589 */
}

/*
  Blob shape: 329.64 × 431.594 px
  Original border-radius: tl=166.274 tr=166.274 br=100.631 bl=0
  After rotate(180deg) visual ≡: tl=100.631 tr=0 br=166.274 bl=166.274
*/

/* LEFT orange blob (rotate 180) */
.hero__petal--ol {
	position: absolute;
	left: 35px;
	bottom: 35px;
	width: 365px;
	height: 432px;
	border-radius: 100.631px 0 166.274px 166.274px;
	background: var(--orange);
	overflow: hidden;
	z-index: 3;
}

/* RIGHT maroon blob (scaleY -1 → visual: tl=0 tr=100.631 br=166.274 bl=166.274) */
.hero__petal--mr {
	position: absolute;
	right: 35px;
	bottom: 35px;
	width: 365px;
	height: 432px;
	border-radius: 0 100.631px 166.274px 166.274px;
	background: var(--maroon);
	overflow: hidden;
	z-index: 3;
}

/* Decorative center-LEFT maroon blob (rotate -43.39deg) */
.hero__petal--cm {
	position: absolute;
	left: 208px;
	bottom: 60px;
	width: 330px;
	height: 432px;
	border-radius: var(--blob-tl) var(--blob-tr) var(--blob-br) var(--blob-bl);
	background: var(--maroon);
	transform: rotate(-43.39deg);
	transform-origin: center center;
	z-index: 1;
}

/* Decorative center-RIGHT orange blob (rotate -136.61deg + scaleY -1) */
.hero__petal--co {
	position: absolute;
	right: 208px;
	bottom: 60px;
	width: 330px;
	height: 432px;
	border-radius: var(--blob-tl) var(--blob-tr) var(--blob-br) var(--blob-bl);
	background: var(--orange);
	transform: rotate(136.61deg) scaleY(-1);
	transform-origin: center center;
	z-index: 1;
}

/* Person photo inside blob (fills blob, stays upright) */
.hero__petal-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* Center person image (upright, overlaid on blobs) */
.hero__center-img {
	position: absolute;
	bottom: 35px;
	overflow: hidden;
	z-index: 4;
	display: flex;
	width: 100%;
	justify-content: center;
}

.hero__center-img img {
	width: 670px;
}

/* Union decorative shape */
.hero__union {
	position: absolute;
	left: 340px;
	bottom: 88px;
	width: 352px;
	pointer-events: none;
	z-index: 2;
	opacity: .55;
}

/* "Join The Community" button — bottom-left */
.hero__join {
	position: absolute;
	left: 118px;
	bottom: 94px;
	z-index: 6;
	min-width: 190px;
	height: 45px;
}

/* "Building Bridges Together" — bottom-right */
.hero__bridge {
	position: absolute;
	right: 84px;
	bottom: 75px;
	z-index: 6;
	display: flex;
	flex-direction: column-reverse;
	gap: 5px;
	align-items: flex-end;
}

.hero__bridge-title {
	    font-family: var(--f-syne);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2;
    color: white;
    max-width: 230px;
}

.hero__explore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--orange);
	font-size: 16px;
	transition: opacity .25s;
}

.hero__explore:hover {
	opacity: 1;
	color: #ffd0a5;
}

.hero__explore:hover img {
	transform: translateX(5px);
}

.hero__explore img {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Explore More arrow — same Figma size as Read More arrow */
.hero__explore img {
	width: 11.028px;
	height: 11.34px;
	object-fit: contain;
	flex-shrink: 0;
}


/* ============================================================
   IMPACT NUMBERS
   Figma node 21:79  —  gap: 248px between copy (407px) and blob (407×569)
   ============================================================ */
.impact {
	display: flex;
	align-items: center;
	/* gap: 248px; */
	padding: 80px 0;

}


.impact__copy .section-heading {
	font-size: 42px;
	line-height: 1.2;
}

.impact__copy .section-body {
	line-height: 25px;
}

.impact__copy .btn {
	padding: 11px 25px;
}

.bg-frame-img {
	background-image: url(../assets/images/bg-frame-2.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

/* ── Right orange blob ──
   Figma node 21:87: w=407 h=569
   Shape: tl=207.653 tr=207.653 br=125.674 bl=0
   + rotate(180deg) applied to container  →
   Visual equivalent (no CSS rotation needed, images stay upright):
     tl = original-br = 125.674px
     tr = original-bl = 0
     br = original-tl = 207.653px
     bl = original-tr = 207.653px
*/
.impact__blob {
	position: relative;
	/* all children use absolute coords */
	flex-shrink: 0;
	width: 407px;
	height: 569px;
	background: var(--orange);
	border-radius: 125.674px 0 207.653px 207.653px;
	color: white;
	overflow: hidden;
}

/* ── Stat blocks (absolute, exact Figma ml/mt) ──
   Each stat: left=80px, width=218px
   mt: stat1=97  stat2=228  stat3=359
*/
.impact__stat {
	position: absolute;
	left: 80px;
	width: 218px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.impact__s1 {
	top: 97px;
}

.impact__s2 {
	top: 228px;
}

.impact__s3 {
	top: 359px;
}

.impact__num {
	font-size: 48px;
	font-weight: 400;
	line-height: 1.05;
	font-family: var(--f-body);
}

.impact__lbl {
	font-size: 20px;
	line-height: 24px;
	font-family: var(--f-body);
	font-weight: 300;
}

/* ── Horizontal dividers (CSS, not image)
   Figma: left=80px, width=247px, h≈0 (border-top line)
   mt: sep1=203  sep2=334
*/
.impact__sep {
	position: absolute;
	left: 80px;
	width: 247px;
	height: 1px;
	background: rgba(255, 255, 255, 0.38);
}

.impact__sep1 {
	top: 203px;
}

.impact__sep2 {
	top: 334px;
}

/* ── Decorative icons (absolute, exact Figma ml/mt/size)
   ico1 (fork):  left=301 top=108 w=22.386 h=29.4
   ico2 (star):  left=298 top=239 w=29.256 h=29.45
   ico3 (leaf):  left=299 top=372 w=28.579 h=25.065
*/
.impact__ico {
	position: absolute;
	object-fit: contain;
}

.impact__ico1 {
	left: 301px;
	top: 108px;
	width: 22.386px;
	height: 29.4px;
}

.impact__ico2 {
	left: 298px;
	top: 239px;
	width: 29.256px;
	height: 29.45px;
}

.impact__ico3 {
	left: 299px;
	top: 372px;
	width: 28.579px;
	height: 25.065px;
}


/* ============================================================
   TEAM — 4 cards in a row
   ============================================================ */
.team {
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

.team__intro {
	max-width: 1061.188px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.team__grid {
	display: flex;
	gap: 36px;
	align-items: flex-end;
	justify-content: center;
}

/* Individual card */
.team-card {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*
  Pill blob: Figma  w=238.297 h=312
  border-radius: tl=120.2 tr=120.2 br=72.746 bl=0
  orange card → container has the pill upright (normal orientation)
  maroon card → same shape
*/
.team-card__pill {
	width: 100%;
}

.team-card--orange .team-card__pill {
	background: var(--orange);
	border-radius: 170px;
	padding-top: 30px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 100px;
	overflow: hidden;
}

.team-card--maroon .team-card__pill {
	background: var(--maroon);
	border-radius: 170px;
	padding-top: 30px;
	border-bottom-right-radius: 100px;
	border-bottom-left-radius: 0;
	overflow: hidden;
}

.team-card--orange .team-card__badge {
	border-radius: 20px 15px 0px 64px;
	text-align: center;
	margin-top: -63px;
	margin-right: 7.64px;
	align-self: flex-end;
}

/* Photo clipped to pill shape */
.team-card__photo {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 335px;
	/* slightly taller to overflow nicely */
	object-fit: cover;
	object-position: top center;
	border-radius: var(--pill-top) var(--pill-top) 0 0;
}

/* Name badge — white rounded chip, bottom-left of photo */
.team-card__badge {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, .95);
	border-radius: 20px 15px 69px 0;
	width: 260px;
	padding: 8px;
	text-align: center;
	margin-top: -63px;
	margin-left: 7.64px;
	align-self: flex-start;
}

.team-card__name {
	font-family: var(--f-syne);
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 2px;
	color: var(--maroon);
	line-height: 1.3;
}

.team-card__role {
	font-size: 12px;
	color: var(--text-dark);
	margin-top: 0;
	line-height: 1.3;
	margin-bottom: 0px;
}


/* ============================================================
   NEWS — left copy + right slider
   ============================================================ */
.news {
	display: flex;
	gap: 60px;
	align-items: flex-start;
	padding: 40px 0 30px max(var(--gap-side), calc((100vw - 1320px) / 2 + 15px));
	overflow: hidden;
}

.news__copy {
	flex-shrink: 0;
	width: 480px;

	display: flex;
	flex-direction: column;
	gap: 25px;
}

/* Full-bleed right column – fills remaining viewport width */
.news__slider {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.news__arrows {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

/*
  News arrows — Figma nodes 21:201 & 21:204
  These are pure icon images (Group1597883343 / Group1597883344)
  Size: w=36.91px h=28.191px  |  no border, no background
*/
.news__btn {
	width: 36.91px;
	height: 28.191px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.news__btn img {
	width: 36.91px;
	height: 28.191px;
	object-fit: contain;
	display: block;
}

/* Dim the prev arrow when at start */
.news__btn--disabled {
	opacity: .35;
	pointer-events: none;
}

/* Slider */
.news__viewport {
	width: 100%;
	overflow: hidden;
}

.news__track {
	display: flex;
	gap: 20px;
	transition: transform .4s ease;
	will-change: transform;
}

/* Individual news card */
.news-card {
	flex: 0 0 calc(70% - 10px);
	height: 365px;
	background: white;
	border-radius: var(--r-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.news-card__img {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.news-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .2);
}

/* Footer strip */
.news-card__foot {
	flex-shrink: 0;
	height: 81px;
	background: var(--bg-light);
	padding: 10px 20px 8px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.news-card__bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 344px;
	background: var(--orange);
}

.news-card__title {
	font-family: var(--f-syne);
	font-weight: 500;
	font-size: 18px;
	color: var(--maroon);
	line-height: 1.2;
	margin-bottom: 5px;
}

.news-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 2px;
}

.news-card__date {
	font-size: 12px;
	color: var(--text-mid);
}

/* ── Video card: play button overlay ── */
.news-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 3;
	transition: background 0.25s ease;
}

.news-card__play:hover {
	background: rgba(0, 0, 0, 0.18);
}

.news-card__play:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: -3px;
}

.news-card__play-icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.93);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.32);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.22s ease;
}

.news-card__play:hover .news-card__play-icon {
	transform: scale(1.12);
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.42);
}

.news-card__play-icon svg {
	width: 22px;
	height: 22px;
	margin-left: 3px;
	/* optical centre for triangle */
	fill: var(--maroon);
}

/* "Watch" tag in card footer */
.news-card__video-tag {
	font-family: var(--f-syne);
	font-size: 11px;
	font-weight: 500;
	color: var(--orange);
	letter-spacing: 0.04em;
}

/* "VIDEO" badge – top-left corner of thumbnail */
.news-card__video-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-family: var(--f-syne);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 20px;
	backdrop-filter: blur(4px);
	pointer-events: none;
}

/* ── Video Modal ── */
.video-modal {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.video-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.84);
	backdrop-filter: blur(5px);
}

.video-modal__box {
	position: relative;
	width: 90%;
	max-width: 920px;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	z-index: 1;
	transform: scale(0.93);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-modal.is-open .video-modal__box {
	transform: scale(1);
}

.video-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	cursor: pointer;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	backdrop-filter: blur(4px);
}

.video-modal__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.video-modal__close:focus-visible {
	outline: 2px solid var(--orange);
}

.video-modal__player {
	width: 100%;
	display: block;
	max-height: 80vh;
}


/* ============================================================
   REFERRAL FORM
   Figma node 21:306 — centred flex row, gap=32px
   ============================================================ */
.blob-wrap-bg {
	display: flex;
	align-items: center;
	gap: 40px;
}

.referral {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding-top: 60px;
	margin-bottom: -70px;
}

/* ── Left: orange landscape blob with text ──────────────────
   Figma node 21:307-21:309:
   Inner shape is a portrait pill (w=294 h=735) with rotate(90deg CW),
   which visually becomes a landscape blob (w=735 h=294).

   Portrait border-radius before rotation:
     tl=148.709  tr=148.709  br=90  bl=0

   After rotate(90deg CW), corners map as:
     original-top  → visual-right   (tr → visual-TR, tl → visual-BR)
     original-right → visual-bottom
     original-bottom → visual-left  (bl → visual-BL, br → visual-TL)
     original-left  → visual-top

   Visual CSS border-radius (landscape, no rotation applied):
     tl = original-br = 90px
     tr = original-tr = 148.709px
     br = original-tl = 148.709px
     bl = original-bl = 0
   → border-radius: 90px 148.709px 148.709px 0
*/
.referral__blob-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
}

.referral__blob-bg {
	inset: 0;
	background: var(--orange);
	display: flex;
	height: 265px;
	align-items: center;
	padding: 50px 95px;
	border-radius: 150px;
	border-top-right-radius: 75px;
	border-bottom-right-radius: 0;
	padding-right: 20px;
}

/* Text overlay — Figma: ml=76px mt=62.81px w=584px gap=26px */
.referral__text {}

/* Heading — Figma: 42px Syne Medium, color #faf8f6 */
.referral__heading {
	font-family: var(--f-syne);
	font-weight: 500;
	font-size: 42px;
	line-height: 1.15;
	color: var(--bg-light);
	margin-bottom: 15px;
}

/* Body — Figma: 16px Archive, leading-[20px] */
.referral__body {
	font-size: 16px;
	line-height: 20px;
	color: #FAF8F6;
	margin-bottom: 10px;
}

/* Partners block — Figma: gap-[10px], w-[238px] */
.referral__partners {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.referral__ptnr-label {
	font-size: 16px;
	line-height: 20px;
	color: #FAF8F6;
}

/* Partner logo row — Figma: gap-[15px] items-center */
.referral__ptnr-row {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* Figma: Macmillan h=24px, HPFT h=31px */
.referral__ptnr-img {
	height: 30px;
	width: auto;
	object-fit: contain;
}

.referral__ptnr-img--tall {
	height: 45px;
}

/* Vertical divider between logos — Figma: w=0 (1px line) h=17px */
.referral__ptnr-sep {
	width: 2px;
	height: 26px;
	background: rgba(255, 255, 255, 0.55);
	flex-shrink: 0;
}

/* ── Right: QR code rounded square ─────────────────────────
   Figma node 21:319-21:321:
   Container: size=294×294, border-radius=90px, bg=#faf8f6
   Image:     size=178×178, positioned at ml=58 mt=58
              (58+178+58 = 294 → perfectly centred)
*/
.referral__qr {
	flex-shrink: 0;
	width: 265px;
	height: 265px;
	background: var(--bg-light);
	border-radius: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

/* Figma: size-[178px] */
.referral__qr img {
	width: 178px;
	height: 178px;
	object-fit: contain;
	display: block;
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
	background: var(--footer-bg);
	color: white;
	padding-top: 160px;
	padding-bottom: 20px;
}

/* Main row: brand | nav | contact */
.footer__main {
	display: flex;
	gap: 60px;
	align-items: flex-start;
	margin-bottom: 56px;
}

/* Brand */
.footer__brand {
	flex-shrink: 0;
	width: 426px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Figma: icon 55.375 × 40.643 */
.footer__logo-icon {
    width: 200px;
    margin-bottom: 5px;
    object-fit: contain;
}

/* Figma: text 149.87 × 24.537 */
.footer__logo-word {
	width: 150px;
	height: 25px;
	object-fit: contain;
}

.footer__tagline {
	font-family: var(--f-syne);
	font-weight: 500;
	font-size: 42px;
	line-height: 1.15;
	color: white;
}

/* Nav columns */
.footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}

.footer__col {
	width: 32%;
	padding-right: 15px;
}

.footer__col-head {
	font-size: 14px;
	font-weight: 400;
	color: var(--orange);
	letter-spacing: 1.12px;
	text-transform: uppercase;
	line-height: 20px;
	margin-bottom: 15px;
}

.footer__col a {
	font-size: 14px;
	font-weight: 300;
	margin-bottom: 3px;
	color: white;
	line-height: 20px;
	transition: color 0.2s ease, padding-left 0.2s cubic-bezier(0.22, 1, 0.36, 1);
	width: 100%;
	display: inline-block;
	letter-spacing: 0.6px;
}

.footer__col a:hover {
	color: var(--orange);
	padding-left: 5px;
}

/* Contact (right-aligned) */
.footer__contact {
	flex-shrink: 0;
	width: 266px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: right;
	font-style: normal;
}

.footer__contact p,
.footer__contact a {
	font-size: 14px;
	color: white;
	line-height: 1.4;
	transition: color .25s;
	font-weight: 300;
}

.footer__contact a:hover {
	color: var(--orange);
}

/* Rule */
.footer__rule {
	border: none;
	border-top: 1px solid rgb(255, 255, 255);
	margin-bottom: 24px;
}

/* Bottom bar */
.footer__bottom {
	display: flex;
	align-items: center;
	gap: 20px;
}

.footer__bottom-l {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}

/* Figma: 34 × 24.954 px */
.footer__bottom-logo {
	width: 34px;
	height: 25px;
	object-fit: contain;
}

.footer__charity {
	font-size: 14px;
	color: white;
	font-weight: 300;
}

.footer__socials {
	display: flex;
	gap: 16px;
	align-items: center;
}

.footer__socials a {
	opacity: .8;
	transition: opacity 0.2s ease,
		transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer__socials a:hover {
	opacity: 1;
	transform: translateY(-4px) scale(1.18);
}

.footer__socials img {
	object-fit: contain;
}

.footer__copy {
	font-size: 13px;
	color: rgba(255, 255, 255, .4);
	letter-spacing: .6px;
	    text-align: center;
	flex-shrink: 0;
}

.fooetr-right {
	display: flex;
	justify-content: flex-end;
}

.social-media {
	display: flex;
	gap: 10px;
	margin-top: 15px;
}

/* Responsive styles moved to css/responsive.css */


/* ══════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
══════════════════════════════════════════ */

/* ── Hero: CSS-only entrance (above-the-fold, no IntersectionObserver needed) ── */
@keyframes ov-fade-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ov-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.hero__copy {
	animation: ov-fade-up 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__scene {
	animation: ov-fade-up 0.9s 0.50s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__mesh {
	animation: ov-fade-in 1.1s 0.70s ease both;
}

/* ── Scroll-reveal: hidden states ── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
	opacity: 0;
	will-change: opacity, transform;
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal {
	transform: translateY(38px);
}

.reveal-left {
	transform: translateX(-46px);
}

.reveal-right {
	transform: translateX(46px);
}

.reveal-scale {
	transform: scale(0.91);
}

/* ── Visible state (added by IntersectionObserver) ── */
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
	opacity: 1;
	transform: none;
}

/* ── Stagger delays (applied via data-delay="N") ── */
.reveal[data-delay="1"],
.reveal-left[data-delay="1"],
.reveal-right[data-delay="1"],
.reveal-scale[data-delay="1"] {
	transition-delay: 0.08s;
}

.reveal[data-delay="2"],
.reveal-left[data-delay="2"],
.reveal-right[data-delay="2"],
.reveal-scale[data-delay="2"] {
	transition-delay: 0.16s;
}

.reveal[data-delay="3"],
.reveal-left[data-delay="3"],
.reveal-right[data-delay="3"],
.reveal-scale[data-delay="3"] {
	transition-delay: 0.24s;
}

.reveal[data-delay="4"],
.reveal-left[data-delay="4"],
.reveal-right[data-delay="4"],
.reveal-scale[data-delay="4"] {
	transition-delay: 0.32s;
}

.reveal[data-delay="5"],
.reveal-left[data-delay="5"],
.reveal-right[data-delay="5"],
.reveal-scale[data-delay="5"] {
	transition-delay: 0.40s;
}

.reveal[data-delay="6"],
.reveal-left[data-delay="6"],
.reveal-right[data-delay="6"],
.reveal-scale[data-delay="6"] {
	transition-delay: 0.48s;
}

.reveal[data-delay="7"],
.reveal-left[data-delay="7"],
.reveal-right[data-delay="7"],
.reveal-scale[data-delay="7"] {
	transition-delay: 0.56s;
}

/* ── Respect prefers-reduced-motion ── */
/* ══════════════════════════════════════════
   HOVER ANIMATIONS
══════════════════════════════════════════ */

/* ── Team cards ── */
.team-card {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.35s ease;
}

.team-card:hover {
	transform: translateY(-10px);
	filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.18));
}

/* ── News cards ── */
.news-card {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

.news-card:hover {
	/* transform : translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.13); */
}

.news-card__img img {
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-card:hover .news-card__img img {
	transform: scale(1.07);
}

/* ── Accordion collapsed cards ── */
.acc-card--collapsed:hover .acc-card__tint {
	opacity: 0.3;
	/* lighten tint slightly on hover */
}

.acc-card--collapsed:hover .acc-card__vtitle {
	color: var(--orange);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.acc-card--collapsed:hover {
	flex-basis: 112px;
	/* subtle peek-open on hover */
}

/* ── Referral QR card ── */
.referral__qr {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

.referral__qr:hover {
	transform: translateY(-7px);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
}

/* ── News slider arrows ── */
.news__btn {
	transition: opacity 0.2s ease,
		transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.news__btn:hover {
	opacity: .9;
	transform: scale(1.14);
}

.news__btn:active {
	transform: scale(.92);
}

/* Prefers-reduced-motion moved to css/responsive.css */


.wrapper {
	display: flex;
	gap: 0;
	background: #fff;
	padding: 0;
	border-radius: 5px;
	align-items: stretch;
	border-radius: 15px;
	overflow: hidden;
}

.wrapper .side-card:nth-child(1) {
	z-index: 7;
}

.wrapper .side-card:nth-child(2) {
	z-index: 6;
}

.wrapper .side-card:nth-child(3) {
	z-index: 5;
}

.wrapper .side-card:nth-child(4) {
	z-index: 4;
}

.wrapper .side-card:nth-child(5) {
	z-index: 3;
}

.wrapper .side-card:nth-child(6) {
	z-index: 2;
}

.wrapper .side-card:nth-child(7) {
	z-index: 1;
}

.side-card {
	width: 100px;
	background: #ffffff;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	box-shadow: 0px 0px 7px 2px #eeeeee;
}

.side-card .active-Programmes {
	display: none;
}

.side-card img {
	width: 65px;
	height: 395px;
	object-fit: cover;
	border-radius: 10px;
	filter: grayscale(90%);
}

.side-card span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 25px;
	color: #8b2d2d;
	height: 150px;
	line-height: 30px;
	margin-top: 10px;
}

.side-card img:hover {
	filter: unset;
	width: 70px;
}

.main-card {
	flex: 1;
	background: #fafafa;
	border-radius: 0;
	padding: 20px;
	padding-bottom: 35px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	z-index: 10;
}

.main-card img {
	width: 100%;
	border-radius: 20px;
	margin-bottom: 15px;
	height: 395px;
}

.desc-bg {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.our-programmes-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.desc {
	font-size: 16px;
	line-height: 20px;
	color: var(--text-dark);
	line-height: 23px;
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.title-row h3 {
	font-size: 25px;
	color: #8b2d2d;
	font-weight: 400;
}

.title-row a {
	font-size: 16px;
	color: #ff5a1f;
	text-decoration: none;
}

.our-mission p{
    font-size: 14px;
    padding-right: 35px;
    font-weight: 300;
    color: #ffffff;
    line-height: 22px;
}

/* ──────────────────────────────────────
   PROGRAMMES ACCORDION
────────────────────────────────────── */

/* ── Card entrance: loads one by one on page load ── */
@keyframes card-enter {
	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wrapper>* {
	opacity: 0;
	/* hidden until animation starts */
	animation: card-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--card-index, 0) * 0.1s);
}

/* Smooth transitions on all cards */
.wrapper>.side-card,
.wrapper>.main-card {
	cursor: pointer;
	transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s ease;
}

/* Image transitions */
.wrapper>.side-card>img,
.wrapper>.main-card>img {
	transition: filter 0.4s ease,
		width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		border-radius 0.4s ease,
		height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide label span when a side-card becomes main-card */
.wrapper>.main-card>span {
	display: none;
}

/* Fade-in content when card becomes main-card */
.wrapper>.main-card>.active-Programmes {
	animation: prog-fade-in 0.35s 0.25s ease both;
}

@keyframes prog-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}