/* =====================================================================
   A. SHARED RULES the gallery/clients pages depend on.
   These came from the home page's inline <style> and my earlier snippets,
   so they were not loaded here. When you move them into vp.css, delete
   this section (duplicates are harmless, just redundant).
   ===================================================================== */
   .hidden { display: none !important; }

   /* section heads */
   .section__head--split { justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
   .section__head--split h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; }
   .seeall { color: var(--blue); font-size: 14px; font-weight: 700; }
   .seeall:hover { text-decoration: underline; }
   
   /* centred responsive card grid */
   .hgrid { --n: 1; --gap: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
   .hgrid > * { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; }
   @media (min-width: 360px)  { .hgrid { --n: 1; } }
   @media (min-width: 700px)  { .hgrid { --n: 2; } }
   @media (min-width: 960px)  { .hgrid { --n: 4; } }
   @media (min-width: 1360px) { .hgrid { --n: 6; } }
   @media (min-width: 1800px) { .hgrid { --n: 8; } }
   @media (min-width: 2300px) { .hgrid { --n: 10; } }
   .hgrid--svc { --gap: 14px; }
   
   /* compact tile */
   .svc-sm { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s, box-shadow .2s; }
   .svc-sm:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #0000001a; }
   .svc-sm img, .svc-sm__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sky); }
   .svc-sm__ph { display: grid; place-items: center; color: var(--blue); font-weight: 800; }
   .svc-sm b { padding: 10px 12px; font-size: 14px; line-height: 1.3; }
   .svc-sm:hover b { color: var(--blue); }
   
   /* badge on image corner (service / gallery / client cards) */
   .svc-card__badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }
   
   /* videos */
   .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
   .vcard { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: box-shadow .2s, transform .2s; }
   .vcard:hover { transform: translateY(-3px); box-shadow: 0 10px 26px #0000001a; }
   .vcard .thumbnail-container { position: relative; cursor: pointer; }
   .vcard .thumbnail-container img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
   .vcard__play { position: absolute; inset: 0; display: grid; place-items: center; background: #0000; transition: background .2s; }
   .vcard:hover .vcard__play { background: #0000004d; }
   .vcard__play i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #dc2626; color: #fff; opacity: .9; }
   .vcard__tag { position: absolute; top: 8px; left: 8px; padding: 2px 10px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 800; }
   .vcard .youtube-player { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
   .vcard__body { padding: 12px; }
   .vcard__body h3 { margin-bottom: 4px; overflow: hidden; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
   .vcard__body h3 a:hover { color: var(--blue); }
   .vcard__body small { display: block; margin-bottom: 10px; color: var(--muted); }
   .vcard__row { display: flex; gap: 8px; }
   .btn--xs { min-height: 0; padding: 5px 14px; font-size: 12px; }
   .back-to-thumbnail { background: #6b7280; color: #fff; }
   
   /* sticky bar (clients filter) */
   .svc-tabs { position: sticky; top: 0; z-index: 20; background: #fff; border-block: 1px solid var(--line); }
   
   /* pagination */
   .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
   .pager a, .pager span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
   .pager a:hover { border-color: var(--ink); }
   .pager .is-current { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 700; }
   .pager .is-disabled { color: #bbb; }
   .pager .is-gap { border: 0; }
   
   /* =====================================================================
      B. NEW RULES for galleries, clients and the lightbox
      ===================================================================== */
   /* =====================================================================
      Galleries + clients views: only what the existing stylesheet lacks.
      Everything else reuses .svc-sm, .svc-card, .vcard, .hgrid, .opt__btn,
      .svc-tabs, .toolbar, .field, .crumbs, .empty, .svc-detail-hero, etc.
      ===================================================================== */
   
   /* ---------- gallery tile (extends .svc-sm, rendered as a <button>) ---------- */
   .gal { padding: 0; text-align: left; font: inherit; cursor: pointer; }
   .gal__thumb { position: relative; display: block; }
   .gal small { padding: 0 12px 12px; color: var(--muted); font-size: 12px; }
   
   /* ---------- client cards (.svc-card rendered as a <button>) ---------- */
   button.svc-card { padding: 0; text-align: left; font: inherit; cursor: pointer; }
   .hgrid.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
   
   /* sticky filter bar: reuses .svc-tabs + .toolbar */
   .svc-tabs .toolbar { margin: 0; padding: 14px 0; border: 0; }
   
   /* ---------- pagination buttons (Livewire version) ---------- */
   .pager button { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; }
   .pager button:hover { border-color: var(--ink); }
   
   /* ---------- lightbox (galleries + client galleries) ---------- */
   .lightbox { position: fixed; inset: 0; z-index: 300; display: flex; padding: 64px 16px 24px; overflow-y: auto; background: rgba(0, 0, 0, .92); }
   .lightbox__panel { width: 100%; max-width: 1100px; margin: auto; }   /* margin:auto centres without clipping tall content */
   .lightbox__head { margin-bottom: 16px; text-align: center; color: #fff; }
   .lightbox__head h2 { margin-bottom: 6px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; }
   .lightbox__head p { max-width: 60ch; margin: 0 auto; color: #d4d4d4; font-size: 14px; }
   .lightbox__stage { overflow: hidden; border-radius: var(--radius); background: #fff; }
   .lightbox__stage img { width: 100%; max-height: 65vh; object-fit: contain; }
   .lightbox__thumbs { display: flex; justify-content: center; gap: 8px; margin-top: 16px; overflow-x: auto; }
   .lightbox__thumbs button { flex: 0 0 64px; height: 64px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm); background: none; opacity: .7; }
   .lightbox__thumbs button:hover { opacity: 1; }
   .lightbox__thumbs button.is-on { border-color: #fff; opacity: 1; }
   .lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
   .lightbox__count { margin: 12px 0 0; text-align: center; color: #fff; font-size: 14px; }
   .lightbox__foot { margin-top: 18px; text-align: center; }
   
   .lightbox__close, .lightbox__nav { position: fixed; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; }
   .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .3); }
   .lightbox__close { top: 12px; right: 12px; }
   .lightbox__nav { top: 50%; transform: translateY(-50%); }
   .lightbox__nav--prev { left: 12px; }
   .lightbox__nav--next { right: 12px; }
   
   /* ---------- single client page ---------- */
   .client-stack { display: grid; gap: 20px; min-width: 0; }
   .client-stack .svc-variety h3 { margin-top: 0; }
   
   .client-info { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 20px; font-size: 14px; }
   .client-info dt { color: var(--muted); font-weight: 600; }
   .client-info dd { margin: 0; word-break: break-word; }
   
   .client-quote { margin: 0; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: var(--blue); color: #fff; }
   .client-quote::before { content: '“'; display: block; margin-bottom: 8px; font: 800 64px/.8 Georgia, serif; opacity: .5; }
   .client-quote__text { font-size: 18px; line-height: 1.7; font-style: italic; }
   .client-quote__text * { color: inherit; }
   .client-quote footer { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 14px; }
   .client-quote footer img { height: 36px; max-width: 80px; object-fit: contain; filter: brightness(0) invert(1); }
   .client-quote footer span { display: block; opacity: .75; }
   
   .svc-sm--logo img { padding: 14px; background: #fff; object-fit: contain; }
   
   @media (max-width: 640px) {
     .lightbox { padding-top: 60px; }
     .lightbox__nav { top: auto; bottom: 16px; transform: none; }   /* arrows drop to the bottom corners so they don't cover the photo */
   }