:root { --gold: #d7c200; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #14262a;
  color: #d7d3c9;
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-underline-offset: .18em; }
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero-photo, .hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-photo { object-fit: cover; object-position: center center; }
.hero-shade { background: linear-gradient(to bottom, rgba(15,20,30,.02) 40%, rgba(10,18,31,.28) 100%); }
.logo {
  position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: auto;
}
.hero-bottom {
  position: absolute;
  z-index: 2;
  left: 9vw;
  right: 9vw;
  bottom: 12vh;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  font-size: clamp(13px, 1.15vw, 18px);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.hero-bottom p { margin: 0; }
.practice span { opacity: .6; padding: 0 .25em; }
.contact { text-align: right; }
.phone { white-space: nowrap; }
@media (max-width: 760px) {
  .hero-photo { object-position: 54% center; }
  .logo { width: 100px; transform: translateY(-11vh); }
  .hero-bottom {
    left: 7vw;
    right: 7vw;
    bottom: 7vh;
    flex-direction: column;
    gap: 1.2rem;
    font-size: 13px;
  }
  .contact { text-align: left; }
}