.countertop-directory{margin-top:clamp(2rem,5vw,5rem)}
.countertop-directory .section-heading{max-width:850px;margin-bottom:1.5rem}
.countertop-filters{display:flex;flex-wrap:wrap;gap:.65rem;margin:0 0 2rem}
.countertop-filters button{border:1px solid #cfd8d4;border-radius:999px;background:#fff;color:#123c3f;font:600 .92rem/1 Poppins,sans-serif;padding:.8rem 1rem;cursor:pointer}
.countertop-filters button:hover,.countertop-filters button:focus-visible,.countertop-filters button.is-active{background:#123c3f;border-color:#123c3f;color:#fff}
.countertop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}
.countertop-grid article{overflow:hidden;border:1px solid #d8dfdc;border-radius:14px;background:#fff;box-shadow:0 12px 34px rgba(9,48,50,.07);transition:transform .2s ease,box-shadow .2s ease}
.countertop-grid article:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(9,48,50,.12)}
.countertop-grid article[hidden]{display:none}
.surface-card-image{display:block;aspect-ratio:4/3;overflow:hidden;background:#eef2ef}
.surface-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.countertop-grid article:hover .surface-card-image img{transform:scale(1.025)}
.surface-card-copy{padding:1.25rem}
.surface-card-copy h3{font-size:clamp(1.15rem,2vw,1.45rem);margin:.35rem 0 .6rem}
.surface-card-copy p:not(.card-kicker){font-size:.96rem;line-height:1.65}
.surface-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-bottom:clamp(2rem,5vw,4.5rem)}
.surface-intro figure{margin:0;overflow:hidden;border-radius:16px;background:#eef2ef;box-shadow:0 18px 48px rgba(9,48,50,.12)}
.surface-intro figure img{display:block;width:100%;max-height:620px;object-fit:cover}
.surface-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}
.surface-facts div{border-top:1px solid #d8dfdc;padding-top:.8rem}
.surface-facts dt{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b706f}
.surface-facts dd{margin:.25rem 0 0;font-weight:600}
@media(max-width:900px){.countertop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.surface-intro{grid-template-columns:1fr}}
@media(max-width:600px){.countertop-grid{grid-template-columns:1fr}.countertop-filters{gap:.45rem}.countertop-filters button{font-size:.84rem;padding:.7rem .85rem}.surface-facts{grid-template-columns:1fr}.surface-card-copy{padding:1rem}}
@media(max-width:480px){.countertop-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.countertop-filters button{width:100%;min-height:44px;white-space:normal}.surface-card-image{aspect-ratio:1/1}.surface-intro figure img{max-height:420px}}
@media(prefers-reduced-motion:reduce){.countertop-grid article,.surface-card-image img{transition:none}}