/* 4 Rock Solid Solutions — brand artwork crops (original 1536x1024 board PNG).
   Source: /assets/rock-brand-board-aef7af29.png — every crop preserves the
   exact original pixels, text and proportions; the full board is never shown uncropped. */

/* Reusable crop shell */
.brand-art{display:block;position:relative;overflow:hidden;isolation:isolate}
.brand-art img{position:absolute;display:block;max-width:none;height:auto;margin:0;border-radius:0;box-shadow:none}

/* Primary full-logo crop: x70,y12,w770,h661 */
.brand-art.primary-art,.brand-art.hero-art{aspect-ratio:770/661}
.brand-art.primary-art img,.brand-art.hero-art img{width:199.48052%;left:-9.09091%;top:-1.81543%}

/* Header symbol crop: x190,y16,w495,h478 */
.brand-art.brand-symbol{width:44px;flex:none;aspect-ratio:495/478}
.brand-art.brand-symbol img{width:310.30303%;left:-38.38384%;top:-3.34728%}

/* Flat digital crop: x960,y100,w530,h495 */
.brand-art.flat-art{aspect-ratio:530/495}
.brand-art.flat-art img{width:289.81132%;left:-181.13208%;top:-20.20202%}

/* Etched bottom-middle crop: x690,y738,w435,h226 */
.brand-art.etched-art{aspect-ratio:435/226}
.brand-art.etched-art img{width:353.10345%;left:-158.62069%;top:-326.54867%}

/* Hero placement */
.hero-art{max-width:440px;margin:0 0 24px;border-radius:14px}

/* Rock card emblem placement */
.card-art{width:100%;max-width:390px;margin:0 auto 24px;border-radius:12px}
/* Enough specificity to beat the generic .badge img 108px square rule; keeps aspect-ratio, no distortion */
.badge .brand-art img{width:353.10345%;height:auto;left:-158.62069%;top:-326.54867%}

/* Three-item showcase */
.brand-showcase{max-width:960px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:36px auto;padding:0 24px}
.brand-showcase .panel{margin:0;min-width:0}
.brand-showcase .panel .brand-art{border-radius:14px;border:1px solid #34424b;background:#171c20}
.brand-showcase figcaption{margin-top:8px;font:600 .72rem Inter,system-ui,sans-serif;color:#9da7ae;letter-spacing:.14em;text-transform:uppercase;text-align:center}
@media(max-width:820px){.brand-showcase{grid-template-columns:1fr;gap:26px}}

/* No motion or animation is introduced here; existing prefers-reduced-motion rules remain authoritative. */
/* Keep the treatment gallery compact on phones; the primary artwork already has its own hero. */
@media(max-width:520px){
  .navinfo span{display:block}
  .brand-showcase{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px auto;padding:0 16px}
  .brand-showcase .panel .brand-art{border-radius:8px}
  .brand-showcase figcaption{font-size:.6rem;letter-spacing:.06em}
}