/* ---- HERO (light) ---- */
  .cl-hero { position:relative; overflow:hidden; padding:150px 0 var(--space-2xl);
    background:linear-gradient(180deg, var(--brand-50) 0%, #fff 78%); }
  .cl-hero-inner { max-width:880px; }
  .cl-hero h1 { line-height:var(--line-tight);
    letter-spacing:-.02em; color:var(--color-secondary); }
  .cl-hero h1 .hl { color:var(--color-primary); }

  /* ---- Stat line ---- */
  .cl-stats { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-xs) var(--space-s); margin:var(--space-l) 0 0; padding:0; }
  .cl-stats li { display:inline-flex; align-items:baseline; gap:var(--space-2xs); background:#fff;
    border:1px solid var(--color-border); border-radius:var(--radius-full); padding:var(--space-xs) var(--space-m); box-shadow:var(--shadow-xs); }
  .cl-stat-fig { font-weight:var(--weight-extrabold); font-size:var(--text-xl); color:var(--color-secondary); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
  .cl-stat-label { font-weight:var(--weight-semibold); font-size:var(--text-sm); color:var(--color-ink-soft); }

  /* ---- Filters ---- */
  .cl-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-m);
    max-width:720px; margin:var(--space-l) auto 0; }
  .cl-field { display:flex; flex-direction:column; gap:var(--space-2xs); }
  .cl-field label { font-weight:var(--weight-bold); font-size:var(--text-sm); letter-spacing:.02em; color:var(--color-secondary); }
  .cl-select { position:relative; }
  .cl-select select { -webkit-appearance:none; appearance:none; width:100%; cursor:pointer;
    font:inherit; font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-ink);
    background:#fff; border:1.5px solid var(--color-border); border-radius:var(--radius-component-md);
    padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-s); transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
  .cl-select select:hover { border-color:var(--color-accent); }
  .cl-select select:focus-visible { outline:none; border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(67,143,185,.22); }
  .cl-caret { position:absolute; right:16px; top:50%; width:16px; height:16px; pointer-events:none;
    transform:translateY(-50%) rotate(90deg); color:var(--color-primary); stroke:currentColor; fill:none; stroke-width:2.4; }

  /* ---- Result count ---- */
  .cl-count { text-align:center; margin:var(--space-m) 0 0; font-size:var(--text-sm); font-weight:var(--weight-semibold);
    letter-spacing:.01em; color:var(--color-ink-soft); }
  .cl-count b { color:var(--color-secondary); font-weight:var(--weight-extrabold); font-variant-numeric:tabular-nums; }

  /* ---- Card grid ---- */
  .cl-grid { margin-top:var(--space-s); }
  .cl-card { position:relative; overflow:hidden; background:var(--brand-25); border:none;
    border-radius:var(--radius-lg); padding:var(--space-m); box-shadow:var(--shadow-xs);
    display:grid; grid-template-columns:auto 1fr; grid-template-areas:"avatar id" "pill pill" "bio bio";
    align-items:center; gap:var(--space-2xs) var(--space-s); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
  .cl-card:hover, .cl-card:focus-within { transform:translateY(-5px); box-shadow:var(--shadow-md); }

  .cl-avatar { grid-area:avatar; width:62px; height:62px; border-radius:var(--radius-full); flex:none;
    background:var(--grad-chip); color:#fff; font-weight:var(--weight-extrabold); font-size:var(--text-xl); letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center; }
  .cl-id { grid-area:id; min-width:0; }
  .cl-name { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-secondary); margin:0; line-height:var(--line-snug); }
  .cl-prof { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-primary); margin:var(--space-3xs) 0 0; }
  .cl-loc { display:flex; align-items:center; gap:var(--space-2xs); font-size:var(--text-sm); color:var(--color-ink-soft);
    margin:var(--space-2xs) 0 0; line-height:var(--line-snug); }
  .cl-pin { width:14px; height:14px; flex:none; color:var(--color-accent); stroke:currentColor; fill:none; stroke-width:2; }

  /* availability pill */
  .cl-pill { grid-area:pill; justify-self:start; display:inline-flex; align-items:center; gap:var(--space-2xs);
    margin-top:var(--space-s); padding:var(--space-2xs) var(--space-xs); border-radius:var(--radius-full);
    font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.02em; border:1px solid transparent; }
  .cl-pill--ok { color:var(--color-success); background:oklch(from var(--color-success) 95% 0.02 h); border-color:oklch(from var(--color-success) 85% 0.04 h); }
  .cl-pill--busy { color:var(--color-ink-soft); background:var(--brand-50); border-color:var(--color-border); }
  .cl-dot { width:8px; height:8px; border-radius:var(--radius-full); flex:none; background:currentColor; }
  .cl-pill--ok .cl-dot { background:var(--color-success); box-shadow:0 0 0 3px rgba(63,174,106,.22); }

  /* bio reveal on hover / keyboard focus */
  .cl-bio { grid-area:bio; display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .3s var(--ease), opacity .26s var(--ease); }
  .cl-bio > p { overflow:hidden; margin:0; font-size:var(--text-sm); line-height:var(--line-normal); color:var(--color-ink-soft); }
  .cl-card:hover .cl-bio, .cl-card:focus-within .cl-bio { grid-template-rows:1fr; opacity:1; margin-top:var(--space-s); }
  .cl-card:hover .cl-bio { padding-top:var(--space-s); border-top:1px solid var(--color-border-soft); }
  .cl-card:focus-within .cl-bio { padding-top:var(--space-s); border-top:1px solid var(--color-border-soft); }

  /* a card hidden by the filters */
  .cl-card.is-hidden { display:none; }

  /* ---- Empty state ---- */
  .cl-empty { text-align:center; max-width:460px; margin:var(--space-m) auto 0; padding:var(--space-l) var(--space-m);
    background:var(--brand-25); border:none; border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); }
  .cl-empty .chip-ic { margin:0 auto var(--space-s); }
  .cl-empty p { margin:0; font-size:var(--text-md); line-height:var(--line-normal); color:var(--color-ink-soft); }

  /* ---- Stub note ---- */
  .cl-stub-note { text-align:center; margin:var(--space-l) auto 0; max-width:46em; font-size:var(--text-sm);
    color:var(--color-ink-soft); }

  /* ---- CTA band (dark) ---- */
  .cl-cta { position:relative; overflow:hidden; background:var(--grad-hero); color:#fff;
    padding:var(--space-3xl) 0; text-align:center; }
  .cl-cta .wrap { position:relative; z-index:1; max-width:760px; }
  .cl-cta h2 { color:#fff; letter-spacing:-.01em; }
  .cl-cta-lede { margin:var(--space-s) auto var(--space-m); max-width:46em; color:rgba(255,255,255,.86); font-size:var(--text-md); line-height:var(--line-relaxed); }
  .cl-cta-btns { display:flex; flex-wrap:wrap; gap:var(--space-xs); justify-content:center; }

  /* ---- Responsive ---- */
  @media (max-width:680px) {
    .cl-hero { padding-top:124px; }
    .cl-filters { grid-template-columns:1fr; gap:var(--space-s); }
    .cl-card { grid-template-columns:auto 1fr; }
  }