/* ============================================================
   HFH RIVER VALLEY — DESIGN SYSTEM
   ============================================================
   This stylesheet is the source of truth for the HFH brand on
   top of Divi 5. All classes here are designed to be applied
   to native Divi modules via the "CSS Class" field in module
   settings, so that content remains 100% editable while the
   look-and-feel is enforced consistently.

   Sections in this file:
     1.  Brand Tokens (CSS variables)
     2.  Typography helpers
     3.  Buttons (.hfh-btn-*)
     4.  Section labels & dividers
     5.  Hero (.hfh-hero) + arch + house silhouettes
     6.  Connection cards (.hfh-connection-card)
     7.  Program cards (.hfh-program-card)
     8.  ReStore section helpers
     9.  Impact stats (.hfh-impact)
    10.  Testimonial (.hfh-testimonial)
    11.  Latest news / blog grid (.hfh-blog-grid)
    12.  CTA banner (.hfh-cta-banner)
    13.  Affiliations strip (.hfh-affiliations)
    14.  Footer (.hfh-footer)
    15.  Page Hero (.hfh-page-hero)
    16.  Values cards (.hfh-value-card)
    17.  History timeline (.hfh-timeline)
    18.  Team grid (.hfh-team-card)
    19.  Service area (.hfh-service-area)
    20.  Animations
    21.  Responsive overrides
   ============================================================ */


/* ====== 1. BRAND TOKENS ====================================== */
:root {
	--hfh-bright-blue:   #00AFD7;
	--hfh-bright-green:  #C4D600;
	--hfh-white:         #FFFFFF;
	--hfh-gray:          #53565A; /* darkened from brand #888B8D per Amanda 7/10 for
	                                readability — used ONLY as body/descriptive text color
	                                sitewide (verified no bg/border uses). #888B8D failed
	                                WCAG AA (~3.5:1); #53565A passes AAA (~7.5:1). */
	--hfh-black:         #000000;

	--hfh-habitat-blue:  #385988;
	--hfh-habitat-green: #43B02A;
	--hfh-orange:        #FF671F;
	--hfh-brick:         #A4343A;

	--hfh-light-gray:    #F5F5F5;
	--hfh-off-white:     #FAFAFA;
	--hfh-dark-text:     #1A1A1A;
	--hfh-body-text:     #333333;
	--hfh-blue-tint:     #E8F7FB;
	--hfh-green-tint:    #F5F9E0;

	--hfh-font-sans:  'Nunito', 'Arial', 'Helvetica Neue', sans-serif;
	--hfh-font-serif: 'DM Serif Display', 'Palatino', 'Georgia', serif;

	--hfh-section-pad: 100px;
	--hfh-radius:      16px;
	--hfh-radius-sm:   12px;
}

/* Apply Nunito as the default body font everywhere this theme runs. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px; /* offset for fixed header on anchor jumps */
}

/* === MATCH MOCKUP CONTAINER WIDTH ============================
   The static mockup uses a 1200px container; Divi defaults rows
   to 1080px. Widen rows inside our branded sections so cards
   render at the correct width. Skip the header — it uses its
   own 1400px max-width set earlier in this file. */
.et-l--body .et_pb_section:not(.hfh-header-section) > .et_pb_row {
	max-width: 1200px !important;
	width: 90% !important;
}
.et-l--footer .hfh-cta-banner > .et_pb_row,
.et-l--footer .hfh-affiliations > .et_pb_row,
.et-l--footer .hfh-footer > .et_pb_row {
	max-width: 1200px !important;
	width: 90% !important;
}

/* === 3-COLUMN CARD GRID OVERRIDES ============================
   Use CSS Grid for the card rows: naturally makes all cards in
   the same row equal height, with a tight 24px gap that matches
   the mockup (replacing Divi's wide column gutter). */
.et_pb_row:has(> .hfh-connection-card),
.et_pb_row:has(> .hfh-program-card),
.et_pb_row:has(> .hfh-value-card),
.et_pb_row:has(> .hfh-team-card) {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px !important;
}
.et_pb_row:has(> .hfh-future-card) {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px !important;
}
.et_pb_row:has(> .hfh-give-card) {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px !important;
}
.et_pb_row:has(> .hfh-connection-card) > .hfh-connection-card,
.et_pb_row:has(> .hfh-program-card) > .hfh-program-card,
.et_pb_row:has(> .hfh-value-card) > .hfh-value-card,
.et_pb_row:has(> .hfh-team-card) > .hfh-team-card,
.et_pb_row:has(> .hfh-future-card) > .hfh-future-card,
.et_pb_row:has(> .hfh-give-card) > .hfh-give-card {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
body,
body.et-db #et-boc {
	font-family: var(--hfh-font-sans);
	color: var(--hfh-body-text);
	line-height: 1.7;
	/* NOTE: no padding-top here. The fixed .hfh-header-section overlays
	   the top of the viewport, and each top section (hero, page-hero) handles
	   its own padding-top to push content below the header overlay. */
}


/* ====== 2. TYPOGRAPHY HELPERS ================================ */

/* Apply DM Serif Display to anything with this class — headings,
   feature numbers, etc. Use as a Divi CSS Class on H1/H2/H3 modules. */
.hfh-serif,
.hfh-serif * {
	font-family: var(--hfh-font-serif) !important;
}

.hfh-sans,
.hfh-sans * {
	font-family: var(--hfh-font-sans) !important;
}

/* Highlighted word in hero headline (green underline accent). */
.hfh-highlight {
	color: var(--hfh-bright-green);
	position: relative;
	display: inline-block;
}
.hfh-highlight::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 0; right: 0;
	height: 6px;
	background: var(--hfh-bright-green);
	border-radius: 3px;
	opacity: 0.4;
}


/* ====== 3. BUTTONS =========================================== */
/* Apply via Divi's Button module CSS Class. The ".hfh-btn" base
   produces the rounded pill, the variant classes set the colors. */

.hfh-btn,
.et_pb_button.hfh-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px !important;
	border-radius: 50px !important;
	font-family: var(--hfh-font-sans) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	border: none !important;
	transition: all 0.3s ease !important;
}
.et_pb_button.hfh-btn::after,
a.hfh-btn::after {
	display: none !important;
}

/* Primary button — used across most pages for "Sign Up", "Apply",
   "Complete an Inquiry", etc. Selectors include the plain anchor
   form so it works on hand-authored HTML links (not just Divi
   button modules). Same base shape from .hfh-btn above. */
.hfh-btn.hfh-btn-primary,
a.hfh-btn.hfh-btn-primary,
.et_pb_button.hfh-btn.hfh-btn-primary,
.et_pb_button.hfh-btn-primary {
	background: var(--hfh-bright-blue) !important;
	color: var(--hfh-white) !important;
	text-decoration: none !important;
}
.hfh-btn.hfh-btn-primary:hover,
a.hfh-btn.hfh-btn-primary:hover,
.et_pb_button.hfh-btn.hfh-btn-primary:hover,
.et_pb_button.hfh-btn-primary:hover {
	background: #0098BC !important;
	color: var(--hfh-white) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0,175,215,0.35);
}

.et_pb_button.hfh-btn-donate,
a.hfh-btn.hfh-btn-donate {
	background: var(--hfh-bright-blue) !important;
	color: var(--hfh-white) !important;
	text-decoration: none !important;
}
.et_pb_button.hfh-btn-donate:hover,
a.hfh-btn.hfh-btn-donate:hover {
	background: #0098BC !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0,175,215,0.35);
}

.et_pb_button.hfh-btn-secondary,
a.hfh-btn.hfh-btn-secondary {
	background: transparent !important;
	color: var(--hfh-dark-text) !important;
	border: 2px solid var(--hfh-dark-text) !important;
	text-decoration: none !important;
}
.et_pb_button.hfh-btn-secondary:hover,
a.hfh-btn.hfh-btn-secondary:hover {
	background: var(--hfh-dark-text) !important;
	color: var(--hfh-white) !important;
}

.et_pb_button.hfh-btn-white {
	background: var(--hfh-white) !important;
	color: var(--hfh-dark-text) !important;
}
.et_pb_button.hfh-btn-white:hover {
	background: var(--hfh-off-white) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.et_pb_button.hfh-btn-outline-white {
	background: transparent !important;
	color: var(--hfh-white) !important;
	border: 2px solid var(--hfh-white) !important;
}
.et_pb_button.hfh-btn-outline-white:hover {
	background: var(--hfh-white) !important;
	color: var(--hfh-dark-text) !important;
}

.et_pb_button.hfh-btn-green {
	background: var(--hfh-bright-green) !important;
	color: var(--hfh-dark-text) !important;
}
.et_pb_button.hfh-btn-green:hover {
	background: #b3c300 !important;
	transform: translateY(-1px);
}


/* ====== 4. SECTION LABELS & TITLES =========================== */

.hfh-section-label {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	color: var(--hfh-bright-blue) !important;
	margin-bottom: 16px !important;
}
.hfh-section-label::before {
	content: '';
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}
/* When the label class lands on the OUTER Divi text wrapper (instead of
   on the <p> directly), make sure the <p> inside picks up the same
   styling so it doesn't fall back to Divi's default 16px body type.
   Fixes the "What Drives Us" rendering as plain black 16px on About Us. */
.hfh-section-label > p,
.hfh-section-label .et_pb_text_inner > p,
.hfh-section-label .et_pb_text_inner p {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--hfh-bright-blue) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.hfh-section-label-light > p,
.hfh-section-label-light .et_pb_text_inner p {
	color: var(--hfh-bright-green) !important;
}

/* Variant for use on dark sections. */
.hfh-section-label-light {
	color: var(--hfh-bright-green) !important;
}

.hfh-section-title,
.hfh-section-title h1,
.hfh-section-title h2,
.hfh-section-title h3 {
	font-family: var(--hfh-font-serif) !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	line-height: 1.15 !important;
	font-size: clamp(32px, 4vw, 48px) !important;
	margin-bottom: 20px !important;
}

.hfh-section-subtitle {
	font-size: 18px !important;
	color: var(--hfh-gray) !important;
	max-width: 600px;
	line-height: 1.7 !important;
}


/* ====== 5. HERO SECTION ====================================== */
/* Apply .hfh-hero to the Section module that contains the hero.
   The arch and decorative house silhouettes are added via
   pseudo-elements — content inside the section remains a fully
   editable Divi layout (text, buttons, images, etc.). */

.hfh-hero {
	position: relative !important;
	overflow: visible !important;
	padding-bottom: 80px !important;
	background: linear-gradient(135deg, var(--hfh-habitat-blue) 0%, #2a4570 50%, #1e3455 100%) !important;
}

/* Soft radial overlays for visual depth. */
.hfh-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 80%, rgba(0,175,215,0.15) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 20%, rgba(196,214,0,0.10) 0%, transparent 50%);
	pointer-events: none;
	z-index: 1;
}

/* The white convex arch at the bottom of the hero. */
.hfh-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120%;
	height: 80px;
	background: var(--hfh-white);
	border-radius: 50% 50% 0 0;
	z-index: 5;
	pointer-events: none;
}

/* House silhouettes layered above the arch. */
.hfh-hero .hfh-hero-houses {
	position: absolute;
	bottom: 30px;
	left: 0; right: 0;
	height: 280px;
	z-index: 4;
	pointer-events: none;
	line-height: 0;
	overflow: hidden;
}
.hfh-hero .hfh-hero-houses svg {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1440px;
	height: 280px;
}

/* Hero text/image content sits above the decorative layers. */
.hfh-hero .et_pb_row { position: relative; z-index: 6; }

/* Hero headline styling. */
.hfh-hero h1,
.hfh-hero .et_pb_text_inner h1 {
	font-family: var(--hfh-font-serif) !important;
	color: var(--hfh-white) !important;
	line-height: 1.1 !important;
	font-size: clamp(40px, 5vw, 64px) !important;
}

/* Hero subtitle styling. */
.hfh-hero-subtitle {
	font-size: 20px !important;
	color: rgba(255,255,255,0.85) !important;
	line-height: 1.6 !important;
	max-width: 500px;
}

/* Section that follows the hero needs to overlap by 1px to
   prevent any subpixel seam. Apply .hfh-after-hero to the next
   section. */
.hfh-after-hero {
	position: relative;
	z-index: 2;
	margin-top: -1px !important;
}


/* Hero photo frame — wraps the hero photo on the right column. */
.hfh-hero-image-frame .et_pb_image_wrap,
.hfh-hero-image-frame {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4/3;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.1);
}
.hfh-hero-image-frame img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Floating accent shapes around the hero photo (matches mockup):
   - Top-right: green circle (80×80, opacity 0.6)
   - Bottom-left: blue rounded square, rotated 15° (60×60, opacity 0.5)
   Rendered via ::before / ::after on the column containing the image,
   so they overhang the image frame without needing extra Divi modules. */
.hfh-hero .et_pb_column:has(.hfh-hero-image-frame) {
	position: relative;
	overflow: visible !important; /* allow shapes to hang outside */
}
.hfh-hero .et_pb_column:has(.hfh-hero-image-frame)::before {
	content: '';
	position: absolute;
	top: -20px;
	right: -20px;
	width: 80px;
	height: 80px;
	background: var(--hfh-bright-green);
	border-radius: 50%;
	opacity: 0.6;
	z-index: 3;
	pointer-events: none;
}
.hfh-hero .et_pb_column:has(.hfh-hero-image-frame)::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: -15px;
	width: 60px;
	height: 60px;
	background: var(--hfh-bright-blue);
	border-radius: 12px;
	opacity: 0.5;
	transform: rotate(15deg);
	z-index: 3;
	pointer-events: none;
}

/* Legacy class-based shape selectors kept for backward compatibility
   if anyone adds them as Code modules separately. */
.hfh-hero-accent-1 {
	position: absolute;
	top: -20px; right: -20px;
	width: 80px; height: 80px;
	background: var(--hfh-bright-green);
	border-radius: 50%;
	opacity: 0.6;
	z-index: 3;
}
.hfh-hero-accent-2 {
	position: absolute;
	bottom: -15px; left: -15px;
	width: 60px; height: 60px;
	background: var(--hfh-bright-blue);
	border-radius: 12px;
	opacity: 0.5;
	transform: rotate(15deg);
	z-index: 3;
}

/* Hero buttons — line them up horizontally with proper spacing. */
.hfh-hero .et_pb_button_module_wrapper {
	display: inline-block;
	margin-right: 12px;
	margin-bottom: 12px;
}


/* ====== 6. CONNECTION CARDS ================================== */
/* Apply .hfh-connection-card to a Divi Blurb module (or column
   wrapping image + heading + text + button). */

.hfh-connection-card {
	background: var(--hfh-white);
	border-radius: var(--hfh-radius);
	overflow: hidden;
	border: 1px solid #EBEBEB;
	transition: all 0.3s ease;
	height: 100%;
	/* Make the card a flex column so children can grow to equalize
	   card heights across the row. */
	display: flex !important;
	flex-direction: column;
	align-self: stretch !important;
}
/* Last Text module inside a card absorbs any extra height so all
   cards in the row end up the same total height regardless of
   how much description text each has. */
.hfh-connection-card > .et_pb_text:last-child {
	flex: 1 1 auto;
}

/* Pin the "Explore Programs / See Opportunities / Give Today" link
   to the bottom of every card so they align horizontally across the
   row regardless of description length. */
.hfh-connection-card > .et_pb_text:last-child .et_pb_text_inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.hfh-connection-card > .et_pb_text:last-child .et_pb_text_inner > p:last-child {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	padding-top: 16px;
}
.hfh-connection-card:hover {
	border-color: var(--hfh-bright-blue);
	box-shadow: 0 8px 32px rgba(0,175,215,0.12);
	transform: translateY(-4px);
}
.hfh-connection-card .et_pb_main_blurb_image,
.hfh-connection-card .et_pb_image_wrap {
	display: block;
	margin: 0;
}
.hfh-connection-card .et_pb_main_blurb_image img,
.hfh-connection-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
.hfh-connection-card .et_pb_blurb_container,
.hfh-connection-card-body {
	padding: 28px;
}

/* Force connection card image to span the full card width edge-to-edge,
   override Divi's default 300px image module width + auto centering. */
.hfh-connection-card > .et_pb_image:first-child,
.hfh-connection-card > .et_pb_image:first-child .et_pb_image_wrap,
.hfh-connection-card > .et_pb_image:first-child .et_pb_image_wrap > * {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	display: block !important;
}
.hfh-connection-card > .et_pb_image:first-child img {
	width: 100% !important;
	max-width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
}

/* 4px accent bar at the bottom of the image (matches mockup
   .connection-card-img::after). Color comes from the accent class. */
.hfh-connection-card > .et_pb_image:first-child {
	position: relative;
}
.hfh-connection-card > .et_pb_image:first-child::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--hfh-bright-blue);
	z-index: 1;
	pointer-events: none;
}
.hfh-connection-card.hfh-accent-blue   > .et_pb_image:first-child::after { background: var(--hfh-bright-blue); }
.hfh-connection-card.hfh-accent-green  > .et_pb_image:first-child::after { background: var(--hfh-bright-green); }
.hfh-connection-card.hfh-accent-orange > .et_pb_image:first-child::after { background: var(--hfh-orange); }
.hfh-connection-card.hfh-accent-navy   > .et_pb_image:first-child::after { background: var(--hfh-habitat-blue); }
.hfh-connection-card.hfh-accent-brick  > .et_pb_image:first-child::after { background: var(--hfh-brick); }

/* Fallback for column-based cards (Image module + Text module(s) as
   separate children, not wrapped in a Blurb): give all non-image
   children inner horizontal padding + a consistent top/bottom rhythm. */
.hfh-connection-card > .et_pb_module:not(.et_pb_image) {
	padding-left: 28px !important;
	padding-right: 28px !important;
}
.hfh-connection-card > .et_pb_image + .et_pb_module {
	padding-top: 24px !important;
}
/* When the card has NO image (e.g., partner cards on donate page),
   give the first text module top padding so the icon doesn't sit
   flush against the card's top edge. */
.hfh-connection-card > .et_pb_module:first-child:not(.et_pb_image) {
	padding-top: 32px !important;
}
.hfh-connection-card > .et_pb_module:last-child {
	padding-bottom: 28px !important;
}
.hfh-connection-card > .et_pb_image {
	margin-bottom: 0 !important;
}
.hfh-connection-card > .et_pb_text {
	margin-bottom: 0 !important;
}
.hfh-connection-card h3,
.hfh-connection-card .et_pb_module_header {
	font-family: var(--hfh-font-serif) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 12px !important;
}
.hfh-connection-card p {
	font-size: 15px;
	color: var(--hfh-gray);
	line-height: 1.7;
	margin-bottom: 20px;
}

/* Color accent stripe at the bottom of the image — apply
   .hfh-accent-blue, .hfh-accent-green, or .hfh-accent-orange to
   the column to color-code each card. */
.hfh-connection-card.hfh-accent-blue   { box-shadow: inset 0 -4px 0 var(--hfh-bright-blue); }
.hfh-connection-card.hfh-accent-green  { box-shadow: inset 0 -4px 0 var(--hfh-bright-green); }
.hfh-connection-card.hfh-accent-orange { box-shadow: inset 0 -4px 0 var(--hfh-orange); }

/* The "card link" arrow text that appears at the bottom of each
   card. Apply via Divi text with class .hfh-card-link. */
.hfh-card-link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hfh-bright-blue) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	transition: gap 0.2s ease;
}
.hfh-card-link:hover { gap: 12px !important; }

/* Stacked card links — used when one connection card needs to surface
   multiple destinations (e.g., the Apply card listing all 3 programs).
   Each link gets a top border and flex spacing so the arrow tucks to
   the right edge, reading as a quick "menu" of options. */
.hfh-card-links-stack {
	display: flex !important;
	flex-direction: column;
	margin-top: 4px;
	border-top: 1px solid #EAEAEA;
}
.hfh-card-links-stack .hfh-card-link--stacked {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #EAEAEA;
	font-size: 13px !important;
	font-weight: 700 !important;
	/* Per Amanda 6/11 — these Explore links read as black; make them
	   blue by default (matching the arrow) so they clearly look like links. */
	color: var(--hfh-bright-blue) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	text-decoration: none !important;
	background-image: none !important;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.hfh-card-links-stack .hfh-card-link--stacked i {
	color: var(--hfh-bright-blue);
	font-size: 12px;
	transition: transform 0.2s ease;
}
.hfh-card-links-stack .hfh-card-link--stacked:hover {
	color: #0098BC !important;
	padding-left: 4px;
}
.hfh-card-links-stack .hfh-card-link--stacked:hover i {
	transform: translateX(4px);
}


/* ====== 7. PROGRAM CARDS ===================================== */
/* Apply .hfh-program-card to a column that has a background image.
   The overlay color is set per-card via accent classes. */

.hfh-program-card {
	position: relative !important;
	border-radius: var(--hfh-radius);
	overflow: hidden;
	aspect-ratio: 4/3;
	cursor: pointer;
	transition: all 0.4s ease;
	color: var(--hfh-white);
	background: var(--hfh-bright-blue); /* fallback when no bg image */
}
.hfh-program-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

/* Solid backgrounds per accent (used when no bg image is set; the mockup
   uses photos but our content uses solid colors until photos are added) */
.hfh-program-card.hfh-accent-blue   { background: var(--hfh-bright-blue); }
.hfh-program-card.hfh-accent-green  { background: var(--hfh-habitat-green); }
.hfh-program-card.hfh-accent-navy   { background: var(--hfh-habitat-blue); }
.hfh-program-card.hfh-accent-orange { background: var(--hfh-orange); }
.hfh-program-card.hfh-accent-brick  { background: var(--hfh-brick); }

/* Tinted overlay only renders when the column has a background image set
   (Divi adds .et_pb_with_background when that's the case) */
.hfh-program-card.et_pb_with_background::before {
	content: '';
	position: absolute;
	inset: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}
.hfh-program-card.hfh-accent-blue.et_pb_with_background::before   { background: rgba(0,175,215,0.82); }
.hfh-program-card.hfh-accent-green.et_pb_with_background::before  { background: rgba(67,176,42,0.82); }
.hfh-program-card.hfh-accent-navy.et_pb_with_background::before   { background: rgba(56,89,136,0.82); }
.hfh-program-card.hfh-accent-orange.et_pb_with_background::before { background: rgba(255,103,31,0.82); }
.hfh-program-card.hfh-accent-brick.et_pb_with_background::before  { background: rgba(164,52,58,0.82); }
.hfh-program-card:hover::before { opacity: 0.92; }

.hfh-program-card > * { position: relative; z-index: 2; }

/* Single-Text-module pattern (icon + h3 + p in one HTML block).
   Layout strategy: the inline content div already carries 32px padding,
   so we zero out the outer Divi padding (was 28px, which compounded to
   60px total). Then we flex-stretch the chain so the inner div fills the
   card, and use `margin-top: auto` on the heading to PUSH the h3+p block
   to the bottom while the icon stays anchored at the top. This keeps
   icon position consistent across cards regardless of body-text length —
   previously, longer body text made the whole flex-end block float UP
   and the icon would sit higher in cards 1 and 3 vs card 2. */
.hfh-program-card > .et_pb_text {
	height: 100%;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column;
	margin-bottom: 0 !important;
}
.hfh-program-card > .et_pb_text > .et_pb_text_inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.hfh-program-card > .et_pb_text > .et_pb_text_inner > div {
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column;
}
.hfh-program-card > .et_pb_text > .et_pb_text_inner > div > h3 {
	margin-top: auto !important;
}
.hfh-program-card i[class*="fa-"] {
	font-size: 36px !important;
	margin-bottom: 12px;
	color: var(--hfh-white);
	line-height: 1;
}

.hfh-program-card h3,
.hfh-program-card .et_pb_module_header {
	color: var(--hfh-white) !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px !important;
}
.hfh-program-card p,
.hfh-program-card .et_pb_blurb_description {
	color: rgba(255,255,255,0.92) !important;
	font-size: 14px;
	line-height: 1.6;
}


/* ====== 8. RESTORE SECTION =================================== */
/* The ReStore section is a 2-col row (image + content). The
   content side uses a stack of Blurb modules with these helper
   classes applied to each highlight. */

.hfh-restore-image {
	border-radius: var(--hfh-radius);
	overflow: hidden;
}
.hfh-restore-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback for the ReStore section image when .hfh-restore-image class
   isn't applied — target any image inside a column that contains
   .hfh-restore-highlight (the highlight blocks live in the OTHER column
   of the 2-col layout, so this targets the image-side column). */
.et_pb_row:has(.hfh-restore-highlight) > .et_pb_column:not(:has(.hfh-restore-highlight)) > .et_pb_image,
.et_pb_row:has(.hfh-restore-highlight) > .et_pb_column:not(:has(.hfh-restore-highlight)) > .et_pb_image .et_pb_image_wrap,
.et_pb_row:has(.hfh-restore-highlight) > .et_pb_column:not(:has(.hfh-restore-highlight)) > .et_pb_image img {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.et_pb_row:has(.hfh-restore-highlight) > .et_pb_column:not(:has(.hfh-restore-highlight)) > .et_pb_image img {
	border-radius: 20px !important;
	height: 100% !important;
	min-height: 400px;
	object-fit: cover !important;
	display: block;
}

.hfh-restore-highlight .et_pb_blurb_content,
.hfh-restore-highlight {
	display: flex !important;
	gap: 16px;
	align-items: flex-start;
}

/* ReStore right column may hold: Section Header (label/title/subtitle) +
   4 highlights + 2 CTA buttons. Lay them out as: header full-width,
   highlights as a 2x2 grid, buttons side-by-side underneath. */
.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 24px !important;
	align-content: flex-start !important;
}

/* Section header items (NO highlight inside) → full width */
.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) > .et_pb_text:not(:has(.hfh-restore-highlight)) {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* Highlight items → 2x2 grid (50% width each) */
.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) > .et_pb_text:has(.hfh-restore-highlight) {
	flex: 0 0 calc(50% - 12px) !important;
	max-width: calc(50% - 12px) !important;
	margin: 0 !important;
}

/* CTA buttons (Divi wraps them in .et_pb_button_module_wrapper) → auto-size
   to text content, sit side-by-side with a gap; wrap to next line if needed. */
.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) > .et_pb_button_module_wrapper,
.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) > .et_pb_button {
	flex: 0 0 auto !important;
	max-width: 100% !important;
	margin: 16px 0 0 !important;
}

/* Button-row code module (.hfh-restore-cta-row) is a single flex item that
   spans the full width of the ReStore right column, regardless of how many
   highlights sit above it. This prevents the previous bug where a lone
   button module would auto-fill an empty cell left over from an odd
   number of highlights (e.g., 3 highlights = empty grid slot that
   absorbed the Visit button). */
.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) > .et_pb_code:has(.hfh-restore-cta-row) {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	margin: 16px 0 0 !important;
}
.hfh-restore-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

@media (max-width: 768px) {
	.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) > .et_pb_text:has(.hfh-restore-highlight),
	.et_pb_column:has(> .et_pb_text > .et_pb_text_inner > .hfh-restore-highlight) > .et_pb_button_module_wrapper {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	.hfh-restore-cta-row { flex-direction: column; align-items: stretch; }
	.hfh-restore-cta-row .hfh-btn { width: 100%; }
}
.hfh-restore-highlight .et_pb_main_blurb_image {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--hfh-radius-sm);
	background: var(--hfh-bright-blue);
	color: var(--hfh-white);
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.hfh-restore-highlight.hfh-accent-blue   .et_pb_main_blurb_image { background: var(--hfh-bright-blue); }
.hfh-restore-highlight.hfh-accent-green  .et_pb_main_blurb_image { background: var(--hfh-habitat-green); }
.hfh-restore-highlight.hfh-accent-orange .et_pb_main_blurb_image { background: var(--hfh-orange); }

.hfh-restore-highlight h4,
.hfh-restore-highlight .et_pb_module_header {
	font-family: var(--hfh-font-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 4px !important;
}
.hfh-restore-highlight p {
	font-size: 14px;
	color: var(--hfh-gray);
	line-height: 1.6;
}


/* Restore highlight inner divs (when built as raw HTML in a Text module
   instead of a Blurb module — supports both structures). */
.hfh-restore-highlight-icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: var(--hfh-radius-sm);
	background: var(--hfh-bright-blue);
	color: var(--hfh-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.hfh-restore-highlight.hfh-accent-blue   .hfh-restore-highlight-icon { background: var(--hfh-bright-blue); }
.hfh-restore-highlight.hfh-accent-green  .hfh-restore-highlight-icon { background: var(--hfh-habitat-green); }
.hfh-restore-highlight.hfh-accent-orange .hfh-restore-highlight-icon { background: var(--hfh-orange); }

.hfh-restore-highlight-text h4 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 4px !important;
}
.hfh-restore-highlight-text p {
	font-size: 14px;
	color: var(--hfh-gray);
	line-height: 1.6;
	margin: 0;
}
/* When restore highlight is rendered inside a Divi Text module, that
   Text module wraps everything in .et_pb_text_inner — make sure flex
   layout still works. */
.et_pb_text_inner > .hfh-restore-highlight {
	margin-bottom: 24px;
}


/* ====== 9. IMPACT STATS ====================================== */
/* Apply .hfh-impact to the section. Use Divi Number Counter or
   Text modules with .hfh-stat for each stat. */

.hfh-impact {
	background: var(--hfh-habitat-blue) !important;
	color: var(--hfh-white);
	position: relative;
	overflow: hidden;
}
.hfh-impact::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 0% 100%, rgba(0,175,215,0.20) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 0%, rgba(196,214,0,0.10) 0%, transparent 50%);
	pointer-events: none;
}
.hfh-impact > .et_pb_row { position: relative; z-index: 1; }

.hfh-impact .hfh-section-title,
.hfh-impact .hfh-section-title * {
	color: var(--hfh-white) !important;
}
.hfh-impact .hfh-section-subtitle {
	color: rgba(255,255,255,0.75) !important;
}

.hfh-stat-number,
.hfh-stat-number .et_pb_number_counter,
.hfh-stat-number .et_pb_text_inner {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(40px, 5vw, 56px) !important;
	font-weight: 700 !important;
	color: var(--hfh-bright-green) !important;
	line-height: 1 !important;
}
.hfh-stat-label {
	font-size: 15px !important;
	color: rgba(255,255,255,0.85) !important;
	font-weight: 500 !important;
}


/* ====== 10. TESTIMONIAL ====================================== */

.hfh-testimonial blockquote,
.hfh-testimonial .et_pb_testimonial_description_inner,
.hfh-testimonial p {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(22px, 3vw, 30px) !important;
	font-weight: 400 !important;
	color: var(--hfh-dark-text) !important;
	line-height: 1.5 !important;
	font-style: italic;
}

.hfh-testimonial::before {
	content: '\201C';
	font-family: var(--hfh-font-serif);
	font-size: 120px;
	color: var(--hfh-bright-blue);
	opacity: 0.15;
	display: block;
	text-align: center;
	line-height: 0.8;
	margin-bottom: -40px;
	position: relative;
	z-index: 0;
}


/* Testimonial inner layout — quote on top, attribution row below. */
.hfh-testimonial-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.hfh-testimonial-inner blockquote {
	margin-bottom: 32px;
	position: relative;
	z-index: 1;
}
.hfh-testimonial-author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.hfh-testimonial-avatar {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--hfh-blue-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hfh-bright-blue);
	font-size: 20px;
	flex-shrink: 0;
}
.hfh-testimonial-author-info {
	text-align: left;
	font-style: normal;
}
.hfh-testimonial-author-info strong {
	display: block;
	font-family: var(--hfh-font-sans) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	color: var(--hfh-dark-text) !important;
}
.hfh-testimonial-author-info span {
	font-family: var(--hfh-font-sans) !important;
	font-size: 14px !important;
	font-style: normal !important;
	color: var(--hfh-gray) !important;
}


/* ====== 11. LATEST NEWS GRID ================================= */
/* Apply .hfh-blog-grid to a Divi Blog module to get the
   "1 large featured + 2 smaller" magazine-style layout. */

.hfh-blog-grid .et_pb_posts,
.hfh-blog-grid .et_pb_blog_grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.hfh-blog-grid article {
	background: var(--hfh-white);
	border-radius: var(--hfh-radius);
	overflow: hidden;
	border: 1px solid #EBEBEB;
	transition: all 0.3s ease;
	margin: 0 !important;
}
.hfh-blog-grid article:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* First post becomes the featured (full-height) item. */
.hfh-blog-grid article:first-child {
	grid-row: span 2;
}

.hfh-blog-grid article .entry-featured-image-url img,
.hfh-blog-grid article .entry-featured-image-url {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
}
.hfh-blog-grid article:not(:first-child) .entry-featured-image-url img {
	height: 180px;
}

.hfh-blog-grid .entry-title,
.hfh-blog-grid h2,
.hfh-blog-grid h3 {
	font-family: var(--hfh-font-serif) !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text);
	line-height: 1.3 !important;
}
.hfh-blog-grid article:first-child .entry-title { font-size: 26px !important; }
.hfh-blog-grid article:not(:first-child) .entry-title { font-size: 18px !important; }

.hfh-blog-grid .post-meta,
.hfh-blog-grid .post-meta a {
	font-size: 13px;
	color: var(--hfh-gray);
}
.hfh-blog-grid .post-meta .et_pb_post_meta_category {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
}


/* Latest News header — section label + title left, View All button right. */
.hfh-news-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 48px;
	gap: 24px;
	flex-wrap: wrap;
}
.hfh-news-header > div { flex: 1; }
.hfh-news-header .hfh-section-label { margin-bottom: 12px; }
.hfh-news-header .hfh-section-title { margin: 0 !important; }
.hfh-news-header .hfh-btn { white-space: nowrap; }

/* News card — rendered via Code module (no wpautop) using the overlay-link
   pattern. .hfh-news-card is the Divi module wrapper; .hfh-news-card-inner
   is the actual <article>. Only one border, one border-radius — the entire
   card surface is clickable thanks to .hfh-news-card-link::after stretching
   across the parent <article>. */
.hfh-news-card .hfh-news-card-inner,
.hfh-news-card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--hfh-white);
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #EBEBEB;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	height: 100%;
}
.hfh-news-card-inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
	border-color: var(--hfh-bright-blue);
}
.hfh-news-card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.hfh-news-card-body {
	padding: 24px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.hfh-news-card-title {
	font-family: var(--hfh-font-serif) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 12px 0 !important;
	line-height: 1.3;
}
.hfh-news-card-title .hfh-news-card-link {
	color: inherit;
	text-decoration: none;
	background-image: none;
}
.hfh-news-card-title .hfh-news-card-link:hover { color: var(--hfh-bright-blue); }
/* Overlay link — makes the entire card clickable while keeping the
   semantic <a> anchored to the title (good for screen readers + SEO). */
.hfh-news-card-title .hfh-news-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hfh-news-card-excerpt {
	font-size: 14px;
	color: var(--hfh-gray);
	line-height: 1.7;
	margin: 0 0 16px 0 !important;
}
.hfh-news-card-readmore { margin: auto 0 0 0 !important; }

/* Featured (large) news card — bigger heading, bigger image. */
.hfh-news-featured { height: 100%; }
.hfh-news-featured .hfh-news-card,
.hfh-news-featured .hfh-news-card-inner { height: 100%; }
.hfh-news-featured .hfh-news-card-title { font-size: 26px !important; margin-bottom: 14px !important; }
.hfh-news-featured .hfh-news-card-image { height: 280px; aspect-ratio: auto; }

/* Stack of two small news cards in the right column. */
.hfh-news-small-stack > .et_pb_module {
	margin-bottom: 24px !important;
}
.hfh-news-small-stack > .et_pb_module:last-child { margin-bottom: 0 !important; }

/* News meta row (category pill + date). */
.hfh-news-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--hfh-gray);
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.hfh-news-date { color: #888; }
.hfh-news-category {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
}


/* ====== 12. CTA BANNER ======================================= */

.hfh-cta-banner {
	background: linear-gradient(135deg, var(--hfh-habitat-blue) 0%, #2a5580 40%, var(--hfh-bright-blue) 100%) !important;
	position: relative;
	overflow: hidden;
}
.hfh-cta-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 80% 50%, rgba(196,214,0,0.15) 0%, transparent 60%);
	pointer-events: none;
}
.hfh-cta-banner > .et_pb_row { position: relative; z-index: 1; }

.hfh-cta-banner h2,
.hfh-cta-banner .et_pb_text_inner h2 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(28px, 3.5vw, 40px) !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	line-height: 1.2 !important;
}
.hfh-cta-banner p,
.hfh-cta-banner .et_pb_text_inner p {
	font-size: 18px;
	color: rgba(255,255,255,0.85) !important;
}


/* ====== 13. AFFILIATIONS STRIP =============================== */

.hfh-affiliations {
	background: var(--hfh-white);
	border-top: 1px solid #EBEBEB;
}
.hfh-affiliations-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--hfh-gray);
	text-align: center;
	margin-bottom: 28px;
}
.hfh-affiliation img {
	max-height: 48px;
	width: auto;
	opacity: 0.6;
	transition: opacity 0.3s ease;
	filter: grayscale(0.3);
}
.hfh-affiliation:hover img {
	opacity: 1;
	filter: grayscale(0);
}


/* ====== 14. FOOTER =========================================== */

.hfh-footer {
	background: var(--hfh-dark-text) !important;
	color: rgba(255,255,255,0.7);
}
.hfh-footer * { color: rgba(255,255,255,0.7); }
.hfh-footer a { color: rgba(255,255,255,0.6); transition: color 0.2s ease, padding-left 0.2s ease; }
.hfh-footer a:hover { color: var(--hfh-bright-blue); }

.hfh-footer h4,
.hfh-footer .et_pb_widget_area h4 {
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hfh-white) !important;
	margin-bottom: 20px !important;
	padding-bottom: 12px;
	border-bottom: 2px solid rgba(0,175,215,0.3);
	display: inline-block;
}

.hfh-footer-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6) !important;
	font-size: 16px;
	margin-right: 8px;
	transition: all 0.3s ease;
}
.hfh-footer-social a:hover {
	background: var(--hfh-bright-blue);
	color: var(--hfh-white) !important;
}

/* Code-module social icons (.hfh-footer-social-list) — used in the
   footer brand column because Divi 5's native social-media-follow-network
   module ignores linkUrl and renders all icons with href="#". We emit
   raw HTML matching Divi's standard social-icon DOM (.et-social-X with
   <a class="icon">) so the existing Divi social-icon glyph CSS still
   applies. Hide the <span> label so only the icon glyph shows. */
.hfh-footer-social-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	gap: 10px;
	align-items: center;
}
.hfh-footer-social-list .et_pb_social_media_follow_network {
	margin: 0 !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border-radius: 50%;
	overflow: hidden;
}
.hfh-footer-social-list .et_pb_social_media_follow_network a.icon {
	width: 40px;
	height: 40px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7) !important;
	background: transparent !important;
	transition: background 0.3s ease, color 0.3s ease;
}
.hfh-footer-social-list .et_pb_social_media_follow_network a.icon:hover {
	background: var(--hfh-bright-blue) !important;
	color: #FFFFFF !important;
}
.hfh-footer-social-list .et_pb_social_media_follow_network a.icon span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Equal Housing pledge — sits between the footer columns above and
   the copyright row below. Symmetric padding (32px top/bottom inside
   the pledge block) plus a single subtle top border for separation
   from the menus above. The copyright row below has no top border,
   so the only visible separator in this region is the pledge's
   top border — keeping the bottom of the footer clean. */
.hfh-equal-housing {
	margin: 0;
	padding: 32px 0;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: center;
}
.hfh-equal-housing-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Real Equal Housing Opportunity logo is official black line-art; on the
	   dark footer it needs a white chip to be visible (Amanda 7/10). */
	background: #ffffff;
	border-radius: 6px;
	padding: 7px;
}
.hfh-equal-housing-icon img {
	height: 46px;
	width: auto;
	display: block;
}
.hfh-equal-housing p {
	font-size: 11px;
	line-height: 1.6;
	color: rgba(255,255,255,0.4);
	max-width: 700px;
	margin: 0;
}

/* Footer bottom row — copyright on the left, credits on the right,
   on a single line. Force the Divi-generated 1_2 columns to flex
   horizontally with proper alignment (left/right) and centered on
   the cross-axis. Override Divi's responsive default that stacks
   columns below 980px so the line stays intact at all desktop
   widths; we only stack on actual mobile (≤600px) below. */
.hfh-footer-bottom {
	font-size: 13px;
	color: rgba(255,255,255,0.5);
	display: flex !important;
	justify-content: space-between !important;
	align-items: center;
	/* No flex `gap` — it was leaving an unexplained 24px of space to
	   the right of the last column, pushing the credits link inward
	   from the row's right edge. Spacing between columns is handled
	   naturally by space-between distributing the remaining width. */
}
.hfh-footer-bottom > .et_pb_column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important; /* Divi defaults columns to float:left — override */
}
.hfh-footer-bottom > .et_pb_column:first-child {
	text-align: left;
	flex: 0 0 auto;
	margin-right: 24px !important; /* Visual gap between cols, replaces removed flex gap */
}
.hfh-footer-bottom > .et_pb_column:last-child {
	text-align: right;
	flex: 0 0 auto;
	margin-left: auto !important; /* Push to row's right edge */
	margin-right: 0 !important;
}
.hfh-footer-bottom > .et_pb_column > .et_pb_module {
	margin-bottom: 0 !important;
}
.hfh-footer-bottom p {
	font-size: 13px !important;
	margin: 0 !important;
	color: rgba(255,255,255,0.5) !important;
	line-height: 1.5;
}
/* Per Amanda 5/19 — site-wide 501(c)(3) notice sits on its own
   centered row BELOW the copyright/credits row so it doesn't push the
   right column out of horizontal alignment with the copyright line. */
.hfh-footer-501c3-row {
	margin-top: 12px !important;
	padding: 12px 0 0 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hfh-footer-501c3-row .hfh-footer-501c3 {
	margin: 0 auto !important;
	/* Match the footer tagline ("Building Homes, Communities, and Hope
	   since 1987…") at 14px per Amanda — was 12px. Global (footer). */
	font-size: 14px !important;
	color: rgba(255, 255, 255, 0.45) !important;
	max-width: 880px;
	line-height: 1.7;
	text-align: center;
}
.hfh-footer-501c3-row .hfh-footer-501c3 strong {
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}

/* Override Divi's default row padding (~26px top/bottom) inside the
   footer bottom section — it was stacking with the section padding to
   create a 100+px gap between the Equal Housing pledge and the
   copyright line. Per Amanda 5/19. */
.hfh-footer-bottom,
.hfh-footer-501c3-row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.hfh-footer-501c3-row {
	padding-top: 12px !important; /* re-apply the spacer above the 501c3 line */
}
.hfh-footer-bottom p[style*="text-align:right"],
.hfh-footer-bottom .et_pb_column:last-child p {
	text-align: right !important;
}
/* Only stack on real mobile, not at Divi's default 980px breakpoint */
@media (max-width: 600px) {
	.hfh-footer-bottom {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	/* Center the copyright + "Created by Dannelly Design" credits line on
	   mobile so it matches the centered 501(c)(3) / Equal-Housing lines
	   above it. The base rule (and the module's inline style) right-align
	   the credits for desktop; override both — with the inline style — when
	   stacked. */
	.hfh-footer-bottom > .et_pb_column,
	.hfh-footer-bottom > .et_pb_column:last-child,
	.hfh-footer-bottom .et_pb_column p,
	.hfh-footer-bottom .et_pb_column:last-child p,
	.hfh-footer-bottom .et_pb_column:last-child p[style] {
		text-align: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Footer logo (tighter than header) */
.hfh-footer-brand .hfh-footer-logo,
.hfh-footer .hfh-footer-logo .et_pb_image_wrap img,
.hfh-footer .hfh-footer-logo img {
	max-height: 50px !important;
	width: auto !important;
}
.hfh-footer-brand p {
	font-size: 14px !important;
	line-height: 1.7;
	margin-bottom: 16px;
}

/* Footer menu modules (Divi Menu module rendering inside footer columns).
   Matches the original mockup's .footer-col ul li styling exactly:
   each item is a vertical block with 10px gap between siblings, 14px
   text, soft-white color, hover slides 4px right and turns brand blue.

   We have to fight Divi's defaults aggressively:
   - .et-menu li { display: inline-block; padding-right: 22px; }
   - .et-menu li > a { padding-bottom: 29px; }
   - .nav li { line-height: 1em; }
   So every property below uses !important to ensure it wins. */
.hfh-footer-menu {
	background: transparent !important;
}
.hfh-footer-menu .et_pb_menu_inner_container,
.hfh-footer-menu .et_pb_menu__menu,
.hfh-footer-menu .et_pb_menu__wrap {
	background: transparent !important;
	justify-content: flex-start !important;
}
.hfh-footer-menu nav.et-menu-nav,
.hfh-footer-menu .et_pb_menu .nav,
.hfh-footer-menu nav > ul {
	display: block !important;
	text-align: left !important;
	width: 100%;
}
.hfh-footer-menu nav > ul > li,
.hfh-footer-menu .et_pb_menu .nav > li,
.hfh-footer-menu .et-menu > li {
	display: block !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
.hfh-footer-menu nav > ul > li:last-child,
.hfh-footer-menu .et_pb_menu .nav > li:last-child,
.hfh-footer-menu .et-menu > li:last-child {
	margin-bottom: 0 !important;
}
.hfh-footer-menu nav > ul > li > a,
.hfh-footer-menu .et_pb_menu .nav > li > a,
.hfh-footer-menu .et-menu > li > a {
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: rgba(255,255,255,0.6) !important;
	padding: 0 !important;
	font-weight: 400 !important;
	opacity: 1 !important;
	white-space: nowrap !important;   /* prevent multi-word items from wrapping mid-link */
	transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.hfh-footer-menu nav > ul > li > a:hover,
.hfh-footer-menu .et_pb_menu .nav > li > a:hover,
.hfh-footer-menu .et-menu > li > a:hover {
	color: var(--hfh-bright-blue) !important;
	padding-left: 4px !important;
}


/* ====== 15. PAGE HERO (internal pages) ======================= */

.hfh-page-hero {
	background: var(--hfh-habitat-blue) !important;
	color: var(--hfh-white);
	/* 100px = fixed header overlay, +75px visible breathing room above content
	   = 175px total top padding. Bottom: 75px below content. */
	padding: 175px 0 75px !important;
}
.hfh-page-hero .breadcrumb,
.hfh-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255,255,255,0.5);
	margin-bottom: 20px;
}
.hfh-breadcrumb a { color: rgba(255,255,255,0.5); }
.hfh-breadcrumb a:hover { color: var(--hfh-bright-green); }

.hfh-page-hero h1 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(36px, 5vw, 56px) !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	line-height: 1.15 !important;
	margin-bottom: 16px !important;
	padding: 0 !important;
}
.hfh-page-hero .hfh-page-intro,
.hfh-page-hero p {
	font-size: 18px;
	color: rgba(255,255,255,0.75);
	max-width: 640px;
	line-height: 1.7;
}


/* ====== 15b. PAGE INTRO SECTION (optional, below the hero) =====
   A short blurb section that can sit right below .hfh-page-hero
   when a page needs additional intro context that doesn't fit in
   the hero. Currently used on the ReStore page for the extended
   "what is the ReStore" paragraph. */

.hfh-page-intro-section {
	background: var(--hfh-white) !important;
}
.hfh-page-intro-section .et_pb_row {
	max-width: 900px !important;
}
.hfh-page-intro-text {
	text-align: center !important;
}
.hfh-page-intro-text p {
	font-size: 20px !important;
	line-height: 1.7 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 auto !important;
	max-width: 760px !important;
}


/* ====== 16. VALUES CARDS ===================================== */

.hfh-value-card {
	background: var(--hfh-white) !important;
	border-radius: var(--hfh-radius);
	padding: 36px !important;
	border: 1px solid #EBEBEB;
	height: 100%;
	cursor: default;
}
/* Per Amanda 5/19 — these cards have no destination, so the "lift +
   blue border" hover (which signaled clickability) was removed. The icon
   gets a subtle scale-up to keep some life without implying a missing
   link. The card itself stays completely static. */
.hfh-value-card .hfh-value-icon,
.hfh-value-card .et_pb_main_blurb_image {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hfh-value-card:hover .hfh-value-icon,
.hfh-value-card:hover .et_pb_main_blurb_image {
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.hfh-value-card .et_pb_main_blurb_image {
	width: 56px;
	height: 56px;
	border-radius: var(--hfh-radius-sm);
	background: var(--hfh-bright-blue);
	color: var(--hfh-white);
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 20px !important;
}
.hfh-value-card.hfh-accent-blue   .et_pb_main_blurb_image { background: var(--hfh-bright-blue); }
.hfh-value-card.hfh-accent-green  .et_pb_main_blurb_image { background: var(--hfh-habitat-green); }
.hfh-value-card.hfh-accent-orange .et_pb_main_blurb_image { background: var(--hfh-orange); }
.hfh-value-card.hfh-accent-brick  .et_pb_main_blurb_image { background: var(--hfh-brick); }

/* Inline-HTML pattern (when value card is built with a single Text module
   containing <div class="hfh-value-icon"><i class="fa-..."></i></div>) */
.hfh-value-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--hfh-radius-sm);
	background: var(--hfh-bright-blue);
	color: var(--hfh-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 20px;
}
.hfh-value-card.hfh-accent-blue   .hfh-value-icon { background: var(--hfh-bright-blue); }
.hfh-value-card.hfh-accent-green  .hfh-value-icon { background: var(--hfh-habitat-green); }
.hfh-value-card.hfh-accent-orange .hfh-value-icon { background: var(--hfh-orange); }
.hfh-value-card.hfh-accent-brick  .hfh-value-icon { background: var(--hfh-brick); }

.hfh-value-card h3,
.hfh-value-card .et_pb_module_header {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 12px !important;
}
.hfh-value-card p {
	font-size: 15px;
	color: var(--hfh-gray);
	line-height: 1.7;
}


/* ====== 17. HISTORY TIMELINE ================================= */
/* Structure:
   <section class="hfh-timeline">
     <div class="hfh-timeline-item">
       <div class="hfh-timeline-img"><img></div>
       <div class="hfh-timeline-dot"><i></i></div>
       <div class="hfh-timeline-year">1987</div>
       <h3>...</h3>
       <p>...</p>
     </div>
   </section>
*/

.hfh-timeline {
	position: relative;
	max-width: 900px;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Force the Divi text wrapper around the timeline to behave as a block
   so margin auto can center the timeline inside it. Without this, the
   parent's flex/display can prevent horizontal centering and the
   timeline sticks flush-left with the connecting line floating to the
   right of the content. */
.hfh-history .et_pb_text:has(> .et_pb_text_inner > .hfh-timeline),
.hfh-history .et_pb_text:has(> .et_pb_text_inner > .hfh-timeline) > .et_pb_text_inner {
	display: block !important;
	text-align: center;
}
.hfh-history .et_pb_text:has(> .et_pb_text_inner > .hfh-timeline) .hfh-timeline {
	text-align: left;
}

/* About Us — center the "People Behind the Mission" + "Meet Our Team"
   section heading (per Amanda 5/19 — the Team section pulls visually to
   the middle of the page so the heading reads better centered). */
.hfh-team .hfh-section-label,
.hfh-team .hfh-section-title {
	text-align: center !important;
	display: flex !important;
	justify-content: center;
	width: 100%;
}
.hfh-team .hfh-section-label {
	margin-left: auto !important;
	margin-right: auto !important;
}
.hfh-timeline::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: 230px;
	width: 3px;
	background: linear-gradient(to bottom, var(--hfh-bright-blue), var(--hfh-habitat-green), var(--hfh-bright-green));
	border-radius: 2px;
}
.hfh-timeline-item {
	position: relative;
	padding-left: 280px;
	padding-bottom: 56px;
	min-height: 180px;
}
.hfh-timeline-item:last-child { padding-bottom: 0; }

.hfh-timeline-dot {
	position: absolute;
	left: 218px;
	top: 4px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--hfh-white);
	border: 3px solid var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hfh-timeline-dot i { font-size: 10px; color: var(--hfh-bright-blue); }

.hfh-timeline-img {
	position: absolute;
	left: 0; top: 0;
	width: 200px;
	border-radius: var(--hfh-radius-sm);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--hfh-light-gray);
}
.hfh-timeline-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hfh-timeline-year {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hfh-bright-blue);
	margin-bottom: 6px;
}
.hfh-timeline-item h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 8px !important;
}
.hfh-timeline-item p {
	font-size: 15px;
	color: var(--hfh-gray);
	line-height: 1.7;
}


/* ====== 18. TEAM GRID ======================================== */

/* Section labels with inline text-align:center on them (e.g., the
   "Board of Directors" and "Staff Leadership" sub-labels inside the
   team section) should center the bar+text on the page, not sit
   left-aligned. */
.hfh-section-label[style*="center"] {
	display: flex !important;
	justify-content: center;
}

/* Team grid (inline HTML pattern). Use flexbox so orphaned cards in
   the last row (e.g., 15 board members in a 4-col layout = 3 orphans)
   center themselves instead of clinging to the left edge. */
.hfh-team-grid {
	display: flex !important;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	text-align: left;
}
.hfh-team-grid > .hfh-team-card {
	flex: 0 0 calc((100% - 72px) / 4); /* 4 cols, 3 gaps × 24px = 72px */
	max-width: calc((100% - 72px) / 4);
}
@media (max-width: 1024px) {
	.hfh-team-grid > .hfh-team-card {
		flex-basis: calc((100% - 48px) / 3); /* 3 cols */
		max-width: calc((100% - 48px) / 3);
	}
}
@media (max-width: 768px) {
	.hfh-team-grid > .hfh-team-card {
		flex-basis: calc((100% - 24px) / 2); /* 2 cols */
		max-width: calc((100% - 24px) / 2);
	}
}
@media (max-width: 480px) {
	.hfh-team-grid > .hfh-team-card {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.hfh-team-card {
	background: var(--hfh-white) !important;
	border-radius: var(--hfh-radius);
	overflow: hidden;
	border: 1px solid #EBEBEB;
	transition: all 0.3s ease;
	text-align: center;
	height: 100%;
}

/* Team card photo placeholder (when no real photo image; matches mockup
   icon placeholder block) */
.hfh-team-card-photo {
	height: 200px;
	background: var(--hfh-light-gray);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hfh-gray);
	font-size: 56px;
}
.hfh-team-card-photo i {
	font-size: 56px;
	color: rgba(0,0,0,0.18);
}
.hfh-team-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.hfh-team-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
.hfh-team-card .et_pb_team_member_description,
.hfh-team-card-info {
	padding: 24px 20px;
}
.hfh-team-card h3,
.hfh-team-card .et_pb_module_header {
	font-family: var(--hfh-font-serif) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 4px !important;
}
.hfh-team-card .role,
.hfh-team-card .et_pb_member_position {
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hfh-bright-blue) !important;
	display: block;
	margin-top: 4px;
}

/* Board member affiliation (company / organization) — small line under role */
.hfh-team-card .affiliation {
	font-size: 12px;
	font-weight: 500;
	color: var(--hfh-gray);
	display: block;
	margin-top: 6px;
	line-height: 1.4;
	padding: 0 8px;
}

/* Vision sub-block inside Mission section — styled to MATCH the
   "Our Mission" title + body paragraph (same serif size, same body
   prose size and line-height). */
.hfh-vision-block {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #EBEBEB;
}
.hfh-vision-block h3 {
	font-family: var(--hfh-font-serif) !important;
	font-weight: 700 !important;
	font-size: clamp(32px, 4vw, 48px) !important;
	color: var(--hfh-dark-text) !important;
	line-height: 1.15 !important;
	margin-bottom: 20px !important;
}
.hfh-vision-block p {
	font-size: 16px;
	color: var(--hfh-body-text);
	line-height: 1.8;
	margin: 0;
}

/* Our Work section — left-aligned content to match the Mission section
   style. Button sits below the body with breathing room. */
.hfh-work {
	text-align: left;
}
.hfh-work .et_pb_text {
	max-width: 900px;
}
.hfh-work .et_pb_button_module_wrapper {
	margin-top: 24px;
}

/* Financial Transparency — left-aligned section header (label/title)
   matching Mission/History/etc. Body + link pills also left-aligned. */
.hfh-financial {
	text-align: left;
}
.hfh-financial .et_pb_text {
	max-width: 900px;
}
/* Per Amanda 5/19 — Trust badge cards for the Candid Platinum Seal +
   Charity Navigator 4-Star Rating. Uses the official badge embed
   images from those services (the Candid SVG auto-updates as the
   seal level changes year-over-year). Sits ABOVE the document-style
   .hfh-financial-links for 990s + Impact Reports. */
.hfh-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: flex-start;
	align-items: stretch;
	margin-top: 32px;
}
.hfh-trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	background: var(--hfh-white);
	border: 1px solid #EBEBEB;
	border-radius: 16px;
	text-decoration: none !important;
	color: var(--hfh-dark-text) !important;
	min-width: 220px;
	max-width: 280px;
	flex: 1 1 220px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.hfh-trust-badge:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	border-color: var(--hfh-bright-blue);
	color: var(--hfh-bright-blue) !important;
}
.hfh-trust-badge-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 140px;
}
.hfh-trust-badge-img img {
	max-width: 100%;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.hfh-trust-badge-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.hfh-trust-badge-label::after {
	content: "\f061"; /* fa-arrow-right */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 10px;
	transition: transform 0.2s ease;
}
.hfh-trust-badge:hover .hfh-trust-badge-label::after {
	transform: translateX(4px);
}
@media (max-width: 600px) {
	.hfh-trust-badge { min-width: 100%; max-width: 100%; flex: 1 1 100%; }
}

.hfh-financial-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
	margin-top: 24px;
}
.hfh-financial-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--hfh-white);
	border: 1px solid #EBEBEB;
	border-radius: 50px;
	color: var(--hfh-dark-text) !important;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
}
.hfh-financial-link i {
	color: var(--hfh-bright-blue);
	font-size: 16px;
}
.hfh-financial-link:hover {
	border-color: var(--hfh-bright-blue);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,175,215,0.12);
	color: var(--hfh-bright-blue) !important;
}

/* Employment Opportunities — left-aligned to match other sections. */
.hfh-employment {
	text-align: left;
}
.hfh-employment .et_pb_text {
	max-width: 900px;
}
.hfh-employment-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
	margin-top: 32px;
}
.hfh-employment-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	background: var(--hfh-bright-blue);
	color: var(--hfh-white) !important;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: all 0.3s ease;
}
.hfh-employment-link i { font-size: 20px; }
.hfh-employment-link:hover {
	background: #0098BC;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,175,215,0.35);
	color: var(--hfh-white) !important;
}


/* ====== 19. SERVICE AREA ===================================== */

.hfh-service-area {
	background: var(--hfh-habitat-blue) !important;
	color: var(--hfh-white);
	position: relative;
	overflow: hidden;
}
.hfh-service-area::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 0% 100%, rgba(0,175,215,0.20) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 0%, rgba(196,214,0,0.10) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}
.hfh-service-area > .et_pb_row {
	position: relative;
	z-index: 1;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.hfh-service-area > .et_pb_row > .et_pb_column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Service area on dark bg — invert section header colors */
.hfh-service-area .hfh-section-label {
	color: var(--hfh-bright-green) !important;
}
.hfh-service-area .hfh-section-label::before,
.hfh-service-area .hfh-section-label p::before {
	background: var(--hfh-bright-green) !important;
}
.hfh-service-area .hfh-section-title,
.hfh-service-area .hfh-section-title h1,
.hfh-service-area .hfh-section-title h2,
.hfh-service-area .hfh-section-title h3 {
	color: var(--hfh-white) !important;
}
.hfh-service-area p,
.hfh-service-area .et_pb_text p {
	color: rgba(255,255,255,0.75) !important;
}

/* Service area image — 4:3 with rounded corners */
.hfh-service-image .et_pb_image_wrap,
.hfh-service-image .et_pb_image_wrap img {
	border-radius: 16px;
	width: 100% !important;
	max-width: 100% !important;
}
.hfh-service-image .et_pb_image_wrap img {
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
}

/* County list — 3-column grid inside the dark service area section */
.hfh-county-list {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	margin-top: 32px;
}
@media (max-width: 768px) {
	.hfh-county-list { grid-template-columns: 1fr; }
}

/* County badge — dark-bg context (service area uses habitat-blue) */
.hfh-county-badge {
	background: rgba(255,255,255,0.08) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: var(--hfh-radius-sm);
	padding: 20px !important;
	text-align: center;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--hfh-white) !important;
	transition: all 0.3s ease;
}
.hfh-county-badge i {
	font-size: 24px !important;
	color: var(--hfh-bright-green) !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	display: block;
	margin-bottom: 4px;
	border-radius: 0;
}
.hfh-county-badge > span {
	font-family: var(--hfh-font-sans);
	font-size: 14px;
	font-weight: 700;
	color: var(--hfh-white);
	display: block;
}
.hfh-county-badge > small {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
	display: block;
}
.hfh-county-badge:hover {
	background: rgba(255,255,255,0.12) !important;
	transform: translateY(-2px);
}
.hfh-county-badge:hover {
	background: rgba(255,255,255,0.12) !important;
	transform: translateY(-2px);
}
.hfh-county-badge .et_pb_main_blurb_image,
.hfh-county-badge i {
	color: var(--hfh-bright-green) !important;
	font-size: 24px !important;
	margin-bottom: 8px !important;
}
.hfh-county-badge h4,
.hfh-county-badge .et_pb_module_header {
	color: var(--hfh-white) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}
.hfh-county-badge p {
	color: rgba(255,255,255,0.5);
	font-size: 12px;
}


/* ====== 20. ANIMATIONS ======================================= */

.hfh-fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.hfh-fade-up.is-visible,
.et-fb-app-frame .hfh-fade-up {
	opacity: 1;
	transform: translateY(0);
}


/* ====== 21. HEADER (global, fixed) =========================== */
/* Matches preview/index.html .site-header — fixed at top,
   100px tall, with shadow that intensifies on scroll. */

.hfh-header-section {
	position: fixed !important;
	top: 0; left: 0; right: 0;
	width: 100% !important;
	z-index: 1000 !important;
	background: var(--hfh-white) !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.06);
	padding: 0 !important;
	transition: box-shadow 0.3s ease;
}
body.admin-bar .hfh-header-section { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .hfh-header-section { top: 46px; }
}
.hfh-header-section.is-scrolled {
	box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.hfh-header-section > .et_pb_row {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	height: 100px;
	max-width: 1200px !important;
	width: 90% !important;  /* match body section row width */
	margin: 0 auto !important;
	padding: 0 !important;
}
/* Divi adds a ::after pseudo-element (for float clearing) which becomes
   a flex item in our flex row and steals the last slot from space-between.
   Remove it so the Donate column actually sits at the right edge. */
.hfh-header-section > .et_pb_row::after,
.hfh-header-section > .et_pb_row::before {
	display: none !important;
}
.hfh-header-section .et_pb_column {
	margin: 0 !important;
	display: flex;
	align-items: center;
	width: auto !important;
}

/* Logo */
.hfh-logo { margin: 0 !important; }
.hfh-logo .et_pb_image_wrap img,
.hfh-logo img {
	height: 75px !important;
	width: auto !important;
	display: block;
}

/* Main nav */
.hfh-main-menu {
	background: transparent !important;
	flex: 1;
}
.hfh-main-menu .et_pb_menu_inner_container,
.hfh-main-menu .et_pb_menu__wrap,
.hfh-main-menu .et_pb_menu__menu {
	background: transparent !important;
	justify-content: center;
}
.hfh-main-menu .et_pb_menu .nav,
.hfh-main-menu nav > ul {
	display: flex !important;
	align-items: center;
	gap: 4px;
	justify-content: center;
}
.hfh-main-menu .et_pb_menu .nav > li > a,
.hfh-main-menu nav > ul > li > a {
	color: var(--hfh-dark-text) !important;
	font-family: var(--hfh-font-sans) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	padding: 10px 20px !important;
	border-radius: 6px !important;
	transition: all 0.2s ease;
	opacity: 1 !important;
}
.hfh-main-menu .et_pb_menu .nav > li > a:hover,
.hfh-main-menu nav > ul > li > a:hover {
	background: var(--hfh-blue-tint) !important;
	color: var(--hfh-bright-blue) !important;
	opacity: 1 !important;
}
.hfh-main-menu .et_pb_menu .nav > li.current-menu-item > a,
.hfh-main-menu nav > ul > li.current-menu-item > a {
	color: var(--hfh-bright-blue) !important;
}

/* Hide Divi's default ETmodules dropdown arrow — we use our own
   Font Awesome chevron injected via the walker filter so it can be
   styled/rotated consistently with the rest of the icon set. */
.hfh-main-menu .menu-item-has-children > a::after,
.hfh-main-menu .menu-item-has-children > a:first-child::after,
.et-menu .menu-item-has-children > a:first-child::after {
	display: none !important;
	content: none !important;
}

/* Parent-item dropdown chevron — appears next to top-level menu items
   that have children. Rotates 180° on hover to signal an open state. */
.hfh-main-menu .menu-item-has-children > a .hfh-menu-chevron {
	display: inline-block;
	font-size: 10px !important;
	margin-left: 6px;
	transition: transform 0.2s ease;
	color: inherit;
	vertical-align: middle;
}
.hfh-main-menu .menu-item-has-children:hover > a .hfh-menu-chevron {
	transform: rotate(180deg);
}

/* Dropdown — rounded card matching preview mockup */
.hfh-main-menu .menu-item-has-children {
	position: relative;
}
.hfh-main-menu .sub-menu,
.hfh-main-menu ul.sub-menu {
	background: var(--hfh-white) !important;
	border: 1px solid rgba(0,0,0,0.04) !important;
	border-top: 1px solid rgba(0,0,0,0.04) !important;  /* override Divi's 3px blue border-top */
	border-radius: 12px !important;
	box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
	padding: 12px !important;
	min-width: 280px !important;
	margin-top: 12px !important;
}

/* Bridge the hover gap between the parent menu link and the dropdown.
   Without this, moving the cursor from "Get Involved" down to the
   submenu crosses an empty 12px area where neither <a> nor the dropdown
   is hovered, so the dropdown closes. The invisible ::before is
   positioned above the dropdown filling that gap; since it's a
   descendant of the parent <li>, the parent's :hover state stays
   active while the cursor is in the gap. */
.hfh-main-menu .sub-menu::before {
	content: '';
	position: absolute;
	top: -16px;     /* covers the 12px margin + a little extra */
	left: 0;
	right: 0;
	height: 16px;
	background: transparent;
}

/* Each dropdown row is the <a> with our rich inner layout
   (icon tile + label + description) injected by hfh_menu_item_rich_render(). */
.hfh-main-menu .sub-menu li a {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 16px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--hfh-body-text) !important;
	border-radius: 8px !important;
	transition: background 0.2s ease, color 0.2s ease !important;
	background: transparent !important;
}
.hfh-main-menu .sub-menu li a:hover {
	background: var(--hfh-blue-tint) !important;
	color: var(--hfh-bright-blue) !important;
}

/* Colored icon tile (36×36) — color comes from inline style set in the
   walker filter (hfh_menu_icons()), so each item's tile can be a
   different brand color. */
.hfh-main-menu .sub-menu .hfh-dropdown-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--hfh-white);
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.hfh-main-menu .sub-menu .hfh-dropdown-icon i {
	color: var(--hfh-white);
	font-size: 14px;
}

/* Label + description stack to the right of the icon tile. */
.hfh-main-menu .sub-menu .hfh-dropdown-text {
	display: flex !important;
	flex-direction: column;
	line-height: 1.3;
}
.hfh-main-menu .sub-menu .hfh-dropdown-label {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hfh-dark-text);
	transition: color 0.2s ease;
}
.hfh-main-menu .sub-menu li a:hover .hfh-dropdown-label {
	color: var(--hfh-bright-blue);
}
.hfh-main-menu .sub-menu .hfh-dropdown-desc {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--hfh-gray-text);
	margin-top: 2px;
}

/* Donate button column — push to right edge */
.hfh-header-section .et_pb_column:last-child {
	justify-content: flex-end;
}


/* ====== 22. PRE-FOOTER CTA BANNER ============================ */
/* Gradient call-to-action that lives just above the affiliations
   bar and footer, on every page that uses the Default template. */

.hfh-cta-banner {
	background: linear-gradient(135deg, var(--hfh-habitat-blue) 0%, #2a5580 40%, var(--hfh-bright-blue) 100%) !important;
	position: relative;
	overflow: hidden;
}
.hfh-cta-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 80% 50%, rgba(196,214,0,0.15) 0%, transparent 60%);
	pointer-events: none;
}
.hfh-cta-banner > .et_pb_row {
	position: relative;
	z-index: 1;
	display: flex !important;
	align-items: center !important;
	gap: 40px;
}
.hfh-cta-banner .hfh-cta-text h2 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(28px, 3.5vw, 40px) !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	line-height: 1.2 !important;
	margin-bottom: 12px !important;
}
.hfh-cta-banner .hfh-cta-text p {
	font-size: 18px !important;
	color: rgba(255,255,255,0.85) !important;
}
/* CTA banner buttons column — auto-size to button content so both
   buttons fit side-by-side. Override Divi's fixed 1_3 column width. */
.hfh-cta-banner .hfh-cta-buttons {
	display: flex !important;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}
.hfh-cta-banner .hfh-cta-text {
	flex: 1 1 auto !important;
	max-width: none !important;
}
.hfh-cta-banner .hfh-cta-buttons .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 !important;
	flex: 0 0 auto;
}
/* Keep button text on one line so it doesn't wrap awkwardly */
.hfh-cta-banner .et_pb_button {
	white-space: nowrap !important;
}
@media (max-width: 768px) {
	.hfh-cta-banner .hfh-cta-buttons {
		flex-direction: column;
		align-items: stretch;
		flex: 1 1 100% !important;
	}
}


/* ====== 23. AFFILIATIONS BAR ================================= */

.hfh-affiliations {
	background: var(--hfh-white) !important;
	border-top: 1px solid #EBEBEB;
	text-align: center;
}
.hfh-affiliations-label {
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	color: var(--hfh-gray) !important;
	margin-bottom: 28px !important;
	text-align: center !important;
}
.hfh-affiliations-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}
.hfh-affiliation-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	max-width: 160px;
	opacity: 0.7;
	transition: opacity 0.3s ease, transform 0.2s ease;
	filter: grayscale(15%);
}
.hfh-affiliation-badge:hover {
	opacity: 1;
	transform: translateY(-2px);
	filter: grayscale(0%);
}
.hfh-affiliation-badge img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/* Keep legacy icon+text styling available in case some pages still use it */
.hfh-affiliation-badge i {
	font-size: 32px;
	color: var(--hfh-gray);
}
.hfh-affiliation-badge span {
	font-size: 11px;
	font-weight: 600;
	color: var(--hfh-gray);
	text-align: center;
	line-height: 1.3;
}


/* ====== 23b. MISSION SECTION (About page) ===================== */

.hfh-mission {
	background: var(--hfh-white) !important;
}
.hfh-mission > .et_pb_row {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.hfh-mission > .et_pb_row > .et_pb_column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
.hfh-mission p {
	font-size: 16px;
	color: var(--hfh-body-text);
	margin-bottom: 20px;
	line-height: 1.8;
}

/* Mission image — 4:3 ratio, rounded, with 4px accent strip at bottom */
.hfh-mission-image {
	position: relative;
}
.hfh-mission-image .et_pb_image_wrap,
.hfh-mission-image .et_pb_image_wrap img {
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 16px;
}
.hfh-mission-image .et_pb_image_wrap img {
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	height: auto;
}
.hfh-mission-image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--hfh-bright-blue);
	border-radius: 0 0 16px 16px;
	pointer-events: none;
	z-index: 2;
}


/* ====== 23c. TEAM SECTION — force light-gray bg ============== */

.hfh-team {
	background: var(--hfh-light-gray) !important;
}


/* ====== 23d. DONATE PAGE ===================================== */

/* Page intro 2-col grid (text + photo) */
.hfh-donate-intro > .et_pb_row {
	display: grid !important;
	grid-template-columns: 3fr 2fr;
	gap: 60px;
	align-items: center;
}
.hfh-donate-intro > .et_pb_row > .et_pb_column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
.hfh-donate-intro-image .et_pb_image_wrap,
.hfh-donate-intro-image .et_pb_image_wrap img {
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 16px;
}
.hfh-donate-intro-image .et_pb_image_wrap img {
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	height: auto;
}

/* Tax-deductible callout banner */
.hfh-tax-callout {
	display: flex;
	gap: 16px;
	padding: 20px 24px;
	background: var(--hfh-blue-tint);
	border-left: 4px solid var(--hfh-bright-blue);
	border-radius: 12px;
	margin-top: 24px;
}
.hfh-tax-callout-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: var(--hfh-bright-blue);
	color: var(--hfh-white);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.hfh-tax-callout p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hfh-body-text);
}
.hfh-tax-callout p + p {
	margin-top: 6px;
}
.hfh-tax-callout .hfh-tax-id {
	font-size: 13px;
	color: var(--hfh-gray);
}

/* === Ways to Give === */
.hfh-ways-to-give > .et_pb_row {
	margin-bottom: 0 !important;
}
.hfh-ways-to-give > .et_pb_row + .et_pb_row {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 40px !important;
}
.hfh-ways-to-give > .et_pb_row + .et_pb_row > .et_pb_column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Colored icon block used on Ways to Give + Partners cards */
.hfh-give-icon,
.hfh-partner-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--hfh-radius-sm);
	background: var(--hfh-bright-blue);
	color: var(--hfh-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 20px;
}
.hfh-give-icon.hfh-accent-blue,
.hfh-partner-icon.hfh-accent-blue   { background: var(--hfh-bright-blue); }
.hfh-give-icon.hfh-accent-green,
.hfh-partner-icon.hfh-accent-green  { background: var(--hfh-habitat-green); }
.hfh-give-icon.hfh-accent-orange,
.hfh-partner-icon.hfh-accent-orange { background: var(--hfh-orange); }
.hfh-give-icon.hfh-accent-brick,
.hfh-partner-icon.hfh-accent-brick  { background: var(--hfh-brick); }

/* Donate-Online text block + check + DAF cards */
.hfh-ways-to-give .et_pb_text h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 12px !important;
}
.hfh-ways-to-give .et_pb_text p {
	font-size: 15px;
	color: var(--hfh-body-text);
	line-height: 1.7;
}

/* Check + DAF cards — white card style */
.hfh-give-card {
	background: var(--hfh-white) !important;
	border-radius: var(--hfh-radius);
	padding: 36px !important;
	border: 1px solid #EBEBEB;
	transition: all 0.3s ease;
}
.hfh-give-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
	border-color: var(--hfh-bright-blue);
}
.hfh-daf-steps {
	margin: 12px 0 0 0;
	padding-left: 20px;
	font-size: 14px;
	color: var(--hfh-body-text);
	line-height: 1.7;
}
.hfh-daf-steps li {
	margin-bottom: 8px;
}

/* Donate page — Online + Form row (1_2,1_2). The right column holds
   the donation form which can grow quite tall once the user pastes
   their actual embed code. We make the row a grid so both columns
   share the same height, then turn the left column into a flex
   column so the photo can be pushed to its bottom edge — keeping
   the column visually balanced with the right column regardless of
   how tall the form gets. */
.hfh-ways-to-give .et_pb_row:nth-child(2) {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 32px !important;
	align-items: stretch;
}
.hfh-ways-to-give .et_pb_row:nth-child(2) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
}

/* The move-in-day photo sits below the text in the left column,
   pushed to the bottom of its column (margin-top: auto), with a
   50px gap below it so it "hovers" 50px from the bottom edge
   instead of touching the column boundary. */
.hfh-donate-photo {
	margin-top: auto !important;     /* push down to bottom of flex column */
	margin-bottom: 50px !important;  /* leave 50px gap below */
	padding-top: 32px;                /* breathing space between text above and photo */
}
.hfh-donate-photo .et_pb_image_wrap,
.hfh-donate-photo { width: 100% !important; }
.hfh-donate-photo img {
	width: 100% !important;
	height: auto !important;
	border-radius: 16px !important;
	box-shadow: 0 16px 40px rgba(56,89,136,0.18);
	display: block;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hfh-donate-photo:hover img {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px rgba(0,175,215,0.25);
}


/* Donation form embed — applied as a CSS class on the Divi Code module
   (post-id 138 / Donate page). The class lives on the module's outer
   wrapper div so the dotted-border + white-background "card" stays
   intact even after the user replaces the inner content with the
   actual donation form embed code.

   Use `.hfh-donation-form-embed` for the wrapper (decoration), and
   `.et_pb_code_inner` for the content area (Divi's auto-inserted inner div). */
.hfh-donation-form-embed {
	background: var(--hfh-white);
	border: 2px dashed rgba(0,175,215,0.4);
	border-radius: 16px;
	/* Equal 32px padding on all four sides so the form embed has
	   visually symmetric breathing room. (Previous 40px 32px split
	   was producing more space on the top/bottom than the sides.) */
	padding: 32px !important;
	height: 100%;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* Once a real embed is active (marked with .hfh-qgiv-active or any
   .qgiv-embed-container child), drop the dashed-border placeholder look
   in favor of a softer solid card and reduce padding so the form gets
   maximum interior width. Also align top + left so the form renders
   from the top of the card, not vertically centered. */
.hfh-donation-form-embed:has(.hfh-qgiv-active),
.hfh-donation-form-embed:has(.qgiv-embed-container) {
	border: 1px solid #EBEBEB !important;
	padding: 16px !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	text-align: left !important;
	min-height: 0 !important;
	overflow: hidden;
}
/* Force the Qgiv embed container (which carries data-width="630") to
   honor the column width instead of overflowing on narrow viewports.
   The Qgiv iframe inside scales responsively when the container is
   width-constrained. */
.hfh-donation-form-embed .qgiv-embed-container,
.hfh-donation-form-embed .qgiv-embed-container iframe,
.hfh-donation-form-embed .qgiv-embed-container > div {
	max-width: 100% !important;
	width: 100% !important;
}
.hfh-qgiv-active { width: 100%; }
/* The Divi Code module wraps its content in .et_pb_code_inner — make
   that inner div span the full available width and reset any default
   margin/padding so the embed sits flush against the wrapper's
   32px padding without compounding bottom space. */
.hfh-donation-form-embed > .et_pb_code_inner {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}
/* Many embedded form scripts (Qgiv, Donorbox, etc.) wrap their content
   in a container with a default bottom margin or empty <p> after the
   embed. Neutralize those so the form's bottom edge sits cleanly inside
   the 32px padding instead of adding extra perceived bottom space. */
.hfh-donation-form-embed > .et_pb_code_inner > *:last-child,
.hfh-donation-form-embed > .et_pb_code_inner > div:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.hfh-form-placeholder {
	color: var(--hfh-gray);
}
.hfh-form-placeholder i {
	font-size: 48px;
	color: var(--hfh-bright-blue);
	opacity: 0.4;
	margin-bottom: 16px;
}
.hfh-form-placeholder h4 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 8px !important;
}
.hfh-form-placeholder p {
	font-size: 13px;
	color: var(--hfh-gray);
	max-width: 280px;
	margin: 0 auto;
}

/* === Donation Lifecycle Graphic === */
.hfh-lifecycle-section {
	color: var(--hfh-white);
	position: relative;
	overflow: hidden;
}
.hfh-lifecycle-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(196,214,0,0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 0% 100%, rgba(0,175,215,0.18) 0%, transparent 55%);
	pointer-events: none;
}
.hfh-lifecycle-section > .et_pb_row { position: relative; z-index: 1; }

.hfh-lifecycle-section .hfh-section-label {
	color: var(--hfh-bright-green) !important;
}
.hfh-lifecycle-section .hfh-section-label::before {
	background: var(--hfh-bright-green) !important;
}
.hfh-lifecycle-section .hfh-section-title,
.hfh-lifecycle-section .hfh-section-title h2 {
	color: var(--hfh-white) !important;
}

.hfh-lifecycle {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	margin-top: 48px;
}
.hfh-lifecycle-step {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--hfh-radius);
	padding: 32px 24px;
	text-align: center;
	position: relative;
}
.hfh-lifecycle-number {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 36px;
	background: var(--hfh-bright-green);
	color: var(--hfh-dark-text);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hfh-font-serif);
	font-size: 18px;
	font-weight: 700;
}
.hfh-lifecycle-icon {
	width: 64px;
	height: 64px;
	margin: 12px auto 16px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--hfh-bright-green);
}
.hfh-lifecycle-step h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	color: var(--hfh-white) !important;
	margin-bottom: 10px !important;
}
.hfh-lifecycle-step p {
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	line-height: 1.6;
	margin: 0;
}
.hfh-lifecycle-arrow {
	color: var(--hfh-bright-green);
	font-size: 24px;
}
.hfh-lifecycle-caption {
	text-align: center;
	margin-top: 40px;
	font-family: var(--hfh-font-serif);
	font-size: 24px;
	color: var(--hfh-bright-green);
	font-style: italic;
}
@media (max-width: 900px) {
	.hfh-lifecycle {
		grid-template-columns: 1fr;
	}
	.hfh-lifecycle-arrow {
		transform: rotate(90deg);
		justify-self: center;
	}
}

/* === Future Ways to Give === */
.hfh-future-card {
	background: var(--hfh-white) !important;
	border: 1px solid #EBEBEB;
	border-radius: var(--hfh-radius);
	padding: 32px !important;
	height: 100%;
	position: relative;
	transition: all 0.3s ease;
	opacity: 0.85;
}
.hfh-future-card:hover {
	opacity: 1;
	border-color: var(--hfh-bright-blue);
}
.hfh-future-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 16px;
}
.hfh-future-card h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin-bottom: 8px !important;
}
.hfh-future-card p {
	font-size: 14px;
	color: var(--hfh-gray);
	line-height: 1.6;
	margin-bottom: 16px;
}
.hfh-future-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hfh-bright-blue);
	background: var(--hfh-blue-tint);
	padding: 4px 10px;
	border-radius: 999px;
}


/* ====== 23f. RESTORE PAGE ==================================== */
/* Sections: Visit Today (address + hours cards), Shop (with FB feed
   placeholder), Donate (tax callout + items-we-accept grid + drop-off/
   pick-up cards), Arts & Sustainability. */

/* --- Visit Today section --------------------------------------- */
.hfh-restore-visit .et_pb_row {
	max-width: 1200px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 60px !important;
	align-items: start;  /* top-align both columns so the heading on the
	                       left and the Address card on the right share
	                       the same baseline */
}
.hfh-restore-visit .et_pb_row > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
}
.hfh-visit-photo {
	width: 100% !important;
	max-width: none !important;
	margin-top: 24px !important;  /* a little breathing room between
	                                 the "Visit Today!" h2 and the photo */
}
.hfh-visit-photo .et_pb_image_wrap,
.hfh-visit-photo {
	width: 100% !important;
}
.hfh-visit-photo img {
	width: 100% !important;
	height: auto !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(56,89,136,0.2);
	display: block;
}

/* Info cards (address + hours) */
.hfh-info-card-wrap {
	margin-top: 24px !important;
}
.hfh-info-card-wrap:first-of-type {
	margin-top: 0 !important;
}
.hfh-info-card {
	background: var(--hfh-white);
	border-radius: 12px;
	padding: 28px 32px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.04);
}
.hfh-info-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 16px;
}
.hfh-info-card h3 {
	font-family: var(--hfh-font-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hfh-gray-text) !important;
	margin: 0 0 12px !important;
}
.hfh-info-card p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--hfh-dark-text);
	margin: 0;
}
.hfh-info-card p + p {
	margin-top: 8px;
}
.hfh-info-card a {
	color: var(--hfh-bright-blue);
	font-weight: 600;
	font-size: 14px;
}
.hfh-info-card a:hover {
	color: var(--hfh-habitat-blue);
}

/* Hours definition list */
.hfh-hours-list {
	margin: 0;
}
.hfh-hours-list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hfh-hours-list > div:last-child {
	border-bottom: none;
}
.hfh-hours-list dt {
	font-weight: 600;
	color: var(--hfh-dark-text);
	font-size: 16px;
}
.hfh-hours-list dd {
	margin: 0;
	color: var(--hfh-body-text);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

/* --- Shop section: Facebook feed placeholder ------------------- */
.hfh-restore-shop .et_pb_row {
	max-width: 900px !important;
}
.hfh-facebook-feed-wrap {
	margin-top: 40px !important;
}
.hfh-facebook-embed {
	border: 2px dashed rgba(56,89,136,0.2);
	background: linear-gradient(135deg, rgba(0,175,215,0.04), rgba(56,89,136,0.04));
	border-radius: 16px;
	padding: 60px 40px;
}
.hfh-facebook-placeholder {
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
}
.hfh-facebook-placeholder .fa-facebook {
	font-size: 48px;
	color: #1877F2;
	margin-bottom: 20px;
}
.hfh-facebook-placeholder h4 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 24px !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 12px !important;
}
.hfh-facebook-placeholder p {
	color: var(--hfh-body-text);
	margin-bottom: 24px !important;
	line-height: 1.6;
}
.hfh-facebook-placeholder .hfh-btn {
	display: inline-block !important;
}

/* --- Donate section ------------------------------------------- */
.hfh-restore-donate .et_pb_row {
	max-width: 1100px !important;
}
.hfh-restore-donate .et_pb_row + .et_pb_row {
	margin-top: 60px !important;
}

/* Drop-Off + Pick-Up row (3rd row in this section) — make it a
   grid so both cards share the same total height regardless of
   text-content length. The card body inside each column is already
   a flex column with margin-top: auto on the button, so once the
   columns equalize, the buttons line up across the bottom of both
   cards. */
.hfh-restore-donate .et_pb_row:nth-child(3) {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 32px !important;
	align-items: stretch;
}
.hfh-restore-donate .et_pb_row:nth-child(3) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
}
/* Force the text module inside each card column to fill height too,
   so the card itself (which already has height:100%) really hits the
   full column height. */
.hfh-restore-donate .et_pb_row:nth-child(3) .hfh-give-card-wrap,
.hfh-restore-donate .et_pb_row:nth-child(3) .hfh-give-card-wrap > .et_pb_text_inner {
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Tax callout wrapper centers the box */
.hfh-tax-callout-wrap {
	margin-top: 32px !important;
}

/* Items We Accept */
.hfh-subsection-title {
	font-family: var(--hfh-font-serif) !important;
	font-size: 28px !important;
	color: var(--hfh-dark-text) !important;
	font-weight: 700 !important;
	margin: 0 0 12px !important;
	text-align: center;
}
.hfh-items-description p {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 32px !important;
	color: var(--hfh-body-text);
	line-height: 1.7;
}
.hfh-items-grid-wrap {
	margin-top: 0 !important;
}
.hfh-items-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.hfh-item-tile {
	background: var(--hfh-white);
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 10px;
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	transition: all 0.2s ease;
}
.hfh-item-tile:hover {
	border-color: var(--hfh-bright-blue);
	box-shadow: 0 6px 18px rgba(0,175,215,0.12);
	transform: translateY(-2px);
}
.hfh-item-tile i {
	font-size: 24px;
	color: var(--hfh-bright-blue);
}
.hfh-item-tile span {
	font-size: 14px;
	font-weight: 600;
	color: var(--hfh-dark-text);
	line-height: 1.3;
}

/* Drop-Off / Pick-Up cards (restore variant) */
.hfh-give-card-wrap {
	display: flex;
}
.hfh-give-card-wrap > .et_pb_module {
	width: 100%;
}
.hfh-give-card--restore {
	background: var(--hfh-white);
	border-radius: 16px;
	padding: 36px 32px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.04);
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Pick-Up card variant with a photo at the top — image bleeds to card edges,
   body content sits below with normal padding restored via .hfh-give-card-body. */
.hfh-give-card--with-photo {
	padding: 0 !important;
}
.hfh-give-card-photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f0f0f0;
}
.hfh-give-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
	display: block;
}
.hfh-give-card--with-photo .hfh-give-card-body {
	padding: 28px 32px 32px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.hfh-give-card--with-photo .hfh-give-card-icon {
	margin-top: -48px;
	z-index: 2;
	position: relative;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	background: var(--hfh-white) !important;
}
.hfh-give-card--restore .hfh-give-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 20px;
}
.hfh-give-card--restore h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 24px !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 16px !important;
}
.hfh-give-card--restore p {
	color: var(--hfh-body-text);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 12px !important;
}
.hfh-give-card--restore p:last-of-type {
	margin-bottom: 0 !important;
}
.hfh-give-card--restore .hfh-card-link {
	color: var(--hfh-bright-blue);
	font-weight: 600;
	font-size: 15px;
	margin-top: auto;
	padding-top: 16px;
	display: inline-block;
}
.hfh-give-card--restore .hfh-btn-block {
	display: block !important;
	text-align: center !important;
	margin-top: auto !important;
}

/* --- Arts & Sustainability ------------------------------------ */
.hfh-restore-arts .et_pb_row {
	max-width: 900px !important;
	text-align: center;
}
.hfh-arts-description p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--hfh-body-text);
	margin: 0 auto 32px !important;
	text-align: center;
}
.hfh-arts-contact-wrap {
	margin-top: 32px !important;
	margin-bottom: 32px !important;
}
.hfh-arts-contact {
	background: var(--hfh-blue-tint);
	border-radius: 12px;
	padding: 32px;
	text-align: center;
}
.hfh-arts-contact p {
	margin: 0 0 8px !important;
	color: var(--hfh-dark-text);
	font-size: 16px;
	line-height: 1.6;
}
.hfh-arts-contact p:last-child {
	margin-bottom: 0 !important;
}
.hfh-arts-contact a {
	color: var(--hfh-bright-blue);
	font-weight: 600;
}
.hfh-restore-arts .et_pb_button_module_wrapper {
	text-align: center !important;
}


/* ====== 23g. VOLUNTEER PAGE ================================== */
/* Sections: Build With Us (ways-to-build list + photo), Volunteer
   Opportunities (3-card grid with photos), Court-Ordered Service
   (banner card), FAQ (native <details> accordion). */

/* --- Build With Us section (2-col with photo) ----------------- */
.hfh-volunteer-build .et_pb_row {
	max-width: 1200px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 60px !important;
	align-items: center;
}
.hfh-volunteer-build .et_pb_row > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
}
.hfh-build-photo {
	width: 100% !important;
}
.hfh-build-photo .et_pb_image_wrap,
.hfh-build-photo {
	width: 100% !important;
}
.hfh-build-photo img {
	width: 100% !important;
	height: auto !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(56,89,136,0.2);
	display: block;
}

/* Ways to Build — icon list */
.hfh-ways-list-wrap {
	margin: 24px 0 32px !important;
}
.hfh-ways-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.hfh-ways-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	font-size: 17px;
	color: var(--hfh-dark-text);
	line-height: 1.5;
}
.hfh-ways-list li:last-child {
	border-bottom: none;
}
.hfh-ways-list li i {
	flex: 0 0 36px;
	height: 36px;
	width: 36px;
	border-radius: 8px;
	background: var(--hfh-white);
	color: var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.hfh-ways-list li:last-child i {
	background: var(--hfh-bright-green);
	color: var(--hfh-white);
}

/* "No experience" callout — symmetric spacing above and below.
   Divi wraps content in .et_pb_text_inner with its own padding, and
   sibling modules add their own margins, so we have to neutralize
   ALL the surrounding spacing and rely on the wrap's explicit
   margins as the sole controller. */
.hfh-callout-text-wrap {
	margin: 32px 0 !important;
	padding: 0 !important;
}
.hfh-callout-text-wrap > .et_pb_text_inner {
	padding: 0 !important;
	margin: 0 !important;
}
/* Neutralize the ways-list module's default bottom margin (above the callout) */
.hfh-ways-list-wrap {
	margin-bottom: 0 !important;
}
/* Neutralize the next sibling's top margin (the button below) */
.hfh-callout-text-wrap + .et_pb_button_module_wrapper,
.hfh-callout-text-wrap + .et_pb_module {
	margin-top: 0 !important;
}
.hfh-callout-text {
	background: var(--hfh-white);
	border-left: 4px solid var(--hfh-bright-blue);
	border-radius: 0 10px 10px 0;
	/* !important forces 18px symmetric vertical padding inside the white box.
	   Without !important, Divi's "p { padding-bottom: 1em }" can leak in
	   and make the bottom of the box visually taller than the top. */
	padding: 18px 24px !important;
	margin: 0 !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hfh-body-text);
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.hfh-callout-text strong {
	color: var(--hfh-dark-text);
}

/* "Watch Orientation" button — circular play icon BEFORE the text.
   Divi's default ".et_pb_button:before" rules are HEAVILY destructive:
       .et_pb_button:before {
           position: absolute;
           opacity: 0;
           display: none;
           top: 50%;
           transform: translateY(-50%);
           content: "\35";
       }
   They're meant for Divi's hover-arrow effect. We have to override every
   single one of those properties to bring our icon back as a normal
   in-flow flex item that sits before the text. */
a.hfh-btn.hfh-btn-with-icon::before,
.et_pb_button.hfh-btn-with-icon::before,
.hfh-btn-with-icon::before {
	content: "\f144" !important;            /* fa-circle-play */
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	display: inline-block !important;       /* override Divi display: none */
	position: static !important;            /* override Divi position: absolute */
	top: auto !important;                   /* override Divi top: 50% */
	left: auto !important;
	right: auto !important;
	transform: none !important;             /* override Divi transform: translateY(-50%) */
	margin: 0 !important;
	padding: 0 !important;
	order: -1 !important;                   /* first flex item */
	flex-shrink: 0 !important;
	color: inherit !important;
	opacity: 1 !important;                  /* override Divi opacity: 0 */
	width: auto !important;
	height: auto !important;
}
/* Match the on-hover state too, in case Divi changes ::before on hover */
a.hfh-btn.hfh-btn-with-icon:hover::before,
.et_pb_button.hfh-btn-with-icon:hover::before,
.hfh-btn-with-icon:hover::before {
	content: "\f144" !important;
	display: inline-block !important;
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
}

/* --- Volunteer Opportunities (3-card grid) -------------------- */
.hfh-volunteer-opportunities .et_pb_row {
	max-width: 1200px !important;
}
.hfh-volunteer-opportunities .et_pb_row:nth-child(2) {
	margin-top: 56px !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px !important;
}
.hfh-volunteer-opportunities .et_pb_row:nth-child(2) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex;
}

/* --- OPPORTUNITY CARDS (site-wide feature card pattern) ----------
   This is the standard "feature card" used across internal pages
   for grid items that link to deeper content (Volunteer roles,
   future Programs/Events cards, etc.). It mirrors the homepage
   .hfh-connection-card pattern:
   - White background, rounded corners, light border, subtle shadow
   - Image at top (4:3 ratio)
   - 4px accent stripe between image and body content
   - Body with eyebrow + h3 + copy + button pinned to bottom
   - 4px inset accent line at the very bottom of the card
   - Hover: lift up, brand-blue border, tinted shadow

   Apply ONE accent class per card: .hfh-accent-blue, .hfh-accent-green,
   .hfh-accent-orange, .hfh-accent-navy, .hfh-accent-brick. The accent
   color controls both stripes. Mix accents across a row for visual
   variety so cards are never just white boxes.

   All cards in a row stretch to equal height; buttons align across
   the bottom because the card body is a flex column with
   `margin-top: auto` on the .hfh-btn-block. */

/* Force the height chain from Divi column → text wrapper → text inner →
   card so every card in the grid stretches to match the tallest card.
   The grid container has `align-items: stretch` by default, so the
   columns equalize automatically; this just passes that height down
   through Divi's nested wrappers to the actual .hfh-opp-card element. */
.hfh-volunteer-opportunities .et_pb_row:nth-child(2) > .et_pb_column {
	display: flex !important;
	flex-direction: column;
}
.hfh-opp-card-wrap {
	margin: 0 !important;
	width: 100%;
	height: 100%;
	display: flex !important;
	flex: 1 1 auto;
}
.hfh-opp-card-wrap > .et_pb_text_inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.hfh-opp-card {
	background: var(--hfh-white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	border: 1px solid #EBEBEB;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hfh-opp-card:hover {
	transform: translateY(-4px);
	border-color: var(--hfh-bright-blue);
}

/* Image area with 4px accent stripe at its bottom edge */
.hfh-opp-card-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f0f0f0;
	position: relative;
}
.hfh-opp-card-photo::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--hfh-bright-blue);  /* default if no accent set */
	z-index: 1;
}
.hfh-opp-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hfh-opp-card-body {
	padding: 28px 28px 32px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Accent variants — color the photo stripe + inset bottom line + hover shadow.
   Each variant stacks the outer shadow (elevation) with an inset shadow
   (4px colored stripe at the bottom inside of the card). */
.hfh-opp-card.hfh-accent-blue {
	box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 -4px 0 var(--hfh-bright-blue);
}
.hfh-opp-card.hfh-accent-blue .hfh-opp-card-photo::after {
	background: var(--hfh-bright-blue);
}
.hfh-opp-card.hfh-accent-blue:hover {
	box-shadow: 0 16px 40px rgba(0,175,215,0.18), inset 0 -4px 0 var(--hfh-bright-blue);
}
.hfh-opp-card.hfh-accent-blue .hfh-opp-card-eyebrow {
	color: var(--hfh-bright-blue) !important;
}

.hfh-opp-card.hfh-accent-green {
	box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 -4px 0 var(--hfh-bright-green);
}
.hfh-opp-card.hfh-accent-green .hfh-opp-card-photo::after {
	background: var(--hfh-bright-green);
}
.hfh-opp-card.hfh-accent-green:hover {
	border-color: var(--hfh-bright-green);
	box-shadow: 0 16px 40px rgba(196,214,0,0.22), inset 0 -4px 0 var(--hfh-bright-green);
}
.hfh-opp-card.hfh-accent-green .hfh-opp-card-eyebrow {
	color: #8a9700 !important;  /* darker green for legibility on white */
}

.hfh-opp-card.hfh-accent-orange {
	box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 -4px 0 var(--hfh-orange);
}
.hfh-opp-card.hfh-accent-orange .hfh-opp-card-photo::after {
	background: var(--hfh-orange);
}
.hfh-opp-card.hfh-accent-orange:hover {
	border-color: var(--hfh-orange);
	box-shadow: 0 16px 40px rgba(255,103,31,0.18), inset 0 -4px 0 var(--hfh-orange);
}
.hfh-opp-card.hfh-accent-orange .hfh-opp-card-eyebrow {
	color: var(--hfh-orange) !important;
}

.hfh-opp-card.hfh-accent-navy {
	box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 -4px 0 var(--hfh-habitat-blue);
}
.hfh-opp-card.hfh-accent-navy .hfh-opp-card-photo::after {
	background: var(--hfh-habitat-blue);
}
.hfh-opp-card.hfh-accent-navy:hover {
	border-color: var(--hfh-habitat-blue);
	box-shadow: 0 16px 40px rgba(56,89,136,0.18), inset 0 -4px 0 var(--hfh-habitat-blue);
}
.hfh-opp-card.hfh-accent-navy .hfh-opp-card-eyebrow {
	color: var(--hfh-habitat-blue) !important;
}

.hfh-opp-card.hfh-accent-brick {
	box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 -4px 0 var(--hfh-brick);
}
.hfh-opp-card.hfh-accent-brick .hfh-opp-card-photo::after {
	background: var(--hfh-brick);
}
.hfh-opp-card.hfh-accent-brick:hover {
	border-color: var(--hfh-brick);
	box-shadow: 0 16px 40px rgba(164,52,58,0.18), inset 0 -4px 0 var(--hfh-brick);
}
.hfh-opp-card.hfh-accent-brick .hfh-opp-card-eyebrow {
	color: var(--hfh-brick) !important;
}
.hfh-opp-card-eyebrow {
	font-family: var(--hfh-font-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hfh-bright-blue) !important;
	margin: 0 0 8px !important;
}
.hfh-opp-card h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 26px !important;
	color: var(--hfh-dark-text) !important;
	font-weight: 700 !important;
	margin: 0 0 14px !important;
	line-height: 1.2;
}
.hfh-opp-card p {
	color: var(--hfh-body-text);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 12px !important;
}
.hfh-opp-card .hfh-opp-meta {
	font-size: 14px;
	color: var(--hfh-gray-text);
	margin-top: 8px !important;
}

/* Pin the CTA to the bottom of every card so all CTAs land on the
   same baseline across the row. Works for both .hfh-card-link
   (text link with arrow) and .hfh-btn (solid button). */
.hfh-opp-card-body > .hfh-card-link,
.hfh-opp-card-body > .hfh-btn {
	margin-top: auto !important;
	align-self: flex-start;
	padding-top: 20px;
}

/* Color the CTA link per-accent so each card has a unified color
   identity (top stripe, eyebrow, bottom line, and CTA all match). */
.hfh-opp-card.hfh-accent-blue   .hfh-card-link { color: var(--hfh-bright-blue) !important; }
.hfh-opp-card.hfh-accent-green  .hfh-card-link { color: #8a9700 !important; }
.hfh-opp-card.hfh-accent-orange .hfh-card-link { color: var(--hfh-orange) !important; }
.hfh-opp-card.hfh-accent-navy   .hfh-card-link { color: var(--hfh-habitat-blue) !important; }
.hfh-opp-card.hfh-accent-brick  .hfh-card-link { color: var(--hfh-brick) !important; }

/* The Font Awesome arrow shifts further right on hover (extending
   the .hfh-card-link gap animation already defined in section 6). */
.hfh-opp-card .hfh-card-link i {
	font-size: 12px;
	transition: transform 0.2s ease;
}
.hfh-opp-card .hfh-card-link:hover i {
	transform: translateX(4px);
}

/* --- Court-Ordered Community Service (horizontal banner card) -- */
.hfh-volunteer-court .et_pb_row {
	max-width: 1100px !important;
}
.hfh-court-card-wrap {
	margin: 0 !important;
}
.hfh-court-card {
	background: var(--hfh-white);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.04);
	padding: 40px;
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 32px;
	align-items: center;
}
.hfh-court-card-icon {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}
.hfh-court-card-body h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 26px !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 8px !important;
	line-height: 1.2;
}
.hfh-court-card-body .hfh-opp-card-eyebrow {
	margin-bottom: 6px !important;
}
.hfh-court-card-body p {
	color: var(--hfh-body-text);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 !important;
}
.hfh-court-card-action {
	flex: 0 0 auto;
}

/* --- FAQ accordion -------------------------------------------- */
.hfh-volunteer-faq .et_pb_row {
	max-width: 860px !important;
}
.hfh-faq-wrap {
	margin: 40px 0 24px !important;
}
.hfh-faq {
	border-top: 1px solid rgba(0,0,0,0.08);
}
.hfh-faq-item {
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.hfh-faq-item > summary {
	list-style: none !important;
	cursor: pointer;
	padding: 22px 8px;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-family: var(--hfh-font-serif);
	font-size: 19px;
	font-weight: 700;
	color: var(--hfh-dark-text);
	transition: color 0.2s ease;
}
.hfh-faq-item > summary::-webkit-details-marker {
	display: none;
}
.hfh-faq-item > summary:hover {
	color: var(--hfh-bright-blue);
}
.hfh-faq-item > summary i {
	color: var(--hfh-bright-blue);
	font-size: 14px;
	transition: transform 0.3s ease;
	flex: 0 0 auto;
}
.hfh-faq-item[open] > summary i {
	transform: rotate(180deg);
}
.hfh-faq-answer {
	padding: 0 8px 24px;
}
.hfh-faq-answer p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--hfh-body-text);
	margin: 0 0 12px !important;
}
.hfh-faq-answer p:last-child {
	margin-bottom: 0 !important;
}
.hfh-faq-contact-wrap {
	margin-top: 24px !important;
}
.hfh-faq-contact {
	text-align: center;
	font-size: 16px;
	color: var(--hfh-body-text);
	margin: 0 !important;
}
.hfh-faq-contact a {
	color: var(--hfh-bright-blue);
	font-weight: 600;
}
.hfh-faq-contact a:hover {
	color: var(--hfh-habitat-blue);
}


/* ====== 23h. HOMEOWNERSHIP PAGE ============================== */
/* Patterns introduced for this page that are reusable on future
   internal pages (programs, services, etc.):
   - Alert banner (.hfh-alert)
   - Feature photo in 2-col layout (.hfh-feature-photo)
   - Fact badges (.hfh-fact-badges)
   - Icon-headed card variant (.hfh-opp-card--icon)
   - Document checklist cards (.hfh-doc-card)
   - Application timeline (.hfh-timeline)
   - Bridge / call-to-action card (.hfh-bridge-card) */

/* --- Alert banner (info/warning/success) ---------------------- */
.hfh-status-alert-section .et_pb_row {
	max-width: 1100px !important;
}
.hfh-alert {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--hfh-blue-tint);
	border-left: 4px solid var(--hfh-bright-blue);
	border-radius: 0 12px 12px 0;
	padding: 20px 28px;
}
.hfh-alert-icon {
	flex-shrink: 0;
	color: var(--hfh-bright-blue);
	font-size: 24px;
	line-height: 1.1;
}
.hfh-alert-body {
	flex: 1;
}
.hfh-alert-title {
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 4px !important;
	font-size: 16px !important;
}
.hfh-alert-body p {
	margin: 0 0 4px !important;
	color: var(--hfh-body-text);
	font-size: 15px;
	line-height: 1.6;
}
.hfh-alert-body p:last-child { margin-bottom: 0 !important; }
.hfh-alert-body a { color: var(--hfh-bright-blue); font-weight: 600; }
.hfh-alert-body a:hover { color: var(--hfh-habitat-blue); }

/* --- 2-col feature section (photo + text) --------------------- */
.hfh-home-what .et_pb_row {
	max-width: 1200px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 60px !important;
	align-items: center;
}
.hfh-home-what .et_pb_row > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
}
.hfh-feature-photo {
	width: 100% !important;
}
.hfh-feature-photo .et_pb_image_wrap,
.hfh-feature-photo { width: 100% !important; }
.hfh-feature-photo img {
	width: 100% !important;
	height: auto !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(56,89,136,0.2);
	display: block;
}
.hfh-what-description p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--hfh-body-text);
	margin: 0 0 16px !important;
}
.hfh-what-description strong {
	color: var(--hfh-dark-text);
}

/* Fact badges — three-up row of mini stat tiles */
.hfh-fact-badges-wrap {
	margin-top: 24px !important;
}
.hfh-fact-badges {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.hfh-fact-badges li {
	background: var(--hfh-white);
	border-radius: 12px;
	padding: 16px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid rgba(0,0,0,0.04);
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.hfh-fact-badges i {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.hfh-fact-badges div {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.hfh-fact-badges strong {
	font-family: var(--hfh-font-serif);
	font-size: 22px;
	color: var(--hfh-dark-text);
	font-weight: 700;
}
.hfh-fact-badges span {
	font-size: 11px;
	color: var(--hfh-gray-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 2px;
}

/* --- Icon-headed card variant of .hfh-opp-card ---------------- */
/* Same card chrome (rounded white, accent stripes, hover lift, equal
   height) but the photo at the top is replaced with a large colored
   icon area. Use .hfh-opp-card--icon alongside the accent class. */
.hfh-opp-card--icon .hfh-opp-card-icon-header {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(0,175,215,0.08), rgba(0,175,215,0.16));
	color: var(--hfh-bright-blue);
	font-size: 72px;
	position: relative;
}
.hfh-opp-card--icon .hfh-opp-card-icon-header::after {
	/* keep the accent stripe at the bottom of the icon area */
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--hfh-bright-blue);
}
.hfh-opp-card--icon.hfh-accent-blue .hfh-opp-card-icon-header {
	background: linear-gradient(135deg, rgba(0,175,215,0.08), rgba(0,175,215,0.18));
	color: var(--hfh-bright-blue);
}
.hfh-opp-card--icon.hfh-accent-blue .hfh-opp-card-icon-header::after {
	background: var(--hfh-bright-blue);
}
.hfh-opp-card--icon.hfh-accent-green .hfh-opp-card-icon-header {
	background: linear-gradient(135deg, rgba(196,214,0,0.10), rgba(196,214,0,0.22));
	color: #8a9700;
}
.hfh-opp-card--icon.hfh-accent-green .hfh-opp-card-icon-header::after {
	background: var(--hfh-bright-green);
}
.hfh-opp-card--icon.hfh-accent-orange .hfh-opp-card-icon-header {
	background: linear-gradient(135deg, rgba(255,103,31,0.08), rgba(255,103,31,0.18));
	color: var(--hfh-orange);
}
.hfh-opp-card--icon.hfh-accent-orange .hfh-opp-card-icon-header::after {
	background: var(--hfh-orange);
}
.hfh-opp-card--icon.hfh-accent-navy .hfh-opp-card-icon-header {
	background: linear-gradient(135deg, rgba(56,89,136,0.08), rgba(56,89,136,0.18));
	color: var(--hfh-habitat-blue);
}
.hfh-opp-card--icon.hfh-accent-navy .hfh-opp-card-icon-header::after {
	background: var(--hfh-habitat-blue);
}
.hfh-opp-card--icon.hfh-accent-brick .hfh-opp-card-icon-header {
	background: linear-gradient(135deg, rgba(164,52,58,0.08), rgba(164,52,58,0.18));
	color: var(--hfh-brick);
}
.hfh-opp-card--icon.hfh-accent-brick .hfh-opp-card-icon-header::after {
	background: var(--hfh-brick);
}

/* Hide the photo-only ::after rule when this is the icon variant
   (the icon header has its own ::after stripe). */
.hfh-opp-card--icon .hfh-opp-card-photo::after { display: none; }

/* Criteria list inside eligibility cards */
.hfh-criteria-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.hfh-criteria-list li {
	position: relative;
	padding: 6px 0 6px 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hfh-body-text);
	border-bottom: 1px solid rgba(0,0,0,0.04);
}
.hfh-criteria-list li:last-child { border-bottom: none; }
.hfh-criteria-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hfh-bright-blue);
}
.hfh-opp-card.hfh-accent-green .hfh-criteria-list li::before { background: var(--hfh-bright-green); }
.hfh-opp-card.hfh-accent-orange .hfh-criteria-list li::before { background: var(--hfh-orange); }
.hfh-opp-card.hfh-accent-navy .hfh-criteria-list li::before { background: var(--hfh-habitat-blue); }
.hfh-opp-card.hfh-accent-brick .hfh-criteria-list li::before { background: var(--hfh-brick); }

/* Consistent 1200px max-width across all eligibility rows so the
   section header, card grid, and "additional requirements" panel
   all share the same horizontal alignment. */
.hfh-home-eligibility .et_pb_row {
	max-width: 1200px !important;
}

/* Eligibility cards row — 3 equal-height columns with consistent gap,
   matching the Volunteer page's opportunity card grid pattern. */
.hfh-home-eligibility .et_pb_row:nth-child(2) {
	margin-top: 56px !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px !important;
}
.hfh-home-eligibility .et_pb_row:nth-child(2) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}

/* "Additional Eligibility Requirements" footer row */
.hfh-home-eligibility .et_pb_row:nth-child(3) {
	margin-top: 48px !important;
}
.hfh-extra-reqs-wrap {
	margin: 0 !important;
}
.hfh-extra-reqs {
	background: var(--hfh-white);
	border: 1px solid #EBEBEB;
	border-radius: 12px;
	padding: 28px 32px;
}
.hfh-extra-reqs-title {
	font-family: var(--hfh-font-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 16px !important;
}
.hfh-extra-reqs ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
}
.hfh-extra-reqs li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--hfh-body-text);
	font-size: 15px;
	line-height: 1.5;
}
.hfh-extra-reqs li i {
	color: var(--hfh-bright-blue);
	font-size: 16px;
	margin-top: 3px;
	flex-shrink: 0;
}

/* --- Document checklist cards (2x2 grid) ---------------------- */
/* Match the eligibility section width so header + grid line up. */
.hfh-home-docs .et_pb_row {
	max-width: 1200px !important;
}
.hfh-home-docs .et_pb_row:nth-child(2) {
	margin-top: 56px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px !important;
}
.hfh-home-docs .et_pb_row:nth-child(2) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}
/* The stack contains 2 cards in a Divi text module. Apply flex to the
   .et_pb_text_inner (where the actual cards live) so they space evenly
   with a 24px gap between them. Also stretch the wrapper to fill the
   column height so left & right stacks line up at the bottom. */
.hfh-doc-stack {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100%;
	flex: 1;
}
.hfh-doc-stack > .et_pb_text_inner {
	display: flex !important;
	flex-direction: column;
	gap: 24px;
	height: 100%;
}
.hfh-doc-stack > .et_pb_text_inner > .hfh-doc-card {
	margin: 0;
	flex: 1 1 auto;
}
.hfh-doc-card {
	background: var(--hfh-white);
	border-radius: 14px;
	padding: 28px 32px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
	border: 1px solid #EBEBEB;
	border-top: 4px solid var(--hfh-bright-blue);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hfh-doc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.hfh-doc-blue   { border-top-color: var(--hfh-bright-blue); }
.hfh-doc-green  { border-top-color: var(--hfh-bright-green); }
.hfh-doc-orange { border-top-color: var(--hfh-orange); }
.hfh-doc-navy   { border-top-color: var(--hfh-habitat-blue); }
.hfh-doc-brick  { border-top-color: var(--hfh-brick); }
.hfh-doc-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--hfh-blue-tint);
	color: var(--hfh-bright-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 16px;
}
.hfh-doc-green .hfh-doc-card-icon   { background: rgba(196,214,0,0.15); color: #8a9700; }
.hfh-doc-orange .hfh-doc-card-icon  { background: rgba(255,103,31,0.12); color: var(--hfh-orange); }
.hfh-doc-navy .hfh-doc-card-icon    { background: rgba(56,89,136,0.10);  color: var(--hfh-habitat-blue); }
.hfh-doc-brick .hfh-doc-card-icon   { background: rgba(164,52,58,0.10);  color: var(--hfh-brick); }
.hfh-doc-card h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	color: var(--hfh-dark-text) !important;
	font-weight: 700 !important;
	margin: 0 0 16px !important;
	line-height: 1.2;
}
.hfh-doc-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.hfh-doc-list li {
	position: relative;
	padding: 10px 0 10px 28px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--hfh-body-text);
	border-bottom: 1px solid rgba(0,0,0,0.05);
}
.hfh-doc-list li:last-child { border-bottom: none; }
.hfh-doc-list li::before {
	content: '\f00c'; /* fa-check */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 12px;
	color: var(--hfh-bright-blue);
	font-size: 12px;
}
.hfh-doc-green .hfh-doc-list li::before  { color: #8a9700; }
.hfh-doc-orange .hfh-doc-list li::before { color: var(--hfh-orange); }
.hfh-doc-navy .hfh-doc-list li::before   { color: var(--hfh-habitat-blue); }
.hfh-doc-brick .hfh-doc-list li::before  { color: var(--hfh-brick); }

/* --- Application timeline (Homeownership "How to Apply") ----- */
/* These rules are SCOPED to .hfh-home-process so they don't collide
   with the About Us page timeline (which also uses .hfh-timeline but
   has a completely different markup). Without the scoping prefix the
   `margin: 0 !important` here would override the centered-margin auto
   on the About Us timeline. */
.hfh-home-process .et_pb_row {
	max-width: 900px !important;
}
.hfh-timeline-wrap {
	margin: 48px 0 !important;
}
.hfh-home-process .hfh-timeline {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
}
.hfh-home-process .hfh-timeline::before {
	content: '';
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 28px;
	width: 2px;
	background: linear-gradient(
		to bottom,
		var(--hfh-bright-blue),
		var(--hfh-bright-green) 33%,
		var(--hfh-orange) 66%,
		var(--hfh-habitat-blue)
	);
	border-radius: 2px;
}
.hfh-home-process .hfh-timeline-step {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 24px;
	padding: 16px 0;
}
.hfh-home-process .hfh-timeline-step + .hfh-timeline-step {
	border-top: 1px dashed rgba(0,0,0,0.06);
	margin-top: 8px;
	padding-top: 24px;
}
.hfh-home-process .hfh-timeline-marker {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hfh-bright-blue);
	color: var(--hfh-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hfh-font-serif);
	font-size: 22px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	position: relative;
	z-index: 1;
}
.hfh-home-process .hfh-timeline-step:nth-child(1) .hfh-timeline-marker { background: var(--hfh-bright-blue); }
.hfh-home-process .hfh-timeline-step:nth-child(2) .hfh-timeline-marker { background: var(--hfh-bright-green); }
.hfh-home-process .hfh-timeline-step:nth-child(3) .hfh-timeline-marker { background: var(--hfh-orange); }
.hfh-home-process .hfh-timeline-step:nth-child(4) .hfh-timeline-marker { background: var(--hfh-habitat-blue); }
.hfh-home-process .hfh-timeline-content h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 20px !important;
	color: var(--hfh-dark-text) !important;
	font-weight: 700 !important;
	margin: 4px 0 8px !important;
	line-height: 1.2;
}
.hfh-home-process .hfh-timeline-content p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--hfh-body-text);
	margin: 0 !important;
}
.hfh-process-note-wrap {
	margin-top: 16px !important;
}
.hfh-process-note,
.et_pb_text_inner p.hfh-process-note {
	background: var(--hfh-blue-tint) !important;
	border-radius: 10px !important;
	padding: 32px 40px !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 !important;
}
@media (max-width: 768px) {
	.hfh-process-note,
	.et_pb_text_inner p.hfh-process-note {
		padding: 24px 22px !important;
	}
}
.hfh-process-note strong {
	color: var(--hfh-dark-text);
}

/* --- A Bridge Home callout (on habitat-blue bg) --------------- */
.hfh-home-bridge .et_pb_row {
	max-width: 1100px !important;
}
.hfh-bridge-card-wrap {
	margin: 0 !important;
}
.hfh-bridge-card {
	background: var(--hfh-white);
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.15);
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 32px;
	align-items: center;
}
.hfh-bridge-card-icon {
	width: 100px;
	height: 100px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--hfh-bright-blue), var(--hfh-habitat-blue));
	color: var(--hfh-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	box-shadow: 0 8px 24px rgba(56,89,136,0.25);
}
.hfh-bridge-card-body h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 26px !important;
	color: var(--hfh-dark-text) !important;
	margin: 4px 0 12px !important;
	line-height: 1.2;
}
.hfh-bridge-card-body p {
	color: var(--hfh-body-text);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 12px !important;
}
.hfh-bridge-card-body p:last-child { margin-bottom: 0 !important; }
.hfh-bridge-card-action {
	flex: 0 0 auto;
}
.hfh-bridge-card-action .hfh-btn i {
	margin-left: 8px;
	font-size: 12px;
	transition: transform 0.2s ease;
}
.hfh-bridge-card-action .hfh-btn:hover i {
	transform: translateX(4px);
}


/* ====== 23h2. A BRIDGE HOME PAGE ============================== */
/* Patterns specific to /bridge-home/. Most of the page reuses existing
   classes (.hfh-opp-card, .hfh-fact-badges, .hfh-alert, .hfh-bridge-card,
   .hfh-page-intro-section). These are the page-specific additions. */

/* "What is A Bridge Home" — text-only section, narrow for readability. */
.hfh-bridge-what .et_pb_row {
	max-width: 820px !important;
}
.hfh-bridge-what .hfh-fact-badges-wrap {
	max-width: 900px;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 32px !important;
}

/* Cohort schedule alert — narrower row */
.hfh-bridge-schedule .et_pb_row {
	max-width: 900px !important;
}

/* Curriculum 6-card grid — 3 columns × 2 rows, equal heights. */
.hfh-bridge-curriculum .et_pb_row {
	max-width: 1200px !important;
}
.hfh-bridge-curriculum .et_pb_row:nth-child(2),
.hfh-bridge-curriculum .et_pb_row:nth-child(3) {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px !important;
	margin-top: 32px !important;
}
.hfh-bridge-curriculum .et_pb_row:nth-child(2) > .et_pb_column,
.hfh-bridge-curriculum .et_pb_row:nth-child(3) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}
/* The 3rd row sits directly below the 2nd — keep the same 28px gap
   between rows as between columns so all 6 cards read as one grid. */
.hfh-bridge-curriculum .et_pb_row:nth-child(3) {
	margin-top: 28px !important;
}

/* "Who Should Join" — centered checklist with green-check icons */
.hfh-bridge-who .et_pb_row {
	max-width: 820px !important;
}
.hfh-who-list-outer { margin-top: 32px !important; }
.hfh-who-list-wrap {
	display: flex;
	justify-content: center;
}
.hfh-who-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-block;
	text-align: left;
}
.hfh-who-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 10px 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--hfh-body-text);
}
.hfh-who-list li i {
	color: var(--hfh-bright-green);
	font-size: 20px;
	margin-top: 2px;
	flex-shrink: 0;
}

/* Interest Form embed placeholder — same dotted-box pattern as the
   donation form, but with a habitat-blue accent (info collection
   rather than transactional). When Fluent Forms is wired up,
   paste the shortcode inside the Code module; the dotted-border
   card stays attached to the wrapper. */
.hfh-bridge-form-section .et_pb_row {
	max-width: 720px !important;
}
.hfh-bridge-form-embed {
	background: var(--hfh-white);
	border: 2px dashed rgba(56,89,136,0.4);
	border-radius: 16px;
	padding: 32px !important;
	min-height: 320px;
	margin-top: 32px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.hfh-bridge-form-embed > .et_pb_code_inner {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}
.hfh-bridge-form-embed > .et_pb_code_inner > *:last-child,
.hfh-bridge-form-embed > .et_pb_code_inner > div:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* CTA section row width (Bridge → Homeownership card) */
.hfh-bridge-cta .et_pb_row {
	max-width: 1100px !important;
}


/* ====== 23i. HOME REPAIR PAGE ================================ */
/* New patterns introduced here that are reusable on other pages:
   - Alert "success" variant (green) — for application-open notices
   - 4-card eligibility grid (extends the 3-card pattern)
   - Apply-step badge (step number floats over the icon header)
   - Veteran program callout card (premium banner with badge)
   - Accessibility note panel */

/* --- Alert success variant (green left border) --------------- */
.hfh-alert--success {
	background: rgba(196,214,0,0.08);
	border-left-color: var(--hfh-bright-green);
}
.hfh-alert--success .hfh-alert-icon {
	color: #8a9700;  /* darker green for legibility */
}

/* --- Alert danger variant (red left border) — applications-closed notices -- */
.hfh-alert--danger {
	background: rgba(164,52,58,0.07);
	border-left-color: var(--hfh-brick);
}
.hfh-alert--danger .hfh-alert-icon {
	color: var(--hfh-brick);
}

/* --- 4-card eligibility grid --------------------------------- */
.hfh-repair-eligibility .et_pb_row {
	max-width: 1200px !important;
}
.hfh-repair-eligibility .et_pb_row:nth-child(2) {
	margin-top: 56px !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px !important;
}
.hfh-repair-eligibility .et_pb_row:nth-child(2) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}

/* --- Repair types grid is just the items-we-accept pattern --- */
.hfh-repair-types .et_pb_row {
	max-width: 1100px !important;
}
.hfh-repair-types .hfh-items-grid {
	margin-top: 48px;
}

/* --- "How to Apply" 3-card grid w/ apply-step badge ---------- */
.hfh-repair-apply .et_pb_row {
	max-width: 1200px !important;
}
.hfh-repair-apply .et_pb_row:nth-child(2) {
	margin-top: 56px !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px !important;
}
.hfh-repair-apply .et_pb_row:nth-child(2) > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}

/* Big numeric step badge floats in the corner of the icon header */
.hfh-apply-step {
	position: absolute;
	top: 16px;
	right: 20px;
	font-family: var(--hfh-font-serif);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.18;
	color: currentColor;
	letter-spacing: -0.02em;
	user-select: none;
}

/* --- Accessibility note (under required documents) ----------- */
.hfh-home-docs .et_pb_row:nth-child(3) {
	margin-top: 48px !important;
}
.hfh-accessibility-note-wrap {
	margin: 0 !important;
}
.hfh-accessibility-note {
	background: var(--hfh-white);
	border: 1px solid #EBEBEB;
	border-radius: 12px;
	padding: 24px 28px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.hfh-accessibility-note > i {
	color: var(--hfh-bright-blue);
	font-size: 28px;
	flex-shrink: 0;
	margin-top: 2px;
}
.hfh-accessibility-note p {
	color: var(--hfh-body-text);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 !important;
}
.hfh-accessibility-note strong { color: var(--hfh-dark-text); }
.hfh-accessibility-note a { color: var(--hfh-bright-blue); font-weight: 600; }
.hfh-accessibility-note a:hover { color: var(--hfh-habitat-blue); }

/* --- Veteran Home Repair Program callout (premium banner) ---- */
.hfh-repair-veteran .et_pb_row {
	max-width: 1100px !important;
}
.hfh-veteran-card-wrap {
	margin: 0 !important;
}
.hfh-veteran-card {
	background: var(--hfh-white);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.15);
	overflow: hidden;
	position: relative;
}
.hfh-veteran-card-badge {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
}
.hfh-veteran-badge-label {
	display: inline-block;
	/* Amanda 7/20: "Currently Closed" bubble should read red, matching the
	   .hfh-alert--danger closed-status colour rather than the green open state. */
	background: linear-gradient(135deg, var(--hfh-brick), #7E2429);
	color: var(--hfh-white);
	font-family: var(--hfh-font-sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(196,214,0,0.35);
}
.hfh-veteran-card-content {
	padding: 40px;
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 32px;
	align-items: start;
}
.hfh-veteran-card-icon {
	width: 100px;
	height: 100px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--hfh-habitat-blue), #1e3455);
	color: var(--hfh-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 44px;
	box-shadow: 0 8px 24px rgba(56,89,136,0.25);
}
.hfh-veteran-card-body h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 28px !important;
	color: var(--hfh-dark-text) !important;
	margin: 4px 0 14px !important;
	line-height: 1.2;
	padding-right: 120px;  /* leave room for the absolute-positioned badge */
}
.hfh-veteran-card-body p {
	color: var(--hfh-body-text);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 12px !important;
}
.hfh-veteran-card-body p:last-child { margin-bottom: 0 !important; }
.hfh-veteran-gratitude {
	background: rgba(56,89,136,0.06);
	border-radius: 8px;
	padding: 12px 16px;
	margin-top: 16px !important;
	color: var(--hfh-habitat-blue) !important;
}
.hfh-veteran-card-action {
	padding: 0 40px 40px;
	text-align: right;
}
@media (max-width: 600px) {
	.hfh-veteran-card-action {
		text-align: center;
	}
}
.hfh-veteran-card-action .hfh-btn i {
	margin-left: 8px;
	font-size: 12px;
	transition: transform 0.2s ease;
}
.hfh-veteran-card-action .hfh-btn:hover i {
	transform: translateX(4px);
}


/* ====== 23j. ANCHOR NAV (long pages: About Us, ReStore) ===== */
/* A horizontal sticky pill nav that appears between the page hero and
   the first content section. STICKS to the top of the viewport once
   scrolled to — positioned just below the site's fixed header (the
   header is 100px tall and z-index 1000, so this nav uses top: 100px
   and a higher z-index to land tidily underneath it).

   To center on the FULL viewport (not the default 1180px Divi row),
   the section uses the "full-bleed" pattern: negative margin pulls it
   to viewport edges and width is set to 100vw. The inner row/column
   chain is overridden to 100% width with higher-specificity selectors
   so a Divi default `max-width: 1200px !important` on .et_pb_row no
   longer wins. */
.hfh-anchor-nav-section {
	background: transparent !important;
	padding: 0 !important;
	position: sticky;
	top: 100px; /* site header is fixed at top:0 / height:100px */
	z-index: 999; /* sits just below the fixed header (1000) */
	pointer-events: none;
	/* Full-bleed: span the entire viewport regardless of parent constraints */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
/* Boosted specificity (.hfh-anchor-nav-section[class] = (0,2,0); whole
   selector (0,4,0)) so the Divi default `.et_pb_post_content .et_pb_row
   { max-width: 1200px !important }` rule doesn't keep the row at 1200px
   when we need it to span the full viewport. */
.hfh-anchor-nav-section[class] .et_pb_row[class],
.hfh-anchor-nav-section[class] .et_pb_column[class],
.hfh-anchor-nav-section[class] .hfh-anchor-nav-wrap[class],
.hfh-anchor-nav-section[class] .et_pb_code_inner {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Breathing room above + below the pill. Needs higher specificity than the
   full-bleed reset rule above (which zeroes .hfh-anchor-nav-wrap padding),
   so qualify with .et_pb_column. pointer-events stays OFF on this transparent
   padding band (it's moved onto the pill) so the added space doesn't block
   clicks on the content scrolling behind the sticky bar. */
.hfh-anchor-nav-section[class] .et_pb_column[class] .hfh-anchor-nav-wrap[class] {
	padding: 24px 0 !important;
	pointer-events: none;
}
.hfh-anchor-nav {
	display: flex;
	align-items: center;
	pointer-events: auto;
	/* Per Amanda 6/11 — keep the nav a CONSTANT single row. Previously it
	   wrapped to 2 rows on narrower desktop widths (About Us has 7 pills),
	   which made the sticky bar taller than the anchor scroll-offset and
	   covered the section heading. Now it stays one row and scrolls
	   horizontally if it can't fit; `safe center` centers it when it fits
	   without clipping the ends when it overflows. */
	justify-content: safe center;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	gap: 4px;
	max-width: 1100px;
	width: calc(100% - 24px);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.04);
}
.hfh-anchor-nav::-webkit-scrollbar { display: none; }
.hfh-anchor-nav a {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hfh-dark-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}
.hfh-anchor-nav a:hover {
	background: var(--hfh-bright-blue);
	color: #FFFFFF;
}

/* Anchor-scroll offset (Amanda 6/11). scroll-padding-top on the scroll
   container is the ROBUST way to keep hash targets below the fixed bars —
   browsers reliably honor it, whereas scroll-margin-top on a 0-height /
   visibility:hidden marker can be ignored (which is why the section
   heading was landing UNDER the sticky bar). Base = fixed header (100px)
   + buffer. Pages that ALSO have the sticky anchor nav get a taller
   offset via :has() so the heading clears both bars. */
html { scroll-padding-top: 122px; }
html:has(.hfh-anchor-nav-section) { scroll-padding-top: 182px; }

/* Hidden anchor markers — scroll targets for the nav. scroll-margin kept
   as a secondary hint; scroll-padding-top above is the primary mechanism. */
.hfh-anchor-target-marker {
	display: block;
	height: 0;
	/* 100px site header + ~56px sticky anchor nav (now a constant single
	   row) + ~24px breathing room = 180px, so the section eyebrow/heading
	   always lands clearly BELOW both bars when an anchor is clicked. */
	scroll-margin-top: 180px;
	visibility: hidden;
}

@media (max-width: 900px) {
	.hfh-anchor-nav {
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		border-radius: 16px;
		max-width: calc(100% - 24px);
		padding: 6px 8px;
		scrollbar-width: none;
	}
	.hfh-anchor-nav::-webkit-scrollbar { display: none; }
	.hfh-anchor-nav a { font-size: 12px; padding: 6px 12px; }
}
@media (max-width: 600px) {
	.hfh-anchor-nav { gap: 0; }
}


/* ====== 23n. VIDEO MODAL (Volunteer Orientation, Amanda 5/19) === */
/* Lightbox overlay that plays an embedded YouTube iframe over the page.
   Backdrop is darkened; click-outside or Escape closes. */
.hfh-video-modal-section { padding: 0 !important; }
.hfh-video-modal-section .et_pb_row { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.hfh-video-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.hfh-video-modal.is-open { display: flex; }
.hfh-video-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}
.hfh-video-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 960px;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.hfh-video-modal-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.hfh-video-modal-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.hfh-video-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.96);
	color: var(--hfh-dark-text);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}
.hfh-video-modal-close:hover { transform: scale(1.05); background: #FFFFFF; }
body.hfh-modal-open { overflow: hidden; }

/* Stack the primary + secondary CTAs at the bottom of an opportunity
   card so the corp packet download sits below the inquiry button. */
.hfh-opp-card-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}
.hfh-card-link--secondary {
	font-size: 12px !important;
	color: var(--hfh-gray) !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.05em !important;
}
.hfh-card-link--secondary:hover { color: var(--hfh-bright-blue) !important; }
.hfh-card-link--secondary i { font-size: 11px; }


/* ====== 23m. DONATE PAGE — Ways to Give layout (Amanda 5/19) === */
/* Donate Online (intro + tax note + form embed) takes the LEFT column
   full-height. Donate by Check + DAF cards stack VERTICALLY in the
   RIGHT column. Both columns visually balance because the form embed
   on the left is tall and the two stacked cards on the right add up to
   similar height. */
.hfh-ways-to-give .hfh-donate-online-col,
.hfh-ways-to-give .hfh-give-stack {
	display: flex !important;
	flex-direction: column;
	gap: 20px;
}
.hfh-ways-to-give .hfh-donate-online-col > .et_pb_module,
.hfh-ways-to-give .hfh-give-stack > .et_pb_module {
	margin-bottom: 0 !important;
}
/* Each method card in the stacked right column gets a white card frame */
.hfh-ways-to-give .hfh-give-method {
	background: #FFFFFF;
	border: 1px solid #EAEAEA;
	border-radius: 14px;
	padding: 28px 28px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.hfh-ways-to-give .hfh-give-method .et_pb_text_inner > .hfh-give-icon { margin-bottom: 16px; }
.hfh-ways-to-give .hfh-give-method h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 10px 0 !important;
}
.hfh-ways-to-give .hfh-give-method p {
	font-size: 14px;
	color: var(--hfh-gray);
	line-height: 1.65;
}

/* Inline tax-exempt note shown right under "Donate Online" so it's the
   first reassurance a grant officer / donor sees. */
.hfh-tax-inline-note {
	margin-top: 12px !important;
	padding: 10px 14px;
	background: var(--hfh-blue-tint, #E8F7FB);
	border-radius: 8px;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--hfh-gray) !important;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.hfh-tax-inline-note i {
	color: var(--hfh-bright-blue);
	margin-top: 2px;
}
.hfh-tax-inline-note strong { color: var(--hfh-dark-text); white-space: nowrap; }

/* Compact tax callout — used at the bottom of the Donate page so it
   visually echoes the inline note without dominating the section. */
.hfh-tax-callout--compact {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 24px !important;
}
.hfh-tax-callout--compact p { font-size: 14px; }
.hfh-tax-callout-wrap { display: flex; justify-content: center; }

/* Sponsor a Home form section — sits between Corporate Partnerships
   and Donation Lifecycle as the click target for the corporate card's
   "Start an Inquiry" CTA. */
.hfh-sponsor-form-section .et_pb_row { max-width: 880px !important; }
.hfh-sponsor-form-section .hfh-section-label,
.hfh-sponsor-form-section .hfh-section-title,
.hfh-sponsor-form-section .hfh-section-subtitle {
	text-align: center;
}
.hfh-sponsor-form-section .hfh-section-label {
	display: flex !important;
	justify-content: center;
	margin-left: auto !important;
	margin-right: auto !important;
}
.hfh-sponsor-form-section .hfh-section-subtitle {
	max-width: 640px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Anchor target marker — also used outside About Us. Same scroll-margin
   buffer so the destination heading isn't covered by the sticky header. */
.hfh-anchor-target-marker {
	display: block;
	height: 0;
	/* 100px site header + ~56px sticky anchor nav (now a constant single
	   row) + ~24px breathing room = 180px, so the section eyebrow/heading
	   always lands clearly BELOW both bars when an anchor is clicked. */
	scroll-margin-top: 180px;
	visibility: hidden;
}


/* ====== 23l. HOME REPAIR — VETERAN CALLOUT (jump link) ===== */
/* Sits just under the Jackson County application alert. Highlights the
   Veteran Repair Program for veteran visitors so they don't have to
   scroll the whole page to find it. Per Amanda 5/19. */
.hfh-veteran-callout-section .et_pb_row {
	max-width: 1100px !important;
}
.hfh-veteran-callout {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	background: linear-gradient(135deg, #FFF8E5 0%, #FFF0CC 100%);
	border: 1px solid #F0D070;
	border-radius: 12px;
	text-decoration: none !important;
	color: var(--hfh-dark-text) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hfh-veteran-callout:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(56, 89, 136, 0.18);
	border-color: var(--hfh-bright-blue);
	color: var(--hfh-dark-text) !important;
}
.hfh-veteran-callout-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--hfh-habitat-blue);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.hfh-veteran-callout-body {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.5;
}
.hfh-veteran-callout-body strong { color: var(--hfh-dark-text); }
.hfh-veteran-callout-body span { color: var(--hfh-gray); display: inline; }
.hfh-veteran-callout-arrow {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(56, 89, 136, 0.12);
	color: var(--hfh-habitat-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: transform 0.2s ease, background 0.2s ease;
}
.hfh-veteran-callout:hover .hfh-veteran-callout-arrow {
	transform: translateY(3px);
	background: var(--hfh-habitat-blue);
	color: #FFFFFF;
}
@media (max-width: 600px) {
	.hfh-veteran-callout { flex-wrap: wrap; }
	.hfh-veteran-callout-body { flex: 1 1 100%; order: 3; }
}


/* ====== 23k. ABOUT US — WHAT DRIVES US (3-up cards) ========== */
/* Replaces the old left-text/right-image Mission section + standalone
   "Our Work" section. Three matching cards: Mission / Vision / Work.
   Per Amanda 5/19. */
.hfh-drives .hfh-drives-label,
.hfh-drives .hfh-drives-title,
.hfh-drives .hfh-drives-subtitle {
	text-align: center;
}
.hfh-drives .hfh-drives-label {
	display: flex !important;
	justify-content: center;
	margin-left: auto !important;
	margin-right: auto !important;
}
.hfh-drives .hfh-drives-subtitle {
	max-width: 720px;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Per Amanda 6/11 — Mission / Vision / Work are now three STACKED
   landscape rectangles (top to bottom) instead of a 3-up grid, for
   variety vs the next section. The cards row becomes a single centered
   column; each card lays out horizontally (icon left, heading + copy
   right) via grid placement (the DOM order is icon, h3, p — grid lets
   us position them without touching the markup). */
.hfh-drives .et_pb_row:nth-of-type(2) {
	margin-top: 40px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	max-width: 880px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.hfh-drives .et_pb_row:nth-of-type(2) > .et_pb_column {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	display: block !important;
}
.hfh-drives .et_pb_row:nth-of-type(2) > .et_pb_column > .et_pb_text {
	width: 100%;
	margin: 0 !important;
}
.hfh-drives-card {
	background: #FFFFFF;
	border: 1px solid #EAEAEA;
	border-radius: 16px;
	padding: 26px 30px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	text-align: left;
	display: grid;
	grid-template-columns: 60px 1fr;
	grid-template-rows: auto auto;
	column-gap: 22px;
	row-gap: 6px;
	align-items: center;
}
.hfh-drives-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	border-color: var(--hfh-bright-blue);
}
.hfh-drives-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	width: 60px;
	height: 60px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: #FFFFFF;
	margin: 0 !important;
}
.hfh-drives-icon.hfh-accent-blue   { background: var(--hfh-bright-blue); }
.hfh-drives-icon.hfh-accent-green  { background: var(--hfh-habitat-green); }
.hfh-drives-icon.hfh-accent-orange { background: var(--hfh-orange); }
.hfh-drives-icon.hfh-accent-navy   { background: var(--hfh-habitat-blue); }
.hfh-drives-card h3 {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 !important;
	line-height: 1.2;
	align-self: end;
}
.hfh-drives-card p {
	grid-column: 2;
	grid-row: 2;
	font-size: 15px;
	color: var(--hfh-gray);
	line-height: 1.6;
	margin: 0 !important;
	align-self: start;
}
@media (max-width: 600px) {
	.hfh-drives-card {
		grid-template-columns: 48px 1fr;
		column-gap: 16px;
		padding: 22px 20px;
	}
	.hfh-drives-icon { width: 48px; height: 48px; font-size: 22px; }
	.hfh-drives-card h3 { font-size: 20px !important; }
}


/* ====== 23j-prep. HIDE SITE HEADER/FOOTER ON LANDING PAGES ===== */
/* PER AMANDA 5/19 — Women Build (232) and Raise the Roof (233) were
   originally built as standalone landing pages that hid the site
   header/footer. Amanda wants them to use the themed template (site
   nav visible), so the .et-l--header / .et-l--footer hide rules have
   been removed. The landing-page-specific slim brand bar and slim
   footer that USED to be embedded in the page content are now hidden
   below so they don't double up with the global header/footer. */

body.page-id-232 .hfh-landing-topbar-section,
body.page-id-233 .hfh-landing-topbar-section,
body.page-id-232 .hfh-landing-footer-section,
body.page-id-233 .hfh-landing-footer-section {
	display: none !important;
}


/* ====== 23j. LANDING PAGES (Women Build, Raise the Roof) ===== */
/* These are standalone marketing landing pages — no site header, no
   site footer. They have their own slim brand bar at the top and a
   minimal contact footer at the bottom. Each event has its own brand
   palette: Women Build = pink/magenta, Raise the Roof = navy + gold. */

/* Landing page color tokens */
:root {
	--wb-pink:           #E91A6E;
	--wb-pink-dark:      #B91458;
	--wb-pink-light:     #FFE5EF;
	--wb-pink-tint:      #FFF7FA;
	/* RTR theme recolored gold -> Habitat blue (Amanda/Lee 7/17): the gold
	   clashed with the warm bokeh hero photo; blue + gold reads far better.
	   Var names are kept (to avoid touching every rule) but now hold blues;
	   white text sits on these blue surfaces — see the recolor block below. */
	--rtr-gold:          #385988; /* was #C9A14C (gold) */
	--rtr-gold-dark:     #2A4570; /* was #9E7C32 */
	--rtr-gold-light:    #E8EEF5; /* was #F4E9CC */
	--rtr-navy:          #1E3455;
}

/* RTR recolor support: white text on the (now blue) date card + gold buttons;
   and hide the "Become a Sponsor" buttons until the event goes live (Amanda 7/10
   — the filled .hfh-btn-gold; outline buttons Event Details / Ask a Question stay). */
body.page-id-233 .hfh-rtr-savedate-date,
body.page-id-233 .hfh-rtr-savedate-month,
body.page-id-233 .hfh-rtr-savedate-day,
body.page-id-233 .hfh-rtr-savedate-year,
body.page-id-233 .hfh-btn-gold {
	color: #ffffff !important;
}
body.page-id-233 .hfh-btn-gold {
	display: none !important; /* remove this line to re-show sponsor CTAs */
}

body.page-id-232 #et-boc,
body.page-id-233 #et-boc {
	background: var(--hfh-white);
}

/* --- Slim top bar -------------------------------------------- */
.hfh-landing-topbar-section .et_pb_row {
	max-width: 1280px !important;
	width: 92% !important;
}
.hfh-landing-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.hfh-landing-logo img {
	max-height: 44px;
	width: auto;
	display: block;
}
.hfh-landing-backlink {
	font-size: 13px;
	font-weight: 600;
	color: var(--hfh-gray-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease;
}
.hfh-landing-backlink:hover { color: var(--hfh-bright-blue); }
.hfh-landing-topbar--dark .hfh-landing-backlink { color: rgba(255,255,255,0.7); }
.hfh-landing-topbar--dark .hfh-landing-backlink:hover { color: var(--hfh-white); }

/* --- Slim landing footer ------------------------------------- */
.hfh-landing-footer-section .et_pb_row {
	max-width: 1280px !important;
	width: 92% !important;
}
.hfh-landing-footer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 40px;
	align-items: center;
	color: rgba(255,255,255,0.75);
}
.hfh-landing-footer-brand img {
	max-height: 48px;
	width: auto;
	display: block;
}
.hfh-landing-footer-info p,
.hfh-landing-footer-meta p {
	margin: 0 0 4px !important;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255,255,255,0.75);
}
.hfh-landing-footer-info a,
.hfh-landing-footer-meta a {
	color: rgba(255,255,255,0.95);
	font-weight: 600;
}
.hfh-landing-footer-info a:hover,
.hfh-landing-footer-meta a:hover { color: var(--hfh-bright-blue); }
.hfh-landing-footer-meta { text-align: right; }


/* ========================================================
   SHARED: text helpers that force proper alignment through
   Divi's .et_pb_text wrapper. Most layout issues come from
   Divi's default text-align:start on every text module.
   ======================================================== */

/* A "centered section" lays out its column contents centered.
   Apply .hfh-wb-section-centered or .hfh-rtr-section-centered
   to the section element. */
.hfh-wb-section-centered .et_pb_row,
.hfh-rtr-section-centered .et_pb_row {
	max-width: 980px !important;
	width: 92% !important;
}
.hfh-wb-section-centered .et_pb_column,
.hfh-rtr-section-centered .et_pb_column {
	text-align: center;
}
.hfh-wb-section-centered .et_pb_text,
.hfh-rtr-section-centered .et_pb_text {
	text-align: center !important;
}
.hfh-wb-section-centered .et_pb_text > .et_pb_text_inner,
.hfh-rtr-section-centered .et_pb_text > .et_pb_text_inner {
	text-align: center !important;
}


/* ======================================================== */
/* ===========  WOMEN BUILD (pink palette)  =============== */
/* ======================================================== */

/* Hero — text left, photo right (2-col) */
.hfh-wb-hero {
	background: linear-gradient(135deg, var(--wb-pink-tint) 0%, var(--wb-pink-light) 100%);
	position: relative;
	overflow: hidden;
	/* Fixed header is 100px tall and overlaps the top; clear it so the hero image
	   doesn't tuck under the menu, and keep top/bottom breathing room balanced. */
	padding: 150px 0 50px !important;
}
.hfh-wb-hero::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(233,26,110,0.12), transparent 70%);
	pointer-events: none;
}
.hfh-wb-hero .et_pb_row {
	max-width: 1280px !important;
	width: 92% !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 60px !important;
	align-items: center;
}
.hfh-wb-hero .et_pb_row > .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
}
.hfh-wb-eyebrow {
	font-family: var(--hfh-font-sans) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	color: var(--wb-pink) !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 16px !important;
}
.hfh-wb-title .et_pb_text_inner h1 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(56px, 8vw, 96px) !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	line-height: 1 !important;
	letter-spacing: -0.02em;
	margin: 0 !important;
}
.hfh-wb-lead {
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: var(--hfh-body-text) !important;
	margin: 24px 0 0 !important;
	max-width: 520px;
}
.hfh-wb-hero-photo .et_pb_image_wrap,
.hfh-wb-hero-photo { width: 100% !important; }
.hfh-wb-hero-photo img {
	width: 100% !important;
	height: auto !important;
	border-radius: 20px !important;
	box-shadow: 0 30px 80px rgba(233,26,110,0.25);
	display: block;
	transform: rotate(-1.5deg);
}
/* Zero the grid's vertical gap in the 2-column hero (a wrapped column otherwise adds
   ~60px of dead-space below the image, unbalancing it). Kept below 601px, where the
   columns stack and the 60px provides needed spacing between text and image. */
@media (min-width: 601px) {
	.hfh-wb-hero .et_pb_row { row-gap: 0 !important; }
}

/* Pink buttons */
.hfh-btn-pink, .hfh-btn-pink-outline,
.hfh-btn-white, .hfh-btn-white-outline {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 14px 28px !important;
	border-radius: 8px !important;
	border: 2px solid var(--wb-pink) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}
.hfh-btn-pink {
	background: var(--wb-pink) !important;
	color: var(--hfh-white) !important;
}
.hfh-btn-pink:hover {
	background: var(--wb-pink-dark) !important;
	border-color: var(--wb-pink-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(233,26,110,0.3);
	color: var(--hfh-white) !important;
}
.hfh-btn-pink-outline {
	background: transparent !important;
	color: var(--wb-pink) !important;
}
.hfh-btn-pink-outline:hover {
	background: var(--wb-pink) !important;
	color: var(--hfh-white) !important;
}
.hfh-btn-white {
	background: var(--hfh-white) !important;
	color: var(--wb-pink) !important;
	border-color: var(--hfh-white) !important;
}
.hfh-btn-white:hover {
	background: var(--hfh-dark-text) !important;
	color: var(--hfh-white) !important;
	border-color: var(--hfh-dark-text) !important;
	transform: translateY(-2px);
}
.hfh-btn-white-outline {
	background: transparent !important;
	color: var(--hfh-white) !important;
	border-color: var(--hfh-white) !important;
}
.hfh-btn-white-outline:hover {
	background: var(--hfh-white) !important;
	color: var(--wb-pink) !important;
}
.hfh-btn-pink::after, .hfh-btn-pink-outline::after,
.hfh-btn-white::after, .hfh-btn-white-outline::after {
	display: none !important;
}

/* CTA row utility */
.hfh-wb-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}
.hfh-wb-cta-row--center { justify-content: center; }

/* Status callout */
.hfh-wb-status-section .et_pb_row {
	max-width: 1100px !important;
	width: 92% !important;
}
.hfh-wb-status-wrap { margin: 0 !important; }
.hfh-wb-status {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	align-items: start;
	background: var(--hfh-white);
	border: 1px solid var(--wb-pink-light);
	border-left: 4px solid var(--wb-pink);
	border-radius: 12px;
	padding: 24px 28px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
	text-align: left;
}
.hfh-wb-status-icon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--wb-pink-light);
	color: var(--wb-pink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.hfh-wb-status-icon i { color: var(--wb-pink); font-size: 22px; }
.hfh-wb-status-body { min-width: 0; }
.hfh-wb-status-title {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 8px !important;
	line-height: 1.2;
}
.hfh-wb-status-sub {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 !important;
}
.hfh-wb-status-sub strong { color: var(--wb-pink); }

/* WB section labels + titles (centered when inside .hfh-wb-section-centered) */
.hfh-wb-section-label {
	font-family: var(--hfh-font-sans) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	color: var(--wb-pink) !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 12px !important;
}
.hfh-wb-section-title .et_pb_text_inner h2 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(34px, 4vw, 48px) !important;
	font-weight: 700 !important;
	color: var(--hfh-dark-text) !important;
	line-height: 1.1 !important;
	margin: 0 0 24px !important;
	letter-spacing: -0.01em;
}
.hfh-wb-prose p {
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 0 16px !important;
}
.hfh-wb-prose-center p {
	max-width: 720px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.hfh-wb-prose strong { color: var(--hfh-dark-text); }

/* Gallery */
.hfh-wb-gallery-section .et_pb_row {
	max-width: 1280px !important;
	width: 92% !important;
}
.hfh-wb-gallery-wrap { margin-top: 32px !important; }
.hfh-wb-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 240px 240px;
	gap: 16px;
}
.hfh-wb-gallery-item {
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(233,26,110,0.10);
}
.hfh-wb-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.hfh-wb-gallery-item:hover img { transform: scale(1.05); }
.hfh-wb-gallery-item--large { grid-row: span 2; }
.hfh-wb-gallery-item:nth-child(2) { grid-column: 2 / span 2; }
.hfh-wb-gallery-cta { margin-top: 32px; text-align: center; }

/* Arrow link */
.hfh-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wb-pink) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.04em;
	transition: gap 0.2s ease;
}
.hfh-link-arrow:hover { gap: 12px; color: var(--wb-pink-dark) !important; }

/* Sponsorships / Legacy Builder spotlight card — centered card, text inside left-aligned */
.hfh-wb-sponsorships .et_pb_row {
	max-width: 900px !important;
	width: 92% !important;
}
.hfh-wb-tier-card-wrap { margin: 40px 0 0 !important; text-align: left; }
.hfh-wb-tier-card {
	background: var(--hfh-white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 16px 50px rgba(233,26,110,0.12);
	border: 1px solid var(--wb-pink-light);
	text-align: left;
}
.hfh-wb-tier-header {
	background: linear-gradient(135deg, var(--wb-pink) 0%, var(--wb-pink-dark) 100%);
	padding: 32px 40px;
	color: var(--hfh-white);
	text-align: center;
}
.hfh-wb-tier-badge {
	display: inline-block;
	background: rgba(255,255,255,0.2);
	color: var(--hfh-white);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.hfh-wb-tier-header h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	margin: 0 !important;
}
.hfh-wb-spotlight { padding: 40px; text-align: left; }
.hfh-wb-spotlight-name {
	font-family: var(--hfh-font-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--hfh-dark-text);
	margin-bottom: 16px;
}
.hfh-wb-spotlight p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--hfh-body-text);
	margin: 0 0 20px !important;
}
.hfh-wb-quote {
	background: var(--wb-pink-tint);
	border-left: 4px solid var(--wb-pink);
	padding: 24px 28px;
	border-radius: 0 12px 12px 0;
	margin: 24px 0 0 !important;
}
.hfh-wb-quote-icon {
	color: var(--wb-pink);
	font-size: 28px;
	margin-bottom: 12px;
	display: block;
}
.hfh-wb-quote-icon i { color: var(--wb-pink); font-size: 28px; }
.hfh-wb-quote p {
	font-family: var(--hfh-font-serif);
	font-size: 18px !important;
	line-height: 1.6 !important;
	color: var(--hfh-dark-text) !important;
	font-style: italic;
	margin: 0 0 14px !important;
}
.hfh-wb-quote cite {
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	color: var(--wb-pink);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* WB final CTA — pink gradient bg, all centered */
.hfh-wb-final-section {
	background: linear-gradient(135deg, var(--wb-pink) 0%, var(--wb-pink-dark) 100%);
	color: var(--hfh-white);
}
.hfh-wb-final-section .et_pb_row {
	max-width: 760px !important;
	width: 92% !important;
}
.hfh-wb-final-cta-wrap { margin: 0 !important; }
.hfh-wb-final-cta { text-align: center; color: var(--hfh-white); }
.hfh-wb-final-cta h2 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(36px, 5vw, 56px) !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	margin: 0 0 16px !important;
	line-height: 1.1;
}
.hfh-wb-final-cta > p {
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: rgba(255,255,255,0.92) !important;
	margin: 0 0 32px !important;
}
.hfh-wb-final-note {
	font-size: 14px !important;
	color: rgba(255,255,255,0.75) !important;
	margin: 32px 0 0 !important;
}
.hfh-wb-final-note a {
	color: var(--hfh-white);
	font-weight: 700;
	border-bottom: 1px dotted rgba(255,255,255,0.5);
}
.hfh-wb-final-note a:hover { border-bottom-color: var(--hfh-white); }


/* ======================================================== */
/* ==========  RAISE THE ROOF (navy + gold)  ============== */
/* ======================================================== */

/* Hero — dark navy with gold accents, save-the-date block */
.hfh-rtr-hero {
	background: linear-gradient(135deg, var(--rtr-navy) 0%, var(--hfh-habitat-blue) 100%);
	color: var(--hfh-white);
	position: relative;
	overflow: hidden;
}
.hfh-rtr-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(201,161,76,0.18), transparent 60%);
	pointer-events: none;
}
.hfh-rtr-hero .et_pb_row {
	max-width: 900px !important;
	width: 92% !important;
	position: relative;
	z-index: 2;
}
.hfh-rtr-hero .et_pb_column,
.hfh-rtr-hero .et_pb_text {
	text-align: center !important;
}
.hfh-rtr-hero .et_pb_text > .et_pb_text_inner {
	text-align: center !important;
}
.hfh-rtr-eyebrow {
	font-family: var(--hfh-font-sans) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	color: var(--rtr-gold) !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 16px !important;
}
.hfh-rtr-title .et_pb_text_inner h1 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(60px, 10vw, 120px) !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	line-height: 1 !important;
	letter-spacing: -0.02em;
	margin: 0 0 24px !important;
}
.hfh-rtr-lead {
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: rgba(255,255,255,0.85) !important;
	margin: 0 auto 48px !important;
	max-width: 640px;
}

/* Logo image module added by hand inside the RTR hero (between the
   "Annual Benefit Dinner" eyebrow and the title). Divi 5 ships this
   as an et_flex_module which has its own intrinsic display: flex,
   but in the hero's centered column the image was rendering at
   awkward dimensions / invisible. These overrides give it a proper
   logo presentation: centered, capped at 320×120, with vertical
   breathing room above and below. */
.hfh-rtr-hero .et_pb_image {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 24px auto 32px !important;
	max-width: 100% !important;
	text-align: center;
}
.hfh-rtr-hero .et_pb_image .et_pb_image_wrap {
	display: inline-block !important;
	margin: 0 auto;
	max-width: 420px;
	width: 100%;
}
.hfh-rtr-hero .et_pb_image img {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	max-width: 100% !important;
	max-height: 160px !important;   /* keeps 8:3 aspect ratio at 420×~158 */
	width: auto !important;
	height: auto !important;
	margin: 0 auto;
}

/* Save the Date hero block */
.hfh-rtr-savedate {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	align-items: center;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(201,161,76,0.3);
	border-radius: 16px;
	padding: 20px 32px 20px 24px;
	margin: 0 auto 40px;
	backdrop-filter: blur(8px);
	text-align: left;
}
.hfh-rtr-savedate-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--rtr-gold);
	color: var(--rtr-navy);
	border-radius: 12px;
	padding: 12px 20px;
	min-width: 100px;
}
.hfh-rtr-savedate-month {
	font-family: var(--hfh-font-sans);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hfh-rtr-savedate-day {
	font-family: var(--hfh-font-serif);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	margin: 4px 0;
}
.hfh-rtr-savedate-year {
	font-family: var(--hfh-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.hfh-rtr-savedate-info { text-align: left; }
.hfh-rtr-savedate-label {
	font-size: 11px !important;
	font-weight: 800 !important;
	color: var(--rtr-gold) !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 4px !important;
}
.hfh-rtr-savedate-venue {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	margin: 0 0 2px !important;
	line-height: 1.2;
}
.hfh-rtr-savedate-room {
	font-size: 14px !important;
	color: rgba(255,255,255,0.75) !important;
	margin: 0 !important;
}

/* Gold buttons */
.hfh-btn-gold, .hfh-btn-gold-outline {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 14px 28px !important;
	border-radius: 8px !important;
	border: 2px solid var(--rtr-gold) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}
.hfh-btn-gold {
	background: var(--rtr-gold) !important;
	color: var(--rtr-navy) !important;
}
.hfh-btn-gold:hover {
	background: var(--rtr-gold-dark) !important;
	border-color: var(--rtr-gold-dark) !important;
	color: var(--hfh-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(201,161,76,0.3);
}
.hfh-btn-gold-outline {
	background: transparent !important;
	color: var(--rtr-gold) !important;
}
.hfh-btn-gold-outline:hover {
	background: var(--rtr-gold) !important;
	color: var(--rtr-navy) !important;
}
.hfh-btn-gold::after, .hfh-btn-gold-outline::after { display: none !important; }

/* Hero "Event Details" outline button read blue-on-blue on the light hero.
   Make it a solid white button (dark-blue text) that inverts to blue/white on hover. */
.hfh-rtr-hero .hfh-btn-gold-outline {
	background: var(--hfh-white) !important;
	color: var(--rtr-navy) !important;
	border: 2px solid var(--hfh-white) !important;
	box-shadow: 0 6px 18px rgba(30,52,85,0.14) !important;
}
.hfh-rtr-hero .hfh-btn-gold-outline:hover {
	background: var(--hfh-habitat-blue) !important;
	color: var(--hfh-white) !important;
	border-color: var(--hfh-habitat-blue) !important;
}
.hfh-rtr-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

/* Gold arrow link (used in Foundation tier "inquire") */
.hfh-link-gold {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--rtr-gold-dark) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.04em;
	transition: gap 0.2s ease;
}
.hfh-link-gold:hover { gap: 12px; color: var(--rtr-navy) !important; }

/* RTR section labels + titles */
.hfh-rtr-section-label {
	font-family: var(--hfh-font-sans) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	color: var(--rtr-gold-dark) !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 12px !important;
}
.hfh-rtr-section-title .et_pb_text_inner h2 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(34px, 4vw, 52px) !important;
	font-weight: 700 !important;
	color: var(--rtr-navy) !important;
	line-height: 1.1 !important;
	margin: 0 0 24px !important;
	letter-spacing: -0.01em;
}
.hfh-rtr-prose p {
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 0 16px !important;
}
.hfh-rtr-prose-center p {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Event details (4-card grid, centered) */
.hfh-rtr-details-section .et_pb_row {
	max-width: 1200px !important;
	width: 92% !important;
}
.hfh-rtr-details-wrap { margin-top: 40px !important; }
.hfh-rtr-details {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.hfh-rtr-detail-card {
	background: var(--hfh-white);
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(30,52,85,0.08);
	border: 1px solid rgba(201,161,76,0.15);
	border-top: 4px solid var(--rtr-gold);
}
.hfh-rtr-detail-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--rtr-gold-light);
	color: var(--rtr-gold-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto 16px;
}
.hfh-rtr-detail-eyebrow {
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rtr-gold-dark) !important;
	margin: 0 0 6px !important;
}
.hfh-rtr-detail-card h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--rtr-navy) !important;
	margin: 0 0 12px !important;
	line-height: 1.2;
}
.hfh-rtr-detail-card p {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 !important;
}

/* Narrative section */
.hfh-rtr-narrative-section .et_pb_row {
	max-width: 820px !important;
	width: 92% !important;
}
.hfh-rtr-narrative-wrap .et_pb_text_inner h2.hfh-rtr-narrative-h2 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(34px, 4vw, 52px) !important;
	font-weight: 700 !important;
	color: var(--rtr-navy) !important;
	line-height: 1.1 !important;
	margin: 0 0 24px !important;
}
.hfh-rtr-narrative-p {
	font-size: 18px !important;
	line-height: 1.7 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 0 16px !important;
	max-width: 720px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.hfh-rtr-narrative-p strong { color: var(--rtr-navy); }

/* Sponsor TIERS — stacked vertically, each tier groups its own logos */
.hfh-rtr-tiers-section .et_pb_row {
	max-width: 1200px !important;
	width: 92% !important;
}
.hfh-rtr-tiers-wrap { margin-top: 28px !important; text-align: left; }
.hfh-rtr-tiers-stack {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.hfh-rtr-tier {
	background: var(--hfh-white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 12px 36px rgba(30,52,85,0.08);
	border: 1px solid rgba(0,0,0,0.04);
	display: grid;
	grid-template-columns: 320px 1fr;
}
.hfh-rtr-tier-header {
	padding: 40px 32px;
	text-align: center;
	color: var(--hfh-white);
	background: var(--rtr-navy);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.hfh-rtr-tier-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(255,255,255,0.2);
	color: var(--hfh-white);
	font-size: 26px;
	margin-bottom: 16px;
}
.hfh-rtr-tier-eyebrow {
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.95) !important;
	margin: 0 0 6px !important;
}
.hfh-rtr-tier-header h3 {
	font-family: var(--hfh-font-serif) !important;
	font-size: 31px !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	margin: 0 0 12px !important;
	line-height: 1.2;
}
.hfh-rtr-tier-desc {
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: rgba(255,255,255,0.78) !important;
	margin: 0 !important;
	max-width: 240px;
}

/* Tier variations */
.hfh-rtr-tier--foundation .hfh-rtr-tier-header {
	background: linear-gradient(135deg, var(--rtr-gold-dark), var(--rtr-gold));
}
.hfh-rtr-tier--foundation .hfh-rtr-tier-icon {
	background: rgba(255,255,255,0.2);
	color: var(--hfh-white);
}
.hfh-rtr-tier--foundation .hfh-rtr-tier-eyebrow {
	color: rgba(255,255,255,0.95) !important;
}
.hfh-rtr-tier--foundation .hfh-rtr-tier-desc {
	color: rgba(255,255,255,0.88) !important;
}
.hfh-rtr-tier--raiser .hfh-rtr-tier-header {
	background: linear-gradient(135deg, var(--rtr-navy), var(--hfh-habitat-blue));
}

/* Sponsors area inside each tier */
.hfh-rtr-tier-sponsors {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
}
.hfh-rtr-tier-named {
	padding: 20px 24px;
	background: var(--rtr-gold-light);
	border-radius: 12px;
	border-left: 4px solid var(--rtr-gold);
}
.hfh-rtr-tier-named-label {
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rtr-gold-dark) !important;
	margin: 0 0 4px !important;
}
.hfh-rtr-tier-named-name {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--rtr-navy) !important;
	margin: 0 !important;
	line-height: 1.2;
}
.hfh-rtr-tier-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.hfh-rtr-tier-logos--dense {
	grid-template-columns: repeat(5, 1fr);
}
.hfh-rtr-logo-tile {
	background: var(--hfh-white);
	border: 1px solid #EBEBEB;
	border-radius: 10px;
	height: 90px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}
.hfh-rtr-logo-tile:hover {
	border-color: var(--rtr-gold);
	box-shadow: 0 6px 18px rgba(201,161,76,0.15);
	transform: translateY(-2px);
}
.hfh-rtr-logo-tile img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(20%);
	transition: filter 0.2s ease;
}
.hfh-rtr-logo-tile:hover img { filter: grayscale(0%); }

/* Foundation tier "Open" state — reserved slot */
.hfh-rtr-tier-open {
	background: var(--rtr-gold-light);
	border: 2px dashed var(--rtr-gold);
	border-radius: 12px;
	padding: 32px 24px;
	text-align: center;
}
.hfh-rtr-tier-open i {
	font-size: 28px;
	color: var(--rtr-gold-dark);
	margin-bottom: 12px;
	display: block;
}
.hfh-rtr-tier-open p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--rtr-navy) !important;
	margin: 0 0 8px !important;
}
.hfh-rtr-tier-open p:nth-child(2) {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--rtr-gold-dark) !important;
}
.hfh-rtr-tier-open a { margin-top: 8px; display: inline-flex; }

/* Individual supporters */
.hfh-rtr-individual-section .et_pb_row {
	max-width: 900px !important;
	width: 92% !important;
}
.hfh-rtr-individual-wrap { margin-top: 40px !important; }
.hfh-rtr-individual-sponsors {
	background: #F5F5F5;
	border-radius: 16px;
	padding: 40px 48px;
	text-align: center;
}
.hfh-rtr-individual-sponsors ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: center;
}
.hfh-rtr-individual-sponsors li {
	font-size: 15px;
	color: var(--hfh-dark-text);
	font-weight: 600;
}

/* RTR final CTA */
.hfh-rtr-final-section { color: var(--hfh-white); text-align: center; }
.hfh-rtr-final-section .et_pb_row {
	max-width: 760px !important;
	width: 92% !important;
}
.hfh-rtr-final-cta-wrap { margin: 0 !important; }
.hfh-rtr-final-cta { text-align: center; }
.hfh-rtr-final-eyebrow {
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rtr-gold) !important;
	margin: 0 0 16px !important;
}
.hfh-rtr-final-cta h2 {
	font-family: var(--hfh-font-serif) !important;
	font-size: clamp(36px, 5vw, 56px) !important;
	font-weight: 700 !important;
	color: var(--hfh-white) !important;
	margin: 0 0 16px !important;
	line-height: 1.1;
}
.hfh-rtr-final-cta > p {
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: rgba(255,255,255,0.92) !important;
	margin: 0 0 32px !important;
}
.hfh-rtr-final-note {
	font-size: 14px !important;
	color: rgba(255,255,255,0.75) !important;
	margin-top: 32px !important;
}
.hfh-rtr-final-note a {
	color: var(--rtr-gold);
	font-weight: 700;
}
.hfh-rtr-final-note a:hover { color: var(--hfh-white); }
/* Phone link was brand-blue (invisible) on the blue CTA, which pushed the visible
   text off-center; make tel links white so the row reads and stays centered. */
.hfh-rtr-final-note a[href^="tel:"] { color: var(--hfh-white); }
.hfh-rtr-final-note a[href^="tel:"]:hover { color: rgba(255,255,255,0.82); }


/* ====== Landing-page responsive ============================== */
@media (max-width: 980px) {
	.hfh-wb-hero .et_pb_row,
	.hfh-rtr-details {
		grid-template-columns: 1fr 1fr !important;
	}
	.hfh-rtr-tier {
		grid-template-columns: 1fr !important;
	}
	.hfh-rtr-tier-desc { max-width: 100%; }
	.hfh-rtr-tier-logos,
	.hfh-rtr-tier-logos--dense {
		grid-template-columns: repeat(3, 1fr);
	}
	.hfh-wb-gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 240px 200px 200px;
	}
	.hfh-wb-gallery-item--large { grid-row: span 1; grid-column: span 2; }
	.hfh-wb-gallery-item:nth-child(2) { grid-column: auto; }
	.hfh-landing-footer { grid-template-columns: 1fr; text-align: center; }
	.hfh-landing-footer-meta { text-align: center; }
}
@media (max-width: 600px) {
	.hfh-wb-hero .et_pb_row,
	.hfh-rtr-details {
		grid-template-columns: 1fr !important;
	}
	.hfh-wb-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, 200px);
	}
	.hfh-rtr-tier-logos,
	.hfh-rtr-tier-logos--dense {
		grid-template-columns: repeat(2, 1fr);
	}
	.hfh-rtr-savedate {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.hfh-rtr-savedate-info { text-align: center; }
}




/* ====== 23e. POST-CONTENT WRAPPER (default body template) ===== */
/* The default body template (post 79) wraps the page's content in a
   section so the post-content module can render. We zero out that
   section visually so each page's first section (its own page-hero)
   sits flush at the top under the fixed header. */

.et-l--body > .et_builder_inner_content > .et_pb_section:has(.et_pb_post_content) {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

.et-l--body > .et_builder_inner_content > .et_pb_section:has(.et_pb_post_content) > .et_pb_row {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.et-l--body > .et_builder_inner_content > .et_pb_section:has(.et_pb_post_content) > .et_pb_row > .et_pb_column {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.et-l--body .et_pb_post_content {
	padding: 0 !important;
	margin: 0 !important;
}


/* ====== 24. RESPONSIVE ======================================= */

@media (max-width: 1024px) {
	.hfh-blog-grid .et_pb_posts,
	.hfh-blog-grid .et_pb_blog_grid {
		grid-template-columns: 1fr;
	}
	.hfh-blog-grid article:first-child { grid-row: span 1; }

	/* Hero: stack image below text on tablet */
	.hfh-hero > .et_pb_row {
		flex-direction: column !important;
	}
	.hfh-hero .et_pb_column {
		width: 100% !important;
		text-align: center;
	}
	.hfh-hero-subtitle {
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Connection cards: 2-up at tablet */
	.hfh-after-hero > .et_pb_row[class*="cards"] .et_pb_column {
		width: calc(50% - 12px) !important;
	}

	/* ReStore: stack vertically */
	.hfh-restore-image { max-height: 400px; }

	/* Impact stats: 2x2 grid at tablet */
	.hfh-impact .et_pb_column[class*="stat"] {
		width: calc(50% - 12px) !important;
	}

	/* News: featured + 2 small all stack 1-col */
	.hfh-news-featured,
	.hfh-news-small-stack {
		width: 100% !important;
	}

	/* Footer collapses to 2 columns at tablet */
	.hfh-footer > .et_pb_row {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 768px) {
	:root { --hfh-section-pad: 60px; }

	.hfh-hero { padding-bottom: 50px !important; }
	.hfh-hero::after { height: 50px; }

	.hfh-timeline::before { left: 24px; }
	.hfh-timeline-item   { padding-left: 72px; min-height: auto; }
	.hfh-timeline-dot    { left: 12px; }
	.hfh-timeline-img    {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 280px;
		margin-bottom: 16px;
	}

	/* Header — shrink to 80px, hide nav (Divi mobile menu takes over) */
	.hfh-header-section > .et_pb_row { height: 80px; padding: 0 16px !important; }
	.hfh-logo .et_pb_image_wrap img,
	.hfh-logo img { height: 56px !important; }

	/* CTA banner — stack vertically, center */
	.hfh-cta-banner > .et_pb_row {
		flex-direction: column !important;
		text-align: center;
	}
	.hfh-cta-banner .hfh-cta-text h2,
	.hfh-cta-banner .hfh-cta-text p { text-align: center; }
	.hfh-cta-banner .hfh-cta-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.hfh-cta-banner .hfh-cta-buttons .et_pb_button { width: 100%; }

	/* Affiliations — tighter gap */
	.hfh-affiliations-logos { gap: 24px; }

	/* Footer — single column */
	.hfh-footer > .et_pb_row {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.hfh-footer-bottom {
		flex-direction: column;
		text-align: center;
	}
	/* Center every footer-bottom line on mobile — including the credits in
	   the last column, whose base desktop rule + inline style right-align
	   it (must match that specificity to win). */
	.hfh-footer-bottom p,
	.hfh-footer-bottom .et_pb_column:last-child p,
	.hfh-footer-bottom .et_pb_column:last-child p[style] {
		text-align: center !important;
	}

	/* Homepage hero text — slightly smaller on mobile */
	.hfh-hero h1 { font-size: clamp(32px, 8vw, 44px) !important; }
	.hfh-hero-subtitle { font-size: 17px !important; }

	/* Connection cards: 1-up on mobile */
	.hfh-after-hero > .et_pb_row[class*="cards"] .et_pb_column {
		width: 100% !important;
	}

	/* Programs cards: 1-up on mobile */
	.hfh-program-card { aspect-ratio: 16/9; }

	/* ReStore: stack image above content */
	.hfh-restore-image { margin-bottom: 32px; }

	/* Impact stats: 1-up vertical stack */
	.hfh-impact .et_pb_column[class*="stat"] {
		width: 100% !important;
		text-align: center;
	}

	/* News header — stack View All button below */
	.hfh-news-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.hfh-news-featured .hfh-news-card-link img {
		height: 200px !important;
	}
}


/* ====== 25. MOBILE HEADER + MENU (Amanda 6/11) =============== */
/* Problem reported: when the viewport narrows (phone, or browser at
   half-screen), the menu collapsed to a tiny ~50px-wide sliver and the
   hamburger sat dead-center. Root cause: Divi switches to its mobile
   menu at <=980px and positions the dropdown (.et_mobile_menu)
   absolutely inside the narrow far-right menu column, so it inherited
   that column's width. There was no styling for it.

   Fix: at <=980px lay the header out as  [logo] ........ [Donate][☰]
   (Donate stays the prominent CTA, hamburger beside it, both right-
   aligned) and render the dropdown as a full-width panel under the bar. */
@media (max-width: 980px) {
	/* Header bar layout */
	.hfh-header-section > .et_pb_row {
		height: 80px !important;
		padding: 0 5% !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: flex-start;
		gap: 0 !important;
	}
	/* Logo left; pushes Donate + hamburger to the right edge */
	.hfh-header-section .et_pb_column:has(.hfh-logo) {
		order: 1;
		flex: 0 0 auto !important;
		margin-right: auto !important;
	}
	/* Donate: prominent button, right side, just left of the hamburger */
	.hfh-header-section .et_pb_column:has(.hfh-btn-donate) {
		order: 2;
		flex: 0 0 auto !important;
		margin: 0 10px 0 0 !important;
		justify-content: flex-end;
	}
	.hfh-header-section .et_pb_column:has(.hfh-btn-donate) .hfh-btn-donate {
		margin: 0 !important;
		padding: 11px 22px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}
	/* Menu column collapses to just the hamburger toggle, far right */
	.hfh-header-section .et_pb_column:has(.hfh-main-menu) {
		order: 3;
		flex: 0 0 auto !important;
		width: auto !important;
	}
	.hfh-main-menu {
		flex: 0 0 auto !important;
		width: auto !important;
	}
	.hfh-main-menu .et_pb_menu_inner_container,
	.hfh-main-menu .et_pb_menu__wrap,
	.hfh-main-menu .et_pb_menu__menu {
		width: auto !important;
		justify-content: flex-end !important;
	}

	/* Hide the desktop horizontal nav (Divi also does, but be explicit) */
	.hfh-main-menu .et-menu-nav,
	.hfh-main-menu nav.et-menu-nav {
		display: none !important;
	}

	/* Hamburger toggle */
	.hfh-main-menu .et_mobile_nav_menu {
		display: block !important;
		float: none !important;
	}
	.hfh-main-menu .mobile_nav {
		display: flex;
		align-items: center;
	}
	.hfh-main-menu .mobile_menu_bar {
		display: inline-block;
		line-height: 1;
		cursor: pointer;
	}
	.hfh-main-menu .mobile_menu_bar::before {
		color: var(--hfh-dark-text) !important;
		font-size: 30px !important;
		line-height: 1 !important;
	}

	/* Mobile dropdown — full-width panel under the 80px header bar,
	   readable rows. position:fixed pulls it OUT of the narrow menu
	   column so it no longer renders as a skinny sliver. Divi controls
	   open/close via .mobile_nav.opened (display); we only style it. */
	.hfh-main-menu .et_mobile_menu {
		position: fixed !important;
		top: 80px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin: 0 !important;
		padding: 6px 0 10px !important;
		background: var(--hfh-white) !important;
		border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
		box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14) !important;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		z-index: 1001 !important;
	}
	body.admin-bar .hfh-main-menu .et_mobile_menu { top: 80px !important; }
	/* Per Amanda 6/11 — clean, all-white text stack on mobile. The desktop
	   mega-menu's colored icon tiles + descriptions + faint card fills made
	   the parent items look heavy and mismatched against the sub-items.
	   On mobile we strip all of that back to plain titles + sub links on a
	   single solid white background, with hierarchy shown by indent/weight. */
	.hfh-main-menu .et_mobile_menu,
	.hfh-main-menu .et_mobile_menu li,
	.hfh-main-menu .et_mobile_menu .sub-menu,
	.hfh-main-menu .et_mobile_menu a {
		background: #FFFFFF !important;
		box-shadow: none !important;
		float: none !important;
	}
	/* Remove the faint card outline Divi puts on the sub-menu container
	   (keeps the per-row dividers on the links, drops the box). */
	.hfh-main-menu .et_mobile_menu,
	.hfh-main-menu .et_mobile_menu .sub-menu,
	.hfh-main-menu .et_mobile_menu li {
		border: none !important;
	}
	.hfh-main-menu .et_mobile_menu li {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
	}
	/* Hide the mega-menu enrichments on mobile: colored icon tiles, the
	   descriptions, and the parent chevron (everything is shown expanded
	   on mobile, so the chevron just reads as a stray icon). */
	.hfh-main-menu .et_mobile_menu .hfh-dropdown-icon,
	.hfh-main-menu .et_mobile_menu .hfh-dropdown-desc,
	.hfh-main-menu .et_mobile_menu .hfh-menu-chevron {
		display: none !important;
	}
	.hfh-main-menu .et_mobile_menu .hfh-dropdown-text {
		display: inline !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.hfh-main-menu .et_mobile_menu .hfh-dropdown-label {
		font: inherit !important;
		color: inherit !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Top-level / parent items: bold dark title */
	.hfh-main-menu .et_mobile_menu li a {
		display: block !important;
		color: var(--hfh-dark-text) !important;
		font-family: var(--hfh-font-sans) !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		padding: 13px 6% !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
		opacity: 1 !important;
	}
	.hfh-main-menu .et_mobile_menu .menu-item-has-children > a {
		color: var(--hfh-dark-text) !important;
		font-weight: 700 !important;
	}
	.hfh-main-menu .et_mobile_menu li a:hover,
	.hfh-main-menu .et_mobile_menu li a:active {
		background: var(--hfh-blue-tint) !important;
		color: var(--hfh-bright-blue) !important;
	}
	/* Sub-items: indented + lighter so the hierarchy reads, same clean
	   white background, no icon, no description. */
	.hfh-main-menu .et_mobile_menu .sub-menu a,
	.hfh-main-menu .et_mobile_menu li li a {
		font-size: 15px !important;
		font-weight: 500 !important;
		padding: 11px 6% 11px 11% !important;
		color: var(--hfh-gray) !important;
	}
	.hfh-main-menu .et_mobile_menu .sub-menu a:hover,
	.hfh-main-menu .et_mobile_menu .sub-menu a:active {
		background: var(--hfh-blue-tint) !important;
		color: var(--hfh-bright-blue) !important;
	}
}

/* Phone — tighten the Donate button so logo + Donate + ☰ never crowd */
@media (max-width: 480px) {
	.hfh-header-section .et_pb_column:has(.hfh-btn-donate) .hfh-btn-donate {
		padding: 10px 16px !important;
		font-size: 12px !important;
	}
	.hfh-main-menu .mobile_menu_bar::before { font-size: 28px !important; }
}


/* ====== 26. HORIZONTAL OVERFLOW GUARD (Amanda 6/11) ========= */
/* Reported: you could scroll ~100px to the right into blank space on the
   Home page (and slightly on About Us). Cause: a decorative hero
   pseudo-element bleeds a few % past the right edge, inflating the
   document scroll width (~110% of viewport).

   Fix: clip horizontal overflow on the Divi page wrapper. We use
   `overflow-x: clip` (NOT hidden) on purpose — `clip` does not create a
   scroll container, so the fixed site header and the sticky anchor nav
   (About Us / ReStore) keep working. Nothing legitimately extends past
   the viewport horizontally (header dropdowns sit within it), so this
   only trims the stray decoration bleed. */
#page-container {
	overflow-x: clip;
}


/* ====== 27. MOBILE RESPONSIVE FIXES — real-device pass (Amanda 6/11) ==== */
/* Real-iPhone testing surfaced that almost every custom CSS-grid layout was
   authored WITHOUT a mobile breakpoint, so multi-column sections never
   stacked — they ran off the right edge (and were then clipped by the
   overflow guard, making content un-viewable). This pass adds the missing
   breakpoints. Phase 1: the global FOOTER menus + the HOMEOWNERSHIP page.
   (Other pages get the same treatment in the next phase.) */

/* --- GLOBAL: footer menus must LIST on mobile, not collapse to a
   hamburger. Divi's menu module swaps to its mobile nav at <=980px; for
   the footer we want the opposite — always show the vertical list. ------ */
@media (max-width: 980px) {
	.hfh-footer-menu .et_mobile_nav_menu,
	.hfh-footer-menu .mobile_nav,
	.hfh-footer-menu .mobile_menu_bar {
		display: none !important;
	}
	.hfh-footer-menu nav.et-menu-nav,
	.hfh-footer-menu .et_pb_menu__menu,
	.hfh-footer-menu .et_pb_menu__menu > nav,
	.hfh-footer-menu .et-menu,
	.hfh-footer-menu .et_pb_menu .nav {
		display: block !important;
		max-height: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	.hfh-footer-menu .et-menu > li,
	.hfh-footer-menu .et_pb_menu .nav > li {
		display: block !important;
		float: none !important;
	}
	/* Divi's generated CSS forces the footer menu modules right
	   (.et_pb_menu_0/1_tb_footer { justify-content: flex-end !important;
	   text-align: right } — driven by the module's et_pb_text_align_right-
	   phone/-tablet classes). Those rules are !important at the SAME
	   specificity as a plain .hfh-footer-menu selector AND load after us,
	   so they'd win on source order. Compound our class with .et_pb_menu
	   (both sit on the module element) to out-specify them, and force the
	   list full-width so a stray justify-content can't shove the (~80px)
	   menu block sideways regardless. */
	.hfh-footer-menu.et_pb_menu,
	.hfh-footer-menu.et_pb_menu .et_pb_menu__wrap,
	.hfh-footer-menu.et_pb_menu .et_pb_menu__menu,
	.hfh-footer-menu.et_pb_menu nav.et-menu-nav,
	.hfh-footer-menu.et_pb_menu .et-menu,
	.hfh-footer-menu.et_pb_menu .nav {
		justify-content: flex-start !important;
		text-align: left !important;
	}
	.hfh-footer-menu.et_pb_menu .et_pb_menu__menu,
	.hfh-footer-menu.et_pb_menu nav.et-menu-nav {
		width: 100% !important;
	}
	.hfh-footer-menu .et-menu > li,
	.hfh-footer-menu .et-menu > li > a,
	.hfh-footer-menu .et_pb_menu .nav > li,
	.hfh-footer-menu .et_pb_menu .nav > li > a {
		text-align: left !important;
	}
}

/* --- HOMEOWNERSHIP PAGE — stack the grids on tablet & phone ----------- */
@media (max-width: 980px) {
	/* "What is a Habitat Home?" — photo + text (1fr 1fr) → stacked */
	.hfh-home-what .et_pb_row {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	/* Eligibility criterion cards (3-up) → single column */
	.hfh-home-eligibility .et_pb_row:nth-child(2) {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	/* Bridge Home callout (icon | text | button) → stacked, left-aligned */
	.hfh-bridge-card {
		grid-template-columns: 1fr !important;
		justify-items: start;
		gap: 18px !important;
		padding: 28px !important;
		text-align: left;
	}
	.hfh-bridge-card-action { justify-self: start; }
	.hfh-bridge-card-action .hfh-btn { width: auto; }
}
@media (max-width: 768px) {
	/* Required-documents 2-up → single column */
	.hfh-home-docs .et_pb_row:nth-child(2) {
		grid-template-columns: 1fr !important;
	}
}
@media (max-width: 600px) {
	/* Fact badges (0% / 30-year / sweat equity) 3-up → single column */
	.hfh-fact-badges { grid-template-columns: 1fr !important; }
	/* "Additional Eligibility Requirements" 2-col list → single column */
	.hfh-extra-reqs ul { grid-template-columns: 1fr !important; }
}

/* ====== 28. SITE-WIDE MOBILE GRID STACKING — phase 2 ================
   Section 27 fixed the Homeownership page + the global footer. This
   completes the SAME treatment for every other page. The audit
   (divi-imports/audit_grids.py) found 27 custom grids declared with a
   fixed multi-column track and NO max-width breakpoint — so they kept
   their desktop column count on tablet/phone and ran off the right edge.

   Responsive scheme, grouped by layout type:
     • 2-col content rows (image+text)      → 1 column      @ ≤980
     • 3- & 4-col CARD grids                → 2 columns     @ ≤980
                                            → 1 column      @ ≤600
     • give-card 2-up (heavier cards)       → 1 column      @ ≤768
     • logo grids (small tiles)             → fewer columns, never 1-up
     • horizontal "icon | text | action"    → stacked       on phone

   NOTE: small icon+text grids (.hfh-home-process .hfh-timeline-step 56px,
   .hfh-drives-card 60px, .hfh-wb-status 56px) are deliberately NOT touched
   — their 1fr text column shrinks, so they read fine on a phone and look
   better as a compact icon-beside-text than force-stacked. */

/* --- TABLET (≤980): 2-col rows stack; 3/4-col card grids → 2-up ------ */
@media (max-width: 980px) {
	/* 2-column content rows (image + text / paired panels) → 1 column */
	.hfh-service-area > .et_pb_row,
	.hfh-mission > .et_pb_row,
	.hfh-donate-intro > .et_pb_row,
	.hfh-ways-to-give > .et_pb_row + .et_pb_row,
	.hfh-ways-to-give .et_pb_row:nth-child(2),
	.hfh-restore-visit .et_pb_row,
	.hfh-restore-donate .et_pb_row:nth-child(3),
	.hfh-volunteer-build .et_pb_row {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	/* 3- and 4-column CARD grids → 2-up on tablet (reuse the exact base
	   selectors so we match their specificity and win on source order) */
	.et_pb_row:has(> .hfh-connection-card),
	.et_pb_row:has(> .hfh-program-card),
	.et_pb_row:has(> .hfh-value-card),
	.et_pb_row:has(> .hfh-team-card),
	.et_pb_row:has(> .hfh-future-card),
	.hfh-items-grid,
	.hfh-volunteer-opportunities .et_pb_row:nth-child(2),
	.hfh-bridge-curriculum .et_pb_row:nth-child(2),
	.hfh-bridge-curriculum .et_pb_row:nth-child(3),
	.hfh-repair-eligibility .et_pb_row:nth-child(2),
	.hfh-repair-apply .et_pb_row:nth-child(2) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	/* Logo grids: drop column(s) but stay multi-up (1-up = giant logos) */
	.hfh-rtr-tier-logos,
	.hfh-rtr-tier-logos--dense {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* --- PHONE (≤600): card grids → single column ----------------------- */
@media (max-width: 600px) {
	.et_pb_row:has(> .hfh-connection-card),
	.et_pb_row:has(> .hfh-program-card),
	.et_pb_row:has(> .hfh-value-card),
	.et_pb_row:has(> .hfh-team-card),
	.et_pb_row:has(> .hfh-future-card),
	.hfh-items-grid,
	.hfh-volunteer-opportunities .et_pb_row:nth-child(2),
	.hfh-bridge-curriculum .et_pb_row:nth-child(2),
	.hfh-bridge-curriculum .et_pb_row:nth-child(3),
	.hfh-repair-eligibility .et_pb_row:nth-child(2),
	.hfh-repair-apply .et_pb_row:nth-child(2) {
		grid-template-columns: 1fr !important;
	}
	/* Logo grids → 2-up on phone */
	.hfh-rtr-tier-logos,
	.hfh-rtr-tier-logos--dense {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* --- give-card 2-up → 1-up a touch earlier (substantial panels) ----- */
@media (max-width: 768px) {
	.et_pb_row:has(> .hfh-give-card) {
		grid-template-columns: 1fr !important;
	}
}

/* --- Horizontal "icon | text | action" cards → stack on phone ------- */
@media (max-width: 768px) {
	/* Court-ordered service banner: icon | text | button (80px 1fr auto)
	   — the auto button column overflows on a phone. Stack vertically. */
	.hfh-court-card {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		padding: 28px !important;
		justify-items: start;
		text-align: left;
	}
}
@media (max-width: 600px) {
	/* Veteran callout (100px icon | text): icon above text, tighter
	   padding so the copy isn't squeezed on a narrow phone. */
	.hfh-veteran-card-content {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
		padding: 28px !important;
		justify-items: start;
	}
}

/* ====== 29. MOBILE HERO PHOTO + FOOTER LOGO (real-device pass 2) =====
   Two issues surfaced on a real iPhone 16 Pro Max:

   1) HOME HERO PHOTO collapsed to a tiny image floating in a big empty
      translucent frame. Root cause: the Divi image module's wrap
      (span.et_pb_image_wrap) is inline-block. On desktop the frame is a
      width-constrained block so the wrap fills it; but on phone Divi's
      responsive-image rules let the inline-block wrap shrink-wrap, so the
      <img> width:100% resolved against a collapsed parent → tiny photo.
      Fix: give the wrap a DEFINITE block box (100% × 100% of the frame)
      so the photo fills. Compound our class with .et_pb_image to beat
      Divi's same-specificity mobile rule (it loads after our sheet).
      Also use a slightly shorter 16:10 frame on phones so the hero isn't
      a giant box.

   2) FOOTER LOGO centered on mobile (Divi centers images on phone by
      default) while the tagline beneath stayed left — looked bumped to
      the right. Left-align it to match the rest of the footer column. */
@media (max-width: 980px) {
	/* --- Home hero photo: fill a clean full-width frame ------------- */
	.hfh-hero .et_pb_column:has(.hfh-hero-image-frame) {
		width: 100% !important;
		max-width: 100% !important;
	}
	.hfh-hero-image-frame.et_pb_image,
	.hfh-hero-image-frame {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 10 !important;
	}
	.hfh-hero-image-frame.et_pb_image .et_pb_image_wrap,
	.hfh-hero-image-frame .et_pb_image_wrap {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: auto !important;
	}
	.hfh-hero-image-frame.et_pb_image img,
	.hfh-hero-image-frame img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		border-radius: 0 !important;
	}

	/* --- Footer logo: left-align (Divi centers images on mobile) ---- */
	.hfh-footer .hfh-footer-logo.et_pb_image,
	.hfh-footer .hfh-footer-logo,
	.hfh-footer-brand .hfh-footer-logo {
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	.hfh-footer .hfh-footer-logo .et_pb_image_wrap {
		display: inline-block !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

/* ====== 30. HOME PAGE — SECTION RHYTHM (Amanda 7/10) ================
   The six content sections (Find Your Connection, Our Programs, ReStore,
   Impact, Testimonial, From Our Blog) were a uniform 100px top + 100px
   bottom = 200px of stacked padding between each. Amanda felt the
   voided/white space was a bit large. Trim to 72px (→ 144px between
   sections) — a ~28% reduction that reads noticeably cleaner while
   keeping the airy vertical rhythm that balances the wide (1200px) rows.

   Scoped to body.home so ONLY the home page changes. Divi sets these via
   `.et_pb_section_N_tb_body.et_pb_section{padding:100px 0}` (specificity
   0,2,0, no !important); our body.home-scoped selectors out-specify it.
   Hero (120/80), CTA banner (80/80) and Affiliations (48/48) are left as
   they are — they're already differentiated and set the page's cadence. */
body.home .hfh-after-hero,
body.home .hfh-programs,
body.home .et_pb_section_3_tb_body,   /* Habitat ReStore (no hfh- class) */
body.home .hfh-impact,
body.home .hfh-testimonial,
body.home .hfh-blog-grid {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

/* HERO — the section tightening (above) pulled the following section up
   closer to the hero, so it started to feel crunched. Give the hero itself
   a bit MORE room above & below its content (120/80 → 140/104). NOTE the
   direction: MORE space = a BIGGER number, so we go up from 80, not down to
   72. Desktop/tablet only — the mobile hero has its own padding (≤768). */
@media (min-width: 769px) {
	body.home .hfh-hero {
		padding-top: 140px !important;
		padding-bottom: 104px !important;
	}
	/* Settle the house silhouettes down onto the arch (bottom of the blue).
	   The houses are anchored to a text module INSIDE the hero, while the arch
	   is anchored to the section bottom — so adding padding-bottom (above)
	   lifted the houses away from the arch. Pull them back down so the skyline
	   sits on the horizon (30px → -50px relative to that text module). */
	body.home .hfh-hero .hfh-hero-houses {
		bottom: -50px !important;
	}
	/* "Find Your Connection" is the first content section, sitting right below
	   the hero's white arch — which already adds ~80px of white above it. So it
	   needs LESS top padding than the other sections to match the page rhythm;
	   otherwise the gap under the arch reads as >100px. 72px → 32px. */
	body.home .hfh-after-hero {
		padding-top: 32px !important;
	}
}

/* Vertically CENTER the hero photo against the text block. It was top-aligned
   (both columns start at the row top), so with the tall text column the photo
   floated high with ~190px of empty blue beneath it — reading as "staggered up
   top". Centering is the standard text-left / image-right hero layout and
   brings the photo down level with the title's lower lines. The floating accent
   shapes ride along because they're anchored to the image column, which is the
   flex item being centered. Desktop only — the columns STACK at ≤1024px (Divi),
   so applying flex below that would fight the stack; guard with min-width:1025. */
@media (min-width: 1025px) {
	body.home .hfh-hero .et_pb_row {
		display: flex !important;
		align-items: center !important;
	}
}

/* ====== 31. CONTACT-FORM PLACEHOLDERS ==============================
   Interim marker where a plaintext email was stripped (Amanda: no emails
   on the site). Each renders "Contact Us" and points at #contact-form.
   When the departmental Forminator forms are built, repoint these hrefs
   (and relabel if desired). Styled as a clear inline pill so it's obvious
   it's a live CTA, not stray text. */
.hfh-contact-placeholder {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px;
	background: var(--hfh-blue-tint);
	color: var(--hfh-habitat-blue) !important;
	border: 1px solid var(--hfh-habitat-blue);
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none !important;
	line-height: 1.4;
	transition: background 0.2s ease, color 0.2s ease;
}
.hfh-contact-placeholder:hover {
	background: var(--hfh-habitat-blue);
	color: #fff !important;
}
.hfh-contact-placeholder::before {
	content: "\2709"; /* ✉ envelope */
	font-size: 0.95em;
}

/* ============================================================
   SECTION 32 — B2: section-intro descriptions read as standard
   body paragraphs (Amanda 7/10). The shared .hfh-section-description
   class was falling back to Divi's default (14px / #333 / 500-weight),
   which read as "heading-styled" vs. surrounding body copy. Normalize
   type only (size/weight/color) — leave alignment & spacing intact so
   centered section intros stay centered.
   ============================================================ */
.hfh-section-description {
	font-size: 16px;
	font-weight: 400;
	color: var(--hfh-gray);
	line-height: 1.7;
}

/* ============================================================
   SECTION 33 — DONATE page refinements (Amanda 7/10)
   ============================================================ */
/* "The Impact of Your Gift" eyebrow sits on the blue #385988
   Lifecycle ("Did You Know?") section — make it white text with a
   green dash so it reads on the dark background. */
.hfh-lifecycle-section .hfh-section-label,
.hfh-lifecycle-section .hfh-section-label > p,
.hfh-lifecycle-section .hfh-section-label .et_pb_text_inner p {
	color: #ffffff !important;
}
.hfh-lifecycle-section .hfh-section-label::before {
	background: var(--hfh-bright-green) !important;
}
/* Tax ID a little bigger under "Donate Online". */
.hfh-donate-taxid {
	font-size: 1.05em;
}
/* Cars for Homes CTA link (replaced the old "Coming Soon" tag). */
.hfh-future-link {
	display: inline-block;
	margin-top: 6px;
	font-weight: 700;
	color: var(--hfh-habitat-blue);
	text-decoration: none;
}
.hfh-future-link:hover { text-decoration: underline; }
/* Donate "Team Building" card links to /volunteer/#corporate — land it a
   bit higher so the sticky header clears and the section reads in context. */
#corporate {
	scroll-margin-top: 110px;
}

/* ============================================================
   SECTION 34 — RESTORE page refinements (Amanda 7/10)
   ============================================================ */
/* Left-justify the "Items We Accept" heading to match the list below it
   (was centered). Scoped to the donate section; the class is used once. */
.hfh-restore-donate .hfh-subsection-title {
	text-align: left !important;
}
/* Center the Arts & Sustainability block (single full-width column).
   Divi's module wrappers set their own text-align, so target the inner
   text/button wrappers with !important to override. */
.hfh-restore-arts .et_pb_text,
.hfh-restore-arts .et_pb_text_inner,
.hfh-restore-arts .et_pb_button_module_wrapper {
	text-align: center !important;
}
.hfh-restore-arts .hfh-arts-description {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   SECTION 35 — HOME "Our Impact" eyebrow (Amanda 7/10)
   The eyebrow uses .hfh-section-label-light (green, no dash) on the
   dark .hfh-impact section. Give it the same dash treatment as other
   eyebrows, but white text with a GREEN dash.
   ============================================================ */
.hfh-impact .hfh-section-label-light,
.hfh-impact .hfh-section-label-light > p,
.hfh-impact .hfh-section-label-light .et_pb_text_inner p {
	color: #ffffff !important;
}
.hfh-impact .hfh-section-label-light {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
}
.hfh-impact .hfh-section-label-light::before {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--hfh-bright-green);
	border-radius: 1px;
	flex-shrink: 0;
}
/* Home "Our Programs" cards are now clickable links to their pages. */
.hfh-program-card-link {
	display: block;
	height: 100%;
	text-decoration: none !important;
	color: inherit;
	transition: transform 0.2s ease;
}
.hfh-program-card-link:hover {
	transform: translateY(-4px);
}
/* Home quote/video: responsive 16:9 YouTube embed. */
.hfh-video-embed {
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
}
.hfh-video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================
   SECTION 36 — ABOUT US refinements (Amanda 7/10)
   ============================================================ */
/* Center the "Our Core Values" section header to match the other
   centered section headers (Who We Are). */
.hfh-values .hfh-section-label {
	display: flex !important;
	justify-content: center;
}
.hfh-values .hfh-section-title,
.hfh-values .hfh-section-subtitle {
	text-align: center !important;
}
.hfh-values .hfh-section-subtitle {
	margin-left: auto;
	margin-right: auto;
}
/* Increase the text size in the Who We Are cards (Mission/Vision/Work)
   from 15px to match body copy. */
.hfh-drives-card p {
	font-size: 16px;
	line-height: 1.65;
}

/* ============================================================
   SECTION 37 — SUBPAGE HERO HEADER IMAGE (Amanda B3)
   A contained photo sits off to the right within the blue header
   window (text 3_5 / image 2_5), vertically centered on desktop.
   ============================================================ */
@media (min-width: 1025px) {
	.hfh-page-hero .et_pb_row {
		display: flex;
		align-items: center;
	}
}
.hfh-page-hero-image img {
	width: 100%;
	height: auto;
	max-height: 340px;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
	display: block;
}
@media (max-width: 1024px) {
	.hfh-page-hero-image {
		margin-top: 28px;
		max-width: 460px;
	}
	.hfh-page-hero-image img { max-height: 260px; }
}

/* ============================================================
   SECTION 38 — SITE-WIDE SECTION-SPACING ROLLOUT (Lee 7/17)
   Roll out the home-page tightening (Section 30) to every other
   page: standard content sections trimmed from 100px to 72px top +
   bottom (~28% less white space, ~144px between sections). Heroes and
   the anchor-nav bar keep their own spacing; the footer CTA banner
   (80px) and affiliations strip (48px) live in .et-l--footer, so the
   .et-l--body scope leaves them untouched (matching the home page).
   Home is excluded — it keeps its own tailored Section 30 rules.
   ============================================================ */
/* Status-alert and veteran-callout sections are stacked notice boxes that carry their
   own tight padding — the generic 72px rule was forcing a ~144px gap between the
   "Applications Closed" box and the "Are you a Veteran" box (Amanda 7/20). */
body:not(.home) .et-l--body .et_pb_section[class*="hfh-"]:not(.hfh-hero):not(.hfh-page-hero):not(.hfh-wb-hero):not(.hfh-anchor-nav-section):not(.hfh-status-alert-section):not(.hfh-veteran-callout-section) {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

/* ============================================================
   SECTION 39 — RAISE THE ROOF photo gallery (Amanda)
   Horizontal scroll strip of event photos on the blue panel.
   ============================================================ */
.hfh-rtr-gallery-section .hfh-rtr-gallery-eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 8px;
}
.hfh-rtr-gallery-section .hfh-rtr-gallery-title {
	font-family: var(--hfh-font-serif);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 28px;
	line-height: 1.15;
}
/* Gallery is a column of Divi image modules laid out as a horizontal
   scroll strip. */
.hfh-rtr-gallery-track {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 14px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.hfh-rtr-gallery-track .et_pb_image {
	flex: 0 0 340px;
	width: 340px;
	margin: 0 !important;
	scroll-snap-align: start;
}
.hfh-rtr-gallery-track .et_pb_image .et_pb_image_wrap { width: 100%; display: block; }
.hfh-rtr-gallery-track .et_pb_image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
.hfh-rtr-gallery-track::-webkit-scrollbar { height: 8px; }
.hfh-rtr-gallery-track::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
.hfh-rtr-gallery-track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 4px; }
@media (max-width: 600px) {
	.hfh-rtr-gallery-track .et_pb_image { flex-basis: 260px; width: 260px; }
	.hfh-rtr-gallery-track .et_pb_image img { height: 190px; }
}

/* ============================================================
   SECTION 40 — Reusable photo-gallery headings + About Us history strip
   ============================================================ */
.hfh-gallery-eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hfh-bright-blue);
	margin: 0 0 8px;
}
.hfh-gallery-title {
	font-family: var(--hfh-font-serif);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	color: var(--hfh-dark-text);
	margin: 0 0 28px;
	line-height: 1.15;
}
.hfh-gallery-eyebrow--light { color: rgba(255, 255, 255, 0.6); }
.hfh-gallery-title--light { color: #ffffff; }
.hfh-history-gallery-track {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 14px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.hfh-history-gallery-track .et_pb_image {
	flex: 0 0 320px;
	width: 320px;
	margin: 0 !important;
	scroll-snap-align: start;
}
.hfh-history-gallery-track .et_pb_image .et_pb_image_wrap { width: 100%; display: block; }
.hfh-history-gallery-track .et_pb_image img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
@media (max-width: 600px) {
	.hfh-history-gallery-track .et_pb_image { flex-basis: 250px; width: 250px; }
	.hfh-history-gallery-track .et_pb_image img { height: 180px; }
}

/* Home "A Sincere Thank You to Our Sponsors" — logo scroll of white tiles. */
.hfh-sponsors-track {
	display: flex !important;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 14px;
	align-items: center;
	scroll-snap-type: x proximity;
}
.hfh-sponsors-track .et_pb_image {
	flex: 0 0 190px;
	width: 190px;
	height: 120px;
	margin: 0 !important;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(30, 52, 85, 0.06);
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 20px;
	scroll-snap-align: start;
}
.hfh-sponsors-track .et_pb_image .et_pb_image_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.hfh-sponsors-track .et_pb_image img {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}
/* RTR gallery heading sits on the blue panel — white text, green dash. */
.hfh-rtr-gallery-section .hfh-section-label,
.hfh-rtr-gallery-section .hfh-section-label > p,
.hfh-rtr-gallery-section .hfh-section-label .et_pb_text_inner p,
.hfh-rtr-gallery-section .hfh-section-title,
.hfh-rtr-gallery-section .hfh-section-title h2 {
	color: #ffffff !important;
}
.hfh-rtr-gallery-section .hfh-section-label::before {
	background: var(--hfh-bright-green) !important;
}
/* Home Repair Before/After section. */
.hfh-ba-label,
.hfh-ba-label > p,
.hfh-ba-label .et_pb_text_inner p {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hfh-habitat-blue);
	margin: 0 0 10px;
}
.hfh-hr-beforeafter .hfh-ba-img img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
/* Footer affiliations now show real partner logos instead of icons. */
.hfh-affiliation-badge img {
	height: 48px;
	width: auto;
	max-width: 155px;
	object-fit: contain;
	display: block;
}
/* Home "Our Programs" — muted background photo to fill the space (Amanda).
   Heavy tint keeps the program cards readable; hidden on mobile. */
body.home .hfh-programs {
	background-image: linear-gradient(rgba(245, 245, 245, 0.9), rgba(245, 245, 245, 0.9)), url('/wp-content/uploads/2026/07/home-programs-bg.jpg') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
@media (max-width: 980px) {
	body.home .hfh-programs {
		background-image: none !important;
	}
}
/* About Us "Serving the River Valley" — map graphic + location pins
   recolored to match the map's county colors (blue / green / orange). */
.hfh-service-area .et_pb_image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.hfh-service-area .hfh-county-badge:nth-child(1) i { color: #1ca5d6 !important; } /* Madison — blue */
.hfh-service-area .hfh-county-badge:nth-child(2) i { color: #a9ce38 !important; } /* Limestone — green */
.hfh-service-area .hfh-county-badge:nth-child(3) i { color: #f26522 !important; } /* Jackson — orange */

/* Donate Corporate + Homeownership Application-Process photos. */
.hfh-corporate-photo img,
.hfh-process-photo img {
	width: 100%;
	max-width: 920px;
	height: auto;
	border-radius: 14px;
	margin: 10px auto 0;
	display: block;
}

/* ReStore Arts & Sustainability photo (added below the Learn More button). */
.hfh-restore-arts-img { margin-top: 34px !important; }
.hfh-restore-arts-img img {
	max-width: 760px;
	width: 100%;
	height: auto;
	border-radius: 14px;
	margin: 0 auto;
	display: block;
}

/* ============================================================
   SECTION 41 — Homeownership: Applicants + Current Homeowners
   (Amanda 7/10 doc §7; online-class links supplied by Amanda 7/24)
   ============================================================ */

/* Applicants section is built but hidden until launch, per Amanda's note. */
.hfh-hidden-until-launch { display: none !important; }

.hfh-ho-wrap { margin-top: 28px; }
.hfh-ho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hfh-ho-card {
	background: var(--hfh-white);
	border-radius: 14px;
	padding: 28px 32px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
	border: 1px solid #EBEBEB;
	border-top: 4px solid var(--hfh-habitat-blue);
}
.hfh-ho-card-title {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 10px !important;
}
.hfh-ho-card-text {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 0 16px !important;
}
.hfh-ho-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.hfh-ho-list li {
	position: relative;
	padding: 8px 0 8px 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--hfh-body-text);
}
.hfh-ho-list li::before {
	content: '';
	position: absolute;
	left: 0; top: 17px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--hfh-habitat-blue);
}
.hfh-ho-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hfh-ho-btn {
	display: inline-flex;
	align-items: center;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 12px 22px !important;
	border-radius: 8px !important;
	background: var(--hfh-habitat-blue) !important;
	color: var(--hfh-white) !important;
	text-decoration: none !important;
	transition: all 0.2s ease;
}
.hfh-ho-btn:hover { background: #2A4570 !important; color: var(--hfh-white) !important; }
.hfh-ho-btn-alt {
	background: transparent !important;
	color: var(--hfh-habitat-blue) !important;
	border: 2px solid var(--hfh-habitat-blue) !important;
	padding: 10px 20px !important;
}
.hfh-ho-btn-alt:hover { background: var(--hfh-habitat-blue) !important; color: var(--hfh-white) !important; }

/* Links Amanda hasn't supplied yet: rendered but deliberately inert so no
   dead button ships. Delete this class from the link once the URL is added. */
.hfh-link-pending {
	background: #E8EEF5 !important;
	color: #7C8DA6 !important;
	border: 1px dashed #B9C6D6 !important;
	pointer-events: none;
	cursor: default;
}
.hfh-link-pending::after { content: ' (link coming soon)'; font-weight: 600; opacity: 0.85; }

.hfh-ho-sub-title {
	font-family: var(--hfh-font-serif) !important;
	font-size: 26px !important;
	color: var(--hfh-dark-text) !important;
	margin: 40px 0 18px !important;
}
.hfh-ho-pay {
	margin-top: 40px;
	background: #F5F7FA;
	border-radius: 14px;
	padding: 28px 32px;
	border: 1px solid #E4E9F0;
}
.hfh-ho-pay .hfh-ho-sub-title { margin-top: 0 !important; }
.hfh-ho-questions { margin: 18px 0 0 !important; font-size: 15px !important; color: var(--hfh-body-text) !important; }
.hfh-ho-inline-link { color: var(--hfh-habitat-blue) !important; font-weight: 700; text-decoration: underline; }
.hfh-ho-intro { font-size: 15px !important; line-height: 1.6 !important; color: var(--hfh-body-text) !important; margin: 0 0 16px !important; }

@media (max-width: 980px) {
	.hfh-ho-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 42 — Round 2 (Amanda 7/20)
   ============================================================ */

/* ReStore: left-justify the copy under "Items We Accept". */
.hfh-items-description,
.hfh-items-description p,
.hfh-items-description ul,
.hfh-items-description li { text-align: left !important; }

/* ------------------------------------------------------------
   Arts & Sustainability page (content supplied by Amanda 7/24)
   ------------------------------------------------------------ */
.hfh-as-wrap { margin-top: 24px; }
.hfh-as-prose p {
	font-size: 17px !important;
	line-height: 1.75 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 0 18px !important;
	max-width: 900px;
}
.hfh-as-pullquote {
	font-family: var(--hfh-font-serif) !important;
	font-size: 25px !important;
	line-height: 1.35 !important;
	color: var(--hfh-habitat-blue) !important;
	border-left: 4px solid var(--hfh-habitat-blue);
	padding: 6px 0 6px 22px !important;
	margin: 26px 0 !important;
	max-width: 780px;
}

/* Three beliefs */
.hfh-as-beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hfh-as-belief {
	background: var(--hfh-white);
	border-radius: 14px;
	padding: 30px 28px;
	border: 1px solid #EBEBEB;
	border-top: 4px solid var(--hfh-habitat-blue);
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.hfh-as-belief:nth-child(2) { border-top-color: var(--hfh-bright-green); }
.hfh-as-belief:nth-child(3) { border-top-color: var(--hfh-orange, #f26522); }
.hfh-as-belief-name {
	font-family: var(--hfh-font-serif) !important;
	font-size: 24px !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 8px !important;
}
.hfh-as-belief-lead {
	font-weight: 700 !important;
	font-size: 16px !important;
	color: var(--hfh-habitat-blue) !important;
	margin: 0 0 12px !important;
}
.hfh-as-belief p:last-child {
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 !important;
}

/* Programs / creativity in action */
.hfh-as-progs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.hfh-as-prog {
	background: var(--hfh-white);
	border-radius: 14px;
	padding: 26px 24px;
	border: 1px solid #EBEBEB;
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.hfh-as-prog-icon {
	width: 52px; height: 52px;
	border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(56,89,136,0.10);
	color: var(--hfh-habitat-blue);
	font-size: 21px;
	margin-bottom: 14px;
}
.hfh-as-prog-name {
	font-family: var(--hfh-font-serif) !important;
	font-size: 20px !important;
	color: var(--hfh-dark-text) !important;
	margin: 0 0 8px !important;
}
.hfh-as-prog p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--hfh-body-text) !important;
	margin: 0 !important;
}
.hfh-as-closing {
	font-family: var(--hfh-font-serif) !important;
	font-size: 21px !important;
	color: var(--hfh-dark-text) !important;
	text-align: center;
	margin: 34px auto 0 !important;
	max-width: 760px;
}

/* Who it's for */
.hfh-as-opps-lead { font-weight: 700 !important; margin: 20px 0 10px !important; }
.hfh-as-opps { list-style: none !important; padding: 0 !important; margin: 0 !important;
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; max-width: 900px; }
.hfh-as-opps li {
	position: relative; padding: 8px 0 8px 26px;
	font-size: 16px; line-height: 1.5; color: var(--hfh-body-text);
}
.hfh-as-opps li::before {
	content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
	position: absolute; left: 0; top: 8px;
	color: var(--hfh-bright-green); font-size: 13px;
}

/* Upcoming events */
.hfh-as-events { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.hfh-as-event {
	background: var(--hfh-white);
	border-radius: 14px; padding: 26px 28px;
	border: 1px solid #EBEBEB; border-left: 4px solid var(--hfh-habitat-blue);
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.hfh-as-event-name {
	font-family: var(--hfh-font-serif) !important;
	font-size: 22px !important; color: var(--hfh-dark-text) !important; margin: 0 0 6px !important;
}
.hfh-as-event-dates { font-size: 15px !important; color: var(--hfh-habitat-blue) !important; font-weight: 600 !important; margin: 0 !important; }
.hfh-as-events-note { margin-top: 20px !important; font-size: 16px !important; color: var(--hfh-body-text) !important; font-style: italic; }

/* Sponsors */
.hfh-as-sponsors { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 20px; }
.hfh-as-sponsor img { height: 90px; width: auto; max-width: 260px; object-fit: contain; }

@media (max-width: 980px) {
	.hfh-as-beliefs, .hfh-as-progs { grid-template-columns: 1fr; }
	.hfh-as-opps, .hfh-as-events { grid-template-columns: 1fr; }
}

/* Inquiry form sections (Forminator embeds, Amanda 7/24) */
.hfh-form-wrap { margin-top: 26px; }
.hfh-form-embed { max-width: 820px; }
.hfh-contact-form-section .forminator-ui { font-family: var(--hfh-font-sans) !important; }

/* Amanda 7/20: remove the bokeh/sparkle hero treatment on Raise the Roof.
   The sparkle background image is gone from the section; this kills the
   leftover decorative radial "glow" (still the pre-recolour gold). */
.hfh-rtr-hero::before { display: none !important; }

/* The RTR hero was built for the dark bokeh photo. With the bokeh removed the
   background is light, so flip the type/card that were white-on-dark. The navy
   date block keeps its white type. */
.hfh-rtr-hero .hfh-rtr-lead { color: var(--hfh-body-text) !important; }
.hfh-rtr-hero .hfh-rtr-savedate {
	background: var(--hfh-white) !important;
	border: 1px solid #E4E9F0 !important;
	box-shadow: 0 10px 28px rgba(30,52,85,0.10) !important;
}
.hfh-rtr-hero .hfh-rtr-savedate-venue { color: var(--hfh-dark-text) !important; }
.hfh-rtr-hero .hfh-rtr-savedate-room  { color: var(--hfh-body-text) !important; }
.hfh-rtr-hero .hfh-rtr-savedate-date,
.hfh-rtr-hero .hfh-rtr-savedate-date * { color: var(--hfh-white) !important; }

/* ------------------------------------------------------------
   Carousel: arrows + auto-scroll for the sponsor / gallery tracks
   (Amanda 7/20 — replaces the visible horizontal scrollbar)
   ------------------------------------------------------------ */
.hfh-carousel { position: relative; }
.hfh-carousel > [class*="-track"] {
	scrollbar-width: none;             /* Firefox */
	-ms-overflow-style: none;          /* old Edge */
	scroll-behavior: smooth;
}
.hfh-carousel > [class*="-track"]::-webkit-scrollbar { display: none; height: 0; }

.hfh-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(30,52,85,0.12);
	background: rgba(255,255,255,0.96);
	color: var(--hfh-habitat-blue);
	font-size: 15px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(30,52,85,0.16);
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	z-index: 3;
	padding: 0;
}
.hfh-carousel-btn:hover { background: var(--hfh-habitat-blue); color: var(--hfh-white); }
.hfh-carousel-btn:focus-visible { outline: 3px solid var(--hfh-bright-blue); outline-offset: 2px; }
.hfh-carousel-btn[disabled] { opacity: 0.35; cursor: default; box-shadow: none; }
.hfh-carousel-btn[disabled]:hover { background: rgba(255,255,255,0.96); color: var(--hfh-habitat-blue); }
.hfh-carousel-prev { left: -10px; }
.hfh-carousel-next { right: -10px; }
.hfh-carousel.is-static .hfh-carousel-btn { display: none; }

/* On the dark RTR gallery band the arrows need a lighter treatment. */
.hfh-rtr-gallery .hfh-carousel-btn { border-color: rgba(255,255,255,0.35); }

@media (max-width: 780px) {
	.hfh-carousel-prev { left: 2px; }
	.hfh-carousel-next { right: 2px; }
	.hfh-carousel-btn { width: 38px; height: 38px; font-size: 13px; }
}

/* ------------------------------------------------------------
   Amanda 7/20 (All Pages): carry the landing page's blue-section
   treatment onto the blue heading section of every subpage —
   the little line of houses, plus soft blue/orange accent shapes.
   Applied purely via pseudo-elements on .hfh-page-hero, so no
   page content changes and it picks up automatically on new pages.
   ------------------------------------------------------------ */
.hfh-page-hero {
	position: relative;
	overflow: hidden;
}
/* Soft blue + orange accent shapes. */
.hfh-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 12% 80%, rgba(0,175,215,0.22) 0%, transparent 55%),
		radial-gradient(ellipse at 88% 16%, rgba(242,101,34,0.16) 0%, transparent 52%);
	pointer-events: none;
	z-index: 1;
}
/* The same house-outline artwork used on the landing hero. */
.hfh-page-hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 190px;
	background: url('../images/hero-houses.svg') no-repeat bottom center;
	background-size: 1440px auto;
	pointer-events: none;
	z-index: 1;
}
/* Hero content stays above the decorative layers. */
.hfh-page-hero .et_pb_row,
.hfh-page-hero .et_pb_column { position: relative; z-index: 2; }

@media (max-width: 780px) {
	.hfh-page-hero::after { height: 120px; background-size: 1100px auto; }
}

/* Hammer & Nails is a named-contributor list on the live site (no logos).
   Styled to sit in the same card language as the other tiers, which also
   addresses Amanda's "make the last (off-theme) box match the rest". */
.hfh-rtr-contributors {
	list-style: none !important;
	padding: 0 !important;
	margin: 10px 0 0 !important;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px 24px;
}
.hfh-rtr-contributors li {
	position: relative;
	padding: 6px 0 6px 18px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--rtr-navy);
}
.hfh-rtr-contributors li::before {
	content: '';
	position: absolute;
	left: 0; top: 15px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--hfh-habitat-blue);
}
@media (max-width: 980px) { .hfh-rtr-contributors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hfh-rtr-contributors { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Amanda 7/20 — Our Programs: "Text in boxes is cut off in
   minimized desktop window and mobile version."
   Cause: .hfh-program-card was locked to aspect-ratio 4/3 with
   overflow:hidden, so as the column narrows the card's height
   shrinks with its width while the copy does not — clipping it.
   Fix: drop the rigid ratio, use a min-height instead. The row is
   a grid (items stretch), so cards stay even and grow to fit.
   ------------------------------------------------------------ */
.hfh-program-card {
	aspect-ratio: auto !important;
	min-height: 340px;
}
@media (max-width: 1180px) { .hfh-program-card { min-height: 320px; } }
@media (max-width: 980px)  { .hfh-program-card { min-height: 290px; } }
@media (max-width: 600px)  { .hfh-program-card { min-height: 240px; } }

/* Amanda 7/20 — Donate (Corporate Sponsorships) and Homeownership
   (Application Process) photos: "make the picture fit more naturally".
   Frame them like the rest of the site's imagery instead of a bare
   full-width drop-in: constrained width, capped height, rounded + shadow. */
.hfh-corporate-photo img,
.hfh-process-photo img {
	width: 100%;
	max-width: 760px;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 12px 34px rgba(30,52,85,0.14);
	margin: 30px auto 4px;
	display: block;
}

/* Divi wraps module images in a shrink-to-fit <span class="et_pb_image_wrap">,
   so margin:auto on the <img> never centres it — the photo hung left with dead
   space beside it. Centre the wrapper so the picture sits naturally in the
   full-width column (Amanda 7/20, Donate + Homeownership photos). */
.hfh-corporate-photo,
.hfh-process-photo { text-align: center; }
.hfh-corporate-photo .et_pb_image_wrap,
.hfh-process-photo .et_pb_image_wrap {
	display: block !important;
	width: 100%;
	max-width: 760px;
	margin: 0 auto !important;
}

/* Amanda 7/20 — Homeownership "use anywhere" photos, placed in the Eligibility
   and Current Homeowners sections. Framed to match the corporate/process photos. */
.hfh-anywhere-photo { text-align: center; }
.hfh-anywhere-photo .et_pb_image_wrap {
	display: block !important;
	width: 100%;
	max-width: 820px;
	margin: 34px auto 4px !important;
}
.hfh-anywhere-photo img {
	width: 100%;
	max-width: 820px;
	height: auto;
	max-height: 440px;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 12px 34px rgba(30,52,85,0.14);
	display: block;
}

/* ============================================================
   SECTION 40 — Volunteer form sub-pages: breathing room below header (Lee 7/31)
   The dedicated form pages (/volunteer/group, /corporate, /court-ordered,
   /contact — children of Volunteer 161) have no hero, so their first section
   (the form section) sat only 72px under the header per the Section 38 rule,
   bumping the blue eyebrow up too tight (~19px below the logo). Push it clear.
   Using margin-top (not padding) sidesteps Section 38's !important padding;
   the section bg is white = body bg, so the added space shows no seam.
   Scoped to children of the form-parent pages → no other page is affected.
   Covers: Volunteer subpages (161, .hfh-contact-form-section), the Homeowner
   Warranty page (child of 167, .hfh-contact-form-section) and the Sponsor a
   Home page (child of 138, .hfh-sponsor-form-section). (extended Lee 7/31)
   ============================================================ */
body.parent-pageid-161 .et-l--body .hfh-contact-form-section,
body.parent-pageid-167 .et-l--body .hfh-contact-form-section,
body.parent-pageid-138 .et-l--body .hfh-sponsor-form-section {
	margin-top: 48px;
}
@media (max-width: 767px) {
	body.parent-pageid-161 .et-l--body .hfh-contact-form-section,
	body.parent-pageid-167 .et-l--body .hfh-contact-form-section,
	body.parent-pageid-138 .et-l--body .hfh-sponsor-form-section { margin-top: 28px; }
}

/* ============================================================
   SECTION 41 — Forminator form buttons (Lee 7/31)
   Every API-built form rendered a BLANK GRAY submit box: (1) no label —
   a Forminator quirk where a form with no submitData.custom-submit-text
   hits a code branch that returns empty; labels are now set to "Submit"
   on all forms server-side. (2) unstyled — this restyles the submit to
   the site's primary pill button, and tidies the file-upload/delete
   buttons that were browser-default gray. Applies to every Forminator
   form site-wide (dedicated pages + inline).
   ============================================================ */
.forminator-ui.forminator-custom-form button.forminator-button-submit,
.forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	background: var(--hfh-bright-blue) !important;
	color: var(--hfh-white) !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 15px 44px !important;
	font-family: var(--hfh-font-sans) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 6px 18px rgba(0,175,215,0.28) !important;
}
.forminator-ui.forminator-custom-form button.forminator-button-submit:hover,
.forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit:hover {
	background: #0098BC !important;
	color: var(--hfh-white) !important;
	transform: translateY(-1px);
}
.forminator-ui.forminator-custom-form button.forminator-button-submit:focus-visible {
	outline: 3px solid rgba(0,175,215,0.45) !important;
	outline-offset: 2px !important;
}
/* File-upload + delete buttons — subtle secondary (were default gray) */
.forminator-ui.forminator-custom-form .forminator-button-upload,
.forminator-ui.forminator-custom-form .forminator-button-delete {
	background: var(--hfh-light-gray) !important;
	color: var(--hfh-body-text) !important;
	border: 1px solid #D5DBE4 !important;
	border-radius: 8px !important;
	padding: 10px 22px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
}
.forminator-ui.forminator-custom-form .forminator-button-upload:hover {
	background: #E9EDF2 !important;
}

/* ============================================================
   SECTION 42 — Home page body-copy size bumps to 16px (Lee 7/31)
   Three separate asks, all bumping card body text to 16px:
   ============================================================ */
/* 1) "Find Your Connection" — all three boxes (Apply, Volunteer, Donate).
      Started as Apply-only, extended to all three per Lee 7/31. */
.hfh-connection-card p { font-size: 16px !important; }

/* 2) "Our Programs" — all three full-color program cards (were 14px). */
.hfh-program-card p { font-size: 16px !important; }

/* 3) ReStore — all four breakout highlights (were 14px). */
.hfh-restore-highlight-text p { font-size: 16px !important; }

/* ============================================================
   SECTION 43 — Home Repair "Applications are currently closed" (Lee 8/3)
   The 3 apply-method cards STAY visible; only each card's action button is
   swapped for this grayed, non-clickable indicator (sits where the link was).
   To reopen: put the original <a class="hfh-card-link"> links back.
   ============================================================ */
.hfh-card-closed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: var(--hfh-gray);
	font-family: var(--hfh-font-sans);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-style: normal;
	cursor: not-allowed;
}
.hfh-card-closed::before {
	content: "\f05e";                 /* fa ban / no-entry glyph */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 12px;
	opacity: 0.8;
}

/* ============================================================
   SECTION 44 — Font sweep: card/box BODY text → 16px (Liz/Amanda, Lee 8/3)
   Bring all the small card/box body copy up to 16px for consistency with the
   home-page boxes (which were done earlier). Deliberately EXCLUDES eyebrows,
   section labels, badges, meta/role labels, menu text, footer fine print,
   button/icon glyphs, and news/blog meta — those stay intentionally small.
   ============================================================ */
.hfh-value-card p,
.hfh-drives-card p,
.hfh-timeline-item p,
.hfh-lifecycle-step p,
.hfh-future-card p,
.hfh-bridge-card-body p,
.hfh-veteran-card-body p,
.hfh-veteran-callout-body,
.hfh-rtr-detail-card p,
.hfh-rtr-tier-desc,
.hfh-rtr-tier-open p,
.hfh-ho-card-text,
.hfh-ho-intro,
.hfh-as-belief p:last-child,
.hfh-as-prog p,
.hfh-ways-to-give .et_pb_text p,
.hfh-ways-to-give .hfh-give-method p,
.hfh-tax-callout p,
.hfh-tax-callout--compact p,
.hfh-alert-body p,
.hfh-opp-card-wrap p {
	font-size: 16px !important;
}

/* ============================================================
   SECTION 45 — Tighten the space above card groups (Lee 8/3, corrected 8/4)
   REAL cause: on many sections the card grid sits in a SEPARATE Divi row from
   its intro text, and that card row carries a ~56px top MARGIN + ~26px top
   padding, stacked on the intro row's ~26px bottom padding → a ~130px gap
   (vs ~48px where intro+cards share one row). That inconsistency is the
   "massive space." Fix: trim the card row's top margin/padding AND the
   intro-only row's bottom padding. Scoped via :has() to rows that actually
   contain our card grids, so the (approved) spacing BETWEEN SECTIONS — which
   comes from section padding, not row margin — is left alone.
   ------------------------------------------------------------
   ROBUST (8/4b): chasing card classes kept missing some (Ways to Give uses
   .hfh-give-card, not -wrap). Since the card grid is always a NON-FIRST row in
   its section (a clean adjacent sibling after the intro row), target that
   structurally: trim the top margin/padding of any row that follows another
   row, and the bottom padding of the row it follows. Scoped to the non-home
   page BODY, so header/footer, section-to-section spacing (section padding),
   and the separately-tuned home page are all left alone. */
body:not(.home) .et-l--body .et_pb_row + .et_pb_row {
	margin-top: 14px !important;
	padding-top: 8px !important;
}
body:not(.home) .et-l--body .et_pb_row:has(+ .et_pb_row) {
	padding-bottom: 10px !important;
}
.hfh-section-description { margin-bottom: 12px !important; }


/* ============================================================
   SECTION 46 - Footer social icons: restore glyphs (Amanda 8/5)
   .hfh-footer-social-list is hand-built raw HTML; Divi only enqueues the
   per-network glyph CSS when a real social MODULE exists on the page, so the
   icons rendered blank (empty ::before, font fell back to Nunito). Set the
   ETmodules glyphs explicitly. Codes verified vs Divi CSS (linkedin \e09d).
   ============================================================ */
.hfh-footer-social-list .et_pb_social_media_follow_network a.icon::before {
	font-family: 'ETmodules';
	font-weight: normal;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.hfh-footer-social-list .et-social-facebook a.icon::before  { content: '\e093'; }
.hfh-footer-social-list .et-social-instagram a.icon::before { content: '\e09a'; }
.hfh-footer-social-list .et-social-linkedin a.icon::before  { content: '\e09d'; }


/* === SECTION 47 - Bridge Home hero photo (Amanda 8/5) === */
.hfh-bridge-hero-photo {
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
	display: block;
}


/* === SECTION 48 - Arts & Sustainability photos + video (Amanda 8/5) === */
.hfh-as-feature { margin: 10px 0 4px; }
.hfh-as-feature img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.14); display: block; }
.hfh-as-photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0; }
.hfh-as-photo-row img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.hfh-as-gallery { column-count: 3; column-gap: 16px; margin: 10px 0; }
.hfh-as-gallery img { width: 100%; border-radius: 12px; margin: 0 0 16px; display: block; break-inside: avoid; }
.hfh-as-video { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; margin: 28px 0 4px; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.hfh-as-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .hfh-as-gallery { column-count: 2; } .hfh-as-photo-row { grid-template-columns: 1fr 1fr; } }


/* === SECTION 49 - Left-align Forminator forms in the donation embed (Amanda 8/6) ===
   .hfh-donation-form-embed centers its content (placeholder + qgiv button); the
   qgiv :has() override left-aligns real donation widgets but NOT Forminator forms,
   so Forminator labels rendered centered. Mirror the override for Forminator. */
.hfh-donation-form-embed:has(.forminator-ui) {
	text-align: left;
	align-items: flex-start;
	justify-content: flex-start;
}
.hfh-donation-form-embed .forminator-ui { width: 100%; }
.hfh-donation-form-embed .forminator-ui .forminator-label,
.hfh-donation-form-embed .forminator-ui .forminator-row { text-align: left; }


/* === SECTION 50 - Make a Payment page (Amanda 8/6) === */
.hfh-pay-title { margin: 6px 0 10px; }
.hfh-pay-intro { max-width: 780px; color: var(--hfh-gray); }
.hfh-pay-card { background:#fff; border-radius:16px; padding:32px; box-shadow:0 8px 24px rgba(0,0,0,0.06); border:1px solid #eef1f5; margin-top:24px; }
.hfh-pay-card-title { margin-top:0; }
.hfh-pay-label { font-weight:700; margin:18px 0 6px; }
.hfh-pay-list { margin:0 0 6px; padding-left:20px; }
.hfh-pay-list li { margin-bottom:6px; }
#smart-button-container { max-width:520px; margin:22px auto 0; }
#smart-button-container > div[style] { margin-bottom:14px; }
#smart-button-container label { font-weight:600; display:block; margin-bottom:6px; }
#smart-button-container input[type="text"], #smart-button-container input[type="number"] { width:100%; max-width:340px; padding:11px 13px; border:1px solid #ccd3db; border-radius:8px; font-size:16px; }
#smart-button-container span { color:#888B8D; margin-left:6px; }
#paypal-button-container { max-width:440px; margin:10px auto 0; }