/* The Human-ISM family bar (see family.js): a minimal dark strip with a menu
   button, the Human-ISM icon and "Part of the Human-ISM family"; the button
   opens the list of products below it. */
.fam{position:relative; background:#0B1626; color:#c7d5e8; font-family:Arial,Helvetica,sans-serif;
     border-bottom:1px solid rgba(255,255,255,.08);}
.fam-bar{display:flex; align-items:center; gap:12px; padding:10px 18px;}
.fam-btn{flex:none; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
     background:none; border:1px solid rgba(255,255,255,.22); border-radius:8px; cursor:pointer; padding:0;
     transition:border-color .2s ease, background .2s ease;}
.fam-btn:hover, .fam.open .fam-btn{border-color:#f6c776; background:rgba(246,199,118,.08);}
/* the same three-line mark as the site's menu buttons: short middle line that slides on hover */
.fam-lines{display:flex; flex-direction:column; gap:4px; width:18px;}
.fam-lines i{display:block; height:2px; border-radius:2px; background:#fff; transition:background .2s ease, transform .25s ease;}
.fam-lines i:nth-child(2){width:70%;}
.fam-btn:hover .fam-lines i, .fam.open .fam-lines i{background:#f6c776;}
.fam-btn:hover .fam-lines i:nth-child(2){transform:translateX(30%);}
.fam-home{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-width:0;}
.fam-ic.mk{font-size:28px;}                       /* the Human-ISM icon, 28px tall */
.fam-t{font-size:13px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fam-t b{color:#f6c776; font-weight:600;}
.fam-home:hover .fam-t{color:#fff;}

/* the product list */
.fam-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px 18px; padding:8px 18px 18px;
     border-top:1px solid rgba(255,255,255,.08); animation:fam-in .28s ease both;}
.fam-list[hidden]{display:none;}
@keyframes fam-in{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.fam-list a{display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:inherit;
     border-left:2px solid rgba(255,255,255,.14); transition:background .2s ease, border-color .2s ease;}
.fam-list a:hover{background:rgba(255,255,255,.06); border-left-color:#f6c776;}
.fam-list a.cur{border-left-color:#f6c776; background:rgba(246,199,118,.07);}
.fam-n{display:block; font-family:'Times New Roman',Times,serif; font-size:18px; color:#fff; line-height:1.25;}
.fam-n sup{font-size:.5em; vertical-align:super; line-height:0;}
.fam-s{display:block; font-size:12.5px; color:#9db0cc; margin-top:2px; line-height:1.35;}
@media (max-width:760px){ .fam-list{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .fam-list{grid-template-columns:1fr;} .fam-bar{padding:9px 14px;} .fam-list{padding:6px 14px 14px;} }
@media (prefers-reduced-motion:reduce){ .fam-list{animation:none;} .fam-lines i{transition:none;} }
@media print{ .fam-btn, .fam-list{display:none !important;} }