/* v4-materials-gallery.css — cinematic shell around the 157-swatch gallery (ids #m-*, filters, ?q= search and KB deep links unchanged) */
.c-hero .crumbs,.c-hero .crumbs a{color:rgba(255,255,255,.72)}
.c-hero .crumbs a:hover{color:#fff}
.c-hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.c-hero .btn-o{color:#fff}
.c-hero video{background:#07080d}
.mg-hero{min-height:clamp(480px,78vh,760px)}
.mg-hero h1{max-width:20ch}
/* sticky search bar */
.mg-bar{position:sticky;top:var(--hh);z-index:19;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mg-bar .wrap{display:flex;gap:14px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 0}
.mg-bar p{margin:0;font-size:.86rem;color:var(--mute);max-width:62ch}.mg-bar p b{color:var(--ink)}
.mg-search{display:flex;gap:10px;align-items:center;flex:1 1 260px;max-width:420px}
.mg-search input{flex:1;font:inherit;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:#fff}
.mg-search input:focus{outline:2px solid var(--acc);outline-offset:1px}
.mg-search span{font-size:.84rem;color:var(--mute);min-width:70px}
.mg-bar+.jump{top:calc(var(--hh) + var(--mgb,64px))}
/* intro: count-up + category tiles */
.mg-intro{padding:72px 0}
.mg-count{display:flex;justify-content:center;gap:clamp(24px,8vw,120px);flex-wrap:wrap}
.mg-count .c-num b{color:#fff}
.mg-count .c-num span{color:rgba(255,255,255,.6)}
.mg-core{max-width:70ch;margin:8px auto 40px;text-align:center;color:rgba(255,255,255,.7)}
.mg-tiles{grid-template-columns:repeat(6,1fr);gap:12px}
.mg-tile{aspect-ratio:1/1}
.mg-tile span{font-size:.95rem}
.mg-tile small{font:700 .66rem Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0 0 4px}
@media(max-width:1000px){.mg-tiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.mg-tiles{grid-template-columns:repeat(2,1fr)}}
/* category sections (unchanged markup) */
.mg-cat .sec-h{margin-bottom:18px}
.mg-cat .filters{margin-bottom:18px}
.mg-cat .sw{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.mg-cat .sw figure{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mg-cat .sw figure:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(17,21,34,.45)}
.mg-cat .sw .chipimg{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.mg-cat .sw figure:hover .chipimg{transform:scale(1.07)}
.mg-cat .sw figcaption small{display:block;margin-top:4px;color:var(--mute);font-size:.78rem;line-height:1.4}
@media(hover:hover) and (min-width:821px){.mg-cat .sw figcaption small{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .35s,opacity .35s,margin .35s}
 .mg-cat .sw figure:hover figcaption small,.mg-cat .sw figure:focus-within figcaption small,.mg-cat .sw figure.mg-hit figcaption small{max-height:4em;opacity:1;margin-top:4px}}
.mg-spec{margin:22px 0 0;padding:16px 20px;border-left:3px solid var(--acc);background:#fff;border-radius:0 var(--r) var(--r) 0;font-size:.95rem;max-width:90ch;box-shadow:0 1px 0 var(--line)}
.mg-spec b{display:block;font-family:Montserrat;color:var(--ink);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.sw figure.mg-hit{outline:3px solid var(--acc);outline-offset:4px;border-radius:12px}
.mg-cnt{font:700 .78rem Montserrat;color:var(--mute);margin-left:6px}
@media(max-width:820px){.mg-cat .sw{grid-template-columns:repeat(2,1fr);gap:12px}}
/* spotlight reveal */
.mg-reveal-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.mg-reveal h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.mg-spot{aspect-ratio:16/9;cursor:crosshair}
.mg-spot img{height:100%;object-fit:cover}
@media(max-width:900px){.mg-reveal-in{grid-template-columns:1fr;gap:24px}}
/* sample CTA */
.mg-cta{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.mg-cta-r{display:grid;gap:16px}
.mg-board{aspect-ratio:16/9}
.mg-cta .acts{display:flex;gap:10px;flex-wrap:wrap}
.mg-faq-more{margin-top:18px;font:700 .9rem Montserrat}
@media(max-width:820px){.mg-cta{grid-template-columns:1fr}}
/* no-JS: kit reveals start hidden, so show them when the page script never ran */
html:not(.v4j) .c-curtain{clip-path:none}
html:not(.v4j) .c-spot:after{opacity:0}
.v4qa *,.v4qa *::before,.v4qa *::after{transition:none!important;animation:none!important}
.v4qa .c-spot:after{opacity:0}
@media(prefers-reduced-motion:reduce){.mg-cat .sw figure,.mg-cat .sw .chipimg{transition:none}.mg-spot:after{opacity:0}}
.v4qa .c-curtain{clip-path:none}.v4qa .c-curtain img{transform:none}
.mg-hero:after{background:linear-gradient(90deg,rgba(7,8,13,.8) 0%,rgba(7,8,13,.4) 55%,rgba(7,8,13,.12) 100%),linear-gradient(180deg,rgba(7,8,13,.15) 35%,rgba(7,8,13,.9) 100%)}