/* ---- HERO (dark gradient, stat card right) ---- */
  .cl-hero { position:relative; overflow:hidden; background:var(--grad-hero); color:#fff;
    padding:172px 0 var(--space-3xl); }
  .cl-hero .wrap { position:relative; z-index:2; }
  /* Card column widened from the design's .85fr — the h1 is capped at 15ch so the copy column
     has slack it was not using, and the stat labels wrap less at .95fr. */
  .cl-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-2xl); align-items:center; }
  .cl-hero h1 { color:#fff; max-width:15ch; line-height:var(--line-tight); letter-spacing:-.02em; margin:0; }
  .cl-hero .lede { color:rgba(255,255,255,.82); max-width:52ch; margin:var(--space-s) 0 0; }
  .cl-hero .btn-row { justify-content:flex-start; margin-top:var(--space-l); }

  /* Glass stat card. Deliberately not .card — that is a light surface component and this sits
     on the gradient; borrowing it would mean overriding every property it sets. */
  .cl-live { background:rgb(255 255 255 / 9%); border:1px solid rgb(255 255 255 / 18%);
    backdrop-filter:blur(8px); border-radius:var(--radius-xl); padding:var(--space-l); }
  .cl-live-head { display:flex; align-items:center; gap:var(--space-2xs); margin:0 0 var(--space-m);
    font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.14em;
    text-transform:uppercase; color:rgb(255 255 255 / 72%); }
  .cl-ping { position:relative; display:inline-flex; width:9px; height:9px; flex:none;
    border-radius:var(--radius-full); background:var(--color-success); }
  .cl-ping::before { content:""; position:absolute; inset:0; border-radius:var(--radius-full);
    background:var(--color-success); animation:cl-ping 2s cubic-bezier(0,0,.2,1) infinite; }
  @keyframes cl-ping { 0%{transform:scale(1);opacity:.75} 70%,100%{transform:scale(2.4);opacity:0} }
  @media (prefers-reduced-motion: reduce) { .cl-ping::before { animation:none; } }

  /* ⚠️ ONE grid for all three rows, with the rows as `display:contents` — NOT a fixed track on
     each row. A per-row grid sizes independently, so the numbers land on three different left
     edges; a fixed track fixes the alignment but overflows the moment a figure outgrows it, which
     is exactly what happened when socialProof.clinicians went from "409+" to "1000+" (the number
     ran under its own label). max-content sized once for the whole list does both: aligned, and
     it cannot overlap whatever the figures become. */
  .cl-live-list { margin:0; display:grid; grid-template-columns:max-content 1fr;
    column-gap:var(--space-l); row-gap:var(--space-m); align-items:baseline; }
  .cl-live-list > div { display:contents; }
  .cl-live-list > div + div > dt,
  .cl-live-list > div + div > dd { border-top:1px solid rgb(255 255 255 / 16%); padding-top:var(--space-m); }
  .cl-live-list dt { font-size:var(--step-4); font-weight:var(--weight-extrabold); color:#fff;
    line-height:var(--line-none); font-variant-numeric:tabular-nums; }
  /* ">", "+" and "%" set smaller and slightly recessive — they qualify the number, they are not
     part of it, and at full weight they compete with the digit they attach to. */
  .cl-live-list dt .stat-op { font-size:.72em; font-weight:var(--weight-bold); opacity:.8;
    letter-spacing:0; vertical-align:baseline; }
  .cl-live-list dd { margin:0; font-size:var(--text-md); color:rgba(255,255,255,.8); line-height:var(--line-snug); }

  @media (max-width:900px){
    .cl-hero-grid { grid-template-columns:1fr; gap:var(--space-xl); }
    .cl-hero h1 { max-width:none; }
  }

  /* ---- Filters ---- */
  /* Full container width — the panel now carries three fields plus the chip row, and boxing it
     narrower than the card grid it controls made it read as a separate widget. */
  .cl-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-m);
    margin:var(--space-l) 0 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-md); 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 ----
     Photo-led cards. The card itself is a <button>, so the reset here is deliberate: strip the
     UA button styling and inherit typography, then style it like the surface it looks like. */
  /* Four across. Overrides .grid.cols-3 from the framework rather than changing that shared
     class, which other pages rely on. */
  .cl-grid { margin-top:var(--space-s); grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-m); }
  @media (max-width:860px){ .cl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:560px){ .cl-grid { grid-template-columns:1fr; } }
  .cl-card { appearance:none; -webkit-appearance:none; font:inherit; color:inherit; text-align:left;
    width:100%; padding:0; cursor:pointer; position:relative; overflow:hidden;
    background:var(--color-surface); border:1px solid var(--color-border-soft);
    border-radius:var(--radius-xl); box-shadow:var(--shadow-xs);
    display:flex; flex-direction:column;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
  .cl-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand-100); }
  .cl-card:focus-visible { outline:none; border-color:var(--color-primary);
    box-shadow:var(--shadow-md), 0 0 0 3px oklch(from var(--color-primary) 90% 0.05 h); }

  /* Slightly landscape. The source crops are 480px squares, so object-fit:cover trims top and
     bottom — headshot-crop.py frames with headroom above the face, which is exactly the part
     that can go. Push much past 5/4 and it starts cutting chins. */
  .cl-shot { position:relative; display:block; aspect-ratio:5/4; background:var(--grad-chip); }
  /* ⚠️ Absolute, not in flow. .cl-card is a column flex container, so .cl-shot is a flex item
     with the default min-height:auto — an in-flow <img> at its intrinsic 1:1 sets a floor taller
     than the aspect-ratio asks for, and the ratio is silently ignored. Taking the image out of
     flow lets aspect-ratio own the height. */
  .cl-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .cl-initials { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:var(--weight-extrabold); font-size:var(--step-4); letter-spacing:.02em; }

  .cl-body { display:block; padding:var(--space-m); }
  .cl-name { display:block; font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-secondary); line-height:var(--line-snug); }
  .cl-prof { display:block; font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-primary); margin-top:var(--space-3xs); }
  .cl-loc { display:block; font-size:var(--text-md); color:var(--color-ink-soft); margin-top:var(--space-3xs); }
  .cl-excerpt { display:block; font-size:var(--text-sm); line-height:var(--line-normal); color:var(--color-ink-soft); margin-top:var(--space-xs); }
  .cl-more { display:inline-flex; align-items:center; gap:var(--space-2xs); margin-top:var(--space-s);
    font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-primary); }
  .cl-more svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;
    transition:transform .18s var(--ease); }
  .cl-card:hover .cl-more svg { transform:translateX(3px); }

  /* availability pill, sitting on the photo */
  .cl-pill { position:absolute; left:var(--space-xs); bottom:var(--space-xs);
    display:inline-flex; align-items:center; gap:var(--space-2xs);
    padding:var(--space-3xs) 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; backdrop-filter:blur(6px); }
  .cl-pill--ok { color:var(--color-success); background:oklch(from var(--color-success) 97% 0.02 h / 92%); border-color:oklch(from var(--color-success) 85% 0.04 h); }
  .cl-pill--busy { color:var(--color-ink-soft); background:rgb(255 255 255 / 92%); border-color:var(--color-border); }
  .cl-dot { width:7px; height:7px; 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); }

  /* Two independent reasons a card is not on screen: it failed the filters, or it is beyond the
     current page. Kept separate so "show more" never resurrects a filtered-out card. */
  .cl-card.is-filtered, .cl-card.is-paged { display:none; }

  /* Staggered fade-in, left to right across each row.
     ⚠️ The animation goes on the CARDS, never on .cl-grid. A .reveal on the grid keys its
     scroll range to the grid's own height, and with 100+ cards that range never completes —
     the whole thing sits at --reveal-from forever. Each card carries its own view() timeline
     instead, so height is irrelevant.
     Columns are offset by nth-child(3n) rather than a fixed per-child list: the framework's
     .reveal-stagger only enumerates 12 children, and this grid has 116. The trade-off is that
     nth-child counts filtered-out cards too, so the stagger drifts from strict left-to-right
     once a filter is applied — still reads as a stagger, just not a perfect diagonal. */
  @supports (animation-timeline: view()) {
    .cl-grid .cl-card { animation:fade-slide-up .5s var(--ease) both; animation-timeline:view();
      animation-range:entry 5% cover 20%; }
    .cl-grid .cl-card:nth-child(3n+2) { animation-range:entry 11% cover 26%; }
    .cl-grid .cl-card:nth-child(3n)   { animation-range:entry 17% cover 32%; }
    @media (max-width:860px){
      .cl-grid .cl-card:nth-child(3n+2), .cl-grid .cl-card:nth-child(3n) { animation-range:entry 5% cover 20%; }
      .cl-grid .cl-card:nth-child(2n)   { animation-range:entry 12% cover 27%; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cl-grid .cl-card { animation:none !important; opacity:1 !important; transform:none !important; }
  }

  .cl-more-row { display:flex; justify-content:center; margin-top:var(--space-l); }

  @media (max-width:860px){ .cl-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:600px){ .cl-filters { grid-template-columns:1fr; } }

  /* ---- Search + quick filter chips ---- */
  .cl-search { position:relative; }
  .cl-search input { width:100%; padding:var(--space-xs) var(--space-s) var(--space-xs) var(--space-xl);
    border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface);
    font:inherit; font-weight:var(--weight-semibold); font-size:var(--text-md); color:var(--color-ink); }
  .cl-search input::placeholder { color:var(--color-ink-soft); font-weight:var(--weight-normal); }
  .cl-search input:hover { border-color:var(--color-accent); }
  .cl-search input:focus-visible { outline:none; border-color:var(--color-primary);
    box-shadow:0 0 0 3px oklch(from var(--color-primary) 92% 0.04 h); }
  .cl-search-ic { position:absolute; left:var(--space-s); top:50%; width:17px; height:17px;
    transform:translateY(-50%); pointer-events:none; color:var(--color-ink-soft);
    stroke:currentColor; fill:none; stroke-width:2; }

  /* The chip row spans the whole filter grid rather than sitting in a column — it is a
     shortcut bar, not a third field. */
  .cl-chips-row { grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap;
    gap:var(--space-2xs) var(--space-s); }
  .cl-chips-label { font-size:var(--text-sm); font-weight:var(--weight-bold); letter-spacing:.1em;
    text-transform:uppercase; color:var(--color-ink-soft); }
  .cl-chips { display:flex; flex-wrap:wrap; gap:var(--space-xs); }
  /* Chips ride .btn + .btn-outline for size — the site has no separate chip scale, and .btn's
     base IS the medium (between .btn-sm and .btn-lg). Only the pill shape and the selected
     state are page-specific. */
  .cl-chip { border-radius:var(--radius-full); }
  .cl-chip.is-on { background:var(--grad-chip); border-color:transparent; color:#fff; }
  .cl-chip.is-on:hover { color:#fff; }


  /* ---- Profile modal ----
     Rides the shared .modal styles; only the internal two-column layout is page-specific. */
  /* size comes from .modal-lg; this file only styles what is specific to a clinician profile */
  .cl-modal .modal-head h3 { font-size:var(--text-xl); color:var(--color-secondary); }
  .cl-modal-grid { display:grid; grid-template-columns:296px 1fr; gap:var(--space-xl); }
  .cl-modal-shot { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-lg);
    background:var(--grad-chip); display:block; }
  .cl-modal-prof { margin:var(--space-s) 0 0; font-size:var(--text-md); font-weight:var(--weight-bold); color:var(--color-primary); }
  .cl-modal-meta { list-style:none; margin:var(--space-s) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-2xs); }
  .cl-modal-meta li { display:flex; align-items:center; gap:var(--space-2xs);
    font-size:var(--text-sm); color:var(--color-ink-soft); line-height:var(--line-snug); }
  .cl-modal-meta svg { width:16px; height:16px; flex:none; color:var(--color-accent);
    stroke:currentColor; fill:none; stroke-width:2; }
  .cl-modal-main h4 { font-size:var(--text-xl); color:var(--color-secondary); margin:var(--space-2xs) 0 0; letter-spacing:-.01em; }
  .cl-modal-main .rule { margin:var(--space-s) 0; }
  .cl-modal-bio p { margin:0 0 var(--space-s); font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); }
  .cl-modal-bio p:last-child { margin-bottom:0; }
  .cl-modal-note { margin:var(--space-m) 0 0; padding-top:var(--space-s); border-top:1px solid var(--color-border-soft);
    font-size:var(--text-xs); color:var(--color-ink-soft); line-height:var(--line-normal); }
  .cl-modal-foot-note { margin-right:auto; font-size:var(--text-sm); color:var(--color-ink-soft); }
  @media (max-width:680px){
    .cl-modal-grid { grid-template-columns:1fr; }
    .cl-modal-shot { max-width:180px; }
  }

  /* ---- 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); }
  }