.jj-practice-directory { padding: clamp(4rem, 8vw, 7rem) max(5vw, 1.4rem) 2rem; background: #f4f0ea; color: var(--ink); }
.jj-practice-index-hero { position: relative; isolation: isolate; background: #170607 !important; }
.jj-practice-index-hero::before { position: absolute; z-index: 0; inset: 0; background-image: linear-gradient(105deg, #170607f2 0%, #531018ed 48%, #8d1c25e8 100%), var(--jj-practice-hero-image, url('../images/external/photo-1589829545856-d10d557cf95f-e0493e3ee6.jpg')); background-position: center; background-size: cover; content: ''; animation: practiceDirectoryHeroImageIn 1.5s cubic-bezier(.22, 1, .36, 1) both; }
.jj-practice-hero__inner { position: relative; z-index: 1; }
.jj-practice-index-hero h1 { font-size: clamp(2.3rem, 3.7vw, 4rem); }
.jj-practice-index-hero .button, .practice-index-cta a { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, background-color .45s ease, color .45s ease; }
.jj-practice-index-hero .button:hover, .jj-practice-index-hero .button:focus-visible, .practice-index-cta a:hover, .practice-index-cta a:focus-visible { transform: translateY(-3px); box-shadow: 0 .8rem 1.6rem #17111235; }
.jj-practice-index-hero .button b, .practice-index-cta a b { display: inline-block; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.jj-practice-index-hero .button:hover b, .jj-practice-index-hero .button:focus-visible b, .practice-index-cta a:hover b, .practice-index-cta a:focus-visible b { transform: translateX(.35rem); }
@keyframes practiceDirectoryHeroImageIn {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}
.directory-hero-copy > *, .directory-hero-aside > * { opacity: 0; animation: practiceDirectoryHeroContentIn .8s cubic-bezier(.22, 1, .36, 1) both; }
.directory-hero-copy > :nth-child(1) { animation-delay: .25s; }
.directory-hero-copy > :nth-child(2) { animation-delay: .38s; }
.directory-hero-copy > :nth-child(3) { animation-delay: .55s; }
.directory-hero-copy > :nth-child(4) { animation-delay: .68s; }
.directory-hero-copy > :nth-child(5) { animation-delay: .82s; }
.directory-hero-aside { animation: practiceDirectoryHeroAsideIn .9s cubic-bezier(.22, 1, .36, 1) .55s both; }
.directory-hero-aside > * { animation-delay: .82s; }
@keyframes practiceDirectoryHeroContentIn {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes practiceDirectoryHeroAsideIn {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: translateX(0); }
}
.jj-practice-directory__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: 4rem; align-items: end; width: min(100rem, 100%); margin: 0 auto clamp(3rem, 6vw, 5rem); }
.jj-practice-directory__intro h2 { max-width: 48rem; margin: .6rem 0 0; font: 800 clamp(1.8rem, 2.8vw, 3.1rem)/1.05 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.jj-practice-directory__intro > p { max-width: 31rem; margin: 0; color: #756c69; font-size: 1rem; line-height: 1.7; }
.jj-practice-directory__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); gap: clamp(3rem, 7vw, 8rem); width: min(100rem, 100%); margin: 0 auto; }
.jj-practice-directory__areas { min-width: 0; }
.jj-practice-directory__nav { position: sticky; top: 7.5rem; order: 2; align-self: start; display: grid; gap: .25rem; padding-top: .5rem; }
.jj-practice-directory__nav > span { margin-bottom: 1rem; color: var(--red); font: 800 .7rem var(--body); letter-spacing: .2em; text-transform: uppercase; }
.jj-practice-directory__nav a { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: .7rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid #d8d0c7; color: #8b837d; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; transition: color .35s ease, padding .35s ease; }
.jj-practice-directory__nav a::after { position: absolute; right: 0; bottom: -.5px; left: 0; height: 2px; background: var(--red); content: ''; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.jj-practice-directory__nav a span { color: var(--red); font-weight: 800; }
.jj-practice-directory__nav a.is-active, .jj-practice-directory__nav a:hover, .jj-practice-directory__nav a:focus-visible { padding-left: .45rem; color: var(--ink); }
.jj-practice-directory__nav a.is-active::after, .jj-practice-directory__nav a:hover::after, .jj-practice-directory__nav a:focus-visible::after { transform: scaleX(1); }
.jj-practice-directory__area { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(14rem, .75fr); gap: 3rem; min-height: 42rem; margin-bottom: 3rem; padding: clamp(2rem, 4vw, 4.5rem); overflow: hidden; }
.jj-practice-directory__area.is-light { background: #fff; }
.jj-practice-directory__area.is-dark { color: #fff; background: #241214; }
.jj-practice-directory__area-copy { position: relative; z-index: 1; align-self: center; }
.jj-practice-directory__area-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.jj-practice-directory__area-heading > span { display: inline-grid; width: 3.5rem; height: 3.5rem; place-items: center; color: #fff; background: var(--red); font: 800 1rem var(--display); }
.jj-practice-directory__area-heading .eyebrow { margin: 0; color: var(--red); }
.jj-practice-directory__area.is-dark .jj-practice-directory__area-heading .eyebrow { color: #e4cfa5; }
.jj-practice-directory__area h3 { max-width: 31rem; margin: 0 0 1.2rem; font: 800 clamp(1.7rem, 2.4vw, 2.8rem)/1.05 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.jj-practice-directory__lede { max-width: 38rem; margin: 0 0 1rem; color: var(--red); font: 600 1.1rem/1.45 var(--body); }
.jj-practice-directory__area.is-dark .jj-practice-directory__lede { color: #e4cfa5; }
.jj-practice-directory__area-copy > p:not(.jj-practice-directory__lede) { max-width: 38rem; margin: 0; color: #756c69; font-size: .95rem; line-height: 1.7; }
.jj-practice-directory__area.is-dark .jj-practice-directory__area-copy > p:not(.jj-practice-directory__lede) { color: #eadfe0; }
.jj-practice-directory__cta { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 2.2rem; padding-bottom: .65rem; border-bottom: 1px solid currentColor; color: var(--red); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transition: color .45s ease, gap .45s cubic-bezier(.22, 1, .36, 1), border-color .45s ease; }
.jj-practice-directory__cta:hover, .jj-practice-directory__cta:focus-visible { gap: 1.9rem; color: #6d1118; }
.jj-practice-directory__area.is-dark .jj-practice-directory__cta { color: #e4cfa5; }
.jj-practice-directory__cta b { font-size: 1.2rem; font-weight: 400; transition: transform .35s ease; }
.jj-practice-directory__cta:hover b, .jj-practice-directory__cta:focus-visible b { transform: translateX(.35rem); }
.jj-practice-directory__services { position: relative; z-index: 1; align-self: end; padding-top: 2rem; }
.jj-practice-directory__services .eyebrow { margin-bottom: 1rem; color: var(--red); }
.jj-practice-directory__area.is-dark .jj-practice-directory__services .eyebrow { color: #e4cfa5; }
.jj-practice-directory__services ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid #b9aaa2; }
.jj-practice-directory__area.is-dark .jj-practice-directory__services ol { border-color: #ffffff55; }
.jj-practice-directory__services li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #d8d0c7; font: 600 .8rem/1.35 var(--body); }
.jj-practice-directory__services li a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; color: inherit; }
.jj-practice-directory__services li a:hover span, .jj-practice-directory__services li a:focus-visible span { color: var(--red); }
.jj-practice-directory__area.is-dark .jj-practice-directory__services li { border-color: #ffffff2e; }
.jj-practice-directory__services li b { color: var(--red); font-size: 1rem; font-weight: 400; }
.jj-practice-directory__area.is-dark .jj-practice-directory__services li b { color: #e4cfa5; }
.jj-practice-directory__image { display: none; }
.jj-practice-directory__image::after { position: absolute; inset: 0; background: linear-gradient(90deg, currentColor, transparent 65%); content: ''; opacity: .55; }
.jj-practice-directory__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) sepia(.15); }
.jj-practice-directory__area.is-dark .jj-practice-directory__image { opacity: .3; }
.jj-practice-directory__area .reveal { transition-duration: .9s; }
.jj-practice-directory__area:nth-child(even) .jj-practice-directory__services { transition-delay: .14s; }
.jj-practice-directory__area:nth-child(odd) .jj-practice-directory__services { transition-delay: .22s; }
@media (min-width: 1025px) {
  .jj-practice-directory__area {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: 0;
  }
  .jj-practice-directory__services {
    align-self: start;
  }
}
@media (max-width: 800px) {
  .jj-practice-directory { padding-right: .55rem; padding-left: .55rem; }
  .jj-practice-directory__intro { display: block; }
  .jj-practice-directory__intro h2 { margin-bottom: 1.2rem; font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .jj-practice-directory__layout { display: flex; flex-direction: column; gap: 2rem; }
  .jj-practice-directory__nav { display: none; }
  .jj-practice-directory__nav > span { display: none; }
  .jj-practice-directory__nav a { display: flex; flex: 0 0 auto; gap: .45rem; padding: .55rem .7rem; border: 1px solid #d8d0c7; font-size: .62rem; }
  .jj-practice-directory__nav a b { display: none; }
  .jj-practice-directory__nav a.is-active, .jj-practice-directory__nav a:hover, .jj-practice-directory__nav a:focus-visible { padding-left: .7rem; color: var(--ink); border-color: var(--red); }
  .jj-practice-directory__nav a::after { display: none; }
  .jj-practice-directory__area { display: flex; flex-direction: column; gap: 2.4rem; min-height: 0; margin-bottom: 1.5rem; padding: 2.25rem 1rem; }
  .jj-practice-directory__area h3 { font-size: clamp(1.6rem, 7vw, 2.6rem); }
  .jj-practice-directory__services { align-self: stretch; padding-top: 0; }
  .jj-practice-directory__image { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jj-practice-index-hero::before, .directory-hero-copy > *, .directory-hero-aside, .directory-hero-aside > * { animation: none; opacity: 1; transform: none; }
  .jj-practice-index-hero .button, .jj-practice-index-hero .button b, .practice-index-cta a, .practice-index-cta a b, .jj-practice-directory__nav a, .jj-practice-directory__nav a::after, .jj-practice-directory__cta, .jj-practice-directory__cta b { transition: none; }
}