/* Foundation Kit library: videos and client marks. Loaded only where a library block is used.
   Narrow (up to 599 px of room): one row swiped sideways, about six tenths wide each, as the plan cards.
   Middle and wide: a grid. Tall videos stand 9 to 16, wide ones 16 to 9; the picture fills its frame. */
.fkit-vids,.fkit-logos{padding:40px 0}
.fkit .vids{display:grid;gap:var(--fk-gap,14px);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));list-style:none;margin:0;padding:0}
.fkit .vids.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.fkit .vid{margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.fkit .vid-play{position:relative;display:block;overflow:hidden;border-radius:var(--fk-r,22px);background:linear-gradient(135deg,#DDF4F8,#E1E6FF);box-shadow:0 18px 44px -30px var(--b);aspect-ratio:9/16;color:#fff;text-decoration:none}
.fkit .vid.wide .vid-play,.fkit .vid.wide .vid-frame{aspect-ratio:16/9}
.fkit .vid-play img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;transition:transform .4s}
.fkit .vid-play:hover img,.fkit .vid-play:focus-visible img{transform:scale(1.04)}
.fkit .vid-play:focus-visible{outline:3px solid var(--bb);outline-offset:3px}
.fkit .vid-mark{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(15,34,51,.55);box-shadow:0 0 0 2px rgba(255,255,255,.85);transition:background .25s,transform .25s}
.fkit .vid-mark::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff}
.fkit .vid-play:hover .vid-mark,.fkit .vid-play:focus-visible .vid-mark{background:var(--bb);transform:scale(1.08)}
.fkit .vid-frame{display:block;width:100%;aspect-ratio:9/16;border:0;border-radius:var(--fk-r,22px);background:#000}
.fkit .vid figcaption{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.fkit .vid-words summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:700;color:var(--deep)}
.fkit .vid-words div{font-size:14.5px;color:var(--mute)}
/* client marks (work order 32): no tiles; every mark in one dark grey on the page's own ground, between
   a thin line above and below; one full row on a computer. Each mark's height comes from the library
   (--mark-h), the number of columns from the number of marks (--marks). Nothing changes on hover. */
.fkit-logos .logos{display:grid;grid-template-columns:repeat(var(--marks,8),minmax(0,1fr));gap:0;align-items:center;list-style:none;margin:0;padding:26px 0;border-top:1px solid #E8EEF6;border-bottom:1px solid #E8EEF6}
.fkit-logos .logo{display:flex;align-items:center;justify-content:center;min-height:0;height:72px;margin:0;padding:0 18px;border:0;border-radius:0;background:none;overflow:hidden}
.fkit-logos .logo img{width:auto;height:auto;max-width:100%;max-height:var(--mark-h,46px);object-fit:contain;border-radius:0;filter:grayscale(1);mix-blend-mode:multiply;opacity:.8}
.fkit-logos .logo.from-light img{filter:brightness(0);opacity:.8}
.fkit-logos .logo.own-ground img{filter:grayscale(1) contrast(1.6) brightness(1.22);max-width:none}
@container fk (max-width:1100px){
.fkit-logos .logos{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
}
@container fk (max-width:599px){
.fkit .vids,.fkit .vids.wide{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 0 18px;scrollbar-width:none}
.fkit .vids>.vid{flex:0 0 60%;scroll-snap-align:center}
.fkit .vids.wide>.vid{flex-basis:80%}
.fkit-logos .logos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
.fkit-logos .logo{height:64px}
}
@media (prefers-reduced-motion:reduce){.fkit .vid-play img,.fkit .vid-mark{transition:none}}