/**
 * HealBridge brand layer, CharityBox build.
 *
 * The Charite build's brand.css runs to 1,300 lines, and most of it is not
 * design — it is force. Overrides for a parent sheet that loads afterwards,
 * !important on rules that should never have needed it, repairs for widget
 * markup nobody chose. None of that is here.
 *
 * GeneratePress loads about 10KB and gets out of the way, so this file only
 * has to say what the site looks like.
 *
 * Palette and type are identical to version one so the two builds differ in
 * construction, not in brand. Contrast measured on white:
 *   green      #00893F   4.52   partnership buttons
 *   green deep #046A34   6.74   links, green text
 *   forest     #0B3A2A  12.71   headings
 *   ink        #16281F  15.47   body
 *   red        #D62818   5.03   the urgent path only
 *   crimson    #8b0020          Quick Exit, reserved
 */

:root {
	--hb-green:      #00893F;
	--hb-green-deep: #046A34;
	--hb-forest:     #0B3A2A;
	--hb-ink:        #16281F;
	--hb-ink-soft:   #3D4A42;
	--hb-red:        #D62818;
	--hb-red-deep:   #B01D10;
	--hb-crimson:    #8b0020;
	--hb-crimson-deep: #6d0019;
	--hb-mint:       #E9F6EE;
	--hb-sand:       #F6F4F0;
	--hb-line:       #DDE5E0;

	--hb-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	--hb-body:    'DM Sans', system-ui, -apple-system, sans-serif;

	--hb-radius: 10px;
	--hb-shadow: 0 1px 2px rgba(11, 58, 42, .06), 0 8px 24px rgba(11, 58, 42, .07);
	--hb-ease:   cubic-bezier(.2, .7, .3, 1);
}

/* ---- Fonts. Self-hosted, so the site makes no third-party request. ---- */

@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/SpaceGrotesk-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/SpaceGrotesk-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

/* ---- Base ------------------------------------------------------------- */

body {
	font-family: var(--hb-body);
	color: var(--hb-ink-soft);
	font-size: 17px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hb-display);
	color: var(--hb-forest);
	line-height: 1.15;
	letter-spacing: -0.015em;
	/* Sentence case, as written. The Charite build title-cased every heading
	   in CSS and nobody noticed until the copy was reviewed. */
	text-transform: none;
}

h1 { font-size: clamp(30px, 5vw, 52px); }
h2 { font-size: clamp(25px, 3.4vw, 38px); }
h3 { font-size: clamp(21px, 2.4vw, 27px); }

h1, h2 { text-wrap: balance; }

p { max-width: 68ch; }

a { color: var(--hb-green-deep); }
a:hover, a:focus { color: var(--hb-forest); }

:focus-visible {
	outline: 3px solid var(--hb-green);
	outline-offset: 2px;
}

/* ---- Buttons ---------------------------------------------------------- */

.hb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .95rem 1.6rem;
	min-height: 48px;
	border: 2px solid transparent;
	border-radius: var(--hb-radius);
	font-family: var(--hb-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s var(--hb-ease), border-color .15s var(--hb-ease);
}

/* Green is partnership. */
.hb-btn--primary {
	background: var(--hb-green);
	border-color: var(--hb-green);
	color: #fff;
}

.hb-btn--primary:hover,
.hb-btn--primary:focus {
	background: var(--hb-green-deep);
	border-color: var(--hb-green-deep);
	color: #fff;
}

/* Red is the urgent path, and nothing else. */
.hb-btn--urgent {
	background: var(--hb-red);
	border-color: var(--hb-red);
	color: #fff;
}

.hb-btn--urgent:hover,
.hb-btn--urgent:focus {
	background: var(--hb-red-deep);
	border-color: var(--hb-red-deep);
	color: #fff;
}

.hb-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--hb-forest);
}

.hb-btn--ghost:hover,
.hb-btn--ghost:focus {
	background: var(--hb-forest);
	border-color: var(--hb-forest);
	color: #fff;
}

.hb-btn--on-dark {
	background: #fff;
	border-color: #fff;
	color: var(--hb-forest);
}

/* ---- Quick Exit ------------------------------------------------------- */

.hb-quick-exit {
	position: fixed;
	top: calc(.85rem + env(safe-area-inset-top, 0px));
	right: calc(.85rem + env(safe-area-inset-right, 0px));
	z-index: 10001;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.15rem;
	min-height: 48px;
	background: var(--hb-crimson-deep);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .5);
	border-radius: var(--hb-radius);
	font-family: var(--hb-display);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s var(--hb-ease), transform .15s var(--hb-ease);
}

.hb-quick-exit:hover,
.hb-quick-exit:focus-visible {
	background: #a30026;
	transform: scale(1.04);
}

.hb-quick-exit__hint {
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	opacity: .85;
}

@media (max-width: 900px) {
	.hb-quick-exit__hint { display: none; }
}



/* ---- Brand over the theme -------------------------------------------
   CharityBox enqueues several stylesheets after this one, so overrides here
   carry !important. That is the same load-order trap version one documented,
   and it applies to every ThemeForest theme of this kind. */

body, p, li, .elementor-widget-container p {
	font-family: var(--hb-body) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--hb-display) !important;
}

/* The demo runs on orange. HealBridge is green, with red reserved for the
   urgent path and crimson for Quick Exit alone. */
:root {
	--thm-base: #00893F;
	--thm-primary: #00893F;
	--thm-black: #0B3A2A;
}

a { color: var(--hb-green-deep); }
a:hover { color: var(--hb-forest); }

/* ==========================================================================
   THE THREE ROUTES IN

   Three cards on one line inside one panel. The demo card is built for a
   two-up grid: 50px of padding and a 34px heading are comfortable at 530px
   wide and cramped at 343px, so everything inside steps down with it.

   The parent stylesheet is enqueued after this file, so overrides here carry
   !important. Four rules in site one's brand.css were silently doing nothing
   for exactly this reason.
   ========================================================================== */

.feature-one--three {
	padding: 90px 0 70px !important;
}

/* The panel the three cards sit in. The page behind is white, so the surface
   needs a tint and a hairline to read as a card rather than as nothing. */
.feature-one__panel {
	background-color: #F4F7F5 !important;
	border: 1px solid #E3EAE5 !important;
	border-radius: 28px !important;
	padding: 34px 22px !important;
	box-shadow: 0 24px 60px rgba(11, 58, 42, .07) !important;
}

.feature-one--three .feature-one__single {
	padding: 30px 28px !important;
	border-radius: 18px !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

/* The icon is the biggest thing in the card and the least load bearing. */
.feature-one--three .feature-one__top-icon {
	font-size: 38px !important;
	height: auto !important;
	width: auto !important;
	line-height: 1 !important;
	margin-bottom: 6px !important;
}

.feature-one--three .feature-one__top-icon span,
.feature-one--three .feature-one__top-icon i,
.feature-one--three .feature-one__top-icon svg {
	font-size: 38px !important;
	width: 38px !important;
	height: 38px !important;
}

.feature-one--three .feature-one__top-title {
	font-size: 22px !important;
	line-height: 28px !important;
}

.feature-one--three .feature-one__text {
	font-size: 15px !important;
	line-height: 24px !important;
	margin-top: 12px !important;
	margin-bottom: 14px !important;
}

.feature-one--three .feature-one__point li {
	margin-bottom: 6px !important;
}

.feature-one--three .feature-one__point li p {
	font-size: 14px !important;
	line-height: 21px !important;
}

/* Push every button onto the same baseline whatever the copy above it does. */
.feature-one--three .feature-one__btn {
	margin-top: auto !important;
	align-self: flex-start !important;
	padding: 11px 26px !important;
	font-size: 13px !important;
}

@media (max-width: 991px) {
	.feature-one__panel {
		padding: 20px 12px !important;
		border-radius: 20px !important;
	}
	.feature-one--three .feature-one__single {
		padding: 26px 24px !important;
		margin-bottom: 18px !important;
	}
}

/* ==========================================================================
   WHAT WE ASK FOR - the standfirst was unreadable

   The theme sets this paragraph to #3D4A42 for a light section. This layout
   puts it on #283734, which is dark on dark: a contrast ratio near 1.2, and
   the single most important sentence about what the site is asking for.
   ========================================================================== */

.why-choose-one__content__text {
	color: rgba(255, 255, 255, .82) !important;
}

/* ==========================================================================
   HERO UNDERLINE

   Ported from site one, where the hero's second clause is wrapped in a span
   that carries a hand-drawn underline behind the text.
   ========================================================================== */

/* An inline-block span that wraps becomes a full-width block, and an absolutely
   positioned :after at width:100% then draws the underline across the whole
   column instead of under the words. Painting it as the span's own background
   with box-decoration-break: clone gives each line fragment an underline the
   width of its actual text, at every viewport. */
.main-slider__title .hb-underline {
	display: inline;
	background-image: url(../shape/title-underline.png);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.28em;
	padding-bottom: 0.18em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* "we build a bridge" needs about 608px at the theme's 80px. The hero text
   column is half a container that stops growing at 1320px, so it is ~636px
   at every desktop width and the phrase broke in two at all of them - the
   underline was drawn under "a bridge" alone while the span ran the full
   width. At 66px the phrase needs ~501px and sits on one line, which is the
   line the underline was drawn for. */
@media (min-width: 992px) {
	.main-slider__title {
		font-size: 66px !important;
		line-height: 70px !important;
	}
}

/* ==========================================================================
   SITE LOGO

   The supplied mark is 828x157 - roughly twice as wide, proportionally, as
   the Oxpins one it replaces. Left at the theme's width the tagline under
   the wordmark is too small to read.
   ========================================================================== */

.main-menu__logo img,
.main-header__logo img,
.mobile-nav__logo img,
.main-menu-two__logo img {
	max-width: 240px !important;
	width: auto !important;
	height: auto !important;
}

/* The mobile drawer is the same dark green as the footer, so the logo needs
   the same plate there - and room enough to read the tagline. */
.mobile-nav__content .logo-box {
	display: inline-block !important;
	background-color: #FFFFFF !important;
	padding: 12px 14px !important;
	border-radius: 10px !important;
}

.mobile-nav__content .logo-box img {
	max-width: 200px !important;
	width: auto !important;
	height: auto !important;
}

/* The logo is dark text on transparent: correct on the white header, and
   invisible on the dark footer. A light plate behind it is honest and keeps
   the colour in the mark, which recolouring the artwork would not. */
.site-footer__about-logo,
.site-footer .footer-widget__about-logo {
	display: inline-block !important;
	background-color: #FFFFFF !important;
	padding: 14px 18px !important;
	border-radius: 12px !important;
}

.site-footer__about-logo img,
.site-footer .footer-widget__about-logo img {
	max-width: 210px !important;
	width: auto !important;
	height: auto !important;
}

/* ==========================================================================
   THE PANEL OVERLAPS THE HERO

   Desktop only. On a phone the hero and the first card are already stacked
   edge to edge, and pulling the panel up there would crop the hero image and
   crowd the headline rather than layering anything.
   ========================================================================== */

@media (min-width: 992px) {
	.feature-one--three {
		padding-top: 0 !important;
		margin-top: -90px !important;
		position: relative !important;
		/* .main-slider sets z-index: 91 and sits in the same stacking context,
		   so a lower value here put the hero on top of the cards and cut off
		   their icons and first heading line. */
		z-index: 92 !important;
	}
}

/* ==========================================================================
   WHAT WE ASK FOR - six cards, one height

   Matched copy lengths get the six close, but a stray wrap at one width is
   enough to leave a row uneven. Stretching the row makes it exact.
   ========================================================================== */

.why-choose-one__box {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

.why-choose-one .row {
	align-items: stretch !important;
}

.why-choose-one .row > [class*="col-"] {
	display: flex !important;
	margin-bottom: 30px !important;
}

/* Reserve three lines for every description. Stretching the row only levels
   a card against the others on its own row, so one four-line card made the
   second row taller than the first. */
.why-choose-one__box__text {
	min-height: 4.95em !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   THE FOUNDERS

   Two people, not a team page. This is a footnote to "Who we are" rather
   than a band of its own: no heading, small monograms, tucked up under the
   section above so it reads as part of it. The designation under each name
   is the only label it needs.

   Portraits are initials monograms, not photographs - square and flat, so
   the card's photo treatment, which assumes a cropped headshot, has to
   leave the image alone.
   ========================================================================== */

.hb-founders {
	margin: 34px 0 22px;
	padding-top: 26px;
	border-top: 1px solid var(--hb-line);
}

.hb-founders__label {
	margin: 0 0 14px;
	font-family: var(--hb-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hb-green-deep);
}

.hb-founders__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin: 0;
	padding: 0;
}

.hb-founders__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.hb-founders__portrait {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	border-radius: 50%;
	object-fit: contain;
	background-color: transparent;
}

.hb-founders__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.hb-founders__name {
	font-family: var(--hb-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--hb-forest);
}

.hb-founders__role {
	font-size: 13px;
	color: var(--hb-ink-soft);
}

/* The button sits directly under the two of them and runs the width of the
   column, so it reads as a rule drawn beneath the pair rather than as a
   third item floating next to them. */
.about-one__right .about-one__btn {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	margin-top: 0 !important;
}

@media (max-width: 575px) {
	.hb-founders__list {
		gap: 16px;
	}
	.hb-founders__item {
		flex: 0 0 100%;
	}
}

/* ==========================================================================
   WHO WE ARE - pull the right column back level with the image

   The content column ran 195px past the bottom of the photograph, which left
   the founders and the button stranded below it. The demo's vertical rhythm
   is built for a shorter block: 34px above the highlight and 43px below it,
   41px under the points list. Tightened rather than cut, so the section keeps
   its spacing, just less of it.
   ========================================================================== */

@media (min-width: 1200px) {
	/* The left column opens with a cream panel and a yellow frame that both
	   sit above the photograph, so starting the text a little higher reads as
	   aligned with the artwork rather than as floating off the top. */
	.about-one__right {
		margin-top: -30px !important;
	}

	.about-one__right .section-title {
		margin-bottom: 14px !important;
	}

	.about-one__fund {
		margin-top: 14px !important;
		margin-bottom: 16px !important;
	}

	.about-one__points {
		margin-bottom: 16px !important;
	}

	.about-one__points li {
		margin-bottom: 12px !important;
	}

	.hb-founders {
		margin-top: 14px;
		margin-bottom: 12px;
		padding-top: 14px;
	}

	.hb-founders__label {
		margin-bottom: 10px;
	}

	.hb-founders__portrait {
		width: 48px;
		height: 48px;
		flex: 0 0 48px;
	}
}

/* ==========================================================================
   THE THIRD BRAND COLOUR

   The logo carries teal, amber and a coral red (#FC5B4E, sampled from the
   mark itself). Only the first two had reached the site.

   It is used decoratively and nowhere else. This site already spends red on
   meaning - #D62818 is the urgent path and #8b0020 is Quick Exit - so the
   coral never goes on a button, a link, or anything a visitor in trouble
   might read as an alarm. It also measures 3.10:1 on white, which is below
   AA for text and fine for a drawn line.
   ========================================================================== */

:root {
	--hb-coral: #FC5B4E;
}

/* The underline stays amber. Coral competed with the white headline sitting
   on top of it; it earns its place on the button below instead.
   (title-underline-coral.png is kept in assets/shape/ if it is ever wanted.) */
.main-slider__title .hb-underline {
	background-image: url(../shape/title-underline.png);
}

/* ---- Coral on the three controls ------------------------------------
   White lettering, chosen by the owner over the darker ink alternative.
   Recorded for whoever audits this later: #FFFFFF on #FC5B4E measures
   3.10:1, under the 4.5:1 AA threshold for text at these sizes. The
   hover state darkens to #E8442F, which lifts it to 3.9:1. */

.hb-quick-exit {
	background: var(--hb-coral) !important;
	color: #FFFFFF !important;
	border-color: rgba(255, 255, 255, .55) !important;
}

.hb-quick-exit:hover,
.hb-quick-exit:focus-visible {
	background: #E8442F !important;
	color: #FFFFFF !important;
}

/* The hero call to action, swapped with the underline. */
.main-slider__btn.thm-btn {
	background-color: var(--hb-coral) !important;
	color: #FFFFFF !important;
}

.main-slider__btn.thm-btn:hover,
.main-slider__btn.thm-btn:focus {
	background-color: #E8442F !important;
	color: #FFFFFF !important;
}

/* The heart badge beside "Free and confidential". The heart ships as a dark
   PNG, so it is knocked out to white rather than swapped for a second file. */
.main-menu__volunteers-icon {
	background-color: var(--hb-coral) !important;
}

.main-menu__volunteers-icon img {
	filter: brightness(0) invert(1) !important;
}

/* The small rule beside the 56 / 8 figures in "Who we are". */
.about-one__fund::before {
	background-color: var(--hb-coral) !important;
}

/* The rule above the founders, so the coral appears twice in that column
   rather than once and orphaned. */
.hb-founders {
	border-top-color: var(--hb-coral);
}

/* ==========================================================================
   THE PANEL SITS LOWER AND LIGHTER

   Was lapping 90px over the hero, which read as the panel cutting into the
   picture. 40px catches just the bottom edge instead, and the surface is
   quieter: less padding, no hairline.
   ========================================================================== */

@media (min-width: 992px) {
	.feature-one--three {
		margin-top: -40px !important;
	}
}

.feature-one__panel {
	padding: 20px 14px !important;
	border: 0 !important;
	box-shadow: 0 18px 44px rgba(11, 58, 42, .06) !important;
}

@media (max-width: 991px) {
	.feature-one__panel {
		padding: 14px 8px !important;
	}
}

/* ==========================================================================
   QUICK EXIT SITS UNDER THE HEADER, NOT ON TOP OF IT

   At the theme's own top offset the button overlapped the header: on desktop
   it sat across the Emergency and Email us details, and on a phone it covered
   the menu toggle outright - the button is 225-361px across and the toggle is
   at 328-345, so the menu could not be opened at all.

   It stays fixed. It just starts below the header bar, tucked under the
   "Get help now" button it lines up with. The sticky header is ~84px, so it
   is still clear once the page scrolls.
   ========================================================================== */

.hb-quick-exit {
	top: calc(96px + env(safe-area-inset-top, 0px)) !important;
	right: calc(12px + env(safe-area-inset-right, 0px)) !important;
}

@media (min-width: 992px) {
	.hb-quick-exit {
		top: calc(180px + env(safe-area-inset-top, 0px)) !important;
		right: calc(28px + env(safe-area-inset-right, 0px)) !important;
	}
}

/* ==========================================================================
   CLOSE THE GAP UNDER THE HERO ON MOBILE

   The section abuts the slider, but carries 90px of its own padding, which
   reads as the cards floating away from the hero on a small screen.
   ========================================================================== */

@media (max-width: 991px) {
	.feature-one--three {
		padding-top: 24px !important;
		padding-bottom: 40px !important;
	}
}

/* ==========================================================================
   GRADIENTS WHERE A PHOTOGRAPH WAS DOING NOTHING

   The inner-page banner, the FAQ band and the contact backdrop were stock
   textures: 37KB, 60KB and 90KB of decoration that carried no meaning and,
   on this site, showed the wrong people. Brand gradients cost nothing to
   download and cannot misrepresent anyone.

   Built from the palette already in use: forest through green, with the logo
   coral only as a low-opacity bloom so it never reads as an alert.
   ========================================================================== */

.page-header,
.page-header-bg {
	background-image:
		radial-gradient(120% 180% at 88% 8%, rgba(252, 91, 78, .22) 0%, rgba(252, 91, 78, 0) 55%),
		linear-gradient(135deg, #0B3A2A 0%, #12513A 45%, #00714D 100%) !important;
	background-color: #0B3A2A !important;
	background-size: cover !important;
	background-position: center !important;
}

/* The FAQ band background. */
.faq-two,
.faq-three,
.faq-one__bg {
	background-image:
		radial-gradient(90% 140% at 12% 0%, rgba(0, 137, 63, .10) 0%, rgba(0, 137, 63, 0) 60%),
		linear-gradient(180deg, #F4F7F5 0%, #EAF2ED 100%) !important;
	background-color: #F4F7F5 !important;
}

/* The contact page backdrop. */
.contact-three,
.contact-page__shape,
.contact-three-shape {
	background-image:
		radial-gradient(80% 120% at 90% 10%, rgba(252, 91, 78, .10) 0%, rgba(252, 91, 78, 0) 60%),
		linear-gradient(180deg, #FFFFFF 0%, #F4F7F5 100%) !important;
	background-color: #FFFFFF !important;
}

/* The banner title has to stay readable on the darker gradient. */
.page-header .page-header__title,
.page-header h1,
.page-header .thm-breadcrumb,
.page-header .thm-breadcrumb li,
.page-header .thm-breadcrumb li a {
	color: #FFFFFF !important;
}

.page-header .thm-breadcrumb li a:hover {
	color: var(--hb-coral) !important;
}

/* The FAQ band's two decorative layers are inline background-image divs -
   387KB of stock texture between them, and duplicates the importer created
   with -1 suffixes, so the earlier optimisation pass never touched them.
   The band already carries a brand gradient; these add nothing. */
.faq-one-shape-1,
.faq-one-bg,
.faq-one__shape,
.contact-three-shape {
	background-image: none !important;
}

.faq-one.faq-two,
.faq-one.faq-three {
	background-image:
		radial-gradient(90% 140% at 12% 0%, rgba(0, 137, 63, .10) 0%, rgba(0, 137, 63, 0) 60%),
		linear-gradient(180deg, #F4F7F5 0%, #EAF2ED 100%) !important;
	background-color: #F4F7F5 !important;
}

/* ==========================================================================
   THE HERO PHOTOGRAPH ON MOBILE

   Oxpins puts the picture in a half-width layer beside the text and then sets
   display:none below 992px, so on a phone the hero was a flat green panel and
   the photograph never appeared at all.

   Here it becomes the background of the whole slide instead. The headline is
   white, so the image carries a scrim in the brand's own dark green - without
   it, white type sits on a photograph and the contrast depends on whichever
   part of the picture happens to be behind each letter.
   ========================================================================== */

@media (max-width: 991px) {
	.main-slider .image-layer {
		display: block !important;
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background-size: cover !important;
		/* Biased upward: the faces sit in the top half of this frame. */
		background-position: 50% 22% !important;
		z-index: 0 !important;
	}

	/* The scrim. Heaviest behind the copy, easing off at the top so the
	   photograph is still legible as a photograph. */
	.main-slider .image-layer::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background:
			linear-gradient(
				180deg,
				rgba(40, 55, 52, .62) 0%,
				rgba(40, 55, 52, .72) 28%,
				rgba(40, 55, 52, .90) 55%,
				rgba(40, 55, 52, .94) 100%
			);
	}

	/* Keep the copy above both. */
	.main-slider .container,
	.main-slider__content {
		position: relative !important;
		z-index: 2 !important;
	}

	/* The decorative shapes fought the photograph for the same space. */
	.main-slider-shape-1,
	.main-slider-shape-2 {
		display: none !important;
	}
}

/* ==========================================================================
   PARTNER WITH US - the left panel

   The panel's white copy needs a surface, not a photograph. The theme prints
   the background as an inline style, so this overrides it; the photograph
   keeps the slot above, which is the one the design intended for it.
   ========================================================================== */

.become-volunteer-page__left {
	background-image:
		radial-gradient(110% 130% at 85% 5%, rgba(252, 91, 78, .20) 0%, rgba(252, 91, 78, 0) 55%),
		linear-gradient(160deg, #0B3A2A 0%, #12513A 48%, #00714D 100%) !important;
	background-color: #0B3A2A !important;
	background-size: cover !important;
	background-position: center !important;
}

.become-volunteer-page__left .become-volunteer-page__title,
.become-volunteer-page__left .become-volunteer-page__text,
.become-volunteer-page__left .become-volunteer__points p {
	color: #FFFFFF !important;
}

.become-volunteer-page__left .become-volunteer-page__text,
.become-volunteer-page__left .become-volunteer__points p {
	opacity: .92;
}

/* The photograph in its proper slot. */
.become-volunteer-page__img img {
	width: 100% !important;
	height: auto !important;
	border-radius: 14px !important;
	display: block !important;
}

/* The template prints the phone block whether or not there is a number in
   it, which left a floating icon and nothing beside it. */
.become-volunteer__call {
	display: none !important;
}

/* The consent line is a sentence, not a form control. */
.become-volunteer__consent {
	margin-top: 6px;
}

.become-volunteer__consent .wpcf7-list-item {
	margin: 0 !important;
}

.become-volunteer__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hb-ink-soft);
}

/* ==========================================================================
   THE HEADER SWOOSH

   Removed rather than repositioned, and the numbers are why. The shape is
   113px wide and sat at 175-288px, while the logo occupies 60-300px - it
   crossed the wordmark for its entire width, drawing a moving green line
   through "Connecting Hearts. Restoring Hope."

   The only clear space is between the logo (ends 300) and the heart badge
   (starts 335): 35 pixels. Anything wider overlaps one or the other, and an
   arrow scaled to 35px no longer reads as an arrow. The HealBridge logo is
   wider than the Oxpins one it replaced, which is what closed the gap the
   demo had left for this.

   It was already hidden below 992px, so this only changes desktop.
   ========================================================================== */

.main-menu__shape-1 {
	display: none !important;
}