/* Homepage-only four-campaign hero. All imagery is square and uncropped. */
.hero-campaigns .hero-slide, .hero-campaigns .hero-slide.image-left { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; aspect-ratio: auto; height: clamp(440px, 33.333vw, 560px); background: radial-gradient(ellipse at 80% 20%, #d9f0fb90, transparent 55%), linear-gradient(135deg,#fff,#f4fafe 55%,#eaf7fd); }
.hero-campaigns .hero-slide::after { display: none; }
.hero-campaigns .hero-slide.campaign-process { background: radial-gradient(ellipse at 0 100%, #f39a2015, transparent 50%), linear-gradient(135deg,#102b3a,#0f5681 55%,#1c90cf); }
.hero-campaigns .hero-slide.campaign-loans { background: radial-gradient(ellipse at 5% 10%, #2aa7de22, transparent 50%), linear-gradient(135deg,#102b3a,#0f4f79 45%,#137cb5); }
.hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { grid-row: 1; grid-column: 1; padding: 32px 42px 44px max(48px, calc((100vw - 1260px)/2)); display: block; align-self: center; min-width: 0; }
.hero-campaigns .image-left .hero-copy { grid-column: 2; padding: 32px max(48px, calc((100vw - 1260px)/2)) 44px 32px; }
.hero-campaigns .hero-copy .eyebrow { display: block; color: #126ca3; font-size: 10px; letter-spacing: .1em; line-height: 1.4; margin: 0 0 14px; }
.hero-campaigns .hero-copy .hero-heading { font-size: 44px; line-height: 1.12; margin: 0 0 16px; max-width: 620px; color: #102b3a; }
.hero-campaigns .hero-heading em { color: #1c90cf; }
.hero-campaigns .hero-copy > p { display: block; max-width: 580px; font-size: 17px; line-height: 1.55; margin: 0 0 20px; color: #536b7a; }
.hero-campaigns .campaign-process .hero-heading, .hero-campaigns .campaign-loans .hero-heading { color: white; }
.hero-campaigns .campaign-process .hero-heading em { color: #ffbf61; }
.hero-campaigns .campaign-loans .hero-heading em { color: #7ed4fa; }
.hero-campaigns :is(.campaign-process,.campaign-loans) .hero-copy > p { color: #ffffffd1; }
.hero-campaigns :is(.campaign-process,.campaign-loans) .eyebrow { color: #ffc16b; }
.hero-support { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0 0 20px; color: #126ca3; font-size: 12px; font-weight: 600; }
.hero-support li::before { content: ""; display: inline-block; width: 5px; height: 5px; background: #f39a20; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.hero-campaigns .hero-copy .actions { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-campaigns .hero-copy .button { background: linear-gradient(90deg,#f39a20,#ff7a1a); color: #fff; min-height: 46px; font-size: 14px; padding: 12px 22px; }
.hero-campaigns .hero-copy .button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #f39a2025; }
.hero-secondary { color: #126ca3; font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.hero-campaigns .hero-media, .hero-campaigns .image-left .hero-media { grid-row: 1; grid-column: 2; width: min(calc(100% - 64px), clamp(392px, calc(33.333vw - 48px), 512px)); height: auto; aspect-ratio: 1; max-height: none; justify-self: center; align-self: center; background: transparent; mask-image: none; overflow: hidden; border-radius: 18px; }
.hero-campaigns .image-left .hero-media { grid-column: 1; }
.hero-campaigns .hero-media::after { display: none; }
.hero-campaigns .hero-media > img { position: static; display: block; width: 100%; height: 100%; aspect-ratio: 1; margin: 0; object-fit: contain; object-position: center; max-width: 100%; }
.hero-campaigns .hero-pagination { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 2px; }
.hero-pagination button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; border-radius: 50%; }
.hero-pagination button span { width: 7px; height: 7px; border-radius: 50%; background: #7ea2b4; box-shadow: 0 0 0 1px #ffffff55; transition: background .2s, transform .2s; }
.hero-pagination button[aria-pressed="true"] span { background: #f39a20; transform: scale(1.3); }
.hero-campaigns .slider-arrow { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
.hero-campaigns .hero-slide.is-active .hero-copy > * { animation: hero-copy-enter .55s both; }
.hero-campaigns .hero-slide.is-active .hero-copy .hero-heading { animation-delay: .07s; }
.hero-campaigns .hero-slide.is-active .hero-copy > p { animation-delay: .12s; }
.hero-campaigns .hero-slide.is-active .hero-copy .actions { animation-delay: .18s; }
.hero-campaigns .hero-slide.is-active .hero-media { animation: hero-image-enter .65s both; --hero-enter-x: 24px; }
.hero-campaigns .hero-slide.image-left.is-active .hero-media { --hero-enter-x: -24px; }
@keyframes hero-copy-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-image-enter { from { opacity: 0; transform: translateX(var(--hero-enter-x)); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 701px) and (max-width: 1100px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 24px 32px 40px; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 34px; }
 .hero-campaigns .hero-copy > p { font-size: 15px; }
 .hero-campaigns .hero-media, .hero-campaigns .image-left .hero-media { width: calc(100% - 48px); }
 .hero-campaigns .hero-copy .button { font-size: 13px; padding-inline: 18px; }
}
@media (max-width: 700px) {
 .hero-campaigns .hero-slide, .hero-campaigns .hero-slide.image-left { grid-template-columns: 1fr; grid-template-rows: min(76vw, 320px) 1fr; height: calc(min(76vw, 320px) + 380px); padding-top: 20px; }
 .hero-campaigns .hero-media, .hero-campaigns .image-left .hero-media { grid-column: 1; grid-row: 1; width: min(76vw, 320px); height: min(76vw, 320px); max-height: none; border-radius: 16px; }
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { grid-column: 1; grid-row: 2; align-self: center; padding: 18px 24px 42px; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 28px; line-height: 1.12; margin-bottom: 12px; }
 .hero-campaigns .hero-copy .eyebrow { display: block; font-size: 9px; margin-bottom: 10px; }
 .hero-campaigns .hero-copy > p { display: block; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
 .hero-campaigns .hero-copy .button { min-height: 44px; font-size: 13px; padding: 11px 18px; }
 .hero-campaigns .hero-copy .button .icon { width: 16px; height: 16px; }
 .hero-support { font-size: 10px; gap: 8px 12px; margin-bottom: 16px; }
 .hero-campaigns .slider-arrow { top: calc(20px + min(76vw, 320px)/2); }
 .hero-campaigns .slider-prev { left: 4px; }
 .hero-campaigns .slider-next { right: 4px; }
 .hero-campaigns .hero-copy .actions { gap: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
 .hero-campaigns .hero-slide.is-active .hero-copy > *, .hero-campaigns .hero-slide.is-active .hero-media { animation: none; }
 .hero-pagination button span { transition: none; }
}




/* Preserve the owner's approved banner ratios. */
.hero-campaigns .hero-slide { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; height: calc(100vw / 3); aspect-ratio: 3 / 1; padding: 0; }
.hero-campaigns .hero-slide.image-left { grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; height: calc(100vw / 3); aspect-ratio: 3 / 1; padding: 0; }
.hero-campaigns .hero-media, .hero-campaigns .image-left .hero-media { width: 100%; height: 100%; max-height: none; aspect-ratio: 1; border-radius: 0; }
.hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 24px 48px 40px; }
@media (min-width: 701px) and (max-width: 1100px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 16px 36px 34px; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 32px; margin-bottom: 12px; }
 .hero-campaigns .hero-copy .eyebrow { margin-bottom: 8px; }
 .hero-campaigns .hero-copy > p { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
 .hero-support { font-size: 10px; margin-bottom: 12px; }
}
@media (min-width: 701px) and (max-width: 900px) {
 .hero-campaigns .hero-copy > p, .hero-support { display: none; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 28px; }
}
@media (max-width: 700px) {
 .hero-campaigns .hero-slide, .hero-campaigns .hero-slide.image-left { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 50vw; aspect-ratio: 2 / 1; padding: 0; }
 .hero-campaigns .hero-media { grid-column: 2; grid-row: 1; width: 100%; height: 100%; }
 .hero-campaigns .image-left .hero-media { grid-column: 1; grid-row: 1; width: 100%; height: 100%; }
 .hero-campaigns .hero-copy { grid-column: 1; grid-row: 1; padding: 12px 16px 26px; align-self: center; }
 .hero-campaigns .image-left .hero-copy { grid-column: 2; grid-row: 1; padding: 12px 16px 26px; align-self: center; }
 .hero-campaigns .hero-copy .eyebrow, .hero-campaigns .hero-copy > p, .hero-campaigns .hero-support, .hero-campaigns .hero-secondary { display: none; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 22px; line-height: 1.1; margin: 0 0 12px; }
 .hero-campaigns .hero-copy .button { font-size: 11px; min-height: 36px; padding: 8px 11px; gap: 5px; }
 .hero-campaigns .hero-copy .button .icon { width: 12px; height: 12px; }
 .hero-campaigns .slider-arrow { top: 50%; }
 .hero-campaigns .hero-pagination { bottom: 0; }
 .hero-pagination button { width: 24px; height: 24px; }
 .hero-pagination button span { width: 5px; height: 5px; }
}
@media (max-width: 479px) {
 .hero-campaigns .hero-copy .hero-heading { font-size: 18px; }
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 10px 12px 24px; }
}

/* Restore blended visual edges and established brand-colored decoration. */
.hero-campaigns .hero-media { mask-image: linear-gradient(90deg, transparent, #000 14%); }
.hero-campaigns .image-left .hero-media { mask-image: linear-gradient(90deg, #000 86%, transparent); }
.hero-campaigns .hero-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 35% 85%, #2aa7de14, transparent 60%), radial-gradient(ellipse at 60% 10%, #f39a200d, transparent 45%); }
.hero-campaigns .hero-lines { display: block; }
.hero-campaigns .campaign-process .hero-lines::before, .hero-campaigns .campaign-loans .hero-lines::before { border-color: #7ed4fa35; box-shadow: 0 -16px 0 10px #2aa7de12, 0 -35px 0 22px #2aa7de0d; }
.hero-campaigns .campaign-process .hero-lines::after, .hero-campaigns .campaign-loans .hero-lines::after { border-color: #f39a2028; }
.hero-campaigns .hero-copy > .hero-mobile-description { display: none; }
#how-it-works { scroll-margin-top: 110px; }
@media (min-width: 480px) and (max-width: 700px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 16px 20px; }
 .hero-campaigns .hero-copy .eyebrow { display: block; font-size: 8px; margin-bottom: 8px; }
 .hero-campaigns .hero-copy > p:not(.hero-mobile-description) { display: block; font-size: 12px; line-height: 1.4; margin-bottom: 12px; }
 .hero-campaigns .hero-copy .hero-heading { margin-bottom: 10px; }
}
@media (max-width: 479px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 8px 12px; }
 .hero-campaigns .hero-copy > .hero-mobile-description { display: block; font-size: 11px; line-height: 1.35; margin: 0 0 9px; }
 .hero-campaigns .hero-copy .hero-heading { margin-bottom: 8px; }
 .hero-campaigns .hero-copy .button { font-size: 10px; min-height: 32px; padding: 7px 9px; }
}
@media (min-width: 480px) and (max-width: 559px) {
 .hero-campaigns .hero-copy .eyebrow, .hero-campaigns .hero-copy > p:not(.hero-mobile-description) { display: none; }
 .hero-campaigns .hero-copy > .hero-mobile-description { display: block; font-size: 12px; line-height: 1.4; margin: 0 0 12px; }
}
@media (min-width: 701px) and (max-width: 900px) {
 .hero-campaigns .hero-copy > .hero-mobile-description { display: block; font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
}
/* Clean decorative edges without removing keyboard orientation. */
.hero-campaigns, .hero-campaigns .hero-slide, .hero-campaigns .hero-media { border: 0; outline: none; box-shadow: none; }
.hero-campaigns .hero-slide .hero-lines::before, .hero-campaigns .hero-slide .hero-lines::after { border-color: transparent; }
.hero-campaigns .slider-arrow { border: 0; outline: none; box-shadow: none; }
.hero-campaigns .slider-arrow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--navy); }

/* Use the actual container width, excluding the browser scrollbar, to avoid letterbox seams. */
.hero-campaigns { container-type: inline-size; }
.hero-campaigns .hero-slide, .hero-campaigns .hero-slide.image-left { height: calc(100cqw / 3); }
@media (max-width: 700px) {
 .hero-campaigns .hero-slide, .hero-campaigns .hero-slide.image-left { height: 50cqw; }
}
@media (max-width: 359px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 6px 10px; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 16px; margin-bottom: 7px; }
 .hero-campaigns .hero-copy > .hero-mobile-description { font-size: 10px; line-height: 1.2; margin-bottom: 7px; }
 .hero-campaigns .hero-copy .button { min-height: 30px; padding: 6px 8px; }
}
/* Feather the seam gradually across a broader visual edge. */
.hero-campaigns .hero-media { mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.03) 3%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.55) 21%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.94) 35%, #000 43%); }
.hero-campaigns .image-left .hero-media { mask-image: linear-gradient(90deg, #000 57%, rgba(0,0,0,.94) 65%, rgba(0,0,0,.78) 72%, rgba(0,0,0,.55) 79%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.12) 92%, rgba(0,0,0,.03) 97%, transparent 100%); }
/* Keep text's minimum content height from expanding the square visual track. */
.hero-campaigns .hero-slide, .hero-campaigns .hero-slide.image-left { grid-template-rows: minmax(0, 1fr); }
@media (min-width: 1101px) and (max-width: 1279px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 20px 40px 24px; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 36px; }
 .hero-campaigns .hero-copy > p { font-size: 16px; }
}

/* Equal desktop image/content halves; retain the approved overall banner ratio. */
@media (min-width: 701px) {
 .hero-campaigns .hero-slide, .hero-campaigns .hero-slide.image-left { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .hero-campaigns .hero-media, .hero-campaigns .image-left .hero-media { aspect-ratio: auto; }
 .hero-campaigns .hero-media > img { aspect-ratio: auto; object-fit: cover; }
}

@media (min-width: 701px) and (max-width: 900px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 12px 24px 16px; }
 .hero-campaigns .hero-copy .hero-heading { font-size: 24px; }
 .hero-campaigns .hero-copy .actions { gap: 8px 12px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding: 16px 28px 20px; }
}

@media (min-width: 701px) and (max-width: 900px) {
 .hero-campaigns .hero-copy .button { font-size: 12px; padding: 10px 14px; }
 .hero-campaigns .hero-secondary { font-size: 11px; }
 .hero-campaigns .hero-copy .actions { gap: 8px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
 .hero-campaigns .hero-copy, .hero-campaigns .image-left .hero-copy { padding-block: 14px; }
}