/* KITHEROCOVER v1 (templates a5 10-21; Master + AI2: a service-trade hero with no verified people photo shows the kit's own designed cover, never a stock no-people photo): when kithero.js answers "no photo" (html[data-kithero=none]) the hero figure is unhidden and holds a designed cover: the accent ground, two soft people silhouettes, the business name in the display face. Only where the hero has no drawn art of its own, or when data-hero-cover asks for it. Fixed shared file. */
.khc{position:relative;display:grid;place-items:center;align-content:center;gap:clamp(10px,2vw,20px);width:100%;aspect-ratio:4 / 3;min-height:220px;overflow:hidden;padding:clamp(16px,4%,40px);box-sizing:border-box;text-align:center;border-radius:inherit;background:radial-gradient(120% 90% at 20% 10%,color-mix(in oklab,var(--khc-a,#3b5bdb) 78%,#fff),var(--khc-a,#3b5bdb) 55%,color-mix(in oklab,var(--khc-a,#3b5bdb) 62%,#000));color:var(--khc-ink,#fff)}
.khc svg{width:min(46%,220px);height:auto;display:block;opacity:.9}
.khc b{display:block;font-weight:700;font-size:clamp(1.1rem,.8rem + 1.4vw,1.9rem);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--khc-f,inherit)}
[data-photo-hero]:has(>.khc){container-type:inline-size}
@container (min-width:800px){.khc{aspect-ratio:16 / 6;min-height:200px;max-height:min(46vh,420px)}}