:root {
    color-scheme: light only;
    --forest: #1E3A2F;
    --sage: #3B5D46;
    --brass: #C9A05C;
    --cream: #FAF7F0;
    --charcoal: #3A342B;
    --line: #E4DDCB;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  * { box-sizing: inherit; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  body {
    margin: 0;
    background: var(--cream);
    color: var(--charcoal);
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .wordmark {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--forest);
    font-weight: 400;
    margin: 0;
  }
  a { color: var(--forest); }
  .wrap { max-width: 760px; margin: 0 auto; padding: 0 28px; }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 28px;
    max-width: 760px;
    margin: 0 auto;
  }
  .wordmark { font-size: 21px; letter-spacing: 0.3px; }
  .logo-lockup { display: flex; align-items: center; gap: 10px; }
  .logo-lockup svg { display: block; }
  .logo-lockup .wordmark { margin: 0; }
  nav { display: flex; gap: 22px; }
  nav a.on { border-bottom-color: var(--brass); }
  nav a {
    text-decoration: none;
    font-size: 14px;
    color: var(--charcoal);
    border-bottom: 1px solid transparent;
  }
  nav a:hover { border-bottom-color: var(--brass); }

  .hero {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--line);
  }
  .hero h1 {
    font-size: 40px;
    line-height: 1.22;
    max-width: 12ch;
  }
  .hero p {
    max-width: 46ch;
    font-size: 17px;
    color: var(--charcoal);
    margin-top: 22px;
  }
  .rule {
    width: 64px;
    height: 2px;
    background: var(--brass);
    margin-top: 28px;
    border: none;
  }

  section { padding: 56px 0; border-bottom: 1px solid var(--line); }
  section:last-of-type { border-bottom: none; }
  section h2 { font-size: 24px; margin-bottom: 18px; }
  section > .wrap > p.lede {
    font-size: 16px;
    max-width: 56ch;
    color: var(--charcoal);
    margin: 0 0 28px;
  }

  .firm-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    font-family: Georgia, serif;
    font-size: 19px;
    color: var(--sage);
  }
  .firm-types span:not(:last-child)::after {
    content: "·";
    color: var(--brass);
    margin: 0 14px;
    font-family: -apple-system, sans-serif;
  }

  .offerings { display: flex; flex-direction: column; gap: 26px; }
  .offering {
    border-left: 2px solid var(--brass);
    padding-left: 18px;
  }
  .offering h3 { font-size: 17px; margin-bottom: 6px; }
  .offering p { margin: 0; font-size: 15px; color: var(--charcoal); }

  .team { display: flex; flex-direction: column; gap: 30px; }
  .member h3 { font-size: 18px; }
  .member .title { font-size: 13px; color: var(--sage); margin: 3px 0 10px; }
  .member p.bio { font-size: 15px; margin: 0; }
  .fill {
    color: var(--sage);
    font-style: italic;
  }

  .empty-state {
    border: 1px dashed var(--line);
    border-radius: 4px;
    padding: 28px;
    text-align: left;
  }
  .empty-state p { margin: 0; font-size: 15px; }
  .empty-state p.sub { color: var(--sage); font-style: italic; margin-top: 8px; font-size: 14px; }

  footer {
    padding: 44px 0 60px;
  }
  footer p { margin: 0 0 6px; font-size: 14px; }
  footer .wordmark { font-size: 16px; margin-bottom: 14px; display: block; }

  @media (max-width: 600px) {
    header { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 24px; }
    nav { gap: 16px; flex-wrap: wrap; }
    .hero { padding: 44px 0 40px; }
    .hero h1 { font-size: 32px; }
    .wrap { padding: 0 24px; }
  }

  .wrap.wide { max-width: 860px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
  .card { border: 1px solid var(--line); background: #fff; padding: 20px 22px; text-decoration: none; color: inherit; display: block; }
  .card:hover { border-color: var(--brass); }
  .card h3 { font-size: 18px; margin-bottom: 6px; }
  .card p { margin: 0; font-size: 14.5px; }
  .card .more { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--sage); }
  .btn { display: inline-block; margin-top: 26px; background: var(--forest); color: #fff; padding: 12px 22px; text-decoration: none; font-size: 15px; border-bottom: 3px solid var(--brass); }
  .pagehead { padding: 48px 0 28px; border-bottom: 1px solid var(--line); }
  .pagehead h1 { font-size: 34px; }
  .pagehead p { max-width: 54ch; margin: 14px 0 0; font-size: 16.5px; }
  .cat { margin: 26px 0 0; }
  .cat h2 { font-size: 21px; margin: 0 0 2px; }
  .cat .sub { font-size: 13.5px; color: var(--sage); margin: 0 0 8px; }
  details { border-top: 1px solid var(--line); }
  .cat details:last-child { border-bottom: 1px solid var(--line); }
  summary { cursor: pointer; list-style: none; padding: 12px 28px 12px 0; position: relative; font-family: Georgia, serif; font-size: 16.5px; color: var(--forest); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: '+'; position: absolute; right: 4px; top: 9px; font-size: 22px; color: var(--brass); font-family: -apple-system, sans-serif; }
  details[open] summary::after { content: '\2212'; }
  details p { margin: 0 0 14px; font-size: 15px; max-width: 62ch; }
  .situations { display: flex; flex-direction: column; gap: 22px; margin-top: 10px; }
  .not { background: #fff; border-left: 3px solid var(--brass); padding: 16px 20px; margin-top: 30px; font-size: 15px; }
  .draft { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
  @media (max-width: 600px) { .cards { grid-template-columns: 1fr; } .pagehead h1 { font-size: 28px; } }
  header { max-width: 860px; }
  .hero.wrap { padding-left: 28px; padding-right: 28px; }
  @media (max-width: 600px) { .hero.wrap { padding-left: 24px; padding-right: 24px; } }
  .jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .jump a { text-decoration: none; font-size: 14px; border: 1px solid var(--line); background: #fff; padding: 8px 16px; color: var(--forest); border-bottom: 2px solid var(--brass); }
  .jump a:hover { border-color: var(--brass); }
  html { scroll-behavior: smooth; }
  .cat { scroll-margin-top: 20px; }
  .faces { display: flex; flex-wrap: wrap; gap: 36px; margin: 8px 0 22px; }
  .face { display: flex; flex-direction: column; align-items: flex-start; width: 150px; }
  .face img, .ph { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; display: block; }
  .ph { background: var(--cream); border: 1.5px dashed var(--brass); color: var(--sage); font-family: Georgia, serif; font-size: 30px; display: flex; align-items: center; justify-content: center; }
  .face strong { font-family: Georgia, serif; font-weight: 400; color: var(--forest); font-size: 17px; margin-top: 12px; }
  .face span { font-size: 13px; color: var(--sage); }
  .member { position: relative; }
  .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 12px; }
  .avatar.ph { font-size: 24px; }
  @media (max-width: 600px) { .faces { gap: 24px; } .face { width: 130px; } .face img, .ph { width: 120px; height: 120px; } .avatar.ph, .avatar { width: 96px; height: 96px; } }
  .herogrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
  .who { border-left: 2px solid var(--brass); padding-left: 28px; margin-top: 14px; }
  .who h2 { font-size: 22px; margin: 0 0 10px; }
  .who p { font-size: 15.5px; margin: 0 0 18px; color: var(--charcoal); max-width: 34ch; }
  .faces.compact { gap: 18px; margin: 0 0 18px; flex-wrap: nowrap; }
  .faces.compact .face { width: 96px; }
  .faces.compact .face img, .faces.compact .ph { width: 92px; height: 92px; }
  .faces.compact .ph { font-size: 22px; }
  .faces.compact .face strong { font-size: 14.5px; margin-top: 9px; line-height: 1.25; }
  .faces.compact .face span { font-size: 12px; }
  .team { gap: 44px; }
  .member { display: grid; grid-template-columns: 190px 1fr; column-gap: 40px; align-items: start; }
  .member > .avatar, .member > h3, .member > .title { grid-column: 1; }
  .member > .avatar { grid-row: 1; width: 130px; height: 130px; margin-bottom: 14px; }
  .member > h3 { grid-row: 2; font-size: 22px; line-height: 1.25; }
  .member > .title { grid-row: 3; font-size: 14.5px; margin: 4px 0 0; }
  .member > p.bio { grid-column: 2; grid-row: 1 / span 4; font-size: 17.5px; line-height: 1.75; margin: 0; }
  @media (max-width: 760px) {
    .herogrid { grid-template-columns: 1fr; gap: 28px; }
    .who { border-left: none; border-top: 2px solid var(--brass); padding: 22px 0 0; }
    .member { grid-template-columns: 1fr; }
    .member > p.bio { grid-column: 1; grid-row: auto; margin-top: 14px; font-size: 16.5px; }
    .member > .avatar { width: 110px; height: 110px; }
  }
  .faces.compact .face strong { margin-top: 10px; }