/* ============================================================
   Page frame
   ============================================================ */
.dm-page {
  position: relative;
  width: 1280px;
  min-height: 100vh;
  margin: 0 auto;
  background: transparent;
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "sidebar main"
    "footer  footer";
}
.dm-page > main { grid-area: main; min-width: 0; }
.dm-page > .dm-footer { grid-area: footer; }

/* ============================================================
   Section title
   ============================================================ */
.dm-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.dm-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
  margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.dm-btn {
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  display: inline-block;
  text-align: center;
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              transform var(--motion-base);
}
.dm-btn--sm { padding:  8px 22px; font-size: 13px; }
.dm-btn--md { padding: 11px 32px; font-size: 14px; }
.dm-btn--lg { padding: 14px 42px; font-size: 15px; }

.dm-btn--primary {
  background: var(--yellow-500);
  color: #1a1a1a;
}
.dm-btn--primary:hover  { background: var(--yellow-50); }
.dm-btn--primary:active { background: var(--yellow-600); transform: translateY(1px); }

.dm-btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--fg-1);
}
.dm-btn--ghost:hover { background: #efefef; color: #1a1a1a; }

/* ============================================================
   Sidebar
   ============================================================ */
.dm-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 128px;
  align-self: start;
  justify-self: end;
  margin-right: 0;
  width: 140px;
  max-height: calc(100vh - 176px);
  display: flex;
  flex-direction: column;
  gap: 36px;
  z-index: 20;
}
.dm-sidebar__logo {
  display: inline-block;
  cursor: pointer;
}
.dm-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.dm-nav-link {
  cursor: pointer;
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0;
  transition: color var(--motion-base) var(--ease-standard);
}
.dm-nav-link:hover  { color: var(--yellow-500); }
.dm-nav-link.is-active { color: var(--yellow-500); }
.dm-nav-link__label { margin-left: 14px; }
.dm-nav-link.is-active .dm-nav-link__label { margin-left: 0; }
.dm-nav-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow-500);
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.dm-sidebar__spacer { flex: 1; }
.dm-sidebar__cluster {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 180px;
}
.dm-sidebar__hint {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-1);
  margin-top: 4px;
}
.dm-sidebar__icons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.dm-iconbtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: transform var(--motion-fast), background var(--motion-fast);
}
.dm-iconbtn:hover { background: var(--yellow-500); transform: translateY(-1px); }

/* ============================================================
   Footer
   ============================================================ */
.dm-footer {
  position: relative;
  margin: 80px 100px 0;
  padding: 32px 0;
  border-top: 1px solid rgba(239, 239, 239, 0.12);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.dm-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dm-footer__nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.dm-footer__link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 180ms, color 180ms;
}
.dm-footer__link:hover { opacity: 1; color: var(--yellow-500); }
.dm-footer__credit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-1);
}
.dm-footer__credit-line  { opacity: 0.55; }
.dm-footer__credit-name  { color: var(--yellow-500); font-weight: 700; }
.dm-footer__credit-year  { opacity: 0.35; letter-spacing: 0.08em; }

/* ============================================================
   Hero (Accueil)
   ============================================================ */
.dm-hero-zone {
  position: relative;
  height: 886px;
}
.dm-hero {
  position: absolute;
  left: 133px;
  top: 556px;
  width: 808px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.dm-hero__tagline {
  margin: 0;
  width: 808px;
  font-family: var(--font-mono);
  font-size: 20px;
  text-align: right;
  color: var(--fg-1);
  line-height: 1.15;
}
.dm-hero__cue {
  position: absolute;
  right: 0;
  top: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: rgba(239, 239, 239, 0.45);
  white-space: nowrap;
}
.dm-hero__cue-bar {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(239, 239, 239, 0.45);
}

/* ============================================================
   Accueil layout
   ============================================================ */
.dm-accueil-main {
  position: relative;
  margin-left: 132px;
  width: 813px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-bottom: 40px;
}
.dm-subhero {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}
.dm-subhero__meta {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 86px;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--fg-1);
  white-space: nowrap;
}
.dm-subhero__intro {
  margin: 20px 0 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-1);
  line-height: 1.45;
}

/* ============================================================
   Présentation
   ============================================================ */
.dm-presentation {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.dm-portrait {
  position: relative;
  width: 272px;
  height: 279px;
  flex-shrink: 0;
}
.dm-portrait__plate {
  position: absolute;
  inset: 0;
  background: var(--yellow-500);
  border-radius: 10px;
}
.dm-portrait__img {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  bottom: -7px;
  background: url("../img/portrait.png") 50% 20% / cover no-repeat;
  border-radius: 10px;
}
.dm-presentation__body {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-1);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dm-presentation__body p { margin: 0; }
.dm-mark { color: var(--yellow-500); font-weight: 700; }

/* ============================================================
   Stack rack
   ============================================================ */
.dm-stack-rack {
  border: 1px solid var(--fg-1);
  border-radius: 10px;
  padding: 30px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.dm-stack-chip {
  width: 109px;
  height: 42px;
  background: #efefef;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
  transition: transform 180ms var(--ease-standard), box-shadow 180ms;
}
.dm-stack-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 178, 0, 0.15);
}
.dm-stack-chip img { height: 26px; width: auto; }

/* ============================================================
   Experience row (timeline + detail panel)
   ============================================================ */
.dm-experience {
  border-radius: 10px;
  border: 1px solid var(--fg-1);
  padding: 26px 34px 22px;
  position: relative;
}
.dm-experience__rail {
  position: relative;
  display: grid;
  align-items: end;
}
.dm-experience__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: rgba(239, 239, 239, 0.35);
  pointer-events: none;
}
.dm-experience__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}
.dm-experience__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--fg-1);
  letter-spacing: 0.04em;
  transition: color 180ms var(--ease-standard);
}
.dm-experience__step.is-active .dm-experience__year { color: var(--yellow-500); }
.dm-experience__title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-1);
  white-space: nowrap;
}
.dm-experience__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--yellow-500);
  box-shadow: 0 0 0 4px #000;
  transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.dm-experience__dot.is-off {
  background: transparent;
  border: 2px solid var(--yellow-500);
}
.dm-experience__step.is-active .dm-experience__dot {
  transform: scale(1.4);
  box-shadow: 0 0 0 4px #000, 0 0 0 7px rgba(255, 178, 0, 0.4);
}

.dm-experience__panel {
  margin-top: 26px;
  border-top: 1px solid rgba(239, 239, 239, 0.15);
  padding-top: 18px;
  min-height: 78px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.dm-experience__panel.is-fading { animation: dmFade 220ms var(--ease-standard) both; }
.dm-experience__panel-year {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  color: var(--yellow-500);
  line-height: 1;
  min-width: 88px;
}
.dm-experience__panel-body { flex: 1; }
.dm-experience__panel-role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.dm-experience__panel-org {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow-500);
  margin: 0 0 8px;
}
.dm-experience__panel-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.55;
  margin: 0;
  opacity: 0.85;
}
.dm-experience__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(239, 239, 239, 0.35);
  margin-top: 14px;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ============================================================
   Project glyph (placeholder browser frame)
   ============================================================ */
.dm-glyph {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(239, 239, 239, 0.08);
}
.dm-glyph--lg { aspect-ratio: 491 / 317; }
.dm-glyph--md { aspect-ratio: 16 / 10; }
.dm-glyph__chrome {
  height: 28px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(239, 239, 239, 0.06);
  position: relative;
  z-index: 2;
}
.dm-glyph__chrome span.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.dm-glyph__url {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(239, 239, 239, 0.45);
  letter-spacing: 0.04em;
}
.dm-glyph__grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  bottom: 0;
  background-image: radial-gradient(circle, rgba(239, 239, 239, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
}
.dm-glyph__center {
  position: absolute;
  inset: 28px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.dm-glyph--lg .dm-glyph__center { padding: 0 48px; }
.dm-glyph--md .dm-glyph__center { padding: 0 24px; }
.dm-glyph__letter {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.dm-glyph--lg .dm-glyph__letter { font-size: 96px; }
.dm-glyph--md .dm-glyph__letter { font-size: 60px; }
.dm-glyph__stack {
  margin-top: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dm-glyph--lg .dm-glyph__stack { font-size: 13px; }
.dm-glyph--md .dm-glyph__stack { font-size: 11px; }
.dm-glyph__corner {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(239, 239, 239, 0.35);
}

/* ============================================================
   Carousel (Accueil)
   ============================================================ */
.dm-carousel { position: relative; width: 813px; }
.dm-carousel__viewport { position: relative; }
.dm-carousel__track { position: relative; }

/* Slide = capture mise en avant + halo flou (sa propre image agrandie/floutée).
   Taille identique pour tous les projets : ratio d'image fixe + légende à
   hauteur verrouillée, quelle que soit la taille native du fichier. */
.dm-shot {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0e0e10;
  border: 1px solid rgba(239, 239, 239, 0.08);
}
.dm-carousel__slide:not(.is-active) { display: none; }
.dm-shot__glow {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(55px) saturate(1.6);
  transform: scale(1.25);
  opacity: 0.5;
  z-index: 0;
}
.dm-shot__stage {
  position: relative;
  z-index: 1;
  padding: 40px 56px 22px;
}
.dm-shot__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 9px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dm-shot__caption {
  position: relative;
  z-index: 1;
  min-height: 104px;
  padding: 14px 56px 24px;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.94) 60%, rgba(10, 10, 12, 0.55));
  backdrop-filter: blur(8px);
}
.dm-shot__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow-500);
  margin: 0;
}
.dm-shot__title span { font-weight: 600; opacity: 0.8; }
.dm-shot__blurb {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(239, 239, 239, 0.84);
  margin: 9px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dm-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 178, 0, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.dm-arrow--prev { left: 16px; }
.dm-arrow--next { right: 16px; }
.dm-arrow:hover { background: rgba(255, 178, 0, 0.18); border-color: var(--yellow-500); }
.dm-carousel__dots {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.dm-dot {
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: rgba(239, 239, 239, 0.30);
  cursor: pointer;
  transition: background var(--motion-base), width var(--motion-base);
}
.dm-dot.is-active {
  width: 22px;
  background: var(--yellow-500);
}
.dm-carousel__cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* ============================================================
   Portfolio page
   ============================================================ */
.dm-portfolio-main {
  position: relative;
  margin-left: 132px;
  width: 813px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-bottom: 40px;
}
.dm-portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.dm-portfolio-card {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(239, 239, 239, 0.10);
  padding: 24px;
  display: flex;
  gap: 28px;
  align-items: stretch;
}
.dm-portfolio-card--reverse { flex-direction: row-reverse; }
.dm-portfolio-card:not(.dm-portfolio-card--reverse) { flex-direction: row; }
.dm-portfolio-card__media { flex: 0 0 420px; }
.dm-portfolio-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 4px;
}
.dm-portfolio-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-1);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dm-portfolio-card__blurb {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(239, 239, 239, 0.78);
  margin: 14px 0 0;
  line-height: 1.6;
}
.dm-portfolio-card__chips {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dm-tech-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(255, 178, 0, 0.10);
  color: var(--yellow-500);
  border: 1px solid rgba(255, 178, 0, 0.30);
}
.dm-portfolio-card__cta {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  align-items: center;
}
.dm-tech-chip--muted {
  background: rgba(239, 239, 239, 0.06);
  color: rgba(239, 239, 239, 0.6);
  border-color: rgba(239, 239, 239, 0.18);
}

/* Capture mise en avant — variante carte portfolio */
.dm-shot--card { border-radius: 12px; }
.dm-shot--card .dm-shot__stage { padding: 22px 24px 16px; }
.dm-shot--card .dm-shot__img { aspect-ratio: 4 / 3; }
.dm-portfolio-card__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.dm-portfolio-card__thumb {
  width: calc((100% - 16px) / 3);
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  border: 1px solid rgba(239, 239, 239, 0.10);
  opacity: 0.78;
  transition: opacity var(--motion-fast);
}
.dm-portfolio-card__thumb:hover { opacity: 1; }

/* ============================================================
   Pagination
   ============================================================ */
.dm-pagination {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 60px;
}
.dm-pagination__pill {
  height: 36px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  background: var(--yellow-500);
  cursor: pointer;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background var(--motion-base);
}
.dm-pagination__pill:hover { background: var(--yellow-50); }
.dm-pagination__pill.is-disabled {
  background: rgba(255, 178, 0, 0.35);
  color: rgba(26, 26, 26, 0.55);
  cursor: default;
  pointer-events: none;
}
.dm-pagination__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: rgba(239, 239, 239, 0.45);
  min-width: 22px;
  text-align: center;
  cursor: pointer;
  line-height: 1;
  transition: color 180ms;
  text-decoration: none;
}
.dm-pagination__num:hover { color: var(--fg-1); }
.dm-pagination__num.is-active { color: var(--yellow-500); cursor: default; }
.dm-pagination__num.is-static { cursor: default; }

/* ============================================================
   Contact page + form
   ============================================================ */
/* Contact page = 1 viewport, pas de scroll */
body:has(.dm-page--contact) { overflow: hidden; }
.dm-page--contact { height: 100vh; }
.dm-page--contact .dm-footer {
  padding-top: 20px;
  padding-bottom: 20px;
}

.dm-contact-main {
  margin-left: 76px;
  width: 773px;
  padding: 40px 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 100px); /* viewport moins le footer compact */
}
.dm-contact-main h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  color: var(--yellow-500);
  margin: 0;
  line-height: 0.9;
}
.dm-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-end;
}
.dm-form__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dm-form__row {
  display: flex;
  gap: 27px;
}
.dm-form__row > * { flex: 1; }
.dm-input {
  width: 100%;
  height: 50px;
  border-radius: 5px;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 16px;
  background: transparent;
  color: var(--fg-1);
  border: 1px solid rgba(239, 239, 239, 0.55);
  outline: none;
  text-align: left;
  transition: color 180ms, border-color 180ms;
}
.dm-textarea {
  min-height: 130px;
  height: auto;
  padding: 18px 22px;
  resize: vertical;
}
.dm-input.is-active {
  color: var(--yellow-600);
  border-color: var(--yellow-600);
}
.dm-input.is-active::placeholder { color: rgba(240, 202, 0, 0.55); }
.dm-input:focus {
  border-color: var(--yellow-600);
  color: var(--yellow-600);
}
.dm-input:focus::placeholder { color: rgba(240, 202, 0, 0.55); }
.dm-form__success {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--yellow-500);
  font-weight: 700;
}

/* ============================================================
   Wordmark / Logo helpers (img sizing)
   ============================================================ */
.dm-wordmark-img { display: block; width: auto; }
.dm-logo-img { display: block; image-rendering: pixelated; }