:root {
  color-scheme: light;
  --headline-size: clamp(2.125rem, 1.5rem + 2.75vw, 3.75rem);
  --section-title-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem);
  --practice-title-size: clamp(1.25rem, 1.16rem + .36vw, 1.5rem);
  --body-size: clamp(1rem, .95rem + .22vw, 1.125rem);
  --section-space: clamp(28px, 4svh, 56px);
  --ink: #191919;
  --gray: #676664;
  --logo-blue: #072d9a;
  --axume-blue: #386dad;
  --hardaway-lavender: #ab88d9;
  color: var(--ink);
  background: white;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #1642a4; outline-offset: 4px; }
.shell { width: min(1312px, 90%); margin-inline: auto; }
.masthead { border-top: 5px solid var(--ink); border-bottom: 1px solid #eeedeb; }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand { display: block; width: min(390px, 66%); }
.brand img { display: block; width: 100%; height: auto; }
.notice { flex: 1; display: grid; align-content: center; padding-block: var(--section-space); text-align: left; }
.glow-band {
  position: relative;
  flex: none;
  height: clamp(22px, 3svh, 32px);
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(90deg, #ab88d94d, #386dad45) center / 100% 1px no-repeat,
    radial-gradient(ellipse 52% 50% at 18% 50%, #ab88d926, transparent),
    radial-gradient(ellipse 52% 50% at 82% 50%, #386dad20, transparent);
}
.glow-band::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background:
    linear-gradient(90deg, transparent, var(--hardaway-lavender) 36%, var(--axume-blue) 68%, transparent) center / 100% 2px no-repeat,
    radial-gradient(ellipse at center, #889cd24d, transparent 68%);
  transform: translateX(82%);
}
@media (prefers-reduced-motion: no-preference) {
  .firm { transition: background-color 160ms ease; }
  .firm .arrow { transition: transform 160ms ease; }
  .directory-dialog[open] { animation: directory-fade 180ms ease-out both; }
  .directory-dialog[open]::backdrop { animation: directory-fade 180ms ease-out both; }
  .glow-band::after { animation: divider-sweep 7s linear -2s infinite; }
}
@keyframes directory-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes divider-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(264%); }
}
.notice h1, .directory-intro h2, .dialog-heading h2, .firm-name {
  margin: 0;
  font-size: var(--practice-title-size);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.notice h1 {
  max-width: 34ch;
  font-size: var(--headline-size);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.directory-intro h2, .dialog-heading h2 {
  font-size: var(--section-title-size);
  line-height: 1.1;
}
@media (min-width: 721px) {
  .firm-title { display: block; }
}
.subhead { max-width: 65ch; margin: 18px 0 0; color: var(--gray); font-size: var(--body-size); line-height: 1.55; letter-spacing: -.018em; text-wrap: balance; }
time { white-space: nowrap; }
.primary { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; flex: none; padding: 12px 16px; border-radius: 6px; color: white; background: var(--logo-blue); font-size: 16px; font-weight: 500; }
.primary span { font-size: .8em; }
.primary:hover { background: #052377; }
.directory { flex: 1.2; display: grid; align-content: center; gap: clamp(16px, 2.2vw, 28px); padding-block: var(--section-space); scroll-margin-top: 24px; }
.directory-intro { padding-top: 4px; }


.practices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 22px); }
.firm {
  --accent: #24558b;
  --tint: #f0f5fa;
  --inset: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid #dedfe2;
  border-radius: 12px;
  background: white;
}
.hardaway { --accent: #5937a0; --tint: #f6f3fa; }
.logo-area {
  display: grid;
  align-items: center;
  height: clamp(78px, 9.4vw, 132px);
  padding: 12px var(--inset);
  background: var(--tint);
  border-radius: 11px 11px 0 0;
  border-bottom: 1px solid #17254b0d;
}
.practice-logo { display: block; width: min(100%, 280px); height: 74px; object-fit: contain; object-position: left center; }
.firm-name {
  padding: 19px var(--inset) 0;

}
.domain { margin: 8px var(--inset) 21px; color: var(--accent); font-size: .9375rem; line-height: 1.4; }
.arrow { display: inline-block; margin-left: 4px; }
.firm:is(:active, :focus-visible) { background: var(--tint); }
@media (hover: hover) {
  .firm:hover { border-color: var(--accent); }
  .firm:hover .domain { text-decoration: underline; text-underline-offset: 3px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .firm:hover .arrow { transform: translate(2px, -2px); }
}
.directory-dialog {
  width: min(850px, calc(100% - 24px));
  max-width: none;
  border: 0;
  border-radius: 14px;
  padding: clamp(16px, 3vw, 32px);
  color: var(--ink);
  background: white;
  box-shadow: 0 18px 70px #14182033;
}
.directory-dialog::backdrop { background: #13182170; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.dialog-heading button {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  color: var(--ink); background: #f2f0ec;
  font: 26px/1 Arial, sans-serif; cursor: pointer;
}

@media (pointer: coarse) {
  .dialog-heading button { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
  .shell { width: calc(100% - 32px); }
  .masthead-inner { gap: 12px; padding-block: 16px; }
  .brand { flex: 1; min-width: 0; max-width: 320px; }
  .primary { font-size: .9375rem; padding-inline: 12px; gap: 6px; }

  .subhead { max-width: 34ch; margin-top: 16px; }
  .practices { gap: 10px; }
  .firm { --inset: clamp(10px, 2.8vw, 16px); min-width: 0; }
  .logo-area { height: clamp(76px, 19vw, 108px); padding-block: 10px; }
  .practice-logo { height: 100%; max-height: 64px; }
  .firm-name { padding-top: 16px; text-wrap: balance; overflow-wrap: anywhere; }
  .domain { margin-block: 9px 18px; font-size: .875rem; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
  .arrow { display: none; }
}
@media (max-width: 570px) {
  .directory-dialog {
    inset: auto 0 0;
    width: 100%;
    max-height: 90dvh;
    margin: 0;
    padding: 20px 16px max(24px, env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    overscroll-behavior: contain;
  }
  body:has(.directory-dialog[open]) { overflow: hidden; }
}