:root {
  color-scheme: light;
  --paper: #faf4ee;
  --ink: #331f25;
  --muted: #59444a;
  --rule: #dfd0cb;
  --gold: #e7c5a5;
  --burgundy: #401a2a;
  --wine: #642740;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.65 var(--sans); }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible { outline: 2px solid #a14e50; outline-offset: 5px; }
h1, h2, p { margin: 0; }
h1, h2, .brand { font-family: var(--serif); font-weight: 400; }
.wrap { width: min(1120px, 100% - clamp(2rem, 10vw, 8rem)); margin-inline: auto; }
.skip { position: fixed; z-index: 2; top: .75rem; left: .75rem; padding: .6rem 1rem; background: var(--paper); transform: translateY(-160%); }
.skip:focus { transform: translateY(0); }

.header-inner, .footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.header-inner { min-height: 5.2rem; }
.brand { color: var(--burgundy); font-size: clamp(1.18rem, 2.4vw, 1.55rem); line-height: 1.22; letter-spacing: -.035em; text-decoration: none; }
nav { display: flex; align-items: center; flex-wrap: wrap; column-gap: clamp(.8rem, 3vw, 2.7rem); }
nav a, .footer a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-size: .875rem; font-weight: 600; text-decoration: none; }
nav a:hover, .footer a:hover { text-decoration: underline; }

.hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(112deg, var(--burgundy) 40%, var(--wine)); color: var(--paper); }
.hero-inner { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem); }
h1 { max-width: 100%; font-size: clamp(2.25rem, 6.8vw, 6.35rem); line-height: 1.02; letter-spacing: -.052em; }
h1 span { display: block; }
.hero-label { margin-bottom: 1.15rem; color: var(--gold); font-size: .82rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 + p { margin-top: 1.55rem; max-width: 30rem; color: #f2e0df; font-size: clamp(1rem, 1.7vw, 1.18rem); }
.button { display: inline-flex; gap: 1rem; align-items: center; min-height: 49px; margin-top: 1.8rem; padding: .65rem 1rem; background: var(--gold); color: var(--ink); font-size: .9rem; font-weight: 650; text-decoration: none; }
.button:hover { background: #f4d9bf; }

.arches { position: absolute; z-index: -1; width: 44rem; height: 37rem; bottom: -12rem; right: -8rem; opacity: .37; transform: rotate(-24deg); pointer-events: none; }
.arches i { position: absolute; inset: var(--inset); border: 1px solid #d6a990; border-bottom: 0; border-radius: 50% 50% 0 0 / 48% 48% 0 0; }
.arches i:nth-child(1) { --inset: 0; }
.arches i:nth-child(2) { --inset: 1.65rem; }
.arches i:nth-child(3) { --inset: 3.3rem; }
.arches i:nth-child(4) { --inset: 4.95rem; }
.arches i:nth-child(5) { --inset: 6.6rem; }

.sections { padding-block: clamp(1.5rem, 5vw, 4rem) 0; }
.info, .contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: baseline; gap: .75rem 2rem; scroll-margin-top: 1rem; }
.info { padding-block: clamp(1.65rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); }
h2 { color: var(--burgundy); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; letter-spacing: -.045em; }
.info p, .contact p { max-width: 48ch; color: var(--muted); }
.practice-areas { margin: 1.15rem 0 0; padding: 0; list-style: none; }
.practice-areas li { padding-block: .9rem; border-top: 1px solid var(--rule); }
.practice-areas li:last-child { padding-bottom: 0; }
.practice-areas h3 { margin: 0 0 .2rem; color: var(--burgundy); font-family: var(--serif); font-size: 1.32rem; font-weight: 400; line-height: 1.25; }
.contact { background: #f1e2df; margin-top: clamp(1.75rem, 5vw, 4rem); padding: clamp(1.25rem, 4vw, 2.5rem); }
.contact-details { margin: 1rem 0 0; }
.contact-details > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; min-height: 46px; padding-block: .35rem; gap: .5rem; border-top: 1px solid var(--rule); }
.contact-details dt { color: var(--muted); font-size: .86rem; }
.contact-details dd { margin: 0; color: var(--burgundy); font-weight: 650; overflow-wrap: anywhere; }
.contact-details a { display: inline-block; max-width: 100%; padding-block: .65rem; }
.contact-details a:hover { text-decoration-thickness: 2px; }
.footer { flex-wrap: wrap; min-height: 5.5rem; color: var(--muted); font-size: .875rem; }

@media (max-width: 720px) {
  .arches { right: -24rem; bottom: -18rem; opacity: .29; }
}
@media (max-width: 560px) {
  .header-inner { align-items: flex-start; flex-direction: column; padding-top: .65rem; gap: 0; }
  nav { column-gap: clamp(.7rem, 4vw, 1.5rem); }
  .info, .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-details > div { grid-template-columns: 4rem minmax(0, 1fr); }
}