/* Home section: extends the existing card and responsive grid components. */
.practice-areas { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.areas-introduction { display: grid; gap: 1rem; }
.areas-introduction .eyebrow { margin-bottom: 1rem; }
.areas-introduction h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.15; letter-spacing: -.035em; margin-bottom: 0; }
.areas-description { color: var(--muted); max-width: 33rem; font-size: 1rem; line-height: 1.85; margin-bottom: 0; }
.areas-grid { margin-top: 2.5rem; gap: 1rem; }
.card--detail { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 1.75rem; min-width: 0; }
.card--detail > .card-area-icon { width: 1.75rem; height: 1.75rem; align-self: flex-start; color: var(--gold-dark); margin-bottom: 1.75rem;  stroke: var(--icon-gold-stroke);}
.card--detail h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 1rem; }
.card--detail p { color: var(--muted); font-size: .9rem; line-height: 1.8; margin-bottom: 1.25rem; }
.card-more { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin-top: auto; font-size: .8rem; }
.card-more .icon { color: var(--gold-dark); width: 1rem; height: 1rem;  stroke: var(--icon-gold-stroke);}
.card--detail:hover .card-more, .card--detail:focus-visible .card-more { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 5px;  background-image: var(--gold-gradient-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.areas-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-top: 2.5rem; padding: 1.75rem; border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--paper);  border-image: var(--gold-gradient) 1;}
.areas-contact h2 { font-size: clamp(1.65rem, 2.5vw, 2.1rem); line-height: 1.25; letter-spacing: -.025em; margin-bottom: .75rem; }
.areas-contact p { color: var(--muted); max-width: 39rem; font-size: .9rem; line-height: 1.8; margin-bottom: 0; }
.areas-contact .button { max-width: 100%; gap: 1rem; }
@media (min-width: 40rem) {
  .card--detail { padding: 2rem; }
  .areas-contact { padding: 2rem; }
}
@media (min-width: 64rem) {
  .areas-introduction { grid-template-columns: 1fr; gap: 1rem; }
  .areas-description { justify-self: start; }
  .areas-grid { margin-top: 3rem; }
  .card--detail { min-height: 21rem; }
  .areas-contact { flex-direction: row; justify-content: space-between; align-items: center; gap: 3rem; margin-top: 3rem; padding: 2.5rem; }
  .areas-contact .button { flex-shrink: 0; }
}