/* ---------- Design tokens ---------- */
:root{
    --ink:#0e2431;
    --ink-2:#3a5060;
    --muted:#6b7e8a;
    --brand:#12b2e8;
    --paper:#ffffff;
    --line:#e7edf1;
    --shadow:0 10px 22px rgba(0,0,0,.06);
    --radius:14px;
    --max:1150px;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
  img{max-width:100%;display:block}
  .container{width:min(100%,var(--max));margin-inline:auto;padding:0 20px}
  
  /* ---------- Header ---------- */
  .site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:10}
  .header-row{display:flex;align-items:center;gap:18px;height:64px}
  .brand img{height:36px}
  
  .nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
  .nav-list a{color:var(--ink);text-decoration:none;font-weight:600}
  .nav-list a.active{color:var(--brand)}
  .cta{
    margin-left:auto;display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(90deg,var(--brand),#0ed3a5);color:#fff;
    padding:.55rem .9rem;border-radius:999px;font-weight:800;text-decoration:none;box-shadow:var(--shadow)
  }
  
  /* ---------- Hero ---------- */
  .about-hero{ overflow: hidden; }
  .about-hero img{width:100%;height:62vh;object-fit:cover;filter:brightness(.78)}
  .about-hero-overlay{
    position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;gap:12px
  }
  .about-hero-overlay h1{margin:0;font-size:2.2rem;font-weight:900;letter-spacing:.3px}
  .about-hero-overlay p{margin:0 auto;max-width:820px;font-size:1rem;line-height:1.45;opacity:.95}
  
  /* ---------- Trio cards (lifted into hero bottom) ---------- */
  .about-trio{
    position: relative;
    z-index: 5;
    --overlap: 120px;                       /* << adjust this to taste */
    transform: translateY(calc(-1 * var(--overlap)));
    margin-bottom: calc(-1 * var(--overlap));
  }
  .trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .about-card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    overflow:visible;box-shadow:var(--shadow);position:relative;
    display:grid;grid-template-rows:auto 160px;min-height:320px
  }
  
  /* number badge */
  .badge{
    top: 0;
    position:absolute;top:-14px;left:14px;width:34px;height:34px;border-radius:50%;
    background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem;
    box-shadow:0 6px 16px rgba(0,0,0,.18)
  }
  
  .card-body{padding:16px 16px 10px}
  .card-body h4{
    margin:6px 0 8px;font-size:1.05rem;letter-spacing:.2px;font-weight:900;text-transform:uppercase;color:var(--ink)
  }
  .card-body p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.4}
  
  .card-media{margin:0}
  .card-media img{width:100%;height:100%;object-fit:cover}
  
  /* ---------- Responsive ---------- */
  @media (max-width:1024px){
    .about-trio{
      --overlap: 150px;
    }
  }
  @media (max-width:680px){
    .about-hero img{height:52vh}
    .trio-grid{grid-template-columns:1fr}
    .about-trio{transform:translateY(-22px);margin-bottom:-22px}
  }