html { scroll-behavior: smooth; scroll-padding-top: 92px; }
.site-header nav .is-current::after { right: 0; }
.practice-hero { min-height: calc(67vh - 66px); min-height: calc(67svh - 16px); display: grid; grid-template-columns: 42% 58%; border-bottom: 1px solid var(--line); background: #fff; }
.practice-hero-copy { align-self: center; max-width: none !important; padding: 40px 4.4vw; color: inherit !important; animation: fade-up .8s both; }
.practice-hero-copy > p, .practice-nav > p, .practice-list article p { margin: 0; color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.practice-hero h1 { margin: 15px 0 13px; font: 500 clamp(39px, 3.45vw, 58px)/1.02 var(--serif); letter-spacing: -.045em; }
.practice-hero h1 em { display: block; color: var(--red); font-style: normal; }
.practice-hero-copy > div { max-width: 520px; color: #44464a; font-size: 14px; line-height: 1.7; }
.practice-hero-image { min-height: calc(67vh - 66px); min-height: calc(67svh - 66px); background: linear-gradient(90deg, rgba(255,255,255,.48), transparent 15%), url("../assets/images/practices-hero-scale.jpg") center / cover no-repeat; animation: image-in 1.1s both; }
.practice-content { display: grid; grid-template-columns: 25% 75%; background: #f7f5f1; }
.practice-nav { align-self: start; position: sticky; top: 92px; padding: 32px 2.4vw; }
.practice-nav > p { margin-bottom: 24px; }
.practice-nav a { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 13px 0; color: #838386; border-bottom: 1px solid var(--line); font-size: 10px; transition: color .25s ease, padding-left .25s ease; }
.practice-nav a span { color: #242528; font-size: 12px; font-weight: 600; }
.practice-list { border-left: 1px solid var(--line); }
.practice-list article { min-height: 510px; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(240px, .78fr); gap: clamp(20px, 3vw, 42px); align-items: center; padding: clamp(24px, 4vw, 24px); border-bottom: 1px solid var(--line); background: #fff; scroll-margin-top: 92px; transition: background .45s ease; }
.practice-list article:target { background: #fff5f5; animation: practice-focus 1.1s ease both; }
.practice-list article > b { align-self: start; color: var(--red); font: 500 21px var(--serif); }
.practice-list article h2 { margin: 12px 0 16px; font: 500 clamp(34px, 3.4vw, 42px)/.98 var(--serif); letter-spacing: -.035em; }
.practice-list article span { display: block; max-width: 690px; color: #55565a; font-size: 14px; line-height: 1.75; }
.practice-list article h3 { margin: 22px 0 8px; color: var(--red); font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.practice-list figure { grid-column: 3; grid-row: 1; height: 300px; margin: 0; overflow: hidden; background: #e8e5df; }
.practice-list figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.practice-list ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.practice-list li { min-height: 66px; display: flex; align-items: center; justify-content: center; padding: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; line-height: 1.45; text-align: center; transition: color .25s ease, background-color .25s ease; }
@keyframes practice-focus { 0% { box-shadow: inset 5px 0 0 var(--red); } 100% { box-shadow: inset 0 0 0 transparent; } }
@media (hover:hover) and (pointer:fine) { .practice-nav a:hover { padding-left: 6px; color: var(--red); } .practice-list article:hover figure img { transform: scale(1.035); } .practice-list li:hover { color: var(--red); background-color: #fff3f3; } }
@media (max-width: 1100px) { .practice-list article { min-height: 440px; grid-template-columns: 40px minmax(0, 1fr) minmax(210px, .78fr); gap: 24px; padding: 38px; } .practice-list figure { grid-column: 3; grid-row: 1; height: 250px; } .practice-list article > div { grid-column: 2; grid-row: 1; } }
@media (max-width: 900px) { .practice-hero { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto clamp(210px, 28svh, 270px); } .practice-hero-copy { padding: 34px 6vw 30px; } .practice-hero-image { min-height: 0; height: 100%; } .practice-content { grid-template-columns: 1fr; } .practice-nav { position: relative; top: auto; display: flex; overflow-x: auto; gap: 18px; padding: 22px 4.4vw; background: #f7f5f1; scrollbar-width: none; -ms-overflow-style: none; } .practice-nav::-webkit-scrollbar { display: none; } .practice-nav > p { display: none; } .practice-nav a { min-width: max-content; border: 0; } .practice-list { border-left: 0; } .practice-list article { min-height: 0; grid-template-columns: 44px minmax(0, 1fr); } .practice-list figure { grid-column: 1 / -1; grid-row: 2; height: 280px; } .practice-list article > div { grid-column: 2; grid-row: 1; } }
@media (max-width: 620px) { .practice-hero { grid-template-rows: auto clamp(180px, 24svh, 220px); } .practice-hero-copy { padding: 30px 6vw 26px; } .practice-hero h1 { font-size: 48px; } .practice-hero-copy > div { font-size: 13px; } .practice-list article { grid-template-columns: 1fr; gap: 16px; padding: 34px 6vw; } .practice-list article > b { grid-column: 1; grid-row: 1; } .practice-list figure { grid-column: 1; grid-row: 2; height: 220px; } .practice-list article > div { grid-column: 1; grid-row: 3; } .practice-list article h2 { font-size: 36px; } .practice-list ul { grid-template-columns: 1fr; } .practice-list li { min-height: 56px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .practice-list article:target { animation: none; } }