/* Materials band (#materials) + Credentials section (#credentials).
   Depends on tokens/classes already defined in styles.css: --gold, --charcoal, --ink,
   --white, --pale, --line, --muted, .eyebrow, .muted, .lead, .section, .pale, .wrap,
   .section-head, .split. Load styles.css BEFORE this file. */

.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:34px 24px;margin-top:14px}
.brand-logo{display:flex;align-items:center;justify-content:center;height:46px}
.brand-logo img{max-height:34px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) opacity(.5);transition:filter .25s ease;will-change:filter}
.brand-logo:hover img,.brand-logo:focus-within img{filter:grayscale(0) opacity(1)}
.brand-logo.is-schluter img{max-height:46px}
.brand-logo.is-laticrete img{max-height:38px}
.brand-word span{font-family:Mulish,Arial,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--muted);opacity:.75;transition:color .25s ease,opacity .25s ease}
.brand-word sup{font-size:11px;top:-.6em}
.brand-word:hover span,.brand-word:focus-within span{color:var(--ink);opacity:1}

@media(max-width:1050px){.brand-grid{grid-template-columns:repeat(3,1fr);gap:30px 20px}}
@media(max-width:420px){.brand-grid{grid-template-columns:repeat(2,1fr)}}

.cred-photo{width:100%;height:auto;display:block}
.cred-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.cred-card{border:1px solid var(--line);background:var(--white);padding:24px 22px}
.cred-card .tag{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8a6c00;margin-bottom:12px}
.cred-card h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:9px;color:var(--ink)}
.cred-card p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}

@media(max-width:520px){.cred-cards{grid-template-columns:1fr}}