/* Mobile-first, clean, no hero balloons. High contrast where needed. */
:root{
  --ink:#0b0b0b; --muted:#3b4a60;
  --blue:#1E64C8; --red:#E43D30; --yellow:#F9B817; --green:#2E8B57;
  --navy:#0b1220; --panel:#fff; --strip:#f6f9fe;
  --shadow:0 10px 30px rgba(2,8,23,.08); --radius:16px;
}

/* Hide skip link unless keyboard-focused (accessibility without visual clutter) */
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.6rem .8rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#eaf6ff 0%,#ffffff 60%);line-height:1.65}
img{max-width:100%;height:auto;display:block}

.wrap{width:min(960px,92%);margin:0 auto}
.hdr{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:.3px}
.nav{display:none;gap:.6rem}
.nav a{color:var(--ink);text-decoration:none;font-weight:800}
.btn{display:inline-block;text-decoration:none;font-weight:800;padding:.85rem 1.1rem;border-radius:14px;background:var(--blue);color:#fff;box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.btn.small{padding:.5rem .75rem;font-size:.9rem}
.btn.big{padding:1rem 1.25rem}

h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.7rem,2.8vw + 1rem,2.6rem);line-height:1.15;margin:.1rem 0 .5rem}
h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.35rem,1.4vw + 1rem,2rem);margin:0 0 .6rem}
h3{font-weight:700;margin:.2rem 0 .4rem}
.sub{color:var(--muted);max-width:62ch}
.floatword{background:linear-gradient(90deg,var(--blue),var(--red),var(--yellow),var(--green));-webkit-background-clip:text;color:transparent}

.hero{padding:2.2rem 0 1.3rem}
.hero-inner.no-art{display:flex;flex-direction:column;gap:1rem}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}

/* Sections */
.section{padding:1.9rem 0}
.section.alt{background:var(--strip)}
.section.strip{background:#fff}
.section.contrast{background:var(--navy);color:#fff}
.section.highlight{background:linear-gradient(180deg,#fff 0%,#eaf4ff 100%)}

/* Cards / grids */
.cards{display:grid;gap:.8rem}
.cards.two{grid-template-columns:1fr}
.card{background:#fff;border-radius:14px;padding:1rem;box-shadow:var(--shadow)}
.accent-blue{border-left:6px solid var(--blue)}
.accent-red{border-left:6px solid var(--red)}

.grid.goals{display:grid;grid-template-columns:1fr;gap:.8rem}
.goal{background:#fff;border-radius:14px;padding:1rem;box-shadow:var(--shadow)}
.goal .icon{font-size:1.5rem}
.b-blue{border-top:5px solid var(--blue)} .b-red{border-top:5px solid var(--red)}
.b-yellow{border-top:5px solid var(--yellow)} .b-green{border-top:5px solid var(--green)}

.values{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.value{background:#fff;border-radius:12px;padding:.8rem;text-align:center;box-shadow:var(--shadow)}

/* HIGHER CONTRAST in "What Makes Us Different" */
.section.contrast .card.invert{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff}
.section.contrast .card.invert h3{color:#fff}
.section.contrast .card.invert p{color:#e6eefc}

/* Footer */
.site-footer{background:#0b1220;color:#b9c2d0;padding:1.6rem 0;margin-top:1rem}
.foot{display:grid;grid-template-columns:1fr;gap:.6rem}
.site-footer a{color:#e2e8f0;text-decoration:none}

/* Drifting puzzle pieces background */
.bg-pieces{position:fixed;inset:0;z-index:-1;pointer-events:none}
.piece{position:absolute;width:64px;height:64px;opacity:.12;background:url('assets/puzzle.svg') no-repeat center/contain;filter:drop-shadow(0 6px 12px rgba(2,8,23,.15))}
@keyframes drift{0%{transform:translateY(40vh) rotate(0deg)}100%{transform:translateY(-120vh) rotate(360deg)}}
.p1{left:6%;animation:drift 30s linear infinite;color:var(--blue)}
.p2{left:18%;animation:drift 36s linear infinite 2s;color:var(--red)}
.p3{left:32%;animation:drift 32s linear infinite 6s;color:var(--yellow)}
.p4{left:48%;animation:drift 38s linear infinite 1s;color:var(--green)}
.p5{left:62%;animation:drift 28s linear infinite 3s;color:var(--blue)}
.p6{left:74%;animation:drift 34s linear infinite 5s;color:var(--red)}
.p7{left:84%;animation:drift 31s linear infinite 4s;color:var(--yellow)}
.p8{left:92%;animation:drift 35s linear infinite 7s;color:var(--green)}

/* Desktop */
@media (min-width:900px){
  .nav{display:flex}
  .cards.two{grid-template-columns:1fr 1fr}
  .grid.goals{grid-template-columns:repeat(3,1fr)}
  .values{grid-template-columns:repeat(5,1fr)}
}