:root{
	--bg:#9fe1ef; /* soft cyan */
	--brand-red:#e53935;
	--muted:#6b6b6b;
	--max-width:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background:var(--bg);
	color:#333;
	-webkit-font-smoothing:antialiased;
}

.inner{max-width:var(--max-width);margin:0 auto;padding:0 24px}

.site-header{padding:24px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.nav-left{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.nav-item a{color:#333;text-decoration:none;font-weight:600}
.nav-right{display:flex;align-items:center}
.search input{width:220px;padding:8px 12px;border-radius:20px;border:2px solid rgba(255,255,255,0.6);background:transparent;outline:none}

.hero{padding:40px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;align-items:center;gap:24px}

.brand{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.brand-logo{width:clamp(320px,35vw,640px);height:auto;display:block}

.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center}

.h1-wrap{}
h1{font-size:44px;margin:12px 0 32px;color:#3f4a4e;font-weight:800}
.lead{color:var(--muted);font-size:18px;max-width:700px;line-height:1.6;margin:0 auto 40px}
.cta-title{font-size:34px;margin:18px 0 14px;color:#BB4B51}
.btn-primary{display:inline-block;background:var(--brand-red);color:#fff;padding:12px 22px;border-radius:4px;text-decoration:none;font-weight:700}

.hero-image{justify-self:end}
.hero-image img{max-width:420px;width:100%;height:auto;display:block}

.site-footer{padding:28px 0;text-align:center;color:#555}

/* Subpage / learn.html styles */
.sub-hero{background:linear-gradient(180deg,#aee6f6 0%, #cfeef6 100%);padding:48px 0}
.sub-hero-grid{display:grid;grid-template-columns:1fr 280px;align-items:center;gap:24px}
.sub-hero-title{font-family:'Playfair Display', serif;font-size:48px;margin:0 0 12px;color:#0b3a5b}
.sub-hero-lead{font-size:20px;color:#e53935;margin:0 0 20px;font-weight:700}
.sub-hero-content{max-width:640px}
.sub-hero-art{justify-self:end}

.sub-hero-art img, .sub-hero-phone{display:block;max-width:260px;width:100%;height:auto}

.section{padding:56px 0}
.section--dark{background:#143a56;color:#fff}
.about-grid{display:grid;grid-template-columns:1fr 420px;align-items:center;gap:24px}
.about-copy{max-width:680px}
.about-copy h2{font-size:28px;margin-top:6px}
.about-copy p{color:rgba(255,255,255,0.92);line-height:1.7}
.about-art{position:relative}
.about-bag{width:100%;max-width:360px;display:block;margin:0 auto}
.brand-logo.small{width:160px;margin-bottom:12px}

.section--light{background:#f6f0e9;color:#222;text-align:center}
.impact-title{font-size:28px;margin-bottom:10px}
.impact-copy{max-width:820px;margin:0 auto 18px;color:#333}

@media (max-width:980px){
	.sub-hero-grid{grid-template-columns:1fr 220px}
	.about-grid{grid-template-columns:1fr 320px}
}
@media (max-width:720px){
	.sub-hero-grid{grid-template-columns:1fr;gap:18px;text-align:center}
	.sub-hero-art{order:2}
	.sub-hero-content{order:1}
	.sub-hero-art img, .sub-hero-phone{max-width:180px}
	.about-grid{grid-template-columns:1fr;gap:24px}
	.brand-logo.small{width:120px}
}

/* Responsive */
@media (max-width:980px){
	.hero-grid{grid-template-columns:1fr 320px}
	.brand-logo{width:clamp(240px,30vw,480px)}
}
@media (max-width:720px){
	.nav-left{display:none}
	.hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
	.hero-image{order:2}
	.hero-content{order:1}
	.brand{justify-content:center}
	.brand-logo{width:clamp(140px,40vw,260px)}
	h1{font-size:32px;margin-bottom:18px}
	.lead{margin-bottom:20px}
}