<!-- Cloudforesters Partner Wall - Squarespace Code Block -->
<section class="cf-page">
<style>
.cf-page {
--forest: #173b2c;
--leaf: #6c7f42;
--moss: #bfd8a6;
--cream: #f4f1e8;
--gold: #d6b56d;
--ink-soft: #4c6657;
background: var(--cream);
color: var(--forest);
font-family: inherit;
overflow: hidden;
}
.cf-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 70px 24px;
}
.cf-hero {
position: relative;
padding-top: 50px;
}
.cf-hero::before,
.cf-hero::after {
content: "";
position: absolute;
width: 320px;
height: 320px;
border-radius: 999px;
filter: blur(70px);
opacity: 0.55;
z-index: 0;
}
.cf-hero::before {
right: -110px;
top: -80px;
background: var(--moss);
}
.cf-hero::after {
left: -110px;
bottom: -80px;
background: var(--gold);
opacity: 0.32;
}
.cf-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.cf-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: rgba(255,255,255,0.72);
box-shadow: 0 8px 22px rgba(23,59,44,0.08);
font-size: 14px;
font-weight: 700;
margin-bottom: 22px;
}
.cf-title {
margin: 0;
max-width: 820px;
font-size: clamp(46px, 7vw, 86px);
line-height: 0.95;
letter-spacing: -0.055em;
font-weight: 900;
color: var(--forest);
}
.cf-intro {
margin: 26px 0 0;
max-width: 680px;
font-size: 19px;
line-height: 1.75;
color: #355947;
}
.cf-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 34px;
}
.cf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px 24px;
border-radius: 999px;
font-weight: 800;
text-decoration: none !important;
transition: transform .2s ease, box-shadow .2s ease;
}
.cf-btn:hover {
transform: translateY(-2px);
}
.cf-btn-primary {
background: var(--forest);
color: #fff !important;
box-shadow: 0 14px 28px rgba(23,59,44,0.2);
}
.cf-btn-secondary {
background: rgba(255,255,255,0.65);
color: var(--forest) !important;
border: 1px solid rgba(23,59,44,0.16);
}
.cf-impact-card {
background: rgba(255,255,255,0.72);
padding: 20px;
border-radius: 34px;
box-shadow: 0 24px 60px rgba(23,59,44,0.12);
backdrop-filter: blur(8px);
}
.cf-impact-inner {
background: var(--forest);
color: #fff;
border-radius: 26px;
padding: 36px;
}
.cf-kicker {
margin: 0;
color: var(--moss);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .24em;
font-weight: 900;
}
.cf-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 34px;
}
.cf-stat-number {
font-size: clamp(42px, 5vw, 60px);
line-height: 1;
font-weight: 900;
}
.cf-stat-label {
margin-top: 10px;
color: rgba(255,255,255,0.72);
font-size: 14px;
line-height: 1.45;
}
.cf-quote {
margin-top: 34px;
padding: 24px;
border-radius: 22px;
background: rgba(255,255,255,0.1);
}
.cf-quote strong {
display: block;
font-size: 20px;
line-height: 1.45;
}
.cf-quote span {
display: block;
margin-top: 12px;
color: rgba(255,255,255,0.68);
font-size: 14px;
}
.cf-tier-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.cf-tier-card,
.cf-partner-card {
background: rgba(255,255,255,0.74);
border-radius: 28px;
box-shadow: 0 8px 26px rgba(23,59,44,0.07);
}
.cf-tier-card {
padding: 24px;
}
.cf-tier-icon {
font-size: 30px;
margin-bottom: 14px;
}
.cf-tier-card h3 {
margin: 0;
font-size: 18px;
font-weight: 900;
}
.cf-tier-card p {
margin: 8px 0 0;
color: #587060;
font-size: 14px;
}
.cf-section-head {
margin-bottom: 34px;
}
.cf-section-head p {
margin: 0;
color: var(--leaf);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .22em;
}
.cf-section-head h2 {
margin: 10px 0 0;
font-size: clamp(36px, 5vw, 58px);
line-height: 1;
letter-spacing: -0.045em;
font-weight: 900;
}
.cf-partner-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.cf-partner-card {
padding: 28px;
background: #fff;
transition: transform .2s ease, box-shadow .2s ease;
}
.cf-partner-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 42px rgba(23,59,44,0.13);
}
.cf-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 30px;
}
.cf-logo-placeholder {
width: 66px;
height: 66px;
border-radius: 18px;
background: #e2ead2;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
}
.cf-badge {
display: inline-block;
padding: 7px 12px;
border-radius: 999px;
background: var(--cream);
color: #587060;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.cf-partner-card h3 {
margin: 0;
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 900;
}
.cf-tree-count {
display: flex;
align-items: flex-end;
gap: 8px;
margin-top: 20px;
}
.cf-tree-count strong {
font-size: 54px;
line-height: 0.95;
font-weight: 900;
color: var(--forest);
}
.cf-tree-count span {
padding-bottom: 7px;
color: #587060;
font-weight: 800;
}
.cf-story {
min-height: 96px;
margin: 22px 0 0;
color: var(--ink-soft);
line-height: 1.65;
}
.cf-location {
margin-top: 22px;
color: #587060;
font-size: 14px;
font-weight: 800;
}
.cf-cta {
background: var(--gold);
border-radius: 40px;
padding: 46px;
display: flex;
justify-content: space-between;
gap: 34px;
align-items: center;
}
.cf-cta p:first-child {
margin: 0;
color: rgba(23,59,44,0.7);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .24em;
}
.cf-cta h2 {
max-width: 700px;
margin: 12px 0 0;
font-size: clamp(34px, 5vw, 56px);
line-height: 1;
letter-spacing: -0.045em;
font-weight: 900;
}
.cf-cta-copy {
max-width: 700px;
margin: 22px 0 0;
color: rgba(23,59,44,0.82);
font-size: 18px;
line-height: 1.7;
}
@media (max-width: 980px) {
.cf-hero-grid,
.cf-partner-grid {
grid-template-columns: 1fr;
}
.cf-tier-grid {
grid-template-columns: repeat(2, 1fr);
}
.cf-cta {
display: block;
}
.cf-cta .cf-btn {
margin-top: 28px;
}
}
@media (max-width: 620px) {
.cf-wrap {
padding: 48px 18px;
}
.cf-title {