html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  #hero {
    height: auto !important;
    min-height: 100svh;
    flex-direction: column !important;
    overflow: visible !important;
  }

  #hero > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #hero > div:last-child {
    height: min(58vh, 420px) !important;
    min-height: 240px !important;
  }

  #hero nav {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    background: rgba(0, 0, 0, 0.88) !important;
  }

  #hero nav > span {
    font-size: 14px !important;
  }

  #hero nav > div {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    width: 100% !important;
  }

  #hero nav a {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  #hero > div:first-child > div {
    padding: 88px 20px 28px !important;
  }

  #hero h1 {
    font-size: clamp(28px, 11vw, 44px) !important;
    margin-bottom: 20px !important;
  }

  #manifesto,
  #experience,
  #facilities,
  #observation {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #manifesto {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  #manifesto p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 22px !important;
  }

  #manifesto > div {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-width: 100% !important;
  }

  #manifesto > div > div:first-child {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  #observation > div[style],
  #observation > div:last-of-type {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    max-width: 100% !important;
  }

  #experience,
  #observation {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  #experience .exp-entry {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 24px 0 28px !important;
  }

  #experience > div:first-child {
    padding: 32px 0 16px !important;
  }

  #facilities {
    padding-top: 56px !important;
  }

  html.lkh-detail #root > div > div:last-child {
    flex-direction: column !important;
  }

  html.lkh-detail #root img {
    width: 100% !important;
    height: 42vh !important;
    min-height: 220px !important;
    object-fit: cover !important;
  }

  html.lkh-detail #root nav {
    padding: 14px 16px !important;
  }

  html.lkh-detail #root h1 {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  #lkh-doggy {
    width: 76px !important;
    height: 76px !important;
  }
}

@media (max-width: 420px) {
  #hero nav a {
    font-size: 9px !important;
  }
}


.lkh-profile-wrap {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
}
.lkh-profile {
  width: 100%;
  height: 100%;
  display: block;
  background: #070707;
  image-rendering: pixelated;
}
@media (max-width: 768px) {
  .lkh-profile-wrap {
    max-width: 300px;
  }
}