/* ============================================================
   ONE VISION  —  responsive.css
   Pixel-perfect responsive overrides — mobile & tablet only.
   Desktop (> 1100px) layout is never touched here.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   GLOBAL — fix horizontal overflow from reveal animations
   .reveal-left  starts at translateX(-46px)
   .reveal-right starts at translateX(+46px)
   On viewports ≤ 1100px these bleed past the right edge,
   creating a white gap. Convert them to a vertical slide
   so the animation still plays but never causes x-overflow.
══════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
	.main-card img {
		height: 305px;
	}

	.side-card img {
		height: 305px;
	}

	.team-card__badge {
		width: 236px;
	}
}

@media (max-width: 1200px) {
	.impact__blob {
		width: 350px;
		height: 520px;
	}

	.impact__stat {
		left: 50px;
	}

	.impact__s1 {
		top: 60px;
	}

	.impact__copy .section-heading {
		font-size: 35px;
	}

	.impact__ico1 {
		left: 280px;
		top: 73px;
	}

	.impact__sep1 {
		top: 165px;
	}

	.impact__sep {
		left: 55px;
	}

	.impact__s2 {
		top: 195px;
	}

	.impact__ico2 {
		left: 280px;
		top: 202px;
	}

	.impact__sep2 {
		top: 309px;
	}

	.impact__ico3 {
		left: 280px;
		top: 353px;
	}

	.impact__s3 {
		top: 340px;
	}

	.hero__center-img img {
		width: 565px;
		margin-bottom: 35px;
	}

	.side-card img {
		height: 200px;
	}

	.main-card img {
		height: 200px;
	}

	.main-card {
		padding-bottom: 15px;
	}

	.team-card__badge {
		width: 195px;
	}

	.team-card__badge {
		margin-top: -80px;
	}

	.team-card--orange .team-card__badge {
		margin-top: -80px;
	}

	.impact {
		padding: 60px 0;
	}

	.team {
		padding: 60px 0;
	}

	.news {
		padding: 20px 0 10px max(var(--gap-side), calc((100vw - 1320px) / 2 + 15px));
	}

	.referral__blob-bg {
		padding: 50px 70px;
	}

	.referral__heading {
		font-size: 35px;
	}
}


/* ══════════════════════════════════════════════════════════
   ≤ 1100px  — large tablet / small laptop
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
	:root {
		--gap-side: 40px;
	}

	/* ── Hero ── */
	.hero__h1 {
		font-size: 42px;
	}

	/* ── Impact: stack copy above blob ── */
	.impact {
		flex-direction: column;
		gap: 48px;
		align-items: flex-start;
		padding: 64px 0;
	}

	.impact__copy {
		flex: unset;
		width: 100%;
	}

	.impact__blob {
		align-self: center;
		margin-top: 40px;
	}

	/* ── News: narrow the left copy column ── */
	.news__copy {
		width: 360px;
	}

	/* ── Footer ── */
	.footer {
		padding-top: 100px;
	}

	.footer__tagline {
		font-size: 36px;
	}

	.hero {
		min-height: 925px;
	}

	.hero__petal--ol {
		width: 265px;
		height: 350px;
	}

	.hero__petal--mr {
		width: 265px;
		height: 350px;
	}

	.hero__join {
		bottom: 60px;
	}

	.hero__bridge {
		bottom: 16px;
	}

	.team-card__photo {
		height: 400px;
	}

	.team-card {
		margin-bottom: 60px;
	}

	.team {
		padding-bottom: 0;
	}

	.main-card img {
		height: 100px;
	}

	.side-card img {
		height: 100px;
	}

	.blob-wrap-bg {
		gap: 15px;
	}

	.referral__blob-bg {
		height: auto;
	}
}


/* ══════════════════════════════════════════════════════════
   ≤ 900px  — tablet portrait
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	:root {
		--gap-side: 28px;
	}

	/* ── Navbar ── */
	.navbar {
		width: calc(100% - 48px);
	}

	/* ── Hero ── */
	.hero {
		margin: 0;
		border-radius: 0 0 80px 80px;
		min-height: 760px;
	}

	.hero__copy {
		padding-top: 110px;
		gap: 14px;
	}

	.hero__h1 {
		font-size: 36px;
	}

	.hero__lead {
		font-size: 15px;
		line-height: 24px;
	}

	.hero__mesh {
		width: 65%;
	}

	/* Blobs: scale down and reposition */
	.hero__petal--ol {
		width: 255px;
		height: 320px;
		left: 12px;
		bottom: 24px;
		border-radius: 90px 0 140px 140px;
	}

	.hero__petal--mr {
		width: 255px;
		height: 320px;
		right: 12px;
		bottom: 24px;
		border-radius: 0 90px 140px 140px;
	}

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

	.hero__join {
		left: 16px;
		bottom: 24px;
		min-width: 158px;
		font-size: 14px;
		height: 40px;
	}

	/* Hide bridge text — not enough room */
	.hero__bridge {}

	.hero__union {}

	/* ── Impact ── */
	.impact {
		padding: 56px 0;
	}

	.impact__copy .section-heading {
		font-size: 34px;
	}

	/* Give the blob a fixed width so scaling works without clipping */
	.impact__blob {
		align-self: center;
		margin-top: 40px;
	}

	/* ── Programmes: vertical accordion ── */
	.wrapper {
		flex-direction: column;
		border-radius: 14px;
		gap: 0;
	}

	.wrapper>.side-card {
		width: 100%;
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 12px 18px;
		gap: 16px;
		border-radius: 0;
		box-shadow: 0 1px 0 #e8e8e8;
	}

	.wrapper>.side-card>img {
		width: 72px;
		height: 72px;
		border-radius: 10px;
		object-fit: cover;
		flex-shrink: 0;
		filter: grayscale(70%);
	}

	.wrapper>.side-card>span {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 16px;
		margin-top: 0;
		height: auto;
		line-height: 1.3;
		flex: 1;
	}

	.wrapper>.main-card {
		width: 100%;
		flex: 0 0 auto;
		padding: 20px;
		border-radius: 0;
	}

	.wrapper>.main-card>img {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 12px;
		margin-bottom: 16px;
		filter: none;
	}

	.wrapper>.main-card .desc-bg {
		gap: 18px;
	}

	.wrapper>.main-card .title-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/* ── Team ── */
	.team {
		padding: 64px 0;
		gap: 40px;
		padding-bottom: 0;
	}

	.team-card__photo {
		height: 405px;
	}

	/* ── News: stack vertically ── */
	.news {
		flex-direction: column;
		gap: 36px;
		padding: 60px var(--gap-side);
		padding-top: 0;
	}

	.news__copy {
		width: 100%;
	}

	.news__slider {
		overflow: hidden;
	}

	.news-card {
		flex: 0 0 calc(100% - 0px);
	}

	/* ── Referral: stack vertically ── */
	.blob-wrap-bg {
		flex-direction: column;
		gap: 28px;
		align-items: stretch;
	}

	.referral__blob-wrap {
		flex: unset;
	}

	.referral__blob-bg {
		height: auto;
		padding: 40px 36px;
		border-radius: 40px;
	}

	.referral__qr {
		margin-bottom: -125px;
		align-self: center;
	}

	.referral {
		padding-top: 0;
		margin-bottom: 0;
	}

	/* ── Footer ── */
	.footer {
		padding-top: 170px;
	}

	.footer__tagline {
		font-size: 32px;
	}

	.footer__nav {
		flex-wrap: wrap;
		gap: 15px 15px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.footer__col {
		width: 23%;
		min-width: unset;
		padding-right: 0;
	}

	.footer__bottom {
		flex-wrap: wrap;
		gap: 14px;
	}

	.footer__copy {
		text-align: left;
		width: 100%;
	}

	.fooetr-right {
		justify-content: flex-start;
	}

	.team-card {
		margin-bottom: 70px;
	}

	.section-heading {
		font-size: 35px;
	}

	.referral__heading {
		font-size: 35px;
	}
}


/* ══════════════════════════════════════════════════════════
   ≤ 768px  — tablet / large phone
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	:root {
		--gap-side: 20px;
	}

	/* ── Navbar ── */
	.navbar {
		width: calc(100% - 32px);
		top: 12px;
	}

	.navbar__drawer-link {
		font-size: 17px;
	}

	.navbar__drawer {
		padding: 12px 16px 16px;
	}

	.navbar__drawer.is-open {
		gap: 8px;
	}

	/* ── Section typography ── */
	.section-heading {
		font-size: 30px;
	}

	.section-body {
		font-size: 15px;
		line-height: 24px;
	}

	/* ── Hero ── */
	.hero {
		min-height: 660px;
		border-radius: 0 0 60px 60px;
	}

	.hero__copy {
		padding-top: 95px;
		gap: 12px;
	}

	.hero__h1 {
		font-size: 28px;
		line-height: 1.2;
	}

	.hero__lead {
		font-size: 14px;
		line-height: 22px;
	}

	.hero__ctas .btn {
		font-size: 14px;
		min-width: 130px;
		height: 42px;
	}

	.hero__petal--ol {
		width: 200px;
		height: 258px;
		left: 8px;
		bottom: 18px;
		border-radius: 72px 0 112px 112px;
	}

	.hero__petal--mr {
		width: 200px;
		height: 258px;
		right: 8px;
		bottom: 18px;
		border-radius: 0 72px 112px 112px;
	}

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

	/* Centre the join button under the scene */
	.hero__join {
		left: 22%;
		transform: translateX(-50%);
		bottom: 16px;
		min-width: 158px;
		font-size: 13px;
		height: 40px;
		white-space: nowrap;
	}

	.hero__bridge {
		bottom: 0px;
	}

	.hero__bridge-title {
		font-size: 22px;
	}

	/* ── bg-frame background: stop it from overflowing ── */
	.bg-frame-img {
		background-size: 80%;
		background-position: left top;
	}

	/* ── Impact ── */
	.impact {
		padding: 52px 0;
		gap: 40px;
	}

	.impact__copy .section-heading {
		font-size: 28px;
	}

	/* Scale blob to fit without extra height */
	.impact__blob {
		transform: scale(0.88);
		transform-origin: top center;
		margin-bottom: -60px;
		/* reclaim space lost to scale */
	}

	/* ── Programmes heading row ── */
	.our-programmes-heading {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* ── Team: fix badge overflow on 2-column layout ── */
	.team {
		padding: 40px 0;
		gap: 25px;
		padding-bottom: 0;
	}

	.team-card__photo {
		height: 270px;
	}

	/* Badge must not exceed card width */
	.team-card__badge {
		width: calc(100% - 15px);
		box-sizing: border-box;
	}

	.team-card--orange .team-card__badge {
		width: calc(100% - 15px);
		margin-right: 8px;
	}

	/* ── News ── */
	.news {
		padding: 52px var(--gap-side);
		gap: 28px;
		padding-top: 0;
	}

	.news-card {
		height: 320px;
	}

	.news-card__bar {
		width: 100%;
	}

	.news-card__title {
		font-size: 16px;
	}

	/* ── Referral ── */
	.referral {
		padding-top: 0;
	}

	.referral__blob-bg {
		padding: 32px 28px;
		border-radius: 32px;
	}

	.referral__heading {
		font-size: 30px;
		margin-bottom: 12px;
	}

	.referral__body {
		font-size: 14px;
	}

	.referral__qr {
		width: 220px;
		height: 220px;
		border-radius: 55px;
	}

	.referral__qr img {
		width: 150px;
		height: 150px;
	}

	/* ── Footer ── */
	.footer {
		padding-top: 170px;
	}

	.footer__tagline {
		font-size: 28px;
	}

	.footer__col {
		width: calc(50% - 16px);
	}

	.footer__contact {
		text-align: left;
		width: auto;
	}

	.footer__bottom-l.gap-3 {
		margin: 0 !important;
		gap: 0rem !important;
	}
}


/* ══════════════════════════════════════════════════════════
   ≤ 600px  — mobile landscape / larger phone
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	:root {
		--gap-side: 16px;
	}

	/* ── Navbar ── */
	.navbar {
		width: calc(100% - 24px);
		top: 10px;
	}

	/* ── Hero ── */
	.hero {
		min-height: 640px;
		border-radius: 0 0 50px 50px;
	}

	.hero__copy {
		padding-top: 95px;
		gap: 5px;
	}

	.hero__h1 {
		font-size: 23px;
	}

	.hero__lead {
		font-size: 13px;
	}

	/* CTAs stack */
	.hero__ctas {}

	.hero__ctas .btn {
		width: 78%;
		min-width: unset;
		height: 42px;
		font-size: 14px;
	}

	.hero__petal--ol {
		width: 158px;
		height: 208px;
		left: 4px;
		bottom: 14px;
		border-radius: 58px 0 94px 94px;
	}

	.hero__petal--mr {
		width: 158px;
		height: 208px;
		right: 4px;
		bottom: 14px;
		border-radius: 0 58px 94px 94px;
	}

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

	.hero__join {}

	/* ── Section typography ── */
	.section-heading {
		font-size: 26px;
	}

	/* ── Impact ── */
	.impact {
		padding: 35px 0;
		gap: 32px;
		padding-bottom: 15px;
	}

	.impact__blob {
		transform: scale(0.80);
		transform-origin: top center;
		margin-bottom: -90px;
	}

	.impact__num {
		font-size: 38px;
	}

	.impact__lbl {
		font-size: 18px;
	}

	/* ── Programmes ── */
	.wrapper {
		border-radius: 10px;
	}

	.wrapper>.side-card {
		padding: 10px 14px;
		gap: 12px;
	}

	.wrapper>.side-card>img {
		width: 58px;
		height: 58px;
		border-radius: 8px;
	}

	.wrapper>.side-card>span {
		font-size: 14px;
	}

	.wrapper>.main-card {
		padding: 14px;
	}

	.wrapper>.main-card>img {
		height: 200px;
		border-radius: 10px;
		margin-bottom: 12px;
	}

	.wrapper>.main-card .title-row h3 {
		font-size: 20px;
	}

	.wrapper>.main-card .desc {
		font-size: 14px;
		line-height: 21px;
	}

	/* ── Team: single column ── */
	.team {
		padding: 44px 0;
		gap: 28px;
	}

	.team-card__photo {
		height: 310px;
	}

	.team-card__badge {
		width: calc(100% - 15px);
		margin-top: -70px;
	}

	.team-card--orange .team-card__badge {
		width: calc(100% - 15px);
		margin-right: 8px;
		margin-top: -70px;
	}

	/* ── News ── */
	.news {
		gap: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.news-card {
		height: 300px;
	}

	.news-card__title {
		font-size: 15px;
	}

	.news-card__date {
		font-size: 11px;
	}

	.news__copy {
		gap: 15px;
	}

	/* ── Referral ── */
	.referral {
		padding-top: 36px;
	}

	.blob-wrap-bg {
		gap: 20px;
	}

	.referral__blob-bg {
		padding: 28px 22px;
		border-radius: 28px;
	}

	.referral__heading {
		font-size: 26px;
		margin-bottom: 10px;
	}

	.referral__body {
		font-size: 13px;
	}

	.referral__ptnr-label {
		font-size: 14px;
	}

	.referral__ptnr-img {
		height: 24px;
	}

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

	.referral__qr {
		width: 200px;
		height: 200px;
		border-radius: 48px;
	}

	.referral__qr img {
		width: 138px;
		height: 138px;
	}

	/* ── Footer ── */
	.footer {
		padding-top: 50px;
	}

	.footer__tagline {
		font-size: 26px;
	}

	.footer__col {
		width: 100%;
		padding-right: 0;
	}

	.fooetr-right {
		justify-content: flex-start;
	}

	.footer__copy {
		font-size: 12px;
	}

	.footer__nav {
		gap: 20px 0;
	}

	.team-card {
		margin-bottom: 30px;
	}

	.footer__logo {
		margin-top: 115px;
	}
	.our-mission p{
		    padding-right: 0;
	}
}


/* ══════════════════════════════════════════════════════════
   ≤ 480px  — small mobile portrait
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.hero__bridge {
		display: none;
	}

	.hero__join {
		display: none;
	}

	:root {
		--gap-side: 14px;
	}

	/* ── Navbar ── */
	.navbar {
		width: calc(100% - 20px);
		padding: 0 8px;
		top: 10px;
	}

	.navbar__logo-wordmark {
		width: 76px;
	}

	.navbar__drawer {
		padding: 10px 14px 14px;
	}

	.navbar__drawer-link {
		font-size: 16px;
	}

	/* ── Hero ── */
	.hero {
		min-height: 530px;
		border-radius: 0 0 40px 40px;
	}

	.hero__copy {
		padding-top: 90px;
		gap: 5px;
	}

	.hero__h1 {
		font-size: 22px;
		line-height: 1.25;
	}

	.hero__lead {
		font-size: 13px;
		line-height: 20px;
	}

	.hero__ctas .btn {
		width: 140px;
		height: 40px;
		font-size: 13px;
	}

	/* Blobs: keep them visible but small */
	.hero__petal--ol {
		width: 110px;
		height: 150px;
		left: 10px;
		bottom: 10px;
		border-radius: 46px 0 76px 76px;
	}

	.hero__petal--mr {
		width: 110px;
		height: 150px;
		right: 10px;
		bottom: 10px;
		border-radius: 0 46px 76px 76px;
	}

	.hero__center-img img {
		width: 56%;
		margin-bottom: 0px;
	}

	/* ── Section typography ── */
	.section-heading {
		font-size: 21px;
		line-height: 1.25;
		margin-bottom: 0;
	}

	.section-body {
		font-size: 14px;
		line-height: 22px;
	}

	/* ── Impact ── */
	.impact {
		padding: 40px 0;
	}

	.impact__blob {
		transform: scale(0.74);
		transform-origin: top center;
		margin-bottom: -145px;
	}

	.impact__num {
		font-size: 34px;
	}

	.impact__lbl {
		font-size: 16px;
	}

	/* ── Programmes ── */
	.wrapper>.side-card {
		padding: 8px 12px;
		gap: 10px;
	}

	.wrapper>.side-card>img {
		width: 50px;
		height: 50px;
		border-radius: 6px;
	}

	.wrapper>.side-card>span {
		font-size: 13px;
	}

	.wrapper>.main-card {
		padding: 12px;
	}

	.wrapper>.main-card>img {
		height: 175px;
		border-radius: 8px;
	}

	.wrapper>.main-card .title-row h3 {
		font-size: 17px;
	}

	.wrapper>.main-card .desc {
		font-size: 13px;
	}

	/* ── Team: full-width single column, larger photos ── */
	.team {
		padding-bottom: 0;
	}

	.team-card__photo {
		height: 241px;
	}

	.team-card__badge {
		width: calc(100% - 15px);
		padding: 7px 10px;
		margin-top: -70px;
	}

	.team-card--orange .team-card__badge {
		width: calc(100% - 15px);
		margin-top: -70px;
	}

	.team-card__name {
		font-size: 14px;
	}

	.team-card__role {
		font-size: 11px;
	}

	/* ── News ── */
	.news {
		padding: 36px var(--gap-side);
		padding-top: 10px;
		padding-bottom: 0;
	}

	.news-card {
		height: 268px;
	}

	.news-card__foot {
		height: auto;
		padding: 8px 14px 10px;
	}

	.news-card__title {
		font-size: 14px;
	}

	/* ── Referral ── */
	.blob-wrap-bg {
		gap: 16px;
	}

	.referral__blob-bg {
		padding: 22px 18px;
		border-radius: 22px;
	}

	.referral__heading {
		font-size: 22px;
		margin-bottom: 8px;
	}

	.referral__body {
		font-size: 12px;
		line-height: 18px;
	}

	.referral__ptnr-img {
		height: 20px;
	}

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

	.referral__qr {
		width: 170px;
		height: 170px;
		border-radius: 40px;
	}

	.referral__qr img {
		width: 120px;
		height: 120px;
	}

	/* ── Footer ── */
	.footer {
		padding-top: 44px;
	}

	.footer__tagline {
		font-size: 22px;
	}

	.footer__logo-word {
		width: 120px;
	}

	.footer__col-head {
		font-size: 13px;
	}

	.footer__col a {
		font-size: 13px;
	}

	.footer__charity {
		font-size: 12px;
	}

	.social-media {
		gap: 8px;
		margin-top: 12px;
	}

	.impact__copy .section-heading {
		font-size: 21px;
	}

	.our-programmes-heading {
		margin-bottom: 15px;
	}

	.team-card {
		margin-bottom: 40px;
	}
}


/* ══════════════════════════════════════════════════════════
   Prefers-reduced-motion
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

	.hero__copy,
	.hero__scene,
	.hero__mesh {
		animation: none;
	}

	.reveal,
	.reveal-left,
	.reveal-right,
	.reveal-scale {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.btn,
	.ov-link,
	.team-card,
	.news-card,
	.news-card__img img,
	.referral__qr,
	.footer__socials a,
	.footer__col a,
	.navbar__hamburger,
	.ov-link img,
	.hero__explore img,
	.navbar__drawer,
	.navbar__drawer-chevron {
		transition: none;
		animation: none;
	}

	.wrapper>*,
	.wrapper>.side-card>img,
	.wrapper>.main-card>img,
	.wrapper>.main-card>.active-Programmes {
		transition: none;
		animation: none;
		opacity: 1;
	}
}