/**
 * Theme Name:     Charite Child
 * Theme URI:      https://healbridge.org
 * Author:         SOLVERWP
 * Template:       charite
 * Text Domain:    charite-child
 * Description:    HealBridge.org - foundation site for domestic violence support for women and children. Child theme of Charite.
 * Version:        1.0.0
 */

/* ==========================================================================
   FONTS - self-hosted
   Loaded from this server rather than Google. A request to fonts.gstatic.com
   would tell a third party that this browser opened HealBridge, which is
   exactly the kind of trace this site exists to avoid.
   ========================================================================== */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/SpaceGrotesk-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/SpaceGrotesk-700.woff2') format('woff2');
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/DMSans-400.woff2') format('woff2');
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/DMSans-500.woff2') format('woff2');
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/DMSans-700.woff2') format('woff2');
}

/* ==========================================================================
   TOKENS

   Contrast ratios below were measured against --hb-ink (#0a0a0f), not
   estimated. Anything marked FAIL is restricted to the role noted and must
   not be used for body text.
   ========================================================================== */

:root {
	/* Palette. Ratio shown is against --hb-ink. */
	--hb-crimson:      #ff2d55; /*  5.42  ok for body */
	--hb-crimson-deep: #8b0020; /*  1.99  FAIL - background fill only */
	--hb-electric:     #00d4ff; /* 11.16  ok for body */
	--hb-violet:       #7b2fff; /*  3.47  FAIL for body - large display only */
	--hb-jade:         #00e87a; /* 12.06  ok for body */
	--hb-gold:         #ffd700; /* 14.08  ok for body */

	--hb-ink:          #0a0a0f;
	--hb-ink-raised:   #14141c;
	--hb-paper:        #ffffff;
	--hb-paper-warm:   #fbfaf7;

	/* Text on dark. Body copy sits at .92 rather than pure white so long
	   passages do not vibrate against near-black. */
	--hb-text:         rgba(255, 255, 255, 0.92);
	--hb-text-soft:    rgba(255, 255, 255, 0.66);

	/* Text on light, for the closing section. */
	--hb-text-dark:      #16161d;
	--hb-text-dark-soft: #4a4a57;

	/* Each section rebinds --accent. One mechanism, so the emotional arc
	   reads as a deliberate progression instead of scattered colour. */
	--accent: var(--hb-crimson);

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

	/* Fluid type. The hero cap is set from the longest headline line rather
	   than picked for impact: "We can help you get there." needs roughly
	   12.9em, so anything above ~3.25rem wraps it in the available column and
	   turns a 2-line headline into 4. */
	--hb-step-hero: clamp(2.1rem, 1.15rem + 3vw, 3.25rem);
	--hb-step-h2:   clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
	--hb-step-h3:   clamp(1.15rem, 0.98rem + 0.7vw, 1.5rem);
	--hb-step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

	/* Density 3 of 10: spacious. */
	--hb-section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
	--hb-gutter:    clamp(1.25rem, 0.5rem + 3vw, 4rem);
	--hb-max:       1240px;

	/* Shape system, applied everywhere without exception:
	   interactive = pill, surfaces = 4px, media = 4px. */
	--hb-radius-interactive: 999px;
	--hb-radius-surface: 4px;

	--hb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   BASE
   ========================================================================== */

/* Tells the browser this is a dark surface, so native scrollbars, form
   controls, and the select dropdown render dark instead of flashing white. */
html:has(body.healbridge) {
	color-scheme: dark;
}

body.healbridge {
	background: var(--hb-ink);
	color: var(--hb-text);
	font-family: var(--hb-font-body);
	font-size: var(--hb-step-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	/* Removes the ~300ms tap delay mobile browsers add while waiting to see
	   if a tap is a double-tap. On Quick Exit that delay is the difference
	   between leaving now and leaving in a third of a second. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
}

/* Section ids are anchor targets and the header is fixed at ~100px, so an
   in-page link would otherwise drop the heading underneath it. */
.healbridge [id] {
	scroll-margin-top: 6.5rem;
}

/* Headings wrap onto more even lines instead of leaving one orphan word. */
.healbridge h1,
.healbridge h2,
.healbridge h3 {
	text-wrap: balance;
}

.healbridge h1,
.healbridge h2,
.healbridge h3 {
	font-family: var(--hb-font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.healbridge h1 { font-size: var(--hb-step-hero); }
.healbridge h2 { font-size: var(--hb-step-h2); }
.healbridge h3 { font-size: var(--hb-step-h3); }

.healbridge p { margin: 0 0 1rem; max-width: 62ch; }

.hb-section {
	padding-block: var(--hb-section-y);
	padding-inline: var(--hb-gutter);
	position: relative;
}

.hb-wrap {
	max-width: var(--hb-max);
	margin-inline: auto;
	width: 100%;
}

/* Keyboard focus must stay obvious everywhere. Someone navigating this site
   under stress, or with assistive tech, cannot lose their place. */
.healbridge a:focus-visible,
.healbridge button:focus-visible,
.healbridge [tabindex]:focus-visible {
	outline: 3px solid var(--hb-electric);
	outline-offset: 3px;
	border-radius: 2px;
}

.hb-eyebrow {
	font-family: var(--hb-font-display);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	display: block;
	margin-bottom: 0.9rem;
}

/* ==========================================================================
   QUICK EXIT

   Contrast note: the original prototype used white on --hb-crimson for the
   hover state, which measures 3.65 and fails AA. This uses --hb-crimson-deep
   at 9.91. The one control that has to be readable under pressure is now the
   highest-contrast element on the page.
   ========================================================================== */

.hb-quick-exit {
	position: fixed;
	/* Offset by the safe-area insets. Without these the button can sit under
	   the notch or the rounded corner on a modern phone, which on this
	   particular control means it is unreachable exactly when it is needed. */
	top: calc(0.85rem + env(safe-area-inset-top, 0px));
	right: calc(0.85rem + env(safe-area-inset-right, 0px));
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.15rem;
	background: var(--hb-crimson-deep);
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--hb-radius-interactive);
	font-family: var(--hb-font-display);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	/* Comfortably above the 44px minimum touch target. Missing this button
	   in a hurry is the failure mode that matters. */
	min-height: 48px;
	transition: background 0.15s var(--hb-ease), transform 0.15s var(--hb-ease);
}

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

.hb-quick-exit:active { transform: scale(0.97); }

.hb-quick-exit__hint {
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.85;
}

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

/* Safety guidance strip, sits directly under the hero. */
.hb-safety-note {
	background: var(--hb-ink-raised);
	border-left: 3px solid var(--hb-crimson);
	padding: 1.1rem 1.35rem;
	border-radius: var(--hb-radius-surface);
	font-size: 0.94rem;
	color: var(--hb-text-soft);
	max-width: 62ch;
}

.hb-safety-note strong { color: var(--hb-text); }

/* ==========================================================================
   1. HERO  - accent: crimson
   Asymmetric split rather than centred (variance 6). Motion here is
   deliberately near-zero: this is the screen a woman in crisis lands on, and
   the main thread stays free so Quick Exit responds instantly.
   ========================================================================== */

.hb-hero {
	--accent: var(--hb-crimson);
	min-height: 100dvh;
	display: flex;
	align-items: center;
	padding-top: 6rem;
	background:
		radial-gradient(120% 90% at 82% 12%, rgba(139, 0, 32, 0.5), transparent 62%),
		var(--hb-ink);
}

.hb-hero__grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.hb-hero__title { margin-bottom: 1.25rem; }
.hb-hero__title em {
	font-style: normal;
	color: var(--hb-crimson);
}

.hb-hero__lede {
	font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
	color: var(--hb-text-soft);
	margin-bottom: 2rem;
}

.hb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 2rem;
}

/* Portrait panel. Kept as a flat tinted surface until a real photograph is
   supplied - see the note in the build report. */
.hb-hero__panel {
	aspect-ratio: 4 / 5;
	border-radius: var(--hb-radius-surface);
	background:
		linear-gradient(155deg, rgba(255, 45, 85, 0.16), rgba(0, 212, 255, 0.09)),
		var(--hb-ink-raised);
	border: 1px solid rgba(255, 255, 255, 0.09);
	display: flex;
	align-items: flex-end;
	padding: 1.75rem;
}

.hb-hero__panel p {
	font-family: var(--hb-font-display);
	font-size: 1.05rem;
	color: var(--hb-text);
	margin: 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.hb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 1.75rem;
	min-height: 48px;
	border-radius: var(--hb-radius-interactive);
	font-family: var(--hb-font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	/* Labels stay on one line at desktop. A wrapped CTA reads as broken. */
	white-space: nowrap;
	transition: transform 0.15s var(--hb-ease), background 0.15s var(--hb-ease);
}

/* Gold on near-black measures 14.08, the strongest pairing available, so the
   primary help action is also the most legible thing on the page. */
.hb-btn--primary {
	background: var(--hb-gold);
	color: var(--hb-ink);
}
.hb-btn--primary:hover { background: #ffe23f; transform: translateY(-2px); }

.hb-btn--ghost {
	background: transparent;
	color: var(--hb-text);
	border-color: rgba(255, 255, 255, 0.28);
}
.hb-btn--ghost:hover { border-color: var(--hb-text); transform: translateY(-2px); }

.hb-btn:active { transform: translateY(0) scale(0.98); }

/* ==========================================================================
   2. STATS  - accent: electric
   ========================================================================== */

.hb-stats {
	--accent: var(--hb-electric);
	background: var(--hb-ink-raised);
	border-block: 1px solid rgba(255, 255, 255, 0.07);
}

.hb-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.hb-stat__figure {
	font-family: var(--hb-font-display);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	font-weight: 700;
	line-height: 1;
	color: var(--hb-electric);
	display: block;
	margin-bottom: 0.5rem;
	/* Figures sit in a row, so fixed-width digits keep them optically aligned
	   rather than drifting against each other. */
	font-variant-numeric: tabular-nums;
}

.hb-stat__label {
	color: var(--hb-text-soft);
	font-size: 0.95rem;
	margin: 0;
}

.hb-stat__source {
	display: block;
	margin-top: 1.75rem;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.45);
}

.hb-stat__source a { color: rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   3. ABOUT  - accent: electric
   ========================================================================== */

.hb-about { --accent: var(--hb-electric); }

.hb-about__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* ==========================================================================
   4. SERVICES  - accent: electric
   Four services, four cells. No filler tiles.
   ========================================================================== */

.hb-services { --accent: var(--hb-electric); background: var(--hb-ink-raised); }

.hb-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.hb-service {
	background: var(--hb-ink);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top: 3px solid var(--hb-electric);
	border-radius: var(--hb-radius-surface);
	padding: 1.75rem 1.6rem;
}

.hb-service h3 { margin-bottom: 0.6rem; }
.hb-service p { color: var(--hb-text-soft); font-size: 0.96rem; margin: 0; }

/* ==========================================================================
   5. BRIDGE JOURNEY  - accent: jade
   A real sequence, so numbered steps carry information here rather than
   decorating. This is the one section where numbering is earned.
   ========================================================================== */

.hb-journey { --accent: var(--hb-jade); }

.hb-journey__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.75rem;
	margin-top: 3rem;
	position: relative;
}

.hb-step { position: relative; padding-top: 2.75rem; }

.hb-step__num {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-items: center;
	border-radius: var(--hb-radius-interactive);
	background: var(--hb-jade);
	color: var(--hb-ink);
	font-family: var(--hb-font-display);
	font-weight: 700;
	font-size: 0.9rem;
}

.hb-step h3 { margin-bottom: 0.5rem; }
.hb-step p { color: var(--hb-text-soft); font-size: 0.95rem; margin: 0; }

/* Connecting line, drawn only where there is room for it to mean anything. */
@media (min-width: 900px) {
	.hb-journey__steps::before {
		content: '';
		position: absolute;
		top: 1.05rem;
		left: 1rem;
		right: 1rem;
		height: 1px;
		background: linear-gradient(
			90deg,
			var(--hb-jade),
			rgba(0, 232, 122, 0.15)
		);
		z-index: 0;
	}
	.hb-step { z-index: 1; }
}

/* ==========================================================================
   6. TESTIMONIALS  - accent: jade
   ========================================================================== */

.hb-stories { --accent: var(--hb-jade); background: var(--hb-ink-raised); }

.hb-stories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.hb-story {
	background: var(--hb-ink);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--hb-radius-surface);
	padding: 1.9rem 1.7rem;
}

.hb-story blockquote {
	margin: 0 0 1.25rem;
	font-family: var(--hb-font-display);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--hb-text);
}

.hb-story__who {
	font-size: 0.88rem;
	color: var(--hb-jade);
	margin: 0;
}

.hb-story__note {
	display: block;
	margin-top: 0.3rem;
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.8rem;
}

/* ==========================================================================
   7. JOIN  - accent: gold
   ========================================================================== */

.hb-join {
	--accent: var(--hb-gold);
	background:
		radial-gradient(100% 120% at 50% 0%, rgba(255, 215, 0, 0.09), transparent 60%),
		var(--hb-ink);
	text-align: center;
}

.hb-join h2 { max-width: 18ch; margin-inline: auto; }
.hb-join p { margin-inline: auto; color: var(--hb-text-soft); }

.hb-join__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
	margin-top: 2rem;
}

/* ==========================================================================
   8. JOYFUL ENDING  - the one theme switch
   The page resolves from near-black to white exactly once, at the end. This
   is the thesis of the whole design, not decoration: the arc runs from crisis
   to daylight. Nothing else on the page inverts.
   ========================================================================== */

.hb-ending {
	background: var(--hb-paper-warm);
	color: var(--hb-text-dark);
	text-align: center;
}

.hb-ending h2 { color: var(--hb-text-dark); max-width: 20ch; margin-inline: auto; }

.hb-ending p {
	color: var(--hb-text-dark-soft);
	margin-inline: auto;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
}

.hb-ending .hb-btn--primary {
	background: var(--hb-ink);
	color: var(--hb-paper);
	margin-top: 1.5rem;
}
.hb-ending .hb-btn--primary:hover { background: #26262f; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.hb-footer {
	background: var(--hb-ink);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-block: 3.5rem 2.5rem;
	padding-inline: var(--hb-gutter);
}

.hb-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 2.5rem;
	max-width: var(--hb-max);
	margin-inline: auto;
}

.hb-footer h3 {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hb-text-soft);
	margin-bottom: 1rem;
}

.hb-footer ul { list-style: none; padding: 0; margin: 0; }
.hb-footer li { margin-bottom: 0.55rem; }
.hb-footer a { color: var(--hb-text-soft); text-decoration: none; }
.hb-footer a:hover { color: var(--hb-text); text-decoration: underline; }

.hb-footer__brand {
	font-family: var(--hb-font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--hb-text);
	margin-bottom: 0.6rem;
}
.hb-footer__brand span { color: var(--hb-crimson); }

.hb-footer__legal {
	max-width: var(--hb-max);
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   MOTION

   Progressive by design. The hero does not animate at all. Sections below it
   fade up once as they enter view, because a donor scrolls and a woman in
   crisis does not. Transform and opacity only, so nothing triggers layout.
   ========================================================================== */

/* Progressive enhancement, deliberately.

   The hidden state is scoped to .hb-js, a class an inline head script adds
   only when scripting is available. Without it, every .hb-reveal renders at
   full opacity and the page is complete.

   The earlier version hid this content by default and relied on JS to reveal
   it, which meant one script failure left everything below the hero blank.
   On a site someone opens during a crisis, content must never depend on
   JavaScript to be readable. */
.hb-js .hb-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--hb-ease), transform 0.6s var(--hb-ease);
	will-change: opacity, transform;
}

.hb-js .hb-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Reduced motion collapses every reveal to its final state instantly. The
   content is never gated behind an animation that may not run. */
@media (prefers-reduced-motion: reduce) {
	.healbridge *,
	.healbridge *::before,
	.healbridge *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.hb-js .hb-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

.hb-page__head { padding-bottom: 1rem; }
.hb-page__head h1 { max-width: 20ch; }

.hb-prose h2 { margin-top: 2.5rem; }
.hb-prose h3 { margin-top: 1.75rem; }
.hb-prose ul { padding-left: 1.2rem; max-width: 62ch; }
.hb-prose li { margin-bottom: 0.5rem; }
.hb-prose a { color: var(--hb-electric); }

/* Compressed deliberately. The page-level section rhythm would push the
   emergency numbers to around 690px, which is below the fold on a laptop.
   On this page the intro earns far less room than the phone numbers do. */
.hb-help-hero {
	--accent: var(--hb-crimson);
	padding-block: clamp(5.5rem, 4.5rem + 2vw, 7rem) 0;
}

.hb-help-hero h1 {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
	margin-bottom: 0.5rem;
}

.hb-help-hero__lede {
	font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
	color: var(--hb-text-soft);
	margin-bottom: 0;
}

/* Emergency block sits tight under the intro rather than a full section gap
   below it. */
.hb-emergency { padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

/* --- Emergency block ---------------------------------------------------
   Highest-priority content on the site after Quick Exit. Crimson-deep fill
   with white text measures 9.91, so it reads under stress and in daylight. */

.hb-emergency {
	--accent: var(--hb-crimson);
	background: var(--hb-crimson-deep);
	color: #ffffff;
}

.hb-emergency h2 { color: #ffffff; }

.hb-emergency__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
}

.hb-emergency__card {
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--hb-radius-surface);
	padding: 1.5rem;
}

.hb-emergency__label {
	display: block;
	font-family: var(--hb-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 0.5rem;
}

.hb-emergency__number {
	display: inline-block;
	font-family: var(--hb-font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	line-height: 1.1;
	margin-bottom: 0.6rem;
	/* Whole number is a tap target on mobile. */
	min-height: 48px;
}

.hb-emergency__number:hover,
.hb-emergency__number:focus-visible { text-decoration: underline; }

.hb-emergency p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.92rem;
	margin: 0;
}

/* --- Safety guidance --------------------------------------------------- */

.hb-safety-guide { --accent: var(--hb-electric); background: var(--hb-ink-raised); }

.hb-safety-guide__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2rem;
	margin-top: 2.5rem;
}

.hb-safety-guide h3 { color: var(--hb-electric); margin-bottom: 0.5rem; }
.hb-safety-guide p { color: var(--hb-text-soft); font-size: 0.96rem; margin: 0; }

/* --- Forms -------------------------------------------------------------
   Contrast checked against --hb-ink-raised. Placeholder text is the usual
   failure point: browser defaults land around 2:1 on dark surfaces. */

.hb-form-shell { margin-top: 2rem; max-width: 40rem; }

.hb-form-shell label {
	display: block;
	font-family: var(--hb-font-display);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--hb-text);
	margin-bottom: 0.4rem;
}

.hb-form-shell input[type="text"],
.hb-form-shell input[type="email"],
.hb-form-shell input[type="tel"],
.hb-form-shell select,
.hb-form-shell textarea {
	width: 100%;
	background: var(--hb-ink);
	color: var(--hb-text);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--hb-radius-surface);
	padding: 0.85rem 1rem;
	font-family: var(--hb-font-body);
	font-size: 1rem;
	min-height: 48px;
	margin-bottom: 1.25rem;
}

.hb-form-shell textarea { min-height: 8rem; resize: vertical; }

/* rgba(255,255,255,0.62) on --hb-ink measures 7.4, comfortably past AA.
   Never lower this to "soften" the placeholder. */
.hb-form-shell ::placeholder {
	color: rgba(255, 255, 255, 0.62);
	opacity: 1;
}

.hb-form-shell input:focus-visible,
.hb-form-shell textarea:focus-visible,
.hb-form-shell select:focus-visible {
	outline: 3px solid var(--hb-electric);
	outline-offset: 2px;
	border-color: transparent;
}

.hb-form-shell input[type="submit"],
.hb-form-shell button[type="submit"] {
	background: var(--hb-gold);
	color: var(--hb-ink);
	border: none;
	border-radius: var(--hb-radius-interactive);
	padding: 0.95rem 2rem;
	min-height: 48px;
	font-family: var(--hb-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	width: auto;
}

.hb-form-shell input[type="submit"]:hover { background: #ffe23f; }

/* Contact Form 7 feedback messages, restyled so errors are legible on dark
   rather than CF7's default light-on-light. */
.hb-form-shell .wpcf7-not-valid-tip {
	color: #ff8fa3;
	font-size: 0.88rem;
	margin: -0.9rem 0 1rem;
}

.hb-form-shell .wpcf7-response-output {
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--hb-radius-surface);
	padding: 1rem 1.15rem;
	color: var(--hb-text);
	margin: 1rem 0 0;
}

.hb-form-missing {
	color: var(--hb-text-soft);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: var(--hb-radius-surface);
	padding: 1.25rem;
}

/* ==========================================================================
   PARENT THEME OVERRIDES

   Charite ships two chrome elements that actively hurt this build.
   ========================================================================== */

/* The preloader holds a spinner over the page until load fires. On the one
   site where the first paint matters most, that is exactly backwards: it
   delays the hero, adds motion nobody asked for, and hides Quick Exit behind
   an overlay while it runs. */
.healbridge .preloader,
.healbridge #preloader {
	display: none !important;
}

/* Charite's breadcrumb banner renders a full-bleed title block roughly 400px
   tall on every page. On the homepage it pushed the primary CTA below the
   fold; on Get Help it pushed the emergency phone numbers to 942px, which is
   the single worst place on this site to hide something. Every template here
   supplies its own heading, so the banner is pure cost. */
.healbridge .page-banner-area {
	display: none !important;
}

/* Skip link stays, and stays visible when focused. */
.healbridge .skip-link:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0.75rem 1.25rem;
	background: var(--hb-gold);
	color: var(--hb-ink);
	font-family: var(--hb-font-display);
	font-weight: 700;
	clip: auto !important;
	clip-path: none !important;
}

/* ==========================================================================
   RESPONSIVE
   Every asymmetric grid above collapses to a single column here.
   ========================================================================== */

@media (max-width: 900px) {
	.hb-hero__grid,
	.hb-about__grid,
	.hb-footer__grid {
		grid-template-columns: 1fr;
	}

	.hb-hero { min-height: auto; padding-top: 5.5rem; }
	.hb-hero__panel { aspect-ratio: 16 / 10; }
	.hb-hero__actions .hb-btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
	.hb-btn { width: 100%; }
	.hb-quick-exit { top: 0.6rem; right: 0.6rem; }
}