/* xl - DESKTOP STYLES */ 
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }

.dk-hero {
  --bg: #0b0b0b;
  --paper: #f1eee8;
  --muted: #8f8b83;
  --line: rgba(241, 238, 232, 0.25);

  position: relative;
  width: 100%;
  height: 44vh;
  min-height: 350px;
  overflow: hidden;
  background: var(--bg);
  color: var(--paper);
}

.dk-hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-left: 11.4vw;
  padding-right: 6vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
}

/* WATERMARK — veliki, izbledeli tekst u pozadini */

.dk-hero-watermark {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.dk-hero-watermark span {
  position: absolute;
  left: -0.02em;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 198px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.045);
  white-space: nowrap;
}

.dk-hero-watermark span.wm-top { top: -30px; }
.dk-hero-watermark span.wm-bottom { bottom: -55px; left: 6vw; }


/* LEFT — TEKST */

.dk-hero-copy {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  max-width: 560px;
}

.dk-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 8px;
}

.dk-hero-title {
  margin: 0 0 9px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 66px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #f1eee8 !important;
}

.dk-hero-rule {
  width: 40px;
  height: 1px;
  background: var(--line);
  margin: 0 0 8px;
}

.dk-hero-meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: .85;
}


/* RIGHT — SLIKA, unutar istog 1200px boksa */

.dk-hero-photo {
  position: relative;
  z-index: 5;
  flex: 0 0 258px;
  width: 258px;
  align-self: flex-end;
  margin-bottom: 0;
  max-height: 100%;
  overflow: hidden;
}

.dk-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05) brightness(0.98);
}


/* SCROLL TRAKA ISPOD HERO-A */

.dk-hero-scroll {
  background: #eeeae3;
  text-align: center;
  padding: 22px 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #6b665d;
}


/* TABLET */

@media (max-width: 1100px) {
  .dk-hero {
    height: auto;
    min-height: 0;
  }

  .dk-hero-title {
    font-size: 44px;
  }

  .dk-hero-watermark span {
    font-size: 150px;
  }

  .dk-hero-photo {
    flex-basis: 320px;
    width: 320px;
  }
}


/* MOBILE */

@media (max-width: 767px) {
  .dk-hero-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 40px 0 0;
    gap: 20px;
  }

  .dk-hero-watermark { display: none; }

  .dk-hero-copy {
    order: 1;
    max-width: none;
    padding: 0 5vw;
  }

  .dk-hero-title {
    font-size: 34px;
  }

  .dk-hero-photo {
    order: 2;
    flex-basis: auto;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 5vw;
    align-self: auto;
  }
}