:root{
  --bg: #FBF5EE;
  --card: #ffffff;
  --fg: #2D2D2D;
  --muted: #555555;
  --border: rgba(0,0,0,0.08);
  --accent: #4f46e5;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  line-height:1.6;
  color:var(--ink);
  background: var(--bg);
}

.container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
  background: var(--bg);
  border-bottom:1px solid rgba(148,163,184,0.15);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand .logo{height:34px; width:auto; border-radius:8px}
.brand-name{font-size:1.05rem}
.nav a{
  color:var(--ink); text-decoration:none; margin-left:18px; font-weight:500;
  opacity:.9
}
.nav a:hover{opacity:1}

.hero{
  padding: 84px 0 64px;
  background: var(--bg);
  border-bottom:1px solid rgba(148,163,184,0.12);
}
.hero-inner{
  text-align: left;
}
.hero h1{
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height:1.15;
  margin: 0 0 14px;
  letter-spacing:.2px;
}
.hero .mission{
  max-width: 900px;
  color: var(--muted);
  font-size: clamp(1rem, 0.5vw + .9rem, 1.15rem);
  margin: 0 0 24px;
}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  text-decoration:none;
  border:1px solid rgba(148,163,184,0.25);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.btn.primary{ background: var(--bg); color: black; border-color: transparent; }
.btn.primary:hover{ box-shadow: 0 8px 24px var(--ring); transform: translateY(-1px); }
.btn.secondary{ color: var(--ink); background: var(--bg); }
.btn.secondary:hover{ background: var(--bg); transform: translateY(-1px); }

.section{
  padding: 56px 0;
}
.section h2{
  font-size: clamp(1.3rem, 1.2vw + 1rem, 2rem);
  margin:0 0 22px;
}
.cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  background: var(--bg);
  border:1px solid rgba(148,163,184,0.14);
  border-radius:16px; padding:18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
.card h3{
  margin:0 0 8px; font-size:1.05rem;
}
.card p{ margin:0; color:var(--muted) }

.section.alt{
  background: var(--bg);
  border-top:1px solid rgba(148,163,184,0.12);
  border-bottom:1px solid rgba(148,163,184,0.12);
}
.section .lead{
  max-width: 900px; color: var(--muted)
}
.logos{
  display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:14px 0 0; list-style:none;
}
.logos li{
  background: var(--bg);
  border:1px solid rgba(148,163,184,0.18);
  padding:8px 12px; border-radius:999px; font-size:.9rem
}

.contact-grid{
  display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.contact-item{
  background: var(--bg);
  border:1px solid rgba(148,163,184,0.14);
  border-radius:16px; padding:16px;
}

.site-footer{
  padding: 20px 0;
  color: var(--muted);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between
}
.back-to-top{
  text-decoration:none; padding:8px 12px; border-radius:10px;
  border:1px solid rgba(148,163,184,0.2); color:var(--ink);
}
.back-to-top:hover{ background: var(--bg); --surface:#ffffff; --card:#ffffff;
    --ink:#0b1220; --muted:#475569; --brand:#1d4ed8; --brand-ink:#ffffff;
  }
  body{ background: var(--bg); }
  .card, .contact-item{ background: var(--bg); }
.section-image{
  width:100%; height: clamp(220px, 32vw, 440px);
  object-fit: cover; border-radius: 16px;
  border:1px solid rgba(148,163,184,.2);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.hero-image{ height: clamp(280px, 40vw, 520px); }

.hero-grid .section-image{ height: clamp(300px, 45vw, 560px); }
/* Grid layout for sections with left image (40%/60%) */
.section-grid{
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}
.section-grid .section-figure{ margin: 0; }
.section-grid .section-content{}

@media(min-width: 860px){
  .section-grid{ grid-template-columns: 0.4fr 0.6fr; }
}
.hero-grid .section-image{ height: clamp(300px, 45vw, 560px); }

/* Images on right */
@media(min-width: 860px){ .section-grid{ grid-template-columns: 0.6fr 0.4fr; } }