/******/
/*** SECTIONS ***/
/******/

/* GLOBAL */

.divider img {
	margin-bottom: -.0625rem;
}

/* FOOTER */

footer .identity img {
	max-width: 14rem;
}

footer .footer-menu ul {
	flex-wrap: wrap;
}

footer .footer-menu ul li {
	width: 50%;
	padding-bottom: .5rem;
}
/* BLOGS */

p.category {
	background: var(--color-petal-pink);
	border-radius: 1rem;
	width: fit-content;
}

p.category {
	font-size: var(--text-p-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	border-radius: var(--radius-20);
	padding: .375rem .75rem .375rem .75rem;
	margin-block-start: 1.5rem;
	margin-block-end: 1.5rem;
}

.breadcrumbs a, .breadcrumbs p {
	font-size: var(--text-p-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

.breadcrumbs a {
	color: var(--color-barnwood-brown);
	text-decoration: none;
}

.article-snippet img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.article-snippet h3 {
	margin-block-start: 0;
}

/* COMMUNITY STORIES */

.community-stories img.quote {
	max-width: 10rem;
	left: 41.5%;
}

.community-stories .container-barnwood-brown p, .timeline-swiper p.caption {
	font-family: "marydale", cursive;
	font-size: var(--text-h4);
}

.timeline-swiper p.caption {
	font-size: var(--text-h6);
}

.community-stories .swiper-controls:before, .swiper-controls:after {
	position: absolute;
}

.community-stories .swiper-controls button {
	background-color: transparent;
	border: none;
}

.swiper-controls {
	height: 100%;
}

/* DUAL COLOR */

.dual-color-right img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	max-height: 37rem;
}

/* IMAGE TEXT */

/* NEUE: plain rectangular images (no organic mask / textured bg, square corners). */
.image-container-mask {
	padding: 0;
}

.image-container-mask img {
	-webkit-mask-image: none;
	mask-image: none;
	width: 100%;
	height: auto;
	border-radius: 0;
	display: block;
	object-fit: cover;
}

/* PRODUCTS */

.products button.a-btn {
	padding-bottom: 0;
}

/* TIMELINE */

.timeline .fade-on-scroll {
	opacity: 0;
	transition: opacity 0.2s linear;
	will-change: opacity;
}

.timeline .step {
	padding-top: 1.75rem;
}

.timeline span.h2 {
	color: var(--color-breezy-blue);
}

/* TITLE TEXT IMAGE SCROLLER */

.horizontal-scroll-wrapper {
	position: relative;
	width: 100vw;
	padding-bottom: 3rem;
	overflow: hidden;
}

.horizontal-scroll-track {
	display: flex;
	height: 100%;
	will-change: transform;
	position: sticky;
	top: 0;
	gap: 1.75rem;
}

.scroll-image-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.scroll-image-item img {
	max-width: 20rem;
	max-height: 20rem;
	height: auto;
	width: auto;
	object-fit: cover;
}

.horizontal-scroll-wrapper {
	overflow: hidden;
	width: 100%;
}

.horizontal-scroll-track {
	display: flex;
	gap: 2rem;
	width: max-content;
	will-change: transform;
	transition: transform 0.05s linear;
}

.scroll-image-item {
	flex: 0 0 auto;
	max-width: 38.5rem;
}

@media screen and (min-width: 48rem) {
	
	/* DUAL COLOR */

	.dual-color-left .flex-column {
		padding-left: 3rem;
		padding-right: 2.5rem;
		max-width: 37.5rem;
	}

	.dual-color-right .flex-column {
		max-width: 39rem;
		padding: 4rem;
	}
	
}

@media screen and (max-width: 47.9375rem) {
	
	/* GLOBAL */
	
	/* FOOTER */
	
	ul#menu-footer-menu {
		padding-top: 1.5rem;
	}
	
	/* COMMUNITY STORIES */
	
	.community-stories .container-barnwood-brown p {
		font-size: var(--text-h5)!important;
	}
	
	/* DUAL COLOR */
	
	.dual-color-left, .dual-color-right {
		padding-top: 1.5rem!important;
		padding-right: 1.5rem!important;
		padding-bottom: 1.5rem!important;
		padding-left: 1.5rem!important;
	}
	
	/* IMAGE TEXT */

	.image-container-mask {
		padding: 0;
	}

}

/* NEUE wordmark logo (replaces SPF logo image in nav.php + footer.php) */
.logo-wordmark {
	font-family: "athelas", "Newsreader", Georgia, serif;
	font-size: 1.6rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: .01em;
	color: var(--color-compassion-cream);
	line-height: 1;
	white-space: nowrap;
}
.logo-wordmark--footer { font-size: 1.4rem; color: var(--color-compassion-cream); }

/* NEUE gallery (swiper) — controls row under the slider: dots left, arrows right (matches Figma "Buttons") */
/* the slider wrapper (.grid-container-full) is a centered flex-row by default — make it a column so the
   slider stacks above a full-width footer (otherwise the footer shrink-wraps and space-between has no room) */
.gallery .grid-container-full { flex-direction: column; align-items: stretch; }
.gallery-swiper { width: 100%; padding-left: 4rem; padding-right: 4rem; }
.gallery-swiper .swiper-slide img { width: 100%; height: 26rem; object-fit: cover; border-radius: 0; display: block; }
.gallery-footer { display: flex; width: 100%; align-self: stretch; justify-content: space-between; align-items: center; padding: 1.5rem 4rem 0; gap: 1rem; box-sizing: border-box; }
.gallery .gallery-pagination, .gallery .swiper-controls { flex: 0 0 auto; }
/* override swiper-bundle's absolute .swiper-pagination so the dots sit in the footer row, left */
.gallery .gallery-pagination { position: static !important; left: auto !important; transform: none !important; width: auto !important; margin: 0 !important; display: flex; align-items: center; justify-content: flex-start; gap: .5rem; text-align: left; }
.gallery-pagination .swiper-pagination-bullet { background: var(--color-good-work-green); opacity: .35; margin: 0; }
.gallery-pagination .swiper-pagination-bullet-active { opacity: 1; }
/* override the global .swiper-controls{height:100%} so arrows align in the row, right */
.gallery .swiper-controls { height: auto; display: flex; align-items: center; gap: .75rem; }
.gallery-prev, .gallery-next { background: var(--color-good-work-green); border: 0; cursor: pointer; padding: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, opacity .2s; }
.gallery-prev:hover, .gallery-next:hover { background: #0a4658; }
.gallery-prev img, .gallery-next img { width: 0.95rem; height: auto; filter: brightness(0) invert(1); }

/* NEUE CTA parallax */
.cta-parallax { position: relative; overflow: hidden; }
.cta-parallax__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; }
.cta-parallax::after { content: ""; position: absolute; inset: 0; background: rgba(6,49,66,0.55); z-index: 1; }
.cta-parallax__inner { position: relative; z-index: 2; padding-top: 7rem; padding-bottom: 7rem; text-align: center; }
.cta-parallax__inner, .cta-parallax__inner h1, .cta-parallax__inner h2, .cta-parallax__inner h3, .cta-parallax__inner p { color: var(--color-compassion-cream); }

/* NEUE staging form */
.neue-form input, .neue-form textarea {
	width: 100%; padding: .9rem 1rem; border: 1px solid var(--color-good-work-green);
	background: transparent; color: var(--color-good-work-green); border-radius: 0;
	font-family: "athelas", "Newsreader", Georgia, serif; font-size: 1rem;
}
.neue-form input::placeholder, .neue-form textarea::placeholder { color: var(--color-good-work-green); opacity: .6; }
.neue-form .button { align-self: flex-start; }

/* NEUE intro_home (hero) — centered stack matching the Figma hero frame */
.intro-home { padding-top: 3rem; padding-bottom: 5rem; }
.intro-home__inner { gap: 2.25rem; }
.intro-home__title { width: 100%; }
.intro-home__title h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; margin: 0; }
.intro-home__image { width: 100%; }
.intro-home__image img { width: 100%; aspect-ratio: 1344 / 696; object-fit: cover; height: auto; border-radius: 0; display: block; }
.intro-home__copy { max-width: min(44rem, 100%); }
.intro-home__copy p { font-size: 1.4rem; line-height: 1.5; margin: 0 0 1.5rem; }
.intro-home a.button.primary, .intro-home .button.primary { background: var(--color-simple-sky-blue); color: var(--color-good-work-green); border-color: var(--color-simple-sky-blue); }
.intro-home a.button.primary:hover { background: var(--color-compassion-cream); color: var(--color-good-work-green); }
/* mobile: hero copy was overflowing the viewport (44rem cap > phone width). Cap to the viewport + scale text down. */
@media screen and (max-width: 47.9375rem) { html, body { overflow-x: hidden; } .intro-home__inner { max-width: 100%; box-sizing: border-box; } .intro-home__copy { width: 100%; max-width: 100%; box-sizing: border-box; } .intro-home__copy p { font-size: 1.1rem; max-width: 100%; overflow-wrap: break-word; } .intro-home__title h1 { word-break: break-word; } .gallery .gallery-swiper, .gallery .swiper, .swiper { overflow: hidden; } }

/* NEUE image_text full-bleed banner (Market / Ways-to-Own): colored panel + edge-to-edge image */
.image-text--fullbleed { padding: 0 !important; }
.image-text__split { display: flex; align-items: stretch; min-height: 32rem; }
.image-text--fullbleed.image-text--reverse .image-text__split { flex-direction: row-reverse; }
.image-text__panel { flex: 1 1 53%; padding: 4.5rem; display: flex; }
.image-text__panel-inner { max-width: 30rem; gap: 1rem; }
.image-text__panel-inner .button-container { margin-top: .5rem; }
.image-text__media { flex: 1 1 47%; background-size: cover; background-position: center; }
@media screen and (max-width: 47.9375rem) {
	.image-text__split { flex-direction: column; }
	.image-text--fullbleed.image-text--reverse .image-text__split { flex-direction: column; }
	.image-text__media { min-height: 18rem; }
	.image-text__panel { padding: 2rem; }
}

/* NEUE gallery heading centered (matches Figma) */
.gallery > .grid-container { text-align: center; }
.gallery > .grid-container .grid-100 { align-items: center; }

/* NEUE text-image — shared grid-50 flex row; crb_reverse flips sides. Used PLAIN by
   image_text (no box/overlap) and WITH an offset cream box by text_image_repeater. */
.image-text__row { display: flex; align-items: center; padding-block: 4.5rem; }
.image-text__row.image-text--reverse { flex-direction: row-reverse; }
.image-text__media-col { flex: 1 1 50%; position: relative; z-index: 1; }
.image-text__media-col img { width: 100%; height: auto; display: block; border-radius: 0; }
.image-text__text-col { flex: 1 1 50%; display: flex; position: relative; z-index: 2; }
/* repeater-only: offset cream box overlapping the image (absent on plain image_text) */
.image-text__box { background: var(--color-compassion-cream); padding: 3.5rem; width: 100%; margin-left: -5rem; box-shadow: 0 1.25rem 2.5rem rgba(6, 49, 66, 0.12); }
.image-text__row.image-text--reverse .image-text__box { margin-left: 0; margin-right: -5rem; }
/* repeater bands: ~164px inter-band gap to match figma Layout/192 (vs 144px on plain image_text); desktop only so mobile stays compact */
@media screen and (min-width: 48rem) { .text-image-repeater .image-text__row { padding-block: 5.125rem; } }
.background-offwhite { background-color: var(--color-offwhite); color: var(--color-good-work-green); }
@media screen and (max-width: 47.9375rem) {
	.image-text__row, .image-text__row.image-text--reverse { flex-direction: column; padding-block: 2rem; }
	.image-text__box { margin: -2rem 1rem 0 !important; }
}

/* NEUE header — uppercase condensed nav + light-blue Connect button */
.navigation__links { gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.navigation__links a { font-family: "acumin-pro-condensed", "Archivo Narrow", sans-serif; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .03em; color: var(--color-compassion-cream); text-decoration: none; }
.connect-button { background: var(--color-simple-sky-blue); color: var(--color-good-work-green); border-color: var(--color-simple-sky-blue); margin-left: 1.75rem; }

/* NEUE footer */
.site-footer { color: var(--color-compassion-cream); }
.footer-top { gap: 2rem; padding-bottom: 1.5rem; }
.footer-links { gap: 4rem; }
.footer-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-col li { margin: 0; }
.footer-links a, .footer-social__label { font-family: "acumin-pro-condensed", "Archivo Narrow", sans-serif; font-weight: var(--font-weight-bold); color: var(--color-compassion-cream); text-decoration: none; }
.footer-social__icons { gap: 1rem; margin-top: .75rem; }
.footer-social__icons a { display: inline-flex; line-height: 0; }
.footer-social__label { text-transform: uppercase; letter-spacing: .04em; }
.footer-credits { display: flex; flex-direction: column; }
.footer-divider { border: 0; height: 1px; width: 100%; background: var(--color-compassion-cream); opacity: .5; margin: 1.5rem 0; flex: 0 0 auto; }
.footer-compliance { opacity: .9; display: block; width: 100%; }
.footer-compliance p { margin: 0; font-size: 0.82rem; line-height: 1.55; max-width: none; }
.footer-eho { float: left; opacity: .85; margin: .1rem 1rem 0 0; }
.footer-bottom { gap: 1rem; margin-top: 1.5rem; clear: both; }
.footer-credits .footer-bottom { display: flex; width: 100%; justify-content: space-between; }
.footer-credits .footer-bottom { display: flex; width: 100%; justify-content: space-between; }
.footer-legal-links a { color: var(--color-compassion-cream); margin-left: 1.5rem; }
/* mobile nav: hide the Connect CTA so it's just logo + hamburger (figma mobile 119:913); anchor the hamburger to the far right (.navigation is position:relative on mobile) */
@media screen and (max-width: 47.9375rem) { .connect-button { display: none; } .navigation .navigation__button { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); } }

/* NEUE logo (real Figma SVG export, replaces wordmark) */
.logo-img { height: 2.75rem; width: auto; display: block; }
.logo-img--footer { height: 9rem; width: auto; }

/* NEUE FAQ accordion (native <details>) */
.faq-list { max-width: 56rem; width: 100%; margin: 2rem auto 0; }
.faq-cat { margin: 2.25rem 0 .5rem; }
.faq-item { border-top: 1px solid rgba(6,49,66,.2); padding: 1rem 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(6,49,66,.2); }
.faq-q { cursor: pointer; font-family: "acumin-pro-condensed", "Archivo Narrow", sans-serif; font-weight: var(--font-weight-bold); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; }
.faq-item[open] .faq-q::after { content: "\2013"; }
.faq-a { padding-top: .75rem; max-width: 52rem; }

/* NEUE rich-text body (legal / long-form) */
.richtext__body { max-width: 52rem; margin: 0 auto; }
.richtext__body h2, .richtext__body h3 { margin-top: 2rem; }
.richtext__body p { margin-bottom: 1rem; }