/* Public site styles. Tokens from brand.css only (spec Appendix A.2). */

/* ---------- home hero ---------- */
/* The character stands on the bottom edge of the orange band, so the art column has no bottom padding. */
.hero--home .hero__inner { padding-bottom: 0; align-items: end; }
.hero--home .hero__copy { padding-bottom: var(--space-10); }
.hero--home h1 { color: var(--on-orange); }
.hero--home .hero__art { align-self: end; }
/* Desktop uses the wide banner, cropped to the character on the right (its logo half is not shown). */
.hero--home .hero__art img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 100% 0; }
/* Desktop: the hero fills the screen below the 77px header and no more, so it fits a laptop without scrolling.
   Logo and headline scale with the window height; the character fills the art column's height. */
@media (min-width: 900px) {
  .hero--home .hero__inner { height: max(560px, calc(100svh - 77px)); max-height: 960px; padding-top: var(--space-7); }
  .hero--home .hero__copy { align-self: center; padding-bottom: var(--space-7); }
  .hero--home .hero__logo { width: clamp(200px, 30vh, 420px); margin-bottom: clamp(16px, 3vh, 32px); }
  .hero--home h1 { font-size: clamp(44px, min(5.5vw, 8.5vh), 96px); }
  .hero--home .body-l { margin: clamp(12px, 2.5vh, 24px) 0 clamp(16px, 3.5vh, 32px); }
  .hero--home .hero__art { align-self: stretch; min-height: 0; }
  .hero--home .hero__art picture { display: block; height: 100%; }
  /* Keep the 4:5 crop so the banner's logo half never shows; narrower windows trim from the left. */
  .hero--home .hero__art img { height: 100%; width: auto; max-width: 100%; margin-left: auto; }
}
@media (max-width: 899px) {
  .hero--home .hero__copy { padding-bottom: var(--space-6); }
  .hero--home .hero__art { max-width: 480px; margin-left: auto; margin-right: auto; }
  .hero--home .hero__art img { aspect-ratio: auto; object-fit: contain; }
}
@media (max-width: 639px) {
  .hero--home .hero__logo { width: min(280px, 100%); margin-bottom: var(--space-5); }
}

/* ---------- cards ---------- */
.area-card { height: 100%; display: flex; flex-direction: column; }
.area-card p { flex: 1; }
.area-card .text-link { margin-top: auto; }
.area-card:hover .text-link { text-decoration: underline; }
.why-list h3 { margin-bottom: var(--space-3); }
.section-foot { margin: var(--space-6) 0 0; }

/* ---------- attorney panel ---------- */
.attorney-card { height: 100%; display: flex; flex-direction: column; gap: var(--space-4); }
.attorney-card__body > * + * { margin-top: var(--space-2); }
.attorney-card__body .heading-3 { font: 700 22px/28px var(--font-sans); letter-spacing: 0; }
.attorney-card__title { color: var(--ink-muted); font: 500 14px/20px var(--font-sans); margin: 0; }
.attorney-card .tags { margin-top: var(--space-3); }
.attorney-card__bio { color: var(--ink-muted); margin: var(--space-3) 0 0; }

/* ---------- practice areas page ---------- */
.area-jump { margin-bottom: var(--space-7); }
.area-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border: 1.5px solid var(--control-border); border-radius: var(--radius-pill); color: var(--ink);
  text-decoration: none; font: 500 15px/20px var(--font-sans); }
.area-jump a:hover { background: var(--surface-raised); }
.area-list { display: grid; gap: var(--space-6); }
.area-detail { scroll-margin-top: var(--space-5); padding: var(--space-6); }
.area-detail h2 { margin-bottom: var(--space-4); }
.area-detail p { color: var(--ink); }
.area-detail h3 { margin: var(--space-5) 0 var(--space-3); }
.area-detail__examples { margin: 0; padding-left: var(--space-5); }
.area-detail__examples li + li { margin-top: var(--space-2); }
@media (max-width: 639px) { .area-detail { padding: var(--space-5); } }

/* ---------- about / contact ---------- */
.about-blocks { display: grid; gap: var(--space-7); }
.about-blocks h2 { margin-bottom: var(--space-4); }
.values-list h3 { margin-bottom: var(--space-2); }
.owner-note { margin: 0; }
.contact-address { font-style: normal; }
.contact-grid .card h2 { margin-bottom: var(--space-4); }

/* Placeholder copy the owner still has to write. */
.todo-block { color: var(--ink); }
.todo-block__label { display: inline-block; background: var(--orange-soft); color: var(--ink);
  border-radius: var(--radius-sm); padding: 2px var(--space-2); margin-bottom: var(--space-4); }
.todo-block p:last-child, .todo-block .facts { margin-bottom: 0; }

/* ---------- closing call to action (black band) ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .container { position: relative; }
.cta-band .body-l { margin: var(--space-5) 0 var(--space-6); }
/* The page's one arc motif: a quarter circle in the corner. */
.cta-band__arc { position: absolute; right: 0; bottom: 0; width: 240px; height: 240px;
  background: var(--orange); border-top-left-radius: 100%; }
@media (max-width: 639px) { .cta-band__arc { width: 80px; height: 80px; } }