/* Little Big Dreams · B&W homepage prototype */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Caveat:wght@500;600&display=swap');

:root{
  --ink:#191919; --ink2:#3c3c3c; --ink3:#7c7c7c; --ink4:#a6a6a6;
  --line:#e6e4e0; --line2:#d8d5d0;
  --bg:#ffffff; --soft:#f5f3ef; --soft2:#eeece7;
  --cta:#1a1a1a; --cta-ink:#ffffff; --cta-soft:#ebe8e3; --cta-soft-ink:#2a2a2a;
  --band:#f4f2ee; --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Poppins',system-ui,sans-serif;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
button{font-family:inherit;cursor:pointer;border:0;background:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;padding:13px 26px;border-radius:12px;
  background:var(--cta);color:var(--cta-ink);transition:transform .15s ease,opacity .15s ease}
.btn:hover{transform:translateY(-1px);opacity:.92}
.btn.soft{background:var(--cta-soft);color:var(--cta-soft-ink)}
.btn.lg{padding:15px 34px;font-size:16px}
.btn.block{width:100%}

/* ─────── Header ─────── */
.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:30px;height:82px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand svg{width:46px;height:46px;flex:none}
.brand .wm{font-size:18px;letter-spacing:.2px;line-height:1.05}
.brand .wm b{font-weight:700}
.brand .wm span{font-weight:400}
.brand .tag{display:block;font-size:8.5px;letter-spacing:.28em;color:var(--ink4);
  text-transform:uppercase;margin-top:2px}
.nav{display:flex;gap:28px;margin:0 auto;font-weight:500;font-size:15px}
.nav a{color:var(--ink2);padding:6px 2px;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--ink);transition:right .22s ease}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.hd-right{display:flex;align-items:center;gap:18px;flex:none}
.lang{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--ink3)}
.lang b{width:22px;height:15px;border:1px solid var(--line2);border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--ink2)}

/* ─────── Hero ─────── */
.hero-head{padding:52px 0 40px}
.hero-head .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.hero-head h1{font-size:46px;line-height:1.1;font-weight:700;letter-spacing:-.5px;margin:0;max-width:620px;text-wrap:balance}
.geo{position:relative;flex:none;width:262px;padding-top:6px}
.geo .lbl{font-family:'Caveat',cursive;font-size:30px;font-weight:600;color:var(--ink2);
  position:absolute;left:0;top:34px;line-height:1.05}
.geo svg{width:100%;height:auto;overflow:visible}
.hero-photo img{width:100%;height:auto}

/* ─────── Section frame ─────── */
section.blk{padding:60px 0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);margin:0 0 14px}
h2.h{font-size:25px;font-weight:700;letter-spacing:-.3px;line-height:1.14;margin:0 0 18px}
.lead{color:var(--ink2);font-size:16px;max-width:60ch}

/* Children */
.children .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:6px 0 22px;max-width:420px}
.stats .s .n{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.5px}
.stats .s .c{font-size:11.5px;color:var(--ink3);margin-top:7px;line-height:1.4}
.children p{color:var(--ink2);font-size:14px;max-width:46ch}
.children .cta-row{display:flex;gap:14px;margin-top:26px}
.children .ph{border-radius:14px;overflow:hidden;box-shadow:0 20px 50px -28px rgba(0,0,0,.4)}
.children .ph img{width:100%;height:100%;object-fit:cover}

/* Story / timeline */
.story{background:var(--band)}
.story .top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}
.tl{position:relative;padding:20px 0 8px}
.tl .range{position:absolute;left:0;right:0;top:150px;bottom:4px;opacity:.6;pointer-events:none}
.tl .range svg{width:100%;height:100%}
.tl-track{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px;
  border-top:2px dashed #cbc8c2;margin-top:150px;padding-top:0}
.node{position:relative;flex:1;text-align:center;padding-top:26px}
.node::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--ink);border:3px solid var(--band)}
.node.up{margin-top:-70px}
.node.up::before{top:auto;bottom:-8px}
.node.up .body{margin-top:0;margin-bottom:88px}
.node .yr{font-size:12px;font-weight:600;color:var(--ink3)}
.node .body{font-size:13px;font-weight:500;color:var(--ink);margin-top:3px;line-height:1.3}
.tl-note{position:absolute;right:3%;top:4px;max-width:300px;background:var(--bg);z-index:2;
  border:1px solid var(--line);border-radius:12px;padding:15px 17px;font-size:12.5px;
  color:var(--ink2);line-height:1.5;box-shadow:0 14px 34px -22px rgba(0,0,0,.4)}

/* Projects */
.projects h2.h{margin-bottom:32px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.pcard:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(0,0,0,.45)}
.pcard .thumb{position:relative;aspect-ratio:16/10.5;overflow:hidden;background:var(--soft2)}
.pcard .badge{position:absolute;top:11px;left:11px;z-index:2;background:rgba(20,20,20,.82);
  color:#fff;font-size:11px;font-weight:600;padding:5px 11px;border-radius:7px;
  letter-spacing:.01em;backdrop-filter:blur(2px)}
.pcard .thumb img{width:100%;height:100%;object-fit:cover}
.pcard .pb{padding:13px 15px 16px}
.pcard h3{font-size:15px;font-weight:600;margin:0 0 6px}
.pcard p{font-size:11.5px;color:var(--ink3);margin:0 0 13px;line-height:1.45}
.bar{height:4px;border-radius:4px;background:var(--soft2);overflow:hidden;margin-bottom:9px}
.bar i{display:block;height:100%;background:var(--ink)}
.prow{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.prow .pc{font-weight:600}.prow .am{font-weight:600;color:var(--ink)}
.projects .mid{text-align:center;margin-top:38px}

/* Teresa */
.teresa{padding:0}
.teresa img{width:100%;height:auto}

/* 100% band */
.pledge{background:var(--band)}
.pledge .wrap{display:flex;align-items:center;gap:30px;justify-content:center;text-align:left;max-width:900px}
.pledge .heart{flex:none;width:96px;height:96px;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -22px rgba(0,0,0,.4)}
.pledge .heart svg{width:40px;height:40px}
.pledge h3{font-size:18px;font-weight:700;margin:0 0 7px}
.pledge p{margin:0;color:var(--ink2);font-size:13.5px;max-width:60ch}

/* Newsletter + footer */
.ft{background:var(--soft);border-top:1px solid var(--line);padding:56px 0 30px}
.news{display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding-bottom:40px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.news .nl-form{display:flex;gap:12px;flex:1;max-width:520px;min-width:300px}
.news input{flex:1;border:1px solid var(--line2);background:var(--bg);border-radius:10px;
  padding:14px 16px;font-family:inherit;font-size:14px}
.news input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:30px;padding:44px 0 0}
.fcol h4{font-size:13px;font-weight:700;margin:0 0 16px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fcol li,.fcol p{font-size:13px;color:var(--ink3);margin:0;line-height:1.5}
.fcol a:hover{color:var(--ink)}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.fbot .links{display:flex;gap:26px;font-size:12.5px;color:var(--ink3)}
.fbot .soc{display:flex;gap:14px}
.fbot .soc a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.fbot .soc a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Responsive */
@media (max-width:820px){
  .hero-head h1{font-size:44px}
  .geo{width:240px}
  .children .wrap{grid-template-columns:1fr;gap:34px}
  .pgrid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .tl-note{position:static;max-width:none;margin:0 0 24px}
  .tl .range{display:none}
  .tl-track{flex-wrap:wrap;gap:22px;border:0;margin-top:20px}
  .node,.node.up{margin:0;padding-top:24px;flex:1 1 40%;text-align:left}
  .node::before,.node.up::before{left:0;transform:none;top:0;bottom:auto}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding:0 22px}
  .nav,.lang{display:none}
  .hero-head .wrap{flex-direction:column}
  .hero-head h1{font-size:36px}
  .stats{gap:24px}
  .pledge .wrap{flex-direction:column;text-align:center}
  .fcols{grid-template-columns:1fr}
  .fbot{flex-direction:column;align-items:flex-start}
}