/* Juris Digital, redesign concept: "Our services" as a bento board (versions 2 and 3). Every rule is scoped to .svb. */

/* A board of seven tiles, SEO the large lead. Each tile carries a small drawing of what the service puts in front
   of a firm's future clients: the ranked result with sitelinks, the map pin and listing, the sponsored ad, the
   screened card, the AI answer citing the firm, the client's film, the firm's site. Placeholder firm throughout,
   and wherever it appears its mark is the gradient shield (the gradient means "yours").
   One system (user, 26 Oct 2026: "looks like everything is mixing here"; the board had four tile surfaces, three
   ways of framing a drawing and dark drawings on light tiles): SEO, the lead, is the one deep-teal tile; the other
   six are ground. Every drawing sits on the same stage, a rounded teal tint inset from the tile's edges (on top in a
   square tile, on the right in a wide one), and is drawn the same way: white cards on the tint. The one motion: pointing at a tile (or focusing its link) plays a single beat in its drawing,
   driven by --b (0 at rest, 1 on hover or focus). Reduced motion and ?static keep --b at 0: the drawings are
   complete at rest. */

.svb {
  --p: clamp(22px, 2.1vw, 30px);
  --tile-r: 22px;
  --bar: #E3E9E8;
  --tint: #E1F0EF;
  --lift: 0 1px 2px rgba(3, 36, 43, .08), 0 12px 28px -16px rgba(3, 36, 43, .38);
  --beat: .6s var(--ease-out);
}
.svb__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.svb__note { margin: calc(clamp(40px, 5vw, 64px) * -1 + 16px) 0 clamp(28px, 3vw, 40px); font-size: .8125rem; color: var(--muted); }

/* ---------- the board ---------- */
.svb__board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svb__tile { --b: 0; position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--tile-r); background: var(--ground); color: var(--ink); }
.svb__text { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 0 var(--p) var(--p); }
.svb__name { font-family: var(--serif); font-size: 1.3125rem; font-weight: 400; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.svb__line { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.svb__lead { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.svb__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: .875rem; font-weight: 600; color: var(--counsel-ink); text-decoration: none; }
.svb__go svg { width: 16px; height: 16px; transform: translateX(calc(var(--b) * 4px)); transition: transform 260ms var(--ease-out); }
/* the whole tile is the link's target */
.svb__go::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.svb__go:focus-visible { outline: 2px solid var(--counsel); outline-offset: 3px; }
@supports selector(:has(*)) {
  .svb__go:focus-visible { outline: none; }
  .svb__tile:has(.svb__go:focus-visible) { outline: 2px solid var(--counsel); outline-offset: 3px; }
}
/* the drawing: above the words in a square tile, on its stage */
.svb__art { position: relative; flex: none; order: -1; height: 184px; margin: var(--p) var(--p) 22px; }
.svb__tile:not(.svb__tile--seo) .svb__art { overflow: hidden; border-radius: 14px; background: var(--tint); }

/* the one beat */
:root:not(.reduce) .svb__tile:has(.svb__go:focus-visible) { --b: 1; }
@media (hover: hover) and (pointer: fine) {
  :root:not(.reduce) .svb__tile:hover { --b: 1; }
}
.svb :is(.svb-title, .svb-seo__you, .svb-seo__ghost, .svb-local__you, .svb-local__ring, .svb-local__pins, .svb-ppc__cursor,
  .svb-lsa__back, .svb-lsa__card, .svb-lsa__badge, .svb-ans__hl, .svb-ans__cite, .svb-vid__play, .svb-vid__track i, .svb-web__page) {
  transition: transform var(--beat), opacity .4s var(--ease-out), background-size var(--beat), box-shadow .4s var(--ease-out);
}
:root.reduce .svb * { transition: none; }

/* ---------- roles ---------- */
/* SEO, the lead: deep teal, two columns by two rows, its result rising out of the stack below */
.svb__tile--seo { grid-column: span 2; grid-row: span 2; background: var(--brief); color: #fff; }
.svb__tile--seo .svb__text { flex: none; gap: 12px; padding-top: calc(var(--p) + 6px); }
.svb__tile--seo .svb__name { font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.1; letter-spacing: -.025em; }
.svb__tile--seo .svb__line { max-width: 48ch; }
.svb__tile--seo .svb__go { margin-top: 4px; }
.svb__tile--seo .svb__line { color: var(--on-dark); }
.svb__tile--seo .svb__go { color: var(--retain-hi); }
/* the wide ones: words left, the drawing to the right edge */
.svb__tile--local, .svb__tile--web { grid-column: span 2; flex-direction: row; min-height: 300px; }
.svb__tile--local .svb__text, .svb__tile--web .svb__text { flex: 0 0 44%; padding: var(--p); }
.svb__tile--local .svb__art, .svb__tile--web .svb__art { order: 1; flex: 1 1 auto; height: auto; min-width: 0; margin: var(--p) var(--p) var(--p) 0; }

/* ---------- shared drawing parts ---------- */
.svb-mark { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 0 0 50% 50%; background: var(--shield); box-shadow: inset 0 0 0 1px rgba(4, 51, 61, .14); }
.svb-site { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .75rem; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.svb-site > span { overflow: hidden; text-overflow: ellipsis; }
.svb-crumb { color: var(--muted); }
.svb-title { justify-self: start; padding-bottom: 2px; font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: var(--counsel-ink);
  background: linear-gradient(var(--counsel), var(--counsel)) no-repeat 0 100% / calc(var(--b) * 100%) 1.5px; }
.svb-bars { display: grid; gap: 6px; }
.svb-bars i { display: block; width: var(--w); height: 6px; border-radius: 3px; background: var(--bar); }
.svb-stars { display: inline-flex; gap: 1px; color: var(--star); }
.svb-stars svg { width: 12px; height: 12px; }
.svb :is(.svb-local__acts, .svb-lsa__acts, .svb-ppc__ext) { display: flex; flex-wrap: wrap; gap: 6px; }
.svb :is(.svb-local__acts, .svb-lsa__acts, .svb-ppc__ext) > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font-size: .6875rem; font-weight: 600; line-height: 1.4; color: var(--counsel-ink); white-space: nowrap; }
.svb :is(.svb-local__acts, .svb-lsa__acts, .svb-ppc__ext) svg { width: 13px; height: 13px; }

/* ---------- SEO: the ranked result with sitelinks, the stack of other results falling away below ---------- */
.svb-seo { order: 1; display: grid; flex: 1 1 auto; align-content: start; gap: 10px; height: auto; min-height: 290px; margin: 10px var(--p) 0;
  -webkit-mask: linear-gradient(#000 calc(100% - 110px), transparent); mask: linear-gradient(#000 calc(100% - 110px), transparent); }
.svb-seo__you { position: relative; z-index: 1; display: grid; gap: 8px; padding: 18px 20px 20px; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55); transform: translateY(calc(var(--b) * -4px)); }
.svb-seo .svb-title { font-size: 1.1875rem; background-image: var(--shield-h); background-size: calc(var(--b) * 100%) 2px; }
.svb-seo__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin-top: 6px; }
.svb-seo__links span { overflow: hidden; padding: 7px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); font-size: .75rem; font-weight: 500; color: var(--counsel-ink); white-space: nowrap; text-overflow: ellipsis; }
.svb-seo__ghost { padding: 18px 20px; border-radius: 14px; background: rgba(233, 242, 241, .05); box-shadow: inset 0 0 0 1px rgba(233, 242, 241, .1); transform: translateY(calc(var(--b) * 10px)); opacity: calc(1 - var(--b) * .4); }
.svb-seo__ghost .svb-bars { gap: 8px; }
.svb-seo__ghost .svb-bars i { background: rgba(233, 242, 241, .13); }
.svb-seo__ghost .svb-bars i:nth-child(2) { height: 9px; background: rgba(233, 242, 241, .2); }

/* ---------- Local SEO: the map, the firm's pin standing up, its listing ---------- */
.svb-local__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.svb-local__pins { transition-property: opacity; opacity: calc(1 - var(--b) * .5); }
.svb-local__you { transform: translateY(calc(var(--b) * -7px)); }
.svb-local__ring { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--b) * .45)); opacity: calc(.55 - var(--b) * .55); }
.svb-local__card { position: absolute; left: 18px; bottom: 18px; z-index: 1; display: grid; justify-items: start; gap: 3px; width: min(220px, calc(100% - 36px)); padding: 13px 15px 14px; border-radius: 14px; background: var(--paper); box-shadow: var(--lift); font-size: .75rem; line-height: 1.3; }
.svb-local__card b { font-size: .875rem; font-weight: 600; color: var(--ink); }
.svb-local__kind { color: var(--muted); }
.svb-local__acts { margin-top: 7px; }

/* ---------- Paid Search: the sponsored ad, the pointer on its way to the headline ---------- */
.svb-ppc { display: grid; align-content: center; padding: 0 18px; }
.svb-ppc__ad { display: grid; gap: 6px; padding: 14px 16px 15px; border-radius: 12px; background: var(--paper); box-shadow: var(--lift); }
.svb-ppc__tag { font-size: .6875rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.svb-ppc__ext { margin-top: 4px; }
.svb-ppc__cursor { position: absolute; left: 58%; top: 47%; z-index: 1; width: 22px; height: 22px; color: var(--ink); filter: drop-shadow(0 2px 3px rgba(3, 36, 43, .25)); transform: translate(calc(var(--b) * -34px), calc(var(--b) * -8px)); }

/* ---------- Local Service Ads: the screened card in front of another provider's ---------- */
.svb-lsa { display: grid; align-content: end; padding: 0 16px 16px; }
.svb-lsa__back { position: absolute; left: 30px; right: 30px; top: 16px; bottom: 46px; border-radius: 14px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--rule); transform: translateY(calc(var(--b) * -6px)) scale(calc(1 - var(--b) * .03)); opacity: calc(1 - var(--b) * .4); }
.svb-lsa__back { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; }
.svb-lsa__back > i { flex: none; width: 26px; height: 26px; border-radius: 0 0 50% 50%; background: var(--bar); }
.svb-lsa__back .svb-bars { flex: 1; padding-top: 4px; }
.svb-lsa__card { position: relative; display: grid; justify-items: start; gap: 10px; padding: 14px 16px 15px; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--lift); transform: translateY(calc(var(--b) * -4px)); }
.svb-lsa__who { display: flex; align-items: center; gap: 10px; }
.svb-lsa__who .svb-mark { width: 30px; height: 30px; }
.svb-lsa__who > span { display: grid; gap: 2px; }
.svb-lsa__who b { font-size: .875rem; font-weight: 600; line-height: 1.2; }
.svb-lsa__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--tint); font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--counsel-ink); box-shadow: 0 0 0 calc(var(--b) * 3px) rgba(8, 124, 128, .16); }
.svb-lsa__badge svg { width: 16px; height: 16px; color: var(--counsel); }

/* ---------- Legal Content: a question, and the answer citing the firm's page ---------- */
.svb-ans { display: grid; align-content: center; gap: 10px; padding: 0 18px; }
.svb-ans__q { justify-self: end; max-width: 88%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--paper); box-shadow: var(--lift); font-size: .75rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.svb-ans__a { display: grid; justify-items: start; gap: 12px; padding: 15px 16px; border-radius: 14px 14px 14px 4px; background: var(--paper); box-shadow: var(--lift); }
.svb-ans__a .svb-bars { width: 100%; gap: 7px; }
/* the sentence drawn from the firm's page: tinted at rest, marked on the beat */
.svb-bars .svb-ans__hl { background: linear-gradient(var(--counsel), var(--counsel)) no-repeat 0 0 / calc(var(--b) * 100%) 100%, #BFDEDC; }
.svb-ans__cite { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule), 0 0 0 calc(var(--b) * 3px) rgba(8, 124, 128, .16); font-size: .75rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.svb-ans__cite .svb-mark { width: 16px; height: 16px; }

/* ---------- Success Story: a client on camera, the firm's film ---------- */
.svb-vid__frame { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#DCEDEB, #CDE3E0); }
/* the window behind the client, its light on their shoulder */
.svb-vid__window { position: absolute; left: 9%; top: 13%; width: 28%; height: 52%; border-radius: 3px;
  background: linear-gradient(90deg, transparent calc(50% - 1.5px), #C2DCD9 calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
              linear-gradient(transparent calc(50% - 1.5px), #C2DCD9 calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
              linear-gradient(200deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55)); }
.svb-vid__sitter { position: absolute; right: 9%; bottom: 0; width: 38%; height: 64%; }
.svb-vid__sitter::before { content: ""; position: absolute; left: 50%; bottom: calc(50% - 6px); width: 34%; aspect-ratio: 1 / 1.14; border-radius: 50%; background: #7FB2AE; box-shadow: inset 3px 0 0 rgba(255, 255, 255, .35); transform: translateX(-50%); }
.svb-vid__sitter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; border-radius: 50% 50% 0 0 / 74% 74% 0 0; background: #7FB2AE; box-shadow: inset 4px 0 0 rgba(255, 255, 255, .3); }
.svb-vid__play { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brief); color: #fff; box-shadow: 0 10px 20px -10px rgba(3, 36, 43, .6); transform: translate(-50%, -50%) scale(calc(1 - var(--b) * .08)); }
.svb-vid__play svg { width: 22px; height: 22px; margin-left: 2px; }
.svb-vid__lower { position: absolute; left: 14px; bottom: 24px; display: grid; gap: 3px; padding: 7px 11px 8px; border-left: 2px solid var(--counsel); border-radius: 0 6px 6px 0; background: var(--paper); box-shadow: var(--lift); font-size: .6875rem; line-height: 1.3; color: var(--ink-2); }
.svb-vid__lower b { font-size: .75rem; font-weight: 600; color: var(--ink); }
.svb-vid__lower span { display: inline-flex; align-items: center; gap: 5px; }
.svb-vid__lower .svb-mark { width: 10px; height: 10px; }
.svb-vid__track { position: absolute; left: 14px; right: 14px; bottom: 11px; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(4, 51, 61, .14); }
.svb-vid__track i { display: block; height: 100%; background: var(--counsel); transform-origin: 0 50%; transform: scaleX(calc(.3 + var(--b) * .28)); }

/* ---------- Website Design: the firm's site in a browser, scrolling on the beat ---------- */
.svb-web__browser { position: absolute; inset: 18px 18px -1px; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px 10px 0 0; background: var(--paper); box-shadow: 0 0 0 1px var(--rule), var(--lift); }
.svb-web__chrome { flex: none; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--rule); background: #EAF0EF; font-size: .6875rem; color: var(--ink-2); }
.svb-web__chrome > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #C6D2D0; }
.svb-web__chrome > span { display: inline-flex; flex: 0 1 220px; align-items: center; gap: 5px; min-width: 0; margin-left: 10px; padding: 2px 12px 2px 8px; border-radius: 999px; background: var(--paper); white-space: nowrap; }
.svb-web__chrome svg { flex: none; width: 10px; height: 10px; color: var(--muted); }
.svb-web__view { position: relative; flex: 1 1 auto; overflow: hidden; }
.svb-web__page { display: block; transform: translateY(calc(var(--b) * -48px)); }
.svb-web__nav { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--rule); background: var(--paper); font-size: .75rem; color: var(--ink); }
.svb-web__nav b { font-weight: 600; }
.svb-web__menu { display: flex; gap: 10px; margin-left: auto; }
.svb-web__menu i { width: 24px; height: 5px; border-radius: 3px; background: var(--bar); }
.svb-web__cta { flex: none; width: 52px; height: 16px; border-radius: 999px; background: var(--retain); }
.svb-web__hero { display: grid; justify-items: start; gap: 10px; padding: 18px 16px 24px; background: var(--ground); }
.svb-web__h { display: grid; gap: 7px; width: 78%; }
.svb-web__h i { display: block; height: 12px; border-radius: 6px; background: var(--brief); }
.svb-web__h i + i { width: 64%; }
.svb-web__hero .svb-bars { width: 70%; }
.svb-web__cta--lg { width: 92px; height: 22px; margin-top: 4px; }
.svb-web__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; }
.svb-web__cards > span { display: grid; gap: 9px; padding: 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); }
.svb-web__words { display: grid; justify-items: start; gap: 9px; margin: 2px 16px 16px; padding: 14px; border-radius: 8px; background: var(--ground); }
.svb-web__words .svb-bars { width: 100%; }
.svb-web__by { display: flex; align-items: center; gap: 8px; }
.svb-web__by i { width: 18px; height: 18px; border-radius: 50%; background: #D3DEDC; }
.svb-web__by i + i { width: 64px; height: 6px; border-radius: 3px; background: var(--bar); }
.svb-web__cards > span > i { width: 18px; height: 18px; border-radius: 0 0 50% 50%; background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--counsel); }

/* ---------- smaller screens ---------- */
/* two columns: SEO and the wide ones take a row each, words left and drawing right */
@media (max-width: 1139px) {
  .svb__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svb__tile--seo { grid-row: auto; flex-direction: row; }
  .svb__tile--local, .svb__tile--web { min-height: 280px; }
  .svb__tile--seo .svb__text { flex: 0 0 50%; padding: var(--p); }
  .svb-seo { min-height: 330px; margin: var(--p) var(--p) 0 0; }
}
/* one column: every drawing above its words, SEO's below (it leads with its name) */
@media (max-width: 639px) {
  .svb { --tile-r: 18px; }
  .svb__art { height: 176px; }
  .svb__board { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .svb__tile--seo, .svb__tile--local, .svb__tile--web { grid-column: auto; flex-direction: column; min-height: 0; }
  .svb__tile--seo .svb__text { flex: none; padding: calc(var(--p) + 4px) var(--p) 0; }
  .svb__tile--seo .svb-seo { flex: none; min-height: 0; height: 300px; margin: 22px var(--p) 0; }
  .svb__tile--local .svb__text, .svb__tile--web .svb__text { flex: 1 1 auto; padding: 0 var(--p) var(--p); }
  .svb__tile--local .svb__art { order: -1; flex: none; height: 236px; margin: var(--p) var(--p) 20px; }
  .svb__tile--web .svb__art { order: -1; flex: none; height: 216px; margin: var(--p) var(--p) 22px; }
  .svb-local__card { left: 14px; bottom: 14px; width: 180px; padding: 12px 13px 13px; }
}
@media (max-width: 379px) {
  .svb-seo__links { grid-template-columns: minmax(0, 1fr); }
  .svb-seo__links span:nth-child(n+3) { display: none; }
  .svb-web__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svb-web__cards > span:last-child { display: none; }
}