/* Brand elements on the booking boxes (booking, Session packs and Pricing pages), Oct 2 2026. Sławek's icons and
   patterns (assets/brand/). Each category has its own color in the site's palette (video teal, audio terracotta;
   each group of extras its own; bright, Sławek Oct 2), and the packages inside a category get deeper as we do more. The icons on a
   package say how much we do: camera (you edit), + monitor (we edit), + phone (we edit and make Shorts),
   + broadcast tower on gold satellites (we do it all; satellites only ever go on gold). Icons are masks, so they
   take the text color. */
.skl-ic{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-film{--ic:url(brand/film.png)}.ic-headphones{--ic:url(brand/headphones.png)}.ic-mic{--ic:url(brand/mic.png)}
.ic-addon{--ic:url(brand/addon.png)}.ic-design{--ic:url(brand/design.png)}.ic-marketing{--ic:url(brand/marketing.png)}
.ic-camera{--ic:url(brand/camera.svg)}
.ic-teleprompter{--ic:url(brand/teleprompter.svg)}.ic-slider{--ic:url(brand/slider.svg)}.ic-upgrade{--ic:url(brand/upgrade.svg)}.ic-highlights{--ic:url(brand/highlights.svg)}.ic-files{--ic:url(brand/files.svg)}.ic-photo{--ic:url(brand/photo.svg)}.ic-clock{--ic:url(brand/clock.svg)}.ic-couch{--ic:url(brand/couch.svg)}.ic-monitor{--ic:url(brand/monitor.svg)}.ic-phone{--ic:url(brand/phone.svg)}.ic-broadcast{--ic:url(brand/broadcast.svg)}

/* Category colors */
.c-video1{--c:#2196c4}.c-video2{--c:#1270a0}.c-video3{--c:#0b4c72}
.c-audio1{--c:#f08a32}.c-audio2{--c:#d2561c}
.c-editing{--c:#1a7fb8}.c-social{--c:#e2482b}.c-setx{--c:#0f9d84}.c-set{--c:#8a3fb0}.c-guests{--c:#d63d7c}.c-photo{--c:#c98a12}

/* The colored top of a package box: category color, the reel pattern, and the "how much we do" icons */
.skl-band{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:80px;padding:10px 14px;color:#fff;background:var(--c,#133e54) url(brand/reel.png) 0 0/120px}
.skl-band.star{background:#b59f6c url(brand/sat-gold.jpg) 0 0/150px}
.skl-band.own{background:#fbf6ec;color:#133e54;border-bottom:2px dashed #e2d3b6}
.skl-cat{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.3);color:#fff;padding:6px 8px}
.skl-cat .skl-ic{width:16px;height:16px}
.skl-band.own .skl-cat{background:#133e54}
.skl-lv{display:inline-flex;align-items:flex-end;gap:5px}
.skl-lv .skl-ic{width:26px;height:26px}
.skl-lv .off{opacity:.3}
.skl-band.star .skl-lv .skl-ic{filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))}

/* "How much we do" key */
.skl-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;background:#fff;border:2px solid #e2d3b6;padding:10px 14px;color:#133e54}
.skl-key b{font:700 12px/1.2 Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.skl-key span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#4c5f69}
.skl-key .skl-ic{width:20px;height:20px;color:#133e54}

/* Filter buttons, square like the site's buttons */
.skl-filter{display:flex;flex-wrap:wrap;gap:8px}
.skl-filter button{display:inline-flex;align-items:center;gap:8px;border:2px solid #133e54;background:#fff;color:#133e54;padding:8px 12px;font:700 12px/1 Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:0}
.skl-filter button .skl-ic{width:18px;height:18px;color:var(--c,currentColor)}
.skl-filter button[aria-pressed="true"]{background:var(--c,#133e54);border-color:var(--c,#133e54);color:#fff}
.skl-filter button[aria-pressed="true"] .skl-ic{color:#fff}
.skl-filter button:focus-visible{outline:3px solid #ae9863;outline-offset:2px}

/* Square icon tile or photo at the start of an extra */
.skl-tile{display:grid;place-items:center;width:62px;height:46px;color:#fff;background:var(--c,#133e54) url(brand/reel.png) 0 0/90px}
.skl-tile .skl-ic{width:26px;height:26px}
img.skl-tile{object-fit:cover;background:#e2d3b6}