:root {
  --dn-color-bg: #f3f5f4;
  --dn-color-ink: #14181a;
  --dn-color-accent: #0f6b62;
  --dn-color-muted: #5c6764;
  --dn-color-surface: #fff;
  --dn-radius: 12px;
  --dn-font: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html, body.dn-mau {
  margin: 0;
  background: var(--dn-color-bg);
  color: var(--dn-color-ink);
  font-family: var(--dn-font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.dn-mau button, .dn-mau input, .dn-mau select, .dn-mau textarea {
  font-family: inherit;
}

.dn-mau a {
  color: inherit;
}

.dn-mau-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--dn-color-accent);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
}

.dn-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 8vw;
  background: var(--dn-color-surface);
}

.dn-nav__logo {
  font-weight: 800;
  text-decoration: none;
}

.dn-nav nav {
  display: flex;
  gap: 20px;
}

.dn-nav nav a {
  text-decoration: none;
  color: var(--dn-color-muted);
}

.dn-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  padding: 48px 8vw 64px;
  min-height: 70dvh;
  align-items: end;
}

.dn-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.dn-hero p {
  max-width: 42ch;
  color: var(--dn-color-muted);
}

.dn-hero aside {
  min-height: 280px;
  display: grid;
  place-items: end start;
  padding: 24px;
  background: var(--dn-color-accent);
  color: #fff;
  border-radius: var(--dn-radius);
  font-weight: 600;
}

.dn-about,
.dn-offerings,
.dn-gallery,
.dn-hours,
.dn-contact,
.dn-quotes,
.dn-faq,
.dn-team,
.dn-cta {
  padding: 56px 8vw;
}

.dn-about p,
.dn-contact p {
  max-width: 58ch;
  color: var(--dn-color-muted);
}

.dn-offerings ul,
.dn-hours ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--dn-color-ink) 12%, transparent);
}

.dn-offerings li,
.dn-hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dn-color-ink) 12%, transparent);
}

.dn-offerings b,
.dn-hours b {
  font-weight: 600;
  color: var(--dn-color-accent);
}

.dn-gallery__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
}

.dn-gallery figure {
  margin: 0;
  min-height: 160px;
  display: grid;
  place-items: end start;
  padding: 16px;
  background: var(--dn-color-surface);
  border-radius: var(--dn-radius);
}

.dn-foot {
  padding: 28px 8vw 80px;
  color: var(--dn-color-muted);
  font-size: 14px;
}

@media (max-width: 767px) {
  .dn-hero,
  .dn-gallery__grid {
    grid-template-columns: 1fr;
  }

  .dn-nav {
    flex-wrap: wrap;
    padding: 16px 20px;
  }

  .dn-hero,
  .dn-about,
  .dn-offerings,
  .dn-gallery,
  .dn-hours,
  .dn-contact {
    padding-left: 20px;
    padding-right: 20px;
  }
}