/* Hire an expert hub and Expert template. Prefix ex-. Builds on cases.css (cp-*), blog.css (bl-chip) and hubs.css (hb-*).
   Webflow: Collection List and template for the Experts collection. Photos are logos, so they sit on a pale tile. */
.ex-tile { display: grid; place-items: center; width: 100%; height: 100%; background: #e8f1ed; }
.ex-tile img { width: 58%; height: 52%; object-fit: contain; margin-top: -7%; }
.ex-logo .ex-tile img { width: 64%; height: 64%; margin-top: 0; }
.ex-tile--dark { background: var(--cs-dark3); }
.ex-card .cp-card-media { aspect-ratio: 16 / 9; }
.ex-card .cp-card-sub { margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-where { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--cs-text-faint); }
.ex-card .cp-tags { margin-top: 14px; }
.ex-card .cp-tag { padding: 5px 11px; font-size: 13px; pointer-events: none; }
.ex-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ex-select { appearance: none; padding: 9px 40px 9px 16px; border-radius: 999px; border: 1.5px solid var(--cs-dark4); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23b3cacf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; color: var(--cs-text-soft); font: 800 14px/1 var(--cs-font-label); cursor: pointer; }
.ex-select:hover { border-color: var(--cs-green); color: var(--cs-text); }
.ex-select option { background: var(--cs-dark1); color: var(--cs-text); }
.ex-empty { margin-top: 48px; font-size: 20px; color: var(--cs-text-soft); }
.ex-empty[hidden] { display: none; }

/* profile */
.ex-head { display: grid; grid-template-columns: clamp(160px, 18vw, 260px) 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.ex-logo { aspect-ratio: 1; border-radius: 28px; overflow: hidden; }
.ex-head .cp-title { margin-top: 0; max-width: 18ch; }
.ex-head .cp-sub { margin-top: 14px; }
.ex-actions { margin-top: 28px; }
.ex-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ex-bio { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; color: var(--cs-text-soft); max-width: 62ch; }
.ex-rail { display: grid; gap: 28px; position: sticky; top: 100px; }
.ex-rail .cp-fact-text { font-size: 17px; }
.ex-links { display: grid; gap: 6px; margin-top: 8px; }
.ex-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(24px, 3vw, 40px); }
.ex-work-grid a { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--cs-dark3); border: 1px solid var(--cs-border-strong); transition: border-color .2s; }
.ex-work-grid a:hover { border-color: rgba(59, 214, 43, .55); }
.ex-work-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-note { margin-top: 10px; font-size: 13px; color: var(--cs-text-faint); }
@media (max-width: 991px) { .ex-body { grid-template-columns: 1fr; } .ex-rail { position: static; } }
@media (max-width: 599px) { .ex-head { grid-template-columns: 1fr; } .ex-logo { max-width: 160px; } }