.directory-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.directory-card{--collage-hue:264;position:relative;isolation:isolate;display:flex;align-items:flex-end;min-width:0;min-height:290px;overflow:hidden;border:1px solid hsl(var(--collage-hue) 35% 87%);border-radius:18px;background:hsl(var(--collage-hue) 60% 94%);text-decoration:none!important;box-shadow:0 3px 8px #0f172a05;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.directory-card-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 80% 15%,hsl(var(--collage-hue) 80% 83% / .7),transparent 65%)}
.directory-card-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,hsl(var(--collage-hue) 60% 96% / .35) 59%,hsl(var(--collage-hue) 60% 97%) 78%);pointer-events:none}
.directory-collage{position:absolute;top:-18px;left:50%;width:calc(100% + 14px);max-width:382px;transform:translateX(-50%) rotate(-13deg);transition:transform .65s ease}
.directory-collage-reel{display:block}
.directory-collage-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:12px}
.directory-collage-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:1.15;min-width:0;overflow:hidden;border:1px solid #ffffffb3;border-radius:12px;background:#ffffff7a;box-shadow:0 6px 12px hsl(var(--collage-hue) 45% 25% / .13)}
.directory-collage-tile img{display:block;width:100%;height:100%;max-width:160px;max-height:140px;object-fit:contain;padding:4px}
.directory-collage[data-images="4"] .directory-collage-set{grid-template-columns:repeat(2,minmax(0,1fr))}
.directory-collage[data-images="4"]{max-width:270px}
.directory-card:not(.directory-card--moving) .directory-collage{top:24px;width:86%;max-width:290px}
.directory-collage[data-images="1"] .directory-collage-set{grid-template-columns:minmax(0,150px);justify-content:center}
.directory-collage[data-images="2"] .directory-collage-set{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:22px}
.directory-collage[data-images="3"] .directory-collage-set{grid-template-columns:repeat(2,minmax(0,1fr))}
.directory-collage[data-images="3"] .directory-collage-tile:last-child{transform:translate(45%,-22px)}
.directory-card-info{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;width:100%;padding:60px 20px 20px;background:linear-gradient(transparent,hsl(var(--collage-hue) 60% 97%) 45%)}
.directory-card-copy{display:block;min-width:0}
.directory-card-name{display:block;color:#17213a;font-size:18px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.directory-card-count{display:block;margin-top:7px;color:#546077;font-size:13px;line-height:1.4}
.directory-card-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 34px;height:34px;border:1px solid hsl(var(--collage-hue) 45% 84%);border-radius:50%;background:#ffffffaa;color:hsl(var(--collage-hue) 55% 35%);font-size:21px;transition:background .3s ease,color .3s ease}
.directory-card:focus-visible{outline:3px solid #7c3aed;outline-offset:4px;border-color:#7c3aed}
@keyframes directory-reel{to{transform:translateY(-50%)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .directory-card--moving.is-animating .directory-collage-reel{animation:directory-reel 12s linear infinite}
  .directory-card:hover{transform:translateY(-4px);border-color:hsl(var(--collage-hue) 55% 68%);box-shadow:0 14px 28px hsl(var(--collage-hue) 45% 25% / .15)}
  .directory-card:hover .directory-collage{transform:translateX(-50%) rotate(-9deg) scale(1.045)}
  .directory-card:hover .directory-card-arrow{background:hsl(var(--collage-hue) 55% 40%);color:white}
}
@media(prefers-reduced-motion:reduce){.directory-card,.directory-collage,.directory-card-arrow{transition:none}}
@media(max-width:1100px){.directory-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(max-width:780px){.directory-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.directory-card-grid{grid-template-columns:minmax(0,1fr);gap:18px}.directory-card{min-height:278px}.directory-collage{max-width:360px}.directory-card-info{padding:60px 20px 20px}}